/**
 * Espace client — feuille de style du train T5.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * Elle COMPLÈTE `sgd-tunnel.css`, elle ne la remplace pas et elle ne la modifie
 * pas : les jetons de couleur, les boutons, les champs, le masquage accessible
 * et le plancher de 44 px viennent de là. Deux jeux de jetons, ce sont deux
 * palettes qui divergent au premier correctif.
 * Source de dessin : `planche-maquettes-hifi-espace-client-2026-09-09.html`,
 * corrigée après revue UX (GO 12h55) et revue A11y (GO, re-mesure 15h48).
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ⛔ AUCUN HEXADÉCIMAL NEUF. Tout descend des jetons du § 12bis.6, qui sont
 * OPPOSABLES : or texte #856231, encre #1a1714, ivoire #faf7f1, gris d'aide
 * #6b6258, filets #e0d5c3 / #cdbfa6, or de FOND #b8925a.
 *
 * ⚠️ CE QUI CHANGE PAR RAPPORT À LA MAQUETTE, ET POURQUOI. La planche simulait
 * les largeurs par des classes de cadre (`.c390`, `.c375`, `.c1280`) — c'était
 * la seule façon de montrer trois largeurs côte à côte sur une même page. Ici
 * ce sont de vraies requêtes de média : c'est précisément ce que le point (a)
 * du § 13 du cadrage demande de rejouer au banc, à 320 px et à 200 % de zoom.
 */

/* ------------------------------------------------------------------
 * 0. L'anneau de focus devient un TOKEN (delta D24).
 *
 * L'encre écrite en dur est INVISIBLE sur l'encre : sur la carte sombre de
 * l'encart « Votre prochaine course », le contraste tombait à 1,00 — un anneau
 * qui n'existe pas. Le token se redéfinit par MATIÈRE, et les deux valeurs sont
 * déjà opposables (encre sur ivoire, ivoire sur encre).
 * ------------------------------------------------------------------ */

.sgd-client {
	--sgd-focus: var(--sgd-encre);

	/* Deux COPIES des jetons de base, prises une seule fois à la racine du
	   module. Elles servent au modificateur « clair » imbriqué DANS le
	   modificateur « sombre » (le bloc chauffeur dans l'encart) : sans elles, il
	   n'aurait aucun moyen de revenir aux valeurs d'origine sans réécrire un
	   hexadécimal — c'est-à-dire sans créer une seconde source de vérité pour une
	   couleur opposable. */
	--sgd-ec-or-base: var(--sgd-or);
	--sgd-ec-aide-base: var(--sgd-aide);
}

/* ⚠️ CETTE RÈGLE L'EMPORTE SUR CELLE DU TUNNEL PAR L'ORDRE DE CASCADE SEUL
   (B-8 du visa du 09/09) : les deux feuilles déclarent un sélecteur de même
   spécificité, et c'est `plan_assets()` — qui met `sgd-espace` en file avec
   `deps: array( 'sgd-tunnel' )` — qui rend l'ordre déterministe. Une mise en
   file hors de ce plan (concaténation d'un plugin d'optimisation, enqueue
   manuel dans le thème) rendrait SILENCIEUSEMENT l'anneau encre sur la carte
   sombre : contraste 1,00, c'est-à-dire invisible — exactement le défaut que
   D24 referme. Si l'anneau disparaît un jour sur l'encart, c'est ici qu'il faut
   regarder, et la réponse sera l'ordre des feuilles, jamais cette règle. */
.sgd-client :focus-visible {
	outline: 2px solid var(--sgd-focus);
	outline-offset: 2px;
}

/* Les deux modificateurs de MATIÈRE. Sur fond encre, l'or texte ne vaut que
   3,22 et le gris d'aide 2,99 : les deux tombent sous 4,5. On remappe donc vers
   des valeurs DÉJÀ opposables — #b8925a (6,20), #cdbfa6 (9,86), ivoire (16,69) —
   au lieu d'inventer une teinte. */
.sgd-client .sgd-ec-sombre {
	--sgd-or: var(--sgd-or-fond);
	--sgd-aide: var(--sgd-filet-fort);
	--sgd-focus: var(--sgd-ivoire);

	background: var(--sgd-encre);
	color: var(--sgd-ivoire);
}

