/* LB Academy — landing page marketing (lucasbaretacademy.com/)
   Palette "papier / encre / or" — mêmes valeurs que app/css/styles.css pour
   --color-bg / --color-surface / --color-ink (une seule source de vérité,
   dans les DEUX thèmes : voir le bloc "Thème sombre" en fin de fichier).
   Les tons or (--color-gold / --color-gold-deep) sont propres à la landing :
   ils diffèrent volontairement de --color-accent de l'app (#b68235), qui
   n'a pas été touché pour rester hors scope de ce chantier.

   Ces noms décrivent un RÔLE, pas une teinte, et le thème sombre inverse
   plusieurs de ces relations sans les renommer :
   - --color-ink* : la couleur du texte. Claire en thème sombre, malgré
     "ink". Tous les filets du fichier en dérivent par color-mix, donc ils
     suivent le renversement d'eux-mêmes, sans règle supplémentaire.
   - --color-gold-deep : l'or qui PORTE du texte (il doit atteindre 4.5:1
     sur le fond). Sur papier c'est le plus foncé des deux ; sur encre c'est
     le plus CLAIR, la lisibilité imposant l'inverse. --color-gold reste
     l'or ornemental (filets, notes, bordures) et la couleur de survol.
   - --color-band-* : la bande "À propos" (section[data-tone="dark"]), seule
     section à contre-ton du reste de la page. Voir son bloc plus bas. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  color-scheme: light dark;

  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-ink: #201f1d;
  --color-ink-soft: #3a3835;
  --color-ink-muted: #4a4744;
  --color-ink-pale: #6a6763; /* durci depuis #6e6b67 : 4.37:1 sur --color-surface, sous AA pour le pied de page et la note de crédibilité, tous deux en 11.5px */
  --color-gold: #c8a24a;
  --color-gold-deep: #7a5d22; /* durci depuis #8e6f2c du mockup : ~4.2:1 sur papier, sous le seuil AA (4.5:1) pour du texte normal */
  --color-on-gold: #201f1d; /* lettrage posé SUR une plaque d'or pleine (survol de .btn-gold) : le crème n'y atteignait que 2.15:1 */

  --color-band-bg: #201f1d;
  --color-band-text: #f3f2f2;
  --color-band-edge: transparent; /* la bande se détache par son seul contraste sur papier ; en sombre elle a besoin de filets, voir plus bas */

  --color-popover-bg: #f3f2f2;
  /* Ombre portée du popover, jamais dérivée de --color-ink : en thème
     sombre celui-ci est clair et l'ombre deviendrait un halo lumineux. */
  --shadow-popover: 0 10px 30px color-mix(in srgb, #201f1d 14%, transparent);

  --color-divider: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --color-divider-strong: color-mix(in srgb, var(--color-ink) 16%, transparent);
  --color-band-divider: color-mix(in srgb, var(--color-band-text) 16%, transparent);

  --font-heading: 'Cormorant Garamond', Garamond, serif;
  --font-body: 'Lora', Georgia, serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* même courbe que l'app (app/css/styles.css) */

  --staff-col: clamp(0px, 6vw, 72px);
  --content-pad-x: clamp(24px, 6vw, 88px);
  --content-pad-y: clamp(72px, 11vw, 132px);
}

* { box-sizing: border-box; }

/* Un défilement animé est du MOUVEMENT, au même titre que la translation de
   .btn-gold:active ou le balancement de la flèche : les deux surcharges plus
   bas dans ce fichier les éteignent déjà toutes les deux, et celle-ci était la
   seule à manquer — alors qu'elle porte le plus grand mouvement de la page
   (.hero fait une pleine hauteur d'écran, min-height:100svh).

   La surcharge est déclarée APRÈS la règle qu'elle annule : même sélecteur,
   donc même spécificité (0,0,1), et seul l'ordre de fichier les départage.
   Même piège que la surcharge de mouvement réduit du panneau d'outils dans
   app/css/styles.css.

   Elle porte aussi la moitié JS du mécanisme, et c'est le point à ne pas
   défaire : scrollIntoView({ behavior: 'auto' }) ne veut pas dire
   « instantané » mais « suis la propriété scroll-behavior de l'élément »
   (CSSOM View). Sans cette surcharge, le garde de js/landing.js retomberait
   donc sur smooth et ne ferait rien. Le garde jumeau de l'app (main.js,
   sommaire du guide) fonctionne, lui, parce qu'app/css/styles.css ne déclare
   aucun scroll-behavior : la même écriture n'a pas le même effet des deux
   côtés, et les deux moitiés doivent voyager ensemble. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.landing {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.landing a { color: var(--color-gold-deep); text-decoration: none; }
body.landing a:hover { color: var(--color-gold); }

body.landing ::selection { background: color-mix(in srgb, var(--color-gold) 24%, transparent); }

:focus-visible {
  /* --color-gold n'atteint que ~2.1:1 sur papier (sous le seuil non-texte
     3:1) ; --color-gold-deep (~5.5:1) sert d'anneau de focus par défaut. */
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

