/* Styles partages par les pages secondaires (support, conditions).
   Reprend le header du storefront pour garder la meme identite. */
:root{
  --bg:#06080d; --panel:rgba(14,22,34,.55);
  --line:rgba(56,189,248,.18); --line-strong:rgba(56,189,248,.45);
  --cyan:#22d3ee; --cyan-2:#38bdf8; --ice:#cffafe; --txt:#dbeafe; --muted:#5f7b96;
  --glow:0 0 18px rgba(34,211,238,.35);
  --radius:16px; --font:"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"Cascadia Code",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.7 var(--font);
  background-image:radial-gradient(ellipse at 50% -10%,rgba(34,211,238,.09),transparent 60%)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---- HEADER (identique au storefront) ---- */
header{position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(6,8,13,.92),rgba(6,8,13,.62));
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:70px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:1px;
  text-decoration:none;color:inherit}
.reactor{width:34px;height:34px;flex:none}
.logo .name{font-size:15px;color:var(--ice)}
.logo .name b{color:var(--cyan)}
.logo .tag{font:600 9px/1 var(--mono);color:var(--muted);letter-spacing:2px;margin-top:3px}
nav.links{display:flex;gap:24px;margin-left:8px}
nav.links a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.4px;
  position:relative;padding:6px 0;transition:.2s}
nav.links a:hover,nav.links a.on{color:var(--ice)}
nav.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:var(--glow)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.brand{height:56px;display:grid;place-items:center}
.brand img{height:56px;width:auto;display:block;filter:drop-shadow(0 0 9px rgba(34,211,238,.5))}
.langs{display:flex;gap:5px}
.langs button{width:34px;height:24px;border-radius:6px;cursor:pointer;padding:0;overflow:hidden;
  border:1px solid var(--line);background:none;opacity:.45;transition:.15s;display:grid;place-items:center}
.langs button svg{width:100%;height:100%;display:block;object-fit:cover}
.langs button:hover{opacity:.8}
.langs button.on{opacity:1;border-color:var(--line-strong);box-shadow:var(--glow)}

/* ---- CONTENU ---- */
.page{max-width:820px;padding-top:40px;padding-bottom:90px}
.back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--cyan);
  font:700 11px/1 var(--mono);letter-spacing:1px;margin-bottom:26px}
.back:hover{text-shadow:0 0 12px rgba(34,211,238,.5)}
h1{font-size:clamp(26px,4.6vw,36px);color:#fff;margin:0 0 8px;letter-spacing:-.5px}
.sub{font:700 11px/1 var(--mono);color:var(--muted);letter-spacing:1.4px;margin-bottom:26px}
.lead{font-size:16px;color:var(--txt);margin-bottom:26px}
h2{font-size:17px;color:var(--ice);margin:34px 0 10px;padding-top:20px;border-top:1px solid var(--line)}
p{margin:0 0 13px}
a{color:var(--cyan)}
ul{margin:0 0 13px;padding-left:20px}
li{margin-bottom:6px}
.note{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);
  padding:18px 20px;margin-bottom:34px}
.note b{color:var(--ice)}
.note p:last-child{margin:0}
.cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-2));color:#04121a;
  font:800 13px/1 var(--font);letter-spacing:.5px;padding:15px 22px;border-radius:12px;
  margin-bottom:10px}
.cta:hover{box-shadow:var(--glow)}
.foot{margin-top:50px;padding-top:20px;border-top:1px solid var(--line);
  font:600 10px/1.6 var(--mono);color:var(--muted);letter-spacing:1px;text-align:center}
@media(max-width:640px){nav.links{display:none}}
.legalnote{font:700 11px/1.5 var(--mono);color:var(--muted);letter-spacing:.6px;
  border-left:2px solid var(--line-strong);padding:8px 0 8px 14px;margin-bottom:30px}