/* ============================================================
   Composants — la peau de l'application
   ============================================================
   Refonte d'août 2026. Ce fichier est chargé EN DERNIER : c'est
   ici que vit désormais l'apparence des composants. Les fichiers
   antérieurs (components, layout, modal, accueil, actions,
   mobile) gardent la STRUCTURE — grilles, positions, mécanismes —
   et les déclarations qu'ils portaient encore en double ont été
   retirées : une propriété n'est plus définie qu'à un seul
   endroit.

   👉 Pour changer l'aspect d'un composant, c'est ici.
      Pour changer sa structure, c'est dans son fichier d'origine.

   Trois principes, appliqués partout :
     1. La couleur est un SIGNAL (statut, alerte), jamais une
        décoration d'action → les huit variantes de boutons
        colorées sont devenues un bouton neutre à icône colorée.
     2. Deux graisses seulement : 400 pour le texte, 600 pour ce
        qui doit ressortir. Le 700/800 généralisé annulait toute
        hiérarchie.
     3. Séparer par un TRAIT, pas par une ombre. Les ombres sont
        réservées à ce qui flotte vraiment (fenêtres, menus).

   Les couleurs et mesures viennent de `tokens.css`.
   Les icônes SVG viennent de `../ui/icons.js`.
   ============================================================ */

/* ============================================================
   1. STRUCTURE
   ============================================================ */

.app{grid-template-columns:236px 1fr}

.sidebar{
  background:var(--sidebar);
  border-right:1px solid var(--line);
  padding:14px 10px 18px;
  gap:2px;
}

.brand{padding:4px 6px 16px;gap:10px}
.brand .logo{
  width:30px;height:30px;border-radius:7px;font-size:12px;font-weight:600;
  background:var(--accent);          /* le dégradé disparaît : un aplat de charte */
  box-shadow:none;letter-spacing:.4px;
}
.brand h1{font-size:13px;font-weight:600;letter-spacing:.9px}
.brand span{font-size:9px;letter-spacing:1.4px;font-weight:500;color:var(--ink-faint)}

.topbar{
  padding:0 20px;min-height:46px;
  background:var(--paper);backdrop-filter:none;
  border-bottom:1px solid var(--line);
}
.crumb{font-size:12px;color:var(--ink-soft);letter-spacing:0}
.crumb b{font-weight:600;color:var(--ink)}

.icon-btn{
  width:30px;height:30px;border-radius:6px;font-size:14px;
  border:1px solid transparent;background:none;color:var(--ink-soft);
}
.icon-btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}

/* Densité : 26/28px de marge → 18/22px. Sur un écran de portable,
   ce sont trois lignes de tableau gagnées. */
.content{padding:18px 22px 56px;max-width:1560px}

.page-head{margin-bottom:16px;gap:12px}
.page-head h2{font-size:19px;font-weight:600;letter-spacing:-.15px}
.page-head .sub{font-size:12.5px;margin-top:1px;color:var(--ink-soft)}
.page-head:has(h2.ref-title) .sub{font-size:13px;font-weight:500;color:var(--ink-soft)}
@media (min-width:721px){
  .page-head > .btn{height:32px}
  .page-head > .btn.sm{height:28px}
}
.page-head > .btn:not(.ghost){font-weight:600;letter-spacing:0}

/* ============================================================
   2. NAVIGATION
   L'entrée active était un aplat prune plein largeur — le seul
   bloc de couleur franche de l'écran, donc l'élément le plus
   voyant de l'application alors qu'il ne fait qu'indiquer « vous
   êtes ici ». Voile prune + repère latéral : aussi lisible,
   dix fois plus calme.
   ============================================================ */

.nav-group{margin-top:12px}
.nav-group>p{font-size:9.5px;letter-spacing:1.1px;font-weight:600;padding:6px 8px 4px;color:var(--ink-faint)}

.nav-item{
  position:relative;
  padding:6px 9px;border-radius:6px;gap:9px;
  font-weight:450;font-size:13px;color:var(--ink-soft);
}
.nav-item:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.nav-item.active{
  background:var(--accent-wash);
  color:var(--accent-ink);
  font-weight:600;
}
.nav-item.active::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--accent);
}
.nav-item .ico{width:16px;font-size:14px;opacity:.85}
.nav-item.active .ico{opacity:1;color:var(--accent)}
.nav-item .badge{
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  font-size:10.5px;font-weight:600;padding:0 5px;border-radius:20px;min-width:18px;text-align:center;
}
.nav-item.active .badge{background:none;border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent-ink)}

/* ============================================================
   3. BOUTONS — trois niveaux, plus huit
   Principal (prune plein) · Secondaire (neutre bordé) ·
   Destructeur (rouge discret). Toutes les anciennes variantes
   colorées deviennent secondaires : c'est leur ICÔNE qui porte
   désormais la couleur, ce qui suffit à les distinguer sans
   transformer la barre d'actions en nuancier.
   ============================================================ */

