/* Carnet de terrain — papier topo, encre sapin, rouge swisstopo.
   Tokens + états colorés partagés : static/charte.css (chargé AVANT ce fichier,
   commun avec la popup/widget tray). Ici : tout le reste (métriques app). */
body {
  margin: 0;
  font: 15px/1.5 var(--sans);
  min-height: 100vh;
}
main { max-width: 880px; margin: 0 auto; padding: 1.2rem 1rem 4rem; }

/* ---- entete ---- */
.entete {
  background: var(--carte); border-bottom: 2px solid var(--encre);
  box-shadow: var(--ombre); position: sticky; top: 0; z-index: 5;
}
.marque {
  max-width: 880px; margin: 0 auto; padding: .9rem 1rem .3rem;
  display: flex; align-items: center; gap: .7rem;
  --ctrl-h: 2rem;                    /* hauteur commune des controles d'en-tete */
}
.croix { font-size: 1.3rem; }   /* ज : couleur/famille dans charte.css */
.marque h1 {
  margin: 0; font-family: var(--sans-fort); font-weight: 600;
  font-size: 1.55rem; letter-spacing: -.01em;
}
.cote { margin-left: auto; font-family: var(--mono); font-size: .72rem;
        color: var(--encre-2); letter-spacing: .08em; text-transform: uppercase; }
.sel-domaine { position: relative; margin-left: 1.2rem; }
.sel-domaine summary {
  list-style: none; cursor: pointer; user-select: none;
  font: 600 .85rem var(--sans-fort); color: var(--encre);
  background: var(--papier); border: 1.5px solid var(--encre);
  border-radius: 4px; padding: 0 .6rem;
  height: var(--ctrl-h); display: inline-flex; align-items: center; gap: .25rem;
}
.sel-domaine summary:hover, .sel-domaine[open] summary { border-color: var(--rouge); }
.sel-domaine summary b { color: var(--rouge); font-weight: 600; }
.sel-label {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--encre-2); margin-right: .2rem;
}
.sel-panneau {
  position: absolute; left: 0; top: 2.1rem; z-index: 20; min-width: 190px;
  background: var(--carte); border: 1px solid var(--encre); border-radius: 5px;
  padding: .6rem .7rem; box-shadow: 0 10px 24px -10px rgba(34,46,53,.5);
  display: flex; flex-direction: column; gap: .35rem;
}
.sel-case { display: flex; align-items: center; gap: .45rem;
            font-size: .85rem; cursor: pointer; }
.sel-case input { accent-color: var(--rouge); }
.sel-boutons { display: flex; justify-content: space-between; align-items: baseline;
               margin-top: .4rem; border-top: 1px solid rgba(34,46,53,.15); padding-top: .5rem; }
.sel-boutons button:first-child {
  font: 600 .78rem var(--sans-fort); cursor: pointer;
  background: var(--rouge); color: #fff; border: 1px solid var(--rouge);
  border-radius: 3px; padding: .2rem .7rem;
}
.fil .cote { font-size: .68rem; margin-left: .8rem; }

/* tri : segments dans l'en-tete */
.sel-tri { display: flex; align-items: stretch; gap: 0; margin-left: .9rem;
           height: var(--ctrl-h);
           border: 1.5px solid var(--encre); border-radius: 4px; overflow: hidden; }
.sel-tri .sel-label { padding: 0 .5rem; border-right: 1px solid rgba(34,46,53,.25);
                      display: inline-flex; align-items: center; }
/* tri combine : le segment entier est poignee (comme les tuiles) --
   clic = activer/desactiver la cle, maintenir = glisser pour reordonner */
.sel-tri button {
  font: 500 .8rem var(--sans-fort); color: var(--encre-2);
  background: var(--papier); border: none; cursor: pointer;
  padding: 0 .6rem; border-right: 1px solid rgba(34,46,53,.15);
  display: inline-flex; align-items: center;
}
.sel-tri button:last-child { border-right: none; }
.sel-tri button:hover { color: var(--rouge); }
.sel-tri .tri-seg.actif { background: var(--encre); color: var(--papier); }
.sel-tri .tri-seg.actif:hover { color: #f0c9b9; }
.sel-tri .tri-seg.tenue { box-shadow: inset 0 0 0 99px rgba(34,46,53,.08), var(--ombre-tenue); }
.sel-tri .tri-seg.drag { opacity: .4; }
/* comme la tuile : doigt sur le texte (clic), main poignee ailleurs (drag) */
.sel-tri .tri-seg { cursor: grab; }
.sel-tri .tri-seg:active { cursor: grabbing; }
.sel-tri .tri-txt { cursor: pointer; }
.onglets { max-width: 880px; margin: 0 auto; padding: 0 1rem; display: flex; gap: .2rem; }
.onglets { flex-wrap: wrap; }
.onglets a {
  padding: .45rem .7rem .55rem; text-decoration: none; color: var(--encre-2);
  font-weight: 500; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; position: relative; top: 2px;
  white-space: nowrap;
}
.onglets a b { font-family: var(--mono); font-size: .75rem; color: var(--rouge);
               font-weight: 500; margin-left: .15rem; }
.onglets a.actif {
  background: var(--papier); color: var(--encre);
  border-color: var(--encre); border-bottom: 2px solid var(--papier);
}
.onglets a:hover:not(.actif) { color: var(--encre); }


/* ---- titres ---- */
.titre-vue {
  font-family: var(--sans-fort); font-weight: 600; font-size: 1.4rem;
  margin: 1rem 0 1.2rem; display: flex; align-items: baseline; gap: .8rem;
}
.compte { font-family: var(--mono); font-size: .85rem; color: var(--rouge); }
.bascule { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--encre-2); }
.fil { font-size: .85rem; margin-top: .8rem; }
.fil a, .bascule { text-decoration: none; border-bottom: 1px dotted var(--encre-2); color: var(--encre-2); }
.vide { color: var(--encre-2); font-style: italic; padding: 2rem 0; text-align: center; }
.titre-vue .form-refresh { display: inline; }
.titre-vue .form-refresh button.bascule {
  margin-left: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 400;
}
.refresh-msg { font-family: var(--mono); font-size: .8rem; color: var(--encre-2); margin: -.6rem 0 1rem; }

