:root{
  --terre:#D58567;      /* votre teinte principale */
  --rose:#E5B3A0;       /* votre teinte secondaire */
  --calcaire:#FBF5F2;   /* fond : un voile de rose sur du blanc */
  --craie:#FFFCFA;
  --encre:#2B211C;      /* brun très sombre, plus doux qu'un noir */
  --brique:#A85B3E;     /* terre assombrie, pour le texte et les liens */
  --ardoise:#87695E;    /* mentions secondaires */
  --trait:#EBD9D1;
  --pas:clamp(1rem,2.5vw,1.75rem);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--calcaire); color:var(--encre);
  font-family:"Source Serif 4",Georgia,serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.enveloppe{max-width:960px;margin:0 auto;padding:var(--pas) var(--pas) 5rem}

/* ---------- en-tête ---------- */
header{padding:2.4rem 0 2rem;border-bottom:1px solid var(--trait);text-align:center}
.lieu{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ardoise);margin:0 0 .9rem
}
h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.1rem,6vw,3.4rem);line-height:.98;letter-spacing:-.025em;
  margin:0 0 .7rem;text-wrap:balance
}
h1 em{font-style:normal;color:var(--brique)}
.sous{margin:0 auto;max-width:34em;color:var(--ardoise);font-size:1.02rem}

/* ---------- formulaire ---------- */
form{margin:2.2rem 0 0}
fieldset{border:0;margin:0 0 1.6rem;padding:0}
legend,.etiquette{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ardoise);padding:0;margin-bottom:.55rem;display:block
}
.grille{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
input[type=date],input[type=text],input[type=number],select,textarea{
  width:100%;padding:.72rem .85rem;background:var(--craie);color:var(--encre);
  border:1px solid var(--trait);border-radius:3px;font:inherit;font-size:.97rem
}
textarea{min-height:4.6rem;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,.puce:focus-within{outline:2px solid var(--brique);outline-offset:2px}

.puces{display:flex;flex-wrap:wrap;gap:.5rem}
.puce{position:relative}
.puce input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.puce span{
  display:block;padding:.5rem .85rem;background:var(--craie);border:1px solid var(--trait);
  border-radius:999px;font-size:.9rem;cursor:pointer;transition:.15s
}
.puce input:checked+span{background:var(--terre);border-color:var(--terre);color:var(--encre);font-weight:600}

.envoyer{
  margin-top:.6rem;width:100%;padding:1.05rem 1.5rem;border:0;border-radius:3px;
  background:var(--encre);color:var(--calcaire);cursor:pointer;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:.01em;transition:.15s
}
.envoyer:hover{background:var(--brique)}
.envoyer[disabled]{opacity:.5;cursor:progress}

/* ---------- état ---------- */
.etat{margin:2rem 0;padding:1.1rem 1.2rem;border-left:3px solid var(--rose);
  background:var(--craie);font-size:.97rem}
.etat.souci{border-left-color:var(--brique)}
.etat b{font-weight:600}
[hidden]{display:none!important}

/* ---------- programme ---------- */
.programme{margin-top:3rem}
.programme h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .6rem
}
.intro{max-width:38em;margin:0 0 2.4rem;font-size:1.06rem}

.jour{margin:0 0 2.8rem;padding-top:1.6rem;border-top:1px solid var(--trait)}
.jour-tete{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;margin-bottom:1.4rem}
.jour-tete h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.28rem;
  margin:0;letter-spacing:-.01em
}
.meta{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.06em;
  color:var(--ardoise);text-transform:uppercase}
.meteo{color:var(--brique)}

