/* sac.css — feuille commune des pages du serveur SAC (signalétique SAC).
   Anthracite + orange SAC (#EA9100, identique à `PaletteSAC` de l'app iPad) :
   barre de titre orange, filet orange à gauche des cartes, petits libellés en
   capitales. Thème clair/sombre automatique (prefers-color-scheme), aucun
   script de thème, aucune ressource distante, polices système.
   Organisation : jetons → thèmes → base → mise en page → menu ☰ → composants
   → utilitaires → points de rupture → mouvement réduit.
   voir regles/serveur.md#interface-web */


/* ═══ 1. Jetons communs aux deux thèmes ═════════════════════════════════════ */

:root {
  --accent: #EA9100;
  --sur-accent: #1d1d1f;          /* texte posé sur l'orange (6,85:1) */

  /* Espacements : progression 4 / 8 / 12 / 16 / 24 / 32 px */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;

  /* Rayons : petit (pastilles internes), moyen (boutons, champs), grand (cartes) */
  --rayon-petit: 6px;
  --rayon: 8px;
  --rayon-grand: 12px;
  --rayon-pilule: 999px;

  /* Typographie : échelle modérée, corps à 16 px (pas de zoom iOS sur les champs) */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --police-fixe: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --taille-libelle: 0.75rem;
  --taille-petite: 0.875rem;
  --taille-corps: 1rem;
  --taille-titre-3: 1.0625rem;
  --taille-titre-2: 1.25rem;
  --taille-titre-1: 1.125rem;     /* titre de la barre orange */
  --taille-valeur: 1.375rem;      /* chiffre d'une tuile */

  /* Géométrie */
  --hauteur-barre: 3.5rem;
  --largeur-menu: 16rem;
  --cible: 44px;                  /* cible tactile minimale */
  --filet: 4px;                   /* filet orange des cartes */

  /* Mouvement (coupé sous prefers-reduced-motion) */
  --duree: 180ms;
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light dark;
}


/* ═══ 2. Thèmes ══════════════════════════════════════════════════════════════
   Contrastes mesurés (WCAG) — clair : texte/fond 15,16 ; texte-doux/surface
   6,40 ; accent-texte/surface 5,57 ; succes 6,53 ; erreur 6,54 ; alerte 6,33 ;
   trait/surface 3,91. Sombre : texte/surface 10,43 ; texte-doux/surface 6,09 ;
   accent-texte/surface 5,85 ; succes 7,53 ; erreur 5,66 ; alerte 8,18 ;
   trait/surface 3,52. Chaque bloc se ferme par « } » en début de ligne
   (test_interface_web.py le découpe ainsi). */

@media (prefers-color-scheme: light) {
  :root {
    --fond: #f2f3f5;
    --surface: #ffffff;
    --surface-basse: #e9eaee;
    --texte: #1d1d1f;
    --texte-doux: #5c5f66;
    --accent-texte: #9a5800;      /* orange foncé : l'orange pur (2,2:1) ne passe pas en texte */
    --accent-fond: #fdf0dc;
    --anneau: #9a5800;            /* anneau de focus ≥ 3:1 sur fond clair */
    --accent-interface: #9a5800;  /* bordures et filets d'état : ≥ 3:1 (5,02 fond ; 4,63 surface basse) */
    --trait: #7d8189;             /* bord des champs : ≥ 3:1 */
    --separateur: #dcdde2;
    --succes: #146c2e;
    --succes-fond: #e3f3e7;
    --erreur: #b3261e;
    --erreur-fond: #fbe9e7;
    --sur-erreur: #ffffff;
    --alerte: #8a5300;
    --alerte-fond: #fbefd9;
    --voile: rgba(20, 22, 26, 0.45);
    --ombre: 0 1px 2px rgba(16, 18, 24, 0.06), 0 2px 8px rgba(16, 18, 24, 0.04);
    --ombre-haute: 0 8px 28px rgba(16, 18, 24, 0.18);
    --survol: rgba(29, 29, 31, 0.06);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #2b2d31;
    --surface: #36393f;
    --surface-basse: #222428;
    --texte: #f3f3f3;
    --texte-doux: #b9bcc4;
    --accent-texte: #f5a93a;
    --accent-fond: #4a3a1a;
    --anneau: #ea9100;
    --accent-interface: #ea9100;  /* l'orange pur suffit sur anthracite (≥ 4,71:1) */
    --trait: #8a8e96;
    --separateur: #44474e;
    --succes: #8fe3a0;
    --succes-fond: #1f3a28;
    --erreur: #ff9a8f;
    --erreur-fond: #4a2422;
    --sur-erreur: #1d1d1f;
    --alerte: #ffd28a;
    --alerte-fond: #4a3a1a;
    --voile: rgba(0, 0, 0, 0.55);
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.35);
    --ombre-haute: 0 10px 32px rgba(0, 0, 0, 0.55);
    --survol: rgba(255, 255, 255, 0.06);
  }
}

