/* ⚠ COPIE DU KIT — SYNCHRONISÉE LE 2026-08-14 depuis `html/kit_gestio/gestio-ui.css`.
   Elle était figée au 3 août : 966 lignes contre 1440, et il lui MANQUAIT toute la section
   15 (navigation). L'écran « Personnalisation » s'en sert — son rail est un
   `.gestio-nav__panel` — et sortait sans mise en page, en boutons empilés à plat.
   Un seul écart de valeur a été conservé : `--gestio-badge-2-bg` reste le vert de
   l'application (#48fda9) et non le bleu du kit (#4868fd). Tout le reste était de
   l'ajout : 479 lignes gagnées, une seule déclaration divergente.
   ⚠ Il n'y a toujours pas de générateur : une correction faite ici doit être portée dans
   le kit, et inversement. Le jour où l'on en écrit un, c'est ce fichier qu'il produit. */
/* =============================================================================
   gestio-ui.css — système de composants
   Un seul fichier, aucune dépendance, aucune étape de build.
   Installation :
     <link rel="stylesheet" href="assets/css/gestio-ui.css">
     <script src="assets/js/gestio-ui.js" defer></script>
     + les polices Inter et Material Icons (à héberger localement)
   Personnalisation : tout passe par les variables du bloc :root ci-dessous.
   ========================================================================== */
/* ============================================================================
   1. TOKENS — valeurs relevées dans l'application GESTIO
   ========================================================================= */
:root{
  /* couleurs de marque */
  --gestio-primary:#423d99;      --gestio-primary-dark:#35307d;   --gestio-primary-soft:#ecebf7;   --gestio-btn-icon-bg:#e9e8fc;
  /* Bordure primaire ADOUCIE — pour cerner une surface déjà teintée (carte de filtre
     sélectionnée) sans la trancher comme le primaire plein. */
  --gestio-primary-border:#e7e5fb;
  --gestio-black:#25385e;        --gestio-black-light:#3a5894;
  --gestio-grey:#5a7294;         --gestio-grey-light:#8ca0b8;     --gestio-grey-lighter:#becedc;

  /* badges — quatre combinaisons fond / texte */
  --gestio-badge-1-bg:#4868fd;   --gestio-badge-1-fg:#ffffff;
  --gestio-badge-2-bg:#48fda9;   --gestio-badge-2-fg:#02016f;
  --gestio-badge-3-bg:#ffa79c;   --gestio-badge-3-fg:#02016f;
  --gestio-badge-4-bg:#ffe153;   --gestio-badge-draft-bg:#fff5c7;   --gestio-badge-cancelled-bg:#ffe9e6;   --gestio-badge-4-fg:#02016f;
  --gestio-ink:#02016f;

  /* fonds et bordures */
  --gestio-bg:#f5f6fb;           --gestio-surface:#ffffff;
  /* Puce neutre APPUYÉE — un cran plus soutenu que `--gestio-bg`, pour distinguer deux
     catégories sans sortir du gris. La couleur reste réservée aux ÉTATS : une catégorie qui
     se met à porter du vert ou du jaune entre en concurrence avec l'état de la même ligne. */
  --gestio-chip-strong-bg:#d2d6e7;
  --gestio-border:#eaecf4;       --gestio-border-strong:#dcdfe9;

  /* couleurs sémantiques */
  --gestio-green:#1bb157;        --gestio-green-soft:#e9fcf5;
  --gestio-red:#e94e6e;          --gestio-red-soft:#fbdce2;
  --gestio-orange:#ff9800;       --gestio-orange-soft:#ffe0b2;
  --gestio-purple:#9043cb;       --gestio-purple-soft:#e9dcf5;

  /* rayons */
  --gestio-r-sm:4px;             /* champs de saisie */
  --gestio-r-md:6px;             /* groupes d'actions */
  --gestio-r-lg:8px;             /* boutons, cartes, menus */
  --gestio-r-xl:12px;            /* grandes cartes */

  /* ombres */
  --gestio-shadow:0 0 25px rgba(2,20,48,.05), 0 4px 6px -2px rgba(2,20,48,.05);
  --gestio-shadow-lg:0 0 25px rgba(2,20,48,.08), 0 8px 16px -4px rgba(2,20,48,.10);

  /* état désactivé */
  --gestio-disabled-bg:#ebecf4;  --gestio-disabled-fg:#5a7394;

  /* dimensions */
  --gestio-control-h:40px;       /* hauteur des boutons */
  --gestio-field-h:56px;         /* hauteur des champs de saisie */
  --gestio-field-border:#becfdc; /* bordure des champs, 2px */
  --gestio-icon:16px;            /* icônes dans les boutons */
  --gestio-gutter:24px;

  /* navigation principale — rail sombre et panneau de menu (cf. §15) */
  --gestio-nav-bg:#1e2340;       --gestio-nav-fg:#9aa6c8;
  --gestio-nav-w:65px;           --gestio-nav-panel-w:230px;

  /* typographie */
  --gestio-font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ============================================================================
   2. BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--gestio-bg); color:var(--gestio-black);
  font-family:var(--gestio-font); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gestio-primary); text-decoration:none}
button{font-family:inherit; font-size:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--gestio-primary); outline-offset:2px}
.material-icons{font-size:var(--gestio-icon); line-height:1; vertical-align:middle; user-select:none}
/* échelle typographique */
.gestio-h1{font-size:2rem;   line-height:2.5rem;  font-weight:900; margin:0}
.gestio-h2{font-size:1.5rem; line-height:2rem;    font-weight:900; margin:0}
.gestio-h3{font-size:1.25rem;line-height:1.75rem; font-weight:700; margin:0}
.gestio-label-1{font-size:1.125rem;line-height:1.5rem; font-weight:700}
.gestio-label-2{font-size:1rem;    line-height:1.25rem;font-weight:700}
.gestio-label-3{font-size:.875rem; line-height:1.25rem;font-weight:600}
.gestio-body{font-size:.875rem; line-height:1.375rem; font-weight:400}
.gestio-small{font-size:.8125rem; line-height:1.125rem}
/* Séparation entre deux groupes d'un même formulaire. Un intertitre annonce qu'on change de
   sujet ; le trait le MONTRE avant même qu'on l'ait lu. Le kit n'avait qu'un séparateur lié à
   un bloc repliable (`.gestio-collapse__head--bar`) — l'employer pour un titre qui ne se replie
   pas aurait menti sur la nature de l'élément. */
.gestio-sep{border:0; border-top:1px solid var(--gestio-border); margin:34px 0 22px}
.gestio-overline{font-size:.75rem; font-weight:500; letter-spacing:.094rem;
  text-transform:uppercase; color:var(--gestio-grey)}
.gestio-muted{color:var(--gestio-grey)}
.gestio-strong{font-weight:700}
/* ============================================================================
   4. BOUTONS
   ========================================================================= */
