/* =================================================================
   STUDIO — Vitrine portfolio de templates
   Design system : sombre élégant, aurora, glassmorphism
   Typo : Space Grotesk (titres) + Inter (texte)
   ================================================================= */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS (variables)
   ---------------------------------------------------------------- */
:root {
  /* Couleurs de base */
  --bg:            #07070b;
  --bg-2:          #0c0c14;
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-2:     rgba(255, 255, 255, 0.06);
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Texte */
  --text:    #f4f4f8;
  --text-2:  #b6b8c6;
  --text-3:  #7c7f93;

  /* Accents / dégradés */
  --accent-1: #7c5cff;   /* violet */
  --accent-2: #00e0c6;   /* cyan / mint */
  --accent-3: #ff5ca2;   /* rose */
  --grad: linear-gradient(120deg, var(--accent-1), var(--accent-2));
  --grad-warm: linear-gradient(120deg, var(--accent-3), var(--accent-1));

  /* Échelle d'espacement (cohérente, base 4) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Rayons */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --glow: 0 0 40px rgba(124, 92, 255, 0.35);

  /* Transitions */
  --t-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-mid:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --maxw: 1200px;
  --header-h: 74px;

  /* Typo */
  --font-title: "Space Grotesk", system-ui, sans-serif;
  --font-body:  "Inter", system-ui, -apple-system, sans-serif;
}

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 1rem;
  /* clip (et non hidden) : hidden ferait du body un conteneur de scroll,
     ce qui casserait le position:sticky des filtres de la galerie.
     Le fallback hidden reste pour les très vieux navigateurs. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Halo de fond global subtil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(124, 92, 255, 0.10), transparent 60%),
    radial-gradient(50% 50% at 90% 10%, rgba(0, 224, 198, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

::selection { background: var(--accent-1); color: #fff; }

/* Focus accessible global */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  position: relative;
  z-index: 1;
}

/* Titre porté par la structure du document mais pas par le dessin : lu par les lecteurs
   d'écran et par les robots, invisible à l'œil. Jamais utilisé pour cacher du texte
   promotionnel, uniquement pour rattraper un niveau de titre manquant. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   3. BOUTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { transition: transform var(--t-fast); }

.btn--solid {
  background: var(--grad);
  color: #0a0a12;
  box-shadow: 0 6px 24px rgba(124, 92, 255, 0.35);
}
.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(124, 92, 255, 0.5);
}
.btn--solid:hover svg { transform: translateX(3px); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: var(--accent-2);
}

.btn--lg { padding: 0.95rem 1.7rem; font-size: 1rem; }

/* ----------------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid), border-color var(--t-mid), backdrop-filter var(--t-mid), box-shadow var(--t-mid);
  border-bottom: 1px solid transparent;
}
/* Densification au scroll (classe ajoutée en JS) */
.header.is-scrolled {
  background: rgba(8, 8, 14, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.logo__mark { flex-shrink: 0; }
.logo__dot { color: var(--accent-2); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.7rem);
}
.nav__link {
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  padding: 0.3rem 0;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__cta { margin-left: 0.4rem; }

/* Burger mobile */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Voile (backdrop) du tiroir tablette — masqué PARTOUT par défaut.
   L'élément .nav-scrim est créé en JS et injecté dans <body> ; il ne
   doit être visible (display:block) que dans la tranche tablette
   (601px → breakpoint burger). Déclaré AVANT les media queries pour
   que l'override tablette l'emporte sur l'ordre de cascade.
   -> garantit display:none en desktop ET en mobile plein écran. */
.nav-scrim { display: none; }

/* ----------------------------------------------------------------
   4b. SÉLECTEUR DE LANGUE (FR | NL) — commutateur segmenté
   ---------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin-left: 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}
/* Depuis V1-06 ce sont des <a href> vers l'autre langue (et non plus des <button>) : on fixe
   display, décoration et curseur pour que la pastille garde exactement la même géométrie. */
.lang-switch__btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-3);
  padding: 0.38rem 0.66rem;
  border-radius: var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.lang-switch__btn:hover { color: var(--text); }
.lang-switch__btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
/* État actif : pastille dégradée cohérente avec les boutons solides.
   « active » est posée par setLang(), « aria-current » est déjà dans le HTML servi : depuis
   que la page est lisible sans JavaScript, c'est l'attribut qui dit la langue courante au
   visiteur comme au robot. setLang() garde les deux en phase, ils ne divergent jamais. */
.lang-switch__btn.active,
.lang-switch__btn[aria-current] {
  color: #0a0a12;
  background: var(--grad);
  box-shadow: 0 2px 10px rgba(124, 92, 255, 0.35);
}

/* Le commutateur du menu mobile est masqué en desktop, et inversement */
.lang-switch--mobile { display: none; }

@media (max-width: 820px) {
  /* En mobile : on cache la version desktop et on montre celle du menu burger */
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile {
    display: inline-flex;
    align-self: center;
    margin: var(--sp-4) 0 0;
  }
}

/* ----------------------------------------------------------------
   5. AURORA / DÉCOR
   ---------------------------------------------------------------- */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.aurora__blob--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--accent-1), transparent 70%);
  top: -120px; left: -80px;
  animation: float1 18s ease-in-out infinite;
}
.aurora__blob--2 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  top: 10%; right: -100px;
  animation: float2 22s ease-in-out infinite;
}
.aurora__blob--3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
  bottom: -120px; left: 30%;
  opacity: 0.4;
  animation: float3 26s ease-in-out infinite;
}
.aurora--soft .aurora__blob { opacity: 0.3; }

