/**
 * Tunnel public — feuille de style.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * LOT R-E (08/09/2026) — refonte visuelle d'après les maquettes hi-fi v2.1
 * validées par Yuna (GO DA). Cette feuille REPREND toutes les règles opposables
 * de la version précédente : aucune n'a été perdue, chacune garde son motif.
 * Ce qui s'y ajoute est un SYSTÈME — trois voix, une échelle, un rayon, une
 * matière — que la feuille du T2 n'avait pas (diagnostic D1 à D10 du 08/09).
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Tokens couleur du module (§ 12bis.6, OPPOSABLE — mesures de la revue A11y) :
 *   or texte             #856231  (4,71 sur crème, 5,18 sur ivoire)
 *   bordures porteuses   #856231 ou encre — JAMAIS #b8925a (2,45-2,51 : sous 3:1)
 *   anneau de focus      encre #1a1714, >= 2 px, outline-offset >= 2 px
 *   gris de texte d'aide #6b6258 (5,08 — ne PAS l'éclaircir)
 *   filet décoratif      #e0d5c3 (1,23) — JAMAIS seul délimiteur d'un contrôle
 *
 * #b8925a reste autorisé en FOND de bouton (encre dessus = 6,20) et en accent
 * décoratif intérieur, jamais sur une bordure qui porte du sens.
 *
 * MATIÈRE — la règle qui décide de la couleur d'un fond :
 *   blanc  #ffffff = on SAISIT dedans (champs, cartes de gamme)
 *   ivoire #faf7f1 = on LIT (billet, récapitulatif, messages, appui)
 *   crème  #f1ece4 = la page, et rien d'autre
 *
 * DEUX VOIX, et ce sont celles du site public — pas de troisième, pas de
 * rechargement : le thème sert déjà Crimson Pro (titres) et Public Sans (corps).
 *
 * ⚠️ TYPOGRAPHIE 03 (arbitrage Yuna du 08/09, rapport Designer § 5.5, décision
 * D-113). Le site quitte ses trois familles précédentes — nommées dans D-113,
 * PAS ici : un nom de famille obsolète servi au navigateur finit toujours par
 * être relu comme un contrat encore valide. Le MONOSPACE disparaît du site :
 * `--sgd-mono` n'a plus de source propre et POINTE désormais sur la pile du
 * corps — un seul changement, les huit usages suivent, et la variable reste le
 * point d'articulation de la voix « Données » (le jeu `typography3` d'Avada :
 * corps en 600, capitales, 0,14 em). Ce que cette feuille sert et ce que le
 * thème sert doivent partir dans le MÊME train : sinon le tunnel affiche
 * l'ancienne police pendant tout l'écart, sur la page où se joue la confiance.
 * ⛔ AUCUN `@import`, AUCUNE fonte redéclarée, AUCUN appel à un service de
 * polices : charger une deuxième fois ce que le thème charge déjà coûte un
 * aller-retour réseau pour un rendu identique. Chaque pile porte donc un repli
 * système ET un générique final : le jour où le thème cesse de servir une
 * famille, le module dégrade proprement au lieu de retomber sur le Times du
 * navigateur.
 *
 * ⚠️ DEUX RACINES, ET C'EST LE REMÈDE M-4 (passe 1 A11y du T2). Cette feuille
 * n'était pas chargée du tout sur /ma-reservation, et la charger n'aurait pas
 * suffi : les règles opposables — anneau de focus, masquage accessible, plancher
 * de 44 px, mouvement réduit — étaient portées par le seul sélecteur
 * `.sgd-tunnel`, et la page client a sa propre racine `.sgd-client`. Toute règle
 * qui tient une prescription du § 12bis doit donc nommer LES DEUX. Les classes
 * partagées (.sgd-bouton, .sgd-message, .sgd-evitement, .sgd-sortie) n'étaient,
 * elles, jamais en cause.
 */

.sgd-tunnel,
.sgd-client {
	--sgd-or: #856231;
	--sgd-encre: #1a1714;
	--sgd-fond: #f1ece4;
	--sgd-ivoire: #faf7f1;
	--sgd-blanc: #ffffff;
	--sgd-aide: #6b6258;
	--sgd-or-fond: #b8925a;
	--sgd-filet: #e0d5c3;
	--sgd-filet-fort: #cdbfa6;

	/* Rayon UNIQUE, sur les quatre coins : règle du site posée le 08/09 (R-D
	   boutons). Un rayon par famille d'objets serait un système de plus.
	   D-104 (arbitrage Yuna du 08/09, 19 h) : la règle du site passe de 4 à
	   8 px, posée par Fusion Builder sur les 121 boutons Avada. Le tunnel n'a
	   pas de rayon à lui, il PORTE celui du site — d'où UNE valeur changée, et
	   pas une de plus. Trois formes littérales survivent au token et ne sont
	   PAS des boutons : les pastilles rondes (50 %), le jalon d'arrivée du
	   trajet (1 px — une FORME qui distingue, jamais une teinte) et l'option de
	   suggestion (2 px — rayon intérieur, il suit son conteneur). */
	--sgd-r: 8px;

	--sgd-serif: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--sgd-sans: "Public Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* ⛔ LE MONOSPACE A DISPARU DU SITE, ET LA VARIABLE RESTE. Elle pointe sur la
	   pile du corps : les huit usages de `var(--sgd-mono)` suivent sans être
	   réécrits, et la voix « Données » garde un point d'articulation nommé si une
	   famille lui est un jour rendue. Ce qui la distingue désormais n'est plus la
	   chasse fixe mais la GRAISSE et l'interlettrage (600, capitales), posés sur
	   chaque règle qui la porte. */
	--sgd-mono: var(--sgd-sans);

	color: var(--sgd-encre);
	font-family: var(--sgd-sans);
	line-height: 1.7;
	max-width: 1152px;
	margin-left: auto;
	margin-right: auto;

	/* Le module se mesure LUI-MÊME : la bascule en une colonne ne dépend donc
	   pas seulement de la fenêtre, mais aussi de la largeur que le thème lui
	   accorde (une colonne 2/3 d'Avada ne fait pas 1152 px). */
	container-type: inline-size;
	container-name: sgd;

	/* B7 — la cale de défilement, RÉALIGNÉE SUR LA MESURE (m-R2 de la recette QA,
	   m-7 de la passe 2 A11y, 08/09 sur la maquette). L'entête Avada est en
	   `position: fixed` et vaut 90,19 px (1280) / 93,11 px (375) AU REPOS,
	   81,00 / 82,97 px EN ÉTAT COLLÉ. Le pire cas est donc l'entête au repos à
	   375 : 93,11 px. 112 px laissent au moins 16 px de dégagement dans les
	   QUATRE cas mesurés (+18,89 au pire, +31,00 au mieux), et un seul palier
	   suffit — l'ancien couple 120/104 px reposait sur l'idée que l'entête
	   MAIGRIT sur téléphone ; la mesure dit l'inverse (93,11 contre 90,19).

	   ⚠️ Cette déclaration-ci ne mord que si le thème fait des racines du module
	   un CONTENEUR DÉFILANT. Ce n'est pas le cas sur la maquette : c'est `html`
	   qui défile, et c'est la règle `html:has(…)` plus bas qui agit. On la garde
	   parce qu'elle ne coûte rien et qu'elle couvre ce cas-là ; on ne lui prête
	   plus un effet qu'elle n'a pas. */
	scroll-padding-top: 112px;
}

/*
 * `box-sizing` n'est PAS hérité, et il n'est garanti par aucun thème : sans lui,
 * un `max-width` borne le contenu et laisse fuir la boîte (leçon du reflow à
 * 305 px au train T0). On le pose sur tout le sous-arbre du module, jamais
 * au-delà.
 */
.sgd-tunnel *,
.sgd-tunnel *::before,
.sgd-tunnel *::after,
.sgd-client *,
.sgd-client *::before,
.sgd-client *::after {
	box-sizing: border-box;
}

/*
 * ⛔ m-R2 (recette QA) / m-7 (A11y passe 2) — LA DÉCLARATION GLOBALE ÉTAIT MORTE,
 * ET ELLE NE DEVAIT PAS RESSUSCITER TELLE QUELLE.
 *
 * Le module déclarait `html { scroll-padding-top: 120px }`. Mesuré sur la
 * maquette : 94 px SERVIS, sur TOUTES les pages du site, y compris celles qui ne
 * chargent pas cette feuille — la valeur vient du thème. Les deux déclarations
 * ont la même spécificité (`html` = 0,0,0,1) et la feuille du thème est enfilée
 * APRÈS : c'est l'ordre du document qui tranchait, et le module perdait.
 * Conséquence réelle : 0 arrêt masqué sur 681, dégagement +13,00 px (1280) et
 * +11,03 px (375) en entête collée, +0,89 px au seul cas « entête au repos à
 * 375 ». Rien n'était masqué ; l'intention, elle, était fausse.
 *
 * ⛔ MONTER LA SPÉCIFICITÉ SUR `html` NU EST INTERDIT — c'est l'objection de la
 * passe 2, et elle est juste : `html:root { … }` ferait gagner le module sur TOUT
 * le site, y compris les pages qu'il ne rend pas. Un module ne décide pas de la
 * cale des autres.
 *
 * ✅ CE QUI EST POSÉ : la cale est portée par `html` QUAND LA PAGE PORTE LE
 * MODULE, et par personne d'autre. `html:has(.sgd-tunnel)` vaut 0,1,0,1 — il bat
 * `html{}` (0,0,0,1) sans `!important` — et ne s'applique nulle part ailleurs.
 * Sur un moteur sans `:has()`, la règle est ignorée et la page retombe sur les
 * 94 px du thème, dont la passe 2 a mesuré qu'ils ne masquent rien : la
 * dégradation est sûre.
 *
 * ⛔ LES DEUX SÉLECTEURS SONT DÉGROUPÉS (D-90, même motif qu'en couleurs
 * forcées) : une liste de sélecteurs contenant un sélecteur inconnu est invalidée
 * EN ENTIER, et ce serait bête de perdre la page du tunnel parce que la page
 * client est nommée dans la même virgule.
 */
