/* ══════════════════════════════════════════════════════════════════
   BrahimGSM — Pages : catalogue, fiche produit, panier, commande,
   compte, contact, guides, 404. Langage visuel Force Mobiles.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Catalogue ──────────────────────────────────────────────────
   Rembourrage haut reduit : la banniere du catalogue ferme deja sur
   64px, et le .container interieur ajoutait 64px de plus (py-lg-5,
   retire du gabarit). Les trois se cumulaient en 184px de vide entre
   le titre et la barre d'outils. */
.mg-catalog-page { padding-block: clamp(20px, 2.2vw, 30px) var(--mg-section); }
.mg-catalog-layout { display: grid; gap: var(--mg-sp-8); }
@media (min-width: 992px) { .mg-catalog-layout { grid-template-columns: 268px minmax(0, 1fr); align-items: start; } }

/* ── Panneau de filtres ────────────────────────────────────────────
   Compact par construction : le panneau doit tenir dans un ecran pour
   rester lisible une fois colle. Le decoupage tete-a-filet / corps-a-
   rembourrage a saute au profit d'une seule colonne reguliere. */
.mg-catalog-filters, .mg-filters {
    background: var(--mg-panel);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
    box-shadow: var(--mg-sh-sm);
    padding: var(--mg-sp-5);
    display: flex; flex-direction: column;
    gap: var(--mg-sp-4);
}

.mg-filter-field { display: flex; flex-direction: column; gap: var(--mg-sp-2); }
.mg-filter-field > label {
    font-family: var(--mg-font-head);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .01em;
    color: var(--mg-ink-muted);
}

/* Champs — memes metriques pour la recherche, les listes et les nombres,
   sinon la colonne se met a onduler. */
.mg-catalog-filters select,
.mg-catalog-filters input[type="search"],
.mg-catalog-filters input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit; font-size: .92rem;
    color: var(--mg-ink);
    background: var(--mg-bg);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-sm);
    transition: border-color var(--mg-t-fast), box-shadow var(--mg-t-fast);
    appearance: none; -webkit-appearance: none;
}
.mg-catalog-filters select {
    /* Chevron dessine en fond : `appearance:none` supprime celui du systeme. */
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
    cursor: pointer;
}
.mg-catalog-filters select:focus,
.mg-catalog-filters input:focus {
    outline: none;
    border-color: var(--mg-cyan);
    box-shadow: 0 0 0 3px rgba(14, 165, 201, .16);
}

/* Recherche — la loupe est decorative, d'ou le rembourrage a droite pour
   que la saisie ne passe jamais dessous. */
.mg-filter-search { position: relative; }
.mg-filter-search input[type="search"] { padding-right: 40px; }
.mg-filter-search i {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--mg-ink-muted); font-size: .95rem;
    pointer-events: none;
}
.mg-filter-search input::-webkit-search-cancel-button { cursor: pointer; }

.mg-filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mg-sp-2); }

.mg-filter-apply {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--mg-font-head);
    font-size: .95rem; font-weight: 700;
    color: #fff; background: var(--mg-orange);
    border: 0; border-radius: var(--mg-r-sm);
    cursor: pointer;
    box-shadow: var(--mg-sh-orange);
    transition: background var(--mg-t-fast), transform var(--mg-t-fast);
}
.mg-filter-apply:hover { background: var(--mg-orange-600); }
.mg-filter-apply:active { transform: translateY(1px); }

/* Repli des filtres fins — bouton nu, pour ne pas concurrencer « Appliquer ». */
.mg-filter-more {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0;
    font-family: var(--mg-font-head);
    font-size: .8rem; font-weight: 700;
    color: var(--mg-navy);
    background: none; border: 0; cursor: pointer;
}
.mg-filter-more:hover { color: var(--mg-orange); }
/* Bouton-texte de 21px de haut : trop fin pour le doigt. On l'amene au
   seuil tactile sur mobile seulement, pour ne pas allonger le panneau
   colle sur grand ecran, ou le pointeur suffit. */
@media (max-width: 991.98px) { .mg-filter-more { min-height: 44px; } }
.mg-filter-more i { font-size: .8rem; transition: transform var(--mg-t-base); }
.mg-filter-more[aria-expanded="true"] i { transform: rotate(180deg); }

.mg-filter-extra {
    display: flex; flex-direction: column; gap: var(--mg-sp-4);
    padding-top: var(--mg-sp-4);
    border-top: 1px solid var(--mg-border-soft);
}
/* .collapse pose display:none ; il faut le battre quand le bloc est ouvert. */
.mg-filter-extra.show { display: flex; }

.mg-filter-check {
    display: flex; align-items: center; gap: var(--mg-sp-3);
    font-size: .88rem; color: var(--mg-ink-soft);
    cursor: pointer;
}
.mg-filter-check input[type="checkbox"] {
    width: 17px; height: 17px; flex-shrink: 0;
    accent-color: var(--mg-orange);
    cursor: pointer;
}

.mg-filter-reset {
    text-align: center;
    font-size: .82rem; color: var(--mg-ink-muted);
    text-decoration: underline;
}
.mg-filter-reset:hover { color: var(--mg-orange); }

/* ── Colonne de filtres collante ───────────────────────────────────
   Le `position: sticky` portait auparavant sur le FORMULAIRE, dont le
   parent (l'enveloppe .collapse) epouse exactement sa hauteur. Un
   element colle ne peut se deplacer que dans les limites de son parent :
   avec zero pixel de marge de manoeuvre, il ne bougeait jamais.

   On le pose donc sur l'enveloppe elle-meme, enfant direct du <aside>.
   Le <aside> est etire sur toute la hauteur de la rangee flex (~1620px
   contre ~800px pour le formulaire), ce qui laisse la course necessaire.

   L'entete est collante — c'est .site-header-wrap, le PARENT du <header>,
   qui porte le `position: sticky`. Le decalage doit donc la degager, sinon
   le panneau vient se ranger dessous et se fait rogner. `--mg-header-total`
   est remesure au chargement et au redimensionnement par app.js ; le repli
   a 121px couvre le premier rendu et le cas ou le script ne tourne pas. */
