/* ////////////////////////////////////////////////////////////////////////////// */
/*
/*  1.NAVBAR 
/*     .VARIABLES GLOBALES 
/*     .POSITIONNEMENT
/*     .TEXTES/LIENS/LOGO
/*     .FOND NAVBAR
/*     .SOUS-MENU
/*     .DEBUG MODE
/*     .ALIGNEMENT HORIZONTAL DES BLOCKS MENU
/*     .LARGEUR DROP DOWN DRAPEAU
/*     .REMPLACEMENT DES LIENS DE COMPTE PAR DES ICÔNES
/*     .INFOBULLE DES LIENS DE COMPTE
/*  2.HERO CARROUSEL
/*     .HAUTEUR DESKTOP
/*     .IMAGES TYPE SLIDER PREMIUM
/*     .RESPONSIVE DESKTOP / TABLETTE / PORTABLE
/*     .DIAPO 1 / DIAPO 2 / DIAPO 3 > TEXTES COULEURS & PLACEMENTS
/*     .PARALLAX IMAGE
/*  4.FULL WIDTH BLEED (CLASS POUR FORCER LA PLEINE LARGEUR)
/*  5.GRANDE IMAGE AVENTURE (CLASS "HERO HEADER" > IMAGE PASSANT DERRIERE LE TITRE)
/*  6.EBT-SLICK-SLIDER (SLIDER PUBLICITAIRE)
/* 
/* /////////////////////////////////////////////////////////////////////////////// */


/* ///////////////////////////////////////////////// */
/* ///////////////////// NAVBAR //////////////////// */
/* ///////////////////////////////////////////////// */
.navbar {
  transition: background-color .6s ease, padding .3s ease;
  padding: 1rem 1.5rem;
}

.navbar.transparent {
  background: transparent !important;
}

/* ///// NAVBAR CLONEE (gérée par Headhesive) /////  */
.navbar-clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform .35s ease,
    opacity .35s ease,
    background-color .3s ease,
    padding .3s ease;
  z-index: 20;
  background-color: #0f0f0f;               /* FOND DU CLONE */
}
/* ///////// QUAND LA NAVBAR DEVIENT STICKY /////////*/
.navbar-clone.navbar-stick {
  transform: translateY(0);    /* garder 0 */
  opacity: 1;
}
/* //////// QUAND ELLE SE DÉSTICK /////////*/
.navbar-clone.navbar-unstick {
  transform: translateY(-100%);
  opacity: 0;
}
/* ////////////// LIENS DE LA NAVBAR /////////////// */
.navbar .nav-link,
.navbar-clone .nav-link {
  color: #ffffff !important;             /* COULEUR POLICE */
  transition: color .3s ease, padding .3s ease;
  padding: .5rem 1rem;
}
.navbar-clone.navbar-stick .nav-link {
  padding: .25rem 1rem;                    /* plus compact */
}
/* Actif */
.navbar .nav-link.active,
.navbar-clone .nav-link.active {
  font-weight: 600;
}
/* Hover */
.navbar .nav-link:hover,
.navbar-clone .nav-link:hover {
  color: var(--bs-primary);
}
/*////////////////////////////////////////////////////////*/
/* ////////////// SOUS-MENUS (DROPDOWNS) /////////////// */
/*//////////////////////////////////////////////////////*/
/* 1. Le fond du sous-menu et la couleur du texte par défaut */
.navbar .dropdown-menu,
.navbar-clone .dropdown-menu {
  background-color: #0f0f0f !important; /* Couleur de fond du bloc sous-menu */
  border: none; /* Optionnel : supprime la bordure Bootstrap par défaut */
}
/* 2. Les liens à l'intérieur du sous-menu */
.navbar .dropdown-item,
.navbar-clone .dropdown-item {
  color: #b4b4b4 !important; /* Couleur du texte des liens du sous-menu */
  transition: background-color .3s ease, color .3s ease;
}
/* 3. L'effet au survol (Hover) sur les liens du sous-menu NON sélectionnés */
.navbar .dropdown-item:hover,
.navbar-clone .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important; /* Un léger voile pour voir le survol */
  color: #ffc400 !important; /* Le texte prend la couleur jaune au survol */
}
/* 4. Change la couleur du lien actif (page en cours) et au moment du clic */
.navbar .dropdown-item.active,
.navbar-clone .dropdown-item.active,
.navbar .dropdown-item:active,
.navbar-clone .dropdown-item:active {
  background-color: #ffcc00 !important; 
  color: #000000 !important; /* Couleur du texte sur ce fond */
}
/* 5. NOUVEAU : L'effet au survol UNIQUEMENT quand le sous-menu est déjà SÉLECTIONNÉ */
.navbar .dropdown-item.active:hover,
.navbar-clone .dropdown-item.active:hover,
.navbar .dropdown-item:active:hover,
.navbar-clone .dropdown-item:active:hover {
  background-color: #ffe066 !important; /* Un jaune un peu plus clair au survol (ou une autre couleur de ton choix) */
  color: #000000 !important; /* On garde le texte noir pour le contraste */
}

