/* ============================================================
   EOA — Refonte du header (identité carrée UdeM)
   - Contours carrés, chevron « › » unique sur les items à sous-menu
   - Section active = onglet plein bleu marine
   - Immersion : header transparent au-dessus du hero sur l'accueil,
     retour au blur au scroll (+ swap logo blanc/couleur)
   - Mobile : panneau foncé, chevron par ligne
   ============================================================ */

:root{
  --eoa-navy:#0b113a;
  --eoa-blue:#0057ac;
  --eoa-yellow:#ffca40;
  --eoa-orange:#f04e24;
  /* Teintes claires autorisées (charte UdeM) pour les fonds survol/actif */
  --eoa-blue-tint:#e5f0f8;   /* bleu clair officiel */
  --eoa-pink-tint:#fee1de;   /* rose clair autorisé (alternative) */
  /* Chevron du site (icône Phosphor CaretRight) — utilisé en mask pour rester
     recolorable via currentColor (marine, blanc en immersion, bleu si actif). */
  --eoa-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
}

/* Groupe sticky/blur : plus de hauteur (présence) + transitions douces */
header .blur-background{
  /* !important : le bloc header porte un style inline padding-top/bottom:0 */
  padding-top: 15px !important;
  padding-bottom: 10px !important;
  transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}

/* ---- Signature UdeM : marque (mask, recolorable) | École… + sous-titre ---- */
.eoa-brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
  color: var(--eoa-navy);
  /* Révélation gauche → droite de TOUTE la signature (logo + texte) au chargement */
  animation: eoa-mark-reveal .8s cubic-bezier(.22,1,.36,1) both;
}
.eoa-brand__mark{
  display:block;
  width:140px; height:62px;
  /* Version officielle deux-tons : écusson UM bleu + « Université de Montréal » noir */
  background: url(udem-mark-color.svg) no-repeat left center;
  background-size: contain;
  flex-shrink:0;
}
@keyframes eoa-mark-reveal{
  from{ clip-path: inset(0 100% 0 0); opacity:0; }
  60% { opacity:1; }
  to  { clip-path: inset(0 0 0 0);   opacity:1; }
}

/* Version inline du SVG (posée par header.js) : on coupe le background-image
   et on fait remplir la marque par le SVG. Permet d'animer l'écusson à part. */
.eoa-brand__mark.is-inlined{ background-image: none !important; }
.eoa-brand__mark.is-inlined svg{ display:block; width:100%; height:100%; }

/* Animation complémentaire de l'écusson (le tracé bleu .innerLogo) : le reste de
   la signature balaie de gauche à droite (eoa-mark-reveal) ; l'écusson, lui, fait
   un « pop » (léger zoom + fondu) juste au moment où le balayage l'atteint. */
.eoa-brand__mark.is-inlined svg{ display:block; }
.eoa-brand__mark.is-inlined .innerLogo{
  transform-box: fill-box;
  transform-origin: center;
  /* Le SVG est inline dès le rendu (PHP) → animation déterministe sur la timeline
     de chargement, coordonnée avec le balayage. Zoom SEUL (pas d'opacity) : l'écusson
     APPARAÎT petit et grandit doucement jusqu'à sa taille normale, en contraste avec
     le balayage gauche→droite. Lent + ease-out = fluide. */
  animation: eoa-crest-in .9s cubic-bezier(.22,1,.36,1) .6s both;
}
@keyframes eoa-crest-in{
  from{ transform: scale(.5); }
  to  { transform: scale(1); }
}
.eoa-brand__sep{
  /* Filet fin (1px) avec fondu vertical aux extrémités = plus léger et moderne
     qu'un trait plein. Bleu UdeM sur le header clair ; blanc en immersion (voir plus bas). */
  width:1px; height:34px;
  background: linear-gradient(to bottom, transparent, var(--eoa-blue) 22%, var(--eoa-blue) 78%, transparent);
  opacity:.55;
  border-radius:1px;
  flex-shrink:0;
}
.eoa-brand__text{ display:flex; flex-direction:column; line-height:1.12; }
.eoa-brand__title{
  font-family:"Figtree", sans-serif;
  font-weight:550;
  font-size:1.1rem;
  color: var(--eoa-navy);
}
.eoa-brand__sub{
  font-size:.82rem;
  letter-spacing:.01em;
  color: var(--eoa-blue);
  margin-top:2px;
}

