/* =============================================================
   Cabinet Jacques Lévy — feuille de style principale
   Direction : encre de nuit, marbre froid, laiton.
   ============================================================= */

/* ------------------------------------------------- 1. Fontes locales
   Auto-hébergées : aucune requête vers un tiers, aucun transfert
   d'adresse IP hors UE (recommandation CNIL sur les polices distantes). */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-normal-latin.woff2') format('woff2');
  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: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-normal-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;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/eb-garamond-italic-latin.woff2') format('woff2');
  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('../fonts/archivo-normal-latin.woff2') format('woff2');
  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('../fonts/archivo-normal-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;
}

/* ------------------------------------------------------- 2. Jetons */

:root {
  /* Encre — la robe, le dossier, la nuit toulousaine */
  --nuit: #0d1117;
  --nuit-2: #141b24;
  --nuit-3: #1d2733;

  /* Marbre — la pierre de la façade, franchement froide */
  --marbre: #f1f3f2;
  --marbre-2: #e4e9e8;
  --blanc: #fbfcfb;

  /* Laiton — les dorures de la Salle des Illustres, la balance */
  --laiton: #b08a4a;
  --laiton-vif: #cfa863;
  /* Assombri de #85652c : l'ancienne valeur passait sur --marbre (4,84) mais
     échouait sur --marbre-2 (4,40), où se posent les cartes. Ici 5,32 et 4,83
     — AA tenu sur les deux fonds, à l'œil la nuance est indiscernable. */
  --laiton-sourd: #7d5f29; /* variante lisible sur fond clair */

  /* Brique foraine — réservée à l'urgence pénale, nulle part ailleurs */
  --brique: #9a4a34;

  --encre: #10161d;
  --encre-2: #4e5a66;
  --encre-sur-nuit: #c6cfd8;

  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle typographique fluide */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lead: clamp(1.15rem, 0.95rem + 0.7vw, 1.4rem);
  --t-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --t-h2: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --t-h1: clamp(2.6rem, 1.6rem + 4.2vw, 5.25rem);

  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --large: 78rem;
  --texte: 40rem;

  --rythme: clamp(4.5rem, 9vw, 8rem);

  --ombre: 0 1px 2px rgb(13 17 23 / 0.05), 0 12px 32px -12px rgb(13 17 23 / 0.16);
  --ombre-forte: 0 2px 4px rgb(13 17 23 / 0.06), 0 28px 60px -24px rgb(13 17 23 / 0.3);

  --transition: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------- 3. Socle */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--marbre);
  color: var(--encre);
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1rem + 0.28vw, 1.2rem);
  line-height: 1.68;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--laiton); color: var(--nuit); }

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

.evitement {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: var(--t-sm);
  transition: top 180ms;
}
.evitement:focus { top: 0.5rem; }

/* Réservé aux lecteurs d'écran */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------ 4. Gabarit */

.enveloppe {
  width: min(100% - 2 * var(--gouttiere), var(--large));
  margin-inline: auto;
}
.enveloppe--etroite { width: min(100% - 2 * var(--gouttiere), 56rem); margin-inline: auto; }

.bloc { padding-block: var(--rythme); }
.bloc--nuit { background: var(--nuit); color: var(--encre-sur-nuit); }
.bloc--nuit h2, .bloc--nuit h3 { color: var(--blanc); }
.bloc--pierre { background: var(--marbre-2); }

/* Surtitre : petites capitales espacées, filet de laiton à gauche */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-sourd);
}
.surtitre::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
/* Le hero est sombre sans porter .bloc--nuit : sans cette règle, le surtitre
   y garde le laiton sourd (conçu pour fond clair) et tombe à 3,51:1 — sous
   le seuil AA de 4,5 pour du texte de 12 px. Avec --laiton-vif : 8,5:1. */
.bloc--nuit .surtitre,
.hero .surtitre { color: var(--laiton-vif); }

.chapo {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--encre-2);
  max-width: 46ch;
}
.bloc--nuit .chapo { color: var(--encre-sur-nuit); }