@keyframes float1 { 50% { transform: translate(60px, 50px) scale(1.1); } }
@keyframes float2 { 50% { transform: translate(-50px, 40px) scale(1.08); } }
@keyframes float3 { 50% { transform: translate(40px, -40px) scale(1.12); } }

/* Grille en surimpression */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------------------------------------------
   6. HERO
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-9);
  overflow: hidden;
}
.hero__inner { text-align: center; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  margin-bottom: var(--sp-5);
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(0, 224, 198, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 224, 198, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 224, 198, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 224, 198, 0); }
}

.hero__title {
  font-size: clamp(2.4rem, 7.5vw, 5.2rem);
  font-weight: 700;
  margin-bottom: var(--sp-5);
}
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Paragraphe de réponse directe, juste sous le H1 : les faits (qui, où, combien, quoi) en
   une fois, pour un visiteur pressé comme pour un assistant qui cite un extrait de page.
   Volontairement plus discret que le lead commercial qui suit. */
.hero__intro {
  max-width: 720px;
  margin: 0 auto var(--sp-4);
  /* Même encre que le lead commercial qui suit : ce paragraphe est la réponse factuelle,
     il reste plus discret par sa TAILLE, jamais plus terne que le texte de vente. */
  color: var(--text-2);
  font-size: clamp(0.92rem, 1.6vw, 1rem);
  line-height: 1.6;
}

.hero__lead {
  max-width: 640px;
  margin: 0 auto var(--sp-6);
  color: var(--text-2);
  font-size: clamp(1.02rem, 2vw, 1.18rem);
}

.hero__cta {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-9);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: 780px;
  margin: 0 auto;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.hero__stat dt {
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
}
.hero__stat .unit { color: var(--accent-2); }
.hero__stat dd {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Indicateur de scroll */
.scroll-hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.scroll-hint__mouse {
  display: block;
  width: 24px; height: 38px;
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  position: relative;
}
.scroll-hint__mouse::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 7px;
  border-radius: 2px;
  background: var(--accent-2);
  animation: scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ----------------------------------------------------------------
   7. SECTION HEADINGS (génériques)
   ---------------------------------------------------------------- */
.section-head {
  max-width: 680px;
  margin: 0 auto var(--sp-8);
  text-align: center;
}
.section-head__eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--sp-3);
}
.section-head__title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: var(--sp-4);
}
.section-head__lead {
  color: var(--text-2);
  font-size: clamp(1rem, 2vw, 1.1rem);
}

