/* ══════════════════════════════════════════════════════════════════
   NIAKS TECH — SHELL PARTAGÉ
   ------------------------------------------------------------------
   Chargé par TOUTES les pages. Contient uniquement ce qui est
   identique partout : reset, tokens, curseur, loader, canvas, nav,
   menu mobile, boutons, primitives de section, footer, focus clavier.

   Le contenu propre à chaque page (hero, grilles de services, tarifs,
   formulaire de contact…) reste dans le <style> de cette page.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   RESET & VARIABLES
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --g1: #FFF9C8;
  --g2: #EDD060;
  --g3: #C89030;
  --g4: #9A6C10;
  --g5: #6A4808;
  --dark:  #020810;
  --dark2: #050E1C;
  --dark3: #0A1828;
  --white: #EEF2F8;
  --dim:   rgba(196,152,48,0.75);
  --rule:  rgba(196,152,48,0.15);
  --cyan:  rgba(96,200,255,0.7);
  --purple: rgba(160,100,240,0.7);
  --green: rgba(50,210,140,0.7);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--dark);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ── Custom cursor (desktop pointers only) — c'est le logo Niaks ── */
#cursor {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px;
  background: url("/niaks-logo-nav-200.png") center/contain no-repeat;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform 0.2s ease, opacity 0.3s;
  filter: drop-shadow(0 0 6px rgba(196,152,48,0.45));
  will-change: transform, left, top;
  display: none;
}
#cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 46px; height: 46px;
  border: 1px solid rgba(196,152,48,0.30);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.3s;
  will-change: left, top;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  #cursor, #cursor-ring { display: block; }
}

/* ── Scrollbar dorée (premium) ── */
html { scrollbar-width: thin; scrollbar-color: rgba(196,152,48,0.5) #04080f; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #04080f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--g2), var(--g4));
  border-radius: 4px;
  border: 1px solid rgba(2,8,16,0.6);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--g1), var(--g3)); }

/* ── Feedback tactile mobile : onde dorée au toucher ── */
.tap-ripple {
  position: fixed; z-index: 9997; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 1px solid rgba(237,208,96,0.85);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(196,152,48,0.5);
  animation: tapRipple 0.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes tapRipple {
  from { transform: scale(0.35); opacity: 0.95; }
  to   { transform: scale(3.4);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tap-ripple { display: none; }
}

/* ══════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════ */
.cinzel    { font-family: 'Cinzel', serif; }
.cormorant { font-family: 'Cormorant Garamond', serif; }

.gold {
  background: linear-gradient(160deg, var(--g1) 0%, var(--g2) 18%, var(--g3) 42%, var(--g4) 65%, var(--g3) 82%, var(--g2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(196,152,48,0.55));
}
/* Reflet lent qui glisse sur l'or — référencée par .hero-tech (index.html)
   et .s-title .gold ci-dessous, mais jamais définie : les deux
   `animation: goldShine …` ne faisaient donc rien. Un nom d'animation
   invalide n'est pas une erreur CSS, juste un no-op silencieux. */
@keyframes goldShine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
@keyframes goldShine {
  0%,100% { background-position:0% center; }
  50%     { background-position:100% center; }
}

/* ══════════════════════════════════════
   CANVAS BACKGROUND
══════════════════════════════════════ */
#cosmos { position:fixed; inset:0; z-index:0; pointer-events:none; will-change:transform; }

/* ══════════════════════════════════════
   LOADER
══════════════════════════════════════ */
#loader {
  position: fixed; inset: 0;
  background: #000;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 24px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#loader.gone { opacity:0; visibility:hidden; }

.loader-emblem {
  width: 56px; height: 56px;
}
/* Seul l'anneau tourne — la marque (.loader-mark, triangle + N) reste
   toujours parfaitement droite. Avant : le SVG entier tournait, donc à
   l'instant où le chargement se termine (un moment forcément aléatoire),
   la marque pouvait apparaître penchée, voire illisible. */
.loader-ring {
  transform-origin: 50px 50px;
  animation: loaderSpin 2s linear infinite;
}
@keyframes loaderSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loader-text {
  font-family: 'Cinzel', serif;
  font-weight: 300; font-size: 11px;
  letter-spacing: 10px; text-indent: 10px;
  color: rgba(196,152,48,0.5);
  animation: loaderPulse 1.5s ease infinite;
}
@keyframes loaderPulse {
  0%,100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.loader-bar {
  width: 200px; height: 1px;
  background: rgba(196,152,48,0.15);
  position: relative; overflow: hidden;
}
.loader-bar::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--g3), transparent);
  animation: loaderSlide 1.5s ease infinite;
}
@keyframes loaderSlide {
  from { left: -100%; }
  to   { left: 100%; }
}

/* ══════════════════════════════════════
   PROGRESSION DE SCROLL
   Un fil de 2px, discret, au-dessus de la nav. scaleX plutôt que width :
   aucun recalcul de layout à chaque tick de scroll (voir shell.js).
══════════════════════════════════════ */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 101; pointer-events: none;
}
#scroll-progress-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  transform: scaleX(var(--sp, 0)); transform-origin: left;
  will-change: transform;
}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: 76px;
  padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.5s ease;
}
nav.scrolled {
  background: rgba(2,8,16,0.96);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(196,152,48,0.12);
  height: 66px;
}