/* //////////////  ALIGNEMENT DES BLOCKS MENU > DRAPEAU/MENU/RECHERCHE/CONNEXION  ///////////////// */
.region-primary-menu,                       /* On cible la région de navigation de Bootstrap */
.region-nav-main,
.nav-additional { 
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;                          /* Pour que les blocs passent à la ligne sur mobile */
}
.region-primary-menu .block,       /* On s'assure que les blocs à l'intérieur ne forcent pas le retour à la ligne */
.region-nav-main .block,
.nav-additional .block {
  margin-bottom: 0;
  display: flex;                            /* Permet d'aligner le contenu interne du bloc aussi */
}
/* ////////// LARGEUR DROP DOWN DRAPEAU /////////// */
[data-block="nav_main"] .dropdown-menu {    /* On cible spécifiquement le bloc de navigation principale */
  min-width: fit-content !important;        /* Supprime les 160px par défaut */
  width: auto !important;
  padding: 5px !important;                  /* Réduit l'espace autour des drapeaux */
}
[data-block="nav_main"] .dropdown-item {
  padding: 5px 5px !important;              /* Réduit l'espace interne de chaque ligne */
  text-align: center;
}
/* ////////// COULEUR DE FOND DU DROP DOWN DRAPEAU /////////// */
[data-block="nav_main"] .dropdown-menu {    /* Fond du menu qui s'ouvre */
  background-color: #0f0f0f !important;   /* Votre couleur de fond */
  border: 1px solid #0f0f0f;              /* Optionnel : couleur de la bordure */
}
[data-block="nav_main"] .dropdown-item:hover { /* Changement de couleur au survol d'un drapeau */
  background-color: #0f0f0f !important;   /* Couleur au survol */
}
/* //////////////////////////////////////////////////////// */
/* //////////////    1. MODE MOBILE (0 à 767px) ///////// */
/* //////////////////////////////////////////////////////// */
@media (max-width: 767.98px) {
  
  /* Force la vraie navbar en haut de l'écran */
  .navbar:not(.navbar-clone) {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; 
    background-color: #0f0f0f !important;
  }
  
  .navbar-collapse#navbarSupportedContent {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Éviter le scroll dans le menu */
  .navbar-collapse {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
  /* Menu des langues ouvert/fermé */
  #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    height: auto;
    transition: margin-bottom 0.25s ease;
  }
  #block-bootstrap-sub-bootstraplanguageswitchercontenu:has(.dropdown-menu.show) {
    margin-bottom: 120px !important;
  }
  /* Alignements structurels du menu mobile déplié */
  .navbar-collapse#navbarSupportedContent.show,
  .navbar-collapse#navbarSupportedContent.collapsing {
    position: relative !important;
    display: block !important; 
    padding-top: 1rem;
  }
  /* À GAUCHE : Menu Principal */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-main-navigation,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-main-navigation {
    width: 50% !important;
    max-width: 50% !important;
    display: block !important;
  }
  /* À DROITE : Se connecter/Se déconnecter/Mon compte */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-account-menu,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-account-menu {
    position: absolute !important;
    top: 1rem; 
    right: 1.75rem;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5;
  }
  /* À DROITE (Milieu) : Créer un compte */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-newaccount,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-newaccount {
    position: absolute !important;
    top: 3.25rem !important; /* Placé juste sous "Se connecter" */
    right: 1.75rem;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5;
  }
  /* À DROITE (Bas) : Bloc Drapeau */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-bootstraplanguageswitchercontenu,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    position: absolute !important;
    top: 9rem; /* Conservé pour laisser la place au bloc nouveau compte */
    right: 0;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5;
  }
  /* Gestion interne du dropdown langue */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-bootstraplanguageswitchercontenu [data-block="nav_main"],
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu [data-block="nav_main"] {
    position: relative !important;
  }
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-bootstraplanguageswitchercontenu .dropdown-menu,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu .dropdown-menu {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    transform: none !important;
  }

  /* Liens du compte empilés à droite */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-account-menu ul,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-account-menu ul,
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-newaccount ul,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-newaccount ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* //////////////////////////////////////////////////////// */
/* ////// 2. MODE TABLETTE INTERMÉDIAIRE (768px à 991px) // */
/* //////////////////////////////////////////////////////// */
@media (min-width: 768px) and (max-width: 991.98px) {

  .navbar:not(.navbar-clone) {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; 
    background-color: #0f0f0f !important;
  }

  .navbar-collapse {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
  }

  .navbar-collapse#navbarSupportedContent.show,
  .navbar-collapse#navbarSupportedContent.collapsing {
    position: relative !important;
    display: block !important; 
    padding-top: 1rem;
  }

  /* Navigation à gauche */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-main-navigation,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-main-navigation {
    width: 50% !important;
    max-width: 50% !important;
    display: block !important;
  }

  /* Se connecter/Se déconnecter/Mon compte > sous le bouton hamburger */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-account-menu,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-account-menu {
    position: absolute !important;
    top: 1rem; 
    right: 3.75%;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5;
  }

  /* Créer un compte */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-newaccount,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-newaccount {
    position: absolute !important;
    top: 3.25rem !important;
    right: 3.75%;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5;
  }

  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-account-menu ul,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-account-menu ul,
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-newaccount ul,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-newaccount ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Drapeau à droite COLLÉ juste sous les liens de compte */
  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-bootstraplanguageswitchercontenu,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    position: absolute !important;
    top: 8rem; 
    right: 0;
    width: 50% !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5;
  }

  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-bootstraplanguageswitchercontenu [data-block="nav_main"],
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu [data-block="nav_main"] {
    position: relative !important;
  }

  .navbar-collapse#navbarSupportedContent.show #block-bootstrap-sub-bootstraplanguageswitchercontenu .dropdown-menu,
  .navbar-collapse#navbarSupportedContent.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu .dropdown-menu {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    transform: none !important;
    z-index: 9999 !important;
  }

  #block-bootstrap-sub-bootstraplanguageswitchercontenu:has(.dropdown-menu.show) {
    margin-bottom: 120px !important;
  }
}

