:root{
  --papier:#FAF3E2;
  --sable:#EACD99;
  --indigo:#43365B;
  --indigo-sombre:#241A34;
  --charbon:#372B4F;
  --orange:#E04F00;
  --or:#ECA417;
  --trait:#e2d7bf;
  --doux:#8a7f70;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--charbon);
  font-family:var(--serif);
  font-optical-sizing:auto;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

/* fond très discret : grain + halo */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(236,164,23,.10), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(67,54,91,.06), transparent 65%);
}

/* ── entête ───────────────────────────────────────────── */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--doux);
  background:linear-gradient(var(--papier) 60%, transparent);
}
.marque{color:var(--indigo)}
.fil{font-variant-numeric:tabular-nums}

/* ── scènes ───────────────────────────────────────────── */
.scene{
  display:none;position:relative;z-index:1;
  min-height:100svh;
  padding:104px clamp(20px,5vw,56px) 80px;
}
.scene.active{display:flex;align-items:center;animation:apparait .7s cubic-bezier(.2,.7,.3,1) both}
.scene#scene-recit.active{align-items:flex-start}
@keyframes apparait{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.colonne{width:100%;max-width:660px;margin:0 auto}
.colonne.centre{text-align:center}

/* ── typographie ──────────────────────────────────────── */
.sur-titre{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:lowercase;color:var(--orange);margin:0 0 18px;
}
h1{
  font-family:var(--serif);
  font-size:clamp(30px,5.4vw,50px);
  font-weight:400;line-height:1.12;letter-spacing:-.015em;
  color:var(--indigo-sombre);margin:0 0 22px;
  font-variation-settings:'SOFT' 30,'WONK' 1;
}
.chapeau{font-size:clamp(16px,2.1vw,18px);color:var(--charbon);opacity:.85;margin:0 0 34px;max-width:44ch}

/* ── formulaires ──────────────────────────────────────── */
textarea,input{
  width:100%;font-family:var(--serif);font-size:17px;line-height:1.6;
  color:var(--charbon);background:rgba(255,255,255,.55);
  border:1px solid var(--trait);border-radius:3px;
  padding:16px 18px;resize:vertical;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
textarea::placeholder,input::placeholder{color:var(--doux);opacity:.75}
textarea:focus,input:focus{
  outline:none;border-color:var(--or);background:#fff;
  box-shadow:0 0 0 4px rgba(236,164,23,.13);
}

.sous-champ{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:18px;
}

.bouton{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:#fff;background:var(--indigo);
  border:none;border-radius:2px;padding:14px 26px;cursor:pointer;
  transition:background .25s,transform .15s;
}
.bouton:hover{background:var(--orange)}
.bouton:active{transform:translateY(1px)}
.bouton[disabled]{opacity:.4;cursor:default;background:var(--indigo)}
.bouton.grand{width:100%;padding:17px 26px;font-size:13px;margin-top:22px}

.lien{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--doux);border-bottom:1px solid var(--trait);
  transition:color .25s,border-color .25s;
}
.lien:hover{color:var(--orange);border-color:var(--orange)}

.consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--doux);max-width:42ch;
}
.consent input{width:auto;margin:3px 0 0;accent-color:var(--orange);flex:none}

.mention{
  font-size:12.5px;line-height:1.6;color:var(--doux);
  margin:38px 0 0;padding-top:18px;border-top:1px solid var(--trait);max-width:46ch;
}
.erreur{font-family:var(--mono);font-size:11.5px;color:var(--orange);margin:14px 0 0}

/* ── écoute ───────────────────────────────────────────── */
.jauge{display:flex;gap:7px;margin-bottom:38px}
.jauge i{
  display:block;width:22px;height:2px;background:var(--trait);
  transition:background .5s;
}
.jauge i.fait{background:var(--or)}
.jauge i.ici{background:var(--orange)}

.echo{
  font-size:14px;color:var(--doux);font-style:italic;
  margin:0 0 14px;padding-left:16px;border-left:2px solid var(--sable);
}
.question{
  font-size:clamp(21px,3.4vw,29px);line-height:1.32;font-weight:400;
  color:var(--indigo-sombre);margin:0 0 28px;
  font-variation-settings:'SOFT' 20;
  animation:apparait .55s cubic-bezier(.2,.7,.3,1) both;
}

/* ── attente ──────────────────────────────────────────── */
.plume{display:flex;gap:9px;justify-content:center;margin-bottom:22px}
.plume span{
  width:6px;height:6px;border-radius:50%;background:var(--or);
  animation:respire 1.5s ease-in-out infinite;
}
.plume span:nth-child(2){animation-delay:.22s}
.plume span:nth-child(3){animation-delay:.44s}
@keyframes respire{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.attente-texte{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--doux)}

/* ── récit ────────────────────────────────────────────── */
.recit{padding-bottom:40px}
.recit h1{margin-bottom:44px;max-width:20ch}
.chapitre{margin:0 0 46px;opacity:0;transform:translateY(18px)}
.chapitre.vu{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.chapitre h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:lowercase;color:var(--orange);
  font-weight:400;margin:0 0 12px;
}
.chapitre p{font-size:clamp(17px,2.2vw,19px);line-height:1.72;margin:0;color:var(--charbon)}
.chapitre p em,.chapitre p i{color:var(--indigo)}

.suite{
  margin-top:16px;padding-top:38px;border-top:1px solid var(--trait);
}
.suite-mot{
  font-size:clamp(20px,3vw,26px);line-height:1.35;color:var(--indigo-sombre);
  margin:0 0 14px;max-width:26ch;
}
.suite-texte{font-size:16px;line-height:1.7;color:var(--charbon);opacity:.85;margin:0;max-width:44ch}

.grille{display:grid;gap:16px;margin-top:28px;grid-template-columns:1fr 1fr}
.grille label:nth-child(2){grid-column:1/-1}
.grille label{
  display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:lowercase;color:var(--doux);
}
.grille input{margin-top:7px;font-size:16px;padding:13px 15px}
.fac{opacity:.6;text-transform:none;letter-spacing:0}

.merci{margin-top:16px;padding-top:38px;border-top:1px solid var(--trait)}

@media(max-width:560px){
  .grille{grid-template-columns:1fr}
  .sous-champ{flex-direction:column;align-items:stretch}
  .sous-champ .bouton{width:100%}
  .lien{text-align:left;padding:6px 0}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .chapitre{opacity:1;transform:none}
}