/* ==========================================================================
   Demain : les composants nommes.

   Un composant porte le meme nom et le meme dessin partout : une ligne de
   tournee est la meme sur l'ecran de tournee, sur la fiche patient et sur le
   gabarit imprime. Le developpeur assemble, il ne redessine pas.

   Depend de jetons.css, qui doit etre importe avant.
   ========================================================================== */

/* --- Socle ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--taille-base);
  line-height: var(--interligne);
  color: var(--encre);
  background: var(--fond);
}

h1, h2, h3, h4 { line-height: var(--interligne-serre); margin: 0 0 var(--e3); }
h1 { font-size: var(--taille-titre); font-weight: var(--graisse-forte); letter-spacing: -0.01em; }
h2 { font-size: var(--taille-grand); font-weight: var(--graisse-forte); }
h3 { font-size: var(--taille-moyen); font-weight: var(--graisse-moyenne); }
h4 { font-size: var(--taille-base); font-weight: var(--graisse-moyenne); }
p  { margin: 0 0 var(--e3); }
ul, ol { margin: 0 0 var(--e3); padding-left: var(--e5); }
li { margin-bottom: var(--e2); }

a { color: var(--accent-700); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}

.legende { font-size: var(--taille-legende); color: var(--encre-3); }
.secondaire { color: var(--encre-2); }
.chiffres { font-variant-numeric: tabular-nums; }
.invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Cadre d'application -------------------------------------------------- */

.app { min-height: 100vh; display: flex; flex-direction: column; }

.barre {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e5);
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  flex-wrap: wrap;
}
.barre .marque {
  font-weight: var(--graisse-forte);
  font-size: var(--taille-moyen);
  letter-spacing: -0.01em;
  color: var(--accent-700);
}
.barre .marque .point { color: var(--accent-400); }
.barre nav { display: flex; gap: var(--e1); flex-wrap: wrap; }
.barre nav button {
  min-height: var(--cible-min);
  padding: var(--e2) var(--e3);
  font: inherit; font-size: var(--taille-petit);
  color: var(--encre-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--rayon-petit);
  cursor: pointer;
}
.barre nav button:hover { background: var(--surface-2); }
.barre nav button[aria-current="page"] {
  background: var(--accent-100);
  color: var(--accent-800);
  font-weight: var(--graisse-moyenne);
  border-color: var(--accent-200);
}

.ecran { display: none; padding: var(--e5); flex: 1; }
.ecran.visible { display: block; }
.ecran > .dedans { max-width: var(--largeur-page); margin: 0 auto; }

.entete-ecran { margin-bottom: var(--e5); }
.entete-ecran .date { font-size: var(--taille-moyen); color: var(--encre-2); margin: 0 0 var(--e1); }

/* --- Carte, panneau ------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--e5);
  box-shadow: var(--ombre-1);
  margin-bottom: var(--e4);
}
.carte-titre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }

.grille { display: grid; gap: var(--e4); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grille-3, .grille-2 { grid-template-columns: 1fr; } }

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

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: var(--cible-min);
  padding: var(--e3) var(--e5);
  font: inherit; font-weight: var(--graisse-moyenne);
  border-radius: var(--rayon-petit);
  border: 1px solid var(--accent-600);
  background: var(--accent-600); color: #FFFFFF;
  cursor: pointer;
  transition: background var(--duree-courte) var(--courbe);
}
.bouton:hover { background: var(--accent-700); border-color: var(--accent-700); }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; }
.bouton.principal {
  min-height: var(--cible-large);
  font-size: var(--taille-moyen);
  padding: var(--e4) var(--e6);
  width: 100%;
}
.bouton.second {
  background: var(--surface); color: var(--accent-700);
  border-color: var(--trait-fort);
}
.bouton.second:hover { background: var(--accent-050); border-color: var(--accent-400); }
.bouton.discret {
  background: transparent; color: var(--encre-2);
  border-color: transparent; font-weight: var(--graisse-normale);
  padding: var(--e2) var(--e3);
}
.bouton.discret:hover { background: var(--surface-2); }
.rang-boutons { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* --- Composant : chiffre heros -------------------------------------------- */

