/* ==========================================================================
   MG ELECTRO — ajustements maison
   Chargé APRÈS main.css. Ne jamais modifier main.css : tout se règle ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bandeau défilant (header-top-section-5)
   Couleur primaire pleine, sans bloc blanc central, défilant, visible sur mobile.
   -------------------------------------------------------------------------- */
.header-top-section-5 {
  background-color: #CA9E5B;
  overflow: hidden;
  display: block;
}

/* Les deux pavés colorés latéraux du template laissaient du blanc au milieu */
.header-top-section-5::before,
.header-top-section-5::after {
  display: none;
  content: none;
}

/* Le bandeau était masqué sous 1399px : on le rend visible partout */
@media (max-width: 1399px) {
  .header-top-section-5 {
    display: block;
  }
}

.header-top-section-5 .container-fluid {
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

.header-top-section-5 .header-top-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  height: 44px; /* hauteur fixe : .header-1 est en position absolue et se cale dessus */
  padding: 0;
  animation: mg-marquee 45s linear infinite;
  will-change: transform;
}

/* Le header est en position:absolute avec top:0. Le template annulait son
   décalage sous 1399px parce que le bandeau y était masqué — il le recouvrait
   donc entièrement. On rétablit le décalage à la hauteur réelle du bandeau. */
@media (max-width: 1399px) {
  .header-1 {
    margin-top: 38px;
  }
  .header-top-section-5 .header-top-inner {
    height: 38px;
  }
}

.header-top-section-5:hover .header-top-inner {
  animation-play-state: paused;
}

