:root{--fond:#f4f8f6;--texte:#193c33;--secondaire:#61786b;--vert:#087f70;--fonce:#073f3b;--bordure:#dce7df}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.65 "Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--vert);text-underline-offset:4px}
button,input,select{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #35a3cf;outline-offset:3px}
.application{display:grid;grid-template-columns:minmax(310px,36%) minmax(0,1fr);min-height:100vh}
.presentation{position:sticky;top:0;display:flex;flex-direction:column;align-self:start;min-height:100vh;height:100dvh;padding:42px clamp(25px,4vw,66px);overflow:auto;background:radial-gradient(ellipse at 0% 90%,#1e7760 0,transparent 58%),linear-gradient(140deg,#073f3b,#052e2c);color:white}
.marque{display:flex;align-items:center;gap:13px;color:white;text-decoration:none;font-size:24px;font-weight:800}
.marque small{display:block;margin-top:1px;color:#b2d6c4;font-size:11px;font-weight:400;letter-spacing:.4px}
.symbole{display:grid;place-items:center;width:49px;height:49px;flex-shrink:0;border-radius:15px;background:#d1efdb;color:#073f3b;font-size:37px;font-weight:400}
.promesse{margin:auto 0;padding:65px 0 35px}
.etiquette{font-size:9px;letter-spacing:1.7px;color:#b3ddc8;font-weight:700}
h1{margin:22px 0;font-size:clamp(30px,3vw,43px);line-height:1.17;letter-spacing:-1.1px}
.promesse p{max-width:370px;color:#c6e0d4;font-size:14px;line-height:1.9}
.avantages{padding-top:10px}
.avantages p{display:flex;align-items:center;gap:13px;margin:17px 0;font-size:12px;color:#d6e9e0}
.avantages span{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border:1px solid #72ad9359;border-radius:9px;color:#bde4cc;font-size:10px}
.bas-presentation{margin:36px 0 0;padding-top:20px;border-top:1px solid #ffffff20;color:#a9cdbb;font-size:11px}
main{min-width:0}
.haut{display:flex;justify-content:space-between;gap:18px;padding:25px 40px;border-bottom:1px solid var(--bordure);background:#ffffffb0;font-size:12px}
.haut a{text-decoration:none;font-weight:600}
.haut span{color:var(--secondaire)}
.formulaire{max-width:850px;margin:auto;padding:38px clamp(22px,4vw,60px) 25px}
.etapes{display:flex;gap:10px;padding:0;margin:0 0 35px;list-style:none;font-size:11px}
.etapes li{padding:7px 12px;border-radius:8px;background:#eaf0ec;color:#758b7d}
.etapes .active{background:#dcefe5;color:#076a5c;font-weight:700}
.surtitre{margin:0 0 10px;color:var(--vert);font-size:9px;letter-spacing:1.5px;font-weight:800}
h2{margin:0 0 15px;font-size:clamp(27px,3vw,36px);line-height:1.2;letter-spacing:-.8px}
.introduction{margin:0 0 27px;color:var(--secondaire);font-size:13px;max-width:640px}
fieldset{min-width:0;margin:27px 0 0;padding:24px;border:1px solid var(--bordure);border-radius:17px;background:white}
legend{padding:0 8px;font-size:16px;font-weight:750}
legend>span{margin-right:7px;color:var(--vert);font-size:11px}
legend em{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:6px;background:#edf3ef;color:#61786b;font-size:9px;font-style:normal;font-weight:500}
.aide-section{margin:0 0 20px;color:var(--secondaire);font-size:12px}
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.champ{min-width:0}
.large{grid-column:1/-1}
label{display:block;margin-bottom:7px;font-size:12px;font-weight:650}
label span{color:var(--vert)}
input,select{display:block;width:100%;min-width:0;min-height:47px;padding:11px 12px;border:1px solid #bbcec1;border-radius:9px;background:#fcfefd;color:var(--texte);font-size:14px}
input:focus,select:focus{border-color:var(--vert);box-shadow:0 0 0 3px #087f7010}
small{display:block;margin-top:7px;color:var(--secondaire);font-size:10px;line-height:1.7}
.aide-motdepasse{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:13px;color:var(--secondaire);font-size:10px}
.lien-bouton{padding:0;border:0;background:none;color:var(--vert);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.note{margin:24px 0;padding:16px 18px;border:1px solid #d3e7dc;border-radius:11px;background:#eaf4ee;color:#3e6652;font-size:12px}
.bouton{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:51px;margin-top:23px;padding:13px 18px;border:0;border-radius:11px;background:var(--vert);color:#fff;text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 5px 16px #087f7014}
.bouton:hover{background:#06695c}
.assistance{margin:20px 0;color:var(--secondaire);text-align:center;font-size:11px}
.alerte{padding:15px 18px;margin:20px 0;border:1px solid;border-radius:11px;font-size:13px}
.erreur{background:#fff0eb;border-color:#edcec3;color:#8b3827}
.succes{background:#e7f5ec;border-color:#badfc7;color:#245a3b}
.code-saisie{max-width:330px;font-size:28px;font-weight:700;letter-spacing:9px;text-align:center}
.renvoi{text-align:center;margin:22px 0}
.code-etablissement{margin:25px 0;padding:20px;border:1px solid #c4dece;border-radius:12px;background:#eaf5ee}
.code-etablissement span{display:block;font-size:9px;letter-spacing:1px;color:#5d7969}
.code-etablissement strong{display:block;margin-top:8px;font-size:25px;letter-spacing:2px}
footer{padding-top:27px;margin-top:30px;border-top:1px solid var(--bordure);color:#7a8c81;font-size:10px;text-align:center}
@media(max-width:1000px){.application{grid-template-columns:310px minmax(0,1fr)}.presentation{padding:30px 25px}.formulaire{padding-inline:24px}fieldset{padding:19px}.grille{grid-template-columns:1fr}.large{grid-column:auto}}
@media(max-width:740px){.application{grid-template-columns:1fr}.presentation{position:static;height:auto;min-height:0;padding:24px}.promesse{padding:28px 0 0}.promesse h1{font-size:29px;max-width:470px;margin:15px 0}.promesse p{max-width:none;margin-bottom:0}.avantages,.bas-presentation{display:none}.haut{padding:17px 23px}.formulaire{padding:28px 18px}.grille{grid-template-columns:repeat(2,minmax(0,1fr))}.large{grid-column:1/-1}input,select{font-size:16px}}
@media(max-width:480px){.grille{grid-template-columns:1fr}.large{grid-column:auto}.haut span{display:none}fieldset{padding:18px 15px}.etapes{margin-bottom:25px}.aide-motdepasse{flex-direction:column;align-items:flex-start}.marque{font-size:21px}}