/* ==========================================================================
   NEOPURE — Feuille de styles principale
   ========================================================================== */

/* 0. WEBFONTS — Gotham auto-hébergées depuis assets/brand/Gotham/ ========== */
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-XLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Black.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-Ultra.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/brand/Gotham/Gotham-BlackItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* 1. DESIGN TOKENS — Palette officielle Neopure =========================== */
:root {
  /* Couleurs de marque (charte officielle) */
  --np-cyan:      #35F2F2;    /* RGB 53, 242, 242 — accent vif */
  --np-violet:    #BC6BF2;    /* RGB 188, 107, 242 — violet principal */
  --np-lavender:  #D694F2;    /* RGB 214, 148, 242 — lavande médium */
  --np-rose:      #F1C4F2;    /* RGB 241, 196, 242 — rose pâle */
  --np-indigo:    #151626;    /* RGB 21, 22, 38 — indigo profond (base sombre) */

  /* Alias rétrocompatibles avec les anciens noms (pour ne rien casser) */
  --np-magenta:   var(--np-lavender);
  --np-purple:    var(--np-violet);
  --np-pink:      var(--np-rose);

  /* Neutres */
  --np-navy:      #151626;
  --np-navy-2:    #1f2040;
  --np-ink:       #151626;
  --np-muted:     #6a6b85;
  --np-line:      #e7e8ef;
  --np-white:     #ffffff;
  --np-bg:        #ffffff;

  /* Dégradés signature (cyan → lavande → violet) */
  --grad-brand:   linear-gradient(120deg, #35F2F2 0%, #D694F2 50%, #BC6BF2 100%);
  --grad-soft:    linear-gradient(120deg, #F1C4F2 0%, #BC6BF2 100%);

  /* Verre (glassmorphisme) */
  --glass-bg:     rgba(255, 255, 255, 0.10);
  --glass-bg-2:   rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.30);
  --glass-blur:   16px;

  /* Typo — Gotham (charte officielle) */
  --font-head: 'Gotham', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: 'Gotham', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rayons & ombres */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 4px 18px rgba(21, 22, 38, 0.08);
  --shadow-md: 0 12px 40px rgba(21, 22, 38, 0.14);
  --shadow-glow: 0 10px 40px rgba(188, 107, 242, 0.40);

  /* Layout */
  --container: 1180px;
  --header-h: 76px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Fond peint dès le 1er paint → pas de flash noir du navigateur (mode sombre OS)
     entre le refresh et l'apparition du fond du body/world-bg. Base : swatch violet. */
  background-color: #bd57ec;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;                    /* Gotham Book par défaut pour tout le texte courant */
  line-height: 1.6;
  color: var(--np-ink);
  /* IMPORTANT : le body reste TRANSPARENT. .world-bg est fixed + z-index négatif ;
     un fond opaque sur <body> se peint AU-DESSUS de lui dans l'ordre de peinture
     CSS (les descendants non positionnés du contexte racine passent devant les
     descendants à z-index négatif) et masquerait complètement le dégradé. */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;                    /* Gotham Black pour les titres */
  line-height: 1.1;
  margin: 0 0 0.4em;
  letter-spacing: -0.03em;
  /* Pas d'ombre sur les titres blancs : elle n'apportait rien et alourdissait
     le rendu (retour client). Le contraste tient sur la couleur pleine du texte. */
}

p { margin: 0 0 1rem; font-weight: 400; }

a { color: inherit; text-decoration: none; }

img, svg, video { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--np-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 3. UTILITAIRES =========================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 24px;
}

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Ombre portée derrière le texte en dégradé : le détache du fond charte,
     vif ou profond. Adoucie (retour client : ombres trop marquées). */
  filter: drop-shadow(0 1px 9px rgba(15, 5, 26, 0.3));
}

/* ===== TITRES DE SECTION — blanc lisible + frémissement cyan =============
   Retour client : le texte en dégradé rendait « violet sur violet »,
   illisible. On repasse les mots mis en avant en BLANC (contraste net sur
   le fond charte) avec un léger reflet cyan qui balaie le texte pour qu'il
   ne soit pas « juste posé ». Contraste préservé, identité conservée. */
.stats-collab-heading em,
.gallery-heading .gradient-text,
.services-title .gradient-text,
.services-lead-q,
.team-content h2 .gradient-text,
.map-caption h2 .gradient-text,
.contact-title.gradient-text {
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 42%,
    var(--np-cyan) 55%,
    #ffffff 70%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Aucune ombre : ni text-shadow (qui baverait en gris sur ce texte
     transparent), ni drop-shadow. Retour client : les ombres sur le texte
     blanc n'apportaient rien de lisible et alourdissaient le rendu. Le
     contraste blanc / dégradé charte suffit. */
  text-shadow: none;
  animation: headingSheen 7.5s ease-in-out infinite;
}
@keyframes headingSheen {
  0%   { background-position: 0% center; }
  100% { background-position: -220% center; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-collab-heading em,
  .gallery-heading .gradient-text,
  .services-title .gradient-text,
  .services-lead-q,
  .team-content h2 .gradient-text,
  .map-caption h2 .gradient-text,
  .contact-title.gradient-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--np-purple);
}

/* Verre dépoli — sur fond clair */
.glass {
  background: var(--glass-bg-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}

/* Boutons */
.btn {
  --btn-pad-y: 14px;
  --btn-pad-x: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), color 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: #fff;
  /* Dégradé horizontal pur (charte) : pas de diagonale qui casse sur les coins.
     border transparent -> couleur pleine + background-clip padding-box pour
     supprimer le liseré clair ("blanc moche") sur le bord droit arrondi. */
  border: none;
  /* Dégradé assombri d'un cran pour trancher franchement sur le fond violet clair. */
  background-image: linear-gradient(95deg, #c92fbf 0%, #9d1ff0 52%, #6a1fe0 100%);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  /* Anneau clair fin (le décolle du fond) + ombre portée resserrée et profonde +
     léger reflet interne en haut pour un rendu "pilule" net. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 12px 30px -6px rgba(90, 20, 180, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.34),
    0 16px 38px -6px rgba(90, 20, 180, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Bouton "réserver un appel" — violet charte #BC6BF2, pensé pour ressortir */
.btn-book {
  color: #fff;
  border: none;
  background-image: linear-gradient(100deg, #a24fe6 0%, #7d34d8 100%);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 12px 32px -6px rgba(120, 40, 200, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.btn-book:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.34),
    0 16px 40px -6px rgba(120, 40, 200, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.btn-book svg { width: 18px; height: 18px; }

/* Animation reveal au scroll (pilotée par main.js) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* 4. HEADER / NAV ========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
}
/* État au scroll (ajouté par JS) */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--np-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: #fff;
}
.brand-logo {
  height: 34px; width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  position: relative;
  font-weight: 500;
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s var(--ease);
}
.is-scrolled .nav-links a { color: var(--np-ink); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

/* Burger mobile */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span + span { margin-top: 6px; }
.site-header:not(.is-scrolled) .nav-toggle { color: #fff; }
.is-scrolled .nav-toggle { color: var(--np-ink); }

/* 5. HERO ================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  overflow: hidden;
  color: #fff;
  padding: 40px 0 70px;
}
/* ===== Watermark N : présence subtile à droite, ne distrait pas du contenu ===== */
.hero::before {
  content: "";
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 48vw;
  max-width: 540px;
  height: 48vw;
  max-height: 540px;
  background: url('../assets/brand/Logo_N_Degrade_SF.png') center / contain no-repeat;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}
/* La vidéo plein écran remplace le watermark → on le masque pour ne pas surcharger */
.hero:has(.hero-video)::before { display: none; }
/* Pas de watermark sur mobile (l'écran est déjà chargé) */
@media (max-width: 720px) {
  .hero::before { display: none; }
}

/* Fond dégradé (statique) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Même dégradé vertical que le fond global (vidéo de fond à venir). */
  background: linear-gradient(180deg,
    #c21ff0 0%,
    #b92afa 16%,
    #a022de 38%,
    #6f2aa0 62%,
    #43205e 84%,
    #2f173b 100%);
}

/* Voile sombre pour la lisibilité du texte */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Vignette plus marquée + assombrissement bas → profondeur, le texte ressort */
  background:
    radial-gradient(70% 70% at 38% 42%, rgba(23, 20, 48, 0), rgba(23, 20, 48, 0.55) 92%),
    linear-gradient(180deg, rgba(23, 20, 48, 0) 55%, rgba(15, 12, 35, 0.35) 100%);
}

/* ===== Vidéo plein écran du hero ===== */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Le dégradé statique s'efface : la vidéo prend toute la place. */
.hero:has(.hero-video) .hero-bg { display: none; }
/* Voile sombre par-dessus la vidéo (z-index 1) : logo/slogan/CTA lisibles. */
.hero:has(.hero-video)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 80% at 40% 42%, rgba(20, 8, 32, 0.28), rgba(18, 6, 30, 0.70) 95%),
    linear-gradient(180deg, rgba(20, 8, 32, 0.32) 0%, rgba(12, 4, 22, 0.58) 100%);
}

/* ===== Grille/texture par-dessus la vidéo (z-index 2) : masque la compression ===== */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Fine grille régulière : lignes verticales + horizontales très discrètes. */
  background-image:
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(0, 0, 0, 0.10)       0 1px, transparent 1px 4px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
/* Léger vignettage foncé aux bords pour ancrer la vidéo dans le fond charte. */
.hero-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(15, 6, 26, 0.5) 100%);
}

.hero-inner { position: relative; z-index: 3; max-width: 980px; width: 100%; }
/* Foyer sombre diffus derrière le contenu éditorial : le logo/slogan/CTA
   ressortent même quand la vidéo est claire ou chargée derrière. */
.hero:has(.hero-video) .hero-inner::before {
  content: "";
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  background: radial-gradient(58% 62% at 32% 46%, rgba(10, 4, 20, 0.6), rgba(10, 4, 20, 0) 74%);
  filter: blur(26px);
  pointer-events: none;
}

/* — Hero éditorial : en-tête (badge gauche / méta droite) — */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-title {
  margin-bottom: 18px;
  display: block;
  line-height: 1;
}
/* Wordmark officiel "Neopure" en blanc, dimensionné comme un grand titre.
   Double ombre : un halo violet (marque) + une ombre sombre nette → il claque
   sur la vidéo et se détache immédiatement à l'arrivée sur le site. */
.hero-title .hero-logo {
  display: block;
  width: clamp(280px, 56vw, 640px);
  height: auto;
  filter:
    drop-shadow(0 0 42px rgba(188, 107, 242, 0.6))
    drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}
/* Logo vivant (retour client : « une animation de notre logo ») :
   entrée en fondu/échelle à l'arrivée, puis halo qui respire doucement
   entre le violet et le cyan de la charte. Le logo étant une image (PNG),
   on anime son aura plutôt que ses tracés. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .hero-logo {
    animation:
      logoIn 1.1s var(--ease) both,
      logoAura 5.5s ease-in-out 1.1s infinite;
  }
  @keyframes logoIn {
    0%   { opacity: 0; transform: scale(0.92) translateY(8px); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes logoAura {
    0%, 100% {
      filter: drop-shadow(0 0 42px rgba(188, 107, 242, 0.6))
              drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
    }
    50% {
      filter: drop-shadow(0 0 60px rgba(53, 242, 242, 0.55))
              drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
    }
  }
}

.hero-tagline {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;
}
.hero-algo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 34px;
}
.hero-algo span {
  color: transparent;
  background: linear-gradient(100deg, var(--np-cyan) 0%, #7b2ff0 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* — Hero éditorial : badge sans margin (le hero-top gère l'espacement) — */
.hero-top .hero-badge { margin-bottom: 0; }

/* — Marqueur édito (remplace la pastille à pulse type SaaS/IA) — */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.hero-tag-bar {
  width: 32px;
  height: 1.5px;
  background: var(--np-cyan);
  box-shadow: 0 0 12px rgba(53, 242, 242, 0.5);
}
/* Séparateur : un petit rond cyan (remplace l'ancienne croix ×) */
.hero-tag-x {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-radius: 50%;
  border: 1.5px solid var(--np-cyan);
  box-shadow: 0 0 10px rgba(53, 242, 242, 0.55);
  vertical-align: middle;
  font-size: 0;            /* masque le glyphe × présent dans le HTML */
  line-height: 0;
}

/* — Slogan du hero (allégé : une seule ligne, propre) — */
.hero-slogan {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.35;
  font-weight: 500;                     /* Gotham Medium italic : plus présent, plus lisible */
  margin: 0 0 40px;
  max-width: 36ch;
  color: #fff;
}

/* — Bloc « 01 La Com' / 02 L'Event » dans le hero (dual identity visible) — */
.hero-sectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0 0 42px;
  padding: 0;
  max-width: 640px;
}
.hero-sector a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--np-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 26px -14px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hero-sector--event a { border-left-color: var(--np-violet); }
.hero-sector a:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px -16px rgba(53, 242, 242, 0.4);
}
.hero-sector-idx {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.hero-sector--com .hero-sector-idx   { color: var(--np-cyan); }
.hero-sector--event .hero-sector-idx { color: var(--np-pink); }
.hero-sector-body { display: flex; flex-direction: column; line-height: 1.2; }
.hero-sector-name {
  font-family: var(--font-head);
  font-weight: 700;                    /* titre de pavé : bold (pas extra bold) */
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.hero-sector-sub {
  font-weight: 400;                    /* sous-titre : Gotham Book */
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}

/* — Actions : CTA primaire + lien texte + réseaux compacts, alignés à gauche — */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
}
.hero-actions .btn-primary { gap: 8px; }

/* Lien éditorial souligné (remplace le second bouton classique) */
.hero-link {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  padding-bottom: 4px;
}
.hero-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--np-cyan), var(--np-pink));
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.hero-link:hover::after { transform: scaleX(0.6); transform-origin: right; }

