/* Menu principal du CDI (extension CDI ULB Navigation 2.6.0, Easy On Web, 15/10/2026).
   Styles du panneau des rubriques marquées « cdi-mm » et du menu plein écran. Couleurs : couleurs globales
   de Divi (rouge #c4001a, rouge du logo #ee011f, roses #fdf3f4 / #fae6e8 / #f1cdd1, gris #5f5557, encre #1c1718). */

:root {
  --cdi-rouge: var(--gcid-primary-color, #c4001a);
  --cdi-rouge-logo: #ee011f;
  --cdi-rose-50: #fdf3f4;
  --cdi-rose-100: #fae6e8;
  --cdi-rose-200: #f1cdd1;
  --cdi-gris: #5f5557;
  --cdi-encre: #1c1718;
  --cdi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cdi-max: 1296px;
}

/* ---------- Barre ---------- */
/* 17/10/2026 (2.8.1) : libellés de la barre dans la police manuscrite des titres (G06, 18 px), demande de Sébastien */
.et_pb_menu .et-menu-nav > ul.et-menu > li > a,
.et_pb_menu .et-menu-nav > ul.et-menu > li > .cdi-mm-bouton { white-space: nowrap; }
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li.cdi-mm { padding-left: 0; padding-right: 0; }
/* Un élément de premier niveau sans panneau (Contact, 16/10/2026) : même boîte que le bouton d'une rubrique, pour rester aligné dans les deux en-têtes (accueil centré sans logo, pages intérieures avec logo), même soulignement sur la page courante */
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; height: 100%; margin: 0 2px; padding: 0 14px !important;
  font-family: "G06", cursive; font-size: 18px; font-weight: 400; line-height: 1; color: var(--cdi-encre); transition: color 0.4s var(--cdi-ease);
}
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--cdi-rouge-logo); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--cdi-ease);
}
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a:hover { color: var(--cdi-rouge); }
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li.current-menu-item:not(.cdi-mm) > a::after { transform: scaleX(1); }
/* Fiches des membres (pages de type de contenu, préfixe #et-boc) : Divi y centre en hauteur le ::after des liens du menu
   (top: 50% !important, translateY), le soulignement apparaissait en travers de « Contact » (17/10/2026) */
.et-db #et-boc .et-l .et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a::after { top: auto !important; transform: scaleX(0); }
.et-db #et-boc .et-l .et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li.current-menu-item:not(.cdi-mm) > a::after { transform: scaleX(1); }
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a:focus-visible { outline: 2px solid var(--cdi-rouge); outline-offset: 2px; }
.cdi-mm-bouton {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; margin: 0 2px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  font-family: "G06", cursive; font-size: 18px; font-weight: 400; line-height: 1; color: var(--cdi-encre); white-space: nowrap;
  transition: color 0.4s var(--cdi-ease);
}
.cdi-mm-bouton::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--cdi-rouge-logo); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--cdi-ease);
}
.cdi-mm-bouton:hover, .cdi-mm-bouton[aria-expanded="true"] { color: var(--cdi-rouge); }
.cdi-mm-bouton[aria-expanded="true"]::after, .cdi-mm-bouton[aria-current]::after { transform: scaleX(1); }
.cdi-mm-bouton:focus-visible { outline: 2px solid var(--cdi-rouge); outline-offset: 2px; }
.cdi-mm-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.4s var(--cdi-ease); }
.cdi-mm-bouton[aria-expanded="true"] .cdi-mm-chevron { transform: translateY(2px) rotate(225deg); }

/* 17/10/2026 (2.8.1) : menu centré sur la page. Divi centre le menu entre le logo (220 px avec sa marge) et la loupe,
   donc 62 px à droite du milieu de la page : décalage compensé dès que la place de part et d'autre le permet.
   Entre 981 et 1239 px, la barre en G06 ne tient pas sur une ligne à côté du logo : libellés et logo resserrés. */
@media (min-width: 1400px) {
  .et_pb_menu--with-logo.et_pb_text_align_center .et_pb_menu__menu { position: relative; left: -62px; }
}
@media (min-width: 981px) and (max-width: 1239px) {
  .et_pb_menu--with-logo .et_pb_menu__logo { width: 150px !important; max-width: 150px; margin-right: 16px; }
  .et_pb_menu--with-logo .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a,
  .et_pb_menu--with-logo .cdi-mm-bouton { padding-left: 8px !important; padding-right: 8px !important; font-size: 16px; }
  .et_pb_menu--with-logo .cdi-mm-bouton::after,
  .et_pb_menu--with-logo .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a::after { left: 8px; right: 8px; }
}
@media (min-width: 981px) and (max-width: 1039px) {
  .et_pb_menu--with-logo .et_pb_menu__logo { width: 130px !important; max-width: 130px; }
  .et_pb_menu--with-logo .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a,
  .et_pb_menu--with-logo .cdi-mm-bouton { padding-left: 6px !important; padding-right: 6px !important; font-size: 15px; }
  .et_pb_menu--with-logo .cdi-mm-bouton::after,
  .et_pb_menu--with-logo .et-menu-nav > ul.cdi-mm-pret > li:not(.cdi-mm) > a::after { left: 6px; right: 6px; }
}

