/* ═══ EMOTION · Essential Direct — brouillon 28.07.2026 ═══════════════════
   Parcours « chapitres » : 7 volets repliés, récap permanent, ordre libre.
   Contrat de données inchangé : mêmes champs als_* / billing_*, même payload.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--max:1300px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;font-weight:300;color:var(--cream);background:var(--ink-deep);overflow-x:hidden;min-height:100vh}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes chOpen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}

.header{position:sticky;top:0;z-index:50;background:rgba(20,9,10,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--cream-line);padding:16px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-back{font-family:var(--font-body);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-mute);text-decoration:none;transition:color .3s}
.header-back:hover{color:var(--rose-soft)}

.hero{padding:clamp(40px,7vw,68px) var(--pad-x) clamp(20px,3vw,30px);max-width:var(--max);margin:0 auto;animation:fadeUp .8s var(--ease) both}
.hero-eye{font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);margin:0 0 1rem;display:inline-flex;align-items:center;gap:12px}
.hero-eye::before{content:'';width:24px;height:1px;background:var(--rose);opacity:.6}
.hero-title{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,4vw,44px);line-height:1.12;color:var(--cream);margin:0 0 .9rem;max-width:22ch}
.hero-title em{font-style:italic;color:var(--rose)}
.hero-lead{font-family:var(--font-body);font-size:clamp(15px,1.5vw,16px);line-height:1.7;color:var(--cream-mid);max-width:64ch}

.main{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x) clamp(80px,10vw,110px)}
.layout{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,30px);align-items:flex-start}
.col-main{flex:1 1 380px;min-width:0}
.col-aside{flex:0 1 320px;min-width:270px;position:sticky;top:96px;background:var(--ink);border:1px solid var(--cream-line);border-radius:14px;padding:20px}
@media(max-width:900px){.col-aside{position:static;flex:1 1 100%;order:2}}

/* ── Sablier ── */
.sand{position:relative;width:20px;height:31px;flex:0 0 20px;background:var(--cream-line);clip-path:polygon(0 0,100% 0,57% 50%,100% 100%,0 100%,43% 50%)}
.sand__fill{position:absolute;left:0;right:0;bottom:0;background:var(--rose);opacity:.9;transition:height .6s var(--ease)}

/* ── Chapitres ── */
.ch{border:1px solid var(--cream-line);border-radius:14px;margin-bottom:10px;background:var(--ink);overflow:hidden;transition:border-color .4s var(--ease)}
.ch.is-open{border-color:var(--rose-faint)}
.ch__head{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:none;border:none;cursor:pointer;padding:15px 18px;color:var(--cream)}
.ch__head:hover .ch__title{color:var(--rose-soft)}
.ch__num{font-family:var(--font-display);font-style:italic;font-size:1.02rem;color:var(--cream-faint);flex:0 0 28px;transition:color .4s}
.ch.is-done .ch__num{color:var(--rose)}
.ch__mid{flex:1 1 auto;min-width:0}
.ch__title{display:block;font-family:var(--font-display);font-size:clamp(17px,1.9vw,20px);line-height:1.25;color:var(--cream);transition:color .3s}
.ch__sub{display:block;font-family:var(--font-body);font-size:.79rem;color:var(--cream-mute);margin-top:3px}
.ch__badge{flex:0 0 auto;font-family:var(--font-body);font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--cream-line);color:var(--cream-mute)}
.ch.is-done .ch__badge{border-color:rgba(196,141,118,.45);color:var(--rose-soft);background:var(--rose-faint)}
.ch__body{padding:0 18px 18px;animation:chOpen .35s var(--ease) both}
.ch__next{margin-top:16px;font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:none;border:1px solid var(--rose);border-radius:100px;padding:11px 24px;cursor:pointer;transition:all .35s var(--ease)}
.ch__next:hover{background:var(--rose-faint)}

