/*
 * Pages de gestion ("Gestion des réservations" / "Gestion du site") : pleine
 * largeur de la fenêtre, quel que soit le réglage "Conteneur fluide" du
 * template (qui s'applique sinon à tout le site). Sans "Conteneur fluide"
 * activé, la grille de Cassiopeia garde ses colonnes centrales à une largeur
 * fixe en rem, plafonnant la page à environ 1270px quelle que soit la
 * largeur de la fenêtre — on reproduit ici, seulement pour ces pages
 * (classe posée dans templates/motoclub/index.php), les mêmes colonnes en
 * pourcentage que le mode "Conteneur fluide" natif de Cassiopeia.
 */
@supports (display: grid) {
    body.roulages-pleine-largeur .site-grid {
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
    }
}

/*
 * Alignement du menu principal (champ "menuAlign" du template).
 * On force nous-mêmes le bandeau (.container-header) en ligne flex avec le
 * logo et le menu côte à côte : par défaut Cassiopeia peut empiler ces blocs
 * sur deux lignes selon la largeur d'écran, ce qui rendait "justify-content"
 * sans effet visible sur le seul conteneur du menu.
 */

.container-header {
    padding-inline: 1.5rem !important;
}

/*
 * Tout ce qui force le logo et le menu côte à côte (et l'alignement du menu)
 * ne s'applique qu'à partir de 992px (repère utilisé par Cassiopeia lui-même
 * pour son propre repliement mobile). En dessous, on laisse le comportement
 * natif de Cassiopeia gérer l'empilement / le bouton "hamburger" — sinon le
 * menu ne peut jamais se replier sur tablette/smartphone.
 */
@media (min-width: 992px) {
    .container-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    /* Cassiopeia force chaque bloc du bandeau à width:100% (prévu pour un
       empilement en pleine largeur) : ça annule tout flex-grow/shrink et
       bloque le repositionnement du menu. On neutralise ça pour permettre
       au logo et au menu de se partager la ligne. */
    .container-header .container-brand,
    .container-header .container-nav {
        width: auto !important;
        max-width: none !important;
    }

    /* Ordre explicite : le logo passe toujours avant le menu. */
    .container-header .container-brand {
        order: 0 !important;
        flex: 0 0 auto !important;
    }

    .container-header .container-nav {
        order: 1 !important;
        flex: 1 1 auto !important;
        display: flex !important;
    }

    /* Panier / compte : une troisième colonne à part entière, après le
       menu, plutôt qu'un enfant de .container-nav — ça évite de se heurter
       au flex:1 0 100% que Cassiopeia impose au <ul class="mod-menu">
       ci-dessous (voir commentaire), qui sinon repousse tout le reste sur
       une ligne séparée et casse l'alignement du menu. */
    .container-header .container-actions {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    /*
     * Cassiopeia force le <ul class="mod-menu"> lui-même à flex:1 0 100% :
     * il s'étire pour remplir tout le conteneur, ce qui annule le
     * justify-content posé sur son enveloppe .container-nav (plus d'espace
     * à répartir). Il faut donc aligner les liens à l'intérieur du <ul>
     * lui-même.
     */
    .container-header .mod-menu {
        display: flex !important;
    }

    .container-header .container-nav.menu-align-left,
    .container-header .container-nav.menu-align-left .mod-menu {
        justify-content: flex-start !important;
    }

    .container-header .container-nav.menu-align-center,
    .container-header .container-nav.menu-align-center .mod-menu {
        justify-content: center !important;
    }

    .container-header .container-nav.menu-align-right,
    .container-header .container-nav.menu-align-right .mod-menu {
        justify-content: flex-end !important;
    }
}

/*
 * Couleurs du club : ces règles consomment les variables --headerbg,
 * --headercolor, --btnbg, --btnbgh, --btncolor, --btncolorh, --footerbg,
 * --footercolor définies en inline (voir index.php) à partir des champs
 * de couleur du template. Sans ces règles, les variables n'ont aucun effet
 * car Cassiopeia ne les consomme pas nativement.
 */

/*
 * !important : nos styles sont chargés via l'API classique addStyleSheet,
 * en dehors du WebAssetManager qui gère l'ordre de cascade de Cassiopeia.
 * On garantit ainsi que la charte du club l'emporte quel que soit l'ordre
 * de chargement des feuilles de style.
 */

.container-header {
    background-color: var(--headerbg) !important;
    background-image: none !important;
}

.container-header .navbar-brand a {
    color: var(--headercolor) !important;
    text-decoration: none;
}

/* Slogan à droite du logo (au lieu d'en dessous) pour réduire la hauteur
   du bandeau. */
.container-header .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: .75rem;
}

.container-header .navbar-brand .site-description {
    margin: 0 !important;
}

.container-header .mod-menu {
    color: var(--headercolor) !important;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    font-weight: 700 !important;
}

/* Pas de soulignement sur les liens/boutons du menu principal (état normal
   ET survol : Cassiopeia ne retire déjà le soulignement qu'au survol). */
.container-header .mod-menu a,
.container-header .mod-menu button {
    text-decoration: none !important;
}

