/* ============================================================
   WERA — Design System v4
   Palette : crème + brun + gris chaud + or rare (logo)
   Typo    : Cinzel (logo uniquement) · Manrope (UI)
   ============================================================ */

/* -------- TOKENS -------- */
:root{
  /* Surfaces */
  --cream:        #f5efe3;
  --cream-2:      #ebe0cc;
  --cream-3:      #fbf6ec;
  --cream-4:      #f0e8d6;
  --paper:        #fffaf0;

  /* Encres */
  --ink:          #2a1f15;
  --ink-2:        #3d2d20;
  --ink-3:        #1a1410;
  --ink-soft:     #5a4e3f; /* WCAG AA — 5.4:1 sur #f5efe3 (avant : #7d6f5d donnait 3.84:1) */
  --ink-mute:     #a8a09a;

  /* Lignes & grilles */
  --line:         rgba(42,31,21,.10);
  --line-2:       rgba(42,31,21,.16);
  --line-soft:    rgba(42,31,21,.05);
  --line-on-dark: rgba(245,239,227,.10);

  /* Or WERA — rare, signature */
  --gold:         #c79a49;
  --gold-2:       #f3cf88;
  --gold-3:       #8f692f;
  --gold-deep:    #8a632b;

  /* Sémantique */
  --bg:           var(--cream);
  --text:         var(--ink);
  --text-on-dark: var(--cream);
  --muted:        var(--ink-soft);
  --accent:       var(--ink);

  /* Élévations */
  --shadow-xs:    0 1px 2px rgba(42,31,21,.04);
  --shadow-sm:    0 2px 6px rgba(42,31,21,.05), 0 8px 24px rgba(42,31,21,.04);
  --shadow-md:    0 4px 12px rgba(42,31,21,.06), 0 18px 48px rgba(42,31,21,.08);
  --shadow-lg:    0 12px 32px rgba(42,31,21,.10), 0 32px 80px rgba(42,31,21,.12);
  --shadow-dark:  0 24px 64px rgba(0,0,0,.40);

  /* Rayons */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Timings */
  --ease:         cubic-bezier(.2,.7,.2,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --t-fast:       .18s;
  --t:            .32s;
  --t-slow:       .6s;
}

/* -------- RESET -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.5;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:transparent}
ul{list-style:none}

/* -------- LAYOUT -------- */
.container{
  width:min(1320px,calc(100% - 40px));
  margin-inline:auto;
}
.container-sm{ width:min(960px,calc(100% - 40px));margin-inline:auto }
.container-xs{ width:min(720px,calc(100% - 40px));margin-inline:auto }

.section{
  padding:120px 0;
  position:relative;
}
.section-lg{ padding:160px 0 }
.section-sm{ padding:80px 0 }

.surface-cream{ background:var(--cream) }
.surface-cream-2{ background:var(--cream-2) }
.surface-cream-3{ background:var(--cream-3) }
.surface-paper{ background:var(--paper) }
.surface-dark{ background:var(--ink); color:var(--text-on-dark) }
.surface-dark .muted,
.surface-dark p,
.surface-dark .section-desc{ color:rgba(245,239,227,.72) }
.surface-dark a:not(.btn):not(.btn-ghost){ color:var(--cream) }

/* -------- TYPOGRAPHIE -------- */
h1,h2,h3,h4,h5,h6{
  font-family:"Manrope",sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  color:var(--ink);
}
.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4{ color:var(--cream) }

.display{
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-weight:500;
  letter-spacing:-0.02em;
}

.h-hero{
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-weight:500;
  font-size:clamp(48px,6.8vw,104px);
  line-height:.98;
  letter-spacing:-0.025em;
}
.h-section{
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-weight:500;
  font-size:clamp(36px,4.6vw,68px);
  line-height:1.02;
  letter-spacing:-0.02em;
}
.h-3{
  font-size:clamp(22px,2vw,28px);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.2;
}
.h-4{
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.005em;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}
.surface-dark .eyebrow{ color:rgba(245,239,227,.55) }
.surface-dark .eyebrow::before{ background:var(--gold-2) }

p{ color:var(--ink-soft); line-height:1.65 }
.lead{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55;
  color:var(--ink-soft);
}
.muted{ color:var(--ink-soft) }

.gold-text{
  background:linear-gradient(135deg,#fff5cf 0%,var(--gold-2) 35%,var(--gold) 70%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.serif-italic{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:500;
}

/* -------- BOUTONS -------- */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 26px;
  border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn{
  background:var(--ink);
  color:var(--cream);
  box-shadow:var(--shadow-sm);
}
.btn:hover{
  background:var(--ink-2);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-2);
}
.btn-ghost:hover{
  background:var(--ink);
  color:var(--cream);
  transform:translateY(-2px);
}
.surface-dark .btn{
  background:var(--cream);
  color:var(--ink);
}
.surface-dark .btn:hover{ background:#fff }
.surface-dark .btn-ghost{
  border-color:rgba(245,239,227,.30);
  color:var(--cream);
}
.surface-dark .btn-ghost:hover{
  background:var(--cream);
  color:var(--ink);
}
.btn-lg{ height:60px;padding:0 32px;font-size:15px }
.btn-sm{ height:42px;padding:0 18px;font-size:13px }
.btn-block{ width:100%;display:flex }
.btn .arrow,.btn-ghost .arrow{
  display:inline-block;
  transition:transform var(--t-fast) var(--ease);
}
.btn:hover .arrow,.btn-ghost:hover .arrow{ transform:translateX(4px) }

/* Bouton or — pour CTA primaire premium */
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  color:#1a1208;
  font-weight:700;
}
.btn-gold:hover{
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 35%,var(--gold-deep));
}

/* -------- HEADER & NAV -------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(245,239,227,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.site-header.scrolled{
  background:rgba(245,239,227,.92);
  border-color:var(--line-2);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;gap:24px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  cursor:pointer;
  transition:opacity var(--t-fast) var(--ease);
}
.brand:hover{ opacity:.85 }

/* Lockup PNG officiel (icône + WERA + STUDIO DIGITAL) — fond clair */
.brand-lockup{
  height:96px;width:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(143,105,47,.10));
  margin:-12px 0;
}
.brand-lockup.brand-lockup-sm{ height:64px;margin:-6px 0 }

/* Icône seule (PNG W) — fond clair */
.brand-icon{
  height:72px;width:72px;display:block;
  filter:drop-shadow(0 2px 6px rgba(143,105,47,.14));
}

/* Variante texte CSS pour fonds sombres (footer) */
.brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
}
.brand-mark svg{
  width:100%;height:100%;
  color:var(--gold-2);
  filter:drop-shadow(0 2px 6px rgba(143,105,47,.18));
}
.brand-mark .logo-main{
  stroke:url(#wgold);
  stroke-width:8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.brand-mark .logo-inner{ display:none }
.brand-text{
  font-family:"Cinzel",serif;
  font-weight:700;
  letter-spacing:.22em;
  font-size:17px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 50%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.brand-text small{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:9px;letter-spacing:.32em;
  color:var(--ink-soft);
  font-weight:600;
  margin-top:1px;
  -webkit-text-fill-color:var(--ink-soft);
}

@media (max-width:560px){
  .brand-lockup{ height:64px;margin:-4px 0 }
}

.nav-links{
  display:flex;align-items:center;gap:6px;
}
.nav-links a{
  position:relative;
  padding:8px 14px;
  font-size:14px;font-weight:500;
  color:var(--ink);
  border-radius:999px;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-links a:hover{ background:rgba(42,31,21,.06) }
.nav-links a.active{
  color:var(--ink);
  background:rgba(42,31,21,.07);
  font-weight:600;
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:50%;bottom:-2px;
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);
  transform:translateX(-50%);
}

.nav-actions{
  display:flex;align-items:center;gap:10px;
}
.nav-burger{
  display:none;
  width:42px;height:42px;
  border-radius:999px;
  background:transparent;
  border:1px solid var(--line-2);
  align-items:center;justify-content:center;
}
.nav-burger span{
  display:block;width:18px;height:1.5px;background:var(--ink);
  position:relative;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.nav-burger span::before,
.nav-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);
  transition:transform var(--t) var(--ease);
}
.nav-burger span::before{ top:-6px }
.nav-burger span::after{ top:6px }
.nav-burger.open span{ background:transparent }
.nav-burger.open span::before{ transform:translateY(6px) rotate(45deg) }
.nav-burger.open span::after{ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:980px){
  .nav-links,.nav-actions .nav-cta-text{ display:none }
  .nav-burger{ display:inline-flex }
  /* Empêche le scroll du body quand le menu est ouvert */
  body.nav-mobile-open{ overflow:hidden }
}

/* ============================================================
   MENU MOBILE — Drawer organique (slide depuis la droite)
   Activé par JS qui clone .nav-links vers body et applique
   les classes .wera-mobile-drawer + .open.
   ============================================================ */
.wera-mobile-backdrop{
  position:fixed; inset:0;
  background:rgba(42,31,21,.32);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  z-index:9998;
  opacity:0;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);
}
.wera-mobile-backdrop.open{ opacity:1 }
html.theme-blue .wera-mobile-backdrop{
  background:rgba(15,24,37,.40);
}

.wera-mobile-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(88vw, 360px);
  background:#f5efe3;
  background:linear-gradient(180deg, #fbf6ec 0%, #f5efe3 60%, #ebe0cc 100%);
  border-left:1px solid rgba(42,31,21,.10);
  border-top-left-radius:24px;
  border-bottom-left-radius:24px;
  box-shadow:-24px 0 60px rgba(42,31,21,.18), -8px 0 20px rgba(42,31,21,.08);
  z-index:9999;
  display:flex; flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.4,0,.2,1);
  font-family:"Manrope", sans-serif;
}
.wera-mobile-drawer.open{ transform:translateX(0) }