/* Socials en icônes seules (plus de pills XXL qui faisaient SaaS) —
   regroupés avec les actions via un fin séparateur (plus de dérive à droite) */
.hero-socials { display: inline-flex; align-items: center; gap: 10px; }
.hero-socials::before {
  content: "";
  width: 1px;
  height: 26px;
  margin-right: 8px;
  background: rgba(255, 255, 255, 0.18);
}
.hero-social {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-social:hover { color: #fff; background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.hero-social svg { width: 18px; height: 18px; }

/* Responsive éditorial */
@media (max-width: 720px) {
  .hero-sectors { grid-template-columns: 1fr; }
  .hero-socials { margin-left: 0; }
}

.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 7. SECTIONS GÉNÉRIQUES =================================================== */
section { position: relative; }

/* ===== N flottants : rappels de marque discrets en fond de section ===== */
.stats-collab, .services, .team, .contact { isolation: isolate; }
.n-float {
  position: absolute;
  z-index: -1;                /* toujours derrière le contenu */
  pointer-events: none;
  background: url('../assets/brand/Logo_N_Degrade_SF.png') center / contain no-repeat;
  opacity: 0.05;
}
.n-float--a {
  width: clamp(180px, 22vw, 320px); aspect-ratio: 1 / 1;
  top: 7%; right: -3%;
  transform: rotate(8deg);
}
.n-float--b {
  width: clamp(150px, 17vw, 250px); aspect-ratio: 1 / 1;
  bottom: 6%; left: -2%; opacity: 0.045;
  transform: rotate(-10deg);
}
.n-float--c {
  width: clamp(160px, 19vw, 280px); aspect-ratio: 1 / 1;
  top: 12%; left: 4%; opacity: 0.04;
  transform: rotate(8deg);
}
.n-float--d {
  width: clamp(170px, 20vw, 300px); aspect-ratio: 1 / 1;
  bottom: 8%; right: 2%;
  transform: rotate(-10deg);
}
@media (max-width: 720px) {
  /* Mobile : on n'en garde qu'un par section, un peu plus petit, pour rester léger */
  .n-float { opacity: 0.045; }
  .n-float--b, .n-float--c { display: none; }
}

/* 7a. STATS + COLLABORATIONS ---------------------------------------------- */
.stats-collab { padding: 96px 0; background: var(--np-white); }
.stats-collab-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* En-tête éditorial de section */
.stats-collab-head { max-width: 720px; }
.stats-collab-heading {
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  line-height: 1.12;
  color: #fff;
}
.stats-collab-heading em {
  font-style: italic;
  font-weight: 600;
  color: transparent;
  /* Fin du dégradé en lavande CLAIRE : le violet foncé (#7b2ff0) fondait
     « fait briller » dans le fond magenta — illisible. */
  background: linear-gradient(100deg, var(--np-cyan) 0%, #eabbf7 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* Corps : stats (gauche) + clients (droite) */
.stats-collab-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
/* Évite que le marquee max-content explose la largeur de la colonne */
.stats, .collab { min-width: 0; }

/* MUR DE CLIENTS — cartes verre arrondies, logo entier visible, défilé continu.
   Desktop : marquee infini fluide (pause au survol).
   Mobile  : swipe horizontal avec snap. */
.collab-marquee {
  position: relative;
  margin-top: 24px;
  /* padding vertical large : laisse respirer l'ombre/halo des tuiles sans le couper */
  padding: 34px 0;
  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);
}
.collab-track {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: collabFlow 46s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.collab-marquee:hover .collab-track { animation-play-state: paused; }
@keyframes collabFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tuile carrée façon feed Instagram : visuel client plein cadre, coins arrondis,
   taille uniforme. La source étant carrée, cover remplit sans couper ni laisser
   de blanc. Posée sur le fond sombre avec une fine bordure et un halo de marque. */
.collab-card {
  /* Dimensions verrouillées : pas de recalcul / déformation pendant le défilé 3D */
  flex: 0 0 132px;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  height: 132px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 24px -12px rgba(188, 107, 242, 0.55),
    0 4px 10px -6px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.collab-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* tuile carrée + image carrée = remplissage parfait */
  display: block;
  /* Repos : légèrement désaturé/assombri → feed cohérent et élégant */
  filter: saturate(0.82) brightness(0.9);
  transform: scale(1.01);            /* évite les bords blancs au scale-down inverse */
  transition: filter 0.55s var(--ease), transform 0.7s var(--ease);
}
/* Survol : l'image reprend toute sa couleur et zoome doucement (contenu par le clip) */
.collab-card:hover img {
  filter: saturate(1.12) brightness(1.04);
  transform: scale(1.09);
}
/* Sheen glassy permanent en haut de chaque tuile */
.collab-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 28%);
  pointer-events: none;
}
/* Liseré dégradé de marque qui s'allume au survol (overlay en bordure interne) */
.collab-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg, var(--np-cyan), var(--np-violet));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
/* Survol : pas de déplacement — seul le liseré dégradé + le halo s'intensifient. */
.collab-card:hover {
  border-color: transparent;
  box-shadow:
    0 14px 30px -14px rgba(188, 107, 242, 0.75),
    0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
.collab-card:hover::after { opacity: 1; }

/* Tablette : on empile dès qu'on perd la place pour 2 colonnes lisibles */
@media (max-width: 980px) {
  .stats-collab-body { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* Mobile : défilement automatique continu (marquee), comme en desktop */
@media (max-width: 720px) {
  .collab { text-align: center; width: 100%; }
  .collab-title { text-align: center; display: block; width: 100%; margin: 0 auto 18px; }
  .collab-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .collab-track {
    animation: collabFlow 34s linear infinite;  /* un peu plus rapide sur mobile */
    width: max-content;
    gap: 14px;
    padding-block: 4px;
    margin: 0;
  }
  .collab-card {
    width: 104px;
    height: 104px;
  }
  /* Doublons visibles : indispensables pour la boucle infinie sans saut */
  .collab-card--dup { display: block; }
}
.stats { display: flex; flex-direction: column; gap: 24px; }
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 28px 24px;
  border-radius: 20px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 65%),
    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
/* Watermark glyph dans le fond — signature éditoriale */
.stat::before {
  position: absolute;
  top: -0.18em;
  right: -0.05em;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(6rem, 11vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  color: #fff;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stat:nth-of-type(1)::before { content: "@"; }
.stat:nth-of-type(2)::before { content: "%"; }
.stat:hover::before { opacity: 0.14; transform: translate(-6px, 4px); }
/* Ligne lumineuse en haut */
.stat::after {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 2px; border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  transition: left 0.5s var(--ease), right 0.5s var(--ease);
}
.stat:nth-of-type(1) {
  border-top-color: rgba(53, 242, 242, 0.4);
  box-shadow:
    0 0 0 0.5px rgba(53, 242, 242, 0.12),
    0 24px 70px -28px rgba(53, 242, 242, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.stat:nth-of-type(1)::after {
  background: linear-gradient(90deg, transparent, var(--np-cyan), transparent);
  box-shadow: 0 0 16px rgba(53, 242, 242, 0.6);
}
.stat:nth-of-type(2) {
  border-top-color: rgba(214, 148, 242, 0.4);
  box-shadow:
    0 0 0 0.5px rgba(214, 148, 242, 0.12),
    0 24px 70px -28px rgba(214, 148, 242, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.stat:nth-of-type(2)::after {
  background: linear-gradient(90deg, transparent, var(--np-pink), transparent);
  box-shadow: 0 0 16px rgba(214, 148, 242, 0.6);
}
.stat:hover {
  transform: translateY(-6px);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 65%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.stat:hover::after { left: 12px; right: 12px; }
/* Le contenu reste au-dessus du watermark */
.stat-num, .stat-bar, .stat-label { position: relative; z-index: 1; }

.stat-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.8rem, 6.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;                  /* moins serré que -0.04em : le % a la place de respirer */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  padding-right: 6px;                       /* garde-fou anti-coupure du dernier glyphe */
}
.stat-bar {
  display: block;
  height: 4px;
  width: 0;
  margin: 16px 0 14px;
  border-radius: 2px;
  background: var(--grad-brand);
  transition: width 0.9s var(--ease) 0.25s;
}
.stat.is-visible .stat-bar { width: 72px; }
.stat-label { font-size: 1.05rem; font-weight: 600; color: var(--np-ink); }
.stat-label em { display: block; font-style: normal; font-weight: 400; color: var(--np-muted); font-size: 0.92rem; }

.collab-title { margin-bottom: 18px; text-align: center; }

/* CTA sous les logos clients : prise de rendez-vous rapide */
.collab-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}
.collab-cta-note {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
}

/* 7b. GALERIE -------------------------------------------------------------- */
.gallery-section { padding: 40px 0 90px; background: var(--np-white); }
.gallery-heading {
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  max-width: 760px;
  margin: 0 auto 44px;
  line-height: 1.25;
}
.gallery-heading-strong { color: var(--np-ink); }
.nowrap { white-space: nowrap; }

/* Accroche stratégie sous le titre de la galerie */
.gallery-accroche {
  text-align: center;
  max-width: 640px;
  margin: -28px auto 44px;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* Clin d'œil auto-référentiel : le site lui-même est la démo du service web/appli.
   Ligne discrète sous l'accroche, mot « ce site » en accent cyan de la charte. */
.gallery-selfnote {
  text-align: center;
  margin: -16px auto 40px;              /* se tucke sous l'accroche, comme l'accroche sous le titre */
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}
.gallery-selfnote b { color: var(--np-cyan); font-weight: 700; }

/* Indice de swipe (mobile uniquement) : la rangée contient bien plus de médias
   que l'écran n'en montre — sans indice, on croit qu'il n'y a que 2 vidéos. */
.gallery-swipe {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 0;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.gallery-swipe i {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--np-cyan);
  animation: swipeNudge 1.5s var(--ease) infinite;
}
@keyframes swipeNudge {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(7px); opacity: 1; }
}
@media (max-width: 720px) {
  .gallery-swipe { display: flex; }
}

/* Galerie compacte : UNE seule rangée horizontale qui défile (swipe) → peu de hauteur */
.gallery {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 26 px en bas : les tuiles paires sont décalées de 20 px (zigzag) et
     overflow-y:hidden rognait leur bas avec l'ancien padding de 12 px. */
  padding: 4px 2px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.gallery::-webkit-scrollbar { display: none; }
.gallery-item {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  height: clamp(300px, 52vw, 430px);
  aspect-ratio: 2 / 3;               /* photos verticales */
  scroll-snap-align: center;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
/* Tout en vertical « story » : mêmes hauteurs, formats cohérents */
.gallery-item.g-wide { aspect-ratio: 4 / 5; }              /* accent un peu plus large, reste vertical */
.gallery-item.g-tall,
.gallery-item.g-vid  { aspect-ratio: 9 / 16; }             /* vidéos = format story, MÊME hauteur que les photos */
/* Zigzag subtil : rythme moderne de « mur de reels » */
.gallery-item:nth-child(even) { transform: translateY(20px); }
.gallery-item:nth-child(even):hover { transform: translateY(14px); }
/* Photo & vidéo : plein cadre, désaturé au repos → couleur + zoom doux au survol */
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.94);
  transform: scale(1.01);
  transition: filter 0.55s var(--ease), transform 0.7s var(--ease);
}
.gallery-item:hover img,
.gallery-item:hover video {
  filter: saturate(1.12) brightness(1.05);
  transform: scale(1.06);
}
/* Indicateur vidéo : bouton play minimal centré (pas de pill "IA") */
.media-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 66px; height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  /* Verre dépoli */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 10px 30px -6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 22px -10px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  pointer-events: none;
}
/* Anneau en dégradé charte (cyan → violet) */
.media-play::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(140deg, var(--np-cyan), var(--np-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}
/* Reflet de verre en haut */
.media-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(72% 55% at 50% 20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.media-play svg {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  margin-left: 3px;                  /* recentre optiquement le triangle */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.gallery-item:hover .media-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 14px 42px -8px rgba(53, 242, 242, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -10px 22px -10px rgba(0, 0, 0, 0.3);
}
.gallery-item:hover .media-play::before { opacity: 1; }
/* Sheen glassy + liseré dégradé au survol (cohérent avec les tuiles clients) */
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 30%, rgba(21,22,38,0.18) 100%);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg, var(--np-cyan), var(--np-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.gallery-item:hover {
  border-color: transparent;
  box-shadow: 0 20px 44px -20px rgba(188, 107, 242, 0.7);
}
.gallery-item:hover::after { opacity: 1; }

/* (Les accents d'aspect g-wide / g-vid sont définis sur .gallery-item ci-dessus) */

/* 7c. SERVICES ------------------------------------------------------------- */
.services {
  position: relative;
  padding: 100px 0;
  background: var(--np-navy);
  color: #fff;
  overflow: hidden;
}
/* Note : ::before retiré — il créait un voile rectangulaire légèrement plus sombre
   que le world-bg autour, donc une couture verticale visible au bord du panneau
   en scroll horizontal. Le world-bg fait déjà les halos colorés. */
/* Lead « L'algo ? C'est notre pote. » au-dessus du titre Services */
.services-lead {
  position: relative;
  text-align: center;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto 10px;
}
.services-lead-q {
  font-style: normal;
  font-weight: 800;
  color: transparent;
  /* Fin en lavande claire : le « ? » terminait en violet foncé et
     disparaissait sur la zone magenta du fond. */
  background: linear-gradient(100deg, var(--np-cyan) 0%, #eabbf7 100%);
  -webkit-background-clip: text; background-clip: text;
}

.services-title {
  position: relative;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 14px;
}
.services-cta { position: relative; text-align: center; margin-top: 48px; }

/* 7c-bis. DEUX SECTEURS (Communication / Événementiel) -------------------- */
.sectors {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.sector {
  position: relative;
  flex: 1 1 0;
  max-width: 460px;
  padding: 36px 32px;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 65%),
    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
/* Chiffre géant en watermark dans le fond — signature éditoriale */
.sector::before {
  position: absolute;
  top: -0.16em;
  right: -0.05em;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(8rem, 17vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  color: #fff;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.sector--com::before   { content: "01"; }
.sector--event::before { content: "02"; }
.sector:hover::before { opacity: 0.12; transform: translate(-8px, 6px); }

/* Le contenu reste au-dessus du watermark */
.sector-head, .sector-list { position: relative; z-index: 1; }

/* Ligne d'accent en haut (remplace le simple border-top 3px) */
.sector--com   { border-top-color: rgba(53, 242, 242, 0.4); }
.sector--event { border-top-color: rgba(188, 107, 242, 0.45); }
.sector--com::after,
.sector--event::after {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 2px;
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  transition: left 0.5s var(--ease), right 0.5s var(--ease), opacity 0.5s var(--ease);
}
.sector--com::after {
  background: linear-gradient(90deg, transparent, var(--np-cyan), transparent);
  box-shadow: 0 0 16px rgba(53, 242, 242, 0.6);
}
.sector--event::after {
  background: linear-gradient(90deg, transparent, var(--np-violet), transparent);
  box-shadow: 0 0 16px rgba(188, 107, 242, 0.6);
}

/* Aura colorée projetée sous la carte selon le secteur */
.sector--com {
  box-shadow:
    0 0 0 0.5px rgba(53, 242, 242, 0.12),
    0 24px 70px -28px rgba(53, 242, 242, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sector--event {
  box-shadow:
    0 0 0 0.5px rgba(188, 107, 242, 0.14),
    0 24px 70px -28px rgba(188, 107, 242, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hover : aura intensifiée + accent étiré, MAIS pas de soulèvement (évite
   l'effet d'agrandissement parasite quand la souris passe sur les items) */
.sector:hover {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 65%),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.16);
}
.sector--com:hover {
  box-shadow:
    0 0 0 0.5px rgba(53, 242, 242, 0.35),
    0 36px 90px -22px rgba(53, 242, 242, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sector--event:hover {
  box-shadow:
    0 0 0 0.5px rgba(188, 107, 242, 0.4),
    0 36px 90px -22px rgba(188, 107, 242, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sector:hover::after { left: 12px; right: 12px; }

.sector-head { margin-bottom: 22px; position: relative; }
/* Grand numéro éditorial de secteur (01 / 02) en arrière-plan du header */
.sector-idx {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.sector--com .sector-idx   { color: var(--np-cyan); }
.sector--event .sector-idx { color: var(--np-pink); }
.sector-badge {
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
}
/* La couleur du secteur passe par le titre lui-même, plus discrètement */
.sector--com .sector-badge   { background: linear-gradient(100deg, #fff 0%, #fff 55%, var(--np-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sector--event .sector-badge { background: linear-gradient(100deg, #fff 0%, #fff 55%, var(--np-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sector-tagline {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;                    /* Gotham Book italic, aéré */
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Liste numérotée éditoriale : 01, 02, 03… avec séparateurs fins */
.sector-list {
  list-style: none;
  counter-reset: srvc;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
}
.sector-list li {
  counter-increment: srvc;
  position: relative;
  display: grid;
  grid-template-columns: 2.6ch 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-head);
  font-weight: 400;                    /* Gotham Book — aéré, pas écrasant */
  font-size: 1.02rem;
  line-height: 1.25;
  color: #fff;
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.sector-list li:last-child { border-bottom: none; }
/* Chaque service est cliquable → ouvre une bulle d'explication */
.sector-list li[data-svc] { cursor: pointer; }
.sector-list li[data-svc]:focus-visible {
  outline: none;
  padding-left: 6px;
  color: #fff;
}
.sector--com   .sector-list li[data-svc]:focus-visible { box-shadow: inset 3px 0 0 var(--np-cyan); }
.sector--event .sector-list li[data-svc]:focus-visible { box-shadow: inset 3px 0 0 var(--np-violet); }
/* Petit « + » indiquant qu'on peut cliquer, remplacé par une flèche au survol */
.sector-list li::after {
  content: "+";
  font-weight: 500;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.32);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), color 0.25s var(--ease);
}
.sector-list li:hover::after {
  content: "→";
  font-size: 0.95rem;
  opacity: 1;
  transform: translateX(0);
}
.sector--com .sector-list li:hover::after   { color: var(--np-cyan); }
.sector--event .sector-list li:hover::after { color: var(--np-pink); }
.sector-list li::before {
  content: counter(srvc, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.25s var(--ease);
}
.sector--com .sector-list li:hover::before   { color: var(--np-cyan); }
.sector--event .sector-list li:hover::before { color: var(--np-pink); }
.sector-list li:hover { padding-left: 6px; }

/* Liaison typographique : un grand × entre les deux secteurs */
.sector-bridge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
}
/* Liaison entre les deux secteurs : un rond en dégradé (remplace la croix ×) */
.sector-bridge-mark {
  display: block;
  width: clamp(34px, 4vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--np-cyan), var(--np-violet));
  /* Anneau : on évide le centre */
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 62%);
          mask: radial-gradient(closest-side, transparent 60%, #000 62%);
  box-shadow: 0 0 22px rgba(188, 107, 242, 0.35);
  font-size: 0;            /* masque le glyphe × présent dans le HTML */
  user-select: none;
}

/* Empilement vertical sur petits écrans : la liaison passe à l'horizontale */
@media (max-width: 820px) {
  .sectors { flex-direction: column; align-items: center; }
  /* Fix : sur colonne flex, flex:1 1 0 cassait la hauteur naturelle des cartes,
     et overflow:hidden clippait le contenu. On force le sizing par contenu. */
  .sector {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
    min-height: auto;
    height: auto;
    overflow: visible;
  }
  .sector-bridge { padding: 8px 0; }
  .sector-bridge-mark { transform: rotate(90deg); }
}

/* CTA des services : bouton + lien éditorial alignés */
.services-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 48px;
}

/* 7d. ÉQUIPE --------------------------------------------------------------- */
.team { padding: 100px 0; background: var(--np-white); }
.team-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.team-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  box-shadow: var(--shadow-glow);
  position: relative;
  overflow: hidden;
}
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.25), transparent 70%);
}
.team-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 8px 0 22px;
}
.team-content p { color: var(--np-muted); max-width: 60ch; }
.team-content p strong { color: var(--np-ink); }

/* Colonne visuelle : teaser au-dessus de la carte + lien "Qui sommes-nous ?" */
.team-visual { display: flex; flex-direction: column; align-items: center; }
.team-kicker {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 14px;
  text-align: center;
}
.team-photo { width: 100%; }

/* 7e. CONTACT -------------------------------------------------------------- */
.contact {
  padding: 100px 0 0;
  background: linear-gradient(180deg, #f7f6fc 0%, #ffffff 100%);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  /* La carte Horaires (plus courte que le formulaire) se centre verticalement
     au milieu du bloc, au lieu de rester collée en haut. */
  align-items: center;
}
.contact-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 24px; }
.contact-form-wrap { position: relative; z-index: 3; }
.contact-form { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 3; }
/* Garde explicite : les éléments interactifs du form ne doivent jamais être bloqués */
.contact-form .field,
.contact-form input,
.contact-form textarea,
.contact-form button,
.contact-form .chip { pointer-events: auto; position: relative; z-index: 3; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--np-ink); }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  /* line-height serrée : le 1.6 hérité du body dépassait la hauteur utile du
     champ (min-height - padding) et décalait le texte vers le haut sur iOS.
     1.2 tient dans la boîte → le texte se centre verticalement proprement. */
  line-height: 1.2;
  padding: 13px 15px;
  border: 1px solid var(--np-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--np-ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  min-height: 48px;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--np-purple);
  box-shadow: 0 0 0 3px rgba(188, 107, 242, 0.15);
}
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { font-size: 0.8rem; color: var(--np-muted); margin: 4px 0 0; }

/* Honeypot anti-spam : invisible et hors flux, mais rempli par les bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Case de consentement RGPD */
.field--consent { margin-top: 2px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--np-muted);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--np-purple);
  cursor: pointer;
}
.consent a { color: var(--np-purple); text-decoration: underline; }

/* Message d'erreur d'envoi (réseau ou consentement manquant) */
.form-error {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #e0417a;
}
.form-error a { color: inherit; text-decoration: underline; }

/* Chips de sélection pour « Nature du message » */
.field--chips .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.chip {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(18, 8, 28, 0.3);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.chip:hover {
  color: #fff;
  background: rgba(18, 8, 28, 0.48);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}
.chip.is-active {
  color: #151626;
  /* Fin en lavande claire : le texte sombre de la puce restait lisible sur
     tout le dégradé (le violet foncé #7b2ff0 mangeait la moitié droite). */
  background: linear-gradient(100deg, var(--np-cyan), var(--np-lavender));
  border-color: transparent;
  box-shadow: 0 6px 18px -4px rgba(188, 107, 242, 0.55);
}
.chip:focus-visible {
  outline: 2px solid var(--np-cyan);
  outline-offset: 3px;
}

/* Confirmation après envoi (remplace le formulaire) */
.form-success {
  padding: 30px 0;
}
.form-success h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 10px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.form-success p { color: rgba(255, 255, 255, 0.72); margin: 0; max-width: 42ch; }

.contact-info {
  position: relative;
  padding: 36px 32px;
  border-radius: 22px;
  /* Fond assombri (pas juste un voile blanc à 3.5%) : le panneau se détache
     nettement du dégradé vif, texte et icônes restent lisibles. */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 65%),
    rgba(18, 8, 28, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(188, 107, 242, 0.45);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 0.5px rgba(188, 107, 242, 0.14),
    0 24px 70px -28px rgba(188, 107, 242, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.contact-info::after {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 2px; border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--np-violet), transparent);
  box-shadow: 0 0 16px rgba(188, 107, 242, 0.6);
  transition: left 0.5s var(--ease), right 0.5s var(--ease);
}
.contact-info:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 0.5px rgba(188, 107, 242, 0.35),
    0 36px 90px -22px rgba(188, 107, 242, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.contact-info:hover::after { left: 12px; right: 12px; }
.contact-info > * { position: relative; z-index: 1; }
.contact-info h3 { font-size: 1.2rem; margin-bottom: 12px; }
.contact-hours { color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; }
.contact-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.contact-list li { display: flex; align-items: center; gap: 12px; }
.ci-ico { display: grid; place-items: center; color: var(--np-cyan); }
.ci-ico svg { width: 20px; height: 20px; }
.contact-list a { color: #fff; font-weight: 500; transition: color 0.2s var(--ease); }
.contact-list a:hover { color: var(--np-pink); }
.contact-socials { display: flex; gap: 12px; }
.contact-socials a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.contact-socials a:hover { background: var(--grad-brand); transform: translateY(-3px); }
.contact-socials svg { width: 20px; height: 20px; }

/* 7f. FOOTER --------------------------------------------------------------- */
.site-footer { background: var(--np-navy); color: #fff; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 56px 24px 36px;
}
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.92rem; max-width: 36ch; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--np-pink); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
}
.footer-bottom p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }
.footer-credit { margin-top: 7px !important; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55) !important; }
.footer-credit a {
  color: var(--np-cyan);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(90deg, var(--np-cyan), var(--np-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.2s var(--ease);
}
.footer-credit a:hover { opacity: 0.75; }

/* 8. RESPONSIVE ============================================================ */
@media (max-width: 980px) {
  .stats-collab-inner,
  .team-inner,
  .contact-inner { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .team-visual { max-width: 360px; }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 4px;
    padding: 18px 24px 26px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform 0.35s var(--ease);
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a { color: var(--np-ink); width: 100%; padding: 12px 0; }
  .nav-links a::after { display: none; }
  .nav-toggle { display: block; }
  .nav-actions .btn { display: none; }
  .nav-actions .nav-toggle { display: block; }

  /* Galerie mobile : mur de stories, vidéos et photos à la MÊME hauteur */
  .gallery-item,
  .gallery-item.g-vid,
  .gallery-item.g-tall { height: clamp(300px, 80vw, 400px); }
  /* Zigzag réduit sur petit écran */
  .gallery-item:nth-child(even) { transform: translateY(12px); }
  .footer-inner { flex-direction: column; gap: 28px; }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .stat-num { font-size: clamp(2.4rem, 12vw, 3.2rem); }
}

/* 10. EXPÉRIENCE / INTERACTIONS ============================================ */

.hero-inner { position: relative; z-index: 3; }

/* Le contenu de ces sections reste au-dessus des N en filigrane */
.contact-inner, .map-radar, .map-caption { position: relative; z-index: 2; }

/* 10h. MENU ÉVOLUTIF (flottant — plus de barre en haut) ------------------- */
.brand-float {
  position: fixed; top: 20px; left: 24px; z-index: 200;
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  /* Bulle glassmorphique, assortie au bouton menu (symétrie des deux coins) */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.brand-float:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.14); }
.brand-float-logo {
  height: 40px;                    /* Icône N dégradé, centrée dans la bulle */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.menu-btn {
  position: fixed; top: 20px; right: 26px; z-index: 400;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.menu-btn:hover { transform: scale(1.06); background: rgba(255, 255, 255, 0.14); }
.menu-ico { position: relative; width: 22px; height: 14px; }
.menu-ico i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu-ico i:first-child { top: 0; }
.menu-ico i:last-child { bottom: 0; }
.menu-btn.is-open .menu-ico i:first-child { transform: translateY(6px) rotate(45deg); }
.menu-btn.is-open .menu-ico i:last-child { transform: translateY(-6px) rotate(-45deg); }

/* MENU MOBILE ÉDITORIAL — à l'image du site (hero-tag, indices, typo display) */
.menu-overlay {
  position: fixed; inset: 0; z-index: 350;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: max(72px, 9vh) clamp(22px, 6vw, 44px) max(36px, 5vh);
  background:
    radial-gradient(80% 60% at 18% 12%, rgba(188, 107, 242, 0.22), rgba(188, 107, 242, 0) 60%),
    radial-gradient(70% 60% at 88% 90%, rgba(188, 107, 242, 0.18), rgba(188, 107, 242, 0) 60%),
    rgba(15, 12, 35, 0.94);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
  overflow-y: auto;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

/* En-tête : marqueur édito (rappel du hero) */
.menu-head {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s var(--ease) 0.05s, transform 0.5s var(--ease) 0.05s;
}
.menu-overlay.is-open .menu-head { opacity: 1; transform: none; }

/* Liste des sections */
.menu-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-item { overflow: hidden; }
.menu-list a {
  display: grid;
  grid-template-columns: 3.4ch 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
              padding-left 0.3s var(--ease), border-color 0.3s var(--ease);
}
.menu-overlay.is-open .menu-list a { opacity: 1; transform: none; }
.menu-list li:nth-child(1) a { transition-delay: 0.08s, 0.08s, 0s, 0s; }
.menu-list li:nth-child(2) a { transition-delay: 0.14s, 0.14s, 0s, 0s; }
.menu-list li:nth-child(3) a { transition-delay: 0.20s, 0.20s, 0s, 0s; }
.menu-list li:nth-child(4) a { transition-delay: 0.26s, 0.26s, 0s, 0s; }
.menu-list li:nth-child(5) a { transition-delay: 0.32s, 0.32s, 0s, 0s; }

/* Index "01" "02" ... à gauche, en couleur du secteur */
.menu-idx {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
  align-self: center;
}
.menu-item--com  .menu-idx { color: var(--np-cyan); }
.menu-item--event .menu-idx { color: var(--np-pink); }

/* Nom de la section en gros display */
.menu-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 10vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
}
/* Flèche → discrète à droite, qui glisse au survol */
.menu-list a::after {
  content: "→";
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.4);
  align-self: center;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.menu-list a:hover {
  padding-left: 8px;
  border-color: rgba(255, 255, 255, 0.25);
}
.menu-list a:hover::after { color: #fff; transform: translateX(4px); }
.menu-item--com  a:hover::after { color: var(--np-cyan); }
.menu-item--event a:hover::after { color: var(--np-pink); }

/* Pied de menu — éditorial, deux colonnes */
.menu-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease) 0.42s, transform 0.5s var(--ease) 0.42s;
}
.menu-overlay.is-open .menu-foot { opacity: 1; transform: none; }
.menu-foot-block { display: flex; flex-direction: column; gap: 6px; }
.menu-foot-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--np-cyan);
  margin-bottom: 4px;
}
.menu-foot a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.menu-foot a:hover { color: var(--np-pink); }

/* 10i. Réseaux du hero : stylés en section 5 (HERO). L'ancienne règle ici
   ajoutait un margin-top de 24px qui désalignait les icônes par rapport au
   bouton « Voir nos réalisations » (centrage flex faussé). -------------- */

/* 10j. NAV LATÉRALE ÉVOLUTIVE (desktop) — surligne la section courante ---- */
.side-nav { display: none; }
@media (min-width: 1025px) {
  .menu-btn { display: none; }   /* le burger/overlay reste pour mobile uniquement */
  .side-nav {
    position: fixed; left: 50%; top: 22px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex; flex-direction: row; gap: 6px; align-items: center;
    padding: 7px 10px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .side-nav a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 6px 14px; border-radius: var(--r-pill);
    font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
  }
  .side-label { opacity: 1; transition: opacity 0.3s var(--ease); }
  .side-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .side-nav a:hover { color: #fff; }
  .side-nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.1); }
  .side-nav a.is-active .side-dot {
    background: var(--np-cyan);
    transform: scale(1.4);
    box-shadow: 0 0 12px rgba(53, 242, 242, 0.9);
  }
}

.footer-socials { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.footer-socials a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 0.85rem;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-socials a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.footer-socials svg { width: 18px; height: 18px; }

/* 10g. Carte (rectangulaire, sombre) --------------------------------------- */
.map-panel {
  background: var(--np-navy);
  color: #fff;
  padding: 90px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  text-align: center;
}
/* Carte = carte rectangulaire à coins arrondis, IDENTIQUE web & mobile */
.map-radar {
  position: relative;
  width: min(82vw, 520px);
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  /* iOS Safari / anciens Android : overflow:hidden + border-radius ne coupe PAS
     un enfant qui a son propre transform 3D (les panes Leaflet #map utilisent
     translate3d) → coins carrés sur téléphone. clip-path découpe TOUS les
     descendants quels que soient leurs transforms → coins arrondis fiables. */
  -webkit-clip-path: inset(0 round 22px);
  clip-path: inset(0 round 22px);
  transform: translateZ(0);
  /* Halo double charte (violet + cyan) : la carte rayonne comme les autres
     cartes du site, plus une aura scanner discrète. */
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 60px -18px rgba(188, 107, 242, 0.45),
    0 0 48px -14px rgba(53, 242, 242, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Voile coloré par-dessus la carte pour la teinter aux couleurs de la charte */
.map-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* mix-blend-mode: color → reprend teinte + saturation du voile, garde la
     structure (routes, blocs) de la carte. Opacités réduites (retour client :
     on doit revoir les rues) → le réseau routier et les blocs de la carte
     restent lisibles, avec juste une teinte charte par-dessus. */
  background: linear-gradient(155deg,
    rgba(188, 107, 242, 0.45) 0%,
    rgba(123, 47, 240, 0.4) 55%,
    rgba(53, 242, 242, 0.3) 100%);
  mix-blend-mode: color;
}
/* Deuxième voile : assombrit franchement la carte (multiply) — les tuiles
   CartoDB sont beige clair et, teintées seulement en hue, rendaient un panneau
   blanc délavé qui jurait sur le site sombre et rendait le radar invisible. */
.map-radar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(112, 52, 168, 0.08) 0%, rgba(56, 24, 88, 0.14) 100%),
    radial-gradient(90% 90% at 50% 45%, rgba(47, 23, 59, 0), rgba(47, 23, 59, 0.22) 100%);
  mix-blend-mode: multiply;
}
#map {
  width: 100%;
  height: 100%;
  background: #3a1e5c;
  z-index: 0;
  /* Tuiles laissées quasi telles quelles (pas d'assombrissement) : les voiles
     ci-dessus se contentent de teinter légèrement en charte, la carte reste
     lisible (rues, blocs) — retour client. */
  filter: saturate(0.9) brightness(1) contrast(1.06);
}
.leaflet-container { font-family: var(--font-body); background: #2a1e60; }

/* Cœur (notre position) */
.radar-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 42px;
  /* La POINTE du pin tombe pile sur le centre géographique (50%,50%) : c'est
     de ce point unique qu'émanent les ondes, la cible et le balayage — une
     seule origine, plus aucun décalage en pixels à entretenir. */
  transform: translate(-50%, -100%);
  z-index: 6;
  filter: drop-shadow(0 6px 16px rgba(53, 242, 242, 0.55))
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.radar-core svg { display: block; width: 100%; height: 100%; }

/* Étiquette de lieu, sous la pointe du pin — nette, maîtrisée, cohérente charte */
.radar-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, 12px);
  z-index: 6;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(24, 12, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ===== Balayage radar : cône lumineux qui tourne autour du POINTEUR =====
   Même origine que les ondes et la cible (la tête du pin) : un seul foyer
   d'émission, cohérent — avant, le cône tournait autour du centre de la
   carte (derrière le nom de la ville) pendant que les ondes partaient du
   pin, deux origines qui se chevauchaient visuellement. */
.radar-sweep {
  position: absolute;
  left: 50%; top: 50%;
  /* Grand carré centré sur le point (pointe du pin) : la rotation couvre toute la carte. */
  width: 180%; aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(53, 242, 242, 0)    0deg,
    rgba(53, 242, 242, 0.30) 26deg,
    rgba(188, 107, 242, 0.10) 52deg,
    rgba(53, 242, 242, 0)    72deg,
    rgba(53, 242, 242, 0)    360deg);
  mix-blend-mode: screen;
  /* Assez discret pour ne pas blanchir « MONTPELLIER » à chaque passage */
  opacity: 0.55;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: radarSweep 6s linear infinite;
}
@keyframes radarSweep { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ===== Ondes concentriques émanant du point Montpellier (centre) ===== */
.radar-rings {
  position: absolute;
  /* Origine unique : le point géographique (pointe du pin) au centre. */
  left: 50%; top: 50%;
  z-index: 3;
  width: 0; height: 0;
  pointer-events: none;
}
.radar-rings i {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1.5px solid rgba(53, 242, 242, 0.55);
  opacity: 0;
  animation: radarPing 4.2s ease-out infinite;
}
.radar-rings i:nth-child(2) { animation-delay: 1.4s; }
.radar-rings i:nth-child(3) { animation-delay: 2.8s; }
/* Les ondes s'ouvrent largement (jusqu'à ~100 px de rayon) puis s'éteignent
   bien avant les bords : un vrai radar qui balaie la zone, sans déborder. */
@keyframes radarPing {
  0%   { transform: scale(0.35); opacity: 0; border-color: rgba(53, 242, 242, 0.85); }
  18%  { opacity: 0.7; }
  100% { transform: scale(4.6); opacity: 0; border-color: rgba(188, 107, 242, 0.2); }
}

/* ===== Cible lumineuse au centre géographique (« on fait mouche ») ===== */
.radar-target {
  position: absolute;
  /* Pile sur le point (pointe du pin) : le halo cyan pulse au centre exact. */
  left: 50%; top: 50%;
  z-index: 4;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--np-cyan);
  box-shadow: 0 0 0 3px rgba(53, 242, 242, 0.22), 0 0 14px 2px rgba(53, 242, 242, 0.7);
  animation: radarTarget 4.2s ease-in-out infinite;
}
@keyframes radarTarget {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.35); opacity: 1; }
}

/* ===== Cadre de marque : liseré dégradé + ligne d'accent (signature du site) ===== */
.radar-frame {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
}
/* Liseré dégradé cyan→violet, comme les tuiles galerie/clients */
.radar-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg, var(--np-cyan), var(--np-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.6;
}
/* Ligne d'accent lumineuse en haut (comme .stat / .sector / .contact-info) */
.radar-frame::after {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--np-cyan), var(--np-violet), transparent);
  box-shadow: 0 0 16px rgba(53, 242, 242, 0.6);
}

/* Radar : mouvements figés si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep { animation: none; opacity: 0.4; }
  /* Ondes concentriques figées, centrées sur le point : rendu radar propre
     même sans animation. */
  .radar-rings i { animation: none; opacity: 0.3; transform: scale(1.6); }
  .radar-rings i:nth-child(2) { transform: scale(2.8); opacity: 0.16; }
  .radar-rings i:nth-child(3) { display: none; }
  .radar-target { animation: none; }
}

.map-caption { max-width: 460px; }
.map-caption h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 16px; }
/* Bas de page = zone la plus claire du dégradé (lavande) : on remonte le texte
   à un blanc quasi plein + Medium pour garder le contraste sans ombre. */
.map-caption-text { color: rgba(255, 255, 255, 0.94); font-weight: 500; margin-bottom: 26px; }
.map-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* 11. RESPONSIVE — interactions ------------------------------------------- */
@media (max-width: 860px) {
  .brand-float { top: 16px; left: 18px; width: 54px; height: 54px; }
  .brand-float-logo { height: 34px; }
  .menu-btn { width: 54px; height: 54px; top: 16px; right: 18px; }
}

/* 12. SCROLL HORIZONTAL (DESKTOP ≥ 1025px) ================================= */
/* Sur mobile/tablette, rien de tout ça ne s'applique → le site reste vertical. */
@media (min-width: 1025px) {
  html.h-active, html.h-active body { overflow-x: hidden; }
  /* masque la barre de défilement pour un rendu premium (le scroll fonctionne) */
  html.h-active { scrollbar-width: none; }
  html.h-active::-webkit-scrollbar { display: none; }

  .h-active .h-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }
  .h-active .h-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    height: 100vh;
    position: relative;
    will-change: transform;
    gap: 130px;                      /* large espace entre panneaux */
    pointer-events: none;            /* Firefox : le track ne doit pas voler les clics destinés aux panneaux */
    /* Pas de fond sur la piste : le dégradé VERTICAL fixe (world-bg) reste
       visible derrière tous les panneaux → même dégradé vertical sur toute
       l'horizontalité du site. */
    background: transparent;
  }
  /* Le hero laisse voir le dégradé vertical du fond (vidéo de fond à venir). */
  .h-active .hero-bg { background: transparent; -webkit-mask-image: none; mask-image: none; }
  .h-active .h-track > main { display: contents; }

  .h-active .panel {
    flex: 0 0 auto;
    min-width: auto;                 /* chaque panneau = la largeur de SON contenu (compact) */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    padding-inline: clamp(60px, 5.5vw, 110px);
    pointer-events: auto;            /* on rétablit la capture de clic au niveau de chaque panneau */
  }

  /* — HERO — plein écran, déjà centré — */
  .h-active .hero.panel { min-width: 100vw; padding: 0; }
  /* En scroll horizontal : le bord DROIT de la vidéo se FOND vers le violet
     profond de la charte (au lieu de devenir transparent et de révéler d'un
     coup la bande magenta vive). Dégradé multi-paliers = transition douce et
     élégante. Le côté gauche (logo) reste net. */
  .h-active .hero:has(.hero-video)::after {
    background:
      linear-gradient(90deg,
        transparent 68%,
        rgba(47, 23, 59, 0.30) 82%,
        rgba(47, 23, 59, 0.72) 92%,
        #2f173b 99%),
      radial-gradient(80% 80% at 40% 42%, rgba(20, 8, 32, 0.28), rgba(18, 6, 30, 0.70) 95%),
      linear-gradient(180deg, rgba(20, 8, 32, 0.32) 0%, rgba(12, 4, 22, 0.58) 100%);
  }

  /* — STATS + COLLAB — */
  .h-active .stats-collab .stats-collab-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 44px;
    height: 100vh;
    width: auto;
    max-width: none;
    padding-block: 0;
  }
  .h-active .stats-collab .stats-collab-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }
  .h-active .stats-collab .stats { min-width: 280px; }
  /* Assez large pour montrer 4 logos entiers (4 × 132 px + 3 × 20 px = 588 px,
     plus la marge des fondus latéraux du masque). */
  .h-active .stats-collab .collab { min-width: 560px; max-width: 700px; flex: 1 1 auto; }
  /* Le marquee a une largeur définie pour boucler proprement en horizontal */
  .h-active .stats-collab .collab-marquee { width: 100%; }

  /* — GALERIE → frise horizontale — */
  .h-active .gallery-section.panel { min-width: auto; padding-inline: clamp(32px, 4vw, 80px); }
  .h-active .gallery-section .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.2vh;
    height: 100vh;
    width: auto;
    max-width: none;
    padding-top: 8vh;                 /* zone de sécurité sous le menu flottant */
    padding-bottom: 3vh;
  }
  /* Titre + accroche ANCRÉS AU DÉBUT du panneau : centrés sur la largeur
     totale de la frise (3000 px et plus), ils apparaissaient coupés au bord
     de l'écran en entrant dans la section, et n'étaient lisibles qu'à
     mi-parcours. Alignés à gauche, ils accueillent le visiteur dès l'entrée. */
  .h-active .gallery-section .gallery-heading {
    margin: 0;
    align-self: flex-start;
    text-align: left;
    max-width: min(88vw, 1060px);
    font-size: clamp(1.15rem, 2.05vw, 1.8rem);
  }
  .h-active .gallery-section .gallery-accroche {
    margin: 0;
    align-self: flex-start;
    text-align: left;
    max-width: 640px;
  }
  /* Retour client (desktop) : « Stop aux contenus sans fonds. » passe à la ligne */
  .h-active .gallery-section .gallery-heading-strong { display: block; }
  /* Clin d'œil « ce site c'est nous » : aligné à gauche comme le titre/accroche en frise */
  .h-active .gallery-section .gallery-selfnote { margin: 0; align-self: flex-start; text-align: left; }
  .h-active .gallery-section .gallery {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: visible;               /* pas de scroll interne : intégré à la frise */
    scroll-snap-type: none;
    padding: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Mur de stories : hauteur fixe uniforme, largeur dérivée de l'aspect vertical */
  .h-active .gallery-section .gallery-item {
    height: 56vh;
    width: auto;
    aspect-ratio: 2 / 3;             /* photos verticales */
    grid-row: auto;
    grid-column: auto;
  }
  .h-active .gallery-section .gallery-item.g-wide { aspect-ratio: 4 / 5; }    /* accent un peu plus large */
  /* Vidéos = format story 9/16, MÊME hauteur que les photos (plus de carré rikiki) */
  .h-active .gallery-section .gallery-item.g-tall,
  .h-active .gallery-section .gallery-item.g-vid {
    height: 56vh;
    aspect-ratio: 9 / 16;
    align-self: auto;
  }
  /* Zigzag conservé en frise horizontale */
  .h-active .gallery-section .gallery-item:nth-child(even) { transform: translateY(24px); }

  /* — SERVICES — */
  .h-active .services .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4vh;
    height: 100vh;
    width: auto;
    max-width: none;
  }
  .h-active .services .container { align-items: center; }
  .h-active .services .sectors { align-self: center; }
  .h-active .services .sector { max-width: 360px; padding: 26px 24px; }
  .h-active .services .sector-bridge { padding: 0 16px; }
  .h-active .services .services-lead,
  .h-active .services .services-title,
  .h-active .services .services-intro { margin: 0; align-self: center; }
  .h-active .services .services-cta { margin: 0; align-self: center; }

  /* — ÉQUIPE — */
  .h-active .team .team-inner {
    height: 100vh;
    align-content: center;
    align-items: center;
    grid-template-columns: 270px 460px;
    gap: 44px;
    width: auto;
    max-width: none;
  }
  .h-active .team .team-content p { font-size: 0.95rem; margin-bottom: 0.7rem; }
  .h-active .team .team-photo { max-height: 74vh; margin-inline: auto; }

  /* — CONTACT — */
  .h-active .contact .contact-inner {
    display: flex;
    gap: 40px;
    /* flex-start (pas center) : sur une fenêtre peu haute, un formulaire complet
       peut dépasser 100vh — avec un centrage pur, ce débordement remonte le
       contenu AU-DESSUS de son padding-top et le fait passer sous le menu
       flottant. En ancrant en haut, le padding-top garantit toujours l'espace
       de sécurité, quelle que soit la hauteur de la fenêtre ou du formulaire. */
    align-items: flex-start;
    height: 100vh;
    width: auto;
    max-width: none;
  }
  /* FILET DE SÉCURITÉ : le panneau fait 100vh et le scroll vertical pilote la
     frise — tout contenu qui dépasse serait INATTEIGNABLE (bouton « Envoyer »
     sous le pli, constaté en 1366×768 / 1440×900). Un scroll interne discret
     rend toujours le bas du formulaire accessible : la molette fait défiler le
     formulaire d'abord, puis enchaîne naturellement sur la frise. */
  .h-active .contact .contact-inner {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .h-active .contact .contact-form-wrap { width: 420px; }
  /* La carte Horaires (courte) se centre verticalement par rapport au
     formulaire, sans déplacer l'ancrage haut de ce dernier. */
  .h-active .contact .contact-info { width: 300px; align-self: center; }

  /* — CARTE RADAR → en ligne (radar | texte) — */
  .h-active .map-panel.panel {
    flex-direction: row;
    /* Contenu de taille fixe (pas un formulaire qui peut grandir) : on peut
       le centrer verticalement sans risque de dépassement du haut. */
    align-items: center;
    gap: 6vw;
    padding: 0 6vw;
    text-align: left;
  }
  .h-active .map-panel .map-radar { width: min(46vw, 620px); }
  .h-active .map-panel .map-caption { text-align: left; }
  .h-active .map-panel .map-cta { justify-content: flex-start; }
  /* Retour client (desktop) : pas de phrase sous « Basés à Montpellier » */
  .h-active .map-panel .map-caption-text { display: none; }

  /* Zone de sécurité en haut de chaque panneau : le contenu ne passe jamais
     sous la barre de navigation flottante (fixée à top:22px). Padding haut/bas
     ÉGAUX (même valeur) : sinon, avec justify-content:center, un padding-top
     plus grand que le padding-bottom décale visuellement tout le contenu vers
     le bas (l'espace libre se répartit à égalité autour d'une boîte déjà
     décalée) — c'est ce qui rendait la galerie "pas centrée, trop basse". */
  .h-active .stats-collab .stats-collab-inner,
  .h-active .gallery-section .container,
  .h-active .services .container,
  .h-active .team .team-inner,
  .h-active .contact .contact-inner,
  .h-active .map-panel.panel {
    padding-top: clamp(72px, 9vh, 96px);
    padding-bottom: clamp(72px, 9vh, 96px);
  }

  /* Desktop peu haut : le panneau Services empilait lead + titre + 2 cartes +
     CTA au point de dépasser 100vh → le haut (« L'algo ? C'est notre pote »)
     passait sous le menu flottant et le CTA du bas était rogné (retour client :
     « des trucs qui cachent des trucs »). On compresse pour que tout tienne. */
  @media (max-height: 900px) {
    .h-active .services .container { gap: 2.2vh; }
    .h-active .services .services-lead { margin-bottom: 0; }
    .h-active .services .sector { padding: 20px 22px; }
    .h-active .services .sector-head { margin-bottom: 14px; }
    .h-active .services .sector-tagline { margin-top: 10px; }
    .h-active .services .sector-list li { padding: 9px 0; }
    .h-active .services .services-cta { margin-top: 0; }
  }

  /* — FOOTER → dernier panneau — */
  .h-active .site-footer.panel {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: auto;
  }
  .h-active .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 0;
  }
  .h-active .site-footer .footer-bottom { border: none; padding: 22px 0 0; }
  .h-active .site-footer .footer-bottom .container { padding-inline: 0; }

}

