/* ==========================================================================
   Beaubita Concept — feuille de style commune (v2, 2026)
   Palette or/bronze du logo · Outfit (titres) + Work Sans (texte)
   ========================================================================== */
:root{
  --bg:#0f0c07; --bg-2:#14110b; --panel:#1b160e; --panel-2:#241d13; --panel-3:#2e2518;
  --gold-1:#f0d9b0; --gold-2:#d8b075; --gold-3:#b98a52; --bronze:#8a6d4f;
  --text:#f4efe6; --text-2:#e0d7c8; --muted:#b2a38a; --line:#33291c; --line-2:#4a3c29;
  --grad-gold:linear-gradient(100deg,#f6e3bf 0%,#d8b075 45%,#b98a52 100%);
  --radius:18px; --radius-sm:12px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --font-display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:max(20px,env(safe-area-inset-left));
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:1rem; line-height:1.65; overflow-x:hidden;
}
/* Halo doré + grain discret en fond */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(216,176,117,.13), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(185,138,82,.08), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg) 40%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:var(--gold-2); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--gold-1); }
:focus-visible{ outline:2px solid var(--gold-1); outline-offset:3px; border-radius:8px; }
::selection{ background:rgba(216,176,117,.35); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text); margin:0 0 .5em; line-height:1.1; letter-spacing:-.02em; }
h1{ font-size:clamp(2.6rem,6.4vw,5.2rem); font-weight:800; }
h2{ font-size:clamp(2rem,4.2vw,3.2rem); font-weight:700; }
h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-2); }
.gold{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--gold-2); color:#1a140b; padding:10px 14px; border-radius:10px; font-weight:700; }
.skip:focus{ top:12px; }

.wrap{ max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,10vw,128px); position:relative; }
.section.tight{ padding-block:clamp(40px,6vw,72px); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  color:var(--gold-2); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--grad-gold); }
.head{ max-width:680px; margin-bottom:clamp(36px,5vw,56px); }
.head.center{ margin-inline:auto; }
.head.center .eyebrow::after{ content:""; width:28px; height:1px; background:var(--grad-gold); }
.head p{ color:var(--muted); font-size:1.08rem; margin:0; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted); max-width:600px; }
svg.i{ width:20px; height:20px; flex:none; }

