/* CRM Gestion — couche de compatibilité au-dessus de charte.css (charte commune Eco Assistance, chargée avant ce fichier).
   Aucune couleur ni police n'est définie ici : tout vient des variables de charte.css. Les anciens noms de classes du CRM
   (.card .pill .kpi .tabs .btn.sec …) sont conservés et redirigés vers les tokens de la charte. */
:root{--bg:var(--fond);--ink:var(--encre);--ink2:var(--encre);--ink3:var(--doux);--line:var(--trait);--accent-dark:var(--marine);--accent-soft:var(--pale);
      --brand-grad:var(--degrade);--warn:var(--ambre);--warn-soft:var(--ambre-pale);--crit:var(--rouge);--crit-soft:var(--rouge-pale);
      --copper:var(--ambre);--copper-soft:var(--ambre-pale);--blue:var(--marine);--blue-soft:var(--pale);--ok:var(--vert);--ok-soft:var(--vert-pale)}
main{max-width:1240px;padding:26px 28px 80px}
h1{font:900 26px/1.15 var(--sans);text-transform:uppercase;letter-spacing:.01em;color:var(--accent);margin:0 0 16px;text-wrap:balance}
h1 .muted{text-transform:none;letter-spacing:0;font-weight:400}
h2{font:900 13px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin:22px 0 10px}
h3{font:700 14px/1.3 var(--sans);color:var(--accent);margin:14px 0 6px}
.card{background:var(--surface);border:2px solid var(--liseret);border-radius:12px;padding:16px 18px;margin-bottom:16px;box-shadow:var(--ombre)}
.grid{display:grid;gap:12px}.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
table{font-size:14px}th{padding:0 9px 8px}td{padding:9px 9px}
.tbl{overflow-x:auto}
.pill{display:inline-block;border-radius:6px;padding:3px 8px;font:700 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.04em;background:var(--pale);color:var(--accent);white-space:nowrap;margin:1px 2px 1px 0}
.pill.terrain{background:var(--pale);color:var(--marine)}.pill.commercial{background:var(--ambre-pale);color:var(--ambre)}.pill.pose{background:var(--vert-pale);color:var(--vert)}
.pill.dossier{background:var(--ambre-pale);color:var(--ambre)}.pill.sortie{background:var(--rouge-pale);color:var(--rouge)}.pill.urgent{background:var(--rouge);color:#fff}
form.inline{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
label{margin:0 0 4px}
input,select,textarea{font:400 14px/1.4 var(--sans);padding:8px 10px;border:1.5px solid var(--trait);border-radius:6px;background:var(--surface);color:var(--encre);width:100%;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azur);outline-offset:-1px;border-color:var(--azur)}
textarea{min-height:70px}
.field{min-width:140px;flex:1;position:relative}
button,.btn{display:inline-block;font:700 12.5px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.05em;padding:9px 16px;border-radius:8px;border:2px solid var(--plein);background:var(--plein);color:#fff;cursor:pointer;white-space:nowrap;box-shadow:0 3px 10px rgba(4,76,132,.25)}
button:hover,.btn:hover{background:#0a5d9e;border-color:#0a5d9e;text-decoration:none}
button.sec,.btn.sec{background:var(--surface);color:var(--accent);border-color:var(--liseret);box-shadow:none}button.sec:hover,.btn.sec:hover{border-color:var(--azur);background:var(--surface)}
button.danger{background:var(--rouge);border-color:var(--rouge)}
button.small,.btn.small{padding:5px 10px;font-size:11px}
.muted{color:var(--doux);font-size:13px}.right{text-align:right}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.kpi .k{background:var(--plein);border-radius:10px;padding:9px 10px 8px;text-align:center;box-shadow:0 3px 10px rgba(4,76,132,.16)}
.kpi .v{font:700 22px/1.05 var(--sans);color:#fff;font-variant-numeric:tabular-nums}.kpi .l{margin-top:3px;font:700 9.5px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.05em;color:#fff;opacity:.9}
.journal li{padding:6px 0;border-bottom:1px solid var(--trait);font-size:14px}.journal .when{color:var(--doux);font-size:12px;margin-right:8px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;padding:4px;background:var(--pale);border-radius:10px;width:fit-content;max-width:100%}
.tabs a{color:var(--marine);padding:7px 13px;border-radius:7px;font:700 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tabs a:hover{text-decoration:none;background:rgba(255,255,255,.7)}.tabs a.on{background:var(--azur);color:#fff;box-shadow:0 2px 8px rgba(19,175,240,.35)}
.tabs a .n{background:rgba(255,255,255,.55);color:var(--marine);border-radius:999px;padding:1px 7px;margin-left:5px;font-size:11px}.tabs a.on .n{background:rgba(255,255,255,.3);color:#fff}
.msg{background:var(--vert-pale);color:var(--vert);border-left:4px solid var(--vert);padding:10px 14px;border-radius:6px;margin-bottom:12px}
.warnbox{background:var(--ambre-pale);color:var(--ambre);border-left:4px solid var(--ambre);padding:10px 14px;border-radius:6px;margin-bottom:12px}
.mob-list .item{display:block;background:var(--surface);border:2px solid var(--liseret);border-radius:12px;padding:12px 14px;margin-bottom:10px;color:var(--encre)}
.mob-list .item .adr{font-weight:700;font-size:16px;color:var(--marine)}.mob-list .item.done{opacity:.55}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--trait);display:flex;justify-content:space-around;padding:8px 0;z-index:10}
.bottom-nav a{color:var(--doux);font:700 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.05em;text-align:center}.bottom-nav a.on{color:var(--azur)}
.login-logo{display:block;margin:0 auto 14px;height:70px}
.radio-row{display:flex;flex-wrap:wrap;gap:6px}.radio-row label{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--trait);border-radius:999px;padding:6px 10px;font:600 13px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--encre);background:var(--surface);cursor:pointer;margin:0}
.radio-row input{width:auto}
.photos img{width:90px;height:90px;object-fit:cover;border-radius:6px;margin:3px}
.widget h3{margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline;font:900 13px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.04em}.widget h3 .n{font-size:22px;color:var(--azur);font-weight:700}
details summary{cursor:pointer;color:var(--doux);font-size:13px}
html,body{overflow-x:hidden;max-width:100%}
main{overflow-x:hidden}
.inline>*{max-width:100%}
/* en-tête charte : compléments (menu utilisateur, débordement des onglets) */
/* les onglets reviennent a la ligne : un overflow ici couperait les menus deroulants */
.entete .onglets{flex-wrap:wrap;row-gap:2px;overflow:visible}
.entete .me{color:var(--doux);font-size:12.5px;white-space:nowrap}.entete .me a{color:var(--accent)}
.entete .dedans{min-height:64px;padding:0 20px}.logo img{height:36px}
@media (max-width:700px){.entete .me{display:none}main{padding:12px 10px 90px}th,td{padding:6px}.card{padding:12px}
 .field{min-width:0!important;flex-basis:100%!important}form.inline{gap:8px}h1{font-size:19px;word-break:break-word}
 .grid.c2,.grid.c3{grid-template-columns:1fr}.radio-row label{font-size:14px;padding:8px 12px}
 .entete .dedans{min-height:52px;gap:8px;padding:0 10px}.logo img{height:28px}.applis{display:none}}
/* pastilles cliquables (changement d'étape depuis la liste) */
details.pop{display:inline-block;position:relative}details.pop>summary{list-style:none;cursor:pointer}details.pop>summary::-webkit-details-marker{display:none}
details.pop[open]>summary{outline:2px solid var(--azur)}
.popform{position:absolute;z-index:30;right:0;top:26px;background:var(--surface);border:2px solid var(--liseret);border-radius:10px;box-shadow:0 10px 30px rgba(4,76,132,.18);padding:10px;min-width:280px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.popform select,.popform input{width:100%;font-size:13px;padding:6px 8px}
.ops-table td{vertical-align:top}.ops-table .pill i{font-style:normal;opacity:.75;text-transform:none;font-weight:500}
/* suggestions de recherche */
.sugg{position:absolute;z-index:40;background:var(--surface);border:2px solid var(--liseret);border-radius:10px;box-shadow:0 10px 30px rgba(4,76,132,.18);max-height:340px;overflow:auto;min-width:320px}
.sugg a{display:block;padding:7px 10px;color:var(--encre);border-bottom:1px solid var(--trait);text-decoration:none}.sugg a:hover,.sugg a.sel{background:var(--pale)}.sugg a .t{font-size:10px;color:var(--doux);text-transform:uppercase;letter-spacing:.06em;margin-right:6px}.sugg a .s{color:var(--doux);font-size:12px;display:block}
.sugg .info{padding:6px 10px;color:var(--doux);font-size:12px}
footer.legal{margin:30px 0 10px;text-align:center;font-size:12px;color:var(--doux)}footer.legal a{color:var(--doux)}
.tbl.ops{overflow:visible}.tbl.ops table{min-width:0}
/* LinkedIn / Prospection */
.li{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:3px 8px;font:700 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.04em;background:var(--pale);color:var(--accent);white-space:nowrap}
.li.trouve{background:var(--vert-pale);color:var(--vert)}.li.introuvable{background:var(--fond);color:var(--doux)}.li.a_confirmer{background:var(--ambre-pale);color:var(--ambre)}.li.a_chercher{background:var(--pale);color:var(--doux)}

/* Tableau de bord : on privilégie la vue d'ensemble. Des cartes plus petites, trois de front sur un
   écran large, une hauteur bornée avec défilement interne : on voit tous les sujets sans dérouler. */
.accueil{grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:10px}
.accueil .widget{padding:11px 13px}
.accueil .widget h3{font-size:11.5px;margin-bottom:5px}
.accueil .widget h3 .n{font-size:17px}
.accueil .widget > div{font-size:13px;line-height:1.42;padding:1px 0}
.accueil .widget .pill{font-size:10px;padding:2px 6px}
.accueil .widget{max-height:318px;overflow:auto}
.accueil .widget h3{position:sticky;top:0;background:#fff;z-index:1;padding:2px 0 4px;margin-top:0}
.accueil .widget p.muted{font-size:12px;margin:4px 0 0}
body.compact .accueil .widget{max-height:220px}
body.compact .tbl td,body.compact .tbl th{padding:4px 7px;font-size:12.5px}

/* Menus déroulants de la barre : moins d'onglets, chacun ouvrant ce qu'il contient. */
.onglets .menu{position:relative;display:inline-block}
.onglets .menu > a::after{content:" ▾";font-size:10px;opacity:.75}
.onglets .menu .liste{display:none;position:absolute;left:0;top:100%;z-index:60;min-width:214px;
  background:#fff;border-radius:10px;box-shadow:0 10px 28px rgba(4,76,132,.22);padding:6px;border:1px solid var(--trait)}
.onglets .menu:hover .liste,.onglets .menu:focus-within .liste{display:block}
.onglets .menu .liste a{display:block;padding:7px 10px;border-radius:7px;color:var(--marine);text-transform:none;
  letter-spacing:0;font-weight:600;font-size:13px;white-space:nowrap}
.onglets .menu .liste a:hover{background:var(--pale)}
.onglets .menu .liste .titre{padding:6px 10px 2px;font:700 10px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--doux)}
.onglets .menu .liste hr{border:0;border-top:1px solid var(--trait);margin:5px 4px}

/* ------------------------------------------------------------------ téléphone
   Le CRM est utilisé debout dans une cour d'immeuble, à une main. Sur téléphone on lui donne
   la forme d'une application : barre d'onglets en bas au pouce, en-tête réduite à l'essentiel,
   filtres repliés. Installé depuis « Ajouter à l'écran d'accueil », il s'ouvre sans barre de
   navigateur — d'où le calcul des marges avec env(safe-area-inset-*), pour ne pas passer sous
   l'encoche ni sous la barre de geste. */
.barre-bas, .feuille { display: none; }

@media (max-width: 760px) {
  /* l'en-tête ne garde que le logo et l'identité : les onglets descendent en bas */
  .entete .onglets, .entete .applis { display: none; }
  .entete .dedans { min-height: 46px; justify-content: space-between; padding: 0 12px; }
  .entete .me { display: block; font-size: 11.5px; }
  .logo img { height: 24px; }

  main { padding: 10px 14px calc(78px + env(safe-area-inset-bottom)); }

  .barre-bas {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--trait);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(4, 76, 132, .10);
  }
  .barre-bas a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; color: var(--doux); font: 600 10px/1.1 var(--sans);
    letter-spacing: .02em; text-decoration: none; border-radius: 10px;
  }
  .barre-bas a .i { font-size: 19px; line-height: 1; }
  .barre-bas a.actif { color: var(--azur); }
  .barre-bas a:active { background: var(--pale); }

  /* le « Plus » : une feuille qui remonte du bas, comme sur mobile */
  .feuille { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(4, 76, 132, .32);
             opacity: 0; pointer-events: none; transition: opacity .18s; }
  .feuille.ouverte { opacity: 1; pointer-events: auto; }
  .feuille .dedans {
    position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface);
    border-radius: 18px 18px 0 0; padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .22s ease-out;
    max-height: 78vh; overflow: auto;
  }
  .feuille.ouverte .dedans { transform: none; }
  .feuille .poignee { width: 38px; height: 4px; border-radius: 2px; background: var(--trait); margin: 6px auto 12px; }
  .feuille a { display: block; padding: 13px 6px; color: var(--marine); font: 600 15px/1 var(--sans);
               border-bottom: 1px solid var(--trait); text-decoration: none; }
  .feuille a:last-child { border-bottom: 0; color: var(--rouge); }

  /* les filtres : repliés, sinon ils occupent tout l'écran avant la première ligne de résultat */
  /* les filtres sur deux colonnes : huit champs tiennent en quatre lignes au lieu de huit, et la
     première ligne de résultats remonte dans l'écran. La recherche garde toute la largeur. */
  form.card.inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; }
  form.card.inline .field { flex-basis: auto !important; max-width: none !important; margin: 0; }
  /* le champ de recherche prend toute la largeur ; « :first-child » ne suffit pas, le premier
     enfant du formulaire est souvent un input caché */
  form.card.inline > div.field:first-of-type,
  form.card.inline .field:has(input[name="q"]),
  form.card.inline .field:has(textarea),
  form.card.inline > button { grid-column: 1 / -1; }
  form.card.inline label { font-size: 10.5px; }
  /* confort de saisie : 16px évite que Safari zoome sur le champ au toucher */
  input, select, textarea { font-size: 16px !important; }
  .btn, button { min-height: 42px; }
  h1 { font-size: 20px; }
  .kpi { gap: 8px; }
  .kpi .k { min-width: 0; flex: 1 1 46%; }
  /* un tableau large se fait glisser, il ne déforme pas la page */
  .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* largeur naturelle : un tableau à trois colonnes tient dans l'écran, un tableau large se fait
     glisser. Imposer une largeur minimale ferait déborder même les petits. */
  .tbl table { min-width: max-content; }
}

/* ───────────────────────────────────────────────────────────── numéros de téléphone
   Un numéro doit se lire d'un coup d'œil et s'appeler d'un doigt. Le lien porte le format
   international (+33…) pour que tous les téléphones le composent ; l'écran, lui, montre les
   groupes de deux chiffres. Sur mobile la zone tactile fait 44 px : c'est le minimum pour
   qu'un pouce ne rate pas sa cible dans une chaufferie mal éclairée. */
a.tel {
  display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600; color: var(--accent); text-decoration: none;
  padding: 1px 3px; border-bottom: 1px dotted currentColor;
}
a.tel:hover, a.tel:focus { background: var(--pale); border-radius: 5px; text-decoration: none; }
a.tel::before { content: "☎"; margin-right: 5px; font-weight: 400; opacity: .6; }
@media (max-width: 760px) {
  a.tel { padding: 9px 12px; min-height: 44px; line-height: 26px; margin: 2px 4px 2px 0;
          border: 2px solid var(--liseret); border-radius: 9px; background: var(--surface); }
}

/* ───────────────────────────────────────────── les deux portes d'entrée du CRM
   Immeubles et Gestionnaires sont les deux seules pages qu'on ouvre vingt fois par jour.
   Elles sortent donc de la barre d'onglets, où elles avaient la même taille que « Modèles ». */
nav.principaux { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
nav.principaux a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; text-decoration: none;
  font: 700 13px/1 var(--sans); letter-spacing: .02em;
  color: var(--accent); background: var(--surface); border: 2px solid var(--liseret);
}
nav.principaux a .ic { font-size: 17px; line-height: 1; }
nav.principaux a:hover { border-color: var(--azur); text-decoration: none; }
nav.principaux a.actif {
  color: #fff; border-color: transparent; background: var(--plein, #044C84);
  background-image: linear-gradient(100deg, var(--azur), var(--accent));
}
@media (max-width: 900px) {
  nav.principaux { width: 100%; order: 3; margin-top: 6px; }
  nav.principaux a { flex: 1 1 0; justify-content: center; padding: 13px 10px; font-size: 13.5px; }
}

/* ─────────────────────────────────────────────────────── bande déroulante de veille CEE
   Elle passe sous l'en-tête sur toutes les pages. Une fiche abrogée ou un barème qui change
   doit se voir en travaillant, pas quand on pense à aller le chercher. Le ruban est dupliqué
   dans le gabarit : la piste défile sur sa moitié puis repart, sans saut visible. */
.bandeau-cee { background: var(--marine, #044C84); overflow: hidden; }
:root:not([data-theme="light"]) .bandeau-cee { background: #11385a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bandeau-cee { background: #11385a; } }
:root[data-theme="dark"] .bandeau-cee { background: #11385a; }
.bandeau-cee > a { display: flex; align-items: center; gap: 12px; text-decoration: none;
                   color: #fff; padding: 0; }
.bandeau-cee > a:hover { text-decoration: none; }
.bandeau-cee .etiquette {
  flex: 0 0 auto; background: var(--azur, #13AFF0); color: #fff;
  font: 800 10px/1 var(--sans); letter-spacing: .12em; padding: 9px 12px; }
.bandeau-cee .defile { flex: 1 1 auto; overflow: hidden; }
.bandeau-cee .piste {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: defile-cee 70s linear infinite; }
.bandeau-cee:hover .piste, .bandeau-cee:focus-within .piste { animation-play-state: paused; }
.bandeau-cee .item {
  font: 500 12.5px/1 var(--sans); color: #eaf4fb; padding: 9px 0; margin-right: 46px; }
.bandeau-cee .item::before { content: "●"; color: var(--azur, #13AFF0); margin-right: 10px;
                             font-size: 9px; vertical-align: 2px; }
@keyframes defile-cee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Un texte qui défile est illisible pour qui a besoin de temps, et pénible pour qui est
   sensible au mouvement : on l'arrête et on laisse la ligne défiler à la main. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-cee .piste { animation: none; }
  .bandeau-cee .defile { overflow-x: auto; }
}