/* Mailathlon — pages statiques : header fixe, footer complet, accueil et mission.
   Même identité que le jeu (tokens de style.css). */
:root{--shadow-lg:0 1px 2px rgba(26,26,30,.05),0 24px 60px -18px rgba(26,26,30,.22);--r:18px;--ease:cubic-bezier(.2,.8,.2,1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow-lg:0 1px 2px rgba(0,0,0,.4),0 24px 60px -18px rgba(0,0,0,.7)}}
html{scroll-padding-top:80px}

/* ---------- Header fixe ---------- */
.site-header{position:sticky;top:0;z-index:40;display:block;padding:0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.35)}
.site-header .hbar{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-header .logo{font-size:27px}
.sitenav{display:flex;align-items:center;gap:6px}
.nl{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:999px;transition:color .15s,background .15s}
.nl:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--paper);margin:0 4px}
.langsw a{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:999px;color:var(--muted);text-decoration:none}
.langsw a.on{background:var(--ink);color:var(--bg)}
.langsw a:not(.on):hover{color:var(--ink)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-weight:600;text-decoration:none;padding:12px 20px;font-size:15px;line-height:1;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn span{transition:transform .2s var(--ease)}
.btn:hover span{transform:translateX(3px)}
.btn-lg{padding:17px 28px;font-size:16.5px}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-primary{background:var(--accent-strong);color:var(--accent-ink);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-primary:hover{box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-paper{background:var(--bg);color:var(--ink)}

/* ---------- Mise en page large ---------- */
.wrap-wide{max-width:1120px;margin:0 auto;padding:0 20px}
.landing{display:block}
.landing h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.landing h2 em,.landing h1 em{color:var(--accent);font-style:italic}
.sec{padding:88px 0 0}
.sec-head{max-width:720px;margin-bottom:34px}
.sec-head h2{font-size:clamp(36px,5vw,60px);line-height:1}
.sec-lede{font-size:18px;color:var(--muted);margin-top:14px;max-width:600px}
.eyebrow{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent-strong);margin-bottom:14px}
.fine{font-size:13px;color:var(--muted);margin-top:14px}
.micro{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px}

/* Apparition au défilement (activée par site.js seulement) */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.js-reveal .reveal.in{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px 0 20px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(50px,6.6vw,92px);line-height:.94;letter-spacing:-.028em}
.hero-lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:520px;margin-top:24px}
.slogan{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.2vw,25px);line-height:1.25;color:var(--accent-strong);margin-top:16px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.eyebrow.live{display:inline-flex;align-items:center;gap:10px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Démo animée ---------- */
.demo{position:relative;margin:0}
.demo::before{content:"";position:absolute;inset:-12% -8% -6% -6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent);z-index:-1;pointer-events:none}
.demo-stage{position:relative;padding:0 0 120px 0}
.demo-tag{position:absolute;top:-12px;left:18px;z-index:3;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--bg);padding:5px 10px;border-radius:999px}
.win{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(-1.2deg);transition:transform .6s var(--ease),opacity .6s var(--ease)}
.win-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,var(--paper))}
.win-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.win-bar i:first-child{background:var(--accent);opacity:.75}
.win-bar span{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px}
.win-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:14px;min-height:44px}
.win-row .k{font-family:var(--mono);font-size:11px;color:var(--muted);width:44px;flex:none}
.who-mini{display:flex;align-items:center;gap:8px;min-width:0}
.who-mini small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-mini{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--accent-strong);font-size:10px;font-weight:600;flex:none}
.win-row .v{font-weight:500}
.win-body{padding:16px 16px 6px;font-size:15px;line-height:1.6;min-height:178px;white-space:pre-wrap}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-3px;margin-left:1px;opacity:0}
.is-typing .caret{opacity:1;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.win-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 12px 16px}
.win-send{background:var(--ink);color:var(--bg);font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;transition:transform .2s,background .2s}
.sent-ok{font-family:var(--mono);font-size:12px;color:var(--good);opacity:0;transition:opacity .3s}
.is-sending .win-send{transform:scale(.92);background:var(--accent-strong)}
.is-sent .sent-ok,.is-done .sent-ok{opacity:1}
.is-sent .win,.is-done .win{transform:rotate(-1.2deg) translateY(-6px)}

