/*
Theme Name: Thème Rotary Saguenay
Theme URI: https://rotarysaguenay.ca/
Author: Tisseurs du Web
Author URI: https://rotarysaguenay.ca/
Description: Thème WordPress personnalisé pour le site Rotary Saguenay
Version: 1.0
Text Domain: rotarysaguenay
*/
/*************************************************
    1. VARIABLES & CONFIGURATION GLOBALE
*************************************************/
:root {
  --bs-primary:   #f7a81c; /* Orange */
  --bs-secondary: #18478f; /* Bleu */
  --bs-success:   #01963a; /* Vert */
  --bs-info:      #1ea3ac; /* Cyan/Turquoise */
  --bs-warning:   #cf6533; /* Orange foncé/Brique */
  --bs-danger:    #783a83; /* Violet */
  --bs-light:     #e0e0df; /* Gris clair/Blanc cassé */
  --bs-dark:      #101010; /* Noir */
}

body {
  background-image: url('img/papertexture.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/* Ajustement Sticky si la barre Admin WordPress est présente */
body.admin-bar .sticky-top {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .sticky-top {
        top: 46px;
    }
}
/* SÉCURITÉ ANTI-SCROLL (Version compatible Sticky) */
main {
    overflow-x: hidden; /* Coupe ce qui dépasse à l'intérieur du contenu */
    max-width: 100vw;   /* Force la largeur max */
    width: 100%;        /* S'assure qu'il prend toute la place dispo */
}

/* Sécurité supplémentaire pour le footer s'il dépasse aussi */
footer {
    overflow-x: hidden;
    max-width: 100vw;
}
/* =====================================================
   BARRE D’ALERTE (TOP BAR) — TYPO + RESPONSIVE
   ===================================================== */

/* Base (desktop/tablette) */
.top-bar{
  line-height: 1.2;
}

/* Cible le texte (lien ou span) */
.top-bar a,
.top-bar span{
  font-size: 0.95rem; /* taille par défaut */
}

/* Téléphone */
@media (max-width: 575.98px){
  .top-bar{
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  .top-bar a,
  .top-bar span{
    font-size: 0.75rem;     /* plus petit sur téléphone */
    line-height: 1.15;
  }

  /* Optionnel : un peu de marge à droite pour éviter que le texte passe sous le X */
  .top-bar .container{
    padding-right: 3rem;
  }

  /* Optionnel : X un peu mieux aligné/compact */
  .top-bar .btn-close{
    transform: translateY(-50%) scale(0.9);
  }
}

h1 {
  color: var(--bs-light);
}

/* Animations Globales */
.fade-in {
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ÉTAT NORMAL --- */
.btn.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #000000 !important;
    font-weight: 700;
    
    /* Pour l'animation fluide */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Pour éviter les débordements */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* --- ÉTAT SURVOL / HOVER --- */
.btn.btn-primary:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
    
    /* L'effet de levier et l'ombre */
    transform: translateY(-4px); 
    box-shadow: 0 12px 20px -5px rgba(24, 71, 143, 0.5); /* Ombre plus diffuse et moderne */
}

/* --- ANIMATION DE L'ICÔNE (si présente) --- */
.btn.btn-primary i,
.btn.btn-primary .bi {
    transition: transform 0.3s ease;
    display: inline-block;
}

.btn.btn-primary:hover i,
.btn.btn-primary:hover .bi {
    transform: translateX(4px); /* Petit mouvement vers la droite */
}

/* --- OPTIONNEL : PETIT EFFET DE "CLIC" --- */
.btn.btn-primary:active {
    transform: translateY(-1px); /* Redescend un peu quand on clique */
    box-shadow: 0 5px 10px rgba(24, 71, 143, 0.4);
}
/* --- CLASSE UTILITAIRE : Empêcher l'icône de bouger --- */
.btn.btn-static-icon:hover i,
.btn.btn-static-icon:hover .bi {
    transform: none !important; /* Force l'icône à rester sur place */
}
/*************************************************
    2. NAVIGATION & DROPDOWN (DESKTOP + MOBILE)
*************************************************/
/* --- Liens de navigation généraux --- */

.navbar-nav .nav-link {
    color: var(--bs-light) !important;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
    transition: border-color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .dropdown.show > .nav-link,
.navbar-nav .dropdown:hover > .nav-link {
    border-bottom-color: var(--bs-primary);
    color: var(--bs-light) !important;
}

.navbar-nav .dropdown-toggle::after {
    display: none !important;
}

/* --- STYLE DES ÉLÉMENTS DU SOUS-MENU --- */
.dropdown-item {
    color: var(--bs-light);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: var(--bs-primary);
    color: var(--bs-dark);
}
/* =============================================
   VERSION DESKTOP (Écrans > 992px)
   ============================================= */
@media (min-width: 992px) {
    /* Le menu est caché par défaut et s'anime */
    .dropdown-menu {
        background-color: var(--bs-secondary);
        border: none;
        border-radius: 0 0 8px 8px;
        padding: 0;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        margin-top: 0;
        display: none; /* Caché */
    }

    /* Affichage au survol (Hover) */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s ease;
        margin-left: 0.5em; /* Petit décalage esthétique */
    }
}

/* =============================================
   VERSION MOBILE (Écrans < 992px)
   ============================================= */
@media (max-width: 991.98px) {
    .dropdown-menu {
        display: none;
        position: static !important;
        float: none;
        width: auto;
        background-color: rgba(0,0,0,0.15);
        border: none;
        padding-left: 1rem;
    }
    
    .dropdown-menu.show {
        display: block !important;
    }
    
    .dropdown-item {
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
}
/* Animation d'apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/*************************************************
    3. COMPOSANTS PAGE ÉVÉNEMENTS
*************************************************/
.event-item {
  background-color: white;
  transition: all 0.3s ease;
}

.event-item:hover {
  background-color: var(--bs-secondary);
  color: var(--bs-light);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Ajustements des textes au hover */
.event-item:hover h6,
.event-item:hover small,
.event-item:hover span,
.event-item:hover i {
  color: var(--bs-light) !important;
}

/* 1. On retire la largeur fixe pour laisser Swiper gérer */
.swiper-slide {
    height: auto; /* La hauteur s'adapte */
    /* width: 300px;  <-- ENLEVEZ CETTE LIGNE si elle existe encore */
}

/* 2. Important : Standardiser la hauteur des images */
/* Cela évite que les cartes aient des tailles différentes si les images ne sont pas identiques */
.past-item .card-img-top {
    height: 200px;      /* Hauteur fixe pour l'image */
    object-fit: cover;  /* Coupe l'image proprement sans l'écraser */
    width: 100%;
}

.past-slider {
    padding: 10px 5px;
}
.masonry-grid {
    column-count: 1;
    column-gap: 1rem;
}
@media (min-width: 768px) {
    .masonry-grid { column-count: 2; }
}
@media (min-width: 992px) {
    .masonry-grid { column-count: 3; }
}
/*GALLERY

/* Effet break-inside pour éviter de couper les images entre deux colonnes */
.masonry-item {
    break-inside: avoid; 
}

/* Petit effet de zoom sympa */
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }

.group-hover:hover .transition-transform { transform: scale(1.05); }
.group-hover:hover .opacity-0 { opacity: 1 !important; }
/* Grossir un peu le X et s'assurer qu'il est au dessus de l'image */
.modal .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%); /* Force le blanc pur */
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgba(0, 0, 0, 0.7); /* Petit fond noir pour contraste */
    border-radius: 50%;
    padding: 0.5rem;
    opacity: 0.8;
}
.modal .btn-close-white:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
}
/*************************************************
  HOVER CARTES - SLIDER "DERNIÈRES ACTUALITÉS"
  (cohérent Rotary : bleu + jaune, lift + shadow)
*************************************************/

/* 1) Base : transition propre sur la slide et la carte */
.past-slider .past-item {
  padding: 10px 5px; /* garde ton padding de slider */
}

.past-slider .past-item .card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(16, 16, 16, 0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(0);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* 2) Image : zoom subtil au hover */
.past-slider .past-item .card-img-top {
  transform: scale(1);
  transition: transform 0.28s ease, filter 0.28s ease;
}

/* 3) Typo : transition sur titre + résumé */
.past-slider .past-item h6,
.past-slider .past-item small {
  transition: color 0.28s ease, opacity 0.28s ease;
}

/* 4) Badge date : transition */
.past-slider .past-item .position-absolute.bottom-0.start-0 {
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

/* 5) Overlay subtil (optionnel mais classy) */
.past-slider .past-item .card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(247,168,28,0.10) 0%,
    rgba(24,71,143,0.10) 100%
  );
  transition: opacity 0.28s ease;
}

