/* Reset léger, typographie et structure de page (app shell). */
/* Archivo, auto-hébergée : la CSP interdit toute ressource externe, et
   dépendre d'un CDN de polices ferait fuiter chaque visite vers un tiers.
   Licence SIL OFL — voir static/fonts/Archivo-OFL.txt.

   Fonte variable : un seul fichier couvre les graisses 400 à 700, là où trois
   fontes statiques demanderaient trois téléchargements. Les deux sous-ensembles
   se chargent à la demande selon les caractères réellement employés. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  /* U+2000-206F contient l'espace fine insécable des formats français. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Les colonnes de chiffres ne doivent pas danser d'une ligne à l'autre. */
.num {
  font-variant-numeric: tabular-nums;
}

.text-2 {
  color: var(--text-2);
}

.text-3 {
  color: var(--text-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- structure */

.app {
  min-height: 100vh;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) calc(var(--nav-h) + var(--s-7));
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.page__title {
  font-size: var(--t-xl);
  font-weight: var(--w-strong);
  letter-spacing: var(--ap-snug);
}

/* « ⚡ Charge › », au-dessus de la date. Une ligne à part et non un préfixe
   dans le titre : la date reste le titre, et la nature de la page se lit d'un
   coup d'œil sans concurrencer l'information. */
.page__fil {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-s);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--ap-capitales);
  /* --accent-ink et non --accent : le cuivre de la charte ne donne que 3,27 de
     contraste sur le papier, assez pour un aplat, pas pour du texte. */
  color: var(--accent-ink);
  /* La date respire sous le fil plutôt que de lui être collée. */
  margin-bottom: var(--s-1);
}



.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.section__title {
  font-size: var(--t-m);
  font-weight: var(--w-semi);
  color: var(--text-2);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.link {
  font-size: var(--t-m);
  color: var(--accent-ink);
  font-weight: var(--w-semi);
}

/* Une action qui accompagne une note : au corps du texte courant elle écrasait
   la mention qu'elle prolongeait. */
.link--discret {
  font-size: var(--t-s);
  align-self: flex-start;
}

/* Un bouton porte l'apparence native de son système : fond gris, bordure,
   coins arrondis. Sur un .link, il ressemblait alors à un bouton plein posé au
   milieu d'une phrase. Les actions qui n'entraînent pas de navigation — ouvrir
   une modale, par exemple — doivent pouvoir se présenter comme un lien. */
button.link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  text-align: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- navigation */

/* Le mot-symbole ne vivait que sur l'accueil : les autres pages s'ouvraient sur
   un titre nu, sans rien qui dise de quelle application il s'agit — ce qui se
   remarque surtout une fois l'app installée en plein écran, sans barre
   d'adresse. Il coiffe désormais chaque page et reste en vue au défilement,
   comme la barre d'onglets le fait en bas. `sticky` plutôt que `fixed` : la
   barre garde sa place dans le flux, donc rien n'a besoin d'être décalé pour
   passer dessous. */
.marque {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-top));
  padding-top: calc(var(--s-3) + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.marque__lien {
  display: flex;
  color: inherit;
}

.marque .logotype {
  height: 1.35em;
}

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--nav-h);
  padding: var(--s-1) 0;
  font-size: var(--t-micro);
  color: var(--text-2);
  background: none;
  border: 0;
  border-top: 2px solid transparent;
}

.tabbar__item.is-active {
  color: var(--accent-ink);
  border-top-color: var(--accent);
}

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Desktop : la même barre devient une colonne latérale. */
@media (min-width: 900px) {
  .tabbar {
    inset: 0 auto 0 0;
    width: 220px;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--s-1);
    padding: var(--s-5) var(--s-3);
    border-top: 0;
    border-right: 1px solid var(--border);
  }

  .tabbar__item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s-3);
    min-height: 44px;
    padding: 0 var(--s-3);
    font-size: var(--t-base);
    border-top: 0;
    border-radius: var(--r-s);
  }

  .tabbar__item.is-active {
    background: var(--accent-soft);
    border-top-color: transparent;
  }

  .page {
    margin-left: 220px;
    padding-bottom: var(--s-7);
    max-width: 860px;
  }
}

/* ---------------------------------------------------------------- sheet « Plus » */

.sheet[hidden] {
  display: none;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(0 0 0 / 0.4);
}

.sheet__panel {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: var(--shadow-pop);
  padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.sheet__title {
  font-size: var(--t-s);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--ap-capitales);
  color: var(--text-3);
  padding: var(--s-2) var(--s-2) var(--s-1);
}

.sheet__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-s);
  background: none;
  text-align: left;
  font-size: var(--t-base);
}

.sheet__item:hover {
  background: var(--surface-2);
}

.sheet__form {
  display: contents;
}

.sheet__sep {
  height: 1px;
  margin: var(--s-2) 0;
  background: var(--border);
  border: 0;
}

.theme-switch {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2);
}

.theme-switch__btn {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--surface);
  font-size: var(--t-m);
}

.theme-switch__btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--w-semi);
}

@media (min-width: 900px) {
  .sheet {
    align-items: center;
  }

  .sheet__panel {
    border-radius: var(--r-l);
  }
}

/* Le sprite inliné ne doit occuper aucune place dans le flux. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Élément témoin des graphiques : sert à faire résoudre une couleur par le
   navigateur, jamais à afficher quoi que ce soit. */
.sonde-couleur {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mot-symbole : sa hauteur suit la taille de texte du contexte. */
.logotype {
  display: block;
  height: 1.9em;
  width: auto;
  max-width: 100%;
  color: var(--text);
}

.logotype--page {
  height: 1.4em;
}