/* ============================================================================
   OPAQ — style.css (Jalon 1)
   ----------------------------------------------------------------------------
   Layout du hero : canvas plein écran fixed en background, UI HTML par-dessus.
   J2 ajoutera les sections suivantes au scroll.
   ============================================================================ */

/* §1 — VARIABLES */
:root{
  --c-cream-light:  #F5F2EB;
  --c-cream:        #EDE9E1;
  --c-cream-deep:   #E5E1D8;
  --c-cream-edge:   #DDD7CC;
  --c-anthracite:   #1c1c1a;     /* plus profond pour fond hero */
  --c-anthra-soft:  #2a2a28;
  --c-copper:       #c89968;
  --c-copper-glow:  #e3b384;
  --c-copper-deep:  #8a6845;
  --c-text-strong:  #2a2a28;
  --c-text:         #4a4843;
  --c-text-soft:    #6b6862;
  --c-text-mute:    #8a857d;

  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;

  --pad-x:        clamp(20px, 4vw, 56px);

  --e-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --e-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  --z-canvas:     0;
  --z-fallback:   1;
  --z-content:    10;
  --z-nav:        50;
}


/* §2 — RESET & BASE */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-sans);
  font-size:clamp(15px, 1.15vw, 17px);
  line-height:1.6;
  color:var(--c-cream-light);
  background:var(--c-anthracite);
  min-height:100vh;
  overflow-x:hidden;           /* J2 : scroll vertical activé, horizontal bloqué */
  position:relative;           /* indispensable pour que .scroll-trace en absolute
                                  hérite de la HAUTEUR DU BODY et pas du viewport */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Lenis pose ces classes sur html quand le smooth-scroll est actif */
html.lenis,html.lenis body{ height:auto; }
html.lenis-smooth{ scroll-behavior:auto !important; }
html.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
html.lenis-stopped{ overflow:clip; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
::selection{ background:var(--c-copper); color:var(--c-cream-light); }


/* §2b — CURSEUR CUSTOM Lusion-style
   ---------------------------------------------------------------------------
   Pattern : 2 éléments fixed, mix-blend-mode:difference avec couleur blanche
   pour qu'ils s'inversent automatiquement selon le fond (cuivre sur sombre,
   anthracite sur clair). Le dot suit la souris quasi-instantanément, le ring
   traîne légèrement (effet élastique). Au hover sur un élément cliquable,
   le ring grossit et le dot disparaît dans le ring.
   --------------------------------------------------------------------------- */
.cursor-dot,
.cursor-ring{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  display:none;
  will-change:transform;
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#ffffff;
  transition:width 0.3s var(--e-out-quart),
             height 0.3s var(--e-out-quart),
             opacity 0.3s var(--e-out-quart);
}
.cursor-ring{
  width:38px; height:38px;
  border:1.5px solid #ffffff;
  border-radius:50%;
  opacity:0.7;
  transition:width 0.35s var(--e-out-quart),
             height 0.35s var(--e-out-quart),
             opacity 0.35s var(--e-out-quart),
             border-width 0.35s var(--e-out-quart);
}
.cursor-dot.is-hover{ opacity:0; width:0; height:0; }
.cursor-ring.is-hover{
  width:72px; height:72px;
  opacity:1;
  border-width:1px;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot, .cursor-ring{ display:block; }
  body.has-cursor{ cursor:none; }
  body.has-cursor *{ cursor:none; }
  body.has-cursor input,
  body.has-cursor textarea,
  body.has-cursor select{ cursor:auto; }
}


/* §3 — CANVAS HERO + FALLBACK
   ---------------------------------------------------------------------------
   Le canvas Three.js fait 100vw/100vh, en background fixed.
   En mode dégradé (.mode-degraded), on cache le canvas et on montre l'image
   poster Cloudinary à la place — assombrie pour conserver le contraste sur
   le texte clair.
   --------------------------------------------------------------------------- */
#hero-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:var(--z-canvas);
  display:block;
}
body.mode-degraded #hero-canvas{ display:none; }

#hero-fallback{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  z-index:var(--z-fallback);
  display:none;
  filter:brightness(0.55) saturate(0.9);
}
body.mode-degraded #hero-fallback{ display:block; }

/* TRACÉ CUIVRE scroll-driven (Lusion-style)
   ---------------------------------------------------------------------------
   SVG positionné absolute, hauteur du body entier. Le path se dessine
   progressivement quand on scrolle (stroke-dashoffset piloté par ScrollTrigger).
   Z-index 4 : au-dessus du canvas (0) et du voile (5)... non, AVANT le voile :
   z=4 < hero-veil(5) < hero content(10). Sur les sections post-hero, le voile
   s'arrête au hero donc le tracé reste visible derrière le contenu.
   --------------------------------------------------------------------------- */
.scroll-trace{
  /* FIXED dans le viewport → le tracé reste sous les yeux pendant
     que l'utilisateur scrolle. Sa progression suit le pourcentage
     de scroll de la page. */
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:4;
  opacity:1;
}
.scroll-trace path{
  /* stroke-width et color definis en HTML — pas de surcharge ici */
  fill:none;
  /* Double drop-shadow cuivre = lueur soft Lusion-style (proche, lointain) */
  filter:drop-shadow(0 0 6px rgba(200,153,104,0.65))
         drop-shadow(0 0 14px rgba(200,153,104,0.30));
}
@media (max-width:768px){ .scroll-trace{ display:none; } }
@media (prefers-reduced-motion:reduce){ .scroll-trace{ display:none; } }


/* Halo cuivre très discret en arrière-plan — chaleur ambiante */
.hero-halo{
  position:fixed;
  inset:0;
  z-index:var(--z-fallback);
  pointer-events:none;
  background:radial-gradient(60% 50% at 50% 55%, rgba(200,153,104,0.06) 0%, transparent 70%);
  mix-blend-mode:screen;
}

/* Voile radial SOMBRE devant le canvas, derrière le texte hero.
   Crée une "vignette inversée" qui assombrit le centre où s'affiche le texte
   pour que le titre cuivre clair domine visuellement la sphère.
   Disposé entre le canvas (z:0) et le contenu hero (z:10). */