/* ajout de liste depuis les referentiels (vue Listes) */
.ajout-liste { display: flex; gap: .8rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.ajout-liste form { display: flex; gap: .35rem; }
.ajout-liste input, .ajout-liste select {
  font: .82rem var(--sans); padding: .35rem .45rem; min-width: 220px;
  border: 1px solid rgba(34,46,53,.35); border-radius: 4px; background: #fff;
}
.ajout-liste select { min-width: 0; }        /* selecteur de domaine compact */
.ajout-liste button {
  font: 600 .78rem var(--sans-fort); cursor: pointer; white-space: nowrap;
  background: var(--sapin); color: #fff; border: none; border-radius: 4px; padding: .35rem .7rem;
}
.ajout-liste button:hover { background: var(--sapin-2); }

/* ---- groupes ---- */
.groupe { margin-bottom: 1.6rem; }
.groupe h3 {
  margin: 0 0 .4rem; font-size: .95rem; font-weight: 600;
  display: flex; align-items: baseline; gap: .6rem;
}
.groupe h3 a { color: var(--sapin); text-decoration: none; }
.groupe h3 a:hover { text-decoration: underline; }
.client { font-size: .75rem; color: var(--encre-2); font-weight: 400; }
.qui { color: var(--ambre); font-family: var(--mono); }
.domaine {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem !important; color: var(--encre-2);
  border-bottom: 1px solid var(--encre); padding-bottom: .25rem;
}

/* ---- taches ---- */
.taches { list-style: none; margin: 0; padding: 0; }
.tache {
  position: relative;
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--carte); border: 1px solid rgba(34,46,53,.18);
  /* 6 px ET NON 4 : c'est la BANDELETTE de priorite qui commande ce nombre.
     Le rayon INTERIEUR d'un coin vaut le rayon exterieur MOINS l'epaisseur de
     la bordure (CSS Backgrounds 3, 5.2), plancher a 0. A 4 px de rayon pour une
     bande de 4 px, la courbe etait entierement mangee par l'epaisseur : seul le
     lisere gris de 1 px s'arrondissait, la bande rouge se terminait a plat --
     elle ne suivait pas l'arrondi de la tuile. A 6 px il reste 2 px de rayon
     interieur, et la bande s'incurve. Valeur du tray (tray.html), ou l'aspect
     etait juste depuis toujours ; alignement demande par Thierry le 17.08.
     Consequence assumee : les QUATRE coins de la tuile s'arrondissent d'autant
     -- on ne peut pas arrondir la bande sans arrondir la tuile, c'est la meme
     courbe. Ne pas "corriger" ce 6 sans regarder la bande. */
  border-radius: 6px; padding: .45rem .6rem; margin-bottom: .35rem;
  box-shadow: var(--ombre);
}
/* UNE TUILE QUI A UN PANNEAU OUVERT PASSE AU-DESSUS DES SUIVANTES.
   Indispensable depuis que `.tache` est `position: relative` (s14, pour ancrer
   la fenetre d'edition) : des tuiles positionnees SANS z-index s'empilent dans
   l'ordre du DOM, donc la tuile du dessous se dessinerait PAR-DESSUS le menu ou
   la carte de celle du dessus -- un panneau a moitie mange, sans erreur pour le
   signaler. Le z-index de `.menu` (10) ne suffit pas : il ne joue qu'a
   l'interieur du contexte de SA tuile. */
/* LES QUATRE PANNEAUX, ET NON DEUX. La regle ne couvrait que le menu et
   l'editeur ; le menu de PRIORITE et celui de DATE ouvrent eux aussi un panneau
   `position: absolute` qui deborde sous la tuile (z-index 15 et 12), et la tuile
   suivante se peignait dessus exactement pareil. Trou d'origine (s14), trouve en
   sondant les trois panneaux le 29.07 -- le defaut signale ne portait que sur le
   menu, mais le mecanisme ne connait pas la difference. */
.tache:has(.tmenu[open]),
.tache:has(.prio[open]), .tache:has(.badge-date[open]) { z-index: 20; }
.tache.sous { margin-left: 1.6rem; }
.tache.faite { opacity: .65; box-shadow: none; }
.tache.contexte { opacity: .55; box-shadow: none; background: var(--papier-2); }
.tache.contexte .nom::after { content: " (tâche parente)"; font-size: .72rem;
                              font-style: italic; color: var(--encre-2); }

/* bordure gauche = priorite (miroir TW : 1=haute) ; couleurs .prio-b-N dans charte.css */
/* NE PAS REMETTRE LE RACCOURCI `border-left: 4px solid`. Il paraît anodin et
   il EFFACE la couleur : un raccourci reinitialise toutes ses sous-proprietes,
   donc `border-left-color` retombe a `currentColor` (l'encre) et ecrase les
   `.tache.prio-b-N` de charte.css. C'est ainsi que les couleurs de priorite
   ont disparu -- sans erreur, sans avertissement. Deux proprietes distinctes
   ne touchent QUE ce qu'elles nomment.
   La couleur vit dans charte.css avec les variables --prio-N ; elle n'est
   volontairement pas dupliquee ici. */
.tache { border-left-width: 4px; border-left-style: solid; }
.prio-heritee { border-left-style: dashed; } /* priorite heritee d'une sous-tache */
.coche button {
  width: .86rem; height: .86rem; margin-top: .22rem; cursor: pointer;
  border: 1.5px solid #c9c5ba; border-radius: 3px; background: transparent;
}
.coche button:hover { background: var(--sapin); box-shadow: inset 0 0 0 2px var(--carte); }
/* Case PLEINE d'une tache terminee = un ज blanc sur sapin (16.09, choix de
   Thierry sur planche). `.croix` (charte.css) lui donne la police du logo,
   Nirmala UI sous Windows, le repli systeme ailleurs -- on ne redit que la
   couleur, qu'elle fixe au rouge. 150 % de la case courante (.86 -> 1.29rem),
   et la ligne se centre VERTICALEMENT sur la case, la ou une tuile ouverte
   aligne tout en haut (`align-items: flex-start`, `margin-top` de la case) :
   une ligne terminee n'a ni sous-menu ni badges empiles, rien a aligner en
   haut. */