.sgd-client .sgd-ec-clair {
	--sgd-or: var(--sgd-ec-or-base);
	--sgd-aide: var(--sgd-ec-aide-base);
	--sgd-focus: var(--sgd-encre);

	background: var(--sgd-ivoire);
	color: var(--sgd-encre);
}

/* L'entrée de menu vit HORS de `.sgd-client` (section globale Avada) : elle
   porte donc son propre token. Le contraste réel de l'anneau dépend du fond de
   l'en-tête, inconnu de la maquette — point (g) du § 13, à mesurer au banc. */
.sgd-ec-menu-lien,
.sgd-ec-menu-item {
	--sgd-focus: #1a1714;
}

.sgd-ec-menu-lien:focus-visible,
.sgd-ec-menu-item:focus-visible {
	outline: 2px solid var(--sgd-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 1. Ordre du DOM = ordre visuel (delta D-g, réserve R-7).
 *
 * Le module hérite du tunnel un `flex-direction: row-reverse`, conçu pour le
 * couple « action principale, Retour », où l'inversion est sans conséquence.
 * Appliqué au couple « Voir le détail, Demander l'annulation », il place au
 * mobile l'action lourde de conséquences EN PREMIER sur l'écran d'arrivée ; et
 * dans le dialogue de suppression, il placerait « Supprimer définitivement »
 * avant « Annuler ». Ce modificateur neutralise l'inversion SANS toucher le
 * tunnel en production — la dette du module entier reste nommée (S-4).
 * ------------------------------------------------------------------ */

.sgd-client .sgd-ec-actions {
	flex-direction: row;
	justify-content: flex-start;
}

/* ------------------------------------------------------------------
 * 2. Le lien d'évitement de la rubrique (delta D27 / D-h).
 *
 * Premier arrêt clavier du module, invisible tant qu'il n'a pas le focus. Il
 * vise le `h1`, qui garde son `tabindex="-1"` pour cela ; le rail RESTE avant
 * le `h1` dans le DOM.
 * ------------------------------------------------------------------ */

.sgd-ec-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--sgd-ivoire);
	color: var(--sgd-encre);
	padding: 12px 18px;
	border: 2px solid var(--sgd-encre);
	border-radius: var(--sgd-r);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700;
}

.sgd-ec-evitement:focus {
	left: 8px;
	top: 8px;
}

/* ------------------------------------------------------------------
 * 3. Tout lien en prose porte son soulignement DÉCLARÉ (delta D-f).
 *
 * Avada neutralise couramment `text-decoration` sur `a` : sans cette règle, le
 * lien ne serait identifiable que par la couleur (1.4.1, technique F73).
 * ------------------------------------------------------------------ */

.sgd-client p a,
.sgd-client li a,
.sgd-client dd a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le téléphone est un COMPOSANT autonome, jamais un lien coloré dans une phrase
   grise : aucune couleur de texte ne peut tenir 4,5:1 à la fois contre l'ivoire
   et contre l'encre sur ce couple (démonstration, revue A11y annexe A). */
