/* ==========================================================================
   AASSDN — Espace membres
   Palette echantillonnee sur le logo : bleu #00489C, rouge #DC2B1E, blanc.
   Registre : institutionnel contemporain. Le bleu structure, le rouge
   ponctue, le blanc respire. Le filet tricolore est l'element signature.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Bleus — issus du centre du logo */
  --bleu:        #00489c;
  --bleu-vif:    #0a5fc4;
  --bleu-nuit:   #041f45;
  --bleu-encre:  #0d2a52;
  --bleu-voile:  #eaf0fa;
  --bleu-brume:  #f5f8fd;

  /* Rouge — issu de l'anneau du logo, strictement accent */
  --rouge:       #dc2b1e;
  --rouge-fonce: #b41f14;
  --rouge-voile: #fdeceb;

  /* Neutres froids */
  --blanc:       #ffffff;
  --fond:        #f2f5fa;
  --bord:        #dde4ef;
  --bord-fort:   #c3cede;
  --texte:       #14243d;
  --texte-2:     #4d5f79;
  --texte-3:     #7d8ca3;

  /* Typographie */
  --f-ui:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-texte: "Source Serif 4", Georgia, serif;
  --f-mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;

  /* Rythme et profondeur */
  --u: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --max-l: 1200px;
  --max-texte: 68ch;

  --ombre-1: 0 1px 2px rgba(4, 31, 69, 0.05), 0 1px 3px rgba(4, 31, 69, 0.04);
  --ombre-2: 0 2px 4px rgba(4, 31, 69, 0.06), 0 8px 20px rgba(4, 31, 69, 0.07);
  --ombre-3: 0 4px 8px rgba(4, 31, 69, 0.08), 0 24px 48px rgba(4, 31, 69, 0.12);

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-ui);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--bleu-nuit);
}

a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--rouge); }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--bleu-vif);
  outline-offset: 2px;
  border-radius: 3px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--bleu-nuit);
  color: var(--blanc);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.saut-contenu:focus { left: 0; top: 0; }

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

/* --------------------------------------------------------------------------
   3. Le filet tricolore — element signature
   Trois segments egaux, bleu / blanc / rouge. Marque les titres de section
   et le haut des surfaces mises en avant.
   -------------------------------------------------------------------------- */

.tricolore {
  display: block;
  height: 3px;
  width: 72px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--bleu) 0 33.33%,
    #e8eef7 33.33% 66.66%,
    var(--rouge) 66.66% 100%
  );
}

.tricolore-fin { height: 2px; width: 48px; }

/* Bandeau tricolore en tete de surface */
.tricolore-tete {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--bleu) 0 33.33%,
    var(--blanc) 33.33% 66.66%,
    var(--rouge) 66.66% 100%
  );
}

/* --------------------------------------------------------------------------
   4. La cote — reference archivistique
   -------------------------------------------------------------------------- */

.cote {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--texte-3);
  white-space: nowrap;
}

.cote-fort { color: var(--texte-2); }

/* --------------------------------------------------------------------------
   5. En-tete d'application
   -------------------------------------------------------------------------- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bord);
}

.bandeau-inner {
  max-width: var(--max-l);
  margin: 0 auto;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 7);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

.marque {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.marque img {
  height: 38px;
  width: auto;
  display: block;
}

.marque-sigle {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  color: var(--bleu-nuit);
}

.nav-onglets {
  display: flex;
  gap: calc(var(--u) * 1);
  margin-left: calc(var(--u) * 4);
  align-items: center;
}

.onglet {
  position: relative;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--texte-2);
  text-decoration: none;
  padding: calc(var(--u) * 2) calc(var(--u) * 3.5);
  border-radius: var(--r-sm);
  transition: color var(--transition), background-color var(--transition);
}

.onglet:hover { background: var(--bleu-voile); color: var(--bleu); }

.onglet[aria-current="page"] { color: var(--bleu-nuit); }

/* Soulignement rouge de l'onglet actif : seul usage du rouge dans la nav */
.onglet[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 3.5);
  right: calc(var(--u) * 3.5);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rouge);
}

.bloc-session {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  margin-left: auto;
}

.session-nom {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  color: var(--texte);
}

.session-role {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-3);
}

.pastille {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bleu);
  color: var(--blanc);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  transition: all var(--transition);
}

.bouton:hover {
  background: var(--bleu-brume);
  border-color: var(--bleu);
  color: var(--bleu);
}

.bouton-primaire {
  width: 100%;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: calc(var(--u) * 3.5);
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
  box-shadow: var(--ombre-1);
}

.bouton-primaire:hover {
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
  color: var(--blanc);
  box-shadow: var(--ombre-2);
}

.bouton-primaire:disabled {
  background: var(--texte-3);
  border-color: var(--texte-3);
  cursor: wait;
  box-shadow: none;
}

.bouton-secondaire {
  width: 100%;
  font-size: var(--fs-base);
  font-weight: 600;
  padding: calc(var(--u) * 3);
  background: var(--blanc);
  border-color: var(--bord-fort);
}

/* --------------------------------------------------------------------------
   7. Ecran de connexion
   -------------------------------------------------------------------------- */

.page-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 6);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, var(--bleu-voile) 0%, transparent 70%),
    var(--fond);
}

.carte-acces {
  width: 100%;
  max-width: 448px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-3);
  overflow: hidden;
}

.ca-corps { padding: calc(var(--u) * 9) calc(var(--u) * 9) calc(var(--u) * 8); }

.ca-logo {
  display: block;
  height: 76px;
  width: auto;
  margin: 0 auto calc(var(--u) * 6);
}

.ca-tete { text-align: center; margin-bottom: calc(var(--u) * 8); }

.ca-titre {
  font-size: var(--fs-2xl);
  margin-bottom: calc(var(--u) * 2);
}

.ca-tete .tricolore { margin: calc(var(--u) * 4) auto; }

.ca-sous-titre {
  color: var(--texte-2);
  font-size: var(--fs-base);
  margin: 0;
}

.champ { margin-bottom: calc(var(--u) * 4); }

.champ label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texte);
  margin-bottom: calc(var(--u) * 2);
}

.champ input {
  width: 100%;
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  padding: calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ input::placeholder { color: var(--texte-3); }

/* Une case a cocher n est pas un champ de saisie : sans cette reserve,
   la largeur de 100 % ci-dessus l etire sur toute la ligne et rejette son
   libelle a l autre bout. */
.champ input[type="checkbox"],
.champ input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 3px;
  accent-color: var(--bleu);
}


.champ input:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-voile);
}

.separateur {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  margin: calc(var(--u) * 6) 0;
  color: var(--texte-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bord);
}

.ca-pied {
  padding: calc(var(--u) * 5) calc(var(--u) * 9);
  border-top: 1px solid var(--bord);
  background: var(--bleu-brume);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   8. Messages et etats
   -------------------------------------------------------------------------- */

.alerte {
  display: flex;
  gap: calc(var(--u) * 3);
  border: 1px solid #f3bdb8;
  border-left: 3px solid var(--rouge);
  background: var(--rouge-voile);
  color: var(--rouge-fonce);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 5);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-sm);
}

.alerte:empty { display: none; }

.etat-vide {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  padding: calc(var(--u) * 16) calc(var(--u) * 6);
  text-align: center;
}

.etat-vide .tricolore { margin: 0 auto calc(var(--u) * 5); }

.etat-vide h3 { font-size: var(--fs-lg); margin-bottom: calc(var(--u) * 2); }