/* Filet de section : trait fin, losange central — écho du fronton */
.filet {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 0;
  margin: 0;
  color: var(--laiton);
}
.filet::before,
.filet::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.filet::after { opacity: 0.35; }
.filet span {
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* -------------------------------------------------------- 5. En-tête */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

/* État posé : appliqué par JS au défilement, et d'office hors accueil */
.entete.est-posee,
.entete--opaque {
  background: rgb(241 243 242 / 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(16 22 29 / 0.09);
}
/* Hors accueil, l'en-tête surplombe un bandeau sombre : un fond franc
   évite que le halo du sceau ne se détache du reste de la barre. */
.entete--opaque { background: var(--marbre); }

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--blanc);
  transition: color var(--transition);
}
.entete.est-posee .marque,
.entete--opaque .marque { color: var(--encre); }

/* Le sceau dessiné a été remplacé par l'emblème photographique dans l'en-tête
   comme au pied de page ; la règle ne sert plus qu'aux planches internes
   (apercu-logo.html), d'où sa conservation. */
.marque__sceau { width: 61px; height: 46px; flex: none; }

/* Emblème photographique, en-tête et pied de page : la balance avancée sur la
   place du Capitole, au format 16/9 de la planche d'origine. Le filet évite que
   le rectangle sombre ne flotte sur la barre claire une fois l'en-tête posée.

   Aucun filtre ici, et c'est délibéré. La désaturation est cuite dans le
   fichier, appliquée à la seule façade : la balance, elle, reste en or. Un
   grayscale() en CSS porterait sur toute l'image et effacerait l'or avec la
   brique — c'est le contraste or sur pierre grise qui fait tout l'emblème. */
.marque__embleme {
  width: 82px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 0.24);
  transition: border-color var(--transition);
}
.entete.est-posee .marque__embleme,
.entete--opaque .marque__embleme { border-color: rgb(16 22 29 / 0.18); }

/* Au pied de page, la barre est toujours sombre et la place ne manque pas :
   l'emblème peut respirer un peu plus qu'en en-tête. */
.marque__embleme--pied {
  width: 96px;
  height: 54px;
  border-color: rgb(255 255 255 / 0.18);
}

.marque__nom {
  font-size: 1.24rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.marque__nom em {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.28rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  position: relative;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blanc);
  opacity: 0.82;
  padding-block: 0.4rem;
  transition: opacity var(--transition), color var(--transition);
  white-space: nowrap;
}
.entete.est-posee .nav__lien,
.entete--opaque .nav__lien { color: var(--encre); }
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--laiton);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__lien:hover { opacity: 1; }
.nav__lien:hover::after,
.nav__lien[aria-current='page']::after { transform: scaleX(1); }
.nav__lien[aria-current='page'] { opacity: 1; }

.bascule {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid currentColor;
  color: var(--blanc);
  cursor: pointer;
}
.entete.est-posee .bascule,
.entete--opaque .bascule { color: var(--encre); }
.bascule span {
  display: block;
  width: 18px; height: 1px;
  margin: 4px auto;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.bascule[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bascule[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.bascule[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--laiton);
  background: var(--laiton);
  color: var(--nuit);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--laiton-vif); border-color: var(--laiton-vif); transform: translateY(-2px); }

.bouton--ligne {
  background: transparent;
  color: var(--blanc);
  border-color: rgb(255 255 255 / 0.35);
}
.bouton--ligne:hover { background: rgb(255 255 255 / 0.08); border-color: var(--blanc); color: var(--blanc); }

.bouton--encre {
  background: var(--nuit);
  border-color: var(--nuit);
  color: var(--blanc);
}
.bouton--encre:hover { background: var(--nuit-3); border-color: var(--nuit-3); }

.bouton--sobre {
  background: transparent;
  color: var(--encre);
  border-color: rgb(16 22 29 / 0.3);
}
.bouton--sobre:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--laiton-sourd);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transition), gap var(--transition);
}
.lien-fleche:hover { border-color: currentColor; gap: 0.85rem; }
.bloc--nuit .lien-fleche { color: var(--laiton-vif); }