/* 12b. DESKTOP PEU HAUT (ex. 1366×768) — le panneau Contact fait 100vh ; sur
   un écran court, le formulaire (haut) débordait et le bouton « Envoyer »
   passait SOUS le pli (le scroll vertical pilote l'horizontale — un scroll
   interne de secours existe, voir 12). On compresse l'espacement du formulaire
   pour que tout, bouton compris, tienne dans la hauteur visible.
   Seuil 960 (pas 860) : mesuré, le formulaire complet déborde déjà de ~40 px
   à 900 px de haut (1440×900) et de ~70 px à 870 px. */
@media (min-width: 1025px) and (max-height: 960px) {
  .h-active .contact .contact-inner {
    /* 76 px mini en haut : en dessous, « Contacte-nous ! » passait SOUS la
       barre de navigation flottante (top 22 px + ~44 px de hauteur). On
       compense en serrant un peu plus le formulaire ci-dessous. */
    padding-top: clamp(76px, 10vh, 88px);
    /* Bas volontairement serré : le conteneur scrolle en interne (voir 12) —
       un padding-bas trop grand crée 2-3 px de scroll « fantôme » qui fait
       apparaître une barre de défilement pour rien. */
    padding-bottom: clamp(20px, 3vh, 40px);
  }
  .h-active .contact .contact-title { margin-bottom: 12px; }
  .h-active .contact .contact-form { gap: 8px; }
  .h-active .contact .field { gap: 4px; }
  .h-active .contact .field label { font-size: 0.82rem; }
  .h-active .contact .field input { min-height: 42px; padding: 9px 13px; }
  .h-active .contact .field textarea { min-height: 56px; }
  .h-active .contact .field--chips .chips { gap: 6px; }
  .h-active .contact .chip { padding: 6px 12px; }
  .h-active .contact .form-note { margin-top: 2px; }
}

