/* « Brief en situation » — série de vidéos de /solutions/arp : salle obscure, grand lecteur, rail d'épisodes. */
.st-section{position:relative;padding:72px 20px 76px;background:#0b1020;color:#e8ecf7;overflow:hidden;isolation:isolate}
.st-section::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;z-index:-1;background:radial-gradient(60% 60% at 30% 30%,rgba(55,125,255,.28),transparent 70%),radial-gradient(40% 50% at 85% 10%,rgba(124,92,255,.18),transparent 70%)}
.st-wrap{max-width:1180px;margin:0 auto}
.st-tete{max-width:760px;margin:0 0 30px}
.st-sur{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:6px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#c9d4f2;background:rgba(255,255,255,.04)}
.st-point{width:8px;height:8px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 0 0 rgba(255,77,79,.6);animation:st-pouls 2s infinite}
@keyframes st-pouls{0%{box-shadow:0 0 0 0 rgba(255,77,79,.55)}70%{box-shadow:0 0 0 9px rgba(255,77,79,0)}100%{box-shadow:0 0 0 0 rgba(255,77,79,0)}}
.st-tete h2{margin:0 0 12px;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;font-weight:700;color:#fff;text-wrap:balance}
.st-chapo{margin:0;font-size:1.04rem;line-height:1.6;color:#aab6d6}
.st-scene{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.st-ecran{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
/* Lecteur commun (brief-player.css : affiche, voile, bouton lecture, badge, erreur, vidéo) calé sur le cadre de la série. */
.st-ecran{--bp-accent:#377dff;--bp-focus:#7fb0ff}
.st-ecran > .bp{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;border-radius:0;background:transparent}
.st-legende{margin-top:20px}
.st-legende h3{margin:0 0 6px;font-size:1.3rem;font-weight:700;color:#fff}
.st-legende p{margin:0 0 12px;color:#aab6d6;line-height:1.55}
.st-legende ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.st-legende li{position:relative;padding-left:26px;color:#d5dcf0;line-height:1.5;font-size:.96rem}
.st-legende li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:3px;background:#377dff;transform:rotate(45deg)}
/* `.st-legende p{margin:0 0 12px}` est plus précise qu'une classe seule : sans `.st-legende` devant, la marge haute était ignorée. */
.st-legende .st-cta{margin:22px 0 0}
.st-legende .st-cta[hidden]{display:none}
.st-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:#4f8cff;color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 8px 24px rgba(79,140,255,.35);transition:background .2s,transform .2s}
.st-cta-btn:hover{background:#3b7bf5;color:#fff;text-decoration:none;transform:translateY(-1px)}
.st-cta-btn:focus-visible{outline:2px solid #7fb0ff;outline-offset:3px}
.st-cta-btn i{font-size:.85em}
.st-cta + .st-partage{margin-top:14px}
.st-legende .st-partage{margin:24px 0 0}
.st-lien{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#c9d4f2;font:inherit;font-size:.86rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.st-lien:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.st-lien:focus-visible{outline:2px solid #7fb0ff;outline-offset:2px}
.st-lien.is-ok{border-color:#34d399;color:#6ee7b7}
.st-ecran{scroll-margin-top:24px}
.st-rail{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.st-ep{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:inherit;font:inherit;text-align:left}
button.st-ep{cursor:pointer;transition:background .2s,border-color .2s}
button.st-ep:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
button.st-ep:focus-visible{outline:2px solid #7fb0ff;outline-offset:2px}
.st-ep.is-actif{border-color:#377dff;background:rgba(55,125,255,.14)}
.st-ep-vis{position:relative;flex:0 0 104px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#151c33;display:flex;align-items:center;justify-content:center;color:#6f7fa8;font-size:1.1rem}
.st-ep-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-ep-vis img+i{position:relative;color:#fff;font-size:.8rem;width:28px;height:28px;border-radius:50%;background:rgba(11,16,32,.65);display:flex;align-items:center;justify-content:center;padding-left:2px;box-sizing:border-box}
.st-ep-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.st-ep-t small{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8fa0c8;font-variant-numeric:tabular-nums}
.st-ep-t b{font-size:.95rem;font-weight:600;color:#fff;line-height:1.3}
.st-ep-t em{font-style:normal;font-size:.8rem;color:#8fa0c8;line-height:1.4}
.st-ep.is-bientot{border-style:dashed;background:transparent}
.st-ep.is-bientot b{color:#c9d4f2}
@media (max-width:960px){.st-scene{grid-template-columns:1fr}.st-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.st-section{padding:52px 16px 56px}.st-rail{grid-template-columns:1fr}.st-ecran{border-radius:14px}.st-ep-vis{flex-basis:92px}}
@media (prefers-reduced-motion:reduce){.st-point{animation:none}}

/* Épisode filmé à la verticale : montré EN ENTIER dans le cadre (jamais rogné : .bp.is-portrait de brief-player.css), sur un fond sombre. */
.st-ecran.is-portrait{background:#05070f}