/* ======================
   HOVER (la magie)
   ====================== */
.past-slider .past-item:hover .card {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(24, 71, 143, 0.22);
  border-color: rgba(247, 168, 28, 0.95);
}

.past-slider .past-item:hover .card::before {
  opacity: 1;
}

.past-slider .past-item:hover .card-img-top {
  transform: scale(1.05);
  filter: saturate(1.05);
}

/* Titre en bleu Rotary */
.past-slider .past-item:hover h6 a {
  color: var(--bs-secondary) !important;
}

/* Résumé un peu plus lisible */
.past-slider .past-item:hover small {
  opacity: 0.95;
}

/* Badge date : jaune Rotary + petit lift */
.past-slider .past-item:hover .position-absolute.bottom-0.start-0 {
  background-color: var(--bs-primary) !important;
  color: var(--bs-dark) !important;
  transform: translateY(-2px);
}

/* ======================
   ACCESSIBILITÉ (clavier)
   ====================== */
.past-slider .past-item:focus-within .card {
  outline: 3px solid rgba(247,168,28,0.55);
  outline-offset: 3px;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(24, 71, 143, 0.18);
}

/* Quand on survole le bouton, l'icône (i) devient jaune */
.btn-search-custom:hover i {
    color: #ffc107 !important; /* Code couleur jaune (celui de Bootstrap Warning) */
    transition: color 0.3s ease; /* Transition douce pour l'effet */
}
/*************************************************
    4. GRAPHIQUES & STATISTIQUES (CHARTS)
*************************************************/
.chart-segment {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s;
    opacity: 0.85;
}

