/* =============================================================================
 * TOP CALENDAR — vues publiques
 *
 * ── CETTE FEUILLE N'EST PAS CELLE DE LA CONSOLE, ET C'EST VOULU ────────────
 *
 * La console est DENSE : un gerant y passe sa journee, chaque pixel doit porter
 * une information. Le front est AERE : un visiteur y passe quinze secondes et
 * doit comprendre « quand puis-je venir ». Les faire se ressembler donnerait
 * soit une console illisible, soit un formulaire de reservation qui a l'air
 * d'un tableur.
 *
 * Ce que les deux PARTAGENT, en revanche, n'est pas negociable : les quatre
 * couleurs d'etat — disponible, dernieres places, complet, ferme. C'est ce qui
 * permet a un gerant et a son client de parler des memes couleurs au telephone.
 *
 * ── LA REGLE QUI GOUVERNE TOUT LE FICHIER : ON N'IMPOSE PAS DE POLICE ──────
 *
 * `font-family: inherit` sur les titres, et aucune police embarquee ici. Un
 * formulaire de reservation qui impose ses propres polices sur un site soigne
 * se voit immediatement — et se voit comme un GREFFON. Le client a paye un
 * theme ; notre travail est de nous y fondre, pas de le recouvrir.
 *
 * On ne pose donc que trois choses : la STRUCTURE (grilles, espacements), les
 * COULEURS D'ETAT (la seule information que le theme ne peut pas connaitre), et
 * les CIBLES TACTILES. Tout le reste vient du theme.
 *
 * Seule exception : `--tcf-mono` sur les heures et les references. Un horaire
 * en police proportionnelle danse quand les chiffres changent, et une colonne
 * d'heures qui danse est illisible. La pile est generique (`ui-monospace`), pas
 * une police embarquee.
 *
 * ── CONTRASTES ────────────────────────────────────────────────────────────
 *
 * Mesures par `bin/contraste.php` sur les SIX fonds reellement rencontres —
 * carte, page, et les quatre pastilles teintees. `--tcf-ink-3` est a `#6E655B`
 * et non au `#8C8377` des maquettes : celui-la tombait a 3,28 sur la pastille
 * la plus teintee, sous le seuil AA de 4,5. C'est exactement le defaut qui a
 * coute une reprise complete dans Top Translate, et il ne se voit pas a l'oeil
 * de celui qui l'ecrit.
 * ========================================================================== */

.topcal-front{
  /* Neutres CHAUDS — le front n'est pas une console. Saturation tres basse :
     au-dela, un blanc casse tire vers le beige et date la page. */
  --tcf-bg:#FCFBF9;
  --tcf-surface:#FFFFFF;
  --tcf-line:#E8E3DC;
  --tcf-ink:#171310;
  --tcf-ink-2:#5A5248;
  --tcf-ink-3:#6E655B;

  /* ── L'ACCENT : L'ENCRE, ET RIEN QUI NOUS APPARTIENNE ─────────────────
   *
   * Ordre du proprietaire, 04/09/2026 : « en front pas de bleu, il faut que
   * ca s'integre a n'importe quel site tout en etant super moderne ».
   *
   * Ce fichier portait l'indigo de la charte TOP CALENDAR. Sur la page d'un
   * client, entre son logo et ses photos, c'etait une couleur ETRANGERE qui
   * s'invitait : la notre, pas la sienne. Le front n'a donc plus de couleur
   * a lui — de l'encre, du papier, un filet.
   *
   * UNE SEULE VARIABLE porte l'action, et c'est le seul point d'entree pour
   * qui veut la sienne. Le reglage « couleur d'accent » de la console ecrit
   * ces trois lignes-la, et un theme peut faire pareil a la main :
   *
   *     .topcal-front{ --tcf-ac:#B0343C; --tcf-ac-contraste:#FFF }
   *
   * CE QUI RESTE COLORE, ET POURQUOI. Les quatre etats ci-dessous et les huit
   * teintes de nomenclature plus bas ne DECORENT pas : ils DISENT quelque
   * chose — libre, presque plein, complet ; et « cette seance n'est pas
   * celle-la ». Les eteindre pour faire sobre effacerait une information au
   * lieu de la rendre discrete. La ligne n'est pas « pas de couleur », elle
   * est « aucune couleur qui parle de NOUS ». */
  --tcf-ac:#171310;
  --tcf-ac-contraste:#FFFFFF;
  --tcf-ac-doux:#F1EDE7;
  --tcf-ring:rgba(23,19,16,.30);

  /* Les quatre etats. Identiques a la console, au chiffre pres. */
  --tcf-free:#0F7A4C;      --tcf-free-soft:#EFF6F1;
  --tcf-tight:#925E15;     --tcf-tight-soft:#F7F1E6;
  --tcf-full:#C04128;      --tcf-full-soft:#F9EEEA;
  --tcf-closed:#6E655B;    --tcf-closed-soft:#F4F1EC;

  /* Le fond plein d'un bouton d'heure. Entre le fond de page et le filet :
     assez pose pour que le bouton se lise sans bordure, assez discret pour que
     douze d'affilee ne fassent pas un damier. */
  --tcf-fill:#F3F1ED;
  --tcf-fill-fort:#EAE7E1;

  /* ── LA NOMENCLATURE : HUIT TEINTES POUR HUIT TYPES D'EVENEMENT ────────
   *
   * Decision du proprietaire, 02/09 : la couleur ne dit plus l'ETAT, elle dit
   * le TYPE. Chaque evenement publie recoit un rang stable — voir
   * `TOPCAL_Front::rang_couleur()` — et ce rang choisit sa teinte ici.
   *
   * Deux valeurs par teinte : le TRAIT, pose sur du blanc ou du pale, et le
   * FOND du pave, tres desature. Sans le second, huit pastilles saturees cote
   * a cote font un jeu de cartes ; avec lui, elles font une nomenclature.
   *
   * Les huit traits sont choisis a luminosite comparable — c'est ce qui evite
   * qu'une teinte paraisse « importante » et une autre « secondaire » alors
   * qu'elles ne nomment que des seances differentes. Toutes tiennent AA sur le
   * blanc, mesure par `bin/contraste.php`. */
  --tcf-ev-1:#4338CA;  --tcf-ev-1-doux:#EEEDFB;
  --tcf-ev-2:#0F766E;  --tcf-ev-2-doux:#E8F3F1;
  --tcf-ev-3:#9A3412;  --tcf-ev-3-doux:#F8EDE7;
  --tcf-ev-4:#9F1239;  --tcf-ev-4-doux:#F9EAEE;
  --tcf-ev-5:#6D28D9;  --tcf-ev-5-doux:#F1EBFB;
  --tcf-ev-6:#1D4ED8;  --tcf-ev-6-doux:#E9EFFC;
  --tcf-ev-7:#15803D;  --tcf-ev-7-doux:#E9F4EC;
  --tcf-ev-8:#475569;  --tcf-ev-8-doux:#EDEFF2;
  /* Le rang zero : un creneau sans evenement nomme — une location a la
     journee, par exemple. Il garde le gris du pave, et la nomenclature ne le
     nomme pas, puisqu'il n'a pas de nom. */
  --tcf-ev-0:var(--tcf-ink-3);  --tcf-ev-0-doux:var(--tcf-fill);

  --tcf-r:14px;
  --tcf-r-sm:11px;
  --tcf-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* La cible tactile minimale. Nommee plutot que recopiee : c'est une regle
     d'accessibilite, pas une preference, et elle doit se retrouver d'un grep. */
  --tcf-touch:44px;

  color:var(--tcf-ink);
  background:transparent;
  line-height:1.6;
}
.topcal-front *,.topcal-front *::before,.topcal-front *::after{box-sizing:border-box}

