:root {
  --nuit: #0F1E36;
  --nuit-2: #18304F;
  --corail: #FF5A3C;
  --corail-2: #E8452A;
  --papier: #F4F1EA;
  --blanc: #FFFFFF;
  --gris: #5B6B82;
  --trait: #D9DEE7;
  --titre: "Archivo Black", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --texte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --rayon: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.65 var(--texte); color: var(--nuit); background: var(--papier); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; letter-spacing: 0; }
p { margin: 0 0 1em; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--blanc); padding: 8px 12px; z-index: 10; }
.kicker { font: 700 .78rem/1.2 var(--texte); text-transform: uppercase; letter-spacing: .14em; color: var(--corail); margin-bottom: 1rem; }

/* En-tête */
.top { background: var(--nuit); color: var(--blanc); position: sticky; top: 0; z-index: 5; }
.top__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titre); font-size: 1.05rem; line-height: 1; }
.brand small { display: block; font: 600 .7rem/1.4 var(--texte); text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--corail); font-size: 1.3rem; }
.nav { display: flex; gap: 20px; margin-left: auto; font-size: .92rem; }
.nav a { text-decoration: none; opacity: .8; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; border-color: var(--corail); }

.btn { display: inline-block; background: var(--corail); color: var(--blanc); text-decoration: none; font-weight: 700; padding: 15px 26px; border-radius: 999px; transition: background .2s, transform .2s; }
.btn:hover { background: var(--corail-2); transform: translateY(-2px); }
.btn--small { padding: 10px 18px; font-size: .9rem; }
.btn--ghost { background: transparent; border: 2px solid currentColor; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }

