/* ============================================================
   K2 — main.css — v9 (refonte propre)
   ============================================================ */

:root {
  /* Largeur de la bande HUD réservée à droite (altimètre + graduations).
     La scène (montagne + contenu) occupe 100vw − var(--hud-w). */
  --hud-w: 80px;

  /* ░ Charte graphique K2 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
     PALETTE
     - Rose K2     : couleur signature (CTA, tracé, accents)
     - Cream BG    : fond global du site (le plus clair)
     - Beige Mid   : silhouettes des montagnes (un poil plus sombre)
     - Beige Deep  : détails sombres des montagnes (ex-noir)
     - Ink         : texte principal (presque noir)
     - Slate       : texte secondaire
     - Line        : filets et bordures
     ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */
  --c-pink:       #e2007a;   /* Rose K2 — signature (= rose du logo, référence officielle) */
  --c-pink-soft:  #E94B7B;   /* Variante adoucie (héritage, conservée pour éventuels accents secondaires) */

  --c-cream:      #F1ECDD;   /* Fond site (le plus clair) */
  --c-beige-mid:  #E8E2CF;   /* Silhouettes montagnes (= ancien fond blanc des SVG) */
  --c-beige-deep: #3A332A;   /* Détails sombres montagnes (= ancien noir des SVG) */

  --c-ink:        #1C1C1A;   /* Texte principal */
  --c-slate:      #6B6B6B;   /* Texte secondaire */
  --c-line:       #D6D2C4;   /* Filets, bordures */

  /* ─ Charte typographique K2 : 2 polices uniquement ───────────────
     1. Playfair Display : titres éditoriaux + accents italiques
     2. JetBrains Mono   : tout le reste (UI, body, sous-titres, altimètre,
                           bouton retour, baseline, etc.)
     ──────────────────────────────────────────────────────────────── */
  --f-serif: "Playfair Display", Georgia, serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Alias compat (anciennes variables → mappées sur les 2 nouvelles)
     Permet de ne pas casser tout le CSS existant qui référence --f-display,
     --f-accent, --f-text. */
  --f-display: var(--f-mono);    /* ex-Anton → mono uppercase ferme */
  --f-accent:  var(--f-serif);   /* ex-Playfair (inchangé) */
  --f-text:    var(--f-mono);    /* ex-Inter → mono */

  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-punch:  cubic-bezier(.16,1.36,.4,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Phase 13 — step-based : scroll natif désactivé, Observer GSAP pilote les transitions */
html, body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
body {
  font-family: var(--f-text);
  font-size: 17px; line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-family: var(--f-accent); font-style: italic; font-weight: 400; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--c-cream);
  display: grid; place-items: center;
  transition: clip-path 1s var(--ease-smooth);
  clip-path: inset(0 0 0 0);
}
.preloader.is-out { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.preloader__top {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--c-slate);
}
.preloader__k2 { width: 280px; height: 180px; overflow: hidden; display: grid; place-items: end center; }
.preloader__k2 img {
  width: 100%; height: auto; display: block;
  clip-path: inset(100% 0 0 0);
  animation: k2Reveal 1.6s var(--ease-smooth) forwards;
  /* Silhouette toute noire pleine pour le preloader (élégant)
     filter saturate(0) brightness(0) : remplace toute couleur visible par noir */
  filter: brightness(0) saturate(0);
}
@keyframes k2Reveal { to { clip-path: inset(0 0 0 0); } }
.preloader__meta {
  display: flex; gap: 28px; align-items: baseline;
  font-family: var(--f-mono); letter-spacing: .14em;
  opacity: 0; animation: fade .5s var(--ease-smooth) 1.6s forwards;
}
.preloader__alt { font-family: var(--f-display); font-size: 28px; color: var(--c-ink); }
.preloader__alt em { font-family: var(--f-mono); font-style: normal; font-size: 12px; margin-left: 4px; color: var(--c-slate); }
.preloader__lat { font-size: 11px; color: var(--c-slate); }
@keyframes fade { to { opacity: 1; } }
.preloader__bar { width: 240px; height: 1px; background: var(--c-line); overflow: hidden; opacity: 0; animation: fade .4s var(--ease-smooth) 1.7s forwards; }
.preloader__bar span {
  display: block; width: 100%; height: 100%; background: var(--c-pink);
  transform: scaleX(0); transform-origin: left;
  animation: bar 1.5s var(--ease-smooth) 1.8s forwards;
}
@keyframes bar { to { transform: scaleX(1); } }

/* ============================================================
   SCÈNE K2 — v10 : calage natif HTML/CSS
   Chaque montagne = <img> en position:absolute bottom:0
   dans un conteneur .k2-scene fixed plein écran.
   Aucun calcul SVG, aucun preserveAspectRatio sur le conteneur.
   ============================================================ */
.k2-scene {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  right: var(--hud-w);            /* réserve la bande HUD à droite */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Fond beige plat + halo radial blanc derrière le sommet
     (centre du halo aligné sur le pic du K2 = 50% + 1.26vw / ~38vh du haut) */
  background:
    radial-gradient(ellipse 60vw 50vh at calc(50% + 1.26vw) 38vh,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.25) 30%,
      rgba(241,236,221,0) 70%),
    var(--c-cream);
}

