/* DA Multiprise (docs/DESIGN.md) : aplats orange et noirs, texte foncé sur l'orange, aucune police ni ressource externe. */
:root { --ink:#1c1917; --orange:#ffb088; --apricot:#ffd2b5; --soft:#ffede3; --accent-ink:#b4501e; --on-dark:#f4ece5; --on-dark-2:#bdb1a8; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { font:17px/1.5 'Segoe UI Variable Display','Segoe UI',Inter,system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--apricot); }
a { color:inherit; text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.dark :focus-visible, footer :focus-visible { outline-color:var(--orange); }
.wrap { width:min(1200px,100% - 2.5rem); margin-inline:auto; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; text-decoration:none; }
.brand img { border-radius:9px; }
header.top { padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.langs { display:flex; gap:.15rem; font-size:.95rem; font-weight:700; }
.langs a { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; text-decoration:none; }
.langs a:hover { text-decoration:underline; }
.langs a[aria-current] { background:var(--ink); color:var(--on-dark); }
h1 { font-size:clamp(2.7rem,7.2vw,6rem); line-height:.98; letter-spacing:-.045em; font-weight:800; }

/* Ouverture : grand aplat orange, la multiprise à droite */
.hero { background:var(--orange); overflow:hidden; }
.hero-grid { display:grid; gap:2rem; padding:1.5rem 0 3.5rem; align-items:center; }
@media (min-width:980px) { .hero-grid { grid-template-columns:1.15fr .85fr; padding:2.5rem 0 5rem; } }
.lead { font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.35; margin:1.4rem 0 1.8rem; max-width:32rem; font-weight:500; }
.strip { width:100%; height:auto; display:block; max-width:520px; margin-inline:auto; }

.based { font-weight:800; font-size:1.1rem; margin:-.9rem 0 1.5rem; }
form.join { display:grid; gap:.75rem; max-width:34rem; scroll-margin-top:1rem; }
.join-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.join input[type=email] { flex:1 1 14rem; min-height:56px; padding:0 1.25rem; font:inherit; border:2px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); }
.button,button { font:inherit; font-weight:700; min-height:56px; padding:0 1.6rem; border:2px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--on-dark); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.button:hover,button:hover { background:#3a332e; }
.consent { display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; line-height:1.35; }
.consent input { margin-top:.1rem; width:20px; height:20px; accent-color:var(--ink); flex:none; }
.trap { position:absolute; left:-9999px; }

/* Le chiffre : aplat noir, un calcul en grand */
.dark { background:var(--ink); color:var(--on-dark); padding:clamp(3.5rem,8vw,6.5rem) 0; }
.sum { display:grid; gap:2.5rem; align-items:end; }
@media (min-width:980px) { .sum { grid-template-columns:.8fr 1.2fr; } }
.kicker { font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; letter-spacing:-.035em; font-weight:800; }
.dark .sub { color:var(--on-dark-2); margin-top:1rem; max-width:26rem; }
.calc { font-variant-numeric:tabular-nums; }
.calc div { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid #3f3833; font-size:clamp(1.05rem,2.2vw,1.5rem); color:var(--on-dark-2); }
.calc div.total { border:0; padding-top:1.1rem; display:block; color:var(--on-dark); }
.calc .total b { display:block; color:var(--orange); font-size:clamp(3.2rem,9.5vw,7.5rem); line-height:1; letter-spacing:-.05em; font-weight:800; white-space:nowrap; }
.calc small { display:block; color:var(--on-dark-2); font-size:.82rem; margin-top:.8rem; }

/* Le texte : grande phrase sur abricot */
.story { padding:clamp(3.5rem,8vw,6.5rem) 0; }
.story p.big { font-size:clamp(1.7rem,4vw,3.2rem); line-height:1.3; letter-spacing:-.03em; font-weight:700; max-width:22em; }
.story mark { background:var(--ink); color:var(--orange); padding:0 .22em; border-radius:.18em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.peppol { margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:.5rem 3rem; border-top:3px solid var(--ink); padding-top:1.25rem; }
@media (min-width:760px) { .peppol { grid-template-columns:15rem 1fr; } }
.peppol strong { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.peppol p { max-width:40rem; font-size:1.1rem; line-height:1.4; }

/* Le prix : aplat orange plein */
.price { background:var(--orange); padding:clamp(3rem,7vw,5.5rem) 0; }
.price-grid { display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center; justify-content:space-between; }
.amount { font-size:clamp(5.5rem,17vw,13rem); line-height:.85; letter-spacing:-.06em; font-weight:800; }
.price p { font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.25; font-weight:600; margin-top:1rem; }

/* Questions : lignes simples, sans cartes */
.faq { padding:clamp(3rem,7vw,5rem) 0; }
.faq h2 { font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.035em; line-height:1; font-weight:800; margin-bottom:1.5rem; }
details { border-top:2px solid var(--ink); padding:1.05rem 0; }
details:last-of-type { border-bottom:2px solid var(--ink); }
summary { font-size:1.2rem; font-weight:700; cursor:pointer; }
details p { margin-top:.5rem; max-width:44rem; }

footer { background:var(--ink); color:var(--on-dark-2); padding:2rem 0; font-size:.88rem; }

/* Pages secondaires */
.page { max-width:44rem; padding:1.5rem 0 4rem; }
.page h1 { font-size:clamp(2.4rem,6vw,4rem); margin-bottom:1.25rem; }
.page h2 { font-size:1.25rem; margin:1.6rem 0 .3rem; font-weight:800; }