/* Les titres HERITENT. Voir l'en-tete : c'est la regle la plus importante du
   fichier. On ne fixe que ce qui structure — graisse et interlignage — pour
   qu'un theme aux titres tres lourds ne rende pas la liste illisible. */
.topcal-front h1,.topcal-front h2,.topcal-front h3,.topcal-front h4{
  font-family:inherit;line-height:1.15;margin:0;color:inherit;
}
.topcal-front p{margin:0}
.topcal-front a{color:var(--tcf-ac)}

/* Le focus ne se retire jamais : c'est la seule affordance de qui navigue au
   clavier. Un `outline:none` pose « pour faire propre » rend la reservation
   impossible sans souris. */
.topcal-front a:focus-visible,.topcal-front button:focus-visible,
.topcal-front input:focus-visible,.topcal-front select:focus-visible{
  outline:3px solid var(--tcf-ring);outline-offset:2px;border-radius:6px;
}
.topcal-front .tcf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Sur-titre, chapeau ─────────────────────────────────────────────────── */
.topcal-front .tcf-eyebrow{
  font-family:var(--tcf-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tcf-ink-3);display:block;
}
.topcal-front .tcf-lead{margin-bottom:2.2rem;max-width:60ch}
.topcal-front .tcf-lead h2{font-size:2.1rem;margin-top:.6rem}
.topcal-front .tcf-lead p{color:var(--tcf-ink-2);margin-top:.7rem}

/* ══ LE CHAPEAU — LE TITRE A GAUCHE, LA NOMENCLATURE DANS LE VIDE A DROITE ═
 *
 * Le chapeau d'une vue tient sur deux lignes et laisse les deux tiers droits
 * de la colonne inutilises. L'encart s'y range : la page ne gagne pas un pixel
 * de hauteur sur un bureau. En dessous de 720 px il passe a la ligne, sous le
 * titre — deux lignes de puces, contre un pave de bas de page auparavant.
 *
 * `align-items:flex-end` et non `center` : l'encart s'aligne sur la LIGNE DE
 * BASE du titre, pas sur son milieu. Centre, il flottait au-dessus du mois et
 * on lisait deux blocs sans rapport ; pose au meme niveau, il se rattache.
 */
.topcal-front .tcf-entete{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;margin-bottom:2.2rem;
}
/* Le chapeau porte l'ecart : le titre ne le porte plus, sinon il compte double. */
.topcal-front .tcf-entete .tcf-lead{margin-bottom:0}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.topcal-front .tcf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tcf-touch);padding:12px 22px;border-radius:12px;
  font-family:var(--tcf-mono);font-size:.8rem;font-weight:500;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;border:none;cursor:pointer;
  transition:transform .15s,filter .15s,border-color .15s;
}
.topcal-front .tcf-btn-primary{
  background:var(--tcf-ac);color:var(--tcf-ac-contraste);
  box-shadow:0 18px 44px -18px rgba(79,107,255,.5);
}
.topcal-front .tcf-btn-primary:hover{transform:translateY(-1px);filter:saturate(1.08)}
.topcal-front .tcf-btn-ghost{
  border:1px solid var(--tcf-line);color:var(--tcf-ink);background:var(--tcf-surface);
}
.topcal-front .tcf-btn-ghost:hover{border-color:var(--tcf-ac)}
/* « Complet » n'est PAS un bouton desactive : c'est un etat, et il ne doit ni
   avoir l'air cliquable ni disparaitre. Un creneau complet qu'on retire de la
   liste fait croire au visiteur qu'il n'a jamais existe — et il rappelle. */
.topcal-front .tcf-btn-off{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tcf-touch);padding:12px 22px;border-radius:12px;
  border:1px solid var(--tcf-line);color:var(--tcf-ink-3);
  font-family:var(--tcf-mono);font-size:.8rem;cursor:not-allowed;
}

/* ── Pastilles d'etat ───────────────────────────────────────────────────── */
.topcal-front .tcf-state{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--tcf-mono);font-size:.7rem;padding:5px 11px;border-radius:100px;
}
.topcal-front .tcf-state i{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
.topcal-front .tcf-state.is-free{background:var(--tcf-free-soft);color:var(--tcf-free)}
.topcal-front .tcf-state.is-tight{background:var(--tcf-tight-soft);color:var(--tcf-tight)}
.topcal-front .tcf-state.is-full{background:var(--tcf-full-soft);color:var(--tcf-full)}
.topcal-front .tcf-state.is-closed{background:var(--tcf-closed-soft);color:var(--tcf-closed)}

/* ── LA NOMENCLATURE, EN ENCART ───────────────────────────────────────────
 *
 * Elle fermait la page : un filet, 2,4 rem de marge, 1,6 rem de rembourrage,
 * puis quatre mots. C'est une bande entiere de hauteur pour une information
 * qu'on veut AVANT de lire le calendrier, pas apres.
 *
 * `width:fit-content` la fait tenir a la largeur de ce qu'elle nomme : un site
 * a deux seances n'obtient pas un encart de 1 100 px avec un desert a droite.
 * `max-width:100%` la ramene dans la colonne quand elle a huit noms a porter.
 */
.topcal-front .tcf-legend{
  display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;
  width:fit-content;max-width:100%;
  padding:9px 14px;border:1px solid var(--tcf-line);border-radius:12px;
  background:var(--tcf-surface);
  font-family:var(--tcf-mono);font-size:.68rem;line-height:1.5;color:var(--tcf-ink-2);
}
.topcal-front .tcf-legend span{display:inline-flex;align-items:center;gap:7px}
.topcal-front .tcf-legend i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
/* La nomenclature. Elle nommait quatre ETATS ; elle nomme les SEANCES. */
.topcal-front .tcf-legend .tcf-ev-0{background:var(--tcf-ev-0)}
.topcal-front .tcf-legend .tcf-ev-1{background:var(--tcf-ev-1)}
.topcal-front .tcf-legend .tcf-ev-2{background:var(--tcf-ev-2)}
.topcal-front .tcf-legend .tcf-ev-3{background:var(--tcf-ev-3)}
.topcal-front .tcf-legend .tcf-ev-4{background:var(--tcf-ev-4)}
.topcal-front .tcf-legend .tcf-ev-5{background:var(--tcf-ev-5)}
.topcal-front .tcf-legend .tcf-ev-6{background:var(--tcf-ev-6)}
.topcal-front .tcf-legend .tcf-ev-7{background:var(--tcf-ev-7)}
.topcal-front .tcf-legend .tcf-ev-8{background:var(--tcf-ev-8)}

/* ══ BARRE DE VUE — UNE CARTE VIDE A NEUF DIXIEMES N'EST PAS UNE CARTE ════
 *
 * Elle portait un fond, une bordure, un rayon et seize pixels de rembourrage
 * — c'est-a-dire tout le vocabulaire d'une carte — pour ne contenir QU'UN
 * groupe d'onglets de 190 px, pousse a droite par `margin-left:auto`.
 *
 * Mesure du 01/09 sur la vue Liste en 1 200 px : la barre fait 1 136 px de
 * large, son contenu 190. Neuf cent quarante-six pixels de boite vide, en
 * haut de la page publique — la premiere chose que voit un visiteur, et deux
 * des quatre captures que le proprietaire a envoyees.
 *
 * Un selecteur de vue est un CONTROLE, pas un panneau. Il se pose seul, a
 * gauche, la ou commence tout le reste de la page. La boite disparait ; il ne
 * restait rien a mettre dedans.
 *
 * `margin-left` devient `margin-inline-start` — la barre existe aussi en
 * arabe, ou « a gauche » veut dire a droite. */
.topcal-front .tcf-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:2.4rem;
}
.topcal-front .tcf-views{
  display:inline-flex;background:var(--tcf-bg);border:1px solid var(--tcf-line);
  border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap;
}
.topcal-front .tcf-views a{
  font-family:var(--tcf-mono);font-size:.74rem;padding:9px 15px;border-radius:10px;
  color:var(--tcf-ink-2);text-decoration:none;min-height:38px;display:inline-flex;align-items:center;
}
.topcal-front .tcf-views a[aria-current]{background:var(--tcf-surface);color:var(--tcf-ink);box-shadow:0 1px 2px rgba(23,19,16,.06)}