/* Chaque montagne ancrée bas du viewport */
.k2-mountain {
  position: absolute;
  bottom: 0;
  height: auto;     /* la hauteur suit la largeur via le ratio du SVG */
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Plan 04 — K2 héros : centré horizontalement, base au bas
   IMPORTANT : centrage par left: 12.5vw (= (100vw - 75vw)/2) au lieu de
   translateX(-50%) — sinon GSAP écraserait le translateX en posant son
   propre transform (scale + x/y), faisant sauter le K2 à droite.
   transform-origin = pied du tracé (point d'origine du zoom acte 1) */
.k2-plan-04 {
  left: 12.5%;             /* % du conteneur réduit (= ex-12.5vw) */
  width: 75%;
  z-index: 4;
  transform-origin: 64.44% 99.39%;
  will-change: transform;
}
/* Version "fade" : silhouette en #F1ECDD, brun en #E8E2CF
   Placée DERRIÈRE l'originale (DOM order) → toujours opacity 1
   pour servir de "couche de fond" opaque qui cache les textes.
   L'originale par-dessus se révèle/cache via son propre opacity. */
.k2-plan-04-fade {
  left: 12.5%;
  width: 75%;
  z-index: 4;
  transform-origin: 64.44% 99.39%;
  will-change: transform;
}

/* Plan 03 — droite, ancrée bas-droite
   transform-origin coin bas-droit : le zoom pivote depuis le sol côté écran droit */
.k2-plan-03 {
  right: 0;
  width: 30%;
  z-index: 5;
  transform-origin: 100% 100%;
  will-change: transform, opacity;
}

/* Plan 02 — gauche moyenne, ancrée bas-gauche
   transform-origin coin bas-gauche : zoom ancré au sol côté gauche */
.k2-plan-02 {
  left: 0;
  width: 45%;
  z-index: 5;
  transform-origin: 0 100%;
  will-change: transform, opacity;
}

/* Plan 01 — gauche proche (premier plan), bas-gauche, devant plan-02
   transform-origin coin bas-gauche : zoom le plus fort, pivot au sol */
.k2-plan-01 {
  left: 0;
  width: 25%;
  z-index: 6;
  transform-origin: 0 100%;
  will-change: transform, opacity;
}

/* Courbes topographiques décoratives — derrière toutes les montagnes */
.k2-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;                  /* derrière plan-04 (z=4) et latérales (z=5/6) */
  pointer-events: none;
}
.k2-topo path {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: topoDraw 3s var(--ease-smooth) forwards;
}
.k2-topo path:nth-child(2) { animation-delay: .15s; }
.k2-topo path:nth-child(3) { animation-delay: .30s; }
.k2-topo path:nth-child(4) { animation-delay: .45s; }
.k2-topo path:nth-child(5) { animation-delay: .60s; }
.k2-topo path:nth-child(6) { animation-delay: .75s; }
@keyframes topoDraw { to { stroke-dashoffset: 0; } }

/* Tracé d'ascension : SVG overlay superposé pile sur le K2 héros.
   Phase 11.3 : contient 2 polylines pointillé (halo beige + dots rose)
   visibles à l'init + 1 path plein qui se dessine pendant l'acte 2.
   transform-origin alignée sur celle du plan-04 pour rester superposée. */
.k2-trace {
  position: absolute;
  bottom: 0;
  left: 12.5%;              /* % du conteneur réduit — voir .k2-plan-04 */
  width: 75%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  transform-origin: 64.44% 99.39%;
  will-change: transform, opacity;
}

/* Tracé d'ascension d'accueil — trait beige clair seul (contour masqué)
   .k2-trace-halo : masqué (test sans contour sombre)
   .k2-trace-dots : ligne beige clair visible seule */
.k2-trace-halo {
  display: none;             /* contour brun foncé masqué */
}
.k2-trace-dots {
  fill: none;
  stroke: #E8E2CF;           /* beige clair = trait visible seul */
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;           /* aminci */
}

/* Point rose au DÉPART du tracé (pied) — statique */
.k2-trace-start {
  /* aucune anim, juste un point fixe au pied */
}

/* Point rose au SOMMET — clignote avec halo qui pulse autour */
.k2-trace-summit {
  animation: summitBlink 1.6s ease-in-out infinite;
}
.k2-trace-summit-pulse {
  transform-origin: 966.11px 10.03px;       /* pivot exact sur le sommet */
  animation: summitPulse 1.8s ease-out infinite;
}
@keyframes summitBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
@keyframes summitPulse {
  0%   { r: 9;  opacity: .9; }
  100% { r: 32; opacity: 0;  }
}

/* Drapeau planté sur le pic du K2 — visible au dernier palier (.is-planted) */
.k2-peak-flag {
  opacity: 0;
  transform-origin: 966.11px 10.03px;          /* pivot au pied du mât = sommet */
  transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth);
  transform: scale(.6);
}
.k2-peak-flag.is-planted {
  opacity: 1;
  transform: scale(1);                         /* léger « plantage » à l'arrivée */
}

/* Tracé plein qui se dessine pendant l'acte 2 (GSAP pilote stroke-dashoffset)
   vector-effect="non-scaling-stroke" sur le <path> + stroke-width en px réels
   → trait net et fin quel que soit le zoom CSS appliqué au SVG parent */
.k2-trace-full {
  fill: none;
  stroke: #e2007a;
  stroke-width: 3;           /* aminci */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   PALIERS — bornes visuelles sur le tracé (phase 12)
   Apparaissent à la fin du zoom (acte 1), s'illuminent quand atteintes.
   ============================================================ */
.k2-paliers {
  opacity: 0;                            /* invisible au load, GSAP révèle à la fin acte 1 */
  will-change: opacity;
}
.k2-palier__halo {
  pointer-events: none;
}
.k2-palier__dot {
  pointer-events: none;
  transition: fill .4s ease, stroke-width .4s ease;
}

/* ============================================================
   BOUTON RETOUR ACCUEIL — compact (carré filet rose + flèche rose),
   à gauche du logo. Visible uniquement en mode zoom.
   ============================================================ */
.site-header__left { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.k2-back {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--c-pink);                      /* flèche rose */
  background: transparent;
  border: 1px solid var(--c-pink);           /* filet rose */
  border-radius: 3px;
  cursor: pointer;
  opacity: 0; width: 0; border-width: 0;     /* masqué/replié par défaut (mode hero) */
  overflow: hidden;
  transition: opacity .4s var(--ease-smooth), background-color .2s ease,
              width .4s var(--ease-smooth), border-width .4s var(--ease-smooth);
}
.k2-back.is-visible {
  opacity: 1; width: 34px; border-width: 1px;
}
.k2-back:hover { background: var(--c-pink); color: var(--c-cream); }
.k2-back__arrow {
  font-size: 16px; line-height: 1;
  color: inherit; font-family: var(--f-display);
}

/* ============================================================
   INVITATION AU SCROLL — palier 0 (camp de base)
   Centrée HORIZONTALEMENT au-dessus de la pastille (qui est au pied
   du tracé K2 = environ centre-bas de l'écran après zoom).
   Empilement vertical : picto tente → "Camp de base" → CTA → pic vertical
   ============================================================ */
.k2-invite {
  position: fixed;
  /* Position pilotée par JS — left + top recalculés à chaque frame
     pour rester collé au-dessus de la pastille rose, où qu'elle soit */
  left: 50%;
  top: 70vh;          /* fallback initial avant le 1er positionInvite() */
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, top, left;
}

/* Picto tente / camp de base */
.k2-invite__picto {
  display: inline-flex;
  color: var(--c-pink);
  margin-bottom: 2px;
}
.k2-invite__picto svg {
  display: block;
}

/* Label "Camp de base" */
.k2-invite__pre {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-slate);
  font-weight: 400;
}

/* CTA "Scroller pour débuter l'expédition" */
.k2-invite__cta {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--c-ink);
  line-height: 1.3;
  margin-top: 2px;
}

