/* =============================================================================
   Radiologik — socle commun de la nouvelle charte (app Synoptik et rubriques)

   Deux thèmes : sombre (salle de lecture, par défaut) et clair. theme.js pose
   data-theme sur <html> avant l'affichage (choix mémorisé, sinon réglage de
   l'appareil). Aucune couleur en dur hors de ces jetons : une page de nouveau/
   n'utilise que var(--…). Charte complète et exemples : charte.html.
   ============================================================================= */

/* --- Jetons de couleur ----------------------------------------------------- */

:root,
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #0E1012;
  --barre: #0A0B0D;
  --barre-bord: #1E2226;
  --carte: #15181B;
  --carte-bord: #23282D;
  --feuille: #15181B;
  --champ: #0F1114;
  --champ-bord: #2A2F35;
  --element: #1A1E22;
  --texte: #D9DDE1;
  --texte-attenue: #8E969E;
  --nav-actif: #1C2024;
  --accent: #2F5D86;
  --accent-survol: #376A97;
  --accent-texte: #8DB8DF;
  /* Logo (sphère de points, pictogrammes des outils) : couleur des liens. */
  --logo: #8DB8DF;
  --sur-accent: #FFFFFF;
  --sur-accent-attenue: #C9DDF0;
  --focus: #8DB8DF;
  --repere-preciser: #6FC3B2;
  --sur-repere-preciser: #0B1512;
  --repere-ajout: #D4A04A;
  --sur-repere-ajout: #14110A;
  --repere-defaut: #8E969E;
  --sur-repere-defaut: #0E1012;
  --surligne-ajout: #3A2E17;
  --surligne-defaut: #8E969E;
  --bientot-fond: #2A2F35;
  --bientot-texte: #C2C8CE;
  --ok-fond: #16302A;
  --ok-texte: #7FD1B9;
  --alerte-fond: #2B2316;
  --alerte-bord: #4A3A1E;
  --alerte-texte: #E2B65C;
  --erreur-fond: #2A1616;
  --erreur-bord: #4D2626;
  --erreur-texte: #E99A9C;
  --ombre-feuille: 0 2px 12px #0000004D;
  /* Lignes de fond : bleu clair, très transparent (opacité des nœuds ; les
     pistes sont à 77 % de cette valeur, dans le motif). */
  --trace: #9CCBFF;
  --lignes-opacite: 0.147;
  --halo: #9CCBFF12;
  /* Fond d'écran (accueil, index) : léger dégradé, du haut (un peu plus clair
     et plus bleu) vers le fond uni. */
  --fond-degrade: #151B23;
  /* Fond des images radiologiques (outils de mesure), voile sous une fenêtre. */
  --fond-image: #000000;
  --voile: #000000A0;
}

:root[data-theme="clair"] {
  color-scheme: light;
  --fond: #ECEFF2;
  --barre: #F6F7F9;
  --barre-bord: #D5DBE1;
  --carte: #F9FAFB;
  --carte-bord: #D5DBE1;
  --feuille: #FDFDFB;
  --champ: #FFFFFF;
  --champ-bord: #CBD3DB;
  --element: #FFFFFF;
  --texte: #18202A;
  --texte-attenue: #556270;
  --nav-actif: #DCE7F3;
  --accent: #1B5E9E;
  --accent-survol: #164F86;
  --accent-texte: #1B5E9E;
  --logo: #1B5E9E;
  --sur-accent: #FFFFFF;
  --sur-accent-attenue: #D3E2F1;
  --focus: #1B5E9E;
  --repere-preciser: #187568;
  --sur-repere-preciser: #FFFFFF;
  --repere-ajout: #9A6210;
  --sur-repere-ajout: #FFFFFF;
  --repere-defaut: #6A7480;
  --sur-repere-defaut: #FFFFFF;
  --surligne-ajout: #FBEFD9;
  --surligne-defaut: #6A7480;
  --bientot-fond: #E2E7EC;
  --bientot-texte: #3D4955;
  --ok-fond: #DDEEEC;
  --ok-texte: #0B5F56;
  --alerte-fond: #FBEFD9;
  --alerte-bord: #E9C98F;
  --alerte-texte: #7A4F0E;
  --erreur-fond: #F8E6E4;
  --erreur-bord: #E8B4B0;
  --erreur-texte: #9B2C2C;
  --ombre-feuille: 0 1px 3px #00000014;
  --trace: #6AA6E0;
  --lignes-opacite: 0.133;
  --halo: #6AA6E00C;
  --fond-degrade: #F7F9FC;
  --fond-image: #000000;
  --voile: #18202A73;
}

