/* Les pages /castings/ (CFT-1514) : le hub et les fiches.
 *
 * La feuille Tailwind du site est PRÉ-COMPILÉE (voir le commentaire de styles.css sur
 * `.cf-btn`) : une classe qu'aucune page existante n'emploie n'a aucune règle. Tout ce que
 * ces pages ont en propre est donc écrit ici, sous le préfixe `cfc-`. L'en-tête, le pied, les
 * boutons (`.cf-btn`), l'étiquette (`.tag-chip`) et la typographie éditoriale
 * (`.article-body`) viennent de tailwind.css et de styles.css, inchangés.
 *
 * Les couleurs et les rayons sont ceux du site : encre #0A0A0A, teal #007692, ivoire #f6f4f1.
 * Une gouttière de 16 px sur téléphone, jamais de défilement horizontal.
 */

.cfc{--cfc-encre:#0A0A0A; --cfc-teal:#007692; --cfc-corps:rgba(0,0,0,.70);
  --cfc-muet:rgba(0,0,0,.55); --cfc-filet:rgba(0,0,0,.09);
  font-family:Geist,-apple-system,system-ui,"Segoe UI",Roboto,sans-serif; color:var(--cfc-encre);
  overflow-x:hidden}
.cfc *{box-sizing:border-box}

/* Un lien long, une ville sans espace : rien ne déborde. */
.cfc h1, .cfc h2, .cfc h3, .cfc p, .cfc li, .cfc dd{overflow-wrap:anywhere}

/* Les boutons portent parfois une longue phrase (« pour voir ce casting ») : ils la
   coupent au lieu de sortir de l'écran, ce que `.cf-btn{white-space:nowrap}` ne ferait pas. */
.cfc .cf-btn{white-space:normal; text-align:center; line-height:1.25; height:auto; min-height:48px;
  padding-top:12px; padding-bottom:12px; max-width:100%}

.cfc-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 22px;
  font-size:13px; color:var(--cfc-muet)}
.cfc-crumbs a{color:inherit; text-decoration:none}
.cfc-crumbs a:hover{color:var(--cfc-teal)}
.cfc-crumbs [aria-current]{color:var(--cfc-encre)}
.cfc-h1{margin:18px 0 0; font-size:30px; font-weight:500; letter-spacing:-.02em; line-height:1.12}

/* ── Une fiche : les faits ────────────────────────────────────────────────── */
.cfc-facts{margin:26px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--cfc-filet)}
.cfc-facts__row{display:grid; grid-template-columns:1fr; gap:2px; padding:14px 0;
  border-bottom:1px solid var(--cfc-filet)}
.cfc-facts dt{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cfc-muet)}
.cfc-facts dd{margin:0; font-size:17px; font-weight:500}
@media (min-width:600px){
  .cfc-facts__row{grid-template-columns:200px 1fr; gap:16px; align-items:baseline}
}