/* ---------- Panneau ---------- */
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li.cdi-mm > ul.cdi-mm-panneau {
  position: fixed !important; top: var(--cdi-mm-haut, 88px) !important; left: 0 !important; right: 0 !important; z-index: 9998;
  display: grid !important; grid-template-columns: 320px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 48px; align-items: start;
  width: auto !important; margin: 0; padding: 40px max(5vw, calc((100vw - var(--cdi-max)) / 2)) 48px !important;
  background: #fff; border: 0; border-top: 1px solid var(--cdi-rose-200);
  box-shadow: 0 0 0 100vmax rgba(28, 23, 24, 0.28); clip-path: inset(0 -100vmax -100vmax -100vmax); /* voile léger sous le panneau, jamais sur l'en-tête */
  text-align: left; opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px);
  transition: opacity 0.4s var(--cdi-ease), transform 0.4s var(--cdi-ease), visibility 0s linear 0.4s;
}
.et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li.cdi-mm.cdi-mm-ouvert > ul.cdi-mm-panneau {
  opacity: 1 !important; visibility: visible !important; transform: none; transition: opacity 0.4s var(--cdi-ease), transform 0.4s var(--cdi-ease), visibility 0s;
}
.et_pb_menu ul.cdi-mm-panneau li { width: auto !important; margin: 0; padding: 0 !important; float: none !important; display: block !important; }
.et_pb_menu ul.cdi-mm-panneau ul.sub-menu {
  position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important;
  width: auto !important; margin: 0; padding: 0 !important; border: 0; box-shadow: none; background: none; transform: none; animation: none !important;
}
.et_pb_menu ul.cdi-mm-panneau a { width: auto !important; padding: 0 !important; background: none !important; }
/* 17/10/2026 (2.8.1) : le réglage de police du module Menu (G06) vise tous les liens ; les panneaux gardent la police du texte */
.et_pb_menu .et-menu-nav ul.cdi-mm-panneau a { font-family: "Roboto", Helvetica, Arial, sans-serif; }
.et_pb_menu ul.cdi-mm-panneau .menu-item-has-children > a::after { display: none !important; }

/* Introduction de la rubrique : illustration, nom, phrase, lien */
.cdi-mm-intro-lien { display: flex !important; flex-direction: column; gap: 10px; text-decoration: none; color: var(--cdi-encre) !important; }
.cdi-mm-intro-lien img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.cdi-mm-intro-titre { font-family: "G06", cursive; font-size: 24px; line-height: 1.15; color: var(--cdi-rouge); white-space: normal; text-wrap: balance; }
.cdi-mm-intro-texte { font-size: 15px; line-height: 1.5; color: var(--cdi-gris); white-space: normal; }
.cdi-mm-intro-action { font-size: 15px; font-weight: 500; color: var(--cdi-rouge); text-decoration: underline; text-decoration-color: var(--cdi-rose-200); text-underline-offset: 4px; }
.cdi-mm-intro-lien:hover .cdi-mm-intro-action { text-decoration-color: var(--cdi-rouge-logo); }

/* Groupes et liens */
.cdi-mm-groupe { display: block; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--cdi-rose-200); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--cdi-gris); }
.et_pb_menu ul.cdi-mm-panneau ul.sub-menu a {
  display: block !important; padding: 9px 0 !important; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--cdi-encre) !important;
  white-space: nowrap; text-decoration: none; transition: color 0.4s var(--cdi-ease), transform 0.4s var(--cdi-ease);
}
.et_pb_menu ul.cdi-mm-panneau ul.sub-menu a:hover { color: var(--cdi-rouge) !important; transform: translateX(3px); opacity: 1; }
.et_pb_menu ul.cdi-mm-panneau ul.sub-menu li.current-menu-item > a { color: var(--cdi-rouge) !important; }
/* Une rubrique sans sous-groupe (lien direct en colonne) */
.et_pb_menu ul.cdi-mm-panneau > li:not(.cdi-mm-intro):not(.cdi-mm-parution-item) > a:only-child { font-size: 15.5px; font-weight: 500; color: var(--cdi-encre) !important; white-space: nowrap; }

/* Dernière parution */
.cdi-mm-parution-lien { display: flex !important; flex-direction: column; gap: 12px; text-decoration: none; color: var(--cdi-encre) !important; }
.cdi-mm-parution-lien img { width: 120px; height: auto; box-shadow: 0 14px 20px -14px rgba(40, 0, 6, 0.5), 0 1px 3px rgba(40, 0, 6, 0.12); }
.cdi-mm-parution-titre { font-size: 15px; font-weight: 500; line-height: 1.4; white-space: normal; }
.cdi-mm-parution-lien:hover .cdi-mm-parution-titre { color: var(--cdi-rouge); }
.et_pb_menu ul.cdi-mm-panneau > li.cdi-mm-parution-item { max-width: 200px; }

