/*
 * GOLDMARKET — catégories produit v3
 * Feuille du gabarit gm-cat-v3.php, d'après la maquette
 * « Categorie_Lingots_Or_v1 » (desktop 1440 + mobile 390).
 *
 * Jetons de la maquette, repris sans écart :
 *   papier #FAFAF8 · crème #F5F0E8 · encre #1A1814 · encre douce #2A2620
 *   filet #E5DFD4 · filet crème #D9D2C5 · gris #6E695F · gris clair #A9A093
 *   or #C4913A · or foncé #7A5A22 · or clair #E4C48A
 *   vert #4F6B4A · brique #9E4B3C · bord sombre #3A352E
 *
 * Rythme : 80 px par section, 72 px pour la bande encre d'authenticité,
 * 56 px pour la bande conseil. Conteneur 1 200 px.
 */

.gmc3-page .gmcat-hero,
.gmc3-page .gmcat-rea{display:none}

.gmc3{--pap:#FAFAF8;--cre:#F5F0E8;--enc:#1A1814;--enc2:#2A2620;--fil:#E5DFD4;--filc:#D9D2C5;
--gri:#6E695F;--gric:#A9A093;--or:#C4913A;--orf:#7A5A22;--orc:#E4C48A;--ver:#4F6B4A;--bri:#9E4B3C;--bos:#3A352E;
box-sizing:border-box;background:var(--pap);color:var(--enc2);
font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.gmc3 *,.gmc3 *::before,.gmc3 *::after{box-sizing:border-box}
/*
 * Pleine largeur. Le gabarit est rendu a l'interieur de
 * <main class="wp-block-group has-global-padding is-layout-constrained">, dont
 * la regle de theme bride TOUT enfant non aligne :
 *
 *   .is-layout-constrained > :where(:not(.alignfull)) { max-width: 900px }
 *
 * Mesure du 9 septembre 2026 : les sections sortaient donc a 900 px dans une
 * page de 1 440. La classe alignfull posee sur chaque section la fait sortir du
 * :not(), et les marges negatives ci-dessous annulent le rembourrage global du
 * <main>. Valeurs reprises des variables du theme, jamais ecrites en dur : si
 * la charte change son rembourrage, la section suit.
 */
.gmc3.alignfull{max-width:none;width:auto;
margin-left:calc(-1 * var(--wp--style--root--padding-left, 0px));
margin-right:calc(-1 * var(--wp--style--root--padding-right, 0px));
/*
 * Et surtout : margin-block a zero.
 *
 * Le theme pose sur CHACUN de ses enfants
 *   :root :where(.is-layout-constrained) > * { margin-block-start: bbe-40 }
 * ce qui inserait une bande blanche entre chacune des neuf sections, en plus
 * de leurs propres rembourrages. Le rythme vertical du gabarit appartient au
 * gabarit ; il ne se cumule pas avec celui du theme.
 *
 * Specificite : la regle du theme vaut 0,1,0 (:where() ne compte pas),
 * .gmc3.alignfull vaut 0,2,0. Elle passe devant sans !important.
 */
margin-top:0;margin-bottom:0}
.gmc3-in{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.gmc3 h1,.gmc3 h2,.gmc3 h3{font-family:"Playfair Display",Georgia,serif;color:var(--enc);margin:0;text-wrap:pretty}
.gmc3 p{margin:0;text-wrap:pretty}
.gmc3 a{color:var(--orf);text-decoration:none;text-underline-offset:3px}
.gmc3 a:hover{color:var(--enc);text-decoration:underline}
.gmc3 a:focus-visible,.gmc3 button:focus-visible,.gmc3 summary:focus-visible{outline:2px solid var(--enc);outline-offset:2px}
.gmc3 [id]{scroll-margin-top:150px}
.gmc3-mono{font-family:"DM Mono","DM Sans",monospace;font-variant-numeric:tabular-nums}
.gmc3-lead{font:400 17px/1.65 "DM Sans",sans-serif;color:var(--gri)}
.gmc3-n{text-align:right;white-space:nowrap}
.gmc3-neg{color:var(--bri)}
.gmc3-vert{background:var(--ver)}
.gmc3-or{background:var(--or)}
.gmc3-vertx{color:var(--ver)}
.gmc3-hausse{color:#7FB08A}
.gmc3-baisse{color:#C98A78}
.gmc3-ic{display:flex;flex:none}

/*
 * Boutons — trois niveaux, et un seul rôle par niveau.
 *
 *   --or    doré plein : ACHETER. Rien d'autre. Douze fois dans la grille
 *           (unité répétée, un bouton par carte, l'exception assumée de la
 *           maquette), une fois dans la bande finale — mais celle-là est sur
 *           fond encre, à un écran de distance, elle n'entre pas en
 *           concurrence.
 *   --bord  bordé encre : l'action secondaire d'une section.
 *   --doux  ni fond ni filet : la troisième action, quand deux boutons bordés
 *           côte à côte ne diraient plus rien de leur ordre.
 *
 * L'ancre « Choisir mon format » de l'en-tête était dorée. Elle ne vend rien,
 * elle fait défiler la page : la laisser dorée au-dessus de douze boutons
 * d'achat brouillait l'appel. Elle est passée en bordé.
 */
.gmc3-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;
border-radius:2px;font:500 17px/1 "DM Sans",sans-serif;text-decoration:none;cursor:pointer;
-webkit-tap-highlight-color:transparent;transition:background-color .14s cubic-bezier(.4,0,.2,1),border-color .14s}
.gmc3-b:hover{text-decoration:none}
/*
 * Le doré de la charte (#C4913A) posé à plat sur la carte crème passait pour
 * terne. Le filet plus foncé (#B5842F) et l'élévation unique du brandbook
 * (0 1px 2px rgba(26,24,20,.08)) lui redonnent une arête sans changer la
 * couleur validée dans la maquette. Le libellé passe en 600 : sur un aplat
 * doré, le 500 se dilue.
 */
.gmc3-b--or{background:var(--or);border:1px solid #B5842F;color:var(--enc);
box-shadow:0 1px 2px rgba(26,24,20,.08)}
.gmc3-b--or:hover{background:#A97B2E;border-color:#9A6F28;color:var(--enc)}
.gmc3-b--or:active{background:#9A6F28;border-color:#9A6F28;box-shadow:none}
.gmc3-b--bord{background:transparent;border:1px solid var(--enc);color:var(--enc)}
.gmc3-b--bord:hover{background:var(--cre);color:var(--enc)}
/* Le soulignement discret évite qu'un bouton sans fond ni filet passe pour un
   simple intitulé. Il tombe au survol, remplacé par le fond crème. */
.gmc3-b--doux{background:transparent;border:1px solid transparent;color:var(--enc);padding:0 14px;
text-decoration:underline;text-decoration-color:var(--filc);text-underline-offset:5px}
.gmc3-b--doux:hover{background:var(--cre);color:var(--enc)}
.gmc3-b--nuit{background:transparent;border:1px solid var(--bos);color:var(--pap);padding:0 22px}
.gmc3-b--nuit:hover{background:var(--enc2);color:var(--orc)}
.gmc3-plein{width:100%;height:50px;font-size:15px}
.gmc3-lienc{align-self:center;font:500 14px/1 "DM Sans",sans-serif;color:var(--orf)}

/* ---------- 03 EN-TÊTE DE CATÉGORIE ---------- */
.gmc3-tete{border-bottom:1px solid var(--fil)}
/*
 * Le bloc cours est calé en HAUT de la grille, pas en bas.
 *
 * Il était en align-items:end, comme dans la maquette où les deux colonnes
 * font la même hauteur. Sur la page réelle la colonne de gauche est bien plus
 * haute — le chapô vient de la description du terme, deux paragraphes — et le
 * bloc encre se retrouvait poussé de 360 px vers le bas, avec un vide à droite
 * du H1 et la grille produits d'autant repoussée sous la ligne de flottaison.
 *
 * Avec start, le cours est lu en même temps que le H1, et l'en-tête est
 * resserré de 30 px (rembourrages et gouttières) : la première carte produit
 * remonte d'autant. Aucun contenu retiré.
 */
.gmc3-tete .gmc3-in{padding-top:20px;padding-bottom:32px;display:flex;flex-direction:column;gap:22px}
.gmc3-tete__g{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
/*
 * LE FIL D'ARIANE — il vient de l'ancien gabarit, qui le rend avec la classe
 * « alignwide » et un margin:0 auto. Dans notre en-tete il partait plus a
 * droite que tout le reste : seul element de la colonne a ne pas s'aligner sur
 * le bord du sur-titre, du H1 et du chapo. On le repunaise a gauche sans
 * toucher a l'ancien gabarit, et on lui retire sa marge basse — la colonne
 * porte deja son propre ecart, les deux s'additionnaient.
 */
.gmc3-tete .gmc3-in>.gmcat-fil{max-width:none;width:100%;margin:0;padding:0}
.gmc3-tete .gmc3-in>.gmcat-fil ol{justify-content:flex-start}
.gmc3-tete__l{display:flex;flex-direction:column;gap:16px;min-width:0}
.gmc3-eb{display:flex;align-items:center;gap:12px;font:500 12px/1 "DM Sans",sans-serif;
letter-spacing:.12em;text-transform:uppercase;color:var(--orf)}
.gmc3-eb__f{width:24px;height:1px;background:var(--or);flex:none}
.gmc3-eb--clair{color:var(--orc)}
.gmc3-h1{max-width:18ch;font:500 52px/1.06 "Playfair Display",Georgia,serif;letter-spacing:-.02em}
.gmc3-h1 em{font-style:italic;font-weight:400}
.gmc3-page .gmcat-chapo{max-width:60ch;font:400 18px/1.65 "DM Sans",sans-serif;color:var(--enc2)}
.gmc3-page .gmcat-chapo p{margin:0 0 10px}
.gmc3-page .gmcat-chapo p:last-child{margin:0}
.gmc3-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:4px}
.gmc3-avis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:400 14px/1.4 "DM Sans",sans-serif;color:var(--enc2)}
.gmc3-avis b{font-weight:500}
.gmc3-et{color:var(--or);letter-spacing:2px}
.gmc3-rea{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;font:400 14px/1.4 "DM Sans",sans-serif;color:var(--gri)}
.gmc3-pt{width:3px;height:3px;border-radius:50%;background:var(--or);flex:none}

/*
 * LE BLOC COURS — un « stat tile » : un chiffre unique, sa variation, deux
 * mesures secondaires. Trois regles de la charte data le gouvernent.
 *
 * 1. Le chiffre heros est en DM Sans, PAS en mono. A 46 px, tabular-nums donne
 *    a chaque chiffre la largeur d'un zero : « 121,99 » sortait espace, comme
 *    une sortie de terminal. Les chiffres proportionnels le resserrent et le
 *    remettent a la marque. Le mono reste sur les valeurs en colonne, la ou
 *    l'alignement vertical compte vraiment.
 * 2. La variation devient une puce, avec un triangle : une couleur de statut
 *    ne porte jamais l'information seule. Le triangle est trace en bordures
 *    CSS et non en caractere — un glyphe ▲ tombe en emoji sur certains
 *    systemes.
 * 3. Les deux mesures partagent leurs lignes : intitules en ligne 1, valeurs
 *    en ligne 2. « Prime la plus basse » peut passer sur deux lignes sans
 *    decrocher « 190 € » de son voisin, ce qui arrivait avant.
 *
 * Contrastes releves sur l'encre #1A1814 : #A9A093 donne 6,85:1 et #7FB08A
 * 5,9:1 sur le fond de la puce. #6E695F, l'ancien gris des mentions, ne donne
 * que 3,2:1 — il ne porte plus de texte ici, seulement le point separateur.
 */
.gmc3-cours{background:var(--enc);border:1px solid var(--bos);border-radius:6px;padding:26px 28px;
display:flex;flex-direction:column;gap:20px;color:var(--pap)}
.gmc3-cours__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.gmc3-cours__lb{font:500 11.5px/1.3 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gric)}
.gmc3-cours__ts{font:400 12.5px/1 "DM Sans",sans-serif;color:var(--gric)}
.gmc3-cours__v{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.gmc3-cours__n{font:600 46px/1 "DM Sans",system-ui,sans-serif;letter-spacing:-.022em;color:var(--pap)}
.gmc3-cours__n span{font:500 19px/1 "DM Sans",sans-serif;letter-spacing:0;color:var(--gric)}
.gmc3-cours__d{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.gmc3-cours__var{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;
border-radius:999px;background:rgba(250,250,248,.07);
font:500 13.5px/1 "DM Mono",monospace;font-variant-numeric:tabular-nums}
.gmc3-cours__fl{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
.gmc3-hausse .gmc3-cours__fl{border-bottom:6px solid currentColor}
.gmc3-baisse .gmc3-cours__fl{border-top:6px solid currentColor}
.gmc3-cours__per{font:400 12.5px/1 "DM Sans",sans-serif;color:var(--gric)}
.gmc3-cours__g{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;
border-top:1px solid var(--bos);padding-top:18px}
.gmc3-cours__g>span{display:contents}
.gmc3-cours__g>span:nth-child(1)>.gmc3-k{grid-area:1/1}
.gmc3-cours__g>span:nth-child(1)>.gmc3-v{grid-area:2/1}
.gmc3-cours__g>span:nth-child(2)>.gmc3-k{grid-area:1/2}
.gmc3-cours__g>span:nth-child(2)>.gmc3-v{grid-area:2/2}
.gmc3-cours__g .gmc3-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.gmc3-u{font:400 13px/1.2 "DM Sans",sans-serif;color:var(--gric)}
.gmc3-u::before{content:"·";margin-right:8px;color:var(--gri)}
/* Toutes les references n'ont pas de poids fin : sur les pieces d'argent le
   ticket d'entree sort sans unite. Sans cette regle, la puce vide gardait son
   point separateur et la valeur se terminait par un « · » orphelin. */
.gmc3-u:empty{display:none}
.gmc3-k{font:400 12px/1.3 "DM Sans",sans-serif;color:var(--gric)}
.gmc3-v{font:500 18px/1.2 "DM Mono",monospace;font-variant-numeric:tabular-nums;color:var(--pap)}
.gmc3-cours__l a{font:500 14px/1.4 "DM Sans",sans-serif;color:var(--orc)}
.gmc3-cours__l a:hover{color:#fff}
.gmc3-note{font:400 13px/1.5 "DM Sans",sans-serif;color:var(--gric)}

/* ---------- 04 FILTRES COLLANTS ---------- */
.gmc3-corps{background:var(--pap)}
.gmc3-filt{position:sticky;top:0;z-index:7;border-bottom:1px solid var(--fil);
background:rgba(250,250,248,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gmc3-filt__in{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.gmc3-filt__g,.gmc3-filt__d{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.gmc3-filt__d{gap:14px}
.gmc3-filt__lb{font:500 12px/1 "DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gri)}
.gmc3-pil{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:transparent;
border:1px solid #C9C1B3;border-radius:2px;font:500 14px/1 "DM Sans",sans-serif;color:var(--enc);text-decoration:none}
.gmc3-pil:hover{background:var(--cre);color:var(--enc);text-decoration:none}
.gmc3-pil.est-actif{background:var(--enc);border-color:var(--enc);color:var(--pap)}
.gmc3-pil.est-actif:hover{color:var(--pap)}
.gmc3-pil__n{font:400 12px/1 "DM Mono",monospace;color:var(--gri)}
.gmc3-pil.est-actif .gmc3-pil__n{color:var(--gric)}
.gmc3-tri{padding:0 0 4px;background:transparent;border:none;border-bottom:1px solid transparent;
font:400 14px/1 "DM Sans",sans-serif;color:var(--gri);text-decoration:none}
.gmc3-tri:hover{color:var(--enc);text-decoration:none}
.gmc3-tri.est-actif{border-bottom-color:var(--enc);color:var(--enc)}
.gmc3-page .gmcat-compte-z{max-width:1200px;margin:0 auto;padding:16px 20px 0}
.gmc3-page .gmcat-compte{margin:0;font:400 15px/1.4 "DM Sans",sans-serif;color:var(--gri)}

/* ---------- 05 GRILLE ---------- */
.gmc3-liste{border-bottom:1px solid var(--fil)}
.gmc3-liste .gmc3-in{padding-top:28px;padding-bottom:56px;display:flex;flex-direction:column;gap:28px}
.gmc3-grille__t h2{font:400 32px/1.15 "Playfair Display",Georgia,serif}
.gmc3-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gmc3-c{position:relative;display:flex;flex-direction:column;background:var(--pap);border:1px solid var(--fil);border-radius:4px;
overflow:hidden;min-width:0;transition:box-shadow .14s cubic-bezier(.4,0,.2,1),border-color .14s}
.gmc3-c:hover{box-shadow:0 2px 6px rgba(26,24,20,.08);border-color:#C9C1B3}
.gmc3-c__v{position:relative;display:block;width:100%;aspect-ratio:4/3;background:var(--cre);
border-bottom:1px solid var(--fil);overflow:hidden;contain:paint}
/*
 * Imagify enveloppe la sortie de wp_get_attachment_image() dans un <picture> et
 * y transfere la classe. Styler .gmc3-c__img revenait donc a styler le
 * conteneur : l'<img> a l'interieur gardait son comportement naturel, prenait
 * toute la largeur et debordait en hauteur -- l'image apparaissait recadree et
 * etiree. On cible l'element, pas la classe, quel que soit l'emballage.
 *
 * !important sur la geometrie : la feuille de WooCommerce impose img{height:auto}
 * avec une specificite superieure, et c'est exactement ce qu'il faut neutraliser
 * ici pour que object-fit ait un cadre a remplir.
 */
.gmc3-c__v picture,.gmc3-c__v .gmc3-c__img{position:absolute;inset:0;display:block;
width:100%;height:100%;margin:0;padding:0;line-height:0}
.gmc3-c__v img{position:absolute!important;inset:0;display:block;
width:100%!important;height:100%!important;max-width:100%;max-height:100%;
object-fit:contain!important;object-position:50% 50%;
padding:28px;box-sizing:border-box;mix-blend-mode:multiply}
/*
 * Étiquette et pastille : posées en absolu par-dessus la vignette sur
 * ordinateur, remises dans le flux du corps sur mobile (voir le point d'arrêt
 * 899 px). Le conteneur .gmc3-c__tags porte le positionnement, jamais les deux
 * enfants — c'est ce qui permet de basculer d'un mode à l'autre en une règle.
 */
.gmc3-c__tags{position:absolute;top:14px;left:0;right:0;z-index:2;
display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
padding:0 16px 0 18px;pointer-events:none}
.gmc3-c__et{font:500 11px/1.2 "DM Mono",monospace;letter-spacing:.12em;color:var(--orf)}
.gmc3-c__bp{display:inline-flex;align-items:center;height:26px;padding:0 10px;
background:var(--enc);border-radius:2px;font:500 11px/1 "DM Sans",sans-serif;letter-spacing:.08em;
text-transform:uppercase;color:var(--orc);white-space:nowrap}
.gmc3-c__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;flex:1}
.gmc3-c__h{font:500 20px/1.25 "DM Sans",sans-serif}
.gmc3-c__h a{color:var(--enc)}
.gmc3-c__h a:hover{color:var(--orf)}
.gmc3-c__sp{font:400 14px/1.5 "DM Sans",sans-serif;color:var(--gri)}
.gmc3-c__p{font:500 26px/1.1 "DM Mono",monospace;font-variant-numeric:tabular-nums;color:var(--enc)}
.gmc3-c__d{display:flex;flex-direction:column;border-top:1px solid var(--fil);border-bottom:1px solid var(--fil);
font:400 14px/1.4 "DM Sans",sans-serif;color:var(--enc2)}
.gmc3-c__l{display:flex;align-items:center;gap:10px;padding:10px 0;flex-wrap:wrap}
.gmc3-c__l+.gmc3-c__l{border-top:1px solid var(--fil)}
.gmc3-c__l b{font-weight:500;color:var(--enc)}
.gmc3-c__l>span:last-child{color:var(--gri)}
.gmc3-pt2{width:8px;height:8px;border-radius:50%;flex:none}
.gmc3-c__a{display:flex;flex-direction:column;gap:10px;margin-top:auto}
/*
 * LE BOUTON DE MISE AU PANIER — doré de la charte, texte encre.
 *
 * Aligné sur le brandbook et sur la fiche produit (.gmv3-btn-p) : fond
 * #C4913A, texte #1A1814, filet #B5842F, survol #A97B2E. Arbitrage client du
 * 9 septembre, après un détour par l'encre : le bouton d'achat doit être le
 * même objet d'un bout à l'autre du parcours, de la catégorie à la fiche.
 *
 * La règle de contraste du brandbook est tenue. Ce qu'elle proscrit, c'est le
 * texte BLANC sur doré (2,75:1) ; l'encre sur doré donne 6,3:1, au-dessus du
 * seuil AA de 4,5. Le 2,75:1 relevé précédemment était celui du doré sur le
 * papier de la carte, c'est-à-dire du bouton contre son fond — une question
 * de détachement, pas de lisibilité du libellé.
 *
 * Cette règle ne pose donc plus que la géométrie : la peinture vient de
 * .gmc3-b--or, que le PHP pose déjà sur le bouton. Un seul niveau de classe,
 * pour que la variante mobile (48 px, ligne plus bas) puisse encore la
 * reprendre : les media queries n'ajoutent pas de spécificité, et le préfixe
 * .gmc3-c la neutralisait.
 */
.gmc3-c__cta{height:52px;font-size:16px;font-weight:600;letter-spacing:.01em;padding:0 18px}
.gmc3-c__f{align-self:center;font:500 14px/1 "DM Sans",sans-serif;color:var(--orf)}
/*
 * « Voir le panier » : ce lien n'est pas de nous. WooCommerce l'injecte après
 * le bouton une fois la mise au panier confirmée (a.added_to_cart.wc-forward).
 * Sans style il sortait en lien souligné, collé à gauche, plus voyant que le
 * bouton lui-même. On l'aligne sur « Voir la fiche » : centré, même graisse,
 * même or foncé, souligné au survol seulement.
 */
.gmc3-c__a .added_to_cart,.gmc3-c__a a.wc-forward{align-self:center;
font:600 14px/1.2 "DM Sans",sans-serif;color:var(--orf);
text-decoration:underline;text-underline-offset:3px;
padding:4px 2px;text-align:center}
.gmc3-c__a .added_to_cart:hover,.gmc3-c__a a.wc-forward:hover{color:var(--enc)}
/*
 * « Voir le panier » est souligné en permanence et en 600, « Voir la fiche »
 * reste en 500 sans soulignement. Après un ajout, le panier est l'action
 * suivante la plus probable : elle doit se voir. Elle ne devient pas un second
 * bouton pour autant — douze cartes portant deux boutons chacune feraient
 * vingt-quatre pavés dans la grille, et plus rien ne ressortirait.
 *
 * L'or foncé #7A5A22 et non le doré vif : sur fond papier, le doux donne
 * 2,75:1 et échouerait au seuil de lisibilité pour du texte. Le foncé donne
 * 6,5:1.
 */
.gmc3-plus{display:none}
.gmc3-page .gmcat-pagz{display:flex;justify-content:center}

/* ---------- 06 COMPARATEUR ---------- */
.gmc3-comp{background:var(--cre);border-bottom:1px solid var(--fil)}
.gmc3-comp__g{padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start}
.gmc3-comp__l{display:flex;flex-direction:column;gap:24px;min-width:0}
.gmc3-comp h2{font:400 40px/1.1 "Playfair Display",Georgia,serif}
.gmc3-tw{overflow-x:auto}
.gmc3-t{width:100%;border-collapse:collapse;background:var(--pap);border:1px solid var(--fil)}
.gmc3-t caption{text-align:left;padding:0 0 12px;font:400 14px/1.5 "DM Sans",sans-serif;color:var(--gri)}
.gmc3-t th{padding:12px 16px;text-align:left;font:500 12px/1.3 "DM Sans",sans-serif;letter-spacing:.1em;
text-transform:uppercase;color:var(--gri);border-bottom:1px solid var(--fil)}
.gmc3-t th.gmc3-n{text-align:right}
.gmc3-t td{padding:14px 16px;border-bottom:1px solid var(--fil);font:400 15px/1.4 "DM Sans",sans-serif;color:var(--enc2)}
.gmc3-t td a{font:500 16px/1.3 "DM Sans",sans-serif;color:var(--enc)}
.gmc3-t td.gmc3-mono{font-family:"DM Mono",monospace;font-variant-numeric:tabular-nums;font-weight:500;color:var(--enc)}
.gmc3-t td.gmc3-pq{color:var(--gri);font-size:14px}
.gmc3-aside{background:var(--pap);border:1px solid var(--fil);border-top:2px solid var(--or);border-radius:4px;
padding:28px;display:flex;flex-direction:column;gap:18px;position:sticky;top:156px}
.gmc3-aside__t{font:500 12px/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--orf)}
.gmc3-aside__i{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;border-bottom:1px solid var(--fil)}
.gmc3-aside__b{font:500 15px/1.3 "DM Sans",sans-serif;color:var(--enc)}
.gmc3-aside__c{font:400 14px/1.5 "DM Sans",sans-serif;color:var(--gri)}

/* ---------- 07 COMMANDER ---------- */
.gmc3-cmd{border-bottom:1px solid var(--fil)}
.gmc3-cmd .gmc3-in{padding-top:60px;padding-bottom:60px;display:flex;flex-direction:column;gap:32px}
.gmc3-cmd__t{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.gmc3-cmd__t h2{font:400 40px/1.1 "Playfair Display",Georgia,serif}
.gmc3-cmd__t .gmc3-lead{max-width:50ch}
.gmc3-cmd__g{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;border-top:1px solid var(--fil)}
.gmc3-cmd__i{padding:24px 0 0;display:flex;flex-direction:column;gap:12px}
.gmc3-cmd__h{display:flex;align-items:center;gap:12px;color:var(--orf)}
.gmc3-mention{font:500 13px/1.3 "DM Mono",monospace;letter-spacing:.1em}
.gmc3-mention.gmc3-vert{background:transparent;color:var(--ver)}
.gmc3-mention.gmc3-or{background:transparent;color:var(--orf)}
.gmc3-cmd__i h3{font:500 21px/1.25 "DM Sans",sans-serif}
.gmc3-cmd__i p{font:400 16px/1.65 "DM Sans",sans-serif;color:var(--gri)}
.gmc3-cmd__l a{font:500 15px/1.3 "DM Sans",sans-serif;color:var(--orf)}

/* ---------- 08 AUTHENTICITÉ ---------- */
.gmc3-auth{background:var(--enc)}
.gmc3-auth__g{padding-top:56px;padding-bottom:56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.gmc3-auth__l{display:flex;flex-direction:column;gap:18px;color:var(--pap)}
.gmc3-auth__l h2{font:400 40px/1.1 "Playfair Display",Georgia,serif;color:var(--pap)}
.gmc3-auth__l p{font:400 17px/1.65 "DM Sans",sans-serif;color:#D8D2C6}
.gmc3-auth__lien a{font:500 15px/1.3 "DM Sans",sans-serif;color:var(--orc)}
.gmc3-auth__lien a:hover{color:#fff}
.gmc3-auth__c{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gmc3-pr{padding:22px 24px;border:1px solid var(--bos);border-radius:4px;display:flex;flex-direction:column;gap:8px}
.gmc3-pr__n{font:400 13px/1 "DM Mono",monospace;color:var(--or)}
.gmc3-pr__t{font:500 18px/1.3 "DM Sans",sans-serif;color:var(--pap)}
.gmc3-pr__x{font:400 14px/1.55 "DM Sans",sans-serif;color:var(--gric)}

/* ---------- 09 FAQ ---------- */
.gmc3-faq{border-bottom:1px solid var(--fil)}
.gmc3-faq__g{padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.gmc3-faq__l{display:flex;flex-direction:column;gap:14px}
.gmc3-faq__l h2{font:400 40px/1.1 "Playfair Display",Georgia,serif}
.gmc3-faq__lien a{font:500 15px/1 "DM Sans",sans-serif;color:var(--orf)}
.gmc3-faq__c{display:flex;flex-direction:column;border-top:1px solid var(--fil)}
.gmc3-q{border-bottom:1px solid var(--fil)}
.gmc3-q summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;
list-style:none;cursor:pointer;font:500 18px/1.35 "DM Sans",sans-serif;color:var(--enc)}
.gmc3-q summary::-webkit-details-marker{display:none}
.gmc3-q summary svg{color:var(--orf);flex:none;transition:transform .14s cubic-bezier(.4,0,.2,1)}
.gmc3-q[open] summary svg{transform:rotate(180deg)}
.gmc3-q p{padding:0 48px 22px 0;font:400 16px/1.7 "DM Sans",sans-serif;color:var(--enc2)}

/* ---------- 10 TEXTE DE CATÉGORIE ---------- */
.gmc3-apropos{background:var(--cre);border-bottom:1px solid var(--fil)}
.gmc3-apropos__g{padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
.gmc3-apropos__l{display:flex;flex-direction:column;gap:18px;min-width:0}
.gmc3-apropos__l h2{font:400 32px/1.15 "Playfair Display",Georgia,serif}
.gmc3-apropos__l h3{font:500 20px/1.3 "DM Sans",sans-serif;margin:8px 0 0}
.gmc3-apropos__l p{max-width:66ch;font:400 17px/1.7 "DM Sans",sans-serif;color:var(--enc2)}
.gmc3-sign{margin-top:10px;padding-top:18px;border-top:1px solid var(--filc);
font:400 14px/1.4 "DM Sans",sans-serif;color:var(--gri)}
.gmc3-apropos__r .gmcat-parcourir{display:flex;flex-direction:column;gap:0}

/* ---------- 11 BANDE CONSEIL ---------- */
.gmc3-bande{background:var(--enc)}
.gmc3-bande__in{padding-top:56px;padding-bottom:56px;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.gmc3-bande__l{display:flex;flex-direction:column;gap:10px;max-width:60ch}
.gmc3-bande__t{font:400 32px/1.15 "Playfair Display",Georgia,serif;color:var(--pap)}
.gmc3-bande__s{font:400 16px/1.5 "DM Sans",sans-serif;color:var(--gric)}
.gmc3-bande__c{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ---------- TABLETTE ---------- */
@media(max-width:1100px){
.gmc3-tete__g,.gmc3-comp__g,.gmc3-auth__g,.gmc3-faq__g,.gmc3-apropos__g{grid-template-columns:1fr;gap:36px}
.gmc3-aside{position:static}
.gmc3-grille{grid-template-columns:repeat(2,1fr)}
.gmc3-cmd__g{grid-template-columns:repeat(2,1fr);gap:0 24px}
}

/* ---------- MOBILE 390 ---------- */
@media(max-width:899px){
.gmc3-in{padding:0 16px}
.gmc3-tete .gmc3-in{padding-top:16px;padding-bottom:28px;gap:18px}
.gmc3-h1{font-size:32px;line-height:1.08;max-width:none}
.gmc3-page .gmcat-chapo{font-size:15px;line-height:1.6}
.gmc3-cta{gap:10px}
.gmc3-b{width:100%;height:50px;font-size:16px}
/* Le bouton tertiaire echappe au pleine largeur. Centre comme les autres, son
   libelle sans fond ni filet flottait au milieu et cassait le bord gauche de
   la colonne : il ressemblait a du texte centre, pas a une action. Sans marge
   interieure, son soulignement demarre exactement sur le bord du H1. */
.gmc3-b--doux{width:auto;height:44px;padding:0;justify-content:flex-start}
.gmc3-cours{padding:18px}
.gmc3-cours__n{font-size:36px}
.gmc3-cours__n span{font-size:16px}
.gmc3-cours__g{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:6px;padding-top:14px}
.gmc3-u{font-size:12.5px}
.gmc3-v{font-size:15px}
.gmc3-filt__in{gap:12px;padding-top:8px;padding-bottom:8px}
/* Rail horizontal à ancrage, sans barre de défilement visible. */
.gmc3-filt__g{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;width:100%}
.gmc3-filt__g::-webkit-scrollbar{display:none}
.gmc3-pil{flex:none;scroll-snap-align:start}
.gmc3-filt__d{width:100%;overflow-x:auto;scrollbar-width:none}
.gmc3-filt__d::-webkit-scrollbar{display:none}
.gmc3-filt__d .gmc3-tri{flex:none}
.gmc3-liste .gmc3-in{padding-top:20px;padding-bottom:44px;gap:18px}
.gmc3-grille__t h2{font-size:24px}
/* Carte mobile : vignette 110 px verrouillée, texte à droite. */
.gmc3-grille{grid-template-columns:1fr;gap:14px}
.gmc3-c{display:grid;grid-template-columns:110px 1fr;align-items:stretch}
.gmc3-c__v{aspect-ratio:auto;height:100%;min-height:130px;border-bottom:none;border-right:1px solid var(--fil)}
.gmc3-c__v img{padding:10px}
/*
 * Mobile : l'étiquette et la pastille repassent dans le flux, en tête de la
 * colonne de texte, comme le montre la maquette 390. Dans la vignette de
 * 110 px elles étaient rognées par overflow:hidden.
 */
.gmc3-c__tags{position:static;padding:0;gap:6px;flex-wrap:wrap;justify-content:flex-start;
align-items:center;pointer-events:auto}
.gmc3-c__et{font-size:10px;letter-spacing:.1em}
.gmc3-c__bp{height:20px;padding:0 8px;font-size:9.5px;letter-spacing:.06em}
.gmc3-c__b{padding:14px 14px 16px;gap:10px}
.gmc3-c__h{font-size:16px;line-height:1.3}
.gmc3-c__sp{font-size:12px}
.gmc3-c__p{font-size:22px}
.gmc3-c__d{font-size:12px}
.gmc3-c__l{padding:8px 0;gap:8px}
.gmc3-c__cta{height:48px;font-size:15px}
.gmc3-grille.gmc3-repli>.gmc3-c:nth-child(n+5){display:none}
.gmc3-plus{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:14px;
background:transparent;border:1px solid var(--enc);border-radius:2px;
font:500 15px/1 "DM Sans",sans-serif;color:var(--enc);cursor:pointer}
.gmc3-comp__g,.gmc3-cmd .gmc3-in,.gmc3-faq__g,.gmc3-apropos__g{padding-top:44px;padding-bottom:44px;gap:24px}
.gmc3-auth__g{padding-top:40px;padding-bottom:40px;gap:24px}
.gmc3-bande__in{padding-top:36px;padding-bottom:36px;gap:20px}
.gmc3-comp h2,.gmc3-cmd__t h2,.gmc3-faq__l h2,.gmc3-auth__l h2{font-size:26px;line-height:1.15}
.gmc3-apropos__l h2{font-size:24px}
.gmc3-bande__t{font-size:24px}
.gmc3-lead{font-size:15px}
.gmc3-t th,.gmc3-t td{padding:10px 12px;font-size:14px}
.gmc3-t td a{font-size:15px}
.gmc3-cmd__g,.gmc3-auth__c{grid-template-columns:1fr}
.gmc3-cmd__i{padding:18px 0;border-bottom:1px solid var(--fil)}
.gmc3-apropos__l p{font-size:16px}
.gmc3-q summary{font-size:16px;padding:16px 0}
.gmc3-q p{padding-right:0;font-size:15px}
/* La barre d'onglets mobile occupe 64 px au ras du bas : on dégage la page. */
.gmc3-bande{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
.gmc3 *{transition:none!important;animation:none!important}
}

/* Le bouton de tri par prime partage l'apparence des liens de tri. */
.gmc3-tri-prime{cursor:pointer;font-family:"DM Sans",sans-serif}