/* ── La fiche complète (CFT-1514, 2026-09-30) ─────────────────────────────── */
.cfc-detail h2{margin-top:28px}
.cfc-detail h2:first-child{margin-top:0}
.cfc-text p{margin:0 0 12px; font-size:16px; line-height:1.65; color:var(--cfc-corps)}
.cfc-roles{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cfc-roles li{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--cfc-filet); border-radius:12px}
.cfc-role__n{font-weight:500}
.cfc-role__m{font-size:14px; color:var(--cfc-muet)}
.cfc-closed{display:flex; flex-direction:column; gap:4px; margin:0 0 18px; padding:14px 16px; border-radius:12px;
  background:#fff4e5; border:1px solid #f0c890; color:#6b4300; font-size:15px}
/* ══════════════════════════════════════════════════════════════════════════
   LE HUB /castings/ (6 octobre 2026) : Figma « Castings publics », cadre 1200:3447.
   Préfixes : cfh- (la page) et cfk- (la carte). La page porte .rf-page : le fond gris,
   le bandeau noir, les boutons et le mouvement viennent de refonte.css / refonte.js.
   Les sections sont à 44 px l'une de l'autre (120 sur les autres pages de la refonte).
   ══════════════════════════════════════════════════════════════════════════ */
.cfh{--cfh-encre:#111110; --cfh-gris:#6b747c; --cfh-corps:#3f4750; --cfh-fond:#f5f6f7; --cfh-teal:#007692;
  overflow:visible}
.cfh .cfh-tete{margin-top:0; padding-top:28px}
.cfh .cfh-bloc{margin-top:44px}
.cfh-corps .cf-pied{padding-top:44px}
.cfh-h1{margin:0; font-size:32px; font-weight:600; line-height:1.1; letter-spacing:-.035em; color:var(--cfh-encre)}
.cfh-lead{max-width:774px; margin:20px 0 0; font-size:16px; line-height:1.2; letter-spacing:-.035em; color:#555}
@media (min-width:768px){
  .cfh .cfh-tete{padding-top:44px}
  .cfh-h1{font-size:40px}
}

/* ── Deux colonnes : les filtres, les résultats ───────────────────────────── */
.cfh-hub{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; align-items:start}
@media (min-width:1024px){ .cfh-hub{grid-template-columns:280px minmax(0, 1fr); gap:24px} }

.cfh-volet{border-radius:28px; background:#fff}
.cfh-volet > summary{display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 22px;
  font-size:15px; font-weight:500; color:var(--cfh-encre); cursor:pointer; list-style:none}
.cfh-volet > summary::-webkit-details-marker{display:none}
.cfh-volet > summary::after{content:""; width:8px; height:8px; margin-top:-4px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s ease}
.cfh-volet[open] > summary::after{margin-top:4px; transform:rotate(-135deg)}
@media (min-width:1024px){ .cfh-volet > summary{display:none} }

.cfh-filtres{display:flex; flex-direction:column; gap:26px; padding:8px 24px 28px}
@media (min-width:1024px){ .cfh-filtres{padding-top:24px} }
.cfh-recherche{display:block}
.cfh-recherche input{width:100%; height:46px; padding:0 18px; border:0; border-radius:999px; background:var(--cfh-fond);
  font:inherit; font-size:14px; color:var(--cfh-encre); outline:2px solid transparent;
  -webkit-appearance:none; appearance:none; transition:outline-color .25s ease, background-color .25s ease}
.cfh-recherche input::placeholder{color:var(--cfh-gris); opacity:1}
.cfh-recherche input:focus-visible{outline-color:var(--cfh-teal); background:#fff}
/* Un groupe = un menu déroulant : le titre, le rond noir du nombre de cases cochées, un chevron. */
.cfh-groupe{min-width:0}
.cfh-groupe > summary{display:flex; align-items:center; gap:8px; min-height:24px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:500; line-height:18px; color:var(--cfh-encre)}
.cfh-groupe > summary::-webkit-details-marker{display:none}
.cfh-groupe > summary::after{content:""; flex:none; width:7px; height:7px; margin:-4px 3px 0 auto; border-right:1.5px solid #9aa1a8;
  border-bottom:1.5px solid #9aa1a8; transform:rotate(45deg); transition:transform .25s ease, margin .25s ease}
.cfh-groupe[open] > summary::after{margin-top:4px; transform:rotate(-135deg)}
.cfh-groupe > summary:hover::after{border-color:var(--cfh-encre)}
.cfh-groupe > summary:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:4px; border-radius:4px}
.cfh-groupe__titre{min-width:0}
.cfh-groupe__n{flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--cfh-encre);
  font-size:11px; font-weight:600; line-height:18px; color:#fff; text-align:center; font-variant-numeric:tabular-nums}
.cfh-groupe__n[hidden]{display:none}
.cfh-groupe__corps{padding:14px 0 4px}
.cfh-groupe[open] .cfh-groupe__corps{animation:cfh-deplie .3s cubic-bezier(.2,.7,.2,1)}
@keyframes cfh-deplie{from{opacity:0; transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){ .cfh-groupe[open] .cfh-groupe__corps{animation:none} }
.cfh-case{display:flex; align-items:center; gap:10px; cursor:pointer}
.cfh-case ~ .cfh-case{margin-top:12px}
.cfh-case input{flex:none; -webkit-appearance:none; appearance:none; width:18px; height:18px; margin:0;
  border:1.5px solid #c9ced3; border-radius:5px; background:#fff; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease}
.cfh-case input:checked{border-color:var(--cfh-encre); background:var(--cfh-encre)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 9.5l3 3 6-7'/></svg>") center/15px no-repeat}
.cfh-case input:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px}
.cfh-case__nom{flex:1; min-width:0; font-size:15px; line-height:20px; color:var(--cfh-corps)}
.cfh-case__n{flex:none; font-size:14px; line-height:18px; color:var(--cfh-gris); font-variant-numeric:tabular-nums}
.cfh-case:hover .cfh-case__nom{color:var(--cfh-encre)}
.cfh-effacer{align-self:flex-start; font-size:14px; font-weight:500; line-height:18px; color:var(--cfh-teal); text-decoration:none}
.cfh-effacer:hover{text-decoration:underline}

/* Les sections repliables de la colonne (Figma v6, 1453:10361) : titre 16 px, « − » ou « + » à
   droite, un filet entre deux sections, 22 px entre les groupes d'une section. */
.cfh-section + .cfh-section{padding-top:26px; border-top:1px solid #e5e7eb}
.cfh-section > summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
  font-size:16px; font-weight:600; line-height:21px; color:#111}
.cfh-section > summary::-webkit-details-marker{display:none}
.cfh-section > summary::after{content:"+"; font-weight:500; color:#6b7280}
.cfh-section[open] > summary::after{content:"\2212"}
.cfh-section > summary:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:4px; border-radius:4px}
.cfh-section__corps{display:flex; flex-direction:column; gap:18px; padding-top:20px}

/* Les dates, un seul menu (PO, 22 oct. 2026) : les plages toutes faites, « Du / Au », puis le
   calendrier (castings-hub.js). Début et fin en teal plein, les jours entre les deux teintés. */
.cfh-dates{display:flex; flex-direction:column}
.cfh-bornes{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px}
.cfh-borne{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border:1.5px solid #e5e7eb;
  border-radius:10px; background:#fff; font:inherit; text-align:left; cursor:pointer; transition:border-color .2s ease}
.cfh-borne span{font-size:12px; line-height:16px; color:var(--cfh-gris)}
.cfh-borne b{font-size:14px; font-weight:600; line-height:18px; color:var(--cfh-encre)}
.cfh-borne:hover{border-color:#c9ced3}
.cfh-borne.is-actif{border-color:var(--cfh-teal)}
.cfh-borne:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px}
.cfh-cal{margin-top:16px; padding:14px 10px 10px; border:1.5px solid #eceef0; border-radius:18px; background:#fff}
.cfh-cal:empty{display:none}
.cfh-cal__tetes{display:flex; align-items:center; justify-content:space-between; padding:0 2px; margin-bottom:10px}
.cfh-cal__mois{margin:0; font-size:15px; font-weight:600; line-height:20px; letter-spacing:-.01em; color:var(--cfh-encre)}
.cfh-cal__pas{display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:99px; background:#f3f4f5;
  color:var(--cfh-encre); cursor:pointer; transition:background-color .15s ease}
.cfh-cal__pas svg{width:14px; height:14px}
.cfh-cal__pas:hover:not(:disabled){background:#e6e8ea}
.cfh-cal__pas:disabled{background:none; color:#d3d7db; cursor:default}
.cfh-cal__pas:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px}
.cfh-cal__grille{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); row-gap:6px}
.cfh-cal__tete{display:grid; place-items:center; height:22px; margin-bottom:2px; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#9aa1a8}
/* Un jour : le rond dans le <span> (jamais plus large que sa colonne) ; la bande de la plage en ::before,
   de la hauteur du rond, arrondie au début, à la fin et au bout de chaque semaine. */
.cfh-cal__jour{position:relative; display:grid; place-items:center; padding:0; border:0; background:none;
  font:inherit; font-size:13px; font-weight:500; color:var(--cfh-encre); font-variant-numeric:tabular-nums; cursor:pointer}
.cfh-cal__jour span{position:relative; z-index:1; display:grid; place-items:center; width:100%; max-width:34px; aspect-ratio:1; border-radius:99px;
  transition:background-color .15s ease, color .15s ease}
.cfh-cal__jour::before{content:none; position:absolute; inset:0; background:#e3f1f5}
.cfh-cal__jour.is-plage::before{content:""}
.cfh-cal__jour.is-plage{color:#005a70}
.cfh-cal__jour.is-bord-g::before{left:calc(50% - min(17px, 50%)); border-radius:99px 0 0 99px}
.cfh-cal__jour.is-bord-d::before{right:calc(50% - min(17px, 50%)); border-radius:0 99px 99px 0}
.cfh-cal__jour.is-bord-g.is-bord-d::before{border-radius:99px}
/* Au début et à la fin, la bande part du centre du rond. */
.cfh-cal__jour.is-plage.is-debut::before{left:50%; border-radius:0}
.cfh-cal__jour.is-plage.is-fin::before{right:50%; border-radius:0}
.cfh-cal__jour.is-plage.is-debut.is-bord-d::before, .cfh-cal__jour.is-plage.is-fin.is-bord-g::before{content:none}
.cfh-cal__jour:hover:not(:disabled) span{background:#eef0f2}
.cfh-cal__jour.is-plage:hover:not(:disabled) span{background:#cde6ee}
.cfh-cal__jour:disabled{color:#c9ced3; font-weight:400; cursor:default}
.cfh-cal__jour.is-auj span::after{content:""; position:absolute; bottom:4px; left:50%; width:4px; height:4px; margin-left:-2px;
  border-radius:99px; background:var(--cfh-teal)}
.cfh-cal__jour.is-debut span, .cfh-cal__jour.is-fin span,
.cfh-cal__jour.is-debut:hover:not(:disabled) span, .cfh-cal__jour.is-fin:hover:not(:disabled) span{background:var(--cfh-teal); font-weight:600;
  color:#fff; box-shadow:0 2px 6px rgba(0,118,146,.28)}
.cfh-cal__jour.is-debut.is-auj span::after, .cfh-cal__jour.is-fin.is-auj span::after{background:#fff}
.cfh-cal__jour:focus-visible{outline:none}
.cfh-cal__jour:focus-visible span{outline:2px solid var(--cfh-teal); outline-offset:2px}

/* Le lieu : la note de l'onboarding, la ville de départ et « Utiliser ma position », le rayon. */
.cfh-lieu{display:flex; flex-direction:column; gap:18px}
.cfh-note{margin:0; font-size:13px; line-height:18px; color:var(--cfh-gris)}
.cfh-position{display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:14px; font-weight:500; line-height:18px; color:var(--cfh-teal)}
.cfh-position svg{width:16px; height:16px}
.cfh-position:hover span{text-decoration:underline}
.cfh-position:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px; border-radius:4px}
.cfh-position.is-attente{opacity:.5; pointer-events:none}
.cfh-position__erreur{margin:6px 0 0; font-size:13px; line-height:1.4; color:#B91C1C}

/* « + N autres » : une case sans nom (hors de l'adresse) qui montre les options repliées. */
.cfh-autres{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.cfh-autres:not(:checked) ~ .cfh-case--plus{display:none}
.cfh-autres__lien{display:block; margin-top:12px; cursor:pointer; font-size:14px; font-weight:500; line-height:18px; color:var(--cfh-teal)}
.cfh-autres__lien:hover{text-decoration:underline}
.cfh-autres:focus-visible ~ .cfh-autres__lien{outline:2px solid var(--cfh-teal); outline-offset:2px; border-radius:4px}
.cfh-autres:checked ~ .cfh-autres__lien .cfh-autres__plus, .cfh-autres:not(:checked) ~ .cfh-autres__lien .cfh-autres__moins{display:none}

/* ── Compte, filtres en cours et tri ─────────────────────── */
.cfh-barre{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px}
.cfh-actifs{flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.cfh-compte{margin-right:8px; font-size:16px; font-weight:500; line-height:1; letter-spacing:-.01em; color:var(--cfh-encre);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.cfh-actif{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 16px; border-radius:999px;
  background:#fff; font-size:14px; font-weight:500; line-height:1; color:var(--cfh-encre); text-decoration:none;
  white-space:nowrap; transition:background-color .25s ease, color .25s ease}
.cfh-actif span{font-size:17px; line-height:1; color:var(--cfh-gris); transition:color .25s ease}
.cfh-actif:hover{background:var(--cfh-encre); color:#fff}
.cfh-actif:hover span{color:#fff}
.cfh-actif:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px}
/* Le tri : une pilule qui ouvre un petit menu blanc (un <details>, pas le <select> gris du
   navigateur). Le choix en cours porte une coche teal. */
.cfh-options{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* CFT-1824: « Grouper par projet ». Une pilule qui bascule, partageable par l'adresse. */
.cfh-projets-bascule{display:inline-flex; align-items:center; height:48px; padding:0 20px; border-radius:999px;
  background:#fff; font-size:14px; font-weight:500; line-height:18px; color:var(--cfh-encre); text-decoration:none;
  white-space:nowrap; transition:background-color .25s ease, color .25s ease, box-shadow .25s ease}
.cfh-projets-bascule:hover{box-shadow:0 6px 18px rgba(17,17,16,.08)}
.cfh-projets-bascule.is-actif{background:var(--cfh-encre); color:#fff}
.cfh-projets-bascule:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px}
.cfh-tri{position:relative; z-index:5}
.cfh-tri > summary{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 20px; border-radius:999px;
  background:#fff; font-size:14px; line-height:18px; color:var(--cfh-gris); white-space:nowrap; cursor:pointer;
  list-style:none; user-select:none; transition:box-shadow .25s ease}
.cfh-tri > summary::-webkit-details-marker{display:none}
.cfh-tri > summary b{font-weight:500; color:var(--cfh-encre)}
.cfh-tri > summary::after{content:""; width:9px; height:6px; margin-left:2px; transition:transform .3s cubic-bezier(.22,1,.36,1);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23111110' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l4 4 4-4'/></svg>") center/9px no-repeat}
.cfh-tri > summary:hover, .cfh-tri[open] > summary{box-shadow:0 6px 18px rgba(17,17,16,.08)}
.cfh-tri[open] > summary::after{transform:rotate(180deg)}
.cfh-tri > summary:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:2px}
.cfh-tri__menu{position:absolute; top:calc(100% + 8px); right:0; min-width:100%; padding:6px; border-radius:20px;
  background:#fff; box-shadow:0 18px 44px rgba(17,17,16,.14); animation:cfh-menu .28s cubic-bezier(.22,1,.36,1)}
.cfh-tri__menu a{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:11px 14px;
  border-radius:14px; font-size:14px; font-weight:500; line-height:18px; color:var(--cfh-encre); text-decoration:none;
  white-space:nowrap; transition:background-color .2s ease}
.cfh-tri__menu a:hover, .cfh-tri__menu a:focus-visible{background:var(--cfh-fond); outline:0}
.cfh-tri__menu a.is-actif::after{content:""; width:14px; height:14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23007692' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 7.5l3 3 6-7'/></svg>") center/14px no-repeat}
@keyframes cfh-menu{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ── Les cartes ───────────────────────────────────────────────────────────── */
/* CFT-1824: « Grouper par projet ». Un projet qui a plusieurs castings garde une rangée
   entière, ses rôles côte à côte comme dans la liste normale. Un projet qui n'a qu'un
   casting ne prend qu'une carte de large : les projets se placent alors trois par rangée
   (deux, une sur mobile), au lieu de laisser deux trous sur chaque ligne.

   CFT-1894 (les deux questions du ticket) :
   - Largeur intermédiaire : le nombre de colonnes ne se devine pas par un point de rupture,
     il suit la place. Une colonne vaut au moins la largeur dont une carte a besoin
     (--cfh-carte-min) ET au moins le tiers de la rangée : trois colonnes quand il y a la
     place, deux ou une quand il n'y en a pas, sans saut brusque. Le plancher est 245 px : la
     liste non groupée pose déjà des cartes de 246 px à 1280, et il faut qu'une rangée de
     781 px (la colonne de résultats à 1240) porte encore trois rôles, comme avant ce lot.
   - Un rôle plus long que ses voisins : les rangées sont des RANGÉES DE GRILLE, donc la
     suivante démarre sous la carte la plus haute de la précédente, jamais sous chaque
     colonne prise séparément (ce serait une maçonnerie, pas une grille). */
.cfh-projets{display:flex; flex-direction:column; gap:28px}
.cfh-projets.is-groupe{
  --cfh-carte-min:245px;
  --cfh-carte-gap:23px;
  --cfh-colonne:max(min(100%, var(--cfh-carte-min)), calc((100% - 2 * var(--cfh-carte-gap)) / 3));
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--cfh-colonne), 1fr));
  gap:28px var(--cfh-carte-gap);
}
.cfh-projets.is-groupe .cfh-projet{display:flex; flex-direction:column; min-width:0}
.cfh-projets.is-groupe .cfh-projet > .cfh-cartes{grid-template-columns:minmax(0, 1fr)}
.cfh-projets.is-groupe .cfh-projet--large{grid-column:1 / -1}
/* Les rôles d'un projet qui a la rangée entière : même règle de place que les projets. */
.cfh-projets.is-groupe .cfh-projet--large > .cfh-cartes{
  grid-template-columns:repeat(auto-fill, minmax(var(--cfh-colonne), 1fr));
  gap:24px var(--cfh-carte-gap);
}
/* Sous 1024 px, la colonne de filtres passe au-dessus des résultats (cfh-hub) : la rangée
   occupe toute la page et une carte y garde la largeur confortable de la tablette. À partir de
   1024 px la colonne de filtres prend 280 px, la rangée rétrécit, et le plancher descend à
   245 px pour que trois rôles tiennent côte à côte sur un ordinateur portable. Ce n'est pas un
   appareil deviné : c'est le point où la page change de disposition. */
@media (max-width:1023px){ .cfh-projets.is-groupe{ --cfh-carte-min:300px } }
@media (min-width:640px){
  /* Deux lignes de titre réservées : les cartes d'une même rangée commencent à la même hauteur. */
  .cfh-projets.is-groupe .cfh-projet__titre{min-height:2.4em}
  /* Un projet sans titre garde la place de l'en-tête, sinon sa carte remonte au-dessus de ses voisines. */
  .cfh-projets.is-groupe .cfh-projet--sans-titre{padding-top:calc(clamp(18px, 2vw, 24px) * 2.4 + 16px)}
}
/* CFT-1894, second retest: UN TITRE LONG NE DÉCALE PLUS LES CARTES DE SA RANGÉE.
   Un titre de projet qui passait sur quatre lignes poussait SA carte plus bas que ses
   voisines : chaque projet était une colonne (flex) qui commençait par son titre, donc la
   carte suivait la hauteur de CE titre, pas celle de la rangée. Le ticket demande que le
   titre prenne la place qu'il veut DANS sa colonne sans décaler la carte, et que toutes les
   cartes d'une rangée démarrent au même niveau. La seule façon de le faire sans tronquer ni
   deviner une hauteur : chaque projet occupe DEUX rangées de la grille et ses rangées sont
   une SOUS-GRILLE (`subgrid`). La première rangée est celle des titres, dimensionnée par le
   plus haut titre de la rangée ; la deuxième est celle des cartes, et elle commence à la
   même hauteur pour tous. Un projet sans titre garde la rangée 1 vide et sa carte tombe au
   même niveau que les autres, sans le remplissage calculé dans la règle ci-dessus. */
@supports (grid-template-rows: subgrid){
  /* « Autres rôles » est exclu : cette section a TROIS enfants (titre, ligne d'explication,
     cartes) pour deux rangées, donc sa ligne tomberait dans la rangée des cartes et serait
     recouverte. Elle occupe toute la largeur à elle seule, sans voisine à aligner : elle
     garde exactement la disposition d'avant. */
  .cfh-projets.is-groupe .cfh-projet:not(.cfh-projet--autres){
    display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0;
  }
  /* Les cartes sont TOUJOURS dans la deuxième rangée, avec ou sans titre au-dessus. */
  .cfh-projets.is-groupe .cfh-projet:not(.cfh-projet--autres) > .cfh-cartes{grid-row:2}
  /* Le titre commence en haut de sa rangée : c'est la rangée qui s'aligne, pas le texte.
     Scopé lui aussi : « Autres rôles » reste en flex, où `align-self` travaillerait sur l'axe
     en ligne et rétrécirait son titre (le filet gris après le mot disparaissait). */
  .cfh-projets.is-groupe .cfh-projet:not(.cfh-projet--autres) > .cfh-projet__titre{align-self:start}
  /* Le remplissage qui tenait la place d'un titre de deux lignes n'a plus de sens : la
     rangée des titres la tient. Le garder décalerait la carte de ce projet sous les autres. */
  .cfh-projets.is-groupe .cfh-projet--sans-titre{padding-top:0}
}

.cfh-projet{border-radius:28px}
.cfh-projet__titre{display:flex; align-items:center; gap:12px; margin:0 0 16px;
  font-family:Unbounded, Geist, sans-serif; font-size:clamp(18px, 2vw, 24px); font-weight:700; line-height:1.2;
  letter-spacing:-.01em; color:var(--cfh-encre)}
.cfh-projet__titre::after{content:""; flex:1 1 auto; height:1px; background:rgba(17,17,16,.12)}
/* CFT-1897 : la ligne sous « Autres rôles », au même titre que les projets. */
.cfh-projet__note{margin:0 0 16px; font-size:15px; line-height:21px; color:rgba(17,17,16,.62)}
/* CFT-1831 : les cartes d'une meme rangee gardent la meme hauteur, meme quand le cachet
   d'une seule a besoin de deux lignes (Sasha, 22 oct. 2026). */
.cfh-cartes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:20px;
  align-items:stretch; --k:.9}
@media (min-width:640px){ .cfh-cartes{grid-template-columns:repeat(2, minmax(0, 1fr)); --k:.78} }
@media (min-width:1240px){ .cfh-cartes{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px 23px; --k:.746667} }

/* La carte de l'app acteur, dessinée à 400 px de large dans la maquette et posée ici à
   l'échelle --k (0,7467 sur ordinateur) : chaque cote est « sa valeur × --k ». */
.cfk-item{min-width:0; display:flex}
.cfk{position:relative; display:flex; flex-direction:column; overflow:hidden; width:100%; height:100%; border-radius:calc(28px * var(--k));
  background:#f3f6f8; box-shadow:0 calc(12px * var(--k)) calc(32px * var(--k)) rgba(0,0,0,.12);
  color:#fff; text-decoration:none}
.cfk.rf-survol:hover{box-shadow:0 22px 44px -12px rgba(0,0,0,.28)}
.cfk:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:3px}
.cfk__haut{position:relative; display:flex; flex-direction:column; gap:calc(16px * var(--k));
  padding:calc(22px * var(--k)) calc(22px * var(--k)) calc(20px * var(--k));
  background:linear-gradient(180deg, #258fba, #1f5e7b)}
.cfk__rang{display:flex; align-items:flex-start; height:calc(60px * var(--k))}
.cfk__tag{display:inline-flex; align-items:center; height:calc(28px * var(--k)); max-width:calc(100% - 70px * var(--k));
  padding:0 calc(13px * var(--k)); overflow:hidden; border-radius:999px; background:#fff;
  font-size:calc(12px * var(--k)); font-weight:700; line-height:1; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cfh-encre); white-space:nowrap; text-overflow:ellipsis}
.cfk__titre{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:calc(62.4px * var(--k));
  font-family:Unbounded, Geist, sans-serif; font-size:calc(30px * var(--k)); font-weight:800; line-height:1.04;
  letter-spacing:-.02em; overflow-wrap:anywhere}
.cfk__age{min-height:calc(22.4px * var(--k)); font-size:calc(16px * var(--k)); line-height:1.4; color:rgba(255,255,255,.92)}
/* CFT-1824: the project title is the small line under the role title, and it disappears when
   the post names no project. The type of role sits under it, in the post's own language. */
.cfk__projet{display:block; margin-top:calc(-8px * var(--k)); font-size:calc(15px * var(--k)); font-weight:600;
  line-height:1.35; color:rgba(255,255,255,.92); overflow-wrap:anywhere}
.cfk__roletype{display:block; margin-top:calc(-8px * var(--k)); font-size:calc(11px * var(--k)); font-weight:700;
  line-height:1.2; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.78); overflow-wrap:anywhere}
.cfk__tuiles{display:flex; gap:calc(10px * var(--k))}
.cfk__tuile{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:calc(8px * var(--k));
  padding:calc(14px * var(--k)) calc(16px * var(--k)); border-radius:calc(18px * var(--k)); background:rgba(255,255,255,.15)}
.cfk__label{font-size:calc(11px * var(--k)); font-weight:600; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.9); white-space:nowrap}
.cfk__val{font-family:Unbounded, Geist, sans-serif; font-size:calc(20px * var(--k)); font-weight:800; line-height:1.04;
  letter-spacing:-.02em; white-space:nowrap}
/* CFT-1831 : le cachet d'un membre connecte peut etre long
   (« Unpaid/Profit-share(royalties) »). Il reste dans sa tuile, sur deux lignes au plus,
   et public-castings-account.js reduit sa taille pour qu'il y tienne : la tuile garde donc
   toujours la meme hauteur d'une carte a l'autre, et le texte n'est jamais coupe. */
.cfk__val--member{white-space:normal; overflow-wrap:anywhere; font-size:calc(18px * var(--k)); line-height:1.14}
.cfk__val-texte{display:inline-block; max-width:100%}
/* La reserve de deux lignes ne vaut que pour les cartes en rangee (le hub et l'accueil) : la
   carte de la fiche est seule et garde ses tuiles a la hauteur de leur contenu. */
.cfk--feuille .cfk__val--member{min-height:calc(41px * var(--k))}
.cfk__verrou{display:flex; align-items:center; gap:calc(8px * var(--k)); height:calc(20.8px * var(--k))}
.cfk--feuille .cfk__verrou{min-height:calc(41px * var(--k))}
.cfk__verrou svg{flex:none; width:calc(18px * var(--k)); height:calc(18px * var(--k))}
/* Le montant n'est pas dans la page : ces chiffres sont un décor écrit en CSS, flouté. */
.cfk__flou::before{content:"1 245 $"; font-family:Unbounded, Geist, sans-serif; font-size:calc(20px * var(--k)); font-weight:800;
  line-height:1.04; letter-spacing:-.02em; filter:blur(calc(7.5px * var(--k))); user-select:none}
.cfk__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cfk__pied{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:calc(4px * var(--k));
  font-size:calc(15px * var(--k)); font-weight:600; line-height:1.4; white-space:nowrap}
.cfk__pied span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
/* L'autocollant garde SES proportions (dans la maquette, les cinq étaient étirés dans la
   même boîte de 67 × 79) : même hauteur pour tous, la largeur suit le dessin ; les deux
   dessins plus larges que hauts sont posés à part (la caméra aux cotes que le PO a
   corrigées sur l'accueil, 1203:8306 : 92 × 79). */
.cfk__sticker{position:absolute; top:calc(10.2px * var(--k)); right:calc(15.8px * var(--k));
  width:auto; height:calc(79.2px * var(--k)); max-width:none}
.cfk__sticker--camera{top:calc(12px * var(--k)); right:calc(11px * var(--k)); height:calc(79px * var(--k))}
.cfk__sticker--personne{top:calc(16px * var(--k)); height:calc(64px * var(--k))}
.cfk__bas{display:flex; flex-direction:column; align-items:center; gap:calc(14px * var(--k)); flex:1 1 auto;
  padding:calc(20px * var(--k)) calc(22px * var(--k)) calc(18px * var(--k))}
.cfk__ex{align-self:stretch; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
  max-height:calc(21.75px * var(--k)); font-size:calc(15px * var(--k)); line-height:1.45; color:var(--cfh-corps);
  overflow-wrap:anywhere;
  transition:max-height .55s cubic-bezier(.22,1,.36,1), -webkit-line-clamp 0s linear .55s;
  transition-behavior:allow-discrete}
.cfk:not(.cfk--feuille):focus-visible .cfk__ex{-webkit-line-clamp:8; max-height:calc(174px * var(--k)); transition-delay:0s}
@media (hover:hover) and (pointer:fine){ .cfk:not(.cfk--feuille):hover .cfk__ex{-webkit-line-clamp:8; max-height:calc(174px * var(--k)); transition-delay:0s} }
@media (prefers-reduced-motion:reduce){ .cfk__ex{transition:none} }
.cfk__voir{display:inline-flex; align-items:center; gap:calc(8px * var(--k)); font-size:calc(12px * var(--k));
  font-weight:600; line-height:1; letter-spacing:.1em; text-transform:uppercase; color:var(--cfh-encre)}
.cfk__voir svg{width:calc(14px * var(--k)); height:calc(14px * var(--k)); transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){ .cfk:hover .cfk__voir svg{transform:translateX(4px)} }

/* The original Castings hub card treatment: project icons, two fact tiles and a rich hover.
   Same card on the home page (.rf-castings), which keeps its own brighter gradient. */
[data-castings-page="hub"] .cfk__haut{background:linear-gradient(180deg, #3987a6, #1f5e7b)}
:is([data-castings-page="hub"], .rf-castings) .cfk__sticker--camera{top:calc(14px * var(--k)); right:calc(15.8px * var(--k)); height:calc(68px * var(--k))}
:is([data-castings-page="hub"], .rf-castings) .cfk__ex{display:flex; flex-direction:column; align-items:stretch; gap:8px;
  -webkit-line-clamp:unset; max-height:calc(21.75px * var(--k)); white-space:normal; text-overflow:clip}
:is([data-castings-page="hub"], .rf-castings) .cfk__ex-ligne{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
:is([data-castings-page="hub"], .rf-castings) .cfk__ex-ligne:first-child{display:none}
:is([data-castings-page="hub"], .rf-castings) .cfk__ex-ligne b{display:none; margin-right:8px; color:var(--cfh-teal); font-size:.76em; letter-spacing:.08em; text-transform:uppercase}
/* Au survol, la carte ne grandit plus vers le bas : une feuille blanche monte DANS la carte
   et recouvre les tuiles (Figma « Castings publics », état survol) : le rôle, le projet, le lien.
   Elle répète ce que le lien dit déjà : elle est cachée aux lecteurs d'écran. */
.cfk__feuille{position:absolute; left:0; right:0; bottom:0; top:calc(206px * var(--k)); display:flex; flex-direction:column;
  gap:calc(10px * var(--k)); padding:calc(20px * var(--k)) calc(22px * var(--k)) calc(18px * var(--k));
  border-radius:calc(24px * var(--k)) calc(24px * var(--k)) 0 0; background:#fff; color:var(--cfh-corps);
  font-size:calc(15px * var(--k)); line-height:1.45; pointer-events:none;
  transform:translateY(102%); transition:transform .55s cubic-bezier(.22,1,.36,1)}
.cfk:focus-visible .cfk__feuille{transform:none}
/* Elle ne monte qu'au survol du bas blanc : sur le haut bleu, la tuile du cachet reste
   visible et cliquable. Montée, elle reçoit le clic et reste ouverte tant qu'on est dessus. */
@media (hover:hover) and (pointer:fine){ .cfk__bas:hover ~ .cfk__feuille, .cfk__feuille:hover{transform:none; pointer-events:auto} }
@media (prefers-reduced-motion:reduce){ .cfk__feuille{transition:none} }
.cfk__feuille-bloc{display:flex; flex-direction:column; gap:calc(4px * var(--k)); min-width:0}
.cfk__feuille-bloc b{font-size:calc(11.5px * var(--k)); font-weight:600; line-height:1; letter-spacing:.08em; text-transform:uppercase; color:var(--cfh-teal)}
.cfk__feuille-texte{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere}
.cfk__feuille-bloc + .cfk__feuille-bloc .cfk__feuille-texte{-webkit-line-clamp:3}
.cfk__feuille .cfk__voir{margin-top:auto; align-self:flex-start; font-size:calc(15px * var(--k)); font-weight:500; letter-spacing:0; text-transform:none}

/* Un filtre ne recharge pas la page (castings-hub.js) : la liste pâlit le temps de la
   réponse, puis SEULES les cartes entrent, l'une après l'autre. */
.cfh-liste{transition:opacity .2s ease}
.cfh-liste.is-charge{opacity:.45; pointer-events:none}
@keyframes cfk-entre{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.cfk-item.is-neuf{animation:cfk-entre .6s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--n, 0) * 40ms)}
@media (prefers-reduced-motion:reduce){ .cfk-item.is-neuf, .cfh-tri__menu{animation:none} }

.cfh-vide{margin:0; padding:32px 24px; border-radius:28px; background:#fff; font-size:16px; line-height:1.5; color:var(--cfh-corps)}
.cfh-vide a{color:var(--cfh-teal); font-weight:500}

/* ── La pagination ────────────────────────────────────────────────────────── */
.cfh-pages{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:24px;
  font-size:15px; line-height:1; color:var(--cfh-gris)}
.cfh-page{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--cfh-encre); transition:background-color .25s ease, color .25s ease}
.cfh-page svg{width:16px; height:16px}
a.cfh-page:hover{background:var(--cfh-encre); color:#fff}
.cfh-page.is-off{opacity:.4}

/* ── Le bandeau des membres ───────────────────────────────────────────────── */
.cfh-membre__action{flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.cfh-membre__login{margin:0; font-size:14px; line-height:1.4; color:rgba(255,255,255,.7)}
.cfh-membre__login a{color:#fff; text-decoration:underline; text-underline-offset:2px}
@media (min-width:1024px){ .cfh .cfh-membre{gap:88px} }

/* ── « L'app s'en vient ! » : le bandeau teal du bas du hub (22 oct. 2026) ─────
   Visiteur : la pastille des 100 premiers et « Prendre ma place ». Membre dans la
   file (public-castings-share.js) : « Invite un ami » et le compteur des places qui
   manquent, un chiffre par tuile blanche. */
.cfh-app{position:relative; box-sizing:border-box; width:100%; max-width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:28px;
  padding:48px 24px; border-radius:28px; color:#fff;
  background:linear-gradient(160deg, #0B87A5 0%, #086B86 45%, #04465C 100%)}
.cfh-app [hidden]{display:none !important}
.cfh-app__texte{display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:0}
.cfh-app__sur{margin:0; font-size:17px; font-weight:500; line-height:1.3; color:rgba(255,255,255,.88)}
.cfh-app__titre{margin:0; font-family:Unbounded, Geist, sans-serif; font-size:clamp(28px, 6vw, 58px); font-weight:800;
  line-height:1.05; letter-spacing:-.01em}
.cfh-app__prix{margin:0; padding:9px 18px; border-radius:999px; background:rgba(255,255,255,.16);
  font-size:15px; font-weight:500; line-height:1.3}
.cfh-app__inviter{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:16px}
.cfh-app__retour{font-size:14px; color:rgba(255,255,255,.8)}
.cfh-app__retour:empty{display:none}
.cfh-app .rf-cta{height:68px; padding:0 8px 0 30px; gap:22px; font-size:17px; box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.cfh-app .rf-cta .rf-cta__rond{width:52px; height:52px}
.cfh-app .rf-cta .rf-cta__rond svg{inset:18px}
.cfh-app__action{display:flex; flex-direction:column; align-items:center; gap:14px}
.cfh-app__compteur{display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 36px;
  border-radius:28px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); text-align:center}
.cfh-app__haut, .cfh-app__bas{margin:0; font-size:16px; font-weight:500; line-height:1.3}
.cfh-app__haut{color:rgba(255,255,255,.9)}
.cfh-app__chiffres{display:flex; gap:10px; margin:0}
.cfh-app__chiffres span{display:flex; align-items:center; justify-content:center; width:78px; height:104px;
  border-radius:16px; background:#fff; color:#04465C; box-shadow:0 6px 0 rgba(4,70,92,.55);
  font-family:Unbounded, Geist, sans-serif; font-size:60px; font-weight:800; line-height:1}
.cfh-app__clap{position:absolute; top:-26px; right:24px; width:76px; height:auto; transform:rotate(8deg)}
.cfh-app__courriel{position:absolute; bottom:-26px; left:24px; width:72px; height:auto; transform:rotate(-12deg)}
@media (max-width:599px){
  .cfh-app__chiffres span{width:58px; height:78px; font-size:44px}
  .cfh-app .rf-cta{max-width:100%; height:auto; min-height:60px; padding:6px 6px 6px 22px; gap:14px; font-size:15px;
    line-height:1.25; white-space:normal; text-align:left}
  .cfh-app .rf-cta .rf-cta__rond{width:46px; height:46px}
  .cfh-app .rf-cta .rf-cta__rond svg{inset:15px}
  .cfh-app__texte, .cfh-app__inviter, .cfh-app__compteur{align-self:stretch}
  .cfh-app__compteur{padding:24px 16px}
  .cfh-app__prix{font-size:14px; border-radius:18px}
  .cfh-app__clap{top:-30px; right:12px; width:64px}
  .cfh-app__courriel{left:auto; right:16px; bottom:-24px; width:60px}
}
@media (min-width:1024px){
  .cfh-app{flex-direction:row; align-items:center; justify-content:space-between; gap:48px;
    padding:80px 64px 80px 80px; border-radius:40px}
  .cfh-app__clap{top:-22px; right:28px; width:84px}
  .cfh-app__courriel{left:40px; bottom:-30px}
  /* Le membre : l'enveloppe passe sous le compteur, comme dans la maquette. */
  .cfh-app:has(.cfh-app__compteur:not([hidden])) .cfh-app__courriel{left:auto; right:calc(64px + 270px)}
}

/* ── Les questions : toutes ouvertes (le balisage FAQPage décrit ce que la page montre) ── */
.cfh-faq{margin-top:28px; padding:8px 24px; border-radius:28px; background:#fff}
.cfh-faq__q{padding:24px 0; border-bottom:1px solid #e7ebec}
.cfh-faq__q:last-child{border-bottom:0}
.cfh-faq__q h3{margin:0; font-size:19px; font-weight:500; line-height:1.28; letter-spacing:-.015em; color:var(--cfh-encre)}
.cfh-faq__q p{margin:10px 0 0; font-size:16px; line-height:1.58; color:var(--cfh-corps)}
@media (min-width:768px){
  .cfh-faq{margin-top:44px; padding:16px 72px; border-radius:40px}
  .cfh-faq__q{padding:32px 0}
  .cfh-faq__q h3{font-size:22px}
  .cfh-faq__q p{font-size:17px}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA FICHE D'UN CASTING (6 octobre 2026) : Figma « Castings publics », cadre 1198:5640.
   Préfixe cff-. La grande carte est la carte du hub (cfk-) à l'échelle --k:1,8 (720 px) :
   mêmes cotes, même dégradé, même autocollant. Tout le contenu de l'annonce reste public.
   ══════════════════════════════════════════════════════════════════════════ */
.cff{overflow:visible}
.cff .cff-tete{margin-top:0; padding-top:28px}
.cff-colonne{display:flex; flex-direction:column; align-items:center; gap:20px; max-width:720px; margin-inline:auto}
.cff .cfc-crumbs{margin:0; justify-content:center}
.cff .cfc-closed{align-self:stretch; margin:0}
@media (min-width:768px){ .cff .cff-tete{padding-top:80px} }

.cff-carte{--k:.88; width:100%; color:#fff}
@media (min-width:560px){ .cff-carte{--k:1.25} }
@media (min-width:820px){ .cff-carte{--k:1.8} }
.cff-carte .cfk__titre{-webkit-line-clamp:3; min-height:0}
.cff-carte .cfk__age{min-height:0; margin:0}
.cff-carte .cfk__titre, .cff-carte .cfk__pied{margin:0}
.cff-bas{display:flex; flex-direction:column; gap:18px; padding:28px 24px 30px}
.cff .cfc-h1{margin:0; font-family:Unbounded, Geist, sans-serif; font-size:clamp(28px, 7.4vw, 54px); font-weight:800;
  line-height:1.08; letter-spacing:-.02em; color:var(--cfh-encre); overflow-wrap:anywhere}
.cff .cfc-h1.cff-h1--moyen{font-size:clamp(24px, 5.4vw, 40px)}
.cff .cfc-h1.cff-h1--long{font-size:clamp(20px, 4.2vw, 30px)}
.cff-resume{margin:0; font-size:17px; line-height:1.5; color:var(--cfh-corps)}
.cff-action{display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:20px}
.cff-action .rf-cta{align-self:center}
.cfp-partage{position:relative; z-index:8; display:flex; flex-direction:column; align-items:center; max-width:100%}
.cfp-partage__bouton{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 18px;
  border:1px solid var(--cfh-teal); border-radius:999px; background:#fff; color:var(--cfh-encre); font-size:14px;
  font-weight:600; line-height:1.2; cursor:pointer; list-style:none; transition:background-color .2s ease, color .2s ease}
.cfp-partage__bouton::-webkit-details-marker{display:none}
.cfp-partage__bouton svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.cfp-partage__bouton:hover{background:var(--cfh-teal); color:#fff}
.cfp-partage__bouton:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:3px}
.cfp-partage__menu{display:none; box-sizing:border-box; flex-direction:column; gap:4px; width:min(300px, calc(100vw - 48px)); margin-top:8px; padding:8px;
  border:1px solid rgba(17,17,16,.1); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(17,17,16,.12)}
.cfp-partage[open] .cfp-partage__menu{display:flex}
.cfp-partage__menu a,.cfp-partage__menu button{display:flex; align-items:center; min-height:42px; padding:0 12px; border:0; border-radius:10px;
  background:transparent; color:var(--cfh-encre); font:inherit; font-size:14px; text-align:left; text-decoration:none; cursor:pointer}
.cfp-partage__menu a:hover,.cfp-partage__menu button:hover,.cfp-partage__menu a:focus-visible,.cfp-partage__menu button:focus-visible{background:var(--cfh-fond); outline:0}
.cfp-partage__feedback{min-height:18px; margin-top:4px; color:var(--cfh-gris); font-size:12px}
.cff-login{margin:0; font-size:14px; line-height:1.4; color:var(--cfh-gris)}
.cff-login a{color:var(--cfh-teal); text-decoration:underline; text-underline-offset:2px}
@media (min-width:820px){
  .cff-bas{padding:36px 39.6px}
  .cff-resume{font-size:19px}
}

/* ── Deux colonnes : un titre à gauche, un panneau blanc à droite ─────────── */
.cff-duo{display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; align-items:center}
.cff-duo--haut{align-items:start}
.cff .cff-h2{max-width:none; margin:0; text-align:left}
.cff-chapo{margin:20px 0 0; font-size:18px; line-height:1.55; color:var(--cfh-corps)}
@media (min-width:1024px){
  .cff-duo{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:100px; padding-inline:54px}
  .cff-chapo{margin-top:44px; font-size:21px}
}
.cff-roles{gap:0; padding:8px 24px; border-radius:28px; background:#fff}
.cff-roles li{flex-direction:row; gap:20px; padding:24px 0; border:0; border-bottom:1px solid #e7ebec; border-radius:0}
.cff-roles li:last-child{border-bottom:0}
.cff-role__n{flex:none; font-size:15px; line-height:1.6; color:var(--cfh-gris); font-variant-numeric:tabular-nums}
.cff-role__c{min-width:0; display:flex; flex-direction:column; gap:6px}
.cff-roles .cfc-role__n{font-size:20px; font-weight:600; line-height:1.25; letter-spacing:-.015em; color:var(--cfh-encre)}
.cff-roles .cfc-role__m{font-size:15px; line-height:1.4; color:var(--cfh-gris)}
@media (min-width:768px){ .cff-roles{padding:12px 30px; border-radius:40px} }

.cff .cfc-facts{margin:0}
.cff .cfc-facts:not(:last-child){margin-bottom:28px}
.cff .cfc-facts__row:first-child{padding-top:0}
.cff .cfc-facts{border-top:0}
.cff .cfc-facts dd{font-size:16px}
@media (min-width:600px){ .cff .cfc-facts__row{grid-template-columns:170px 1fr} }
.cff-texte{padding:28px 24px; border-radius:28px; background:#fff}
.cff-texte h3{margin:28px 0 10px; font-size:20px; font-weight:600; line-height:1.25; letter-spacing:-.015em; color:var(--cfh-encre)}
.cff-texte h3:first-child{margin-top:0}
.cff-sous{margin:0 0 20px; font-size:18px; line-height:1.5; color:var(--cfh-corps)}
.cff-texte .cfc-text p:last-child{margin-bottom:0}
@media (min-width:768px){ .cff-texte{padding:40px; border-radius:40px} }

/* ── Les cadenas (maquette 1198:5696 et 1198:5706) ────────────────────────────
   Un cadenas, « Connecte-toi pour voir », et un flou. Le flou est un DÉCOR écrit ici, en
   CSS : aucune donnée cachée n'est dans la page. */
.cff-verrou{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; line-height:1;
  color:var(--cfh-teal); white-space:nowrap}
.cff-verrou svg{flex:none; width:14px; height:14px}
.cff-roles .cff-verrou{padding-top:6px; max-width:100%; overflow:hidden}
.cff-verrou--clair{color:#fff}
.cff-flou{overflow:hidden; white-space:nowrap; user-select:none}
.cff-flou::before{filter:blur(5px)}
.cff-flou--role{font-weight:400; color:var(--cfh-gris)}
.cff-flou--role::before{content:"Lorem ipsum dolor sit amet consectetur"}

/* ── Le bandeau de fin de la fiche (Figma Refonte 1819:291, 27 oct. 2026) : le bandeau teal
   « L'app s'en vient ! » du hub (.cfh-app), en plus serré : « L'app s'en vient ! » en petit
   au-dessus, la question en grand. Il remplace le bandeau noir « Fini les groupes Facebook ». ── */
.cfh-app--fiche .cfh-app__texte{flex:1; gap:10px}
.cfh-app--fiche .cfh-app__prix{margin-top:10px}
@media (min-width:1024px){
  .cfh-app--fiche{padding:56px 72px}
  .cfh-app--fiche .cfh-app__titre{max-width:760px; font-size:46px; line-height:1.24; letter-spacing:0}
  .cfh-app--fiche .cfh-app__sur{font-size:18px; font-weight:600}
}

/* ── Réglages entre téléphone et ordinateur ───────────────────────────────── */
/* La liste des rôles ne s'élargit plus à la largeur de sa ligne floutée. */
.cff-roles{grid-template-columns:minmax(0, 1fr)}
.cff-roles li{min-width:0}
.cff-role__c{flex:1}
/* Deux colonnes dès 1024, mais sans les 100 px d'écart de la maquette tant que la page est
   étroite : le panneau de droite garde la place de ses lignes. */
@media (min-width:1024px) and (max-width:1279px){
  .cff-duo{grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr); gap:48px; padding-inline:0}
}

/* ── La tuile « Cachet » réagit ───────────────────────────────────────────────
   Sur la fiche, c'est un lien : il ouvre la boîte waitlist. Au survol la tuile
   s'éclaire et se soulève, le cadenas remue, et « Voir le cachet » prend la place
   du flou. Sur les petites cartes (toute la carte est déjà un lien vers la
   fiche), la tuile s'éclaire et le cadenas remue, sans libellé. */
.cfk__tuile{transition:background-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease}
.cfk__verrou{position:relative}
.cfk__verrou svg{transform-origin:50% 20%}
.cfk__tuile--verrou{color:inherit; text-decoration:none; cursor:pointer}
.cfk__flou{transition:opacity .25s ease}
.cfk__indice{position:absolute; left:calc(26px * var(--k)); top:50%; transform:translateY(-50%) translateX(calc(-6px * var(--k)));
  font-size:calc(15px * var(--k)); font-weight:600; line-height:1; white-space:nowrap; opacity:0;
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1)}
.cfk__indice{display:inline-flex; align-items:center; gap:calc(7px * var(--k))}
.cfk__verrou .cfk__indice svg{width:calc(15px * var(--k)); height:calc(15px * var(--k)); transform:none}
.cfk__tuile--verrou:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .cfk__tuile:has(.cfk__verrou):hover{background:rgba(255,255,255,.26)}
  .cfk__tuile:has(.cfk__verrou):hover svg{animation:cfk-cadenas .5s ease}
  .cfk__tuile--verrou:hover{transform:translateY(calc(-3px * var(--k))); box-shadow:0 calc(10px * var(--k)) calc(22px * var(--k)) rgba(0,0,0,.18)}
  .cfk__tuile--verrou:hover .cfk__flou{opacity:0}
  .cfk__tuile--verrou:hover .cfk__indice{opacity:1; transform:translateY(-50%)}
}
.cfk__tuile--verrou:focus-visible .cfk__flou{opacity:0}
.cfk__tuile--verrou:focus-visible .cfk__indice{opacity:1; transform:translateY(-50%)}
@keyframes cfk-cadenas{0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 55%{transform:rotate(10deg)} 80%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){ .cfk__tuile:has(.cfk__verrou):hover svg{animation:none} .cfk__tuile, .cfk__indice{transition:none} }

/* ── CFT-1927 : un membre connu n'attend pas la vue visiteur ─────────────────────
   Le site ne peut pas prouver la session dans son propre HTML : le cookie du tableau de
   bord reste limité à son hôte (README, « Connexion »), donc la page arrive toujours en
   vue visiteur et c'est le navigateur qui la corrige après la première peinture. Un membre
   voyait ainsi, à chaque rafraîchissement, le faux cachet flouté et les cadenas, puis la
   vue membre.

   La seule chose que le navigateur sait d'avance est sa DERNIÈRE réponse certaine : les
   gabarits (`templates/castings-*.html`) lisent cette mémoire avant le premier affichage et
   posent `cfm-attente` sur <html>. Le décor du visiteur ne se peint donc pas, et la réponse
   le rend tel quel à un visiteur. C'est une SOUSTRACTION, jamais un remplacement : on ne
   cache qu'un décor écrit en CSS et une phrase d'invitation (tous deux aria-hidden ou sans
   fait), aucune carte, aucun titre, aucune date, aucun fait public. `visibility` garde la
   place de chaque élément, donc la page ne bouge pas quand l'attente se lève, et le
   minuteur du gabarit lève l'attente même si l'app est muette. */
html.cfm-attente .cfk__verrou,
html.cfm-attente [data-hub-lead-member]{visibility:hidden}
/* La tuile du cachet n'ouvre pas la porte de connexion pendant l'attente : le clic suit
   la carte, qui mène à la fiche. */
html.cfm-attente .cfk__tuile[data-boite="porte"]{pointer-events:none}

/* ── Le détail verrouillé d'un rôle est un lien vers la porte « Connecte-toi » ───── */
.cff-verrou--lien svg{transform-origin:50% 20%}
.cff-verrou--lien{text-decoration:none; border-radius:8px; transition:color .25s ease}
.cff-verrou--lien:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .cff-verrou--lien:hover svg{animation:cfk-cadenas .5s ease}
  .cff-verrou--lien:hover{color:var(--cfh-teal)}
  .cff-verrou--lien:hover span:first-of-type{text-decoration:underline; text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){ .cff-verrou--lien:hover svg{animation:none} }

/* ── La fenêtre « Connecte-toi » (Figma Castings publics, 1354:4792) ──
   Un visiteur sans compte touche une valeur verrouillée (cachet, détail d'un rôle, ligne
   réservée) : la boîte du compte s'ouvre d'abord sur cette fenêtre. Son bouton mène au
   formulaire, dans la même boîte. */
.cfw__porte{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:14px}
.cfw__porte[hidden]{display:none}
.cfw--porte .cfw__panneau{width:min(480px, 100%); border-radius:28px}
.cfw__porte-image{display:block; width:auto; height:80px; margin-bottom:26px}
.cfw__porte .cfw__sous:empty{display:none}
.cfw__porte-cta{align-self:center; margin-top:28px}
.cfw__porte-login{margin:16px 0 0; font-size:15px; line-height:22px; color:var(--cfw-muet)}
.cfw__porte-login a{color:var(--cfw-teal); text-decoration:underline; text-underline-offset:3px}
.cfw__porte-login a:hover{color:var(--cfw-encre)}
@media (max-width:560px){ .cfw__porte-image{height:64px; margin-bottom:20px} }

/* ── La fiche d'un membre (CFT-1717) : le projet, un bloc par rôle, le cachet, le calendrier ───────────── */
.cfm{max-width:880px; margin:0 auto; display:grid; gap:20px; color:var(--cfh-corps,#3f4750)}
.cfm-tete{display:grid; gap:6px}
.cfm-titre{margin:0; font-size:30px; line-height:1.15; letter-spacing:-.02em; color:var(--cfh-encre,#111110)}
.cfm-sous{margin:0; font-size:18px; line-height:1.5}
.cfm-faits{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.cfm-fait{display:grid; gap:4px; padding:16px 18px; border-radius:18px; background:#fff; border:1px solid #e7ebec}
.cfm-fait--large{background:#e6f3f7; border-color:#cfe5ec}
.cfm-fait__label{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--cfh-gris,#6b747c)}
.cfm-fait__val{font-size:17px; line-height:1.35; color:var(--cfh-encre,#111110); font-weight:600}
.cfm-bloc{padding:22px 24px; border-radius:24px; background:#fff; border:1px solid #e7ebec}
.cfm-h3{margin:0 0 14px; font-size:20px; line-height:1.25; letter-spacing:-.015em; color:var(--cfh-encre,#111110)}
.cfm-texte{margin:0 0 10px; font-size:16px; line-height:1.65}
.cfm-texte:last-child{margin-bottom:0}
.cfm-roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.cfm-role{padding:16px 18px; border-radius:16px; background:#f5f6f7; display:grid; gap:10px; align-content:start}
.cfm-role__nom{margin:0; font-size:17px; line-height:1.3; color:var(--cfh-encre,#111110)}
.cfm-role__desc{margin:0; font-size:15px; line-height:1.5}
.cfm-puces{display:flex; flex-wrap:wrap; gap:6px}
.cfm-puce{padding:4px 11px; border-radius:999px; background:#fff; border:1px solid #d9e2e5; font-size:13px; font-weight:500; color:var(--cfh-corps,#3f4750)}
.cfm-cal{list-style:none; margin:0; padding:0; display:grid}
.cfm-cal__ligne{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid #eef1f2; font-size:16px}
.cfm-cal__ligne:last-child{border-bottom:0}
.cfm-cal__quoi{font-weight:600; color:var(--cfh-encre,#111110)}
.cfm-cal__quand{text-align:right}
.cfm-original{border:1px solid #e7ebec; border-radius:18px; background:#fff; padding:0 20px}
.cfm-original__titre{cursor:pointer; padding:16px 0; font-weight:600; font-size:15px; color:var(--cfh-teal,#007692)}
.cfm-original__texte{padding:0 0 18px}
@media (max-width:600px){ .cfm-titre{font-size:25px} .cfm-bloc{padding:18px 16px} .cfm-cal__ligne{flex-direction:column; gap:2px} .cfm-cal__quand{text-align:left} }

/* ══════════════════════════════════════════════════════════════════════════
   LA COLONNE « POSTULER » DE LA FICHE (21 octobre 2026) : Figma Refonte 1697:36983.
   Préfixes cff-grille / cff-cote / cfp-. Sur ordinateur, la carte et ses sections à gauche
   (720 px), la colonne à droite (380 px), collée sous la barre pendant le défilement.
   Sur téléphone et tablette, la colonne vient sous les sections, dans le flux.
   Deux panneaux : « Postuler » (blanc : deux étapes, le bouton, Partager) et la place
   dans la file (le dégradé de la carte), montrée seulement à un membre.
   ══════════════════════════════════════════════════════════════════════════ */
.cff-principal{min-width:0}
/* Sous 1180 px : une seule colonne, et « Postuler » vient juste sous la carte, pas au bout
   des sections. */
@media (max-width:1179px){
  .cff-grille{display:flex; flex-direction:column}
  .cff-principal{display:contents}
  .cff-principal > .cff-tete{order:0}
  .cff-cote{order:1}
  .cff-principal > :not(.cff-tete){order:2}
}
.cff-cote{margin-top:48px; padding-inline:16px}
.cff-cote [hidden]{display:none!important}
.cff-cote__colle{display:flex; flex-direction:column; gap:16px; max-width:720px; margin-inline:auto}
@media (min-width:640px){ .cff-cote{padding-inline:24px} }
@media (min-width:768px){ .cff-cote{padding-inline:40px} }

.cfp-panneau{display:flex; flex-direction:column; gap:20px; padding:28px 24px; border-radius:28px;
  background:#fff; border:1px solid #e8e6e3}
.cfp-titre{margin:0; font-family:Unbounded, Geist, sans-serif; font-size:30px; font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:var(--cfh-encre)}
.cfp-etapes{list-style:none; display:flex; flex-direction:column; gap:12px; margin:0; padding:0}
.cfp-etapes li{display:flex; align-items:center; gap:12px; font-size:17px; line-height:1.3; color:var(--cfh-encre)}
.cfp-n{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:#e2f1f5; font-size:14px; font-weight:700; line-height:1; color:var(--cfh-teal)}
.cfp-origine{color:inherit; text-decoration:none; transition:color .25s ease}
.cfp-origine span{display:inline-block; margin-left:2px; transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cfp-origine:hover{color:var(--cfh-teal); text-decoration:underline; text-underline-offset:3px}
.cfp-origine:hover span{transform:translate(2px, -2px)}
.cfp-origine:focus-visible{outline:2px solid var(--cfh-teal); outline-offset:3px; border-radius:6px}

.cfp-panneau .cff-action{display:flex; flex-direction:column; align-items:stretch; gap:12px; padding-top:4px}
/* étiré sur la largeur du panneau : le libellé à gauche, le rond fléché au bout (là où part le survol) */
.cfp-panneau .cff-action .rf-cta{align-self:stretch; width:100%}
.cfp-panneau .cff-login{text-align:center}
.cfp-panneau .cfp-partage{align-items:center}
.cfp-panneau .cfp-partage__bouton{min-height:36px; padding:0 8px; border:0; background:none; font-size:15px; font-weight:600;
  color:var(--cfh-encre)}
.cfp-panneau .cfp-partage__bouton:hover{background:none; color:var(--cfh-teal); text-decoration:underline; text-underline-offset:3px}
.cfp-panneau .cfp-partage__menu{position:absolute; top:100%; left:50%; transform:translateX(-50%)}

.cfp-encart{display:flex; flex-direction:column; gap:14px; padding:28px 24px; border-radius:28px;
  background:linear-gradient(180deg, #278fb7, #215f7c); color:#fff}
.cfp-place{display:flex; align-items:baseline; gap:10px; margin:0; font-size:17px; line-height:1; color:#fff}
.cfp-place__n{font-family:Unbounded, Geist, sans-serif; font-size:44px; font-weight:800; line-height:1; letter-spacing:-.02em}
.cfp-barre{height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.25)}
.cfp-barre__plein{display:block; width:0; height:100%; border-radius:inherit; background:#fff;
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.cfp-reperes{display:flex; justify-content:space-between; gap:12px; margin:0; font-size:13px; font-weight:600; line-height:1.2; color:#d6eaf1}
.cfp-reperes span:last-child{color:#fff}
.cfp-rappel{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.12)}
.cfp-rappel img{flex:none; margin-top:1px}
.cfp-rappel > div{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.cfp-rappel p{margin:0; font-size:15px; line-height:1.35; color:rgba(255,255,255,.92)}
.cfp-rappel__renvoi{padding:0; border:0; background:none; font:inherit; font-size:15px; font-weight:600; line-height:1.3;
  color:#ffd27a; cursor:pointer}
.cfp-rappel__renvoi:hover{text-decoration:underline; text-underline-offset:3px}
.cfp-rappel__renvoi:disabled{opacity:.6; cursor:default}
.cfp-rappel__renvoi:focus-visible{outline:2px solid #fff; outline-offset:3px}
.cfp-rappel__etat{font-size:14px; line-height:1.35; color:rgba(255,255,255,.85)}
.cfp-rappel__etat:empty{display:none}
.cfp-encart__pied{display:flex; flex-direction:column; gap:8px; padding-top:4px}
.cfp-inviter, .cfp-copie{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px;
  padding:0 20px; border:0; border-radius:999px; background:#fff; font:inherit; font-size:16px; font-weight:600;
  line-height:1.2; color:var(--cfh-encre)}
.cfp-inviter{cursor:pointer; transition:background .2s ease, transform .2s ease}
.cfp-inviter:hover{background:#eef6f9}
.cfp-inviter:active{transform:scale(.98)}
.cfp-inviter:focus-visible{outline:2px solid #fff; outline-offset:3px}
.cfp-feedback{font-size:14px; line-height:1.35; color:rgba(255,255,255,.9)}
.cfp-feedback:empty{display:none}

@media (min-width:1180px){
  .cff-grille{display:grid; grid-template-columns:minmax(0, 720px) 380px; justify-content:center; align-items:start;
    column-gap:32px; padding-inline:64px}
  .cff-grille .rf-section{padding-inline:0}
  .cff-principal .cff-colonne{max-width:none}
  .cff-principal .cff-duo{grid-template-columns:minmax(0, 1fr); gap:24px; padding-inline:0}
  .cff-principal .cff-chapo{margin-top:16px}
  .cff-principal .rf-section:not(.cff-tete){margin-top:88px}
  /* La colonne fait toute la hauteur de la rangée : c'est ce qui laisse le panneau collé
     descendre avec la page jusqu'au bas des sections. */
  .cff-cote{align-self:stretch; margin-top:0; padding:120px 0 0}
  .cff-cote__colle{position:sticky; top:112px; max-width:none}
  .cfp-panneau{padding:32px 36px}
  .cfp-encart{padding:28px 32px}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CARTE OUVERTE « FAÇON APP », TOUTES LES INFOS (22 octobre 2026).
   Figma Refonte, page 925:2, cadre 1775:406. Préfixe cfr- (les rubriques).
   Le haut reste la carte du hub à --k:1,8 ; le titre du rôle devient le <h1>.
   Sous l'extrait, les rubriques de la carte de l'app : Ce qu'il faut, Qui tu joues,
   Les dates, Ce qu'on te demande, Le projet, Les rôles de l'annonce, Source
   (server/castings.pages.js).
   ══════════════════════════════════════════════════════════════════════════ */
.cff-carte .cfk__haut{background:linear-gradient(180deg, #40849f, #255c75)}
.cff-carte h1.cfk__titre{margin:0; color:#fff}
.cff-carte .cff-meta{font-size:calc(16px * var(--k))}
.cff-bas{gap:40px; padding:28px 18px 36px}
.cff-resume{color:#3f4750}
.cff-note{margin:0; font-size:14px; line-height:1.4; color:#5f6b72}
@media (min-width:768px){ .cff-bas{padding:36px 39.6px 48px} }

.cfr-rubrique{display:flex; flex-direction:column; gap:16px; min-width:0}
.cfr-titre{display:flex; align-items:center; gap:14px; margin:0; font-family:Unbounded, Geist, sans-serif;
  font-size:22px; font-weight:800; line-height:1.2; letter-spacing:0; color:#111110}
.cfr-titre__icone{flex:none; display:block; height:40px; width:auto}
@media (min-width:768px){ .cfr-titre{font-size:26px} }

.cfr-tuiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px}
.cfr-tuiles--2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.cfr-tuile{min-width:0; display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; border-radius:22px;
  background:#fff; color:#111110; text-decoration:none}
.cfr-tuile__label{font-size:12px; font-weight:700; line-height:normal; letter-spacing:.02em; text-transform:uppercase; color:#5f6b72}
.cfr-tuile__val{display:flex; align-items:center; gap:8px; min-width:0; font-family:Unbounded, Geist, sans-serif;
  font-size:20px; font-weight:800; line-height:1.25; color:#111110; overflow-wrap:anywhere}
.cfr-tuile__val svg{flex:none; width:18px; height:18px; color:#5f6b72}
.cfr-tuile--verrou{cursor:pointer; transition:box-shadow .25s ease}
.cfr-tuile--verrou:hover{box-shadow:0 0 0 2px #e6f3f7}
.cfr-tuile--verrou:hover svg{color:#007692}
.cfr-tuile--verrou:focus-visible{outline:2px solid #007692; outline-offset:3px}
.cfr-flou{display:block; overflow:hidden; white-space:nowrap; user-select:none; font-family:Geist, sans-serif; font-weight:600; font-size:16px; color:#5f6b72}
.cfr-flou::before{content:"Lorem ipsum"; filter:blur(5px)}

/* La carte complète, case par case (Figma 1775:406). Une case que l'annonce ne remplit pas
   n'est plus dessinée du tout (2026-10-29) : les états vides de 1882:140 sont partis avec
   leurs styles. */
.cfr-tuiles--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width:560px){ .cfr-tuiles--3{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.cfr-liste--blocs > * + *{border-top:1px solid #e3e8eb}
.cfr-bloc{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:19px 0}
.cfr-bloc .cfr-bloc__k{display:flex; align-items:center; gap:8px}
.cfr-pastilles{display:flex; flex-wrap:wrap; gap:8px}
.cfr-pastille{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:99px; background:#f1f3f5;
  font-size:14px; font-weight:600; line-height:18px; color:#111110}
.cfr-pastille--teal{background:#e6f3f7; color:#007692}
.cfr-coches, .cfr-etapes, .cfr-fichiers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; width:100%}
.cfr-coches li, .cfr-etapes li{display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; color:#111110}
.cfr-case{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#e6f3f7; color:#007692}
.cfr-etapes__n{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:99px; background:#007692;
  font-size:13px; font-weight:700; color:#fff}
.cfr-fichiers{flex-direction:row; flex-wrap:wrap; gap:10px}
.cfr-fichiers li{display:flex; flex-direction:column; align-items:center; gap:7px; width:120px; padding:12px 13px; border-radius:15px;
  background:rgba(0,106,133,.05); font-size:12px; font-weight:600; text-align:center; color:#111110; overflow-wrap:anywhere}
.cfr-replique{display:flex; flex-direction:column; gap:6px; padding:26px 28px 28px; border-radius:28px;
  background:linear-gradient(180deg, #40849f, #255c75); color:#fff}
.cfr-replique__k{display:flex; align-items:center; gap:8px; margin:0; font-size:14px; color:rgba(255,255,255,.75)}
.cfr-replique__v{margin:0; font-family:Unbounded, Geist, sans-serif; font-size:22px; font-weight:800; line-height:1.3; color:#fff}
@media (min-width:768px){ .cfr-replique__v{font-size:24px} }
.cfr-cachet{display:flex; flex-direction:column; gap:14px; padding:28px 32px 30px; border-radius:28px; background:#111110;
  color:#fff; text-decoration:none}
.cfr-cachet__k{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9aa5ab}
.cfr-cachet__v{display:flex; align-items:center; gap:10px; min-width:0; font-family:Unbounded, Geist, sans-serif;
  font-size:28px; font-weight:800; line-height:1.2; overflow-wrap:anywhere}
.cfr-cachet__v svg{flex:none; width:22px; height:22px; color:#9aa5ab}
.cfr-flou--noir{font-size:20px; color:#9aa5ab}
.cfr-cachet--verrou:hover svg{color:#fff}
.cfr-cachet--verrou:focus-visible{outline:2px solid #007692; outline-offset:3px}
@media (min-width:768px){ .cfr-cachet__v{font-size:34px} }
.cfr-lien{color:#007692; text-decoration:none}
.cfr-lien:hover{text-decoration:underline}

.cfr-liste{display:flex; flex-direction:column; padding:4px 22px; border-radius:28px; background:#fff}
@media (min-width:768px){ .cfr-liste{padding:4px 28px} }
.cfr-ligne{display:flex; gap:14px; align-items:flex-start; padding:17px 0; font-size:16px; line-height:normal}
.cfr-ligne + .cfr-ligne{border-top:1px solid #e3e8eb}
.cfr-ligne__k{flex:none; width:min(200px, 45%); color:#5f6b72}
.cfr-ligne__v{flex:1; min-width:0; font-weight:600; text-align:right; color:#111110; overflow-wrap:anywhere}
.cfr-texte{gap:12px; padding-block:19px}
.cfr-bloc__k{margin:0; font-size:16px; line-height:normal; color:#5f6b72}
.cfr-texte .cfc-text{font-size:16px; line-height:1.5; color:#3f4750}
.cfr-texte .cfc-text p{margin:0 0 12px}
.cfr-texte .cfc-text p:last-child{margin-bottom:0}

.cfr-roles{display:flex; flex-direction:column; gap:12px}
.cfr-roles .cff-roles{padding:4px 22px; border-radius:28px}
.cfr-roles .cff-roles li{padding:17px 0}
.cfr-roles .cff-roles .cfc-role__n{font-size:17px}

.cfr-calendrier{position:relative; display:flex; flex-direction:column; gap:12px; padding:24px 18px 22px; border-radius:28px; background:#fff}
@media (min-width:768px){ .cfr-calendrier{padding:24px} }
.cfr-calendrier__nav{position:absolute; top:22px; right:20px; display:flex; gap:4px}
.cfr-calendrier__nav[hidden]{display:none}
.cfr-calendrier__nav button{display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%;
  background:none; font:700 20px/1 Geist, sans-serif; color:#9aa5ab; cursor:pointer}
.cfr-calendrier__nav button:hover:not(:disabled){background:#e6f3f7; color:#007692}
.cfr-calendrier__nav button:disabled{opacity:.4; cursor:default}
.cfr-calendrier__nav button:focus-visible{outline:2px solid #007692; outline-offset:2px}
.cfr-mois{display:flex; flex-direction:column; gap:12px}
.cfr-mois[hidden]{display:none}
.cfr-mois__nom{margin:0; padding-right:72px; font-family:Unbounded, Geist, sans-serif; font-size:20px; font-weight:800; line-height:normal; color:#111110}
.cfr-agenda{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); row-gap:4px}
.cfr-jour{display:flex; align-items:center; justify-content:center; height:42px}
.cfr-jour--tete{font-size:13px; font-weight:600; color:#9aa5ab}
.cfr-rond{display:grid; place-items:center; width:38px; height:38px; border-radius:99px; font-size:15px; color:#111110}
.cfr-rond--passe{color:#b8c1c6}
.cfr-rond--limite{background:#007692; font-weight:700; color:#fff}
.cfr-rond--audition{box-shadow:inset 0 0 0 2px #007692; font-weight:700; color:#007692}
.cfr-rond--tournage{background:#e6f3f7; font-weight:700; color:#007692}
.cfr-legende{list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:14px 0 0; border-top:1px solid #e3e8eb}
.cfr-legende__ligne{display:flex; align-items:center; gap:12px; font-size:16px; line-height:normal}
.cfr-point{flex:none; width:10px; height:10px; border-radius:50%; background:#007692}
.cfr-point--audition{background:none; box-shadow:inset 0 0 0 2px #007692}
.cfr-point--tournage{background:#e6f3f7; box-shadow:inset 0 0 0 1px #007692}
.cfr-legende__quoi{flex:1; min-width:0; color:#5f6b72}
.cfr-legende__quand{font-weight:600; color:#111110; white-space:nowrap}

.cfr-projet__titre{margin:0; font-family:Unbounded, Geist, sans-serif; font-size:20px; font-weight:800; line-height:1.25; color:#111110; overflow-wrap:anywhere}
.cfr-projet__texte{margin:0; font-size:16px; line-height:1.5; color:#3f4750}
.cfr-projet__texte p{margin:0 0 12px}
.cfr-projet__texte p:last-child{margin-bottom:0}
@media (min-width:768px){ .cfr-projet__titre{font-size:22px} }

/* La source (Figma 1817:802, rangée « publié par ») : une carte blanche, qui a relayé
   l'annonce à gauche, la pilule « Annonce d'origine » à droite. Le site ne reçoit ni le
   groupe Facebook ni l'auteur : la rangée dit seulement ce qui est vrai (relayée par Castflow). */
.cfr-source{display:flex; align-items:center; gap:14px; padding:17px 16px 17px 20px; border-radius:28px; background:#fff}
.cfr-source__logo{flex:none; width:44px; height:44px; border-radius:99px; overflow:hidden}
.cfr-source__logo img{display:block; width:100%; height:100%}
.cfr-source__texte{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:normal}
.cfr-source__qui{font-size:16px; font-weight:500; color:#111110}
.cfr-source__sous{font-size:13px; color:#5f6b72}
.cfr-source__lien{flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 17px; border:1px solid #c9dde4; border-radius:99px;
  font-size:15px; font-weight:500; color:#007692; text-decoration:none; white-space:nowrap; transition:background-color .2s, border-color .2s}
.cfr-source__lien:hover{background:#eef6f8; border-color:#007692}
.cfr-source__lien:focus-visible{outline:2px solid #007692; outline-offset:3px}
@media (max-width:479px){
  .cfr-source{flex-wrap:wrap}
  .cfr-source__lien{width:100%; justify-content:center}
}

/* L'encart « Ta place » avec son explication (Figma 1775:690, texte validé le 22 oct.). */
.cfp-place__n{font-size:40px}
.cfp-vagues{margin:0; font-size:17px; font-weight:600; line-height:normal; color:#fff}
.cfp-manque{margin:0; font-size:15px; line-height:1.4; color:rgba(255,255,255,.85)}
.cfp-manque b{font-weight:600; color:#fff}
.cfp-barre{height:10px; background:rgba(255,255,255,.22)}
.cfp-reperes span:last-child{padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.18); font-weight:700}
/* Le bouton d'invitation (Figma Refonte 1830:159) : le libellé à gauche, la pastille du gain et
   le rond teal « + » au bout, sur une ligne. */
.cfp-inviter{justify-content:space-between; gap:12px; min-height:60px; padding:8px 8px 8px 24px; text-align:left}
.cfp-inviter__mot{min-width:0; font-size:16px; font-weight:600; line-height:1.25}
.cfp-inviter__gain{flex:none; margin-left:auto; padding:5px 10px; border-radius:999px; background:rgba(0,118,146,.1);
  font-size:13px; font-weight:600; line-height:1.25; color:#007692; white-space:nowrap}
.cfp-inviter__gain[hidden]{display:none}
.cfp-inviter__rond{position:relative; flex:none; width:44px; height:44px; border-radius:50%; background:#007692;
  transition:transform .25s ease}
.cfp-inviter__rond::before, .cfp-inviter__rond::after{content:''; position:absolute; top:50%; left:50%; width:16px;
  height:2.5px; margin:-1.25px 0 0 -8px; border-radius:2px; background:#fff}
.cfp-inviter__rond::after{transform:rotate(90deg)}
.cfp-inviter:hover .cfp-inviter__rond{transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){.cfp-inviter__rond{transition:none}}

/* « Dans le même genre. » : centré au-dessus des trois cartes (Figma 1775:707). */
.cfc-similar .rf-h2{text-align:center}