@media (min-width: 992px) {
    .mg-catalog-filters-dock {
        position: sticky;
        top: calc(var(--mg-header-total, 121px) + 20px);
        /* Sur une fenetre courte le panneau depasse : il defile en interne
           plutot que de voir son bas — dont le bouton « Appliquer » —
           coupe hors de l'ecran. */
        max-height: calc(100vh - var(--mg-header-total, 121px) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* Titre du panneau — plus de filet ni de petites capitales : le panneau
   est court, un intitule net suffit a le coiffer. */
.mg-catalog-filters__head { display: flex; align-items: center; }
.mg-catalog-filters__head h2 {
    display: flex; align-items: center; gap: var(--mg-sp-2);
    font-family: var(--mg-font-head);
    font-size: 1.12rem; font-weight: 800;
    letter-spacing: -.02em; color: var(--mg-navy);
    margin: 0;
}
.mg-catalog-filters__head h2 i { color: var(--mg-orange); font-size: 1.05rem; }

.mg-filters__group {
    padding: var(--mg-sp-5); display: flex; flex-direction: column; gap: var(--mg-sp-6);
}
.mg-filters__group + .mg-filters__group { border-top: 1px solid var(--mg-border-soft); }
.mg-filters__title {
    font-family: var(--mg-font-head); font-size: .8rem; font-weight: 600;
    margin-bottom: var(--mg-sp-3); color: var(--mg-ink);
}
.mg-catalog-filters-toggle { width: 100%; }
@media (min-width: 992px) { .mg-catalog-filters-toggle { display: none; } }

.mg-catalog-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--mg-sp-3); margin-bottom: var(--mg-sp-6);
    padding: var(--mg-sp-3) var(--mg-sp-5);
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-md);
}
.mg-catalog-toolbar__count, .mg-catalog-count { font-family: var(--mg-font-head); font-weight: 600; font-size: .9rem; }
.mg-catalog-toolbar__sort { display: flex; align-items: center; gap: var(--mg-sp-2); }
.mg-catalog-toolbar__sort .form-select { width: auto; padding-block: 8px; }
.mg-catalog-pagination { margin-top: var(--mg-sp-12); }

.mg-category-seo { margin-top: var(--mg-sp-12); padding-top: var(--mg-sp-8); border-top: 1px solid var(--mg-border); }
.mg-category-seo__p { margin-bottom: var(--mg-sp-4); color: var(--mg-ink-soft); line-height: 1.8; max-width: 74ch; }

/* Etats vides */
.mg-catalog-empty, .mg-commerce-empty, .mg-empty {
    padding: clamp(48px, 7vw, 88px) var(--mg-sp-4); text-align: center;
    background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
}
.mg-commerce-empty--inline { padding: var(--mg-sp-10) var(--mg-sp-4); }
.mg-catalog-empty__icon, .mg-commerce-empty__icon, .mg-empty__icon, .mg-404-card__icon {
    font-size: 3rem; color: var(--mg-border); margin-bottom: var(--mg-sp-5);
}
.mg-commerce-empty__icon--heart { color: #f3b4bb; }
.mg-empty__title { margin-bottom: var(--mg-sp-2); }
.mg-empty__text { color: var(--mg-ink-soft); margin-bottom: var(--mg-sp-6); }

/* ── 2. Fiche produit ──────────────────────────────────────────── */
.pdp, .mg-pdp-page { padding-block: clamp(24px, 3vw, 40px) var(--mg-section); }
.mg-pdp-hero { padding-block: var(--mg-sp-4); }
.pdp-meta { display: flex; flex-wrap: wrap; gap: var(--mg-sp-4); font-size: .82rem; color: var(--mg-ink-muted); }
.pdp-section-title { margin-bottom: var(--mg-sp-6); }

/* Galerie */
.pdp-gallery { position: relative; }
.pdp-carousel, .pdp-gallery__main {
    position: relative; overflow: hidden;
    background: var(--mg-panel);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
}
.pdp-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp-carousel__track::-webkit-scrollbar { display: none; }
.pdp-carousel__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1; display: grid; place-items: center; }
.pdp-carousel__slide img, .pdp-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--mg-sp-5); cursor: zoom-in; }
/* Format 4/3 comme les vignettes du catalogue, et non plus le carre : sur
   une colonne de 5/12 le visuel passe de 580px de cote a ~360px de haut.
   Le plafond evite qu'il ne regonfle sur un ecran tres large. */
.pdp-gallery__main { aspect-ratio: 4 / 3; max-width: 520px; }
@media (min-width: 992px) {
    /* La galerie accompagne la colonne d'achat, plus longue qu'elle, et
       doit se ranger sous l'entete collante — pas derriere. */
    .pdp-gallery { position: sticky; top: calc(var(--mg-header-total, 121px) + 20px); }
}
.pdp-carousel__btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
    border: 1px solid var(--mg-border); border-radius: var(--mg-r-md);
    color: var(--mg-navy); box-shadow: var(--mg-sh-sm);
}
.pdp-carousel__btn:hover { background: var(--mg-navy); color: #fff; }
.pdp-carousel__btn--prev { left: var(--mg-sp-4); }
.pdp-carousel__btn--next { right: var(--mg-sp-4); }

.pdp-gallery__thumbs, .gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--mg-sp-2); margin-top: var(--mg-sp-3); }
.pdp-gallery__thumb, .gallery-thumbs-img {
    width: 70px; height: 70px; flex-shrink: 0; object-fit: contain; padding: 6px;
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-sm); cursor: pointer;
    transition: border-color var(--mg-t-fast);
}
.pdp-gallery__thumb:hover, .gallery-thumbs-img:hover { border-color: var(--mg-navy); }
.pdp-gallery__thumb.is-active, .gallery-thumbs-img.is-active, .gallery-thumbs-img.active { border-color: var(--mg-orange); }

.pdp-lightbox {
    position: fixed; inset: 0; z-index: 1500;
    display: none; align-items: center; justify-content: center;
    padding: var(--mg-sp-6); background: rgba(4,32,63,.92);
}
.pdp-lightbox.is-open { display: flex; }
.pdp-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.pdp-lightbox__close {
    position: absolute; top: var(--mg-sp-6); right: var(--mg-sp-6);
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: var(--mg-r-md); color: var(--mg-navy); font-size: 1.2rem;
}

/* Bloc d'achat */
.pdp-buy { display: flex; flex-direction: column; gap: var(--mg-sp-4); }
/* La colonne d'achat empilait ses blocs avec des marges posees au coup par
   coup — mb-2 ici, mt-3 la, margin-block ailleurs — d'ou un rythme irregulier
   sur 1260px de hauteur. Le rembourrage est desormais tenu par le conteneur :
   une seule gouttiere, et les marges des enfants sont remises a zero. */
.pdp-buy__card {
    padding: var(--mg-sp-6);
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
    display: flex; flex-direction: column;
    gap: var(--mg-sp-3);
}
/* Selecteur compose (0,2,0) : il passe devant toutes les regles a classe
   unique qui posent encore une marge, quel que soit leur ordre. */
.pdp-buy .pdp-buy__card > * { margin: 0; }