html.theme-blue .wera-mobile-drawer{
  background:linear-gradient(180deg, #fafbfc 0%, #f5f7fa 60%, #e8eef5 100%);
  border-left:1px solid rgba(40,60,90,.10);
  box-shadow:-24px 0 60px rgba(40,60,90,.20), -8px 0 20px rgba(40,60,90,.10);
}

/* En-tête du drawer */
.wera-mobile-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px;
  border-bottom:1px solid rgba(42,31,21,.08);
}
html.theme-blue .wera-mobile-head{ border-bottom-color:rgba(40,60,90,.08) }

.wera-mobile-brand{
  font-family:"Cormorant Garamond", serif;
  font-size:22px; font-weight:500; letter-spacing:.02em;
  color:#2a1f15;
  display:flex; align-items:center; gap:8px;
}
.wera-mobile-brand em{
  font-style:italic;
  color:#8a632b;
}
html.theme-blue .wera-mobile-brand{ color:#1d2a3a }
html.theme-blue .wera-mobile-brand em{ color:#3c587c }

.wera-mobile-close{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(42,31,21,.16);
  background:transparent;
  display:grid; place-items:center;
  cursor:pointer;
  color:#2a1f15;
  transition:background .2s ease, border-color .2s ease;
  font-family:inherit;
  padding:0;
}
.wera-mobile-close:hover{
  background:rgba(42,31,21,.06);
  border-color:rgba(42,31,21,.30);
}
.wera-mobile-close svg{ width:18px; height:18px }
html.theme-blue .wera-mobile-close{
  border-color:rgba(40,60,90,.18);
  color:#1d2a3a;
}
html.theme-blue .wera-mobile-close:hover{ background:rgba(40,60,90,.06) }

/* Liste des liens */
.wera-mobile-list{
  flex:1;
  display:flex; flex-direction:column;
  padding:18px 16px 24px;
  gap:2px;
}
.wera-mobile-list a{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  font-family:"Cormorant Garamond", serif;
  font-size:22px; font-weight:500;
  color:#2a1f15;
  text-decoration:none;
  border-radius:14px;
  letter-spacing:-0.005em;
  transition:background .25s ease, color .25s ease, transform .25s ease, padding-left .25s ease;
}
.wera-mobile-list a::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(199,154,73,.45);
  flex-shrink:0;
  transition:background .25s ease, transform .25s ease;
}
.wera-mobile-list a::after{
  content:"→";
  margin-left:auto;
  font-family:"Manrope", sans-serif;
  font-size:18px;
  color:rgba(42,31,21,.30);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease, color .25s ease;
}
.wera-mobile-list a:hover,
.wera-mobile-list a:active,
.wera-mobile-list a.active{
  background:rgba(199,154,73,.10);
  color:#8a632b;
  padding-left:22px;
}
.wera-mobile-list a:hover::before,
.wera-mobile-list a.active::before{
  background:#c79a49;
  transform:scale(1.4);
}
.wera-mobile-list a:hover::after,
.wera-mobile-list a.active::after{
  opacity:1;
  transform:translateX(0);
  color:#8a632b;
}

html.theme-blue .wera-mobile-list a{ color:#1d2a3a }
html.theme-blue .wera-mobile-list a::before{ background:rgba(125,164,212,.50) }
html.theme-blue .wera-mobile-list a::after{ color:rgba(40,60,90,.30) }
html.theme-blue .wera-mobile-list a:hover,
html.theme-blue .wera-mobile-list a.active{
  background:rgba(125,164,212,.12);
  color:#3c587c;
}
html.theme-blue .wera-mobile-list a:hover::before,
html.theme-blue .wera-mobile-list a.active::before{
  background:#7da4d4;
}
html.theme-blue .wera-mobile-list a:hover::after,
html.theme-blue .wera-mobile-list a.active::after{ color:#3c587c }

/* Animation en cascade des items */
.wera-mobile-list a{
  opacity:0;
  transform:translateX(20px);
  transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1),
             background .25s ease, color .25s ease, padding-left .25s ease;
}
.wera-mobile-drawer.open .wera-mobile-list a{
  opacity:1;
  transform:translateX(0);
}
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(1){ transition-delay:.10s, .10s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(2){ transition-delay:.16s, .16s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(3){ transition-delay:.22s, .22s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(4){ transition-delay:.28s, .28s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(5){ transition-delay:.34s, .34s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(6){ transition-delay:.40s, .40s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(7){ transition-delay:.46s, .46s, 0s, 0s, 0s }
.wera-mobile-drawer.open .wera-mobile-list a:nth-child(8){ transition-delay:.52s, .52s, 0s, 0s, 0s }

/* Footer du drawer */
.wera-mobile-foot{
  padding:16px 24px 28px;
  border-top:1px solid rgba(42,31,21,.08);
  font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(42,31,21,.50);
  font-weight:600;
  display:flex; justify-content:space-between; align-items:center;
}
html.theme-blue .wera-mobile-foot{
  border-top-color:rgba(40,60,90,.08);
  color:rgba(40,60,90,.50);
}
.wera-mobile-foot-dot{
  width:6px; height:6px; border-radius:50%;
  background:#c79a49;
  animation:weraMobileDot 2.4s ease-in-out infinite;
}
html.theme-blue .wera-mobile-foot-dot{ background:#7da4d4 }
@keyframes weraMobileDot{
  0%,100%{ opacity:.4; transform:scale(1) }
  50%{ opacity:1; transform:scale(1.3) }
}

/* -------- HERO ÉDITORIAL (v5) -------- */
.hero-editorial{
  padding:80px 0 60px;
  min-height:calc(100vh - 72px);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;
}
.hero-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
  padding-bottom:24px;border-bottom:1px solid var(--line);
}
.hero-meta-time{ font-variant-numeric:tabular-nums }
.hero-display{
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(56px,11vw,180px);
  line-height:.92;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin-top:auto;
  padding:56px 0 32px;
}
.hero-display em{
  font-style:italic;
  font-weight:500;
  color:var(--ink);
}
.hero-display .ampersand{
  font-style:italic;
  color:var(--gold-deep);
  font-weight:400;
}
.hero-footer-row{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;
  padding-top:40px;border-top:1px solid var(--line);
}
@media (max-width:780px){
  .hero-footer-row{ grid-template-columns:1fr;gap:24px;align-items:flex-start }
}
.hero-tagline{
  font-size:clamp(16px,1.3vw,20px);
  color:var(--ink-soft);
  max-width:480px;
  line-height:1.4;
}
.hero-tagline strong{ color:var(--ink);font-weight:600 }
.hero-services{
  display:flex;flex-direction:column;gap:6px;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
@media (max-width:780px){ .hero-services{ text-align:left } }
.hero-services span{
  display:flex;justify-content:space-between;gap:24px;
  padding:6px 0;
  border-top:1px solid var(--line-soft);
  color:var(--ink);
}
.hero-services span:first-child{ border-top:0 }
.hero-services span i{
  font-style:normal;color:var(--ink-soft);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}

/* Legacy hero retained for fallback */
.hero{
  padding:80px 0 120px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;
  position:relative;z-index:1;
}
.hero-eyebrow{ margin-bottom:24px }
.hero h1{ margin-bottom:28px }
.hero-sub{
  font-size:clamp(16px,1.15vw,19px);
  color:var(--ink-soft);
  max-width:520px;
  margin-bottom:32px;
}
.hero-sub strong{ color:var(--ink);font-weight:600 }

.hero-cta{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:36px;
}

.hero-trust{
  display:flex;gap:24px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--line);
}
.trust-item{
  display:flex;align-items:flex-start;gap:10px;
}
.trust-icn{
  width:34px;height:34px;
  border-radius:50%;
  background:var(--cream-3);
  border:1px solid var(--line);
  display:grid;place-items:center;
  flex-shrink:0;
  color:var(--gold-deep);
}
.trust-icn svg{ width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.trust-text strong{ display:block;font-size:13px;font-weight:600;color:var(--ink) }
.trust-text span{ font-size:12px;color:var(--ink-soft) }

/* Mockup hero (laptop + phone) */
.hero-mockup{
  position:relative;
  perspective:1400px;
}
.mockup-stage{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateY(-6deg) rotateX(4deg);
  transition:transform .8s var(--ease-out);
}
.mockup-laptop{
  position:relative;
  width:100%;
  aspect-ratio:16/10.4;
  background:var(--ink);
  border-radius:14px 14px 4px 4px;
  padding:16px;
  box-shadow:var(--shadow-lg);
  transform:translateZ(0);
}
.mockup-laptop::after{
  content:"";
  position:absolute;
  left:-6%;right:-6%;bottom:-12px;
  height:14px;
  background:linear-gradient(180deg,#1a1410,#0f0a07);
  border-radius:0 0 16px 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.30);
}
.mockup-screen{
  width:100%;height:100%;
  background:var(--cream-3);
  border-radius:6px;
  overflow:hidden;
  position:relative;
}
.mockup-bar{
  height:26px;
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:6px;padding:0 12px;
}
.mockup-bar i{
  width:8px;height:8px;border-radius:50%;
  background:rgba(42,31,21,.18);
}
.mockup-bar em{
  font-style:normal;
  font-size:10px;
  color:var(--ink-soft);
  margin-left:auto;
}
.mockup-content{
  padding:18px;
  height:calc(100% - 26px);
  display:flex;flex-direction:column;gap:14px;
}
.mockup-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.mockup-kpi{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
}
.mockup-kpi-label{ font-size:9px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase }
.mockup-kpi-value{ font-size:15px;font-weight:700;color:var(--ink);margin-top:2px }
.mockup-kpi-delta{ font-size:9px;color:#6b8d63;margin-top:1px }
.mockup-chart{
  flex:1;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  position:relative;
}
.mockup-chart-title{ font-size:10px;color:var(--ink-soft);margin-bottom:8px }
.mockup-chart svg{
  width:100%;height:calc(100% - 18px);
}
.mockup-chart .area{
  fill:url(#chartFill);
  opacity:.7;
}
.mockup-chart .line{
  fill:none;stroke:var(--gold-deep);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:drawLine 2.2s var(--ease-out) .4s forwards;
}
@keyframes drawLine{ to{ stroke-dashoffset:0 } }

.mockup-phone{
  position:absolute;
  right:-6%;bottom:-12%;
  width:24%;
  aspect-ratio:9/19;
  background:var(--ink);
  border-radius:18px;
  padding:6px;
  box-shadow:var(--shadow-lg);
  transform:translateZ(50px) rotate(4deg);
}
.mockup-phone-screen{
  width:100%;height:100%;
  background:var(--cream-3);
  border-radius:12px;
  padding:12px 10px;
  display:flex;flex-direction:column;gap:8px;
}
.mockup-phone-screen .ph-bar{
  height:12px;background:var(--cream-2);border-radius:4px;margin-bottom:2px;
}
.mockup-phone-screen .ph-big{
  font-size:14px;font-weight:700;color:var(--ink);
}
.mockup-phone-screen .ph-stat{
  background:var(--cream);border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;
}
.mockup-phone-screen .ph-stat-lbl{ font-size:8px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase }
.mockup-phone-screen .ph-stat-val{ font-size:11px;font-weight:700;color:var(--ink);margin-top:1px }

.mockup-vase{
  position:absolute;
  right:-12%;top:8%;
  width:80px;height:120px;
  background:linear-gradient(180deg,var(--cream-2),var(--cream-3));
  border-radius:8px 8px 24px 24px;
  box-shadow:var(--shadow-sm);
  display:none;
}
@media (min-width:1200px){ .mockup-vase{ display:block } }

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr;gap:60px }
  .hero{ padding:60px 0 80px }
  .mockup-stage{ transform:none;max-width:520px;margin-inline:auto }
  .mockup-phone{ width:22% }
}

/* -------- HERO FEATURE (cas client en héros, v6) -------- */
.hero-feature{
  padding:48px 0 80px;
  background:var(--cream);
  position:relative;
}
.hero-feature-grid{
  display:grid;grid-template-columns:.85fr 1fr;gap:64px;align-items:center;
  min-height:calc(100vh - 200px);
}
@media (max-width:1100px){ .hero-feature-grid{ grid-template-columns:1fr;gap:48px;min-height:auto } }

.hero-feature-tag{
  display:flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
  padding-bottom:14px;border-bottom:1px solid var(--line);
  margin-bottom:28px;
}
.hero-feature-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.hero-feature-stars{ margin-left:auto;color:var(--gold);letter-spacing:.16em;font-size:13px }

.hero-feature-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(52px,7vw,108px);
  line-height:.96;letter-spacing:-0.03em;
  color:var(--ink);
  margin-bottom:26px;
}
.hero-feature-title em{
  font-style:italic;
  font-weight:500;
  color:var(--gold-deep);
}
.hero-feature-sub{
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.55;color:var(--ink-soft);
  max-width:480px;
  margin-bottom:32px;
}
.hero-feature-sub strong{ color:var(--ink);font-weight:600 }
.hero-feature-cta{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;
}
.hero-feature-stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:36px;
  padding-top:24px;border-top:1px solid var(--line);
  width:fit-content;
}
@media (max-width:560px){ .hero-feature-stats{ grid-template-columns:1fr 1fr;gap:24px } }
.hero-feature-stats > div strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:34px;font-weight:500;color:var(--ink);
  line-height:1;letter-spacing:-0.02em;
}
.hero-feature-stats > div span{
  display:block;margin-top:6px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* Visual side : faux site complet */
.hero-feature-visual{
  position:relative;
  height:100%;
  display:flex;align-items:center;justify-content:center;
}
.hero-feature-frame{
  width:100%;
  max-width:680px;
  background:linear-gradient(180deg,#0e0a07,#1a1410);
  border-radius:14px;
  padding:8px;
  box-shadow:0 40px 100px rgba(42,31,21,.30),0 16px 40px rgba(42,31,21,.20);
  position:relative;
  transform:perspective(1600px) rotateY(-3deg) rotateX(2deg);
  transition:transform .8s var(--ease-out);
}
.hero-feature-visual:hover .hero-feature-frame{ transform:perspective(1600px) rotateY(0) rotateX(0) }
.hero-feature-frame-tag{
  position:absolute;
  left:50%;top:-14px;transform:translateX(-50%);
  background:var(--ink);color:var(--cream);
  padding:6px 14px;
  border-radius:99px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
  z-index:2;
}
@media (max-width:1100px){
  .hero-feature-frame{ transform:none }
}

/* Mockup site Maison Orso */
.rs{
  background:#f4ecdc;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/11;
}
.rs-bar{
  height:24px;background:#0f0a07;
  display:flex;align-items:center;gap:5px;padding:0 10px;
}
.rs-bar i{ width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16) }
.rs-bar em{
  font-style:normal;font-size:9px;color:rgba(255,255,255,.5);
  margin:0 auto;letter-spacing:.04em;
}
.rs-content{
  display:flex;flex-direction:column;
  height:calc(100% - 24px);
}
.rs-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  font-size:9px;color:#3a2c20;
  border-bottom:1px solid rgba(58,44,32,.08);
}
.rs-nav-brand{
  font-family:"Cormorant Garamond",serif;
  font-size:13px;font-weight:600;letter-spacing:.18em;color:#3a2c20;
}
.rs-nav-items{ display:flex;gap:18px }
.rs-nav-items span{ font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#6b594a }
.rs-nav-btn{
  font-size:8px;background:#3a2c20;color:#f4ecdc;
  padding:5px 12px;border-radius:99px;letter-spacing:.08em;
}
.rs-hero{
  flex:1;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  padding:30px;
}
.rs-hero-text-eyebrow{
  font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:#8b7561;font-weight:600;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.rs-hero-text-eyebrow::before{
  content:"";width:14px;height:1px;background:#8b7561;
}
.rs-hero-text h2{
  font-family:"Cormorant Garamond",serif;
  font-size:32px;font-weight:400;
  line-height:.96;letter-spacing:-0.025em;
  color:#3a2c20;
  margin-bottom:10px;
}
.rs-hero-text h2 em{ font-style:italic;color:#8a632b }
.rs-hero-text p{
  font-size:9px;line-height:1.55;color:#6b594a;
  margin-bottom:14px;
}
.rs-hero-text-cta{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.08em;
  background:#3a2c20;color:#f4ecdc;
  padding:8px 16px;border-radius:99px;font-weight:600;
}
.rs-hero-img{
  aspect-ratio:1;
  border-radius:6px;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.4),transparent 50%),
    linear-gradient(135deg,#d9c19a,#a07951 65%,#5c3d1f);
  position:relative;
  overflow:hidden;
}
.rs-hero-img::after{
  content:"";position:absolute;
  left:25%;top:18%;width:50%;height:64%;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.25),transparent 50%),
    linear-gradient(180deg,#f4ecdc,#d9c19a);
  border-radius:50% 50% 38% 38% / 60% 60% 30% 30%;
  filter:blur(.5px);
}
.rs-products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:0 30px 18px;
}
.rs-product{
  aspect-ratio:1;
  background:linear-gradient(135deg,#e8d8b8,#bea480);
  border-radius:4px;
  position:relative;
}
.rs-product:nth-child(2){ background:linear-gradient(135deg,#d4ba8f,#8e7350) }
.rs-product:nth-child(3){ background:linear-gradient(135deg,#e8d8b8,#a78a63) }
.rs-product::after{
  content:"";position:absolute;
  left:30%;top:25%;width:40%;height:50%;
  background:rgba(244,236,220,.6);
  border-radius:8px;
  filter:blur(.5px);
}

@media (max-width:560px){
  .hero-feature-frame{ max-width:100%;padding:5px }
  .rs{ aspect-ratio:9/12 }
  .rs-hero{ grid-template-columns:1fr;padding:18px;gap:14px }
  .rs-hero-text h2{ font-size:22px }
  .rs-products{ padding:0 18px 12px }
  .rs-nav-items{ display:none }
}

/* -------- FEATURED CASE (cas client en vedette) -------- */
.featured-case{
  position:relative;
  padding:0 0 120px;
}
.featured-case-frame{
  display:grid;grid-template-columns:.5fr 1fr;gap:64px;align-items:stretch;
  position:relative;
}
@media (max-width:980px){ .featured-case-frame{ grid-template-columns:1fr;gap:40px } }
.featured-case-caption{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:48px 0 64px;
}
.featured-case-caption .eyebrow{ margin-bottom:24px }
.featured-case-caption h2{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(36px,4.8vw,72px);
  font-weight:400;letter-spacing:-0.025em;line-height:1;
  margin-bottom:18px;
}
.featured-case-caption h2 em{ font-style:italic;color:var(--gold-deep) }
.featured-case-caption .case-summary{
  font-size:clamp(15px,1.05vw,17px);
  color:var(--ink-soft);
  max-width:380px;
  line-height:1.6;
  margin-bottom:28px;
}
.featured-case-stats{
  display:flex;gap:32px;flex-wrap:wrap;
  margin-bottom:32px;
  padding-top:24px;border-top:1px solid var(--line);
}
.featured-case-stats div strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:32px;font-weight:500;color:var(--ink);
  line-height:1;
}
.featured-case-stats div span{
  display:block;margin-top:6px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.featured-case-link{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);font-weight:600;
  padding-bottom:6px;border-bottom:1px solid var(--ink);
  align-self:flex-start;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.featured-case-link:hover{ color:var(--gold-deep);border-color:var(--gold-deep) }

.featured-case-visual{
  aspect-ratio:4/3.2;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#d9c7a6,#a98863 70%,#7a5e3f);
  box-shadow:var(--shadow-lg);
}
.featured-case-visual::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.25),transparent 55%);
}
.fc-mockup-window{
  position:absolute;
  left:6%;right:6%;top:10%;bottom:10%;
  background:var(--cream);
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.fc-mockup-bar{
  height:24px;background:var(--cream-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:6px;padding:0 12px;
}
.fc-mockup-bar i{ width:7px;height:7px;border-radius:50%;background:rgba(42,31,21,.2) }
.fc-mockup-bar em{ font-style:normal;font-size:10px;color:var(--ink-soft);margin-left:auto;letter-spacing:.04em }
.fc-mockup-body{
  flex:1;padding:24px;
  display:grid;grid-template-rows:auto 1fr auto;gap:14px;
}
.fc-mockup-eyebrow{ font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft) }
.fc-mockup-h{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,2.4vw,30px);
  font-weight:500;color:var(--ink);
  line-height:1.05;letter-spacing:-0.02em;
}
.fc-mockup-h em{ font-style:italic;color:var(--gold-deep) }
.fc-mockup-row{ display:flex;gap:8px }
.fc-mockup-btn{ font-size:9px;padding:5px 12px;border-radius:99px;background:var(--ink);color:var(--cream);font-weight:600;letter-spacing:.05em }
.fc-mockup-btn.ghost{ background:transparent;color:var(--ink);border:1px solid var(--ink) }
.fc-mockup-img{
  background:linear-gradient(135deg,var(--cream-2),var(--cream-4));
  border-radius:4px;flex:1;min-height:60px;
  position:relative;overflow:hidden;
}
.fc-mockup-img::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.3),transparent 60%);
}
.fc-mockup-pills{ display:flex;gap:6px;flex-wrap:wrap }
.fc-mockup-pill{ font-size:8px;padding:3px 8px;border:1px solid var(--line);border-radius:99px;color:var(--ink-soft);background:var(--cream-3) }

/* -------- MARQUEE -------- */
.marquee{
  overflow:hidden;
  padding:32px 0;
  border-block:1px solid var(--line);
  background:var(--cream);
}
.marquee-track{
  display:flex;gap:80px;
  white-space:nowrap;
  animation:marqueeMove 38s linear infinite;
  align-items:center;
}
@keyframes marqueeMove{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}
.marquee-item{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(28px,3.4vw,46px);
  font-weight:400;
  font-style:italic;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:80px;
}
.marquee-item::after{
  content:"●";
  font-size:8px;
  color:var(--gold);
  font-style:normal;
}
.marquee:hover .marquee-track{ animation-play-state:paused }

/* -------- PROJECTS GRID éditorial -------- */
.projects-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:64px 32px;
}
@media (max-width:980px){ .projects-grid{ grid-template-columns:1fr 1fr;gap:48px 24px } }
@media (max-width:640px){ .projects-grid{ grid-template-columns:1fr;gap:56px } }
.project-card{
  display:block;
  position:relative;
  cursor:pointer;
}
.project-card-visual{
  aspect-ratio:5/4;
  border-radius:6px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--cream-2),var(--cream-4));
  position:relative;
  transition:transform var(--t-slow) var(--ease-out);
  box-shadow:var(--shadow-sm);
}
.project-card-visual::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 55%);
  pointer-events:none;
}
.project-card:hover .project-card-visual{ transform:scale(1.02) }
.project-card-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:18px;gap:16px;
}
.project-card-meta h3{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,1.6vw,24px);
  font-weight:500;letter-spacing:-0.015em;line-height:1.2;
  color:var(--ink);
}
.project-card-meta time{
  font-size:11px;color:var(--ink-soft);
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-variant-numeric:tabular-nums;
}
.project-card-tags{
  margin-top:8px;
  font-size:12px;color:var(--ink-soft);
}
.project-card-tags span:not(:last-child)::after{ content:" · ";color:var(--ink-mute) }

