/* Vaguemestre : site vitrine, theme « registre du vaguemestre ».
   Papier creme, encre noire, tampon rouge, kaki militaire. Couples mesures le 2026-11-02
   (formule WCAG 2.2), valeurs dans le commentaire de chaque variable ; AA exige 4,5:1 pour le texte. */

:root {
  --papier: #f5f0e4;        /* fond principal */
  --papier-fonce: #ebe3cf;  /* cartes, encarts */
  --encre: #1c1f24;         /* texte : 14,5:1 sur papier, 12,9:1 sur papier-fonce */
  --encre-douce: #4a463d;   /* texte secondaire : 8,3:1 sur papier, 7,4:1 sur papier-fonce */
  --tampon: #9c2b1e;        /* liens et accents : 6,7:1 sur papier, 5,9:1 sur papier-fonce */
  --kaki: #3b4521;          /* titres de cartes, bordures : 9,0:1 sur papier, 8,0:1 sur papier-fonce */
  --nuit: #1c1f24;          /* fond du terminal */
  --nuit-texte: #f5f0e4;    /* 14,5:1 sur nuit */
  --nuit-ambre: #e8b65a;    /* invite du terminal : 8,9:1 sur nuit */
  --nuit-note: #b9b2a2;     /* commentaires du terminal : 7,8:1 sur nuit */

  --titre: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --corps: "IBM Plex Sans", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
  --largeur: 1120px;
}

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

html { color-scheme: light; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.65;
}

a { color: var(--tampon); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tampon); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--titre); line-height: 1.15; color: var(--encre); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 650; margin: 0.3em 0 0.4em; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; margin: 0 0 0.6em; }
h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.4em; color: var(--kaki); }

code { font-family: var(--mono); font-size: 0.92em; background: var(--papier-fonce); padding: 0.05em 0.3em; border-radius: 3px; overflow-wrap: anywhere; }

.evitement { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--papier); padding: 0.6em 1em; z-index: 10; }
.evitement:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------ entete */
.entete {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  border-bottom: 2px solid var(--kaki);
}
.marque { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--encre); font-family: var(--titre); font-weight: 650; font-size: 1.35rem; }
.navigation, .langues { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.navigation { margin-right: auto; }
.navigation a, .langues a { color: var(--encre); text-decoration: none; padding: 0.35rem 0; min-height: 24px; display: inline-block; }
.navigation a:hover, .langues a:hover { color: var(--tampon); text-decoration: underline; }
.navigation a[aria-current], .langues a[aria-current] { color: var(--tampon); text-decoration: underline; text-decoration-thickness: 2px; }
.langues a { font-size: 0.95rem; }

main { max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

/* ------------------------------------------------------------------ hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3.5rem 0 3rem;
}
.surtitre { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kaki); margin: 0; }
.chapeau { font-size: 1.2rem; color: var(--encre-douce); max-width: 34em; }
.statut { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--tampon); border: 2px solid var(--tampon); padding: 0.35rem 0.9rem 0.35rem 0.5rem; border-radius: 999px; transform: rotate(-1.2deg); max-width: 100%; }
.tampon { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px double var(--tampon); flex: none; }

.terminal { margin: 0; }
.terminal pre {
  margin: 0;
  background: var(--nuit);
  color: var(--nuit-texte);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 1.4rem 1.5rem;
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: 6px 6px 0 var(--kaki);
}
.terminal pre code { background: none; padding: 0; font-size: inherit; }
.invite { color: var(--nuit-ambre); }
.note { color: var(--nuit-note); }
.terminal figcaption { margin-top: 1rem; font-size: 0.95rem; color: var(--encre-douce); }

/* ------------------------------------------------------------------ blocs */
.bloc { padding: 3rem 0; border-top: 1px dashed var(--kaki); }
.intro { max-width: 46em; color: var(--encre-douce); }

.cartes, .boites { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.cartes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.boites { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: 1.5rem; }
.carte, .boites li { background: var(--papier-fonce); border-left: 4px solid var(--kaki); padding: 1.25rem 1.4rem; border-radius: 0 6px 6px 0; }
.carte p, .boites p { margin: 0; color: var(--encre-douce); }

.encart { background: var(--papier-fonce); border: 2px solid var(--kaki); border-radius: 8px; padding: 2rem 2rem; margin: 3rem 0; }
.encart p { max-width: 46em; }
.lien-fort { font-weight: 600; }

.question { border-bottom: 1px solid var(--kaki); padding: 0.9rem 0; max-width: 52em; }
.question summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; min-height: 24px; }
.question p { margin: 0.6rem 0 0.2rem; color: var(--encre-douce); }

/* ------------------------------------------------------------------ texte long */
.texte { max-width: 46em; padding: 2.5rem 0 3rem; }
.texte h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.texte li { margin-bottom: 0.5rem; }
.maj { color: var(--encre-douce); font-family: var(--mono); font-size: 0.9rem; }
.engagement { border-left: 4px solid var(--tampon); background: var(--papier-fonce); padding: 0.9rem 1.1rem; }
.retours { list-style: none; padding: 0; }

/* ------------------------------------------------------------------ pied */
.pied { max-width: var(--largeur); margin: 2rem auto 0; padding: 1.5rem 1.25rem 2.5rem; border-top: 2px solid var(--kaki); color: var(--encre-douce); font-size: 0.95rem; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.6rem; }
.pied-liens a { display: inline-block; min-height: 24px; padding: 0.2rem 0; }

@media (max-width: 820px) {
  /* minmax(0, 1fr) et non 1fr : sinon la colonne prend la largeur minimale du terminal et deborde */
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 2rem; }
  .statut { border-radius: 1.2rem; }
  .navigation { margin-right: 0; width: 100%; order: 3; }
  .encart { padding: 1.5rem 1.25rem; }
}