/* --- Jetons communs aux deux thèmes ---------------------------------------- */

:root {
  --police-texte: 'IBM Plex Sans', system-ui, sans-serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Même police pour le compte-rendu dans les deux thèmes (décision 2026-10-06). */
  --police-cr: var(--police-texte);
  --rayon: 6px;
  --rayon-carte: 10px;
  --largeur-barre: 72px;
  --hauteur-barre-bas: 64px;
}

/* --- Base ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.5 var(--police-texte);
}

/* Base des éléments, sans poids (:where) et hors d'une fiche A4 reprise de la
   V1 (.fiche-a4), qui garde les valeurs par défaut du navigateur. */
:where(a):where(:not(.fiche-a4 *)) {
  color: var(--accent-texte);
}

:where(h1, h2, h3, h4):where(:not(.fiche-a4 *)) {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

:where(p):where(:not(.fiche-a4 *)) {
  margin: 0;
}

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

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

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

.icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icone--petite {
  width: 16px;
  height: 16px;
}

/* --- Logo ------------------------------------------------------------------
   Sphère de points en masque (logo/*.svg, générés par scripts/generer_logo.py),
   couleur --logo du thème. Un dessin par taille affichée, comme sur la planche
   du logo : sphere (40 px et plus), sphere--moyenne (20 à 39 px),
   sphere--micro (moins de 20 px). La taille se règle par width / height. */

.sphere {
  display: inline-block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--logo);
  -webkit-mask: url("logo/sphere.svg") center / contain no-repeat;
  mask: url("logo/sphere.svg") center / contain no-repeat;
}

.sphere--moyenne {
  width: 32px;
  height: 32px;
  -webkit-mask-image: url("logo/sphere-moyenne.svg");
  mask-image: url("logo/sphere-moyenne.svg");
}

.sphere--micro {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url("logo/sphere-micro.svg");
  mask-image: url("logo/sphere-micro.svg");
}