/* //////////////////////////////////////////////////////// */
/* ////// 3. SÉCURITÉS & FIXES COMMUNS MOBILE + TABLETTE // */
/* //////////////////////////////////////////////////////// */
@media (max-width: 991.98px) {
  /* On désactive complètement le clone Headhesive */
  .navbar-clone {
    display: none !important;
  }

  /* On pousse le contenu du site vers le bas pour le fixer sur mobile ET tablette */
  body {
    padding-top: 75px !important; 
  }

  /* Votre blocage du menu d'administration Drupal contextuel */
  #navbarSupportedContent .contextual ul.contextual-links,
  #navbarSupportedContent .contextual-links {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
  }
  #navbarSupportedContent .contextual .trigger {
    display: none !important;
  }
}

/* //////////////////////////////////////////////////////// */
/* ////// 4. RESET TOTAL ORDINATEUR DE BUREAU (>= 992px) // */
/* //////////////////////////////////////////////////////// */
@media (min-width: 992px) {
  .navbar:not(.navbar-clone) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 10 !important;
  }

  body {
    padding-top: 0 !important;
  }

  .navbar-collapse {
    max-height: none !important;
    overflow: visible !important;
  }

  /* 1. Le conteneur qui englobe les blocs */
  .region-nav-main {
    width: 100% !important;
    justify-content: flex-end !important; 
  }

  /* 2. Menu principal : position 1 */
  #block-bootstrap-sub-main-navigation {
    order: 1 !important;
    margin-right: auto !important; /* Pousse les autres blocs vers la droite */
  }

/* 3. Bloc Se connecter/Se déconnecter/Mon compte : position 2 */
  #block-bootstrap-sub-account-menu {
    order: 2 !important;
    position: static !important; 
    width: auto !important;
    margin: 0 0.1rem 0 0 !important; 
    display: flex !important;
    align-items: center !important; /* Corrigé : 'right' n'est pas valide pour align-items */
  }

  #block-bootstrap-sub-account-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* 4. Bloc Créer un compte : position 3 */
  #block-bootstrap-sub-newaccount {
    order: 3 !important;
    position: static !important;
    width: auto !important;
    margin: 0 0rem 0 0 !important; /* Espace avant le drapeau */
    display: flex !important;
    align-items: right !important;
  }

  #block-bootstrap-sub-newaccount ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* 5. Drapeau : position 4 tout au bout à droite */
  #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    order: 4 !important;
    position: relative !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Alignement du dropdown du drapeau */
  #block-bootstrap-sub-bootstraplanguageswitchercontenu .dropdown-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; 
    top: 100% !important;
    right: auto !important;
  }
}

/* //////////////////////////////////////////////////////// */
/* // VITESSE ET FLUIDITÉ DU TEXTE DANS DEPLI DU MENU MOBILE ///// */
/* //////////////////////////////////////////////////////// */
@media (max-width: 991.98px) {

  /* 1. Vitesse et courbe de transition globale du volet noir Bootstrap 5 */
  .navbar-collapse.collapsing {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    padding-top: 0 !important; 
  }

  /* 2. Menu ouvert */
  .navbar-collapse.show {
    max-height: none !important;
    padding-top: 0 !important; 
  }

  /* 3. Décalage vertical des blocs enfants sur mobile/tablette */
  .navbar-collapse#navbarSupportedContent #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    top: 7rem !important; 
  }
    /* Pour les tablettes (768px à 991px), ajustement de la position du drapeau */
  @media (min-width: 768px) {
    .navbar-collapse#navbarSupportedContent #block-bootstrap-sub-bootstraplanguageswitchercontenu {
      top: 7rem !important; 
    }
  }
  /* 4. On cache le texte pendant la transition pour un effet propre */
  .navbar-collapse.collapsing #block-bootstrap-sub-main-navigation,
  .navbar-collapse.collapsing #block-bootstrap-sub-account-menu,
  .navbar-collapse.collapsing #block-bootstrap-sub-newaccount,
  .navbar-collapse.collapsing #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    opacity: 0 !important;
    transition: opacity 0.15s ease-in-out !important;
  }
  /* 5. Apparition progressive du texte à l'ouverture */
  .navbar-collapse.show #block-bootstrap-sub-main-navigation,
  .navbar-collapse.show #block-bootstrap-sub-account-menu,
  .navbar-collapse.show #block-bootstrap-sub-newaccount,
  .navbar-collapse.show #block-bootstrap-sub-bootstraplanguageswitchercontenu {
    animation: fadeInMenuContent 0.35s ease forwards;
  }
}
/* Animation de fondu */
@keyframes fadeInMenuContent {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* ////////////////////////////////////////////////////////// */
/* ///// CHANGEMENT COULEUR DU BOUTON HAMBURGER (BLANC) //// */
/* //////////////////////////////////////////////////////// */
.navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2) !important;
}

