/* ═══════════════════════════════════════════
   COLLECTIF COBALT — Shared Styles v3
═══════════════════════════════════════════ */

/* ── Masquer la scrollbar (scroll conservé) ── */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none !important; width: 0 !important; }
:root {
  --cream:  #F3EFD7;
  --noir:   #1A1A1A;
  --bleu:   #4A82DC;
  --jaune:  #F1CB4F;
  --vert:   #5DA16B;
  --rouge:  #BB3B34;
  --muted:  #888;
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   32px;
  --r-pill: 999px;
  --glass-light: rgba(255,255,255,0.18);
  --glass-dark:  rgba(26,26,26,0.25);
  --glass-cream: rgba(243,239,215,0.15);
  --blur: blur(18px);
  --shadow: 0 8px 32px rgba(26,26,26,0.10);
  --shadow-lg: 0 20px 60px rgba(26,26,26,0.16);
  /* Suisse BP Int'l : ajouter @font-face avec les fichiers woff2 quand disponibles */
  --f-display: 'Suisse BP Int\'l', 'DM Sans', sans-serif;
  --f-serif:   'Instrument Serif', serif;
  --f-body:    'Suisse BP Int\'l', 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-body); background: var(--cream); color: var(--noir); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

/* ── SKIP LINK (a11y) ── */
.skip-link {
  position: fixed; top: -100%; left: 16px; z-index: 10000;
  background: var(--bleu); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 0 0 8px 8px;
  transition: top .2s ease;
  text-decoration: none;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; cursor: auto; }
button, input, textarea { font-family: var(--f-body); }

/* ── FOCUS VISIBLE — accessibilité clavier ── */
:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Pills et boutons : ring plus arrondi */
.btn:focus-visible,
.btn-dark:focus-visible,
.btn-cream:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.ch-submit:focus-visible,
.ch-subject-btn:focus-visible,
.ch-pill-btn:focus-visible,
.lg-strip-link:focus-visible,
.nav-burger-btn:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 4px;
  border-radius: 999px;
}
/* Sur fond sombre (overlay) */
.lg-strip-link:focus-visible,
.lg-close-btn:focus-visible,
.lg-overlay-back:focus-visible {
  outline-color: rgba(74,130,220,.90);
}
/* Inputs */
.ch-input:focus-visible,
.ch-ta:focus-visible {
  outline: none; /* déjà géré via border-color bleu */
}
/* cursor:none uniquement sur souris précise — préserve l'accessibilité */
@media (pointer: fine) {
  html, body, a, button, input, textarea { cursor: none; }
}
img { display: block; width: 100%; }

/* ── CURSOR ── */
#cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bleu); transform: translate(-50%,-50%);
  pointer-events: none; transition: background .15s, transform .1s;
}
#cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(74,130,220,.5); transform: translate(-50%,-50%);
  pointer-events: none;
  transition: width .22s, height .22s, border-color .15s;
}
/* Taille au hover — couleur gérée par JS selon le fond */
body.hov #cursor-ring { width: 54px; height: 54px; }

/* ── COLOR STRIPE ── */
.stripe { display: none; }