/* ----------------------------------------------------------------
   8. BANDEAU DE VALEURS
   ---------------------------------------------------------------- */
.values {
  padding-block: var(--sp-9);
  position: relative;
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  backdrop-filter: blur(8px);
  transition: transform var(--t-mid), border-color var(--t-mid), background var(--t-mid);
}
.value-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.value-card__icon {
  display: inline-grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,224,198,.14));
  color: var(--accent-2);
  margin-bottom: var(--sp-4);
}
.value-card__title { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.value-card__text { color: var(--text-2); font-size: 0.92rem; }

/* ----------------------------------------------------------------
   9. GALERIE DE TEMPLATES — grille « coup d'œil »
   ----------------------------------------------------------------
   10 cartes compactes et uniformes : capture en vedette, nom +
   secteur sous l'image, palette/tags/CTA révélés au survol/focus.
   Barre de filtres par famille, sticky en tête de galerie.
   ---------------------------------------------------------------- */
.gallery { padding-block: var(--sp-9); position: relative; }

/* Conteneur élargi : la grille dense respire sur grand écran */
.gallery > .container { max-width: 1320px; }

/* --- Barre de filtres (chips sticky) --- */
.gfilters {
  position: sticky;
  top: calc(var(--header-h) + 10px);
  z-index: 20;
  display: flex;
  gap: var(--sp-1);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--sp-7);
  padding: 6px;
  background: rgba(10, 10, 16, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-sm);
  /* Mobile : chips défilables horizontalement, scrollbar masquée */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gfilters::-webkit-scrollbar { display: none; }

.gfilter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1;
  color: var(--text-2);
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.gfilter:hover { color: var(--text); background: var(--surface-2); }
/* Focus interne : jamais rogné par l'overflow du conteneur sticky */
.gfilter:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
.gfilter__count {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.24rem 0.46rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.gfilter.is-active {
  color: #0a0a12;
  background: var(--grad);
  box-shadow: 0 4px 18px rgba(124, 92, 255, 0.35);
}
.gfilter.is-active .gfilter__count {
  background: rgba(10, 10, 18, 0.22);
  color: #0a0a12;
}

/* --- Grille dense : 4 colonnes desktop, uniforme --- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

/* --- Carte compacte : toute la carte est un lien --- */
.gallery__grid .gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* opacity/transform : partagés par le reveal ET le filtrage (fluide) */
  transition:
    opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.gallery__grid .gcard:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
/* États de filtrage (pilotés en JS) */
.gallery__grid .gcard.is-leaving {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
.gallery__grid .gcard.is-hidden { display: none; }

/* Barre navigateur minimale : 3 pastilles + domaine */
.gcard__chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
}
.gcard__dots { display: inline-flex; gap: 4px; }
.gcard__dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: block;
}
.gcard__dots i:nth-child(1) { background: #ff5f57; }
.gcard__dots i:nth-child(2) { background: #febc2e; }
.gcard__dots i:nth-child(3) { background: #28c840; }
.gcard__url {
  flex: 1;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--text-3);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.14rem 0.6rem;
  border-radius: var(--r-pill);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Capture en vedette (ratio proche du webp 1280×812) */
.gcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0a0a0f;
}
/* Fallback dégradé : visible au chargement et si la capture manque */
.gcard__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  text-align: center;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  z-index: 0;
}
.gcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gcard:hover .gcard__img { transform: scale(1.05); }

/* Voile au survol : palette + tags clés + « Aperçu en direct » */
.gcard__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.8rem;
  background: linear-gradient(180deg, rgba(7, 7, 11, 0.12) 0%, rgba(7, 7, 11, 0.88) 82%);
  opacity: 0;
  transition: opacity var(--t-mid);
}
.gcard:hover .gcard__veil,
.gcard:focus-visible .gcard__veil { opacity: 1; }

.gcard__cta {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -30%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #0a0a12;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-mid);
}
.gcard:hover .gcard__cta,
.gcard:focus-visible .gcard__cta { transform: translate(-50%, -50%); }

.gcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.gcard__tag {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  padding: 0.28rem 0.55rem;
  border-radius: var(--r-pill);
}

.gcard__swatches { display: flex; gap: 0.35rem; }
.gcard__swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Bandeau d'identité : nom + secteur, flèche d'action à droite */
.gcard__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.75rem 0.9rem 0.85rem;
}
.gcard__meta { min-width: 0; }
/* .gcard__name est un h3 (le nom du modèle est un vrai titre) : la marge par défaut du
   navigateur est neutralisée, la taille et la graisse sont fixées ici. Rendu inchangé. */