.chiffre-heros { text-align: left; }
.chiffre-heros .valeur {
  display: block;
  font-family: var(--police-chiffres);
  font-size: var(--taille-heros);
  font-weight: var(--graisse-forte);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.chiffre-heros .phrase {
  display: block;
  font-size: var(--taille-base);
  font-weight: var(--graisse-moyenne);
  margin-top: var(--e2);
}
.chiffre-heros .precision { display: block; font-size: var(--taille-legende); color: var(--encre-3); margin-top: var(--e1); }
.chiffre-heros.appuye .valeur { color: var(--accent-700); }
.chiffre-heros.appuye {
  border-left: 4px solid var(--accent-600);
  padding-left: var(--e4);
}

/* --- Composant : badge d'etat --------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3);
  border-radius: var(--rayon-pilule);
  border: 1px solid transparent;
  font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne);
  white-space: nowrap;
}
.badge .icone { font-size: 1em; line-height: 1; }

.badge.confirme { color: var(--etat-confirme-texte); background: var(--etat-confirme-fond); border-color: var(--etat-confirme-trait); }
.badge.deplacer { color: var(--etat-deplacer-texte); background: var(--etat-deplacer-fond); border-color: var(--etat-deplacer-trait); }
.badge.annule   { color: var(--etat-annule-texte);   background: var(--etat-annule-fond);   border-color: var(--etat-annule-trait); }
.badge.silence  { color: var(--etat-silence-texte);  background: var(--etat-silence-fond);  border-color: var(--etat-silence-trait); }
.badge.preciser { color: var(--etat-preciser-texte); background: var(--etat-preciser-fond); border-color: var(--etat-preciser-trait); border-style: dashed; }
.badge.neutre   { color: var(--encre-2); background: var(--surface-2); border-color: var(--trait); }

/* Propose contre confirme : la difference se voit a un metre.
   Propose : contour interrompu, fond blanc, mot "propose" ecrit.
   Confirme : aplat plein, trait epais a gauche, mot "confirme" ecrit. */
.badge-propose {
  border-style: dashed;
  border-width: 2px;
  background: var(--surface);
  opacity: 0.95;
}
.badge-propose::after {
  content: "· à confirmer";
  font-size: var(--taille-legende);
  font-weight: var(--graisse-normale);
  font-style: italic;
  opacity: 0.9;
}
.badge-confirme {
  border-width: 1px;
  box-shadow: inset 4px 0 0 0 currentColor;
  padding-left: var(--e4);
}
.badge-confirme::after {
  content: "· votre décision";
  font-size: var(--taille-legende);
  font-weight: var(--graisse-normale);
  opacity: 0.85;
}

/* --- Composant : ligne de liste d'appels ---------------------------------- */

.liste-appels { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--surface); }
.liste-appels .entete-liste,
.ligne-appel {
  display: grid;
  grid-template-columns: 56px 88px 1.4fr 1fr 1.1fr 1.6fr;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--trait);
}
.liste-appels .entete-liste {
  background: var(--surface-2);
  font-size: var(--taille-legende);
  font-weight: var(--graisse-moyenne);
  color: var(--encre-2);
  text-transform: none;
}
.ligne-appel:last-child { border-bottom: none; }
.ligne-appel .rang {
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
  font-weight: var(--graisse-forte);
  font-size: var(--taille-moyen);
  color: var(--accent-700);
}
.ligne-appel .heure { font-variant-numeric: tabular-nums; font-weight: var(--graisse-moyenne); }
.ligne-appel .personne { font-weight: var(--graisse-moyenne); }
.ligne-appel .numero { font-variant-numeric: tabular-nums; color: var(--encre-2); font-size: var(--taille-petit); }
.ligne-appel .motif-rang { font-size: var(--taille-legende); color: var(--encre-3); }
.ligne-appel.a-relire { background: var(--accent-050); box-shadow: inset 3px 0 0 0 var(--accent-600); }
.ligne-appel.ecartee { background: var(--surface-2); }
.ligne-appel.ecartee .personne { color: var(--encre-2); }
@media (max-width: 860px) {
  .liste-appels .entete-liste { display: none; }
  .ligne-appel { grid-template-columns: 48px 1fr; row-gap: var(--e1); }
  .ligne-appel > * { grid-column: 2; }
  .ligne-appel .rang { grid-column: 1; grid-row: 1 / span 5; align-self: start; }
}

/* --- Composant : ligne de tournee ----------------------------------------- */