.hero-veil{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:radial-gradient(ellipse 55% 70% at 50% 50%, rgba(20,20,18,0.55) 0%, rgba(20,20,18,0.18) 55%, transparent 80%);
}


/* §4 — NAVIGATION (HTML overlay, transparente sur le hero sombre)
   --------------------------------------------------------------------------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:var(--z-nav);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.4rem var(--pad-x);
  color:var(--c-cream-light);
  /* Fade progressif (opacity) au scroll vers le bas, plutot qu'un
     slide-up brusque. La classe .is-hidden est posee par JS. */
  transition:opacity 0.8s var(--e-out-quart),
             transform 0.8s var(--e-out-quart),
             background 0.4s var(--e-out-quart),
             backdrop-filter 0.4s var(--e-out-quart);
  will-change:opacity, transform;
}
.nav.is-hidden{
  opacity:0;
  transform:translateY(-12px);  /* leger glissement subtil pour accompagner le fondu */
  pointer-events:none;
}
/* Logo OPAQ dans la nav (image SVG officielle) */
.brand-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.brand-logo img{
  height:54px;            /* logo bien present dans la nav */
  width:auto;
  display:block;
}
.brand-logo:hover{
  opacity:0.85;
  transform:translateY(-1px);
}
@media (max-width:768px){
  .brand-logo img{ height:42px; }
}

/* Anciennes classes texte conservees pour compat (non utilisees) */
.nav-logo{
  display:inline-flex;
  align-items:baseline;
  gap:0.5rem;
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.02em;
}
.nav-logo-mark{
  width:28px; height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--c-cream-light);
  color:var(--c-anthracite);
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.nav-links{
  display:flex;
  gap:2rem;
  align-items:center;
}
.nav-link{
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  color:rgba(245,242,235,0.7);
  position:relative;
  padding:0.5rem 0;
  transition:color 0.3s var(--e-out-quart);
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:0.2rem;
  width:0; height:1px;
  background:var(--c-copper-glow);
  transition:width 0.4s var(--e-out-quart);
}
.nav-link:hover{ color:var(--c-cream-light); }
.nav-link:hover::after{ width:100%; }
.nav-cta{
  padding:0.65rem 1.2rem;
  font-size:13px;
  font-weight:600;
  background:var(--c-cream-light);
  color:var(--c-anthracite);
  border-radius:999px;
  transition:background 0.3s var(--e-out-quart),
             color 0.3s var(--e-out-quart);
}
.nav-cta:hover{
  background:var(--c-copper-glow);
}
.nav-burger{
  display:none;
  width:36px; height:36px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  position:relative;
  z-index:51;       /* au-dessus du drawer (50) pour rester cliquable quand ouvert */
}
.nav-burger span{
  width:22px; height:1.5px;
  background:var(--c-cream-light);
  border-radius:2px;
  transform-origin:center;
  transition:transform 0.4s var(--e-out-expo),
             opacity 0.3s var(--e-out-quart);
}
/* Burger transforme en X quand le drawer est ouvert */
.nav-burger.is-active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2){ opacity:0; }
.nav-burger.is-active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }


/* §4b — DRAWER MOBILE — overlay plein écran avec liens centrés */
.nav-drawer{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(20,20,18,0.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transform:translateY(-12px);
  transition:opacity 0.45s var(--e-out-quart),
             transform 0.5s var(--e-out-expo);
}
.nav-drawer.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.nav-drawer-inner{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  align-items:center;
  text-align:center;
  padding:2rem;
}
.nav-drawer a{
  font-size:clamp(22px, 5vw, 32px);
  font-weight:600;
  color:var(--c-cream-light);
  letter-spacing:-0.015em;
  position:relative;
  padding:0.3rem 0;
  transition:color 0.3s var(--e-out-quart);
}
.nav-drawer a::after{
  content:'';
  position:absolute;
  left:50%; bottom:0;
  width:0; height:1.5px;
  background:var(--c-copper-glow);
  transition:width 0.4s var(--e-out-quart), left 0.4s var(--e-out-quart);
}
.nav-drawer a:hover{ color:var(--c-copper-glow); }
.nav-drawer a:hover::after{ width:60%; left:20%; }
.nav-drawer a.drawer-cta{
  margin-top:1.2rem;
  padding:0.85rem 1.8rem;
  background:var(--c-copper);
  color:var(--c-cream-light);
  border-radius:999px;
  font-size:clamp(15px, 4vw, 18px);
}
.nav-drawer a.drawer-cta::after{ display:none; }
.nav-drawer a.drawer-cta:hover{
  background:var(--c-copper-glow);
  color:var(--c-anthracite);
}

/* Body : on bloque le scroll quand le drawer est ouvert */
body.drawer-open{ overflow:hidden; }


/* §5 — HERO content (titre, sous-titre, CTAs)
   ---------------------------------------------------------------------------
   Centré en absolute, par-dessus le canvas. Apparition progressive au load
   via la classe body.is-loaded (timeline GSAP plus tard en J2).
   --------------------------------------------------------------------------- */
.hero{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:var(--z-content);
  padding:6rem var(--pad-x) 4rem;
}
.hero-content{
  max-width:880px;
  text-align:center;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.45rem 1rem;
  background:rgba(245,242,235,0.06);
  border:1px solid rgba(245,242,235,0.14);
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  color:rgba(245,242,235,0.78);
  letter-spacing:0.04em;
  margin-bottom:2rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  /* anim entrée */
  opacity:0;
  transform:translateY(12px);
  transition:opacity 0.8s var(--e-out-expo) 0.2s,
             transform 0.8s var(--e-out-expo) 0.2s;
}
body.is-loaded .hero-eyebrow{ opacity:1; transform:translateY(0); }
.hero-eyebrow-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--c-copper-glow);
  box-shadow:0 0 0 3px rgba(227,179,132,0.22);
}
.hero-title{
  font-size:clamp(48px, 9vw, 124px);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:0.95;
  color:var(--c-cream-light);
  margin:0 auto 1.6rem;
  max-width:18ch;
  /* anim entrée + parallax inverse souris (CSS variables piloté par JS) */
  opacity:0;
  transform:translate3d(var(--text-mx, 0px), 28px, 0);
  transition:opacity 1.1s var(--e-out-expo) 0.4s,
             transform 1.1s var(--e-out-expo) 0.4s;
  will-change:transform;
}
body.is-loaded .hero-title{
  opacity:1;
  transform:translate3d(var(--text-mx, 0px), var(--text-my, 0px), 0);
  /* Désactive la transition pour le parallax temps-réel : seul le delay au load joue */
  transition:opacity 1.1s var(--e-out-expo) 0.4s,
             transform 0.6s var(--e-out-quart);
}
.hero-title em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}
.hero-sub{
  font-size:clamp(16px, 1.55vw, 21px);
  color:rgba(245,242,235,0.72);
  line-height:1.55;
  max-width:540px;
  margin:0 auto 2.4rem;
  /* anim entrée */
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.9s var(--e-out-expo) 0.7s,
             transform 0.9s var(--e-out-expo) 0.7s;
}
body.is-loaded .hero-sub{ opacity:1; transform:translateY(0); }
.hero-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  /* anim entrée */
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.9s var(--e-out-expo) 0.95s,
             transform 0.9s var(--e-out-expo) 0.95s;
}
body.is-loaded .hero-actions{ opacity:1; transform:translateY(0); }