/* Sous-menu affiché au survol de la souris plutôt qu'au clic (desktop
   uniquement — sur mobile/tablette le clic reste nécessaire). */
@media (min-width: 992px) {
    .container-header .metismenu > li.parent:hover > .mm-collapse {
        display: block !important;
    }
}

.btn-primary {
    --btn-color: var(--btncolor);
    --btn-bg: var(--btnbg);
    --btn-border-color: var(--btnbg);
    --btn-hover-color: var(--btncolorh);
    --btn-hover-bg: var(--btnbgh);
    --btn-hover-border-color: var(--btnbgh);
    --btn-active-color: var(--btncolorh);
    --btn-active-bg: var(--btnbgh);
    --btn-active-border-color: var(--btnbgh);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--btn-hover-bg) !important;
}

.container-footer {
    color: var(--footercolor) !important;
    background-color: var(--footerbg) !important;
    background-image: none !important;
}

.container-footer a {
    color: var(--footercolor) !important;
}

.motoclub-footer-info {
    width: 100%;
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: .9rem;
    line-height: 1.6;
}

.motoclub-footer-info p {
    margin-bottom: .75rem;
}

.motoclub-footer-info a {
    text-decoration: underline;
}

.offline-card .header {
    color: var(--headercolor) !important;
    background-color: var(--headerbg) !important;
    background-image: none;
}

/*
 * Bandeau d'accueil (hero) : image de fond en parallax léger, voile sombre,
 * titre blanc et bouton d'appel à l'action vers le calendrier des roulages.
 */

.hero-roulages {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    isolation: isolate;
}

.hero-roulages__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .55) 100%);
    z-index: 0;
}

.hero-roulages__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    padding: 3rem 5vw;
    text-align: right;
}

.hero-roulages__title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    margin-bottom: 1.5rem;
}