/* big wordmark footer */
.big-wordmark{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
  font-size:clamp(120px,22vw,360px);
  line-height:.85;
  letter-spacing:-0.04em;
  color:var(--cream);
  opacity:.06;
  text-align:center;
  margin:60px 0 -40px;
  user-select:none;
}

/* -------- TICKERS / LOGO STRIPS -------- */
.logo-strip{
  padding:36px 0;
  border-block:1px solid var(--line);
  background:var(--cream-3);
}
.logo-strip-label{
  text-align:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.logo-strip-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:48px;
}
.logo-strip-row span{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:22px;
  color:var(--ink-soft);
  opacity:.7;
}

/* -------- SECTION HEAD -------- */
.section-head{
  text-align:center;
  max-width:760px;
  margin-inline:auto;
  margin-bottom:64px;
}
.section-head .eyebrow{ margin-bottom:18px }
.section-head .section-desc{
  margin-top:18px;
  font-size:clamp(16px,1.1vw,18px);
  color:var(--ink-soft);
}

/* -------- CARDS -------- */
.card{
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
  position:relative;
  overflow:hidden;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-2);
}
.card-icon{
  width:54px;height:54px;
  border-radius:14px;
  background:var(--cream);
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--gold-deep);
  margin-bottom:22px;
}
.card-icon svg{ width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6 }
.card h3{ margin-bottom:12px }
.card p{ font-size:15px }
.card-link{
  margin-top:18px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;
  color:var(--gold-deep);
}
.card-link .arrow{ transition:transform var(--t-fast) var(--ease) }
.card:hover .card-link .arrow{ transform:translateX(4px) }

