/*
 * Styles des blocs Oasis.
 * Palette reprise du site actuel : turquoise #5abdb9, gris #f0f0f0,
 * ardoise #354d59, texte #666.
 */

/*
 * L'attribut `hidden` n'est appliqué que par la feuille de style du navigateur,
 * via un `[hidden] { display: none }` de très faible priorité : le moindre
 * `display: flex` écrit ici l'annule sans le moindre avertissement. L'élément
 * se déclare alors masqué tout en restant affiché, et les filtres ne filtrent
 * plus rien.
 *
 * On réaffirme donc la règle. Le `!important` se justifie ici : `hidden` décrit
 * un état, pas une mise en forme — aucune règle d'apparence n'a à le contredire.
 */
[hidden] {
    display: none !important;
}


:root {
    --oasis-turquoise: #5abdb9;
    --oasis-turquoise-fonce: #3d9b97;
    --oasis-gris: #f0f0f0;
    --oasis-ardoise: #354d59;
    --oasis-texte: #666;
}

/* ---------------------------------------------------------------- Agenda */

.oasis-agenda__filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.oasis-filtre {
    border: 1px solid var(--oasis-teinte, var(--oasis-turquoise));
    background: transparent;
    color: var(--oasis-teinte, var(--oasis-turquoise-fonce));
    border-radius: 2rem;
    padding: .35rem 1rem;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.oasis-filtre:hover,
.oasis-filtre:focus-visible {
    /* `color-mix` éclaircit la teinte choisie sans la connaître à l'avance. */
    background: color-mix(in srgb, var(--oasis-teinte, #5abdb9) 15%, transparent);
}

.oasis-filtre.is-actif {
    background: var(--oasis-teinte, var(--oasis-turquoise));
    color: var(--oasis-encre, #fff);
}

.oasis-agenda__mois {
    margin: 2rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--oasis-gris);
    text-transform: capitalize;
    font-size: 1.15rem;
    color: var(--oasis-ardoise);
}

.oasis-agenda__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oasis-evenement {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--oasis-gris);
}

.oasis-evenement__date {
    flex: 0 0 3.25rem;
    text-align: center;
    background: var(--oasis-teinte, var(--oasis-turquoise));
    color: var(--oasis-encre, #fff);
    border-radius: 6px;
    padding: .35rem 0 .25rem;
    line-height: 1.1;
}

.oasis-evenement__jour {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
}

.oasis-evenement__jour-nom {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .9;
}

.oasis-evenement__corps {
    flex: 1 1 auto;
    min-width: 0;
}

.oasis-evenement__titre {
    display: block;
    font-weight: 600;
    color: var(--oasis-ardoise);
}

.oasis-evenement__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .15rem;
    font-size: .875rem;
    color: var(--oasis-texte);
}

.oasis-etiquette {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 3px;
    font-size: .75rem;
    background: var(--oasis-teinte, var(--oasis-gris));
    color: var(--oasis-encre, var(--oasis-ardoise));
}

.oasis-agenda--vide,
.oasis-predications--vide {
    padding: 1.5rem;
    background: var(--oasis-gris);
    border-radius: 6px;
    color: var(--oasis-texte);
}

/* --------------------------------------------------------- Prédications */

.oasis-predications {
    display: grid;
    gap: 2rem;
    /* `min()` empêche la carte d'imposer une largeur plus grande que la colonne
       qui la contient : sans lui, le bloc de 28 % de l'accueil débordait et
       recouvrait le bloc voisin. */
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}

.oasis-predication {
    background: #fff;
    border: 1px solid var(--oasis-gris);
    border-radius: 6px;
    padding: 1rem;
}

.oasis-predication__titre {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    color: var(--oasis-ardoise);
}

.oasis-predication__meta {
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--oasis-texte);
}

.oasis-predication__roles {
    display: block;
}

/* Cadre 16:9 sans script. */
.oasis-predication__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--oasis-gris);
    border-radius: 4px;
    overflow: hidden;
}

.oasis-predication__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.oasis-predication__audio {
    width: 100%;
}

/* ----------------------------------------------------------------- Carte */

.oasis-carte {
    margin: 0;
}

.oasis-carte img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 900px;
    margin-inline: auto;
    border-radius: 6px;
}

.oasis-carte__legende {
    margin-top: .75rem;
    text-align: center;
    font-size: .9rem;
    color: var(--oasis-texte);
}

.oasis-carte__absent {
    display: block;
    padding: 2rem;
    text-align: center;
    background: var(--oasis-gris);
    border-radius: 6px;
}

