/* Pages d'Epoko sur epoko.app (#597) : aide, confidentialité, mentions légales.
   Jetons de docs/design/systeme/tokens.json, mêmes noms ; règles du brand book
   (docs/design/systeme/README.md : « Couleurs », « Typographie », « Formes »,
   « Accessibilité »). Polices servies par le site, licences dans /licences/. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/polices/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/polices/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Jetons de rôle, thème « Clair » (craie). */
:root {
  color-scheme: light dark;

  --fond: #f6f3ec;
  --surface: #ffffff;
  --texte: #141414;
  --texte-second: #55524b;
  --contour: #141414;
  --focus: #2f4bdb;
  --ombre-bouton: 4px 4px 0 #141414;

  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-12: 48px;

  --rayon-pastille: 12px;
  --rayon-bouton: 14px;
  --trait-fin: 2px;
  --trait: 2.5px;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* Thème « Sombre » : le musée s'éteint. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #171612;
    --surface: #23211c;
    --texte: #f4f0e7;
    --texte-second: #b3ad9f;
    --contour: #e8e2d5;
    --focus: #ffd25e;
    --ombre-bouton: 4px 4px 0 #e8e2d5;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fond);
}

/* Style `corps` : 17 / 24, graisse 400. */
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--display);
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--espace-6) max(var(--espace-4), env(safe-area-inset-right)) var(--espace-12) max(var(--espace-4), env(safe-area-inset-left));
}

/* En-tête : logotype (mot en `texte`, cible aux couleurs fixes). */
.entete {
  margin-bottom: var(--espace-8);
}

.logotype {
  display: inline-block;
  color: var(--texte);
  border-radius: var(--rayon-pastille);
}

.logotype svg {
  display: block;
  width: 112px;
  height: auto;
}

/* Étiquette : IBM Plex Mono 600, 12 / 16, capitales. */
.etiquette {
  margin: 0 0 var(--espace-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--texte-second);
}

/* Titre d'écran : style `display`, largeur 80, réduit sur iPhone étroit. */
h1 {
  margin: 0 0 var(--espace-4);
  font-size: clamp(40px, 11vw, 56px);
  line-height: 1;
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

/* Titre de section : style `titre-2`. */
h2 {
  margin: 0 0 var(--espace-3);
  font-size: 22px;
  line-height: 26px;
  font-weight: 800;
}

/* Libellé fort : style `fort`. */
h3 {
  margin: var(--espace-5) 0 var(--espace-2);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--espace-3);
}

ul,
ol {
  padding-left: var(--espace-6);
}

li + li {
  margin-top: var(--espace-2);
}

strong {
  font-weight: 700;
}

.chapo {
  margin-bottom: var(--espace-8);
  color: var(--texte-second);
}

/* Carte de section : `surface`, contour `trait`, `ombre-bouton`. */
.bloc {
  margin: 0 0 var(--espace-8);
  padding: var(--espace-5);
  background: var(--surface);
  border: var(--trait) solid var(--contour);
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-bouton);
}

.bloc > :last-child {
  margin-bottom: 0;
}

/* Libellé de l'app cité tel quel. */
.libelle {
  font-weight: 700;
  white-space: nowrap;
}

/* Liens : soulignés, focus `focus` de 3 px décalé de 3 px. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--trait-fin);
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Liste de liens de l'accueil : zones de toucher de 44 px au moins. */
.liens {
  list-style: none;
  padding: 0;
}

.liens li + li {
  margin-top: var(--espace-3);
}

.liens a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--espace-3) var(--espace-5);
  background: var(--surface);
  border: var(--trait) solid var(--contour);
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-bouton);
  font-size: 17px;
  line-height: 22px;
  font-weight: 800;
  text-decoration: none;
}

.liens a:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* Tableau des durées : filets `trait-fin`. */
.tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--espace-3);
}

.tableau th,
.tableau td {
  padding: var(--espace-2) 0;
  border-bottom: var(--trait-fin) solid var(--contour);
  text-align: left;
  vertical-align: top;
}

.tableau th {
  padding-right: var(--espace-4);
  font-weight: 700;
}

.tableau thead th {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--texte-second);
}

.tableau tr:last-child th,
.tableau tr:last-child td {
  border-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 0 var(--espace-3);
}

/* Pied de page commun : style `note`, `texte-second`. */
.pied {
  margin-top: var(--espace-12);
  padding-top: var(--espace-5);
  border-top: var(--trait-fin) solid var(--contour);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--texte-second);
}

.pied p {
  margin: 0 0 var(--espace-2);
}

.pied a {
  display: inline-block;
  min-height: 44px;
  padding: 13px 0;
  margin-right: var(--espace-4);
  color: var(--texte);
  font-weight: 600;
}