.coche .pleine {
  background: var(--sapin); color: var(--carte); font-size: .9rem; line-height: 1;
  width: 1.29rem; height: 1.29rem; margin-top: 0; padding: 0 0 .1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.tache.faite { align-items: center; }
/* Un filet sapin vertical separe la case du texte (Thierry, 16.09, croquis) :
   il court sur toute la hauteur du contenu (`align-self: stretch`), donc sur
   les deux lignes d'un nom long, et pas seulement sur la premiere. */
.tache.faite .corps {
  align-self: stretch; border-left: 1.5px solid var(--sapin); padding-left: .55rem;
}
/* nowrap : les badges restent TOUJOURS sur la 1re ligne a droite (uniforme,
   decision Thierry 2026-07-21) ; le nom se replie dans sa zone (min-width 0) */
.corps { flex: 1; display: flex; flex-wrap: nowrap; gap: .3rem .6rem; align-items: baseline; }
.nom { flex: 1 1 60%; }

/* ---- menu de tuile : ouvert par le LIBELLE (s14) ------------------------
   Le bouton ⋯ a disparu ; son menu est desormais celui du nom. `position:
   relative` fait de ce <details> le repere du `.menu` absolu qui suit.
   LE TAP NE PORTE QUE SUR LE TEXTE (decision Thierry) : c'est `<summary>` qui
   est cliquable, pas la tuile -- donc aucun conflit avec le defilement d'une
   colonne ni le balayage entre colonnes. */
.tmenu { position: relative; flex: 1 1 auto; min-width: 0; }
.tmenu > summary { list-style: none; cursor: pointer; user-select: none; }
.tmenu > summary::-webkit-details-marker { display: none; }
.tmenu > summary:hover { color: var(--sapin); }
.tmenu[open] > summary { color: var(--sapin); font-weight: 500; }
.marque-rem { color: var(--sapin); font-family: var(--mono); font-size: .75rem; }
/* le menu du nom s'ouvre a GAUCHE (le nom commence a gauche), la ou celui du ⋯
   s'alignait a droite : sans cela il sortirait de la tuile sur 390 px. */
.tmenu > .menu { right: auto; left: 0; top: 1.5rem; }
.tm-edit {
  font: .75rem var(--mono); text-align: left; background: var(--papier-2);
  color: var(--encre); border: 1px solid rgba(34,46,53,.3); border-radius: 3px;
  padding: .2rem .45rem; cursor: pointer;
}
.tm-edit:hover { border-color: var(--sapin); color: var(--sapin); }

/* ---- editeur d'une tache : CARTE MODALE depuis le 14.09 (s38) ----------
   `carteEditionTache()` (rendu.js) reprend `.he-fond` / `.he-carte` /
   `.he-champ` de heures.css -- le moule de l'editeur d'heures et du panneau
   « Deplacer vers... ». La fenetre `.remarques[open] > .rem-edit` posee en
   absolu sous la tuile (s14) est PARTIE : sur la derniere tuile d'une colonne
   elle sortait du `.kanban`, dont l'`overflow-x: auto` force `overflow-y:
   auto` -- rognee sur iPhone. Ne restent ici que ce que la carte AJOUTE au
   moule : le textarea et la note d'une sous-tache. */
.he-champ textarea {
  font: 16px var(--sans); padding: .5rem; width: 100%; min-height: 5.5rem;
  border: 1px solid var(--bord-fort); border-radius: 4px; background: #fff;
  color: var(--encre); text-transform: none; resize: vertical;
}
.te-note { font: .72rem var(--sans); font-style: italic; text-transform: none;
           color: var(--encre-2); }
/* rangee echeance : champ souple + raccourcis fixes (miroir .ce-rang du widget) */
.re-rang { display: flex; align-items: center; gap: .3rem; }
.re-rang .re-ech { flex: 1 1 auto; min-width: 0; width: auto; font-family: var(--mono); }
.btn-mini {
  flex: none; font: .68rem var(--mono); text-transform: uppercase;
  letter-spacing: .05em; background: var(--papier-2); color: var(--encre);
  border: 1px solid var(--bord); border-radius: 3px; padding: .22rem .4rem;
  cursor: pointer;
}
.btn-mini:hover { border-color: var(--sapin); color: var(--sapin); }
/* COTE DROIT : UNE SEULE LIGNE depuis s14 (Thierry, capture a l'appui --
   « texte et date sur la meme ligne »).
   C'ETAIT UNE PILE VERTICALE, et il le fallait tant que le `⋯` existait : lui
   et la date ne tenaient pas cote a cote. Le bouton parti, ses 34 px sont
   libres -- la date remonte donc a cote du libelle.
   POURQUOI ELLE NE REMONTAIT PAS TOUTE SEULE, mesure : `.badges-haut` reste
   dans le DOM meme VIDE (0 px de haut sur la plupart des tuiles, le badge
   d'horizon etant masque au kanban). En colonne, il formait un premier etage
   invisible sous lequel la date tombait -- et comme `.corps` aligne sur la
   BASELINE, c'est celle de cet etage vide qui servait de reference.
   `wrap` conserve : une tuile a plusieurs tags doit pouvoir redescendre plutot
   que de deborder. `min-width: 0` pour que le libelle puisse ceder la place. */
.badges { display: flex; flex-direction: row; align-items: baseline;
          flex-wrap: wrap; justify-content: flex-end;
          gap: .22rem .3rem; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.badges-haut { display: flex; flex-wrap: wrap; justify-content: flex-end;
               align-items: center; gap: .22rem .3rem; }
.badge {
  font-family: var(--mono); font-size: .68rem; padding: .05rem .4rem;
  border-radius: 3px; border: 1px solid currentColor; white-space: nowrap;
}
.badge.attente { color: var(--ambre); }
/* tags generiques (miroir TW) : pastille de la couleur du tag + nom */
/* contour tres leger, fond transparent */
.badge.tag { display: inline-flex; align-items: center; gap: .28rem;
             border-color: rgba(34,46,53,.12); }
.badge.tag .tdot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--encre-2); flex: none;
}
/* icone de tag par regle (TAG_ICONES app.py, ex 'attente' -> ⧗), couleur du tag */
.badge.tag .tico { font-size: .85em; line-height: 1; color: var(--ambre); flex: none; }
/* retrait task-scoped : dissocie CE tag de CETTE tache (pas de suppression globale) */
/* PLUS DE × SUR LE BADGE, NULLE PART (Thierry, 30.07, jimma #3384). Il etait
   masque par `opacity: 0` -- ce qui le laisse DANS LE FLUX -- et revele au
   survol : sur l'iPhone, ou aucun survol ne se produit, il restait donc
   invisible ET encombrant, 12,7 px de vide a droite de chaque tag (mesure).
   Le reserver au bureau par `@media (hover: hover)` marchait, mais faisait
   DEUX comportements a verifier a chaque retouche du badge, dans deux regimes
   que le banc ne distingue que par la largeur de fenetre. Thierry a tranche
   pour un seul comportement : la croix disparait aussi sur PC.
   Un tag se retire par le champ tags du menu `⋯`, qui remplace le jeu entier.
   Le gabarit Flask garde SA croix et sa route : c'est une autre app, elle n'a
   pas d'ecran tactile, et je n'y touche pas sans qu'on me le demande. */

/* ---- vue Terminées ---- */
/* Un seul champ, pleine largeur jusqu'a 26 rem : c'est un filtre, pas un
   formulaire -- rien a envoyer, la liste se reduit sous la frappe. */
.filtre-terminees {
  display: block; width: 100%; max-width: 26rem; margin: 0 0 1rem;
  font: .9rem var(--sans); padding: .4rem .55rem;
  border: 1px solid rgba(34,46,53,.3); border-radius: 4px; background: #fff;
}
.badge.liste { color: var(--encre-2); text-decoration: none; }
.badge.liste:hover { color: var(--sapin); }
.badge.auj { color: var(--rouge); }
.badge.sem { color: var(--sapin); }
.badge.date { color: var(--date-loin); border: none; }   /* dates sans cadre ;
   `--date-loin` = 4e echelon de l'echelle (charte.css), plus loin que demain */

/* priorite : pastille devant la tache -> menu de choix */
.prio { position: relative; }
.prio summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: .95rem; line-height: 1.3; padding: 0 .15rem;
}
.prio summary::-webkit-details-marker { display: none; }
.prio summary:hover { transform: scale(1.25); }
.prio-menu {
  position: absolute; left: 0; top: 1.5rem; z-index: 15; width: 120px;
  background: var(--carte); border: 1px solid var(--encre); border-radius: 5px;
  padding: .35rem; box-shadow: 0 10px 24px -10px rgba(34,46,53,.5);
  display: flex; flex-direction: column; gap: .15rem;
}
.prio-menu button {
  font: .8rem var(--sans); text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 3px; padding: .2rem .4rem;
}
.prio-menu button:hover { background: var(--papier-2); }
/* couleurs .prio-N dans charte.css */

/* echeance editable au clic */
.badge-date { position: relative; display: inline-block; }
.badge-date summary { list-style: none; cursor: pointer; user-select: none; display: inline-block; }
.badge-date summary::-webkit-details-marker { display: none; }
.badge.date.vide { color: rgba(34,46,53,.3); }
/* états retard/aujourd'hui/demain dans charte.css */
.badge-date summary:hover { color: var(--rouge); }
.date-edit {
  position: absolute; right: 0; top: 1.4rem; z-index: 15; width: 165px;
  background: var(--carte); border: 1px solid var(--encre); border-radius: 5px;
  padding: .4rem; box-shadow: 0 10px 24px -10px rgba(34,46,53,.5);
  display: flex; flex-direction: column; gap: .35rem;
}
.date-ligne { display: flex; gap: .3rem; align-items: center; }
.date-rapide { display: flex; flex-direction: column; gap: .12rem;
               border-top: 1px solid rgba(34,46,53,.15); padding-top: .35rem; }
.date-rapide button {
  font: .78rem var(--sans); font-weight: 400; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 3px; padding: .18rem .4rem;
  color: var(--rouge);
}
.date-rapide button:hover { background: var(--papier-2); }
.date-edit input[type=date] {
  font: .78rem var(--mono); padding: .15rem .3rem;
  border: 1px solid rgba(34,46,53,.3); border-radius: 3px; background: #fff;
}
.date-edit button {
  font: 700 .8rem var(--mono); cursor: pointer; color: var(--rouge);
  background: none; border: 1px solid rgba(34,46,53,.3); border-radius: 3px;
  padding: .1rem .35rem;
}