.etat-vide p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--texte-2);
}

.squelette {
  display: grid;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 6);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
}

.squelette span {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, var(--fond) 25%, var(--bleu-voile) 50%, var(--fond) 75%);
  background-size: 200% 100%;
  border-radius: 3px;
  animation: glisse 1.5s ease-in-out infinite;
}

.squelette span:nth-child(1) { width: 26%; }
.squelette span:nth-child(2) { width: 74%; height: 22px; }
.squelette span:nth-child(3) { width: 92%; }
.squelette span:nth-child(4) { width: 58%; }

@keyframes glisse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   9. Mise en page interne
   -------------------------------------------------------------------------- */

.enveloppe {
  max-width: var(--max-l);
  margin: 0 auto;
  padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 13);
}

.tete-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 6);
}

.tete-titre {
  font-size: var(--fs-3xl);
  letter-spacing: -0.03em;
}

.tete-page .tricolore { margin: calc(var(--u) * 2) 0; }

.tete-intro {
  color: var(--texte-2);
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-md);
}

.compteur {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--texte-3);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 100px;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3.5);
  white-space: nowrap;
}

.compteur:empty { display: none; }

.grille-travail {
  display: grid;
  grid-template-columns: 244px 1fr;
  gap: calc(var(--u) * 8);
  align-items: start;
}

/* --------------------------------------------------------------------------
   10. Rail lateral
   -------------------------------------------------------------------------- */

.rail {
  position: sticky;
  top: calc(var(--u) * 18);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  padding: calc(var(--u) * 4);
  box-shadow: var(--ombre-1);
}

.rail-section + .rail-section {
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--bord);
}

.rail-titre {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: calc(var(--u) * 2);
}

.rail-liste { list-style: none; margin: 0; padding: 0; }

.rail-liste li + li { margin-top: 2px; }

.filtre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 2);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  border-radius: var(--r-sm);
  color: var(--texte-2);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  font-weight: 500;
  transition: all var(--transition);
}

.filtre:hover { background: var(--bleu-brume); color: var(--bleu); }

.filtre[aria-pressed="true"] {
  background: var(--bleu);
  color: var(--blanc);
  font-weight: 600;
}

.filtre .nb {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--texte-3);
  background: var(--fond);
  border-radius: 100px;
  padding: 1px calc(var(--u) * 1.5);
}

.filtre[aria-pressed="true"] .nb {
  background: rgba(255, 255, 255, 0.22);
  color: var(--blanc);
}

.recherche {
  width: 100%;
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.recherche::placeholder { color: var(--texte-3); }

.recherche:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-voile);
}

/* --------------------------------------------------------------------------
   11. Fiches
   -------------------------------------------------------------------------- */

.jeu-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: calc(var(--u) * 4);
}

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 4.5);
  font-family: var(--f-ui);
  color: inherit;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Liseré bleu qui se révèle au survol */
.fiche::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bleu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.fiche:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--bord-fort);
}

.fiche:hover::before { transform: scaleX(1); }

.etiquette-type {
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bleu);
  background: var(--bleu-voile);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
  margin-bottom: calc(var(--u) * 3);
}

.fiche-titre {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: calc(var(--u) * 1.5);
}

.fiche-dates {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--texte-2);
  margin: 0 0 calc(var(--u) * 3);
}

.fiche-resume {
  font-family: var(--f-texte);
  font-size: var(--fs-sm);
  color: var(--texte-2);
  margin: 0 0 calc(var(--u) * 4);
  line-height: 1.6;
  flex-grow: 1;
}

.fiche-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 2.5);
  border-top: 1px solid var(--bord);
}

.marque-sources {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--bleu);
  background: var(--bleu-voile);
  padding: 1px calc(var(--u) * 1.5);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   12. Articles
   -------------------------------------------------------------------------- */

.liste-articles { display: grid; gap: calc(var(--u) * 3); }

.entree {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: calc(var(--u) * 6);
  align-items: start;
  width: 100%;
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 5);
  font-family: var(--f-ui);
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.entree:hover {
  transform: translateY(-2px);
  border-color: var(--bord-fort);
  box-shadow: var(--ombre-2);
}

.entree-date {
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-radius: var(--r-sm);
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
  text-align: center;
}

.date-jour {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--bleu-nuit);
  display: block;
  letter-spacing: -0.02em;
}

.date-mois {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bleu);
  display: block;
  margin-top: calc(var(--u) * 0.5);
}

.date-annee {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  color: var(--texte-3);
  display: block;
}

.entree-titre {
  font-size: var(--fs-xl);
  margin-bottom: calc(var(--u) * 2);
  line-height: 1.25;
}

.entree-resume {
  font-family: var(--f-texte);
  color: var(--texte-2);
  margin: 0 0 calc(var(--u) * 4);
  max-width: 60ch;
}

.entree-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
}

.a-la-une {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--rouge);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
}

.puce-rubrique {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bleu);
  background: var(--bleu-voile);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   13. Etiquettes de mots-cles
   -------------------------------------------------------------------------- */

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.etiquette {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--texte-2);
  background: var(--fond);
  border: 1px solid var(--bord);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2.5);
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   14. Corps de lecture — encadre, prose, annexes
   -------------------------------------------------------------------------- */

.encadre {
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-radius: var(--r-md);
  padding: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 6);
}

.encadre dl {
  display: grid;
  grid-template-columns: minmax(104px, auto) 1fr;
  gap: calc(var(--u) * 2.5) calc(var(--u) * 5);
  margin: 0;
}

.encadre dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-3);
  padding-top: 2px;
}

.encadre dd { margin: 0; font-size: var(--fs-base); font-weight: 500; }

.prose {
  font-family: var(--f-texte);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--texte);
  max-width: var(--max-texte);
}

.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 calc(var(--u) * 4); }

.prose h2 {
  font-family: var(--f-ui);
  font-size: var(--fs-xl);
  margin: calc(var(--u) * 7) 0 calc(var(--u) * 2.5);
}

.prose h3 {
  font-family: var(--f-ui);
  font-size: var(--fs-lg);
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 2);
}

.prose ul,
.prose ol { margin: 0 0 calc(var(--u) * 4); padding-left: calc(var(--u) * 6); }
.prose li { margin-bottom: calc(var(--u) * 1.5); }

.prose blockquote {
  margin: 0 0 calc(var(--u) * 4);
  padding: calc(var(--u) * 2) 0 calc(var(--u) * 2) calc(var(--u) * 5);
  border-left: 3px solid var(--bleu);
  color: var(--texte-2);
  font-style: italic;
}

.prose code {
  font-family: var(--f-mono);
  font-size: 0.875em;
  background: var(--fond);
  padding: 1px 5px;
  border-radius: 4px;
}

.bloc-annexe {
  margin-top: calc(var(--u) * 7);
  padding-top: calc(var(--u) * 5);
  border-top: 1px solid var(--bord);
}

.bloc-annexe h2,
.bloc-annexe h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: calc(var(--u) * 4);
}

.liste-sources { list-style: none; margin: 0; padding: 0; }

.liste-sources li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--bord);
  font-size: var(--fs-sm);
}

.liste-sources li:last-child { border-bottom: none; }

.source-type {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bleu);
  background: var(--bleu-voile);
  border-radius: 4px;
  padding: 2px calc(var(--u) * 1.5);
  height: fit-content;
  text-align: center;
}

.source-page {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--texte-3);
  display: block;
  margin-top: 2px;
}

