/* ============================================================
   ONGLETS — motif générique "barre de pilules + panneau carte" réutilisé par
   2 pages Lovable : college/vie-du-college (Bloc tabulations AG) et
   enseignement/3eme-cycle-des (Bloc tabulations Phases, + bande de boutons
   commune en pied de carte, cf. builder/onglets.php).
   ============================================================ */
.onglets {


    /* ——— Barre de pilules ————————————————————————————————————— */
    .ag-tabs__nav {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        /* gap-1 */
        border-radius: var(--border-radius-full);
        /* bg-cerf-main-blue/10 */
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
        padding: 6px;
        /* p-1.5 */
    }

    .ag-tabs__btn {
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        padding: 10px 24px;
        /* px-6 py-2.5 */
        border-radius: var(--border-radius-full);
        font-size: 1rem;
        /* text-base */
        font-weight: var(--semibold);
        color: var(--color-primary);
        transition: background-color 0.2s ease, color 0.2s ease;
        margin: 0;
    }

    .ag-tabs__btn:hover:not(.is-active) {
        /* hover:bg-white/60 */
        background-color: color-mix(in srgb, var(--white) 60%, transparent);
    }

    .ag-tabs__btn.is-active {
        background-color: var(--color-primary);
        color: var(--white);
        box-shadow: var(--shadow-sm);
    }

    /* ——— Carte (bordure/ombre/arrondi communs à tous les onglets) ——————— */
    .ag-tabs {
        position: relative;
        margin-top: 40px;
        /* mt-10 */
    }

    .ag-tabs__card {
        position: relative;
        margin-top: 24px;
        /* mt-6 */
        overflow: hidden;
        border-radius: var(--border-radius-3xl);
        /* border-cerf-main-blue/10 */
        border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
        background-color: var(--white);
        /* shadow-[0_4px_24px_-12px_rgba(15,42,102,0.15)] : ombre douce ponctuelle, pas de variable
       dédiée pour un usage unique (même précédent que .pre-footer__partenaire). */
        box-shadow: 0 4px 24px -12px rgba(15, 42, 102, 0.15);
    }

    /* ——— Panneau (contenu propre à un onglet, à l'intérieur de la carte) ———— */
    .ag-tabs__panel {
        padding: 24px;
        /* p-6 */
    }

    @media (min-width: 768px) {
        .ag-tabs__panel {
            padding: 40px;
            /* md:p-10 */
        }
    }

    /* Panneaux inactifs : cachés en opacité/position (jamais display:none), pour que Splide
   mesure correctement la largeur du slider photos dès le montage initial (js/_slider.js
   monte tous les .wrapper_slider au DOMContentLoaded, actifs ou non). */
    .ag-tabs__panel:not(.is-active) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: -1;
    }

    .ag-tabs__panel.is-active {
        position: relative;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 1;
    }

    .ag-tabs__empty {
        margin: 0;
        font-style: italic;
        /* text-cerf-dark-blue/60 */
        color: var(--color-primary-dark-60);
    }

    .ag-tabs__texte {
        /* text-base */
        
        p {
            font-size: 1rem;
            color: var(--color-primary-dark);
        }
    }

    @media (min-width: 768px) {
        .ag-tabs__texte {
            p {
                font-size: 16px;
            }
            /* md:text-lg */
        }
    }

    /* ——— Boutons CTA ——————————————————————————————————————————— */
    .ag-tabs__boutons {
        margin-top: 24px;
        /* mt-6 */
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        /* gap-3 */
    }

    .ag-tabs__bouton {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* gap-2 */
        padding: 12px 28px;
        /* px-7 py-3 */
        border-radius: var(--border-radius-full);
        background-color: var(--color-cta);
        color: var(--white);
        font-size: 1rem;
        /* text-base */
        font-weight: var(--medium);
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .ag-tabs__bouton:hover {
        background-color: var(--color-deep-blue);
    }

    .ag-tabs__bouton svg {
        flex-shrink: 0;
    }

    /* ——— Vidéos ————————————————————————————————————————————————— */
    .ag-tabs__videos {
        margin-top: 32px;
        /* mt-8 */
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        /* gap-6 */
    }

    @media (min-width: 768px) {
        .ag-tabs__videos {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .ag-tabs__video-frame {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius-xl);
        overflow: hidden;
        background-color: var(--color-deep-blue-10);
    }

    .ag-tabs__video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Placeholder cadenas rendu à la place de l'iframe pour un non-membre :
       le composant .kn-locked (défini plus bas, réutilisable ailleurs) est
       forcé à remplir la frame en aspect-ratio 16:9. */
    .ag-tabs__video-frame .kn-locked {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }

    .ag-tabs__video-titre {
        margin: 12px 0 0;
        /* mt-3 */
        font-weight: var(--medium);
        color: var(--color-deep-blue);
    }

    /* ——— Slider photos (Splide, monté par js/_slider.js) ————————— */
    .ag-tabs__photos {
        margin-top: 32px;
        /* mt-8 */
    }

    .ag-tabs__photo {
        aspect-ratio: 4 / 3;
        border-radius: var(--border-radius-xl);
        overflow: hidden;
        background-color: var(--color-deep-blue-10);
    }

    .ag-tabs__photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Safari iOS : une diapositive Splide (élément flex étiré) portant aspect-ratio peut tomber à
       0 px de haut ; les flèches se retrouvaient alors sous les vidéos, coupées par la carte.
       Le ratio 4/3 est porté par l'image elle-même (rendu identique ailleurs) — 05/10/2026. */
    .ag-tabs .ag-tabs__photo {
        aspect-ratio: auto;
        height: auto;
    }

    .ag-tabs .ag-tabs__photo img {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* Flèches Splide : rondes bleues (calées sur PhotoCarousel Lovable), au lieu du style
   Splide par défaut. */
    /* .ag-tabs__photos .splide__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--border-radius-full);
        background-color: var(--color-primary);
        box-shadow: var(--shadow-card);
        opacity: 1;
        transition: background-color 0.2s ease;
    }

    .ag-tabs__photos .splide__arrow svg {
        fill: var(--white);
    }

    .ag-tabs__photos .splide__arrow:hover {
        background-color: var(--color-deep-blue);
    }

    .ag-tabs__photos .splide__arrow:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    } */

    /* ——— Bande de boutons COMMUNE (frère de "onglets", pas par onglet) ——————
   Toujours visible en pied de carte, quel que soit l'onglet actif (ex. les 3
   boutons "Instructions UNESS" identiques sur enseignement/3eme-cycle-des). */
    .ag-tabs__footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 16px;
        /* gap-4 */
        padding: 24px;
        /* p-6 */
        /* bg-cerf-main-blue/10 */
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }

    @media (min-width: 768px) {
        .ag-tabs__footer {
            padding: 32px;
            /* md:p-8 */
        }
    }

    .ag-tabs__footer-bouton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 28px;
        /* px-7 py-3 */
        border-radius: var(--border-radius-full);
        background-color: var(--color-cta);
        color: var(--white);
        font-size: 1rem;
        /* text-base */
        font-weight: var(--medium);
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        transition: background-color 0.2s ease;
    }

    .ag-tabs__footer-bouton:hover {
        background-color: var(--color-deep-blue);
        color: var(--white) !important;
    }
}