.btn{
  padding:0 12px;min-height:32px;border-radius:6px;gap:6px;
  font-size:13px;font-weight:600;letter-spacing:0;line-height:1;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  box-shadow:none;transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
[data-theme="dark"] .btn{color:#1B1219}
[data-theme="dark"] .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

/* Secondaire — et destination de toutes les anciennes variantes */
.btn.ghost,
.btn.call,.btn.mail,.btn.send,.btn.ok,.btn.draft,.btn.sms,.btn.portal,.btn.sand{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.ghost:hover,
.btn.call:hover,.btn.mail:hover,.btn.send:hover,.btn.ok:hover,
.btn.draft:hover,.btn.sms:hover,.btn.portal:hover,.btn.sand:hover{
  background:var(--surface-2);border-color:var(--ink-faint);
}

/* La couleur passe dans l'icône — voir icons.js, qui remplace les
   pictogrammes par du SVG héritant de --ico. */
.btn.call,.btn.ok{--ico:var(--ok)}
.btn.mail,.btn.send{--ico:var(--info)}
.btn.draft,.btn.sand{--ico:var(--sand)}
.btn.sms{--ico:var(--sms)}
.btn.portal{--ico:var(--portal)}
.btn.danger{--ico:var(--bad)}

.btn.danger{
  background:var(--surface);color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 38%,var(--line));box-shadow:none;
}
.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad)}

.btn.sm{min-height:26px;padding:0 9px;font-size:12px}
.btn.wide{min-width:150px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Boutons de ligne */
.mini{
  padding:0 8px;min-height:24px;border-radius:5px;font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);color:var(--ink-soft);border:1px solid var(--line);
}
.mini:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink-faint)}
.mini.accent{background:var(--surface);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));--ico:var(--accent)}
.mini.send,.mini.mail{background:var(--surface);color:var(--ink-soft);border-color:var(--line);--ico:var(--info)}
.mini.ok{background:var(--surface);color:var(--ink-soft);border-color:var(--line);--ico:var(--ok)}
.mini.sms{background:var(--surface);color:var(--ink-soft);border-color:var(--line);--ico:var(--sms)}
.mini.portal{background:var(--surface);color:var(--ink-soft);border-color:var(--line);--ico:var(--portal)}
.mini.danger{background:var(--surface);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,var(--line));--ico:var(--bad)}
.mini.danger:hover{background:var(--bad-bg);border-color:var(--bad)}

.row-act{gap:4px}

/* ============================================================
   4. TABLEAUX — le cœur d'un outil de gestion
   L'en-tête devient collant : sur une liste de 60 devis, savoir
   quelle colonne on lit sans remonter change l'usage réel.
   ============================================================ */

.table-wrap{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:none;
}
thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface-2);
  padding:7px 12px;
  font-size:10.5px;letter-spacing:.5px;font-weight:600;color:var(--ink-faint);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{padding:7px 12px;font-size:13px;border-bottom:1px solid var(--line-soft)}
tbody tr:hover{background:var(--accent-wash)}
[data-theme="dark"] tbody tr:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
th.sortable.act{color:var(--accent-ink)}
th.sortable .ar{font-size:8px}
td .strong{font-weight:600}
td .ref{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:-.2px}

.avatar{
  width:22px;height:22px;border-radius:5px;font-size:10px;font-weight:600;margin-right:7px;
  background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-soft);
}

/* ============================================================
   5. PANNEAUX, INDICATEURS
   ============================================================ */

.panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;margin-bottom:14px}
.panel-head{padding:9px 14px;gap:10px;border-bottom:1px solid var(--line-soft)}
.panel-head h3{font-size:13px;font-weight:600;letter-spacing:0}
.panel-body{padding:14px}

.cards{gap:10px;margin-bottom:16px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.kpi{padding:12px 14px;border-radius:var(--radius);box-shadow:none;border:1px solid var(--line)}
.kpi .lab{font-size:10.5px;letter-spacing:.5px;font-weight:600;color:var(--ink-faint);text-transform:uppercase}
.kpi .val{font-size:23px;font-weight:600;letter-spacing:-.5px;margin-top:4px}
.kpi .foot{font-size:11.5px;margin-top:3px}
.kpi .foot .up,.kpi .foot .down{font-weight:600}

.grid-2{gap:14px}

/* ============================================================
   6. BARRE D'OUTILS ET FILTRES
   Les onglets deviennent un vrai segmenté : c'est un choix
   exclusif, il doit se lire comme tel.
   ============================================================ */

.toolbar{gap:8px;margin-bottom:12px}
.toolbar select,.toolbar input,.tache-form select,.tache-form input,.tache-form #t_titre{
  padding:0 9px;min-height:30px;border-radius:6px;font-size:12.5px;font-weight:400;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.toolbar select:focus,.toolbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)}
.toolbar input[type=search]{min-width:200px}

.tabsrow{gap:0;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px}
.tabsrow > .btn{
  background:none;border:1px solid transparent;color:var(--ink-soft);
  min-height:26px;padding:0 11px;font-weight:500;border-radius:4px;
}
.tabsrow > .btn:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.tabsrow > .btn:not(.ghost){background:var(--surface);color:var(--ink);border-color:var(--line);font-weight:600}