/* menu actions par tache */
.actions { position: relative; }
.actions summary { cursor: pointer; list-style: none; color: var(--encre-2);
                   padding: 0 .3rem; user-select: none; }
.actions[open] summary { color: var(--rouge); }
.menu {
  position: absolute; right: 0; top: 1.4rem; z-index: 10; width: 240px;
  background: var(--carte); border: 1px solid var(--encre); border-radius: 5px;
  padding: .5rem; box-shadow: 0 10px 24px -10px rgba(34,46,53,.5);
  display: flex; flex-direction: column; gap: .35rem;
}
.menu form { display: flex; gap: .3rem; flex-wrap: wrap; }
.menu button {
  font: .75rem var(--mono); background: var(--papier-2); color: var(--encre);
  border: 1px solid rgba(34,46,53,.3); border-radius: 3px;
  padding: .15rem .45rem; cursor: pointer;
}
.menu button:hover { border-color: var(--rouge); color: var(--rouge); }
/* BAS DU MENU ⋯ : « ✓ Terminer » et « 🗑 Supprimer » cote a cote sur une ligne
   (place demandee par Thierry le 27.07). Deux FORMULAIRES distincts -- ils
   POSTent des actions differentes -- donc un conteneur flex, et non un
   `flex-direction: row` pose sur `.menu` qui alignerait tout le reste avec.
   `.menu` etant en colonne, ce div est son seul enfant a s'ecarter du flux.
   Quand la coche est presente (partout sauf au kanban), le div ne contient que
   la corbeille : le rendu est alors identique a l'ancien. */
.menu-bas { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

/* « ✓ Terminer » du menu ⋯ (kanban mobile seulement, la ou la coche est retiree).
   Il porte l'accent ETUFOR et NON le rouge de survol commun : c'est l'action
   POSITIVE du menu, et depuis le 27.07 elle est le VOISIN IMMEDIAT de la
   corbeille -- la distinguer n'est plus un confort, c'est ce qui empeche de
   supprimer en croyant terminer. */
.menu .fini { border-color: var(--sapin); color: var(--sapin); }
.menu .fini:hover { background: var(--sapin); border-color: var(--sapin); color: var(--papier); }
.menu .ligne input { flex: 1; min-width: 0; }
.menu input {
  font: .78rem var(--sans); padding: .2rem .35rem;
  border: 1px solid rgba(34,46,53,.3); border-radius: 3px; background: #fff;
}

/* ---- ajout ---- */
.ajout { display: flex; gap: .4rem; margin: .8rem 0 1.2rem; flex-wrap: wrap; }
.ajout input[name=nom] { flex: 1 1 260px; }
.ajout input, .ajout select {
  font: .9rem var(--sans); padding: .4rem .55rem;
  border: 1px solid var(--encre); border-radius: 4px; background: #fff;
}
.ajout button {
  font: 600 .85rem var(--sans-fort); cursor: pointer;
  background: var(--rouge); color: #fff; border: 1px solid var(--rouge);
  border-radius: 4px; padding: .4rem .9rem;
}
.ajout button:hover { background: #a93a27; }

/* ---- cartes mandats ---- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; }
.carte {
  background: var(--carte); border: 1px solid rgba(34,46,53,.22);
  border-radius: 5px; padding: .6rem .7rem; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: .15rem;
}
.carte.archivee { opacity: .55; background: var(--papier-2); }
.carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.carte-nom { font-weight: 600; color: var(--encre); text-decoration: none;
             flex: 1; }   /* pousse crayon + epingle a droite, cote a cote */
.carte-nom:hover { color: var(--rouge); }
.carte-client { font-size: .78rem; color: var(--sapin); }
.carte-type { font-size: .72rem; color: var(--encre-2); font-style: italic; }
.carte-pied { display: flex; justify-content: space-between; align-items: baseline; margin-top: .35rem; }
.stats { font-family: var(--mono); font-size: .7rem; color: var(--encre-2); }
.stats b { color: var(--rouge); }
.epingle {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: rgba(34,46,53,.35); padding: 0;
}
.epingle.fixee { color: var(--rouge); }
.lien {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: .75rem; color: var(--encre-2);
  border-bottom: 1px dotted var(--encre-2);
}
.lien:hover { color: var(--rouge); }

/* ---- panneau « déplacer vers… » (appui long sur la pastille ●, 31.07 / 14.09) ----
   LA FENETRE, ELLE, VIENT DE `.he-fond` / `.he-carte` (heures.css) : une seule
   definition de modale pour toute la PWA. Le prefixe dit « heures » et c'est
   trompeur, mais deux fenetres qui se ressemblent sans etre la meme le seraient
   davantage -- et le « tirer pour actualiser » teste DEJA `.he-fond` pour
   s'abstenir quand une fenetre est ouverte. Ici ne vivent que les choix.
   PROPRE A LA PWA : Flask garde son glisser-deposer a la souris, ce panneau
   n'existe que pour le doigt. La feuille de Flask ne le porte donc pas. */
.mv-tache { margin: 0; font-size: .82rem; font-style: italic; color: var(--encre-2); }
/* Le choix est un SELECT (`.he-champ`, heures.css) depuis le 14.09 -- variante
   C tranchee par Thierry : la pile de 35 boutons demandait deux ecrans de
   defilement dans la carte. `.mv-groupe` / `.mv-choix` sont partis avec elle. */

/* ---- carte : modification d'une liste libre (31.07) ----
   Le crayon reprend le style de l'epingle -- meme role (une commande discrete
   dans la tete de la carte), donc meme poids visuel : deux styles differents
   pour deux boutons voisins se liraient comme deux natures differentes.
   `.fixee` (rouge) marque la carte OUVERTE, exactement comme l'epingle marque
   une liste epinglee : c'est le seul repere quand on defile une grille de
   cartes et qu'on ne voit plus le formulaire.
   `.carte-modif` porte de quoi tenir un <a> AUTANT qu'un <button> : Flask fait
   basculer l'ouverture par une URL (`?edit=`), la PWA par un clic -- meme
   apparence, deux natures d'element.
   Le formulaire, lui, s'insere DANS la carte, entre le type et le pied. */
.carte-modif { text-decoration: none; line-height: 1; }
.carte-edit {
  display: flex; flex-direction: column; gap: .3rem;
  margin: .35rem 0 .1rem; padding-top: .35rem;
  border-top: 1px solid rgba(34,46,53,.18);
}
.carte-edit input, .carte-edit select {
  font: .82rem var(--sans); padding: .3rem .4rem; min-width: 0;
  border: 1px solid rgba(34,46,53,.35); border-radius: 4px; background: #fff;
}
.carte-edit-pied { display: flex; justify-content: space-between; align-items: baseline; }
/* Le rouge dit la destruction, comme partout ailleurs dans la charte -- il ne
   se gagne pas au survol ici, ce bouton EST le geste irreversible de la carte. */
.carte-suppr { color: var(--rouge); border-bottom-color: var(--rouge); }

/* ---- divers ---- */
.mandat-infos { margin: -.6rem 0 1rem; font-size: .85rem; color: var(--encre-2); }
.mandat-infos b { color: var(--sapin); }
.mandat-infos .cote { margin-left: .6rem; font-size: .68rem; }
.terminees summary { cursor: pointer; font-size: .85rem; color: var(--encre-2); margin: 1rem 0 .5rem; }
.pied {
  text-align: center; font-family: var(--mono); font-size: .68rem;
  color: var(--encre-2); padding: 1rem; letter-spacing: .05em;
}

/* ============================================================
   KANBAN — planche topographique (colonnes = stages TW)
   ============================================================ */
.kanban {
  position: relative; left: 50%; transform: translateX(-50%);
  width: 95vw; max-width: 1600px;
  display: flex; gap: .8rem; align-items: flex-start;
  overflow-x: auto; padding: .4rem .2rem 1.5rem;
}
.kcol {
  flex: 1 1 0; min-width: 264px;
  background: linear-gradient(var(--carte), var(--carte)) padding-box,
              rgba(34,46,53,.14);
  border: 1px solid rgba(34,46,53,.16); border-radius: 8px;
  box-shadow: var(--ombre); display: flex; flex-direction: column;
  --accent: var(--encre-2);
}
.k-illico   { --accent: var(--acc-illico); }
.k-lets_go  { --accent: var(--acc-lets_go); }
.k-no_stress{ --accent: var(--acc-no_stress); }

/* en-tete de colonne : filet d'accent facon courbe de niveau */
.kcol-tete {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem .5rem;
  border-top: 3px solid var(--accent); border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--carte)), var(--carte));
}
.kcol-tete h2 {
  margin: 0; font: 600 1.025rem var(--sans-fort); letter-spacing: .06em;  /* .82rem +25% */
  text-transform: uppercase; color: var(--encre); flex: 1;
}
.kpastille { width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
             box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.kcount {
  font-family: var(--mono); font-size: .72rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--carte));
  border-radius: 10px; padding: .05rem .45rem; min-width: 1.4rem; text-align: center;
}
.kadd-btn {
  border: none; background: none; cursor: pointer; color: var(--accent);
  font-size: 1.25rem; line-height: 1; padding: 0 .1rem; opacity: .7;
}
.kadd-btn:hover { opacity: 1; transform: scale(1.15); }