/* ── Question ── */
.q{padding:16px 0 4px;border-top:1px solid var(--cream-line)}
.q:first-child{border-top:none;padding-top:6px}
.q__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.q__label{font-family:var(--font-body);font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin:0}
.q__hint{font-family:var(--font-body);font-size:.86rem;line-height:1.65;color:var(--cream-mute);margin:.45rem 0 .9rem;max-width:64ch}
.q__libre{white-space:nowrap;font-family:var(--font-body);font-size:.61rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-mute);border:1px dashed rgba(196,141,118,.35);border-radius:100px;padding:5px 11px;background:none;cursor:pointer;transition:all .3s}
.q__libre:hover{color:var(--rose-soft);border-color:var(--rose)}
.q__libre.is-off{color:var(--cream-faint);border-color:var(--cream-line)}

.tags-wrap{display:flex;flex-wrap:wrap;gap:9px}
.tag{display:inline-block;flex:0 0 auto;max-width:100%;padding:8px 17px;font-family:var(--font-display);font-size:.95rem;font-style:italic;color:var(--cream-mid);background:transparent;border:1px solid var(--cream-line);border-radius:100px;cursor:pointer;transition:all .3s var(--ease);user-select:none;-webkit-user-select:none;line-height:1.3;text-align:center}
.tag:hover{color:var(--rose-soft);border-color:var(--rose-faint);transform:translateY(-1px)}
.tag.is-on{color:var(--cream);background:var(--rose-faint);border-color:var(--rose)}
.tag--neutre{border-style:dashed;color:var(--cream-faint)}
.tag--neutre.is-on{color:var(--cream);border-style:solid}
.tags-more{flex:0 0 auto;white-space:nowrap;font-family:var(--font-body);font-size:.72rem;color:var(--cream-mute);background:none;border:1px dashed rgba(196,141,118,.35);border-radius:100px;padding:8px 15px;cursor:pointer;transition:all .3s}
.tags-more:hover{color:var(--rose-soft);border-color:var(--rose)}
.choice{flex:0 0 auto;max-width:100%;padding:11px 20px;font-family:var(--font-display);font-style:italic;font-size:1rem;line-height:1.3;text-align:center;color:var(--cream-mid);background:transparent;border:1px solid var(--cream-line);border-radius:100px;cursor:pointer;transition:all .3s var(--ease)}
.choice:hover{color:var(--rose-soft);border-color:var(--rose-faint);transform:translateY(-1px)}
.choice.is-on{color:var(--cream);background:var(--rose-faint);border-color:var(--rose)}
.choice--neutre{border-style:dashed;color:var(--cream-faint)}
.choice--neutre.is-on{border-style:solid;color:var(--cream)}

/* ── Univers, vus ── */
.uni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(196px,100%),1fr));gap:12px}
.uni{text-align:left;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid var(--cream-line);background:var(--ink);color:var(--cream);transition:border-color .4s var(--ease),transform .4s var(--ease)}
.uni:hover{transform:translateY(-2px);border-color:var(--rose-faint)}
.uni.is-on{border-color:var(--rose)}
.uni__sky{display:block;height:64px;position:relative}
.uni__bars{position:absolute;left:12px;bottom:10px;display:flex;gap:3px;align-items:flex-end;height:30px}
.uni__bars i{width:3px;background:rgba(237,227,216,.65);border-radius:2px;display:block}
.uni__body{display:block;padding:12px 14px 14px}
.uni__name{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--cream)}
.uni__mark{font-family:var(--font-body);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);opacity:0;transition:opacity .3s}
.uni.is-on .uni__mark{opacity:1}
.uni__desc{display:block;font-family:var(--font-body);font-size:.78rem;line-height:1.55;color:var(--cream-mid);margin-top:5px}
.uni__feel{display:block;font-family:var(--font-display);font-style:italic;font-size:.84rem;color:var(--cream-mute);margin-top:7px}