/* ///////////////////////////////////////////////////////// */
/* REMPLACEMENT PAR DES ICÔNES FILAIRES ÉLÉGANTES (LUCIDE)  */
/* /////////////////////////////////////////////////////// */

/* 1. Masquer le texte et réinitialiser les états Bootstrap */
#block-bootstrap-sub-account-menu .nav-link,
#block-bootstrap-sub-newaccount .nav-link {
  font-size: 0 !important;
  padding: 0.4rem 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
}

/* 2. Style de base de l'icône (Agrandie de 20% : 1.5rem) */
#block-bootstrap-sub-account-menu .nav-link::before,
#block-bootstrap-sub-newaccount .nav-link::before {
  content: "";
  display: inline-block;
  width: 1.5rem !important;  /* Augmenté de 20% */
  height: 1.5rem !important; /* Augmenté de 20% */
  background-color: #ffffff !important;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 0.2s ease;
}

/* 3. SURVOL / FOCUS / CLIC : Force le JAUNE CHARC (#ffc400) */
#block-bootstrap-sub-account-menu .nav-link:hover,
#block-bootstrap-sub-account-menu .nav-link:focus,
#block-bootstrap-sub-account-menu .nav-link:active,
#block-bootstrap-sub-newaccount .nav-link:hover,
#block-bootstrap-sub-newaccount .nav-link:focus,
#block-bootstrap-sub-newaccount .nav-link:active {
  color: #ffc400 !important;
  background-color: transparent !important;
}

#block-bootstrap-sub-account-menu .nav-link:hover::before,
#block-bootstrap-sub-account-menu .nav-link:focus::before,
#block-bootstrap-sub-account-menu .nav-link:active::before,
#block-bootstrap-sub-newaccount .nav-link:hover::before,
#block-bootstrap-sub-newaccount .nav-link:focus::before,
#block-bootstrap-sub-newaccount .nav-link:active::before {
  background-color: #ffc400 !important; /* Jaune forcé au survol */
}

/* 4. ICÔNE : "Se connecter" (Bouton Power) */
#block-bootstrap-sub-account-menu a[href*="login"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
}
/* Donne la priorité d'affichage au bloc "Se connecter" pour qu'il passe au premier plan */
#block-bootstrap-sub-account-menu {
  position: relative !important;
  z-index: 999 !important;
}

/* 5. ICÔNE : "Créer un compte" */
#block-bootstrap-sub-newaccount a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}

/* 6. ICÔNE : "Mon compte" */
#block-bootstrap-sub-account-menu a[href*="/user"]:not([href*="logout"]):not([href*="login"])::before,
#block-bootstrap-sub-account-menu a[href*="/usager"]:not([href*="logout"]):not([href*="login"])::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* 7. ICÔNE : "Se déconnecter" (Bouton Power) */
#block-bootstrap-sub-account-menu a[href*="logout"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
}
/* ======================================================== */
/* INFOBULLES AU SURVOL (MULTILINGUE ET SANS DRUPAL TWIG)   */
/* ======================================================== */

/* 1. Positionnement relatif du lien */
#block-bootstrap-sub-account-menu .nav-link,
#block-bootstrap-sub-newaccount .nav-link {
  position: relative !important;
}

/* 2. Style du bloc d'infobulle */
#block-bootstrap-sub-account-menu .nav-link::after,
#block-bootstrap-sub-newaccount .nav-link::after {
  position: absolute;
  top: 120%; /* S'affiche sous l'icône */
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  background-color: #111111;
  color: #ffffff;
  font-size: 0.75rem !important; /* Taille de texte lisible */
  font-weight: normal !important;
  line-height: 1;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none; /* Ne gêne pas le clic */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 3. Déclenchement au survol */
#block-bootstrap-sub-account-menu .nav-link:hover::after,
#block-bootstrap-sub-newaccount .nav-link:hover::after {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------- */
/* TEXTES EN FRANÇAIS (html[lang="fr"])                     */
/* -------------------------------------------------------- */
html[lang="fr"] #block-bootstrap-sub-account-menu a[href*="login"]::after {
  content: "Se connecter";
}

