/* =====================================================================
   VERDOSO — NOTE « CASSANDRE »  ·  note-cassandra.css
   Habillage cinématique, scopé à CETTE note (chargé seulement par
   /notes/cassandre-malediction-de-voir-juste/ et sa version EN).
   100 % construit sur tokens.css — aucune valeur en dur de marque.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0 · Mesure de lecture & rythme propres à la note
--------------------------------------------------------------------- */
.cassandre { --measure: 68ch; --reading: 720px; }

.cassandre .reading {
  max-width: var(--reading);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------------
   1 · HERO — plein cadre, encre, marbre, ligne-pouls bordeaux
--------------------------------------------------------------------- */
.cassandre-hero {
  position: relative;
  min-height: clamp(560px, 92svh, 920px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-900);
  isolation: isolate;
}
.cassandre-hero__media { position: absolute; inset: 0; z-index: -2; }
.cassandre-hero__media img,
.cassandre-hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 38%;
}
/* Image de poster : léger ken-burns (fallback si pas de vidéo) */
.cassandre-hero__media img {
  animation: cassKenburns 26s var(--ease-in-out) infinite alternate;
}
.cassandre-hero__media video { opacity: 0; transition: opacity 1200ms var(--ease-out); }
.cassandre-hero__media video.is-ready { opacity: 1; }

/* Voiles : assombrit le bas et la gauche pour asseoir le texte */
.cassandre-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10,6,5,.92) 0%, rgba(10,6,5,.55) 34%, rgba(10,6,5,.12) 64%, rgba(10,6,5,.30) 100%),
    linear-gradient(105deg, rgba(10,6,5,.78) 0%, rgba(10,6,5,.30) 46%, rgba(10,6,5,0) 72%);
}
/* Grain muséal très discret */
.cassandre-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cassandre-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
}
.cassandre-hero__kicker { color: var(--accent-on-dark); }
.cassandre-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 7vw, 6rem);
  line-height: .98;
  letter-spacing: var(--ls-display);
  color: var(--bone-50);
  max-width: 18ch;
  margin-top: var(--space-4);
  text-wrap: balance;
}
.cassandre-hero__title em {
  font-style: italic;
  color: var(--bone-100);
}
.cassandre-hero__lead {
  margin-top: var(--space-5);
  max-width: 56ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: var(--lh-loose);
  color: var(--text-on-dark-body);
}
.cassandre-hero__meta {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--fs-small);
  color: var(--text-on-dark-faint);
}
.cassandre-hero__meta b { color: var(--text-on-dark); font-weight: 500; }

