/* ============================================================================
   PHONEPILOT — ce qui est propre à l'application, PAR-DESSUS le système ALESIA.

   Les tokens, les composants (.card, .btn, .badge, .seg, .sw, .tbl-wrap…) et le
   châssis (.app, .side, .top) viennent de `design/`. Ici : la console de
   pilotage (`dir-*`, reprise de la maquette validée), et les quelques classes
   des autres pages (`pp-*`). Aucune valeur brute : tout passe par un token.
   ========================================================================== */

/* 🔴 `hidden` DOIT GAGNER SUR TOUT `display:`. La règle du navigateur pour
   l'attribut `hidden` a la même spécificité qu'une classe : une classe qui pose
   `display:flex`, venant après, l'emporte — et l'élément reste visible. C'est
   ainsi que le formulaire du container ET sa vue s'affichaient ensemble, et que
   la procédure apparaissait alors qu'aucune tâche n'était lancée. */
[hidden] { display: none !important; }

/* --- Châssis ---------------------------------------------------------------- */
/* Le padding est celui que `--dir-h` déduit plus bas : les deux se suivent. */
.pp-wrap { padding: var(--sp-4) var(--pad-page-x) var(--sp-6); }
.pp-user .lbl { display: flex; flex-direction: column; line-height: 1.2; }
.pp-user .lbl b { font-size: var(--fs-sm); color: var(--tx); }
.pp-user .lbl em { font-style: normal; font-size: var(--fs-caption); color: var(--tx3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.pp-ava { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.side .nav-item { text-decoration: none; color: inherit; }
/* Le bouton « Se déconnecter » est dans un formulaire (POST) : même dessin
   que les liens, aucune bordure ni fond de bouton natif. */
.pp-nav-form { margin: 0; }
.pp-nav-form .nav-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }

/* Le logo de la barre et de la connexion : le Pilote en pixels, à la place du
   point lumineux d'ALESIA (`.logo`, dans le système de design, non retouché).
   `pixelated` garde les pixels carrés à 26 px, qui n'est pas un multiple de 16.
   ⚠️ `.brand span{display:block}` (alesia.css) attrape AUSSI le `.slot`, qui
   est un span : il perdait sa grille, et le logo se collait à son bord gauche
   (8 px), 11 px à gauche de l'axe des icônes de la barre repliée (32 px) —
   mesuré le 1er octobre 2026. Le point d'ALESIA avait le même défaut. */
.brand > .slot { display: grid; }
.pp-logo { width: 26px; height: 26px; flex: 0 0 auto; image-rendering: pixelated; }

/* --- Connexion ---------------------------------------------------------------- */
.pp-centre { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); background: var(--bg); }
.pp-login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
.pp-login-brand { height: auto; margin-bottom: var(--sp-2); }
.pp-login-brand .lbl { opacity: 1; }
.pp-login-btn { margin-top: var(--sp-2); }
.pp-erreur { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm);
  color: var(--err-tx); background: var(--err-bg); border: var(--bw) solid var(--err-line); }

/* --- Mur ---------------------------------------------------------------------- */
/* Le mur : chaque vignette porte la silhouette de l'iPhone de la console, en
   petit. Les proportions du cadre sont celles de `.tel` (bord 6/390, rayon
   47/390 de la largeur), exprimées en `cqi` : la vignette change de largeur
   avec la grille, le cadre suit sans recalcul. Colonnes 180 px (190 − 5 %). */
.pp-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-6) var(--gap); }
.pp-tuile { container-type: inline-size; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pp-tuile-tel { --tt-bord: 3.2cqi; --tt-r: 12cqi; position: relative;
  padding: var(--tt-bord); border-radius: var(--tt-r);
  background: var(--panel2); border: var(--bw) solid var(--silhouette);
  box-shadow: var(--inset-hi), 0 0 0 calc(var(--tt-bord) * .6) var(--bg), 0 24px 48px -28px rgba(0,0,0,.9);
  transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease); }
.pp-tuile-tel::before, .pp-tuile-tel::after { content: ""; position: absolute; width: 1.6%;
  background: var(--silhouette); border-radius: var(--r-dot); }
.pp-tuile-tel::before { left: -1.6%; top: 21%; height: 13%; }
.pp-tuile-tel::after  { right: -1.6%; top: 26%; height: 9%; }
.pp-tuile.vivante .pp-tuile-tel { border-color: var(--accent-dim); }
.pp-tuile-encoche { position: absolute; top: var(--tt-bord); left: 50%; transform: translateX(-50%);
  width: 32%; height: 3.2%; background: var(--panel2); pointer-events: none;
  border-radius: 0 0 calc(var(--tt-r) * .45) calc(var(--tt-r) * .45); }
.pp-tuile-ecran { position: relative; aspect-ratio: 390 / 844; overflow: hidden; cursor: pointer;
  border-radius: calc(var(--tt-r) - var(--tt-bord)); background: var(--bg); }
.pp-tuile-ecran canvas, .pp-tuile-ecran img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-tuile-voile { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-note); color: var(--tx3); background: var(--bg); }
.pp-tuile-voile[hidden] { display: none; }
/* 🧍 « Confirm you're a human » lu sur ce téléphone (mur.js). */
.pp-tuile-alerte { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--err); color: #fff;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.pp-tuile-pied { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-1); font-size: var(--fs-sm); }
.pp-tuile-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-code); }
.pp-tuile-pied .push { margin-left: auto; }

/* ── Intégration ─────────────────────────────────────────────────────────────
   Une carte par iPhone branché, une ligne par étape. Les colonnes restent
   alignées d'une ligne à l'autre : on lit l'état d'un regard, de haut en bas. */
.pp-int { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
/* Le choix de l'iPhone affiché : une rangée de boutons, l'état en pastille. */
.pp-int-choix { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--r);
  background: var(--sunken); border: var(--bw) solid var(--hair); align-self: flex-start; }
.pp-int-choix button { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-ctrl);
  padding: 0 var(--sp-4); border: var(--bw) solid transparent; border-radius: var(--r-sm); background: transparent;
  font: 500 var(--fs-sm) var(--sans); color: var(--tx2); cursor: pointer; white-space: nowrap;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease); }
.pp-int-choix button:hover { color: var(--tx); background: var(--hover-nav); }
.pp-int-choix button[aria-pressed="true"] { background: var(--elev); color: var(--tx); border-color: var(--line); box-shadow: var(--shadow-1); }
.pp-int-choix-dot { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--warn); }
.pp-int-choix-dot.ok { background: var(--ok); }
.pp-int-choix-dot.encours { background: var(--accent); animation: pp-int-pouls 1.1s var(--ease) infinite; }
.pp-int-choix-det { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-int-carte { container-type: inline-size; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  background: var(--panel); border: var(--bw) solid var(--hair); border-radius: var(--r);
  transition: border-color var(--t-quick) var(--ease); }
.pp-int-carte.integre { border-color: var(--ok-line); }
.pp-int-carte.travail { border-color: var(--accent-dim); }
.pp-int-tete { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pp-int-tete .push { margin-left: auto; }
.pp-int-nom { flex: 0 1 260px; width: auto; min-width: 0; font-weight: 600; }
.pp-int-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--tx2); }
.pp-int-udid { font-family: var(--mono); font-size: var(--fs-code); color: var(--tx); }
.pp-int-etapes { display: flex; flex-direction: column; border-top: var(--bw) solid var(--hair); }
.pp-int-etape { display: grid; grid-template-columns: var(--sp-3) minmax(170px, 220px) minmax(0, 1fr) 76px auto;
  align-items: center; gap: var(--sp-3); min-height: 40px; padding: var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-sm); }
.pp-int-dot { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--tx3); }
.pp-int-etape.ok .pp-int-dot { background: var(--ok); }
.pp-int-etape.a_faire .pp-int-dot, .pp-int-etape.attente .pp-int-dot { background: var(--warn); }
.pp-int-etape.bloque .pp-int-dot { background: var(--err); }
.pp-int-etape.attente .pp-int-dot { animation: pp-int-pouls 1.4s var(--ease) infinite; }
@keyframes pp-int-pouls { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pp-int-etape.attente .pp-int-dot { animation: none; } }
/* Le « i » reste COLLÉ au libellé : en ligne simple, un libellé long le
   renvoyait seul à la ligne suivante, sous le texte. */
.pp-int-lib { display: flex; align-items: center; min-width: 0; color: var(--tx); }
.pp-int-lib .pp-i { margin-left: var(--sp-2); }
.pp-int-etape.ok .pp-int-lib { color: var(--tx2); }
.pp-int-det { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-int-val { font-family: var(--mono); font-size: var(--fs-code); color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-int-consigne { color: var(--tx2); line-height: 1.4; }
.pp-int-mot { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); text-align: right; }
.pp-int-etape.ok .pp-int-mot { color: var(--ok-tx); }
.pp-int-etape.a_faire .pp-int-mot, .pp-int-etape.attente .pp-int-mot { color: var(--warn-tx); }
.pp-int-etape.bloque .pp-int-mot { color: var(--err-tx); }
.pp-int-act { display: flex; justify-content: flex-end; min-width: 92px; }
.pp-int-journal { border: var(--bw) solid var(--hair); border-radius: var(--r-sm); background: var(--bg); }
.pp-int-journal summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--tx2); }
.pp-int-lignes { max-height: 200px; overflow: auto; padding: 0 var(--sp-3) var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-code); line-height: 1.6; color: var(--tx2); }
.pp-int-heure { color: var(--tx3); margin-right: var(--sp-3); }
.pp-int-avis { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm);
  color: var(--tx); background: var(--panel2); border: var(--bw) solid var(--line); }
.pp-int-avis.erreur { color: var(--err-tx); background: var(--err-bg); border-color: var(--err-line); }
/* Deux colonnes dès que la carte a la place : remplies de haut en bas
   (`grid-auto-flow: column`), dans l'ordre où les étapes se débloquent. */
@container (min-width: 980px) {
  .pp-int-etapes { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(var(--lignes, 6), auto); column-gap: var(--sp-7); }
}
/* Le résumé et « Relire » vivent dans le bandeau du haut. */
.pp-int-resume { font-size: var(--fs-sm); color: var(--tx2); white-space: nowrap; }
/* Le « i » d'explication, à droite d'un terme. L'infobulle du système tient
   sur une ligne ; une explication en demande plusieurs. */
.pp-i { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: var(--sp-2);
  border-radius: 50%; border: var(--bw) solid var(--line); color: var(--tx3);
  font: 600 10px/1 var(--sans); font-style: normal; cursor: help; vertical-align: 1px; flex: 0 0 auto;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease); }
.pp-i:hover, .pp-i:focus-visible { color: var(--tx); border-color: var(--tx3); outline: none; }
.pp-i[data-tip]::after { white-space: normal; width: max-content; max-width: 300px; text-align: left;
  line-height: 1.45; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* L'alerte de signature : une ligne, pas une carte. */
.pp-int-alerte { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r); font-size: var(--fs-sm);
  color: var(--tx2); background: var(--warn-bg); border: var(--bw) solid var(--warn-line); }
.pp-int-alerte b { color: var(--warn-tx); font-weight: 600; }
.pp-int-alerte-dot { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--warn); }
.pp-int-alerte.grave { background: var(--err-bg); border-color: var(--err-line); }
.pp-int-alerte.grave b { color: var(--err-tx); }
.pp-int-alerte.grave .pp-int-alerte-dot { background: var(--err); }
.pp-int-guide { margin: 0; padding-left: var(--sp-5); text-align: left; max-width: 60ch;
  font-size: var(--fs-sm); color: var(--tx2); line-height: 1.7; }
.pp-int-guide b { color: var(--tx); font-weight: 600; }
@media (max-width: 720px) {
  .pp-int-etape { grid-template-columns: var(--sp-3) 1fr auto; }
  .pp-int-det { grid-column: 2 / -1; }
  .pp-int-mot { display: none; }
}

/* --- Équipe ------------------------------------------------------------------- */
.pp-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pp-cases { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pp-cases label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); height: var(--h-ctrl-sm);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); cursor: pointer; }
.pp-cases label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.pp-cases input { accent-color: var(--accent); }
.pp-presence { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.pp-ligne { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--hair); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.pp-ligne .push { margin-left: auto; }
.pp-actions { display: flex; gap: var(--sp-1); justify-content: flex-end; white-space: nowrap; }
.pp-eteint { opacity: .55; }

/* ── Équipe ──────────────────────────────────────────────────────────────── */
/* `.card` du système n'a pas de marge intérieure : c'est le contenu qui la
   pose. Ici, une carte de page en a toujours une. */
.pp-carte { padding: var(--sp-4) var(--sp-5); }
/* 🔴 LE FLOU NE VAUT QUE VOILE OUVERT. Le voile du système reste dans la page,
   opacité zéro, quand rien n'est ouvert — et Chrome applique quand même son
   `backdrop-filter` : toute la page paraissait floue en permanence. On éteint
   le filtre tant que le voile est fermé ; ouvert, il floute comme prévu. */
.backdrop:not(.on) { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* La fiche d'un membre porte quatre onglets et un tableau : plus large que les
   760 px d'une modale de formulaire. */
#eq-fiche { --modal-w: min(1100px, 94vw); }

/* Le journal de l'équipe se déplie ; replié, il ne coûte qu'une ligne.
   🔴 IL S'APPELLE `pp-log`, ET SÛREMENT PAS `pp-journal`. Ce nom-là est DÉJÀ
   pris, plus bas, par la petite liste du journal de la console : `margin: 0` et
   `max-height: 160px`. Définie après celle-ci et de même spécificité, elle
   gagnait — d'où un encart collé à la carte des membres, plafonné à 160 px et
   rendu en chasse fixe, alors que mes règles étaient bel et bien servies. Deux
   écrans, deux objets : deux noms. (13 septembre 2026.) */
.pp-log { margin-top: var(--sp-6); overflow: hidden;
  border: var(--bw) solid var(--hair); border-radius: var(--r); background: var(--panel);
  box-shadow: var(--inset-hi), var(--shadow-1); }
.pp-log > summary { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; user-select: none; list-style: none; }
/* Le marqueur natif se retire des DEUX façons : les moteurs ne l'écoutent pas
   au même endroit, et celui qui reste déborde de la ligne. */
.pp-log > summary::marker { content: ""; }
.pp-log > summary::-webkit-details-marker { display: none; }
.pp-log > summary:hover { background: var(--hover-row); }
.pp-log-titre { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--tx); }
.pp-log-caret { margin-left: auto; color: var(--tx3); font-size: var(--fs-sm);
  transition: transform var(--t-quick) var(--ease); }
.pp-log[open] > summary { border-bottom: var(--bw) solid var(--hair); }
.pp-log[open] > summary .pp-log-caret { transform: rotate(180deg); }
.pp-log-corps { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
/* Ouvert, il s'OUVRE VRAIMENT : le tableau prend une hauteur franche et défile
   chez lui. Sans hauteur, quelques traces laissaient une bande étriquée, qui
   n'avait pas l'air de s'être dépliée. */
.pp-log[open] .tbl-wrap { --tbl-h: 340px; min-height: 180px; }
.pp-log-plus { align-self: center; }
.pp-eq-avis { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm);
  color: var(--tx); background: var(--panel2); border: var(--bw) solid var(--line); margin: 0; }
.pp-eq-avis.erreur { color: var(--err-tx); background: var(--err-bg); border-color: var(--err-line); }
.pp-eq-ligne { cursor: pointer; }
.pp-eq-qui { display: flex; align-items: center; gap: var(--sp-3); }
.pp-eq-qui b { display: block; font-weight: 600; }
.pp-eq-note { display: block; font-size: var(--fs-note); margin-top: 1px; }
.pp-eq-enligne { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ok-tx); font-size: var(--fs-sm); }
.pp-eq-aucun { color: var(--warn-tx); }
.pp-eq-refus td { color: var(--err-tx); }
.pp-eq-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-eq-filtres .select { width: auto; min-width: 180px; }
.pp-ava-lg { width: 36px; height: 36px; font-size: var(--fs-base); }
.pp-eq-tete h3 { margin: 0; }
.pp-eq-tete p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--tx3); }
.pp-eq-tabs { margin: 0 var(--sp-5); }
.pp-eq-corps { display: flex; flex-direction: column; gap: var(--sp-4); }
.pp-eq-corps section { display: flex; flex-direction: column; gap: var(--sp-4); }
.pp-eq-sec { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: var(--bw) solid var(--hair); }
.pp-eq-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-eq-mdp { display: flex; gap: var(--sp-2); }
.pp-eq-mdp .input { flex: 1; }
.pp-eq-case { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--tx2); cursor: pointer; }
.pp-eq-case input { accent-color: var(--accent); }
.pp-eq-tels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); }
.pp-eq-tel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--hair); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.pp-eq-tel.on { border-color: var(--accent); }
.pp-eq-tel:not(.on) [data-droit] { opacity: .35; pointer-events: none; }
.pp-eq-tel-nom { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-width: 0; }
.pp-eq-tel-nom input { accent-color: var(--accent); }
.seg.sm { height: var(--h-ctrl-sm); }
.seg.sm button { padding: 0 var(--sp-3); font-size: var(--fs-note); }
.pp-eq-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--sp-1);
  border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn-tx); font-size: var(--fs-micro); font-weight: 600; }
.pp-eq-tache-form { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2); }
.pp-eq-tache-form .select { width: auto; min-width: 150px; }
.pp-eq-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.pp-eq-kpi { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3); border: var(--bw) solid var(--hair);
  border-radius: var(--r-sm); background: var(--panel2); }
.pp-eq-kpi .k-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-eq-kpi .k-val { font-family: var(--mono); font-size: var(--fs-base); color: var(--tx); }
.btn.danger-txt { color: var(--err-tx); }

/* Les tâches — dans la fiche d'un membre, et dans la console de celui qui les fait. */
.pp-taches { display: flex; flex-direction: column; gap: var(--sp-2); }
.pp-tache { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--hair); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.pp-tache label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-width: 0; }
.pp-tache input { accent-color: var(--ok); }
.pp-tache.faite { opacity: .55; }
.pp-tache.faite label span { text-decoration: line-through; }
.pp-taches-console .pp-tache { grid-template-columns: 1fr; cursor: pointer; }
.pp-taches-console .pp-tache em { font-style: normal; }
/* ── Automatisations ─────────────────────────────────────────────────────── */
/* Préfixe `pp-au-`, à lui seul : voir la leçon `pp-log` / `pp-journal`. */
#au-fiche { --modal-w: min(1240px, 96vw); }
.pp-au-procs { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.pp-au-proc { border: var(--bw) solid var(--hair); border-radius: var(--r-sm); background: var(--panel2); overflow: hidden; }
.pp-au-proc > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  cursor: pointer; user-select: none; list-style: none; }
.pp-au-proc > summary::marker { content: ""; }
.pp-au-proc > summary::-webkit-details-marker { display: none; }
.pp-au-proc > summary:hover { background: var(--hover-row); }
.pp-au-proc[open] > summary { border-bottom: var(--bw) solid var(--hair); }
.pp-au-proc[open] > summary .pp-log-caret { transform: rotate(180deg); }
.pp-au-proc-t { font-weight: var(--fw-semibold); color: var(--tx); }
.pp-au-proc .tbl-wrap { --tbl-h: 420px; }
.pp-au-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 520px; }
.pp-au-tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-note); background: var(--panel); border: var(--bw) solid var(--hair); color: var(--tx2);
  max-width: 260px; }
.pp-au-tag b { font-family: var(--mono); font-weight: 600; color: var(--tx); }
.pp-au-tag.t { border-color: var(--accent); }
.pp-au-corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); }
.pp-au-film { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pp-au-ecrans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.pp-au-ecran { margin: 0; }
.pp-au-ecran figcaption { text-align: center; font-size: var(--fs-note); color: var(--tx3); margin-top: var(--sp-1); }
.pp-au-cadre { position: relative; aspect-ratio: 9 / 19.5; max-height: 560px; margin: 0 auto;
  background: var(--panel2); border: var(--bw) solid var(--hair); border-radius: 14px; overflow: hidden; }
.pp-au-cadre img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-au-cadre.vide::after { content: "pas de capture"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-note); color: var(--tx3); }
.pp-au-rect { position: absolute; border: 2px solid var(--accent); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  pointer-events: none; }
.pp-au-point { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.35); border: 2px solid var(--warn-tx); box-shadow: 0 0 0 2px rgba(0,0,0,.4); pointer-events: none; }
.pp-au-trait { position: absolute; height: 3px; border-radius: 2px; background: var(--warn-tx);
  transform-origin: 0 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.pp-au-detail { display: flex; flex-direction: column; gap: 4px; }
.pp-au-kv { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-3); font-size: var(--fs-sm); }
.pp-au-kv span { color: var(--tx3); }
.pp-au-kv b { font-weight: 500; color: var(--tx); overflow-wrap: anywhere; }
.pp-au-nav { gap: var(--sp-3); }
.pp-au-liste-boite { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; }
.pp-au-liste { margin: 0; padding: 0; list-style: none; overflow: auto; max-height: 680px;
  border: var(--bw) solid var(--hair); border-radius: var(--r-sm); }
.pp-au-g { display: grid; grid-template-columns: 30px 1fr auto; gap: var(--sp-2); align-items: start;
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); cursor: pointer; border-bottom: var(--bw) solid var(--hair); }
.pp-au-g:last-child { border-bottom: 0; }
.pp-au-g:hover { background: var(--hover-row); }
.pp-au-g.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent); }
.pp-au-g i { font-style: normal; font-family: var(--mono); color: var(--tx3); }
.pp-au-g span { min-width: 0; overflow-wrap: anywhere; }
.pp-au-g small { display: block; color: var(--tx3); font-size: var(--fs-note); }
.pp-au-g time { font-family: var(--mono); font-size: var(--fs-note); color: var(--tx3); }
@media (max-width: 900px) { .pp-au-corps { grid-template-columns: 1fr; } }

/* La carte des écrans (refaite le 1er octobre 2026) : une LIGNE pleine largeur
   par écran — image, nom, gestes sortants —, rangées par écran canonique dans
   l'ordre de la procédure. Survol : la ligne s'éclaire, un liseré d'accent
   pousse à gauche. */
.pp-au-ecrans-carte { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.pp-au-ecr-g { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tx) 3%, transparent); }
.pp-au-ecr-g > header { display: flex; align-items: baseline; gap: var(--sp-3); padding: 2px var(--sp-2) 4px; }
.pp-au-ecr-g > header b { font-size: var(--fs-sm); }
.pp-au-ecr-g > header span { font-size: var(--fs-note); color: var(--tx3); }
.pp-au-ecr { position: relative; display: grid; grid-template-columns: 40px minmax(220px, 1fr) minmax(280px, 1.7fr);
  gap: var(--sp-4); align-items: center; padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--hair);
  border-radius: var(--r-sm); background: var(--panel2); overflow: hidden; }
.pp-au-ecr::before, .pp-cv-r::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: center; transition: transform var(--t-fast) var(--ease); }
.pp-au-ecr:hover::before, .pp-cv-r:hover::before { transform: scaleY(1); }
.pp-au-ecr-img { display: block; width: 40px; aspect-ratio: 9 / 19.5; border-radius: 7px; overflow: hidden; background: var(--panel);
  border: var(--bw) solid var(--hair); transition: transform var(--t-fast) var(--ease); }
.pp-au-ecr:hover .pp-au-ecr-img { transform: scale(1.06); }
.pp-au-ecr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-au-ecr-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-au-ecr-titre { font-weight: var(--fw-semibold); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-au-ecr-meta { font-size: var(--fs-note); color: var(--tx3); }
.pp-au-pastille { font-size: var(--fs-micro); font-weight: 500; padding: 1px 7px; border-radius: var(--r-pill); vertical-align: middle;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pp-au-ecr-mots { display: flex; flex-wrap: nowrap; gap: 3px; overflow: hidden; }
.pp-au-ecr-mots span { flex: none; font-size: var(--fs-micro); padding: 0 6px; border-radius: var(--r-pill); background: var(--panel);
  border: var(--bw) solid var(--hair); color: var(--tx3); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-au-ecr-outils { display: flex; align-items: center; gap: var(--sp-3); opacity: .55; transition: opacity var(--t-fast) var(--ease); }
.pp-au-ecr:hover .pp-au-ecr-outils, .pp-au-ecr-outils:focus-within { opacity: 1; }
.pp-au-ecr-outils .input { flex: 1; min-width: 0; height: 26px; font-size: var(--fs-note); }
.pp-au-ecr-outils .pp-eq-case { flex: none; font-size: var(--fs-note); white-space: nowrap; }
.pp-au-ecr-sort { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.pp-au-arete { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: baseline;
  padding: 3px 8px; border-radius: 6px; transition: background var(--t-fast) var(--ease); }
.pp-au-arete:hover { background: color-mix(in srgb, var(--tx) 6%, transparent); }
.pp-au-arete b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-au-arete small { font-family: var(--mono); color: var(--tx3); white-space: nowrap; }
.pp-au-arete span { color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-au-ecr-plus > summary { cursor: pointer; font-size: var(--fs-note); color: var(--tx3); padding: 4px var(--sp-2); list-style: none;
  border-radius: 6px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.pp-au-ecr-plus > summary::-webkit-details-marker { display: none; }
.pp-au-ecr-plus > summary::before { content: "＋ "; }
.pp-au-ecr-plus[open] > summary::before { content: "－ "; }
.pp-au-ecr-plus > summary:hover { color: var(--tx); background: color-mix(in srgb, var(--tx) 5%, transparent); }
.pp-au-ecr-plus { display: flex; flex-direction: column; gap: 4px; }
.pp-au-ecr-plus[open] { gap: 4px; }
.pp-au-ecr-plus > .pp-au-ecr { margin-top: 4px; }
@media (max-width: 900px) {
  .pp-au-ecr { grid-template-columns: 40px 1fr; }
  .pp-au-ecr-sort { grid-column: 1 / -1; }
}

/* ── Planning ────────────────────────────────────────────────────────────── */
/* Préfixe `pp-pl-`, à lui seul : voir la leçon `pp-log` / `pp-journal`. */
.pp-pl-grilles { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-3); }
.pp-pl-grille { display: flex; flex-direction: column; gap: 3px; }
.pp-pl-heures { position: relative; height: 14px; margin-left: 42px; }
.pp-pl-heures span { position: absolute; font-size: var(--fs-micro); color: var(--tx3); transform: translateX(-50%); }
.pp-pl-ligne { display: flex; align-items: center; gap: var(--sp-2); }
.pp-pl-jour { width: 34px; flex: 0 0 34px; font-size: var(--fs-micro); color: var(--tx3); text-align: right; }
.pp-pl-piste { position: relative; flex: 1; height: 26px; border-radius: var(--r-xs);
  background: var(--panel2); border: var(--bw) solid var(--hair); overflow: hidden; }
/* Les repères de trois heures : lire « 14h » sur une barre nue est impossible. */
.pp-pl-piste { background-image: repeating-linear-gradient(to right,
  var(--hair) 0 1px, transparent 1px calc(100% / 8)); }
.pp-pl-auj .pp-pl-piste { border-color: var(--line); }
.pp-pl-auj .pp-pl-jour { color: var(--tx); font-weight: 600; }
.pp-pl-bloc { position: absolute; top: 2px; bottom: 2px; display: flex; align-items: center; gap: 5px;
  padding: 0 6px; border-radius: 3px; overflow: hidden; cursor: pointer; white-space: nowrap;
  background: hsl(var(--t) 62% 46% / .30); border: 1px solid hsl(var(--t) 62% 56%);
  color: var(--tx); font-size: var(--fs-micro); }
.pp-pl-bloc:hover, .pp-pl-bloc:focus-visible { background: hsl(var(--t) 62% 46% / .5); outline: none; }
.pp-pl-bloc b { font-weight: 600; }
.pp-pl-bloc i { font-style: normal; font-family: var(--mono); color: var(--tx2); }
.pp-pl-maintenant { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow); pointer-events: none; }
.pp-pl-pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px;
  background: hsl(var(--t) 62% 52%); }
.pp-pl-membres { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-3); }

/* ── Production : ce qui est sorti ───────────────────────────────────────── */
.pp-prod { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.pp-prod-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-2); }
.pp-prod-courbe { display: flex; align-items: flex-end; gap: 3px; height: 68px; padding-top: var(--sp-2); }
.pp-prod-jour { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  min-width: 0; text-align: center; }
.pp-prod-jour i { display: block; border-radius: 2px 2px 0 0; background: var(--accent); min-height: 2px; }
.pp-prod-jour span { font-size: var(--fs-micro); color: var(--tx3); overflow: hidden; }
.pp-prod-jour.vide i { background: var(--hair); }
.pp-prod-blocs { display: flex; flex-direction: column; gap: var(--sp-2); }
.pp-prod-blocs > .eyebrow { margin-bottom: var(--sp-1); }
.pp-prod-bloc { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3);
  border: var(--bw) solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-bg); }
