/* Breakpoints et reduced-motion. Tokens d'abord, puis overrides de layout.
   1200 — desktop compact
   1000 — tablette : côte à côte conservé, typo / mocks un peu réduits
   820  — mobile : empilement
*/

@media(max-width:1200px){
  .sw-slide-media{max-width:min(460px,100%)}
  .sw-slide-media .ph{width:clamp(120px,32%,156px)}
  .sw-slide-media--solo .ph{width:clamp(150px,42%,196px)}
}

/* Tablette / iPad — garder texte + images côte à côte, réduire un peu les tailles */
@media(max-width:1100px){
  .sw{
    --space-page:24px;
    --space-section:var(--space-7);
    font-size:16px;
  }
  .sw h1{font-size:clamp(34px,4.4vw,52px);line-height:1.06}
  .sw h2{font-size:clamp(26px,3.2vw,36px)}
  .sw h3{font-size:clamp(20px,2.4vw,26px)}
  .sw .lead{font-size:clamp(16px,1.5vw,18px)}
  .sw p.sw-chute{font-size:clamp(20px,2.6vw,28px)}
}

@media(max-width:1000px){
  .sw-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:clamp(12px,2.2vw,24px);
    align-items:center;
  }
  .sw-hero h1{max-width:14ch;margin-bottom:22px}
  .sw-hero .lead{max-width:40ch;margin-bottom:var(--space-4)}
  .sw-hero-inner{padding:40px var(--space-page) 48px}
  .sw-hero-logo{margin-bottom:28px}
  .sw-stage{padding-top:var(--space-2)}
  .sw-stage .ph--l{transform:rotate(-7deg) translateY(clamp(10px,2.5cqi,22px))}
  .sw-stage .ph--r{transform:rotate(7deg) translateY(clamp(10px,2.5cqi,22px))}
  .sw-form{max-width:100%}

  .sw{
    --loop-sticky-h:90vh;
    --loop-sticky-top:0;
  }
  .sw-loop-sticky{height:90dvh}
  .sw-loop-sticky-inner{gap:28px;max-height:90dvh}
  .sw-loop-intro h2{font-size:clamp(26px,3.4vw,34px);max-width:18ch}
  .sw-loop-board{grid-template-columns:minmax(120px,150px) minmax(0,1fr);gap:var(--space-3);height:min(440px,56vh)}
  .sw-slide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;padding:6px}
  .sw-slide-copy{max-width:26ch}
  .sw-slide-copy h3{font-size:clamp(22px,2.6vw,30px)}
  .sw-slide-media{max-width:min(400px,100%)}
  .sw-slide-media .ph{width:clamp(110px,30%,132px)}
  .sw-slide-media--solo .ph{width:clamp(140px,40%,176px)}

  .sw-best-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--space-4);
    align-items:center;
  }
  .sw-best-grid h2{max-width:18ch}
  .sw p.sw-best-lead{max-width:42ch}
  .sw-facets{margin-top:22px}
  .sw-facets li{font-size:15px;padding:12px 0}
  .sw-facets b{min-width:100px}

  .sw-mastery-grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:var(--space-4);
    align-items:center;
  }
  .sw-progress-title{max-width:14ch}
  .sw-mcard{padding:24px}

  .sw-arch-grid{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:var(--space-4);
  }
  .sw-arch-grid h2{max-width:14ch}
  .sw-paths{grid-template-columns:1fr 1fr;gap:12px}
  .sw-path{padding:22px 20px;min-height:150px}
  .sw-path h4{font-size:18px}
  .sw-path p{font-size:14.5px}

  .sw-ma .sw-proofs{gap:14px}
  .sw-ma h2{max-width:18ch}
}

