/* =============================================================================
   components.css · Briques réutilisables, indépendantes des pages.
   Toute page peut les employer ; aucune ne dépend d'une page en particulier.

   Sommaire
     1. Sections et inversion « papier »
     2. Titres de section
     3. Boutons et liens
     4. Rails (grilles à filets) et cartes
     5. Cas type (bloc dl)
     6. Bandeau d'appel à l'action
     7. Cadres vidéo
     8. FAQ
     9. Écran d'introduction
    10. Bandeau de consentement
    11. Apparition au défilement
    12. Animations partagées
    13. Interactions : survol, projecteur, chiffres, progression
   ========================================================================== */

/* --- 1. Sections et inversion « papier » ------------------------------------
   .section : rythme vertical standard.
   .section--paper : bandeau clair. Il redéfinit les jetons sémantiques, si
   bien que tous les composants imbriqués basculent automatiquement en version
   claire · sans surcharge dédiée. */

.section {
  padding: var(--section-y) 0;
}

.section--tight { padding: var(--section-y-sm) 0; }

.section--paper {
  --ink: var(--paper-ink);
  --ink-strong: #16324d;
  --ink-muted: var(--paper-ink-muted);
  --ink-subtle: var(--paper-ink-subtle);
  --ink-faint: #5a738d;
  --line: var(--line-paper);
  --line-strong: rgba(7, 36, 70, 0.26);
  --accent: var(--paper-accent);
  --num-ghost: rgba(7, 74, 122, 0.32);
  --accent-gain: var(--gain-deep);
  --surface: rgba(255, 255, 255, 0.72);
  color: var(--paper-ink);
  background: var(--gradient-paper);
}

.section--paper h1,
.section--paper h2,
.section--paper h3 {
  color: var(--paper-ink);
  font-weight: 610;
}

/* --- 2. Titres de section ---------------------------------------------------- */

/* Sur-titre en pastille : un point lumineux, un libellé court, un contour
   discret. Il annonce chaque section sans concurrencer le titre. */
.kicker {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 8px 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.kicker::before {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  content: "";
}

/* Titre à gauche, phrase d'appui à droite. */
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
}

.section-heading h2 span { color: var(--blue-soft); }

.section-heading > p {
  max-width: 52ch;
  margin: 0 0 5px;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.72;
}

.section-heading--stack {
  grid-template-columns: 1fr;
  align-items: start;
}

.section-lead {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.72;
}

@media (max-width: 900px) {
  .section-heading { grid-template-columns: 1fr; align-items: start; gap: 26px; }
}

/* --- 3. Boutons et liens -------------------------------------------------------- */

.btn {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 590;
  text-align: center;
  /* Un bouton ne se coupe jamais en deux lignes dans une grille serrée. */
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  color: #03101d;
  background: linear-gradient(110deg, #eef5ff, #72dfe5);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover { box-shadow: 0 18px 60px rgba(32, 213, 223, 0.24); }

.btn--ghost {
  color: var(--ink-strong);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
}

.btn--ghost:hover { border-color: rgba(112, 165, 255, 0.45); }

.section--paper .btn--ghost {
  color: var(--paper-ink);
  border-color: var(--line-paper);
  background: rgba(255, 255, 255, 0.5);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Le rembourrage porte la zone cliquable au-delà de 24 px de haut
     (critère « taille de cible » du RGAA / WCAG 2.2). */
  padding: 6px 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}

.text-link:hover { gap: 14px; }

.status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  animation: pulse 2.2s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* --- 4. Rails et cartes ------------------------------------------------------------
   Le « rail » est la grille à filets utilisée sur presque toutes les pages :
   un numéro en haut, un titre et un texte calés en bas de chaque colonne.
   --rail-cols pilote le nombre de colonnes ; le repli mobile est automatique. */

.rail {
  --rail-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--rail-cols), minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rail--3 { --rail-cols: 3; }

.rail > * {
  min-height: 246px;
  padding: clamp(26px, 2.3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid var(--line);
}

.rail > *:first-child { border-left: 0; }

/* Le contenu part du haut : les repères d'une même ligne restent alignés,
   quel que soit le nombre de lignes des titres voisins. */

/* Le numéro est un vrai repère de lecture : chiffre en romain display, filet
   dégradé dessous. La classe sert aussi dans les cartes .card, hors rail. */
.rail__num {
  display: block;
  color: var(--num-ghost);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.4vw, 3.15rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.03em;
  line-height: 0.86;
  margin-bottom: 4px;
}

.rail__num::after {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--gradient-brand);
  opacity: 0.6;
  content: "";
}

.rail h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.9vw, 1.78rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
}

.rail p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* Les liens se calent en pied de colonne : ils forment une ligne de lecture. */
.rail a.text-link { margin-top: auto; padding-top: 22px; }

@media (max-width: 1080px) {
  .rail { --rail-cols: 2; }
  .rail > *:nth-child(2n + 1) { border-left: 0; }
  .rail > *:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .rail--3 { --rail-cols: 1; }
  .rail--3 > * { border-left: 0; }
  .rail--3 > * + * { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .rail { --rail-cols: 1; }
  .rail > * { min-height: 0; border-left: 0; }
  .rail > * + * { border-top: 1px solid var(--line); }
  .rail > * > :first-child { margin-bottom: 44px; }
}

/* Carte simple posée sur le fond. */
.card {
  padding: clamp(26px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 18, 38, 0.6);
}

/* Même cadrage que les colonnes de rail : contenu calé en haut, titre en
   romain display. Les trois cartes d'une ligne restent alignées. */
.card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.9vw, 1.78rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
}
.card p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.72; }

