/*
 * TOP CALENDAR v2 — LA FEUILLE DE L'ESPACE CLIENT
 *
 * ── CE QUE CETTE FEUILLE PORTE, ET CE QU'ELLE EMPRUNTE ────────────────────
 *
 * Le portage direct des maquettes `Client-08-MonCompte`, `Client-09-Modifier`,
 * `Client-10-Annuler` et `Client-11-LienExpire` (24/09) : leurs tailles,
 * espacements, rayons et typographie, recopies du HTML de la maquette, en
 * classes `.tc-espace-*`. Elle est enfilee APRES `front-v2.css` par
 * `TOPCAL_Espace::feuille()`.
 *
 * ⚠ LES COULEURS NE SONT PAS REECRITES ICI. Chaque jeton `--tce-*` lit
 * d'abord celui du tunnel (`--tc-*`, dans `front-v2.css`), et la valeur de
 * la maquette n'est que son repli. C'est ce qui donne a l'espace les deux
 * peaux du tunnel, l'accent des reglages et les couleurs d'etat MESUREES
 * (4,5:1 pour un mot) — sans une ligne de plus. Seules les quatre nuances
 * que le tunnel n'a pas (le trait doux, la bande, le point gris, le gris des
 * pictogrammes) ont leur propre pas sombre, plus bas.
 *
 * ⚠ DEUX ECARTS VOULUS A LA MAQUETTE, ET TOUS DEUX POUR LA LECTURE :
 *   · l'ambre d'un MOT est `--tc-tendu-t` (#8A5F0C), pas #B07B10 — celui-ci
 *     tombe a 3,3:1 sur le papier ;
 *   · le gris #9A8F84 ne peint que des pictogrammes et des points ; ecrit
 *     en 12,5 px (dates passees) il tombait a 3,1:1, il prend donc le gris
 *     secondaire.
 *   · les pastilles de motif font 44 px de haut (38 dans la maquette) : c'est
 *     la cible tactile de tout le tunnel.
 *
 * ── LES POLICES ──────────────────────────────────────────────────────────
 *
 * Embarquees dans `assets/fonts/` (licence OFL, voir LISEZMOI.txt), jamais
 * chargees d'un service distant. Les memes six declarations que
 * `admin-topcal.css` : un navigateur qui les a deja les reutilise.
 */

@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;
}