.sgd-client .sgd-telephone a {
	display: inline-flex;
	align-items: center;
	/* D-178 (R-2 de la passe 2 A11y « auth ») : à 320 px, « Appeler Christophe au » et
	   le numéro ne tombent plus en deux colonnes : ils passent à la ligne, à la suite. */
	flex-wrap: wrap;
	column-gap: 0.25em;
	min-height: 44px;
	color: var(--sgd-or);
	font-weight: 600;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* La voix « Données » peut porter un TITRE sans changer d'un pixel. */
.sgd-client h2.sgd-oeil,
.sgd-client h3.sgd-oeil {
	font-family: var(--sgd-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 0 0 6px;
	color: var(--sgd-or);
}

/* ------------------------------------------------------------------
 * 4. Ossature : rail à gauche, contenu à droite.
 * ------------------------------------------------------------------ */

.sgd-ec-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

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

.sgd-ec-principal > h1 {
	margin-top: 0;
}

.sgd-ec-etroit {
	max-width: 560px;
}

/* ------------------------------------------------------------------
 * 5. Rail de rubriques — NAVIGATION, jamais role="tablist" (règle E-1).
 * ------------------------------------------------------------------ */

.sgd-ec-rail {
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 16px 12px;
	position: sticky;
	top: 120px;
}

.sgd-ec-rail > .sgd-oeil {
	padding: 0 13px;
	margin: 4px 0 12px;
}

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

.sgd-ec-rail-lien {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 12px 8px 13px;
	border-left: 3px solid transparent;
	color: var(--sgd-encre);
	text-decoration: none;
	font-size: 16px;
	border-radius: 0 var(--sgd-r) var(--sgd-r) 0;
}

.sgd-ec-rail-lien:hover {
	background: var(--sgd-blanc);
}

/* La rubrique courante est marquée par DEUX signaux au moins — graisse et
   filet, plus le fond : jamais la couleur seule (1.4.1). */
.sgd-ec-rail-lien.est-courante {
	background: var(--sgd-blanc);
	border-left-color: var(--sgd-encre);
	font-weight: 700;
}

.sgd-ec-rail-sortie {
	margin: 16px 0 0;
	padding: 16px 1px 0;
	border-top: 1px solid var(--sgd-filet);
}

.sgd-ec-rail-sortie .sgd-bouton {
	width: 100%;
	min-height: 48px;
	padding: 12px 8px;
	font-size: 12px;
}

/* La déconnexion répétée en pied de vue n'existe qu'au mobile : au desktop,
   celle du rail est visible sans défilement. */
.sgd-ec-sortie-pied {
	display: none;
}

/* ------------------------------------------------------------------
 * 6. Filtres d'état — même règle E-1, une URL par filtre.
 *
 * ⛔ PAS d'`overflow-x: auto` ici, et c'est une décision : un conteneur défilant
 * ROGNE l'anneau de focus de 2 px et son décalage de 2 px, sans que rien ne le
 * signale tant qu'on ne tabule pas. La rangée se REPLIE, elle ne défile pas.
 * ------------------------------------------------------------------ */

.sgd-ec-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--sgd-filet);
}

.sgd-ec-filtre {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--sgd-encre);
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
}

.sgd-ec-filtre:hover {
	border-bottom-color: var(--sgd-filet-fort);
}

.sgd-ec-filtre.est-courante {
	border-bottom-color: var(--sgd-encre);
	font-weight: 700;
}

.sgd-ec-filtre-n {
	font-family: var(--sgd-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sgd-aide);
	border: 1px solid var(--sgd-filet-fort);
	border-radius: 2px;
	padding: 1px 6px;
}

.sgd-ec-filtre.est-courante .sgd-ec-filtre-n {
	color: var(--sgd-encre);
	border-color: var(--sgd-encre);
}

/* ------------------------------------------------------------------
 * 7. « Votre prochaine course » — le point d'ancrage de l'écran.
 * ------------------------------------------------------------------ */

.sgd-ec-prochaine {
	border-radius: var(--sgd-r);
	padding: 28px 32px 24px;
	margin: 0 0 40px;
}

.sgd-ec-prochaine > .sgd-oeil {
	margin: 0 0 10px;
}

.sgd-ec-quand {
	font-family: var(--sgd-serif);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: -0.012em;
	margin: 0 0 6px;
}

.sgd-ec-trajet {
	font-size: 18px;
	margin: 0 0 4px;
}

.sgd-ec-meta {
	color: var(--sgd-aide);
	font-size: 15px;
	margin: 0 0 20px;
}

.sgd-ec-prochaine .sgd-bouton {
	color: var(--sgd-ivoire);
	border-color: var(--sgd-or);
}

.sgd-ec-prochaine .sgd-bouton-primaire {
	color: var(--sgd-encre);
	background: var(--sgd-or);
	border-color: var(--sgd-or);
}

.sgd-ec-prochaine .sgd-actions {
	margin: 20px 0 0;
}

/* ------------------------------------------------------------------
 * 8. Bloc chauffeur.
 * ------------------------------------------------------------------ */

.sgd-ec-chauffeur {
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 16px 20px;
	margin: 0 0 4px;
}

.sgd-ec-chauffeur .sgd-oeil {
	margin: 0 0 8px;
}

.sgd-ec-chauffeur dl {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	margin: 0;
}

.sgd-ec-chauffeur dt {
	font-family: var(--sgd-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sgd-aide);
	margin: 0 0 2px;
}

.sgd-ec-chauffeur dd {
	margin: 0;
	font-size: 17px;
}

.sgd-ec-plaque {
	font-family: var(--sgd-mono);
	font-weight: 600;
	letter-spacing: 0.16em;
	font-size: 17px;
}