section[data-tone="dark"] :focus-visible {
  outline-color: var(--color-band-text);
}

img { max-width: 100%; }

/* ---------- Boutons ---------- */

.btn-gold {
  display: inline-block;
  padding: 16px 34px;
  border: 1px solid var(--color-gold);
  border-radius: 2px;
  color: var(--color-gold-deep);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, transform .14s var(--ease-out);
}

/* Le remplissage doré est réservé au vrai survol : sur mobile, un tap laissait
   l'appel à l'action allumé jusqu'au prochain tap ailleurs, ce qui se lit
   comme un état sélectionné. */
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover {
    background: var(--color-gold);
    color: var(--color-on-gold);
  }
}

.btn-gold:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .btn-gold { transition: background .25s ease, color .25s ease; }
  .btn-gold:active { transform: none; }
}

.meta-line {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ink-pale);
}

/* ---------- Décor "portée" (5 filets + note dorée) ---------- */

.staff-horizontal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: clamp(84px, 12vw, 132px);
}

.staff-horizontal__line {
  height: 1px;
  background: color-mix(in srgb, var(--color-ink) 16%, transparent);
  position: relative;
}

.staff-horizontal__note {
  position: absolute;
  top: 50%;
  left: 14%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translate(-50%, -50%);
}

.staff-vertical {
  position: relative;
  overflow: hidden;
}

.staff-vertical__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--color-ink) 13%, transparent);
}

.staff-vertical__line:nth-child(1) { right: 0; }
.staff-vertical__line:nth-child(2) { right: 13px; }
.staff-vertical__line:nth-child(3) { right: 26px; }
.staff-vertical__line:nth-child(4) { right: 43px; }
.staff-vertical__line:nth-child(5) { right: 56px; }

.staff-vertical__note {
  position: absolute;
  top: 50%;
  right: var(--note-right);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-gold);
}

section[data-tone="dark"] .staff-vertical__line {
  background: var(--color-band-divider);
}

/* ---------- Structure de section ---------- */

.content-grid {
  display: grid;
  grid-template-columns: var(--staff-col) 1fr;
}

.content-grid.bg-surface { background: var(--color-surface); }
.content-grid.border-top { border-top: 1px solid var(--color-divider); }

.content-grid__body {
  min-width: 0; /* sans ça, l'auto-fit/minmax(300px,1fr) de .faq-grid force la taille
                   intrinsèque (min-content) de cet item de grille au lieu de respecter
                   la piste 1fr — repéré via Playwright : la section FAQ débordait à
                   1004px sur un viewport de 375px, seule section avec ce symptôme. */
  padding: var(--content-pad-y) var(--content-pad-x);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: 18px;
}

section[data-tone="dark"] .eyebrow { color: var(--color-gold); }

.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.1;
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: 18ch;
  text-wrap: pretty;
}

.section-title--gap-lg { margin-bottom: clamp(32px, 5vw, 56px); }
.section-title--gap-md { margin-bottom: clamp(28px, 4vw, 44px); }

.section-intro {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.75;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

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

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(72px, 12vh, 140px) clamp(24px, 6vw, 64px) clamp(56px, 9vh, 110px);
  gap: clamp(20px, 3vh, 34px);
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(46px, 10vw, 104px);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}

.hero__subtitle {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.6;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.hero .staff-horizontal { margin-top: clamp(24px, 5vh, 58px); }

.scroll-hint {
  margin-top: clamp(10px, 2vh, 20px);
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--color-ink-pale);
  cursor: pointer;
  display: inline-flex;
  opacity: 1;
  transition: opacity .5s ease;
}

.scroll-hint:hover,
.scroll-hint:focus-visible { color: var(--color-gold-deep); }

.scroll-hint svg {
  display: block;
  animation: scroll-hint-bob 2.4s ease-in-out infinite;
}

.scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes scroll-hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
}

/* ---------- Méthode : grille des 3 principes ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 4vw, 54px);
  margin-top: clamp(48px, 7vw, 86px);
}

.principle {
  padding-left: clamp(20px, 2.5vw, 34px);
  border-left: 1px solid var(--color-divider);
}

.principle__numeral {
  font-family: var(--font-heading);
  font-size: 38px;
  line-height: 1;
  color: var(--color-gold-deep);
  margin-bottom: 14px;
}

.principle__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.25;
  margin: 0 0 10px;
  text-wrap: pretty;
}

.principle__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.credibility-note {
  margin: clamp(40px, 5vw, 64px) 0 0;
  max-width: 70ch;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--color-ink-pale);
  text-wrap: pretty;
}

/* ---------- Popover "référence scientifique" (Kramár et al.) ---------- */

