/* ==========================================================
   Champagne Day - Header allégé
   Objectif :
   - masquer la top bar visuelle en desktop
   - conserver le sélecteur de langue en desktop
   - créer une top bar blanche en mobile / tablette
   - conserver le burger en mobile / tablette
   - burger brun en mobile
   - sélecteur langue brun en mobile
   - masquer burger + sélecteur quand le menu mobile est ouvert
   - ne pas toucher au menu desktop #desk_menu
   ========================================================== */


/* ==========================================================
   Style commun du sélecteur de langue
   ========================================================== */

#toplangues > .selectlangue {
  color: var(--brun) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  background-image: none !important;
  background: none !important;
  position: relative !important;
  padding-left: 18px !important;
}

/* Triangle fermé */
#toplangues > .selectlangue::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-35%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid var(--brun) !important;
}

/* Triangle ouvert vers le haut quand la liste est ouverte */
#toplangues > .selectlangue.op::before {
  transform: translateY(-65%) !important;
  border-top: none !important;
  border-bottom: 6px solid var(--brun) !important;
}

/* La liste déroulante conserve son style d’origine */
#toplangues .langlist {
  background: #353535 !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: 200 !important;
  z-index: 3002 !important;
}

/* Les liens de la dropdown restent blancs */
#toplangues .langlist a {
  color: white !important;
  font-size: 12px !important;
  font-weight: 200 !important;
  text-decoration: none !important;
}

/* Survol des liens dans la dropdown */
#toplangues .langlist a:hover,
#toplangues .langlist a:focus {
  color: var(--champ) !important;
  text-decoration: none !important;
}


/* ==========================================================
   Menu mobile : on le place au-dessus du reste
   ========================================================== */

#mobile_menu {
  z-index: 3000 !important;
}


/* ==========================================================
   Desktop : on masque le header visuel,
   on conserve uniquement le sélecteur de langue
   ========================================================== */

@media (min-width: 992px) {
  #header {
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Masque tous les enfants directs du header sauf #toplangues */
  #header > :not(#toplangues) {
    display: none !important;
  }

  /* Sélecteur de langue conservé en haut à droite */
  #toplangues {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 10px !important;
    right: 22px !important;
    z-index: 2000 !important;
  }
}


/* ==========================================================
   Mobile / tablette : top bar blanche,
   burger conservé, sélecteur conservé
   ========================================================== */

@media (max-width: 991.98px) {
  /* Top bar mobile blanche */
  #header {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    background: white !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2000 !important;
  }

  /* Évite que le haut de la page passe sous la top bar fixe */
  #headimg,
  #page_head {
    margin-top: 56px !important;
  }

  /* On conserve uniquement #toplangues et .desk_head_deco car le burger est dedans */
  #header > :not(#toplangues):not(.desk_head_deco) {
    display: none !important;
  }

  /* Conteneur du burger neutralisé visuellement */
  #header .desk_head_deco {
    display: block !important;
    height: 56px !important;
    min-height: 56px !important;
    width: 100% !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Dans .desk_head_deco, on masque tout sauf le burger */
  #header .desk_head_deco > :not(#openmobile) {
    display: none !important;
  }

  /* Burger conservé dans la top bar blanche */
  #openmobile {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    width: 35px !important;
    height: 35px !important;
    z-index: 2001 !important;
  }

  /* On masque l’image SVG d’origine du burger */
  #openmobile img {
    opacity: 0 !important;
  }

  /* On redessine le burger en CSS, en couleur sombre */
  #openmobile::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 7px !important;
    width: 27px !important;
    height: 20px !important;
    background:
      linear-gradient(var(--brun), var(--brun)) 0 0 / 27px 3px no-repeat,
      linear-gradient(var(--brun), var(--brun)) 0 8px / 27px 3px no-repeat,
      linear-gradient(var(--brun), var(--brun)) 0 16px / 27px 3px no-repeat !important;
  }

  /* Sélecteur de langue conservé dans la top bar blanche */
  #toplangues {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 16px !important;
    right: 22px !important;
    z-index: 2001 !important;
    color: var(--brun) !important;
  }

  /* En mobile, le sélecteur langue est brun */
  #toplangues > .selectlangue {
    color: var(--brun) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    /* background-image: none !important; a supprimer */ 
    background: none !important;
    position: relative !important;
    padding-left: 18px !important;
  }

  /* En mobile, le triangle est brun */
  #toplangues > .selectlangue::before {
    border-top-color: var(--brun) !important;
  }

  #toplangues > .selectlangue.op::before {
    border-bottom-color: var(--brun) !important;
  }

  /* Dropdown langue : fond sombre et liens blancs */
  #toplangues .langlist {
    background: #353535 !important;
    color: white !important;
    z-index: 3002 !important;
  }

  #toplangues .langlist a {
    color: white !important;
  }

  /* Quand le menu mobile est ouvert, on masque le burger */
  body:has(#mobile_menu[style*="display: block"]) #openmobile,
  body:has(#mobile_menu[style*="display:block"]) #openmobile {
    display: none !important;
    visibility: hidden !important;
  }

  /* Quand le menu mobile est ouvert, on masque aussi le sélecteur langue */
  body:has(#mobile_menu[style*="display: block"]) #toplangues,
  body:has(#mobile_menu[style*="display:block"]) #toplangues {
    display: none !important;
    visibility: hidden !important;
  }
}
/* ==========================================================
   Desktop uniquement : logo à gauche du menu
   ========================================================== */

@media (min-width: 992px) {
  #desk_menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #desk_menu::before {
    content: "" !important;
    display: inline-block !important;
    width: 150px !important;
    height: 50px !important;
    margin-right: 30px !important;
    background-image: url("/site/assets/files/1032/logo200.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    flex: 0 0 auto !important;
  }
}

/* ==========================================================
Champagne Day 2026 - Palette monochrome

#1E2242 :
- structure
- titres
- navigation
- liens
- boutons
- bordures
- états actifs
- grands fonds
- textes en gras

#444444 :
- paragraphes
- listes
- contenus éditoriaux

Exceptions :
- #home_head conserve ses couleurs d’origine
- les textes supérieurs du Social Wall restent blancs
- #socwall_content utilise le bleu nuit
========================================================== */

:root {
    --color1: #1E2242;
    --brun: #1E2242;

    --color2: #1E2242;
    --brun_clair: #1E2242;

    --bleu-nuit: #1E2242;
    --texte-courant: #444444;
    --fond-principal: #FFFFFF;
    --fond-secondaire: #F5F5F5;
}


/**==================================*=======================
Hero : remplacement local des anciennes couleurs

Les anciennes variables brunes sont remplacées localement
par le bleu nuit #1E2242 dans #home_head.
*==================================*====================== */

#home_head {
    --color1: #1E2242;
    --brun: #1E2242;
    --color2: #1E2242;
    --brun_clair: #1E2242;
    --champ: #1E2242;
    --lgray: #F2F2F2;
}

