/*
 * GM Accueil — second héros « Le comptoir ».
 *
 * Les jetons sont redéclarés localement, et la feuille ne déclare aucune
 * dépendance : le bloc est servi sur deux pages, et gm-accueil-v6/style.css
 * n'est pas servie sur /acheter/ — zéro occurrence dans le HTML de cette page,
 * compté le 11 novembre 2026. Déclarer la dépendance y aurait tiré 40 Ko de
 * feuille inutile. Les valeurs sont celles de la charte, mesurées le même jour
 * et consignées dans docs/REGLES-PROJET.md :
 *
 *   or sur encre   #E4C48A   — l'or texte #7A5A22 donne 2,80:1 sur l'encre,
 *                              il est donc interdit ici.
 *   gris sur encre #A9A093   — #6E695F donne 3,25:1 sur l'encre, interdit (GM-22).
 *   une seule élévation      0 1px 2px rgba(26,24,20,.06)
 */
.gmh2{
	--h2-encre:#1A1814;
	--h2-encre-f:#211E19;
	--h2-filet:#3A352E;
	--h2-or:#E4C48A;
	--h2-or-v:#C4913A;
	--h2-clair:#D8D2C6;
	--h2-sec:#A9A093;
	--h2-papier:#FAFAF8;
	background:var(--h2-encre);
	color:var(--h2-clair);
	padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px);
	position:relative;
	overflow:hidden;
}

/* ---------- Le decor : l'agence derriere le comptoir ---------- */

.gmh2__decor{
	position:absolute;
	inset:0 0 auto 0;
	/* La photo occupe le haut de la section ; le rail flotte sur l'encre pleine
	   en dessous. C'est la lecture de la reference : la salle derriere, la
	   marchandise devant. */
	height:clamp(320px,52%,560px);
	overflow:hidden;
	pointer-events:none;
}
.gmh2__decor-img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	/* Le sujet — comptoir, mains, lampe — vit a droite du cadre ; le texte vit a
	   gauche. On pousse l'image pour que les deux ne se marchent pas dessus. */
	object-position:68% 38%;
}

/* Le voile. Deux degrades superposes, et aucun n'est decoratif :
   — le vertical ramene la photo a l'encre pleine avant le rail, pour que les
     cartes aient un fond franc ;
   — l'horizontal creuse la gauche, ou vivent le titre et le sous-titre.
   Les ratios obtenus sont mesures par echantillonnage de pixels sur le rendu. */
.gmh2__voile{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,rgba(26,24,20,.93) 0%,rgba(26,24,20,.86) 38%,rgba(26,24,20,.55) 62%,rgba(26,24,20,.42) 100%),
		linear-gradient(180deg,rgba(26,24,20,.55) 0%,rgba(26,24,20,.74) 55%,var(--h2-encre) 97%);
}

/* Halo doré très sourd sous le rail : la seule touche d'effet, et elle ne
   porte aucune information. */
.gmh2::before{
	content:"";
	position:absolute;
	inset:auto 0 18% 0;
	height:340px;
	background:radial-gradient(60% 120% at 50% 100%,rgba(228,196,138,.10),transparent 70%);
	pointer-events:none;
	z-index:1;
}

/* 1200/24, et non 1240/16 : c'est la boite de .h6-wrap, donc du heros juste
   au-dessus et de la sous-nav juste en dessous sur l'accueil. Mesure du
   11 novembre 2026 : 1240/16 donnait 1 208 px utiles contre 1 152 px pour le
   reste de la page, soit un debord de 28 px de chaque cote — invisible a une
   requete HTTP, visible a l'oeil des la premiere capture. Verifie apres
   correction : boite 120 -> 1320 px, identique a .h6-wrap au pixel.

   Sur /acheter/ le voisin est .gme-w, en 1240/40, soit 1 160 px utiles contre
   nos 1 152 : 4 px d'ecart de chaque cote avec la bande de preuve juste en
   dessous. On ne suit pas les deux grilles : le bloc garde une boite unique,
   et c'est l'accueil — la page la plus vue, et celle ou il est le plus
   visible — qui la fixe. */
.gmh2__in{
	position:relative;
	z-index:2;
	max-width:1200px;
	margin-inline:auto;
	padding-inline:24px;
}

