/* Paradoxe — éléments communs à toutes les pages (en-tête, menu mobile, typographie de base).
   Chargé après les styles propres à chaque page. Couleurs : /tokens.css. */
:root{--head:'Alegreya',Georgia,serif}

/* ---------- en-tête commun ---------- */
.site-top{position:sticky;top:0;z-index:40;background:rgba(var(--night-rgb),.94);border-bottom:1px solid var(--line-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-top .st-in{max-width:1240px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:18px}
.site-top .st-mark{display:flex;align-items:center;gap:9px;flex:none;color:var(--parch);text-decoration:none;font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:1.05rem}
.site-top .st-mark svg{width:14px;height:20px;color:var(--gold);flex:none}
.site-top .st-links{display:none;align-items:center;gap:2px;flex:1;min-width:0}
.site-top .st-links a{color:var(--mist);text-decoration:none;font:500 1rem/1 var(--body);padding:9px 11px;border-radius:4px;white-space:nowrap}
.site-top .st-links a:hover{color:var(--parch);background:var(--stone)}
.site-top .st-links a[aria-current]{color:var(--parch);box-shadow:inset 0 -2px 0 var(--gold);border-radius:0}
.site-top .st-sp{flex:1}
.site-top .st-foyer{display:none;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;flex:none}
.site-top .st-foyer button{background:none;border:0;color:var(--mist);font:500 .9rem var(--body);padding:7px 10px;cursor:pointer}
.site-top .st-foyer button+button{border-left:1px solid var(--line-soft)}
.site-top .st-foyer button[aria-pressed="true"]{color:var(--on-gold);background:var(--gold)}
.site-top .st-join{flex:none;background:var(--gold);color:var(--on-gold);text-decoration:none;font:700 .95rem/1 var(--body);padding:10px 15px;border-radius:4px}
.site-top .st-join:hover{background:var(--gold-hi);color:var(--on-gold)}
.site-top :focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

/* menu mobile : <details>, fonctionne sans JavaScript */
.site-top .st-menu{position:relative;flex:none}
.site-top .st-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--parch);font:500 1rem var(--body);padding:9px 10px;border:1px solid var(--line-soft);border-radius:4px}
.site-top .st-menu summary::-webkit-details-marker{display:none}
.site-top .st-menu summary svg{width:18px;height:18px}
.site-top .st-menu[open] summary{border-color:var(--gold)}
.site-top .st-menu .st-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 32px));background:var(--stone);border:1px solid var(--line-soft);border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.55);padding:8px;display:grid;gap:2px}
.site-top .st-menu .st-panel a{color:var(--parch);text-decoration:none;font:500 1.05rem var(--body);padding:11px 12px;border-radius:4px}
.site-top .st-menu .st-panel a:hover,.site-top .st-menu .st-panel a[aria-current]{background:var(--stone-2)}
.site-top .st-menu .st-panel a[aria-current]{box-shadow:inset 3px 0 0 var(--gold)}
.site-top .st-menu .st-panel .st-sub{font-size:.95rem;color:var(--mist);padding-left:24px}
.site-top .st-menu .st-panel hr{border:0;border-top:1px solid var(--line-soft);margin:6px 4px}
.site-top .st-menu .st-panel .st-foyer-m{display:flex;gap:6px;padding:6px 8px 4px}
.site-top .st-menu .st-panel .st-foyer-m button{flex:1;background:var(--night);border:1px solid var(--line-soft);color:var(--parch);font:500 .95rem var(--body);padding:9px;border-radius:4px;cursor:pointer}
.site-top .st-menu .st-panel .st-foyer-m button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.site-top .st-menu .st-panel .st-join-m{background:var(--gold);color:var(--on-gold);font-weight:700;text-align:center;margin-top:4px}
.site-top .st-menu .st-panel .st-join-m:hover{background:var(--gold-hi)}
@media (max-width:560px){.site-top .st-join{display:none}}
@media (min-width:1000px){
  .site-top .st-links{display:flex}
  .site-top .st-sp{display:none}
  .site-top .st-menu{display:none}
}
@media (min-width:1240px){.site-top .st-foyer{display:flex}}

/* ---------- typographie commune des pages outils ---------- */
.eyebrow{font-family:var(--body);font-weight:500;letter-spacing:0;text-transform:none;color:var(--mist);font-size:.95rem}
@media print{.site-top{display:none}}