/* ── Champs ── */
.field-label{font-family:var(--font-body);font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin:0 0 6px;display:block}
.field-input,.field-select,.field-textarea{background:var(--ink-soft);border:1px solid rgba(196,141,118,.3);border-radius:11px;padding:12px 15px;font-family:var(--font-body);font-size:.92rem;font-weight:300;color:var(--cream);-webkit-text-fill-color:var(--cream);caret-color:var(--rose);outline:none;width:100%;transition:border-color .3s,box-shadow .3s;appearance:none;-webkit-appearance:none}
.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-faint)}
.field-input::placeholder,.field-textarea::placeholder{color:var(--cream-faint)!important;-webkit-text-fill-color:var(--cream-faint)!important;opacity:1;font-style:italic}
.field-input:-webkit-autofill,.field-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--ink-soft) inset!important;-webkit-text-fill-color:var(--cream)!important}
.field-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4 5-4' stroke='%23C48D76' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer;background-color:var(--ink-soft)!important;color:var(--cream)!important}
.field-select option{background:var(--ink-deep)!important;color:var(--cream)!important}
.field-textarea{resize:vertical;min-height:88px;line-height:1.65}
.ta-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.ta-ex{font-family:var(--font-body);font-size:.68rem;letter-spacing:.06em;color:var(--rose-soft);background:var(--rose-faint);border:1px solid rgba(196,141,118,.25);border-radius:100px;padding:7px 14px;cursor:pointer;transition:all .3s}
.ta-ex:hover{border-color:var(--rose)}
.ta-count{font-family:var(--font-body);font-size:.7rem;color:var(--cream-faint)}
.field-row{display:flex;flex-wrap:wrap;gap:11px}
.field-row>div{flex:1 1 210px}

.cadeau-block{display:none;margin-top:14px;padding:16px 18px;background:rgba(196,141,118,.06);border-left:3px solid var(--rose);border-radius:0 12px 12px 0}
.cadeau-block.is-on{display:block;animation:fadeUp .4s var(--ease) both}

/* ── Niveau ── */
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.format-grid{grid-template-columns:1fr}}
.format-card{position:relative;padding:22px;background:var(--ink-soft);border:1px solid var(--cream-line);border-radius:16px;cursor:pointer;transition:all .4s var(--ease);text-align:left;width:100%}
.format-card:hover{border-color:var(--rose-faint);transform:translateY(-2px)}
.format-card.is-active{border-color:var(--rose);background:linear-gradient(135deg,var(--ink-soft),rgba(92,36,36,.25))}
.format-card__name{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.25rem;color:var(--cream);margin:0 0 .3rem}
.format-card__price{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--rose);margin:0 0 .7rem}
.format-card__desc{font-family:var(--font-body);font-size:.86rem;line-height:1.6;color:var(--cream-mid);margin:0 0 .8rem}
.format-card__tag{font-family:var(--font-body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint)}
.format-card__dot{position:absolute;top:16px;right:16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--cream-line);transition:all .3s;display:flex;align-items:center;justify-content:center}
.format-card.is-active .format-card__dot{background:var(--rose);border-color:var(--rose)}
.format-card.is-active .format-card__dot::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--cream)}
.is-hidden{display:none!important}

.waiver-label{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;background:var(--cream-soft);border:1px solid var(--cream-line);border-radius:11px;cursor:pointer;margin-bottom:9px}
.waiver-label input[type="checkbox"]{width:17px;height:17px;flex-shrink:0;cursor:pointer;accent-color:var(--rose);margin-top:3px}
.waiver-text{font-family:var(--font-body);font-size:.82rem;line-height:1.6;color:var(--cream-mid)}
.waiver-text strong{color:var(--cream);font-weight:500}
.waiver-text a{color:var(--rose)}