.hero-roulages__btn {
    display: inline-block;
    background: var(--btnbg, #cc0000);
    color: var(--btncolor, #fff);
    font-weight: 700;
    padding: .9rem 2.5rem;
    border-radius: .25rem;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.hero-roulages__btn:hover,
.hero-roulages__btn:focus {
    background: var(--btnbgh, #990000);
    color: var(--btncolorh, #fff);
}

@media (max-width: 767px) {
    .hero-roulages {
        /* background-attachment: fixed est instable sur mobile Safari */
        background-attachment: scroll;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-roulages__inner {
        text-align: center;
        margin: 0 auto;
    }
}

/*
 * Présentation d'accueil (com_roulages, Options -> Accueil) : texte et
 * bouton affichés sous le bandeau hero, uniquement sur la page d'accueil.
 */
.accueil-presentation {
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 0 5vw;
    text-align: center;
}

.accueil-presentation__texte {
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.accueil-presentation__texte p:last-child {
    margin-bottom: 0;
}

.accueil-presentation__btn {
    display: inline-block;
    background: var(--btnbg, #cc0000);
    color: var(--btncolor, #fff);
    font-weight: 700;
    padding: .75rem 2rem;
    border-radius: .25rem;
    text-decoration: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.accueil-presentation__btn:hover,
.accueil-presentation__btn:focus {
    background: var(--btnbgh, #990000);
    color: var(--btncolorh, #fff);
}

.accueil-presentation__facture {
    max-width: 360px;
    margin: 1.75rem auto 0;
}

.accueil-presentation__facture-label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
}

.accueil-presentation__facture-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.accueil-presentation__facture-ligne .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

/*
 * Le champ doit laisser lire un numéro entier sans défilement. Les factures
 * des saisons reprises de l'ancien site portent leur année en préfixe
 * (« 2025-U4J22 ») : douze caractères en chasse fixe, espacés de .15em, d'où
 * cette largeur minimale. Le champ reste élastique, et la ligne passe à la
 * ligne plutôt que d'écraser le bouton sur un téléphone.
 */
.accueil-presentation__facture-champ {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-family: monospace;
    flex: 1 1 11rem;
    min-width: 11rem;
}

/*
 * Le chrome "card" du gabarit (bordure + fond du titre) ne convient pas à
 * ce module : on l'affiche à nu, sans encadré ni bandeau de titre coloré.
 */
.card:has(.mod-banners.bannergroup) {
    border: none;
    background: none;
}

.card:has(.mod-banners.bannergroup) .card-header {
    background: none;
    border: none;
    padding-left: 0;
}

.card:has(.mod-banners.bannergroup) .card-body {
    padding-left: 0;
    padding-right: 0;
}

/*
 * Module "Partenaires" (mod_banners, position bottom-b, affiché sur
 * toutes les pages juste avant le footer) : grille de logos sponsors,
 * 3 colonnes sur grand écran, qui se resserre proprement sur tablette
 * et mobile plutôt que de déborder ou de s'entasser en liste verticale.
 */
.mod-banners.bannergroup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    gap: 2rem 1.5rem;
    padding: 1rem 0;
}

.mod-banners__item.banneritem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.mod-banners__item.banneritem img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .mod-banners.bannergroup {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .mod-banners.bannergroup {
        grid-template-columns: 1fr;
    }
}

/*
 * Page "L'association" (com_roulages, vue "association") : bandeau photo
 * et barres de titre en pleine largeur d'écran, alors que la vue est rendue
 * à l'intérieur du conteneur centré/limité en largeur de Cassiopeia. On
 * utilise l'astuce classique de "breakout" (100vw + décalage négatif) plutôt
 * que de toucher au gabarit, pour ne pas avoir à sortir ces blocs du flux
 * normal du composant.
 *
 * 100vw inclut la largeur de la barre de défilement verticale : le bloc en
 * "breakout" déborde donc de quelques pixels au-delà de la fenêtre visible,
 * ce qui ajoute un espace blanc et une barre de défilement horizontale sur
 * toute la page. On masque ce léger débordement au niveau du <body>.
 */
html,
body {
    overflow-x: hidden !important;
}

.roulages-association__bandeau,
.roulages-association__barre-titre,
.accueil-presentation__barre-titre {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.roulages-association__bandeau {
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.roulages-association__bandeau-titre {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 3rem);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
    margin: 0;
    padding: 0 1rem;
}

.roulages-association__barre-titre,
.accueil-presentation__barre-titre {
    background-color: #9a9a9a;
    color: #000;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.roulages-association__photo-wrapper {
    text-align: center;
    margin-bottom: 1rem;
}

.roulages-association__photo {
    max-width: 100%;
    height: auto;
}

/*
 * Page "Photos" (com_roulages, vue "photos") : même bandeau/barres de
 * titre que "L'association" (classes réutilisées telles quelles), plus le
 * carrousel "Photos d'ambiance" et les vidéos intégrées, propres à cette page.
 */
.roulages-photos {
    max-width: 900px;
    margin: 0 auto;
}

.roulages-photos__intro {
    text-align: center;
    margin: 1.5rem 0;
}

/* Facebook fige la largeur du contenu de son widget au moment du chargement
   (pas seulement l'apparence de la boîte) — forcer une largeur plus grande
   par CSS après coup ne fait qu'agrandir une boîte vide autour d'un contenu
   resté étroit. On garde donc sa largeur réelle (~400px, réglée via
   data-width dans le code collé) et on remplit l'espace restant à droite
   avec le texte explicatif de l'admin plutôt que d'essayer de l'élargir. */
.roulages-photos__intro-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
}

.roulages-photos__intro-fb {
    flex: 0 0 auto;
    width: 400px;
    max-width: 100%;
    overflow: hidden;
}

.roulages-photos__intro-fb .fb-page,
.roulages-photos__intro-fb .fb_iframe_widget,
.roulages-photos__intro-fb .fb_iframe_widget span,
.roulages-photos__intro-fb .fb_iframe_widget iframe {
    width: 400px !important;
    max-width: 100%;
}

.roulages-photos__intro-texte {
    flex: 1 1 300px;
    min-width: 0;
    max-height: 400px;
    overflow-y: auto;
    padding-right: .5rem;
}

.roulages-photos__carrousel {
    margin-bottom: 1.5rem;
}

.roulages-photos__carrousel-cadre {
    position: relative;
    border-radius: .25rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
}

.roulages-photos__carrousel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.roulages-photos__carrousel-image.is-active {
    opacity: 1;
}

.roulages-photos__carrousel-legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem 3.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: .9rem;
    text-align: center;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    pointer-events: none;
}

.roulages-photos__carrousel-legende.is-visible {
    opacity: 1;
}

.roulages-photos__carrousel-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
    cursor: pointer;
}

.roulages-photos__carrousel-fleche:hover {
    background: rgba(0, 0, 0, .75);
}

.roulages-photos__carrousel-fleche--prev {
    left: .75rem;
}

.roulages-photos__carrousel-fleche--next {
    right: .75rem;
}

.roulages-photos__videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.roulages-photos__video-wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: .25rem;
}

.roulages-photos__video-legende {
    text-align: center;
    margin-top: .5rem;
    color: #6c757d;
    font-size: .9rem;
}

/*
 * Modale de consultation de facture (formulaire "Consulter ma facture" de
 * la page d'accueil) : même structure/gabarit que celle de l'admin
 * "Gestion des réservations" (voir components/com_roulages/tmpl/gestion/
 * default.php), dupliquée ici faute de mécanisme de gabarit partagé entre
 * un fichier de template et un composant.
 */
.roulages-facture-modal[hidden] {
    display: none;
}

.roulages-facture-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roulages-facture-modal__fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.roulages-facture-modal__cadre {
    position: relative;
    width: min(900px, 92vw);
    height: min(90vh, 1100px);
    background: #fff;
    border-radius: .25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.roulages-facture-modal__barre {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #dee2e6;
    flex: 0 0 auto;
}

.roulages-facture-modal__fermer {
    margin-left: auto;
    background: none;
    border: none;
    color: #495057;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.roulages-facture-modal__iframe {
    width: 100%;
    flex: 1 1 auto;
    border: none;
}