/* Chrome commun aux pages du site (index.html, documentation.html, cookies.html).
   Servi depuis public/ : disponible sur /site.css en dev comme en prod. */

:root { color-scheme: light; }
html { height: 100%; }
/* min-height et non height : sur les pages de contenu long, une hauteur fixe
   collerait le footer a 100vh et laisserait le texte deborder par-dessus. */
body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #eef2f7;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header en grille : identite a gauche, navigation a droite. */
.site-header {
  padding: 14px 22px;
  background: #0f172a;
  color: #f8fafc;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 24px;
}
.site-header__brand { min-width: 0; }
.site-header h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.site-header h1 .pkg { font-size: 13px; font-weight: 400; color: #94a3b8; margin-left: 10px; }
.site-header p { margin: 4px 0 0; font-size: 13px; color: #cbd5e1; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.site-nav a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.site-nav a:hover,
.site-nav a:focus-visible { background: rgba(148, 163, 184, .16); color: #f8fafc; }
.site-nav a[aria-current='page'] {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .45);
  background: rgba(148, 163, 184, .12);
}

/* Sans padding : l'editeur occupe toute la largeur sous le header. */
main { flex: 1; padding: 0; min-height: 0; display: flex; }

/* Page editeur : on colle la hauteur au viewport pour que le footer tienne sans
   scroll de page (l'editeur gere ses propres ascenseurs internes). Desactive
   sur petit ecran / faible hauteur, ou le contenu doit pouvoir defiler. */
@media (min-width: 721px) and (min-height: 640px) {
  body.site-body--app { height: 100vh; overflow: hidden; }
}
/* Bord a bord : ni arrondi ni ombre, qui n'ont de sens que sur une carte
   detachee du fond. */
#app { flex: 1; min-height: 540px; background: white; }

/* Pages de contenu redactionnel (cookies, mentions...) : le main passe en flux
   normal, sinon le flex ci-dessus fige sa hauteur sur celle du viewport et le
   texte deborde de la carte blanche. */
main.site-main--page { display: block; padding: 16px 22px; }

.site-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 32px 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15,23,42,.08);
  line-height: 1.65;
}
.site-page h1 { margin: 0 0 24px; font-size: 28px; letter-spacing: -0.01em; }
.site-page h2 { margin: 32px 0 10px; font-size: 20px; }
.site-page h3 { margin: 24px 0 8px; font-size: 16px; }
.site-page p, .site-page li { font-size: 15px; }
.site-page ul { padding-left: 22px; }
.site-page a { color: #1d4ed8; }
.site-page table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.site-page th, .site-page td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; vertical-align: top; }
.site-page th { background: #f8fafc; }

.site-footer {
  padding: 14px 22px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}
.site-footer a { color: #475569; }

@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr; }
  .site-nav { justify-self: start; }
  main.site-main--page { padding: 12px; }
  .site-page { padding: 20px 18px 32px; }
}