/* Respirations : avant le prix, avant les actions, avant la reassurance. */
.pdp-buy .pdp-buy__card > .pdp-buy__price-row { margin-block: var(--mg-sp-2); }
.pdp-buy .pdp-buy__card > .pdp-cart-actions { margin-top: var(--mg-sp-3); }
.pdp-buy .pdp-buy__card > .pdp-reassurance {
    margin-top: var(--mg-sp-4);
    padding-top: var(--mg-sp-5);
    border-top: 1px solid var(--mg-border-soft);
}
.pdp-buy__desc { color: var(--mg-ink-soft); font-size: .95rem; line-height: 1.6; }
.pdp-buy__brand, .pdp-title + .pdp-meta {
    font-family: var(--mg-font-head); font-size: .75rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--mg-orange);
}
.pdp-buy__title, .pdp-title { margin-block: var(--mg-sp-2) var(--mg-sp-3); }
.pdp-buy__badges { display: flex; flex-wrap: wrap; gap: var(--mg-sp-2); margin-bottom: var(--mg-sp-3); }
.pdp-buy__badge {
    padding: 5px 11px; background: var(--mg-surface); color: var(--mg-navy);
    border-radius: var(--mg-r-xs);
    font-family: var(--mg-font-head); font-size: .72rem; font-weight: 600;
}

.pdp-buy__price-row, .pdp-price-row {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--mg-sp-3);
    margin-block: var(--mg-sp-5);
    padding: var(--mg-sp-4) var(--mg-sp-5);
    background: var(--mg-orange-50); border: 1px solid #ffddc4;
    border-radius: var(--mg-r-md);
}
.pdp-buy__price, .pdp-price {
    font-family: var(--mg-font-head); font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1;
    letter-spacing: -.035em; color: var(--mg-orange);
}
.pdp-buy__price-old, .pdp-price-old, .price-old {
    font-size: .95rem; color: var(--mg-ink-muted); text-decoration: line-through;
}
.pdp-discount {
    margin-left: auto; padding: 5px 11px;
    background: var(--mg-orange); color: #fff; border-radius: var(--mg-r-xs);
    font-family: var(--mg-font-head); font-size: .8rem; font-weight: 700;
}

.pdp-stock { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 500; }
.pdp-stock__ok { color: var(--mg-green); }
.pdp-stock__preorder { color: var(--mg-orange); }
.pdp-stock__out { color: var(--mg-red); }

.pdp-buy__trust, .pdp-trust {
    display: flex; flex-direction: column; gap: var(--mg-sp-3);
    margin-top: var(--mg-sp-5); padding-top: var(--mg-sp-5);
    border-top: 1px solid var(--mg-border-soft);
    font-size: .9rem; color: var(--mg-ink-soft);
}
.pdp-buy__trust i, .pdp-trust__item i { color: var(--mg-orange); width: 20px; flex-shrink: 0; }
.pdp-trust__item { display: flex; align-items: flex-start; gap: var(--mg-sp-3); }

/* Variantes — RAM, stockage et coloris sur une meme ligne. Empiles, ces
   trois groupes prenaient trois rangees de 74px pour n'afficher souvent
   qu'une ou deux pastilles chacun, et repoussaient les boutons d'achat
   hors de l'ecran. Ils se replient d'eux-memes si la place manque. */
.pdp-variants { display: flex; flex-wrap: wrap; gap: var(--mg-sp-5) var(--mg-sp-8); }
.pdp-variants__group { min-width: 0; }
.pdp-variants__group + .pdp-variants__group { margin-top: 0; }
.pdp-variants__label, .pdp-variant__label {
    display: block; margin-bottom: var(--mg-sp-2);
    font-family: var(--mg-font-head); font-size: .8rem; font-weight: 600; color: var(--mg-ink);
}
.pdp-variant-pills, .pdp-variant__options { display: flex; flex-wrap: wrap; gap: var(--mg-sp-2); }
.pdp-variant-pill, .pdp-variant__option {
    padding: 10px 16px;
    background: #fff; border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-r-md); color: var(--mg-navy);
    font-family: var(--mg-font-head); font-size: .88rem; font-weight: 600;
    cursor: pointer; transition: all var(--mg-t-fast);
}
.pdp-variant-pill:hover, .pdp-variant__option:hover { border-color: var(--mg-navy); }
.pdp-variant-pill.is-active, .pdp-variant__option.is-active,
.pdp-variant-pill[aria-pressed="true"], .pdp-variant__option[aria-pressed="true"] {
    background: var(--mg-navy); border-color: var(--mg-navy); color: #fff;
}
.pdp-variant-pill:disabled, .pdp-variant__option:disabled,
.pdp-variant-pill.is-disabled, .pdp-variant__option.is-disabled {
    opacity: .4; cursor: not-allowed; text-decoration: line-through;
}