.liens-connexes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lien-connexe {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: 100px;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3.5);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--texte);
  text-decoration: none;
  transition: all var(--transition);
}

.lien-connexe:hover {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

.lien-connexe:hover .cote { color: rgba(255, 255, 255, 0.75); }

.couverture {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--bord);
  margin-bottom: calc(var(--u) * 6);
  display: block;
}



/* --------------------------------------------------------------------------
   15. Ecrans etroits
   -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .grille-travail { grid-template-columns: 1fr; gap: calc(var(--u) * 6); }
  .rail { position: static; }
  .rail-liste { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
  .rail-liste li + li { margin-top: 0; }
  .filtre { width: auto; border: 1px solid var(--bord); }
}

@media (max-width: 660px) {
  :root { --fs-3xl: 2rem; --fs-2xl: 1.625rem; --fs-xl: 1.3125rem; }

  .enveloppe { padding: calc(var(--u) * 7) calc(var(--u) * 4) calc(var(--u) * 14); }
  .bandeau-inner { padding: calc(var(--u) * 2.5) calc(var(--u) * 4); gap: calc(var(--u) * 2); }
  .marque img { height: 30px; }
  .onglet { padding: calc(var(--u) * 2) calc(var(--u) * 2); font-size: var(--fs-sm); }
  .onglet[aria-current="page"]::after { left: calc(var(--u) * 2); right: calc(var(--u) * 2); }
  .session-nom { display: none; }

  .entree { grid-template-columns: 1fr; gap: calc(var(--u) * 4); padding: calc(var(--u) * 5); }
  .entree-date {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--u) * 1.5);
    padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
    width: fit-content;
  }
  .date-jour { font-size: var(--fs-md); }
  .date-mois, .date-annee { margin-top: 0; }

  .ca-corps { padding: calc(var(--u) * 7) calc(var(--u) * 5) calc(var(--u) * 6); }
  .ca-pied { padding: calc(var(--u) * 4) calc(var(--u) * 5); }
  .liste-sources li { grid-template-columns: 1fr; gap: calc(var(--u) * 1); }
  .source-type { width: fit-content; }
}

/* --------------------------------------------------------------------------
   16. Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fiche:hover, .entree:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   17. Menu du compte
   -------------------------------------------------------------------------- */

.menu-compte { position: relative; }

button.pastille {
  border: none;
  padding: 0;
  font-family: var(--f-ui);
  transition: box-shadow var(--transition);
}

button.pastille:hover { box-shadow: 0 0 0 3px var(--bleu-voile); }

.menu-liste {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-3);
  padding: calc(var(--u) * 1.5);
  z-index: 60;
}

/* L'ouverture passe par un attribut, jamais par `hidden` : une regle de
   classe l'emporterait sur le `display:none` du navigateur. */
.menu-liste[data-ouvert="oui"] { display: flex; }

.menu-liste a,
.menu-liste button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texte);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.menu-liste a:hover,
.menu-liste button:hover { background: var(--bleu-brume); color: var(--bleu); }

.menu-liste a[aria-current="page"] { color: var(--bleu); }

/* Fleche sortante : le lien quitte l'espace membres. */
.menu-sortant::after {
  content: "↗";
  font-size: var(--fs-xs);
  color: var(--texte-3);
}

.menu-liste [data-deconnexion] {
  margin-top: calc(var(--u) * 1.5);
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--bord);
  border-radius: 0;
  color: var(--rouge-fonce);
}

.menu-liste [data-deconnexion]:hover { background: var(--rouge-voile); color: var(--rouge-fonce); }

/* --------------------------------------------------------------------------
   18. Pages de saisie
   -------------------------------------------------------------------------- */

.enveloppe-etroite { max-width: 880px; }

.panneau-plat {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 5);
  margin-bottom: calc(var(--u) * 5);
}

.panneau-plat > h2 {
  font-size: var(--fs-lg);
  margin-bottom: calc(var(--u) * 5);
}

.forme { display: block; }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 4);
}

.champ-court { max-width: 320px; }

.champ-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
}

.champ-libelle {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texte);
  margin-bottom: calc(var(--u) * 2);
}

.champ-aide {
  font-size: var(--fs-xs);
  color: var(--texte-3);
  margin: 0 0 calc(var(--u) * 2);
  max-width: 62ch;
}

.champ-aide code {
  font-family: var(--f-mono);
  background: var(--fond);
  padding: 0 4px;
  border-radius: 3px;
}

.requis { color: var(--rouge); }

.champ textarea,
.champ select {
  width: 100%;
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  padding: calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ textarea { resize: vertical; line-height: 1.6; }

.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-voile);
}

.champ input[readonly] {
  background: var(--bleu-brume);
  color: var(--texte-2);
  cursor: not-allowed;
}

.champ-markdown {
  font-family: var(--f-texte);
  font-size: var(--fs-md);
}

.champ-case label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  font-size: var(--fs-base);
  font-weight: 500;
}

.champ-case input { width: 18px; height: 18px; accent-color: var(--bleu); }

.jeu-cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: calc(var(--u) * 1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.jeu-cases label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.jeu-cases label:hover { background: var(--bleu-brume); }
.jeu-cases input { accent-color: var(--bleu); }

.apercu {
  display: none;
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 5);
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-radius: var(--r-md);
}

.apercu[data-ouvert="oui"] { display: block; }

.forme-pied {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  margin-top: calc(var(--u) * 5);
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--bord);
}

.bouton-large { width: auto; min-width: 200px; }

.bouton-danger {
  color: var(--rouge-fonce);
  border-color: #f3bdb8;
}

.bouton-danger:hover {
  background: var(--rouge-voile);
  border-color: var(--rouge);
  color: var(--rouge-fonce);
}

.lien-discret {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texte-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lien-discret:hover { color: var(--rouge); }

.valeur-figee {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.succes {
  margin: calc(var(--u) * 3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #0f7b3f;
}

.succes:empty { display: none; }

.puce-neutre,
.puce-brouillon {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
}

.puce-neutre { color: var(--texte-2); background: var(--fond); border: 1px solid var(--bord); }
.puce-brouillon { color: var(--rouge-fonce); background: var(--rouge-voile); }

/* --------------------------------------------------------------------------
   19. Choix du contenu a rediger
   -------------------------------------------------------------------------- */

.jeu-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: calc(var(--u) * 5);
}

.carte-choix {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 6);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.carte-choix:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--bord-fort);
  color: inherit;
}

.carte-choix h2 { font-size: var(--fs-xl); }

.carte-choix p {
  margin: 0;
  color: var(--texte-2);
  font-family: var(--f-texte);
  flex-grow: 1;
}

.carte-choix .cote { color: var(--bleu); }

.note-choix {
  margin-top: calc(var(--u) * 6);
  font-size: var(--fs-sm);
  color: var(--texte-2);
}

/* --------------------------------------------------------------------------
   20. Releve des contributions
   -------------------------------------------------------------------------- */

.bloc-contribution + .bloc-contribution {
  margin-top: calc(var(--u) * 7);
  padding-top: calc(var(--u) * 6);
  border-top: 1px solid var(--bord);
}

.bloc-contribution h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: calc(var(--u) * 4);
}

.compte-fil {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--bleu);
  background: var(--bleu-voile);
  border-radius: 100px;
  padding: 1px calc(var(--u) * 2);
  letter-spacing: 0;
  text-transform: none;
}

.liste-plate { list-style: none; margin: 0; padding: 0; }

.liste-plate li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--bord);
}

.liste-plate li:last-child { border-bottom: none; }

