/* ================================================================
   Helvetic Assist — Feuille de styles globale
   Thème : Helvetic Editorial (pin + ivoire + laiton + Fraunces)
   ================================================================ */

:root{
  --pine:#1a2e3b; --pine-2:#2d4a5e;
  --ivory:#ffffff; --ivory-2:#f8fafc;
  --brass:#c8a84b; --brass-2:#b08e36;
  --ink:#1a2e3b; --clay:#c8a84b;
  --paper:#ffffff; --rule:#e2e8f0;
  --mute:#64748b;
  --shadow:0 1px 0 rgba(26,46,59,.04), 0 24px 48px -24px rgba(26,46,59,.18);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
@media (max-width:720px){ .wrap{padding:0 20px} }

.display{
  font-family:"Helvetica Neue", Arial, sans-serif;
  
  font-weight:380; letter-spacing:-.02em; line-height:.95;
}
.italic{font-style:italic; }
.label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-2); font-weight:500;
}
.mono{font-family:"JetBrains Mono",monospace}

/* PROMO BAND */
.promo{
  background:var(--pine); color:var(--ivory);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  text-align:center; padding:10px 16px;
  font-family:"JetBrains Mono",monospace; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.promo b{color:var(--brass); font-weight:500; margin:0 10px}

/* NAV */
nav.top{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
nav.top .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:24px}
.brand{display:flex; align-items:center; gap:14px; flex-shrink:0}
.brand img{height:84px; width:156px; max-width:none; display:block}
@media (max-width:720px){ .brand img{height:64px; width:119px} }
.navlinks{display:flex; gap:26px; align-items:center}
.navlinks a{font-size:14px; color:var(--pine); opacity:.8}
.navlinks a:hover{opacity:1}
.navlinks a.active{opacity:1; color:var(--brass-2)}
.lang{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em;
  border:1px solid var(--rule); border-radius:999px;
  padding:6px 10px; color:var(--pine);
}
.lang a{margin:0 2px}
.lang b{font-weight:500; color:var(--brass-2)}
.lang span{opacity:.35; margin:0 4px}
@media (max-width:960px){ .navlinks a:not(.cta-nav), nav.top .lang{display:none} }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:2px;
  font-size:14px; letter-spacing:.02em;
  background:var(--pine); color:var(--ivory);
  border:1px solid var(--pine); cursor:pointer;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.btn:hover{background:var(--pine-2); transform:translateY(-1px); box-shadow:0 12px 24px -14px rgba(19,53,42,.6)}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn.ghost{background:transparent; color:var(--pine)}
.btn.ghost:hover{background:var(--pine); color:var(--ivory)}
.btn.brass{background:var(--brass); border-color:var(--brass); color:var(--ink)}
.btn.brass:hover{background:var(--brass-2); color:var(--ivory)}
.btn.sm{padding:10px 16px; font-size:13px}

/* HERO */
header.hero{position:relative; padding:56px 0 40px; overflow:hidden}
.cross-wm{position:absolute; right:-40px; top:40px; width:520px; height:520px; opacity:.045; pointer-events:none}
.cross-wm svg{width:100%;height:100%}
.mountain{position:absolute; left:0; right:0; bottom:-1px; height:220px; pointer-events:none}
.mountain svg{width:100%; height:100%}
.mountain path{
  fill:none; stroke:var(--pine); stroke-width:1.2;
  stroke-dasharray:3000; stroke-dashoffset:3000;
  animation:draw 2.6s .4s cubic-bezier(.2,.7,.2,1) forwards; opacity:.18;
}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:end; margin-top:40px}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:40px; margin-top:20px} }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px; border:1px solid var(--rule); border-radius:999px;
  background:color-mix(in srgb,var(--ivory) 50%,transparent);
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--clay);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--clay) 25%,transparent);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--clay) 25%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--clay) 0%,transparent)}
}
h1.claim{font-size:clamp(52px,8vw,116px); margin:22px 0 12px; color:var(--pine)}
h1.claim .ital{font-style:italic; color:var(--brass-2); }
h1.claim .und{background:linear-gradient(transparent 65%,color-mix(in srgb,var(--brass) 45%,transparent) 65%); padding:0 .08em}
.hero-lead{max-width:520px; font-size:18px; color:var(--pine); opacity:.85; margin:8px 0 28px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-meta{
  display:flex; gap:28px; margin-top:40px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--rule); max-width:540px;
}
.hero-meta .item .label{display:block; margin-bottom:4px}
.hero-meta .item .val{
  font-family:"Helvetica Neue", Arial, sans-serif; font-size:22px; color:var(--pine);
  
}