.datefr{min-height:30px;padding:0 9px;border-radius:6px;font-size:12.5px;font-weight:400}
.datefr::after{opacity:.4}
.field .datefr{min-height:32px}
.datefr:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)}

/* ============================================================
   7. ÉTIQUETTES DE STATUT
   La pilule très arrondie (radius 20px) lisait comme un bouton.
   Un rectangle légèrement arrondi lit comme une donnée — ce
   qu'un statut est. La pastille de couleur reste : c'est elle
   qui rend le statut identifiable sans lire le mot.
   ============================================================ */

.tag{
  padding:1px 7px;border-radius:4px;
  font-size:11px;font-weight:500;line-height:1.55;gap:5px;
}
.tag::before{width:5px;height:5px}
.tag.mute{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-soft)}

.statut-select{
  border-radius:6px;padding:0 11px;min-height:30px;font-size:12.5px;font-weight:600;
  border-width:1px;
}

.sev-chip,.tcat-cnt,.actcat-cnt{border-radius:4px;font-weight:600;font-size:11px}
.sev-chip{padding:1px 7px}

.bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.bar>i{border-radius:3px;background:var(--accent)}

/* ============================================================
   8. FORMULAIRES ET FENÊTRES
   ============================================================ */

.modal{border-radius:10px;box-shadow:var(--shadow-pop);max-width:540px}
.modal.wide{max-width:800px}
.modal-bg{background:rgba(20,18,16,.5);backdrop-filter:blur(2px)}
.modal-head{padding:14px 18px}
.modal-head h3{font-size:15px;font-weight:600}
.modal-head .x{font-size:17px;width:28px;height:28px;border-radius:6px}
.modal-body{padding:16px 18px}
.modal-foot{padding:12px 18px;gap:8px}

.field{margin-bottom:12px}
.field label{font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--ink-faint);text-transform:uppercase;margin-bottom:4px}
.field input,.field select,.field textarea{
  padding:7px 10px;border-radius:6px;font-size:13px;
  background:var(--surface);border:1px solid var(--line);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 2px var(--accent-wash);
}

/* ⚠️ UNE CASE À COCHER N'EST PAS UN CHAMP DE SAISIE. La règle du dessus
   (`.field input`) l'habillait comme un champ texte : fond, bordure, rayon,
   `padding:10px 12px` sur téléphone, et `width:100%` venu de `modal.css`.
   Résultat sur iPhone, capture du 21/09/2026 : un carré BLANC de 44 px planté
   à gauche de « Ne pas envoyer de SMS », séparé du libellé par un vide qui ne
   ressemblait à rien.
   ⚠️ `tokens.css` prend soin de les exclure — `:where(input:not([type=checkbox])
   …)` — mais `.field input` ne le faisait pas, et c'est elle qui gagne. La
   parade n'est pas d'ajouter un `:not()` de plus (ça remonterait la
   spécificité de la règle générale, donc écraserait d'autres habillages) :
   c'est une règle DÉDIÉE, plus spécifique, qui rend la case à son apparence
   native.
   ⚠️ ON GARDE LE DESSIN NATIF (`appearance:auto`) : clavier, focus et
   lecteurs d'écran le connaissent, et `accent-color` suffit à la mettre à la
   couleur de la charte. La zone de clic reste confortable — c'est tout le
   `<label>` qui bascule la case, pas le carré de 18 px. */
.field input[type=checkbox],.field input[type=radio]{
  -webkit-appearance:auto;appearance:auto;accent-color:var(--accent);
  width:18px;height:18px;min-width:0;flex:0 0 auto;
  padding:0;background:none;border:none;border-radius:0;
}

/* ⚠️ UN EXEMPLE NE DOIT PAS SE LIRE COMME UNE VALEUR. Aucune feuille ne
   donnait de couleur aux `placeholder` : en thème sombre, le navigateur les
   rend presque aussi clairs qu'un texte saisi. Sur la même capture, la case
   « Boîte » affichait « 3 » — son EXEMPLE — à côté d'un numéro « 106 » bien
   réel : on lit une boîte 3 qui n'existe pas, et c'est une adresse qui part
   sur une facture. Même famille de défaut que la colonne « Origine » qui
   affichait « — ».
   ⚠️ `opacity:1` n'est pas décoratif : Firefox applique une opacité par
   défaut au placeholder, et sans elle la couleur choisie ressort délavée. */
::placeholder{color:var(--ink-faint);opacity:1}

.toast{
  border-radius:7px;padding:9px 15px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow-pop);
}

.deflist{font-size:13px;gap:7px 16px}
.deflist dt{font-weight:500;color:var(--ink-faint)}
.deflist dd{font-weight:500}

.timeline li::before{width:7px;height:7px;left:-17px;top:6px;border-width:2px}
.timeline::before{left:6px;width:1px;background:var(--line)}

/* ============================================================
   9. ACCUEIL
   Le bandeau d'accueil faisait 32px de titre en graisse 800 :
   c'est une accroche de page d'atterrissage. Un outil s'ouvre
   sur ce qu'il y a à faire, pas sur une bannière.
   ============================================================ */

.accueil{max-width:1120px}
.acc-hero{padding:2px 0 16px;margin-bottom:20px}
.acc-eyebrow{font-size:10.5px;letter-spacing:1.4px;font-weight:600;color:var(--ink-faint)}
.acc-hi{font-size:clamp(19px,3vw,23px);font-weight:600;letter-spacing:-.3px;margin-top:6px}
.acc-sub{font-size:13px;margin-top:6px}
.acc-sec-title{font-size:10.5px;letter-spacing:1.1px;font-weight:600;margin-bottom:10px}

.acc-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.acc-card{
  padding:12px;border-radius:var(--radius);gap:10px;
  border:1px solid var(--line);box-shadow:none;
  transition:border-color .12s,background .12s;
}
/* Le survol soulevait la carte de 2px avec une ombre teintée.
   Vingt cartes qui décollent au passage de la souris, c'est un
   jouet ; on se contente de marquer la cible. */
.acc-card:hover{transform:none;box-shadow:none;background:var(--surface-2);border-color:var(--ink-faint)}
.acc-ic{
  width:30px;height:30px;border-radius:7px;font-size:15px;
  background:color-mix(in srgb,var(--c) 10%,transparent);
  color:color-mix(in srgb,var(--c) 78%,var(--ink));
  border:1px solid color-mix(in srgb,var(--c) 16%,transparent);
}
.acc-name{font-size:12.5px;font-weight:500}
.acc-n{
  top:11px;right:11px;min-width:19px;height:19px;border-radius:5px;font-size:11px;font-weight:600;
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
.acc-viewas{border-radius:var(--radius);padding:13px}
.acc-viewas>span{font-size:11.5px;font-weight:600}

/* ============================================================
   10. TÂCHES ET ACTIONS À RÉALISER
   ============================================================ */

.taches-grid,.acts-grid{gap:12px}
.actcat{border-radius:var(--radius);border:1px solid var(--line)}
.actcat.sev-urgent{border-left:2px solid var(--bad)}
.actcat.sev-warn{border-left:2px solid var(--warn)}
.actcat.sev-info{border-left:2px solid var(--info)}
.actcat-head{padding:8px 12px;font-size:12.5px;font-weight:600}
.actcat-ico{font-size:14px}

.act-item,.tache-item{padding:7px 4px;font-size:12.5px}
.act-item:hover,.tache-item:hover{background:var(--accent-wash)}
.ai-main,.ti-main{font-size:12.5px;font-weight:500}
.ai-sub,.ti-sub{font-size:11.5px}
.ai-tag,.ti-tag{font-weight:600;font-size:12px}
.tache-titre{font-size:13px;font-weight:500}
.tache-meta{font-size:11.5px}

/* Kanban */
.kcol{border-radius:var(--radius);padding:8px}
.kcol h4{font-size:10.5px;letter-spacing:.5px;font-weight:600}
.kcard{
  border-radius:5px;padding:6px 8px;margin-bottom:6px;font-size:12.5px;font-weight:500;
  box-shadow:none;border:1px solid var(--line);
}
.kcard:hover{border-color:var(--accent);background:var(--accent-wash)}
.kcard .avatar{width:20px;height:20px;font-size:9px}
.kcap{font-size:10.5px;letter-spacing:.8px;font-weight:600}

/* ============================================================
   11. CALENDRIER
   ============================================================ */

.cal{gap:4px}
.cal .dow{font-size:10px;letter-spacing:.4px;font-weight:600}
.cal .cell{border-radius:6px;min-height:70px}
.cal .ev{border-radius:4px;font-size:10.5px;font-weight:500;padding:1px 5px}

/* ============================================================
   12. MOBILE
   Les cibles tactiles restent à 42-46px : la densité gagnée sur
   ordinateur ne doit pas se payer au doigt.

   ⚠️ CETTE FEUILLE EST CHARGÉE EN DERNIER — donc ses règles SANS
   media query écrasent les règles mobiles des feuilles antérieures,
   qui arrivent avant. Toute valeur que le mobile doit changer DOIT
   donc être redéclarée ici, dans le bon palier. Trois paliers
   existent dans le projet : 860 (tablette), 720 (téléphone),
   560 (petit téléphone), et ils doivent apparaître dans cet ordre.
   ============================================================ */

/* ---- 860 : la barre latérale devient un tiroir ----------------
   `.app{grid-template-columns:1fr}` vient d'actions.css. Sans cette
   reprise, la colonne de 236px restait en place sur téléphone et
   tout l'écran était décalé — c'était le vrai défaut mobile. */
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .content{padding:18px 14px 56px}
  .topbar{padding:0 14px}
}