.liste-plate-titre {
  font-weight: 600;
  text-decoration: none;
}

.liste-plate-titre:hover { text-decoration: underline; }

.liste-plate-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   21. Fil de commentaires
   -------------------------------------------------------------------------- */


.bouton-edition { flex-shrink: 0; text-decoration: none; }

.fil { list-style: none; margin: 0 0 calc(var(--u) * 5); padding: 0; }

.fil-message {
  padding: calc(var(--u) * 4) 0;
  border-bottom: 1px solid var(--bord);
}

.fil-message:last-child { border-bottom: none; }

.fil-tete {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 1.5);
}

.fil-auteur { font-size: var(--fs-sm); font-weight: 700; color: var(--bleu-nuit); }

.fil-soi {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bleu);
  background: var(--bleu-voile);
  border-radius: 3px;
  padding: 1px 5px;
}

.fil-tete .lien-discret { margin-left: auto; font-size: var(--fs-xs); }

.fil-corps {
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  color: var(--texte);
}

.fil-corps p { margin: 0 0 calc(var(--u) * 2); }
.fil-corps p:last-child { margin-bottom: 0; }

.fil-vide {
  font-size: var(--fs-sm);
  color: var(--texte-3);
  padding: calc(var(--u) * 3) 0;
}

.forme-commentaire textarea {
  width: 100%;
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  padding: calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  resize: vertical;
  margin-bottom: calc(var(--u) * 3);
}

.forme-commentaire textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-voile);
}

/* --------------------------------------------------------------------------
   22. Assistant
   -------------------------------------------------------------------------- */

.causerie {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 6);
}

.causerie-fil {
  list-style: none;
  margin: 0 0 calc(var(--u) * 5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  max-height: 58vh;
  overflow-y: auto;
}

.bulle { max-width: 92%; }

.bulle-membre { align-self: flex-end; text-align: right; }

.bulle-qui {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: calc(var(--u) * 1.5);
}

.bulle-corps {
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
}

.bulle-membre .bulle-corps {
  background: var(--bleu);
  color: var(--blanc);
  border-bottom-right-radius: 3px;
}

.bulle-assistant .bulle-corps {
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-bottom-left-radius: 3px;
}

.bulle-corps p:first-child { margin-top: 0; }
.bulle-corps p:last-child { margin-bottom: 0; }

.bulle-attente .bulle-corps { color: var(--texte-3); font-style: italic; }

.bulle-sources { margin-top: calc(var(--u) * 3); }

.causerie-forme {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3);
  border-top: 1px solid var(--bord);
  padding-top: calc(var(--u) * 5);
}

.causerie-forme textarea {
  flex: 1;
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  padding: calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte);
  resize: vertical;
}

.causerie-forme textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-voile);
}

.causerie-forme .bouton-primaire { width: auto; flex-shrink: 0; }

.causerie-note {
  margin: calc(var(--u) * 4) 0 0;
  font-size: var(--fs-xs);
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   23. Ecrans etroits — composants ajoutes
   -------------------------------------------------------------------------- */

@media (max-width: 660px) {
  .duo { grid-template-columns: 1fr; gap: 0; }
  .panneau-plat { padding: calc(var(--u) * 5); }
  .champ-court { max-width: none; }
  .bouton-large { width: 100%; min-width: 0; }
  .forme-pied { gap: calc(var(--u) * 3); }
  .causerie { padding: calc(var(--u) * 4); }
  .causerie-forme { flex-direction: column; align-items: stretch; }
  .causerie-forme .bouton-primaire { width: 100%; }
  .bulle { max-width: 100%; }
  .menu-liste { min-width: 200px; }
}

/* --------------------------------------------------------------------------
   24. Marque : le sigle et sa mention
   -------------------------------------------------------------------------- */

.marque-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.marque-mention {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   25. Tete de page : la description prend toute la largeur
   -------------------------------------------------------------------------- */

.tete-page {
  display: block;
  position: relative;
}

.tete-texte { display: block; }

.tete-intro { max-width: none; }

/* Le compteur se pose en haut a droite, sans amputer la description. */
.tete-page .compteur {
  position: absolute;
  top: 0;
  right: 0;
}

/* --------------------------------------------------------------------------
   26. Niveaux de diffusion
   -------------------------------------------------------------------------- */

.diffusion {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Du plus ferme au plus ouvert : le rouge marque la restriction, le bleu
   l'usage courant, le neutre l'ouverture. */
.diffusion-bureau    { color: var(--rouge-fonce); background: var(--rouge-voile); border-color: #f3bdb8; }
.diffusion-adherents { color: var(--bleu);        background: var(--bleu-voile); }
.diffusion-amis      { color: var(--texte-2);     background: var(--fond); border-color: var(--bord); }
.diffusion-public    { color: #0f7b3f;            background: #e8f6ee; border-color: #bfe3cd; }

/* --------------------------------------------------------------------------
   27. Cartes devenues liens
   -------------------------------------------------------------------------- */

a.fiche,
a.entree {
  text-decoration: none;
  color: inherit;
}

.fiche-etiquettes {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 3);
}

.fiche-etiquettes .etiquette-type { margin-bottom: 0; }

/* Les titres de carte ne sont plus des balises de titre : ils portent donc
   leur mise en forme eux-memes. */
.fiche-titre,
.entree-titre {
  display: block;
  font-family: var(--f-ui);
  font-weight: 700;
  color: var(--bleu-nuit);
  letter-spacing: -0.02em;
}

.fiche-titre {
  font-size: var(--fs-md);
  line-height: 1.3;
  margin-bottom: calc(var(--u) * 1.5);
}

.entree-titre {
  font-size: var(--fs-xl);
  line-height: 1.25;
  margin-bottom: calc(var(--u) * 2);
}

.fiche-dates,
.fiche-resume,
.entree-resume {
  display: block;
}

.fiche-dates { margin-bottom: calc(var(--u) * 3); }
.fiche-resume { margin-bottom: calc(var(--u) * 5); }
.entree-resume { margin-bottom: calc(var(--u) * 4); }

/* --------------------------------------------------------------------------
   28. Lecture pleine page
   -------------------------------------------------------------------------- */

.enveloppe-lecture { max-width: 940px; }

.fil-ariane {
  margin: 0 0 calc(var(--u) * 5);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.lecture {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 8) calc(var(--u) * 9) calc(var(--u) * 9);
}

.lecture-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 3);
}

.lecture-etiquettes {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
}

.lecture-etiquettes .etiquette-type { margin-bottom: 0; }

.lecture-titre {
  font-size: var(--fs-3xl);
  line-height: 1.1;
  margin-bottom: calc(var(--u) * 2);
}

.lecture-chapo {
  font-family: var(--f-texte);
  font-size: var(--fs-lg);
  color: var(--texte-2);
  line-height: 1.6;
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 6);
  max-width: var(--max-texte);
}

.lecture-rubriques {
  display: flex;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
  margin: 0 0 calc(var(--u) * 6);
}

.etiquette-forte {
  background: var(--bleu-voile);
  border-color: var(--bleu-voile);
  color: var(--bleu);
  font-weight: 700;
}

.bloc-fil {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
  margin-top: calc(var(--u) * 5);
}

.bloc-fil h2 {
  font-size: var(--fs-lg);
  margin-bottom: calc(var(--u) * 5);
}

/* --------------------------------------------------------------------------
   29. Fil : reponses, mentions
   -------------------------------------------------------------------------- */

.fil-actions {
  display: flex;
  gap: calc(var(--u) * 3);
  margin-left: auto;
}

.fil-reponses {
  list-style: none;
  margin: calc(var(--u) * 3) 0 0;
  padding: 0 0 0 calc(var(--u) * 6);
  border-left: 2px solid var(--bleu-voile);
}

.fil-message-reponse {
  padding: calc(var(--u) * 3) 0;
  border-bottom: none;
}

.fil-repondre { margin-top: calc(var(--u) * 2); }

.fil-repondre .forme-commentaire { margin-top: calc(var(--u) * 3); }

.mention {
  font-weight: 600;
  color: var(--bleu);
}

.zone-mention { position: relative; }

.mentions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  list-style: none;
  margin: 4px 0 0;
  padding: calc(var(--u) * 1);
  max-height: 200px;
  overflow-y: auto;
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  box-shadow: var(--ombre-2);
}

