/* BOOTH AI STUDIO — « Comment ça marche » (i171) : public/how-it-works.php */

.hw3-sub{max-width:660px;margin:0 auto;color:var(--ivoire-2);line-height:1.7;font-size:1.05rem}

/* ── La carte du parcours : trois temps, huit étapes ── */
.hw3-map{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 26px;margin:38px auto 0;max-width:1060px}
.hw3-phase{display:flex;flex-direction:column;align-items:center;gap:10px}
.hw3-phase-t{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}
.hw3-phase-s{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px;border:1px solid var(--hair-soft);border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.02)}
.hw3-map a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:var(--r-pill,999px);color:var(--ivoire);
  text-decoration:none;font-size:.86rem;transition:background .25s,color .25s}
.hw3-map a b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--hair);font-family:var(--serif);font-weight:500;font-size:.85rem;color:var(--or);transition:all .25s}
.hw3-map a:hover,.hw3-map a.on{background:rgba(212,175,55,.12)}
.hw3-map a.on b{background:var(--or);color:#17110a;border-color:var(--or)}

/* ── Les étapes ── */
.hw3{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.hw3-step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(48px,7vw,84px) 0;border-top:1px solid var(--hair-soft);scroll-margin-top:90px}
.hw3-step:first-child{border-top:0}
.hw3-step.is-flip > .hw3-txt{order:2}
.hw3-step.is-stack{grid-template-columns:1fr}
.hw3-step.is-stack > .hw3-txt{max-width:760px}

.hw3-txt h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12;margin:14px 0 14px}
.hw3-txt p{color:var(--ivoire-2);line-height:1.75;font-size:1rem;margin:0 0 14px}
.hw3-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--or);color:#17110a;font-family:var(--serif);font-size:1.45rem;font-weight:600;box-shadow:0 10px 30px rgba(212,175,55,.25)}
.hw3-tip{position:relative;padding:12px 14px 12px 40px;border-radius:var(--r-md,14px);background:rgba(212,175,55,.07);
  border:1px solid rgba(212,175,55,.2);font-size:.92rem !important;color:var(--ivoire) !important}
.hw3-tip::before{content:"💡";position:absolute;left:13px;top:11px}
.hw3-tip.is-warn{background:rgba(255,140,90,.08);border-color:rgba(255,140,90,.28)}
.hw3-tip.is-warn::before{content:"⏳"}
.hw3-link{display:inline-block;margin-top:4px;color:var(--or);text-decoration:none;letter-spacing:.06em;border-bottom:1px solid transparent}
.hw3-link:hover{border-color:var(--or)}

/* Encadrés (activation, jour J) */
.hw3-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.hw3-box{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-md,14px);border:1px solid var(--hair-soft);
  background:linear-gradient(160deg,var(--surface,#15100b),var(--noir2));margin:0 0 14px}
.hw3-box b{font-weight:600;font-size:.92rem;color:var(--ivoire)}
.hw3-box span{color:var(--ivoire-2);font-size:.9rem;line-height:1.6}
.hw3-box.is-lock{border-color:rgba(242,165,163,.35)}
.hw3-box.is-free{border-color:rgba(143,240,200,.35)}
.hw3-box.is-live b{color:#8ff0c8}

/* Captures d'écran */
.hw3-shot{display:block;border-radius:var(--r-lg,20px);overflow:hidden;border:1px solid var(--hair);background:#0e0c0a;
  box-shadow:0 30px 70px rgba(0,0,0,.5);transition:transform .35s,box-shadow .35s;cursor:zoom-in}
.hw3-shot:hover{transform:translateY(-3px);box-shadow:0 36px 80px rgba(0,0,0,.6)}
.hw3-shot img{display:block;width:100%;height:auto}
.hw3-shot.is-narrow{max-width:460px;justify-self:center;width:100%}
.hw3-shot.is-paper{max-width:400px;justify-self:center;width:100%;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}
.hw3-shot.is-paper:hover{transform:rotate(0) translateY(-3px)}
.hw3-shot.is-strip{max-width:760px}
.hw3-shot.is-inline{margin-top:16px;border-radius:var(--r-md,14px);box-shadow:none}
.hw3-shot.is-phone{max-width:250px;margin:16px auto 0;border-radius:30px;border:6px solid #221c16;box-shadow:0 24px 60px rgba(0,0,0,.55)}

/* Téléchargements : organisateur / invités */
.hw3-dl{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.hw3-dl-card{padding:24px 24px 26px;border-radius:var(--r-lg,20px);border:1px solid var(--hair-soft);
  background:linear-gradient(160deg,var(--surface,#15100b),var(--noir2))}
.hw3-dl-card h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 8px}
.hw3-dl-card p{color:var(--ivoire-2);margin:0 0 10px;line-height:1.6}
.hw3-dl-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.hw3-dl-card li{color:var(--ivoire);line-height:1.5}
.hw3-dl-card li.ok::before{content:"✓";color:#8ff0c8;margin-right:9px;font-weight:700}
.hw3-dl-card li.no::before{content:"✕";color:#f2a5a3;margin-right:9px;font-weight:700}
.hw3-dl-card li.no{color:#f2c9c7}

/* Questions */
.hw3-faq{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,70px) 0 10px;border-top:1px solid var(--hair-soft)}
.hw3-faq h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);text-align:center;margin:0 0 22px}
.hw3-faq details{border-bottom:1px solid var(--hair-soft);padding:2px 0}
.hw3-faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-family:var(--serif);font-size:1.22rem;color:var(--ivoire)}
.hw3-faq summary::-webkit-details-marker{display:none}
.hw3-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--or);font-size:1.3rem;transition:transform .3s}
.hw3-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.hw3-faq details p{margin:0 0 18px;color:var(--ivoire-2);line-height:1.7}

/* Appel à l'action */
.hw3-cta{text-align:center;padding:clamp(56px,8vw,90px) 0 clamp(70px,9vw,100px)}
.hw3-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:760px;margin:0 auto 26px;line-height:1.2}
.hw3-cta-b{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hw3-cta-b .btn-lux{isolation:isolate;text-decoration:none;padding:17px 34px}
.hw3-note{margin-top:16px;font-size:.84rem;color:var(--ivoire-2)}

@media (max-width:900px){
  .hw3-step{grid-template-columns:1fr;gap:26px}
  .hw3-step.is-flip > .hw3-txt{order:0}
  .hw3-dl{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hw3-map{gap:14px}
  .hw3-phase-s{border-radius:18px}
  .hw3-duo{grid-template-columns:1fr}
  .hw3-cta-b .btn-lux{width:100%;text-align:center}
  .hw3-shot.is-paper{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hw3-shot,.hw3-map a,.hw3-map a b{transition:none}
}