/* ==========================================================
Structure générale
========================================================== */

body {
    background: var(--fond-principal);
    color: var(--texte-courant);
}

/* Textes de lecture hors hero */
p:not(#home_head *),
li:not(#home_head *) {
    color: var(--texte-courant);
}

/* Textes en gras hors hero */
strong:not(#home_head *) {
    color: var(--bleu-nuit);
}

/* Titres et éléments structurants hors hero */
h1:not(#home_head *),
h2:not(#home_head *),
h3:not(#home_head *),
h4:not(#home_head *),
h5:not(#home_head *),
h6:not(#home_head *) {
    color: var(--bleu-nuit);
}

/* Classes héritées hors hero */
.brun:not(#home_head *),
.brun_fonce:not(#home_head *),
.brun_clair:not(#home_head *) {
    color: var(--bleu-nuit);
}

.bg_brun:not(#home_head *) {
    background-color: var(--bleu-nuit);
    color: #FFFFFF;
}

.bg_brun:not(#home_head *) p,
.bg_brun:not(#home_head *) li,
.bg_brun:not(#home_head *) strong,
.bg_brun:not(#home_head *) h1,
.bg_brun:not(#home_head *) h2,
.bg_brun:not(#home_head *) h3,
.bg_brun:not(#home_head *) h4,
.bg_brun:not(#home_head *) h5,
.bg_brun:not(#home_head *) h6 {
    color: #FFFFFF;
}

.bg_light:not(#home_head *) {
    background-color: var(--fond-secondaire);
}

/* ==========================================================
Liens hors hero
========================================================== */

a:not(#home_head *) {
    color: var(--bleu-nuit);
}

a:not(#home_head *):hover,
a:not(#home_head *):focus {
    color: var(--bleu-nuit);
    text-decoration: none;
}

/* ==========================================================
Sélection et séparateurs hors hero
========================================================== */

::selection {
    background-color: var(--bleu-nuit);
    color: #FFFFFF;
}

::-moz-selection {
    background-color: var(--bleu-nuit);
    color: #FFFFFF;
}

hr:not(#home_head *) {
    border-top-color: var(--bleu-nuit);
}

/* ==========================================================
Header et sélection des langues
========================================================== */

#toplangues > .selectlangue {
    color: var(--bleu-nuit) !important;
}

#toplangues > .selectlangue::before {
    border-top-color: var(--bleu-nuit) !important;
}

#toplangues > .selectlangue.op::before {
    border-bottom-color: var(--bleu-nuit) !important;
}

#toplangues .langlist {
    background: var(--bleu-nuit) !important;
    color: #FFFFFF !important;
}

#toplangues .langlist a {
    color: #FFFFFF !important;
}

#toplangues .langlist a:hover,
#toplangues .langlist a:focus {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Burger mobile */
#openmobile::before {
    background:
        linear-gradient(var(--bleu-nuit), var(--bleu-nuit)) 0 0 / 27px 3px no-repeat,
        linear-gradient(var(--bleu-nuit), var(--bleu-nuit)) 0 8px / 27px 3px no-repeat,
        linear-gradient(var(--bleu-nuit), var(--bleu-nuit)) 0 16px / 27px 3px no-repeat !important;
}

/* ==========================================================
Menu desktop
========================================================== */

#desk_menu li {
    border-right-color: var(--bleu-nuit);
}

#desk_menu li a {
    color: var(--bleu-nuit);
}

#desk_menu li a:hover,
#desk_menu li a:focus {
    color: var(--bleu-nuit);
    text-decoration: underline;
}

#desk_menu li.active a {
    color: var(--bleu-nuit);
    border-bottom-color: var(--bleu-nuit);
}

/* ==========================================================
Menu mobile
========================================================== */

#closemobile {
    color: var(--bleu-nuit);
}

#closemobile:hover,
#closemobile:focus {
    color: var(--bleu-nuit);
    text-decoration: underline;
}

#menumobile li {
    color: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
}

#menumobile li a {
    color: var(--bleu-nuit);
}

#menumobile li a:hover,
#menumobile li a:focus {
    color: var(--bleu-nuit);
    text-decoration: underline;
}

#mobileshare li,
#mobileshare li a {
    color: var(--bleu-nuit);
}

/* ==========================================================
Boutons hors hero
========================================================== */

button[type="submit"]:not(#home_head *),
.bouton:not(#home_head *),
a.bouton_brun:not(#home_head *),
.small_bouton_brun:not(#home_head *),
.mini_bouton:not(#home_head *) {
    color: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
}

button[type="submit"]:not(#home_head *)::before,
.bouton:not(#home_head *)::before,
a.bouton_brun:not(#home_head *)::before,
.small_bouton_brun:not(#home_head *)::before,
.mini_bouton:not(#home_head *)::before {
    background: var(--bleu-nuit);
}

button[type="submit"]:not(#home_head *):hover,
button[type="submit"]:not(#home_head *):focus,
.bouton:not(#home_head *):hover,
.bouton:not(#home_head *):focus,
a.bouton_brun:not(#home_head *):hover,
a.bouton_brun:not(#home_head *):focus,
.small_bouton_brun:not(#home_head *):hover,
.small_bouton_brun:not(#home_head *):focus,
.mini_bouton:not(#home_head *):hover,
.mini_bouton:not(#home_head *):focus {
    color: #FFFFFF;
}

/* ==========================================================
Contenus, événements et filtres
========================================================== */

.content p,
.inner_contents p,
.heventblock p,
.mapcontent,
.mapcontacts {
    color: var(--texte-courant);
}

.content strong,
.inner_contents strong,
.heventblock strong,
.mapcontent strong,
.mapcontacts strong {
    color: var(--bleu-nuit);
}

.eventsub,
.last_events_row h2,
.evpaves h2,
.evpaves h2 .numev,
#filters_top {
    color: var(--bleu-nuit);
}

.heventblock_int,
.cont_titre {
    border-color: var(--bleu-nuit);
}

#zifilters,
#evmaptop {
    background-color: var(--fond-secondaire);
}

#evmaptop {
    color: var(--bleu-nuit);
    border-top-color: var(--bleu-nuit);
}

.unfiltre {
    color: var(--texte-courant);
    border-color: var(--bleu-nuit);
}

.unfiltre:hover,
.unfiltre:focus,
.unfiltre.active {
    background-color: var(--bleu-nuit);
    color: #FFFFFF;
}

.seeevbutt {
    color: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
}

.seeevbutt:hover,
.seeevbutt:focus {
    background-color: var(--bleu-nuit);
    color: #FFFFFF;
}

/* ==========================================================
Social Wall

La partie supérieure conserve ses textes blancs.
Le contenu #socwall_content utilise le bleu nuit.
========================================================== */

#socwall_top,
#socwall_top p,
#socwall_top li,
#socwall_top strong,
#socwall_top span,
#socwall_top h1,
#socwall_top h2,
#socwall_top h3,
#socwall_top h4,
#socwall_top h5,
#socwall_top h6,
#socwall_top a {
    color: #FFFFFF !important;
}

.container-1600.py-5.socwalltop_row,
.container-1600.py-5.socwalltop_row p,
.container-1600.py-5.socwalltop_row li,
.container-1600.py-5.socwalltop_row strong,
.container-1600.py-5.socwalltop_row span,
.container-1600.py-5.socwalltop_row h1,
.container-1600.py-5.socwalltop_row h2,
.container-1600.py-5.socwalltop_row h3,
.container-1600.py-5.socwalltop_row h4,
.container-1600.py-5.socwalltop_row h5,
.container-1600.py-5.socwalltop_row h6,
.container-1600.py-5.socwalltop_row a {
    color: #FFFFFF !important;
}

/* Le contenu éditorial du Social Wall reste en bleu nuit */
#socwall_content,
#socwall_content p,
#socwall_content li,
#socwall_content strong,
#socwall_content span,
#socwall_content h1,
#socwall_content h2,
#socwall_content h3,
#socwall_content h4,
#socwall_content h5,
#socwall_content h6,
#socwall_content a {
    color: var(--bleu-nuit) !important;
}

#socwall_content a {
    text-decoration: underline;
}

#socwall_content a:hover,
#socwall_content a:focus {
    color: var(--bleu-nuit) !important;
    text-decoration: none;
}

/* ==========================================================
Carte
========================================================== */

.mappicto,
.mapdate,
.mapcontent a,
.mapcontent i,
.mapcontacts a,
.mapcontacts i {
    color: var(--bleu-nuit);
}

h4.mapnom {
    color: var(--bleu-nuit);
}

.mapsite a {
    color: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
}

.mapsite a:hover,
.mapsite a:focus {
    background-color: var(--bleu-nuit);
    color: #FFFFFF;
}

/* ==========================================================
Formulaires
========================================================== */

#submitevent input[type="text"],
#submitevent input[type="email"],
#submitevent select {
    color: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
}

.form-label-group label {
    color: var(--bleu-nuit);
}

.custom-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(30, 34, 66, 0.25);
}

/* ==========================================================
Footer
========================================================== */

footer.pb-2 {
    background: var(--bleu-nuit) !important;
    color: #FFFFFF !important;
}

footer.pb-2 #footer_top {
    display: none !important;
}

footer.pb-2 #footer_grey {
    background: #FFFFFF !important;
    color: var(--bleu-nuit) !important;
}

footer.pb-2 #footer_grey .slogan {
    color: var(--bleu-nuit) !important;
}

footer.pb-2 #footer_bottom {
    background: var(--bleu-nuit) !important;
    color: #FFFFFF !important;
}

footer.pb-2 #footer_bottom,
footer.pb-2 #footer_bottom p,
footer.pb-2 #footer_bottom li,
footer.pb-2 #footer_bottom strong,
footer.pb-2 #footer_bottom span {
    color: #FFFFFF !important;
}

footer.pb-2 #footer_bottom a {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

footer.pb-2 #footer_bottom a:hover,
footer.pb-2 #footer_bottom a:focus {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
/* ==========================================================
HERO - BOUTONS .bouton

Ce bloc cible uniquement les boutons .bouton placés
à l’intérieur de #home_head.

ÉTAT NORMAL
- fond transparent ;
- contour blanc ;
- texte blanc.

ÉTAT HOVER / FOCUS
- déploiement d’un fond bleu nuit #1E2242 ;
- contour blanc conservé ;
- texte blanc conservé.

PARAMÈTRES MODIFIABLES
- padding : dimensions internes ;
- border-radius : arrondi ;
- font-size : taille du texte ;
- transition : vitesse de l’animation ;
- background de ::before : couleur du fond au survol.
========================================================== */

/* Apparence du bouton à l’état normal */
#home_head .bouton {
    display: inline-block;
    padding: 15px 35px;
    border: 1px solid #FFFFFF !important;
    border-radius: 8px;
    color: #FFFFFF !important;
    background: transparent !important;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px !important;
    position: relative;
    z-index: 10;
    overflow: hidden;
    transition:
        color 0.7s,
        border-color 0.7s,
        background-color 0.7s;
    text-align: center;
    text-decoration: none;
}

/* Tous les éléments internes du bouton restent blancs */
#home_head .bouton * {
    color: #FFFFFF !important;
}

/* Fond bleu nuit animé */
#home_head .bouton::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 400%;
    height: 1000%;
    background: #1E2242 !important;
    -webkit-transform:
        translate(-50%, -50%)
        rotate(-45deg)
        scaleX(0);
    transform:
        translate(-50%, -50%)
        rotate(-45deg)
        scaleX(0);
    -webkit-transition: transform 0.7s;
    transition: transform 0.7s;
}

/* Apparence au survol et au focus */
#home_head .bouton:hover,
#home_head .bouton:focus {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    background: transparent !important;
    text-decoration: none;
}

