/* ══════════════════════════════════════════════════════════════════════
   HOLY KNIGHT — feuille de style
   ----------------------------------------------------------------------
   La palette est PRELEVEE sur l'illustration et le logo du jeu, pas
   inventee : le bleu nuit du ciel, l'or du monogramme, le turquoise de
   l'anneau et des cercles de sort. Rien ici n'est une couleur de
   convenance.

   La typographie est celle du jeu : Beaufort for LOL, des titres au
   moindre libellé. Cinq graisses servies en WOFF2 depuis le site —
   rien n'est chargé depuis un service extérieur.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Beaufort";
  src: url("../fonts/BeaufortforLOL-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beaufort";
  src: url("../fonts/BeaufortforLOL-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beaufort";
  src: url("../fonts/BeaufortforLOL-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beaufort";
  src: url("../fonts/BeaufortforLOL-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beaufort";
  src: url("../fonts/BeaufortforLOL-Heavy.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* Ciel, du plus profond au plus clair */
  --nuit:        #060D24;
  --nuit-2:      #0A1230;
  --outremer:    #12224F;
  --azur:        #2B4A9B;

  /* Le monogramme */
  --or:          #D9B36C;
  --or-clair:    #F2DFAE;
  --or-sombre:   #8A6A32;

  /* L'anneau du logo, les cercles d'incantation */
  --turquoise:   #4FC3B8;

  /* Texte */
  --ivoire:      #EDE6D8;
  --brume:       #A9B2CB;

  --filet:       1px solid rgba(217, 179, 108, 0.28);
  --ombre:       0 18px 48px rgba(3, 7, 20, 0.6);

  /* Une seule famille, comme dans le jeu. Ce qui distingue un titre
     d'un paragraphe, ce n'est pas la police : c'est la graisse, la
     casse et l'approche. */
  --titre:  "Beaufort", "Palatino Linotype", Georgia, serif;
  --corps:  "Beaufort", "Palatino Linotype", Georgia, serif;

  --large:  76rem;
  --etroit: 44rem;
}

/* ── remise a plat ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--ivoire);
  font-family: var(--corps);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saut {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--or); color: var(--nuit);
  padding: 0.7rem 1.2rem; font-weight: 700;
}
.saut:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
}

/* ── typographie ──────────────────────────────────────────────────── */
h1 {
  font-family: var(--titre);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0.6rem 0 1.4rem;
}
h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.16;
  margin-bottom: 1rem;
}
h3 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.55rem;
}

.surtitre {
  font-family: var(--corps);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
}

/* Le chapeau prend la Light : en gros corps, une graisse plus fine
   respire mieux et distingue l'introduction du texte courant. */
.chapeau {
  font-size: 1.16rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--brume);
  max-width: 46ch;
}
.chapeau--court { max-width: 42ch; }
.texte-centre .chapeau { margin-left: auto; margin-right: auto; }

.texte-centre { text-align: center; }

/* ── enveloppes ───────────────────────────────────────────────────── */
.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.enveloppe--etroite { max-width: var(--etroit); margin-inline: auto; }

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--sombre { background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 50%, var(--nuit) 100%); }

