/* Senloyer — feuille de style.
   Palette : lagon (encre), jaune « car rapide » pour l'action et l'argent reçu,
   magenta bougainvillier pour les retards. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --encre: #0E3B43;
  --encre-2: #16484F;
  --encre-3: #1F5A63;
  --papier: #F3F6F3;
  --blanc: #FFFFFF;
  --texte: #14262B;
  --gris: #556B6F;
  --trait: #D6E0DD;
  --jaune: #F2B705;
  --jaune-pale: #FFF1BF;
  --magenta: #B0165A;
  --magenta-pale: #FBE3EE;
  --vert: #17784B;
  --vert-pale: #DBF1E5;
  --titre: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --corps: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rail: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--texte); font: 16px/1.5 var(--corps); }
h1, h2, h3 { font-family: var(--titre); color: var(--encre); margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--encre); }
small { display: block; color: var(--gris); font-size: 0.84rem; font-weight: 400; }
code { font: inherit; background: var(--blanc); border: 1px solid var(--trait); border-radius: 5px; padding: 1px 6px; word-break: break-all; }
:focus-visible { outline: 3px solid var(--encre-3); outline-offset: 2px; border-radius: 4px; }
.chargement { padding: 3rem; color: var(--gris); }

/* ------------------------------------------------------------- Structure -- */
#app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
main { padding: 32px clamp(16px, 4vw, 48px) 64px; min-width: 0; }
main:focus { outline: none; }
main > section { max-width: 1180px; display: grid; gap: 22px; }