/* Panneau premium : dégradé radial + filet bleuté. */
.panel {
  position: relative;
  padding: clamp(32px, 4.5vw, 70px);
  overflow: hidden;
  border: 1px solid rgba(83, 150, 245, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 16% 50%, rgba(23, 104, 255, 0.17), transparent 24rem),
    var(--navy-800);
}

.list-arrow { display: grid; }

.list-arrow li {
  position: relative;
  padding: 15px 0 15px 24px;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.list-arrow li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "\2197";
}

/* --- 5. Cas type ---------------------------------------------------------------- */

.case {
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 32px clamp(32px, 5vw, 72px);
  border: 1px solid rgba(98, 159, 246, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(32, 213, 223, 0.1), transparent 22rem),
    linear-gradient(135deg, #08172e, #071123);
}

.section--paper .case {
  border-color: var(--line-paper);
  background: rgba(255, 255, 255, 0.7);
}

.case__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Le titre du cas vit dans une colonne étroite : il reste lisible plutôt que
   spectaculaire, sinon un mot court occupe une ligne entière. */
.case h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.18;
}

.case dl > div {
  padding: 0 0 22px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.case dl > div + div { padding-top: 22px; }

.case dt {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case dd { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.68; }

@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; }
  .case__label { grid-column: 1; }
}

@media (max-width: 560px) {
  .case dl > div { grid-template-columns: 1fr; gap: 8px; }
}

/* --- 6. Bandeau d'appel à l'action ------------------------------------------------ */

.cta-band {
  position: relative;
  margin: var(--section-y-sm) 0 var(--section-y);
  padding: clamp(34px, 4.5vw, 58px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(28px, 4vw, 50px);
  border: 1px solid rgba(75, 150, 246, 0.24);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(13, 37, 78, 0.92), rgba(4, 13, 31, 0.93));
}

.cta-band__lion {
  position: absolute;
  right: 22%;
  bottom: -75%;
  width: 420px;
  opacity: 0.08;
}

.cta-band > div,
.cta-band > a { position: relative; z-index: 2; }

.cta-band h2 { margin: 0; font-size: var(--fs-h2); }

.cta-band p {
  max-width: 58ch;
  margin: 16px 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.72;
}

@media (max-width: 820px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn { justify-self: start; }
}

/* --- 7. Cadres vidéo --------------------------------------------------------------
   Les vidéos sont décoratives : muettes, sans son ni contrôle, remplacées par
   leur image d'affiche si l'utilisateur demande moins d'animations. */

.frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(111, 170, 255, 0.24);
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  box-shadow: var(--shadow-float);
}

.frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.frame__grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(93, 148, 235, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 148, 235, 0.18) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, black 25%, transparent 78%);
}

.frame__label {
  position: absolute;
  z-index: 4;
  color: rgba(198, 218, 248, 0.68);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
}

.frame__label--top { top: 24px; left: 26px; }
.frame__label--bottom { right: 26px; bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
  .frame video { display: none; }
  .frame {
    background: var(--navy-900) url("/assets/img/lion-poster.jpg") center / cover no-repeat;
  }
}

/* --- 8. FAQ ---------------------------------------------------------------------- */

