/* LYRE — feuille de style commune */

:root{
  --fond:#f6f7f6;
  --carte:#ffffff;
  --trait:#e0e5e3;
  --trait-fort:#c6cfcc;
  --encre:#141d1c;
  --encre-2:#5a6b68;
  --encre-3:#8b9a97;
  --accent:#0f5e58;
  --accent-clair:#e2efec;
  --accent-fonce:#0a4641;
  --alerte:#a4340d;
  --alerte-clair:#fbe9e3;
  --attention:#8a5a06;
  --attention-clair:#fcf1dc;
  --ok:#186a3f;
  --ok-clair:#e0f0e6;
  --rayon:6px;
  --ombre:0 1px 2px rgba(20,29,28,.06), 0 1px 8px rgba(20,29,28,.04);
}

*{box-sizing:border-box}
/* Un display explicite sur une classe l'emporte sinon sur l'attribut hidden,
   et l'élément reste visible alors que le code le croit masqué. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--fond);
  color:var(--encre);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
h1,h2,h3{margin:0;letter-spacing:-.015em;line-height:1.2}
h1{font-size:22px;font-weight:650}
h2{font-size:18px;font-weight:650}
h3{font-size:14px;font-weight:650;color:var(--encre-2);text-transform:uppercase;letter-spacing:.06em}

/* ─── Ossature ─── */
.entete{
  background:var(--carte);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:20;
}
.entete-in{
  max-width:1240px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:24px;height:56px;
}
/* Le logo du produit, sur les écrans internes. Classe distincte de .marque,
   qui désigne l'identité de la conciergerie sur les écrans clients : les deux
   se retrouvaient sur le même sélecteur, et le display:flex de la seconde
   séparait « LY » de « RE » d'un espace de 10 px. */
.marque-lyre{font-weight:800;letter-spacing:.02em;font-size:21px;color:var(--accent);text-decoration:none}
.marque-lyre span{color:var(--encre)}
/* Les cordes d'une lyre, qui sont aussi les colonnes d'un planning.
   Surtout PAS de flex ici : « LY » et « RE » deviendraient deux éléments
   séparés par le gap, et le mot s'ouvrirait en deux. Une marge suffit.
   currentColor : le signe suit la couleur du mot, fond sombre compris. */
.marque-signe{width:25px;height:25px;fill:currentColor;
  vertical-align:-5px;margin-right:9px}
.onglets{display:flex;gap:2px;margin-left:8px;overflow-x:auto}
.onglets button{
  background:none;border:0;padding:8px 13px;border-radius:var(--rayon);
  font:inherit;font-weight:500;color:var(--encre-2);cursor:pointer;white-space:nowrap;
}
.onglets button:hover{background:var(--fond);color:var(--encre)}
.onglets button[aria-current="page"]{background:var(--accent-clair);color:var(--accent-fonce);font-weight:600}
.entete .compte{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--encre-2)}

/* Sur écran étroit, les onglets étaient comprimés entre le logo et le bouton
   « Quitter » : il ne restait de la place que pour le premier, et le
   défilement horizontal, sans barre visible sur iOS, ne se devinait pas.
   On leur donne une ligne entière, où trois ou quatre sont visibles à la
   fois : on voit alors qu'il y en a d'autres. */
@media(max-width:860px){
  .entete-in{height:auto;min-height:52px;padding:8px 14px;gap:10px;flex-wrap:wrap}
  .entete .compte{margin-left:auto}
  /* Le nom de l'utilisateur cède la place : il sait qui il est. */
  .entete .compte #qui{display:none}
  .onglets{
    /* min-width:0 : par défaut un élément de flex refuse de descendre sous la
       largeur de son contenu. Sans cette ligne, une barre d'onglets plus
       longue imposerait sa largeur au bandeau entier au lieu de défiler. */
    order:3;width:100%;min-width:0;margin-left:0;gap:4px;
    padding-bottom:4px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .onglets button{padding:8px 12px;font-size:14.5px;scroll-snap-align:start}
  /* Une barre fine mais VISIBLE : c'est elle qui annonce qu'il y a une suite. */
  .onglets::-webkit-scrollbar{height:3px}
  .onglets::-webkit-scrollbar-thumb{background:var(--trait-fort);border-radius:3px}
  .onglets::-webkit-scrollbar-track{background:transparent}
}

/* ─── Œil des champs de mot de passe ─── */
.champ-secret{position:relative;display:block}
.champ-secret input{width:100%;padding-right:46px}
.oeil{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  border:0;background:none;padding:7px;margin:0;cursor:pointer;
  color:var(--encre-3);border-radius:var(--rayon);line-height:0;
  /* width:auto explicitement : certaines pages étirent leurs boutons sur
     toute la largeur, et l'œil se retrouvait centré au milieu du champ. */
  width:auto;min-width:0;height:auto;
}
.oeil:hover{color:var(--encre-2);background:var(--fond)}
.oeil:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.oeil svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}

