/* =========================================================================
   COQUE D'APPLICATION — les quatre espaces connectés
   agence · propriétaire · locataire · démarcheur

   Un seul squelette, quatre habillages : la couleur de chrome vient de
   --chrome, posée par [data-espace] dans base.css.

   Téléphone  : barre haute + menu en tiroir + barre basse de raccourcis.
   Tablette   : idem, mais deux colonnes de contenu dès 768 px.
   Ordinateur : rail latéral permanent à partir de 1024 px.
   ========================================================================= */

body.appli{ background:var(--creme); }

/* --------------------------------------------------------- BARRE HAUTE */
.barre-haute{
  position:sticky; top:0; z-index:30;
  background:var(--chrome); color:var(--creme);
  padding-top:env(safe-area-inset-top);
  border-bottom:3px solid rgba(0,0,0,.2);
}
.barre-haute-contenu{
  display:flex; align-items:center; gap:var(--e2);
  padding:10px var(--e3); min-height:60px;
}
/* .bouton-menu (structure + icône) vit dans base.css : le site public le
   réutilise sans charger cette feuille. Ici, uniquement l'habillage sombre
   par défaut, adapté à la barre haute des espaces connectés. */
.bouton-menu{ background:rgba(255,255,255,.14); color:var(--creme);
  border-color:rgba(255,255,255,.34); }

.marque-appli{ display:flex; align-items:center; gap:10px; min-width:0;
  min-height:44px; color:var(--creme); text-decoration:none; }
.sigle{
  width:40px; height:40px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--creme);
  font-weight:800; font-size:15px; letter-spacing:.02em;
  background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.3); }
/* Grand sigle neutre, sur fond clair (ex. avatar du gestionnaire dans
   l'espace locataire) : hors du contexte sombre du rail ou de la barre haute. */
.sigle-grand{ width:56px; height:56px; font-size:var(--t-l);
  background:var(--tint-neutre); color:var(--encre); border:2px solid var(--filet-fort); }
.marque-appli .nom{ font-weight:800; font-size:var(--t-m); line-height:1.1;
  letter-spacing:-.02em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.marque-appli .role{ display:block; font-size:11.5px; font-weight:700;
  color:var(--encre-clair); letter-spacing:.02em; }

/* Titre de la page dans la barre haute : ne s'affiche qu'à partir de
   1024 px, où .marque-appli est masquée (voir le palier plus bas). */
.titre-contexte{ display:none; }
.outils-haut{ margin-left:auto; display:flex; align-items:center; gap:var(--e2); }
.bouton-haut{
  display:inline-grid; place-items:center; position:relative;
  min-width:44px; min-height:44px; border-radius:50%; cursor:pointer;
  font:inherit; font-size:var(--t-m); text-decoration:none;
  background:rgba(255,255,255,.14); color:var(--creme);
  border:2px solid rgba(255,255,255,.28); }
.bouton-haut .badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px;
  padding:0 5px; border-radius:100px; background:var(--ocre); color:var(--encre);
  font-size:11px; font-weight:800; display:grid; place-items:center; }

/* ------------------------------------------------------ MENU EN TIROIR */
.voile{
  position:fixed; inset:0; z-index:38; background:rgba(16,26,46,.55);
  border:0; padding:0; margin:0; cursor:pointer; }
.voile[hidden]{ display:none; }

.rail{
  position:fixed; top:0; bottom:0; left:0; z-index:39;
  width:min(300px,86vw); overflow-y:auto;
  background:var(--chrome); color:var(--creme);
  transform:translateX(-100%);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  display:flex; flex-direction:column;
}
.rail[data-ouvert="oui"]{ transform:none; }
@media (prefers-reduced-motion:no-preference){
  .rail{ transition:transform .18s ease-out; }
}
.rail-entete{ display:flex; align-items:center; gap:10px; padding:var(--e4) var(--e3);
  border-bottom:2px solid rgba(255,255,255,.16); }
.rail-fermer{ margin-left:auto; min-width:44px; min-height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:var(--creme);
  border:2px solid rgba(255,255,255,.28); font:inherit; font-size:var(--t-l);
  cursor:pointer; display:grid; place-items:center; }

.rail nav{ padding:var(--e3) var(--e2); flex:1; }
.rail .groupe-titre{ padding:var(--e3) var(--e3) 6px; font-size:var(--t-xs);
  font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--encre-clair); }