/* Actions */
.pdp-cart-actions, .pdp-actions { display: flex; flex-direction: column; gap: var(--mg-sp-3); margin-top: var(--mg-sp-6); }
.pdp-cart-actions__cta--inline, .pdp-buy-row { display: flex; gap: var(--mg-sp-3); align-items: stretch; }
.pdp-cart-actions__cta--inline .qty-group, .pdp-buy-row .qty-group { flex-shrink: 0; }
.pdp-cart-actions__cta--inline .btn, .pdp-buy-row .mg-btn { flex: 1; min-width: 0; }
.pdp-add-to-cart, .pdp-order-now, .pdp-cta-wa, .pdp-cta { width: 100%; }
.pdp-order-now { background: var(--mg-navy); color: #fff; }
.pdp-order-now:hover { background: var(--mg-navy-700); color: #fff; }
.pdp-cta-wa { background: var(--mg-wa); color: #fff; }
.pdp-cta-wa:hover { background: #1db855; color: #fff; }
.pdp-cta__label, .mg-btn__label { display: inline; }

/* Le lien WhatsApp portait `.btn` (jeu de classes d'avant la refonte) quand
   ses deux voisins portaient `.mg-btn` : il sortait 8px plus court et d'un
   corps de texte plus petit. Il partage maintenant la meme base. Les ombres
   sautent : trois boutons colores empiles, chacun avec son halo, alourdissaient
   le bas de colonne. */
.pdp-cta { box-shadow: none; }
.pdp-cta:hover { box-shadow: none; }

/* Rangee « Commander » + « WhatsApp ». Le remboursement horizontal de
   `.mg-btn-lg` (34px) ne tient pas dans une demi-colonne : on le resserre. */
.pdp-cta-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-sp-3); }
.pdp-cta-pair .mg-btn { padding-inline: var(--mg-sp-4); min-width: 0; }
@media (max-width: 480px) { .pdp-cta-pair { grid-template-columns: 1fr; } }

.pdp-qty-row { display: flex; align-items: center; gap: var(--mg-sp-4); }
.pdp-qty-row__label {
    font-family: var(--mg-font-head); font-size: .82rem; font-weight: 700;
    color: var(--mg-ink-muted);
}
/* Pas de plafond de largeur : a 140px les deux boutons (44px chacun, seuil
   tactile) et la case du chiffre ne tenaient plus. Le groupe se dimensionne
   sur son contenu. */
.pdp-qty-row .qty-group { flex-shrink: 0; }

.pdp-reassurance {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-sp-3);
    list-style: none; padding-left: 0;
}
/* Une seule colonne sous 500px : en dessous, deux cases laissent ~95px au
   texte, « Livraison 24–72h » se brise sur trois lignes et les quatre cases
   n'ont plus la meme hauteur. Le seuil etait a 420px, trop bas. */
@media (max-width: 499.98px) { .pdp-reassurance { grid-template-columns: 1fr; } }
.pdp-reassurance__item {
    display: flex; align-items: center; gap: var(--mg-sp-3);
    padding: var(--mg-sp-3) var(--mg-sp-4);
    background: var(--mg-surface); border-radius: var(--mg-r-md);
    font-size: .82rem; font-weight: 500;
}
.pdp-reassurance__item i { color: var(--mg-orange); flex-shrink: 0; font-size: 1.05rem; }
/* Deux lignes empilees : le libelle, puis la precision. Cote a cote, la
   precision se brisait en colonne etroite (« partout / au / Maroc »). */
.pdp-reassurance__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pdp-reassurance__body strong { font-weight: 700; color: var(--mg-ink); }
.pdp-reassurance__detail { color: var(--mg-ink-muted); font-size: .78rem; font-weight: 400; }

/* Barre d'achat fixe (mobile) */
.pdp-fixed-cart {
    position: fixed; z-index: 1044; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.98); backdrop-filter: blur(12px);
    border-top: 1px solid var(--mg-border);
    box-shadow: 0 -6px 24px rgba(6,44,89,.08);
    transform: translateY(100%); transition: transform var(--mg-t-base);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pdp-fixed-cart.is-visible { transform: translateY(0); }
.pdp-fixed-cart__inner {
    display: flex; align-items: center; gap: var(--mg-sp-3);
    padding: var(--mg-sp-3) var(--mg-sp-4);
}
.pdp-fixed-cart__price-wrap { display: flex; flex-direction: column; min-width: 0; flex-shrink: 0; }
.pdp-fixed-cart__price {
    font-family: var(--mg-font-head); font-weight: 700; font-size: 1.1rem;
    color: var(--mg-orange); line-height: 1.15; white-space: nowrap;
}

/* Panier en icone, commande en bouton plein : les deux au seuil tactile. */
.pdp-fixed-cart__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
    background: var(--mg-surface); color: var(--mg-navy);
    border: 1px solid var(--mg-border); border-radius: var(--mg-r-sm);
    font-size: 1.15rem; cursor: pointer;
}
.pdp-fixed-cart__icon:hover, .pdp-fixed-cart__icon.is-added { background: var(--mg-surface-2); }
.pdp-fixed-cart__btn {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--mg-sp-2);
    min-height: 48px; padding-inline: var(--mg-sp-4);
    background: var(--mg-orange); color: #fff;
    border: 0; border-radius: var(--mg-r-sm);
    font-family: var(--mg-font-head); font-size: .95rem; font-weight: 700;
    white-space: nowrap; cursor: pointer;
}
.pdp-fixed-cart__btn:hover { background: var(--mg-orange-600); color: #fff; }

@media (min-width: 992px) { .pdp-fixed-cart { display: none; } }

/* La regle precedente visait « .pdp-fixed-cart.is-visible ~ .mg-bottom-nav ».
   Les deux ne sont pas soeurs — la barre vit dans la page, la nav du bas est
   posee directement dans <body> — donc elle ne s'appliquait jamais et les
   deux barres se seraient superposees. On passe par une classe sur <body>,
   posee par le script en meme temps que « is-visible ». */
body.has-pdp-cart .mg-bottom-nav,
body.has-pdp-cart .bottom-nav { display: none; }
/* La barre recouvre le bas du document : on lui reserve la place, sinon le
   dernier bloc du pied de page reste inaccessible. */
@media (max-width: 991.98px) {
    body.has-pdp-cart { padding-bottom: 76px; }
}

/* Description riche */
.pdp-tabs { margin-top: var(--mg-sp-12); }
.pdp-tabs .tab-content { padding-top: var(--mg-sp-6); }
/* Filet de securite : la description vient de la base et peut contenir une
   URL ou une reference sans espace plus large que la colonne. Elle se coupe
   plutot que de faire defiler la page. (La cause principale — des espaces
   insecables entre chaque mot — est traitee en amont par normalize_nbsp().) */
.product-rich-desc { line-height: 1.8; color: var(--mg-ink-soft); overflow-wrap: break-word; }
.product-rich-desc h3 { margin-block: var(--mg-sp-6) var(--mg-sp-3); font-size: var(--mg-t-h3); color: var(--mg-ink); }
.product-rich-desc p { margin-bottom: var(--mg-sp-4); }
.product-rich-desc ul { margin-bottom: var(--mg-sp-5); }
.product-rich-desc li { position: relative; padding-left: var(--mg-sp-6); margin-bottom: var(--mg-sp-2); }
.product-rich-desc li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--mg-orange);
}
/* Un tableau ne peut pas descendre sous la largeur de son contenu : sur
   mobile il debordait de la colonne. Il defile dans son propre cadre. */
.product-rich-desc table, .pdp-specs-table {
    width: 100%; margin-bottom: var(--mg-sp-5);
    border: 1px solid var(--mg-border); border-radius: var(--mg-r-md);
    display: block; overflow-x: auto; max-width: 100%;
}
/* `display:block` sur le tableau detache les cellules de la grille : on la
   retablit sur un conteneur interne pour garder des colonnes alignees. */
.product-rich-desc table > tbody, .product-rich-desc table > thead,
.pdp-specs-table > tbody, .pdp-specs-table > thead { display: table; width: 100%; }
.product-rich-desc th, .product-rich-desc td, .pdp-specs-table th, .pdp-specs-table td {
    padding: 11px 14px; border-bottom: 1px solid var(--mg-border-soft); text-align: left;
}
.product-rich-desc th, .pdp-specs-table th { background: var(--mg-surface); font-family: var(--mg-font-head); font-weight: 600; width: 38%; }

/* Avis & FAQ produit */
.pdp-reviews-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-sp-8);
    padding: var(--mg-sp-6); margin-bottom: var(--mg-sp-6);
    background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
}
.pdp-reviews-score { font-family: var(--mg-font-head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--mg-navy); }
.pdp-rating-bar { display: flex; align-items: center; gap: var(--mg-sp-2); font-size: .8rem; }
.pdp-rating-bar__track { flex: 1; height: 7px; background: var(--mg-surface-2); border-radius: var(--mg-r-pill); overflow: hidden; }
.pdp-rating-bar__fill { height: 100%; background: #f5a623; }
.pdp-review-card, .mg-review-card {
    padding: var(--mg-sp-5); background: var(--mg-panel);
    border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
}
.pdp-faq { margin-top: var(--mg-sp-12); }
.pdp-related { margin-top: var(--mg-sp-16); }
.pdp-related__header, .mg-section-head, .section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--mg-sp-4); margin-bottom: var(--mg-sp-8);
}