html:has(.sgd-tunnel) {
	scroll-padding-top: 112px;
}

html:has(.sgd-client) {
	scroll-padding-top: 112px;
}

/* ------------------------------------------------------------------
 * Focus : jamais neutralisé, jamais doré sur crème (2,45 : illisible).
 * ------------------------------------------------------------------ */

.sgd-tunnel :focus-visible,
.sgd-client :focus-visible {
	outline: 2px solid var(--sgd-encre);
	outline-offset: 2px;
}

.sgd-tunnel .screen-reader-text,
.sgd-client .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Le lien d'évitement redevient visible au focus : masqué en permanence, il
   n'aiderait personne. */
.sgd-evitement:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var(--sgd-ivoire);
	color: var(--sgd-encre);
	border: 2px solid var(--sgd-encre);
	border-radius: var(--sgd-r);
	font-weight: 600;
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Champ piège — masquage HORS ÉCRAN, jamais display:none.
 * `display:none` et `visibility:hidden` retirent le champ de l'arbre
 * d'accessibilité sans empêcher un robot de le remplir : on protégerait
 * moins en excluant davantage (proc-013 B2, bloquant A11y B1).
 * ------------------------------------------------------------------ */

.sgd-piege {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * L'œil — la voix mono du site : capitales interlettrées, or texte.
 * C'est elle qui hiérarchise là où huit filets dorés identiques ne
 * hiérarchisaient plus rien (défaut D2 du diagnostic).
 * ------------------------------------------------------------------ */

.sgd-tunnel .sgd-oeil,
.sgd-client .sgd-oeil {
	display: block;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sgd-or);
	font-weight: 600;
	line-height: 1.5;
}

/*
 * ⛔ `.sgd-euro` N'A PLUS DE RÈGLE, ET C'EST LE RÉSULTAT D'UNE MESURE (N-3, 09/09).
 *
 * La règle renvoyait le signe € dans la voix du CORPS, à 0,62 em, parce que l'euro
 * de l'ANCIENNE voix des titres se lisait « C » à grande taille. Le lot 0.5.6 l'avait
 * CONSERVÉE PAR PRUDENCE en disant, en toutes lettres, que la mesure appartenait
 * à l'ancienne famille de titres et n'avait pas été rejouée.
 *
 * Elle l'a été. À 32 px, le glyphe € vaut 20 px de haut en Crimson Pro 500 contre
 * 25 px en Public Sans : la voix des titres rend un € bien proportionné à ses
 * chiffres, et la règle ne corrigeait donc plus rien — elle RÉTRÉCISSAIT le signe
 * d'environ un cinquième (≈ 15 px au lieu de 20 dans le billet). Une règle qui
 * n'a plus son motif n'est pas une protection : c'est un parti pris qui se fait
 * passer pour une correction. Elle part.
 *
 * ⚠️ LE `<span class="sgd-euro">` RESTE, et il n'est plus là pour le style : il
 * est le point d'ancrage de la doublure d'affichage — `peindreTotal()` reconstruit
 * exactement cette structure, et le serveur la rend à l'identique. Les deux mondes
 * ne divergent pas (remède M-1). Le jour où la voix des titres changera encore, la
 * question se rouvrira ICI, avec une mesure neuve.
 *
 * ⚠️ CHANGEMENT VISIBLE : le contrôle à l'œil sur la page servie appartient au
 * Designer.
 */

/* ------------------------------------------------------------------
 * Ossature
 * ------------------------------------------------------------------ */

.sgd-tunnel-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--sgd-filet);
}

/* Cible tactile : mesurée à 338 × 20 px au banc A11y (réserve M-4). */
.sgd-telephone {
	margin: 0;
}

.sgd-telephone a {
	color: var(--sgd-or);
	font-weight: 600;
	font-size: 0.938rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sgd-progression {
	margin: 0 0 0.25rem;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sgd-or);
	font-weight: 600;
}

/*
 * Fil d'étapes : un RAIL, pas une liste à puces (défaut D4 — quatre `<li>` que
 * seule la graisse distinguait). Chaque étape porte un segment de filet dont la
 * couleur dit l'état : filet décoratif à venir, or terminée, encre en cours.
 * L'état est AUSSI écrit en toutes lettres dans le `screen-reader-text` du
 * rendu, et la graisse double la couleur : jamais la couleur seule (1.4.1).
 *
 * `list-style: none` + `display: flex` retire la sémantique de LISTE sous
 * Safari/VoiceOver (réserve A11y m-7). Un marqueur VIDE — `list-style-type: ""`
 * — la conserve sans rien afficher. Ne pas remplacer par `list-style: none`
 * seul : ce serait revenir au défaut.
 */
.sgd-fil {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	list-style-type: "";
	margin: 1.5rem 0 0;
	padding: 0;
	width: 100%;
}

/* ⚠️ c-R1 (recette QA du 08/09, confirmé sans conséquence d'accessibilité par la
   passe 2). `flex: 1 1 150px; min-width: 120px` demandait 150 px par jalon : dans
   la colonne 1/1 de la maquette, le rail ne dispose que d'environ 480 px à 1280,
   trois jalons tenaient et « 04 Confirmation » retombait seul en dessous (3 + 1).
   Base ZÉRO et `min-width: 0` : les quatre se partagent la ligne à parts égales
   quelle que soit la largeur disponible, donc jamais de retour à la ligne au-
   dessus du palier de 700 px posé plus bas. L'ordre du DOM, la lecture et
   `aria-current="step"` ne bougent pas — le défaut était visuel, le remède
   l'est aussi. */
.sgd-fil-item {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.75rem 1rem 0 0;
	border-top: 2px solid var(--sgd-filet);
	color: var(--sgd-aide);
	font-size: 0.875rem;
	line-height: 1.4;
}

.sgd-fil-rang {
	display: block;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.18em;
	color: var(--sgd-aide);
	margin-bottom: 2px;
}

.sgd-fil-item.est-faite {
	border-top-color: var(--sgd-or);
	color: var(--sgd-or);
}

.sgd-fil-item.est-faite .sgd-fil-rang {
	color: var(--sgd-or);
}

.sgd-fil-marque {
	font-family: var(--sgd-mono);
	margin-right: 5px;
}

.sgd-fil-item.est-courante {
	border-top-color: var(--sgd-encre);
	color: var(--sgd-encre);
	font-weight: 700;
}

.sgd-fil-item.est-courante .sgd-fil-rang {
	color: var(--sgd-encre);
	font-weight: 600;
}

.sgd-tunnel-corps,
.sgd-client-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 344px);
	gap: 3.5rem;
	align-items: start;
	margin-top: 3rem;
	padding-bottom: 1.5rem;
}

.sgd-tunnel-principal {
	min-width: 0;
}

.sgd-titre-etape {
	font-family: var(--sgd-serif);
	font-weight: 500;
	font-size: 2.25rem;
	line-height: 1.12;
	letter-spacing: -0.012em;
	margin: 0.5rem 0;
	color: var(--sgd-encre);
}

.sgd-chapeau {
	margin: 0 0 2.5rem;
	color: var(--sgd-aide);
	font-size: 1.063rem;
	max-width: 56ch;
}

/*
 * ⚠️ LES SOUS-TITRES DU MODULE PARLENT LA MÊME LANGUE QUE SON TITRE. Sans cette
 * règle, « Comment souhaitez-vous régler ? » et « Vos informations de carte »
 * retombaient sur la sans-serif grasse du thème, au milieu d'un écran rendu dans
 * la voix des titres :
 * mesuré sur la capture du banc, c'était le seul objet de l'étape 4 qui ne
 * suivait aucune des trois voix.
 *
 * ⚠️ ELLE EST DÉCLARÉE ICI, EN AMONT, ET C'EST DÉLIBÉRÉ : sa spécificité (0,1,1)
 * est la MÊME que celle de `.sgd-recap > h2` ou `.sgd-recap-final h2`. À égalité,
 * c'est l'ordre du fichier qui tranche — la placer plus bas la ferait gagner
 * contre les règles particulières qu'elle est censée laisser passer.
 */
.sgd-tunnel h2,
.sgd-tunnel h3,
.sgd-client h2,
.sgd-client h3 {
	font-family: var(--sgd-serif);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.006em;
	margin: 2.5rem 0 1.25rem;
	color: var(--sgd-encre);
}

.sgd-tete {
	display: block;
}

.sgd-tete:focus-visible {
	outline: 2px solid var(--sgd-encre);
	outline-offset: 6px;
}

/*
 * Sous 900 px — et à 200 % de zoom, qui produit la même largeur utile — la
 * colonne de droite passe SOUS le formulaire. Aucun défilement horizontal
 * (1.4.10). La requête de conteneur qui suit fait le même travail quand c'est
 * le THÈME qui rétrécit le module (colonne 2/3 d'Avada) et non la fenêtre.
 */
@media (max-width: 900px) {
	.sgd-tunnel-corps,
	.sgd-client-colonnes {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-top: 2rem;
	}
}