.nav-logo { display:flex; align-items:center; gap:14px; text-decoration:none; }

.nav-emblem-wrap { position: relative; }
.nav-emblem { width:42px; height:42px; }

.nav-emblem-ring {
  position:absolute; inset:-4px;
  border: 1px solid transparent;
  border-top-color: rgba(196,152,48,0.6);
  border-radius: 50%;
  transition: transform 0.8s ease;
}
.nav-logo:hover .nav-emblem-ring { transform: rotate(360deg); }

.nav-wordmark { display:flex; align-items:baseline; gap:7px; }
.nav-n { font-family:'Cinzel',serif; font-weight:300; font-size:17px; letter-spacing:5px; color:var(--white); }
.nav-t { font-family:'Cinzel',serif; font-weight:600; font-size:17px; letter-spacing:5px; }

.nav-center {
  display: flex; gap:26px; list-style:none;
  position: absolute; left:50%; transform:translateX(-50%);
}
.nav-center a {
  font-family:'Cinzel',serif; font-weight:300;
  font-size:9.5px; letter-spacing:5px; text-indent:5px;
  color:rgba(220,228,240,0.42);
  text-decoration:none; text-transform:uppercase;
  transition: color 0.3s;
  position:relative;
}
.nav-center a::after {
  content:''; position:absolute; bottom:-5px; left:0; right:0; height:1px;
  background: var(--g3); transform:scaleX(0); transform-origin:center;
  transition: transform 0.35s ease;
}
.nav-center a:hover { color: rgba(237,208,96,0.85); }
.nav-center a:hover::after { transform:scaleX(1); }
/* Page courante */
.nav-center a[aria-current="page"] { color: rgba(237,208,96,0.9); }
.nav-center a[aria-current="page"]::after { transform:scaleX(1); }

.nav-right { display:flex; align-items:center; gap:20px; }

.nav-btn {
  font-family:'Cinzel',serif; font-weight:300; font-size:9px;
  letter-spacing:4px; text-indent:4px;
  color:var(--g3);
  border:1px solid rgba(196,152,48,0.35);
  padding:10px 24px;
  text-decoration:none; text-transform:uppercase;
  transition:all 0.35s ease; position:relative; overflow:hidden;
}
.nav-btn::before {
  content:''; position:absolute; inset:0;
  background:rgba(196,152,48,0.06);
  transform:translateX(-100%);
  transition:transform 0.35s ease;
}
.nav-btn:hover::before { transform:translateX(0); }
.nav-btn:hover { border-color:var(--g2); color:var(--g2); }

.hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:0;
  min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
}
.hamburger span { width:22px; height:1px; background:var(--g3); transition:all 0.3s; }

/* 6 liens dans la nav — bascule hamburger avant collision avec le logo */
@media (max-width:1200px) {
  .nav-center { display:none; }
  .hamburger { display:flex; }
}

/* ══════════════════════════════════════
   MOBILE MENU
══════════════════════════════════════ */
#mob-menu {
  position:fixed; inset:0; z-index:99;
  background:rgba(2,8,16,0.98);
  backdrop-filter:blur(30px);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:36px;
  transform:translateY(-100%);
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
  overflow-y:auto; padding:80px 20px;
}
#mob-menu.open { transform:translateY(0); }
#mob-menu a {
  font-family:'Cinzel',serif; font-weight:300; font-size:20px;
  letter-spacing:8px; color:rgba(220,228,240,0.55);
  text-decoration:none; text-transform:uppercase;
  transition:color 0.3s;
}
#mob-menu a:hover { color:var(--g2); }
#mob-menu a[aria-current="page"] { color:var(--g2); }
.mob-close {
  position:absolute; top:28px; right:32px;
  font-size:24px; color:rgba(196,152,48,0.4);
  cursor:pointer; font-weight:200;
  transition:color 0.3s;
  background:none; border:none; padding:10px;
  line-height:1; min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
}
.mob-close:hover { color:var(--g2); }

