/* HESTEDA — Espace collaborateurs
   Charte alignée sur le site public hesteda.fr (demande de Fabrice, 2026-08-15) :
   Poppins partout, or Century 21 #beaf87, cartes arrondies à bordure discrète,
   boutons en pilules — fini le « zéro arrondi » de la V1. La fiche imprimable
   conserve sa composition (document A4), seuls les tons suivent. */
:root {
  --encre: #252526;        /* texte et titres — même encre que le site public */
  --encre-doux: #58585a;
  --or: #beaf87;           /* or Century 21 (valeur officielle du kit) */
  --or-titre: #b5a589;
  --or-fonce: #847252;
  --or-clair: #ddd6c8;
  --fond: #f2f2f2;         /* gris du site public */
  --carte: #ffffff;
  --texte: #252526;
  --texte-doux: #58585a;
  --bord: rgb(37 37 38 / 0.07);
  --bord-fort: rgb(37 37 38 / 0.16);
  --ok: #2e6b4f;
  --attente: #a86a12;
  --erreur: #a32a20;

  --rayon: 1.25rem;        /* même rayon que les cartes du site public */
  --ombre: 0 1px 3px rgb(37 37 38 / 0.04);

  /* Poppins comme sur hesteda.fr — la variable --serif est conservée pour ne
     pas réécrire toutes les règles, mais pointe désormais sur la même famille. */
  --sans: "Poppins", "Segoe UI", system-ui, sans-serif;
  --serif: "Poppins", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fond);
  color: var(--texte);
  line-height: 1.6;
}
a { color: var(--encre); text-decoration-color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--or-fonce); }
h1 { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em;
     line-height: 1.15; color: var(--encre); margin: 0 0 1.2rem; }
h2 { font-family: var(--sans); font-size: .78rem; font-weight: 600; text-transform: uppercase;
     letter-spacing: .18em; color: var(--or-fonce); margin: 0 0 .9rem; }
