/* =======================================================================================
   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/accueil.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 center; /* recentre verticalement et horizontalement */
      background-size: cover; /* garde le zoom */}}
   @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:#4B9CD3;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:#4B9CD3!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:#4B9CD3;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:#4B9CD3;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:#4B9CD3;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/MVE_GREEN.png');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:#7EC6E8;color:#000}
   .section-personnalites h5,.section-personnalites p,.section-personnalites .fst-italic{color:#000!important}
   .personnalites-label{display:inline-block;padding:5px 15px;background:#7EC6E8;color:#111;font-size:1rem;font-weight:900;text-transform:uppercase;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,0.07);font-family:'Montserrat',Arial,sans-serif;width:100%}

   /* =======================================================================================
      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{ background:#7EC6E8;color:#fff;border:none;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)}
      
   
   /* =========================================================
   NAVBAR WKX — CSS (inline pour regroupement) — prefix wkx-
   ========================================================= */
/* Compact léger partout */
.wkx-navbar .navbar-nav>.nav-item>.nav-link{padding-top:.65rem;padding-bottom:.65rem}
/* Topline (réseaux + langues) */
.wkx-topline-pill{background:#4B9CD3;color:#111}
/* Desktop ≥992px */
@media (min-width:992px){
  .wkx-navbar{padding-top:1.1rem;padding-bottom:.1rem;background-color:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.05);transition:padding-top .25s ease,padding-bottom .25s ease,background-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
  .wkx-navbar .navbar-brand img{height:64px;transition:height .25s ease}
  .wkx-navbar .nav-link{font-size:1.06rem;padding:.65rem .75rem;transition:padding .2s ease}
  .wkx-navbar.is-compact{padding-top:.45rem;padding-bottom:.45rem;background-color:rgba(255,255,255,.985);box-shadow:0 6px 24px rgba(0,0,0,.12)}
  .wkx-navbar.is-compact .navbar-brand img{height:40px}
  .wkx-navbar.is-compact .nav-link{padding:.4rem .55rem}
  .wkx-navbar.is-compact .nav-topline{display:none!important}
  /* Wordmark */
  .wkx-brand-lockup{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;padding:0 .75rem;transition:opacity .25s ease,transform .25s ease}
  .wkx-navbar.is-compact .wkx-brand-lockup{opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none}
  .wkx-brand-lockup .wkx-brand-lockup-text{display:block}
  .wkx-brand-lockup .wkx-brand-lockup-svg{display:none}
  .wkx-brand-lockup-text{color:#2F7FB2;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.35);line-height:1.05;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .wkx-brand-lockup-text .wl1{display:block;font-weight:800;letter-spacing:.2px;font-size:clamp(22px,2.1vw,32px)}
  .wkx-brand-lockup-text .wl2{display:block;font-weight:500;letter-spacing:.15px;opacity:.9;font-size:clamp(12px,1vw,16px)}
}
/* 992–1399px : masquer la baseline sans imbriquer @media */
@media (min-width:992px) and (max-width:1399.98px){
  .wkx-brand-lockup-text .wl2{display:none}
}
/* COULEUR DU NAVBAR TOGLER FOND DU MENU BURGER */
.navbar-toggler{ background:#4B9CD3!important; }

/* Accessibilité: animations réduites */
@media (prefers-reduced-motion:reduce){
  .wkx-navbar,.wkx-navbar .navbar-brand img,.wkx-brand-lockup{transition:none!important}
}