/* Pic vertical descendant vers la pastille (anim pulse douce) */
.k2-invite__pin {
  display: block;
  width: 1px;
  height: 18px;                          /* court : l'invitation est déjà collée à la pastille via JS */
  margin-top: 6px;
  background: linear-gradient(to bottom,
    rgba(168, 155, 133, 0)   0%,
    rgba(168, 155, 133, .9) 100%);
  animation: k2InvitePulse 1.8s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes k2InvitePulse {
  0%, 100% { opacity: .5; transform: scaleY(1); }
  50%      { opacity: 1;  transform: scaleY(1.15); }
}

/* ============================================================
   OISEAUX — silhouettes qui traversent le ciel pendant le hero
   Base statique : 6 vols (groupes A/B/C/D + 2 solitaires), durées 16-34s
   (fréquence augmentée phase 13.1). Vols additionnels générés en JS
   (voir main.js : EXTRA_FLOCKS / FREQ_FACTOR) réutilisant ces keyframes.
   Disparaissent au début du zoom (acte 1 via GSAP)
   ============================================================ */
.k2-birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* PAS de z-index ici : crée un stacking context qui isolerait tous les oiseaux
     ensemble. Les enfants .k2-bird-group définissent leurs propres z (3 ou 7)
     pour passer derrière ou devant la K2 héros (z=4). */
}
/* GROUPE de plusieurs oiseaux : le groupe traverse l'écran ensemble.
   À l'intérieur, chaque oiseau a sa propre position relative (top/left)
   et son propre rythme de battement individuel pour rester naturel. */
.k2-bird-group {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;       /* le groupe n'a pas de taille, juste une ancre */
}
.k2-bird-group--A {
  top: 32vh;
  z-index: 7;                /* devant tout (premier plan) */
  animation: birdCrossLR 16s linear infinite -5s;     /* arrive à l'écran rapidement */
}
.k2-bird-group--B {
  top: 22vh;
  z-index: 3;                /* derrière K2 (z=4) */
  animation: birdCrossRL 20s linear infinite -12s;
}

.k2-bird {
  position: absolute;
  display: block;
  overflow: visible;
}
/* Ailes : rotation indépendante autour du corps (0,0)
   Durée du flap définie par variable --flap-dur par oiseau */
.bird-wing {
  transform-origin: 0 0;
}
.bird-wing--left {
  animation: wingFlapLeft var(--flap-dur, .55s) ease-in-out infinite;
}
.bird-wing--right {
  animation: wingFlapRight var(--flap-dur, .55s) ease-in-out infinite;
}

/* ━━━ Groupe A : un grand devant, un petit derrière (légèrement décalé) ━━━ */
.k2-bird--gA-big {
  left: 0; top: 0;
  width: 30px;
  --flap-dur: .55s;          /* ralenti (était .35s) */
}
.k2-bird--gA-small {
  left: -18px; top: 4px;     /* derrière et un peu sous le grand */
  width: 18px;
  --flap-dur: .65s;          /* léger décalage individuel pour naturel */
}

/* ━━━ Groupe B : formation triangle (un grand + 2 petits autour) ━━━ */
.k2-bird--gB-big {
  left: 0; top: 0;
  width: 26px;
  --flap-dur: .65s;
}
.k2-bird--gB-small1 {
  left: -22px; top: -6px;    /* en haut-gauche du grand */
  width: 16px;
  --flap-dur: .75s;
}
.k2-bird--gB-small2 {
  left: -16px; top: 8px;     /* en bas-gauche du grand */
  width: 16px;
  --flap-dur: .7s;
}

/* ━━━ Solitaire — lointain, très lent ━━━ */
.k2-bird--solo {
  top: 30vh;
  width: 18px;
  z-index: 7;
  --flap-dur: .85s;
  animation: birdCrossLR 28s linear infinite -25s;
}

/* ━━━ Groupe C : 2 oiseaux D→G milieu-haut ━━━ */
.k2-bird-group--C {
  top: 38vh;
  z-index: 5;
  animation: birdCrossRL 24s linear infinite -18s;
}
.k2-bird--gC-big {
  left: 0; top: 0;
  width: 24px;
  --flap-dur: .6s;
}
.k2-bird--gC-small {
  left: -20px; top: 5px;
  width: 16px;
  --flap-dur: .7s;
}

/* ━━━ Groupe D : 4 oiseaux en formation V — G→D ━━━ */
.k2-bird-group--D {
  top: 18vh;
  z-index: 3;
  animation: birdCrossLR 34s linear infinite -30s;
}
.k2-bird--gD-1 {
  left: 0; top: 0;
  width: 22px;
  --flap-dur: .7s;
}
.k2-bird--gD-2 {
  left: -18px; top: -5px;
  width: 16px;
  --flap-dur: .8s;
}
.k2-bird--gD-3 {
  left: -18px; top: 5px;
  width: 16px;
  --flap-dur: .75s;
}
.k2-bird--gD-4 {
  left: -34px; top: 0;
  width: 13px;
  --flap-dur: .9s;
}

/* ━━━ Solitaire 2 — bas premier plan, traverse vite ━━━ */
.k2-bird--solo2 {
  top: 52vh;
  width: 22px;
  z-index: 7;
  --flap-dur: .5s;           /* plus rapide → effet d'oiseau plus proche */
  animation: birdCrossRL 19s linear infinite -10s;
}

/* Traversées : G→D et D→G avec léger zigzag vertical */
@keyframes birdCrossLR {
  0%   { transform: translate(-10vw, 0); }
  25%  { transform: translate(30vw, -8vh); }
  50%  { transform: translate(55vw, 4vh); }
  75%  { transform: translate(80vw, -3vh); }
  100% { transform: translate(115vw, 0); }
}
@keyframes birdCrossRL {
  0%   { transform: translate(110vw, 0) scaleX(-1); }
  25%  { transform: translate(75vw, -5vh) scaleX(-1); }
  50%  { transform: translate(45vw, 6vh) scaleX(-1); }
  75%  { transform: translate(20vw, -2vh) scaleX(-1); }
  100% { transform: translate(-15vw, 0) scaleX(-1); }
}

/* Battements réalistes : ailes qui montent et descendent en miroir.
   - Position haute (apogée) : ailes très haut, presque verticales (-60°)
   - Position neutre : ailes étendues à l'horizontale (0°)
   - Position basse (puissance) : ailes vers le bas (+30°)
   Décalage de 50% pour que les deux ailes restent en miroir parfait. */