/* ══════════════════════════════════════
   BOUTONS (réutilisés sur tout le site)
══════════════════════════════════════ */
.btn-primary {
  font-family:'Cinzel',serif; font-weight:400; font-size:11px;
  letter-spacing:4px; text-indent:4px; text-transform:uppercase;
  color:var(--dark);
  background:linear-gradient(120deg, var(--g2), var(--g3) 55%, var(--g2));
  background-size:200% auto;
  padding:19px 50px;
  text-decoration:none; position:relative; overflow:hidden;
  box-shadow:0 10px 40px rgba(196,152,48,0.18);
  transition:background-position .6s ease, transform .4s ease, box-shadow .4s ease;
  display:inline-block;
}
.btn-primary:hover { background-position:right center; transform:translateY(-3px); box-shadow:0 18px 56px rgba(196,152,48,0.34); filter:brightness(1.04); }
.btn-primary::after {
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform:skewX(-20deg); transition:left .8s ease;
}
.btn-primary:hover::after { left:170%; }

.btn-ghost {
  font-family:'Cinzel',serif; font-weight:300; font-size:10.5px;
  letter-spacing:4px; text-transform:uppercase;
  color:rgba(220,228,240,0.5);
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  padding:8px 4px; position:relative;
  transition:color .35s ease;
  min-height:44px;
}
.btn-ghost::before {
  /* Lueur douce derrière le texte — .btn-ghost n'avait jusqu'ici aucun
     "glow", seulement un soulignement ; .btn-primary a déjà le sien
     (box-shadow + balayage lumineux ::after). */
  content:''; position:absolute; inset:-10px -16px; z-index:-1;
  border-radius:8px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(196,152,48,0.16), rgba(196,152,48,0) 75%);
  opacity:0; transition:opacity .4s ease;
}
.btn-ghost::after {
  content:''; position:absolute; left:4px; bottom:1px; width:0; height:1px;
  background:linear-gradient(90deg, var(--g2), var(--g3)); transition:width .4s ease;
}
.btn-ghost:hover { color:var(--g2); }
.btn-ghost:hover::before { opacity:1; }
.btn-ghost:hover::after { width:calc(100% - 8px); }
.btn-ghost .arr { transition:transform .35s ease; }
.btn-ghost:hover .arr { transform:translateX(4px); }

.btn-gold {
  font-family:'Cinzel',serif; font-weight:300; font-size:9.5px;
  letter-spacing:5px; text-indent:5px;
  color:var(--dark); background:linear-gradient(120deg,var(--g2),var(--g3),var(--g2));
  background-size:200% auto;
  padding:17px 44px;
  text-decoration:none; text-transform:uppercase;
  transition:all 0.4s ease; position:relative; overflow:hidden;
  display:inline-block; border:none; cursor:pointer;
}
.btn-gold:hover { background-position:right; transform:translateY(-3px); box-shadow:0 14px 44px rgba(196,152,48,0.28); }
.btn-gold::after {
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:skewX(-20deg); transition:left .8s ease; pointer-events:none;
}
.btn-gold:hover::after { left:170%; }
.btn-gold:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-gold:disabled::after { display:none; }

.btn-outline {
  font-family:'Cinzel',serif; font-weight:300; font-size:9.5px;
  letter-spacing:5px; text-indent:5px;
  color:rgba(220,228,240,0.55);
  border:1px solid rgba(220,228,240,0.12);
  padding:16px 44px;
  text-decoration:none; text-transform:uppercase;
  transition:all 0.35s ease;
  display:inline-block; background:none; cursor:pointer;
}
.btn-outline:hover { border-color:rgba(196,152,48,0.4); color:var(--g2); }
.btn-outline:disabled { opacity:0.4; cursor:not-allowed; border-color:rgba(220,228,240,0.12) !important; color:rgba(220,228,240,0.55) !important; }

/* ══════════════════════════════════════
   SECTION COMMONS (utilisés par toutes les pages de contenu)
══════════════════════════════════════ */
section { position:relative; z-index:1; }
main { position:relative; z-index:1; }

.s-label {
  font-family:'Cinzel',serif; font-weight:300; font-size:8.5px;
  letter-spacing:7px; text-indent:7px; text-transform:uppercase;
  color:var(--dim); margin-bottom:18px; display:block;
}
.s-title {
  font-family:'Cinzel',serif; font-weight:500;
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing:5px; margin-bottom:18px; line-height:1.1;
}
.s-title .gold {
  background-size:220% auto;
  animation: goldShine 7s ease-in-out infinite;
}
.s-desc {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:200;
  font-size:19px; letter-spacing:1.5px;
  color:rgba(175,192,215,0.42); line-height:1.75;
}
.s-rule {
  width:48px; height:0.5px;
  background:linear-gradient(90deg,var(--g3),transparent);
  margin:22px auto 0;
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.16,.84,.3,1) .15s;
}
.r.v .s-rule { transform:scaleX(1); }

