/* ============================================================
   Launchpad · Cas clients
   Genere par _tools/build_cas.py, contenu dans _tools/cas_data.py.
   S'appuie sur les jetons de styles.css et reprend .prose, .artlayout,
   .artside, .toc, .share, .sidecard, .inlinecta et .related de blog.css.
   Aucune couleur en dur : tout passe par les variables, donc le theme
   sombre suit sans regle dediee.
   ============================================================ */

.casindex { padding-bottom: 0; }

/* Les primitives de carte (.cascard, .castag, .casgrid) vivent dans
   styles.css : la page d'accueil s'en sert aussi, sans charger ce fichier. */

/* ---------- En-tete de l'index ---------- */
.casindex__head { padding: clamp(30px, 5vw, 60px) 0 clamp(34px, 4.5vw, 56px); }
.casindex__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(46px, 9.5vw, 132px); line-height: 0.92; letter-spacing: -0.05em;
}
.casindex__sub {
  color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); letter-spacing: -0.015em;
  max-width: 52ch; margin-top: clamp(16px, 2vw, 24px);
}

/* ---------- A la une ---------- */
.casfeat { display: grid; grid-template-columns: 0.92fr 1.28fr; gap: 24px; align-items: start; }
.casfeat__main {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .25s var(--ease-reveal), box-shadow .25s;
}
.casfeat__main:hover { transform: translateY(-3px); box-shadow: 0 28px 60px rgba(var(--shadow-rgb),0.09); }
.casfeat__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--stage); }
.casfeat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.casfeat__body { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); }
.casfeat__title {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.2vw, 27px); line-height: 1.14; letter-spacing: -0.034em;
  margin-top: 14px;
}
.casfeat__text { display: block; color: var(--muted); font-size: 15.5px; margin-top: 13px; letter-spacing: -0.012em; }
.casfeat__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
  font-size: 14.5px; font-weight: 550; transition: gap .2s;
}
.casfeat__main:hover .casfeat__more { gap: 11px; }
.casfeat__side { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }

/* ---------- Bandeau citation ---------- */
.casband {
  background: var(--panel); color: var(--on-panel); border-radius: var(--radius);
  margin: clamp(56px, 7vw, 96px) auto 0; max-width: calc(var(--maxw) - 56px);
  padding: clamp(44px, 6vw, 82px) 0;
  /* En theme sombre, --panel (#131316) et le fond de page (#09090B) sont trop
     proches pour que le bandeau se detache seul. Ce filet le redessine. En
     theme clair il est invisible, pose sur un bloc deja tres contraste. */
  border: 1px solid var(--line);
}
.casband__quote { margin: 0; }
.casband__quote p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3.1vw, 40px); line-height: 1.16; letter-spacing: -0.04em;
  /* Largeur en px et non en ch : a cette taille de police, 20ch tombait sous
     300px et cassait la citation a un ou deux mots par ligne. */
  max-width: 640px;
}
.casband__quote footer { display: flex; flex-direction: column; gap: 2px; margin-top: clamp(22px, 3vw, 34px); }
.casband__who { font-weight: 550; font-size: 15px; letter-spacing: -0.015em; }
.casband__role { font-size: 14px; color: rgba(255,255,255,0.55); letter-spacing: -0.01em; }
.casband__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-size: 14.5px; font-weight: 550; color: var(--accent); transition: gap .2s;
}
.casband__link:hover { gap: 12px; }

/* ---------- Chiffres, un par cas ---------- */
.casstatsband { padding: clamp(64px, 9vw, 124px) 0 0; }
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.statcard {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 172px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px 22px; transition: border-color .2s, transform .25s var(--ease-reveal);
}
.statcard:hover { border-color: var(--line-2); transform: translateY(-3px); }
.statcard:nth-child(4n+1) { background: var(--accent-tint); border-color: transparent; }
.statcard__value {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.042em;
  margin-bottom: auto;
}
.statcard__label { font-size: 14px; line-height: 1.4; color: var(--muted); letter-spacing: -0.012em; margin-top: 16px; }
.statcard__who {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ---------- Tous les cas ---------- */
.casall { padding: clamp(64px, 9vw, 124px) 0 clamp(72px, 9vw, 120px); }
.casall__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.casall__tools { display: flex; gap: 10px; }
.casrow { margin-top: clamp(46px, 5.5vw, 72px); }
.casrow:first-child { margin-top: 8px; }
.casrow__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -0.035em; margin-bottom: 22px;
  scroll-margin-top: 108px;
}

/* ============================================================
   PAGE D'UN CAS
   ============================================================ */
/* ---------- Hero pleine largeur ----------
   Calque sur la page de reference : la photo occupe tout le bloc, le titre et
   les trois chiffres sont poses dessus. Le bloc est volontairement sombre dans
   les deux themes, comme les autres blocs a fond --panel du site. */