.tournee { display: flex; flex-direction: column; gap: var(--e2); }
.ligne-tournee {
  display: grid;
  grid-template-columns: 92px 1.1fr 200px 2fr auto;
  gap: var(--e4);
  align-items: start;
  padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 5px solid var(--trait-fort);
  border-radius: var(--rayon-petit);
}
.ligne-tournee .quand { font-variant-numeric: tabular-nums; font-weight: var(--graisse-moyenne); }
.ligne-tournee .quand .duree { display: block; font-size: var(--taille-legende); color: var(--encre-3); font-weight: var(--graisse-normale); }
.ligne-tournee .personne { font-weight: var(--graisse-moyenne); }
.ligne-tournee .personne .rdv { display: block; font-size: var(--taille-legende); color: var(--encre-3); font-weight: var(--graisse-normale); }
.ligne-tournee .resume { font-size: var(--taille-petit); color: var(--encre-2); }
.ligne-tournee .suite { font-size: var(--taille-legende); }

.ligne-tournee.est-confirme { border-left-color: var(--etat-confirme-trait); }
.ligne-tournee.est-deplacer { border-left-color: var(--etat-deplacer-trait); }
.ligne-tournee.est-annule   { border-left-color: var(--etat-annule-trait); }
.ligne-tournee.est-silence  { border-left-color: var(--etat-silence-trait); }
.ligne-tournee.est-preciser { border-left-color: var(--accent-400); }
.ligne-tournee.a-confirmer  { background: var(--accent-050); }

@media (max-width: 860px) {
  .ligne-tournee { grid-template-columns: 1fr; gap: var(--e2); }
}

/* --- Composant : carte de creneau ----------------------------------------- */

.carte-creneau {
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-top: 5px solid var(--accent-600);
  border-radius: var(--rayon);
  padding: var(--e5);
  box-shadow: var(--ombre-1);
  display: flex; flex-direction: column; gap: var(--e3);
}
.carte-creneau .creneau-heure {
  font-family: var(--police-chiffres);
  font-size: var(--taille-titre);
  font-weight: var(--graisse-forte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.carte-creneau .creneau-qui { color: var(--encre-2); }
.carte-creneau .compte-a-rebours {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--accent-100); color: var(--accent-800);
  border: 1px solid var(--accent-200);
  border-radius: var(--rayon-pilule);
  padding: var(--e1) var(--e3);
  font-size: var(--taille-petit); font-weight: var(--graisse-moyenne);
  font-variant-numeric: tabular-nums;
}
.carte-creneau.fermee { border-top-color: var(--trait-fort); opacity: 0.92; }
.candidats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.candidats li {
  display: grid; grid-template-columns: 28px 1fr auto; gap: var(--e3);
  align-items: center; margin: 0;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--trait); border-radius: var(--rayon-petit);
}
.candidats .place {
  font-variant-numeric: tabular-nums; font-weight: var(--graisse-forte);
  color: var(--accent-700); text-align: center;
}
.candidats .pourquoi { display: block; font-size: var(--taille-legende); color: var(--encre-3); }

/* --- Composant : bloc a relire -------------------------------------------- */

.bloc-a-relire {
  border: 2px dashed var(--accent-400);
  background: var(--accent-050);
  border-radius: var(--rayon);
  padding: var(--e4);
}
.bloc-a-relire > .etiquette {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--taille-legende);
  font-weight: var(--graisse-moyenne);
  color: var(--accent-800);
  margin-bottom: var(--e3);
  text-transform: none;
}
.bloc-a-relire.valide { border-style: solid; border-color: var(--accent-600); background: var(--surface); }
.bloc-a-relire[contenteditable="true"]:focus { outline: 3px solid var(--accent-600); outline-offset: 2px; }
.bloc-a-relire .texte { font-size: var(--taille-base); }

/* Le texte redige par le modele se distingue du fait calcule :
   fond legerement teinte, filet a gauche, jamais la meme surface qu'un
   chiffre ou qu'un etat. */
.redige {
  background: linear-gradient(var(--accent-050), var(--accent-050));
  box-shadow: inset 3px 0 0 0 var(--accent-400);
  padding: var(--e2) var(--e3);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}
.fait {
  font-variant-numeric: tabular-nums;
  font-weight: var(--graisse-moyenne);
}

/* Attente honnete, moins de trois secondes, jamais un ecran fige. */
.en-preparation { display: flex; align-items: center; gap: var(--e3); color: var(--encre-2); }
.en-preparation .barre-attente {
  height: 6px; width: 160px; border-radius: var(--rayon-pilule);
  background: var(--accent-100); overflow: hidden; position: relative;
}
.en-preparation .barre-attente::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--accent-600); border-radius: var(--rayon-pilule);
  animation: glisse 1.1s infinite var(--courbe);
}
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) {
  .en-preparation .barre-attente::after { animation: none; width: 100%; opacity: 0.5; }
}