.gcard__name {
  display: block;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}
.gcard__sector {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.gcard__arrow {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.gcard:hover .gcard__arrow,
.gcard:focus-visible .gcard__arrow {
  background: var(--grad);
  border-color: transparent;
  color: #0a0a12;
}

/* --- Breakpoints propres à la galerie --- */
@media (max-width: 1120px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------
   10. PROCESS / ÉTAPES
   ---------------------------------------------------------------- */
.process { padding-block: var(--sp-9); position: relative; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  backdrop-filter: blur(8px);
  transition: transform var(--t-mid), border-color var(--t-mid);
}
.step:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.step__num {
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.85;
}
.step__icon {
  position: absolute;
  top: var(--sp-6); right: var(--sp-5);
  color: var(--text-3);
}
.step__title { font-size: 1.3rem; margin: var(--sp-3) 0 var(--sp-2); }
.step__text { color: var(--text-2); font-size: 0.93rem; }

/* ----------------------------------------------------------------
   11. POURQUOI ME CHOISIR
   ---------------------------------------------------------------- */
.why { padding-block: var(--sp-9); position: relative; }
.why__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.why__intro { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.why__intro .section-head__eyebrow,
.why__intro .section-head__title,
.why__intro .section-head__lead { text-align: left; margin-left: 0; }
.why__intro .section-head__title { max-width: none; }
.why__cta { margin-top: var(--sp-5); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.benefit {
  display: flex;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: transform var(--t-mid), border-color var(--t-mid), background var(--t-mid);
}
.benefit:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.benefit__icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(124,92,255,.2), rgba(0,224,198,.16));
  color: var(--accent-2);
}
.benefit__title { font-size: 1.05rem; margin-bottom: 0.2rem; }
.benefit__text { color: var(--text-2); font-size: 0.88rem; }

/* ----------------------------------------------------------------
   12. CONTACT / FORMULAIRE
   ---------------------------------------------------------------- */
.contact {
  padding-block: var(--sp-9);
  position: relative;
  overflow: hidden;
}
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  backdrop-filter: blur(10px);
}
.contact__intro .section-head__eyebrow,
.contact__intro .section-head__title,
.contact__intro .section-head__lead { text-align: left; margin-left: 0; }
.contact__intro .section-head__title { max-width: none; }

.contact__list { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.contact__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-2);
  font-size: 0.95rem;
}
.contact__item a { transition: color var(--t-fast); }
.contact__item a:hover { color: var(--accent-2); }
.contact__ico {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-2);
  flex-shrink: 0;
}

/* Form */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22);
  background: rgba(0, 0, 0, 0.4);
}
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(255, 92, 162, 0.18);
}
.field__error {
  font-size: 0.78rem;
  color: var(--accent-3);
  min-height: 1em;
}