/*
 * ⚠️ MOYENNE M-2 DU VISA CORRECTEUR — LES DEUX SYSTÈMES DE RUPTURE DOIVENT DIRE
 * LA MÊME CHOSE. La bascule « billet collant → repli mobile » tenait à la
 * requête de MÉDIA (la fenêtre), l'effondrement des colonnes à la requête de
 * CONTENEUR (la largeur que le thème accorde au module). Dans une colonne 2/3
 * d'Avada sur écran large, les colonnes s'effondraient et le billet de 344 px
 * restait collant, le repli caché : un billet orphelin, et le prix invisible
 * pendant la saisie — exactement le défaut D10 qu'on venait de refermer.
 *
 * ⚠️ CE BLOC-CI NE PORTE QUE LES COLONNES. L'échange de `display` du billet vit
 * à la FIN du fichier, avec son jumeau à 900 px — et ce n'est pas un rangement :
 * `.sgd-recap-mobile { display: none }` est déclarée plus bas, à spécificité
 * ÉGALE. Écrit ici, l'échange serait écrasé par elle. Mesuré au navigateur avant
 * de le déplacer : module à 712 px, colonnes effondrées, billet masqué… et repli
 * masqué lui aussi. Le remède du remède.
 */
@container sgd (max-width: 860px) {
	.sgd-tunnel-corps,
	.sgd-client-colonnes {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ------------------------------------------------------------------
 * Champs — le BLANC se saisit, l'ivoire se lit.
 * ------------------------------------------------------------------ */

.sgd-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 1.5rem;
	max-width: 100%;
}

.sgd-champ label,
.sgd-tunnel legend,
.sgd-client legend {
	font-size: 0.938rem;
	font-weight: 700;
	color: var(--sgd-encre);
	line-height: 1.4;
}

.sgd-champ input[type="text"],
.sgd-champ input[type="email"],
.sgd-champ input[type="tel"],
.sgd-champ input[type="date"],
.sgd-champ input[type="time"],
.sgd-champ input[type="number"],
.sgd-champ select,
.sgd-champ textarea {
	width: 100%;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: var(--sgd-blanc);
	color: var(--sgd-encre);
	font-family: var(--sgd-sans);
	font-size: 1.063rem;
	line-height: 1.5;
	max-width: 100%;
	box-sizing: border-box;
}

.sgd-champ textarea {
	min-height: 96px;
	resize: vertical;
}

.sgd-champ--court input {
	max-width: 148px;
}

.sgd-champ input::placeholder,
.sgd-champ textarea::placeholder {
	color: #8b8175;
}

/*
 * ⚠️ MESURÉ AU BANC (lot R-E), ET LA MESURE A CORRIGÉ LE PREMIER REMÈDE.
 *
 * 2 arrêts de tabulation sur 34 arrivaient SANS anneau à l'étape 1 : les champs
 * `date` et `time`. Chromium délègue leur focus à un SEGMENT interne (jour,
 * mois, heure). Ce qu'on a mesuré, arrêt par arrêt, est contre-intuitif :
 *
 *   document.activeElement.id  = « sgd-date »   ← le champ hôte, bien lui
 *   champ.matches(':focus')          = FAUX
 *   champ.matches(':focus-visible')  = FAUX
 *   champ.matches(':focus-within')   = VRAI
 *
 * Autrement dit, `activeElement` désigne l'hôte alors que le focus CSS vit dans
 * son arbre fantôme. Une règle `:focus` — le premier remède écrit ici — reste
 * donc INERTE à la tabulation, tout en paraissant marcher dès qu'on appelle
 * `champ.focus()` en script : c'est exactement le genre de correctif qui passe
 * une relecture et rate la mesure.
 *
 * `:focus-within` couvre les deux chemins. C'est volontairement plus large que
 * `:focus-visible` : ce sont des champs de SAISIE, l'anneau y est légitime
 * aussi à la souris, et mieux vaut un anneau de trop qu'un arrêt clavier sans
 * repère (2.4.7).
 */
.sgd-champ input[type="date"]:focus-within,
.sgd-champ input[type="time"]:focus-within {
	outline: 2px solid var(--sgd-encre);
	outline-offset: 2px;
	border-color: var(--sgd-encre);
}

.sgd-aide,
.sgd-facultatif {
	color: var(--sgd-aide);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
}

.sgd-aide {
	margin: 0;
}

/*
 * Les fieldsets ne sont plus des BOÎTES à filet doré (défaut D2 : huit familles
 * d'objets portaient le même filet). Un intitulé, un filet sous l'intitulé, de
 * l'air : la hiérarchie revient. `box-sizing` reste déclaré ici même — il n'est
 * pas hérité, et c'est la leçon du reflow à 305 px du train T0.
 */
.sgd-tunnel fieldset,
.sgd-client fieldset {
	border: 0;
	margin: 0 0 2.5rem;
	padding: 0;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.sgd-tunnel fieldset > legend,
.sgd-client fieldset > legend {
	padding: 0 0 0.75rem;
	margin: 0 0 1.25rem;
	width: 100%;
	border-bottom: 1px solid var(--sgd-filet);
}

/* Deux champs par rangée dès que la colonne le permet. */
.sgd-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.5rem;
}

.sgd-duo > * {
	min-width: 0;
}

/*
 * ------------------------------------------------------------------
 * Cibles tactiles : 44 px de plancher ITES, pas les 24 px de WCAG.
 * ------------------------------------------------------------------
 *
 * ⚠️ CE PLANCHER A ÉTÉ INERTE PENDANT TOUT LE T1 (réserve A11y M-4), et il
 * l'était pour deux raisons distinctes, toutes deux mesurées au banc :
 *
 *  1. `min-height` n'a AUCUN effet sur une boîte INLINE non remplacée. Les
 *     `<label>` sont inline par défaut : mesuré,
 *     `label[for=sgd-prestation-transfert]` ⇒ display=inline, min-height=44px,
 *     hauteur réelle **20 px**. D'où le `display: inline-flex` ci-dessous — il
 *     n'est pas cosmétique, c'est LUI qui rend la déclaration opérante ;
 *  2. le sélecteur `input[type="checkbox"] + label` ne désignait RIEN : sur la
 *     case CGV, le `<label>` ENVELOPPE la case, il ne la suit pas. Vérifié :
 *     `document.querySelector('.sgd-tunnel input[type=checkbox] + label')` ⇒
 *     `null`. D'où `.sgd-cgv label`, qui vise la structure réellement écrite.
 */
.sgd-tunnel button,
.sgd-client button,
.sgd-raccourci {
	min-height: 44px;
}

.sgd-tunnel input[type="radio"] + label,
.sgd-tunnel input[type="checkbox"] + label,
.sgd-client input[type="checkbox"] + label,
.sgd-cgv label,
.sgd-client-confirmation label,
.sgd-option label,
.sgd-prestation {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-height: 44px;
}

/*
 * ⛔ PAS de `display: flex` ni `display: block` sur un `<summary>` : cela lui
 * retire son marqueur d'ouverture natif (majeure A11y M-3, mesurée à deux
 * reprises). `list-item` est déjà une boîte de niveau bloc — `min-height` y
 * produit son effet, le triangle reste.
 */
.sgd-detail-prix summary,
.sgd-details-rgpd > summary,
.sgd-recap-mobile > summary {
	display: list-item;
	min-height: 44px;
	cursor: pointer;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Boutons — 30 boutons or à contour sur le site, capitales tracées.
 * Le module parle enfin la même langue (défaut D6).
 * ------------------------------------------------------------------ */

.sgd-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.875rem 1.875rem;
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: transparent;
	color: var(--sgd-encre);
	font-family: var(--sgd-sans);
	font-size: 0.813rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.sgd-bouton:hover {
	background: var(--sgd-ivoire);
}

.sgd-bouton-primaire {
	/* #b8925a en FOND avec l'encre dessus : 6,20 — au-dessus de 4,5. */
	background: var(--sgd-or-fond);
	border-color: var(--sgd-encre);
}

.sgd-bouton-primaire:hover {
	background: #c39d66;
}

/*
 * ⛔ Jamais d'`opacity` sur un bouton neutralisé : elle casserait le contraste
 * du texte, et le bouton reste focusable — sa raison doit rester lisible.
 */
.sgd-bouton[aria-disabled="true"] {
	background: var(--sgd-ivoire);
	border-color: var(--sgd-or);
	color: var(--sgd-encre);
	cursor: not-allowed;
	opacity: 1;
}

/*
 * ORDRE DU DOM VOLONTAIREMENT INVERSÉ (correctif H-4 du visa T1).
 *
 * Le bouton d'AVANCEMENT est émis en PREMIER dans le HTML : le premier bouton
 * `submit` d'un formulaire est son bouton par défaut, celui que le navigateur
 * active sur Entrée — ou sur « Aller »/« Go » au clavier virtuel mobile. Avec le
 * retour en tête, taper son e-mail puis valider faisait RECULER d'une étape.
 *
 * `row-reverse` rétablit l'ordre visuel attendu (retour à gauche, action primaire
 * à droite) ; `justify-content: flex-end` va nécessairement avec lui, car
 * l'inversion déplace aussi le bord d'alignement — sans elle, le bloc irait se
 * coller au bord opposé.
 */
.sgd-actions {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: flex-end;
	margin: 2.5rem 0 0;
}

.sgd-reassurance,
.sgd-minimisation {
	color: var(--sgd-aide);
	font-size: 0.875rem;
	margin: 0.75rem 0 0;
}

/* ------------------------------------------------------------------
 * Prestations : des pastilles, pas une liste de radios alignés.
 * ------------------------------------------------------------------ */

.sgd-liste-prestations {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * La cible tactile MESURABLE est la pastille entière : le `<label>` porte
 * lui-même la hauteur et le rembourrage, il n'y a pas de calque invisible à
 * croire sur parole.
 */
.sgd-prestation {
	align-items: stretch;
	gap: 0;
	min-height: 52px;
	padding: 0 0 0 1rem;
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: var(--sgd-blanc);
}

.sgd-prestation input[type="radio"] {
	align-self: center;
	width: 18px;
	height: 18px;
	accent-color: #1a1714;
	margin: 0;
}

.sgd-prestation input[type="radio"] + label {
	min-height: 52px;
	padding: 0 1.25rem 0 0.625rem;
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

/*
 * R-2 — LA DOUBLURE EST AUTONOME, ET C'EST TOUTE LA RÉSERVE.
 *
 * Une liste de sélecteurs contenant un sélecteur INCONNU est invalidée EN
 * ENTIER : `A.est-choisie, B:has(input:checked) { … }` disparaît tout entière
 * sur un moteur sans `:has()`, doublure comprise. Mesuré sur la maquette v2 :
 * la carte cochée devenait indiscernable des trois autres. Les deux formes se
 * déclarent donc SÉPARÉMENT — jamais dans la même liste — et la classe est
 * posée par le SERVEUR au rendu, puis suivie par le script au `change`.
 */
.sgd-prestation.est-choisie {
	background: var(--sgd-encre);
	border-color: var(--sgd-encre);
}

.sgd-prestation:has(input:checked) {
	background: var(--sgd-encre);
	border-color: var(--sgd-encre);
}

.sgd-prestation.est-choisie input[type="radio"] + label {
	color: var(--sgd-ivoire);
}

.sgd-prestation:has(input:checked) input[type="radio"] + label {
	color: var(--sgd-ivoire);
}

.sgd-prestation.est-choisie input[type="radio"] {
	accent-color: #faf7f1;
}

.sgd-prestation:has(input:checked) input[type="radio"] {
	accent-color: #faf7f1;
}

.sgd-prestation:focus-within {
	outline: 2px solid var(--sgd-encre);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Raccourcis de lieu — deux rangées, une par champ.
 * ------------------------------------------------------------------ */

.sgd-raccourcis {
	margin: 0 0 1.5rem;
}

.sgd-raccourcis--depart {
	margin-top: -0.5rem;
}

.sgd-raccourcis-intitule {
	margin: 0 0 0.625rem;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sgd-or);
	font-weight: 600;
}

/* Même remède que le fil d'étapes : un marqueur vide conserve la sémantique de
   liste sous Safari/VoiceOver là où `list-style: none` la retire (m-7). */
.sgd-raccourcis ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	list-style-type: "";
	margin: 0;
	padding: 0;
}

.sgd-raccourci {
	padding: 0 1rem;
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: transparent;
	color: var(--sgd-encre);
	font-family: var(--sgd-sans);
	font-size: 0.875rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.sgd-raccourci:hover {
	background: var(--sgd-ivoire);
}

/*
 * D-194 (remarque R-2 du 21/10/2026) : listes repliées par défaut, dépliées par
 * un bouton de divulgation. Le bouton reprend la voix de l'intitulé qu'il
 * remplace (même corps, même or texte #856231, 4,71 sur crème) ; il garde le
 * plancher tactile de 44 px de `.sgd-tunnel button` et l'anneau de focus du
 * module (`.sgd-tunnel :focus-visible`).
 *
 * Le bouton et la liste sont servis ou passés `hidden` : chacun porte sa garde
 * `[hidden]`, écrite APRÈS la règle qui pose son `display` (règle du dépôt,
 * D-142 ; un cas de la suite 194 le vérifie sur cette feuille).
 */
.sgd-raccourcis-bascule {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0 0.25rem 0 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	line-height: 1.4;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sgd-or);
	font-weight: 600;
	cursor: pointer;
}

.sgd-raccourcis-bascule:hover .sgd-raccourcis-bascule-texte {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Chevron dessiné par deux bordures en couleur courante : il suit l'or du texte,
   et le mode couleurs forcées le repeint avec le texte. Pointe vers le bas,
   liste repliée ; vers le haut, liste ouverte. Décoratif (`aria-hidden`) : c'est
   `aria-expanded` qui dit l'état. */
.sgd-raccourcis-chevron {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.15s ease;
}

.sgd-raccourcis-bascule[aria-expanded="true"] .sgd-raccourcis-chevron {
	transform: translateY(25%) rotate(-135deg);
}

/* Écart entre le bouton et la liste ouverte. Sans script, le bouton est `hidden`
   et ce sélecteur ne désigne rien : la liste garde son placement d'avant. */
.sgd-raccourcis-bascule:not([hidden]) + ul {
	margin-top: 0.375rem;
}

.sgd-raccourcis-bascule[hidden],
.sgd-raccourcis ul[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
 * Combobox d'adresse
 * ------------------------------------------------------------------ */

/*
 * ⛔ LA BOÎTE INTERMÉDIAIRE N'EST PAS DÉCORATIVE (bloquante A11y B-1).
 *
 * C'est ELLE qui porte `position: relative`, pas le conteneur du champ. Sans
 * elle, `top: 100%` se mesure sur toute la colonne — libellé, champ, message
 * d'erreur, texte d'aide — et la liste s'ouvre 74 à 98 px sous le champ (mesuré).
 * Elle n'enferme que le champ et sa liste.
 *
 * Le conteneur garde `position: relative` en ceinture : si la boîte disparaît un
 * jour, la liste retombera au moins dans le bon champ, et pas en haut de la page.
 */
.sgd-champ-adresse {
	position: relative;
}

.sgd-champ-boite {
	position: relative;
	display: block;
}

/* Le champ n'est plus l'élément flex direct de `.sgd-champ` : sans cette
   largeur, il retomberait à sa taille par défaut (~20 caractères). */
.sgd-champ-boite input {
	width: 100%;
}

.sgd-suggestions {
	list-style: none;
	list-style-type: "";
	margin: 4px 0 0;
	padding: 4px;
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: var(--sgd-blanc);
	max-height: 17rem;
	overflow-y: auto;
	scroll-padding-block: 8px;
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: 100%;
	box-shadow: 0 12px 28px rgba(26, 23, 20, 0.10);
}

.sgd-suggestion {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 2px;
}

/* L'option active n'est PAS signalée par la seule couleur : elle porte aussi
   une bordure épaisse à gauche. */
.sgd-suggestion.est-active {
	background: var(--sgd-fond);
	box-shadow: inset 3px 0 0 var(--sgd-encre);
}

.sgd-suggestion-principal {
	font-size: 1rem;
}

.sgd-suggestion-secondaire {
	color: var(--sgd-aide);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------
 * Cartes de gamme — une image, un prix, une capacité (défaut D5).
 * ------------------------------------------------------------------ */

/*
 * ⚠️ LA GRILLE EST UN CONTENEUR INTÉRIEUR, pas le `fieldset`. Le `fieldset`
 * garde son identité — il porte l'ancre de l'erreur de gamme et reçoit le focus
 * (remède M-2) — et le rendu des colonnes ne s'appuie jamais sur un `display`
 * posé sur un `fieldset`, dont le comportement varie d'un moteur à l'autre.
 */
.sgd-gammes-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem;
}

.sgd-gamme {
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: var(--sgd-blanc);
	overflow: hidden;
	position: relative;
}

/* R-2 : la doublure et le pilote, DÉGROUPÉS (voir le commentaire des
   prestations plus haut : c'est la même réserve, et le même remède). */
.sgd-gamme.est-choisie {
	border-color: var(--sgd-encre);
	box-shadow: inset 0 0 0 1px var(--sgd-encre);
}

.sgd-gamme:has(input:checked) {
	border-color: var(--sgd-encre);
	box-shadow: inset 0 0 0 1px var(--sgd-encre);
}

.sgd-gamme:focus-within {
	outline: 2px solid var(--sgd-encre);
	outline-offset: 2px;
}

/*
 * La carte ENTIÈRE est le label (réserve A11y m-6) : c'est lui qui porte le
 * rembourrage, donc toute la surface sélectionne la gamme — y compris la
 * description commerciale, sur laquelle un clic ne faisait rien.
 */
.sgd-gamme-carte {
	display: block;
	cursor: pointer;
}

/*
 * m-6 : le vrai bouton radio est masqué PAR DÉCOUPE, À L'INTÉRIEUR de la carte.
 * `left: -9999px` le sortirait de la carte et se comporte mal en couleurs
 * forcées. Il reste focusable, il reste le SEUL contrôle.
 */
.sgd-gamme-carte input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

.sgd-gamme-visuel {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--sgd-fond);
	overflow: hidden;
}

.sgd-gamme-visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sgd-gamme-contenu {
	display: block;
	padding: 1.25rem;
}

.sgd-gamme-rang {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/*
 * ⛔ BLOQUANT A11y B-1 (08/09). Le rond visible était un VRAI `<input>` radio
 * `aria-hidden` dans son propre groupe : cliquer dessus cochait le leurre SANS
 * décocher la gamme réellement sélectionnée — deux ronds pleins pour un seul
 * prix. Il n'y a plus aucun contrôle fantôme : la puce est un `<span>` décoratif
 * piloté par l'état du SEUL vrai bouton radio.
 */
.sgd-gamme-puce {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--sgd-encre);
	background: var(--sgd-blanc);
	position: relative;
	flex: none;
	margin-top: 6px;
}

.sgd-gamme.est-choisie .sgd-gamme-puce::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sgd-encre);
}

.sgd-gamme:has(input:checked) .sgd-gamme-puce::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sgd-encre);
}

