/* Le Parlement des Lendemains — maquette (R26, R29).
   Fond clair, trois accents modérés (un par chambre), capitales d'inscription pour les
   titres, linéale de service public pour la lecture ; le zéro barré de la police des
   identifiants distingue « O1 » (option) de « 01 ». */

@font-face {
  font-family: "Marcellus";
  src: url("polices/marcellus-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("polices/public-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("polices/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --fond: #f3f5f6;
  --surface: #ffffff;
  --encre: #16202a;
  --encre-2: #47545f;
  --filet: #cfd6dc;
  --filet-fort: #8894a0;

  --present: #8a5d00;
  --present-pale: #fbf3df;
  --c2080: #3f4fa3;
  --c2080-pale: #eceefa;
  --reel: #17705a;
  --reel-pale: #e3f3ee;

  --titre: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --texte: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --mesure: 68ch;
  --rayon: 6px;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  letter-spacing: -0.005em;
}
h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.05rem;
}
p {
  margin: 0;
}
p + p {
  margin-top: 0.8em;
}
a {
  color: inherit;
  text-underline-offset: 0.18em;
}

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

.evitement {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  background: var(--encre);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  z-index: 10;
}
.evitement:focus {
  top: 0.75rem;
}
.evitement-texte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────── Bandeau ───────── */

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  font-family: var(--titre);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.trait {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}
.trait-present {
  stroke: var(--present);
}
.trait-2080 {
  stroke: var(--c2080);
}
.trait-reel {
  stroke: var(--reel);
}
.pupitre {
  fill: var(--encre);
}
.bandeau nav {
  display: flex;
  gap: 0.25rem;
}
.bandeau nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--rayon);
  text-decoration: none;
}
.bandeau nav a:hover {
  background: var(--fond);
}
.bandeau nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--encre);
  border-radius: 0;
}

.avis-maquette {
  margin: 0;
  padding: 0.45rem clamp(1rem, 4vw, 3rem);
  font-size: 0.9rem;
  color: var(--encre-2);
  background: repeating-linear-gradient(135deg, #e9edf0 0 10px, #eef1f3 10px 20px);
  border-bottom: 1px solid var(--filet);
}

main {
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem) 4rem;
  max-width: 78rem;
  margin: 0 auto;
}
main:focus {
  outline: none;
}

.pied {
  border-top: 1px solid var(--filet);
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  color: var(--encre-2);
  font-size: 0.95rem;
}
.pied p {
  max-width: var(--mesure);
  margin: 0 auto;
}

/* ───────── Éléments communs ───────── */

.surtitre {
  font-family: var(--texte);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 0.4rem;
}
.chapeau {
  font-size: 1.15rem;
  max-width: var(--mesure);
  color: var(--encre);
}
.discret {
  color: var(--encre-2);
}
.petit {
  font-size: 0.93rem;
}
.id {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--filet-fort);
  border-radius: 4px;
  background: var(--surface);
  white-space: nowrap;
  text-decoration: none;
}
a.id:hover {
  background: var(--encre);
  color: #fff;
  border-color: var(--encre);
}

.section {
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
}
.section > h2 {
  margin-bottom: 1rem;
}
.intro-section {
  max-width: var(--mesure);
  color: var(--encre-2);
  margin-bottom: 1.25rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.25rem 1.35rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.55rem 1.15rem;
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover {
  background: var(--fond);
}
.bouton.principal {
  background: var(--encre);
  color: #fff;
}
.bouton.principal:hover {
  background: #2a3846;
}
.bouton.leger {
  border-color: var(--filet-fort);
  font-weight: 400;
  min-height: 40px;
  padding: 0.35rem 0.8rem;
  font-size: 0.93rem;
}
.bouton[aria-pressed="true"] {
  background: var(--encre);
  color: #fff;
}
.bouton[aria-pressed="true"]::before {
  content: "✓";
}

.choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.choix .bouton {
  font-weight: 400;
  text-align: left;
  justify-content: flex-start;
}
.choix .bouton[aria-pressed="true"]::before {
  content: none;
}

.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
}

