/* ============================================================
   LA NUIT DU FOURNIL — couche cinématique (2026-07-15)
   Le site EST la fournée : il s'ouvre à 04:00 dans le noir chaud,
   et l'aube se lève AU SCROLL. Tout en transform/opacity + canvas.
   Coupé net par prefers-reduced-motion (fournil.js ne démarre pas).
   ============================================================ */

/* ——— Le héros vit la nuit : on surcharge les variables LOCALEMENT,
       tous les enfants (chips, formulaire, boutons) suivent. ——— */
.hero{
  --bg:#171008; --bg-2:#120c06;
  --surface:#241a10; --surface-2:#2d2114;
  --txt:#f5ead4; --txt-2:#cdbb9b; --txt-3:#a08c6c;
  --ligne:rgba(240,220,180,.14); --ligne-fort:rgba(240,220,180,.26);
  background:
    radial-gradient(90% 70% at 78% 110%, rgba(196,102,26,.28), transparent 58%),
    radial-gradient(60% 48% at 12% -8%, rgba(212,169,58,.10), transparent 60%),
    linear-gradient(180deg,#0f0a05 0%, #171008 55%, #1d1409 100%);
  color:var(--txt);
}
.hero .eyebrow{color:var(--ble)}
.hero h1 .g{color:var(--ble);text-shadow:0 0 34px rgba(212,169,58,.35)}
.hero .sub{color:var(--txt-2)}
.hero-form input{background:rgba(255,248,232,.06);color:var(--txt)}
.hero-form input::placeholder{color:var(--txt-3)}
.hero .winchip{background:rgba(255,248,232,.05)}
.hero .float{background:rgba(36,26,16,.92);border-color:var(--ligne-fort);backdrop-filter:blur(6px)}
.hero .consent a{color:var(--ble-clair)}
.hero .hero-or{color:var(--txt-3)}

/* ——— L'aube : voile fixe qui se lève au scroll (opacité pilotée par JS) ——— */
#aube{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;will-change:opacity;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(196,102,26,.20), transparent 55%),
    linear-gradient(180deg, rgba(15,10,5,.92) 0%, rgba(20,13,7,.55) 46%, rgba(23,16,8,.22) 100%);
}
main, footer, .topstrip, header{position:relative;z-index:1}

/* ——— La farine : canvas plein écran (particules dérivantes + bouffées CTA) ——— */
#farine{position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen}

/* ——— L'horloge de fournée : 04:00 → 07:00 au fil de la page ——— */
#horloge{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:9px;
  background:rgba(23,16,8,.82);color:#f2e4c6;border:1px solid rgba(240,220,180,.22);
  border-radius:30px;padding:8px 14px 8px 10px;backdrop-filter:blur(8px);box-shadow:var(--ombre-2);
  font-size:12px;font-weight:700;letter-spacing:.4px;
  transform:translateY(0);transition:transform .4s var(--ease-out,ease),opacity .4s;
}
#horloge .h-dot{width:9px;height:9px;border-radius:50%;background:var(--ble);box-shadow:0 0 10px rgba(212,169,58,.8);animation:hpulse 2.6s ease-in-out infinite}
#horloge b{font-family:var(--serif);font-size:15px;letter-spacing:.8px;font-variant-numeric:tabular-nums}
#horloge span{color:rgba(242,228,198,.72)}
#horloge.h-hidden{transform:translateY(76px);opacity:0}
@keyframes hpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}
@media (max-width:640px){#horloge{left:10px;bottom:76px;padding:6px 11px 6px 8px}#horloge span{display:none}}

/* ——— Le mini-moteur du héros : « 48 traditions » → eau °C · farine · levain ——— */
.hero-calc{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--ligne-fort);border-radius:16px;
  background:rgba(255,248,232,.045);max-width:440px}
.hero-calc .hc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-calc .stepper{display:inline-flex;align-items:center;border:1px solid var(--ligne-fort);border-radius:12px;overflow:hidden;background:rgba(255,248,232,.05)}
.hero-calc .stepper button{width:38px;height:38px;border:0;background:transparent;color:var(--ble);font-size:20px;font-weight:800;cursor:pointer}
.hero-calc .stepper b{min-width:44px;text-align:center;font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums}
.hero-calc .hc-lab{font-size:13.5px;font-weight:700;color:var(--txt-2)}
.hero-calc .hc-out{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px}
.hero-calc .hc-kpi{display:flex;flex-direction:column;gap:1px}
.hero-calc .hc-kpi b{font-family:var(--serif);font-size:19px;color:var(--ble-clair);font-variant-numeric:tabular-nums;transition:transform .18s}
.hero-calc .hc-kpi b.tick{transform:translateY(-3px) scale(1.06)}
.hero-calc .hc-kpi span{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--txt-3);font-weight:800}
.hero-calc .hc-note{margin-top:9px;font-size:11.5px;color:var(--txt-3)}

/* ——— Boutons-pâte : pression qui s'écrase, retour ressort ——— */
.btn{transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter var(--t-rapide),box-shadow var(--t-rapide)}
.btn:active{transform:scale(.96,.9)}
.step-btn:active,.icon-btn:active{transform:scale(.88)}

/* ——— Le tampon : validation d'email = coup de tampon à l'ancienne ——— */
.capture-msg.ok{position:relative;display:inline-flex;align-items:center;gap:8px}
.capture-msg.ok .seal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--grad-crust);color:#fff;font-size:12px;font-weight:900;
  animation:stamp .5s cubic-bezier(.2,2.6,.4,1) both;box-shadow:0 3px 10px rgba(122,74,30,.5)}
@keyframes stamp{0%{transform:scale(2.6) rotate(-14deg);opacity:0}55%{transform:scale(.92) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* ——— Sections chronologiques : la petite heure au-dessus des titres ——— */
.heure{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  font-family:var(--serif);font-size:14px;font-weight:700;color:var(--croute);letter-spacing:1px}
.heure::before{content:"";width:22px;height:1px;background:var(--croute);opacity:.5}
.heure::after{content:"";width:22px;height:1px;background:var(--croute);opacity:.5}
.hero .heure{color:var(--ble)}

/* ——— Bascule son (off par défaut) ——— */
#sonbtn{position:fixed;right:16px;bottom:16px;z-index:90;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(240,220,180,.25);background:rgba(23,16,8,.82);color:#e8d9b8;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(8px);font-size:15px;transition:transform .2s}
#sonbtn:hover{transform:scale(1.08)}
#sonbtn.on{color:var(--ble);border-color:var(--ble)}
@media (max-width:640px){#sonbtn{bottom:76px;right:10px}}

/* ——— La braise : les bandes chaudes réagissent au passage (halo doux) ——— */
.truth::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 120%, rgba(196,102,26,.13), transparent 62%)}
.final{overflow:hidden}
.final::after{content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 100%, rgba(212,169,58,.14), transparent 60%)}

@media (prefers-reduced-motion:reduce){
  #farine,#aube,#horloge,#sonbtn{display:none!important}
  .btn,.btn:active{transition:none;transform:none}
  .capture-msg.ok .seal{animation:none}
}