:root {
    /* ==================================== */
    /* DÉFINITIONS DES COULEURS (À CENTRALISER) */
    /* ==================================== */
    --primary-color: #41729F;
    --secondary-color: #e8a87c;
    
    --white-bg: #fff;
    --dark-text-color: #2b3d4f;
    
    /* Couleurs de la Barre Supérieure (#sp-top-bar) */
    --topbar-bg: #333;
    --topbar-link-color: #fff;

    /* Couleurs du Pied de Page (#sp-footer, #sp-bottom) */
    --footer-bg: #171717;
    --footer-link-color: #a2a2a2;

    --accent-color: #D46A6A;
    --accent2-color: #AB4E68;
    --accent3-color: #E8A87C;
    --accent4-color: #9932CC;
    --primary-color: #41729F;
    --dark-text-color: #2B3D4F;
    --gray-text-color: #A9A9A9;
    --light-text-color: #FFFFFF;
    --dark-border-color: #365C82;
    --light-border-color: #F0F0F0;
    --button-rounded-radius: 10px;
    --dark-background-color: #2B3D4F;
    --light-background-color: #DDE8F5;
    --medium-background-color: #C5D8EC;
    --primary-button-text-color: #FFFFFF;
    --secondary-button-bg-color: #F0E5CF;
    --secondary-button-text-color: #365C82;
    --primary-button-hover-bg-color: #365C82;
    --primary-button-hover-text-color: #FFFFF0;
    --secondary-button-hover-bg-color: #DBD3BC;
    --secondary-button-hover-text-color: #365C82

  --sf-radius: 16px;
  --sf-radius-sm: 12px;
  --sf-shadow: 0 18px 45px rgba(0,0,0,.10);
  --sf-shadow-soft: 0 10px 25px rgba(0,0,0,.08);
  --sf-border: var(--light-border-color, rgba(0,0,0,.10));
  --sf-text: var(--dark-text-color, #111827);
  --sf-muted: var(--gray-text-color, #6b7280);
  --sf-primary: var(--primary-color, #0d6efd);
  --sf-accent: var(--accent3-color, #22c55e);
  --sf-bg: var(--light-background-color, #f6f7fb);
  --sf-btn-radius: var(--button-rounded-radius, 14px);
}

@media (max-width: 991.98px){
  .offcanvas-menu .mod-menu li.menu-parent > .menu-separator{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
}


.offcanvas-menu .offcanvas-inner ul.menu>li>ul li {
    padding-bottom:15px;
}


.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a {
    font-size: 20px;
    line-height: 20px;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a, .offcanvas-menu .offcanvas-inner ul.menu>li>span {
    font-size: 22px;
    line-height: 22px;
}

.btn-icon.btn-hover{
  width: 40px;
  height: 40px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);

  transition: 
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.btn-icon.btn-hover i{
  font-size: 1.1rem;
  transition: transform .2s ease;
}

/* Hover */
.btn-icon.btn-hover:hover{
  background: rgba(0,0,0,.08);
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Mobile : pas de rotation agressive */
@media (hover: none){
  .btn-icon.btn-hover:hover{
    transform: none;
  }
}


@media (max-width: 767.98px){
  .rsform-block-captcha button#Captcha{
    display: flex;
    align-items: center;
    justify-content: flex-start; /* empêche l'espace énorme */
    gap: 10px;                   /* espace maîtrisé */
    text-align: left;
  }

  .rsform-block-captcha button#Captcha svg{
    flex: 0 0 auto;              /* garde sa taille */
  }

  .rsform-block-captcha button#Captcha .hashcash__text{
    flex: 1 1 auto;
    min-width: 0;                /* autorise le retour à la ligne propre */
  }
}

/* Barre mobile fixe en bas */
@media (max-width: 991.98px){
  .sfmes-mobile-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;

    display: flex;
    justify-content: space-around;
    align-items: center;

    height: 60px;
    padding: 6px 10px;

    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .sfmes-mobile-btn{
    flex: 1;
    text-align: center;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    color: inherit;
    font-weight: 600;
    font-size: .78rem;
  }

  .sfmes-mobile-btn i{
    font-size: 1.2rem;
  }

  /* Évite que la barre cache le bas des pages */
  body{
    padding-bottom: 70px;
  }

  .article-details .article-header h1, .article-details .article-header h2, .article-details .article-header h4 {
    font-size: 2.75rem!important;
}

  .offcanvas-menu .offcanvas-inner ul.menu>li {
    padding-bottom: 5px;
}


  /* 1) Le séparateur interne (Monbilansportsanté / Bibliothèque) = vrai titre de groupe */
  .offcanvas-menu .mod-menu li.menu-divider:not(.menu-parent) > .menu-separator{
    display: flex;
    align-items: center;
    gap: .6rem;

    margin: 14px 0 8px;
    padding: 6px 10px;

    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;

    color: var(--primary-color);
    background: rgba(0,0,0,.04);
    border-left: 4px solid var(--primary-color);
    border-radius: .35rem;

    pointer-events: none;
  }

  /* 2) Lignes discrètes pour “titre de section” */
  .offcanvas-menu .mod-menu li.menu-divider:not(.menu-parent) > .menu-separator::after{
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,.15);
    margin-left: .6rem;
  }

  /* 3) Indenter UNIQUEMENT les liens qui suivent un divider interne
        (jusqu’au prochain divider/parent) */
  .offcanvas-menu .mod-menu li.menu-divider:not(.menu-parent) ~ li:not(.menu-divider) > a{
  
    position: relative;
  }


  /* 5) Ne pas indenter les “parents” (Activités/Publications/Formations etc.) */
  .offcanvas-menu .mod-menu li.menu-parent > .menu-separator{
    padding-left: 0; /* sécurité */
  }
}


/* ===============================
   Séparateur interne (ex: Bibliothèque)
   => vrai titre de groupe
   =============================== */
.sp-dropdown-items > .sp-menu-item > .sp-menu-separator{
  display: flex;
  align-items: center;
  gap: .6rem;

  margin: 14px 0 8px;
  padding: 0;

  background: none;
  border: 0;

  font-weight: 800;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary-color);
  pointer-events: none;
}

.sp-dropdown-items > .sp-menu-item > .sp-menu-separator::before,
.sp-dropdown-items > .sp-menu-item > .sp-menu-separator::after{
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.18);
  opacity: .8;
}

/* ===============================
   Items rattachés au séparateur
   => indentation + "arbre"
   =============================== */
.sp-dropdown-items .sp-menu-separator ~ .sp-menu-item{
  position: relative;
}

.sp-dropdown-items .sp-menu-separator ~ .sp-menu-item a{
  padding-left: 34px; /* indentation */
  position: relative;
}

/* Trait vertical (connexions) */
.sp-dropdown-items .sp-menu-separator ~ .sp-menu-item::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,.14);
}