@media (forced-colors: active) {
  .sphere {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

/* Marque : sphère + nom (Radiologik, Synoptik, nom d'un outil) + sous-titre.
   La taille du nom (font-size de .marque) règle le reste ; marque--grande pour
   un accueil ou un écran de connexion. Nom en capitales par la feuille seulement
   (le texte reste « Synoptik » pour les lecteurs d'écran). */

.marque {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 0.42em;
  row-gap: 0.3em;
  margin: 0;
  font-size: 26px;
}

.marque .sphere {
  width: 1.6em;
  height: 1.6em;
}

.marque__nom {
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texte);
}

.marque__sous-titre {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--police-mono);
  font-size: max(11px, 0.25em);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.marque__sous-titre .picto {
  width: 1.4em;
  height: 1.4em;
  stroke-width: 4.5;
  color: var(--logo);
}

.marque--grande {
  font-size: clamp(32px, 9vw, 52px);
}

.marque--grande .sphere {
  width: 1.54em;
  height: 1.54em;
}

/* Pictogrammes des outils (Comptes rendus, Mesures, Fiches, Protocoles), dessinés
   avec la sphère : bouts arrondis, viewBox de 48. Trait de 3,4 = celui des
   icônes (1,7 sur 24) ; plus épais en petit, dans un sous-titre. */

.picto {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.picto__plein {
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Coque : barre latérale (ordinateur), en-tête et barre du bas (téléphone) */

.coque {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.barre-laterale {
  flex: 0 0 var(--largeur-barre);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
  background: var(--barre);
  border-right: 1px solid var(--barre-bord);
}

.barre-laterale__logo {
  display: flex;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 8px;
}

.barre-laterale__lien {
  width: 64px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  color: var(--texte-attenue);
  font-size: 10.5px;
  text-decoration: none;
}

.barre-laterale__lien:hover,
.barre-laterale__lien[aria-current="page"] {
  background: var(--nav-actif);
  color: var(--texte);
}

.barre-laterale__lien[aria-current="page"] {
  font-weight: 600;
}

.barre-laterale__espace {
  flex: 1;
}

.contenu {
  flex: 1;
  min-width: 0;
  position: relative;
}

.entete-tel,
.barre-bas {
  display: none;
}

.bouton-theme {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--texte-attenue);
  cursor: pointer;
}

.bouton-theme:hover {
  color: var(--texte);
}

/* Le bouton montre le thème vers lequel il bascule : soleil en sombre, lune en clair. */
.bouton-theme .icone-lune,
:root[data-theme="clair"] .bouton-theme .icone-soleil {
  display: none;
}

:root[data-theme="clair"] .bouton-theme .icone-lune {
  display: block;
}

@media (max-width: 720px) {
  .barre-laterale {
    display: none;
  }

  .coque {
    flex-direction: column;
    padding-bottom: calc(var(--hauteur-barre-bas) + env(safe-area-inset-bottom));
  }

  .entete-tel {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 6px 0 16px;
    background: var(--barre);
    border-bottom: 1px solid var(--barre-bord);
  }

  /* Sphère de 24 px, cible tactile de 44 px sans décaler le titre. */
  .entete-tel__logo {
    display: flex;
    margin: 0 -10px;
    padding: 10px;
  }

  .entete-tel__logo .sphere {
    width: 24px;
    height: 24px;
  }

  .entete-tel__titre {
    font-size: 16px;
    font-weight: 600;
  }

  /* Titre d'une app ou d'une rubrique : en marque, comme les déclinaisons du logo. */
  .entete-tel__titre--marque {
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .entete-tel__actions {
    margin-left: auto;
    display: flex;
  }

  .barre-bas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--hauteur-barre-bas) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--barre);
    border-top: 1px solid var(--barre-bord);
  }

  .barre-bas__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--texte-attenue);
    font-size: 11px;
    text-decoration: none;
  }

  .barre-bas__lien[aria-current="page"],
  .barre-bas__lien--actif {
    color: var(--texte);
    font-weight: 600;
  }

  /* « Plus » : menu des autres rubriques (details, sans script ; refermé au
     clic ailleurs par navigation.js), au-dessus de la barre, à droite. */
  .barre-bas__plus {
    display: flex;
  }

  .barre-bas__plus > summary {
    flex: 1;
    list-style: none;
    cursor: pointer;
  }

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

  .barre-bas__plus[open] > summary {
    color: var(--texte);
  }

  .barre-bas__menu {
    position: fixed;
    right: 8px;
    bottom: calc(var(--hauteur-barre-bas) + env(safe-area-inset-bottom) + 8px);
    min-width: 200px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: var(--carte);
    border: 1px solid var(--carte-bord);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-feuille);
  }

  .barre-bas__menu-lien {
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    color: var(--texte);
    font-size: 15px;
    text-decoration: none;
  }

  .barre-bas__menu-lien:hover,
  .barre-bas__menu-lien[aria-current="page"] {
    background: var(--nav-actif);
  }

  .barre-bas__menu-lien[aria-current="page"] {
    font-weight: 600;
  }

  .barre-bas__menu-lien .picto {
    color: var(--logo);
  }
}

/* --- Page de rubrique (fiches, calculateurs, mesures, protocoles…) ----------
   Marque de la rubrique, chapeau, contenu, pied. Sur téléphone, le nom de la
   rubrique est dans l'en-tête : la marque n'est plus lue que par les lecteurs
   d'écran (h1 de la page). */

.rubrique {
  max-width: 1160px;
  margin: 0 auto;
  padding: 36px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

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

.rubrique__marque {
  font-size: 24px;
}

.rubrique__chapeau {
  max-width: 70ch;
  margin-top: -12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte-attenue);
}