.notice {
  border-left: 4px solid var(--encre);
  background: var(--surface);
  padding: 0.9rem 1.1rem;
  max-width: var(--mesure);
  font-size: 0.98rem;
}

dl.fiche {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
dl.fiche dt {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre-2);
}
dl.fiche dd {
  margin: 0.1rem 0 0;
}

/* ───────── Chambres : nom en toutes lettres, lettre et couleur en repères ───────── */

.chambre-present {
  --accent: var(--present);
  --pale: var(--present-pale);
}
.chambre-2080 {
  --accent: var(--c2080);
  --pale: var(--c2080-pale);
}
.chambre-reel_physique {
  --accent: var(--reel);
  --pale: var(--reel-pale);
}

.plaque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--titre);
  font-size: 1.12rem;
  color: var(--accent);
}
.lettre {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 1.2rem;
  line-height: 1;
}
.plaque.petite {
  font-size: 1rem;
}
.plaque.petite .lettre {
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.95rem;
}

/* ───────── Accueil ───────── */

.ouverture {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.ouverture h1 {
  margin-bottom: 1.1rem;
}
.ouverture .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.hemicycle {
  width: 100%;
  height: auto;
  display: block;
}
.hemicycle .siege {
  transition: opacity 0.25s;
}
.hemicycle .secteur-present .siege {
  fill: var(--present);
}
.hemicycle .secteur-2080 .siege {
  fill: var(--c2080);
}
.hemicycle .secteur-reel_physique .siege {
  fill: var(--reel);
}
.hemicycle .repere {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 30px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.hemicycle .repere-present {
  fill: var(--present);
}
.hemicycle .repere-2080 {
  fill: var(--c2080);
}
.hemicycle .repere-reel_physique {
  fill: var(--reel);
}
.hemicycle .pupitre-greffier {
  fill: var(--encre);
}
.salle {
  margin: 0;
}
.salle figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.93rem;
  color: var(--encre-2);
}
.hemicycle[data-actif] g[class^="secteur-"] .siege {
  opacity: 0.22;
}
.hemicycle[data-actif="present"] .secteur-present .siege,
.hemicycle[data-actif="2080"] .secteur-2080 .siege,
.hemicycle[data-actif="reel_physique"] .secteur-reel_physique .siege {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hemicycle .siege {
    animation: entree 0.5s ease-out both;
    animation-delay: calc(var(--rang) * 90ms);
  }
  @keyframes entree {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

.roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.role {
  border-top: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 0 var(--rayon) var(--rayon);
  padding: 1rem 1.15rem 1.15rem;
  border-inline: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.role p {
  margin-top: 0.6rem;
}

.methode {
  max-width: var(--mesure);
  padding-left: 1.4rem;
  margin: 0;
}
.methode li {
  padding-left: 0.4rem;
  margin-bottom: 0.55rem;
}
.methode li::marker {
  font-family: var(--titre);
  font-size: 1.15em;
}

.exemples {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.exemple {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.exemple h3 {
  font-size: 1.12rem;
}
.exemple .bouton {
  margin-top: auto;
  align-self: flex-start;
}
.exemple.a-venir {
  background: transparent;
  border-style: dashed;
  border-color: var(--filet-fort);
}

/* ───────── En-tête du dossier et étapes ───────── */

.entete-dossier {
  border-bottom: 1px solid var(--filet);
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}
.entete-dossier h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  max-width: 34ch;
}
.entete-dossier .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
  color: var(--encre-2);
  font-size: 0.95rem;
}
.etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.etapes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
}
.etapes a:hover {
  background: var(--fond);
}
.etapes a[aria-current="page"] {
  background: var(--encre);
  border-color: var(--encre);
  color: #fff;
}

.titre-vue {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.75rem;
}

/* ───────── Préparation ───────── */

.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.pile {
  display: grid;
  gap: 1rem;
}
.champ {
  display: grid;
  gap: 0.3rem;
}
.champ label,
.champ .libelle {
  font-weight: 700;
  font-size: 0.95rem;
}
.champ .aide {
  font-size: 0.88rem;
  color: var(--encre-2);
}
input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--surface);
  min-height: 44px;
}
textarea {
  resize: vertical;
  line-height: 1.5;
}
.case {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.case input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--encre);
}
fieldset {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1rem 1.15rem 1.15rem;
  margin: 0;
  background: var(--surface);
  min-width: 0;
}
legend {
  font-family: var(--titre);
  font-size: 1.1rem;
  padding: 0 0.4rem;
}
.proposition {
  border-top: 1px solid var(--filet);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.proposition:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.origine {
  font-size: 0.82rem;
  color: var(--encre-2);
  border: 1px dashed var(--filet-fort);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  white-space: nowrap;
}
.ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.barre-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: 0 -6px 18px rgba(22, 32, 42, 0.06);
}
.barre-actions p {
  margin-right: auto;
  max-width: 44ch;
}