/* Pastille par item */
.sp-dropdown-items .sp-menu-separator ~ .sp-menu-item a::before{
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  opacity: .55;
}

/* Coupe le trait en haut/bas pour un look propre */
.sp-dropdown-items .sp-menu-separator + .sp-menu-item::before{ top: 50%; }
.sp-dropdown-items .sp-menu-separator ~ .sp-menu-item:last-child::before{ bottom: 50%; }




div.modcbsubCurrent div {
    background: none!important;
}

div.modcbsubCurrent li {
    background: none;
    padding: 0;
}

div.modcbsubUpgrades li {
    background: none!important;
    padding: 0!important;
}

/* Masquer le bonjour */
.modcbsubGreeting {
    display: none !important;
}

/* Conteneur */
.modcbsubEncl {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.4rem;
    margin-bottom: 1rem;
}

div.modcbsubEncl {
    padding: 20px!important;
}

/* Titre */
.modcbsubUpgrades > div:first-child {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    margin-bottom: .75rem;
  background: none;
}

/* Liste */
.modcbsubUpgrades ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Élément */
.modcbsubUpgrades li {
    margin: 0;
}

/* Lien */
.modcbsubUpgrades li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: #f8fafc;
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}

/* Hover */
.modcbsubUpgrades li a:hover {
    background: #0d6efd;
    color: #ffffff;
}

/* Effet bouton */
.modcbsubUpgrades li a::after {
    content: "→";
    font-weight: 700;
    transition: transform .2s ease;
}

.modcbsubUpgrades li a:hover::after {
    transform: translateX(4px);
}

/* ================================
   COTISATION À JOUR
================================ */

.modcbsubCurrent > div:first-child {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #065f46;
    margin-bottom: .75rem;
}

/* Liste */
.modcbsubCurrent ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Élément cotisation OK */
.modcbsubCurrent li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 600;
    border: 1px solid #bbf7d0;
}

/* Icône validation */
.modcbsubCurrent li::after {
    content: "✓";
    font-weight: 800;
    color: #059669;
}



.cb_template .cbCanvasLayout.cbCanvasLayoutMd .cbCanvasLayoutTop {
    min-height: auto!important;
    background-color: #41729f !important;
}

/* ================================
   MENU ESPACE MEMBRES
================================ */

