/* css/shorts.css — module Shorts (novembre 2026) : grille de cartes, lecteur, bandeau de l'accueil, bande « Version courte » des fiches Comprendre.
   Charte : fond marine + cyan (comme les vidéos), cartes blanches à bordure épaisse, texte foncé sur fond clair (contraste marqué). Préfixe sh-. */

/* ---- Grille de cartes ---- */
.sh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px; margin:6px 0 18px }
.sh-card { --n:#16A34A; display:flex; flex-direction:column; background:#FFFFFF; color:#0F172A; text-decoration:none; border:3px solid #94A3B8; border-radius:20px; overflow:hidden; box-shadow:0 8px 18px -10px rgba(2,6,23,.55); transition:transform .15s, border-color .15s }
a.sh-card:hover { transform:translateY(-3px); border-color:var(--n) }
a.sh-card:focus-visible { outline:4px solid #22D3EE; outline-offset:3px }
.sh-poster { position:relative; display:block; aspect-ratio:3 / 4; background:#0B1220; overflow:hidden; border-bottom:3px solid #0F172A }
.sh-poster img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center }
.sh-niv { display:inline-flex; align-items:center; gap:7px; padding:3px 11px 3px 9px; border-radius:999px; background:#FFFFFF; color:#0F172A; border:3px solid var(--n); font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase }
.sh-niv::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--n) }
.sh-dur { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:#0B1220; color:#FFFFFF; border:2px solid #FFFFFF; font-size:13px; font-weight:800 }
.sh-dur i { font-size:16px; color:#22D3EE }
.sh-play { position:absolute; left:10px; bottom:10px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgba(11,18,32,.88); border:3px solid #FFFFFF; color:#FFFFFF; font-size:20px; transition:transform .15s }
a.sh-card:hover .sh-play { transform:scale(1.15) }
.sh-body { display:flex; flex-direction:column; gap:7px; padding:14px 16px 16px; flex:1 }
.sh-body > .sh-niv { align-self:flex-start }
.sh-body > b { font-size:16.5px; line-height:1.3; letter-spacing:-.01em }
.sh-d { font-size:13.5px; line-height:1.5; color:#334155; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden }
.sh-go { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:12px; background:#0F172A; color:#FFFFFF; font-size:13.5px; font-weight:800 }
.sh-card.verrou .sh-poster img { filter:blur(7px) brightness(.55) }
.sh-card.verrou .sh-play { background:#FFFFFF; color:#0F172A; border-color:#0F172A }
.sh-card.verrou .sh-go { background:#6D28D9 }
.sh-card.retire { border-style:dashed }
.sh-ret { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:8px; background:#FEF3C7; color:#713F12; border:2px solid #F59E0B; font-size:12px; font-weight:800 }
.sh-poster .sh-ret { position:absolute; left:10px; right:10px; top:10px; justify-content:center }
.sh-retour { margin:6px 0 18px }
.sh-retour a { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:12px; background:#FFFFFF; color:#0F172A; border:3px solid #0F172A; font-weight:800; font-size:14px; text-decoration:none }
.sh-retour a:hover { background:#E2E8F0 }

/* ---- Bandeau de la page /shorts.php ---- */
.sh-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; margin:4px 0 18px; padding:26px 28px; border-radius:24px; background:linear-gradient(135deg, #0B1220, #1E293B); border:3px solid #22D3EE; color:#FFFFFF }
.sh-hero .wm { position:absolute; right:-12px; top:-18px; font-size:190px; opacity:.1; color:#22D3EE }
.sh-hero-in { position:relative; min-width:0 }
.sh-kick2 { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:#22D3EE }
.sh-kick2 .sep { opacity:.6 }
.sh-hero h1 { margin:6px 0 0; font-size:38px; line-height:1.1; letter-spacing:-.03em }
.sh-hero p { margin:10px 0 0; font-size:15.5px; line-height:1.6; max-width:68ch; color:#E2E8F0 }
.sh-hero .sh-cta { margin-top:16px; display:flex; flex-wrap:wrap; gap:10px }
.sh-stats { position:relative; list-style:none; margin:0; padding:0; display:flex; gap:10px }
.sh-stats li { min-width:104px; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.4); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#CBD5E1; text-align:center }
.sh-stats li b { display:block; font-size:26px; letter-spacing:-.02em; color:#22D3EE; line-height:1.15 }
.sh-note { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 16px; border-radius:14px; background:#FEF3C7; border:3px solid #F59E0B; color:#451A03; font-size:14.5px; line-height:1.5 }
.sh-note > i { font-size:24px; flex-shrink:0 }
@media (max-width:860px) { .sh-hero { grid-template-columns:1fr; padding:20px } .sh-hero h1 { font-size:30px } .sh-stats li { min-width:0; flex:1 } }

/* ---- Lecteur ---- */
.sh-lect { --n:#16A34A; display:grid; grid-template-columns:minmax(250px, 370px) minmax(0,1fr); gap:30px; align-items:start; padding:22px; margin:4px 0 20px; background:#FFFFFF; color:#0F172A; border:3px solid #94A3B8; border-radius:24px }
.sh-cadre { width:min(100%, calc(78vh * 9 / 16)); margin:0 auto; padding:7px; border-radius:26px; background:#0F172A; box-shadow:0 14px 28px -12px rgba(2,6,23,.7) }
.sh-cadre video { display:block; width:100%; aspect-ratio:9 / 16; border-radius:19px; background:#0B1220; object-fit:contain }
.sh-info { min-width:0 }
.sh-kick { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; font-size:13px; font-weight:800; color:#334155 }
.sh-kick > span:not(.sh-niv):not(.sh-ret) { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:#E2E8F0; border:2px solid #94A3B8 }
.sh-info h1 { margin:0; font-size:30px; line-height:1.15; letter-spacing:-.02em }
.sh-desc { margin:12px 0 0; font-size:16px; line-height:1.65; color:#1E293B; max-width:62ch; text-align:justify }
.sh-speed { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 0; font-size:13px; font-weight:800; color:#334155 }
.sh-speed button { padding:6px 12px; border-radius:10px; background:#FFFFFF; color:#0F172A; border:3px solid #94A3B8; font:800 13px "Inter", sans-serif; cursor:pointer }
.sh-speed button.on { background:#0F172A; color:#FFFFFF; border-color:#0F172A }
.sh-speed button:focus-visible { outline:3px solid #22D3EE; outline-offset:2px }
.sh-h2 { margin:22px 0 10px; font-size:13px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:#334155 }
.sh-liens { display:grid; gap:10px; max-width:560px }
.sh-liens a, .sh-nav a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; background:#FFFFFF; color:#0F172A; text-decoration:none; border:3px solid var(--c, #0F172A) }
.sh-liens a > i { flex-shrink:0; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--c); color:#FFFFFF; font-size:22px }
.sh-liens a span, .sh-nav a span { flex:1; min-width:0 }
.sh-liens small, .sh-nav small { display:block; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#475569 }
.sh-liens b, .sh-nav b { display:block; font-size:15px; line-height:1.3 }
.sh-liens em { font-style:normal; font-size:20px }
.sh-liens a:hover, .sh-nav a:hover { background:#F1F5F9 }
.sh-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; max-width:560px }
.sh-nav a { flex:1 1 240px; border-color:#0F172A }
.sh-nav a.suiv { background:#0F172A; color:#FFFFFF }
.sh-nav a.suiv small { color:#22D3EE }
.sh-nav a.suiv:hover { background:#1E293B }
.sh-nav a > i { font-size:22px }
@media (max-width:860px) { .sh-desc { text-align:left } .sh-lect { grid-template-columns:1fr; padding:16px; gap:20px } .sh-cadre { width:min(100%, 360px) } .sh-info h1 { font-size:25px } }

/* ---- Carte de l'accueil (sous « Passe ta certif PortailSIO ») ---- */
a.v3-cert.v3-shorts { background:linear-gradient(135deg, #0B1220, #1E293B); border-color:#22D3EE }
a.v3-cert.v3-shorts .ic { background:#22D3EE; color:#0B1220 }
a.v3-cert.v3-shorts .soon { color:#0B1220 }
a.v3-cert.v3-shorts .go { color:#0B1220 }
a.v3-cert.v3-shorts .wm { color:#22D3EE }
a.v3-cert.v3-shorts .lv li { max-width:100%; background:rgba(34,211,238,.14); border-color:#22D3EE }
a.v3-cert.v3-shorts .lv li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:270px }
a.v3-cert.v3-shorts .lv li > i { color:#22D3EE }
.sh-fan { position:relative; flex-shrink:0; margin-left:auto; display:flex; align-items:flex-end; padding-left:18px }
.sh-fan img { width:62px; height:110px; margin-left:-18px; object-fit:cover; object-position:top center; border-radius:12px; border:3px solid #FFFFFF; background:#0B1220; box-shadow:0 8px 16px -6px rgba(0,0,0,.7) }
.sh-fan img:nth-child(1) { transform:rotate(-9deg) }
.sh-fan img:nth-child(2) { transform:translateY(-6px); z-index:1; width:68px; height:121px }
.sh-fan img:nth-child(3) { transform:rotate(9deg) }
.sh-fan + .go { margin-left:0 }
@media (max-width:1000px) { .sh-fan { display:none } .sh-fan + .go { margin-left:auto } }

/* ---- Bande « Version courte » en haut d'une fiche Comprendre ---- */
.sh-bandes { display:grid; gap:10px; margin:0 0 16px }
a.sh-bande { --n:#16A34A; display:flex; align-items:center; gap:14px; padding:10px 16px; border-radius:18px; background:#0B1220; color:#FFFFFF; text-decoration:none; border:3px solid #22D3EE }
a.sh-bande:hover { background:#1E293B }
a.sh-bande:focus-visible { outline:4px solid #FDE68A; outline-offset:3px }
.sh-bande .ph { position:relative; flex-shrink:0; width:40px; height:70px; border-radius:9px; overflow:hidden; border:2px solid #FFFFFF; background:#0F172A }
.sh-bande .ph img { width:100%; height:100%; object-fit:cover; object-position:top }
.sh-bande .ph i { position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,18,32,.45); color:#FFFFFF; font-size:18px }
.sh-bande .tx { flex:1; min-width:0 }
.sh-bande small { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#22D3EE }
.sh-bande b { display:block; margin-top:2px; font-size:17px; line-height:1.3 }
.sh-bande .go { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:12px; background:#FFFFFF; color:#0B1220; font-size:14px; font-weight:800 }
@media (max-width:640px) { a.sh-bande { flex-wrap:wrap } .sh-bande .go { width:100% ; justify-content:center } }

/* ---- Section de la vitrine (visiteurs) ---- */
.sh-vit .sh-cta { margin:6px 0 0; display:flex; flex-wrap:wrap; gap:10px }

@media (prefers-reduced-motion:reduce) { .sh-card, .sh-play { transition:none } a.sh-card:hover { transform:none } a.sh-card:hover .sh-play { transform:none } }

/* Carte Shorts de l'accueil : version YouTube (nov. 2026) */
a.v3-cert.v3-shorts .ic { position:relative; overflow:visible }
a.v3-cert.v3-shorts .sh-pas { position:absolute; top:-12px; right:-12px; min-width:38px; height:38px; padding:0 6px; box-sizing:border-box; border-radius:99px; background:#FACC15; color:#0B1220; border:3px solid #0B1220; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; line-height:1; font-style:normal }
a.v3-cert.v3-shorts .sh-k { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px }
a.v3-cert.v3-shorts .sh-k li { margin:0; padding:0; background:none; border:0; color:#CBD5E1; font-size:12px; line-height:1.3 }
a.v3-cert.v3-shorts .sh-k b { display:block; font-size:24px; line-height:1.1; font-weight:800; color:#22D3EE }
a.v3-cert.v3-shorts .go { background:#FF0000; color:#FFFFFF; border-color:#FF0000 }
a.v3-cert.v3-shorts .go i { color:#FFFFFF }
a.v3-cert.v3-shorts:hover .go { background:#CC0000; border-color:#CC0000 }

/* Cartes Shorts qui ouvrent YouTube : bouton rouge, texte blanc */
a.sh-card[target="_blank"] .sh-go { background:#FF0000; color:#FFFFFF; border-color:#FF0000 }
a.sh-card[target="_blank"] .sh-go i { color:#FFFFFF }
a.sh-card[target="_blank"]:hover .sh-go, a.sh-card[target="_blank"]:focus-visible .sh-go { background:#CC0000; color:#FFFFFF; border-color:#CC0000 }

/* Rond de lecture des cartes Shorts qui ouvrent YouTube : rouge, flèche blanche */
a.sh-card[target="_blank"] .sh-play { background:#FF0000; border-color:#FFFFFF; color:#FFFFFF }
a.sh-card[target="_blank"] .sh-play i { color:#FFFFFF }
a.sh-card[target="_blank"]:hover .sh-play, a.sh-card[target="_blank"]:focus-visible .sh-play { background:#CC0000; border-color:#FFFFFF; color:#FFFFFF }

/* Bouton « Voir tous les Shorts sur YouTube » de la page /shorts.php */
.sh-yt-btn { display:inline-flex; align-items:center; gap:8px; background:#FF0000; color:#FFFFFF; font-weight:800; padding:11px 18px; border-radius:12px; border:2px solid #FF0000; text-decoration:none }
.sh-yt-btn i { font-size:20px; color:#FFFFFF }
.sh-yt-btn:hover, .sh-yt-btn:focus-visible { background:#CC0000; border-color:#CC0000; color:#FFFFFF }

/* Page /shorts.php : accordéons par thème (nov. 2026) */
.sh-themes { display:flex; flex-direction:column; gap:18px; margin-top:8px }
details.sh-theme { background:#0F172A; border:2px solid #22D3EE; border-radius:18px; overflow:hidden }
details.sh-theme > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:14px 18px; color:#FFFFFF; font-weight:800; font-size:20px; line-height:1.25 }
details.sh-theme > summary::-webkit-details-marker { display:none }
details.sh-theme > summary:hover { background:#1E293B }
details.sh-theme > summary:focus-visible { outline:3px solid #FACC15; outline-offset:-3px }
.sh-th-ic { width:44px; height:44px; flex:none; border-radius:12px; background:#22D3EE; color:#0B1220; display:flex; align-items:center; justify-content:center; font-size:24px }
.sh-th-t { flex:1; min-width:0 }
.sh-th-n { flex:none; background:#FACC15; color:#0B1220; border-radius:99px; padding:3px 12px; font-size:14px; font-weight:800; white-space:nowrap }
.sh-th-ch { flex:none; font-size:22px; color:#22D3EE; transition:transform .2s }
details.sh-theme[open] > summary .sh-th-ch { transform:rotate(180deg) }
details.sh-theme[open] > summary { border-bottom:2px solid #22D3EE }
details.sh-theme > .sh-grid { padding:18px; margin:0 }
.sh-tout { display:flex; gap:10px; margin:0 0 12px }
.sh-tout button { display:inline-flex; align-items:center; gap:6px; background:#0F172A; color:#FFFFFF; border:2px solid #22D3EE; border-radius:10px; padding:8px 14px; font-weight:800; font-size:14px; cursor:pointer }
.sh-tout button:hover { background:#1E293B }
@media (max-width:700px) { details.sh-theme > summary { font-size:17px; padding:12px 14px } .sh-th-ic { width:38px; height:38px; font-size:20px } details.sh-theme > .sh-grid { padding:12px } }