/* Select stylisé */
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}
.select-wrap select option { background: var(--bg-2); color: var(--text); }
.select-wrap__chevron {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.form__submit { justify-content: center; margin-top: var(--sp-2); }

/* L'attribut hidden doit l'emporter sur le display:flex ci-dessous
   (sans cette règle, le message de succès serait visible en permanence). */
.form__success[hidden] { display: none; }

.form__success {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent-2);
  font-weight: 500;
  font-size: 0.95rem;
  background: rgba(0, 224, 198, 0.08);
  border: 1px solid rgba(0, 224, 198, 0.3);
  padding: 0.8rem 1rem;
  border-radius: var(--r-md);
  animation: fadeUp 0.5s var(--t-slow);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-9);
  margin-top: var(--sp-8);
  position: relative;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
}
.footer__tagline {
  color: var(--text-2);
  font-size: 0.92rem;
  margin: var(--sp-4) 0 var(--sp-5);
  max-width: 320px;
}
.socials { display: flex; gap: 0.6rem; }
.social {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.social:hover {
  transform: translateY(-3px);
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: var(--surface-2);
}

.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 0.3rem;
}
.footer__col a {
  color: var(--text-2);
  font-size: 0.92rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer__col a:hover { color: var(--text); padding-left: 4px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 0.85rem;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   14. ANIMATIONS AU SCROLL (reveal)
   ----------------------------------------------------------------
   La règle « .reveal » garde volontairement sa spécificité d'origine (une seule
   classe) : plusieurs composants qui portent aussi cette classe (.gcard, .pcard,
   .mini, .faq__item) déclarent leur propre transition, et toute montée de
   spécificité ici écraserait la leur, fond et bordure compris.
   C'est donc la règle INVERSE qui est conditionnée : sans JavaScript (et donc
   pour un robot de moteur ou d'assistant IA qui n'en exécute pas), la classe
   « js » n'est jamais posée sur <html> et rien n'est en opacity: 0, la page
   entière est lisible telle qu'elle est servie.
   .reveal.is-visible passe après et gagne à spécificité égale. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--t-slow), transform 0.7s var(--t-slow);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Le script en ligne du <head> pose « js » sur <html>. S'il n'a pas tourné,
   ce sélecteur (0,2,1) l'emporte et tout le contenu reste peint. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}
/* Léger décalage en cascade dans les grilles.
   NB : pas de délai sur les .gcard de la galerie — un transition-delay
   ralentirait aussi l'animation de filtrage par famille. */
.values__grid .value-card:nth-child(2) { transition-delay: 0.06s; }
.values__grid .value-card:nth-child(3) { transition-delay: 0.12s; }
.values__grid .value-card:nth-child(4) { transition-delay: 0.18s; }
.steps .step:nth-child(2) { transition-delay: 0.08s; }
.steps .step:nth-child(3) { transition-delay: 0.16s; }