.menuespace-membre {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

/* Titre "Espace membres" */
.menuespace-membre .menu-divider {
    padding: 1rem 1.25rem .5rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
}

/* Liens */
.menuespace-membre li a {
    display: flex;
    align-items: center;
    padding: .7rem 1.25rem;
    color: #111827;
    font-size: .95rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .2s ease;
}

/* Hover */
.menuespace-membre li a:hover {
    background: #f8fafc;
    color: #0d6efd;
    border-left-color: #0d6efd;
    padding-left: 1.45rem;
}

/* Séparation douce */
.menuespace-membre li:not(.menu-divider) {
    border-bottom: 1px solid #f1f5f9;
}

/* Dernier lien sans bordure */
.menuespace-membre li:last-child {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 575px) {
    .menuespace-membre li a {
        padding: .85rem 1.25rem;
    }
}


.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    line-height: 25px;
}

.article-details .article-header h1, .article-details .article-header h2, .article-details .article-header h4 {
    font-size: 3.25rem;
}

img.wf_file_icon {
    display: inline-block;
    height: 30px;
}

/* ================================
   FORMULAIRE DE CONNEXION – SFMES
   ================================ */

.cbLoginForm {
  max-width: 420px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border: 1px solid var(--light-border-color);
}

/* Champs */
.cbLoginForm .form-control {
  height: 52px;
  border-radius: .75rem;
  font-size: .95rem;
  border: 1px solid var(--light-border-color);
  padding-left: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cbLoginForm .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Groupes input + icône */
.cbLoginForm .input-group {
  position: relative;
}

.cbLoginForm .input-group-text,
.cbLoginForm .input-password-toggle {
  background: transparent;
  border: none;
  color: var(--gray-text-color);
}

/* Icônes à droite */
.cbLoginForm .input-group-text {
  border-left: none;
}

.cbLoginForm .input-password-toggle:hover {
  color: var(--primary-color);
}

/* Espacement vertical */
.cbLoginForm .form-group {
  margin-bottom: 1.25rem;
}

/* Bouton principal */
.cbLoginForm .btn-primary {
  width: 100%;
  height: 52px;
  border-radius: .75rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cbLoginForm .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Liens secondaires */
.cbLoginForm .mod-login__options {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--light-border-color);
  text-align: center;
}

.cbLoginForm .mod-login__options li {
  margin-bottom: .5rem;
}

.cbLoginForm .mod-login__options a {
  font-size: .85rem;
  color: var(--gray-text-color);
  text-decoration: none;
  transition: color .2s ease;
}

.cbLoginForm .mod-login__options a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Lien inscription mis en valeur */
.cbLoginForm .form-login-options-register a {
  font-weight: 600;
  color: var(--primary-color);
}

/* Responsive */
@media (max-width: 576px) {
  .cbLoginForm {
    padding: 1.5rem 1.25rem;
  }
}

#offcanvasLogin {z-index:10000;}

/* ================================
   MENU BAS – VERSION HORIZONTALE
   ================================ */

.moduletable.-menu-bas {
  width: 100%;
  text-align: center;
}

/* UL = conteneur horizontal */
.moduletable.-menu-bas .mod-menu {
  display: flex;
  flex-wrap: wrap;              /* Responsive */
  justify-content: center;      /* Centrage horizontal */
  align-items: center;
  gap: 1rem;                    /* Espacement entre items */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* LI */
.moduletable.-menu-bas .mod-menu li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Liens */
.moduletable.-menu-bas .mod-menu a {
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Hover liens */
.moduletable.-menu-bas .mod-menu a:hover {
  opacity: 0.85;
}

/* Séparateur (menu-divider) */
.moduletable.-menu-bas .menu-divider {
  opacity: 0.7;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Option : remplacer le séparateur par un pipe visuel */
.moduletable.-menu-bas .menu-divider::before {
  content: "|";
  margin: 0 0.75rem;
  opacity: 0.5;
}

/* Supprime le span interne si Joomla en ajoute */
.moduletable.-menu-bas .menu-divider span {
  display: inline;
}

/* Sécurité : liens vides générés par Joomla */
.moduletable.-menu-bas a:empty {
  display: none;
}

/* ================================
   RESPONSIVE (mobile)
   ================================ */
@media (max-width: 576px) {
  .moduletable.-menu-bas .mod-menu {
    gap: 0.5rem;
  }

  .moduletable.-menu-bas .menu-divider::before {
    margin: 0 0.4rem;
  }
}


#sciences-sport .table thead th{
  font-family: var(--font-family-body);
  color: var(--dark-text-color);
  border-bottom-color: var(--light-border-color);
}
#sciences-sport .table tbody td{
  border-top-color: var(--light-border-color);
  font-family: var(--font-family-body);
  color: var(--dark-text-color);
}
#sciences-sport .card{
  border: 1px solid var(--light-border-color);
}


/* carte = même hauteur + layout interne */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-addon-article{
  height: 100%;
  background: #fff;
  border: 1px solid var(--light-border-color);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-addon-article:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
}

/* wrapper en colonne pour pousser le CTA en bas */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-article-info-wrap {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
}

/* barre décorative */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-article-info-wrap::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--accent2-color));
  opacity: .9;
}