.rubrique__pied {
  margin-top: 12px;
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Contenu repris de la V1 : ses scripts masquent par l'attribut hidden des
   éléments que la feuille de la rubrique met en bloc (lignes de tableau…). */
.rubrique [hidden] {
  display: none !important;
}

/* Sprite d'icônes SVG (<symbol>) repris d'une page de la V1 : hors du flux. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (max-width: 720px) {
  .rubrique {
    padding: 16px 16px 24px;
    gap: 20px;
  }

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

  .rubrique__chapeau {
    margin-top: 0;
    font-size: 14px;
  }
}

/* --- Surfaces -------------------------------------------------------------- */

.carte {
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: var(--rayon-carte);
}

.feuille {
  background: var(--feuille);
  border: 1px solid var(--carte-bord);
  border-radius: var(--rayon-carte);
}

.element {
  background: var(--element);
  border: 1px solid var(--carte-bord);
  border-radius: 8px;
}

/* --- Boutons --------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--champ-bord);
  border-radius: var(--rayon);
  color: var(--texte);
  font: inherit;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover {
  background: var(--nav-actif);
}

.bouton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.bouton--principal:hover {
  background: var(--accent-survol);
}

.bouton--grand {
  min-height: 46px;
  font-size: 15px;
}

.bouton--icone {
  width: 40px;
  padding: 0;
}

.bouton--lien {
  color: var(--accent-texte);
}

.raccourci {
  font-family: var(--police-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--sur-accent-attenue);
}

/* --- Champs ---------------------------------------------------------------- */

.etiquette {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--texte-attenue);
}

.champ {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--champ);
  border: 1px solid var(--champ-bord);
  border-radius: var(--rayon);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
}

select.champ {
  padding-block: 0;
}

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

.champ::placeholder {
  color: var(--texte-attenue);
  opacity: 0.8;
}

.champ:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
}

.case {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texte-attenue);
}

/* --- Repères, surlignages, pastilles, encarts ------------------------------ */

.repere {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-family: var(--police-texte);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: super;
}

.repere--preciser {
  background: var(--repere-preciser);
  color: var(--sur-repere-preciser);
}

.repere--ajout {
  background: var(--repere-ajout);
  color: var(--sur-repere-ajout);
}

.repere--defaut {
  background: var(--repere-defaut);
  color: var(--sur-repere-defaut);
}

.surligne-ajout {
  background: var(--surligne-ajout);
  border-radius: 3px;
  padding: 1px 2px;
}

.surligne-defaut {
  border-bottom: 2px dotted var(--surligne-defaut);
}

.pastille-bientot {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bientot-fond);
  color: var(--bientot-texte);
  font-size: 11.5px;
  font-weight: 500;
}

.encart {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.5;
}

.encart--alerte {
  background: var(--alerte-fond);
  border-color: var(--alerte-bord);
  color: var(--alerte-texte);
}

.encart--erreur {
  background: var(--erreur-fond);
  border-color: var(--erreur-bord);
  color: var(--erreur-texte);
}

.encart--ok {
  background: var(--ok-fond);
  color: var(--ok-texte);
}

/* --- Navigation secondaire : fil d'Ariane, onglets ------------------------- */

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

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

.fil-ariane__separateur {
  color: var(--texte-attenue);
}

.fil-ariane [aria-current="page"] {
  color: var(--texte);
  font-weight: 600;
}

.onglets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--barre);
  border-bottom: 1px solid var(--barre-bord);
}

.onglets__onglet {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--texte-attenue);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.onglets__onglet[aria-selected="true"] {
  border-bottom-color: var(--accent-texte);
  color: var(--texte);
  font-weight: 600;
}

/* --- Compte-rendu ---------------------------------------------------------- */

.cr {
  font-family: var(--police-cr);
  font-size: 16px;
  line-height: 1.75;
}

.cr__titre {
  font-size: 18px;
  letter-spacing: 0.03em;
}