/* ELIG CARD */
.elig{
  background:var(--ivory); border:1px solid var(--rule); border-radius:4px;
  padding:28px 28px 24px; box-shadow:var(--shadow); position:relative;
}
.elig::before{content:""; position:absolute; inset:6px; border:1px solid color-mix(in srgb,var(--brass) 35%,transparent); border-radius:2px; pointer-events:none}
.elig h3{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:26px; margin:8px 0 4px; color:var(--pine); letter-spacing:-.01em}
.elig p.sub{color:var(--mute); font-size:13px; margin:0 0 18px}
.field{margin-bottom:14px}
.field label{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--pine); margin-bottom:6px}
.field label .val{font-family:"JetBrains Mono",monospace; color:var(--brass-2)}
.field input[type="range"]{-webkit-appearance:none; width:100%; height:4px; border-radius:999px; background:var(--rule); outline:none}
.field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--pine); border:3px solid var(--ivory); box-shadow:0 2px 10px rgba(19,53,42,.35); cursor:pointer; transition:transform .15s}
.field input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.field input[type="range"]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--pine); border:3px solid var(--ivory); cursor:pointer}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea,.field select{
  width:100%; padding:12px 14px; border:1px solid var(--rule); background:var(--paper);
  color:var(--pine); font-family:inherit; font-size:14px; border-radius:2px; outline:none;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pine); box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 12%,transparent)}
.field textarea{min-height:120px; resize:vertical}
.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:var(--ivory-2); padding:4px; border-radius:2px}
.seg button{padding:9px 8px; font-size:12px; border:0; background:transparent; color:var(--pine); cursor:pointer; border-radius:2px; font-family:"Helvetica Neue", Arial, sans-serif}
.seg button.active{background:var(--paper); box-shadow:inset 0 0 0 1px var(--rule)}
.elig .result{margin-top:18px; padding-top:18px; border-top:1px dashed var(--rule)}
.elig .res-label{font-size:12px; color:var(--mute)}
.elig .res-val{font-family:"Helvetica Neue", Arial, sans-serif; font-size:46px; color:var(--pine);  letter-spacing:-.02em; line-height:1; margin:4px 0 2px}
.elig .res-val small{font-size:14px; color:var(--brass-2); margin-left:4px; font-family:"JetBrains Mono",monospace}
.elig .res-sub{font-size:12px; color:var(--mute); margin-bottom:16px}
.elig .btn{width:100%; justify-content:center}
.elig .free-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-2);
  padding:4px 8px; border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);
  border-radius:999px; background:color-mix(in srgb,var(--brass) 8%,transparent);
}
.elig .free-pill::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brass)}

/* SECTIONS */
section{padding:96px 0; position:relative}
section + section{border-top:1px solid var(--rule)}
.section-head{display:grid; grid-template-columns:1fr 1.6fr; gap:56px; align-items:start; margin-bottom:56px}
@media (max-width:820px){ .section-head{grid-template-columns:1fr; gap:20px; margin-bottom:32px} }
.section-head h2{font-size:clamp(38px,5.2vw,68px); color:var(--pine); margin:10px 0 0}
.section-head p{color:var(--mute); max-width:520px; margin:0}

/* BIG BAND */
.band{background:var(--pine); color:var(--ivory); padding:80px 0; position:relative; overflow:hidden}
.band::after{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 80% 0%,color-mix(in srgb,var(--brass) 22%,transparent),transparent 60%); pointer-events:none}
.band .inner{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:end; position:relative}
@media (max-width:820px){ .band .inner{grid-template-columns:1fr} }
.band .big{font-family:"Helvetica Neue", Arial, sans-serif;  font-weight:300; font-size:clamp(80px,16vw,220px); line-height:.88; letter-spacing:-.04em}
.band .big .unit{font-size:.28em; color:var(--brass); vertical-align:super; margin-right:.1em; }
.band .big .ital{font-style:italic; color:var(--brass); }
.band .caption{font-size:18px; opacity:.8; max-width:380px}
.band .caption strong{color:var(--ivory); font-weight:500}
.band .line{display:flex; gap:10px; align-items:center; font-size:12px; opacity:.6; letter-spacing:.16em; text-transform:uppercase; margin-top:18px}
.band .line::before{content:""; width:36px; height:1px; background:var(--brass)}