/* ── boutons ──────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  font-family: var(--corps);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nuit);
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  border: 1px solid var(--or-clair);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(217, 179, 108, 0.28);
  filter: brightness(1.06);
}
.bouton--fantome {
  color: var(--or-clair);
  background: transparent;
  border-color: rgba(217, 179, 108, 0.5);
}
.bouton--fantome:hover {
  background: rgba(217, 179, 108, 0.1);
  box-shadow: none;
}
.bouton--petit { padding: 0.6rem 1.2rem; font-size: 0.72rem; }

/* ══ BARRE ════════════════════════════════════════════════════════ */
.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  background: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
  border-bottom: 1px solid transparent;
}
.barre.est-posee {
  background: rgba(6, 13, 36, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(217, 179, 108, 0.22);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.barre__marque { flex: none; line-height: 0; }
.barre__marque img { width: 128px; height: auto; }

.barre__liens {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
}
.barre__liens a {
  color: var(--ivoire);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.barre__liens a:hover { color: var(--or-clair); border-bottom-color: var(--or); }

@media (max-width: 62rem) {
  .barre__liens { display: none; }
  .barre .bouton--petit { margin-left: auto; }
}


/* ══ CHOIX DE LA LANGUE ═══════════════════════════════════════════
   Deux drapeaux, pas de menu déroulant : à deux langues, un sélecteur
   coûte plus de clics qu'il n'en fait gagner. Le drapeau actif est
   plein, l'autre en retrait.
   ══════════════════════════════════════════════════════════════════ */
.langues {
  display: flex;
  gap: 0.4rem;
  margin-left: 1.4rem;
  padding-left: 1.4rem;
  border-left: 1px solid rgba(217, 179, 108, 0.22);
}
.langue {
  display: block;
  padding: 0;
  line-height: 0;
  background: none;
  border: 1px solid rgba(217, 179, 108, 0.28);
  cursor: pointer;
  opacity: 0.45;
  filter: saturate(0.55);
  transition: opacity 0.22s ease, filter 0.22s ease, border-color 0.22s ease;
}
.langue svg { display: block; width: 26px; height: auto; }
.langue:hover { opacity: 0.85; filter: none; }
.langue.est-actif {
  opacity: 1;
  filter: none;
  border-color: var(--or);
  box-shadow: 0 0 0 1px rgba(217, 179, 108, 0.35);
}

@media (max-width: 62rem) {
  .langues { margin-left: auto; }
  .barre .bouton--petit { margin-left: 0.9rem; }
}
@media (max-width: 30rem) {
  .barre .bouton--petit { display: none; }
}

/* ══ ACCROCHE ═════════════════════════════════════════════════════ */
.accroche {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.accroche__ciel {
  position: absolute;
  inset: -12% 0 -12% 0;
  background: url("../img/bg.jpg") center 38% / cover no-repeat;
  z-index: -3;
  will-change: transform;
}
.accroche__etoiles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
/* Le voile ramene l'illustration vers le bleu nuit de la charte et
   garantit le contraste du texte, quelle que soit la zone de l'image. */
.accroche__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 62% at 50% 46%, rgba(6, 13, 36, 0.32) 0%, rgba(6, 13, 36, 0.86) 78%),
    linear-gradient(180deg, rgba(6, 13, 36, 0.85) 0%, rgba(6, 13, 36, 0.1) 34%, rgba(6, 13, 36, 0.98) 100%);
}

.accroche__contenu {
  max-width: 54rem;
  padding: 8rem 1.5rem 6rem;
  text-align: center;
}
.accroche__logo {
  width: min(30rem, 78vw);
  height: auto;
  margin: 0 auto 1.8rem;
  filter: drop-shadow(0 10px 30px rgba(3, 7, 20, 0.8));
}
.accroche__texte {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--brume);
  max-width: 40ch;
  margin: 0 auto 2.4rem;
}
.accroche__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.accroche__suite {
  position: absolute;
  bottom: 2rem; left: 50%;
  translate: -50% 0;
  width: 26px; height: 42px;
  border: 1px solid rgba(217, 179, 108, 0.5);
  border-radius: 13px;
}
.accroche__suite span {
  position: absolute;
  top: 8px; left: 50%;
  translate: -50% 0;
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--or);
  animation: descendre 1.9s ease-in-out infinite;
}
@keyframes descendre {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  60%      { transform: translateY(15px); opacity: 0.15; }
}

/* ══ FILET — la signature ═════════════════════════════════════════
   Un trait d'or interrompu par un losange ailé, dessiné d'après les
   ailes du monogramme. C'est le seul ornement de la page ; il sépare
   les idees et rappelle la marque sans jamais la repeter.
   ══════════════════════════════════════════════════════════════════ */
.filet {
  --aile: 5rem;
  position: relative;
  width: min(34rem, 82%);
  height: 1px;
  margin: 3.2rem auto;
  background: linear-gradient(90deg,
    transparent, rgba(217, 179, 108, 0.55) 22%,
    rgba(217, 179, 108, 0.55) 78%, transparent);
}
.filet::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 9px; height: 9px;
  rotate: 45deg;
  background: var(--or);
  box-shadow: 0 0 14px rgba(217, 179, 108, 0.55);
}
.filet::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: var(--aile); height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-clair), transparent);
}