/* ---------- Menu plein écran (980 px et moins) ---------- */
@media (max-width: 980px) {
  .et_pb_menu .et_mobile_menu { display: none !important; }
  .et_pb_menu .et_pb_menu_inner_container .et_pb_menu__wrap { flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; gap: 4px; }
  .et_pb_menu .et_pb_menu__wrap .et_pb_menu__search-button { order: -1; width: 44px; height: 44px; justify-content: center; align-items: center; }
  .et_pb_menu .mobile_nav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--cdi-rose-200); border-radius: 4px; cursor: pointer; }
  .et_pb_menu .mobile_nav::after { content: "Menu"; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cdi-encre); }
  .et_pb_menu .mobile_nav .mobile_menu_bar::before { color: var(--cdi-encre) !important; font-size: 26px; }
}
.cdi-tiroir {
  position: fixed; inset: 0; z-index: 100000; overflow-y: auto; background: #fff; color: var(--cdi-encre);
  padding: 0 clamp(20px, 5vw, 48px) 40px; transform: translateX(100%); transition: transform 0.4s var(--cdi-ease);
  font-size: 16px; line-height: 1.5;
}
.cdi-tiroir.est-ouvert { transform: none; }
.cdi-tiroir[hidden] { display: none; }
body.cdi-tiroir-ouvert { overflow: hidden; }
.cdi-tiroir-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 72px; background: #fff; border-bottom: 1px solid var(--cdi-rose-200); }
.cdi-tiroir-marque { font-family: "G06", cursive; font-size: 21px; color: var(--cdi-rouge); }
.cdi-tiroir-fermer { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 4px; background: var(--cdi-rose-50); color: var(--cdi-rouge); cursor: pointer; }
.cdi-tiroir-fermer svg { width: 22px; height: 22px; }
.cdi-tiroir-recherche { display: flex; margin: 24px 0; border: 1px solid var(--cdi-encre); border-radius: 4px; }
.cdi-tiroir-recherche input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--cdi-encre); }
.cdi-tiroir-recherche input:focus { outline: none; }
.cdi-tiroir-recherche:focus-within { outline: 2px solid var(--cdi-rouge); outline-offset: 2px; }
.cdi-tiroir-recherche button { width: 48px; border: 0; background: transparent; color: var(--cdi-encre); cursor: pointer; }
.cdi-tiroir-recherche button svg { width: 20px; height: 20px; }
.cdi-tiroir-ligne, .cdi-tiroir summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 0;
  border-bottom: 1px solid var(--cdi-rose-200); font-family: "G06", cursive; font-size: 20px; font-weight: 400; color: var(--cdi-encre); text-decoration: none; cursor: pointer; list-style: none;
}
.cdi-tiroir summary::-webkit-details-marker { display: none; }
.cdi-tiroir details[open] > summary { color: var(--cdi-rouge); border-bottom-color: transparent; }
.cdi-tiroir-plus { position: relative; flex: none; width: 12px; height: 12px; color: var(--cdi-rouge); }
.cdi-tiroir-plus::before, .cdi-tiroir-plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.4s var(--cdi-ease); }
.cdi-tiroir-plus::after { transform: rotate(90deg); }
.cdi-tiroir details[open] .cdi-tiroir-plus::after { transform: rotate(0deg); }
.cdi-tiroir-contenu { padding: 4px 0 20px; border-bottom: 1px solid var(--cdi-rose-200); }
.cdi-tiroir-intro { display: inline-block; margin: 4px 0 8px; font-weight: 500; color: var(--cdi-rouge); text-decoration: underline; text-decoration-color: var(--cdi-rose-200); text-underline-offset: 4px; }
.cdi-tiroir-groupe { margin: 16px 0 4px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cdi-gris); }
.cdi-tiroir-contenu ul { margin: 0; padding: 0; list-style: none; }
.cdi-tiroir-contenu ul a { display: flex; align-items: center; min-height: 44px; font-size: 16.5px; color: var(--cdi-encre); text-decoration: none; }
@media (min-width: 981px) { .cdi-tiroir { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .cdi-mm-bouton, .cdi-mm-bouton::after, .cdi-mm-chevron, .cdi-tiroir, .cdi-tiroir-plus::after,
  .et_pb_menu .et-menu-nav > ul.cdi-mm-pret > li.cdi-mm > ul.cdi-mm-panneau, .et_pb_menu ul.cdi-mm-panneau ul.sub-menu a { transition: none !important; }
}

/* Loupe de recherche : cible de 44 px (accessibilité, WCAG 2.2) */
.et_pb_menu .et_pb_menu__search-button { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }