/* DPS TAB — site produit. Thème sombre « scène », identité guitare (bleu + or). */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600;700&display=swap");

:root{
  --bg:#0b0e16; --bg-2:#0f1420; --surface:#141a27; --surface-2:#1a2130;
  --border:#252d3e; --border-strong:#333d52;
  --ink:#eef1f8; --ink-soft:#b0b9cc; --faint:#7c869c;
  --accent:#5f93f0; --accent-2:#8fb4f7;
  --gold:#e2b45a; --gold-ink:#f0cf8a;
  --radius:16px; --maxw:1080px;
  --shadow:0 2px 6px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-weight:450; line-height:1.6; letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--accent-2); text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.container{max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,32px)}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace}
[hidden]{display:none !important}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.head-inner{max-width:var(--maxw); margin:0 auto; padding:12px clamp(18px,4vw,32px);
  display:flex; align-items:center; gap:18px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:700}
.brand:hover{color:var(--ink)}
.brand img{width:34px; height:34px; border-radius:8px}
.brand-name{font-size:1.05rem; letter-spacing:.02em}
.nav{display:flex; align-items:center; gap:6px; margin-left:auto}
.navlink{color:var(--ink-soft); font-weight:500; font-size:.95rem; padding:8px 12px; border-radius:9px}
.navlink:hover{color:var(--ink); background:var(--surface)}
.navlink.is-active{color:var(--gold-ink)}
.lang{display:inline-flex; padding:3px; gap:2px; background:var(--surface); border:1px solid var(--border);
  border-radius:99px}
.lang button{font:inherit; font-size:.78rem; font-weight:600; color:var(--faint);
  background:transparent; border:0; border-radius:99px; padding:5px 11px; cursor:pointer; letter-spacing:.03em}
.lang button[aria-pressed="true"]{background:var(--surface-2); color:var(--gold-ink); box-shadow:inset 0 0 0 1px var(--border-strong)}
.nav-toggle{display:none; margin-left:auto; width:42px; height:38px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); cursor:pointer; padding:0}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink); margin:0 auto; position:relative; transition:transform .2s, opacity .2s}
.nav-toggle span::before{position:absolute; top:-6px}
.nav-toggle span::after{position:absolute; top:6px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(52px,9vw,104px) 0 clamp(44px,7vw,80px)}
.hero::before{content:""; position:absolute; inset:-18% 0 auto 50%; transform:translateX(-50%);
  width:min(900px,132%); height:580px; z-index:0; pointer-events:none;
  background:radial-gradient(44% 56% at 50% 38%, rgba(95,147,240,.20), transparent 70%),
             radial-gradient(36% 46% at 64% 58%, rgba(226,180,90,.14), transparent 72%);
  filter:blur(8px)}
.hero .container{position:relative; z-index:1}
.hero-grid{display:grid; gap:clamp(28px,5vw,56px); align-items:center; grid-template-columns:1fr}
.hero-copy{text-align:center}
.eyebrow{display:inline-flex; align-items:center; gap:.6ch; font-family:"IBM Plex Mono",monospace;
  font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  margin:0 0 16px}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--gold)}
h1{font-family:"Fraunces", Georgia, serif; font-optical-sizing:auto; font-weight:600}
.hero-copy h1{font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.03; letter-spacing:-.025em;
  text-wrap:balance; margin:0 auto 18px; max-width:15ch}
.hero-copy .sub{max-width:52ch; margin:0 auto 26px; color:var(--ink-soft); font-size:clamp(1.02rem,2.2vw,1.18rem)}
.store-note{display:inline-flex; align-items:center; gap:9px; font-size:.9rem; color:var(--faint);
  border:1px solid var(--border); border-radius:99px; padding:8px 16px; background:var(--surface)}
.store-note b{color:var(--ink)}
.store-note .pulse{width:8px; height:8px; border-radius:50%; background:var(--gold)}
.hero-visual{display:flex; justify-content:center}
.phone{position:relative; width:min(298px,72vw); aspect-ratio:300/652; padding:9px;
  border-radius:42px; background:linear-gradient(158deg,#232c3e,#0c111b);
  border:1px solid var(--border-strong);
  box-shadow:0 32px 72px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05)}
.phone img{width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:33px;
  display:block; background:#000}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.06fr .94fr}
  .hero-copy{text-align:left}
  .hero-copy h1{margin-inline:0; font-size:clamp(2.6rem,4.4vw,3.8rem)}
  .hero-copy .sub{margin-inline:0}
}