/* ══ PILIERS ══════════════════════════════════════════════════════ */
.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.4rem;
}
.pilier {
  padding-top: 1.15rem;
  border-top: 1px solid rgba(217, 179, 108, 0.32);
}
.pilier h3 { color: var(--or-clair); }
.pilier p { color: var(--brume); font-size: 0.98rem; }

/* ══ EMPLACEMENTS VIDÉO ═══════════════════════════════════════════
   Un à trois cadres 16/9 sur une ligne. Un emplacement sans fichier
   garde exactement la même place : la grille ne bouge pas quand les
   vidéos arrivent.
   ══════════════════════════════════════════════════════════════════ */
/* La séquence disponible passe pleine largeur d'écran : c'est la pièce
   qu'on vient voir. Elle sort de l'enveloppe, donc pas de retrait latéral
   ni de bordure verticale — le cadre ne servirait qu'à la rétrécir. */
.lecteur--grand {
  width: 100%;
  margin-top: 3rem;
  border-left: 0;
  border-right: 0;
}

/* Les séquences suivantes, sous la grande, dans la largeur du texte.
   DEUX de front et non quatre : à quatre colonnes chaque vignette 16/9
   tombait sous les trois cents pixels, où l'on ne distingue plus ce qui
   est filmé. En deux colonnes elles font le double, et les quatre
   tiennent en un carré propre sous la grande. Une seule sur téléphone. */
.lecteurs__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 1.4rem;
}
/* La sixième séquence n'entre pas dans la grille : elle se pose dessous,
   pleine largeur de l'enveloppe. À quatre vignettes la grille est déjà un
   carré propre ; une cinquième aurait laissé une case vide à sa droite.
   L'écart repris est celui de la grille, pour que la colonne respire de
   la même façon du haut en bas. */
.lecteur--suite { margin-top: 1.4rem; }

.lecteurs__note {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--brume);
}
.lecteur {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--nuit-2);
  border: var(--filet);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.lecteur video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--nuit-2);
}
/* Un emplacement vide reste une image d'ambiance, pas un trou noir. */
.lecteur.est-vide video { opacity: 0.45; }

.lecteur__attente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(6, 13, 36, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.lecteur__attente .surtitre { font-size: 0.8rem; letter-spacing: 0.36em; }
/* `display: grid` ci-dessus est une regle d'AUTEUR : elle bat le
   `[hidden] { display: none }` de la feuille du navigateur. Sans cette
   ligne, le carton « Bientot » restait visible par-dessus une video
   pourtant presente — c'est ce qui s'est passe des que teaser-1.mp4 a
   ete depose. */
.lecteur__attente[hidden] { display: none; }

@media (max-width: 48rem) { .lecteurs__grille { grid-template-columns: 1fr; } }


/* ══ VOILE D'OUVERTURE ════════════════════════════════════════════
   Posé sur la première image de la séquence, il annonce la démo puis
   s'efface progressivement dès la lecture. Il couvre les contrôles
   tant qu'il est visible — c'est voulu : cliquer n'importe où lance
   la vidéo. Une fois parti, `pointer-events: none` rend la barre de
   contrôles de nouveau accessible.
   ══════════════════════════════════════════════════════════════════ */
.lecteur__intro {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  padding: 2rem;
  border: 0;
  cursor: pointer;
  font-family: var(--corps);
  text-align: center;
  /* Le « filtre » : l'image du jeu reste lisible dessous, assombrie et
     très légèrement floutée pour que le titre passe devant. */
  background:
    radial-gradient(70% 62% at 50% 50%, rgba(6, 13, 36, 0.62) 0%, rgba(6, 13, 36, 0.86) 100%);
  backdrop-filter: blur(2px) saturate(0.85);
  opacity: 1;
  transition: opacity 0.9s ease, backdrop-filter 0.9s ease;
}
.lecteur__intro:hover .intro__lire {
  background: var(--or);
  color: var(--nuit);
  transform: scale(1.06);
}

.intro__marque {
  font-family: var(--titre);
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivoire);
  text-shadow: 0 4px 26px rgba(3, 7, 20, 0.85);
}
.intro__phrase {
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  letter-spacing: 0.14em;
  color: var(--or-clair);
  text-shadow: 0 2px 16px rgba(3, 7, 20, 0.9);
}
.intro__filet { color: var(--or); margin: 0.6rem 0 0.2rem; }