.cr__section {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* --- Lignes de fond (décor) -------------------------------------------------
   Pistes de circuit imprimé, très discrètes, uniquement dans l'espace libre :
   - .zone-libre (bas d'une colonne, flex: 1) : les lignes n'y apparaissent que
     si la zone est assez haute pour le motif entier (requête de conteneur) ;
     sinon rien, plutôt qu'un motif coupé ;
   - coins et marges d'une page : chaque page les place et réserve la place.
   Les pistes partent du bord de l'écran ou de la zone et s'arrêtent avant les
   blocs : jamais sous un champ ni sous une colonne. Motifs : lignes/*.svg
   (scripts/generer_lignes.py), colorés ici par masque. */

.zone-libre {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  container-type: size;
}

.lignes,
.halo {
  position: absolute;
  display: none;
  pointer-events: none;
}

.lignes {
  background: var(--trace);
  opacity: var(--lignes-opacite);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.halo {
  background: radial-gradient(circle at 100% 100%, var(--halo), transparent 70%);
}

.lignes--app-gauche {
  left: 0;
  bottom: 0;
  width: min(100%, 340px);
  aspect-ratio: 340 / 280;
  -webkit-mask-image: url("lignes/app-gauche.svg");
  mask-image: url("lignes/app-gauche.svg");
}

.lignes--app-droite,
.halo--app-droite {
  right: 0;
  bottom: 0;
  width: min(100%, 320px);
  aspect-ratio: 320 / 380;
}

.lignes--app-droite {
  -webkit-mask-image: url("lignes/app-droite.svg");
  mask-image: url("lignes/app-droite.svg");
}

.lignes--tel-dictee {
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 390 / 190;
  -webkit-mask-image: url("lignes/tel-dictee.svg");
  mask-image: url("lignes/tel-dictee.svg");
}

.lignes--tel-accueil {
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 390 / 170;
  -webkit-mask-image: url("lignes/tel-accueil.svg");
  mask-image: url("lignes/tel-accueil.svg");
}

@container (min-height: 300px) {
  .lignes--app-gauche {
    display: block;
  }
}

@container (min-height: 400px) {
  .lignes--app-droite,
  .halo--app-droite {
    display: block;
  }
}

@container (min-height: 210px) {
  .lignes--tel-dictee {
    display: block;
  }
}

@container (min-height: 190px) {
  .lignes--tel-accueil {
    display: block;
  }
}

/* Coins et marges de page : motifs à taille fixe, affichés par la page
   seulement quand la marge leur laisse la place (requête média de la page). */
.lignes--accueil-haut {
  top: 0;
  right: 0;
  width: 520px;
  height: 230px;
  -webkit-mask-image: url("lignes/accueil-haut.svg");
  mask-image: url("lignes/accueil-haut.svg");
}

.lignes--accueil-bas,
.halo--accueil-bas {
  right: 0;
  bottom: 0;
  width: 600px;
  height: 260px;
}

.lignes--accueil-bas {
  -webkit-mask-image: url("lignes/accueil-bas.svg");
  mask-image: url("lignes/accueil-bas.svg");
}

.lignes--accueil-gauche {
  left: 0;
  bottom: 0;
  width: 360px;
  height: 220px;
  -webkit-mask-image: url("lignes/accueil-gauche.svg");
  mask-image: url("lignes/accueil-gauche.svg");
}

.lignes--fiche-marge {
  right: 0;
  top: 0;
  width: 120px;
  height: 900px;
  -webkit-mask-image: url("lignes/fiche-marge.svg");
  mask-image: url("lignes/fiche-marge.svg");
}

.lignes--calcul-marge {
  right: 0;
  bottom: 0;
  width: 300px;
  height: 900px;
  -webkit-mask-image: url("lignes/calcul-marge.svg");
  mask-image: url("lignes/calcul-marge.svg");
}

/* --- Fond d'écran « circuit imprimé » (accueil, pages d'index) --------------
   Classe fond-circuit sur <body> : pistes sur tout l'écran, derrière le contenu
   (cartes et barres opaques par-dessus). L'app garde les lignes de fond
   ci-dessus, jamais sous un champ. Tracés générés par scripts/generer_fond.py
   en masque (fonds/*.svg), avec les opacités propres à chaque thème ; couleur
   --trace sur un léger dégradé (--fond-degrade en haut vers --fond), halo
   léger en bas (--halo). */

.fond-circuit::before,
.fond-circuit::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.fond-circuit::before {
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, var(--halo), transparent 75%),
    linear-gradient(165deg, var(--fond-degrade) 0%, var(--fond) 62%);
}

.fond-circuit::after {
  background: var(--trace);
  -webkit-mask: url("fonds/circuit-sombre.svg") center / cover no-repeat;
  mask: url("fonds/circuit-sombre.svg") center / cover no-repeat;
}

:root[data-theme="clair"] .fond-circuit::after {
  -webkit-mask-image: url("fonds/circuit-clair.svg");
  mask-image: url("fonds/circuit-clair.svg");
}

/* --- Impression : ni décor ni navigation ----------------------------------- */

@media print {
  .fond-circuit::before,
  .fond-circuit::after,
  .lignes,
  .halo,
  .barre-laterale,
  .barre-bas,
  .entete-tel,
  .bouton-theme {
    display: none !important;
  }
}