/* Gestion LOCAMAXIME - charte du site : Poppins, orange #EE7838, blanc et gris clair */
:root{
--orange:#EE7838; --orange-fonce:#D45F20; --orange-pale:#FDF0E7;
--encre:#1E1E1E; --texte:#5E646A; --gris:#8A9096;
--blanc:#FFFFFF; --fond:#F9F9F9; --filet:#EEEEEE; --filet-2:#DEDEDE;
--ok:#2E8B62; --ok-pale:#E4F3EB;
--alerte:#B8730E; --alerte-pale:#FCF2E0;
--rouge:#C0392B; --rouge-pale:#FBE9E7;
--bleu:#3A6B8F; --bleu-pale:#E9F1F7;
--r:10px; --r-lg:14px; --pilule:20px;
--ombre:0 1px 2px rgba(30,30,30,.04), 0 10px 30px -20px rgba(30,30,30,.35);
--f:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fond);color:var(--texte);font-family:var(--f);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-weight:600;color:var(--encre);margin:0;letter-spacing:0;text-wrap:balance}
a{color:var(--orange-fonce)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
/* ---------- connexion ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--fond)}
.login{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);box-shadow:var(--ombre);padding:34px 30px;width:min(400px,100%)}
.login .marque{font-size:22px;letter-spacing:.02em;color:var(--encre);margin-bottom:4px}
.login .marque .maigre{font-weight:300}
.login .marque .gras{font-weight:700}
.login p.sous{margin:0 0 22px;font-size:13px;color:var(--gris);text-transform:uppercase;letter-spacing:.12em}
.login .champ+.champ{margin-top:14px}
.login button{width:100%;margin-top:20px}
.login .err{margin-top:14px;background:var(--rouge-pale);color:var(--rouge);border-radius:var(--r);padding:9px 12px;font-size:13.5px}
/* ---------- entête ---------- */
.tete{background:var(--blanc);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:30}
.tete-in{max-width:1220px;margin:0 auto;padding:13px 20px 0;display:flex;flex-direction:column;gap:11px}
.rang{display:flex;align-items:center;justify-content:space-between;gap:14px}
.marque{font-size:19px;letter-spacing:.02em;color:var(--encre);white-space:nowrap}
.marque .maigre{font-weight:300}
.marque .gras{font-weight:700}
.marque .quoi{display:block;font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--gris);text-transform:uppercase;margin-top:-2px}
.qui{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gris);white-space:nowrap}
.onglets{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.onglets::-webkit-scrollbar{display:none}
.onglet{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px 11px;color:var(--gris);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.onglet:hover{color:var(--encre)}
.onglet[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--orange)}
.onglet .n{font-size:11px;color:var(--gris);margin-left:5px;font-variant-numeric:tabular-nums}
main{max-width:1220px;margin:0 auto;padding:24px 20px 90px}
.vue[hidden]{display:none}
.tete-vue{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.tete-vue h2{font-size:22px}
.tete-vue p{margin:4px 0 0;font-size:13.5px;color:var(--gris);max-width:64ch}
/* Consigne d'action, juste au-dessus des deux menus : elle doit se voir, c'est
par la qu'on commence. June, 20/09/2026, en gras et orange. */
.choix-periode{margin-top:10px !important;font-weight:700;color:var(--orange) !important;
font-size:14px !important;text-transform:uppercase;letter-spacing:.06em}
/* Le second tableau du pointage : les logements occupes a titre gratuit. */
.sous-titre-pointage{font-size:15px;margin:22px 0 4px;color:var(--encre)}
.outils{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* ---------- boutons ---------- */
.b{appearance:none;border:1px solid var(--filet-2);background:var(--blanc);color:var(--encre);border-radius:var(--r);padding:9px 15px;font-size:13.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:background .12s,border-color .12s}
.b:hover{background:var(--fond)}
.b-p{background:var(--orange);border-color:var(--orange);color:#fff}
.b-p:hover{background:var(--orange-fonce);border-color:var(--orange-fonce)}
.b-f{border-color:transparent;background:none;color:var(--gris);padding:7px 9px}
.b-f:hover{background:var(--fond);color:var(--encre)}
.b-s{padding:6px 11px;font-size:12.5px;border-radius:8px}
.b-d{color:var(--rouge);border-color:transparent;background:none}
.b-d:hover{background:var(--rouge-pale)}
.b[disabled]{opacity:.45;cursor:not-allowed}
select.sel{background:var(--blanc);border:1px solid var(--filet-2);border-radius:var(--r);padding:9px 12px;font-size:13.5px;font-weight:500;cursor:pointer}
/* ---------- champs ---------- */
.champ{display:flex;flex-direction:column;gap:5px}
.champ>span{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gris)}
.champ input,.champ select,.champ textarea{background:var(--blanc);border:1px solid var(--filet-2);border-radius:8px;padding:9px 11px;font-size:14px;width:100%}
/* L'exemple de saisie doit se lire comme un exemple, pas comme une valeur
deja entree : franchement plus clair que le texte tape. June, 19/09/2026,
« mets un exemple grise ». */
.champ input::placeholder{color:#B4B9BE;opacity:1}
.champ textarea{resize:vertical;min-height:70px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.aide{font-size:11.5px;color:var(--gris)}
/* ---------- pastilles ---------- */
.p{display:inline-flex;align-items:center;gap:5px;border-radius:var(--pilule);padding:3px 11px;font-size:11.5px;font-weight:500;white-space:nowrap;background:var(--fond);color:var(--texte)}
.p-ok{background:var(--ok-pale);color:var(--ok)}
.p-al{background:var(--alerte-pale);color:var(--alerte)}
.p-ro{background:var(--rouge-pale);color:var(--rouge)}
.p-bl{background:var(--bleu-pale);color:var(--bleu)}
.p-or{background:var(--orange-pale);color:var(--orange-fonce)}
/* ---------- tuiles ---------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px;margin-bottom:24px}
.tuile{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);padding:15px 16px 16px;display:flex;flex-direction:column;gap:3px}
.tuile .l{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.11em;color:var(--gris)}
.tuile .v{font-size:27px;font-weight:600;color:var(--encre);font-variant-numeric:tabular-nums;line-height:1.15}
.tuile .n{font-size:12px;color:var(--gris)}
.tuile-or{border-left:3px solid var(--orange)}
/* ---------- panneaux ---------- */
.panneaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.panneau{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);overflow:hidden}
.panneau>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 17px;border-bottom:1px solid var(--filet)}
.panneau>header h3{font-size:14px}
.corps{padding:5px 17px 15px}
.liste{display:flex;flex-direction:column}
.ligne{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--filet)}
.ligne:last-child{border-bottom:0}
.ligne .plein{flex:1;min-width:0}
.ligne .t{font-weight:500;font-size:14px;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .s{font-size:12.5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chiffre{font-variant-numeric:tabular-nums;font-weight:500;color:var(--encre);white-space:nowrap}
/* ---------- fiches ---------- */
.fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.fiche{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);padding:16px 17px 14px;display:flex;flex-direction:column;gap:9px}
/* Photos du bien, en tete de fiche : une grande, puis les autres en bandeau
de miniatures. Marges negatives pour que la grande touche les bords de la
fiche, comme sur l'annonce en ligne. */
.photos{margin:-16px -17px 2px}
.photos .hero{display:block;width:100%;height:170px;object-fit:cover;
border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--fond)}
.photos .vigs{display:flex;gap:4px;overflow-x:auto;padding:4px 17px 0;
scrollbar-width:thin}
.photos .vig{flex:0 0 auto;padding:0;border:2px solid transparent;background:none;
border-radius:6px;cursor:pointer;line-height:0;overflow:hidden}
.photos .vig img{width:48px;height:36px;object-fit:cover;display:block;border-radius:4px}
.photos .vig.on{border-color:var(--orange)}
.fiche-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fiche h3{font-size:15.5px;line-height:1.3}
.fiche .adr{font-size:12.5px;color:var(--gris);margin:2px 0 0}
.carac{display:flex;flex-wrap:wrap;gap:5px}
.carac span{font-size:11.5px;color:var(--texte);background:var(--fond);border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums}
/* Bloc de tete de l'onglet Biens : le total du parc et sa courbe. */
.bloc-valeur{padding:16px 18px 14px;margin-bottom:14px}
.bloc-valeur h3{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gris)}
.bloc-valeur .hero{font-size:30px;font-weight:600;color:var(--encre);margin:2px 0 0;
font-variant-numeric:tabular-nums;line-height:1.15;display:flex;align-items:baseline;
gap:12px;flex-wrap:wrap}
/* Le montant en toutes lettres, a cote du chiffre et en gris : il accompagne,
il ne concurrence pas. June, 20/09/2026. */
.bloc-valeur .hero .mots{font-size:14px;font-weight:400;color:var(--gris);
font-variant-numeric:normal;line-height:1.4}
.bloc-valeur>.s{font-size:12.5px;color:var(--gris);margin:2px 0 0}
/* Courbe : une serie, donc pas de legende de couleurs - le titre du bloc la
nomme. Axes et grille recessifs, la ligne seule porte la couleur. */
.courbe{margin-top:14px}
.courbe svg{width:100%;height:auto;display:block;overflow:visible}
.courbe .grille line{stroke:var(--filet);stroke-width:1}
.courbe text.ax{font-size:10.5px;fill:var(--gris);font-family:var(--f)}
.courbe .trait{fill:none;stroke:var(--orange);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.courbe .aire{fill:var(--orange);opacity:.07;stroke:none}
.courbe .pt circle.plein{fill:var(--orange);stroke:var(--blanc);stroke-width:2}
.courbe .pt circle.creux{fill:var(--blanc);stroke:var(--orange);stroke-width:2}
.courbe .pt{cursor:default}
.courbe .pt:hover circle.plein,.courbe .pt:focus circle.plein{r:6}
.courbe .pt:hover circle.creux,.courbe .pt:focus circle.creux{r:6}
.courbe .legende{font-size:11.5px;color:var(--gris);margin:8px 0 0;line-height:1.5}
.courbe .legende b{color:var(--encre)}
/* Panneau des prix du marche, sous la courbe. */
.marche{padding:16px 18px}
.marche h3{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gris)}
.mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.mcol{background:var(--fond);border-radius:var(--r);padding:12px 14px;
border-left:3px solid var(--orange)}
.mcol b{display:block;font-size:21px;color:var(--encre);font-variant-numeric:tabular-nums;line-height:1.2}
.mcol .s{display:block;font-size:12px;color:var(--gris);margin-top:2px}
/* Cases a cocher des caracteristiques du bien. */
.sous-form{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
color:var(--gris);margin:18px 0 -2px}
.coches-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px 16px;margin-top:6px}
.coches-grille .coche{align-items:center;color:var(--texte)}
.coches-grille .coche input{width:16px;height:16px;flex:none;accent-color:var(--orange);margin:0}
/* Valeur estimee du bien. Discrete : c'est une indication, pas le loyer, qui
reste le chiffre principal de la fiche. */
.valeur{margin-top:auto;padding:8px 10px;background:var(--fond);border-radius:8px;
border-left:3px solid var(--filet-2)}
.valeur + .fiche-bas{margin-top:0}
.valeur b{display:block;font-size:15px;color:var(--encre);font-variant-numeric:tabular-nums}
.valeur span{display:block;font-size:11.5px;color:var(--gris);margin-top:1px}
.valeur .src{font-size:11px;font-style:italic;opacity:.85}
.valeur span.echu{color:var(--alerte);font-weight:500}
.valeur.vieille{border-left-color:var(--alerte);background:var(--alerte-pale)}
.fiche-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--filet)}
.prix{font-weight:600;font-size:17px;color:var(--encre);font-variant-numeric:tabular-nums}
.prix small{display:block;font-weight:400;font-size:11.5px;color:var(--gris);margin-top:1px}
/* ---------- tableaux ---------- */
.tab{overflow-x:auto;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg)}
table.t{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px}
table.t th{text-align:left;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gris);padding:12px 15px;border-bottom:1px solid var(--filet);white-space:nowrap;background:var(--fond)}
table.t td{padding:11px 15px;border-bottom:1px solid var(--filet);vertical-align:middle;color:var(--texte)}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr.paye{background:linear-gradient(90deg,var(--ok-pale),transparent 42%)}
table.t td.r,table.t th.r{text-align:right}
table.t td.eu{font-variant-numeric:tabular-nums;font-weight:500;color:var(--encre);white-space:nowrap}
table.t td .qui2{font-weight:500;color:var(--encre)}
table.t td .s{font-size:12px;color:var(--gris)}
table.t input[type=checkbox]{width:18px;height:18px;accent-color:var(--orange);cursor:pointer}
table.t input.sm{width:82px;padding:5px 7px;border:1px solid var(--filet-2);border-radius:7px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
tfoot td{padding:12px 15px;font-weight:600;color:var(--encre);border-top:1px solid var(--filet-2);font-variant-numeric:tabular-nums}
/* ---------- vide ---------- */
.vide{background:var(--blanc);border:1px dashed var(--filet-2);border-radius:var(--r-lg);padding:30px 24px;text-align:center;color:var(--gris)}
.vide h4{font-size:15px;color:var(--encre);margin-bottom:6px}
.vide p{margin:0 auto 16px;max-width:48ch;font-size:13.5px}
/* ---------- panneau latéral ---------- */
dialog{border:0;padding:0;background:transparent;max-width:100%}
dialog::backdrop{background:rgba(30,30,30,.5)}
.feuille{background:var(--blanc);border-radius:16px;width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;box-shadow:var(--ombre)}
.feuille>header{position:sticky;top:0;background:var(--blanc);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 19px;border-bottom:1px solid var(--filet);z-index:2}
.feuille>header h3{font-size:16px}
.feuille-corps{padding:17px 19px;display:flex;flex-direction:column;gap:13px}
.feuille-pied{position:sticky;bottom:0;background:var(--blanc);display:flex;justify-content:space-between;gap:10px;padding:15px 19px;border-top:1px solid var(--filet)}
.coches{display:flex;flex-direction:column;gap:8px}
.coche{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;cursor:pointer}
.coche input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--orange)}
.note-loi{font-size:11.5px;color:var(--gris);background:var(--fond);border-radius:8px;padding:10px 12px;line-height:1.5}
/* ---------- message ---------- */
#mot{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(160%);background:var(--encre);color:#fff;padding:11px 18px;border-radius:var(--pilule);font-size:13.5px;z-index:99;transition:transform .22s ease;max-width:92vw;text-align:center}
#mot.on{transform:translateX(-50%) translateY(0)}
@media (max-width:640px){
.g2,.g3{grid-template-columns:1fr}
main{padding:18px 14px 80px}
.tete-in{padding:12px 14px 0}
.onglets{margin:0 -14px;padding:0 14px}
.tuile .v{font-size:23px}
}
/* --------------------------------------------------------------------
Exporter, imprimer, telecharger : les trois boutons de chaque page.
-------------------------------------------------------------------- */
.b.b-sec {
background: #fff;
border: 1px solid var(--filet, #e5e5e5);
color: var(--encre, #1e1e1e);
font-weight: 500;
}
.b.b-sec:hover {
border-color: var(--orange, #EE7838);
color: var(--orange, #EE7838);
}
.tete-vue .outils { flex-wrap: wrap; gap: 8px; }
/* June, 20/09/2026 : « rends les fiches biens imprimables et telechargeables
en A4 ». Le format de page est donc declare une bonne fois, et la grille
d'ecran laisse place a une colonne : un bien par bloc, deux blocs par page,
jamais coupe en deux. Le fichier telecharge emporte cette feuille de style,
il s'imprime donc pareil. */
@page { size: A4; margin: 12mm; }
@media print {
/* On imprime la page ouverte, rien d'autre. */
.onglets, .tete-app, .outils, .b, dialog, #mot, .no-print { display: none !important; }
.vue[hidden] { display: none !important; }
.vue { display: block !important; }
body { background: #fff; font-size: 11pt; }
main { padding: 0; max-width: none; }
.tete { position: static; border: 0; }
.tab, table.t { page-break-inside: auto; }
table.t tr { page-break-inside: avoid; }
/* ----- fiches des biens, une par page A4 -----
June, 20/09/2026 : « les biens doivent etre des fiches imprimables et
telechargeables au format A4 avec photos ». Une fiche par page, donc, et
les miniatures restent : sur une fiche de bien, les photos sont la moitie
de l'information. */
.fiches { display: block !important; }
.fiche {
page-break-inside: avoid; break-inside: avoid;
page-break-after: always; break-after: page;
border: 1px solid #CFCFCF; border-radius: 0;
margin: 0; padding: 0 0 4mm;
display: block !important;
}
.fiche:last-child { page-break-after: auto; break-after: auto; }
.fiche h3 { font-size: 12.5pt; }
.fiche .adr, .fiche p { font-size: 9.5pt; }
.fiche .carac span { font-size: 8.5pt; }
.valeur b { font-size: 12pt; }
.valeur span { font-size: 8.5pt; }
.prix { font-size: 13pt; }
.fiche-haut, .carac, .fiche > p, .valeur, .fiche-bas { margin-left: 6mm; margin-right: 6mm; }
.fiche-haut { padding-top: 4mm; }
/* Une photo par bien suffit a le reconnaitre : les miniatures ne servent
qu'a l'ecran, ou l'on peut cliquer. */
.photos { margin: 0 0 3mm; }
.photos .hero { height: 85mm; border-radius: 0; }
/* Les miniatures s'impriment : cinq suffisent a montrer le logement. */
.photos .vigs { display: flex !important; gap: 2mm; padding: 2mm 6mm 0; overflow: visible; }
.photos .vig { border: 0 !important; padding: 0; }
.photos .vig:nth-child(n+6) { display: none; }
.photos .vig img { width: 32mm; height: 22mm; }
.valeur { background: #F4F4F4 !important; border-left: 3px solid #EE7838 !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fiche-bas { margin-top: 4mm; }
/* Le bloc de tete tient sur la premiere page, courbe comprise. */
.bloc-valeur { page-break-after: always; break-after: page; }
.bloc-valeur .hero { font-size: 22pt; }
.courbe svg { max-height: 60mm; }
#panMarche { display: none !important; }
}
/* Marche a suivre (19/09/2026). June la connait par coeur, son pere et sa
mere non : elle est donc dans l'application, a l'endroit ou l'on s'en sert.
Repliee par defaut, elle ne gene pas celle qui la connait. */
.marche { margin-top: 26px; border: 1px solid var(--filet, #E2E0DC); border-radius: 12px; background: #fff; }
.marche > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 14px;
list-style: none; display: flex; align-items: center; gap: 10px; }
.marche > summary::-webkit-details-marker { display: none; }
.marche > summary::before { content: "›"; display: inline-block; font-size: 20px; line-height: 1;
transform: rotate(90deg); transition: transform .18s ease; color: var(--orange, #EE7838); }
.marche[open] > summary::before { transform: rotate(270deg); }
.marche-corps { padding: 0 18px 8px; }
.marche-corps ol { margin: 0; padding-left: 20px; }
.marche-corps li { font-size: 13.5px; line-height: 1.65; margin-bottom: 10px; }
/* La regle rappelee sur chaque carte de document. */
.regle-doc { font-size: 12.5px; line-height: 1.5; margin: 0 0 14px;
padding-left: 10px; border-left: 2px solid var(--orange, #EE7838); color: #555; }
/* Mois en retard. June, 19/09/2026 : un locataire a deux mois de retard, il
en paie un quinze jours plus tard. Le mois est la cle du logiciel, mais
encore faut-il voir les mois en souffrance sans les chercher un par un. */
.retards { margin-top: 22px; border: 1px solid var(--orange, #EE7838); border-radius: 12px;
background: #fff; overflow: hidden; }
.retards header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 13px 18px; border-bottom: 1px solid var(--filet, #E2E0DC); }
.retards header h3 { margin: 0; font-size: 14px; }
.retards-note { margin: 12px 18px 4px; font-size: 12.5px; line-height: 1.55; color: #555;
padding-left: 10px; border-left: 2px solid var(--orange, #EE7838); }
.retards ul { margin: 0; padding: 4px 18px 16px; list-style: none; }
.retards li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 11px 0; border-top: 1px solid var(--filet, #E2E0DC); font-size: 13.5px; }
.retards li .qui2 { font-weight: 700; min-width: 170px; }
.retards li .s { color: #777; flex: 1; min-width: 150px; }
.retards li b { min-width: 120px; }
.retards li .eu { font-weight: 700; min-width: 90px; text-align: right; }
/* Case « retard » du pointage. June, 20/09/2026 : un mois de retard se note a
la main, la compta d'avant l'application ne se devine pas. Discret : ce
n'est pas le statut du mois, c'est une note a cote. */
.retard-case { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.retard-case label {
display: flex; align-items: center; gap: 4px;
font-size: 11.5px; color: #8A9096; cursor: pointer;
}
.retard-case input[type=checkbox] { margin: 0; }
.retard-case .sel-retard {
font: inherit; font-size: 11.5px; padding: 2px 4px; border: 1px solid #DDD;
border-radius: 6px; background: #FFF; color: #3C4248;
}
.retard-case .sel-retard:disabled { opacity: .35; }
/* =====================================================================
ÉTATS DES LIEUX. June, 02/10/2026.
La fiche est longue : les sections se replient visuellement dès qu'elles
sont validées, pour qu'on voie d'un coup d'oeil ce qui reste à relever.
La colonne d'entrée est bleue, celle de sortie orange, comme sur sa
feuille A4.
===================================================================== */
.edl-barre{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;
align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--filet,#E3E3E3);
border-radius:12px;padding:10px 14px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.edl-barre .outils{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edl-sauve{margin-left:12px;font-size:13px;font-weight:600}
.edl-sauve-oui{color:#2E7D32}
.edl-sauve-non{color:#C2551B}
.edl-compte{font-size:13px;color:#6B6B6B}
.edl-tete{background:#F6F8FB;border:1px solid #D9E1EC;border-radius:12px;padding:14px;margin-bottom:18px}
.edl-tete-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.edl-tete-g label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#13233F}
.edl-sec{border:1px solid #D9E1EC;border-radius:12px;margin-bottom:18px;overflow:hidden;background:#fff}
.edl-sec.ok{border-color:#F3C9A8;background:#FFFBF7}
.edl-sec-t{display:flex;justify-content:space-between;align-items:center;gap:14px;
background:#13233F;color:#fff;padding:10px 14px}
.edl-sec.ok .edl-sec-t{background:#EE7838}
.edl-sec-t h3{margin:0;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.edl-valide{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;white-space:nowrap}
.edl-sec-c{padding:14px}
.edl-note{margin:0;padding:9px 14px;background:#F6F8FB;color:#44506A;font-size:12.5px;border-bottom:1px solid #E6ECF4}
.edl-sec h4{margin:16px 0 8px;font-size:14px;color:#13233F}
.edl-sec h4:first-child{margin-top:0}
.edl-bloc{margin-top:14px;padding-top:12px;border-top:1px dashed #D9E1EC}
.edl-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.edl-l{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#44506A;margin-top:10px}
.edl-large{grid-column:1 / -1}
.edl-in{font:inherit;font-size:14px;font-weight:400;padding:7px 9px;border:1px solid #CFD8E5;
border-radius:8px;background:#fff;color:#1A1A1A;width:100%}
.edl-in:focus{outline:2px solid var(--main-color,#EE7838);outline-offset:1px;border-color:transparent}
.edl-ta{font:inherit;font-size:14px;font-weight:400;padding:8px 9px;border:1px solid #CFD8E5;
border-radius:8px;width:100%;resize:vertical}
.edl-tab{overflow-x:auto;margin:6px 0 10px}
.edl-t{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
.edl-t th,.edl-t td{border:1px solid #E3E9F2;padding:5px 7px;text-align:left;vertical-align:middle}
.edl-t thead th{background:#1A1A1A;color:#fff;font-size:12px;font-weight:600;position:sticky;top:0}
.edl-t thead th.edl-s{background:#EE7838}
.edl-t .edl-lib{background:#F6F8FB;font-weight:600;color:#13233F;min-width:150px}
.edl-t .edl-lib .edl-in{font-weight:600}
.edl-t .edl-nb{width:84px}
.edl-t .edl-c{width:70px;text-align:center}
.edl-t tbody tr:nth-child(even){background:#FAFCFF}
.edl-etats{display:inline-flex;gap:4px;flex-wrap:wrap}
.edl-opt{font:inherit;font-size:12px;line-height:1.4;cursor:pointer;
border:1px solid #CFD8E5;border-radius:999px;padding:3px 11px;color:#6B7A90;background:#fff;
transition:background .12s ease,color .12s ease,border-color .12s ease}
.edl-opt.on{background:#EE7838;border-color:#EE7838;color:#fff;font-weight:700}
.edl-s .edl-opt.on{background:#EE7838;border-color:#EE7838}
.edl-opt:hover{border-color:#EE7838}
.edl-opt.on:hover{border-color:#1A1A1A}
.edl-opt:focus-visible{outline:2px solid var(--main-color,#EE7838);outline-offset:2px}
.edl-coche{display:inline-flex;align-items:center;cursor:pointer}
.edl-coche input{position:absolute;opacity:0;width:0;height:0}
.edl-coche span{width:20px;height:20px;border:1.5px solid #CFD8E5;border-radius:5px;display:inline-block;background:#fff}
.edl-coche input:checked + span{background:#EE7838;border-color:#EE7838;
background-image:url("data:image/svg+xml;utf8,");
background-size:16px 16px;background-position:center;background-repeat:no-repeat}
.edl-valide .edl-coche span,.edl-valide input + span{border-color:#fff}
.edl-x{border:0;background:transparent;color:#B0442A;font-size:20px;line-height:1;cursor:pointer;padding:0 6px}
.edl-x:hover{color:#7E2C18}
.edl-piece{border:1px solid #E3E9F2;border-radius:10px;padding:12px;margin-bottom:14px;background:#FCFDFF}
.edl-piece-t{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.edl-piece-t .edl-in{font-weight:700;color:#13233F;font-size:15px}
.edl-ajouts{display:flex;gap:8px;flex-wrap:wrap}
.edl-sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.edl-sig{border:1px solid #D9E1EC;border-radius:10px;padding:10px;background:#fff}
.edl-sig-e{border-left:4px solid #1A1A1A}
.edl-sig-s{border-left:4px solid #EE7838}
.edl-sig-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;font-size:13px}
.edl-sig-q{font-size:12px;color:#6B7A90}
.edl-pad{width:100%;height:120px;border:1px dashed #CFD8E5;border-radius:8px;background:#fff;
touch-action:none;cursor:crosshair;display:block}
.edl-sig-b{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.edl-sig-m{font-size:12.5px;color:#44506A}
.edl-sig-d{width:auto;flex:0 0 150px}
.edl-lexique{border:1px solid #D9E1EC;border-radius:10px;padding:10px 14px;font-size:13px;color:#44506A;background:#F6F8FB}
@media (max-width:760px){
.edl-barre{position:static}
.edl-sec-t h3{font-size:14px}
.edl-t{min-width:560px}
}
/* La case et le bouton d'état sont masqués au profit de leur pastille : on
leur rend un contour visible au clavier, sinon on ne sait plus où on est. */
.edl-coche input:focus-visible + span{outline:2px solid var(--main-color,#EE7838);outline-offset:2px}
.edl-rappel{margin:12px 0 0;font-size:12.5px;color:#44506A}
.edl-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.edl-danger{color:#B0442A;border-color:#E8C3B7}
.edl-danger:hover{background:#FDF0EA;border-color:#B0442A;color:#7E2C18}
/* --------------------------------------------------------------------
BILAN : relevés de syndic, régularisation, révision des loyers.
June, 15/10/2026.
-------------------------------------------------------------------- */
.bil-form{border:1px solid #D9E1EC;border-radius:12px;padding:16px;margin-bottom:16px;background:#F6F8FB}
.bil-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.bil-coche{display:flex;align-items:center;gap:10px;margin-top:14px;cursor:pointer}
.bil-coche input{position:absolute;opacity:0;width:0;height:0}
.bil-coche span{width:20px;height:20px;border:1.5px solid #CFD8E5;border-radius:5px;background:#fff;flex:0 0 auto}
.bil-coche input:checked + span{background:#EE7838;border-color:#EE7838;
background-image:url("data:image/svg+xml;utf8,");
background-size:16px 16px;background-position:center;background-repeat:no-repeat}
.bil-coche em{font-style:normal;font-size:13px;color:#44506A}
.bil-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.bil-vide{border:1px dashed #D9E1EC;border-radius:12px;padding:18px;color:#6B7A90;font-size:14px;margin:0}
.bil-danger{color:#B0442A;border-color:#E8C3B7}
.bil-danger:hover{background:#FDF0EA;border-color:#B0442A;color:#7E2C18}
.bil-indice{background:#F6F8FB;border:1px solid #D9E1EC;border-radius:12px;padding:14px 16px;
font-size:13.5px;color:#44506A;margin:0 0 14px}
.bil-indice strong{color:#13233F}
/* Le logo est devenu un bouton : il garde l'allure du titre, sans rien du
bouton. June, 15/10/2026 : il ferme la session et ramene au site. */
button.marque{font:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
text-align:left;color:var(--encre);font-size:19px;letter-spacing:.02em;white-space:nowrap}
button.marque:hover .gras,button.marque:hover .maigre{color:var(--main-color,#EE7838)}
button.marque:focus-visible{outline:2px solid var(--main-color,#EE7838);outline-offset:4px;border-radius:4px}
/* --------------------------------------------------------------------
TÉLÉPHONE : les tableaux se replient en fiches.
June, 17/10/2026 : « ça rentre pas en largeur ». Un tableau de six
colonnes ne tient pas sur un écran de 390 px, et un défilement
horizontal à l'intérieur d'un tableau ne se devine pas. Sous 700 px,
chaque ligne devient donc un bloc, l'intitulé de colonne passe devant
sa valeur, et plus rien ne sort de l'écran. Au-dessus, le tableau
reste un tableau.
-------------------------------------------------------------------- */
@media (max-width:700px){
html,body{overflow-x:hidden}
/* Les dix onglets passent a la ligne au lieu de defiler : plus rien n'est
coupe au bord gauche, on voit d'un coup ou on peut aller. */
.onglets{flex-wrap:wrap;overflow-x:visible;gap:2px 2px;row-gap:0}
.onglet{padding:8px 9px 10px;font-size:13px}
.onglet .n{margin-left:3px}
.tab{overflow-x:visible;border:0;background:none;border-radius:0}
.tab table.t,.tab table.t tbody,.tab table.t tr,.tab table.t td,.tab table.t tbody th{display:block;width:auto}
/* table.t porte un min-width de 680 px pour l'ecran d'ordinateur : il doit
sauter ici, sinon le bloc garde sa largeur et sort de l'ecran. */
.tab table.t{min-width:0}
.tab table.t td.eu{white-space:normal}
.tab table.t thead{display:none}
.tab table.t tr{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-lg);
margin-bottom:10px;padding:10px 13px}
.tab table.t td,.tab table.t tbody th{border:0;padding:5px 0;text-align:left;
display:flex;gap:12px;align-items:baseline;justify-content:space-between}
.tab table.t td::before,.tab table.t tbody th::before{content:attr(data-l);flex:0 0 40%;
color:var(--gris);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.6}
.tab table.t td:last-child{justify-content:flex-end;flex-wrap:wrap;gap:6px;
border-top:1px solid var(--filet);margin-top:7px;padding-top:10px}
.tab table.t td:last-child::before{display:none}
.tab table.t td:empty{display:none}
/* États des lieux : même repli, en gardant l'intitulé de ligne en tête de fiche. */
.edl-tab{overflow-x:visible}
.edl-t{min-width:0}
.edl-t,.edl-t tbody,.edl-t tr,.edl-t td,.edl-t tbody th{display:block;width:auto}
.edl-t thead{display:none}
.edl-t tbody tr{border:1px solid #E3E9F2;border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
.edl-t tbody tr:nth-child(even){background:#FAFCFF}
.edl-t th,.edl-t td{border:0;padding:4px 0}
.edl-t .edl-lib{background:none;min-width:0;font-size:14px;padding-bottom:8px;
border-bottom:1px solid #EDF1F7;margin-bottom:6px}
.edl-t .edl-lib::before{display:none}
.edl-t td::before{content:attr(data-l);display:block;color:#6B7A90;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.edl-t .edl-nb,.edl-t .edl-c{width:auto;text-align:left}
.edl-t .edl-in,.edl-t .edl-ta{width:100%;box-sizing:border-box}
.edl-etats{display:flex;flex-wrap:wrap;gap:6px}
}
/* --------------------------------------------------------------------
BAUX A SIGNER : grille de saisie du contrat.
Mêmes blocs que l'état des lieux, pour ne pas réapprendre une interface.
June, 18/10/2026.
-------------------------------------------------------------------- */
.ctr-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:10px}
.ctr-g .ctr-large{grid-column:1/-1}
.ctr-g .edl-l{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:#13233F}
.ctr-g .edl-in,.ctr-g .edl-ta,.ctr-g .sel{font-weight:400;width:100%;box-sizing:border-box}
.ctr-coche{grid-column:1/-1;margin:0}
@media (max-width:700px){ .ctr-g{grid-template-columns:1fr} }
/* --------------------------------------------------------------------
Noir et blanc, dominante orange. June, 18/10/2026 : « couleur baux :
noir et blanc dominante orange, état des lieux pareil ». Le bleu des
bandeaux laisse donc la place au noir, et l'orange de la charte reste
la seule couleur d'accent : sections validées, état retenu, colonne
de sortie.
-------------------------------------------------------------------- */
.edl-sec-t{background:#1A1A1A}
.edl-sec.on .edl-sec-t{background:#EE7838}
.edl-sec.on{border-color:#F3C9A8;background:#FFFBF7}
.edl-t thead th.edl-s{background:#EE7838}
.edl-t thead th.edl-e{background:#1A1A1A}
.edl-valide input:checked + span{color:#fff}
.bil-indice strong{color:#1A1A1A}
/* La case de validation vit sur un bandeau noir puis orange : en blanc,
elle se lit sur les deux. */
.edl-valide input{accent-color:#fff}
/* ----------------------------------------------------------------------
Pièces repliables dans l'état des lieux. June, 18/10/2026 : « chambre 1,
2, 3, 4 et 5 repliable pour que ce soit pas trop long, laisse la chambre
1 ouverte par défaut ». Le contenu est masqué, le chevron l'ouvre, et la
première pièce arrive dépliée.
---------------------------------------------------------------------- */
.edl-piece-c{display:none}
.edl-piece.ouverte .edl-piece-c{display:block}
.edl-plier{appearance:none;background:none;border:0;padding:0;margin:0 4px 0 0;cursor:pointer;
width:26px;height:26px;flex:0 0 auto;border-radius:7px;position:relative}
.edl-plier:hover{background:#F0F3F8}
.edl-plier:before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
border-right:2px solid #1A1A1A;border-bottom:2px solid #1A1A1A;
transform:translate(-60%,-70%) rotate(-45deg);transition:transform .15s ease}
.edl-piece.ouverte .edl-plier:before{transform:translate(-50%,-70%) rotate(45deg)}
.edl-plier:focus-visible{outline:2px solid var(--main-color,#EE7838);outline-offset:2px}
.edl-piece:not(.ouverte){background:#FAFBFD}
.edl-piece:not(.ouverte) .edl-piece-t{margin-bottom:0}
/* Case de deduction bloquee : frais d'acquisition, non deductibles des
revenus fonciers. La ligne se saisit, la case ne se coche pas. */
.coche.coche-off{opacity:.45}
.coche.coche-off span{text-decoration:line-through}
/* Les periodes de vacance tiennent dans un seul bloc : sur telephone la
cellule est un flex, et deux enfants se mettaient cote a cote, ce qui
coupait le badge « avant le premier bail saisi ». Un conteneur unique le
remet sous la date, et la cellule garde la largeur de l'ecran. */
.vac-liste{min-width:0}
.vac-av{margin-top:3px}