@keyframes wingFlapLeft {
  0%, 100% { transform: rotate(35deg); }    /* aile basse */
  50%      { transform: rotate(-55deg); }   /* aile haute */
}
@keyframes wingFlapRight {
  0%, 100% { transform: rotate(-35deg); }   /* miroir : aile droite basse */
  50%      { transform: rotate(55deg); }    /* miroir : aile droite haute */
}

/* Halo pulsant pastille */
#k2MarkerPulse {
  transform-origin: center;
  animation: markerPulse 1.6s ease-out infinite;
}
@keyframes markerPulse {
  0%   { r: 6;  opacity: .9; }
  100% { r: 22; opacity: 0; }
}

/* ============================================================
   SIGNATURE — tagline fixe en bas-gauche, par-dessus les montagnes
   ============================================================ */
.site-tagline {
  position: fixed;
  bottom: 18px;
  left: 24px;
  z-index: 80;                                  /* devant les montagnes (z 4-6), derrière debug/alti */
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-beige-mid);                    /* beige clair = lisible sur silhouettes sombres */
  pointer-events: none;
  user-select: none;
  max-width: min(90vw, 520px);
  line-height: 1.4;
}

/* ============================================================
   HEADER — logo K2
   2 modes :
   - Mode HERO  (par défaut)  : logo GRAND, centré verticalement entre haut
                                de fenêtre et titre "Tracer la voie"
   - Mode ZOOM  (.is-zoom)    : logo PETIT, collé en haut comme un header classique
   Transition douce entre les 2 modes (width + top).
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0;
  right: var(--hud-w);                 /* s'arrête avant la bande HUD */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;      /* logo à gauche · menu à droite */
  gap: 24px;
  pointer-events: none;
  padding: 18px clamp(20px, 4vw, 48px);
  transition: padding .6s var(--ease-smooth);
}
.site-header__logo {
  display: block;
  pointer-events: auto;
  line-height: 0;
  transition: width .6s var(--ease-smooth);
}
/* Menu de navigation — ancres vers les paliers */
.site-nav {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
  pointer-events: auto;
}
.site-nav__link {
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-ink);
  position: relative;
  transition: color .25s var(--ease-smooth);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--c-pink); transition: width .25s var(--ease-smooth);
}
.site-nav__link:hover { color: var(--c-pink); }
.site-nav__link:hover::after { width: 100%; }
.site-header__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Le header est désormais une vraie barre (logo gauche + menu droite).
   Les modes ne changent QUE la taille du logo (plus de padding-top variable). */
.site-header:not(.is-zoom) .site-header__logo {
  width: clamp(96px, 10vw, 140px);    /* Hero : logo un peu plus grand */
}
.site-header.is-zoom .site-header__logo {
  width: clamp(72px, 7vw, 104px);     /* Zoom : logo plus discret */
}

/* ============================================================
   UI — altimètre HUD + règle de graduations + debug
   ============================================================ */
/* Altimètre épuré : chiffre rose + unité, SANS cadre ni fond.
   Hauteur FIXE (mi-écran) — plus de suivi vertical de la pastille. */
/* Altimètre logé DANS la bande de droite (80px) — petit, horizontal.
   top piloté en JS (updateAltimeter) selon l'altitude ; se déplace avec la flèche. */
.alti {
  position: fixed;
  right: 14px;                         /* à gauche de la flèche (qui est à right:0) */
  top: 50%;                            /* défaut ; top réel piloté en JS (altitude) */
  transform: translateY(-50%);         /* MÊME LIGNE que la flèche */
  z-index: 90;
  width: 56px;                         /* tient dans la bande, à gauche de la flèche */
  display: flex; align-items: baseline; justify-content: flex-end; gap: 2px;
  font-family: var(--f-mono); color: var(--c-ink);
  opacity: 0;                          /* masqué pendant hero (altitude null) */
  transition: opacity .5s var(--ease-smooth);
  pointer-events: none;
}
.alti.is-visible {
  opacity: 1;
}
.alti-num    { font-family: var(--f-display); font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-pink); }
.alti-unit   { font-size: 8px; letter-spacing: .1em; color: var(--c-pink); opacity: .7; }

/* ── Règle de graduations HUD (bord droit) ──────────────────
   Ticks décoratifs via gradients CSS répétés : petits ticks tous
   les 10px (--c-line), ticks marqués tous les 50px (--c-ink, plus
   larges). Le calque #rulerTicks est translaté en Y par le JS
   (scrollRuler) pour défiler vers le haut quand on monte. */
.ruler {
  position: fixed;
  right: 0; top: 0;
  width: var(--hud-w); height: 100vh;  /* bande de droite : graduations + altimètre */
  z-index: 89;
  overflow: hidden;
  background: rgba(241, 236, 221, .35);          /* léger fond pour démarquer la bande */
  border-left: 1px solid var(--c-line);          /* filet de séparation scène / HUD */
  opacity: 1;                                    /* TOUJOURS visible (bande permanente) */
  pointer-events: none;
}
/* (plus de toggle is-visible : la bande reste affichée en permanence) */

/* Calques de ticks communs : marge haute/basse pour défiler sans trou.
   translateY piloté par JS (updateAltimeter / défilement opposé). */
.ruler__ticks {
  position: absolute;
  top: -50vh; right: 0;
  height: 200vh;
  will-change: transform;
}
/* Graduation 1 — traits espacés de 10px, largeur 10px. AU-DESSUS, semi-
   transparente pour laisser voir la graduation 2 derrière (effet parallaxe).
   Défile en sens inverse de la graduation 2. */
.ruler__ticks--fine {
  width: 7px;                            /* réduit pour laisser place au texte */
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-ink) 0, var(--c-ink) 1.5px,
    transparent 1.5px, transparent 10px   /* écart 10px */
  );
  opacity: .55;
}
/* Graduation 2 — traits espacés de 20px. EN-DESSOUS. */
.ruler__ticks--wide {
  width: 13px;                           /* réduit */
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-ink) 0, var(--c-ink) 1.5px,
    transparent 1.5px, transparent 20px   /* écart 20px */
  );
  opacity: .35;
}
/* Flèche rose — collée TOUT À DROITE, pointe vers la GAUCHE (sens inversé),
   par-dessus les graduations. top piloté JS (même hauteur que le texte alti). */
.ruler__arrow {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 3;                            /* par-dessus les graduations */
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid var(--c-pink); /* pointe vers la GAUCHE */
}