.sgd-client .sgd-ec-note {
	color: var(--sgd-aide);
	font-size: 14px;
	margin: 12px 0 0;
}

/* ------------------------------------------------------------------
 * 9. Carte-lien de réservation — UN SEUL lien, le nom porte tout.
 * ------------------------------------------------------------------ */

.sgd-ec-liste {
	list-style: none;
	list-style-type: "";
	margin: 0;
	padding: 0;
}

.sgd-ec-carte {
	display: block;
	background: var(--sgd-blanc);
	border: 1px solid var(--sgd-or);
	border-radius: var(--sgd-r);
	padding: 18px 22px;
	margin: 0 0 12px;
	color: var(--sgd-encre);
	text-decoration: none;
}

.sgd-ec-carte:hover {
	background: var(--sgd-ivoire);
	border-color: var(--sgd-encre);
}

.sgd-ec-carte-quand {
	font-family: var(--sgd-serif);
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 2px;
	display: block;
}

.sgd-ec-carte-trajet {
	display: block;
	font-size: 16px;
	margin: 0 0 10px;
}

.sgd-ec-carte-pied {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	justify-content: space-between;
}

.sgd-ec-carte-meta {
	color: var(--sgd-aide);
	font-size: 15px;
}

.sgd-ec-carte-prix {
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
}

.sgd-ec-carte-vide {
	color: var(--sgd-aide);
	font-size: 15px;
	margin: 0;
}

/* ------------------------------------------------------------------
 * 10. Pastille d'état — un MOT, une FORME, jamais la couleur seule.
 * ------------------------------------------------------------------ */

.sgd-ec-etat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border-radius: var(--sgd-r);
	font-family: var(--sgd-mono);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
}

.sgd-ec-etat::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
}

.sgd-ec-etat--avenir {
	background: var(--sgd-encre);
	color: var(--sgd-ivoire);
	border-color: var(--sgd-encre);
}

.sgd-ec-etat--avenir::before {
	background: var(--sgd-ivoire);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sgd-ec-etat--passee {
	color: var(--sgd-or);
	border-color: var(--sgd-or);
}

.sgd-ec-etat--passee::before {
	background: var(--sgd-or);
}

.sgd-ec-etat--annulee {
	color: var(--sgd-encre);
	border-color: var(--sgd-encre);
}

.sgd-ec-etat--annulee::before {
	height: 2px;
	background: var(--sgd-encre);
}

.sgd-ec-etat--remboursee {
	color: var(--sgd-encre);
	border-color: var(--sgd-encre);
}

.sgd-ec-etat--remboursee::before {
	border: 2px solid var(--sgd-encre);
	border-radius: 50%;
}

/* ------------------------------------------------------------------
 * 11. Ligne de document, bandeau, état vide, référence.
 * ------------------------------------------------------------------ */

.sgd-ec-doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 24px;
	align-items: center;
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 18px 22px;
	margin: 0 0 12px;
}

.sgd-ec-doc-nom {
	font-family: var(--sgd-serif);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 2px;
}

.sgd-ec-doc-meta {
	color: var(--sgd-aide);
	font-size: 14.5px;
	margin: 0;
}

.sgd-ec-doc .sgd-bouton {
	min-height: 48px;
	padding: 12px 20px;
	font-size: 12px;
}

/* Le bandeau des durées est du TEXTE STATIQUE : ni région vive, ni bouton de
   fermeture. Une information qu'on peut faire disparaître n'a pas été donnée. */
.sgd-ec-bandeau {
	margin: 40px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--sgd-filet);
	color: var(--sgd-aide);
	font-size: 14px;
	max-width: 80ch;
}

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

.sgd-ec-vide {
	background: var(--sgd-ivoire);
	border: 1px solid var(--sgd-filet);
	border-radius: var(--sgd-r);
	padding: 48px 32px;
	margin: 0 0 32px;
	text-align: center;
}

.sgd-ec-vide--sortie {
	margin: 32px 0 0;
	padding: 28px;
	text-align: left;
}