/* reveal — entrée cinématique au scroll */
.r {
  opacity:0; transform:translateY(46px) scale(0.985);
  transition:opacity 1.05s cubic-bezier(.16,.84,.3,1),
             transform 1.05s cubic-bezier(.16,.84,.3,1);
}
.r.v { opacity:1; transform:translateY(0) scale(1); }
.d1{transition-delay:0.10s;} .d2{transition-delay:0.20s;}
.d3{transition-delay:0.30s;} .d4{transition-delay:0.40s;}
.d5{transition-delay:0.50s;} .d6{transition-delay:0.60s;}

/* ══════════════════════════════════════
   SYSTÈME D'ANIMATION PARTAGÉ — 4 familles
   Étend .r/.v (observer unique dans shell.js, threshold 0.12, .v jamais
   retiré) plutôt que de le remplacer : même mécanique, plusieurs
   vocabulaires visuels selon le cas. Le JS observe désormais aussi ces
   classes. prefers-reduced-motion neutralise tout — voir plus bas.
══════════════════════════════════════ */

/* A — REVEAL : variantes au-delà du fade+translate de .r
   Important : le clip-path ne se pose JAMAIS sur l'élément observé par
   l'IntersectionObserver. Vérifié empiriquement : ce moteur calcule
   intersectionRatio sur l'aire déjà découpée par clip-path, pas sur la
   boîte de mise en page — un élément caché à 99%+ ne franchit donc
   jamais le threshold, quelle que soit sa position réelle à l'écran.
   .r-mask/.r-mask-h ne sont que des conteneurs (observés normalement,
   jamais rognés eux-mêmes) ; le clip-path vit sur .r-mask-inner, révélé
   via le même .v que .r-line-inner plus haut. Structure requise :
   <div class="r-mask"><div class="r-mask-inner"><img>…</div></div> */
.r-mask-inner { clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.16,.84,.3,1); }
.r-mask.v .r-mask-inner { clip-path:inset(0 0% 0 0); }
.r-mask-h-inner { clip-path:inset(0 100% 0 0); transition:clip-path 1.15s cubic-bezier(.16,.84,.3,1); }
.r-mask-h.v .r-mask-h-inner { clip-path:inset(0 0% 0 0); }

.r-scale { opacity:0; transform:scale(1.06); transition:opacity 1.1s cubic-bezier(.16,.84,.3,1), transform 1.3s cubic-bezier(.16,.84,.3,1); }
.r-scale.v { opacity:1; transform:scale(1); }

.r-blur { opacity:0; filter:blur(16px); transition:opacity 1s ease, filter 1.1s ease; }
.r-blur.v { opacity:1; filter:blur(0); }

/* Révélation typographique ligne par ligne — structure :
   <span class="r-line"><span class="r-line-inner">texte</span></span>
   le .r-line doit être à l'intérieur d'un ancêtre .r observé (ou porter
   .r lui-même) ; l'un ou l'autre déclenche la même règle .v ci-dessous. */
.r-line { display:block; overflow:hidden; }
.r-line-inner { display:block; transform:translateY(105%); transition:transform .95s cubic-bezier(.19,1,.22,1); }
.r.v .r-line-inner, .r-line.v .r-line-inner { transform:translateY(0); }

/* Révélation mot par mot — chaque mot dans <span class="r-word-inner">
   à l'intérieur d'un parent .r-word (qui doit aussi observer .r). Le
   décalage vient de nth-child, pas d'un compte à la main. */
.r-word-inner { display:inline-block; opacity:0; transform:translateY(.4em); transition:opacity .6s ease, transform .6s cubic-bezier(.19,1,.22,1); }
.r-word.v .r-word-inner, .r.v .r-word-inner { opacity:1; transform:translateY(0); }
.r-word-inner:nth-child(1){transition-delay:.02s;} .r-word-inner:nth-child(2){transition-delay:.08s;}
.r-word-inner:nth-child(3){transition-delay:.14s;} .r-word-inner:nth-child(4){transition-delay:.2s;}
.r-word-inner:nth-child(5){transition-delay:.26s;} .r-word-inner:nth-child(6){transition-delay:.32s;}
.r-word-inner:nth-child(7){transition-delay:.38s;} .r-word-inner:nth-child(8){transition-delay:.44s;}

/* B — PARALLAX : très subtil, piloté par --py (0→1 pendant la traversée
   du viewport), posé par shell.js sur chaque [data-parallax]. Jamais
   plus de ~26px de déplacement : une respiration, pas un effet WordPress. */