.cashero {
  position: relative; display: flex; overflow: hidden;
  min-height: clamp(540px, 80vh, 840px);
  background: var(--panel);
  /* Deborde des 28px du conteneur : le hero est pleine largeur. */
  margin-bottom: clamp(40px, 5vw, 64px);
}
.cashero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Deux degrades superposes. Le vertical porte le contraste du texte, pose en
   bas ; l'horizontal protege la colonne de gauche quand la photo y est claire,
   ce qui est le cas des visuels d'attente. Sans lui, un portrait sur fond clair
   rendrait le titre blanc illisible. */
.cashero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.74) 26%,
                    rgba(0,0,0,0.32) 55%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0.42) 100%),
    linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0) 72%);
}
.cashero__inner {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(20px, 2.6vw, 30px); padding-bottom: clamp(34px, 4.4vw, 60px);
}
.cashero__body { max-width: 960px; }

.cashero__who {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  color: #fff; font-weight: 600; font-size: 16.5px; letter-spacing: -0.018em;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.cashero__role {
  font-weight: 400; font-size: 14.5px; color: rgba(255,255,255,0.62); letter-spacing: -0.01em;
}
.cashero__role::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; margin-right: 12px; vertical-align: middle;
}
.cashero__title {
  color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(27px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.045em;
  text-wrap: balance;
}

.cashero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px;
  margin-top: clamp(28px, 3.6vw, 48px); max-width: 1000px;
}
.hstat__value {
  display: block; color: #fff; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.042em;
}
.hstat__label {
  display: block; color: rgba(255,255,255,0.68); font-size: 14.5px; line-height: 1.42;
  margin-top: 10px; letter-spacing: -0.01em;
}

/* Fil d'Ariane pose sur la photo */
.crumbs--film { color: rgba(255,255,255,0.62); padding-top: 0; }
.crumbs--film a:hover { color: #fff; }
.crumbs--film span[aria-current] { color: rgba(255,255,255,0.92); }

/* Citations */
.casquote { margin: 0 0 clamp(40px, 5vw, 64px); max-width: 900px; }
/* La couleur est posee explicitement : la citation de cloture est dans .prose,
   ou `.prose p` l'aurait passee en gris de corps de texte, alors que celle du
   haut de page, hors .prose, restait en --ink. Les deux citations d'une meme
   page n'avaient donc pas la meme couleur. */
.casquote p {
  color: var(--ink);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2.8vw, 34px); line-height: 1.2; letter-spacing: -0.038em;
}
.casquote p::before { content: "« "; }
.casquote p::after { content: " »"; }
.casquote footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.casquote__who { font-weight: 550; font-size: 15px; letter-spacing: -0.015em; }
.casquote__role { font-size: 14px; color: var(--muted); letter-spacing: -0.01em; }
.casquote__role::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 10px; vertical-align: middle; }
.casquote--end {
  border-left: 3px solid var(--accent); padding-left: clamp(20px, 2.6vw, 30px);
  margin: clamp(44px, 5vw, 62px) 0 0;
}

/* Fiche situation, colonne de gauche */
.idcard { background: var(--stage); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; }
.idcard__title {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.idcard__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.idcard__row dt { font-size: 13.5px; color: var(--muted); letter-spacing: -0.01em; white-space: nowrap; }
.idcard__row dd { font-size: 13.5px; font-weight: 550; letter-spacing: -0.012em; text-align: right; }

.casresume { margin-top: clamp(48px, 5.5vw, 68px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.casresume h2 { margin-top: 0; }

/* Bandeau de conversion, bas de page */
.casconv { padding: clamp(56px, 7vw, 96px) 0 0; }
.casconv__inner {
  background: var(--panel); color: var(--on-panel); border-radius: var(--radius);
  padding: clamp(32px, 4.4vw, 60px);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.casconv__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.038em; max-width: 20ch;
}
.casconv__text { color: rgba(255,255,255,0.6); font-size: 15px; margin-top: 12px; max-width: 46ch; letter-spacing: -0.012em; }
.casconv__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .statcard:nth-child(4n+1) { background: var(--paper); border-color: var(--line); }
  .statcard:nth-child(3n+1) { background: var(--accent-tint); border-color: transparent; }
}
@media (max-width: 980px) {
  .casfeat { grid-template-columns: 1fr; }
  .casfeat__media { aspect-ratio: 16 / 9; }
  .casgrid { grid-template-columns: 1fr 1fr; }
  .casband { max-width: none; border-radius: 0; margin-top: clamp(48px, 7vw, 76px); }
  .cashero { min-height: clamp(460px, 72vh, 620px); }
  .cashero__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cashero { min-height: 0; }
  .cashero__inner { padding-top: 24px; padding-bottom: 34px; }
  .cashero__body { padding-top: clamp(180px, 42vw, 280px); }
  .cashero__stats { grid-template-columns: 1fr; gap: 18px; }
  .casgrid, .casfeat__side { grid-template-columns: 1fr; }
  .casall__head { align-items: stretch; }
  .casall__tools, .search, .search input { width: 100%; }
  .casconv__inner { flex-direction: column; align-items: flex-start; }
  .casconv__actions { width: 100%; }
  .casconv__actions .btn { flex: 1; }
  .statgrid { grid-template-columns: 1fr; }
  .statcard { min-height: 0; }
}