.sgd-gamme-titre {
	display: block;
	font-family: var(--sgd-serif);
	font-size: 1.438rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
}

.sgd-gamme-modeles {
	display: block;
	color: var(--sgd-aide);
	font-size: 0.875rem;
	margin: 2px 0 0;
}

.sgd-gamme-capacite {
	display: block;
	font-family: var(--sgd-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--sgd-encre);
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sgd-filet);
}

.sgd-gamme-prix {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
}

.sgd-gamme-montant {
	font-family: var(--sgd-serif);
	font-size: 1.875rem;
	line-height: 1.1;
	font-weight: 500;
}

.sgd-gamme-ttc {
	font-family: var(--sgd-mono);
	font-weight: 600;
	font-size: 0.688rem;
	letter-spacing: 0.14em;
	color: var(--sgd-aide);
	text-transform: uppercase;
}

.sgd-gamme-description,
.sgd-gamme-raison {
	display: block;
	color: var(--sgd-aide);
	font-size: 0.875rem;
	margin: 0.75rem 0 0;
}

.sgd-badge {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 4px 10px;
	border-radius: var(--sgd-r);
	background: var(--sgd-encre);
	color: var(--sgd-ivoire);
	font-family: var(--sgd-mono);
	font-weight: 600;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sgd-gamme-etat {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 4px 10px;
	border-radius: var(--sgd-r);
	border: 1px solid var(--sgd-or);
	color: var(--sgd-or);
	font-family: var(--sgd-mono);
	font-weight: 600;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sgd-gamme.est-incompatible {
	background: var(--sgd-fond);
}

.sgd-gamme.est-incompatible .sgd-gamme-visuel img {
	opacity: 0.55;
}

/* ------------------------------------------------------------------
 * Détail du prix — les points de conduite sont en CSS, jamais en
 * caractères « ..... » qu'un lecteur d'écran épellerait (§ 12bis.4).
 * ------------------------------------------------------------------ */

/* M-3 : la frontière d'un CONTRÔLE se dessine en or, jamais avec le filet
   décoratif mesuré à 1,23. */
.sgd-detail-prix {
	margin: 2rem 0 2.5rem;
	border-top: 1px solid var(--sgd-or);
}

.sgd-detail-prix summary {
	padding: 0.75rem 0;
	font-family: var(--sgd-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sgd-or);
	font-weight: 600;
}

.sgd-lignes {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
	font-size: 0.938rem;
}

.sgd-lignes th {
	text-align: left;
	font-weight: 400;
	position: relative;
	overflow: hidden;
	padding: 6px 0;
}

.sgd-lignes th::after {
	content: "";
	position: absolute;
	bottom: 0.55em;
	margin-left: 0.5em;
	width: 100%;
	border-bottom: 1px dotted var(--sgd-aide);
}

.sgd-lignes td {
	text-align: right;
	white-space: nowrap;
	padding: 6px 0 6px 1rem;
	font-family: var(--sgd-mono);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.sgd-ligne-total th,
.sgd-ligne-total td {
	font-weight: 700;
	border-top: 1px solid var(--sgd-encre);
	padding-top: 10px;
}

/* ------------------------------------------------------------------
 * Options
 * ------------------------------------------------------------------ */

.sgd-options .sgd-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--sgd-filet);
}

.sgd-option label {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.sgd-option input[type="number"] {
	width: 84px;
	min-height: 48px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: var(--sgd-blanc);
	font-family: var(--sgd-mono);
	font-size: 1rem;
	text-align: center;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Le billet — matière ivoire, encoches, partie vive collante.
 *
 * ⚠️ SEULE LA PARTIE VIVE EST COLLANTE (revue UX P1). À 1280 × 720 le billet
 * entier mesurait 665 à 765 px pour 608 px disponibles sous l'entête collée :
 * un bloc `sticky` plus haut que sa place se fige, et son BAS — c'est-à-dire le
 * total — devient inatteignable. L'aperçu de trajet défile donc hors du bloc.
 * ------------------------------------------------------------------ */

.sgd-recap {
	position: sticky;
	top: 120px;
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 1.5rem;
}

.sgd-recap > h2,
.sgd-recap > h3 {
	font-family: var(--sgd-serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sgd-filet);
	line-height: 1.25;
}

.sgd-recap dl {
	margin: 0;
}

.sgd-recap dt {
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sgd-aide);
	font-weight: 600;
	margin-top: 1rem;
}

.sgd-recap dt:first-of-type {
	margin-top: 0;
}

.sgd-recap dd {
	margin: 2px 0 0;
	font-size: 1rem;
	line-height: 1.45;
}

/* Le trajet se lit comme un itinéraire : un rond au départ, un carré plein à
   l'arrivée, un filet entre les deux. Aucune information n'y est portée par la
   seule forme — les deux adresses sont écrites. */
.sgd-trajet {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	list-style-type: "";
}

.sgd-trajet li {
	position: relative;
	padding: 0 0 14px 22px;
	font-size: 1rem;
	line-height: 1.4;
}

.sgd-trajet li:last-child {
	padding-bottom: 0;
}

.sgd-trajet li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 9px;
	height: 9px;
	border: 1px solid var(--sgd-or);
	border-radius: 50%;
	background: var(--sgd-ivoire);
}

.sgd-trajet li:last-child::before {
	border-radius: 1px;
	background: var(--sgd-or);
}

.sgd-trajet li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 18px;
	bottom: 2px;
	width: 1px;
	background: var(--sgd-filet-fort);
}