.mentions[data-ouvert="oui"] { display: block; }

.mentions button {
  display: block;
  width: 100%;
  text-align: left;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--texte);
}

.mentions button:hover { background: var(--bleu-brume); color: var(--bleu); }

/* --------------------------------------------------------------------------
   30. Editeur enrichi
   -------------------------------------------------------------------------- */

.editeur {
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  overflow: hidden;
}

.editeur:focus-within {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--bleu-voile);
}

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: calc(var(--u) * 1.5);
  background: var(--bleu-brume);
  border-bottom: 1px solid var(--bord);
}

.outil {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--texte-2);
  transition: all var(--transition);
}

.outil:hover {
  background: var(--blanc);
  border-color: var(--bord);
  color: var(--bleu);
}

.outil-gras { font-weight: 800; }
.outil-italique { font-style: italic; }
.outil-code { font-family: var(--f-mono); }

.surface {
  min-height: 320px;
  padding: calc(var(--u) * 5) calc(var(--u) * 6);
  outline: none;
  font-size: var(--fs-md);
  max-width: none;
}

.surface:empty::before {
  content: "Commencez à écrire…";
  color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   31. Selecteur multiple
   -------------------------------------------------------------------------- */

.selecteur { position: relative; }

.jetons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 2);
}

.jeton {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--bleu);
  background: var(--bleu-voile);
  border-radius: 100px;
  padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 3);
}

.jeton button {
  border: none;
  background: none;
  padding: 0 calc(var(--u) * 1.5);
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--bleu);
  border-radius: 100px;
}

.jeton button:hover { color: var(--rouge); }

.jeton-vide {
  font-size: var(--fs-xs);
  color: var(--texte-3);
}

.selecteur-bouton {
  width: 100%;
  text-align: left;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: 1px dashed var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--blanc);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texte-2);
}

.selecteur-bouton:hover { border-color: var(--bleu); color: var(--bleu); }

.selecteur-panneau {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 25;
  margin-top: 4px;
  padding: calc(var(--u) * 3);
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-2);
}

.selecteur-panneau[data-ouvert="oui"] { display: block; }

.selecteur-recherche {
  width: 100%;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  margin-bottom: calc(var(--u) * 2);
}

/* Deux ou trois colonnes selon la place : un vocabulaire de vingt entrees
   se parcourt du regard, il ne se deroule pas. */
.selecteur-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
}

.selecteur-liste .selecteur-vide { grid-column: 1 / -1; }

.selecteur-liste label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.selecteur-liste label:hover { background: var(--bleu-brume); }
.selecteur-liste input { accent-color: var(--bleu); }

.selecteur-vide {
  padding: calc(var(--u) * 2);
  font-size: var(--fs-xs);
  color: var(--texte-3);
}

.selecteur-ajout {
  display: flex;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--bord);
}

.selecteur-ajout input {
  flex: 1;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   32. Repeteur et image
   -------------------------------------------------------------------------- */

.repeteur { list-style: none; margin: 0 0 calc(var(--u) * 3); padding: 0; }

.repeteur-ligne {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--bord);
}

.repeteur-champs {
  display: grid;
  grid-template-columns: 130px 1fr 90px 1fr;
  gap: calc(var(--u) * 2);
  flex: 1;
}

.repeteur-champs input,
.repeteur-champs select {
  width: 100%;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  background: var(--blanc);
}

.champ-image-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
}

.champ-image-actions .champ-aide { margin: 0; }

.champ-image .bouton { cursor: pointer; }

.apercu-couverture {
  display: block;
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-md);
  border: 1px solid var(--bord);
  margin-bottom: calc(var(--u) * 3);
}

.champ-moyen { max-width: 440px; }

/* --------------------------------------------------------------------------
   33. Bascules de notification
   -------------------------------------------------------------------------- */

.liste-bascules { list-style: none; margin: 0; padding: 0; }

.liste-bascules li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 4) 0;
  border-bottom: 1px solid var(--bord);
}

.liste-bascules li:last-child { border-bottom: none; }

.bascule-libelle {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
}

.bascule-texte .champ-aide { margin: 2px 0 0; }

.bascule { position: relative; flex-shrink: 0; cursor: pointer; }

.bascule input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.bascule-piste {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 100px;
  background: var(--bord-fort);
  transition: background-color var(--transition);
  position: relative;
}

.bascule-piste::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre-1);
  transition: transform var(--transition);
}

.bascule input:checked + .bascule-piste { background: var(--bleu); }
.bascule input:checked + .bascule-piste::after { transform: translateX(20px); }
.bascule input:focus-visible + .bascule-piste { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   34. Ecrans etroits — ajouts
   -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .lecture { padding: calc(var(--u) * 7) calc(var(--u) * 6) calc(var(--u) * 9); }
  .bloc-fil { padding: calc(var(--u) * 6); }
  .repeteur-champs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 660px) {
  .tete-page .compteur { position: static; margin-top: calc(var(--u) * 3); }
  .lecture { padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 7); }
  .bloc-fil { padding: calc(var(--u) * 5) calc(var(--u) * 4); }
  .repeteur-champs { grid-template-columns: 1fr; }
  .repeteur-ligne { flex-direction: column; gap: calc(var(--u) * 2); }
  .surface { padding: calc(var(--u) * 4); min-height: 240px; }
  .liste-bascules li { gap: calc(var(--u) * 3); }
  .fil-reponses { padding-left: calc(var(--u) * 3); }
}

/* --------------------------------------------------------------------------
   35. Etats d'un contenu
   -------------------------------------------------------------------------- */

.puce-etat {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Le brouillon ne regarde que son auteur ; « a valider » attend quelqu'un,
   d'ou la teinte plus vive. */
.puce-etat-draft {
  color: var(--texte-2);
  background: var(--fond);
  border-color: var(--bord);
}

.puce-etat-review {
  color: #8a5a00;
  background: #fdf3e0;
  border-color: #f0d9a8;
}

/* --------------------------------------------------------------------------
   36. Champ image : bibliotheque et import
   -------------------------------------------------------------------------- */

.panneau-image {
  display: none;
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 4);
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-radius: var(--r-md);
}

.panneau-image[data-ouvert="oui"] { display: block; }

.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: calc(var(--u) * 3);
  list-style: none;
  margin: calc(var(--u) * 3) 0 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
}

.vignette {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--blanc);
  overflow: hidden;
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.vignette:hover { border-color: var(--bleu); box-shadow: var(--ombre-2); }

.vignette-choisie { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-voile); }

.vignette img {
  display: block;
  width: 100%;
  height: 88px;
  object-fit: cover;
  background: var(--fond);
}

