/* ===============================
HEADER (Logo & structure et menu)
=============================== */


/* ===============================
   1. GENERAL
=============================== */


.ast-site-identity,
.ast-site-title {
  min-width: 200px;
  flex-shrink: 0;
}

.ast-builder-layout-element {
  flex-shrink: 1;
  min-width: 0;
}

#logo {
  z-index: 10000;
  position: relative;
}

/* ===============================
   2. MENU SECONDAIRE MOBILE
=============================== */
.menu-secondaire-mobile {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  background-color: transparent !important;
  z-index: 9999;
}

@media (max-width: 980px) {
  .menu-secondaire-mobile {
	justify-content: center;
	gap: 10px;
	font-size: 20px;
  }

  .menu-secondaire-mobile a {
	color: #fff;
	text-decoration: none;
  }
  
}
/* ==================================================
   MOBILE – uniformiser taille du drapeau Polylang
   ================================================== */
@media (max-width: 980px) {

  /* Cible précisément l’image Polylang */
  .menu-secondaire-mobile .lang-switcher img,
  .menu-secondaire-mobile img[src*="polylang"] {
	width: 22px !important;
	height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	object-fit: contain !important;
	display: block !important;
  }

  /* Sécurité : alignement vertical */
  .menu-secondaire-mobile .lang-switcher a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
  }
}
/* ===============================
   2.1 MENU PRINCIPAL MOBILE
 (BURGER / CROIX)
 =============================== */

/* Changer le burger en croix à l’ouverture */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
  content: '\4d';
}

/* Configuration du bouton toggle ajouté dynamiquement */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
  width: 44px;
  height: 100%;
  padding: 0px !important;
  max-height: 44px;
  border: none;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 999;
  background-color: transparent;
}

/* Positionnement relatif requis */
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
  position: relative;
}

/* Supprimer le fond des éléments parent */
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
  background-color: transparent;
}

/* Masquer les sous-menus par défaut */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden !important;
}

/* Afficher le sous-menu ouvert */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}

/* Ajustement des icônes toggle */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
  text-align: center;
  opacity: 1;
}

/* Icônes de sous-menu ▼ / ▲ */
.et_mobile_menu li.menu-item-has-children > a::after {
  content: " ▼";
  float: right;
  font-size: 14px;
  color: #800080;
}

.et_mobile_menu li.menu-item-has-children.dt-open > a::after {
  content: " ▲";
}

/* Cache les sous-menus par défaut */
.et_mobile_menu .sub-menu {
  display: none;
}

/* Affiche le sous-menu si parent ouvert (via JS) */
.et_mobile_menu .menu-item-has-children.dt-open > .sub-menu {
  display: block;
}

/* Cache la 2e flèche du toggle */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  background: none !important;
  border: none !important;
  opacity: 0 !important;
}

/* Pointe triangulaire sur sous-menu mobile */
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
  position: absolute;
  right: 5%;
  margin-left: -20px;
  top: -14px;
  width: 0;
  height: 0;
  content: '';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #ffffff;
}

/* Positionnement du bouton burger */
.mobile_menu_bar {
  position: relative;
  display: block;
  bottom: 10px;
  line-height: 0;
}

/* Fond blanc et coins arrondis sur menu mobile */
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
  background-color: #ffffff !important;
  border-radius: 10px;
}

.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}

.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}

.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}

.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
		  text-align: right;
		  width: 100%;
	}


/* ===============================
   3. COMPORTEMENTS RESPONSIVE
=============================== */

/* Cacher menu desktop en mobile */
@media (max-width: 980px) {
  .et-menu {
	display: none !important;
  }

  .menu-secondaire-mobile {
	display: flex !important;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
  }

  .menu-secondaire-mobile a {
	color: #fff;
	text-decoration: none;
  }
}

/* Forcer les sous-menus à s’afficher verticalement */
.et_pb_menu .sub-menu {
  display: block !important;
  width: 100% !important;
  min-width: auto !important;
  max-width: 100% !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Forcer les langues en sous-menu vertical */
.pll-parent-menu-item ul.sub-menu {
  display: block !important;
}

.pll-parent-menu-item ul.sub-menu > li {
  display: block !important;
}

/* Forcer le fond en blanc */
@media (max-width: 980px) {
  body #mobile_menu2.et_mobile_menu,
  body #mobile_menu2.et_mobile_menu ul,
  body #mobile_menu2.et_mobile_menu li,
  body #mobile_menu2.et_mobile_menu .sub-menu {
	background-color: #ffffff !important;
  }
}
/* ===============================
   4. AJUSTEMENTS SUPPLÉMENTAIRES
=============================== */