/* TITRE: hauteur homogène (2 lignes desktop) */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-article-info-wrap h3{
  margin: .5rem 0 1rem;
  font-family: var(--font-family-heading);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-article-info-wrap h3 a{
  color: var(--dark-text-color);
  text-decoration: none;
  transition: color .2s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 992px){
  #section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-article-info-wrap h3 a{
    -webkit-line-clamp: 2; /* même hauteur sur desktop */
  }
}
@media (max-width: 991.98px){
  #section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-article-info-wrap h3 a{
    -webkit-line-clamp: 3;
  }
}
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-addon-article:hover h3 a{
  color: var(--primary-color);
}

/* LISTE (date, intro, lieu) */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .fields-container{
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

/* item = icône EN HAUT + texte à côté (haut aussi) */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .fields-container .field-entry{
  display: flex;
  align-items: flex-start;       /* texte aligné en haut */
  gap: .6rem;
  color: var(--gray-text-color);
  font-family: var(--font-family-body);
  font-size: .95rem;
  line-height: 1.5;
}

/* valeur en haut (au cas où un thème force autre chose) */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .fields-container .field-entry .field-value{
  display: inline-block;
  vertical-align: top;
}

/* icônes pseudo-element: forcer l'alignement haut */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .fields-container .field-entry::before{
  display: inline-block;
  width: 1.1em;
  flex: 0 0 1.1em;
  line-height: 1;                 /* évite centrage vertical */
  margin-top: .15em;              /* ajuste pour coller au cap height du texte */
  transform: translateY(0);        /* neutralise d'éventuels transforms */
}

/* icône: date */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .field-entry.date-evenement::before{
  content: "\f073";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  color: var(--primary-color);
}

/* icône: intro */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .field-entry.intro::before{
  content: "\f05a"; /* info-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--primary-color);
}

/* icône: lieu */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae .field-entry.lieu::before{
  content: "\f3c5"; /* map-marker-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--primary-color);
}

/* CTA collé en bas */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae
.sppb-readmore{
  margin-top: auto;              /* reste en bas */
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  gap: .35rem;

  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: .95rem;

  color: var(--primary-color);
  text-decoration: none;

  padding: 0;                    /* pas d’effet bouton */
  background: none;
  border: none;
  box-shadow: none;

  transition: color .2s ease, gap .2s ease;
}

/* Flèche discrète */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae
.sppb-readmore::after{
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .85em;
}

/* Hover : couleur uniquement */
#section-id-69966a5f-104d-4e04-865f-01b197a135ae
.sppb-readmore:hover{
  color: var(--accent2-color);
  gap: .55rem;
}








.formation a {color:var(--primary-color)!important}

figure.article-full-image, .article-intro-image {
  display:none;
}

/* =====================================================
   CARD
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-addon-article,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-addon-article{
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--light-border-color);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-addon-article:hover img,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-addon-article:hover img{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* =====================================================
   IMAGE (SEULE ELLE BOUGE)
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-img-wrap,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-img-wrap{
  position: relative;
  display: block;
  height: 12rem;
  overflow: hidden;
}

/* Image uniquement */
#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-img-wrap img,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  transform-origin: center center;
  will-change: transform;
}

/* Zoom image au hover */
#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-addon-article:hover .sppb-article-img-wrap img,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-addon-article:hover .sppb-article-img-wrap img{
  transform: scale(1.1);
}

/* Overlay */
#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-img-wrap::after,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-img-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent 60%);
  opacity: .6;
  z-index: 1;
  pointer-events: none;
}

/* =====================================================
   BADGE CATÉGORIE (DANS L’IMAGE, FIXE)
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-meta,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-meta{
  position: absolute;
  top: 1rem;
  right: 2rem;
  z-index: 2;

  /* blocage total */
  transform: none !important;
  transition: none !important;
}

/* Sécurité : aucun hover ne doit l’affecter */
#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-addon-article:hover .sppb-article-meta,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-addon-article:hover .sppb-article-meta{
  transform: none !important;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-meta-category a,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-meta-category a{
  display: inline-block;
  background: #fff;
  padding: .4rem .9rem;
  border-radius: .6rem;
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--primary-color);
  box-shadow: 0 6px 15px rgba(0,0,0,.2);
  text-decoration: none;
}