/* ----------------------------------------------------------------
   15. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .why__inner { grid-template-columns: 1fr; }
  .why__intro { position: static; }
  .contact__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  /* ------------------------------------------------------------
     NAVIGATION MOBILE — overlay plein écran
     ------------------------------------------------------------
     Le panneau ne sort JAMAIS du viewport (pas de translateX ni
     de position négative) : il reste calé sous le header, plein
     largeur, et est masqué via opacity/visibility à l'état fermé.
     -> garantit document.scrollWidth === viewport (pas de scroll-x).
     ------------------------------------------------------------ */
  .burger { display: flex; }

  .nav {
    position: fixed;
    /* Démarre sous le header pour laisser le burger cliquable au-dessus */
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    /* Garde-fous anti débordement horizontal */
    width: 100%;
    max-width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: clamp(1.5rem, 5vw, 2rem) clamp(1.1rem, 4vw, 2rem) calc(env(safe-area-inset-bottom, 0px) + var(--sp-7));
    /* Fond opaque (couvre le contenu de la page) + flou */
    background: linear-gradient(180deg, rgba(10, 10, 18, 0.99), rgba(7, 7, 11, 0.99));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;            /* défilement interne si beaucoup d'éléments */
    overflow-x: hidden;          /* garde-fou : aucun débordement horizontal interne */
    overscroll-behavior: contain;
    z-index: 90;                 /* sous le header (z-index:100) -> burger cliquable */

    /* ÉTAT FERMÉ : masqué sans sortir du viewport */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px); /* micro-décalage vertical, jamais horizontal */
    transition: opacity var(--t-mid), transform var(--t-mid), visibility 0s linear var(--t-mid);
  }

  /* ÉTAT OUVERT */
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--t-mid), transform var(--t-mid), visibility 0s;
  }

  /* Le voile reste masqué en mobile plein écran : il est géré par la
     règle globale .nav-scrim{display:none} et n'est activé que dans la
     tranche tablette (601px → breakpoint burger). */

  /* Liens : grandes zones tactiles, espacés */
  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.85rem 0.5rem 0.85rem 0.85rem;
    border-radius: var(--r-md);
    font-size: 1.18rem;
    font-weight: 500;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: color var(--t-fast), background var(--t-fast);
  }
  .nav__link::after { display: none; }
  /* Barre d'accent verticale (dégradé indigo→cyan de la marque) */
  .nav__link::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 22px;
    border-radius: 3px;
    background: var(--grad);
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform var(--t-fast);
  }
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link:active {
    color: var(--accent-2);
    background: rgba(0, 224, 198, 0.16);
  }
  .nav__link:hover::before,
  .nav__link:focus-visible::before,
  .nav__link:active::before {
    transform: translateY(-50%) scaleY(1);
  }

  /* Téléphone cliquable, intégré au menu mobile */
  .nav__phone {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 48px;
    padding: 0.85rem 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nav__phone svg { color: var(--accent-2); flex-shrink: 0; }
  .nav__phone:hover { color: var(--accent-2); }

  /* CTA pleine largeur */
  .nav__cta {
    margin: var(--sp-5) 0 0;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
  }

  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

/* ------------------------------------------------------------
   NAVIGATION TABLETTE — tiroir latéral (601px → breakpoint burger)
   ------------------------------------------------------------
   Sur tablette, l'overlay plein écran devient un tiroir ancré à
   droite, accompagné d'un voile sombre cliquable. Le panneau reste
   en position:fixed (jamais de translateX) ; seul son ancrage et sa
   largeur changent. Le téléphone en position:fixed du header reste
   au-dessus, donc le burger demeure cliquable.
   ------------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 820px) {
  .nav {
    left: auto;
    right: 0;
    width: min(80vw, 400px);
    border-top: none;
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .5);
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89;                 /* juste sous le panneau (z-index:90) */
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s, visibility .3s;
  }
  .nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Le téléphone du menu mobile est masqué hors menu burger (desktop) */
.nav__phone { display: none; }

/* Verrou de scroll du body quand le menu mobile est ouvert.
   overflow:hidden bloque le défilement vertical ; overscroll-behavior
   empêche le « scroll chaining » (rebond de la page derrière l'overlay). */
body.nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Mouvement réduit : pas de translation, transition de fondu minimale */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .nav { transform: none; transition: opacity 0.001ms, visibility 0s linear 0.001ms; }
  .nav.is-open { transform: none; transition: opacity 0.001ms, visibility 0s; }
}

@media (max-width: 560px) {
  :root { --header-h: 64px; }
  .values__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* Galerie mobile : 2 colonnes compactes, filtres défilables */
  .gallery__grid { gap: 0.7rem; }
  .gfilters { top: calc(var(--header-h) + 8px); margin-bottom: var(--sp-6); }
  .gcard__name { font-size: 0.92rem; }
  .gcard__sector { font-size: 0.6rem; }
  .gcard__arrow { width: 26px; height: 26px; }
  .gcard__info { padding: 0.6rem 0.7rem 0.7rem; }
  .gcard__fallback { font-size: 0.9rem; }
}

/* ----------------------------------------------------------------
   16. PRÉFÉRENCE : MOUVEMENT RÉDUIT
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Même spécificité que « .reveal » du §14, mais plus loin dans la feuille : le contenu
     reste peint pour qui demande un mouvement réduit. */
  .reveal { opacity: 1; transform: none; }
  .aurora__blob { animation: none; }
}