/* ══════════════════════════════════════════════════════════════════════
   THÈME ARES — la peau du logiciel
   ──────────────────────────────────────────────────────────────────────
   Une seule feuille, posée par-dessus les styles de chaque page : le
   dégradé de l'écran d'entrée devient le fond de l'application, et les
   surfaces de travail se posent dessus en verre teinté bordé d'or.

   Tout passe par des variables. Le mode clair ne réécrit pas les règles,
   il change les valeurs → un seul jeu de composants, deux ambiances.
   Le bouton de la barre bascule la classe « clair » sur <body>, et le
   choix est mémorisé par appareil.

   Retirer la balise <link> de ce fichier rend la page exactement comme
   avant : rien n'est modifié dans les pages elles-mêmes.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* marque */
  --ares-sauge:#6b8264;
  --ares-teal:#0e403f;
  --ares-lime:#84CC16;
  --ares-or:#c9a961;

  /* fond profond, repris de l'écran d'entrée */
  --ares-fond-haut:#1b5a4e;
  --ares-fond-milieu:#0e403f;
  --ares-fond-bas:#08211f;

  /* surfaces et textes */
  --ares-verre:rgba(255,255,255,.07);
  --ares-verre-fort:rgba(255,255,255,.115);
  --ares-trait:rgba(201,169,97,.34);
  --ares-sep:rgba(255,255,255,.13);
  --ares-texte:#f4f9f4;
  --ares-texte-doux:#c3d8d4;
  --ares-tete-colonne:#e0c98a;
  --ares-champ:rgba(0,0,0,.24);
  --ares-ombre:0 10px 28px rgba(0,0,0,.24);
  --ares-fond-plat:var(--ares-fond-bas);
}

/* ── mode clair : mêmes composants, valeurs inversées ────────────────── */
body.clair{
  --ares-verre:#ffffff;
  --ares-verre-fort:#f2f6f1;
  --ares-trait:rgba(14,64,63,.16);
  --ares-sep:rgba(14,64,63,.11);
  --ares-texte:#1f2e2c;
  --ares-texte-doux:#5c6f6c;
  --ares-tete-colonne:var(--ares-teal);
  --ares-champ:#ffffff;
  --ares-ombre:0 2px 10px rgba(14,64,63,.09);
  --ares-fond-plat:#eef3ee;
}

/* ══ fond de page ═════════════════════════════════════════════════════ */
html{min-height:100%}
body{
  background-color:var(--ares-fond-plat) !important;
  background-image:radial-gradient(120% 72% at 50% 0%,
      var(--ares-fond-haut) 0%,var(--ares-fond-milieu) 44%,var(--ares-fond-bas) 100%) !important;
  background-attachment:fixed !important;
  color:var(--ares-texte) !important;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
body.clair{
  background-image:none !important;
}


/* ══ barre du haut ════════════════════════════════════════════════════ */
.ek-nav{
  background:rgba(8,33,31,.74) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ares-trait) !important;
  box-shadow:none !important;
}
body.clair .ek-nav{background:var(--ares-teal) !important}
.ek-nav .ek-titre,.ek-nav .bonjour,.ek-nav .ek-counter{color:#fff !important}
.ek-nav .ek-btn{
  background:var(--ares-verre) !important;color:#fff !important;
  border:1px solid var(--ares-trait) !important;border-radius:9px !important;
}
.ek-nav .ek-btn:hover{background:var(--ares-verre-fort) !important;color:var(--ares-lime) !important}
.ek-nav-btns{background:transparent}

/* Barre du haut : texte plus grand, et les traits du menu en OR.
   La salutation était à 15 px sur téléphone et les traits en blanc — Marc les
   veut dorés, comme les filets et les titres de section. */
.ek-nav .bonjour{font-size:clamp(17px,4.6vw,21px) !important}
.ek-nav .ek-titre{font-size:clamp(16px,4.2vw,19px) !important}
.ek-nav .ek-btn{font-size:clamp(13px,3.4vw,15px) !important}
.ek-burger .bars i{background:var(--ares-or) !important}
.ek-burger{color:var(--ares-or) !important}

/* Sur un écran étroit, un prénom long ne doit toucher ni le logo ni le menu :
   on réduit d'un cran plutôt que de laisser le texte passer dessous. */
@media (max-width:640px){
  .ek-nav .bonjour{font-size:18px !important}
  .ek-nav .ek-titre{font-size:15px !important}
}
@media (max-width:360px){
  .ek-nav .bonjour{font-size:16px !important}
  .ek-nav .ek-logo{height:32px !important}
}


/* ══ titres de page ═══════════════════════════════════════════════════ */
.ek-titre-page,.page-titre,h1,h2.titre{
  color:var(--ares-texte) !important;
}
.ek-titre-page::after,.page-titre::after{
  content:"";display:block;width:66px;height:2px;background:var(--ares-or);
  opacity:.8;margin:11px auto 0;
}

/* ══ conteneurs : transparents, le dégradé respire ════════════════════ */
.container,.conteneur,.page,.wrapper,.wrap{background:transparent !important}

/* ══ surfaces : cartes, panneaux, blocs ═══════════════════════════════ */
.carte,.card,.panel,.panneau,.box,.bloc,.block,.section-card,.kpi{
  background:var(--ares-verre) !important;
  border:1px solid var(--ares-trait) !important;
  border-radius:14px !important;
  color:var(--ares-texte) !important;
  box-shadow:var(--ares-ombre) !important;
}
.carte:hover,.card:hover{background:var(--ares-verre-fort) !important}

/* les tuiles de l'accueil gardent leur relief */
.grille .carte{
  border-left:3px solid transparent !important;
  transition:transform .16s,background .16s,border-color .16s !important;
}
.grille .carte:hover{
  border-left-color:var(--ares-or) !important;
  transform:translateY(-2px);
  background:var(--ares-verre-fort) !important;
}
.carte.vide{opacity:.72;border-style:dashed !important}

/* ══ tableaux ═════════════════════════════════════════════════════════ */
table{background:transparent !important;color:var(--ares-texte) !important;border-collapse:collapse}
thead th,th{
  color:var(--ares-tete-colonne) !important;
  background:rgba(8,33,31,.8) !important;
  border-bottom:1px solid var(--ares-trait) !important;
  font-weight:800 !important;letter-spacing:.09em !important;
  font-size:11.5px !important;text-transform:uppercase;
}
body.clair thead th,body.clair th{background:var(--ares-verre-fort) !important}
tbody td,td{
  border-bottom:1px solid var(--ares-sep) !important;
  color:var(--ares-texte) !important;background:transparent !important;
}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.03) !important}
tbody tr:hover td{background:rgba(132,204,22,.1) !important}
.doux,.muted,.text-muted,.c-ref,.c-agent{color:var(--ares-texte-doux) !important}

