:root {
  --vert: #145a32;
  --vert-clair: #2e9e4f;
  --vert-fond: #eef7f1;
  --encre: #1c2420;
  --gris: #5b6660;
  --trait: #dfe7e2;
  --fond: #ffffff;
  --titre: "Outfit", system-ui, sans-serif;
  --main: "Caveat", "Segoe Print", cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.6 var(--titre); }
a { color: var(--vert); }
img { max-width: 100%; display: block; }
.page { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

header.haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
header.haut .logo img { height: 52px; width: auto; }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; background: var(--vert); color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; border: 2px solid var(--vert); transition: background .15s; }
.bouton:hover { background: #0f4527; }
.bouton.leger { background: transparent; color: var(--vert); }
.bouton.leger:hover { background: var(--vert-fond); }
.bouton.petit { padding: 9px 18px; font-size: 15px; }

.hero { padding: 48px 0 56px; text-align: center; }
.hero .main { font-family: var(--main); color: var(--vert-clair); font-size: 30px; margin: 0 0 6px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.1; margin: 0 auto 18px; max-width: 16ch; color: var(--vert); font-weight: 700; }
.hero p.chapo { max-width: 620px; margin: 0 auto 30px; color: var(--gris); font-size: 19px; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.souligne { background: linear-gradient(transparent 62%, #cdeed8 62%); padding: 0 .1em; }

section { padding: 56px 0; border-top: 1px solid var(--trait); }
section h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; color: var(--vert); margin: 0 0 10px; }
section .intro { color: var(--gris); max-width: 680px; margin: 0 0 32px; }
.note-main { font-family: var(--main); color: var(--vert-clair); font-size: 26px; line-height: 1.2; }

.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 32px; }
.doc { border: 2px solid var(--vert); border-radius: 14px 18px 12px 16px; padding: 22px; background: #fff; }
.doc .num { font-family: var(--main); font-size: 40px; color: var(--vert-clair); line-height: 1; }
.doc h3 { margin: 6px 0 6px; font-size: 20px; }
.doc p { margin: 0; color: var(--gris); font-size: 16px; }

.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: e; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.etapes li::before { content: counter(e); font-family: var(--main); font-size: 30px; color: #fff; background: var(--vert-clair); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.etapes b { display: block; font-size: 18px; }
.etapes span { color: var(--gris); }

.jamais { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.jamais li { position: relative; padding-left: 40px; font-size: 18px; }
.jamais li::before { content: "✕"; position: absolute; left: 0; top: -2px; color: #c0392b; font-size: 24px; font-weight: 700; }

.bandeau { background: var(--vert-fond); border-radius: 18px; padding: 36px 28px; text-align: center; }
.bandeau h2 { margin-bottom: 8px; }
.bandeau p { color: var(--gris); margin: 0 0 22px; }

footer { border-top: 1px solid var(--trait); padding: 32px 0 40px; color: var(--gris); font-size: 14px; }
footer .mention { background: #f6f8f7; border: 1px solid var(--trait); border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; font-size: 14px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }

.texte { max-width: 760px; padding: 24px 0 56px; }
.texte h1 { color: var(--vert); font-size: clamp(30px, 5vw, 42px); line-height: 1.15; margin: 10px 0 8px; }
.texte h2 { color: var(--vert); font-size: 22px; margin: 34px 0 8px; }
.texte .maj { color: var(--gris); font-size: 15px; }
.texte table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 8px 0; }
.texte th, .texte td { border: 1px solid var(--trait); padding: 8px 10px; text-align: left; vertical-align: top; }
.texte th { background: var(--vert-fond); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .docs { grid-template-columns: 1fr; }
  header.haut .logo img { height: 42px; }
  .hero { padding: 28px 0 40px; }
  section { padding: 44px 0; }
  .texte table { display: block; overflow-x: auto; }
}

/* Page de présentation */
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.sommaire a { padding: 8px 16px; border-radius: 999px; background: var(--vert-fond); color: var(--vert); text-decoration: none; font-weight: 600; font-size: 15px; }
.sommaire a:hover { background: #dcefe3; }
.hero .actions + .sommaire { margin-top: 22px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.deux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 24px; }
.carte { border: 1px solid var(--trait); border-radius: 16px; padding: 22px; background: #fff; }
.carte p { margin: 0 0 10px; color: var(--gris); }
.carte .note-main { margin-bottom: 4px; }
.carte h3 { margin: 0 0 8px; font-size: 21px; color: var(--encre); }
.coches { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.coches li { position: relative; padding-left: 38px; color: var(--gris); }
.coches li b { color: var(--encre); }
.coches li::before { content: "✓"; position: absolute; left: 0; top: -3px; color: var(--vert-clair); font-size: 24px; font-weight: 700; }
.encadre { background: var(--vert-fond); border-radius: 16px; padding: 24px; margin: 0 0 30px; }
.encadre p { margin: 0 0 10px; }
.encadre p:last-child { margin: 0; }
h3.sous { font-size: 20px; margin: 26px 0 12px; color: var(--vert); }
table.bareme, table.profils { border-collapse: collapse; width: 100%; font-size: 16px; }
.bareme th, .bareme td, .profils th, .profils td { padding: 9px 10px; border-bottom: 1px solid var(--trait); text-align: left; white-space: nowrap; }
.bareme th, .profils th { font-size: 14px; color: var(--gris); font-weight: 600; }
.profils td:first-child { color: var(--gris); }
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.pastille.bleu { background: #2f6fd6; } .pastille.jaune { background: #f2c230; } .pastille.violet { background: #8a4fd0; } .pastille.rose { background: #e56aa6; }
.source { font-size: 14px; color: var(--gris); margin-top: 14px; }
.compte a { font-weight: 600; }
.logo-tiers { height: 64px; width: auto; margin-bottom: 14px; }
.logo-tiers.carre { height: 56px; }
@media (max-width: 760px) {
  .trois, .deux { grid-template-columns: 1fr; }
  .bareme th, .bareme td, .profils th, .profils td { font-size: 14px; padding: 8px 8px; }
}