/* MyArk — en-tête et pied de page communs (refonte lisibilité, 05/10/2026).
   HTML rendu par tools/layout.py ; chargé sur toutes les pages éditoriales,
   migrées ou non (injecté par tools/apply_layout.py, après les autres feuilles).
   Les tailles sont explicites : les pages non migrées gardent un body hérité. */

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--carte); border-bottom: 1px solid var(--bord);
  font-family: var(--police-texte); font-size: var(--t-small); line-height: 1.4;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.sh-inner {
  max-width: var(--w-pleine); margin: 0 auto; padding: 0 var(--gouttiere);
  min-height: 64px; display: flex; align-items: center; gap: var(--s-4);
}
.sh-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--cible);
  color: var(--texte); text-decoration: none; flex: none;
}
.sh-brand img { width: 30px; height: 30px; display: block; }
.sh-brand span {
  font-family: var(--police-titre); font-weight: 800; font-size: 1.125rem;
  letter-spacing: var(--suivi-titre);
}
.sh-nav { display: none; align-items: center; gap: var(--s-1); margin-left: auto; }
.sh-nav > a, .sh-more > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible);
  padding: 0 var(--s-3); border-radius: var(--rayon-s);
  font-size: var(--t-small); font-weight: 600; color: var(--texte-2);
  text-decoration: none; cursor: pointer; list-style: none;
}
.sh-more > summary::-webkit-details-marker { display: none; }
.sh-nav > a:hover, .sh-more > summary:hover { color: var(--texte); background: var(--subtil); }
.sh-nav > a[aria-current="page"], .sh-more.is-current > summary {
  color: var(--lagune-fort); background: var(--lagune-teinte);
}
.sh-chevron { font-size: 0.6875rem; transition: transform .15s ease; }
.sh-more[open] .sh-chevron { transform: rotate(180deg); }
.sh-more { position: relative; }
.sh-panel {
  position: absolute; right: 0; top: calc(100% + 6px); width: 300px;
  margin: 0; padding: var(--s-2); list-style: none;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-l);
  box-shadow: var(--ombre);
}
.sh-panel a, .sh-menu-panel a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: var(--cible); padding: var(--s-2) var(--s-3); border-radius: var(--rayon-s);
  color: var(--texte); text-decoration: none; font-size: var(--t-small); font-weight: 600;
}
.sh-panel a small { font-size: var(--t-caption); font-weight: 400; color: var(--texte-2); }
.sh-panel a:hover, .sh-menu-panel a:hover { background: var(--subtil); }
.sh-panel a[aria-current="page"], .sh-menu-panel a[aria-current="page"] {
  background: var(--lagune-teinte); color: var(--lagune-fort);
}
.sh-cta, .sh-cta:visited {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: var(--cible); padding: 0 var(--s-4); border-radius: var(--rayon-m);
  margin-left: auto;
  background: var(--miel); color: #0A2E29; font-size: var(--t-small); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.sh-cta:hover { background: #F0B254; color: #0A2E29; }
.sh-menu { position: static; flex: none; }
.sh-menu > summary {
  display: grid; place-items: center; width: var(--cible); height: var(--cible);
  border: 1px solid var(--bord); border-radius: var(--rayon-m); background: var(--carte);
  color: var(--texte); cursor: pointer; list-style: none;
}
.sh-menu > summary::-webkit-details-marker { display: none; }
.sh-burger { display: grid; gap: 5px; width: 18px; }
.sh-burger span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .15s ease, opacity .15s ease; }
.sh-menu[open] .sh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sh-menu[open] .sh-burger span:nth-child(2) { opacity: 0; }
.sh-menu[open] .sh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sh-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 64px); overflow-y: auto;
  padding: var(--s-3) var(--gouttiere) var(--s-5);
  background: var(--carte); border-bottom: 1px solid var(--bord); box-shadow: var(--ombre);
}
.sh-menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sh-menu-panel ul + ul { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--bord); }
.site-header a:focus-visible, .site-header summary:focus-visible { outline: var(--focus); outline-offset: 2px; }

@media (min-width: 820px) {
  .sh-nav { display: flex; }
  .sh-cta { margin-left: var(--s-3); }
  .sh-menu { display: none; }
}

/* ---------- Pied de page ---------- */
.site-footer {
  margin-top: var(--s-8);
  background: var(--encre); color: var(--sur-encre);
  border-top: 3px solid var(--miel);
  font-family: var(--police-texte); font-size: var(--t-small); line-height: 1.5;
}
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.sf-inner {
  max-width: var(--w-pleine); margin: 0 auto;
  padding: var(--s-7) var(--gouttiere) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.sf-top { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: start; }
.sf-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--w-lecture); }
.sf-brand .sh-brand { color: var(--sur-encre); }
.sf-brand p { margin: 0; max-width: 40ch; color: var(--sur-encre); font-size: var(--t-small); }
.sf-title {
  margin: 0 0 var(--s-2); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: var(--suivi-caption); text-transform: uppercase; color: #E9A13B;
}
.sf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.sf-col a {
  display: flex; align-items: center; min-height: 36px;
  color: var(--sur-encre); text-decoration: none; font-size: var(--t-small);
}
.sf-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 3px solid #E9A13B; outline-offset: 2px; }
.sf-bottom {
  border-top: 1px solid rgba(242,239,231,.18); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6);
  font-size: var(--t-caption); line-height: var(--lh-caption);
}
.sf-bottom p { margin: 0; max-width: 64ch; color: var(--sur-encre); }

/* Texte réservé aux lecteurs d'écran (aussi défini par style.css sur les pages non migrées). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}