html[lang="fr"] #block-bootstrap-sub-newaccount a::after {
  content: "Créer un compte";
}

html[lang="fr"] #block-bootstrap-sub-account-menu a[href*="/user"]:not([href*="logout"]):not([href*="login"])::after,
html[lang="fr"] #block-bootstrap-sub-account-menu a[href*="/usager"]:not([href*="logout"]):not([href*="login"])::after {
  content: "Mon compte";
}

html[lang="fr"] #block-bootstrap-sub-account-menu a[href*="logout"]::after {
  content: "Se déconnecter";
}

/* -------------------------------------------------------- */
/* TEXTES EN ANGLAIS (html[lang="en"])                      */
/* -------------------------------------------------------- */
html[lang="en"] #block-bootstrap-sub-account-menu a[href*="login"]::after {
  content: "Log in";
}

html[lang="en"] #block-bootstrap-sub-newaccount a::after {
  content: "Create account";
}

html[lang="en"] #block-bootstrap-sub-account-menu a[href*="/user"]:not([href*="logout"]):not([href*="login"])::after,
html[lang="en"] #block-bootstrap-sub-account-menu a[href*="/usager"]:not([href*="logout"]):not([href*="login"])::after {
  content: "My account";
}

html[lang="en"] #block-bootstrap-sub-account-menu a[href*="logout"]::after {
  content: "Log out";
}
/* -------------------------------------------------------- */
/* TEXTES EN ESPAGNOL (html[lang="es"])                    */
/* -------------------------------------------------------- */
html[lang="es"] #block-bootstrap-sub-account-menu a[href*="login"]::after {
  content: "Iniciar sesión";
}

html[lang="es"] #block-bootstrap-sub-newaccount a::after {
  content: "Crear una cuenta";
}

html[lang="es"] #block-bootstrap-sub-account-menu a[href*="/user"]:not([href*="logout"]):not([href*="login"])::after,
html[lang="es"] #block-bootstrap-sub-account-menu a[href*="/usager"]:not([href*="logout"]):not([href*="login"])::after {
  content: "Mi cuenta";
}

html[lang="es"] #block-bootstrap-sub-account-menu a[href*="logout"]::after {
  content: "Cerrar sesión";
}

/* -------------------------------------------------------- */
/* TEXTES EN FINNOIS (html[lang="fi"])                      */
/* -------------------------------------------------------- */
html[lang="fi"] #block-bootstrap-sub-account-menu a[href*="login"]::after {
  content: "Kirjaudu sisään";
}

html[lang="fi"] #block-bootstrap-sub-newaccount a::after {
  content: "Luo tili";
}

html[lang="fi"] #block-bootstrap-sub-account-menu a[href*="/user"]:not([href*="logout"]):not([href*="login"])::after,
html[lang="fi"] #block-bootstrap-sub-account-menu a[href*="/usager"]:not([href*="logout"]):not([href*="login"])::after {
  content: "Oma tili";
}

