/* Feuille de style partagée des pages de contenu SEO — charte ONN-OFF */
:root{
  --cream:#F6F1E8; --gold:#8C6A2E; --gold-d:#6F521F;
  --ink:#211C13; --muted:#6F6553; --panel:#EFEADD; --line:#E4DCCB;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:var(--gold-d)}
h1,h2,h3{font-family:Georgia,'Newsreader','Spectral',serif; line-height:1.18; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; margin:0}
h1{font-size:clamp(30px,5vw,44px); font-weight:700}
h2{font-size:clamp(23px,3.4vw,30px); font-weight:700; margin-top:44px}
h3{font-size:19px; margin-top:26px}
p{margin:16px 0}
.eyebrow{font-family:'Hanken Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:800; color:var(--gold)}

/* header / footer */
.site-header{border-bottom:1px solid var(--line); background:rgba(246,241,232,.9); backdrop-filter:blur(8px); position:sticky; top:0; z-index:10}
.site-header .row{display:flex; align-items:center; justify-content:space-between; height:60px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:19px; text-decoration:none; color:var(--ink)}
.logo .sw{width:38px;height:22px;border-radius:999px;background:var(--gold);position:relative;flex:none}
.logo .sw::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--cream)}
.logo b{color:var(--ink)} .logo i{font-style:normal;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;padding:11px 20px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s,background .12s}
.btn-primary{background:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-d);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold)}
.site-header .btn{padding:8px 15px;font-size:14px}

/* article */
main{padding:38px 0 10px}
.lede{font-size:19px;color:var(--muted)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--gold)}
ul.check{list-style:none;padding:0;margin:18px 0;display:grid;gap:11px}
ul.check li{display:flex;gap:11px;align-items:flex-start}
ul.check li::before{content:"✓";color:var(--gold);font-weight:800;flex:none}
/* Variante « flow » : le texte de la puce coule normalement au lieu d'etre
   reparti en colonnes par le flex. A utiliser des que la puce contient une
   phrase complete, du gras suivi de texte, ou un lien. */
ul.check.flow li{display:block;position:relative;padding-left:24px}
ul.check.flow li::before{position:absolute;left:0;top:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin:28px 0}
.tablewrap{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch}
.tablewrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.tablewrap th,.tablewrap td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap thead th{font-weight:700;color:var(--ink);border-bottom:2px solid var(--line);white-space:nowrap}
.tablewrap tbody tr:last-child td{border-bottom:none}
.tablewrap td strong{white-space:nowrap}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--gold);font-weight:800;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.cta-band{background:var(--ink);color:var(--cream);border-radius:20px;padding:40px;text-align:center;margin:44px 0}
.cta-band h2{color:#fff;margin-top:0}
.cta-band p{color:#D8CDB8;max-width:44ch;margin:12px auto 0}
.cta-band .btns{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.cta-band .btn-ghost{color:var(--cream);border-color:rgba(246,241,232,.35)}
.cta-band .btn-ghost:hover{border-color:var(--cream)}
footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 0 50px;color:var(--muted);font-size:14px}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none;margin-left:16px}
footer a:hover{color:var(--gold)}
@media(max-width:560px){ footer .row{flex-direction:column} footer a{margin:0 16px 0 0} .cta-band,.panel{padding:24px} }

/* Navigation des pages statiques. Sans elle, un visiteur arrive de Google sur
   un guide n'avait qu'un logo pour repartir : aucun moyen de parcourir le site.
   La hauteur du bandeau devient libre pour que le menu passe a la ligne sur
   petit ecran plutot que d'etre masque — le cacher reviendrait a ne rien
   corriger la ou le besoin est le plus fort. */
.site-header .row{height:auto;min-height:60px;flex-wrap:wrap;gap:10px 18px;padding:9px 0}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14.5px;margin-left:auto}
.site-nav a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:var(--gold);color:var(--gold)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--gold);font-weight:600}

/* ------------------------------------------------------------------ vidéo
   Une miniature cliquable, pas un lecteur YouTube. Rien n'est demandé à
   YouTube tant que le visiteur n'a pas cliqué : la page reste légère et la
   promesse « aucun traceur tiers » de la politique de confidentialité reste
   vraie. Au clic, le lecteur arrive en mode sans cookie. */
.video{margin:26px 0 30px;padding:0}
.video-play{
  display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;position:relative;cursor:pointer;
  background:var(--panel);line-height:0;
}
.video-play:hover{border-color:var(--gold)}
.video-play img{width:100%;height:auto;display:block}
.video-tri{
  position:absolute;left:50%;top:50%;width:74px;height:52px;
  transform:translate(-50%,-50%);border-radius:12px;
  background:rgba(33,28,19,.78);transition:background .15s;
}
.video-play:hover .video-tri{background:var(--gold)}
.video-tri::after{
  content:"";position:absolute;left:52%;top:50%;
  transform:translate(-50%,-50%);border-style:solid;
  border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;
}
.video-duree{
  position:absolute;right:10px;bottom:10px;padding:2px 7px;border-radius:5px;
  background:rgba(33,28,19,.82);color:#fff;font-size:12.5px;line-height:1.6;
}
.video figcaption{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.6}
.video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;display:block}