.header-top-section-5 .header-top-inner .text {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 35px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.header-top-section-5 .header-top-inner .text img {
  filter: brightness(0) invert(1);
  margin-right: 8px;
  width: 14px;
  height: auto;
  flex: 0 0 auto;
}

/* La piste contient 2 séries identiques : -50% reboucle sans saut */
@keyframes mg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .header-top-section-5 .header-top-inner {
    animation-duration: 30s;
  }
  .header-top-section-5 .header-top-inner .text {
    padding: 0 22px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-top-section-5 .header-top-inner {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .header-top-section-5 .header-top-inner .text:not(:first-child) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   1 bis. Bouton menu (mobile) — dessiné en CSS, sans police d'icônes
   Le template rend ce bouton avec le seul glyphe fa-align-right. Il n'a donc
   aucun contenu propre : si Font Awesome n'est pas chargée, le bouton devient
   totalement invisible et la navigation mobile est inaccessible. C'est le cas
   quand la page est ouverte en file:// (double-clic sur le fichier) : le
   navigateur bloque les @font-face pour cette origine, exactement comme il
   bloque les textures WebGL du bandeau.
   On dessine donc les trois barres en CSS. Le rendu est le même, mais il ne
   dépend plus d'aucune police. Les trois sélecteurs reprennent celui de
   main.css:1832 pour rester au-dessus dans la cascade.

   COMPATIBILITÉ : aucune propriété récente ici. Pas de flexbox ni de « gap »
   (gap dans un conteneur flex date de Chrome 84 seulement — sur un navigateur
   plus ancien les trois barres se collaient en un pavé, d'où un bouton menu
   qui « s'affiche mal »). Trois blocs, une largeur, une marge : reconnu par
   tous les navigateurs mobiles, y compris les navigateurs d'origine des
   téléphones d'entrée de gamme.
   -------------------------------------------------------------------------- */
.header-main .header-right .header__hamburger .sidebar__toggle {
  display: block;
  width: 22px;
  padding: 7px 0;   /* garde une zone tactile de 28px de haut */
  font-size: 0;     /* supprime tout espace de ligne parasite */
  line-height: 0;
}

/* Les trois barres : haut (::before), milieu (le <i>), bas (::after).
   margin-left:auto sur une largeur fixée = alignement à droite, sans flexbox. */
.header-main .header-right .header__hamburger .sidebar__toggle::before,
.header-main .header-right .header__hamburger .sidebar__toggle::after,
.header-main .header-right .header__hamburger .sidebar__toggle i {
  display: block;
  height: 2px;
  margin-left: auto;
  margin-right: 0;
  background-color: currentColor;   /* suit la couleur définie par le template */
}

.header-main .header-right .header__hamburger .sidebar__toggle::before {
  content: "";
  width: 22px;
  margin-bottom: 4px;
}

/* Le <i> devient la barre du milieu, plus courte : mis à 0, sa police
   d'icônes ne peut plus rien peindre. */
.header-main .header-right .header__hamburger .sidebar__toggle i {
  width: 15px;
  margin-bottom: 4px;
  font-size: 0;
}

.header-main .header-right .header__hamburger .sidebar__toggle::after {
  content: "";
  width: 22px;
}

/* --------------------------------------------------------------------------
   1 ter. Panier visible sur mobile
   Le template masque tout le bloc .header-icon sous 1400px (main.css:1806) :
   le panier disparaissait donc sur mobile ET sur tablette. On le rétablit.
   Le téléphone reste masqué pour ne pas charger un header de 375px ; pour
   l'afficher aussi, il suffit de supprimer la règle sur :first-child.
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .header-main .header-right .header-icon {
    display: block;          /* un seul élément affiché : pas besoin de flex */
    margin-right: 18px;      /* écart avec le bouton menu, sans « gap » */
  }
  /* On neutralise le gap du template (main.css:1768) : sans cela l'écart vaut
     43px là où gap est reconnu et 18px ailleurs. La marge seule donne 18px
     partout. */
  .header-main .header-right {
    gap: 0;
  }
  /* 1er élément = le lien téléphone (ordre identique sur toutes les pages) */
  .header-main .header-right .header-icon > li:first-child {
    display: none;
  }
}

/* Le bloc de gauche réserve 150px entre le logo et le menu (main.css:1866).
   Sous 1200px, meanmenu replie le menu (meanScreenWidth 1199 dans main.js) :
   cet espace ne sépare alors plus rien, mais il occupe toujours 150px et
   poussait le panier et le bouton menu hors de l'écran. */
@media (max-width: 1199px) {
  .header-1 .header-main .header-left {
    gap: 0;
  }
}

/* Comme le bouton menu, l'icône n'est qu'un glyphe : sans la police, le panier
   resterait invisible. On la dessine à partir d'un tracé embarqué dans le CSS.

   COMPATIBILITÉ : une simple background-image, reconnue par tous les
   navigateurs. Surtout pas de masque CSS (mask / -webkit-mask) ni de variable
   var() : là où ils ne sont pas gérés, il ne resterait qu'un carré blanc de
   22px à la place du panier. Le tracé est blanc en dur, ce que permet le fait
   que toutes les pages du site utilisent l'en-tête sombre (class="header-1",
   icônes en blanc — main.css:1811).

   Ciblé sur .fa-cart-shopping uniquement : au-dessus de 1400px le lien
   téléphone réapparaît, et il doit garder sa propre icône. */
.header-main .header-right .header-icon li a i.fa-cart-shopping {
  display: block;
  width: 22px;
  height: 22px;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 2.6h2.4l2.5 11.6a1.7 1.7 0 0 0 1.7 1.3h8.8a1.7 1.7 0 0 0 1.7-1.3l1.6-7.3H5'/%3E%3Ccircle cx='9.2' cy='20' r='1.5'/%3E%3Ccircle cx='17.4' cy='20' r='1.5'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 22px 22px;   /* valeur explicite plutôt que « contain » */
}

/* Au défilement, le JS ajoute .sticky : l'en-tête passe au blanc et le
   template bascule ses icônes en sombre (main.css:2043). Le tracé étant figé
   dans l'image, il faut sa version sombre — sans quoi le panier reste blanc
   sur blanc, donc invisible. Le bouton menu, lui, suit tout seul : il est
   peint avec currentColor. */
.sticky.header-1 .header-main .header-right .header-icon li a i.fa-cart-shopping {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 2.6h2.4l2.5 11.6a1.7 1.7 0 0 0 1.7 1.3h8.8a1.7 1.7 0 0 0 1.7-1.3l1.6-7.3H5'/%3E%3Ccircle cx='9.2' cy='20' r='1.5'/%3E%3Ccircle cx='17.4' cy='20' r='1.5'/%3E%3C/svg%3E");
}

/* La pastille du nombre d'articles doit rester lisible à côté d'une icône
   de 22px et ne pas dépasser du header. */
.header-main .header-right .header-icon li a .number {
  top: -8px;
  right: -9px;
}

/* --------------------------------------------------------------------------
   2. Slider d'accueil — affichage des photos
   Le template compte sur un rendu WebGL pour peindre les visuels. Quand ce
   rendu n'aboutit pas (conteneur de hauteur nulle, WebGL indisponible,
   contexte perdu), il ne restait que le fond #222 codé en dur : un écran noir.
   On affiche donc les photos en fond CSS, indépendamment du WebGL.
   -------------------------------------------------------------------------- */
#canvas-slider {
  height: 100vh;      /* sans hauteur explicite, le conteneur retombait à 0 */
  min-height: 480px;
}

/* Sur un écran étroit, un bandeau plein écran ne laisse voir qu'une bande
   verticale d'une photo au format paysage (cadrage « cover ») : environ 23 %
   de sa largeur sur un 375 x 812. On raccourcit le bandeau pour élargir la
   part visible de la photo. Les trois éléments doivent garder la même hauteur,
   sinon le texte et le visuel se désalignent. */
@media (max-width: 575px) {
  .showcase-slider-wrappper,
  .hero-1,
  #canvas-slider {
    height: 72vh;
    min-height: 500px;
  }
  /* Le retrait haut du template (180px) est calibré pour un bandeau plein
     écran : dans un bandeau raccourci, le bloc texte débordait par le bas sur
     les écrans courts (360 x 640). */
  .hero-1 {
    padding-top: 150px;
  }
}

