:root{
  --vert:#0E473C;
  --vert-sombre:#0A362D;
  --vert-clair:#5BB57A;
  --encre:#152420;
  --gris:#687973;
  --trait:#DDE4E1;
  --fond:#F1F4F2;
  --blanc:#FFFFFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.contenu{max-width:660px;margin:0 auto;padding:0 24px}

/* Bandeau logo */
.bandeau{background:var(--blanc);border-bottom:1px solid var(--trait)}
.bandeau-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{display:block;height:auto}
.etiquette{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--gris);border:1px solid var(--trait);border-radius:100px;padding:5px 12px;white-space:nowrap;
}

/* Hero */
.hero{background:var(--vert);color:#fff;padding:52px 0 44px}
.hero-court{padding:46px 0 40px}
.hero h1{
  font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:40px;line-height:1.12;letter-spacing:-.01em;margin:0 0 18px;
}
.hero h1 em{font-style:normal;color:var(--vert-clair)}
.chapo{margin:0;font-size:15px;line-height:1.6;color:#C3D6CF;max-width:52ch}
.faits{
  list-style:none;display:flex;flex-wrap:wrap;gap:0;
  margin:32px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.16);
}
.faits li{flex:1 1 30%;min-width:120px;padding-left:18px;border-left:1px solid rgba(255,255,255,.16)}
.faits li:first-child{padding-left:0;border-left:none}
.faits strong{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:23px;color:#fff}
.faits span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8FB2A7;margin-top:3px}

/* Carte */
main{margin:-26px 0 0;position:relative}
.carte{
  background:var(--blanc);border:1px solid var(--trait);border-radius:3px;
  padding:34px 30px 32px;box-shadow:0 2px 14px rgba(14,71,60,.06);
}
.intro{margin:0 0 30px;font-size:14px;line-height:1.65;color:var(--gris)}
.intro-merci{font-size:16px;color:var(--encre)}

.section{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vert);
  margin:0 0 20px;padding-bottom:9px;border-bottom:1px solid var(--trait);
}
.section:not(:first-of-type){margin-top:36px}

.champ{margin:0 0 20px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;font-size:13px;font-weight:500;margin:0 0 7px;color:var(--encre)}
input[type=text],input[type=email],input[type=tel],select{
  width:100%;padding:11px 13px;
  border:1px solid var(--trait);border-radius:3px;background:#fff;
  font:inherit;font-size:15px;color:var(--encre);transition:border-color .15s,box-shadow .15s;
}
select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%230E473C' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
select:invalid{color:var(--gris)}
input:hover,select:hover{border-color:#B7C4BF}
input:focus,select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(91,181,122,.22)}

.aide{margin:0 0 4px;font-size:13px;color:var(--gris)}

/* Curseurs */
.surface{
  background:var(--fond);border:1px solid var(--trait);border-radius:3px;
  padding:18px 20px 15px;margin:14px 0 16px;
}
.surface-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.surface-tete label{margin:0}
.valeur{
  margin:0;font-family:'Newsreader',Georgia,serif;font-size:29px;line-height:1;color:var(--vert);
}
.valeur em{font-family:'Inter',sans-serif;font-style:normal;font-size:13px;color:var(--gris)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;margin:0;cursor:pointer;
  background:linear-gradient(to right,var(--vert) var(--progression,0%),#CFD9D5 var(--progression,0%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--vert);border:4px solid #fff;box-shadow:0 1px 4px rgba(14,71,60,.35);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--vert);border:4px solid #fff;box-shadow:0 1px 4px rgba(14,71,60,.35);cursor:pointer;
}
input[type=range]:focus-visible{outline:2px solid var(--vert-clair);outline-offset:4px}
.bornes{display:flex;justify-content:space-between;font-size:11px;color:var(--gris);margin-top:9px}

button{
  width:100%;padding:15px;margin-top:26px;
  background:var(--vert);color:#fff;border:none;border-radius:3px;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;
}
button:hover{background:var(--vert-sombre)}
button:focus-visible{outline:2px solid var(--vert-clair);outline-offset:3px}
button:disabled{background:var(--gris);cursor:default}

.erreur{
  display:none;background:#FCF1EE;border-left:3px solid #C0503C;border-radius:2px;
  padding:13px 15px;margin:26px 0 0;font-size:13px;color:#8A3524;
}
.erreur a{color:var(--vert)}
.mention{margin:18px 0 0;font-size:12px;line-height:1.6;color:var(--gris)}
.mention a{color:var(--vert)}

/* Etapes page merci */
.etapes{list-style:none;margin:0;padding:0}
.etapes li{display:flex;gap:16px;padding:0 0 22px}
.etapes li:last-child{padding-bottom:4px}
.rang{
  flex:0 0 30px;height:30px;border-radius:50%;
  background:var(--vert);color:#fff;
  font-family:'Newsreader',Georgia,serif;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.etapes strong{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
.etapes p{margin:0;font-size:14px;color:var(--gris)}

/* Pied */
footer{margin:44px 0 0;background:var(--blanc);border-top:1px solid var(--trait);padding:30px 0 26px}
.pied{display:flex;flex-wrap:wrap;gap:22px 40px;font-size:12.5px;line-height:1.7;color:var(--gris)}
.pied p{margin:0}
.raison{color:var(--vert);font-weight:600;font-size:13px;letter-spacing:.06em;margin-bottom:2px!important}
.pied a{color:var(--vert);text-decoration:none}
.pied a:hover{text-decoration:underline}
.legal{margin-top:22px;padding-top:16px;border-top:1px solid var(--trait);font-size:11px;color:#93A29D}
.legal p{margin:0}

@media (max-width:560px){
  .hero{padding:40px 0 36px}
  .hero h1{font-size:31px}
  .faits li{flex:1 1 100%;padding:12px 0 0;border-left:none;border-top:1px solid rgba(255,255,255,.14)}
  .faits li:first-child{padding-top:0;border-top:none}
  .faits{gap:10px}
  .duo{grid-template-columns:1fr;gap:20px}
  .carte{padding:26px 20px 26px}
  .contenu{padding:0 18px}
  .etiquette{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}