html[lang="fi"] #block-bootstrap-sub-account-menu a[href*="logout"]::after {
  content: "Kirjaudu ulos";
}
/* ///////////////////////////////////////////////// */
/* ///////////////// 2.HERO CARROUSEL ////////////// */
/* ///////////////////////////////////////////////// */
.hero-carousel {
  position: relative;
  z-index: 1;                                         /* PLACEMENT : z petit > loin, z grand > proche */
}
/* //////////////// HAUTEUR DESKTOP //////////////// */
.hero-carousel .carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  width: 100%;                                        /* LONGUEUR ????*/
  height: 580px;                                      /* HAUTEUR ?????*/     
  max-height: 580px;                                  /* HAUTEUR MAX ?????*/  
  overflow: hidden;
}
/* ////////// IMAGES TYPE SLIDER PREMIUM /////////// */
.hero-carousel .carousel-item img {
  width: 100%;                                        /* LONGUEUR ????*/
  height: 100%;                                       /* HAUTEUR ?????*/
  object-fit: cover;                                  /* RECOUVREMENT ?????*/
  object-position: center;                            /* POSITIONNEMENT ?????*/
  display: block;                                     /* ? */
}
/* /////////////// RESPONSIVE DESKTOP ////////////// */
@media (max-width: 991px) {                           /* LONGUEUR MAX ????*/
  .hero-carousel .carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item {
    height: 400px;                                    /* HAUTEUR SUR ORDINATEUR */
  }
}
/* ////////////// RESPONSIVE TABLETTE ////////////// */
@media (max-width: 768px) {                           /* LONGUEUR MAX ????*/
  .hero-carousel .carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item {
    height: 250px;                                    /* HAUTEUR SUR TABLETTE */
  }
}
/* ////////////// RESPONSIVE PORTABLE ////////////// */
@media (max-width: 676px) {                           /* LONGUEUR MAX ????*/
  .hero-carousel .carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item {
    height: 200px;                                    /* HAUTEUR SUR PORTABLE */
  }
}
/* //// DIAPO CARROUSEL TEXTES COUL & PLACEMENTS /// */
/* ***************************************************/
/* **************** DIAPO 1 > TITRE ******************/
/* ***************************************************/
.lien-un {
    color: rgb(0, 0, 0) !important; 
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.6); /* Noir semi-transparent (0.6) */
    padding: 0px 12px;                  /* Espacement interne : haut/bas gauche/droite */
    border-radius: 4px;                 /* Optionnel : arrondit légèrement les coins */    
    transition: background-color 0.3s ease, color 0.3s ease; /* Optionnel : pour un effet fluide */
}
.lien-un:hover { 
    color: rgb(255, 255, 255) !important; 
    background-color: rgb(209, 160, 0); /* <--- AJOUTE LA COULEUR DE TON CHOIX ICI (ex: rouge) */
}
.carousel-item:nth-child(1) .carousel-caption h1 {
    font-family: 'Fraunces Variable', serif;
    font-size: clamp(1.2rem, 7vw, 3rem); 
    font-variation-settings: 'opsz' 90, 'wght' 800, 'SOFT' 10, 'WONK' 1;
    margin-bottom: 1% !important;
}
.carousel-item:nth-child(1) .carousel-caption h6 { 
    font-family: 'Noto Sans Variable', sans-serif;
    font-size: 1.2rem; 
    color: #000000;
    background-color: rgba(255, 255, 255, 0.6); /* semi-transparent (0.6) */
    display: inline-block;               /* Pour que le fond colle au texte */
    padding: 2px 15px;                  /* Espacement interne : haut/bas gauche/droite */
    border-radius: 4px;                 /* Optionnel : arrondit légèrement les coins */
}
/* Placement Desktop */
.carousel-item:nth-child(1) .carousel-caption {
    bottom: 10%;
    left: 20%;
    right: auto;
    text-align: center;
}
/* Placement Téléphone */
@media (max-width: 768px) {
    .carousel-item:nth-child(1) .carousel-caption {
        /* On centre tout sur mobile */
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        bottom: 0%;         /* On remonte un peu le texte */
        padding: 0 15px;    /* Marges de sécurité sur les côtés */
        text-align: center;
    }
    .carousel-item:nth-child(1) .carousel-caption h1 {
        /* On réduit légèrement la taille max pour mobile */
        font-size: clamp(1.3rem, 10vw, 1.8rem);
        margin-bottom: 0 !important;
    }
    .carousel-item:nth-child(1) .carousel-caption h6 {
        /* Le sous-titre doit être plus petit sur téléphone */
        font-size: 1rem;
        margin-top: 0 !important;
    }
}
/* ***************************************************/
/* **************** DIAPO 2 > TITRE ******************/
/* ***************************************************/
.lien-deux {
    color: rgb(0, 0, 0) !important; 
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.6); /* Noir semi-transparent (0.6) */
    padding: 0px 12px !important;                    /* Espacement interne : haut/bas gauche/droite */
    border-radius: 4px;                 /* Optionnel : arrondit légèrement les coins */    
    transition: background-color 0.3s ease, color 0.3s ease; /* Optionnel : pour un effet fluide */
}
.lien-deux:hover { 
    color: rgb(255, 255, 255) !important; 
    background-color: rgb(209, 0, 17); /* <--- AJOUTE LA COULEUR DE TON CHOIX ICI (ex: rouge) */
}
.carousel-item:nth-child(2) .carousel-caption h1 {
    font-family: 'Fraunces Variable', serif;
    font-size: clamp(1.2rem, 7vw, 3rem);
    font-variation-settings: 'opsz' 90, 'wght' 800, 'SOFT' 10, 'WONK' 1;
    margin-bottom: 1% !important;  
}
.carousel-item:nth-child(2) .carousel-caption h6 { 
    font-family: 'Noto Sans Variable', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6); /* Noir semi-transparent (0.6) */
    display: inline-block;               /* Pour que le fond colle au texte */
    padding: 2px 15px;                 /* Espacement interne : haut/bas gauche/droite */
    border-radius: 4px;                 /* Optionnel : arrondit légèrement les coins */
}
/* Placement Desktop */
.carousel-item:nth-child(2) .carousel-caption {
    bottom: 5%;
    left: 40%;
    right: auto;
    text-align: center;
}
/* 📱 Placement Téléphone */
@media (max-width: 768px) {
    .carousel-item:nth-child(2) .carousel-caption {
        /* On centre tout sur mobile */
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        bottom: 0%;         /* On remonte un peu le texte */
        padding: 0 15px;    /* Marges de sécurité sur les côtés */
        text-align: center;
    }
    .carousel-item:nth-child(2) .carousel-caption h1 {
        /* On réduit légèrement la taille max pour mobile */
        font-size: clamp(1.3rem, 10vw, 1.8rem);
        margin-bottom: 0 !important;
    }
    .carousel-item:nth-child(2) .carousel-caption h6 {
        /* Le sous-titre doit être plus petit sur téléphone */
        font-size: 1rem;
        margin-top: 0 !important;
    }
}
/* **************************************************/
/* *************** DIAPO 3 > TITRE ******************/
/* **************************************************/
.lien-trois {
    color: rgb(0, 0, 0) !important; 
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.6); /* Noir semi-transparent (0.6) */
    padding: 0px 12px;                  /* Espacement interne : haut/bas gauche/droite */
    border-radius: 4px;                 /* Optionnel : arrondit légèrement les coins */    
    transition: background-color 0.3s ease, color 0.3s ease; /* Optionnel : pour un effet fluide */
}
.lien-trois:hover { 
    color: rgb(255, 255, 255) !important; 
    background-color: rgb(43, 96, 243); /* <--- AJOUTE LA COULEUR DE TON CHOIX ICI (ex: rouge) */
}
.carousel-item:nth-child(3) .carousel-caption h1 {
    font-family: 'Fraunces Variable', serif;
    font-size: clamp(1.2rem, 7vw, 3rem);
    font-variation-settings: 'opsz' 90, 'wght' 800, 'SOFT' 10, 'WONK' 1;
    margin-bottom: 1% !important;  
}
.carousel-item:nth-child(3) .carousel-caption h6 { 
    font-family: 'Noto Sans Variable', sans-serif;
    font-size: 1.2rem;
    color: #0c0c0c;
    background-color: rgba(255, 255, 255, 0.6); /* Noir semi-transparent (0.6) */
    display: inline-block;               /* Pour que le fond colle au texte */
    padding: 5px 15px;                  /* Espacement interne : haut/bas gauche/droite */
    border-radius: 4px;                 /* Optionnel : arrondit légèrement les coins */
}
/* Placement Desktop */
.carousel-item:nth-child(3) .carousel-caption {
    bottom: 10%;
    left: 20%;
    right: auto;
    text-align: center;
}
/* Placement Téléphone */
@media (max-width: 768px) {
    .carousel-item:nth-child(3) .carousel-caption {
        /* On centre tout sur mobile */
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        bottom: 0%;         /* On remonte un peu le texte */
        padding: 0 15px;    /* Marges de sécurité sur les côtés */
        text-align: center;
    }
    .carousel-item:nth-child(3) .carousel-caption h1 {
        /* On réduit légèrement la taille max pour mobile */
        font-size: clamp(1.3rem, 10vw, 1.8rem);
        margin-bottom: 0 !important;
    }
    .carousel-item:nth-child(3) .carousel-caption h6 {
        /* Le sous-titre doit être plus petit sur téléphone */
        font-size: 1rem;
        margin-top: 0 !important;
    }
}
/* ////////////////// PARALLAX IMAGE //////////////// */
.carousel-item img {
    will-change: transform;                           /* PREPARE LE NAVIGATEUR POUR UNE TRANSFORMATION */
}
/* ///////////////////////////////////////////////// */
/* // FULL WIDTH BLEED (débordement du conteneur) // */
/* ///////////////////////////////////////////////// */
.full-width-bleed {
  position: relative;                                 /*  */
  width: 100vw;                                       /* PLEINE LARGEUR */
  left: calc(50% - 50vw);                             /* DECALE A GAUCHE */
  right: calc(50% - 50vw);                            /* DECALE A DROITE */
  margin: 0 !important;                               /* MARGE EXTÉRIEUR 0 */
  padding: 0 !important;                              /* REMPLISSAGE INTÉRIEUR 0 */
  max-width: 100vw;                                   /* FORCE LE PLEINE ECRAN ET PAS PLUS POUR EVITER LE SCROLL */
  overflow: hidden;                                   /* COUPE CE QUI DEPASSE */
}
/* //// Empêche Bootstrap de casser la largeur ///// */
.full-width-bleed .container,
.full-width-bleed .container-fluid,
.full-width-bleed .row {
  padding: 0 !important;                              /* REMPLISSAGE INTÉRIEUR */
  margin: 0 !important;                               /* MARGE EXTÉRIEUR */
}


