/*
 * slider-splide.css
 * Patch CSS pour la migration LightSlider → Splide.js (homepage Audirep)
 * À appliquer directement dans audirep20220630.css aux lignes indiquées,
 * OU à inclure comme fichier séparé après le CSS principal.
 * ------------------------------------------------------------------ */


/* ══════════════════════════════════════════════════════════════════
   1. background_slider — comportement selon écran
   Desktop : auto auto = image centrée, fond bleu sur les côtés (voulu)
   Mobile  : cover = l'image doit remplir le petit écran
   ══════════════════════════════════════════════════════════════════ */
.background_slider {
    background-size: auto auto !important;  /* desktop : inchangé */
}

@media (max-width: 767px) {
    .background_slider {
        background-size     : cover !important;
        background-position : top center !important; /* visages visibles en haut */
    }
}


/* ══════════════════════════════════════════════════════════════════
   2. PAGINATION SPLIDE — remplace les couleurs LightSlider (.lSpg)
   ══════════════════════════════════════════════════════════════════ */
#splide-actus .splide__pagination__page {
    background    : #f2f2f2;
    border-radius : 50%;
    opacity       : 1;
}

#splide-actus .splide__pagination__page.is-active {
    background : #42536B;
    transform  : scale(1.2);
}

#splide-actus .splide__pagination {
    bottom : 8px;
}


/* ══════════════════════════════════════════════════════════════════
   3. FLÈCHES CUSTOM — activation sur mobile
   Ligne ~7801 du CSS existant : display:none à ≤768px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .slider_left_arrow_wrapper,
    .slider_right_arrow_wrapper {
        display : block;   /* était : none */
    }

    .slider_left_arrow_wrapper img,
    .slider_right_arrow_wrapper img {
        width   : 28px;
        opacity : 0.8;
    }
}


/* ══════════════════════════════════════════════════════════════════
   4. OVERLAY TEXTE — mobile ≤ 767px

   Stratégie : compacter l'overlay plutôt qu'agrandir le slider.
   - Overlay collé en bas (position absolute bottom:0)
   - Boutons forcés côte à côte (flex) pour éviter l'empilement vertical
   - Polices et padding réduits
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Slider : hauteur modérément augmentée */
    .slider {
        height : 400px;   /* était 350px — on gagne 50px d'image */
    }

    /* Overlay collé en bas */
    .home .ActuExtrait {
        position   : absolute;
        top        : auto;
        bottom     : 0;
        transform  : none;
        width      : 100%;
        max-width  : 100%;
        box-sizing : border-box;
        background : rgba(255, 255, 255, 0.88);
        padding    : 8px 12px 10px;
    }

    /* Label "Actualités" */
    .home .ActuExtrait .gp_h2_actualites {
        font-size     : 11px;
        margin-bottom : 4px;
        margin-top    : 0;
    }

    /* Titre entre guillemets */
    .home .ActuExtrait q {
        font-size   : 14px;
        line-height : 1.3;
        display     : block;
        margin      : 0 0 8px;
    }

    /* Boutons : flex côte à côte, width auto pour tenir sur une ligne */
    .home .ActuExtrait .gp_see_more,
    .home .ActuExtrait .gp_all_actu {
        display     : inline-block;
        width       : auto !important;  /* annule le width:48% existant */
        font-size   : 11px !important;
        padding     : 7px 14px !important;
        margin-top  : 0 !important;
        margin-right: 6px;
        white-space : nowrap;
    }

    /* Conteneur des boutons en ligne */
    .home .ActuExtrait br {
        display : none;   /* supprime les <BR> PHP entre label et boutons */
    }

    /* #ttLesActus : top:32/35% en position:relative → dans le flux */
    #ttLesActus {
        position   : static;
        top        : auto;
        margin-top : 6px;
    }

    /* Bouton "Toutes les actualités" dans #ttLesActus */
    #ttLesActus .gp_all_actu {
        display    : inline-block;
        width      : auto !important;
        font-size  : 11px !important;
        padding    : 7px 14px !important;
        margin-top : 0 !important;
    }
}

/* Très petit écran ≤ 400px */
@media (max-width: 400px) {
    .slider {
        height : 380px;
    }

    .home .ActuExtrait q {
        font-size : 12px;
    }
}


/* ══════════════════════════════════════════════════════════════════
   5. PAGINATION SPLIDE sliders mobiles Publications + Logos
   ══════════════════════════════════════════════════════════════════ */
#decryptSlider .splide__pagination__page {
    background : #A8A8A8;
}

#decryptSlider .splide__pagination__page.is-active {
    background : #42536B;
}

#decryptSlider .splide__pagination {
    position : relative;
    top      : 30px;
}

#decryptSlider .splide__track {
    padding-bottom : 30px;
}