/* Fenêtres vraiment courtes (petit laptop, fenêtre réduite) : le formulaire
   se compacte encore d'un cran pour ne JAMAIS remonter sous le menu flottant
   ni pousser le bouton « Envoyer » sous le pli.
   Seuil 800 (pas 700) : mesuré, à 768 px de haut (1366×768) le palier
   précédent laissait encore ~45 px du formulaire sous le pli. */
@media (min-width: 1025px) and (max-height: 800px) {
  .h-active .contact .contact-inner {
    padding-top: 72px;
    padding-bottom: 18px;
  }
  .h-active .contact .contact-title { font-size: 1.45rem; margin-bottom: 8px; }
  .h-active .contact .contact-form { gap: 6px; }
  .h-active .contact .field label { font-size: 0.76rem; }
  .h-active .contact .field input { min-height: 34px; padding: 6px 12px; font-size: 0.9rem; }
  .h-active .contact .field textarea { min-height: 42px; font-size: 0.9rem; }
  .h-active .contact .field--chips .chips { gap: 5px; }
  .h-active .contact .chip { padding: 4px 10px; font-size: 0.78rem; }
  .h-active .contact .contact-form .btn { min-height: 40px; padding: 8px 20px; font-size: 0.9rem; }
  .h-active .contact .form-note { font-size: 0.72rem; margin-top: 0; }
  .h-active .contact .contact-info { padding: 22px 20px; }
}