.faq-list { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item > summary {
  min-height: 96px;
  padding: 18px 0;
  display: grid;
  grid-template-columns: 54px 1fr 34px;
  align-items: center;
  gap: 18px;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item__num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.faq-item__q {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 540;
  line-height: 1.35;
}

.faq-item__sign {
  color: var(--accent);
  font-size: 25px;
  font-style: normal;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease);
}

.faq-item[open] .faq-item__sign { transform: rotate(45deg); }

.faq-item > p {
  max-width: 76ch;
  margin: -4px 34px 32px 72px;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: 1.78;
}

@media (max-width: 560px) {
  .faq-item > summary { grid-template-columns: 34px 1fr 26px; gap: 12px; }
  .faq-item > p { margin: 0 0 28px 46px; }
}

/* --- 9. Écran d'introduction --------------------------------------------------------
   Affiché une seule fois par session, uniquement si le navigateur n'a pas
   demandé de réduire les animations. Créé par assets/js/modules/intro.js. */

.intro {
  position: fixed;
  z-index: var(--z-intro);
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(23, 104, 255, 0.2), transparent 28rem),
    #061328;
  transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}

.intro.is-closing { visibility: hidden; opacity: 0; }

.intro__grid {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(114, 167, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 167, 255, 0.07) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle, black, transparent 72%);
}

.intro__brand {
  --logo-w: min(420px, 70vw);
  position: relative;
  width: var(--logo-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: intro-wipe 1.25s cubic-bezier(0.65, 0, 0.2, 1) both;
}

.intro__brand > img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(32, 213, 223, 0.18));
}

.intro__scan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 82vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 28px rgba(32, 213, 223, 0.7);
  transform: translate(-50%, 42px) scaleX(0);
  animation: intro-scan 1.35s 180ms ease both;
}

/* --- 10. Bandeau de consentement ----------------------------------------------------
   Reste invisible tant qu'aucun identifiant de mesure n'est déclaré dans
   assets/js/config.js. Voir docs/ANALYTICS.md. */

.consent {
  position: fixed;
  z-index: var(--z-consent);
  right: 20px;
  bottom: 20px;
  left: 20px;
  max-width: 920px;
  margin: auto;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(105, 165, 246, 0.34);
  border-radius: var(--radius-md);
  background: rgba(5, 17, 37, 0.97);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(22px);
}

.consent strong { font-size: 17px; }
.consent p { margin: 8px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.consent a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.consent__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }

.consent__actions button,
.consent-settings {
  color: var(--ink);
  border: 1px solid rgba(114, 167, 255, 0.32);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 13px;
}

.consent__actions button { min-width: 112px; min-height: 46px; }
.consent__actions button:hover { border-color: var(--cyan); background: rgba(32, 213, 223, 0.09); }

.consent-settings {
  position: fixed;
  z-index: 100;
  bottom: 14px;
  left: 14px;
  padding: 8px 10px;
  color: var(--ink-subtle);
  font-size: 11px;
}

@media (max-width: 620px) {
  .consent { grid-template-columns: 1fr; }
  .consent__actions button { width: 100%; }
}

/* --- 11. Apparition au défilement ----------------------------------------------------
   Progressive enhancement : sans JavaScript, le contenu est simplement visible.
   reveal.js ajoute .is-revealed dès que l'élément entre dans l'écran. */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js .reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --- 12. Animations partagées ---------------------------------------------------- */