/* Tous les éléments internes restent blancs au survol */
#home_head .bouton:hover *,
#home_head .bouton:focus * {
    color: #FFFFFF !important;
}

/* Déploiement du fond bleu nuit */
#home_head .bouton:hover::before,
#home_head .bouton:focus::before {
    -webkit-transform:
        translate(-50%, -50%)
        rotate(-45deg)
        scaleX(1);
    transform:
        translate(-50%, -50%)
        rotate(-45deg)
        scaleX(1);
}


/* ==========================================================
HERO MOBILE - COMPTE À REBOURS #hsimg_cdown

Objectif :
- fond bleu nuit #1E2242 ;
- chiffres blancs ;
- libellés blancs ;
- séparateurs blancs.

Le compteur est ciblé directement car il peut être placé
en dehors de #home_head dans la structure HTML.
========================================================== */

/* Conteneur du compte à rebours */
#hsimg_cdown {
    background: #1E2242 !important;
    color: #FFFFFF !important;
}

/* Tous les textes et éléments internes restent blancs */
#hsimg_cdown * {
    color: #FFFFFF !important;
}

/* Séparateurs verticaux */
#hsimg_cdown .count_col {
    border-right-color: #FFFFFF !important;
}

/* Aucun séparateur après la dernière colonne */
#hsimg_cdown .count_col:last-child {
    border-right: none !important;
}
/* ==========================================================
HERO DES PAGES INTÉRIEURES - #page_head

Pages concernées notamment :
- How to join ;
- Events ;
- Modal form ;
- toutes les pages utilisant #page_head.

OBJECTIF
- conserver tous les textes du hero en blanc ;
- neutraliser les règles générales en bleu nuit ou gris ;
- conserver les liens et éléments en gras en blanc ;
- conserver les séparateurs en blanc.

Ce bloc doit être placé tout à la fin du CSS afin de rester
prioritaire sur la palette générale.
========================================================== */