.rail a{
  display:flex; align-items:center; gap:var(--e3);
  min-height:48px; padding:10px var(--e3); margin-bottom:2px;
  border-radius:var(--r-s); text-decoration:none;
  color:var(--creme); font-size:var(--t-s); font-weight:700; }
.rail a .pict{ flex:none; width:22px; text-align:center; font-size:15px;
  color:var(--ocre); }
.rail a:hover{ background:rgba(255,255,255,.12); }
.rail a[aria-current="page"]{ background:var(--creme); color:var(--chrome); font-weight:800; }
.rail a[aria-current="page"] .pict{ color:var(--terre); }
.rail a .compte{ margin-left:auto; font-size:var(--t-xs); font-weight:800;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.18); border-radius:100px; padding:2px 8px; }
.rail a[aria-current="page"] .compte{ background:var(--tint-neutre); color:var(--encre-2); }
.rail a .compte-alerte{ background:var(--rouge); color:#FFF; }

/* Même pastille de compte, hors du rail (ex. files d'attente du tableau de
   bord) : fond neutre par défaut, rouge quand elle réclame une action. */
.compte{ font-variant-numeric:tabular-nums; background:var(--tint-neutre);
  color:var(--encre-2); border-radius:100px; padding:3px 11px; font-weight:800; }
.compte-alerte{ background:var(--rouge); color:#FFF; }

.rail-pied{ padding:var(--e3); border-top:2px solid rgba(255,255,255,.16);
  display:grid; gap:var(--e2); }
.rail-pied .identite{ display:flex; align-items:center; gap:10px; }
.rail-pied .identite b{ font-size:var(--t-s); display:block; }
.rail-pied .identite span{ font-size:var(--t-xs); color:var(--encre-clair); }
.rail-pied .btn{ min-height:44px; font-size:var(--t-s); }

/* ------------------------------------------------------------ CONTENU */
.zone{ display:block; }
.contenu{ padding:var(--e4) 0 var(--e6); }
.entete-page{ display:grid; gap:var(--e3); margin-bottom:var(--e4); }
.entete-page .titre-rangee{ display:flex; align-items:flex-start; gap:var(--e2);
  flex-wrap:wrap; }
.entete-page h1{ font-size:var(--t-2xl); }
/* Un seul bouton d'action principal par écran. */
.action-ecran{ display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center; }
.action-ecran .btn-principal{ flex:1 1 100%; }

/* ------------------------------------------- BARRE BASSE DE RACCOURCIS */
/* Réservée au téléphone. Quatre gestes, pas davantage.                   */
.barre-basse{
  position:fixed; left:0; right:0; bottom:0; z-index:29;
  display:flex; background:var(--blanc);
  border-top:2px solid var(--filet-fort);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 14px rgba(16,26,46,.12); }
.barre-basse a{
  flex:1 1 0; min-width:0; min-height:56px;
  display:grid; place-items:center; gap:2px; padding:8px 4px;
  text-decoration:none; color:var(--encre-2);
  font-size:11.5px; font-weight:800; text-align:center; }
.barre-basse a .pict{ font-size:19px; line-height:1; }
.barre-basse a[aria-current="page"]{ color:var(--chrome);
  box-shadow:inset 0 3px 0 var(--chrome); }
body.a-barre-basse .contenu{ padding-bottom:84px; }
body.a-barre-basse .barre-validation{ bottom:72px; }

/* --------------------------------------------------------- PALIERS */
@media (min-width:768px){
  .contenu{ padding:var(--e5) 0 var(--e7); }
  .action-ecran .btn-principal{ flex:0 0 auto; }
  .entete-page{ grid-template-columns:1fr auto; align-items:center; }
}
@media (min-width:1024px){
  /* Le rail devient permanent : plus de tiroir, plus de barre basse. */
  body.appli{ display:grid; grid-template-columns:264px 1fr;
    min-height:100vh; align-items:start; }
  .barre-haute{ grid-column:2; }
  .zone{ grid-column:2; min-width:0; }
  .rail{ grid-column:1; grid-row:1/99; position:sticky; top:0;
    height:100vh; transform:none; width:auto; z-index:20; }
  .rail-fermer,.bouton-menu,.voile,.barre-basse{ display:none!important; }
  body.a-barre-basse .contenu{ padding-bottom:var(--e7); }
  body.a-barre-basse .barre-validation{ bottom:0; }
  .enveloppe{ padding-inline:var(--e5); }
  .barre-haute-contenu .marque-appli{ display:none; }
  .barre-haute-contenu{ min-height:56px; }
  .titre-contexte{ font-size:var(--t-s); font-weight:800; color:var(--encre-clair); }
}
@media (min-width:1280px){
  body.appli{ grid-template-columns:284px 1fr; }
}

/* Deux colonnes de contenu : fiche + colonne latérale d'appoint. */
.deux-colonnes{ display:grid; gap:var(--e4); }
@media (min-width:1024px){
  .deux-colonnes{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; }
  .deux-colonnes > aside{ position:sticky; top:var(--e5); }
}

/* --------------------------------------------------------- ÉCRAN : AIDE */
/* Lexique commun (agence, propriétaire, locataire, démarcheur, public) —
   servi par la coque nue : colonne de lecture confortable, jamais pleine
   largeur au-delà de la tablette. */
.aide-colonne{ max-width:760px; }
.definition-valeur{ margin:4px 0 0; color:var(--encre-2); font-size:var(--t-s); max-width:64ch; }
/* Lien texte avec une cible tactile de 44 px, sans le costume d'un bouton
   (ex. « ← Retour » en pied d'écran). */
.lien-cible{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px; }

/* ------------------------------------------------------ DOCUMENTS IMPRIMABLES */
/* Quittance, et tout autre document A4 servi par la coque nue : colonne
   resserrée pour rester lisible à l'écran, aération avant/après à l'impression. */
.document-enveloppe{ max-width:820px; padding-block:var(--e5) var(--e6); }

/* --------------------------------------------- ÉCRAN : biens disponibles (démarcheur) */
/* Colonne décisive : le total à l'entrée reste identifiable même en carte,
   où les autres colonnes perdent leur étiquette. Sélecteur préfixé de
   « .tableau » pour l'emporter sur .tableau tbody td (background) déjà posé
   plus haut — une simple différence de spécificité, sinon la mise en valeur
   ne s'applique jamais. */
.tableau td[data-intitule="Total à l’entrée"]{
  background:var(--tint-neutre); font-weight:800;
}
.tableau td[data-intitule="Total à l’entrée"] .montant{ color:var(--terre); font-size:var(--t-l); }

/* ------------------------------------------------- ÉCRAN : messagerie interne */
/* Un seul fil continu par espace client (propriétaire, locataire, démarcheur),
   toujours avec l'agence — voir Services\Messagerie. Aucune couleur posée en
   dur : le ton « moi » reprend --indigo (= --bleu-marine, la couleur de
   marque), le ton « agence » reste neutre. La bascule de palette du designer
   qui possède base.css s'applique donc ici sans qu'aucune règle ne bouge. */
.fil-messages{
  list-style:none; margin:0; padding:0; display:grid; gap:var(--e3);
  max-height:min(60vh, 560px); overflow-y:auto; padding-right:2px;
}
.message{
  max-width:88%; padding:10px var(--e3); border-radius:var(--r-s);
  background:var(--creme-2); border:1px solid var(--filet);
}
.message-agence{ justify-self:start; }
.message-moi{ justify-self:end; background:var(--tint-indigo); border-color:var(--indigo); }
.message-entete{
  display:flex; justify-content:space-between; gap:var(--e2);
  font-size:var(--t-xs); font-weight:800; color:var(--encre-2); margin:0 0 4px;
}
.message-moi .message-entete{ color:var(--indigo); }
.message-corps{ margin:0; font-size:var(--t-s); white-space:pre-wrap; overflow-wrap:anywhere; }
@media (min-width:600px){ .message{ max-width:72%; } }

/* ------------------------------------- ÉCRAN : modèles de documents (23/09/2026)
   `.a-completer` marque un blanc à remplir à la main. La classe existe déjà,
   définie dans chaque document imprimable (templates/documents/*.html) ; elle
   est reprise ici pour que l'exemple montré sur l'écran de la liste ait
   exactement la même apparence que sur le document imprimé. Deux apparences
   différentes pour la même chose apprendraient à ne pas la reconnaître. */
.a-completer{
  background:var(--tint-ambre, #fff2c2); border:1px dashed var(--ambre, #b8860b);
  padding:0 .25em; border-radius:var(--r-xs, 3px);
  font-size:var(--t-s); white-space:nowrap;
}

/* ===========================================================================
   ICÔNES DESSINÉES — 25/09/2026
   ---------------------------------------------------------------------------
   Remplacent 33 caractères typographiques (▦ ◔ ▤ ☺ …) qui servaient d'icônes
   dans les 51 entrées du menu. Voir templates/_icones.php pour le pourquoi.

   ⚠️ `display:block` : une <svg> est un élément EN LIGNE par défaut, donc
   posée sur la ligne de base du texte comme une lettre. Elle laisse alors
   sous elle l'espace réservé aux jambages (p, g, j) et paraît décalée vers le
   haut, de deux ou trois pixels — assez pour que toute la liste semble « mal
   alignée » sans qu'on sache dire pourquoi.

   ⚠️ `flex:none` : sans lui, une icône se laisse écraser par un libellé long
   et devient une icône ovale. Déjà présent sur `.pict`, conservé ici.
   =========================================================================== */
.icone{ display:block; }
.rail a .pict{ display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; font-size:inherit; }
.barre-basse a .pict{ display:flex; align-items:center; justify-content:center;
  height:22px; }
/* L'icône suit la couleur du texte de l'entrée active, sans règle de plus :
   c'est tout l'intérêt de `currentColor` (voir templates/_icones.php). */
.rail a[aria-current="page"] .pict{ color:inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUITTANCE DE LOYER — mise en forme du document
   ---------------------------------------------------------------------------
   Refaite le 27/09/2026, PUIS REFAITE À NOUVEAU le même jour après que la
   directrice m'a envoyé chercher le modèle de Rentila :

     « Il faut bien fouiller sur Rentila. Lorsque tu te connectes, tu as la
     possibilité de voir comment ils font leur quittance de loyer. Parce que
     la quittance de loyer dans ton application, c'est pas chic du tout. »

   Je suis allé le chercher — leur modèle vierge est publié en PDF — et elle
   avait raison sur le fond. Ce qui fait qu'un document paraît soigné n'est
   pas ce que j'avais mis, c'est ce que j'avais laissé :

     · BEAUCOUP DE BLANC. Leur page est aux trois quarts vide. La mienne
       serrait tout en haut.
     · DES INTITULÉS DE SECTION GRIS CLAIR ET GRANDS, en graisse fine. Ils
       annoncent sans crier. J'avais mis des titres noirs et gras.
     · AUCUN CADRE, AUCUNE COULEUR, AUCUN TRAIT ÉPAIS. Un simple filet clair
       sous chaque ligne. J'avais un filet noir de 3 px à gauche de la phrase
       et une barre noire de 2 px sous le titre — des traits d'écran.
     · L'INTITULÉ À GAUCHE, LA VALEUR À DROITE, sur toute la largeur. C'est
       ce qui donne l'allure d'un relevé, et ce qui se lit d'un coup d'œil.
     · LE DESTINATAIRE À DROITE ET PLUS BAS, à l'emplacement de la fenêtre
       d'enveloppe.

   ⚠️ C'EST LA DISPOSITION QUI EST REPRISE, PAS LE TEXTE. Les mentions de
   Rentila renvoient au droit français, qui ne s'applique pas en Côte
   d'Ivoire ; et leur rédaction leur appartient. Les phrases d'ici sont les
   nôtres, et le montant en toutes lettres, qu'ils n'ont pas, reste.
   ------------------------------------------------------------------------ */
/* ⭐ LA MARQUE EN TÊTE ET DE LA COULEUR — 27/09/2026, seconde reprise, sur
   consigne de la directrice : « Comment toi tu vois une quittance de loyer
   où il n'y a pas notre logo en haut ? Quittance de loyer au milieu. Et puis
   il faut que le bleu là soit bien mis. Un peu de bleu. Si tu veux mettre un
   peu d'orange. Mais un truc chic, quoi. »

   Elle a raison, et sur le fond. J'étais allé chercher la sobriété du modèle
   VIERGE de Rentila — un formulaire à remplir, fait exprès pour que chacun y
   pose sa propre marque. Appliquée telle quelle à un document ÉMIS par
   l'agence, cette sobriété devient de l'anonymat : la pièce ne se distingue
   plus d'un brouillon.

   Ce que la couleur fait ici, et rien de plus :
     · le BLEU MARINE de la marque sur le titre, les intitulés de section et
       les totaux — c'est-à-dire sur ce qu'on cherche des yeux ;
     · l'ORANGE de la plaquette en UN SEUL trait, sous le logo. Un accent qui
       se répéterait cesserait d'être un accent.
   Le corps du texte reste noir sur blanc, et les filets restent clairs.

   ⚠️ L'ORANGE NE PORTE JAMAIS DE TEXTE ICI. La charte est stricte : le seul
   texte admis sur l'orange est `--orange-texte`. Un filet n'a pas ce
   problème — il ne se lit pas.                                            */
/* ⭐ LES COULEURS DE LA CHARTE — POSÉES ICI LE 29/09, RATTACHÉES LE 30/09.

   Le 29/09/2026, la directrice a envoyé sa plaquette « Supports de
   communication » en disant « nos couleurs ». Elles ne correspondaient PAS
   à celles du site, relevées la veille sur le catalogue de présentation :

        CHARTE      CATALOGUE
        #1F3059     #2A3371     marine
        #F68712     #EB8B2D     orange

   Vingt-sept et vingt-neuf points d'écart sur 441. Invisible à l'écran,
   visible sur une quittance remise en main propre à côté d'une carte de
   visite imprimée d'après la charte. Elles ont donc été posées ICI, sur ce
   seul document, plutôt que d'être appliquées partout sur la foi d'un
   second relevé qui contredisait le premier.

   ⭐ LE 30/09/2026, LA DIRECTRICE A TRANCHÉ : « utilise la couleur de la
   charte ». --bleu-marine et --orange portent désormais ces valeurs pour
   tout le logiciel. Ces deux jetons locaux NE SONT DONC PLUS UNE COPIE : ils
   pointent sur les jetons globaux. Garder deux exemplaires de la même
   couleur, c'est s'assurer qu'un jour l'un des deux sera oublié.

   Ils survivent sous leur nom pour une raison : tout le bloc « quittance »
   plus bas les nomme, et les renommer ne changerait rien d'autre que le
   risque d'en manquer un. La valeur de repli n'est PAS décorative — ce
   document est aussi servi par `mise-en-page/nue.php`, et si un jour
   base.css n'y était plus chargée, la quittance sortirait en noir et blanc
   sans que personne ne le remarque avant de l'avoir imprimée. */
.document-enveloppe{
  --quittance-filet:#D7DEE9;
  --q-marine:var(--bleu-marine, #1F3059);
  --q-orange:var(--orange, #F68712);
}

/* ⭐ LE LOGO EN HAUT À GAUCHE, ET GRAND — 27/09/2026, consigne de la
   directrice : « il faut que le logo soit en haut, à gauche, bien grand ».
   Il était centré et petit, avec l'adresse et l'agrément dessous : un
   en-tête chargé qui écrasait le titre du document. Le haut porte la
   marque, le bas porte l'administratif (voir composants/quittance-pied.php). */
.quittance-entete{ margin-bottom:var(--e4); }
.quittance-logo{
  height:112px; width:auto; display:block;
}

/* Pied de page : coordonnées de l'agence, en gris, tout en bas.
   ⛔ NI LE NOM DE LA DIRECTRICE NI SON NUMÉRO D'AGRÉMENT — voir
   composants/quittance-pied.php, qui explique la décision et sa date. */
.quittance-pied-page{
  margin-top:var(--e7); padding-top:var(--e3);
  border-top:1px solid var(--quittance-filet); text-align:center;
}
.quittance-pied-identite{ margin:0; font-size:var(--t-xs); color:var(--encre-2); }
.quittance-pied-mention{
  margin:var(--e1) 0 0; font-size:var(--t-xs); line-height:1.5; color:var(--encre-2);
  max-width:48em; margin-inline:auto;
}

.quittance-separateur{ color:var(--bleu-cadre); padding:0 .35em; }

/* Le trait d'orange qui ferme l'en-tête, en pleine largeur. */
.quittance-titre{
  text-align:center; margin-bottom:var(--e6);
  padding-top:var(--e5); border-top:3px solid var(--q-orange);
}
.quittance-titre h1{
  margin:0; font-size:1.9rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--q-marine);
}
.quittance-periode-titre{
  margin:var(--e2) 0 0; font-size:var(--t-l); font-weight:600; color:var(--encre);
}
.quittance-avertissement{
  margin:var(--e3) auto 0; max-width:44em;
  font-size:var(--t-xs); line-height:1.5; color:var(--encre-2);
}

/* Repères du document à gauche, destinataire à droite. */
.quittance-expediteur{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--e5); margin-bottom:var(--e6);
}
.quittance-repere{ flex:0 0 auto; }
.quittance-expediteur p, .quittance-destinataire p{ margin:0 0 3px; }

/* Le destinataire : à droite, à l'emplacement de la fenêtre d'enveloppe. */
.quittance-destinataire{
  text-align:right; max-width:24em; min-width:0;
}

/* Petite majuscule bleue devant une valeur — « De », « À », « Délivrée le ». */
.quittance-mention{
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--bleu-marque); font-weight:600;
}

.quittance-formule{
  margin:0 0 var(--e6); max-width:52em; line-height:1.8;
}

/* ⭐ L'ORANGE REVIENT SUR LES INTITULÉS DE SECTION — 29/09/2026, sur la
   consigne « il faut qu'il suive nos codes couleurs […] du bleu, de
   l'orange ». Un seul filet d'orange en haut de page passait inaperçu.

   Il revient par un court tiret devant chaque intitulé, jamais sous le
   texte : le titre reste marine et lisible, l'orange ne sert qu'à marquer
   le départ de la section. C'est le rapport de la charte — marine dominant,
   orange en bord de col — transposé sur du papier.

   ⚠️ L'ORANGE NE PORTE TOUJOURS AUCUN TEXTE. Le seul texte admis sur
   l'orange par la charte est `--orange-texte` ; un tiret n'a pas ce
   problème, il ne se lit pas. */
.quittance-bloc{ margin-bottom:var(--e5); }
.quittance-bloc h2{
  display:flex; align-items:center; gap:.6em;
  margin:0 0 var(--e2); padding-bottom:var(--e2);
  font-size:var(--t-s); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--q-marine);
  border-bottom:1px solid var(--bleu-cadre);
}
.quittance-bloc h2::before{
  content:""; flex:0 0 auto;
  width:26px; height:3px; background:var(--q-orange);
}

.quittance-lignes{ margin:0; }
.quittance-lignes > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--e4);
  padding:var(--e3) 0; border-bottom:1px solid var(--quittance-filet);
}
.quittance-lignes dt{ margin:0; font-weight:400; }
.quittance-lignes dd{ margin:0; text-align:right; white-space:nowrap; }
.quittance-precision{
  display:block; font-size:var(--t-xs); color:var(--encre-2); font-weight:400;
  white-space:normal;
}
/* ⭐ LES SOUS-TOTAUX « DONT LOYER / DONT CHARGES » — demandés le 25/09/2026
   (« ajouter une ligne Charges […] avec un total qui les distingue »), posés
   une première fois, puis PERDUS dans la refonte du 27 : le calcul était
   resté dans le gabarit, l'affichage avait disparu. Remis le 29/09/2026.

   Ils se lisent comme une glose du total, pas comme deux totaux de plus :
   plus petits, en gris-bleu, sans filet fort. Ils n'apparaissent que si le
   terme comporte effectivement des charges — sur un loyer nu, deux lignes
   « dont » qui répètent le total feraient bavard. */