@keyframes pulse { 50% { opacity: 0.55; transform: scale(0.8); } }
@keyframes breathe { 50% { opacity: 0.62; transform: scale(1.12); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate-reverse { to { transform: rotate(-360deg); } }

@keyframes scan {
  0%, 18% { left: -40%; opacity: 0; }
  35%, 60% { opacity: 0.9; }
  82%, 100% { left: 100%; opacity: 0; }
}

@keyframes hud-wave { to { transform: scaleY(0.45); opacity: 0.5; } }

@keyframes convergence {
  0% { opacity: 0; transform: scaleX(0.05); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes intro-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes intro-scan {
  0% { opacity: 0; transform: translate(-50%, 42px) scaleX(0); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 42px) scaleX(1); }
}

@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* =============================================================================
   13. Interactions · survol, projecteur, chiffres, progression
   Tout ce qui suit est décoratif : le site reste complet sans JavaScript et
   sans pointeur, et tout est neutralisé si l'utilisateur demande moins
   d'animations.
   ========================================================================== */

/* --- 13.1 Soulèvement au survol ---------------------------------------------
   Les blocs autonomes (cartes, notes, rôles, étapes du fil) se soulèvent
   légèrement. Réservé aux appareils dotés d'un vrai survol : sur mobile, un
   « hover » resterait collé après le tap. */

.card,
.role,
.note,
.pillar,
.offer-card,
.engagement__grid .card {
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    border-color 260ms var(--ease),
    background 260ms var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover,
  .role:hover,
  .note:hover {
    transform: translateY(-6px);
    border-color: rgba(32, 213, 223, 0.4);
    box-shadow: 0 26px 60px rgba(2, 11, 28, 0.42);
  }

  .section--paper .note:hover {
    border-color: rgba(7, 116, 154, 0.42);
    box-shadow: 0 26px 60px rgba(23, 74, 122, 0.16);
  }
}

/* Les cellules de rail sont séparées par des filets : les soulever casserait
   la grille. Elles réagissent autrement · trait dégradé, fond, numéro vif. */
.rail > * {
  position: relative;
  transition: background 240ms var(--ease);
}

.rail > *::after {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 2px;
  content: "";
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
}

.rail__num { transition: color 260ms var(--ease); }

.rail__num::after {
  transition: width 420ms var(--ease), opacity 260ms var(--ease);
}

@media (hover: hover) {
  .rail > *:hover { background: rgba(114, 167, 255, 0.05); }
  .rail > *:hover::after { transform: scaleX(1); }
  .rail > *:hover .rail__num,
  .card:hover .rail__num { color: var(--cyan-bright); }
  .rail > *:hover .rail__num::after,
  .card:hover .rail__num::after { width: 66px; opacity: 1; }
  .section--paper .rail > *:hover { background: rgba(7, 116, 154, 0.05); }
  .section--paper .rail > *:hover .rail__num,
  .section--paper .card:hover .rail__num { color: var(--blue-ink); }
}

/* --- 13.2 Projecteur ---------------------------------------------------------
   Un halo suit le curseur sur les blocs marqués .spot. Les coordonnées sont
   posées par assets/js/modules/spotlight.js via le CSSOM (--mx / --my), donc
   sans style en ligne dans le HTML. Sans JavaScript, le halo reste centré et
   n'apparaît qu'au survol. */

.spot { position: relative; }

.spot::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(32, 213, 223, 0.12),
    transparent 68%
  );
  transition: opacity 320ms var(--ease);
}

/* Le contenu repasse devant le halo. */
.spot > * { position: relative; z-index: 1; }

@media (hover: hover) {
  .spot:hover::before { opacity: 1; }
}

.section--paper .spot::before {
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(7, 116, 154, 0.12),
    transparent 68%
  );
}

/* --- 13.3 Chiffres clés -------------------------------------------------------
   Bandeau de statistiques. Les valeurs numériques portent data-count et sont
   comptées à l'entrée dans l'écran (assets/js/modules/counters.js) ; le texte
   du HTML reste la valeur finale, donc lisible sans JavaScript. */

.stats {
  --stats-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--stats-cols), minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats > * {
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--line);
}

.stats > *:first-child { border-left: 0; }

/* Un repère qui n'est pas un chiffre ferme la rangée sur toute la largeur :
   il ne laisse pas trois cellules vides derrière lui. */
.stats > .stat--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
  align-items: start;
  gap: clamp(14px, 3vw, 48px);
  border-top: 1px solid var(--line);
  border-left: 0;
}

.stats > .stat--wide .stat__note { max-width: 78ch; }

.stat__figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--cyan-bright);
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight: 620;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__figure small {
  color: var(--blue-soft);
  font-size: 0.42em;
  font-weight: 560;
  letter-spacing: -0.02em;
}

/* Sur fond clair, le bleu du logo tombe à 4,3:1 : on descend d'un cran pour
   rester au-dessus du seuil AA, y compris si la taille du chiffre est réduite. */
.section--paper .stat__figure { color: var(--blue-ink); }
.section--paper .stat__figure small { color: var(--paper-accent); }

.stat__label {
  color: var(--ink-strong);
  font-size: var(--fs-small);
  font-weight: 560;
  line-height: 1.4;
}

.stat__note {
  color: var(--ink-subtle);
  font-size: var(--fs-tiny);
  line-height: 1.55;
}

/* Mention de prudence sous un bandeau de chiffres. */
.stats-caveat {
  margin-top: 20px;
  color: var(--ink-faint);
  font-size: var(--fs-tiny);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .stats { --stats-cols: 2; }
  .stats > *:nth-child(2n + 1) { border-left: 0; }
  .stats > *:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .stats > .stat--wide { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stats { --stats-cols: 1; }
  .stats > * { border-left: 0; }
  .stats > * + * { border-top: 1px solid var(--line); }
}

/* --- 13.4 Gain chiffré ---------------------------------------------------------
   Pastille utilisée dans les cas types : un ordre de grandeur, jamais un
   engagement. Le libellé « Gain visé » doit rester présent. */

.gain {
  width: fit-content;
  margin-top: 22px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: var(--accent-gain);
  border: 1px solid color-mix(in srgb, var(--accent-gain) 34%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-gain) 8%, transparent);
  font-size: var(--fs-small);
  font-weight: 580;
}