@media(max-width:820px){
  .sw{
    font-size:16px;
    --space-page:20px;
    --space-section:var(--space-7);
    --loop-pin-h:380vh;
    --loop-sticky-top:0;
  }
  .sw h1{font-size:clamp(32px,8vw,42px)}
  .sw h2{font-size:clamp(24px,6.5vw,32px)}
  .sw-hero-grid{grid-template-columns:1fr;gap:var(--space-5);align-items:start}
  .sw-hero-inner{padding:32px var(--space-page) 48px;max-width:100%}
  .sw-hero-logo{margin-bottom:28px}
  .sw-hero-logo img{height:36px;max-height:36px;max-width:200px}
  .sw section.sw-hero{min-height:0;justify-content:flex-start}
  .sw-hero .eye{margin-bottom:18px}
  .sw-hero h1{max-width:none;margin-bottom:24px;overflow-wrap:anywhere}
  .sw-hero .lead{max-width:none}
  .sw-hero-grid > *{min-width:0;max-width:100%}
  .sw-form{max-width:100%}
  .sw-form .fine{overflow-wrap:anywhere}

  /* Téléphones hero empilés : scale fluide sur toute la largeur */
  .sw-stage{
    max-width:100%;
    width:100%;
    overflow:hidden;
    padding:var(--space-2) 0;
  }
  .sw-stage .ph{width:clamp(96px,24vw,120px)}
  .sw-stage .ph--c{width:clamp(114px,29vw,148px);margin:0 clamp(-14px,-4vw,-22px)}
  .sw-stage .ph--l{transform:rotate(-8.5deg) translateY(22px)}
  .sw-stage .ph--r{transform:rotate(8.5deg) translateY(22px)}
  .sw-stage .ph:hover,.sw-stage .ph--c:hover{transform:none}

  .sw-row{flex-direction:column}
  .sw-btn{width:100%;white-space:normal}

  /* CTA final + footer — même gouttière .sw-w-n */
  .sw-final-main{
    padding-top:var(--space-7);
    padding-bottom:var(--space-5);
  }
  .sw-final .sw-foot{
    padding:0 0 var(--space-5);
    margin-top:0;
  }
  .sw-final .sw-foot .sw-w-n{
    padding-top:var(--space-4);
  }
  .sw-final h2,.sw-final .lead,.sw-final .sw-form{max-width:100%}

  /* Scrollytelling mobile */
  .sw-loop-sticky{
    padding:14px 0 12px;top:0;
    height:90dvh;
    min-height:0;
    overflow:hidden;
    justify-content:center;
  }
  .sw-loop-sticky-inner{
    max-height:90dvh;
    gap:var(--space-3);
    max-width:100%;
    min-height:0;
    overflow:hidden;
    justify-content:center;
  }
  .sw-loop-intro{
    padding:0;margin:0;flex:none;
  }
  .sw-loop-intro h2{
    font-size:clamp(24px,7vw,32px);
    max-width:none;
    margin:0;
  }
  .sw-loop-board{
    grid-template-columns:1fr;gap:10px;
    height:auto;min-height:0;flex:0 1 auto;
    max-width:100%;overflow:visible;
    align-content:start;
  }
  .sw-gauge{order:-1;padding:0;align-self:stretch;max-width:100%;flex:none}
  .sw-gauge-list{flex-direction:row;justify-content:space-between;gap:2px}
  .sw-gauge-list::before,.sw-gauge-fill{display:none}
  .sw-gauge-list button{flex:1;min-width:0;padding:var(--space-1) 2px;letter-spacing:.04em;font-size:9px;text-align:center}
  .sw-gauge-list button::before{position:static;display:block;margin:0 auto 5px;transform:none;width:9px;height:9px}
  .sw-loop-stage{
    position:relative;
    min-height:0;
    height:auto;
    flex:0 1 auto;
    overflow:visible;
    max-width:100%;
  }
  .sw-slide{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:var(--space-3);
    padding:0;
    overflow:visible;
    max-width:100%;
    height:auto;
  }
  .sw-slide.on{
    position:relative;
    inset:auto;
  }
  .sw-slide-copy{
    max-width:none;
    order:0;
    flex:none;
    position:relative;
    z-index:2;
  }
  .sw-slide-copy h3{font-size:clamp(22px,6vw,28px)}
  .sw-slide-media{
    order:1;
    position:relative;
    display:block;
    flex:none;
    min-height:0;
    max-width:min(300px,92%);
    width:100%;
    margin:0 auto;
    padding:4px 22px 18px 0;
    box-sizing:border-box;
  }
  .sw-slide-photo{
    width:100%;
    max-width:none;
    max-height:none;
    aspect-ratio:4/3;
  }
  .sw-slide-photo img{object-fit:cover}
  .sw-slide-media .ph{
    position:absolute;
    right:0;
    bottom:0;
    width:min(120px,36vw);
    margin:0;
    transform:rotate(-3deg);
    z-index:2;
  }
  .sw-slide.on .ph:hover{transform:rotate(-3deg)}
  .sw-slide-media--solo{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    height:auto;
    padding:0;
    max-width:none;
  }
  .sw-slide-media--solo .ph{
    position:relative;
    right:auto;
    bottom:auto;
    width:min(150px,44vw);
    margin:0 auto;
    transform:none;
  }
  .sw-slide.on .sw-slide-media--solo .ph:hover{transform:none}

  .sw-arch-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .sw-paths{grid-template-columns:1fr}
  .sw-ma .sw-proofs{grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-6);text-align:left}
  .sw-best-grid{
    grid-template-columns:1fr;
    gap:var(--space-4);
    align-items:start;
  }
  .sw-best-grid h2{max-width:none}
  .sw-best-shots{
    max-width:100%;
    overflow:visible;
    justify-content:center;
    padding:var(--space-1) 0 var(--space-2);
    margin:0;
  }
  .sw-best-shots .ph--a{width:min(196px,58vw)}
  .sw-best-shots .ph--b{
    width:min(160px,48vw);
    margin-left:-38px;
    transform:rotate(6deg) translateY(12px);
  }
  .sw-best-shots .ph:hover{transform:rotate(0deg) translateY(-4px)}
  .sw-best-shots .ph--a:hover{transform:none}
  .sw-best-shots .ph--b:hover{transform:rotate(0deg) translateY(-4px)}
  .sw-mastery-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .sw-mastery-grid .ph{width:min(238px,70vw)}
  .sw-progress-title{max-width:16ch}
  .sw-mcard{padding:22px;max-width:100%}
  .sw-path:hover{transform:none}
  .sw-w,.sw-w-n{max-width:100%}
  .sw-facets li{display:flex;flex-wrap:wrap;gap:4px 10px}
  .sw-facets b{min-width:0;flex:0 0 auto}
  .sw-sticky{display:flex}
}

@media(max-width:400px){
  .sw-stage .ph{width:clamp(88px,23vw,104px)}
  .sw-stage .ph--c{width:clamp(104px,28vw,124px);margin:0 clamp(-12px,-3.5vw,-18px)}
  .sw-gauge-list button{font-size:8px;letter-spacing:.02em}
}

@media(prefers-reduced-motion:reduce){
  .sw .rv{opacity:1;transform:none;transition:none}
  .sw *{transition:none!important;animation:none!important}
  .sw-loop-pin{height:auto}
  .sw-loop-sticky{position:relative;height:auto;padding:var(--space-6) 0 var(--space-4);top:0}
  .sw-loop-sticky-inner{max-height:none;gap:28px}
  .sw-loop-board{height:auto}
  .sw-loop-stage{height:auto;overflow:visible;min-height:0}
  .sw-slide{
    position:relative;opacity:1;pointer-events:auto;
    inset:auto;padding:28px 0;border-bottom:1px solid var(--line);z-index:auto;
  }
  .sw-slide:last-child{border-bottom:0}
}