/* Thème sombre : OpenStreetMap n'a pas de fond sombre ; seule la couche de tuiles est inversée (tracé, marqueurs et bulles intacts). */
@media (prefers-color-scheme: dark) {
  .fond-carte { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }
}


/* ═══ 3. Base ════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--taille-corps);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Un attribut hidden l'emporte toujours sur un display de composant. */
[hidden] {
  display: none !important;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0;
}

h2 {
  font-size: var(--taille-titre-2);
  font-weight: 700;
}

h3 {
  font-size: var(--taille-titre-3);
  font-weight: 650;
}

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

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent-texte);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

code, kbd, samp, pre {
  font-family: var(--police-fixe);
  font-size: 0.875em;
}

img, svg, canvas {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--separateur);
  margin: var(--espace-4) 0;
}

/* Focus : anneau orange net, uniquement au clavier. */
:focus-visible {
  outline: 3px solid var(--anneau);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--accent);
  color: var(--sur-accent);
}


/* ═══ 4. Mise en page ═══════════════════════════════════════════════════════ */

/* Barre de titre orange, collée en haut, encoches iPhone respectées. */
.barre-titre {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: calc(var(--hauteur-barre) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) calc(var(--espace-3) + env(safe-area-inset-right, 0px))
           0 calc(var(--espace-2) + env(safe-area-inset-left, 0px));
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.barre-titre h1 {
  flex: 1;
  min-width: 0;
  font-size: var(--taille-titre-1);
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barre-titre a {
  color: inherit;
}

/* Sur l'orange, l'anneau de focus passe à l'anthracite. */
.barre-titre :focus-visible {
  outline-color: var(--sur-accent);
}

/* Grille menu + contenu : une colonne sous 900 px (le menu est un tiroir). */
.mise-en-page {
  display: block;
  min-height: calc(100dvh - var(--hauteur-barre));
}

.contenu {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  width: 100%;
  min-width: 0;
  max-width: 72rem;
  padding: var(--espace-4) calc(var(--espace-4) + env(safe-area-inset-right, 0px))
           calc(var(--espace-6) + env(safe-area-inset-bottom, 0px)) calc(var(--espace-4) + env(safe-area-inset-left, 0px));
}

/* Colonne de lecture (analyse, confidentialité) : centrée, lignes courtes. */
.contenu-etroit {
  max-width: 44rem;
  margin-inline: auto;
}


/* ═══ 5. Menu ☰ (tiroir < 900 px, colonne fixe au-delà) ═════════════════════ */

.bouton-menu {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.bouton-menu:hover,
.bouton-menu[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.1);
}

.menu-voile {
  position: fixed;
  inset: calc(var(--hauteur-barre) + env(safe-area-inset-top, 0px)) 0 0 0;
  z-index: 40;
  background: var(--voile);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree) var(--courbe);
}

.menu-voile.ouvert {
  opacity: 1;
  pointer-events: auto;
}

/* Fermé, le tiroir est hors écran ET invisible : ses liens ne prennent pas le focus. */
.menu {
  position: fixed;
  top: calc(var(--hauteur-barre) + env(safe-area-inset-top, 0px));
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(18rem, 84vw);
  padding: var(--espace-3) var(--espace-3) calc(var(--espace-5) + env(safe-area-inset-bottom, 0px))
           calc(var(--espace-3) + env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-basse);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--duree) var(--courbe), visibility 0s linear var(--duree);
}

.menu.ouvert {
  transform: none;
  visibility: visible;
  box-shadow: var(--ombre-haute);
  transition: transform var(--duree) var(--courbe), visibility 0s;
}

/* Intertitre de groupe (« Suivi », « Maintenance »…). */
.menu-groupe {
  margin: var(--espace-4) var(--espace-2) var(--espace-1);
  color: var(--texte-doux);
  font-size: var(--taille-libelle);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-groupe:first-child {
  margin-top: var(--espace-1);
}

.menu-entree {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-3);
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-entree:hover {
  background: var(--survol);
}

/* Entrée de la section affichée : pavé orange plein, comme la maquette. */
.menu-entree[aria-current="page"],
.menu-entree.actif {
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
}

.menu-entree[aria-current="page"]:focus-visible,
.menu-entree.actif:focus-visible {
  outline-color: var(--texte);
}


/* ═══ 6. Composants ═════════════════════════════════════════════════════════ */

/* — Carte : surface + filet orange à gauche (signalétique) — */
.carte {
  min-width: 0;
  padding: var(--espace-4);
  border-left: var(--filet) solid var(--accent);
  border-radius: var(--rayon-grand);
  background: var(--surface);
  box-shadow: var(--ombre);
  overflow-wrap: anywhere;
}

.carte > * + * {
  margin-top: var(--espace-3);
}

/* Libellé de carte : petites capitales grasses ; actions éventuelles à droite. */
.carte-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
  margin: 0;
  color: var(--texte-doux);
  font-size: var(--taille-libelle);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* — Tuiles : chiffres clés, deux par rangée sur téléphone — */
.tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-3);
}