/* =====================================================
   CONTENT
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-info-wrap,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-info-wrap{
  padding: 1.5rem;
  min-height: 250px;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-info-wrap h3,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-info-wrap h3{
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-info-wrap h3 a,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-info-wrap h3 a{
  color: var(--dark-text-color);
  text-decoration: none;
  transition: color .25s ease;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-addon-article:hover h3 a,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-addon-article:hover h3 a{
  color: var(--primary-color);
}

/* =====================================================
   DATE
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .fields-container,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .fields-container{
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem 0;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .field-entry.date-evenement,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .field-entry.date-evenement{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--gray-text-color);
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .field-entry.date-evenement::before,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .field-entry.date-evenement::before{
  content: "\f073";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

/* =====================================================
   INTRO
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .field-entry.intro,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .field-entry.intro{
  font-family: var(--font-family-body);
  font-size: .95rem;
  color: var(--dark-text-color);
  opacity: .7;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding-top: 20px;
}

/* =====================================================
   CTA
   ===================================================== */

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-readmore,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-readmore{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-family-body);
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: gap .25s ease;
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-info-wrap,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-info-wrap{
  padding-bottom: 60px; /* réserve l’espace pour le lien */
}

#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-info-wrap .sppb-readmore,
#section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-info-wrap .sppb-readmore{
  position: absolute;
  bottom: 40px;
}



@media (max-width: 768px){
#section-id-d4f50c54-243b-4590-a07c-680412c6baf0 .sppb-article-info-wrap .sppb-readmore, #section-id-2f17b6b1-9ecd-4c2a-8e29-41efa781ff0e .sppb-article-info-wrap .sppb-readmore {
    position: absolute;
    bottom: 40px;
}

  #section-id-69966a5f-104d-4e04-865f-01b197a135ae .sppb-addon-article-layout {
  margin-top:15px;
}
}



 /* =========================================================
   SECTION – HERO ÉVÉNEMENT (équivalent Tailwind complet)
   ========================================================= */

/* ---------- Section background ---------- */
.sf-feature-section{
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--accent2-color),
    var(--primary-color)
  );
}

/* ---------- Background animated pattern ---------- */
.sf-bg-pattern{
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.sf-ring{
  position: absolute;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,1);
  animation: sf-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
  box-sizing: border-box;
}

/* Tailwind equivalents */
.sf-ring-1{
  width: 18rem;   /* w-72 */
  height: 18rem;
  top: 2.5rem;    /* top-10 */
  right: 2.5rem;  /* right-10 */
}

.sf-ring-2{
  width: 24rem;   /* w-96 */
  height: 24rem;
  bottom: 5rem;   /* bottom-20 */
  left: 5rem;     /* left-20 */
}

.sf-ring-3{
  width: 16rem;   /* w-64 */
  height: 16rem;
  top: 50%;
  right: 25%;
  border-width: 1px;
  transform: translateY(-50%);
}

/* Pulse animation (copie Tailwind) */
@keyframes sf-pulse{
  0%,100%{
    opacity: .53;
  }
  50%{
    opacity: .20;
  }
}

/* ---------- Z-index management ---------- */
.sf-content{
  position: relative;
  z-index: 2;
}

/* ---------- Glassmorphism blocks ---------- */
.sf-glass{
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,1);
}

.sf-glass-sm{
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.30);
}

.sf-glass-md{
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.20);
}

/* ---------- Image overlay ---------- */
.sf-img-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--primary-color),
    transparent
  );
  opacity: .40;
}

/* ---------- Hover scale effects ---------- */
.sf-btn-scale,
.sf-img-scale{
  transition: transform .25s ease, box-shadow .25s ease;
}

.sf-btn-scale:hover{
  transform: scale(1.05);
}

.sf-img-scale:hover{
  transform: scale(1.02);
}

/* ---------- Links ---------- */
.sf-link{
  color: var(--primary-color);
  font-family: var(--font-family-body);
  transition: color .2s ease;
  text-decoration: none;
}

.sf-link:hover{
  color: var(--accent2-color);
}

/* ---------- Alert ---------- */
.sf-alert{
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 1rem;
}

/* ---------- Utility typography ---------- */
.sf-title{
  font-family: var(--font-family-heading);
  font-weight: 700;
}

.sf-text{
  font-family: var(--font-family-body);
}

/* ---------- Optional debug (à supprimer) ---------- */
/*
.sf-ring{
  border-color: red !important;
}
*/