[data-parallax] { will-change:transform; }
[data-parallax="back"]  { transform:translateY(calc((var(--py,.5) - .5) * -26px)); }
[data-parallax="main"]  { transform:translateY(calc((var(--py,.5) - .5) * -12px)); }
[data-parallax="front"] { transform:translateY(calc((var(--py,.5) - .5) * 16px)); }
/* "main-grow" : le déplacement de "main" + une montée en échelle qui ne
   lit --py que comme une enveloppe (0 aux bords du viewport, pic au
   centre) — réservé aux deux seules images pensées comme des ouvertures
   de magazine (MBAY, Sama Table) : jamais permanent, seulement quand le
   scroll les amène au centre de l'écran. */
/* !important nécessaire ici : les deux éléments qui utilisent "main-grow"
   portent aussi .r (révélation d'entrée), et .r.v { transform:... } a une
   spécificité plus élevée (deux classes) que [data-parallax="main-grow"]
   (un attribut) — sans !important, la valeur de révélation écrase
   silencieusement le scale scroll-lié en continu. L'opacité et le
   clip-path de la révélation restent intacts (autre propriété). */
[data-parallax="main-grow"] {
  transform:
    translateY(calc((var(--py,.5) - .5) * -12px))
    scale(calc(1 + (1 - abs(var(--py,.5) - .5) * 2) * 0.18))
    !important;
}
/* "veil" : même --py, mais lu comme une enveloppe (0 aux bords du
   viewport, 1 au centre) plutôt qu'un simple décalage — utilisé pour les
   transitions de chapitre entre sections (voir .chapter-turn). */
[data-parallax="veil"] {
  opacity: calc(1 - abs(var(--py, .5) - .5) * 2);
  transform: translateY(calc((var(--py,.5) - .5) * -20px)) scale(calc(1 + var(--py,.5) * 0.05));
}

/* C — STICKY STORYTELLING : le côté fixe reste épinglé en CSS pur
   (position:sticky, aucun JS requis pour l'épinglage lui-même) tandis
   que les étapes défilent normalement à côté. shell.js observe juste
   quelle étape est la plus visible pour activer son numéro. */
.pin-story { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,80px); align-items:start; }
.pin-story-fixed { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; }
.pin-story-track { display:flex; flex-direction:column; }
.pin-story-step { min-height:92vh; display:flex; flex-direction:column; justify-content:center; opacity:.32; transition:opacity .6s ease; }
.pin-story-step.is-active { opacity:1; }
.pin-num {
  font-family:'Cinzel',serif; font-weight:600; font-size:13px; letter-spacing:.22em;
  color:rgba(196,152,48,.5); opacity:.5; transform:translateY(3px);
  transition:color .4s ease, opacity .5s ease, transform .5s cubic-bezier(.16,.84,.3,1);
}
.pin-num.is-active { color:var(--g2); opacity:1; transform:translateY(0); }

/* Numérotation partagée — fil narratif entre les réalisations (jamais
   décorative seule : toujours accolée au nom du projet, voir le brief). */
.case-num { color:var(--g2); font-weight:600; }

/* D — IMAGES : reprend .r-mask/.r-mask-h pour l'entrée ; ceci gère le
   hover (léger déplacement, jamais un zoom brutal) et le débord d'une
   image dans la section suivante (marge négative posée au cas par cas
   avec .img-bleed, ceci ne fixe que le ratio/overflow). */
.img-live { overflow:hidden; }
.img-live img { transition:transform 1.2s cubic-bezier(.16,.84,.3,1); }
.img-live:hover img { transform:scale(1.045); }
.img-bleed { position:relative; z-index:2; }

/* Micro-interaction partagée pour les liens texte — trait qui se
   dessine au survol, jamais un simple underline statique. */
.link-draw { position:relative; display:inline-block; }
.link-draw::after { content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--g3); transition:right .4s cubic-bezier(.16,.84,.3,1); }
.link-draw:hover::after { right:0; }

