/* Le Cartel : jetons de design, remise à zéro, typographie et coquille de l'application.
   Aucune police externe : serif et sans-serif système. */

/* ---------- Jetons : thème clair « musée » ---------- */
:root {
  --papier: #f5efe3;
  --papier-fonce: #ebe2d0;
  --carte: #fcf9f3;
  --carte-relief: #fffdf9;
  --encre: #1d1916;
  --encre-douce: #463e37;
  --encre-pale: #675d54;
  --filet: #d8cbb3;
  --filet-fort: #a8977a;
  --accent: #7b1e2b;          /* bordeaux, pour le texte et les filets */
  --accent-plein: #7b1e2b;    /* fond des boutons principaux */
  --accent-survol: #63151f;
  --accent-doux: #f3e3df;
  --sur-accent: #fdf8f1;
  --succes: #2b653a;
  --succes-doux: #e2eedf;
  --erreur: #9e2828;
  --erreur-doux: #f7e1dd;
  --avert: #7d5300;
  --avert-doux: #f5e8cc;
  --or: #8f6a1f;
  --voile: rgba(29, 25, 22, .45);
  --ombre: 0 1px 2px rgba(48, 32, 16, .05), 0 3px 12px rgba(48, 32, 16, .06);
  --ombre-forte: 0 12px 34px rgba(48, 32, 16, .16);
  --focus: #1f4f8f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --chiffres: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --rayon: 8px;
  --rayon-petit: 5px;
  --rayon-grand: 14px;
  --echelle: 1;
  --haut-barre: 56px;
  --haut-nav: 62px;
  --largeur-lecture: 46rem;

  --sure-haut: env(safe-area-inset-top, 0px);
  --sure-bas: env(safe-area-inset-bottom, 0px);
  --sure-gauche: env(safe-area-inset-left, 0px);
  --sure-droite: env(safe-area-inset-right, 0px);

  --duree: 180ms;
  --courbe: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* ---------- Thème sombre (automatique ou forcé) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --papier: #15120f;
    --papier-fonce: #1d1915;
    --carte: #211c18;
    --carte-relief: #27211c;
    --encre: #f0e8dc;
    --encre-douce: #d3c8b8;
    --encre-pale: #ab9f8f;
    --filet: #3c342c;
    --filet-fort: #6a5d4f;
    --accent: #ec9aa5;
    --accent-plein: #a23649;
    --accent-survol: #b8435a;
    --accent-doux: #3a2026;
    --sur-accent: #fff7f5;
    --succes: #8fd19c;
    --succes-doux: #1f3324;
    --erreur: #f19a8f;
    --erreur-doux: #3d211e;
    --avert: #e8c06e;
    --avert-doux: #3a2f17;
    --or: #d9b36a;
    --voile: rgba(0, 0, 0, .6);
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --ombre-forte: 0 14px 38px rgba(0, 0, 0, .5);
    --focus: #8cb8ff;
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --papier: #15120f;
  --papier-fonce: #1d1915;
  --carte: #211c18;
  --carte-relief: #27211c;
  --encre: #f0e8dc;
  --encre-douce: #d3c8b8;
  --encre-pale: #ab9f8f;
  --filet: #3c342c;
  --filet-fort: #6a5d4f;
  --accent: #ec9aa5;
  --accent-plein: #a23649;
  --accent-survol: #b8435a;
  --accent-doux: #3a2026;
  --sur-accent: #fff7f5;
  --succes: #8fd19c;
  --succes-doux: #1f3324;
  --erreur: #f19a8f;
  --erreur-doux: #3d211e;
  --avert: #e8c06e;
  --avert-doux: #3a2f17;
  --or: #d9b36a;
  --voile: rgba(0, 0, 0, .6);
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --ombre-forte: 0 14px 38px rgba(0, 0, 0, .5);
  --focus: #8cb8ff;
  color-scheme: dark;
}