.gain span {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- 13.4 bis Précision ---------------------------------------------------------
   Encart court qui explique un terme ou détaille une méthode, sans casser le
   rythme du bloc qui l'accueille. */

.precision {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid rgba(32, 213, 223, 0.2);
  border-radius: var(--radius-md);
  background: rgba(32, 213, 223, 0.05);
}

.precision strong {
  margin-bottom: 8px;
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.precision p { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.7; }

/* --- 13.5 Barre de progression de lecture ----------------------------------
   Créée par assets/js/modules/progress.js et posée sous l'en-tête collant. */

.reading-progress {
  position: fixed;
  z-index: calc(var(--z-header) + 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  background: var(--gradient-deep);
  box-shadow: 0 0 12px rgba(32, 213, 223, 0.55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
}

/* --- 13.6 Étiquette technique animée ------------------------------------------
   Petit détail « machine » : un point qui bat devant certains libellés mono. */

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--ink-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tech-tag::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  content: "";
  animation: pulse 2.2s ease-in-out infinite;
}

/* =============================================================================
   14. Bandeau de références
   Un ruban de marques qui défile en continu. Deux pistes identiques se suivent :
   chacune se décale de sa propre largeur, la boucle est donc invisible. La
   seconde piste est masquée aux lecteurs d'écran, qui ne doivent entendre la
   liste qu'une fois.
   Les marques sont traitées en filigrane blanc : discrètes au repos, elles
   reprennent toute leur densité au survol.
   ========================================================================== */

.references { padding: var(--section-y-sm) 0; }

.references__heading { max-width: 62ch; }

.references__heading p {
  max-width: 60ch;
  margin-top: 18px;
  color: var(--ink-muted);
  line-height: 1.75;
}

.logo-wall {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Les extrémités s'estompent : le ruban n'a ni début ni fin visibles. */
  mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}

.logo-wall__track {
  flex-shrink: 0;
  min-width: 100%;
  padding-right: clamp(44px, 6vw, 96px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(44px, 6vw, 96px);
  animation: marquee 42s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* Le ruban s'arrête sous le curseur : on peut lire une marque au passage. */
.logo-wall:hover .logo-wall__track,
.logo-wall:focus-within .logo-wall__track {
  animation-play-state: paused;
}

.logo-wall li { display: flex; align-items: center; }

/* Le fichier du logo Au cœur de l’Est contient un fond carré noir. On le
   présente dans une pastille ronde, afin de ne garder que le médaillon blanc,
   puis son nom rejoint le ruban comme les références composées en texte. */
.logo-wall__aucoeur {
  gap: 10px;
  white-space: nowrap;
}

.logo-wall .logo-wall__aucoeur img {
  width: clamp(34px, 3.6vw, 46px);
  height: clamp(34px, 3.6vw, 46px);
  border-radius: 50%;
  object-fit: cover;
}

.logo-wall img {
  width: auto;
  height: clamp(30px, 3.4vw, 44px);
  opacity: 0.42;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}

/* Les PNG sont déjà détourés en blanc. Les SVG arrivent en couleurs : le filtre
   #filigrane (défini dans la page) les aplatit sur blanc puis convertit la
   luminosité en transparence. Un simple brightness(0) invert(1) ne conviendrait
   pas : il remplirait les contreformes, et le « a » d'Atecna comme l'anneau de
   Caast disparaîtraient. */
.logo-wall img[src$=".svg"] { filter: url(#filigrane); }

/* Le bloc qui porte la définition du filtre ne doit rien occuper. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.logo-wall__word {
  color: var(--ink);
  opacity: 0.42;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}

@media (hover: hover) {
  .logo-wall li:hover img,
  .logo-wall li:hover .logo-wall__word {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.references__note {
  max-width: 88ch;
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: var(--fs-tiny);
  line-height: 1.65;
}

/* Sans animation : le ruban devient une simple grille, lisible d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .logo-wall { mask-image: none; flex-wrap: wrap; }
  .logo-wall__track {
    min-width: 0;
    padding-right: 0;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }
  .logo-wall__track[aria-hidden="true"] { display: none; }
  .logo-wall img,
  .logo-wall__word { opacity: 0.72; }
}