/* --------------------------------------------------------- 7. Hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(38rem, 92svh, 56rem);
  margin-top: -5.2rem;
  padding-top: 8rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--nuit);
  color: var(--blanc);
  overflow: hidden;
  isolation: isolate;
}

/* Halo : la lueur des projecteurs sur la façade */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 55% at 50% 88%, rgb(176 138 74 / 0.16), transparent 68%),
    radial-gradient(120% 90% at 50% 0%, var(--nuit-2), var(--nuit) 62%);
}

/* Le trait de la façade est passé du doré au blanc : sur le bleu nuit, un
   dessin blanc lit comme un relevé d'architecte là où le doré lisait comme un
   ornement. Le blanc étant bien plus lumineux que le doré, l'opacité descend
   de 0.34 à 0.20 pour conserver au dessin exactement le même poids qu'avant —
   il reste un fond, jamais un concurrent du titre. */
.hero__facade {
  position: absolute;
  left: 50%;
  bottom: -1px;
  z-index: -1;
  width: min(150%, 96rem);
  transform: translateX(-50%);
  opacity: 0.20;
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 96%);
  mask-image: linear-gradient(to top, #000 42%, transparent 96%);
  pointer-events: none;
}

.hero__contenu { position: relative; max-width: 54rem; }

.hero__titre {
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin-bottom: 1.5rem;
}
.hero__titre em {
  font-style: italic;
  color: var(--laiton-vif);
}

.hero__chapo {
  font-size: var(--t-lead);
  line-height: 1.56;
  color: rgb(255 255 255 / 0.76);
  max-width: 42ch;
  margin-bottom: 2.25rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Bandeau de preuve, calé en bas du hero */
.socle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: 1.9rem;
}
.socle__item { padding-right: 1.5rem; }
.socle__valeur {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--laiton-vif);
  font-feature-settings: 'onum' 1;
}
.socle__legende {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
  line-height: 1.5;
}

/* Bandeau d'urgence — seule apparition de la brique foraine */
.urgence {
  background: var(--brique);
  color: var(--blanc);
}
.urgence__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  padding-block: 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.urgence strong { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.urgence a {
  color: var(--blanc);
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ----------------------------------------------------- 8. Colonnes */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .duo--inverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.duo__aparte { position: sticky; top: 7rem; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: rgb(16 22 29 / 0.12);
  border: 1px solid rgb(16 22 29 / 0.12);
}
.bloc--nuit .grille { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.12); }

/* Six cartes : deux rangées pleines plutôt qu'une rangée trouée. */
@media (min-width: 62rem) {
  .grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- 9. Cartes */

.domaine {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--marbre);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
.bloc--pierre .domaine { background: var(--marbre-2); }
.domaine:hover { background: var(--blanc); }
.domaine__index {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--laiton-sourd);
  margin-bottom: 1.4rem;
}
.domaine__titre {
  font-size: var(--t-h3);
  margin-bottom: 0.7rem;
}
.domaine__texte {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--encre-2);
  margin-bottom: 1.5rem;
}
.domaine__liste {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--encre-2);
}
.domaine__liste li { padding-left: 1.1rem; position: relative; }
.domaine__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.78em;
  width: 4px; height: 4px;
  background: var(--laiton);
  transform: rotate(45deg);
}
.domaine__pied { margin-top: auto; }

/* Carte sur fond sombre */
.jalon {
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--nuit-2);
}
.jalon__annee {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--laiton-vif);
  font-feature-settings: 'onum' 1;
  margin-bottom: 1rem;
}
.jalon__titre { font-size: 1.22rem; color: var(--blanc); margin-bottom: 0.6rem; }
.jalon__texte { font-size: 0.98rem; line-height: 1.62; color: rgb(255 255 255 / 0.62); margin: 0; }

/* --------------------------------------------------- 10. Chronologie */