.cards-3{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px }
.cards-2{ display:grid;grid-template-columns:repeat(2,1fr);gap:24px }
.cards-4{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px }
@media (max-width:980px){
  .cards-3,.cards-4{ grid-template-columns:1fr 1fr;gap:18px }
  .cards-2{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .cards-3,.cards-4{ grid-template-columns:1fr }
}

/* -------- PROCESS STEPS -------- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;
  top:42px;left:8%;right:8%;
  height:1px;
  background:linear-gradient(90deg,var(--line),var(--line-2),var(--line));
  z-index:0;
}
.step{
  position:relative;z-index:1;
  text-align:center;
  padding:0 12px;
}
.step-num{
  width:84px;height:84px;
  margin:0 auto 22px;
  border-radius:50%;
  background:var(--cream-3);
  border:1px solid var(--line);
  display:grid;place-items:center;
  position:relative;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.step-num span{
  position:absolute;
  top:-6px;right:-6px;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
.step-num svg{ width:32px;height:32px;color:var(--gold-deep);stroke:currentColor;fill:none;stroke-width:1.4 }
.step:hover .step-num{ transform:translateY(-4px);box-shadow:var(--shadow-md) }
.step h4{ margin-bottom:8px;font-size:17px }
.step p{ font-size:14px;line-height:1.55 }
@media (max-width:960px){
  .steps{ grid-template-columns:1fr 1fr;gap:32px }
  .steps::before{ display:none }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr }
}

/* -------- PRICING -------- */
.pricing{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  align-items:stretch;
}
@media (max-width:980px){ .pricing{ grid-template-columns:1fr } }

.price-card{
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:36px 32px;
  display:flex;flex-direction:column;
  position:relative;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.price-card:hover{ transform:translateY(-4px);box-shadow:var(--shadow-md) }

.price-card.featured{
  background:var(--cream);
  border-color:var(--gold);
  box-shadow:0 8px 32px rgba(199,154,73,.15);
}
.price-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  color:#1a1208;
  padding:6px 16px;
  border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(199,154,73,.30);
}
.price-name{
  font-family:"Cormorant Garamond",serif;
  font-size:28px;font-weight:600;
  color:var(--ink);
  text-align:center;
  margin-bottom:6px;
}
.price-tag-line{
  text-align:center;
  font-size:13px;color:var(--ink-soft);
  margin-bottom:24px;
  min-height:38px;
}
.price-amount{
  text-align:center;
  margin-bottom:8px;
}
.price-amount strong{
  font-family:"Cormorant Garamond",serif;
  font-size:48px;font-weight:600;color:var(--ink);
  letter-spacing:-0.02em;
}
.price-amount em{
  font-style:normal;font-size:14px;color:var(--ink-soft);font-weight:500;
}
.price-mode{
  text-align:center;
  font-size:12px;color:var(--ink-soft);
  margin-bottom:24px;
}
.price-features{
  margin:0 0 28px;
  flex:1;
}
.price-features li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;color:var(--ink);
}
.price-features li:last-child{ border-bottom:0 }
.price-features li::before{
  content:"";
  width:16px;height:16px;border-radius:50%;
  background:var(--cream);border:1px solid var(--line-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a632b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
  flex-shrink:0;margin-top:2px;
}

/* -------- TESTIMONIALS -------- */
.testimonials{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media (max-width:980px){ .testimonials{ grid-template-columns:1fr } }
.testimonial{
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px;
  display:flex;flex-direction:column;
}
.testimonial-stars{
  color:var(--gold);
  margin-bottom:14px;
  font-size:14px;
  letter-spacing:.2em;
}
.testimonial p{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:17px;line-height:1.5;
  color:var(--ink);
  margin-bottom:20px;
  flex:1;
}
.testimonial-author{
  display:flex;align-items:center;gap:12px;
  padding-top:16px;border-top:1px solid var(--line);
}
.testimonial-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--cream-2),var(--cream-4));
  display:grid;place-items:center;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);
}
.testimonial-author strong{ display:block;font-size:13px;color:var(--ink);font-weight:600 }
.testimonial-author span{ font-size:12px;color:var(--ink-soft) }

