/* ===================================================================
   BOUSSOLUTION — Landing static
   Stack : vanilla HTML/CSS/JS, zéro dépendance, zéro build
   =================================================================== */

/* ===================================================================
   LIQUID GLASS NAVBAR — port vanilla du 21st.dev/r/suraj-xd/liquid-glass
   4 layers superposés : (1) backdrop-blur + SVG distortion filter ·
   (2) tint blanc translucide · (3) inset shadow bevel · (4) contenu.
   =================================================================== */

/* Cache le SVG <defs> qui sert juste à exposer le filter */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: hidden;
}

.liquid-nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;       /* la pill se compresse vers le haut quand on hide */
  z-index: 100;                       /* > liquid-bg-canvas (z=50), au-dessus de tout */
  max-width: calc(100vw - 2rem);
  font-family: 'Inter', system-ui, sans-serif;
  /* Transition pour l'animation scroll : compress + disappear */
  transition:
    transform 0.45s cubic-bezier(0.5, 0, 0.2, 1),
    opacity   0.35s cubic-bezier(0.5, 0, 0.2, 1);
}
/* État caché : la pill se ramasse vers le haut puis fade */
.liquid-nav.is-hidden {
  transform: translateX(-50%) translateY(-130%) scale(0.6, 0.3);
  opacity: 0;
  pointer-events: none;
}

.liquid-nav__pill {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 9999px;
  box-shadow:
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.1);
  transition: padding 0.7s cubic-bezier(0.175, 0.885, 0.32, 2.2),
              border-radius 0.7s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

/* Couche 1 — backdrop blur léger + SVG distortion subtil */
.liquid-nav__layer--blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#glass-distortion);
  isolation: isolate;
}

/* Couche 2 — tint blanc translucide (plus marqué pour compenser le blur réduit) */
.liquid-nav__layer--tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.22);
}

/* Couche 3 — inset shadow (highlight bord intérieur) */
.liquid-nav__layer--inset {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.35);
}

/* Couche 4 — contenu réel */
.liquid-nav__content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 0.7rem 0.5rem 1.5rem;
  color: #fff;
}