.tuile {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  min-width: 0;
  padding: var(--espace-3) var(--espace-4);
  border-left: var(--filet) solid var(--accent);
  border-radius: var(--rayon-grand);
  background: var(--surface);
  box-shadow: var(--ombre);
  overflow-wrap: anywhere;
}

.tuile-libelle {
  order: -1;                      /* le libellé reste au-dessus, quel que soit l'ordre HTML */
  color: var(--texte-doux);
  font-size: var(--taille-libelle);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tuile-valeur {
  font-size: var(--taille-valeur);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.tuile-valeur.ok { color: var(--succes); }
.tuile-valeur.alerte { color: var(--alerte); }
.tuile-valeur.erreur { color: var(--erreur); }

/* — Pastille : état court (REÇU, OK, ÉPINGLÉ…) — */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  flex: none;
  padding: 0.125rem 0.625rem;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: var(--taille-libelle);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.pastille.ok { background: var(--succes-fond); color: var(--succes); }
.pastille.alerte { background: var(--alerte-fond); color: var(--alerte); }
.pastille.erreur { background: var(--erreur-fond); color: var(--erreur); }

/* — Bouton : secondaire par défaut, cible ≥ 44 px — */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: var(--cible);
  padding: 0 var(--espace-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) var(--courbe), filter var(--duree) var(--courbe),
              transform 80ms ease-out;
}

.bouton:hover {
  background: var(--surface-basse);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton.secondaire {
  border-color: var(--trait);
  background: var(--surface);
  color: var(--texte);
}

.bouton.principal {
  border-color: transparent;
  background: var(--accent);
  color: var(--sur-accent);
}

.bouton.principal:hover {
  filter: brightness(1.07);
}

.bouton.danger {
  border-color: transparent;
  background: var(--erreur);
  color: var(--sur-erreur);
}

.bouton.danger:hover {
  filter: brightness(1.08);
}

/* « Petit » : plus étroit et texte réduit, mais la cible reste ≥ 44 px de haut. */
.bouton.petit {
  padding: 0 var(--espace-3);
  font-size: var(--taille-petite);
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* — Zone de dépôt de fichier — */
.depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: 8rem;
  padding: var(--espace-5) var(--espace-4);
  border: 2px dashed var(--accent-interface);   /* seule limite de la zone : ≥ 3:1 */
  border-radius: var(--rayon-grand);
  background: var(--surface);
  color: var(--texte);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.depot:hover,
.depot.survol,
.depot.dragover {
  background: var(--accent-fond);
}

.depot:focus-within {
  outline: 3px solid var(--anneau);
  outline-offset: 2px;
}

/* — Bandeau : message (avertissement, erreur, succès) — */
.bandeau {
  padding: var(--espace-3) var(--espace-4);
  border-left: var(--filet) solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface-basse);
  color: var(--texte);
  overflow-wrap: anywhere;
}

.bandeau.ok { border-left-color: var(--succes); background: var(--succes-fond); }
.bandeau.alerte { border-left-color: var(--alerte); background: var(--alerte-fond); }
.bandeau.erreur { border-left-color: var(--erreur); background: var(--erreur-fond); }

.bandeau strong:first-child {
  font-weight: 700;
}

/* — Rangée : ligne de liste (journal, entrée de quarantaine, version…) — */
.rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2) var(--espace-3);
  min-height: var(--cible);
  width: 100%;
  padding: var(--espace-3) var(--espace-4);
  border: 0;
  border-radius: var(--rayon);
  background: var(--surface-basse);
  color: var(--texte);
  font: inherit;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.rangee > * {
  min-width: 0;
}

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

/* Rangée cliquable (bouton ou lien) : survol discret, rangée sélectionnée filetée. */
a.rangee,
button.rangee {
  cursor: pointer;
}

a.rangee:hover,
button.rangee:hover {
  background: var(--survol);
  box-shadow: inset 0 0 0 1px var(--separateur);
}

/* Rangée sélectionnée : filet épais + cadre fin (≥ 3:1) ET graisse renforcée,
   l'état ne repose jamais sur la seule couleur. */
.rangee.actif,
.rangee[aria-current="true"] {
  box-shadow: inset var(--filet) 0 0 var(--accent-interface), inset 0 0 0 1px var(--accent-interface);
  font-weight: 650;
}

/* — Dépliable (<details class="depliable">) : carte JSON, carte du trajet… — */
.depliable {
  min-width: 0;
  border-left: var(--filet) solid var(--accent);
  border-radius: var(--rayon-grand);
  background: var(--surface);
  box-shadow: var(--ombre);
  overflow-wrap: anywhere;
}

.depliable > summary {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-height: var(--cible);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-grand);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.depliable > summary::-webkit-details-marker {
  display: none;
}

/* Chevron à droite, tourné à l'ouverture. */
.depliable > summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: auto;
  border-right: 2px solid var(--accent-texte);
  border-bottom: 2px solid var(--accent-texte);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--duree) var(--courbe);
}