@media(max-width:720px){
  .content{padding:14px 12px calc(80px + env(safe-area-inset-bottom,0))}
  .page-head h2{font-size:19px}
  .page-head > .btn{min-height:44px;border-radius:7px}
  .page-head > .btn:not(.ghost){min-height:44px;font-size:14px;font-weight:600;letter-spacing:0}

  /* 44px : le minimum recommandé pour une cible tactile. L'application
     se sert sur chantier, parfois avec les mains sales ou gantées. */
  .btn{min-height:44px;padding:0 14px;font-size:13.5px;border-radius:7px}
  .btn.sm{min-height:36px;padding:0 11px}
  .mini{min-height:32px;padding:0 10px;font-size:12px}

  .field input,.field select,.field textarea{padding:10px 12px;font-size:16px;border-radius:7px}
  .toolbar select,.toolbar input{min-height:44px;font-size:16px;border-radius:7px}
  .datefr{min-height:44px;font-size:15px;border-radius:7px}

  /* Barre basse : l'indicateur d'onglet actif passe du trait
     supérieur à un fond discret — plus proche des barres
     natives, et lisible sans chercher. */
  .tabbar{box-shadow:none;border-top:1px solid var(--line);background:var(--surface)}
  .tabitem{font-size:10px;font-weight:500;padding:7px 4px 6px;gap:2px}
  .tabitem .ti{font-size:19px}
  .tabitem.on{color:var(--accent);font-weight:600}
  .tabitem.on::before{display:none}
  .tabitem .dot{
    background:var(--bad);font-size:9.5px;font-weight:600;
    min-width:14px;height:14px;border-radius:7px;top:5px;
  }

  .mcard{border-radius:var(--radius);padding:11px 12px;box-shadow:none}
  .mc-title{font-size:14px;font-weight:600;letter-spacing:0}
  .mc-sub{font-size:12px}
  .mc-rows{font-size:12.5px;gap:4px}

  /* Le bandeau « ma journée » était un dégradé prune plein écran :
     très joli une fois, fatigant tous les matins. Aplat sobre,
     liseré de charte. */
  .today-hero{
    background:var(--surface);color:var(--ink);
    border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:var(--radius);padding:14px;
  }
  .today-hero .lab{color:var(--accent-ink);opacity:1;font-size:10.5px;letter-spacing:1.1px;font-weight:600}
  .today-hero h3{font-size:17px;font-weight:600;margin:5px 0 2px}
  .today-hero .adr{color:var(--ink-soft);opacity:1;font-size:12.5px}
  .today-hero .btn{background:var(--accent);border-color:var(--accent);color:#fff}
  .today-hero .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

  .big-action{border-radius:8px;font-size:14.5px;font-weight:600;padding:13px}

  .linecard{border-radius:var(--radius)}
  .lc-num{border-radius:5px;width:20px;height:20px;font-size:10.5px;font-weight:600}
  .lc-grid label{font-size:10px;font-weight:600;letter-spacing:.3px}
  .lc-grid input,.linecard textarea,.linecard>input{border-radius:7px}
  .lc-total b{font-size:14px;color:var(--ink);font-weight:600}

  .actionbar{box-shadow:none;border-top:1px solid var(--line)}
  .modal{border-radius:12px 12px 0 0}
  .statut-select{min-height:46px;font-size:14.5px;border-radius:7px}

  /* En-tête de tableau collant : sans hauteur de référence, il se
     colle sous la barre du haut au lieu du bord de la fenêtre. */
  thead th{position:static}

  /* ---- valeurs mobiles que la peau écrasait ------------------- */
  .modal{max-width:100%}
  .page-head{gap:10px}
  .kpi .val{font-size:22px}
  .panel-head h3{font-size:14px}
  .deflist dt{font-weight:600}
  .acc-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}

  /* Cibles tactiles : une ligne d'action se tape au doigt. */
  .act-item,.tache-item{padding:12px 4px}
  .actcat-head{padding:12px}
  .statut-select{padding:0 14px}

  /* ⚠️ 16px, et pas moins : en dessous, iOS ZOOME la page à la mise
     au point du champ, et l'utilisateur se retrouve à devoir
     dézoomer après chaque saisie. Le formulaire de tâches
     n'entrait pas dans les sélecteurs `.toolbar` ni `.field`. */
  .tache-form select,.tache-form input,.tache-form #t_titre{
    min-height:44px;font-size:16px;border-radius:7px}

  /* Espace client : il garde sa générosité, mais pas 26px de marge
     sur un écran de 375px de large. */
  :root[data-portail] .content{padding:16px 14px 40px}
}

/* ---- 560 : petit téléphone ------------------------------------- */
@media(max-width:560px){
  .content{padding:14px 10px calc(80px + env(safe-area-inset-bottom,0))}
  .cards{grid-template-columns:1fr}
  .page-head h2{font-size:18px}
  /* Sans `min-width:0`, le champ de recherche garde ses 200px et
     déborde de la barre d'outils. */
  .toolbar input[type=search]{min-width:0;width:100%}

  /* Calendrier : sept colonnes sur 340px utiles. Chaque pixel compte. */
  .cal{gap:3px}
  .cal .dow{font-size:9px;letter-spacing:.2px}
  .cal .cell{min-height:58px;border-radius:5px;padding:3px}
  .cal .ev{font-size:9px;padding:1px 4px;border-radius:3px}
}

