/* ==========================================================================
   Thème « sobre et pro » — système de design de l'Espace Locataires
   ==========================================================================
   Validé par Atila le 02/10/2026 (planche : design/systeme-de-design.html, revue Impeccable).

   Comment ça marche : `index.html` est GÉNÉRÉ depuis la maquette et n'est jamais modifié à la
   main. Cette feuille est chargée APRÈS le <style> de la maquette et :
     1. redéfinit ses jetons (--ink, --brand, --green…) : tout ce qui les utilise change d'un coup,
        y compris les styles en ligne des fichiers JS depuis que couleurs-vers-jetons.mjs y a
        remplacé les couleurs écrites en dur ;
     2. ajoute les jetons qui manquaient (--line-strong, --sunken, --*-line, tailles de texte) ;
     3. harmonise les composants de la maquette (boutons, onglets, pastilles, tableaux, champs,
        menu, panneaux) sans changer leur place dans la page.
   Revenir à l'ancien look = retirer la balise <link> de cette feuille. Rien d'autre.

   Règles : une couleur = un sens. Bleu pétrole = action principale et sélection. Vert = payé,
   orange = en retard, rouge = impayé ou suppression, violet = en avance (crédit).
   ========================================================================== */

:root{
  /* Neutres */
  --ink:#16202A; --muted:#4F5B69; --faint:#626E7C;
  --line:#DCE1E7; --line2:#E9EDF1; --line-strong:#7F8A96;
  --bg:#F3F5F7; --card:#FFFFFF; --sunken:#F8F9FB; --hover:#F6F8FA;
  /* Menu de gauche */
  --rail:#18222D; --rail-hover:#222E3B; --rail-active:#2A3A4B; --rail-text:#C9D2DC; --rail-label:#8C99A8;
  /* Accent — bleu pétrole */
  --brand:#1D5B86; --brand-d:#164A6E; --brand-soft:#E7F0F6; --brand-line:#B7CFE0;
  /* États d'argent */
  --green:#1B6E45; --green-soft:#E6F2EB; --green-line:#BFDCCB;
  --amber:#975400; --amber-soft:#FBF0DD; --amber-line:#E9CFA0;
  --red:#B42318;   --red-soft:#FCEBE9;   --red-line:#EBC3BE;
  --violet:#5B3E96; --violet-soft:#EFEAF8;
  /* Alias employés par quelques styles en ligne des fichiers JS (avec une couleur de repli). */
  --pri:var(--brand); --ok:var(--green); --soft:var(--sunken); --txt:var(--ink); --bd:var(--line-strong);
  /* Canal WhatsApp retiré le 22/07 : l'ancienne couleur ne doit plus rien signifier. */
  --wa:var(--green); --wa-soft:var(--green-soft);
  /* Texte : 6 tailles */
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:26px;
  /* Formes */
  --r:10px; --r-sm:6px; --r-pill:999px;
  --shadow:0 1px 2px rgba(22,32,42,.06),0 4px 12px rgba(22,32,42,.06);
  --shadow-pop:0 8px 28px rgba(22,32,42,.16);
  --focus:0 0 0 3px rgba(29,91,134,.35);
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Base ---------- */
html{color-scheme:light}
body{font-family:var(--font);font-size:var(--t-md);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:var(--brand-soft);color:var(--brand-d)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
h1{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:var(--t-md)}
.num{font-variant-numeric:tabular-nums}
.view{animation-duration:.15s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Icônes dessinées (icones.js) */
.ic{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* ---------- Menu de gauche ---------- */
aside{background:var(--rail);color:var(--rail-text)}
.logo .mark{background:#FFFFFF;color:var(--rail);border-radius:var(--r-sm);font-weight:700}
.logo span{color:var(--rail-label)}
.navlbl{font-size:var(--t-xs);text-transform:none;letter-spacing:0;color:var(--rail-label);font-weight:600}
.nav{color:var(--rail-text);border-radius:var(--r-sm);font-size:var(--t-md);font-weight:500}
.nav .i{display:inline-flex;align-items:center;justify-content:center;width:18px;opacity:1}
.nav:hover{background:var(--rail-hover);color:#FFFFFF}
.nav.active{background:var(--rail-active);color:#FFFFFF;font-weight:600;box-shadow:none}
.nav .badge{background:transparent;color:var(--rail-text);font-weight:600;font-variant-numeric:tabular-nums}
.nav.active .badge{background:transparent;color:#FFFFFF}
.nav.warn .badge{background:var(--red);color:#FFFFFF}
.me{border-top-color:var(--rail-hover)}
.me .av{background:var(--rail-active)}
.me span{color:var(--rail-label)}

/* ---------- Barre du haut ---------- */
.top{border-bottom-color:var(--line)}
.crumb{font-size:var(--t-sm)}
.search input{border:1px solid var(--line-strong);background:var(--card);border-radius:var(--r-sm);font-size:var(--t-sm);height:36px}
.search input:focus{border-color:var(--brand);box-shadow:var(--focus)}
.search .mag{display:flex;align-items:center;top:0;bottom:0;color:var(--muted)}
.bell{border-radius:var(--r-sm);color:var(--muted)}
.demo{background:var(--sunken);border-bottom-color:var(--line);color:var(--muted)}
.demo b{color:var(--ink)}

/* ---------- Boutons ---------- */
.btn{min-height:36px;padding:0 14px;border-radius:var(--r-sm);border-color:var(--line);background:var(--card);color:var(--ink);font-size:var(--t-sm);font-weight:600;gap:8px;justify-content:center}
.btn:hover{background:var(--sunken);border-color:#C9D0D8}
.btn.p{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.btn.p:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.wa{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.btn.wa:hover{filter:none;background:var(--brand-d)}
.btn.sm{min-height:30px;padding:0 10px;font-size:var(--t-xs)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Pastilles ---------- */
.bdg:has(> .ic)::before{display:none}
.bdg{font-size:var(--t-xs);font-weight:600;padding:0 10px;height:24px;border-radius:var(--r-pill)}
.b-ok{background:var(--green-soft);color:var(--green)}
.b-late{background:var(--red-soft);color:var(--red)}
.b-rel{background:var(--amber-soft);color:var(--amber)}
.b-cred{background:var(--violet-soft);color:var(--violet)}
.b-neu{background:var(--line2);color:var(--muted)}
.b-wa{background:var(--green-soft);color:var(--green)}

/* ---------- Filtres (puces) ---------- */
.chip{border-color:var(--line);font-size:var(--t-sm);color:var(--muted);min-height:32px;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.chip .c{opacity:1;color:inherit;font-weight:600}

/* ---------- Panneaux, tuiles ---------- */
.panel,.info,.toolbar,.fh,.kpi,.bldg{border-color:var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel .ph h3{font-size:var(--t-lg)}
.kpi:hover{transform:none;border-color:var(--line-strong)}
.kpi .lab{font-size:var(--t-sm);font-weight:500}
.kpi .val{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .meta{font-size:var(--t-xs);color:var(--muted)}
.info h4{font-size:var(--t-md)}
.kv{font-size:var(--t-sm)}
.task .tt{font-size:var(--t-md)}.task .td{font-size:var(--t-sm);color:var(--muted)}
.task:hover,.tmpl:hover{background:var(--hover)}

/* ---------- Tableaux ---------- */
thead th{font-size:var(--t-xs);text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);background:var(--sunken);border-bottom-color:var(--line)}
tbody td{font-size:var(--t-sm);border-bottom-color:var(--line2)}
tbody tr:hover{background:var(--hover)}
.tenant .av{background:var(--brand-soft);color:var(--brand-d);border-radius:var(--r-sm)}
.tenant b{font-size:var(--t-md)}.tenant span{font-size:var(--t-xs)}

/* ---------- Onglets : un seul style partout ---------- */
.tabs{border-bottom-color:var(--line)}
.tab{font-size:var(--t-sm);color:var(--muted);padding:12px}
.tab.on{color:var(--brand-d);border-bottom-color:var(--brand)}
.subtabs{background:transparent;padding:0;border-radius:0;gap:4px;border-bottom:1px solid var(--line);width:auto}
.stab{border-radius:0;padding:12px;font-size:var(--t-sm);border-bottom:2px solid transparent;margin-bottom:-1px}
.stab:hover{color:var(--ink)}
.stab.on{background:transparent;color:var(--brand-d);box-shadow:none;border-bottom-color:var(--brand)}

/* ---------- Fiche ---------- */
.fh .av{background:var(--brand-soft);color:var(--brand-d);border-radius:var(--r);font-weight:700}
.fh h2{font-size:var(--t-xl)}
.fh .fmeta{font-size:var(--t-sm)}
.fstat .l{font-size:var(--t-xs);font-weight:500}
.fstat .v{font-size:var(--t-lg);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Panneaux latéraux et champs ---------- */
.sheet{box-shadow:var(--shadow-pop)}
.sheet .sh h3{font-size:var(--t-lg)}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:var(--t-md)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:var(--focus)}
.hint,.hint.wa{background:var(--green-soft);border-color:var(--green-line);color:var(--green);border-radius:var(--r-sm);font-size:var(--t-sm)}
.banner{background:var(--brand-soft);border-color:var(--brand-line);border-radius:var(--r);font-size:var(--t-sm)}
.note{color:var(--muted);font-size:var(--t-xs)}
.toggle.on{background:var(--green)}
.autorow .ai,.task .ti{border-radius:var(--r-sm)}

/* ---------- Petite fenêtre du plan ---------- */
.pop{border-radius:var(--r);box-shadow:var(--shadow-pop)}
.pop .pt{background:var(--rail)}
.pop .pt span{color:var(--rail-text)}

/* ---------- Plan des bâtiments ---------- */
.bldg .bh{background:var(--rail)}
.bldg .bh span{color:var(--rail-text)}
.off{border-radius:var(--r-sm)}
.off:hover{border-color:var(--brand);background:var(--brand-soft);transform:none}
.off .no{color:var(--brand-d)}
.legend{font-size:var(--t-xs)}

/* ---------- Document (aperçu) ---------- */
.docwrap{border-radius:var(--r);box-shadow:var(--shadow-pop)}

/* ==========================================================================
   Étapes 2 à 5 (refonte.js) — ruban, fiche, tableau de bord, clavier, téléphone
   ========================================================================== */

/* ---------- Pas de chiffres de démonstration au démarrage ---------- */
body:not(.donnees-pretes) .content > .view{visibility:hidden}
body:not(.donnees-pretes) .content::before{content:"";display:block;height:180px;margin:26px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--line2) 0 40%,#F7F8FA 50%,var(--line2) 60% 100%);background-size:200% 100%;animation:sq 1.2s linear infinite}
@keyframes sq{to{background-position:-200% 0}}

/* La cloche ne mène à rien : on ne promet pas de notifications qui n'existent pas. */
.bell{display:none}

/* ---------- Ruban T1·T2·T3·T4 : couleur ET forme, lisible sans voir les couleurs ---------- */
.ruban{display:inline-flex;gap:3px;vertical-align:middle}
.ruban .q{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 4px;border-radius:5px;font-size:var(--t-xs);font-weight:700;line-height:1;border:1.5px solid transparent;font-variant-numeric:tabular-nums}
.q-paye{background:var(--green);color:#FFFFFF}
.q-partiel{background:linear-gradient(90deg,var(--green) 0 50%,var(--red) 50% 100%);color:#FFFFFF}
.q-apayer{background:var(--card);border-color:var(--line-strong)!important;color:var(--ink)}
.q-retard{background:var(--amber);color:#FFFFFF}
.q-impaye{background:var(--red);color:#FFFFFF}
.q-nonfact{background:repeating-linear-gradient(135deg,#E3E7EC 0 3px,var(--card) 3px 6px);border:1.5px dashed var(--line-strong)!important;color:var(--muted)}
.q-avenir{background:transparent;border:1.5px dotted var(--line)!important;color:var(--faint);font-weight:600}
.q-hors{background:transparent;border:1px solid var(--line2)!important;color:var(--line-strong);font-weight:500}
.ruban-grand .q{min-width:58px;height:36px;flex-direction:column;gap:2px;font-size:var(--t-sm)}
.ruban-grand .q small{font-size:11px;font-weight:600;opacity:.95}
.ruban-mini .q{min-width:0;width:16px;height:7px;padding:0;border-radius:2px;border-width:1px}
.ruban-liste{display:block;margin-top:5px}
.ruban-liste:empty{display:none}

/* ---------- Fiche : bande « Reste dû » ---------- */
.situation-fiche{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px 32px;margin:18px -22px 0;padding:16px 22px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--sunken)}
.situation-fiche .sf-chargement{grid-column:1/-1;height:40px;border-radius:var(--r-sm);background:var(--line2)}
.sf-montant{font-size:var(--t-sm);color:var(--muted);min-width:180px}
.sf-montant strong{display:block;font-size:var(--t-2xl);line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sf-montant span{display:block;font-size:var(--t-sm);color:var(--ink)}
.sf-bad .sf-montant strong{color:var(--red)}
.sf-warn .sf-montant strong{color:var(--amber)}
.sf-credit .sf-montant strong{color:var(--violet)}
.sf-ok .sf-montant strong{color:var(--green)}
.sf-detail{display:grid;gap:8px;min-width:0}
.sf-faits{display:flex;flex-wrap:wrap;gap:4px 22px;color:var(--muted);font-size:var(--t-sm)}
.sf-faits b{color:var(--ink);font-weight:600}
@media(max-width:900px){.situation-fiche{grid-template-columns:1fr}.situation-fiche .btn{justify-self:start}}

/* Relevé : colonnes comptables masquées tant qu'on ne demande pas la « Vue comptable ». */
.releve-compte .col-compta{display:none}
.vue-comptable .releve-compte .col-compta{display:table-cell}

/* ---------- Tableau de bord ---------- */
.dash-refonte #kpis{display:none}
.resume-parc{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;padding:12px 18px;margin-bottom:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);font-size:var(--t-sm);color:var(--muted)}
.resume-parc b{color:var(--ink);font-variant-numeric:tabular-nums}
.resume-parc a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line-strong)}
.resume-parc a:hover{color:var(--brand-d);border-bottom-color:var(--brand)}
#debiteurs{margin-bottom:18px}
.titre-phrase{margin:0;font-size:var(--t-xl)!important;font-weight:600}
.titre-phrase strong{color:var(--red);font-variant-numeric:tabular-nums}
.table-debiteurs td{font-size:var(--t-sm);white-space:nowrap}
.table-debiteurs .btn{white-space:nowrap}
.table-debiteurs td.nom{font-weight:600;white-space:nowrap}
.table-debiteurs .sous{display:block;font-weight:400;color:var(--faint);font-size:var(--t-xs)}
.table-debiteurs .du{color:var(--red);font-weight:600}
.table-debiteurs .retard-txt{color:var(--amber);font-weight:600}
.dash-refonte .grid2{margin-bottom:18px}

/* Plan : la couleur du bureau dit l'état du trimestre en cours. */
#plan .lot.lot-loue.e-paye{background:var(--green-soft);border-color:var(--green-line)}
#plan .lot.lot-loue.e-apayer,#plan .lot.lot-loue.e-avenir{background:var(--card)}
#plan .lot.lot-loue.e-retard,#plan .lot.lot-loue.e-partiel{background:var(--amber-soft);border-color:var(--amber-line)}
#plan .lot.lot-loue.e-impaye{background:var(--red-soft);border-color:var(--red-line)}
#plan .lot.lot-loue.e-nonfact{background:repeating-linear-gradient(135deg,#EEF1F4 0 5px,var(--card) 5px 10px)}
#plan .lot .lot-argent{display:flex;flex-direction:column;gap:3px;margin-top:3px}
#plan .lot .lot-argent em{font-style:normal;font-weight:600;font-size:var(--t-xs);color:var(--red)}
#plan .lot.e-retard .lot-argent em,#plan .lot.e-partiel .lot-argent em{color:var(--amber)}
#plan .lot .lot-argent em.av{color:var(--violet)}
.legende-ruban-plan{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:var(--t-xs);color:var(--muted);margin:0 0 12px}
.legende-ruban-plan span{display:inline-flex;align-items:center;gap:6px}
.legende-ruban-plan i{width:14px;height:10px;border-radius:2px;border:1px solid var(--line-strong);display:inline-block}
.lg-paye{background:var(--green-soft)}.lg-apayer{background:var(--card)}.lg-retard{background:var(--amber-soft)}
.lg-impaye{background:var(--red-soft)}.lg-nonfact{background:repeating-linear-gradient(135deg,#E3E7EC 0 3px,#FFFFFF 3px 6px)}

/* Onglets de « Loyers & envois » : même soulignement que partout (ils étaient en boutons pleins). */
[data-onglet-loyers]{background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;color:var(--muted)!important;box-shadow:none!important;min-height:40px}
[data-onglet-loyers]:hover{color:var(--ink)!important}
[data-onglet-loyers].p{color:var(--brand-d)!important;border-bottom-color:var(--brand)!important}

/* ---------- Téléphone ---------- */
#barrePouce{display:none}
@media(max-width:820px){
  html body .top{flex-wrap:wrap;height:auto;padding:8px 12px;row-gap:8px}
  html body .top .search{display:block;order:5;flex:1 0 100%;margin:0}
  html body .top .search input{width:100%}
  .btn{min-height:44px}
  .btn.sm{min-height:36px}
  .nav{min-height:44px}
  body:has(#v-fiche.on) #barrePouce{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(22,32,42,.08)}
  body:has(#v-fiche.on) #barrePouce .btn{flex:1}
  body:has(#v-fiche.on) .content{padding-bottom:84px}
  .situation-fiche{margin:14px -14px 0;padding:14px}
  .ruban-grand .q{min-width:48px}
  /* Liste des locataires : la situation passe avant le mode de règlement, qui disparaît au téléphone. */
  #v-list [data-col-compte="mode"]{display:none}
  #v-list table th:nth-child(n+4),#v-list table td:nth-child(n+4){display:none}
  #v-list [data-col-compte="solde"]{width:auto!important;white-space:normal!important}
  #v-list .tenant .av{display:none}
}

/* ---------- Confirmation en bas de l'écran (window.toast) ---------- */
#zoneToast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9998;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
#zoneToast .toast{background:var(--ink);color:#FFFFFF;padding:10px 16px;border-radius:var(--r-sm);font-size:var(--t-sm);box-shadow:var(--shadow-pop);max-width:90vw}
#zoneToast .toast-erreur{background:var(--red)}
@media(max-width:820px){#zoneToast{bottom:90px}}

/* ---------- Écran de connexion (10/10/2026) ---------- */
.connexion{position:fixed;inset:0;z-index:9999;display:grid;grid-template-columns:minmax(300px,42%) 1fr;background:var(--bg);font-family:var(--font)}
.connexion-marque{background:var(--rail);color:var(--rail-text);padding:40px 44px;display:flex;flex-direction:column;gap:24px}
.connexion-logo{display:flex;align-items:center;gap:12px}
.connexion-logo .mark{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);background:#FFFFFF;color:var(--rail);font-weight:700;font-size:var(--t-lg)}
.connexion-logo b{display:block;color:#FFFFFF;font-size:var(--t-lg)}
.connexion-logo small{display:block;color:var(--rail-label);font-size:var(--t-xs)}
.connexion-accroche{margin:auto 0 0;max-width:30ch;color:#FFFFFF;font-size:var(--t-xl);line-height:1.35;font-weight:600}
.connexion-ruban{display:flex;gap:4px}
.connexion-ruban .q{display:inline-grid;place-items:center;min-width:40px;height:26px;border-radius:5px;font-size:var(--t-xs);font-weight:700;border:1.5px solid transparent}
.connexion-ruban .q-apayer{background:transparent;border-color:var(--rail-label);color:var(--rail-text)}
.connexion-pied{margin:0;color:var(--rail-label);font-size:var(--t-xs)}
.connexion-zone{display:grid;place-items:center;padding:32px 20px}
.connexion-carte{width:100%;max-width:380px}
.connexion-carte h1{margin:0 0 4px;font-size:var(--t-2xl)}
.connexion-sous{margin:0 0 24px;color:var(--muted);font-size:var(--t-md)}
.connexion-carte .field input{height:44px}
.connexion-mdp{display:flex;gap:6px}
.connexion-mdp input{flex:1}
.connexion-mdp .btn{min-height:44px;flex:0 0 auto}
.connexion-erreur{min-height:20px;margin:-4px 0 12px;color:var(--red);font-size:var(--t-sm)}
.connexion-erreur:empty{margin:0;min-height:0}
.connexion-bouton{width:100%;min-height:44px;font-size:var(--t-md)}
@media(max-width:820px){
  .connexion{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .connexion-marque{padding:20px;gap:12px}
  .connexion-accroche{margin:0;font-size:var(--t-lg)}
  .connexion-pied{display:none}
  .connexion-zone{place-items:start center;padding-top:28px}
}