/* Formulaire commande WhatsApp */
.pdp-wa-form {
    display: none; margin-top: var(--mg-sp-5); padding: var(--mg-sp-6);
    background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
}
.pdp-wa-form.is-open { display: block; }
.pdp-wa-form__title { margin-bottom: var(--mg-sp-2); }
.pdp-wa-form__hint { margin-bottom: var(--mg-sp-5); font-size: .9rem; color: var(--mg-ink-soft); }

/* ── 3. Panier ─────────────────────────────────────────────────── */
.mg-checkout-page { padding-block: clamp(32px, 4vw, 56px) var(--mg-section); }
.mg-cart-layout, .mg-checkout-layout { display: grid; gap: var(--mg-sp-8); align-items: start; }
@media (min-width: 992px) {
    .mg-cart-layout, .mg-checkout-layout { grid-template-columns: minmax(0, 1fr) 372px; }
}

.mg-checkout-card, .mg-cart-list {
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg); overflow: hidden;
}
.mg-checkout-section-title, .mg-cart-table__head {
    padding: var(--mg-sp-4) var(--mg-sp-5); margin: 0;
    background: var(--mg-surface); border-bottom: 1px solid var(--mg-border);
    font-family: var(--mg-font-head); font-size: .82rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--mg-ink);
}
.mg-cart-table__head { display: none; }
@media (min-width: 768px) { .mg-cart-table__head { display: grid; grid-template-columns: minmax(0,1fr) 132px 120px 48px; gap: var(--mg-sp-4); } }

.mg-cart-item {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--mg-sp-4);
    padding: var(--mg-sp-5); border-bottom: 1px solid var(--mg-border-soft); align-items: center;
}
.mg-cart-item:last-child { border-bottom: 0; }
@media (min-width: 768px) { .mg-cart-item { grid-template-columns: minmax(0,1fr) 132px 120px 48px; } }
.mg-cart-item__product { display: flex; align-items: center; gap: var(--mg-sp-4); min-width: 0; }
.mg-cart-item__thumb {
    width: 76px; height: 76px; flex-shrink: 0; object-fit: contain; padding: 6px;
    background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-r-sm);
}
.mg-cart-item__name { font-weight: 600; font-size: .95rem; line-height: 1.4; }
.mg-cart-item__name a:hover { color: var(--mg-orange); }
.mg-cart-item__price { font-size: .82rem; color: var(--mg-ink-muted); margin-top: 2px; }
.mg-cart-item__total { font-family: var(--mg-font-head); font-weight: 700; font-size: 1.05rem; text-align: right; white-space: nowrap; color: var(--mg-navy); }
.mg-cart-item__remove { text-align: right; }
.mg-cart-item__remove-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--mg-r-md);
    background: var(--mg-surface); color: var(--mg-ink-muted);
    transition: all var(--mg-t-fast);
}
.mg-cart-item__remove-btn:hover { background: var(--mg-red-50); color: var(--mg-red); }
/* 38px passe au doigt de justesse — et supprimer une ligne du panier par
   erreur coute cher. On l'amene au seuil tactile sur mobile. */
@media (max-width: 991.98px) {
    .mg-cart-item__remove-btn { width: 44px; height: 44px; }
}

.mg-cart-qty, .mg-cart-item__qty {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--mg-border); border-radius: var(--mg-r-md); overflow: hidden; background: #fff;
}
.mg-cart-qty__btn { width: 36px; display: grid; place-items: center; background: var(--mg-surface); color: var(--mg-navy); font-weight: 700; }
.mg-cart-qty__btn:hover { background: var(--mg-surface-2); }
.mg-cart-qty__input {
    width: 50px; min-height: 40px; text-align: center; border: 0; background: #fff;
    font-family: var(--mg-font-head); font-weight: 600;
}
.mg-cart-qty__input:focus { outline: none; background: var(--mg-orange-50); }

/* Recapitulatif */
.mg-order-summary, .mg-cart-summary {
    padding: var(--mg-sp-6);
    background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
}
@media (min-width: 992px) {
    .mg-order-summary, .mg-cart-summary { position: sticky; top: calc(var(--mg-header-total, 121px) + 20px); }
}
.mg-order-summary__title, .mg-cart-summary__title {
    padding-bottom: var(--mg-sp-4); margin-bottom: var(--mg-sp-5);
    border-bottom: 1px solid var(--mg-border);
    font-family: var(--mg-font-head); font-size: .95rem; font-weight: 700;
}
.mg-order-summary__lines { display: flex; flex-direction: column; gap: var(--mg-sp-3); }
.mg-order-summary__line, .mg-cart-summary__line {
    display: flex; justify-content: space-between; gap: var(--mg-sp-3); font-size: .92rem; color: var(--mg-ink-soft);
}
.mg-order-summary__line span:last-child, .mg-cart-summary__line span:last-child { font-weight: 600; color: var(--mg-ink); }
.mg-order-summary__line--discount, .mg-cart-summary__line--discount { color: var(--mg-green); }
.mg-order-summary__line--discount span:last-child { color: var(--mg-green); }
.mg-order-summary__total, .mg-cart-summary__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--mg-sp-3);
    margin-top: var(--mg-sp-5); padding-top: var(--mg-sp-4);
    border-top: 1px solid var(--mg-border);
    font-family: var(--mg-font-head); font-weight: 600;
}
.mg-order-total, .mg-cart-summary__total-value {
    font-family: var(--mg-font-head); font-weight: 700; font-size: 1.6rem;
    letter-spacing: -.03em; color: var(--mg-orange);
}
.mg-order-summary__note, .mg-order-summary__trust {
    margin-top: var(--mg-sp-5); padding-top: var(--mg-sp-4);
    border-top: 1px solid var(--mg-border-soft);
    font-size: .82rem; color: var(--mg-ink-muted);
}
.mg-order-summary__trust { display: flex; flex-direction: column; gap: var(--mg-sp-2); }
.mg-order-summary__trust i { color: var(--mg-green); }
/* Confirmation de commande — l'action decisive du site. Elle ne portait
   que `.btn`, sans classe de variante : elle sortait en gris de surface
   avec un texte marine, soit l'apparence d'un bouton secondaire. On lui
   donne l'ambre plein et les metriques « lg » des autres appels a l'action
   principaux. Le style tient dans la feuille plutot que dans le gabarit :
   le bouton reste juste, quelles que soient les classes du balisage. */
