/* En-tête : fondu croisé entre le logo MiPI et le logo ULiège Gembloux.
   Cycle de 12s : ~5s plein pour chaque logo, ~1s de fondu de part et d'autre.
   Le second logo démarre en opacity:0 (état de base) et son animation ne
   prend le relais qu'à mi-cycle : c'est ce qui les met en phase inverse sans
   dupliquer les keyframes.
   ⚠️ La CONTINUITÉ d'une page à l'autre vient de `header-logos.js` (voir ce
   fichier) ; sans JS, l'animation redémarre à chaque page (dégradation
   propre). Sous prefers-reduced-motion, tout se fige sur MiPI. */
/* ⚠️ display:BLOCK (pas inline-block) : le conteneur est un <span>, et
   assets/responsive.css pose `img{max-width:100%}` sans condition. En
   position:absolute les deux <img> sortent du flux, donc un <span> par
   défaut (inline) s'effondre à largeur 0 — et max-width:100% écrase alors
   les logos à 0px, invisibles. `block` lui donne une vraie boîte (width:140px
   explicite) contre laquelle max-width:100% se calcule.
   ⚠️ PAS inline-block : un inline-block se pose sur la LIGNE DE BASE du <a>,
   qui ajoute sous la boîte de 32px la descente de la fonte de l'en-tête
   (line-height 27,2px → ~7,6px). Le <a> passait alors à 40,19px et l'en-tête
   à 85px au lieu des 77,6px de l'ancien logo — « le menu est plus grand »
   (Andrew, 2026-08-06). `block` ne participe pas à la ligne de base : la boîte
   fait exactement ses 32px, l'en-tête retrouve 77,6px (mesuré, = ancien logo).
   ⚠️ La boîte fait 32px de HAUT, PAS la hauteur des logos : c'est EXACTEMENT
   la hauteur de l'ancien logo (`<img style="height:32px">`), pour que
   l'en-tête garde la même hauteur qu'avant. Deux raisons : (1) l'en-tête est
   en `align-items:flex-end`, une boîte plus haute pousse le logo vers le haut
   et fait grandir la barre ; (2) la hauteur de l'en-tête est la constante
   `78px` du `calc(100svh - 78px)` du hero (voir `.hero`) — la faire varier
   rouvrirait une barre blanche/de défilement sur la home. Les logos
   s'affichent PLUS GRANDS que la boîte (40px) et débordent symétriquement via
   `overflow:visible` + centrage absolu (`top:50%` + `translateY(-50%)`), dans
   le padding de l'en-tête (26px/18px), SANS peser sur la mise en page. Ils
   partagent la même ligne médiane → concentriques au fondu, aucun saut.
   ⚠️ La LARGEUR (140px) doit couvrir le plus large des deux à 40px (MiPI
   ≈138px ; ULiège recadré ≈113px) : sinon `img{max-width:100%}` bride la
   largeur et écrase le logo (hauteur fixée mais largeur plafonnée = déformé).
   ⚠️ Taille 40px validée à l'œil (banc de brainstorming) ; ULiège a été
   recadré au ras de son dessin (viewBox), il n'a donc plus besoin d'être plus
   haut que MiPI pour compenser son ancien vide interne. */
.logo-cycle{position:relative;display:block;width:140px;height:32px;overflow:visible;flex-shrink:0}
/* ⚠️ Le -4px recentre le logo dans la BARRE, pas dans sa boîte. La boîte est
   `align-items:flex-end` avec un padding d'en-tête asymétrique (26px haut /
   18px bas), donc son centre tombe (26-18)/2 = 4px SOUS le centre de la barre
   (mesuré : boîte mid 42,6 vs barre mid 38,3). Sans ce décalage le logo paraît
   posé trop bas (signalé par Andrew, 2026-08-06). On ne touche ni la boîte
   (32px) ni le padding → hauteur d'en-tête inchangée. */
.logo-cycle img{position:absolute;left:0;top:50%;transform:translateY(calc(-50% - 4px));width:auto;object-fit:contain;display:block}
.logo-cycle .lc-mipi{height:40px;animation:lc-fade-a 12s ease-in-out infinite}
.logo-cycle .lc-uliege{height:40px;opacity:0;animation:lc-fade-b 12s ease-in-out infinite}

@keyframes lc-fade-a{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes lc-fade-b{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .logo-cycle .lc-mipi{animation:none;opacity:1}
  .logo-cycle .lc-uliege{animation:none;opacity:0}
}