/* ── Aside ── */
.aside-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.aside-eye{font-family:var(--font-body);font-size:.63rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin:0}
.aside-left{font-family:var(--font-body);font-size:.84rem;color:var(--cream-mid);margin:2px 0 0}
.recap{max-height:44vh;overflow-y:auto;overflow-x:hidden;margin-bottom:14px}
.recap__row{width:100%;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;text-align:left;padding:7px 0;border:none;border-bottom:1px solid var(--cream-line);background:none;cursor:pointer}
.recap__k{font-family:var(--font-body);font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);flex:0 0 auto;white-space:nowrap;padding-top:2px}
.recap__v{font-family:var(--font-body);font-size:.8rem;text-align:right;line-height:1.45;color:var(--cream);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.recap__v.is-todo{color:#E8B86A}
.btn-defer{width:100%;font-family:var(--font-body);font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-soft);background:none;border:1px dashed rgba(196,141,118,.35);border-radius:100px;padding:10px 13px;cursor:pointer;margin-bottom:12px;transition:all .3s}
.btn-defer:hover{border-color:var(--rose);background:var(--rose-faint)}
.pay-recap{background:var(--ink-soft);border:1px solid var(--cream-line);border-radius:11px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.pay-recap__format{font-family:var(--font-display);font-style:italic;font-size:1rem;color:var(--cream);margin:0}
.pay-recap__sub{font-family:var(--font-body);font-size:.62rem;color:var(--cream-faint);letter-spacing:.1em;text-transform:uppercase;margin:2px 0 0}
.pay-recap__price{font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--rose);margin:0}
.btn-pay{font-family:var(--font-body);font-size:.73rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:15px;border-radius:999px;border:none;cursor:pointer;width:100%;background:var(--bordeaux);color:var(--cream);transition:all .4s var(--ease)}
.btn-pay:not(:disabled):hover{background:var(--copper);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(184,88,56,.5)}
.btn-pay:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.pay-note{font-family:var(--font-body);font-size:.75rem;color:var(--cream-faint);text-align:center;line-height:1.6;margin:9px 0 0}
#als-missing-fields{margin:10px 0;padding:11px 14px;background:rgba(139,88,58,.12);border:1px solid rgba(196,141,118,.25);border-radius:8px;font-family:var(--font-body);font-size:.8rem;color:var(--cream-mid);line-height:1.65;display:none}
#als-submit-error{margin:12px 0;padding:12px 15px;background:rgba(139,58,58,.15);border:1px solid rgba(139,58,58,.4);border-radius:8px;font-family:var(--font-display);font-style:italic;font-size:.9rem;color:#e89090;line-height:1.6;display:none}

/* ── Barre mobile ── */
.mbar{display:none}
@media(max-width:900px){
  .mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:55;align-items:center;justify-content:space-between;gap:12px;padding:11px var(--pad-x);background:rgba(20,9,10,.96);backdrop-filter:blur(14px);border-top:1px solid var(--cream-line)}
  .mbar__txt{font-family:var(--font-body);font-size:.8rem;color:var(--cream-mid);margin:0}
  .mbar__btn{font-family:var(--font-body);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-soft);background:none;border:1px solid rgba(196,141,118,.35);border-radius:100px;padding:9px 15px;cursor:pointer}
  .main{padding-bottom:90px}
}

/* ── Footer ── */
.f-slim{background:#1A080B;border-top:1px solid var(--cream-line);padding:26px var(--pad-x)}
.f-slim__in{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.f-slim__copy{font-family:var(--font-body);font-size:.72rem;color:var(--cream-faint);letter-spacing:.04em}
.f-slim__legals{display:flex;gap:18px;flex-wrap:wrap}
.f-slim__legals a{font-family:var(--font-body);font-size:.72rem;color:var(--cream-mute);text-decoration:none;transition:color .3s}
.f-slim__legals a:hover{color:var(--rose-soft)}

/* Passage d'un chemin a l'autre */
.path-switch{max-width:1180px;margin:0 auto;padding:12px var(--pad-x) 0;font-family:var(--font-body);font-weight:300;font-size:.82rem;line-height:1.6;color:var(--cream-faint);text-align:center}
.path-switch a{color:var(--rose);text-decoration:none;border-bottom:1px solid rgba(196,141,118,.3);padding-bottom:1px;transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.path-switch a:hover{color:var(--rose-soft);border-color:var(--rose-soft)}

/* ═══ LE CIEL — 31.07.2026 ═══════════════════════════════════════════════════
   Même mécanisme que les pages V6. Ce qui est propre à cette page (halos,
   respirations, ouvertures de chapitre) n'est pas touché.
   Couche fixe en z-index -1 : posée après le fond de page, avant tout le
   contenu — jamais par-dessus un texte, et elle ne capte aucun clic. */
.brief-ciel{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.brief-ciel span{position:absolute;border-radius:50%}
@keyframes brief-scintille{0%,100%{opacity:.18}50%{opacity:.95}}
@media (prefers-reduced-motion: reduce){
  .brief-ciel span{animation:none!important;opacity:.28!important}
}