/* TRANSP GRID */
.transp-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media (max-width:820px){ .transp-grid{grid-template-columns:1fr; gap:32px} }
.flow{border:1px solid var(--rule); background:var(--ivory); border-radius:4px; padding:28px}
.flow .row{display:grid; grid-template-columns:38px 1fr auto; gap:18px; padding:18px 0; border-bottom:1px dashed var(--rule); align-items:center}
.flow .row:last-child{border-bottom:0}
.flow .n{font-family:"Helvetica Neue", Arial, sans-serif;  font-style:italic; font-size:32px; color:var(--brass); line-height:1}
.flow .t{color:var(--pine); font-size:15px}
.flow .t b{font-weight:500}
.flow .v{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-2)}
.pros{display:flex; flex-direction:column; gap:16px}
.pros .it{display:grid; grid-template-columns:26px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--rule)}
.pros .it:last-child{border-bottom:0}
.pros .it svg{margin-top:3px}
.pros .it h4{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:20px; margin:0 0 4px; color:var(--pine); letter-spacing:-.005em}
.pros .it p{margin:0; color:var(--mute); font-size:14px}

/* STEPS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }
.step{
  border:1px solid var(--rule); padding:28px 24px 32px; background:var(--ivory);
  position:relative; border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.step .num{font-family:"Helvetica Neue", Arial, sans-serif;  font-style:italic; font-size:72px; color:var(--brass); line-height:1; position:absolute; right:18px; top:12px; opacity:.6}
.step h3{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:24px; margin:32px 0 8px; color:var(--pine)}
.step p{color:var(--mute); font-size:15px; margin:0 0 12px}
.step .meta{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--brass-2); text-transform:uppercase; display:flex; gap:8px; align-items:center}
.step .meta::before{content:""; width:16px; height:1px; background:var(--brass)}

/* RECOVERY ROWS */
.recovery{display:grid; grid-template-columns:repeat(12,1fr); gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.row-rec{grid-column:span 12; display:grid; grid-template-columns:70px 1fr 160px 160px; gap:24px; padding:26px 0; border-bottom:1px solid var(--rule); align-items:center; transition:background .3s,padding .3s}
.row-rec:last-child{border-bottom:0}
.row-rec:hover{background:color-mix(in srgb,var(--ivory) 50%,transparent); padding-left:12px}
.row-rec .idx{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--brass-2)}
.row-rec .name{font-family:"Helvetica Neue", Arial, sans-serif; font-size:26px; font-weight:400; color:var(--pine)}
.row-rec .name small{display:block; font-family:"Helvetica Neue", Arial, sans-serif; font-size:13px; color:var(--mute); margin-top:4px; font-weight:300}
.row-rec .tag{font-size:12px; color:var(--mute); letter-spacing:.08em; text-transform:uppercase}
.row-rec .amt{font-family:"Helvetica Neue", Arial, sans-serif; font-size:22px; color:var(--pine); text-align:right; }
.row-rec .amt small{font-family:"JetBrains Mono",monospace; color:var(--brass-2); font-size:12px; display:block; margin-top:2px}
@media (max-width:720px){
  .row-rec{grid-template-columns:40px 1fr; gap:12px}
  .row-rec .tag,.row-rec .amt{grid-column:2}
  .row-rec .amt{text-align:left}
}

/* COMPARE */
.compare{overflow:hidden; border:1px solid var(--rule); border-radius:4px}
.compare table{width:100%; border-collapse:collapse; background:var(--ivory)}
.compare th,.compare td{padding:20px 22px; text-align:left; border-bottom:1px solid var(--rule); font-size:14px; vertical-align:middle}
.compare th{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); font-weight:500; background:var(--ivory-2)}
.compare th.us{color:var(--brass-2); background:color-mix(in srgb,var(--brass) 8%,var(--ivory))}
.compare td.us{background:color-mix(in srgb,var(--brass) 6%,var(--ivory)); color:var(--pine); font-weight:500}
.compare td strong{color:var(--pine)}
.compare td.feat{font-family:"Helvetica Neue", Arial, sans-serif; font-size:17px; color:var(--pine); font-weight:400}
.compare tr:last-child td{border-bottom:0}
.compare .yes{color:var(--pine)}
.compare .no{color:var(--mute); opacity:.6}
@media (max-width:720px){ .compare{overflow-x:auto} .compare table{min-width:640px} }