/* ---------- Tête ---------- */

.gmh2__tete{max-width:62ch}

/* Les regles ci-dessous sont prefixees par .gmh2 pour la meme raison que le
   titre plus haut : sur /acheter/ le bloc vit dans .gme, dont la feuille les
   battait. Mesure du 11 novembre 2026 sur la page servie —
     .gme p{margin:0}                 (0,1,1) annulait les trois marges :
         eyb, sub et spec rendaient 0px sur /acheter/ contre 10, 14 et 10 px
         sur l'accueil. L'etiquette collait au titre, le sous-titre a la ligne
         de cours, et « 5 g d'or fin » au prix dans chacune des neuf cartes.
     .gme a:focus-visible,
     .gme button:focus-visible        (0,2,1) reprenait l'anneau de focus et
         imposait outline #7A5A22. Releve sur le bouton d'ajout : couleur
         calculee rgb(122,90,34), soit 2,80:1 sur l'encre — exactement la
         valeur que l'en-tete de cette feuille declare interdite. Au clavier,
         on tabulait sur les neuf boutons sans voir ou on etait. axe-core ne
         le voit pas : le contraste d'un indicateur de focus n'est pas
         automatisable, d'ou les « 0 violation » du meme jour. */
.gmh2 .gmh2__eyb{
	margin:0 0 10px;
	font-family:"DM Sans",system-ui,sans-serif;
	font-size:12px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--h2-or);
}

/* Le titre et le nom de carte portent des selecteurs plus longs qu'il n'y
   parait necessaire, et ce n'est pas du zele.

   Mesure du 11 novembre 2026 sur /acheter/, cascade lue par CSS.getMatched-
   StylesForNode : le bloc y est imbrique dans .gme, et trois regles de cette
   page battaient les miennes a (0,1,0) —
     .gme h1,.gme h2 {color:var(--e-ink)}                        (0,1,1)
     .gme h3 {color:var(--e-ink)}                                (0,1,1)
     body.gm-bq h2:not(.wp-block-post-title):not(.gmf-sr)        (0,3,2)
   Resultat constate : titre #1A1814 sur fond #1A1814, soit 1:1, invisible ;
   nom de carte #1A1814 sur carte #211E19, 1,05:1. Les deux illisibles sur la
   page, intacts sur l'accueil, ou aucune de ces regles ne s'applique.

   La chaine de descendance suit le DOM reel et porte (0,4,0), au-dessus de
   (0,3,2) : pas d'!important, et la regle dit d'elle-meme ou elle vit. Le nom
   de carte n'a besoin que de (0,2,0) pour passer devant .gme h3. */
.gmh2 .gmh2__in .gmh2__tete .gmh2__t{
	margin:0 0 12px;
	font-family:"Playfair Display",Georgia,serif;
	font-weight:400;
	font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);
	line-height:1.08;
	color:var(--h2-papier);
	text-wrap:balance;
}

.gmh2 .gmh2__sub{
	margin:0 0 14px;
	font-family:"DM Sans",system-ui,sans-serif;
	font-size:17px;
	line-height:1.6;
	color:var(--h2-sec);
	max-width:54ch;
}

.gmh2__cours{
	margin:0;
	font-family:"DM Sans",system-ui,sans-serif;
	font-size:14.5px;
	line-height:1.5;
	color:var(--h2-clair);
}
.gmh2__cours-l{
	display:inline-block;
	margin-right:6px;
	font-size:11.5px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--h2-sec);
}
.gmh2__cours strong{color:var(--h2-or);font-variant-numeric:tabular-nums}
.gmh2__cours-h{color:var(--h2-sec)}

/* ---------- Rail ---------- */

.gmh2__rail{
	margin-top:clamp(28px,3.5vw,44px);
	overflow-x:auto;
	overscroll-behavior-x:contain;
	scroll-snap-type:x proximity;
	scrollbar-width:thin;
	scrollbar-color:var(--h2-filet) transparent;
	/* La barre de défilement native reste visible : c'est le seul indice qu'il
	   reste du contenu à droite sur un pointeur fin. */
	padding-bottom:10px;
}

/* Anneau à deux tons. Le fond de cette section est connu — l'encre — mais le
   rail peut être survolé par le halo : le trait doré porte, le halo sombre le
   détache. Jamais `outline:none` sur un élément rendu focalisable. */
