/* ------------------------------------------------------------------ guides
 * Les pages qui répondent à une question précise tapée dans un moteur.
 *
 * Elles sont lues autrement que la page d'accueil : quelqu'un arrive avec un
 * problème, cherche la réponse, et s'en va. D'où une colonne étroite, des
 * étapes numérotées visibles de loin, et l'offre rappelée une fois — pas trois.
 */
:root {
  --paper:#fafafc; --sheet:#fff; --ink:#14161f; --ink-soft:#4b5163; --ink-faint:#858b9c;
  --rule:#e6e7ef; --accent:#5b5bd6; --accent-deep:#3b3b9e; --wash:#f0f0fb;
  --warn:#b26a00; --warn-wash:#fdf6ea;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
  color-scheme: light;
}
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink);
       font-family:var(--sans); font-size:16.5px; line-height:1.68 }
.wrap { max-width:700px; margin-inline:auto; padding:40px 20px 88px }

.fil { font-size:13px; color:var(--ink-faint); margin:0 0 28px }
.fil a { color:var(--ink-soft); text-decoration:none }
.fil a:hover { color:var(--accent-deep) }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:600 }
.brand__mark { width:22px; height:22px; border-radius:6px; background:var(--accent);
               color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600 }

h1 { font-family:var(--serif); font-size:clamp(31px,5vw,42px); font-weight:500;
     letter-spacing:-.02em; line-height:1.13; margin:0; text-wrap:balance }
.chapo { font-size:18.5px; color:var(--ink-soft); margin-top:18px }

h2 { font-family:var(--sans); font-size:21px; font-weight:600; letter-spacing:-.01em;
     margin:52px 0 0; text-wrap:balance }
h3 { font-family:var(--sans); font-size:16.5px; font-weight:600; margin:28px 0 0 }
p  { margin:13px 0 0; color:var(--ink-soft) }
b, strong { color:var(--ink) }
a { color:var(--accent-deep) }

ol.etapes { margin:20px 0 0; padding:0; list-style:none; counter-reset:etape }
ol.etapes li { counter-increment:etape; position:relative; padding-left:44px; margin-top:18px; color:var(--ink-soft) }
ol.etapes li::before {
  content:counter(etape); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:50%; background:var(--wash); color:var(--accent-deep);
  display:grid; place-items:center; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
}
ol.etapes b { display:block; color:var(--ink) }

ul { margin:13px 0 0; padding-left:20px; color:var(--ink-soft) }
li { margin-top:7px }

.franchise { background:var(--warn-wash); border:1px solid rgba(178,106,0,.18);
             border-radius:12px; padding:18px 20px; margin-top:26px }
.franchise p { color:#8a5400; margin-top:8px }
.franchise p:first-child { margin-top:0 }
.franchise b { color:#6d4200 }

.faq { margin-top:14px; border-top:1px solid var(--rule) }
.faq__q { border-bottom:1px solid var(--rule); padding:18px 0 }
.faq__q h3 { margin:0 }
.faq__q p { margin-top:7px }

.offre { margin-top:56px; background:var(--sheet); border:1px solid var(--rule);
         border-radius:14px; padding:26px 24px;
         box-shadow:0 1px 2px rgba(20,22,31,.05), 0 18px 44px rgba(20,22,31,.06) }
.offre h2 { margin:0; font-size:19px }
.offre p { margin-top:10px }
.offre__prix { font-family:var(--serif); font-size:34px; color:var(--ink); margin-top:14px; line-height:1 }
.offre__prix span { font-family:var(--sans); font-size:13px; color:var(--ink-faint); margin-left:7px }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
       font:inherit; font-weight:500; text-decoration:none; padding:11px 18px; border-radius:9px;
       background:var(--accent); color:#fff; border:1px solid transparent }
.btn:hover { background:var(--accent-deep) }
.btn--quiet { background:var(--sheet); color:var(--ink); border-color:var(--rule) }
.btn--quiet:hover { background:var(--sheet); border-color:var(--ink-faint) }

.voisines { margin-top:52px; padding-top:24px; border-top:1px solid var(--rule) }
.voisines h2 { margin:0 0 4px; font-size:16px }
.voisines ul { list-style:none; padding:0; margin-top:10px }
.voisines li { margin-top:8px }
.voisines a { text-decoration:none; border-bottom:1px solid var(--rule) }
.voisines a:hover { border-bottom-color:var(--accent) }

.pied { margin-top:46px; padding-top:20px; border-top:1px solid var(--rule);
        font-size:13.5px; color:var(--ink-faint) }
.pied a { color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule) }