/* L'encoche du billet : deux entailles sur la ligne pointillée du total. */
.sgd-recap-total {
	position: relative;
	margin: 1.5rem -1.5rem 0;
	padding: 1.25rem 1.5rem 0;
	border-top: 1px dashed var(--sgd-filet-fort);
}

.sgd-recap-total::before,
.sgd-recap-total::after {
	content: "";
	position: absolute;
	top: -9px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sgd-fond);
	border: 1px solid var(--sgd-filet);
}

.sgd-recap-total::before {
	left: -9px;
}

.sgd-recap-total::after {
	right: -9px;
}

.sgd-recap-total dt {
	margin-top: 0;
}

.sgd-recap-total dd {
	font-family: var(--sgd-serif);
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 500;
	margin-top: 4px;
}

/* Une MENTION n'est pas un montant : elle ne prend pas le corps du montant. */
.sgd-recap-total dd.est-mention {
	font-family: var(--sgd-sans);
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 400;
}

/*
 * MAJEUR A11y M-1 / réserve R-1 — UNE région polie par écran pour le prix,
 * présente et VIDE au chargement (une région live n'annonce que ce qui change
 * APRÈS son enregistrement), et posée HORS du `<dl>` : un `<dl>` n'accepte en
 * enfants directs que `dt`, `dd`, `div`, `script` et `template`, et une région
 * posée dedans vaut une violation axe `definition-list` (WCAG 1.3.1). La seule
 * exception nommée au § 12bis.4 est `#sgd-turnstile-etat`.
 */
.sgd-recap-annonce {
	margin: 0.625rem 0 0;
	font-size: 0.875rem;
	color: var(--sgd-encre);
}

.sgd-recap-annonce:empty {
	margin: 0;
}

.sgd-recap-modifier,
.sgd-lien-modifier {
	background: none;
	border: 0;
	padding: 6px 0;
	margin: 0;
	color: var(--sgd-or);
	font-family: var(--sgd-sans);
	font-size: 0.875rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.sgd-lien-modifier {
	margin-left: 0.5rem;
}

/* Aperçu du trajet — hauteur RÉSERVÉE dès le premier rendu, même vide.
   Piège n° 1 du cadrage UX (décalage de mise en page mesuré à 1,05). */
.sgd-recap-apercu {
	margin: 1rem 0 0;
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 1rem;
}

.sgd-recap-carte {
	margin: 0;
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	background: var(--sgd-fond);
	min-height: 140px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sgd-recap-carte img {
	width: 100%;
	max-width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.sgd-carte-vide {
	color: var(--sgd-aide);
	font-size: 0.875rem;
	padding: 1rem;
	margin: 0;
	text-align: center;
}

.sgd-distance {
	font-family: var(--sgd-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--sgd-encre);
	margin: 0.625rem 0 0;
}

/* Billet mobile repliable — masqué en desktop, où le billet collant existe. */
.sgd-recap-mobile {
	display: none;
}

/* ------------------------------------------------------------------
 * Colonne d'appui de l'étape 4 et des écrans d'issue.
 * Ce n'est PAS un troisième récapitulatif (revue UX D2) : c'est ce qui
 * est acquis, et la sortie téléphone.
 * ------------------------------------------------------------------ */

.sgd-appui {
	position: sticky;
	top: 120px;
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 1.5rem;
}

.sgd-appui > h2,
.sgd-appui > h3 {
	font-family: var(--sgd-serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sgd-filet);
	line-height: 1.25;
}

.sgd-appui ul {
	list-style: none;
	list-style-type: "";
	margin: 0;
	padding: 0;
}

.sgd-appui li {
	position: relative;
	padding: 0 0 0.75rem 20px;
	font-size: 0.938rem;
	line-height: 1.5;
}

.sgd-appui li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 1px;
	background: var(--sgd-or);
}

.sgd-appui .sgd-telephone {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--sgd-filet);
}

/* ------------------------------------------------------------------
 * Récapitulatif final (étape 4)
 * ------------------------------------------------------------------ */

.sgd-recap-final {
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 1.75rem 1.75rem 0.5rem;
	margin: 0 0 2.5rem;
}

.sgd-recap-final h2,
.sgd-recap-final h3 {
	font-family: var(--sgd-serif);
	font-size: 1.375rem;
	font-weight: 500;
	margin: 0 0 1.25rem;
	line-height: 1.25;
}

.sgd-recap-final dl {
	margin: 0;
}

/*
 * D7 — les lignes s'alignent enfin. `flex-wrap` seul laissait la valeur passer
 * à la ligne EN EMPORTANT le lien « Modifier » : intitulé et valeur ont
 * maintenant chacun leur base, et le lien se pousse à droite de la valeur.
 */
.sgd-recap-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--sgd-filet);
}

.sgd-recap-ligne dt {
	flex: 0 0 148px;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sgd-aide);
	font-weight: 600;
}

.sgd-recap-ligne dd {
	margin: 0;
	flex: 1 1 200px;
	font-size: 1.063rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 1rem;
}

.sgd-recap-ligne.sgd-total {
	border-bottom: 0;
	padding-top: 1.25rem;
	margin-top: 6px;
	border-top: 1px dashed var(--sgd-filet-fort);
}