.rail { background: var(--encre); color: #D5E4E1; padding: 22px 14px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marque { display: flex; align-items: center; gap: 10px; font: 700 1.35rem var(--titre); color: #fff; text-decoration: none; padding: 2px 10px 10px; }
.marque.sombre { color: var(--encre); padding: 0 0 6px; }
.logo { display: grid; grid-template-columns: 11px 11px; gap: 3px; }
.logo i { width: 11px; height: 11px; border-radius: 2.5px; background: var(--encre-3); }
.logo i:nth-child(1), .logo i:nth-child(4) { background: var(--jaune); }
.rail .groupe { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--encre-2); }
.rail .groupe:last-of-type { border-bottom: 0; }
.rail a:not(.marque) { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: #D5E4E1; text-decoration: none; font-weight: 500; }
.rail a:not(.marque):hover { background: var(--encre-2); color: #fff; }
.rail a.actif { background: var(--jaune); color: var(--encre); font-weight: 700; }
.rail :focus-visible, .barre-bas :focus-visible { outline-color: var(--jaune); }
.compte { background: var(--magenta); color: #fff; border-radius: 99px; font-size: 0.75rem; min-width: 22px; padding: 1px 7px; text-align: center; font-weight: 700; }
.rail a.actif .compte { background: var(--encre); }
.pied-rail { margin-top: auto; padding: 10px; font-size: 0.82rem; color: #9DB8B4; word-break: break-all; }
.pied-rail .demo { display: inline-block; border: 1.5px dashed #6F9A97; border-radius: 6px; padding: 3px 9px; color: #D5E4E1; }
.barre-bas, .voile { display: none; }

.tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tete p { color: var(--gris); max-width: 62ch; margin-top: 6px; }
.outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pousse { flex: 1; }
.compteur, .resume { color: var(--gris); font-size: 0.92rem; }
.pile { display: grid; gap: 14px; }
.bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 20px; display: grid; gap: 14px; align-content: start; }
.vide { color: var(--gris); padding: 18px 0; }
.note { color: var(--gris); font-size: 0.92rem; }
.encadre { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--jaune); border-radius: 8px; padding: 12px 16px; display: grid; gap: 6px; }
p.encadre { display: block; }
.du { color: var(--magenta); }

/* --------------------------------------------------------------- Boutons -- */
.btn { font: 600 0.95rem var(--corps); padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--trait); background: var(--blanc); color: var(--encre); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
.btn:hover { border-color: var(--encre-3); }
.btn.principal { background: var(--jaune); border-color: var(--jaune); color: var(--encre); font-weight: 700; }
.btn.principal:hover { background: #E0A900; border-color: #E0A900; }
.btn.second { border-color: var(--encre); }
.btn.discret { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; padding-inline: 8px; }
.btn.danger { color: var(--magenta); }
.btn.mini { padding: 4px 11px; min-height: 32px; font-size: 0.86rem; background: var(--encre); border-color: var(--encre); color: #fff; }
.btn.mini.second { background: var(--blanc); color: var(--encre); }
.btn.mini.discret { background: transparent; border-color: transparent; color: var(--gris); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.pastille { display: inline-block; border-radius: 99px; padding: 2px 10px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; background: #E7EEEC; color: var(--encre); }
.pastille.vert { background: var(--vert-pale); color: #0D5633; }
.pastille.jaune { background: var(--jaune-pale); color: #6A4E00; }
.pastille.magenta { background: var(--magenta-pale); color: #8A0F45; }
.pastille.gris { background: #E9ECEB; color: var(--gris); }

/* ----------------------------------------------------------- Formulaires -- */
input, select, textarea { font: inherit; color: inherit; background: var(--blanc); border: 1.5px solid #BFCDCA; border-radius: 8px; padding: 9px 11px; width: 100%; min-height: 42px; }
textarea { resize: vertical; min-height: 0; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--encre); flex: none; padding: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--jaune); outline-offset: 0; border-color: var(--encre); }
.invalide { border-color: var(--magenta); background: var(--magenta-pale); }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.champ { display: grid; gap: 5px; align-content: start; }
.champ > label, label.champ { font-weight: 600; font-size: 0.92rem; color: var(--encre); }
.large { grid-column: 1 / -1; }
.champ.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.champ.case small { display: inline; }
.requis { color: var(--magenta); }
.plein { width: 100%; }
.outils input[type="search"] { max-width: 280px; }
.outils select { width: auto; }
.en-ligne { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.en-ligne input { width: auto; }
.cases { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cases label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cases label.inactif { color: var(--gris); }
.cases small { display: inline; }

/* --------------------------------------------------------------- Tableaux -- */
.cadre-table { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; font-size: 0.86rem; color: var(--gris); padding: 11px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid #EBF0EE; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: #F7FAF8; }

/* ----------------------------------------------------------------- Façade -- */
.facade { background: var(--encre); border-radius: 16px; padding: 22px; display: grid; gap: 18px; }
.facade-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.fenetre-bien { font: inherit; text-align: left; border: 0; border-radius: 7px; padding: 10px 11px; min-height: 92px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: var(--encre-3); color: #EAF3F1; overflow: hidden; }
.fenetre-bien .ref { font-size: 0.76rem; opacity: 0.85; }
.fenetre-bien .qui { font: 600 0.93rem/1.2 var(--titre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fenetre-bien .ou { font-size: 0.78rem; margin-top: auto; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenetre-bien.paye { background: var(--jaune); color: var(--encre); }
.fenetre-bien.partiel { background: linear-gradient(to top, var(--jaune) 0 42%, var(--encre-3) 42%); color: #fff; }
.fenetre-bien.partiel .ou { color: var(--encre); opacity: 1; }
.fenetre-bien.retard { background: var(--magenta); color: #fff; }
.fenetre-bien.attente { background: var(--encre-3); }
.fenetre-bien.libre { background: transparent; box-shadow: inset 0 0 0 1.5px #5C8E8D; color: #B9D0CC; }
.fenetre-bien.travaux { background: repeating-linear-gradient(135deg, var(--encre-2) 0 9px, var(--encre-3) 9px 18px); color: #D5E4E1; }
.fenetre-bien:hover { filter: brightness(1.08); }
.fenetre-bien:focus-visible { outline-color: #fff; }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: #D5E4E1; font-size: 0.88rem; }
.legende li { display: flex; align-items: center; gap: 7px; }
.legende i.fenetre-bien { min-height: 0; width: 15px; height: 15px; padding: 0; border-radius: 3px; cursor: default; }
.vide-facade { color: #D5E4E1; justify-items: start; }

.chiffres { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.chiffre { font: inherit; color: inherit; text-align: left; background: none; border: 0; border-left: 1px solid var(--trait); padding: 18px 20px; display: grid; gap: 3px; align-content: start; }
.chiffre:first-child { border-left: 0; }
.chiffre.lien { cursor: pointer; }
.chiffre.lien:hover { background: #F7FAF8; }
.chiffre .libelle { font-weight: 600; font-size: 0.9rem; color: var(--gris); }
.chiffre strong { font: 700 1.75rem/1.15 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.chiffre strong.du { color: var(--magenta); }
.jauge { height: 8px; background: #E4ECE9; border-radius: 99px; overflow: hidden; margin: 6px 0 2px; }
.jauge i { display: block; height: 100%; background: var(--jaune); border-radius: 99px; }

.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lignes { list-style: none; margin: 0; padding: 0; }
.lignes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #EBF0EE; }
.lignes li:last-child { border-bottom: 0; }
.lignes.fines li { align-items: baseline; font-size: 0.93rem; }
.lignes.fines small { white-space: nowrap; }
.lignes.choix li { padding: 0; }
.lignes.choix button { font: inherit; color: inherit; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 12px 6px; cursor: pointer; text-align: left; }
.lignes.choix button:hover { background: #F7FAF8; }
.barres { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 150px; }
.barres .mois { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; text-align: center; font-size: 0.82rem; color: var(--gris); }
.tige { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.tige i { position: absolute; bottom: 0; width: 62%; border-radius: 4px 4px 0 0; }
.tige .attendu { background: #DCE6E3; }
.tige .recu { background: var(--encre); width: 40%; }
.cle { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin: 0 5px 0 10px; }
.cle.recu { background: var(--encre); margin-left: 0; }
.cle.attendu { background: #DCE6E3; }

/* --------------------------------------------------------------- Annonces -- */
.onglets { display: flex; gap: 4px; border-bottom: 1.5px solid var(--trait); overflow-x: auto; }
.onglets button { font: 600 0.96rem var(--corps); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: var(--gris); cursor: pointer; white-space: nowrap; margin-bottom: -1.5px; }
.onglets button.actif { color: var(--encre); border-bottom-color: var(--jaune); }
.onglet { display: grid; gap: 18px; }
.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segments button { font: 500 0.9rem var(--corps); background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 99px; padding: 5px 13px; cursor: pointer; color: var(--encre); }
.segments button.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.carte-annonce { font: inherit; color: inherit; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; display: grid; align-content: start; }
.carte-annonce:hover { border-color: var(--encre-3); }
.vignette { aspect-ratio: 4 / 5; background: var(--encre); overflow: hidden; }
.vignette img, .vignette svg, .colonne-visuel img, .colonne-visuel svg { display: block; width: 100%; height: auto; }
.carte-annonce .infos { padding: 12px 14px 14px; display: grid; gap: 4px; }
.carte-annonce .infos > span { font-size: 0.9rem; color: var(--gris); }
.carte-annonce .prix { color: var(--encre) !important; font-weight: 700; }
.fiche-annonce { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.colonne-visuel { display: grid; gap: 10px; position: sticky; top: 0; }
.colonne-visuel img, .colonne-visuel .svg { border-radius: 10px; overflow: hidden; }
details { border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); }
details summary { padding: 9px 12px; font-weight: 600; cursor: pointer; }
details textarea { border: 0; border-top: 1px solid var(--trait); border-radius: 0 0 8px 8px; }
.reseaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.reseau { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 16px; display: grid; gap: 8px; justify-items: start; align-content: start; }
.photos { display: flex; flex-wrap: wrap; gap: 10px; }
.photos figure { margin: 0; position: relative; width: 104px; height: 78px; border-radius: 8px; overflow: hidden; }
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos figure button { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--encre); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.ajout-photo { width: 104px; height: 78px; border: 1.5px dashed #9FB5B1; border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--gris); cursor: pointer; padding: 6px; }

/* --------------------------------------------------------------- Fenêtres -- */
dialog.fenetre { border: 0; border-radius: 14px; padding: 0; width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); color: var(--texte); background: var(--papier); box-shadow: 0 24px 70px rgba(8, 40, 46, 0.35); overflow: hidden; }
dialog.fenetre[open] { display: flex; flex-direction: column; }
dialog.fenetre.large { width: min(960px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(8, 40, 46, 0.55); }
dialog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: var(--blanc); border-bottom: 1px solid var(--trait); }
dialog .fermer { font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--gris); width: 40px; height: 40px; border-radius: 8px; }
dialog .corps { padding: 22px; overflow-y: auto; flex: 1; }
dialog footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 22px; background: var(--blanc); border-top: 1px solid var(--trait); }
dialog footer:empty { display: none; }

#toasts { position: fixed; z-index: 2147483647; right: 16px; bottom: 16px; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--encre); color: #fff; padding: 12px 16px; border-radius: 10px; font-weight: 500; box-shadow: 0 8px 24px rgba(8, 40, 46, 0.3); border-left: 5px solid var(--jaune); }
.toast.erreur { border-left-color: #FF7DB4; }

/* -------------------------------------------------------------- Connexion -- */
.porte { grid-column: 1 / -1; min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--encre); }
.carte-porte { background: var(--papier); border-radius: 16px; padding: 32px; width: min(440px, 100%); display: grid; gap: 16px; }
.carte-porte .formulaire { grid-template-columns: 1fr; }
.carte-porte > p { color: var(--gris); }

/* -------------------------------------------------------------- Documents -- */
#impression { display: none; }
.apercu { background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: clamp(16px, 4vw, 36px); }
.document { font: 15px/1.55 var(--corps); color: #111; display: grid; gap: 18px; }
.document h1 { font-size: 1.5rem; color: #111; }
.document h2 { font-size: 1.02rem; color: #111; margin-top: 6px; }
.doc-tete { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: 14px; font-size: 0.9rem; }
.doc-agence { font: 700 1.25rem var(--titre); display: block; }
.doc-titre { text-align: right; }
.doc-table { width: 100%; }
.doc-table td { border-bottom: 1px solid #DDD; padding: 7px 4px; }
.doc-table tr.fort td { font-weight: 700; border-bottom: 2px solid #111; }
.doc-total tr.fort td { font-size: 1.12rem; border-top: 2px solid #111; }
.doc-mention { font-size: 0.86rem; color: #444; }
.doc-pied { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 18px; }
.doc-signature { min-width: 220px; min-height: 90px; border-top: 1px solid #111; padding-top: 6px; text-align: center; font-size: 0.88rem; }

@media print {
  body { background: #fff; }
  #app, #toasts, dialog, dialog::backdrop { display: none !important; }
  #impression { display: block; }
  #impression .document { padding: 0; page-break-after: always; break-after: page; }
  #impression .document:last-child { page-break-after: auto; break-after: auto; }
  @page { margin: 18mm; }
}

/* ----------------------------------------------------------------- Mobile -- */
@media (max-width: 900px) {
  #app { display: block; }
  main { padding: 20px 14px 96px; }
  h1 { font-size: 1.55rem; }
  .rail { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 30; transform: translateX(-102%); transition: transform 0.2s ease; height: 100dvh; }
  .menu-ouvert .rail { transform: none; }
  .menu-ouvert .voile { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(8, 40, 46, 0.55); }
  .barre-bas { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 20; background: var(--encre); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .barre-bas a, .barre-bas button { font: 600 0.8rem var(--corps); color: #C6DAD6; background: none; border: 0; text-decoration: none; text-align: center; padding: 10px 2px; border-radius: 8px; position: relative; cursor: pointer; }
  .barre-bas a.actif { background: var(--jaune); color: var(--encre); }
  .barre-bas .compte { position: absolute; top: 0; right: 8%; font-size: 0.68rem; min-width: 18px; padding: 0 5px; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffre { border-left: 0; border-top: 1px solid var(--trait); }
  .chiffre:first-child { grid-column: 1 / -1; border-top: 0; }
  .chiffre:nth-child(3), .chiffre:nth-child(4) { border-left: 1px solid var(--trait); }
  .chiffre:last-child:nth-child(even) { grid-column: 1 / -1; border-left: 0; }
  .deux { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .fiche-annonce { grid-template-columns: 1fr; }
  .colonne-visuel { position: static; max-width: 260px; }
  .facade { padding: 14px; border-radius: 12px; }
  .facade-grille { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .fenetre-bien { min-height: 84px; padding: 8px 9px; }
  .tete .btn.principal { width: 100%; }
  .outils input[type="search"] { max-width: none; flex: 1 1 100%; }
  dialog .corps { padding: 16px; }
  dialog footer { padding: 12px 16px; }
  #toasts { bottom: 84px; }

  /* Les tableaux deviennent des fiches empilées. */
  .cadre-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  table, tbody, tr, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
  td { border: 0 !important; padding: 4px 0; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  td::before { content: attr(data-label); color: var(--gris); font-size: 0.86rem; text-align: left; flex: none; }
  td:first-child { text-align: left; display: block; padding-bottom: 8px; }
  td:first-child::before, td[data-label=""]::before { content: none; }
  td[data-label=""] { justify-content: flex-end; padding-top: 8px; }
  td:empty { display: none; }
  .doc-table, .doc-table tbody { display: table; width: 100%; }
  .doc-table tbody { display: table-row-group; }
  .doc-table tr { display: table-row; background: none; border: 0; }
  .doc-table td { display: table-cell; border-bottom: 1px solid #DDD !important; padding: 7px 4px; text-align: left; }
  .doc-table td.num { text-align: right; }
  .doc-table td::before { content: none; }
}

@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* Ajustements */
main section > div > h2 { margin-bottom: 12px; }
@media (min-width: 901px) { td .actions { flex-wrap: nowrap; } }

/* Messages de l'écran de connexion */
.avis { background: var(--magenta-pale); color: #6E0D38; border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; font-weight: 500; }
.avis[hidden] { display: none; }
.avis .btn { justify-self: start; }
.carte-porte .champ.case { align-items: center; color: var(--gris); }