.info-popover-wrap {
  position: relative;
  display: inline-flex;
  margin-top: 12px;
}

.info-trigger {
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-gold) 60%, transparent);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1;
  color: var(--color-gold-deep);
  user-select: none;
}

.info-trigger:hover {
  border-color: var(--color-gold);
  background: color-mix(in srgb, var(--color-gold) 10%, transparent);
}

.info-popover {
  position: absolute;
  top: 26px;
  left: -6px;
  width: 272px;
  max-width: calc(100vw - 48px);
  z-index: 5;
  /* Toujours un cran PLUS clair que la section qui le porte (bg-surface) :
     sur papier c'est --color-bg, en sombre un gris plus haut que la surface.
     L'élévation se lit dans le sens inverse d'un thème à l'autre, d'où un
     jeton dédié plutôt qu'une réutilisation de --color-bg. */
  background: var(--color-popover-bg);
  border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  border-radius: 3px;
  box-shadow: var(--shadow-popover);
  padding: 16px;
  text-align: left;
}

.info-popover[hidden] { display: none; }

.info-popover__text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.info-popover__divider {
  height: 1px;
  background: var(--color-divider);
  margin: 12px 0;
}

.info-popover__source {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-ink-pale);
}

/* ---------- Bénéfices ---------- */

.benefit-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-divider-strong);
}

.benefit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(8px, 3vw, 48px);
  padding: clamp(22px, 3vw, 30px) 0;
  border-top: 1px solid var(--color-divider-strong);
}

.benefit:first-child { border-top: none; }

.benefit__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  margin: 0;
  text-wrap: pretty;
}

.benefit__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ---------- À propos ---------- */

/* La bande "À propos" est la seule section à contre-ton de la page. Sur
   papier elle plonge dans l'encre. En thème sombre, la reprendre à la lettre
   (fond clair, texte encre) rendrait la page aveuglante sur une pleine
   hauteur d'écran : elle creuse alors au contraire vers un noir plus profond
   que le fond de page, d'où --color-band-bg. L'écart y étant volontairement
   ténu, deux filets (--color-band-edge) marquent explicitement ses bords, ce
   dont la version papier n'a pas besoin. Les bordures existent dans les deux
   thèmes (transparentes sur papier) pour que la hauteur ne bouge pas. */
section[data-tone="dark"] {
  background: var(--color-band-bg);
  color: var(--color-band-text);
  border-top: 1px solid var(--color-band-edge);
  border-bottom: 1px solid var(--color-band-edge);
}

.about-photo {
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--color-band-divider);
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.about-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
}

.about-text p {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.75;
  color: color-mix(in srgb, var(--color-band-text) 82%, transparent);
  text-wrap: pretty;
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  max-width: 1000px;
}

.faq-item {
  border-top: 1px solid var(--color-divider-strong);
  padding-top: 20px;
}

.faq-item__q {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 10px;
  text-wrap: pretty;
}

.faq-item__a {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---------- Faire un don ----------
   Réutilise la structure de section existante (.content-grid, .eyebrow,
   .section-title, .section-intro, .btn-gold) et les mêmes jetons de couleur —
   aucun nouveau motif visuel. Les cartes se posent sur --color-bg, plus clair
   que la surface de la section dans les deux thèmes, pour se détacher. */

/* .don-upcoming (feuille de route à venir, DON_ROADMAP) partage exactement
   la grille de .don-roadmap (déjà produit, DON_FEATURES) — même famille
   visuelle, classe distincte pour que chaque conteneur reste vérifiable
   séparément (tools/audit-clavier.mjs, LANDING_LISTS). */
.don-roadmap,
.don-upcoming {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 960px;
  margin: clamp(32px, 5vw, 44px) 0 clamp(40px, 6vw, 56px);
}

.don-roadmap__item {
  border-top: 1px solid var(--color-divider-strong);
  padding-top: 16px;
}

.don-roadmap__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 8px;
  text-wrap: pretty;
}

.don-roadmap__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.don-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 28px);
  max-width: 960px;
}

.don-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-divider-strong);
  border-radius: 3px;
  padding: clamp(26px, 4vw, 36px) clamp(22px, 3vw, 32px);
  background: var(--color-bg);
}

.don-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(25px, 3vw, 28px);
  margin-bottom: 10px;
}

.don-card__text {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-ink-muted);
  text-wrap: pretty;
}

.don-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.don-amount {
  border: 1px solid var(--color-divider-strong);
  border-radius: 2px;
  padding: 11px 20px;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-ink);
}

.don-amount--pick {
  border-color: var(--color-gold);
  background: color-mix(in srgb, var(--color-gold) 10%, transparent);
}