/* 13. THÈME CONTINU (canvas unique, anti-compartiment) ===================== */
/* Un seul "monde" : fond aurora fixe, sections transparentes, texte clair.
   Fini l'alternance de blocs blanc/navy/dégradé. */

.world-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Dégradé fidèle au swatch fourni : magenta-violet électrique vif en haut
     (léger sheen vers le haut), qui s'éclaircit vers un lavande clair en bas.
     Diagonale douce (~170deg) pour retrouver le point le plus vif en haut. */
  background: linear-gradient(170deg,
    #c31ff5 0%,
    #bf3bef 22%,
    #bd57ec 45%,
    #c274e6 72%,
    #ca88e1 100%);
  background-color: #bd57ec;
}

/* Base sombre (charte : violet profond) */
/* NE PAS remettre de fond opaque ici : voir la note sur .world-bg plus haut. */
body { background: transparent; color: var(--np-white); }
.eyebrow { color: var(--np-pink); }

/* Sections : transparentes → le canvas continu traverse tout */
.stats-collab,
.gallery-section,
.services,
.team,
.contact,
.map-panel,
.site-footer { background: transparent; }
.contact { background: transparent; }

/* Plus d'ombre sur le texte courant blanc (retour client : inutile + peu
   esthétique). La lisibilité passe désormais par la couleur pleine du texte. */