.depliable[open] > summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.depliable > summary:hover {
  background: var(--survol);
}

.depliable > :not(summary) {
  margin: 0 var(--espace-4) var(--espace-4);
}

/* — Texte à chasse fixe (JSON, identifiants, journaux) — */
.chasse-fixe {
  font-family: var(--police-fixe);
  font-size: 0.8125rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

pre.chasse-fixe {
  margin: 0;
  max-height: 60vh;
  padding: var(--espace-3);
  overflow: auto;
  border-radius: var(--rayon);
  background: var(--surface-basse);
  white-space: pre-wrap;
  tab-size: 2;
}

/* — Champ de saisie — */
.champ {
  display: block;
  width: 100%;
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;                /* 16 px : pas de zoom automatique iOS */
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

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

/* Focus du champ : vrai anneau (outline ≥ 3:1), conservé en mode couleurs forcées. */
.champ:focus,
.champ:focus-visible {
  border-color: var(--anneau);
  outline: 3px solid var(--anneau);
  outline-offset: 1px;
}

label {
  display: block;
  margin-bottom: var(--espace-1);
  color: var(--texte-doux);
  font-size: var(--taille-petite);
  font-weight: 600;
}

/* Masqué à l'écran, lu par les lecteurs d'écran. */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ═══ 7. Utilitaires ═══════════════════════════════════════════════════════ */

/* Groupe de boutons : retour à la ligne sur téléphone. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}

/* Résumés et détails (chemins de dossier, noms de fichiers) : coupés n'importe
   où plutôt que de déborder à 320 px. */
.texte-doux {
  color: var(--texte-doux);
  font-size: var(--taille-petite);
  overflow-wrap: anywhere;
}

.nombre {
  font-variant-numeric: tabular-nums;
}


/* ═══ 8. Points de rupture ═════════════════════════════════════════════════
   < 600 px téléphone (styles de base) ; ≥ 600 px tablette ; ≥ 900 px
   ordinateur, où le tiroir devient une colonne fixe. */

@media (min-width: 600px) {
  .contenu {
    gap: var(--espace-5);
    padding-top: var(--espace-5);
    /* Chaque encoche de son côté (paysage : gauche ou droite). */
    padding-left: calc(var(--espace-5) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--espace-5) + env(safe-area-inset-right, 0px));
  }

  .tuiles {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .carte {
    padding: var(--espace-5);
  }
}

/* iPhone Pro Max en paysage (932 px) passe ce seuil : chaque règle garde
   ses marges d'encoche (env(safe-area-inset-*)), gauche et droite chacune
   de son côté, pour que l'encoche ne couvre ni la colonne ni le contenu. */
@media (min-width: 900px) {
  .mise-en-page {
    display: grid;
    grid-template-columns: var(--largeur-menu) 1fr;
    align-items: start;
  }

  .bouton-menu,
  .menu-voile {
    display: none;
  }

  /* Colonne fixe : toujours visible, sous la barre, défilant seule. */
  .menu,
  .menu.ouvert {
    position: sticky;
    top: calc(var(--hauteur-barre) + env(safe-area-inset-top, 0px));
    z-index: auto;
    width: auto;
    height: calc(100vh - var(--hauteur-barre) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--hauteur-barre) - env(safe-area-inset-top, 0px));
    padding: var(--espace-4) var(--espace-3) calc(var(--espace-4) + env(safe-area-inset-bottom, 0px))
             calc(var(--espace-3) + env(safe-area-inset-left, 0px));
    border-right: 1px solid var(--separateur);
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
  }

  .barre-titre {
    padding-left: calc(var(--espace-5) + env(safe-area-inset-left, 0px));
  }

  /* À gauche, la colonne du menu absorbe l'encoche ; à droite, la marge
     couvre l'encoche quand elle la dépasse. */
  .contenu {
    padding: var(--espace-6) max(var(--espace-6), calc(var(--espace-3) + env(safe-area-inset-right, 0px)))
             calc(var(--espace-6) + env(safe-area-inset-bottom, 0px)) var(--espace-6);
  }
}


/* ═══ 9. Mouvement réduit ══════════════════════════════════════════════════ */

@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;
    transition-delay: 0s !important;
  }
}