/* ── Ancres de navigation dans la bande HUD (1 point cliquable par palier) ── */
.ruler-nav {
  position: fixed;
  right: 0; top: 0;
  width: var(--hud-w); height: 100vh;
  z-index: 91;                           /* au-dessus de la bande, cliquable */
  pointer-events: none;                  /* seuls les points captent le clic */
}
/* Ancres = bande horizontale CLIQUABLE (toute la largeur du HUD) à la hauteur
   du palier ; un triangle rose marque le bord droit. */
.ruler-anchor {
  position: absolute;
  right: 0;                              /* couvre toute la largeur de la bande */
  width: var(--hud-w);
  top: 50%;                              /* top réel posé en JS (altitude) */
  transform: translateY(-50%);
  height: 18px; padding: 0; margin: 0;
  background: none; border: none;
  cursor: pointer;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: flex-end;
}
/* le triangle rose, dessiné au bord droit de la zone cliquable */
.ruler-anchor::after {
  content: "";
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid var(--c-pink); /* pointe vers la gauche */
  opacity: .55;
  transition: opacity .25s var(--ease-smooth), transform .25s var(--ease-smooth);
}
.ruler-anchor:hover::after { opacity: 1; transform: scale(1.3); }
.ruler-anchor.is-current::after { opacity: 1; }
/* Nom de la section au survol — bulle à GAUCHE de la bande */
.ruler-anchor__label {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-cream);
  background: var(--c-beige-deep); padding: 4px 9px; border-radius: 3px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-smooth);
}
.ruler-anchor:hover .ruler-anchor__label { opacity: 1; }

/* ============================================================
   SECTIONS DE CONTENU — overlay, 1 bloc par palier
   Bloc actif = .is-visible (fondu). Aligné à droite, à gauche du HUD.
   ============================================================ */
.k2-sections {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  right: var(--hud-w);                 /* contenu centré sur la zone gauche (hors HUD) */
  z-index: 80;
  pointer-events: none;
}
.k2-section {
  position: absolute;
  top: 50%; left: 50%;                 /* centré horizontalement (au-dessus du point) */
  transform: translate(-50%, -50%);
  width: 50vw;                         /* 50% de la largeur fenêtre */
  max-width: 50vw;
  text-align: left;                    /* texte aligné à gauche */
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  opacity: 0;                          /* masqué par défaut, fondu via .is-visible */
  transition: opacity .6s var(--ease-smooth);
}
.k2-section.is-visible { opacity: 1; }
/* Surtitre — JetBrains Mono (--f-mono), petit, espacé */
.k2-section__pre {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-pink);
}
/* Titre — Playfair Display (--f-serif) */
.k2-section__title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.05;
  color: var(--c-ink);
  margin: 0;
}
.k2-section__title em { font-style: italic; color: var(--c-pink); }
/* Corps — JetBrains Mono (--f-mono), comme le reste du site (2 typos signature).
   Interligne aéré pour rester lisible malgré la chasse fixe. */
.k2-section__body {
  font-family: var(--f-mono);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0;
  max-width: 100%;            /* occupe toute la largeur du bloc (50vw) */
}

/* ── Variante CALQUE : panneau 80% écran (10% marge), 2 colonnes, fond flouté ── */
.k2-section--panel {
  top: 4%; left: 4%; right: 4%; bottom: 4%;        /* marge réduite → quasi plein écran */
  transform: none;                                /* annule le translate(-50%,-50%) */
  width: auto; max-width: none;
  display: grid; grid-template-columns: 1fr 1fr;  /* 2 colonnes égales */
  gap: clamp(24px, 3vw, 56px);
  align-items: stretch;
  background: rgba(241, 236, 221, .55);           /* crème semi-transparent */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 0, 122, .25);       /* filet rose K2 discret */
  padding: clamp(28px, 3.5vw, 56px);
  pointer-events: auto;
}
.k2-panel__col { display: flex; flex-direction: column; justify-content: center; }
.k2-panel__col--text { gap: 18px; text-align: left; }
.k2-panel__list {
  list-style: none; margin: 8px 0 0; padding: 0;
  columns: 2; column-gap: 32px;                   /* 13 items sur 2 sous-colonnes */
  font-family: var(--f-mono);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 2;
  color: var(--c-ink);
}
.k2-panel__list li { break-inside: avoid; }
.k2-panel__list li::before { content: "— "; color: var(--c-pink); }
/* Colonne droite : grille d'icônes (1 par spécialité) — 2 colonnes × 4 lignes.
   Placeholder élégant en attendant les vraies images. */
.k2-panel__col--media { padding: 0; }
.k2-skillgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  width: 100%; height: 100%;
}
.k2-skillgrid__cell {
  display: flex; align-items: center; justify-content: center;
  background: rgba(241, 236, 221, .35);
  border: 1px solid rgba(58, 51, 42, .18);
  border-radius: 2px;
  color: var(--c-ink);
  transition: color .3s var(--ease-smooth), background-color .3s var(--ease-smooth), border-color .3s var(--ease-smooth);
}
.k2-skillgrid__cell:hover {
  color: var(--c-pink);
  border-color: rgba(226, 0, 122, .4);
  background: rgba(241, 236, 221, .6);
}
.k2-skillgrid__cell svg {
  width: clamp(28px, 3vw, 46px);
  height: auto;
}

/* ── P2 Carnets : calque bento (titre en tête + grille mosaïque) ── */
.k2-section--bento {
  display: flex; flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
}
.k2-bento__head { text-align: left; }
.k2-bento__head .k2-section__title { font-size: clamp(26px, 3.4vw, 52px); margin-top: 6px; }
.k2-bento {
  list-style: none; margin: 0; padding: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
.k2-bento__cell {
  position: relative;
  background: rgba(58, 51, 42, .12);
  border: 1px solid rgba(58, 51, 42, .18);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .3s var(--ease-smooth), background-color .3s var(--ease-smooth);
}
.k2-bento__cell--lg  { grid-column: span 2; grid-row: span 2; }
.k2-bento__cell--wide { grid-column: span 2; }
.k2-bento__cell:hover { border-color: rgba(226, 0, 122, .5); background: rgba(58, 51, 42, .18); }
.k2-bento__label {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-ink); opacity: .55;
  transition: color .3s, opacity .3s;
}
.k2-bento__cell:hover .k2-bento__label { color: var(--c-pink); opacity: 1; }

/* ── P3 Signature : texte fort plein écran (flottant, pas de calque) ── */
.k2-section--statement {
  width: min(80vw, 1000px); max-width: min(80vw, 1000px);
  align-items: center; text-align: center;
  gap: 24px;
}
.k2-statement__quote {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1.1;
  color: var(--c-ink);
  margin: 0;
}
.k2-statement__quote em { font-style: italic; color: var(--c-pink); }
.k2-statement__sign {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-pink);
}