/* -------- METRICS -------- */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  text-align:center;
}
@media (max-width:780px){ .metrics{ grid-template-columns:repeat(2,1fr);gap:40px } }
.metric strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(40px,4vw,64px);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1;
}
.surface-dark .metric strong{ color:var(--gold-2) }
.metric span{
  display:block;
  margin-top:8px;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.surface-dark .metric span{ color:rgba(245,239,227,.55) }

/* -------- FAQ -------- */
.faq-list{ display:flex;flex-direction:column;gap:12px;max-width:840px;margin-inline:auto }
.faq-item{
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.faq-item[open]{
  border-color:var(--line-2);
  box-shadow:var(--shadow-sm);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:16px;font-weight:600;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+";
  font-size:22px;font-weight:300;color:var(--gold-deep);
  transition:transform var(--t) var(--ease);
  flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(45deg) }
.faq-answer{
  padding:0 26px 22px;
  font-size:15px;color:var(--ink-soft);line-height:1.65;
}

/* -------- FORMS -------- */
.field{ margin-bottom:18px }
.field label{
  display:block;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:14px 16px;
  background:var(--cream-3);
  border:1px solid var(--line-2);
  border-radius:10px;
  font-size:15px;
  color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  outline:none;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:var(--gold);
  background:var(--paper);
  box-shadow:0 0 0 4px rgba(199,154,73,.08);
}
.field textarea{ resize:vertical;min-height:120px }
.field .hint{ font-size:12px;color:var(--ink-soft);margin-top:6px }
.field-row{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr } }

.surface-dark .field label{ color:rgba(245,239,227,.55) }
.surface-dark .field input,
.surface-dark .field textarea{
  background:rgba(245,239,227,.06);
  border-color:rgba(245,239,227,.18);
  color:var(--cream);
}
.surface-dark .field input:focus,
.surface-dark .field textarea:focus{
  border-color:var(--gold-2);
  background:rgba(245,239,227,.10);
  box-shadow:0 0 0 4px rgba(243,207,136,.10);
}

/* -------- FOOTER -------- */
.site-footer{
  background:var(--ink-3);
  color:var(--cream);
  padding:80px 0 32px;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:56px;
}
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr;gap:36px } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr;gap:32px } }
.footer-grid .brand-text{ color:var(--gold-2);-webkit-text-fill-color:initial }
.site-footer p{ color:rgba(245,239,227,.65);font-size:14px;line-height:1.6;max-width:380px;margin-top:18px }
.footer-col h4{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:10px }
.footer-col a{
  color:rgba(245,239,227,.65);font-size:14px;
  transition:color var(--t-fast) var(--ease);
}
.footer-col a:hover{ color:var(--gold-2) }
.footer-social{
  display:flex;gap:10px;margin-top:20px;
}
.footer-social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(245,239,227,.06);
  border:1px solid rgba(245,239,227,.10);
  display:grid;place-items:center;
  color:var(--cream);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.footer-social a:hover{ background:rgba(243,207,136,.12);border-color:rgba(243,207,136,.30);color:var(--gold-2) }
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:32px;
  border-top:1px solid rgba(245,239,227,.10);
  font-size:12px;color:rgba(245,239,227,.45);
}
.footer-trust{ display:flex;gap:18px;flex-wrap:wrap }
.footer-trust span{ display:inline-flex;align-items:center;gap:6px }

/* -------- BANNERS, PILLS, BADGES -------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;font-weight:600;
  color:var(--ink);
}
.pill-dot{ width:6px;height:6px;border-radius:50%;background:var(--gold) }
.pill-pulse .pill-dot{
  background:#7da876;
  box-shadow:0 0 0 0 rgba(125,168,118,.6);
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(125,168,118,.45) }
  70%{ box-shadow:0 0 0 10px rgba(125,168,118,0) }
  100%{ box-shadow:0 0 0 0 rgba(125,168,118,0) }
}

/* -------- ANIMATIONS / REVEAL -------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  will-change:transform,opacity;
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
.reveal-left{ transform:translateX(-32px) }
.reveal-left.in{ transform:translateX(0) }
.reveal-right{ transform:translateX(32px) }
.reveal-right.in{ transform:translateX(0) }

.reveal-delay-1{ transition-delay:.08s }
.reveal-delay-2{ transition-delay:.16s }
.reveal-delay-3{ transition-delay:.24s }
.reveal-delay-4{ transition-delay:.32s }
.reveal-delay-5{ transition-delay:.40s }

/* Parallax tags */
.parallax{ will-change:transform }

/* Page transitions */
.page-enter{
  animation:pageIn .55s var(--ease-out) both;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(20px) }
  to{ opacity:1; transform:translateY(0) }
}
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:fadeOut .25s var(--ease) both }
::view-transition-new(root){ animation:fadeIn .35s var(--ease-out) both }
@keyframes fadeOut{ to{ opacity:0 } }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px) } }

/* Hover micro */
.float-hover{
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.float-hover:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

/* -------- BACKGROUND SVG parallax (accueil) + halo curseur -------- */
/* position:absolute couvre TOUTE la page (pas juste 100vh) — body en relative */
.bg-svg-parallax{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  width:100%;
  min-height:100vh;
  height:100%;
  z-index:0;pointer-events:none;
  overflow:hidden;
}
.bg-svg-parallax svg{
  width:100%;height:100%;
  display:block;
}
.bg-svg-parallax::after{
  content:"";position:absolute;inset:0;
  /* Voile très léger pour lisibilité — laisse les décorations bien visibles partout */
  background:
    linear-gradient(180deg,
      rgba(245,239,227,.20) 0%,
      rgba(245,239,227,.32) 40%,
      rgba(245,239,227,.18) 70%,
      rgba(245,239,227,0) 95%);
  pointer-events:none;
}
.bg-svg-parallax .deco,
.bg-svg-parallax .deco-wave{
  will-change:transform;
}

/* Halo doré qui suit le curseur */
.cursor-glow{
  position:fixed;
  top:0;left:0;
  width:560px;height:560px;
  margin-left:-280px;margin-top:-280px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(214,168,84,0.20) 0%, rgba(214,168,84,0.08) 35%, rgba(214,168,84,0) 70%);
  opacity:0;
  z-index:1;
  transition:opacity .5s ease;
  will-change:transform;
  mix-blend-mode:multiply;
}
.cursor-glow.active{ opacity:1 }
@media (max-width:780px){
  .cursor-glow{ display:none }
}

