/*
 * Méga-menu « Nos formations » du catalogue 2027 (inc/megamenu-2027.php, assets/js/megamenu-2027.js).
 * Maquette d'Ophélie : CATALOGUE-2027_gabarit-digital_v2. Couleur de chaque rubrique : --mm27-c.
 */

.new__header .nav-list > .nav-item--mm27 { position: static; }

.nav-item--mm27.is-open .nav-chev { transform: rotate(180deg); }

.mm27 {
  --mm27-fond-actif: rgba(28, 44, 77, 0.09);
  --mm27-trait: #e4e5ea;
  --mm27-lien: #cf6562;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 18px 40px rgba(10, 40, 81, 0.16);
  text-align: left;
  animation: mm27-entree 0.18s ease-out;
}

.mm27[hidden] { display: none; }

@keyframes mm27-entree {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm27 { animation: none; }
}

:where(.mm27) button { font: inherit; color: inherit; }

/* Bootstrap entoure les boutons cliqués à la souris : contour réservé au clavier */
.mm27 button:focus:not(:focus-visible),
.nav-link--mm27:focus:not(:focus-visible) { outline: none; }

.mm27__inner {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 36px 0 28px;
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr) auto;
  /* hauteur de l'écran sous le header (--mm27-haut posé par le script à l'ouverture) */
  max-height: calc(100vh - var(--mm27-haut, 120px));
}