.pp-prod-bloc b { color: var(--warn-tx); }
.pp-prod-bloc .help { color: var(--tx2); }

/* ── Dérive : ce qui a changé chez Instagram ─────────────────────────────── */
.pp-derive { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-derive-c { display: grid; grid-template-columns: 68px 1fr; gap: var(--sp-3); padding: var(--sp-3);
  border: var(--bw) solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-bg); }
.pp-derive-c.parti { border-color: var(--hair); background: var(--panel2); }
.pp-derive-c img { width: 100%; border-radius: 6px; border: var(--bw) solid var(--hair); }
.pp-derive-c .k { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--warn-tx); }
.pp-derive-c.parti .k { color: var(--tx3); }

/* ── Le travail en cours, sur le mur ─────────────────────────────────────── */
.pp-tuile-travail { display: flex; align-items: center; gap: 5px; padding: 2px var(--sp-2);
  font-size: var(--fs-micro); color: var(--tx2); border-top: var(--bw) solid var(--hair);
  overflow: hidden; white-space: nowrap; }
.pp-tuile-travail b { color: var(--tx); font-weight: 600; }
.pp-tuile-travail .pt { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: 0 0 6px; }
.pp-tuile-travail.libre .pt { background: var(--hair); }

/* Le bandeau de service : mon créneau, ou qui tient l'appareil. */
.dir-service { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); font-size: var(--fs-sm); border: var(--bw) solid var(--line);
  background: var(--panel2); color: var(--tx2); }
.dir-service .dir-service-txt { flex: 1; min-width: 0; }
.dir-service .dir-service-pt { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ok); }
.dir-service.avert { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-tx); }
.dir-service.avert .dir-service-pt { background: var(--warn); }
.dir-service.bloque { border-color: var(--err-line); background: var(--err-bg); color: var(--err-tx); }
.dir-service.bloque .dir-service-pt { background: var(--err); }
.dir-service b { color: inherit; }
.dir-service a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Ma journée : ce qu'un employé demande d'abord — est-ce que je travaille
   maintenant, sur quoi, jusqu'à quand. */
.pp-pl-moi { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.pp-pl-libre { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--r-sm);
  border: var(--bw) solid var(--hair); background: var(--panel2); font-size: var(--fs-sm); color: var(--tx2); }
.pp-pl-libre b { color: var(--tx); }
.pp-pl-creneau { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); border: var(--bw) solid var(--hair); background: var(--panel2); }
.pp-pl-creneau b { display: block; }
.pp-pl-creneau .help { display: block; margin-top: 2px; }
.pp-pl-heure { display: flex; flex-direction: column; align-items: center; min-width: 58px;
  font-family: var(--mono); font-size: var(--fs-base); color: var(--tx); line-height: 1.25; }
.pp-pl-heure i { font-style: normal; font-size: var(--fs-note); color: var(--tx3); }
.pp-pl-creneau.en-cours { border-color: var(--ok-line); background: var(--ok-bg); }
.pp-pl-creneau.en-cours .pp-pl-heure { color: var(--ok-tx); }
.pp-pl-creneau.finit { border-color: var(--warn-line); background: var(--warn-bg); }
.pp-pl-creneau.finit .pp-pl-heure { color: var(--warn-tx); }
.pp-pl-creneau.passe { opacity: .5; }
.pp-pl-passation { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-4); }
.pp-pl-pass { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); }
.pp-pl-pass > span:first-child { min-width: 130px; color: var(--tx2); }

.pp-compte { max-width: 520px; }
.pp-compte-carte { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.pp-compte-carte h3 { margin: 0; }
.pp-compte-carte .help { margin: 0; }

/* --- Le journal des gestes (dans la modale) ------------------------------------ */
.pp-journal { margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: var(--fs-note); max-height: 160px; overflow: auto; }
.pp-journal li { display: flex; gap: var(--sp-3); color: var(--tx2); }
.pp-journal time { color: var(--tx3); flex: 0 0 auto; }

/* ============================================================================
   LA CONSOLE DE PILOTAGE — reprise de la maquette validée le 13 septembre 2026.
   ========================================================================== */
/* =============================================================================
   PILOTAGE DIRECT — l'écran de l'iPhone au centre, deux panneaux autour.
   Tout passe par les tokens de la charte ; les classes sont préfixées `dir-`.
   ============================================================================= */
.dir-wrap { padding: 0; }
.dir { --dir-h: calc(100vh - var(--h-top) - var(--sp-4) - var(--sp-6));
       --tel-h: min(var(--dir-h), 900px);
       --tel-w: calc(var(--tel-h) * 390 / 844);
       display: grid;
       grid-template-columns: minmax(280px, 1fr) calc(var(--tel-w) + var(--sp-7) * 2) minmax(320px, 1fr);
       gap: var(--gap);
       min-height: var(--dir-h); }
@media (max-width: 1180px) { .dir { grid-template-columns: 1fr; } }

.dir-pan { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.dir-pan .card { padding: var(--sp-4); }
.dir-pan h3 { margin: 0; font-size: var(--fs-base); }
.dir-sec { display: flex; flex-direction: column; gap: var(--sp-3); }

/* --- Le bandeau de l'appareil ---------------------------------------------- */
.dir-band { position: relative; }
.dir-band-btn { width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  background: var(--panel); border: var(--bw) solid var(--hair); color: var(--tx);
  cursor: pointer; font: inherit; text-align: left; box-shadow: var(--inset-hi);
  transition: border-color var(--t-quick) var(--ease); }
.dir-band-btn:hover { border-color: var(--hover-border); }
.dir-band-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dir-band-txt { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.dir-band-nom { font-family: var(--mono); font-size: var(--fs-title); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); }
.dir-band-sub { font-size: var(--fs-meta); color: var(--tx3); }
.dir-band-sub .badge { white-space: nowrap; }
.dir-band-caret { margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-top: 6px solid var(--tx3);
  transition: transform var(--t-quick) var(--ease); }
.dir-band.open .dir-band-caret { transform: rotate(180deg); }
.dir-band-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r);
  padding: var(--sp-1); display: none; box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); }
.dir-band.open .dir-band-menu { display: block; }
.dir-band-item { display: flex; align-items: center; gap: var(--sp-3); height: var(--h-dd-item);
  padding: 0 var(--sp-3); border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-code); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.dir-band-item:hover { background: var(--hover-nav); }
.dir-band-item.on { color: var(--accent); }
.dir-band-item small { margin-left: auto; font-family: var(--sans); font-size: var(--fs-meta);
  color: var(--tx3); text-transform: none; letter-spacing: 0; }
.dir-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--off); flex: 0 0 auto; }
.dir-dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dir-dot.warn { background: var(--warn); }
.dir-dot.err { background: var(--err); }

/* Connexion — une ligne. */
.dir-emo { font-family: var(--emoji); font-size: 17px; line-height: 1; }
.dir-emo-cadre { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 15px;
  border: var(--bw) solid var(--line); border-radius: var(--r-xs); background: var(--panel2); }
.btn.ico-only:has(.dir-emo-cadre) { padding: 0; }

/* L'écran quand rien n'est branché. */
.dir-vide { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-6);
  color: var(--tx3); font-size: var(--fs-sm); background: var(--bg); }
.dir-vide .dir-emo { font-size: 34px; opacity: .6; }
.dir-vide b { color: var(--tx2); font-weight: var(--fw-medium); }
.dir.debranche .dir-vide { display: flex; }
.dir.debranche .tel-ecran canvas, .dir.debranche .tel-ecran img,
.dir.debranche .dir-x, .dir.debranche .dir-y, .dir.debranche .dir-coord { display: none; }
.dir.debranche .tel-ecran { cursor: default; }

/* Gestes physiques. */
.dir-gestes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
/* 🔴 UN GESTE SE VOIT PARTIR ET ARRIVER. Accueil répond en 0,3 s, Retour peut
   chercher 6 s sans rien trouver : sans état sur le bouton, un geste lent ou
   sans effet visible passe pour un bouton débranché. */
.dir-geste.en-cours { border-color: var(--accent); box-shadow: var(--inset-hi), inset 0 0 14px -4px var(--accent-glow); }
.dir-geste.fait     { border-color: var(--ok); }
.dir-geste.echec    { border-color: var(--err); }
.dir-geste { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); height: 54px; padding: 0;
  border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  background: var(--elev); color: var(--tx); cursor: pointer; font: inherit;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-caps);
  box-shadow: var(--inset-hi);
  transition: border-color var(--t-quick) var(--ease); }
.dir-geste:hover { border-color: var(--hover-line); }
.dir-geste:active { transform: translateY(1px); }
.dir-geste:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dir-geste:disabled { opacity: .4; cursor: not-allowed; }

.dir-clavier { display: flex; gap: var(--sp-2); align-items: center; }
.dir-clavier .input { flex: 1 1 auto; min-width: 0; }
/* Le Clavier sur UNE ligne : « Clavier ▸ » est le bouton qui déroule les
   raccourcis (25 septembre 2026). */
.dir-plier { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.dir-plier h3 { margin: 0; }
/* Un chevron dessiné, pas un caractère : « ▸ » sortait minuscule dans la
   police de l'interface. Fermé il pointe à droite, ouvert vers le bas. */
.dir-fleche { display: inline-block; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--tx2); border-bottom: 2px solid var(--tx2);
  transform: rotate(-45deg); transition: transform var(--t-quick) var(--ease); }
.dir-plier[aria-expanded="true"] .dir-fleche { transform: rotate(45deg) translate(-2px, -2px); }
.dir-plier:hover .dir-fleche { border-color: var(--accent); }
.dir-plier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.dir-kbd-zone { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.dir-kbd-zone[hidden] { display: none; }

/* ENVOYER DU CONTENU — la story et le reel, sortis de la procédure. */
.dir-envoi { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Ligne 1 : le titre, les onglets à sa droite, le cadenas. */
.dir-envoi-tete { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dir-envoi-cible { font-size: var(--fs-note); color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dir-envoi-tete h3 { margin: 0; }
/* ⚠️ LA LIGNE PASSE À LA LIGNE (30/09/2026) : sur petit écran, « Choisir la
   story », « Télécharger la vidéo », « Envoyer la photo » débordaient de la
   carte — genres et bouton ne se repliaient jamais. La carte est un conteneur
   de requête : c'est SA largeur qui décide, pas celle de la fenêtre (la
   colonne de gauche est étroite même sur un grand écran). */
.dir-envoi { container-type: inline-size; }
.dir-envoi-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 30px; }
.dir-envoi-genres { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex: 0 1 auto; min-width: 0; }
.dir-envoi-action { flex: 0 1 auto; display: flex; max-width: 100%; min-width: 0; }
.dir-envoi-action .btn { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 430px) {
  /* Deux lignes franches : les genres se partagent la largeur, le bouton la
     prend toute en dessous. */
  .dir-envoi-ligne > .push { display: none; }
  .dir-envoi-genres { flex: 1 1 100%; }
  .dir-envoi .dir-envoi-g { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; }
  .dir-envoi-action:not(:empty) { flex: 1 1 100%; }
  .dir-envoi-action .btn { flex: 1 1 auto; justify-content: center; }
}
.dir-envoi-corps[hidden], .dir-envoi-stock[hidden] { display: none; }
.dir-envoi-cadenas { font-size: 15px; cursor: help; line-height: 1; filter: grayscale(.2); }
.dir-envoi-stock { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-note); color: var(--tx2); }
.dir-envoi-n { color: var(--tx2); font-size: var(--fs-note); }
.dir-envoi-noms { display: flex; flex-direction: column; gap: 2px; }
.dir-envoi-nom { padding: 1px 0; color: var(--tx3); font-size: var(--fs-micro);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dir-vignette { width: 38px; height: 38px; padding: 0; border: var(--bw) solid var(--line); border-radius: var(--r-xs);
  background: var(--panel2); overflow: hidden; cursor: zoom-in; display: grid; place-items: center; }
.dir-vignette:hover { border-color: var(--accent); }
.dir-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-vignette-film { color: var(--tx2); font-size: 13px; }
.dir-envoi .dir-remise-media { cursor: zoom-in; }
/* La loupe : un voile sombre, le média au centre, son nom dessous. */
.dir-loupe { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.78);
  display: grid; place-items: center; cursor: zoom-out; }
.dir-loupe[hidden] { display: none; }
.dir-loupe-boite { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.dir-loupe-media img, .dir-loupe-media video { max-height: 82vh; max-width: 88vw; border-radius: var(--r-sm);
  border: var(--bw) solid var(--line); background: #000; display: block; }
.dir-loupe-media video { cursor: default; }
.dir-loupe-nom { color: var(--tx2); font-size: var(--fs-micro); }
.dir-envoi-g { flex: 0 0 auto; min-width: 58px; padding: 4px var(--sp-3); border: var(--bw) solid var(--line); border-radius: var(--r-xs);
  background: var(--panel2); color: var(--tx2); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--ls-caps); cursor: pointer; }
.dir-envoi-g:hover { border-color: var(--hover-line); }
.dir-envoi-g.on { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.dir-envoi .dir-remise-media { width: 96px; }
.dir-envoi-renvoi { margin: 0; font-size: var(--fs-note); color: var(--accent); }
/* L'étape qui demande un fichier fait remarquer la carte, une fois. */
.dir-envoi.appel { animation: pp-envoi-appel 1.2s var(--ease) 2; }
/* 🔴 L'étape en cours se fait ici : bordure rouge tant qu'on y est. */
.dir-envoi.requis { border-color: var(--err); box-shadow: 0 0 0 1px var(--err), 0 0 20px -8px var(--err); }
.dir-cont.requis { border-color: var(--err); box-shadow: 0 0 0 1px var(--err), 0 0 20px -8px var(--err); }
.dir-envoi.requis.appel { animation-name: pp-envoi-requis; }
@keyframes pp-envoi-requis { 50% { box-shadow: 0 0 0 3px var(--err), 0 0 24px -6px var(--err); } }
@keyframes pp-envoi-appel { 50% { box-shadow: 0 0 0 2px var(--accent); } }
.dir.lecture-seule .dir-envoi .btn { opacity: .4; pointer-events: none; }
.dir-kbd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-note); color: var(--tx3); align-items: center; }
.dir-kbd > span { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.dir-kbd kbd { font-family: var(--mono); font-size: var(--fs-micro); color: var(--tx2);
  border: var(--bw) solid var(--line); border-bottom-width: 2px; border-radius: var(--r-xs);
  padding: 1px 6px; background: var(--panel2); white-space: nowrap; }

/* --- DROITE : le conteneur, le compte, puis la procédure -------------------- */
/* Tant qu'aucun téléphone n'est ouvert, la colonne du travail n'a rien à dire :
   elle porte une seule carte qui nomme l'attente. */
.dir-attente { display: flex; align-items: center; gap: var(--sp-3); }
.dir-attente .help { margin: 0; }
.dir:not(.sans-tel) .dir-attente { display: none; }
.dir.sans-tel #dir-cont,
.dir.sans-tel #dir-compte { display: none; }
/* 📖 Sans téléphone, les procédures se CONSULTENT (2 octobre 2026) : le
   lanceur et la tâche ouverte restent visibles, la liste des étapes se lit en
   clair — seul « Démarrer » disparaît (il faut un téléphone pour jouer). */
.dir.sans-tel #dir-proc-demarrer { display: none; }
.dir.sans-tel #dir-proc.pas-demarre #dir-etapes { opacity: 1; }

.dir-cont { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dir-cont .dir-emo-cadre { width: 30px; height: 30px; font-size: 17px; flex: 0 0 auto; }
.dir-cont-form { display: flex; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.dir-cont-form .input { flex: 1 1 auto; min-width: 0; }
.dir-cont-form .btn { white-space: nowrap; }
.dir-cont-vu { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.dir-cont-vu .push { margin-left: auto; }
/* Étiquette et valeur : même police, même taille — seule la couleur les sépare. */
.dir-cont-l, .dir-cont-v { font-family: var(--mono); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.dir-cont-l { color: var(--tx3); }
.dir-cont-v { color: var(--tx); }
.dir-cont-vu { position: relative; }
.dir-cont-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 2px var(--sp-2); margin-left: calc(-1 * var(--sp-2));
  border: var(--bw) solid transparent; border-radius: var(--r-xs); background: transparent; color: var(--tx); cursor: pointer; font: inherit; }
.dir-cont-btn:hover { border-color: var(--line); background: var(--hover-nav); }
.dir-cont-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dir-cont-btn .dir-band-caret { margin-left: 0; }
.dir-cont-vu.open .dir-band-caret { transform: rotate(180deg); }
.dir-cont-menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: 220px; z-index: 30; display: none;
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: var(--sp-1);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); max-height: 260px; overflow: auto; }
.dir-cont-vu.open .dir-cont-menu { display: block; }
.dir-cont-item { display: flex; align-items: center; gap: var(--sp-3); height: var(--h-dd-item); padding: 0 var(--sp-3);
  border-radius: var(--r-sm); cursor: pointer; font-family: var(--mono); font-size: var(--fs-code); color: var(--tx2); }
.dir-cont-item:hover { background: var(--hover-nav); color: var(--tx); }
.dir-cont-item.on { color: var(--accent); }
.dir-cont-item .badge { margin-left: auto; height: 18px; font-size: var(--fs-micro); }
.dir-cont-actif { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-note); color: var(--tx3); cursor: pointer; white-space: nowrap; }
.dir-cont-actif.on { color: var(--ok-tx); }
/* Branchée à ALESIA, l'état est un jalon : le commutateur s'affiche, il ne se
   touche pas. */
.dir-cont-actif.lecture { cursor: default; }
.dir-cont-actif.lecture .sw { pointer-events: none; opacity: .7; }
.dir-cont-new { font-family: var(--sans); color: var(--tx); border-top: var(--bw) solid var(--hair); border-radius: 0; margin-top: var(--sp-1); padding-top: var(--sp-1); height: calc(var(--h-dd-item) + var(--sp-1)); }

.dir-compte { display: flex; align-items: center; gap: var(--sp-3); }
.dir-compte { display: flex; align-items: center; gap: var(--sp-3); }
.dir-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: var(--bw) solid var(--line); }
.dir-compte-nom { font-family: var(--mono); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--tx); }
.dir-compte-sub { font-size: var(--fs-meta); color: var(--tx3); }
.dir-compte .push { margin-left: auto; }

/* Le lanceur — quatre tâches. */
.dir-taches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.dir-tache { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--elev);
  color: var(--tx); cursor: pointer; font: inherit; text-align: left; box-shadow: var(--inset-hi);
  transition: border-color var(--t-quick) var(--ease); }
.dir-tache:hover { border-color: var(--accent); }
.dir-tache:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dir-tache b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.dir-tache small { display: block; font-size: var(--fs-meta); color: var(--tx3); }

/* L'en-tête de la tâche en cours. */
/* Trois colonnes : le titre à gauche, les contrôles AU CENTRE DE LA LIGNE
   (pas au centre de l'espace restant — c'est pourquoi une grille, pas un
   flex avec des marges automatiques), chrono et « Quitter » à droite. */
.dir-proc-tete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); }
.dir-proc-g, .dir-proc-d { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.dir-proc-d { justify-content: flex-end; }
.dir-proc-ctrl { display: flex; align-items: center; gap: var(--sp-2); }
/* ⚠️ LE PANNEAU DE DROITE EST ÉTROIT (~400 px). Sur une seule ligne, titre,
   pastille, pause, chrono et « 1 / 8 » se chevauchaient — « Pause » passait sur
   le chrono, « 1 / 8 » s'empilait sur trois lignes (vu sur capture le 25
   septembre 2026). Quand le panneau est étroit, le titre et le chrono restent
   en haut, et les contrôles passent AU CENTRE de la ligne du dessous. */
#dir-proc { container-type: inline-size; }
.dir-proc-g h3, .dir-proc-chrono, .dir-proc-prog, .dir-proc-etat, .dir-proc-ctrl .btn { white-space: nowrap; }
.dir-proc-g h3 { overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 620px) {
  .dir-proc-tete { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "g d" "c c"; row-gap: var(--sp-2); }
  .dir-proc-g { grid-area: g; }
  .dir-proc-d { grid-area: d; }
  .dir-proc-ctrl { grid-area: c; justify-content: center; }
  /* La barre d'étapes déborde aussi depuis l'ajout d'« Imprévu » : le rappel
     « Entrée » du bouton se coupait au bord. Entrée marche toujours, et l'aide
     de la console la cite. */
  .dir-nav .dir-raccourci { display: none; }
}
.dir-proc-tete .dir-emo-cadre { width: 30px; height: 30px; font-size: 17px; }
/* « ▶ Démarrer » et la pastille d'état, à droite du titre. Tant que la tâche
   n'est pas démarrée, la barre et la liste des étapes restent lisibles mais
   inertes : rien ne s'enregistre, rien n'avance. */
.dir-proc-etat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ok-tx); white-space: nowrap; }
.dir-proc-etat.warn { color: var(--warn-tx); }
.dir-proc-etat .dir-dot.ok { animation: dir-pouls 1.6s ease-in-out infinite; }
@keyframes dir-pouls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dir-proc-etat .dir-dot.ok { animation: none; } }
#dir-proc.pas-demarre .dir-nav, #dir-proc.pas-demarre #dir-etapes,
#dir-proc.en-pause .dir-nav, #dir-proc.en-pause #dir-etapes { opacity: .45; pointer-events: none; }
/* ✏️ ⤼ 🗑 restent actifs sur une tâche NON DÉMARRÉE ou en pause (27/09) : la
   liste grisée bloque la navigation, pas l'édition du propriétaire. */
#dir-proc.pas-demarre #dir-etapes .dir-etape-crayon, #dir-proc.pas-demarre #dir-etapes .dir-etape-facult-b,
#dir-proc.pas-demarre #dir-etapes .dir-etape-suppr, #dir-proc.pas-demarre #dir-etapes .dir-etape-edit,
#dir-proc.pas-demarre #dir-etapes .dir-etape-act,
#dir-proc.en-pause #dir-etapes .dir-etape-crayon, #dir-proc.en-pause #dir-etapes .dir-etape-facult-b,
#dir-proc.en-pause #dir-etapes .dir-etape-suppr, #dir-proc.en-pause #dir-etapes .dir-etape-edit { pointer-events: auto; }
#dir-proc.pas-demarre #dir-etapes .dir-etape-edit { background: var(--bg); color: var(--tx); }
.dir-proc-prog { font-family: var(--mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--tx); margin-left: auto; font-feature-settings: "tnum" 1; }
.dir-barre-prog { height: 3px; border-radius: var(--r-dot); background: var(--bar-track); overflow: hidden; }
.dir-barre-prog i { display: block; height: 100%; width: var(--pc, 0%); background: var(--accent);
  transition: width var(--t-ui) var(--ease); }

/* Le stepper — cliquable, trois états. */
.dir-etapes { margin: 0; padding: 0; list-style: none; }
.dir-etape { display: flex; align-items: center; gap: var(--sp-3); min-height: 30px;
  font-size: var(--fs-sm); color: var(--tx3); cursor: pointer; border-radius: var(--r-xs);
  padding: 0 var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); }
.dir-etape:hover { background: var(--hover-nav); color: var(--tx2); }
.dir-etape i { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-micro);
  font-style: normal; border: var(--bw) solid var(--line); color: var(--tx3); }
.dir-etape.fait { color: var(--tx2); }
.dir-etape.fait i { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-tx); }
.dir-etape.cours { color: var(--tx); font-weight: var(--fw-medium); background: var(--panel2); }
.dir-etape.cours i { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
/* Le nom prend la place ; « INSTA / ALESIA / AUTO… » est une colonne de largeur
   fixe, alignée à droite, JUSTE AVANT les boutons ⤼ ✏️ 🗑 (27/09). */
.dir-etape > span:not([class]) { flex: 1 1 auto; min-width: 0; }
.dir-etape .dir-ou { flex: 0 0 58px; margin-left: var(--sp-2); text-align: right; font-family: var(--mono);
  font-size: var(--fs-micro); letter-spacing: var(--ls-caps); color: var(--tx3); white-space: nowrap; }

/* CE QUI ATTEND UN GESTE S'ÉCLAIRE — une lumière vers l'intérieur, qui respire. */
@keyframes dir-respire {
  0%,100% { border-color: var(--accent); box-shadow: inset 0 0 14px -4px var(--accent-glow), 0 0 6px -2px var(--accent-glow) }
  50%     { border-color: var(--accent); box-shadow: inset 0 0 22px -2px var(--accent-glow), 0 0 14px -2px var(--accent-glow) } }
.dir-volet .dir-ligne, .dir-volet .dir-code, .dir-volet textarea, .dir-volet .dir-lien, .dir-volet .input { border: var(--bw) solid var(--accent); border-radius: var(--r-sm); background: var(--panel); padding-left: var(--sp-3); padding-right: var(--sp-2); box-shadow: inset 0 0 18px -3px var(--accent-glow), 0 0 10px -2px var(--accent-glow); }
.dir-volet .dir-ligne { margin-bottom: var(--sp-2); height: 34px; }
.dir-volet .dir-ligne:last-child { margin-bottom: 0; }
.dir-volet .dir-code.attente { box-shadow: none; }
.dir-volet [data-action].p { box-shadow: inset 0 0 18px -3px var(--accent-glow), 0 0 10px -2px var(--accent-glow); }
@media (prefers-reduced-motion: reduce) { .dir-volet .dir-ligne, .dir-volet .dir-code, .dir-volet textarea, .dir-volet .dir-lien, .dir-volet [data-action].p { animation: none; border-color: var(--accent); box-shadow: inset 0 0 18px -3px var(--accent-glow), 0 0 10px -2px var(--accent-glow); } }
.dir-volet-row { display: flex; align-items: center; gap: var(--sp-3); }
.dir-volet-row > span { flex: 1 1 auto; min-width: 0; }
.dir-volet-row .btn { flex: 0 0 auto; white-space: nowrap; }
/* Tâche faite : un liseré vert. */
.dir-tache.fait { border-color: var(--ok-line); }
/* 🔁 Récurrente : pas de cadre, la date en vert. */
.dir-tache small.dir-faite-le { color: var(--ok-tx); }
/* L'emoji de fréquence, en haut à droite de la tuile, plus petit que celui de la tâche. */
.dir-freq { position: absolute; top: 11px; right: 8px; font-size: 11px; line-height: 1; opacity: .8; }
.dir-tache.fait small { color: var(--ok-tx); }
@keyframes dir-valide { 0% { box-shadow: 0 0 0 0 var(--ok); border-color: var(--ok) } 60% { box-shadow: 0 0 0 10px transparent; border-color: var(--ok) } 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--hair) } }
.dir-proc.valide { animation: dir-valide .9s var(--ease) forwards; }
.dir-confirm { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-sm); border: var(--bw) solid var(--ok-line); background: var(--ok-bg); font-size: var(--fs-sm); color: var(--ok-tx); }
.dir-confirm .push { margin-left: auto; }
.dir-confirm .input { flex: 1 1 auto; min-width: 0; }   /* la note de « Ça n'a pas marché » */

