/* SpeakPro Academy — section « Pourquoi SpeakPro Academy ? » : récit animé en quatre scènes (03/11/2026).
   Identité du site : navy #10233F, terracotta #C8683F, crème, Fraunces / Plus Jakarta Sans / Inter.
   Préfixe spw- : aucun style ne sort de la section. */
.spw{
  --spw-navy:#10233F; --spw-navy-2:#0B1A30; --spw-terra:#C8683F; --spw-terra-l:#E39A72; --spw-cream:#FBF7F2;
  --spw-sand:#F3EBE1; --spw-line:#E7DDD1; --spw-ink:#1E2A3F; --spw-mute:#5C6B84;
  --spw-ease:cubic-bezier(.22,.7,.2,1);
  background:var(--spw-cream); color:var(--spw-ink); padding:88px 0 96px;
}
.spw *{ box-sizing:border-box; }
.spw-wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }
.spw-head{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:24px 64px; align-items:end; margin-bottom:40px; }
.spw-kicker{ font:700 12px/1.3 var(--display,'Plus Jakarta Sans',sans-serif); letter-spacing:.16em; text-transform:uppercase; color:var(--spw-terra); margin:0 0 14px; }
.spw-title{ font-family:var(--display-serif,'Fraunces',Georgia,serif); font-weight:500; font-size:clamp(36px,4.6vw,60px); line-height:1.04; letter-spacing:-.025em; color:var(--spw-navy); margin:0; text-wrap:balance; }
.spw-claim{ font-family:var(--display-serif,'Fraunces',Georgia,serif); font-style:italic; font-weight:500; font-size:clamp(21px,2.1vw,27px); line-height:1.3; color:var(--spw-navy); margin:0 0 12px; text-wrap:balance; }
.spw-lead{ font-size:16.5px; line-height:1.6; color:var(--spw-mute); margin:0; max-width:52ch; }

/* ---------- La scène ---------- */
.spw-film{ position:relative; border-radius:26px; overflow:hidden; background:var(--spw-navy-2); color:#fff; aspect-ratio:16/8.6; box-shadow:0 40px 80px -40px rgba(16,35,63,.55); isolation:isolate; }
.spw-scene{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s var(--spw-ease), visibility 0s linear .9s; }
.spw-scene.is-on{ opacity:1; visibility:visible; transition:opacity .9s var(--spw-ease), visibility 0s; z-index:1; }
.spw-media{ position:absolute; inset:0; overflow:hidden; background:var(--spw-navy) center/cover no-repeat; }
.spw-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transform-origin:var(--fx,60%) var(--fy,40%); }
.spw-scene.is-on .spw-media img{ animation:spw-drift var(--dur,6s) linear forwards; }
@keyframes spw-drift{ from{ transform:scale(1.04) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(var(--dx,-1.5%),var(--dy,-1%),0); } }
.spw-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,26,48,.86) 0%, rgba(11,26,48,.62) 36%, rgba(11,26,48,.08) 68%, rgba(11,26,48,0) 100%), linear-gradient(0deg, rgba(11,26,48,.55), rgba(11,26,48,0) 40%); }
.spw-scene[data-side="right"] .spw-media::after{ background:linear-gradient(270deg, rgba(11,26,48,.86) 0%, rgba(11,26,48,.6) 38%, rgba(11,26,48,.06) 70%, rgba(11,26,48,0) 100%), linear-gradient(0deg, rgba(11,26,48,.5), rgba(11,26,48,0) 40%); }
.spw-copy{ position:absolute; z-index:2; left:clamp(28px,5vw,64px); bottom:clamp(28px,5vw,60px); width:min(46%,520px); }
.spw-scene[data-side="right"] .spw-copy{ left:auto; right:clamp(28px,5vw,64px); }
.spw-step{ display:inline-flex; align-items:center; gap:10px; font:700 11.5px/1 var(--display,'Plus Jakarta Sans',sans-serif); letter-spacing:.16em; text-transform:uppercase; color:var(--spw-terra-l); margin:0 0 16px; }
.spw-step::before{ content:""; width:28px; height:1.5px; background:currentColor; }
.spw-line{ display:block; font-family:var(--display-serif,'Fraunces',Georgia,serif); font-weight:500; font-size:clamp(22px,2.5vw,34px); line-height:1.18; letter-spacing:-.015em; color:#fff; opacity:0; transform:translateY(14px); }
.spw-line + .spw-line{ margin-top:6px; }
.spw-line.is-accent{ color:var(--spw-terra-l); font-style:italic; }
.spw-scene.is-on .spw-line{ animation:spw-rise .9s var(--spw-ease) forwards; animation-delay:var(--d,0s); }
@keyframes spw-rise{ to{ opacity:1; transform:none; } }

/* Scène 2 : captures réelles de la plateforme */
.spw-ui{ position:absolute; z-index:2; right:clamp(24px,4vw,56px); top:50%; width:min(38%,430px); transform:translateY(-50%); display:grid; gap:14px; }
.spw-ui figure{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12); opacity:0; transform:translateY(22px) scale(.98); background:#fff; }
.spw-ui figure img{ display:block; width:100%; height:auto; }
.spw-ui .spw-ui-b{ width:62%; justify-self:end; }
.spw-scene.is-on .spw-ui figure{ animation:spw-rise 1s var(--spw-ease) forwards; animation-delay:var(--d,0s); }
.spw-ui-note{ font-size:11.5px; color:rgba(255,255,255,.72); margin:0; text-align:right; opacity:0; }
.spw-scene.is-on .spw-ui-note{ animation:spw-rise .8s var(--spw-ease) forwards; animation-delay:2.4s; }

/* Scène 3 : mots-clés */
.spw-words{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; list-style:none; padding:0; }
.spw-words li{ position:relative; font:700 13px/1 var(--display,'Plus Jakarta Sans',sans-serif); letter-spacing:.14em; text-transform:uppercase; color:#fff; padding-bottom:9px; opacity:0; }
.spw-words li::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--spw-terra); transform:scaleX(0); transform-origin:left; }
.spw-scene.is-on .spw-words li{ animation:spw-rise .7s var(--spw-ease) forwards; animation-delay:var(--d,0s); }
.spw-scene.is-on .spw-words li::after{ animation:spw-bar .9s var(--spw-ease) forwards; animation-delay:calc(var(--d,0s) + .35s); }
@keyframes spw-bar{ to{ transform:scaleX(1); } }