/* §6 — BOUTONS */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  padding:1rem 1.6rem;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  transition:transform 0.4s var(--e-out-quart),
             background 0.4s var(--e-out-quart),
             color 0.4s var(--e-out-quart),
             border-color 0.4s var(--e-out-quart);
}
.btn{
  /* Préparation pour magnetic effect : transform piloté par JS via CSS variables */
  transform:translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
.btn:hover{ transform:translate3d(var(--mx, 0px), var(--my, 0px), 0) translateY(-1px); }
.btn-arrow{ width:16px; height:16px; transition:transform 0.4s var(--e-out-quart); flex-shrink:0; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

.btn-copper{
  background:var(--c-copper);
  color:var(--c-cream-light);
}
.btn-copper:hover{
  background:var(--c-copper-glow);
  color:var(--c-anthracite);
}

.btn-ghost-light{
  background:transparent;
  color:var(--c-cream-light);
  border:1px solid rgba(245,242,235,0.3);
}
.btn-ghost-light:hover{
  background:rgba(245,242,235,0.08);
  border-color:var(--c-cream-light);
}


/* §7 — INDICATEUR DE SCROLL (en bas du hero, prépare J2) */
.hero-scroll{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:rgba(245,242,235,0.45);
  z-index:var(--z-content);
  opacity:0;
  transition:opacity 0.8s var(--e-out-expo) 1.4s;
}
body.is-loaded .hero-scroll{ opacity:1; }
.hero-scroll-line{
  width:1px;
  height:36px;
  background:linear-gradient(to bottom, rgba(245,242,235,0.45), transparent);
}


/* §7b — CURSEUR LABEL — quand on hover un [data-cursor-text],
   un petit label texte apparaît dans le ring (pattern Lusion).
   --------------------------------------------------------------------------- */
.cursor-label{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  display:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#ffffff;
  mix-blend-mode:difference;
  white-space:nowrap;
  opacity:0;
  transition:opacity 0.3s var(--e-out-quart);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cursor-label{ display:block; }
}
.cursor-label.is-active{ opacity:1; }


/* §8 — SECTIONS POST-HERO (Jalon 2)
   ---------------------------------------------------------------------------
   Les sections apparaissent EN AVANT du canvas Three.js (z-index > z-canvas)
   mais derrière la nav + curseur. Le canvas reste fixed en background, c'est
   ScrollTrigger qui transforme la sphère/caméra au passage de chaque section.
   --------------------------------------------------------------------------- */
.section{
  position:relative;
  z-index:var(--z-content);
  padding:clamp(80px, 12vh, 140px) var(--pad-x);
  min-height:100vh;
  display:flex;
  align-items:center;
}
.container{
  max-width:1280px;
  margin-inline:auto;
  width:100%;
}
.container-narrow{
  max-width:880px;
  margin-inline:auto;
  width:100%;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--c-copper-glow);
  margin-bottom:1.2rem;
}
.eyebrow::before{
  content:'';
  width:24px; height:1px;
  background:var(--c-copper);
}
.section-head{
  margin-bottom:clamp(48px, 7vw, 96px);
  max-width:840px;
}
.section-title{
  font-size:clamp(36px, 6vw, 88px);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:0.98;
  color:var(--c-cream-light);
  margin:0;
}
.section-title em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}

/* Reveal : .rv → .is-in (l'observer est posé en JS) */
.rv{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.0s var(--e-out-expo),
             transform 1.0s var(--e-out-expo);
  will-change:opacity, transform;
}
.rv.is-in{ opacity:1; transform:translateY(0); }
.rv.rv-d1{ transition-delay:0.10s; }
.rv.rv-d2{ transition-delay:0.20s; }
.rv.rv-d3{ transition-delay:0.30s; }


/* §9 — SECTION PITCH */
.section-pitch{
  text-align:center;
}
.section-pitch .container-narrow{ display:flex; flex-direction:column; align-items:center; }
.pitch-text{
  font-family:var(--font-serif);
  font-size:clamp(26px, 4vw, 56px);
  font-weight:300;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--c-cream-light);
  max-width:24ch;
  margin:0;
}
.pitch-text em{
  font-style:italic;
  color:var(--c-copper-glow);
  font-weight:400;
}