/* Textes repassés en clair */
.stat-label { color: rgba(255, 255, 255, 0.92); }
.stat-label em { color: rgba(255, 255, 255, 0.55); }
.gallery-heading-strong { color: #fff; }

/* Chiffres clés (+35K / +800%) en BLANC PLEIN. Le dégradé de marque descendait
   vers un violet (#BC6BF2) qui, sur la carte claire posée sur le fond lavande,
   virait « violet sur violet » → chiffre illisible en bas des glyphes (retour
   client : problème de contraste). L'identité charte reste portée par le liseré
   coloré en haut de la carte et par la barre cyan/violet sous le chiffre. */
.stat-num.gradient-text {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  filter: none;
}
/* Texte équipe : un poil plus dense et contrasté → confort de lecture
   (Gotham Medium 500 au lieu de Book 400, moins de transparence) */
.team-content p {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  line-height: 1.7;
}
.team-content p strong { color: #fff; font-weight: 700; }

/* Formulaire → champs en verre sombre. Fond assez opaque et sombre pour
   rester lisible même sur la zone la plus vive du dégradé (charte). */
.field label {
  color: #fff;
}
.field input, .field textarea {
  background: rgba(18, 8, 28, 0.52);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  box-shadow: 0 6px 20px -10px rgba(20, 6, 32, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.66); }
.field input:focus, .field textarea:focus {
  border-color: var(--np-cyan);
  background: rgba(18, 8, 28, 0.5);
  box-shadow: 0 0 0 3px rgba(53, 242, 242, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.form-note { color: rgba(255, 255, 255, 0.68); }
/* Consentement + erreur : lisibles sur le fond sombre du formulaire */
.consent { color: rgba(255, 255, 255, 0.82); }
.consent a { color: var(--np-cyan); }
.form-error { color: #ff8fb0; }

/* En-tête : verre sombre une fois scrollé */
.site-header.is-scrolled {
  background: rgba(12, 9, 24, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header.is-scrolled .brand,
.site-header .brand { color: #fff; }
.is-scrolled .nav-links a { color: rgba(255, 255, 255, 0.92); }
.is-scrolled .nav-toggle { color: #fff; }

/* Menu mobile déroulant → fond sombre */
@media (max-width: 860px) {
  .nav-links {
    background: rgba(12, 9, 24, 0.95);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
  .nav-links a { color: #fff; }
}

/* Marquee strip transparent (le navy plein faisait "boîte") */
.marquee { background: transparent; }

/* Services : on garde juste le halo, plus de bloc navy plein */
.services { color: #fff; }

/* ==========================================================================
   14. MOBILE TUNING — finitions pour passer impeccable en < 1025 px
   ========================================================================== */

/* Garde anti-débordement horizontal pour TOUT le site en mobile */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Aucun élément ne dépasse de l'écran */
  .panel, section, .container, main { max-width: 100vw; }
  /* Watermarks décoratifs : contenus dans leur carte */
  .sector, .stat, .contact-info, .collab-card, .gallery-item { overflow: hidden; }
  /* Aération des grandes sections */
  .hero { padding: 80px 0 90px; }
  .hero-inner { max-width: 100%; }
  .stats-collab { padding: 80px 0; }
  .services { padding: 80px 0; }
  .team { padding: 80px 0; }
  .contact { padding: 80px 0 0; }
  .map-panel { padding: 80px 0 100px; }
}

/* Smartphone (≤ 720 px) — restructuration pour l'écran tactile */
@media (max-width: 720px) {
  /* Espaces de section plus serrés */
  .stats-collab, .services, .team, .map-panel { padding: 64px 0; }
  .contact { padding: 64px 0 0; }
  .container { padding-inline: 20px; }

  /* HERO — centré sur mobile (l'éditorial gauche-aligné est gardé pour desktop) */
  .hero { padding: 100px 0 120px; min-height: auto; text-align: center; }
  .hero-inner { margin: 0 auto; }

  .hero-top {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
    margin-bottom: 56px;
  }
  .hero-tag      { font-size: 0.72rem; letter-spacing: 0.18em; gap: 12px; }
  /* Retour client : pas de trait avant « Communication × Événementiel » sur mobile */
  .hero-tag-bar  { display: none; }
  .hero-meta     { font-size: 0.7rem; letter-spacing: 0.16em; gap: 12px; opacity: 0.75; justify-content: center; }

  .hero-title    { font-size: clamp(3rem, 16vw, 5rem); margin-bottom: 24px; line-height: 0.95; }
  .hero-slogan   { font-size: 1.1rem; margin: 0 auto 48px; max-width: 28ch; }

  /* Pavés 01 / 02 : contenus centrés via grille auto-centrée */
  .hero-sectors  { gap: 16px; margin: 0 auto 56px; max-width: 100%; }
  .hero-sector a {
    padding: 18px 20px;
    gap: 16px;
    border-radius: 14px;
    justify-content: flex-start;       /* le contenu DANS la carte reste à gauche pour la lisibilité */
    text-align: left;
  }
  .hero-sector-idx { font-size: 0.74rem; padding-top: 0; align-self: center; }
  .hero-sector-name { font-size: 1.05rem; }
  .hero-sector-sub { font-size: 0.8rem; margin-top: 4px; }

  /* Actions : tout centré sur mobile */
  .hero-actions {
    gap: 26px 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .hero-actions .btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 56px;
    font-size: 1rem;
  }
  .hero-link {
    width: auto;
    text-align: center;
    font-size: 1rem;
  }
  .hero-socials {
    margin: 4px auto 0;
    gap: 14px;
    width: auto;
    justify-content: center;
  }
  /* Retour client : pas de barre séparatrice avant les icônes Insta / WhatsApp */
  .hero-socials::before { display: none; }
  .hero-social { width: 48px; height: 48px; }
  .hero-social svg { width: 20px; height: 20px; }

  /* Wordmark centré sur mobile */
  .hero-title { text-align: center; }
  .hero-title .hero-logo { margin: 0 auto; width: min(82vw, 480px); }

  /* STATS + CLIENTS ----------------------------------------------------- */
  .stats-collab-head { margin-bottom: 8px; }
  .stats-collab-heading { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .stats-collab-inner { gap: 36px; }
  .stats { gap: 18px; }
  .stat { padding: 22px 22px 20px; border-radius: 18px; }
  .stat-num { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .stat::before { font-size: clamp(6rem, 22vw, 8rem); }

  /* SERVICES ------------------------------------------------------------ */
  .services-lead { font-size: clamp(1.05rem, 4.5vw, 1.4rem); }
  .services-title { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: 18px; }
  .sectors { gap: 0; }
  .sector { padding: 28px 22px; border-radius: 18px; max-width: 100%; }
  .sector::before { font-size: clamp(7rem, 28vw, 11rem); }
  .sector-badge { font-size: clamp(1.6rem, 7vw, 2rem); }
  .sector-tagline { font-size: 0.92rem; }
  .sector-list li { font-size: 0.96rem; padding: 14px 0; }
  .sector-bridge { padding: 14px 0; }
  .sector-bridge-mark { width: clamp(30px, 9vw, 40px); }
  .services-cta { gap: 16px 22px; margin-top: 32px; flex-direction: column; align-items: stretch; text-align: center; }
  .services-cta .btn-primary { width: 100%; }
  /* Le lien « Réserver un appel » était étiré sur toute la largeur (align-items:
     stretch) → son soulignement ::after traversait tout l'écran. Recentré à sa
     largeur de texte : le trait ne dépasse plus du libellé. */
  .services-cta .hero-link { align-self: center; width: auto; }

  /* TEAM ---------------------------------------------------------------- */
  .team-inner { gap: 28px; }
  .team-visual { max-width: 280px; margin: 0 auto; width: 100%; }
  .team-photo { aspect-ratio: 4 / 5; font-size: 1.1rem; }
  .team-content h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); margin-bottom: 16px; }
  .team-content p { font-size: 0.96rem; }

  /* CONTACT ------------------------------------------------------------- */
  .contact-inner { gap: 32px; }
  .contact-title { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: 18px; }
  .contact-form { gap: 14px; }
  .field input, .field textarea { padding: 14px 14px; font-size: 1rem; min-height: 50px; }
  .field textarea { min-height: 120px; }
  /* Chips : tap targets plus confortables */
  .chip { padding: 10px 16px; font-size: 0.88rem; }
  .field--chips .chips { gap: 8px; }
  /* Retour client (mobile) : le formulaire va à l'essentiel — on retire la
     note « On te répond sous 24 à 48h » et toute la carte Horaires/contacts. */
  .form-note { display: none; }
  .contact-info { display: none; }

  /* CARTE / LOCALISATION ----------------------------------------------- */
  .map-panel { gap: 34px; }
  .map-radar { width: min(88vw, 460px); }
  .map-caption { max-width: 100%; padding-inline: 20px; }
  .map-caption h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .map-caption-text { font-size: 0.96rem; }

  /* FOOTER ------------------------------------------------------------- */
  .footer-inner { padding: 44px 20px 28px; gap: 24px; }
  .footer-links { gap: 8px; }
  .footer-bottom p { padding-inline: 20px; }

  /* MENU / BURGER ------------------------------------------------------ */
  .menu-btn { width: 52px; height: 52px; top: 16px; right: 16px; }
  .brand-float { top: 14px; left: 16px; width: 50px; height: 50px; }
  .brand-float-logo { height: 32px; }
  .menu-list a { font-size: clamp(2rem, 9vw, 3.6rem); }
}

/* Très petits écrans (≤ 380 px — iPhone SE, anciens Android) */
@media (max-width: 380px) {
  .container { padding-inline: 16px; }
  .hero-title { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  .hero-actions .btn-primary { font-size: 0.92rem; padding: 13px 22px; }
  .sector-badge { font-size: 1.5rem; }
  .stat-num { font-size: 2.4rem; }
  .stat::before { font-size: 6rem; }
  .sector::before { font-size: 7rem; }
}

/* 9. ACCESSIBILITÉ — reduced motion ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Le reveal au scroll reste actif (fondu + léger glissé) : animation ponctuelle,
     douce et peu coûteuse — demandée explicitement, y compris sur iPhone. */
  .reveal { transition-duration: 0.7s !important; }
}

/* ==========================================================================
   15. LIGHTBOX — visionneuse galerie plein écran
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 9, 22, 0.78);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-stage {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.lightbox.is-open .lb-stage { transform: scale(1); opacity: 1; }

/* Média affiché : image ou vidéo, contenu, coins arrondis, halo de marque */
.lb-stage img,
.lb-stage video {
  display: block;
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 60px -10px rgba(188, 107, 242, 0.5);
  background: #000;
}

/* Bouton fermer */
.lb-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 32px);
  z-index: 2;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lb-close:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); border-color: var(--np-cyan); }

/* Flèches navigation */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lb-prev { left: clamp(10px, 3vw, 28px); }
.lb-next { right: clamp(10px, 3vw, 28px); }
.lb-prev:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--np-cyan); transform: translateY(-50%) scale(1.08); }
.lb-next:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--np-cyan); transform: translateY(-50%) scale(1.08); }

/* Bouton son (visionneuse vidéo) — même langage visuel que .lb-close */
.lb-sound {
  position: absolute;
  bottom: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 32px);
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lb-sound[hidden] { display: none; }
.lb-sound svg { display: block; width: 24px; height: 24px; }
.lb-sound:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--np-cyan); transform: scale(1.06); }
/* Son actif : le bouton s'allume en cyan pour signaler que le son est ON */
.lb-sound.is-on { color: var(--np-cyan); border-color: var(--np-cyan); background: rgba(53, 242, 242, 0.16); }

/* Compteur (n / total) */
.lb-counter {
  position: absolute;
  bottom: clamp(14px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

/* La galerie devient cliquable (curseur main) */
.gallery-item { cursor: pointer; }

/* Mobile : flèches plus petites et collées aux bords */
@media (max-width: 720px) {
  .lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lb-close { width: 46px; height: 46px; font-size: 1.6rem; }
  .lb-sound { width: 46px; height: 46px; }
  .lb-sound svg { width: 22px; height: 22px; }
  .lb-stage img, .lb-stage video { max-height: 78vh; border-radius: 12px; }
}

/* Respect du reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lb-stage { transition: opacity 0.2s linear; transform: none; }
  .lightbox.is-open .lb-stage { transform: none; }
  .lb-close:hover { transform: none; }
}

/* ==========================================================================
   16. MODALE LÉGALE — bulle de lecture (T&C, confidentialité, mentions…)
   ========================================================================== */
.legal-store { display: none !important; }

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 9, 22, 0.78);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  /* Le fond sombre ne défile pas la page derrière (iOS) */
  overscroll-behavior: contain;
  touch-action: none;
}
.legal-modal.is-open { opacity: 1; visibility: visible; }

.legal-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: 86vh;            /* repli pour vieux navigateurs */
  max-height: 86dvh;           /* stable : ne saute pas quand la barre mobile apparaît/disparaît */
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(188, 107, 242, 0.16), rgba(188, 107, 242, 0) 55%),
    rgba(20, 18, 42, 0.96);
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.8),
    0 0 60px -10px rgba(188, 107, 242, 0.4);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.legal-modal.is-open .legal-panel { transform: none; opacity: 1; }