/* Suppression des fonds blancs sur certains éléments */
.et_mobile_menu,
.et_header_style_split .centered-inline-logo-wrap,
.et_header_style_centered .centered-inline-logo-wrap,
.et_fixed_header {
  background-color: transparent !important;
}

.menu-secondaire-mobile {
  background-color: transparent !important;
  z-index: 9999;
}

#logo {
  z-index: 10000;
  position: relative;
}


/* Forcer les articles à s'adapter en hauteur, même en mode grille */
.et_pb_blog_grid .et_pb_post {
  height: auto !important;
  display: block !important;
  flex: unset !important;
}

/* Conteneur blog : neutraliser le display:flex s'il est défini */
.et_pb_blog_grid {
  display: block !important;
}
/* Forcer la section contenant à ne pas couper son contenu */
.et_pb_section {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}


/* Sous-menu : fond rose clair au survol */
#menu-menu-principal-fr .sub-menu li a:hover {
	background-color: #d992e0 !important; /* rose clair */
	color: #000 !important; /* texte noir pour le contraste */
}

/* Sous-menu : fond rose clair au survol */
#menu-menu-principal-fr .sub-menu a:hover,
#menu-menu-principal-en .sub-menu a:hover {
  background-color: #d992e0 !important; /* rose clair */
  color: #000 !important; /* texte noir pour le contraste */
}

/* menu home en gras */
#menu-menu-principal-en > li:first-child > a,
#menu-menu-principal-fr > li:first-child > a {
  font-weight: 900 !important;
}
#menu-menu-principal-fr > li.current-menu-item > a {
    color: #666 !important; /* gris par défaut */
}
/* Couleur de survol des liens du menu principal et sous-menus */
/* Couleur au repos */
#menu-menu-principal-fr li.menu-item > a,
#menu-menu-principal-en li.menu-item > a {
    color: #666 !important;
}

/* Couleur au survol */
#menu-menu-principal-fr li.menu-item > a:hover,
#menu-menu-principal-fr li.menu-item:hover > a,
#menu-menu-principal-en li.menu-item > a:hover,
#menu-menu-principal-en li.menu-item:hover > a {
    color: #666 !important;
}

/* Intervertir la loupe et le menu burger en mobile/tablette */
.menu-secondaire-mobile a.search-icon i.fa-search {
  color: #800080 !important; /* violet */
}
/* ✅ Image uniforme pour les articles (listing + page interne) */
.post-top-image,
.single-post .et_post_meta_wrapper img {
    width: 100%;
    height: 350px; /* ajuste la hauteur à ton goût : 300 / 350 / 400 */
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
}

/* Corriger le décalage des sous-menus en desktop (notamment Polylang) */
@media (min-width: 981px) {
	.et_pb_menu .sub-menu {
		width: auto !important;
		min-width: 180px !important;
		max-width: none !important;
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
		transform: none !important;
	}

	.et_pb_menu .sub-menu li a {
		padding-left: 10px !important;
	}
}

/* ==================================================
   HEADER DESKTOP – menu à droite + header contenu (max 1400px)
   ================================================== */
