/* ————————————————————————————————————————————————————————————————
   Kablann — la mise en forme de l'interface.

   L'identité (polices, couleurs, logo) vit dans identite.css : elle vient du
   prototype et ne se réinterprète pas ici. Ce fichier ne fait que poser les
   blocs.

   Un principe de lisibilité s'applique partout : rien sous 13 px, et le
   corps du texte à 15 px. Il vient d'une remarque qui vaut pour tous les
   utilisateurs, pas seulement pour celui qui l'a formulée.
   ———————————————————————————————————————————————————————————————— */
*{box-sizing:border-box}

/* L'attribut `hidden` du HTML pose `display:none` — mais la moindre règle de
   classe l'emporte sur cette valeur par défaut du navigateur. `.accueil` étant
   en `display:flex`, l'écran de connexion restait affiché par-dessus
   l'application, masquée dessous. On tranche une fois pour toutes. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;margin:0}
h1{font-size:27px;line-height:1.25}
h2{font-size:21px}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit}

/* ---- barre du haut ---- */
.entete{
  background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:16px;
  padding:14px 24px;
}
.entete .qui{margin-left:auto;font-size:13.5px;color:#A79E8F}
.entete .qui b{color:#fff;font-weight:500}
.entete .sortir{
  background:none;border:1px solid rgba(255,255,255,.28);color:#fff;
  padding:7px 14px;cursor:pointer;font-size:13px;
}
.entete .sortir:hover{background:rgba(255,255,255,.12)}

/* ---- ossature ---- */
.page{max-width:1180px;margin:0 auto;padding:26px 24px 60px}
.fil{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--soft);margin-bottom:18px;
}
.fil a{cursor:pointer;text-decoration:none}
.fil a:hover{color:var(--ink)}

/* ---- cartes ---- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.carte{
  background:var(--card);border:1px solid var(--line);
  padding:20px 22px;cursor:pointer;
}
.carte:hover{border-color:var(--or)}
.carte .adr{font-size:13.5px;color:var(--soft);margin-top:5px}
.mesures{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.mesure .k{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--soft);
}
.mesure .v{font-size:17px;font-weight:600;margin-top:3px;white-space:nowrap}

/* ---- panneaux ---- */
.bloc{background:var(--card);border:1px solid var(--line);margin-bottom:18px}
.bloc > .tete{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);
  font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
}
.bloc > .tete .compte{
  margin-left:auto;background:var(--accent);color:#fff;
  border-radius:999px;min-width:24px;height:24px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:0;
}
.bloc .corps{padding:18px 20px}
.ligne{
  display:flex;align-items:flex-start;gap:16px;
  padding:13px 20px;border-bottom:1px solid var(--line);
}
.ligne:last-child{border-bottom:none}
.ligne .nom{font-weight:500}
.ligne .det{font-size:13.5px;color:var(--soft);margin-top:2px}
.ligne .droite{margin-left:auto;text-align:right;white-space:nowrap}
.montant{font-variant-numeric:tabular-nums;font-weight:600}

/* ---- étiquettes ---- */
.etq{
  display:inline-block;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.etq.ok{background:#E7EBE0;color:var(--green)}
.etq.att{background:var(--red-soft);color:var(--red)}
.etq.neutre{background:var(--paper);color:var(--soft)}

/* ---- boutons ---- */
.act{
  background:var(--ink);color:#fff;border:none;
  padding:11px 20px;cursor:pointer;font-weight:500;
}
.act:hover{background:#000}
.act.secondaire{background:none;color:var(--ink);border:1px solid var(--ink)}
.act.secondaire:hover{background:var(--ink);color:#fff}
.act[disabled]{opacity:.45;cursor:default}

/* ---- formulaires ---- */
.champ{margin-bottom:16px}
.champ label{
  display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--soft);font-weight:600;margin-bottom:5px;
}
.champ input,.champ select{
  width:100%;padding:11px 13px;border:1px solid var(--line);
  background:#fff;color:var(--ink);
}
.champ input:focus,.champ select:focus{outline:2px solid var(--or);outline-offset:-2px}
.aide{font-size:13px;color:var(--soft);margin-top:5px}

/* ---- messages ---- */
.mot{padding:13px 16px;margin-bottom:16px;font-size:14px}
.mot.erreur{background:var(--red-soft);color:var(--red);border:1px solid #D8B3A4}
.mot.bien{background:#E7EBE0;color:var(--green);border:1px solid #CBD2BE}
.vide{padding:26px 20px;color:var(--soft);text-align:center}

/* ---- connexion ---- */
.accueil{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--ink);padding:24px;
}
.accueil .boite{background:var(--card);padding:38px;width:min(420px,100%)}
.accueil .marque{margin-bottom:26px}
.accueil h1{margin-bottom:6px}
.accueil .sous{font-size:14px;color:var(--soft);margin-bottom:26px}
.accueil .act{width:100%}
.accueil .lien{
  display:block;text-align:center;margin-top:16px;font-size:13.5px;
  color:var(--soft);cursor:pointer;
}

@media(max-width:640px){
  .page{padding:20px 14px 48px}
  .entete{padding:12px 14px;gap:10px;flex-wrap:wrap}
  .entete .qui{font-size:12.5px}
  .mesures{gap:16px}

  /* Une ligne alignait son libellé à gauche et son montant, son étiquette et
ses boutons à droite, sans jamais se replier : sur un téléphone tout ce
qui était à droite sortait de l'écran. Le côté droit passe dessous. */
  .ligne{flex-wrap:wrap}
  .ligne .droite{margin-left:0;text-align:left;white-space:normal;
width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin-top:8px}

  /* Les boutons d'action prennent toute la largeur : trois côte à côte
débordaient, et un bouton à moitié visible ne s'appuie pas. */
  .actions{flex-direction:column;align-items:stretch}
  .actions .act{width:100%;text-align:center}

  /* Les mesures du budget : deux par ligne plutôt que six qui débordent. */
  .mesures{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}

  /* Rien ne doit forcer la page à défiler latéralement. */
  .bloc, .corps, .grille, .carte{min-width:0}
  .grille{grid-template-columns:1fr}
}

/* La barre d'actions du chantier : sous le titre, alignée, aérée.
   C'est le premier endroit où l'œil se pose après le nom du dossier. */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.actions .act{margin:0}

/* ————————————————————— les plans, et leurs épingles —————————————————
   L'image porte les points ; ceux-ci sont positionnés en pourcentage, jamais
   en pixels — le même point doit tomber au même endroit du mur qu'on soit
   devant un écran de bureau ou un téléphone en visite de chantier. */
.plan-cadre{position:relative;display:inline-block;max-width:100%;
  margin:16px 20px;line-height:0}
.plan-cadre img{max-width:100%;height:auto;display:block;
  border:1px solid var(--line);background:#fff}
.plan-cadre{cursor:crosshair}

.epingle{position:absolute;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  background:#B8442E;color:#fff;font:600 12.5px/1 system-ui,sans-serif;
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);padding:0}
.epingle:hover{outline:2px solid rgba(184,68,46,.35)}
.epingle.levee{background:#4B6B4A}

.points{border-top:1px solid var(--line)}
.points .num{display:inline-block;min-width:22px;height:22px;line-height:22px;
  border-radius:50%;background:#B8442E;color:#fff;text-align:center;
  font-size:12.5px;font-weight:600;margin-right:6px}
.act.mini{padding:5px 11px;font-size:13px;margin-left:8px}

@media(max-width:640px){
  .plan-cadre{margin:12px 0;display:block}
  .epingle{width:30px;height:30px;font-size:14px}   /* le pouce, pas la souris */
}