/* ---------- sections ---------- */
.section{padding:clamp(44px,8vw,88px) 0}
.section-head{text-align:center; max-width:46ch; margin:0 auto clamp(32px,5vw,52px)}
.section-head h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(1.7rem,4vw,2.5rem);
  letter-spacing:-.02em; line-height:1.08; text-wrap:balance; margin:0 0 12px}
.section-head p{color:var(--ink-soft); margin:0; font-size:1.05rem}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px}

/* ---------- features ---------- */
.features{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr)); gap:16px}
.feature{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 22px; transition:transform .18s ease, border-color .18s ease, background .18s ease}
.feature:hover{transform:translateY(-3px); border-color:var(--border-strong); background:var(--surface-2)}
.feature-icon{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(150deg, rgba(95,147,240,.20), rgba(226,180,90,.14));
  border:1px solid var(--border-strong)}
.feature-icon svg{width:23px; height:23px; color:var(--gold-ink); stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.feature-icon svg .dot{fill:currentColor; stroke:none}
.feature h3{font-size:1.12rem; font-weight:600; letter-spacing:-.01em; margin:0 0 7px}
.feature p{margin:0; color:var(--ink-soft); font-size:.96rem}

/* ---------- privacy band ---------- */
.band{background:linear-gradient(180deg, var(--bg-2), var(--bg)); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.band-inner{max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,68px) clamp(18px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:22px; align-items:center}
@media (min-width:760px){ .band-inner{grid-template-columns:1.3fr 1fr} }
.band h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(1.6rem,3.6vw,2.2rem);
  letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance}
.band p{color:var(--ink-soft); margin:0}
.band-points{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.band-points li{display:flex; gap:11px; align-items:flex-start; color:var(--ink)}
.band-points svg{width:20px; height:20px; flex:none; margin-top:2px; stroke:var(--gold-ink); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--border); background:var(--bg-2)}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:clamp(32px,5vw,48px) clamp(18px,4vw,32px);
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start}
.foot-brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600}
.foot-brand img{width:30px; height:30px; border-radius:7px}
.foot-tag{color:var(--faint); font-size:.9rem; margin:8px 0 0; max-width:34ch}
.foot-nav{display:flex; gap:20px; flex-wrap:wrap}
.foot-nav a{color:var(--ink-soft); font-size:.95rem}
.foot-nav a:hover{color:var(--ink)}
.foot-legal{color:var(--faint); font-size:.82rem; width:100%; border-top:1px solid var(--border);
  padding-top:18px; margin-top:4px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* ---------- legal pages ---------- */
.legal{padding:clamp(40px,7vw,72px) 0 clamp(56px,8vw,88px)}
.legal .container{max-width:720px}
.legal h1{font-size:clamp(2rem,5vw,2.8rem); text-align:left; margin:0 0 8px; max-width:none}
.legal .updated{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--faint); margin:0 0 30px}
.legal .summary{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 22px; margin:0 0 32px}
.legal .summary .lead{display:block; font-size:.74rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); margin-bottom:5px}
.legal .summary p{margin:0; color:var(--ink)}
.legal h2{font-size:1.16rem; font-weight:600; letter-spacing:-.01em; margin:0 0 9px; padding-top:26px;
  border-top:1px solid var(--border)}
.legal section:first-of-type h2{border-top:0; padding-top:0}
.legal section{margin-bottom:26px}
.legal p{color:var(--ink-soft); margin:0 0 12px}
.legal p strong{color:var(--ink); font-weight:600}
.legal code{font-family:"IBM Plex Mono",monospace; font-size:.86em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:5px; padding:.05em .4em; color:var(--gold-ink)}
.fill{background:rgba(95,147,240,.16); color:var(--accent-2); border-radius:5px; padding:.05em .45em;
  font-weight:600; white-space:nowrap}

/* ---------- responsive header ---------- */
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:2px; margin:0; padding:12px clamp(18px,4vw,32px) 18px; background:var(--bg-2);
    border-bottom:1px solid var(--border); box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s}
  .site-head.nav-open .nav{transform:none; opacity:1; pointer-events:auto}
  .navlink{padding:11px 12px}
  .lang{align-self:flex-start; margin-top:8px}
  .head-inner{position:relative}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}