/* ///////////////////////////////////////////////// */
/* Si un ancêtre du hero a transform/opacity, on force le hero en bas */
.full-width-bleed.hero-carousel * { transform: none !important;      /* ???????? */
}

/* ///////////////////////////////////////////////// */
/* /////// GRANDE IMAGE ARTICLE AVENTURE /////////// */  /* section avec css "hero-header" > CONTAINER ET hero-image-wrapper > COLONNE */
/* ///////////////////////////////////////////////// */
.hero-header {
  position: relative; 
  width: 100vw; 
  left: calc(50% - 50vw); 
  right: calc(50% - 50vw); 
  padding: 250px 0;   /* Augmente ces valeurs (ex: 280px ou 300px) pour donner plus d'espace vertical à ton image sur ordinateur */
  text-align: center; 
  z-index: 1; 
  overflow: hidden; 
}
/* Cache l’image mais la garde chargée */
.hero-header .hero-image-wrapper img {
  opacity: 0 !important;                             /* opicité entre 0 et 1 (ex : 0.5) */
  width: 100% !important;                               /* en % ou en px */
  height: 100% !important;                              /* en % ou en px*/
  position: absolute;                                 /*  */
}
/* --- COMPORTEMENT ORDINATEUR (Par défaut) --- */
.hero-header {
  background-size: 100% auto;       /* 100% en largeur, la hauteur s'adapte automatiquement */
  background-position: center;        
  background-repeat: no-repeat;       
}