/* Le volet de l'étape — ce qu'il faut pour la faire, rien d'autre. */
.dir-volet { border: var(--bw) solid var(--accent-dim); border-radius: var(--r-sm);
  background: var(--panel2); padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.dir-volet-t { font-size: var(--fs-sm); color: var(--tx); font-weight: var(--fw-medium); }
.dir-volet-t small { display: block; font-weight: var(--fw-regular); color: var(--tx3); font-size: var(--fs-note); margin-top: 2px; }
.dir-menu-ig { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; height: 12px; vertical-align: middle; margin: 0 3px; }
.dir-menu-ig b { display: block; width: 12px; height: 1.5px; background: currentColor; border-radius: 1px; }
.dir-ligne { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-3); height: 32px; border-bottom: var(--bw) solid var(--hair); }
.dir-ligne:last-child { border-bottom: 0; }
.dir-ligne-l { font-size: var(--fs-caption); color: var(--tx3); text-transform: uppercase;
  letter-spacing: var(--ls-label); white-space: nowrap; }
.dir-ligne-v { font-family: var(--mono); font-size: var(--fs-code); color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-feature-settings: "tnum" 1; }
.dir-ligne-v.masque { letter-spacing: .16em; color: var(--tx2); }
.dir-ligne-a { display: flex; gap: 0; }
.dir-ligne-a .btn { padding: 0 5px; height: 26px; }
.dir-aplat { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-dot);
  vertical-align: -2px; margin-right: var(--sp-2); border: var(--bw) solid var(--line); }
.dir-code { display: flex; align-items: center; gap: var(--sp-3); height: 40px;
  padding: 0 var(--sp-3); border-radius: var(--r-sm);
  border: var(--bw) solid var(--cy-line); background: var(--cy-bg); }
.dir-code-l { font-size: var(--fs-caption); color: var(--cy-tx); text-transform: uppercase;
  letter-spacing: var(--ls-label); opacity: .8; }
.dir-code-v { font-family: var(--mono); font-size: 20px; font-weight: var(--fw-semibold);
  letter-spacing: .18em; color: var(--cy-tx); font-feature-settings: "tnum" 1; }
.dir-code-reste { margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-micro); color: var(--cy-tx);
  background: conic-gradient(var(--cyan) calc(var(--pc) * 1%), var(--bar-track) 0); }
.dir-code-reste b { width: 20px; height: 20px; border-radius: 50%; background: var(--panel);
  display: grid; place-items: center; font-weight: var(--fw-medium); }
.dir-code.attente { border-color: var(--warn-line); background: var(--warn-bg); }
.dir-code.attente .dir-code-l, .dir-code.attente .dir-code-v { color: var(--warn-tx); }
.dir-volet textarea { width: 100%; min-height: 56px; resize: vertical; font-family: var(--mono); font-size: var(--fs-code);
  color: var(--tx); background: var(--sunken); border: var(--bw) solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.dir-volet textarea:focus { outline: none; border-color: var(--accent); }
.dir-lien { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--mono); font-size: var(--fs-code); color: var(--accent); }
.dir-lien .dir-ligne-a { margin-left: auto; }
.dir-lot { display: flex; gap: var(--sp-2); }
.dir-lot span { flex: 0 0 48px; aspect-ratio: 9 / 16; border-radius: var(--r-xs); background: var(--panel); border: var(--bw) solid var(--line);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-micro); color: var(--tx3); }
.dir-lot span.on { border-color: var(--accent); color: var(--accent); }
/* UNE LIGNE (25 septembre 2026) : « 3 / 8 », le nom de l'étape (coupé s'il
   est long), les trois gestes rares en icône, puis « Étape faite ». */
.dir-nav { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dir-nav .push { margin-left: auto; }
.dir-nav .dir-proc-prog { flex: 0 0 auto; font-family: var(--mono); font-size: var(--fs-note); color: var(--tx2);
  padding: 2px 6px; border: var(--bw) solid var(--line); border-radius: var(--r-xs); }
/* Le bandeau « étape en cours » doit rester PARLANT : jusqu'à deux lignes
   plutôt qu'un nom coupé à « Mot de p… ». */
.dir-nav .dir-nav-etape { flex: 1 1 auto; min-width: 0; margin: 0; text-align: left; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btn.dir-nav-ico { flex: 0 0 auto; min-width: 30px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 1; }
.btn.dir-nav-ico.actif { font-size: var(--fs-note); }
.dir-nav-etape { margin-top: calc(-1 * var(--sp-1)); text-align: center; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-nav-etape .dir-menu-ig { height: 10px; }
/* Quitter et Démarrer ont une BORDURE (25 septembre 2026) : sans elle, on les
   lisait comme du texte et pas comme des boutons. */
.btn.ghost.dir-quitter { color: var(--err); border: var(--bw) solid var(--err); }
.btn.ghost.dir-demarrer { border: var(--bw) solid var(--ok); color: var(--tx); }
.btn.ghost.dir-demarrer:hover { background: var(--panel2); }
.btn.ghost.dir-quitter:hover { color: var(--err-tx); background: var(--err-bg); }
.dir-place { position: relative; width: 60px; flex: 0 0 60px; aspect-ratio: 9 / 16; border-radius: var(--r-xs); background: var(--panel); border: var(--bw) solid var(--line); }
.dir-place i { position: absolute; right: 12%; bottom: 22%; width: 40%; height: 9%; border-radius: var(--r-dot); background: var(--accent); }

/* Taper est le geste principal ; copier, le secondaire. La valeur elle-même arme le mode remplir. */
.dir-ligne-v[data-tape] { cursor: pointer; }
.dir-ligne-v[data-tape]:hover { color: var(--accent); }
.dir-ligne-a .btn.p { height: 26px; padding: 0 9px; font-size: var(--fs-note); }
.dir.arme .tel-ecran { cursor: copy; }
.dir.arme .dir-x, .dir.arme .dir-y { opacity: .7; }
.dir-arme-tip { display: none; margin-top: var(--sp-2); font-size: var(--fs-note); color: var(--accent); }
.dir.arme .dir-arme-tip { display: block; }
.dir-arme-tip b { font-family: var(--mono); }

/* Lire à l'écran : le prochain clic sur le téléphone lit ce qu'il y a sous le point. */
.dir.lit .tel-ecran { cursor: crosshair; }
.dir-lecture-a { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.dir-lecture-a .help { flex: 1; }
.btn.ghost.dir-echec { color: var(--warn-tx); }
.btn.ghost.dir-echec:hover { background: var(--warn-bg); }
/* « Imprévu » (Proteus Agents) : un écran inconnu reste OUVERT tant qu'on ne
   l'a pas clos — le bouton le montre, dans la teinte d'avertissement. */
.btn.ghost.dir-imprevu.actif { color: var(--warn-tx); background: var(--warn-bg); }
.dir-confirm.dir-imprevu-choix { flex-wrap: wrap; }

/* L'assistant et son cadre sur l'écran. */
.dir-assist { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-sm);
  border: var(--bw) solid var(--line); background: var(--panel2); }
/* La ligne de l'assistant : la pieuvre, le mot, l'état, « Proposer » — tous
   sur le même axe (le décalage venait de la hauteur de ligne de `.eyebrow`). */
.dir-assist-tete { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
.dir-assist-tete > * { margin-top: 0; margin-bottom: 0; line-height: 1.2; }
.dir-assist-ico { width: 30px; height: auto; flex: 0 0 auto; display: block; image-rendering: pixelated; }
.dir-assist-tete .push { margin-left: auto; }
.dir-assist-props { display: flex; flex-direction: column; gap: var(--sp-1); }
.dir-assist-p { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: var(--sp-1) 0; }
.dir-assist-p b { font-weight: 500; }
.dir-assist-p small { color: var(--tx3); font-family: var(--mono); }
.dir-assist-p .btn { margin-left: auto; }
.dir-assist-p.absent { opacity: .6; }
.dir-suggere { position: absolute; z-index: 3; border: 2px solid var(--accent); border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 18px -2px var(--accent-glow); pointer-events: none; }
/* 🎯 Le but de l'étape (peindreObjectif, phonepilot.js). */
.dir-objectif { margin: var(--sp-1) 0; padding: 4px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm);
  border: var(--bw) dashed var(--line); color: var(--tx2); display: flex; flex-wrap: wrap; gap: 4px var(--sp-2); align-items: center; }
.dir-objectif[hidden] { display: none; }
.dir-objectif b { font-weight: 600; color: var(--tx); }
.dir-objectif.ok { border-style: solid; border-color: var(--ok-line); background: var(--ok-bg); }
.dir-objectif.passer { border-style: solid; border-color: var(--warn-line); background: var(--warn-bg); }
.dir-objectif .push { margin-left: auto; }
/* ✅ La transition vérifiée (peindreVerif, phonepilot.js). */
.dir-assist-verif { margin: var(--sp-1) 0; padding: 4px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm);
  border: var(--bw) solid var(--line); color: var(--tx2); }
.dir-assist-verif[hidden] { display: none; }
.dir-assist-verif b { font-weight: 600; color: var(--tx); }
.dir-assist-verif.ok { border-color: var(--ok-line); background: var(--ok-bg); }
.dir-assist-verif.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.dir-assist-verif.err { border-color: var(--err-line); background: var(--err-bg); }
/* 🛡 Le risque d'une étape (badgeRisque, changerRisque). */
.dir-etape-risque { display: table; margin-top: 2px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
  color: var(--warn-tx); }
.dir-etape-risque.critique { color: var(--err-tx); font-weight: 600; }
.dir-etape-act .dir-etape-risque-b { margin-left: 0; width: 26px; font-size: 12px; opacity: .45; }
.dir-etape-risque-b.moyen, .dir-etape-risque-b.eleve, .dir-etape-risque-b.critique, .dir-etape-risque-b.pose { opacity: 1; }
.dir-etape-risque-b:hover { opacity: 1; }
#dir-proc.pas-demarre #dir-etapes .dir-etape-risque-b, #dir-proc.en-pause #dir-etapes .dir-etape-risque-b { pointer-events: auto; }
/* 🧩 Les sous-procédures (2/10/2026) : l'arbre des étapes (retrait par
   niveau), un titre par objectif, et les badges ENV/ENG, %, ↻, valeurs. */
.dir-etape { padding-left: calc(var(--sp-2) + var(--niv, 0) * 18px); }
.dir-etape.off { opacity: .5; }
.dir-objectif-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-2); margin: var(--sp-3) 0 2px;
  padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.dir-objectif-t:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dir-objectif-t small { color: var(--tx3); font-size: var(--fs-micro); }
.dir-etape-genre, .dir-etape-proba, .dir-etape-boucle, .dir-etape-param, .dir-etape-plafond, .dir-etape-off-b, .dir-etape-exige {
  display: inline-block; margin: 2px 4px 0 0; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px;
  font-size: var(--fs-micro); color: var(--tx2); white-space: nowrap; }
.dir-etape-genre.eng { color: var(--warn-tx); border-color: var(--warn-line); }
.dir-etape-off-b { color: var(--tx3); }
.dir-tirage { margin: var(--sp-2) 0; }
/* 🟩 Ce que l'enregistreur a compris du clic (montrerCompris, phonepilot.js). */
.dir-compris { position: absolute; z-index: 3; border: 1.5px solid var(--ok); border-radius: 6px; pointer-events: none;
  animation: dir-compris 1.2s var(--ease) forwards; }
.dir-compris.warn { border-color: var(--warn); }
.dir-compris.err { border-color: var(--err); border-width: 2px; }
.dir-compris b { position: absolute; left: -1px; bottom: 100%; margin-bottom: 3px; padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--ok); color: #fff; font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; }
.dir-compris.warn b { background: var(--warn); }
.dir-compris.err b { background: var(--err); }
@keyframes dir-compris { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dir-compris { animation: none; } }
.dir-suggere b { position: absolute; left: -2px; top: 100%; margin-top: 3px; padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--accent); color: #fff; font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; }

/* Chronomètre de la tâche. */
.dir-proc-chrono { font-family: var(--mono); font-size: var(--fs-meta); color: var(--tx3); font-feature-settings: "tnum" 1; margin-left: auto; }
.dir-proc-chrono + .dir-proc-prog { margin-left: 0; }

/* La suite proposée après une tâche. */
.dir-suite { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  border: var(--bw) solid var(--ok-line); background: var(--ok-bg); color: var(--ok-tx); font-size: var(--fs-sm); }
.dir-suite .push { margin-left: auto; }

/* L'ATTENTE SE LIT SUR LE TÉLÉPHONE. Orange : un code arrive, ne pas toucher. Vert : il est là. */
.dir.attente-code .tel { border-color: var(--warn); box-shadow: var(--inset-hi), 0 0 0 2px var(--warn-line), 0 0 28px -6px var(--warn); }
.dir.code-recu .tel { border-color: var(--ok); box-shadow: var(--inset-hi), 0 0 0 2px var(--ok-line), 0 0 28px -6px var(--ok); }
.dir-sms { position: absolute; left: 5%; right: 5%; bottom: 8%; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-note); white-space: nowrap; background: var(--panel); border: var(--bw) solid var(--ok);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); animation: dir-monte .3s var(--ease); }
.dir-sms[hidden] { display: none; }
.dir-sms-l { font-size: var(--fs-note); color: var(--ok-tx); }
.dir-sms-v { font-family: var(--mono); font-size: var(--fs-note); font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--tx); font-feature-settings: "tnum" 1; }
.dir-sms-ligne { display: flex; align-items: center; gap: var(--sp-2); }
.dir-sms .btn { margin-left: auto; height: 24px; padding: 0 9px; font-size: var(--fs-note); }
@keyframes dir-monte { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }

/* --- Le centre : le téléphone --------------------------------------------- */
.dir-centre { display: flex; flex-direction: column; align-items: center; min-width: 0;
  position: sticky; top: calc(var(--h-top) + var(--sp-4)); align-self: start; }
.dir-poste { position: relative; display: flex; justify-content: center; align-items: flex-start; width: 100%;
  height: var(--tel-h);
  --tel-r: calc(var(--tel-h) * 47 / 844);
  --tel-bord: calc(var(--tel-h) * 6 / 844); }
.dir-poste::before { content: ""; position: absolute; pointer-events: none;
  left: 15%; right: 15%; top: 4%; bottom: 4%;
  background: radial-gradient(closest-side, var(--accent-glow) 0%, transparent 100%);
  opacity: .10; }
/* 🔴 LA DALLE PREND LE RATIO DU FLUX, ET L'IMAGE LE REMPLIT EXACTEMENT.
   Le téléphone rend du 720x1558 (0,4621) là où la dalle valait 0,4529 :
   `object-fit:cover` agrandissait l'image pour couvrir, donc rognait ~2 % de
   largeur. Ces pixels devenaient INATTEIGNABLES, et un clic à 50 % de la dalle
   ne tombait plus à 50 % de l'écran du téléphone — l'erreur grandissant vers
   les bords. Sur du pilotage, la justesse des coordonnées passe avant la
   fidélité géométrique : la dalle suit le ratio réel (`--tel-ratio`, posé par
   le lecteur dès la première image) et l'image la remplit en `fill`. */
.tel { position: relative; aspect-ratio: var(--tel-ratio, 390 / 844);
  height: var(--tel-h); width: auto; max-width: 100%;
  padding: var(--tel-bord); border-radius: var(--tel-r);
  background: var(--panel2); border: var(--bw) solid var(--silhouette);
  box-shadow: var(--inset-hi), 0 0 0 calc(var(--tel-bord) * .6) var(--bg),
              0 40px 80px -40px rgba(0,0,0,.9); }
.tel::before, .tel::after { content: ""; position: absolute; width: 1.2%;
  background: var(--silhouette); border-radius: var(--r-dot); }
.tel::before { left: -1.2%; top: 21%; height: 13%; }
.tel::after  { right: -1.2%; top: 26%; height: 9%; }
.tel-encoche { position: absolute; top: var(--tel-bord); left: 50%; transform: translateX(-50%);
  width: 32%; height: 3.2%; background: var(--panel2);
  border-radius: 0 0 calc(var(--tel-r) * .45) calc(var(--tel-r) * .45); }
.tel-ecran { position: relative; height: 100%; overflow: hidden;
  border-radius: calc(var(--tel-r) - var(--tel-bord)); background: var(--bg);
  cursor: crosshair; user-select: none; }
.dir-x, .dir-y { position: absolute; pointer-events: none; opacity: 0;
  background: var(--accent); transition: opacity var(--t-quick) var(--ease); }
.dir-x { top: 0; bottom: 0; width: 1px; }
.dir-y { left: 0; right: 0; height: 1px; }
.tel-ecran:hover .dir-x, .tel-ecran:hover .dir-y { opacity: .4; }
.dir-coord { position: absolute; pointer-events: none; opacity: 0;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--accent);
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-xs);
  padding: 1px 5px; transform: translate(10px, 10px); white-space: nowrap; }
.tel-ecran:hover .dir-coord { opacity: 1; }
.dir-tap { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 2px solid var(--accent); pointer-events: none;
  animation: dir-onde .45s var(--ease) forwards; }
@keyframes dir-onde { from { transform: scale(.4); opacity: 1 } to { transform: scale(1.6); opacity: 0 } }
.dir-trait { position: absolute; height: 2px; background: var(--accent); transform-origin: 0 50%;
  pointer-events: none; opacity: .8; border-radius: var(--r-dot);
  animation: dir-fondu .6s var(--ease) forwards; }
@keyframes dir-fondu { to { opacity: 0 } }

/* 🔴 L'APPUI SE VOIT PENDANT QU'IL DURE. Un cercle se remplit sur la durée
   exacte du seuil d'appui long, puis reste plein tant que le bouton est
   maintenu : on sait, SANS LÂCHER, si l'on a déjà basculé du toucher vers
   l'appui long. Le clic répondant en 0,5 à 1,5 s côté XCUITest, c'est le seul
   repère immédiat que l'opérateur ait sur ce qu'il est en train d'envoyer.

   ⚠️ `--dir-long` est posé PAR LE SCRIPT depuis sa propre constante de seuil :
   deux valeurs écrites chacune de son côté finiraient par diverger, et le
   cercle annoncerait un appui long que le serveur recevrait comme un tap. */
.dir-presse { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid var(--accent); pointer-events: none;
  display: grid; place-items: center;
  animation: dir-seuil .2s var(--ease) var(--dir-long, .6s) forwards; }
.dir-presse::after { content: ""; width: 100%; height: 100%; border-radius: 50%;
  background: var(--accent);
  animation: dir-charge var(--dir-long, .6s) linear forwards; }
@keyframes dir-charge { from { transform: scale(.12); opacity: .28 }
                        to   { transform: scale(1);   opacity: .5 } }
@keyframes dir-seuil { to { box-shadow: 0 0 0 3px var(--accent-dim),
                                        0 0 16px -3px var(--accent-glow) } }


/* Modale des paramètres. */
.dir-modal { position: fixed; inset: 0; z-index: 60; display: none;
  place-items: center; background: var(--backdrop); backdrop-filter: blur(var(--backdrop-blur)); }
.dir-modal.open { display: grid; }
.dir-range { display: flex; align-items: center; gap: var(--sp-3); width: 260px; }
.dir-range input { flex: 1 1 auto; accent-color: var(--accent); height: 4px; cursor: pointer; }
.dir-range output { width: 92px; flex: 0 0 auto; white-space: nowrap; text-align: right; font-size: var(--fs-code); color: var(--tx); font-feature-settings: "tnum" 1; }
/* La modale est découpée en blocs séparés par un filet, chacun avec son air en
   haut et en bas : l'en-tête reste en place, le corps défile si la fenêtre est
   basse. */
.dir-modal-box { width: min(94vw, 880px); max-height: 90vh; background: var(--panel);
  border: var(--bw) solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden; }
.dir-modal-box h3 { margin: 0; font-size: var(--fs-base); }
.dir-modal-tete { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6); border-bottom: var(--bw) solid var(--line); }
.dir-modal-tete .push { margin-left: auto; }
/* Deux colonnes séparées par un filet vertical ; le journal les traverse. */
.dir-modal-corps { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; }
.dir-modal-col { min-width: 0; }
.dir-modal-col + .dir-modal-col { border-left: var(--bw) solid var(--hair); }
.dir-modal-sec { display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); }
.dir-modal-sec + .dir-modal-sec { border-top: var(--bw) solid var(--hair); }
.dir-modal-plein { grid-column: 1 / -1; border-top: var(--bw) solid var(--hair); }
.dir-modal-gestes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.dir-modal-gestes .btn { justify-content: flex-start; }
.dir-modal-box .dir-range { width: 100%; }
.dir-modal-box .dir-reg { grid-template-columns: auto minmax(0, 1fr); }
.dir-modal-box .dir-reg > :nth-child(even) { justify-self: end; }
.dir-modal-box .dir-reg .input { width: 100%; }
@media (max-width: 760px) {
  .dir-modal-corps { grid-template-columns: 1fr; }
  .dir-modal-col + .dir-modal-col { border-left: 0; border-top: var(--bw) solid var(--hair); }
}
/* Le choix de la source, et le voyant de ce qui encode vraiment. */
.dir-src { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.dir-src-l { color: var(--tx2); }
.dir-src .seg { height: var(--h-ctrl-sm); }
.dir-src .seg button { font-size: var(--fs-note); padding: 0 var(--sp-4); }
.dir-src-etat { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-note);
  color: var(--tx2); border: var(--bw) solid var(--hair); }
.dir-src-etat.ok   { color: var(--ok-tx);   background: var(--ok-bg);   border-color: var(--ok-line); }
.dir-src-etat.warn { color: var(--warn-tx); background: var(--warn-bg); border-color: var(--warn-line); }
.dir-src-etat.err  { color: var(--err-tx);  background: var(--err-bg);  border-color: var(--err-line); }
.dir-reg { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); }
.dir-reg > span:first-child { color: var(--tx2); }
.dir-reg .mono { color: var(--tx); text-align: right; }
.dir-reg .seg { height: var(--h-ctrl-sm); }
.dir-reg .seg button { font-size: var(--fs-note); padding: 0 10px; }

/* Rien ne bouge, mais rien n'est vide : le cercle d'appui reste plein, il dit
   toujours où le doigt est posé — il cesse seulement de se remplir. */
@media (prefers-reduced-motion: reduce) {
  .dir-tap, .dir-trait, .dir-presse { animation: none; }
  .dir-presse::after { animation: none; opacity: .4; }
}

/* --- Ce que le lecteur vidéo ajoute à la dalle ---------------------------------- */
.tel-ecran canvas, .tel-ecran img { display: block; width: 100%; height: 100%; object-fit: fill; background: var(--bg); }
.tel-ecran canvas[hidden], .tel-ecran img[hidden] { display: none; }
.dir-voile { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--sp-6);
  font-size: var(--fs-sm); color: var(--tx3); background: var(--bg); }
.dir-voile[hidden] { display: none; }
.dir-touche { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 2px solid var(--accent); pointer-events: none; animation: dir-onde .45s var(--ease) forwards; }
/* 🔴 DEUX CHOSES PORTAIENT LA MÊME CLASSE. Le paragraphe « Lecture seule »
   sous l'écran et le widget « Lire à l'écran » des volets (zone de collage +
   bouton, `lecture()` dans phonepilot.js) s'appelaient tous deux
   `.dir-lecture` : le `display: none` du premier cachait le second, donc la
   clé 2FA, les codes de secours et le username corrigé n'avaient ni champ ni
   bouton. Le paragraphe s'appelle désormais `.dir-lecture-seule` ; le widget
   garde `.dir-lecture`, et la recette interdit tout `display: none` sur lui. */
.dir-lecture-seule { display: none; margin-top: var(--sp-2); font-size: var(--fs-note); color: var(--warn-tx); text-align: center; }
.dir.lecture-seule .dir-lecture-seule { display: block; }
.dir-secrets-masques { display: none; margin-top: var(--sp-2); font-size: var(--fs-note); color: var(--warn-tx); text-align: center; }
.dir.secrets-masques .dir-secrets-masques { display: block; }
.dir-lecture { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }

/* Le voile de coupure du flux : le texte, le compte à rebours, et le bouton
   qui n'attend pas. Empilés au centre de la dalle. */
.dir-voile { display: grid; place-items: center; align-content: center; gap: var(--sp-2); }
.dir-voile-sub { font-size: var(--fs-note); color: var(--tx3); }
.dir-voile-sub[hidden], .dir-voile .btn[hidden] { display: none; }

/* Le raccourci clavier posé SUR un bouton (H, I, Entrée…) : même dessin que
   la légende `.dir-kbd`, en plus discret pour ne pas concurrencer le libellé. */
.dir-geste kbd.dir-raccourci, .dir-nav kbd.dir-raccourci { font-family: var(--mono); font-size: 9px; line-height: 1;
  color: var(--tx3); border: var(--bw) solid var(--line); border-radius: var(--r-xs); padding: 1px 4px;
  background: var(--panel2); white-space: nowrap; }
.dir-geste kbd.dir-raccourci { position: absolute; top: 3px; right: 4px; }
.dir-geste { position: relative; }
.dir-nav kbd.dir-raccourci { margin-left: var(--sp-2); }

/* Le bandeau « Reprendre » : une tâche laissée en cours SUR CE TÉLÉPHONE,
   quel que soit le conteneur affiché. Un seul bouton, qui sélectionne le
   conteneur et reprend à l'étape retenue. */
.dir-reprise { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  border: var(--bw) solid var(--warn-line); background: var(--warn-bg); color: var(--warn-tx); font-size: var(--fs-sm); }
.dir-reprise[hidden] { display: none; }
.dir-reprise .push { margin-left: auto; }
.dir-reprise b { color: inherit; }
/* Dans la liste des tâches, « Reprendre à l'étape N » est une étiquette, pas
   le bandeau : même classe, mais sans son épaisseur. */
