/**
 * Composants partagés des maquettes 09/2026 (accueil, page Groupe).
 */

/* ── Vidéo YouTube en fond (SCR_Design::video_fond) ───────────
 * Recadrage « cover » par requêtes de conteneur : l'iframe 16/9 couvre le
 * cadre quel que soit son ratio, centrée, agrandie de 12 % pour pousser hors
 * champ le titre et le logo que YouTube affiche au démarrage.
 * `!important` : Divi impose `iframe { max-width: 100% }` et FitVids ses tailles. */
.scr-video-fond {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    container-type: size;
}
.scr-video-fond iframe {
    position: absolute !important; top: 50% !important; left: 50% !important;
    width: max(112cqw, 199.1cqh) !important; height: max(112cqh, 63cqw) !important;
    max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    transform: translate(-50%, -50%);
    /* Disparition rapide (commandes YouTube à peine entrevues quand la vidéo
       s'arrête), apparition lente. Le lecteur ne reçoit jamais la souris :
       pas de commandes au survol. */
    opacity: 0; transition: opacity .25s ease; pointer-events: none !important;
}
.scr-video-fond.is-lecture iframe { opacity: 1; transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) {
    .scr-video-fond { display: none; }
}

/* ── Onglets repliés en liste déroulante sur téléphone ────────
 * Les onglets restent des onglets sur grand écran ; sous 768 px, ils laissent
 * la place à un menu déroulant natif (plus lisible et manipulable au pouce).
 * Chaque page masque sa propre barre d'onglets dans la même requête média. */
.scr-onglets-mobile { display: none; }
@media (max-width: 767px) {
    .scr-onglets-mobile { display: block; width: 100%; }
    .scr-select-onglets {
        -webkit-appearance: none; appearance: none;
        display: block; width: 100%; box-sizing: border-box; margin: 0;
        padding: 14px 44px 14px 18px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 12px;
        background-color: #fff; color: #000;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d60407' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 12px center; background-size: 22px;
        font-family: var(--scr-f-label, 'Orbitron', sans-serif); font-weight: 900; font-size: 12px;
        letter-spacing: 1px; text-transform: uppercase; line-height: 1.2;
    }
    .scr-select-onglets:focus-visible { outline: 2px solid #d60407; outline-offset: 2px; }
}