.sf-card {
		background: linear-gradient(135deg, var(--light-background-color), #fff);
		border-color: var(--light-border-color) !important;
		transition: transform .3s ease, box-shadow .3s ease;
	}

	.sf-card:hover {
		transform: translateY(-.5rem);
		box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12);
	}

	.sf-icon {
		width: 4rem;
		height: 4rem;
		border-radius: 1rem;
		transition: transform .3s ease;
	}

	.sf-card:hover .sf-icon {
		transform: scale(1.1);
	}
  /* Background gradient section */
  .sf-president-section{
    background: linear-gradient(135deg, var(--light-background-color), #fff, var(--light-background-color));
  }

  /* Sticky like: sticky top-32 (≈ 8rem) */
  .sf-sticky{
    position: sticky;
    top: 8rem;
  }

  /* Glow behind photo card (was: absolute -inset-3 + blur + opacity) */
  .sf-glow{
    inset: -0.75rem; /* ≈ -inset-3 */
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent2-color));
    opacity: .2;
    filter: blur(20px);
  }

  /* Photo overlay (gradient-to-t) */
  .sf-photo-overlay{
    background: linear-gradient(to top, var(--primary-color), transparent 60%);
    opacity: .10;
  }

  /* Quote badge positioning (was: -top-6 -left-6 w-20 h-20) */
  .sf-quote-badge{
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    top: -1.5rem;
    left: -1.5rem;
    background: linear-gradient(135deg, var(--accent3-color), var(--accent-color));
  }

  /* Message spacing like space-y-6 */
  .sf-message > * + *{
    margin-top: 1.25rem;
  }
  .sf-message{
    line-height: 1.75;
    font-size: 1.125rem; /* text-lg */
  }

  /* Highlight block (gradient + left border + rounded-right) */
  .sf-highlight{
    background: linear-gradient(90deg, var(--light-background-color), transparent);
    border-left: 4px solid var(--primary-color);
    padding: 1.25rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  /* Achievement gradients */
  .sf-achievement-1{ background: linear-gradient(135deg, var(--primary-color), var(--accent2-color)); }
  .sf-achievement-2{ background: linear-gradient(135deg, var(--accent3-color), var(--accent-color)); }
  .sf-achievement-3{ background: linear-gradient(135deg, var(--accent2-color), var(--primary-color)); }


.membres-actifs {
  left: 40px;
    bottom: -80px;
}

/* Règle Générique pour la Bannière */
.banner-container {
    width: 100%!important;
    /* La hauteur sera définie par la media query ci-dessous */
    overflow: hidden; /* C'est ce qui permet de rogner l'image */
}

/* Règle générique pour l'image (doit être en haut) */
.banner-container img {
    object-fit: cover !important;
    object-position: center !important; 
}

.banner-container p {
    padding:0;
  margin:0;
}


/* MEDIA QUERY : Cible Mobile et Tablette (< 992px) */
@media (max-width: 991px) {
    /* 1. Forcer la hauteur sur les conteneurs parents */
    #sp-banniere-haut .sp-module.banner-container,
    #sp-banniere-haut .sp-column {
        height: 150px !important;
        overflow: hidden !important;
        padding: 0 !important; /* Nettoyage */
        margin: 0 !important; /* Nettoyage */
    }
    
    /* 2. Forcer l'image à prendre cette hauteur */
    .banner-container img {
        width: 100% !important;
        height: 100% !important;
        /* Crucial : annuler les attributs width/height définis en HTML */
        max-width: none !important; 
        min-height: 150px !important; /* Sécurité */
    }

  .logo-image {margin-top:15px;}
}

/* Règle Desktop (Nettoyage) */
@media (min-width: 992px) {
    .banner-container {
        height: auto !important;
    }
    .banner-container img {
        height: auto !important;
        max-width: 100% !important;
    }
}


    
    /* Taille de titre spécifique (simule lg:text-[48px]) */
    @media (min-width: 992px) {
        .custom-heading-size {
        font-size: 48px !important;
        line-height: 1.1 !important;
        text-transform: uppercase;
        }
    }
    
    /* Bouton : Effet d'Ombre et de Mise à l'échelle (simule hover:scale-105 shadow-lg) */
    .custom-scale-hover {
        transition: all 0.3s ease-in-out;
    }
    .custom-scale-hover:hover {
        transform: scale(1.05);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; /* shadow-lg */
    }

    /* Image : Rotation et Effet de survol (simule lg:rotate-2 hover:rotate-0) */
    .custom-rotate-hover {
        transform: rotate(2deg);
        transition: transform 0.5s ease-in-out;
    }
    .custom-rotate-hover:hover {
        transform: rotate(0deg);
    }

    /* Utilitaires spécifiques aux variables (si non gérés par Bootstrap) */
    .text-dark { color: var(--dark-text-color) !important; }
    .opacity-75 { opacity: 0.75 !important; }
    
    /* Pour la carte flottante, s'assurer que le centre est respecté */
    .position-absolute.translate-middle {
        transform: translate(-50%, 50%); /* Ajusté pour Bottom-Left Flottant */
    }



/* 1. Premier élément (pas de padding à gauche) */
.sp-megamenu-parent > li:first-child > a,
.sp-megamenu-parent > li:first-child > span {
    padding-left: 0;
}