.chrono { list-style: none; margin: 0; padding: 0; }
.chrono__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.75rem;
  border-top: 1px solid rgb(16 22 29 / 0.13);
}
.chrono__item:last-child { border-bottom: 1px solid rgb(16 22 29 / 0.13); }
.bloc--nuit .chrono__item { border-color: rgb(255 255 255 / 0.13); }
.chrono__annee {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--laiton-sourd);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.bloc--nuit .chrono__annee { color: var(--laiton-vif); }
.chrono__titre { font-size: 1.28rem; margin-bottom: 0.4rem; }
.chrono__texte { font-size: 1rem; line-height: 1.62; color: var(--encre-2); margin: 0; }
.bloc--nuit .chrono__texte { color: rgb(255 255 255 / 0.6); }

/* ------------------------------------------------------ 11. Citation */

.citation {
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 2px solid var(--laiton);
}
.citation p {
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.05rem);
  line-height: 1.34;
  font-style: italic;
  letter-spacing: -0.012em;
  margin-bottom: 1rem;
}
.citation footer {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.bloc--nuit .citation footer { color: rgb(255 255 255 / 0.5); }

/* -------------------------------------------------------- 12. Portrait */

.portrait {
  position: relative;
  background: var(--nuit-2);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__vide {
  padding: 2rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.32);
  line-height: 2;
}
.portrait::after {
  content: '';
  position: absolute;
  inset: 0.6rem;
  border: 1px solid rgb(176 138 74 / 0.4);
  pointer-events: none;
}
.portrait__legende {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--encre-2);
  line-height: 1.6;
}

/* Crédit photographique : obligatoire sous CC BY-SA, mais il ne doit pas
   concurrencer la légende. Assez lisible pour valoir attribution. */
.portrait__credit {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  color: rgb(16 22 29 / 0.45);
}
.portrait__credit a { color: inherit; text-underline-offset: 2px; }
.portrait__credit a:hover { color: var(--laiton-sourd); }

/* Repli quand la photographie n'a pas encore été fournie — ou qu'elle
   échoue au chargement. Un monogramme gravé plutôt qu'un carré gris :
   l'absence de photo doit ressembler à un parti pris, pas à un oubli.
   C'est site.js qui pose .est-vide quand le fichier manque. */
.portrait__monogramme {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 1;
  color: var(--laiton);
  letter-spacing: 0.04em;
  user-select: none;
}
/* Le monogramme reste dans le flux, la photo se pose par-dessus : rien
   ne clignote pendant le chargement différé, et sans JavaScript la vraie
   photo s'affiche quand même. */
.portrait img { position: absolute; inset: 0; }
.portrait.est-vide img { display: none; }

/* ------------------------------------------------- 12 bis. Membres */

.membre { padding-top: 0; }
.membre__photo {
  position: relative;
  margin: 0 0 1.6rem;
  aspect-ratio: 1 / 1;
  background: var(--nuit-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.membre__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%; /* les visages se cadrent haut */
}
.membre__photo::after {
  content: '';
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgb(176 138 74 / 0.35);
  pointer-events: none;
}
.membre__monogramme {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  line-height: 1;
  color: var(--laiton);
  letter-spacing: 0.04em;
  user-select: none;
}
.membre__photo img { position: absolute; inset: 0; }
.membre__photo.est-vide img { display: none; }
/* La photo déborde le rembourrage de la carte : elle touche les bords. */
.membre > .membre__photo {
  margin-inline: calc(-1 * clamp(1.75rem, 3vw, 2.4rem));
  margin-top: 0;
}

/* ------------------------------------------------- 13. Questions (FAQ) */

.question {
  border-top: 1px solid rgb(16 22 29 / 0.13);
}
.question:last-of-type { border-bottom: 1px solid rgb(16 22 29 / 0.13); }
.question__titre {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.32rem);
  line-height: 1.35;
  color: var(--encre);
  text-align: left;
  cursor: pointer;
}
.question__titre:hover { color: var(--laiton-sourd); }
.question__signe {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  position: relative;
  margin-top: 0.25rem;
  color: var(--laiton-sourd);
}
.question__signe::before,
.question__signe::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--transition);
}
.question__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.question__titre[aria-expanded='true'] .question__signe::after { transform: translate(-50%, -50%) rotate(0); }

