:root{
  --bleu:#0a3f8f; --bleu-fonce:#072c66; --jaune:#ffc423; --fond:#f4f6f9; --texte:#1b2430; --gris:#5b6675; --trait:#d6dce5; --blanc:#fff;
  --police:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--police);color:var(--texte);background:var(--fond);line-height:1.6;font-size:1.0625rem}
a{color:var(--bleu)}
a:focus-visible,button:focus-visible,label:focus-visible,input:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.conteneur{width:min(100% - 2.5rem,68rem);margin-inline:auto}
main{min-height:60vh}

/* En-tête */
.entete{background:var(--bleu);color:var(--blanc);position:sticky;top:0;z-index:10}
.entete-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}
.marque{display:flex;align-items:center;gap:.7rem;color:var(--blanc);text-decoration:none;font-weight:700;font-size:1.1rem}
.panneau{display:grid;place-items:center;width:2.2rem;height:2.2rem;border:2px solid var(--blanc);border-radius:.4rem;background:var(--bleu-fonce);font-weight:800}
.menu{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.menu a{color:var(--blanc);text-decoration:none;padding:.45rem .75rem;border-radius:.4rem}
.menu a:hover{background:var(--bleu-fonce)}
.menu a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--jaune)}
.menu .menu-cta{background:var(--jaune);color:#1b1500;font-weight:700;margin-left:.5rem}
.menu .menu-cta:hover{background:#ffd75e}
.burger-cb,.burger{display:none}

/* Accueil */
.hero{background:var(--bleu);color:var(--blanc);padding-block:4rem 4.5rem}
.hero-in{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 1.2rem;max-width:18ch}
.chapeau{font-size:1.2rem;color:var(--gris);max-width:60ch}
.hero .chapeau{color:#dbe6f8}
.grand-panneau{display:grid;place-items:center;width:11rem;height:11rem;border:.5rem solid var(--blanc);border-radius:1.2rem;background:var(--bleu-fonce);font-size:7.5rem;font-weight:800;line-height:1;transform:rotate(-4deg)}
.bouton{display:inline-block;background:var(--jaune);color:#1b1500;font-weight:700;text-decoration:none;padding:.7rem 1.3rem;border-radius:.4rem;margin:.25rem .4rem .25rem 0}
.bouton:hover{background:#ffd75e}
.bouton-clair{background:transparent;color:var(--blanc);border:2px solid var(--blanc)}
.bouton-clair:hover{background:var(--bleu-fonce)}

/* Contenu */
.bloc{padding-block:3rem}
.texte{max-width:52rem}
h1{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15;margin:0 0 1rem;color:var(--bleu-fonce)}
h2{font-size:1.5rem;line-height:1.25;margin:2rem 0 .6rem;color:var(--bleu-fonce)}
.sommaire{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 2rem}
.sommaire a{background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--bleu);padding:.5rem .9rem;text-decoration:none;font-weight:600;border-radius:.3rem}
.sommaire a:hover{background:var(--bleu);color:var(--blanc)}
.cas{scroll-margin-top:5rem;border-top:2px solid var(--trait);margin-top:2rem}
.retour{font-weight:600}
.liens{list-style:none;padding:0;margin:2rem 0}
.liens li{background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--jaune);padding:1rem 1.2rem;margin-bottom:.8rem;border-radius:.3rem}
.liens a{font-weight:700;display:block}
.liens span{color:var(--gris)}
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;margin-top:2rem}
.formule{background:var(--blanc);border:1px solid var(--trait);border-top:6px solid var(--bleu);padding:1.4rem;border-radius:.3rem}
.formule h2{margin-top:0}
.prix{font-size:2.2rem;font-weight:800;margin:.2rem 0 1rem;color:var(--bleu)}
.prix small{font-size:.95rem;font-weight:400;color:var(--gris)}
.formule ul{padding-left:1.1rem;margin:0}

/* Blog */
.billet{border-bottom:1px solid var(--trait);padding-block:1.4rem}
.billet h2{margin:.2rem 0 .4rem}
.billet h2 a{text-decoration:none}
.billet h2 a:hover{text-decoration:underline}
time{color:var(--gris);font-size:.95rem}
.article .contenu{margin-top:1.5rem;font-size:1.1rem}
.contenu img{max-width:100%;height:auto;border-radius:.3rem}
.contenu blockquote{border-left:4px solid var(--jaune);margin-left:0;padding-left:1rem;color:var(--gris)}
.pagination{display:flex;gap:.4rem;margin-top:2rem}
.pagination a{padding:.4rem .8rem;border:1px solid var(--trait);background:var(--blanc);text-decoration:none;border-radius:.3rem}
.pagination a[aria-current="page"]{background:var(--bleu);color:var(--blanc);border-color:var(--bleu)}
.alerte{background:#fff4d6;border:1px solid var(--jaune);padding:.8rem 1rem;border-radius:.3rem}

.pied{background:var(--bleu-fonce);color:#cdd9ee;padding-block:1.5rem;font-size:.95rem}
.pied p{margin:0}

@media (max-width:52rem){
  .hero-in{grid-template-columns:1fr}
  .grand-panneau{width:7rem;height:7rem;font-size:4.5rem;order:-1}
  .burger{display:block;cursor:pointer;padding:.6rem;border:2px solid var(--blanc);border-radius:.4rem}
  .burger span,.burger span::before,.burger span::after{display:block;width:1.4rem;height:2px;background:var(--blanc);position:relative;content:""}
  .burger span::before{position:absolute;top:-6px}
  .burger span::after{position:absolute;top:6px}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bleu);flex-direction:column;align-items:stretch;padding:.5rem 1.25rem 1rem}
  .burger-cb:checked ~ .menu{display:flex}
  .menu .menu-cta{margin:.4rem 0 0;text-align:center}
}