.intro__lire {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  color: var(--or);
  border: 1px solid rgba(217, 179, 108, 0.6);
  background: rgba(6, 13, 36, 0.55);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.intro__lire svg { margin-left: 3px; }   /* le triangle paraît centré */

/* Variante pour les emplacements de la rangée du bas : le cadre y fait
   moins d'un tiers de la largeur, donc les tailles en vw de la grande
   version y seraient énormes. Valeurs fixes, calées sur ce cadre. */
.lecteur__intro--petit { padding: 1rem; gap: 0.1rem; }
.lecteur__intro--petit .intro__marque { font-size: 1.5rem; letter-spacing: 0.03em; }
.lecteur__intro--petit .intro__phrase { font-size: 0.82rem; letter-spacing: 0.12em; }
.lecteur__intro--petit .intro__filet  { margin: 0.35rem 0 0.15rem; }
.lecteur__intro--petit .intro__lire   { width: 46px; height: 46px; }
.lecteur__intro--petit .intro__lire svg { margin-left: 2px; }

/* La lecture est lancée : le voile s'efface et rend la main aux contrôles. */
.lecteur.est-lance .lecteur__intro {
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0) saturate(1);
}

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

/* ══ DUO texte / image ════════════════════════════════════════════ */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.duo--inverse .duo__image { order: 2; }
.duo__image {
  position: relative;
  border: var(--filet);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.duo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.duo__image:hover img { transform: scale(1.04); }

.duo__texte > * + * { margin-top: 1rem; }
.duo__texte p { color: var(--brume); }

.liste-or { display: grid; gap: 0.6rem; margin-top: 1.4rem; }
.liste-or li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.96rem;
  color: var(--ivoire);
}
.liste-or li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  rotate: 45deg;
  background: var(--or);
}

@media (max-width: 44rem) {
  .duo--inverse .duo__image { order: 0; }
}

/* ══ CARTOUCHES ═══════════════════════════════════════════════════ */
.cartouches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  margin-top: 1.8rem;
  background: rgba(217, 179, 108, 0.2);
  border: var(--filet);
}
.cartouche {
  background: var(--nuit);
  padding: 0.95rem 1.1rem;
}
.cartouche b {
  display: block;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 500;
  color: var(--or-clair);
  margin-bottom: 0.25rem;
}
.cartouche span { font-size: 0.86rem; color: var(--brume); }

