/* Charte Balise — reprise à l'identique du diagnostic (site/index.html) */
:root{
  --mer:#E7ECE8; --papier:#F7F8F4; --goudron:#1B1A17; --quai:#5A6059;
  --jaune:#F2C12E; --vert:#1E7A4E; --rouge:#B5372A; --filet:#C9D1CA;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--mer);color:var(--goudron);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:28px 22px 64px}
.wrap.large{max-width:1080px}
header.top{display:flex;align-items:center;gap:10px;padding-bottom:28px}
header.top a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
header.top svg{flex:none}
header.top b{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:22px;letter-spacing:.01em}
header.top span{color:var(--quai);font-size:14px}
h1,h2,h3{font-family:var(--display);font-stretch:70%;line-height:1.02;margin:0}
h1{font-size:clamp(40px,8vw,64px);font-weight:850;letter-spacing:-.01em}
h2{font-size:clamp(26px,4.6vw,34px);font-weight:800}
h3{font-size:22px;font-weight:750}
a{color:var(--goudron)}
.lead{font-size:19px;max-width:52ch;margin:18px 0 26px;color:#2c2b27}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:6px;background:var(--goudron);color:var(--papier);font:700 18px/1 var(--body);padding:18px 26px;cursor:pointer;text-decoration:none;min-height:56px}
.btn:hover{background:#34322c}
.btn.jaune{background:var(--jaune);color:var(--goudron)}
.btn.jaune:hover{background:#e3b21f}
.btn.clair{background:#fff;color:var(--goudron);border:1.5px solid var(--goudron)}
.btn.clair:hover{background:var(--papier)}
.btn.petit{font-size:15px;padding:11px 16px;min-height:42px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px}
.panel{background:var(--papier);border:1.5px solid var(--goudron);border-radius:8px;padding:28px 26px}
@media (max-width:560px){.panel{padding:22px 18px}}
.hidden{display:none!important}
.note{font-size:14px;color:var(--quai);margin-top:18px}
.err{color:var(--rouge);font-size:15px;font-weight:600;margin-top:10px}
footer{margin-top:40px;font-size:13px;color:var(--quai)}
footer a{color:inherit}
label.f{display:block;font-size:15px;font-weight:600;margin-top:14px}
label.f input,label.f select,label.f textarea,input.champ,select.champ,textarea.champ{display:block;width:100%;margin-top:6px;font:400 17px var(--body);padding:13px 12px;border:1.5px solid var(--filet);border-radius:6px;background:#fff;color:var(--goudron);min-height:50px}
textarea.champ,label.f textarea{min-height:110px;line-height:1.45;resize:vertical}
label.f input:focus,label.f select:focus,label.f textarea:focus,.champ:focus{border-color:var(--goudron);outline:none;box-shadow:0 0 0 3px rgba(242,193,46,.55)}
@media (prefers-reduced-motion:no-preference){
  .appear{animation:up .35s ease-out both}
  @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* Pages de texte (mentions légales, confidentialité) */
.texte h1{margin-bottom:10px}
.texte h2{font-size:28px;margin:34px 0 10px}
.texte p,.texte li{max-width:64ch}
.texte ul{padding-left:20px}
.a-completer{background:var(--jaune);color:var(--goudron);font-weight:700;padding:1px 6px;border-radius:3px}
.maj{color:var(--quai);font-size:15px}