/* Ligne-pouls verticale bordeaux — seul ornement animé (signature) */
.cassandre-pulse {
  position: absolute; z-index: 0;
  left: var(--gutter); bottom: 0;
  width: var(--border-accent); height: clamp(80px, 16vh, 160px);
  background: linear-gradient(to top, var(--accent) 0%, rgba(161,57,76,0) 100%);
  transform-origin: bottom;
  animation: cassPulse 3.6s var(--ease-in-out) infinite;
}
@keyframes cassPulse {
  0%, 100% { transform: scaleY(.55); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: .9; }
}
@keyframes cassKenburns {
  from { transform: scale(1.0)  translate3d(0,0,0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

/* Indice de défilement */
.cassandre-scroll {
  position: absolute; right: var(--gutter); bottom: clamp(1.5rem,4vw,2.5rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-on-dark-faint);
  writing-mode: vertical-rl;
}
.cassandre-scroll::after {
  content: ""; width: 1px; height: 46px;
  background: linear-gradient(var(--accent-on-dark), transparent);
  animation: cassDrop 2.4s var(--ease-in-out) infinite;
}
@keyframes cassDrop { 0%{transform:scaleY(.2);transform-origin:top;opacity:.2} 50%{transform:scaleY(1);opacity:.8} 100%{transform:scaleY(.2);transform-origin:bottom;opacity:.2} }

@media (max-width: 720px) {
  .cassandre-hero__media img, .cassandre-hero__media video { object-position: 64% 32%; }
  .cassandre-scroll { display: none; }
}

/* ---------------------------------------------------------------------
   2 · BANDEAU MÉTA (sous le hero) — fil d'Ariane + signature
--------------------------------------------------------------------- */
.cassandre-meta {
  border-bottom: 1px solid var(--hairline-light);
  background: var(--surface-light-raised);
}
.cassandre-meta__row {
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

/* ---------------------------------------------------------------------
   3 · CHAPITRES — numéros romains, titres Garamond
--------------------------------------------------------------------- */
.cassandre-chapter { margin-top: var(--space-9); }
.cassandre-chapter:first-of-type { margin-top: var(--space-7); }
.cassandre-chapter__num {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent-on-light);
}
.cassandre-chapter__num::before {
  content: ""; width: 28px; height: 1px; background: var(--accent); opacity: .8;
}
.cassandre-chapter__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.08;
  letter-spacing: var(--ls-heading); color: var(--text-on-light);
  margin-top: var(--space-4); max-width: 20ch; text-wrap: balance;
}

/* ---------------------------------------------------------------------
   4 · CORPS — prose + lettrine muséale
--------------------------------------------------------------------- */
.cassandre-prose { max-width: var(--measure); margin-top: var(--space-5); }
.cassandre-prose > * + * { margin-top: var(--space-4); }
.cassandre-prose p {
  font-size: 1.06rem; line-height: 1.75; color: var(--text-on-light);
}
.cassandre-prose p.lede { font-size: 1.18rem; line-height: 1.7; color: var(--text-on-light); }
.cassandre-prose a {
  color: var(--accent-on-light); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(161,57,76,.45);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.cassandre-prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.cassandre-prose strong { color: var(--text-on-light); font-weight: 600; }
.cassandre-prose em { font-style: italic; }
/* petites capitales pour les œuvres/auteurs balisés <span class="work"> */
.cassandre-prose .work { font-style: italic; }
.cassandre-prose .anc { font-variant: small-caps; letter-spacing: .02em; color: var(--text-on-light); }

/* Lettrine sur le premier paragraphe d'un chapitre marqué .has-dropcap */
.cassandre-prose.has-dropcap > p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 500;
  float: left; line-height: .8;
  font-size: 3.9em; padding: .06em .12em 0 0;
  color: var(--accent-on-light);
}

/* Liste à filet bordeaux propre à la note */
.cassandre-prose ul { margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cassandre-prose ul li { position: relative; padding-left: var(--space-6); line-height: 1.65; color: var(--text-on-light); }
.cassandre-prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 18px; height: 1px; background: var(--accent); }

/* ---------------------------------------------------------------------
   5 · PLANCHES — illustrations plein cadre + légende
--------------------------------------------------------------------- */
.cassandre-plate {
  position: relative; margin: var(--space-8) 0;
  background: var(--ink-900);
  overflow: hidden;
}
/* Dernière planche d'un chapitre : pas de marge basse (évite l'îlot clair avant la chute sombre) */
.cassandre-plate:last-child { margin-bottom: 0; }
.cassandre-plate__img {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
}
.cassandre-plate--tall .cassandre-plate__img { aspect-ratio: 4 / 3; }
.cassandre-plate__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05); filter: saturate(.92) contrast(1.02);
  transition: transform 1400ms var(--ease-out), opacity 1200ms var(--ease-out);
}
.js .cassandre-plate__img img { opacity: 0; }
.cassandre-plate.is-in .cassandre-plate__img img { transform: scale(1); opacity: 1; }
.cassandre-plate__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,6,5,.55) 0%, rgba(10,6,5,0) 42%);
}
.cassandre-plate__cap {
  display: flex; gap: var(--space-4); align-items: baseline;
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-6);
  color: var(--text-on-dark-body);
}
.cassandre-plate__cap .lab {
  flex-shrink: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--wine-400);
}
.cassandre-plate__cap .cap { font-size: var(--fs-small); line-height: 1.6; font-style: italic; color: var(--text-on-dark-body); }