.liquid-nav__brand {
  /* Logo "boussolution" / "bslt" en Cinema Italic (Inter Black 900 italic + skew) */
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: -0.05em;
  color: #fff;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.25s ease;
  white-space: nowrap;
  display: inline-block;
}
.liquid-nav__brand-full,
.liquid-nav__brand-short { transform: skewX(-6deg); display: inline-block; }
.liquid-nav__brand:hover { color: #f3e8d8; }

.liquid-nav__brand-short { display: none; }

/* ============================================================ *
 *  BRAND LOGO — Cinema Italic (variant B du demo-logo)         *
 *  Inter Black 900 italic + skew 6° + tracking serré           *
 *  Utilisé partout : nav, footer, loader, headers légaux       *
 * ============================================================ */
.brand-logo {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.06em;
  transform: skewX(-6deg);
  display: inline-block;
  text-transform: lowercase;
  line-height: 1;
}

.liquid-nav__links {
  list-style: none;
  margin: 0;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.liquid-nav__links a {
  display: inline-block;
  padding: 0.55rem 0.85rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 999px;
  /* Transitions découplées : background/glow rapide, transform plus ample
     (le JS magnetic l'écrit) → reviens en douceur quand mouseleave. */
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.liquid-nav__links a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 0 24px rgba(184, 134, 90, 0.22);
}

/* Bouton ⋯ menu : visible uniquement sur mobile */
.liquid-nav__menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.liquid-nav__menu-toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* ============================================================ *
 *  FAB Prendre RDV — bouton flottant amber, toujours visible    *
 * ============================================================ */
.nav-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem 0.85rem 0.7rem;
  background: #EF4444;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  box-shadow:
    0 14px 40px rgba(239, 68, 68, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 22px 56px rgba(239, 68, 68, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
/* Le FAB se ramasse quand le visiteur arrive sur le contact OU le footer
   (le vrai CTA est déjà sous ses yeux). Évite le chevauchement. */
.nav-fab.is-hidden {
  transform: translateY(140%) scale(0.8);
  opacity: 0;
  pointer-events: none;
}
.nav-fab__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ============================================================ *
 *  Drawer mobile — overlay full-screen au tap sur ⋯             *
 * ============================================================ */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.nav-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nav-drawer__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}
.nav-drawer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.nav-drawer__links a {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-drawer__links a:hover,
.nav-drawer__links a:focus { color: #B8865A; }

@media (max-width: 768px) {
  .liquid-nav { top: 0.75rem; }
  .liquid-nav__content { gap: 0.6rem; padding: 0.4rem 0.5rem 0.4rem 1rem; }
  .liquid-nav__brand-full { display: none; }
  .liquid-nav__brand-short { display: inline; font-size: 0.72rem; letter-spacing: 0.15em; }
  .liquid-nav__links { display: none; }
  .liquid-nav__menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-fab { bottom: 1rem; right: 1rem; padding: 0.7rem 1.1rem 0.7rem 0.55rem; font-size: 0.78rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
  .nav-fab:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
  .nav-fab__icon { width: 20px; height: 20px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-nav__pill { transition: none; }
  .liquid-nav__links a { transition: background 0.2s, color 0.2s; }
}


/* ---------- Tokens ---------- */
:root {
  /* Bg + texte — HOME en dark #141414 (raccord avec le loader + le hero topo).
     L'ancien --bg-screen blanc transparaissait sur mobile (le WebGL liquide
     desktop masquait le problème, pas mobile). Texte clair en conséquence. */
  --bg-screen:        #141414;                     /* dark home, raccord loader + hero */
  --text-primary:     #f5f5f5;                     /* texte clair sur fond sombre */
  --text-muted:       rgba(245, 245, 245, 0.55);   /* labels muted */
  --text-faint:       rgba(245, 245, 245, 0.35);

  /* Accent bronze patiné (cohérent logo B 3D) */
  --bronze:           #B8865A;
  --bronze-light:     #E0B870;
  --bronze-deep:      #8B6B3D;

  /* LOADER — fond noir absolu + barre rouge vif (demande Nej) */
  --loader-bg:        #000000;                     /* noir absolu */
  --loader-text:      #F5F1EA;                     /* "Bienvenue" lisible sur noir */
  --flux-from:        #FF1A1A;                     /* rouge vif intense */
  --flux-to:          #FF5252;                     /* rouge vif clair pour la fin du sweep */

  /* Type */
  --font-sans:        'Switzer', system-ui, -apple-system, sans-serif;
  --font-mono:        'Geist Mono', ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html {
  /* Smooth scroll global pour les ancres internes (#outil, #methode, #avis…) */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-screen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;

  /* ---------- Feel "showroom" type Lusion ----------
     Tout le texte est non-sélectionnable par défaut → le site se comporte
     comme un objet immersif, pas comme une page web classique. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}

/* Images et vidéos : aucune sélection, aucun drag (= aucun "enregistrer
   l'image" via drag), aucun callout iOS. Le clic-droit est aussi bloqué
   en JS (cf. main.js initNoCopy). */
img, video, picture, svg, canvas {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;       /* on garde les hover/click sur les cards */
}
body.is-revealed { overflow: auto; }

/* Exceptions : les éléments cliquables/interactifs gardent leur comportement */
a, button, .halide-cta, .case__cta-btn, .case__back, .work-card,
input, textarea, select, [contenteditable], [role="button"] {
  user-select: auto;
  -webkit-user-select: auto;
}
a, button, .halide-cta, .case__cta-btn, .case__back, .work-card,
[role="button"] {
  cursor: pointer;
}

/* ===================================================================
   GRAIN GLOBAL — visible sur toutes les sections (héro + suivantes)
   =================================================================== */

/* PERF — grain en data-URI SVG tilable plutôt que filter:url(#siteGrain)
   Le filtre SVG fullscreen était un repaint shader à chaque frame (coûteux).
   Ici la texture est rasterisée 1× par le browser puis tilée → ~0 coût/frame.
   feTurbulence stitchTiles='stitch' = pas de jonction visible à la tile. */
.site-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.22;                    /* grain photo argentique perceptible sur fond brun */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}


/* ===================================================================
   LOADER SCREEN
   Port du ProgressiveFluxLoader (React/framer-motion) en vanilla CSS/JS
   - Bar fill + sweep (sheen)
   - 3D fly-in label avec letter stagger
   - Phases configurées dans main.js
   =================================================================== */

.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #141414;            /* même bg que le body (cohérence visuelle) */
  color: #fff;
  padding: 24px;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.loader-screen.is-fading { opacity: 0; pointer-events: none; }

/* ---------- Barcode loader : texte italique + barre rouge qui balaie en cycle.
   Reproduction fidèle des keyframes 21st.dev (muhammad-binsalman/animated-scan-loader) :
     scan (barre) : 0% top:0 → 25% top:54px → 50% top:0 → 75% top:54px → 100% top:0
     cut (texte)  : 0% visible → 25% clip haut → 50% clip bas → 75% visible → 100% visible
   La barre fait un aller-retour pendant que le texte se découpe en synchro. */
.barcode-loader {
  position: relative;
  width: max-content;
  font-size: 64px;
  font-style: italic;
  font-weight: 900;                              /* Cinema Italic — match brand logo */
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: #f3f4f6;
  transition: color 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: default;
  line-height: 1;
}
.barcode-loader__text { transform: skewX(-6deg); }
.barcode-loader:hover { color: #FCFFDF; }
.barcode-loader__text {
  display: inline-block;
  position: relative;
  z-index: 2;
  animation: barcodeCut 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
.barcode-loader__scan-glow,
.barcode-loader__scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 4px;
  animation: barcodeScan 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  will-change: top;
  pointer-events: none;
}
.barcode-loader__scan-glow {
  height: 6px;
  background: #FF828291;
  filter: blur(10px);
  top: 0;
  z-index: 0;
}
.barcode-loader__scan-line {
  height: 5px;
  background: #FF8282;
  opacity: 0.9;
  top: 0;
  z-index: 1;
}

@keyframes barcodeScan {
  0%   { top: 0px; }
  25%  { top: 54px; }
  50%  { top: 0px; }
  75%  { top: 54px; }
}
@keyframes barcodeCut {
  0%   { clip-path: inset(0 0 0 0); }
  25%  { clip-path: inset(100% 0 0 0); }
  50%  { clip-path: inset(0 0 100% 0); }
  75%  { clip-path: inset(0 0 0 0); }
}

@media (max-width: 768px) {
  .barcode-loader { font-size: 40px; }
  @keyframes barcodeScan {
    0%   { top: 0px; }
    25%  { top: 44px; }
    50%  { top: 0px; }
    75%  { top: 44px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .barcode-loader__text,
  .barcode-loader__scan-glow,
  .barcode-loader__scan-line {
    animation: none;
  }
}

/* ===================================================================
   SITE (révélé après le loader)
   =================================================================== */

.site {
  min-height: 100vh;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.site.is-visible { opacity: 1; }

/* ===================================================================
   HERO HALIDE TOPO
   Port vanilla du composant 21st.dev shivendra9795kumar/halide-topo-hero
   - 3 layers grayscale stackées en 3D (rotateX 55° rotateZ -25°)
   - Mouse parallax (rotate canvas + depth shift par layer)
   - Entrance animation (rotateX 90°→55°, opacity 0→1, scale 0.8→1)
   - Hero title en mix-blend-mode: difference
   - SVG fractalNoise grain en overlay
   =================================================================== */

:root {
  /* Halide tokens — home blanche → texte sombre lisible sur blanc */
  --halide-accent: #B07355;            /* terracotta chaud (match couleur signature LFC) */
  --halide-silver: #0A0A0B;            /* noir (était #E0E0E0, invisible sur blanc) */
  --halide-grain-opacity: 0.15;
}

.halide-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-screen);
  color: var(--halide-silver);
  font-family: 'Syncopate', sans-serif;
}
/* (grain géré globalement via .site-grain au body) */

/* ---------- Viewport 3D ---------- */
.halide-viewport {
  position: absolute;
  inset: 0;
  perspective: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.halide-canvas {
  position: relative;
  width: min(800px, 90vw);
  height: min(500px, 55vh);
  transform-style: preserve-3d;
  /* État initial — révélé via .is-entered */
  opacity: 0;
  transform: rotateX(90deg) rotateZ(0deg) scale(0.8);
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.halide-canvas.is-entered {
  opacity: 1;
  transform: rotateX(55deg) rotateZ(-25deg) scale(1);
}

/* Mobile : moins de tilt 3D (sinon le tableau devient illisible sur petit écran),
   pas de parallax souris (touch only), tailles ajustées */
@media (max-width: 768px) {
  .halide-canvas {
    width: 92vw;
    height: 42vh;
    min-height: 320px;
  }
  .halide-canvas.is-entered {
    transform: rotateX(35deg) rotateZ(-12deg) scale(1);
  }
}

/* ===================================================================
   CYCLE DES 3 SCENES — 7s chacune, 21s total, crossfade 1s
   1. Klimt · Le Baiser (1907-08)
   2. Van Gogh · La Nuit étoilée (1889)
   3. Halide original (3 photos d'ambiance Unsplash stackées)
   =================================================================== */

.halide-scene {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(224, 224, 224, 0.1);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  will-change: transform, opacity;
}

/* Scene 1 — Klimt · Le Baiser */
.halide-scene--klimt {
  background-image: url('img/klimt-le-baiser.jpg');
  background-position: center 30%;       /* focus sur les deux visages + l'or */
  filter: contrast(1.05) saturate(1.1);  /* boost de l'or doré */
  animation: paintingCycle1 21s infinite;
}

/* Scene 2 — Van Gogh · La Nuit étoilée */
.halide-scene--vangogh {
  background-image: url('img/vangogh-nuit-etoilee.jpg');
  background-position: center center;
  filter: contrast(1.1) saturate(1.15);  /* boost les bleus et jaunes */
  opacity: 0;
  animation: paintingCycle2 21s infinite;
}

/* Scene 3 — Halide original (sub-stack de 3 photos) */
.halide-scene--halide {
  background: transparent;
  opacity: 0;
  animation: paintingCycle3 21s infinite;
}

/* Les 3 stacks internes de la scene Halide (effet topo original) */
.halide-stack {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.halide-stack--1 {
  background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=1200');
  filter: grayscale(1) contrast(1.2) brightness(0.5);
}
.halide-stack--2 {
  background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&q=80&w=1200');
  filter: grayscale(1) contrast(1.1) brightness(0.7);
  opacity: 0.6;
  mix-blend-mode: screen;
}
.halide-stack--3 {
  background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&q=80&w=1200');
  filter: grayscale(1) contrast(1.3) brightness(0.8);
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* Keyframes du cycle — 3 phases de 7s, transitions de 1s entre chaque */
@keyframes paintingCycle1 {
  0%        { opacity: 1; }
  28.6%     { opacity: 1; }      /* 6s : Blake pleinement visible */
  33.3%     { opacity: 0; }      /* 7s : fade-out terminé */
  95.2%     { opacity: 0; }      /* 20s : encore caché */
  100%      { opacity: 1; }      /* 21s : retour au début, Blake réapparaît */
}
@keyframes paintingCycle2 {
  0%        { opacity: 0; }
  28.6%     { opacity: 0; }
  33.3%     { opacity: 1; }      /* 7s : fade-in Vermeer */
  61.9%     { opacity: 1; }      /* 13s : Vermeer pleinement visible */
  66.7%     { opacity: 0; }      /* 14s : fade-out terminé */
  100%      { opacity: 0; }
}
@keyframes paintingCycle3 {
  0%        { opacity: 0; }
  61.9%     { opacity: 0; }
  66.7%     { opacity: 1; }      /* 14s : fade-in Dürer */
  95.2%     { opacity: 1; }      /* 20s : Dürer pleinement visible */
  100%      { opacity: 0; }      /* 21s : fade-out, retour à Blake */
}

/* Vignette dark globale sur le canvas (n'importe quel tableau actif) */
.halide-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center 30%, transparent 30%, rgba(0, 0, 0, 0.55) 90%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: multiply;
  opacity: 0.7;
  z-index: 2;
}

/* Reduced motion : freeze sur Klimt, pas d'animation */
@media (prefers-reduced-motion: reduce) {
  .halide-scene { animation: none !important; }
  .halide-scene--klimt { opacity: 1 !important; }
  .halide-scene--vangogh,
  .halide-scene--halide { opacity: 0 !important; }
}

.halide-contours {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 40px,
    rgba(255, 255, 255, 0.05) 41px,
    transparent 42px
  );
  transform: translateZ(120px);
  pointer-events: none;
}

/* ---------- Interface grid (text overlay) ---------- */
.halide-grid {
  position: absolute;
  inset: 0;
  padding: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  z-index: 10;
  pointer-events: none;
  gap: 1rem;
}

.halide-grid__brand {
  font-weight: 700;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  letter-spacing: 0.05em;
}

.halide-grid__coords {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--halide-accent);
  font-size: 0.7rem;
  line-height: 1.5;
}

.halide-grid__title {
  grid-column: 1 / -1;
  align-self: center;
  font-size: clamp(2.25rem, 9vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #0A0A0B;                          /* noir profond sur fond blanc pur */
  /* Pas de text-shadow → le blanc pur du fond le contraste suffisamment */
}

.halide-grid__foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.halide-grid__foot-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--halide-silver);
}
.halide-grid__foot-meta p { margin: 0; }

.halide-cta {
  pointer-events: auto;
  background: var(--halide-silver);
  color: var(--bg-screen);
  padding: 1rem 2rem;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Syncopate', sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
  transition: background 0.3s ease, transform 0.3s ease;
  display: inline-block;
}
.halide-cta:hover {
  background: var(--halide-accent);
  transform: translateY(-5px);
}

/* ---------- Scroll hint ---------- */
.halide-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--halide-silver), transparent);
  animation: halideScrollFlow 2s infinite ease-in-out;
  transform-origin: top;
}

@keyframes halideScrollFlow {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  50%      { transform: scaleY(1); transform-origin: top; }
  51%      { transform: scaleY(1); transform-origin: bottom; }
}

/* ---------- Reduced motion : skip parallax + entrance ---------- */
@media (prefers-reduced-motion: reduce) {
  .halide-canvas {
    opacity: 1 !important;
    transform: rotateX(55deg) rotateZ(-25deg) scale(1) !important;
    transition: none !important;
  }
  .halide-layer { transition: none !important; }
  .halide-scroll-hint { animation: none !important; }
}

/* ===================================================================
   SECTIONS génériques (utilisé par scroll-3D pour son eyebrow uniquement)
   =================================================================== */

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--halide-accent);
  margin-bottom: 1rem;
}

/* ===================================================================
   GLOBAL GRAIN — texture argentique uniforme sur toute la page
   (fixed full-screen, sous le canvas liquide, au-dessus du body bg).
   Réutilise le SVG <filter id="topo-grain"> défini dans index.html.
   =================================================================== */
.global-grain__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.global-grain {
  position: fixed;
  inset: 0;
  z-index: 1;                   /* sous le canvas liquide (z=50) et sous le content site (z=3) */
  opacity: 0.15;
  pointer-events: none;
  filter: url(#topo-grain);
  background: transparent;
}
/* ============================================================ *
 *  RYTHME : transition smooth entre zones DARK et LIGHT          *
 *  Bloc DARK : Hero (topo) + Cscroll + Réalisations              *
 *  Bloc LIGHT : Outils → Trust → Méthode → Avis → FAQ            *
 *  Retour DARK : Contact + Footer                                *
 * ============================================================ */
/* ============================================================ *
 *  TOPO HEADING — Titre principal du hero (clarté de l'offre)   *
 * ============================================================ */
.topo__heading {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
  pointer-events: none;
  z-index: 11;
  padding-top: 2rem;
}
.topo__heading-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1rem;
}
.topo__heading-title {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.9rem, 4.8vw, 4rem);
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1;
}
.topo__heading-title em {
  font-weight: 500;
  font-style: italic;
  color: #f3e8d8;
}
.topo__heading-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
@media (max-width: 640px) {
  /* On descend le H1 sous la navbar (navbar = top:0.75rem + pill ~52px de haut) */
  .topo__heading { padding-top: 5rem; }
}

/* Mobile : on enlève TOUS les grains (perf + propreté visuelle).
   Décision Nej : mobile = lisse, no noise. */
@media (hover: none), (max-width: 768px) {
  .global-grain,
  .site-grain { display: none !important; }

  /* Bg dégradé subtil pour remplacer l'ambient du canvas WebGL absent */
  body {
    background:
      radial-gradient(ellipse at 50% 0%,
        rgba(60, 45, 35, 0.18) 0%,
        rgba(20, 20, 20, 0) 60%),
      radial-gradient(ellipse at 50% 100%,
        rgba(35, 30, 45, 0.12) 0%,
        rgba(20, 20, 20, 0) 60%),
      #141414;
    background-attachment: fixed;
  }

}

/* ===================================================================
   TOPO HERO — adapté du HalideLanding React (Nej 2026-06-19).
   Hero plein écran : 3 layers d'images topographiques NB en parallaxe
   3D + grid d'interface UI + grain SVG. Posé au-dessus de l'effet
   goutte d'eau (canvas WebGL liquide reste actif en permanence dessous).
   =================================================================== */
.topo {
  position: relative;
  height: 100vh;
  width: 100%;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  font-family: 'Syncopate', sans-serif;
  color: #e0e0e0;
  --topo-bg: #0a0a0a;
  --topo-silver: #e0e0e0;
  --topo-accent: #ff3c00;
}

/* .topo__defs et .topo__grain ont été externalisés en .global-grain
   pour avoir une texture argentique uniforme sur toute la page. */

/* Interface grid : 4 corners + titre central + footer split */
.topo__grid {
  position: absolute;
  inset: 0;
  padding: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  z-index: 10;
  pointer-events: none;
}
.topo__corner-tl {
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  opacity: 0.55;
}
.topo__corner-tr {
  text-align: right;
  font-family: 'Syncopate', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--topo-accent);
  line-height: 1.6;
  opacity: 0.55;
}
.topo__title {
  grid-column: 1 / -1;
  align-self: center;           /* aligné à gauche comme la maquette React originale */
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: 0;
  mix-blend-mode: difference;
  color: var(--topo-silver);
}
.topo__footer {
  grid-column: 1 / -1;
  grid-row: 3;                       /* force la dernière rangée (auto) du grid 3 rows */
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/* Aligne le texte du CTA avec la dernière ligne du meta ("SEO · Site web") :
   on retire la padding-bottom du CTA dans ce contexte pour que la baseline
   du texte tombe pile sur celle du meta (et l'underline juste en dessous). */
.topo__footer .topo__cta-underline {
  padding-bottom: 0;
}
.topo__footer-meta {
  font-family: 'Syncopate', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--topo-silver);
  opacity: 0.55;
}
.topo__footer-meta p { margin: 0.1rem 0; }
.topo__cta {
  pointer-events: auto;
  background: var(--topo-silver);
  color: var(--topo-bg);
  padding: 1rem 2rem;
  text-decoration: none;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
  display: inline-block;
}
.topo__cta:hover {
  background: var(--topo-accent);
  color: var(--topo-silver);
  transform: translateY(-5px);
}

/* ---- CTA magnetic underline (forward + back variants) ----
   Réutilisable partout : trait qui se trace L→R + flèche qui glisse.
   .cta-underline → flèche à droite, slide vers droite au hover
   .cta-underline.is-back → flèche à gauche, slide vers gauche au hover */
.cta-underline,
.topo__cta-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  pointer-events: auto;
  text-decoration: none;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  background: none;
  border: 0;
  cursor: pointer;
}
.cta-underline::after,
.topo__cta-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.cta-underline.is-back::after { transform-origin: right center; }
.cta-underline:hover::after,
.cta-underline:focus-visible::after,
.topo__cta-underline:hover::after,
.topo__cta-underline:focus-visible::after { transform: scaleX(1); }

.cta-underline__arrow,
.topo__cta-underline__arrow {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.cta-underline:hover .cta-underline__arrow,
.cta-underline:focus-visible .cta-underline__arrow,
.topo__cta-underline:hover .topo__cta-underline__arrow,
.topo__cta-underline:focus-visible .topo__cta-underline__arrow {
  transform: translateX(8px);
}
.cta-underline.is-back:hover .cta-underline__arrow,
.cta-underline.is-back:focus-visible .cta-underline__arrow {
  transform: translateX(-8px);
}

/* Viewport 3D : perspective + canvas avec preserve-3d */
.topo__viewport {
  position: absolute;
  inset: 0;
  perspective: 2000px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  z-index: 2;
}
.topo__canvas {
  /* Centrage horizontal + descendu sous le H1 (top 62% au lieu de 50%) pour
     que le titre principal respire en haut sans chevauchement.
     Taille réduite (Nej 2026-06-24) : laisse plus d'air autour. */
  position: absolute;
  top: 62%;
  left: 50%;
  width: min(62vw, 940px);
  aspect-ratio: 16 / 9;
  height: auto;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  /* Repos : caché (basculé) — le JS animera vers la pose face caméra. */
  opacity: 0;
  transform: translate(-50%, -50%) rotateX(90deg) scale(0.8);
}
.topo__layer {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(224, 224, 224, 0.1);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  will-change: transform;
}
.topo__layer--1 {
  background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80&w=1200');
  filter: grayscale(1) contrast(1.2) brightness(0.5);
}
.topo__layer--2 {
  background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&q=80&w=1200');
  filter: grayscale(1) contrast(1.1) brightness(0.7);
  opacity: 0.6;
  mix-blend-mode: screen;
}
.topo__layer--3 {
  background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&q=80&w=1200');
  filter: grayscale(1) contrast(1.3) brightness(0.8);
  opacity: 0.4;
  mix-blend-mode: overlay;
}
.topo__contours {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0,
    transparent 40px,
    rgba(255, 255, 255, 0.05) 41px,
    transparent 42px
  );
  transform: translateZ(120px);
  pointer-events: none;
}

/* ---- Vidéo de démo dans le hero ----
   Remplit le canvas .topo__canvas. object-fit: contain : la source 16/9
   est entièrement visible, aucun texte tronqué dans les coins. La transform
   parallax reste sur .topo__canvas → la vidéo suit doucement le curseur. */
.topo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  background: #000;
}

/* Scroll hint : barre verticale fluide en bas */
.topo__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--topo-silver), transparent);
  animation: topo-flow 2s infinite ease-in-out;
  z-index: 10;
}
@keyframes topo-flow {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  50%      { transform: scaleY(1); transform-origin: top; }
  51%      { transform: scaleY(1); transform-origin: bottom; }
}