/* --- Composant : apercu d'appel ------------------------------------------- */

.apercu-appel {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  padding: var(--e4);
}
.apercu-appel .repliques { display: flex; flex-direction: column; gap: var(--e3); margin: 0; }
.apercu-appel .replique { display: grid; grid-template-columns: 92px 1fr; gap: var(--e3); align-items: start; }
.apercu-appel .qui {
  font-size: var(--taille-legende); font-weight: var(--graisse-moyenne);
  color: var(--encre-3); padding-top: var(--e1);
}
.apercu-appel .dit { background: var(--surface-2); border-radius: var(--rayon-petit); padding: var(--e2) var(--e3); }
.apercu-appel .replique.machine .dit { background: var(--accent-050); box-shadow: inset 3px 0 0 0 var(--accent-400); }

/* --- Composant : apercu de message ecrit ---------------------------------- */

.apercu-message {
  width: 300px; max-width: 100%;
  border: 2px solid var(--encre); border-radius: 22px;
  background: var(--surface); padding: var(--e5) var(--e3) var(--e4);
  position: relative;
}
.apercu-message::before {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 5px; border-radius: var(--rayon-pilule); background: var(--trait-fort);
}
.apercu-message .bulle-sms {
  background: var(--surface-2);
  border-radius: 16px 16px 16px 4px;
  padding: var(--e3);
  font-size: var(--taille-petit);
}
.apercu-message .expediteur { font-size: var(--taille-legende); color: var(--encre-3); margin-bottom: var(--e2); }

/* --- Composant : fiche de patient ----------------------------------------- */

.fiche-patient { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }
@media (max-width: 860px) { .fiche-patient { grid-template-columns: 1fr; } }
.fiche-patient .identite .prenom { font-size: var(--taille-titre); font-weight: var(--graisse-forte); margin: 0; }
.paires { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e4); margin: 0; }
.paires dt { color: var(--encre-3); font-size: var(--taille-petit); }
.paires dd { margin: 0; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }

/* Ce que l'outil ne sait pas, et ne veut pas savoir. */
.bloc-ignore {
  border: 1px solid var(--accent-200);
  background: var(--accent-050);
  border-radius: var(--rayon);
  padding: var(--e4);
}
.bloc-ignore ul { list-style: none; padding: 0; margin: 0; }
.bloc-ignore li { display: flex; gap: var(--e2); align-items: flex-start; }
.bloc-ignore li .marque-non { color: var(--accent-700); font-weight: var(--graisse-forte); }

/* --- Composant : ligne de reglage ----------------------------------------- */

.ligne-reglage {
  display: grid;
  grid-template-columns: 1.2fr 200px 1.6fr;
  gap: var(--e4);
  align-items: start;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--trait);
}
.ligne-reglage:last-child { border-bottom: none; }
.ligne-reglage .intitule { font-weight: var(--graisse-moyenne); }
.ligne-reglage .valeur input,
.ligne-reglage .valeur select {
  width: 100%; min-height: var(--cible-min);
  padding: var(--e2) var(--e3);
  font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--encre);
}
.ligne-reglage .raison { font-size: var(--taille-petit); color: var(--encre-2); }
.ligne-reglage .defaut { font-size: var(--taille-legende); color: var(--encre-3); display: block; margin-top: var(--e1); }
@media (max-width: 860px) { .ligne-reglage { grid-template-columns: 1fr; gap: var(--e2); } }

/* --- Composant : encart de regle avec sa source --------------------------- */

.encart-regle {
  border: 1px solid var(--trait);
  border-left: 5px solid var(--accent-600);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  padding: var(--e4);
  margin-bottom: var(--e3);
}
.encart-regle .regle-titre { font-weight: var(--graisse-moyenne); margin-bottom: var(--e2); }
.encart-regle .source {
  font-size: var(--taille-legende); color: var(--encre-3);
  border-top: 1px solid var(--trait); padding-top: var(--e2); margin-top: var(--e3);
  word-break: break-word;
}
.encart-regle.a-confirmer { border-left-style: dashed; border-left-color: var(--trait-fort); background: var(--surface-2); }
.encart-regle .etiquette-verif {
  display: inline-block; font-size: var(--taille-legende);
  border: 1px solid var(--trait); border-radius: var(--rayon-pilule);
  padding: 0 var(--e2); color: var(--encre-2); background: var(--fond);
}