/* Variante : planche encadrée dans la colonne de lecture (plus intime) */
.cassandre-figure { margin: var(--space-8) 0; }
.cassandre-figure img { width: 100%; border: 1px solid var(--hairline-light); }
.cassandre-figure figcaption {
  margin-top: var(--space-3); font-size: var(--fs-small); line-height: 1.6;
  color: var(--text-on-light-muted); font-style: italic;
}

/* ---------------------------------------------------------------------
   6 · EXERGUE — citations antiques en grand Garamond
--------------------------------------------------------------------- */
.cassandre-quote {
  max-width: 34ch; margin: var(--space-7) auto;
  text-align: center;
}
.cassandre-quote blockquote {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.3;
  letter-spacing: var(--ls-heading); color: var(--text-on-light);
  text-wrap: balance;
}
.cassandre-quote blockquote::before { content: "«\00A0"; color: var(--accent); }
.cassandre-quote blockquote::after  { content: "\00A0»"; color: var(--accent); }
.cassandre-quote cite {
  display: inline-block; margin-top: var(--space-5); font-style: normal;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.cassandre-quote cite::before {
  content: ""; display: block; width: var(--rule-w); height: 1px;
  background: var(--accent); opacity: .7; margin: 0 auto var(--space-4);
}

/* ---------------------------------------------------------------------
   7 · LA CHUTE — panneau sombre (pourquoi ce nom)
--------------------------------------------------------------------- */
.cassandre-chute {
  position: relative; margin-top: 0;
  background: var(--surface-darker); color: var(--text-on-dark-body);
  overflow: hidden; isolation: isolate;
}
.cassandre-chute::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(120% 90% at 88% 8%, rgba(161,57,76,.20), rgba(10,6,5,0) 58%);
}
.cassandre-chute__inner {
  max-width: var(--reading); margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}
.cassandre-chute__inner .cassandre-chapter__num { color: var(--accent-on-dark); }
.cassandre-chute__inner .cassandre-chapter__num::before { background: var(--accent-on-dark); }
.cassandre-chute h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.1;
  color: var(--text-on-dark); margin-top: var(--space-4); max-width: 22ch; text-wrap: balance;
}
.cassandre-chute p { font-size: 1.06rem; line-height: 1.78; color: var(--text-on-dark-body); margin-top: var(--space-4); max-width: var(--measure); }
.cassandre-chute strong { color: var(--text-on-dark); font-weight: 600; }
.cassandre-chute em { font-style: italic; color: var(--bone-100); }
.cassandre-chute a:not(.btn) {
  color: var(--bone-50); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(184,78,97,.6);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.cassandre-chute a:not(.btn):hover { text-decoration-color: var(--accent-on-dark); }
.cassandre-chute__cta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Vers d'ouverture / clausule en grand */
.cassandre-verdict {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; color: var(--bone-50);
  margin-top: var(--space-6); max-width: 24ch;
}
.cassandre-verdict b { font-style: normal; font-weight: 500; color: var(--accent-on-dark); }

/* ---------------------------------------------------------------------
   8 · APPAREIL — sources, note de bas, encart « à retenir » (réutilise .takeaways/.sources)
--------------------------------------------------------------------- */
.cassandre-apparatus { max-width: var(--reading); margin-inline: auto; padding-inline: var(--gutter); }
.cassandre-apparatus .takeaways { background: var(--surface-light-raised); }

/* Note transverse : petite capitale d'auteur antique dans le fil */
.cassandre-prose .src { color: var(--text-on-light-muted); }

/* ---------------------------------------------------------------------
   9 · MOUVEMENT réduit
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cassandre-hero__media img { animation: none; }
  .cassandre-pulse, .cassandre-scroll::after { animation: none; }
  .js .cassandre-plate__img img { opacity: 1; transform: none; }
}