/* ── P4 Marques : logos défilants (marquee, 2 lignes sens opposés) ── */
.k2-section--marquee {
  width: 100%; max-width: 100%; left: 0; transform: translateY(-50%);
  align-items: stretch; gap: clamp(20px, 3vw, 40px);
}
.k2-marquee__head { text-align: center; }
.k2-marquee__head .k2-section__pre { display: block; }
.k2-marquee__head .k2-section__title { font-size: clamp(26px, 3.4vw, 52px); margin-top: 8px; }
.k2-marquee__rows { display: flex; flex-direction: column; gap: 18px; }
.k2-marquee__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.k2-marquee__track {
  display: inline-flex; gap: 56px; white-space: nowrap;
  animation: k2MarqueeLeft 28s linear infinite;
}
.k2-marquee__row--rev .k2-marquee__track { animation: k2MarqueeRight 34s linear infinite; }
.k2-marquee__track span {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(22px, 2.6vw, 40px); color: var(--c-ink); opacity: .55;
}
@keyframes k2MarqueeLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes k2MarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── P5 Manifeste : texte centré (flottant) ── */
.k2-section--manifesto {
  width: min(60vw, 720px); max-width: min(60vw, 720px);
  align-items: center; text-align: center; gap: 22px;
}
.k2-section--manifesto .k2-section__title { font-size: clamp(28px, 4vw, 60px); }
.k2-section--manifesto .k2-section__body { text-align: center; max-width: 52ch; }

/* ── P6 Sommet : drapeau + CTA (flottant centré) ── */
.k2-section--summit {
  width: min(70vw, 820px); max-width: min(70vw, 820px);
  align-items: center; text-align: center; gap: 22px;
}
.k2-summit__flag {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-pink);
}
.k2-section--summit .k2-section__title { font-size: clamp(30px, 4.6vw, 70px); }
.k2-section--summit .k2-section__title em { font-style: italic; color: var(--c-pink); }
.k2-section--summit .k2-section__body { text-align: center; max-width: 46ch; }
.k2-summit__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.k2-btn {
  display: inline-block; pointer-events: auto;
  background: var(--c-pink); color: #fff; text-decoration: none;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; padding: 14px 28px; border-radius: 2px;
  transition: filter .2s ease, transform .2s ease;
}
.k2-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.k2-summit__mail {
  pointer-events: auto;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--c-ink); text-decoration: none; border-bottom: 1px solid rgba(226,0,122,.4);
}
.k2-summit__mail:hover { color: var(--c-pink); }

/* ════════════════════════════════════════════════════════════
   REFONTE SECTIONS — style « Unchained » charte K2 + photos
   ════════════════════════════════════════════════════════════ */

/* ── Photo réutilisable : fond beige fallback + img + voile charte ── */
.k2-photo {
  position: relative; overflow: hidden;
  background: var(--c-beige-mid);
  border: 1px solid rgba(58, 51, 42, .18);
  border-radius: 2px;
}
.k2-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(.15) contrast(1.02);
  transition: transform .6s var(--ease-smooth), filter .4s var(--ease-smooth);
}
.k2-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(226,0,122,.06), rgba(58,51,42,.18));
  mix-blend-mode: multiply; pointer-events: none;
}
.k2-photo:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.05); }

