/* =====================================================================
   layout.css — Reset, container, header, footer, grilles.
   Consomme UNIQUEMENT des tokens. Aucune valeur hardcodee.
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* evite tout scroll horizontal accidentel */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  background: transparent;         /* mesh-bg fournit le fond */
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Wrapper pour rendre les tableaux scrollables horizontalement sur mobile */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--sp-5);
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-4);
  font-weight: var(--fw-semibold);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-4); }

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* --- Site shell --- */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site__main {
  flex: 1 0 auto;
  padding-top: var(--header-h);
  padding-bottom: var(--sp-9);
}

/* --- Header --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 40;
  /* Fond opaque direct (pas de color-mix qui peut fallback transparent sur
     certains navigateurs) + un voile blur par dessus si supporte. */
  background: var(--c-ivoire);
  border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(10px)) {
  .site-header {
    background: rgba(251, 250, 246, 0.88); /* var(--c-ivoire) a 88% */
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--fg-strong);
  letter-spacing: var(--ls-tight);
}
.brand__mark {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-alt) 100%);
  transform: translateY(-0.1em);
}
.brand__suffix {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav a {
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  padding: var(--sp-2) 0;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a:hover { text-decoration: none; color: var(--fg-strong); }

/* Specificity 0,2,1 pour battre .nav a (0,1,1) : le texte reste blanc */
.nav a.nav__cta {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--c-blanc);
  font-weight: var(--fw-medium);
  transition: background var(--t-med), color var(--t-med);
}
.nav a.nav__cta::after { display: none; }
.nav a.nav__cta:hover {
  background: var(--accent-strong);
  color: var(--c-blanc);
  text-decoration: none;
}

/* --- Burger --- */
.burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--fg-strong);
}
.burger__line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin: 5px auto;
  transition: transform var(--t-med), opacity var(--t-med);
}
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  /* Fond opaque garanti - pas de color-mix qui peut tomber transparent */
  background: var(--c-ivoire);
  flex-direction: column;
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  gap: 0;
  z-index: 45;  /* au-dessus du header pour recouvrir completement */
  overflow-y: auto;
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) inset;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--fg-strong);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  min-height: 52px;
  display: flex;
  align-items: center;
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a:active,
.nav-mobile a.is-active {
  color: var(--accent);
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .site-header__inner { gap: var(--sp-3); }
  .brand__suffix { display: none; }  /* gain de place sur petit ecran */
  .brand { font-size: var(--fs-base); }
}

/* Cas tres etroit - encore plus compact */
@media (max-width: 380px) {
  .brand span:nth-child(2) { font-size: var(--fs-sm); }
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-subtle) 80%, transparent);
  padding: var(--sp-8) 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.site-footer__col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-3);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--sp-2); }
.site-footer__col a { color: var(--fg); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--fg-strong);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-normal);
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.site-footer__admin {
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border);
  color: var(--fg-muted);
  opacity: 0.7;
}
.site-footer__admin:hover { color: var(--accent); opacity: 1; }

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .site-footer__bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* --- Skip link accessibilite --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--c-blanc);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-2); }

/* --- Focus visible --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}