.mg-checkout-cta {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--mg-sp-2);
    padding: 17px 34px;
    background: var(--mg-orange); color: #fff;
    border: 0; border-radius: var(--mg-r-md);
    font-family: var(--mg-font-head);
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
    box-shadow: var(--mg-sh-orange);
    transition: background var(--mg-t-fast), transform var(--mg-t-fast);
}
.mg-checkout-cta:hover { background: var(--mg-orange-600); color: #fff; }
.mg-checkout-cta:active { transform: translateY(1px); }
.mg-checkout-cta:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Mention du mode de paiement — une ligne, pas une carte. */
.mg-checkout-payment {
    display: flex; align-items: baseline; gap: var(--mg-sp-2);
    margin-top: var(--mg-sp-5);
    padding: var(--mg-sp-3) var(--mg-sp-4);
    background: var(--mg-surface); border-radius: var(--mg-r-md);
    font-size: .88rem; color: var(--mg-ink-soft);
}
.mg-checkout-payment i { color: var(--mg-orange); flex-shrink: 0; }
.mg-checkout-payment strong { color: var(--mg-ink); font-weight: 700; }

/* ── Barre de confirmation fixe ────────────────────────────────────
   La confirmation etait rangee au bas de la colonne de droite : sur un
   formulaire plus haut que l'ecran, il fallait defiler pour la retrouver.
   Elle reste desormais a portee, avec le total sous les yeux. */
.mg-checkout-bar {
    position: fixed; z-index: 1044; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--mg-border);
    box-shadow: 0 -6px 24px rgba(6, 44, 89, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mg-checkout-bar__inner {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--mg-sp-5);
    padding-block: var(--mg-sp-3);
}
.mg-checkout-bar__total {
    display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0;
    margin-right: auto;
}
.mg-checkout-bar__label {
    font-size: .75rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mg-ink-muted);
}
.mg-checkout-bar__total strong {
    font-family: var(--mg-font-head); font-size: 1.35rem; font-weight: 800;
    letter-spacing: -.02em; color: var(--mg-navy);
}
.mg-checkout-bar .mg-checkout-cta { flex-shrink: 0; min-width: 280px; }

/* La barre recouvre le bas du document : on lui reserve la place.
   Le pied de page, la nav du bas et le bouton WhatsApp flottant ne sont
   pas masques ici : le gabarit ne les rend pas du tout sur cette page. */
body.page-checkout { padding-bottom: 104px; }

@media (max-width: 575.98px) {
    /* Le total passe sur une ligne, le bouton prend toute la largeur en
       dessous : cote a cote, l'intitule se serait brise en deux lignes. */
    .mg-checkout-bar__inner { flex-wrap: wrap; gap: var(--mg-sp-2); }
    .mg-checkout-bar__total { flex-direction: row; align-items: baseline; gap: var(--mg-sp-2); }
    .mg-checkout-bar .mg-checkout-cta { width: 100%; min-width: 0; padding-block: 15px; }
    body.page-checkout { padding-bottom: 140px; }
}

.mg-coupon-form, .mg-coupon { display: flex; margin-top: var(--mg-sp-5); padding-top: var(--mg-sp-5); border-top: 1px solid var(--mg-border-soft); }
.mg-coupon-form .form-control { text-transform: uppercase; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mg-coupon-form .btn, .mg-coupon-form .mg-btn { flex-shrink: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mg-coupon-applied {
    display: flex; align-items: center; justify-content: space-between; gap: var(--mg-sp-3);
    margin-top: var(--mg-sp-4); padding: var(--mg-sp-3) var(--mg-sp-4);
    background: #dcfce7; border-radius: var(--mg-r-md);
    font-size: .88rem; font-weight: 600; color: #15803d;
}
.mg-coupon-applied__remove { color: var(--mg-red); }

/* ── 4. Commande ───────────────────────────────────────────────── */
.mg-checkout-panel { padding: var(--mg-sp-6); background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); }
.mg-checkout-panel + .mg-checkout-panel { margin-top: var(--mg-sp-5); }
.mg-checkout-panel__title { display: flex; align-items: center; gap: var(--mg-sp-3); padding-bottom: var(--mg-sp-4); margin-bottom: var(--mg-sp-5); border-bottom: 1px solid var(--mg-border); }
.mg-checkout-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    background: var(--mg-orange); color: #fff; border-radius: var(--mg-r-pill);
    font-family: var(--mg-font-head); font-weight: 700; font-size: .85rem;
}
.mg-checkout-items { display: flex; flex-direction: column; }
.mg-checkout-items__row {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: var(--mg-sp-3);
    padding: var(--mg-sp-3) 0; border-bottom: 1px solid var(--mg-border-soft); font-size: .9rem;
}
.mg-checkout-items__row:last-child { border-bottom: 0; }
.mg-checkout-items__qty { color: var(--mg-ink-muted); }
.mg-checkout-items__price { font-weight: 600; white-space: nowrap; }

.mg-payment-method, .mg-payment-note {
    display: flex; align-items: center; gap: var(--mg-sp-4);
    padding: var(--mg-sp-5);
    background: var(--mg-orange-50); border: 1px solid #ffddc4; border-radius: var(--mg-r-md);
}
.mg-payment-method__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--mg-orange); color: #fff; border-radius: var(--mg-r-md); font-size: 1.2rem;
}
.mg-payment-note i { font-size: 1.4rem; color: var(--mg-orange); flex-shrink: 0; }

/* Confirmation */
.mg-checkout-page--success .mg-commerce-hero, .mg-commerce-hero--success { background: var(--mg-navy); }
.mg-confirmation-icon { font-size: 3.4rem; color: var(--mg-orange); margin-bottom: var(--mg-sp-4); }
.mg-confirmation-card { padding: var(--mg-sp-8); background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); }
.mg-confirmation-lead { font-size: var(--mg-t-lead); color: var(--mg-ink-soft); }
.mg-confirmation-meta { display: flex; flex-wrap: wrap; gap: var(--mg-sp-8); margin-top: var(--mg-sp-6); }
.mg-confirmation-recap { margin-top: var(--mg-sp-6); padding-top: var(--mg-sp-6); border-top: 1px solid var(--mg-border); }
.mg-order-ref {
    display: inline-block; padding: 10px 20px;
    background: var(--mg-orange-50); color: var(--mg-orange);
    border: 1px solid #ffddc4; border-radius: var(--mg-r-md);
    font-family: var(--mg-font-head); font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
}

/* ── 5. Espace client ──────────────────────────────────────────── */
.mg-account-page { padding-block: clamp(32px, 4vw, 56px) var(--mg-section); }
.mg-account-layout { display: grid; gap: var(--mg-sp-8); align-items: start; }
@media (min-width: 992px) { .mg-account-layout { grid-template-columns: 264px minmax(0, 1fr); } }