/* -------- PAGE ARRIVAL ANIMATION (Animus desync style) -------- */
/* Blocs cachés tant qu'on les fait pas matérialiser */
.wpa-block{
  opacity:0;
  visibility:hidden;
  will-change:opacity,transform,clip-path,filter;
}
.wpa-block.wpa-materializing{
  visibility:visible;
  animation:wpaMaterialize .95s cubic-bezier(.22,1,.36,1) forwards !important;
  animation-duration:.95s !important;
  animation-iteration-count:1 !important;
}
@keyframes wpaMaterialize{
  0%{
    opacity:0;
    clip-path:inset(48% 48% 48% 48%);
    transform:scale(.6);
    filter:brightness(2.4) saturate(1.6) drop-shadow(0 0 24px rgba(243,207,136,.9));
  }
  18%{
    opacity:1;
    clip-path:inset(12% 35% 12% 35%);
    transform:scale(.86);
    filter:brightness(1.8) saturate(1.4) drop-shadow(0 0 18px rgba(243,207,136,.7));
  }
  42%{
    clip-path:inset(2% 12% 2% 12%);
    transform:scale(.97);
    filter:brightness(1.35) drop-shadow(0 0 12px rgba(243,207,136,.5));
  }
  70%{
    clip-path:inset(0 2% 0 2%);
    transform:scale(1);
    filter:brightness(1.12) drop-shadow(0 0 6px rgba(243,207,136,.30));
  }
  100%{
    opacity:1;
    clip-path:inset(0);
    transform:scale(1);
    filter:none;
  }
}

/* Overlay opaque cream qui cache le loader/contenu pendant le chargement */
.wpa-overlay{
  position:fixed;inset:0;
  z-index:9999;pointer-events:none;
  background:#f5efe3;
  opacity:1;
  transition:background-color .9s ease, opacity .9s ease;
}
.wpa-overlay.wpa-revealing{
  background:rgba(245,239,227,0);
  opacity:0;
  transition:background-color 1.3s ease .4s, opacity 1.3s ease .4s;
}
/* Grille dorée animée par-dessus */
.wpa-overlay-grid{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(214,168,84,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,168,84,.18) 1px, transparent 1px);
  background-size:36px 36px, 36px 36px;
  pointer-events:none;
}
/* Pulse glow ambient au centre */
.wpa-overlay-pulse{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(243,207,136,.30) 0%, transparent 55%);
  animation:wpaPulse 1.6s ease-in-out infinite alternate !important;
  animation-duration:1.6s !important;
  pointer-events:none;
}
@keyframes wpaPulse{
  from{ opacity:.5;transform:scale(.98) }
  to{ opacity:1;transform:scale(1.04) }
}

/* Scan line qui remonte du bas vers le haut */
.wpa-scanline{
  position:fixed;
  left:-5%;right:-5%;
  top:100%;
  height:4px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(243,207,136,.4) 15%,
    rgba(243,207,136,1) 50%,
    rgba(243,207,136,.4) 85%,
    transparent 100%);
  box-shadow:
    0 0 40px 12px rgba(243,207,136,.55),
    0 0 80px 20px rgba(199,154,73,.30),
    0 -20px 60px -8px rgba(243,207,136,.35);
  z-index:10000;pointer-events:none;
  animation:wpaScan 1.8s cubic-bezier(.5,.05,.5,1) forwards !important;
  animation-duration:1.8s !important;
  will-change:top,opacity;
}
@keyframes wpaScan{
  0%{ top:100%;opacity:0 }
  8%{ opacity:1 }
  90%{ opacity:1 }
  100%{ top:-4px;opacity:0 }
}

/* Ligne secondaire (effet "glitch" / double scan) */
.wpa-scanline::after{
  content:"";position:absolute;
  left:0;right:0;top:-1px;
  height:1px;
  background:rgba(255,245,207,.6);
  filter:blur(.5px);
}

/* Note : pas de @media prefers-reduced-motion ici — l'animation est forcée pour tous */

/* -------- PAGE BUILD ANIMATION (transition entre étapes auth) -------- */
.wera-page-build{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  background:var(--cream);
  opacity:0;pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.32,1);
  overflow:hidden;
}
.wera-page-build.active{ opacity:1;pointer-events:auto }
.wera-page-build.fading{ opacity:0 }
.wpb-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(214,168,84,.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(214,168,84,.10), transparent 65%);
  pointer-events:none;
}
.wpb-inner{
  position:relative;
  width:min(560px,100%);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.wpb-brand{ margin-bottom:28px }
.wpb-logo{
  height:72px;width:auto;display:block;
  opacity:0;transform:translateY(8px);
  animation:wpbFadeUp .7s cubic-bezier(.16,1,.3,1) .05s forwards;
  filter:drop-shadow(0 2px 6px rgba(143,105,47,.14));
}
@keyframes wpbFadeUp { to{ opacity:1;transform:translateY(0) } }
.wpb-message{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:clamp(20px,2.2vw,26px);
  color:var(--ink);
  margin-bottom:20px;
  transition:opacity .22s ease;
  letter-spacing:-0.01em;
  opacity:0;
  animation:wpbFadeUp .7s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.wpb-message::after{
  content:" · · ·";
  display:inline-block;margin-left:6px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:wpbDots 1.4s ease-in-out infinite;
}
@keyframes wpbDots {
  0%,15%{ opacity:0;letter-spacing:0 }
  50%{ opacity:1;letter-spacing:.06em }
  85%,100%{ opacity:0;letter-spacing:0 }
}
.wpb-progress{
  width:100%;max-width:340px;
  height:3px;
  background:rgba(42,31,21,.10);
  border-radius:99px;overflow:hidden;
  margin:0 auto 36px;
  opacity:0;
  animation:wpbFadeUp .7s cubic-bezier(.16,1,.3,1) .25s forwards;
}
.wpb-progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-2),var(--gold) 50%,var(--gold-deep));
  border-radius:99px;
  animation:wpbProgress 1.8s cubic-bezier(.4,0,.2,1) forwards;
  box-shadow:0 0 12px rgba(199,154,73,.5);
}
@keyframes wpbProgress { from{ width:0 } to{ width:100% } }

/* Skeleton dashboard qui se construit */
.wpb-skeleton{
  width:100%;max-width:460px;
  display:flex;flex-direction:column;gap:12px;
  padding:22px;
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(42,31,21,.08);
  opacity:0;
  animation:wpbFadeUp .7s cubic-bezier(.16,1,.3,1) .3s forwards;
}
.wpb-skel{
  position:relative;
  background:linear-gradient(135deg,var(--cream-2),var(--cream-4) 60%);
  border-radius:8px;
  opacity:0;
  transform:translateY(12px) scale(.96);
  transition:opacity .45s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.wpb-skel.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* shimmer ambient sur chaque skeleton */
.wpb-skel.visible::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  background-size:200% 100%;
  animation:wpbShimmer 1.6s linear infinite;
  pointer-events:none;
}
@keyframes wpbShimmer { from{ background-position:200% 0 } to{ background-position:-100% 0 } }

.wpb-header{ height:30px;width:55% }
.wpb-row{ display:flex;gap:10px }
.wpb-card{ height:64px;flex:1 }
.wpb-chart{
  height:88px;
  background:linear-gradient(135deg,var(--cream),var(--cream-3));
  padding:12px;display:flex;align-items:flex-end;
}
.wpb-chart svg{ width:100%;height:100% }
.wpb-chart-line{
  stroke-dasharray:600;stroke-dashoffset:600;
  animation:wpbDrawLine 1.2s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.8s;
}
@keyframes wpbDrawLine { to{ stroke-dashoffset:0 } }
.wpb-cta{
  height:42px;width:60%;
  margin:0 auto;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 50%,var(--gold-deep));
  border-radius:999px;
  box-shadow:0 8px 22px rgba(199,154,73,.30);
}

@media (max-width:560px){
  .wpb-skeleton{ padding:16px }
  .wpb-chart{ height:72px }
}