/* Décorations réutilisables (halo, motif réseau, diviseur de section) */
.s-deco { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.s-halo {
  position:absolute; top:clamp(90px,15vh,170px); left:50%;
  width:min(72vw,640px); height:min(48vw,420px);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(196,152,48,0.085), rgba(196,152,48,0) 70%);
  filter:blur(30px);
  animation:visionHalo 16s ease-in-out infinite;
}
@keyframes visionHalo {
  0%,100% { opacity:0.5; transform:translate(-50%,-50%) scale(1); }
  50%     { opacity:0.85; transform:translate(-50%,-50%) scale(1.07); }
}
.s-net { position:absolute; width:clamp(200px,26vw,360px); height:auto; opacity:0.4; }
.s-net.tr { top:-26px; right:-44px; }
.s-net.tl { top:-26px; left:-44px; transform:scaleX(-1); }
.vn-node { animation:vnTwinkle 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.vn-node:nth-of-type(2){ animation-delay:.9s; }
.vn-node:nth-of-type(3){ animation-delay:1.8s; }
.vn-node:nth-of-type(4){ animation-delay:2.6s; }
.vn-node:nth-of-type(5){ animation-delay:3.4s; }
@keyframes vnTwinkle { 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.sec-divider {
  display:flex; align-items:center; justify-content:center; gap:22px;
  max-width:520px; margin:0 auto 96px;
  position:relative; z-index:1;
}
.sec-divider span {
  height:1px; flex:1;
  background:linear-gradient(90deg,transparent,rgba(196,152,48,0.32));
}
.sec-divider span:last-child {
  background:linear-gradient(90deg,rgba(196,152,48,0.32),transparent);
}
.sec-divider svg { width:30px; height:30px; flex-shrink:0; opacity:0.85; }
.sec-divider .sd-spin { transform-box:fill-box; transform-origin:center; animation:sdSpin 28s linear infinite; }
@keyframes sdSpin { to { transform:rotate(360deg); } }

/* ── Bordure dorée animée au survol des cartes (anneau conique rotatif) ── */
@property --cardAngle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card-glow {
  position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--cardAngle, 0deg),
    rgba(196,152,48,0) 0deg,
    rgba(237,208,96,0.85) 55deg,
    rgba(255,249,200,0.95) 90deg,
    rgba(237,208,96,0.85) 125deg,
    rgba(196,152,48,0) 185deg,
    rgba(196,152,48,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:0; transition:opacity .45s ease;
  pointer-events:none; z-index:3;
}
.srv:hover .card-glow,
.tarif-card:hover .card-glow,
.real-card:hover .card-glow,
.offer-card:hover .card-glow {
  opacity:1;
  animation: cardBorderSpin 2.8s linear infinite;
}
@keyframes cardBorderSpin { to { --cardAngle:360deg; } }

/* ══════════════════════════════════════
   EN-TÊTE DE PAGE (partagé par /services, /realisations, /devis,
   /contact, /a-propos — un seul système d'en-tête, pas un par page)
══════════════════════════════════════ */
.page-hero {
  padding: 168px 64px 70px;
  text-align: center;
  position: relative; z-index: 1;
}
.page-back {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Cinzel',serif; font-weight:300; font-size:8.5px;
  letter-spacing:4px; text-transform:uppercase;
  color:rgba(220,228,240,0.4); text-decoration:none;
  margin-bottom:28px; padding:8px 2px;
  transition:color .35s ease;
}
.page-back:hover { color:var(--g2); }
.page-back .arr { transition:transform .35s ease; }
.page-back:hover .arr { transform:translateX(-4px); }

@media (max-width:1024px) { .page-hero { padding: 130px 32px 56px; } }
@media (max-width:600px)  { .page-hero { padding: 120px 20px 48px; } }

/* ══════════════════════════════════════
   CHAMPS DE FORMULAIRE (partagés — /contact/, /devis/, suivi de commande…)
══════════════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:10px; }
.form-group.full { grid-column:1/-1; }
.form-label {
  font-family:'Cinzel',serif; font-weight:300; font-size:7.5px;
  letter-spacing:5px; text-transform:uppercase;
  color:rgba(196,152,48,0.4);
  transition:color 0.3s ease;
}
.form-group:focus-within .form-label { color:rgba(196,152,48,0.8); }

.form-input, .form-select, .form-textarea {
  width:100%;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(196,152,48,0.12);
  color:rgba(225,232,242,0.78);
  font-family:'Montserrat',sans-serif; font-weight:300; font-size:16px;
  letter-spacing:0.5px;
  padding:12px 18px;
  outline:none;
  transition:all 0.3s ease;
  -webkit-appearance:none;
}
.form-input::placeholder, .form-textarea::placeholder { color:rgba(175,192,215,0.2); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:rgba(196,152,48,0.4);
  background:rgba(196,152,48,0.03);
  box-shadow:0 0 0 1px rgba(196,152,48,0.1);
}
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"] {
  border-color:rgba(210,130,90,0.45);
  box-shadow:0 0 0 1px rgba(210,130,90,0.12);
}
.form-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(196,152,48,0.4)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
}
.form-select option { background:#050E1C; color:rgba(225,232,242,0.78); }
.form-textarea { resize:vertical; min-height:130px; }

/* ══════════════════════════════════════
   SUIVI DE COMMANDE (widget partagé — /paiement/succes/ et /paiement/annule/)
══════════════════════════════════════ */
.lookup-row { display: flex; gap: 10px; }
.lookup-row .lookup-input { flex: 1; }
.lookup-btn { white-space: nowrap; }
.lookup-result { margin-top: 18px; }
.lookup-loading, .lookup-error {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 200;
  font-size: 14px; color: rgba(175,192,215,0.5); text-align: center; padding: 12px 0;
}
.lookup-error { color: rgba(210,150,110,0.85); }
.lookup-card {
  border: 1px solid rgba(196,152,48,0.15); background: rgba(196,152,48,0.03);
  padding: 6px 20px;
}
.lookup-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(196,152,48,0.08);
  font-family: 'Montserrat', sans-serif; font-size: 13.5px;
}
.lookup-card-row:last-child { border-bottom: none; }
.lookup-card-row span { color: rgba(175,192,215,0.5); }
.lookup-card-row b { color: rgba(225,232,242,0.88); font-weight: 400; }

@media (max-width: 600px) {
  .lookup-row { flex-direction: column; }
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  position:relative; z-index:1;
  padding:42px 64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(196,152,48,0.28) 22%, rgba(196,152,48,0.28) 78%, transparent);
}
.foot-ornament {
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-50%);
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, var(--dark) 42%, rgba(2,8,16,0) 72%);
  z-index:2; pointer-events:none;
}
.foot-ornament svg { width:26px; height:26px; opacity:0.65; }
.foot-logo { display:flex; align-items:baseline; gap:8px; }
.foot-n { font-family:'Cinzel',serif; font-weight:300; font-size:13px; letter-spacing:5px; color:rgba(220,228,240,0.45); }
.foot-t { font-family:'Cinzel',serif; font-weight:500; font-size:13px; letter-spacing:5px; }