.dir-tache .dir-reprise { display: inline-flex; padding: 0 var(--sp-2); gap: 0; line-height: 1.5;
  font-size: var(--fs-meta); color: var(--accent); }
.dir.lecture-seule .tel-ecran { cursor: default; }
.dir.lecture-seule .dir-geste, .dir.lecture-seule .dir-clavier .btn { opacity: .4; pointer-events: none; }

/* ── Ressources : de quoi tenir, et ce qui manque ───────────────────────────
   Tout vient d'ALESIA ; la page ne fait que le poser. Classes préfixées
   `pp-res-`, jamais empruntées à un autre écran. */
.pp-res-liaison .row { gap: var(--sp-3); }
.pp-res-liaison code { font-family: var(--mono); font-size: var(--fs-sm); }
.pp-res-fille td:first-child { padding-left: var(--sp-5); color: var(--tx2); }
.pp-res-indent { color: var(--tx3); font-family: var(--mono); }
.pp-res-depot { color: var(--warn-tx); }
.pp-res-tels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-res-tel { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--hair); border-radius: var(--r); background: var(--panel2); }
.pp-res-tel.manque { border-color: var(--warn-tx); }
.pp-res-jauge .bar { flex: 1; }

/* ── Proxys : l'IP de chaque conteneur, et ce qu'elle coûte ────────────────
   Classes préfixées `pp-px-`, jamais empruntées à un autre écran. */
.pp-px-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-px-k { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border: var(--bw) solid var(--hair);
  border-radius: var(--r); background: var(--panel2); min-width: 0; }
.pp-px-k .k-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-px-k .k-val { font-family: var(--mono); font-size: var(--fs-metric); font-weight: var(--fw-semibold); color: var(--tx); line-height: 1.1; }
.pp-px-k .k-note { font-size: var(--fs-sm); color: var(--tx2); }
.pp-px-k.fort { border-color: var(--accent-dim); }
.pp-px-k.fort .k-val { color: var(--accent); }
.pp-px-k.alerte { border-color: var(--warn-line); }
.pp-px-k.alerte .k-val { color: var(--warn-tx); }
.pp-px-jauge { gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-px-jauge .bar { flex: 1; }
.pp-px-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.pp-px-bloc { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pp-px-courbe { display: flex; align-items: flex-end; gap: 3px; height: 80px; }
.pp-px-jour { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; text-align: center; }
.pp-px-jour i { display: block; border-radius: 2px 2px 0 0; background: var(--accent); min-height: 2px; }
.pp-px-jour span { font-size: var(--fs-micro); color: var(--tx3); overflow: hidden; }
.pp-px-jour.vide i { background: var(--hair); }
.pp-px-mini { width: 100%; }
.pp-px-mini td { padding: 4px var(--sp-2); border-bottom: var(--bw) solid var(--hair); }
.pp-px-mini td.mono { text-align: right; white-space: nowrap; }
input.input.pp-px-court { width: 96px; max-width: 96px; flex: none; }
.pp-px-champ .input, .pp-px-champ select { width: 100%; min-width: 0; box-sizing: border-box; }
.pp-px-tels { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-px-tel { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--hair); border-radius: var(--r); background: var(--panel2); }
.pp-px-tel .row { gap: var(--sp-2); }
.pp-px-tel-nom { font-family: var(--mono); font-size: var(--fs-lg, 1.05rem); }
.pp-px-champs { display: grid; grid-template-columns: 1.1fr 1.1fr 1.1fr 1fr .7fr; gap: var(--sp-3); }
.pp-px-champs.pp-px-champs3 { grid-template-columns: 1fr 1.4fr 1.4fr; }
.pp-px-info { display: block; padding: 7px 0; color: var(--tx2); font-size: var(--fs-sm); }
.pp-px-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-px-champ > span:first-child { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-px-cont { display: flex; align-items: center; gap: var(--sp-2); color: var(--tx3); }
.pp-px-cont .input { min-width: 0; }
.pp-px-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pp-px-resultat { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--hair);
  border-radius: var(--r); background: var(--panel2); line-height: 1.8; }
.pp-px-lien { font-size: var(--fs-sm); word-break: break-all; }
.pp-px-err { color: var(--err-tx); }
.pp-px-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-px-regles { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--tx2); }
.pp-px-regles b { color: var(--tx); }
@media (max-width: 1100px) {
  .pp-px-kpis, .pp-px-champs, .pp-px-champs.pp-px-champs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-px-grille, .pp-px-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pp-px-kpis, .pp-px-grille, .pp-px-form, .pp-px-champs, .pp-px-champs.pp-px-champs3 { grid-template-columns: minmax(0, 1fr); }
  .pp-px-jour span { visibility: hidden; }
}


/* --- Le verrou rouge d'une automatisation ----------------------------------------
   Pendant qu'un scénario tourne sur le téléphone ouvert : voile sur l'image et
   sur le panneau de travail, gestes éteints. Rouge parce que c'est un interdit,
   pas une attente — un voile gris se lirait « chargement ». */
.dir-auto-voile { position: absolute; inset: 0; z-index: 5; display: grid; align-content: center; justify-items: center;
  gap: var(--sp-3); padding: var(--sp-5); text-align: center; color: #fff; font-size: var(--fs-sm); cursor: not-allowed;
  background: color-mix(in srgb, var(--err) 30%, rgba(0, 0, 0, .74)); border: 2px solid var(--err); backdrop-filter: blur(2px); }
.dir-auto-voile[hidden] { display: none; }
.dir-pont-voile { position: absolute; inset: 0; z-index: 5; display: grid; align-content: center; justify-items: center;
  gap: var(--sp-2); padding: var(--sp-5); text-align: center; color: #fff; font-size: var(--fs-sm); cursor: progress;
  background: color-mix(in srgb, var(--err) 16%, rgba(0, 0, 0, .45)); border: 2px solid color-mix(in srgb, var(--err) 70%, transparent); }
.dir-pont-voile[hidden] { display: none; }
/* Les voiles (automatisation, téléchargement) épousent les coins ARRONDIS de
   l'écran : leur bordure rouge suivait un rectangle, coupé aux coins (26/09). */
.dir-auto-voile, .dir-pont-voile { border-radius: inherit; }
.dir-pont-sablier { font-size: 30px; line-height: 1; animation: dir-pouls 1.6s var(--ease) infinite; }
.dir-pont-txt { margin: 0; font-weight: 600; line-height: 1.45; max-width: 26ch; }
.dir-pont-chrono { font-family: var(--mono); color: rgba(255, 255, 255, .75); }
.dir-auto-emo { font-size: 40px; line-height: 1; }
.dir-auto-txt { margin: 0; font-weight: 600; line-height: 1.45; }
.dir-auto-barre { width: 70%; height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .25); overflow: hidden; }
.dir-auto-barre i { display: block; height: 100%; width: var(--pc, 0%); background: #fff; transition: width .3s var(--ease); }
#dir-travail { position: relative; }
.dir-auto-pan { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--sp-5); text-align: center;
  color: #fff; font-size: var(--fs-sm); line-height: 1.5; border-radius: var(--r-sm); border: 2px solid var(--err);
  background: color-mix(in srgb, var(--err) 24%, rgba(0, 0, 0, .72)); cursor: not-allowed; }
.dir-auto-pan[hidden] { display: none; }
.dir-auto-pan p { margin: 0; max-width: 32ch; }
.dir.automatisation .dir-geste, .dir.automatisation .dir-clavier .btn { opacity: .4; pointer-events: none; }
.dir.automatisation .tel-ecran { cursor: not-allowed; }
.dir-cont-auto { font-family: var(--sans); color: var(--tx); border-top: var(--bw) solid var(--hair); border-radius: 0;
  margin-top: var(--sp-1); padding-top: var(--sp-1); height: calc(var(--h-dd-item) + var(--sp-1)); }
.dir-cont-auto + .dir-cont-auto { border-top: 0; margin-top: 0; padding-top: 0; height: var(--h-dd-item); }
.dir-cont-auto.danger { color: var(--err-tx); }

/* --- Page Automatisations : la carte « Scénarios » ------------------------------- */
.pp-auto-scen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-auto-s { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); background: var(--panel2); cursor: pointer; text-align: left; color: var(--tx); font: inherit; }
.pp-auto-s:hover { border-color: var(--accent); }
.pp-auto-s.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.pp-auto-s b { display: block; }
.pp-auto-s small { display: block; color: var(--tx3); font-size: var(--fs-note); line-height: 1.5; }
.pp-auto-s .pp-auto-detruit { color: var(--err-tx); }
/* ── Mon travail : ce que J'AI fait ────────────────────────────────────────
   Quatre chiffres du jour, puis deux tables. Classes préfixées `pp-mt-`,
   jamais empruntées à Équipe — une classe manquante ne lève jamais. */
.pp-mt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.pp-mt-kpi { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3); border: var(--bw) solid var(--hair);
  border-radius: var(--r-sm); background: var(--panel2); }
.pp-mt-kpi .k-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-mt-kpi .k-val { font-family: var(--mono); font-size: var(--fs-metric); font-weight: var(--fw-semibold); color: var(--tx); }
.pp-mt-equipe { margin-top: var(--sp-3); }
.pp-mt-vide td { color: var(--tx3); }
.pp-mt-auj td { background: var(--panel2); }


/* ── Le centre de notifications : sur toutes les pages, en bas à droite ─────
   Une pastille ronde, discrète, et un panneau qui garde ce qu'un toast n'a
   montré qu'une seconde. Classes préfixées `pp-notif-`, jamais empruntées.
   La pastille occupe le coin des toasts du système : ils remontent au-dessus
   d'elle, sinon le premier toast la couvrirait — et le bouton pour le relire
   avec. C'est la seule règle du système retouchée ici, et c'est un décalage,
   pas un style. */
.toasts { bottom: 74px; }
.pp-notif { position: fixed; right: 22px; bottom: 22px; z-index: var(--z-dd); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); }
.pp-notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: var(--bw) solid var(--hair); background: var(--elev); color: var(--tx2); cursor: pointer;
  box-shadow: var(--shadow-2); transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); }
.pp-notif-btn svg { width: 18px; height: 18px; }
.pp-notif-btn:hover, .pp-notif-btn[aria-expanded="true"] { color: var(--tx); border-color: var(--accent); }
.pp-notif-btn:active { transform: translateY(1px); }
.pp-notif-btn.a-lire { color: var(--tx); }
/* Le badge dit le NOMBRE de non-lues : un point seul dirait « il y a quelque
   chose » sans dire combien, et cinquante refus valent d'être comptés. */
.pp-notif-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: #fff; background: var(--err); border: 2px solid var(--bg); line-height: 1; }
.pp-notif-badge[hidden] { display: none; }
.pp-notif-pan { width: min(380px, calc(100vw - 32px)); max-height: min(60vh, 520px); display: flex; flex-direction: column; padding: 0;
  box-shadow: var(--shadow-2); animation: pp-notif-monte var(--t-state) var(--ease) both; }
.pp-notif-pan[hidden] { display: none; }
.pp-notif-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-base); }
.pp-notif-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.pp-notif-item { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-sm); color: var(--tx2); }
.pp-notif-item:last-child { border-bottom: 0; }
.pp-notif-item.nonlu { color: var(--tx); background: var(--panel2); }
.pp-notif-item time { font-size: var(--fs-note); color: var(--tx3); padding-top: 2px; white-space: nowrap; }
.pp-notif-txt { line-height: 1.45; overflow-wrap: anywhere; }
.pp-notif-item .badge { height: 18px; font-size: var(--fs-micro); }
.pp-notif-vide { margin: 0; padding: var(--sp-5) var(--sp-4); font-size: var(--fs-sm); color: var(--tx3); text-align: center; }
.pp-notif-vide[hidden] { display: none; }
@keyframes pp-notif-monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-notif-pan { animation: none; } }
@media (max-width: 720px) { .pp-notif { right: 16px; bottom: 16px; } .toasts { bottom: 68px; } }

/* ── Les remises : la story ou la vidéo du compte, vue avant d'être envoyée ──
   L'aperçu est au format du téléphone (9:16), à gauche ; le nom, l'état et
   les deux boutons à droite. « Envoyer » consomme : il reste le bouton plein,
   « Autre story » le bouton discret. */
.dir-remise { display: flex; flex-direction: column; gap: var(--sp-2); }
.dir-remise .row { display: flex; align-items: center; gap: var(--sp-3); }
.dir-remise .row .help { flex: 1 1 auto; min-width: 0; }
.dir-remise-apercu { display: flex; gap: var(--sp-3); align-items: flex-start; }
.dir-remise-media { flex: 0 0 auto; width: 132px; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border-radius: var(--r-sm); border: var(--bw) solid var(--accent); background: var(--panel); }
.dir-remise-d { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.dir-remise-nom { max-width: 100%; font-size: var(--fs-code); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-remise-a { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.dir-remise-msg { margin: 0; font-size: var(--fs-note); color: var(--warn-tx); }
.dir-remise-msg.ok { color: var(--ok-tx); }
.dir-remise-fait { display: flex; align-items: center; gap: var(--sp-2); }
.dir-remise-attente { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--tx2); }
.dir-remise-chrono { font-family: var(--mono); color: var(--tx); font-feature-settings: "tnum" 1; margin-left: auto; }
.dir-remise-rond { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent-dim); border-top-color: var(--accent); animation: dir-remise-tourne .9s linear infinite; }
@keyframes dir-remise-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dir-remise-rond { animation: none; } }
@media (max-width: 520px) { .dir-remise-apercu { flex-direction: column; } .dir-remise-media { width: 100%; max-width: 220px; } }

/* DÉMARRER, DISCRET : un bouton sobre, un triangle vert devant le mot. */
.btn.dir-demarrer { display: inline-flex; align-items: center; gap: 6px; }
.dir-play { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--ok, #22c55e); display: inline-block; }

/* LA DÉTECTION DE L'ÉTAPE (25 septembre 2026), sous la tête de l'assistant :
   ✅ reconnue, ⏭️ plus loin, ↩️ en arrière, ❔ inconnue — et ses boutons. */
.dir-assist-detect { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2);
  font-size: var(--fs-note); color: var(--tx2); }
.dir-assist-detect[hidden] { display: none; }
.dir-det { min-width: 0; }
.dir-det.ok { color: var(--ok-tx); }
.dir-det.avance { color: var(--warn-tx); }
.dir-det.retour { color: var(--tx); }
.dir-det-a { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-left: auto; }
.dir-det-rond { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--accent); animation: dir-det-tourne .8s linear infinite; flex: 0 0 auto; }
@keyframes dir-det-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dir-det-rond { animation: none; } }
.btn.dir-nav-ico.on { border-color: var(--accent); color: var(--accent); }

/* CRÉER UNE TÂCHE (26 septembre 2026) — propriétaire seul. */
.dir-cr { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.dir-cr > .btn { align-self: flex-start; }
.dir-cr-form { display: flex; gap: var(--sp-2); align-items: center; }
.dir-cr-form[hidden] { display: none; }
.dir-cr-form .input { flex: 1 1 auto; min-width: 0; }
.dir-cr-form .dir-cr-emo { flex: 0 0 52px; text-align: center; }
.dir-tache { position: relative; }
.dir-tache-statut { position: absolute; bottom: 6px; right: 8px; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--ls-caps); color: var(--warn-tx); border: var(--bw) solid var(--warn-tx);
  border-radius: var(--r-xs); padding: 1px 5px; }
.dir-cr-etape { display: flex; flex-direction: column; gap: var(--sp-2); }
.dir-cr-etape .row { display: flex; align-items: center; gap: var(--sp-2); }

/* Le bandeau de l'étape en cours : « 3 / 8 » puis le nom, en clair. */
.dir-bandeau { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dir-bandeau .dir-proc-prog { flex: 0 0 auto; font-family: var(--mono); font-size: var(--fs-note); color: var(--tx2);
  padding: 2px 6px; border: var(--bw) solid var(--line); border-radius: var(--r-xs); }
.dir-bandeau .dir-nav-etape { flex: 1 1 auto; min-width: 0; margin: 0; text-align: left; white-space: normal;
  font-size: var(--fs-md, 15px); font-weight: var(--fw-semibold); color: var(--tx); line-height: 1.3; }

/* 🗑 La corbeille d'une étape (tâche en création) : discrète, rouge au survol. */
.dir-etape-suppr { margin-left: var(--sp-1); opacity: .55; }
.dir-etape-suppr:hover { opacity: 1; color: var(--err); }
.dir-etape-crayon { margin-left: var(--sp-1); opacity: .55; font-size: 12px; }
.dir-etape-crayon:hover { opacity: 1; }
.dir-etape-crayon + .dir-etape-suppr { margin-left: var(--sp-1); }
.dir-etape-edit { flex: 1 1 auto; min-width: 0; height: 26px; padding: 2px 6px; font-size: var(--fs-sm); }

/* 📸 Le statut du compte lu à l'écran (étape « lire_statut »). */
.dir-statut { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.dir-statut .row { display: flex; align-items: center; gap: var(--sp-2); }
.dir-statut-resume { margin: 0; font-weight: var(--fw-semibold); }
.dir-statut-resume.ok { color: var(--ok-tx); }
.dir-statut-resume.alerte { color: var(--warn-tx); }
.dir-statut-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dir-statut-lignes li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-note); color: var(--tx); }
.dir-statut-lignes li.alerte b { color: var(--warn-tx); text-transform: uppercase; font-size: var(--fs-micro); }
.dir-statut > .btn { align-self: flex-start; }

/* 🔢 Le numéro du conteneur à toucher (étape « conteneur »). */
.dir-conteneur-a-toucher { margin: var(--sp-2) 0 0; font-size: var(--fs-md, 15px); color: var(--tx); }
.dir-conteneur-a-toucher b { color: var(--accent); font-family: var(--mono); }

/* L'assistant : son rôle en deux mots (26/09). « Étape faite » est sur la ligne de navigation. */
/* Le rôle a la police de « ASSISTANT » (`.eyebrow`), en blanc. */
.dir-assist-role { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-bold); color: var(--tx); line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.dir-assist-etat { display: block; margin-top: 2px; }
.dir-assist-etat:empty { display: none; }
.dir-nav #dir-suiv { flex: 0 0 auto; }
#dir-proc.pas-demarre #dir-suiv, #dir-proc.en-pause #dir-suiv { opacity: .45; pointer-events: none; }
@container (max-width: 620px) { .dir-assist-tete .dir-raccourci { display: none; } }
.dir-assist-tete .eyebrow { margin-bottom: 0; }
.dir-assist-tete .eyebrow::after { display: none; }
/* Le petit trait blanc entre « ASSISTANT » et son rôle. */
.dir-assist-sep { flex: 0 0 14px; height: 1px; background: var(--tx); opacity: .8; }

/* 🔄 Le conteneur a changé sur le téléphone : bien visible, en tête du panneau. */
.dir-bascule { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); border: 2px solid var(--accent); background: var(--accent-dim);
  color: var(--tx); font-size: var(--fs-sm); }
.dir-bascule[hidden] { display: none; }
.dir-bascule > span { flex: 1 1 auto; min-width: 0; }
.dir-bascule.alerte { border-color: var(--warn-tx); background: var(--warn-bg, rgba(245,158,11,.12)); }
.dir-bascule .btn { flex: 0 0 auto; }

/* 🧭 Les propositions de l'assistant au-delà de la première : repliées. */
.dir-assist-autres { margin-top: var(--sp-1); }
.dir-assist-autres summary { cursor: pointer; font-size: var(--fs-meta); color: var(--tx3); }
.dir-assist-autres[open] summary { margin-bottom: var(--sp-1); }

/* 📊 Le nombre de posts, avant et après. */
.dir-posts { margin: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--tx); }
.dir-posts.ok { color: var(--ok-tx); font-weight: var(--fw-semibold); }
.dir-posts.alerte { color: var(--warn-tx); }

/* ✅ « Terminer la création » : vert, bordé, bien visible. */
.btn.dir-cr-terminer { color: var(--ok-tx); border: var(--bw) solid var(--ok); background: var(--ok-bg); font-weight: var(--fw-semibold); }
.btn.dir-cr-terminer:hover { border-color: var(--ok); box-shadow: 0 0 12px -4px var(--ok); }

/* ⤼ « Si elle apparaît » : un badge SOUS le nom ; les boutons ⤼ ✏️ 🗑 dans un
   bloc de largeur fixe, pour que la colonne INSTA / ALESIA s'aligne (27/09). */
.dir-etape-facult { display: table; margin-top: 2px; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--ls-caps); color: var(--tx3); border: var(--bw) solid var(--line); border-radius: var(--r-xs); padding: 0 5px; }
.dir-etape-act { flex: 0 0 auto; display: inline-flex; justify-content: flex-end; align-items: center; gap: 2px; margin-left: var(--sp-2); }
.dir-etape-act:empty { display: none; }
.dir-etape-act .dir-etape-facult-b, .dir-etape-act .dir-etape-crayon, .dir-etape-act .dir-etape-suppr { margin-left: 0; width: 26px; }
.dir-etape-facult-b { opacity: .45; font-size: 12px; }
.dir-etape-facult-b.on { opacity: 1; color: var(--accent); }
.dir-etape-facult-b:hover { opacity: 1; }