/* 2. Dernier élément (pas de padding à droite) */
.sp-megamenu-parent > li:last-child > a,
.sp-megamenu-parent > li:last-child > span {
    padding-right: 0;
}

/* Général */
body, .sp-preloader {
    background-color: var(--white-bg);
    color: var(--dark-text-color);
}
.sp-preloader > div {
    background: var(--primary-color);
}
.sp-preloader > div:after {
    background: var(--white-bg);
}

/* Top Bar */
#sp-top-bar {
    background: var(--topbar-bg);
    color: var(--topbar-link-color);
}
#sp-top-bar a {
    color: var(--topbar-link-color);
}
#sp-top-bar a:hover {
    color: var(--white-bg); /* Ajouté pour un meilleur contraste au survol */
}

/* Header/Menu */
#sp-header {
    background: var(--white-bg);
}
#sp-menu ul.social-icons a:hover, #sp-menu ul.social-icons a:focus {
    color: var(--primary-color);
}
.sp-reading-progress-bar {
    background-color: var(--primary-color);
}

/* Liens et États Actifs */
a {
    color: var(--primary-color);
}
a:hover, a:focus, a:active {
    color: var(--primary-color); /* Note: La couleur de survol est ici la même que la couleur de base */
}

/* Tags */
.tags > li a {
    background: rgba(65, 114, 159, .1); /* Remplacement manuel de rgba(65,114,159,.1) */
    color: var(--primary-color);
}
.tags > li a:hover {
    background: var(--primary-color);
}

/* Partage Social */
.article-social-share .social-share-icon ul li a {
    color: var(--dark-text-color);
}
.article-social-share .social-share-icon ul li a:hover, .article-social-share .social-share-icon ul li a:focus {
    background: var(--primary-color);
}

/* Pagination */
.pager > li a {
    border: 1px solid #ededed; /* Gardé car non défini en variable */
    color: var(--dark-text-color);
}

/* Mega Menu */
.sp-megamenu-parent > li > a {
    color: var(--dark-text-color);
}
.sp-megamenu-parent > li:hover > a, .sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    color: var(--primary-color);
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #DDE8F5;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-mega-group > li > a {
    color: var(--dark-text-color);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    color: var(--primary-color);
}

/* Offcanvas Toggler (Hamburger) */
#offcanvas-toggler > .fa, #offcanvas-toggler > .fas, #offcanvas-toggler > .far {
    color: var(--dark-text-color);
}
#offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fa:focus, #offcanvas-toggler > .fa:active,
#offcanvas-toggler > .fas:hover, #offcanvas-toggler > .fas:focus, #offcanvas-toggler > .fas:active,
#offcanvas-toggler > .far:hover, #offcanvas-toggler > .far:focus, #offcanvas-toggler > .far:active {
    color: var(--primary-color);
}


/* Offcanvas Menu */
.offcanvas-menu {
    background-color: var(--white-bg);
    color: var(--dark-text-color);
}
.offcanvas-menu .offcanvas-inner a, .offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
    color: var(--dark-text-color);
}
.offcanvas-menu .offcanvas-inner a:hover, .offcanvas-menu .offcanvas-inner a:focus, .offcanvas-menu .offcanvas-inner a:active,
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
    color: var(--primary-color);
}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler {
    color: rgba(var(--dark-text-color-rgb), .5); /* Utilise la variable dark-text-color avec opacité */
}
.offcanvas-menu .offcanvas-inner ul.menu > li li a {
    color: rgba(var(--dark-text-color-rgb), .8); /* Utilise la variable dark-text-color avec opacité */
}


/* Boutons Bootstrap/SP Page Builder */
.btn-primary, .sppb-btn-primary {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.btn-primary:hover, .sppb-btn-primary:hover {
    border-color: var(--secondary-color); /* Changement de couleur au survol */
    background-color: var(--secondary-color);
}

/* Social Icons */
ul.social-icons > li a:hover {
    color: var(--primary-color);
}

/* Page Title/Layout */
.sp-page-title {
    background: var(--primary-color);
}
.layout-boxed .body-innerwrapper {
    background: var(--white-bg);
}

/* Modules/Widgets */
.sp-module ul > li > a, .sp-module .latestnews > div > a {
    color: var(--dark-text-color);
}
.sp-module ul > li > a:hover, .sp-module .latestnews > div > a:hover {
    color: var(--primary-color);
}
.sp-module .tagscloud .tag-name:hover, .search .btn-toolbar button {
    background: var(--primary-color);
}

/* Footer & Bottom */
#sp-footer, #sp-bottom {
    background: var(--dark-background-color);
    color: var(--white-bg);
}
#sp-footer a, #sp-bottom a {
    color: var(--footer-link-color);
}
#sp-footer a:hover, #sp-footer a:active, #sp-footer a:focus,
#sp-bottom a:hover, #sp-bottom a:active, #sp-bottom a:focus {
    color: var(--white-bg);
}
#sp-bottom .sp-module-content .latestnews > li > a > span {
    color: var(--white-bg);
}