/* §10 — SECTION SERVICES (3 cards) */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 2.4vw, 32px);
}
.service-card{
  position:relative;
  padding:clamp(28px, 3vw, 48px);
  background:rgba(245,242,235,0.04);
  border:1px solid rgba(245,242,235,0.10);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 0.5s var(--e-out-quart),
             border-color 0.5s var(--e-out-quart),
             background 0.5s var(--e-out-quart);
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--c-copper);
  background:rgba(245,242,235,0.07);
}
.service-num{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:300;
  font-size:48px;
  color:var(--c-copper-glow);
  line-height:1;
}
.service-card h3{
  font-size:clamp(20px, 2vw, 26px);
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--c-cream-light);
}
.service-card p{
  color:rgba(245,242,235,0.70);
  line-height:1.55;
  flex:1;
}
.service-price{
  font-size:13px;
  color:var(--c-copper-glow);
  letter-spacing:0.02em;
  padding-top:0.8rem;
  border-top:1px solid rgba(245,242,235,0.08);
}


/* §11 — SECTION FEATURED WORK (templates Lusion-style)
   ---------------------------------------------------------------------------
   Cards cliquables, image au repos, vidéo en hover (live photo). Au survol,
   le contenu scale légèrement, l'image s'agrandit dans son frame, et
   un dégradé sombre apparaît en bas pour faire ressortir le tag.
   --------------------------------------------------------------------------- */
/* Templates : on retire le min-height 100vh et on tasse le bas pour
   reduire l'ecart avant l'arrivee de la sphere (end-section). */
.section-featured{
  min-height:auto;
  padding-bottom:clamp(40px, 5vw, 60px);
}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(24px, 3vw, 48px);
}
.featured-card{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  text-decoration:none;
  color:inherit;
  transition:transform 0.6s var(--e-out-expo);
}
.featured-card:hover{ transform:translateY(-6px); }

.featured-thumb{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:20px;
  overflow:hidden;
  background:rgba(245,242,235,0.06);
  border:1px solid rgba(245,242,235,0.08);
  box-shadow:0 4px 12px rgba(0,0,0,0.3),
             0 30px 60px -20px rgba(0,0,0,0.5);
  transition:box-shadow 0.6s var(--e-out-expo),
             border-color 0.6s var(--e-out-expo);
}
.featured-card:hover .featured-thumb{
  box-shadow:0 8px 20px rgba(0,0,0,0.4),
             0 40px 100px -30px rgba(200,153,104,0.4);
  border-color:rgba(200,153,104,0.3);
}
.featured-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
  /* Ken Burns au repos : zoom lent + drift continu. Au hover, transition
     plus rapide (2.4s) avec ease-out pour un mouvement reactif sans etre
     mecanique — sweet spot entre cinematic et responsive. */
  transform:scale(1.02);
  transition:transform 2.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change:transform;
}
.featured-card:hover .featured-img{
  transform:scale(1.28) translate(-2.5%, -1.8%);
}

.featured-meta{
  padding:0 0.4rem;
}
.featured-tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--c-copper-glow);
  margin-bottom:0.6rem;
}
.featured-meta h3{
  font-size:clamp(22px, 2.8vw, 36px);
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.05;
  color:var(--c-cream-light);
}
.featured-meta h3 em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}


/* §11b — END SECTION (J2b) — scène immersive finale
   ---------------------------------------------------------------------------
   Section qui se pin pendant la timeline GSAP J2b. Visuellement, à mesure
   que le scroll progresse :
     • le canvas (sphère) revient en opacité (0 → 1)
     • la sphère grossit (scale 1 → 2.4)
     • la caméra plonge (z 4.6 → 1.1) → on entre quasi dans la sphère
     • le displacement amplifie (uAmplitude 0.40 → 0.70)
     • un voile sombre radial assombrit le bord pour focaliser
     • le titre + sous-titre + CTA apparaissent en cascade
   --------------------------------------------------------------------------- */
.section-end{
  position:relative;
  z-index:var(--z-content);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* padding-top reduit : la sphere apparait des qu'on entre dans la
     section, sans grand espace blanc avant. */
  padding:1.5rem var(--pad-x) 6rem;
  text-align:center;
  isolation:isolate;
}
.section-end::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 50%, transparent 0%, rgba(20,20,18,0.55) 75%, rgba(20,20,18,0.85) 100%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity 0.6s var(--e-out-quart);
}
.section-end.is-immersive::before{ opacity:1; }

.end-content{
  position:relative;
  z-index:1;
  max-width:920px;
}
.end-eyebrow{
  margin-bottom:1.4rem;
  opacity:0;
  transform:translateY(20px);
}
.end-title{
  font-size:clamp(44px, 8vw, 124px);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:0.95;
  color:var(--c-cream-light);
  margin:0 0 1.6rem;
  max-width:18ch;
  margin-inline:auto;
  /* opacity:0 par défaut — GSAP timeline pousse à 1 au pin */
  opacity:0;
  transform:translateY(60px);
}
.end-title em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}
.end-sub{
  font-size:clamp(15px, 1.4vw, 19px);
  color:rgba(245,242,235,0.72);
  line-height:1.55;
  max-width:520px;
  margin:0 auto 2.4rem;
  opacity:0;
  transform:translateY(40px);
}
.end-cta{
  opacity:0;
  transform:translateY(30px);
}

/* Mobile / reduced-motion : pas de pin, contenu visible directement */
@media (max-width:768px), (prefers-reduced-motion:reduce){
  .section-end::before{ opacity:1; }
  .end-eyebrow,
  .end-title,
  .end-sub,
  .end-cta{ opacity:1 !important; transform:none !important; }
}


/* §12 — FOOTER court */
.footer{
  position:relative;
  z-index:var(--z-content);
  padding:clamp(48px, 6vw, 80px) var(--pad-x);
  border-top:1px solid rgba(245,242,235,0.08);
  background:rgba(15,15,13,0.6);
  backdrop-filter:blur(8px);
}
.footer-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.footer-logo{
  display:inline-block;
  margin-bottom:0.6rem;
}
.footer-logo img{
  height:42px;
  width:auto;
  display:block;
  opacity:0.9;
  transition:opacity 0.3s ease;
}
.footer-logo:hover img{ opacity:1; }
.footer-tag{
  font-size:13px;
  color:rgba(245,242,235,0.55);
}
.footer-cols{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  text-align:right;
  font-size:13px;
}
.footer-cols a{ color:var(--c-copper-glow); }
.footer-cols span{ color:rgba(245,242,235,0.45); font-size:12px; }