/* ---- Items : fond au survol arrondi, sans soulignement ---- */
header .wp-block-navigation-item__content{
  border-radius:7px;
  padding:.5em .8em;
  text-decoration:none !important;   /* retire le soulignement du thème au survol */
  transition: background-color .18s ease, color .18s ease;
}
header .wp-block-navigation-item__content:hover{ background: var(--eoa-blue-tint); }

/* ---- Chevron SVG unique (caret natif masqué) ---- */
header .wp-block-navigation__submenu-icon{ display:none !important; }
header .wp-block-navigation-submenu > .wp-block-navigation-item__content::after{
  content:"";
  display:inline-block;
  width:.72em; height:.72em;
  margin-left:.4em;
  background-color: currentColor;
  -webkit-mask: var(--eoa-chevron) no-repeat center / contain;
  mask: var(--eoa-chevron) no-repeat center / contain;
  opacity:.6;
  flex-shrink:0;
}

/* ---- Sous-menus (dropdown) carrés ---- */
header .wp-block-navigation__submenu-container{
  border-radius:4px !important;
  border:1px solid rgba(11,17,58,.10);
  box-shadow:0 14px 34px rgba(11,17,58,.16);
  padding:.3rem;
}
/* Éléments du dropdown : label à gauche, chevron « › » à droite, séparateur discret */
header .wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child){
  border-bottom:1px solid rgba(11,17,58,.08);
}
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5em;
  border-radius:3px;
  padding:.6em .7em;
}
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{
  content:"";
  display:inline-block;
  width:.66em; height:.66em;
  background-color: currentColor;
  -webkit-mask: var(--eoa-chevron) no-repeat center / contain;
  mask: var(--eoa-chevron) no-repeat center / contain;
  opacity:.45;
  flex-shrink:0;
}
/* Texte des sous-menus TOUJOURS foncé (le fond du dropdown est blanc) —
   évite le texte blanc sur blanc en immersion */
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
header .wp-block-navigation__submenu-container .wp-block-navigation-item__label{
  color: var(--eoa-navy) !important;
}

/* ---- Section active (item de 1er niveau) = fond subtil arrondi (même esprit que le survol) ---- */
/* Ollie stylise déjà la page courante (option « active = boîte ») avec un fond
   #e5f0f8 — MAIS avec un padding de 15px qui n'existe que sur `current-menu-item`
   (page exacte), pas sur une sous-page (`current-menu-ancestor`). Résultat : la
   pastille paraissait plus grosse sur /etudes/ que sur /etudes/sous-page/.
   On se contente donc de ramener le padding au format des autres items. */
header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content{
  padding: .5em .8em !important;
}
/* Pastille active pour la sous-page (`current-menu-ancestor`) qu'Ollie ne colore
   pas : on applique la même teinte #e5f0f8 via notre classe JS `eoa-active-section`. */
header .wp-block-navigation__container > li.eoa-active-section > .wp-block-navigation-item__content{
  background: var(--eoa-blue-tint) !important;
  padding: .5em .8em !important;
}
/* Sous-page active dans le dropdown (ex. « Services ») : texte accentué en bleu UdeM */
header .wp-block-navigation__submenu-container a.eoa-active-sub,
header .wp-block-navigation__submenu-container a.eoa-active-sub .wp-block-navigation-item__label{
  color: var(--eoa-blue) !important;
  font-weight:600;
}

/* ============================================================
   IMMERSION — pages avec hero « cover » (accueil, clinique, …)
   Le header (sticky) reste géré par Ollie ; on le rend transparent
   en haut et on tire le hero sous lui (overlay) sans toucher sa position.
   ============================================================ */

/* Le header flotte (fixed) au-dessus du hero → le hero démarre en haut, sous lui.
   Approche robuste : pas de marge négative fragile sur le cover. */
body.eoa-immersion header .blur-background{
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left:0; right:0;
  z-index: 100;
}
/* On redescend le contenu du hero pour dégager le header (le fond reste derrière) */
body.eoa-immersion .entry-content > .wp-block-cover:first-child > .wp-block-cover__inner-container{
  margin-top: var(--eoa-header-h, 80px);
}