.gmh2 .gmh2__rail:focus-visible{
	outline:2px solid var(--h2-or);
	outline-offset:3px;
	box-shadow:0 0 0 6px rgba(26,24,20,.9);
}

.gmh2__piste{
	display:flex;
	gap:14px;
	margin:0;
	padding:0 2px;
	list-style:none;
}

/* ---------- Carte ---------- */

.gmh2__c{
	flex:0 0 232px;
	display:flex;
	flex-direction:column;
	scroll-snap-align:start;
	background:var(--h2-encre-f);
	border:1px solid var(--h2-filet);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(26,24,20,.06);
}

/* Tuile blanche, et c'est un choix, pas un oubli.
   Les neuf visuels produit sont des prises de vue sur fond blanc. Posees sur la
   carte encre, elles decoupaient un rectangle blanc franc au milieu du
   comptoir — releve a la capture du 11 novembre 2026 sur le staging. Donner a
   la tuile le meme blanc que les images les fait disparaitre dans une vitrine
   eclairee, qui est exactement la metaphore du bloc. Le filet sous la tuile
   rattache la vitrine a la carte. */
.gmh2__vis{
	display:block;
	background:#FFFFFF;
	border-bottom:1px solid var(--h2-filet);
	line-height:0;
}
.gmh2__vis img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	object-fit:contain;
	padding:10px;
	box-sizing:border-box;
}
.gmh2__vis-vide{display:block;aspect-ratio:1/1}

.gmh2__txt{
	flex:1 1 auto;
	padding:14px 14px 10px;
	font-family:"DM Sans",system-ui,sans-serif;
}

.gmh2 .gmh2__n{
	margin:0 0 6px;
	font-family:"DM Sans",system-ui,sans-serif;
	font-size:15px;
	font-weight:700;
	line-height:1.3;
	color:var(--h2-papier);
}
.gmh2__n a{
	color:inherit;
	text-decoration:none;
}
.gmh2__n a:hover{text-decoration:underline;text-underline-offset:2px}
.gmh2 .gmh2__n a:focus-visible{
	outline:2px solid var(--h2-or);
	outline-offset:2px;
	border-radius:2px;
}

.gmh2 .gmh2__spec{
	margin:0 0 10px;
	font-size:12.5px;
	line-height:1.45;
	color:var(--h2-sec);
}

.gmh2__px{
	margin:0;
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:8px;
}
.gmh2__eur{
	font-size:17px;
	font-weight:700;
	color:var(--h2-or);
	font-variant-numeric:tabular-nums;
}
/* La prime est un mot, pas une pastille de couleur : elle doit rester lisible
   en niveaux de gris comme pour un daltonien. */
.gmh2__prime{
	font-size:12px;
	color:var(--h2-sec);
	white-space:nowrap;
}

/* ---------- Bouton d'ajout ---------- */

.gmh2__ajout{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	margin:0 14px 14px;
	padding:0 14px;
	border:1px solid var(--h2-or-v);
	border-radius:6px;
	background:transparent;
	font-family:"DM Sans",system-ui,sans-serif;
	font-size:14px;
	font-weight:600;
	line-height:1.2;
	text-align:center;
	text-decoration:none;
	color:var(--h2-or);
	transition:background-color .15s ease,color .15s ease;
}
.gmh2 .gmh2__ajout:hover,
.gmh2 .gmh2__ajout:focus-visible{
	background:var(--h2-or);
	color:var(--h2-encre);
}
.gmh2 .gmh2__ajout:focus-visible{
	outline:2px solid var(--h2-papier);
	outline-offset:2px;
}
.gmh2__ajout:active{background:var(--h2-or-v);color:var(--h2-encre)}

/* États posés par wc-add-to-cart.js. On ne les invente pas : ce sont les classes
   que WooCommerce ajoute lui-même, on se contente de les habiller. */
.gmh2__ajout.loading{opacity:.6;pointer-events:none}
.gmh2__ajout.added{background:var(--h2-or);color:var(--h2-encre);border-color:var(--h2-or)}
/* WooCommerce injecte un lien « Voir le panier » après le bouton ; dans un rail
   il casserait la hauteur des cartes. Le compteur de la barre le remplace. */