/* §13 — RESPONSIVE */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .hero-actions{ flex-direction:column; align-items:stretch; width:100%; max-width:320px; margin-inline:auto; }
  .hero-actions .btn{ justify-content:center; }
  .hero-scroll{ display:none; }
  .services-grid{ grid-template-columns:1fr; }
  .featured-grid{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-cols{ text-align:left; align-items:flex-start; }
}


/* ============================================================================
   §14 — PAGES SECONDAIRES (J3) — bases communes tarifs / faq / contact
   ----------------------------------------------------------------------------
   Pas de canvas Three.js sur ces pages → on remplace le hero immersif par
   un fond gradient ondulant subtil (CSS keyframes lentes) et un hero court.
   Toutes les pages partagent .page-bg, .page-curtain, .page-hero, .nav-page.
   ============================================================================ */

/* Fond ondulant discret : 3 radial gradients qui pulsent lentement.
   Subtil = opacités 0.04-0.08, period 22-30s, transform-based pour rester
   sur le compositor (pas de repaint coûteux). */
.page-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(200,153,104,0.08) 0%, transparent 60%),
    radial-gradient(42% 34% at 78% 72%, rgba(227,179,132,0.06) 0%, transparent 60%),
    radial-gradient(60% 50% at 50% 50%, rgba(245,242,235,0.03) 0%, transparent 70%);
  background-color:var(--c-anthracite);
  animation:pageBgFloat 26s ease-in-out infinite alternate;
  will-change:background-position;
}
@keyframes pageBgFloat{
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
  100% { background-position: -2% 3%, 4% -2%, 1% 1%; }
}

/* RIDEAU de transition de page (Lusion-style)
   - Au load : couvre l'écran (is-in), puis se rétracte vers le bas (is-out)
   - Au clic sur un lien interne : retombe (is-in) puis navigation
   On utilise transform Y pour rester sur le GPU. */
.page-curtain{
  position:fixed;
  inset:0;
  z-index:9000;
  background:var(--c-anthracite);
  transform:translateY(0);
  transition:transform 0.85s var(--e-out-expo);
  pointer-events:none;
}
.page-curtain.is-out{
  transform:translateY(-100%);
}
.page-curtain.is-in{
  transform:translateY(0);
}
.page-curtain.is-hidden{
  display:none;
}

/* Body sur les pages secondaires : on force un min-height pour Lenis,
   et on assure que le contenu passe devant le fond. */
body.page{
  background:var(--c-anthracite);
  min-height:100vh;
}

/* Sur les pages secondaires, le canvas/halo/voile n'existent pas — pas de règle
   spécifique nécessaire, ils ne seront tout simplement pas dans le DOM. */


/* §14b — NAV-PAGE — variante de la nav home, fond translucide quand on scrolle */
.nav-page{
  background:rgba(28,28,26,0.0);
  transition:background 0.4s var(--e-out-quart),
             backdrop-filter 0.4s var(--e-out-quart);
}
.nav-page.is-scrolled{
  background:rgba(28,28,26,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


/* §14c — PAGE HERO COURT (~50vh) — titre + sous-titre, pas plus */
.page-hero{
  position:relative;
  z-index:var(--z-content);
  min-height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:9rem var(--pad-x) 4rem;
}
.page-hero .eyebrow{
  margin-bottom:1.4rem;
}
.page-hero-title{
  font-size:clamp(40px, 7vw, 92px);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:0.98;
  color:var(--c-cream-light);
  margin:0 0 1.4rem;
  max-width:18ch;
}
.page-hero-title em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}
.page-hero-sub{
  font-size:clamp(15px, 1.4vw, 19px);
  color:rgba(245,242,235,0.72);
  line-height:1.55;
  max-width:560px;
  margin:0;
}


/* ============================================================================
   §15 — TARIFS — toggle Mensuel/One-shot + 3 cards + comparatif + CTA final
   ============================================================================ */

.section-pricing{
  position:relative;
  z-index:var(--z-content);
  padding:clamp(40px, 5vw, 80px) var(--pad-x) clamp(60px, 8vw, 120px);
}

/* Toggle pill — 2 positions (monthly / oneshot-cle) ---------------------- */
.pricing-toggle{
  position:relative;
  display:inline-flex;
  margin:0 auto clamp(40px, 5vw, 64px);
  padding:4px;
  background:rgba(245,242,235,0.06);
  border:1px solid rgba(245,242,235,0.10);
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pricing-toggle-wrap{
  display:flex;
  justify-content:center;
}
.pricing-toggle button{
  position:relative;
  z-index:2;
  padding:0.75rem 1.6rem;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  color:rgba(245,242,235,0.62);
  border-radius:999px;
  transition:color 0.4s var(--e-out-quart);
  cursor:pointer;
  white-space:nowrap;
}
.pricing-toggle button.is-active{
  color:var(--c-anthracite);
}
.pricing-toggle-pill{
  position:absolute;
  top:4px; left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  background:var(--c-cream-light);
  border-radius:999px;
  z-index:1;
  transition:transform 0.5s var(--e-out-expo);
}
.pricing-toggle[data-active="monthly"]     .pricing-toggle-pill{ transform:translateX(0); }
.pricing-toggle[data-active="oneshot-cle"] .pricing-toggle-pill{ transform:translateX(100%); }

/* Grille 3 cards --------------------------------------------------------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(20px, 2.4vw, 32px);
  align-items:stretch;     /* toutes les cards même hauteur — sinon IA paraît rabougrie */
  transform:translate3d(var(--parX, 0px), var(--parY, 0px), 0);
  transition:transform 0.6s var(--e-out-quart);
  margin-bottom:clamp(40px, 5vw, 80px);
}
.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  padding:clamp(28px, 3vw, 44px);
  background:rgba(245,242,235,0.04);
  border:1px solid rgba(245,242,235,0.10);
  border-radius:20px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 0.5s var(--e-out-quart),
             border-color 0.5s var(--e-out-quart),
             background 0.5s var(--e-out-quart),
             box-shadow 0.5s var(--e-out-quart);
}
.pricing-card:hover{
  transform:translateY(-8px);
  border-color:var(--c-copper);
  background:rgba(245,242,235,0.07);
  box-shadow:0 30px 60px -20px rgba(200,153,104,0.25);
}
.pricing-card-featured{
  /* Carte centrale plus haute, accent cuivre */
  background:linear-gradient(180deg, rgba(200,153,104,0.10) 0%, rgba(245,242,235,0.04) 60%);
  border-color:rgba(200,153,104,0.35);
  margin-top:-12px;
  padding-top:clamp(36px, 4vw, 56px);
}
.pricing-card-featured:hover{
  border-color:var(--c-copper-glow);
  box-shadow:0 30px 70px -20px rgba(200,153,104,0.45);
}
.pricing-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 14px;
  background:var(--c-copper);
  color:var(--c-cream-light);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  white-space:nowrap;
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(200,153,104,0.45); }
  50%      { box-shadow:0 0 0 8px rgba(200,153,104,0); }
}
.pricing-tagline{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--c-copper-glow);
}
.pricing-card h3{
  font-size:clamp(24px, 2.6vw, 34px);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--c-cream-light);
  margin:0;
}
.pricing-price{
  display:flex;
  align-items:baseline;
  gap:0.4rem;
  margin:0.4rem 0 0.6rem;
}
.pricing-amount{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(48px, 6vw, 72px);
  letter-spacing:-0.03em;
  color:var(--c-copper-glow);
  line-height:1;
}
.pricing-amount-text{
  /* Pour la card "Sur devis" — pas de chiffre, juste du texte */
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 3.4vw, 40px);
  letter-spacing:-0.02em;
  color:var(--c-copper-glow);
  line-height:1.1;
}
.pricing-period{
  font-size:14px;
  color:rgba(245,242,235,0.70);
  font-weight:500;
}
.pricing-features{
  list-style:none;
  margin:0;
  padding:1rem 0 0;
  border-top:1px solid rgba(245,242,235,0.08);
  display:none;       /* caché par défaut, montré par mode via [data-mode] */
  flex-direction:column;
  gap:0.7rem;
  flex:1;
}
/* On affiche uniquement la liste correspondant au mode actif de la grille */
.pricing-grid[data-mode="monthly"]      .pricing-features[data-mode="monthly"],
.pricing-grid[data-mode="oneshot-cle"]  .pricing-features[data-mode="oneshot-cle"]{
  display:flex;
}