/* Confort de lecture sur petits écrans. */
@media (max-width: 40rem) {
    .oasis-evenement {
        gap: .75rem;
    }

    .oasis-predications {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------- Agenda, disposition colonnes */
/* Reprend le bloc « Prochainement… » de l'accueil : les événements côte à côte,
   trois de front, dans une colonne étroite. */

.oasis-agenda--colonnes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.oasis-prochain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--oasis-gris);
    border-radius: 6px;
}

.oasis-prochain__date {
    display: block;
    min-width: 3rem;
    padding: .3rem .4rem;
    background: var(--oasis-teinte, var(--oasis-turquoise));
    color: var(--oasis-encre, #fff);
    border-radius: 6px;
    line-height: 1.1;
}

.oasis-prochain__jour {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
}

.oasis-prochain__mois {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.oasis-prochain__titre {
    font-weight: 600;
    color: var(--oasis-ardoise);
    line-height: 1.25;
}

.oasis-prochain__heure {
    font-size: .8rem;
    color: var(--oasis-texte);
}

@media (max-width: 48rem) {
    .oasis-agenda--colonnes {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------- Carrousel */
/* Défilement natif : `scroll-snap` cale chaque photo, le navigateur fait le
   reste. Aucune bibliothèque, contrairement à UIkit sur le site Joomla. */

.oasis-carrousel {
    position: relative;
    margin-bottom: 2rem;
}

.oasis-carrousel__piste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 6px;
}

.oasis-carrousel__piste::-webkit-scrollbar {
    display: none;
}

.oasis-carrousel__vue {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin: 0;
}

/* Un cadre proportionnel plutôt qu'une hauteur fixe : celle-ci ne suivait pas
   la largeur, et sur grand écran le cadre atteignait un rapport de 2,7, qui
   coupait le haut et le bas des photos. */
.oasis-carrousel__vue img {
    display: block;
    width: 100%;
    aspect-ratio: var(--oasis-carrousel-ratio, 16 / 9);
    height: auto;
    object-fit: cover;
}

.oasis-carrousel__vue figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .75rem 1rem;
    background: rgba(53, 77, 89, .75);
    color: #fff;
    font-size: .95rem;
    text-align: center;
}

.oasis-carrousel__fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s, background .2s;
}

.oasis-carrousel:hover .oasis-carrousel__fleche,
.oasis-carrousel__fleche:focus-visible {
    opacity: 1;
}

.oasis-carrousel__fleche:hover {
    background: #000;
}

.oasis-carrousel__fleche--prec { left: .75rem; }
.oasis-carrousel__fleche--suiv { right: .75rem; }

@media (max-width: 48rem) {
    /* Sur écran tactile on fait défiler au doigt : les flèches encombrent. */
    .oasis-carrousel__fleche {
        display: none;
    }
}

/* ------------------------------------------------------- Aperçu des vidéos */

/*
 * Le lecteur YouTube n'est inséré qu'au clic. Jusque-là, un aperçu servi par
 * le site : la page n'adresse aucune requête à Google tant que le visiteur n'a
 * pas manifesté l'envie de regarder.
 */
.oasis-predication__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--oasis-ardoise, #354d59);
    border-radius: 4px;
    overflow: hidden;
}

.oasis-predication__video > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.oasis-video {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.oasis-video__vignette {
    width: 100%;
    height: 100%;
    /* La vignette de YouTube est en 4/3 et porte deux bandes noires : on la
       recadre plutôt que de la déformer ou de garder les bandes. */
    object-fit: cover;
    display: block;
}

/* Repli : le logo, posé sur un aplat, jamais recadré. */
.oasis-video--repli {
    background: var(--oasis-gris, #f0f0f0);
}

.oasis-video__logo {
    max-width: 55%;
    max-height: 55%;
    width: auto;
    height: auto;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: contain;
}

/* Dernier recours : ni vignette ni logo, on affiche le titre. */
.oasis-video__titre {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #fff;
    font-size: 1.05rem;
    text-align: center;
}

/* Le bouton de lecture, dessiné plutôt qu'importé : pas de fichier à charger,
   et il reste net à toutes les tailles d'écran. */
.oasis-video__lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 3.2rem;
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.62);
    transition: background-color 0.15s;
}

.oasis-video__lecture::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 1rem;
    border-color: transparent transparent transparent #fff;
}

.oasis-video:hover .oasis-video__lecture,
.oasis-video:focus-visible .oasis-video__lecture {
    background: #c00;
}

.oasis-video:focus-visible {
    outline: 3px solid var(--oasis-turquoise, #5abdb9);
    outline-offset: -3px;
}

/* Sans JavaScript, le bouton ne mène nulle part : on le masque au profit du
   lien vers YouTube, qui lui fonctionne toujours. */
.no-js .oasis-video { display: none; }

.oasis-video__lien {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: underline;
}