/* la signature : le cours d'eau qui relie les étapes */
.cours{display:grid;grid-template-columns:64px 1fr;gap:0}
.riviere{position:relative}
.riviere svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.etapes{display:flex;flex-direction:column;gap:1.5rem}
.etape{
  background:var(--craie);border:1px solid var(--trait);border-radius:3px;
  padding:1rem 1.15rem;opacity:0;transform:translateY(8px);
  animation:monte .5s ease forwards
}
@keyframes monte{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.etape{animation:none;opacity:1;transform:none}}
.etape-tete{display:flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:baseline;margin-bottom:.4rem}
.heure{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.95rem;color:var(--brique)}
.etape h4{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.06rem;margin:0}
.etape p{margin:0 0 .55rem}
.faits{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-family:"IBM Plex Mono",monospace;
  font-size:.73rem;color:var(--ardoise);letter-spacing:.03em}
.etape a{color:var(--brique);text-underline-offset:3px}

.avert{margin-top:2rem;padding:1.2rem 1.35rem;background:var(--craie);
  border:1px solid var(--trait);border-left:3px solid var(--terre);border-radius:3px}
.avert ul{margin:.5rem 0 0;padding-left:1.1rem}
.avert li{margin-bottom:.35rem}

footer{margin-top:3.5rem;padding-top:1.2rem;border-top:1px solid var(--trait);
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ardoise);letter-spacing:.05em}

@media (max-width:640px){
  .cours{grid-template-columns:26px 1fr}
  body{font-size:16px}
}

/* consommation de jetons, sous le programme */
.jetons{
  margin:1.6rem 0 0;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.04em;color:var(--ardoise);line-height:1.7
}

/* attente : phrase rassurante + sablier */
.etat.attente{border-left-color:var(--terre)}
.rassure{display:flex;align-items:center;gap:.6rem;margin:0 0 .35rem;
  font-weight:600;font-size:1.02rem}
.rassure .sablier{flex:none;color:var(--terre)}
.detail{margin:0;color:var(--ardoise);font-size:.94rem}
@keyframes bascule{
  0%,45%{transform:rotate(0)} 55%,100%{transform:rotate(180deg)}
}
.sablier{animation:bascule 3s ease-in-out infinite;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.sablier{animation:none}}

/* logo et icône */
.logo{display:block;width:fit-content;margin:0 auto 1.4rem}
.logo img{display:block;max-width:min(420px,86vw);height:auto}
.logo:focus-visible{outline:2px solid var(--brique);outline-offset:6px}
.icone{height:26px;width:auto;vertical-align:-7px;margin-right:.5rem;opacity:.7}

/* actions sous le programme */
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0}
.actions button{
  padding:.8rem 1.4rem;border-radius:3px;cursor:pointer;font:inherit;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.96rem
}
.imprimer{background:var(--encre);color:var(--calcaire);border:0}
.imprimer:hover{background:var(--brique)}
.relancer{background:transparent;color:var(--brique);border:1px solid var(--trait)}
.relancer:hover{border-color:var(--brique)}

/* impression : on ne garde que le programme */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:11.5pt}
  header .lieu,form,.etat,.actions,.jetons,footer{display:none!important}
  .logo img{max-width:200px}.logo{margin:0 auto 1.2rem}
  .enveloppe{max-width:none;padding:0}
  .programme{margin-top:0}
  .jour{break-inside:avoid;page-break-inside:avoid;border-top:1px solid #ccc}
  .etape{break-inside:avoid;page-break-inside:avoid;border:1px solid #ddd;
    background:#fff;animation:none;opacity:1;transform:none}
  .riviere{display:none}
  .cours{grid-template-columns:1fr}
  .etape a{color:inherit;text-decoration:none}
  .etape a::after{content:" (" attr(href) ")";font-size:.75em;color:#666;
    word-break:break-all}
  .avert{border:1px solid #ccc;background:#fff}
}

/* sous-familles d'envies */
.sous-groupe{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brique);margin:1.1rem 0 .5rem
}
.sous-groupe:first-of-type{margin-top:.2rem}

/* pied de page sur deux niveaux */
footer span{display:block}
footer .menu-pied{margin-top:.35rem;opacity:.8;line-height:1.8}