small { color: var(--texte-doux); font-weight: normal; text-transform: none; letter-spacing: normal; }
code { background: #eee9db; border-radius: .35em; padding: .1em .35em; }

/* En-tête : blanc, filet or — le même langage que l'en-tête du site public. */
.entete { background: #fff; color: var(--encre); border-bottom: 1px solid var(--or); }
.entete-int {
  max-width: 1100px; margin: 0 auto; padding: .85rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.marque { display: inline-flex; align-items: center; gap: .8rem; color: var(--or); text-decoration: none; }
.marque svg { width: 42px; height: 42px; flex: none; }
.marque-textes { display: flex; flex-direction: column; line-height: 1.2; }
.marque-enseigne { color: var(--or-fonce); font-weight: 600; font-size: .68rem;
                   text-transform: uppercase; letter-spacing: .16em; }
.marque-nom { color: var(--encre); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.marque-app { color: var(--texte-doux); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; }
.entete nav { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.entete nav a { color: var(--encre); text-decoration: none; font-size: .86rem; font-weight: 500; }
.entete nav a:hover { color: var(--or-fonce); }
.nav-utilisateur { color: var(--or-fonce); font-size: .8rem; }

.contenu { max-width: 1100px; margin: 2rem auto 3.5rem; padding: 0 1.2rem; }

/* Cartes : arrondies, bordure à peine marquée, ombre douce — la .carte du site. */
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 1.4rem 1.6rem; margin-bottom: 1.2rem;
}
.grille-modules {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;
}
.carte-module { text-decoration: none; display: block; position: relative; overflow: hidden;
                transition: border-color .15s, transform .15s, box-shadow .15s; }
.carte-module::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
                        background: linear-gradient(90deg, var(--or), var(--or-fonce)); }
a.carte-module:hover { border-color: var(--or); transform: translateY(-2px);
                       box-shadow: 0 6px 16px rgb(37 37 38 / 0.08); }
.carte-module h2 { font-size: 1.15rem; font-weight: 600; text-transform: none;
                   letter-spacing: -.01em; color: var(--encre); }
.carte-module p { color: var(--texte-doux); margin: 0; font-size: .92rem; }
.carte-inactive { opacity: .6; }
.carte-inactive::before { background: var(--or-clair); }

/* Boutons : pilules, comme les bouton-principal / bouton-secondaire du site. */
.btn {
  display: inline-block; background: var(--or); color: #fff; border: 1px solid var(--or);
  border-radius: 999px; padding: .6rem 1.4rem; font-size: .8rem; font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: var(--sans);
  text-transform: uppercase; letter-spacing: .1em; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--or-fonce); border-color: var(--or-fonce); color: #fff; }
.btn-secondaire { background: transparent; color: var(--encre); border: 1px solid var(--or); }
.btn-secondaire:hover { background: var(--or); color: #fff; border-color: var(--or); }
.btn-danger { background: var(--erreur); border-color: var(--erreur); }
.btn-danger:hover { background: #822a21; border-color: #822a21; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.badge {
  display: inline-block; font-size: .66rem; font-weight: 600; padding: .22em .8em;
  text-transform: uppercase; letter-spacing: .08em; vertical-align: middle;
  border: 1px solid currentColor; border-radius: 999px;
}
.badge { color: var(--or-fonce); }
.badge-ok { color: var(--ok); }
.badge-attente { color: var(--attente); }
.badge-off { color: var(--erreur); }

.flash { padding: .8rem 1.1rem; margin-bottom: 1.2rem; border: 1px solid currentColor;
         border-radius: var(--rayon); background: #fff; }
.flash-succes { color: var(--ok); }
.flash-erreur { color: var(--erreur); }

/* Formulaires */
label { display: block; margin-bottom: .9rem; font-size: .88rem; font-weight: 600; color: var(--encre-doux); }
input, select {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .8rem;
  border: 1px solid var(--or-clair); border-radius: .75rem; font-size: 1rem; font-family: var(--sans);
  background: #fff; color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--or-fonce); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .deux-colonnes { grid-template-columns: 1fr; } }
.champ-code { letter-spacing: .4em; font-size: 1.3rem; text-align: center; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.actions form { margin: 0; }
.entete-page { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
               gap: .8rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--or); padding-bottom: .8rem; }
.entete-page h1 { margin: 0; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; color: var(--texte-doux); font-weight: 600; font-size: .72rem;
     text-transform: uppercase; letter-spacing: .1em; }
th, td { padding: .6rem .6rem; border-bottom: 1px solid var(--bord); }
thead th { border-bottom: 2px solid var(--or); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #faf8f3; }
.ligne-inactive { opacity: .55; }

/* Écran de connexion (style Century 21 : fond blanc, champs soulignés, bouton or) */
body.page-nue { background: #fff; }
.ecran-connexion { display: flex; justify-content: center; }
.panneau-connexion { width: 100%; max-width: 780px; padding: 2.5vh 0 3rem; }
.logo-connexion { display: block; width: min(300px, 70vw); margin: 0 auto 2.5rem; }
.sous-marque { text-align: center; color: var(--or-fonce); margin: -1.2rem 0 2rem; font-size: .85rem;
               text-transform: uppercase; letter-spacing: .14em; }

.form-c21 input {
  border: none; border-radius: 0; border-bottom: 1px solid #c9c9c9; padding: .7rem 0;
  font-size: 1.05rem; background: transparent;
}
.form-c21 input::placeholder { color: #9aa0a6; }
.form-c21 input:focus { outline: none; border-bottom: 1.5px solid var(--or); }
.form-c21 > input { margin-bottom: 2rem; }
.form-c21 label { font-weight: 600; margin-bottom: 1.4rem; }

.champ-mdp { position: relative; }
.champ-mdp input { width: 100%; padding-right: 2.5rem; }
.oeil {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #444; padding: .2rem;
}

.btn-c21 {
  display: block; width: 100%; margin-top: 2.2rem;
  background: var(--or); color: #fff; border: none; border-radius: 999px;
  padding: .95rem; font-size: .9rem; font-weight: 600; font-family: var(--sans);
  text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: background .15s;
}
.btn-c21:hover { background: var(--or-fonce); }

.liens-connexion { text-align: center; margin-top: 1.8rem; }
.liens-connexion a { display: inline-block; color: var(--or-fonce); font-size: 1rem; margin-top: .9rem; }
.liens-connexion a:hover { color: var(--encre); }
.liens-connexion .besoin-aide { display: block; font-size: .9rem; }
.aide-premiere {
  display: none; text-align: left; background: var(--fond); border: 1px solid var(--or-clair);
  border-radius: var(--rayon); padding: .8rem 1rem; font-size: .93rem; color: var(--texte);
}
.aide-premiere.visible { display: block; }

.form-2fa { max-width: 420px; margin: 0 auto; }
.texte-2fa { text-align: center; color: var(--texte-doux); }
.liste-etapes { padding-left: 1.2rem; font-size: .95rem; color: var(--texte-doux); }
.qrcode { display: flex; justify-content: center; margin: 1rem 0; }
.secret-manuel { text-align: center; font-size: .85rem; color: var(--texte-doux); }
.secret-manuel code { font-size: .95rem; }

/* Module fiches prestation */
.aide { color: var(--texte-doux); font-size: .9rem; margin-top: -.3rem; }
.zone-dictee { position: relative; }
.zone-dictee textarea, .grille-champs textarea {
  width: 100%; font-size: 1rem; padding: .7rem; border: 1px solid var(--or-clair); border-radius: .75rem;
  font-family: var(--sans); resize: vertical; background: #fff; color: var(--texte); margin-top: .3rem;
}
#bouton-micro { margin-top: .6rem; }
.micro-actif { background: var(--erreur) !important; color: #fff !important; border-color: var(--erreur) !important; }
input[type="file"] { border: 1px dashed var(--bord-fort); border-radius: .75rem; padding: 1rem; width: 100%; background: #fff; }

/* L'attribut `hidden` du HTML pose display:none via la feuille du navigateur, mais
   toute règle de classe qui déclare `display` l'emporte sur lui. Sans cette ligne,
   le voile reste affiché en permanence par-dessus la page — le formulaire devient
   alors impossible à remplir : on clique sur un rideau. */
.voile-attente[hidden] { display: none; }

.voile-attente { position: fixed; inset: 0; background: rgb(37 37 38 / 0.85); z-index: 50;
  display: flex; align-items: center; justify-content: center; }
.voile-contenu { background: var(--carte); border: 1px solid var(--or); border-radius: var(--rayon);
  padding: 2rem 2.5rem; text-align: center; max-width: 380px; }
.rond-attente { width: 42px; height: 42px; border: 3px solid var(--or-clair); border-top-color: var(--or);
  border-radius: 50%; margin: 0 auto 1rem; animation: rotation 1s linear infinite; }
@keyframes rotation { to { transform: rotate(360deg); } }

.grille-champs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem 1.2rem; }
@media (max-width: 900px) { .grille-champs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grille-champs { grid-template-columns: 1fr; } }
.champ-large { grid-column: 1 / -1; }

.tableau-edition input { margin-top: 0; padding: .4rem .5rem; font-size: .93rem; }
.tableau-edition td { padding: .25rem .3rem; }
.btn-ajouter-ligne { margin-top: .6rem; padding: .35rem .8rem; font-size: .75rem; }
.btn-supprimer-ligne { background: none; border: none; color: var(--erreur); cursor: pointer; font-size: 1rem; }
.actions-collantes { position: sticky; bottom: 0; background: var(--fond); padding: .8rem 0; z-index: 10;
  border-top: 2px solid var(--or); }
.carte-transcription summary { cursor: pointer; font-weight: 600; color: var(--encre); }
.carte-transcription p { color: var(--texte-doux); font-size: .93rem; }
.actions-ligne a { margin-right: .8rem; }

/* Fiche imprimable — document A4 : composition inchangée, tons alignés. */
.barre-fiche { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.fiche-impression { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  max-width: 820px; margin: 0 auto; padding: 14mm 16mm;
  color: #252526; font-size: .95rem; }
.fiche-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  border-bottom: 3px solid var(--or); padding-bottom: 1rem; }
.fiche-logo { width: 150px; }
.fiche-titre-bloc { text-align: right; }
.fiche-titre-bloc h1 { font-family: var(--serif); font-size: 1.35rem; color: var(--encre); margin: 0 0 .5rem;
  text-transform: uppercase; letter-spacing: .06em; }
.fiche-cartouche { margin-left: auto; border-collapse: collapse; font-size: .9rem; }
.fiche-cartouche th { text-align: right; color: var(--texte-doux); font-weight: 600;
  padding: .1rem .6rem .1rem 0; border: none; }
.fiche-cartouche td { padding: .1rem 0; border: none; }
.fiche-identite { text-align: center; margin: 1.2rem 0 .6rem; }
.fiche-proprietaires { font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
  color: var(--encre); margin: .2rem 0; }
.fiche-adresse { font-size: 1.05rem; margin: .2rem 0; }
.fiche-resume { color: var(--or-fonce); font-weight: 600; margin: .3rem 0 0;
  text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.fiche-section { margin-top: 1.1rem; break-inside: avoid; }
.fiche-section h2 { font-size: .8rem; letter-spacing: .14em; color: var(--encre);
  border-bottom: 1.5px solid var(--or); padding-bottom: .25rem; margin-bottom: .5rem; }
.fiche-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fiche-table th, .fiche-table td { border: none; border-bottom: 1px solid #efece3; padding: .3rem .4rem; }
.fiche-table > tr > th, .fiche-table > tbody > tr > th { width: 38%; text-align: left;
  color: var(--texte-doux); font-weight: 600; text-transform: none; letter-spacing: .02em; font-size: .88rem; }
.fiche-table-colonnes thead th { color: var(--encre); font-weight: 700; border-bottom: 1.5px solid var(--or-clair);
  text-transform: none; letter-spacing: 0; font-size: .88rem; }
.fiche-table tbody tr:hover td { background: transparent; }
.fiche-pied { margin-top: 1.6rem; padding-top: .6rem; border-top: 1px solid #efece3;
  font-size: .75rem; color: var(--texte-doux); text-align: center; }

@media print {
  .entete, .barre-fiche, .flash, .entete-page .actions-ligne { display: none !important; }
  body, body.page-nue { background: #fff; }
  .contenu { max-width: none; margin: 0; padding: 0; }
  .fiche-impression { border: none; border-radius: 0; max-width: none; padding: 0; margin: 0; }
  /* Étude foncière : chaque carte est une section du dossier, on évite de la couper. */
  .carte { box-shadow: none; border: 1px solid var(--or-clair); break-inside: avoid; }
  .donnees-brutes { max-height: none; }
  @page { size: A4; margin: 14mm 15mm; }
}

/* Code initial généré */
.carte-code { border: 2px solid var(--or); }
.code-initial {
  font-size: 1.9rem; font-weight: 700; letter-spacing: .18em; text-align: center;
  font-family: var(--serif); color: var(--encre); background: var(--fond);
  border-radius: .75rem; padding: .6rem;
}

/* ---------------------------------------------------------------- Étude foncière */

.note { color: var(--texte-doux); font-size: .85rem; }

.formulaire-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1rem 0 .4rem; }
.formulaire-inline label { font-weight: 600; }
.formulaire-inline input { flex: 1 1 22rem; }

.liste-sources { list-style: none; padding: 0; margin: .6rem 0 0; }
.liste-sources li { padding: .35rem 0; border-bottom: 1px solid var(--bord); font-size: .9rem; }
.liste-sources li:last-child { border-bottom: 0; }

.liste-alertes { list-style: none; padding: 0; margin: 0; }
.liste-alertes li { padding: .6rem 0; border-bottom: 1px solid var(--bord); }
.liste-alertes li:last-child { border-bottom: 0; }

/* Les niveaux disent quoi faire : une obligation s'annexe, une prudence se vérifie. */
.badge-obligation  { color: var(--erreur); }
.badge-important   { color: var(--attente); }
.badge-prudence    { color: var(--attente); }
.badge-information { color: var(--or-fonce); }

.donnees-brutes { background: var(--fond); border-radius: .6rem; padding: .8rem;
                  overflow-x: auto; font-size: .78rem; max-height: 22rem; }

/* Bouton sortant vers Yanport : bleu de l'outil, pour qu'on voie d'un coup d'œil
   que le lien quitte l'espace collaborateurs. */
.btn-yanport { background: #1a3a8f; border-color: #1a3a8f; color: #fff; }
.btn-yanport:hover { background: #142d70; border-color: #142d70; color: #fff; }

/* ── Suivi de positions (Visibilité) ─────────────────────────────────── */
.suivi-mot { border-top: 1px solid rgb(37 37 38 / 0.07); padding: 1.1rem 0 .4rem; }
.suivi-mot:first-of-type { border-top: 0; padding-top: .4rem; }
.suivi-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.suivi-tete h3 { margin: 0 0 .7rem; font-size: .98rem; }
.suivi-tete h3 small { font-weight: 400; color: rgb(37 37 38 / 0.5); margin-left: .4rem; }
.lien-discret { padding: .3rem .8rem; font-size: .66rem; }

.suivi-chiffres {
  display: grid; gap: 1rem 1.6rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.suivi-libelle {
  margin: 0 0 .2rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .12em; color: rgb(37 37 38 / 0.5);
}
.suivi-valeur { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.suivi-valeur .hors { font-size: .92rem; font-weight: 500; color: rgb(37 37 38 / 0.55); }
.suivi-valeur .badge { vertical-align: middle; margin-left: .3rem; }
.suivi-detail { margin: .3rem 0 0; font-size: .76rem; color: rgb(37 37 38 / 0.5); }
.suivi-courbe { color: #a9803f; }
.courbe { width: 100%; height: auto; max-width: 14rem; }

.mvt { font-size: .74rem; font-weight: 600; margin-left: .35rem; vertical-align: middle; }
.mvt-hausse { color: #3f6b4a; }
.mvt-baisse { color: #a32a20; }

.podium { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .3rem; }
.podium li {
  display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .7rem;
  align-items: center; font-size: .84rem;
}
.podium-rang { color: rgb(37 37 38 / 0.45); font-weight: 600; }
.podium-note { color: rgb(37 37 38 / 0.55); font-size: .78rem; white-space: nowrap; }
.podium-nous {
  background: rgb(169 128 63 / 0.1); border-radius: 3px;
  padding: .3rem .5rem; margin: 0 -.5rem; font-weight: 600;
}
.podium-coupure {
  display: flex; align-items: center; gap: .6rem; margin: .25rem 0;
  grid-template-columns: none; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: #a32a20; font-weight: 600;
}
.podium-coupure::after {
  content: ""; flex: 1; border-top: 1px dashed #a32a20; opacity: .5;
}

/* Encart décisionnel du tableau de bord : trois chiffres clés, puis un tableau
   dense où chaque ligne dit la place, l'écart et le geste à faire. */
.visibilite-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.visibilite-tete h2 { margin: 0; }
.visibilite-tete a { font-size: .82rem; }

.chiffres-cles {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding: 1rem 0 1.3rem; border-bottom: 1px solid rgb(37 37 38 / 0.08); margin-bottom: .4rem;
}
.cle-valeur {
  margin: 0; font-size: 1.9rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cle-valeur span { font-size: .95rem; font-weight: 500; color: rgb(37 37 38 / 0.45); }
.cle-libelle { margin: .4rem 0 0; font-size: .76rem; color: rgb(37 37 38 / 0.55); line-height: 1.35; }

.table-positions { width: 100%; border-collapse: collapse; }
.table-positions thead th {
  text-align: left; font-size: .66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .11em; color: rgb(37 37 38 / 0.45);
  padding: .5rem .5rem .45rem 0; border-bottom: 1px solid rgb(37 37 38 / 0.08);
}
.table-positions td {
  padding: .7rem .5rem .7rem 0; vertical-align: top;
  border-top: 1px solid rgb(37 37 38 / 0.06); font-size: .87rem;
}
.table-positions tbody tr:first-child td { border-top: 0; }
.table-positions .mot { font-weight: 600; }
.table-positions .mot .commune {
  display: block; font-weight: 400; font-size: .74rem; color: rgb(37 37 38 / 0.45);
}
.table-positions .rang { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-positions .rang-ok { font-size: 1.25rem; font-weight: 700; color: #3f6b4a; }
.table-positions .rang-ko { font-size: 1.25rem; font-weight: 700; color: #a32a20; }
.table-positions .hors { font-size: .84rem; color: rgb(37 37 38 / 0.5); }
.table-positions .detail-fiche {
  display: block; font-size: .74rem; color: rgb(37 37 38 / 0.5); margin-top: .15rem;
}
.table-positions .verdict { color: rgb(37 37 38 / 0.72); line-height: 1.45; }
@media (max-width: 48rem) {
  .table-positions thead { display: none; }
  .table-positions td { display: block; border-top: 0; padding: .15rem 0; }
  .table-positions tbody tr { display: block; padding: .8rem 0; border-top: 1px solid rgb(37 37 38 / 0.08); }
}
/* ── Wallboard Search Console ────────────────────────────────────────── */
.wallboard .chiffres-cles { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.wallboard .cle-valeur { font-size: 2.1rem; }

.deux-colonnes {
  display: grid; gap: 1.6rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  padding-top: 1.2rem;
}
.sous-titre {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: rgb(37 37 38 / 0.5); margin: 0 0 .7rem;
}
.table-requetes { width: 100%; border-collapse: collapse; }
.table-requetes td {
  padding: .5rem .4rem; font-size: .86rem; vertical-align: baseline;
  border-top: 1px solid rgb(37 37 38 / 0.06);
}
.table-requetes tr:first-child td { border-top: 0; }
.table-requetes .expression { width: 100%; }
.table-requetes .nombre {
  text-align: right; white-space: nowrap; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.table-requetes .nombre span { font-weight: 400; font-size: .74rem; color: rgb(37 37 38 / 0.5); }
.table-requetes .gisement { color: #96701f; }
.table-requetes .pos { font-weight: 500; color: rgb(37 37 38 / 0.55); padding-left: .9rem; }
.marche-a-suivre { margin: .8rem 0 0; padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; }
.marche-a-suivre li { margin-bottom: .45rem; }
.formulaire textarea {
  width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .78rem; padding: .6rem .7rem; border: 1px solid rgb(37 37 38 / 0.15);
  border-radius: 3px; resize: vertical;
}

/* ── Courbe de trafic ────────────────────────────────────────────────── */
.bloc-courbe { padding: 1.4rem 0 .6rem; }
.legende {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .74rem; color: rgb(37 37 38 / 0.55); margin-bottom: .7rem;
}
.legende-fin { margin-left: auto; }
.pastille { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }
.pastille-clics { background: #a9803f; }
.pastille-impressions { background: rgb(169 128 63 / 0.22); margin-left: .8rem; }
.cadre-courbe { position: relative; }
.courbe-trafic { width: 100%; height: 170px; display: block; }
.axe-dates {
  display: flex; justify-content: space-between; margin-top: .4rem;
  font-size: .72rem; color: rgb(37 37 38 / 0.42);
}
.aire-impressions { fill: rgb(169 128 63 / 0.16); }
.aire-clics { fill: rgb(169 128 63 / 0.4); }
.trait-clics { fill: none; stroke: #8a6a2f; stroke-width: 2.5; vector-effect: non-scaling-stroke; }


.table-requetes thead th {
  text-align: right; font-size: .64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: rgb(37 37 38 / 0.42); padding: 0 .4rem .4rem;
  border-bottom: 1px solid rgb(37 37 38 / 0.08);
}
.table-requetes thead th:first-child { text-align: left; }
.table-requetes .faible { color: #a32a20; }
.table-requetes .gain {
  text-align: right; font-size: .76rem; color: #3f6b4a; white-space: nowrap;
  font-weight: 500;
}
@media (max-width: 48rem) {
  .table-requetes .gain, .table-requetes thead { display: none; }
}

/* ── Visibilité par commune ──────────────────────────────────────────── */
.ville { padding: 1.4rem 0; border-top: 1px solid rgb(37 37 38 / 0.08); }
.ville:first-of-type { border-top: 0; padding-top: .2rem; }
.ville-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.ville-tete h3 { margin: 0; font-size: 1.3rem; }
.verdict-ville {
  font-size: .82rem; font-weight: 600; padding: .3rem .7rem; border-radius: 3px;
  white-space: nowrap;
}
.verdict-ok { background: #eaf1eb; color: #3f6b4a; }
.verdict-ko { background: #f8eeed; color: #a32a20; }
.verdict-absent { background: #f7efdc; color: #96701f; }

.table-recherches { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.table-recherches thead th {
  text-align: right; font-size: .64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: rgb(37 37 38 / 0.42); padding: 0 .4rem .4rem;
  border-bottom: 1px solid rgb(37 37 38 / 0.08);
}
.table-recherches thead th:first-child { text-align: left; }
.table-recherches td {
  padding: .5rem .4rem; font-size: .86rem;
  border-top: 1px solid rgb(37 37 38 / 0.05);
}
.table-recherches td.rang { text-align: right; white-space: nowrap; }
.table-recherches .rang-ok { color: #3f6b4a; font-weight: 700; }
.table-recherches .rang-ko { color: #a32a20; font-weight: 700; }
.table-recherches .hors { color: rgb(37 37 38 / 0.45); font-size: .8rem; }

.reglages > summary {
  cursor: pointer; font-family: var(--sans, inherit); font-size: .8rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: rgb(37 37 38 / 0.5); list-style: none;
}
.reglages > summary::before { content: "▸ "; }
.reglages[open] > summary::before { content: "▾ "; }
.reglages > summary small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.liste-mots { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .35rem; }
.liste-mots li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: .86rem; padding: .35rem 0;
  border-top: 1px solid rgb(37 37 38 / 0.05);
}
.liste-mots li:first-child { border-top: 0; }
.liste-mots small { color: rgb(37 37 38 / 0.45); }

/* ── Podium des concurrents ──────────────────────────────────────────── */
.rangs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rangs li {
  display: grid; grid-template-columns: 1.5rem 1fr auto;
  align-items: center; gap: .75rem; font-size: .87rem;
}
.rangs .rang { font-weight: 600; color: rgb(37 37 38 / 0.4); font-variant-numeric: tabular-nums; }
.rangs .nom { font-weight: 500; }
.rangs .jauge {
  height: 6px; border-radius: 4px; background: rgb(37 37 38 / 0.05);
  overflow: hidden; border: 1px solid rgb(37 37 38 / 0.07);
}
.rangs .jauge i { display: block; height: 100%; background: rgb(37 37 38 / 0.25); }
.rangs .score {
  font-size: .78rem; color: rgb(37 37 38 / 0.5); text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rangs .nous {
  background: rgb(169 128 63 / 0.12); border-radius: 3px;
  padding: .35rem .5rem; margin: 0 -.5rem;
}
.rangs .nous .nom { font-weight: 700; }
.rangs .nous .rang { color: #8a6a2f; }
.rangs .nous .jauge i { background: #a9803f; }
.rangs .nous .score { color: rgb(37 37 38 / 0.75); font-weight: 600; }
.rangs .coupure {
  display: flex; align-items: center; gap: .6rem; margin: .3rem 0;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: #a32a20; font-weight: 600; white-space: nowrap;
}
.rangs .coupure::after {
  content: ""; flex: 1; border-top: 1px dashed #a32a20; opacity: .45;
}
.lecture {
  margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid rgb(37 37 38 / 0.06);
  font-size: .9rem; color: rgb(37 37 38 / 0.72); line-height: 1.5;
}
.lecture b { color: rgb(37 37 38 / 0.95); }

/* ── Mode d'emploi par commune ───────────────────────────────────────── */
.mode-emploi {
  background: rgb(169 128 63 / 0.07); border-radius: 4px;
  padding: 1rem 1.2rem; margin-top: 1.1rem;
}
.mode-emploi .constat { margin: 0; font-size: .92rem; line-height: 1.55; }
.titre-actions {
  margin: 1rem 0 .5rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: #8a6a2f;
}
.actions-liste { margin: 0; padding-left: 1.25rem; display: grid; gap: .45rem; }
.actions-liste li { font-size: .89rem; line-height: 1.5; }
.delai {
  margin: .9rem 0 0; font-size: .82rem; font-weight: 600; color: #3f6b4a;
}
.table-requetes .gain span {
  display: block; font-weight: 400; font-size: .72rem; color: rgb(37 37 38 / 0.5);
}
.pistes-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.pistes-liste li { font-size: .89rem; line-height: 1.5; }
.pistes-liste li::marker { color: rgb(37 37 38 / 0.3); }

/* ── Agent location : file de traitement ─────────────────────────────── */
.filtres-file { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.filtre {
  font-size: .82rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid rgb(37 37 38 / 0.12); text-decoration: none; color: inherit;
}
.filtre span { color: rgb(37 37 38 / 0.45); margin-left: .2rem; }
.filtre.actif { background: rgb(169 128 63 / 0.14); border-color: #a9803f; font-weight: 600; }
.filtre.actif span { color: #8a6a2f; }

.table-file { width: 100%; border-collapse: collapse; }
.table-file thead th {
  text-align: left; font-size: .64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: rgb(37 37 38 / 0.42); padding: 0 .5rem .4rem 0;
  border-bottom: 1px solid rgb(37 37 38 / 0.08);
}
.table-file td {
  padding: .7rem .5rem .7rem 0; font-size: .88rem; vertical-align: top;
  border-top: 1px solid rgb(37 37 38 / 0.06);
}
.table-file .date { white-space: nowrap; color: rgb(37 37 38 / 0.5); font-size: .8rem; }
.table-file .expediteur {
  display: block; font-size: .76rem; color: rgb(37 37 38 / 0.45); margin-top: .15rem;
}
.table-file .etat { white-space: nowrap; color: rgb(37 37 38 / 0.55); }
.table-file .urgence-urgent td:first-child { box-shadow: inset 3px 0 0 #a32a20; padding-left: .6rem; }
.etiquette {
  display: inline-block; font-size: .72rem; padding: .15rem .5rem;
  border-radius: 3px; background: rgb(37 37 38 / 0.06); color: rgb(37 37 38 / 0.7);
}

.statuts { display: flex; gap: .5rem; flex-wrap: wrap; }
.meta-demande { margin: 0 0 .8rem; font-size: .82rem; color: rgb(37 37 38 / 0.55); }
.resume-demande { margin: 0; font-size: 1rem; line-height: 1.6; }
.brouillon { border-top: 1px solid rgb(37 37 38 / 0.08); padding-top: 1rem; margin-top: 1rem; }
.brouillon:first-of-type { border-top: 0; }
.brouillon-tete { margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; color: #8a6a2f; }
.brouillon pre, .mail-origine {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: .89rem; line-height: 1.55; background: rgb(37 37 38 / 0.03);
  padding: .9rem 1rem; border-radius: 4px; margin: 0 0 .7rem;
}
.mail-origine { font-size: .8rem; color: rgb(37 37 38 / 0.6); margin-top: .8rem; }

/* ── Pilotage : l'état de chaque levier ──────────────────────────────── */
.resume-pilotage { margin: 0; font-size: .92rem; color: rgb(37 37 38 / 0.6); }
.leviers { list-style: none; margin: 0; padding: 0; }
.levier {
  display: grid; grid-template-columns: .55rem 1fr auto; gap: 1rem;
  align-items: start; padding: 1rem 0;
  border-top: 1px solid rgb(37 37 38 / 0.07);
}
.levier:first-child { border-top: 0; padding-top: .3rem; }
.levier-etat {
  width: .55rem; height: .55rem; border-radius: 50%; margin-top: .45rem;
}
.levier-actif .levier-etat { background: #3f6b4a; }
.levier-attention .levier-etat { background: #c99a2e; }
.levier-inactif .levier-etat { background: rgb(37 37 38 / 0.25); }
.levier-titre { margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; }
.levier-titre a { text-decoration: none; color: inherit; border-bottom: 1px solid rgb(37 37 38 / 0.2); }
.levier-titre a:hover { border-bottom-color: #a9803f; }
.levier-detail { margin: 0; font-size: .86rem; color: rgb(37 37 38 / 0.6); line-height: 1.5; }
.levier-mesure {
  margin: 0; text-align: right; font-size: .9rem; font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.levier-mesure span {
  display: block; font-weight: 400; font-size: .74rem; color: rgb(37 37 38 / 0.45);
}
.levier-inactif .levier-mesure { color: rgb(37 37 38 / 0.45); font-weight: 500; }
@media (max-width: 40rem) {
  .levier { grid-template-columns: .55rem 1fr; }
  .levier-mesure { grid-column: 2; text-align: left; margin-top: .4rem; }
}

/* CRM prospection terrain : pensé pour le téléphone, une main, en marchant. */
.crm-recherche { display: flex; gap: .6rem; margin-bottom: .6rem; }
.crm-recherche input { margin: 0; font-size: 1.05rem; }
.crm-recherche .btn { flex: none; }
.crm-ligne { display: block; padding: .55rem .2rem; border-top: 1px solid var(--bord);
             text-decoration: none; }
.crm-ligne:first-of-type { border-top: 0; }
.crm-ligne:hover { background: #faf8f3; }
.crm-ligne-titre { display: block; }
.crm-ligne-sous { display: block; font-size: .8rem; color: var(--texte-doux); }
.crm-rue-lien { margin: .8rem 0 .2rem; font-size: .85rem; }
.crm-identite { font-size: 1.1rem; margin: 0 0 .6rem; }
.crm-details { list-style: none; margin: 0 0 .8rem; padding: 0; }
.crm-details li { padding: .15rem 0; }
.crm-mention { font-size: .82rem; color: var(--erreur); border: 1px dashed currentColor;
               border-radius: .75rem; padding: .5rem .8rem; margin: 0; }
.crm-mention-ok { color: var(--ok); }
.crm-chrono { list-style: none; margin: 0; padding: 0; }
.crm-chrono li { display: grid; grid-template-columns: 6.2rem 7rem 1fr; gap: .6rem;
                 padding: .4rem 0; border-top: 1px solid var(--bord); }
.crm-chrono li:first-child { border-top: 0; }
.crm-chrono-date { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.crm-chrono-type { font-weight: 600; font-size: .78rem; text-transform: uppercase;
                   letter-spacing: .08em; color: var(--or-fonce); }
.crm-chrono-texte em { display: block; color: var(--texte-doux); font-style: normal; font-size: .85rem; }
@media (max-width: 600px) {
  .crm-chrono li { grid-template-columns: 5.4rem 1fr; }
  .crm-chrono-texte { grid-column: 1 / -1; }
}

/* Barre de progression des imports CenturyNet. */
.progression { height: 14px; border: 1px solid var(--or); border-radius: 999px;
               overflow: hidden; background: var(--fond); margin: .4rem 0 .6rem; }
.progression-barre { height: 100%; background: var(--or); border-radius: 999px;
                     transition: width .4s ease; }

/* Autocomplétion de la recherche terrain — les rues se proposent à la frappe. */
.crm-autocomplete { position: relative; flex: 1; }
.crm-autocomplete input { width: 100%; }
.crm-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--or); border-radius: .75rem;
  box-shadow: 0 8px 24px rgb(37 37 38 / 0.12); overflow: hidden;
}
.crm-suggestion { display: block; padding: .5rem .9rem; text-decoration: none;
                  border-top: 1px solid var(--bord); }
.crm-suggestion:first-child { border-top: 0; }
.crm-suggestion strong { display: block; font-weight: 600; }
.crm-suggestion span { display: block; font-size: .8rem; color: var(--texte-doux); }
.crm-suggestion:hover, .crm-suggestion.actif { background: #faf8f3; }

/* Carte des biens et îlots — pastilles-prix façon cartes d'annonces. */
#carte-crm { height: min(72vh, 700px); border-radius: .9rem; z-index: 0; }
.pin-conteneur { background: none; border: none; }
.pin-bien {
  display: inline-block; transform: translate(-50%, -100%);
  background: #fff; color: var(--encre); border: 1.5px solid var(--or-fonce);
  border-radius: 999px; padding: .12rem .55rem; font-weight: 600; font-size: .78rem;
  white-space: nowrap; box-shadow: 0 2px 6px rgb(37 37 38 / 0.25);
}
.pin-location { border-color: var(--encre-doux); color: var(--encre-doux); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background: var(--or); color: #fff; font-weight: 600;
}
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background: rgb(190 175 135 / 0.35);
}

/* ── Audience : barres de répartition et entonnoirs ─────────────────── */
.barres, .entonnoir { list-style: none; margin: .4rem 0 0; padding: 0; }
.barres li, .entonnoir li {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto; gap: .8rem;
  align-items: center; padding: .35rem 0; font-size: .88rem;
}
.entonnoir { counter-reset: etape; }
.entonnoir .etape-libelle::before {
  counter-increment: etape; content: counter(etape) ". ";
  color: rgb(37 37 38 / 0.45); font-variant-numeric: tabular-nums;
}
.barre-piste { display: block; height: .55rem; border-radius: 999px; background: rgb(37 37 38 / 0.07); overflow: hidden; }
.barre-remplissage { display: block; height: 100%; background: #a9803f; border-radius: 999px; }
.barre-valeur { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barre-valeur small { font-weight: 400; color: rgb(37 37 38 / 0.5); margin-left: .25rem; }
.parcours-grille { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .parcours-grille { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 40rem) {
  .barres li, .entonnoir li { grid-template-columns: 1fr auto; }
  .barres .barre-piste, .entonnoir .barre-piste { grid-column: 1 / -1; order: 3; }
}

/* ── Audience : chemins de visite ─────────────────────────────────── */
.filtre-separateur { width: 1px; background: rgb(37 37 38 / 0.12); margin: .2rem .3rem; }
.discret { color: rgb(37 37 38 / 0.5); }
.chemin { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .3rem; }
.chemin span {
  font-size: .8rem; padding: .15rem .55rem; border-radius: 999px;
  background: rgb(169 128 63 / 0.12); color: #6d5322; white-space: nowrap;
}
.chemin span:first-child { background: #a9803f; color: #fff; }
.chemin i { font-style: normal; color: rgb(37 37 38 / 0.35); }
.chemins-liste { list-style: none; margin: .6rem 0 0; padding: 0; }
.chemins-liste li {
  display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: .6rem;
  padding: .45rem 0; border-top: 1px solid rgb(37 37 38 / 0.07);
}
.chemins-liste li:first-child { border-top: 0; }
.chemin-nombre { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.table-chemins .expression, .table-visites .expression { width: auto; }
.table-visites .quand, .table-visites .venu { white-space: nowrap; vertical-align: top; font-size: .84rem; }
.table-visites .expression .badge { display: inline-block; margin-top: .3rem; font-size: .76rem; }

/* Aperçu de fiche affiché dans l'outil de dictée du NAS (sans chrome de l'espace) */
.barre-apercu { padding: .5rem 0 .9rem; gap: .8rem; flex-wrap: wrap; }
.barre-apercu .actions { margin-top: 0; }
.carte-nas p { margin: 0; }

/* ============================================================================
   COQUE DE L'APPLICATION (15/09/2026) — barre latérale, en-tête, tuiles, listes
   d'actions. Remplace l'en-tête horizontal : tout ce qui compte tient sur un
   écran de 1366 × 720 sans défiler, et se lit de loin.
   ========================================================================== */
:root {
  --lat-largeur: 236px;
  --lat-texte: #d9d4c7;
  --ok-pale: #e3f1ea; --att: #b9821a; --att-pale: #f8eed6; --crit: #b3402e; --crit-pale: #f6e1dc;
}
html { font-size: 15.5px; }
body { background: var(--fond); }
.app { display: flex; min-height: 100vh; }

/* Barre latérale : anthracite, or pour l'actif */
.lat {
  width: var(--lat-largeur); flex: none; background: var(--encre); color: var(--lat-texte);
  display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh;
}
.lat-marque { display: flex; align-items: center; gap: 10px; color: var(--or); text-decoration: none;
  padding: 4px 8px 16px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.lat-marque svg { width: 36px; height: 36px; flex: none; }
.lat-marque b { display: block; color: #fff; font-size: .86rem; font-weight: 600; line-height: 1.15; }
.lat-marque small { color: var(--or); font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; }
.lat-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; overflow-y: auto; }
/* Les pôles sont délimités : un trait, un repère de couleur, un titre plus net. */
.lat-section { margin: 18px 4px 6px; padding: 12px 6px 0; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--or); border-top: 1px solid rgb(255 255 255 / .12); display: flex; align-items: center; gap: 8px; }
.lat-section::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--or); flex: none; }
.lat-section-location::before { background: #6fa58a; }
.lat-section-location { color: #9fcbb3; }
.lat-section-direction::before { background: #b9b9b9; }
.lat-section-direction { color: #c9c9c9; }
body.lat-repliee .lat-nav .lat-section { display: block; height: 0; margin: 10px 8px 6px; padding: 0; border-top: 1px solid rgb(255 255 255 / .12); overflow: hidden; }
body.lat-repliee .lat-section::before { display: none; }
.lat-lien { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: .86rem; font-weight: 500; color: var(--lat-texte); text-decoration: none; }
.lat-lien svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.lat-lien:hover { background: rgb(255 255 255 / .06); color: #fff; }
.lat-lien.actif { background: rgb(255 255 255 / .09); color: #fff; }
.lat-lien.actif svg { opacity: 1; color: var(--or); }
.lat-inactif { opacity: .45; cursor: default; }
.lat-inactif em { margin-left: auto; font-style: normal; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.lat-pied { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px;
  border-top: 1px solid rgb(255 255 255 / .08); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--or); color: var(--encre);
  display: grid; place-items: center; font-weight: 700; font-size: .74rem; flex: none; }
.lat-qui { min-width: 0; flex: 1; line-height: 1.2; }
.lat-qui b { display: block; font-size: .8rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lat-qui small { color: var(--texte-doux); font-size: .66rem; }
.lat-sortie { color: var(--lat-texte); display: grid; place-items: center; padding: 6px; border-radius: 8px; }
.lat-sortie svg { width: 18px; height: 18px; }
.lat-sortie:hover { background: rgb(255 255 255 / .08); color: #fff; }

/* Zone principale */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.haut { display: none; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--or); }
.haut-menu { background: none; border: 1px solid var(--bord-fort); border-radius: 10px; padding: 6px; display: grid; place-items: center; cursor: pointer; color: var(--encre); }
.haut-menu svg { width: 20px; height: 20px; }
.haut-titre { font-weight: 600; font-size: .95rem; }
.app .contenu { max-width: 1240px; width: 100%; margin: 0; padding: 26px 32px 40px; }
.lat-voile { display: none; }

@media (max-width: 900px) {
  .lat { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  body.lat-ouverte .lat { transform: none; }
  .lat-voile { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 30; }
  body.lat-ouverte .lat-voile { display: block; }
  .haut { display: flex; }
  .app .contenu { padding: 18px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) { .lat { transition: none; } }

/* En-tête de page : titre + phrase + actions */
.page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-tete h1 { margin: 0; font-size: 1.55rem; }
.page-tete p { margin: .2rem 0 0; color: var(--texte-doux); font-size: .9rem; }
.page-tete .actions { margin-top: 0; }

/* Tuiles : un chiffre, une phrase */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1100px) { .tuiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tuiles { grid-template-columns: 1fr; } }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: inherit; }
a.tuile:hover { border-color: var(--or); }
.tuile .tend { align-self: flex-start; font-size: .68rem; font-weight: 600; padding: .18em .65em; border-radius: 999px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tend-ok { background: var(--ok-pale); color: var(--ok); } .tend-att { background: var(--att-pale); color: var(--att); }
.tend-crit { background: var(--crit-pale); color: var(--crit); } .tend-neutre { background: var(--or-pale, #efe9d9); color: var(--or-fonce); }
.tuile .val { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--encre); }
.tuile .val small { font-size: .95rem; font-weight: 600; color: var(--texte-doux); margin-left: 4px; letter-spacing: 0; }
.tuile .lib { font-size: .88rem; font-weight: 500; color: var(--encre); }
.tuile .sub { font-size: .76rem; color: var(--texte-doux); }

/* Deux colonnes 7/5 */
.deux-blocs { display: grid; grid-template-columns: 7fr 5fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .deux-blocs { grid-template-columns: 1fr; } }
.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 20px; }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bloc-tete h2 { margin: 0; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--encre); }
.bloc-tete a { font-size: .78rem; color: var(--or-fonce); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bloc-tete a:hover { text-decoration: underline; }

/* Liste d'actions : qui, pourquoi maintenant, quoi faire */
.liste-actions { list-style: none; margin: 0; padding: 0; }
.liste-actions li { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--bord); font-size: .86rem; }
.liste-actions li:first-child { border-top: 0; padding-top: 0; }
.liste-actions .stripe { width: 4px; height: 36px; border-radius: 2px; background: var(--or); }
.stripe-crit { background: var(--crit) !important; } .stripe-att { background: var(--att) !important; } .stripe-ok { background: var(--ok) !important; }
.liste-actions b { display: block; font-weight: 600; color: var(--encre); }
.liste-actions b a { text-decoration: none; color: inherit; } .liste-actions b a:hover { color: var(--or-fonce); }
.liste-actions span.quoi { display: block; color: var(--texte-doux); font-size: .78rem; }
.liste-actions .cta { font-size: .72rem; font-weight: 600; color: var(--encre); border: 1px solid var(--bord-fort); border-radius: 999px;
  padding: .4em .9em; white-space: nowrap; text-decoration: none; }
.liste-actions .cta:hover { border-color: var(--or); color: var(--or-fonce); }
.liste-actions li.vide { display: block; color: var(--texte-doux); font-size: .86rem; }
.chip { display: inline-block; font-size: .64rem; font-weight: 600; padding: .18em .7em; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.chip-ok { background: var(--ok-pale); color: var(--ok); } .chip-att { background: var(--att-pale); color: var(--att); }
.chip-or { background: var(--or-pale, #efe9d9); color: var(--or-fonce); } .chip-crit { background: var(--crit-pale); color: var(--crit); }
.bloc-pied { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bord); font-size: .74rem; color: var(--texte-doux); }
.bloc-pied b { color: var(--encre); font-weight: 600; }

/* Feux tricolores (leviers) */
.leviers { list-style: none; margin: 0; padding: 0; }
.leviers li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--bord); font-size: .84rem; }
.leviers li:first-child { border-top: 0; padding-top: 0; }
.feu { width: 12px; height: 12px; border-radius: 50%; }
.feu-ok { background: var(--ok); } .feu-att { background: var(--att); } .feu-crit { background: var(--crit); } .feu-off { background: var(--bord-fort); }
.leviers b { display: block; font-weight: 600; color: var(--encre); }
.leviers span { display: block; color: var(--texte-doux); font-size: .76rem; }
.leviers a.cible { font-size: .72rem; color: var(--or-fonce); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Entonnoir */
.entonnoir { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entonnoir li { display: grid; grid-template-columns: 1fr 3fr auto; gap: 10px; align-items: center; font-size: .82rem; }
.entonnoir .barre { height: 10px; background: var(--fond); border-radius: 999px; overflow: hidden; }
.entonnoir .barre i { display: block; height: 100%; background: var(--or); border-radius: 999px; }
.entonnoir .n { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.entonnoir .n small { font-weight: 500; color: var(--texte-doux); }

/* Fiche foyer : fusion manuelle des fiches d'une même porte */
.ligne-voisin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--bord); }
.ligne-voisin:first-of-type { border-top: 0; }
.ligne-voisin .btn { margin-left: auto; padding: .35rem .9rem; font-size: .7rem; }

/* ============================================================================
   BOÎTE LOCATION — plein écran, trois volets (19/09/2026)
   file · demande ouverte · contexte de l'expéditeur, comme Front / Help Scout.
   ========================================================================== */
body.plein .app .contenu { max-width: none; padding: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.plein .flash { margin: 10px 14px 0; }
.boite4 { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px 324px minmax(0, 1fr) 252px; background: var(--carte); }
@media (max-width: 1240px) { .boite4 { grid-template-columns: 180px 300px minmax(0, 1fr); } .bl-contexte { display: none; } }
@media (max-width: 1000px) { .boite4 { grid-template-columns: 300px minmax(0, 1fr); } .bl-vues { display: none; } }

/* Volet 0 : les vues (dossiers de la boîte) */
.bl-vues { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: #f4f2ec; border-right: 1px solid var(--bord-fort); padding: 14px 10px 16px; }
.bl-vues-tete { padding: 0 6px 10px; }
.bl-vues-tete h1 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.bl-alerte { margin: 0 0 10px; padding: 9px 10px; border-radius: 10px; background: var(--crit-pale); color: var(--crit); font-size: .76rem; line-height: 1.35; }
.bl-alerte b { font-weight: 700; }
.bl-alerte small { display: block; font-size: .68rem; color: #8a4a3d; margin-top: 2px; }
.vues { list-style: none; margin: 0; padding: 0; }
.vues li a, .vues li > span:not(.conv-avatar) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; text-decoration: none; color: var(--encre); font-size: .82rem; font-weight: 500; }
.vues li a:hover { background: rgb(37 37 38 / .05); }
.vues li.actif a { background: var(--carte); box-shadow: 0 1px 2px rgb(37 37 38 / .1); font-weight: 600; }
.vues li a span:first-child, .vues li > span > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vues li b { font-size: .72rem; font-weight: 600; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.vues li.vue-urgentes b:not(:empty) { color: var(--crit); }
.vues li.actif b { color: var(--or-fonce); }
.vues li.vue-urgentes b:empty, .vues li b:empty { display: none; }
.vues-section { margin: 14px 8px 4px; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--or-fonce); display: flex; justify-content: space-between; }
.vues-section a { font-size: .62rem; text-transform: none; letter-spacing: 0; color: var(--texte-doux); }
.vues-types li a { font-weight: 400; font-size: .8rem; padding: 5px 8px; }
.vues-equipe li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: .8rem; }
.vues-equipe li b { margin-left: auto; }
.conv-avatar.mini { width: 22px; height: 22px; font-size: .56rem; }
.vues-outils { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bord); }
.vues-outils li a { font-size: .78rem; color: var(--texte-doux); }
.vues-outils svg { width: 15px; height: 15px; flex: none; color: var(--or-fonce); }

.bl-relever { margin-left: auto; display: inline-flex; }
.bl-relever button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bord-fort); background: var(--carte); color: var(--or-fonce); display: grid; place-items: center; cursor: pointer; padding: 0; }
.bl-relever button svg { width: 15px; height: 15px; }
.bl-relever button:hover { background: var(--or); color: #fff; border-color: var(--or); }
.bl-titre h2 { margin: 0; font-size: .95rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--encre); }
.bl-titre small { font-size: .7rem; color: var(--texte-doux); }
.chip-qui { background: var(--encre); color: #fff; }
.detail-ligne2 { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.detail-commandes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.attribution { display: inline-flex; align-items: center; gap: 6px; }
.attribution select { font: inherit; font-size: .74rem; font-weight: 600; padding: .45em 1.6em .45em .8em; border: 1px solid var(--bord-fort); border-radius: 999px; background: #fff; color: var(--encre); width: auto; max-width: 160px; }
.btn-prendre { padding: .5em 1em; font-size: .72rem; }
.note-equipe { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.note-equipe textarea { width: 100%; font-family: inherit; font-size: .88rem; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: #fffdf5; border-color: var(--or-clair); resize: vertical; margin: 0; }
.note-equipe .btn { padding: .4rem 1rem; font-size: .7rem; }
.ctx-suivi { list-style: none; margin: 0; padding: 0; }
.ctx-suivi li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--bord); font-size: .76rem; }
.ctx-suivi li:last-child { border-bottom: 0; }
.ctx-suivi span { color: var(--texte-doux); }
.ctx-suivi b { font-weight: 600; text-align: right; }

/* Volet 1 : la file */
.bl-liste { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bord-fort); background: #fbfaf7; }
.bl-liste-tete { padding: 14px 14px 10px; border-bottom: 1px solid var(--bord); background: var(--carte); }
.bl-titre { display: flex; align-items: center; gap: 8px; }
.bl-titre h1 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.bl-releve { font-size: .7rem; color: var(--texte-doux); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.bl-releve .feu { width: 8px; height: 8px; }
.bl-recherche { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px; border: 1px solid var(--bord-fort); border-radius: 10px; background: var(--carte); color: var(--texte-doux); }
.bl-recherche svg { width: 15px; height: 15px; flex: none; }
.bl-recherche input { border: 0; padding: 7px 0; font-size: .82rem; background: transparent; width: 100%; border-radius: 0; }
.bl-recherche input:focus { outline: none; }
.bl-recherche:focus-within { border-color: var(--or-fonce); }

.conversations { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.conversations li a { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 11px 14px 11px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--bord); border-left: 3px solid transparent; }
.conversations li a:hover { background: #f4f1ea; }
.conversations li.ouverte a { background: var(--carte); border-left-color: var(--or); }
.conversations li.traitee a { opacity: .55; }
.conversations li.nonlue .conv-objet { font-weight: 600; }
.conv-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #fff; background: var(--or-fonce); flex: none; letter-spacing: .02em; }
.conv-avatar.u-crit { background: var(--crit); } .conv-avatar.u-att { background: var(--or-fonce); } .conv-avatar.u-ok { background: #7f8a83; }
.conv-avatar.grand { width: 52px; height: 52px; font-size: 1rem; }
.conv-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conv-ligne1 { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; align-items: baseline; }
.conv-ligne1 b { font-weight: 600; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-ligne1 time { color: var(--texte-doux); font-size: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conv-objet { font-size: .84rem; font-weight: 500; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-pj { display: inline-flex; margin-left: 6px; color: var(--texte-doux); vertical-align: middle; }
.conv-pj svg { width: 12px; height: 12px; }
.pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pieces a { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--bord); border-radius: 12px; text-decoration: none; color: inherit; background: #fbfaf7; min-width: 0; }
.pieces a:hover { border-color: var(--or); }
.pieces img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; background: #fff; }
.piece-type { display: grid; place-items: center; height: 96px; border-radius: 8px; background: var(--encre); color: var(--or); font-weight: 700; font-size: .8rem; letter-spacing: .08em; }
.pieces b { font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pieces small { font-size: .68rem; color: var(--texte-doux); }
.conv-bien { font-size: .74rem; font-weight: 500; color: var(--or-fonce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-bien { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ctx-bien > b { font-size: .88rem; font-weight: 600; }
.ctx-bien > span { font-size: .78rem; color: var(--texte-doux); }
.ctx-bien .ctx-suivi { margin-top: 6px; }
.conv-resume { font-size: .76rem; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-chips { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.conv-chips .chip { font-size: .58rem; padding: .15em .6em; }
.conversations li.conv-groupe { position: sticky; top: 0; z-index: 1; padding: 6px 14px; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--or-fonce); background: #f4f1ea; border-bottom: 1px solid var(--bord); }
.conversations li.vide { padding: 26px 16px; color: var(--texte-doux); font-size: .86rem; text-align: center; }

/* Volet 2 : la demande ouverte */
.bl-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.detail-vide { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--texte-doux); }
.detail-vide svg { width: 40px; height: 40px; opacity: .35; }
.detail-vide p { margin: 0; }
.detail-tete { display: flex; align-items: flex-start; gap: 14px; padding: 16px 26px 12px; border-bottom: 1px solid var(--bord); background: var(--carte); position: sticky; top: 0; z-index: 2; }
.detail-retour { display: none; color: var(--encre); padding: 6px; margin: -4px 0 0 -8px; }
.detail-retour svg { width: 22px; height: 22px; }
.detail-titre { flex: 1; min-width: 0; }
.detail-tete h2 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600; text-transform: none; letter-spacing: -.01em; color: var(--encre); line-height: 1.3; }
.detail-meta { margin: 0; font-size: .78rem; color: var(--texte-doux); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.segments { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: 999px; overflow: hidden; flex: none; align-self: center; }
.segments button { font: inherit; font-size: .74rem; font-weight: 600; padding: .5em 1em; border: 0; background: #fff; color: var(--texte-doux); cursor: pointer; }
.segments button + button { border-left: 1px solid var(--bord); }
.segments button.actif { background: var(--encre); color: #fff; }
.segments button:hover:not(.actif) { color: var(--encre); background: #faf8f3; }
.detail-corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 26px 40px; }
.detail-corps > * { max-width: 78ch; }
.detail-alerte { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--att-pale); color: var(--att); font-size: .84rem; }
.detail-bloc { margin-top: 22px; }
.detail-bloc h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--or-fonce); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.detail-bloc h3 small { text-transform: none; letter-spacing: 0; color: var(--texte-doux); font-weight: 500; font-size: .74rem; }
.detail-resume { margin: 0; font-size: .95rem; line-height: 1.6; padding: 14px 16px; background: #fbfaf7; border-left: 3px solid var(--or); border-radius: 0 12px 12px 0; }
.taches { list-style: none; margin: 0; padding: 0; }
.taches li { border-bottom: 1px solid var(--bord); }
.taches label { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; margin: 0; font-size: .9rem; font-weight: 400; color: var(--encre); line-height: 1.5; cursor: pointer; }
.taches input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--or-fonce); flex: none; border-radius: 4px; }
.taches li.fait span { color: var(--texte-doux); text-decoration: line-through; }
.brouillon { border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.brouillon header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: #faf8f3; font-size: .8rem; color: var(--texte-doux); }
.brouillon header .btn { padding: .35rem .9rem; font-size: .7rem; }
.brouillon-actions { display: flex; gap: 6px; flex: none; }
/* Ce que la conseillère doit remplir avant d'envoyer : impossible à rater. */
mark.a-completer { background: #ffe58a; color: #5a3d00; font-weight: 600; padding: .05em .35em; border-radius: 4px; border-bottom: 2px solid var(--att); }
.brouillon-incomplet header { background: var(--att-pale); }
.brouillon header .chip { margin-left: 8px; vertical-align: middle; }
.brouillon pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; font-family: inherit; font-size: .88rem; line-height: 1.55; }
.detail-origine summary { cursor: pointer; font-size: .78rem; color: var(--texte-doux); font-weight: 600; }
.detail-origine pre { white-space: pre-wrap; font-family: inherit; font-size: .8rem; color: var(--texte-doux); background: #faf8f3; border-radius: 10px; padding: 12px; margin-top: 8px; max-height: 320px; overflow: auto; }

/* Volet 3 : le contexte */
.bl-contexte { border-left: 1px solid var(--bord-fort); background: #fbfaf7; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; }
.ctx-bloc h3 { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--or-fonce); margin: 0 0 8px; }
.ctx-expediteur { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--bord); }
.ctx-expediteur b { font-size: .92rem; font-weight: 600; }
.ctx-expediteur a { font-size: .74rem; color: var(--texte-doux); word-break: break-all; }
.ctx-liste { list-style: none; margin: 0; padding: 0; }
.ctx-liste li a { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--bord); }
.ctx-liste li:last-child a { border-bottom: 0; }
.ctx-liste .feu { width: 9px; height: 9px; margin-top: 5px; flex: none; }
.ctx-liste span { min-width: 0; display: flex; flex-direction: column; }
.ctx-liste b { font-size: .78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-liste small { font-size: .68rem; color: var(--texte-doux); }
.ctx-liste a:hover b { color: var(--or-fonce); }
.ctx-outils li a { align-items: center; font-size: .8rem; font-weight: 500; }
.ctx-outils svg { width: 16px; height: 16px; color: var(--or-fonce); flex: none; }
.ctx-vide { margin: 8px 0 0; font-size: .74rem; color: var(--texte-doux); }

/* Téléphone : un volet à la fois, retour vers la file depuis la demande. */
@media (max-width: 900px) {
  body.plein .app .contenu { height: auto; overflow: visible; }
  .boite4 { display: block; }
  .bl-vues { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; border-right: 0; border-bottom: 1px solid var(--bord-fort); padding: 10px 12px; overflow: visible; }
  .bl-vues-tete, .bl-alerte, .vues-section, .vues-equipe, .vues-outils { display: none; }
  .bl-vues .vues { display: contents; }
  .bl-vues .vues li a { padding: 5px 10px; font-size: .74rem; border: 1px solid var(--bord-fort); border-radius: 999px; background: #fff; }
  .boite4.voir-detail .bl-vues { display: none; }
  .bl-liste { border-right: 0; }
  .conversations { overflow: visible; }
  .boite4.voir-detail .bl-liste, .boite4:not(.voir-detail) .bl-detail { display: none; }
  .detail-tete { position: static; padding: 12px 14px; flex-wrap: wrap; }
  .detail-titre { flex-basis: calc(100% - 44px); }
  .segments { margin-left: 36px; }
  .detail-retour { display: grid; place-items: center; }
  .detail-corps { padding: 0 14px 30px; overflow: visible; }
}

/* Barre latérale repliée en rail d'icônes (bouton chevron, mémorisé). */
.lat-replier { position: absolute; right: -13px; top: 26px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bord-fort); background: var(--carte); color: var(--encre); display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 5; box-shadow: var(--ombre); }
.lat-replier svg { width: 14px; height: 14px; }
.lat-replier svg:last-child, body.lat-repliee .lat-replier svg:first-child { display: none; }
body.lat-repliee .lat-replier svg:last-child { display: block; }
body.lat-repliee .lat { width: 64px; padding: 18px 10px; }
body.lat-repliee .lat-marque { justify-content: center; padding: 4px 0 14px; }
body.lat-repliee .lat-marque span, body.lat-repliee .lat-section, body.lat-repliee .lat-lien span, body.lat-repliee .lat-inactif em,
body.lat-repliee .lat-qui { display: none; }
body.lat-repliee .lat-lien { justify-content: center; padding: 10px 0; }
body.lat-repliee .lat-lien svg { width: 20px; height: 20px; }
body.lat-repliee .lat-pied { flex-direction: column; gap: 8px; padding: 12px 0 2px; }
@media (max-width: 900px) { .lat-replier { display: none; } body.lat-repliee .lat { width: var(--lat-largeur); padding: 18px 14px; }
  body.lat-repliee .lat-marque span, body.lat-repliee .lat-section, body.lat-repliee .lat-lien span, body.lat-repliee .lat-qui { display: revert; }
  body.lat-repliee .lat-lien { justify-content: flex-start; padding: 9px 10px; } body.lat-repliee .lat-pied { flex-direction: row; } }


/* ---- Écran location (wallboard) --------------------------------------- */
.ecran-horloge { font-variant-numeric: tabular-nums; color: var(--encre); font-weight: 600; margin-left: 4px; }
.tuile-alerte { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-pale), var(--ombre); }
.tuile-alerte .val { color: var(--crit); }
.ecran-grille { display: grid; grid-template-columns: 4fr 4fr 6fr; gap: 14px; align-items: stretch; margin-bottom: 14px; }
@media (max-width: 1100px) { .ecran-grille { grid-template-columns: 1fr 1fr; } .ecran-attention { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ecran-grille { grid-template-columns: 1fr; } }
.bloc-note { font-size: .74rem; color: var(--texte-doux); white-space: nowrap; }
.bloc-note b { color: var(--encre); font-weight: 600; }
.bloc .vide { margin: 18px 0; color: var(--texte-doux); font-size: .9rem; }

.donut-bloc { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.donut { width: 150px; height: 150px; transform: rotate(0deg); }
.donut circle { transition: stroke-dasharray .4s; }
.donut-val { font-size: 9px; font-weight: 700; text-anchor: middle; fill: var(--encre); letter-spacing: -.03em; font-family: var(--sans); }
.donut-lib { font-size: 2.6px; text-anchor: middle; fill: var(--texte-doux); font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; }
.legende-ecran { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legende-ecran li { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--encre); }
.legende-ecran b { margin-left: auto; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.barres { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.barres li { display: grid; grid-template-columns: 110px 1fr 28px; gap: 10px; align-items: center; font-size: .84rem; }
.barre-lib { color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre { height: 12px; background: var(--fond); border-radius: 999px; overflow: hidden; }
.barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--or-fonce)); border-radius: 999px; min-width: 6px; }
.barres b { text-align: right; font-variant-numeric: tabular-nums; }

.attention { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.attention li a { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--bord); }
.attention li:last-child a { border-bottom: none; }
.attention li a:hover .attention-corps b { color: var(--or-fonce); }
.attention .stripe { width: 4px; align-self: stretch; border-radius: 2px; background: var(--or); }
.attention-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attention-corps b { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-corps small { font-size: .74rem; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-age { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: .2em .7em; border-radius: 999px; background: var(--fond); color: var(--encre); white-space: nowrap; }
.attention-age { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.attention-age small { font-size: .62rem; font-weight: 500; opacity: .8; }
.attention-age.att { background: var(--att-pale); color: var(--att); }
.attention-age.crit { background: var(--crit-pale); color: var(--crit); }

/* Tendance : 14 colonnes, deux barres par jour, valeurs au-dessus ; en CSS pour
   que rien ne s'étire (l'ancien SVG en preserveAspectRatio=none déformait tout). */
.histo2 { display: grid; grid-template-columns: repeat(14, 1fr); gap: 10px; align-items: end; height: 130px; padding-top: 16px; }
.h2-jour { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.h2-barres { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--bord-fort); padding: 0 12%; }
.h2-barres i { flex: 1; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; position: relative; }
.h2-recues { background: var(--or-clair); } .h2-traitees { background: var(--or-fonce); }
.h2-barres i[data-v]:not([data-v=""])::after { content: attr(data-v); position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: .66rem; font-style: normal; font-weight: 600; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.h2-jour span { text-align: center; font-size: .68rem; color: var(--texte-doux); white-space: nowrap; }
.h2-auj span { color: var(--encre); font-weight: 600; }
body.ecran-tv .histo2 { height: 200px; } body.ecran-tv .h2-jour span { font-size: .85rem; } body.ecran-tv .h2-barres i { max-width: 34px; }
.btn-outlook { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: var(--or); color: #fff; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; text-align: left; }
.btn-outlook:hover { background: var(--or-fonce); }
.btn-outlook svg { width: 15px; height: 15px; flex: none; color: #fff; }
.histo { width: 100%; height: 150px; display: block; }
.h-recues { fill: var(--or-clair); } .h-traitees { fill: var(--or-fonce); }
.h-val { font-size: 8px; text-anchor: middle; fill: var(--texte-doux); font-family: var(--sans); }
.h-jour { font-size: 8px; text-anchor: middle; fill: var(--texte-doux); font-family: var(--sans); }
.h-auj { fill: var(--encre); font-weight: 600; }
.h-axe { stroke: var(--bord-fort); stroke-width: 1; }
.pastille-recues { background: var(--or-clair); } .pastille-traitees { background: var(--or-fonce); margin-left: 6px; }

/* L'écran tient dans la hauteur de la fenêtre (page « plein ») ; la tendance
   prend ce qui reste, la liste « à prendre » défile si elle déborde. */
.ecran { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 22px 16px; overflow: auto; }
.ecran .page-tete { margin-bottom: 0; }
.ecran .tuiles { margin-bottom: 0; }
.ecran .tuile { padding: 12px 16px 12px; }
.ecran .ecran-grille { margin-bottom: 0; flex: 1 1 0; min-height: 230px; grid-template-rows: minmax(0, 1fr); }
.ecran .ecran-grille .bloc { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ecran .ecran-attention .attention { overflow-y: auto; min-height: 0; }
.ecran .barres li { grid-template-columns: 140px 1fr 28px; }
.ecran .ecran-tendance { flex: none; display: flex; flex-direction: column; }
.ecran .histo2 { height: 120px; }
body.ecran-tv .ecran .histo2 { height: 190px; }

/* Mode écran agence : sans barre latérale, tout en plus grand pour la télé. */
body.ecran-tv { background: var(--fond); }
body.plein.page-nue .contenu { max-width: none; margin: 0; padding: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.ecran-tv .ecran { padding: 22px 28px; gap: 16px; }
body.ecran-tv .page-tete h1 { font-size: 1.9rem; }
body.ecran-tv .page-tete p { font-size: 1.05rem; }
body.ecran-tv .tuile .val { font-size: 3.4rem; }
body.ecran-tv .tuile .lib { font-size: 1.1rem; }
body.ecran-tv .tuile .sub, body.ecran-tv .tuile .tend { font-size: .9rem; }
body.ecran-tv .bloc-tete h2 { font-size: 1.25rem; }
body.ecran-tv .donut-bloc { grid-template-columns: 200px 1fr; }
body.ecran-tv .donut { width: 200px; height: 200px; }
body.ecran-tv .legende-ecran li { font-size: 1.05rem; } body.ecran-tv .legende-ecran b { font-size: 1.5rem; }
body.ecran-tv .barres li { font-size: 1rem; grid-template-columns: 150px 1fr 36px; }
body.ecran-tv .attention-corps b { font-size: 1.1rem; } body.ecran-tv .attention-corps small { font-size: .9rem; }
body.ecran-tv .attention-age { font-size: 1rem; }
body.ecran-tv .histo { height: 200px; }

/* ---- Administration : sous-navigation + contenu (20/09/2026) ---------- */
.admin { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .admin { grid-template-columns: 1fr; } }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 26px; }
.admin-nav-titre { margin: 0 12px 8px; font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--or-fonce); }
.admin-nav a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--encre); border-left: 3px solid transparent; }
.admin-nav a b { font-size: .84rem; font-weight: 500; }
.admin-nav a small { font-size: .68rem; color: var(--texte-doux); line-height: 1.3; }
.admin-nav a:hover { background: rgb(37 37 38 / .05); }
.admin-nav a.actif { background: var(--carte); border-left-color: var(--or); box-shadow: var(--ombre); }
.admin-nav a.actif b { font-weight: 600; }
@media (max-width: 900px) { .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; } .admin-nav-titre { display: none; } .admin-nav a small { display: none; } .admin-nav a { border: 1px solid var(--bord-fort); border-radius: 999px; padding: 6px 12px; } .admin-nav a.actif { border-color: var(--or); } }
.admin-corps { min-width: 0; }
.admin-corps .page-tete { margin-bottom: 16px; }
.admin-corps .carte { border-radius: var(--rayon); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.admin-corps .carte h2, .admin-corps h2 { font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--encre); }
.admin-corps table { font-size: .86rem; }
.admin-corps thead th { border-bottom: 1px solid var(--bord-fort); }
.admin-texte { margin: 0 0 12px; color: var(--texte-doux); font-size: .9rem; max-width: 70ch; }
.admin-suivi li { font-size: .86rem; }
.tuiles-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tuiles-3 { grid-template-columns: 1fr; } }

/* Liste des membres */
.membres { list-style: none; margin: 0; padding: 0; }
.membre { display: grid; grid-template-columns: 40px minmax(180px, 1.4fr) minmax(170px, 1.2fr) minmax(90px, .7fr) minmax(200px, 1.3fr) auto; gap: 14px; align-items: center; padding: 12px 6px; border-top: 1px solid var(--bord); text-decoration: none; color: inherit; }
.membres li:first-child .membre { border-top: 0; }
.membre:hover { background: #fbfaf7; }
.membres li.inactif .membre { opacity: .55; }
.membre .avatar { width: 40px; height: 40px; font-size: .82rem; }
.avatar-role-super { background: var(--encre); color: var(--or); } .avatar-role-admin { background: var(--or-fonce); color: #fff; } .avatar-role-conseiller { background: var(--or-clair); color: var(--encre); }
.membre-identite { min-width: 0; display: flex; flex-direction: column; }
.membre-identite b { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membre-identite b small { font-weight: 500; color: var(--texte-doux); font-size: .74rem; }
.membre-identite small { font-size: .76rem; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membre-role { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.role-super { background: var(--encre); color: var(--or); } .chip.role-admin { background: var(--or-fonce); color: #fff; } .chip.role-conseiller { background: var(--or-pale, #efe9d9); color: var(--or-fonce); }
.chip-neutre { background: var(--fond); color: var(--texte-doux); }
.membre-agence { font-size: .82rem; color: var(--texte-doux); }
.membre-etat { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.membre-etat .feu { width: 9px; height: 9px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.membre-etat small { color: var(--texte-doux); font-size: .72rem; padding-left: 15px; }
.membre-gerer { font-size: .76rem; font-weight: 600; color: var(--or-fonce); white-space: nowrap; }
@media (max-width: 1000px) { .membre { grid-template-columns: 40px 1fr auto; } .membre-role, .membre-agence, .membre-etat { grid-column: 2 / -1; } }