.foot-links { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.foot-links a {
  position:relative;
  font-family:'Cinzel',serif; font-weight:300; font-size:8px;
  letter-spacing:4px; color:rgba(196,152,48,0.32);
  text-decoration:none; text-transform:uppercase;
  transition:color 0.3s;
}
.foot-links a::after {
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:linear-gradient(90deg, var(--g2), var(--g3));
  transform:scaleX(0); transform-origin:center;
  transition:transform 0.35s ease;
}
.foot-links a:hover { color:var(--g2); }
.foot-links a:hover::after { transform:scaleX(1); }
.foot-links a[aria-current="page"] { color: var(--g2); }

.foot-copy {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:200;
  font-size:13px; letter-spacing:2px; color:rgba(196,152,48,0.75);
}

/* ══════════════════════════════════════
   FOCUS CLAVIER (visible au clavier uniquement)
══════════════════════════════════════ */
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, .hamburger:focus {
  outline:none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, .hamburger:focus-visible {
  outline:2px solid rgba(196,152,48,0.6);
  outline-offset:3px;
}

/* ══════════════════════════════════════
   RESPONSIVE (éléments du shell)
══════════════════════════════════════ */
@media(max-width:1024px){
  nav { padding:0 32px; }
  .nav-center { display:none; }
  .hamburger { display:flex; }
  footer { padding:40px 28px; flex-direction:column; gap:24px; text-align:center; }
  .foot-links { justify-content:center; gap:16px 22px; }
}
@media(max-width:600px){
  nav { padding-left:20px; padding-right:20px; }
  .nav-btn { display:none; }
  .hamburger { padding:16px 11px; margin-right:-11px; }
  .btn-gold { font-size:9px; letter-spacing:2px; text-indent:2px; padding:16px 26px; white-space:nowrap; }
}

/* ══════════════════════════════════════
   TÉMOIGNAGES
══════════════════════════════════════ */
.testi-section { padding: 20px 64px 100px; text-align: center; position: relative; }
.testi-label { display: block; text-align: center; }
.testi-heading { text-align: center; }
.testi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px; max-width: 1160px; margin: 0 auto; text-align: left;
}
.testi-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(196,152,48,0.14);
  background: linear-gradient(145deg, rgba(8,18,34,0.9), rgba(4,10,20,0.95));
  padding: 44px 40px 36px; display: flex; flex-direction: column; gap: 24px;
  margin: 0;
}
.testi-card::before {
  content: '\201C';
  position: absolute; top: -18px; left: 28px;
  font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 300;
  font-size: 110px; line-height: 1; color: rgba(196,152,48,0.14);
  pointer-events: none;
}
.testi-quote {
  position: relative; z-index: 1;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 20px; line-height: 1.6; letter-spacing: 0.2px; color: rgba(224,232,244,0.88);
  margin: 0;
}
.testi-quote::before, .testi-quote::after { content: none; }
.testi-author { display: flex; align-items: center; gap: 14px; margin: 0; padding-top: 20px; border-top: 1px solid rgba(196,152,48,0.14); }
.testi-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testi-photo--empty {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(196,152,48,0.1); border: 1px solid rgba(196,152,48,0.3);
  color: var(--g2); font-family: 'Cinzel', serif; font-size: 17px;
}
.testi-author-text { display: flex; flex-direction: column; gap: 3px; }
.testi-name { font-family: 'Cinzel', serif; font-weight: 500; font-size: 13.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(232,238,247,0.92); }
.testi-role { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: rgba(196,152,48,0.65); }
.testi-stars { color: var(--g2); font-size: 14px; letter-spacing: 2px; }
/* Un seul témoignage : plutôt qu'une carte bordée (qui lit comme "une
   grille de reviews qui n'a qu'un seul avis"), la variante --single
   retire le cadre et traite la citation comme une véritable citation
   éditoriale, centrée, respirante — voir generateTestimonialsSection. */