/* TESTIMONIALS */
.testi{display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px}
@media (max-width:820px){ .testi{grid-template-columns:1fr} }
.quote{border-left:1px solid var(--brass); padding:8px 0 8px 22px; position:relative}
.quote::before{content:"“"; position:absolute; left:-8px; top:-18px; font-family:"Helvetica Neue", Arial, sans-serif; font-size:72px; color:var(--brass);  line-height:1}
.quote p{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:350; font-size:22px; line-height:1.35; color:var(--pine); margin:0 0 18px; letter-spacing:-.01em}
.quote p em{font-style:italic;  color:var(--brass-2)}
.quote .who{font-size:13px; color:var(--mute)}
.quote .who b{color:var(--pine); font-weight:500}

/* TRUST BADGES */
.trust-band{background:var(--ivory); padding:48px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.badges{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; align-items:center}
@media (max-width:820px){ .badges{grid-template-columns:repeat(2,1fr)} }
.badge{padding:18px 12px; text-align:center; border:1px solid var(--rule); background:var(--paper); border-radius:2px; display:flex; flex-direction:column; align-items:center; gap:6px}
.badge svg{color:var(--pine); opacity:.85}
.badge b{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:500; font-size:15px; color:var(--pine); letter-spacing:.01em}
.badge small{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
details.q{border-bottom:1px solid var(--rule); padding:24px 0; transition:padding .3s}
details.q[open]{padding-bottom:30px}
details.q summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:22px; color:var(--pine); letter-spacing:-.005em}
details.q summary::-webkit-details-marker{display:none}
details.q summary .plus{width:28px; height:28px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; flex:none; transition:transform .3s,background .3s,border-color .3s; color:var(--brass-2)}
details.q[open] summary .plus{transform:rotate(45deg); background:var(--pine); color:var(--ivory); border-color:var(--pine)}
details.q .ans{margin-top:16px; color:var(--mute); max-width:780px; font-size:15px}

/* FINAL CTA */
.final{background:var(--pine); color:var(--ivory); padding:120px 0; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:0; background:radial-gradient(400px 260px at 20% 100%,color-mix(in srgb,var(--brass) 25%,transparent),transparent 65%); pointer-events:none}
.final .grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end; position:relative}
@media (max-width:820px){ .final .grid{grid-template-columns:1fr} }
.final h2{font-family:"Helvetica Neue", Arial, sans-serif;  font-size:clamp(44px,6.4vw,96px); line-height:.95; letter-spacing:-.02em; margin:0 0 20px; color:var(--ivory)}
.final h2 .ital{font-style:italic; color:var(--brass); }
.final p{opacity:.8; max-width:440px; margin:0 0 28px}
.final .btn{background:var(--brass); border-color:var(--brass); color:var(--ink)}
.final .btn:hover{background:var(--ivory); border-color:var(--ivory); color:var(--pine)}

/* FOOTER */
footer{background:#0e1f29; color:color-mix(in srgb,var(--ivory) 80%,transparent); padding:80px 0 40px; position:relative; overflow:hidden; border-top:1px solid color-mix(in srgb,var(--brass) 20%,transparent)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} }
footer h4{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 18px; font-weight:500}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:6px 0; font-size:14px}
footer a{opacity:.8; transition:opacity .2s}
footer a:hover{opacity:1; color:var(--ivory)}
footer img.logo-footer{height:64px; width:auto; margin-bottom:18px}
.big-word{font-family:"Helvetica Neue", Arial, sans-serif;  font-style:italic; font-size:clamp(80px,14vw,200px); line-height:.9; color:color-mix(in srgb,var(--ivory) 6%,transparent); position:absolute; bottom:-20px; right:-20px; pointer-events:none; letter-spacing:-.03em}
.foot-bot{border-top:1px solid color-mix(in srgb,var(--ivory) 12%,transparent); margin-top:56px; padding-top:28px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:12px; color:color-mix(in srgb,var(--ivory) 55%,transparent); position:relative}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{border:1px solid color-mix(in srgb,var(--ivory) 18%,transparent); padding:5px 10px; border-radius:999px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase}

