/* 42.fr · schémas du cursus en consultation latérale : un écran à la fois, ordinateur et mobile superposés.
   Le défilement vertical de la page n’est jamais bloqué (touch-action: pan-y, aucune capture de la molette). */
.scar{--io:cubic-bezier(.65,0,.35,1);margin-top:clamp(40px,5vw,72px)}
.scar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,2.4vw,36px)}
.scar-lede{max-width:34em;color:var(--muted)}
.scar-ctrl{display:flex;align-items:center;gap:8px;flex:none}
.scar-count{margin-right:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.scar-count b{font-weight:500;color:var(--ink)}
.scar-btn{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:18px;line-height:1;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.scar-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scar-btn:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink);border-color:var(--line)}
.scar-btn:focus-visible,.scar-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.scar-view{overflow:hidden;padding-bottom:calc(var(--cell) * .5 + 30px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.scar-view.drag{cursor:grabbing}
.scar-track{display:flex;list-style:none;margin:0;padding:0;transition:transform .9s var(--io);will-change:transform}
.scar-view.drag .scar-track{transition:none}
.scar-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-bottom:4px}

/* profondeur : le texte et le téléphone se décalent plus que l’écran, dans le sens du mouvement */
.scar-txt{grid-column:1/5;padding-bottom:clamp(24px,4vw,64px);transform:translateX(calc(var(--d,0) * 72px));opacity:var(--o,1);transition:transform .9s var(--io),opacity .6s ease}
.scar-k{color:var(--muted);margin-bottom:14px}
.scar-txt h3{font-size:clamp(24px,2.3vw,38px);font-weight:500;letter-spacing:-.025em;line-height:1.06;margin-bottom:14px;text-wrap:balance}
.scar-txt p:last-child{max-width:26em}
.scar-vis{grid-column:5/13;position:relative;padding-right:clamp(40px,7vw,120px)}
.scar-d{margin:0}
.scar-d img{width:100%;aspect-ratio:6/5;object-fit:cover;object-position:50% 0;background:var(--bg,#000);box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.scar-m{position:absolute;right:0;bottom:calc(var(--cell) * -.5);width:22%;margin:0;transform:translateX(calc(var(--d,0) * 140px));transition:transform 1.05s var(--io)}
.scar-ph{position:relative;aspect-ratio:390/800;overflow:hidden;border:5px solid #0b0c0d;border-radius:18px;background:#0b0c0d;box-shadow:0 34px 60px -30px rgba(0,0,0,.55)}
.scar-ph img{width:100%;height:auto;transform:translateY(0)}
.scar-slide.on .scar-ph img{animation:scarPan var(--pt,18s) cubic-bezier(.45,0,.55,1) 1.2s infinite alternate}
.scar-m:hover .scar-ph img{animation-play-state:paused}
@keyframes scarPan{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--pan,0px))}}
.scar-m .cap{text-align:right}

.scar-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:clamp(8px,1.4vw,20px);padding-top:16px;border-top:1px solid var(--line)}
.scar-tabs{display:flex;gap:4px 28px;flex-wrap:wrap}
.scar-tabs button{display:flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);transition:color .25s ease}
.scar-tabs button i{display:block;width:10px;height:10px;border:1px solid currentColor;transition:background-color .25s ease}
.scar-tabs button:hover,.scar-tabs button[aria-current=true]{color:var(--ink)}
.scar-tabs button[aria-current=true] i{background:currentColor}
.scar-src{max-width:36em}

@media (max-width:1180px){
  .scar-txt{grid-column:1/6}.scar-vis{grid-column:6/13}
}
@media (max-width:860px){
  .scar-head{flex-direction:column;align-items:stretch}
  .scar-ctrl{justify-content:flex-end}
  .scar-slide{display:flex;flex-direction:column;align-items:stretch}
  .scar-txt{padding-bottom:24px}
  .scar-vis{padding-right:22%;padding-bottom:calc(var(--cell) * 1.5)}
  .scar-m{width:30%;bottom:0}
  .scar-ph{border-width:4px;border-radius:14px}
  .scar-d .cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scar-track,.scar-txt,.scar-m{transition:none}
  .scar-slide.on .scar-ph img{animation:none}
}
/* navigation regroupée sous l’écran : onglets à gauche, compteur et flèches à droite */
.scar-head{margin-bottom:clamp(16px,2vw,28px)}
.scar-hint{color:var(--muted);margin-right:16px}
.scar-src{margin-top:12px;font-size:12px}
.scar-tabs button{font-size:clamp(13px,10px + .25vw,15px)}
@media (hover:none){.scar-hint{display:none}}
@media (max-width:860px){.scar-head{flex-direction:column}.scar-foot{flex-direction:column-reverse;align-items:stretch}.scar-ctrl{justify-content:space-between}.scar-count{margin-right:auto}}