.mm27__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm27__col {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ── Colonne 1 : rubriques ─────────────────────────────────────────────── */
.mm27__col--rubriques {
  padding-right: 24px;
  border-right: 1px solid var(--mm27-trait);
}

.mm27__rubrique {
  display: flex;
  gap: 0.35em;
  width: 100%;
  margin: 0 0 2px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mm27-c) !important;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.mm27__rubrique:hover,
.mm27__rubrique.is-active { background: var(--mm27-fond-actif); }

.mm27__num { flex: none; }

/* ── Colonnes 2 et 3 : la rubrique choisie ─────────────────────────────── */
.mm27__zone {
  grid-column: 2 / 4;
  min-height: 0;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: minmax(0, 1fr);
}

.mm27__rub {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto minmax(0, 1fr);
}

.mm27__rub[hidden] { display: none; }

.mm27__col--groupes {
  grid-row: 2;
  padding: 0 24px 0 32px;
  border-right: 1px solid var(--mm27-trait);
}

.mm27__col--formations {
  grid-row: 2;
  padding: 0 0 0 32px;
}

/* Titre au-dessus des colonnes 2 et 3 : les deux colonnes partent ainsi de la même ligne */
.mm27__titre {
  grid-column: 1 / -1;
  margin: 0 0 22px;
  padding: 0 12px 0 44px;
  color: var(--mm27-c);
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  font-weight: 700;
  line-height: 1.12;
}

.mm27__groupe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111 !important;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.mm27__groupe:hover,
.mm27__groupe.is-active { background: var(--mm27-fond-actif); }

.mm27__chevron { flex: none; }

.mm27__groupe-liste[hidden] { display: none; }

.mm27__sous-titre {
  margin: 0 0 6px;
  padding: 8px 12px 0;
  color: var(--mm27-c);
  font-size: 0.86rem;
  font-weight: 700;
}

.mm27__section {
  margin: 14px 0 4px;
  padding: 0 12px;
  color: #8a8d99;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Formations ────────────────────────────────────────────────────────── */
.mm27__formation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 1px;
  padding: 7px 12px;
  border-radius: 8px;
  color: #1d1d1f !important;
  font-size: 0.86rem;
  line-height: 1.32;
  text-decoration: none !important;
  transition: background-color 0.15s;
}

.mm27__formation:hover,
.mm27__formation:focus-visible { background: var(--mm27-fond-actif); }

.mm27__formation-nom { flex: 1; }

.mm27__meta {
  flex: none;
  display: flex;
  gap: 10px;
  align-items: baseline;
  white-space: nowrap;
  font-size: 0.76rem;
}

.mm27__duree { color: #8a8d99; }

.mm27__prix {
  min-width: 4.2em;
  text-align: right;
  color: var(--mm27-lien);
  font-weight: 700;
}

.mm27__prix--indispo { color: #8a8d99; font-weight: 400; }

/* Rubrique sans sous-rubriques : les formations occupent les colonnes 2 et 3 */
.mm27__rub--plat .mm27__col--groupes {
  grid-column: 1 / -1;
  border-right: 0;
}

.mm27__rub--plat .mm27__col--groupes > .mm27__liste {
  columns: 2;
  column-gap: 40px;
}

.mm27__rub--plat .mm27__liste > li { break-inside: avoid; }

/* ── Pied : liens ──────────────────────────────────────────────────────── */
.mm27__pied {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding-top: 22px;
}

.mm27__pied > :nth-child(2) { padding-left: 32px; }
.mm27__pied > :nth-child(3) { padding-left: 32px; }

.mm27__lien {
  display: inline-block;
  padding: 0 12px;
  color: var(--mm27-lien) !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none !important;
}

.mm27__lien:hover { text-decoration: underline !important; }

.mm27__lien[hidden] { display: none; }

/* Colonne qui défile : fondu en bas tant qu'il reste du contenu à voir (classe posée par le script) */
.mm27__col.is-coupe {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}

/* Focus clavier visible partout dans le panneau */
.mm27 :focus-visible {
  outline: 2px solid var(--mm27-lien);
  outline-offset: 1px;
}

/* Écrans de bureau étroits (le menu laisse la place au menu mobile sous 1025 px) */
@media (max-width: 1280px) {
  .mm27__inner { grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1fr) minmax(0, 1.15fr); }
  .mm27__rubrique { font-size: 1rem; }
  .mm27__col--groupes { padding-left: 20px; }
  .mm27__titre { padding-left: 32px; }
  .mm27__col--formations,
  .mm27__pied > :nth-child(2),
  .mm27__pied > :nth-child(3) { padding-left: 20px; }
}

/* ── Mobile : panneau du menu latéral (ax_menu_2027_render_mobile) ─────── */
.mobile-item--mm27 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.mobile-item--mm27 .mm27__chevron { opacity: 0.8; }

/* La barre d'adresse des mobiles mange le bas d'un 100vh : hauteur visible réelle */
@supports (height: 100dvh) {
  .mobile-drawer { height: 100dvh; }
}

.mm27m {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  color: #1d1d1f;
  text-align: left;
}

.mm27m[hidden],
.mm27m__vue[hidden] { display: none; }

.mm27m :where(button) { font: inherit; color: inherit; }

.mm27m button:focus:not(:focus-visible),
.mm27m__titre:focus:not(:focus-visible),
.mobile-item--mm27:focus:not(:focus-visible) { outline: none; }

.mm27m :focus-visible {
  outline: 2px solid var(--mm27-lien, #cf6562);
  outline-offset: 1px;
}

.mm27m__vue {
  --mm27-lien: #cf6562;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px 32px;
}

.mm27m__vue.is-entree { animation: mm27m-droite 0.22s ease-out; }
.mm27m__vue.is-retour { animation: mm27m-gauche 0.22s ease-out; }

@keyframes mm27m-droite { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes mm27m-gauche { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mm27m__vue.is-entree,
  .mm27m__vue.is-retour { animation: none; }
}

.mm27m__barre {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px 6px;
  padding: 10px 10px 10px 8px;
  background: #fff;
  border-bottom: 1px solid #eceef2;
}

.mm27m__retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0a2851 !important;
  font-weight: 700;
  cursor: pointer;
}

.mm27m__fermer {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0a2851 !important;
  font-size: 1.05rem;
  cursor: pointer;
}

.mm27m__retour:active,
.mm27m__fermer:active { background: rgba(28, 44, 77, 0.09); }

.mm27m__titre {
  margin: 14px 0 10px;
  color: var(--mm27-c, #0a2851);
  font-size: clamp(1.2rem, 5.6vw, 1.45rem);
  font-weight: 800;
  line-height: 1.15;
}

.mm27m__liste {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.mm27m__liste > li { border-bottom: 1px solid #eceef2; }

.mm27m__rubrique {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: transparent;
  color: var(--mm27-c) !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.mm27m__num { flex: none; min-width: 1.5em; }

.mm27m__rubrique .mm27__chevron,
.mm27m__groupe > summary .mm27__chevron {
  flex: none;
  margin-left: auto;
  color: #9aa0ad;
  transition: transform 0.15s;
}

/* Sous-rubriques : dépliées sur place */
.mm27m__groupe > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  color: #111;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.mm27m__groupe > summary::-webkit-details-marker { display: none; }

.mm27m__groupe[open] > summary { color: var(--mm27-c); }
.mm27m__groupe[open] > summary .mm27__chevron { transform: rotate(90deg); }

.mm27m__groupe-corps {
  margin: 0 0 12px 4px;
  padding-left: 10px;
  border-left: 3px solid var(--mm27-c);
}

.mm27m__groupe-corps .mm27__section { margin-top: 10px; padding: 0 8px; }

/* Formations : intitulé, puis durée et prix dessous */
.mm27m .mm27__formation {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0;
  padding: 11px 8px;
  font-size: 0.93rem;
}

.mm27m .mm27__formation:active { background: rgba(28, 44, 77, 0.09); }

.mm27m .mm27__meta { font-size: 0.8rem; }
.mm27m .mm27__prix { min-width: 0; text-align: left; }

.mm27m__lien { display: block; padding: 8px 4px; }