.chart-segment:hover, 
.chart-segment.active {
    opacity: 1;
    z-index: 10;
}

/* Tooltip Graphique */
.chart-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    color: var(--bs-light);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.chart-tooltip.visible {
    opacity: 1;
}

.chart-tooltip span {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--bs-primary);
}

/* =========================================
   STYLE DU SLIDER MEMBRES (CORRIGÉ)
   ========================================= */

/* 1. Ajustement global */
.slider-container-safe .slick-list {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* 2. L'élément Wrapper (celui qui glisse) */
.slider-container-safe .slide-item {
    transition: all 0.3s ease;
    height: 100%; /* S'assure qu'il prend la hauteur */
}

/* 3. La Carte (À l'intérieur du wrapper) */
.slider-container-safe .card {
    border: none;
    background: #fff;
    border-radius: 15px;
    
    /* ÉTAT PAR DÉFAUT (LOIN) */
    transform: scale(0.9); 
    opacity: 0.6; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 4. ÉTAT ACTIF (ZOOM) */
/* Slick ajoute la classe .slick-center sur le wrapper (.slide-item) */
/* Donc on cible la .card QUI EST DANS .slick-center */
.slider-container-safe .slick-center .card {
    transform: scale(1.05); 
    opacity: 1;
    box-shadow: 0 15px 30px rgba(24, 71, 143, 0.2);
    border: 1px solid var(--bs-primary);
    z-index: 10;
}

/* 5. Images et Contenu (Inchangé) */
.slider-container-safe .card-img-top {
    height: 450px; /* Ajusté pour l'équilibre */
    width: 100%;
    object-fit: cover;
    border-bottom: 5px solid var(--bs-secondary); 
}

.slider-container-safe .card-body {
    padding: 1.5rem;
    border-radius: 15px;
}

/* 6. Boutons de navigation (Vos styles conservés et ajustés) */
/* Note: j'ai ajusté le sélecteur pour qu'il soit plus robuste */
.slider-container-safe .prev-btn, 
.slider-container-safe .next-btn {
    width: 50px; /* Un peu plus grand pour l'accessibilité */
    height: 50px;
    border-radius: 50%;
    background-color: var(--bs-secondary);
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Centrage vertical absolu */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slider-container-safe .prev-btn:hover, 
.slider-container-safe .next-btn:hover {
    background-color: var(--bs-primary);
    color: var(--bs-dark);
    transform: translateY(-50%) scale(1.1); /* Garde le centrage vertical + grossit */
}

/*************************************************
    6. AXES STRATÉGIQUES (CARTES & ACCORDÉON)
*************************************************/

/* --- Cartes Axes --- */
.card-axe{
    position: relative;
    cursor: default;
    border-radius: 12px;
    overflow: hidden;
    background-color:white;
    /* Animation / hover */
    transform: translateY(0) scale(1);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
    will-change: transform;
}

/* Hover : grossissement léger + lift */
.card-axe:hover{
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 30px rgba(0,0,0,0.12);
    z-index: 2;
}

/* Focus clavier (accessibilité) */
.card-axe:focus-within{
    transform: translateY(-3px) scale(1.03);
    outline: 3px solid rgba(247,168,28,0.55);
    outline-offset: 3px;
}

/* Hover général : Texte et Image en blanc */
.card-axe:hover h6,
.card-axe:hover p,
.card-axe:hover .text-muted,
.card-axe:hover .text-dark{
    color: white !important;
    opacity: 1 !important;
}

/* Icône : passe en blanc */
.card-axe img{
    transition: filter 0.2s ease-in-out, transform 0.28s ease;
}

.card-axe:hover img{
    filter: brightness(0) invert(1);
    transform: scale(1.02);
}

/* Couleurs spécifiques au survol des cartes */
.card-sante:hover         { background-color: var(--bs-danger); }
.card-education:hover     { background-color: var(--bs-warning); }
.card-economie:hover      { background-color: var(--bs-info); }
.card-environnement:hover { background-color: var(--bs-success); }

/* --- Taille fixe pour les icônes --- */
.icon-axe {
    width: 65px; /* Ajuste cette valeur selon tes besoins */
    height: 65px; /* Garde la même valeur pour un format carré */
    object-fit: contain; /* S'assure que le SVG ne soit pas déformé */
}

/* --- Accordéon --- */
.accordion-item:hover {
    background-color: var(--bs-light);
    transition: background-color 0.5s ease;
}

.accordion-button {
    transition: background-color 0.5s ease, color 0.5s ease;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
}

.accordion-button:hover img,
.accordion-button:focus img {
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease-in-out;
}

.accordion-button:focus {
    box-shadow: none;
}

/* --- CSS POUR LES ICÔNES ACCORDÉON --- */

.pictoAxes {
    /* === 1. VERSION MOBILE (Téléphone) === */
    width: 50px;        /* Taille confortable sur mobile */
    height: auto; 
    flex-shrink: 0;     /* CRUCIAL : Empêche l'icône de s'écraser */
    margin-right: 15px; /* Espace entre l'image et le texte */
    object-fit: contain; /* S'assure que l'image ne se déforme pas */
}

/* === 2. VERSION BUREAU (Ordi > 992px) === */
@media (min-width: 992px) {
    .pictoAxes {
        width: 70px;       /* <--- Change ce chiffre si c'est encore trop petit/gros */
        margin-right: 25px; /* On augmente aussi l'espace pour aérer */
    }
}

.montagne {
    padding-top: 6vh;
    border-bottom:2px solid #e9e9e9;
background:
    /* Dégradé en haut */
    linear-gradient(to bottom,
      rgba(232,232,232,.9) 25%,
      rgba(232,232,232,.4) 35%,
      rgba(232,232,232,0)  70%,
      rgba(232,232,232,0)  101%
    ),
    linear-gradient(to top,
      rgba(232,232,232,.9) 2%,
      rgba(232,232,232,.4) 5%,
      rgba(232,232,232,0)  9%,
      rgba(232,232,232,0)  30%
    ),
    url("img/montagnes.png");

  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top center, bottom center, center;
  background-size: 100% calc(40% + 4px), 100% calc(40% + 4px), cover;
}

/* --- EFFET GIVRÉ (LÉGER & DISCRET) --- */
.bg-frost {
    /* Fond blanc à 60% : On voit encore la montagne derrière */
    background-color: rgba(255, 255, 255, 0.3);
    transition: background-color 0.35s ease, transform 0.35s ease;
    will-change: transform, background-color;
    
    /* LE SECRET : Floute l'image de fond uniquement derrière le texte */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px); /* Pour Safari */
    
    /* Un peu d'espace pour que le texte ne touche pas la limite du flou */
    padding: 1.5rem; 
    
    /* Coins très légèrement adoucis */
    border-radius: 10px;
    
    /* S'assure que le texte reste noir profond */
    color: #000;
}
.bg-frost:hover{
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px); 
}
.bg-frost2 {
    /* Fond blanc à 60% : On voit encore la montagne derrière */
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.35s ease, transform 0.35s ease;
    will-change: transform, background-color;
    
    /* LE SECRET : Floute l'image de fond uniquement derrière le texte */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px); /* Pour Safari */
    
    /* Un peu d'espace pour que le texte ne touche pas la limite du flou */
    padding: 1.5rem; 
    
    /* Coins très légèrement adoucis */
    border-radius: 20px;
    
    /* S'assure que le texte reste noir profond */
    color: #000;
}
.bg-frost2:hover{
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-4px); 
}
/*************************************************
  HOTSPOTS (icônes en bas) — hover qui grossit
*************************************************/

/* Le lien entier */
.axeHotspot{
  transform: translateY(0);
  transition: transform 0.25s ease;
}

/* L’icône */
.axeHotspot .pictoAxes{
  transition: transform 0.25s ease, filter 0.25s ease;
  transform: scale(1);
  will-change: transform;
}

/* Hover : petit zoom + lift */
.axeHotspot:hover{
  transform: translateY(-3px);
}

.axeHotspot:hover .pictoAxes{
  transform: scale(1.08);
  filter: saturate(1.05);
}

/* Optionnel : un effet "focus" clavier aussi */
.axeHotspot:focus-visible{
  outline: 3px solid rgba(247,168,28,0.55);
  outline-offset: 4px;
  border-radius: 12px;
}

.axeHotspot:focus-visible .pictoAxes{
  transform: scale(1.08);
}
/*************************************************
    7. FOOTER
*************************************************/
footer a {
    color: var(--bs-light);
}
footer a:hover {
    color: var(--bs-primary);
}
/*************************************************
    FOOTER — VERSION MOBILE ERGONOMIQUE
*************************************************/

/* Base : liens footer déjà blancs, on améliore la lisibilité */
footer a.text-decoration-none{
  display: inline-block;
  padding: .15rem 0; /* petit confort même desktop */
}

/* MOBILE */
@media (max-width: 767.98px){

  footer{
    padding-top: 2.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  footer .container{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* 1) Colonnes empilées + centrées */
  footer .row.align-items-start{
    text-align: center;
    gap: 1.25rem; /* espace entre blocs */
    margin-bottom: 1.75rem !important;
  }

  footer .row.align-items-start > [class*="col-"]{
    text-align: center !important;
  }

  /* 2) Listes -> style "menu mobile" avec séparateurs */
  footer ul.list-unstyled{
    margin-bottom: 0;
  }

  footer ul.list-unstyled li{
    margin-bottom: 0.75rem !important; /* remplace tes mb-4 trop gros en mobile */
  }

  footer ul.list-unstyled li a{
    width: 100%;
    display: block;
    padding: 0.85rem 1rem; /* gros tap target */
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--bs-light) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
  }

  footer ul.list-unstyled li a:hover,
  footer ul.list-unstyled li a:focus{
    background: var(--bs-primary);
    color: var(--bs-dark) !important;
    transform: translateY(-2px);
  }

  /* 3) Bloc logo centré + taille plus raisonnable */
  footer .col-md-4.text-center img{
    max-height: 140px !important;
    margin: 0 auto;
    display: block;
  }

  /* 4) Ligne réseaux + mentions -> bien alignée */
  footer .row.pt-3.align-items-center{
    text-align: center;
    gap: 0.75rem;
    padding-top: 1.25rem !important;
  }

  footer .row.pt-3.align-items-center .col-md-4{
    text-align: center !important;
  }

  /* Facebook : bouton rond plus “touch-friendly” */
  footer a.fs-4{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    transition: transform .2s ease, background-color .2s ease;
  }

  footer a.fs-4:hover,
  footer a.fs-4:focus{
    background: var(--bs-primary);
    transform: translateY(-2px);
  }

  footer a.fs-4:hover i,
  footer a.fs-4:focus i{
    color: var(--bs-dark);
  }

  /* 5) Termes / Politique : un peu plus petit mais lisible */
  footer a.small{
    font-size: .9rem;
    opacity: .95;
  }

  /* 6) Copyright : respirer */
  footer .text-white-50{
    display: inline-block;
    padding-top: .75rem;
    font-size: .85rem;
  }
}

/**************************************************
    8. PAGE NOS MEMBRES
**************************************************/
/* CARTES QUI SE RETOURNENT AU SURVOL
    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
    .flip-card {
        background-color: transparent;
        width: 100%;
        max-width: 400px;
        aspect-ratio: 2/3;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
    }

    /* This container is needed to position the front and back side */
    .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden; /* Safari */
        backface-visibility: hidden;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 5px;
        color: var(--bs-light);
    }

    /* Style the front side (fallback if image is missing) */
    .flip-card-front {
    color: black;
    }

    /* Style the back side */
    .flip-card-back {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
    transform: rotateY(180deg);
    }
/*** AVATAR IMAGES DANS LES TÉMOIGNAGES ***/
    .avatar-img {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }
/*** Section Implication locale ***/
@media (max-width: 991.98px){
  .implication-media {
    min-height: auto !important;
  }
}
    
/* --- Styles pour la zone éditable par le client --- */

/* 1. Espacement entre les sections (simule le mb-5) */
.user-content-area h2 {
    margin-top: 3rem; /* Espace avant le titre */
    margin-bottom: 1rem;
    font-weight: bold;
    color: #000; /* Titres en noir */
}

/* 2. Texte gris (simule text-muted) */
.user-content-area p {
    color: #101010; /* Couleur du text-muted de Bootstrap */
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* 3. Listes (simule list-unstyled + flex gap) */
.user-content-area ul {
    list-style: none; /* Enlève les puces moches */
    padding-left: 0;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Espace entre les items */
}

.user-content-area ul li {
    color: #101010;
}

/* 4. Le gras dans les listes (strong) */
.user-content-area ul li strong {
    color: #212529; /* Noir (text-dark) */
    font-weight: 700;
}
/**************************************************
    9. PAGE DERNIÈRE ACTIALITÉS
**************************************************/
    /* ====== Déploiement Archives (smooth) ====== */
    .more-archives{
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-6px);
      transition: max-height 0.5s ease, opacity 0.35s ease, transform 0.95s ease;
      pointer-events: none; /* évite de cliquer des éléments cachés */
    }
    .more-archives.is-open{
      max-height: 1200px; /* assez grand pour contenir tes cartes */
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* ====== Rotation de l'icone du bouton====== */
    .opt-rotate .icon-toggle{
      display: inline-block;
      transition: transform 0.6s ease;
      transform-origin: 50% 50%;
    }
    .opt-rotate.is-open .icon-toggle{
      transform: rotate(180deg);
    }
    
    /* Style pour le contenu des articles */
    .article-content p {
        margin-bottom: 1.5rem;
    }
    
    .article-content h2, 
    .article-content h3 {
        color: #000;
        font-weight: bold;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .article-content h2 { font-size: 2rem; }
    .article-content h3 { font-size: 1.5rem; }
    
    .article-content ul, 
    .article-content ol {
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;
    }
    
    .article-content blockquote {
        border-left: 4px solid var(--bs-primary); /* Ta couleur primaire */
        padding-left: 1.5rem;
        font-style: italic;
        color: #555;
        margin: 2rem 0;
    }
    
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
    }
    
    /*************************************************
  HOVER ARCHIVES (UNIQUEMENT .archive-card)
  Même vibe que l’accueil : bleu + jaune, lift + shadow
*************************************************/

/* Base carte archives */
.archive-card{
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(16,16,16,0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(0);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Media (le <a> avec background image) */
.archive-card__media{
  position: relative;
  overflow: hidden;
  transition: filter 0.28s ease;
}

/* Overlay subtil sur l’image */
.archive-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247,168,28,0.10) 0%,
    rgba(24,71,143,0.20) 100%
  );
  transition: opacity 0.28s ease;
}