/* ---------- Boutons ---------- */
.btn{
  --b:var(--line-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 24px; border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:1rem;
  border:1px solid var(--b); color:var(--text); background:rgba(255,255,255,.02); cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .25s var(--ease), border-color .25s, background .25s, color .25s;
}
.btn:hover{ transform:translateY(-2px); color:var(--text); --b:var(--gold-3); background:rgba(216,176,117,.06); }
.btn svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
.btn:hover svg.arrow{ transform:translateX(3px); }
.btn-primary{ background:var(--grad-gold); color:#1d160c; border-color:transparent; box-shadow:0 10px 30px -10px rgba(216,176,117,.55); }
.btn-primary:hover{ color:#1d160c; background:var(--grad-gold); box-shadow:0 16px 40px -12px rgba(216,176,117,.7); }
.btn-primary::after{ /* reflet qui balaie le bouton */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---------- En-tête flottant ---------- */
.site-header{ position:sticky; top:0; z-index:60; padding:12px var(--gutter) 0; }
.nav-shell{
  max-width:1200px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 8px 8px 16px; border-radius:999px; border:1px solid rgba(74,60,41,.6);
  background:rgba(20,16,10,.62); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 40px -20px rgba(0,0,0,.8);
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.brand img{ height:34px; width:auto; }
.brand span{ font-family:var(--font-display); font-weight:700; letter-spacing:.14em; font-size:.95rem; }
.brand:hover{ color:var(--text); }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:.95rem; padding:9px 14px; border-radius:999px;
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.nav-links a[aria-current="page"]{ color:var(--gold-1); background:rgba(216,176,117,.1); }
.nav-links .btn{ min-height:42px; padding:0 18px; font-size:.92rem; margin-left:6px; }
.nav-links .btn-primary{ color:#1d160c; }
.burger{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span, .burger span::before, .burger span::after{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .3s var(--ease), background .2s; }
.burger span::before, .burger span::after{ content:""; position:absolute; left:0; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:960px){
  .burger{ display:inline-flex; }
  .nav-links{
    position:absolute; left:var(--gutter); right:var(--gutter); top:calc(100% + 8px);
    flex-direction:column; align-items:stretch; gap:4px; padding:12px; border-radius:22px; max-height:calc(100svh - 96px); overflow-y:auto; overscroll-behavior:contain;
    background:rgba(20,16,10,.96); border:1px solid var(--line-2); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:none; }
  .nav-links a{ padding:13px 16px; font-size:1.05rem; }
  .nav-links .btn{ margin:6px 0 0; min-height:50px; }
}

/* ---------- Hero d'accueil + scène 3D ---------- */
.hero{ position:relative; min-height:min(900px,calc(100svh - 70px)); display:flex; align-items:center; padding-block:40px 80px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:24px; width:100%; }
.hero-grid > *{ min-width:0; }
.hero h1{ margin-bottom:24px; }
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; margin-bottom:26px;
  background:rgba(216,176,117,.08); border:1px solid rgba(216,176,117,.22); color:var(--gold-1); font-size:.85rem; font-weight:500;
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:#7ee0a1; box-shadow:0 0 0 4px rgba(126,224,161,.18); }
.stage{ position:relative; aspect-ratio:1/1; width:100%; max-width:640px; margin-inline:auto; }
.stage canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.stage .fallback{ position:absolute; inset:12%; width:76%; height:auto; object-fit:contain; filter:drop-shadow(0 20px 40px rgba(216,176,117,.25)); }
.stage.ready .fallback{ display:none; }
.stage-hud{
  position:absolute; left:6%; bottom:8%; display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:14px;
  background:rgba(20,16,10,.6); border:1px solid var(--line-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display); font-size:.78rem; color:var(--muted); min-width:170px;
}
.stage-hud b{ color:var(--gold-1); font-weight:600; font-variant-numeric:tabular-nums; }
.stage-hud .bar{ height:4px; border-radius:4px; background:var(--panel-3); overflow:hidden; margin-top:4px; }
.stage-hud .bar i{ display:block; height:100%; width:0; background:var(--grad-gold); }
.scroll-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:var(--muted); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint::after{ content:""; width:1px; height:34px; background:linear-gradient(var(--gold-2),transparent); animation:drip 2s var(--ease) infinite; }
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- Bandeau défilant ---------- */
.marquee{ border-block:1px solid var(--line); background:rgba(27,22,14,.6); overflow:hidden; padding-block:18px; }
.marquee-track{ display:flex; gap:48px; width:max-content; animation:marquee 38s linear infinite; }
.marquee span{ font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.5rem); font-weight:600; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:48px; }
.marquee span::after{ content:"✦"; color:var(--gold-3); font-size:.8em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Cartes (avec inclinaison 3D) ---------- */
.card{
  position:relative; background:linear-gradient(180deg,rgba(36,29,19,.9),rgba(27,22,14,.9)); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px; transition:border-color .3s, box-shadow .3s; transform-style:preserve-3d;
}
.card:hover{ border-color:var(--line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
.card p{ color:var(--muted); margin:0; }
.card h3{ margin-bottom:10px; }
[data-tilt]{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease), border-color .3s, box-shadow .3s; will-change:transform; }
[data-tilt].tilting{ transition:transform .08s linear, border-color .3s, box-shadow .3s; }
[data-tilt]::after{ /* reflet qui suit la souris */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(240,217,176,.10), transparent 45%);
}
[data-tilt]:hover::after{ opacity:1; }
.icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  background:linear-gradient(145deg,var(--panel-3),var(--panel)); border:1px solid var(--line-2); color:var(--gold-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transform:translateZ(30px);
}
.icon svg{ width:24px; height:24px; }

/* Grille "bento" */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.bento > *{ grid-column:span 2; }
.bento .w3{ grid-column:span 3; }
.bento .w4{ grid-column:span 4; }
.bento-2 > *{ grid-column:span 3; }
.bento .feature-xl{ display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; overflow:hidden; }
.bento .feature-xl h3{ font-size:1.6rem; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chip{ font-size:.8rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-2); background:rgba(255,255,255,.02); }

/* ---------- Étapes ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step; position:relative; }
.steps.s3{ grid-template-columns:repeat(3,1fr); }
.step{ position:relative; padding:28px 24px; border-radius:var(--radius); border:1px solid var(--line); background:rgba(27,22,14,.7); }
.step .num{
  font-family:var(--font-display); font-size:3rem; font-weight:800; line-height:1; margin-bottom:18px;
  background:linear-gradient(180deg,var(--gold-2),rgba(216,176,117,.15)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step p{ color:var(--muted); margin:0; font-size:.95rem; }

/* ---------- Galerie ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.work{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.work img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease), filter .5s; filter:saturate(.92); }
.work:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.work .cap{
  position:absolute; inset:auto 0 0 0; padding:60px 20px 18px; color:var(--text);
  background:linear-gradient(180deg,transparent,rgba(10,8,5,.92));
}
.work .cap h3{ margin:0 0 2px; font-size:1.1rem; }
.work .cap p{ margin:0; font-size:.85rem; color:var(--muted); }
.work .tag{ position:absolute; top:14px; left:14px; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(15,12,7,.7); border:1px solid var(--line-2); color:var(--gold-1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.work:hover{ color:var(--text); }

/* ---------- Section logiciel / split ---------- */
.split{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.split > *{ min-width:0; }
.contact-split{ grid-template-columns:1.25fr 1fr; align-items:start; }
.checks{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-2); }
.checks svg{ width:20px; height:20px; color:var(--gold-2); flex:none; margin-top:3px; }

/* Maquette du logiciel */
.mock-wrap{ perspective:1400px; }
.mock{
  background:linear-gradient(180deg,#221c13,#17130c); border:1px solid var(--line-2); border-radius:20px; overflow:hidden;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9), 0 0 80px -30px rgba(216,176,117,.25);
  transform:rotateY(-12deg) rotateX(6deg); transition:transform .6s var(--ease);
}
.mock-wrap:hover .mock{ transform:rotateY(-4deg) rotateX(2deg); }
.mock-bar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); background:#1a150e; }
.mock-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block; }
.mock-bar em{ margin-left:10px; font-style:normal; font-size:.72rem; color:var(--muted); }
.mock-tabs{ display:flex; gap:4px; padding:10px 14px 0; border-bottom:1px solid var(--line); overflow:hidden; }
.mock-tabs span{ font-size:.74rem; font-weight:600; color:var(--muted); padding:7px 10px; border-radius:8px 8px 0 0; white-space:nowrap; }
.mock-tabs span.on{ color:var(--gold-1); background:var(--panel-2); border:1px solid var(--line); border-bottom:none; }
.mock-body{ padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mock-body > *{ min-width:0; }
.mock-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px; }
.mock-title{ font-family:var(--font-display); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); font-weight:700; margin-bottom:8px; }
.mrow{ display:flex; justify-content:space-between; gap:8px; font-size:.8rem; padding:5px 0; border-bottom:1px dashed #352b1d; color:var(--text-2); }
.mrow:last-child{ border-bottom:0; }
.mrow b{ font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.swatch{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.mock-total{ grid-column:1/-1; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; }
.mock-total .lbl{ font-size:.74rem; color:var(--muted); }
.price{ font-family:var(--font-display); font-size:2.1rem; font-weight:800; line-height:1.1; }
.costbar{ display:flex; width:100%; height:10px; border-radius:6px; overflow:hidden; }
.costbar span{ display:block; height:100%; }
.mock-note{ font-size:.75rem; color:var(--muted); text-align:center; margin-top:14px; }

/* ---------- En-tête de page intérieure + empilement 3D ---------- */
.page-hero{ padding-block:clamp(56px,9vw,110px) clamp(40px,6vw,72px); position:relative; overflow:hidden; }
.page-hero-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center; }
.page-hero-grid > *{ min-width:0; }
.page-hero h1{ font-size:clamp(2.4rem,5.4vw,4.4rem); }
.layers{ position:relative; height:260px; perspective:900px; display:flex; align-items:center; justify-content:center; }
.layers .stack{ position:relative; width:170px; height:170px; transform-style:preserve-3d; transform:rotateX(62deg) rotateZ(-38deg); animation:spin 18s linear infinite; }
.layers .stack i{
  position:absolute; inset:0; border-radius:32px; border:1px solid rgba(240,217,176,.45);
  background:linear-gradient(135deg,rgba(240,217,176,.22),rgba(185,138,82,.06));
  box-shadow:0 0 30px rgba(216,176,117,.08) inset;
  transform:translateZ(calc(var(--i) * 14px)) scale(calc(1 - var(--i) * .045));
  animation:rise 3.6s var(--ease) infinite; animation-delay:calc(var(--i) * .12s);
}
.layers .stack i:last-child{ background:var(--grad-gold); opacity:.9; border-color:transparent; }
@keyframes spin{ to{ transform:rotateX(62deg) rotateZ(322deg); } }
@keyframes rise{ 0%,100%{ translate:0 0 0; } 50%{ translate:0 0 6px; } }

/* ---------- Bloc d'appel à l'action ---------- */
.cta{
  position:relative; overflow:hidden; text-align:center; border-radius:28px; padding:clamp(48px,8vw,96px) 24px;
  border:1px solid var(--line-2);
  background:radial-gradient(700px 320px at 50% 0%, rgba(216,176,117,.22), transparent 70%), linear-gradient(180deg,var(--panel-2),var(--panel));
}
.cta::before{ /* grille en perspective */
  content:""; position:absolute; left:-20%; right:-20%; bottom:-40%; height:80%; z-index:0; opacity:.35;
  background-image:linear-gradient(rgba(216,176,117,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(216,176,117,.25) 1px,transparent 1px);
  background-size:48px 48px; transform:perspective(500px) rotateX(62deg);
  mask-image:linear-gradient(180deg,transparent,#000 60%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);
}
.cta > *{ position:relative; z-index:1; }
.cta p{ color:var(--muted); max-width:560px; margin-inline:auto; font-size:1.08rem; }
.cta .btn-row{ justify-content:center; }

/* ---------- Formulaires ---------- */
.form{ display:grid; gap:18px; }
.field label{ display:block; font-size:.88rem; font-weight:500; color:var(--text-2); margin-bottom:8px; }
.field .opt{ color:var(--muted); font-weight:400; }
input, textarea, select{
  width:100%; font:inherit; font-size:16px; color:var(--text); background:rgba(15,12,7,.6);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:14px 16px; outline:none; transition:border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder{ color:#7d705c; }
input:focus, textarea:focus, select:focus{ border-color:var(--gold-2); box-shadow:0 0 0 4px rgba(216,176,117,.14); }
textarea{ min-height:150px; resize:vertical; }
.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.contact-list a, .contact-list div{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:rgba(27,22,14,.7); color:var(--text); transition:border-color .2s, transform .2s var(--ease);
}
.contact-list a:hover{ border-color:var(--gold-3); transform:translateX(4px); color:var(--text); }
.contact-list small{ display:block; color:var(--muted); font-size:.78rem; }
.contact-list .icon{ width:42px; height:42px; margin:0; border-radius:12px; transform:none; }
.contact-list .icon svg{ width:20px; height:20px; }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin-inline:auto; display:grid; gap:12px; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(27,22,14,.7); padding:0 22px; transition:border-color .2s; }
.faq details[open]{ border-color:var(--line-2); }
.faq summary{ cursor:pointer; list-style:none; padding:20px 0; font-family:var(--font-display); font-weight:600; font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:20px; height:20px; color:var(--gold-2); flex:none; transition:transform .3s var(--ease); }
.faq details[open] summary svg{ transform:rotate(45deg); }
.faq details p{ color:var(--muted); margin:0 0 20px; }

/* ---------- Texte long (mentions légales) ---------- */
.prose{ max-width:780px; }
.prose h2{ font-size:1.5rem; margin-top:2.2em; }
.prose p, .prose li{ color:var(--text-2); }
.prose ul{ padding-left:1.2em; }
.prose .box{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:rgba(27,22,14,.7); }
.prose .box p{ margin:.3em 0; }

/* ---------- Sous-menu "Services" ---------- */
.nav-dd{ position:relative; }
.nav-dd > button{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:.95rem; padding:9px 14px; border-radius:999px; transition:color .2s, background .2s;
}
.nav-dd > button:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.nav-dd > button.active{ color:var(--gold-1); background:rgba(216,176,117,.1); }
.nav-dd > button svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.nav-dd.open > button svg{ transform:rotate(180deg); }
.dd-menu{
  position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0; min-width:290px; padding:8px; border-radius:18px;
  background:rgba(20,16,10,.97); border:1px solid var(--line-2); box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s var(--ease), visibility .2s;
}
.nav-dd.open .dd-menu{ opacity:1; visibility:visible; transform:none; }
.dd-menu a{ display:flex !important; flex-direction:column; gap:2px; padding:11px 14px !important; border-radius:12px !important; }
.dd-menu a small{ color:var(--muted); font-family:var(--font-body); font-size:.8rem; font-weight:400; }
.dd-menu a.all{ border-top:1px solid var(--line); margin-top:4px; border-radius:0 0 12px 12px !important; color:var(--gold-2); }
@media (min-width:961px) and (hover:hover){ .nav-dd:hover .dd-menu{ opacity:1; visibility:visible; transform:none; } }
@media (max-width:960px){
  .nav-dd > button{ width:100%; justify-content:space-between; padding:13px 16px; font-size:1.05rem; }
  .dd-menu{ position:static; translate:none; min-width:0; box-shadow:none; border:0; background:none; padding:0 0 0 10px; display:none; opacity:1; visibility:visible; transform:none; }
  .nav-dd.open .dd-menu{ display:block; }
}

/* ---------- Carte entièrement cliquable ---------- */
.card-link{ color:inherit; }
.card-link::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; }
.card-link:hover{ color:inherit; }
.more{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:var(--gold-2); font-family:var(--font-display); font-weight:600; font-size:.92rem; }
.more svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.card:hover .more svg{ transform:translateX(4px); }

/* ---------- Onglets (sous-navigation du logiciel) ---------- */
.subnav{ display:flex; gap:6px; flex-wrap:wrap; padding:6px; border-radius:999px; border:1px solid var(--line); background:rgba(27,22,14,.7); width:max-content; max-width:100%; margin-top:36px; }
.subnav a{ padding:9px 16px; border-radius:999px; color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:.92rem; }
.subnav a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.subnav a[aria-current="page"]{ background:var(--grad-gold); color:#1d160c; }
@media (max-width:560px){ .subnav{ border-radius:18px; width:100%; } .subnav a{ flex:1 1 auto; text-align:center; } }

/* ---------- Fil d'Ariane ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.85rem; color:var(--muted); margin-bottom:18px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--gold-1); }
.crumbs span[aria-hidden]{ opacity:.5; }

/* ---------- Page projet ---------- */
.project{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.project > *{ min-width:0; }
.project-media{ position:sticky; top:100px; border-radius:24px; overflow:hidden; border:1px solid var(--line-2); background:var(--panel); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.project-media img{ width:100%; height:auto; }
.specs{ list-style:none; padding:0; margin:28px 0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.specs li{ display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(27,22,14,.6); }
.specs li:last-child{ border-bottom:0; }
.specs span{ color:var(--muted); }
.specs b{ font-weight:600; text-align:right; }
.colors{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.colors i{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:block; }
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pager a{ display:flex; flex-direction:column; gap:4px; padding:22px 24px; border-radius:var(--radius); border:1px solid var(--line); background:rgba(27,22,14,.7); color:var(--text); transition:border-color .2s, transform .25s var(--ease); }
.pager a:hover{ border-color:var(--gold-3); color:var(--text); transform:translateY(-2px); }
.pager small{ color:var(--muted); font-size:.8rem; }
.pager a.next{ text-align:right; }
.pager b{ font-family:var(--font-display); font-size:1.15rem; }
@media (max-width:860px){ .project{ grid-template-columns:1fr; } .project-media{ position:static; } }
@media (max-width:560px){ .pager{ grid-template-columns:1fr; } .pager a.next{ text-align:left; } }

/* ---------- Liste "à nous envoyer" ---------- */
.need{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; list-style:none; padding:0; margin:0; }
.need li{ display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:var(--radius); border:1px solid var(--line); background:rgba(27,22,14,.7); }
.need li .icon{ width:42px; height:42px; margin:0; transform:none; }
.need li .icon svg{ width:20px; height:20px; }
.need b{ display:block; font-family:var(--font-display); font-weight:600; margin-bottom:2px; }
.need p{ margin:0; color:var(--muted); font-size:.92rem; }
@media (max-width:640px){ .need{ grid-template-columns:1fr; } }

/* ---------- Pages fonctionnalités du logiciel ---------- */
.paper{ background:#fbf8f2; color:#1a1a1a; border-radius:14px; padding:26px 26px 22px; box-shadow:0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(216,176,117,.25); font-size:.82rem; transform:rotateY(-10deg) rotateX(5deg); transition:transform .6s var(--ease); }
.mock-wrap:hover .paper{ transform:rotateY(-3deg) rotateX(2deg); }
.paper h4{ font-family:var(--font-display); color:#b8935f; letter-spacing:.08em; font-size:1rem; margin:0; }
.paper .psub{ color:#777; font-size:.75rem; margin:2px 0 14px; }
.paper h5{ font-family:var(--font-display); font-size:.78rem; color:#8a6d4f; border-bottom:2px solid #d8b075; padding-bottom:3px; margin:14px 0 6px; }
.paper .pr{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid #ece4d6; }
.paper .pr b{ font-weight:600; font-variant-numeric:tabular-nums; }
.paper .ptot{ display:flex; justify-content:space-between; margin-top:10px; padding:10px 12px; border-radius:8px; background:#f3ead9; font-weight:700; font-family:var(--font-display); }
.paper .pfoot{ color:#888; font-size:.68rem; margin-top:14px; text-align:center; }
.paper .chk{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.badge-low{ font-size:.66rem; font-weight:600; padding:2px 7px; border-radius:999px; background:rgba(239,68,68,.15); color:#ff8a80; margin-left:6px; }
.badge-on{ font-size:.66rem; font-weight:600; padding:2px 7px; border-radius:999px; background:rgba(126,224,161,.14); color:#8fe8b0; margin-left:6px; }
.formula{ display:grid; gap:10px; }
.formula div{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--radius-sm); border:1px solid var(--line); background:rgba(27,22,14,.7); }
.formula .op{ flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#1d160c; background:var(--grad-gold); }
.formula p{ margin:0; color:var(--text-2); }
.formula b{ color:var(--gold-1); font-weight:600; }
@media (max-width:860px){ .paper{ transform:none; } }

/* ---------- Pied de page ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,80px); padding:clamp(48px,7vw,80px) 0 calc(28px + env(safe-area-inset-bottom)); }
.foot-grid{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:32px; }
.foot-grid h4{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); margin-bottom:16px; font-weight:600; }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.foot-grid a{ color:var(--muted); font-size:.95rem; }
.foot-grid a:hover{ color:var(--text); }
.foot-brand p{ color:var(--muted); max-width:320px; font-size:.95rem; }
.wordmark{ font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,13vw,10.5rem); line-height:.9; letter-spacing:-.04em; margin:clamp(40px,6vw,72px) 0 24px; text-align:center; white-space:nowrap;
  background:linear-gradient(180deg,rgba(216,176,117,.35),rgba(216,176,117,0) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); padding-top:22px; }
.foot-bottom a{ color:var(--muted); }

/* ---------- Apparition au défilement ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento > *, .bento .w3, .bento .w4{ grid-column:span 1; }
  .bento .feature-xl{ grid-column:1/-1; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .hero{ min-height:auto; padding-block:24px 64px; }
  .hero-grid, .split, .page-hero-grid{ grid-template-columns:1fr; }
  .stage{ max-width:440px; order:-1; margin-bottom:-10px; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .steps.s3{ grid-template-columns:1fr; }
  .layers{ display:none; }
  .mock{ transform:none; }
  .scroll-hint{ display:none; }
}
@media (max-width:560px){
  .bento, .gallery, .steps{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .mock-body{ grid-template-columns:1fr; }
  .brand span{ font-size:.82rem; letter-spacing:.1em; }
  .card{ padding:24px; }
  .stage-hud{ display:none; }
}

/* Mouvement réduit : on fige tout */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
}

/* Attribut hidden toujours respecté */
[hidden]{ display:none !important; }

/* Lien discret vers l'administration (pied de page) */
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
.admin-link{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); }
.admin-link:hover{ border-color:var(--gold-3); color:var(--gold-1) !important; }
.admin-link svg{ width:14px; height:14px; }

/* ---------- Zone de dépôt de fichier (contact, admin) ---------- */
.drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; min-height:130px; border:1.5px dashed var(--line-2); border-radius:var(--radius-sm); padding:18px; cursor:pointer; color:var(--muted); transition:border-color .2s, background .2s; position:relative; overflow:hidden; background:rgba(15,12,7,.4); }
.drop:hover, .drop.over, .drop:focus-within{ border-color:var(--gold-2); background:rgba(216,176,117,.05); }
.drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; padding:0; border:0; }
.drop svg{ width:28px; height:28px; color:var(--gold-2); }
.drop.has-file{ border-style:solid; border-color:var(--gold-3); color:var(--text); }
.drop.error{ border-color:#ef4444; color:#ffa49b; }
.hint{ font-size:.8rem; color:var(--muted); margin:6px 0 0; }