/* PAGE HERO (for subpages) */
.page-hero{padding:64px 0 48px; position:relative}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{font-family:"Helvetica Neue", Arial, sans-serif; font-size:clamp(48px,6.4vw,96px); line-height:.95; letter-spacing:-.02em; color:var(--pine); margin:0 0 20px; font-weight:380; }
.page-hero h1 .ital{font-style:italic; color:var(--brass-2); }
.page-hero .lead{font-size:18px; color:var(--pine); opacity:.85; max-width:720px; margin:0 0 12px}
.page-hero .crumbs{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:14px}
.page-hero .crumbs a{color:var(--pine)}
.page-hero .crumbs span{margin:0 8px; color:var(--brass); opacity:.6}

/* SERVICE CARDS */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:820px){ .cards{grid-template-columns:1fr} }
.card{background:var(--ivory); border:1px solid var(--rule); border-radius:2px; padding:32px 28px; position:relative; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .ic{width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--rule); border-radius:50%; color:var(--pine); margin-bottom:20px; background:var(--paper)}
.card h3{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:24px; margin:0 0 8px; color:var(--pine); letter-spacing:-.005em}
.card p{color:var(--mute); font-size:15px; margin:0 0 16px}
.card .meta{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-2)}
.card a.more{display:inline-flex; gap:8px; color:var(--pine); font-size:14px; margin-top:12px; border-bottom:1px solid var(--brass); padding-bottom:2px}

/* LEGAL / PROSE PAGES */
.prose{max-width:760px; margin:0 auto; padding:40px 0 80px; font-size:16px; line-height:1.75; color:var(--pine)}
.prose h2{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:32px; margin:48px 0 12px; color:var(--pine); letter-spacing:-.01em}
.prose h3{font-family:"Helvetica Neue", Arial, sans-serif; font-weight:400; font-size:22px; margin:32px 0 8px; color:var(--pine)}
.prose p{margin:0 0 16px; color:color-mix(in srgb,var(--pine) 85%,var(--mute))}
.prose ul,.prose ol{padding-left:20px; margin:0 0 16px; color:color-mix(in srgb,var(--pine) 85%,var(--mute))}
.prose li{margin-bottom:8px}
.prose a{color:var(--brass-2); border-bottom:1px solid var(--brass); transition:color .2s}
.prose a:hover{color:var(--pine)}
.prose .meta-info{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:32px}
.prose hr{border:0; border-top:1px solid var(--rule); margin:48px 0}

/* REVEALS */
.reveal{opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.r1{animation-delay:.05s}.r2{animation-delay:.15s}.r3{animation-delay:.25s}
.r4{animation-delay:.35s}.r5{animation-delay:.45s}
@keyframes rise{to{opacity:1; transform:none}}
.sr{opacity:0; transform:translateY(20px); transition:opacity .8s ease,transform .8s ease}
.sr.in{opacity:1; transform:none}

/* CONTACT FORM */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:720px){ .form-grid{grid-template-columns:1fr} }
.form-wide{background:var(--ivory); border:1px solid var(--rule); padding:36px; border-radius:4px; position:relative}
.form-wide::before{content:""; position:absolute; inset:6px; border:1px solid color-mix(in srgb,var(--brass) 30%,transparent); border-radius:2px; pointer-events:none}
.contact-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:48px; align-items:start}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }
.info-block{display:flex; flex-direction:column; gap:20px}
.info-row{padding:14px 0; border-bottom:1px solid var(--rule)}
.info-row:last-child{border-bottom:0}
.info-row .k{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-2); margin-bottom:4px}
.info-row .v{font-family:"Helvetica Neue", Arial, sans-serif; font-size:22px; color:var(--pine); font-weight:400; letter-spacing:-.005em}

/* CANTONS LIST */
.cantons{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0}
@media (max-width:820px){ .cantons{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .cantons{grid-template-columns:1fr} }
.canton-tile{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border:1px solid var(--rule); background:var(--ivory);
  transition:transform .25s,box-shadow .25s;
}
.canton-tile:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.canton-tile .n{font-family:"Helvetica Neue", Arial, sans-serif; font-size:20px; color:var(--pine)}
.canton-tile .a{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--brass-2); letter-spacing:.12em}