.don-amount--free { color: var(--color-ink-pale); }

.don-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.don-tier {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--color-divider);
  padding-top: 10px;
}

.don-tier__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
}

.don-tier__blurb {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-ink-pale);
}

.don-tier__price {
  font-family: var(--font-heading);
  font-size: 20px;
  white-space: nowrap;
}

.don-tiers__free {
  border-top: 1px solid var(--color-divider);
  padding-top: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--color-ink-pale);
}

.btn-gold--card {
  margin-top: auto;
  align-self: flex-start;
  padding: 15px 32px;
  font-size: 18px;
}

/* ---------- Contact ---------- */

.contact-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.15;
  margin: 0 0 clamp(20px, 3vw, 30px);
  max-width: 20ch;
  text-wrap: pretty;
}

.contact-email {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.2;
  color: var(--color-gold-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--color-gold) 45%, transparent);
  word-break: break-word;
}

.contact-sub {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--color-ink-pale);
}

.contact-sub + .contact-sub { margin-top: 6px; }

.contact-cta {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider-strong);
  padding: 28px clamp(24px, 6vw, 88px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--color-ink-pale);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.site-footer__sep { color: color-mix(in srgb, var(--color-ink) 28%, transparent); }

/* ---------- Pages légales ---------- */

.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 96px) clamp(24px, 6vw, 32px) clamp(80px, 10vw, 120px);
}

.legal-page__back {
  display: inline-block;
  margin-bottom: clamp(32px, 5vw, 48px);
  font-size: 13px;
  letter-spacing: .04em;
}

.legal-page h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.15;
  margin: 0 0 clamp(32px, 5vw, 48px);
}

.legal-page h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  margin: clamp(36px, 5vw, 48px) 0 12px;
}

.legal-page h2:first-of-type { margin-top: 0; }

.legal-page p, .legal-page li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--color-ink-muted);
}

.legal-page ul { padding-left: 1.2em; }

/* ---------- Repli mobile de la colonne "portée" ----------
   Sous ~933px, clamp(0px,6vw,72px) n'atteint jamais 56px : les filets et la
   note débordent hors de la colonne décorative, dans le contenu. Testé à
   375/414/768/900px — au lieu d'un rétrécissement progressif qui casse à un
   point imprévisible, la colonne disparaît nettement sous ce seuil. Cette
   règle doit rester après la déclaration de base de .content-grid : à
   spécificité égale, une media query placée avant dans la feuille perd
   face à une règle non conditionnelle qui vient après elle. */
@media (max-width: 959px) {
  .content-grid { grid-template-columns: 1fr; }
  .staff-vertical { display: none; }
}

/* ---------- Thème sombre ----------
   Même mécanique que l'app (app/css/styles.css) : la media query couvre le
   réglage système, et c'est la seule autorité de thème — il n'existe plus de
   thème forcé depuis le 14 août 2026 (voir le commentaire qui suit ce bloc).

   Seuls des jetons sont redéfinis, jamais des règles : tous les filets et
   estompages du fichier passent par color-mix sur --color-ink ou
   --color-band-text et suivent donc d'eux-mêmes. Les trois exceptions, qui ne
   peuvent pas dériver, ont chacune leur jeton : l'ombre du popover (qui
   deviendrait un halo), le fond du popover (l'élévation change de sens) et la
   bande "À propos" (qui creuse au lieu de s'inverser). */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1b1a19;
    --color-surface: #242220;
    --color-ink: #ece9e6;
    --color-ink-soft: #d5d0ca;
    --color-ink-muted: #bdb8b2;
    --color-ink-pale: #98938d;
    /* L'or de texte remonte à #c8a24a (7.2:1 sur le fond, contre 2.1:1 pour
       le #7a5d22 du papier) et l'or ornemental s'éclaircit d'autant, pour
       que le survol des liens reste une vraie différence visible. */
    --color-gold: #d9b665;
    --color-gold-deep: #c8a24a;
    --color-on-gold: #1b1a19;

    --color-band-bg: #131211;
    --color-band-text: #ece9e6;
    --color-band-edge: var(--color-divider);

    --color-popover-bg: #2e2b28;
    --shadow-popover: 0 14px 34px rgba(0, 0, 0, .55);
  }
}

/* Les deux blocs de thème FORCÉ ont été retirés le 14 août 2026 : le
   sélecteur Clair/Sombre/Automatique de l'app n'existe plus, plus aucun
   script de ces trois pages ne pose `data-theme`, donc ces sélecteurs ne
   pouvaient plus matcher. La media query ci-dessus est désormais la seule
   autorité de thème, et le `color-scheme: light dark` de `:root` suffit à le
   dire au navigateur. Voir app/js/views/account.js et le contrôle
   « SYSTÈME » de tools/audit-lisibilite.mjs. */