@media (min-width: 981px) {

  /* --------------------------------------------------
	 1) On contraint la "row" du header (Divi Theme Builder)
	 -------------------------------------------------- */
  .et-l--header .et_pb_section .et_pb_row,
  .et-l--header .et_pb_row {
	max-width: 1400px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;

	display: flex !important;              /* 🔑 nécessaire pour le flow */
	align-items: center !important;
  }

  /* --------------------------------------------------
	 2) Sécurité si header classique
	 -------------------------------------------------- */
  #main-header .container,
  #main-header .et_menu_container {
	max-width: 1400px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;

	display: flex !important;
	align-items: center !important;
  }

  /* --------------------------------------------------
	 3) Module menu poussé à droite MAIS fluide
	 -------------------------------------------------- */

  .et-l--header .et_pb_menu,
  #main-header .et_pb_menu {
	margin-left: auto !important;   /* 🔑 pousse à droite */
	flex-shrink: 1 !important;      /* 🔑 AUTORISE le retour à gauche */
	min-width: 0 !important;        /* 🔑 empêche le blocage */
  }

  /* --------------------------------------------------
	 4) Conteneur interne du menu = FLUIDE (pas collé bord droit)
	 -------------------------------------------------- */

  .et_pb_menu .et_pb_menu__wrap,
  #top-menu-nav,
  #et-top-navigation {
	display: flex !important;
	justify-content: flex-start !important;  /* 🔑 CRUCIAL : plus flex-end */
	width: auto !important;                  /* 🔑 laisse le menu respirer */
  }

  /* --------------------------------------------------
	 5) UL du menu : aligné à droite mais autorisé à reculer
	 -------------------------------------------------- */

  .et_pb_menu__menu,
  #top-menu {
	margin-left: auto !important;
	white-space: nowrap;     /* évite les retours chelous */
  }
  
  /* ==================================================
	 CORRECTION FLUIDITÉ MENU – autoriser le retour à gauche
	 ================================================== */
  
  /* 1. La row du header doit être en flex */
  .et-l--header .et_pb_row {
	display: flex !important;
	align-items: center !important;
  }
  
  /* 2. Colonne contenant le menu = flexible */
  .et-l--header .et_pb_column:has(.et_pb_menu) {
	display: flex !important;
	justify-content: flex-end !important;
	flex: 1 1 auto !important;        /* 🔑 permet de rétrécir */
	min-width: 0 !important;          /* 🔑 CRUCIAL */
  }
  
  /* 3. Le module menu lui-même */
  .et-l--header .et_pb_menu {
	margin-left: auto !important;     /* reste à droite */
	flex-shrink: 1 !important;        /* 🔑 peut se tasser */
	min-width: 0 !important;
  }
  
  /* 4. Conteneur interne du menu */
  .et-l--header .et_pb_menu__wrap {
	display: flex !important;
	justify-content: flex-end !important;
	width: auto !important;           /* 🔑 plus de 100% */
	min-width: 0 !important;
  }
  
  /* 5. La liste UL */
  .et-l--header .et_pb_menu__menu {
	white-space: nowrap;
	margin-left: auto !important;
  }
}
/* ============================================================
   HEADER LPMMC — base + 3 profils (desktop / tablette / mobile)
   ============================================================ */

/* ✅ Base : évite le "text autosizing" Android */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ✅ Base structure (commune) */
.et-l--header .et_pb_row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;     /* indispensable pour éviter chevauchement */
}

.et-l--header h1,
.et-l--header .juju-site-title{
  white-space: normal !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.et-l--header .et_pb_menu{
  margin-left: auto !important;
}

.et-l--header .et_pb_menu__wrap{
  justify-content: flex-end !important;
}

.et-l--header .et_pb_menu__logo img,
.et-l--header .et_pb_image img{
  height: auto !important;
  width: auto !important;
  display: block;
}

/* ============================================================
   1) DESKTOP (>= 981px)
============================================================ */
@media (min-width: 981px){

  .et-l--header .et_pb_row{
	row-gap: 0px !important;     /* espace titre <-> menu */
  }

  .et-l--header .et_pb_menu__logo img,
  .et-l--header .et_pb_image img{
	max-height: 100px !important;
  }
  
  .et-l--header h1,
  .et-l--header .juju-site-title{
	font-size: 40px !important;   /* ajuste si tu veux */
  }
  .et-l--header .et_pb_menu{
	margin-top: 12px !important;   /* ajuste 8–20px selon rendu */
  }
}

/* ============================================================
   2) TABLETTE (481px -> 980px)
============================================================ */
@media (min-width: 481px) and (max-width: 980px){

  .et-l--header .et_pb_row{
	row-gap: 30px !important;     /* souvent besoin de plus d’air */
  }

  .et-l--header .et_pb_menu__logo img,
  .et-l--header .et_pb_image img{
	max-height: 80px !important;
  }
.et-l--header .et_pb_row{
	  align-items: center !important;   /* on garde centré */
	}
  
	/* On ajuste légèrement le logo */
	.et-l--header .et_pb_menu__logo,
	.et-l--header .et_pb_image{
	  transform: translateY(10px);   /* ajuste 5–15px */
	}
  .et-l--header h1,
  .et-l--header .juju-site-title{
	font-size: 32px !important;
  }
}

/* ============================================================
   3) SMARTPHONE (<= 480px)
============================================================ */
@media (max-width: 480px){

  .et-l--header .et_pb_row{
	row-gap: 12px !important;
  }

  .et-l--header .et_pb_menu__logo img,
  .et-l--header .et_pb_image img{
	max-height: 56px !important;
  }

  .et-l--header h1,
  .et-l--header .juju-site-title{
	font-size: 26px !important;
  }
}