/* Couleur blanche du conteneur principal */
#page_head {
    color: #FFFFFF !important;
}


/* Titres du hero */
#page_head h1,
#page_head h2,
#page_head h3,
#page_head h4,
#page_head h5,
#page_head h6 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Paragraphes, listes et textes courants */
#page_head p,
#page_head li,
#page_head span,
#page_head small,
#page_head em,
#page_head b,
#page_head strong {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Liens du hero */
#page_head a,
#page_head a:visited {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Liens au survol et au focus */
#page_head a:hover,
#page_head a:focus {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Classes Bootstrap de texte blanc présentes dans le hero */
#page_head .text-white,
#page_head .text-white * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Séparateurs du hero */
#page_head hr {
    border-color: #FFFFFF !important;
    border-top-color: #FFFFFF !important;
}


/* Boutons éventuels du hero */
#page_head .bouton,
#page_head .himg_butt,
#page_head a.bouton,
#page_head a.himg_butt {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}


/* Contenus internes éventuels des boutons */
#page_head .bouton *,
#page_head .himg_butt * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* Boutons au survol et au focus */
#page_head .bouton:hover,
#page_head .bouton:focus,
#page_head .himg_butt:hover,
#page_head .himg_butt:focus {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}


/* ==========================================================
Sécurisation générale

Cette dernière règle couvre un éventuel élément textuel non
prévu dans les sélecteurs précédents.
========================================================== */

#page_head * {
    color: #FFFFFF !important;
}
/* ==========================================================
HOW TO JOIN - DÉGRADÉ BLEU DES BLOCS DE LA LISTE

ZONE CONCERNÉE
- conteneur .container-fluid.pb-5 ;
- blocs .celeb_item ;
- variantes .item1 à .item6.

OBJECTIF
- remplacer les anciennes bandes brunes latérales ;
- créer une progression verticale du turquoise vers le bleu nuit ;
- conserver le fond gris clair des blocs ;
- conserver la largeur actuelle des bandes ;
- ne pas modifier le contenu des blocs.

PROGRESSION
1. Turquoise #068095
2. Turquoise foncé
3. Bleu pétrole
4. Bleu intermédiaire
5. Bleu profond
6. Bleu nuit #1E2242
========================================================== */


/* ==========================================================
Structure commune des six blocs
========================================================== */

