/* ===========================================================================
 * Capsules vidéo
 *
 * Grille de vignettes rendue par le shortcode [acx_capsules] et fenêtre de
 * lecture. Le shortcode ne sort pas de widgets Elementor : sa mise en forme
 * ne peut donc pas venir des réglages du site, elle vit ici. Toutes les
 * couleurs pointent vers les couleurs globales du kit 138.
 *
 * Chargée uniquement sur les pages contenant le shortcode.
 * ======================================================================== */

/* minmax(0, 1fr) plutôt que 1fr : sans ce minimum à zéro, un titre long impose
   sa largeur à sa colonne et les colonnes cessent d'être égales. */
.acx-capsules__grille {
    display: grid;
    grid-template-columns: repeat(var(--acx-capsules-colonnes, 3), minmax(0, 1fr));
    gap: 26px;
}

/* --- Vignette ----------------------------------------------------------- */

/* C'est un <button> et non un lien : le clic ouvre la vidéo dans la page, et
   le type d'article n'a de toute façon aucune URL. Les styles de bouton du
   navigateur sont donc entièrement remis à plat. */
.acx-capsules .acx-capsule {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    /* Hello Elementor met tout <button> en majuscules et interlettré : un titre
       de capsule est une phrase, pas un libellé de bouton. */
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* Arrivée d'un lot chargé par « Voir plus » : les tuiles montent et
   apparaissent, décalées de 70 ms l'une sur l'autre (le retard est posé par le
   script, qui seul connaît le rang de chaque tuile). La courbe sort vite puis
   freine, pour que le lot semble se poser.

   Une animation plutôt qu'une transition : elle démarre d'elle-même à
   l'insertion de l'élément, sans qu'il faille forcer un recalcul de style pour
   que le navigateur ait deux états à interpoler.

   « both » retient l'état de départ pendant le délai — sans lui, les tuiles en
   attente de leur tour s'afficheraient d'abord en clair. */
@keyframes acx-capsule-entre {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

.acx-capsules .acx-capsule--entre {
    animation: acx-capsule-entre .5s cubic-bezier(.2, .7, .3, 1) both;
}

/* Le bouton s'efface quand il n'y a plus rien à charger, au lieu de disparaître
   d'un coup et de faire sauter le bas de page. */
.acx-capsules__plus--sort {
    opacity: 0;
    pointer-events: none;
}

/* Le kit repeint le fond de tout <button> en or au survol
   (`.elementor-kit-138 button:hover`). Une tuile n'est pas un bouton d'action :
   elle reste transparente, seuls l'image et le titre réagissent. Deux classes
   suffisent à passer devant, sans !important. */
.acx-capsules .acx-capsule:hover,
.acx-capsules .acx-capsule:focus,
.acx-capsules .acx-capsule:active {
    background: none;
    color: inherit;
}

.acx-capsules .acx-capsule__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    background: var(--e-global-color-accent);
}

.acx-capsules .acx-capsule__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

/* Pastille de lecture, dessinée en CSS : pas d'icône à charger. */
.acx-capsules .acx-capsule__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--e-global-color-primary);
    transition: background .25s ease, transform .25s ease;
}

.acx-capsules .acx-capsule__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid var(--e-global-color-accent);
}

.acx-capsules .acx-capsule:hover .acx-capsule__media img,
.acx-capsules .acx-capsule:focus-visible .acx-capsule__media img {
    transform: scale(1.04);
}

.acx-capsules .acx-capsule:hover .acx-capsule__play,
.acx-capsules .acx-capsule:focus-visible .acx-capsule__play {
    background: #FFC233;
    transform: translate(-50%, -50%) scale(1.08);
}

.acx-capsules .acx-capsule:focus-visible .acx-capsule__media {
    outline: 2px solid var(--e-global-color-primary);
    outline-offset: 3px;
}

.acx-capsules .acx-capsule__titre {
    margin-top: 16px;
    color: var(--e-global-color-accent);
    font-family: "Oswald", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    transition: color .25s ease;
}

