/* ==========================================================================
   CAP FUTURE MAROC — Système de design
   ========================================================================== */

:root {
  /* ---- Bleu marine : lumineux, jamais éteint. Un fond doit rester vivant :
         chaque niveau garde de la saturation et de la clarté. ---- */
  --nv-950: #0C2547;
  --nv-900: #103059;
  --nv-850: #143A6B;
  --nv-800: #1A4680;
  --nv-700: #205596;
  --nv-600: #2A66AF;

  /* ---- Orange : l'action, la direction ---- */
  /* Orange vif et lumineux. Aucun dégradé d'orange n'est utilisé sur le
     site : un dégradé assombrit toujours une partie de l'aplat et donne
     l'impression d'un orange sale. L'orange est donc TOUJOURS plat, et la
     brillance vient d'un liseré clair, jamais d'un dégradé. */
  --or-700: #B96509;
  --or-600: #D8770F;
  --or-500: #F08A17;
  --or-400: #FBA33C;
  --or-300: #FDC079;
  --or-200: #FEE0B4;
  --or-100: #FFF2DF;

  /* ---- Rôles narratifs : chaque couleur porte un sens ---- */
  --co-600: #B8342A;  /* corail — le risque, l'erreur, ce qu'on perd */
  --co-500: #E04B38;
  --co-400: #F26E57;
  --co-100: #FDE8E4;

  --em-600: #078A5C;  /* émeraude — la réussite, l'acquis */
  --em-500: #0FAE74;
  --em-400: #2ED89A;
  --em-100: #DFF7EC;

  --az-600: #1A5CBD;  /* azur — l'information, l'analyse */
  --az-500: #3580F0;
  --az-400: #6BA6F8;
  --az-100: #E3EEFE;

  --gd-500: #D4A03C;  /* or — la distinction, l'excellence */
  --gd-100: #FBF0DA;

  /* Palette d'accompagnement de l'orange : uniquement ses voisines chaudes.
     Le violine a été retiré — il n'a aucun sens pour cette marque et se
     dispute l'attention avec l'orange au lieu de le servir. */
  --cu-700: #8F4703;   /* cuivre profond */
  --cu-600: #B85C05;
  --cu-500: #E07E12;
  --am-400: #F5A83F;   /* ambre */
  --am-100: #FDF1E2;

  /* ---- Registres : chaque fond sombre est une composition lumineuse,
         jamais une couleur unie posée à plat. ---- */
  --bg-night: #0C2547;
  --bg-navy: #143A6B;
  --bg-cream: #F6F9FD;
  --bg-white: #FFFFFF;
  --bg-mist: #F1F5FA;

  --line-cream: #E4EBF5;
  --line-mist: #DDE5F0;
  --line-night: rgba(255, 255, 255, 0.13);
  --line-night-2: rgba(255, 255, 255, 0.075);

  /* ---- Encre ---- */
  --ink: #0A2140;
  --ink-70: rgba(10, 33, 64, 0.72);
  --ink-50: rgba(10, 33, 64, 0.55);
  --ink-35: rgba(10, 33, 64, 0.38);
  --pale: #FFFFFF;
  --pale-70: rgba(255, 255, 255, 0.72);
  --pale-45: rgba(255, 255, 255, 0.46);
  --pale-28: rgba(255, 255, 255, 0.28);

  /* ---- Typographie ---- */
  --f-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --t-hero: clamp(38px, 6.4vw, 82px);
  /* Le H2 doit rester nettement en dessous du H1, sinon la hiérarchie
     disparaît : sur mobile ils faisaient 33 px et 30 px, soit presque la
     même chose. */
  --t-h2: clamp(26px, 3.5vw, 44px);
  --t-h3: clamp(20px, 2.2vw, 27px);
  --t-lede: clamp(16.5px, 1.65vw, 20px);
  --t-body: 15.5px;
  --t-small: 13.5px;
  --t-micro: 11.5px;

  /* ---- Rayons ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* ---- Ombres ---- */
  --sh-1: 0 1px 2px rgba(5,15,31,.05), 0 4px 14px rgba(5,15,31,.05);
  --sh-2: 0 2px 8px rgba(5,15,31,.06), 0 14px 38px rgba(5,15,31,.09);
  --sh-3: 0 8px 20px rgba(5,15,31,.09), 0 32px 72px rgba(5,15,31,.15);
  --sh-or: 0 10px 32px rgba(234,135,25,.36);
  --sh-or-lg: 0 18px 54px rgba(234,135,25,.48);

  /* ---- Échelle d'espacement ----
     Une seule progression, utilisée partout. Avant, chaque section avait ses
     propres valeurs arbitraires (36px ici, 52px là, 66px ailleurs) : c'est ce
     qui donnait cette impression d'espaces posés au hasard. */
  --s1: 6px;
  --s2: 10px;
  --s3: 16px;
  --s4: 24px;
  --s5: 34px;
  --s6: 48px;
  --s7: 68px;
  --s8: 96px;

  /* Respiration verticale des sections : serrée sur mobile, ample sur grand
     écran. Le rapport reste le même partout. */
  /* Mesuré avant correction : 230 px de padding par section sur desktop,
     soit plus de la moitié de la hauteur pour les sections courtes (FAQ,
     Pourquoi nous). L'empilement collant sépare déjà nettement les sections :
     un padding aussi lourd n'ajoutait que du vide. */
  --pad-sec: clamp(44px, 6vw, 88px);
  --gap-head: clamp(26px, 3.2vw, 44px);  /* entre l'en-tête et le contenu */
  --gap-block: clamp(18px, 2.2vw, 26px); /* entre blocs de même niveau */
  --w-max: 1220px;
  --w-text: 800px;
  --w-tight: 640px;

  /* ---- Courbes ---- */
  --ez: cubic-bezier(0.22, 1, 0.36, 1);
  --ez-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ez-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 220ms;
  --d-mid: 480ms;
  --d-slow: 850ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-night);
  color: var(--pale);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: clip et NON hidden : `hidden` sur le body en fait un
     conteneur de défilement, ce qui casse position:sticky et le scroll de la
     fenêtre. `clip` rogne sans créer de conteneur de défilement. */
  overflow-x: clip;
}