/* Mention discrète bas de card en mode clé en main (rappel sans suivi) -- */
.pricing-footnote{
  display:none;
  margin-top:0.2rem;
  font-size:11.5px;
  color:rgba(245,242,235,0.55);
  line-height:1.5;
  font-style:italic;
}
.pricing-grid[data-mode="oneshot-cle"] .pricing-card .pricing-footnote{
  display:block;
}

/* Card IA en mode one-shot : pas de grisé, juste un message + bouton renvoyant
   vers le mode mensuel. Visuellement identique aux autres cards. */
.pricing-card-ia .pricing-ia-disabled-msg{
  display:none;
  font-size:13px;
  color:rgba(245,242,235,0.65);
  margin:0.3rem 0;
  font-style:italic;
}
.pricing-grid[data-mode="oneshot-cle"] .pricing-card-ia .pricing-ia-disabled-msg{
  display:block;
}
/* En mode clé en main, on garde les features IA visibles pour que la card
   reste de la même hauteur que les autres — on cache juste le CTA "réel"
   pour le remplacer par "Voir la formule mensuelle". */
.pricing-grid[data-mode="oneshot-cle"] .pricing-card-ia > .btn[data-cta="real"]{
  display:none;
}
.pricing-card-ia .btn[data-cta="back-monthly"]{
  display:none;
}
.pricing-grid[data-mode="oneshot-cle"] .pricing-card-ia .btn[data-cta="back-monthly"]{
  display:inline-flex;
  /* Pousse le bouton tout en bas de la card pour s'aligner sur les CTAs
     des autres cards — sinon il colle au message "Disponible uniquement
     en formule mensuelle" et reste en haut. */
  margin-top:auto;
}

/* Listes inclus / non-inclus (en mode clé en main) ----------------------- */
.pricing-features li.is-not-included{
  color:rgba(245,242,235,0.45);
  text-decoration:line-through;
  text-decoration-color:rgba(255,120,100,0.5);
}
.pricing-features li.is-not-included::before{
  background:rgba(229,124,94,0.7);
  box-shadow:0 0 0 3px rgba(229,124,94,0.15);
}
.pricing-features li{
  position:relative;
  padding-left:1.4rem;
  font-size:14px;
  line-height:1.5;
  color:rgba(245,242,235,0.80);
}
.pricing-features li::before{
  content:'';
  position:absolute;
  left:0; top:0.5em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-copper);
  box-shadow:0 0 0 3px rgba(200,153,104,0.18);
}
.pricing-card .btn{
  margin-top:0.4rem;
  justify-content:center;
}

/* Ligne d'options paiement sous la grille */
.pricing-options{
  text-align:center;
  font-size:13px;
  color:rgba(245,242,235,0.55);
  letter-spacing:0.02em;
  margin:0 auto clamp(60px, 8vw, 100px);
  max-width:780px;
  line-height:1.7;
}
/* Détail Klarna 3× — visible uniquement quand on est en mode one-shot */
.pricing-klarna{
  display:none;
  text-align:center;
  margin:1.4rem auto 0;
  max-width:680px;
  font-size:13px;
  color:rgba(245,242,235,0.65);
  line-height:1.8;
}
.pricing-klarna strong{
  color:var(--c-copper-glow);
  font-weight:600;
}
.pricing-grid[data-mode="oneshot-cle"] ~ .pricing-options .pricing-klarna{
  display:block;
}