/* -------- BACKGROUND SVG décoratif (signup / login) -------- */
.bg-svg{
  position:fixed;inset:0;
  z-index:0;pointer-events:none;
  width:100vw;height:100vh;
  overflow:hidden;
}
.bg-svg svg{
  width:100%;height:100%;
  display:block;
}
.bg-svg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 0%,rgba(245,239,227,.35) 70%,rgba(245,239,227,.6) 100%);
  pointer-events:none;
}
/* Décomposition / recomposition au survol */
.bg-svg .deco > *:not(.deco-dots){
  transition:opacity .28s ease;
  will-change:opacity;
}
.bg-svg .deco.is-decomposed > *:not(.deco-dots){ opacity:0 }
.bg-svg .deco-dots{
  pointer-events:none;
  /* Force la couche GPU dès le départ pour fluidité */
  transform:translate3d(0,0,0);
}
.bg-svg .deco-dots circle{
  fill:#9d6e4d;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  /* Transitions optimisées pour fluidité GPU */
  transition:opacity .3s ease, transform .65s cubic-bezier(.22,1,.32,1);
  will-change:transform,opacity;
  /* Force hardware compositing */
  transform:translate3d(0,0,0);
}
.bg-svg .deco.is-decomposed .deco-dots circle{ opacity:.85 }
/* État "preshot" : invisible, force la compilation des transitions GPU */
.bg-svg.preshot .deco-dots circle{
  transform:translate3d(.5px,.5px,0) !important;
  opacity:0 !important;
  transition:none !important;
}
@keyframes ambBreath { 0%,100%{ opacity:.94 } 50%{ opacity:1 } }
.bg-svg .deco{ animation:ambBreath 7s ease-in-out infinite }
.bg-svg .deco:nth-child(2n){ animation-duration:9s;animation-delay:-2s }
.bg-svg .deco:nth-child(3n){ animation-duration:8s;animation-delay:-4s }

/* -------- LEGAL PAGES (mentions, CGV, confidentialité, cookies) -------- */
.legal-shell{
  padding:48px 0 80px;
  background:var(--cream);
  min-height:60vh;
}
.legal-head{
  padding-bottom:24px;border-bottom:1px solid var(--line);
  margin-bottom:36px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
}
.legal-head h1{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;font-size:clamp(36px,4.6vw,56px);
  line-height:1;letter-spacing:-0.02em;
}
.legal-head h1 em{ font-style:italic;color:var(--gold-deep) }
.legal-head .meta{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
}
.legal-body{
  max-width:780px;
  font-size:15px;line-height:1.7;
  color:var(--ink-soft);
}
.legal-body h2{
  font-family:"Cormorant Garamond",serif;
  font-weight:500;font-size:24px;letter-spacing:-0.01em;
  color:var(--ink);
  margin:32px 0 12px;
}
.legal-body p{ margin-bottom:14px;color:var(--ink-soft) }
.legal-body p strong{ color:var(--ink) }
.legal-body ul{ padding-left:22px;margin-bottom:14px }
.legal-body li{ margin-bottom:6px }
.legal-body li strong{ color:var(--ink) }
.legal-body a{ color:var(--gold-deep);font-weight:600;border-bottom:1px solid currentColor }
.legal-body a:hover{ color:var(--ink) }
.legal-update{
  display:inline-block;
  font-size:12px;letter-spacing:.04em;
  color:var(--ink-soft);
  background:var(--cream-3);border:1px solid var(--line);
  padding:6px 14px;border-radius:99px;
  margin-bottom:24px;
}
.legal-nav{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:36px;
}
.legal-nav a{
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-soft);
  padding:8px 14px;
  background:var(--cream-3);border:1px solid var(--line);
  border-radius:99px;
}
.legal-nav a.active,.legal-nav a:hover{
  background:var(--ink);color:var(--cream);border-color:var(--ink);
}

/* -------- COOKIE BANNER -------- */
.cookie-banner{
  position:fixed;
  left:24px;right:24px;bottom:24px;
  z-index:80;
  display:none;
  align-items:center;gap:18px;
  padding:18px 22px;
  background:var(--cream-3);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--shadow-md);
  max-width:920px;margin:0 auto;
}
.cookie-banner.active{ display:flex;flex-wrap:wrap;justify-content:space-between }
.cookie-banner p{
  flex:1;min-width:240px;
  font-size:13px;line-height:1.55;color:var(--ink);margin:0;
}
.cookie-banner p a{ color:var(--gold-deep);text-decoration:underline;cursor:pointer }
.cookie-actions{ display:flex;gap:8px;flex-wrap:wrap }
.cookie-btn{
  font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:8px 14px;border-radius:99px;cursor:pointer;
  transition:all var(--t-fast) var(--ease);border:1px solid;
}
.cookie-btn.accept{ background:var(--ink);color:var(--cream);border-color:var(--ink) }
.cookie-btn.accept:hover{ background:var(--ink-2);border-color:var(--ink-2) }
.cookie-btn.reject{ background:transparent;color:var(--ink);border-color:var(--line-2) }
.cookie-btn.reject:hover{ background:var(--cream-2) }
.cookie-btn.prefs{ background:transparent;color:var(--ink-soft);border-color:transparent;text-decoration:underline }

/* Cookie preferences modal */
.cookie-modal{
  position:fixed;inset:0;z-index:90;
  display:none;align-items:center;justify-content:center;
  background:rgba(42,31,21,.55);backdrop-filter:blur(8px);
  padding:20px;
}
.cookie-modal.active{ display:flex }
.cookie-modal-content{
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;
  max-width:520px;width:100%;
}
.cookie-modal-content h2{
  font-family:"Cormorant Garamond",serif;
  font-size:24px;font-weight:500;letter-spacing:-0.02em;margin-bottom:8px;
}
.cookie-modal-content p{ font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:18px }
.cookie-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--line);gap:14px;
}
.cookie-row:last-of-type{ border-bottom:0 }
.cookie-row-info strong{ display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:2px }
.cookie-row-info span{ font-size:12px;color:var(--ink-soft) }
.cookie-row label{ position:relative;width:46px;height:24px;flex-shrink:0;margin:0 }
.cookie-row input[type="checkbox"]{ opacity:0;width:0;height:0 }
.cookie-row label .toggle-bg{
  position:absolute;inset:0;background:var(--line-2);border-radius:99px;
  transition:background var(--t-fast) var(--ease);cursor:pointer;
}
.cookie-row label .toggle-bg::after{
  content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;
  background:var(--cream);border-radius:50%;
  transition:transform var(--t-fast) var(--ease);box-shadow:0 1px 3px rgba(42,31,21,.20);
}
.cookie-row input:checked + .toggle-bg{ background:var(--gold-deep) }
.cookie-row input:checked + .toggle-bg::after{ transform:translateX(22px) }
.cookie-row label.disabled .toggle-bg{ background:var(--gold-deep);opacity:.5;cursor:not-allowed }
.cookie-modal-actions{ display:flex;justify-content:flex-end;gap:10px;margin-top:24px;flex-wrap:wrap }

/* -------- LEAD MAGNET MODAL -------- */
.lead-overlay{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  background:rgba(42,31,21,.65);backdrop-filter:blur(10px);
  padding:20px;
}
.lead-overlay.active{ display:flex;animation:fadeIn .3s ease }
.lead-modal{
  background:var(--cream-3);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:48px 44px;
  max-width:520px;width:100%;
  position:relative;
  box-shadow:var(--shadow-lg);
  animation:fadeInUp .35s var(--ease-out);
}
@keyframes fadeInUp{ from{ opacity:0;transform:translateY(20px) } to{ opacity:1;transform:translateY(0) } }
.lead-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;
  display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;
  transition:all var(--t-fast) var(--ease);font-size:18px;
}
.lead-close:hover{ background:var(--ink);color:var(--cream);border-color:var(--ink) }
.lead-modal h2{
  font-family:"Cormorant Garamond",serif;
  font-size:32px;font-weight:500;letter-spacing:-0.02em;
  line-height:1;margin-bottom:8px;
}
.lead-modal h2 em{ font-style:italic;color:var(--gold-deep) }
.lead-modal p.lead-intro{
  font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:24px;
}
.lead-modal .lead-perks{
  background:var(--cream);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px;margin-bottom:20px;
}
.lead-modal .lead-perks li{
  font-size:13px;color:var(--ink);padding:5px 0;display:flex;gap:8px;
}
.lead-modal .lead-perks li::before{ content:"✓";color:var(--gold-deep);font-weight:700 }

/* ============================================================
   THEME BLUE — palette alternative tech (toggle dans le header)
   ============================================================ */