/*
 * ⚠️ `display: block`, et PAS le flex des autres lignes. Mesuré sur la capture
 * du banc : le `justify-content: space-between` hérité poussait le « € » — qui
 * est un élément flex à part entière, puisqu'il porte sa propre voix — à l'autre
 * bout de la ligne, à 400 px du montant. Cette ligne-ci n'a pas de lien
 * « Modifier » à repousser à droite : elle n'a rien à espacer.
 */
.sgd-recap-ligne.sgd-total dd {
	display: block;
	font-family: var(--sgd-serif);
	font-size: 2.5rem;
	line-height: 1.05;
	font-weight: 500;
}

/*
 * La mention d'un montant — « TTC · TVA 10 % incluse » — n'est pas le montant :
 * elle passe sous lui, dans la voix mono, et elle est `aria-hidden` parce que le
 * `screen-reader-text` voisin porte déjà l'énoncé complet (§ 12bis.5).
 */
.sgd-total-mention {
	display: block;
	width: 100%;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sgd-aide);
	font-weight: 600;
	line-height: 1.6;
}

/*
 * Retour seul de l'étape 4 : PAS de `.sgd-actions`, dont l'inversion `row-reverse`
 * n'a de sens qu'avec une action primaire à ses côtés (correctif H-4). Ici les
 * actions primaires sont les trois boutons de règlement, rendus plus haut.
 */
.sgd-retour {
	margin: 2rem 0 0;
}

/* ------------------------------------------------------------------
 * Règlement — le recommandé pèse plus que les deux autres (défaut D6).
 * ------------------------------------------------------------------ */