/* ══ formulaires ═════════════════════════════════════════════════════ */
input,select,textarea{
  background:var(--ares-champ) !important;
  border:1px solid var(--ares-trait) !important;
  color:var(--ares-texte) !important;border-radius:9px !important;
}
input::placeholder,textarea::placeholder{color:var(--ares-texte-doux) !important;opacity:.85}
input:focus,select:focus,textarea:focus{
  outline:none !important;border-color:var(--ares-lime) !important;
  box-shadow:0 0 0 3px rgba(132,204,22,.16) !important;
}
option{background:var(--ares-fond-bas);color:var(--ares-texte)}
body.clair option{background:#fff;color:var(--ares-texte)}
label{color:var(--ares-texte-doux) !important}
button, .btn, .bouton, .ek-btn-primaire{
  font-family:inherit;
}
/* Tous les boutons passent en verre bordé d'or, sans exception de sélecteur :
   une règle trop contournée perdait contre les styles écrits dans les pages
   (ex. .actions button{background:#f6f9f5;color:#2f5d3a}). */
button{
  background:var(--ares-verre) !important;
  border:1px solid var(--ares-trait) !important;
  color:var(--ares-texte) !important;
  border-radius:9px;
}
button:hover{background:var(--ares-verre-fort) !important;border-color:var(--ares-or) !important}
/* on rend à chacun ce qui lui appartient : le burger reste un trait, la croix
   de fermeture une croix, la bascule et le chat gardent leur forme */
.ek-burger,.fc-x,.chat-fab,.mp-mini,.mp-mascotte,.mp-close{
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
.mp-close{background:#fff !important;color:#6b7280 !important}
.chat-fab{background:var(--ares-lime) !important;color:#08211f !important;border-radius:50% !important}
.mp-mini{background:#fff !important;border-radius:50% !important}
/* le bouton d'action principale reste lime, c'est la signalétique d'action */
.btn-primaire,.bouton-primaire,.ek-btn.lime,.primary{
  background:var(--ares-lime) !important;color:#08211f !important;
  border-color:var(--ares-lime) !important;font-weight:800 !important;
}

/* ══ popups ══════════════════════════════════════════════════════════ */
.modal-overlay,.modal,.overlay{
  background:rgba(4,18,17,.72) !important;backdrop-filter:blur(4px);
}
.modal-card,.modal-content,.modal-box{
  background:linear-gradient(180deg,#14494266 0%,var(--ares-verre) 100%),
             var(--ares-fond-milieu) !important;
  border:1px solid var(--ares-trait) !important;
  color:var(--ares-texte) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.5) !important;
}
body.clair .modal-card,body.clair .modal-content,body.clair .modal-box{
  background:#fff !important;border-color:var(--ares-trait) !important;
}
.modal-card h1,.modal-card h2,.modal-card h3,.modal-card .section-h{color:var(--ares-texte) !important}
.modal-card .section-h{
  color:var(--ares-or) !important;text-transform:uppercase;letter-spacing:.12em;
}

/* ══ pastilles et états ══════════════════════════════════════════════ */
.pastille,.badge,.pill,.tag,.statut{
  background:var(--ares-verre) !important;border-color:var(--ares-trait) !important;
  color:var(--ares-texte) !important;
}
.pastille.ok,.badge.ok{color:var(--ares-lime) !important;border-color:rgba(132,204,22,.45) !important;
  background:rgba(132,204,22,.12) !important}
.pastille.att,.badge.att{color:#e8d9a8 !important;border-color:rgba(201,169,97,.45) !important;
  background:rgba(201,169,97,.13) !important}

/* ══ liens, filets, séparateurs ══════════════════════════════════════ */
a{color:var(--ares-lime)}
hr,.separateur{border-color:var(--ares-sep) !important}
/* Titres de section : plus grands, et SUR UNE SEULE LIGNE même sur un petit
   téléphone. C'est le lettrage qui mangeait la largeur : à 12 px avec un
   espacement de 0.18em, « LOGICIELS DE DÉMONSTRATION » occupait 250 px. En
   resserrant l'espacement à 0.06em, la même ligne tient à 17 px.
   La taille suit la largeur de l'écran (mesurée : 320→12,5 px, 360→14 px,
   390→15 px, 412→16 px), et l'ellipse sert de filet si un titre plus long
   arrive un jour. */
.univers-titre,.univers h2,.groupe h2{
  color:var(--ares-or) !important;text-transform:uppercase;font-weight:800;
  font-size:clamp(13px,4.4vw,18px);letter-spacing:.06em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.univers-barre{background:var(--ares-or) !important;opacity:.7}

/* les chiffres mis en avant passent au lime */
.chiffre,.kpi .n,.stat-value,.grand-chiffre{color:var(--ares-lime) !important}

/* ══ pieds de page ═══════════════════════════════════════════════════ */
.pied,footer{color:var(--ares-texte-doux) !important;background:transparent !important}
.pied a,footer a{color:var(--ares-sauge) !important}

/* la bulle de message garde son fond clair : elle doit rester lisible */
.mp-bulle{box-shadow:0 10px 30px rgba(0,0,0,.45) !important}

/* la carte géographique n'est pas repeinte : tuiles et tracés gardent leurs couleurs */
#map,.leaflet-container{background:#0a2624 !important}
.leaflet-bar a{background:var(--ares-verre) !important;color:var(--ares-texte) !important}


/* ══════════════════════════════════════════════════════════════════════
   TEXTE ET BLOCS HÉRITÉS
   ──────────────────────────────────────────────────────────────────────
   Les pages écrivent leurs textes en dur (color:#1a1a1a, #333…). Sur un
   fond sombre ils disparaissent : il faut reprendre la couleur à
   l'intérieur des surfaces, sans toucher aux accents volontaires.
   ══════════════════════════════════════════════════════════════════════ */
.card,.carte,.panel,.panneau,.box,.bloc,.block,.modal-card,.modal-content,.modal-box,
.card p,.card li,.card span,.card div,.carte p,.carte li,.panel p,.panel td,.panel th,
.box p,.box li,.bloc p,.bloc li,.block p,.block li{
  color:var(--ares-texte) !important;
}
.card h1,.card h2,.card h3,.card h4,.carte h1,.carte h2,.carte h3,
.panel h1,.panel h2,.panel h3,.box h1,.box h2,.box h3{
  color:var(--ares-texte) !important;
}
.card a,.carte a,.panel a,.box a,.bloc a{color:var(--ares-lime) !important}
.card strong,.card b,.carte strong,.panel strong,.box strong,.bloc strong,
.card .gras{color:var(--ares-texte) !important}
.card em,.carte em{color:var(--ares-texte-doux) !important}

/* les encadrés d'information : version sombre, plus de bloc clair plaqué */
.note{
  background:rgba(201,169,97,.13) !important;
  border-left:4px solid var(--ares-or) !important;
  color:var(--ares-texte) !important;
}
.note *{color:var(--ares-texte) !important}
.astuce{
  background:rgba(132,204,22,.11) !important;
  border-left:4px solid var(--ares-lime) !important;
  color:var(--ares-texte) !important;
}
.astuce *{color:var(--ares-texte) !important}

/* le sommaire de l'aide : des entrées en verre, plus des pavés blancs */
.som a{
  background:var(--ares-verre) !important;
  color:var(--ares-texte) !important;
  border:1px solid transparent !important;
}
.som a:hover{
  background:var(--ares-verre-fort) !important;
  border-color:var(--ares-trait) !important;
  color:var(--ares-lime) !important;
}

/* code et libellés techniques */
code,kbd,pre{
  background:var(--ares-champ) !important;color:#e6d6a8 !important;
  border:1px solid var(--ares-sep) !important;
}

/* tableaux imbriqués dans une carte : on ne double pas le fond */
.card table,.panel table,.carte table{background:transparent !important}

/* les lignes de statut colorées des pages métier gardent leur sens */
.ouvert,.ok,.succes,.gagne{color:var(--ares-lime) !important}
.ferme,.perdu,.erreur{color:#e08a72 !important}
.attente,.attent{color:#e8d9a8 !important}

/* ══════════════════════════════════════════════════════════════════════
   ÉCRAN DE CONNEXION
   ──────────────────────────────────────────────────────────────────────
   C'est la première chose que voit l'équipe : elle doit être dans le même
   monde que le reste, pas une carte blanche posée sur un fond sombre.
   ══════════════════════════════════════════════════════════════════════ */
.login-card{
  background:var(--ares-verre) !important;
  border:1px solid var(--ares-trait) !important;
  color:var(--ares-texte) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.42) !important;
  backdrop-filter:blur(10px);
}
.login-card .logo .t{color:var(--ares-texte) !important;letter-spacing:.06em}
.login-card .logo .s{color:var(--ares-texte-doux) !important}
.login-card label{color:var(--ares-texte-doux) !important}
.login-card input{
  background:var(--ares-champ) !important;
  border:1px solid var(--ares-trait) !important;
  color:var(--ares-texte) !important;
}
.login-card input:focus{border-color:var(--ares-lime) !important}
.login-card .btn{
  background:var(--ares-lime) !important;color:#08211f !important;
  border:0 !important;font-weight:800 !important;
}
.login-card .btn:hover{filter:brightness(1.06)}
.login-card .err{color:#f0a08a !important}
body.clair .login-card{background:#fff !important;border-color:rgba(14,64,63,.14) !important}
body.clair .login-card .logo .t{color:var(--ares-teal) !important}

/* bannière et pied de page */
.pied,footer,.footer{background:transparent !important;color:var(--ares-texte-doux) !important}

/* ══════════════════════════════════════════════════════════════════════
   TEXTE SECONDAIRE DES PAGES MÉTIER
   ──────────────────────────────────────────────────────────────────────
   Chaque page écrit ses gris en dur (#333, #444, #555, #666, #777, #999)
   et parfois un sauge ou un teal foncé pour un libellé. Sur le fond
   sombre, tout cela devient illisible — c'est ce que Marc a vu sur le
   suivi commercial et sur le tableau du poste de pilotage.

   On reprend les gris par un filet large, et on nomme les libellés
   concernés pour que le correctif ne dépende pas d'un hasard de classe.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) les gris de texte, où qu'ils soient dans une surface de travail */
.panel,.card,.carte,.box,.bloc,.block,.modal-card,.modal-content,.wrap,
.dash-cols,.table-scroll,.kpi,.kpi-grid,.statut-row,.devis-list,.devis-head{
  color:var(--ares-texte);
}
.statut-row .lab,.statut-row .n,.statut-row span,
.tot,.cli,.dt,.ref,.agent,.nom,.last,.sub,.meta,.hint,.aide,.count,.ek-counter,
.pagination,.pg,.empty,.vide,.legende,.sep,.lab,.n{
  color:var(--ares-texte) !important;
}

/* 2) les gris au sens large : tout texte écrit en gris sombre dans les pages */
.panel [style*="color:#3"],.panel [style*="color:#4"],.panel [style*="color:#5"],
.panel [style*="color:#6"],.panel [style*="color:#7"],.panel [style*="color:#9"],
.card [style*="color:#3"],.card [style*="color:#4"],.card [style*="color:#5"],
.card [style*="color:#6"],.card [style*="color:#7"],.card [style*="color:#9"],
.carte [style*="color:#3"],.carte [style*="color:#4"],.carte [style*="color:#5"],
.carte [style*="color:#6"],.carte [style*="color:#7"],.carte [style*="color:#9"],
.modal-card [style*="color:#3"],.modal-card [style*="color:#5"],.modal-card [style*="color:#6"],
.modal-card [style*="color:#7"],.modal-card [style*="color:#9"]{
  color:var(--ares-texte-doux) !important;
}

/* 3) les références et libellés en sauge ou teal foncé passent à l'or / au lime :
      leur rôle est de ressortir, pas de disparaître */
.devis-list .ref,.devis-list .agent,.devis-head .c-ref,.devis-head .c-agent,
.ref,.ref-devis,.numero,.code-devis{
  color:var(--ares-or) !important;
}
.devis-list .cli,.devis-list .nom{color:var(--ares-texte) !important}

/* 4) les fonds clairs des barres et des lignes de tableau */
.statut-row .bar{background:rgba(255,255,255,.10) !important}
.statut-row .fill{opacity:.92}
td,td.nom{background:transparent !important}
thead th{background:rgba(8,33,31,.8) !important}
.agents-table tr:hover td,.devis-list li:hover{background:rgba(132,204,22,.09) !important}

/* 5) les cases « vides » et messages d'absence de données */
.empty,.vide,[style*="text-align:center"]{color:var(--ares-texte-doux) !important}
body.clair .statut-row .bar{background:#eef1ee !important}
body.clair .panel h2{color:var(--ares-teal) !important}

/* ══════════════════════════════════════════════════════════════════════
   LA FICHE CLIENT RESTE CLAIRE
   ──────────────────────────────────────────────────────────────────────
   Marc : « sur la fiche client, reviens sur la version blanche, c'était
   mieux ». C'est la surface de SAISIE : on y lit et on y écrit des
   informations, souvent dehors — un fond clair y est plus lisible, et
   c'est la version qu'il avait validée.

   Ce bloc rétablit explicitement ses valeurs d'origine. Le fond sombre de
   l'application reste derrière (l'overlay), mais la fiche elle-même est
   blanche, avec ses titres sauge et ses séparateurs.
   ══════════════════════════════════════════════════════════════════════ */
#etabModal .modal-card{
  background:#fff !important;
  color:#333 !important;
  border:1px solid #e2e6e2 !important;
  box-shadow:0 20px 52px rgba(0,0,0,.4) !important;
}
#etabModal .modal-card *{color:#333}
#etabModal .modal-card h1,#etabModal .modal-card h2,#etabModal .modal-card h3,
#etabModal .modal-card h4{color:#2f5d3a !important}
#etabModal .modal-card .section-h{color:#6b8264 !important;letter-spacing:.06em}
#etabModal .modal-card label,#etabModal .modal-card .fi b{color:#555 !important}
#etabModal .modal-card input,#etabModal .modal-card select,#etabModal .modal-card textarea{
  background:#fff !important;color:#333 !important;border:1.5px solid #ddd !important;
}
#etabModal .modal-card input::placeholder{color:#9aa79a !important}
#etabModal .modal-card input:focus,#etabModal .modal-card select:focus{
  border-color:#6b8264 !important;box-shadow:0 0 0 3px rgba(107,130,100,.14) !important;
}
#etabModal .modal-card button{
  background:#f4f6f4 !important;color:#333 !important;border:1px solid #ddd !important;
}
#etabModal .modal-card button:hover{background:#e9ede9 !important;border-color:#c9d3c9 !important}
#etabModal .modal-card .btn-pdf,#etabModal .modal-card .plus,
#etabModal .modal-card .btn-primaire,#etabModal .modal-card .ek-btn.lime{
  background:#0e403f !important;color:#fff !important;border-color:#0e403f !important;
}
#etabModal .modal-card .fc-x{background:transparent !important;border:0 !important;color:#fff !important}
#etabModal .modal-card .fc-head{background:#6b8264 !important;border-radius:14px 14px 0 0 !important}
#etabModal .modal-card .fc-head *{color:#fff !important}
#etabModal .modal-card .fc-grp{background:#0e403f !important}
#etabModal .modal-card .fc-grp *{color:#fff !important}
#etabModal .modal-card table th{background:#f5f7f5 !important;color:#555 !important}
#etabModal .modal-card table td{background:transparent !important;color:#333 !important}
#etabModal .modal-card .doux,#etabModal .modal-card .c-ref,
#etabModal .modal-card .c-agent{color:#5f6f5f !important}
#etabModal .modal-card .etab-infos .fi{border-bottom:1px dashed #dfe5df !important}
#etabModal .modal-card .empty,#etabModal .modal-card .vide{color:#8a988a !important}

/* ══════════════════════════════════════════════════════════════════════
   REPRISE AUTOMATIQUE DES FONDS CLAIRS
   ──────────────────────────────────────────────────────────────────────
   Relevé dans le CSS des pages : chaque sélecteur qui pose un fond clair
   se retrouve en tache blanche sur le thème sombre. Cette liste est
   produite par /tmp/audit_fonds.py — la relancer après toute évolution
   d'une page, sinon un nouveau bloc clair passera au travers.

   La fiche client (#etabModal) est volontairement exclue : Marc la veut
   blanche, c'est la surface de saisie.
   ══════════════════════════════════════════════════════════════════════ */

.additem, .agent-item.active, .agent-table th,
.agent-table tr.total td, .agents-table tfoot td, .agents-table th,
.astuce, .badge-groupe, .badge.camping,
.badge.prl, .badge.vvf, .box,
.card, .carte, .carte.vide,
.chat-body, .chat-confirm .no, .chat-msg.bot,
.chat-panel, .chip.brouillon, .chip.devis,
.chip.en_pause, .chip.envoyee, .chip.gagnee,
.chip.perdue, .count, .detail,
.devis-statut, .dk-attent, .dk-perdu,
.dk-valide, .dot-empty, .erase-btn,
.erase-btn.active, .etab-infos, .exclu-tag.faux,
.exclu-tag.version, .fiche-foot .close, .fiche-modal,
.filemodal-inner, .filterbar, .fingerprint-btn,

.info-ouv.ferme,
.kpi,
.kpi-card, .lead, .lead .mat.info,
.lead .mat.tiede, .lead.urgent, .lightbox-inner img,
.map-wrap, .modal, .modal .box,
.modal-actions .cancel, .modal-card, .mode-bar,
.mode-btn, .mp-bulle, .mp-close,
.mp-mini, .ms-btn, .ms-btn.active,
.ms-float-panel, .ms-panel, .msg.ok,
.note, .note-item, .panel,
.periode, .preset, .preview,
.profil, .progress .step, .searchbar,
.section, .sidebar, .som a,
.statut-row .bar, .sugg-item, .switch .slider,
.thumb, .toggle-btn, .toolbar,
.user-form, .user-list, code,
table, th, tr.filter-row th,
tr.row-devis td, tr.row-equipe td
{
  background: var(--ares-verre) !important;
  color: var(--ares-texte) !important;
}


/* les pastilles de statut gardent leur teinte, dans une version sombre */
.chip,.badge,.pastille,.tag{border:1px solid var(--ares-trait) !important}
.chip.devis,.dk-attent{background:rgba(201,169,97,.16) !important;color:#e8d9a8 !important}
.chip.envoyee,.badge.prl{background:rgba(96,165,250,.14) !important;color:#a8cdf7 !important}
.chip.gagnee,.chip.brouillon,.badge.camping{background:rgba(132,204,22,.14) !important;color:#b7e07a !important}
.chip.perdue,.chip.en_pause{background:rgba(255,255,255,.09) !important;color:var(--ares-texte-doux) !important}
.badge.vvf{background:rgba(96,165,250,.14) !important;color:#a8cdf7 !important}
.badge-groupe{background:rgba(201,169,97,.14) !important;color:#e8d9a8 !important}
body.clair .chip,body.clair .badge,body.clair .pastille{color:var(--ares-texte) !important}

/* ══════════════════════════════════════════════════════════════════════
   DERNIÈRES CORRECTIONS — elles doivent passer APRÈS tout le reste
   ──────────────────────────────────────────────────────────────────────
   Deux règles écrites plus haut se contredisaient (l'une remettait le burger
   en blanc, l'autre lui donnait un fond de verre) : le bloc de reprise des
   fonds clairs balayait ce qui avait été décidé pour la barre. Ces règles
   sont posées en fin de feuille pour qu'il n'y ait plus d'ambiguïté.
   ══════════════════════════════════════════════════════════════════════ */
.ek-burger{background:transparent !important;border:0 !important;
           box-shadow:none !important;color:var(--ares-or) !important}
.ek-burger .bars i{background:var(--ares-or) !important}

/* La salutation de la barre : plus grande qu'avant, sans écraser le reste.
   Sur un écran étroit elle redescend d'un cran — un prénom long ne doit
   toucher ni le logo ni le menu. */
.ek-nav .bonjour{font-size:clamp(17px,4.6vw,21px) !important;color:#fff !important}
.ek-nav .ek-titre{font-size:clamp(16px,4.2vw,19px) !important}
.ek-nav .ek-btn{font-size:clamp(13px,3.4vw,15px) !important}
@media (max-width:640px){
  .ek-nav .bonjour{font-size:17px !important}
  .ek-nav .ek-titre{font-size:15px !important}
}
@media (max-width:360px){
  .ek-nav .bonjour{font-size:15px !important}
  .ek-nav .ek-logo{height:32px !important}
}

/* ── Panneaux latéraux et leurs titres ────────────────────────────────
   Les titres écrits dans une barre latérale gardaient leur couleur d'origine
   (sauge, gris) sur le fond sombre. On les reprend, comme les titres de
   surface. Constaté sur la carte territoires : noms d'agents blancs sur fond
   blanc, à cause du bloc de reprise des fonds clairs qui ne s'appliquait pas.
   ────────────────────────────────────────────────────────────────────── */
.sidebar,.sidebar h1,.sidebar h2,.sidebar h3,.sidebar h4,.sidebar h5,
.sidebar p,.sidebar span,.sidebar div,.sidebar label,.sidebar strong,
.sidebar li,.sidebar a,.side h2,.side h3{
  color:var(--ares-texte) !important;
}
.sidebar .agent-item:hover,.sidebar .agent-item.active{
  background:var(--ares-verre-fort) !important;
}
.sidebar{border-right-color:var(--ares-trait) !important}

/* ══════════════════════════════════════════════════════════════════════
   CORRECTIFS D'AUDIT — textes mesurés sous le seuil de lisibilité
   ──────────────────────────────────────────────────────────────────────
   Trouvés par l'audit de contraste sur les pages réelles, données chargées :
   chaque ligne correspond à un texte dont le rapport de contraste mesuré
   passait sous 4. On corrige la cause, pas le symptôme.
   ══════════════════════════════════════════════════════════════════════ */

/* Le compteur de la carte (« 0 campings ») : posé sur le fond de la carte,
   il était presque invisible (1,98). Il passe sur une pastille sombre. */
.ek-counter{
  color:var(--ares-texte) !important;
  background:rgba(8,33,31,.72) !important;
  border:1px solid var(--ares-trait) !important;
  border-radius:20px !important;padding:3px 10px !important;
}

/* Le titre de la barre latérale de la carte territoires (« Affectation
   agents ») restait en sauge, à 3,94. */
.sidebar h2,.sidebar h2 *,.side h2{
  color:var(--ares-texte) !important;
}

/* Les pastilles d'étape de l'étude ROI (« Étape 1 sur 6 ») : gris sur le
   fond sombre, 3,76. */
.progress span,.step-label,.etape,.wizard span,[class*="step"] span{
  color:var(--ares-texte-doux) !important;
}

/* Le lien « Retour accueil » du devis : sauge sur fond sombre, 2,13. */
a.btn,a.bouton,a.ek-btn-primaire,.devis-retour a{
  color:var(--ares-texte) !important;
  background:var(--ares-verre) !important;
  border:1px solid var(--ares-trait) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PANNEAUX D'ADMINISTRATION ET MODALES
   ──────────────────────────────────────────────────────────────────────
   Ces blocs ne s'affichent qu'après une action (mode admin, ouverture d'une
   fiche) : aucun audit de page ne les voit. Ils gardaient donc leurs fonds
   blancs écrits en dur — et le texte, passé en clair, devenait illisible.
   Signalé par Marc sur le panneau « Utilisateurs ».
   ══════════════════════════════════════════════════════════════════════ */
.user-list,.user-panel,.user-row,.users-list,.admin-panel,.admin-bloc,
.panel-admin,.bloc-admin,.section-admin,.panneau-admin,.modal-card .bloc,
.modal-card .section,.modal-card .liste,.modal-card .liste-users{
  background:var(--ares-verre) !important;
  border:1px solid var(--ares-trait) !important;
  border-radius:12px !important;
}
.user-list h1,.user-list h2,.user-list h3,.user-list h4,.user-list label,
.user-list .u-name,.user-list .u-meta,.user-row,.user-row *,
.admin-panel,.admin-panel *,.bloc-admin,.bloc-admin *{
  color:var(--ares-texte) !important;
}
.u-meta,.user-row .u-meta{color:var(--ares-texte-doux) !important}
.user-row button{
  background:var(--ares-verre-fort) !important;color:var(--ares-texte) !important;
  border:1px solid var(--ares-trait) !important;
}
.user-row button.del{color:#e08a72 !important;border-color:rgba(224,138,114,.45) !important}

/* Les titres écrits en sauge dans une page (« Utilisateurs » de l'admin,
   409 de base-etablissements) doivent ressortir sur le fond sombre. */
h3[style*="color:#6b826"],
[style*="color:#6b8263"], [style*="color:#6b8264"]{
  color:var(--ares-texte) !important;
}

/* ── Légendes, aides et textes de chargement ──────────────────────────
   Trouvés par l'audit étendu : ces textes sont écrits en gris foncé dans
   les pages (légende de la carte, résumé dépliable du pilotage, messages
   « chargement », explications sous un champ). Sur le fond sombre ils
   deviennent illisibles. On les reprend tous d'un coup — leur rôle est
   d'être secondaire, pas d'être invisibles. */
.legend,.legende,.max,.min,.legend span,.legend small,
summary,summary *,.chargement,.loading,[id*="chargement"],[class*="chargement"],
small,.aide-inline,.hint-inline,.sous-champ,.aide-champ,p.aide{
  color:var(--ares-texte-doux) !important;
}
.legend,.legende{border-left-color:var(--ares-sep) !important}

/* Le titre de la barre latérale : il porte un bouton, la règle doit couvrir
   les deux. Mesuré à 3,94 sans cela. */
.sidebar > h2,.sidebar h2,.sidebar h2 *,.side > h2{color:var(--ares-texte) !important}
.side-toggle{color:var(--ares-texte) !important;background:transparent !important;border:0 !important}

/* ── Dans la fiche client (qui reste BLANCHE), les textes doivent être foncés
   ──────────────────────────────────────────────────────────────────────
   Le thème impose ailleurs un gris clair : appliqué sur le fond blanc de la
   fiche, il donnait un contraste de 1,5 — mesuré sur le « Chargement… » et
   les mentions sous les champs. Ici on inverse : gris foncé sur blanc. */
#etabModal .modal-card p,#etabModal .modal-card span,#etabModal .modal-card small,
#etabModal .modal-card div,#etabModal .modal-card .chargement,
#etabModal [style*="color:#9"],#etabModal [style*="color:#8"],
#etabModal [style*="color:#7"],#etabModal [style*="color:#6"]{
  color:#5c6f6c !important;
}
#etabModal .modal-card h1,#etabModal .modal-card h2,#etabModal .modal-card h3{color:#2f5d3a !important}
#etabModal .modal-card strong,#etabModal .modal-card b{color:#333 !important}

/* ── Couleurs écrites en style inline dans les pages ───────────────────
   Une couleur posée dans l'attribut style gagne sur toute règle sans
   !important : ces textes restaient donc en gris foncé sur le fond sombre.
   On reprend toute la plage des gris foncés, d'un coup. */
[style*="color:#3"],[style*="color:#4"],[style*="color:#5"],
[style*="color:#6"],[style*="color:#7"],[style*="color:#8"],
[style*="color:#9"],[style*="color: #3"],[style*="color: #5"],
[style*="color: #6"],[style*="color: #7"],[style*="color: #8"],[style*="color: #9"]{
  color:var(--ares-texte-doux) !important;
}
/* exception : la fiche client, blanche, garde ses textes foncés (règle ci-dessus) */
#etabModal[style*="color"] ,#etabModal [style*="color:#3"],#etabModal [style*="color:#4"]{
  color:#5c6f6c !important;
}

/* Le bandeau de titre de la barre latérale : sauge sur fond sombre donnait
   3,94. Il passe au teal du thème, texte blanc franc — même famille, contraste
   nettement meilleur. */
.sidebar > h2,.sidebar h2{
  background:rgba(14,64,63,.9) !important;
  color:#fff !important;
  border-bottom:1px solid var(--ares-trait) !important;
}
.sidebar h2 *{color:#fff !important}

/* ── La bulle « Message aux commerciaux » garde son fond clair ─────────
   C'est un choix validé : une bulle verte pâle qui interpelle. Le bloc de
   reprise des fonds clairs lui avait donné un fond de verre et un texte
   clair : mesuré à 2,36. On lui rend ses couleurs d'origine, texte compris. */
.mp-bulle,.mp-bulle *,#bulleMessage,#bulleMessage *{
  color:#166534 !important;
}
.mp-bulle,#bulleMessage{
  background:#f0fdf4 !important;
  border:2px solid #86efac !important;
  color:#166534 !important;
}
.mp-titre,.mp-texte,.mp-lien{color:#166534 !important}
.mp-lien{text-decoration:underline !important}
.mp-close{background:#fff !important;color:#6b7280 !important}

/* ══════════════════════════════════════════════════════════════════════
   BARRE D'ACTIONS EN BAS DE LA CARTE
   ──────────────────────────────────────────────────────────────────────
   `.map-actions` ne s'affiche QUE sous 640 px (display:none puis display:flex
   dans la media query). Mon audit tournait en 1280 px : il ne l'a jamais vue.
   Marc l'a signalée — texte clair sur fond blanc, illisible.

   Leçon : un audit à une seule largeur d'écran laisse passer tout ce qui est
   conditionnel au mobile. L'audit tourne désormais en 1280 ET en 390.
   ══════════════════════════════════════════════════════════════════════ */
.map-actions{
  background:rgba(8,33,31,.92) !important;
  backdrop-filter:blur(12px);
  border-top:1px solid var(--ares-trait) !important;
  box-shadow:0 -4px 18px rgba(0,0,0,.35) !important;
}
.map-actions button,.map-actions a,.map-actions .map-btn{
  background:var(--ares-verre) !important;
  color:var(--ares-texte) !important;
  border:1px solid var(--ares-trait) !important;
  font-weight:700 !important;
}
.map-actions button:hover,.map-actions a:hover{
  background:var(--ares-verre-fort) !important;border-color:var(--ares-or) !important;
}
.map-actions i,.map-actions svg{color:var(--ares-or) !important;fill:var(--ares-or)}
/* les attributions de la carte (fond de plan) se lisent sur les tuiles claires */
.leaflet-control-attribution,.leaflet-control-attribution a{
  background:rgba(255,255,255,.82) !important;color:#33443f !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LA FICHE DU CAMPING DANS LA CARTE EST BLANCHE — ELLE RESTE BLANCHE
   ──────────────────────────────────────────────────────────────────────
   Marc : « toujours pas top le bouton de l'eau ». J'avais traité la pastille
   eau comme si elle vivait sur fond sombre : fond vert translucide, texte
   vert clair. Or elle vit dans la fiche blanche de la carte (Google Maps,
   `.gm-style-iw`). Vert clair sur vert pâle = illisible.

   Deuxième erreur corrigée ici : le bouton « Étude » (`.info-btns .roi`) était
   dans ma liste de fonds à assombrir alors qu'il appartient à cette même
   fiche blanche — il devenait blanc sur blanc, donc « désactivé » en
   apparence alors qu'il était simplement cassé.

   Règle : tout ÎLOT CLAIR du thème (fiche client, fiche du camping, fenêtres
   modales) garde la palette claire, textes foncés compris.
   ══════════════════════════════════════════════════════════════════════ */
.gm-style-iw, .gm-style-iw *{ color:#333 !important; }
.gm-style-iw h3{ color:#0e403f !important; }
.gm-style-iw .sub{ color:#777 !important; }
.gm-style-iw b, .gm-style-iw strong{ color:#555 !important; }
.gm-style-iw small{ color:#6b7b76 !important; }

/* la pastille « prix eau » : ses couleurs d'origine, lisibles sur blanc */
.info-eau, summary.info-eau, .prix-eau, .badge-eau{
  background:#e8f5e9 !important;
  color:#1b5e20 !important;
  border:none !important;
  font-weight:700;
}
.info-eau *, summary.info-eau *{ color:#1b5e20 !important; }
.info-eau::after, summary.info-eau::-webkit-details-marker{ color:#1b5e20 !important; }

/* le panneau détaillé qui se déplie sous la pastille */
.water-detail, .water-detail *, .water-component, .water-component *,
.water-detail-corps, .water-detail-corps *{
  color:#33443f !important;
}
.water-detail small{ color:#52625d !important; }

/* les badges de la fiche (ouvert / fermé / labels) gardent leur sens */
.info-ouv.ouvert{ background:#e8f5e9 !important; color:#1b5e20 !important; }
.info-ouv.ferme, .info-ouv.ferme-def{ background:#fdecea !important; color:#b3261e !important; }

/* les boutons d'action de la fiche : leurs couleurs d'origine */
.info-btns a{ background:none; }
.info-btns .fiche{ background:#0e403f !important; color:#fff !important; }
.info-btns .roi{ background:#fff !important; color:#0e403f !important;
                 border:1.5px solid #0e403f !important; }
.info-btns .devis{ background:#84cc16 !important; color:#0e403f !important; }
.info-btns .itin{ background:#6b8264 !important; color:#fff !important; }
.info-btns .sv{ background:#4285f4 !important; color:#fff !important; }
/* un bouton sans lien (action indisponible) : lisible, mais visiblement inactif */
.info-btns span.roi{ opacity:.55 !important; }