img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; }

:focus-visible { outline: 2px solid var(--or-400); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   REGISTRES DE SECTION — quatre atmosphères, jamais deux voisines identiques
   -------------------------------------------------------------------------- */
.sec { position: relative; padding: var(--pad-sec) 0; overflow: hidden; }

/* Fonds composés : les dégradés restent DANS la même famille chromatique.
   Un dégradé bleu marine → orange produit toujours une zone brunâtre sale au
   point de rencontre : l'orange n'apparaît donc jamais dans un fond, seulement
   sur les objets posés dessus. */
.sec--night {
  background:
    radial-gradient(ellipse 80% 60% at 20% -10%, #24528F 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 95% 110%, #1B3E75 0%, transparent 62%),
    linear-gradient(178deg, #123356 0%, #0D2645 100%);
  color: var(--pale);
}
.sec--navy {
  background:
    radial-gradient(ellipse 75% 60% at 85% -5%, #2A5C9C 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 5% 100%, #17406F 0%, transparent 60%),
    linear-gradient(176deg, #17436F 0%, #10305A 100%);
  color: var(--pale);
}
/* Registre clair chaud — remplace l'ancien beige plat.
   Un fond clair n'a pas à être terne : ici un blanc légèrement bleuté qui
   monte vers un voile pêche très pâle, avec une lueur d'ambiance. La couleur
   reste discrète mais le fond n'est jamais uni. */
.sec--cream {
  background:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(247,163,62,.16) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 106%, rgba(107,166,248,.13) 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 55%, #F6F9FD 100%);
  color: var(--ink);
}
.sec--white {
  background:
    radial-gradient(ellipse 70% 55% at 92% -8%, rgba(107,166,248,.14) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 5% 104%, rgba(224,126,18,.07) 0%, transparent 62%),
    #FFFFFF;
  color: var(--ink);
}
.sec--mist  { background: var(--bg-mist); color: var(--ink); }

.sec--grad-navy {
  background:
    radial-gradient(ellipse 65% 55% at 50% -8%, #2B5FA4 0%, transparent 62%),
    radial-gradient(ellipse 80% 60% at 100% 70%, #1A4479 0%, transparent 60%),
    linear-gradient(174deg, #17436F 0%, #102F58 60%, #0C2547 100%);
  color: var(--pale);
}
.sec--grad-or { background: var(--or-500); color: var(--pale); }

/* ==========================================================================
   EMPILEMENT COLLANT
   La section en cours se FIGE en haut de l'écran ; la suivante remonte et la
   recouvre avec son fond opaque et ses coins arrondis. La section figée
   s'assombrit et rétrécit légèrement pendant qu'on lui passe dessus.

   Points techniques :
   - Les sections doivent être sœurs dans un même conteneur pour s'empiler.
   - Une section PLUS HAUTE que l'écran ne doit pas se figer à top:0, sinon
     son bas devient inatteignable. On utilise top: calc(100vh - 100%) pour
     qu'elle défile d'abord, puis se fige quand son bas touche le bas d'écran.
   - Le z-index doit croître avec l'ordre du DOM (posé par le JS).
   ========================================================================== */
.stack { position: relative; }

.stack > .pin {
  position: sticky;
  top: 0;
  will-change: transform;
}
/* Les sections plus hautes que l'écran reçoivent un `top` NÉGATIF calculé en
   JS (= hauteur d'écran − hauteur de section). Elles défilent donc entièrement
   avant de se figer, ce qui évite que leur bas devienne inatteignable. */

/* La section qui recouvre : fond opaque obligatoire, coins arrondis, ombre */
.pin.covers {
  border-radius: clamp(26px, 4vw, 54px) clamp(26px, 4vw, 54px) 0 0;
  box-shadow: 0 -24px 60px rgba(4, 14, 30, .34);
}

/* Voile d'assombrissement de la section recouverte */
.pin__veil {
  position: absolute; inset: 0; z-index: 40;
  background: #04101E;
  opacity: 0; pointer-events: none;
}

/* Le contenu se réduit légèrement quand la section passe dessous */
.pin__inner { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .stack > .pin { position: relative; top: auto; bottom: auto; }
  .pin__veil { display: none; }
  .pin__inner { transform: none !important; }
}

.hold { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 24px; }
.hold--text { max-width: var(--w-text); }
.hold--tight { max-width: var(--w-tight); }

/* --------------------------------------------------------------------------
   EN-TÊTES DE SECTION
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--or-500); margin-bottom: var(--s3);
}
.kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.kicker--center::before { display: none; }

.h-sec { font-size: var(--t-h2); max-width: 17ch; }
.h-sec--wide { max-width: 24ch; }
.h-sec em { font-style: italic; display: block; color: var(--or-500); font-weight: 500; }
.sec--night .h-sec em, .sec--navy .h-sec em, .sec--grad-navy .h-sec em { color: var(--or-400); }
.sec--grad-or .h-sec em { color: var(--nv-950); }

.lede { margin-top: var(--s3); font-size: var(--t-lede); line-height: 1.68; max-width: 60ch; color: var(--ink-70); }
.sec--night .lede, .sec--navy .lede, .sec--grad-navy .lede { color: var(--pale-70); }
.sec--grad-or .lede { color: rgba(255,255,255,.88); }

.sub { margin-top: var(--s3); font-size: 14.5px; line-height: 1.78; max-width: 62ch; color: var(--ink-35); }
.sec--night .sub, .sec--navy .sub, .sec--grad-navy .sub { color: var(--pale-45); }

.mid { text-align: center; }
.mid .h-sec, .mid .lede, .mid .sub { margin-left: auto; margin-right: auto; }
.mid .kicker::before { display: none; }

/* --------------------------------------------------------------------------
   ICÔNES
   -------------------------------------------------------------------------- */
.i {
  width: 1em; height: 1em; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   ANIMATIONS D'ENTRÉE — une variante par section, jamais la même deux fois
   -------------------------------------------------------------------------- */
/* Aucune animation d'entrée ne touche plus à l'opacité, nulle part.
   C'est la seule garantie qu'un contenu ne puisse jamais rester invisible :
   si une animation ne se déclenche pas, l'élément est simplement à sa place
   d'origine — jamais absent. Le mouvement seul porte l'effet. */
[data-a] { opacity: 1; will-change: transform; }

/* Contenu critique (titres, CTA) : JAMAIS d'opacité 0.
   Si un élément essentiel dépend d'une animation pour être visible, la
   moindre défaillance le fait disparaître — c'est arrivé plusieurs fois sur
   ce projet. Ces éléments sont donc toujours affichés ; seule leur position
   est animée. */
[data-a="title"] {
  opacity: 1;
  transform: translateY(26px);
  transition: transform .8s var(--ez-out);
}
[data-a="title"].on { transform: none; }
/* !important : sans lui, une transition restée bloquée en cours peut laisser
   la valeur calculée à 0 alors même que la classe .on est posée et qu'un
   style inline demande 1. Panne constatée sur les titres de section. */
[data-a].on { opacity: 1; }

[data-a="up"]    { transform: translateY(34px); transition: transform var(--d-slow) var(--ez-out); }
[data-a="down"]  { transform: translateY(-28px); transition: transform var(--d-slow) var(--ez-out); }
[data-a="left"]  { transform: translateX(-52px); transition: transform var(--d-slow) var(--ez-out); }
[data-a="right"] { transform: translateX(52px);  transition: transform var(--d-slow) var(--ez-out); }
[data-a="zoom"]  { transform: scale(.86); transition: opacity var(--d-slow) var(--ez-out), transform var(--d-slow) var(--ez-spring); }
[data-a="tilt"]  { transform: perspective(1100px) rotateX(-14deg) translateY(40px); transform-origin: top center; transition: transform .95s var(--ez-out); }
[data-a="tiltL"] { transform: perspective(1100px) rotateY(16deg) translateX(-34px); transform-origin: left center; transition: transform .95s var(--ez-out); }
[data-a="tiltR"] { transform: perspective(1100px) rotateY(-16deg) translateX(34px); transform-origin: right center; transition: transform .95s var(--ez-out); }
[data-a="blur"]  { transform: translateY(20px) scale(1.03); transition: transform var(--d-slow) var(--ez-out); }
[data-a="rise"]  { transform: translateY(60px) scale(.96); transition: opacity 1s var(--ez-out), transform 1s var(--ez-out); }

[data-a="up"].on, [data-a="down"].on, [data-a="left"].on, [data-a="right"].on,
[data-a="zoom"].on, [data-a="tilt"].on, [data-a="tiltL"].on, [data-a="tiltR"].on,
[data-a="rise"].on { transform: none; }
[data-a="blur"].on { transform: none; }

/* Révélation par masque — mask-image et jamais clip-path : clip-path réduit la
   surface visible à zéro, l'IntersectionObserver ne détecte alors jamais
   l'élément et l'animation ne se déclenche jamais. */
[data-a="mask"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 100% 215%; mask-size: 100% 215%;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transform: translateY(16px);
  transition: opacity .9s var(--ez-out), -webkit-mask-position 1.05s var(--ez-out), mask-position 1.05s var(--ez-out), transform .9s var(--ez-out);
}
[data-a="mask"].on { -webkit-mask-position: 0 0; mask-position: 0 0; transform: none; }

/* Cascade : les enfants arrivent l'un après l'autre */
/* Cascade : le contenu reste VISIBLE, seul le déplacement est animé.
   Aucun texte du site ne doit pouvoir disparaître si une animation échoue. */
[data-stagger] > * { opacity: 1; transform: translateY(26px); transition: transform .7s var(--ez-out); }
[data-stagger].on > * { transform: none; }
[data-stagger].on > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].on > *:nth-child(2) { transition-delay: .13s; }
[data-stagger].on > *:nth-child(3) { transition-delay: .21s; }
[data-stagger].on > *:nth-child(4) { transition-delay: .29s; }
[data-stagger].on > *:nth-child(5) { transition-delay: .37s; }
[data-stagger].on > *:nth-child(6) { transition-delay: .45s; }
[data-stagger].on > *:nth-child(7) { transition-delay: .53s; }
[data-stagger].on > *:nth-child(8) { transition-delay: .61s; }

[data-d="1"] { transition-delay: .1s; }
[data-d="2"] { transition-delay: .2s; }
[data-d="3"] { transition-delay: .3s; }
[data-d="4"] { transition-delay: .4s; }
[data-d="5"] { transition-delay: .5s; }
[data-d="6"] { transition-delay: .6s; }

/* RÉVÉLATION EN DEUX TEMPS
   1. Le bloc entre en douceur (montée + léger zoom).
   2. Une fois posé, son contenu interne se dévoile ligne par ligne.
   C'est ce décalage qui donne la sensation de finition, plutôt qu'un bloc
   entier qui apparaît d'un coup avec tout son contenu. */
[data-seq] {
  opacity: 1; transform: translateY(46px) scale(.975);
  transition: transform .85s var(--ez-out);
}
[data-seq].on { transform: none; }

[data-seq] [data-seq-i] {
  opacity: 1; transform: translateY(14px);
  transition: transform .6s var(--ez-out);
}
[data-seq].on [data-seq-i] { transform: none; }
[data-seq].on [data-seq-i]:nth-child(1) { transition-delay: .42s; }
[data-seq].on [data-seq-i]:nth-child(2) { transition-delay: .50s; }
[data-seq].on [data-seq-i]:nth-child(3) { transition-delay: .58s; }
[data-seq].on [data-seq-i]:nth-child(4) { transition-delay: .66s; }
[data-seq].on [data-seq-i]:nth-child(5) { transition-delay: .74s; }
[data-seq].on [data-seq-i]:nth-child(6) { transition-delay: .82s; }
[data-seq].on [data-seq-i]:nth-child(7) { transition-delay: .90s; }
[data-seq].on [data-seq-i]:nth-child(8) { transition-delay: .98s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-a], [data-stagger] > *, [data-seq], [data-seq] [data-seq-i] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-a="mask"] { -webkit-mask-image: none !important; mask-image: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15px; padding: 16px 32px;
  border-radius: var(--r-pill);
  transition: transform var(--d-fast) var(--ez), box-shadow var(--d-fast) var(--ez), background var(--d-fast) var(--ez), border-color var(--d-fast) var(--ez), color var(--d-fast) var(--ez);
  white-space: nowrap;
}
.btn .i { width: 17px; height: 17px; transition: transform var(--d-fast) var(--ez); }
.btn:hover .i { transform: translateX(4px); }

.btn--main { background: var(--or-500); color: #fff; box-shadow: var(--sh-or); }
.btn--main:hover { background: var(--or-400); box-shadow: var(--sh-or-lg); transform: translateY(-3px); }

/* Reflet qui traverse le bouton au survol */
.btn--main::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ez);
}
.btn--main:hover::before { left: 150%; }

.btn--line { border: 1px solid var(--line-night); color: var(--pale-70); }
.btn--line:hover { border-color: var(--pale-28); color: #fff; }
.sec--cream .btn--line, .sec--white .btn--line, .sec--mist .btn--line { border-color: var(--line-mist); color: var(--ink-50); }
.sec--cream .btn--line:hover, .sec--white .btn--line:hover, .sec--mist .btn--line:hover { border-color: var(--ink-35); color: var(--ink); }

.btn--dark { background: var(--nv-950); color: #fff; }
.btn--dark:hover { background: var(--nv-850); transform: translateY(-3px); }

.btn--lg { padding: 19px 40px; font-size: 16.5px; }
.btn--sm { padding: 11px 22px; font-size: 13.5px; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn--halo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: halo 3.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgba(234,135,25,.6); }
  70% { box-shadow: 0 0 0 22px rgba(234,135,25,0); }
  100% { box-shadow: 0 0 0 0 rgba(234,135,25,0); }
}

/* --------------------------------------------------------------------------
   ÉLÉMENTS PARTAGÉS
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: rgba(234,135,25,.12); border: 1px solid rgba(234,135,25,.28);
  color: var(--or-400); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.chip .i { width: 14px; height: 14px; }
.sec--cream .chip, .sec--white .chip { background: var(--or-200); border-color: rgba(234,135,25,.3); color: var(--or-700); }

.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; font-size: 12.8px; color: var(--pale-45); }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust .i { width: 15px; height: 15px; color: var(--or-500); }
.sec--cream .trust, .sec--white .trust, .sec--mist .trust { color: var(--ink-35); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
/* Tags en contour : aucun remplissage orange, donc aucun risque d'orange
   terne. La brillance vient d'un liseré qui s'éclaircit vers le blanc. */
.tag {
  position: relative;
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 8px;
  background: transparent; color: var(--or-600);
  border: 1px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(120deg, var(--or-500) 0%, #FFD79A 45%, #FFFFFF 60%, var(--or-400) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: color var(--d-fast), transform var(--d-fast);
}
.tag:hover { color: var(--or-700); transform: translateY(-1px); }
.sec--night .tag, .sec--navy .tag, .sec--grad-navy .tag { background: rgba(234,135,25,.14); color: var(--or-300); }

/* --------------------------------------------------------------------------
   TRANSITIONS ENTRE SECTIONS
   -------------------------------------------------------------------------- */
.edge { position: absolute; left: 0; right: 0; width: 100%; line-height: 0; pointer-events: none; z-index: 1; }
.edge--top { top: -1px; }
.edge--bot { bottom: -1px; }
.edge svg { width: 100%; height: clamp(40px, 5vw, 84px); display: block; }

/* ==========================================================================
   PROFONDEUR
   Un fond n'est pas profond parce qu'il est dégradé : il l'est parce que
   plusieurs plans se superposent — grain, lueur, ombres portées et lumière
   rasante sur les arêtes.
   ========================================================================== */

/* Grain fin sur toute la page : casse le côté « aplat numérique » des
   dégradés et donne une matière. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ombres à plusieurs plans : une ombre unique est plate, une ombre composée
   de trois couches d'opacités et de flous différents crée le relief. */
:root {
  --sh-deep:
    0 1px 1px rgba(6,22,45,.04),
    0 4px 8px rgba(6,22,45,.05),
    0 12px 24px rgba(6,22,45,.06),
    0 32px 56px rgba(6,22,45,.08);
  --sh-deep-hi:
    0 2px 4px rgba(6,22,45,.06),
    0 8px 16px rgba(6,22,45,.08),
    0 24px 44px rgba(6,22,45,.10),
    0 48px 90px rgba(6,22,45,.14);
  --sh-deep-dark:
    0 2px 6px rgba(2,10,22,.30),
    0 10px 24px rgba(2,10,22,.28),
    0 30px 60px rgba(2,10,22,.34);
}

/* ==========================================================================
   ANIMATIONS DE CARTE
   ========================================================================== */

/* Basculement 3D suivant le curseur + projecteur qui suit la souris.
   Les deux valeurs sont écrites par le JS dans --rx/--ry et --mx/--my. */
.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ez-out), box-shadow .5s var(--ez-out);
}
.tilt.live { transition: transform .12s linear, box-shadow .3s var(--ez); }

/* Projecteur : une lueur douce suit le curseur à l'intérieur de la carte */
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ez);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 62%);
  z-index: 1;
}
.tilt.live::after { opacity: 1; }
.tilt--light::after { background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(234,135,25,.13), transparent 62%); }

/* Reflet qui traverse la carte au survol */
.sheen { position: relative; overflow: hidden; }
.sheen::before {
  content: ''; position: absolute; top: 0; left: -140%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); pointer-events: none; z-index: 2;
  transition: left .85s var(--ez);
}
.sheen:hover::before { left: 165%; }

/* Arête lumineuse en haut des cartes sombres : simule une lumière rasante */
.edge-lit { position: relative; }
.edge-lit::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  pointer-events: none;
}