/* Comparatif ------------------------------------------------------------- */
.pricing-compare{
  margin:0 auto clamp(60px, 8vw, 100px);
  max-width:780px;
}
.pricing-compare th[scope="col"].col-monthly,
.pricing-compare td.col-monthly{
  color:var(--c-copper-glow);
}
.pricing-compare td.txt-yes{ color:var(--c-copper-glow); font-weight:600; }
.pricing-compare td.txt-no { color:rgba(245,242,235,0.40); }
.pricing-compare h3{
  font-size:clamp(22px, 2.4vw, 30px);
  font-weight:700;
  color:var(--c-cream-light);
  text-align:center;
  margin:0 0 2rem;
  letter-spacing:-0.02em;
}
.pricing-compare table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.pricing-compare th,
.pricing-compare td{
  padding:1rem 0.8rem;
  text-align:center;
  border-bottom:1px solid rgba(245,242,235,0.08);
  color:rgba(245,242,235,0.78);
}
.pricing-compare th{
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--c-cream-light);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.1em;
}
.pricing-compare th:first-child,
.pricing-compare td:first-child{
  text-align:left;
  color:rgba(245,242,235,0.92);
  font-weight:500;
}
.pricing-compare .yes{ color:var(--c-copper-glow); font-weight:600; }
.pricing-compare .no { color:rgba(245,242,235,0.32); }

/* CTA final --------------------------------------------------------------- */
.pricing-final{
  text-align:center;
  padding:clamp(50px, 7vw, 90px) 0 0;
  border-top:1px solid rgba(245,242,235,0.08);
}
.pricing-final h2{
  font-size:clamp(28px, 4.2vw, 52px);
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--c-cream-light);
  margin:0 0 2rem;
  line-height:1.15;
}
.pricing-final h2 em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}


/* ============================================================================
   §16 — FAQ — accordéons + filtres pill
   ============================================================================ */

.section-faq{
  position:relative;
  z-index:var(--z-content);
  padding:clamp(40px, 5vw, 80px) var(--pad-x) clamp(60px, 8vw, 120px);
}
.faq-filters{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  justify-content:center;
  margin:0 auto clamp(36px, 5vw, 56px);
  max-width:760px;
}
.faq-filter{
  padding:0.6rem 1.2rem;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  color:rgba(245,242,235,0.70);
  background:rgba(245,242,235,0.04);
  border:1px solid rgba(245,242,235,0.10);
  border-radius:999px;
  cursor:pointer;
  transition:background 0.4s var(--e-out-quart),
             color 0.4s var(--e-out-quart),
             border-color 0.4s var(--e-out-quart);
}
.faq-filter:hover{
  border-color:rgba(200,153,104,0.5);
  color:var(--c-cream-light);
}
.faq-filter.is-active{
  background:var(--c-copper);
  color:var(--c-cream-light);
  border-color:var(--c-copper);
}

.faq-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.faq-item{
  background:rgba(245,242,235,0.04);
  border:1px solid rgba(245,242,235,0.10);
  border-radius:14px;
  overflow:hidden;
  transition:border-color 0.4s var(--e-out-quart),
             background 0.4s var(--e-out-quart),
             opacity 0.4s var(--e-out-quart),
             transform 0.4s var(--e-out-quart);
}
.faq-item.is-hidden{
  display:none;
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.3rem 1.6rem;
  font-size:clamp(15px, 1.3vw, 18px);
  font-weight:600;
  color:var(--c-cream-light);
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background 0.3s var(--e-out-quart);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item:hover{
  background:rgba(245,242,235,0.07);
  border-color:rgba(200,153,104,0.30);
}
.faq-icon{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid var(--c-copper);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--c-copper-glow);
  font-size:18px;
  font-weight:300;
  line-height:1;
  transition:transform 0.4s var(--e-out-quart),
             background 0.4s var(--e-out-quart);
}
.faq-item:hover .faq-icon{
  background:rgba(200,153,104,0.12);
  transform:scale(1.1);
}
.faq-item[open] .faq-icon{
  transform:rotate(45deg);
  background:var(--c-copper);
  color:var(--c-cream-light);
}
.faq-answer{
  padding:0 1.6rem 1.4rem;
  color:rgba(245,242,235,0.78);
  font-size:15px;
  line-height:1.7;
  /* On anime via JS l'apparition pour avoir un fade-up doux */
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 0.45s var(--e-out-quart),
             transform 0.45s var(--e-out-quart);
}
.faq-item[open] .faq-answer{
  opacity:1;
  transform:translateY(0);
}
.faq-item[open]{
  border-color:rgba(200,153,104,0.40);
  background:rgba(200,153,104,0.06);
}
.faq-cta{
  text-align:center;
  margin-top:clamp(60px, 8vw, 90px);
  padding-top:clamp(40px, 5vw, 60px);
  border-top:1px solid rgba(245,242,235,0.08);
}
.faq-cta h2{
  font-size:clamp(24px, 3.4vw, 40px);
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--c-cream-light);
  margin:0 0 1.4rem;
}
.faq-cta h2 em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--c-copper-glow);
}


/* ============================================================================
   §17 — CONTACT — Calendly + formulaire 2 colonnes
   ============================================================================ */

.section-contact{
  position:relative;
  z-index:var(--z-content);
  padding:clamp(40px, 5vw, 80px) var(--pad-x) clamp(60px, 8vw, 120px);
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(24px, 3vw, 48px);
  max-width:1180px;
  margin:0 auto;
}
.contact-card{
  position:relative;
  padding:clamp(28px, 3vw, 44px);
  background:rgba(245,242,235,0.04);
  border:1px solid rgba(245,242,235,0.10);
  border-radius:20px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.contact-card h2{
  font-size:clamp(22px, 2.4vw, 30px);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--c-cream-light);
  margin:0 0 0.5rem;
}
.contact-card .contact-sub{
  font-size:14px;
  color:rgba(245,242,235,0.65);
  margin:0 0 1.4rem;
  line-height:1.5;
}
/* Wrapper du widget Calendly inline. Le widget officiel injecte son
   propre iframe a l'interieur de .calendly-inline-widget. */
.contact-calendly{
  width:100%;
  border:1px solid #c89968;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.35);
  background:#ede9e1;
}
.contact-calendly .calendly-inline-widget{
  width:100%;
  min-width:320px;
  height:720px;
  display:block;
}