/* ── NAV ENTRANCE — keyframes ── */
@keyframes navSlideIn {
  from { opacity: 0; transform: translateY(-20px) scaleX(0.88); }
  to   { opacity: 1; transform: translateY(0)     scaleX(1); }
}
@keyframes pillPop {
  from { opacity: 0; transform: scale(0.68) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── NAV (inner pages) — pilules flottantes ── */
body > nav {
  position: fixed; top: 20px; left: 20px; right: 20px; z-index: 500;
  background: rgba(243,239,215,0.20);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px; height: auto; overflow: visible;
  pointer-events: none;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
  animation: navSlideIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.05s both;
}
body > nav::after { display: none; }

/* Scrollé — la jonction disparaît, seules les pilules restent */
body > nav.nav-scrolled {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── PILULE CONTEXTUELLE RETOUR (sous-pages) ── */
.nav-back-pill {
  pointer-events: all;
  display: flex; align-items: center; gap: 6px;
  background: rgba(243,239,215,0.85);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 9px 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  font-family: var(--f-body); font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--noir); text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s, background .2s, border-color .2s;
  animation: pillPop 0.48s cubic-bezier(0.34,1.56,0.64,1) 0.10s both;
}
.nav-back-pill:hover { opacity: .8; }
.nav-back-pill svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Teinture accent selon l'environnement parent */
.nav-back-pill[data-env="e1"] {
  background: rgba(74,130,220,0.14);
  border-color: rgba(74,130,220,0.35);
  color: #1A4A99;
}
.nav-back-pill[data-env="e2"] {
  background: rgba(93,161,107,0.14);
  border-color: rgba(93,161,107,0.35);
  color: #2B6B38;
}
.nav-back-pill[data-env="e3"] {
  background: rgba(241,203,79,0.18);
  border-color: rgba(241,203,79,0.45);
  color: #7A5500;
}
.nav-back-pill[data-env="e4"] {
  background: rgba(187,59,52,0.12);
  border-color: rgba(187,59,52,0.30);
  color: #991E18;
}
.nav-back-pill[data-env="e0"] {
  background: rgba(26,26,26,0.08);
  border-color: rgba(26,26,26,0.20);
  color: var(--noir);
}

/* ── SUBNAV IN-NAV — liens contextuels dans le fond verre de la nav ── */
.nav-subnav {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0;
  pointer-events: all;
  overflow: hidden;
  transition: opacity 0.25s ease;
}
.nav-subnav.is-hidden {
  opacity: 0; pointer-events: none;
}
.nav-subnav a {
  font-family: var(--f-body); font-size: .60rem; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: rgba(26,26,26,.46); text-decoration: none;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-subnav a:hover { color: var(--noir); background: rgba(26,26,26,.07); }
.nav-subnav a.is-current { color: var(--noir); font-weight: 700; }
.nav-subnav[data-env="e1"] a.is-current { color: #1A4A99; background: rgba(74,130,220,.10); }
.nav-subnav[data-env="e2"] a.is-current { color: #2B6B38; background: rgba(93,161,107,.10); }
.nav-subnav[data-env="e3"] a.is-current { color: #7A5500; background: rgba(241,203,79,.18); }
.nav-subnav[data-env="e4"] a.is-current { color: #991E18; background: rgba(187,59,52,.09); }
.nav-subnav-sep { width: 1px; height: 12px; background: rgba(26,26,26,.14); flex-shrink: 0; margin: 0 1px; }
@media (max-width: 680px) {
  .nav-subnav { display: none; }
}

/* ── PILULE LOGO ── */
.nav-logo {
  pointer-events: all;
  display: flex; align-items: center;
  background: rgba(243,239,215,0.85);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 9px 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  line-height: 1;
  transition: opacity .2s;
  animation: pillPop 0.48s cubic-bezier(0.34,1.56,0.64,1) 0.20s both;
}
.nav-logo:hover { opacity: .8; }
.nav-logo-img { height: 20px; width: auto; display: block; }

/* ── PILULE BURGER ── */
.nav-burger-btn {
  pointer-events: all;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; cursor: none;
  background: rgba(243,239,215,0.85);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 9px 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  width: auto; height: auto; position: relative;
  transition: opacity .2s;
  animation: pillPop 0.48s cubic-bezier(0.34,1.56,0.64,1) 0.34s both;
}
.nav-burger-btn::before { display: none; }
.nav-burger-btn:hover { opacity: .8; }
.nav-burger-btn.open  { opacity: .9; }

/* ── DOT D'ENVIRONNEMENT sur la pill burger ── */
.nav-burger-btn::after {
  content: '';
  position: absolute; bottom: 7px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
/* Couleur selon l'env de la page courante (data-env sur body > nav) */
body > nav[data-env="e0"] .nav-burger-btn::after { background: rgba(255,255,255,0.7); }
body > nav[data-env="e1"] .nav-burger-btn::after { background: #4A82DC; box-shadow: 0 0 6px rgba(74,130,220,.6); }
body > nav[data-env="e2"] .nav-burger-btn::after { background: #5DA16B; box-shadow: 0 0 6px rgba(93,161,107,.6); }
body > nav[data-env="e3"] .nav-burger-btn::after { background: #F1CB4F; box-shadow: 0 0 6px rgba(241,203,79,.5); }
body > nav[data-env="e4"] .nav-burger-btn::after { background: #BB3B34; box-shadow: 0 0 6px rgba(187,59,52,.6); }

/* Lignes */
.nav-burger-btn span {
  display: block; height: 1.5px;
  transition: transform .38s cubic-bezier(.76,0,.24,1),
              opacity .22s ease,
              width .28s cubic-bezier(.76,0,.24,1);
}
/* 4 lignes = 4 univers — largeur décroissante */
.nav-burger-btn span:nth-child(1) { background: #4A82DC; width: 22px; } /* Le Studio   */
.nav-burger-btn span:nth-child(2) { background: #5DA16B; width: 17px; } /* L'Atelier   */
.nav-burger-btn span:nth-child(3) { background: #F1CB4F; width: 13px; } /* Bleu Cobalt */
.nav-burger-btn span:nth-child(4) { background: #BB3B34; width:  9px; } /* Le Média    */

/* Stagger fermeture — délai décalé pour la réapparition */
.nav-burger-btn span:nth-child(1) { transition-delay: .00s; }
.nav-burger-btn span:nth-child(2) { transition-delay: .04s; }
.nav-burger-btn span:nth-child(3) { transition-delay: .08s; }
.nav-burger-btn span:nth-child(4) { transition-delay: .12s; }

/* Animation X — lignes 1 & 4 se croisent, 2 & 3 s'effacent */
.nav-burger-btn.open span:nth-child(1) { transform: translateY(9.75px) rotate(45deg); width: 22px; transition-delay: .00s; }
.nav-burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); transition-delay: .00s; }
.nav-burger-btn.open span:nth-child(3) { opacity: 0; transform: scaleX(0); transition-delay: .00s; }
.nav-burger-btn.open span:nth-child(4) { transform: translateY(-9.75px) rotate(-45deg); width: 22px; transition-delay: .06s; }

/* ══════════════════════════════════════════
   NAV OVERLAY — style bandes éditoriales
══════════════════════════════════════════ */
#lg-overlay {
  position: fixed; inset: 0; z-index: 510;
  background: #0d0d16;
  transform: translateY(-100%);
  transition: transform .55s cubic-bezier(.76,0,.24,1);
  display: flex; flex-direction: column;
}
#lg-overlay.open { transform: translateY(0); }

.lg-header {
  height: 76px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lg-logo { display: flex; align-items: center; }
/* Bouton fermer dans l'overlay */
.lg-close-btn {
  width: 44px; height: 44px; background: none; border: none; cursor: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45); font-size: 22px; font-weight: 300;
  letter-spacing: 0; transition: color .2s, background .2s;
  border-radius: 50%; position: relative;
}
.lg-close-btn:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); }
.lg-esc {
  font-size: 15px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.22);
}

/* ── Conteneur bandes ── */
.lg-strips {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Bande individuelle ── */
.lg-strip {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  cursor: none;
  /* Entrée animée */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s cubic-bezier(.25,.46,.45,.94),
              transform .4s cubic-bezier(.25,.46,.45,.94),
              background .28s ease;
}

/* Zone principale cliquable */
.lg-strip-primary {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 24px 0 32px;
  text-decoration: none;
  color: inherit;
}

/* Sous-liens — pills alignées à droite */
.lg-strip-links {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.07);
}
.lg-strip-link {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.20);
  background: transparent;
  font-size: 13px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255,255,255,.50);
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
  text-decoration: none;
  position: relative; z-index: 2;
}
.lg-strip-link:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
/* Pills colorées par env au hover (bouton lui-même) */
.lg-strip.e0 .lg-strip-link:hover { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.50); }
.lg-strip.e1 .lg-strip-link:hover { color: #4A82DC; background: rgba(74,130,220,.14); border-color: rgba(74,130,220,.65); }
.lg-strip.e2 .lg-strip-link:hover { color: #5DA16B; background: rgba(93,161,107,.12); border-color: rgba(93,161,107,.55); }
.lg-strip.e3 .lg-strip-link:hover { color: #F1CB4F; background: rgba(241,203,79,.12); border-color: rgba(241,203,79,.50); }
.lg-strip.e4 .lg-strip-link:hover { color: #BB3B34; background: rgba(187,59,52,.12); border-color: rgba(187,59,52,.55); }
.lg-strip:last-child { border-bottom: none; }
#lg-overlay.open .lg-strip { opacity: 1; transform: translateY(0); }
#lg-overlay.open .lg-strip:nth-child(1) { transition-delay: .06s; }
#lg-overlay.open .lg-strip:nth-child(2) { transition-delay: .11s; }
#lg-overlay.open .lg-strip:nth-child(3) { transition-delay: .16s; }
#lg-overlay.open .lg-strip:nth-child(4) { transition-delay: .21s; }
#lg-overlay.open .lg-strip:nth-child(5) { transition-delay: .26s; }

/* Tint de base subtil par env */
.e0 { background: rgba(255,255,255,.02); }
.e1 { background: rgba(74,130,220,.03); }
.e2 { background: rgba(93,161,107,.03); }
.e3 { background: rgba(241,203,79,.025); }
.e4 { background: rgba(187,59,52,.03); }

/* Barre colorée gauche */
.lg-strip::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  opacity: .5;
  transition: opacity .28s, width .28s, box-shadow .3s;
}
.lg-strip:hover::before { opacity: 1; width: 4px; }
.e0::before { background: rgba(255,255,255,.70); }
.e1::before { background: var(--bleu); }
.e2::before { background: var(--vert); }
.e3::before { background: var(--jaune); }
.e4::before { background: var(--rouge); }

/* ── STRIP BIENTÔT — non-cliquable, atténué ── */
.lg-strip.soon { opacity: 1; cursor: default; }
.lg-strip.soon .lg-strip-primary { pointer-events: none; cursor: default; }
.lg-strip.soon .lg-strip-name { color: rgba(255,255,255,.25); }
.lg-strip.soon .lg-strip-sub { color: rgba(255,255,255,.14); }
.lg-strip.soon .lg-strip-num { color: rgba(255,255,255,.12); }
.lg-strip.soon::before { opacity: .2; }
.lg-strip.soon:hover { background: inherit !important; }
.lg-strip.soon:hover .lg-strip-name { color: rgba(255,255,255,.25) !important; }
.lg-strip.soon:hover .lg-strip-num  { color: rgba(255,255,255,.12) !important; }
.lg-strip.soon:hover::before { opacity: .2 !important; box-shadow: none !important; }
.lg-strip.soon:hover .lg-strip-ghost { color: transparent !important; transform: translateY(-50%) !important; }
.lg-strip-soon-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 6px 16px;
  flex-shrink: 0; margin-right: 32px;
}

/* Numéro */
.lg-strip-num {
  font-size: 14px; font-weight: 700; letter-spacing: .20em;
  color: rgba(255,255,255,.25);
  width: 58px; flex-shrink: 0;
  transition: color .25s;
}
.lg-strip:hover .lg-strip-num { color: rgba(255,255,255,.45); }

/* Corps */
.lg-strip-body { flex: 1; padding: 0 24px; }

.lg-strip-name {
  font-family: var(--f-display);
  font-size: clamp(42px, 6vw, 80px);
  letter-spacing: -.03em; line-height: 1;
  color: rgba(255,255,255,.80);
  transition: color .25s;
}
.lg-strip:hover .lg-strip-name { color: rgba(255,255,255,1); }

.lg-strip-sub {
  font-size: 16px; font-weight: 400; letter-spacing: .06em;
  color: rgba(255,255,255,.32);
  margin-top: 7px;
  transition: color .25s;
}
.lg-strip:hover .lg-strip-sub { color: rgba(255,255,255,.55); }
.e1:hover .lg-strip-sub { color: rgba(74,130,220,.75); }
.e2:hover .lg-strip-sub { color: rgba(93,161,107,.75); }
.e3:hover .lg-strip-sub { color: rgba(241,203,79,.70); }
.e4:hover .lg-strip-sub { color: rgba(187,59,52,.75); }


/* Flèche masquée */
.lg-strip-arrow { display: none; }

/* Hover : tint coloré visible par env */
.e0:hover { background: rgba(255,255,255,.07); }
.e1:hover { background: rgba(74,130,220,.14); }
.e2:hover { background: rgba(93,161,107,.13); }
.e3:hover { background: rgba(241,203,79,.11); }
.e4:hover { background: rgba(187,59,52,.13); }

/* Nom → couleur env au hover */
.e0:hover .lg-strip-name { color: #ffffff; }
.e1:hover .lg-strip-name { color: #4A82DC; }
.e2:hover .lg-strip-name { color: #5DA16B; }
.e3:hover .lg-strip-name { color: #F1CB4F; }
.e4:hover .lg-strip-name { color: #BB3B34; }

/* Numéro → couleur env au hover */
.e0:hover .lg-strip-num { color: rgba(255,255,255,.65); }
.e1:hover .lg-strip-num { color: rgba(74,130,220,.75); }
.e2:hover .lg-strip-num { color: rgba(93,161,107,.75); }
.e3:hover .lg-strip-num { color: rgba(241,203,79,.75); }
.e4:hover .lg-strip-num { color: rgba(187,59,52,.75); }


/* Pills colorées dès que le strip est hovéré (spécificité 0,3,0 pour passer après .active) */
.lg-strip.e0:hover .lg-strip-link { color: rgba(255,255,255,.80); border-color: rgba(255,255,255,.45); }
.lg-strip.e1:hover .lg-strip-link { color: #4A82DC; border-color: rgba(74,130,220,.60); }
.lg-strip.e2:hover .lg-strip-link { color: #5DA16B; border-color: rgba(93,161,107,.60); }
.lg-strip.e3:hover .lg-strip-link { color: #F1CB4F; border-color: rgba(241,203,79,.55); }
.lg-strip.e4:hover .lg-strip-link { color: #BB3B34; border-color: rgba(187,59,52,.60); }

/* Sous-titre → plus lisible au hover */
.e0:hover .lg-strip-sub { color: rgba(255,255,255,.50); }
.e1:hover .lg-strip-sub { color: rgba(74,130,220,.55); }
.e2:hover .lg-strip-sub { color: rgba(93,161,107,.55); }
.e3:hover .lg-strip-sub { color: rgba(241,203,79,.50); }
.e4:hover .lg-strip-sub { color: rgba(187,59,52,.55); }

/* Strip actif — aucun style particulier, toutes les bandes identiques au repos */

/* Grand nombre fantôme en fond — teinté par env au repos */
.lg-strip-ghost {
  position: absolute; right: 80px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 800; letter-spacing: -.06em;
  pointer-events: none; user-select: none;
  transition: color .45s ease, transform .45s cubic-bezier(.25,.46,.45,.94);
  line-height: 1;
}
/* Ghost masqué */
.lg-strip-ghost { display: none; }

/* Glow coloré sur la barre gauche au hover */
.e0:hover::before { box-shadow: 2px 0 20px rgba(255,255,255,.35), 0 0 8px rgba(255,255,255,.18); }
.e1:hover::before { box-shadow: 2px 0 20px rgba(74,130,220,.55), 0 0 8px rgba(74,130,220,.3); }
.e2:hover::before { box-shadow: 2px 0 20px rgba(93,161,107,.55), 0 0 8px rgba(93,161,107,.3); }
.e3:hover::before { box-shadow: 2px 0 20px rgba(241,203,79,.50), 0 0 8px rgba(241,203,79,.28); }
.e4:hover::before { box-shadow: 2px 0 20px rgba(187,59,52,.55), 0 0 8px rgba(187,59,52,.3); }

/* Footer de l'overlay */
.lg-overlay-footer {
  height: 66px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  border-top: 1px solid rgba(255,255,255,.07);
}
/* C — Retour dans l'overlay */
.lg-overlay-back {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 10px 20px;
  cursor: none; color: rgba(255,255,255,.45);
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: color .2s, border-color .2s;
}
.lg-overlay-back:hover { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.40); }
.lg-footer-contact {
  font-size: 15px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
  transition: color .2s;
}
.lg-footer-contact:hover { color: rgba(255,255,255,.90); }
.lg-footer-socials { display: flex; gap: 26px; }
.lg-footer-socials a {
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.22);
  transition: color .2s;
}
.lg-footer-socials a:hover { color: rgba(255,255,255,.70); }

/* Héritage — sécurité */
.lc-bg, .lc-orb, .lc-glass, .lc-spec, .lc-iris, .lc-rim,
.lc-dot, .lc-ghost, .lc-content, .lg-amb, .lg-ambient { display: none !important; }

/* ── SCROLL REVEAL ── */
.sr { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
.sr.in { opacity: 1; transform: translateY(0); }
.sr-d1 { transition-delay: .1s; } .sr-d2 { transition-delay: .2s; }
.sr-d3 { transition-delay: .3s; } .sr-d4 { transition-delay: .4s; }

/* ── WORD REVEAL — clip-mask slide up (h1 + gros h2) ── */
.rw-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em; /* évite le clip sur les descendantes (j, g, p…) */
  margin-bottom: -0.12em; /* compense pour ne pas changer le line-height parent */
}
.rw-word-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.rw-word.in .rw-word-inner {
  transform: translateY(0);
}
/* Préserve l'italic sur les em enfants */
.rw-word em { font-style: italic; }

/* ── SECTION LABEL ── */
.s-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bleu);
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.s-label::before { content: ''; width: 24px; height: 2px; background: currentColor; }
.s-label.on-dark { color: rgba(240,235,216,.35); }
.s-label.on-dark::before { background: rgba(240,235,216,.35); }
.s-label.on-color { color: rgba(26,26,26,.45); }
.s-label.on-color::before { background: rgba(26,26,26,.4); }

/* ── SECTION BASE ── */
.section { padding: 100px 44px; }

/* ── BUTTONS ── */
/* ══════════════════════════════════════════
   BUTTONS — Liquid Glass
══════════════════════════════════════════ */
.btn {
  position: relative; overflow: hidden; display: inline-flex;
  align-items: center; padding: 14px 36px;
  border-radius: var(--r-pill); border: none;
  font-family: var(--f-body); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow .25s ease, background .25s ease;
  cursor: none;
}

/* Couche blur — appliquée derrière le texte */
.btn::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(18px) url('#cobalt-glass');
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.btn span { position: relative; z-index: 1; }

.btn:hover  { transform: scale(1.04); }
.btn:active { transform: scale(0.97); transition-duration: .1s; }

/* ── Solid clair — sur fonds sombres / colorés ── */
.btn-cream {
  background: var(--cream);
  color: var(--noir);
  border: 1.5px solid var(--cream);
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
.btn-cream:hover {
  background: #fffef5;
  color: var(--noir);
  border-color: #fffef5;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
}

/* ── Solid sombre — sur fond crème ── */
.btn-dark {
  background: var(--noir);
  color: var(--cream);
  border: 1.5px solid var(--noir);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.btn-dark:hover {
  background: #2e2e2e;
  color: var(--cream);
  border-color: #2e2e2e;
  box-shadow: 0 4px 16px rgba(0,0,0,0.24);
}

/* ── Bouton primary — couleur accent pleine ── */
.btn.btn-primary {
  background: color-mix(in srgb, var(--accent, var(--bleu)) 90%, rgba(0,0,0,0.12));
  border-color: color-mix(in srgb, var(--accent, var(--bleu)) 95%, transparent);
  color: var(--cream);
  box-shadow: 0 3px 16px color-mix(in srgb, var(--accent, var(--bleu)) 40%, rgba(0,0,0,0.14));
}
.btn.btn-primary:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--accent, var(--bleu)) 100%, rgba(0,0,0,0.08));
  box-shadow: 0 5px 22px color-mix(in srgb, var(--accent, var(--bleu)) 50%, rgba(0,0,0,0.16));
}

/* ── Outline — bouton secondaire sur fond crème ── */
.btn-outline {
  background: transparent;
  color: var(--noir);
  border: 1.5px solid rgba(26,26,26,0.78);
}
.btn-outline:hover {
  background: rgba(26,26,26,0.07);
  border-color: var(--noir);
  color: var(--noir);
}

/* ── MARQUEE ── */
.marquee-wrap {
  background: var(--noir); height: 52px; overflow: hidden;
  display: flex; align-items: center;
}
.marquee-track { display: flex; white-space: nowrap; animation: marquee 32s linear infinite; }
.marquee-item {
  display: flex; align-items: center; gap: 28px; padding: 0 28px;
  font-family: var(--f-body); font-weight: 800;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(240,235,216,.4);
}
.marquee-item .hi { color: var(--bleu); }
.marquee-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(240,235,216,.15); flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── FOOTER ── */
footer { background: var(--noir); position: relative; overflow: hidden; }
.footer-silhouette { position: absolute; bottom: -10px; right: -60px; pointer-events: none; }
.footer-stripe { height: 4px; background: linear-gradient(90deg, var(--bleu) 25%, var(--jaune) 25% 50%, var(--vert) 50% 75%, var(--rouge) 75%); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1.05fr 1fr 0.85fr; gap: 40px; padding: 72px 44px 56px; position: relative; z-index: 1; }
.footer-logo { font-family: var(--f-body); font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; color: var(--cream); line-height: .9; margin-bottom: 16px; }
.footer-logo .dot { color: var(--bleu); }
.footer-tagline { font-family: var(--f-serif); font-style: italic; font-size: .9rem; color: rgba(240,235,216,.35); line-height: 1.6; margin-bottom: 24px; }
.footer-socials { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-socials a { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(240,235,216,.2); transition: color .15s; }
.footer-socials a:hover { color: var(--bleu); }
.footer-col-title { font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,235,216,.2); margin-bottom: 24px; }
.footer-nav { display: flex; flex-direction: column; gap: 14px; }
.footer-nav a { font-size: .88rem; font-weight: 300; color: rgba(240,235,216,.4); transition: color .15s; }
.footer-nav a:hover { color: var(--cream); }
.footer-contact-item { margin-bottom: 20px; }
.footer-contact-name { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,235,216,.2); margin-bottom: 4px; }
.footer-contact-email { font-size: .88rem; font-weight: 300; color: rgba(240,235,216,.4); transition: color .15s; display: block; }
.footer-contact-email:hover { color: var(--bleu); }
.footer-bottom { padding: 20px 44px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(240,235,216,.06); position: relative; z-index: 1; }
.footer-copy { font-size: .62rem; font-weight: 300; color: rgba(240,235,216,.2); letter-spacing: .06em; }
.footer-legal { font-size: .62rem; font-weight: 300; color: rgba(240,235,216,.12); font-style: italic; }

/* ── RESPONSIVE GRID CARDS (mobile) ── */
@media (max-width: 680px) {
  .lg-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); gap: 8px; padding: 8px; }
  .lg-card { border-radius: 14px; }
  .lc-ghost { font-size: 42px; }
  .lc-desc { display: none; }
}

/* ── TACTILE : désactive le curseur custom ── */
@media (hover: none), (pointer: coarse) {
  html, body, a, button, input, textarea { cursor: auto; }
  #cursor-dot, #cursor-ring { display: none !important; }
  /* annule les hovers qui sinon "collent" au tap */
  .feat-card:hover img,
  .proj-card:hover .proj-img img,
  .hero-photo:hover img { transform: none; }
  .feat-card-title, .proj-title { opacity: 1; transform: none; }
}

/* ── RESPONSIVE TABLETTE PAYSAGE / PETIT DESKTOP (≤1100px) ── */
@media (max-width: 1100px) {
  .section { padding: 84px 28px; }
  .footer-top { grid-template-columns: repeat(3, 1fr); padding: 64px 28px 48px; gap: 40px; }
  .footer-bottom { padding: 20px 28px; }
}

/* ── MOBILE : bar de jonction supprimée, pills flottent librement ── */
@media (max-width: 768px) {
  body > nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* ── ACCORDÉON OVERLAY MOBILE — sous-liens en chips ── */
.lg-strip-chips {
  display: none; /* caché par défaut, affiché par JS sur mobile */
  flex-wrap: wrap; gap: 5px;
  padding: 6px 32px 10px 86px; /* aligné avec le corps du strip */
}
.lg-strip-chip {
  font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.50);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.lg-strip-chip:hover,
.lg-strip-chip:focus { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
/* Couleur env */
.e1 .lg-strip-chip:hover { color: var(--bleu);   border-color: rgba(74,130,220,.5); }
.e2 .lg-strip-chip:hover { color: var(--vert);   border-color: rgba(93,161,107,.5); }
.e3 .lg-strip-chip:hover { color: var(--jaune);  border-color: rgba(241,203,79,.5); }
.e4 .lg-strip-chip:hover { color: var(--rouge);  border-color: rgba(187,59,52,.5);  }

/* Chevron accordéon */
.lg-strip-chevron {
  display: none; /* affiché par JS sur mobile */
  margin-left: auto; flex-shrink: 0;
  color: rgba(255,255,255,.25); font-size: 14px;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.lg-strip.expanded .lg-strip-chevron { transform: rotate(90deg); }
.lg-strip.expanded .lg-strip-chips  { display: flex; }

/* ── RESPONSIVE TABLETTE / GRAND MOBILE (≤960px) ── */
@media (max-width: 960px) {
  body > nav { padding: 0 16px; height: 54px; }
  .section { padding: 64px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding: 52px 20px 40px; }
  .footer-logo { font-size: 2.2rem; }
  .footer-bottom { flex-direction: column; gap: 10px; padding: 20px; text-align: center; }
  .footer-legal { text-align: center; }
  .marquee-wrap { height: 44px; }
  .marquee-item { font-size: .68rem; gap: 22px; padding: 0 22px; }
}

/* ── RESPONSIVE MOBILE (≤560px) ── */
@media (max-width: 560px) {
  body > nav { padding: 0 14px; height: 50px; }
  /* Sur très petit écran : pill back = icône seule */
  .nav-back-label { display: none; }
  .nav-back-pill  { padding: 9px 11px; }
  .nav-logo { font-size: 1.35rem; }
  .section { padding: 52px 16px; }
  .btn { padding: 12px 26px; font-size: .68rem; letter-spacing: .08em; }
  .footer-top { padding: 44px 18px 32px; gap: 32px; }
  .footer-logo { font-size: 2rem; }
  .footer-tagline { font-size: .85rem; }
  .footer-col-title { margin-bottom: 16px; }
  .footer-nav { gap: 10px; }
  .footer-nav a, .footer-contact-email { font-size: .82rem; }
  .footer-bottom { padding: 16px; }
  .footer-silhouette { display: none; }
  .marquee-wrap { height: 40px; }
  .marquee-item { font-size: .62rem; gap: 18px; padding: 0 16px; }

  /* Overlay mobile */
  .lg-strip-primary { padding: 0 18px; }
  .lg-header { height: 56px; padding: 0 18px; }
  .lg-esc { display: none; }
  .lg-strip-ghost { display: none; }
  .lg-strip-links { display: none; }
  .lg-strip-body { padding: 0 10px; }
  .lg-strip-num { width: 36px; font-size: 8px; }
  .lg-strip-name { font-size: clamp(22px, 8vw, 32px); }
  .lg-strip-sub { font-size: 9px; margin-top: 3px; }
  .lg-overlay-footer { height: 52px; padding: 0 18px; }
  .lg-footer-contact { font-size: 12px; }
  .lg-footer-socials { gap: 14px; }
  .lg-footer-socials a { font-size: 12px; }
  .lg-overlay-back { font-size: 12px; padding: 8px 14px; }
}

/* ── OVERLAY TABLETTE (560px–960px) : pills réduites ── */
@media (max-width: 960px) and (min-width: 561px) {
  .lg-header { height: 62px; padding: 0 22px; }
  .lg-esc { font-size: 12px; }
  .lg-overlay-footer { height: 56px; padding: 0 22px; }
  .lg-footer-contact,
  .lg-footer-socials a,
  .lg-overlay-back { font-size: 13px; }
  .lg-strip-links { padding: 0 16px; gap: 6px; }
  .lg-strip-link { font-size: 10px; padding: 7px 13px; }
  .lg-strip-name { font-size: clamp(28px, 5vw, 52px); }
}

/* ── PAGE TRANSITION ── */
#page-transition {
  position: fixed; inset: 0; z-index: 9000;
  background: #F3EFD7;
  opacity: 0; pointer-events: none;
  transition: opacity .32s cubic-bezier(.76,0,.24,1);
}
#page-transition.fade-out { opacity: 1; pointer-events: all; }
body.page-entering #page-transition { opacity: 1; }
body.page-entering-done #page-transition { opacity: 0; }

/* ── FOOTER ADDRESS ── */
.footer-address {
  font-style: normal;
  font-size: .68rem; font-weight: 300;
  color: rgba(240,235,216,.28);
  letter-spacing: .06em;
  line-height: 1.7;
  margin-top: 10px;
}
.footer-address strong {
  color: rgba(240,235,216,.38);
  font-weight: 500;
}

/* ── SECTION SHAPES (formes décoratives dans sections cream) ── */
.section-shape {
  position: absolute;
  pointer-events: none;
  opacity: .055;
  z-index: 0;
}
.section-shape svg { width: 100%; height: auto; display: block; }
/* Les enfants directs d'une section avec formes restent au-dessus */
.has-shapes { position: relative; overflow: hidden; }
.has-shapes > *:not(.section-shape) { position: relative; z-index: 1; }

/* ── HERO SHAPES ENTRANCE + BREATHE ANIMATION ── */
@keyframes hsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shapeFloat {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0px); }
  50%       { transform: rotate(calc(var(--rot, 0deg) + 2deg)) translateY(-18px); }
}
.hs-wrap > div {
  animation:
    hsFadeIn  0.9s ease                 both,
    shapeFloat 8s  ease-in-out infinite;
}
.hs-wrap > div:nth-child(1) { animation-delay: 0.08s, 0.0s; }
.hs-wrap > div:nth-child(2) { animation-delay: 0.20s, 1.6s; }
.hs-wrap > div:nth-child(3) { animation-delay: 0.32s, 3.2s; }
.hs-wrap > div:nth-child(4) { animation-delay: 0.44s, 4.8s; }

.section-shape {
  animation: shapeFloat 11s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* ── BUTTON SHIMMER (btn-primary uniquement, injecté par JS) ── */
@keyframes btnShimmer {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
.btn-shimmer {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute; top: -20%; left: 0; width: 35%; height: 140%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.18) 60%,
    transparent 100%
  );
  animation: btnShimmer 3.4s ease-in-out infinite;
  animation-delay: 1.6s;
}

/* ── BUTTON SPECULAR HIGHLIGHT (suit la souris via --sx/--sy) ── */
.btn::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 30%),
    rgba(255,255,255,0.32) 0%,
    transparent 58%
  );
  pointer-events: none; z-index: 2;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.btn:hover::after { opacity: 1; }

/* ── BUTTON RIPPLE (au pointerdown) ── */
@keyframes rippleExpand {
  from { transform: scale(0); opacity: 0.50; }
  to   { transform: scale(5); opacity: 0; }
}
.btn-ripple {
  position: absolute; border-radius: 50%;
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.38);
  pointer-events: none; z-index: 3;
  animation: rippleExpand 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── HERO REVEAL ORCHESTRATED (labels, paragraphes, CTA) ── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-reveal {
  opacity: 0;
  animation: heroReveal 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 10000;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--bleu) 0%, #8BB8F0 50%, var(--bleu) 100%);
  background-size: 200% 100%;
  animation: progressShimmer 2.4s linear infinite;
  pointer-events: none;
  transform-origin: left center;
  transition: width 0.08s linear;
}
@keyframes progressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── CURSOR TRAIL PARTICLES ── */
.cursor-trail {
  position: fixed; pointer-events: none; z-index: 9990;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bleu);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: trailFade 0.55s ease-out forwards;
}
@keyframes trailFade {
  0%   { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.2); }
}

/* .hero-gradient-text désactivé — incompatible avec texte blanc sur fonds colorés */

/* ── COUNTER ANIMATION ── */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── MAGNETIC LINKS overlay nav ── */
.lg-strip-name {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── UNDERLINE MORPH — liens footer + inner pages ── */
.footer-nav a,
.lg-footer-link,
.nav-back-pill {
  position: relative;
}
.footer-nav a::after,
.lg-footer-link::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0%; height: 1px;
  background: currentColor;
  transition: width 0.30s cubic-bezier(0.34, 1.20, 0.64, 1);
}
.footer-nav a:hover::after,
.lg-footer-link:hover::after { width: 100%; }

/* ── MARQUEE HOVER RALENTI ── */
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

/* ── IMAGE PARALLAX IN-CARD (object-position bougé par JS via --py) ── */
.proj-card .proj-img img,
.feat-card .feat-img img,
.atelier-card .atelier-img img {
  object-position: center var(--py, 50%);
}

/* ── SECTION REVEAL (IntersectionObserver, injecté par JS) ── */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sr-el {
  opacity: 0;
}
.sr-el.sr-in {
  animation: revealUp 0.60s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

/* ── IMAGE ZOOM CLIP-PATH sur cartes projet ── */
.proj-card .proj-img,
.feat-card .feat-img,
.atelier-card .atelier-img {
  overflow: hidden;
}
.proj-card .proj-img img,
.feat-card .feat-img img,
.atelier-card .atelier-img img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              clip-path  0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  clip-path: inset(0% 0% 0% 0% round 0px);
  transform-origin: center center;
}
.proj-card:hover   .proj-img img,
.feat-card:hover   .feat-img img,
.atelier-card:hover .atelier-img img {
  transform: scale(1.07);
  clip-path: inset(3% 3% 3% 3% round 4px);
}

/* ── NAV SCRAMBLE — placeholder pour les lettres en cours de scramble ── */
.lg-strip-name[data-scrambling] { letter-spacing: inherit; }

/* ── CURSOR LABEL "VOIR →" ── */
#cursor-label {
  position: fixed; z-index: 9999; pointer-events: none;
  font-family: var(--sans); font-size: .48rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--noir);
  opacity: 0;
  transition: opacity .20s ease;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
#cursor-ring.label-mode {
  width: 76px; height: 76px;
  background: rgba(243,239,215,0.93);
  border-color: rgba(26,26,26,0.16);
  mix-blend-mode: normal;
  transition: width .28s cubic-bezier(.34,1.56,.64,1),
              height .28s cubic-bezier(.34,1.56,.64,1),
              background .22s ease, border-color .15s ease;
}

/* ── LETTER STAGGER — .s-label splitté par JS ── */
@keyframes letterIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sl-letter {
  display: inline-block;
  opacity: 0;
}
.sl-letter.in {
  animation: letterIn 0.40s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

/* ── CARDS 3D TILT — transform gérée par JS via pointermove ── */
.proj-card, .feat-card, .atelier-card, .media-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .hs-wrap > div  { animation: none; }
  .section-shape  { animation: none; }
  .btn-shimmer::after { animation: none; }
  .btn-ripple     { animation: none; }
  .hero-reveal    { animation: none; opacity: 1; }
  .sl-letter      { animation: none; opacity: 1; }
  .sr-el          { opacity: 1; }
  .sr-el.sr-in    { animation: none; }
  .proj-card, .feat-card, .atelier-card, .media-card { will-change: auto; }
  #scroll-progress { animation: none; }
  .cursor-trail   { display: none; }
  .hero-gradient-text { animation: none; background: none; -webkit-text-fill-color: inherit; }
}


/* ═══════════════════════════════════════════
   ANIMATIONS v18 — Clip reveal · Progress · Ambient · Morph
═══════════════════════════════════════════ */

/* ── IMAGE CLIP REVEAL — wipe bas→haut au scroll ── */
.proj-card .proj-img,
.feat-card .feat-img,
.atelier-card .atelier-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.82s cubic-bezier(0.16, 1, 0.3, 1);
}
.proj-card.img-in .proj-img,
.feat-card.img-in .feat-img,
.atelier-card.img-in .atelier-img {
  clip-path: inset(0 0 0% 0);
}

/* ── FOOTER SILHOUETTE STROKE REVEAL ── */
/* stroke-dashoffset géré via JS — pas de CSS transition ici */


/* ── OVERLAY AMBIENT BACKGROUND — tinte selon entité survolée ── */
#lg-overlay {
  transition: transform .55s cubic-bezier(.76,0,.24,1),
              background 0.40s ease;
}
#lg-overlay.amb-e1 { background: #090f1e; }
#lg-overlay.amb-e2 { background: #08140a; }
#lg-overlay.amb-e3 { background: #181500; }
#lg-overlay.amb-e4 { background: #160505; }

/* ── NAV COLOR MORPH — transition douce sur data-nav-color ── */
body > nav {
  transition: background 0.50s ease;
}

/* ── REDUCED MOTION — désactive les clip reveals ── */
@media (prefers-reduced-motion: reduce) {
  .proj-card .proj-img,
  .feat-card .feat-img,
  .atelier-card .atelier-img {
    clip-path: none !important;
    transition: none;
  }
  .footer-silhouette .sil-stroke { transition: none !important; stroke-dashoffset: 0 !important; }
  #scroll-progress { transition: none; }
  #lg-overlay { transition: transform .55s cubic-bezier(.76,0,.24,1); }
}

/* ── HOVER SPLIT REVEAL — wipe gauche→droite sur proj-img ── */
.proj-card .proj-img::after,
.feat-card .feat-img::after,
.atelier-card .atelier-img::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(74,130,220,.26) 0%,
    rgba(74,130,220,.08) 60%,
    transparent 100%
  );
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.proj-card:hover .proj-img::after,
.feat-card:hover .feat-img::after,
.atelier-card:hover .atelier-img::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .proj-card .proj-img::after,
  .feat-card .feat-img::after,
  .atelier-card .atelier-img::after { display: none; }
}