/* ── P1 Compétences : grands mots empilés (réf Unchained) ── */
.k2-section--words {
  width: min(92vw, 1400px); max-width: min(92vw, 1400px);
  align-items: flex-start; text-align: left; gap: 14px;
}
.k2-words { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k2-words li {
  font-family: var(--f-serif); font-weight: 700; line-height: .92;
  font-size: clamp(26px, 6.4vw, 88px);
  color: var(--c-ink); text-transform: uppercase; letter-spacing: -.01em;
  text-shadow: 0 1px 24px rgba(241, 236, 221, .65);
  transition: color .4s var(--ease-smooth), transform .4s var(--ease-smooth);
}
.k2-words li.is-accent { color: var(--c-pink); }
.k2-words li:hover { color: var(--c-pink); transform: translateX(14px); }

/* ── P4 Marques : logos clients en 3 lignes défilantes (pause au survol global) ── */
.k2-section--logos {
  width: 100%; max-width: 100%; left: 0; transform: translateY(-50%);
  align-items: stretch; gap: clamp(24px, 3vw, 44px);
}
.k2-logos__head { text-align: center; }
.k2-logos__head .k2-section__title { font-size: clamp(26px, 3.4vw, 52px); margin-top: 8px; }
.k2-logos__rows { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 22px); }
.k2-logos__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.k2-logos__track {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; gap: clamp(12px, 1.4vw, 22px); white-space: nowrap; will-change: transform;
}
.k2-logos__row--rtl .k2-logos__track { animation: k2LogosRTL 38s linear infinite; }
.k2-logos__row--ltr .k2-logos__track { animation: k2LogosLTR 44s linear infinite; }
/* Pause de TOUTES les lignes dès qu'on survole n'importe quel logo (ou les rangées) */
.k2-section--logos:hover .k2-logos__track { animation-play-state: paused; }
/* Rectangle "logo" (placeholder = nom ; remplacer par <img> du vrai logo) */
.k2-logo {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-width: clamp(140px, 14vw, 220px); height: clamp(64px, 7vw, 96px);
  padding: 0 22px;
  background: var(--c-cream);
  border: 1px solid rgba(58, 51, 42, .16); border-radius: 3px;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(15px, 1.5vw, 24px);
  color: var(--c-beige-deep);
  transition: color .3s var(--ease-smooth), border-color .3s, background-color .3s, transform .3s;
}
.k2-logo:hover {
  color: var(--c-cream); background: var(--c-pink);
  border-color: transparent; transform: scale(1.04);
}
@keyframes k2LogosRTL { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes k2LogosLTR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── P3 Signature : photo SOMBRE plein cadre + texte CLAIR (style éditorial) ── */
.k2-section--statement-photo {
  width: min(82vw, 920px); max-width: min(82vw, 920px);
  justify-content: center; gap: 26px;
  padding: clamp(36px, 5vw, 80px);
}
/* la photo couvre largement le bloc (légèrement débordante) */
.k2-statement__media { position: absolute; inset: -8% -6%; z-index: -1; border-radius: 4px; }
/* voile SOMBRE : assombrit la photo pour faire ressortir le texte clair */
.k2-statement__media::after {
  background: linear-gradient(180deg, rgba(28,28,26,.62), rgba(28,28,26,.78));
  mix-blend-mode: normal;
}
.k2-section--statement-photo .k2-statement__quote {
  color: var(--c-cream);
  font-size: clamp(30px, 4.6vw, 64px);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.k2-section--statement-photo .k2-statement__quote em { color: var(--c-pink); }
.k2-statement__body {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.75;
  color: rgba(241, 236, 221, .9);
  max-width: 52ch; margin: 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .4);
}
.k2-statement__body em { font-style: italic; color: var(--c-pink); }
.k2-section--statement-photo .k2-statement__sign { color: var(--c-pink); }

/* ── P0 Intro : Agence + Signature fusionnés (texte flottant, fond transparent) ── */
.k2-section--intro {
  width: min(78vw, 980px); max-width: min(78vw, 980px);
  align-items: center; text-align: center; gap: 18px;
}
.k2-section--intro .k2-section__title { font-size: clamp(30px, 4vw, 64px); }
.k2-section--intro .k2-section__body { max-width: 80ch; }

/* ── P5 Manifeste : split asymétrique texte / photo (réf Macomamoi) ── */
.k2-section--split { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.k2-split__text { display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: left; }
.k2-split__text .k2-section__body { max-width: 100%; }
.k2-split__media { min-height: 100%; }

/* ════════════════════════════════════════════════════════════
   CARNETS DE VOYAGE — études de cas (réf pages projet Unchained)
   ════════════════════════════════════════════════════════════ */
.k2-case__title {
  font-family: var(--f-serif); font-weight: 700; line-height: .98;
  margin: 0; letter-spacing: -.01em;
}

/* ── Cas FULLSCREEN : photo sombre + titre projet géant + accroche ── */
.k2-section--case-full {
  width: min(94vw, 1500px); max-width: min(94vw, 1500px);
  align-items: flex-start; text-align: left; justify-content: flex-end;
  gap: 18px; padding: clamp(36px, 6vw, 96px);
  min-height: 70vh;
}
.k2-case__media {                         /* photo en fond, couvre tout le bloc */
  position: absolute; inset: -4%; z-index: -1; border-radius: 4px;
}
.k2-case__media::after {                  /* voile sombre pour texte clair */
  background: linear-gradient(180deg, rgba(28,28,26,.45) 0%, rgba(28,28,26,.82) 100%);
  mix-blend-mode: normal;
}
.k2-section--case-full .k2-section__pre { color: var(--c-pink); }
.k2-section--case-full .k2-case__title {
  color: var(--c-cream); font-size: clamp(48px, 9vw, 150px);
  text-shadow: 0 3px 40px rgba(0,0,0,.5);
}
.k2-case__lead {
  font-family: var(--f-mono); font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.7; color: rgba(241,236,221,.92); max-width: 46ch; margin: 0;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
.k2-case__tags {
  list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.k2-case__tags li {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-cream); padding: 5px 12px; border: 1px solid rgba(241,236,221,.4); border-radius: 100px;
}

/* ── Cas 2 COLONNES : photo | contexte/réflexion/approche (calque crème) ── */
.k2-section--case-split { grid-template-columns: .9fr 1.1fr; align-items: stretch; }
.k2-case__col-media { min-height: 100%; border-radius: 2px; }   /* hérite .k2-photo */
.k2-case__col-text { display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: left; }
.k2-section--case-split .k2-case__title { color: var(--c-ink); font-size: clamp(34px, 4.4vw, 68px); }
.k2-section--case-split .k2-case__title em { color: var(--c-pink); font-style: italic; }
.k2-case__blocks { display: flex; flex-direction: column; gap: 14px; }
.k2-case__blocks h3 {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-pink); margin: 0 0 4px;
}
.k2-case__blocks p {
  font-family: var(--f-mono); font-size: clamp(12px, .95vw, 14px); line-height: 1.6;
  color: var(--c-ink); margin: 0; max-width: 50ch;
}
.k2-case__link {
  pointer-events: auto; align-self: flex-start; margin-top: 4px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink); text-decoration: none; border-bottom: 1px solid rgba(226,0,122,.4);
}
.k2-case__link:hover { color: var(--c-pink); }

@media (max-width: 700px) {
  .k2-section--case-split { grid-template-columns: 1fr; }
  .k2-case__col-media { min-height: 200px; }
}

/* ── P6 Contact : parcours 4 étapes + icônes (repris archive) ── */
.k2-section--path {
  width: min(92vw, 1200px); max-width: min(92vw, 1200px); gap: clamp(20px, 2.4vw, 34px);
  top: 40%;                              /* remonté pour passer AU-DESSUS du drapeau du pic */
}
.k2-path-steps {
  list-style: none; margin: 0; padding: 22px clamp(18px, 3vw, 34px); width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px);
  background: rgba(241, 236, 221, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 3px; pointer-events: auto;
}
.k2-path-steps li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  padding-top: 16px; border-top: 1px solid var(--c-line); position: relative;
}
.k2-path-steps li::before {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink);
}
.k2-path__icon { color: var(--c-pink); }
.k2-path__icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.k2-path__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--c-pink); }
.k2-path__lbl { font-family: var(--f-serif); font-size: clamp(15px, 1.5vw, 22px); color: var(--c-ink); line-height: 1.12; }
.k2-path__m { font-family: var(--f-mono); font-size: 11px; color: var(--c-slate); line-height: 1.4; }

/* ── Responsive sections refondues ── */
@media (max-width: 960px) {
  .k2-section--split { grid-template-columns: 1fr; }
  .k2-split__media { min-height: 220px; }
  .k2-brands { grid-template-columns: repeat(3, 1fr); }
  .k2-path-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .k2-words li { font-size: clamp(22px, 9vw, 40px); }
  .k2-words li:hover { transform: none; }
  .k2-brands { grid-template-columns: repeat(2, 1fr); }
  .k2-path-steps { grid-template-columns: 1fr; }
  .k2-split__media { display: none; }
  /* Mobile : pas assez de largeur → on masque l'altimètre / la bande HUD */
  .ruler, .alti, .ruler-nav { display: none; }
}

.debug {
  display: none;     /* panneau debug masqué (dev only) */
  position: fixed; top: 24px; left: 24px; z-index: 90;
  flex-direction: column; gap: 4px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--c-ink);
  background: rgba(241,236,221,.92);
  border: 1px solid rgba(28,28,26,.15);
  padding: 10px 14px;
}

/* ── Mini-éditeur de positions X/Y (dev) — discret, bas-gauche ──
   MASQUÉ pour l'instant (code conservé). Pour le RÉAFFICHER : remettre
   `display: flex` à la place de `display: none` ci-dessous. */