.testi-grid--single { max-width: 720px; }
.testi-grid--single .testi-card {
  border: none; background: none; padding: 0; gap: 30px; text-align: center;
}
.testi-grid--single .testi-card::before {
  position: static; display: block; margin: 0 auto; font-size: 60px;
  color: rgba(196,152,48,0.4);
}
.testi-grid--single .testi-quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.3vw, 27px); line-height: 1.55; color: rgba(228,236,247,0.92);
}
.testi-grid--single .testi-author {
  flex-direction: column; gap: 12px; border-top: none; padding-top: 0;
}
.testi-grid--single .testi-author-text { align-items: center; }
.testi-grid--single .testi-photo,
.testi-grid--single .testi-photo--empty { width: 56px; height: 56px; font-size: 19px; }
/* Mobile : les 64px de marge latérale ne laisseraient que ~232px de
   texte sur un écran de 360px. Même réduction que les autres blocs du
   site (cf. footer/nav dans les media queries plus haut). */
@media (max-width: 600px) {
  .testi-section, .faq-section { padding: 20px 20px 72px; }
  .testi-card { padding: 40px 24px 28px; }
  .testi-card::before { font-size: 84px; left: 18px; top: -12px; }
  .testi-grid--single .testi-card { padding: 0; }
  .testi-grid--single .testi-card::before { font-size: 48px; }
  .testi-quote { font-size: 17.5px; }
}

/* ══════════════════════════════════════
   FAQ (accordéon)
══════════════════════════════════════ */
.faq-section { padding: 20px 64px 100px; text-align: center; position: relative; }
.faq-list { max-width: 780px; margin: 0 auto; text-align: left; }
.faq-item { border-bottom: 1px solid rgba(196,152,48,0.12); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Cinzel', serif; font-weight: 400; font-size: 14px; letter-spacing: 0.5px;
  color: rgba(228,235,246,0.88);
}
.faq-question:hover, .faq-question:focus-visible { color: var(--g2); }
.faq-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(196,152,48,0.35); color: var(--g2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; transition: transform 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 4px 22px; }
.faq-answer p {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 200;
  font-size: 15.5px; line-height: 1.7; color: rgba(185,200,220,0.68); margin: 0;
}

/* ══════════════════════════════════════
   SIGNAUX DE CONFIANCE (près des CTA)
══════════════════════════════════════ */
.trust-signals {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 22px; margin-top: 16px;
}
.trust-item {
  position: relative;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 200;
  font-size: 13.5px; letter-spacing: 0.3px; color: rgba(180,196,218,0.55);
  padding-left: 16px;
}
.trust-item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(196,152,48,0.6);
}

/* ══════════════════════════════════════
   WHATSAPP FLOTTANT (persistant, toutes pages)
══════════════════════════════════════ */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(12,24,44,0.98), rgba(6,14,28,1));
  border: 1px solid rgba(196,152,48,0.4);
  color: var(--g2);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float:hover, .wa-float:focus-visible {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--g2);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 0 4px rgba(196,152,48,0.12);
}
@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 23px; height: 23px; }
}

/* ══════════════════════════════════════
   MOUVEMENT RÉDUIT (éléments du shell)
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .r, .r.v,
  .r-mask-inner, .r-mask-h-inner,
  .r-scale, .r-scale.v, .r-blur, .r-blur.v,
  .r-line-inner, .r-word-inner { opacity:1 !important; clip-path:none !important; filter:none !important; transform:none !important; transition:none !important; }
  [data-parallax] { transform:none !important; }
  .pin-story-fixed { position:static !important; height:auto !important; }
  .pin-story-step { opacity:1 !important; transition:none !important; min-height:0 !important; padding:32px 0; }
  .pin-num { opacity:1 !important; transform:none !important; transition:none !important; }
  .img-live img { transition:none !important; }
  .img-live:hover img { transform:none !important; }
  .link-draw::after { transition:none !important; }
  .s-halo,
  .vn-node,
  .sd-spin,
  .s-title .gold,
  .card-glow,
  .loader-ring,
  .loader-text,
  .loader-bar::after { animation:none !important; }
  .s-rule { transform:none !important; transition:none !important; }
  .d1, .d2, .d3, .d4, .d5, .d6 { transition-delay:0s !important; }
  .wa-float { transition:none !important; }
  .wa-float:hover, .wa-float:focus-visible { transform:none; }
  .faq-icon { transition:none !important; }
}