/* Typo / éléments internes */
.archive-card .card-title a,
.archive-card .card-text,
.archive-card small,
.archive-card .card-footer a{
  transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

/* Flèche du lien */
.archive-card .card-footer i{
  display: inline-block;
  transition: transform 0.28s ease;
}

/* ======================
   HOVER
   ====================== */
.archive-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(24, 71, 143, 0.22);
  border-color: rgba(247,168,28,0.95);
}

/* Overlay + boost image */
.archive-card:hover .archive-card__media{
  filter: saturate(1.05);
}

.archive-card:hover .archive-card__media::after{
  opacity: 1;
}

/* Titre en bleu Rotary */
.archive-card:hover .card-title a{
  color: var(--bs-secondary) !important;
}

/* Texte un peu plus lisible */
.archive-card:hover .card-text{
  opacity: 0.95;
}

/* Lien footer : jaune Rotary + micro mouvement */
.archive-card:hover .card-footer a{
  color: var(--bs-primary) !important;
}

.archive-card:hover .card-footer i{
  transform: translateX(4px);
}

/* ======================
   ACCESSIBILITÉ (clavier)
   ====================== */
.archive-card:focus-within{
  outline: 3px solid rgba(247,168,28,0.55);
  outline-offset: 3px;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(24, 71, 143, 0.18);
}
/* =========================================
   STYLE GÉNÉRIQUE DES INTROS (WYSIWYG)
   ========================================= */

/* 1. Le conteneur global */
section.intro {
    margin-left: auto;
    margin-right: auto;
}

/* 2. Le Titre Principal (H2) déjà présent dans le PHP */
section.intro h2 {
    padding-bottom: 15px;
    margin-bottom: 2rem !important; /* Force l'espace */
    color: var(--bs-dark);
}

/* Petit détail chic : une ligne dorée sous le titre */
section.intro h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--bs-primary); /* Jaune/Or Rotary */
    margin: 10px auto 0 auto; /* Centré */
    border-radius: 2px;
}

/* 3. Le contenu textuel (Les paragraphes) */
/* On cible la div .text-muted pour surcharger Bootstrap si besoin */
section.intro .text-muted p {
    font-size: 1rem; /* Un peu plus grand que la normale (Style "Lead") */
    color: black;     /* Gris doux, pas noir pur */
    margin-bottom: 1.5rem;
}