.gmh2__c .added_to_cart{display:none}

/* ---------- Commandes du rail ---------- */

.gmh2__cmd{
	display:flex;
	gap:8px;
	margin-top:14px;
}
.gmh2__nav{
	width:44px;
	height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--h2-filet);
	border-radius:999px;
	background:transparent;
	color:var(--h2-clair);
	font-size:17px;
	line-height:1;
	cursor:pointer;
}
.gmh2__nav:hover{border-color:var(--h2-or);color:var(--h2-or)}
.gmh2 .gmh2__nav:focus-visible{
	outline:2px solid var(--h2-or);
	outline-offset:2px;
}
/* aria-disabled et non [disabled] : le bouton reste focalisable pour ne pas
   renvoyer le focus au body en bout de rail (voir app.js). Le contraste du
   bouton inactif sort du champ de WCAG, qui exempte les composants inactifs. */
.gmh2__nav[aria-disabled="true"]{opacity:.35;cursor:default}
.gmh2__nav[aria-disabled="true"]:hover{border-color:var(--h2-filet);color:var(--h2-clair)}

/* ---------- Barre « votre sélection » ---------- */

.gmh2__barre{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 18px;
	margin-top:clamp(24px,3vw,36px);
	padding-top:20px;
	border-top:1px solid var(--h2-filet);
	font-family:"DM Sans",system-ui,sans-serif;
}
.gmh2__barre-t{
	margin:0;
	font-size:12px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--h2-sec);
}
.gmh2__etat{
	margin:0;
	font-size:14.5px;
	color:var(--h2-or);
	min-height:1.2em;
}
.gmh2__cta{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	min-height:46px;
	padding:0 20px;
	border-radius:6px;
	background:var(--h2-or);
	color:var(--h2-encre);
	font-size:14.5px;
	font-weight:700;
	text-decoration:none;
}
/* Le numero de zone est un repere decoratif : il porte son propre espace, que
   le rendu HTML avalait (« 03 —Voir mon panier » a la capture du 11 novembre). */
.gmh2__cta span[aria-hidden]{margin-right:5px}
.gmh2__barre-t span[aria-hidden]{margin-right:3px}
.gmh2__eyb span[aria-hidden]{margin-right:3px}
.gmh2__cta:hover{background:#EFD6A8}
.gmh2 .gmh2__cta:focus-visible{
	outline:2px solid var(--h2-papier);
	outline-offset:2px;
}
/* 44 px de haut comme .h6-lien, .h6-ordre__b et .h6-subnav a : sans cette
   regle le lien fait 21 px et manque la cible tactile. */
.gmh2__lien{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	font-size:14px;
	color:var(--h2-clair);
	text-decoration:underline;
	text-underline-offset:2px;
}
.gmh2__lien:hover{color:var(--h2-or)}
.gmh2 .gmh2__lien:focus-visible{
	outline:2px solid var(--h2-or);
	outline-offset:2px;
	border-radius:2px;
}

/* ---------- Petits écrans ---------- */

@media (max-width:600px){
	.gmh2__decor{height:clamp(260px,46%,420px)}
	/* En portrait, le sujet est coupe : on recentre sur le comptoir. */
	.gmh2__decor-img{object-position:60% 42%}
	.gmh2__voile{background:linear-gradient(180deg,rgba(26,24,20,.62) 0%,rgba(26,24,20,.84) 55%,var(--h2-encre) 97%)}
	.gmh2__c{flex-basis:188px}
	/* La chaine complete est repetee : une media query n'ajoute aucune
	   specificite, et la regle de base est passee a (0,4,0). Sans cela cette
	   declaration ne s'appliquait jamais, sur aucune des deux pages — le titre
	   sortait a 32 px sur un ecran de 360 px au lieu des 28,4 px voulus. */
	.gmh2 .gmh2__in .gmh2__tete .gmh2__t{font-size:clamp(1.7rem,1.1rem + 3vw,2.2rem)}
	.gmh2 .gmh2__sub{font-size:16px}
	.gmh2__cta{margin-left:0;width:100%;justify-content:center}
	.gmh2__cmd{display:none}
}

@media (prefers-reduced-motion:reduce){
	.gmh2__rail{scroll-behavior:auto}
	.gmh2__ajout{transition:none}
}