/* Foyer Paré — site vitrine. Encre bleu-nuit, ambre de signalisation, papier clair. */
:root{
  --ink:#17262A; --night:#0F1B1D; --paper:#F4F5F1; --card:#FFFFFF; --line:#D6DCD7;
  --text:#17262A; --muted:#55666A; --amber:#E9A52E; --amber-deep:#B97A10; --teal:#1E6A5B; --on-amber:#1B1A12;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Lora",Georgia,"Times New Roman",serif;
  --f-ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#111A1C; --card:#182326; --line:#2B3B3E; --text:#E4EAE6; --muted:#9CACAA; --teal:#4DB39A; --amber-deep:#F0B03A; color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:18px;line-height:1.6}
a{color:var(--teal)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.stripe{height:10px;background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ink) 14px 28px)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* en-tête */
.top{background:var(--ink);color:#E9EEEA}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;color:#E9EEEA;text-decoration:none;font:700 26px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.logo svg{width:34px;height:31px}
.nav{display:flex;gap:18px;flex-wrap:wrap;font:600 15px/1 var(--f-ui)}
.nav a{color:#C9D4D1;text-decoration:none}
.nav a:hover{color:#fff}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 17px/1 var(--f-ui);padding:15px 22px;border-radius:10px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.amber{background:var(--amber);color:var(--on-amber)}
.btn.amber:hover{filter:brightness(1.06)}
.btn.ghost{border-color:#5C7175;color:#E9EEEA;background:transparent}
.btn.ghost:hover{border-color:#E9EEEA}
.btn.ghost.dark{border-color:var(--line);color:var(--text)}
.btn[aria-disabled="true"]{opacity:.65;cursor:default}

/* héros */
.hero{background:var(--ink);color:#E9EEEA;padding-block:56px 72px}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;align-items:center}
.kicker{font:600 15px/1.2 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 18px}
.hero h1{font:700 clamp(54px,9vw,104px)/.92 var(--f-display);text-transform:uppercase;margin:0 0 22px;letter-spacing:-.01em}
.hero .lead{font-size:clamp(20px,2.4vw,25px);line-height:1.45;margin:0 0 30px;max-width:30ch;color:#E9EEEA}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .note{font:400 14px/1.5 var(--f-ui);color:#A9B8B6;margin-top:18px}
.book3d{border-radius:14px;max-width:400px;width:100%;margin-inline:auto}

/* sections */
section.band{padding-block:72px}
section.band.alt{background:var(--card);border-block:1px solid var(--line)}
h2{font:700 clamp(36px,5vw,52px)/1 var(--f-display);text-transform:uppercase;margin:0 0 14px;letter-spacing:.005em;text-wrap:balance}
.sub{color:var(--muted);max-width:62ch;margin:0 0 36px}
.eyebrow{font:600 14px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 12px}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fact{border-top:4px solid var(--ink);padding-top:16px}
@media (prefers-color-scheme: dark){.fact{border-top-color:var(--amber)}}
.fact b{display:block;font:700 46px/1 var(--f-display);margin-bottom:8px}
.fact p{margin:0;color:var(--muted);font-size:16px}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
section.band.alt .step{background:var(--paper)}
.step::before{counter-increment:s;content:counter(s);display:block;font:700 54px/1 var(--f-display);color:var(--teal);margin-bottom:10px}
.step h3{font:700 26px/1.1 var(--f-display);text-transform:uppercase;margin:0 0 8px}
.step p{margin:0;font-size:16px;color:var(--muted)}

.split{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:center}
.split img{border-radius:14px;max-width:340px;width:100%}
ul.ticks{list-style:none;padding:0;margin:0 0 26px}
ul.ticks li{padding-left:30px;position:relative;margin-bottom:10px}
ul.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border:solid var(--teal);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.kit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;background:var(--ink);color:#E9EEEA;border-radius:16px;padding:34px}
.kit h2{color:#E9EEEA}
.kit p{margin:0;color:#C9D4D1;max-width:56ch}

form.signup{display:flex;flex-wrap:wrap;gap:10px;max-width:560px}
form.signup input{flex:1 1 260px;min-width:0;font:400 17px/1 var(--f-ui);padding:15px 16px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--text)}
.formmsg{font:500 15px/1.5 var(--f-ui);margin-top:10px;color:var(--teal)}
.small{font:400 14px/1.5 var(--f-ui);color:var(--muted)}

/* pages texte */
.page{padding-block:56px 80px}
.page h1{font:700 clamp(40px,6vw,60px)/1 var(--f-display);text-transform:uppercase;margin:0 0 24px}
.page h2{font-size:30px;margin-top:36px}
.page p,.page li{max-width:70ch}
.todo{background:#FFF4D6;color:#5A4300;border:1px dashed #B97A10;border-radius:6px;padding:1px 6px;font-family:var(--f-ui);font-size:15px}

/* pied */
footer.foot{background:var(--night);color:#A9B8B6;padding-block:40px;font:400 15px/1.6 var(--f-ui)}
footer.foot .cols{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer.foot a{color:#E9EEEA}
footer.foot p{margin:0 0 6px;max-width:70ch}

@media (max-width:820px){
  .hero .grid,.split{grid-template-columns:1fr}
  .hero{padding-block:40px 56px}
  .book3d{max-width:300px}
  .facts,.steps{grid-template-columns:1fr}
  .kit{grid-template-columns:1fr}
  .nav{display:none}
  section.band{padding-block:52px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}