.question__corps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
}
.question__corps > div { overflow: hidden; }
.question__titre[aria-expanded='true'] + .question__corps { grid-template-rows: 1fr; }
.question__corps p,
.question__corps ul {
  max-width: 62ch;
  color: var(--encre-2);
  font-size: 1.03rem;
}
.question__corps > div > :first-child { margin-top: 0; }
.question__corps > div > :last-child { margin-bottom: 1.75rem; }

/* --------------------------------------------------- 14. Formulaire */

.formulaire { display: grid; gap: 1.35rem; }
.champ { display: grid; gap: 0.45rem; }
.champ > label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.champ__aide {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--encre-2);
  opacity: 0.85;
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--blanc);
  border: 1px solid rgb(16 22 29 / 0.22);
  border-radius: 0;
  color: var(--encre);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--laiton-sourd);
  box-shadow: 0 0 0 3px rgb(176 138 74 / 0.18);
  outline: none;
}
.champ--case {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}
.champ--case input { width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; accent-color: var(--laiton-sourd); }
.champ--case label {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--encre-2);
}
.pot-de-miel {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.formulaire__etat {
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--laiton-sourd);
  background: var(--marbre-2);
}
.formulaire__etat[data-ton='erreur'] { border-color: var(--brique); }

/* Encart de secret professionnel */
.encart {
  padding: 1.4rem 1.6rem;
  background: var(--marbre-2);
  border-left: 2px solid var(--laiton);
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--encre-2);
}
.bloc--nuit .encart { background: var(--nuit-2); border-color: var(--laiton); color: rgb(255 255 255 / 0.66); }

/* ------------------------------------------------------ 15. Contact */

.coordonnees { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.coordonnees dt,
.coordonnees__cle {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laiton-sourd);
  margin-bottom: 0.4rem;
}
.coordonnees dd { margin: 0; font-size: 1.08rem; line-height: 1.6; }
.coordonnees a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --------------------------------------------------------- 16. Pied */

.pied { background: var(--nuit); color: rgb(255 255 255 / 0.62); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2.75rem;
  padding-bottom: 3rem;
}
.pied__marque { max-width: 22rem; }
.pied__marque .marque { color: var(--blanc); margin-bottom: 1.2rem; }
.pied__texte { font-size: 0.98rem; line-height: 1.62; color: rgb(255 255 255 / 0.55); }
.pied__titre {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laiton-vif);
  margin-bottom: 1.2rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pied__liste a {
  font-family: var(--sans);
  font-size: 0.88rem;
  text-decoration: none;
  color: rgb(255 255 255 / 0.66);
  transition: color var(--transition);
}
.pied__liste a:hover { color: var(--laiton-vif); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-family: var(--sans);
  font-size: 0.76rem;
  color: rgb(255 255 255 / 0.42);
}
.pied__bas p { margin: 0; }

/* --------------------------------------------- 17. Pages de texte */

.titre-page {
  background: var(--nuit);
  color: var(--blanc);
  padding-block: clamp(6.5rem, 12vw, 9rem) clamp(3rem, 6vw, 4.5rem);
  margin-top: -5.2rem;
  padding-top: calc(5.2rem + clamp(4rem, 8vw, 6.5rem));
}
.titre-page h1 { font-size: var(--t-h2); font-weight: 400; margin-bottom: 1.1rem; }
.titre-page .chapo { color: rgb(255 255 255 / 0.7); max-width: 50ch; }

.fil { padding-block: 1.25rem 0; font-family: var(--sans); font-size: 0.75rem; color: var(--encre-2); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.fil li::after { content: '›'; margin-left: 0.5rem; color: var(--laiton-sourd); }
.fil li:last-child::after { content: ''; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* Corps rédactionnel des pages juridiques */
.prose { max-width: 44rem; }
.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  margin: 3.25rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(16 22 29 / 0.13);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.24rem; margin: 2rem 0 0.6rem; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.35rem; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--laiton-sourd); }
.prose a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgb(16 22 29 / 0.13);
  vertical-align: top;
}
.prose th { font-weight: 600; background: var(--marbre-2); }
.enroule { overflow-x: auto; }