.gestio-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--gestio-control-h); padding:8px 16px;
  border:1px solid transparent; border-radius:var(--gestio-r-lg);
  font-weight:600; font-size:.875rem; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s;
}
.gestio-btn--primary{background:var(--gestio-primary); color:#fff}
.gestio-btn--primary:hover{background:var(--gestio-primary-dark)}
.gestio-btn--white{background:var(--gestio-surface); color:var(--gestio-black); border-color:var(--gestio-border-strong)}
.gestio-btn--white:hover{background:var(--gestio-bg)}
.gestio-btn--ghost{background:transparent; color:var(--gestio-grey)}
.gestio-btn--ghost:hover{background:var(--gestio-bg); color:var(--gestio-black)}
.gestio-btn--danger{background:var(--gestio-red); color:#fff}
.gestio-btn--danger:hover{background:#dd1c44}
.gestio-btn--outline{background:transparent; color:var(--gestio-grey); border-color:var(--gestio-border-strong)}
.gestio-btn--outline:hover{background:var(--gestio-bg); color:var(--gestio-black)}
.gestio-btn--sm{min-height:32px; padding:4px 12px; font-size:.8125rem}
.gestio-btn[disabled], .gestio-btn[disabled]:hover{
  background:var(--gestio-disabled-bg); color:var(--gestio-disabled-fg);
  border-color:transparent; cursor:not-allowed;
}
/* bouton icône seul */
/* ⚠ `padding:0` — LE MÊME PIÈGE QUE `.gestio-nav__collapse`, 2026-08-15. Un `<button>`
   porte le padding par défaut du navigateur, ASYMÉTRIQUE : 1 px en haut et en bas, 6 px à
   gauche et à droite. Avec `box-sizing:border-box`, la place utile dans les 40 px du cercle
   tombe à 28 × 38 — plus étroite que certaines icônes, qui débordent alors et se calent à
   GAUCHE au lieu du centre (comportement normal d'un flex dont le contenu déborde). C'est
   ce qui décentrait la croix de fermeture de l'éditeur de thème. */
.gestio-btn-icon{
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  width:var(--gestio-control-h); height:var(--gestio-control-h);
  border:none; background:var(--gestio-btn-icon-bg); border-radius:50%; color:var(--gestio-grey);
  transition:background-color .15s;
}
.gestio-btn-icon:hover{background:var(--gestio-bg); color:var(--gestio-black)}
/* Variante destructive : retirer une pièce jointe, une image. Fond rouge DOUX et non
   plein — un bouton rouge vif attire l'œil plus que l'action qu'il porte, et il vit ici à
   côté d'un aperçu qu'on regarde. Le plein est réservé au survol, quand le geste est engagé. */
.gestio-btn-icon--danger{background:var(--gestio-red-soft); color:var(--gestio-red)}
.gestio-btn-icon--danger:hover{background:var(--gestio-red); color:#fff}
/* groupe d'actions rapides (apparaît au survol d'une ligne) */
.gestio-quick{
  display:inline-flex; align-items:center; overflow:hidden;
  border:1px solid var(--gestio-border); border-radius:var(--gestio-r-md); background:var(--gestio-surface);
}
.gestio-quick button{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:none; background:var(--gestio-surface); color:var(--gestio-grey);
  transition:background-color .15s;
}
.gestio-quick button + button{border-left:1px solid var(--gestio-border)}
.gestio-quick button:hover{background:var(--gestio-bg)}
/* ============================================================================
   5. CHAMPS DE SAISIE
   ========================================================================= */
.gestio-field{display:flex; flex-direction:column; gap:6px}
.gestio-field__label{font-size:1rem; font-weight:600; color:var(--gestio-black)}
.gestio-field__label .req{color:var(--gestio-red)}
.gestio-field__hint{font-size:.75rem; color:var(--gestio-grey-light)}
.gestio-field__error{font-size:.75rem; color:var(--gestio-red); display:flex; align-items:center; gap:4px}
.gestio-input{
  display:flex; align-items:center; gap:8px;
  min-height:var(--gestio-field-h); padding:0 12px;
  background:var(--gestio-surface); border:2px solid var(--gestio-field-border);
  border-radius:var(--gestio-r-sm); transition:border-color .15s;
}
.gestio-input:focus-within{border-color:var(--gestio-primary)}
.gestio-input input, .gestio-input textarea{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font:inherit; color:var(--gestio-black); padding:8px 0;
}
.gestio-input input::placeholder, .gestio-input textarea::placeholder{color:var(--gestio-grey-light)}
.gestio-input .material-icons{color:var(--gestio-grey-light); flex:none}
.gestio-input--textarea{align-items:flex-start}
.gestio-input--textarea{padding-top:6px; padding-bottom:6px}
.gestio-input--textarea textarea{resize:vertical; min-height:96px}
.gestio-input--error{border-color:var(--gestio-red)}
.gestio-input--error:focus-within{border-color:var(--gestio-red)}
.gestio-input--disabled{background:var(--gestio-bg); color:var(--gestio-grey-light)}
.gestio-input__suffix{color:var(--gestio-grey); font-weight:600; flex:none}
/* sélecteur en ligne : « Créer un <type> » — la valeur fait partie de la phrase */
.gestio-inline-select{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:1.125rem; line-height:1.75rem; font-weight:600; color:var(--gestio-black);
}
.gestio-inline-select__trigger{
  display:inline-flex; align-items:center; gap:8px;
  border:none; background:none; padding:0;
  font:inherit; font-weight:700; color:var(--gestio-primary);
}
.gestio-inline-select__trigger .material-icons{font-size:20px}
.gestio-inline-select__trigger:hover{color:var(--gestio-primary-dark)}
/* lien texte dans un formulaire */
.gestio-link{
  display:inline-flex; align-items:flex-start; gap:4px;
  border:none; background:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:400; line-height:1.5;
  color:var(--gestio-primary); text-align:left;
}
.gestio-link:hover{text-decoration:underline}
.gestio-link .material-icons{font-size:16px; margin-top:4px}
/* bloc repliable : un lien texte, un chevron, le contenu en dessous */
.gestio-collapse + .gestio-collapse{margin-top:16px}
.gestio-collapse__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .25s cubic-bezier(.25,.8,.25,1);
}
.gestio-collapse.is-open .gestio-collapse__body{grid-template-rows:1fr}
.gestio-collapse__body > div{overflow:hidden}
.gestio-collapse__body > div > *{margin-top:16px}
/* variante « barre » du bloc repliable : un séparateur au-dessus, le titre en lien, le
   chevron juste après. Pour un formulaire découpé en sections : le trait sépare les blocs,
   la couleur primaire distingue un titre de section d'un libellé de champ — sans quoi les
   deux se confondent et la page perd sa structure.
   La couleur vient de .gestio-link, on ne la redéclare pas. */
.gestio-collapse__head--bar{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:16px 0 8px; border-top:1px solid var(--gestio-border);
  font-size:1rem; font-weight:500;
}
.gestio-collapse__head--bar .material-icons{
  margin:0; font-size:20px; padding:2px; border-radius:50%;
  transition:background-color .15s, transform .15s;
}
/* Pas de soulignement : sur huit titres empilés, ça fait huit liens et l'écran devient
   bavard. L'indice de clic passe par le chevron — il s'entoure d'une pastille et se décale
   d'un cheveu dans le sens où le bloc va bouger : vers le bas s'il va s'ouvrir, vers le
   haut s'il va se refermer. */
.gestio-collapse__head--bar:hover{text-decoration:none}
.gestio-collapse__head--bar:hover .material-icons{
  background:var(--gestio-btn-icon-bg); transform:translateY(2px);
}
.gestio-collapse.is-open .gestio-collapse__head--bar:hover .material-icons{transform:translateY(-2px)}
/* liste native : à utiliser dès que la valeur doit être postée ou que les
   options viennent du serveur. C'est le choix par défaut dans un formulaire. */
.gestio-select-native{position:relative; display:block}
.gestio-select-native select{
  appearance:none; -webkit-appearance:none; width:100%;
  min-height:var(--gestio-field-h); padding:0 42px 0 12px;
  background:var(--gestio-surface); border:2px solid var(--gestio-field-border);
  border-radius:var(--gestio-r-sm); cursor:pointer;
  font-family:inherit; font-size:14px; color:var(--gestio-black);
  transition:border-color .15s;
}
.gestio-select-native select:focus{outline:none; border-color:var(--gestio-primary)}
.gestio-select-native select:disabled{
  background:var(--gestio-disabled-bg); color:var(--gestio-disabled-fg); cursor:not-allowed;
}
.gestio-select-native::after{
  content:"expand_more"; font-family:"Material Icons"; font-size:20px;
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--gestio-grey-light); pointer-events:none;
}
.gestio-select-native--error select{border-color:var(--gestio-red)}
/* champ cliquable qui ouvre un menu */
.gestio-select{cursor:pointer; user-select:none; justify-content:space-between}
.gestio-select__value{color:var(--gestio-black); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gestio-select__value--empty{color:var(--gestio-grey-light)}
/* interrupteur Oui / Non */
.gestio-choice{display:inline-flex; border:1px solid var(--gestio-border-strong);
  border-radius:var(--gestio-r-md); overflow:hidden}
.gestio-choice button{
  border:none; background:var(--gestio-surface); color:var(--gestio-grey);
  padding:8px 20px; font-weight:600; transition:background-color .15s, color .15s;
}
.gestio-choice button + button{border-left:1px solid var(--gestio-border-strong)}
.gestio-choice button[aria-pressed="true"]{background:var(--gestio-primary); color:#fff}
/* interrupteur à bascule */
.gestio-switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer}
.gestio-switch input{position:absolute; opacity:0; width:0; height:0}
.gestio-switch__track{
  width:40px; height:22px; border-radius:11px; background:var(--gestio-grey-lighter);
  position:relative; transition:background-color .2s;
}
.gestio-switch__track::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(2,20,48,.25);
  transition:transform .2s;
}
.gestio-switch input:checked + .gestio-switch__track{background:var(--gestio-primary)}
.gestio-switch input:checked + .gestio-switch__track::after{transform:translateX(18px)}
/* case à cocher */
/* ⚠ position:relative INDISPENSABLE — 2026-08-03.
   L'<input> réel est en position:absolute pour être invisible tout en restant focusable.
   Sans conteneur positionné, son bloc conteneur devient un ancêtre lointain : dans une
   liste défilante (overflow:auto), l'input n'est alors PAS déplacé par le défilement et
   se retrouve rendu hors de la zone visible. Au clic sur une ligne du bas, le navigateur
   fait défiler la page pour révéler l'input — la page « saute ». */
.gestio-check{display:inline-flex; align-items:center; gap:10px; cursor:pointer; position:relative}
.gestio-check input{position:absolute; opacity:0; width:0; height:0}
.gestio-check__box{
  /* La case garde TOUJOURS sa bordure, cochée comme décochée : c'est elle qui dit où
     cliquer. Cochée, la couleur remplit l'INTÉRIEUR — `background-clip:content-box` sur un
     padding de 3 px — au lieu de noyer la bordure. On lit alors deux choses d'un coup
     d'œil : la case, et son état. */
  width:20px; height:20px; padding:3px; box-sizing:border-box;
  border:1.5px solid var(--gestio-field-border); border-radius:var(--gestio-r-sm);
  background:var(--gestio-surface); background-clip:content-box;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.gestio-check__box .material-icons{font-size:12px; color:#fff; opacity:0}
.gestio-check input:checked + .gestio-check__box{
  background:var(--gestio-primary); background-clip:content-box; border-color:var(--gestio-primary);
}
.gestio-check input:checked + .gestio-check__box .material-icons{opacity:1}
/* Survol et focus clavier : bordure primaire et halo doux. Le halo est une OMBRE, pas une
   bordure — une bordure qui s'épaissit au survol décalerait le texte à côté. */
.gestio-check:hover .gestio-check__box,
.gestio-check input:focus-visible + .gestio-check__box{
  border-color:var(--gestio-primary); box-shadow:0 0 0 3px var(--gestio-primary-soft);
}
/* État partiel (« certains cochés ») : un trait, jamais une case pleine — on ne doit pas
   le confondre avec « tout coché ». */
.gestio-check input:indeterminate + .gestio-check__box{
  border-color:var(--gestio-primary);
  background:linear-gradient(var(--gestio-primary),var(--gestio-primary)) center/10px 2px no-repeat content-box;
}
/* ── BOUTON RADIO — `gestio-radio` (2026-08-18) ────────────────────────────────
   ⚠ IL MANQUAIT AU KIT, et son absence se voyait : faute de mieux, l'écran « Nouvel
   inventaire » proposait trois choix EXCLUSIFS dans des cases CARRÉES — une case carrée dit
   « plusieurs possibles », un rond dit « un seul ». La forme est la seule chose qui distingue
   les deux au premier coup d'œil, et se tromper de forme, c'est mentir sur la règle.

   Même anatomie que `.gestio-check` — libellé cliquable, champ natif masqué, halo au survol et
   au focus clavier — deux différences seulement : le ROND, et une pastille pleine au lieu de la
   coche. Rien à changer côté JavaScript : le champ reste un `<input type="radio">` natif.

     <label class="gestio-radio">
       <input type="radio" name="type" value="full" checked>
       <span class="gestio-radio__box"></span>
       <span>Complet</span>
     </label>                                                                          */
.gestio-radio{display:inline-flex; align-items:center; gap:10px; cursor:pointer; position:relative}
.gestio-radio input{position:absolute; opacity:0; width:0; height:0}
.gestio-radio__box{
  /* Comme la case : la bordure reste dans les deux états — c'est elle qui dit où cliquer —
     et la couleur remplit l'INTÉRIEUR, sans noyer le contour. */
  width:20px; height:20px; padding:3px; box-sizing:border-box;
  border:1.5px solid var(--gestio-field-border); border-radius:50%;
  background:var(--gestio-surface); background-clip:content-box;
  display:inline-flex; flex:none;
  transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.gestio-radio input:checked + .gestio-radio__box{
  background:var(--gestio-primary); background-clip:content-box; border-color:var(--gestio-primary);
}
.gestio-radio:hover .gestio-radio__box,
.gestio-radio input:focus-visible + .gestio-radio__box{
  border-color:var(--gestio-primary); box-shadow:0 0 0 3px var(--gestio-primary-soft);
}
.gestio-radio input:disabled + .gestio-radio__box{
  background:var(--gestio-disabled-bg); border-color:var(--gestio-field-border); cursor:not-allowed;
}
/* ============================================================================
   6. CHIPS / BADGES
   ========================================================================= */
.gestio-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px; border-radius:var(--gestio-r-md);
  background:var(--gestio-bg); color:var(--gestio-grey);
  font-size:.75rem; font-weight:600; white-space:nowrap;
}
.gestio-chip .material-icons{font-size:14px}
.gestio-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gestio-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.gestio-chip--1{background:var(--gestio-badge-1-bg); color:var(--gestio-badge-1-fg)}
.gestio-chip--2{background:var(--gestio-badge-2-bg); color:var(--gestio-badge-2-fg)}
.gestio-chip--3{background:var(--gestio-badge-3-bg); color:var(--gestio-badge-3-fg)}
.gestio-chip--4{background:var(--gestio-badge-4-bg); color:var(--gestio-badge-4-fg)}
/* alias métier, à renommer selon ton domaine */
.gestio-chip--primary{background:var(--gestio-badge-1-bg); color:var(--gestio-badge-1-fg)}
.gestio-chip--info{background:var(--gestio-badge-2-bg);    color:var(--gestio-badge-2-fg)}
.gestio-chip--late{background:var(--gestio-badge-3-bg);    color:var(--gestio-badge-3-fg)}
.gestio-chip--pending{background:var(--gestio-badge-4-bg); color:var(--gestio-badge-4-fg)}
/* États de pièce — teintes plus douces que les badges génériques : dans un listing dense,
   une colonne entière de jaune vif fatigue et attire l'œil sur le mauvais élément. */
.gestio-chip--draft{background:var(--gestio-badge-draft-bg);     color:var(--gestio-badge-4-fg)}
.gestio-chip--cancelled{background:var(--gestio-badge-cancelled-bg); color:var(--gestio-badge-4-fg)}
/* Puce neutre appuyée : deux niveaux de gris pour deux catégories, sans emprunter les couleurs
   des états. Employée pour le TYPE d'un inventaire — « Complet » se distingue de « Tournant »
   sans qu'aucun des deux ne ressemble à « Ajusté ». */
.gestio-chip--strong{background:var(--gestio-chip-strong-bg); color:var(--gestio-black)}
.gestio-chip__remove{
  border:none; background:transparent; padding:0; margin-right:-4px;
  color:inherit; opacity:.65; display:inline-flex;
}
.gestio-chip__remove:hover{opacity:1}
/* ============================================================================
   7. BOÎTES
   ========================================================================= */
.gestio-card{
  background:var(--gestio-surface); border-radius:var(--gestio-r-lg);
  box-shadow:var(--gestio-shadow); padding:20px;
}
.gestio-card--outlined{box-shadow:none; border:1px solid var(--gestio-border)}
.gestio-card__title{display:flex; align-items:center; gap:8px; margin-bottom:12px}
/* boîte d'information */
.gestio-info{
  display:flex; gap:12px; padding:14px 16px; border-radius:var(--gestio-r-lg);
  background:var(--gestio-primary-soft); color:var(--gestio-black); border-left:3px solid var(--gestio-primary);
}
.gestio-info > .material-icons{color:var(--gestio-primary); flex:none; margin-top:1px}
.gestio-info__title{font-weight:700; margin-bottom:2px}
.gestio-info__text{color:var(--gestio-grey); font-size:.8125rem}
.gestio-info--success{background:var(--gestio-green-soft);  border-left-color:var(--gestio-green)}
.gestio-info--success > .material-icons{color:var(--gestio-green)}
.gestio-info--warning{background:var(--gestio-orange-soft); border-left-color:var(--gestio-orange)}
.gestio-info--warning > .material-icons{color:#ef6c00}
.gestio-info--error{background:var(--gestio-red-soft);    border-left-color:var(--gestio-red)}
.gestio-info--error > .material-icons{color:var(--gestio-red)}
/* carte de totaux */
.gestio-totals{background:var(--gestio-bg); border-radius:var(--gestio-r-lg); padding:16px 20px; min-width:260px}
.gestio-totals__line{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0}
.gestio-totals__line + .gestio-totals__line{border-top:1px solid var(--gestio-border)}
.gestio-totals__line b{font-size:1rem}
/* état vide */
.gestio-empty{text-align:center; padding:48px 24px}
.gestio-empty__art{
  width:96px; height:96px; margin:0 auto 20px; border-radius:50%;
  background:var(--gestio-primary-soft); display:flex; align-items:center; justify-content:center;
}
.gestio-empty__art .material-icons{font-size:40px; color:var(--gestio-primary)}
.gestio-empty h3{margin:0 0 6px; font-size:1.25rem; font-weight:900}
.gestio-empty p{margin:0 0 20px; color:var(--gestio-grey)}
/* ============================================================================
   8. TABLEAU DE DONNÉES
   ========================================================================= */
.gestio-table-wrap{background:var(--gestio-surface); border-radius:var(--gestio-r-lg);
  box-shadow:var(--gestio-shadow); overflow:hidden}
.gestio-table{width:100%; border-collapse:collapse}
.gestio-table th{
  text-align:left; font-size:.8125rem; font-weight:700; color:var(--gestio-black);
  background:var(--gestio-bg); padding:14px 20px; border-bottom:1px solid var(--gestio-border);
  white-space:nowrap;
}
/* En-tête TRIABLE. Le bouton hérite tout de la cellule — même graisse, même corps, même
   couleur : ce n'est pas un bouton posé dans un titre, c'est le titre qui devient cliquable.
   La flèche double dit « on peut trier » ; une flèche simple, le sens en cours. */
.gestio-table th .gestio-tri{
  display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer; white-space:nowrap;
}
.gestio-table th .gestio-tri .material-icons{
  font-size:16px; color:var(--gestio-grey-light); transition:color .15s;
}
.gestio-table th .gestio-tri:hover .material-icons{color:var(--gestio-black)}
/* Colonne active : c'est la FLÈCHE qui porte la couleur, pas le libellé — sinon la ligne
   d'en-tête se lit comme un menu où une entrée serait sélectionnée. */
.gestio-table th .gestio-tri.is-active .material-icons{color:var(--gestio-primary)}
/* Colonne numérique : le contenu est aligné à droite, le bouton doit suivre. */
.gestio-table th.gestio-table__num .gestio-tri{flex-direction:row-reverse}
.gestio-table td{padding:14px 20px; border-bottom:1px solid var(--gestio-border); vertical-align:middle}
.gestio-table tbody tr:last-child td{border-bottom:none}
.gestio-table tbody tr{transition:background-color .15s}
.gestio-table tbody tr:hover{background:var(--gestio-bg)}
.gestio-table tbody tr[data-context]{cursor:context-menu}
/* `white-space:nowrap` — 2026-08-03 : sans lui, « 35 066,485 TND » se coupait en trois
   lignes dès que la colonne se resserrait. Un montant ne se coupe jamais. */
.gestio-table__num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Colonne d'actions : largeur ET hauteur figées, sinon le passage du libellé
   « Actions » au groupe de boutons redimensionne la colonne au survol et fait
   sauter tout le tableau. Le groupe fait 122px (3 boutons de 40px + 2
   séparateurs) et la cellule 40px de padding : 170px laissent la marge
   nécessaire pour que le navigateur ne redistribue rien sur les voisines. */
.gestio-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gestio-table__actions{width:170px; min-width:170px; text-align:right}
.gestio-table td.gestio-table__actions{padding-top:4px; padding-bottom:4px}
.gestio-table__actions > *{
  display:inline-flex; align-items:center; justify-content:flex-end;
  gap:4px; min-width:122px; height:40px;
}
.gestio-table__placeholder{color:var(--gestio-grey-light); font-size:.8125rem; white-space:nowrap}
.gestio-table tbody tr:hover .gestio-table__placeholder{display:none}
.gestio-table .gestio-quick{display:none}
.gestio-table tbody tr:hover .gestio-quick{display:inline-flex}
/* pastille d'initiales */
.gestio-avatar{
  width:28px; height:28px; border-radius:var(--gestio-r-md); flex:none;
  background:var(--gestio-black); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.6875rem; font-weight:700; letter-spacing:.02em;
}
.gestio-cell-title{display:flex; align-items:center; gap:12px; font-weight:700}
/* lignes de groupe repliables */
.gestio-table tr.is-group{cursor:pointer; font-weight:700}
.gestio-table tr.is-group td{background:var(--gestio-bg)}
.gestio-table tr.is-child td{padding-left:48px; color:var(--gestio-grey)}
/* pagination */
.gestio-pagination{display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; border-top:1px solid var(--gestio-border)}
/* ============================================================================
   9. MENUS / POPUPS
   ========================================================================= */
.gestio-menu{
  /* ⚠ `top:0; left:0` pour la même raison que `.gestio-tooltip` : un absolu SANS décalage se
     place à sa position statique. Un menu fermé mesure jusqu'à 420 px — posé en fin de page,
     il allonge d'autant la zone défilable et fait apparaître une barre, alors qu'il est
     invisible. Le script lui donne ses coordonnées réelles à l'ouverture (`menu.style.left`),
     ces deux valeurs ne peuvent donc rien déplacer. */
  position:absolute; top:0; left:0; z-index:60; min-width:220px; padding:6px 0;
  background:var(--gestio-surface); border:1px solid var(--gestio-border);
  border-radius:var(--gestio-r-lg); box-shadow:var(--gestio-shadow-lg);
  max-height:min(420px, 70vh); overflow-y:auto;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .13s ease, transform .13s ease;
}
.gestio-menu.is-open{opacity:1; transform:none; pointer-events:auto}
.gestio-menu__label{padding:8px 16px 4px; font-size:.75rem; font-weight:600; color:var(--gestio-grey-light)}
.gestio-menu__item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 16px; border:none; background:transparent; text-align:left;
  font-weight:600; color:var(--gestio-black);
}
.gestio-menu__item:hover{background:var(--gestio-bg)}
.gestio-menu__item .material-icons{color:var(--gestio-grey); font-size:18px}
.gestio-menu__item--danger{color:var(--gestio-red)}
.gestio-menu__item--danger .material-icons{color:var(--gestio-red)}
.gestio-menu__item--disabled{color:var(--gestio-grey-light); pointer-events:none}
.gestio-menu__sep{height:1px; background:var(--gestio-border); margin:6px 0}
.gestio-menu__search{padding:8px 12px; border-bottom:1px solid var(--gestio-border)}
.gestio-menu__search .gestio-input{min-height:44px}
.gestio-menu__empty{padding:20px 16px; text-align:center; color:var(--gestio-grey-light)}
.gestio-menu__item--rich{flex-direction:column; align-items:stretch; gap:2px}
.gestio-menu__item--rich small{color:var(--gestio-grey); font-weight:400}
/* infobulle */
.gestio-tooltip{
  /* ⚠ `top:0; left:0` INDISPENSABLES — 2026-08-11.
     Sans eux, l'infobulle est un absolu sans décalage : elle se place à sa position STATIQUE,
     c'est-à-dire après le contenu. Sur une page qui fait déjà 100vh, la zone défilable du
     document dépasse la fenêtre et une BARRE DE DÉFILEMENT apparaît — jusqu'au premier survol,
     où le script pose enfin des coordonnées réelles. `opacity:0` ne change rien : un élément
     transparent occupe toujours sa place dans la zone défilable.
     Aucun effet visible : l'infobulle est invisible avant le survol, et le script écrase ces
     deux valeurs dès qu'elle sert. */
  position:absolute; top:0; left:0; z-index:80; padding:5px 16px; border-radius:var(--gestio-r-lg);
  background:var(--gestio-black); color:#fff; font-size:.875rem; line-height:22px;
  pointer-events:none; opacity:0; transition:opacity .12s;
}
.gestio-tooltip.is-open{opacity:1}
/* ============================================================================
   10. MODALS ET PANNEAUX
   ========================================================================= */
.gestio-scrim{
  position:fixed; inset:0; z-index:40; background:rgba(37,56,94,.46);
  opacity:0; pointer-events:none;
  /* même durée et même courbe que .gestio-modal__box : à la fermeture, un voile
     plus rapide que la boîte s'efface avant elle et l'animation paraît coupée.
     La fermeture doit être l'exacte inverse de l'ouverture, rien de plus. */
  transition:opacity .3s cubic-bezier(.25,.8,.25,1);
}
.gestio-scrim.is-open{opacity:1; pointer-events:auto}
/* modal centré */
.gestio-modal{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:24px; pointer-events:none;
}
.gestio-modal__box{
  width:min(560px,100%); max-height:86vh; overflow-y:auto;
  background:var(--gestio-surface); border-radius:var(--gestio-r-xl); box-shadow:var(--gestio-shadow-lg);
  /* transition de l'application : échelle 0,5 → 1 et fondu, en 0,3 s */
  opacity:0; transform:scale(.5); transition:.3s cubic-bezier(.25,.8,.25,1);
}
.gestio-modal.is-open{pointer-events:auto}
.gestio-modal.is-open .gestio-modal__box{opacity:1; transform:none}
.gestio-modal--wide .gestio-modal__box{width:min(760px,100%)}
/* modal plein écran : entête et pied fixes, corps défilant entre les deux */
.gestio-modal--full{padding:0}
.gestio-modal--full .gestio-modal__box{
  width:100%; max-width:none; height:100%; max-height:none;
  border-radius:0; background:var(--gestio-bg); box-shadow:none;
  display:flex; flex-direction:column; overflow:hidden;
}
.gestio-dialog__topbar{
  display:flex; align-items:center; gap:16px; flex:none;
  padding:8px 20px; min-height:64px;
  background:var(--gestio-surface); box-shadow:var(--gestio-shadow); z-index:2;
}
.gestio-dialog__topbar h3{margin:0; font-size:1.5rem; font-weight:900; line-height:2rem}
.gestio-dialog__topbar p{margin:0; font-size:.875rem; color:var(--gestio-grey)}
.gestio-dialog__topbar .gestio-btn-icon{width:48px; height:48px; color:var(--gestio-primary)}
.gestio-dialog__content{flex:1; overflow-y:auto; padding:40px 16px}
.gestio-dialog__content-in{max-width:1000px; margin:0 auto; width:100%}
.gestio-dialog__bottombar{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:16px; background:var(--gestio-surface); box-shadow:var(--gestio-shadow); z-index:2;
}
/* panneau latéral */
.gestio-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:50;
  width:min(640px,100%); background:var(--gestio-surface); box-shadow:var(--gestio-shadow-lg);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.25,.8,.25,1);
}
.gestio-panel.is-open{transform:none}
.gestio-panel--sm{width:min(460px,100%)}
/* Niveau du dessous en retrait. Un panneau ouvert par-dessus un modal laisse celui-ci
   entièrement visible : sur un modal PLEIN ÉCRAN, dont la boîte est opaque et couvre la
   fenêtre, le voile (z-index 40) reste dessous et n'a plus rien à assombrir. On le fait
   donc remonter AU-DESSUS du modal (50) et sous le panneau (52).
   Deux effets d'une seule ligne : le niveau du dessous s'assombrit — exactement comme la
   page derrière le sélecteur « Créer », même voile, même valeur — et il redevient
   CLIQUABLE, `gestio-ui.js` fermant déjà le panneau au clic sur le voile
   (`scrim.addEventListener('click', closeTop)`). Sans cela, le clic hors panneau tombe sur
   le modal, ou pire sur une iframe qu'il héberge, où l'événement ne remonte même pas au
   document — aucun écouteur ne pourrait le rattraper.
   Le flou est porté par le VOILE (`backdrop-filter`), pas par la boîte du modal
   (`filter`) : le voile couvre exactement la fenêtre, alors qu'un flou posé sur la boîte
   délave ses propres bords et laisse un halo sur le pourtour de l'écran. 2 px, pas plus —
   à 5 px le fond perdait toute lisibilité et virait à l'aplat gris-marine. */
body:has(.gestio-panel.is-open) .gestio-scrim{
  z-index:51; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
/* entête / corps / pied communs */
.gestio-dialog__head{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--gestio-border);
}
.gestio-dialog__head h3{flex:1; margin:0; font-size:1.125rem; font-weight:700}
.gestio-dialog__body{padding:20px; overflow-y:auto; flex:1}
.gestio-dialog__foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 20px; border-top:1px solid var(--gestio-border);
}
/* ============================================================================
   11. FICHIERS
   ========================================================================= */
.gestio-drop{
  /* ⚠ `display:block` — 2026-08-17. La zone de dépôt est souvent posée sur un `<label>` :
     c'est la seule façon d'ouvrir le sélecteur de fichier en cliquant n'importe où dedans,
     sans une ligne de JS. Or un `<label>` est INLINE par défaut : le cadre en pointillé ne
     ceinturait alors que l'icône, et le titre et le sous-titre s'échappaient en dehors — une
     zone de dépôt cassée, à côté de son propre texte. Deux écrans compensaient déjà en ligne
     (`style="display:block"`), signe que le défaut était dans le COMPOSANT, pas dans eux.
     Sans effet sur les usages en `<div>`, qui sont déjà des blocs. */
  display:block;
  border:1.5px dashed var(--gestio-grey-lighter); border-radius:var(--gestio-r-lg);
  background:var(--gestio-bg); padding:36px 24px; text-align:center;
  transition:border-color .15s, background-color .15s; cursor:pointer;
}
.gestio-drop:hover, .gestio-drop.is-over{border-color:var(--gestio-primary); background:var(--gestio-primary-soft)}
.gestio-drop .material-icons{font-size:32px; color:var(--gestio-primary); margin-bottom:8px}
.gestio-drop h4{margin:0 0 4px; font-weight:700}
.gestio-drop p{margin:0; color:var(--gestio-grey); font-size:.8125rem}
.gestio-file{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--gestio-border); border-radius:var(--gestio-r-lg); background:var(--gestio-surface);
}
.gestio-file + .gestio-file{margin-top:10px}
.gestio-file__icon{
  width:36px; height:36px; border-radius:var(--gestio-r-md); flex:none;
  background:var(--gestio-primary-soft); color:var(--gestio-primary);
  display:flex; align-items:center; justify-content:center;
}
.gestio-file__meta{flex:1; min-width:0}
.gestio-file__name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gestio-file__size{font-size:.75rem; color:var(--gestio-grey)}
.gestio-progress{height:4px; border-radius:2px; background:var(--gestio-border); overflow:hidden; margin-top:6px}
.gestio-progress span{display:block; height:100%; background:var(--gestio-primary); transition:width .4s}
/* ============================================================================
   12. NAVIGATION
   ========================================================================= */