.rc{position:absolute;right:-14px;bottom:0;width:min(330px,82%);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:16px 18px;transform:rotate(1.6deg);z-index:2;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.demo:not(.is-sent):not(.is-done) .rc{opacity:0;transform:rotate(1.6deg) translateY(24px) scale(.96)}
.rc-head{display:flex;align-items:center;gap:10px;font-size:13px}
.rc-head small{display:block;color:var(--muted);font-size:12px}
.rc-face{width:46px;height:46px;flex:none}
.rc-bubble{font-family:var(--serif);font-size:23px;line-height:1.15;margin:10px 0 6px}
.rc-score{display:flex;align-items:baseline;gap:6px}
.rc-score b{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rc-score small{color:var(--muted);font-size:18px}
.rc-score span{margin-left:auto;font-size:13px;font-weight:600;color:var(--good)}
.rc-bars{display:grid;gap:6px;margin-top:8px}
.rc-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.rc-row i{height:5px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.rc-row i::after{content:"";position:absolute;inset:0;background:var(--good);border-radius:3px;transform-origin:left;transform:scaleX(var(--w));transition:transform .9s var(--ease) .2s}
.demo:not(.is-sent):not(.is-done) .rc-row i::after{transform:scaleX(0)}

/* ---------- Comment ça marche ---------- */
.how{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 22px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.how-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.how-art{height:132px;border-radius:12px;background:var(--bg);display:grid;place-items:center;margin-bottom:18px}
.how-art svg{width:150px;height:auto;transition:transform .4s var(--ease)}
.how-card:hover .how-art svg{transform:scale(1.05) rotate(-1deg)}
.how-n{font-family:var(--mono);font-size:12px;color:var(--accent-strong)}
.how-card h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:4px 0 8px}
.how-card p{color:var(--muted);font-size:15px}

/* ---------- Avant / Après ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.ba-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column}
.ba-after{box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--good) 35%,var(--line))}
.ba-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.dot{width:9px;height:9px;border-radius:50%}.dot.bad{background:var(--bad)}.dot.good{background:var(--good)}
.ba-mail{background:var(--bg);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.6;flex:1}
.ba-subj{font-weight:600;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ba-subj span{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);margin-right:10px}
.ba-body{white-space:pre-wrap}
.ba-body mark{background:color-mix(in srgb,var(--accent) 16%,transparent);color:inherit;text-decoration:underline wavy var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;border-radius:3px;padding:0 2px}
.ba-before .ba-body{color:var(--muted)}
.ba-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.ba-chips li{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.ba-chips.good li{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}
.ba-react{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.ba-face{width:48px;height:48px;flex:none}
.ba-react p{font-family:var(--serif);font-size:21px;line-height:1.15;flex:1}
.ba-react p small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px}
.ba-score{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.02em}
.ba-score small{font-size:15px;color:var(--muted)}
.ba-score.bad{color:var(--bad)}.ba-score.good{color:var(--good)}

/* ---------- Défi du jour ---------- */
.daily-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--ink);color:var(--bg);border-radius:24px;padding:44px 48px}
.daily-band .eyebrow{color:color-mix(in srgb,var(--accent) 80%,var(--bg))}
.daily-band h2{font-size:clamp(32px,4vw,48px);line-height:1.02;max-width:640px}
.daily-band p{color:color-mix(in srgb,var(--bg) 72%,var(--ink));margin-top:10px;max-width:560px}
.db-copy{position:relative;z-index:1}
.db-streak{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--bg)!important;background:color-mix(in srgb,var(--bg) 12%,transparent);padding:6px 12px;border-radius:999px}
.daily-band .btn{position:relative;z-index:1;flex:none}
.db-num{position:absolute;right:28px;bottom:-40px;font-family:var(--serif);font-size:220px;line-height:1;color:color-mix(in srgb,var(--bg) 7%,transparent);pointer-events:none;letter-spacing:-.04em}

/* ---------- Situations ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sc-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 22px;text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.sc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sc-lvl{align-self:flex-start;font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--muted)}
.sc-lvl.lvl-2{background:color-mix(in srgb,var(--mid) 14%,transparent);color:color-mix(in srgb,var(--mid) 70%,var(--ink))}
.sc-lvl.lvl-3{background:var(--soft);color:var(--accent-strong)}
.sc-card h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.08;padding-right:28px}
.sc-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sc-mission{font-size:14.5px}
.sc-go{position:absolute;top:18px;right:20px;font-size:20px;color:var(--accent);transition:transform .25s var(--ease)}
.sc-card:hover .sc-go{transform:translateX(4px)}
.more{margin-top:22px}
.more a{font-weight:600;color:var(--accent-strong);text-underline-offset:4px}

/* ---------- Bandeaux ---------- */
.bands{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.band{position:relative;display:block;padding:30px 30px 32px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.band:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.band-soft{background:var(--soft);border-color:transparent}
.band h2{font-size:34px;line-height:1.05;padding-right:40px}
.band p{color:var(--muted);margin-top:8px;max-width:440px}
.band-go{position:absolute;top:30px;right:30px;font-size:24px;color:var(--accent);transition:transform .25s var(--ease)}
.band:hover .band-go{transform:translateX(5px)}

/* ---------- Page mission ---------- */
.m-hero{padding:72px 0 20px;max-width:900px}
.m-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,88px);line-height:.96;letter-spacing:-.025em}
.m-body{max-width:820px;margin-top:40px}
.m-sec{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:36px 0;border-top:1px solid var(--line)}
.m-n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--accent)}
.m-sec h2{font-size:clamp(30px,3.6vw,42px);line-height:1.05;margin-bottom:14px}
.m-sec p,.m-sec li{font-size:17.5px;line-height:1.65;margin-bottom:12px}
.m-sec ul{padding-left:20px}
.m-sec a{color:var(--accent-strong);text-underline-offset:3px}
.pledges{list-style:none;padding:0!important;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pledges li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0!important;font-size:15.5px!important}
.pledges b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:2px}
.faq{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:14px 18px;margin-top:10px}
.faq summary{font-weight:600}
.faq p{margin:10px 0 0;color:var(--muted)}
.final{margin-top:56px;background:var(--ink);color:var(--bg);border-radius:24px;padding:56px 48px;text-align:center}
.final h2{font-size:clamp(38px,5vw,64px);line-height:1}
.final p{color:color-mix(in srgb,var(--bg) 72%,var(--ink));margin:12px auto 24px;max-width:520px}
.final-link{color:var(--bg)!important;font-size:15px;text-underline-offset:4px}

