:root{
  --papier:#EDE8DC;
  --carte:#F7F3EA;
  --encre:#16202B;
  --doux:#5F5B4E;
  --vert:#2F6B5E;
  --laiton:#A8763E;
  --brique:#9E4B33;
  --trait:rgba(22,32,43,.16);
  --rayon:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:"Spectral",Georgia,serif;font-weight:400;font-size:17px;line-height:1.62;
}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(2.15rem,6.6vw,4rem);line-height:1.04;margin:0 0 .45rem}
h2{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.1;margin:0 0 .6rem}
h3{font-size:1.25rem;margin:0 0 .3rem}
p{margin:0 0 1rem}
a{color:var(--vert)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase}
.discret{color:var(--doux)}
.contenu{max-width:1080px;margin:0 auto;padding:0 20px}
.etroit{max-width:640px;margin:0 auto;padding:0 20px}

/* bandeau */
.bandeau{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  max-width:1080px;margin:0 auto;padding:18px 20px 10px}
.marque{font-family:"Instrument Serif",serif;font-size:1.3rem;color:var(--encre);
  text-decoration:none}
.bandeau .mono{white-space:nowrap}
@media(max-width:600px){.bandeau .mono{display:none}}

/* hero */
br.sur-large{display:none}
.hero{display:grid;grid-template-columns:1fr;gap:2rem;padding:.6rem 0 2.4rem;
  max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
@media(min-width:900px){
  br.sur-large{display:inline}
  .hero{grid-template-columns:1.05fr .95fr;align-items:start;gap:3.5rem;padding-top:2.6rem}
  .hero-visuel{position:sticky;top:2rem}
}
.chapeau{color:var(--doux);font-size:1.02rem;max-width:36ch;margin-bottom:1.2rem}
.hero-visuel figure{margin:0;text-align:center}
.hero-visuel svg{width:min(100%,340px);height:auto}
.legende{margin-top:.6rem}
.ciel-resume{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--doux);
  letter-spacing:.04em;margin-top:.35rem}

/* formulaire */
.form-carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:1.4rem}
.form-titre{margin-bottom:1rem}
label{display:block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--doux);margin-bottom:.3rem}
input,select{width:100%;padding:.62rem .7rem;border:1px solid var(--trait);
  background:#fff;color:var(--encre);border-radius:var(--rayon);
  font-family:"Spectral",serif;font-size:1rem}
input:focus,select:focus{outline:2px solid var(--vert);outline-offset:1px}
.champ{margin-bottom:.9rem}
.rangee{display:grid;gap:.6rem}
.rangee.trois{grid-template-columns:1fr 1.4fr 1fr}
.rangee.deux{grid-template-columns:1fr 1fr}
.case{display:flex;align-items:flex-start;gap:.55rem;margin:.2rem 0 1rem}
.case input{width:auto;margin-top:.35rem;flex:none}
.case label{text-transform:none;letter-spacing:0;font-family:"Spectral",serif;
  font-size:.92rem;color:var(--encre);margin:0}
button,.bouton{display:block;width:100%;padding:.85rem 1rem;border:none;cursor:pointer;
  background:var(--encre);color:var(--papier);font-family:"Spectral",serif;
  font-size:1.02rem;border-radius:var(--rayon);text-align:center;text-decoration:none}
button:hover,.bouton:hover{background:var(--vert)}
button:disabled{opacity:.45;cursor:not-allowed}
button.secondaire{background:transparent;color:var(--encre);
  border:1px solid var(--encre)}
button.secondaire:hover{background:var(--encre);color:var(--papier)}
.sous-bouton{text-align:center;margin:.6rem 0 0}

/* sections */
section{padding:2.2rem 0}
.regle{border:0;border-top:1px solid var(--trait);margin:0}
.liste-nue{list-style:none;padding:0;margin:0}
.liste-nue li{padding:.85rem 0;border-bottom:1px solid var(--trait)}
.liste-nue li:last-child{border-bottom:0}
.etiquette{color:var(--vert)}
.colonnes{display:grid;gap:1.6rem}
@media(min-width:760px){.colonnes{grid-template-columns:repeat(3,1fr);gap:2rem}}

/* apercu */
.apercu-tete{text-align:center;padding-top:1.5rem}
.apercu-tete svg{width:min(100%,340px);height:auto;margin:1rem auto 0;display:block}
.piliers{display:grid;gap:1rem;margin:2rem 0}
@media(min-width:700px){.piliers{grid-template-columns:repeat(3,1fr)}}
.pilier{background:var(--carte);border:1px solid var(--trait);padding:1rem;
  border-radius:var(--rayon)}
.pilier .signe{font-family:"Instrument Serif",serif;font-size:1.5rem;line-height:1.1}
.extrait{font-size:1.06rem}
.voile{position:relative;max-height:8.5rem;overflow:hidden;color:var(--doux)}
.voile:after{content:"";position:absolute;inset:auto 0 0 0;height:6rem;
  background:linear-gradient(to bottom,rgba(237,232,220,0),var(--papier))}
.offres{display:grid;gap:1rem;margin:1.4rem 0}
@media(min-width:700px){.offres{grid-template-columns:1fr 1fr}}
.offre{background:var(--carte);border:1px solid var(--trait);padding:1.2rem;
  border-radius:var(--rayon);display:flex;flex-direction:column}
.offre.mise-en-avant{border-color:var(--laiton);border-width:1.5px}
.offre .prix{font-family:"Instrument Serif",serif;font-size:2.2rem;line-height:1}
.offre ul{list-style:none;padding:0;margin:.8rem 0 1.2rem;flex:1}
.offre li{padding-left:1.1rem;position:relative;font-size:.97rem;margin-bottom:.35rem}
.offre li:before{content:"—";position:absolute;left:0;color:var(--laiton)}
.ruban{display:inline-block;background:var(--laiton);color:#fff;padding:.12rem .5rem;
  border-radius:var(--rayon);font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}

/* tableaux de positions */
.positions{width:100%;border-collapse:collapse;font-size:.95rem}
.positions th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--vert);
  border-bottom:1px solid var(--laiton);padding:.5rem .4rem}
.positions td{padding:.5rem .4rem;border-bottom:1px solid var(--trait)}
.positions td:first-child{font-weight:600}

/* pied */
.pied{border-top:1px solid var(--trait);margin-top:3rem;padding:1.6rem 20px 2.4rem;
  text-align:center}
.pied-liens{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin-bottom:.9rem}
.pied-liens a{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--doux)}
.pied-liens a:hover{color:var(--vert)}
.pied p{max-width:60ch;margin:0 auto .4rem}

/* animation de tracé */
@media(prefers-reduced-motion:no-preference){
  .anim svg{animation:apparait .9s ease-out both}
}
@keyframes apparait{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

/* consentement */
.bandeau-consentement{position:fixed;left:12px;right:12px;bottom:12px;z-index:20;
  background:var(--carte);border:1px solid var(--encre);border-radius:var(--rayon);
  padding:1rem 1.1rem;max-width:520px;margin:0 auto;box-shadow:0 8px 30px rgba(22,32,43,.14)}
.bandeau-consentement p{font-size:.9rem;margin:0 0 .8rem}
.consentement-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.consentement-actions button{padding:.6rem}

/* pages legales */
.legal h2{margin-top:2rem}
.legal h3{font-family:"Spectral",serif;font-weight:600;font-size:1.02rem;margin-top:1.4rem}
.legal p,.legal li{font-size:.98rem}
.legal ul{padding-left:1.1rem}

.case-renonciation{background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:.9rem 1rem;margin:1.6rem 0 .4rem}