/* Mobile : hero ultra-compact (espace minimum entre vidéo et footer). */
@media (max-width: 768px) {
  .topo { height: 62vh; min-height: 460px; }   /* compacté : moins d'espace mort */
  .topo__grid { padding: 1.25rem 1.25rem 0.6rem; }   /* padding-bottom serré */
  /* Vidéo poussée vers le bas pour minimiser le vide vidéo↔footer */
  .topo__canvas { top: 64%; width: 96vw; aspect-ratio: 16 / 9; height: auto; }
  /* Footer mobile : meta gauche · CTA droite, sur la même ligne (baseline) */
  .topo__footer { flex-direction: row; gap: 1rem; align-items: flex-end; justify-content: space-between; }
  .topo__cta-underline { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .topo__canvas { transition: none !important; }
  .topo__layer { transition: none !important; }
  .topo__scroll-hint { animation: none; }
}

/* ===================================================================
   CSCROLL — Aceternity Container Scroll Animation (vanilla port).
   La card 3D se redresse au scroll : rotateX 20°→0° + scale-down + header
   qui translate vers le haut. Les valeurs sont posées dynamiquement par
   initContainerScroll() via les variables --cs-rotate/--cs-scale/--cs-translate.
   =================================================================== */
.cscroll {
  position: relative;
  z-index: 30;
  height: auto;                        /* hauteur libre — pour accommoder stats + footnote */
  min-height: 60rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0.5rem;
  margin-top: 3rem;                    /* écart d'origine hero→cscroll (mobile) */
}
@media (min-width: 768px) {
  .cscroll {
    min-height: 75rem;
    padding: 3rem;
    margin-top: 7rem;                  /* écart d'origine hero→cscroll (desktop) */
  }
}

.cscroll__inner {
  width: 100%;
  position: relative;
  padding: 1.5rem 0;
  perspective: 1000px;
}
@media (min-width: 768px) {
  .cscroll__inner { padding: 5rem 0; }
}

.cscroll__header {
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
  transform: translateY(var(--cs-translate, 0px));
  will-change: transform;
}
.cscroll__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.2rem;
}
.cscroll__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 2rem;
}
.cscroll__title em {
  font-style: italic;
  font-weight: 400;
  color: #f3e8d8;
}
/* "en 28 jours de travail seulement" — punchline mise en valeur :
   couleur warm cream + bold italic + glow doux. Pas de surlignage. */
.cscroll__title-highlight {
  display: inline-block;
  font-style: italic;
  font-weight: 600;
  color: #f3e8d8;
  text-shadow: 0 1px 22px rgba(243, 232, 216, 0.18);
  margin-top: 0.2em;
}

/* Stats : 2 grosses cards avant/après (×10 impressions · ×9 clics) */
.cscroll__stats {
  list-style: none;
  margin: 0 auto 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 36rem;
}
.cscroll__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.6rem 1rem;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.cscroll__stat:hover {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444, 0 6px 16px rgba(239, 68, 68, 0.16);
  transform: translateY(-1px);
}
.cscroll__stat-value {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  line-height: 1;
  color: #ef4444;                          /* rouge accent : met les chiffres en avant */
  letter-spacing: -0.03em;
  text-shadow: 0 0 24px rgba(239, 68, 68, 0.25);   /* léger glow rouge pour booster la lisibilité */
}
.cscroll__stat-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.cscroll__stat-detail {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.2rem;
}
.cscroll__stat-detail strong {
  color: #ef4444;
  font-weight: 600;
}

.cscroll__subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 0.5rem;
  max-width: 32rem;
}

.cscroll__footnote {
  margin: 0.6rem auto 0;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}
.cscroll__footnote a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cscroll__footnote a:hover { color: #ef4444; }

.cscroll__card {
  max-width: 80rem;
  margin: -3rem auto 0;
  width: 100%;
  aspect-ratio: 900 / 1428;       /* portrait sur mobile : matche l'image mockup */
  height: auto;
  max-height: 75vh;
  border: 4px solid #6C6C6C;
  padding: 0.5rem;
  background: #222222;
  border-radius: 30px;
  transform: rotateX(var(--cs-rotate, 20deg)) scale(var(--cs-scale, 1.05));
  transform-origin: center top;
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000a,
    0 233px 65px #00000003;
  will-change: transform;
}
@media (min-width: 768px) {
  .cscroll__card {
    aspect-ratio: auto;
    height: 40rem;
    max-height: none;
    padding: 1.5rem;
  }
}

/* Mobile : on simplifie le cadre (pas de faux mockup iPhone dans iPhone).
   Cette rule est placée APRÈS la rule base pour bien override (spécificité). */
@media (hover: none), (max-width: 768px) {
  .cscroll__card {
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    padding: 0;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.25);
  }
  .cscroll__card-inner {
    border-radius: 18px;
  }
}