html.theme-blue{
  --cream:#f5f7fa;
  --cream-2:#e8eef5;
  --cream-3:#fafbfc;
  --cream-4:#d6e0eb;
  --paper:#ffffff;

  --ink:#1f2b3a;
  --ink-2:#2a3540;
  --ink-3:#0e1620;
  --ink-soft:#5a6776;
  --ink-mute:#8d97a3;

  --line:rgba(31,43,58,.08);
  --line-2:rgba(31,43,58,.14);
  --line-soft:rgba(31,43,58,.05);
  --line-on-dark:rgba(245,247,250,.10);

  --gold:#5a8bc5;
  --gold-2:#7da4d4;
  --gold-3:#3d6a9c;
  --gold-deep:#3d6a9c;

  --accent:#1f2b3a;
}
/* Body bg en thème bleu */
html.theme-blue body{
  background:linear-gradient(180deg,#fafbfc 0%,#f5f7fa 50%,#e8eef5 100%) !important;
}
/* SVG décoratif accueil : hue-rotate vers bleu (garde la composition v4 visible) */
html.theme-blue .bg-svg-parallax svg{
  filter:hue-rotate(190deg) saturate(.72) brightness(1.05) !important;
}
html.theme-blue .cursor-glow{
  background:radial-gradient(circle, rgba(125,164,212,0.25) 0%, rgba(125,164,212,0.10) 35%, rgba(125,164,212,0) 70%) !important;
}

/* Header bg (était hardcodé en cream) */
html.theme-blue .site-header{
  background:rgba(245,247,250,.78) !important;
  border-bottom-color:rgba(31,43,58,.10) !important;
}
html.theme-blue .site-header.scrolled{
  background:rgba(245,247,250,.92) !important;
}

/* Logo lockup brun → décalage hue vers bleu via filter */
html.theme-blue .brand-lockup,
html.theme-blue .auth-brand img,
html.theme-blue .brand-lockup-skin{
  filter:hue-rotate(190deg) saturate(.85) brightness(.95) !important;
}
/* Wordmark texte CSS dégradé */
html.theme-blue .brand-text{
  background:linear-gradient(135deg,#7da4d4 0%,#5a8bc5 50%,#27497a 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}

/* Halos / radial gradients dorés hardcodés sur les pages */
html.theme-blue .contact-hero::before,
html.theme-blue .tarifs-hero::before,
html.theme-blue .faq-hero::before,
html.theme-blue .cases-hero::before,
html.theme-blue .page-hero::before,
html.theme-blue .about-hero::before,
html.theme-blue .about-hero::after,
html.theme-blue .home-bg-orb,
html.theme-blue .hero-bg-orb,
html.theme-blue .hero::before{
  background:radial-gradient(ellipse,rgba(125,164,212,.20),transparent 65%) !important;
}

/* Eyebrow dot (or → bleu) */
html.theme-blue .eyebrow::before{
  background:var(--gold) !important;
}

/* Cards / panels — fix rgba hardcodés */
html.theme-blue .contact-aside-card{
  background:#1f2b3a !important;
}
html.theme-blue .contact-aside-card *{ color:rgba(245,247,250,.72) }
html.theme-blue .contact-aside-card strong,
html.theme-blue .contact-aside-card h3{ color:#fafbfc !important }

/* Boutons CTA (gradient gold → bleu) */
html.theme-blue .btn-gold,
html.theme-blue .price-badge{
  background:linear-gradient(135deg,#7da4d4,#5a8bc5 55%,#3d6a9c) !important;
  color:#fff !important;
}

/* Featured price card border or → blue */
html.theme-blue .price-card.featured{
  border-color:var(--gold) !important;
  box-shadow:0 8px 32px rgba(125,164,212,.15) !important;
}

/* Footer dark */
html.theme-blue .site-footer{
  background:#0e1620 !important;
}
/* SVG W path hardcodé en gold dans le footer/CTA — passe en bleu via CSS */
html.theme-blue .site-footer svg path,
html.theme-blue footer svg path,
html.theme-blue .surface-dark svg path[stroke],
html.theme-blue .cta-dark svg path[stroke]{
  stroke:#5a8bc5 !important;
}
/* Logo SVG dans le footer (path stroke gold) — bleu mid */
html.theme-blue .brand svg path[stroke]{
  stroke:#5a8bc5 !important;
}

/* ====== bg-svg signup/login : hue-rotate vers bleu (effet décompose inclus) ====== */
html.theme-blue .bg-svg svg,
html.theme-blue [data-bg-hero] svg{
  filter:hue-rotate(195deg) saturate(1) brightness(1) !important;
}
/* IMPORTANT : on NE force PAS le fill des dots en bleu, car le hue-rotate du
   parent re-rotate la couleur. Le brun #9d6e4d devient bleu naturellement
   après le filter. */

/* Meta-row du bas de l'accueil (était en tint doré) */
html.theme-blue .home-meta-row{
  background:rgba(125,164,212,.15) !important;
  border-top-color:rgba(61,106,156,.30) !important;
  border-bottom-color:rgba(61,106,156,.18) !important;
  color:#1f2b3a !important;
}
html.theme-blue .home-meta-row a{ color:#1f2b3a !important }
html.theme-blue .home-meta-row a:hover{ color:#3d6a9c !important }

/* Halo derrière le mockup du hero accueil */
html.theme-blue .home-mockup-bg{
  background:radial-gradient(ellipse at center,rgba(125,164,212,.30),transparent 70%) !important;
}

/* Dot pill "Disponible · 2 slots" (animation pulse box-shadow doré) */
html.theme-blue .home-eyebrow::before{
  background:#5a8bc5 !important;
  box-shadow:0 0 0 0 rgba(90,139,197,.5) !important;
}
@keyframes dotPulseBlue {
  0%{ box-shadow:0 0 0 0 rgba(90,139,197,.5) }
  70%{ box-shadow:0 0 0 8px rgba(90,139,197,0) }
  100%{ box-shadow:0 0 0 0 rgba(90,139,197,0) }
}
html.theme-blue .home-eyebrow::before{
  animation:dotPulseBlue 2.4s ease infinite !important;
}

/* Trust items icônes (color: var(--gold-deep) via variable, déjà OK) */

/* Side cards flottantes au hero (notifications "+248% conversions") */
html.theme-blue .hero-side-card-dot{
  background:linear-gradient(135deg,#fafbfc,#d6e0eb) !important;
  color:#3d6a9c !important;
}

/* Featured project visuels — gradients colorés laissés tels quels (clients ont leurs propres marques) */

/* Hero feature visuel frame & cas client visuel — laisser tel quel */

/* Fallback Firefox : crossfade rapide */
.theme-switching{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

/* View Transitions API (Chrome/Edge/Safari) */
::view-transition-old(root),
::view-transition-new(root){
  animation:none;mix-blend-mode:normal;
}
::view-transition-old(root){ z-index:1 }
::view-transition-new(root){ z-index:9999 }

/* Bouton toggle */
.theme-toggle{
  width:48px;height:28px;
  padding:0;
  border:1px solid var(--line-2);
  border-radius:99px;
  background:var(--cream-3);
  cursor:pointer;
  position:relative;flex-shrink:0;
  transition:background .3s ease, border-color .2s ease;
  display:inline-block;vertical-align:middle;
}
.theme-toggle:hover{ border-color:var(--gold-deep) }
.theme-toggle::after{
  content:'';
  position:absolute;
  left:3px;top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#f3cf88 0%,#c79a49 60%,#8a632b 100%);
  transition:left .35s cubic-bezier(.5,1.4,.5,1), background .35s ease;
  box-shadow:0 1px 3px rgba(42,31,21,.20);
}
html.theme-blue .theme-toggle::after{
  left:25px;
  background:linear-gradient(135deg,#7da4d4 0%,#5a8bc5 60%,#3d6a9c 100%);
}
/* Variante flottante (pages auth sans header nav) */
.theme-toggle-floating{
  position:fixed;
  top:20px;right:20px;
  z-index:1000;
  box-shadow:0 4px 12px rgba(42,31,21,.10);
}

/* Tooltip "Astuce" affiché 1 seule fois */
.theme-tip{
  position:fixed;
  z-index:1001;
  background:#1f2b3a;
  color:#fafbfc;
  padding:13px 16px;
  border-radius:12px;
  font-size:13px;line-height:1.45;
  display:flex;align-items:flex-start;gap:10px;
  opacity:0;
  transform:translateY(-10px) scale(.96);
  transition:opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1);
  box-shadow:0 16px 40px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15);
  pointer-events:auto;
  font-family:"Manrope",sans-serif;
  font-weight:500;
}
.theme-tip.show{ opacity:1;transform:translateY(0) scale(1) }
.theme-tip-arrow{
  position:absolute;
  top:-7px;
  left:var(--arrow-x, 50%);
  transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #1f2b3a;
}
.theme-tip-text{
  margin:0;flex:1;
  color:rgba(250,251,252,.92);
}
.theme-tip-close{
  background:transparent;border:0;
  color:rgba(250,251,252,.55);
  font-size:20px;line-height:1;
  padding:0 0 0 4px;cursor:pointer;
  font-family:inherit;
  margin-top:-2px;
  transition:color .15s ease;
}
.theme-tip-close:hover{ color:#fafbfc }

/* -------- UTILS -------- */
.flex{ display:flex }
.grid{ display:grid }
.items-center{ align-items:center }
.justify-between{ justify-content:space-between }
.gap-2{ gap:8px } .gap-3{ gap:12px } .gap-4{ gap:16px } .gap-6{ gap:24px } .gap-8{ gap:32px }
.mt-2{ margin-top:8px } .mt-4{ margin-top:16px } .mt-6{ margin-top:24px } .mt-8{ margin-top:32px } .mt-12{ margin-top:48px }
.mb-2{ margin-bottom:8px } .mb-4{ margin-bottom:16px } .mb-6{ margin-bottom:24px } .mb-8{ margin-bottom:32px } .mb-12{ margin-bottom:48px }
.text-center{ text-align:center }
.full{ width:100% }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* -------- RESPONSIVE -------- */
@media (max-width:720px){
  .section{ padding:80px 0 }
  .section-lg{ padding:100px 0 }
}

/* -------- REDUCED MOTION -------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1;transform:none }
}