.vignette-nom {
  display: block;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--texte-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ligne-adresse {
  display: flex;
  gap: calc(var(--u) * 2);
  align-items: center;
}

.ligne-adresse input {
  flex: 1;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  background: var(--blanc);
}

.etat-erreur { color: var(--rouge-fonce); font-weight: 600; }

@media (max-width: 660px) {
  .vignettes { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .ligne-adresse { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   37. Chronologie

   Les evenements se lisent le long d'un filet vertical : l'annee tient le
   filet, les jalons s'y accrochent. Le filet est decoratif — c'est la liste
   ordonnee qui porte le sens.
   -------------------------------------------------------------------------- */

.barre-chrono {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(var(--u) * 3);
}

.bouton-discret {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  background: var(--blanc);
  color: var(--texte-2);
  transition: all var(--transition);
}

.bouton-discret:hover:not(:disabled) {
  border-color: var(--bleu);
  color: var(--bleu);
  background: var(--bleu-brume);
}

.bouton-discret:disabled { opacity: 0.5; cursor: wait; }

.bouton-discret[aria-pressed="true"] {
  border-color: var(--bleu);
  color: var(--bleu);
  background: var(--bleu-voile);
}

.bouton-ecarter:hover:not(:disabled) {
  border-color: var(--rouge);
  color: var(--rouge-fonce);
  background: var(--rouge-voile);
}

.chrono { list-style: none; margin: 0; padding: 0; }

.chrono-annee {
  position: relative;
  padding-left: calc(var(--u) * 9);
  padding-bottom: calc(var(--u) * 5);
}

/* Le filet court entre les annees, jamais sous la derniere. */
.chrono-annee::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 2.5);
  top: calc(var(--u) * 7);
  bottom: 0;
  width: 2px;
  background: var(--bord);
}

.chrono-annee:last-child::before { display: none; }

.chrono-repere {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--bleu);
  margin: 0 0 calc(var(--u) * 3);
  letter-spacing: 0.02em;
}

.chrono-repere::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * -7.5);
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--bleu);
}

.chrono-jalons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * 2.5);
}

.jalon {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 4);
  font-family: var(--f-ui);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.jalon:hover {
  border-color: var(--bord-fort);
  box-shadow: var(--ombre-2);
}

.jalon-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  margin-bottom: calc(var(--u) * 2);
}

.jalon-date {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--texte-2);
}

.jalon-etiquettes {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
}

.jalon-etiquettes .etiquette-type { margin-bottom: 0; }

.jalon-titre {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--bleu-nuit);
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--u) * 1.5);
}

.jalon-titre a { color: inherit; text-decoration: none; }
.jalon-titre a:hover { color: var(--bleu); text-decoration: underline; }

.jalon-lieu {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin: 0 0 calc(var(--u) * 2);
}

.jalon-resume {
  font-family: var(--f-texte);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--texte-2);
  margin: 0 0 calc(var(--u) * 2.5);
  max-width: 62ch;
}

.jalon-pied {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  margin: 0;
  padding-top: calc(var(--u) * 2.5);
  border-top: 1px solid var(--bord);
}

.jalon-actions {
  display: flex;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
  margin: calc(var(--u) * 3) 0 0;
}

/* --------------------------------------------------------------------------
   38. Etat de relecture d'un evenement

   Un fait repere par la machine doit se distinguer d'un fait relu, partout
   ou il apparait : la pastille et le bandeau disent la meme chose, l'une en
   passant, l'autre en toutes lettres.
   -------------------------------------------------------------------------- */

.etat-releve {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

.etat-releve-propose {
  color: #8a5a00;
  background: #fdf3e0;
  border-color: #f0dcb4;
}

.etat-releve-rejete {
  color: var(--texte-3);
  background: var(--fond);
  border-color: var(--bord);
}

.note-relecture {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #6f4a05;
  background: #fdf7ec;
  border: 1px solid #f0dcb4;
  border-left: 3px solid #d99b20;
  border-radius: var(--r-sm);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  margin: 0 0 calc(var(--u) * 4);
}

.note-relecture p { margin: 0; }
.note-relecture p + .jalon-actions { margin-top: calc(var(--u) * 3); }

.note-relecture-ecarte {
  color: var(--texte-2);
  background: var(--fond);
  border-color: var(--bord);
  border-left-color: var(--bord-fort);
}

/* La citation d'ou vient l'evenement : c'est une piece de verification, pas
   un ornement — d'ou la police de texte et le filet bleu. */
.extrait-source {
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--texte);
  background: var(--bleu-brume);
  border-left: 3px solid var(--bleu);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  margin: 0 0 calc(var(--u) * 3);
  white-space: pre-wrap;
}

/* Le texte des bulletins vient de l'ocerisation : il porte ses coupures de
   ligne et ses numeros de page. On les garde, mais on les tient a distance. */
.texte-ocerise p {
  white-space: pre-wrap;
}

@media (max-width: 660px) {
  .chrono-annee { padding-left: calc(var(--u) * 6); }
  .chrono-annee::before { left: calc(var(--u) * 1.5); }
  .chrono-repere::before { left: calc(var(--u) * -5.5); }
  .barre-chrono { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   39. Frises horizontales

   Un rail, des jalons, un compte sous chacun. La frise sert de filtre, mais
   elle informe avant qu'on clique : on y lit d'un coup d'oeil ou le fonds est
   dense et ou il manque.
   -------------------------------------------------------------------------- */

.frise {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 5);
}

/* Le rail traverse la piste, derriere les points. Sur ecran etroit la piste
   defile horizontalement plutot que de se casser en deux lignes : une frise
   qui se replie n'est plus une frise. */
.frise-piste {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 2);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: calc(var(--u) * 1);
}

.frise-piste::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--bord) 0%,
    var(--bord-fort) 12%,
    var(--bord-fort) 88%,
    var(--bord) 100%);
}

.frise-segment {
  position: relative;
  flex: 1 1 0;
  min-width: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
}

.frise-bornes {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: var(--texte-3);
  height: 14px;
}

/* Le point est le seul element aligne sur le rail : sa position verticale est
   donc calee sur le `top` de `.frise-piste::before`. */
.frise-point {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--bord-fort);
  margin: calc(var(--u) * 1) 0;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.frise-libelle {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--texte-2);
  max-width: 15ch;
}

.frise-nb {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--bleu);
  background: var(--bleu-voile);
  padding: 1px calc(var(--u) * 1.5);
  border-radius: 3px;
}

.frise-segment:hover:not(:disabled) { background: var(--bleu-brume); }
.frise-segment:hover:not(:disabled) .frise-point { border-color: var(--bleu); }

.frise-segment[aria-pressed="true"] {
  background: var(--bleu-voile);
  border-color: var(--bleu);
}

.frise-segment[aria-pressed="true"] .frise-point {
  background: var(--bleu);
  border-color: var(--bleu);
  transform: scale(1.15);
}

.frise-segment[aria-pressed="true"] .frise-libelle { color: var(--bleu-nuit); }

/* Une periode sans matiere reste visible : le creux fait partie de la
   chronologie. Elle ne promet simplement pas un filtre qu'elle ne tiendrait
   pas. */
.frise-segment-vide { cursor: default; }
.frise-segment-vide .frise-libelle,
.frise-segment-vide .frise-bornes { color: var(--texte-3); opacity: 0.6; }
.frise-segment-vide .frise-point { border-color: var(--bord); border-style: dashed; }
.frise-segment-vide .frise-nb { color: var(--texte-3); background: var(--fond); }