.cscroll__card-inner {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #141414;       /* fond raccord body pour les encoches du mockup */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cscroll__media {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* mobile : voit tout le mockup */
  object-position: center;
  display: block;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .cscroll__card-inner {
    background: #f5f5f7;
    align-items: flex-start;
  }
  .cscroll__media {
    object-fit: cover;            /* desktop : remplit la card paysage */
    object-position: top center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cscroll__card,
  .cscroll__header { transform: none !important; }
}

/* ===================================================================
   WORKS — réalisations grid 3 colonnes (style Lusion).
   Cards = image + meta. Hover : scale image + lift card + overlay sombre.
   =================================================================== */
.works {
  position: relative;
  z-index: 30;
  padding: 5rem 2rem;
  color: #fff;
}
.works__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.works__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.5rem;
  text-align: center;
}
.works__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 0 3rem;
  color: #fff;
}
.works__title em {
  font-style: italic;
  font-weight: 400;
  color: #f3e8d8;
}

/* ============================================================ *
 *  WORKS GRID — PC : grid 2x2 d'origine (pas de carrousel)       *
 *  Le carrousel scroll-snap n'est activé QUE sur mobile (max-width: 768px)
 *  via le media query plus bas. Décision Nej : carrousel mobile-only,
 *  car le grid 2x2 marche bien sur PC et le carrousel sur PC créait
 *  des soucis (stacking context, perf, lisibilité).
 * ============================================================ */
.works__carousel {
  position: relative;
}
.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 4 cards = 2 rangées de 2 sur PC */
  gap: 3rem 2.5rem;
}
@media (min-width: 1100px) {
  .works__grid { gap: 3.5rem 3rem; }
}

/* Navigation (progress bar + hint) : cachée par défaut sur PC,
   visible uniquement quand le carrousel mobile est actif. */
.works__nav { display: none; }

/* ============================================================ *
 *  MOBILE CARROUSEL — uniquement < 768px                         *
 * ============================================================ */
@media (max-width: 768px) {
  /* Override du grid → flex scroll-snap */
  .works__carousel {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .works__grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 1.25rem 1.5rem;
  }
  .works__grid::-webkit-scrollbar { display: none; }
  .works__card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Show la nav (progress bar + hint) seulement quand le carrousel est actif */
  .works__nav {
    display: flex;
    margin: 1.4rem auto 0;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
  .works__progress {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    cursor: pointer;
  }
  .works__progress-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 33%;
    background: linear-gradient(90deg, #f3e8d8, #fff);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(243, 232, 216, 0.35);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .works__hint {
    font-family: 'Geist Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
    animation: works-hint-pulse 2.6s ease-in-out infinite;
    opacity: 1;
    transition: opacity 0.45s ease;
  }
  .works__hint.is-hidden { opacity: 0; pointer-events: none; }
}

@keyframes works-hint-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.42; }
  50%      { transform: translateX(6px); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .works__hint { animation: none; }
  .works__progress-thumb { transition: none; }
}

/* CTA "Voir toutes nos réalisations" — magnetic underline aligné avec hero */
.works__cta-wrap {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}
.works__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  text-decoration: none;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.works__cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.works__cta:hover::after { transform: scaleX(1); }
.works__cta-arrow {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.works__cta:hover .works__cta-arrow { transform: translateX(10px); }

/* ============================================================ *
 *  Page transition overlay — GooeyLoader 21st.dev/ravikatiyar162 *
 *  Affiche le nom de la card + 2 blobs gooey qui glissent       *
 *  Réutilisé sur index + realisations + (futures pages sites)    *
 * ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #141414;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-transition.is-active {
  opacity: 1;
  pointer-events: auto;
}
.page-transition__filter {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}
.page-transition__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.page-transition__text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: rgba(245, 245, 245, 0.75);
  display: inline-block;
  transform: skewX(-6deg);
  line-height: 1;
}

/* GooeyLoader vanilla port */
.gooey-loader {
  width: 12em;
  height: 3em;
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid rgba(245, 245, 245, 0.18);
  filter: url(#gooey-loader-filter);
  font-size: 0.9rem;                /* contrôle la taille via em */
}
.gooey-loader::before,
.gooey-loader::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.gooey-loader::before {
  width: 22em; height: 18em;
  background-color: #EF4444;         /* primary red (raccord FAB) */
  left: -2em; bottom: -18em;
  animation: gooeyLoaderWee1 2s linear infinite;
}
.gooey-loader::after {
  width: 16em; height: 12em;
  background-color: #f3e8d8;         /* secondary cream */
  left: -4em; bottom: -12em;
  animation: gooeyLoaderWee2 2s linear infinite 0.75s;
}
@keyframes gooeyLoaderWee1 {
  0%   { transform: translateX(-10em) rotate(0deg); }
  100% { transform: translateX(7em)   rotate(180deg); }
}
@keyframes gooeyLoaderWee2 {
  0%   { transform: translateX(-8em) rotate(0deg); }
  100% { transform: translateX(8em)  rotate(180deg); }
}

.works__card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.works__card:hover { transform: translateY(-6px); }

.works__media {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Pas de border-radius ni de overflow:hidden : les bords ondulés du shader
     sont les seules bordures visibles → l'image flotte vraiment.
     Pas de background non plus → on voit le body/liquid bg derrière les zones
     transparentes que produit l'edge_alpha. */
}
.water-ripple-canvas {
  /* assure que le canvas reste pile dans la zone aspect-ratio */
  border-radius: 0;
}

/* Canvas du shader water-ripple (WebGL) — créé par water-ripple.js dans chaque
   .works__media[data-water-ripple], par-dessus l'<img>. */
.water-ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  display: block;
  z-index: 2;
}
/* Quand le shader a chargé sa texture, on fade l'<img> en dessous pour éviter
   le double affichage. Si WebGL échoue, l'<img> reste visible (fallback). */
.works__media.water-ripple-active img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.works__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15) contrast(1.02);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}
.works__card:hover .works__media img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.05);
}
/* (vignette noire au hover supprimée — donnait un "rideau sombre" disgracieux
   sur la moitié basse des images au survol des cards) */

/* ============================================================ *
 *  Works visuals — Direction B (typographic identity cards)     *
 *  Remplace les images Unsplash par des blocs typographiques     *
 *  qui montrent la DA + nom + tagline de chaque projet.          *
 * ============================================================ */
.works__visual {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 0.9rem;
  padding: 1.7rem 1.6rem;
  text-align: center;
  border-radius: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
}
.works__card:hover .works__visual,
.tab-card:hover .works__visual {
  transform: scale(1.03);
  filter: brightness(1.05);
}
.works__visual::after {
  /* Très léger glow en haut + ombre douce en bas pour la profondeur. */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,0.10) 0%, transparent 55%);
  pointer-events: none;
}
.works__visual__name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  position: relative; z-index: 1;
}
.works__visual__soon {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0;
  position: relative; z-index: 1;
}

/* Pattern SVG décoratif unique par projet (data URI, pas de fichier externe) */
.works__visual::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background-repeat: repeat;
  background-position: center;
}

/* LFC — vagues d'eau (boutique fontaines) */
.works__visual--lfc::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'><path d='M0 30 Q25 10 50 30 T100 30 T150 30 T200 30' stroke='%23FAF3E8' stroke-width='1.5' fill='none'/><path d='M0 50 Q25 30 50 50 T100 50 T150 50 T200 50' stroke='%23FAF3E8' stroke-width='1.5' fill='none'/></svg>");
  background-size: 200px 60px;
}

/* Sakina — cercles concentriques (zen / bien-être) — DA brun chocolat */
.works__visual--sakina::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><circle cx='140' cy='140' r='25' stroke='%23EFE4D2' stroke-width='1' fill='none'/><circle cx='140' cy='140' r='55' stroke='%23EFE4D2' stroke-width='1' fill='none'/><circle cx='140' cy='140' r='85' stroke='%23EFE4D2' stroke-width='1' fill='none'/><circle cx='140' cy='140' r='115' stroke='%23EFE4D2' stroke-width='1' fill='none'/></svg>");
  background-size: 280px 280px;
  background-repeat: no-repeat;
  background-position: 90% 110%;
  opacity: 0.3;
}

/* Lupin — grille rule of thirds (photographe) */
.works__visual--lupin::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='180'><line x1='80' y1='0' x2='80' y2='180' stroke='%23F5F5F5' stroke-width='1'/><line x1='160' y1='0' x2='160' y2='180' stroke='%23F5F5F5' stroke-width='1'/><line x1='0' y1='60' x2='240' y2='60' stroke='%23F5F5F5' stroke-width='1'/><line x1='0' y1='120' x2='240' y2='120' stroke='%23F5F5F5' stroke-width='1'/><circle cx='80' cy='60' r='3' fill='%23F5F5F5'/><circle cx='160' cy='120' r='3' fill='%23F5F5F5'/></svg>");
  background-size: 240px 180px;
  background-repeat: no-repeat;
  opacity: 0.35;
}

/* Villa — arcs (architecture luxe) */
.works__visual--villa::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='130'><path d='M0 130 A 60 60 0 0 1 120 130' stroke='%23E8C97A' stroke-width='1.5' fill='none'/><path d='M40 130 A 60 60 0 0 1 160 130' stroke='%23E8C97A' stroke-width='1.5' fill='none'/><path d='M80 130 A 60 60 0 0 1 200 130' stroke='%23E8C97A' stroke-width='1.5' fill='none'/></svg>");
  background-size: 220px 130px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.32;
}

/* Sénac — losanges (carreleur artisan) */
.works__visual--senac::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><path d='M40 5 L75 40 L40 75 L5 40 Z' stroke='%23F5E6D3' stroke-width='1' fill='none'/><path d='M40 25 L55 40 L40 55 L25 40 Z' stroke='%23F5E6D3' stroke-width='1' fill='none'/></svg>");
  background-size: 80px 80px;
  opacity: 0.2;
}

/* Voyage — horizon + soleil (agence tourisme) */
.works__visual--voyage::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='170'><line x1='0' y1='105' x2='260' y2='105' stroke='%23FAF3E8' stroke-width='1'/><circle cx='195' cy='80' r='22' stroke='%23FAF3E8' stroke-width='1' fill='none'/><path d='M0 135 Q65 120 130 135 T260 135' stroke='%23FAF3E8' stroke-width='1' fill='none'/><path d='M0 155 Q65 140 130 155 T260 155' stroke='%23FAF3E8' stroke-width='0.8' fill='none' opacity='0.6'/></svg>");
  background-size: 260px 170px;
  background-position: center 60%;
  background-repeat: no-repeat;
  opacity: 0.35;
}