/* Le premier paragraphe est souvent l'accroche, on le met un peu en valeur */
section.intro .text-muted p:first-of-type {
    font-weight: 500;
    color: #333;
}

/* 4. Les Sous-titres (H3, H4 insérés par l'utilisateur) */
section.intro h3 {
    color: var(--bs-dark); 
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

section.intro h4 {
    color: var(--bs-secondary); /* Or ou Gris foncé selon ta config */
    font-weight: 600;
    margin-top: 2rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. Les Listes à puces (UL / OL) */
section.intro ul {
    list-style: none; /* On enlève les puces moches par défaut */
    padding-left: 0;
    margin-bottom: 2rem;
    text-align: left; /* Les listes sont souvent mieux alignées à gauche même dans un bloc centré */
    display: inline-block; /* Pour qu'elles restent centrées globalement si le texte est court */
}


/* 6. Citations (Blockquote) */
section.intro blockquote {
    border-left: 5px solid var(--bs-primary);
    background-color: #f8f9fa;
    padding: 20px;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
    text-align: center; /* Ou left */
    border-radius: 0 10px 10px 0;
}

/* Pour nettoyer les marges du dernier paragraphe dans l'outro */
.content-wysiwyg p:last-child {
    margin-bottom: 0;
}
.card-body {
    background-color:white;
}
/* =========================================
   STYLE DU SLIDER MEMBRES
   ========================================= */

/* 1. Conteneur principal - gère le débordement latéral */
.slider-container-safe {
    overflow: hidden;
}

/* 2. Slick List - permet le débordement vertical pour le scale */
.slider-container-safe .slick-list {
    overflow: visible !important;
    padding: 30px 50px !important;
}

.slider-container-safe .slick-track {
    overflow: visible !important;
}

/* 3. L'élément Wrapper (celui qui glisse) */
.slider-container-safe .slide-item {
    transition: all 0.3s ease;
    height: 100%;
}

/* 4. La Carte - État par défaut (non-actif) */
.slider-container-safe .card {
    border: none;
    background: #fff;
    border-radius: 15px;
    transform: scale(0.9);
    opacity: 0.6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 525px;
    display: flex;
    flex-direction: column;
}

/* 5. La Carte - État actif (centre) */
.slider-container-safe .slick-center .card {
    transform: scale(1.05);
    opacity: 1;
    box-shadow: 0 15px 30px rgba(24, 71, 143, 0.2);
    border: 1px solid var(--bs-primary);
    z-index: 10;
}

/* 6. Image de la carte - Bureau (par défaut) */
.slider-container-safe .card-img-top {
    min-height: 500px;
    flex: 0 0 auto;
    width: 100%;
    border-radius: 15px 15px 0 0;
    border-bottom: 5px solid var(--bs-secondary);
}

/* --- Breakpoint pour Tablettes (écrans de moins de 992px) --- */
@media (max-width: 991.98px) {
    .slider-container-safe .card-img-top {
        min-height: 550px; /* On réduit la hauteur pour que la carte rentre bien à l'écran */

    }
}

/* --- Breakpoint pour Mobiles (écrans de moins de 768px) --- */
@media (max-width: 767.98px) {
    .slider-container-safe .card-img-top {
        min-height: 250px; /* Hauteur encore plus réduite pour les téléphones */
    }
}

/* 7. Corps de la carte - 1/3 de la hauteur */
.slider-container-safe .card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.slider-container-safe .card-body h5 {
    margin-bottom: 0.5rem;
}

.slider-container-safe .card-body p {
    margin-bottom: 0.25rem;
}

.slider-container-safe .card-body p:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

/* 8. Boutons de navigation */
.slider-container-safe .prev-btn,
.slider-container-safe .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bs-secondary);
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-container-safe .prev-btn {
    left: 10px;
}

.slider-container-safe .next-btn {
    right: 10px;
}

.slider-container-safe .prev-btn:hover,
.slider-container-safe .next-btn:hover {
    background-color: var(--bs-primary);
    color: var(--bs-dark);
    transform: translateY(-50%) scale(1.1);
}
/*************************************************
  CTA AIDE — RESPONSIVE + ACCESSIBLE
*************************************************/

/* Media wrapper (desktop) */
.cta-aide__media{
  max-width: 90%;
}

/* Image */
.cta-aide__img{
  display: block;
  width: 100%;
  height: auto;
}

/* Float card (desktop) */
.cta-aide__floatcard{
  max-width: 320px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(20%);
}

/* Avatar size */
.cta-aide__avatar{
  width: 40px;
  height: 40px;
}

/* On crée de l’espace en bas pour éviter que la carte “mange” le layout */
.cta-aide__media-col{
  padding-bottom: 3.25rem;
}

/* Focus clavier (accessibilité) */
.cta-aide__btn:focus-visible{
  outline: 3px solid rgba(247,168,28,0.55);
  outline-offset: 4px;
}

/* =========================
   MOBILE / TABLETTE
   ========================= */
@media (max-width: 991.98px){

  /* Title spacing plus doux */
  .cta-aide__title{
    margin-bottom: 1.25rem !important;
  }

  /* Bouton full width (tap target) */
  .cta-aide__btn{
    width: 100%;
    text-align: center;
  }

  /* L’image prend toute la largeur */
  .cta-aide__media{
    max-width: 100%;
  }

  /* La carte repasse en flux normal (plus de position absolute) */
  .cta-aide__floatcard{
    position: static;
    transform: none;
    max-width: 100%;
    margin-top: 1rem;
  }

  /* On retire le padding de compensation (inutile en mobile) */
  .cta-aide__media-col{
    padding-bottom: 0;
  }
}
/*************************************************
  CTA DONATION — RESPONSIVE + ACCESSIBLE
*************************************************/

/* Wrapper image : évite les height/inline style fragiles */
.cta-donation__media{
  width: 100%;
  /* Desktop : visuel vertical */
  aspect-ratio: 3 / 4;
  background: #fff;
}

/* Image */
.cta-donation__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bouton : focus visible (clavier/accessibilité) */
.cta-donation__btn:focus-visible{
  outline: 3px solid rgba(247,168,28,0.55);
  outline-offset: 4px;
}

/* Mobile & tablette */
@media (max-width: 991.98px){

  /* Image plus “horizontale” pour éviter un gros scroll */
  .cta-donation__media{
    aspect-ratio: 16 / 10;
  }

  /* Actions : aligné à gauche et bouton full width */
  .cta-donation__actions{
    text-align: left !important;
  }

  .cta-donation__btn{
    width: 100%;
  }
}
/*************************************************
  CTA BANNER — RESPONSIVE + ACCESSIBLE
*************************************************/

/* Conteneur image */
.cta-banner__media{
  display: block;
}

/* Image principale */
.cta-banner__img-main{
  display: block;
  width: 100%;
  height: auto;
}

/* Image secondaire : overlay desktop */
.cta-banner__img-sec{
  top: 0;
  right: 0;
  width: 60%;
  transform: translate(35%, -35%);
  z-index: 2;
}

/* Petit confort : évite que l’overlay sorte du bloc */
.cta-banner__media{
  padding-right: 18%;
  padding-top: 12%;
}

/* Bouton focus visible (accessibilité) */
.cta-banner__btn:focus-visible{
  outline: 3px solid rgba(247,168,28,0.55);
  outline-offset: 4px;
}

/* =========================
   TABLETTE / MOBILE
   ========================= */
@media (max-width: 991.98px){

  /* On enlève le padding de compensation */
  .cta-banner__media{
    padding-right: 0;
    padding-top: 0;
  }

  /* Image secondaire : repasse en dessous (plus d’overlay) */
  .cta-banner__img-sec{
    display:none;
  }

  /* Alignement texte plus naturel */
  .cta-banner__content{
    text-align: left !important;
  }

  /* Bouton : full width, tap target */
  .cta-banner__actions{
    text-align: left !important;
  }

  .cta-banner__btn{
    width: 100%;
    text-align: center;
  }
}

/* =========================
   STYLES PERSO
   ========================= */
.list-favicon {
    list-style-type: none; /* Enlève les puces par défaut */
    padding-left: 0;       /* Enlève le retrait par défaut */
}

.list-favicon li {
    position: relative;
    padding-left: 35px;    /* Espace laissé à gauche pour afficher ton image */
    margin-bottom: 12px;   /* Espace entre chaque élément de la liste */
    line-height: 1.5;
}

.list-favicon li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px; /* Ajuste cette valeur pour aligner l'icône avec le texte */
    width: 20px;  /* Largeur de ton favicon */
    height: 20px; /* Hauteur de ton favicon */
    
    /* REMPLACE L'URL CI-DESSOUS PAR LE CHEMIN DE TON FAVICON */
    background-image: url('../img/rotary-favicon.png');    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Cible tous les ul dans ton éditeur WYSIWYG */
.contenu-editeur ul {
    list-style-type: none; 
    padding-left: 0;       
}

.contenu-editeur ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;   
    line-height: 1.5;
}

.contenu-editeur ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top:2px; /* Ajuste selon la taille de ta police */
    width: 20px;  
    height: 20px; 
    
    /* Le chemin vers ton favicon */
    background-image: url('../img/rotary-favicon.png');
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}