.container-fluid.pb-5 .celeb_item {
    /* Conservation du fond gris clair existant */
    background-color: var(--fond-secondaire, #F5F5F5) !important;

    /* Conservation des bandes à gauche et à droite */
    border-style: solid !important;
    border-width: 0 28px !important;

    /* Transition douce si les couleurs évoluent ultérieurement */
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}


/* ==========================================================
Progression chromatique verticale

Chaque ligne utilise une nuance légèrement plus sombre.
Les bandes gauche et droite utilisent la même couleur afin
de conserver la symétrie du composant.
========================================================== */

/* Bloc 1 : turquoise */
.container-fluid.pb-5 .celeb_item.item1 {
    border-left-color: #068095 !important;
    border-right-color: #068095 !important;
}

/* Bloc 2 : turquoise assombri */
.container-fluid.pb-5 .celeb_item.item2 {
    border-left-color: #08728A !important;
    border-right-color: #08728A !important;
}

/* Bloc 3 : bleu pétrole */
.container-fluid.pb-5 .celeb_item.item3 {
    border-left-color: #0C617D !important;
    border-right-color: #0C617D !important;
}

/* Bloc 4 : bleu intermédiaire */
.container-fluid.pb-5 .celeb_item.item4 {
    border-left-color: #12506F !important;
    border-right-color: #12506F !important;
}

/* Bloc 5 : bleu profond */
.container-fluid.pb-5 .celeb_item.item5 {
    border-left-color: #19385A !important;
    border-right-color: #19385A !important;
}

/* Bloc 6 : bleu nuit */
.container-fluid.pb-5 .celeb_item.item6 {
    border-left-color: #1E2242 !important;
    border-right-color: #1E2242 !important;
}
/* ==========================================================
PAGE EVENTS - FILTRES ET PICTOGRAMMES SVG

STRUCTURE DES SVG
Les fichiers SVG contiennent :
- un fond brun #AC8161 intégré dans l’image ;
- un pictogramme blanc dessiné par-dessus.

OBJECTIFS
- transformer le fond brun #AC8161 en bleu nuit #1E2242 ;
- conserver le dessin du pictogramme en blanc ;
- afficher le fond général du filtre en bleu nuit au hover,
  au focus et lorsque le filtre possède la classe .active ;
- afficher le texte en blanc dans ces mêmes états.

IMPORTANT
Ce bloc remplace toutes les précédentes règles relatives aux
pictogrammes des filtres :
- mask-image ;
- background-color sur ::before ;
- anciens filtres hue-rotate ;
- content: none sur ::before.

Ce bloc doit être placé à la toute fin du fichier CSS.
========================================================== */


/* ==========================================================
1. Apparence générale des filtres
========================================================== */

.unfiltre {
    display: inline-block;
    position: relative !important;
    width: 100%;

    /* Espace réservé au pictogramme */
    padding: 5px 3px 5px 40px !important;

    /*
    Suppression du background-image défini dans le style inline.

    Le même fichier SVG est réaffiché dans ::before afin de
    pouvoir le recolorer sans modifier le texte du filtre.
    */
    background-image: none !important;

    /* Apparence du filtre au repos */
    background-color: transparent !important;
    border: 1px solid #1E2242 !important;
    color: #444444 !important;

    font-weight: 300;
    font-style: italic;
    text-decoration: none !important;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}


/* ==========================================================
2. Conteneur commun des pictogrammes

Le pseudo-élément affiche le fichier SVG d’origine.

Le filtre ci-dessous transforme précisément le brun historique
#AC8161 en bleu nuit #1E2242.

Les parties blanches du SVG restent blanches.
========================================================== */

.unfiltre::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 3px !important;
    top: 50% !important;

    width: 30px !important;
    height: 30px !important;

    transform: translateY(-50%) !important;

    /* Aucun fond CSS ajouté derrière l’image */
    background-color: transparent !important;

    /* Désactivation des anciennes règles de masque */
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;

    /* Affichage du véritable fichier SVG */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 30px 30px !important;

    /*
    Conversion de #AC8161 vers #1E2242.

    Ne pas remplacer ce filtre par l’ancien filtre avec
    brightness(135%), qui produisait le bleu clair visible
    précédemment.
    */
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;

    pointer-events: none !important;

    transition: filter 0.3s ease !important;
}


/* ==========================================================
3. Association de chaque pictogramme à son fichier SVG
========================================================== */

/* Restaurants */
.unfiltre[style*="resto.svg"]::before {
    background-image: url("/site/assets/img/resto.svg") !important;
}

/* Hotels */
.unfiltre[style*="hotel.svg"]::before {
    background-image: url("/site/assets/img/hotel.svg") !important;
}

/* Bars */
.unfiltre[style*="cafe_bar.svg"]::before {
    background-image: url("/site/assets/img/cafe_bar.svg") !important;
}

/* Online */
.unfiltre[style*="virtuel.svg"]::before {
    background-image: url("/site/assets/img/virtuel.svg") !important;
}

/* Wine - Champagne Houses */
.unfiltre[style*="maison.svg"]::before {
    background-image: url("/site/assets/img/maison.svg") !important;
}

/* Wineries */
.unfiltre[style*="vigneron.svg"]::before {
    background-image: url("/site/assets/img/vigneron.svg") !important;
}

/* Cellars */
.unfiltre[style*="cave.svg"]::before {
    background-image: url("/site/assets/img/cave.svg") !important;
}

/* Shops - Stores */
.unfiltre[style*="mag_spe.svg"]::before {
    background-image: url("/site/assets/img/mag_spe.svg") !important;
}

/* Private */
.unfiltre[style*="prive.svg"]::before {
    background-image: url("/site/assets/img/prive.svg") !important;
}

/* Other */
.unfiltre[style*="autres.svg"]::before {
    background-image: url("/site/assets/img/autres.svg") !important;
}

/* All / none */
.unfiltre[style*="tous.svg"]::before {
    background-image: url("/site/assets/img/tous.svg") !important;
}


/* ==========================================================
4. Contenus internes au repos

Les éventuels éléments internes reprennent la couleur
#444444 définie sur le filtre.
========================================================== */

.unfiltre span,
.unfiltre strong,
.unfiltre small,
.unfiltre em,
.unfiltre b {
    color: inherit !important;
}


/* ==========================================================
5. Hover, focus et filtre actif

Dans ces trois états :
- le fond général du filtre devient exactement #1E2242 ;
- le contour reste exactement #1E2242 ;
- le texte devient blanc.
========================================================== */

.unfiltre:hover,
.unfiltre:focus,
.unfiltre.active {
    background-image: none !important;
    background-color: #1E2242 !important;
    border-color: #1E2242 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}


/* ==========================================================
6. Conservation du pictogramme bleu nuit et blanc

Le même filtre est conservé dans tous les états :
- fond intégré du SVG en #1E2242 ;
- dessin du pictogramme en blanc.

Le pictogramme ne change donc pas de nuance lorsque le fond
général du filtre devient bleu.
========================================================== */

/* .unfiltre:hover::before,
.unfiltre:focus::before,
.unfiltre.active::before {
    background-color: transparent !important;

    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important; a supprimer car redondant
}
*/

/* ==========================================================
7. Texte blanc au hover, au focus et à l’état actif
========================================================== */

.unfiltre:hover *,
.unfiltre:focus *,
.unfiltre.active * {
    color: #FFFFFF !important;
}
/* ==========================================================
PAGE EVENTS - LIENS EXPAND / COLLAPSE

OBJECTIFS
- afficher les textes en bleu nuit #1E2242 ;
- remplacer les anciens angles beiges par des traits bleus ;
- conserver le positionnement actuel ;
- couvrir les variantes #collapse_filt, .collapse_cont,
  #expand_filt et .expand_cont.
========================================================== */


/* ==========================================================
1. Apparence commune des liens
========================================================== */

#collapse_filt,
.collapse_cont,
#expand_filt,
.expand_cont {
    color: #1E2242 !important;
    text-decoration: none !important;

    /* Suppression des anciennes images beige */
    background-image: none !important;

    position: absolute;
}


/* ==========================================================
2. Lien Collapse

L’angle est placé à droite du texte :
- ligne horizontale en haut ;
- ligne verticale à droite.
========================================================== */

#collapse_filt,
.collapse_cont {
    padding: 0 12px 2px 0 !important;
}


/* Ligne horizontale supérieure */
#collapse_filt::before,
.collapse_cont::before {
    content: "";
    position: absolute;

    right: 0;
    top: 0;

    width: 20px;
    height: 1px;

    background-color: #1E2242 !important;

    pointer-events: none;
}


/* Ligne verticale droite */
#collapse_filt::after,
.collapse_cont::after {
    content: "";
    position: absolute;

    right: 0;
    top: 0;

    width: 1px;
    height: 20px;

    background-color: #1E2242 !important;

    pointer-events: none;
}


/* ==========================================================
3. Lien Expand

L’angle est placé à gauche du texte :
- ligne horizontale en bas ;
- ligne verticale à gauche.
========================================================== */

#expand_filt,
.expand_cont {
    padding: 0 0 2px 12px !important;
}


/* Ligne horizontale inférieure */
#expand_filt::before,
.expand_cont::before {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 20px;
    height: 1px;

    background-color: #1E2242 !important;

    pointer-events: none;
}


/* Ligne verticale gauche */
#expand_filt::after,
.expand_cont::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 1px;
    height: 20px;

    background-color: #1E2242 !important;

    pointer-events: none;
}