/* Croix de fermeture */
.legal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.legal-close:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); border-color: var(--np-cyan); }

/* Contenu défilable */
.legal-body {
  overflow-y: auto;
  overscroll-behavior: contain;            /* le scroll ne chaîne pas vers la page (iOS) */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overflow-wrap: anywhere;
  padding: clamp(34px, 5vw, 52px) clamp(26px, 5vw, 48px) clamp(30px, 5vw, 46px);
  color: rgba(255, 255, 255, 0.84);
}
/* Alignement à gauche FORCÉ : neutralise toute justification externe
   (extension navigateur, mode lecture, leaflet…) qui étirait les espaces. */
.legal-body,
.legal-body p,
.legal-body h2,
.legal-body h3,
.legal-body li,
.legal-body span {
  text-align: left !important;
  text-justify: auto;
}
/* Confort de lecture : on borne la longueur de ligne */
.legal-body > * { max-width: 60ch; }

.legal-eyebrow {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--np-cyan);
  margin: 0 0 10px;
  /* Réserve l'espace de la croix pour que l'en-tête ne passe pas dessous */
  padding-right: 44px;
}
/* ==========================================================================
   BULLES D'ENGAGEMENT — discrètes, "incrustées", jamais de chevauchement
   Par défaut masquées ; affichées uniquement sur grand écran (marges suffisantes),
   dans les bandes hautes/basses vides des panneaux, en verre sombre discret.
   ========================================================================== */
.bubble-field { display: none; }
.bubble {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 12px;
  /* Verre sombre incrusté (fini le sticker plein qui criait) */
  background: rgba(28, 15, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.55);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0.62;                       /* discret : n'attire pas l'œil */
  pointer-events: none;
}
.bubble svg { width: 15px; height: 15px; }
.bubble b { font-weight: 800; font-size: 0.86rem; }
.bubble small { font-weight: 600; font-size: 0.68rem; opacity: 0.6; }
/* Accents de couleur uniquement sur les icônes/chiffres (pas de fond plein) */
.b-likes svg      { color: var(--np-rose); }
.b-comments svg   { color: var(--np-lavender); }
.b-views svg,
.b-views b        { color: var(--np-cyan); }
.b-play svg       { color: var(--np-cyan); }
.b-hashtag        { color: var(--np-cyan); font-weight: 800; }
.b-story .bubble-ico svg      { color: var(--np-cyan); }
.b-followers .bubble-ico.up svg { color: var(--np-cyan); }

.bubble--circle { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.bubble--circle svg { width: 18px; height: 18px; }
.bubble--card { padding: 8px 12px 8px 9px; }
.bubble-lines { display: flex; flex-direction: column; line-height: 1.15; }
.bubble-lines em { font-style: normal; font-weight: 600; font-size: 0.66rem; color: rgba(255,255,255,0.55); }
.bubble-lines b { font-weight: 800; font-size: 0.82rem; }
.bubble-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
}
.bubble-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--grad-brand);
  opacity: 0.8;
}
.bubble--tag { padding: 7px 12px; font-size: 0.8rem; }

/* Le contenu reste au-dessus du décor */
.contact-inner, .map-radar, .map-caption { position: relative; z-index: 2; }

/* Léger flottement (désactivé si l'utilisateur réduit les animations) */
@media (prefers-reduced-motion: no-preference) {
  .bubble { animation: floatY var(--fd, 8s) ease-in-out infinite alternate; animation-delay: var(--pd, 0s); }
  .b-likes { --fd: 7.5s; } .b-comments { --fd: 8s; } .b-views { --fd: 8.5s; }
  .b-play { --fd: 7s; } .b-follow { --fd: 9s; } .b-followers { --fd: 8.2s; }
  .b-story { --fd: 9.5s; } .b-hashtag { --fd: 7.8s; }
}
@keyframes floatY { from { transform: translateY(-5px); } to { transform: translateY(6px); } }

/* Affichées UNIQUEMENT quand l'écran est assez grand pour garantir zéro
   chevauchement (marges hautes/basses + latérales suffisantes). */
@media (min-width: 1280px) and (min-height: 780px) {
  .bubble-field { display: block; }
}

/* ==========================================================================
   MODALE CALENDLY — le calendrier se charge dans une bulle, sans quitter le site
   ========================================================================== */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(18, 8, 28, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}
.cal-modal.is-open { opacity: 1; visibility: visible; }
.cal-panel {
  position: relative;
  width: min(440px, 100%);
  height: min(720px, 92vh);
  border-radius: 20px;
  overflow: hidden;
  background: #2f173b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.cal-modal.is-open .cal-panel { transform: none; }
.cal-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(20, 10, 30, 0.7);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cal-close:hover { background: rgba(20, 10, 30, 0.95); transform: scale(1.05); }
.cal-close svg { width: 17px; height: 17px; }
.cal-frame { width: 100%; height: 100%; }
.cal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cal-loading {
  display: grid; place-items: center; height: 100%;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-head); font-size: 0.9rem;
}

/* ==========================================================================
   BULLE SERVICE — petit popover discret (pas de modale plein écran)
   ========================================================================== */
.svc-pop {
  position: fixed;
  z-index: 400;
  width: min(340px, calc(100vw - 24px));
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(46, 27, 66, 0.98), rgba(32, 18, 48, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(188, 107, 242, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  pointer-events: none;
}
.svc-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.svc-pop-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.svc-pop-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.svc-pop-close svg { width: 15px; height: 15px; }
.svc-pop-body { color: rgba(255, 255, 255, 0.82); }
.svc-pop-body .svc-eyebrow {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 8px;
  padding-right: 30px;
}
.svc-pop-body .svc-eyebrow--com   { color: var(--np-cyan); }
.svc-pop-body .svc-eyebrow--event { color: var(--np-violet); }
.svc-pop-body h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
  padding-right: 20px;
}
.svc-pop-body p {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}
.legal-body h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 8px;
  padding-right: 44px;
}
.legal-updated {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.legal-body h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 30px 0 10px;
}
.legal-body h3:first-of-type { margin-top: 0; }
.legal-body p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: #fff; font-weight: 600; }
.legal-body em { color: rgba(255, 255, 255, 0.7); }
.legal-body a { color: var(--np-cyan); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-body a:hover { color: #fff; }
.legal-contact {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 720px) {
  .legal-panel { max-height: 90vh; max-height: 90dvh; border-radius: 18px; }
  .legal-close { width: 40px; height: 40px; font-size: 1.5rem; top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-panel { transition: opacity 0.2s linear; transform: none; }
  .legal-modal.is-open .legal-panel { transform: none; }
  .legal-close:hover { transform: none; }
}

/* ==========================================================================
   PRELOADER « LOGO BUILD » — intro de marque (inspiration paloha.fr)
   Scène sombre continue. Le signe « .N » se balaie au centre, les lettres
   « eopure » sortent de derrière le signe (une seule image clippée →
   alignement parfait), la signature se pose, le compteur file à 100 %,
   puis cinq colonnes glissent vers le haut en cascade pour révéler le site.
   ========================================================================== */

/* Pendant le chargement : on fige le scroll de la page. */
html.np-loading, html.np-loading body { overflow: hidden; }

.np-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  color: #fff;
  overflow: hidden;
  /* L'overlay INTERCEPTE les clics pendant le chargement : sans ça, un tap
     traversait la scène et activait un lien/bouton invisible du site en dessous. */
  pointer-events: auto;
}
/* Dès que le rideau part, les clics passent au site (les colonnes glissent encore) */
.np-loader.is-done { pointer-events: none; }
.np-loader.is-gone { display: none; }

/* ---- Cinq colonnes qui, réunies, forment la scène sombre continue -------- */
/* Même monde que le site (world-bg), un cran plus sombre. Chaque colonne
   affiche SA tranche de la même image plein écran (position négative) →
   scène parfaitement continue, aucune couture. 1vw de chevauchement à
   droite pour qu'aucun liseré n'apparaisse entre colonnes. */
.np-cols i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 21vw;
  left: calc(var(--i) * 20vw);
  background-color: #23122f;
  background-image:
    radial-gradient(90% 70% at 50% -14%, rgba(194, 31, 240, 0.24), transparent 60%),
    radial-gradient(55% 50% at 16% 20%, rgba(53, 242, 242, 0.14), transparent 62%),
    radial-gradient(75% 62% at 86% 112%, rgba(120, 42, 165, 0.42), transparent 60%);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: calc(var(--i) * -20vw) 0;
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(0.1s + var(--i) * 0.07s);
}
.np-loader.is-done .np-cols i { transform: translateY(-101%); }

/* Bord de fuite : le bas de chaque colonne s'illumine d'une ligne dégradée
   au moment où elle décolle (même délai que sa course). */
.np-cols i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--grad-brand);
  box-shadow: 0 0 18px rgba(53, 242, 242, 0.8), 0 0 34px rgba(188, 107, 242, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  transition-delay: inherit;
}
.np-loader.is-done .np-cols i::after { opacity: 1; }

