/* ============================================================
   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;
}
/* ⚠️ LA CASSE EST UNE AFFAIRE D'APPARENCE, PAS DE VALEUR. Le nom du bandeau
   était écrit « MICROBÉTON » en capitales dans `index.html` : en le sortant
   vers la configuration le 25/09/2026, chaque instance aurait dû penser à
   taper son nom en capitales — et la première qui l'aurait oublié aurait eu un
   bandeau différent des autres, sans savoir pourquoi. La configuration porte
   « Microbéton » et « Socle » ; c'est ici qu'on décide qu'ils s'affichent en
   capitales. */
.brand h1{font-size:13px;font-weight:600;letter-spacing:.9px;text-transform:uppercase}
.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)}

/* ⚠️ LE PONT VERS LA CONSOLE EST UN LIEN, ET UN LIEN SE SOULIGNE.
   Posé sans cette ligne, le pictogramme portait un trait que ses voisins
   n'ont pas — dans une rangée de boutons, un seul souligné ne se lit pas
   comme un lien, il se lit comme un défaut. */
a.icon-btn{text-decoration:none}

/* ⚠️ ET UNE CASE VIDE NE PREND PAS DE PLACE. La barre du haut est une
   rangée flex à 14 px d'écart : l'emplacement du pont, vide chez toute
   instance qui ne déclare pas de console — c'est-à-dire chez tous les
   clients — y ajouterait un trou de 14 px que personne ne saurait
   expliquer. */
#versConsole:empty{display:none}

/* 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}
/* ⚠️ UN LIBELLÉ GARDE LA MÊME HAUTEUR, AVEC OU SANS BULLE D'AIDE. Le « i »
   mesuré au navigateur le 26/09/2026 faisait passer le libellé de 15,9 à
   17,1 px : dans une rangée de réglages, le champ d'à côté descendait d'un
   pixel et demi, et les trois colonnes ne s'alignaient plus. Un `flex` avec
   une hauteur minimale range le texte et la bulle sur la même ligne, quelle
   que soit la hauteur de la bulle. */
.field label{font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:4px;
  display:flex;align-items:center;gap:5px;min-height:17px}
/* ⚠️ ET UN CONTRÔLE A UNE SEULE HAUTEUR. À padding, police et bordure
   identiques, un `<select>` rendait 33 px et un `<input>` 31 : côte à côte
   dans une même rangée, les deux champs ne s'asseyaient pas sur la même ligne.
   Ce n'est pas un réglage de goût — c'est la différence de rendu natif entre
   les deux balises, et elle ne se voit qu'à l'œil, jamais dans le code.
   ⚠️ LES CASES À COCHER ET LES CURSEURS SONT EXCLUS : ils gardent leur dessin
   natif, et leur imposer 33 px en ferait des rectangles. */
/* ⚠️ PAS DE RETOUR À LA LIGNE AU MILIEU D'UN SÉLECTEUR COMPOSÉ : une espace
   entre deux `:not()` vaut un COMBINATEUR DESCENDANT, et la règle ne vise plus
   rien. Écrite sur deux lignes, elle n'a rien fait — mesuré au navigateur, les
   contrôles restaient à 31 et 33 px. */
.field :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select){min-height:33px}
/* ⚠️ LA MÊME RÈGLE POUR UNE LIGNE DE DEVIS, QUI N'EST PAS UN `.field`.
   Mesuré à 1440 px le 26/09/2026 : les quatre `<input>` de la rangée rendaient
   31 px et les trois `<select>` 33. C'est le même écart natif que dans les
   réglages, au même endroit de la page — et il n'avait été corrigé que là.
   ⚠️ UNE SEULE LIGNE : une espace au milieu d'un sélecteur composé vaut un
   combinateur descendant, et la règle ne viserait plus rien. */
.dev-ligne :where(input,select){min-height:33px}
.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,.lc-grid select,.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)}
  /* ⚠️ LA DERNIÈRE ACTION DE LA BARRE PORTE LA COULEUR. Elles étaient toutes
     PÂLES : « Brouillon » et « Créer & envoyer » côte à côte, du même gris,
     sur la barre qu'on touche pour finir un devis — rien ne disait laquelle
     était le geste. C'est le défaut déjà corrigé sur les boutons photo le
     24/09/2026, à l'endroit où il coûte le plus.
     ⚠️ LA RÈGLE PORTE SUR LA POSITION, PAS SUR UNE CLASSE : `.btn.send`,
     `.btn.ok` et `.btn.draft` appartiennent à la même famille pâle — ce sont
     des variantes de CONTOUR, pas des niveaux d'importance. Vouloir en teindre
     une rendrait prune tous les boutons d'envoi de l'application.
     ⚠️ ET LA POSITION DIT VRAI : dans les cinq barres du projet, la dernière
     est le geste principal — envoyer, créer, terminer. « Annuler » et
     « Supprimer » ont quitté cette barre le 22/09/2026, justement parce
     qu'elle ne porte que le geste qu'on répète.
     ⚠️ UN SEUL EN COULEUR, JAMAIS DEUX : deux boutons pleins côte à côte ne
     désignent plus rien. */
  .actionbar > .btn:last-child{
    background:var(--accent);border-color:var(--accent);color:#fff}
  .actionbar > .btn:last-child:hover{
    background:var(--accent-fonce);border-color:var(--accent-fonce)}
  /* ⚠️ PLUS D'ANGLES ARRONDIS EN HAUT : la fenêtre prend tout l'écran depuis
     le 26/09/2026 (voir `mobile.css`, « une fenêtre est une PAGE »). Deux
     coins arrondis contre le bord de l'écran laissent voir le fond à travers
     et rappellent la vignette qu'on vient de supprimer. */
  .modal{border-radius: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%;border-radius:0}
  .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.
     ⚠️ `minmax(0,1fr)` ET NON `1fr` — UN PIXEL DE DIFFÉRENCE D'ÉCRITURE, ET
     TOUTE LA PAGE PARTAIT DE TRAVERS. Le minimum automatique d'une piste
     `1fr` vaut `auto`, c'est-à-dire le MIN-CONTENT de ce qu'elle porte : une
     rangée de boutons qui ne se coupe pas suffit à faire grandir la colonne.
     Mesuré à 390 px le 26/09/2026 : la piste faisait **404 px** dans un
     conteneur de 358, la page prenait 420 px de large, et tout se lisait
     décalé vers la gauche — le fil d'Ariane, les titres, les cartes. Capture
     à l'appui. *Une colonne ne doit jamais être plus large que ce qui la
     contient, et c'est à la grille de le dire, pas à son contenu.* */
  .tboard{grid-template-columns:minmax(0,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; }
}