/* Titres révélés mot à mot */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > span {
  display: inline-block; transform: translateY(105%);
  transition: transform .82s var(--ez-out);
}
.on .word > span, .word.on > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .tilt::after, .sheen::before { display: none; }
  .word > span { transform: none !important; }
  body::after { display: none; }
}

/* Garantie d'affichage : une fois la section figée, son contenu est visible
   quoi qu'il arrive. Sans ce filet, un conflit de règles peut laisser un
   texte bloqué à opacité 0 — panne déjà rencontrée sur ce projet. */
.pin.pinned [data-a],
.pin.pinned [data-stagger] > *,
.pin.pinned [data-seq],
.pin.pinned [data-seq] [data-seq-i] {
  opacity: 1;
  transform: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.pin.pinned [data-a] .word > span { transform: none; }

/* ==========================================================================
   MISE EN SCÈNE AU FIGEMENT
   Quand une section atteint sa position figée, ses blocs se remettent en
   place l'un après l'autre. C'est ce décalage qui donne la sensation d'une
   scène qui se joue, plutôt que d'un contenu déjà là.

   Choix important : c'est une ANIMATION, pas un état persistant. Une
   animation qui ne se déclenche pas laisse l'élément à sa place normale ;
   un état persistant, lui, peut le laisser bloqué invisible — ce qui est
   arrivé plusieurs fois sur ce projet. Aucune opacité n'est touchée.
   ========================================================================== */
@keyframes settle {
  from { transform: translateY(26px); }
  to   { transform: none; }
}
@keyframes settleSide {
  from { transform: translateX(22px); }
  to   { transform: none; }
}

.pin.pinned .hold > *,
.pin.pinned > .pin__inner > .hold > * {
  animation: settle .75s var(--ez-out) both;
}
.pin.pinned .hold > *:nth-child(1) { animation-delay: .04s; }
.pin.pinned .hold > *:nth-child(2) { animation-delay: .12s; }
.pin.pinned .hold > *:nth-child(3) { animation-delay: .20s; }
.pin.pinned .hold > *:nth-child(4) { animation-delay: .28s; }

/* Les colonnes de droite entrent latéralement : le regard suit la lecture */
.pin.pinned .split > *:last-child,
.pin.pinned .ct-wrap > *:last-child,
.pin.pinned .form-wrap > *:last-child {
  animation: settleSide .85s var(--ez-out) both;
  animation-delay: .16s;
}

@media (prefers-reduced-motion: reduce) {
  .pin.pinned .hold > *,
  .pin.pinned > .pin__inner > .hold > *,
  .pin.pinned .split > *:last-child,
  .pin.pinned .ct-wrap > *:last-child,
  .pin.pinned .form-wrap > *:last-child { animation: none; }
}