.frise-sous {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 4);
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--bord);
}

.frise-jeton {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--blanc);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--texte-2);
  transition: all var(--transition);
}

.frise-jeton .nb {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  color: var(--texte-3);
}

.frise-jeton:hover { border-color: var(--bleu); color: var(--bleu); }

.frise-jeton[aria-pressed="true"] {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

.frise-jeton[aria-pressed="true"] .nb { color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   40. Etoile, chronologie, selection

   Trois marques qui voyagent ensemble : ce qui est retenu, a quelle
   chronologie cela appartient, et l'etat de sa relecture.
   -------------------------------------------------------------------------- */

.etoile {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  color: var(--texte-3);
  background: none;
  border: none;
  padding: 0 calc(var(--u) * 1) 0 0;
  vertical-align: baseline;
  transition: color var(--transition), transform var(--transition);
}

button.etoile:hover { color: #c9922a; transform: scale(1.2); }
button.etoile:disabled { opacity: 0.4; cursor: wait; }
.etoile-pleine { color: #c9922a; }

/* Le liseré doré tient lieu de signal sur la carte : l'etoile seule se perd
   dans une liste de trente lignes. */
.jalon-marquant,
.entree-marquante { border-left: 3px solid #e0b352; }

.domaine {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

.domaine-services { color: var(--bleu-nuit); background: #e4e9f4; border-color: #c9d4e8; }
.domaine-amicale  { color: #7a3b52;          background: #fbeaf0; border-color: #f0cdd9; }
.domaine-vide     { color: var(--texte-3);   background: var(--fond); border-color: var(--bord); border-style: dashed; }

/* « Tous » n'est pas un critere de plus : c'est le retour a la vue complete,
   d'ou le trait au-dessous plutot qu'a cote. */
.filtre-tous {
  border-bottom: 1px solid var(--bord);
  border-radius: 0;
  font-style: italic;
}

.note-relecture-classer {
  color: var(--bleu-encre);
  background: var(--bleu-brume);
  border-color: var(--bleu-voile);
  border-left-color: var(--bleu);
}

/* La barre au-dessus de la chronologie porte deux choses de nature
   differente : une sortie vers l'ephemeride, et le sens de lecture. */
.barre-chrono { justify-content: space-between; gap: calc(var(--u) * 3); flex-wrap: wrap; }

a.bouton-discret {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bouton-ephemeride { font-weight: 700; color: var(--bleu); border-color: var(--bleu-voile); }
.bouton-ephemeride:hover { background: var(--bleu-voile); }

.bouton-charger {
  width: 100%;
  justify-content: center;
  gap: calc(var(--u) * 2);
  text-decoration: none;
  font-weight: 700;
  color: var(--bleu);
  border-color: var(--bleu);
  background: var(--bleu-voile);
}

.bouton-charger:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* --------------------------------------------------------------------------
   41. Ephemeride

   Pas de colonnes de jours de semaine : un anniversaire traverse les annees,
   et le meme quantieme n'est pas tombe le meme jour. Une grille de quantiemes
   dit la verite ; un calendrier hebdomadaire en inventerait une.
   -------------------------------------------------------------------------- */

.mois-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 4);
}

.mois-onglet {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  background: var(--blanc);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--texte-2);
  text-transform: capitalize;
  transition: all var(--transition);
}

.mois-onglet .nb { font-family: var(--f-mono); font-size: 0.625rem; color: var(--texte-3); }
.mois-onglet:hover { border-color: var(--bleu); color: var(--bleu); }

.mois-onglet-actif {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

.mois-onglet-actif .nb { color: rgba(255, 255, 255, 0.75); }

.calendrier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 5);
}

.case-jour {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  background: var(--blanc);
  font-family: var(--f-ui);
  transition: all var(--transition);
}

.case-quantieme { font-size: var(--fs-sm); font-weight: 700; color: var(--bleu-nuit); }

.case-nb {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  color: var(--bleu);
  background: var(--bleu-voile);
  padding: 0 4px;
  border-radius: 3px;
}

.case-etoile { position: absolute; top: 2px; right: 4px; font-size: 0.625rem; color: #c9922a; }
.case-rond { position: absolute; top: 4px; right: 6px; font-size: 0.75rem; color: var(--bleu); }

.case-jour:hover:not(:disabled) { border-color: var(--bleu); background: var(--bleu-brume); }

.case-jour-vide { background: var(--fond); cursor: default; }
.case-jour-vide .case-quantieme { color: var(--texte-3); font-weight: 400; }

.case-jour-active {
  border-color: var(--bleu);
  background: var(--bleu-voile);
  box-shadow: inset 0 0 0 1px var(--bleu);
}

/* Le jour courant est signale par le filet tricolore de la maison, en petit. */
.case-jour-aujourdhui::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 3px;
  height: 2px;
  background: linear-gradient(to right, var(--bleu) 33%, var(--blanc) 33% 66%, var(--rouge) 66%);
}

.jour-panneau {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  padding: calc(var(--u) * 5);
}

.jour-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  padding-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--bord);
  margin-bottom: calc(var(--u) * 3);
}

.jour-titre {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bleu-nuit);
  margin: 0;
}

.jour-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 3); }

.jour-fait {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: calc(var(--u) * 5);
  align-items: start;
}

.jour-fait-marquant { border-left: 3px solid #e0b352; padding-left: calc(var(--u) * 3); }

.jour-age {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 1);
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-radius: var(--r-sm);
  text-align: center;
}

.jour-age strong {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--bleu-nuit);
  letter-spacing: -0.03em;
}

.jour-age span { font-size: 0.625rem; color: var(--texte-2); }

.jour-rond {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blanc);
  background: var(--bleu);
  padding: 0 4px;
  border-radius: 3px;
  margin-top: 3px;
}

.jour-corps { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }

.jour-etiquettes {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
}

.jour-etiquettes .etiquette-type { margin-bottom: 0; }

.jour-lien {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--bleu-nuit);
  text-decoration: none;
  line-height: 1.3;
}

.jour-lien:hover { color: var(--bleu); text-decoration: underline; }
.jour-meta { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--texte-3); }

.jour-resume {
  font-family: var(--f-texte);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--texte-2);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   42. Retours, registre des bulletins, confirmation
   -------------------------------------------------------------------------- */

/* Un long article se termine loin de son fil d'Ariane : le retour se redonne
   en bas plutot que d'obliger a remonter. */
.retour-liste {
  display: flex;
  gap: calc(var(--u) * 5);
  flex-wrap: wrap;
  margin: calc(var(--u) * 6) 0 0;
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--bord);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.liste-bulletins { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1); }

.liste-bulletins a {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}

.liste-bulletins a:hover { background: var(--bleu-brume); }

.bulletin-numero {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--bleu);
  min-width: 74px;
}

.bulletin-titre { font-size: var(--fs-sm); font-weight: 600; flex: 1; }

.fichier-actuel {
  font-size: var(--fs-xs);
  color: var(--texte-2);
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-radius: var(--r-sm);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  margin: 0 0 calc(var(--u) * 3);
}

/* La meme boite sert d'alerte et de confirmation : c'est la couleur qui dit
   laquelle des deux, et le role="alert" reste bon dans les deux cas. */
.alerte-bonne {
  color: #0f5f33;
  background: #e8f6ee;
  border-color: #bfe3cd;
}

