/* Coque commune aux 14 pages : header/nav + footer, dont le markup vient déjà
   de partials/header.php et partials/footer.php (2026-08-12). Le CSS, lui,
   restait copié-collé à l'identique dans les 14 <style> inline (~1,3KB pour le
   header/nav, ~1,9KB pour le footer) : poids non caché, retéléchargé à chaque
   navigation puisqu'il vivait dans le HTML de la page plutôt que dans un
   fichier externe. Chargé juste après assets/tokens.css (même position, même
   raison : les pages doivent pouvoir surcharger ces règles dans leur propre
   <style> inline, qui se charge après ce fichier).
   Ce qui reste par page (n'est PAS ici) :
   - header.site:has(+ #main > .hero) (index.php seul, cf. son <style>)
   - footer.site{margin-top:…} (varie par page : 0 / 8px / 40px / 60px)
   - les 2 ajustements flex-wrap du footer sur news.php */

/* <main id="main"> est ouvert par partials/header.php et fermé par
   partials/footer.php : il enveloppe le contenu propre à chaque page sur les
   14 pages (repère de landmark + cible du lien d'évitement ci-dessous). */
main{display:block}

/* Lien d'évitement clavier : premier élément focusable du <body>, hors écran
   jusqu'au focus. Ne dépend d'aucun token de couleur défini seulement en dark. */
.skip-link{position:absolute;left:8px;top:-56px;z-index:1000;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:8px 14px;font-family:var(--body);font-size:14px;border-radius:4px;transition:top .15s ease}
.skip-link:focus{top:8px;outline:2px solid var(--cyan);outline-offset:2px}

header.site{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);gap:0;padding:0}
header.site .wrap{display:flex;align-items:center;width:100%;padding:16px 0;gap:48px}
nav.main{display:flex;gap:26px;padding-bottom:4px}
nav.main a{font-family:var(--serif);font-size:16px;color:var(--mut);position:relative;padding-bottom:2px}
nav.main a.active{color:var(--ink);border-bottom:1px solid var(--cyan)}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--cyan);transition:right .28s cubic-bezier(.4,0,.2,1)}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{right:0}
nav.main a.active::after{display:none}

/* margin-top:8px est la valeur par défaut (7 des 14 pages) ; les 7 autres la
   surchargent dans leur propre <style> inline (0 / 40px / 60px selon la page). */
footer.site{background:var(--ink);color:#cfd7d8;padding:46px 0 38px;margin-top:8px}
footer.site .top{display:flex;justify-content:space-between;align-items:flex-start}
footer.site .brand2{font-family:var(--serif);font-size:26px;font-weight:600;color:#fff}
footer.site .brand2 b{color:var(--lume)}
footer.site .inst{font-size:14px;color:#8d989a;margin-top:10px;max-width:360px;line-height:1.5}
footer.site nav{display:flex;gap:28px}
footer.site nav a{font-family:var(--serif);font-size:16px;color:#b8c3c4;position:relative;padding-bottom:2px}
footer.site nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--lume);transition:right .28s cubic-bezier(.4,0,.2,1)}
footer.site nav a:hover{color:#fff}
footer.site nav a:hover::after{right:0}
footer.site .copy{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#65716f;margin-top:40px}
footer.site .foot-gl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b8c3c4;transition:color .2s}
footer.site .foot-gl svg{width:16px;height:16px;flex:0 0 auto}
footer.site .foot-gl:hover,footer.site .foot-gl:focus-visible{color:var(--lume);outline:none}
footer.site .foot-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;align-self:stretch;gap:14px}
footer.site .foot-uliege{display:inline-flex}
footer.site .foot-uliege-mark{display:block;width:100px;height:35px;background-color:#b8c3c4;-webkit-mask:url(/images/brand/logo-uliege-gembloux.svg) center/contain no-repeat;mask:url(/images/brand/logo-uliege-gembloux.svg) center/contain no-repeat;transition:background-color .2s}
footer.site .foot-uliege:hover .foot-uliege-mark,footer.site .foot-uliege:focus-visible .foot-uliege-mark{background-color:var(--lume)}
footer.site .foot-uliege:focus-visible{outline:2px solid var(--lume);outline-offset:3px}