/* ───────── Registre ───────── */

.entree {
  display: grid;
  gap: 0.6rem;
  scroll-margin-top: 1rem;
}
.entree:target {
  outline: 3px solid var(--encre);
  outline-offset: 2px;
}
.entree header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.entree blockquote {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--filet-fort);
  background: var(--fond);
  font-style: italic;
}
.entree .source {
  font-size: 0.93rem;
  overflow-wrap: anywhere;
}
.liste-nue {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}
ul.simple {
  margin: 0;
  padding-left: 1.2rem;
  max-width: var(--mesure);
}
ul.simple li {
  margin-bottom: 0.35rem;
  overflow-wrap: anywhere;
}

/* ───────── Audience ───────── */

.synthese {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.synthese .texte p {
  max-width: var(--mesure);
}
.encadre h3 {
  font-size: 1.08rem;
  margin-bottom: 0.6rem;
}
.encadre + .encadre {
  margin-top: 1rem;
}

.bancs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.banc {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-top: 5px solid var(--accent);
  border-radius: 0 0 var(--rayon) var(--rayon);
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.banc .principal {
  font-size: 1.04rem;
}
.banc .pied-banc {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
  display: grid;
  gap: 0.6rem;
}
.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.echange {
  display: grid;
  gap: 0.85rem;
}
.echange header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
}
.fleche {
  color: var(--encre-2);
}
.reponse {
  margin-left: clamp(0.5rem, 3vw, 2rem);
  padding: 0.85rem 1rem;
  background: var(--pale);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  display: grid;
  gap: 0.45rem;
}
.reponse .qualif {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  font-size: 0.93rem;
}

/* ───────── Contestations ───────── */

.contestation {
  display: grid;
  gap: 0.6rem;
  margin: 0.6rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--fond);
}
.contestation label {
  display: grid;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.reponse-greffier {
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border-left: 4px solid var(--encre);
  display: grid;
  gap: 0.4rem;
}

/* ───────── Conséquences et tableaux ───────── */

.reglages {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.reglage > .libelle {
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.contexte-choisi {
  max-width: var(--mesure);
  margin-top: 0.7rem;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.tableau caption {
  text-align: left;
  font-family: var(--titre);
  font-size: 1.2rem;
  padding: 0 0 0.6rem;
}
.tableau th,
.tableau td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--filet);
}
.tableau thead th {
  border-top: 0;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre-2);
  background: var(--fond);
}
.tableau tbody th {
  font-weight: 700;
  min-width: 11rem;
}
.tableau.effets tbody th {
  width: 17%;
}
.sens {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  white-space: nowrap;
  font-weight: 700;
}
.limite {
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon);
  padding: 0.7rem 0.9rem;
  background: var(--fond);
}
details {
  margin-top: 0.6rem;
}
summary {
  cursor: pointer;
  min-height: 32px;
  font-size: 0.93rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
details dl.fiche {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

/* ───────── Versions ───────── */

.frise {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.frise li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.frise .numero {
  font-family: var(--titre);
  font-size: 1.3rem;
}
.avant-apres {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.avant-apres > div {
  padding: 0.75rem 0.9rem;
  border-radius: var(--rayon);
  background: var(--fond);
}
.avant-apres .apres {
  background: var(--pale);
}
.type-changement {
  font-weight: 700;
}
.bilan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/* Les grandeurs se lisent dans la police de texte : le zéro rond des capitales d'inscription se confond avec un O. */
.grand-chiffre {
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

/* ───────── Téléphone et petites largeurs ───────── */

@media (max-width: 60rem) {
  .ouverture,
  .deux-colonnes,
  .synthese {
    grid-template-columns: minmax(0, 1fr);
  }
  .exemples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bancs,
  .roles,
  .frise {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 46rem) {
  body {
    font-size: 1rem;
  }
  .exemples,
  .avant-apres {
    grid-template-columns: minmax(0, 1fr);
  }
  .bandeau nav {
    width: 100%;
  }
  .choix .bouton {
    flex: 1 1 100%;
  }
  .barre-actions {
    position: static;
  }
  .barre-actions .bouton {
    flex: 1 1 100%;
  }

  /* Les grands tableaux deviennent des fiches (R29). */
  .tableau,
  .tableau tbody,
  .tableau tr,
  .tableau th,
  .tableau td {
    display: block;
    width: auto;
  }
  .tableau {
    border: 0;
    background: transparent;
  }
  .tableau caption {
    display: block;
  }
  .tableau thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tableau tr {
    background: var(--surface);
    border: 1px solid var(--filet);
    border-radius: var(--rayon);
    padding: 0.4rem 1rem 0.9rem;
    margin-bottom: 0.9rem;
  }
  .tableau th,
  .tableau td {
    border-top: 0;
    padding: 0.55rem 0 0;
  }
  .tableau tbody th {
    width: auto;
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.15rem;
  }
  .tableau td[data-titre]::before {
    content: attr(data-titre);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--encre-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ───────── Version imprimable (R40) ───────── */

.impression {
  max-width: 60rem;
  margin: 0 auto;
}
.impression .page-de-garde {
  border-bottom: 1px solid var(--filet);
  padding-bottom: 1.5rem;
}
.impression .page-de-garde h1 {
  margin: 0.3rem 0 0.8rem;
}
.impression .bloc-impression {
  margin-top: 1.5rem;
}
.impression .effet-imprime {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--filet);
}
.impression .pied-banc .bouton,
.impression .entree .bouton {
  display: none;
}

@media print {
  @page {
    margin: 18mm 16mm;
  }
  body {
    background: #fff;
    font-size: 10.5pt;
  }
  .bandeau,
  .pied,
  .evitement,
  .hors-impression,
  .bouton {
    display: none !important;
  }
  main {
    padding: 0;
    max-width: none;
  }
  .impression {
    max-width: none;
  }
  .impression .page-de-garde {
    break-after: page;
    border: 0;
    padding-top: 30mm;
  }
  .impression h2 {
    break-after: avoid;
    margin-top: 6mm;
  }
  .impression h3,
  .impression h4 {
    break-after: avoid;
  }
  .impression .bancs {
    grid-template-columns: minmax(0, 1fr);
  }
  .carte,
  .banc,
  .echange,
  .entree,
  .effet-imprime,
  .contestation {
    break-inside: avoid;
    box-shadow: none;
  }
  .deux-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Une source reste consultable sur papier : son adresse est imprimée (R40). */
  .lien-source::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
  }
  a {
    text-decoration: none;
  }
}