.acx-capsules .acx-capsule:hover .acx-capsule__titre,
.acx-capsules .acx-capsule:focus-visible .acx-capsule__titre {
    color: var(--e-global-color-primary);
}

/* --- Bouton « Voir plus » ----------------------------------------------- */

.acx-capsules__plus {
    margin-top: 40px;
    text-align: center;
    transition: opacity .3s ease;
}

/* Géométrie et typographie recopiées du bouton global du kit (15/32, rayon 3,
   16 px, interlettre 1,2), comme pour les cartes de promotion : ce bouton
   n'est pas un widget Elementor et ne peut pas hériter des réglages du site.
   Toute retouche du bouton global doit être reportée ici. */
.acx-capsules .acx-capsules__bouton {
    padding: 15px 32px;
    border: 0;
    border-radius: 3px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-accent);
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, opacity .25s ease;
}

.acx-capsules .acx-capsules__bouton:hover,
.acx-capsules .acx-capsules__bouton:focus {
    background: #FFC233;
}

.acx-capsules .acx-capsules__bouton[disabled] {
    opacity: .6;
    cursor: default;
}

/* --- Fenêtre de lecture -------------------------------------------------- */

.acx-capsule-modale {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* La barre d'administration est fixée à 99999 : elle passe devant la fenêtre
   et intercepte le clic sur la croix, qui se trouve juste sous elle. La fenêtre
   commence donc sous la barre quand un utilisateur est connecté. Sans effet
   pour les visiteurs, qui ne la voient jamais. */
body.admin-bar .acx-capsule-modale {
    top: 32px;
}

@media screen and (max-width: 782px) {

    body.admin-bar .acx-capsule-modale {
        top: 46px;
    }

}

.acx-capsule-modale__fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
}

.acx-capsule-modale__boite {
    position: relative;
    width: 100%;
    max-width: 1000px;
}

.acx-capsule-modale__scene {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: #000;
}

.acx-capsule-modale__scene iframe,
.acx-capsule-modale__scene video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Croix dessinée en deux barres : aucune police d'icônes n'est chargée sur
   cette page.

   Ancrée à la fenêtre et non à la boîte vidéo : au-dessus de la boîte, elle
   sortait de l'écran dès que la hauteur du navigateur était juste.

   Les dimensions sont reposées ici parce que le kit habille tout <button> —
   marges intérieures, fond or, majuscules. Deux classes suffisent à passer
   devant `.elementor-kit-138 button`, trois devant son `:hover`. */
.acx-capsule-modale .acx-capsule-modale__fermer {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background .25s ease;
}

/* Pastille or et croix Encre au survol : le même contraste que les boutons du
   site. Laisser la croix passer à l'or la rendait invisible sur le fond or que
   le kit posait de son côté. */
.acx-capsule-modale .acx-capsule-modale__fermer:hover,
.acx-capsule-modale .acx-capsule-modale__fermer:focus {
    background: var(--e-global-color-primary);
}

.acx-capsule-modale__fermer::before,
.acx-capsule-modale__fermer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: var(--e-global-color-secondary, #FFFFFF);
    transition: background .25s ease;
}

.acx-capsule-modale__fermer::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.acx-capsule-modale__fermer::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.acx-capsule-modale__fermer:hover::before,
.acx-capsule-modale__fermer:hover::after,
.acx-capsule-modale__fermer:focus::before,
.acx-capsule-modale__fermer:focus::after {
    background: var(--e-global-color-accent);
}

/* La page ne défile plus derrière la fenêtre ouverte. */
body.acx-capsule-ouverte {
    overflow: hidden;
}

/* --- Tablette ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1024px) {

    .acx-capsules__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {

    .acx-capsules__grille {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .acx-capsules .acx-capsule__titre {
        margin-top: 12px;
        font-size: 18px;
    }

    .acx-capsules .acx-capsule__play {
        width: 48px;
        height: 48px;
    }

    .acx-capsule-modale {
        padding: 16px;
    }

    .acx-capsule-modale .acx-capsule-modale__fermer {
        top: 12px;
        right: 12px;
    }

    .acx-capsules__plus {
        margin-top: 32px;
    }

}