/* Champ que seul le cabinet peut renseigner. À retirer avant mise en ligne. */
.a-completer {
  background: rgb(176 138 74 / 0.2);
  border-bottom: 1px dashed var(--laiton-sourd);
  padding: 0.05em 0.3em;
  font-family: var(--sans);
  font-size: 0.82em;
  color: var(--encre);
}

.sommaire {
  padding: 1.5rem 1.75rem;
  background: var(--marbre-2);
  font-family: var(--sans);
  font-size: 0.86rem;
}
.sommaire ol { margin: 0; padding-left: 1.2rem; }
.sommaire li { margin-bottom: 0.4rem; }
.sommaire a { color: var(--encre-2); text-decoration: none; }
.sommaire a:hover { color: var(--laiton-sourd); text-decoration: underline; }

/* ---------------------------------------------- 18. Page de garde */

/* Le seuil du site : le nom, sa qualité, l'emblème. Trois éléments, et la page
   entière fait office de porte.

   Le fond sombre n'est pas une humeur, c'est une nécessité : l'emblème est
   une planche photographique dont les bords se fondent dans le --nuit, fondu
   cuit dans le fichier (voir outils/embleme-garde.py). Sur un fond clair, le
   raccord se verrait comme un cadre gris autour de l'image.

   L'en-tête est masquée ici, et elle seule : un menu de sept entrées au-dessus
   d'une composition qui tient en trois lignes la ferait mentir. La barre
   d'urgence pénale reste — c'est un numéro d'appel, pas de la décoration. */

/* Hauteur ferme, et non plancher : une page de garde qui se partage en
   fractions doit savoir ce qu'elle divise. Avec min-height seule, la hauteur
   reste indéterminée, les fractions n'ont pas de total, et c'est l'emblème qui
   impose sa taille au lieu de la recevoir.
   Les min-height:0 qui suivent lèvent le plancher automatique des boîtes
   flexibles — sans eux, aucune ne consent à passer sous la taille de son
   contenu, et la composition déborde par le bas. */
