/*
 * TOP CALENDAR v2 — LA FEUILLE DU FRONT PUBLIC
 *
 * ── LA MAQUETTE FAIT FOI (24/09) ─────────────────────────────────────────
 *
 * Les tailles, espacements, rayons, couleurs et polices de cette feuille
 * sont ceux des maquettes validees « Client-01 » a « Client-13 » (390 px) et
 * « Front-01 » a « Front-03 » (1360 px), portes tels quels. Le tunnel est
 * un ECRAN D'APPLI : en-tete du lieu, barre fine de progression, fleche de
 * retour, bouton noir fixe en bas avec le total. Il a sa propre typographie
 * (Instrument Sans, Bricolage Grotesque pour les titres, JetBrains Mono pour
 * les heures, les montants et les references), embarquee dans assets/fonts —
 * jamais depuis un service distant.
 *
 * ── D'OU VIENNENT CES COULEURS, ET POURQUOI PAS D'AUTRES ──────────────────
 *
 * Elles ont ete MESUREES, pas choisies a l'oeil. Le banc d'essai a passe
 * 88 ecrans dans les deux peaux : chaque couleur de texte a ete calculee
 * contre le fond REELLEMENT composite derriere elle, alpha compris.
 *
 * ⚠ DEUX JEUX POUR LES ETATS, ET CE N'EST PAS UN DOUBLON.
 *
 * Une couleur d'etat employee comme MARQUE (la pastille, le liseré, la barre)
 * doit tenir 3:1 contre son fond. La meme employee comme TEXTE doit tenir
 * 4,5:1. Ce sont deux seuils differents, donc deux valeurs differentes :
 * `--tc-libre` pour la marque, `--tc-libre-t` pour le mot.
 *
 * ⚠ LE GRAND ECRAN SE DECIDE SUR LA LARGEUR DU TUNNEL, PAS DE LA FENETRE.
 * `.tc-app` est un conteneur (`container-type`) : pose dans la colonne
 * etroite d'un theme, il reste un ecran de telephone ; en pleine page, il
 * passe aux deux colonnes de Front-03 des 1000 px.
 */

@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;
  font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;
  font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;
  font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;
  font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