/* ══════════════════ LE CRENEAU — LA BRIQUE DES TROIS VUES ═══════════════
 *
 * ── CE QUI A DISPARU, ET POURQUOI ────────────────────────────────────────
 *
 * `.tcf-date` : un bloc de 74 px portant trois lettres de jour au-dessus d'un
 * chiffre de 2,4 rem. C'est LE trait reconnaissable de The Events Calendar et
 * des greffons qui l'ont copie ; nous l'avions au pixel pres. Le proprietaire
 * a demande le 02/09 que le calendrier public cesse d'y ressembler.
 *
 * Ce n'est pas qu'une question d'apparence. Un agenda d'evenements ANNONCE :
 * sa question est « qu'est-ce qui se passe, et quand ». Un moteur de
 * reservation VEND UNE PLACE : sa question est « puis-je encore venir, et a
 * quelle heure ». La date en gros chiffres repond a la premiere ; l'heure et
 * les places restantes repondent a la seconde.
 *
 * Trois consequences dans cette feuille :
 *
 * · la journee devient un TITRE (`.tcf-jour-titre`), annonce une fois, au
 *   lieu de se repeter a chaque ligne — un samedi a trois seances affichait
 *   trois fois « SAM 5 » ;
 * · l'HEURE prend la premiere colonne, en chasse fixe, alignee — la forme
 *   d'un carnet de rendez-vous, pas celle d'une affiche ;
 * · la JAUGE de places remplace la mention seule. C'est la donnee que nous
 *   sommes seuls a avoir : un agenda d'evenements ne sait pas combien il
 *   reste de places, parce qu'il ne vend rien.
 */

/* Le mois : un surtitre discret. Il change douze fois par an quand la journee
   change tous les jours — l'oeil doit pouvoir les hierarchiser. */
.topcal-front .tcf-mois{display:flex;align-items:center;gap:18px;margin:3.2rem 0 0}
.topcal-front .tcf-mois:first-of-type{margin-top:0}
.topcal-front .tcf-mois span{
  font-family:var(--tcf-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tcf-ink-3);white-space:nowrap;
}
.topcal-front .tcf-mois i{flex:1;height:1px;background:var(--tcf-line);display:block}

/* La journee : le vrai titre de la liste.
 *
 * ⚠ `::first-letter`, ET SURTOUT PAS `capitalize`.
 *
 * `wp_date('l j F')` rend « mercredi 2 septembre ». `text-transform:capitalize`
 * met une majuscule a CHAQUE mot : « Mercredi 2 Septembre ». En francais, un
 * mois ne prend pas de majuscule — pas plus qu'un jour de la semaine — et la
 * faute se voit sur chaque titre de chaque journee de chaque liste.
 *
 * Elle ne se verrait pas en anglais, ou « Wednesday 2 September » est correct.
 * C'est le genre de defaut qu'une seule langue revele, et le francais est la
 * langue du proprietaire. */
.topcal-front .tcf-jour-titre{
  font-size:1.15rem;margin:1.9rem 0 .2rem;color:var(--tcf-ink);
}
.topcal-front .tcf-jour-titre::first-letter,
.topcal-front .tcf-jour-h h3::first-letter{text-transform:uppercase}

.topcal-front .tcf-creneau{
  display:grid;grid-template-columns:var(--tcf-col-heure,128px) minmax(0,1fr) auto;
  gap:28px;align-items:start;
  padding:1.35rem 0;border-top:1px solid var(--tcf-line);
}
.topcal-front .tcf-creneau > *{min-width:0}
/* La ligne porte la teinte de sa seance sur son bord de depart — c'est ce qui
   rattache la nomenclature a la vue Liste, ou il n'y a pas de pave. Un filet,
   pas un fond : quatorze jours de lignes teintees feraient un damier. */