.corps--garde {
  background: var(--nuit);
  color: var(--encre-sur-nuit);
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.corps--garde .entete { display: none; }
.corps--garde #principal { flex: 1; min-height: 0; display: flex; }

.garde {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  /* Étirement, et non centrage : c'est ce qui donne au seuil une hauteur
     connue, sans quoi sa grille en fractions n'a rien à diviser et se laisse
     dicter la mesure par l'emblème. */
  place-items: stretch;
  /* Une seule rangée, et elle vaut toute la hauteur. Laissée en « auto »,
     elle se serait réglée sur son contenu — et le contenu, lui, attend de
     connaître la rangée pour se répartir. Le minmax(0, 1fr) coupe ce
     raisonnement circulaire par le haut. */
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(1.25rem, 4vh, 2.5rem) var(--gouttiere);
  /* Une lueur chaude, très basse, derrière l'emblème. Elle ne se voit pas :
     elle se remarque si on l'enlève. Sur un aplat de nuit parfaitement plat,
     l'or paraît collé ; ici il paraît éclairé. Posée en fond de l'élément et
     non en ::before, elle passe sous le contenu sans empiler de couche. */
  background: radial-gradient(58% 44% at 50% 55%,
              rgb(198 156 88 / 0.11), rgb(198 156 88 / 0) 72%);
}

/* Le partage demandé par le cabinet : deux tiers de la hauteur pour l'emblème.
   Le tiers restant se répartit à son tour — le nom et sa qualité au-dessus de
   l'emblème, une bande vide sous lui pour que la composition ne pose pas sur
   le bord. Une grille en 1,6fr 4fr 0,4fr le dit exactement, et le tient quelle
   que soit la fenêtre. Un empilement à gouttières ne le tiendrait pas : la
   part de l'image y dépendrait de la taille du titre, donc de la largeur de
   l'écran.
   La troisième bande n'a pas d'élément : elle n'existe que pour réserver le
   pied. Deux enfants seulement se placent, dans les deux premières.
   Pas de gap : une gouttière se prendrait sur les trois bandes et fausserait
   le compte. L'air entre les éléments vient du centrage dans chaque bande. */
.garde__seuil {
  display: grid;
  grid-template-rows: 1.6fr 4fr 0.4fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* Le nom et la qualité tiennent la bande du haut ensemble. Leur écart se
   mesure en vh comme leur corps : sur une fenêtre basse il se resserre avec
   eux, au lieu de les écarter d'un nombre de pixels fixe. */
.garde__nom {
  display: grid;
  justify-items: center;
  gap: clamp(0.4rem, 1.4vh, 1rem);
  min-width: 0;
}

.garde__titre {
  margin: 0;
  /* La largeur donne la taille, la hauteur la plafonne : le titre n'a qu'un
     sixième de l'écran et doit y tenir, y compris sur un portable couché où
     la fenêtre est large et basse. D'où le min() sur une mesure en vh.
     Le plafond en vh reste sous le sixième disponible : « Cabinet Lévy »
     porte un accent en haut et une descendante en bas, et une interligne de 1
     ne leur laisse aucune marge au-delà. */
  font-size: min(clamp(2.6rem, 0.9rem + 7.2vw, 7.25rem), 11.5vh);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--blanc);
  transition: color var(--transition);
}

/* L'emblème occupe toute sa bande — les deux tiers, ni plus ni moins. Sa
   boîte fait la bande entière et contain fait le reste : sur un écran large
   c'est la hauteur qui commande, sur un téléphone la largeur, et dans les
   deux cas l'image reste centrée dans sa part sans jamais la déborder.
   Surtout pas de max-height ici : la boîte serait plus haute que l'image et
   fabriquerait du vide sous elle.

   Deux règles et non une : l'élément de grille est le <picture>, qui n'est
   qu'une boîte en ligne sans dimension propre, et l'image est son enfant.
   Poser object-fit sur le picture ne ferait rien du tout — il faut donner la
   bande au parent, et l'y faire tenir à l'enfant. */
.garde__embleme {
  display: block;
  width: 100%;
  height: 100%;
  /* Le minimum automatique des éléments de grille : une image y refuse par
     défaut de descendre sous sa taille naturelle, et sa bande cesse alors
     d'être une fraction pour devenir la mesure de l'image. C'est le détail
     qui fait tout tenir. */
  min-width: 0;
  min-height: 0;
}
.garde__embleme img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.garde__qualite {
  margin: 0;
  font-family: var(--sans);
  /* Même raisonnement que pour le titre : la largeur donne la mesure, la
     hauteur la plafonne. Un mot de six lettres espacé de 0,4 em occupe près
     de neuf chasses — c'est la largeur qui l'arrête bien avant la hauteur,
     d'où un plafond en vh plus bas que celui du titre. */
  font-size: min(clamp(1rem, 0.42rem + 2.4vw, 2.2rem), 4.6vh);
  font-weight: 500;
  /* L'interlettrage se resserre à mesure que le corps grossit : 0,46 em se
     lisait comme une respiration sur du 15 px, il ferait six lettres isolées
     sur du 35. */
  letter-spacing: 0.4em;
  text-transform: uppercase;
  /* L'interlettrage ajoute une chasse après le dernier signe : sans ce
     décalage, un mot espacé n'est jamais optiquement centré. */
  text-indent: 0.4em;
  color: var(--laiton-vif);
  transition: color var(--transition);
}

.garde__seuil:hover .garde__titre { color: var(--laiton-vif); }
.garde__seuil:hover .garde__qualite { color: var(--blanc); }
.garde__seuil:focus-visible { outline-offset: 8px; }

/* Entrée : le nom, puis sa qualité, puis l'emblème. L'ordre porte le sens. */
.corps--garde .garde__titre,
.corps--garde .garde__qualite,
.corps--garde .garde__embleme {
  animation: paraitre 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.corps--garde .garde__qualite { animation-delay: 160ms; }
.corps--garde .garde__embleme { animation-delay: 340ms; }

@keyframes paraitre {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 40rem) {
  /* Sur un écran étroit, ce n'est plus sa bande qui borne l'emblème mais la
     largeur de la fenêtre : chaque point de gouttière lui est pris sur la
     taille du dessin. On la réduit ici, et là seulement — le titre et la
     qualité tiennent de toute façon sur une ligne courte. */
  .garde { padding-inline: 0.5rem; }
  .garde__qualite { letter-spacing: 0.32em; text-indent: 0.32em; }
}

/* Fenêtre basse — un téléphone couché, l'essentiel des cas. Le titre y remplit
   sa bande au pixel près et sa descendante vient frôler l'emblème. Les
   plafonds en vh des deux textes suffisent partout ailleurs ; ici seulement,
   on les abaisse pour rendre de l'air aux trois bandes. */
@media (max-height: 34rem) {
  .garde__titre { font-size: min(clamp(2.6rem, 0.9rem + 7.2vw, 7.25rem), 9vh); }
  .garde__qualite { font-size: min(clamp(1rem, 0.42rem + 2.4vw, 2.2rem), 3.8vh); }
}

/* --------------------------------------------------- 19. Mouvement */

.reveler {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveler.est-visible { opacity: 1; transform: none; }

/* Sceau : la façade en retrait, la balance au premier plan.
   Le halo reprend la couleur du fond : il évide la façade là où la
   balance passe devant, ce qui crée la profondeur d'une gravure. */
.sceau { --logo-fond: var(--nuit); }
.entete.est-posee .sceau,
.entete--opaque .sceau { --logo-fond: var(--marbre); }
.sceau__halo { stroke: var(--logo-fond); }

.sceau__fac { opacity: 0.4; }
.marque:hover .sceau__fac { opacity: 0.62; }
.sceau__fac { transition: opacity var(--transition); }

/* La balance du sceau s'équilibre à l'ouverture de la page */
.sceau .bal-fleau {
  transform-origin: 84px 54px;
  animation: equilibrer 2.6s cubic-bezier(0.34, 0.6, 0.3, 1) 0.15s both;
}
@keyframes equilibrer {
  0%   { transform: rotate(-9deg); }
  30%  { transform: rotate(5.5deg); }
  55%  { transform: rotate(-2.8deg); }
  75%  { transform: rotate(1.2deg); }
  100% { transform: rotate(0); }
}
.marque:hover .bal-fleau { animation: equilibrer 1.8s cubic-bezier(0.34, 0.6, 0.3, 1) both; }

@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;
  }
  .reveler { opacity: 1; transform: none; }
}

/* -------------------------------------------------- 20. Adaptatif */

@media (max-width: 60rem) {
  /* Le bouton doit rester cliquable par-dessus le panneau déployé. */
  .bascule { display: block; position: relative; z-index: 3; }
  .nav__liste {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--gouttiere) 2.5rem;
    background: var(--nuit);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 420ms;
    max-height: 100svh;
    overflow-y: auto;
  }
  .nav__liste.est-ouverte {
    transform: none;
    visibility: visible;
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }
  .entete.est-posee .nav__liste .nav__lien,
  .entete--opaque .nav__liste .nav__lien { color: var(--blanc); }
  .nav__liste .nav__lien {
    font-size: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }
  .nav__liste .nav__lien::after { display: none; }
  .nav > .bouton { display: none; }
  .duo__aparte { position: static; }
}

@media (max-width: 34rem) {
  .chrono__item { grid-template-columns: 1fr; gap: 0.5rem; }
  .hero__actions .bouton { width: 100%; }
  /* Sur petit écran, le bandeau se réduit au message et au numéro :
     trois lignes au-dessus du pli, c'est trois lignes de trop. */
  .urgence__barre > span { display: none; }
  .urgence__barre { gap: 0.9rem; }
}

/* ---------------------------------------------------- 21. Impression */

@media print {
  .entete, .pied__haut, .urgence, .hero__facade, .bascule { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .bloc--nuit, .titre-page { background: #fff !important; color: #000 !important; }
  .bloc--nuit h2, .bloc--nuit h3, .titre-page h1 { color: #000 !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
}