.sgd-paiements {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.sgd-paiement {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	background: var(--sgd-ivoire);
}

.sgd-paiement--recommande {
	border-color: var(--sgd-or);
	background: var(--sgd-blanc);
}

.sgd-paiement .sgd-aide {
	margin: 0;
}

/* ------------------------------------------------------------------
 * Défi anti-robot (Turnstile) — REMÈDE M-2 de la re-mesure A11y du 07/09.
 *
 * MESURE DE DÉPART, à 320 px de large : le panneau Cloudflare fait 300 px
 * FIXES, le retrait du conteneur du thème vaut 30 px de chaque côté, la
 * colonne n'offre donc que 260 px — bord droit du panneau à 330 px, lien
 * « Aide » rogné, défilement horizontal RÉEL (`scrollX` atteint 15).
 * WCAG 1.4.10 (AA) · RGAA 10.11.
 *
 * ARITHMÉTIQUE DU REMÈDE, sous 380 px, CONSERVÉE À L'IDENTIQUE :
 *   reste  = 30 - reprise           (retrait latéral résiduel)
 *   il faut  300 + 2 x reste <= 320  =>  reprise >= 20 px
 *   et       reprise <= 30 px        (jamais plus que ce que le thème pose)
 * On prend 20 : il reste 10 px de chaque côté, et 10 + 300 + 10 = 320.
 *
 * DEUX FILETS, parce que la reprise SUPPOSE le retrait du thème :
 *   - `max-width: min(320px, 100vw - 20px)` — une intégration sans retrait
 *     verrait la zone s'élargir de 40 px et sortir par la droite. La seconde
 *     borne est RELATIVE à la fenêtre et vaut 2 × le retrait résiduel
 *     (résiduel r-2 de la porte A11y du 07/09) ;
 *   - `overflow-x: auto` — si le panneau devenait plus large que sa zone, c'est
 *     la ZONE qui défile, pas la PAGE.
 *
 * ⚠️ L'HABILLAGE NE TOUCHE PAS À CETTE ARITHMÉTIQUE. `.sgd-defi` est un
 * conteneur EXTÉRIEUR : il porte le cadre, l'intitulé visible et son propre
 * rembourrage, et ce rembourrage est ANNULÉ sous 380 px pour que la reprise de
 * gouttière garde exactement les 20 px qu'elle a calculés.
 * ------------------------------------------------------------------ */

.sgd-defi {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	background: var(--sgd-ivoire);
}

.sgd-defi .sgd-oeil {
	margin-bottom: 0.75rem;
}

.sgd-turnstile {
	margin: 0;
	overflow-x: auto;
}

/* Vide, la région d'état ne creuse pas un trou dans la mise en page — et elle
   n'est SURTOUT PAS masquée par `display: none` : une région live cachée au
   moment où on y écrit n'annonce rien du tout. */
.sgd-turnstile-etat {
	margin: 0.75rem 0 0;
	color: var(--sgd-encre);
	font-size: 0.875rem;
}

.sgd-turnstile-etat:empty {
	margin: 0;
}

@media (max-width: 380px) {
	.sgd-defi {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
		border-right: 0;
	}

	.sgd-turnstile {
		margin-left: -20px;
		margin-right: -20px;
		max-width: min(320px, 100vw - 20px);
	}
}

/* ------------------------------------------------------------------
 * Erreurs et messages
 * ------------------------------------------------------------------ */

.sgd-erreurs {
	border: 2px solid var(--sgd-encre);
	border-radius: var(--sgd-r);
	background: var(--sgd-ivoire);
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
}

.sgd-erreurs p:first-child {
	margin-top: 0;
}

.sgd-erreurs ul {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.sgd-erreurs li {
	margin: 0 0 6px;
}

/* Un lien de résumé d'erreurs n'est PAS « dans une phrase » : il est autonome,
   donc il tient le plancher de 44 px comme les autres cibles. */
.sgd-erreurs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ⚠️ m-5 (A11y passe 2, 08/09) — MÊME CAUSE, MÊME REMÈDE QU'A-3 CI-DESSOUS. Ces
   liens portaient la couleur EXACTE de leur parent (contraste lien/texte 1,00),
   `text-decoration: none` servi par Avada, et un `text-underline-offset` sans
   objet : rien ne les distinguait, ni couleur, ni forme (WCAG 1.4.1, RGAA 10.6).
   Le soulignement est DÉCLARÉ, il n'est plus espéré. */
.sgd-erreurs a {
	color: var(--sgd-encre);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Un lien de sortie EST dans une phrase (exception 2.5.8 « inline »), mais le
   rembourrage vertical lui rend quand même une zone cliquable de 44 px sans
   casser le fil du texte.

   ⚠️ REMÈDE m-4 (passe 1 A11y du 08/09) — LA COULEUR EST DÉCLARÉE, et c'est le
   point. Cette règle ne posait que `display` et `padding` : sur le banc, ces
   liens héritaient du bleu par défaut du navigateur (7,99 sur crème, conforme
   PAR ACCIDENT) ; sur la maquette, la couleur serait venue du thème Avada et le
   module n'en aurait rien contrôlé. Ce sont les liens de SECOURS — la sortie
   téléphone, la reprise du paiement, la nouvelle réservation : ils ne se
   délèguent pas. L'encre vaut 16,69 : 1 sur l'ivoire de ces blocs comme sur le
   fond du billet, le même motif que `.sgd-erreurs a`.

   ⚠️ A-3, MAJEUR DE LA PASSE 2 (08/09) — ET C'EST LA CORRECTION D'UNE CROYANCE,
   PAS D'UN OUBLI. Ce commentaire affirmait : « ⛔ Le soulignement du navigateur
   RESTE (aucun `text-decoration: none`) ». C'était vrai AU BANC, où rien ne
   déclarait la propriété. Sur la maquette, Avada pose `a { text-decoration:
   none }` — et une règle qui ne DÉCLARE pas une propriété ne peut pas la
   « conserver ». Mesuré sur `/ma-reservation/` : lien `#1a1714` sur texte
   `#1a1714` (contraste 1,00), `text-decoration-line: none`, graisse identique au
   parent, aucune bordure : le numéro de secours était indiscernable du texte,
   sur l'écran même où quelqu'un en difficulté doit le trouver.

   ⛔ LE SOULIGNEMENT EST DÉCLARÉ, PAS ESPÉRÉ — et pas remplacé par une couleur :
   l'or sur ce fond donne 3,22, juste au-dessus du seuil de 3:1, alors qu'un
   soulignement ne dépend d'aucun calcul et traverse le mode couleurs forcées.
   `.sgd-telephone a`, dans cette même feuille, déclare `text-decoration:
   underline` depuis le début et a été mesuré conforme sur la maquette : la
   différence entre les deux blocs tenait à une ligne.

   ⚠️ M-1, MAJEUR DE LA PASSE 2 SOUS AVADA (04/10, D-187) — LE MÊME OUBLI, UNE
   QUATRIÈME FOIS. `.sgd-avis-degrade` (étape 2 sans règlement en ligne, étape 4
   « Réserver par téléphone », calcul indisponible) porte le numéro en lien
   `tel:` dans sa phrase, et ne figurait pas dans cette liste : mesuré sur la
   maquette, encre #0f0c0a dans un texte #1a1714 (1,09:1), aucun soulignement,
   alors que c'est le SEUL moyen de réserver dans cet état (WCAG 1.4.1, RGAA
   10.6). Il rejoint la règle, sans `!important` : (0,1,1) bat le `a {}` du thème
   (0,0,1), et la passe 2 sous Avada (22 écrans) n'a relevé `link-in-text-block`
   sur aucun des quatre sélecteurs de même poids déjà présents. Re-mesure
   ciblée de l'étape 2 à la pose. */
.sgd-sortie a,
.sgd-message p a,
.sgd-succes p a,
.sgd-paiement-refuse a,
.sgd-avis-degrade a {
	display: inline-block;
	padding: 0.75rem 0;
	color: var(--sgd-encre);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Message d'erreur AU NIVEAU du champ : encre sur le fond du module, jamais un
   rouge décoratif — l'erreur n'est pas signalée par la couleur seule, elle est
   écrite, et le champ porte `aria-invalid`.

   ⚠️ m-8 (A11y passe 2) — VALEUR RECALCULÉE. « 16,95 : 1 » était faux ici comme
   « 16,9 : 1 » l'était pour les liens de secours. Encre `#1a1714` : 15,18 sur la
   crème `#f1ece4` du module, 17,85 sur le blanc `#ffffff` d'un champ, 16,69 sur
   l'ivoire `#faf7f1` des blocs de message. Les trois sont très au-dessus de 4,5 ;
   ce qui est corrigé, c'est le chiffre écrit, pas la conformité. */
.sgd-erreur-champ {
	display: block;
	font-weight: 700;
	color: var(--sgd-encre);
	border-left: 4px solid var(--sgd-encre);
	padding: 2px 0 2px 10px;
	margin: 2px 0 0;
	font-size: 0.938rem;
}

.sgd-champ input[aria-invalid="true"],
.sgd-champ select[aria-invalid="true"],
.sgd-champ textarea[aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--sgd-encre);
}

.sgd-message,
.sgd-avis-degrade,
.sgd-sortie {
	border-left: 4px solid var(--sgd-or);
	border-radius: 0 var(--sgd-r) var(--sgd-r) 0;
	padding: 1rem 1.25rem;
	background: var(--sgd-ivoire);
	margin: 0 0 2rem;
}

.sgd-message p,
.sgd-avis-degrade p,
.sgd-sortie p {
	margin: 0;
}

/*
 * D-194 (remarque R-1 du 21/10/2026) : bandeau du gestionnaire connecté, sur
 * `/mon-espace/` et `/ma-reservation/` (les deux pages chargent cette feuille).
 * Discret : la matière des messages (ivoire, filet or), un corps plus petit,
 * l'encre du module (16,69 sur ivoire). Le lien est souligné et tient le
 * plancher de 44 px, comme les liens des messages.
 */
.sgd-bandeau-gestionnaire {
	border-left: 4px solid var(--sgd-or);
	border-radius: 0 var(--sgd-r) var(--sgd-r) 0;
	padding: 0.75rem 1.25rem 0.25rem;
	background: var(--sgd-ivoire);
	margin: 0 0 1.5rem;
	color: var(--sgd-encre);
	font-size: 0.875rem;
	max-width: 80ch;
}

.sgd-bandeau-gestionnaire p {
	margin: 0;
}

.sgd-bandeau-gestionnaire a {
	display: inline-block;
	padding: 0.75rem 0;
	color: var(--sgd-encre);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Mentions — deux couches : ce qui rassure reste visible, le
 * réglementaire se replie (revue UX D3, forme recommandée par la CNIL).
 * ------------------------------------------------------------------ */

.sgd-cgv {
	margin: 2rem 0 0;
}

/*
 * ⛔ `flex-wrap: nowrap` — mesuré sur la capture mobile du banc : avec le
 * `wrap` hérité de la règle des 44 px, le texte de la case ne tenait pas sur la
 * ligne et passait dessous, laissant la case seule au-dessus de sa phrase. La
 * case et son libellé restent côte à côte, et c'est le TEXTE qui se replie.
 */
.sgd-cgv label,
.sgd-client-confirmation label {
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 10px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.sgd-cgv input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 4px;
	accent-color: #1a1714;
	flex: none;
}

/*
 * O-3 (QA du servi 0.15.0, 18/10/2026, D-191) : dans l'étiquette `inline-flex`, la
 * phrase de la case d'opposition est un élément flexible ANONYME et la mention
 * `(facultatif)` un second élément : à 320 px, la mention prenait sa propre colonne à
 * droite et serrait la phrase sur 5 lignes (136 px de large, mesuré au banc).
 * `display: contents` remet la mention au fil de la phrase, qui se replie d'un seul
 * tenant à côté de la case ; couleur et taille de `.sgd-facultatif` s'héritent
 * toujours. Le balisage reste celui qu'épingle la suite 178, aucun PHP touché. Un
 * `<span>` sans rôle : le nom accessible de la case ne change pas.
 */
.sgd-opposition-avis .sgd-facultatif {
	display: contents;
}

.sgd-cgv a {
	color: var(--sgd-or);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.sgd-mention-rgpd {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--sgd-aide);
	max-width: 64ch;
}

.sgd-details-rgpd {
	border-top: 1px solid var(--sgd-or);
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 64ch;
}

.sgd-details-rgpd > summary {
	padding: 0.875rem 0;
	font-family: var(--sgd-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sgd-or);
	font-weight: 600;
}

.sgd-details-rgpd .sgd-mention-rgpd {
	margin: 0;
	padding: 0 0 0.5rem;
	border-top: 0;
}

.sgd-mention-rgpd p {
	margin: 0 0 0.75rem;
}

.sgd-mention-rgpd a {
	color: var(--sgd-or);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Mentions de TIERS (Google Maps sous les champs d'adresse, Stripe au-dessus du
 * Payment Element). Elles doivent se LIRE — c'est leur seule raison d'être — sans
 * pour autant peser autant que le champ qu'elles accompagnent : gris d'aide
 * `#6b6258` (5,08, jamais éclairci), filet or à gauche pour les rattacher à ce
 * qui précède, et le corps des textes d'aide.
 */
.sgd-mention-tiers {
	display: block;
	margin: 0.5rem 0 0;
	padding: 0.625rem 0 0.625rem 0.875rem;
	border-left: 2px solid var(--sgd-or);
	color: var(--sgd-aide);
	font-size: 0.813rem;
	line-height: 1.6;
}

#sgd-mention-stripe {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-left-width: 4px;
	border-radius: 0 var(--sgd-r) var(--sgd-r) 0;
	background: var(--sgd-ivoire);
	font-size: 0.875rem;
}

#sgd-mention-stripe p {
	margin: 0.625rem 0 0;
}

#sgd-mention-stripe a {
	color: var(--sgd-or);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ------------------------------------------------------------------
 * Écran de saisie de carte (Stripe Payment Element)
 *
 * ⚠️ Le conteneur du Payment Element s'appelle `.sgd-carte-stripe`, et le
 * renommage n'est PAS cosmétique : il portait `.sgd-carte`, exactement la
 * classe de l'aperçu de trajet. Deux objets de sémantiques différentes sous un
 * même sélecteur, c'est un piège posé pour la prochaine règle qu'on écrira sur
 * l'un des deux.
 * ------------------------------------------------------------------ */

.sgd-paiement-carte {
	max-width: 60ch;
}

.sgd-paiement-carte .sgd-total {
	font-family: var(--sgd-serif);
	font-size: 2.125rem;
	font-weight: 500;
	line-height: 1.1;
	margin: 0.25rem 0 2rem;
}

.sgd-carte-stripe {
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	background: var(--sgd-blanc);
	padding: 1.25rem;
	min-height: 220px;
}

.sgd-carte-stripe[aria-busy="true"] {
	background: var(--sgd-ivoire);
}

.sgd-carte-resultat {
	margin: 1rem 0 0;
}

.sgd-carte-resultat:empty {
	margin: 0;
}

.sgd-reference {
	font-family: var(--sgd-mono);
	font-weight: 600;
	font-size: 0.813rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sgd-or);
	margin: 0 0 0.5rem;
}

.sgd-reference strong {
	display: block;
	font-family: var(--sgd-serif);
	font-size: 2.125rem;
	letter-spacing: 0.02em;
	color: var(--sgd-encre);
	text-transform: none;
	font-weight: 500;
	margin-top: 4px;
}

/* ------------------------------------------------------------------
 * Écran d'issue
 * ------------------------------------------------------------------ */

.sgd-succes {
	max-width: 62ch;
}

.sgd-succes .sgd-montant {
	font-family: var(--sgd-serif);
	font-size: 1.75rem;
	font-weight: 500;
	margin: 0 0 0.5rem;
	line-height: 1.15;
}

.sgd-suite {
	list-style: none;
	list-style-type: "";
	counter-reset: sgd-suite;
	margin: 1rem 0 0;
	padding: 0;
}

.sgd-suite li {
	counter-increment: sgd-suite;
	position: relative;
	padding: 0 0 1.125rem 44px;
	font-size: 1rem;
	line-height: 1.5;
}

.sgd-suite li::before {
	content: "0" counter(sgd-suite);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.14em;
	color: var(--sgd-or);
}

.sgd-suite li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 24px;
	bottom: 2px;
	width: 1px;
	background: var(--sgd-filet);
}

.sgd-paiement-refuse {
	border-left-color: var(--sgd-encre);
	border-left-width: 4px;
	background: var(--sgd-ivoire);
}

.sgd-paiement-refuse p {
	margin: 0 0 0.75rem;
}

.sgd-paiement-refuse p:last-child {
	margin-bottom: 0;
}

.sgd-agenda {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sgd-filet);
}

/* ⚠️ A-3, TROISIÈME FAMILLE — ET C'EST LE CAS NEUF QUI L'A TROUVÉE, pas la
   passe 2. Le lien de téléchargement de l'agenda vit sur l'écran de succès, donc
   au bout de la course : personne ne l'a mesuré sur la maquette. Il portait le
   même défaut que `.sgd-sortie a` — un `text-underline-offset` sans
   `text-decoration` — avec l'or et la graisse pour seule distinction. L'or sur
   l'ivoire de ce bloc donne 3,22 : conforme, mais juste, et la graisse ne se voit
   pas sur un lien isolé. Le soulignement est déclaré ici aussi. */
.sgd-agenda a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sgd-or);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------------
 * Page de suivi client (/ma-reservation)
 * ------------------------------------------------------------------ */

.sgd-client-recap {
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 1.5rem 1.5rem 0.5rem;
	margin: 0 0 2rem;
}

.sgd-client-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--sgd-filet);
}

.sgd-client-ligne:last-child {
	border-bottom: 0;
}