.tcv2 {
	/* le papier et l'encre de la maquette — le tunnel a sa propre peau */
	--tc-fond: #FCFBF9;
	--tc-encre: #171310;
	--tc-surface: #FFFFFF;
	--tc-trait: #E8E3DC;
	--tc-trait-doux: #EFEAE3;
	--tc-trait-fin: #F0ECE6;
	--tc-trait-champ: #D9D2C8;
	--tc-texte-2: #5C5248;
	--tc-texte-3: #6E635A;
	--tc-texte-4: #8A8078;
	--tc-icone: #9A8F84;
	--tc-rempli: #F4F1EC;
	--tc-gris-carte: #FAF8F5;
	--tc-sable: #F1EDE7;
	--tc-sable-trait: #C3B9AC;

	/* les quatre etats — MARQUE (seuil 3:1) */
	--tc-libre: #0F7A4C;
	--tc-tendu: #B07B10;
	--tc-complet: #8F2A1C;
	--tc-ferme: #6E7480;
	/* les quatre etats — TEXTE (seuil 4,5:1) */
	--tc-libre-t: #0F7A4C;
	--tc-tendu-t: #8A5F0C;
	--tc-complet-t: #8F2A1C;
	--tc-complet-t2: #7A2E22;
	--tc-ferme-t: #5F6673;
	/* leurs fonds doux */
	--tc-libre-d: #E7F2EC;
	--tc-tendu-d: #F8F0DF;
	--tc-complet-d: #F7E9E6;
	--tc-ferme-d: #EFEFED;

	/* la dalle : sombre dans les deux peaux, jamais inversee */
	--tc-dalle: #171310;
	--tc-sur-dalle: #FCFBF9;
	--tc-sur-dalle-2: #C6BEB5;
	--tc-dalle-trait: #372F28;
	--tc-libre-vif: #3FBF87;

	/*
	 * ⚠ LE SECOND MOT POSE SUR L'ENCRE — ET CE N'EST PAS `--tc-sur-dalle-2`.
	 * La dalle est sombre dans les DEUX peaux ; une surface peinte en
	 * `--tc-encre` se RETOURNE avec la peau (voir la peau sombre).
	 */
	--tc-sur-encre-2: #C6BEB5;

	/*
	 * ── LA COULEUR DES BOUTONS — « Reglages → Couleur des boutons » ──────
	 *   · `--tc-ac` peint le BOUTON PRINCIPAL, son texte est calcule ;
	 *   · `--tc-marque` peint ce qui dit un ETAT — le jour choisi, l'horaire
	 *     coche, la barre d'etapes, la carte retenue. L'accent n'y entre que
	 *     s'il tient 3:1 contre la page DE CETTE PEAU (WCAG 1.4.11).
	 * ⚠ ET L'ANNEAU DE FOCUS N'EN DERIVE JAMAIS : il reste `--tc-encre`.
	 */
	--tc-ac: var(--tc-encre);
	--tc-sur-ac: var(--tc-fond);
	--tc-marque: var(--tc-encre);
	--tc-sur-marque: var(--tc-fond);
	--tc-sur-marque-2: var(--tc-sur-encre-2);

	--tc-r: 14px;
	--tc-r-sm: 10px;
	--tc-cible: 44px;

	--tc-police: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tc-titres: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--tc-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/*
	 * ⚠ LE FOND EST POSE ICI, ET C'EST UNE CORRECTION, PAS UN CHOIX D'ALLURE :
	 * un visiteur en mode sombre sur un theme clair declenchait notre peau
	 * sombre par-dessus une page blanche (mesure du 22/09 : l'ecran de paiement
	 * illisible). Le tunnel porte donc toujours son propre papier.
	 */
	background: var(--tc-fond);
	color: var(--tc-encre);
	font-family: var(--tc-police);
	font-size: 16px;
	line-height: 1.5;
	/* Le theme (Twenty Twenty-Five) pose `letter-spacing: -0.1px` sur body :
	   sur la micro-copie de 11 a 12 px, les mots se touchaient (« vousretirer »,
	   controle 2, T6). La maquette n'a aucun interlettrage de base. */
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Hors du tunnel (l'espace client) : un bloc centre qui respire. */
	max-width: 720px;
	margin-inline: auto;
	padding: 22px 16px;
	border-radius: 18px;
}

/*
 * ⚠ LE MODE SOMBRE NE S'INVERSE PAS, IL SE CHOISIT.
 * Retourner mecaniquement les quatre etats rendait « presque complet » et
 * « complet » indistinguables (ΔE 2,2 en deuteranopie). Ces pas-ci ont ete
 * valides separement, contre le fond sombre.
 */
@media ( prefers-color-scheme: dark ) {
	.tcv2:not( [data-tc-peau="claire"] ) {
		--tc-fond: #16191F;
		--tc-encre: #EDEFF2;
		--tc-surface: #1E222A;
		--tc-trait: #2C3139;
		--tc-trait-doux: #262B33;
		--tc-trait-fin: #262B33;
		--tc-trait-champ: #3A404A;
		--tc-texte-2: #AEB5C0;
		--tc-texte-3: #959CAA;
		--tc-texte-4: #8A919E;
		--tc-icone: #8A919E;
		--tc-rempli: #232830;
		--tc-gris-carte: #1A1E25;
		--tc-sable: #232830;
		--tc-sable-trait: #4A515C;
		--tc-libre: #1F9C69;
		--tc-tendu: #B28B10;
		--tc-complet: #C2403A;
		--tc-ferme: #8A909B;
		--tc-libre-t: #4ECF95;
		--tc-tendu-t: #E0A83A;
		--tc-complet-t: #F08878;
		--tc-complet-t2: #E9A89C;
		--tc-ferme-t: #A6ADB9;
		--tc-libre-d: rgba( 31, 156, 105, .16 );
		--tc-tendu-d: rgba( 178, 139, 16, .18 );
		--tc-complet-d: rgba( 194, 64, 58, .16 );
		--tc-ferme-d: rgba( 138, 144, 155, .16 );
		--tc-dalle: #0B0D11;
		--tc-sur-dalle: #EDEFF2;
		--tc-sur-dalle-2: #9BA3AF;
		--tc-dalle-trait: #242A33;
		/* Retourne, lui, puisque `--tc-encre` se retourne : gris fonce sur la
		   pastille presque blanche. Mesure a 5,50:1 contre #EDEFF2. */
		--tc-sur-encre-2: #5A6069;
	}
}

/* ═══ LA PAGE ENTIERE — le gabarit du tunnel (TOPCAL_Tunnel::gabarit) ═══ */

body.tc-plein { margin: 0; background: #FCFBF9; }
@media ( prefers-color-scheme: dark ) {
	body.tc-plein { background: #16191F; }
}
body.tc-plein .wp-site-blocks,
body.tc-plein .wp-block-post-content {
	padding: 0 !important; margin: 0 !important; max-width: none !important;
}
body.tc-plein .wp-block-post-content > * { max-width: none !important; margin: 0 !important; }

/* ═══ LA BASE ════════════════════════════════════════════════════════ */

.tcv2 *,
.tcv2 *::before,
.tcv2 *::after { box-sizing: border-box; }

/* Le theme ne dessine pas nos titres : ses tailles, ses graisses et ses
   capitales s'arretent au bord du tunnel. `:where()` laisse chaque classe
   ci-dessous decider sans guerre de specificite. */
.tcv2 :where(h1, h2, h3, p, legend, ol, ul, fieldset) {
	margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: inherit;
	font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none;
}
.tcv2 :where(input, button, textarea, select) { font-family: inherit; }
.tcv2 .tc-mono { font-family: var(--tc-mono); }

.tcv2 a { color: inherit; text-decoration: none; }
.tcv2 :focus-visible { outline: 2px solid var(--tc-encre); outline-offset: 2px; border-radius: 6px; }
/* ⚠ SUR LA DALLE, L'ANNEAU D'ENCRE DISPARAISSAIT (audit WCAG du 23/09 : 1,02:1
   autour du bouton « Reserver »). La dalle est sombre dans les DEUX peaux :
   l'anneau y prend la couleur de son texte, qui s'y lit. */
.tcv2 .tc-dalle :focus-visible { outline-color: var(--tc-sur-dalle); }
.tcv2 .screen-reader-text,
.tcv2 .tc-defaut {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect( 0, 0, 0, 0 ); clip-path: inset( 50% ); white-space: nowrap; border: 0;
}

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

/* Ce qui n'a de sens qu'avec le script (le choix repris dans le bouton). */
.tcv2 .tc-js-seul { display: none; }
.tc-js .tcv2 .tc-js-seul { display: inline; }
.tc-js .tcv2 [data-tc-total-aide] { display: none; }

/* ═══ LA COQUILLE D'APPLI ════════════════════════════════════════════ */

.tcv2.tc-app {
	max-width: 720px;
	padding: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	container: tc-app / inline-size;
}
body.tc-plein .tcv2.tc-app { max-width: none; min-height: 100vh; min-height: 100dvh; }
.tcv2 .tc-cadre { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.tc-site { display: none; }

/* L'en-tete du lieu (Client-01). */
.tcv2 .tc-lieu {
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--tc-trait-doux);
	background: var(--tc-fond);
	display: flex; align-items: center; gap: 12px;
	min-height: 81px; /* 20 + 44 (le globe) + 16 + le filet : la barre de la maquette */
}
.tcv2 .tc-lieu-txt { flex: 1; min-width: 0; }
/* Le globe (Client-01) : un <details>, donc un menu sans script. */
.tcv2 .tc-langue { position: relative; flex-shrink: 0; margin: -2px -8px -2px 0; }
.tcv2 .tc-langue-b {
	width: 44px; height: 44px; border-radius: 999px; cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: center; color: var(--tc-encre);
}
.tcv2 .tc-langue-b::-webkit-details-marker { display: none; }
.tcv2 .tc-langue-b::marker { content: ""; }
.tcv2 .tc-langue-b:focus-visible { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
.tcv2 .tc-langue-menu {
	position: absolute; right: 0; top: 48px; z-index: 5; min-width: 160px; margin: 0; padding: 6px; list-style: none;
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px;
	box-shadow: 0 10px 28px rgba( 23, 19, 16, .12 );
}
.tcv2 .tc-langue-menu a {
	display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px;
	font-size: 14px; color: var(--tc-encre); text-decoration: none;
}
.tcv2 .tc-langue-menu a:hover { background: var(--tc-rempli); }
.tcv2 .tc-langue-menu a[aria-current="true"] { font-weight: 600; }
.tcv2 .tc-lieu-nom { font-family: var(--tc-titres); font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -.018em; }
.tcv2 .tc-lieu-sous { font-size: 12.5px; line-height: 17px; color: var(--tc-texte-3); margin-top: 2px; }

/* L'en-tete d'une etape (Client-02 a 05) : la barre, le retour, le titre. */
.tcv2 .tc-tete { background: var(--tc-fond); border-bottom: 1px solid var(--tc-trait-doux); }
.tcv2 .tc-etapes {
	display: flex; height: 3px; background: var(--tc-trait-doux);
	list-style: none; margin: 0; padding: 0; overflow: hidden;
}
.tcv2 .tc-etapes li { flex: 1; margin: 0; height: 3px; }
/* « Termine » n'a pas de segment : la barre est pleine a l'ecran de paiement. */
.tcv2 .tc-etapes li:last-child { flex: 0 0 0; }
.tcv2 .tc-etapes .est-faite,
.tcv2 .tc-etapes .est-ici { background: var(--tc-marque); }
.tcv2 .tc-etapes.est-refus .est-faite,
.tcv2 .tc-etapes.est-refus .est-ici { background: var(--tc-complet); }

.tcv2 .tc-tete-ligne { display: flex; align-items: center; gap: 8px; padding: 12px 12px 14px; }
.tcv2 .tc-tete-ligne > .tc-tete-txt:first-child { padding-left: 8px; }
.tcv2 .tc-retour {
	width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; color: var(--tc-encre);
}
.tcv2 .tc-retour:hover { background: var(--tc-rempli); }
.tcv2 .tc-retour-mot {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap;
}
.tcv2 .tc-tete-txt { flex: 1; min-width: 0; }
.tcv2 .tc-tete-titre { font-size: 15.5px; line-height: 21px; font-weight: 600; letter-spacing: -.008em; }
.tcv2 .tc-tete-sous { font-size: 12px; line-height: 17px; color: var(--tc-texte-3); margin-top: 1px; }
.tcv2 .tc-tete-sous.est-mono { font-family: var(--tc-mono); }
.tcv2 .tc-tete-sous.est-tendu { color: var(--tc-tendu-t); }

/* Le corps et la barre fixe du bas. */
.tcv2 .tc-page { display: flex; flex-direction: column; flex: 1; margin: 0; }
.tcv2 .tc-corps { flex: 1; padding: 22px 20px 24px; min-width: 0; }
/* L'accueil (Client-01) ouvre a 20 px sous l'en-tete, comme la maquette. */
.tcv2 .tc-page.est-vitrine > .tc-corps { padding-top: 20px; }
.tcv2 .tc-barre {
	position: sticky; bottom: 0; z-index: 2;
	padding: 14px 20px calc( 20px + env( safe-area-inset-bottom, 0px ) );
	border-top: 1px solid var(--tc-trait-doux);
	background: var(--tc-fond);
}
.tcv2 .tc-barre > * + * { margin-top: 10px; }
.tcv2 .tc-barre .tc-b { height: 52px; }
.tcv2 .tc-barre .tc-total + .tc-b,
.tcv2 .tc-barre .tc-total + [data-tc-total-aide],
.tcv2 .tc-barre [data-tc-total-aide] + .tc-b { margin-top: 0; } /* Client-03 : l'aide cachee ne rouvre pas 10 px (controle 3) */
.tcv2 .tc-barre-note {
	display: block; margin-top: 11px; text-align: center;
	font-size: 11.5px; line-height: 16px; color: var(--tc-texte-3);
}
.tcv2 .tc-barre-note.est-coche { display: flex; align-items: flex-start; justify-content: center; gap: 7px; }
.tcv2 .tc-barre-note.est-coche .tc-i { color: var(--tc-libre); flex-shrink: 0; margin-top: 1px; }
.tcv2 .tc-barre-lien {
	display: flex; align-items: center; justify-content: center; min-height: var(--tc-cible);
	font-size: 13px; font-weight: 500; color: var(--tc-texte-3);
}
.tcv2 .tc-barre-lien:hover { color: var(--tc-encre); }
.tcv2 .tc-resume { display: none; }
.tcv2 .tc-agenda { margin: 0; }
/* Client-06 : « Mon agenda » et le bouton carre « Partager », cote a cote. */
.tcv2 .tc-fait-pied { display: flex; gap: 10px; }
.tcv2 .tc-fait-pied > .tc-agenda { flex: 1; min-width: 0; }
.tcv2 .tc-fait-pied .tc-b { height: 48px; border-radius: 12px; font-size: 14.5px; gap: 8px; }
.tcv2 .tc-fait-partager {
	width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
	border: 1px solid var(--tc-trait-champ); background: var(--tc-surface); color: var(--tc-encre);
}
.tc-js .tcv2 .tc-fait-partager.tc-js-seul { display: flex; }
.tcv2 .tc-fait-partager[hidden] { display: none !important; }
.tcv2 .tc-fait-partager:focus-visible { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
.tcv2 .tc-barre:has( > .tc-fait-pied ) { padding-top: 16px; }
/* La cible garde ses 44 px ; les marges negatives rendent a la ligne sa place de la maquette. */
/* (voir plus bas, a cote de `[data-tc-espace]`, qui porte la meme specificite) */
.tcv2 .tc-pied-lien {
	padding: 14px 20px 20px; border-top: 1px solid var(--tc-trait-doux); text-align: center;
}
.tcv2 .tc-pied-lien .tc-b-texte { font-size: 13px; font-weight: 500; color: var(--tc-texte-3); margin: -10px 0; } /* 44 px de cible, 24 de place : le pied de la maquette */

/* ═══ LES BOUTONS ════════════════════════════════════════════════════ */

.tc-b {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--tc-cible); padding: 0 20px; border: 0; border-radius: 13px;
	font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center;
	background: var(--tc-ac); color: var(--tc-sur-ac); width: 100%;
	box-shadow: var( --tc-ac-filet, none );
	transition: filter .14s;
}
/* Survol : l'accent a son propre survol (`--tc-ac-survol`, calcule) —
   eclaircir un bordeaux sous du blanc ferait tomber le mot sous 4,5:1. */
.tc-b:hover { filter: var( --tc-b-survol-filtre, brightness( 1.4 ) ); }
.tcv2 .tc-b:not( .tc-b-creux ):not( .tc-b-clair ):hover { background: var( --tc-ac-survol, var( --tc-ac ) ); }
/* ⚠ `.tcv2 a { color: inherit }` pese plus que `.tc-b` : un lien-bouton
   heritait de l'encre, sur un fond d'encre (1,00:1). */
.tcv2 a.tc-b { color: var( --tc-sur-ac ); }
.tcv2 a.tc-b-clair { color: var( --tc-sur-ac-dalle, var( --tc-dalle ) ); }
.tc-b[disabled] { opacity: .4; cursor: not-allowed; }
.tcv2 .tc-b.tc-b-creux { background: transparent; border: 1.5px solid var(--tc-encre); color: var(--tc-encre); box-shadow: none; }
.tcv2 .tc-b.tc-b-creux:hover { filter: none; background: var(--tc-rempli); }
.tcv2 .tc-b .tc-i { flex-shrink: 0; }
.tcv2 .tc-b-suite { font-family: var(--tc-mono); font-size: 14px; font-weight: 400; opacity: .72; }
.tcv2 .tc-payer-tout { display: none; }
.tcv2 .tc-page:has( #tc-combien-tout:checked ) .tc-payer-tout { display: inline; }
.tcv2 .tc-page:has( #tc-combien-tout:checked ) .tc-payer-acompte { display: none; }
.tc-b-texte {
	background: transparent; color: var(--tc-texte-3); width: auto;
	font-size: 13px; font-weight: 500; padding: 0 4px;
	/* ⚠ 44 px de cible : le seul geste qui sorte d'un ecran ou l'on s'est
	   trompe. `min-height` suffit, ce lien n'est pas l'enfant d'un flex. */
	display: inline-flex; align-items: center;
	min-height: var(--tc-cible);
}
.tcv2 .tc-corps > .tc-b-texte { margin-top: 12px; margin-left: -4px; }

/* ═══ LA VITRINE (Client-01, Front-01) ═══════════════════════════════ */

.tc-dalle {
	background: var(--tc-dalle);
	color: var(--tc-sur-dalle);
	border-radius: 18px;
	padding: 20px;
	margin-bottom: 22px;
}
.tc-dalle-eyebrow {
	display: flex; align-items: center; gap: 7px;
	font-size: 11px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--tc-sur-dalle-2);
	margin-bottom: 12px;
	/* interligne « normal » de la maquette : 14 px, pas 1,4 (controle 3, Client-01 §2) */
	line-height: 14px;
}
.tc-dalle-eyebrow i {
	width: 7px; height: 7px; border-radius: 999px;
	background: var(--tc-libre-vif); display: block; flex-shrink: 0;
}
.tcv2 .tc-dalle h2 {
	font-family: var(--tc-titres); font-size: 27px; line-height: 32px; font-weight: 600;
	letter-spacing: -.024em; margin: 0; color: var(--tc-sur-dalle);
}
.tcv2 .tc-dalle-quand {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; margin-top: 11px;
	line-height: normal;
}
.tcv2 .tc-dalle-quand .tc-dalle-heure { display: inline; margin: 0; font-size: clamp( 16px, 4.9vw, 19px ); }
.tcv2 .tc-dalle-dans { font-size: 13px; color: var(--tc-sur-dalle-2); }
/* La date longue de l'espace client (`TOPCAL_Espace::dalle_date()`). */
.tc-dalle-date { margin-top: 11px; }
.tc-dalle-jour { display: block; font-size: clamp(16px, 5.4vw, 19px); font-weight: 500; line-height: 1.3; }
.tc-dalle-heure {
	display: block; margin-top: 2px;
	font-family: var(--tc-mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.tc-dalle-pied {
	font-size: 13px; line-height: 16px; color: var(--tc-sur-dalle-2);
	margin-top: 14px; padding-top: 14px;
	border-top: 1px solid var(--tc-dalle-trait);
}
/* Le bouton de la dalle s'inverse : encre sombre sur fond clair. */
.tcv2 .tc-b-clair {
	margin-top: 16px; height: 50px; border-radius: 12px;
	background: var(--tc-ac-dalle, var(--tc-sur-dalle));
	color: var(--tc-sur-ac-dalle, var(--tc-dalle));
	border-color: var(--tc-sur-dalle);
	box-shadow: var( --tc-ac-dalle-filet, none );
}
.tcv2 .tc-b-clair:hover { background: var(--tc-ac-dalle-survol, var(--tc-sur-dalle-2)); border-color: var(--tc-sur-dalle-2); }

.tcv2 .tc-une-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }
.tcv2 .tc-une:not( .est-vue ) .tc-vues { display: none; }
.tcv2 .tc-une.est-vue { margin-bottom: 18px; }

.tcv2 .tc-section { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; }
.tcv2 .tc-section-titre { flex: 1; font-family: var(--tc-titres); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.012em; }
.tcv2 .tc-section.est-vitrine .tc-section-titre { line-height: 19px; }
.tcv2 .tc-section.est-vitrine .tc-section-lien { margin: -6px 0; } /* la cible de 28 px ne pousse pas la liste (Client-01) */
.tcv2 .tc-section-lien {
	display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
	font-size: 13px; font-weight: 500; color: var(--tc-texte-3); flex-shrink: 0;
}
.tcv2 .tc-section-lien:hover { color: var(--tc-encre); }

.tc-liste { display: flex; flex-direction: column; gap: 10px; }
.tc-carte {
	display: flex; align-items: center; gap: 14px;
	background: var(--tc-surface); border: 1px solid var(--tc-trait);
	border-radius: var(--tc-r); padding: 14px 15px;
	width: 100%; text-align: left; min-height: var(--tc-cible);
	color: inherit;
	transition: border-color .14s;
}
.tc-carte:hover { border-color: var(--tc-encre); }
.tc-carte-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tc-carte-nom { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -.006em; }
.tc-carte-meta { font-size: 12.5px; line-height: 15px; color: var(--tc-texte-3); margin-top: 4px; }
.tc-carte-fin { flex-shrink: 0; color: var(--tc-icone); display: flex; }
.tcv2 .tc-carte-image,
.tcv2 .tc-carte-desc,
.tcv2 .tc-carte-prix { display: none; }
.tcv2 .tc-carte-bas { display: flex; align-items: center; gap: 7px; margin-top: 9px; width: 100%; min-width: 0; }

/* L'etat d'une activite : un point et un mot en couleur, sans fond. */
.tc-etat {
	display: inline-flex; align-items: center; gap: 6px; min-width: 0;
	font-size: 12px; line-height: 15px; font-weight: 500;
}
.tc-etat i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.tc-etat.est-libre   { color: var(--tc-libre-t); }
.tc-etat.est-tendu   { color: var(--tc-tendu-t); }
.tc-etat.est-complet { color: var(--tc-complet-t); }
.tc-etat.est-ferme   { color: var(--tc-ferme-t); }
.tc-etat.est-libre i   { background: var(--tc-libre); }
.tc-etat.est-tendu i   { background: var(--tc-tendu); }
.tc-etat.est-complet i { background: var(--tc-complet); }

/* La pastille de places d'un depart : un mot, un fond doux. */
.tcv2 .tc-pastille {
	display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
	font-size: 12px; line-height: 16px; font-weight: 600; border-radius: 999px;
	padding: 4px 10px; white-space: nowrap;
}
.tcv2 .tc-pastille i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.tcv2 .tc-pastille.est-libre { color: var(--tc-libre-t); background: var(--tc-libre-d); }
.tcv2 .tc-pastille.est-tendu { color: var(--tc-tendu-t); background: var(--tc-tendu-d); }
.tcv2 .tc-pastille.est-ferme { color: var(--tc-ferme-t); background: var(--tc-ferme-d); font-weight: 500; }
.tcv2 .tc-pastille.est-ferme i { display: none; }

.tcv2 .tc-promesses { display: none; }

/* ═══ QUAND (Client-02) ══════════════════════════════════════════════ */

.tcv2 .tc-section-mois { margin-top: -4px; margin-bottom: 12px; } /* 18 px sous l'en-tete, comme la maquette (le corps en pose 22) */
.tcv2 .tc-mois-titre { flex: 1; font-size: 14px; line-height: 20px; font-weight: 600; }

.tc-jours {
	/* ⚠ CINQ JOURS AJUSTES, PAS UN SIXIEME COUPE (controle 2, Client-02 §1) :
	   la bande fait exactement cinq pastilles de 58 px et quatre pas de 9 px
	   (326 px, la maquette) et coupe net a sa largeur ; le reste defile. */
	display: flex; gap: 9px; overflow-x: auto;
	width: calc( 5 * 58px + 4 * 9px ); max-width: 100%;
	margin: 0 0 18px; padding: 0 0 2px;
	/* ⚠ La bande defile jusqu'au jour choisi (`scroll-initial-target`) : sans
	   cette marge, elle collait la premiere pastille au bord de l'ecran,
	   hors de la gouttiere de 20 px (controle du 24/09). */
	scroll-padding-inline: 0;
	scrollbar-width: none;
}
.tc-jours::-webkit-scrollbar { display: none; }
.tc-jour {
	width: 58px; flex-shrink: 0; border-radius: var(--tc-r);
	border: 1px solid var(--tc-trait); background: var(--tc-surface);
	padding: 10px 0 9px; text-align: center; font: inherit; color: inherit; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
	position: relative; /* porte `.tc-jour-ancre`, voir plus bas */
}
.tc-jour:hover { border-color: var(--tc-encre); }
.tc-jour[aria-current="true"] { background: var(--tc-marque); border-color: var(--tc-marque); color: var(--tc-sur-marque); }
/* Sans script, la bande s'ouvre sur le jour choisi — Chromium 133+. */
.tc-jour[aria-current="true"] { scroll-initial-target: nearest; }
/* L'ancre de `lien_jour()` : posee un ecran AU-DESSUS du jour, pour que le
   saut garde la bande en vue au lieu de la coller en haut de l'ecran. */
.tc-jour-ancre {
	position: absolute; left: 0; right: 0; height: 1px;
	top: calc(-100vh + 120px);
	scroll-margin-inline: 40px;
	pointer-events: none; visibility: hidden;
}
.tc-jour[disabled] { opacity: .55; cursor: not-allowed; }
.tc-jour-nom { font-size: 11px; line-height: 14px; color: var(--tc-texte-3); }
/* ⚠ Sur la pastille choisie (peinte en `--tc-marque`), le second mot suit
   l'encre et se retourne avec elle. Voir le jeton. */
.tc-jour[aria-current="true"] .tc-jour-nom { color: var(--tc-sur-marque-2); }
.tc-jour-num {
	font-family: var(--tc-titres); font-size: 21px; font-weight: 600;
	margin-top: 2px; line-height: 1.1; letter-spacing: -.02em;
}
.tc-jour-point { width: 5px; height: 5px; border-radius: 999px; margin: 8px auto 0; background: var(--tc-trait); }
.tc-jour-point.est-libre { background: var(--tc-libre); }
.tc-jour-point.est-tendu { background: var(--tc-tendu); }
.tc-jour-point.est-complet { background: var(--tc-complet); }
.tc-jour[aria-current="true"] .tc-jour-point.est-libre { background: var(--tc-libre-vif); }
/* ⚠ UN JOUR PLEIN NE SE DIT PAS QU'EN ROUGE : le point rouge et le vert se
   confondent en deuteranopie. Le chiffre est barre, comme avant. */
.tc-jour.est-complet .tc-jour-num { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Le mois est dit par le titre de la bande (« Septembre ») ; sur la
   pastille, il ne reste que pour les lecteurs d'ecran (Client-02). */
.tcv2 .tc-jour .tc-jour-mois {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap;
}
.tc-jour-mois {
	font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .04em;
	text-transform: uppercase; color: var(--tc-encre);
	margin-bottom: 2px; max-width: 100%; padding-inline: 2px;
	overflow-wrap: anywhere;
}
.tc-jour-an { display: block; font-weight: 600; letter-spacing: 0; }
.tc-jour[aria-current="true"] .tc-jour-mois { color: inherit; }
.tc-jour[data-tc-mois-neuf]:not(:first-child) { margin-left: 7px; }
.tc-jour[data-tc-mois-neuf]:not(:first-child)::before {
	content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px;
	border-left: 2px solid var(--tc-trait);
}
.tcv2 .tc-trait { height: 1px; background: var(--tc-trait-doux); margin: 0 0 18px; }

.tcv2 .tc-creneaux { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tcv2 .tc-jour-titre {
	float: left; width: 100%; /* la legende devient un element du flux */
	font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--tc-texte-3); margin: 0 0 1px; padding: 0;
}
.tc-creneau {
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
	padding: 15px 16px; border-radius: var(--tc-r);
	background: var(--tc-surface); border: 1px solid var(--tc-trait);
	font: inherit; color: inherit; cursor: pointer; min-height: var(--tc-cible);
	position: relative;
}
.tc-creneau:hover { border-color: var(--tc-encre); }
.tcv2 .tc-creneau:has( > .tc-creneau-choix:checked ) { border: 1.5px solid var(--tc-marque); padding: 14.5px 15.5px; }
.tcv2 .tc-creneau:has( > .tc-creneau-choix:focus-visible ) { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
.tcv2 .tc-creneau-choix { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tc-creneau[aria-pressed="true"] { border: 1.5px solid var(--tc-marque); }
.tc-creneau[disabled] { background: var(--tc-rempli); opacity: .6; cursor: not-allowed; }
.tcv2 .tc-creneau-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-creneau-h { font-family: var(--tc-mono); font-size: 17px; line-height: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tc-creneau-jour { font-size: 14.5px; line-height: 19px; font-weight: 600; }
.tc-creneau-qui { font-size: 12.5px; line-height: 17px; color: var(--tc-texte-3); margin-top: 3px; }
.tcv2 .tc-creneau-qui.est-mono { font-family: var(--tc-mono); }
.tcv2 .tc-coche {
	width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
	background: var(--tc-marque); color: var(--tc-sur-marque);
	display: none; align-items: center; justify-content: center;
}
.tcv2 .tc-creneau:has( > .tc-creneau-choix:checked ) .tc-coche { display: flex; }
/* Le choix de l'espace client (deplacer) garde son rond. */
.tcv2 .tc-creneau > input[type="radio"]:not( .tc-creneau-choix ) {
	order: 1; flex: none; width: 20px; height: 20px; margin: 0;
	-webkit-appearance: none; appearance: none;
	border: 1px solid var(--tc-trait); border-radius: 999px;
	background: var(--tc-surface); cursor: pointer;
}
.tcv2 .tc-creneau > input[type="radio"]:not( .tc-creneau-choix ):checked {
	border: 6.5px solid var(--tc-marque);
	background: var(--tc-fond);
}

/* La liste d'attente d'un jour plein, et celle d'une date complete. */
.tcv2 .tc-attente-jour {
	margin-top: 24px; background: var(--tc-surface); border: 1px solid var(--tc-trait);
	border-radius: 16px; padding: 17px 18px;
}
.tcv2 .tc-attente-titre { font-size: 15px; line-height: 20px; font-weight: 600; margin-bottom: 6px; }
.tcv2 .tc-attente-dit { margin: 0 0 14px; font-size: 13px; line-height: 19px; color: var(--tc-texte-3); }
.tcv2 .tc-attente-depart { margin-top: 12px; }
.tcv2 .tc-attente-depart .tc-recap-nom { font-size: 13px; line-height: 19px; font-weight: 400; color: var(--tc-texte-3); margin-bottom: 10px; }
.tcv2 .tc-attente-jour a.tc-b {
	height: 48px; border-radius: 12px; font-size: 14.5px;
	background: transparent; color: var(--tc-encre); border: 1.5px solid var(--tc-encre); box-shadow: none;
}
.tcv2 .tc-attente-jour a.tc-b:hover { filter: none; background: var(--tc-rempli); }

/* ═══ COMBIEN (Client-03) ════════════════════════════════════════════ */

.tcv2 .tc-q { font-family: var(--tc-titres); font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -.018em; margin: 0 0 14px; }
.tcv2 .tc-q.est-second { font-size: 17px; line-height: 22px; letter-spacing: -.014em; margin: 24px 0 12px; }
.tcv2 .tc-intro { font-size: 13.5px; line-height: 20px; color: var(--tc-texte-3); margin: -8px 0 20px; }
/* Client-07 seulement (controle 4) : la sous-ligne « Le plus proche est dans … »
   colle au titre et la liste suit a 15 px, comme la maquette. Les autres
   ecrans a .tc-intro (Client-04, l'espace) gardent -8px 0 20px. */
.tcv2 .tc-alerte[data-tc-echec="depart"] ~ .tc-intro { margin: -11px 0 15px; }

.tcv2 .tc-compteur {
	display: flex; align-items: center; background: var(--tc-surface);
	border: 1px solid var(--tc-trait); border-radius: 16px; padding: 8px; margin-bottom: 10px;
}
.tcv2 .tc-compteur-b {
	width: 56px; height: 56px; border-radius: 12px; border: 0; padding: 0; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--tc-rempli); color: var(--tc-encre);
}
.tcv2 .tc-compteur-b.est-plus { background: var(--tc-marque); color: var(--tc-sur-marque); }
.tcv2 .tc-compteur-b[disabled] { opacity: .35; cursor: not-allowed; }
.tcv2 .tc-compteur-n { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tcv2 .tc-compteur-champ {
	width: 100%; max-width: 140px; border: 0; padding: 0; margin: 0; background: transparent;
	text-align: center; color: var(--tc-encre);
	font-family: var(--tc-titres); font-size: 32px; font-weight: 600; letter-spacing: -.028em; line-height: 1;
	height: 32px; /* le chiffre seul, comme la maquette (controle 4, Client-03) : le champ faisait 39 px */
	-moz-appearance: textfield; appearance: textfield;
}
.tcv2 .tc-compteur-champ::-webkit-inner-spin-button,
.tcv2 .tc-compteur-champ::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tcv2 .tc-compteur-mot { font-size: 12.5px; line-height: 15px; color: var(--tc-texte-3); margin-top: 4px; }
.tcv2 .tc-compteur-aide {
	display: flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0 4px;
	font-size: 12.5px; line-height: 18px; color: var(--tc-texte-3);
}
.tcv2 .tc-compteur-aide i { width: 6px; height: 6px; border-radius: 999px; background: var(--tc-tendu); flex-shrink: 0; }
.tcv2 .tc-compteur-aide + .tc-q.est-second { margin-top: 0; }

/* Les options — et les deux sommes de l'ecran de paiement — en cartes a
   cocher. Une carte = une case, un nom, une ligne d'aide, un prix. La carte
   entiere est le <label> : sur un telephone, viser une case de 20 px est un
   exercice, viser une carte n'en est pas un. */
.tcv2 .tc-options,
.tcv2 .tc-choix-somme > div { display: flex; flex-direction: column; gap: 9px; }
.tcv2 .tc-option,
.tcv2 label.tc-option:has( > .tc-option-case ) {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px;
	padding: 14px 15px; cursor: pointer; min-height: var(--tc-cible);
}
.tcv2 .tc-choix-somme .tc-option { padding: 15px 16px; }
.tcv2 .tc-option:hover { border-color: var(--tc-encre); }
.tcv2 label.tc-option:has( > .tc-option-case:checked ) { border: 1.5px solid var(--tc-marque); padding: 13.5px 14.5px; }
.tcv2 .tc-choix-somme label.tc-option:has( > .tc-option-case:checked ) { padding: 14.5px 15.5px; }
.tcv2 label.tc-option:has( > .tc-option-case:focus-visible ) { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
.tcv2 .tc-option-case { width: 22px; height: 22px; margin: 0; accent-color: var(--tc-marque); flex: none; }
.tcv2 .tc-choix-somme .tc-option-case { width: 21px; height: 21px; }
.tcv2 .tc-option-nom { font-size: 14.5px; line-height: 19px; font-weight: 600; color: var(--tc-encre); min-width: 0; }
.tcv2 .tc-option-nom .tc-aide { display: block; font-size: 12.5px; line-height: 17px; font-weight: 400; margin-top: 3px; }
.tcv2 .tc-option-prix {
	font-family: var(--tc-mono); font-size: 14px; font-variant-numeric: tabular-nums;
	color: var(--tc-encre); white-space: nowrap;
}
.tcv2 .tc-option-prix.est-fort { font-size: 16px; font-weight: 500; }
/* ⚠ UNE OPTION EPUISEE RESTE A L'ECRAN, grisee, et dit pourquoi : la taire
   ferait croire qu'elle n'existe pas. */
.tcv2 .tc-option.est-finie,
.tcv2 label.tc-option.est-finie:has( > .tc-option-case ) { background: var(--tc-gris-carte); opacity: .55; cursor: default; }
.tcv2 .tc-option.est-finie:hover { border-color: var(--tc-trait); }

/* ── LE CODE DE REDUCTION (Client-03) ─────────────────────────────────
   Un `<details>` : le lien discret de la maquette, etiquette comprise,
   qui deplie le champ sans script. Le triangle natif sort ; la cible
   garde ses 44 px. */
.tcv2 .tc-remise { margin-top: 20px; }
.tcv2 .tc-remise-lien {
	display: inline-flex; align-items: center; gap: 8px; min-height: var(--tc-cible);
	font-size: 13.5px; font-weight: 500; color: var(--tc-texte-3); cursor: pointer;
	list-style: none; border-radius: 8px;
}
.tcv2 .tc-remise-lien::-webkit-details-marker { display: none; }
.tcv2 .tc-remise-lien::marker { content: ""; }
.tcv2 .tc-remise-lien:hover { color: var(--tc-encre); }
.tcv2 .tc-remise-lien:focus-visible { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
.tcv2 .tc-remise[open] > .tc-remise-lien { color: var(--tc-encre); }
.tcv2 .tc-remise-corps { padding-top: 6px; }
.tcv2 .tc-remise-ligne { display: flex; gap: 8px; }
.tcv2 .tc-remise-ligne .tc-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.tcv2 .tc-b.tc-remise-appliquer { width: auto; flex: none; min-height: 52px; padding: 0 18px; font-size: 14.5px; }
.tcv2 .tc-remise-ok {
	display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
	font-size: 13px; line-height: 18px; color: var(--tc-libre-t);
}
.tcv2 .tc-remise-ok > span { flex: 1; min-width: 0; }
.tcv2 .tc-remise-retirer {
	background: none; border: 0; padding: 0 4px; font: inherit; font-size: 13px; font-weight: 500;
	color: var(--tc-texte-3); text-decoration: underline; text-underline-offset: 3px;
	min-height: var(--tc-cible); cursor: pointer;
}
.tcv2 .tc-remise-retirer:focus-visible { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
/* La ligne de remise du releve : la seule qui retranche, et elle le dit. */
.tcv2 .tc-ligne[data-tc-ligne="discount"] .tc-ligne-quoi,
.tcv2 .tc-ligne[data-tc-ligne="discount"] .tc-ligne-combien { color: var(--tc-libre-t); }
.tcv2 .tc-remise-refus {
	display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0;
	font-size: 12.5px; line-height: 18px; color: var(--tc-tendu-t);
}
.tcv2 .tc-remise-refus .tc-i { flex: none; margin-top: 1px; }
.tcv2 .tc-remise-refus a { color: var(--tc-encre); text-decoration: underline; text-underline-offset: 3px; }

/* Le total du pied. */
.tc-total { display: flex; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.tc-total-mot { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--tc-texte-3); }
.tc-total-somme { font-family: var(--tc-mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcv2 .tc-barre [data-tc-total-aide] { margin: -4px 0 10px; }
/* Le total du pied a l'interligne « normal » de la maquette : 25 px, pas 29 (Client-03, 04). */
.tcv2 .tc-barre > .tc-total, .tcv2 .tc-barre > .tc-total .tc-total-mot { line-height: normal; }

/* ═══ QUI (Client-04) ════════════════════════════════════════════════ */

.tcv2 .tc-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11px; }
.tcv2 .tc-grille > * { min-width: 0; }
.tcv2 .tc-grille .tc-large { grid-column: 1 / -1; }
/* Client-04 : trois champs l'un sous l'autre (« Prenom et nom », e-mail, telephone). */
.tcv2 .tc-grille.est-trois { grid-template-columns: minmax( 0, 1fr ); }
.tc-champ { margin-bottom: 14px; }
.tc-label { display: block; font-size: 12.5px; line-height: 15px; font-weight: 500; color: var(--tc-texte-3); margin-bottom: 7px; }
.tc-label .tc-aide { display: inline; margin: 0; font-weight: 400; }
.tc-input {
	width: 100%; height: 52px; min-height: 52px; border: 1px solid var(--tc-trait-champ);
	border-radius: 13px; padding: 0 15px; font: inherit; font-size: 16px;
	background: var(--tc-surface); color: var(--tc-encre);
}
textarea.tc-input { height: auto; min-height: 88px; padding: 13px 15px; line-height: 22px; resize: vertical; }
.tcv2 .tc-input.est-mono { font-family: var(--tc-mono); }
.tc-input:focus { outline: 0; border-color: var(--tc-encre); border-width: 1.5px; }
/* L'anneau de 2 px du reste du tunnel s'y pose aussi (audit du 23/09). */
.tcv2 .tc-input:focus-visible { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
.tc-input[aria-invalid="true"] { border-color: var(--tc-complet); border-width: 1.5px; }
.tc-aide { font-size: 12px; line-height: 17px; color: var(--tc-texte-3); margin-top: 8px; }
.tc-erreur {
	display: flex; align-items: center; gap: 7px;
	font-size: 12.5px; color: var(--tc-complet-t); margin-top: 7px;
}

/* Le releve : ce qu'on facture, ligne par ligne (Client-05, et l'ecran QUI
   depuis le 24/09). Sommes en chasse fixe, chiffres tabulaires : elles
   s'alignent, c'est la seule facon de relire une addition d'un coup d'oeil. */
.tcv2 .tc-releve {
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px;
	padding: 15px 16px; margin: 6px 0 20px;
}
/* Client-05 : la carte est a 20 px sous l'en-tete, comme la maquette (le corps en pose 22). */
.tcv2 .tc-corps > .tc-releve:first-child { margin-top: -2px; }
.tcv2 .tc-releve-tete { display: flex; flex-direction: column; gap: 1px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--tc-trait-fin); }
.tcv2 .tc-releve-tete .tc-recap-nom { font-size: 14.5px; line-height: 20px; font-weight: 600; margin: 0; }
.tcv2 .tc-releve-tete .tc-recap-quand { font-family: var(--tc-mono); font-size: 12.5px; color: var(--tc-texte-3); }
.tcv2 .tc-releve .tc-lignes { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
.tcv2 .tc-releve .tc-ligne { padding: 0; border: 0; margin-bottom: 8px; }
.tcv2 .tc-releve .tc-ligne:last-child { margin-bottom: 0; }
.tcv2 .tc-releve .tc-ligne-quoi { font-size: 13.5px; line-height: 16px; color: var(--tc-texte-3); }
/* Rangees de 18 px + 8 comme la maquette (controle 3, Client-05 §1) : interligne « normal ». */
.tcv2 .tc-releve .tc-ligne,
.tcv2 .tc-releve .tc-ligne > *,
.tcv2 .tc-releve > .tc-total,
.tcv2 .tc-releve > .tc-total > * { line-height: normal; }
.tcv2 .tc-releve .tc-ligne { align-items: baseline; }
.tcv2 .tc-releve .tc-ligne-combien { font-size: 13.5px; }
.tcv2 .tc-releve > .tc-total {
	margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--tc-trait-fin);
}
.tcv2 .tc-releve > .tc-total .tc-total-mot { font-size: 14.5px; font-weight: 600; color: var(--tc-encre); }
.tcv2 .tc-releve > .tc-total .tc-total-somme { font-size: 18px; }
.tcv2 .tc-releve > .tc-total + .tc-total { margin-top: 6px; padding-top: 0; border-top: 0; }
.tcv2 .tc-releve > .tc-total + .tc-total .tc-total-mot { font-size: 13px; font-weight: 400; color: var(--tc-texte-3); }
.tcv2 .tc-releve > .tc-total + .tc-total .tc-total-somme { font-size: 14px; }
.tcv2 .tc-releve .tc-acompte {
	background: var(--tc-rempli); border: 0; border-radius: 11px;
	padding: 13px 14px; margin: 14px 0 0;
}
.tcv2 .tc-releve .tc-acompte .tc-total { margin: 0; padding: 0; border: 0; }
.tcv2 .tc-releve .tc-acompte .tc-total + .tc-total { margin-top: 4px; }
.tcv2 .tc-releve .tc-acompte .tc-total:first-child .tc-total-mot { font-size: 13px; font-weight: 600; color: var(--tc-encre); }
.tcv2 .tc-releve .tc-acompte .tc-total:first-child .tc-total-somme { font-size: 15px; }
.tcv2 .tc-releve .tc-acompte .tc-total + .tc-total .tc-total-mot,
.tcv2 .tc-releve .tc-acompte .tc-total + .tc-total .tc-total-somme { font-size: 12px; color: var(--tc-texte-3); }
.tcv2 .tc-releve > .tc-aide { margin-top: 10px; }
.tcv2 .tc-releve .tc-avec { margin: 10px 0 0; font-size: 12.5px; }

/* Les lignes hors releve (l'espace client). */
.tcv2 .tc-lignes {
	border: 1px solid var(--tc-trait);
	border-radius: var(--tc-r);
	padding: 4px 16px;
	margin-bottom: 16px;
	background: var(--tc-surface);
}
.tcv2 .tc-ligne {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-block: 11px;
	border-bottom: 1px solid var(--tc-trait-fin);
}
.tcv2 .tc-ligne:last-child { border-bottom: 0; }
.tcv2 .tc-ligne-quoi { flex: 1; font-size: 14px; line-height: 20px; min-width: 0; overflow-wrap: anywhere; }
.tcv2 .tc-ligne-combien {
	font-family: var(--tc-mono);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tcv2 .tc-ligne-detail {
	display: block;
	font-size: 13px;
	line-height: 18px;
	color: var(--tc-texte-2);
	font-variant-numeric: tabular-nums;
}
.tcv2 .tc-ligne-combien[data-tc-compris] { font-family: inherit; color: var(--tc-texte-2); }
.tcv2 .tc-acompte { border-top: 1px solid var(--tc-trait-fin); padding-top: 10px; margin-bottom: 4px; }
.tcv2 .tc-acompte .tc-total-somme { font-size: 16px; }
.tcv2 .tc-avec { font-size: 14px; line-height: 20px; color: var(--tc-texte-2); margin: -8px 0 16px; }
.tcv2 .tc-ligne > .tc-ligne-combien:first-child {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none; align-self: flex-start; width: 22px; height: 22px; border-radius: 999px;
	background: var(--tc-encre); color: var(--tc-fond); font-size: 11px;
}

/* ═══ REGLER (Client-05) ═════════════════════════════════════════════ */

.tcv2 .tc-choix { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.tcv2 .tc-choix legend { padding: 0; margin-bottom: 4px; }
.tcv2 .tc-choix-somme { margin-bottom: 22px; }
.tcv2 .tc-choix-somme > legend.tc-q { margin: 0 0 12px; }
.tcv2 .tc-caisse-dit { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 18px; }
.tcv2 .tc-caisse-dit .tc-i { flex-shrink: 0; margin-top: 1px; color: var(--tc-icone); }

/* ═══ FAIT (Client-06) ═══════════════════════════════════════════════ */

.tcv2 .tc-page.est-fait .tc-corps { padding-top: 36px; }
.tcv2 .tc-page.est-fait .tc-etapes {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% );
}
.tcv2 .tc-fait-coche {
	width: 56px; height: 56px; border-radius: 999px; background: var(--tc-libre-d); color: var(--tc-libre);
	display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.tcv2 .tc-fait-titre { font-family: var(--tc-titres); font-size: 28px; line-height: 33px; font-weight: 600; letter-spacing: -.024em; margin-bottom: 8px; }
.tcv2 .tc-fait-texte { font-size: 14.5px; line-height: 21px; color: var(--tc-texte-3); margin-bottom: 22px; }
.tcv2 .tc-billet {
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 16px;
	overflow: hidden; margin-bottom: 20px;
}
.tcv2 .tc-billet-corps { padding: 16px 17px; border-bottom: 1px solid var(--tc-trait-fin); }
.tcv2 .tc-billet-nom { font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -.008em; margin-bottom: 2px; }
.tcv2 .tc-billet-ligne { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13.5px; line-height: 19px; }
.tcv2 .tc-billet-ligne .tc-i { color: var(--tc-texte-3); flex-shrink: 0; }
.tcv2 .tc-billet-pied { display: flex; align-items: center; gap: 12px; padding: 13px 17px; background: var(--tc-gris-carte); }
.tcv2 .tc-billet-pied > span:first-child { flex: 1; font-size: 12.5px; color: var(--tc-texte-3); }
.tcv2 .tc-billet-ref { font-family: var(--tc-mono); font-size: 14px; font-weight: 500; }
.tcv2 .tc-suite-titre {
	font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--tc-texte-3); margin-bottom: 13px;
}
.tcv2 .tc-suite { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: tc-suite; }
.tcv2 .tc-suite li { display: flex; gap: 13px; margin: 0 0 14px; counter-increment: tc-suite; }
.tcv2 .tc-suite li::before {
	content: counter( tc-suite ); width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
	background: var(--tc-encre); color: var(--tc-fond); font-family: var(--tc-mono); font-size: 11px;
	display: flex; align-items: center; justify-content: center;
}
.tcv2 .tc-suite li > p { margin: 1px 0 0; font-size: 13.5px; line-height: 20px; color: var(--tc-encre); }
.tcv2 .tc-suite li > p.tc-erreur { display: block; color: var(--tc-complet-t); font-weight: 500; }
.tcv2 .tc-suite li > p strong { font-weight: 600; }

/* ═══ LES ECHECS (Client-07, Client-12) ══════════════════════════════ */

.tcv2 .tc-alerte {
	display: flex; gap: 13px; background: var(--tc-complet-d); color: var(--tc-complet-t);
	border-radius: 14px; padding: 16px 17px; margin-bottom: 24px;
}
.tcv2 .tc-alerte > .tc-i { flex-shrink: 0; margin-top: 1px; }
.tcv2 .tc-alerte-titre { font-size: 14.5px; line-height: 20px; font-weight: 600; margin-bottom: 4px; }
.tcv2 .tc-alerte-texte { font-size: 13px; line-height: 19px; color: var(--tc-complet-t2); }
.tcv2 .tc-alerte + .tc-q { margin-top: 0; }
.tcv2 .tc-alerte + .tc-q.est-second { margin-top: 0; }
.tcv2 .tc-geste {
	display: flex; align-items: center; gap: 13px; width: 100%;
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px;
	padding: 15px 16px; margin-bottom: 9px; color: var(--tc-encre);
}
.tcv2 .tc-geste.est-premier { border: 1.5px solid var(--tc-encre); padding: 14.5px 15.5px; }
.tcv2 .tc-geste:hover { border-color: var(--tc-encre); }
.tcv2 .tc-geste > .tc-i { flex-shrink: 0; }
.tcv2 .tc-geste > .tc-i:last-child { color: var(--tc-icone); }
.tcv2 .tc-geste-corps { flex: 1; min-width: 0; }
.tcv2 .tc-geste-nom { display: block; font-size: 14.5px; line-height: 19px; font-weight: 600; }
.tcv2 .tc-geste-aide { display: block; font-size: 12.5px; line-height: 17px; color: var(--tc-texte-3); margin-top: 3px; }
/* Client-12 : « Si rien ne marche, appelez-nous… » — l'encadre gris du bas. */
.tcv2 .tc-refus-aide {
	display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 14px 16px;
	background: var(--tc-gris-carte); border: 1px solid var(--tc-trait-doux); border-radius: 14px;
	font-size: 12.5px; line-height: 18px; color: var(--tc-texte-3);
}
.tcv2 .tc-refus-aide > .tc-i { flex-shrink: 0; margin-top: 2px; color: var(--tc-icone); }
.tcv2 .tc-refus-aide a { color: var(--tc-encre); overflow-wrap: anywhere; }

/* ═══ L'ATTENTE (Client-13) — l'ecran de TOPCAL_Attente_Ecran, habille ═ */

/* Le titre et le depart sont dans l'en-tete : le recapitulatif de l'ecran
   d'attente les redirait. */
.tcv2 .tc-attente-ecran > .tc-recap:first-child { display: none; }
.tcv2 .tc-attente-ecran > .tc-titre {
	font-family: var(--tc-titres); font-size: 24px; line-height: 30px; font-weight: 600;
	letter-spacing: -.022em; text-transform: none; color: var(--tc-encre); margin: 0 0 9px;
}
.tcv2 .tc-attente-ecran > .tc-aide { font-size: 14px; line-height: 21px; margin: 0 0 22px; }
.tcv2 .tc-attente-ecran form > .tc-champ { margin-bottom: 16px; }
.tcv2 .tc-attente-ecran form > .tc-champ .tc-input { height: 52px; border-radius: 13px; padding: 0 15px; font-size: 16px; }
.tcv2 .tc-attente-ecran form > .tc-champ .tc-input::placeholder { color: var(--tc-texte-3); opacity: .8; }
/* Les pastilles « 1 / 2 / 3 / 4+ » : une rangee, larges, chiffre en mono. */
.tcv2 .tc-attente-ecran .tc-att-places:has( > label > input[type="radio"] ) { flex-wrap: nowrap; gap: 8px; }
.tcv2 .tc-attente-ecran .tc-att-places > legend.tc-label { margin-bottom: 9px; }
.tcv2 .tc-attente-ecran .tc-att-places > label:has( > input[type="radio"] ) {
	flex: 1 1 0; min-width: 0; height: 50px; min-height: 50px; padding: 0; border-radius: 12px;
	border-color: var(--tc-trait-champ); background: transparent; color: var(--tc-texte-3);
	font-family: var(--tc-mono); font-size: 16px; line-height: 20px; font-weight: 400;
}
.tcv2 .tc-attente-ecran .tc-att-places > label:has( > input[type="radio"]:checked ) {
	background: var(--tc-marque); border-color: var(--tc-marque); color: var(--tc-sur-marque); font-weight: 500;
}
.tcv2 .tc-attente-ecran .tc-att-places-aide { margin: 9px 0 22px; }
/* La carte « Comment ça se passera ». */
.tcv2 .tc-att-carte {
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 16px; padding: 17px 18px;
}
.tcv2 .tc-att-carte-titre {
	margin: 0 0 13px; font-size: 11px; line-height: 14px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; color: var(--tc-texte-3);
}
.tcv2 .tc-att-point { display: flex; gap: 12px; margin: 0 0 12px; }
.tcv2 .tc-att-point:last-child { margin-bottom: 0; }
.tcv2 .tc-att-num {
	width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
	display: flex; align-items: center; justify-content: center;
	background: var(--tc-marque); color: var(--tc-sur-marque); font-family: var(--tc-mono); font-size: 10px; line-height: 1;
}
.tcv2 .tc-att-quoi { flex: 1; min-width: 0; font-size: 13px; line-height: 19px; color: var(--tc-encre); }
.tcv2 .tc-att-quoi strong { font-weight: 600; }
/* Le pied fixe : la barre du tunnel, bord a bord du corps (qui a 20 px de
   marge et 24 px en bas). */
.tcv2 .tc-attente-ecran .tc-att-pied { margin: 22px -20px -24px; }
.tcv2 .tc-attente-ecran .tc-att-pied > .tc-b { width: 100%; height: 52px; border-radius: 13px; font-size: 15.5px; }
.tcv2 .tc-attente-ecran .tc-att-pied > .tc-barre-note { max-width: 266px; margin-left: auto; margin-right: auto; }

/* ═══ L'ESPACE CLIENT ET LES AUTRES ECRANS — composants partages ════ */

.tc-vide {
	border: 1px dashed var(--tc-trait); border-radius: var(--tc-r);
	padding: 32px 20px; text-align: center; background: var(--tc-rempli);
}
.tc-vide-titre { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.tc-vide-texte { font-size: 13px; line-height: 19px; color: var(--tc-texte-3); }
.tcv2 .tc-vide .tc-b { margin-top: 16px; }

/* Les titres de section de l'espace et de la vue liste : un seul niveau. */
.tcv2 .tc-titre {
	margin: 28px 0 12px;
	font-size: 11px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tc-texte-3);
}
.tcv2 .tc-corps > .tc-titre:first-child { margin-top: 0; }

.tcv2 .tc-recap {
	border: 1px solid var(--tc-trait);
	border-radius: var(--tc-r);
	padding: 14px 16px;
	margin-bottom: 20px;
	background: var(--tc-surface);
}
.tcv2 .tc-recap-nom { font-weight: 600; margin-bottom: 2px; }
.tcv2 .tc-recap-quand { font-size: 14px; color: var(--tc-texte-2); }

/* Le resume d'un envoi refuse : il prend le focus, chaque erreur est un lien
   vers son champ, et la cible de chaque lien fait 44 px. */
.tcv2 .tc-erreurs {
	border: 1.5px solid var(--tc-complet);
	border-radius: var(--tc-r);
	background: var(--tc-complet-d);
	padding: 12px 16px;
	margin: 16px 20px 0;
}
.tcv2 .tc-erreurs-titre { margin: 0; font-weight: 600; color: var(--tc-complet-t); font-size: 14.5px; }
.tcv2 .tc-erreurs ul { margin: 4px 0 0; padding-left: 18px; color: var(--tc-complet-t); list-style: disc; }
.tcv2 .tc-erreurs li { font-size: 13.5px; }
.tcv2 .tc-erreurs a {
	display: inline-flex; align-items: center; min-height: var(--tc-cible);
	color: var(--tc-complet-t); text-decoration: underline;
}

.tcv2 [data-tc-espace] { margin-top: 10px; }
.tcv2 .tc-barre [data-tc-espace] { margin-top: 4px; }
.tcv2 .tc-barre .tc-fait-pied + [data-tc-espace] { margin: -2px 0 -10px; }

/* Les pastilles a cocher (le nombre de places de l'attente, l'espace). */
.tcv2 .tc-choix:has( > label > input[type="radio"] ) { display: flex; flex-wrap: wrap; gap: 8px; }
.tcv2 .tc-choix:has( > label > input[type="radio"] ) > legend { width: 100%; }
.tcv2 .tc-choix > label:has( > input[type="radio"] ) {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 0;
	min-height: var(--tc-cible); padding: 0 16px;
	border: 1px solid var(--tc-trait); border-radius: 999px; background: var(--tc-surface);
	font-size: 13.5px; line-height: 18px; font-weight: 500; cursor: pointer;
	/* ⚠ Seul le liseré du survol garde sa transition : un fond qui glisse
	   pendant que le texte change d'un coup ecrivait blanc sur blanc. */
	transition: border-color .14s;
}
.tcv2 .tc-choix > label > input[type="radio"] {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
	opacity: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.tcv2 .tc-choix > label:has( > input[type="radio"] ):hover { border-color: var(--tc-encre); }
.tcv2 .tc-choix > label:has( > input[type="radio"]:checked ) {
	background: var(--tc-marque); border-color: var(--tc-marque); color: var(--tc-sur-marque); font-weight: 600;
}
.tcv2 .tc-choix > label:has( > input[type="radio"]:focus-visible ) { outline: 2px solid var(--tc-encre); outline-offset: 2px; }

/* Une case ou un rond hors carte : la ligne entiere fait 44 px. */
.tcv2 .tc-opt label,
.tcv2 label:not( .tc-option ):not( .tc-creneau ):has(> input[type="checkbox"]),
.tcv2 label:not( .tc-option ):not( .tc-creneau ):not( .tc-sp-q ):has(> input[type="radio"]) {
	display: flex; align-items: center; gap: 10px;
	min-height: var(--tc-cible, 44px); cursor: pointer;
}

.tc-pied {
	position: static;
	background: var(--tc-fond); border-top: 1px solid var(--tc-trait);
	padding: 14px 0 calc( 14px + env( safe-area-inset-bottom, 0px ) );
	margin-top: 22px;
}
.tcv2 .tc-fil { font-size: 21px; line-height: 27px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 18px; }

/* Le mois (Front-02) et la liste (Front-04) : voir « LE SITE PUBLIC » en fin de feuille. */

/* Le formulaire du lien neuf, sous la phrase qui dit pourquoi. */
.tcv2 .tc-renvoi {
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--tc-trait);
	border-radius: var(--tc-r);
	background: var(--tc-surface);
}
.tcv2 .tc-renvoi-titre { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: inherit; margin: 0 0 12px; }

.tcv2 .tc-vues {
	display: inline-flex; background: var(--tc-sable); border-radius: 11px; padding: 3px; max-width: 100%; overflow-x: auto;
}
.tcv2 .tc-vue {
	display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 8px;
	font-size: 13.5px; font-weight: 500; color: var(--tc-texte-2); white-space: nowrap;
}
.tcv2 .tc-vue[aria-current="page"] { background: var(--tc-surface); color: var(--tc-encre); font-weight: 600; box-shadow: 0 1px 2px rgba( 23, 19, 16, .1 ); }


/* ═══ LE GRAND ECRAN (Front-01 a 03) ═════════════════════════════════
   Deux colonnes : le contenu, et la carte « Votre reservation » a droite.
   Le formulaire s'efface de la grille (`display: contents`) : ses enfants
   s'y rangent, et il reste le formulaire qui envoie. */

@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-site {
		display: flex; align-items: center; gap: 36px; height: 74px; padding: 0 48px;
		border-bottom: 1px solid var(--tc-trait-doux);
	}
	.tcv2 .tc-site-nom { font-family: var(--tc-titres); font-size: 19px; font-weight: 600; letter-spacing: -.018em; }
	.tcv2 .tc-site-vide { flex: 1; }
	.tcv2 .tc-site-lien { font-size: 14px; color: var(--tc-texte-2); }
	.tcv2 .tc-site-lien:hover { color: var(--tc-encre); }
	.tcv2 a.tc-site-b {
		display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 11px;
		background: var(--tc-ac); color: var(--tc-sur-ac); font-size: 14.5px; font-weight: 600;
		box-shadow: var( --tc-ac-filet, none );
	}
	.tcv2 .tc-lieu { display: none; }

	.tcv2 .tc-cadre {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 690px ) 350px minmax( 0, 1fr );
		column-gap: 40px;
		align-content: start;
	}
	.tcv2 .tc-cadre > .tc-site { grid-column: 1 / -1; grid-row: 1; }
	.tcv2 .tc-cadre > .tc-tete { grid-column: 2; grid-row: 2; }
	.tcv2 .tc-cadre > .tc-erreurs { grid-column: 2; grid-row: 3; margin: 0 0 8px; }
	.tcv2 .tc-cadre > .tc-page { display: contents; }
	.tcv2 .tc-cadre > .tc-page > .tc-corps { grid-column: 2; grid-row: 4; padding: 26px 0 48px; }
	.tcv2 .tc-cadre > .tc-page > .tc-barre {
		grid-column: 3; grid-row: 2 / span 3; align-self: start;
		position: sticky; top: 24px; margin-top: 34px;
		border: 1px solid var(--tc-trait); border-radius: 18px; background: var(--tc-surface);
		padding: 22px; box-shadow: 0 1px 2px rgba( 23, 19, 16, .04 ), 0 10px 28px rgba( 23, 19, 16, .06 );
	}
	.tcv2 .tc-cadre > .tc-page:not( :has( > .tc-barre ) ) > .tc-corps { grid-column: 2 / 4; }
	.tcv2 .tc-cadre > .tc-page > .tc-pied-lien { grid-column: 2 / 4; grid-row: 5; border: 0; text-align: left; padding: 0 0 40px; }
	.tcv2 .tc-cadre > .tc-page.est-fait > .tc-corps { grid-column: 2; grid-row: 2 / span 3; }

	.tcv2 .tc-tete { border: 0; background: none; padding-top: 34px; }
	.tcv2 .tc-etapes { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); }
	.tcv2 .tc-tete-ligne { display: block; padding: 0; }
	.tcv2 .tc-tete-ligne > .tc-tete-txt:first-child { padding-left: 0; }
	.tcv2 .tc-retour {
		width: auto; height: auto; min-height: 28px; display: inline-flex; gap: 8px; border-radius: 6px;
		font-size: 13.5px; color: var(--tc-texte-3); margin-bottom: 14px;
	}
	.tcv2 .tc-retour:hover { background: none; color: var(--tc-encre); }
	.tcv2 .tc-retour .tc-i { width: 15px; height: 15px; }
	.tcv2 .tc-retour-mot { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
	.tcv2 .tc-tete-titre { font-family: var(--tc-titres); font-size: 32px; line-height: 38px; letter-spacing: -.025em; margin-bottom: 8px; }
	.tcv2 .tc-tete-sous { font-size: 15px; line-height: 23px; color: var(--tc-texte-2); }
	.tcv2 .tc-tete-sous.est-mono { font-size: 14px; }

	.tcv2 .tc-barre .tc-resume { display: block; }
	.tcv2 .tc-resume-titre {
		font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em;
		text-transform: uppercase; color: var(--tc-texte-3); margin-bottom: 13px;
	}
	.tcv2 .tc-resume-ligne { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 17px; margin-bottom: 6px; }
	.tcv2 .tc-resume-ligne .tc-i { color: var(--tc-texte-3); flex-shrink: 0; }
	.tcv2 .tc-resume + * { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tc-trait-fin); }
	.tcv2 .tc-barre .tc-total-barre .tc-total-mot { font-size: 15px; font-weight: 600; color: var(--tc-encre); }
	.tcv2 .tc-barre .tc-total-barre .tc-total-somme { font-size: 21px; }
	.tcv2 .tc-barre .tc-barre-note { text-align: left; font-size: 12px; line-height: 17px; color: var(--tc-texte-2); }
	.tcv2 .tc-barre .tc-barre-note.est-coche { justify-content: flex-start; margin-top: 14px; }

	.tcv2 .tc-jours { width: auto; margin: 0 0 18px; padding: 0 0 2px; flex-wrap: wrap; overflow: visible; }
	.tcv2 .tc-creneaux { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tcv2 .tc-jour-titre { grid-column: 1 / -1; }
	.tcv2 .tc-options { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; }
	.tcv2 .tc-compteur { max-width: 360px; }
	/* Front-03 est conforme avec le compteur d'avant : on le garde tel quel. */
	.tcv2 .tc-compteur-champ { height: auto; }
	.tcv2 .tc-compteur-mot { line-height: 16px; }

	/* La vitrine, pleine largeur (Front-01). */
	.tcv2 .tc-cadre > .tc-page.est-vitrine > .tc-corps { grid-column: 1 / -1; grid-row: 2; padding: 40px 48px 0; }
	.tcv2 .tc-cadre > .tc-page.est-vitrine > .tc-pied-lien { display: none; }
	.tcv2 .tc-une { display: flex; align-items: flex-end; gap: 40px; margin-bottom: 28px; }
	.tcv2 .tc-une-txt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; flex: 1; }
	.tcv2 .tc-une-titre { font-family: var(--tc-titres); font-size: 38px; line-height: 44px; font-weight: 600; letter-spacing: -.026em; }
	.tcv2 .tc-une-texte { margin-top: 10px; font-size: 15.5px; line-height: 24px; color: var(--tc-texte-2); max-width: 540px; }
	.tcv2 .tc-une:not( .est-vue ) .tc-vues,
	.tcv2 .tc-une .tc-vues { display: inline-flex; flex-shrink: 0; }
	.tcv2 .tc-une.est-vue { justify-content: flex-end; }
	.tcv2 .tc-section.est-vitrine { display: none; }

	.tcv2 .tc-dalle {
		display: grid; grid-template-columns: minmax( 0, 1fr ) auto; column-gap: 24px; align-items: center;
		border-radius: 16px; padding: 20px 24px; margin-bottom: 26px;
	}
	.tcv2 .tc-dalle-eyebrow { grid-column: 1; margin-bottom: 6px; }
	.tcv2 .tc-dalle-corps { grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
	.tcv2 .tc-dalle h2 { font-size: 21px; line-height: 27px; letter-spacing: -.018em; }
	.tcv2 .tc-dalle-quand { margin: 0; gap: 14px; }
	.tcv2 .tc-dalle-quand .tc-dalle-heure { font-size: 16px; font-weight: 400; }
	.tcv2 .tc-dalle-dans,
	.tcv2 .tc-dalle-corps .tc-dalle-pied { font-size: 13.5px; }
	.tcv2 .tc-dalle-corps .tc-dalle-pied { margin: 0; padding: 0; border: 0; }
	.tcv2 .tc-dalle-quand:has( + .tc-dalle-pied ) .tc-dalle-dans::after { content: " ·"; }
	.tcv2 .tc-dalle .tc-b-clair { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: auto; height: 46px; padding: 0 24px; font-size: 15px; }

	.tcv2 .tc-catalogue { display: grid; grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); gap: 18px; }
	.tcv2 .tc-catalogue .tc-carte { flex-direction: column; align-items: stretch; gap: 0; padding: 20px; border-radius: 16px; }
	.tcv2 .tc-catalogue .tc-carte-image {
		display: flex; align-items: center; justify-content: center; height: 112px; border-radius: 11px;
		background: var(--tc-sable); color: var(--tc-sable-trait); margin-bottom: 16px; overflow: hidden;
	}
	.tcv2 .tc-carte-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.tcv2 .tc-catalogue .tc-carte-corps { flex: 1; align-items: stretch; }
	.tcv2 .tc-catalogue .tc-carte-nom { font-family: var(--tc-titres); font-size: 18px; line-height: 23px; letter-spacing: -.015em; margin-bottom: 7px; }
	.tcv2 .tc-catalogue .tc-carte-meta { display: none; }
	.tcv2 .tc-catalogue .tc-carte-desc { display: block; flex: 1; font-size: 13px; line-height: 17px; color: var(--tc-texte-3); }
	.tcv2 .tc-catalogue .tc-carte-bas { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tc-trait-fin); }
	.tcv2 .tc-catalogue .tc-etat { flex: 1; font-size: 12.5px; line-height: 16px; }
	.tcv2 .tc-catalogue .tc-carte-prix { display: block; font-family: var(--tc-mono); font-size: 14px; font-weight: 500; white-space: nowrap; }
	.tcv2 .tc-catalogue .tc-carte-fin { display: none; }

	/* Quatre colonnes comme la maquette (controle 3, Front-01 §1) : trois
	   engagements de ~250 px, chacun sur deux lignes, et la mention du
	   serveur toujours en 4e colonne — meme quand un engagement manque. */
	.tcv2 .tc-promesses {
		display: grid; grid-template-columns: minmax( 0, 254px ) minmax( 0, 246px ) minmax( 0, 253px ) minmax( 0, 1fr );
		align-items: center; gap: 12px 26px;
		margin-top: 26px; padding: 22px 0 40px; border-top: 1px solid var(--tc-trait-doux);
	}
	.tcv2 .tc-promesse { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 16px; color: var(--tc-texte-2); }
	.tcv2 .tc-promesse .tc-i { color: var(--tc-texte-3); flex-shrink: 0; }
	.tcv2 .tc-promesses-note { grid-column: 4; padding-left: 26px; font-size: 12.5px; line-height: 15px; color: var(--tc-texte-4); }

}

/* L'ecran QUI : le prenom et le nom cote a cote, le reste sur toute la largeur. */
.tcv2 .tc-grille > .tc-champ:nth-child( n + 3 ) { grid-column: 1 / -1; }


/* ═══ LE SITE PUBLIC — le mois (Front-02) et la liste (Front-04) ═════════
   Classes `tc-sp-*` (site public) et la case du mois `tc-mois-*`. Au
   telephone, la grille ne garde que le chiffre et la couleur (le mot est dans
   le nom du lien) ; au grand ecran, chaque case dit ses departs, son prix et
   son etat, et les departs du jour choisi tiennent la colonne de droite. */

.tcv2 {
	--tc-sp-bord: #E0D9CF;
	--tc-sp-tendu-bord: #E4D2AC;
	--tc-sp-tendu-fond: #FFFCF5;
	--tc-sp-ombre: rgba( 23, 19, 16, .1 );
}
@media ( prefers-color-scheme: dark ) {
	.tcv2:not( [data-tc-peau="claire"] ) {
		--tc-sp-bord: #3A404A;
		--tc-sp-tendu-bord: rgba( 178, 139, 16, .5 );
		--tc-sp-tendu-fond: rgba( 178, 139, 16, .08 );
		--tc-sp-ombre: rgba( 0, 0, 0, .4 );
	}
}

.tcv2 .tc-sp-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.tcv2 .tc-sp-h1 { font-family: var(--tc-titres); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.tcv2 .tc-sp-sous { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--tc-texte-2); }
.tcv2 .tc-sp-vide { flex: 1 1 0; }
.tcv2 .tc-sp-haut > .tc-vues,
.tcv2 .tc-sp-haut > .tc-sp-filtre { flex: 1 1 100%; }
.tcv2 .tc-sp-titres { flex: 1 1 100%; }

.tcv2 .tc-sp-fleches { display: flex; align-items: center; gap: 6px; }
.tcv2 .tc-sp-fleche {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 1px solid var(--tc-sp-bord); border-radius: 10px; color: var(--tc-encre);
}
.tcv2 a.tc-sp-fleche:hover { background: var(--tc-rempli); }
.tcv2 .tc-sp-fleche.est-eteinte { opacity: .35; }

/* Le filtre : un `<details>` qui s'ouvre en menu de liens. */
.tcv2 .tc-sp-filtre { position: relative; }
.tcv2 .tc-sp-filtre-choix {
	list-style: none; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 14px;
	border: 1px solid var(--tc-sp-bord); border-radius: 11px; font-size: 13.5px; line-height: normal; cursor: pointer;
}
.tcv2 .tc-sp-filtre-choix::-webkit-details-marker { display: none; }
.tcv2 .tc-sp-filtre-choix > span { flex: 1; }
.tcv2 .tc-sp-filtre-choix .tc-i { flex-shrink: 0; color: var(--tc-texte-3); }
.tcv2 .tc-sp-filtre[open] .tc-sp-filtre-choix .tc-i { transform: rotate( 180deg ); }
.tcv2 .tc-sp-filtre-liste {
	position: absolute; z-index: 5; right: 0; top: calc( 100% + 6px ); min-width: 100%; width: max-content; max-width: 320px;
	list-style: none; margin: 0; padding: 6px; background: var(--tc-surface); border: 1px solid var(--tc-trait);
	border-radius: 12px; box-shadow: 0 12px 32px -12px var(--tc-sp-ombre);
}
.tcv2 .tc-sp-filtre-i { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.tcv2 .tc-sp-filtre-i:hover { background: var(--tc-rempli); }
.tcv2 .tc-sp-filtre-i[aria-current] { font-weight: 600; }

/* La grille du mois. */
.tcv2 .tc-sp-semaine,
.tcv2 .tc-mois { display: grid; grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); gap: 4px; }
.tcv2 .tc-sp-semaine { margin-bottom: 6px; }
.tcv2 .tc-mois-entete { font-size: 11px; line-height: 15px; font-weight: 600; text-align: center; color: var(--tc-texte-3); }
.tcv2 .tc-sp-long { display: none; }
.tcv2 .tc-mois-case { display: flex; min-width: 0; }
.tcv2 .tc-mois-case > .tc-mois-jour { flex: 1; min-width: 0; }
.tcv2 .tc-mois-vide { min-height: 48px; }
.tcv2 .tc-mois-jour {
	display: flex; flex-direction: column; min-height: 48px; padding: 6px 7px;
	border: 1px solid var(--tc-trait); border-radius: 10px; background: var(--tc-surface); color: var(--tc-encre);
}
.tcv2 .tc-mois-num { font-family: var(--tc-mono); font-size: 13px; line-height: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tcv2 .tc-mois-espace { flex: 1 1 auto; }
.tcv2 .tc-mois-l1,
.tcv2 .tc-mois-l2 { display: none; }
.tcv2 .tc-mois-jour.est-tendu { border-color: var(--tc-sp-tendu-bord); background: var(--tc-sp-tendu-fond); }
.tcv2 .tc-mois-jour.est-tendu .tc-mois-num,
.tcv2 .tc-mois-jour.est-tendu .tc-mois-l1 { color: var(--tc-tendu-t); }
.tcv2 .tc-mois-jour.est-ferme,
.tcv2 .tc-mois-jour.est-passe,
.tcv2 .tc-mois-jour.est-muet,
.tcv2 .tc-mois-jour.est-complet { border-color: var(--tc-trait-doux); background: var(--tc-gris-carte); }
.tcv2 .tc-mois-jour.est-ferme .tc-mois-num,
.tcv2 .tc-mois-jour.est-passe .tc-mois-num,
.tcv2 .tc-mois-jour.est-muet .tc-mois-num,
.tcv2 .tc-mois-jour.est-ferme .tc-mois-l1 { color: var(--tc-icone); }
.tcv2 .tc-mois-jour.est-complet .tc-mois-l1 { color: var(--tc-complet-t); }
.tcv2 .tc-mois-jour.est-aujourdhui { border: 1.5px solid var(--tc-encre); }
.tcv2 .tc-mois-jour.est-aujourdhui .tc-mois-num,
.tcv2 .tc-mois-jour.est-aujourdhui .tc-mois-l1 { font-weight: 600; }
.tcv2 a.tc-mois-jour:hover { border-color: var(--tc-encre); }
.tcv2 a.tc-mois-jour.est-choisi:not( .est-aujourdhui ) { box-shadow: inset 0 0 0 1px var(--tc-encre); border-color: var(--tc-encre); }

.tcv2 .tc-sp-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; }
.tcv2 .tc-sp-legende-i { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: normal; color: var(--tc-texte-2); }
.tcv2 .tc-sp-legende-i i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--tc-trait); background: var(--tc-surface); }
.tcv2 .tc-sp-legende-i i.est-tendu { border-color: var(--tc-sp-tendu-bord); background: var(--tc-sp-tendu-fond); }
.tcv2 .tc-sp-legende-i i.est-ferme { border-color: var(--tc-trait-doux); background: var(--tc-gris-carte); }

/* La colonne du jour choisi. */
.tcv2 .tc-sp-cal-d { margin-top: 26px; }
.tcv2 .tc-sp-jour-d { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-texte-3); margin-bottom: 13px; }
.tcv2 .tc-sp-rien { font-size: 13.5px; color: var(--tc-texte-2); }
.tcv2 .tc-sp-dep {
	display: block; background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 16px;
	padding: 18px; margin-bottom: 11px; color: var(--tc-encre); line-height: normal;
}
.tcv2 a.tc-sp-dep:hover { border-color: var(--tc-texte-3); }
.tcv2 .tc-sp-dep.est-premier { border: 1.5px solid var(--tc-encre); }
.tcv2 .tc-sp-dep-haut { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.tcv2 .tc-sp-dep-heure { font-family: var(--tc-mono); font-size: 19px; font-weight: 500; }
.tcv2 .tc-sp-dep-fin { font-size: 12.5px; color: var(--tc-texte-3); }
.tcv2 .tc-sp-dep-prix { font-family: var(--tc-mono); font-size: 16px; font-weight: 500; }
.tcv2 .tc-sp-dep-nom { display: block; font-family: var(--tc-titres); font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; margin-bottom: 6px; }
.tcv2 .tc-sp-dep-qui { display: block; font-size: 12.5px; color: var(--tc-texte-3); }
.tcv2 .tc-sp-dep-pied { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--tc-trait-fin); }
.tcv2 .tc-sp-dep-reste { flex: 1; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.tcv2 .tc-sp-dep-reste i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.tcv2 .tc-sp-dep-reste.est-libre { color: var(--tc-libre-t); }
.tcv2 .tc-sp-dep-reste.est-tendu { color: var(--tc-tendu-t); }
.tcv2 .tc-sp-b {
	display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 9px;
	background: var(--tc-ac); color: var(--tc-sur-ac); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.tcv2 .tc-sp-dep.est-complet { background: var(--tc-gris-carte); border-color: var(--tc-trait-doux); padding: 16px 18px; opacity: .75; }
.tcv2 .tc-sp-dep.est-complet .tc-sp-dep-haut { margin-bottom: 7px; }
.tcv2 .tc-sp-dep.est-complet .tc-sp-dep-heure { font-size: 17px; color: var(--tc-icone); }
.tcv2 .tc-sp-dep.est-complet .tc-sp-dep-nom { font-family: var(--tc-police); font-size: 15px; letter-spacing: 0; color: var(--tc-texte-3); margin-bottom: 9px; }
.tcv2 .tc-sp-dep-plein { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.tcv2 .tc-sp-voisines { display: inline-flex; align-items: center; min-height: 28px; font-size: 12.5px; font-weight: 500; color: var(--tc-texte-2); }
.tcv2 .tc-sp-voisines:hover { color: var(--tc-encre); text-decoration: underline; }

/* Les pastilles d'etat (liste, carte pleine). */
.tcv2 .tc-sp-pastille {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; line-height: normal; font-weight: 600; white-space: nowrap;
}
.tcv2 .tc-sp-pastille i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.tcv2 .tc-sp-pastille.est-libre { color: var(--tc-libre-t); background: var(--tc-libre-d); }
.tcv2 .tc-sp-pastille.est-tendu { color: var(--tc-tendu-t); background: var(--tc-tendu-d); }
.tcv2 .tc-sp-pastille.est-complet { color: var(--tc-complet-t); background: var(--tc-complet-d); }

/* La liste des departs (Front-04). */
.tcv2 .tc-sp-liste { background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 16px; overflow: hidden; }
.tcv2 .tc-sp-jour-h { padding: 11px 16px; background: var(--tc-gris-carte); border-bottom: 1px solid var(--tc-trait-doux); }
.tcv2 .tc-sp-jour-h:not( :first-child ) { border-top: 1px solid var(--tc-trait-doux); }
.tcv2 .tc-sp-jour-titre { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tc-texte-3); }
.tcv2 .tc-sp-ligne {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px;
	border-bottom: 1px solid var(--tc-trait-fin); color: var(--tc-encre); line-height: normal;
}
.tcv2 .tc-sp-ligne:hover { background: var(--tc-gris-carte); }
.tcv2 .tc-sp-liste > .tc-sp-ligne:last-child { border-bottom: 0; }
.tcv2 .tc-sp-ligne-h { width: 64px; flex-shrink: 0; }
.tcv2 .tc-sp-ligne-heure { display: block; font-family: var(--tc-mono); font-size: 17px; font-weight: 500; }
.tcv2 .tc-sp-ligne-fin { display: block; font-size: 11.5px; color: var(--tc-texte-3); margin-top: 3px; }
.tcv2 .tc-sp-ligne-quoi { flex: 1 1 0; min-width: 0; }
.tcv2 .tc-sp-ligne-nom { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.008em; }
.tcv2 .tc-sp-ligne-qui { display: block; font-size: 12.5px; color: var(--tc-texte-3); margin-top: 4px; }
.tcv2 .tc-sp-ligne-etat { margin-left: 78px; flex: 1 1 auto; }
.tcv2 .tc-sp-ligne-prix { font-family: var(--tc-mono); font-size: 15px; font-weight: 500; text-align: right; }
.tcv2 .tc-sp-ligne-geste { display: flex; justify-content: flex-end; }
.tcv2 .tc-sp-ligne .tc-sp-b { height: 40px; padding: 0 18px; border-radius: 10px; }
.tcv2 .tc-sp-b-creux {
	display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px;
	border: 1px solid var(--tc-trait-champ); color: var(--tc-texte-2); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.tcv2 .tc-sp-ferme { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--tc-gris-carte); border-top: 1px solid var(--tc-trait-doux); border-bottom: 1px solid var(--tc-trait-doux); }
.tcv2 .tc-sp-liste > .tc-sp-ferme:last-child { border-bottom: 0; }
.tcv2 .tc-sp-liste > .tc-sp-ligne + .tc-sp-ferme { border-top: 0; }
.tcv2 .tc-sp-ferme .tc-i { flex-shrink: 0; color: var(--tc-icone); }
.tcv2 .tc-sp-ferme-dit { flex: 1; font-size: 13.5px; line-height: 19px; color: var(--tc-texte-2); }
.tcv2 .tc-sp-ferme-dit strong { font-weight: 600; color: var(--tc-encre); }
.tcv2 .tc-sp-liste-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 18px; padding-bottom: 28px; }
.tcv2 .tc-sp-suite {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 11px;
	border: 1px solid var(--tc-trait-champ); font-size: 14px; font-weight: 500; color: var(--tc-encre);
}
.tcv2 .tc-sp-suite:hover { background: var(--tc-rempli); }
.tcv2 .tc-sp-note { margin-left: auto; font-size: 12.5px; line-height: 17px; color: var(--tc-texte-4); }

@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-site-lien.est-nav { color: var(--tc-texte-2); }
	.tcv2 .tc-cadre:has( > .tc-page.est-sp ) > .tc-tete { display: none; }
	.tcv2 .tc-cadre > .tc-page.est-sp > .tc-corps { grid-row: 2; padding: 32px 48px 40px; }
	.tcv2 .tc-cadre > .tc-page.est-sp-liste > .tc-corps { padding-top: 34px; }
	.tcv2 .tc-page.est-sp-liste > .tc-corps > * { width: 1020px; max-width: 100%; margin-inline: auto; }

	.tcv2 .tc-sp-haut { flex-wrap: nowrap; gap: 16px; margin-bottom: 22px; }
	.tcv2 .tc-sp-haut > .tc-vues,
	.tcv2 .tc-sp-haut > .tc-sp-filtre,
	.tcv2 .tc-sp-titres { flex: 0 1 auto; }
	.tcv2 .tc-sp-haut .tc-vue { white-space: normal; line-height: normal; }
	.tcv2 .tc-sp-h1 { font-size: 30px; line-height: 36px; letter-spacing: -.024em; }
	.tcv2 .tc-sp-fleche { width: 38px; height: 38px; }
	.tcv2 .tc-sp-filtre { min-width: 0; }
	.tcv2 .tc-sp-filtre-choix { min-height: 42px; height: 42px; }

	/* Front-04 : le titre et sa phrase, alignes par le bas. */
	.tcv2 .est-sp-liste .tc-sp-haut { align-items: flex-end; gap: 30px; margin-bottom: 24px; }
	.tcv2 .est-sp-liste .tc-sp-haut > .tc-vues,
	.tcv2 .est-sp-liste .tc-sp-haut > .tc-sp-filtre { flex-shrink: 0; }
	.tcv2 .est-sp-liste .tc-vue { padding: 0 15px; white-space: nowrap; }
	.tcv2 .tc-sp-h1.est-liste { font-size: 34px; line-height: 40px; letter-spacing: -.025em; margin-bottom: 9px; }
	.tcv2 .tc-sp-sous { margin-top: 0; font-size: 15px; line-height: 23px; }

	.tcv2 .tc-sp-cal { display: flex; gap: 36px; }
	.tcv2 .tc-sp-cal-g { flex: 1 1 auto; min-width: 0; }
	.tcv2 .tc-sp-cal-d { width: 360px; flex-shrink: 0; margin-top: 0; }

	.tcv2 .tc-sp-semaine,
	.tcv2 .tc-mois { gap: 9px; }
	.tcv2 .tc-sp-semaine { margin-bottom: 10px; }
	.tcv2 .tc-mois-entete { font-size: 12px; line-height: normal; }
	.tcv2 .tc-sp-long { display: inline; }
	.tcv2 .tc-sp-court { display: none; }
	.tcv2 .tc-mois-jour { height: 88px; min-height: 88px; padding: 9px 10px; overflow: hidden; }
	.tcv2 .tc-mois-vide { min-height: 88px; }
	.tcv2 .tc-mois-l1 { display: block; font-size: 11px; line-height: 15px; font-weight: 500; }
	.tcv2 .tc-mois-l2 { display: block; font-size: 10.5px; line-height: 14px; color: var(--tc-texte-4); }
	.tcv2 .tc-mois-l2.est-tendu { color: var(--tc-tendu-t); font-weight: 500; }
	.tcv2 .tc-sp-legende { margin-top: 18px; }

	.tcv2 .tc-sp-jour-h { padding: 11px 20px; }
	.tcv2 .tc-sp-ligne { flex-wrap: nowrap; gap: 20px; padding: 16px 20px; }
	.tcv2 .tc-sp-ligne-h { width: 92px; }
	.tcv2 .tc-sp-ligne-etat { margin-left: 0; width: 150px; flex: 0 0 150px; }
	.tcv2 .tc-sp-ligne-prix { width: 80px; flex-shrink: 0; }
	.tcv2 .tc-sp-ligne-geste { width: 112px; flex-shrink: 0; }
	.tcv2 .tc-sp-ferme { padding: 14px 20px; }
	.tcv2 .tc-sp-liste-pied { padding-bottom: 0; }
}

/* La dalle : le compte long au telephone, court au grand ecran (Front-01). */
.tcv2 .tc-dalle-reste-c { display: none; }
@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-dalle-reste-l { display: none; }
	.tcv2 .tc-dalle-reste-c { display: inline; }
	.tcv2 .tc-dalle { position: relative; padding-left: 46px; column-gap: 14px; }
	.tcv2 .tc-dalle-eyebrow { gap: 0; }
	.tcv2 .tc-dalle-eyebrow i { position: absolute; left: 24px; top: 50%; width: 8px; height: 8px; margin-top: -4px; }
	.tcv2 .tc-dalle-quand .tc-dalle-heure { text-transform: lowercase; }
}
@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-dalle h2 { line-height: 25px; }
	.tcv2 .tc-dalle-quand:has( + .tc-dalle-pied ) { margin-right: -10px; }
}

/* ═══ FRONT-03 — reserver en une page au grand ecran ═══════════════════
   L'ecran QUI porte aussi le depart, les places et les options
   (`TOPCAL_Tunnel::sp_choix()`), masques au telephone ; le releve des prix
   passe dans la carte de droite. */
.tcv2 .tc-sp-choix,
.tcv2 .tc-sp-retour,
.tcv2 .tc-sp-desc,
.tcv2 .tc-sp-tel-aide,
.tcv2 .tc-sp-releve { display: none; }
.tcv2 .tc-sp-remarque { margin-top: 14px; }
.tcv2 .tc-sp-remarque > summary {
	display: inline-flex; align-items: center; min-height: 32px; cursor: pointer;
	font-size: 13px; font-weight: 500; color: var(--tc-texte-3); list-style: none;
}
.tcv2 .tc-sp-remarque > summary::-webkit-details-marker { display: none; }
.tcv2 .tc-sp-remarque > summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate( 45deg ) translateY( -2px ); }
.tcv2 .tc-sp-remarque[open] > summary::after { transform: rotate( -135deg ); }
.tcv2 .tc-sp-remarque .tc-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); }

@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-tete.est-sp-large .tc-retour,
	.tcv2 .tc-tete.est-sp-large .tc-tete-sous { display: none; }
	.tcv2 .tc-sp-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13.5px; color: var(--tc-texte-3); margin: -4px 0 10px; } /* cible de 24 px, texte a la place de la maquette */
	.tcv2 .tc-sp-retour:hover { color: var(--tc-encre); }
	.tcv2 .tc-sp-desc { display: block; max-width: 560px; font-size: 15px; line-height: 23px; color: var(--tc-texte-2); }
	.tcv2 .tc-page:has( .tc-sp-choix ) > .tc-corps { padding-top: 26px; }

	.tcv2 .tc-sp-choix { display: block; }
	.tcv2 .tc-sp-bloc { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
	.tcv2 .tc-sp-sec,
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-q.est-sp-sec {
		display: block; padding: 0; margin: 0 0 12px; font-family: var(--tc-police);
		font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-texte-3);
	}
	.tcv2 .tc-sp-quand { display: flex; gap: 10px; }
	.tcv2 .tc-sp-q {
		position: relative; flex: 1 1 0; min-width: 0; display: block; cursor: pointer; line-height: normal;
		background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px; padding: 14px 16px;
	}
	.tcv2 .tc-sp-q:has( :checked ) { border: 1.5px solid var(--tc-encre); padding: 13.5px 15.5px; }
	.tcv2 .tc-sp-q:has( :focus-visible ) { outline: 2px solid var(--tc-encre); outline-offset: 2px; }
	.tcv2 .tc-sp-q-choix { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
	.tcv2 .tc-sp-q-jour { display: block; font-size: 12.5px; color: var(--tc-texte-3); margin-bottom: 4px; }
	.tcv2 .tc-sp-q-heure { display: block; font-family: var(--tc-mono); font-size: 18px; font-weight: 500; margin-bottom: 8px; }
	.tcv2 .tc-sp-q-reste { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
	.tcv2 .tc-sp-q-reste i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
	.tcv2 .tc-sp-q-reste.est-libre { color: var(--tc-libre-t); }
	.tcv2 .tc-sp-q-reste.est-tendu { color: var(--tc-tendu-t); }
	.tcv2 .tc-sp-q-autre {
		width: 90px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
		background: var(--tc-gris-carte); border: 1px dashed var(--tc-trait-champ); border-radius: 14px; color: var(--tc-texte-2);
	}
	.tcv2 .tc-sp-q-autre span { font-size: 12px; font-weight: 500; line-height: normal; }
	.tcv2 .tc-sp-q-autre:hover { color: var(--tc-encre); border-color: var(--tc-texte-3); }

	.tcv2 .tc-sp-combien { display: flex; align-items: center; gap: 16px; }
	.tcv2 .tc-sp-compteur { display: flex; align-items: center; background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px; padding: 6px; }
	.tcv2 .tc-sp-compteur-b {
		display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
		border: 0; border-radius: 10px; cursor: pointer; background: var(--tc-rempli); color: var(--tc-encre);
	}
	.tcv2 .tc-sp-compteur-b.est-plus { background: var(--tc-ac); color: var(--tc-sur-ac); }
	.tcv2 .tc-sp-compteur-b:disabled { opacity: .4; cursor: default; }
	.tcv2 .tc-sp-compteur-n {
		width: 76px; height: 46px; padding: 0; border: 0; background: transparent; color: var(--tc-encre); text-align: center;
		font-family: var(--tc-titres); font-size: 24px; font-weight: 600; letter-spacing: -.025em; -moz-appearance: textfield; appearance: textfield;
	}
	.tcv2 .tc-sp-compteur-n::-webkit-inner-spin-button,
	.tcv2 .tc-sp-compteur-n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
	.tcv2 .tc-sp-combien-aide { font-size: 13px; font-weight: 500; color: var(--tc-tendu-t); }
	.tcv2 .tc-sp-choix .tc-options { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; }
	/* Les options au grand ecran gardent les tailles de Front-03, pas celles du
	   telephone (controle 3, Front-03 §2) : titre 14 px, aide 12, prix 13,5. */
	.tcv2 .tc-sp-choix .tc-option-nom { font-size: 14px; line-height: 18px; }
	.tcv2 .tc-sp-choix .tc-option-nom .tc-aide { font-size: 12px; line-height: 15px; margin-top: 2px; }
	.tcv2 .tc-sp-choix .tc-option-prix { font-size: 13.5px; }
	.tcv2 .tc-sp-maj {
		height: 36px; padding: 0 14px; border: 1px solid var(--tc-trait-champ); border-radius: 9px; background: none;
		color: var(--tc-texte-2); font-size: 13px; font-weight: 500; cursor: pointer; margin: -10px 0 22px;
	}
	.tc-js .tcv2 .tc-sp-maj { display: none; }

	/* « Où vous joindre » : une ligne de champs, sans les aides. */
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-intro { display: none; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-grille { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) 190px; gap: 13px; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-grille > .tc-champ { grid-column: auto; margin: 0; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-grille .tc-aide { display: none; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-grille .tc-label { font-size: 12.5px; font-weight: 500; color: var(--tc-texte-3); margin-bottom: 6px; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-grille .tc-input { height: 48px; border-radius: 12px; padding: 0 14px; font-size: 15px; }
	.tcv2 .tc-sp-tel-aide { display: block; margin-top: 12px; font-size: 12.5px; color: var(--tc-texte-3); }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-corps > .tc-releve { display: none; }

	/* La carte de droite : le releve, le total, l'acompte. */
	.tcv2 .tc-sp-releve { display: block; }
	.tcv2 .tc-barre:has( .tc-sp-releve ) .tc-total-barre { display: none; }
	.tcv2 .tc-sp-releve .tc-ligne { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13.5px; line-height: normal; }
	.tcv2 .tc-sp-releve .tc-ligne-quoi { flex: 1; color: var(--tc-texte-2); }
	.tcv2 .tc-sp-releve .tc-ligne-combien { font-family: var(--tc-mono); }
	/* Rangees de 18 + 8 px, en 13,5 (controle 3, Front-03 §1). */
	.tcv2 .tc-sp-releve .tc-ligne-quoi,
	.tcv2 .tc-sp-releve .tc-ligne-combien { font-size: 13.5px; line-height: normal; }
	.tcv2 .tc-sp-releve > .tc-total,
	.tcv2 .tc-sp-releve .tc-lignes + .tc-total,
	.tcv2 .tc-sp-releve .tc-total > *,
	.tcv2 .tc-sp-paye-l,
	.tcv2 .tc-sp-paye-l > * { line-height: normal; }
}
.tcv2 .tc-sp-carte { display: contents; }
.tcv2 .tc-sp-garantie,
.tcv2 .tc-sp-annul,
.tcv2 .tc-barre .tc-barre-note.tc-sp-annul { display: none; }
.tcv2 .tc-sp-q-fin { }
@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-sp-quand > label.tc-sp-q { display: block; min-height: 0; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-sp-q-fin { display: none; }
	.tcv2 .tc-page:has( .tc-sp-choix ) > .tc-barre {
		background: none; border: 0; box-shadow: none; padding: 0;
	}
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-sp-carte {
		display: block; background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 18px; padding: 22px;
		box-shadow: 0 20px 48px -30px rgba( 23, 19, 16, .4 );
	}
	.tcv2 .tc-sp-garantie { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 0 4px; font-size: 11.5px; line-height: 16px; color: var(--tc-texte-3); }
	.tcv2 .tc-sp-garantie .tc-i { flex-shrink: 0; margin-top: 1px; color: var(--tc-icone); }
	.tcv2 .tc-sp-annul,
	.tcv2 .tc-barre .tc-barre-note.tc-sp-annul { display: flex; }
	.tcv2 .tc-sp-releve .tc-lignes { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
	.tcv2 .tc-sp-releve .tc-ligne { padding: 0; border: 0; }
	.tcv2 .tc-sp-releve > .tc-total,
	.tcv2 .tc-sp-releve .tc-lignes + .tc-total { display: flex; align-items: baseline; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--tc-trait-fin); }
	.tcv2 .tc-sp-releve .tc-total-mot { flex: 1; font-size: 15px; font-weight: 600; color: var(--tc-encre); }
	.tcv2 .tc-sp-releve .tc-total-somme { font-family: var(--tc-mono); font-size: 21px; font-weight: 500; }
	.tcv2 .tc-sp-releve .tc-acompte { background: var(--tc-rempli); border-radius: 11px; padding: 13px 14px; margin: 16px 0 0; border: 0; }
	.tcv2 .tc-sp-releve .tc-acompte .tc-total { padding: 0; border: 0; margin: 0 0 4px; }
	.tcv2 .tc-sp-releve .tc-acompte .tc-total-mot { font-size: 13px; }
	.tcv2 .tc-sp-releve .tc-acompte .tc-total-somme { font-size: 15px; }
	.tcv2 .tc-sp-releve .tc-acompte .tc-total + .tc-total .tc-total-mot,
	.tcv2 .tc-sp-releve .tc-acompte .tc-total + .tc-total .tc-total-somme { font-size: 12px; font-weight: 400; color: var(--tc-texte-3); font-family: var(--tc-police); }
	.tcv2 .tc-sp-releve > .tc-aide { display: none; }
	.tcv2 .tc-page:has( .tc-sp-choix ) .tc-sp-carte > .tc-b { margin-top: 16px; height: 52px; border-radius: 13px; font-size: 15.5px; }
}
@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-sp-paye { background: var(--tc-rempli); border-radius: 11px; padding: 13px 14px; margin: 16px 0 0; }
	.tcv2 .tc-sp-paye-l { display: flex; align-items: baseline; margin-bottom: 4px; }
	.tcv2 .tc-sp-paye-mot { flex: 1; font-size: 13px; font-weight: 600; }
	.tcv2 .tc-sp-paye-somme { font-family: var(--tc-mono); font-size: 15px; font-weight: 500; }
	.tcv2 .tc-sp-paye-dit { font-size: 12px; line-height: 17px; color: var(--tc-texte-3); }
}
/* Au telephone, la grille prend la gouttiere : sept cases de 44 px au moins. */
.tcv2 .tc-sp-cal-g > .tc-mois,
.tcv2 .tc-sp-cal-g > .tc-sp-semaine { gap: 2px; margin-inline: -16px; }
@container tc-app ( min-width: 1000px ) {
	.tcv2 .tc-sp-cal-g > .tc-mois,
	.tcv2 .tc-sp-cal-g > .tc-sp-semaine { gap: 9px; margin-inline: 0; }
}
/* Client-01 : « J'ai déjà une réservation » reste au bas de l'ecran. */
.tcv2 .tc-page.est-vitrine > .tc-pied-lien { position: sticky; bottom: 0; z-index: 2; background: var(--tc-fond); }
/* Client-04 : le detail des prix, replie sous les champs. */
.tcv2 .tc-sp-detail { margin-top: 14px; }
.tcv2 .tc-sp-detail > summary {
	display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none;
	font-size: 13px; font-weight: 500; color: var(--tc-texte-3);
}
.tcv2 .tc-sp-detail > summary::-webkit-details-marker { display: none; }
.tcv2 .tc-sp-detail > summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate( 45deg ) translateY( -2px ); }
.tcv2 .tc-sp-detail[open] > summary::after { transform: rotate( -135deg ); }
.tcv2 .tc-sp-detail[open] > summary { margin-bottom: 10px; }
.tcv2 details.tc-sp-detail { border: 0; background: none; padding: 0; box-shadow: none; }
/* Client-07 : la date la plus proche est encadree. */
.tcv2 .tc-corps > .tc-liste > a.tc-creneau:first-child { border: 1.5px solid var(--tc-encre); }
/* Client-05 : l'encart Stripe, et « Payer plus tard » discret, centre. */
.tcv2 .tc-sp-stripe {
	display: flex; align-items: center; gap: 8px; padding: 15px 14px; margin-bottom: 8px;
	background: var(--tc-surface); border: 1px solid var(--tc-trait); border-radius: 14px;
}
.tcv2 .tc-sp-stripe > .tc-i { flex-shrink: 0; color: var(--tc-texte-3); }
/* ⚠ UNE LIGNE (controle 2, Client-05 §3) : 13 px et des marques de 32 px
   tiennent « Paiement sécurisé par Stripe » dans 350 px ; au-dela, une
   langue plus longue coupe proprement par l'ellipse, jamais en deux lignes. */
.tcv2 .tc-sp-stripe-dit { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcv2 .tc-sp-cartes { display: inline-flex; gap: 3px; flex-shrink: 0; }
.tcv2 .tc-sp-carte-i { display: block; width: 32px; height: 20px; }
.tcv2 .tc-sp-plus-tard { text-align: center; margin-top: 18px; }
.tcv2 .tc-sp-plus-tard .tc-b-texte { display: inline-flex; min-height: 36px; align-items: center; margin: 0; font-size: 13px; font-weight: 500; color: var(--tc-texte-3); }
.tcv2 .tc-page:has( .tc-b-payer ) .tc-releve-tete { display: none; }
/* Client-06 : les deux boutons du pied ne se touchent plus. */
.tcv2 .tc-barre > .tc-b + .tc-agenda,
.tcv2 .tc-barre > .tc-b + .tc-fait-pied,
.tcv2 .tc-barre > .tc-b + .tc-b { margin-top: 10px; }
/* Un lien de sortie pose dans le corps : discret et centre, pas du texte brut. */
.tcv2 .tc-corps > a.tc-b-texte { display: flex; justify-content: center; align-items: center; min-height: 36px; margin: 18px auto 0; font-size: 13px; font-weight: 500; color: var(--tc-texte-3); }
/* Client-12 : « Vos places sont encore tenues », en ambre. */
.tcv2 .tc-tete-sous.est-tendu { color: var(--tc-tendu-t); }

/* ═══ SYSTEME-02 — « QUAND ÇA CASSE » ET « SANS RÉSEAU » ═════════════════
 *
 * Les deux etats de la planche qui manquaient au tunnel. La planche les
 * dessine en vignettes de console (196 px de haut) : leur forme — filet,
 * liseré rouge de 3 px, titre rouge a icone, ligne en gras, bouton plein —
 * est portee telle quelle, a l'echelle des ecrans Client (x 1,16, la meme
 * que l'alerte de Client-07 a cote de laquelle elle vit).
 */
.tcv2 {
	--tc-tard-bord: #E3C4BC;
	--tc-hl-fond: #FAF9F6;
	--tc-hl-bord: #EFEDE7;
}
@media ( prefers-color-scheme: dark ) {
	.tcv2:not( [data-tc-peau="claire"] ) {
		--tc-tard-bord: rgba( 194, 64, 58, .42 );
		--tc-hl-fond: #1A1E25;
		--tc-hl-bord: #2C3139;
	}
}

/* « Trop tard de 20 secondes » — carte, liseré, titre rouge, suite, geste. */
.tcv2 .tc-tard {
	display: flex; flex-direction: column; margin-bottom: 24px;
	background: var(--tc-surface); border: 1px solid var(--tc-tard-bord); border-left: 3px solid var(--tc-complet);
	border-radius: 15px; padding: 17px 17px 17px 16px;
}
.tcv2 .tc-tard-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--tc-complet-t); }
.tcv2 .tc-tard-titre > .tc-i { flex-shrink: 0; }
.tcv2 .tc-tard-texte { font-size: 14.5px; line-height: 21px; color: var(--tc-encre); }
.tcv2 .tc-tard-suite { margin-top: 8px; font-size: 13.5px; line-height: 20px; color: var(--tc-texte-3); }
.tcv2 .tc-tard-suite strong { font-weight: 600; color: var(--tc-encre); }
.tcv2 .tc-tard-geste { margin-top: 16px; }
.tcv2 .tc-tard-geste .tc-b { height: 48px; border-radius: 12px; font-size: 14.5px; }
/* Le plus proche est deja dans la carte : la liste ne l'encadre plus. */
.tcv2 .tc-tard ~ .tc-liste > a.tc-creneau:first-child { border: 1px solid var(--tc-trait); }

/* « La connexion s'est coupée » — pose par le script, jamais sans lui. */
.tcv2 .tc-hl {
	background: var(--tc-hl-fond); border: 1px solid var(--tc-hl-bord);
	border-radius: 13px; padding: 15px 16px; margin-bottom: 13px; text-align: left;
}
.tcv2 .tc-hl[hidden] { display: none; }
.tcv2 .tc-hl-titre { font-size: 14.5px; line-height: 20px; font-weight: 600; margin-bottom: 5px; color: var(--tc-encre); }
.tcv2 .tc-hl-texte { font-size: 13px; line-height: 19px; color: var(--tc-texte-2); }
.tcv2 .tc-hl .tc-b-texte {
	margin: 4px 0 -10px -4px; min-height: 36px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
	font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--tc-encre);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* « Le bouton attend au lieu d'échouer » : il reste lisible, il ne part pas. */
.tcv2 .tc-b.est-attend { opacity: .55; cursor: progress; }