/* Héros : titre + texte SEO + formulaire, dans cet ordre dans le DOM */
.hero { background: var(--nuit); color: var(--blanc); padding: 64px 0 0; overflow: hidden; position: relative; }
.hero::after { content: "§"; position: absolute; right: -40px; top: -90px; font: 900 34rem/1 var(--titre); color: rgba(255,255,255,.035); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; position: relative; z-index: 1; }
.hero__lead { font-size: 1.15rem; color: #C9D3E3; max-width: 34em; }
.hero__lead strong { color: var(--blanc); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 40px; }
.hero h1 em { font-style: normal; color: var(--corail); }

.devis { scroll-margin-top: 84px; background: var(--blanc); color: var(--nuit); border-radius: 22px; padding: 28px 24px 8px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.devis__head h2 { font-size: 1.6rem; }
.devis__head p { color: var(--gris); font-size: .95rem; }

/* Formulaire de demande (inc/lead_form.php) */
.lf { padding-bottom: 20px; }
.lf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lf-step + .lf-step { margin-top: 28px; }
.lf-step > legend { font: 700 .78rem/1.2 var(--texte); text-transform: uppercase; letter-spacing: .14em; color: var(--corail); margin-bottom: 14px; padding: 0; }
.lf-field { margin-bottom: 14px; }
.lf label, .lf legend { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.lf input[type="text"], .lf input[type="tel"], .lf input[type="email"], .lf input[type="number"], .lf input[type="date"], .lf select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--nuit); background: var(--blanc);
  border: 1.5px solid var(--trait); border-radius: 10px; padding: 11px 12px; min-height: 46px;
}
.lf input:focus, .lf select:focus { outline: 3px solid rgba(255,90,60,.25); border-color: var(--corail); }
.lf-radios { margin-bottom: 14px; }
.lf-radios legend { margin-bottom: 8px; }
.lf-radios label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0 18px 0 0; padding: 6px 0; cursor: pointer; }
.lf-radios input, .lf-consent input { accent-color: var(--corail); width: 18px; height: 18px; flex: none; }
.lf-hint { font-size: .85rem; color: var(--gris); margin: 6px 0 0; }
.lf-error { font-size: .88rem; font-weight: 600; color: #B42318; margin: 6px 0 0; }
.lf-field--error input, .lf-field--error select { border-color: #B42318; }
.lf-notice { background: #FEF3F2; color: #B42318; border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.lf-stop { background: var(--papier); border-left: 4px solid var(--corail); border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: .95rem; }
.lf-co { background: var(--papier); border-radius: 12px; padding: 18px 16px 4px; margin-top: 8px; }
.lf-co__title { font-weight: 700; margin-bottom: 12px; }
.lf-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .88rem; line-height: 1.45; margin-bottom: 12px; cursor: pointer; }
.lf-consent input { margin-top: 2px; }
.lf-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.lf-nav .btn { border: 0; cursor: pointer; font: 700 1rem var(--texte); }
.lf-nav .btn--ghost { border: 2px solid var(--trait); color: var(--nuit); }
.lf-nav [data-next], .lf-nav [data-submit] { margin-left: auto; }
.lf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lf-progress { display: none; }
/* Mode étapes, activé par site.js : une étape visible à la fois. */
.lf.is-steps .lf-step { display: none; margin-top: 0; }
.lf.is-steps .lf-step.is-current { display: block; }
.lf.is-steps .lf-progress { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: lf; }
.lf-progress li { flex: 1; font-size: .72rem; font-weight: 700; color: var(--gris); border-top: 4px solid var(--trait); padding-top: 6px; }
.lf-progress li.is-done { color: var(--nuit); border-color: var(--corail); }
.devis-page { max-width: 640px; margin: 0 auto 64px; }

/* Bandeau de chiffres issus du texte de loi */
.figures { background: var(--corail); color: var(--blanc); }
.figures__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.figure { padding: 40px 24px; border-left: 1px solid rgba(255,255,255,.3); }
.figure:first-child { border-left: 0; }
.figure b { display: block; font: 900 clamp(2.6rem, 5vw, 4.2rem)/1 var(--titre); letter-spacing: -.04em; }
.figure span { display: block; margin-top: 10px; font-size: .95rem; line-height: 1.4; }

/* Sections */
.section { padding: 96px 0; }
.section--nuit { background: var(--nuit); color: var(--blanc); }
.section--nuit .muted { color: #A9B6CB; }
.section--blanc { background: var(--blanc); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.muted { color: var(--gris); }
.big-quote { font: 900 clamp(1.8rem, 3.4vw, 2.7rem)/1.15 var(--titre); letter-spacing: -.02em; }
.big-quote em { font-style: normal; color: var(--corail); }

/* Listes numérotées L01, L02... */
.steps { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: step; display: grid; gap: 2px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--trait); }
.section--nuit .steps li { border-color: rgba(255,255,255,.15); }
.steps li::before { content: "L" counter(step, decimal-leading-zero); font: 900 2.6rem/1 var(--titre); color: var(--corail); }
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.card { background: var(--blanc); border-radius: var(--rayon); padding: 30px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--trait); transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-4px); border-color: var(--corail); }
.card__num { font: 900 3rem/1 var(--titre); color: var(--corail); }
.card__more { margin-top: auto; font-weight: 700; color: var(--corail); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.compare > div { border-radius: var(--rayon); padding: 32px; }
.compare__avant { background: var(--nuit-2); }
.compare__apres { background: var(--corail); }
.compare h3 { text-transform: uppercase; letter-spacing: .1em; font: 700 .85rem var(--texte); opacity: .85; }
.compare ul { margin: 0; padding-left: 1.1em; }
.compare li { margin-bottom: .6em; }

.faq details { border-top: 1px solid var(--trait); padding: 22px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font: 900 1.6rem/1 var(--titre); color: var(--corail); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 14px 0 0; color: var(--gris); }

.placeholder { background: #FFF3B0; color: #5A4500; border: 2px dashed #C9A400; border-radius: 8px; padding: 2px 8px; font-weight: 700; }
.box-placeholder { background: #FFF3B0; color: #5A4500; border: 2px dashed #C9A400; border-radius: var(--rayon); padding: 24px; font-weight: 600; }

/* Pages de guide */
.article { background: var(--blanc); padding: 72px 0 96px; }
.article__body { max-width: 760px; }
.article__body h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.article__body ul, .article__body ol { padding-left: 1.2em; }
.article__body li { margin-bottom: .5em; }
.callout { background: var(--papier); border-left: 6px solid var(--corail); padding: 22px 26px; border-radius: 0 var(--rayon) var(--rayon) 0; margin: 28px 0; }
.legal { background: var(--blanc); padding: 72px 0 96px; }
.legal .wrap { max-width: 820px; }
/* Coordonnées de l'éditeur en image (bin/identite.py) : rien ne doit les distinguer du texte. */
.identite { margin: 0 0 1em; padding: 0; background: none; border: 0; }
.identite img { display: block; height: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: none; }
.identite-large img { width: 600px; }
.identite-etroite { display: none; }
.identite-etroite img { width: 340px; }
@media (max-width: 680px) { .identite-large { display: none; } .identite-etroite { display: block; } }

/* Pied de page */
.foot { background: var(--corail); color: var(--nuit); padding: 64px 0 40px; overflow: hidden; }
.foot__big { font: 900 clamp(3.4rem, 13vw, 11rem)/.85 var(--titre); letter-spacing: -.05em; margin: 0 0 40px; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 32px; }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot nav a { text-decoration: none; font-weight: 600; }
.foot nav a:hover { text-decoration: underline; }
.foot__note { font-size: .9rem; margin: 0; }
.foot__link { background: none; border: 0; padding: 0; font: 600 1rem/1.65 var(--texte); color: inherit; text-align: left; cursor: pointer; }
.foot__link:hover { text-decoration: underline; }

/* Bandeau de consentement (consent.js) : Accepter et Refuser ont exactement le même poids. */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.consent[hidden] { display: none; }
.consent__in { pointer-events: auto; max-width: 640px; background: var(--nuit); color: var(--blanc); border-radius: var(--rayon); padding: 18px 20px; box-shadow: 0 16px 50px rgba(0,0,0,.35); font-size: .92rem; line-height: 1.5; }
.consent__in p { margin: 0 0 12px; }
.consent__titre { font-weight: 700; font-size: 1rem; }
.consent__actions { display: flex; gap: 10px; justify-content: flex-end; }
.consent__btn { border: 0; cursor: pointer; font: 700 .92rem var(--texte); min-width: 110px; }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .top__in .btn { margin-left: auto; }
  .hero__grid, .split, .compare { grid-template-columns: 1fr; gap: 32px; }
  .figures__grid { grid-template-columns: 1fr 1fr; }
  .figure:nth-child(3) { border-left: 0; }
  .figure { border-top: 1px solid rgba(255,255,255,.3); }
  .cards { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .steps li { grid-template-columns: 1fr; gap: 8px; }
  .devis { padding: 22px 12px 4px; margin-inline: -16px; border-radius: 18px 18px 0 0; }
  .devis__frame { min-height: 700px; }
  .devis__frame iframe { min-height: 680px; }
  .figure { padding: 28px 16px; }
}

/* Fil d'Ariane */
.crumbs { background: var(--nuit); color: #A9B6CB; font-size: .85rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 14px 0 0; margin-top: 0; margin-bottom: 0; }
.crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .5; }
.crumbs a { color: #C9D3E3; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--blanc); }
.updated { font-size: .85rem; color: #A9B6CB; margin: -8px 0 0; }

/* Blocs d'article */
.essentiel { background: var(--papier); border-radius: var(--rayon); padding: 24px 26px; margin: 0 0 32px; }
.essentiel h2 { font-size: 1.1rem; font-family: var(--texte); font-weight: 800; letter-spacing: 0; margin: 0 0 12px; }
.essentiel ul { margin: 0; padding-left: 1.1em; }
.essentiel li { margin-bottom: .4em; }
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--trait); border-radius: var(--rayon); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.table-wrap th { background: var(--papier); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td a { font-weight: 600; }
.article__body h3 { margin-top: 1.4em; }
.article__body .faq { margin-top: 12px; }
.sources { max-width: 760px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--trait); font-size: .88rem; color: var(--gris); }
.sources h2 { font: 700 .8rem/1.2 var(--texte); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.sources ul { margin: 0; padding-left: 1.1em; }
.sources a { color: var(--gris); }
.related .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.related h3 { font-size: 1.1rem; }
.section-devis { padding: 72px 0; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 32px; }

/* Menu mobile */
.nav-toggle { display: none; margin-left: auto; background: none; border: 2px solid rgba(255,255,255,.35); color: var(--blanc); border-radius: 10px; padding: 8px 12px; font: 700 .85rem var(--texte); cursor: pointer; align-items: center; gap: 8px; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.foot__title { font: 700 .78rem/1.2 var(--texte); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 6px; }
.foot__title a { text-decoration: none; }

/* Appel à l'action fixe sur mobile, masqué quand le formulaire est à l'écran (site.js) */
.sticky-cta { display: none; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .top__in { flex-wrap: wrap; }
  .top__cta { display: none; }
  .nav.is-open { display: flex; flex-direction: column; gap: 0; width: 100%; margin: 0 0 12px; }
  .nav.is-open a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); opacity: 1; }
  .sticky-cta { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; text-align: center; background: var(--corail); color: var(--blanc); font-weight: 700; text-decoration: none; padding: 15px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .25s, opacity .25s; }
  .sticky-cta.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .foot { padding-bottom: 96px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot__cols { grid-template-columns: 1fr; }
}

.hub-col { background: var(--papier); border-radius: var(--rayon); padding: 24px; }
.hub-col h3 { font-size: 1.15rem; margin-bottom: 10px; }
.hub-col h3 a { text-decoration: none; }
.hub-col ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.hub-col li { padding: 6px 0; border-bottom: 1px solid var(--trait); font-size: .95rem; }
.hub-col li:last-child { border-bottom: 0; }
.hub-col li a { text-decoration: none; }
.hub-col li a:hover { text-decoration: underline; color: var(--corail-2); }
.situations { padding: 72px 0; }
.foot__title--sub { margin-top: 18px; }

/* Schémas SVG (bin/schemas.py) */
.schema { margin: 28px 0 32px; padding: 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.schema-svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.schema figcaption { margin-top: 12px; font-size: .88rem; color: var(--gris); text-align: center; }
@media (max-width: 560px) { .schema { padding: 12px 8px; margin-left: -8px; margin-right: -8px; } }

/* En-tête illustré (bin/illustrations.py) : texte d'abord dans le DOM, image à droite sur grand écran */
.hero__split:has(.hero__img) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.hero__img { margin: 0 0 40px; border-radius: 22px; overflow: hidden; background: var(--papier); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hero__img img { display: block; width: 100%; height: auto; }
.section-illu { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 24px; border-radius: var(--rayon); }
@media (max-width: 960px) {
  .hero__split:has(.hero__img) { grid-template-columns: 1fr; gap: 0; }
  .hero__img { margin: 0 0 32px; }
}