.sgd-client-ligne dt {
	flex: 0 0 148px;
	font-family: var(--sgd-mono);
	font-size: 0.688rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sgd-aide);
	font-weight: 600;
}

.sgd-client-ligne dd {
	margin: 0;
	flex: 1 1 200px;
	font-size: 1.063rem;
}

.sgd-annulation {
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	background: var(--sgd-ivoire);
	padding: 1.5rem;
	margin: 2.5rem 0 0;
}

.sgd-client-confirmation label {
	align-items: flex-start;
	gap: 10px;
	font-size: 0.938rem;
	font-weight: 600;
	cursor: pointer;
	margin: 1rem 0;
}

.sgd-client-confirmation input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 3px;
	accent-color: #1a1714;
	flex: none;
}

/* ------------------------------------------------------------------
 * Mobile 375 (et reflow 320)
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.sgd-titre-etape {
		font-size: 1.688rem;
	}

	.sgd-chapeau {
		margin-bottom: 1.75rem;
		font-size: 1rem;
	}

	.sgd-gammes-grille {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.sgd-duo {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* c-R1 — sous 900 px le rail prend TOUTE la largeur du module (l'entête passe
	   en colonne juste dessous) : les quatre jalons y tiennent encore sur une
	   ligne. Le repli 2 + 2 ne commence qu'au palier de 700 px. */
	.sgd-fil-item {
		flex: 1 1 0;
		min-width: 0;
		font-size: 0.813rem;
		padding-right: 10px;
	}

	.sgd-tunnel-entete {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	/* Le billet collant n'a plus de place : le repli prend le relais, et son
	   résumé porte DÉJÀ le prix — le client ne le perd donc jamais de vue
	   (défaut D10). */
	.sgd-recap,
	.sgd-recap-apercu {
		/* Le billet ET son aperçu : sous 900 px, le repli mobile porte déjà tout
		   ce qui compte, et une vignette de trajet en pied d'étape 3 n'est plus
		   qu'un objet égaré à 2 800 px du champ qu'elle illustre. */
		display: none;
	}

	.sgd-recap-mobile {
		display: block;
		background: var(--sgd-ivoire);
		/* M-3 : cette bordure délimite un CONTRÔLE (le repli). Elle est donc en
		   or #856231 (4,71), jamais le filet décoratif mesuré à 1,23. */
		border: 1px solid var(--sgd-or);
		border-radius: var(--sgd-r);
		margin: 0 0 1.75rem;
	}

	.sgd-recap-mobile > summary {
		list-style-position: inside;
		min-height: 56px;
		padding: 0.75rem 1rem;
	}

	.sgd-recap-mobile > summary > .sgd-rangee {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		width: calc(100% - 24px);
		vertical-align: middle;
	}

	.sgd-recap-mobile .sgd-resume-libelle {
		font-family: var(--sgd-mono);
	font-weight: 600;
		font-size: 0.688rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--sgd-aide);
		display: block;
	}

	.sgd-recap-mobile .sgd-resume-prix {
		font-family: var(--sgd-serif);
		font-size: 1.5rem;
		font-weight: 500;
	}

	/* Une MENTION n'est pas un montant : « affiché à l'étape suivante » ne prend
	   ni la voix des titres ni le corps d'un prix.

	   ⚠️ A-5 — MODIFICATEUR, PLUS SECONDE CLASSE. Le repli portait
	   `sgd-resume-prix` ou `sgd-resume-valeur` selon la nature de la valeur : deux
	   noms pour un même rôle, donc une décision de nommage que la doublure
	   d'affichage aurait dû reprendre à son compte — un second endroit qui
	   tranche. C'est désormais le modificateur `est-mention`, celui que le billet
	   de bureau emploie déjà (`.sgd-recap-total dd.est-mention`), et le script se
	   contente de l'ajouter ou de le retirer. La voix du corps est REDÉCLARÉE ici :
	   la règle de base pose la voix des titres, un modificateur qui l'oublierait
	   laisserait une mention en serif. */
	.sgd-recap-mobile .sgd-resume-prix.est-mention {
		font-family: var(--sgd-sans);
		font-size: 1rem;
		font-weight: 600;
	}

	.sgd-recap-mobile .sgd-repli-contenu {
		padding: 0 1rem 1rem;
		border-top: 1px solid var(--sgd-filet);
	}

	.sgd-recap-mobile dl {
		margin: 0;
	}

	.sgd-recap-mobile dt {
		font-family: var(--sgd-mono);
	font-weight: 600;
		font-size: 0.688rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--sgd-aide);
		margin-top: 1rem;
	}

	.sgd-recap-mobile dd {
		margin: 2px 0 0;
		font-size: 1rem;
	}

	.sgd-appui {
		position: static;
	}

	.sgd-recap-final {
		padding: 1.25rem 1.25rem 0.25rem;
	}

	.sgd-recap-ligne,
	.sgd-client-ligne {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.sgd-recap-ligne dt,
	.sgd-client-ligne dt {
		flex: none;
	}

	.sgd-recap-ligne dd,
	.sgd-client-ligne dd {
		flex: none;
		width: 100%;
	}

	.sgd-recap-ligne.sgd-total dd {
		font-size: 2rem;
	}

	.sgd-paiement .sgd-bouton,
	.sgd-actions .sgd-bouton {
		width: 100%;
	}

	.sgd-actions {
		margin-top: 2rem;
	}

	.sgd-prestation {
		width: 100%;
	}

	.sgd-gamme-montant {
		font-size: 1.688rem;
	}

	.sgd-reference strong {
		font-size: 1.688rem;
	}
}

/*
 * ⚠️ LE JUMEAU DU BLOC À 900 px — MOYENNE M-2 DU VISA. Ce qui replie les
 * colonnes doit replier le billet, que le rétrécissement vienne de la FENÊTRE ou
 * du CONTENEUR que le thème accorde au module (colonne 2/3 d'Avada). Sa place —
 * après `.sgd-recap-mobile { display: none }` — est une DÉCISION : à spécificité
 * égale, c'est l'ordre du fichier qui tranche.
 */
@container sgd (max-width: 860px) {
	.sgd-recap,
	.sgd-recap-apercu {
		display: none;
	}

	.sgd-recap-mobile {
		display: block;
		background: var(--sgd-ivoire);
		border: 1px solid var(--sgd-or);
		border-radius: var(--sgd-r);
		margin: 0 0 1.75rem;
	}

	.sgd-recap-mobile > summary {
		list-style-position: inside;
		min-height: 56px;
		padding: 0.75rem 1rem;
	}

	.sgd-recap-mobile > summary > .sgd-rangee {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		width: calc(100% - 24px);
		vertical-align: middle;
	}

	.sgd-recap-mobile .sgd-repli-contenu {
		padding: 0 1rem 1rem;
		border-top: 1px solid var(--sgd-filet);
	}

	.sgd-appui {
		position: static;
	}
}

/* c-R1 — le repli 2 + 2, à la largeur où quatre colonnes deviennent trop
   étroites pour « Confirmation ». Mesuré à 375 px avant ce lot : le rail s'y
   rangeait déjà en 2 + 2, et c'est ce comportement-là qui est conservé. */
@media (max-width: 700px) {
	.sgd-fil-item {
		flex: 1 1 46%;
	}
}

@media (max-width: 340px) {
	.sgd-fil-item {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------------------
 * Couleurs forcées — MOYENNE M-5 DU VISA CORRECTEUR.
 *
 * L'état « choisie » d'une carte de gamme et d'une pastille de prestation
 * repose sur `border-color`, `box-shadow` et, pour la puce, un `background` de
 * pseudo-élément. Ce sont EXACTEMENT les trois propriétés que le mode couleurs
 * forcées neutralise — et le bouton radio qui porte l'information est masqué
 * par découpe. Sans cette reprise, les quatre cartes redeviennent identiques
 * pour qui a le plus besoin de les distinguer.
 *
 * `outline` et `border-style` traversent le mode, `SelectedItem` et
 * `Highlight` sont des couleurs système qu'il fournit. La doublure
 * `.est-choisie` et le pilote `:has()` restent DÉGROUPÉS ici aussi (D-90) :
 * une liste de sélecteurs contenant un sélecteur inconnu est invalidée en
 * entier, et ce serait doublement bête de la casser dans la règle qui existe
 * précisément pour tenir quand le reste ne tient plus.
 * ------------------------------------------------------------------ */

@media (forced-colors: active) {
	.sgd-gamme.est-choisie {
		outline: 3px solid SelectedItem;
		outline-offset: -3px;
	}

	.sgd-gamme:has(input:checked) {
		outline: 3px solid SelectedItem;
		outline-offset: -3px;
	}

	.sgd-prestation.est-choisie {
		outline: 3px solid SelectedItem;
		outline-offset: -3px;
	}

	.sgd-prestation:has(input:checked) {
		outline: 3px solid SelectedItem;
		outline-offset: -3px;
	}

	/* La puce : son point plein disparaît avec les fonds. Le contour de la puce
	   passe en couleur système, et le point devient un carré de bordure — une
	   FORME, pas une teinte. */
	.sgd-gamme.est-choisie .sgd-gamme-puce {
		border-color: SelectedItem;
		border-width: 6px;
	}

	.sgd-gamme:has(input:checked) .sgd-gamme-puce {
		border-color: SelectedItem;
		border-width: 6px;
	}

	/* Le fil d'étapes : sa couleur ne dit plus rien, sa GRAISSE et son filet si. */
	.sgd-fil-item.est-courante {
		border-top-style: double;
		border-top-width: 4px;
	}
}

/* ------------------------------------------------------------------
 * Mouvement réduit : la préférence système est respectée.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.sgd-tunnel *,
	.sgd-tunnel *::before,
	.sgd-tunnel *::after,
	.sgd-client *,
	.sgd-client *::before,
	.sgd-client *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}