/* === Per-project palettes === */
.works__visual--lfc {
  background: linear-gradient(135deg, #D89968 0%, #A56F40 100%);
  color: #FAF3E8;
}
.works__visual--sakina {
  background: linear-gradient(135deg, #6B5340 0%, #3D2B1A 100%);
  color: #EFE4D2;
}
.works__visual--lupin {
  background: linear-gradient(135deg, #161616 0%, #2A2A2A 100%);
  color: #F5F5F5;
}
.works__visual--villa {
  background: linear-gradient(135deg, #1E2738 0%, #0F1722 100%);
  color: #E8C97A;
}
.works__visual--senac {
  background: linear-gradient(135deg, #8B5A3B 0%, #4E2E1B 100%);
  color: #F5E6D3;
}
.works__visual--voyage {
  background: linear-gradient(135deg, #D2A064 0%, #8B5E3C 100%);
  color: #FAF3E8;
}

.works__meta { margin-top: 1.1rem; }
.works__tag {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.works__tag--client {
  color: #f3e8d8;
  border-color: rgba(243, 232, 216, 0.35);
}
.works__name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0.2rem;
  color: #fff;
}
.works__desc {
  font-family: 'Geist Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Pastille "En ligne" dans le tag, à côté du type d'activité (ex: "E-commerce · En ligne") */
.works__live-tag {
  color: #6BD68A;
  letter-spacing: 0.2em;
}

/* Lien vers le vrai site live (ex: "↗ la-fontaine-chat.com") — apparaît
   uniquement sur les vrais sites livrés. Cliquable indépendamment de la card
   (le JS intercepte le clic et ouvre en nouvel onglet sans déclencher l'aller
   vers l'étude de cas). */
.works__live-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0.3rem 0.6rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  user-select: none;
}
.works__live-link:hover,
.works__live-link:focus-visible {
  background: rgba(243, 232, 216, 0.10);
  border-color: rgba(243, 232, 216, 0.32);
  color: #f3e8d8;
  outline: none;
}
.works__live-link:hover .works__live-arrow,
.works__live-link:focus-visible .works__live-arrow {
  transform: translate3d(1px, -1px, 0);
}
.works__live-arrow {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.works__live-url { font-weight: 500; }

/* (anciennes règles grid-template-columns retirées : .works__grid est désormais
   un carrousel flex, dimensionné via .works__card flex-basis dans les media queries
   du bloc "CARROUSEL" plus haut.) */
@media (max-width: 640px) {
  .works { padding: 5rem 1.5rem; }
  .works__title { margin-bottom: 2.5rem; }
  .works__name { font-size: 1.2rem; }
}

/* ===================================================================
   TOOLS — 2 colonnes : outils SEO + outils Sites web. Format liste avec
   logo + nom. Logos depuis simple-icons CDN en gris pour cohérence DA.
   =================================================================== */
.tools {
  position: relative;
  z-index: 30;
  padding: 5rem 2rem 2.5rem;          /* bottom réduit : enchaîne avec le trust strip */
  color: #fff;
}
.tools__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.tools__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.5rem;
}
.tools__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 3rem;
  color: #fff;
}
.tools__title em {
  font-style: italic;
  font-weight: 400;
  color: #f3e8d8;
}

.tools__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  text-align: left;
}
.tools__col-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 1rem;
  margin: 0 0 1.8rem;
}
.tools__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.tools__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tools__item:hover { transform: translateX(4px); }
.tools__item:hover .tools__logo { opacity: 1; }
.tools__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  color: #d4d4d4;                 /* utilisé par les SVG inline via currentColor */
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.tools__name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
  .tools { padding: 3.5rem 1.5rem 2rem; }
  .tools__title { margin-bottom: 2rem; }
  .tools__cols { grid-template-columns: 1fr; gap: 3rem; }
  .tools__name { font-size: 0.9rem; }
}

/* ===================================================================
   TRUST STRIP — extension visuelle de la section Outils.
   Pas de gros titre, pas de padding-top : le bloc s'enchaîne directement
   sous la section .tools comme s'il en faisait partie.
   Phrase courte centrée + punch line mise en valeur + marquee infini.
   =================================================================== */
.trust {
  position: relative;
  z-index: 30;
  padding: 0 0 4rem;                /* pas d'écart au-dessus, juste un peu d'air en dessous */
  color: #fff;
  overflow: hidden;
}
.trust__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 2.5rem;
  text-align: center;
}
.trust__desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 42rem;
  margin: 0 auto 2.2rem;
}
.trust__punch {
  display: inline;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
}
.trust__hot {
  color: #ef4444;             /* même rouge que la bordure hover des cards */
  font-weight: 500;
}

/* Grille de logos : cards sombres rectangulaires. Au repos = noir & blanc atténué.
   Au hover : logo en couleur réelle de la marque + bordure rouge vive. */
.trust__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
}
.trust__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 1.2rem;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  cursor: default;
}
.trust__logo {
  max-height: 38px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Repos : on désature + on force le blanc */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.trust__cell:hover {
  background: rgba(20, 20, 20, 0.8);
  border-color: #ef4444;                              /* rouge vif sur le contour */
  box-shadow: 0 0 0 1px #ef4444, 0 6px 20px rgba(239, 68, 68, 0.18);
  transform: translateY(-1px);
}
.trust__cell:hover .trust__logo {
  filter: none;                                       /* couleur officielle de la marque */
  opacity: 1;
}

@media (max-width: 1024px) {
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .trust { padding: 0 0 2.5rem; }
  .trust__inner { padding: 0 1.5rem 2rem; }
  .trust__desc { margin-bottom: 1.4rem; }
  .trust__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    padding: 0 1rem;
  }
  .trust__cell { height: 80px; padding: 0.9rem; border-radius: 12px; }
  .trust__logo { max-height: 26px; }
}

/* ===================================================================
   METHOD — Notre méthodologie en 4 étapes (grid 2x2).
   Grosse numérotation 01/02/03/04 + titre + 1 ligne de desc.
   =================================================================== */
.method {
  position: relative;
  z-index: 30;
  padding: 5rem 2rem;
  color: #fff;
}
.method__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.method__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.5rem;
  text-align: center;
}
.method__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 0 3rem;
  color: #fff;
}
.method__title em {
  font-style: italic;
  font-weight: 400;
  color: #f3e8d8;
}

.method__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* desktop : tout sur une ligne */
  gap: 2rem;
}
.method__step {
  position: relative;
  padding: 1.8rem 1.5rem 1.6rem;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.method__step:hover {
  background: rgba(20, 20, 20, 0.8);
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444, 0 6px 20px rgba(239, 68, 68, 0.18);
  transform: translateY(-1px);
}
.method__num {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(243, 232, 216, 0.7);
  margin-bottom: 1.3rem;
}
.method__step-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.9rem;
  color: #fff;
}
.method__step-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 768px) {
  .method { padding: 3.5rem 1.5rem; }
  .method__title { margin-bottom: 2rem; }
  .method__steps { grid-template-columns: 1fr; gap: 1rem; }
  .method__step { padding: 1.4rem 1.3rem 1.3rem; border-radius: 12px; }
}

/* ===================================================================
   AVIS — testimonials sticky stack (port vanilla du 21st.dev/ravikatiyar162/testimonial-card)
   Col gauche sticky · col droite : 3 cards qui se stackent au scroll
   via position:sticky natif (pas de framer-motion).
   =================================================================== */