/* ==========================================================
4. Hover et focus

Le texte reste bleu nuit.
Le soulignement permet de signaler l’interaction sans
modifier la couleur des lignes.
========================================================== */

#collapse_filt:hover,
#collapse_filt:focus,
.collapse_cont:hover,
.collapse_cont:focus,
#expand_filt:hover,
#expand_filt:focus,
.expand_cont:hover,
.expand_cont:focus {
    color: #1E2242 !important;
    text-decoration: underline !important;
}

/* ==========================================================
PAGE EVENTS - BANDEAU DE LA CARTE #evmaptop

STRUCTURE HTML
<div id="evmaptop" class="text-left">
    Zoom in and select an event near you
</div>

OBJECTIFS
- remplacer le pictogramme brun mapzoom.svg par un rendu
  bleu nuit #1E2242 ;
- conserver le fond gris clair du bandeau ;
- afficher le texte en bleu nuit ;
- afficher la bordure supérieure en bleu nuit ;
- conserver les dimensions et le positionnement d’origine.

Le SVG est déplacé dans un pseudo-élément afin de pouvoir
appliquer le filtre de recoloration uniquement à l’image.
========================================================== */


/* ==========================================================
1. Apparence générale du bandeau
========================================================== */

#evmaptop {
    position: relative !important;

    /* Espace réservé au pictogramme */
    padding: 3px 10px 3px 40px !important;

    /* Suppression de l’image brune d’origine */
    background-image: none !important;

    /* Conservation du fond clair */
    background-color: var(--fond-secondaire, #F5F5F5) !important;

    /* Texte en bleu nuit */
    color: #1E2242 !important;

    /* Bordure supérieure en bleu nuit */
    border-top: 1px solid #1E2242 !important;
}


/* ==========================================================
2. Pictogramme mapzoom.svg en bleu nuit

Le pseudo-élément reprend le positionnement d’origine :
- largeur et hauteur de 21 px ;
- position horizontale à 10 px ;
- centrage vertical.

Le filtre transforme le brun historique #AC8161 en
bleu nuit #1E2242.
========================================================== */

#evmaptop::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 10px !important;
    top: 50% !important;

    width: 21px !important;
    height: 21px !important;

    transform: translateY(-50%) !important;

    /* Image SVG d’origine */
    background-image: url("/site/assets/img/mapzoom.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 21px 21px !important;
    background-color: transparent !important;

    /* Neutralisation d’éventuelles anciennes règles de masque */
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;

    /* Conversion du brun #AC8161 vers le bleu nuit #1E2242 */
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;

    pointer-events: none !important;
}


/* ==========================================================
3. Sécurisation de la couleur des éléments internes

Cette règle couvre le cas où le bandeau contient
ultérieurement un span, un strong ou un autre élément.
========================================================== */

#evmaptop span,
#evmaptop strong,
#evmaptop small,
#evmaptop em,
#evmaptop b {
    color: #1E2242 !important;
}
/* ==========================================================
MENU MOBILE - PICTOGRAMME HOME, CHEVRONS ET CROIX
Couleur : #1E2242
========================================================== */


/* ==========================================================
1. PICTOGRAMME HOME

Le pictogramme reste dans le background de .mobilemenuhome.
========================================================== */

.mobilemenuhome {
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;
}


/* ==========================================================
2. CHEVRONS DU MENU MOBILE

Le SVG d’origine est supprimé du fond de chaque li, puis
recréé dans ::after afin de le colorer sans filtrer le texte.
========================================================== */

#menumobile li {
    position: relative !important;
    background-image: none !important;
}

#menumobile li::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    right: 15px !important;
    top: 50% !important;

    width: 12px !important;
    height: 44px !important;

    transform: translateY(-50%) !important;

    background-color: #1E2242 !important;
    background-image: none !important;

    -webkit-mask-image: url("/site/assets/img/mobile_arrow.svg") !important;
    mask-image: url("/site/assets/img/mobile_arrow.svg") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: 12px 44px !important;
    mask-size: 12px 44px !important;

    pointer-events: none !important;
}


/* ==========================================================
3. CROIX DE FERMETURE

Le SVG d’origine est supprimé du fond de #closemobile, puis
recréé dans ::before afin de ne pas filtrer le texte.
========================================================== */

#closemobile {
    position: relative !important;
    background-image: none !important;
}

#closemobile::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    top: 50% !important;

    width: 30px !important;
    height: 20px !important;

    transform: translateY(-50%) !important;

    background-color: #1E2242 !important;
    background-image: none !important;

    -webkit-mask-image: url("/site/assets/img/close_cross.svg") !important;
    mask-image: url("/site/assets/img/close_cross.svg") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: left center !important;
    mask-position: left center !important;

    -webkit-mask-size: 30px 20px !important;
    mask-size: 30px 20px !important;

    pointer-events: none !important;
}