.topcal-front .tcf-creneau.tcf-ev-1{box-shadow:inset 3px 0 0 var(--tcf-ev-1)}
.topcal-front .tcf-creneau.tcf-ev-2{box-shadow:inset 3px 0 0 var(--tcf-ev-2)}
.topcal-front .tcf-creneau.tcf-ev-3{box-shadow:inset 3px 0 0 var(--tcf-ev-3)}
.topcal-front .tcf-creneau.tcf-ev-4{box-shadow:inset 3px 0 0 var(--tcf-ev-4)}
.topcal-front .tcf-creneau.tcf-ev-5{box-shadow:inset 3px 0 0 var(--tcf-ev-5)}
.topcal-front .tcf-creneau.tcf-ev-6{box-shadow:inset 3px 0 0 var(--tcf-ev-6)}
.topcal-front .tcf-creneau.tcf-ev-7{box-shadow:inset 3px 0 0 var(--tcf-ev-7)}
.topcal-front .tcf-creneau.tcf-ev-8{box-shadow:inset 3px 0 0 var(--tcf-ev-8)}
.topcal-front .tcf-creneau[class*="tcf-ev-"]:not(.tcf-ev-0){padding-inline-start:16px}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-1{box-shadow:inset -3px 0 0 var(--tcf-ev-1)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-2{box-shadow:inset -3px 0 0 var(--tcf-ev-2)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-3{box-shadow:inset -3px 0 0 var(--tcf-ev-3)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-4{box-shadow:inset -3px 0 0 var(--tcf-ev-4)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-5{box-shadow:inset -3px 0 0 var(--tcf-ev-5)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-6{box-shadow:inset -3px 0 0 var(--tcf-ev-6)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-7{box-shadow:inset -3px 0 0 var(--tcf-ev-7)}
[dir="rtl"] .topcal-front .tcf-creneau.tcf-ev-8{box-shadow:inset -3px 0 0 var(--tcf-ev-8)}
/* L'heure : chasse fixe et chiffres tabulaires. Sans eux, « 9 » est plus
   etroit que « 18 » et la colonne danse d'une ligne a l'autre.
 *
 * `white-space:nowrap` et 128 px : a 104, « 09:00 — 12:00 » se coupait APRES
 * le tiret, et l'heure de fin tombait seule sur une deuxieme ligne. Une plage
 * horaire brisee au milieu se lit comme deux horaires.
 *
 * Le decalage haut aligne le chiffre sur la premiere ligne du titre, qui est
 * plus grand : sans lui, l'heure flotte deux pixels trop haut. */
.topcal-front .tcf-heure{
  font-family:var(--tcf-mono);font-size:.84rem;color:var(--tcf-ink);
  font-variant-numeric:tabular-nums;line-height:1.5;
  white-space:nowrap;padding-top:.2rem;
}
/* La colonne du milieu. Elle porte le titre, la description et la jauge —
   c'est-a-dire tout ce qui se lit, et rien de ce qui s'aligne. */
.topcal-front .tcf-corps{display:flex;flex-direction:column}
.topcal-front .tcf-creneau h3{font-size:1.22rem;margin:0;line-height:1.35}
.topcal-front .tcf-desc{
  margin:.4rem 0 0;color:var(--tcf-ink-2);font-size:.9rem;line-height:1.55;max-width:58ch;
}
/* Le prix ET le bouton sur UNE ligne.
 *
 * Empiles, ils ajoutaient a chaque creneau la hauteur du bouton sous celle du
 * prix — et le bouton se retrouvait plus bas que la jauge de sa propre ligne,
 * donc visuellement detache d'elle. Sur quatorze jours de liste, ces deux
 * lignes de trop par creneau font une page deux fois plus longue pour la meme
 * information.
 *
 * Cote a cote, ils se lisent comme ce qu'ils sont : un prix, et le geste qui
 * l'accepte. */
.topcal-front .tcf-action{
  text-align:end;display:flex;flex-direction:row;align-items:center;
  justify-content:flex-end;gap:18px;padding-top:.1rem;
}
.topcal-front .tcf-price,.topcal-front .tcf-action .amount{
  display:block;font-size:1.32rem;font-variant-numeric:tabular-nums;
}

/* ── LA JAUGE DE PLACES ──────────────────────────────────────────────────
 *
 * `--tcf-part` est ECRITE PAR LE PHP et ne porte qu'une donnee : la part de
 * places deja prises. La feuille decide seule de la couleur et de la forme —
 * c'est la regle du depot depuis le premier jour, aucune couleur en dur dans
 * du PHP.
 *
 * Le repli `0%` n'est pas decoratif : si un jour la variable n'etait pas
 * ecrite, la barre serait VIDE — « personne n'a reserve » — plutot que
 * pleine, qui dirait « complet » et ferait fuir un client sur un creneau
 * libre. Entre deux erreurs possibles, on choisit celle qui ne coute pas une
 * vente. */
.topcal-front .tcf-jauge{display:flex;align-items:center;gap:12px;margin:.75rem 0 0;flex-wrap:wrap}
.topcal-front .tcf-jauge-barre{
  width:132px;height:5px;border-radius:100px;flex:none;
  background:var(--tcf-line);overflow:hidden;display:block;
}
.topcal-front .tcf-jauge-barre i{
  display:block;height:100%;border-radius:inherit;
  width:var(--tcf-part,0%);background:var(--tcf-free);
}
.topcal-front .is-tight .tcf-jauge-barre i{background:var(--tcf-tight)}
.topcal-front .is-full .tcf-jauge-barre i{background:var(--tcf-full)}
.topcal-front .is-closed .tcf-jauge-barre i{background:var(--tcf-closed)}
.topcal-front .tcf-jauge-txt{font-family:var(--tcf-mono);font-size:.74rem;color:var(--tcf-ink-2)}

/* Sans capacite, pas de barre — une jauge sans denominateur serait un
   mensonge dessine. La pastille et la phrase suffisent. */
.topcal-front .tcf-etat{display:flex;align-items:center;gap:12px;margin:.75rem 0 0;flex-wrap:wrap}
.topcal-front .tcf-etat-txt{font-family:var(--tcf-mono);font-size:.74rem;color:var(--tcf-ink-2)}

/* ── VUE MOIS ───────────────────────────────────────────────────────────── */
/* ══ LA GRILLE DU MOIS TIENT DANS UN ECRAN, ET C'EST UNE CONTRAINTE ══════
 *
 * Mesure du 02/09 en 1 200 px : chaque case faisait 149 x 149 px pour une
 * encre de 14 x 22 — un numero de jour et un point de 7 px. Vingt-deux mille
 * pixels carres de boite pour quatre cents d'information, et la grille
 * entiere montait a 825 px de haut : plus qu'un ecran d'ordinateur portable.
 * Le panneau de la journee depliee tombait donc sous la ligne de flottaison,
 * c'est-a-dire hors de vue au moment meme ou on vient de le demander.
 *
 * ── LA CAUSE ETAIT `aspect-ratio:1` ─────────────────────────────────────
 *
 * Il attache la hauteur a la largeur, SANS BORNE. Sept colonnes dans 1 100 px
 * font 149 px de large, donc 149 de haut. Sur un ecran plus large encore,
 * elles auraient continue de grossir. Une case de calendrier n'a pourtant
 * aucune raison d'etre carree : ce qu'elle porte ne grandit pas avec l'ecran.
 *
 * Une hauteur FIXE, donc, et la largeur reste elastique. La grille passe de
 * 825 px a environ 390 : le mois et la journee depliee tiennent ensemble dans
 * un ecran, ce qui est toute la raison d'avoir mis la journee sous la
 * grille. */
.topcal-front .tcf-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  max-width:var(--tcf-cal-max,760px)}
.topcal-front .tcf-cal .dow{
  font-family:var(--tcf-mono);font-size:.62rem;letter-spacing:.14em;color:var(--tcf-ink-3);
  padding:0 0 1rem;text-align:center;text-transform:uppercase;
}
/* ── DE VRAIS PETITS CARRES ──────────────────────────────────────────────
 *
 * Largeur ET hauteur fixes, egales : la case est un carre de 56 px, centre
 * dans sa colonne. La grille, elle, reste elastique — c'est ce qui permet au
 * bandeau de la journee de prendre les sept colonnes sans que les carres
 * enflent avec la place.
 *
 * C'est la difference avec `aspect-ratio:1`, qui produisait le meme carre
 * mais SANS BORNE : a 1 100 px de colonne il valait 149 x 149. Ici la taille
 * est ecrite ; la colonne peut grandir, le carre non. `GRILLE-01` verifie
 * exactement ca. */
.topcal-front .tcf-day{
  width:56px;height:56px;margin-inline:auto;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;
}
/* Un jour OUVERT est une carte ; un jour ferme n'en est pas une. La difference
   se voit avant meme de lire le point de couleur — c'est ce qui rend la grille
   lisible en un coup d'oeil plutot qu'en la dechiffrant. */
.topcal-front a.tcf-day{background:var(--tcf-surface);border:1px solid var(--tcf-line)}
.topcal-front a.tcf-day:hover{border-color:var(--tcf-ac)}
/* La case choisie : c'est elle que le panneau deplie, il faut pouvoir la
   retrouver sans relire la date. */
.topcal-front a.tcf-day.is-on{
  border-color:var(--tcf-ac);background:var(--tcf-ac);color:#fff;
  box-shadow:0 6px 18px -8px var(--tcf-ac);
}
.topcal-front .tcf-day .n{font-size:1.05rem;line-height:1}
.topcal-front .tcf-day.is-out .n{color:var(--tcf-ink-3);opacity:.4}
.topcal-front .tcf-day.is-closed .n{color:var(--tcf-ink-3)}
/* Un point PAR TYPE present ce jour-la, trois au maximum : la case fait 56 px
   et au-dela les points se touchent. */
.topcal-front .tcf-day .dots{display:flex;gap:3px;margin-top:6px;min-height:6px}
.topcal-front .tcf-day .dots i{width:6px;height:6px;border-radius:50%;display:block}
.topcal-front .tcf-day .dots .tcf-ev-0{background:var(--tcf-ev-0)}
.topcal-front .tcf-day .dots .tcf-ev-1{background:var(--tcf-ev-1)}
.topcal-front .tcf-day .dots .tcf-ev-2{background:var(--tcf-ev-2)}
.topcal-front .tcf-day .dots .tcf-ev-3{background:var(--tcf-ev-3)}
.topcal-front .tcf-day .dots .tcf-ev-4{background:var(--tcf-ev-4)}
.topcal-front .tcf-day .dots .tcf-ev-5{background:var(--tcf-ev-5)}
.topcal-front .tcf-day .dots .tcf-ev-6{background:var(--tcf-ev-6)}
.topcal-front .tcf-day .dots .tcf-ev-7{background:var(--tcf-ev-7)}
.topcal-front .tcf-day .dots .tcf-ev-8{background:var(--tcf-ev-8)}
/* Sur la case SELECTIONNEE, le fond est la couleur de marque : les points y
   disparaitraient. Ils passent en blanc — on ne lit plus le type sur cette
   case-la, mais on l'a sous les yeux dans le bandeau qu'elle vient d'ouvrir. */
.topcal-front a.tcf-day.is-on .dots i{background:#fff}

/* ══════════════ LA JOURNEE DEPLIEE SOUS LA GRILLE DU MOIS ═══════════════
 *
 * Cliquer une date ouvrait la vue Jour : on perdait la grille, donc le mois,
 * donc la comparaison entre les jours — qui est la seule raison de regarder
 * un calendrier. Le panneau la garde sous les yeux.
 *
 * Il est visiblement RATTACHE a la grille : meme surface, un filet de marque
 * en haut, et la case choisie porte la meme marque. Sans ce lien, un bloc
 * apparaissant sous une grille se lit comme un second contenu sans rapport. */
/* ══════ LA JOURNEE S'OUVRE SOUS SA SEMAINE, DANS LA GRILLE ══════════════
 *
 * Deux dessins ont ete essayes, et le proprietaire a tranche le 02/09.
 *
 * Une FENETRE par-dessus, avec un voile, laissait la grille immobile — son
 * seul avantage. Mais elle COUPE le calendrier : on ne voit plus les autres
 * jours pendant qu'on lit celui-la, et sur un telephone la feuille couvre
 * tout. Or comparer deux journees est precisement ce qu'on vient faire.
 *
 * Le bandeau prend les sept colonnes, a l'endroit meme ou la semaine finit.
 * `grid-column:1/-1` est ce qui garantit qu'il ne decale pas les jours
 * suivants : il occupe une rangee entiere, et le mois reprend dessous.
 *
 * ── ET C'EST DU HTML, PAS UN SCRIPT ──────────────────────────────────────
 *
 * Le mandat est net : « LE FRONT n'a aucun JavaScript de production
 * aujourd'hui : c'est une decision, pas un oubli. » Il n'y en a pas besoin :
 * le SERVEUR sait deja quelle journee est ouverte, `topcal_date` le lui dit.
 * Le bandeau est du HTML present dans la page, donc INDEXE, donc partageable
 * par son adresse, et il s'ouvre meme si le script du theme a plante. */
.topcal-front .tcf-jour{
  grid-column:1 / -1;
  margin:.5rem 0;padding:.95rem 1.1rem 1rem;
  background:var(--tcf-surface);border:1px solid var(--tcf-line);
  border-top:2px solid var(--tcf-ac);border-radius:var(--tcf-r);
  scroll-margin-top:1.5rem;
}
/* La croix. Cible de 40 px : un « × » de 16 px se rate au doigt. */
/* 34 px et non 44 : ce n'est pas une cible principale — on referme le bandeau
   en cliquant une autre date, ce que la grille offre partout autour. Sur
   telephone elle reprend sa taille de doigt, plus bas. */
.topcal-front .tcf-fermer{
  margin-inline-start:auto;flex:none;
  width:34px;height:34px;margin-block:-4px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;color:var(--tcf-ink-2);text-decoration:none;
}
.topcal-front .tcf-fermer:hover{background:var(--tcf-bg);color:var(--tcf-ink)}
.topcal-front .tcf-jour:focus{outline:none}
/* `nowrap`, et l'eyebrow qui cede.
 *
 * En `wrap`, sur un telephone de 390 px, la croix ne tenait plus sur la
 * premiere ligne et passait dessous : quarante pixels de hauteur pour un
 * caractere, dans un encart qu'on venait justement de reduire de moitie.
 *
 * L'en-tete tient donc sur une ligne, et c'est le compte de seances qui se
 * laisse tronquer s'il le faut — c'est la seule des trois informations dont on
 * peut se passer : la date se lit deja dans la case selectionnee, et la croix
 * est un geste. */
.topcal-front .tcf-jour-h{
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  padding-bottom:.65rem;border-bottom:1px solid var(--tcf-line);
}
.topcal-front .tcf-jour-h h3{flex:none}
.topcal-front .tcf-jour-h .tcf-eyebrow{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topcal-front .tcf-jour-h h3{margin:0;font-size:1rem}
.topcal-front .tcf-jour .tcf-creneau:first-of-type{border-top:none}
.topcal-front .tcf-jour-vide{margin:1.3rem 0 1.7rem;color:var(--tcf-ink-2);font-size:.95rem}

/* ══════════════ LE SELECTEUR D'HEURES — LA JOURNEE, EN BOUTONS ══════════
 *
 * Le bandeau montrait des LIGNES completes : heure, titre, description, jauge,
 * prix, bouton. C'est la bonne forme pour parcourir quatorze jours ; c'en est
 * une mauvaise pour choisir une heure dans une journee qu'on a deja choisie.
 *
 * `auto-fill` et non `auto-fit` : a trois creneaux dans une largeur qui en
 * tiendrait six, `auto-fit` etire chaque bouton sur deux cents pixels et la
 * grille cesse d'etre une grille. `auto-fill` garde le pas, et les boutons
 * gardent la taille d'un bouton. */
/* ── LE NOM A COTE DE SES HEURES, PAS AU-DESSUS ──────────────────────────
 *
 * Mesure du 02/09 : l'encart faisait 760 x 451 px pour montrer TROIS boutons.
 * Le nom de chaque seance occupait sa propre ligne au-dessus de sa grille —
 * vingt-quatre pixels, plus vingt-deux de marge, TROIS fois — pour un mot.
 *
 * Cote a cote, le nom et ses heures partagent la meme rangee. La colonne du
 * nom est fixe : trois noms de longueurs differentes qui commenceraient
 * chacun a un endroit different rendraient la lecture verticale impossible. */
.topcal-front .tcf-g + .tcf-g{margin-top:.55rem}
@media (min-width:560px){
  .topcal-front .tcf-g.nomme{
    display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
    gap:14px;align-items:center;
  }
}
/* ── TROIS COLONNES, DES PAVES PLEINS, L'HEURE AU MILIEU ─────────────────
 *
 * Disposition demandee par le proprietaire le 02/09, capture a l'appui. Elle
 * remplace une grille `auto-fill` de petits boutons bordes.
 *
 * TROIS colonnes fixes, et non `auto-fill` : c'est ce qui donne aux paves leur
 * proportion — larges, poses, lisibles de loin. En `auto-fill`, le nombre de
 * colonnes suit la place disponible, et le meme ecran rend six boutons etroits
 * ici et trois larges la. La disposition demandee est une PROPORTION, pas une
 * densite maximale.
 *
 * ⚠ Elle occupe plus de place que ce qu'elle remplace, et c'est assume : la
 * demande precedente etait « que l'encart soit plus petit ». Les paves valent
 * plus haut. Le choix est au proprietaire ; le nom de la seance reste a COTE
 * de ses heures, ce qui garde l'essentiel de l'economie d'hier. */
.topcal-front .tcf-heures{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin:.6rem 0 0;
}
.topcal-front .tcf-g.nomme .tcf-heures{margin:0}
/* Pas de bordure : c'est le FOND qui dessine le pave. Une bordure en plus du
   fond ferait deux contours pour une seule forme, et douze fois de suite ca
   se voit comme une grille de tableur. */
.topcal-front .tcf-heure-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:56px;padding:12px 8px;
  border:0;border-radius:12px;
  background:var(--tcf-fill);color:var(--tcf-ink);text-decoration:none;
  transition:background .15s,color .15s;
}
/* ⚠ PAS DE CHASSE FIXE ICI, ET C'EST UNE EXCEPTION ASSUMEE.
 *
 * L'en-tete de cette feuille pose `--tcf-mono` sur les horaires, et sa raison
 * est bonne : « un horaire en police proportionnelle danse quand les chiffres
 * changent, et une colonne d'heures qui danse est illisible ». Elle vise une
 * COLONNE d'heures alignees a gauche, comme dans la vue Liste.
 *
 * Ici les heures sont CENTREES dans des cellules de grille de largeur egale :
 * rien ne peut danser, la cellule ne bouge pas. Et `tabular-nums` aligne deja
 * les chiffres entre eux. La police du theme donne le pave de la capture ; le
 * mono donnait un ticket de caisse. */
.topcal-front .tcf-heure-btn .h{
  font-size:1.05rem;font-variant-numeric:tabular-nums;line-height:1.2;
}
/* La duree est une PRECISION, pas une seconde information : plus petite, plus
   pale, et elle ne se montre que si l'evenement en declare une fixe. */
.topcal-front .tcf-heure-btn .d{font-size:.72rem;color:var(--tcf-ink-3);line-height:1.2;margin-top:1px}

/* ── LE PAVE PREND LA TEINTE DE SA SEANCE ────────────────────────────────
 *
 * Le fond doux, et le trait sur le bord de depart. Le fond seul ne suffit
 * pas : huit teintes desaturees a ce point se confondent deux a deux sur un
 * ecran mal calibre. Le trait de 3 px porte la couleur pleine, celle de la
 * nomenclature, et c'est lui qu'on retrouve dans la legende.
 *
 * ⚠ « DERNIERES PLACES » NE PASSE PLUS PAR LA. Une meme dimension ne peut pas
 * dire deux choses : depuis que la couleur nomme le type, une teinte ambre
 * signifierait a la fois « seance du soir » et « il en reste peu », et la
 * nomenclature ne pourrait pas la decoder. L'etat reste ecrit — dans le
 * `aria-label` du pave, sur l'ecran de reservation, et en toutes lettres dans
 * la vue Liste. « Complet », lui, n'a jamais dependu de la couleur : le pave
 * est BARRE et ce n'est pas un lien. */
.topcal-front .tcf-heure-btn.tcf-ev-0{background:var(--tcf-fill)}
.topcal-front .tcf-heure-btn.tcf-ev-1{background:var(--tcf-ev-1-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-1)}
.topcal-front .tcf-heure-btn.tcf-ev-2{background:var(--tcf-ev-2-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-2)}
.topcal-front .tcf-heure-btn.tcf-ev-3{background:var(--tcf-ev-3-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-3)}
.topcal-front .tcf-heure-btn.tcf-ev-4{background:var(--tcf-ev-4-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-4)}
.topcal-front .tcf-heure-btn.tcf-ev-5{background:var(--tcf-ev-5-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-5)}
.topcal-front .tcf-heure-btn.tcf-ev-6{background:var(--tcf-ev-6-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-6)}
.topcal-front .tcf-heure-btn.tcf-ev-7{background:var(--tcf-ev-7-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-7)}
.topcal-front .tcf-heure-btn.tcf-ev-8{background:var(--tcf-ev-8-doux);box-shadow:inset 3px 0 0 var(--tcf-ev-8)}
/* `inset-inline` n'existe pas pour `box-shadow` : en ecriture arabe le trait
   resterait a gauche. On le retourne a la main. */
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-1{box-shadow:inset -3px 0 0 var(--tcf-ev-1)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-2{box-shadow:inset -3px 0 0 var(--tcf-ev-2)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-3{box-shadow:inset -3px 0 0 var(--tcf-ev-3)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-4{box-shadow:inset -3px 0 0 var(--tcf-ev-4)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-5{box-shadow:inset -3px 0 0 var(--tcf-ev-5)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-6{box-shadow:inset -3px 0 0 var(--tcf-ev-6)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-7{box-shadow:inset -3px 0 0 var(--tcf-ev-7)}
[dir="rtl"] .topcal-front .tcf-heure-btn.tcf-ev-8{box-shadow:inset -3px 0 0 var(--tcf-ev-8)}
.topcal-front a.tcf-heure-btn:hover{filter:brightness(.97)}
/* COMPLET : visible — savoir que ce creneau existe est une information — mais
   pas cliquable. C'est un `<span>` cote serveur, pas un lien desactive. */
.topcal-front .tcf-heure-btn.est-plein{
  color:var(--tcf-ink-3);background:var(--tcf-bg);
  box-shadow:inset 0 0 0 1px var(--tcf-line);cursor:default;
  text-decoration:line-through;text-decoration-thickness:1px;
}

/* Le nom de la seance, quand la journee en porte plusieurs. */
.topcal-front .tcf-groupe{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:.55rem 0 0;font-size:.88rem;line-height:1.3;color:var(--tcf-ink);
}
@media (min-width:560px){
  /* En colonne, le nom et le prix s'EMPILENT.
   *
   * `display:block` seul les collait : « Seance decouverte45,00 € ». Le `gap`
   * du flex tenait l'espace, et le passer en bloc l'a supprime sans que rien
   * ne le remplace. C'est le genre de defaut qu'on ne voit qu'en rendant —
   * dans le balisage, les deux elements sont toujours separes. */
  .topcal-front .tcf-g.nomme .tcf-groupe{margin:0;display:block}
  .topcal-front .tcf-g.nomme .tcf-groupe-prix{display:block;margin-top:1px}
}
.topcal-front .tcf-groupe-prix{font-family:var(--tcf-mono);font-size:.72rem;color:var(--tcf-ink-2)}
/* La pastille rattache le nom a sa teinte : sans elle, la nomenclature nomme
   des couleurs que rien ne relie a ce qu'on lit juste a cote. */
.topcal-front .tcf-groupe i{
  width:9px;height:9px;border-radius:50%;display:inline-block;
  margin-inline-end:7px;vertical-align:baseline;
}
.topcal-front .tcf-groupe .tcf-ev-0{background:var(--tcf-ev-0)}
.topcal-front .tcf-groupe .tcf-ev-1{background:var(--tcf-ev-1)}
.topcal-front .tcf-groupe .tcf-ev-2{background:var(--tcf-ev-2)}
.topcal-front .tcf-groupe .tcf-ev-3{background:var(--tcf-ev-3)}
.topcal-front .tcf-groupe .tcf-ev-4{background:var(--tcf-ev-4)}
.topcal-front .tcf-groupe .tcf-ev-5{background:var(--tcf-ev-5)}
.topcal-front .tcf-groupe .tcf-ev-6{background:var(--tcf-ev-6)}
.topcal-front .tcf-groupe .tcf-ev-7{background:var(--tcf-ev-7)}
.topcal-front .tcf-groupe .tcf-ev-8{background:var(--tcf-ev-8)}

/* ── VUE CARTES ─────────────────────────────────────────────────────────── */
.topcal-front .tcf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.topcal-front .tcf-cards > *{min-width:0}
.topcal-front .tcf-card{
  background:var(--tcf-surface);border:1px solid var(--tcf-line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
}
/* `.fig` reste dessine : le jour ou un evenement porte une image, elle a sa
   place. Ce qui a disparu, c'est la boite RENDUE SANS image — voir
   `TOPCAL_Front::view_cards()`. */
/* Le liesere de type, comme sur un creneau. `overflow:hidden` sur la carte
   couperait une ombre interieure au rayon : on la pose donc en bordure. */
.topcal-front .tcf-card.tcf-ev-1{border-inline-start:3px solid var(--tcf-ev-1)}
.topcal-front .tcf-card.tcf-ev-2{border-inline-start:3px solid var(--tcf-ev-2)}
.topcal-front .tcf-card.tcf-ev-3{border-inline-start:3px solid var(--tcf-ev-3)}
.topcal-front .tcf-card.tcf-ev-4{border-inline-start:3px solid var(--tcf-ev-4)}
.topcal-front .tcf-card.tcf-ev-5{border-inline-start:3px solid var(--tcf-ev-5)}
.topcal-front .tcf-card.tcf-ev-6{border-inline-start:3px solid var(--tcf-ev-6)}
.topcal-front .tcf-card.tcf-ev-7{border-inline-start:3px solid var(--tcf-ev-7)}
.topcal-front .tcf-card.tcf-ev-8{border-inline-start:3px solid var(--tcf-ev-8)}
.topcal-front .tcf-card .fig{height:132px;position:relative;display:grid;place-items:center;background:var(--tcf-closed-soft)}
.topcal-front .tcf-card .fig img{width:100%;height:100%;object-fit:cover}
.topcal-front .tcf-card .fig .tcf-state{position:absolute;top:12px;inset-inline-end:12px}
/* ── LA MEME FIGURE, PLUS HAUTE, SUR L'ECRAN DE RESERVATION ───────────────
   C'est l'ecran ou l'on decide : la photo y merite plus que 132 px. Elle
   garde son `object-fit:cover`, donc une photo verticale ne deforme pas —
   elle se recadre. `aspect-ratio` plutot qu'une hauteur fixe : sur un
   telephone, une bande de 220 px de haut sur 360 de large mange l'ecran. */
.topcal-front .tcf-book .fig{aspect-ratio:16/9;max-height:280px;border-radius:14px;overflow:hidden;
  margin-bottom:20px;background:var(--tcf-closed-soft)}
.topcal-front .tcf-book .fig img{width:100%;height:100%;object-fit:cover;display:block}
.topcal-front .tcf-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.topcal-front .tcf-card .when{font-family:var(--tcf-mono);font-size:.7rem;color:var(--tcf-ink-3)}
.topcal-front .tcf-card h3{font-size:1.35rem;margin:8px 0 0}
.topcal-front .tcf-card .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.topcal-front .tcf-card .left{font-family:var(--tcf-mono);font-size:.72rem;color:var(--tcf-ink-2)}
.topcal-front .tcf-card .amount{font-size:1.5rem;margin:18px 0 16px;display:block}
.topcal-front .tcf-card .act{margin-top:auto}
.topcal-front .tcf-card .act > *{width:100%}

/* ── FORMULAIRE DE RESERVATION ──────────────────────────────────────────── */
.topcal-front .tcf-book{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start}
.topcal-front .tcf-book > *{min-width:0}
.topcal-front .tcf-panel{
  background:var(--tcf-surface);border:1px solid var(--tcf-line);
  border-radius:16px;padding:26px;position:sticky;top:24px;
}
.topcal-front .tcf-count{display:inline-flex;align-items:center;gap:14px}
.topcal-front .tcf-count button{
  width:var(--tcf-touch);height:var(--tcf-touch);border-radius:var(--tcf-r-sm);
  border:1px solid var(--tcf-line);background:var(--tcf-surface);color:var(--tcf-ink-2);
  display:grid;place-items:center;font-family:var(--tcf-mono);font-size:1.05rem;cursor:pointer;
}
.topcal-front .tcf-count button:hover:not(:disabled){border-color:var(--tcf-ac);color:var(--tcf-ac)}
.topcal-front .tcf-count button:disabled{opacity:.4;cursor:not-allowed}
.topcal-front .tcf-count output{font-size:1.7rem;min-width:34px;text-align:center}

.topcal-front .tcf-opt{
  display:flex;align-items:flex-start;gap:13px;padding:13px 0;
  border-top:1px solid var(--tcf-line);cursor:pointer;
}
.topcal-front .tcf-opt.is-out{opacity:.55;cursor:not-allowed}
.topcal-front .tcf-opt input{
  width:22px;height:22px;flex:none;margin:0;accent-color:var(--tcf-ac);cursor:inherit;
}
.topcal-front .tcf-opt .lbl{flex:1;min-width:0}
.topcal-front .tcf-opt .lbl b{font-weight:600;font-size:.96rem}
.topcal-front .tcf-opt .lbl small{display:block;font-family:var(--tcf-mono);font-size:.68rem;color:var(--tcf-ink-3);margin-top:2px}
.topcal-front .tcf-opt.is-out .lbl small{color:var(--tcf-full)}
.topcal-front .tcf-opt .amount{font-family:var(--tcf-mono);font-size:.82rem;color:var(--tcf-ink-2);flex:none}

.topcal-front .tcf-recap{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;padding:7px 0}
.topcal-front .tcf-recap span:first-child{color:var(--tcf-ink-2)}
.topcal-front .tcf-recap span:last-child{font-family:var(--tcf-mono);font-size:.84rem}
.topcal-front .tcf-total{
  border-top:1px solid var(--tcf-line);margin-top:12px;padding-top:16px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.topcal-front .tcf-total .amount{font-size:2rem}

/* ── CHOIX D'UNE UNITE ──────────────────────────────────────────────────── */
.topcal-front .tcf-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.topcal-front .tcf-units > *{min-width:0}
.topcal-front .tcf-unit{
  background:var(--tcf-surface);border:1px solid var(--tcf-line);border-radius:16px;
  overflow:hidden;position:relative;display:block;cursor:pointer;
}
.topcal-front .tcf-unit input{position:absolute;opacity:0;width:1px;height:1px}
.topcal-front .tcf-unit .fig{height:104px;display:grid;place-items:center;background:var(--tcf-closed-soft);font-size:1.9rem;color:var(--tcf-ink-3)}
.topcal-front .tcf-unit .body{padding:15px 16px 17px}
.topcal-front .tcf-unit .body b{font-size:1.3rem;font-weight:400}
.topcal-front .tcf-unit .body .ref{font-family:var(--tcf-mono);font-size:.66rem;color:var(--tcf-ink-3);margin-inline-start:9px}
.topcal-front .tcf-unit .body .desc{display:block;font-size:.86rem;color:var(--tcf-ink-2);margin-top:5px}
.topcal-front .tcf-unit .body .st{display:block;font-family:var(--tcf-mono);font-size:.68rem;margin-top:10px;color:var(--tcf-free)}
.topcal-front .tcf-unit:has(input:checked){border:2px solid var(--tcf-ac);box-shadow:0 0 0 4px rgba(23,19,16,.08)}
/* Repli sans `:has()` — le navigateur qui ne le connait pas doit quand meme
   montrer une selection, sinon le client coche sans retour visuel. */
.topcal-front .tcf-unit.is-picked{border:2px solid var(--tcf-ac);box-shadow:0 0 0 4px rgba(23,19,16,.08)}

/* ── ETATS VIDES ET ERREURS ─────────────────────────────────────────────── */
.topcal-front .tcf-empty{text-align:center;padding:3rem 1.4rem;color:var(--tcf-ink-2)}
.topcal-front .tcf-empty b{display:block;font-size:1.1rem;color:var(--tcf-ink);margin-bottom:.4rem}
.topcal-front .tcf-empty p{max-width:44ch;margin:0 auto;font-size:.92rem}

.topcal-front .tcf-errors{
  border:1px solid var(--tcf-full);background:var(--tcf-full-soft);color:var(--tcf-full);
  border-radius:var(--tcf-r-sm);padding:14px 16px;margin-bottom:1.6rem;
}
.topcal-front .tcf-errors ul{margin:.4rem 0 0;padding-inline-start:1.2rem}
.topcal-front .tcf-errors li{margin-top:.2rem}
.topcal-front .tcf-ok{
  border:1px solid var(--tcf-free);background:var(--tcf-free-soft);color:var(--tcf-free);
  border-radius:var(--tcf-r-sm);padding:14px 16px;margin-bottom:1.6rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .topcal-front .tcf-book{grid-template-columns:1fr;gap:32px}
  .topcal-front .tcf-panel{position:static}
}
@media (max-width:680px){
  /* Sous 680 px, sept colonnes donnent des cases de moins de 60 px : le numero
     du jour et son point ne tiennent plus ensemble. On garde la grille — un
     calendrier reste un calendrier — mais on relache le carre et on retire la
     bordure, qui devient du bruit a cette taille. */
  .topcal-front .tcf-cal{gap:4px}
  .topcal-front .tcf-day{width:40px;height:40px;padding:0}
  .topcal-front .tcf-day .n{font-size:.92rem}
  .topcal-front a.tcf-day{border-radius:10px}
  .topcal-front .tcf-day .n{font-size:1.05rem}

  /* Les lignes passent en deux temps : la date et le titre d'abord, le prix et
     l'action ensuite, pleine largeur. Une troisieme colonne de 90 px ecrase le
     titre sur trois lignes et le prix sur deux. */
  /* ── SOUS 680 px, LE CRENEAU S'EMPILE — IL NE SE RESSERRE PAS ────────
   *
   * J'avais d'abord garde deux colonnes en retrecissant celle de l'heure a
   * 74 px. L'heure porte `white-space:nowrap` — pour qu'une plage horaire ne
   * se coupe jamais au milieu — et « 09:00 — 12:00 » demande 110 px : elle
   * DEBORDAIT donc sa colonne et se dessinait PAR-DESSUS le titre. Mesure sur
   * l'apercu telephone du 02/09 : « 09:00 — 12:0Seance decouverte ».
   *
   * Deux regles justes chacune de leur cote — ne jamais couper un horaire, et
   * gagner de la place sur un telephone — se contredisaient une fois posees
   * ensemble. On ne resserre donc pas : on empile. Un ecran de 390 px n'a pas
   * trois colonnes a donner, et pretendre le contraire est ce qui produit un
   * chevauchement.
   */
  .topcal-front .tcf-creneau{grid-template-columns:minmax(0,1fr);gap:8px;padding:1.15rem 0}
  .topcal-front .tcf-heure{padding-top:0;font-size:.8rem;color:var(--tcf-ink-2)}
  .topcal-front .tcf-action{
    flex-direction:row;align-items:center;justify-content:flex-start;
    gap:16px;flex-wrap:wrap;text-align:start;padding-top:.35rem;
  }
  .topcal-front .tcf-jour{padding:.9rem .9rem 1rem}
  /* Le compte de seances DISPARAIT plutot que de se tronquer.
   *
   * « 3 SÉA… » se lit comme une panne, pas comme une abreviation. Et
   * l'information est deja la : les seances sont juste dessous, on les compte
   * en les regardant. Une troncature n'a de sens que quand ce qui reste
   * garde un sens. */
  .topcal-front .tcf-jour-h .tcf-eyebrow{display:none}
  /* La croix redevient une cible de doigt sur telephone. */
  .topcal-front .tcf-fermer{width:var(--tcf-touch);height:var(--tcf-touch);margin-block:-6px}
  .topcal-front .tcf-jauge-barre{width:96px}
  .topcal-front .tcf-lead h2{font-size:1.7rem}
  .topcal-front .tcf-views{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .topcal-front *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}