.gestio-tabs{display:flex; gap:16px; border-bottom:1px solid var(--gestio-border)}
.gestio-tabs button{
  /* ⚠ `inline-flex` ET `gap` — 2026-08-16. La règle `.gestio-tabs button svg{flex:none}`
     posait une propriété de FLEX sur un bouton qui n'en était pas un : l'icône retombait sur
     la ligne de base du texte, collée au libellé et décalée d'un ou deux pixels vers le bas.
     Deux écrans du paramétrage compensaient déjà avec un `style="display:inline-flex…"` en
     ligne — le signe qu'il manquait quelque chose au composant, pas aux écrans. */
  display:inline-flex; align-items:center; gap:8px;
  border:none; background:transparent; padding:12px 4px;
  /* ⚠ 0,9rem — 2026-08-16. 1rem tenait tant qu'un écran portait trois ou quatre onglets ;
     à neuf, la barre débordait et chaque libellé pesait autant que le titre de la page. Un
     onglet nomme, il n'annonce pas. */
  font-size:.9rem; font-weight:600; color:var(--gestio-grey); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.gestio-tabs button:hover{color:var(--gestio-black)}

/* ── Icône d'onglet ──
   ⚠ SVG et non police d'icônes : un glyphe ne s'anime pas par morceaux, ne change pas
   d'épaisseur de trait, et s'affiche EN TOUTES LETTRES tant que la police n'est pas arrivée.
   L'icône suit la couleur du libellé (`currentColor`), donc l'état actif la colore sans une
   règle de plus.
   ⚠ Au SURVOL seulement : un onglet n'est pas un appel à l'action, une animation continue y
   deviendrait du bruit au bout de dix secondes. */
.gestio-tabs button svg{
  width:20px; height:20px; flex:none; stroke-width:1.75;
  transition:transform .18s ease, stroke-width .18s ease;
}
.gestio-tabs button:hover svg{transform:translateY(-2px); stroke-width:2}
.gestio-tabs button.is-active svg{stroke-width:2}
@media (prefers-reduced-motion:reduce){
  .gestio-tabs button svg{transition:none}
  .gestio-tabs button:hover svg{transform:none}
}

.gestio-tabs button.is-active{color:var(--gestio-primary); border-bottom-color:var(--gestio-primary)}
/* ⚠ L'ANNEAU DE FOCUS RESTE AU CLAVIER, PAS À LA SOURIS — 2026-08-16. Sur un onglet, le
   contour de `:focus-visible` persiste après le clic et fait un SECOND indicateur d'état, en
   concurrence avec le soulignement : on ne sait plus lequel dit « vous êtes ici ». Même
   traitement que `.gestio-nav__toggle`, et pour la même raison. L'accessibilité est intacte :
   la navigation au clavier garde son anneau. */
.gestio-tabs button:focus:not(:focus-visible){outline:none}

.gestio-segment{display:inline-flex; background:var(--gestio-bg); border-radius:var(--gestio-r-lg); padding:3px}
.gestio-segment button{
  border:none; background:transparent; padding:7px 16px; border-radius:var(--gestio-r-md);
  font-weight:600; color:var(--gestio-grey);
}
.gestio-segment button.is-active{background:var(--gestio-surface); color:var(--gestio-black); box-shadow:var(--gestio-shadow)}
/* ── FIL DES ÉTAPES — `gestio-steps` (2026-08-17) ──────────────────────────────
   Un assistant en trois écrans a besoin de dire OÙ L'ON EST et CE QU'IL RESTE. La puce
   « Étape 2 sur 3 » et une barre de progression l'ont remplacé un temps : à la revue, refusé,
   et à raison — on lisait la position sans voir le chemin, ni les noms des étapes suivantes.
   ⚠ À ne pas confondre avec §12 `.gestio-tabs` : les onglets sont CLIQUABLES et l'on va où l'on
   veut. Un fil d'étapes n'est pas cliquable : il rend compte d'une progression contrainte.
   ⚠ TROIS ÉTATS, et le numéro les porte : à venir (gris), en cours (primaire plein),
   franchie (primaire doux + coche). Le trait entre deux étapes prend le primaire dès qu'il est
   franchi — c'est lui qui donne la LONGUEUR du chemin restant.
   Balisage : .gestio-steps > (.gestio-steps__item + .gestio-steps__line)*                     */
.gestio-steps{display:flex; align-items:center; gap:0}
.gestio-steps__item{display:flex; align-items:center; gap:12px; min-width:0}
.gestio-steps__num{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8125rem; font-weight:700;
  background:var(--gestio-bg); color:var(--gestio-grey-light);
  transition:background-color .2s, color .2s;
}
.gestio-steps__num .material-icons{font-size:18px}
.gestio-steps__item.is-active .gestio-steps__num{background:var(--gestio-primary); color:#fff}
.gestio-steps__item.is-done .gestio-steps__num{background:var(--gestio-primary-soft); color:var(--gestio-primary)}
.gestio-steps__txt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.gestio-steps__txt b{font-size:.875rem; font-weight:600; color:var(--gestio-grey-light); white-space:nowrap}
.gestio-steps__item.is-active .gestio-steps__txt b,
.gestio-steps__item.is-done .gestio-steps__txt b{color:var(--gestio-black)}
.gestio-steps__txt small{font-size:.75rem; color:var(--gestio-grey-light); white-space:nowrap}
.gestio-steps__line{
  flex:1; height:2px; min-width:24px; margin:0 16px; border-radius:2px;
  background:var(--gestio-border); transition:background-color .2s;
}
.gestio-steps__line.is-done{background:var(--gestio-primary)}
/* ⚠ SOUS 720 px, LES SOUS-TITRES ET LES NOMS SAUTENT, pas les numéros : trois libellés sur
   deux lignes chacun mangeraient la moitié de l'écran, et l'on garde l'essentiel — où l'on en
   est sur combien. L'étape en cours garde son nom, elle seule. */
@media (max-width:720px){
  .gestio-steps__txt small{display:none}
  .gestio-steps__item:not(.is-active) .gestio-steps__txt{display:none}
  .gestio-steps__line{margin:0 10px}
}
/* accordéon */

/* ============================================================================
   14. ÉLÉMENTS PREMIUM
   Composants repris tels quels depuis l'application, sous le scope
   .gestio-premium : leurs classes courtes (.ac, .inp, .who, .nm) ne peuvent
   donc entrer en conflit ni avec le kit, ni avec le reste de l'application.
   ========================================================================= */
/* --- composants premium repris tels quels, sous le scope .gestio-premium --- */
.gestio-premium{--pri:#4868fd;--pri-d:#005ebc;--pri-l5:#e8f3fe;--pri-l4:#c8e3ff;--bg:#fafafd;--card:#fff;--bd:#eaecf4;--bd2:#dcdfe9;--soft:#f7f7fb;--grey:#5a7294;--grey2:#7389a6;--ink:#00172f;--ink2:#313244;--green:#1bb157;--warn:#fec130}
@keyframes nivZoom{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes nivZoomOut{from{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0}}
.gestio-premium .inp, .gestio-premium .sel{width:100%;height:60px;border:1px solid #bdcedd;border-radius:8px;padding:0 13px;font-size:14px;color:var(--ink);background:var(--card);outline:none;transition:.15s;font-family:inherit}
.gestio-premium .inp:hover, .gestio-premium .sel:hover{border-color:var(--grey2)}
.gestio-premium .inp:focus, .gestio-premium .sel:focus{border-color:var(--grey);box-shadow:inset 0 0 0 1px var(--grey)}
.gestio-premium .inp::placeholder{color:#aab4c6}
.gestio-premium .inp-ro:focus, .gestio-premium .inp[readonly]:focus{border-color:var(--bd2);box-shadow:none}
.gestio-premium .ac{position:relative}
.gestio-premium .ac-chev{position:absolute;transform:translateY(-50%);color:var(--grey);pointer-events:none;display:flex;transition:transform .18s}
.gestio-premium .ac-box{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--card);border-radius:10px;box-shadow:0 14px 40px rgba(0,23,47,.16);z-index:40;max-height:60vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c7cfdd transparent}
.gestio-premium .ac-box::-webkit-scrollbar{width:10px}
.gestio-premium .ac-box::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.gestio-premium .ac-box::-webkit-scrollbar-thumb{background:#c7cfdd;border-radius:8px;border:3px solid #fff;background-clip:padding-box}
.gestio-premium .ac-box::-webkit-scrollbar-thumb:hover{background:#aeb8c9;border:3px solid #fff;background-clip:padding-box}
.gestio-premium .ac-create:hover{background:var(--pri-l5)}
.gestio-premium .ac-item:hover{background:var(--pri-l5)}
.gestio-premium .ac-clear{position:absolute;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--grey);color:#fff;border:0;cursor:pointer;place-items:center;padding:0}
.gestio-premium .ac-clear:hover{background:var(--ink)}
@property --ab-angle{syntax:"<angle>";initial-value:0deg;inherits:true}
.gestio-premium .ac-glowhost{z-index:30}
.gestio-premium .ab-glow{--ab-angle:0deg;position:relative;padding:2px;border-radius:10px;background:conic-gradient(from var(--ab-angle),#dfe3ec 0 62%,rgba(122,82,214,.55) 70%,#7a52d6 79%,#e0459a 87%,rgba(224,69,154,.45) 92%,#dfe3ec 97%);animation:abAngle 3s linear infinite}
.gestio-premium .ab-glow::before{content:"";position:absolute;inset:-4px;border-radius:13px;z-index:-1;background:conic-gradient(from var(--ab-angle),transparent 0 64%,rgba(122,82,214,.75) 79%,rgba(224,69,154,.75) 88%,transparent 95%);filter:blur(10px);pointer-events:none}
@keyframes abAngle{to{--ab-angle:360deg}}
.gestio-premium .ac-glowhost.has-clear>.ab-glow::before{content:none}
.gestio-premium .ab-pav{position:absolute;left:11px;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:8px;color:#fff;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-transform:uppercase}
.gestio-premium .ab-glow>.inp{position:relative;z-index:1;border-color:transparent;border-radius:8px;background:var(--card)}
.gestio-premium .ab-glow>.inp:focus{border-color:transparent;box-shadow:none}
.gestio-premium .ac-glowhost .inp{padding-right:40px}
.gestio-premium .ab-glow .ac-chev{z-index:1;top:32px;right:16px}
.gestio-premium .ab-glow .ac-clear{z-index:1;top:32px;right:46px}
.gestio-premium .ab-glow:focus-within, .gestio-premium .ab-glow:focus-within::before{animation-play-state:paused}
.gestio-premium .ab-glow:focus-within::before{filter:blur(13px)}
.gestio-premium .doc .prov{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;background:#eef1f7;color:var(--grey2);padding:2px 8px;border-radius:5px;margin-left:6px;vertical-align:middle}
.gestio-premium .doc .tot .r.ttc{background:var(--pri);color:#fff;font-weight:800;font-size:15px;border:0;border-radius:6px;padding:10px 12px;margin-top:6px}
@keyframes ovSlide{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes cfPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.gestio-premium .ac-chev{position:absolute;right:14px;top:30px;transform:translateY(-50%);color:var(--grey);pointer-events:none;display:flex;transition:transform .18s}
.gestio-premium .ac-box.open{display:block}
.gestio-premium .ac-create{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 16px;color:var(--pri);font-weight:700;font-size:15px;cursor:pointer}
.gestio-premium .ac-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer}
.gestio-premium .ac-item .who{min-width:0;display:flex;flex-direction:column}
.gestio-premium .ac-item .nm{font-size:15px;color:var(--ink);font-weight:700;line-height:1.25}
.gestio-premium .ac-item .mt{font-size:13px;color:var(--grey);line-height:1.25}
.gestio-premium .scan-badge{position:absolute;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:7px;background:#7fdecc;color:#0b4f43;pointer-events:none}
.gestio-premium .scan-badge svg{width:17px;height:17px}
.gestio-premium .ac-item.pr{justify-content:space-between}
.gestio-premium .ac-item.pr .pr-px{display:flex;gap:16px;align-items:baseline;white-space:nowrap}
.gestio-premium .ac-item.pr .pr-px .ht{color:var(--grey);font-size:14px}
.gestio-premium .ac-item.pr .pr-px .ttc{color:var(--ink);font-weight:700;font-size:14px}
.gestio-premium .ac-item.pr .pr-px sup{font-size:9px;color:var(--grey2);font-weight:700}
.gestio-premium .ac-create.bottom{border-bottom:0;border-top:1px solid var(--bd);background:#f6f9ff}
.gestio-premium .ac-clear{position:absolute;right:44px;top:30px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--grey);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;padding:0}
.gestio-premium .ac-glowhost.has-clear>.ab-glow{background:none;padding:0;animation:none}
.gestio-premium .ac-glowhost.has-clear .inp{border-color:#bdcedd}
.gestio-premium .ac.has-clear .ab-pav{display:flex}
.gestio-premium .ac.has-clear .inp{padding-left:56px;font-weight:700}
.gestio-premium .ac-glowhost.ac-scan .inp{padding-right:52px}
.gestio-premium .ac-glowhost.has-clear .inp{padding-right:78px}
.gestio-premium .ab-glow .scan-badge{z-index:1;top:32px;right:12px}
.gestio-premium .ac.has-clear>.inp{padding-right:78px}
.gestio-premium .flatpickr-day:hover, .gestio-premium .flatpickr-day.prevMonthDay:hover, .gestio-premium .flatpickr-day.nextMonthDay:hover, .gestio-premium .flatpickr-day:focus, .gestio-premium .flatpickr-day.prevMonthDay:focus, .gestio-premium .flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}
@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.gestio-premium .np-line{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--bd)}
.gestio-premium .np-line:first-child{border-radius:10px 10px 0 0}
.gestio-premium .np-line:last-child{border-bottom:0;border-radius:0 0 10px 10px}
.gestio-premium .np-line-t{flex:0 0 150px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.gestio-premium .np-line-t sup{color:var(--grey);font-size:12px;top:-.35em}
.gestio-premium .np-line-c{flex:1 1 auto;min-width:0}
.gestio-premium .np-f{position:relative}
.gestio-premium .np-in, .gestio-premium .np-sel{width:100%;height:60px;border:1px solid #bdcedd;border-radius:8px;padding:0 13px;font-size:14px;color:var(--ink);background:var(--card);outline:none;transition:.15s;font-family:inherit}
.gestio-premium .np-in:hover, .gestio-premium .np-sel:hover{border-color:var(--grey2)}
.gestio-premium .np-in:focus, .gestio-premium .np-sel:focus{border-color:var(--grey);box-shadow:inset 0 0 0 1px var(--grey)}
.gestio-premium .np-in::placeholder{color:#aab4c6}
.gestio-premium .np-suf{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--grey);pointer-events:none;display:flex;align-items:center}
.gestio-premium .np-in.has-suf{padding-right:44px}
.gestio-premium .np-amt .np-in{-moz-appearance:textfield}
.gestio-premium .np-amt .np-in::-webkit-outer-spin-button, .gestio-premium .np-amt .np-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gestio-premium .np-duo>.np-f{flex:1 1 0;min-width:0}
.gestio-premium .np-ac{position:relative;z-index:30}
.gestio-premium .np-cv{position:absolute;top:50%;transform:translateY(-50%);color:var(--grey);pointer-events:none;display:flex}
.gestio-premium .np-in.has-cv{padding-right:38px}
.gestio-premium .np-clr{position:absolute;right:44px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--grey);color:#fff;border:0;cursor:pointer;place-items:center;padding:0;z-index:1}
.gestio-premium .np-clr:hover{background:var(--ink)}
.gestio-premium .np-pav{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;width:30px;height:30px;border-radius:7px;color:#fff;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;text-transform:uppercase}
.gestio-premium .np-glow.has-pick::before{content:none}
.gestio-premium .np-box{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:var(--card);border-radius:10px;box-shadow:0 14px 40px rgba(0,23,47,.16);max-height:60vh;overflow-y:auto}
.gestio-premium .np-box.on{display:block}
.gestio-premium .np-box::-webkit-scrollbar{width:10px}
.gestio-premium .np-box::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.gestio-premium .np-box::-webkit-scrollbar-thumb{background:#c7cfdd;border-radius:8px;border:3px solid #fff;background-clip:padding-box}
.gestio-premium .ac-grp{padding:9px 20px;font-size:13px;font-weight:700;color:var(--grey);background:#f2f4f9}
.gestio-premium .np-foot{height:66px;flex:0 0 66px;background:var(--card);border-top:1px solid #eaecf4;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 24px;box-shadow:0 0 25px rgba(2,20,48,.05),0 4px 6px -2px rgba(2,20,48,.05);z-index:95}
.gestio-premium .np-foot-g{align-items:center;gap:12px}
@property --vt-angle{syntax:"<angle>";initial-value:0deg;inherits:true}
.gestio-premium .np-glow{--vt-angle:0deg;position:relative;padding:2px;border-radius:10px;background:conic-gradient(from var(--vt-angle),#dfe3ec 0 62%,rgba(122,82,214,.55) 70%,#7a52d6 79%,#e0459a 87%,rgba(224,69,154,.45) 92%,#dfe3ec 97%);animation:vtAngle 3s linear infinite}
.gestio-premium .np-glow::before{content:"";position:absolute;inset:-4px;border-radius:13px;z-index:-1;background:conic-gradient(from var(--vt-angle),transparent 0 64%,rgba(122,82,214,.75) 79%,rgba(224,69,154,.75) 88%,transparent 95%);filter:blur(10px);pointer-events:none}
@keyframes vtAngle{to{--vt-angle:360deg}}
.gestio-premium .np-glow .np-in{position:relative;z-index:1;border-color:transparent;border-radius:8px;background:var(--card)}
.gestio-premium .np-glow .np-in:focus{border-color:transparent;box-shadow:none}
.gestio-premium .np-glow .np-cv{z-index:1;right:13px}
.gestio-premium .np-glow:focus-within{animation-play-state:paused}
.gestio-premium .np-glow:focus-within::before{animation-play-state:paused;filter:blur(13px)}
.gestio-premium .ac-item .av{width:36px;height:36px;border-radius:8px;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 36px;text-transform:uppercase}
.gestio-premium .ac-item .nm{font-size:15px;color:var(--ink);font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gestio-premium .ac-create{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 16px;color:var(--pri);font-weight:700;font-size:15px;cursor:pointer;border-bottom:1px solid var(--bd)}
@keyframes vtNew{0%{background:#ede4ff;transform:translateY(-10px);opacity:0}25%{background:#ede4ff;transform:translateY(0);opacity:1}60%{background:#f4eeff}100%{background:transparent}}
@keyframes vtNewFirst{0%{background:#ede4ff;transform:translateY(-10px);opacity:0;box-shadow:inset 3px 0 0#7a52d6}25%{background:#ede4ff;transform:translateY(0);opacity:1;box-shadow:inset 3px 0 0#7a52d6}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
@keyframes vtPulse{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.gestio-premium .np-clr{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--grey);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;padding:0;z-index:1}
.gestio-premium .np-f.has-pick .np-pav{display:flex}
.gestio-premium .np-f.has-pick .np-in{padding-left:50px;padding-right:78px;font-weight:700}
.gestio-premium .np-glow.has-pick{background:none;padding:0;animation:none}
.gestio-premium .np-glow.has-pick .np-in{border-color:#bdcedd}
.gestio-premium .np-glow.has-pick .np-cv{right:11px}
.gestio-premium .np-glow.has-pick .np-clr{right:42px}
.gestio-premium .np-glow{--vt-angle:0deg;position:relative;border-radius:10px}
.gestio-premium .np-glow .np-in{position:relative;z-index:1;border-radius:8px;background:var(--card)}
.gestio-premium .np-glow .np-cv{z-index:1}
/* États par défaut reconstruits : dans l'application ils étaient posés
   par le JS, SingleFile ne les a donc pas capturés. Sans eux, listes et
   avatars s'affichent tous en même temps. */
.gestio-premium .ac-box, .gestio-premium .np-box{display:none}
.gestio-premium .ab-pav, .gestio-premium .np-pav{display:none}
.gestio-premium .ac-clear, .gestio-premium .np-clr{display:none}
.gestio-premium .ac.has-clear .ac-clear{display:grid}
.gestio-premium .np-f.has-pick .np-clr{display:grid}
/* ---------------------------------------------------------------- calendrier
   Les sélecteurs reprennent les classes de flatpickr : brancher flatpickr sur
   un champ suffit à obtenir ce rendu, sans thème supplémentaire. */
.flatpickr-calendar{
  background:var(--gestio-surface); border-radius:12px; padding:8px;
  box-shadow:0 14px 40px rgba(0,23,47,.16); width:auto;
  font-family:var(--gestio-font); font-size:14px; color:var(--gestio-black);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after{display:none}
.flatpickr-months{display:flex; align-items:center; padding:4px 4px 10px}
.flatpickr-months .flatpickr-month{flex:1; text-align:center; color:var(--gestio-black); height:auto}
.flatpickr-current-month{font-size:15px; font-weight:700; padding:0; display:inline-flex; gap:6px; align-items:center}
.flatpickr-current-month .cur-year, .flatpickr-current-month input.cur-year{
  font-weight:700; color:var(--gestio-black); background:transparent; border:0; padding:0;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{
  position:static; width:34px; height:34px; padding:0; border-radius:var(--gestio-r-md);
  display:flex; align-items:center; justify-content:center; color:var(--gestio-grey);
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover{
  background:var(--gestio-bg); color:var(--gestio-black);
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg{
  width:14px; height:14px; fill:currentColor;
}
.flatpickr-weekdays{background:transparent; height:auto; padding:0 0 4px}
.flatpickr-weekdaycontainer{display:flex}
span.flatpickr-weekday{
  color:var(--gestio-grey-light); font-size:12px; font-weight:700;
  text-transform:uppercase; background:transparent;
}
.flatpickr-days{width:auto !important}
.dayContainer{width:auto; min-width:0; max-width:none; padding:0}
.flatpickr-day{
  border:0; border-radius:var(--gestio-r-md); max-width:38px; height:36px; line-height:36px;
  color:var(--gestio-black); font-weight:500;
}
.flatpickr-day:hover{background:var(--gestio-bg)}
.flatpickr-day.today{box-shadow:inset 0 0 0 2px var(--gestio-primary); color:var(--gestio-primary); font-weight:700}
.flatpickr-day.selected, .flatpickr-day.selected:hover{
  background:var(--gestio-primary); border-color:var(--gestio-primary); color:#fff; font-weight:700;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{color:var(--gestio-grey-lighter)}
.flatpickr-day.flatpickr-disabled{color:var(--gestio-grey-lighter); text-decoration:line-through}
.flatpickr-time{
  border-top:1px solid var(--gestio-border); margin-top:8px; padding-top:8px;
  display:flex; align-items:center; justify-content:center; gap:4px; height:auto;
}
.flatpickr-time input{
  font-family:inherit; font-size:16px; font-weight:700; color:var(--gestio-black);
  background:var(--gestio-bg); border-radius:var(--gestio-r-md); height:40px;
}
.flatpickr-time input:hover, .flatpickr-time input:focus{background:var(--gestio-border)}
.flatpickr-time .flatpickr-time-separator{font-weight:700; color:var(--gestio-grey)}
.flatpickr-time .numInputWrapper span.arrowUp::after{border-bottom-color:var(--gestio-grey)}
.flatpickr-time .numInputWrapper span.arrowDown::after{border-top-color:var(--gestio-grey)}
/* ------------------------------------------------------------ champ montant */
.gestio-amount input{
  font-variant-numeric:tabular-nums; font-weight:700; text-align:right;
  letter-spacing:.01em;
}
/* --- compléments 2026-08-02 : règles absentes du portage initial ---------- */
/* Sans ces deux `display:none`, l'autocomplete premium est inutilisable : la liste
   reste ouverte en permanence et l'avatar occupe la place avant toute sélection.
   Les classes `.open` / `.has-clear` posées par le JS restent prioritaires (3 classes). */
.gestio-premium .ac-box{display:none}
.gestio-premium .ab-pav{display:none}
.gestio-premium .ac-empty{padding:16px 20px; color:var(--grey); font-size:14px}
.gestio-premium .ac-item .biz{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--pri-l5); color:var(--pri); border-radius:6px;
  width:24px; height:24px; flex:0 0 auto;
}
.gestio-premium .ac-item .biz svg{width:15px; height:15px}
.gestio-premium .ac-create{border-bottom:1px solid var(--bd)}

/* --------------------------------- justificatifs : trombone + popup -------- */
/* Repris de purchases/new_purchase, verbatim : mêmes dimensions, mêmes couleurs
   (--pri, comme le reste de cette section). Le trombone ouvre `.np-ov` ; l'état
   vide `.jz-drop` accepte le glisser-déposer, l'état rempli `.jz-split` affiche
   la liste des pièces à gauche et l'aperçu à droite.
   ⚠ `.np-ov` est en position:fixed : dans une iframe, il se cale sur la fenêtre
   de l'iframe, pas sur la page hôte. Voir la note de gestio-kit.md. */
.gestio-premium .np-clip{
  width:52px; height:52px; flex:none; position:relative; cursor:pointer;
  border:1px solid var(--pri); border-radius:8px;
  background:var(--card); color:var(--pri);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.gestio-premium .np-clip:hover{background:var(--pri-l5)}
.gestio-premium .np-badge{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px;
  border-radius:10px; padding:0 5px;
  background:var(--pri); color:#fff; font-size:11.5px; font-weight:700;
  border:2px solid var(--card);
  display:none; align-items:center; justify-content:center;
}
.gestio-premium .np-badge.on{display:flex}

/* coque de dialogue */
.gestio-premium .np-ov{
  position:fixed; inset:0; background:rgba(15,23,42,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:200; display:none; align-items:center; justify-content:center; padding:24px;
}
.gestio-premium .np-ov.on{display:flex}
.gestio-premium .np-dlg{background:#fff; border-radius:18px; width:100%; max-width:390px; box-shadow:0 30px 80px rgba(0,0,0,.3); overflow:hidden; animation:cfPop .16s ease}
.gestio-premium .np-dlg-h{display:flex; align-items:center; justify-content:space-between; padding:22px 26px 16px}
.gestio-premium .np-dlg-h b{font-size:19px; font-weight:800; color:var(--ink)}
.gestio-premium .np-rx{
  width:38px; height:38px; border-radius:50%; border:1px solid #bdcedd;
  background:var(--card); color:var(--grey);
  display:grid; place-items:center; cursor:pointer; flex:0 0 auto; transition:.15s;
}
.gestio-premium .np-rx:hover{background:var(--pri-l5); color:var(--pri); border-color:var(--pri-l4)}
.gestio-premium .np-btn{
  height:44px; padding:0 20px; border-radius:8px; border:1px solid transparent;
  font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; transition:.15s;
}
.gestio-premium .np-btn-ghost{background:var(--card); border-color:var(--bd2); color:var(--ink2)}
.gestio-premium .np-btn-ghost:hover{background:var(--soft); border-color:var(--grey2)}
.gestio-premium .np-btn-pri{background:var(--pri); color:#fff}
.gestio-premium .np-btn-pri:hover{background:var(--pri-d)}
.gestio-premium .np-btn-pri:disabled{background:#c3ccdd; cursor:not-allowed}

/* dépôt de justificatifs */
.gestio-premium .jz-dlg{max-width:1100px; height:min(78vh,720px); display:flex; flex-direction:column}
.gestio-premium .jz-b{flex:1 1 auto; min-height:0; padding:0 26px 26px; display:flex}
.gestio-premium .jz-drop{
  flex:1 1 auto; border:2px dashed #bdcedd; border-radius:10px; background:var(--soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:30px; text-align:center; transition:.15s;
}
.gestio-premium .jz-drop.over{border-color:var(--pri); background:var(--pri-l5)}
.gestio-premium .jz-drop-t{font-size:15px; font-weight:700; color:var(--ink); max-width:330px; line-height:1.5}
.gestio-premium .jz-drop-s{font-size:14px; color:var(--grey)}
.gestio-premium .jz-drop .np-btn{margin-top:14px}
.gestio-premium .jz-split{flex:1 1 auto; min-height:0; display:flex; border:1px solid var(--bd); border-radius:10px; overflow:hidden}
.gestio-premium .jz-list{flex:0 0 300px; display:flex; flex-direction:column; border-right:1px solid var(--bd); background:var(--card); min-width:0}
.gestio-premium .jz-items{flex:1 1 auto; overflow-y:auto; min-height:0}
.gestio-premium .jz-it{display:flex; align-items:center; gap:6px; padding:14px 12px; cursor:pointer; border-bottom:1px solid var(--bd)}
.gestio-premium .jz-it:hover{background:var(--soft)}
.gestio-premium .jz-it.on{background:var(--pri-l5)}
.gestio-premium .jz-it-n{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; color:var(--ink)}
.gestio-premium .jz-ic{border:0; background:none; cursor:pointer; color:var(--pri); padding:5px; border-radius:6px; display:flex; flex:0 0 auto}
.gestio-premium .jz-ic:hover{background:var(--pri-l4)}
.gestio-premium .jz-ic.del:hover{background:#fdeceb; color:#e0483d}
.gestio-premium .jz-add{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; border:0; border-top:1px solid var(--bd); background:var(--card); cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--pri);
}
.gestio-premium .jz-add:hover{background:var(--pri-l5)}
.gestio-premium .jz-prev{flex:1 1 auto; min-width:0; background:#525659; display:flex; align-items:center; justify-content:center}
.gestio-premium .jz-prev iframe, .gestio-premium .jz-prev embed{width:100%; height:100%; border:0}
.gestio-premium .jz-prev img{max-width:100%; max-height:100%; object-fit:contain}
.gestio-premium .jz-none{color:#e7ebf3; font-size:14.5px; text-align:center; padding:24px; line-height:1.6}

/* ============================================================================
   13. ANIMATIONS
   ========================================================================= */
@keyframes gestio-rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes gestio-slide{from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:none}}
@keyframes gestio-pulse{0%,100%{opacity:1} 50%{opacity:.45}}
.gestio-anim-rise{animation:gestio-rise .32s cubic-bezier(.25,.8,.25,1) both}
.gestio-anim-slide{animation:gestio-slide .32s cubic-bezier(.25,.8,.25,1) both}
.gestio-stagger > *{animation:gestio-rise .34s cubic-bezier(.25,.8,.25,1) both}
.gestio-stagger > *:nth-child(1){animation-delay:.04s}
.gestio-stagger > *:nth-child(2){animation-delay:.10s}
.gestio-stagger > *:nth-child(3){animation-delay:.16s}
.gestio-stagger > *:nth-child(4){animation-delay:.22s}
/* squelette de chargement */
.gestio-skeleton{
  background:linear-gradient(90deg,var(--gestio-border) 25%,#f2f4fa 37%,var(--gestio-border) 63%);
  background-size:400% 100%; border-radius:var(--gestio-r-sm);
  animation:gestio-shimmer 1.3s ease-in-out infinite; height:12px;
}
@keyframes gestio-shimmer{from{background-position:100% 50%} to{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media (max-width:900px){
  .gestio-panel{width:100%}
  .gestio-table__actions{width:auto; min-width:0}
}

/* ============================================================================
   15. NAVIGATION PRINCIPALE — rail de modules + panneau de menu
   ─────────────────────────────────────────────────────────────────────────
   Deux niveaux, et deux seulement : un rail sombre qui porte les MODULES, un
   panneau clair qui porte les ÉCRANS du module courant. Le panneau ne connaît
   qu'un module à la fois — c'est ce qui le distingue d'un menu arborescent, où
   tout reste ouvert et où plus rien ne se lit.

   ⚠ À ne pas confondre avec §12 (`.gestio-tabs`, `.gestio-segment`) : celle-là
   navigue DANS une page, celle-ci navigue ENTRE les modules.

   ── ÉTAT ACTIF : toujours le primaire, jamais autre chose ──
   Une seule couleur porte la sélection, déclinée selon le fond qui la reçoit :
     • sur le RAIL sombre   → primaire PLEIN, texte blanc ;
     • sur le PANNEAU clair → primaire DOUX, texte primaire.
   C'est la même intention rendue lisible sur deux fonds opposés — un primaire
   doux sur #1e2340 ne se verrait pas, un primaire plein sur blanc écraserait la
   liste. Pas d'autre nuance : ni par profondeur, ni par section.

   ── ⚠ EXCEPTION ASSUMÉE : le composant lit `body.sidebar-collapsed` ──
   Le kit n'impose normalement que ses propres classes. Ici il en lit deux qui
   appartiennent à l'application : `body.sidebar-collapsed`, posée par le JS du
   thème au clic sur le bouton de repli et relue depuis `localStorage`, et
   `.active`, posée sur le <li> par `teamicro.js`. Le JS ne peut pas changer — il
   est partagé par des écrans qui ne sont pas migrés — donc c'est le kit qui
   s'adapte. `.gestio-nav--collapsed` reste accepté en parallèle, pour un usage
   hors application (nav.html, page de référence).

   ── ⚠ PÉRIMÈTRE : DESKTOP UNIQUEMENT (≥ 768 px) ──
   Ce composant ne couvre PAS le téléphone. Sous 768 px il disparaît entièrement
   et la §17 prend le relais avec sa barre basse. ⚠ Il DISPARAÎT sans être
   retiré du document : `gestio-m-nav.js` y lit la liste des modules et leur
   état actif. Le supprimer obligerait à redéclarer cette liste ailleurs, avec
   ses droits — deux listes à tenir, donc deux listes qui divergent.
   Entre 768 et 1040 px, le rail seul : le panneau prendrait la largeur de
   l'écran par-dessus le contenu.
   ========================================================================= */
.gestio-nav{display:flex; height:100vh; position:sticky; top:0}

/* --- rail ---------------------------------------------------------------- */
.gestio-nav__rail{
  width:var(--gestio-nav-w); flex:none; background:var(--gestio-nav-bg);
  display:flex; flex-direction:column; align-items:center; padding:16px 0 12px; gap:4px;
}
.gestio-nav__logo{width:55px; height:55px; margin-bottom:18px; flex:none}
/* Pousse le groupe de pied (Rapports, Paramétrage) en bas du rail : aucune
   hauteur à calculer, il tient quel que soit le nombre de modules. */
.gestio-nav__spacer{flex:1}

/* Bascule logo ↔ icône de repli. Les deux vignettes occupent la MÊME cellule de
   grille : elles se croisent en opacité, sans reflux. Le déclencheur est le
   survol du rail entier, pas seulement du bouton — on vise une cible de 65 px
   de large, pas une pastille de 34 px. */
.gestio-nav__toggle{
  position:relative; display:grid; place-items:center;
  width:100%; height:60px; flex:none; margin-bottom:20px;
  border:0; background:transparent; cursor:pointer; padding:0;
}
.gestio-nav__toggle:focus, .gestio-nav__toggle:active,
.gestio-nav__toggle:focus:not(:focus-visible){outline:none; box-shadow:none}
.gestio-nav__toggle .gestio-nav__logo,
.gestio-nav__toggle-ic{
  grid-area:1 / 1; display:grid; place-items:center;
  margin:0; transition:opacity .15s ease;
}
.gestio-nav__toggle-ic{opacity:0; color:#fff}
.gestio-nav__toggle-ic svg{width:24px; height:24px}
.gestio-nav__rail:hover .gestio-nav__toggle .gestio-nav__logo{opacity:0}
.gestio-nav__rail:hover .gestio-nav__toggle-ic{opacity:1}
/* ── Deux icônes, une par état ──
   Le bouton dit ce qu'il VA faire, pas dans quel état on se trouve : replié il propose
   d'ouvrir, déployé il propose de réduire. Une seule icône laissait deviner.
   ⚠ Les deux occupent la même cellule (`grid-area:1/1`) : sans ces règles elles se
   superposeraient. C'est `display` qui les départage, pas `opacity` — l'opacité est déjà
   prise par l'apparition au survol du rail. */
.gestio-nav__toggle-ic--ouvrir{display:none}
body.sidebar-collapsed .gestio-nav__toggle-ic--ouvrir{display:grid}
body.sidebar-collapsed .gestio-nav__toggle-ic--reduire{display:none}

/* ⚠ Pastille 57 px, libellé 9 px — et un filet de sécurité sur le retour à la
   ligne. Le module le plus long est « Paramétrage » ; mesuré à 500 de graisse
   contre les 57 px disponibles :
     • 11 px → déborde dans toutes les polices ;
     • 10 px → déborde encore (57,8 px en repli générique, 63 px en repli système) ;
     •  9 px → 52 px en repli générique, 57,3 px en repli système.
   9 px est aussi la valeur déjà en service dans l'application
   (`.text-under-icon-menu`). Le cas limite est le repli SYSTÈME, plus large
   qu'Inter : d'où `overflow-wrap:anywhere`, qui fait passer le mot sur deux
   lignes DANS la pastille plutôt que de le laisser déborder. Avec Inter chargée
   il ne se déclenche jamais. Élargir la pastille n'est pas une option : le rail
   fait 65 px et cette largeur pilote le décalage de toutes les pages. */
.gestio-nav__module{
  width:57px; padding:10px 0 8px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--gestio-r-md); color:var(--gestio-nav-fg);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-family:inherit; transition:background-color .18s, color .18s;
}
/* Deux tailles, une par nature d'icône : un glyphe de police est optiquement
   plus gros qu'un tracé au même nombre de pixels. */
.gestio-nav__module i{font-size:22px; line-height:1}
.gestio-nav__module svg{width:24px; height:24px}
.gestio-nav__module span{font-size:9px; font-weight:500; line-height:1.2; text-align:center; overflow-wrap:anywhere}
.gestio-nav__module:hover{color:#fff; background:rgba(255,255,255,.06)}
.gestio-nav__module.is-active{background:var(--gestio-primary); color:#fff}

/* --- panneau ------------------------------------------------------------- */
.gestio-nav__panel{
  width:var(--gestio-nav-panel-w); flex:none; background:var(--gestio-surface);
  border-right:1px solid var(--gestio-border); display:flex; flex-direction:column;
}
.gestio-nav__head{display:flex; align-items:center; gap:8px; padding:18px 16px 14px}
/* Deux sélecteurs pour un seul style : l'application porte son titre dans
   `a.titremodule > h4`, qu'on ne renomme pas — on lui pose `.gestio-nav__title`. */
.gestio-nav__head h2,
.gestio-nav__title{flex:1; margin:0; font-size:1.25rem; font-weight:700; color:var(--gestio-black)}
/* `flex:1` sur le corps : il prend la place restante, ce qui plaque le pied en
   bas sans marge automatique, et fait défiler la liste plutôt que le panneau. */
.gestio-nav__body{flex:1; overflow-y:auto; padding:0 10px 16px}

/* Intertitre de groupe : le libellé, puis un filet qui occupe la largeur
   restante. Le filet est un pseudo-élément, le balisage se réduit au texte. */
.gestio-nav__section{
  display:flex; align-items:center; gap:10px; margin:18px 0 6px; padding:0 12px;
  font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gestio-grey-light);
}
.gestio-nav__section::after{content:""; flex:1; height:1px; background:var(--gestio-border)}

/* Séparateur muet : sépare deux blocs sans les nommer, là où un intertitre
   n'aurait rien à dire. Hauteur nulle, c'est la bordure qui se voit. */
.gestio-nav__sep{
  list-style:none; height:0; margin:9px 16px; padding:0;
  border-top:1px solid var(--gestio-border);
}

.gestio-nav__item{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px;
  border:0; background:transparent; cursor:pointer; text-align:left;
  border-radius:var(--gestio-r-md); font-family:inherit; font-size:.875rem;
  font-weight:400; color:var(--gestio-black); transition:background-color .15s, color .15s;
}
.gestio-nav__item:hover{background:var(--gestio-bg)}
.gestio-nav__item.is-active{background:var(--gestio-primary-soft); color:var(--gestio-primary); font-weight:600}

/* Sous-menu repliable du panneau. Fermé par défaut, ouvert par `.open-sub`.
   ⚠ Animation par `max-height`, jamais par `height:auto` — qui ne s'anime pas.
   La valeur haute est un plafond, pas une mesure : elle doit rester supérieure
   au plus long sous-menu, sinon il se coupe. */
.gestio-nav__sub{
  display:block; overflow:hidden; list-style:none;
  max-height:0; opacity:0;
  margin:0 0 0 31px; padding:0 0 0 12px;
  border-left:1.5px solid var(--gestio-border);
  transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .22s ease,
             margin-top .3s cubic-bezier(.4,0,.2,1), margin-bottom .3s cubic-bezier(.4,0,.2,1);
}
.gestio-nav__sub.open-sub{max-height:500px; opacity:1; margin-top:2px; margin-bottom:6px}
.gestio-nav__sub .gestio-nav__item{
  padding:8px 10px; margin:1px 6px 1px 0;
  font-size:.875rem; font-weight:500; color:var(--gestio-grey);
}
.gestio-nav__sub .gestio-nav__item:hover{color:var(--gestio-black)}
/* Chevron du parent : droite quand fermé, bas quand ouvert. */
/* ⚠ LARGEUR FIXE — 2026-08-12.
   Le chevron vient de Tabler, une police d'icônes chargée depuis un CDN. Tant qu'elle n'est pas
   arrivée, `::before` rend un glyphe de REPLI dont la largeur n'a rien à voir avec l'icône
   finale : la place laissée au libellé change, « Factures d'achat » passe sur deux lignes, puis
   revient sur une quand la police arrive. On croit à un défaut de police du TEXTE ; c'est la
   largeur de l'ICÔNE qui bouge.
   `flex:none` + largeur fixe + `overflow:hidden` : la ligne devient insensible à ce que le
   glyphe mesure, avant comme après. */
.gestio-nav__item .gestio-nav__chevron{
  margin-left:auto; flex:none; width:16px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.gestio-nav__item.sub-open .gestio-nav__chevron{transform:rotate(90deg)}

.gestio-nav__foot{
  border-top:1px solid var(--gestio-border); padding:12px 18px;
  display:flex; gap:16px; color:var(--gestio-grey);
}

/* --- icônes animées du pied ----------------------------------------------
   ⚠ Des SVG en ligne, plus des <i> de police d'icônes : une police ne s'anime pas. On ne peut
   pas faire glisser une molette ni écarter deux pages dans un glyphe — le tracé, lui, se
   manipule. Chaque icône dit ce que le clic va faire, et l'annonce au survol.

   ⚠ `transform-box:fill-box` : sans lui, `transform-origin:center` d'un élément SVG se calcule
   sur la boîte de la VUE et non sur celle de la forme — les molettes partiraient de travers.

   ⚠ Les deux couleurs sont celles demandées, en dur. Elles ne correspondent à aucun jeton
   `--gestio-*` existant ; si elles doivent vivre, elles mériteront le leur.
   ------------------------------------------------------------------------- */
.gestio-nav__foot .gestio-ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #3A6392;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .22s ease, transform .45s cubic-bezier(.34,1.25,.64,1);
}

.gestio-nav__foot .gestio-ic * {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .4s cubic-bezier(.34,1.25,.64,1);
}

.gestio-nav__foot button:hover .gestio-ic,
.gestio-nav__foot a:hover .gestio-ic { stroke: #2B4E77; }

/* Curseurs : les molettes glissent */
.gestio-nav__foot button:hover .ic-sliders .knob-1,
.gestio-nav__foot a:hover .ic-sliders .knob-1 { transform: translateX(-7px); }
.gestio-nav__foot button:hover .ic-sliders .knob-2,
.gestio-nav__foot a:hover .ic-sliders .knob-2 { transform: translateX(7px); }
.gestio-nav__foot button:hover .ic-sliders .knob-3,
.gestio-nav__foot a:hover .ic-sliders .knob-3 { transform: translateX(-5px); }

/* Contraste : le disque pivote à 180° */
.gestio-nav__foot button:hover .ic-contrast,
.gestio-nav__foot a:hover .ic-contrast { transform: rotate(180deg); }

/* Livre : les pages s'écartent */
.gestio-nav__foot button:hover .ic-book .page-l,
.gestio-nav__foot a:hover .ic-book .page-l {
  transform: rotateY(-22deg); transform-origin: right;
}
.gestio-nav__foot button:hover .ic-book .page-r,
.gestio-nav__foot a:hover .ic-book .page-r {
  transform: rotateY(22deg); transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .gestio-nav__foot .gestio-ic,
  .gestio-nav__foot .gestio-ic * { transition: stroke .15s ease; transform: none; }
}

/* --- infobulles ----------------------------------------------------------
   En CSS pur, par `::after` : la barre de navigation vit dans le gabarit du
   thème, qui ne charge pas `gestio-ui.js`. Une infobulle qui dépend d'un script
   absent est une infobulle qui n'existe pas.
   ⚠ Si une page charge À LA FOIS `gestio-ui.js` et ce composant, `[data-tip]`
   serait rendu deux fois — par le script et par ces règles. Sur ces deux
   emplacements seulement, choisir l'un ou l'autre.
   ========================================================================= */
/* ── Le bouton de repli : l'icône ne sort pas du cercle ──
   Deux appuis qui manquaient. Le bouton partage sa ligne avec le titre du module :
   sans `flex-shrink:0`, un titre long comprime le cercle en ovale et l'icône déborde
   — « Paramètrage » est le plus long. Et un <button> porte le padding par défaut du
   navigateur, ASYMÉTRIQUE (1px haut/bas, 6px gauche/droite) : la place utile dans les
   40 px du cercle tombe à 28 × 38, l'icône y paraît à l'étroit et n'a plus que 4 px de
   marge de chaque côté. Taille de l'icône fixée ici plutôt que sur l'attribut du <svg>,
   qu'une feuille du thème peut écraser. */
.gestio-nav__collapse{flex-shrink:0; padding:0}
.gestio-nav__collapse svg{width:20px; height:20px; flex-shrink:0}
.gestio-nav__foot [data-tip],
.gestio-nav__collapse[data-tip]{position:relative}
.gestio-nav__foot [data-tip]::after,
.gestio-nav__collapse[data-tip]::after{
  content:attr(data-tip); position:absolute; z-index:200;
  font-size:.75rem; line-height:1; padding:6px 10px; white-space:nowrap;
  border-radius:var(--gestio-r-md); opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
/* Pied : bulle sombre AU-DESSUS — il n'y a rien sous le pied pour l'accueillir. */
.gestio-nav__foot [data-tip]::after{
  bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--gestio-black); color:#fff; font-weight:600;
}
.gestio-nav__foot [data-tip]:hover::after{opacity:1}
/* Bouton de repli : bulle claire EN DESSOUS, alignée à droite pour ne pas
   sortir du panneau. */
.gestio-nav__collapse[data-tip]::after{
  top:calc(100% + 9px); right:0; transform:translateY(-4px);
  background:var(--gestio-surface); color:var(--gestio-black); font-weight:500;
  border:1px solid var(--gestio-border); box-shadow:var(--gestio-shadow-lg);
}
.gestio-nav__collapse[data-tip]:hover::after{opacity:1; transform:translateY(0)}

/* --- état replié ---------------------------------------------------------
   Le panneau DISPARAÎT, il ne rétrécit pas : replié, il ne reste que le rail,
   et les écrans du module s'atteignent par le flyout au survol. C'est le
   comportement réellement en service dans l'application.
   Conséquence assumée : le bouton de repli vivant DANS le panneau, le retour à
   l'état déployé passe forcément par le rail — bouton de bascule, ou clic sur
   une zone vide.
   ========================================================================= */
/* ⚠ `width:0` et non `display:none` : `display` ne s'anime pas, le panneau disparaissait
   d'un coup alors que son apparition était soignée. La largeur, elle, se transitionne — et
   comme c'est une transition et non une animation, elle ne rejoue pas au chargement des pages.
   L'état final est le même : plus rien de visible, et les flyouts du rail prennent le relais. */
.gestio-nav--collapsed .gestio-nav__panel,
body.sidebar-collapsed .gestio-nav__panel{width:0; opacity:0; border-right-width:0}
/* Le rail cesse de rogner ses enfants, sinon le flyout serait coupé net. */
.gestio-nav--collapsed .gestio-nav__rail,
body.sidebar-collapsed .gestio-nav__rail{overflow:visible}

/* Curseurs : la zone vide annonce ce qu'un clic va faire. Replié, cliquer le
   rail ouvre (flèche vers la droite) ; déployé, cliquer le panneau ferme
   (flèche vers la gauche). Liens et boutons gardent la main. */
.gestio-nav--collapsed .gestio-nav__rail,
body.sidebar-collapsed .gestio-nav__rail{cursor:e-resize}
.gestio-nav:not(.gestio-nav--collapsed) .gestio-nav__panel,
body:not(.sidebar-collapsed) .gestio-nav__panel{cursor:w-resize}
.gestio-nav__rail a, .gestio-nav__rail button,
.gestio-nav__panel a, .gestio-nav__panel button, .gestio-nav__panel input{cursor:pointer}

/* --- flyout du rail ------------------------------------------------------
   Sous-menu flottant, affiché au survol d'un module quand le panneau est replié.
   ⚠ `position:fixed` ET placement calculé en JS : le flyout doit être SORTI du
   rail (déplacé dans <body>) avant d'être positionné. Laissé sur place, il est
   rogné par le rail et décalé par tout ancêtre en `transform`.
   ⚠ z-index très élevé : le thème monte jusqu'à 999999.
   ========================================================================= */
.gestio-nav__flyout{
  display:none; position:fixed; z-index:99999;
  min-width:200px; padding:8px;
  background:var(--gestio-surface); color:var(--gestio-black);
  border:1px solid var(--gestio-border); border-radius:var(--gestio-r-xl);
  box-shadow:var(--gestio-shadow-lg); text-align:left;
}
.gestio-nav__flyout.is-open{display:block}
.gestio-nav__flyout-head{
  font-size:.9375rem; font-weight:700; color:var(--gestio-black);
  padding:8px 12px 10px; margin-bottom:6px; border-bottom:1px solid var(--gestio-border);
}
.gestio-nav__flyout ul{list-style:none; margin:0; padding:0}
.gestio-nav__flyout li{margin:0}
.gestio-nav__flyout a{
  display:block; padding:9px 12px; border-radius:var(--gestio-r-lg);
  color:var(--gestio-grey); font-size:.84375rem; font-weight:500;
  text-decoration:none; white-space:nowrap; transition:background-color .12s, color .12s;
}
.gestio-nav__flyout a:hover{background:var(--gestio-bg); color:var(--gestio-black)}

/* --- icônes animées ------------------------------------------------------
   Uniquement au survol et à l'activation, jamais en boucle : une icône qui
   bouge sans qu'on l'ait touchée attire l'œil en permanence pour rien.
   Une seule courbe, celle du kit. Chaque module anime UNE pièce de son tracé,
   nommée par une classe (`.needle`, `.plus`, `.flap`…) posée dans le SVG.
   ========================================================================= */
.gi{overflow:visible}
.gi *{transition:transform .35s cubic-bezier(.25,.8,.25,1), stroke-dashoffset .35s cubic-bezier(.25,.8,.25,1), opacity .25s}

.gi-analyse .needle{transform-origin:12px 13px}
.gestio-nav__module:hover .gi-analyse .needle,
.gestio-nav__module.is-active .gi-analyse .needle{transform:rotate(38deg)}

.gi-ventes .plus{transform-origin:17.5px 16.5px}
.gestio-nav__module:hover .gi-ventes .plus,
.gestio-nav__module.is-active .gi-ventes .plus{transform:scale(1.25)}

.gi-achats .flap{transform-origin:20px 12px}
.gestio-nav__module:hover .gi-achats .flap,
.gestio-nav__module.is-active .gi-achats .flap{transform:translateX(2px)}

.gi-stock .mark{transform-origin:12px 6px}
.gestio-nav__module:hover .gi-stock .mark,
.gestio-nav__module.is-active .gi-stock .mark{transform:translateY(2.5px)}

.gestio-nav__module:hover .gi-treso .top,
.gestio-nav__module.is-active .gi-treso .top{transform:translateY(-2.5px)}

.gestio-nav__module:hover .gi-fiscal .roof,
.gestio-nav__module.is-active .gi-fiscal .roof{transform:translateY(-1.5px)}

.gi-rapports .b1,.gi-rapports .b2,.gi-rapports .b3{transform-origin:center bottom}
.gestio-nav__module:hover .gi-rapports .b1,.gestio-nav__module.is-active .gi-rapports .b1{transform:scaleY(1.35)}
.gestio-nav__module:hover .gi-rapports .b2,.gestio-nav__module.is-active .gi-rapports .b2{transform:scaleY(.7)}
.gestio-nav__module:hover .gi-rapports .b3,.gestio-nav__module.is-active .gi-rapports .b3{transform:scaleY(1.2)}

.gestio-nav__module:hover .gi-param .k1,.gestio-nav__module.is-active .gi-param .k1{transform:translateX(4px)}
.gestio-nav__module:hover .gi-param .k2,.gestio-nav__module.is-active .gi-param .k2{transform:translateX(-4px)}

@media (prefers-reduced-motion:reduce){ .gi *{transition:none} }

/* ── Variante « liste » : ul > li > a ──────────────────────────────────────
   L'application porte ses menus en `ul.main-menu > li > a`, et son JS en dépend
   de façon structurelle — on ne peut pas aplatir cet arbre :
     • `teamicro.js` fait `$li.children('a')` (enfant DIRECT) ;
     • il pose l'actif du panneau sur le <li> : `$best.closest('li').addClass('active')` ;
     • `maince5a.js` délègue le survol du rail sur `ul.main-menu > li.has-sub-menu`.
   Le composant accepte donc les deux formes : `<button class="gestio-nav__item">`
   ou `<li><a class="gestio-nav__item">`. C'est le kit qui s'aligne.
   ========================================================================= */
ul.gestio-nav__body, .gestio-nav__body ul{list-style:none; margin:0}
.gestio-nav__body li{list-style:none}
a.gestio-nav__item{text-decoration:none}
/* ⚠ L'actif du panneau est posé par le JS sur le <li> PARENT, jamais sur le lien.
   Le composant lit donc les deux emplacements. `.active` est une classe d'état
   générique, pas un nom propre à l'application. */
.gestio-nav__body li.active > .gestio-nav__item{
  background:var(--gestio-primary-soft); color:var(--gestio-primary); font-weight:600;
}

/* Chevron en mode RÉDUIT — pastille de 8 px calée sous l'icône.
   ⚠ Ne sert que si le panneau réduit reste VISIBLE en mode icônes seules. L'état
   `--collapsed` du kit le masque entièrement (comportement réellement en service
   dans l'application) : ces deux règles ne s'appliquent donc qu'à une variante
   « icônes seules » qui n'est pas active aujourd'hui. Elles sont là pour ne pas
   perdre la mise en forme, pas pour être utilisées en l'état. */
.gestio-nav__item--reduit{position:relative; justify-content:center}
.gestio-nav__item--reduit .gestio-nav__chevron{
  position:absolute; right:3px; bottom:3px; margin:0;
  font-size:8px; line-height:1; color:var(--gestio-grey-light);
}

/* --- garde tablette --------------------------------------------------------
   Entre 768 et 1040 px on garde le rail et l'on masque le panneau : il
   occuperait la largeur de l'écran par-dessus le contenu.
   ⚠ Sous 768 px ce n'est plus cette règle qui agit, mais `.gestio-nav{
   display:none}` (fin de `nav.html`) : la barre basse de la §17 remplace alors
   la navigation entière. */
@media (max-width:1039px){
  .gestio-nav__panel{display:none}
}

/* ============================================================================
   ── Logo light sweep ──
   Reflet qui traverse le logo du rail. Le voile est un pseudo-élément du
   conteneur, découpé par `overflow:hidden` + `border-radius:50%` : le logo de
   l'application étant un disque plein, le clip épouse sa forme et rien ne bave
   sur le fond du rail. Un logo à fond transparent demanderait un `mask-image`
   — posé sur le CONTENEUR, jamais sur le pseudo-élément, dont le masque
   suivrait la translation au lieu de rester en place.
   ========================================================================= */
.gestio-logo {
  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}

.gestio-logo img,
.gestio-logo svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gestio-logo::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 42%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(0) rotate(20deg);
  animation: gestioLogoSweep 5s linear infinite;
}

@keyframes gestioLogoSweep {
  0%   { transform: translateX(0) rotate(20deg); }
  30%  { transform: translateX(400%) rotate(20deg); }
  100% { transform: translateX(400%) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gestio-logo::after { animation: none; }
}

/* ============================================================================
   16. MOBILE — tous les composants sous 768 px (2026-08-22)
   ----------------------------------------------------------------------------
   ⚠ POURQUOI ICI ET NON DANS LES ÉCRANS. Le logiciel compte 686 vues, dont 143
   documents autonomes qui chargent cette feuille. Reprendre chaque écran, c'était
   686 corrections et 686 occasions d'en oublier une ; corriger le COMPOSANT les
   sert toutes d'un coup, et le prochain écran naît responsive.

   ⚠ RIEN N'EST MASQUÉ. Cacher une colonne ou un bouton sur mobile, c'est décider à
   la place de l'utilisateur que le montant ou l'échéance ne l'intéresse pas. Ce qui
   ne tient pas DÉFILE ou passe à la ligne — l'information reste entière.

   ⚠ LES LARGEURS EN DUR DES ÉCRANS SONT NEUTRALISÉES PAR `max-width`, pas écrasées.
   515 attributs `style="width:NNNpx"` existent dans les vues : on ne peut pas les
   réécrire un par un, et `!important` sur `width` casserait les colonnes de
   tableaux qui, elles, ont besoin de leur largeur. `max-width:100%` suffit : il
   laisse la largeur demandée quand la place existe, et la borne sinon.
   ========================================================================= */
@media (max-width: 767px) {

  /* ── le socle ────────────────────────────────────────────────────────────── */
  body { padding-left: 14px !important; padding-right: 14px !important; }

  /* ⚠ La borne, pas l'écrasement — voir l'avertissement en tête de section. */
  .gestio-card,
  .gestio-modal__box,
  .gestio-panel,
  .gestio-totals,
  .gestio-info,
  .gestio-drop { max-width: 100%; }

  .gestio-card { padding: 16px 14px; }

  /* ── grilles : une colonne ───────────────────────────────────────────────── */
  /* Deux champs côte à côte sur 360 px donnent deux champs de 160 px : un
     matricule fiscal n'y tient pas, et l'on saisit à l'aveugle. */
  .gestio-grid,
  .gestio-grid-2,
  .gestio-grid-3,
  .gestio-form-row { grid-template-columns: 1fr !important; }

  /* ── tableaux : ils défilent, ils ne rétrécissent pas ────────────────────── */
  /* ⚠ `.gestio-table-wrap` porte déjà `overflow-x:auto` ; ce qui manquait, c'est
     que le tableau garde une largeur lisible DEDANS. Sans `min-width`, il se
     comprime jusqu'à empiler les mots un par ligne. */
  .gestio-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gestio-table { min-width: 560px; }

  /* ── modals et panneaux : plein écran ────────────────────────────────────── */
  /* Un modal de 440 px centré sur 360 px déborde des deux côtés. */
  .gestio-modal__box {
    width: 100% !important;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: var(--gestio-r-xl) var(--gestio-r-xl) 0 0;
  }
  .gestio-modal { align-items: flex-end; }
  .gestio-modal--full .gestio-modal__box { border-radius: 0; max-height: 100dvh; }
  .gestio-panel { width: 100%; max-width: 100%; }

  /* ── barres de commandes : à la ligne, jamais comprimées ─────────────────── */
  .gestio-dialog__foot,
  .gestio-modal__foot { flex-wrap: wrap; gap: 8px; }
  .gestio-dialog__foot > .gestio-btn,
  .gestio-modal__foot > .gestio-btn { flex: 1 1 auto; justify-content: center; }

  /* ── onglets et segments : ils défilent ──────────────────────────────────── */
  /* Six onglets sur 360 px, c'est 60 px chacun — des libellés coupés. Ils gardent
     leur taille et l'on fait glisser. */
  .gestio-tabs,
  .gestio-segment {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .gestio-tabs::-webkit-scrollbar,
  .gestio-segment::-webkit-scrollbar { display: none; }
  .gestio-tabs button,
  .gestio-segment button { flex: none; }

  /* ── fil d'étapes : les numéros suffisent ────────────────────────────────── */
  /* Le kit coupe déjà les sous-titres sous 720 px ; on garde la règle et l'on
     resserre, sans jamais retirer le numéro : c'est lui qui dit où l'on en est. */
  .gestio-steps { gap: 6px; }
  .gestio-steps__txt small { display: none; }

  /* ── champs ─────────────────────────────────────────────────────────────── */
  /* ⚠ 16 px MINIMUM SUR LES CHAMPS : en dessous, iOS ZOOME automatiquement à la
     mise au point, et la page reste agrandie ensuite — l'utilisateur croit avoir
     cassé quelque chose. C'est la seule raison de cette taille. */
  .gestio-input input,
  .gestio-input textarea,
  .gestio-input select,
  .gestio-select select { font-size: 16px; }

  /* ── assistant (wizard) ─────────────────────────────────────────────────── */
  .wz-body { grid-template-columns: 1fr !important; gap: 28px; padding: 20px 16px; }
  .wz-form { max-width: 100%; }
  .wz-preview { position: static; }
  .wz-top { padding: 14px 16px; }

  /* ── pièces jointes : l'aperçu passe sous la liste ───────────────────────── */
  .jz-split { grid-template-columns: 1fr !important; }
  .np-dlg { width: 100%; max-width: 100%; height: 92dvh; }
}

/* Tablette : deux colonnes plutôt que trois, et les modals restent centrés. */
@media (min-width: 768px) and (max-width: 1039px) {
  .gestio-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gestio-table { min-width: 0; }
}

/* ============================================================================
   17. NAVIGATION MOBILE — barre basse, feuilles, grille des modules
   ----------------------------------------------------------------------------
   Source : html/kit_gestio/KIT_GESTIO_MOBILE.html. La maquette fait foi ; toute
   divergence de mesure ou de nom est un défaut, pas une interprétation.

   ⚠ POURQUOI UNE BARRE BASSE ET PLUS UN TIROIR. Le tiroir cachait TOUTES les
   destinations derrière un burger : pour aller aux ventes il fallait ouvrir, viser
   un module dans une colonne de 82 px, puis viser un écran. Trois gestes pour la
   chose la plus fréquente du logiciel. La barre basse met les trois modules les
   plus employés sous le pouce, en un geste, et n'enferme rien : « Plus » ouvre les
   huit autres.

   ⚠ TOUT EST PRÉFIXÉ `.gestio-m-*`, sans exception. Une seule règle touche `body`,
   et elle est portée par une classe (`body.gestio-m-nav`) : réserver la hauteur de
   la barre basse, sans quoi la dernière ligne d'une liste est inatteignable.

   ⚠ `position:fixed` ET `100dvh`, JAMAIS `absolute` NI `100vh`. La maquette emploie
   `absolute` parce que le cadre du téléphone y joue le rôle du viewport ; en vrai,
   la page défile derrière et un absolu partirait avec elle. Et `vh` compte la barre
   d'adresse mobile : la barre basse se retrouverait sous le pouce, dans le vide.

   ⚠ AUCUNE COULEUR EN DUR. Deux exceptions assumées : le blanc du texte sur fond
   primaire (`#fff`), qui n'a pas de jeton, et l'ombre du bouton de création, teintée
   du primaire — elle n'existe qu'ici.
   ========================================================================= */

/* ⚠ QUATRE JETONS NOUVEAUX, ET JE LES SIGNALE comme le brief le demande :
   `--gestio-m-topbar-h`, `--gestio-m-tabbar-h`, `--gestio-m-touch`, `--gestio-m-row-h`.
   Ce sont des DIMENSIONS, pas des couleurs — la maquette les déclare elle-même
   (`--m-topbar-h`…). Ils portent le préfixe `--gestio-m-` pour qu'on sache d'un coup
   d'œil qu'ils n'appartiennent qu'à la navigation mobile. */
:root{
  --gestio-m-topbar-h: 56px;
  --gestio-m-tabbar-h: 58px;
  --gestio-m-touch:    48px;   /* cible tactile minimale */
  --gestio-m-row-h:    52px;   /* ligne de rubrique */
}

@media (max-width: 767px) {

  /* ── réserve sous le contenu ─────────────────────────────────────────────── */
  /* ⚠ La seule règle sur `body`, portée par une classe. Sans elle, la barre basse
     recouvre la dernière ligne de toute liste — et l'on ne peut pas l'atteindre. */
  body.gestio-m-nav{
    /* Les deux barres sont fixes : sans réserve, la première ligne passe sous
       celle du haut et la dernière sous celle du bas. */
    padding-top: var(--gestio-m-topbar-h);
    padding-bottom: calc(var(--gestio-m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 22px);
  }

  /* ── 1. barre du haut ────────────────────────────────────────────────────── */
  /* ⚠ `fixed`, ET NON `sticky` COMME LA MAQUETTE. Dans la maquette, la barre est
     DANS le cadre qui défile : `sticky` suffit. Dans l'application, le bloc de
     navigation est FRÈRE du contenu et placé après lui — une barre `sticky` s'y
     colle au bas du flux, c'est-à-dire sous toute la page, hors de vue. Mesuré
     avant correction, sur un écran de 390 px : la barre du haut se rendait à
     y=851, plus bas que la fenêtre. */
  .gestio-m-topbar{
    position: fixed; top: 0; left: 0; right: 0; z-index: 100030;
    height: var(--gestio-m-topbar-h); display: flex; align-items: center; gap: 6px;
    padding: 0 8px 0 10px; background: var(--gestio-surface);
    border-bottom: 1px solid var(--gestio-border);
    font-family: var(--gestio-font);
  }
  .gestio-m-topbar__co{
    width: 34px; height: 34px; flex: none; border: 0; cursor: pointer;
    border-radius: 9px; color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: .3px;
    display: flex; align-items: center; justify-content: center;
  }
  .gestio-m-topbar__title{
    flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; gap: 4px; padding: 0 6px;
    border-radius: var(--gestio-r-lg);
    font-size: 17px; font-weight: 700; text-align: start; color: var(--gestio-black);
    font-family: inherit;
  }
  .gestio-m-topbar__title span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gestio-m-topbar__title svg{
    width: 16px; height: 16px; flex: none; color: var(--gestio-grey-light);
    transition: transform .18s;
  }
  .gestio-m-topbar__title:active{ background: var(--gestio-bg); }
  .gestio-m-topbar__ico{
    width: 40px; height: 40px; flex: none; border: 0; background: transparent; cursor: pointer;
    border-radius: var(--gestio-r-lg); display: flex; align-items: center; justify-content: center;
    color: var(--gestio-grey);
  }
  /* ⚠ `[hidden]` NE SUFFIT PAS QUAND LA CLASSE POSE UN `display`. L'attribut
     vaut `display:none` par la feuille du navigateur — la plus faible qui
     soit : le `display:flex` ci-dessus la bat, et la loupe restait visible
     sur les écrans SANS champ de recherche, où elle ne faisait rien. Un
     bouton qui ne fait rien est la promesse non tenue que le brief interdit,
     en plus discret qu'un `#`. */
  .gestio-m-topbar__ico[hidden]{display:none}
  .gestio-m-topbar__ico:active{ background: var(--gestio-bg); }
  .gestio-m-topbar__ico svg{ width: 21px; height: 21px; }
  .gestio-m-topbar__avatar{
    width: 32px; height: 32px; flex: none; border: 0; cursor: pointer; margin-inline-start: 2px;
    border-radius: 50%; background: var(--gestio-primary); color: #fff;
    font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  }

  /* ── 2. barre basse ──────────────────────────────────────────────────────── */
  .gestio-m-tabbar{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 100040;
    height: calc(var(--gestio-m-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--gestio-surface); border-top: 1px solid var(--gestio-border);
    display: flex; align-items: stretch; font-family: var(--gestio-font);
  }
  .gestio-m-tab{
    flex: 1; min-width: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--gestio-grey); padding: 0; position: relative;
    font-family: inherit; text-decoration: none;
  }
  .gestio-m-tab svg{ width: 23px; height: 23px; stroke-width: 1.8; transition: transform .18s; }
  .gestio-m-tab span{ font-size: 10px; font-weight: 500; letter-spacing: .01em; }
  .gestio-m-tab.is-active{ color: var(--gestio-primary); font-weight: 600; }
  .gestio-m-tab.is-active svg{ transform: translateY(-1px); }
  .gestio-m-tab:active{ background: var(--gestio-bg); }
  /* ⚠ Un TRAIT court en haut, pas une pastille pleine : la pastille se disputait la
     couleur avec le bouton de création, et l'œil ne savait plus lequel était l'état. */
  .gestio-m-tab.is-active::before{
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gestio-primary);
  }
  .gestio-m-tab--create{ flex: none; width: 74px; justify-content: flex-start; padding-top: 6px; }
  .gestio-m-fab{
    width: 48px; height: 48px; border-radius: 16px;
    background: var(--gestio-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(66, 61, 153, .35); margin-top: -16px;
  }
  .gestio-m-tab--create .gestio-m-fab svg{ width: 24px; height: 24px; stroke-width: 2.2; }
  .gestio-m-tab--create span{ margin-top: 2px; }

  /* ── 3. feuilles inférieures ─────────────────────────────────────────────── */
  /* ⚠ MÊME MOTIF QUE `.gestio-profile__menu` sous 768 px : voile sombre, coins hauts
     arrondis, REMPLACEMENT de panneau et jamais de cascade. On ne réinvente pas une
     feuille dont le comportement est déjà écrit et éprouvé. */
  .gestio-m-scrim{
    position: fixed; inset: 0; z-index: 100050; background: rgba(2, 20, 48, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .gestio-m-scrim.is-open{ opacity: 1; visibility: visible; transition-delay: 0s; }

  .gestio-m-sheet{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 100060;
    background: var(--gestio-surface); border-radius: 18px 18px 0 0;
    box-shadow: var(--gestio-shadow-lg);
    transform: translateY(102%);
    transition: transform .24s cubic-bezier(.22, .61, .36, 1);
    max-height: 82dvh; display: flex; flex-direction: column; overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--gestio-font);
  }
  .gestio-m-sheet.is-open{ transform: none; }
  .gestio-m-sheet__grip{
    width: 38px; height: 4px; border-radius: 999px;
    background: var(--gestio-border-strong); margin: 8px auto 2px; flex: none;
  }
  .gestio-m-sheet__head{
    display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; flex: none;
    font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--gestio-border);
  }
  .gestio-m-sheet__head h3{ margin: 0; flex: 1; font-size: 16px; font-weight: 700; }
  .gestio-m-sheet__back{
    width: 30px; height: 30px; flex: none; border: 0; background: transparent; cursor: pointer;
    border-radius: var(--gestio-r-md); display: flex; align-items: center; justify-content: center;
    color: var(--gestio-grey);
  }
  .gestio-m-sheet__back svg{ width: 18px; height: 18px; }
  .gestio-m-sheet__body{ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0; }

  /* ── 4. rubriques et lignes ──────────────────────────────────────────────── */
  .gestio-m-sect{
    display: flex; align-items: center; gap: 8px; margin: 18px 2px 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gestio-grey-light);
  }
  .gestio-m-sect:first-child{ margin-top: 4px; }
  .gestio-m-sect::after{ content: ""; flex: 1; height: 1px; background: var(--gestio-border); }

  .gestio-m-rows{
    background: var(--gestio-surface); border: 1px solid var(--gestio-border);
    border-radius: var(--gestio-r-xl); overflow: hidden;
  }
  .gestio-m-row{
    width: 100%; min-height: var(--gestio-m-row-h); border: 0; background: transparent;
    cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 0 14px;
    text-align: start; font-size: 15px; color: var(--gestio-black);
    border-bottom: 1px solid var(--gestio-border);
    font-family: inherit; text-decoration: none;
  }
  .gestio-m-row:last-child{ border-bottom: 0; }
  .gestio-m-row:active{ background: var(--gestio-bg); }
  .gestio-m-row__lbl{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gestio-m-row__count{
    font-size: 13px; color: var(--gestio-grey-light); font-variant-numeric: tabular-nums;
  }
  .gestio-m-row__chev{ width: 17px; height: 17px; flex: none; color: var(--gestio-grey-lighter); }

  .gestio-m-sheet .gestio-m-sect{ margin: 14px 16px 4px; }
  .gestio-m-sheet .gestio-m-rows{ border: 0; border-radius: 0; background: transparent; }
  .gestio-m-sheet .gestio-m-row{ border-bottom: 0; min-height: var(--gestio-m-touch); padding: 0 16px; }
  .gestio-m-sheet .gestio-m-row.is-active{
    background: var(--gestio-primary-soft); color: var(--gestio-primary); font-weight: 600;
  }

  /* ── 5. grille des modules (feuille « Plus ») ────────────────────────────── */
  .gestio-m-mods{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 10px 14px;
  }
  .gestio-m-mod{
    border: 0; background: transparent; cursor: pointer; border-radius: var(--gestio-r-xl);
    min-height: 76px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 7px;
    color: var(--gestio-black); font-size: 11px; font-weight: 500; padding: 8px 2px;
    font-family: inherit; text-decoration: none; text-align: center;
  }
  .gestio-m-mod svg{ width: 24px; height: 24px; stroke-width: 1.8; color: var(--gestio-grey); }
  .gestio-m-mod:active{ background: var(--gestio-bg); }
  .gestio-m-mod.is-active{
    background: var(--gestio-primary-soft); color: var(--gestio-primary); font-weight: 600;
  }
  .gestio-m-mod.is-active svg{ color: var(--gestio-primary); }

  /* ── 6. bloc compte et sociétés ──────────────────────────────────────────── */
  /* ⚠ COULEUR ET SOULIGNEMENT POSÉS EXPLICITEMENT : le bloc compte est un
     `<a>`, et le thème colore tout lien en bleu. Le nom de l'utilisateur
     sortait donc en bleu de lien, comme s'il menait ailleurs. */
  .gestio-m-acct{
    display: flex; align-items: center; gap: 11px; padding: 12px 16px;
    color: var(--gestio-black); text-decoration: none;
  }
  .gestio-m-acct__av{
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    background: var(--gestio-primary); color: #fff;
    font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  }
  .gestio-m-acct__txt{ flex: 1; min-width: 0; }
  .gestio-m-acct__name{ font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
  .gestio-m-acct__role{
    font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
    background: var(--gestio-primary-soft); color: var(--gestio-primary);
  }
  .gestio-m-acct__mail{
    font-size: 13px; color: var(--gestio-grey);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .gestio-m-group{ border-top: 1px solid var(--gestio-border); padding: 4px 0; }
  .gestio-m-item{
    width: 100%; min-height: var(--gestio-m-touch); border: 0; background: transparent;
    cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 0 16px;
    font-size: 15px; text-align: start; color: var(--gestio-black);
    font-family: inherit; text-decoration: none;
  }
  .gestio-m-item:active{ background: var(--gestio-primary-soft); }
  .gestio-m-item svg{ width: 19px; height: 19px; flex: none; color: var(--gestio-grey); }
  /* ⚠ L'ENVELOPPE D'ICÔNE N'EST PAS UN LIBELLÉ. `.gestio-m-item span{flex:1}`
     juste dessous vise le libellé — mais il attrape AUSSI le `<span
     data-m-ic>` qui porte l'icône et le `<span>` du chevron. Trois enfants à
     `flex:1`, c'est trois tiers égaux : l'icône à gauche de son tiers, le
     libellé CENTRÉ dans le sien, le chevron dans le dernier. C'est ce que
     montraient les captures. La maquette n'a pas ce défaut : son icône est un
     `<svg>` nu, sans enveloppe. La nôtre en a une — le script y injecte le
     glyphe — il faut donc l'exclure du partage. */
  .gestio-m-item > [data-m-ic],
  .gestio-m-topbar > [data-m-ic]{ flex: none; display: inline-flex; align-items: center; }
  .gestio-m-item span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gestio-m-item--danger,
  .gestio-m-item--danger svg{ color: var(--gestio-red); }
  .gestio-m-item--danger:active{ background: var(--gestio-red-soft); }
  .gestio-m-item--add svg{ color: var(--gestio-primary); }
  .gestio-m-version{
    padding: 10px 16px 4px; font-size: 12px; color: var(--gestio-grey-light);
    border-top: 1px solid var(--gestio-border);
  }

  .gestio-m-co{
    width: 100%; min-height: var(--gestio-m-touch); border: 0; background: transparent;
    cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 8px 16px;
    text-align: start; font-family: inherit; color: var(--gestio-black);
  }
  .gestio-m-co:active{ background: var(--gestio-primary-soft); }
  .gestio-m-co.is-active{ background: var(--gestio-bg); }
  .gestio-m-co__badge{
    width: 32px; height: 32px; flex: none; border-radius: 8px; color: #fff;
    font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  }
  .gestio-m-co__txt{ flex: 1; min-width: 0; }
  .gestio-m-co__name{
    font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* ⚠ LE MATRICULE FISCAL EST INDISPENSABLE : deux raisons sociales proches ne se
     distinguent que par lui, et se tromper de société fausse une déclaration. */
  .gestio-m-co__mf{ font-size: 12px; color: var(--gestio-grey); }
  .gestio-m-co__check{ width: 18px; height: 18px; flex: none; color: var(--gestio-primary); }

  /* ── 7. accessibilité ────────────────────────────────────────────────────── */
  /* ⚠ L'ANNEAU NE DOIT PAS PERSISTER APRÈS UN CLIC : `--gestio-primary` est un indigo
     soutenu, et l'élément touché gardait un cadre jusqu'au geste suivant. */
  .gestio-m-tab:focus-visible,
  .gestio-m-mod:focus-visible,
  .gestio-m-row:focus-visible,
  .gestio-m-item:focus-visible,
  .gestio-m-co:focus-visible,
  .gestio-m-topbar__title:focus-visible,
  .gestio-m-topbar__ico:focus-visible,
  .gestio-m-topbar__co:focus-visible,
  .gestio-m-topbar__avatar:focus-visible,
  .gestio-m-sheet__back:focus-visible{
    outline: 2px solid var(--gestio-primary); outline-offset: -2px;
  }
  .gestio-m-tab:focus:not(:focus-visible),
  .gestio-m-mod:focus:not(:focus-visible),
  .gestio-m-row:focus:not(:focus-visible),
  .gestio-m-item:focus:not(:focus-visible),
  .gestio-m-co:focus:not(:focus-visible),
  .gestio-m-topbar__title:focus:not(:focus-visible),
  .gestio-m-topbar__ico:focus:not(:focus-visible),
  .gestio-m-topbar__co:focus:not(:focus-visible),
  .gestio-m-topbar__avatar:focus:not(:focus-visible),
  .gestio-m-sheet__back:focus:not(:focus-visible){ outline: none; }
}

/* ⚠ Au-dessus de 768 px, RIEN de tout ceci ne doit exister : le rail reprend la main. */
@media (min-width: 768px) {
  .gestio-m-topbar,
  .gestio-m-tabbar,
  .gestio-m-sheet,
  .gestio-m-scrim{ display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gestio-m-sheet,
  .gestio-m-scrim,
  .gestio-m-tab svg,
  .gestio-m-topbar__title svg{ transition: none; }
}

/* ---------------------------------------------------------------------------
   17 bis — LE CONTENU EN CARTES
   ---------------------------------------------------------------------------
   Un tableau ne se lit pas sur un téléphone. Il déborde, on le fait glisser
   latéralement, et l'on perd la colonne qui portait le nom en regardant celle
   qui porte le montant. La maquette y répond par une CARTE par document :
   numéro et état sur la première ligne, tiers sur la deuxième, date et
   montants sur la troisième. Tout est visible d'un coup, rien ne glisse.

   ⚠ CES CLASSES SONT CELLES DE LA MAQUETTE, PRÉFIXÉES. `.doc` y devient
   `.gestio-m-doc` : `.doc` seul entrerait en conflit avec n'importe quoi.

   ⚠ LE MONTANT TTC EST LE GROS CHIFFRE, LE HT LE PETIT. C'est ce que la
   maquette montre, et c'est juste ici : en Tunisie on encaisse le TTC. Le
   `<i>` qui suit porte la devise, en gris — trois décimales obligent, le
   nombre est déjà long.

   `font-variant-numeric:tabular-nums` sur les montants : sans lui les
   chiffres n'ont pas la même chasse d'une ligne à l'autre et la colonne des
   montants ondule.
   ------------------------------------------------------------------------- */

.gestio-m-doc{
  display: block; text-decoration: none; color: inherit;
  background: var(--gestio-surface);
  border: 1px solid var(--gestio-border);
  border-radius: var(--gestio-r-xl);
  padding: 12px 14px; margin-bottom: 8px;
}
.gestio-m-doc:focus-visible{ outline: 2px solid var(--gestio-primary); outline-offset: 2px }
.gestio-m-doc__top{ display: flex; align-items: center; justify-content: space-between; gap: 10px }
.gestio-m-doc__num{ font-size: 13px; font-weight: 600; letter-spacing: .01em }
.gestio-m-doc__mid{ display: flex; align-items: center; gap: 9px; margin: 8px 0 9px }
.gestio-m-doc__name{
  font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gestio-m-doc__bot{ display: flex; align-items: flex-end; justify-content: space-between; gap: 10px }
.gestio-m-doc__date{
  font-size: 12px; color: var(--gestio-grey);
  display: flex; align-items: center; gap: 5px;
}
.gestio-m-doc__date svg{ width: 13px; height: 13px }
.gestio-m-doc__amt{
  text-align: end; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: flex-end;
}
.gestio-m-doc__ttc{ font-size: 16px; font-weight: 700; letter-spacing: -.01em }
.gestio-m-doc__ttc i{ font-style: normal; font-size: 11px; font-weight: 600; color: var(--gestio-grey) }
.gestio-m-doc__ht{ font-size: 11px; color: var(--gestio-grey-light) }

/* Pastille à initiales du tiers — 28 px, la maquette. */
.gestio-m-ini{
  width: 28px; height: 28px; flex: none; border-radius: 7px; color: #fff;
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* État du document. Le vert est réservé au PAYÉ : c'est la seule information
   qui ferme un dossier, toutes les autres sont des étapes. */
.gestio-m-badge{
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--gestio-badge-1-bg); color: var(--gestio-badge-1-fg);
}
/* ⚠ JETON MANQUANT, SIGNALÉ ET NON INVENTÉ. La maquette écrit ici `#0d7a3c`,
   un vert foncé lisible sur `--gestio-green-soft`. Le kit n'a que
   `--gestio-green` (#1bb157), trop clair pour du texte de 11 px sur ce fond :
   le contraste tombe sous 3:1, l'état « Payée » devient une tache verte qu'on
   devine. J'emploie `--gestio-green` malgré tout plutôt que de créer un jeton
   de mon propre chef. ⚠ Il manque un `--gestio-green-ink` au kit — dis-moi si
   je l'ajoute, c'est une ligne. */
.gestio-m-badge--paid{ background: var(--gestio-green-soft); color: var(--gestio-green) }

.gestio-m-list{ padding: 14px }
.gestio-m-note{ padding: 14px 4px 0; font-size: 12px; color: var(--gestio-grey-light); text-align: center }
.gestio-m-empty{ margin-top: 60px; text-align: center; color: var(--gestio-grey-light); font-size: 13px }
.gestio-m-empty strong{ display: block; color: var(--gestio-grey); font-size: 15px; margin-bottom: 6px }

/* ---------------------------------------------------------------------------
   17 ter — LES LISTINGS DU SOCLE, EN CARTES SOUS 768 px
   ---------------------------------------------------------------------------
   `kitList()` rend un vrai <table>. Sur un téléphone il déborde : on obtient
   une barre de défilement horizontale À L'INTÉRIEUR de la liste, on pousse le
   tableau de côté, et l'on perd le nom de l'article en regardant son prix.
   C'est exactement ce que la maquette refuse.

   ⚠ UNE SEULE RÈGLE POUR ~45 ÉCRANS. Le socle émet les mêmes cellules
   partout ; il a suffi de les TYPER (`gestio-td--principal`, `--num`,
   `--date`, `--badge`, `--select`, `--texte`) pour pouvoir les replacer.
   Écran par écran, ce serait quarante-cinq occasions d'en oublier un.

   ⚠ FLEX ET NON GRILLE, à dessein. Les colonnes changent d'un listing à
   l'autre — deux ici, six là. Une grille à zones nommées suppose une liste de
   colonnes connue ; un flux flexible se contente de l'ordre, et une colonne
   absente ne laisse pas de trou.

   L'ordre recompose la carte de la maquette :
     ligne 1  état · actions
     ligne 2  le principal (pastille, libellé, seconde ligne)
     ligne 3  date et textes à gauche, montants à droite
   ------------------------------------------------------------------------- */
@media (max-width: 767px){

  /* ⚠ Le conteneur rend la main : c'est lui qui portait le défilement
     latéral. Le laisser, c'est garder la barre grise sous les cartes. */
  .gestio-table-wrap{ overflow: visible; border: 0; background: none }

  /* ⚠ `min-width:560px` EST POSÉ PLUS HAUT sur `.gestio-table` — pour qu'un
     tableau reste lisible DANS un conteneur défilant. En cartes il n'y a plus
     de conteneur défilant : cette largeur plancher est exactement ce qui
     faisait déborder la page de 574 px sur un écran de 390. Mesuré.
     Idem pour la colonne d'actions, taillée à 170 px pour le bureau. */
  .gestio-table{ display: block; width: 100%; min-width: 0; border-collapse: separate }
  .gestio-table__actions{ width: auto; min-width: 0 }
  .gestio-table thead{ display: none }
  .gestio-table tbody{ display: block }

  .gestio-table tbody tr{
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    background: var(--gestio-surface);
    border: 1px solid var(--gestio-border);
    border-radius: var(--gestio-r-xl);
    padding: 12px 14px; margin-bottom: 8px;
  }
  .gestio-table tbody td{
    display: block; border: 0; padding: 0; width: auto;
    /* ⚠ Sans `min-width:0`, une cellule refuse de descendre sous la largeur
       de son contenu : un libellé d'article de soixante caractères élargit la
       carte et ramène le débordement qu'on vient de supprimer. */
    min-width: 0;
  }

  /* La maquette met l'état à DROITE de la première ligne, pas collé au bord
     gauche : c'est la marge automatique portée par l'état — et non par les
     actions — qui pousse le couple état+actions vers la droite. */
  .gestio-td--select{ order: 0 }
  .gestio-td--badge{ order: 0; margin-inline-start: auto }
  .gestio-table__actions{ order: 0; text-align: end }
  .gestio-td--principal{ order: 1; flex: 1 1 100% }
  .gestio-td--date, .gestio-td--texte{ order: 2; font-size: 12px }
  .gestio-td--num{
    order: 3; margin-inline-start: auto; text-align: end;
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  }

  /* Une cellule vide ne doit pas occuper de place ni creuser un `gap`. */
  .gestio-table tbody td:empty{ display: none }

  /* ⚠ `min-width:0` DOIT DESCENDRE JUSQU'AU TEXTE. `.gestio-cell-title` est
     un conteneur flex : ses enfants valent `min-width:auto` comme les
     cellules, et « 10628MBP-DA CONTRE ANGLE D'ENDODONTIE DEBRAYABLE »
     rouvrait la carte. Le libellé d'un article n'est pas une phrase — il n'a
     pas toujours d'espace où se couper, d'où `overflow-wrap:anywhere`. */
  .gestio-cell-title{ min-width: 0 }
  .gestio-cell-title > *{ min-width: 0 }
  .gestio-td--principal, .gestio-td--principal *{ white-space: normal; overflow-wrap: anywhere }

  /* La pagination passait à la ligne en morceaux — « 1 – 25 sur 3224 » coupé
     mot à mot entre deux boutons. Elle s'empile : les commandes d'abord, le
     compte en dessous. */
  .gestio-pagination{ flex-wrap: wrap; justify-content: center; gap: 8px; row-gap: 10px }
  .gestio-pagination .gestio-small{ flex: 1 1 100%; text-align: center; order: 1 }
}

/* ---------------------------------------------------------------------------
   18 — LES FICHES DE SAISIE SUR TÉLÉPHONE
   ---------------------------------------------------------------------------
   Les fiches S-GESTIO sont rendues en iframe isolée et chargent `gestio-ui.css`
   en entier : le §16 replie donc déjà leurs `.gestio-grid`, et `.gestio-row`
   est en `flex-wrap:wrap` depuis toujours. L'essentiel était en place.

   Restaient deux choses que le §16 ne pouvait pas atteindre, parce qu'elles ne
   sont pas écrites en classes mais À MÊME LE BALISAGE.

   ⚠ 1. LES GRILLES ÉCRITES EN LIGNE. Relevé sur l'ensemble des vues :
   `repeat(3,1fr)` 24 fois, `repeat(4,1fr)` 8 fois, `repeat(6,1fr)` 2 fois,
   sans compter les grilles en pixels comme `56px 122px 1fr 84px`. Trois
   colonnes sur 390 px font 120 px chacune ; six en font 60. On n'y saisit
   rien, et la grille pousse la page hors de l'écran.

   ⚠ MAIS ON ÉPARGNE `auto-fill` ET `auto-fit`, qui s'adaptent déjà tout
   seuls : `minmax(150px,1fr)` donne deux colonnes de 170 px sur un téléphone,
   ce qui convient à des tuiles. Les replier en une seule les rendrait
   énormes. L'exclusion dit exactement cela.

   ⚠ Un style en ligne ne se bat que par `!important` — c'est le seul cas où il
   est légitime : il n'existe pas d'autre levier.

   ⚠ 2. LES LARGEURS FIGÉES DANS LES IFRAMES. Le garde-fou du thème est scopé
   à `.content-w`, qui n'existe pas dans une iframe : 112 largeurs en dur y
   échappaient. On POSE UN PLAFOND, on n'impose pas de largeur — un
   `width:110px` voulu reste à 110, seul ce qui dépasse est ramené.
   ------------------------------------------------------------------------- */
@media (max-width: 767px){

  [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]){
    grid-template-columns: 1fr !important;
  }

  /* Un `minmax()` dont le minimum dépasse l'écran ne se replie pas non plus :
     `auto-fit` ne descend jamais sous le minimum qu'on lui donne. */
  [style*="minmax(380px"],
  [style*="minmax(420px"],
  [style*="minmax(480px"]{
    grid-template-columns: 1fr !important;
  }

  [style*="width"]{ max-width: 100% !important; }

  /* ⚠ `min-width` EN LIGNE RÉSISTE AU PLAFOND : un élément de grille ou de
     flex vaut `min-width:auto` et refuse de descendre sous son contenu ; s'il
     porte en plus un `min-width:180px`, il pousse son voisin hors de l'écran.
     Le plafond ci-dessus ne peut rien contre lui — c'est un plancher. */
  [style*="min-width"]{ min-width: 0 !important; }
}