:root{--vert:#043515;--vert2:#0b5a2a;--or:#f3be22;--rouge:#be070b;--fond:#f6f5f0;--texte:#16201a;--gris:#5c665f;--trait:#cfd5cf}
*{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--texte);background:var(--fond);line-height:1.55}
.bandeau{background:var(--vert);color:#fff;display:flex;align-items:center;gap:.8rem;padding:.75rem max(1rem,calc((100vw - 38rem)/2));border-bottom:4px solid var(--or);min-height:4.25rem}
.bandeau img{border-radius:50%;flex:none}
.bandeau p{margin:0;font-weight:650;font-size:.95rem;line-height:1.25;letter-spacing:.01em}
main{width:min(100%,40rem);margin:0 auto;padding:1.25rem 1rem calc(8rem + env(safe-area-inset-bottom,0px))}
h1{font-size:clamp(1.45rem,4.2vw,2rem);line-height:1.2;letter-spacing:-.025em;margin:.55rem 0 1rem;color:var(--vert);text-wrap:pretty}
.points{padding-left:1.2rem;margin:0 0 1.2rem}
.points li{margin:.55rem 0;padding-left:.1rem}
.parcours{background:#fff;border:1px solid var(--trait);border-left:6px solid var(--or);border-radius:.65rem;padding:.85rem 1rem;margin:1.2rem 0;box-shadow:0 3px 12px rgba(4,53,21,.045)}
.parcours strong{color:var(--vert)}
.parcours span{display:inline-block;margin-top:.2rem;color:var(--gris);font-size:.9rem}
.bouton{display:flex;align-items:center;justify-content:center;width:100%;min-height:3.4rem;padding:.85rem 1rem;border:2px solid var(--vert);border-radius:.65rem;background:var(--vert);color:#fff;font:inherit;font-weight:700;font-size:1.06rem;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.bouton:hover{background:var(--vert2);border-color:var(--vert2)}
.bouton:active{transform:translateY(1px)}
.bouton.secondaire{background:#fff;color:var(--vert);font-weight:650;font-size:1rem}
.bouton.secondaire:hover{background:#edf4ee}
.bouton[disabled]{opacity:.65;cursor:wait}
.bouton:focus-visible,.lien:focus-visible,input:focus-visible+span,textarea:focus-visible,summary:focus-visible,.evitement:focus-visible{outline:3px solid #146b35;outline-offset:3px}
.lien{display:block;text-align:center;padding:.9rem .5rem;color:var(--vert);font-weight:650;text-underline-offset:.2em}
.autre{margin:1rem 0 0;border-top:1px solid var(--trait);padding-top:.4rem}
.autre summary{padding:.8rem 0;color:var(--vert);font-weight:600;cursor:pointer;min-height:2.75rem}
.autre .bouton,.choix .bouton{margin:.55rem 0}
.choix{display:grid;gap:.65rem;margin-top:1.2rem}
.choix .bouton{justify-content:space-between;margin:0;padding-inline:1rem}
.progression{height:.55rem;background:#e0e5df;border-radius:1rem;overflow:hidden;box-shadow:inset 0 1px 2px rgba(22,32,26,.08)}
#barre{height:100%;width:0;background:var(--or);transition:width .2s ease}
.etape{margin:.45rem 0 1rem;color:var(--gris);font-size:.88rem;font-weight:600;letter-spacing:.015em}
.ecran h1{margin-top:.65rem}
.consigne{margin:0 0 1.15rem;color:var(--gris)}
.question{border:0;border-bottom:1px solid #e1e5e0;padding:0 0 1rem;margin:0 0 1.25rem;min-width:0}
.question legend{font-weight:700;font-size:1.04rem;line-height:1.35;padding:0;margin-bottom:.65rem;color:var(--texte)}
.notes label,.choix-2 label{display:block;margin:.45rem 0;position:relative}
.notes input,.choix-2 input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.notes span,.choix-2 span{display:flex;align-items:center;min-height:3rem;padding:.55rem .9rem;border:2px solid var(--trait);border-left-width:.6rem;border-radius:.55rem;background:#fff;font-weight:650;line-height:1.35;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.notes label:hover span,.choix-2 label:hover span{border-color:var(--vert2)}
.n1 span{border-left-color:#b3261e}.n2 span{border-left-color:#e07a2f}.n3 span{border-left-color:#9aa19b}.n4 span{border-left-color:#5aa85f}.n5 span{border-left-color:#1c7a36}
.nc span{font-weight:400;color:var(--gris);border-style:dashed;border-left-width:2px;min-height:2.75rem;font-size:.92rem}
.notes input:checked+span,.choix-2 input:checked+span{background:var(--vert);border-color:var(--vert);color:#fff}
.notes input:checked+span::after,.choix-2 input:checked+span::after{content:"✓";margin-left:auto;padding-left:.5rem;font-weight:700}
.choix-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.choix-2 span{border-left-width:2px;justify-content:center}
.commentaire{display:block;font-weight:700;margin:1.1rem 0}
.commentaire small{font-weight:400;color:var(--gris)}
textarea{display:block;width:100%;min-height:5rem;margin-top:.45rem;padding:.75rem;border:2px solid var(--trait);border-radius:.55rem;font:inherit;background:#fff;resize:vertical}
.avis-anonymat{background:#fff7dc;border:1px solid #d8a819;border-left:5px solid var(--or);border-radius:.55rem;padding:.8rem 1rem;font-size:.92rem}
.erreur{background:#fdecea;border:2px solid var(--rouge);color:#7a0507;border-radius:.55rem;padding:.8rem .9rem;font-weight:600}
.navigation{position:fixed;z-index:5;left:0;right:0;bottom:0;display:flex;gap:.65rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--trait);box-shadow:0 -5px 18px rgba(22,32,26,.08);backdrop-filter:blur(8px)}
.navigation .bouton{min-height:3.15rem}.navigation .secondaire{flex:0 0 34%}
.navigation [hidden]{display:none}
.piege{position:absolute;left:-999rem;height:0;overflow:hidden}
.merci{text-align:center;padding-top:2rem}
.merci h1{font-size:clamp(1.8rem,5vw,2.3rem)}
.coche{width:5rem;height:5rem;line-height:5rem;margin:0 auto 1rem;border-radius:50%;background:var(--vert);color:var(--or);font-size:2.6rem;font-weight:700}
.discret{color:var(--gris);font-size:.92rem}
.evitement{position:absolute;top:.5rem;left:.5rem;z-index:10;transform:translateY(-180%);background:#fff;color:var(--vert);padding:.65rem .9rem;border:2px solid var(--vert);border-radius:.4rem;font-weight:700}
.evitement:focus{transform:translateY(0)}
.pied{max-width:40rem;margin:0 auto;padding:.2rem 1rem 1rem;text-align:center;font-size:.8rem}
.pied a{color:var(--gris);text-underline-offset:3px}
.pied a:focus-visible{outline:3px solid #146b35;outline-offset:3px;border-radius:.2rem}
[hidden]{display:none!important}
:focus{scroll-margin-top:1rem;scroll-margin-bottom:6rem}
@media(max-width:25rem){
  main{padding-inline:.85rem}
  .bandeau{padding-inline:.85rem}
  .choix-2{gap:.4rem}
  .navigation{gap:.45rem;padding-inline:.7rem;padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px))}
  .navigation .secondaire{flex-basis:32%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}