/* Scène 4 : signature */
.spw-end{ position:absolute; z-index:3; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:24px;
  background:radial-gradient(120% 90% at 50% 60%, rgba(16,35,63,.9) 0%, rgba(11,26,48,.96) 70%); opacity:0; visibility:hidden; transition:opacity 1s var(--spw-ease), visibility 0s linear 1s; }
.spw-film.is-end .spw-end{ opacity:1; visibility:visible; transition:opacity 1s var(--spw-ease), visibility 0s; }
.spw-end img{ width:64px; height:64px; border-radius:16px; }
.spw-brand{ font:800 15px/1 var(--display,'Plus Jakarta Sans',sans-serif); letter-spacing:.34em; text-transform:uppercase; color:#fff; margin:6px 0 0; padding-left:.34em; }
.spw-sign{ font-family:var(--display-serif,'Fraunces',Georgia,serif); font-style:italic; font-weight:500; font-size:clamp(24px,2.8vw,38px); line-height:1.15; color:var(--spw-terra-l); margin:0; }
.spw-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:12px; min-height:50px; padding:0 26px; border-radius:999px; background:var(--spw-terra); color:#fff; font:700 15px/1 var(--display,'Plus Jakarta Sans',sans-serif); text-decoration:none; transition:background .2s, transform .2s; }
.spw-cta:hover{ background:#A34F2B; }
.spw-cta:focus-visible, .spw-chap:focus-visible, .spw-ctl:focus-visible{ outline:3px solid var(--spw-terra-l); outline-offset:3px; }
.spw-film.is-end .spw-end > *{ animation:spw-rise .9s var(--spw-ease) both; }
.spw-film.is-end .spw-end > *:nth-child(2){ animation-delay:.15s; } .spw-film.is-end .spw-end > *:nth-child(3){ animation-delay:.3s; } .spw-film.is-end .spw-end > *:nth-child(4){ animation-delay:.5s; }

/* ---------- Barre de lecture ---------- */
.spw-bar{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.spw-chaps{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; list-style:none; margin:0; padding:0; }
.spw-chap{ width:100%; text-align:left; background:none; border:0; padding:10px 0 4px; cursor:pointer; color:var(--spw-mute); font:600 13px/1.25 var(--display,'Plus Jakarta Sans',sans-serif); }
.spw-chap span{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--spw-terra); margin-bottom:4px; }
.spw-chap i{ display:block; height:3px; border-radius:3px; background:var(--spw-line); overflow:hidden; margin-bottom:10px; }
.spw-chap i b{ display:block; height:100%; width:0; background:var(--spw-terra); }
.spw-chap.is-on{ color:var(--spw-navy); }
.spw-chap.is-done i b{ width:100%; }
.spw-ctl{ flex:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--spw-line); background:#fff; color:var(--spw-navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.spw-ctl:hover{ border-color:var(--spw-navy); }
.spw-ctl svg{ width:18px; height:18px; }

/* ---------- Les quatre avantages ---------- */
.spw-adv{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.4fr); gap:48px; margin-top:80px; align-items:stretch; }
.spw-adv-photo{ margin:0; border-radius:22px; overflow:hidden; background:var(--spw-sand); min-height:100%; }
.spw-adv-photo img{ width:100%; height:100%; object-fit:cover; object-position:62% 30%; display:block; }
.spw-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 36px; list-style:none; margin:0; padding:0; align-content:center; }
.spw-item{ padding:26px 0 28px; border-top:1px solid var(--spw-line); }
.spw-item-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.spw-num{ font:700 12px/1 var(--display,'Plus Jakarta Sans',sans-serif); letter-spacing:.14em; color:var(--spw-mute); }
.spw-ico{ width:48px; height:48px; border-radius:14px; background:#fff; border:1px solid var(--spw-line); display:flex; align-items:center; justify-content:center; color:var(--spw-terra); }
.spw-ico svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.spw-item h3{ font-family:var(--display-serif,'Fraunces',Georgia,serif); font-weight:600; font-size:21px; line-height:1.2; color:var(--spw-navy); margin:0 0 8px; letter-spacing:-.01em; }
.spw-item p{ margin:0; font-size:15px; line-height:1.6; color:var(--spw-mute); }
.spw-reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--spw-ease), transform .8s var(--spw-ease); transition-delay:var(--d,0s); }
.spw-reveal.is-in{ opacity:1; transform:none; }
.no-js .spw-reveal{ opacity:1; transform:none; }