/* ---------- Footer complet ---------- */
.site-footer{display:block;text-align:left;padding:72px 0 36px;margin-top:96px;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px;color:var(--muted)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fbrand p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.3;color:var(--ink);margin-top:10px;max-width:280px}
.site-footer nav{display:flex;flex-direction:column;gap:8px}
.site-footer h2{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.site-footer nav a{color:var(--ink);text-decoration:none}
.site-footer nav a:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.fbottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.fbottom .langsw{margin:0}
.site .wrap > .site-footer{margin-top:72px}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding-top:36px}
  .demo{max-width:520px}
  .how,.sc-grid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media (max-width:760px){
  .hide-sm{display:none}
  .sec{padding-top:64px}
  .how,.sc-grid,.ba,.bands,.pledges{grid-template-columns:1fr}
  .daily-band{flex-direction:column;align-items:flex-start;padding:32px 26px}
  .db-num{font-size:150px;bottom:-24px}
  .final{padding:40px 24px}
  .m-sec{grid-template-columns:1fr;gap:4px}
  .rc{right:-4px}
  .site-header .logo{font-size:24px}
}
/* Très petit écran : le mot ne tient plus à côté de la navigation, on garde le symbole seul. */
@media (max-width:344px){
  .site-header .logo-word{display:none}
  .site-header .logo{font-size:32px;min-width:44px;min-height:44px;align-items:center}
}
@media (max-width:420px){
  .hide-xs{display:none}
  .hero h1{font-size:46px}
  .btn-lg{padding:15px 22px;font-size:15.5px}
  .demo-stage{padding-bottom:150px}
  .rc{width:88%}
  .rc-row{grid-template-columns:96px 1fr}
}

/* ---------- Mouvement réduit : tout est statique ---------- */
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .pulse{animation:none}
  .btn:hover,.how-card:hover,.sc-card:hover,.band:hover{transform:none}
}

/* ---------- Ajustements après captures ---------- */
.demo-tag{left:auto;right:18px}
.win-foot{justify-content:flex-start;gap:12px}
.db-streak[hidden]{display:none}
@media (max-width:760px){
  .demo-stage{padding-bottom:0}
  .rc{position:relative;right:auto;bottom:auto;margin:-26px 0 0 auto;width:90%}
  .win-body{min-height:0;padding-bottom:30px}
}
/* Contraste des étiquettes colorées dans les deux thèmes */
.ba-chips li{color:color-mix(in srgb,var(--bad) 72%,var(--ink))}
.ba-chips.good li{color:color-mix(in srgb,var(--good) 72%,var(--ink))}
.rc-score span{color:color-mix(in srgb,var(--good) 80%,var(--ink))}

/* =====================================================================
   Finition mobile + page du jeu
   ===================================================================== */

/* Démo : hauteur FIXE pendant toute l'animation (le texte tapé ne fait plus grandir la fenêtre). */
.win-body{height:212px;min-height:0;overflow:hidden}
/* Mails de l'avant/après lisibles partout (≥ 15 px) */
.ba-mail{font-size:15px}
.readmore{display:none}

/* Footer : liens en colonnes, zones de clic ≥ 44 px */
.site-footer nav{gap:0}
.site-footer nav a{min-height:44px;display:flex;align-items:center}
.fbottom .langsw a{padding:12px 14px}
.fbottom .linkbtn{min-height:44px;padding:0 4px}