/* zone de depot */
.kdrop { padding: .5rem; min-height: 60px; flex: 1; border-radius: 0 0 8px 8px;
         transition: background .12s; }
.kdrop.over { background: color-mix(in srgb, var(--accent) 12%, transparent);
              outline: 2px dashed var(--accent); outline-offset: -5px; }
.kcards { display: flex; flex-direction: column; gap: .5rem; }
.kvide { text-align: center; font-family: var(--mono); font-size: .7rem;
         color: rgba(34,46,53,.28); margin: .6rem 0; letter-spacing: .08em; }
.kcards:not(:empty) + .kvide { display: none; }

.kcard-badges { display: flex; gap: .3rem; margin-top: .35rem; flex-wrap: wrap; }

/* mini-formulaire d'ajout (replie par defaut) */
.kadd { display: none; flex-direction: column; gap: .35rem; padding: .5rem .6rem;
        border-bottom: 1px dashed rgba(34,46,53,.2);
        background: color-mix(in srgb, var(--accent) 5%, var(--carte)); }
.kadd.ouvert { display: flex; }
.kadd select, .kadd input {
  font: .82rem var(--sans); padding: .35rem .45rem; width: 100%;
  border: 1px solid rgba(34,46,53,.35); border-radius: 4px; background: #fff;
}
/* derniere ligne : pastilles de priorite a gauche, "Ajouter" a droite */
.kadd-ligne { display: flex; gap: .35rem; align-items: center; justify-content: space-between; }
/* `.kadd-ligne button` et NON `.kadd button` : depuis que le formulaire porte
   les raccourcis de date, `.kadd button` (0,1,1) l'emporterait sur `.btn-mini`
   (0,1,0) et peindrait AUJ/DEM/+7/x en aplat d'accent. */
.kadd-ligne button {
  font: 600 .78rem var(--sans-fort); cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: .35rem .7rem;
}

/* priorite a la creation : meme feu tricolore que le menu `.prio-menu` de la
   tuile (couleurs `.prio-N` de charte.css, d'ou le `currentColor` ci-dessous).
   Un `select` ne pouvant pas rendre les quatre couleurs, l'etat est porte par
   un bouton radio VISUELLEMENT MASQUE et montre par la pastille de son label.
   `.kadd .kprio input` (0,2,1) est indispensable : `.kadd input` (0,1,1)
   habillerait sinon le radio en champ de saisie pleine largeur. */
.kadd-prio { display: flex; gap: .15rem; align-items: center; position: relative; }
.kadd .kprio input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none;
}
.kprio {
  cursor: pointer; line-height: 1; font-size: 1rem;
  padding: .1rem .25rem; border: 1px solid transparent; border-radius: 4px;
}
.kprio:has(input:checked) {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* backlog : colonne normale, accent noir, cible de retrait au drop */
.kbacklog { --accent: var(--acc-backlog); }

/* repli des colonnes (les 4) -- deplie par defaut, etat client seulement */
.kplier { border: none; background: none; cursor: pointer; color: var(--accent);
          font-size: .85rem; line-height: 1; padding: 0 .15rem 0 0; transition: transform .15s; }
.kcol.replie .kplier { transform: rotate(-90deg); }
.kcol.replie { flex: 0 0 auto; }
.kcol.replie .kcol-tete h2 { flex: none; }
.kcol.replie .kadd, .kcol.replie .kadd-btn, .kcol.replie .kdrop { display: none; }

/* backlog organise par mandat (comme la vue "Tous") */
.kgroupe { margin-bottom: .7rem; }
.kgroupe-tete {
  position: sticky; top: 0; z-index: 1; background: var(--carte);
  /* meme taille que le texte d'une tache (15px corps) */
  font: 600 15px/1.4 var(--sans-fort); text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre); padding: .2rem 0 .3rem; margin-bottom: .4rem;
  border-bottom: 1px solid rgba(34,46,53,.14);
  display: flex; gap: .45rem; align-items: baseline;
}
.kgroupe-tete a { color: var(--encre); text-decoration: none; }
.kgroupe-tete a:hover { color: var(--rouge); }

/* UN PANNEAU OUVERT DESANCRE LES EN-TETES DE MANDAT DE SA COLONNE.
   SIGNALE PAR THIERRY SUR L'IPHONE le 29.07 (« une ligne mange la fenetre ») :
   le titre du mandat SUIVANT, son filet et son fond opaque se peignaient AU
   TRAVERS du menu d'une tuile -- une tranche entiere du menu disparaissait, ici
   la ligne ILLICO / LET'S GO.
   CE QUI DESIGNE LE COUPABLE, et c'est la capture qui l'a donne : titre en
   MAJUSCULES, filet dessous, fond opaque -- les trois sont propres a
   `.kgroupe-tete`, et a rien d'autre. Les vues plates, elles, coiffent leurs
   groupes d'un `h3` NON positionne : elles n'ont jamais montre le defaut.
   POURQUOI LE `z-index: 20` DE LA TUILE N'A PAS SUFFI : `position: sticky` fait
   de cet en-tete un element POSITIONNE, qu'iOS promeut en couche de composition
   propre a l'interieur d'un defilement. Une couche promue peut se peindre
   au-dessus d'un frere non promu quel que soit son `z-index` -- monter encore
   l'enchere n'aurait rien change. On retire donc la CAUSE : plus d'ancrage tant
   qu'un panneau est ouvert, donc plus de promotion possible.
   LE PRIX EST NUL A L'USAGE : `fermerMenus` (app.js) ferme au `pointerdown`, y
   compris celui qui amorce un defilement -- on ne fait donc jamais defiler la
   colonne avec un panneau ouvert, et l'ancrage ne manque a personne.
   NON REPRODUCTIBLE AU BANC : Chromium comme WebKit de bureau peignent
   correctement (hit-test ET pixels, mesure du 29.07). Le defaut appartient au
   compositeur de l'appareil -- ce que le banc peut verifier, c'est que l'ancrage
   tombe bien, pas que le rendu est juste. */