/* ---------- Tablette ---------- */
@media (max-width:980px){
  .spw-head{ grid-template-columns:1fr; gap:18px; }
  .spw-film{ aspect-ratio:4/3.1; }
  .spw-copy{ width:min(60%,520px); }
  .spw-ui{ width:min(40%,340px); }
  .spw-adv{ grid-template-columns:1fr; gap:28px; }
  .spw-adv-photo{ aspect-ratio:16/8; min-height:0; }
}
/* ---------- Mobile : texte sous l'image, jamais par-dessus ---------- */
@media (max-width:640px){
  .spw{ padding:56px 0 64px; }
  .spw-wrap{ padding:0 16px; }
  .spw-film{ aspect-ratio:auto; height:auto; border-radius:20px; display:grid; }
  .spw-scene{ position:relative; grid-area:1/1; display:flex; flex-direction:column; }
  .spw-media{ position:relative; inset:auto; aspect-ratio:4/3.4; flex:none; }
  .spw-media img{ object-position:var(--mx,60%) 30%; }
  .spw-media::after{ background:linear-gradient(0deg, rgba(11,26,48,1) 0%, rgba(11,26,48,0) 38%); }
  .spw-scene[data-side="right"] .spw-media::after{ background:linear-gradient(0deg, rgba(11,26,48,1) 0%, rgba(11,26,48,0) 38%); }
  .spw-copy, .spw-scene[data-side="right"] .spw-copy{ position:relative; left:auto; right:auto; bottom:auto; width:auto; padding:4px 20px 26px; min-height:178px; }
  .spw-line{ font-size:22px; }
  .spw-ui{ position:absolute; top:12px; right:12px; width:58%; transform:none; gap:8px; }
  .spw-ui .spw-ui-b, .spw-ui-note{ display:none; }
  .spw-words{ gap:8px 16px; margin-top:16px; }
  .spw-words li{ font-size:11.5px; }
  .spw-end{ position:absolute; }
  .spw-chaps{ gap:6px; }
  .spw-chap{ font-size:11.5px; }
  .spw-chap span{ font-size:10px; letter-spacing:.08em; }
  .spw-chap em{ display:none; }
  .spw-list{ grid-template-columns:1fr; }
  .spw-adv-photo{ aspect-ratio:4/3; }
}
/* ---------- Mouvement réduit : pas de défilement automatique ni de zoom ---------- */
@media (prefers-reduced-motion:reduce){
  .spw-scene, .spw-end{ transition:none; }
  .spw-scene.is-on .spw-media img{ animation:none; transform:none; }
  .spw-line, .spw-ui figure, .spw-ui-note, .spw-words li{ opacity:1; transform:none; animation:none !important; }
  .spw-words li::after{ transform:none; animation:none !important; }
  .spw-film.is-end .spw-end > *{ animation:none; }
  .spw-reveal{ opacity:1; transform:none; transition:none; }
}
/* Lien vers le parcours dans la scène 4 : visible seulement sans animation (la signature finale le porte sinon). */
.spw-cta-static{ display:none; }
.spw.is-reduced .spw-cta-static{ display:inline-flex; margin-top:20px; }
/* Coins arrondis nets malgré le zoom lent des images ; signature seule à l'écran en fin de récit. */
.spw-scene, .spw-end{ clip-path:inset(0 round 26px); }
.spw-film.is-end .spw-copy, .spw-film.is-end .spw-ui{ opacity:0; transition:opacity .6s var(--spw-ease); }
@media (max-width:640px){ .spw-scene, .spw-end{ clip-path:inset(0 round 20px); } }
/* Bouton voix off, même gabarit que lecture/pause. */
.spw-snd{ flex:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--spw-line); background:#fff; color:var(--spw-navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.spw-snd:hover{ border-color:var(--spw-navy); }
.spw-snd.is-on{ background:var(--spw-navy); border-color:var(--spw-navy); color:#fff; }
.spw-snd svg{ width:18px; height:18px; }
.spw-snd:focus-visible{ outline:3px solid var(--spw-terra-l); outline-offset:3px; }
@media (max-width:640px){ .spw-snd, .spw-ctl{ width:42px; height:42px; } .spw-bar{ gap:10px; } }