.quittance-lignes .quittance-detail-somme{
  padding:var(--e1) 0; border-bottom:0;
  font-size:var(--t-s); color:var(--encre-2);
}
.quittance-lignes .quittance-detail-somme:first-of-type{ padding-top:var(--e3); }
.quittance-detail-somme dt{ font-weight:600; }
.quittance-detail-somme dd{ font-weight:600; }

/* Le total : c'est le chiffre qu'on vient chercher. Il est marine. */
.quittance-lignes .quittance-somme{
  border-bottom:0; border-top:2px solid var(--q-marine);
  margin-top:var(--e2); padding-top:var(--e3);
}
.quittance-somme dt{ font-weight:700; color:var(--q-marine); }
.quittance-somme dd{ font-weight:700; font-size:var(--t-l); color:var(--q-marine); }

.quittance-pied{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--e5); margin-top:var(--e6);
}
.quittance-lieu{ margin:0; }
.quittance-signature{ text-align:center; min-width:0; }
.quittance-signature p{ margin:0 0 var(--e2); font-size:var(--t-s); }

@media (max-width:620px){
  .quittance-expediteur{ flex-direction:column; }
  .quittance-destinataire{ text-align:left; max-width:none; }
  .quittance-pied{ flex-direction:column; align-items:flex-start; }
  .quittance-signature{ text-align:left; }
}