.kcol:has(.tmenu[open]) .kgroupe-tete,
.kcol:has(.prio[open]) .kgroupe-tete,
.kcol:has(.badge-date[open]) .kgroupe-tete { position: static; z-index: auto; }

/* badges horizon (vues listes ; masques au kanban) */
.badge.horizon { letter-spacing: .04em; }
.badge.h-illico    { color: var(--acc-illico); }
.badge.h-lets_go   { color: var(--acc-lets_go); }
.badge.h-no_stress { color: var(--acc-no_stress); }

.ksub-toggle {
  border: none; background: none; cursor: pointer; color: var(--encre-2);
  font: 600 .66rem var(--mono); margin-left: auto; padding: .05rem .25rem;
  display: inline-flex; align-items: center; gap: .12rem; border-radius: 3px;
}
.ksub-toggle:hover { background: rgba(34,46,53,.08); color: var(--encre); }
.ksub-toggle .chev { transition: transform .15s; display: inline-block; }

/* ज de l'en-tete = logo ET cible de drop "terminer" (remplace l'ex-✓ rond) :
   grossit et passe au sapin au survol d'un drag */
.kdone {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .2rem;
  transition: transform .14s, color .14s;
}
.kdone.over { transform: scale(1.9); color: var(--sapin); }

/* filtre priorites : 4 cercles cliquables dans l'en-tete (● actif / ○ masque) */
.sel-prio-cercles { display: flex; align-items: center; gap: .05rem; margin-left: .9rem;
                    height: var(--ctrl-h); }
.pcercle {
  border: none; background: none; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .1rem .15rem;
  transition: transform .1s;
}
.pcercle:hover { transform: scale(1.3); }
/* couleurs .pc-N dans charte.css */

/* toast d'annulation (quelques secondes) */
.ktoast {
  position: fixed; left: 50%; bottom: 1.4rem;
  transform: translateX(-50%) translateY(1.5rem);
  background: var(--encre); color: var(--papier); border-radius: 8px;
  padding: .55rem 1rem; font: .85rem var(--sans);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: .6rem;
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity .2s, transform .2s;
}
.ktoast.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ktoast button {
  font: 600 .78rem var(--sans-fort); cursor: pointer; color: var(--papier);
  background: none; border: 1px solid var(--papier); border-radius: 4px; padding: .15rem .6rem;
}
.ktoast button:hover { background: var(--papier); color: var(--encre); }

/* bouton de suppression (kanban + vues listes) */
.danger { background: var(--rouge); color: #fff; border: 1px solid var(--rouge); }
.danger:hover { background: #a93a27; border-color: #a93a27; }

/* ============================================================
   TUILE UNIFIEE -- un seul format partout (listes + kanban)
   ============================================================ */
.taches { list-style: none; margin: 0; padding: 0; }
.famille { margin-bottom: .1rem; }
/* poignee TENUE (mousedown hors zone interactive) : tuile ombree = "activee" */
.tache.tenue { box-shadow: var(--ombre-tenue); cursor: grabbing; }
.famille.drag { opacity: .45; }
.famille.part { transition: transform .16s, opacity .16s; transform: scale(.7); opacity: 0; }

/* toute la tuile est poignee (sauf zones interactives) : colonnes kanban /
   coche v / autre mandat. Le JS coupe le drag sur input/bouton/texte. */
.tache[draggable="true"] { cursor: grab; }
.tache[draggable="true"]:active { cursor: grabbing; }

/* sous-taches nichees, pliees par defaut (chevron dans la tuile parente) */
.ksub-toggle {
  border: none; background: none; cursor: pointer; color: var(--encre-2);
  font: 600 .68rem var(--mono); padding: .05rem .3rem;
  display: inline-flex; align-items: center; gap: .12rem; border-radius: 3px;
}
.ksub-toggle:hover { background: rgba(34,46,53,.08); color: var(--encre); }
.ksub-toggle .chev { transition: transform .15s; display: inline-block; }
.famille.ouvert > article .ksub-toggle .chev { transform: rotate(90deg); }
.enfants { display: none; margin: .1rem 0 .4rem 1.6rem;
           padding-left: .6rem; border-left: 2px solid rgba(34,46,53,.15); }
.famille.ouvert > .enfants { display: block; }

/* cible de changement de mandat (en-tete de groupe survolee pendant un drag) */
.drop-mandat.over {
  outline: 2px dashed var(--rouge); outline-offset: 3px;
  background: color-mix(in srgb, var(--rouge) 7%, transparent); border-radius: 4px;
}

/* adaptations kanban de la tuile */
.kanban .badge.horizon { display: none; }      /* redondant : la colonne le dit */
.kcards .tache { padding: .4rem .5rem; }
.kcards .corps { min-width: 0; }
.kgroupe .famille { margin-bottom: .3rem; }

/* ---- ⚙ Configuration : rangee du haut, tout a droite ---- */
.marque .config-lien {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctrl-h); width: var(--ctrl-h); flex: none;
  font-size: 1.2rem; line-height: 1; text-decoration: none;
  color: var(--encre-2); border-radius: 6px; margin-left: -.35rem;
}
.marque .config-lien:hover, .marque .config-lien.actif { color: var(--rouge); }

/* ---- page Configuration ---- */
.config { max-width: 640px; }
.config h1 {
  font-family: var(--sans-fort); font-weight: 600; font-size: 1.4rem; margin: 0 0 1rem;
}
.config section { margin: 0 0 1.4rem; }
.config h2 {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--sapin); margin: 0 0 .5rem;
  border-bottom: 1px solid var(--papier-2); padding-bottom: .25rem;
}
.config label { display: block; margin: .3rem 0; }
.config-check { display: flex; align-items: center; gap: .4rem; }
.config-check input { accent-color: var(--rouge); }
.config select, .config input[type=number], .config textarea {
  font-family: var(--sans); font-size: .9rem; padding: .25rem .4rem;
  border: 1px solid var(--encre-2); border-radius: 5px; background: var(--carte);
  color: var(--encre);
}
.config input[type=number] { width: 5rem; }
.config textarea { width: 100%; resize: vertical; margin-top: .3rem; }
.config .config-mono { font-family: var(--mono); font-size: .8rem; }
.config-aide { font-size: .8rem; color: var(--encre-2); margin: .2rem 0 .1rem; }
.config-aide code {
  font-family: var(--mono); font-size: .78rem; background: var(--papier-2);
  padding: .05rem .3rem; border-radius: 3px;
}
.config-avance {
  font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ambre); border: 1px solid var(--ambre);
  border-radius: 3px; padding: 0 .3rem; vertical-align: middle;
}
.config-erreurs {
  color: var(--rouge); font-size: .85rem; background: color-mix(in srgb, var(--rouge) 8%, transparent);
  border: 1px solid var(--rouge); border-radius: 6px; padding: .5rem .8rem .5rem 1.6rem; margin: 0 0 1rem;
}
.config-actions { margin-top: .5rem; }
.config-actions button {
  font-family: var(--sans-fort); font-weight: 600; font-size: .9rem;
  background: var(--rouge); color: #fff; border: 1px solid var(--rouge);
  border-radius: 6px; padding: .4rem 1.1rem; cursor: pointer;
}
/* rangée des onglets de la page Configuration : mêmes chips que le tri de
   l'en-tête, mais DIX segments — sans retour à la ligne, débordement garanti
   à 390 px (piège des 12 vues × 3 largeurs, s7). */
.config-onglets { flex-wrap: wrap; row-gap: .4rem; margin-left: 0; }