.avis {
  position: relative;
  z-index: 30;
  padding: 5rem 2rem;
  color: #fff;
}
.avis__inner {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .avis__inner {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
}

/* --- Col gauche (sticky) --- */
.avis__col-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .avis__col-left {
    position: sticky;
    top: 6rem;
  }
}
.avis__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.avis__tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6BD68A;
  box-shadow: 0 0 8px rgba(107, 214, 138, 0.7);
}
.avis__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.avis__title em {
  font-style: italic;
  font-weight: 400;
  color: #f3e8d8;
}
.avis__desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 32rem;
}
.avis__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.avis__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.avis__btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}
.avis__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.avis__btn--solid {
  color: #141414;
  background: #f3e8d8;
  border: 1px solid #f3e8d8;
}
.avis__btn--solid:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* --- Col droite (stack sticky) --- */
.avis__col-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.avis__card {
  position: relative;
  background: rgba(20, 20, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 50px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1024px) {
  .avis__card {
    position: sticky;
    /* staggered top : chaque card s'arrête un peu plus bas que la précédente */
    top: calc(6rem + var(--card-index, 0) * 1.5rem);
  }
}

.avis__card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.avis__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.avis__avatar--sakina {
  /* tons rose poudré / nature — DA Sakina Nude & Nature */
  background: linear-gradient(135deg, #c98d7d 0%, #8d5d4c 100%);
}
.avis__avatar--lfc {
  font-size: 0.7rem;
  /* bleu eau · La Fontaine Chat */
  background: linear-gradient(135deg, #3a7ca5 0%, #1d3f56 100%);
}
.avis__avatar--remi {
  /* moss/amber · accents Boussolution v6 earth */
  background: linear-gradient(135deg, #b8865a 0%, #6b7a3e 100%);
}
.avis__meta {
  min-width: 0;
}
.avis__name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.avis__role {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  text-transform: uppercase;
}

.avis__rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.avis__score {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}
.avis__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5c842;
}
.avis__stars svg {
  width: 16px;
  height: 16px;
}

.avis__quote {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  border: 0;
  padding: 0;
  quotes: none;
}
.avis__site {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-all;
}
.avis__site:hover { color: #ef4444; }

@media (max-width: 768px) {
  .avis { padding: 3.5rem 1.25rem; }
  .avis__inner { gap: 2.5rem; }
  .avis__card { padding: 1.5rem; border-radius: 1.2rem; }
  .avis__avatar { width: 48px; height: 48px; border-radius: 12px; font-size: 1rem; }
  .avis__avatar--lfc { font-size: 0.62rem; }
}

/* ===================================================================
   FAQ — Accordion natif aria-expanded, anim grid-template-rows trick.
   7 réponses honnêtes, position entre Avis et Contact.
   =================================================================== */
.faq {
  position: relative;
  z-index: 30;
  padding: 5rem 2rem 6rem;
  color: #fff;
}
.faq__inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  color: rgba(245,245,245,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  text-align: center;
}
.faq__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 1rem;
  color: #fff;
  text-align: center;
}
.faq__title em { font-style: italic; font-weight: 400; color: #f3e8d8; }
.faq__sub {
  color: rgba(245,245,245,0.55);
  font-size: 1rem;
  text-align: center;
  max-width: 540px;
  margin: 0 auto 3.5rem;
  line-height: 1.55;
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(245,245,245,0.1);
}
.faq__item {
  border-bottom: 1px solid rgba(245,245,245,0.1);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0.25rem;
  background: none;
  border: 0;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
.faq__q:hover { color: #f3e8d8; }
.faq__q-text { flex: 1; }

/* Icône + qui devient × via rotation 45° quand ouvert */
.faq__icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
}
.faq__icon::before {
  width: 14px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq__icon::after {
  width: 1.5px; height: 14px;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Anim ouverture/fermeture : grid-template-rows trick (modern browsers) */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq__q[aria-expanded="true"] + .faq__a {
  grid-template-rows: 1fr;
}
.faq__a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq__a-inner > * { margin-top: 0; }
.faq__a-inner p,
.faq__a-inner ul {
  color: rgba(245,245,245,0.7);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  padding-right: 2.5rem;
}
.faq__a-inner ul {
  padding-left: 1.2rem;
}
.faq__a-inner li {
  margin-bottom: 0.4rem;
}
.faq__a-inner strong { color: #fff; font-weight: 600; }
.faq__a-inner em { color: rgba(245,245,245,0.85); font-style: italic; }
.faq__a-inner > :first-child { padding-top: 0.25rem; }
.faq__a-inner > :last-child { padding-bottom: 1.6rem; margin-bottom: 0; }

@media (max-width: 768px) {
  .faq { padding: 4rem 1.25rem 4.5rem; }
  .faq__q { font-size: 1rem; padding: 1.3rem 0.25rem; }
  .faq__a-inner p,
  .faq__a-inner ul { padding-right: 0.5rem; }
}

/* ===================================================================
   CONTACT — Formulaire à gauche, 2 cards sticky-stack à droite.
   Réutilise la mécanique .avis pour le sticky + .method__step pour les mini-cards.
   =================================================================== */
.contact {
  position: relative;
  z-index: 30;
  padding: 5rem 2rem 6rem;
  color: #fff;
}
.contact__inner {
  max-width: 80rem;
  margin: 0 auto;
}

.contact__header {
  text-align: center;
  margin: 0 auto 4rem;
  max-width: 50rem;
}
.contact__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 1.4rem;
}
.contact__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 1.4rem;
}
.contact__title em {
  font-style: italic;
  font-weight: 400;
  color: #f3e8d8;
}
.contact__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* --- Grid 2 cols --- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

/* =================== FORMULAIRE (gauche, sticky) =================== */
.contact__col-left { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .contact__col-left {
    position: sticky;
    top: 5rem;
  }
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact__field label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.contact__optional {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  margin-left: 0.3rem;
}
.contact__field input,
.contact__field textarea,
.contact__field select {
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  color: #fff;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.contact__field input:focus,
.contact__field textarea:focus,
.contact__field select:focus {
  border-color: #ef4444;
  background: rgba(20, 20, 20, 0.78);
  box-shadow: 0 0 0 1px #ef4444, 0 6px 18px rgba(239, 68, 68, 0.15);
}
.contact__field textarea {
  resize: vertical;
  min-height: 8rem;
  font-family: 'Inter', system-ui, sans-serif;
}

/* select : custom caret via background-image, on retire le style natif */
.contact__select-wrap {
  position: relative;
}
.contact__select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.contact__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}
.contact__field select option {
  background: #1a1a1a;
  color: #fff;
}

.contact__hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.15rem 0 0;
  font-style: italic;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.5rem;
}
.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.8rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  color: #141414;
  background: #f3e8d8;
  border: 1px solid #f3e8d8;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.contact__submit svg {
  width: 16px;
  height: 16px;
}
.contact__submit:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(243, 232, 216, 0.2);
}
.contact__submit:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}
.contact__alt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.contact__alt-link {
  color: #ef4444;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.contact__alt-link:hover { color: #fff; }

.contact__status {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
  min-height: 1.3em;
}
.contact__status[data-state="success"] { color: #6BD68A; }
.contact__status[data-state="error"]   { color: #ef4444; }

/* =================== STICKY-STACK (droite) =================== */
.contact__col-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact__card {
  position: relative;
  background: rgba(20, 20, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 50px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1024px) {
  .contact__card {
    position: sticky;
    top: calc(5rem + var(--card-index, 0) * 1.5rem);
  }
}

.contact__card-head {
  margin-bottom: 1.5rem;
}
.contact__card-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 0.6rem;
}
.contact__card-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

/* Mini-grilles (mêmes vibes que .method__step : bordure rouge au hover) */
.contact__minigrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.contact__mini {
  position: relative;
  padding: 1.1rem 1rem 1.2rem;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.contact__mini:hover {
  background: rgba(20, 20, 20, 0.8);
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444, 0 6px 16px rgba(239, 68, 68, 0.16);
  transform: translateY(-1px);
}
.contact__mini-num {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: rgba(243, 232, 216, 0.65);
  margin-bottom: 0.8rem;
}
.contact__mini-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 0.4rem;
}
.contact__mini-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.contact__mini-link,
.contact__mini-cta {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  margin-top: 0.15rem;
  word-break: break-word;
  transition: color 0.2s ease;
}
.contact__mini-link:hover { color: #ef4444; }
.contact__mini-cta {
  margin-top: 0.5rem;
  color: #ef4444;
  font-weight: 500;
}
.contact__mini-cta:hover { color: #fff; }

@media (max-width: 768px) {
  .contact { padding: 3.5rem 1.25rem 4rem; }
  .contact__header { margin-bottom: 2.5rem; }
  .contact__grid { gap: 2.5rem; }
  .contact__card { padding: 1.5rem; border-radius: 1.2rem; }
  .contact__minigrid { grid-template-columns: 1fr; }
}

/* ===================================================================
   FOOTER — 3 zones (top 3 cols · légal · bottom)
   Bg #0f0f0f (un cran plus sombre que le body) + bordure haut subtile.
   =================================================================== */
.footer {
  position: relative;
  z-index: 30;
  background: #0f0f0f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', system-ui, sans-serif;
}
.footer__inner {
  max-width: 80rem;
  margin: 0 auto;
}
.footer__inner--top    { padding: 4rem 2rem 1.5rem; }
.footer__inner--bottom { padding: 0 2rem 1.5rem; }

/* --------- Zone 1 · Top (3 cols) --------- */
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr;   /* brand · nav · contact · légal */
    gap: 2.5rem;
  }
}

.footer__col-title {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 1.2rem;
}

.footer__brand {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: -0.05em;
  color: #fff;
  text-decoration: none;
  text-transform: lowercase;
  transform: skewX(-6deg);
  margin-bottom: 1.25rem;
  transition: color 0.2s ease;
}
.footer__brand:hover { color: #f3e8d8; }
.footer__baseline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 22rem;
}

.footer__nav,
.footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer__nav a {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__nav a:hover { color: #ef4444; }

.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer__contact a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
}
.footer__contact a:hover { color: #f3e8d8; }
.footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

/* --------- Signature géante "BOUSSOLUTION" — bandeau full-bleed sous les 3 cols
              (text-hover-effect 21st.dev) --------- */
/* --------- Phrase d'accroche du footer (style titre cohérent avec le reste du site) --------- */
.footer__sign {
  position: relative;
  width: 100%;
  padding: 1.2rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__sign-text {
  max-width: 60rem;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.footer__sign-text em {
  font-style: italic;
  font-weight: 500;
  color: #ef4444;              /* même rouge accent que le reste du site */
}
/* Note discrète sous la phrase : "ce site sert d'exemple" */
.footer__sign-note {
  max-width: 42rem;
  margin: 1.2rem auto 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.footer__sign-note em {
  font-style: italic;
  font-weight: 500;
  color: #f3e8d8;
}

/* --------- Zone 3 · Légal (ligne fine) --------- */
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 768px) {
  .footer__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.footer__legal-text {
  margin: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}
.footer__legal-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.footer__legal-nav a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__legal-nav a:hover { color: #f3e8d8; }
.footer__legal-sep {
  color: rgba(255, 255, 255, 0.25);
}

/* --------- Zone 3 · Bottom (copyright + signature) --------- */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
  padding-top: 1.4rem;
}
@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.footer__bottom p {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}
.footer__signature {
  font-style: italic;
  color: rgba(255, 255, 255, 0.35);
}

/* Bloc droit : liens légaux + séparateur + signature alignés en ligne */
.footer__bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.footer__bottom-right .footer__legal-nav {
  font-size: 0.78rem;
}
.footer__bottom-right .footer__legal-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .footer__inner--top    { padding: 3rem 1.5rem 1rem; }
  .footer__inner--bottom { padding: 0 1.5rem 1.5rem; }
  .footer__top { gap: 2rem; }
  .footer__sign { padding: 0.9rem 1.25rem; }
}

/* Le canvas liquide WebGL doit rester visible derrière le topo hero.
   On supprime les anciennes règles display:none qui le cachaient. */
body.has-liquid-bg .topo,
body.has-liquid-bg .topo__viewport,
body.has-liquid-bg .topo__canvas {
  display: revert;
}

/* (Anciens styles .liquid-nav et .hero-title supprimés — remplacés par .topo) */

/* ===================================================================
   SCENE STACK — Hero Musée + Transition + Bureau SC (sticky orchestré)
   La scène est un seul container sticky qui contient 5 layers :
     L1 backgrounds crossfade · L2 fx · L3 frame Magritte · L4 screen overlay · L5 UI
   --progress (0→1) est piloté par le scroll, utilisé par les rules T2/T3/T4
   pour orchestrer 3 transitions différentes selon data-transition.
   =================================================================== */

.scene {
  position: relative;
  height: 300vh;                       /* 1 viewport hero + 2 viewport transition = pinning */
  --progress: 0;                       /* mis à jour par main.js sur scroll */
}

.scene__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #FAF8F4;                 /* fallback si les bg ne load pas */
}

/* L1 — backgrounds fullscreen, fit cover */
.scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  will-change: opacity;
}
.scene__bg--musee  { z-index: 1; opacity: 1; }
.scene__bg--bureau { z-index: 1; opacity: 0; }

/* L2 — FX layer pour darkness / vignette / effets de transition */
.scene__fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  will-change: background, opacity;
}

/* L3 — frame Magritte retiré : le tableau est déjà dans le bg.
   On utilise scene__bg--musee transform pour les effets de zoom (T3, T4). */

/* L4 retiré : pas d'overlay écran (l'écran du monitor reste vide). */

/* L5 — UI overlays (navbar à refaire) */

/* .scene__cartel retiré du DOM */

.scene__foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.scene__foot > * {
  background: rgba(250, 248, 244, 0.7);
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  backdrop-filter: blur(4px);
  margin: 0;
}
.scene__annotation { justify-self: start; }
.scene__scroll    { justify-self: center; }
.scene__scroll span { margin-left: 0.4rem; }
.scene__clock     { justify-self: end; font-variant-numeric: tabular-nums; }

/* ===================================================================
   TRANSITION — pilotée par --progress (0 = musée plein, 1 = bureau plein)
   =================================================================== */

.scene__bg--musee {
  transform: scale(var(--musee-zoom, 1));
  transform-origin: center center;
  will-change: opacity, transform;
}

/* --- Match cut (verrouillée) ------------------------------------------
   Le bg musée zoom progressivement sur le centre (= sur le tableau Magritte),
   pendant que le bureau apparait dessous avec un zoom inverse qui converge
   sur l'écran monitor. Effet "le tableau devient l'écran".
   0   → 0.55 : bg musée zoom 1 → 2.2 (focus sur le tableau)
   0.4 → 0.7  : bg musée fade out, bureau fadein
   0   → 0.7  : bureau pre-loaded à scale 1.4, retombe à 1 */
.scene {
  --musee-zoom: calc(1 + var(--progress) * 1.2);
}
.scene .scene__bg--musee {
  opacity: clamp(0, calc(1 - (var(--progress) - 0.4) * 3.3), 1);
}
.scene .scene__bg--bureau {
  opacity: clamp(0, calc((var(--progress) - 0.4) * 3.3), 1);
  transform: scale(clamp(1, calc(1.4 - var(--progress) * 0.4), 1.4));
  transform-origin: center 32%;          /* converge sur le monitor */
}

/* Mobile : footer */
@media (max-width: 768px) {
  .scene__foot { grid-template-columns: 1fr; gap: 0.5rem; text-align: center; font-size: 0.6rem; }
  .scene__foot > * { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .scene { height: 100vh; }
  .scene__bg--musee { --musee-zoom: 1; transform: none !important; }
  .scene__bg--bureau, .scene__fx { opacity: 0 !important; transform: none !important; }
}

/* ===================================================================
   (Le bloc .museum d'origine est conservé plus bas pour compat éventuelle
   mais ne sert plus dans le DOM courant — peut être nettoyé plus tard.)
   =================================================================== */

.museum {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #FAF8F4;                  /* blanc cassé chaud (mur galerie) */
  color: #1A1410;                       /* texte brun éditorial cohérent */
  overflow: hidden;
  /* Lighting musée : radial gradient soft du haut → bas pour simuler
     un spot accroché au plafond éclairant le tableau central */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 30%,
      rgba(255, 252, 245, 1) 0%,
      rgba(250, 248, 244, 1) 50%,
      rgba(232, 228, 220, 1) 100%);
}

/* Top nav grid : nav-links | brand center | CTA right */
.museum__nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5rem 2rem;
  z-index: 10;
}
.museum__nav-links {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.museum__nav-links a {
  color: rgba(26, 20, 16, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
.museum__nav-links a:hover { color: #1A1410; }

.museum__brand {
  justify-self: center;
  font-family: 'Playfair Display', serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #1A1410;
}

.museum__cta {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #1A1410;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(26, 20, 16, 0.25);
  border-radius: 999px;
  transition: background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.museum__cta:hover {
  background: #1A1410;
  color: #FAF8F4;
  border-color: #1A1410;
}
.museum__cta span { margin-left: 0.4rem; display: inline-block; }

/* Scène expo : centrée verticalement, perspective 3D pour le parallax */
.museum__exhibit {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  padding: 6rem 2rem;
}

/* Le cadre : transformé en 3D par le JS via translate3d + rotateXY */
.museum__frame {
  position: relative;
  margin: 0;
  max-width: min(380px, 32vw);
  transform-style: preserve-3d;
  will-change: transform;
  /* Ombre douce contact + halo musée */
  filter: drop-shadow(0 30px 60px rgba(26, 20, 16, 0.18))
          drop-shadow(0 10px 20px rgba(26, 20, 16, 0.10));
}

.museum__frame img {
  display: block;
  width: 100%;
  height: auto;
  /* Bordure fine éditoriale qui simule le cadre */
  border: 1px solid rgba(26, 20, 16, 0.85);
  /* Léger inset pour suggérer un cadre épais sans en faire trop */
  box-shadow:
    inset 0 0 0 6px #FAF8F4,            /* passe-partout blanc */
    inset 0 0 0 7px rgba(26, 20, 16, 0.6); /* fin liseré intérieur */
  background: #FAF8F4;
}

/* Cartel typo éditorial sous le tableau */
.museum__cartel {
  margin-top: 2rem;
  text-align: center;
}
.museum__cartel-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #1A1410;
  margin-bottom: 0.4rem;
}
.museum__cartel-title em {
  font-style: italic;
  color: #B07355;                       /* terracotta accent (rappel halide) */
}
.museum__cartel-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 20, 16, 0.55);
}

/* Footer : annotation gauche · scroll center · clock droite */
.museum__foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(26, 20, 16, 0.6);
  z-index: 10;
}
.museum__annotation { justify-self: start; }
.museum__scroll { justify-self: center; }
.museum__scroll span { margin-left: 0.4rem; }
.museum__clock { justify-self: end; font-variant-numeric: tabular-nums; }

/* Mobile : empile la nav et réduit le cadre */
@media (max-width: 768px) {
  .museum__nav {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .museum__brand { display: none; }     /* trop chargé en mobile */
  .museum__nav-links { gap: 0.9rem; font-size: 0.65rem; }
  .museum__cta { font-size: 0.7rem; padding: 0.5rem 0.9rem; }
  .museum__frame { max-width: 80vw; }
  .museum__foot {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.65rem;
  }
  .museum__foot > * { justify-self: center; }
}

/* Reduced motion : aucun parallax */
@media (prefers-reduced-motion: reduce) {
  .museum__frame { transform: none !important; }
}

/* ===================================================================
   SECTION SCROLL-3D — port vanilla du ContainerScroll Aceternity UI
   Card qui rotateX(20°→0°) + scale + title translate au scroll
   Variables CSS pilotées par JS (--rotate, --scale, --translate)
   =================================================================== */

.scroll-3d {
  position: relative;
  border-top: 1px solid rgba(224, 224, 224, 0.06);
}

.scroll-3d__container {
  height: 60rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .scroll-3d__container {
    height: 80rem;
    padding: 5rem;
  }
}

.scroll-3d__perspective {
  width: 100%;
  position: relative;
  padding: 2.5rem 0;
  perspective: 1000px;
}
@media (min-width: 768px) {
  .scroll-3d__perspective { padding: 10rem 0; }
}

.scroll-3d__title {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  transform: translateY(var(--scroll-3d-translate, 0));
  will-change: transform;
}

.scroll-3d__heading {
  font-family: 'Syncopate', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-top: 1rem;
}
.scroll-3d__heading em {
  font-style: normal;
  color: var(--halide-accent);
}

.scroll-3d__sub {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.scroll-3d__card {
  max-width: 64rem;
  margin: -3rem auto 0;
  height: 30rem;
  width: 100%;
  border: 4px solid #6C6C6C;
  background: #222222;
  border-radius: 30px;
  padding: 0.5rem;
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000a,
    0 233px 65px #00000003;
  transform: rotateX(var(--scroll-3d-rotate, 20deg)) scale(var(--scroll-3d-scale, 1.05));
  transform-origin: center 80%;
  will-change: transform;
}
@media (min-width: 768px) {
  .scroll-3d__card {
    height: 40rem;
    padding: 1.5rem;
  }
}

.scroll-3d__screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: #f8f8f7;            /* fond clair, matche celui du screenshot SC */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.scroll-3d__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;            /* image entière visible, sans crop */
}

/* Reduced motion : card en position finale, pas de scroll-driven */
@media (prefers-reduced-motion: reduce) {
  .scroll-3d__title { transform: none !important; }
  .scroll-3d__card {
    transform: rotateX(0deg) scale(1) !important;
  }
}

/* ===================================================================
   REVEALS ON SCROLL — IntersectionObserver vanilla
   Toute classe .reveal devient visible quand elle entre dans le viewport
   =================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===================================================================
   SECTION WORKS — Réalisations (grille 3×2 inspirée Lusion)
   Hover : bruit displacement SVG sur l'image + label slide-up + tilt 3D
   =================================================================== */

.works {
  position: relative;
  padding: 6rem 1.5rem 8rem;
  background: var(--bg-screen);
}
@media (min-width: 768px) {
  .works { padding: 8rem 3rem 12rem; }
}

.works__head {
  max-width: 64rem;
  margin: 0 auto 4rem;
  text-align: left;
}
@media (min-width: 768px) {
  .works__head { margin-bottom: 6rem; padding-left: 2rem; }
}

.works__sub {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---------- Grille (LEGACY — désactivée : remplacée par le carrousel flex
   défini plus haut ligne ~1483. On ne supprime pas le bloc pour ne pas casser
   d'autres règles qui pourraient s'appuyer dessus, mais on neutralise.) ---------- */
/* .works__grid {
  max-width: 96rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }
} */

/* ---------- Card ---------- */
.work-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  perspective: 1200px;
  cursor: pointer;
}

.work-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1a1c;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg))
    scale(var(--card-s, 1));
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.work-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter, transform;
}

/* Hover : juste un zoom léger + saturation, sans filter noise (perf + clarté visuelle) */
@media (hover: hover) {
  .work-card:hover .work-card__media img {
    filter: contrast(1.04) saturate(1.1);
    transform: scale(1.04);
  }
  .work-card:hover .work-card__media {
    --card-s: 0.985;
  }
}

/* Overlay subtil au hover : bord lumineux bronze qui se révèle */
.work-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(184, 134, 90, 0);
  transition: box-shadow 0.4s ease;
}
@media (hover: hover) {
  .work-card:hover .work-card__media::after {
    box-shadow: inset 0 0 0 1px rgba(184, 134, 90, 0.45);
  }
}

/* ---------- Meta : tags permanents + label slide-up ---------- */
.work-card__meta {
  position: relative;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 3.5rem;
}

.work-card__tags {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.4s ease;
}
.work-card:hover .work-card__tags { color: var(--text-muted); }

.work-card__label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: 'Syncopate', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  overflow: hidden;            /* clipping pour le slide-up */
  /* État par défaut : visible sur mobile/touch, animé sur hover sur desktop */
}

.work-card__arrow {
  display: inline-block;
  color: var(--halide-accent);
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card__name {
  display: inline-block;
}

/* Desktop : label caché → slide-up au hover */
@media (hover: hover) and (min-width: 768px) {
  .work-card__label {
    height: 1.4em;
    line-height: 1.4em;
  }
  .work-card__arrow,
  .work-card__name {
    transform: translateY(110%);
    transition:
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .work-card__arrow { transition-delay: 0ms; }
  .work-card__name  { transition-delay: 60ms; }

  .work-card:hover .work-card__arrow,
  .work-card:hover .work-card__name {
    transform: translateY(0);
  }
  .work-card:hover .work-card__arrow {
    transform: translateY(0) translateX(4px);
  }
}

/* Reduced motion : tout statique, label visible */
@media (prefers-reduced-motion: reduce) {
  .work-card__media,
  .work-card__media img,
  .work-card__arrow,
  .work-card__name {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===================================================================
   PAGE TRANSITION — Désintégration (sans overlay couleur)
   - .page-zoom-image : clone de l'image de la card qui zoom plein écran
     ET se désintègre (blur + saturate down + opacity fade)
   - body.is-leaving : page sortante qui blur + scale + fade
   - body.is-disintegrating : variante "retour" (clic sur back link),
     toute la page qui se désintègre depuis le centre du viewport
   À l'arrivée :
   - body.is-materializing : page entrante qui se matérialise
     (blur depuis grand → net, scale 1.1 → 1, opacity 0 → 1)
   =================================================================== */

/* Clone d'image qui zoom + se désintègre.
   PERF : will-change appliqué via classe .is-animating uniquement, retiré après.
   Blurs réduits (max 16px) pour rester smooth sur les GPU intégrés. */
.page-zoom-image {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  transform-origin: top left;
  transform: translate(0, 0) scale(1);
  transition:
    transform 0.7s cubic-bezier(0.7, 0, 0.3, 1),
    border-radius 0.4s ease-out,
    filter 0.7s cubic-bezier(0.5, 0, 0.8, 1),
    opacity 0.6s cubic-bezier(0.5, 0, 0.8, 1);
  filter: blur(0) saturate(1) brightness(1);
  opacity: 1;
}

.page-zoom-image.is-disintegrating,
.page-zoom-image.is-rematerializing {
  will-change: transform, filter, opacity;
}

.page-zoom-image.is-disintegrating {
  animation: imageDisintegrate 0.7s cubic-bezier(0.5, 0, 0.8, 1) forwards;
}

@keyframes imageDisintegrate {
  0%   { filter: blur(0)    saturate(1)   brightness(1);   opacity: 1; }
  55%  { filter: blur(2px)  saturate(0.9) brightness(1.1); opacity: 0.95; }
  85%  { filter: blur(10px) saturate(0.5) brightness(1.1); opacity: 0.5; }
  100% { filter: blur(16px) saturate(0.2) brightness(0.7); opacity: 0; }
}

.page-zoom-image.is-rematerializing {
  animation: imageRematerialize 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes imageRematerialize {
  0%   { filter: blur(16px) saturate(0.2) brightness(0.7); opacity: 0; }
  15%  { filter: blur(12px) saturate(0.4) brightness(0.85); opacity: 1; }
  100% { filter: blur(0)    saturate(1)   brightness(1);    opacity: 1; }
}

/* Body sortant (clic card) : zoom subtil + blur léger + fade.
   will-change activé uniquement pendant l'anim grâce au sélecteur. */
body.is-leaving main,
body.is-leaving .case {
  animation: pageLeaveDisintegrate 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  will-change: transform, filter, opacity;
}

@keyframes pageLeaveDisintegrate {
  0%   { transform: scale(1);    filter: blur(0)    saturate(1)   brightness(1); opacity: 1; }
  100% { transform: scale(1.08); filter: blur(10px) saturate(0.5) brightness(0.6); opacity: 0; }
}

/* Body se désintégrant (clic back depuis case page) */
body.is-disintegrating > main,
body.is-disintegrating > .case {
  animation: pageBackDisintegrate 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  will-change: transform, filter, opacity;
}

@keyframes pageBackDisintegrate {
  0%   { transform: scale(1);    filter: blur(0)    saturate(1)   brightness(1); opacity: 1; }
  100% { transform: scale(0.94); filter: blur(12px) saturate(0.4) brightness(0.5); opacity: 0; }
}

/* Body qui se matérialise à l'arrivée */
body.is-materializing {
  animation: pageMaterialize 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, filter, opacity;
}

@keyframes pageMaterialize {
  0%   { transform: scale(1.05); filter: blur(14px) saturate(0.4) brightness(0.6); opacity: 0; }
  60%  { filter: blur(3px)  saturate(0.85) brightness(0.95); opacity: 1; }
  100% { transform: scale(1);    filter: blur(0)    saturate(1)    brightness(1);   opacity: 1; }
}

/* PERF : pendant les transitions, le grain global est un filter SVG fullscreen
   qui s'empile sur le filter blur de la page. Double filter = GPU saturé.
   On cache le grain pendant l'anim, restitué après. */
body.is-leaving .site-grain,
body.is-disintegrating .site-grain,
body.is-materializing .site-grain {
  opacity: 0;
}

/* Pendant les transitions : verrouille tous les clics et le curseur,
   évite les bugs de re-clic pendant l'animation. */
body.is-leaving,
body.is-disintegrating {
  cursor: progress;
}
body.is-leaving *,
body.is-disintegrating *,
body.is-materializing * {
  pointer-events: none !important;
}

/* Reduced motion : transition simple fade, pas de désintégration dramatique */
@media (prefers-reduced-motion: reduce) {
  .page-zoom-image,
  body.is-leaving main,
  body.is-leaving .case,
  body.is-disintegrating > main,
  body.is-disintegrating > .case,
  body.is-materializing {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
}

/* ===================================================================
   Reduced motion — désactive tout
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .loader__label--enter,
  .loader__label--exit,
  .loader__letter,
  .loader__sheen {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .loader__fill,
  .loader-screen,
  .site { transition: none !important; }
  .page-transition-overlay { display: none !important; }
}

/* ===================================================================
   LIQUID BACKGROUND — canvas WebGL fullscreen avec displacement fluide
   Signature visuelle type Lusion. La lib threejs-components rend une
   image avec material métallique + displacement map qui ondule sous
   le curseur (effet "goutte d'eau sur image / mercure").
   Z-index 0 → derrière le contenu mais au-dessus du body bg.
   On rend transparents les anciens scenes (Klimt/VanGogh/Halide) pour
   laisser le liquide s'exprimer comme la nouvelle identité hero.
   =================================================================== */
/* ===================================================================
   MESH GRADIENT BACKGROUND — couche de base (paper-design)
   Animated mesh sous le canvas liquide, brun éditorial.
   =================================================================== */
.mesh-bg-mount {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;                       /* couche la plus basse, juste au-dessus du body bg */
  pointer-events: none;
  overflow: hidden;
}
/* Le canvas du mesh shader hérite des dims du mount */
.mesh-bg-mount > * {
  width: 100% !important;
  height: 100% !important;
}

.liquid-bg-canvas {
  /* !important : la lib threejs-components réécrit width/height en pixels
     via le renderer Three.js (basé sur le document, pas le viewport).
     On force le viewport-binding pour avoir un canvas fixed plein écran. */
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 50;                /* au-dessus du topo (z=40) → ondulations traversent le tableau */
  pointer-events: none;
  display: block;
  touch-action: none;
}
/* Home : fond dark #141414 + texture editorialDark = MÊME setup que les cas
   pages (qui marchent). Screen blend + opacity 0.55 (au lieu de 0.65/0.75/0.18
   testés sans succès — la diff était la TEXTURE, pas le blend). */
body.has-liquid-bg:not(.case-page) .liquid-bg-canvas {
  mix-blend-mode: screen;
  opacity: 0.55;
}
/* Home topo : fond sombre uniforme pour faire ressortir l'effet liquide
   et donner plus de présence au tableau + titre. */
body.has-liquid-bg:not(.case-page) {
  background: #141414;
}
/* Cas pages sombres : liquide en mix screen, opacité réduite pour ne pas dominer */
body.has-liquid-bg.case-page .liquid-bg-canvas {
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* Quand le liquide est actif :
   1. Le grain SVG reste actif par-dessus SUR LES CAS PAGES uniquement
      (donne le côté éditorial argentique).
   2. Les éléments halide-scene/contours sont retirés du DOM. */
body.has-liquid-bg .halide-scene { display: none; }
body.has-liquid-bg .halide-contours { display: none; }
/* Home : pas de grain (ni site-grain ni global-grain), pas de scrim → bg dark pur
   + goutte d'eau, c'est tout. Le global-grain (z=1) était oublié en v1 et passait
   visuellement au-dessus de la perception du liquid. Fix v28. */
body.has-liquid-bg:not(.case-page) .site-grain,
body.has-liquid-bg:not(.case-page) .global-grain { display: none; }
body.has-liquid-bg:not(.case-page)::before { display: none; }

/* Le contenu site doit être au-dessus de tous les layers (mesh, liquide, scrim) */
.site, .case {
  position: relative;
  z-index: 3;
}

/* Transparenter toutes les surfaces opaques pour laisser voir le liquide */
body.has-liquid-bg .halide-stage,
body.has-liquid-bg .halide-canvas,
body.has-liquid-bg .halide-viewport,
body.has-liquid-bg .works,
body.has-liquid-bg .scroll-3d {
  background: transparent !important;
}

/* Scrim de lisibilité — vignette sombre fixed-position qui assombrit
   subtilement les bords. Le centre du liquide reste vif, le contenu sur
   les bords gagne en contraste. Pure CSS, zéro perf cost. */
body.has-liquid-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;                       /* au-dessus du liquide (1) et mesh (0), sous le contenu */
  background:
    radial-gradient(ellipse at center,
      rgba(26, 20, 16, 0) 0%,
      rgba(26, 20, 16, 0.20) 55%,
      rgba(26, 20, 16, 0.45) 100%);
}

/* Skip sur tactile + reduced motion : décision Nej, perf mobile avant le wow */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .liquid-bg-canvas { display: none; }
}

/* Cache pendant les transitions pour pas double-coût compositing */
body.is-leaving .liquid-bg-canvas,
body.is-disintegrating .liquid-bg-canvas,
body.is-materializing .liquid-bg-canvas {
  opacity: 0.4;
  transition: opacity 0.3s;
}