/* ---- Grain cinéma : texture animée quasi imperceptible sur la scène ------ */
.np-grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: npGrain 0.9s steps(2) infinite;
}
@keyframes npGrain {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2%, 1%); }
  50%      { transform: translate(1%, -2%); }
  75%      { transform: translate(-1%, 2%); }
}

/* ---- Méta de coins : micro-typo éditoriale, entrée douce ------------------ */
.np-corner {
  position: absolute;
  top: clamp(16px, 3.5vh, 30px);
  font-family: 'Gotham', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.55rem, 1.2vw, 0.66rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  opacity: 0;
  transform: translateY(8px);
}
.np-corner--tl { left:  clamp(18px, 4vw, 46px); animation: npRise 0.9s ease 0.55s forwards; }
.np-corner--tr { right: clamp(18px, 4vw, 46px); animation: npRise 0.9s ease 0.7s  forwards; }

/* ---- Lockup de marque (au-dessus des colonnes) --------------------------- */
.np-lockup {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.np-brand-box { position: relative; width: min(640px, 82vw); }

/* Géométrie MESURÉE dans le canal alpha du PNG (2611 × 548) :
   point x 15,9→18,7 % · N x 20,5→37,8 % · lettres x 37,2→83,9 %.
   Étape 1 (.is-mark)  : balayage du seul « .N » (clip 14→38 %), le signe
   étant recentré à l'écran via translateX(+24 %).
   Étape 2 (.is-open)  : le clip s'ouvre jusqu'à 88 % pendant que l'image
   revient à translateX(0) → les lettres sortent de derrière le signe et
   le lockup complet se recentre, comme sur paloha.fr. */
.np-brand-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  /* scale(1.07) : le signe arrive « proche caméra », puis se pose à 1 quand
     les lettres sortent → sensation de dolly-out, profondeur cinéma. */
  transform: translateX(24%) scale(1.07);
  /* Clips en POLYGONE 6 points (tous les états doivent partager le même
     nombre de points pour s'interpoler). État de départ : replié à x 14 %. */
  clip-path: polygon(14% 0%, 14% 0%, 14% 44.7%, 14% 44.7%, 14% 100%, 14% 100%);
  transition:
    clip-path 0.6s cubic-bezier(0.65, 0, 0.25, 1),
    opacity   0.3s ease;
}
.np-loader.is-mark .np-brand-img {
  opacity: 1;
  /* Le N (x fin 37,8 %) et le « e » (x début 37,15 %) SE CHEVAUCHENT en x :
     une coupe verticale sacrifie forcément l'un des deux. Mais pas en y —
     dans cette zone le N vit en haut (y ≤ 43,4 %) et le « e » en bas
     (y ≥ 46 %). D'où un bord droit EN ESCALIER, marche à y 44,7 % :
     38,2 % en haut → pointe du N entière ; 36,9 % en bas → zéro « e ». */
  clip-path: polygon(14% 0%, 38.2% 0%, 38.2% 44.7%, 36.9% 44.7%, 36.9% 100%, 14% 100%);
}
.np-loader.is-open .np-brand-img {
  /* Ouvert jusqu'à 88 % (fin des lettres + marge), escalier résorbé. */
  clip-path: polygon(14% 0%, 88% 0%, 88% 44.7%, 88% 44.7%, 88% 100%, 14% 100%);
  transform: translateX(0) scale(1);
  transition:
    clip-path 0.9s cubic-bezier(0.65, 0, 0.25, 1),
    transform 0.9s cubic-bezier(0.65, 0, 0.25, 1);
}

/* Signature sous les lettres, calée à droite du wordmark (comme la
   « AGENCE DE COM' » de la référence). */
.np-tagline {
  position: absolute;
  right: 12%;
  top: 97%;
  margin: 0;
  font-family: 'Gotham', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(0.58rem, 1.6vw, 0.78rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
}
/* Révélation en cascade : le JS découpe la signature en caractères, chacun
   portant son délai — .is-sign les fait monter l'un après l'autre. */
.np-tagline i,
.np-tagline .np-tag-ch {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.np-loader.is-sign .np-tagline i,
.np-loader.is-sign .np-tagline .np-tag-ch {
  opacity: 1;
  transform: translateY(0);
}
/* Mobile : la signature est plus large que le lockup → on la centre dessous. */
@media (max-width: 560px) {
  .np-tagline {
    right: 50%;
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    transform: translateX(50%);
  }
}

/* ---- Reflet lumineux qui balaie les lettres une fois le lockup posé ------ */
/* Même technique que le balayage : un faisceau réel qui court dans un calque
   masqué par la silhouette exacte du logo → il épouse les glyphes. */
.np-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url('../assets/brand/LOGO_SF_BLANC.png') center / 100% 100% no-repeat;
          mask: url('../assets/brand/LOGO_SF_BLANC.png') center / 100% 100% no-repeat;
  opacity: 0;
}
.np-loader.is-sign .np-shine { opacity: 1; }
.np-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 16%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%);
  transform: translateX(-130%) skewX(-14deg);
}
/* Un passage lent toutes les ~3 s : luxe discret, jamais insistant. */
.np-loader.is-sign .np-shine::before {
  animation: npShine 3s cubic-bezier(0.4, 0, 0.2, 1) 0.8s infinite;
}
@keyframes npShine {
  0%   { transform: translateX(-130%) skewX(-14deg); }
  42%  { transform: translateX(700%)  skewX(-14deg); }
  100% { transform: translateX(700%)  skewX(-14deg); }
}
.np-tagline b {
  font-weight: 500;
  color: transparent;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Respiration : micro-zoom très lent du lockup pendant l'attente — la scène
   reste vivante sans jamais attirer l'œil. */
.np-loader.is-sign .np-brand-box {
  animation: npBreath 7s ease-in-out 1s infinite;
}
@keyframes npBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ---- Sortie « push caméra » : le lockup zoome vers le spectateur avec un
   voile de flou pendant que les colonnes partent (déclarée APRÈS la
   respiration pour la remplacer). ---- */
.np-loader.is-done .np-brand-box {
  animation: npExitZoom 0.5s cubic-bezier(0.55, 0, 0.68, 0.19) forwards;
}
@keyframes npExitZoom {
  to {
    opacity: 0;
    transform: scale(1.16) translateY(-8px);
    filter: blur(8px);
  }
}

/* ---- Settle zoom : le hero se pose de 1.055 → 1 pendant la cascade des
   colonnes (appliqué à .hero-inner : aucun enfant en position fixed). ---- */
html.np-reveal .hero-inner {
  animation: npSettle 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes npSettle {
  from { transform: scale(1.055); }
  to   { transform: scale(1); }
}

/* ---- Progression : fine ligne en bas de l'écran -------------------------- */
.np-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.np-progress i {
  display: block;
  height: 100%;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(53, 242, 242, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- Compteur dégradé bas-droite, discret mais signature ------------------ */
.np-loader-count {
  position: absolute;
  right: clamp(18px, 5vw, 66px);
  bottom: clamp(16px, 5vh, 52px);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-family: 'Gotham', system-ui, sans-serif;
  font-weight: 700;
  line-height: 0.82;
  opacity: 0;
  transform: translateY(12px);
  animation: npRise 0.9s ease 0.4s forwards;
}
.np-loader-count span {
  font-size: clamp(2.6rem, 9vw, 6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: transparent;
  background: linear-gradient(120deg, #35F2F2 0%, #D694F2 45%, #BC6BF2 70%, #35F2F2 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: npSheen 2.6s linear infinite;
}
@keyframes npSheen { to { background-position: -220% 0; } }
.np-loader-count i {
  font-style: normal;
  font-weight: 300;
  font-size: clamp(0.9rem, 2.4vw, 1.5rem);
  color: var(--np-cyan);
  margin-bottom: clamp(0.3rem, 1.2vw, 0.9rem);
}
@keyframes npRise { to { opacity: 1; transform: translateY(0); } }

/* Compteur + ligne s'effacent avec le départ des colonnes (via une animation,
   car npRise en fill:forwards écraserait un simple opacity). Le compteur
   gonfle légèrement en partant — même langage « caméra » que le lockup. */
.np-loader.is-done .np-loader-count {
  transform-origin: 100% 100%;
  animation: npCountExit 0.35s ease forwards;
}
.np-loader.is-done .np-progress,
.np-loader.is-done .np-grain {
  animation: npFadeOut 0.3s ease forwards;
}
/* Les coins s'élèvent en partant. Transform défini aux DEUX bornes : sans ça,
   remplacer npRise (fill: forwards) ferait retomber l'élément sur sa base
   (translateY 8-12 px) → saut visible au premier frame de la sortie. */
.np-loader.is-done .np-corner {
  animation: npCornerExit 0.3s ease forwards;
}
@keyframes npCornerExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes npCountExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(0) scale(1.12); }
}
@keyframes npFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ---- Accessibilité : mouvement réduit → lockup complet, sortie en fondu --- */
@media (prefers-reduced-motion: reduce) {
  .np-brand-img {
    opacity: 1;
    transform: none;
    clip-path: inset(0 12% 0 14%);
    transition: none;
  }
  /* Ne pas toucher au transform du conteneur : il porte le centrage mobile. */
  .np-tagline { opacity: 1; transition: none; }
  .np-tagline i, .np-tagline .np-tag-ch { opacity: 1; transform: none; transition: none; }
  .np-shine, .np-grain { display: none; }
  .np-corner { animation: none; opacity: 1; transform: none; }
  .np-loader-count { animation: none; opacity: 1; transform: none; }
  .np-loader-count span {
    animation: none;
    color: var(--np-cyan);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .np-cols i { transition: opacity 0.3s linear; transition-delay: 0s; }
  .np-loader.is-done .np-cols i { transform: none; opacity: 0; }
  .np-loader.is-sign .np-brand-box { animation: none; }
  .np-loader.is-done .np-brand-box { animation: npFadeOut 0.3s linear forwards; }
  .np-loader.is-done .np-loader-count { animation: npFadeOut 0.3s linear forwards; }
  html.np-reveal .hero-inner { animation: none; }
}

/* ============================================================
   BARRES DE DÉFILEMENT MASQUÉES — PARTOUT, TOUS SYSTÈMES
   ============================================================
   macOS n'affiche les barres en overlay (invisibles au trackpad) que si
   « Réglages Système > Apparence > Afficher les barres de défilement » est
   sur « Automatiquement ». Réglé sur « Toujours » (ou avec une souris à
   molette branchée), la barre devient permanente et prend de la place :
   elle apparaissait sur le formulaire de contact en mode frise et dans les
   panneaux légaux. Windows/Linux l'affichent en permanence par défaut.
   On la masque donc globalement — le défilement, lui, reste actif (molette,
   trackpad, tactile, clavier, glisser). À garder en fin de fichier : toute
   règle qui redemanderait `scrollbar-width: thin` ou styliserait
   ::-webkit-scrollbar sur un sélecteur de classe l'emporterait par
   spécificité, donc ne pas en réintroduire. */
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* anciens Edge / IE */
}
*::-webkit-scrollbar {            /* Chrome, Safari, Edge, navigateurs iOS */
  width: 0;
  height: 0;
  display: none;
}