.kx-editor {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 120;
  width: 230px;
  display: none; /* flex pour réafficher */ flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: rgba(28,28,26,.82);
  border: 1px solid rgba(226,0,122,.45);
  border-radius: 6px;
  font-family: var(--f-mono); font-size: 11px; color: #F1ECDD;
  pointer-events: auto;
  backdrop-filter: blur(4px);
}
.kx-editor__head {
  display: flex; justify-content: space-between; align-items: baseline;
  letter-spacing: .04em;
}
.kx-editor__head strong { font-weight: 600; }
.kx-editor__head #kxLabel { color: var(--c-pink); }
.kx-row {
  display: grid;
  grid-template-columns: 14px 1fr 48px;
  align-items: center; gap: 6px;
}
.kx-row > span { color: var(--c-pink); font-weight: 600; }
.kx-row input[type="range"] { width: 100%; accent-color: var(--c-pink); }
.kx-row input[type="number"] {
  width: 48px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: 3px;
  color: #F1ECDD; font-family: var(--f-mono); font-size: 11px;
  padding: 2px 4px;
}
.kx-copy {
  margin-top: 2px;
  background: var(--c-pink); color: #fff; border: none; border-radius: 4px;
  padding: 5px 8px; font-family: var(--f-mono); font-size: 11px;
  cursor: pointer; letter-spacing: .04em;
}
.kx-copy:hover { filter: brightness(1.1); }
.kx-editor.is-disabled { opacity: .45; }
.kx-editor.is-disabled input,
.kx-editor.is-disabled .kx-copy { pointer-events: none; }

/* ============================================================
   CONTENU PAGE
   ============================================================ */
main { position: relative; z-index: 1; }

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.hero__content {
  position: relative; z-index: 2;
  max-width: 1600px; margin: 0 auto;
  padding: 120px clamp(20px, 5vw, 80px) 200px;
  display: flex; flex-direction: column; gap: 28px;
  pointer-events: none;
}
.hero__pre {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-slate);
}
/* HERO BLOC PLANTÉ SUR LE SOMMET ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Le coin bas-droit du bloc est calé sur la pointe du K2.
   Le bloc se déploie naturellement vers le haut et vers la gauche.
   Géométrie : sommet à (966.11, 10.03) dans viewBox 1869.56×861.24 ;
   plan-04 occupe 75vw centré, ancré bottom: 0.
   → X pic = calc(50% + 1.26vw) (depuis la gauche)
   → Y pic depuis le bas du viewport ≈ 34.15vw
   → Donc bord droit du bloc à right: calc(50% - 1.26vw)
   text-align: right + align-items: flex-end ⇒ le "." final tombe pile
   sur le pic à toute résolution (calc + vw = invariant).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero__plant {
  position: fixed;
  left: 50%;                         /* centré horizontalement par rapport à l'écran */
  transform: translateX(-50%);
  bottom: calc(34.15vw + 42px);      /* au-dessus du sommet du K2 (remonté) */
  z-index: 2;                        /* DERRIÈRE la K2 héros (z=4) — la montagne couvre les textes */
  pointer-events: none;
  text-align: center;
  max-width: min(90vw, 880px);
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;               /* tout centré */
  gap: 8px;
  margin: 0;
}
/* Titre hero "Tracer la voie" — Playfair Display italique */
.hero__title-main {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;                          /* semi-bold, plus fin que 700 */
  color: var(--c-pink);
  font-size: clamp(40px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
/* Sous-titre "pour mener vos projets au sommet." — JetBrains Mono uppercase */
.hero__title-sub {
  display: inline-block;
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 500;
  color: var(--c-ink);
  font-size: clamp(13px, 1.6vw, 22px);       /* mono = dense, taille réduite */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
/* Mot "sommet." en rose K2 — le point final est l'ancre géométrique */
.hero__summit { color: var(--c-pink); }

/* Apparition initiale des textes après préloader : opacity + translateY seuls
   (PAS transform complet : sinon GSAP scrub se ferait écraser par la transition CSS
   et créerait un effet élastique sur les sorties au scroll) */
.is-ready .hero__title-main { transition: opacity .9s var(--ease-smooth) .2s; opacity: 1; transform: none; }
.is-ready .hero__title-sub  { transition: opacity .9s var(--ease-smooth) .5s; opacity: 1; transform: none; }
/* BASELINE ALIGNÉE SUR LE PIC, juste sous "sommet." ━━━━━━━━━━━━━━━
   position: fixed pour pouvoir caler X (sur le pic) ET Y (juste sous
   le sous-titre, donc juste sous le bas du mot "sommet.").
   right: calc(50% - 1.26vw) ⇒ bord droit du bloc = pic
   top: calc(100vh - 34.15vw + 10px) ⇒ juste sous la ligne où
   tombe le point final du mot "sommet."
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero__baseline {
  display: none;     /* baseline "K2 — Second sommet du monde" masquée */
  position: fixed;
  right: calc(50% - 1.26vw);
  top: calc(100vh - 34.15vw + 10px);
  margin: 0;
  flex-direction: column; gap: 4px; align-items: flex-end;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-slate);
  text-align: right;
  border-top: 1px solid rgba(28,28,26,.2); padding-top: 18px;
  max-width: min(60vw, 540px);
  z-index: 20;
  pointer-events: none;
  opacity: 0; transform: translateY(20px);
  will-change: opacity, transform;
}
.is-ready .hero__baseline {
  transition: opacity .8s var(--ease-smooth) .8s, transform .8s var(--ease-smooth) .8s;
  opacity: 1; transform: translateY(0);
}
.is-ready .hero__baseline { transition: opacity .8s var(--ease-smooth) .8s, transform .8s var(--ease-smooth) .8s; opacity: 1; transform: translateY(0); }
@media (max-width: 700px) {
  .hero__plant { max-width: 80vw; }
  .hero__title-main { white-space: normal; }
  .hero__title-sub  { white-space: normal; }
}

/* Climb — paliers vides en mode debug : cadres pointillés */
.climb {
  position: relative;
  display: flex; flex-direction: column; gap: 60vh;
  padding: 30vh 5vw 60vh;
}
.climb__step {
  position: relative;
  min-height: 220px;
  max-width: 600px;
  margin: 0 auto;
  border: 1px dashed rgba(28,28,26,.3);
}
.climb__step::before {
  content: attr(id);
  position: absolute; top: 8px; left: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: rgba(28,28,26,.6);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .hero__title-main, .hero__title-sub, .hero__baseline { opacity: 1; transform: none; }
  .k2-topo path, .preloader__k2 img { stroke-dashoffset: 0; clip-path: none; }
}