/* ==========================================================
PAGE EVENTS - PICTOGRAMMES DE LA LISTE DES ÉVÉNEMENTS

STRUCTURE HTML CIBLÉE
<p class="evpicto brun_clair font-italic text-left">
    <img src="/site/assets/img/prive.svg" alt="Private">
    Private
</p>

OBJECTIFS
- convertir le fond brun #AC8161 des pictogrammes en
  bleu nuit #1E2242 ;
- conserver le dessin blanc présent dans les SVG ;
- appliquer la correction à toutes les catégories
  d’événements affichées dans la liste ;
- conserver les dimensions et l’espacement existants.

Ce bloc cible uniquement les images placées dans .evpicto.
Les autres images du site ne sont pas modifiées.
========================================================== */


/* ==========================================================
1. Recoloration de tous les pictogrammes de la liste
========================================================== */

.evpicto img[src$=".svg"] {
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;
}


/* ==========================================================
2. Sécurisation des dimensions existantes
========================================================== */

.evpicto img[src$=".svg"] {
    width: 30px !important;
    height: 30px !important;
    display: inline-block !important;
    margin: 0 15px 0 0 !important;
    vertical-align: middle !important;
}


/* ==========================================================
3. Couleur du libellé de la catégorie

Exemples :
- Private ;
- Bars ;
- Online ;
- Other ;
- Shop - Store.

Le texte reste en bleu nuit indépendamment de l’ancienne
classe .brun_clair.
========================================================== */

.evpicto,
.evpicto.brun_clair {
    color: #1E2242 !important;
}
/* ==========================================================
PAGE EVENTS - PICTOGRAMMES, MARQUEURS ET CLUSTERS DE LA CARTE

ÉLÉMENTS CIBLÉS

1. Pictogrammes affichés dans les fenêtres de la carte :
   .mappicto img

2. Marqueurs principaux de la carte :
   /site/assets/img/mapmarker.png

3. Clusters Leaflet :
   .marker-cluster
   .marker-cluster-small
   .marker-cluster-medium
   .marker-cluster-large

OBJECTIFS
- convertir le brun historique en bleu nuit #1E2242 ;
- conserver les éléments blancs des images ;
- afficher les clusters en bleu nuit ;
- conserver le nombre d’événements en blanc ;
- ne pas modifier les dimensions et le positionnement
  calculés automatiquement par Leaflet.
========================================================== */


/* ==========================================================
1. Pictogrammes présents dans les contenus de la carte

Exemple :
<div class="mappicto">
    <img src="/site/assets/img/prive.svg" alt="Private">
</div>
========================================================== */

.mappicto img,
.mappicto img[src$=".svg"] {
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;
}


/* ==========================================================
2. Marqueurs principaux de la carte

Structure ciblée :
<img
    src="/site/assets/img/mapmarker.png"
    class="leaflet-marker-icon leaflet-zoom-animated
           leaflet-interactive"
>

Le sélecteur sur src cible précisément mapmarker.png.
========================================================== */

img.leaflet-marker-icon[src="/site/assets/img/mapmarker.png"],
img.leaflet-marker-icon[src$="/mapmarker.png"] {
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;
}


/* ==========================================================
3. Sécurisation des marqueurs générés dynamiquement

Leaflet peut recréer les marqueurs après :
- un déplacement de la carte ;
- un changement de zoom ;
- l’application d’un filtre ;
- le chargement de nouveaux événements.

Le filtre reste applicable grâce au ciblage de la classe
Leaflet et du nom du fichier.
========================================================== */

.leaflet-marker-pane img.leaflet-marker-icon[src$="/mapmarker.png"] {
    filter:
        brightness(68.8108%)
        contrast(270.6003%)
        saturate(31.4052%)
        hue-rotate(212.816deg) !important;
}


/* ==========================================================
4. CLUSTERS LEAFLET

Structure ciblée :
<div class="leaflet-marker-icon marker-cluster
            marker-cluster-small ...">
    <div>
        <span>2</span>
    </div>
</div>

Le cercle extérieur utilise le bleu nuit avec transparence.
Le cercle intérieur utilise exactement #1E2242.
Le nombre reste blanc.
========================================================== */


/* Cercle extérieur commun à tous les clusters */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(30, 34, 66, 0.28) !important;
    background-image: none !important;
}


/* Cercle intérieur commun à tous les clusters */
.marker-cluster > div,
.marker-cluster-small > div,
.marker-cluster-medium > div,
.marker-cluster-large > div {
    background-color: #1E2242 !important;
    background-image: none !important;
    color: #FFFFFF !important;
}


/* Nombre affiché dans le cluster */
.marker-cluster span,
.marker-cluster-small span,
.marker-cluster-medium span,
.marker-cluster-large span {
    color: #FFFFFF !important;
    font-weight: 600;
}


/* ==========================================================
5. Survol et focus des clusters

Le cercle extérieur devient légèrement plus visible.
Le cercle intérieur et le nombre restent inchangés.
========================================================== */

.marker-cluster:hover,
.marker-cluster:focus,
.marker-cluster-small:hover,
.marker-cluster-small:focus,
.marker-cluster-medium:hover,
.marker-cluster-medium:focus,
.marker-cluster-large:hover,
.marker-cluster-large:focus {
    background-color: rgba(30, 34, 66, 0.42) !important;
}


.marker-cluster:hover > div,
.marker-cluster:focus > div,
.marker-cluster-small:hover > div,
.marker-cluster-small:focus > div,
.marker-cluster-medium:hover > div,
.marker-cluster-medium:focus > div,
.marker-cluster-large:hover > div,
.marker-cluster-large:focus > div {
    background-color: #1E2242 !important;
    color: #FFFFFF !important;
}


.marker-cluster:hover span,
.marker-cluster:focus span,
.marker-cluster-small:hover span,
.marker-cluster-small:focus span,
.marker-cluster-medium:hover span,
.marker-cluster-medium:focus span,
.marker-cluster-large:hover span,
.marker-cluster-large:focus span {
    color: #FFFFFF !important;
}

/* ==========================================================
AGE GATE - CORRECTIF COMPLET ET RATIONALISÉ
À placer après toutes les autres règles

Bleu nuit : #1E2242
========================================================== */