/* ── LES JETONS ────────────────────────────────────────────────────────── */
.tc-espace,
.tc-espace-renvoi,
.tc-espace-liste {
	--tce-fond: var(--tc-fond, #FCFBF9);
	--tce-encre: var(--tc-encre, #171310);
	--tce-surface: var(--tc-surface, #FFFFFF);
	--tce-trait: var(--tc-trait, #E8E3DC);
	--tce-trait-fin: var(--tc-trait-fin, #F0ECE6);
	--tce-texte-2: var(--tc-texte-3, #6E635A);
	--tce-texte-lien: var(--tc-texte-2, #5C5248);
	--tce-rond: var(--tc-rempli, #F4F1EC);
	--tce-vert: var(--tc-libre-t, #0F7A4C);
	--tce-vert-point: var(--tc-libre, #0F7A4C);
	--tce-vert-d: var(--tc-libre-d, #E7F2EC);
	--tce-ambre: var(--tc-tendu-t, #8A5F0C);
	--tce-ambre-point: var(--tc-tendu, #B07B10);
	--tce-ambre-d: var(--tc-tendu-d, #F8F0DF);
	--tce-rouge: var(--tc-complet-t, #8F2A1C);
	--tce-rouge-point: var(--tc-complet, #8F2A1C);
	--tce-rouge-d: var(--tc-complet-d, #F7E9E6);
	--tce-gris-point: var(--tc-ferme, #6E7480);
	--tce-b: var(--tc-ac, var(--tce-encre));
	--tce-sur-b: var(--tc-sur-ac, var(--tce-fond));
	/* les quatre nuances propres a la maquette client */
	--tce-trait-doux: #EFEAE3;
	--tce-bande: #FAF8F5;
	--tce-point: #D9D2C8;
	--tce-picto: #9A8F84;
	--tce-champ: #D9D2C8;
	/* « (facultatif) » : plus clair que la legende comme la maquette (#9A8F84),
	   mais tenu a l'AA — 4,7:1 sur le papier (controle 3, Client-10 §5). */
	--tce-facultatif: #7A6F66;

	--tce-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tce-titre: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--tce-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media ( prefers-color-scheme: dark ) {
	.tcv2:not( [data-tc-peau="claire"] ) .tc-espace,
	.tcv2:not( [data-tc-peau="claire"] ) .tc-espace-renvoi,
	.tcv2:not( [data-tc-peau="claire"] ) .tc-espace-liste {
		--tce-trait-doux: #262B33;
		--tce-bande: #1A1E25;
		--tce-point: #3A414C;
		--tce-picto: #8A919D;
		--tce-champ: #3A414C;
		--tce-facultatif: var(--tce-texte-2);
	}
}

.tc-espace {
	display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
	max-width: 560px; margin: 0 auto; background: var(--tce-fond);
	font-family: var(--tce-texte);
	color: var(--tce-encre);
	/* le -0.1px du theme collait les mots de la micro-copie (T6) */
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	line-height: 1.4;
}
.tc-espace *,
.tc-espace *::before,
.tc-espace *::after { box-sizing: border-box; }
.tc-espace .tc-espace-i { flex-shrink: 0; display: block; }
/* `:where()` : sans poids, pour que chaque bloc pose ses propres marges. */
:where( .tc-espace ) :where( p ) { margin: 0; }
/* Le theme equilibre ses paragraphes (`text-wrap: balance`) : sur un ecran
   de telephone, la phrase se coupait a mi-largeur. On rend la coupure normale. */
.tc-espace p, .tc-espace h1, .tc-espace h2, .tc-espace-renvoi p { text-wrap: wrap; }
.tcv2 .tc-espace a { text-decoration: none; }

/* ── LE CADRE (reprise du 24/09) ──────────────────────────────────────────
 * La maquette est un cadre plein de 390 px : en-tete, corps, pied, chacun a
 * 20 px des bords, les filets d'un bord a l'autre. Le tunnel donne 16 px de
 * marge a `.tcv2` ; sur les ecrans de l'espace on la rend (les blocs portent
 * leur propre marge), et la barre du site du grand ecran (`.tc-site`, de
 * `front-v2.css`) n'y a pas sa place : la tete de l'espace la remplace. */
.tcv2:has( > .tc-espace ),
.tcv2:has( > [data-tc-renvoye] > .tc-espace ) { padding: 0; }
.tcv2:has( .tc-espace ) .tc-site { display: none; }
.tc-espace [hidden] { display: none !important; }

/* ── L'EN-TETE : le bonjour (08, 11), ou le retour et la reference (09, 10) */
.tc-espace-tete {
	flex-shrink: 0; display: flex; align-items: center; gap: 12px;
	padding: 20px 20px 16px; border-bottom: 1px solid var(--tce-trait-doux);
}
.tc-espace-tete-corps { flex-grow: 1; min-width: 0; }
.tc-espace-bonjour {
	font-family: var(--tce-titre); font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.018em;
}
.tc-espace-lieu { font-size: 12.5px; color: var(--tce-texte-2); margin-top: 2px; }
.tc-espace-avatar {
	width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
	background: var(--tce-encre); color: var(--tce-fond);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 600;
}
.tc-espace-tete-retour { gap: 8px; padding: 12px 12px 14px; }
.tcv2 .tc-espace .tc-espace-retour {
	width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; color: var(--tce-encre);
}
.tc-espace-retour .tc-espace-i { stroke-width: 2.2; }
.tc-espace-tete-titre { font-size: 15.5px; font-weight: 600; letter-spacing: -.008em; line-height: 1.3; }
.tc-espace-ref { font-family: var(--tce-mono); font-size: 12px; color: var(--tce-texte-2); margin-top: 1px; }

/* ── LE CORPS ──────────────────────────────────────────────────────────── */
.tc-espace-corps { flex: 1 0 auto; padding: 20px 20px 22px; }
.tc-espace-corps-haut { padding-top: 24px; }
.tc-espace-corps-large { padding-top: 40px; }

/* Le surtitre : un point d'etat, puis la phrase en capitales. */
.tc-espace-sur {
	display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
	font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tce-texte-2);
}
.tc-espace-sur i { width: 7px; height: 7px; border-radius: 999px; background: var(--tce-vert-point); flex-shrink: 0; }
.tc-espace-sur[data-tc-ton="complet"] i { background: var(--tce-rouge-point); }
.tc-espace-sur[data-tc-ton="ferme"] i { background: var(--tce-point); }

.tc-espace-rubrique {
	margin: 0 0 12px; font-family: var(--tce-texte);
	font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tce-texte-2);
}
.tc-espace-h2 {
	margin: 0 0 12px; font-family: var(--tce-titre);
	font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.014em; color: var(--tce-encre);
}

/* ── LA CARTE DE LA RESERVATION (08) ───────────────────────────────────── */
.tc-espace-carte {
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 16px;
	overflow: hidden; margin-bottom: 22px;
}
.tc-espace-carte-corps { padding: 17px 18px; }
.tc-espace-carte-titre {
	margin: 0; font-family: var(--tce-titre); color: var(--tce-encre);
	font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -.016em;
}
.tc-espace-fait {
	display: flex; align-items: flex-start; gap: 8px; margin-top: 7px;
	font-size: 13.5px; line-height: 19px;
}
.tc-espace-fait .tc-espace-i { color: var(--tce-texte-2); margin-top: 2px; }
.tc-espace-fait-date { margin-top: 12px; }
/* La date garde ses deux pieces (voir `TOPCAL_Espace::dalle_date()`) ; ici
   elles se suivent sur une ligne, comme la maquette, l'heure en chasse fixe. */
.tc-espace .tc-dalle-date { margin: 0; display: inline; }
.tc-espace .tc-dalle-jour { display: inline-block; font-size: 13.5px; font-weight: 400; line-height: 19px; }
.tc-espace .tc-dalle-jour::first-letter { text-transform: uppercase; }
.tc-espace .tc-dalle-heure {
	display: inline; margin: 0; font-family: var(--tce-mono); font-size: 13.5px; font-weight: 400;
}
.tc-espace .tc-dalle-heure::before { content: "· "; font-family: var(--tce-texte); }

.tc-espace-carte-bande {
	padding: 13px 18px 11px; border-top: 1px solid var(--tce-trait-fin);
}
.tc-espace-carte-bande .tc-espace-rubrique { margin-bottom: 6px; }
.tc-espace-ligne { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 13px; line-height: 18px; }
.tc-espace-ligne-quoi { flex-grow: 1; min-width: 0; }
.tc-espace-ligne-combien { font-family: var(--tce-mono); font-size: 12.5px; white-space: nowrap; }

.tc-espace-carte-pied {
	padding: 13px 18px; background: var(--tce-bande); border-top: 1px solid var(--tce-trait-fin);
	display: flex; align-items: center; gap: 12px;
}
.tc-espace-carte-pied-mot { font-size: 12.5px; color: var(--tce-texte-2); flex-grow: 1; }
/* Caisse ouverte, la bande mene a REGLER (Client-08) : meme allure, un chevron. */
.tcv2 a.tc-espace-carte-pied.est-lien { color: var(--tce-encre); text-decoration: none; border-radius: 0 0 16px 16px; }
.tcv2 a.tc-espace-carte-pied.est-lien:hover .tc-espace-carte-pied-mot { color: var(--tce-encre); }
.tcv2 a.tc-espace-carte-pied.est-lien:focus-visible { outline: 2px solid var(--tce-encre); outline-offset: -2px; }
.tcv2 a.tc-espace-carte-pied.est-lien .tc-espace-i:last-child { color: var(--tce-picto); margin-left: -4px; }
.tc-espace-somme { font-family: var(--tce-mono); font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── LES BOUTONS PLEINS : 52 px, rayon 13, noirs (ou l'accent) ─────────── */
.tcv2 .tc-espace .tc-b,
.tcv2 .tc-espace-renvoi .tc-b {
	display: flex; align-items: center; justify-content: center; width: 100%;
	min-height: 52px; height: auto; padding: 0 20px; border: 0; border-radius: 13px;
	background: var(--tce-b); color: var(--tce-sur-b);
	font-family: var(--tce-texte); font-size: 15.5px; font-weight: 600; line-height: 1.25; text-align: center;
}
/* Payer (08, caisse ouverte) : le premier geste, a la forme des autres. */
.tcv2 .tc-espace .tc-espace-gestes .tc-b[data-tc-payer] {
	justify-content: flex-start; gap: 13px; min-height: 50px; padding: 14px 16px;
	background: var(--tce-surface); color: var(--tce-encre); border: 1px solid var(--tce-trait); border-radius: 13px;
	font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: left;
}
.tc-espace-gestes .tc-b[data-tc-payer] > .tc-espace-i-chevron { color: var(--tce-picto); stroke-width: 2; }

/* ── LES GESTES (08) : pictogramme, mot, chevron ───────────────────────── */
.tc-espace-gestes { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.tc-espace-gestes form { margin: 0; }
.tcv2 .tc-espace .tc-espace-geste,
.tcv2 .tc-espace-geste {
	display: flex; align-items: center; gap: 13px; width: 100%; min-height: 50px; margin: 0;
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 13px;
	padding: 14px 16px; color: var(--tce-encre); text-align: left; cursor: pointer;
	font-family: var(--tce-texte); font-size: 14.5px; font-weight: 500; line-height: 1.3;
	-webkit-appearance: none; appearance: none; box-shadow: none;
}
.tc-espace-geste:hover { border-color: var(--tce-texte-2); }
.tc-espace-geste > .tc-espace-i { color: var(--tce-encre); }
.tc-espace-geste > .tc-espace-i-chevron { color: var(--tce-picto); stroke-width: 2; }
.tc-espace-geste-corps { flex-grow: 1; min-width: 0; }
.tc-espace-geste-nom { display: block; }
.tc-espace-geste-meta {
	display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--tce-texte-2);
	overflow-wrap: anywhere;
}
/* Sur un ecran qui refuse, le geste « Nous ecrire » vient seul sous la phrase. */
.tc-espace-vide + .tc-espace-geste { margin-bottom: 8px; }

/* ── LES SORTIES PASSEES (08) ──────────────────────────────────────────── */
.tc-espace-passees { list-style: none; margin: 0; padding: 0; }
.tc-espace-passee { display: flex; align-items: center; gap: 13px; padding: 11px 2px; margin: 0; }
.tc-espace-passee i { width: 7px; height: 7px; border-radius: 999px; background: var(--tce-point); flex-shrink: 0; }
.tc-espace-passee-nom { flex-grow: 1; min-width: 0; font-size: 13.5px; color: var(--tce-texte-2); }
.tc-espace-passee-date { font-size: 12.5px; color: var(--tce-texte-2); white-space: nowrap; }

/* ── LE PIED ───────────────────────────────────────────────────────────── */
.tc-espace-pied {
	flex-shrink: 0; margin-top: auto; padding: 14px 20px 20px;
	border-top: 1px solid var(--tce-trait-doux); background: var(--tce-fond);
}
/* Le pied qui porte l'action (09, 10) reste sous le pouce, comme la maquette.
   Il est le DERNIER element du cadre : en fin de page il reprend sa place, et
   rien au-dessus ne reste cache (`sticky`, pas `fixed`). */
.tc-espace-pied-action { position: sticky; bottom: 0; z-index: 2; }
.tc-espace form[data-tc-changer] { display: flex; flex-direction: column; flex: 1 0 auto; }
.tcv2 .tc-espace-pied .tc-aide[data-tc-fin-lien] {
	display: flex; align-items: flex-start; gap: 10px; margin: 0 0 13px;
	font-size: 11.5px; line-height: 16px; color: var(--tce-texte-2);
}
.tc-espace-pied .tc-aide[data-tc-fin-lien] .tc-espace-i { color: var(--tce-picto); }
.tc-espace-pied-lien { text-align: center; }
.tcv2 .tc-espace .tc-espace-lien-rouge {
	display: inline-flex; align-items: center; min-height: 44px;
	font-size: 13px; font-weight: 500; color: var(--tce-rouge);
}
.tc-espace-pied-refus { text-align: center; font-size: 12.5px; line-height: 18px; color: var(--tce-texte-2); }
.tc-espace-pied-centre { text-align: center; }
.tcv2 .tc-espace-lien-doux {
	display: inline-flex; align-items: center; min-height: 44px;
	font-size: 13px; font-weight: 500; color: var(--tce-texte-2);
}
.tc-espace-pied-action { padding-top: 14px; }

/* ── L'AVIS : ce qui vient de se passer (deplacee, annulee) ────────────── */
.tc-espace-avis {
	display: flex; gap: 12px; margin-bottom: 18px; padding: 14px 15px;
	background: var(--tce-vert-d); border-radius: 14px; color: var(--tce-encre);
}
.tc-espace-avis .tc-espace-i { color: var(--tce-vert); stroke-width: 2.4; margin-top: 1px; }
.tc-espace-avis-titre { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.tc-espace-avis-texte { font-size: 12.5px; line-height: 18px; color: var(--tce-texte-2); }

/* ── L'ERREUR EN HAUT DE L'ECRAN ───────────────────────────────────────── */
.tcv2 .tc-espace .tc-erreur,
.tcv2 .tc-espace-renvoi .tc-erreur {
	display: block; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
	background: var(--tce-rouge-d); color: var(--tce-rouge); font-size: 13px; line-height: 19px;
}

/* ── LE TITRE D'UN ECRAN ET SA PHRASE (10, 11, refus) ──────────────────── */
.tc-espace-h1,
.tc-espace-vide-titre {
	margin: 0 0 10px; font-family: var(--tce-titre); color: var(--tce-encre);
	font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.022em;
}
.tc-espace-chapo,
.tc-espace-vide-texte { margin: 0 0 22px; font-size: 14px; line-height: 21px; color: var(--tce-texte-2); }
.tc-espace-vide-grand .tc-espace-vide-titre { font-size: 25px; line-height: 31px; }
.tc-espace-vide-grand .tc-espace-vide-texte { font-size: 14.5px; line-height: 22px; margin-bottom: 24px; }
.tc-espace .tc-espace-vide-texte { margin-top: 0; }
.tc-espace-h2 + .tc-espace-vide .tc-espace-vide-titre { font-size: 17px; line-height: 23px; }

.tc-espace-rond {
	width: 52px; height: 52px; border-radius: 999px; background: var(--tce-rond); color: var(--tce-texte-2);
	display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.tc-espace-rond .tc-espace-i { stroke-width: 1.9; }

/* ── LES AFFIRMATIONS (10) — et ce qui revient au client (08) ──────────── */
.tc-espace-affirmations {
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 16px;
	overflow: hidden; margin-bottom: 20px;
}
.tc-espace-affirmation { display: flex; gap: 13px; padding: 15px 16px; border-bottom: 1px solid var(--tce-trait-fin); }
.tc-espace-affirmation:last-child { border-bottom: 0; }
.tc-espace-affirmation .tc-espace-i { color: var(--tce-texte-2); margin-top: 1px; stroke-width: 1.9; }
.tc-espace-affirmation .tc-espace-i-rendu { color: var(--tce-vert); stroke-width: 2.4; }
.tc-espace-affirmation-corps { flex-grow: 1; min-width: 0; }
.tc-espace-affirmation-titre { font-size: 14px; line-height: 19px; font-weight: 600; margin-bottom: 3px; }
.tc-espace-affirmation-texte { font-size: 12.5px; line-height: 18px; color: var(--tce-texte-2); }

/* ── LES MOTIFS (10) : de vrais boutons radio, peints en pastilles ─────── */
.tc-espace-motifs { border: 0; margin: 0; padding: 0; min-width: 0; }
.tc-espace-legende {
	display: block; padding: 0; margin: 0 0 7px;
	font-size: 12.5px; font-weight: 500; color: var(--tce-texte-2);
}
.tc-espace-legende span { color: var(--tce-facultatif); font-weight: 500; }
.tc-espace-affirmation-titre .tc-espace-mono { font-family: var(--tce-mono); font-weight: 600; }
.tc-espace-pastilles { display: flex; flex-wrap: wrap; gap: 7px; }
.tc-espace-pastille { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.tc-espace-pastille input,
.tc-espace-creneau input {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.tc-espace-pastille span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px;
	font-size: 13px; line-height: 1.2; background: var(--tce-surface); color: var(--tce-encre);
	border: 1px solid var(--tce-trait); border-radius: 999px;
}
.tc-espace-pastille input:checked + span { background: var(--tce-encre); border-color: var(--tce-encre); color: var(--tce-fond); }
.tc-espace-pastille input:focus-visible + span { outline: 2px solid var(--tce-encre); outline-offset: 2px; }

/* Le bouton destructeur : un contour rouge, sous la sortie pleine. */
.tc-espace-pied-action .tc-b + .tc-espace-b-rouge { margin-top: 10px; }
.tcv2 .tc-espace .tc-espace-b-rouge {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px;
	padding: 0 20px; border-radius: 13px; border: 1.5px solid var(--tce-rouge-point); background: transparent;
	color: var(--tce-rouge); font-family: var(--tce-texte); font-size: 15px; font-weight: 600; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.tc-espace-b-rouge:hover { background: var(--tce-rouge-d); }

/* ── CHANGER (09) : l'etat actuel, le compteur, les jours ──────────────── */
.tc-espace-actuel {
	background: var(--tce-bande); border: 1px solid var(--tce-trait-doux); border-radius: 14px;
	padding: 14px 15px; margin-bottom: 22px;
}
.tc-espace-actuel .tc-espace-rubrique { margin-bottom: 8px; }
.tc-espace-actuel-nom { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.tc-espace-actuel-dit { font-family: var(--tce-mono); font-size: 12.5px; line-height: 18px; color: var(--tce-texte-2); }

.tc-espace-compteur {
	display: flex; align-items: center; justify-content: space-between; min-height: 64px;
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 14px;
	padding: 6px; margin-bottom: 9px;
}
.tc-espace-compteur-n {
	font-family: var(--tce-titre); font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: -.026em;
}
.tc-espace-indice {
	display: flex; align-items: flex-start; gap: 8px; padding: 0 4px; margin: 0 0 24px;
	font-size: 12.5px; line-height: 18px; color: var(--tce-texte-2);
}
.tc-espace-indice .tc-espace-i { margin-top: 2px; color: var(--tce-texte-2); }
.tc-espace-indice-vert, .tc-espace-indice-vert .tc-espace-i { color: var(--tce-vert); }
.tc-espace-indice-vert .tc-espace-i { stroke-width: 2.6; }
.tc-espace-compteur-n { flex-grow: 1; text-align: center; }
.tcv2 .tc-espace .tc-espace-pas {
	width: 50px; height: 50px; border-radius: 11px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--tce-encre); color: var(--tce-fond);
}
.tc-espace-pas .tc-espace-i { stroke-width: 2.4; }
.tc-espace-pas[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.tc-espace-pas:focus-visible { outline: 2px solid var(--tce-encre); outline-offset: 2px; }

.tc-espace-jours { border: 0; margin: 0; padding: 0; min-width: 0; }
.tc-espace-creneaux { display: flex; flex-direction: column; gap: 9px; }
.tc-espace-creneau {
	position: relative; display: flex; align-items: center; gap: 13px; margin: 0; cursor: pointer;
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 13px;
	padding: 13px 15px; min-height: 44px;
}
.tc-espace-creneau:has( input:checked ) { border: 1.5px solid var(--tce-encre); padding: 12.5px 14.5px; }
.tc-espace-creneau:has( input:focus-visible ) { outline: 2px solid var(--tce-encre); outline-offset: 2px; }
.tc-espace-creneau-corps { flex-grow: 1; min-width: 0; }
.tc-espace-creneau-quand { display: block; font-size: 14px; font-weight: 600; line-height: 19px; }
.tc-espace-creneau-dit { display: block; font-size: 12px; line-height: 16px; color: var(--tce-texte-2); margin-top: 2px; }
.tc-espace-creneau[data-tc-tenu="1"] .tc-espace-creneau-dit { color: var(--tce-vert); }
.tc-espace-creneau[data-tc-ton="tendu"] .tc-espace-creneau-dit { color: var(--tce-ambre); }
.tc-espace-creneau[data-tc-trop="1"] { opacity: .45; cursor: not-allowed; }
.tc-espace-coche {
	width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border: 1.5px solid transparent; color: transparent;
}
.tc-espace-coche .tc-espace-i { stroke-width: 3.2; }
.tc-espace-creneau input:checked ~ .tc-espace-coche { background: var(--tce-encre); border-color: var(--tce-encre); color: var(--tce-fond); }

.tc-espace-note { font-size: 12px; line-height: 17px; color: var(--tce-texte-2); margin-top: 12px; }
.tc-espace-pied .tc-espace-note { margin: 0 0 12px; }

.tc-espace-total { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.tc-espace-total-mot { flex-grow: 1; font-size: 13px; color: var(--tce-texte-2); }
.tc-espace-total-somme { font-family: var(--tce-mono); font-size: 19px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-espace-total-ambre { margin-bottom: 12px; }
.tc-espace-total-ambre .tc-espace-total-mot { font-size: 12.5px; color: var(--tce-ambre); }
.tc-espace-total-ambre .tc-espace-total-somme { font-size: 13.5px; color: var(--tce-ambre); }
.tc-espace-total-reste { margin-bottom: 12px; }
.tc-espace-total-reste .tc-espace-total-mot { font-size: 12.5px; }
.tc-espace-total-reste .tc-espace-total-somme { font-size: 13.5px; }
/* Sans la phrase verte (rien n'a encore change), le titre suivant garde
   l'ecart de la maquette sous le compteur. */
.tc-espace-compteur + .tc-espace-indice[hidden] + .tc-espace-h2 { margin-top: 24px; }

/* ── LE LIEN NEUF (11) — aussi pose par le tunnel, hors de `.tc-espace` ── */
.tc-espace-renvoi {
	font-family: var(--tce-texte); color: var(--tce-encre);
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 16px;
	padding: 18px; margin: 0 0 16px;
}
.tc-espace-renvoi-titre {
	margin: 0 0 7px; font-family: var(--tce-texte); color: var(--tce-encre);
	font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0;
}
.tc-espace-renvoi-texte { margin: 0 0 15px; font-size: 13px; line-height: 19px; color: var(--tce-texte-2); }
.tcv2 .tc-espace-champ {
	display: block; width: 100%; height: 50px; margin: 0 0 11px; padding: 0 14px;
	border: 1px solid var(--tce-champ); border-radius: 12px; background: var(--tce-surface); color: var(--tce-encre);
	font-family: var(--tce-texte); font-size: 16px;
}
.tcv2 .tc-espace-champ::placeholder { color: var(--tce-texte-2); opacity: .8; }
.tcv2 .tc-espace-champ:focus-visible { outline: 2px solid var(--tce-encre); outline-offset: 2px; }
.tc-espace-champ[aria-invalid="true"] { border-color: var(--tce-rouge-point); border-width: 1.5px; }
.tcv2 .tc-espace-renvoi .tc-b { min-height: 50px; border-radius: 12px; font-size: 15px; }

.tc-espace-encart {
	background: var(--tce-bande); border: 1px solid var(--tce-trait-doux); border-radius: 14px; padding: 15px 16px 5px;
}
.tc-espace-encart-titre { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.tc-espace-encart-texte { margin: 0 0 3px; font-size: 13px; line-height: 19px; color: var(--tce-texte-2); }
.tcv2 .tc-espace .tc-espace-encart-lien {
	display: inline-flex; align-items: center; gap: 9px; min-height: 44px; max-width: 100%;
	font-family: var(--tce-mono); font-size: 15px; font-weight: 500; color: var(--tce-encre);
}
.tc-espace-encart-lien span { overflow-wrap: anywhere; }

/* ══ LA LISTE DES DEPARTS — `Front-04-Liste` (ancien front, vue Liste) ═════
 *
 * Rendue par `TOPCAL_Front::view_list()` dans `.topcal-front`, dont la
 * feuille (`front-topcal.css`) n'est pas touchee : tout ce qui suit est
 * prefixe `.topcal-front .tc-espace-liste`, et ne vaut donc que pour cette
 * vue. Les jetons `--tc-*` du tunnel n'existent pas sur cette page ; les
 * `--tce-*` y prennent leur repli, qui est la valeur de la maquette.
 *
 * ⚠ LA LARGEUR. La maquette pose une colonne de 1020 px ; le theme donne a
 * son contenu une colonne etroite (650 px sur Twenty Twenty-Five). La liste
 * sort donc de la colonne, centree, sans jamais depasser la fenetre — le
 * meme geste qu'un bloc « pleine largeur » de l'editeur.
 */
.topcal-front .tc-espace-liste {
	position: relative; left: 50%; transform: translateX( -50% );
	width: min( 1020px, calc( 100vw - 32px ) );
	font-family: var(--tce-texte); color: var(--tce-encre); -webkit-font-smoothing: antialiased;
}
.topcal-front .tc-espace-liste-tete { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 30px; margin-bottom: 24px; }
.topcal-front .tc-espace-liste-titres { flex: 1 1 auto; min-width: 0; }
.topcal-front .tc-espace-liste-h1 {
	margin: 0 0 9px; font-family: var(--tce-titre); color: var(--tce-encre);
	font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.025em;
}
.topcal-front .tc-espace-liste-chapo { margin: 0; font-size: 15px; line-height: 23px; color: var(--tce-texte-lien); }
.topcal-front .tc-espace-liste-vues { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.topcal-front .tc-espace-liste .tcf-bar { margin: 0; gap: 10px; }
.topcal-front .tc-espace-liste .tcf-views {
	background: #F1EDE7; border: 0; border-radius: 11px; padding: 3px; gap: 0; color: var(--tce-encre);
}
.topcal-front .tc-espace-liste .tcf-views a {
	font-family: var(--tce-texte); font-size: 13.5px; font-weight: 500; letter-spacing: 0;
	min-height: 36px; padding: 0 15px; border-radius: 8px; color: var(--tce-texte-lien);
}
.topcal-front .tc-espace-liste .tcf-views a[aria-current] {
	background: var(--tce-surface); color: var(--tce-encre); font-weight: 600; box-shadow: 0 1px 2px rgba( 23, 19, 16, .1 );
}
.topcal-front .tc-espace-liste .tcf-types { margin: 0; gap: 6px; }
.topcal-front .tc-espace-liste .tcf-types a {
	font-family: var(--tce-texte); font-size: 13.5px; min-height: 42px; padding: 0 14px;
	border: 1px solid #E0D9CF; border-radius: 11px; background: transparent; color: var(--tce-encre);
}
.topcal-front .tc-espace-liste .tcf-types a[aria-current] { background: var(--tce-encre); border-color: var(--tce-encre); color: var(--tce-fond); }
.topcal-front .tc-espace-liste .tcf-entete { margin-bottom: 14px; }
/* La nomenclature des couleurs reste (elle nomme les liseres de l'ancien
   front) ; elle prend la voix de la maquette, sans cadre. */
.topcal-front .tc-espace-liste .tcf-legend { background: transparent; border: 0; padding: 0; font-family: var(--tce-texte); }
.topcal-front .tc-espace-liste .tcf-legend * { font-family: var(--tce-texte); }

/* La carte, ses bandeaux de journee et ses rangees. */
.topcal-front .tc-espace-liste-carte {
	background: var(--tce-surface); border: 1px solid var(--tce-trait); border-radius: 16px; overflow: hidden;
}
.topcal-front .tc-espace-liste-jour {
	margin: 0; padding: 11px 20px; background: var(--tce-bande);
	border-bottom: 1px solid var(--tce-trait-doux); border-top: 1px solid var(--tce-trait-doux);
	font-family: var(--tce-texte); font-size: 12px; line-height: 18px; font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase; color: var(--tce-texte-2);
}
.topcal-front .tc-espace-liste-carte > .tc-espace-liste-jour:first-child { border-top: 0; }
.topcal-front .tc-espace-liste-ligne {
	display: flex; align-items: center; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--tce-trait-fin);
}
.topcal-front .tc-espace-liste-heure { width: 92px; flex-shrink: 0; }
.topcal-front .tc-espace-liste-debut { display: block; font-family: var(--tce-mono); font-size: 17px; line-height: 22px; font-weight: 500; }
.topcal-front .tc-espace-liste-fin { display: block; font-size: 11.5px; line-height: 15px; color: var(--tce-texte-2); margin-top: 3px; }
.topcal-front .tc-espace-liste-quoi { flex-grow: 1; min-width: 0; }
.topcal-front .tc-espace-liste-nom { display: block; font-size: 15.5px; line-height: 20px; font-weight: 600; letter-spacing: -.008em; }
.topcal-front .tc-espace-liste-qui { display: block; font-size: 12.5px; line-height: 17px; color: var(--tce-texte-2); margin-top: 4px; }
.topcal-front .tc-espace-liste-etat { width: 150px; flex-shrink: 0; }
.topcal-front .tc-espace-liste-pastille {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
	font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tce-vert); background: var(--tce-vert-d);
}
.topcal-front .tc-espace-liste-pastille i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.topcal-front .tc-espace-liste-pastille[data-tc-ton="tendu"] { color: var(--tce-ambre); background: var(--tce-ambre-d); }
.topcal-front .tc-espace-liste-pastille[data-tc-ton="complet"] { color: var(--tce-rouge); background: var(--tce-rouge-d); }
.topcal-front .tc-espace-liste-pastille[data-tc-ton="ferme"] { color: var(--tce-texte-2); background: var(--tce-rond); }
.topcal-front .tc-espace-liste-prix {
	width: 80px; flex-shrink: 0; text-align: right;
	font-family: var(--tce-mono); font-size: 15px; font-weight: 500; white-space: nowrap;
}
.topcal-front .tc-espace-liste-geste { width: 112px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.topcal-front .tc-espace-liste .tc-espace-liste-geste .tcf-btn,
.topcal-front .tc-espace-liste .tc-espace-liste-geste .tcf-btn-off {
	min-height: 40px; height: 40px; padding: 0 18px; border-radius: 10px; box-shadow: none; transform: none;
	font-family: var(--tce-texte); font-size: 13.5px; font-weight: 600; letter-spacing: 0;
}
.topcal-front .tc-espace-liste .tc-espace-liste-geste .tcf-btn-primary { background: var(--tce-encre); border-color: var(--tce-encre); color: var(--tce-fond); }
.topcal-front .tc-espace-liste .tc-espace-liste-geste .tcf-btn-ghost,
.topcal-front .tc-espace-liste .tc-espace-liste-geste .tcf-btn-off {
	padding: 0 14px; border: 1px solid var(--tce-champ); background: transparent; color: var(--tce-texte-lien);
	font-size: 13px; font-weight: 500;
}
.topcal-front .tc-espace-liste-famille { padding: 14px 20px; border-bottom: 1px solid var(--tce-trait-fin); }

/* Les semaines suivantes, repliees, dans la meme carte. */
.topcal-front .tc-espace-liste .tcf-semaine { border-top: 1px solid var(--tce-trait-doux); }
.topcal-front .tc-espace-liste .tcf-semaine > summary {
	padding: 14px 20px; background: var(--tce-bande); align-items: center;
	font-size: 13.5px; color: var(--tce-texte-lien);
}
.topcal-front .tc-espace-liste .tcf-semaine-quand { font-weight: 600; color: var(--tce-encre); }
.topcal-front .tc-espace-liste .tcf-semaine-combien { font-family: var(--tce-texte); font-size: 12.5px; color: var(--tce-texte-2); }

/* Le pied : la suite a gauche, la phrase de verification a droite. */
.topcal-front .tc-espace-liste-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.topcal-front .tc-espace-liste-vide { flex-grow: 1; }
.topcal-front .tc-espace-liste .tcf-suite { margin: 0; text-align: left; }
.topcal-front .tc-espace-liste .tcf-suite .tcf-btn {
	min-height: 44px; padding: 0 20px; border-radius: 11px; border: 1px solid var(--tce-champ);
	background: transparent; color: var(--tce-encre); box-shadow: none;
	font-family: var(--tce-texte); font-size: 14px; font-weight: 500; letter-spacing: 0;
}
.topcal-front .tc-espace-liste-verifie { margin: 0; font-size: 12.5px; color: var(--tce-texte-2); }
.topcal-front .tc-espace-liste > .tcf-pied { margin-top: 18px; }

/* Au telephone : la rangee se replie en deux lignes, rien ne deborde. */
@media ( max-width: 720px ) {
	.topcal-front .tc-espace-liste-ligne { flex-wrap: wrap; gap: 8px 14px; }
	.topcal-front .tc-espace-liste-heure { width: auto; flex-basis: 64px; }
	.topcal-front .tc-espace-liste-quoi { flex-basis: calc( 100% - 80px ); }
	.topcal-front .tc-espace-liste-etat { width: auto; flex-basis: 100%; padding-left: 78px; }
	.topcal-front .tc-espace-liste-prix { width: auto; flex-grow: 1; padding-left: 78px; text-align: left; }
	.topcal-front .tc-espace-liste-geste { width: auto; }
	.topcal-front .tc-espace-liste-h1 { font-size: 27px; line-height: 32px; }
}