.mg-account-nav { padding: var(--mg-sp-5); background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); }
.mg-account-nav__user { display: flex; align-items: center; gap: var(--mg-sp-3); padding-bottom: var(--mg-sp-5); margin-bottom: var(--mg-sp-4); border-bottom: 1px solid var(--mg-border); }
.mg-account-nav__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--mg-navy); color: #fff; border-radius: var(--mg-r-pill);
    font-family: var(--mg-font-head); font-weight: 700;
}
.mg-account-nav__hello { display: block; font-size: .78rem; color: var(--mg-ink-muted); }
.mg-account-nav__name { font-family: var(--mg-font-head); font-size: .95rem; }
.mg-account-nav__list { display: flex; flex-direction: column; gap: 2px; }
.mg-account-nav__link {
    display: flex; align-items: center; gap: var(--mg-sp-3);
    padding: 11px 14px; border-radius: var(--mg-r-md);
    font-family: var(--mg-font-head); font-size: .92rem; font-weight: 600;
    color: var(--mg-ink-soft); transition: all var(--mg-t-fast);
}
.mg-account-nav__link:hover { background: var(--mg-surface); color: var(--mg-navy); }
.mg-account-nav__link.is-active { background: var(--mg-orange-50); color: var(--mg-orange); }
/* Deconnexion : c'est un <button> dans un <form> POST — remises a zero. */
.mg-account-nav__logout {
    display: flex; align-items: center; gap: var(--mg-sp-2);
    width: 100%; margin-top: var(--mg-sp-4); padding: var(--mg-sp-4) 14px 0;
    background: none; border: 0; border-top: 1px solid var(--mg-border); border-radius: 0;
    font-family: var(--mg-font-head); font-size: .92rem; font-weight: 600;
    color: var(--mg-red); text-align: left; cursor: pointer; appearance: none;
}
.mg-account-nav__logout:hover { text-decoration: underline; }

.mg-account-panel { background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); }
.mg-account-panel__head { padding: var(--mg-sp-5) var(--mg-sp-6); border-bottom: 1px solid var(--mg-border); }
.mg-account-quicklink {
    display: flex; flex-direction: column; align-items: center; gap: var(--mg-sp-2);
    padding: var(--mg-sp-6); height: 100%; text-align: center;
    background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
    color: var(--mg-ink); transition: all var(--mg-t-base);
}
.mg-account-quicklink:hover { transform: translateY(-4px); box-shadow: var(--mg-sh-md); border-color: #c8d4e4; }
.mg-account-quicklink i { font-size: 1.6rem; color: var(--mg-orange); }

.mg-account-orders-list { display: flex; flex-direction: column; gap: var(--mg-sp-4); }
.mg-account-orders-table { background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); overflow: hidden; }
.mg-account-orders-table__head {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: var(--mg-sp-3);
    padding: var(--mg-sp-3) var(--mg-sp-5);
    background: var(--mg-surface); border-bottom: 1px solid var(--mg-border);
    font-family: var(--mg-font-head); font-size: .76rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.mg-account-orders-table__row {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: var(--mg-sp-3);
    padding: var(--mg-sp-4) var(--mg-sp-5); border-bottom: 1px solid var(--mg-border-soft);
    align-items: center; font-size: .9rem;
}
.mg-account-orders-table__row:last-child { border-bottom: 0; }
.mg-account-orders-table__row:hover { background: var(--mg-surface); }
.mg-account-orders-table__ref { font-family: var(--mg-font-head); font-weight: 600; }
@media (max-width: 767.98px) {
    .mg-account-orders-table__head { display: none; }
    .mg-account-orders-table__row { grid-template-columns: 1fr 1fr; gap: var(--mg-sp-2); }
    .mg-account-orders-table__row span::before {
        content: attr(data-label); display: block;
        font-size: .68rem; font-weight: 600; letter-spacing: .06em;
        text-transform: uppercase; color: var(--mg-ink-muted);
    }
}

.mg-order-card { background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); overflow: hidden; }
.mg-order-card__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-sp-3);
    padding: var(--mg-sp-4) var(--mg-sp-5); background: var(--mg-surface); border-bottom: 1px solid var(--mg-border);
}
.mg-order-card__ref { font-family: var(--mg-font-head); font-weight: 700; }
.mg-order-card__date { font-size: .82rem; color: var(--mg-ink-muted); }
.mg-order-card__footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-sp-3);
    padding: var(--mg-sp-4) var(--mg-sp-5); border-top: 1px solid var(--mg-border-soft);
}
.mg-order-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--mg-r-pill); background: var(--mg-surface); font-size: .75rem; font-weight: 600; }

/* Authentification */
.mg-auth-page, .mg-auth { display: flex; align-items: center; justify-content: center; padding-block: clamp(48px, 7vw, 96px); }
.mg-auth-card, .mg-auth__card {
    width: 100%; max-width: 452px; padding: clamp(28px, 4vw, 44px);
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-xl); box-shadow: var(--mg-sh-md);
}
.mg-auth-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-bottom: var(--mg-sp-5);
    background: var(--mg-orange-50); color: var(--mg-orange);
    border-radius: var(--mg-r-lg); font-size: 1.5rem;
}
.mg-auth-card__title, .mg-auth__title { margin-bottom: var(--mg-sp-2); }
.mg-auth-card__subtitle, .mg-auth__sub, .login-subtitle { margin-bottom: var(--mg-sp-8); color: var(--mg-ink-soft); font-size: .95rem; }
.mg-auth-card__footer, .mg-auth__footer {
    margin-top: var(--mg-sp-6); padding-top: var(--mg-sp-6);
    border-top: 1px solid var(--mg-border); text-align: center; font-size: .92rem;
}

/* ── 6. Contact & a propos ─────────────────────────────────────── */
.mg-contact-page, .mg-about-page { padding-block: clamp(32px, 4vw, 56px) var(--mg-section); }
.mg-contact-grid { display: grid; gap: var(--mg-sp-8); }
@media (min-width: 992px) { .mg-contact-grid { grid-template-columns: minmax(0,1fr) 388px; } }
.mg-contact-info { display: grid; gap: var(--mg-sp-3); }
.mg-contact-card, .mg-contact-form {
    display: flex; align-items: flex-start; gap: var(--mg-sp-4);
    padding: var(--mg-sp-5);
    background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
    color: var(--mg-ink); transition: all var(--mg-t-base);
}
.mg-contact-form { display: block; padding: var(--mg-sp-6); }
.mg-contact-card--link:hover { transform: translateY(-4px); box-shadow: var(--mg-sh-md); }
.mg-contact-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--mg-r-md);
    background: var(--mg-surface); color: var(--mg-navy); font-size: 1.1rem;
}
.mg-contact-card__icon--phone, .mg-contact-card__icon--addr { background: var(--mg-orange-50); color: var(--mg-orange); }
.mg-contact-card__icon--hours { background: #dcfce7; color: #15803d; }
.mg-contact-item { display: flex; align-items: flex-start; gap: var(--mg-sp-3); padding-block: var(--mg-sp-3); }
.mg-contact-item + .mg-contact-item { border-top: 1px solid var(--mg-border-soft); }
.mg-contact-item i { font-size: 1.2rem; color: var(--mg-orange); flex-shrink: 0; }
.mg-contact-item__label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mg-ink-muted); }
.mg-contact-map, .mg-map { border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); overflow: hidden; line-height: 0; }
.mg-contact-map iframe, .mg-map iframe { width: 100%; height: 340px; border: 0; }