/* --- Refus de validation, mention verrouillee ------------------------------ */

.bandeau-refus {
  border: 1px solid var(--refus-trait);
  border-left: 6px solid var(--refus-trait);
  background: var(--refus-fond);
  border-radius: var(--rayon-petit);
  padding: var(--e4);
  margin-bottom: var(--e4);
}
.bandeau-refus .titre-refus {
  display: flex; align-items: center; gap: var(--e2);
  font-weight: var(--graisse-forte); margin-bottom: var(--e2);
}
.bandeau-refus .phrase-en-cause {
  background: var(--surface); border: 1px dashed var(--refus-trait);
  border-radius: var(--rayon-petit); padding: var(--e2) var(--e3);
  font-style: italic;
}
.masque {
  background: var(--encre); color: var(--encre);
  border-radius: 2px; padding: 0 var(--e3);
  user-select: none;
}

.mention-verrouillee {
  display: flex; gap: var(--e3); align-items: flex-start;
  background: var(--verrou-fond);
  border: 1px solid var(--verrou-trait);
  border-radius: var(--rayon-petit);
  padding: var(--e3);
}
.mention-verrouillee .cadenas { flex: none; margin-top: 2px; }
.mention-verrouillee .pourquoi { font-size: var(--taille-legende); color: var(--accent-800); margin-top: var(--e1); }

/* Ligne de confiance : ce qui part au modele, ce qui n'en part pas. */
.ligne-confiance {
  display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap;
  font-size: var(--taille-legende); color: var(--encre-3);
  border-top: 1px dotted var(--trait-fort);
  padding-top: var(--e2); margin-top: var(--e4);
}
.ligne-confiance strong { color: var(--encre-2); font-weight: var(--graisse-moyenne); }

/* --- Bandeau d'alerte calme (jamais une couleur d'etat d'appel) ----------- */

.bandeau {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  border: 1px solid var(--accent-200);
  background: var(--accent-100);
  color: var(--accent-900);
  border-radius: var(--rayon-petit);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
}
.bandeau .fort { font-weight: var(--graisse-moyenne); }

/* --- Tableaux ------------------------------------------------------------- */

table.tableau { width: 100%; border-collapse: collapse; background: var(--surface); }
table.tableau th, table.tableau td {
  text-align: left; padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--trait);
  font-variant-numeric: tabular-nums;
}
table.tableau th { background: var(--surface-2); font-size: var(--taille-petit); color: var(--encre-2); }
table.tableau td.nombre, table.tableau th.nombre { text-align: right; }

/* --- Composant : bulle de didacticiel ------------------------------------- */

.voile-didacticiel {
  position: fixed; inset: 0; background: rgba(26, 29, 35, 0.35);
  z-index: 40; display: none;
}
.voile-didacticiel.visible { display: block; }
.bulle {
  position: fixed; z-index: 50;
  width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--accent-600);
  border-top: 5px solid var(--accent-600);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
  padding: var(--e4);
  display: none;
}
.bulle.visible { display: block; }
.bulle .compteur { font-size: var(--taille-legende); color: var(--encre-3); }
.bulle .ou { font-size: var(--taille-legende); color: var(--accent-800); font-weight: var(--graisse-moyenne); }
.bulle h3 { margin: var(--e2) 0 var(--e2); }
.bulle p { font-size: var(--taille-petit); }
.bulle .pied-bulle { display: flex; gap: var(--e2); align-items: center; justify-content: space-between; margin-top: var(--e4); flex-wrap: wrap; }
.cible-designee {
  outline: 3px solid var(--accent-600);
  outline-offset: 4px;
  border-radius: var(--rayon-petit);
  position: relative; z-index: 45;
  background: var(--surface);
}

/* --- Composant : pied de signature ---------------------------------------- */

.signature {
  margin-top: var(--e6);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--trait);
  font-size: var(--taille-legende);
  color: var(--encre-3);
  text-align: center;
}
.signature a { color: var(--encre-3); }

/* --- Impression ----------------------------------------------------------- */

@media print {
  body { background: #FFFFFF; }
  .barre, .voile-didacticiel, .bulle, .sans-impression { display: none !important; }
  .ecran { display: block !important; padding: 0; }
  .carte { box-shadow: none; break-inside: avoid; }
  .ligne-tournee, .carte-creneau, .encart-regle { break-inside: avoid; }
}