/* Formulaire ------------------------------------------------------------- */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.contact-field{
  position:relative;
  display:flex;
  flex-direction:column;
}
.contact-field label{
  position:absolute;
  top:14px;
  left:14px;
  font-size:14px;
  color:rgba(245,242,235,0.55);
  pointer-events:none;
  transition:transform 0.35s var(--e-out-quart),
             color 0.35s var(--e-out-quart),
             font-size 0.35s var(--e-out-quart),
             top 0.35s var(--e-out-quart);
  background:transparent;
  padding:0 4px;
}
.contact-field input,
.contact-field textarea,
.contact-field select{
  width:100%;
  padding:1.1rem 1rem 0.7rem;
  font:inherit;
  font-size:15px;
  color:var(--c-cream-light);
  background:rgba(245,242,235,0.03);
  border:1px solid rgba(245,242,235,0.14);
  border-radius:10px;
  transition:border-color 0.4s var(--e-out-quart),
             background 0.4s var(--e-out-quart);
  outline:none;
}
.contact-field textarea{
  min-height:120px;
  resize:vertical;
  padding-top:1.5rem;
}
.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus{
  border-color:var(--c-copper);
  background:rgba(245,242,235,0.05);
}
.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label,
.contact-field select:focus + label,
.contact-field select:valid + label{
  top:-8px;
  font-size:11px;
  color:var(--c-copper-glow);
  background:var(--c-anthracite);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.contact-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--c-copper-glow) 50%),
                   linear-gradient(135deg, var(--c-copper-glow) 50%, transparent 50%);
  background-position:calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:36px;
}
.contact-field select option{
  background:var(--c-anthracite);
  color:var(--c-cream-light);
}
.contact-error{
  font-size:12px;
  color:#e57c5e;
  margin-top:0.3rem;
  min-height:1em;
  letter-spacing:0.02em;
}
/* Honeypot anti-spam (Netlify Forms) — caché aux humains, visible pour les bots */
.contact-honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
  pointer-events:none;
}
.contact-submit{
  margin-top:0.4rem;
  align-self:flex-start;
}
.contact-success{
  display:none;
  text-align:center;
  padding:2rem 1rem;
  background:rgba(200,153,104,0.12);
  border:1px solid rgba(200,153,104,0.35);
  border-radius:14px;
  color:var(--c-cream-light);
  font-size:16px;
  line-height:1.5;
  animation:successPop 0.6s var(--e-out-expo);
}
.contact-success-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--c-copper);
  color:var(--c-cream-light);
  font-size:24px;
  margin-bottom:1rem;
}
.contact-form.is-submitted{ display:none; }
.contact-form.is-submitted + .contact-success{ display:block; }
@keyframes successPop{
  0%   { opacity:0; transform:scale(0.94); }
  100% { opacity:1; transform:scale(1); }
}
.contact-mailto{
  text-align:center;
  margin-top:clamp(40px, 5vw, 60px);
  font-size:14px;
  color:rgba(245,242,235,0.65);
}
.contact-mailto a{
  color:var(--c-copper-glow);
  text-decoration:underline;
  text-decoration-color:rgba(227,179,132,0.4);
  text-underline-offset:3px;
  transition:text-decoration-color 0.3s var(--e-out-quart);
}
.contact-mailto a:hover{
  text-decoration-color:var(--c-copper-glow);
}


/* ============================================================================
   §18 — RESPONSIVE pages secondaires
   ============================================================================ */

@media (max-width:900px){
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-card-featured{ margin-top:0; }
  .pricing-compare{ overflow-x:auto; }
  .pricing-compare table{ min-width:560px; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-calendly .calendly-inline-widget{ height:600px; }
}
@media (max-width:768px){
  .page-hero{ padding:7rem var(--pad-x) 3rem; min-height:auto; }
  .pricing-toggle{ font-size:12px; }
  .pricing-toggle button{ padding:0.6rem 1.1rem; font-size:12px; }
  .faq-item summary{ padding:1.1rem 1.2rem; }
  .contact-calendly .calendly-inline-widget{ height:600px; }
}


/* ============================================================================
   §17b — PAGE MENTIONS LÉGALES — texte structuré, lecture confortable
   ============================================================================ */
.section-legal{
  position:relative;
  z-index:var(--z-content);
  padding:clamp(40px, 5vw, 80px) var(--pad-x) clamp(60px, 8vw, 120px);
}
.legal-block{
  margin:0 0 clamp(36px, 4vw, 56px);
}
.legal-block h2{
  font-size:clamp(20px, 2.4vw, 28px);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--c-cream-light);
  margin:0 0 1rem;
  padding-bottom:0.6rem;
  border-bottom:1px solid rgba(245,242,235,0.1);
}
.legal-block p{
  color:rgba(245,242,235,0.78);
  line-height:1.65;
  margin:0 0 0.8rem;
}
.legal-block p:last-child{ margin-bottom:0; }
.legal-block a{
  color:var(--c-copper-glow);
  text-decoration:underline;
  text-decoration-color:rgba(227,179,132,0.4);
  text-underline-offset:3px;
  transition:text-decoration-color 0.3s var(--e-out-quart);
}
.legal-block a:hover{
  text-decoration-color:var(--c-copper-glow);
}
.legal-block ul{
  margin:0 0 0.8rem;
  padding-left:1.4rem;
  color:rgba(245,242,235,0.78);
  line-height:1.65;
}
.legal-block ul li{ margin-bottom:0.3rem; }
.legal-note{
  font-size:13px;
  color:rgba(245,242,235,0.55);
  font-style:italic;
}
.legal-updated{
  text-align:center;
  font-size:12px;
  color:rgba(245,242,235,0.45);
  margin-top:clamp(40px, 5vw, 60px);
  letter-spacing:0.05em;
}


/* §13 — RESPONSIVE (rappel) — déjà défini plus haut, RAS ici */


/* §9 — REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  body{ overflow:auto; }
  .page-curtain{ display:none; }
  .page-bg{ animation:none; }
}