.mg-about-lead { font-size: var(--mg-t-lead); color: var(--mg-ink-soft); max-width: 68ch; line-height: 1.8; }
.mg-about-image, .mg-about-image-slot { border-radius: var(--mg-r-xl); overflow: hidden; border: 1px solid var(--mg-border); }
.mg-about-image-slot { aspect-ratio: 4/3; background: var(--mg-surface); display: grid; place-items: center; }
.mg-about-values { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: var(--mg-sp-5); }
.mg-about-value { padding: var(--mg-sp-6); background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); }
.mg-about-value__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: var(--mg-sp-4);
    background: var(--mg-orange-50); color: var(--mg-orange);
    border-radius: var(--mg-r-md); font-size: 1.2rem;
}

/* ── 7. Guides ─────────────────────────────────────────────────── */
.mg-guides { padding-block: clamp(32px, 4vw, 56px) var(--mg-section); }
.mg-guide-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg); overflow: hidden;
    transition: transform var(--mg-t-base), box-shadow var(--mg-t-base);
}
.mg-guide-card:hover { transform: translateY(-6px); box-shadow: var(--mg-sh-md); }
.mg-guide-card__body { padding: var(--mg-sp-6); display: flex; flex-direction: column; gap: var(--mg-sp-3); flex: 1; }
.mg-guide-card__title { font-size: 1.05rem; }
.mg-guide-card__excerpt { font-size: .92rem; color: var(--mg-ink-soft); flex: 1; }
.mg-guide-card__meta, .doc-meta { display: flex; gap: var(--mg-sp-3); font-size: .8rem; color: var(--mg-ink-muted); }
.mg-guide-article, .mg-guide-article__body { max-width: 72ch; }
.mg-guide-article h2, .mg-guide-article__body h2 { margin-block: var(--mg-sp-10) var(--mg-sp-4); }
.mg-guide-article h3, .mg-guide-article__body h3 { margin-block: var(--mg-sp-8) var(--mg-sp-3); }
.mg-guide-article p, .mg-guide-article__body p { margin-bottom: var(--mg-sp-5); color: var(--mg-ink-soft); line-height: 1.85; }
.mg-guide-article__body ul { margin-bottom: var(--mg-sp-5); }
.mg-guide-article__body li { position: relative; padding-left: var(--mg-sp-6); margin-bottom: var(--mg-sp-2); color: var(--mg-ink-soft); }
.mg-guide-article__body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--mg-orange); }
.mg-guide-article__cta { margin-top: var(--mg-sp-8); padding: var(--mg-sp-6); background: var(--mg-orange-50); border: 1px solid #ffddc4; border-radius: var(--mg-r-lg); }
.mg-guide-aside { padding: var(--mg-sp-6); background: var(--mg-panel); border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg); }
@media (min-width: 992px) { .mg-guide-aside { position: sticky; top: calc(var(--mg-header-total, 121px) + 20px); } }

/* ── 8. 404 & facture ──────────────────────────────────────────── */
.mg-404-page { display: flex; align-items: center; justify-content: center; padding-block: clamp(64px, 9vw, 128px); }
.mg-404-card {
    max-width: 540px; padding: clamp(32px, 5vw, 56px); text-align: center;
    background: var(--mg-panel); border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-xl); box-shadow: var(--mg-sh-md);
}
.mg-404-card__code {
    display: block; font-family: var(--mg-font-head); font-weight: 700;
    font-size: clamp(4rem, 13vw, 7rem); line-height: 1;
    letter-spacing: -.05em; color: var(--mg-orange);
}
.mg-404-card__title { margin-block: var(--mg-sp-4) var(--mg-sp-2); }
.mg-404-card__text { color: var(--mg-ink-soft); margin-bottom: var(--mg-sp-6); }

.invoice, .invoice-sheet {
    max-width: 820px; margin: var(--mg-sp-8) auto; padding: clamp(24px, 4vw, 48px);
    background: #fff; border: 1px solid var(--mg-border); border-radius: var(--mg-r-lg);
}
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--mg-sp-6); padding-bottom: var(--mg-sp-6); margin-bottom: var(--mg-sp-6); border-bottom: 1px solid var(--mg-border); }
.invoice-totals { margin-left: auto; max-width: 330px; }
.totals { display: flex; justify-content: space-between; padding-block: var(--mg-sp-2); }
.grand { border-top: 1px solid var(--mg-border); margin-top: var(--mg-sp-2); padding-top: var(--mg-sp-3); font-family: var(--mg-font-head); font-weight: 700; font-size: 1.15rem; }

@media print {
    .site-header-wrap, .site-footer, .footer, .mg-bottom-nav, .bottom-nav,
    .whatsapp-float, .mg-flash, .pdp-fixed-cart, .no-print { display: none !important; }
    body { background: #fff; }
    .invoice, .invoice-sheet { margin: 0; border: 0; padding: 0; max-width: none; }
    a { text-decoration: none; color: #000; }
}

/* ── 9. Restes de balisage ─────────────────────────────────────
   Classes encore presentes dans les vues et sans equivalent direct
   dans le systeme fm. Relevees par le controle « classes sans style ». */
.mg-product-card { min-width: 0; }              /* alias de .product-card */
.mg-product-card__badge { display: none; }      /* remplacees par .badge-promo / .product-badge */
.mg-product-card__badge--cat { display: none; }
.mg-cart-table { width: 100%; }
.mg-checkout-items__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mg-section-head__title { margin: 0; }
.mg-contact-card__icon--email { background: var(--mg-surface); color: var(--mg-navy); }
/* Variantes de .icon-btn : la couleur de base suffit, elles servent de
   crochets pour le JavaScript et les tests. */
.icon-btn--search, .icon-btn--account, .icon-btn--cart { position: relative; }
/* Prix hors carte produit (recapitulatifs, factures) */
.price, .num {
    font-family: var(--mg-font-head); font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--mg-navy);
}