@font-face{font-family:"Marcellus";src:url("fonts/marcellus-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --sapin:#1F3A33;--brume:#EEF1EC;--soleil:#E0A33A;--ocre:#8A5A10;--blanc:#FFFFFF;--pale:#DCE3DA;
  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --texte:"Figtree","Segoe UI",system-ui,sans-serif;
  --largeur:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--brume);color:var(--sapin);font-family:var(--texte);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--sapin)}
a:hover{color:var(--ocre)}
:focus-visible{outline:3px solid var(--soleil);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.25rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
h3{font-size:1.5rem}
p{margin:0;text-wrap:pretty}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.blanc{background:var(--blanc)}
.sombre{background:var(--sapin);color:var(--brume)}
.sombre a{color:var(--brume)}
.pile{display:flex;flex-direction:column;gap:18px}
.rangee{display:flex;flex-wrap:wrap;gap:20px}
.rangee>*{flex:1 1 240px}
.mesure{max-width:62ch}
.lien-evitement{position:absolute;left:-999px;top:8px;background:var(--sapin);color:var(--brume);padding:10px 16px;border-radius:8px;z-index:10}
.lien-evitement:focus{left:16px}

/* En-tête */
.entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.75rem}
.marque svg{width:38px;height:38px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:1rem}
.nav a{text-decoration:none}

/* Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid var(--sapin);background:var(--sapin);color:var(--brume)}
.bouton:hover{background:#2C5047;color:var(--brume)}
.bouton.secondaire{background:transparent;color:var(--sapin)}
.bouton.secondaire:hover{background:var(--pale);color:var(--sapin)}
.bouton.soleil{background:var(--soleil);border-color:var(--soleil);color:var(--sapin)}
.bouton.soleil:hover{background:#EBB55A}
.boutons{display:flex;flex-wrap:wrap;gap:14px}

/* Héros */
.heros{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:48px;padding-bottom:80px}
.heros-texte{flex:1 1 460px;display:flex;flex-direction:column;gap:22px}
.sous-titre{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ocre);line-height:1.2}
.chapeau{font-size:1.1875rem;max-width:34em}
.panneau{flex:1 1 360px;min-height:420px;border-radius:18px;background:var(--sapin);display:flex;align-items:center;justify-content:center;overflow:hidden}
.panneau svg{width:46%;max-width:220px;height:auto}
.panneau img{width:100%;height:100%;object-fit:cover}

/* Bandeau */
.bandeau{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 28px;padding-top:24px;padding-bottom:24px;font-weight:600}
.bandeau span{display:flex;align-items:center;gap:10px}
.point{width:9px;height:9px;border-radius:50%;background:var(--soleil);flex:none}

/* Cartes */
.carte{background:var(--blanc);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:10px}
.blanc .carte{background:var(--brume)}
.carte .prix{font-family:var(--display);font-size:2.75rem;line-height:1}
.carte.forte{background:var(--sapin);color:var(--brume)}
.carte.forte .accroche{color:var(--soleil)}
.carte .bas{margin-top:auto;padding-top:8px}
.accroche{font-size:.9375rem;font-weight:600;color:var(--ocre)}
.discret{font-size:.9375rem}

/* Étapes */
.etape .numero{font-family:var(--display);font-size:2.75rem;color:var(--ocre);line-height:1}
.etape h3{font-family:var(--texte);font-weight:600;font-size:1.125rem}

/* Colonnes honnêteté */
.colonnes{display:flex;flex-wrap:wrap;gap:40px 56px}
.colonnes>*{flex:1 1 380px}
.sombre .accroche{color:var(--soleil)}

/* FAQ */
.faq{display:flex;flex-wrap:wrap;gap:28px 56px}
.faq>div{flex:1 1 420px}
.faq h3{font-family:var(--texte);font-weight:600;font-size:1.0625rem;margin-bottom:6px}

/* Pied de page */
.pied{padding-top:44px;padding-bottom:44px;display:flex;flex-direction:column;gap:16px;font-size:.9375rem}
.pied nav{display:flex;flex-wrap:wrap;gap:22px}

/* Pages de texte */
.texte-long{max-width:72ch;display:flex;flex-direction:column;gap:14px}
.texte-long h2{font-size:1.75rem;margin-top:24px}
.texte-long ul{margin:0;padding-left:1.2em}

@media (max-width:640px){
  .section{padding:64px 0}
  .heros{padding-top:24px;padding-bottom:56px}
  .panneau{min-height:260px}
  .nav{gap:14px}
}

/* --- Ajouts SEO / pages pratiques --- */
.h1-lieu{display:block;font-family:var(--texte);font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--ocre);margin-bottom:14px;letter-spacing:0}
.h1-titre{display:block}
.fil{font-size:.9375rem;padding-top:4px}
.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fil li+li::before{content:"/";margin-right:6px;color:var(--ocre)}
.encart{background:var(--blanc);border-radius:14px;padding:24px 28px;display:flex;flex-direction:column;gap:10px}
.texte-long h2{margin-top:32px}
.texte-long h3{font-family:var(--texte);font-weight:600;font-size:1.0625rem;margin-top:10px}
.texte-long li{margin-bottom:8px}
.cartes-corps .carte{gap:12px}
.cartes-corps .carte a.suite{margin-top:auto;font-weight:600}
.page-intro{padding-top:24px;padding-bottom:40px;display:flex;flex-direction:column;gap:20px}
.page-intro .chapeau{max-width:40em}
.pied .nap{line-height:1.7}