/* 🔀 Ranger les tuiles du lanceur (propriétaire, appui long) — 27/09/2026. */
[data-proprio="1"] .dir-tache { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.dir-taches.range .dir-tache { cursor: grab; touch-action: none; animation: pp-remue .26s ease-in-out infinite alternate; }
.dir-taches.range .dir-tache:nth-child(2n) { animation-delay: -.13s; animation-direction: alternate-reverse; }
.dir-taches .dir-tache.glisse { position: relative; z-index: 20; cursor: grabbing; animation: none; pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transition: none; }
@keyframes pp-remue { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
@media (prefers-reduced-motion: reduce) { .dir-taches.range .dir-tache { animation: none; outline: 1px dashed var(--line, #999); } }

/* --- Écrans étroits : les pages d'administration (27/09/2026) -----------------
   Le système replie la barre latérale et les onglets ; nos pages n'avaient
   presque rien : formulaires à trois colonnes jamais repliés (fiche d'un
   membre, créneau), barre du haut à hauteur fixe qui débordait dès trois
   outils, en-têtes de carte serrés contre leurs filtres. */
.pp-au-onglets { margin-bottom: calc(-1 * var(--sp-2)); }
@media (max-width: 900px) {
  .pp-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pp-form { grid-template-columns: 1fr; }
  .top { height: auto; min-height: var(--h-top); flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .top-right { flex-wrap: wrap; gap: var(--sp-2); }
  .pp-int-resume { white-space: normal; }
  .pp-carte { padding: var(--sp-3) var(--sp-4); }
  .pp-carte > .row > .help { flex-basis: 100%; }
  .pp-eq-filtres { width: 100%; }
  .pp-eq-filtres .select, .pp-eq-filtres .dd { flex: 1 1 100%; min-width: 0; }
  .view-head { flex-wrap: wrap; gap: var(--sp-2); }
  .pp-mt-kpis { grid-template-columns: 1fr 1fr; }
}

/* --- Équipe : la page refaite (27/09/2026) ------------------------------------
   Deux sections titrées (Production, Membres), une ligne de chiffres, une
   grille de cartes de même poids. */
.pp-eq-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.pp-eq-sec-tete { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.pp-eq-sec-tete h2 { margin: 0; font-size: var(--fs-lg, 1.05rem); font-weight: var(--fw-semibold, 600); color: var(--tx); }
.pp-eq-sec-tete .push { margin-left: auto; }
.pp-eq-prod { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.pp-eq-kpis5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-eq-k { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border: var(--bw) solid var(--hair);
  border-radius: var(--r-sm); background: var(--panel); min-width: 0; }
.pp-eq-k .k-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-eq-k .k-val { font-family: var(--mono); font-size: var(--fs-metric); font-weight: var(--fw-semibold); color: var(--tx); line-height: 1.1; }
.pp-eq-k .k-note { font-size: var(--fs-sm); color: var(--tx2); }
.pp-eq-k.fort { border-color: var(--accent-dim); }
.pp-eq-k.fort .k-val { color: var(--accent); }
.pp-eq-k.alerte .k-val { color: var(--warn-tx); }
.pp-eq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap, var(--sp-4)); align-items: stretch; }
.pp-eq-grille > .card { min-width: 0; }
.pp-eq-grille > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* seule sur sa rangée : pleine largeur */
.pp-eq-grille h3 { margin: 0; }
.pp-eq-tbl { margin-top: var(--sp-3); }
.pp-eq-courbe { display: flex; align-items: stretch; gap: 6px; height: 170px; margin-top: var(--sp-4); }
.pp-eq-barre { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.pp-eq-barre i { display: block; width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; }
.pp-eq-barre.vide i { background: var(--hair); opacity: 1; }
.pp-eq-barre.auj i { opacity: 1; box-shadow: 0 0 12px -2px var(--accent-glow); }
.pp-eq-barre b { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; color: var(--tx); min-height: 1.2em; }
.pp-eq-barre span { font-size: var(--fs-micro); color: var(--tx3); white-space: nowrap; min-height: 1.2em; }
.pp-eq-barre.auj span { color: var(--tx); }
.pp-eq-blocs { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.pp-eq-bloc { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "n t m" "n r r";
  align-items: center; gap: 4px var(--sp-3); padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--hair);
  border-left: 3px solid var(--warn-line); border-radius: var(--r-sm); background: var(--panel2); }
.pp-eq-bloc-n { grid-area: n; align-self: stretch; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); background: var(--warn-bg); color: var(--warn-tx); font-weight: 600; }
.pp-eq-bloc-t { grid-area: t; min-width: 0; display: flex; flex-direction: column; }
.pp-eq-bloc-t b { font-weight: 500; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-eq-bloc-t small { font-size: var(--fs-micro); color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; }
.pp-eq-bloc-r { grid-area: r; display: flex; flex-wrap: wrap; gap: 4px; }
.pp-eq-bloc-m { grid-area: m; font-size: var(--fs-sm); color: var(--tx2); white-space: nowrap; }
@media (max-width: 1100px) {
  .pp-eq-kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-eq-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pp-eq-kpis5 { grid-template-columns: 1fr 1fr; }
  .pp-eq-k { padding: var(--sp-3); }
}

/* ── Le survol, plus lisible — pages d'administration seulement ───────────
   Le système de design éclaire la ligne survolée avec `--hover-cell`, qui ne
   se distingue presque pas du fond en thème sombre (#0f0f14 sur #0c0c0f).
   Ici : un voile clair en thème sombre, un voile sombre en thème clair, et un
   liseré d'accent sur la première cellule. Le halo des cartes est dans
   chassis.js. 🔴 Jamais sur Pilotage ni Appareils (`data-page` du <body>). */
:root { --pp-survol: rgba(255, 255, 255, .055); --pp-survol-bord: var(--hover-border); }
:root[data-theme="light"] { --pp-survol: rgba(15, 23, 42, .05); }
/* Posé sur les CELLULES, en image : une colonne collante (« Ouvrir ») a son
   propre fond, qu'un fond de ligne ne traverse pas. */
body:not([data-page="console"]):not([data-page="mur"]) main tbody tr:hover > td { background-image: linear-gradient(var(--pp-survol), var(--pp-survol)); }
body:not([data-page="console"]):not([data-page="mur"]) main tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
body:not([data-page="console"]):not([data-page="mur"]) main tbody tr > td:first-child { transition: box-shadow var(--t-fast) var(--ease); }
/* Les tuiles et les blocs dans une carte : la bordure se lève au survol. */
:is(.pp-eq-k, .pp-eq-kpi, .pp-mt-kpi, .pp-px-k, .pp-px-tel, .pp-res-tel, .pp-au-ecr, .pp-au-proc) {
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
:is(.pp-eq-k, .pp-eq-kpi, .pp-mt-kpi, .pp-px-k, .pp-px-tel, .pp-res-tel, .pp-au-ecr, .pp-au-proc):hover {
  border-color: var(--pp-survol-bord); background-image: linear-gradient(var(--pp-survol), var(--pp-survol)); }
@media (prefers-reduced-motion: reduce) {
  body main tbody tr > td:first-child,
  :is(.pp-eq-k, .pp-eq-kpi, .pp-mt-kpi, .pp-px-k, .pp-px-tel, .pp-res-tel, .pp-au-ecr, .pp-au-proc) { transition: none; }
}

/* 📈 Apprentissage : ce que chaque séance apprend encore (automatisations.js). */
.pp-au-barres { letter-spacing: 1px; color: var(--accent); }
.pp-au-nv { font-size: var(--fs-micro); color: var(--warn-tx); }
.pp-au-nv.ok { color: var(--ok); }
.pp-au-tag.nv b { color: var(--accent); }
.pp-au-nv-l { margin: var(--sp-1) 0 var(--sp-3); }

/* ── Planning › AI Agent : les règles du futur planificateur ──────────────
   Préfixe `pp-pl-ag-`, à lui seul. Une règle = une ligne : ce qu'elle dit et
   pourquoi, sa valeur, son origine (posée, connue, tenue, à décider). */
.pp-pl-onglets { margin-bottom: calc(-1 * var(--sp-2)); }
.pp-pl-ag-intro { margin: var(--sp-2) 0 0; }
.pp-pl-ag-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.pp-pl-ag-kpis > .help { grid-column: 1 / -1; margin: 0; }
.pp-pl-ag-k { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border: var(--bw) solid var(--hair);
  border-radius: var(--r); background: var(--panel2); min-width: 0; }
.pp-pl-ag-k .k-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-pl-ag-k .k-val { font-family: var(--mono); font-size: var(--fs-metric); font-weight: var(--fw-semibold); color: var(--tx); line-height: 1.1; }
.pp-pl-ag-k .k-note { font-size: var(--fs-sm); color: var(--tx2); }
.pp-pl-ag-k.fort { border-color: var(--accent-dim); }
.pp-pl-ag-k.fort .k-val { color: var(--accent); }
.pp-pl-ag-k.alerte { border-color: var(--warn-line); }
.pp-pl-ag-k.alerte .k-val { color: var(--warn-tx); }
.pp-pl-ag-alertes { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 14px);
  border: var(--bw) solid var(--warn-line); border-radius: var(--r-sm); background: var(--warn-bg);
  color: var(--warn-tx); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-1); }
.pp-pl-ag-part { white-space: nowrap; font-family: var(--mono); font-size: var(--fs-sm); color: var(--tx2); }
.pp-pl-ag-part .bar { display: inline-block; width: 90px; vertical-align: middle; margin-right: var(--sp-2); }
.pp-pl-ag-regles { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.pp-pl-ag-regle { display: grid; grid-template-columns: minmax(0, 1fr) 220px 150px; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3); margin: 0 calc(-1 * var(--sp-3)); border-top: var(--bw) solid var(--hair);
  border-radius: var(--r-sm); transition: background var(--t-quick) var(--ease); }
/* La ligne survolée ressort : libellé, valeur et origine se lisent d'un bloc. */
.pp-pl-ag-regle:hover, .pp-pl-ag-regle:focus-within { background: var(--panel2); }
.pp-pl-ag-regle:hover + .pp-pl-ag-regle, .pp-pl-ag-regle:hover { border-top-color: transparent; }
.pp-pl-ag-regle:first-child { border-top: 0; }
.pp-pl-ag-regle[data-origine="a_decider"] .pp-pl-ag-lib b { color: var(--warn-tx); }
.pp-pl-ag-lib { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-pl-ag-lib b { font-weight: var(--fw-medium); color: var(--tx); }
.pp-pl-ag-si { color: var(--tx3); }
.pp-pl-ag-val { min-width: 0; }
.pp-pl-ag-val > .input { width: 100%; }
.pp-pl-ag-nombre { display: flex; align-items: center; gap: var(--sp-2); }
.pp-pl-ag-val .pp-pl-ag-nombre > .input { width: 96px; min-width: 0; flex: 0 0 96px; font-family: var(--mono); }
.pp-pl-ag-nombre .help { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pl-ag-val .opts { flex-direction: column; align-items: stretch; }
.pp-pl-ag-val .opts button { justify-content: flex-start; text-align: left; }
.pp-pl-ag-fixe { font-size: var(--fs-sm); color: var(--tx2); }
/* 🗓️ Notre process (5/10/2026) : la vie d'un compte, dessinée d'après les valeurs. */
.pp-pl-ag-process { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.pp-pl-ag-frise { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: wrap; }
.pp-pl-ag-etape { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--hair); border-radius: var(--r); background: var(--panel2); }
.pp-pl-ag-etape .e-t { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.pp-pl-ag-etape .e-v { font-family: var(--mono); font-weight: var(--fw-semibold); color: var(--tx); }
.pp-pl-ag-etape .e-d { font-size: var(--fs-sm); color: var(--tx2); }
.pp-pl-ag-etape.gp { border-color: var(--warn-line); }
.pp-pl-ag-etape.fort { border-color: var(--accent-dim); }
.pp-pl-ag-etape.fort .e-v { color: var(--accent); }
.pp-pl-ag-fleche { align-self: center; color: var(--tx3); }
.pp-pl-ag-seance { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.pp-pl-ag-seance .s-t { font-weight: var(--fw-medium); color: var(--tx); margin-right: var(--sp-2); }
.pp-pl-ag-seance .s-p { padding: 2px var(--sp-2); border: var(--bw) solid var(--hair); border-radius: var(--r-sm); color: var(--tx2); }
.pp-pl-ag-seance .s-p.fort { border-color: var(--accent-dim); color: var(--accent); font-weight: var(--fw-medium); }
.pp-pl-ag-points { margin: 0; padding-left: calc(var(--sp-4) + 2px); display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-sm); color: var(--tx2); }
.pp-pl-ag-points b { color: var(--tx); font-weight: var(--fw-medium); }
.pp-pl-ag-montee { margin-top: var(--sp-4); min-width: 0; max-width: 100%; }
.pp-pl-ag-montee .tbl-wrap { max-width: 100%; overflow-x: auto; }
.pp-pl-ag-montee summary { cursor: pointer; font-size: var(--fs-sm); color: var(--tx2); }
.pp-pl-ag-montee .tbl-wrap { margin-top: var(--sp-3); }
.pp-pl-ag-filtres { margin: var(--sp-2) 0; }
.pp-pl-ag-themes { overflow-x: clip; }
/* 🎨 LISIBILITÉ ET COULEUR (5/10/2026, demande de l'utilisateur : « on voit mal
   les écritures grisées »). Tout l'onglet AI Agent (`.pp-pl-ag`) : titres en
   MAJUSCULES au dégradé bleu roi → cyan → vert électrique, un trait du même
   dégradé dessous, les textes en clair (plus de gris), de l'air sous les titres.
   L'emoji garde sa couleur : le dégradé ne s'applique qu'au texte. */
.pp-pl-ag { --ag-degrade: linear-gradient(90deg, #3a5bff 0%, #00c8ff 50%, #22f59a 100%); }
:root[data-theme="light"] .pp-pl-ag { --ag-degrade: linear-gradient(90deg, #1f3fd8 0%, #0086b3 50%, #079a5a 100%); }
.pp-pl-ag .card > .row:first-child { padding-bottom: 16px; margin-bottom: 16px; position: relative; }
.pp-pl-ag .card > .row:first-child h3 { margin: 0; line-height: 1.2; }
.pp-pl-ag .card > .row:first-child + * { margin-top: 0; }    /* même espace au-dessus et au-dessous du trait */
.pp-pl-ag .card > .row:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--ag-degrade); opacity: .85; }
/* Titres : en clair, MAJUSCULES, gras, un léger halo teal autour des lettres (pas de dégradé). */
.pp-pl-ag .card > .row:first-child h3 { text-transform: uppercase; letter-spacing: .07em; font-weight: var(--fw-bold);
  color: var(--tx); text-shadow: 0 0 10px rgba(61, 214, 195, .45), 0 0 2px rgba(61, 214, 195, .35); }
:root[data-theme="light"] .pp-pl-ag .card > .row:first-child h3 { text-shadow: 0 0 8px rgba(15, 155, 140, .25); }
.pp-pl-ag .pp-pl-ag-emo { -webkit-text-fill-color: initial; color: var(--tx); margin-right: 4px; text-shadow: none; }
/* Séparateurs plus visibles (5/10/2026) : entre les règles et entre les lignes des tableaux de l'onglet. */
.pp-pl-ag { --ag-filet: #3a3a44; }
:root[data-theme="light"] .pp-pl-ag { --ag-filet: #c3c9d4; }
.pp-pl-ag .pp-pl-ag-regle { border-top-color: var(--ag-filet); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
/* Au survol, la règle s'ÉCLAIRCIT et ses filets RESTENT (5/10/2026 : effacés, on voyait mal). */
.pp-pl-ag .pp-pl-ag-regle:hover, .pp-pl-ag .pp-pl-ag-regle:focus-within { background: rgba(255, 255, 255, .06); }
:root[data-theme="light"] .pp-pl-ag .pp-pl-ag-regle:hover,
:root[data-theme="light"] .pp-pl-ag .pp-pl-ag-regle:focus-within { background: rgba(20, 30, 60, .05); }
.pp-pl-ag .pp-pl-ag-regle:hover, .pp-pl-ag .pp-pl-ag-regle:hover + .pp-pl-ag-regle { border-top-color: var(--ag-filet); }
.pp-pl-ag .pp-pl-ag-regle:first-child { border-top: 0; }
.pp-pl-ag table tbody tr td { border-bottom: var(--bw) solid var(--ag-filet); padding-top: 12px; padding-bottom: 12px; }
.pp-pl-ag table tbody tr:last-child td { border-bottom: 0; }
.pp-pl-ag .help, .pp-pl-ag .pp-pl-ag-si, .pp-pl-ag .k-note, .pp-pl-ag .k-lbl, .pp-pl-ag .e-d, .pp-pl-ag .e-t,
.pp-pl-ag .s-p, .pp-pl-ag .pp-pl-ag-points, .pp-pl-ag .pp-pl-ag-fixe, .pp-pl-ag-montee summary { color: var(--tx); }
.pp-pl-ag .pp-pl-ag-si { font-style: italic; opacity: .8; }
.pp-pl-ag .card > p.help { line-height: 1.55; }
/* Les règles : 1 px de plus (nom, explication, « Si enfreinte »). */
.pp-pl-ag .pp-pl-ag-lib b { font-size: calc(var(--fs-body) + 1px); }
.pp-pl-ag .pp-pl-ag-lib .help { font-size: calc(var(--fs-sm) + 1px); line-height: 1.5; }
.pp-pl-ag .pp-pl-ag-k.fort .k-val, .pp-pl-ag .pp-pl-ag-etape.fort .e-v {
  background: var(--ag-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-pl-ag .pp-pl-ag-k.fort, .pp-pl-ag .pp-pl-ag-etape.fort { border-color: #00c8ff66; }
.pp-pl-ag .pp-pl-ag-occ-l .bar > i { background: var(--ag-degrade); }   /* les bulles des badges débordaient à droite : 452 px pour 390, 1759 pour 1440 */
/* ⏱️ L'occupation mesurée de chaque iPhone. */
.pp-pl-ag-occ { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-pl-ag-occ-l { display: grid; grid-template-columns: 48px 160px 64px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.pp-pl-ag-occ-l .bar { width: 100%; }
.pp-pl-ag-occ-l .o-v { font-family: var(--mono); font-size: var(--fs-sm); color: var(--tx); }
.pp-pl-ag-ecart { color: var(--warn-tx); font-weight: var(--fw-medium); }
.pp-pl-ag-app { color: var(--accent); font-weight: var(--fw-regular, 400); }
.pp-pl-ag-texte { width: 100%; resize: vertical; font-size: var(--fs-sm); }
.pp-pl-ag-regle[data-origine="proposee"] .pp-pl-ag-lib b { color: var(--accent); }
.pp-pl-ag-orig { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
@media (max-width: 1100px) {
  .pp-pl-ag-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pp-pl-ag-kpis { grid-template-columns: minmax(0, 1fr); }
  .pp-pl-ag-regle { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .pp-pl-ag-orig { justify-content: flex-start; }
  .pp-pl-ag-frise { flex-direction: column; }
  .pp-pl-ag-occ-l { grid-template-columns: 40px minmax(0, 1fr) 56px; }
  .pp-pl-ag-occ-l .help { grid-column: 1 / -1; }      /* les bulles des badges débordaient à droite (452 px pour 390) */
  .pp-pl-ag-frise > .pp-pl-ag-fleche { display: none; }
  .pp-pl-ag-etape { flex-basis: auto; }
}

/* 🪜 Apprentissage : la réussite à quatre niveaux, et la calibration (automatisations.js). */
.pp-au-niveaux, .pp-au-calib-l { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.pp-au-niv { display: inline-flex; flex-direction: column; min-width: 92px; padding: 4px var(--sp-2);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--panel2); }
.pp-au-niv small { font-size: var(--fs-micro); color: var(--tx3); text-transform: uppercase; letter-spacing: .04em; }
.pp-au-niv b { font-family: var(--mono); font-size: var(--fs-sm); color: var(--tx); }
.pp-au-niv.peu b { color: var(--tx3); }
.pp-au-calib { margin-bottom: var(--sp-3); }

/* ⏱ Le modem du téléphone ouvert (peindreIp) et « 📲 Cnn » (peindreOuvrir). */
.pp-ip { white-space: nowrap; font-feature-settings: "tnum" 1; }
.dir-cont-ouvrir { font-family: var(--mono); font-size: var(--fs-sm); padding-inline: 8px; }
.dir-bascule.bloque { border-color: var(--err); background: var(--err-bg); }

/* 🏷️ Les écrans du jeu de données (Automatisations › Apprentissage, 01/10/2026) :
   des LIGNES alignées en colonnes d'une famille à l'autre, pleine largeur ;
   la ligne survolée s'éclaire et un liseré d'accent pousse à gauche. */
.pp-au-couv { margin-bottom: var(--sp-4); }
.pp-cv-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.pp-cv-tete p { margin: 4px 0 0; }
.pp-cv-kpis { display: flex; gap: var(--sp-2); }
.pp-cv-kpis span { display: flex; flex-direction: column; padding: 6px 12px; border: var(--bw) solid var(--hair); border-radius: var(--r-sm);
  background: var(--panel2); min-width: 92px; }
.pp-cv-kpis b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pp-cv-kpis small { font-size: var(--fs-micro); color: var(--tx3); }
.pp-cv { display: flex; flex-direction: column; gap: 6px; }
.pp-cv-g { border: var(--bw) solid var(--hair); border-radius: var(--r-sm); background: var(--panel2); overflow: hidden; }
.pp-cv-l { display: grid; grid-template-columns: minmax(200px, 2.2fr) minmax(130px, 1.2fr) 90px 100px minmax(120px, 1.5fr) 80px;
  gap: var(--sp-3); align-items: center; padding: 7px var(--sp-4); }
.pp-cv-l > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-cv-span3 { grid-column: span 3; }
.pp-cv-sum { cursor: pointer; list-style: none; transition: background var(--t-fast) var(--ease); }
.pp-cv-sum::-webkit-details-marker { display: none; }
.pp-cv-sum:hover { background: var(--hover-row, color-mix(in srgb, var(--tx) 5%, transparent)); }
.pp-cv-sum > span:first-child { display: flex; align-items: center; gap: 8px; }
.pp-cv-sum small { color: var(--tx3); font-size: var(--fs-note); }
.pp-cv-caret { width: 7px; height: 7px; border-right: 1.5px solid var(--tx3); border-bottom: 1.5px solid var(--tx3);
  transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease); flex: none; }
.pp-cv-g[open] .pp-cv-caret { transform: rotate(45deg); }
.pp-cv-g[open] > .pp-cv-sum { border-bottom: var(--bw) solid var(--hair); }
.pp-cv-th { padding-top: 6px; padding-bottom: 4px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--tx3); }
.pp-cv-r { position: relative; font-size: var(--fs-sm); border-top: var(--bw) solid color-mix(in srgb, var(--hair) 55%, transparent);
  transition: background var(--t-fast) var(--ease); }
.pp-cv-r:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pp-cv-r.muet { color: var(--tx3); }
.pp-cv-l em { font-style: normal; font-variant-numeric: tabular-nums; margin-left: 8px; }
.pp-cv-jauge { display: inline-block; width: 64%; max-width: 120px; height: 6px; border-radius: 3px; background: var(--hair); vertical-align: middle; overflow: hidden; }
.pp-cv-jauge i { display: block; height: 100%; width: var(--p); background: var(--warn, #d9a400); border-radius: 3px;
  animation: pp-cv-pousse .6s var(--ease) both; }
.pp-cv-jauge.ok i { background: var(--ok, #22a55a); }
@keyframes pp-cv-pousse { from { width: 0; } to { width: var(--p); } }
.pp-cv-frac { font-variant-numeric: tabular-nums; }
.pp-cv-frac small { color: var(--tx3); }
.pp-cv-frac.ok { color: var(--ok, #22a55a); font-weight: 600; }
.pp-au-pret { color: var(--ok, #22a55a); font-weight: 600; }
@media (max-width: 900px) {
  .pp-cv-l { grid-template-columns: minmax(0, 1.6fr) minmax(90px, 1fr) 60px 60px; }
  .pp-cv-l > span:nth-child(5), .pp-cv-l > span:nth-child(6) { display: none; }
  .pp-cv-span3 { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-au-ecr::before, .pp-cv-r::before, .pp-au-ecr-img, .pp-cv-caret, .pp-cv-jauge i { transition: none; animation: none; }
}

/* Le détail d'une tâche (Apprentissage, 01/10/2026) : cinq mesures en cartes
   pleine largeur, la frise des séances, puis la table par étape. */
.pp-pr-corps { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.pp-pr-ms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.pp-pr-m { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: var(--bw) solid var(--hair); border-radius: var(--r-sm);
  background: var(--panel); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.pp-pr-m:hover { transform: translateY(-2px); border-color: var(--pp-survol-bord, var(--hair)); }
.pp-pr-m small { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--tx3); }
.pp-pr-m b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pp-pr-m em { font-style: normal; font-size: var(--fs-note); color: var(--tx3); }
.pp-pr-barre { height: 5px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.pp-pr-barre i { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--tx3); animation: pp-cv-pousse .6s var(--ease) both; }
.pp-pr-m.ok b { color: var(--ok, #22a55a); } .pp-pr-m.ok .pp-pr-barre i { background: var(--ok, #22a55a); }
.pp-pr-m.moyen b { color: var(--warn, #d9a400); } .pp-pr-m.moyen .pp-pr-barre i { background: var(--warn, #d9a400); }
.pp-pr-m.bas b { color: var(--danger, #e5484d); } .pp-pr-m.bas .pp-pr-barre i { background: var(--danger, #e5484d); }
.pp-pr-m.vide b { color: var(--tx3); }
.pp-pr-titre { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pp-pr-frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; }
.pp-pr-s { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: var(--r-sm);
  border: var(--bw) solid var(--hair); background: var(--panel); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.pp-pr-s:hover { transform: translateY(-2px); }
.pp-pr-s small { font-size: var(--fs-micro); color: var(--tx3); font-variant-numeric: tabular-nums; }
.pp-pr-s b { font-size: 16px; }
.pp-pr-s span { font-size: var(--fs-micro); color: var(--tx3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pr-s.ok { background: color-mix(in srgb, var(--ok, #22a55a) 10%, var(--panel)); } .pp-pr-s.ok b { color: var(--ok, #22a55a); }
.pp-pr-s.nv { background: color-mix(in srgb, var(--warn, #d9a400) 12%, var(--panel)); } .pp-pr-s.nv b { color: var(--warn, #d9a400); }
.pp-pr-s.pre b { color: var(--tx3); }
.pp-au-proc .tbl-wrap table { width: 100%; }
.pp-cv-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 var(--sp-3); font-size: var(--fs-note); color: var(--tx3); }
.pp-cv-legende b { color: var(--tx2, var(--tx)); margin-right: 5px; }
.pp-cv-legende .pp-cv-jauge { width: 34px; margin-right: 6px; }
@media (max-width: 900px) { .pp-pr-ms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pp-pr-m, .pp-pr-s, .pp-pr-barre i { transition: none; animation: none; } }
.pp-au-proc td .pp-au-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pp-au-proc td .pp-au-tag { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* LES BULLES DU BANDEAU S'OUVRENT VERS LE BAS (4 octobre 2026) : au-dessus,
   elles sortaient par le haut de la fenêtre, et centrées, par sa droite.
   Ancrées au bord droit du bouton, elles s'étendent vers la gauche. */
.top-right [data-tip]::after { bottom: auto; top: calc(100% + 7px); left: auto; right: 0;
  transform: translateY(-3px); }
.top-right [data-tip]:hover::after,
.top-right [data-tip]:focus-visible::after { transform: none; }

/* 🍏 La bannière façon macOS (`ppNotif.banniere`, 4 octobre 2026) : en haut à
   droite, au-dessus de toute surface, lecteur plein écran compris. */
.pp-banniere-pile { position: fixed; top: 14px; right: 14px; z-index: calc(var(--z-toast) + 1);
  display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); pointer-events: none; }
.pp-banniere { pointer-events: auto; cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
  box-sizing: border-box; width: 100%; padding: 11px 14px; border-radius: 14px; background: rgba(40, 40, 44, .82); color: #f2f2f4;
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; line-height: 1.4; animation: pp-banniere-entre .22s ease-out; transition: opacity .2s, transform .2s; }
.pp-banniere.part { opacity: 0; transform: translateX(16px); }
/* Le texte occupe le reste de la ligne et PEUT rétrécir (`min-width: 0`) : sans ça,
   un nom de fichier sans espace élargissait la bannière hors de son cadre. */
.pp-banniere-corps { flex: 1 1 auto; min-width: 0; }
.pp-banniere-titre { display: block; font-weight: 600; margin-bottom: 2px; overflow-wrap: anywhere; }
.pp-banniere-texte { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  color: rgba(242, 242, 244, .78); overflow-wrap: anywhere; }
.pp-banniere-texte[hidden] { display: none; }
.pp-banniere-ico { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; line-height: 1;
  font-size: 13px; font-weight: 700; color: #fff; background: #6b6b74; }
.pp-banniere.succes .pp-banniere-ico { background: #2fb37f; }
.pp-banniere.alerte .pp-banniere-ico { background: #e05555; }
@keyframes pp-banniere-entre { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.pp-banniere-action { margin-top: 8px; height: 26px; padding: 0 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .12); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; }
.pp-banniere-action:hover { background: rgba(255, 255, 255, .22); }

/* ── Comptes (5 octobre 2026) — `pp-co-`, jamais emprunté à un autre écran. */
.pp-co-table td { vertical-align: top; }
.pp-co-num { font-family: var(--mono); }
.pp-co-vide { color: var(--tx3); }
.pp-co-quand { color: var(--tx3); font-size: var(--fs-sm); }
.pp-co-alerte { color: var(--err-tx); font-size: var(--fs-sm); font-weight: 600; }
.pp-co-table:not(.etendu) .pp-co-ext { display: none; }
.pp-co-lien { color: inherit; text-decoration: none; }
.pp-co-lien:hover b { text-decoration: underline; }
/* 🗓️ Le plan de chaque iPhone (l'orchestrateur, 5/10/2026). */

/* ── Stratégie (11/10/2026) — strategie.html ─────────────────────────────── */
#st-racine { overflow-x: clip; }   /* les bulles des badges (data-tip) débordaient à droite */
#st-racine h3 { margin: 0; }
.pp-st-i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
  font-size: 12px; color: var(--tx2); background: var(--panel2); cursor: help; vertical-align: middle; }
.pp-st-i[data-tip]::after { white-space: normal; width: 260px; text-align: left; line-height: 1.4; }
/* La timeline de la vie d'un compte (11/10/2026) : un axe en jours, une barre par étape
   aussi large que sa fenêtre possible. */
.pp-st-frise { margin-top: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2); }
.pp-st-tl { display: grid; grid-template-columns: 180px 1fr 300px; min-width: 1150px; }
.pp-st-tl-nom { display: flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); color: var(--tx);
  border-bottom: 1px solid var(--hair); padding: 0 8px 0 0; min-height: 56px; }
.pp-st-tl-piste { position: relative; min-height: 56px; border-bottom: 1px solid var(--hair); }
.pp-st-tl-tete { min-height: 28px; }
.pp-st-tl-regle { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 0 6px 14px; color: var(--tx);
  border-bottom: 1px solid var(--hair); min-height: 52px; }
.pp-st-tl-th { min-height: 28px; font-size: var(--fs-note); color: var(--tx2); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.pp-st-tl-tete span { position: absolute; top: 4px; transform: translateX(-50%); padding: 0 4px; background: var(--panel); font-weight: var(--fw-semibold); color: var(--tx2); font-size: var(--fs-note); }
.pp-st-jour { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.pp-st-barre { position: absolute; top: 50%; transform: translateY(-50%); height: 30px; border-radius: 8px; min-width: 4px;
  background: var(--accent); display: flex; align-items: center; }
.pp-st-barre span { padding: 0 10px; white-space: nowrap; font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: #fff;   /* une ombre floue derrière le texte, pas un contour net (demande de l'utilisateur) */
  text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35); -webkit-font-smoothing: antialiased; }   /* ombre courte : le texte reste net */
.pp-st-barre.repos { background: linear-gradient(90deg, var(--tx3) var(--sur), transparent var(--sur)),
  repeating-linear-gradient(135deg, var(--tx3) 0 5px, var(--panel2) 5px 10px); }
/* Une couleur par type d'action. */
.pp-st-barre.creation { background: #14b8a6; }   /* photo + bio, compte public : la création continue */
.pp-st-barre.warmup { background: #22a55a; }
.pp-st-barre.warmup.clair { background: #22a55a99; }
.pp-st-barre.setup { background: #8b5cf6; }
.pp-st-barre.reel { background: #ea7a0c; }
.pp-st-barre.reel.suite { border-radius: 0 8px 8px 0; }
.pp-st-barre.reel.clair { background: #b45f0a; border-radius: 8px 0 0 8px; }
.pp-st-barre.story { background: #e1306c; }
.pp-st-barre.info { background: #2f80ed; }
.pp-st-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: var(--sp-3); color: var(--tx); font-size: var(--fs-note); }
.pp-st-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pp-st-legende i { width: 22px; height: 12px; border-radius: 4px; display: inline-block; }
.pp-st-legende i.creation { background: #14b8a6; }
.pp-st-legende i.repos { background: repeating-linear-gradient(135deg, var(--tx3) 0 3px, var(--panel2) 3px 6px); }
.pp-st-legende i.warmup { background: #22a55a; } .pp-st-legende i.setup { background: #8b5cf6; } .pp-st-legende i.reel { background: #ea7a0c; }
.pp-st-legende i.story { background: #e1306c; } .pp-st-legende i.info { background: #2f80ed; }
.pp-st-barre.repos span { background: rgba(0,0,0,.6); border-radius: 6px; margin-left: 6px; padding: 2px 8px; }
.pp-st-repere-j0 { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #14b8a6; transform: translate(-50%, -50%); }
.pp-st-j0txt { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-weight: var(--fw-semibold); color: var(--tx); }
.pp-st-orig { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 5px; vertical-align: middle; background: var(--tx3); }
.pp-st-orig.b-ok { background: var(--ok); } .pp-st-orig.b-warn { background: var(--warn); } .pp-st-orig.b-err { background: var(--err); }
.pp-st-val { font: inherit; font-family: var(--mono); font-weight: var(--fw-semibold); color: var(--tx);
  background: var(--elev); border: var(--bw) solid var(--line); border-radius: var(--r-xs); padding: 1px 7px; cursor: pointer; }
.pp-st-val:hover { border-color: var(--accent); color: var(--accent); }
.pp-st-champ { width: 7em; font-family: var(--mono); padding: 2px 4px; }
.pp-st-cadence { width: 100%; margin-top: var(--sp-3); }
.pp-st-cadence td, .pp-st-cadence th { vertical-align: middle; color: var(--tx); }
.pp-st-cadence th span { font-weight: normal; color: var(--tx2); }
.pp-st-cadence td:first-child { min-width: 220px; }
.pp-st-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
/* Les cartes d'action, à la manière d'Apple : une teinte par catégorie, une bordure fine,
   le fond s'éclaircit au survol (11/10/2026). */
.pp-st-fiche { --g: #0a84ff; display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0;
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--g) 35%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 16%, var(--panel)) 0%, var(--panel) 55%);
  transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.pp-st-fiche:hover { border-color: color-mix(in srgb, var(--g) 70%, var(--line)); transform: translateY(-1px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 24%, var(--elev)) 0%, var(--elev) 60%); }
.pp-st-fiche.g-targeted { --g: #ff375f; } .pp-st-fiche.g-discovery { --g: #0a84ff; } .pp-st-fiche.g-posting { --g: #ff9f0a; }
.pp-st-fiche.g-check { --g: #30d158; } .pp-st-fiche.g-setup { --g: #bf5af2; } .pp-st-fiche.g-security { --g: #5e5ce6; }
.pp-st-tel { position: relative; flex: 0 0 150px; width: 150px; border-radius: 18px; overflow: hidden;
  border: 3px solid var(--line); background: var(--panel2); display: block; }
.pp-st-tel img { width: 100%; display: block; aspect-ratio: 390 / 844; object-fit: cover; }   /* hauteur connue avant le chargement */
.pp-st-icone { aspect-ratio: 9 / 19.5; display: grid; place-items: center; }
.pp-st-icone span { font-size: 56px; }
/* Un repère : le CENTRE du cercle est le point ; l'étiquette dessous, au-dessus près du bas,
   et poussée vers l'intérieur près d'un bord. */
.pp-st-repere { position: absolute; width: 0; height: 0; pointer-events: none; }
.pp-st-repere i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid #ff3b5c; box-shadow: 0 0 0 3px rgba(255,59,92,.25); }
.pp-st-repere b { position: absolute; top: 14px; left: 0; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px;
  background: #ff3b5c; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pp-st-repere.g b { transform: translateX(-11px); }
.pp-st-repere.d b { transform: translateX(calc(-100% + 11px)); }
.pp-st-repere.h b { top: auto; bottom: 14px; }
/* Un champ texte : un CADRE autour, l'étiquette dessous (11/10/2026, demande de l'utilisateur). */
.pp-st-cadre { position: absolute; border: 2.5px solid #ff3b5c; border-radius: 6px; box-shadow: 0 0 0 3px rgba(255,59,92,.25); pointer-events: none; }
.pp-st-cadre b { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px;
  background: #ff3b5c; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pp-st-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pp-st-genre { align-self: flex-start; font-size: var(--fs-note); font-weight: 700; color: #fff; background: var(--g) !important; text-shadow: 0 1px 1px rgba(0,0,0,.3);
  background: var(--accent-dim); padding: 1px 8px; border-radius: var(--r-sm); }
.pp-st-corps h4 { margin: 0; font-size: 1.05em; }
.pp-st-action { margin: 0; color: var(--tx); line-height: 1.45; }
.pp-st-vars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pp-st-vars li { display: flex; align-items: center; gap: 8px; color: var(--tx); padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pp-st-vars li:last-child { border-bottom: 0; }
.pp-st-vars .nom { display: flex; align-items: center; gap: 7px; color: var(--tx); font-weight: var(--fw-semibold); white-space: nowrap; }
.pp-st-vars .nom i { font-style: normal; width: 1.3em; text-align: center; }
.pp-st-vars .val { margin-left: auto; margin-right: 6px; white-space: nowrap; color: var(--tx); }
.pp-st-vis { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-note); color: var(--tx); }
.pp-st-vis span { padding: 1px 6px; border-radius: var(--r-sm); background: var(--panel2); }
@media (max-width: 560px) {
  .pp-st-fiches { grid-template-columns: 1fr; }
  .pp-st-tel { flex-basis: 120px; width: 120px; }
}
/* 🎲 L'exemple tiré au sort : UNE ligne, de gauche à droite, les séances bout à bout. */
.pp-st-ex-tete { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hair); }
.pp-st-ex-tete h4 { margin: 0; }
.pp-st-ex-resume { margin: var(--sp-2) 0 var(--sp-3); color: var(--tx); }
.pp-st-ex-piste { overflow-x: auto; padding: 8px 0 14px; }
.pp-st-ex-ligne { display: flex; align-items: stretch; width: max-content; position: relative; }
.pp-st-ex-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.pp-st-ex-bloc { position: relative; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 52px;
  padding: 0 12px; border-radius: 8px; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35); }
.pp-st-ex-bloc .h { font-size: 11px; font-weight: 700; opacity: .95; }
.pp-st-ex-bloc b { font-size: 13px; }
.pp-st-ex-bloc.warmup { background: #22a55a; } .pp-st-ex-bloc.creation { background: #14b8a6; } .pp-st-ex-bloc.setup { background: #8b5cf6; }
.pp-st-ex-bloc.reel { background: #ea7a0c; } .pp-st-ex-bloc.story { background: #e1306c; } .pp-st-ex-bloc.info { background: #2f80ed; }
.pp-st-ex-bloc.repos { background: repeating-linear-gradient(135deg, #5b6170 0 6px, #3a3f4b 6px 12px); }
.pp-st-ex-trou { position: relative; flex: none; width: 30px; display: flex; align-items: flex-end; justify-content: center; }
.pp-st-ex-trou span { font-size: 10px; color: var(--tx2); white-space: nowrap; margin-bottom: -14px; }
.pp-st-ex-jour { position: relative; flex: none; width: 2px; margin: -8px 6px; background: var(--tx); border-radius: 1px; }
.pp-st-ex-jour span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--tx); }
.pp-st-ex-jour.debut { margin-left: 14px; }
.pp-st-ex-jour { margin-left: 8px; margin-right: 8px; }
.pp-st-ex-jour.vide { background: var(--tx3); margin-right: 4px; }
.pp-st-ex-jour.vide span { color: var(--tx2); }
.pp-st-ex-piste { padding-top: 26px; }
.pp-st-barre.info.suite { border-radius: 0 8px 8px 0; background: #2f80edcc; }
.pp-st-haut { display: flex; gap: var(--sp-4); align-items: flex-start; min-width: 0; }
.pp-st-bas { display: flex; flex-direction: column; gap: 10px; }
.pp-st-vars.deux { grid-template-columns: 1fr 1fr; column-gap: 22px; }
.pp-st-vars.deux li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.pp-st-bas .pp-st-vis { flex-wrap: nowrap; justify-content: space-between; }
.pp-st-bas .pp-st-vis span { flex: 1; text-align: center; padding: 3px 6px; }
@media (max-width: 560px) { .pp-st-vars.deux { grid-template-columns: 1fr; } .pp-st-bas .pp-st-vis { flex-wrap: wrap; } }
/* Les écarts de l'exemple : pause (pointillés, élargie par jour traversé) et repos (hachuré). */
.pp-st-ex-ecart { position: relative; flex: none; align-self: center; height: 52px; }
.pp-st-ex-ecart.pause::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 2px dashed var(--tx3); }
.pp-st-ex-ecart.pause.jours { background: color-mix(in srgb, var(--tx3) 10%, transparent); border-radius: 8px; }
.pp-st-ex-ecart.repos { margin: 0 6px; border-radius: 8px; background: repeating-linear-gradient(135deg, #5b6170 0 6px, #3a3f4b 6px 12px); }
.pp-st-ex-ecart .d { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 10px; color: var(--tx2); white-space: nowrap; }
.pp-st-ex-ecart .r { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 13px; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.55); background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 6px; z-index: 1; }
.pp-st-ex-jour.abs { position: absolute; top: -8px; bottom: -8px; margin: 0; z-index: 2; }
.pp-st-ex-ecart.repos .pp-st-ex-jour.abs { background: #fff; }
/* 🍏 Verre à la manière d'Apple (11/10/2026) : les barres de la timeline et les blocs de
   l'exemple gardent leur couleur, avec un reflet en haut, un liseré clair et une ombre douce. */
.pp-st-barre, .pp-st-ex-bloc, .pp-st-ex-ecart.repos {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 10px rgba(0,0,0,.28); }
.pp-st-barre::before, .pp-st-ex-bloc::before, .pp-st-ex-ecart.repos::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%),
    radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.18), transparent 60%); }
.pp-st-barre span, .pp-st-ex-bloc > * { position: relative; z-index: 1; }
.pp-st-ex-bloc { overflow: hidden; }
.pp-st-ex-colle { flex: none; width: 4px; align-self: center; height: 22px; background: rgba(255,255,255,.55); border-radius: 2px; margin: 0 -2px; z-index: 1; }

/* ── 🏠 L'ACCUEIL (11 octobre 2026) — la synthèse du parc : chiffres, graphiques,
   problèmes à régler, comptes lancés. Préfixe pp-ac-. ─────────────────────── */
:root {
  /* Les couleurs des catégories de l'Accueil (11/10/2026) */
  --pp-roi: #1660e8; --pp-roi-clair: #4ea2ff;               /* Proteus Agent : bleu roi */
  /* Instagram : LE dégradé de la page Identités (`--id-anneau`, 45° jaune → rose → violet) */
  --pp-ig-1: #f9ce34; --pp-ig: #ee2a7b; --pp-ig-3: #6228d7; --pp-ig-clair: #f9ce34;
  --pp-ig-deg: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
  --pp-vert: #16a34a; --pp-argent: #b8c2cc;                 /* Cost Management : vert → argent */
  --pp-claude: #8b93a1; --pp-claude-clair: #c4cad3;         /* les décisions de Claude */
  /* Le code couleur du Control Center, par importance */
  --pp-g-critique: #ef4444; --pp-g-haute: #f97316; --pp-g-moyenne: #eab308; --pp-g-info: #3b82f6; --pp-g-ok: #22c55e;
}
.pp-ac { display: flex; flex-direction: column; gap: var(--sp-4); overflow-x: clip; }
.pp-ac.pp-ac-lit .pp-ac-kpis, .pp-ac.pp-ac-lit .pp-ac-svg { opacity: .55; transition: opacity var(--t-quick) var(--ease); }
.pp-ac-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-ac-kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-ac-kpi[data-tip]::after { white-space: normal; width: 240px; }
.pp-ac-k-t { font-size: var(--fs-meta); color: var(--tx2); letter-spacing: var(--ls-label); }
.pp-ac-k-v { font-size: 28px; line-height: 1.1; font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums; color: var(--tx); }
.pp-ac-kpi.err .pp-ac-k-v { color: var(--err); }
.pp-ac-kpi.warn .pp-ac-k-v { color: var(--warn); }
.pp-ac-kpi.ok .pp-ac-k-v { color: var(--ok); }
.pp-ac-k-s { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: var(--fs-meta); color: var(--tx3); min-height: 1.3em; }
.pp-ac-delta { font-variant-numeric: tabular-nums; color: var(--tx3); }
.pp-ac-delta.up { color: var(--ok); }
.pp-ac-delta.down { color: var(--err); }

.pp-ac-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--sp-4); align-items: start; }
.pp-ac-gauche { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pp-ac-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.pp-ac-tete { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pp-ac-tete h3 { margin: 0; }
.pp-ac-compte { font-size: var(--fs-meta); color: var(--tx3); font-variant-numeric: tabular-nums; }
.pp-ac-note { font-size: var(--fs-meta); color: var(--tx2); font-variant-numeric: tabular-nums; }
.pp-ac-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-meta); color: var(--tx2); }
.pp-ac-legende span { display: inline-flex; align-items: center; gap: 5px; }
.pp-ac-legende i, .pp-ac-bl i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.pp-ac-svg { width: 100%; min-height: 210px; }
.pp-ac-svg svg { display: block; overflow: visible; }
.pp-ac-grid { stroke: var(--line-soft); stroke-width: 1; }
.pp-ac-axe { fill: var(--tx3); font-size: 10.5px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pp-ac-vide { fill: var(--tx3); font-size: 12px; }
.pp-ac-barre { transition: opacity var(--t-quick) var(--ease); }
.pp-ac-svg:has(.pp-ac-zone.on) .pp-ac-barre { opacity: .55; }
.pp-ac-zone { fill: transparent; cursor: crosshair; }
.pp-ac-zone.on { fill: color-mix(in srgb, var(--tx) 6%, transparent); }
.pp-ac-ligne { fill: none; stroke: var(--pp-roi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pp-ac-point { fill: var(--panel); stroke: var(--pp-roi); stroke-width: 1.6; }

.pp-ac-bulle { position: fixed; z-index: 10000; pointer-events: none; min-width: 170px; max-width: 280px;
  padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--panel) 94%, transparent); border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-2); font-size: var(--fs-meta); color: var(--tx2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pp-ac-bt { display: flex; justify-content: space-between; gap: 12px; color: var(--tx); font-weight: var(--fw-medium);
  margin-bottom: 6px; text-transform: capitalize; }
.pp-ac-bt b { font-variant-numeric: tabular-nums; }
.pp-ac-bl { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.pp-ac-bl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ac-bl b { color: var(--tx); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.pp-ac-bs { margin-top: 6px; padding-top: 6px; border-top: var(--bw) solid var(--line-soft); color: var(--tx3); line-height: 1.5; }
.pp-ac-bv { margin-top: 4px; color: var(--tx3); }

.pp-ac-problemes { max-height: 640px; display: flex; flex-direction: column; min-width: 0; }
.pp-ac-filtres { margin-bottom: var(--sp-2); }
.pp-ac-filtres:empty { display: none; }
.pp-ac-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; margin-right: -6px; padding-right: 6px; }
.pp-ac-liste li > a, .pp-ac-liste li > div { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px;
  border-radius: var(--r-xs); color: inherit; text-decoration: none; }
.pp-ac-liste li + li { border-top: var(--bw) solid var(--line-soft); }
.pp-ac-liste li > a:hover { background: var(--hover-row); }
.pp-ac-liste li[data-tip]::after { white-space: normal; width: 280px; left: 50%; }
.pp-ac-pb-pt { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--tx3); }
.pp-ac-pb-pt.critique { background: var(--pp-g-critique); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-g-critique) 22%, transparent); }
.pp-ac-pb-pt.haute { background: var(--pp-g-haute); }
.pp-ac-pb-pt.moyenne { background: var(--pp-g-moyenne); }
.pp-ac-pb-pt.info { background: var(--pp-g-info); }
.pp-ac-pb-pt.ok { background: var(--pp-g-ok); }
.pp-ac-pb-c { flex: 1; min-width: 0; }
.pp-ac-pb-t { color: var(--tx); font-weight: var(--fw-medium); line-height: 1.35; }
.pp-ac-pb-m { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-meta); color: var(--tx3); margin-top: 2px; }
.pp-ac-pb-ou { color: var(--tx2); font-family: var(--mono); font-size: var(--fs-micro, 11px); }
.pp-ac-liste .badge { flex: 0 0 auto; }
.pp-ac-rien { color: var(--tx3); padding: var(--sp-3) 8px; }
li.pp-ac-rien > div { color: var(--ok); }

.pp-ac-podium { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--sp-3); margin-bottom: var(--sp-4); }
.pp-ac-bloc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-ac-sur { align-self: flex-start; font-family: var(--mono); font-size: var(--fs-micro, 11px); letter-spacing: var(--ls-caps, .12em);
  font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: var(--r-pill); border: var(--bw) solid; }
.pp-ac-best { color: var(--ok-tx); border-color: var(--ok-line); background: var(--ok-bg); }
.pp-ac-worst { color: var(--err-tx); border-color: var(--err-line); background: var(--err-bg); }
.pp-ac-cc { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 9px 12px; border-radius: var(--r-sm); background: var(--sunken); border: var(--bw) solid var(--hair); }
.pp-ac-cc[data-tip]::after { white-space: normal; width: 280px; }
.pp-ac-rang { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pp-ac-rang.b { color: var(--ok-tx); background: var(--ok-bg); }
.pp-ac-rang.w { color: var(--err-tx); background: var(--err-bg); }
.pp-ac-cc-n { min-width: 0; display: flex; flex-direction: column; }
.pp-ac-cc-n b { color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ac-cc-n span, .pp-ac-cc-v span { font-size: var(--fs-meta); color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ac-cc-v { display: flex; flex-direction: column; align-items: flex-end; }
.pp-ac-cc-v b { color: var(--tx); font-variant-numeric: tabular-nums; }

.pp-ac-table-cadre { overflow-x: auto; }
.pp-ac-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 13px); }
.pp-ac-table th { text-align: left; font-weight: var(--fw-medium); color: var(--tx3); font-size: var(--fs-meta);
  padding: 6px 10px; border-bottom: var(--bw) solid var(--line); white-space: nowrap; }
.pp-ac-table td { padding: 8px 10px; border-bottom: var(--bw) solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.pp-ac-table tr:hover td { background: var(--hover-row); }
.pp-ac-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.pp-ac-table td.up { color: var(--ok); }
.pp-ac-table td.down { color: var(--err); }
.pp-ac-sub { display: block; font-size: var(--fs-meta); color: var(--tx3); }

@media (max-width: 1280px) {
  .pp-ac-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .pp-ac-grille { grid-template-columns: minmax(0, 1fr); }
  .pp-ac-problemes { position: static; max-height: none; order: -1; }
  .pp-ac-liste { max-height: 520px; }
}
@media (max-width: 720px) {
  .pp-ac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-ac-deux, .pp-ac-podium { grid-template-columns: minmax(0, 1fr); }
  .pp-ac-k-v { font-size: 24px; }
  .pp-ac-cc { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .pp-ac-cc-v:last-child { display: none; }
}

/* Les bulles de l'Accueil : la bulle CSS du système (::after) restait SOUS la carte
   voisine et rognée par la liste qui défile — on la remplace par la bulle flottante
   (#ac-bulle, posée au-dessus de tout), menée par accueil.js. */
.pp-ac [data-tip]::after, .pp-ac [data-tip]::before { display: none !important; }
.pp-ac-bulle.texte { max-width: 300px; color: var(--tx); line-height: 1.45; white-space: normal; }

/* Les cartes des graphiques : un léger voile teal, du haut vers le bas. */
.pp-ac-graphe { background: linear-gradient(180deg, color-mix(in srgb, #14b8a6 9%, var(--panel)) 0%, var(--panel) 70%);
  border-color: color-mix(in srgb, #14b8a6 18%, var(--line)); }
.pp-ac-valeur { font-size: 18px; font-weight: var(--fw-semibold); color: var(--tx); font-variant-numeric: tabular-nums; margin-left: 4px; }
.pp-ac-bl i { background-image: linear-gradient(0deg, var(--pp-roi), var(--pp-roi-clair)); }

/* ── 🏠 Accueil : les quatre catégories (11/10/2026) ───────────────────────────
   Une carte par catégorie : voile coloré depuis le coin, texture de points, BORDURE EN
   DÉGRADÉ (fond en padding-box, dégradé en border-box), icône dans une tuile. */
.pp-ac-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-ac-cat { --c1: #888; --c2: #aaa; --cbord: linear-gradient(135deg, var(--c1), var(--c2));
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer;
  padding: 16px 18px 16px; border-radius: 14px; color: var(--tx); font: inherit; min-width: 0;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c1) 26%, transparent) 0%, transparent 60%) padding-box,
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tx) 7%, transparent) 1px, transparent 1.4px) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--c1) 55%, transparent), color-mix(in srgb, var(--c2) 22%, transparent) 60%, color-mix(in srgb, var(--c2) 45%, transparent)) border-box;
  background-size: auto, 14px 14px, auto, auto;
  transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease); }
.pp-ac-cat:hover { transform: translateY(-1px); box-shadow: 0 8px 28px -14px var(--c1); }
.pp-ac-cat.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 45%, transparent), 0 10px 34px -16px var(--c1);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c1) 36%, transparent) 0%, transparent 62%) padding-box,
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tx) 8%, transparent) 1px, transparent 1.4px) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c2) 70%, transparent)) border-box;
  background-size: auto, 14px 14px, auto, auto; }
.pp-ac-cat.on::after { content: ""; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c2); box-shadow: 0 0 10px var(--c2); }
.pp-ac-cat-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px -8px var(--c1); }
.pp-ac-cat-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-ac-cat-ico svg .plein { fill: #fff; stroke: none; }
.pp-ac-cat-sur { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: var(--fw-semibold);
  background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-ac-cat-t { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.pp-ac-cat-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; min-height: 2.6em; }
.pp-ac-cat-v b { font-size: 24px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pp-ac-cat-v em { font-style: normal; color: var(--tx2); font-size: var(--fs-meta); }
.pp-ac-cat-s { flex-basis: 100%; color: var(--tx2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pp-ac-pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; }
.pp-ac-pt.critique { background: var(--pp-g-critique); } .pp-ac-pt.haute { background: var(--pp-g-haute); }
.pp-ac-pt.moyenne { background: var(--pp-g-moyenne); } .pp-ac-pt.info { background: var(--pp-g-info); } .pp-ac-pt.ok { background: var(--pp-g-ok); }
/* Instagram : la bordure, la tuile et le surtitre au dégradé de la pastille « Comptes en Lancement »
   de la page Identités (45°, #f9ce34 → #ee2a7b → #6228d7), lueur rose vers l'intérieur. */
.pp-ac-cat.ig { --c1: #ee2a7b; --c2: #6228d7;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(238,42,123,.20) 0%, transparent 60%) padding-box,
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tx) 7%, transparent) 1px, transparent 1.4px) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(45deg, rgba(249,206,52,.7) 0%, rgba(238,42,123,.7) 45%, rgba(98,40,215,.7) 100%) border-box;
  background-size: auto, 14px 14px, auto, auto;
  box-shadow: inset 0 0 10px color-mix(in srgb, #e1306c 22%, transparent), inset 0 0 2px color-mix(in srgb, #f77737 35%, transparent); }
.pp-ac-cat.ig.on, .pp-ac-cat.ig:hover {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(238,42,123,.28) 0%, transparent 62%) padding-box,
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tx) 8%, transparent) 1px, transparent 1.4px) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(45deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%) border-box;
  background-size: auto, 14px 14px, auto, auto;
  box-shadow: inset 0 0 14px color-mix(in srgb, #e1306c 38%, transparent), inset 0 0 3px color-mix(in srgb, #f77737 55%, transparent), 0 10px 34px -16px #ee2a7b; }
.pp-ac-cat.ig.on::after { background: #f9ce34; box-shadow: 0 0 10px #f9ce34; }
.pp-ac-cat.ig .pp-ac-cat-ico { background: var(--pp-ig-deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px -8px #ee2a7b; }
.pp-ac-cat.ig .pp-ac-cat-sur { background: var(--pp-ig-deg); -webkit-background-clip: text; background-clip: text; }
.pp-ac-cat.ag { --c1: #1660e8; --c2: #4ea2ff; }
.pp-ac-cat.co { --c1: #16a34a; --c2: #b8c2cc; }
.pp-ac-cat.co .pp-ac-cat-ico { background: linear-gradient(135deg, #16a34a, #6ee7a8 55%, #c8d0d8); }
.pp-ac-cat.cc { --c1: #ef4444; --c2: #22c55e; }
.pp-ac-cat.cc { background:
    radial-gradient(120% 90% at 0% 0%, rgba(239,68,68,.14) 0%, transparent 55%) padding-box,
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tx) 7%, transparent) 1px, transparent 1.4px) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(90deg, rgba(239,68,68,.6), rgba(249,115,22,.5), rgba(234,179,8,.5), rgba(59,130,246,.5), rgba(34,197,94,.6)) border-box;
  background-size: auto, 14px 14px, auto, auto; }
.pp-ac-cat.cc.on { background:
    radial-gradient(120% 90% at 0% 0%, rgba(239,68,68,.22) 0%, transparent 58%) padding-box,
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tx) 8%, transparent) 1px, transparent 1.4px) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(90deg, #ef4444, #f97316, #eab308, #3b82f6, #22c55e) border-box;
  background-size: auto, 14px 14px, auto, auto; }
.pp-ac-cat.cc .pp-ac-cat-ico { background: linear-gradient(135deg, #1f2430, #2b3242); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pp-ac-cat.cc .pp-ac-cat-sur { background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #3b82f6, #22c55e); -webkit-background-clip: text; background-clip: text; }
.pp-ac-cat.cc .pp-ac-cat-ico svg { stroke-width: 2.1; }
.pp-ac-cat.cc .pp-ac-cat-ico svg .g1 { stroke: #ef4444; } .pp-ac-cat.cc .pp-ac-cat-ico svg .g2 { stroke: #f97316; }
.pp-ac-cat.cc .pp-ac-cat-ico svg .g3 { stroke: #eab308; } .pp-ac-cat.cc .pp-ac-cat-ico svg .g4 { stroke: #22c55e; }
.pp-ac-cat.cc .pp-ac-cat-ico svg .g5 { stroke: #fff; }
.pp-ac-vue { display: flex; flex-direction: column; gap: var(--sp-4); }
.pp-ac-vue[hidden] { display: none; }
.pp-ac-vue .pp-ac-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Le code couleur par importance : pastilles du Control Center, badges de la liste. */
.pp-ac-sev { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-ac-sv { --g: var(--pp-g-info); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--tx); text-align: left; border: 1px solid color-mix(in srgb, var(--g) 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 14%, var(--panel)), var(--panel) 70%); }
.pp-ac-sv i { width: 10px; height: 10px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); flex: 0 0 auto; }
.pp-ac-sv b { font-size: 22px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pp-ac-sv span { color: var(--tx2); font-size: var(--fs-meta); }
.pp-ac-sv.on { box-shadow: 0 0 0 1.5px var(--g); }
.pp-ac-sv.critique { --g: var(--pp-g-critique); } .pp-ac-sv.haute { --g: var(--pp-g-haute); } .pp-ac-sv.moyenne { --g: var(--pp-g-moyenne); }
.pp-ac-sv.info { --g: var(--pp-g-info); } .pp-ac-sv.ok { --g: var(--pp-g-ok); }
.pp-ac-g { --g: var(--pp-g-info); display: inline-flex; align-items: center; height: var(--h-badge, 20px); padding: 0 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: var(--fw-medium); white-space: nowrap; color: color-mix(in srgb, var(--g) 80%, var(--tx));
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent); background: color-mix(in srgb, var(--g) 14%, transparent); }
.pp-ac-g.critique { --g: var(--pp-g-critique); } .pp-ac-g.haute { --g: var(--pp-g-haute); } .pp-ac-g.moyenne { --g: var(--pp-g-moyenne); }
.pp-ac-g.info { --g: var(--pp-g-info); } .pp-ac-g.ok { --g: var(--pp-g-ok); }
.pp-ac-logs .pp-ac-pb-t { font-weight: var(--fw-regular); }

.pp-ac-fourn { display: flex; flex-direction: column; gap: 8px; }
.pp-ac-fo { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 12px; background: var(--sunken);
  border: 1px solid color-mix(in srgb, var(--pp-vert) 22%, var(--hair)); }
.pp-ac-fo b { } .pp-ac-fo strong { text-align: right; font-variant-numeric: tabular-nums; color: var(--tx); }
.pp-ac-fo span, .pp-ac-fo em { color: var(--tx2); font-size: var(--fs-meta); font-style: normal; } .pp-ac-fo em { text-align: right; }
@media (max-width: 1080px) { .pp-ac-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-ac-sev { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .pp-ac-sev { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-ac-cat-v b { font-size: 20px; } }

/* Les trois chiffres d'une carte de catégorie : même taille, une ligne (11/10/2026). */
.pp-ac-cats .pp-ac-cat-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; align-items: start; min-height: 0; }
.pp-ac-cat-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-ac-cats .pp-ac-cat-m b { font-size: 20px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ac-cat-m em { font-style: normal; color: var(--tx2); font-size: var(--fs-meta); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pp-ac-cat-m .pp-ac-pt { margin-left: 0; }
@media (max-width: 720px) { .pp-ac-cats .pp-ac-cat-m b { font-size: 17px; } }

/* Instagram : trois graphiques ; le plan du jour ; les échéances (11/10/2026). */
.pp-ac-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pp-ac-plan { border: 1.5px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(45deg, rgba(249,206,52,.5), rgba(238,42,123,.5) 45%, rgba(98,40,215,.5)) border-box; }
.pp-ac-plan-barre { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; margin: 2px 0 10px; }
.pp-ac-plan-barre i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--pp-ig-deg); transition: width .5s var(--ease); }
.pp-ac-plan-tels { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-meta); color: var(--tx2); margin-bottom: 8px; }
.pp-ac-plan-tel b { color: var(--tx); margin-right: 6px; font-family: var(--mono); }
.pp-ac-plan-tel em { font-style: normal; color: var(--pp-g-haute); }
.pp-ac-plan-listes { gap: var(--sp-3); }
.pp-ac-sous { font-size: var(--fs-meta); color: var(--tx2); text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 2px; }
.pp-ac-mini { max-height: 230px; }
.pp-ac-mini li > div { padding: 6px 6px; }
.pp-ac-cc { grid-template-columns: 26px minmax(0, 1fr) auto auto auto; }
.pp-ac-ech { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pp-ac-ec { --g: var(--pp-g-info); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--tx);
  border: 1px solid color-mix(in srgb, var(--g) 35%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--g) 12%, var(--panel)), var(--panel) 75%); }
.pp-ac-ec i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 8px var(--g); flex: 0 0 auto; }
.pp-ac-ec .pp-ac-ec-q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ac-ec b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; color: color-mix(in srgb, var(--g) 70%, var(--tx)); }
.pp-ac-ec.critique { --g: var(--pp-g-critique); } .pp-ac-ec.haute { --g: var(--pp-g-haute); } .pp-ac-ec.moyenne { --g: var(--pp-g-moyenne); } .pp-ac-ec.ok { --g: var(--pp-g-ok); }
@media (max-width: 1080px) { .pp-ac-trois { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .pp-ac-cc { grid-template-columns: 24px minmax(0, 1fr) auto auto; } .pp-ac-cc .pp-ac-cc-v:last-child { display: none; } }
.pp-ac-pourquoi { color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* 🗓️ Le plan du jour, refait (12/10/2026) : une ligne par élément, rien de coupé. */
.pp-ac-pl-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 12px; }
.pp-ac-pl-tete h3 { margin: 0 0 2px; }
.pp-ac-pl-total { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; min-width: 240px; }
.pp-ac-pl-total b { font-size: 26px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pp-ac-pl-total span { color: var(--tx2); font-size: var(--fs-meta); }
.pp-ac-pl-total .pp-ac-plan-barre { grid-column: 1 / -1; margin: 6px 0 0; }
.pp-ac-plan .pp-ac-plan-barre { height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--tx) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 8%, transparent); }
.pp-ac-plan .pp-ac-plan-barre.fine { height: 5px; width: 90px; }
.pp-ac-plan .pp-ac-plan-barre i { display: block; height: 100%; border-radius: 999px; background: var(--pp-ig-deg); }
.pp-ac-plan .pp-ac-plan-tels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pp-ac-plan .pp-ac-plan-tel { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; background: var(--sunken);
  border: 1px solid var(--hair); font-size: var(--fs-meta); color: var(--tx2); }
.pp-ac-plan .pp-ac-plan-tel b { color: var(--tx); font-family: var(--mono); margin: 0; }
.pp-ac-plan .pp-ac-plan-tel em { font-style: normal; color: var(--pp-g-haute); }
.pp-ac-plan .pp-ac-plan-tel em.ok { color: var(--pp-g-ok); }
.pp-ac-pl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-ac-pl-col { border-radius: 12px; border: 1px solid var(--hair); background: var(--sunken); padding: 10px 10px 6px; min-width: 0; }
.pp-ac-pl-col.retard { border-color: color-mix(in srgb, var(--pp-g-haute) 35%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-g-haute) 8%, var(--sunken)), var(--sunken) 60%); }
.pp-ac-pl-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--tx); margin: 0 4px 8px; }
.pp-ac-pl-h b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tx) 10%, transparent); color: var(--tx2); }
.pp-ac-pl-col.retard .pp-ac-pl-h b { background: color-mix(in srgb, var(--pp-g-haute) 22%, transparent); color: var(--pp-g-haute); }
.pp-ac-pl-l { display: flex; flex-direction: column; }
.pp-ac-pl-r { display: grid; grid-template-columns: 44px 112px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 40px; padding: 4px 6px; border-radius: 8px; }
.pp-ac-pl-r + .pp-ac-pl-r { border-top: 1px solid var(--line-soft); }
.pp-ac-pl-r:hover { background: var(--hover-row); }
.pp-ac-pl-col.retard .pp-ac-pl-r { grid-template-columns: 112px minmax(0, 1fr) auto; }
.pp-ac-pl-col.retard .pp-ac-pl-heure { display: none; }
.pp-ac-pl-heure { font-family: var(--mono); font-size: 12px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.pp-ac-pl-g { --g: var(--tx2); justify-self: start; font-size: 11px; font-weight: var(--fw-medium); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, var(--g) 85%, var(--tx)); background: color-mix(in srgb, var(--g) 15%, transparent); border: 1px solid color-mix(in srgb, var(--g) 35%, transparent); }
.pp-ac-pl-g.post { --g: #ee2a7b; } .pp-ac-pl-g.module { --g: #8b5cf6; } .pp-ac-pl-g.controle { --g: var(--pp-g-haute); }
.pp-ac-pl-g.installation, .pp-ac-pl-g.creation { --g: var(--pp-g-info); } .pp-ac-pl-g.warmup { --g: #f59e0b; } .pp-ac-pl-g.story { --g: #14b8a6; }
.pp-ac-pl-c { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-ac-pl-c b { font-weight: var(--fw-medium); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ac-pl-c em { font-style: normal; font-size: 11.5px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ac-pl-t { font-family: var(--mono); font-size: 11.5px; color: var(--tx2); white-space: nowrap; }
@media (max-width: 900px) { .pp-ac-pl-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .pp-ac-pl-r { grid-template-columns: 40px 96px minmax(0, 1fr); } .pp-ac-pl-t { display: none; }
  .pp-ac-pl-col.retard .pp-ac-pl-r { grid-template-columns: 96px minmax(0, 1fr); } }

/* Le plan : « Voir plus » ; les tâches EN COURS, animées (12/10/2026). */
.pp-ac-plus { margin: 6px 4px 2px; align-self: flex-start; font: inherit; font-size: 12px; color: var(--tx2); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.pp-ac-plus:hover { color: var(--tx); border-color: var(--tx3); }
.pp-ac-pl-col { display: flex; flex-direction: column; }
.pp-ac-live { margin-bottom: 14px; border-radius: 12px; padding: 10px 12px 6px; border: 1px solid color-mix(in srgb, var(--pp-g-ok) 35%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-g-ok) 9%, var(--sunken)), var(--sunken) 70%); }
.pp-ac-live[hidden] { display: none; }
.pp-ac-live-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--fw-semibold); margin-bottom: 6px; }
.pp-ac-live-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-g-ok); animation: pp-ac-pulse 1.4s ease-out infinite; }
.pp-ac-live-h b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--pp-g-ok) 22%, transparent); color: var(--pp-g-ok); }
.pp-ac-live-r { display: grid; grid-template-columns: 14px 78px minmax(0, 1fr) 140px 72px; align-items: center; gap: 10px; min-height: 40px; padding: 2px 4px; }
.pp-ac-live-r + .pp-ac-live-r { border-top: 1px solid var(--line-soft); }
.pp-ac-live-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-g-ok); animation: pp-ac-pulse 1.4s ease-out infinite; justify-self: center; }
.pp-ac-live-barre { height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--tx) 10%, transparent); position: relative; }
.pp-ac-live-barre i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease);
  background: linear-gradient(90deg, var(--pp-g-ok), #6ee7a8, var(--pp-g-ok)); background-size: 200% 100%; animation: pp-ac-file 1.6s linear infinite; }
.pp-ac-live-temps { font-family: var(--mono); font-size: 12px; color: var(--tx2); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes pp-ac-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-g-ok) 70%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes pp-ac-file { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (max-width: 600px) { .pp-ac-live-r { grid-template-columns: 14px 64px minmax(0, 1fr) 60px; } .pp-ac-live-barre { display: none; } }
@media (prefers-reduced-motion: reduce) { .pp-ac-live-h i, .pp-ac-live-pt, .pp-ac-live-barre i { animation: none; } }

/* BEST / WORST : un sélecteur en verre fumé, l'onglet actif en lueur — verte pour BEST, rouge pour
   WORST — à la manière de la barre « Content · Automations · System » (12/10/2026). */
.pp-ac-bw { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--sunken);
  border: 1px solid color-mix(in srgb, var(--tx) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px -10px rgba(0,0,0,.6); }
.pp-ac-bw button { --g: var(--pp-g-ok); display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 999px;
  border: 1px solid transparent; background: none; color: var(--tx2); font: inherit; font-size: 13px; font-weight: var(--fw-medium); cursor: pointer;
  letter-spacing: .02em; transition: color .15s, background .2s, box-shadow .2s, border-color .2s; }
.pp-ac-bw button.worst { --g: var(--pp-g-critique); }
.pp-ac-bw button:hover { color: var(--tx); }
.pp-ac-bw-i { font-size: 10px; color: color-mix(in srgb, var(--g) 70%, var(--tx3)); }
.pp-ac-bw button.on { color: var(--tx);
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--g) 34%, transparent), color-mix(in srgb, var(--g) 12%, transparent) 70%);
  border-color: color-mix(in srgb, var(--g) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 14px -4px var(--g), 0 4px 16px -8px var(--g); }
.pp-ac-bw button.on .pp-ac-bw-i { color: var(--g); text-shadow: 0 0 8px var(--g); }

/* Chaque compte de BEST / WORST : un léger voile teal vers l'intérieur, comme les cartes des graphiques. */
.pp-ac-cc { border-color: color-mix(in srgb, #14b8a6 22%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, #14b8a6 8%, var(--sunken)), var(--sunken) 75%);
  box-shadow: inset 0 0 18px -6px color-mix(in srgb, #14b8a6 35%, transparent); }

/* WORST : les comptes listés prennent un voile ROUGE au lieu du teal (12/10/2026). */
.pp-ac-podium.worst .pp-ac-cc { border-color: color-mix(in srgb, var(--pp-g-critique) 30%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-g-critique) 9%, var(--sunken)), var(--sunken) 75%);
  box-shadow: inset 0 0 18px -6px color-mix(in srgb, var(--pp-g-critique) 40%, transparent); }

/* Les titres des quatre catégories en MAJUSCULES (12/10/2026). */
.pp-ac-cat-t { text-transform: uppercase; letter-spacing: .04em; }

/* L'ossature du premier chargement : les mêmes formes, vides (12/10/2026). */
.pp-ac .sk { position: relative; overflow: hidden; }
.pp-ac-sk-graphe { height: 210px; display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; padding: 10px 14px 24px 40px; }
.pp-ac-sk-graphe .pp-ac-sk-barre { width: 26px; border-radius: 4px 4px 2px 2px; }
.pp-ac-cat-m .sk, .pp-ac-kpi .sk, .pp-ac-cc-n .sk, .pp-ac-pl-c .sk { display: block; }
.pp-ac-cc-v { min-width: 34px; }
.pp-ac-pl-h b:empty, .pp-ac-live-h b:empty { display: none; }

/* ── 📋 Appareils : l'icône de la fiche, les puces de la tuile, la fiche (12/10/2026) ──
   Mêmes pièces que l'Accueil : badges par importance (pp-ac-g), pastilles (pp-ac-ec), bande
   « En cours » (pp-ac-live), lignes du journal (pp-ac-liste). */
.pp-tuile-fiche { --g: var(--tx3); display: inline-flex; align-items: center; gap: 4px; height: 26px; min-width: 26px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--sunken); color: var(--tx2); font: inherit; font-size: 13px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s; }
.pp-tuile-fiche:hover { color: var(--tx); border-color: var(--tx3); }
.pp-tuile-fiche[hidden] { display: none; }
.pp-tuile-fiche b { font-size: 11px; font-weight: var(--fw-semibold); }
.pp-tuile-fiche.critique, .pp-tuile-fiche.haute, .pp-tuile-fiche.moyenne { color: color-mix(in srgb, var(--g) 80%, var(--tx));
  border-color: color-mix(in srgb, var(--g) 50%, transparent); background: color-mix(in srgb, var(--g) 15%, var(--sunken));
  box-shadow: inset 0 0 10px -4px var(--g), 0 0 12px -6px var(--g); }
.pp-tuile-fiche.critique { --g: var(--pp-g-critique); animation: pp-ac-pulse-r 2s ease-out infinite; }
.pp-tuile-fiche.haute { --g: var(--pp-g-haute); } .pp-tuile-fiche.moyenne { --g: var(--pp-g-moyenne); }
@keyframes pp-ac-pulse-r { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-g-critique) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.pp-tuile-infos { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--sp-1); }
.pp-tuile-infos[hidden] { display: none; }
.pp-tuile-puce { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--hair); background: var(--sunken); color: var(--tx2); white-space: nowrap; }
.pp-tuile-puce.ok { color: var(--pp-g-ok); border-color: color-mix(in srgb, var(--pp-g-ok) 35%, transparent); }
.pp-tuile-puce.alerte { color: var(--pp-g-haute); border-color: color-mix(in srgb, var(--pp-g-haute) 45%, transparent);
  background: color-mix(in srgb, var(--pp-g-haute) 10%, var(--sunken)); }

.pp-mf { display: flex; flex-direction: column; gap: 14px; }
.pp-mf-charge { display: flex; flex-direction: column; gap: 10px; }
.pp-mf-charge .sk { position: relative; overflow: hidden; }
.pp-mf-etat { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-mf-voir { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pp-mf-voir .pp-ac-ec { cursor: default; }
.pp-mf-rien { padding: 10px 14px; border-radius: 10px; color: var(--pp-g-ok); border: 1px solid color-mix(in srgb, var(--pp-g-ok) 30%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--pp-g-ok) 10%, var(--panel)), var(--panel) 75%); }
.pp-mf .pp-ac-live { margin: 0; }
.pp-mf-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-mf-carte { border-radius: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #14b8a6 20%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, #14b8a6 7%, var(--sunken)), var(--sunken) 70%); min-width: 0; }
.pp-mf-carte.alerte { border-color: color-mix(in srgb, var(--pp-g-haute) 40%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-g-haute) 9%, var(--sunken)), var(--sunken) 70%); }
.pp-mf-h { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--tx); margin: 0 0 8px; }
.pp-mf-l { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.pp-mf-l:last-child { border-bottom: 0; }
.pp-mf-l span { color: var(--tx2); } .pp-mf-l b { font-weight: var(--fw-medium); text-align: right; overflow-wrap: anywhere; }
.pp-mf-it { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.pp-mf-it em { font-style: normal; color: var(--tx2); font-family: var(--mono); font-size: 11.5px; }
.pp-mf-comptes { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-mf-cpt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #14b8a6 25%, var(--hair)); background: color-mix(in srgb, #14b8a6 6%, var(--sunken)); }
.pp-mf-cpt b { font-family: var(--mono); color: var(--tx2); font-weight: var(--fw-medium); }
.pp-mf-cpt em { font-style: normal; color: var(--tx3); }
.pp-mf-cpt.restreint { border-color: color-mix(in srgb, var(--pp-g-critique) 40%, transparent); background: color-mix(in srgb, var(--pp-g-critique) 8%, var(--sunken)); }
.pp-mf-logs { max-height: 320px; overflow-y: auto; }
.pp-mf-det { color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
@media (max-width: 720px) { .pp-mf-grille { grid-template-columns: minmax(0, 1fr); } }

/* 🧭 L'installation des comptes ; 👤 vues par identité ; 🧠 ce qui reste à apprendre (12/10/2026). */
.pp-ac-inst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pp-ac-inst-e { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--sunken);
  border: 1px solid color-mix(in srgb, #14b8a6 18%, var(--hair)); box-shadow: inset 0 0 14px -6px color-mix(in srgb, #14b8a6 30%, transparent); }
.pp-ac-inst-e .sk { display: block; position: relative; overflow: hidden; }
.pp-ac-inst-e b { font-size: 22px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pp-ac-inst-e span { font-size: var(--fs-meta); color: var(--tx2); }
.pp-ac-inst-b { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--tx) 10%, transparent); overflow: hidden; margin-bottom: 6px; }
.pp-ac-inst-b i { display: block; height: 100%; border-radius: 999px; background: var(--pp-ig-deg); }
.pp-ac-inst-e.e3 .pp-ac-inst-b i { background: linear-gradient(90deg, var(--pp-g-ok), #6ee7a8); }
.pp-ac-inst-r { grid-template-columns: 56px minmax(0, 1fr) auto; }
.pp-ac-ids { display: flex; flex-direction: column; gap: 4px; }
.pp-ac-id { display: grid; grid-template-columns: 130px minmax(0, 1fr) 60px 70px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, #14b8a6 18%, var(--hair)); background: linear-gradient(180deg, color-mix(in srgb, #14b8a6 6%, var(--sunken)), var(--sunken) 75%); }
.pp-ac-id .sk { display: block; position: relative; overflow: hidden; }
.pp-ac-id-n { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ac-id-b { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--tx) 10%, transparent); overflow: hidden; }
.pp-ac-id-b i { display: block; height: 100%; border-radius: 999px; background: var(--pp-ig-deg); }
.pp-ac-id b { text-align: right; font-variant-numeric: tabular-nums; }
.pp-ac-id em { font-style: normal; font-size: 11px; color: var(--tx3); }
.pp-ac-auto { --g: var(--pp-g-ok); display: flex; align-items: center; gap: 8px; min-width: 150px; }
.pp-ac-auto > div { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--tx) 10%, transparent); overflow: hidden; }
.pp-ac-auto i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pp-roi), var(--pp-roi-clair)); }
.pp-ac-auto.moyenne i { background: linear-gradient(90deg, #ca8a04, var(--pp-g-moyenne)); }
.pp-ac-auto.critique i { background: linear-gradient(90deg, #b91c1c, var(--pp-g-critique)); }
.pp-ac-auto b { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); min-width: 52px; text-align: right; }
@media (max-width: 720px) { .pp-ac-inst { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-ac-id { grid-template-columns: 100px minmax(0, 1fr) 50px; } .pp-ac-id em { display: none; } }
.pp-mf-vide { color: var(--tx3); font-size: 12.5px; padding: 8px 6px; list-style: none; }

/* Appareils (12/10/2026) : la fiche plus large ; l'icône en verre coloré, comme BEST / WORST. */
.modal.lg.pp-mf-modale { --modal-w: 1060px; }
.pp-tuile-fiche { --g: #3b82f6; height: 28px; min-width: 30px; padding: 0 10px; font-size: 14px; font-weight: var(--fw-semibold);
  color: color-mix(in srgb, var(--g) 70%, #fff); border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--g) 32%, transparent), color-mix(in srgb, var(--g) 10%, transparent) 70%), var(--sunken);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 12px -4px var(--g), 0 4px 14px -8px var(--g); }
.pp-tuile-fiche:hover { color: #fff; border-color: color-mix(in srgb, var(--g) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 16px -4px var(--g), 0 6px 18px -8px var(--g); }
.pp-tuile-fiche.critique, .pp-tuile-fiche.haute, .pp-tuile-fiche.moyenne {
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--g) 38%, transparent), color-mix(in srgb, var(--g) 12%, transparent) 70%), var(--sunken);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 14px -4px var(--g), 0 4px 16px -8px var(--g); }

/* Titres des 4 catégories en GRAS ; l'installation se lit comme un pipeline 1 › 2 › 3 › 4 (12/10/2026). */
.pp-ac-cats .pp-ac-cat-t { font-weight: 800; }
.pp-ac-inst { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); gap: 6px; align-items: center; }
.pp-ac-inst-fl { color: var(--tx3); font-size: 20px; text-align: center; }
@media (max-width: 720px) { .pp-ac-inst { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); } .pp-ac-inst-fl:nth-of-type(2) { display: none; } }

/* L'icône de la fiche SOUS ⏸, plus petite, un « i » net (12/10/2026). */
.pp-tuile-actions { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.pp-tuile-fiche { height: 20px; min-width: 20px; padding: 0 6px; gap: 2px; border-width: 1px;
  font: italic 700 12px/1 Georgia, "Times New Roman", serif; letter-spacing: 0;
  border-color: color-mix(in srgb, var(--g) 32%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 8px -4px var(--g), 0 2px 8px -6px var(--g); }
.pp-tuile-fiche b { font: 600 10px/1 var(--sans, system-ui); font-style: normal; }
.pp-tuile-fiche.critique, .pp-tuile-fiche.haute, .pp-tuile-fiche.moyenne { font-style: normal; font-family: var(--sans, system-ui); }

/* 🗂️ La barre au style des titres de catégories de l'Accueil (12/10/2026) : majuscules, graisse
   forte, lettres légèrement espacées ; textes et icônes en BLANC (plus de gris). */
.side .brand .lbl b { text-transform: uppercase; font-weight: 800; letter-spacing: .04em; font-size: 15px; color: #fff; }
.side .nav-item .lbl { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 12px; color: #fff; }
.side .nav-lbl { font-weight: 800; letter-spacing: .1em; color: #fff; }
.side .nav-item .ico, .side .side-foot .ico { color: #fff; }
.side .nav-item.active .lbl { color: #fff; }
.side .pp-user .lbl em { text-transform: uppercase; letter-spacing: .04em; }
:root[data-theme="light"] .side .brand .lbl b, :root[data-theme="light"] .side .nav-item .lbl,
:root[data-theme="light"] .side .nav-lbl, :root[data-theme="light"] .side .nav-item .ico,
:root[data-theme="light"] .side .side-foot .ico { color: var(--tx); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .side .brand .lbl b, :root:not([data-theme="dark"]) .side .nav-item .lbl,
  :root:not([data-theme="dark"]) .side .nav-lbl, :root:not([data-theme="dark"]) .side .nav-item .ico,
  :root:not([data-theme="dark"]) .side .side-foot .ico { color: var(--tx); } }
.side .pin, .side .pin .ico { color: #fff; }
.side .pin .lbl { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 12px; }
:root[data-theme="light"] .side .pin, :root[data-theme="light"] .side .pin .ico { color: var(--tx); }
/* Les entrées de la barre sans gras (12/10/2026) ; le gras reste pour le titre PHONEPILOT. */
.side .nav-item .lbl, .side .pin .lbl { font-weight: 400; }
.side .pp-user .lbl b { font-weight: 600; }
/* « PILOT » de la marque dans le vert d'accent du logo (12/10/2026). ⚠️ `.brand span{display:block}`
   (alesia.css) attraperait ce span : il reste en ligne. */
.brand .pp-marque-pilot { display: inline; color: var(--accent); font-size: inherit; letter-spacing: inherit; }

/* Barre REPLIÉE (12/10/2026) : à la place du titre de section rogné, une fine ligne séparatrice dans
   le rail ; chaque chose reste à sa place. Le texte devient transparent (pas l'élément, sinon la
   ligne disparaîtrait avec lui) ; déployée, le titre revient et la ligne s'efface. */
.side .nav-lbl { opacity: 1; position: relative; color: transparent; transition: color var(--t-panel) var(--ease-panel); }
.side.open .nav-lbl { color: #fff; }
.side .nav-lbl::before { content: ""; position: absolute; left: calc(2 * var(--rail-pad, 8px)); width: calc(var(--w-rail, 64px) - 4 * var(--rail-pad, 8px));
  top: calc(50% + 4px); height: 1px; background: color-mix(in srgb, var(--tx) 22%, transparent); transition: opacity var(--t-panel) var(--ease-panel); }
.side.open .nav-lbl::before { opacity: 0; }
:root[data-theme="light"] .side.open .nav-lbl { color: var(--tx); }
@media (max-width: 760px) { .side .nav-lbl { color: #fff; } .side .nav-lbl::before { display: none; } }

/* Les entrées cliquables d'un blanc un peu moins éclatant ; l'entrée active et les titres de
   section restent en blanc pur. */
.side .nav-item .lbl, .side .pin .lbl { color: color-mix(in srgb, #fff 80%, #6b6b75); }
.side .nav-item:hover .lbl, .side .nav-item.active .lbl { color: #fff; }
/* Entrées et leurs icônes encore un peu plus grises (12/10/2026) ; actif et survol en blanc. */
.side .nav-item .lbl, .side .pin .lbl { color: color-mix(in srgb, #fff 66%, #6b6b75); }
.side .nav-item .ico, .side .pin .ico, .side .side-foot .ico { color: color-mix(in srgb, #fff 66%, #6b6b75); }
.side .nav-item:hover .lbl, .side .nav-item.active .lbl, .side .nav-item:hover .ico, .side .nav-item.active .ico { color: #fff; }

/* 🌶️ DoritoX (14/10/2026) : « Launch », sur la ligne du conteneur (elle ne passe à la ligne
   que si la place manque). Le bleu du bouton principal (`.btn.p`), en pilule compacte. L'état
   de la bascule prend une ligne à lui, sous la rangée, seulement quand il y a quelque chose à dire. */
.dir-cont-lancer { display: inline-flex; align-items: center; }
.btn.p.dir-launch { min-width: 0; height: 26px; padding: 0 10px 0 8px; gap: 5px; border-radius: 999px; font-family: var(--mono);
  font-size: 12px; font-weight: var(--fw-bold, 700); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.btn.p.dir-launch:disabled { cursor: default; filter: saturate(.7) brightness(.92); }
.dir-launch.en-cours .dir-launch-ico { animation: pp-int-pouls 1.1s var(--ease) infinite; }
.dir-launch-ico { font-size: 9px; line-height: 1; }
.dir-cont-lancer-etat { flex: 1 0 100%; order: 99; font-size: var(--fs-note); color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-cont-lancer-etat:empty { display: none; }
.dir-cont-lancer-etat.alerte { color: var(--err); font-weight: var(--fw-semibold); }

/* 🌶️ Les fenêtres DoritoX — « Lancer », « Ajouter » (14-15/10/2026) : plus larges que les confirmations
   (380 → 460 px), texte en couleur PLEINE (`--tx`), l'icône et le TITRE sur une ligne, les étapes
   EN DESSOUS, alignées sur le bord gauche de l'icône (la tête passe en grille, son bloc de texte
   s'efface : `display: contents`). */
.modal.sm.modal-dx { --modal-w: 460px; }
.modal-dx .modal-head { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 12px; align-items: center; }
.modal-dx .modal-head > div { display: contents; }
.modal-dx .modal-head h3 { color: var(--tx); margin: 0; }
.modal-dx .modal-head p { grid-column: 1 / -1; margin: 0; color: var(--tx); line-height: 1.8; }
.modal-dx .modal-head p b { font-weight: var(--fw-bold, 700); }
.modal-dx .modal-dx-note { display: block; margin-top: 8px; color: var(--tx2); }
/* DoritoX : la rangée du conteneur tient sur une ligne — le nom `n03_ig_001` dit déjà ce que c'est. */
.dir-cont.dx .dir-cont-l { display: none; }

/* 🌶️ LA PAGE DORITOX (15/10/2026, chantier C ; refonte le jour même dans l'esprit du tableau de
   bord AutoGrowth — bandeau rouge, pastilles, cartes « Fleet », tableau « Doritos » — sans leur logo
   ni leurs images). Le rouge DoritoX est propre à cette page ; le reste suit les jetons du thème. */
.dx { --dx-rouge: #e0313a; --dx-rouge-fonce: #5c0d14; --dx-or: #f5a524; display: flex; flex-direction: column; gap: 18px; }
.dx-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 30px 32px 26px; min-height: 190px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(224,49,58,.55) 0%, rgba(92,13,20,.55) 38%, transparent 70%),
              radial-gradient(80% 120% at 100% 0%, rgba(88,54,214,.28) 0%, transparent 60%),
              linear-gradient(180deg, #17080b 0%, #0d0d10 100%);
  border: 1px solid rgba(224,49,58,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.dx-hero-txt { position: relative; z-index: 1; max-width: 640px; }
.dx-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; color: var(--dx-or); font-weight: 600; }
.dx-titre { margin: 6px 0 4px; font-size: 46px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.dx-sous { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; }
.dx-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.dx-cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  color: #fff; font-weight: 700; font-size: 14px; border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, #e0313a 0%, #b4246f 55%, #5b3fd8 100%); box-shadow: 0 6px 22px -8px rgba(224,49,58,.8); }
.dx-cta:hover { filter: brightness(1.08); }
.dx-cta:disabled { filter: saturate(.5) brightness(.85); cursor: default; }
.dx-garde-mot { font-size: 12.5px; color: rgba(255,255,255,.6); }
.dx-hero-art { position: absolute; inset: 0 0 0 auto; width: min(58%, 720px); pointer-events: none;
  background: url("/statique/doritox/banniere.jpg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); opacity: .95; }
.dx-kicker img { width: 18px; height: 17px; vertical-align: -3px; margin-right: 4px; image-rendering: pixelated; }
.dx-logo { width: 22px; height: 20px; image-rendering: pixelated; flex: none; }

.dx-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dx-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; min-height: 74px;
  background: var(--panel, #141418); border: 1px solid rgba(255,255,255,.07); }
.dx-stat-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 18px; flex: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.dx-stat-ico .dx-logo { width: 26px; height: 24px; }
.dx-stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1.05; color: var(--tx); }
.dx-stat span { font-size: 12.5px; color: var(--tx2); }
.dx-stat small { color: var(--tx3); font-size: 11px; }
.dx-stat.vert { border-color: rgba(53,210,154,.32); background: linear-gradient(135deg, rgba(53,210,154,.12), transparent 60%), var(--panel, #141418); }
.dx-stat.vert .dx-stat-ico { background: rgba(53,210,154,.18); border-color: rgba(53,210,154,.35); }
.dx-stat.rouge { border-color: rgba(224,49,58,.35); background: linear-gradient(135deg, rgba(224,49,58,.14), transparent 60%), var(--panel, #141418); }
.dx-stat.rouge .dx-stat-ico { background: rgba(224,49,58,.18); border-color: rgba(224,49,58,.4); }
.dx-stat.orange { border-color: rgba(245,165,36,.35); } .dx-stat.orange .dx-stat-ico { background: rgba(245,165,36,.15); }

.dx-section-tete { display: flex; align-items: baseline; gap: 12px; margin: 8px 2px -6px; }
.dx-section-tete h3 { margin: 0; font-size: 17px; }
.dx-section-aide { color: var(--tx3); font-size: 12.5px; }

.dx-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dx-carte { border-radius: 16px; padding: 6px; display: flex; flex-direction: column; background: #111114;
  border: 1px solid rgba(224,49,58,.4); box-shadow: 0 0 0 1px rgba(224,49,58,.08), 0 14px 34px -24px rgba(224,49,58,.9); }
.dx-carte.alerte { border-color: rgba(236,106,94,.85); box-shadow: 0 0 0 1px rgba(236,106,94,.3), 0 10px 30px -14px rgba(236,106,94,.9); }
.dx-carte-art { position: relative; height: 150px; border-radius: 12px; overflow: hidden;
  background: url("/statique/doritox/banniere.jpg") 70% center / cover no-repeat; border: 1px solid rgba(245,165,36,.25); }
.dx-carte-art > .dx-logo { position: absolute; left: 12px; top: 10px; width: 40px; height: 37px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.dx-carte-etat { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.dx-carte-etat .dx-badge { background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.dx-carte-corps { padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.dx-carte-ligne { display: flex; align-items: center; justify-content: space-between; }
.dx-kicker-mini { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--tx3); font-weight: 600; }
.dx-or { font-size: 11px; font-weight: 600; color: var(--dx-or); padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(245,165,36,.4); background: rgba(245,165,36,.08); }
.dx-carte-nom { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.01em; margin-top: -4px; }
.dx-carte-sous { font-size: 12px; color: var(--tx3); margin-top: -6px; }
.dx-cle { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07);
  font-family: var(--mono); font-size: 12.5px; }
.dx-cle .push { margin-left: auto; }
.dx-cle-pts { color: var(--tx3); letter-spacing: .1em; }
.dx-tel-cel { display: inline-flex; align-items: center; gap: 8px; }
.dx-cells { display: grid; grid-template-columns: max-content minmax(0, 1.4fr) minmax(0, 1.2fr) max-content; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.25); }
.dx-cell { padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dx-cell + .dx-cell { border-left: 1px solid rgba(255,255,255,.06); }
.dx-cell span { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); }
.dx-cell b { font-size: 14px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-cell b.mono { font-family: var(--mono); font-size: 12px; }
.dx-carte-err { margin: 0; color: var(--err); font-size: 12.5px; font-weight: 600; }
.dx-carte-ecarts { margin: 0; padding-left: 16px; font-size: 12px; color: var(--tx2); }
.dx-carte-ecarts li.haute { color: var(--err); font-weight: 600; }
.dx-carte-barre { display: flex; gap: 8px; align-items: stretch; margin-top: 2px; }
.dx-act { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: var(--tx);
  border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.dx-act:hover { background: rgba(255,255,255,.07); }
.dx-act.large { flex: 1; justify-content: flex-start; padding: 7px 12px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, rgba(255,255,255,.015) 6px 12px); border-style: dashed; }
.dx-act.large b { display: block; font-size: 13px; } .dx-act.large small { display: block; font-size: 11px; color: var(--tx3); }
.dx-act.rond { width: 42px; height: 42px; border-radius: 50%; font-size: 16px; }
.dx-act.rond.rouge { background: linear-gradient(135deg, #e0313a, #9c1a3f); border-color: rgba(255,255,255,.18); color: #fff; font-weight: 800; }

.dx-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: var(--tx2); white-space: nowrap; }
.dx-badge i { font-style: normal; font-size: 10px; }
.dx-badge.ok { color: #35d29a; border-color: rgba(53,210,154,.35); background: rgba(53,210,154,.1); }
.dx-badge.err { color: #ff7a6e; border-color: rgba(236,106,94,.45); background: rgba(236,106,94,.12); }
.dx-badge.warn { color: #f5a524; border-color: rgba(245,165,36,.45); background: rgba(245,165,36,.12); }
.dx-badge.rouge { color: #ff6b73; border-color: rgba(224,49,58,.5); background: rgba(224,49,58,.14); }
.dx-badge.bleu { color: #7cc0f5; border-color: rgba(79,166,233,.45); background: rgba(79,166,233,.12); }

.dx-table-carte { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: var(--panel, #141418); }
.dx-table { width: 100%; border-collapse: collapse; }
.dx-table th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3);
  font-weight: 600; padding: 12px 14px; background: rgba(255,255,255,.025); border-bottom: 1px solid rgba(255,255,255,.07); }
.dx-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; color: var(--tx); vertical-align: middle; }
.dx-table tr:last-child td { border-bottom: 0; }
.dx-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.dx-chip { font-family: var(--mono); font-size: 12px; padding: 3px 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.dx-gris { color: var(--tx3); }
.dx-alertes { display: flex; flex-direction: column; gap: 8px; }
.dx-alerte { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245,165,36,.45); background: rgba(245,165,36,.08); }
.dx-alerte.critique { border-color: rgba(236,106,94,.6); background: rgba(236,106,94,.1); }
.dx-alerte span { color: var(--tx2); font-size: 12.5px; }
@media (max-width: 640px) {
  .dx-hero { padding: 22px 18px; } .dx-titre { font-size: 34px; }
  .dx-grille { grid-template-columns: 1fr; } .dx-cells { grid-template-columns: repeat(2, 1fr); }
  .dx-cell:nth-child(3) { border-left: 0; } .dx-table-carte { overflow-x: auto; }
}

/* 🌶️ DoritoX — la carte cliquable et la FENÊTRE d'un téléphone (15/10/2026, concept des fenêtres
   d'AutoGrowth) : la grille dit l'essentiel, la fenêtre porte le secondaire. */
.dx-carte { cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease); }
.dx-carte:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(224,49,58,.25), 0 18px 40px -22px rgba(224,49,58,1); }
.dx-carte:focus-visible { outline: 2px solid var(--dx-or); outline-offset: 2px; }
.dx-carte-detail { position: absolute; right: 10px; top: 10px; font-size: 11.5px; font-weight: 600; color: #fff; padding: 3px 9px; border-radius: 7px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px); opacity: .85; }
.dx-carte:hover .dx-carte-detail { opacity: 1; border-color: rgba(245,165,36,.6); }
.dx-cells.trois { grid-template-columns: max-content minmax(0, 1fr) max-content; }

.dx-modal .modal-card { background: #121215; border: 1px solid rgba(255,255,255,.08); }
.dx-modal .modal-head { align-items: center; }
.dx-modal .modal-head h3 { font-size: 19px; font-weight: 800; color: var(--tx); }
.dx-modal-tete-droite { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.dx-modal-tete-droite .dx-logo { width: 28px; height: 26px; }
.dx-modal-tete-droite .x { margin-left: 0; width: 34px; height: 34px; border-radius: 50%; }
.dx-modal-ligne { height: 2px; margin: 0 18px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }
.dx-modal-ligne.ok { background: linear-gradient(90deg, transparent, #35d29a, transparent); box-shadow: 0 0 12px rgba(53,210,154,.6); }
.dx-modal-ligne.err { background: linear-gradient(90deg, transparent, #ec6a5e, transparent); box-shadow: 0 0 12px rgba(236,106,94,.6); }
.dx-modal .modal-body { display: flex; flex-direction: column; gap: 14px; }
.dx-modal-art { position: relative; height: 130px; border-radius: 12px; overflow: hidden; flex: none;
  background: url("/statique/doritox/banniere.jpg") 70% center / cover no-repeat; border: 1px solid rgba(245,165,36,.3); }
.dx-modal-art > .dx-logo { position: absolute; left: 12px; top: 10px; width: 44px; height: 41px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.dx-bloc { border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); overflow: hidden; }
.dx-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.dx-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: 13px; }
.dx-row + .dx-row { border-top: 1px solid rgba(255,255,255,.05); }
.dx-row > span { color: var(--tx3); flex: none; }
.dx-row > b { font-weight: 500; color: var(--tx); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dx-row .mono, .dx-bloc .mono { font-family: var(--mono); }
.dx-bloc .dx-table th, .dx-bloc .dx-table td { padding: 9px 14px; }
.dx-modal-ecarts { margin: 0; padding: 10px 14px 12px 32px; font-size: 13px; color: var(--tx2); }
.dx-modal-ecarts li.haute { color: var(--err); font-weight: 600; }
.dx-pad { margin: 0; padding: 12px 14px; font-size: 13px; }
.dx-rouge { color: var(--err); } .dx-vert { color: #35d29a; }
@media (max-width: 640px) { .dx-row { flex-direction: column; align-items: flex-start; gap: 4px; } .dx-row > b { text-align: left; } .dx-bloc { overflow-x: auto; } }
.dx-modal .modal-body > * { flex: none; }            /* les blocs gardent leur hauteur : c'est le corps qui défile */
.dx-bloc-tete .dx-kicker-mini { text-transform: uppercase; }

/* 🌶️ DoritoX — retouches du 15/10 (demande de l'utilisateur) : gris plus clairs, pastilles à FOND
   PLEIN (lisibles, même posées sur la bannière), boutons plus nets, carte épurée. */
.dx, .dx-modal { --tx2: rgba(255,255,255,.84); --tx3: rgba(255,255,255,.64); }
.dx-badge { height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600; gap: 6px;
  background: #1d1d22; border: 1px solid #34343c; color: #e6e6ea; backdrop-filter: none; }
.dx-badge i { font-size: 9px; }
.dx-badge.ok    { background: #0e2b21; border-color: #1f6b50; color: #4ee3ae; }
.dx-badge.err   { background: #3a1513; border-color: #8a2f28; color: #ff8a7e; }
.dx-badge.warn  { background: #3a2a0c; border-color: #8a6418; color: #ffbf47; }
.dx-badge.rouge { background: #3d1015; border-color: #8f222c; color: #ff7c84; }
.dx-badge.bleu  { background: #10263a; border-color: #2b5f8c; color: #8fcaf7; }
.dx-carte-etat .dx-badge, .dx-modal-art .dx-badge { background-color: #141418; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.dx-carte-etat .dx-badge.ok { background: #0e2b21; } .dx-carte-etat .dx-badge.err { background: #3a1513; }
.dx-carte-etat .dx-badge.warn { background: #3a2a0c; } .dx-carte-etat .dx-badge.bleu { background: #10263a; }

/* Les boutons : un seul langage — hauteur 38, rayon 11, fond plein, liseré fin. */
.dx-cta { height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13.5px; font-weight: 700; gap: 8px;
  background: linear-gradient(180deg, #e8424b, #c4252e); border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(224,49,58,.9); }
.dx-cta:hover { filter: brightness(1.07); }
.dx-act.large { height: 42px; padding: 0 14px; border-style: solid; background: #1b1b20; border-color: #33333b; gap: 10px; }
.dx-act.large:hover { background: #222229; border-color: #45454f; }
.dx-act.large b { font-size: 13px; } .dx-act.large small { font-size: 11px; color: var(--tx3); }
.dx-act.rond { width: 42px; height: 42px; background: #1b1b20; border-color: #33333b; }
.dx-act.rond:hover { background: #222229; }
.dx-act.rond.rouge { background: linear-gradient(180deg, #e8424b, #c4252e); border-color: rgba(255,255,255,.16); font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(224,49,58,.9); }
.dx-carte-detail { background: #141418; border-color: #3a3a42; opacity: 1; }

/* La carte épurée : le nom et iOS sur une ligne, une seule rangée de points, centrée. */
.dx-carte-ligne { align-items: center; }
.dx-carte-ligne .dx-carte-nom { margin: 0; font-size: 21px; }
.dx-cle { justify-content: flex-start; gap: 10px; white-space: nowrap; }
.dx-cle-pts { letter-spacing: .18em; line-height: 1; }
.dx-cle b { font-weight: 600; }

/* 🌶️ DoritoX — le SURVOL d'une carte (15/10/2026, comme les cartes de licence d'AutoGrowth) : la
   bannière zoome doucement dans son cadre, un halo rouge léger monte sous la carte. La bannière
   passe sur un pseudo-élément : un `background-size: cover` ne s'anime pas, un `transform` si. */
.dx-carte { transform: none; transition: box-shadow .35s var(--ease), border-color .35s var(--ease); }
.dx-carte:hover { transform: none; border-color: rgba(224,49,58,.6);
  box-shadow: 0 0 0 1px rgba(224,49,58,.18), 0 18px 38px -14px rgba(224,49,58,.55), 0 4px 14px -6px rgba(224,49,58,.35); }
.dx-carte-art { background: none; isolation: isolate; }
.dx-carte-art::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/statique/doritox/banniere.jpg") 70% center / cover no-repeat;
  transform: scale(1); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.dx-carte:hover .dx-carte-art::before { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .dx-carte-art::before, .dx-carte { transition: none; } .dx-carte:hover .dx-carte-art::before { transform: none; } }

/* 🌶️ DoritoX — le SQUELETTE du chargement (15/10/2026) : blocs gris FIXES, aux dimensions des vrais
   éléments, sans effet de lumière (demande de l'utilisateur). */
.dx-sq { display: block; border-radius: 7px; background: #1e1e24; }
.dx-sq-carte { cursor: default; border-color: #2a2a31; box-shadow: none; }
.dx-sq-carte:hover { border-color: #2a2a31; box-shadow: none; }
.dx-sq-art { background: #1a1a1f; border-color: #26262c; }
.dx-sq-art::before { display: none; }
.dx-sq.nom { width: 70px; height: 24px; } .dx-sq.ios { width: 78px; height: 24px; border-radius: 7px; }
.dx-sq.ligne { width: 62%; height: 14px; margin: 3px 0; }
.dx-sq.cl { width: 64px; height: 9px; } .dx-sq.cv { width: 46px; height: 17px; margin-top: 3px; }
.dx-sq.bouton { flex: 1; height: 42px; border-radius: 12px; } .dx-sq.rond { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.dx-sq-stat { border-color: rgba(255,255,255,.06); background: var(--panel, #141418); }
.dx-sq.ico { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.dx-sq.nb { width: 46px; height: 24px; } .dx-sq.lbl { width: 110px; height: 11px; margin-top: 7px; }
.dx-sq.td { width: 70%; height: 13px; }
.dx-sq.sous { width: 70px; height: 10px; margin-top: 7px; }
.dx-sq-carte .dx-carte-ligne { min-height: 30px; }
.dx-sq-carte .dx-cle { min-height: 42px; }
.dx-sq-carte .dx-cell { min-height: 54px; }
.dx-sq-stat { min-height: 103px; }
.dx-sq.td { height: 24px; }

/* DoritoX : la bulle CSS du système (::after) était rognée par les cartes et les blocs et restait
   sous la carte voisine — remplacée par la bulle flottante #dx-bulle (doritox.js), au premier plan. */
.dx [data-tip]::after, .dx [data-tip]::before, .dx-modal [data-tip]::after, .dx-modal [data-tip]::before { display: none !important; }
#dx-bulle { z-index: 100000; }

/* DoritoX : les trois actions de la carte (15/10) — trois carrés arrondis égaux, icône + libellé sur
   une ligne, même format (Check IP, Fix Tunnel, ＋ Container) ; le dernier en rouge. */
.dx-carte-barre .dx-act { flex: 1 1 0; min-width: 0; width: auto; height: 36px; padding: 0 8px; gap: 6px; border-radius: 9px;
  border: 1px solid #33333b; background: #1b1b20; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dx-carte-barre .dx-act:hover { background: #24242b; border-color: #45454f; }
.dx-carte-barre .dx-act > span { font-size: 13px; line-height: 1; }
.dx-carte-barre .dx-act.rouge { background: linear-gradient(180deg, #e8424b, #c4252e); border-color: rgba(255,255,255,.16); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.dx-carte-barre .dx-act.rouge:hover { background: linear-gradient(180deg, #ef4f58, #cc2c35); }
.dx-carte-barre .dx-sq.bouton { height: 36px; border-radius: 9px; }

/* DoritoX : la valeur des cases de la carte est centrée, le libellé reste à gauche (15/10). */
.dx-carte .dx-cell b { text-align: center; }

/* DoritoX : la bannière rouge plus visible (15/10) — plus large, fondu raccourci côté texte. */
.dx-hero-art { width: min(74%, 1000px); opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }

/* Comptes : qui a créé le conteneur (15/10/2026) — DX (DoritoX, rouge) ou CN (Crane, gris). */
.pp-co-four { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; color: #fff; }
.pp-co-four.dx { background: #c4252e; }
.pp-co-four.crane { background: #4a4a55; }

/* Comptes : la stratégie du compte (17/10/2026) — SPEED (orange) ou SAFE (bleu), un clic la change. */
.pp-co-strat { margin-left: 6px; padding: 1px 7px; border-radius: 6px; border: 0; font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: .05em; vertical-align: 1px; color: #fff; cursor: pointer; }
.pp-co-strat.speed { background: #c2410c; }
.pp-co-strat.safe { background: #2f5f8a; }
.pp-co-strat.ultrafast { background: #7c3aed; }
.pp-co-strat:disabled { opacity: .5; cursor: default; }

/* 📨 LA PAGE LIENS TELEGRAM (17/10/2026, `app/telegram_liens.py`) : bleu Telegram
   dominant (#2AABEE → #229ED9, les couleurs officielles de l'avion en papier),
   sur le même gabarit de carte que le reste — rien d'autre n'emprunte ce bleu. */
.tg { --tg-bleu: #2aabee; --tg-bleu-fonce: #229ed9; --tg-nuit: #17212b; display: flex; flex-direction: column; gap: 18px; }

.tg-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 30px 32px 26px; min-height: 160px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(42,171,238,.55) 0%, rgba(23,33,43,.55) 38%, transparent 70%),
              linear-gradient(180deg, #0c1016 0%, #0d0d10 100%);
  border: 1px solid rgba(42,171,238,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.tg-hero-txt { position: relative; z-index: 1; max-width: 640px; }
.tg-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; color: var(--tg-bleu); font-weight: 600; }
.tg-titre { margin: 6px 0 4px; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.tg-sous { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; max-width: 480px; }
.tg-canal { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,.55); }
.tg-canal:empty { display: none; }

.tg-stats { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.tg-stat { display: flex; flex-direction: column; gap: 2px; }
.tg-stat b { font-size: 26px; font-weight: 800; line-height: 1; color: #fff; }
.tg-stat span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tg-stat-attente b { color: var(--tg-bleu); }
.tg-stat-mesure { margin-left: 4px; }
.tg-hero-art { position: absolute; inset: 0 0 0 auto; width: min(40%, 320px); pointer-events: none;
  display: grid; place-items: center; opacity: .14; color: var(--tg-bleu);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.tg-hero-art svg { width: 70%; height: 70%; fill: currentColor; }

.tg-carte { border-radius: 16px; padding: 18px 20px; background: #111114; border: 1px solid rgba(42,171,238,.28);
  box-shadow: 0 0 0 1px rgba(42,171,238,.06), 0 14px 34px -24px rgba(42,171,238,.6); }
.tg-carte.tg-vide { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tg-carte-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.tg-carte-tete h3 { margin: 0; font-size: 17px; }

.tg-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; }
.tg-badge.off { color: var(--tx3); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }

/* La tuile d'ajout : une barre en tirets bleus, même esprit que le « ＋
   conteneur » de DoritoX (dx-act.large) — jamais un formulaire nu posé là. */
.tg-ajout { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border-radius: 12px;
  border: 1px dashed rgba(42,171,238,.4);
  background: repeating-linear-gradient(135deg, rgba(42,171,238,.05) 0 6px, rgba(42,171,238,.02) 6px 12px); }
.tg-ajout .tg-plane { width: 20px; height: 20px; flex: none; color: var(--tg-bleu); }
.tg-ajout .tg-plane svg { fill: currentColor; }
.tg-ajout .input { flex: 1; max-width: 360px; }

.tg-cta { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, var(--tg-bleu) 0%, var(--tg-bleu-fonce) 100%); box-shadow: 0 6px 18px -10px rgba(42,171,238,.9); }
.tg-cta:hover { filter: brightness(1.08); }
.tg-cta:disabled { filter: saturate(.5) brightness(.85); cursor: default; }
.tg-plane { display: inline-flex; width: 14px; height: 14px; }
.tg-plane svg { width: 100%; height: 100%; fill: #fff; }

/* La grille de comptes : une carte par nom, format DoritoX (dx-carte) réduit —
   pas de table nue pour trois colonnes et un bouton. */
.tg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tg-carte-compte { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  background: #15151a; border: 1px solid rgba(42,171,238,.22); }
.tg-cc-tete { display: flex; align-items: center; gap: 8px; }
.tg-cc-nom { font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-cc-lien { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(42,171,238,.08);
  border: 1px solid rgba(42,171,238,.18); font-family: var(--mono); font-size: 12px; min-width: 0; }
.tg-cc-lien a { color: var(--tg-bleu); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-cc-lien a:hover { text-decoration: underline; }
.tg-cc-pied { display: flex; align-items: center; gap: 8px; }
.tg-cc-pied .help { font-size: 11.5px; }

/* L'état vide : une carte illustrée, pas un texte flottant seul dans le vide. */
.tg-rien { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--tx3); }
.tg-rien-ico { width: 34px; height: 34px; color: rgba(42,171,238,.35); margin-bottom: 4px; }
.tg-rien-ico svg { width: 100%; height: 100%; fill: currentColor; }
.tg-rien p { margin: 0; }
.tg-rien p:first-of-type { color: var(--tx2); font-weight: 600; }