/*
 * ⚠️ R-17 (passe A11y du lot 0.6.3) — QUALIFIÉ, JAMAIS NU. `.sgd-tunnel h2,
 * .sgd-tunnel h3, .sgd-client h2, .sgd-client h3` (sgd-tunnel.css) a une
 * spécificité (0,1,1) qui bat un sélecteur nu `.sgd-ec-vide-titre` (0,1,0) :
 * le jour où l'état vide d'EC-6 a échangé son `<p>` contre un `<h2>` (R-15),
 * ce titre a hérité malgré lui de la marge et de la couleur DU TUNNEL au lieu
 * des siennes. `.sgd-client` en préfixe porte la spécificité à (0,2,0), qui
 * bat (0,1,1) quel que soit l'élément porté (`<p>` ou tout niveau de titre).
 * Les deux cousins `.sgd-ec-vide-titre` restés `<p>` (EC-1, EC-3) ne changent
 * pas de rendu : `.sgd-client .sgd-ec-vide p` (0,2,1) les gouvernait déjà
 * pour la couleur avant ce changement, et continue de le faire.
 */
.sgd-client .sgd-ec-vide-titre {
	font-family: var(--sgd-serif);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--sgd-aide);
}

.sgd-client .sgd-ec-vide p {
	color: var(--sgd-aide);
	max-width: 46ch;
	margin: 0 auto 24px;
}

.sgd-client .sgd-ec-vide--sortie p {
	margin: 0 0 20px;
	max-width: none;
}

.sgd-ec-retour {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sgd-encre);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sgd-ec-ref {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	color: var(--sgd-aide);
	font-size: 15px;
	margin: 0 0 12px;
}

.sgd-ec-num {
	font-family: var(--sgd-mono);
	font-weight: 600;
	letter-spacing: 0.12em;
	font-size: 12px;
	text-transform: uppercase;
}

.sgd-client .sgd-ec-valeur {
	font-size: 19px;
	margin: 0 0 4px;
}

/* ------------------------------------------------------------------
 * 12. Entrée de menu du site (hors `.sgd-client`, exception § 6bis).
 * ------------------------------------------------------------------ */

.sgd-ec-menu-lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 2px;
	color: #1a1714;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.sgd-ec-menu-lien:hover {
	border-bottom-color: #1a1714;
}

.sgd-ec-menu-lien[aria-current="page"] {
	border-bottom-color: #1a1714;
	font-weight: 700;
}