/* ═══════════════════════════
   MOBILE DRAWER + HAMBURGER
═══════════════════════════ */
.hamb{
  display:none;
  width:36px; height:36px;
  background:transparent; border:1px solid var(--rule); border-radius:4px;
  cursor:pointer; padding:0; position:relative;
}
.hamb span,
.hamb::before,
.hamb::after{
  content:""; position:absolute; left:8px; right:8px; height:1.5px;
  background:var(--pine); transition:transform .25s, top .25s, opacity .25s;
}
.hamb::before{top:12px}
.hamb span{top:17px}
.hamb::after{top:22px}
body.menu-open .hamb::before{top:17px; transform:rotate(45deg)}
body.menu-open .hamb span{opacity:0}
body.menu-open .hamb::after{top:17px; transform:rotate(-45deg)}

@media (max-width:960px){
  .hamb{display:block}
  .navlinks{gap:0}
  .navlinks > a:not(.cta-nav){display:none}
  .navlinks .lang{display:none}
  .cta-nav{display:none}
}
@media (max-width:720px){
  .cta-nav{display:none}
}

.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(360px, 88vw);
  background:var(--paper);
  border-left:1px solid var(--rule);
  box-shadow:var(--shadow);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  z-index:200;
  overflow-y:auto;
  display:flex; flex-direction:column;
}
body.menu-open .drawer{transform:translateX(0)}
body.menu-open::after{
  content:""; position:fixed; inset:0; background:rgba(14,14,12,.4);
  z-index:150; pointer-events:auto;
}
body:not(.menu-open) .drawer{pointer-events:none}
.dhead{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--rule);
}
.dhead img{height:64px; width:120px; display:block}
.dclose{
  width:36px; height:36px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--rule); border-radius:50%;
  cursor:pointer; color:var(--pine);
}
.dbody{padding:22px}
.dlinks{display:flex; flex-direction:column; gap:2px}
.dlinks a{
  display:block; padding:14px 0;
  font-size:18px; color:var(--pine);
  border-bottom:1px solid var(--rule);
}
.dlinks a:last-child{border-bottom:0}
.dlinks a:hover{color:var(--brass-2)}

/* Hide drawer completely on desktop to prevent layout pollution */
@media (min-width:961px){
  .drawer{display:none}
  .hamb{display:none}
}

/* Drawer lang row */
.dlang-row{
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--rule);
}
.drawer .lang-drawer{
  display:inline-flex !important;
  flex-wrap:wrap; gap:6px; align-items:center;
  border:1px solid var(--rule); border-radius:999px;
  padding:10px 16px; font-size:13px;
  font-family:"JetBrains Mono",monospace;
  letter-spacing:.18em;
}
.drawer .lang-drawer a{color:var(--pine); opacity:.65; padding:2px 4px}
.drawer .lang-drawer a:hover{opacity:1}
.drawer .lang-drawer b{color:var(--brass-2); font-weight:500; opacity:1}
.drawer .lang-drawer span{opacity:.35}

/* Header login link */
.nav-login{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--pine); opacity:.75;
  padding:8px 10px; border-radius:999px;
  transition:opacity .2s, background .2s;
}
.nav-login:hover{opacity:1; background:var(--ivory-2)}
.nav-login svg{width:14px; height:14px}
@media (max-width:960px){ .nav-login{display:none} }

/* Already client notice (on /inscription, /choix-plan) */
.already-client{
  margin:28px 0 0; padding:20px 24px;
  background:var(--ivory-2); border:1px solid var(--rule); border-radius:4px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.already-client .text{display:flex; flex-direction:column; gap:4px}
.already-client .t{font-weight:500; color:var(--pine); font-size:15px}
.already-client .s{color:var(--mute); font-size:13px}
.already-client .cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; background:var(--pine); color:var(--ivory);
  border-radius:4px; font-size:14px; white-space:nowrap;
  transition:background .2s;
}
.already-client .cta:hover{background:var(--pine-2)}

/* Drawer login CTA row */
.dlogin-row{
  margin-top:24px; padding:20px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px;
}
.dlogin-text{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.dlogin-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border:1px solid var(--pine); border-radius:4px;
  background:var(--pine); color:var(--ivory);
  font-size:14px; font-weight:500;
  text-align:center; justify-content:center;
  transition:background .2s, transform .15s;
}
.dlogin-cta:hover{background:var(--pine-2); transform:translateY(-1px)}
.dlogin-cta svg{width:16px; height:16px; flex-shrink:0}