/* Couleur de famille : --fam est posée en JS (CSSOM) ; --fam-vif reste lisible sur le fond. */
.fam { --fam-vif: var(--fam, var(--accent)); --fam-fond: color-mix(in srgb, var(--fam, var(--accent)) 10%, var(--carte)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .fam {
    --fam-vif: color-mix(in oklab, var(--fam, var(--accent)) 42%, #fff);
    --fam-fond: color-mix(in srgb, var(--fam, var(--accent)) 22%, var(--carte));
  }
}
:root[data-theme="sombre"] .fam {
  --fam-vif: color-mix(in oklab, var(--fam, var(--accent)) 42%, #fff);
  --fam-fond: color-mix(in srgb, var(--fam, var(--accent)) 22%, var(--carte));
}

/* ---------- Remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: calc(100% * var(--echelle));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--haut-barre) + var(--sure-haut) + 12px);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, video, audio { max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 .8em; }
ul, ol { margin: 0 0 .8em; padding-left: 1.3em; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.25rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 1.5rem 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent-doux); color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus, h1:focus, [tabindex="-1"]:focus { outline: none; }

.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;
}

.lien-evitement {
  position: fixed;
  left: 12px; top: calc(8px + var(--sure-haut));
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent-plein);
  color: var(--sur-accent);
  border-radius: var(--rayon);
  transform: translateY(-200%);
  transition: transform var(--duree);
}
.lien-evitement:focus { transform: none; }

/* ---------- Coquille ---------- */
.coquille { min-height: 100vh; min-height: 100dvh; }
.colonne { min-width: 0; }

.barre-haut {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: calc(var(--haut-barre) + var(--sure-haut));
  padding: var(--sure-haut) max(8px, var(--sure-droite)) 0 max(8px, var(--sure-gauche));
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--filet);
}
.barre-haut__marque {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--encre);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}
.barre-haut__marque svg { width: 30px; height: 30px; flex: none; }
.barre-haut__titre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre-haut__espace { flex: 1; }
.barre-haut__actions { display: flex; gap: 2px; }

main#contenu {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding:
    18px
    max(16px, var(--sure-droite))
    calc(var(--haut-nav) + var(--sure-bas) + 32px)
    max(16px, var(--sure-gauche));
}
main#contenu.large { max-width: 76rem; }

/* Navigation basse (mobile) */
.nav-basse {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 var(--sure-droite) var(--sure-bas) var(--sure-gauche);
  background: color-mix(in srgb, var(--carte) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--filet);
}
.nav-basse a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--haut-nav);
  padding: 6px 2px;
  color: var(--encre-pale);
  text-decoration: none;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 500;
  text-align: center;
  letter-spacing: .01em;
}
.nav-basse a svg { width: 24px; height: 24px; transition: transform var(--duree) var(--courbe); }
.nav-basse a[aria-current="page"] { color: var(--accent); font-weight: 650; }
.nav-basse a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 28%; right: 28%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.nav-basse a:active svg { transform: scale(.9); }

/* Barre latérale (grand écran) */
.barre-laterale { display: none; }

@media (min-width: 900px) {
  .coquille {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    /* Le fond de la colonne latérale descend jusqu'en bas, même sur une page longue. */
    background: linear-gradient(to right, var(--papier-fonce) 263px, var(--filet) 263px, var(--filet) 264px, transparent 264px);
    min-height: 100vh;
  }
  .nav-basse { display: none; }
  .barre-haut__marque { display: none; }
  .barre-haut { padding-left: 16px; padding-right: 16px; }
  main#contenu { padding: 28px 32px 64px; }
  .barre-laterale {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 14px 18px;
    background: var(--papier-fonce);
    border-right: 1px solid var(--filet);
    overflow-y: auto;
  }
  .barre-laterale__marque {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--filet);
    color: var(--encre);
    text-decoration: none;
  }
  .barre-laterale__marque svg { width: 44px; height: 44px; flex: none; }
  .barre-laterale__nom { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.1; display: block; }
  .barre-laterale__sous { font-size: .78rem; color: var(--encre-pale); display: block; margin-top: 2px; }
  .barre-laterale a.lien-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--rayon);
    color: var(--encre-douce);
    text-decoration: none;
    font-weight: 500;
  }
  .barre-laterale a.lien-nav svg { width: 22px; height: 22px; flex: none; }
  .barre-laterale a.lien-nav:hover { background: color-mix(in srgb, var(--carte) 70%, transparent); color: var(--encre); }
  .barre-laterale a.lien-nav[aria-current="page"] {
    background: var(--carte);
    color: var(--accent);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--accent), var(--ombre);
  }
  .barre-laterale__titre-groupe {
    margin: 18px 12px 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--encre-pale);
    font-weight: 600;
  }
  .barre-laterale__pied { margin-top: auto; padding: 12px; font-size: .8rem; color: var(--encre-pale); }
}

/* Mouvement réduit : on coupe les animations et transitions décoratives. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}