/* Les pages /castings/ (CFT-1514) : catégories et 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-ivoire:#f6f4f1; --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}
.cfc-wrap{max-width:760px; margin:0 auto}

/* 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%}

/* ── L'en-tête de la page ─────────────────────────────────────────────────── */
.cfc-hero{padding:32px 16px 44px; background:linear-gradient(to bottom, #fff, var(--cfc-ivoire))}
.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}
.cfc-lead{margin:18px 0 0; font-size:17px; line-height:1.55; color:var(--cfc-muet)}
.cfc-actions{margin-top:28px}
.cfc-muted{margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--cfc-muet)}
@media (min-width:768px){
  .cfc-hero{padding:56px 40px 60px}
  .cfc-h1{font-size:44px}
  .cfc-lead{font-size:19px}
}

/* ── Les sections ─────────────────────────────────────────────────────────── */
.cfc-section{padding:40px 16px}
@media (min-width:768px){ .cfc-section{padding:56px 40px} }
.cfc-h2{margin:0 0 14px; font-size:24px; font-weight:500; letter-spacing:-.02em; line-height:1.25}
@media (min-width:768px){ .cfc-h2{font-size:28px} }

/* Le corps écrit à la main : .article-body de styles.css fait la typographie. */
.cfc-body{max-width:720px}

/* La FAQ : des questions et des réponses visibles, sans accordéon (le balisage FAQPage
   décrit ce que la page montre). */
.cfc-faq{background:var(--cfc-ivoire)}
.cfc-faq__list h3{margin:26px 0 8px; font-size:18px; font-weight:500; line-height:1.35}
.cfc-faq__list h3:first-child{margin-top:0}
.cfc-faq__list p{margin:0; font-size:16px; line-height:1.65; color:var(--cfc-corps)}

/* ── « Ce qui se publie en ce moment » ────────────────────────────────────── */
.cfc-count{margin:0 0 16px; font-size:17px; font-weight:500; color:var(--cfc-teal)}
.cfc-teasers{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px}
.cfc-teaser__in{display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid var(--cfc-filet); border-radius:12px; background:#fff; color:inherit;
  text-decoration:none}
a.cfc-teaser__in:hover{border-color:rgba(0,118,146,.45)}
.cfc-teaser__type{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cfc-teal)}
.cfc-teaser__place{font-size:17px; font-weight:500}
.cfc-teaser__meta{font-size:14px; color:var(--cfc-muet)}
.cfc-teaser__lock, .cfc-live__lock{display:flex; align-items:center; gap:8px; font-size:13px;
  color:var(--cfc-muet)}
.cfc-teaser__lock{margin-top:6px}
.cfc-live__lock{margin:0 0 20px}
.cfc-lock{flex:0 0 auto}

/* ── Le bandeau d'appel à l'action ────────────────────────────────────────── */
.cfc-band{padding:48px 16px; color:#fff;
  background:linear-gradient(135deg,#087590 0%,#0a969f 55%,#09aaaa 100%)}
.cfc-band__in{text-align:left}
.cfc-band__t{margin:0 0 10px; font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15}
.cfc-band__s{margin:0 0 24px; font-size:16px; line-height:1.5; color:rgba(255,255,255,.9)}
@media (min-width:768px){
  .cfc-band{padding:64px 40px}
  .cfc-band__t{font-size:32px}
}

/* ── Les autres pages ─────────────────────────────────────────────────────── */
.cfc-more__list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.cfc-more__list a{display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border:1px solid var(--cfc-filet); border-radius:999px; font-size:15px; font-weight:500;
  color:var(--cfc-encre); text-decoration:none}
.cfc-more__list a:hover{border-color:rgba(0,118,146,.45); color:var(--cfc-teal)}

/* ── 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}
}

/* ── Une fiche : le bloc verrouillé ───────────────────────────────────────────
   STATIQUE. Ce n'est pas du texte flouté : les vraies données (contact, lien, cachet,
   breakdown, matching) ne sont jamais envoyées à ce site, il n'y a donc rien à flouter. Ce
   sont des barres fixes, les mêmes pour toutes les fiches. */
.cfc-wall{padding:40px 16px 48px}
@media (min-width:768px){ .cfc-wall{padding:56px 40px} }
.cfc-wall__box{padding:24px 20px; border:1px solid var(--cfc-filet); border-radius:16px;
  background:var(--cfc-ivoire)}
@media (min-width:600px){ .cfc-wall__box{padding:32px} }
.cfc-wall__head{display:flex; align-items:center; gap:10px; color:var(--cfc-teal)}
.cfc-wall__t{margin:0; font-size:24px; font-weight:500; letter-spacing:-.02em; color:var(--cfc-encre)}
.cfc-wall__intro{margin:12px 0 0; font-size:16px; line-height:1.55; color:var(--cfc-corps)}
.cfc-wall__list{list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:0}
.cfc-wall__list li{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--cfc-filet)}
.cfc-wall__list li:first-child{border-top:1px solid var(--cfc-filet)}
.cfc-wall__label{font-size:16px; font-weight:500}
.cfc-wall__bar{flex:0 0 auto; width:96px; height:10px; border-radius:999px;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.11) 0 8px, rgba(0,0,0,.05) 8px 16px)}
.cfc-wall__list li:nth-child(2n) .cfc-wall__bar{width:72px}
.cfc-wall__list li:nth-child(3n) .cfc-wall__bar{width:120px}
.cfc-wall__login{margin:16px 0 0; font-size:14px; color:var(--cfc-muet)}
.cfc-wall__login a{color:var(--cfc-teal); text-decoration:underline; text-underline-offset:2px}