/* ===========================================================================
   VIDÉOS DE BIEN — fiche d'un bien, application de gestion (29/09/2026).
   Demande de la directrice : déposer une vidéo depuis l'application pour
   qu'elle s'affiche sur le site. Le lecteur est natif : aucune bibliothèque,
   rien à charger chez un tiers.
   Fond noir : une vidéo qui n'a pas encore démarré affiche sa première image
   ou rien du tout — sur un fond clair, « rien du tout » ressemble à un bug.
   =========================================================================== */
.video-bien{
  width:100%; height:auto; display:block; border-radius:var(--r);
  background:#000; max-height:60vh;
}

/* ---------------------------------------------------------------------------
   PIÈCES JOINTES D'UN SIGNALEMENT (29/09/2026)
   ---------------------------------------------------------------------------
   La directrice : « si [le locataire] constate qu'il y a une fuite d'eau, il
   met la photo ou une vidéo […] au moins dans la vidéo, tout pourrait être
   visible. »

   Photos et vidéos partagent la même grille : on regarde un problème, pas une
   galerie. Vignettes larges — sur une fuite, ce qui compte est souvent un
   détail au sol, illisible en timbre-poste.
   ------------------------------------------------------------------------ */
.signalement-pieces{
  display:grid; gap:var(--e3); grid-template-columns:1fr;
}
@media (min-width:560px){ .signalement-pieces{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .signalement-pieces{ grid-template-columns:repeat(3, 1fr); } }
.signalement-piece{ margin:0; min-width:0; }
.signalement-piece img,
.signalement-piece video{
  display:block; width:100%; height:auto; max-height:320px;
  object-fit:cover; border-radius:var(--r); background:var(--creme-2);
}
/* ⚠️ `object-fit:cover` sur la vidéo la RECADRE : acceptable sur une vignette
   de liste, jamais pour la lecture. Le lecteur natif ouvre en plein écran, et
   c'est là qu'on regarde vraiment. */
.signalement-piece figcaption{ margin-top:var(--e2); }

/* ===========================================================================
   MANUELS DE PROCÉDURES INTERNES — 30/09/2026
   ---------------------------------------------------------------------------
   Demande de la directrice : le manuel dans l'interface des gestionnaires et
   du comptable, « et il faut qu'elle le signe ».

   Ce n'est pas un écran de logiciel : c'est un DOCUMENT qu'on lit en entier
   avant de s'engager dessus. D'où une largeur de lecture bornée, un
   interligne plus généreux et des titres qui respirent — ce qui se parcourt
   du regard se lit mal, et un manuel mal lu est un manuel mal appliqué.
   =========================================================================== */

.manuel-corps{
  max-width:74ch; margin:var(--e5) 0 0; line-height:1.65; color:var(--encre);
}
.manuel-corps p{ margin:0 0 var(--e4); }

.manuel-section{ margin:0 0 var(--e6); }
.manuel-section h2{
  margin:var(--e6) 0 var(--e3); font-size:var(--t-l); color:var(--bleu-marine);
  padding-bottom:var(--e2); border-bottom:2px solid var(--filet);
}
.manuel-section:first-child h2{ margin-top:0; }
.manuel-section h3{
  margin:var(--e5) 0 var(--e2); font-size:var(--t-m); color:var(--bleu-marine);
}

.manuel-liste{ margin:0 0 var(--e4); padding-left:1.2rem; }
.manuel-liste li{ margin-bottom:var(--e3); }

.manuel-tableau{
  width:100%; border-collapse:collapse; margin:var(--e3) 0 var(--e4);
  font-size:var(--t-s);
}
.manuel-tableau th,
.manuel-tableau td{
  padding:var(--e3); text-align:left; border-bottom:1px solid var(--filet);
  vertical-align:top;
}
.manuel-tableau th{
  background:var(--creme-2); color:var(--bleu-marine); font-weight:700;
}

/* ⚠️ « À DÉFINIR » DOIT SE VOIR. Ce sont les objectifs que la Direction n'a
   pas encore fixés. Les afficher comme du texte ordinaire donnerait un manuel
   d'apparence complète aux objectifs muets — et il serait signé ainsi. */
.manuel-a-definir{
  display:inline-block; padding:1px 8px; border-radius:100px;
  background:#FDF2F1; color:var(--rouge); border:1px dashed var(--rouge);
  font-size:var(--t-xs); font-weight:700; white-space:nowrap;
}

.manuel-rappel{
  margin:var(--e4) 0; padding:var(--e4);
  background:var(--creme-2); border-left:4px solid var(--bleu-marine);
  border-radius:var(--r-s);
}
.manuel-rappel p{ margin:0; }
/* Variante « ce que l'application ne fait pas encore » : bord orange, pour
   qu'on ne la confonde pas avec une règle du manuel. */
.manuel-rappel-alerte{ border-left-color:var(--orange); background:#FFF7EE; }

/* Les précisions techniques ne font PAS partie du texte signé : elles le
   disent, et se distinguent visuellement du manuel lui-même. */
.manuel-hors-manuel{
  display:block; margin-top:var(--e2);
  font-size:var(--t-xs); font-style:italic; color:var(--encre-2);
}

/* Le bloc de signature — nettement séparé du manuel qu'il conclut. */
.manuel-signature{
  margin:var(--e6) 0 0; padding:var(--e5);
  background:var(--creme-2); border:2px solid var(--bleu-marine);
  border-radius:var(--r); max-width:74ch;
}
.manuel-signature h3{ margin:0 0 var(--e3); color:var(--bleu-marine); }
.manuel-signature .champ{ max-width:32rem; }

/* ---------------------------------------------------------------------------
   GRAPHIQUE DES LOYERS — courbe attendu / encaissé, dessinée en SVG par le
   serveur (composants/graphique-loyers.php).

   Demandé par la directrice le 05/10/2026 : « un graphique des loyers […]
   concernant chaque bien, et puis on voit la courbe ».

   Aucune couleur en dur : tout vient des jetons de base.css, pour que le
   graphique suive la charte si elle bouge — et reste lisible à l'impression
   d'un compte rendu de gestion.
   ------------------------------------------------------------------------ */
.graphique{ margin:0; }

.graphique-dessin{
  display:block; width:100%; height:auto;
  /* Plancher : en dessous, les noms de mois se chevauchent. */
  min-height:200px;
}

.graphique-graduation{
  font-size:11px; font-weight:600; fill:var(--encre-2);
  font-variant-numeric:tabular-nums;
}
.graphique-abscisse{ font-size:11px; fill:var(--encre-2); }
.graphique-annee{ font-size:10px; font-weight:700; fill:var(--encre); }

.graphique-legende{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  margin:10px 0 0; font-size:var(--t-s);
}

/* Les deux jetons de légende REPRENNENT le trait du dessin : plein pour
   l'encaissé, pointillé pour l'attendu. Une légende qui ne ressemble pas à la
   courbe oblige à deviner. */
.jeton-courbe{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; color:var(--encre);
}
.jeton-courbe::before{
  content:''; width:22px; height:0; border-top-width:3px; border-top-style:solid;
}
.jeton-encaisse::before{ border-top-color:var(--vert); }
.jeton-attendu::before{ border-top-color:var(--bleu-marine); border-top-style:dashed; }

.graphique-tableau{ margin-top:14px; }
.graphique-tableau summary{
  cursor:pointer; font-size:var(--t-s); font-weight:700; color:var(--chrome);
  padding:6px 0;
}
.graphique-tableau summary:focus-visible{ outline:2px solid var(--chrome); outline-offset:2px; }
.graphique-tableau .tableau{ margin-top:10px; }

/* Vignette d'une ligne de tableau : elle sert à comparer des FORMES, pas à
   lire des montants — d'où l'absence d'axe. */
.vignette-courbe{
  display:block; width:132px; height:30px;
  overflow:visible; /* le point final touche le bord droit */
}

@media print {
  .graphique-tableau{ display:block; }
  .graphique-tableau > summary{ display:none; }
  .graphique-tableau[open] .tableau, .graphique-tableau .tableau{ display:table; }
}