.config-reset {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--papier-2);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.config-reset .lien {
  background: none; border: none; color: var(--rouge); font: 500 .85rem var(--sans);
  cursor: pointer; padding: 0;
}
.config-reset .lien:hover { text-decoration: underline; }

/* =========================================================================
   Deplacement kanban depuis le menu ⋯ (indispensable au tactile : le
   glisser-deposer HTML5 natif ne fonctionne pas sur mobile).
   ========================================================================= */
.kmove { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
         padding: .25rem 0; border-top: 1px dashed rgba(34,46,53,.2); }
/* `.kmove-label` (le mot « Kanban ») RETIRE le 27.07 a la demande de Thierry --
   la regle part avec le balisage, elle ne servirait plus rien ici. Elle SURVIT
   dans `models/jimaya/static/style.css`, ou le gabarit Jinja emet encore le
   libelle : les deux feuilles ont DIVERGE sur ce point, c'est voulu. */
.kmove-b {
  border: 1px solid var(--bord); background: var(--carte); color: var(--encre);
  border-radius: 999px; padding: .2rem .5rem; cursor: pointer;
  font: 600 .66rem var(--sans-fort); letter-spacing: .05em; white-space: nowrap;
}
.kmove-b:hover { border-color: var(--bord-fort); }
.kmove-b.on { background: var(--sapin); border-color: var(--sapin); color: var(--papier); }

/* =========================================================================
   MOBILE (iPhone) -- UNE colonne kanban a la fois, navigation par SWIPE.
   Le swipe est NATIF (scroll-snap CSS) : aucun JS de geste, donc inertie et
   rebond iOS conserves. Le JS de kanban.html ne sert qu'au pager.
   ========================================================================= */
.kpager { display: none; }