/* ---------- Page du jeu ---------- */
.game-page .game-wrap{padding-top:4px}
.gamebar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;margin:6px 0 4px}
.gamebar .navlink{margin-left:auto;padding:12px 4px}
.game-page .site-footer{margin-top:64px}
.game-page textarea{min-height:200px;resize:none;overflow-y:auto}
.game-page .mail{overflow:clip}
/* Squelette de chargement : mêmes dimensions que la situation + le mail */
.skel-card{pointer-events:none}
.skel-card.brief{min-height:318px}
.skel-mail{min-height:380px;padding:18px}
.sk{display:block;height:13px;border-radius:7px;background:var(--line);margin:12px 0;position:relative;overflow:hidden}
.sk-h{height:30px;margin:16px 0}
.sk-box{height:46px;border-radius:12px;margin-top:18px}
.sk-area{height:250px;border-radius:12px;margin-top:18px}
.w30{width:30%}.w40{width:40%}.w45{width:45%}.w60{width:60%}.w70{width:70%}.w90{width:90%}.w100{width:100%}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper) 55%,transparent),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  /* Hero : titre, slogan et « Jouer maintenant » visibles sans défiler */
  .hero{padding:18px 0 0;gap:30px}
  .hero h1{font-size:clamp(38px,11vw,48px)}
  .hero-lede{font-size:16px;line-height:1.5;margin-top:14px}
  .slogan{font-size:19px;margin-top:10px}
  .hero .ctas{margin-top:18px;gap:10px}
  .hero .btn-lg{padding:14px 18px;font-size:15px}
  .micro{margin-top:12px}
  .eyebrow{margin-bottom:10px}

  /* Démo compacte : la carte de réaction REMPLACE le mail (même case de grille, hauteur fixe) */
  .demo::before{inset:-6% -4%}
  .demo-stage{display:grid;padding:0}
  .demo-stage > .win,.demo-stage > .rc{grid-area:1/1}
  .win{transform:none}
  .win-body{height:178px;padding:12px 14px 4px}
  .win-row{padding:8px 14px;min-height:40px}
  .rc{position:relative;right:auto;bottom:auto;width:auto;margin:0;transform:none;display:flex;flex-direction:column;justify-content:center}
  .is-sent .win,.is-done .win{transform:none;opacity:0;visibility:hidden}
  .win{transition:opacity .45s var(--ease),visibility 0s linear .45s}
  .demo:not(.is-sent):not(.is-done) .rc{opacity:0;transform:translateY(10px);visibility:hidden}
  .rc-bubble{font-size:26px}
  .rc-score b{font-size:56px}

  /* Espacements verticaux réduits */
  .sec{padding-top:52px}
  .sec-head{margin-bottom:20px}
  .sec-head h2{font-size:clamp(32px,9vw,40px)}
  .sec-lede{font-size:16px;margin-top:10px}
  .site-footer{margin-top:56px;padding:36px 0 24px}
  .fgrid{gap:18px 16px}
  .fbottom{margin-top:20px}

  /* « Comment ça marche » : cartes compactes, petite icône à côté du texte */
  .how{gap:10px}
  .how-card{display:grid;grid-template-columns:60px 1fr;column-gap:14px;align-items:start;padding:14px 16px}
  .how-art{grid-row:1/span 3;width:60px;height:60px;margin:0;border-radius:14px}
  .how-art svg{width:54px}
  .how-n{grid-column:2}
  .how-card h3{grid-column:2;font-size:22px;margin:0 0 4px}
  .how-card p{grid-column:2;font-size:14.5px}

  /* Avant / Après : « avant » tronqué avec « Lire tout », réactions et notes bien visibles */
  .ba-card{padding:16px}
  .js .ba-body.clamp{max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .js .ba-body.clamp.open{max-height:none;-webkit-mask-image:none;mask-image:none}
  .js .readmore{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:14px;color:var(--accent-strong);padding:0;margin-top:2px}
  .ba-react{gap:10px}
  .ba-react p{font-size:19px}
  .ba-score{font-size:36px;flex:none}

  .daily-band{padding:28px 22px;border-radius:20px}
  .sc-card{padding:16px 18px 18px}
  .sc-card h3{font-size:24px}
  .band{padding:22px 22px 24px}
  .band h2{font-size:28px}
  .m-hero{padding-top:28px}
  .m-sec{padding:26px 0}

  /* Page du jeu */
  .game-page textarea{min-height:150px}
  .game-page .hint{display:none}
  .game-page .mailbar{position:sticky;bottom:var(--kb,0px);z-index:5;background:var(--paper);box-shadow:0 -8px 16px -12px rgba(0,0,0,.25)}
  .game-page .brief{padding:18px}
  .game-page .brief h2{font-size:26px}
  .skel-card.brief{min-height:340px}
  .skel-mail{min-height:300px}
  .sk-area{height:170px}
}
@media (max-width:380px){
  .hero .btn-lg{padding:13px 15px;font-size:14.5px}
  .hero .ctas .btn-ghost{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){ .sk::after{animation:none} }