#canvas-slider .slider-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* Les <img class="slide-img"> ne servent que de source de textures à webgl.js :
   elles s'affichaient en taille réelle (2048 x 1024) par-dessus la photo de
   fond — doublon décadré, et bandeau totalement déformé sur mobile. L'ancien
   canvas opaque les masquait par accident ; on les masque explicitement.
   Leur attribut src reste lu par webgl.js. */
#canvas-slider .slide-img {
  display: none;
}

/* La photo du slide actif est visible ; les autres restent en attente. */
#canvas-slider .slider-img.mg-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Voile sombre : garde le texte blanc lisible sur n'importe quelle photo.
   Volontairement léger pour ne pas ternir les visuels — à ajuster ici si le
   texte manque de contraste sur une photo claire. */
#canvas-slider::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.45) 0%, rgba(18, 18, 18, 0.25) 45%, rgba(18, 18, 18, 0.5) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Le canvas WebGL, s'il rend correctement, se superpose aux fonds CSS.
   Il est transparent (voir webgl.js) : si le rendu n'aboutit pas, la photo
   posée en fond reste visible au lieu d'un aplat noir. */
#canvas-slider canvas {
  position: relative;
  z-index: 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   3. Slider d'accueil — blocs de texte centrés
   -------------------------------------------------------------------------- */