main{max-width:1240px;margin:0 auto;padding:26px 20px 80px}
.barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.barre .grandir{flex:1}

/* ─── Blocs ─── */
.carte{
  background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);box-shadow:var(--ombre);
}
.carte + .carte{margin-top:16px}
.carte-t{
  padding:14px 18px;border-bottom:1px solid var(--trait);
  display:flex;align-items:center;gap:12px;
}
.carte-c{padding:18px}
.grille{display:grid;gap:16px}
@media(min-width:900px){ .grille.deux{grid-template-columns:1fr 1fr} }

/* ─── Boutons ─── */
button,.btn{
  font:inherit;font-weight:550;border-radius:var(--rayon);cursor:pointer;
  border:1px solid var(--trait-fort);background:var(--carte);color:var(--encre);
  padding:8px 14px;transition:background .12s,border-color .12s;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
}
button:hover,.btn:hover{background:var(--fond);border-color:var(--encre-3)}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.btn-d{border-color:var(--alerte);color:var(--alerte);background:var(--carte)}
.btn-d:hover{background:var(--alerte-clair)}
.btn-min{padding:5px 10px;font-size:13px}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ─── Formulaires ─── */
label{display:block;font-size:12.5px;font-weight:600;color:var(--encre-2);margin-bottom:5px}
input,select,textarea{
  font:inherit;width:100%;padding:8px 11px;border:1px solid var(--trait-fort);
  border-radius:var(--rayon);background:var(--carte);color:var(--encre);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-clair)}
textarea{min-height:80px;resize:vertical;line-height:1.5}
.champs{display:grid;gap:14px}
@media(min-width:700px){
  .champs.c2{grid-template-columns:1fr 1fr}
  .champs.c3{grid-template-columns:1fr 1fr 1fr}
}
.champ-large{grid-column:1/-1}
.aide{font-size:12px;color:var(--encre-3);margin-top:4px;line-height:1.45}
fieldset{border:0;padding:0;margin:0 0 22px}
fieldset legend{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-3);padding:0 0 10px;
}

/* ─── Tableaux ─── */
.defile{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-3);font-weight:700;padding:9px 14px;border-bottom:1px solid var(--trait-fort);
  white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--trait);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.cliquable{cursor:pointer}