/* --- COMPORTEMENT MOBILE & TABLETTE --- */
/* S'applique sur les écrans inférieurs à 992px (Bootstrap) */
@media (max-width: 991.98px) {
  .hero-header {
    /* L'image fait maintenant 85% de la largeur, le 'auto' conserve les proportions */
    background-size: 85% auto; 
    
    /* Centre parfaitement l'image au milieu de la section */
    background-position: center center; 
    
    /* Réduit le padding pour éviter que la section soit trop haute sur mobile */
    padding: 120px 0; 
  }
}
/* ////////// TEINTE COULEUR IMAGE (OPTION) /////////// */
/*.hero-header::before {*/
/*  content: "";                                        /* OBLIGATOIRE POUR EXISTER */
/*  position: absolute;                                 /*  */
/*  inset: 0;                                           /* RECOUVREMENT */
/*  background: rgba(177, 161, 119, 0.253);           /* FILTRE COULEUR */
/*  z-index: 1;                                         /* 1 > PASSE DEVANT L'IMAGE, MAIS DERRIERE LE TEXTE */
/*}
/* /////// POSITIONNEMENT & COULEUR DU TEXTE ///////// */
.hero-header .block {
  position: relative;                                 /*  */
  top: 60%;                                           /* PLACEMENT PAR RAPPORT AU BAS */
  line-height: 250%;                                   /* augmente ou réduit l'interlignage en nombre / px / % */
  color: #0f0f0f !important;  
  z-index: 2;                                         /*  */
}
.hero-header .field--name-field-categorie-editoriale a {
  font-family: 'Fira Sans', sans-serif;             /* POLICE */
  font-size: 1rem;  
  font-weight: 700;
  color: #0f0f0f !important; /* texte en noir */
}
.hero-header .block-field-blocknodearticlecreated time {
  font-family: 'Fira Sans', sans-serif;             /* POLICE */
  font-size: 1rem;  
  font-weight: 700;
  color: #0f0f0f !important; /* texte en noir */
}
.hero-header .block-field-blocknodearticlefield-name {
  font-family: 'Fira Sans', sans-serif;             /* POLICE */
  font-size: 1rem;  
  font-weight: 700;
  color: #0f0f0f !important; /* texte en noir */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0);        /* OMBRAGE  */
}
/* //////////// ALIGNEMENT NOM & DATE ///////////// */
.hero-header .block-field-blocknodearticlecreated,  /* SELECTION DES BLOCK NOM & DATE */
.hero-header .block-field-blocknodearticlefield-name {
  display: inline-block;                            /* AFFICHAGE EN LIGNE */
  margin-right: 10px;                               /* MARGE DE DROITE (POUR ECARTER LES BLOCK) */
}
/* ///////////////////////////////////////////////// */
/* ////////////////// FIX GLOBAL /////////////////// */
/* ///////////////////////////////////////////////// */
body {
  overflow-x: hidden;                                 /* EMPECHE LE SCROLL HORIZONTAL! (MASQUE LES ELEMENTS QUI SORTENT) */
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ////////////////// 6.EBT-SLICK-SLIDER (SLIDER PUBLICITAIRE) /////////////////// */
/* ////////////////////////////////////////////////////////////////////////////// */
/* 1. Force le conteneur principal à faire la largeur de la colonne */
.col-lg-3 .ebt-block.ebt-slick-slider,
.col-lg-3 .ebt-block.ebt-slick-slider .ebt-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 2. On cible le conteneur de liste de Slick pour s'assurer qu'il ne bave pas */
.col-lg-3 .ebt-slick-slider .slick-list {
    width: 100% !important;
    padding: 0 !important;
}

/* 3. On force la boîte de chaque diapositive (slide) à s'ajuster à la colonne */
.col-lg-3 .ebt-slick-slider .slick-slide > div,
.col-lg-3 .ebt-slick-slider .slide {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. LE CORRECTIF IMAGE : Force l'image à s'étirer à 100% du conteneur parent */
.col-lg-3 .ebt-slick-slider .slide img.img-fluid {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}


/*///////// CORRECTIF REVISÉ POUR COLONNE LG-3 ////////////////*/

/* Aligne les diapositives horizontalement sans déborder de la colonne */
.col-lg-3 .ebt-slick-slider .slick-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important; /* Laisse Slick calculer la largeur globale */
}

/* Force chaque slide à respecter STRICTEMENT la largeur de la colonne .col-lg-3 */
.col-lg-3 .ebt-slick-slider .slick-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
}

/* Masque le surplus horizontal dans la colonne en attendant le chargement JS */
.col-lg-3 .ebt-slick-slider .slick-list {
    overflow: hidden !important;
}