.hero-1 .hero-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-1 .hero-button {
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 575px) {
  .hero-1 .hero-content {
    max-width: 100%;
  }
  /* Écart entre les deux boutons par marge : « gap » n'est pas reconnu dans un
     conteneur flex par les navigateurs mobiles anciens. */
  .hero-1 .hero-button .theme-btn + .theme-btn {
    margin-left: 12px;
  }
  /* Écart vertical au passage à la ligne, par la technique marge + marge
     négative compensatrice : exacte, et antérieure à row-gap. */
  .hero-1 .hero-button {
    margin-bottom: -12px;
  }
  .hero-1 .hero-button .theme-btn {
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   3. Bloc « Nos Engagements » (accueil, entre les deux grilles produits)
   -------------------------------------------------------------------------- */
.mg-engagement-box {
  height: 100%;
  padding: 40px 30px;
  border: 1px solid #D4D4D4;
  background-color: #FFFFFF;
  transition: all 0.35s ease;
}

.mg-engagement-box:hover {
  border-color: var(--theme, #CA9E5B);
  transform: translateY(-6px);
}

.mg-engagement-box .icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(202, 158, 91, 0.12);
  color: var(--theme, #CA9E5B);
  font-size: 24px;
  margin-bottom: 25px;
  transition: all 0.35s ease;
}

.mg-engagement-box:hover .icon {
  background-color: var(--theme, #CA9E5B);
  color: #FFFFFF;
}

.mg-engagement-box h3 {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 12px;
}

.mg-engagement-box p {
  margin-bottom: 0;
  font-size: 15px;
}

@media (max-width: 991px) {
  .mg-engagement-box {
    padding: 30px 25px;
  }
}

/* --------------------------------------------------------------------------
   4. Accueil — « Explorez Nos Catégories »
   Les étiquettes étaient collées en bas à gauche de chaque visuel.
   On les centre horizontalement, en les gardant en bas pour ne pas
   masquer le produit au milieu de la photo.
   -------------------------------------------------------------------------- */
.categorie-wrapper .categorie-left-image .title,
.categorie-wrapper .categorie-right-image .title {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 24px;
  transform: translateX(-50%);
  text-align: center;
  max-width: calc(100% - 32px);
  line-height: 1.3;
}

@media (max-width: 575px) {
  .categorie-wrapper .categorie-left-image .title,
  .categorie-wrapper .categorie-right-image .title {
    font-size: 15px;
    padding: 10px 12px;
    bottom: 16px;
    max-width: calc(100% - 24px);
  }
}

/* --------------------------------------------------------------------------
   5. Pages boutique et catégories
   Le texte d'introduction touchait presque la barre « n produits / Trier par ».
   -------------------------------------------------------------------------- */
.shop-section .section-title.text-center + .gt-shop-notices-wrapper {
  margin-top: 45px;
}

@media (max-width: 767px) {
  .shop-section .section-title.text-center + .gt-shop-notices-wrapper {
    margin-top: 30px;
  }
}

/* --------------------------------------------------------------------------
   6. Commande — le menu déroulant doit être identique aux autres champs
   nice-select remplace le <select> natif : on le réaligne sur les inputs.
   -------------------------------------------------------------------------- */
.checkout-main-item .checkout-left .nice-select-wrapper .nice-select {
  float: none;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px; /* aligné sur la hauteur des <input> voisins */
  color: var(--text);
  background-color: transparent;
  border: 1px solid #D4D4D4;
  border-radius: 0;
}

.checkout-main-item .checkout-left .nice-select-wrapper .nice-select:hover,
.checkout-main-item .checkout-left .nice-select-wrapper .nice-select:focus,
.checkout-main-item .checkout-left .nice-select-wrapper .nice-select.open {
  border-color: #D4D4D4;
}

.checkout-main-item .checkout-left .nice-select-wrapper .nice-select::after {
  right: 20px;
  border-color: #888;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.checkout-main-item .checkout-left .nice-select-wrapper .nice-select .list {
  width: 100%;
  border-radius: 0;
  max-height: 280px;
  overflow-y: auto;
}

.checkout-main-item .checkout-left .nice-select-wrapper .nice-select .option {
  font-size: 14px;
  line-height: 38px;
  min-height: 38px;
}

/* Champ non renseigné : signalé au moment de la validation */
.checkout-main-item .checkout-left .nice-select-wrapper.mg-invalid .nice-select {
  border-color: #E02B2B;
}

/* --------------------------------------------------------------------------
   7. Cartes produit — deux actions : Ajouter au panier / Acheter
   Le template n'en prévoyait qu'une, positionnée en absolu. On déplace
   l'animation d'apparition sur le conteneur et on remet les boutons en flux.
   -------------------------------------------------------------------------- */
.shop-card-items .thumb .mg-card-actions {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -50px;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  z-index: 2;
}

.shop-card-items:hover .thumb .mg-card-actions {
  opacity: 1;
  visibility: visible;
  bottom: 16px;
}

/* position:relative indispensable : les ::before/::after de .theme-btn sont en
   position absolue. En static ils se calaient sur .thumb et l'effet de
   remplissage d'un bouton recouvrait les deux.

   Les quatre décalages doivent être remis à auto. Le template place ce bouton
   en absolu dans .thumb avec bottom:-50px et left:15px (main.css:4625), et
   bottom:16px au survol (main.css:4769). En position:relative ces valeurs ne
   sortent plus le bouton du flux : elles le DÉPLACENT. D'où, sur mobile,
   « Acheter » poussé 50px vers le bas, hors de .thumb qui est en
   overflow:hidden — donc invisible — et les deux boutons décalés de 15px vers
   la droite, donc décentrés. */
.shop-card-items .thumb .mg-card-actions .theme-btn {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  opacity: 1;
  visibility: visible;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  background-color: var(--header, #121212);
  color: #FFFFFF;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* On neutralise le remplissage animé du template sur ces deux boutons :
   chacun change simplement de couleur, sans jamais déborder sur l'autre. */
.shop-card-items .thumb .mg-card-actions .theme-btn::before,
.shop-card-items .thumb .mg-card-actions .theme-btn::after {
  content: none;
  display: none;
}

.shop-card-items .thumb .mg-card-actions .theme-btn:hover,
.shop-card-items .thumb .mg-card-actions .theme-btn:focus,
.shop-card-items .thumb .mg-card-actions .theme-btn:active,
.shop-card-items .thumb .mg-card-actions .theme-btn.mg-clicked {
  background-color: var(--theme, #CA9E5B);
  color: #FFFFFF;
}

.shop-card-items .thumb .mg-card-actions .theme-btn i {
  margin-left: 0;
  margin-right: 6px;
}

/* Sur tactile le survol n'existe pas : les boutons restent visibles */
@media (max-width: 991px) {
  .shop-card-items .thumb .mg-card-actions {
    position: static;
    opacity: 1;
    visibility: visible;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 12px 15px 0;
  }
}

/* Écart entre les deux boutons par marge, et non par « gap » : sur un
   navigateur mobile ancien, gap n'est pas reconnu dans un conteneur flex et
   les deux boutons se touchaient. */
.shop-card-items .thumb .mg-card-actions .theme-btn + .theme-btn {
  margin-left: 8px;
}

@media (max-width: 400px) {
  .shop-card-items .thumb .mg-card-actions {
    flex-direction: column;
  }
  /* empilés : l'écart passe de l'horizontale à la verticale */
  .shop-card-items .thumb .mg-card-actions .theme-btn + .theme-btn {
    margin-left: 0;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   7 bis. Prix — gras et doré partout
   La fiche produit et l'aperçu rapide affichaient déjà le prix en doré gras
   (main.css:7154), mais pas les cartes de la boutique, restées en gris à 500.
   On aligne tous les emplacements sur la même présentation.
   -------------------------------------------------------------------------- */
.shop-card-items .shop-content .content h4 {
  color: var(--theme, #CA9E5B);
  font-weight: 700;
}

/* Totaux du panier et de la commande */
#cart-total,
#mg-order-total,
.mg-order-modal .mg-modal-table .mg-modal-total td:last-child {
  color: var(--theme, #CA9E5B);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. Récapitulatif de commande hors page checkout
   Le template ne dimensionne .item-img que sous .checkout-main-item :
   sur order-confirm.html l'image s'affichait à sa taille naturelle.
   -------------------------------------------------------------------------- */
/* Écarts en marges plutôt qu'en « gap » sur tout ce bloc : voir la note du
   bouton menu — gap dans un conteneur flex n'est pas reconnu par les
   navigateurs mobiles anciens, et les éléments se retrouvent collés. */
.order-list-box .order-item > * + * {
  margin-left: 15px;
}

.order-list-box .order-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #EEEEEE;
}

.order-list-box .order-item:last-child {
  border-bottom: none;
}

.order-list-box .order-item .item-img {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  overflow: hidden;
  background: #F7F7F7;
}

.order-list-box .order-item .item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* jamais de déformation */
}

.order-list-box .order-item .item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.order-list-box .order-item .item-info .name {
  margin-bottom: 4px;
  font-size: 15px;
}

.order-list-box .order-item .item-info .price {
  margin-bottom: 0;
  font-size: 13px;
  opacity: 0.7;
}

.order-list-box .order-item .qty-control {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Garde-fou général : aucune image ne peut déborder de son conteneur */
.order-list-box img,
.mg-order-modal img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   9. Confirmation de commande (fenêtre affichée après validation)
   -------------------------------------------------------------------------- */
.mg-order-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mg-order-modal .mg-modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(18, 18, 18, 0.65);
  animation: mg-fade 0.25s ease;
}

.mg-order-modal .mg-modal-box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  padding: 45px 40px 35px;
  animation: mg-pop 0.3s ease;
}

@keyframes mg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-pop {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mg-order-modal .mg-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  border: none;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}

.mg-order-modal .mg-modal-close:hover { color: #121212; }

.mg-order-modal .mg-modal-head { text-align: center; }

.mg-order-modal .mg-modal-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(202, 158, 91, 0.12);
  color: var(--theme, #CA9E5B);
  font-size: 34px;
}

.mg-order-modal .mg-modal-head h2 { font-size: 26px; line-height: 1.3; margin-bottom: 12px; }
.mg-order-modal .mg-modal-head p { font-size: 15px; margin-bottom: 0; }

.mg-order-modal .mg-modal-ref > * + * {
  margin-left: 15px;
}

.mg-order-modal .mg-modal-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 20px;
  padding: 14px 20px;
  background: #F7F7F7;
  border: 1px dashed #D4D4D4;
}

.mg-order-modal .mg-modal-ref span { font-size: 14px; }
.mg-order-modal .mg-modal-ref strong { font-size: 17px; letter-spacing: 0.04em; }

.mg-order-modal .mg-modal-warn {
  margin-bottom: 20px;
  padding: 14px 18px;
  font-size: 14px;
  color: #8A4B00;
  background: rgba(202, 158, 91, 0.12);
  border-left: 3px solid var(--theme, #CA9E5B);
}

.mg-order-modal .mg-modal-warn i { margin-right: 6px; }

.mg-order-modal .mg-modal-table table { width: 100%; border-collapse: collapse; }

.mg-order-modal .mg-modal-table td {
  padding: 12px 0;
  border-bottom: 1px solid #EEEEEE;
  font-size: 15px;
  vertical-align: top;
}

.mg-order-modal .mg-modal-table td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.mg-order-modal .mg-modal-table td span { font-size: 13px; opacity: 0.7; }

.mg-order-modal .mg-modal-table .mg-modal-total td {
  border-bottom: none;
  padding-top: 16px;
  font-size: 18px;
  font-weight: 700;
}

.mg-order-modal .mg-modal-infos {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EEEEEE;
}

.mg-order-modal .mg-modal-infos p > * + * {
  margin-left: 12px;
}

.mg-order-modal .mg-modal-infos p {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.mg-order-modal .mg-modal-infos p span {
  flex: 0 0 110px;
  opacity: 0.65;
}

.mg-order-modal .mg-modal-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Le bouton principal occupe toute la ligne : son écart avec les deux boutons
   du dessous est une marge basse, et l'écart entre ces deux-là une marge
   gauche. Aucun « gap » : le placement reste juste sur les navigateurs
   mobiles anciens. */
.mg-order-modal .mg-modal-actions .theme-btn {
  flex: 1 1 100%;
  text-align: center;
  margin-bottom: 12px;
}

.mg-order-modal .mg-modal-actions .mg-btn-ghost + .mg-btn-ghost {
  margin-left: 12px;
}

.mg-order-modal .mg-modal-actions .mg-btn-ghost {
  flex: 1 1 0;
  text-align: center;
  padding: 12px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #121212;
  border: 1px solid #D4D4D4;
  transition: all 0.3s ease;
}

.mg-order-modal .mg-modal-actions .mg-btn-ghost:hover {
  border-color: var(--theme, #CA9E5B);
  color: var(--theme, #CA9E5B);
}

@media (max-width: 575px) {
  .mg-order-modal { padding: 12px; }
  .mg-order-modal .mg-modal-box { padding: 38px 22px 26px; }
  .mg-order-modal .mg-modal-head h2 { font-size: 21px; }
  /* Passage en colonne : les écarts horizontaux posés plus haut deviennent
     verticaux, sinon le second élément se retrouve indenté. */
  .mg-order-modal .mg-modal-infos p { flex-direction: column; }
  .mg-order-modal .mg-modal-infos p > * + * { margin-left: 0; margin-top: 2px; }
  .mg-order-modal .mg-modal-infos p span { flex: none; }
  .mg-order-modal .mg-modal-actions .mg-btn-ghost { flex: 1 1 100%; }
  .mg-order-modal .mg-modal-actions .mg-btn-ghost + .mg-btn-ghost { margin-left: 0; margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   10. Pied de page allégé
   -------------------------------------------------------------------------- */
/* Respiration entre le bloc d'informations et le bandeau orange du bas */
.footer-section .footer-widget-wrapper {
  padding-bottom: 55px;
}

@media (max-width: 767px) {
  .footer-section .footer-widget-wrapper {
    padding-bottom: 35px;
  }
}

/* Réseaux sociaux centrés en version mobile */
@media (max-width: 767px) {
  .footer-section .footer-head {
    justify-items: center;
  }
  .footer-section .footer-head .social-icon {
    width: 100%;
    justify-content: center;
  }
}

.footer-section .single-widget-items .footer-content p {
  margin-bottom: 12px;
}

.footer-section .footer-bottom-wrapper {
  flex-wrap: wrap;
}

.footer-section .footer-bottom-wrapper > * {
  margin-bottom: 10px;   /* respiration au passage à la ligne, sans « gap » */
}

.footer-section .footer-bottom-wrapper .mg-legal a {
  color: inherit;
  opacity: 0.75;
}

.footer-section .footer-bottom-wrapper .mg-legal a:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   11. Préloader — centrage garanti
   Le template ne centre son contenu que par le flex de .preloader
   (main.css:422). Le bloc reste donc tributaire de ce contexte : height:100%
   suppose un bloc conteneur mesuré, et le moindre ancêtre transformé fait
   retomber le position:fixed sur cet ancêtre plutôt que sur la fenêtre.
   On ancre le bloc au centre par ses propres coordonnées : le centrage ne
   dépend plus que de .preloader, quelle que soit sa mise en page.
   -------------------------------------------------------------------------- */
/* Les quatre côtés ancrés, largeur et hauteur déduites : aucune résolution de
   pourcentage en jeu. Surtout pas 100vw/100vh, qui incluent la barre de
   défilement et décalent le contenu de sa moitié. */
.preloader {
  top: 0;          /* écrit côté par côté : « inset » n'existe qu'à partir de */
  right: 0;        /* Chrome 87, et ce fichier doit tenir sur des téléphones  */
  bottom: 0;       /* plus anciens.                                            */
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

/* position:fixed, et non absolute : le bloc se cale sur la fenêtre, pas sur
   .preloader. C'est ce qui corrige le défaut constaté — au tout début du
   chargement, .preloader peut mesurer plus que l'écran (425 x 921 relevés sur
   shop.html pour une fenêtre de 375 x 812). Centrer dans un bloc plus grand
   que l'écran pousse le contenu vers le bas et vers la droite : c'est
   exactement le préloader affiché en bas à droite. */
.preloader .animation-preloader {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);   /* anciens WebKit mobiles */
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  text-align: center;       /* le <p> et les lettres suivent */
}

/* Le rond tournant est centré par ses marges auto : elles n'opèrent que si
   sa largeur ne remplit pas la ligne. */
.preloader .animation-preloader .spinner {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   12. Filtres des pages boutique et catégorie
   Barre horizontale au-dessus de la grille : le gabarit n'a pas de colonne
   latérale, un panneau vertical entrerait en conflit avec la mise en page.
   Repliée par défaut sur mobile, toujours ouverte sur grand écran.
   -------------------------------------------------------------------------- */
.mg-filtres {
  margin-bottom: 30px;
  border: 1px solid #E4E4E4;
  background: #FFFFFF;
}

.mg-filtres-bascule {
  display: none;              /* visible seulement sous 992px */
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: #121212;
  text-align: left;
  cursor: pointer;
}

.mg-filtres-bascule i {
  margin-right: 8px;
  color: var(--theme, #CA9E5B);
}

.mg-filtres-bascule #mg-filtres-nb {
  color: var(--theme, #CA9E5B);
  font-weight: 700;
}

.mg-filtres-corps {
  display: flex;
  flex-wrap: wrap;
  padding: 22px 20px 8px;
}

/* Écarts en marges et non en « gap » : voir la note du bouton menu. */
.mg-filtre-groupe {
  flex: 1 1 210px;
  min-width: 0;
  margin: 0 24px 18px 0;
}

.mg-filtre-groupe h4 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #121212;
}

.mg-filtre-groupe ul {
  max-height: 190px;
  overflow-y: auto;
  margin: 0;
  padding: 0 6px 0 0;
  list-style: none;
}

.mg-filtre-groupe li {
  margin-bottom: 7px;
}

.mg-filtre-groupe label {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  color: #4A4A4A;
  cursor: pointer;
}

.mg-filtre-groupe input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  accent-color: var(--theme, #CA9E5B);
  cursor: pointer;
}

.mg-filtre-texte {
  flex: 1 1 auto;
  text-transform: capitalize;
}

.mg-filtre-nb {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 12px;
  color: #9A9A9A;
}

/* Critère qui ne donnerait aucun résultat compte tenu des autres : grisé,
   mais laissé cliquable pour ne pas piéger l'utilisateur. */
.mg-filtre-vide {
  opacity: 0.4;
}

.mg-filtre-prix {
  display: flex;
  align-items: center;
}

.mg-filtre-prix input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #D4D4D4;
  font-size: 14px;
}

.mg-filtre-prix span {
  flex: 0 0 auto;
  padding: 0 8px;
  color: #9A9A9A;
}

#mg-filtre-recherche {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #D4D4D4;
  font-size: 14px;
}

.mg-filtres-raz {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--theme, #CA9E5B);
  text-decoration: underline;
  cursor: pointer;
}

.mg-filtres-raz:hover {
  color: #121212;
}

@media (max-width: 991px) {
  .mg-filtres-bascule {
    display: block;
  }
  .mg-filtres-corps {
    display: none;
    border-top: 1px solid #E4E4E4;
  }
  .mg-filtres-ouvert .mg-filtres-corps {
    display: flex;
  }
  /* Filtres actifs : la barre repliée doit le signaler. */
  .mg-filtres-actifs .mg-filtres-bascule {
    background: rgba(202, 158, 91, 0.08);
  }
  .mg-filtre-groupe {
    flex: 1 1 100%;
    margin-right: 0;
  }
}