@media (max-width: 820px) {
  /* --- debordement horizontal des formulaires (corrige s4) ----------------
     Mesure a 390 px : le 3e formulaire d'ajout de liste (select domaine 122 px
     + champ 220 px + bouton 61 px + ecarts) faisait 415 px, donc 41 px de trop,
     et TOUTE la page defilait lateralement. Le `min-width: 220px` du champ, utile
     au bureau, est un plancher infranchissable en flex : le champ ne pouvait pas
     retrecir, et le formulaire etait en `nowrap`.
     Correctif : on autorise le retour a la ligne DANS le formulaire et on rend le
     champ compressible (`min-width: 0`, indispensable -- la valeur `auto` par
     defaut d'un item flex l'empeche de passer sous sa taille de contenu).
     SPECIFICITE : selecteurs REPETES A L'IDENTIQUE (0,2,0). Une media query
     n'ajoute aucune specificite -- cf. l'episode de la roue crantee en s2. */
  .ajout-liste form { flex-wrap: wrap; }
  /* 16 px MINIMUM, QUATRIEME occurrence du meme defaut (carte d'edition,
     formulaire d'ajout, menu de date, page Configuration -- puis celui-ci,
     2026-07-27) : les champs etaient a `.82rem` (~13 px), et sous ce seuil
     Safari iOS ZOOME la page a la mise au point sans jamais y revenir. Il
     n'avait rien coute tant que la page Listes n'etait pas atteinte au doigt.
     La regle du bureau ne pose que `font`, pas `font-size` : la redeclarer
     seule ici la laisserait perdre -- d'ou les deux proprietes reprises en
     entier, selecteur REPETE a l'identique (0,2,0) comme partout ailleurs. */
  .ajout-liste input, .ajout-liste select {
    min-width: 0; flex: 1 1 10rem; font-size: 16px; padding: .45rem .5rem;
  }
  .ajout-liste button { flex: 0 0 auto; font-size: .9rem; padding: .45rem .8rem; min-height: 34px; }
  /* 16 px MINIMUM, CINQUIEME occurrence du meme defaut (31.07) : les deux
     champs de la carte de modification sont a `.82rem` (~13 px) au bureau, et
     sous ce seuil Safari iOS zoome a la mise au point sans jamais y revenir --
     ici c'est pire qu'ailleurs, la carte est etroite et le zoom la sort de
     l'ecran. Selecteur REPETE a l'identique (0,2,0) : une media query n'ajoute
     aucune specificite. `font` du bureau ne pose pas `font-size` seul, d'ou les
     deux proprietes reprises. */
  .carte-edit input, .carte-edit select {
    font-size: 16px; padding: .4rem .45rem;
  }

  /* Filtre des terminees : 16 px, meme piege du zoom iOS que les autres
     champs ; sans plafond de largeur, l'ecran est etroit. */
  .filtre-terminees { font-size: 16px; max-width: none; }
  /* --- en-tete ------------------------------------------------------------
     En PWA plein ecran (status-bar-style translucent + viewport-fit=cover) le
     contenu passe SOUS la barre d'etat iOS : le selecteur de domaines se faisait
     mordre par l'heure. On reserve donc une bande haute -- ou le SIGLE reste
     loge, car la place a gauche de l'heure serait perdue sinon -- et TOUT le
     reste tient sur UNE SEULE ligne dessous.
     PAS d'`overflow-x` ici : ca creerait un contexte de rognage qui DECOUPERAIT
     le panneau deroulant des domaines. On gagne la place autrement. */
  .entete { padding-top: max(env(safe-area-inset-top), 26px); }
  .marque {
    padding: 0 .5rem .3rem; gap: .3rem;
    flex-wrap: nowrap;                   /* tout sur une ligne */
    --ctrl-h: 1.7rem;
  }
  .marque > * { flex: none; }
  /* le sigle reste DANS la bande de la barre d'etat (repere = .entete, sticky) */
  .marque .croix {
    position: absolute; top: 0; left: .5rem;
    height: max(env(safe-area-inset-top), 26px);
    display: flex; align-items: center; font-size: 1.37rem;   /* +30 % */
  }
  /* marges laterales heritees du bureau : inutiles sur une ligne unique */
  .sel-domaine, .sel-tri, .sel-prio-cercles { margin-left: 0; }
  .sel-domaine summary { font-size: .83rem; padding: 0 .4rem; }   /* +15 % */
  /* Le libelle de domaines est le SEUL element de largeur VARIABLE de la ligne
     (« tous » 56 px, « Administration » 90 px). Il DEBORDAIT au pire cas :
     6 px a 360 px de large avant meme s7, et 13 px a 375 px pendant le court
     moment ou l'en-tete a porte DEUX boutons (⚙ + ⏻) -- MESURE, pas suppose.
     Le ⏻ est depuis parti dans la page Config, mais la regle RESTE : elle
     corrige le debordement preexistant a 360 px, et elle met la ligne a l'abri
     d'un libelle plus long. On laisse donc le libelle RETRECIR plutot que
     pousser, et il faut pour cela DEUX choses :
       1. defaire le `flex: none` de `.marque > *` ci-dessus -- c'est LUI le
          verrou (flex-shrink: 0), pas le min-width. Pose seul, `min-width: 0`
          n'avait rigoureusement aucun effet : mesure refaite, 13 px de
          debordement INCHANGES ;
       2. `min-width: 0`, sans quoi la valeur `auto` par defaut d'un item flex
          l'empeche de passer sous la taille de son contenu (cause des 41 px
          de s4).
     Selecteur `.marque > .sel-domaine` (0,2,0) : il doit l'emporter sur
     `.marque > *` (0,1,0). Effet a 390 px : AUCUN, le libelle entier tient. */
  .marque > .sel-domaine { flex: 0 1 auto; min-width: 0; }
  .marque .sel-domaine summary { max-width: 100%; }
  .marque .sel-domaine summary b {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sel-tri .sel-label { display: none; }  /* "TRI" : ~30 px rendus a la ligne */
  .sel-tri button { font-size: .81rem; padding: 0 .4rem; }        /* +15 % */
  .pcercle { font-size: .92rem; padding: .1rem .08rem; }          /* +15 % */
  /* Roue crantee : 50 % de sa taille (1.2rem -> .6rem) et POUSSEE TOUT A DROITE.
     Selecteur `.marque .config-lien` OBLIGATOIRE : une media query n'ajoute AUCUNE
     specificite, donc `.config-lien` seul perdait contre la regle bureau. */
  .marque .config-lien {
    font-size: .6rem; width: 1.1rem; margin-left: auto;
  }
  /* Le bouton de deconnexion a quitte l'en-tete (il vit dans la page Config
     depuis s7) : la roue crantee est de nouveau SEULE a droite, et la regle
     `.marque #deconnexion { margin-left: 0 }` qui les desserrait n'a plus
     d'objet -- retiree plutot que laissee en CSS mort. */
  /* onglets sur UNE seule ligne qui defile (sinon 3 lignes = un tiers de l'ecran) */
  .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
             -webkit-overflow-scrolling: touch; padding: 0 .5rem; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets a { white-space: nowrap; flex: none; }

  /* --- pager : reperage + saut direct a une colonne --- */
  .kpager {
    display: flex; gap: .3rem; overflow-x: auto;
    padding: .4rem .5rem; scrollbar-width: none;
  }
  .kpager::-webkit-scrollbar { display: none; }
  .kpager button {
    flex: none; border: 1px solid var(--bord); background: var(--carte);
    color: var(--encre-2); border-radius: 999px; padding: .35rem .75rem;
    font: 600 .72rem var(--sans-fort); letter-spacing: .05em; cursor: pointer;
  }
  .kpager button.on { background: var(--sapin); border-color: var(--sapin); color: var(--papier); }

  /* --- kanban : 1 colonne pleine largeur, calee au swipe ---
     `overflow-y: hidden` -- LA HAUTEUR DU KANBAN SUIT LA COLONNE AFFICHEE
     (14.09, s38). Une rangee flex est aussi haute que sa colonne LA PLUS
     HAUTE : sous ILLICO (1050 px au banc) la page faisait la hauteur du
     BACKLOG (3124), soit ~2100 px de vide ou l'on pouvait descendre. C'est
     `pager()` (app.js) qui pose la hauteur de la colonne active en style ;
     les colonnes plus hautes, hors ecran, sont alors rognees par cette regle
     au lieu de faire defiler le kanban en interne (`overflow-x: auto` seul
     forcerait `overflow-y: auto`). Elle sert aussi de SIGNAL a pager() :
     `overflowY === "hidden"` = disposition mobile, sans recopier 820 px en JS. */
  .kanban {
    width: 100vw; gap: 0; padding: .3rem 0 1.5rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overflow-y: hidden;
  }
  .kanban::-webkit-scrollbar { display: none; }
  .kcol {
    flex: 0 0 100vw; min-width: 100vw; max-width: 100vw;
    scroll-snap-align: start; scroll-snap-stop: always;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .kplier { display: none; }             /* plier n'a pas de sens a une colonne */

  /* --- confort tactile : cibles d'au moins ~34 px --- */
  .tache { padding: .55rem .6rem; }
  .prio > summary, .actions > summary, .ksub-toggle, .kadd-btn {
    min-width: 34px; min-height: 34px;
  }
  .kmove-b { padding: .35rem .6rem; font-size: .7rem; }

  /* --- raccourcis de date (saisie rapide ET carte de modification) --------
     34 px de cible tactile. La carte elle-meme prend ses 16 px des `.he-champ`
     de heures.css, qui les posent deja pour l'editeur d'heures. */
  .re-rang .btn-mini { font-size: .78rem; padding: .45rem .55rem; min-height: 34px; }

  /* --- formulaire d'ajout de tache (bouton ＋ d'une colonne) ----------------
     MEME defaut, MEME correctif que la carte d'edition ci-dessus : les champs
     etaient a .82rem (~13 px), donc sous le seuil de 16 px en dessous duquel
     Safari iOS zoome la page a la mise au point -- et n'en revient pas.
     Selecteurs REPETES en entier (`.kadd select`, `.kadd input`) : une media
     query n'ajoute aucune specificite, `.kadd input {...}` seul perdrait.
     `flex-wrap` est un GARDE-FOU, pas le correctif : si le libelle du bouton
     s'allonge un jour, ou sur un ecran plus etroit, la ligne passerait a deux
     rangees au lieu de DEBORDER -- cause exacte des 41 px corriges en s4.
     Le champ `nom` a QUITTE cette ligne au portage de l'urgence et de la date
     (2026-07-27) : il occupe desormais sa propre rangee, pleine largeur, et
     `.kadd-ligne` ne porte plus que les pastilles et "Ajouter". L'ancienne
     mesure « champ 288 + bouton 77 dans 371 » ne decrit donc plus rien.
     La rangee de date, elle, est servie par `.re-rang .btn-mini` ci-dessus --
     c'est le meme bloc que la carte d'edition, pas une copie. */
  .kadd select, .kadd input { font-size: 16px; padding: .45rem .5rem; }
  .kadd-ligne { flex-wrap: wrap; }
  .kadd-ligne button { font-size: .9rem; padding: .45rem .9rem; min-height: 34px; }
  /* pastilles de priorite : meme cible tactile de 34 px que le reste */
  .kprio { font-size: 1.15rem; padding: .3rem .45rem; min-height: 34px;
           display: inline-flex; align-items: center; }

  /* --- menu de date (badge « + date » / « jj.mm ») --------------------------
     Le champ etait a 12,5 px : sous 16 px, Safari iOS zoome a la mise au point
     -- meme piege que la carte d'edition et le formulaire d'ajout, mais il
     n'avait jamais compte tant que ce menu n'etait pas utilise au doigt.
     A 16 px le champ ne tient plus dans le cadre de 165 px (mesure : 39 px de
     debordement, le × sortait du menu), d'ou l'elargissement. Le champ prend
     la place restante (`min-width: 0`, sinon un item flex ne descend pas sous
     la taille de son contenu) et `flex-wrap` reste un GARDE-FOU : si la locale
     rendait un jour un format plus long, le × passerait a la ligne au lieu de
     deborder. */
  .date-edit { width: 210px; }
  .date-edit input[type=date] { font-size: 16px; flex: 1 1 auto; min-width: 0; }
  .date-ligne { flex-wrap: wrap; }
  .date-edit button { font-size: .95rem; padding: .25rem .5rem; min-height: 34px; }
  .date-rapide button { font-size: .9rem; padding: .3rem .4rem; }

  /* --- page Configuration ---------------------------------------------------
     TROISIEME occurrence du meme defaut : le select etait a .9rem (~14 px) et
     les deux zones de texte a .8rem (~13 px) -- sous 16 px, Safari iOS zoome a
     la mise au point et n'en revient pas. La page ne devenait atteignable au
     doigt qu'avec ce portage, le defaut etait donc jusqu'ici sans consequence.
     Selecteurs REPETES en entier, `.config .config-mono` compris (il porte la
     police mono des deux textareas et l'emporterait sinon sur la regle
     generique) : une media query n'ajoute aucune specificite. */
  .config select, .config input[type=number], .config textarea,
  .config .config-mono { font-size: 16px; }
  .config-actions button { font-size: 1rem; padding: .5rem 1.2rem; min-height: 40px; }
  .config-reset .lien { font-size: .95rem; }
}