.texte-brut {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.entree-archive .entree-titre { margin-bottom: calc(var(--u) * 2); }
.entree-archive .entree-titre a { color: inherit; text-decoration: none; }
.entree-archive .entree-titre a:hover { color: var(--bleu); text-decoration: underline; }

@media (max-width: 660px) {
  .frise { padding: calc(var(--u) * 4) calc(var(--u) * 3); }
  .frise-segment { min-width: 96px; }
  .calendrier { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .jour-fait { grid-template-columns: 60px 1fr; gap: calc(var(--u) * 3); }
  .retour-liste { gap: calc(var(--u) * 3); }
}

/* La prochaine echeance, au-dessus du calendrier : ouvrir sur un jour vide
   est le cas ordinaire, et ne dirait rien sans cette ligne. */
.bandeau-prochain {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
  margin: 0 0 calc(var(--u) * 5);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  background: var(--bleu-brume);
  border: 1px solid var(--bleu-voile);
  border-left: 3px solid var(--bleu);
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--texte-2);
}

.bandeau-prochain button {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bleu);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bandeau-prochain button:hover { color: var(--bleu-nuit); }

/* --------------------------------------------------------------------------
   43. Prose enrichie

   Ce que `rendreMarkdown` sait produire doit avoir une allure : sans quoi la
   barre d'outils promet une mise en forme que la lecture rend au kilometre.
   -------------------------------------------------------------------------- */

.prose h4 {
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  font-weight: 700;
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 1.5);
}

.prose h5 {
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--texte-2);
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 1);
}

.prose strong { font-weight: 700; color: var(--bleu-nuit); }
.prose del { color: var(--texte-3); }

.prose a {
  color: var(--bleu);
  text-decoration-color: var(--bord-fort);
  text-underline-offset: 3px;
}

.prose a:hover { text-decoration-color: var(--bleu); }

/* Le filet de separation : un signe de respiration, pas une barre de menu. */
.prose hr {
  border: none;
  height: 1px;
  background: var(--bord);
  margin: calc(var(--u) * 8) auto;
  width: 40%;
}

.prose figure {
  margin: calc(var(--u) * 6) 0;
}

.prose figure img,
.prose .image-enligne {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--bord);
}

.prose figcaption {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  color: var(--texte-3);
  margin-top: calc(var(--u) * 2);
  padding-left: calc(var(--u) * 1);
  border-left: 2px solid var(--bord);
}

/* Un tableau large ne doit pas pousser la page : c'est lui qui glisse, dans
   son propre conteneur. Le filet a droite indique qu'il reste a voir. */
.tableau-defilant {
  overflow-x: auto;
  margin: 0 0 calc(var(--u) * 5);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--blanc);
  -webkit-overflow-scrolling: touch;
}

.tableau-defilant table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
}

.tableau-defilant th,
.tableau-defilant td {
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3.5);
  text-align: left;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}

.tableau-defilant thead th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-3);
  background: var(--bleu-brume);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.tableau-defilant tbody tr:last-child td { border-bottom: none; }
.tableau-defilant tbody tr:hover { background: var(--bleu-brume); }

.prose pre {
  overflow-x: auto;
  background: var(--bleu-nuit);
  color: #dce6f5;
  border-radius: var(--r-md);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  margin: 0 0 calc(var(--u) * 5);
  -webkit-overflow-scrolling: touch;
}

.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* La surface de saisie montre le meme rendu : les tableaux et les images y
   sont manipulables, donc bornes comme a la lecture. */
.surface table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-bottom: calc(var(--u) * 4);
}

.surface th,
.surface td {
  border: 1px solid var(--bord-fort);
  padding: calc(var(--u) * 2);
  min-width: 60px;
}

.surface th { background: var(--bleu-brume); }
.surface figure img { max-width: 100%; }

.outil-barre { text-decoration: line-through; }

/* Le repli de la transcription brute, sous l'editeur. */
.repli {
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--fond);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 4);
}

.repli > summary {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texte-2);
  cursor: pointer;
}

.repli[open] > summary { margin-bottom: calc(var(--u) * 3); }

/* --------------------------------------------------------------------------
   44. Telephone

   Deux corrections de fond plutot qu'un rapetissement general : la barre
   d'onglets passe sur sa propre ligne et defile — six onglets ne tiennent pas
   sur 375 pixels — et le rail se replie derriere un bouton, sinon il faut
   traverser six sections de filtres avant le premier resultat.
   -------------------------------------------------------------------------- */

.bascule-rail {
  display: none;
  align-items: center;
  gap: calc(var(--u) * 2);
  width: 100%;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-1);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--texte);
}

.bascule-rail .nb {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--blanc);
  background: var(--bleu);
  border-radius: 100px;
  padding: 1px calc(var(--u) * 2);
}

.bascule-rail .chevron { margin-left: auto; color: var(--texte-3); }

@media (max-width: 940px) {
  .bascule-rail:not([hidden]) { display: flex; }
}

@media (max-width: 660px) {
  .enveloppe { padding: calc(var(--u) * 5) calc(var(--u) * 4) calc(var(--u) * 10); }

  /* L'en-tete passe sur deux rangees : marque et compte en haut, onglets en
     dessous, sur toute la largeur. */
  .bandeau-inner { flex-wrap: wrap; row-gap: calc(var(--u) * 2); }
  .marque-sigle { display: block; font-size: var(--fs-sm); }

  .nav-onglets {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-top: 1px solid var(--bord);
    padding-top: calc(var(--u) * 1);
  }

  .nav-onglets::-webkit-scrollbar { display: none; }

  .onglet {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  }

  .onglet[aria-current="page"]::after {
    left: calc(var(--u) * 3);
    right: calc(var(--u) * 3);
    bottom: 0;
  }

  /* Les listes de definitions de l'encadre passent en une colonne : deux
     colonnes sur 320 pixels coupent chaque valeur en trois lignes. */
  .encadre dl { grid-template-columns: 1fr; gap: calc(var(--u) * 1) 0; }
  .encadre dt { padding-top: calc(var(--u) * 2); }
  .encadre dt:first-child { padding-top: 0; }

  .tete-page { gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 5); }
  /* La pastille de comptage garde sa forme de pastille : etiree sur toute
     la largeur, elle passe pour un champ de saisie. */
  .tete-page .compteur { width: fit-content; }
  .lecture-tete { gap: calc(var(--u) * 2); }

  /* Cibles tactiles : une pastille de filtre se vise au doigt. */
  .filtre { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
  .outil { padding: calc(var(--u) * 2) calc(var(--u) * 2.5); }

  .prose { font-size: var(--fs-base); }
  .prose hr { width: 60%; margin: calc(var(--u) * 6) auto; }
  .prose figure { margin: calc(var(--u) * 5) calc(var(--u) * -1); }

  .frise-segment { min-width: 88px; }
  .jour-tete { gap: calc(var(--u) * 2); }
  .jour-titre { font-size: var(--fs-lg); }

  .bulletin-numero { min-width: 0; }
  .liste-bulletins a { gap: calc(var(--u) * 2); }
}

/* Ecrans tres etroits : on ne descend plus la taille du texte, on retire
   l'ornement. */
@media (max-width: 400px) {
  .calendrier { grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 1); }
  .case-jour { aspect-ratio: auto; min-height: 40px; }
  .case-nb { display: none; }
  .jour-fait { grid-template-columns: 1fr; gap: calc(var(--u) * 2); }
  .jour-age { flex-direction: row; align-items: baseline; gap: calc(var(--u) * 1.5); width: fit-content; }
  .cote-fort { font-size: 0.625rem; }
}