/* =======================================================================================
   CSS GLOBAL — RÉGLAGES DE BASE (reset, box model) — NE PAS DÉPLACER
   ======================================================================================= */
html,body{margin:0;padding:0;width:100%;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}

/* =======================================================================================
   HERO — BANNIÈRE PLEINE LARGEUR + OVERLAY + CONTENU CENTRÉ
   ======================================================================================= */
.hero{position:relative;background:url('../images/wa.png') center top/cover no-repeat;min-height:clamp(520px,78vh,880px);width:100%;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.counter{font-size:2.5rem;font-weight:700}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.hero .hero-content{position:relative;text-align:center;z-index:1}
.hero h1{font-size:3rem;font-weight:900;text-shadow:2px 2px 8px rgba(0,0,0,.5)}
@media (max-width:768px){.hero{min-height:530px!important}.hero-content{padding-bottom:2.5rem!important}}
@media (min-width:1400px){.hero{min-height:80vh;background-position:center 10%}}
@media (max-width:576px){.hero{background-position:center 35%}}

/* =======================================================================================
   RECHERCHE & BLOCS — FORMULAIRES, SECTIONS BLANCHES
   ======================================================================================= */
.search-panel .form-control,.search-panel .btn{height:3rem}
.search-panel .btn{background:#ffe600;color:#000;border:none;font-weight:700}
section.mb-5{background:#fff;padding:2rem;border-radius:.5rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}

/* =======================================================================================
   NAVBAR MOBILE — TOGGLER (TAILLE, COULEURS, ICONES)
   ======================================================================================= */
@media (max-width:991.98px){.navbar-toggler{width:48px;height:48px;border:none;border-radius:50%;background-color:#ffe600!important;display:flex;align-items:center;justify-content:center}.navbar-toggler .fas{font-size:1.4rem;color:#000}.navbar-toggler-icon{display:none}}
.navbar-toggler .fas{font-size:1.4rem;color:#000}
.navbar-toggler-icon{display:none}

/* =======================================================================================
   BOUTONS — JAUNE ARRONDI & BLANC ARRONDI (HOVER/FOCUS/ACTIVE)
   ======================================================================================= */
.btn-custom-yellow{background-color:#F1C40F;color:#fff;border:none;border-radius:2rem;padding:.75rem 1.5rem;font-size:1rem;transition:background-color .2s,box-shadow .2s}
.btn-custom-yellow:hover,.btn-custom-yellow:focus{background-color:#D4AC0D;box-shadow:0 4px 12px rgba(0,0,0,.1);outline:none;text-decoration:none}
.btn-custom-white{background-color:#fff;color:#333;border:none;border-radius:2rem;padding:.75rem 1.5rem;font-size:1rem;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:background-color .2s,box-shadow .2s}
.btn-custom-white:hover,.btn-custom-white:focus{background-color:#e9ecef;box-shadow:0 6px 20px rgba(0,0,0,.2);outline:none;text-decoration:none}
.btn-custom-yellow:active,.btn-custom-white:active{outline:none!important;box-shadow:none!important}

/* =======================================================================================
   BOUTONS D’ACTION — GROUPEMENTS & RESPONSIVE (DESKTOP / MOBILE)
   ======================================================================================= */
.action-buttons{display:flex;justify-content:center;gap:1rem;margin-top:12rem!important}
@media (min-width:992px){.action-buttons{gap:2rem;margin-top:3rem}.action-buttons .btn{font-size:1.1rem;padding:.9rem 2rem}}
@media (max-width:576px){.action-buttons{gap:.5rem;flex-wrap:wrap}.action-buttons .btn{flex:0 1 auto;padding:.6rem 1rem;font-size:.9rem}}

/* =======================================================================================
   NAVBAR — FLECHE DROPDOWN (ANIMATION DE ROTATION)
   ======================================================================================= */
.navbar-nav .dropdown-toggle::after{transition:transform .3s ease}
.navbar-nav .dropdown.show>a.dropdown-toggle::after,.navbar-nav .dropdown-menu.show~a.dropdown-toggle::after{transform:rotate(180deg)}

/* =======================================================================================
   “À PROPOS” — BANDEAU VERT & COULEURS DE TEXTE
   ======================================================================================= */
.bandeau-vert{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;min-height:400px;padding:60px 0}
.container.my-5 h2,.container.my-5 h4,.container.my-5 p,.container.my-5 a{color:#000!important}
.bandeau-vert h3,.bandeau-vert h5,.bandeau-vert p,.bandeau-vert small,.bandeau-vert a{color:#000!important}

/* =======================================================================================
   SECTIONS “RÉSULTATS” — FOND PLEINE LARGEUR + STATS HORIZONTALES
   ======================================================================================= */
/* Full-bleed container */
.bg-gris-continu-fullwidth{background-color:#f5f5f5;width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-top:2rem!important;padding-bottom:2rem;box-sizing:border-box;border-radius:0}
/* Stats row */
.stats-container{display:flex;max-width:960px;margin:2rem auto;background:#fff;padding:1rem 0;box-sizing:border-box;justify-content:space-between;gap:0;flex-wrap:nowrap;overflow-x:auto}
.stat-item{flex:1 1 0;padding:1rem;box-sizing:border-box;text-align:center;min-width:0}
.stat-item:not(:last-child){border-right:1px solid rgba(0,0,0,.2)}
.stat-number{font-weight:700;font-size:1.5rem;color:#000;position:relative;display:inline-block;padding-bottom:.3rem;margin-bottom:.5rem}
.stat-number::after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:5px;background:#fddb0b;border-radius:3px}
.stat-label{font-size:1rem;color:#111;line-height:1.3;margin:0 auto;max-width:90%}
/* Mobile stacking */
@media (max-width:767px){.stat-item{width:100%;min-width:auto;padding:1rem 0}.navbar-toggler{font-size:.8rem;padding:.2rem .5rem}.navbar-toggler i{font-size:1.2rem!important}.navbar{padding-top:0rem;padding-bottom:0rem}}

/* =======================================================================================
   NAVBAR — MARQUE & TOGGLER (CONTOURS/BORDURES)
   ======================================================================================= */
.navbar-brand img{border:1px solid rgba(0,0,0,.3);border-radius:0}
.navbar-toggler{border:1px solid rgba(0,0,0,.3);border-radius:50%;box-shadow:none;outline:none}

/* =======================================================================================
   SPLIDE — FLÈCHES DE NAVIGATION (STYLE + ICÔNES FA)
   ======================================================================================= */
.splide__arrow{position:absolute;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;background:rgba(255,255,255,.85);border:1px solid #dee2e6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#495057;cursor:pointer;transition:background .2s,color .2s;z-index:10}
.splide__arrow--prev{left:0;margin-left:-2rem}
.splide__arrow--next{right:0;margin-right:-2rem}
.splide__arrow:hover{background:#fff;color:#212529}
.splide__arrow--prev::before,.splide__arrow--next::before{display:none}
.splide__arrow--prev::after,.splide__arrow--next::after{font-family:"Font Awesome 5 Free";font-weight:900;font-size:1.2rem}
.splide__arrow--prev::after{content:"\f053"}
.splide__arrow--next::after{content:"\f054"}

/* =======================================================================================
   COULEURS DE TEXTE — ACTUALITÉS / VIDÉOS / DÉTAILS (FORCER LE NOIR)
   ======================================================================================= */
/* Section Actualités (liste/slider) */
.container-xxl.px-3 .d-flex>h2,.container-xxl.px-3 .d-flex>a:not([class*="btn-"]),#splideActualites .card-title,#splideActualites .card-text,#splideActualites small{color:#000!important}
/* Toutes les actualités (liste) */
.container-xxl.py-5.px-2 .row.mb-4 h1.display-5,.container-xxl.px-2 .card-title,.container-xxl.px-2 .card-text,.container-xxl.px-2 .card-text small{color:#000!important;opacity:1!important}
/* Toutes les vidéos (slider) */
.container-xxl.px-3.px-md-0.my-5 .d-flex.justify-content-between.align-items-center.mb-3 h2.h4,.container-xxl.px-3.px-md-0.my-5 .card-title,.container-xxl.px-3.px-md-0.my-5 .card-text,.container-xxl.px-3.px-md-0.my-5 .card-body small{color:#000!important;opacity:1!important}
/* Détail d’une actualité (show) */
.container.py-5 h1.display-6,.container.py-5 small,.container.py-5 .mb-4{color:#000!important}
/* Détail d’une classe d’accueil (show) */
.container.py-5 h1.display-6,.container.py-5 small,.container.py-5 .mb-4,.container.py-5 p,.container.py-5 span,.container.py-5 h3{color:#000!important}

/* =======================================================================================
   SECTION PERSONNALITÉS — FOND IMAGE + BLOCS CONTENU
   ======================================================================================= */
.section-personnalites{background-image:url('../images/tour.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;padding:120px 0}
.section-personnalites .bloc-personnalite{background-color:#fff!important;color:#000!important;font-size:1.05rem;line-height:1.6;font-weight:500}
.title-highlight{display:inline-block;padding:.2em .5em;background-color:#FFDD00;color:#000}
.section-personnalites h5,.section-personnalites p,.section-personnalites .fst-italic{color:#000!important}

/* =======================================================================================
   CARTES CLIQUABLES — LIEN PLEIN CADRE (OVERLAY)
   ======================================================================================= */
.carte-lien-total{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}

/* =======================================================================================
   VIDÉOS — OVERLAY LECTURE YOUTUBE + MINIATURE RELATIVE
   ======================================================================================= */
.yt-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.5);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;z-index:2}
.video-thumbnail{position:relative}

/* =======================================================================================
   UTILITAIRES — BOUTON “RETOUR EN HAUT”
   ======================================================================================= */
#backToTop{position:fixed;bottom:1rem;right:1rem;display:none;z-index:9999;width:3.5rem;height:3.5rem;padding:0;line-height:3.5rem;text-align:center}
#backToTop:hover{transform:translateY(-2px)}