/* ==========================================================
1. FOND DU BANDEAU
========================================================== */

#bandeaulegal,
.bandeaulegal {
    background: rgba(30, 34, 66, 0.99) !important;
    background-color: rgba(30, 34, 66, 0.99) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}


/* ==========================================================
2. TEXTES DU BANDEAU EN BLANC

Important :
les liens des CTA ne sont pas ciblés ici afin de ne pas
écraser leur texte bleu au repos.
========================================================== */

#legaltitre,
.legaltitre,
#legalbla,
.legalbla,
#legalblabla,
.legalblabla,
#legalquest,
.legalquest,
#legalbottom,
.legalbottom {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Éléments internes des zones textuelles */
#legaltitre *,
.legaltitre *,
#legalbla *,
.legalbla *,
#legalblabla *,
.legalblabla *,
#legalquest *,
.legalquest *,
#legalbottom *,
.legalbottom * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* ==========================================================
3. BARRE DU TITRE

Remplacement de l’ancienne couleur dorée par le bleu nuit.
========================================================== */

.legaltitre,
#legaltitre {
    background-image: linear-gradient(white) !important;
}


/* ==========================================================
4. VISIBILITÉ DES CONTRÔLES

Aucune couleur n’est appliquée ici pour ne pas interférer
avec les CTA.
========================================================== */

#bandeaulegal input,
#bandeaulegal select,
#bandeaulegal button,
#bandeaulegal a,
.bandeaulegal input,
.bandeaulegal select,
.bandeaulegal button,
.bandeaulegal a {
    visibility: visible !important;
    opacity: 1 !important;
}


/* ==========================================================
5. CHAMPS DE FORMULAIRE ÉVENTUELS
========================================================== */

#bandeaulegal input:not([type="button"]):not([type="submit"]),
#bandeaulegal select,
.bandeaulegal input:not([type="button"]):not([type="submit"]),
.bandeaulegal select {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1E2242 !important;
    -webkit-text-fill-color: #1E2242 !important;
    border-color: #FFFFFF !important;
}


/* ==========================================================
6. CTA DU BANDEAU

État normal :
- fond blanc ;
- texte bleu nuit ;
- bordure blanche.

Hover et focus :
- fond bleu nuit ;
- texte blanc ;
- bordure blanche.
========================================================== */

#legallinks a,
#bandeaulegal #legallinks a,
.bandeaulegal #legallinks a,
#bandeaulegal a.legallinks,
.bandeaulegal a.legallinks,
#bandeaulegal #legalclose a,
.bandeaulegal #legalclose a,
#legalclose a.legallinks,
a#legalclose.legallinks {
    display: inline-block !important;
    padding: 12px 28px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;

    color: #1E2242 !important;
    -webkit-text-fill-color: #1E2242 !important;

    border: 1px solid #FFFFFF !important;
    border-radius: 8px !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;

    visibility: visible !important;
    opacity: 1 !important;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease !important;
}


/* ==========================================================
7. SUPPRESSION DES ANCIENS EFFETS DORÉS
========================================================== */

#legallinks a::before,
#legallinks a::after,
#bandeaulegal #legallinks a::before,
#bandeaulegal #legallinks a::after,
.bandeaulegal #legallinks a::before,
.bandeaulegal #legallinks a::after,
#bandeaulegal a.legallinks::before,
#bandeaulegal a.legallinks::after,
.bandeaulegal a.legallinks::before,
.bandeaulegal a.legallinks::after,
#bandeaulegal #legalclose a::before,
#bandeaulegal #legalclose a::after,
.bandeaulegal #legalclose a::before,
.bandeaulegal #legalclose a::after,
#legalclose a.legallinks::before,
#legalclose a.legallinks::after,
a#legalclose.legallinks::before,
a#legalclose.legallinks::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
}


/* ==========================================================
8. HOVER ET FOCUS DES CTA
========================================================== */

#legallinks a:hover,
#legallinks a:focus,
#bandeaulegal #legallinks a:hover,
#bandeaulegal #legallinks a:focus,
.bandeaulegal #legallinks a:hover,
.bandeaulegal #legallinks a:focus,
#bandeaulegal a.legallinks:hover,
#bandeaulegal a.legallinks:focus,
.bandeaulegal a.legallinks:hover,
.bandeaulegal a.legallinks:focus,
#bandeaulegal #legalclose a:hover,
#bandeaulegal #legalclose a:focus,
.bandeaulegal #legalclose a:hover,
.bandeaulegal #legalclose a:focus,
#legalclose a.legallinks:hover,
#legalclose a.legallinks:focus,
a#legalclose.legallinks:hover,
a#legalclose.legallinks:focus {
    background: #1E2242 !important;
    background-color: #1E2242 !important;
    background-image: none !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    border-color: #FFFFFF !important;
    text-decoration: none !important;
}


/* ==========================================================
9. ÉLÉMENTS INTERNES DES CTA
========================================================== */

#legallinks a *,
#bandeaulegal #legallinks a *,
.bandeaulegal #legallinks a *,
#bandeaulegal a.legallinks *,
.bandeaulegal a.legallinks *,
#bandeaulegal #legalclose a *,
.bandeaulegal #legalclose a *,
#legalclose a.legallinks *,
a#legalclose.legallinks * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
/* ==========================================================
FOOTER MOBILE
- masque le contenu du footer gris
- conserve le sélecteur de langue
- ajoute une marge au-dessus du logo
- centre uniquement le logo existant
========================================================== */

@media (max-width: 991.98px) {

    /* Ne pas mettre display:none sur #footer_grey,
       car il contient également le sélecteur de langue */
    footer.pb-2 #footer_grey {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        overflow: visible !important;
    }

    /* Masque le contenu du footer gris, sauf le sélecteur de langue */
    footer.pb-2 #footer_grey > :not(#toplangues) {
        display: none !important;
    }

    /* Sécurise l’affichage du sélecteur en haut à droite */
    #toplangues {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    footer.pb-2 {
        position: relative !important;
        padding-top: 130px !important;
    }

    footer.pb-2 #footlogo,
    footer.pb-2 .footlogo {
        display: block !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-top: 30px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 991.98px) {
    .heventblock_int {
        border-bottom: 1px solid #1E2242 !important;
    }
}