/* ============================================================
   13. ESPACE CLIENT — volontairement ÉPARGNÉ
   C'est la SEULE page que voit un client, une ou deux fois dans
   toute la relation. Elle n'a aucun besoin d'être dense : elle a
   besoin d'être chaleureuse et de porter la charte. La sobriété
   est faite pour l'outil interne, celui qu'on regarde huit
   heures par jour.

   La page portail partage pourtant les MÊMES classes (.btn,
   .tag, .panel, .page-head) que le reste de l'application : sans
   ce bloc, elle héritait de la mise à plat. On y rétablit donc
   les valeurs d'origine, sous `:root[data-portail]` — l'attribut
   que pose portailDemarrer(). Seule la police système améliorée
   est conservée : elle profite à tout le monde.
   ============================================================ */

:root[data-portail]{
  --paper:#F2EFE9; --surface-2:#FAF8F4;
  --radius:14px; --radius-s:10px;
  --shadow:0 1px 2px rgba(30,28,24,.04), 0 8px 24px rgba(30,28,24,.06);
}
:root[data-portail][data-theme="dark"]{
  --paper:#171815; --surface-2:#26241F;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

:root[data-portail] .content{padding:26px 20px 60px}
:root[data-portail] .page-head h2{font-size:26px;font-weight:700;letter-spacing:-.5px}
:root[data-portail] .panel,
:root[data-portail] .kpi,
:root[data-portail] .table-wrap{box-shadow:var(--shadow)}

/* Les boutons du portail : plus grands et plus arrondis que ceux de l'outil
   interne — on les touche au doigt, souvent dehors.

   ⚠️ MAIS UN BOUTON PRINCIPAL RESTE PLEIN. Il a longtemps porté une teinte
   prune très douce sur fond clair : joli, et illisible comme bouton. « Je ne
   vois pas qu'on peut appuyer dessus » est revenu trois fois — sur l'envoi
   d'un message, sur l'avis Google, et ailleurs — et à chaque fois on a corrigé
   UN bouton au lieu de la règle. La règle est ici. Constaté le 17/09/2026.

   Le partage est le même que dans l'application : `.btn` est l'action de
   l'écran, `.ghost` et les variantes nommées sont secondaires, `.ok` reste le
   vert des accords, `.danger` le rouge. */
:root[data-portail] .btn{
  min-height:44px;padding:12px 18px;border-radius:11px;font-weight:800;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
}
:root[data-portail] .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
/* Secondaires : tout ce qui n'est pas l'action de l'écran. */
:root[data-portail] .btn.ghost,
:root[data-portail] .btn.portal,
:root[data-portail] .btn.send,
:root[data-portail] .btn.sand,
:root[data-portail] .btn.draft,
:root[data-portail] .btn.sms{
  background:var(--surface-2);color:var(--ink);border-color:var(--ink-soft);
}
:root[data-portail] .btn.ghost:hover,
:root[data-portail] .btn.portal:hover,
:root[data-portail] .btn.send:hover,
:root[data-portail] .btn.sand:hover,
:root[data-portail] .btn.draft:hover,
:root[data-portail] .btn.sms:hover{background:var(--surface);border-color:var(--ink-faint)}
/* Accepter un devis ou un avenant : vert, et plein. C'est un engagement. */
:root[data-portail] .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
:root[data-portail] .btn.ok:hover{filter:brightness(1.06)}
/* Payer garde son bleu bancaire, reconnaissable d'une facture à l'autre. */
:root[data-portail] .btn.pay-btn{background:#1E5AA8;border-color:#1E5AA8;color:#fff}
:root[data-portail] .btn.pay-btn:hover{background:#17497f;border-color:#17497f}
/* Refuser, supprimer : jamais plein — ce n'est pas ce qu'on encourage. */
:root[data-portail] .btn.danger{
  background:var(--surface);color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 38%,var(--line));
}
:root[data-portail] .tag{border-radius:20px;font-weight:700;padding:3px 10px;font-size:11.5px}
:root[data-portail] .field input,
:root[data-portail] .field select,
:root[data-portail] .field textarea{padding:10px 12px;border-radius:10px;background:var(--surface-2)}

/* ============================================================
   14. ICÔNES SVG (voir ../ui/icons.js)
   Dimensionnées en `em` : une icône suit toujours la taille du
   texte qui l'accompagne, dans le menu comme dans un bouton.
   ============================================================ */

.gsi{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15em;height:1.15em;flex:0 0 auto;
  vertical-align:-.19em;
  color:var(--ico,currentColor);
}
.gsi svg{width:100%;height:100%;display:block}

/* Dans les zones où l'icône EST le contenu, elle occupe la boîte. */
.nav-item .ico .gsi,.tabitem .ti .gsi,.acc-ic .gsi,.actcat-ico .gsi{width:1em;height:1em;vertical-align:0}

/* Une icône seule dans un bouton rond ne doit pas décaler le texte. */
.icon-btn .gsi{vertical-align:0}

/* ============================================================
   15. TABLEAU DES TÂCHES
   ============================================================
   Trois colonnes — nouvelles, en cours, terminées — sur le
   principe du suivi des prospects.

   ⚠️ Contrairement au kanban des prospects, celui-ci N'EST PAS
   MASQUÉ SUR TÉLÉPHONE. Le kanban des prospects l'est parce
   qu'il repose sur le glisser-déposer, inutilisable au doigt ;
   ici les passages d'état se font par des boutons, qui marchent
   aussi bien à la souris qu'au pouce. Le glisser-déposer n'est
   qu'un raccourci d'ordinateur.
   ============================================================ */
/* `auto-fit` et non `repeat(3,…)` : une colonne masquée n'est plus un élément
   de grille, donc filtrer sur un seul état lui donne toute la largeur au lieu
   de la laisser sur un tiers. */
.tboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start;margin-top:14px}
/* Le filtre de la frise agit à TOUTES les tailles d'écran, plus seulement
   sur téléphone comme le faisait l'ancien sélecteur. */
.tcol:not(.on){display:none}
.tcol{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;min-height:76px;transition:.12s}
.tcol.drop{outline:2px dashed var(--accent);outline-offset:-3px;background:var(--accent-wash)}
.tcol-head{display:flex;align-items:center;gap:8px;padding:2px 2px 8px;margin-bottom:8px;
  border-bottom:1px solid var(--line-soft);
  font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;color:var(--ink-faint)}
.tcol-head .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.tcol-head .cnt{margin-left:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:0 7px;font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tcol-body{display:flex;flex-direction:column;gap:8px}
.tcol-vide{margin:0;padding:6px 2px;color:var(--ink-faint);font-size:11.5px}

.tcard{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 10px;
  cursor:grab;transition:border-color .12s}
.tcard:hover{border-color:var(--ink-faint)}
.tcard:active{cursor:grabbing}
.tcard.done .tc-titre{text-decoration:line-through;color:var(--ink-faint)}
.tc-titre{font-size:12.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
/* Chaque information forme un GROUPE insécable, séparé par l'espacement et
   non par un « · ». Avec des séparateurs explicites, un retour à la ligne
   laissait un point orphelin en fin de ligne. */
.tc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:3px 11px;margin-top:6px;
  font-size:11px;color:var(--ink-soft)}
.tc-bit{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tc-meta .avatar{width:18px;height:18px;font-size:9px;margin:0}
.tc-retard{color:var(--bad);font-weight:600}
.tc-act{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}

/* Case à cocher de la fenêtre de tâche : `.field label` est en petites
   capitales, ce qui conviendrait mal à une phrase à côté d'une case. */
.tk-check{display:inline-flex;align-items:center;gap:8px;text-transform:none;
  font-size:13px;font-weight:400;color:var(--ink);cursor:pointer;letter-spacing:0}
.tk-check input{width:auto;margin:0}

/* ---------- les images jointes à un signalement ----------
   ⚠️ LA CROIX EST LE POINT DE TOUT CE BLOC. Un champ de fichiers ne se vide
   pas image par image : choisir la mauvaise obligeait à tout reprendre, ou à
   l'envoyer quand même. Signalé le 17/09/2026. */
.tk-vignettes{display:flex;gap:8px;flex-wrap:wrap}
.tk-vignettes:empty{display:none}
.tk-vig{position:relative;width:78px;height:78px}
.tk-vig img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.tk-vig-x{
  position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:12px;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);padding:0;
}
.tk-vig-x:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}

@media(max-width:720px){
  /* Une colonne par ligne. L'en-tête RESTE visible : sans filtre, les trois
     colonnes s'empilent et rien ne permettrait sinon de savoir où l'on est. */
  .tboard{grid-template-columns:1fr;gap:16px}
  /* Le cadre de colonne rognerait la largeur utile sur un écran étroit. */
  .tcol{background:none;border:none;padding:0;min-height:0}
  .tcol-head{font-size:11px}
  .tcol-body{gap:10px}
  .tcard{padding:12px 13px;border-radius:8px;cursor:default}
  .tc-titre{font-size:14px}
  .tc-meta{font-size:12px;gap:5px;margin-top:7px}
  .tc-meta .avatar{width:20px;height:20px;font-size:10px}
  .tc-act{gap:8px;margin-top:11px}
  /* Cibles tactiles : ces boutons sont le SEUL moyen de changer d'état
     sur téléphone, le glisser-déposer n'y étant pas praticable. */
  .tc-act .mini{min-height:38px;padding:0 13px;font-size:12.5px}
}

/* Rang dans la file « À planifier » — le tableau se lit comme une file
   d'attente, pas comme une liste triée : le 1 doit sauter aux yeux. */
.rang{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-soft);
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.rang-1{background:var(--warn);color:#fff}
[data-theme="dark"] .rang-1{color:#221C10}

/* ============================================================
   14 · MESSAGERIE — l'apparence
   ------------------------------------------------------------
   La structure est dans `styles/messagerie.css` : grilles, zones qui défilent,
   et le palier des 860 px. Ici, uniquement ce qui se voit — couleurs, rayons,
   typographie. ⚠️ Ne RIEN mettre ici qui touche à la disposition (`display`,
   `grid-template-columns`, `flex-direction`) : cette feuille est chargée en
   dernier, une règle sans media query y écraserait le palier mobile déclaré
   plus tôt. C'est exactement le défaut qui gardait la barre latérale de 236 px
   sur téléphone.
   ============================================================ */

.msg{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}

/* ---------- les conversations ---------- */

.msg-liste{ border-right:1px solid var(--line); }
.msg-liste-tete{ padding:14px 14px 12px; border-bottom:1px solid var(--line); }
.msg-liste-tete h2{ font-size:17px; letter-spacing:-.2px; }
.msg-cherche{
  width:100%; padding:9px 12px; font-size:13px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--surface-2); color:var(--ink);
}
.msg-cherche::placeholder{ color:var(--ink-faint); }

.msg-conv{ padding:11px 13px; border-bottom:1px solid var(--line-soft); }
.msg-conv:hover{ background:var(--surface-2); }
.msg-conv.on{ background:var(--accent-soft, var(--surface-2)); }
.msg-conv.on .msg-conv-nom{ color:var(--accent-ink); }
.msg-conv-nom{ font-size:13.5px; font-weight:600; color:var(--ink); }
.msg-conv.neuf .msg-conv-nom{ font-weight:800; }
.msg-conv-h time{ font-size:11px; color:var(--ink-faint); }
.msg-conv-p{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.msg-conv.neuf .msg-conv-p{ color:var(--ink); font-weight:600; }
.msg-conv-p i{ font-style:normal; color:var(--ink-faint); }
.msg-prospect{
  font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--warn); margin-left:6px;
}

.msg-ava{
  width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.3px;
}
.msg-pastille{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--bad); color:#fff; font-size:11px; font-weight:700;
}
.msg-vide-liste{ padding:26px 18px; text-align:center; font-size:12.5px; color:var(--ink-faint); }

/* ---------- le fil ---------- */

.msg-fil-tete{ padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.msg-fil-tete .msg-ava{ width:34px; height:34px; font-size:12px; }
.msg-fil-nom{ font-size:14.5px; font-weight:700; color:var(--ink); }
.msg-fil-sous{ font-size:11.5px; color:var(--ink-faint); }
.msg-retour{
  width:34px; height:34px; border-radius:9px;
  color:var(--ink); font-size:19px; line-height:1;
}
.msg-retour:hover{ background:var(--surface-2); }

/* Le fond légèrement teinté sépare la conversation du reste de l'application,
   comme le papier d'un carnet. */
.msg-bulles{ padding:16px 16px 10px; background:var(--surface-2); }

.msg-bulle{ padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.msg-bulle.lui{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-bottom-left-radius:5px;
}
.msg-bulle.moi{
  background:var(--accent); color:#fff;
  border-bottom-right-radius:5px;
}
.msg-pied{ font-size:10.5px; margin-top:4px; opacity:.72; }
.msg-bulle.moi .msg-pied{ color:#fff; }
.msg-bulle.lui .msg-pied{ color:var(--ink-faint); opacity:1; }
.msg-pied i{ font-style:normal; }
.msg-vu{ font-size:11px; }

.msg-jour{
  margin:8px 0 3px; padding:3px 11px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line);
  font-size:11px; font-weight:600; color:var(--ink-soft);
}

/* Une acceptation n'est pas une parole, c'est un fait : elle ne prend donc pas
   la forme d'une bulle, qui laisserait croire que quelqu'un l'a écrite. */
.msg-fait{
  margin:6px 0; padding:7px 13px; border-radius:10px;
  background:var(--ok-bg); color:var(--ink);
  font-size:12px; font-weight:600; line-height:1.45;
}

/* ---------- la saisie ---------- */

.msg-saisie{ padding:11px 13px; border-top:1px solid var(--line); background:var(--surface); }
.msg-saisie textarea{
  padding:10px 13px; font-size:13.5px; line-height:1.45;
  border:1px solid var(--line); border-radius:19px;
  background:var(--surface-2); color:var(--ink);
}
.msg-saisie textarea::placeholder{ color:var(--ink-faint); }
.msg-envoi{
  width:40px; height:40px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:15px;
}
.msg-envoi:hover{ filter:brightness(1.08); }

@media (max-width:720px){
  /* ⚠️ 16 px minimum : en dessous, iOS zoome la page à la mise au point et il
     faut dézoomer après chaque frappe. La règle vaut pour TOUT champ de
     saisie de l'application — celui-ci ne fait pas exception. */
  .msg-saisie textarea, .msg-cherche{ font-size:16px; }
  .msg-liste-tete{ padding:12px 12px 10px; }
  .msg-bulles{ padding:13px 12px 8px; }
  .msg-conv{ padding:12px 12px; }
  /* 44 px de haut : l'application se sert sur chantier, parfois avec des gants. */
  .msg-envoi{ width:44px; height:44px; }
  .msg-retour{ width:40px; height:40px; }
}