tbody tr.cliquable:hover{background:var(--fond)}
td.nb{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.nb{text-align:right}

/* ─── Pastilles ─── */
.pastille{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;
  padding:3px 9px;border-radius:99px;background:var(--fond);color:var(--encre-2);
  border:1px solid var(--trait);white-space:nowrap;
}
.pastille.ok{background:var(--ok-clair);color:var(--ok);border-color:transparent}
.pastille.attention{background:var(--attention-clair);color:var(--attention);border-color:transparent}
.pastille.alerte{background:var(--alerte-clair);color:var(--alerte);border-color:transparent}
.pastille.accent{background:var(--accent-clair);color:var(--accent-fonce);border-color:transparent}

/* ─── Messages ─── */
.message{padding:12px 16px;border-radius:var(--rayon);font-size:14px;margin-bottom:16px;line-height:1.5}
.message.erreur{background:var(--alerte-clair);color:var(--alerte)}
.message.succes{background:var(--ok-clair);color:var(--ok)}
.message.info{background:var(--accent-clair);color:var(--accent-fonce)}

.vide{padding:44px 20px;text-align:center;color:var(--encre-3)}
.vide p{margin:0 0 14px}

/* ─── Panneau latéral ─── */
.voile{
  position:fixed;inset:0;background:rgba(20,29,28,.42);z-index:40;
  display:flex;justify-content:flex-end;
}
.voile[hidden]{display:none!important}
.panneau{
  background:var(--carte);width:min(720px,100%);height:100%;
  overflow-y:auto;box-shadow:-4px 0 24px rgba(20,29,28,.14);
}
.panneau-t{
  position:sticky;top:0;background:var(--carte);border-bottom:1px solid var(--trait);
  padding:16px 22px;display:flex;align-items:center;gap:14px;z-index:1;
}
.panneau-t h2{flex:1}
.panneau-c{padding:22px}
.panneau-p{
  position:sticky;bottom:0;background:var(--carte);border-top:1px solid var(--trait);
  padding:14px 22px;display:flex;gap:10px;justify-content:flex-end;
}

.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.discret{color:var(--encre-3);font-size:13px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ─── Calendrier (M2) ─── */
.sous-onglets{display:flex;gap:2px;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:3px}
.sous-onglets button{border:0;background:none;padding:6px 14px;font-size:13.5px;font-weight:550;
  color:var(--encre-2);border-radius:4px}
.sous-onglets button[aria-current="page"]{background:var(--accent);color:#fff}
.sous-onglets button:hover:not([aria-current]){background:var(--fond)}

.nav-date{display:flex;align-items:center;gap:8px}
.nav-date .jour{font-weight:650;font-size:15px;min-width:190px;text-align:center;
  text-transform:capitalize}

.colonnes{display:grid;gap:16px}
@media(min-width:960px){ .colonnes.trois{grid-template-columns:repeat(3,1fr)} }

.ligne-sejour{display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--trait);cursor:pointer}
.ligne-sejour:last-child{border-bottom:0}
.ligne-sejour:hover{background:var(--fond)}
.ligne-sejour .heure{font-variant-numeric:tabular-nums;font-weight:650;font-size:13px;
  color:var(--encre-2);min-width:44px}
.ligne-sejour .corps{flex:1;min-width:0}
.ligne-sejour .corps strong{display:block}
.ligne-sejour .corps span{font-size:12.5px;color:var(--encre-3)}

.rotation{display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--trait)}
.rotation:last-child{border-bottom:0}
.rotation .fenetre{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}

/* Grille du mois : une ligne par logement, une colonne par jour */
.parc{border-collapse:separate;border-spacing:0;min-width:900px}
.parc th.j{width:26px;padding:6px 0;text-align:center;font-size:10px}
.parc th.j.we{color:var(--encre-2);background:var(--fond)}
.parc td.logement{position:sticky;left:0;background:var(--carte);z-index:1;
  border-right:1px solid var(--trait);min-width:190px}
.parc td.c{padding:0;height:34px;border-bottom:1px solid var(--trait);
  border-right:1px solid #f0f3f2;position:relative}
.parc td.c.we{background:#fafbfa}
/* La barre déborde d'un pixel de chaque côté et passe au-dessus des séparateurs :
   un séjour de quatre nuits doit se lire comme une barre continue, pas comme
   quatre segments accolés. */
.parc .barre-sejour{position:absolute;inset:7px -1px;cursor:pointer}
.parc .barre-sejour.airbnb{background:#c85a4a}
.parc .barre-sejour.booking{background:#2c5aa0}
.parc .barre-sejour.direct{background:var(--accent)}
.parc .barre-sejour.autre{background:#6b7c78}
.parc .barre-sejour.bloquee{background:repeating-linear-gradient(45deg,
  var(--trait-fort),var(--trait-fort) 4px,var(--fond) 4px,var(--fond) 8px)}
.parc .barre-sejour.debut{border-radius:10px 0 0 10px;left:5px}
.parc .barre-sejour.fin{border-radius:0 10px 10px 0;right:5px}

.legende{display:flex;flex-wrap:wrap;gap:16px;padding:12px 18px;font-size:12px;
  color:var(--encre-3);border-top:1px solid var(--trait)}
.legende i{display:inline-block;width:16px;height:10px;border-radius:5px;
  margin-right:6px;vertical-align:-1px;font-style:normal}

/* ─── Missions (M3) ─── */
.semaine{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){ .semaine{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .semaine{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1500px){ .semaine{grid-template-columns:repeat(7,1fr)} }

.jour-col{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  display:flex;flex-direction:column;min-height:130px}
.jour-col.aujourdhui{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-clair)}
.jour-col.passe{opacity:.62}
.jour-col > header{padding:9px 12px;border-bottom:1px solid var(--trait);
  display:flex;align-items:baseline;gap:8px}
.jour-col > header b{font-size:13px;text-transform:capitalize}
.jour-col > header span{font-size:11.5px;color:var(--encre-3);margin-left:auto}
.jour-col .rien{padding:16px 12px;font-size:12.5px;color:var(--encre-3);text-align:center}

.mission{padding:10px 12px;border-bottom:1px solid var(--trait);cursor:pointer;
  border-left:3px solid transparent}
.mission:last-child{border-bottom:0}
.mission:hover{background:var(--fond)}
.mission.a_assigner{border-left-color:var(--attention);background:#fffdf8}
.mission.terminee{border-left-color:var(--ok)}
.mission.probleme{border-left-color:var(--alerte);background:var(--alerte-clair)}
.mission.en_cours{border-left-color:var(--accent)}
.mission .h{display:flex;align-items:baseline;gap:7px;margin-bottom:2px}
.mission .h b{font-size:12.5px;font-variant-numeric:tabular-nums}
.mission .h .lim{font-size:10.5px;color:var(--encre-3);margin-left:auto}
.mission .nom{font-weight:600;font-size:13.5px;line-height:1.25}
.mission .meta{font-size:11.5px;color:var(--encre-3);margin-top:3px;display:flex;
  flex-wrap:wrap;gap:4px 8px;align-items:center}
.mission .retard{color:var(--alerte);font-weight:650}
.mission .trajet{color:var(--encre-3);font-size:11px;font-style:italic}

.zone-texte{width:100%;min-height:230px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.55;white-space:pre}

/* ─── Vignettes de preuve (M4) ─── */
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.vignettes a{display:block;aspect-ratio:1;border-radius:5px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--trait)}
.vignettes img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── Relevés (M5) ─── */
.totaux{display:flex;gap:26px;flex-wrap:wrap}
.totaux div{display:flex;flex-direction:column}
.totaux dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3);
  font-weight:650;margin:0}
.totaux dd{margin:2px 0 0;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.totaux dd.alerte{color:var(--alerte)}
.actions-ligne{display:flex;gap:6px;flex-wrap:wrap}
.presta{border-bottom:1px solid var(--trait);padding:14px 18px}
.presta:last-child{border-bottom:0}
.presta > header{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.presta > header b{font-size:15px}
.presta > header .total{margin-left:auto;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.presta ul{margin:0;padding:0;list-style:none;font-size:13px;color:var(--encre-2)}
.presta li{display:flex;gap:10px;padding:3px 0}
.presta li span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}

.paires{display:flex;flex-direction:column}
.paires > div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--trait);font-size:14px}
.paires > div:last-child{border-bottom:0}
.paires b{font-variant-numeric:tabular-nums}
.paires .gris{color:var(--encre-3)}
.paires .fort{font-weight:650;font-size:15px}
.paires .accent{color:var(--accent)}

/* Un champ désactivé doit se voir : sinon on croit pouvoir le saisir. */
input:disabled,select:disabled,textarea:disabled{
  background:var(--surface);color:var(--encre-3);cursor:not-allowed;border-style:dashed}

/* ─── Ma conciergerie ─── */
.logo-zone{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--trait)}
.logo-apercu{width:150px;height:66px;border:1px dashed var(--trait-fort);border-radius:var(--rayon);
  display:grid;place-items:center;background:var(--fond);flex-shrink:0;overflow:hidden}
.logo-apercu img{max-width:100%;max-height:100%;object-fit:contain}
.logo-apercu span{font-size:12px;color:var(--encre-3)}

/* ─── Tableau de bord ─── */
.tb-couleur-serie{color:#00897b}

.tb-tuiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}
.tuile{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:16px 18px;box-shadow:var(--ombre)}
.tuile dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3);
  font-weight:650;margin:0}
.tuile dd{margin:8px 0 0;font-size:26px;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1}
.tuile .sous{margin-top:7px;font-size:12.5px;color:var(--encre-3);line-height:1.4}
.tuile.mise-en-avant{border-color:#00897b;box-shadow:0 0 0 1px #00897b, var(--ombre)}
.tuile.mise-en-avant dd{color:#00695f}
.tuile .sous b{color:var(--alerte)}

/* Points à traiter */
.alerte-ligne{display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--trait);cursor:pointer;text-align:left;width:100%;
  background:none;border-left:3px solid transparent;border-right:0;border-top:0;border-radius:0}
.alerte-ligne:last-child{border-bottom:0}
.alerte-ligne:hover{background:var(--fond)}
.alerte-ligne.alerte{border-left-color:var(--alerte)}
.alerte-ligne.attention{border-left-color:var(--attention)}
.alerte-ligne .corps{flex:1}
.alerte-ligne .corps b{display:block;font-size:14.5px;font-weight:600}
.alerte-ligne .corps span{font-size:12.5px;color:var(--encre-3)}
.alerte-ligne .fleche{color:var(--encre-3);font-size:18px}

/* Graphiques */
.tb-graphes{display:grid;gap:16px}
@media(min-width:900px){ .tb-graphes{grid-template-columns:1fr 1fr} }
.graphe{padding:18px}
.graphe h3{font-size:13px;text-transform:none;letter-spacing:0;color:var(--encre);margin:0 0 2px}
.graphe .legende-axe{font-size:11.5px;color:var(--encre-3);margin-bottom:14px}
.graphe svg{display:block;width:100%;height:auto;overflow:visible}
.graphe .valeur{font-size:10px;fill:var(--encre-2);font-variant-numeric:tabular-nums}
.graphe .etiquette{font-size:10px;fill:var(--encre-3)}
.graphe .grille{stroke:var(--trait);stroke-width:1}
.graphe .barre{fill:#00897b}
.graphe .barre.creuse{fill:#cfe3e0}
.graphe .barre:hover{fill:#00695f}

/* ─── Livret d'accueil ─── */
.livret-diffusion{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:var(--surface);border-radius:var(--rayon);padding:16px}
.livret-qr{width:120px;height:120px;background:#fff;border:1px solid var(--trait);
  border-radius:var(--rayon);padding:6px;flex-shrink:0}
.livret-qr img{width:100%;height:100%;display:block}

.equip-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}
.case-equip{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:14px;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--encre);margin:0;cursor:pointer}
.case-equip input{width:auto;margin:0}

.ligne-adresse{display:grid;gap:6px;grid-template-columns:1fr 1fr;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--trait)}
@media(min-width:720px){
  .ligne-adresse{grid-template-columns:130px 1fr 1.4fr 1fr 34px}
}
.ligne-adresse:last-child{border-bottom:0}
.ligne-adresse button{padding:6px 0;justify-content:center}

/* ─── Contrats ─── */
.ligne-contrat{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--trait);flex-wrap:wrap}
.ligne-contrat:last-of-type{border-bottom:0}
.article-edit{margin-bottom:16px}
.article-edit input{font-weight:650;margin-bottom:6px}
.article-edit textarea{line-height:1.6;font-size:14px}

/* ─── Variables du modèle de contrat ─── */
.variables{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 18px;
  margin:14px 0;padding:14px 16px;background:var(--surface);border-radius:var(--rayon)}
.variables > div{display:flex;gap:9px;align-items:baseline;font-size:12.5px}
.variables code{background:var(--carte);border:1px solid var(--trait);padding:1px 6px;
  border-radius:3px;font-size:11.5px;white-space:nowrap;color:var(--accent-fonce)}
.variables span{color:var(--encre-3)}

/* ─── Incidents ─── */
.incident{padding:14px 18px;border-bottom:1px solid var(--trait);cursor:pointer;
  border-left:3px solid transparent}
.incident:last-child{border-bottom:0}
.incident:hover{background:var(--fond)}
.incident.urgent{border-left-color:var(--alerte)}
.incident.moyen{border-left-color:var(--attention)}
.incident.mineur{border-left-color:var(--trait-fort)}
.incident.resolu{opacity:.62;border-left-color:var(--ok)}
.incident-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.incident-h .montant{font-weight:700;font-variant-numeric:tabular-nums}
.incident-c{font-size:14.5px;line-height:1.5;margin-bottom:5px}
.incident-p{font-size:12px;color:var(--encre-3)}

/* ─── Identité de la conciergerie sur les écrans clients ─── */
.marque-logo{height:26px;max-width:130px;object-fit:contain;display:block}
.marque-nom{font-weight:700;letter-spacing:-.01em}
.marque{display:flex;align-items:center;gap:10px}
.haut .marque{color:#fff}
.haut .marque-logo{height:30px;max-width:150px;background:#fff;border-radius:4px;padding:3px}