/* Coming Soon / Error Page */
.sp-comingsoon body {
    background-color: var(--primary-color);
}
.pagination > li > a, .pagination > li > span {
    color: var(--dark-text-color);
}
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
    color: var(--dark-text-color);
}
.pagination > .active > a, .pagination > .active > span {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span:hover, .pagination > .active > span:focus {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.error-code, .coming-soon-number {
    color: var(--primary-color);
}

.sp-menu-separator {
    cursor: pointer; 
    transition: color 0.3s ease, background-color 0.3s ease;
}
.sp-menu-separator:hover {
    color: var(--primary-color, #007bff); 
}


/* ================================
   EFFET GLOBAL POUR .btn
   ================================ */

.btn {
  position: relative;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* Hover / Focus */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Active (clic) */
.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn {
  position: relative;
  overflow: hidden;
}

/* état normal */
.btn::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 40px;
  height: 155px;
  background-color: #fff;
  opacity: 0;
  transform: rotate(35deg);
  transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

/* hover / focus */
.btn:hover::after,
.btn:focus-visible::after {
  left: 120%;
  opacity: 0.25;
}


/* ===== Topbar base ===== */
.topbar {
  background: var(--topbar-bg, #333);
  color: var(--light-text-color, #fff);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.2;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar a,
.topbar .topbar-link {
  color: var(--topbar-link-color, #e9eef4);
  text-decoration: none;
}

.topbar a:hover,
.topbar .topbar-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* Séparateur discret */
.topbar-sep {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  display: inline-block;
}

/* Badge d’info/promo */
.topbar-badge {
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: .35rem .6rem;
  border-radius: var(--sf-radius-sm, 12px);
  box-shadow: var(--sf-shadow-soft, 0 10px 25px rgba(0,0,0,.08));
  backdrop-filter: saturate(1.2) blur(2px);
}

/* Boutons icônes (login, search) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--sf-btn-radius, 14px);
  background: transparent;
  color: #fff;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.icon-btn:active { transform: scale(.98); }
.icon-btn:focus-visible {
  outline: 2px solid var(--accent3-color, #E8A87C);
  outline-offset: 2px;
}

/* CTA Adhérer */
.btn-adhesion {
  --_bg: var(--primary-color, #41729F);
  --_bg-hover: var(--primary-button-hover-bg-color, #365C82);
  --_text: var(--primary-button-text-color, #fff);
  border-radius: var(--button-rounded-radius, 10px);
  padding: .45rem 1rem;
  background: var(--_bg);
  color: var(--_text);
  border: 1px solid var(--dark-border-color, #365C82);
  box-shadow: var(--sf-shadow, 0 18px 45px rgba(0,0,0,.10));
}
.btn-adhesion:hover { background: var(--_bg-hover); color: var(--primary-button-hover-text-color, #fffff0); }

/* Densité mobile : compacter légèrement */
@media (max-width: 575.98px) {
  .topbar { font-size: 0.875rem; }
  .icon-btn { width: 2rem; height: 2rem; }
  .btn-adhesion { padding: .4rem .85rem; }
}

/* Respect des préférences utilisateurs */
@media (prefers-reduced-motion: reduce) {
  .icon-btn, .btn-adhesion { transition: none; }
}

/* === Forcer le comportement du menu responsive à 1400px === */

/* Masque le menu texte dès 1399px et moins */
@media (max-width: 1399.98px) {
  /* Cache la version desktop */
  .sp-megamenu-parent.d-none.d-lg-block {
    display: none !important;
  }

  /* Affiche le toggler hamburger */
  #offcanvas-toggler {
    display: flex !important;
  }

  /* Facultatif : si les modules icônes (connexion / contact) sont trop serrés */
  .header-modules {
    display: none !important; /* ou "flex" selon ton choix */
  }
}

/* Et au-dessus de 1400px, on garde le menu texte normal */
@media (min-width: 1400px) {
  .sp-megamenu-parent.d-none.d-lg-block {
    display: block !important;
  }
  #offcanvas-toggler {
    display: none !important;
  }
}

/* Offcanvas: autoriser le scroll vertical sur mobile */
@media (max-width: 991.98px){
  .offcanvas-menu{
    height: 100vh;
    overflow: hidden;              /* on empêche le scroll du conteneur global */
  }

  .offcanvas-menu .offcanvas-inner{
    max-height: calc(100vh - 90px); /* 90px = hauteur approx du bandeau logo/close */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}