/* État « tout en haut » (classe eoa-top posée en JS) : header transparent */
body.eoa-immersion.eoa-top header .blur-background{
  background: transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
/* Voile plus marqué derrière le header transparent : contraste + effet immersif
   (dégradé sombre en haut du hero qui fond vers l'image) */
body.eoa-immersion.eoa-top header .blur-background::before{
  content:"";
  position:absolute; inset:0;
  height:200%;
  background: linear-gradient(to bottom, rgba(11,17,58,.70), rgba(11,17,58,0));
  z-index:-1; pointer-events:none;
}
/* Menu de 1er niveau en blanc (PAS les sous-menus : fond blanc + texte foncé) */
body.eoa-immersion.eoa-top header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
body.eoa-immersion.eoa-top header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label{ color:#fff; }
body.eoa-immersion.eoa-top header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover{ background: rgba(255,255,255,.14); }
body.eoa-immersion.eoa-top header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after{ color: rgba(255,255,255,.9); }
/* Onglet actif sur le hero : fond blanc translucide (le bleu ne se verrait pas) */
body.eoa-immersion.eoa-top .eoa-active-section > .wp-block-navigation-item__content{ background: rgba(255,255,255,.18) !important; }
/* Signature UdeM en blanc sur le hero (texte via color, marque via filtre) */
body.eoa-immersion.eoa-top .eoa-brand,
body.eoa-immersion.eoa-top .eoa-brand__title{ color:#fff; }
body.eoa-immersion.eoa-top .eoa-brand__sub{ color: rgba(255,255,255,.82); }
body.eoa-immersion.eoa-top .eoa-brand__mark{ filter: brightness(0) invert(1); }
/* Filet séparateur en blanc sur le hero (le bleu ne se verrait pas) */
body.eoa-immersion.eoa-top .eoa-brand__sep{
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.7) 22%, rgba(255,255,255,.7) 78%, transparent);
  opacity:1;
}

/* ============================================================
   MOBILE — signature compacte + overlay foncé lisible
   Le menu passe en hamburger sous ~768px (nav responsive WP).
   ============================================================ */
@media (max-width: 781px){
  /* Overlay plein écran : le backdrop-filter du header crée un « bloc conteneur »
     qui piège l'overlay position:fixed dans la barre (~87px) au lieu du plein
     écran. On neutralise le filtre pendant que le menu est ouvert → l'overlay
     couvre tout le viewport. (Le voile est de toute façon masqué par le panneau.) */
  header .blur-background:has(.wp-block-navigation__responsive-container.is-menu-open){
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Bouton hamburger : pas de carré de fond (rgb 247,247,248), icône plus grande.
     Lignes bleues sur header clair, blanches en immersion (règle plus bas). */
  header .wp-block-navigation__responsive-container-open{
    background: transparent !important;
    padding: 4px;
  }
  header .wp-block-navigation__responsive-container-open svg{
    width: 30px !important;
    height: 30px !important;
  }

  /* Panneau ouvert : fond marine */
  .wp-block-navigation__responsive-container.is-menu-open{
    background: var(--eoa-navy) !important;
  }
  /* Menu long (sous-pages dépliées) → contenu défilable, mais SANS barre visible
     (le scroll se fait au doigt sur mobile). */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
    scrollbar-width: none;          /* Firefox */
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;                  /* Chrome/Safari */
  }
  /* Bouton fermeture (X) : blanc + fond transparent (il avait un carré blanc
     rgb 247,247,248 qui masquait le X). */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
    color:#fff !important;
    background: transparent !important;
  }
  /* Sections (1er niveau) : en JAUNE pour les distinguer des sous-pages.
     Pleine largeur, séparateur. (Les sous-pages sont remises en blanc plus bas.) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    color: var(--eoa-yellow) !important;   /* !important : bat le blanc d'immersion (accueil/clinique) */
    font-weight:600;
    border-radius:0;
    padding:.9em 1.1em;
    border-bottom:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label{
    color: var(--eoa-yellow) !important;
  }
  /* Chevron parent masqué : les sous-menus sont dépliés en permanence (pas de toggle) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content::after{
    display:none !important;
  }
  /* Sous-menus TOUJOURS visibles (dépliés) dans l'overlay : par défaut WP les
     cache (display:none, position:absolute) et ils ne s'ouvrent qu'au clic — or les
     sections sont des liens (taper = naviguer), donc ils ne s'ouvraient jamais.
     On les met à plat, en flux, indentés sous chaque section. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Clinique & Ressources : uniquement un lien vers leur page, pas de sous-pages
     dépliées (contrairement à Études / Recherche / École). */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(> a[href*="/clinique"]) .wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(> a[href*="/ressources"]) .wp-block-navigation__submenu-container{
    display: none !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label{
    color: rgba(255,255,255,.82) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    justify-content: flex-start;
    gap: .55em;
    padding-left: 2.8em;       /* décalées à droite = sous-pages de la section au-dessus */
    font-size: .95em;
    font-weight: 400;          /* poids normal (les sections sont en 600) */
    border-bottom: 0;          /* pas de séparateur sur chaque sous-page */
  }
  /* Chevron « › » DEVANT chaque sous-page (marqueur de sous-élément) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before{
    content:"";
    display:inline-block;
    width:.58em; height:.58em;
    flex-shrink:0;
    background-color: currentColor;
    -webkit-mask: var(--eoa-chevron) no-repeat center / contain;
    mask: var(--eoa-chevron) no-repeat center / contain;
    opacity:.55;
  }
  /* pas de chevron en fin de ligne pour les sous-pages */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{
    display:none;
  }
  /* Section PARENTE (ancêtre) de la page courante : pas de fond (le bleu pâle
     desktop se voyait mal sur le marine) — reste juste jaune, comme les autres. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .eoa-active-section.current-menu-ancestor > .wp-block-navigation-item__content{
    background: transparent !important;
    box-shadow: none !important;
  }
  /* PAGE COURANTE (le lien de la page affichée) = surlignage plein BLEU UdeM +
     texte blanc, à la place du bleu pâle #e5f0f8 délavé. Couvre le cas section
     (current-menu-item de 1er niveau) et le cas sous-page (eoa-active-sub / natif). */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a.eoa-active-sub{
    background: var(--eoa-blue) !important;
    box-shadow: none !important;
    color:#fff !important;
    font-weight:600 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a.eoa-active-sub .wp-block-navigation-item__label{
    color:#fff !important;
  }
}

/* Signature compacte sur téléphone : la version complète fait ~451px de large
   (marque + titre + « Faculté de médecine ») → débordait. On garde la marque +
   le nom de l'unité sur 2 lignes, mais SANS « Faculté de médecine » ni séparateur
   (gain de place). Le titre passe sur 2 lignes via max-width + text-wrap:balance
   → « École d'orthophonie » / « et d'audiologie ». */
@media (max-width: 600px){
  .eoa-brand__sub,
  .eoa-brand__sep{ display:none; }
  .eoa-brand{ gap:.55rem; }
  /* Logo plus généreux (paraissait coincé à 78px), fluide pour tenir sur petits écrans */
  .eoa-brand__mark{
    width: clamp(84px, 26vw, 120px);
    height: auto;
    aspect-ratio: 140 / 62;
  }
  .eoa-brand__title{
    /* Une seule ligne : taille fluide pour tenir à côté du logo sans déborder */
    font-size: clamp(0.6rem, 2.8vw, 1rem);
    line-height:1.2;
    white-space:nowrap;
    max-width:none;
  }
  /* En immersion tout en haut (hero accueil/clinique), le nom de l'école est déjà
     affiché en grand dans le hero → on masque le titre (juste le logo UdeM blanc).
     Il réapparaît dès qu'on scrolle (header coloré, logo en couleur). */
  body.eoa-immersion.eoa-top .eoa-brand__title{ display:none; }
}
/* Hamburger blanc quand le header est transparent sur le hero (immersion) */
body.eoa-immersion.eoa-top header .wp-block-navigation__responsive-container-open{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  header .blur-background,
  header .wp-block-navigation-item__content{ transition:none !important; }
  .eoa-brand{ animation:none !important; clip-path:none !important; opacity:1 !important; }
  .eoa-brand__mark.is-inlined .innerLogo{ animation:none !important; transform:none !important; opacity:1 !important; }
}