/* Home page: alternating bands, ported from the Claude Design mock-up
 * (2026-08-01). The night bands hold in both themes — see tokens.css — so they
 * are written against the fixed --nuit-* values rather than the themed ones.
 * Only the light bands follow the toggle.
 *
 * The night bands take --nuit-profonde, not --nuit: the header and the footer
 * already sit at that value, and in the night theme --fond IS --nuit, so a hero
 * painted with --nuit made the whole page one flat surface and the alternation
 * vanished. Deepening the chrome rather than the reading bands also keeps the
 * "éditions" section from merging into the footer.
 */

.surtitre {
  color: var(--or-facettes);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

/* On a night band, facet gold is too dark to read (4:1 on #0e0e12, under AA):
 * the accent goes back to full gold, which clears the bar at 9:1. */
.heros .surtitre {
  color: var(--or);
}

/* `.surtitre--clair` ne pose aucune couleur en propre : elle vaudrait celle de
 * `.surtitre`, à spécificité égale, et le modificateur n'est jamais posé seul.
 * Son seul rôle est de porter les deux surcharges du thème nuit ci-dessous. */

/* Night themes darken the light bands, and facet gold on #15151a fails AA too. */
:root[data-theme='dark'] .surtitre--clair {
  color: var(--or);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .surtitre--clair {
    color: var(--or);
  }
}

/* ---------- Hero ---------- */

.heros {
  background: var(--nuit-profonde);
  padding: clamp(4rem, 9vw, 6.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(4.5rem, 10vw, 7rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* A cold halo behind the title, in the brand blue. Decorative only. */
.heros::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgb(92 138 230 / 14%), transparent 70%);
}

.heros__contenu {
  position: relative;
  max-width: 66rem;
  margin: 0 auto;
}

.heros__titre {
  color: var(--nuit-texte);
  font-size: clamp(2.625rem, 8.2vw, 5.75rem);
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
}

.heros__filet {
  background: var(--or);
  height: 1px;
  margin: clamp(1.625rem, 3.4vw, 2.25rem) auto;
  width: 5.5rem;
}

.heros__pitch {
  color: var(--nuit-doux);
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  line-height: 1.62;
  margin: 0 auto;
  max-width: 40rem;
  text-wrap: pretty;
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
  margin-top: clamp(1.875rem, 4vw, 2.625rem);
}

/* A link to the editions section, in place of the status line that used to sit
 * here. That line was the one piece of hero text under WCAG AA — --nuit-efface
 * reaches only 2.6:1 on the night chrome — and Patrice's call was to replace it
 * rather than recolour it. The rule keeps it visibly a link at a size where
 * colour alone would not. */
.heros__etat {
  border-bottom: 1px solid rgb(168 164 151 / 35%);
  color: var(--nuit-doux);
  display: inline-block;
  font-size: 0.8125rem;
  margin: 1.375rem 0 0;
  text-decoration: none;
}

.heros__etat:hover,
.heros__etat:focus-visible {
  border-bottom-color: var(--or);
  color: var(--or);
}

.heros .bouton-or,
.bouton-creux {
  font-size: 0.96875rem;
  padding: 0.9375rem 1.875rem;
}

.bouton-creux {
  border: 1px solid var(--nuit-filet);
  border-radius: 2px;
  color: var(--nuit-texte);
  text-decoration: none;
}

.bouton-creux:hover {
  border-color: var(--or);
  color: var(--or);
}

/* ---------- Light bands ---------- */

.bande-claire {
  background: var(--fond);
  padding: clamp(3.25rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.bande__interieur {
  margin: 0 auto;
  max-width: 62.5rem;
}

.bande__titre {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  margin: 0 0 clamp(1.875rem, 4vw, 3rem);
  max-width: 41rem;
}

.bande__titre--serre {
  margin: 0;
}

.promesses {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
}

.promesse {
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 2rem 1.75rem 2.125rem;
  transition: transform 0.25s, box-shadow 0.25s;
}

.promesse:hover {
  box-shadow: 0 10px 30px rgb(21 21 26 / 9%);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .promesse {
    transition: none;
  }

  .promesse:hover {
    transform: none;
  }
}

.promesse__titre {
  font-family: var(--font-texte);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.promesse__texte {
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Pull quote ---------- */

.manifeste {
  background: var(--nuit-profonde);
  color: var(--nuit-texte);
  padding: clamp(3.25rem, 7vw, 5.25rem) clamp(1.25rem, 4vw, 3.5rem);
}

.manifeste__interieur {
  margin: 0 auto;
  max-width: 50rem;
  text-align: center;
}

.manifeste__formule {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

.manifeste__texte {
  color: var(--nuit-doux);
  font-size: clamp(0.96875rem, 1.6vw, 1.0625rem);
  line-height: 1.68;
  margin: 1.625rem auto 0;
  max-width: 40rem;
  text-wrap: pretty;
}

/* ---------- Editions ---------- */

.editions__entete {
  align-items: baseline;
  border-bottom: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: space-between;
  margin-bottom: clamp(1.625rem, 3.4vw, 2.25rem);
  padding-bottom: 1.125rem;
}

.editions__mesure {
  color: var(--texte-doux);
  font-size: 0.84375rem;
}

.edition-carte {
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.edition-carte--avenir {
  border-top: 1px solid var(--filet);
  margin-bottom: 0;
  padding-top: clamp(1.875rem, 4vw, 2.75rem);
}

.edition-carte__haut {
  align-items: start;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
}

.edition-carte__visuel {
  background: var(--nuit);
  border: 1px solid var(--filet);
}

.edition-carte__visuel img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.edition-carte__visuel--vide {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: var(--blanc-casse);
  border: 1px dashed var(--filet);
  /* #9a958a codé en dur n'était lisible qu'en thème nuit : 2,7:1 en clair,
   * sous AA. --texte-doux suit le thème (7,0:1 clair, 7,3:1 nuit). */
  color: var(--texte-doux);
  display: flex;
  font-size: 0.78125rem;
  justify-content: center;
  letter-spacing: 0.18em;
  padding: 0 1rem;
  text-align: center;
  text-transform: uppercase;
}

:root[data-theme='dark'] .edition-carte__visuel--vide {
  background: var(--surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .edition-carte__visuel--vide {
    background: var(--surface);
  }
}

.edition-carte__titre {
  font-size: clamp(1.5rem, 2.8vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 0.625rem;
}

.edition-carte__resume {
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.lien-appuye {
  border-bottom: 1px solid currentcolor;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.lien-appuye:hover {
  color: var(--texte);
}

.edition-carte__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.375rem;
}

.bouton-nuit {
  background: var(--nuit);
  color: var(--blanc-casse);
  font-size: 0.90625rem;
  font-weight: 700;
  padding: 0.8125rem 1.5rem;
  text-decoration: none;
}

.bouton-nuit:hover {
  background: var(--or-facettes);
  color: var(--blanc-casse);
}

/* On a night page the solid night button disappears into the background. */
:root[data-theme='dark'] .bouton-nuit {
  background: var(--surface);
  border: 1px solid var(--filet);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bouton-nuit {
    background: var(--surface);
    border: 1px solid var(--filet);
  }
}

.edition-carte__echeance {
  /* Même correction que la vignette vide : le gris fixe échouait en clair. */
  color: var(--texte-doux);
  font-size: 0.84375rem;
}

/* ---------- Chapter strip ---------- */

.chapitres-liste {
  background: var(--filet);
  border: 1px solid var(--filet);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  margin-top: clamp(1.375rem, 3vw, 2rem);
}

.chapitre-vignette {
  align-items: center;
  background: var(--surface);
  color: var(--texte);
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  text-decoration: none;
}

/* --surface-haute carries both themes on its own, so the two overrides this
 * rule used to need are gone. It replaces --retenir-fond, which disappeared
 * with the "À retenir" fill. */
.chapitre-vignette:hover {
  background: var(--surface-haute);
}

/* Le visuel seul, sans le panneau de titre : celui-ci redirait le titre du
 * chapitre, déjà écrit en toutes lettres à côté, et en tout petit.
 *
 * 🔴 Le ratio n'est pas décoratif, il découpe. Le bandeau fait 1920×1080, dont
 * 640 de texte et 1280 d'image. En `cover`, une boîte de ratio 1280/1080 retient
 * 1080 de haut sur 1280 de large ; calée à droite, elle couvre exactement
 * x = 640 → 1920, c'est-à-dire la zone image et rien d'autre. Si la répartition
 * du gabarit change, ce ratio doit suivre — sinon la découpe mord sur le texte
 * ou ampute le visuel. */
.chapitre-vignette img {
  aspect-ratio: 1280 / 1080;
  background: var(--nuit);
  display: block;
  flex: none;
  object-fit: cover;
  object-position: 100% 50%;
  width: 5.5rem;
}

.chapitre-vignette__numero {
  color: var(--or-facettes);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

:root[data-theme='dark'] .chapitre-vignette__numero {
  color: var(--or);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .chapitre-vignette__numero {
    color: var(--or);
  }
}

.chapitre-vignette__titre {
  display: block;
  font-size: 1.03125rem;
  margin-top: 2px;
}