.sgd-ec-menu-item {
	display: flex;
	align-items: center;
	min-height: 65px;
	padding: 19px 16px;
	background: #faf7f1;
	border-bottom: 1px solid #cdbfa6;
	color: #1a1714;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * 13. Dialogue de fermeture de compte.
 * ------------------------------------------------------------------ */

.sgd-ec-voile {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(26, 23, 20, 0.62);
	padding: 56px 24px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow-y: auto;
}

/* ⛔ LA GARDE `[hidden]` EST OBLIGATOIRE — RÈGLE DU DÉPÔT (D-142).
 *
 * La feuille du navigateur pose `[hidden] { display: none }` à une spécificité
 * de (0,1,0). Toute règle d'auteur qui pose un `display` sur le MÊME élément
 * l'écrase : le `hidden` servi par PHP ne cache alors plus rien. Mesuré le
 * 09/09 (passe 1 A11y, réserve R-1, suspensive) : sur « Mon compte », le
 * dialogue de fermeture était peint EN PERMANENCE par-dessus toute la page,
 * 11 des 14 éléments focalisables du module occultés (2.4.11 AA), sans `inert`
 * ni piège de focus — le script ne s'arme que si `voile.hidden` est faux.
 * Échap et « Annuler » refermaient l'arbre, jamais l'image.
 *
 * La garde vaut pour TOUT voile, présent ou futur : dès qu'un sélecteur du
 * module pose un `display` sur un élément que le serveur peut servir `hidden`,
 * il porte sa règle `[hidden] { display: none }`. Un cas de la suite le
 * vérifie sur la feuille servie. */
.sgd-ec-voile[hidden] {
	display: none;
}

.sgd-ec-dialogue {
	background: var(--sgd-ivoire);
	border: 2px solid var(--sgd-encre);
	border-radius: var(--sgd-r);
	padding: 28px 32px;
	max-width: 520px;
	width: 100%;
	margin: 0;
	/* La SEULE ombre du système : un dialogue doit se lire comme étant
	   au-dessus. Partout ailleurs, la profondeur vient du filet et de la
	   matière. La bordure encre de 2 px survit au mode couleurs forcées, où
	   l'ombre disparaît : le voile n'est jamais le seul séparateur. */
	box-shadow: 0 24px 48px rgba(26, 23, 20, 0.28);
}

.sgd-ec-dialogue h2 {
	margin: 0 0 12px;
	font-size: 24px;
}

.sgd-ec-dialogue .sgd-actions {
	margin: 24px 0 0;
}

/* ------------------------------------------------------------------
 * 14. Reflow — les vraies requêtes de média (point (a) du § 13).
 *
 * Le rail devient une rangée, la déconnexion descend en pied de vue, et les
 * boutons prennent la largeur. Rien n'est masqué : aucune donnée ne disparaît
 * entre 1280 et 320 px, et aucun tableau n'apparaît nulle part.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {

	.sgd-ec-colonnes {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sgd-ec-rail {
		position: static;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--sgd-filet);
		border-radius: 0;
		padding: 0;
		margin: 0 0 8px;
	}

	.sgd-ec-rail > .sgd-oeil {
		padding: 0;
	}

	/* Mesuré le 09/09 : les trois rubriques font environ 360 px, la colonne 390
	   n'en offre que 358. En défilement, « Mon compte » était COUPÉ et pouvait
	   ne jamais être découvert. Le repli sur deux lignes ne cache rien et
	   n'ajoute aucun geste. */
	.sgd-ec-rail ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.sgd-ec-rail-lien {
		border-left: 0;
		border-bottom: 3px solid transparent;
		border-radius: 0;
		min-height: 44px;
		padding: 10px 12px;
		white-space: nowrap;
		font-size: 15px;
	}

	.sgd-ec-rail-lien.est-courante {
		border-bottom-color: var(--sgd-encre);
		background: var(--sgd-blanc);
	}

	/* Arbitrage D3 : « Se déconnecter » reste EN PIED de vue, et devient en plus
	   atteignable SANS DÉFILEMENT, juste sous la rangée du rail, hors de la
	   liste de liens (persona C3 : conciergerie d'hôtel, poste partagé). */
	.sgd-ec-rail-sortie {
		display: flex;
		justify-content: flex-end;
		margin: 0;
		padding: 8px 0 0;
		border-top: 0;
	}

	.sgd-ec-rail-sortie .sgd-bouton {
		width: auto;
		min-height: 44px;
		padding: 10px 16px;
		font-size: 11px;
	}

	.sgd-ec-sortie-pied {
		display: block;
		margin: 40px 0 0;
		padding: 24px 0 0;
		border-top: 1px solid var(--sgd-filet);
	}

	.sgd-client .sgd-ec-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.sgd-ec-doc {
		grid-template-columns: 1fr;
	}

	.sgd-ec-quand {
		font-size: 26px;
	}

	.sgd-ec-prochaine {
		padding: 22px 20px 20px;
	}

	.sgd-ec-vide {
		padding: 32px 20px;
	}

	.sgd-ec-voile {
		padding: 24px 12px;
	}

	.sgd-ec-dialogue {
		padding: 20px 18px;
	}
}

/* ------------------------------------------------------------------
 * 15. Couleurs forcées (point (h) du § 13).
 *
 * Un FOND est forcé en Canvas et le marqueur disparaît ; un TRAIT est forcé en
 * CanvasText et survit. Les quatre marqueurs passent donc au trait.
 * ------------------------------------------------------------------ */

@media (forced-colors: active) {

	.sgd-client .sgd-ec-sombre {
		border: 1px solid CanvasText;
	}

	.sgd-ec-etat {
		border-color: CanvasText;
	}

	.sgd-ec-etat::before {
		background: none;
		border: 2px solid CanvasText;
		clip-path: none;
	}

	.sgd-ec-etat--passee::before {
		border-width: 4px;
	}

	.sgd-ec-etat--annulee::before {
		height: 0;
		width: 12px;
		border-width: 1px 0 0;
	}

	.sgd-ec-etat--remboursee::before {
		border-radius: 50%;
	}

	.sgd-ec-rail-lien.est-courante {
		border-left-style: double;
		border-left-width: 5px;
	}

	.sgd-ec-filtre.est-courante {
		border-bottom-style: double;
		border-bottom-width: 4px;
	}

	.sgd-ec-carte {
		border-color: CanvasText;
	}

	.sgd-ec-dialogue {
		border-color: CanvasText;
	}
}