/* ══ TRIO de cartes ═══════════════════════════════════════════════ */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.4rem;
  margin-top: 3rem;
}
.carte {
  padding: 1.6rem 1.5rem;
  background: linear-gradient(180deg, rgba(18, 34, 79, 0.55), rgba(10, 18, 48, 0.35));
  border: var(--filet);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.carte:hover { transform: translateY(-4px); border-color: rgba(217, 179, 108, 0.5); }
.carte__coiffe { margin-bottom: 1rem; }
.carte p { color: var(--brume); font-size: 0.96rem; }

/* Les trois rangs de créatures reprennent les couleurs qu'ils ont en
   jeu : bleu pâle pour les jeunes, ivoire pour les normales, ambre
   pour les capitaines. */
.rang {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.rang--jeune     { color: #73B4FF; }
.rang--normal    { color: var(--ivoire); }
.rang--capitaine { color: #FFA645; }

/* ══ SECTION ILLUSTRÉE ════════════════════════════════════════════ */
.section--illustree {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.section--illustree::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 26% at 50% 20%, rgba(6, 13, 36, 0.94) 0%, rgba(6, 13, 36, 0) 100%),
    linear-gradient(180deg,
      var(--nuit) 0%, rgba(6, 13, 36, 0.62) 16%,
      rgba(6, 13, 36, 0.68) 78%, var(--nuit) 100%);
}

.section--illustree .chapeau {
  color: #CBD3E6;
  text-shadow: 0 2px 10px rgba(6, 13, 36, 0.9);
}
.section--illustree h2 { text-shadow: 0 2px 14px rgba(6, 13, 36, 0.75); }

.social {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: rgba(217, 179, 108, 0.18);
  border: var(--filet);
}
.social__item {
  background: rgba(6, 13, 36, 0.86);
  padding: 1.6rem 1.5rem;
  transition: background 0.28s ease;
}
.social__item:hover { background: rgba(18, 34, 79, 0.82); }
.social__item h3 { color: var(--or-clair); }
.social__item p { color: var(--brume); font-size: 0.95rem; }

@media (max-width: 62rem) { .social { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .social { grid-template-columns: 1fr; } }

/* ══ APPEL ════════════════════════════════════════════════════════ */
.appel { background: linear-gradient(180deg, var(--nuit) 0%, #0A1738 100%); }
.appel__embleme {
  display: block;
  margin: 0 auto 1.4rem;
  color: var(--or);
  filter: drop-shadow(0 0 12px rgba(217, 179, 108, 0.35));
}
/* ══ LES VOIES ════════════════════════════════════════════════════
   Quatre colonnes : la classe de base en tête, ses deux
   spécialisations en dessous. La hiérarchie est portée par le filet
   d'or et le rôle en petites capitales, pas par un cadre de plus.
   ══════════════════════════════════════════════════════════════════ */
.voies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: rgba(217, 179, 108, 0.18);
  border: var(--filet);
}
.voie {
  background: var(--nuit);
  padding: 1.5rem 1.35rem 1.7rem;
}
.voie__role {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 0.45rem;
}
.voie h3 {
  font-size: 1.34rem;
  color: var(--or-clair);
  margin-bottom: 0.5rem;
}
.voie > p { color: var(--brume); font-size: 0.94rem; }

.voie__suite {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(217, 179, 108, 0.22);
}
.voie__suite li { font-size: 0.9rem; color: var(--brume); line-height: 1.55; }
.voie__suite b {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.99rem;
  color: var(--ivoire);
}

@media (max-width: 68rem) { .voies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .voies { grid-template-columns: 1fr; } }

/* ══ LES SYSTÈMES ═════════════════════════════════════════════════
   Deux colonnes franches : ce qui tourne, ce qui arrive. Le losange
   des puces passe en creux dans la colonne « en chantier » — la
   distinction se lit sans avoir à relire les intitulés.
   ══════════════════════════════════════════════════════════════════ */
.systemes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: rgba(217, 179, 108, 0.18);
  border: var(--filet);
}
.systemes__colonne {
  background: rgba(6, 13, 36, 0.88);
  padding: 1.7rem 1.6rem 2rem;
}
.systemes__colonne .surtitre { margin-bottom: 1.2rem; }
.systemes__colonne .liste-or { margin-top: 0; }

.liste-or--pale li { color: var(--brume); }
.liste-or--pale li::before {
  background: transparent;
  border: 1px solid var(--or);
}

@media (max-width: 44rem) { .systemes { grid-template-columns: 1fr; } }

/* ══ APPEL ════════════════════════════════════════════════════════ */
.appel { background: linear-gradient(180deg, var(--nuit) 0%, #0A1738 100%); }
.appel__embleme {
  display: block;
  margin: 0 auto 1.4rem;
  color: var(--or);
  filter: drop-shadow(0 0 12px rgba(217, 179, 108, 0.35));
}
.appel__actions { margin-top: 2.2rem; }

/* ══ PIED ═════════════════════════════════════════════════════════ */
.pied {
  padding: 3rem 0 2rem;
  border-top: var(--filet);
  background: var(--nuit);
}
.pied__grille {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.pied__ligne { color: var(--brume); font-size: 0.92rem; margin-top: 0.6rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.pied nav a {
  color: var(--brume);
  text-decoration: none;
  font-size: 0.88rem;
}
.pied nav a:hover { color: var(--or-clair); }
.pied__bas {
  max-width: var(--large);
  margin: 2.2rem auto 0;
  padding: 1.4rem 1.5rem 0;
  border-top: 1px solid rgba(217, 179, 108, 0.14);
  font-size: 0.82rem;
  color: rgba(169, 178, 203, 0.75);
  text-align: center;
}

/* ══ RÉVÉLATION AU DÉFILEMENT ═════════════════════════════════════ */
.js .reveler {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .reveler.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveler { opacity: 1; transform: none; transition: none; }
  .accroche__suite span { animation: none; }
  .duo__image img, .carte, .chapitre, .bouton { transition: none; }
}