/* =====================================================================
   VIGIE — LA COQUE DU LOGICIEL AU QUOTIDIEN.

   ═══ TOUT CE QUI SUIT EST RELEVÉ DANS FIGMA ═══
   Fichier « Vigie », cadre « MacBook Pro 16" - 13 » (68:174), lu le
   06/08/2026. Plus une seule mesure devinée sur une capture d'écran :
   les nombres ci-dessous sont ceux du dessin.

   LE CADRE FAIT 1728 × 1117. La fenêtre de Vigie en fait 1280 × 820,
   et demain un autre écran fera autre chose. Toute mesure est donc
   écrite EN POINTS DE MAQUETTE, et une seule ligne — « --pt » — les
   traduit à la taille de l'écran :

       --pt = la largeur de l'écran ÷ 1728

   Sur un écran de 1728, le rendu vaut le dessin, point pour point. Sur
   la fenêtre de Vigie, tout vaut 0,74. Sur un grand écran, tout grandit
   un peu. Les deux bornes empêchent les excès : rien ne rapetisse
   au-delà de 0,74 (en dessous, c'est la mise en page qui se replie, pas
   le texte qui devient illisible), rien ne grossit au-delà de 1,12.

   CHAQUE TAILLE DE TEXTE A UN PLANCHER. Un texte de 12 points sur un
   cadre de 1728 ferait 9 pixels dans la fenêtre de Vigie : illisible.
   Le plancher n'est pas la valeur du dessin — c'est la limite en
   dessous de laquelle on ne lit plus. C'est le seul endroit où l'on
   s'écarte du dessin, et c'est pour qu'il reste lisible. Les grands
   textes, eux, suivent le facteur sans jamais buter sur leur plancher
   dans les tailles d'écran courantes.

   LES POLICES (directeur, 06/08/2026) : Nexa Pro ExtraBold pour les
   titres et les chiffres des cartes, Inter pour les sous-titres et le
   texte courant. Déclarées ici parce que cette feuille sert des écrans
   qui ne chargent pas entree.css — et une police qu'on oublie de
   déclarer se remplace en silence par celle du système.

   ═══ CE QUI NE BOUGE PAS RESTE EN HAUT ═══
   La barre de navigation et l'entête (le bonjour, la recherche, le
   bouton) sont fixes ; seuls les blocs du bas défilent, barre de
   défilement à droite. Une colonne souple, pas des hauteurs en dur :
   l'entête grandit sur un petit écran et le reste s'ajuste tout seul.
   ===================================================================== */

@font-face {
  font-family: "Nexa Pro";
  src: url("polices/NexaPro-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("polices/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

html { height: 100%; }

body.clair {
  /* ---- LE POINT DE MAQUETTE ---------------------------------------- */
  --pt: clamp(0.74px, calc(100vw / 1728), 1.12px);

  /* ---- LES COULEURS DU DESSIN --------------------------------------
     TOUTE couleur du logiciel passe par un de ces jetons. C'est ce qui
     rend le thème sombre possible : il n'a qu'à les retourner. Une
     seule couleur écrite en dur ailleurs, et c'est une carte blanche
     aveuglante au milieu d'un écran de nuit — un test l'interdit. */
  --fond: #ffffff;               /* le fond de la page */
  --encre: #090909;              /* le texte courant */
  --encre-titre: #0b0b0b;        /* le bonjour et les chiffres */
  /* ---- LES DEUX GRIS DE TEXTE, ET POURQUOI ILS SONT SI SOMBRES -------
     Ils portaient .40 et .30 : mesuré sur fond blanc, 2,73:1 et 2,05:1,
     là où la règle d'accessibilité demande 4,5:1 pour du texte de cette
     taille (aucun des deux ne sert à autre chose qu'à du texte, et
     aucune de leurs tailles n'atteint le seuil du « grand texte »).
     Toutes les phrases secondaires du produit étaient donc sous le
     seuil — les descriptions de réglage, les amorces de rubrique, les
     horodatages, les en-têtes de tableau.

     LE JETON EST CORRIGÉ, PAS LA RUBRIQUE QUI L'A RÉVÉLÉ. Le défaut a
     été relevé sur « Données et confidentialité », où une phrase
     illisible est un engagement illisible ; mais il n'a jamais été
     local, et une couleur posée au plus près de cette rubrique aurait
     fait un second endroit de vérité pour un même gris — exactement ce
     que ce fichier interdit trois lignes plus haut — tout en laissant
     les vingt-sept autres règles sous le seuil.

     LES DEUX GARDENT LEUR ORDRE : --gris-pale reste le plus discret des
     deux. L'écart entre eux se resserre, et c'est le prix à payer —
     avec une encre presque noire, deux niveaux de gris ne peuvent pas
     être à la fois distincts et tous deux lisibles. */
  --gris-texte: rgba(9, 9, 9, .62);
  --gris-pale: rgba(9, 9, 9, .58);
  --gris-bloc: rgba(217, 217, 217, .3);    /* le fond d'un bloc */
  --gris-champ: rgba(217, 217, 217, .5);   /* la recherche, la barre flottante */
  --gris-bord: #e4e6e4;
  --carte: #ffffff;                        /* une carte posée sur un bloc */
  --carte-survol: #fbfcfa;
  --carte-creuse: rgba(255, 255, 255, .7); /* un onglet survolé */
  --ombre: rgba(9, 9, 9, .10);
  --flottant: #ffffff;                     /* un panneau qui s'ouvre par-dessus */
  /* UN MENU QUI FLOTTE PAR-DESSUS UN ÉCRAN (liste d'une <select>,
     suggestions, tiroirs, tri) : sa surface et son liseré. La nuit, il
     doit être PLUS CLAIR que les fenêtres, sinon il s'y fond et paraît
     transparent (directeur, 19/10/2026). */
  --surface-flottante: #ffffff;
  /* LE RADAR D'UN PASSAGE EST TOUJOURS SUR LA NUIT (proposition A,
     19/10/2026), dans les deux thèmes : son disque, et ses noms. */
  --radar-nuit: #10180a;
  --radar-texte: #e6f0db;
  --bord-flottant: #e4e6e4;
  --segment-pris: #ffffff;                 /* le segment choisi d'un sélecteur */
  --voile: rgba(9, 9, 9, .35);             /* derrière une fenêtre */
  --ascenseur: #c9ccc4;
  --ascenseur-tenu: #adb1a7;
  /* LE VERT DE LA MARQUE NE SE RETOURNE PAS. Une marque qui change de
     couleur la nuit n'est plus une marque. */
  --vert-marque: #88c73b;
  /* LE VERT QUI S'ÉCRIT, ET CE QUI S'ÉCRIT SUR LE VERT — proposition 1
     du directeur (16/10/2026, planche à l'appui). Le vert de la marque
     reste celui des FONDS ; écrit en vert sur fond clair, il fonce d'un
     ton (5,2 pour 1 au lieu de 2). SUR UN FOND VERT, ON ÉCRIT EN BLANC :
     le directeur l'a redemandé le 18/10/2026, revenant sur l'encre de
     la proposition 1. Le détail des icônes posées sur le vert reste à
     l'encre, sans quoi elles perdraient leur second ton. */
  --vert-texte: #457a18;
  --sur-vert: #ffffff;
  --detail-sur-vert: #0b0b0b;
  --vert-voile: rgba(136, 199, 59, .2);
  --vert-actif: rgba(136, 199, 59, .15);   /* l'onglet en cours */
  --rouge-fond: rgba(235, 36, 21, .2);   --rouge-texte: #df0f00;
  --jaune-fond: rgba(242, 201, 76, .2);  --jaune-texte: #e7ae03;
  --bleu-fond: rgba(68, 138, 255, .2);   --bleu-texte: #448aff;
  /* LE JAUNE ET LE BLEU QUI S'ÉCRIVENT sur leur pastille pâle (statuts des
     listes, proposition B du 19/10/2026) : --jaune-texte et --bleu-texte
     y tombaient sous 3 pour 1 ; ceux-ci passent 4,5 pour 1. */
  --jaune-lisible: #7d5b00;  --bleu-lisible: #2559b8;  --rouge-lisible: #b00b00;
  --orange-fond: rgba(242, 153, 74, .3); --orange-texte: #d97e29;
  --gris-etiquette: rgba(128, 128, 128, .2); --gris-etiquette-texte: #505050;
  /* Ce que les autres écrans attendent encore de vigie.css. */
  --texte: var(--encre); --texte-2: var(--gris-texte); --texte-3: var(--gris-pale);
  --accent: var(--vert-sombre); --accent-fond: rgba(136, 199, 59, .12);
  --vert: var(--succes); --vert-fond: var(--succes-fond);
  --rouge: var(--alerte);
  --chaud: var(--jaune-texte); --chaud-fond: var(--jaune-fond);
  --bleu: var(--bleu-texte);

  /* ---- LES TAILLES DE TEXTE ----------------------------------------
     À gauche, la valeur relevée dans Figma. À droite, ce qu'elle donne
     dans la fenêtre de Vigie (× 0,74). Les tailles qui portent un
     plancher ne descendent jamais en dessous. */
  --police-titre: "Nexa Pro", "Inter", sans-serif;
  --t-titre:     max(30px,   calc(47 * var(--pt)));  /* 47 → 35 */
  --t-chiffre:   max(40px,   calc(80 * var(--pt)));  /* 80 → 59 */
  --t-suffixe:   max(18px,   calc(31 * var(--pt)));  /* 31 → 23 */
  --t-note:      max(20px,   calc(30 * var(--pt)));  /* 30 → 22 */
  --t-bloc:      max(16px,   calc(21 * var(--pt)));  /* 21 → 16 (plancher) */
  --t-source:    max(14px,   calc(19 * var(--pt)));  /* 19 → 14 */
  --t-tuile:     max(13.5px, calc(18 * var(--pt)));  /* 18 → 13,5 (plancher) */
  --t-base:      max(13.5px, calc(16 * var(--pt)));  /* nav, profil, recherche */
  --t-carte:     max(12px,   calc(13 * var(--pt)));  /* titre d'une carte */
  --t-petit:     max(11.5px, calc(12 * var(--pt)));  /* amorces, mentions */
  --t-mini:      max(10px,   calc(10 * var(--pt)));  /* un horodatage */
  --t-etiquette: max(9px,    calc(9  * var(--pt)));  /* « Actif », « dans 3 jours » */

  /* ---- LES MESURES DE LA MISE EN PAGE ------------------------------- */
  /* ---- LE MOUVEMENT ------------------------------------------------
     Repris tel quel du formulaire (static/entree.css) : même durée,
     même détente. C'est ce qui fait que les deux moitiés du logiciel
     ont le même tempérament — un logiciel posé, pas une page qui se
     remonte à chaque écran. */
  --temps: .26s;
  --detente: cubic-bezier(.22, 1, .36, 1);

  --marge: calc(76 * var(--pt));        /* la marge de droite du dessin */
  --rail: calc(132 * var(--pt));        /* la place réservée à gauche */
  /* LE RAYON UNIQUE, FIXE (décision du directeur, 20/08/2026) : « cette
     valeur sera pour tout type de rectangles dans Vigie », sauf le top
     bar et les barres de recherche. D'abord 30px au matin, puis « pour
     les angles des rectangles on va prendre 10px finalement » (le même
     jour) — et c'est POUR ce genre de revirement que la valeur vit dans
     un jeton : une ligne à changer, tout le logiciel suit.
     UN CHIFFRE EN DUR, PAS UN calc(N * var(--pt)) COMME LE RESTE DE CE
     BLOC : le rayon des coins ne doit plus respirer avec l'écran —
     10px reste 10px sur un petit comme sur un grand poste, alors que
     --marge ou --rail, eux, suivent --pt à dessein.
     DEUX JETONS POUR UNE SEULE VALEUR, ET C'EST VOULU : les fondre en un
     seul --rayon aurait obligé à réécrire chaque règle qui consomme l'un
     ou l'autre nom pour un gain nul, les deux valant désormais la même
     chose — le geste sûr est de porter les jetons existants, pas de les
     rebaptiser. */
  --rayon-bloc: 10px;
  --rayon-carte: 10px;
  /* La fenêtre du bas (directeur, 31/10/2026) : son haut très arrondi la distingue. */
  --rayon-feuille: calc(28 * var(--pt));
  --dedans-bloc: calc(28 * var(--pt));
  --ecart: calc(22 * var(--pt));
  --haut-champ: calc(53 * var(--pt));   /* recherche et bouton : 53 → 39 */
  --colonne-gauche: calc(463 * var(--pt));
  --colonne-sources: calc(321 * var(--pt));

  background: var(--fond); color: var(--encre);
  font: 400 var(--t-base)/1.45 "Inter", "Segoe UI", system-ui, sans-serif;
  margin: 0; height: 100dvh; display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── LA TAILLE DU TEXTE (rubrique Apparence, 13/08/2026) ────────────
   TOUTE la mise en page descend de « --pt » : la déplacer agrandit ou
   resserre l'écran entier PROPORTIONNELLEMENT. Aucune mesure ne se
   décale, puisqu'aucune n'est écrite en pixels.
   Le sélecteur porte « body.clair » et pas seulement « :root » : --pt
   est POSÉ sur le corps de page par la règle ci-dessus, et un réglage
   hérité ne redescend jamais par-dessus une valeur déjà posée sur
   l'élément lui-même — le même principe que la nuit, juste en dessous. */
:root[data-texte="petit"] body.clair { --pt: clamp(0.66px, calc(100vw / 1940), 1.00px); }
:root[data-texte="grand"] body.clair { --pt: clamp(0.83px, calc(100vw / 1540), 1.26px); }

/* ── LA DENSITÉ DES TABLEAUX ────────────────────────────────────────
   Les quatorze tableaux de Vigie sont des « table » nus : une seule
   mesure commande leur respiration. */
:root { --interligne: 11; }
:root[data-densite="compacte"] { --interligne: 6; }
:root[data-densite="aeree"] { --interligne: 17; }

/* ══════════════════════════════════════════════════════════════════
   LA NUIT.

   Le dessin du directeur n'a pas de version sombre, et je n'en ai pas
   inventé une : Vigie EN A DÉJÀ UNE. Les écrans d'entrée — connexion,
   inscription, le formulaire en huit étapes — se tiennent sur un fond
   de nuit depuis le premier jour, avec le même vert de marque. Ce jeu
   de couleurs est le leur, porté aux écrans de tous les jours.

   Une seule chose ne se retourne pas : le vert. Une marque qui change
   de couleur la nuit n'est plus une marque.

   Le fond n'est pas un noir pur mais un vert très sombre (#0a0c08),
   celui des écrans d'entrée : un noir absolu creuse les yeux sur un
   écran, et fait ressortir chaque bord.
   ══════════════════════════════════════════════════════════════════ */
/* LE NAVIGATEUR DOIT SAVOIR QUE L'ÉCRAN EST SOMBRE : sans cela, il
   dessine ses propres pièces — sélecteur de fichier, cases, calendrier
   des dates, barres de défilement — en clair au milieu de la nuit
   (relecture du dessin, 16/10/2026). */
:root[data-theme="sombre"] { color-scheme: dark; }
:root[data-theme="sombre"] body.clair {
  --fond: #0a0c08;
  --encre: #f4f6f1;
  /* Sur la nuit, le vert de la marque se lit déjà bien : il reste —
     écrit en valeur, comme toute couleur de ce bloc (le garde du
     thème compte les valeurs, pas les renvois). Le blanc sur le vert
     ne change pas non plus : le vert, lui, ne se retourne pas. */
  --vert-texte: #88c73b;
  --sur-vert: #ffffff;
  --detail-sur-vert: #0b0b0b;
  --encre-titre: #ffffff;
  /* LE SOMBRE N'ÉTAIT CONFORME QU'À MOITIÉ, et la moitié qui ne l'était
     pas n'avait jamais été mesurée : --gris-texte rendait bien 7,18:1,
     mais --gris-pale tombait à 3,33:1 sur le fond de nuit — sous le
     seuil, comme en clair. Seul le second bouge ici ; le premier est
     déjà bon et n'a aucune raison de changer. */
  --gris-texte: rgba(244, 246, 241, .62);
  --gris-pale: rgba(244, 246, 241, .52);
  --gris-bloc: rgba(255, 255, 255, .05);
  --gris-champ: rgba(255, 255, 255, .09);
  --gris-bord: rgba(255, 255, 255, .12);
  --carte: rgba(255, 255, 255, .07);
  --carte-survol: rgba(255, 255, 255, .11);
  --carte-creuse: rgba(255, 255, 255, .14);
  --ombre: rgba(0, 0, 0, .55);
  --flottant: #1a1d16;
  --surface-flottante: #2a2f24;
  --radar-nuit: #10180a;
  --radar-texte: #e6f0db;
  --bord-flottant: rgba(255, 255, 255, .16);
  --segment-pris: rgba(255, 255, 255, .16);
  --voile: rgba(0, 0, 0, .55);
  --ascenseur: rgba(255, 255, 255, .18);
  --ascenseur-tenu: rgba(255, 255, 255, .32);
  /* Les teintes de sens gardent leur famille, éclaircies : sur un fond
     de nuit, un rouge sombre ne se lit plus. */
  --vert-voile: rgba(136, 199, 59, .22);
  --vert-actif: rgba(136, 199, 59, .20);
  --rouge-fond: rgba(235, 36, 21, .22);   --rouge-texte: #ff7a6e;
  --jaune-fond: rgba(242, 201, 76, .18);  --jaune-texte: #f2c94c;
  --bleu-fond: rgba(68, 138, 255, .22);   --bleu-texte: #7aa9ff;
  --jaune-lisible: #f2c94c;  --bleu-lisible: #9cbcff;  --rouge-lisible: #ff7a6e;
  --orange-fond: rgba(242, 153, 74, .22); --orange-texte: #f2994a;
  --gris-etiquette: rgba(255, 255, 255, .12);
  --gris-etiquette-texte: rgba(244, 246, 241, .70);
  /* L'accent des écrans plus anciens : sur fond de nuit, le vert sombre
     ne se lit plus — c'est le vert de la marque qui prend le relais. */
  --accent: var(--vert-marque); --accent-fond: rgba(136, 199, 59, .18);
}

/* ------------------------------------------------------------ l'écran */
.ecran { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.barre-haut, .entete { flex: 0 0 auto; }
.defile { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
          overscroll-behavior: contain; }
/* Le haut de la zone qui défile suit le resserrement de l'entête
   (« réduire aussi l'espace du bas » — directeur, 20/08/2026) : 30 → 14. */
.dedans { padding: calc(14 * var(--pt)) var(--marge) calc(50 * var(--pt))
                  calc(var(--marge) + var(--rail)); }

/* ══════════════════════════════════════════════════════════════════
   LES ICÔNES — UNE SEULE MÉCANIQUE, PARTOUT.

   CONTOUR AU REPOS, PLEIN QUAND C'EST PRIS (directeur, 06/08/2026).
   Les deux dessins sont dans la page ; on n'en montre qu'un.

   ET LE FICHIER NE DONNE QUE LA FORME. Les icônes fournies n'ont pas
   toutes la même couleur — la maison « Accueil » est verte, les unes
   noires, les autres blanches. Posées telles quelles, la maison
   restait verte au repos, et les icônes noires se voyaient à peine sur
   la pastille verte. En pochoir, chacune prend la couleur de son
   texte, et il n'y a plus qu'une règle à tenir.
   ══════════════════════════════════════════════════════════════════ */
.ic { flex: 0 0 auto; display: block;
      width: calc(28 * var(--pt)); height: calc(28 * var(--pt));
      background: currentColor;
      -webkit-mask: var(--pochoir) center / contain no-repeat;
      mask: var(--pochoir) center / contain no-repeat; }
.plein { display: none; }
.actif > .plein, .ouvert > .plein { display: block; }
.actif > .contour, .ouvert > .contour { display: none; }

/* ══════════════════════════════════════════════════════════════════
   LES ICÔNES DE VIGIE — plein, deux tons, « plus de vert », avec le
   mouvement (validées par le directeur le 16/10/2026, d'après sa propre
   image de référence ; voir la macro « icone » de base.html).

   DEUX POCHOIRS SUPERPOSÉS par icône, un calque vert et un calque
   encre. Les couleurs viennent d'ici, selon l'état :
     au repos         vert de la marque et encre
     choisie          blanc et encre — sur la pastille verte, le vert
                      disparaîtrait
     la nuit          le calque encre suit --encre, blanc cassé
   ══════════════════════════════════════════════════════════════════ */
.icone { position: relative; display: block; flex: 0 0 auto;
         width: calc(28 * var(--pt)); height: calc(28 * var(--pt));
         --i-vert: var(--vert-marque); --i-encre: var(--encre); }
.icone > i { position: absolute; inset: 0;
             -webkit-mask: var(--p) center / contain no-repeat;
             mask: var(--p) center / contain no-repeat; }
.icone > .i-vert { background: var(--i-vert); }
.icone > .i-encre { background: var(--i-encre); }
.actif > .icone, .ouvert > .icone { --i-vert: #fff; --i-encre: var(--detail-sur-vert); }

/* LE MOUVEMENT : au survol, et une fois quand on choisit l'icône (la page
   qui s'ouvre l'anime en arrivant) — la cloche sonne, le radar balaie,
   les barres montent, l'étoile pétille. Bref, jamais en boucle : un
   logiciel qu'on regarde toute la journée ne doit pas s'agiter seul. Le
   point fixe de chaque mouvement est placé en part de l'icône (le
   dessin agrandi de 1,08 autour du centre, voir fabriquer_icones_vigie). */
@keyframes ic-sauter { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10%); }
                       70% { transform: translateY(2%); } }
@keyframes ic-tamponner { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } }
@keyframes ic-ouvrir { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-16deg); } }
@keyframes ic-balayer { to { transform: rotate(360deg); } }
@keyframes ic-monter { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.55); } }
@keyframes ic-sonner { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); }
                       45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
@keyframes ic-appuyer { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(7%); } }
@keyframes ic-petiller { 0%, 100% { transform: scale(1); opacity: 1; }
                         45% { transform: scale(1.6); opacity: .55; } }
.ic-appels-offres > .i-encre { transform-origin: 72.5% 72.5%; }
.ic-sources > .i-encre { transform-origin: 9.5% 27.5%; }
.ic-suivis > .i-encre { transform-origin: 62.2% 90.5%; }
.ic-notifications > .i-vert { transform-origin: 50% 8.6%; }
.ic-parametres > .i-vert { transform-origin: 50% 71.6%; }
.ic-favoris > .i-encre { transform-origin: 81.5% 81.5%; }
.ic-messages > .i-encre { transform-origin: 34.7% 77%; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-accueil > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-publications > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-appels-offres > .i-encre { animation: ic-tamponner .6s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-sources > .i-encre { animation: ic-ouvrir .6s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-passages > .i-encre { animation: ic-balayer .9s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-suivis > .i-encre { animation: ic-monter .6s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-notifications > .i-vert { animation: ic-sonner .7s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-parametres > .i-vert { animation: ic-tamponner .6s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-planning > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-heure-veille > .i-encre { animation: ic-appuyer .5s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-favoris > .i-encre { animation: ic-petiller .6s ease-in-out; }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-equipe > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, .actif, .ouvert, .ic-joue) > .ic-messages > .i-encre { animation: ic-tamponner .6s ease-in-out; }
/* LA SECONDE SÉRIE (rubriques des paramètres, petits outils — validée le
   17/10/2026) : la loupe cherche, l'avion s'envole, le cadenas
   s'entrouvre, le disque d'Apparence se retourne, la flèche de l'envoi
   monte, la croix tourne. */
@keyframes ic-envoler { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(10%, -10%); } }
@keyframes ic-retourner { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes ic-deverrouiller { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-11%); } }
@keyframes ic-chercher { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); }
                         65% { transform: rotate(10deg); } }
@keyframes ic-monter-fleche { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-11%); } }
@keyframes ic-tourner { 0% { transform: rotate(0); } 100% { transform: rotate(90deg); } }
@keyframes ic-glisser { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(12%); } }
.ic-veille > .i-encre { transform-origin: 50% 67%; }
.ic-donnees > .i-encre { transform-origin: 50% 55%; }
.ic-tri > .i-vert { z-index: 1; }   /* les curseurs par-dessus leurs rails */
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-veille > .i-encre { animation: ic-tamponner .6s ease-in-out; }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-publication > i { animation: ic-envoler .6s ease-in-out; }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-cabinet > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-apparence > i { animation: ic-retourner .6s ease-in-out; }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-appareils > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-donnees > .i-encre { animation: ic-tamponner .6s ease-in-out; }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-securite > .i-encre { animation: ic-deverrouiller .6s ease-in-out; }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-apropos > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-recherche > i { animation: ic-chercher .6s ease-in-out; }
:is(a:hover, summary:hover, .actif, .ouvert) > .ic-tri > .i-vert { animation: ic-glisser .6s ease-in-out; }
.ic-cherche::before, .ic-cherche::after { transform-origin: 42% 42%; }
.ic-filtre::before { transform-origin: 50% 35%; }
:is(a, button, summary, form):hover > .ic-cherche::before,
:is(a, button, summary, form):hover > .ic-cherche::after { animation: ic-chercher .6s ease-in-out; }
:is(a, button, summary):hover > .ic-filtre::before { animation: ic-tamponner .6s ease-in-out; }
:is(a, button, summary):hover > .ic-verser::before { animation: ic-monter-fleche .6s ease-in-out; }
:is(a, button, summary):hover > .ic-plus::before,
:is(a, button, summary):hover > .ic-plus::after { animation: ic-tourner .5s ease-in-out; }
:is(a, button, summary):hover > .ic-plus-actions::before { animation: ic-tamponner .6s ease-in-out; }
:is(a, button, summary):hover > .ic-fermer::before,
:is(a, button, summary):hover > .ic-fermer::after { animation: ic-tourner .5s ease-in-out; }
/* LES TUILES (proposition A, validée le 17/10/2026) bougent au survol de
   la tuile entière : la plume écrit, l'horloge sursaute, la coche se
   tamponne, la feuille de Word et la grille d'Excel aussi. */
@keyframes ic-ecrire { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-7%, 7%); }
                       55% { transform: translate(3%, -3%); } 80% { transform: translate(-4%, 4%); } }
.ic-retenus > .i-encre { transform-origin: 50% 42%; }
.ic-tableur > .i-vert { transform-origin: 50% 70%; }
.tuile:hover .ic-a-valider > .i-encre { animation: ic-ecrire .8s ease-in-out; }
.tuile:hover .ic-appels-en-cours > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.tuile:hover .ic-retenus > .i-encre { animation: ic-tamponner .6s ease-in-out; }
.choix-format a:hover .ic-document > .i-encre { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.choix-format a:hover .ic-tableur > .i-vert { animation: ic-tamponner .6s ease-in-out; }
/* LE MOUVEMENT SE COUPE POUR QUI L'A DEMANDÉ — à l'ordinateur, ou dans la
   rubrique Apparence ; « complet » passe outre, comme pour le radar. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-mouvement="complet"]) .icone > i { animation: none !important; }
  :root:not([data-mouvement="complet"]) :is(.ic-cherche, .ic-filtre, .ic-verser, .ic-plus, .ic-plus-actions, .ic-fermer)::before,
  :root:not([data-mouvement="complet"]) :is(.ic-cherche, .ic-filtre, .ic-verser, .ic-plus, .ic-plus-actions, .ic-fermer)::after { animation: none !important; }
}
:root[data-mouvement="reduit"] .icone > i { animation: none !important; }
:root[data-mouvement="reduit"] :is(.ic-cherche, .ic-filtre, .ic-verser, .ic-plus, .ic-plus-actions, .ic-fermer)::before,
:root[data-mouvement="reduit"] :is(.ic-cherche, .ic-filtre, .ic-verser, .ic-plus, .ic-plus-actions, .ic-fermer)::after { animation: none !important; }

/* ------------------------------------------------------ la barre du haut */
.barre-haut {
  display: flex; align-items: center; gap: calc(24 * var(--pt));
  padding: calc(62 * var(--pt)) var(--marge) calc(24 * var(--pt))
           calc(69 * var(--pt));
}
/* Le logotype fourni par le directeur : 126 × 38 sur le dessin, cible
   et mot compris. Il n'y a rien à côté — donc rien à accorder. */
.marque { display: flex; align-items: center; flex: 0 0 auto;
          text-decoration: none; }
/* LA HAUTEUR EST LA MESURE, PAS LA LARGEUR. Les deux fichiers n'ont
   pas exactement les mêmes proportions ; imposer 126 × 38 aux deux en
   étirerait un. À hauteur égale, chacun garde sa forme. */
.marque img { height: calc(38 * var(--pt)); width: auto; display: block; }
/* Un logotype par thème : on n'en montre qu'un. */
.marque .nuit { display: none; }
:root[data-theme="sombre"] .marque .jour { display: none; }
:root[data-theme="sombre"] .marque .nuit { display: block; }

/* La pilule de navigation : 774 × 71 sur le dessin, onglet pris 108 × 40. */
.menu {
  display: flex; align-items: center; gap: calc(4 * var(--pt));
  background: var(--gris-bloc); border-radius: 999px;
  height: calc(71 * var(--pt)); padding: 0 calc(23 * var(--pt));
  margin: 0 auto; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  display: flex; align-items: center; gap: calc(9 * var(--pt));
  height: calc(40 * var(--pt)); padding: 0 calc(14 * var(--pt));
  border-radius: 999px; text-decoration: none; color: var(--encre);
  font-size: var(--t-base); white-space: nowrap;
}
/* L'ONGLET SÉLECTIONNÉ : pastille verte pleine, texte et icône blancs
   (maquette du directeur, 06/08/2026). */
.menu a.actif { background: var(--vert-marque); color: var(--sur-vert); font-weight: 600; }
.menu a:hover:not(.actif) { background: var(--carte-creuse); }
.menu .ic, .menu .icone { width: max(15px, calc(22 * var(--pt)));
                    height: max(15px, calc(22 * var(--pt))); }

.qui { display: flex; align-items: center; gap: calc(14 * var(--pt)); flex: 0 0 auto; }
.rond {
  position: relative; width: calc(52 * var(--pt)); height: calc(52 * var(--pt));
  border-radius: 50%; background: var(--gris-bloc); display: flex;
  align-items: center; justify-content: center; text-decoration: none;
  flex: 0 0 auto;
  /* LA COULEUR DU LIEN COMMANDE CELLE DE L'ICÔNE. Sans cette ligne,
     un lien sans couleur déclarée prend le bleu du navigateur — et le
     pochoir avec lui : la cloche et l'engrenage sortaient en bleu. */
  color: var(--encre);
}
.rond:hover { background: var(--gris-champ); }
.rond .ic, .rond .icone { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
/* Fenêtre ouverte, le bouton se montre — comme un onglet pris. */
.rond.ouvert { background: var(--vert-marque); color: var(--sur-vert); }
.pastille-rond {
  position: absolute; top: calc(-3 * var(--pt)); right: calc(-3 * var(--pt));
  min-width: calc(20 * var(--pt)); height: calc(20 * var(--pt));
  border-radius: 999px; background: var(--vert-marque); color: var(--sur-vert);
  font-size: var(--t-etiquette); font-weight: 700; display: flex;
  align-items: center; justify-content: center; padding: 0 calc(5 * var(--pt));
}
.carte-qui {
  display: flex; align-items: center; gap: calc(12 * var(--pt));
  text-decoration: none; color: inherit; border-radius: 999px;
  padding: calc(4 * var(--pt)); min-width: 0;
}
.carte-qui:hover { background: var(--gris-bloc); }
/* LE DESSIN DONNE 70 POINTS ; le directeur l'a trouvé trop lourd dans
   la barre du haut et l'a fait réduire (06/08/2026). Le texte à côté
   suit : le premier nom et le rôle se lisent très bien en petit. */
.portrait {
  width: calc(52 * var(--pt)); height: calc(52 * var(--pt));
  border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--gris-bord);
  background: var(--gris-champ) center / cover no-repeat; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  font-size: var(--t-carte); font-weight: 600; color: var(--gris-texte);
}
/* Sur l'écran du compte, il reprend sa vraie taille : c'est là qu'on
   le regarde et qu'on le change. */
.portrait.grand { width: calc(96 * var(--pt)); height: calc(96 * var(--pt));
                  font-size: var(--t-note); }
/* DEUX LIGNES, PAS TROIS. « Deilex — Audit et Conseil » passait à la
   ligne et poussait le rôle sur une troisième : la barre du haut
   grandissait, et tout l'alignement partait avec elle. */
.qui-texte { min-width: 0; line-height: 1.35; }
.qui-texte b { display: block; font-size: var(--t-carte); font-weight: 700;
               white-space: nowrap; }
.qui-texte > span { display: block; font-size: var(--t-carte); font-weight: 400;
                    white-space: nowrap; }
.qui-texte em { font-style: normal; color: var(--vert-texte); }

/* --------------------------------------------------- la barre flottante */
/* Sur le dessin : une pilule de 71 × 266 posée à 69 du bord, quatre
   ronds blancs de 50, espacés de 11. */
.rail {
  position: fixed; left: calc(69 * var(--pt)); top: 50%;
  transform: translateY(-50%); background: var(--gris-champ);
  border-radius: 999px; padding: calc(16 * var(--pt)) calc(10 * var(--pt));
  display: flex; flex-direction: column; gap: calc(11 * var(--pt)); z-index: 30;
}
.rail a {
  width: calc(50 * var(--pt)); height: calc(50 * var(--pt));
  border-radius: 50%; background: var(--carte);
  display: flex; align-items: center; justify-content: center;
  color: var(--encre);   /* c'est elle que le pochoir suit */
}
.rail a:hover { background: var(--carte-survol); }
.rail a.ouvert { background: var(--vert-marque); color: var(--sur-vert); }

/* --------------------------------------------------- l'entête de l'écran */
/* Le bonjour commence à 208 sur le dessin — soit la marge plus la place
   de la barre flottante, exactement comme les blocs du bas. */
.entete {
  display: flex; align-items: flex-start; gap: calc(30 * var(--pt));
  /* RESSERRÉ (« réduire l'espace entre les éléments du top bar et les
     éléments où il y a la barre recherche, réduire aussi l'espace du
     bas » — directeur, 20/08/2026) : 40 → 16 en haut, 17 → 8 en bas. */
  padding: calc(16 * var(--pt)) var(--marge) calc(8 * var(--pt))
           calc(var(--marge) + var(--rail));
}
/* PLUS PETIT QUE LES TITRES DE PAGE (« on va diminuer le texte de
   salutations » — directeur, 20/08/2026) : la salutation accueille,
   elle n'a pas besoin de crier — 47 points de maquette ramenés à 32,
   même plancher de lisibilité que le reste. */
.entete h1 { font-size: max(22px, calc(32 * var(--pt)));
             color: var(--encre-titre);
             margin: 0 0 calc(6 * var(--pt)); }
.entete .sous-titre { font-size: var(--t-petit); margin: 0;
                      max-width: calc(481 * var(--pt)); }
/* UNE SEULE LIGNE, SELON L'HEURE (directeur, 18/10/2026) : les dix
   salutations tournantes et leur fondu sont partis. */
.bonjour { min-width: 0; }
.outils { margin-left: auto; display: flex; flex-wrap: wrap;
          justify-content: flex-end; gap: calc(14 * var(--pt));
          align-items: center; flex: 0 0 auto; }
/* L'avancement d'un passage prend sa propre ligne sous le bouton : en
   troisième élément de la rangée, il poussait la recherche de côté à
   chaque mot qu'il affichait. */
#etat-passage { width: 100%; text-align: right; margin: 0; }
#etat-passage:empty { display: none; }

/* La recherche et le bouton : 414 × 53 et 207 × 53 sur le dessin. */
.cherche { display: flex; align-items: center; gap: calc(14 * var(--pt));
           background: var(--gris-champ); border: 0; border-radius: 999px;
           padding: 0 calc(30 * var(--pt)); height: var(--haut-champ);
           position: relative; }
/* LA LISTE DE SUGGESTIONS DE L'ACCUEIL (étape 4, recherche vive,
   20/08/2026) — accrochée SOUS la pilule, MÊME FAMILLE QUE .tiroir (le
   menu du compte, plus haut dans ce fichier) : un panneau qui se pose
   SUR la page prend le rayon des BLOCS (--rayon-carte, « un
   rectangle de fond »), JAMAIS celui de la pilule (999px) — la pilule
   est réservée aux barres et aux boutons eux-mêmes, pas à ce qu'ils
   ouvrent. « position: relative » ci-dessus vaut pour TOUTE barre de
   recherche (harmless : elle ne change rien tant qu'aucun enfant n'est
   positionné en absolu) — seule celle de l'accueil porte la liste. */
.suggestions {
  position: absolute; z-index: 5; top: calc(100% + 6 * var(--pt));
  left: 0; right: 0; margin: 0; padding: calc(8 * var(--pt));
  list-style: none; background: var(--surface-flottante);
  border: 1px solid var(--bord-flottant); border-radius: var(--rayon-carte);
  box-shadow: 0 14px 40px var(--ombre);
  max-height: calc(320 * var(--pt)); overflow-y: auto;
}
.suggestions[hidden] { display: none; }
.suggestions li + li { margin-top: calc(2 * var(--pt)); }
.suggestions a {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(10 * var(--pt)); padding: calc(9 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(10 * var(--pt)); text-decoration: none;
  color: var(--encre); font-size: var(--t-petit);
}
.suggestions a:hover, .suggestions a.survolee { background: var(--gris-bloc); }
.suggestions .suggestion-type {
  flex: none; font-size: var(--t-etiquette); color: var(--gris-texte);
}
.cherche:focus-within { background: rgba(217, 217, 217, .75); }
.cherche .icone { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); flex: 0 0 auto; }
/* LE CHAMP DE RECHERCHE N'A PAS DE CADRE À LUI. Sans un sélecteur plus
   précis que « input[type=text] », la règle commune des formulaires —
   écrite plus bas, donc gagnante à égalité — lui rendait bordure et fond
   blanc : un rectangle dessiné à l'intérieur de la pilule. */
.cherche input[type=text] {
  border: 0; background: none; box-shadow: none; padding: 0;
  font: 400 var(--t-base) "Inter", sans-serif; width: calc(292 * var(--pt));
  max-width: 100%; color: var(--encre); outline: none; border-radius: 0;
}
.cherche input[type=text]::placeholder { color: var(--encre); opacity: .55; }
.cherche input[type=text]:focus { outline: none; border: 0; }
.bouton-vert { background: var(--vert-marque); color: var(--sur-vert); border: 0;
               border-radius: 999px; height: var(--haut-champ);
               min-width: calc(207 * var(--pt)); padding: 0 calc(26 * var(--pt));
               font: 700 var(--t-base) "Inter", sans-serif;
               cursor: pointer; white-space: nowrap; }
.bouton-vert:hover { background: var(--vert-sombre); }
.bouton-vert:active { transform: translateY(1px); }
.bouton-vert:disabled { opacity: .6; cursor: default; transform: none; }

/* « Ajouter un site » ouvre une FENÊTRE, donc c'est un lien, pas un
   envoi : rien n'est écrit tant que le directeur n'a pas rempli la
   fenêtre. Un lien n'a ni la hauteur ni le centrage d'un bouton — cette
   règle les lui rend, sans toucher aux vrais boutons. */
a.lien-bouton { display: inline-flex; align-items: center;
                justify-content: center; text-decoration: none; }

/* Un seul geste possible à cet instant : le bouton prend toute la largeur,
   comme la maquette de la fenêtre « Ajouter un site » le montre. Posée ici,
   avec les autres boutons — et NON dans la section de la fenêtre, où un
   test interdit à juste titre toute règle qui déborderait sur le reste du
   logiciel. */
.bouton-vert.pleine-largeur { width: 100%; }

/* --------------------------------------------------------- les titres */
/* LA GRANDE TAILLE APPARTIENT AU BONJOUR, PAS À TOUS LES TITRES. Un
   « h1 » de 47 points sur un écran de réglages écrase le reste de la
   page ; seule l'entête du tableau de bord y a droit. */
h1 { font-family: var(--police-titre); font-weight: 800;
     font-size: max(20px, calc(28 * var(--pt))); line-height: 1.25;
     color: var(--encre-titre); margin: 0 0 calc(8 * var(--pt)); }
h2 { font-family: var(--police-titre); font-weight: 800; font-size: var(--t-tuile);
     margin: calc(26 * var(--pt)) 0 calc(12 * var(--pt)); }
.sous-titre { color: var(--encre); font-size: var(--t-petit); line-height: 1.5;
              margin: 0 0 calc(20 * var(--pt)); }
/* Le pied « Généré le… » est parti avec sa règle (directeur,
   20/08/2026). */
.page-simple { padding-top: calc(26 * var(--pt)); }

/* ══ L'ACCUEIL A (choisi par le directeur le 18/10/2026) ══════════════
   Trois chiffres, puis deux listes SANS CADRE : plus de blocs gris
   empilés, plus de phrase sous les titres. L'air vient des marges, pas
   des bordures. */
.accueil-a { display: flex; flex-direction: column; gap: calc(46 * var(--pt));
             padding-bottom: calc(30 * var(--pt)); }
.accueil-a .tuiles { display: grid; align-items: start; gap: var(--ecart);
                     grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
/* Une tuile : le chiffre en grand, son nom dessous, la pastille à droite.
   Toute la tuile est le lien ; plus de phrase au pied ni de flèche. */
.tuile { display: grid; grid-template-columns: minmax(0, 1fr) auto;
         grid-template-rows: auto auto; column-gap: calc(16 * var(--pt));
         align-items: end; background: var(--gris-bloc);
         border-radius: var(--rayon-bloc);
         padding: calc(28 * var(--pt)) calc(30 * var(--pt));
         text-decoration: none; color: inherit; }
.tuile .gros { grid-row: 1; font-family: var(--police-titre); font-weight: 800;
               font-size: var(--t-chiffre); line-height: 1; letter-spacing: -.02em;
               color: var(--encre-titre); }
.tuile .nom { grid-row: 2; margin-top: calc(10 * var(--pt));
              font-size: var(--t-carte); color: var(--gris-texte); }
.tuile .rond-icone { grid-column: 2; grid-row: 1 / 3; align-self: center;
                     width: calc(80 * var(--pt)); height: calc(80 * var(--pt));
                     border-radius: 999px; display: flex;
                     align-items: center; justify-content: center; }
.tuile .rond-icone .icone { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); }
/* CHAQUE TUILE GARDE SA COULEUR (proposition A, 17/10/2026) : la masse
   de l'icône prend celle de sa pastille ; le détail reste à l'encre. */
.rond-vert { background: var(--vert-voile); }
.rond-chaud { background: var(--jaune-fond); }
.rond-bleu { background: var(--bleu-fond); }
.rond-vert .icone { --i-vert: var(--vert-marque); }
.rond-chaud .icone { --i-vert: var(--jaune-texte); }
.rond-bleu .icone { --i-vert: var(--bleu-texte); }
/* LE CHOIX DE LA PÉRIODE — le rond ouvre le tiroir jour/semaine/mois
   « comme les autres boutons de tri » (directeur, 20/08/2026). */
.tri-du-bloc > summary { cursor: pointer; }
.tri-du-bloc > summary .icone { width: calc(24 * var(--pt));
                                height: calc(24 * var(--pt)); }

/* LES DEUX LISTES : le fil (et les échéances au-dessus) à gauche,
   l'équipe à droite. Sans fil ni échéance, l'équipe prend la largeur. */
.deux-blocs { display: grid; align-items: start; gap: calc(56 * var(--pt));
              grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.deux-blocs.seul { grid-template-columns: minmax(0, 1fr); }
.colonne-fil { display: grid; gap: calc(40 * var(--pt)); min-width: 0; }
.liste-a { min-width: 0; }
.t-bloc { display: flex; align-items: baseline; gap: calc(12 * var(--pt));
          margin-bottom: calc(6 * var(--pt)); }
.t-bloc h2 { margin: 0; font-size: var(--t-bloc); }
.tout-voir { margin-left: auto; flex: 0 0 auto; font-size: var(--t-base);
             font-weight: 500; color: var(--vert-texte); text-decoration: none; }
.tout-voir:hover { text-decoration: underline; }
/* Des rangées séparées d'un trait fin, sans fond ni ombre. */
.liste-a > .signal, .liste-a > .echeance, .liste-a > .geste {
  display: flex; align-items: center; gap: calc(18 * var(--pt));
  border-top: 1px solid var(--gris-bord); padding: calc(17 * var(--pt)) 0;
  text-decoration: none; color: inherit; }
.liste-a .texte { display: flex; flex-direction: column; gap: calc(4 * var(--pt));
                  min-width: 0; }
.liste-a .texte b { font-weight: 600; font-size: var(--t-carte); line-height: 1.35;
                    color: var(--encre); overflow-wrap: anywhere; }
.liste-a .texte .sous { font-size: var(--t-petit); color: var(--gris-texte); }
.echeance:hover .texte b { color: var(--vert-texte); }
.delai { margin-left: auto; flex: 0 0 auto; font-size: var(--t-etiquette);
         font-weight: 700; border-radius: 999px; white-space: nowrap;
         min-width: calc(76 * var(--pt)); height: calc(25 * var(--pt));
         display: inline-flex; align-items: center; justify-content: center; }
.d-rouge { background: var(--rouge-fond); color: var(--rouge-texte); }
.d-chaud { background: var(--jaune-fond); color: var(--jaune-texte); }
.d-calme { background: var(--vert-voile); color: var(--vert-texte); }
/* La note du fil : sur 100, dite au survol (attribut title). */
.note-ronde { flex: 0 0 auto; width: calc(54 * var(--pt)); height: calc(54 * var(--pt));
              border-radius: 999px; display: flex; align-items: center;
              justify-content: center; font-family: var(--police-titre);
              font-size: var(--t-petit); font-weight: 800; }
.n-5 { background: var(--vert-voile); color: var(--vert-texte); }
.n-4 { background: var(--bleu-fond); color: var(--bleu-texte); }
.n-3 { background: var(--orange-fond); color: var(--orange-texte); }
.liste-a > .geste { gap: calc(14 * var(--pt)); font-size: var(--t-petit); }
.geste .portrait { width: calc(40 * var(--pt)); height: calc(40 * var(--pt));
                   font-size: var(--t-petit); border: 0; background: var(--jaune-fond); }
.texte-geste { min-width: 0; overflow-wrap: anywhere; }
.texte-geste b { font-weight: 600; }
.geste time { margin-left: auto; flex: 0 0 auto; white-space: nowrap;
              color: var(--gris-texte); font-size: var(--t-mini); }
.ligne-vide { margin: 0; padding: calc(17 * var(--pt)) 0; color: var(--gris-texte);
              border-top: 1px solid var(--gris-bord); font-size: var(--t-petit); }

/* Les blocs gris des autres écrans (rubriques, petites fenêtres). */
.colonne { display: grid; gap: var(--ecart); min-width: 0; }
.bloc { background: var(--gris-bloc); border-radius: var(--rayon-bloc);
        padding: var(--dedans-bloc); min-width: 0; }
.bloc h3 { font-family: var(--police-titre); font-weight: 800;
           font-size: var(--t-bloc); line-height: 1.25;
           color: var(--encre); margin: 0 0 calc(8 * var(--pt)); }
.bloc .amorce { font-size: var(--t-petit); color: var(--encre);
                margin: 0 0 calc(16 * var(--pt)); line-height: 1.4; }
/* LE TEXTE D'UNE CARTE NE POUSSE JAMAIS SA CARTE : un mot sans espace
   (une adresse web collée) élargirait sa boîte et la colonne entière. */
.action > div, .mention > div { min-width: 0; }
.action .quoi, .mention .dit { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ l'équipe */
/* Des pilules de 533 × 74, portrait rond de 64, « Détail » en vert. */
.action { display: flex; align-items: center; gap: calc(14 * var(--pt));
          background: var(--carte); border-radius: 999px;
          padding: calc(5 * var(--pt)) calc(24 * var(--pt)) calc(5 * var(--pt))
                   calc(9 * var(--pt));
          margin-bottom: calc(8 * var(--pt)); min-height: calc(74 * var(--pt)); }
.action .portrait { width: calc(64 * var(--pt)); height: calc(64 * var(--pt));
                    font-size: var(--t-tuile); border: 0;
                    background: var(--jaune-fond); }
.action .qui-a-fait { font-size: var(--t-petit); font-weight: 700; margin: 0;
                      color: var(--encre); }
.action .qui-a-fait span { font-weight: 400; }
.action .quoi { font-size: var(--t-petit); color: var(--encre);
                margin: calc(4 * var(--pt)) 0 0; }
.action .quoi time { color: var(--gris-texte); font-size: var(--t-mini);
                     margin-left: calc(8 * var(--pt)); }
.detail-lien { margin-left: auto; flex: 0 0 auto; font-size: var(--t-base);
               font-weight: 500; color: var(--vert-texte);
               text-decoration: none; white-space: nowrap; }
.detail-lien:hover { text-decoration: underline; }

/* ------------------------------------------------ les choix d'un réglage */
.choix { display: flex; flex-wrap: wrap; align-items: center;
         gap: calc(12 * var(--pt)) calc(26 * var(--pt));
         margin: 0 0 calc(18 * var(--pt)); }
.choix label { display: flex; align-items: center; gap: calc(9 * var(--pt));
               font-size: var(--t-carte); }
.jours label { color: var(--gris-texte); }

/* --------------------------------------------------- les mentions reçues */
.bloc-etroit { max-width: calc(720 * var(--pt)); }
.mention { display: flex; gap: calc(14 * var(--pt)); align-items: flex-start;
           padding: calc(14 * var(--pt)) calc(6 * var(--pt));
           border-top: 1px solid var(--gris-bord);
           text-decoration: none; color: inherit; border-radius: var(--rayon-carte); }
.mention:first-of-type { border-top: 0; }
.mention:hover { background: var(--gris-bloc); }
.mention-corps { flex: 1; min-width: 0; }
.mention .qui { font-size: var(--t-carte); font-weight: 700; margin: 0; }
.mention .qui time { font-weight: 400; color: var(--gris-texte);
                     font-size: var(--t-mini); margin: 0 calc(8 * var(--pt)); }
.mention .discret { margin: calc(5 * var(--pt)) 0 0; }
.mention .vers { flex: none; font-size: var(--t-petit); }

/* ══ LES FENÊTRES REFAITES (refonte validée le 18/10/2026) ═══════════
   Un même langage partout : le sous-titre dans l'en-tête, les listes en
   rangées avec leurs actions à droite, deux colonnes quand la fenêtre
   porte deux choses, une carte pour le profil. */
.popup-titres { display: flex; flex-direction: column; min-width: 0; }
.popup-legende { margin: calc(3 * var(--pt)) 0 0; font-size: var(--t-petit);
                 color: var(--gris-texte); line-height: 1.4; max-width: calc(720 * var(--pt)); }
.rangees { background: var(--gris-bloc); border-radius: var(--rayon-carte); }
.rangee { display: flex; align-items: center; gap: calc(12 * var(--pt)); flex-wrap: wrap;
          padding: calc(11 * var(--pt)) calc(16 * var(--pt));
          border-top: 1px solid var(--gris-bord); }
.rangee:first-child { border-top: 0; }
.rangee > .icone { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.rangee-texte { display: flex; flex-direction: column; flex: 1; min-width: calc(140 * var(--pt)); }
.rangee-texte b { font-size: var(--t-carte); font-weight: 600; }
.rangee-texte .discret { font-size: var(--t-petit); }
.rangee form { margin: 0; }
.rangee.retire { opacity: .6; }
.rangee .role-fixe { white-space: nowrap; }
.rangee .peut-publier label { display: inline-flex; align-items: center; gap: calc(8 * var(--pt));
                              font-size: var(--t-petit); white-space: nowrap; }
select.liste-mini { font-size: var(--t-petit); padding-top: calc(6 * var(--pt));
                    padding-bottom: calc(6 * var(--pt)); background-color: var(--fond); }
.pied-fenetre { margin: calc(14 * var(--pt)) 0 0; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
                 gap: calc(26 * var(--pt)); align-items: start; }
.deux-colonnes.egales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: calc(10 * var(--pt)); }
.deux-colonnes h2:first-child, .colonne-cote > h2:first-child { margin-top: 0; }
.panneau-fenetre { display: flex; flex-direction: column; align-items: stretch;
                   gap: calc(10 * var(--pt)); background: var(--gris-bloc);
                   border-radius: var(--rayon-carte); padding: calc(16 * var(--pt)); }
.panneau-fenetre form { margin: 0; }
.panneau-fenetre .discret { margin: 0; }
.portrait.petit { width: calc(36 * var(--pt)); height: calc(36 * var(--pt));
                  font-size: var(--t-petit); background: var(--vert-voile);
                  border-color: transparent; color: var(--vert-texte); }
.bulle { background: var(--gris-bloc); border-radius: var(--rayon-carte); margin: calc(6 * var(--pt)) 0 0;
         padding: calc(9 * var(--pt)) calc(13 * var(--pt)); font-size: var(--t-petit); color: var(--encre); }
.mention:hover .bulle { background: var(--fond); }
.carte-profil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(28 * var(--pt));
                align-items: center; background: var(--gris-bloc); border-radius: var(--rayon-carte);
                padding: calc(22 * var(--pt)) calc(26 * var(--pt)); margin: 0 0 calc(18 * var(--pt)); }
.carte-profil .portrait-choix { flex-direction: column; text-align: center; }
.profil-champs { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--pt)); }
.profil-champs .champ-compte { width: 100%; }
.profil-role { margin: 0; }
@media (max-width: 900px) {
  .deux-colonnes, .deux-colonnes.egales { grid-template-columns: minmax(0, 1fr); }
  .carte-profil { grid-template-columns: minmax(0, 1fr); }
}
/* ══════════════════════════════════════════════════════════════════
   LES PARAMÈTRES, EN RUBRIQUES.

   Un menu à gauche, une rubrique à droite — le modèle que le directeur
   a fourni (06/08/2026). Le menu est COLLANT : la liste des rubriques
   reste sous les yeux pendant qu'on parcourt la longue.
   ══════════════════════════════════════════════════════════════════ */
.rubriques { display: grid; grid-template-columns: calc(260 * var(--pt))
             minmax(0, 1fr); gap: calc(34 * var(--pt)); align-items: start; }
.rubriques-menu { position: sticky; top: 0; display: flex;
                  flex-direction: column; gap: calc(4 * var(--pt)); }
.rubriques-menu a {
  display: flex; align-items: center; gap: calc(12 * var(--pt));
  padding: calc(10 * var(--pt)) calc(14 * var(--pt));
  border-radius: var(--rayon-carte); text-decoration: none; color: var(--encre);
  font-size: var(--t-base);
}
/* LE NOM D'UN GROUPE DU MENU (proposition A de la refonte, 18/10/2026) :
   petit, gris, en minuscules — il range, il ne crie pas. */
.groupe-rubriques { font-size: var(--t-petit); color: var(--gris-texte);
                    margin: calc(16 * var(--pt)) calc(14 * var(--pt)) calc(4 * var(--pt)); }
.groupe-rubriques:first-child { margin-top: 0; }
.rubriques-menu a:hover { background: var(--gris-bloc); }
.rubriques-menu a.ici { background: var(--vert-marque); color: var(--sur-vert);
                        font-weight: 600; }
.rubriques-menu .icone { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }

.rubriques-corps > section { padding-bottom: calc(34 * var(--pt)); }
.rubriques-corps > section + section {
  border-top: 1px solid var(--gris-bord); padding-top: calc(30 * var(--pt)); }
.rubriques-corps h2 { margin-top: 0; }
/* L'EN-TÊTE D'UNE RUBRIQUE : le grand titre (proposition A de la
   refonte, 18/10/2026 ; la mention « Vaut pour … » est retirée). */
.tete-rubrique { display: flex; align-items: center; flex-wrap: wrap;
                 gap: calc(8 * var(--pt)) calc(14 * var(--pt));
                 margin: 0 0 calc(6 * var(--pt)); }
.tete-rubrique h2 { font-family: var(--police-titre); font-weight: 800;
                    font-size: max(20px, calc(28 * var(--pt))); margin: 0; }
/* LES RÉGLAGES SE RANGENT EN PANNEAUX : les rangées qui se suivent dans
   une section forment un panneau gris aux coins arrondis — sans toucher
   aux gabarits des neuf rubriques. */
.rubriques-corps .reglage-rangee { background: var(--gris-bloc);
                                   padding: calc(13 * var(--pt)) calc(18 * var(--pt)); }
.rubriques-corps :not(.reglage-rangee) + .reglage-rangee,
.rubriques-corps .reglage-rangee:first-child {
  border-top-left-radius: var(--rayon-carte); border-top-right-radius: var(--rayon-carte); }
.rubriques-corps .reglage-rangee:not(:has(+ .reglage-rangee)) {
  border-bottom: 0;
  border-bottom-left-radius: var(--rayon-carte); border-bottom-right-radius: var(--rayon-carte); }
.rubriques-corps .rangee-radio { background: var(--gris-bloc);
                                 padding: calc(13 * var(--pt)) calc(18 * var(--pt)); }
.rubriques-corps .rangee-radio:first-child {
  border-top-left-radius: var(--rayon-carte); border-top-right-radius: var(--rayon-carte); }
.rubriques-corps .rangee-radio:last-child {
  border-bottom-left-radius: var(--rayon-carte); border-bottom-right-radius: var(--rayon-carte); }
.rubriques-corps .fiche-reglage { background: var(--gris-bloc); border-radius: var(--rayon-carte);
                                  padding: 0 calc(18 * var(--pt)); }
.rubriques-corps .fiche-reglage > div:last-child { border-bottom: 0; }
/* « ENREGISTRER » RESTE TOUJOURS VISIBLE : le pied de la rubrique colle
   au bas de la fenêtre pendant qu'on fait défiler. Il descend jusqu'au
   bord, par-dessus la marge du bas de la fenêtre (--marge-bas) : sans
   cela, le texte défilait dans la bande laissée dessous. */
.rubriques-corps .pied { position: sticky; bottom: calc(-1 * var(--marge-bas, 0px)); z-index: 3;
                         display: flex; align-items: center; justify-content: space-between;
                         flex-wrap: wrap; gap: calc(12 * var(--pt));
                         margin: calc(24 * var(--pt)) 0 calc(-1 * var(--marge-bas, 0px));
                         padding: calc(14 * var(--pt)) 0 calc(14 * var(--pt) + var(--marge-bas, 0px));
                         background: var(--fond); border-top: 1px solid var(--gris-bord); }
.rubriques-corps .pied small { color: var(--gris-texte); font-size: var(--t-petit); }
.rubriques-corps .pied .actions { display: flex; gap: calc(10 * var(--pt)); flex-wrap: wrap; }
/* .titre-section REMPLACE h3 DANS LA SEULE RUBRIQUE « LA VEILLE » (tâche
   4, 12/08/2026) : le style reste identique, mais le nom de la balise
   « h3 » porte lui-même un chiffre, et la rubrique « Vos portes
   d'entrée » ne doit en montrer aucun (spec §5, §7.10). Un même style,
   deux sélecteurs — pas une seconde règle qui pourrait diverger. */
.rubriques-corps h3, .rubriques-corps .titre-section {
  font-family: var(--police-titre); font-weight: 800;
  font-size: var(--t-tuile); color: var(--encre);
  margin: calc(26 * var(--pt)) 0 calc(8 * var(--pt)); }
.rubriques-corps .amorce { font-size: var(--t-petit); color: var(--gris-texte);
                           margin: 0 0 calc(14 * var(--pt)); line-height: 1.5;
                           max-width: calc(620 * var(--pt)); }
/* LA SEULE LIGNE PERMISE SOUS UN TITRE DE RÉGLAGE (« moins de texte »,
   18/10/2026) — l'exemple validé : « Pas d'alerte sous cette note ». */
.ligne-aide { font-size: var(--t-petit); color: var(--gris-texte);
              margin: 0 0 calc(10 * var(--pt)); }
/* UNE LIGNE D'ÉTAT (règle 3) : ce qui est — « Vigie est à jour »,
   « Journal des rejets éteint », un vide — jamais une explication. */
.etat { font-size: var(--t-petit); color: var(--gris-texte);
        margin: 0 0 calc(10 * var(--pt)); }
/* La devise de l'éditeur (rubrique À propos) : petite, en gris. */
.signature { font-size: var(--t-petit); color: var(--gris-texte); margin: 0; }
/* LE DÉTAIL À LA DEMANDE (règle 4) : replié, un lien vert discret ; les
   textes que la protection des données impose mot pour mot s'y lisent
   d'un clic, sans charger l'écran. */
.le-detail { margin-top: calc(6 * var(--pt)); font-size: var(--t-petit);
             color: var(--gris-texte); }
.le-detail > summary { cursor: pointer; list-style: none; width: max-content;
                       color: var(--vert-texte); font-weight: 600; }
.le-detail > summary::-webkit-details-marker { display: none; }
.le-detail > p { margin: calc(6 * var(--pt)) 0 0; line-height: 1.5;
                 max-width: calc(620 * var(--pt)); }

/* ── LA RUBRIQUE « LA VEILLE » : une rangée nom + description + bascule,
   un curseur avec sa graduation, les jetons des sujets à écarter. Rien
   ici ne redéfinit un composant existant — .bascule reste celui de la
   page Sources (étendu plus bas pour une case à cocher), .pastille et
   .note restent ceux du reste de l'écran. */
.reglage-rangee { display: flex; align-items: flex-start;
                  justify-content: space-between; gap: calc(20 * var(--pt));
                  padding: calc(12 * var(--pt)) 0;
                  border-bottom: 1px solid var(--gris-bord); }
.reglage-rangee:last-child { border-bottom: none; }
.reglage-rangee .nom { font-size: var(--t-carte); font-weight: 600; color: var(--encre); }
.reglage-rangee .desc { font-size: var(--t-petit); color: var(--gris-texte);
                        margin-top: calc(3 * var(--pt));
                        max-width: calc(440 * var(--pt)); }
/* UN CHOIX EN RANGÉE (« Qui peut publier », maquette Figma, 18/10/2026) :
   le bouton radio, le nom, l'explication dessous — séparés comme les
   rangées à interrupteur. Toute la rangée se clique. */
.rangee-radio { display: flex; align-items: flex-start; gap: calc(14 * var(--pt));
                padding: calc(12 * var(--pt)) 0; cursor: pointer;
                border-bottom: 1px solid var(--gris-bord); }
.rangee-radio:last-child { border-bottom: none; }
.rangee-radio input { flex: none; margin: calc(2 * var(--pt)) 0 0;
                      width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.rangee-radio .nom { display: block; font-size: var(--t-carte); font-weight: 600;
                     color: var(--encre); }
.rangee-radio .desc { display: block; font-size: var(--t-petit); color: var(--gris-texte);
                      margin-top: calc(3 * var(--pt)); max-width: calc(520 * var(--pt)); }

.curseur { display: block; width: 100%; max-width: calc(340 * var(--pt));
           margin-top: calc(12 * var(--pt)); accent-color: var(--vert-marque); }
.graduation { display: flex; justify-content: space-between;
              max-width: calc(340 * var(--pt)); font-size: var(--t-etiquette);
              color: var(--gris-texte); margin-top: calc(4 * var(--pt)); }

.jetons { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt));
          margin-top: calc(14 * var(--pt)); }
.jeton { display: inline-flex; align-items: center; gap: calc(7 * var(--pt));
         padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px;
         border: 1px solid var(--gris-bord); background: var(--fond);
         font-size: var(--t-petit); cursor: pointer; }
.jeton input[type=checkbox] { margin: 0; accent-color: var(--vert-marque); }

/* ── « PERSONNALISER » (réponse 2B du directeur, 18/10/2026) ──────────
   Dans la rubrique, le lien vert sous l'explication ; ce qu'il change
   se lit au-dessus, en jetons sans croix. */
.section > .lien-modifier { display: inline-block; margin-top: calc(6 * var(--pt)); }
.rubriques-corps .jetons + .lien-modifier { margin-top: calc(12 * var(--pt)); }
.jeton-croix, .jeton-lu { display: inline-flex; align-items: center; gap: calc(6 * var(--pt));
                          padding: calc(6 * var(--pt)) calc(8 * var(--pt))
                                   calc(6 * var(--pt)) calc(14 * var(--pt));
                          border-radius: var(--rayon-carte); background: var(--gris-champ);
                          font-size: var(--t-petit); color: var(--encre); }
.jeton-lu { padding-right: calc(14 * var(--pt)); }
/* LA PETITE FENÊTRE D'UNE LISTE DE MOTS (maquette Figma 324:169) : un
   champ bordé et son « + », des jetons à petite croix, le grand bouton. */
.champ-ajout { display: flex; align-items: center; gap: calc(8 * var(--pt));
               border: 1px solid var(--gris-bord); border-radius: var(--rayon-carte);
               padding: calc(6 * var(--pt)) calc(6 * var(--pt)) calc(6 * var(--pt)) calc(18 * var(--pt)); }
/* « [type=text] » : sans lui, la règle commune des champs (pilule grise)
   l'emporte, venue plus bas dans la feuille à précision égale. */
.champ-ajout input[type=text] { flex: 1; min-width: 0; border: 0; border-radius: 0;
                                background: transparent; padding: calc(8 * var(--pt)) 0; }
.champ-ajout input[type=text]:focus { outline: none; }
.champ-ajout:focus-within { border-color: var(--vert-marque); }
.champ-ajout .ajouter { display: grid; place-items: center; padding: 0; border: 0;
                        width: calc(34 * var(--pt)); height: calc(34 * var(--pt));
                        border-radius: var(--rayon-carte); background: var(--gris-champ); }
.jeton-croix button { display: grid; place-items: center; padding: 0; border: 0;
                      background: none; width: calc(22 * var(--pt)); height: calc(22 * var(--pt));
                      border-radius: 999px; }
.jeton-croix button:hover { background: var(--gris-bloc); }
.jeton-croix .ic-fermer { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.editeur-jetons .jetons { margin: calc(14 * var(--pt)) 0 calc(24 * var(--pt)); }

/* ── L'HEURE DE LA VEILLE, UN INTERRUPTEUR PAR JOUR (maquette Figma
   324:220 ; réponse 1A du directeur, 18/10/2026). Éteint, le jour est
   une bande grise ; allumé, il se détache sur le fond de la fenêtre,
   cerclé d'un trait fin — comme sur la maquette. ─────────────────── */
.jours-veille { display: flex; flex-direction: column; gap: calc(10 * var(--pt));
                margin: 0 0 calc(20 * var(--pt)); }
.jour-veille { display: flex; align-items: center; justify-content: space-between;
               padding: calc(12 * var(--pt)) calc(18 * var(--pt)) calc(12 * var(--pt)) calc(24 * var(--pt));
               border-radius: var(--rayon-carte); background: var(--gris-champ);
               font-size: var(--t-base); color: var(--encre); cursor: pointer;
               transition: background var(--temps) ease, box-shadow var(--temps) ease; }
.jour-veille:has(.bascule:checked) { background: var(--fond);
                                     box-shadow: inset 0 0 0 1px var(--gris-bord); }
.heure-passage { display: flex; align-items: center; justify-content: space-between;
                 gap: calc(16 * var(--pt)); font-size: var(--t-base);
                 margin: 0 0 calc(20 * var(--pt)); }
.heure-passage input { min-width: calc(180 * var(--pt)); }
.heure-veille .discret { margin: calc(12 * var(--pt)) 0 0; }
/* LE GRAND BOUTON DES PETITES FENÊTRES DE LA MAQUETTE : toute la
   largeur, et haut — on ne le cherche pas. */
button.principal.grand { width: 100%; padding: calc(16 * var(--pt));
                         font-size: var(--t-base); margin-top: calc(6 * var(--pt)); }

/* ── L'EMBLÈME DU CABINET, EN REPLI : la vignette à l'initiale (maquette
   du 15/08/2026, rubrique « Le cabinet »). CHERCHÉ AVANT D'ÉCRIRE CELUI-
   CI, RIEN NE S'EN RAPPROCHAIT : .rond est un cercle d'icône (SVG, pas
   de lettre), .vignette-theme un aperçu de thème (pas de lettre non
   plus) — aucun composant de Vigie ne posait déjà une initiale dans un
   carré de couleur. Sert deux fois : un <span> pour l'initiale, un
   <img> pour l'emblème téléversé (object-fit le recadre en carré sans
   le déformer) — même classe, même gabarit visuel dans les deux cas. */
.vignette { width: calc(64 * var(--pt)); height: calc(64 * var(--pt));
            border-radius: var(--rayon-carte); flex: none;
            background: var(--vert-marque); color: var(--sur-vert);
            display: grid; place-items: center; object-fit: cover;
            font-size: calc(24 * var(--pt)); font-weight: 700; }
/* DANS LA RUBRIQUE, L'EMBLÈME EST ROND, cerclé de vert (maquette Figma,
   18/10/2026) — la feuille imprimable garde son carré. L'image est
   CONTENUE, pas recadrée : un logo carré ne perd pas ses coins. */
.embleme { display: flex; align-items: center; gap: calc(18 * var(--pt));
           margin-top: calc(8 * var(--pt)); flex-wrap: wrap; }
.embleme .vignette { width: calc(88 * var(--pt)); height: calc(88 * var(--pt));
                     border-radius: 999px; border: 1px solid var(--vert-marque);
                     font-size: calc(30 * var(--pt)); }
.embleme img.vignette { background: var(--fond); object-fit: contain;
                        padding: calc(12 * var(--pt)); box-sizing: border-box; }
/* « Modifier » : un lien vert qui ouvre le choix d'une image ; le champ
   de fichier reste dans la page, joignable au clavier. */
.lien-modifier { color: var(--vert-texte); font-size: var(--t-carte); font-weight: 600;
                 cursor: pointer; border-radius: 999px; text-decoration: none; }
.lien-modifier:hover { text-decoration: underline; }
.lien-modifier:focus-within { outline: 2px solid var(--vert-marque); outline-offset: 3px; }

/* Ce que Vigie sait, en deux colonnes qui se lisent d'un coup. */
.fiche-reglage { margin: 0 0 calc(18 * var(--pt)); }
.fiche-reglage > div { display: grid;
                       grid-template-columns: calc(190 * var(--pt)) minmax(0, 1fr);
                       gap: calc(16 * var(--pt));
                       padding: calc(11 * var(--pt)) 0;
                       border-bottom: 1px solid var(--gris-bord); }
.fiche-reglage dt { font-size: var(--t-carte); color: var(--gris-texte); margin: 0; }
.fiche-reglage dd { font-size: var(--t-carte); color: var(--encre); margin: 0; }
.liste-simple { font-size: var(--t-petit); color: var(--gris-texte);
                margin: 0 0 calc(14 * var(--pt)); padding-left: calc(20 * var(--pt));
                line-height: 1.7; }

/* Le choix du thème : on voit ce qu'on choisit avant de le choisir. LA
   CARTE EST L'APERÇU, grande, son nom centré dessous — comme sur la
   maquette (réponse 3A du directeur, 18/10/2026). La carte prise est
   cerclée de vert. */
.choix-theme { display: flex; flex-wrap: wrap; gap: calc(22 * var(--pt)); }
.choix-theme a { display: flex; flex-direction: column; align-items: center;
                 gap: calc(12 * var(--pt)); width: calc(210 * var(--pt));
                 text-decoration: none; color: var(--encre);
                 font-size: var(--t-carte); }
.choix-theme a.pris { font-weight: 600; }
.vignette-theme { display: block; width: 100%; aspect-ratio: 1.55;
                  border-radius: var(--rayon-carte); box-sizing: border-box;
                  border: 1px solid var(--gris-bord); overflow: hidden;
                  background: #ffffff; position: relative;
                  transition: box-shadow var(--temps) var(--detente); }
.choix-theme a:hover .vignette-theme { box-shadow: 0 calc(8 * var(--pt)) calc(20 * var(--pt)) var(--ombre); }
.choix-theme a.pris .vignette-theme { outline: 2px solid var(--vert-marque); outline-offset: 3px; }
.vignette-theme::after { content: ""; position: absolute;
                         left: 9%; right: 9%; top: 13%; height: 10%;
                         border-radius: 999px; background: var(--vert-marque); }
.v-sombre { background: #0a0c08; border-color: rgba(255, 255, 255, .18); }
.v-systeme { background: linear-gradient(90deg, #ffffff 50%, #0a0c08 50%); }

@media (max-width: 900px) {
  .rubriques { grid-template-columns: minmax(0, 1fr); }
  .rubriques-menu { position: static; flex-direction: row; flex-wrap: wrap; }
  .fiche-reglage > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ----------------------------------------------------------- mon compte */
.bloc-compte { display: flex; flex-direction: column; align-items: flex-start;
               gap: calc(16 * var(--pt)); margin: 0 0 calc(26 * var(--pt));
               max-width: calc(520 * var(--pt)); }
.portrait-choix { display: flex; align-items: center; gap: calc(16 * var(--pt));
                  cursor: pointer; }
.champ-compte { width: 100%; }
.champ-compte label { display: block; font-size: var(--t-petit);
                      color: var(--gris-texte); margin: 0 0 calc(7 * var(--pt)); }
.champ-compte input { width: 100%; }
/* LES LISTES ET LES ZONES DE TEXTE AUSSI : « Choisir le planning »
   restait à sa largeur naturelle à côté de champs pleine ligne — un
   vide à droite (relecture du dessin, 16/10/2026). */
.champ-compte select, .champ-compte textarea { width: 100%; }
.champ-compte .discret { margin: calc(7 * var(--pt)) 0 0; }
/* Se déconnecter n'est pas une action ordinaire : elle a sa couleur,
   sans crier — c'est un départ, pas une suppression. */
button.sortie { background: var(--rouge-fond); border-color: transparent;
                color: var(--rouge-texte); font-weight: 700; }
button.sortie:hover { background: var(--rouge-fond); border-color: var(--rouge-texte); }

/* ══════════════════════════════════════════════════════════════════
   LE RADAR D'UN PASSAGE.

   L'image vient du modèle du directeur (06/08/2026) ; les couleurs et
   les polices sont celles de Vigie, et les échos portent SES sources.
   Un radar avec quatre noms inventés serait un décor ; celui-ci dit
   sur quoi Vigie travaille en ce moment.

   IL NE MESURE RIEN, et c'est assumé : le balayage ne suit pas
   l'avancement du tri — personne ne sait combien de temps prendra un
   site qui ne répond pas. Il dit « ça travaille », pas « il reste
   40 % ». Une jauge qui ment est pire qu'une image qui n'en prétend
   pas être une.
   ══════════════════════════════════════════════════════════════════ */
.ecran-passage { text-align: center; }
.ecran-passage .sous-titre { margin-left: auto; margin-right: auto;
                             max-width: calc(560 * var(--pt)); }
.radar { width: min(calc(340 * var(--pt)), 62vw); aspect-ratio: 1;
         margin: calc(26 * var(--pt)) auto calc(14 * var(--pt));
         color: var(--vert-texte); }
.radar svg { width: 100%; height: 100%; display: block; }
.radar .anneau { fill: none; stroke: var(--gris-bord); stroke-width: .6; }
.radar .croix { stroke: var(--gris-bord); stroke-width: .6; opacity: .6; }

/* NEUF SECONDES PAR TOUR. Plus vite, cela s'agite ; plus lentement, on
   croit que c'est arrêté. */
.balai { transform-origin: 50% 50%; animation: balayage 9s linear infinite; }
@keyframes balayage { to { transform: rotate(360deg); } }

/* Chaque écho s'allume au passage du balai, puis s'éteint doucement.
   Les retards sont répartis sur le tour : ils se succèdent au lieu de
   clignoter ensemble. */
.echo { opacity: 0; }
.echo circle { fill: var(--vert-marque); }
.echo text { font: 500 6.4px "Inter", sans-serif; fill: var(--encre);
             letter-spacing: .04em; }
.echo { animation: echo 9s linear infinite; }
.e1 { animation-delay: -8.1s; } .e2 { animation-delay: -6.9s; }
.e3 { animation-delay: -5.4s; } .e4 { animation-delay: -3.9s; }
.e5 { animation-delay: -2.4s; } .e6 { animation-delay: -1.1s; }
@keyframes echo {
  0% { opacity: 0; } 2% { opacity: 1; } 26% { opacity: .9; }
  62% { opacity: 0; } 100% { opacity: 0; }
}
.sous-radar { margin: 0; }

/* Le bilan d'un passage : trois nombres, et ce qu'ils veulent dire. */
.bilan { display: flex; flex-wrap: wrap; justify-content: center;
         gap: calc(18 * var(--pt)); margin: calc(26 * var(--pt)) 0; }
.bilan > div { background: var(--gris-bloc); border-radius: var(--rayon-carte);
               padding: calc(18 * var(--pt)) calc(26 * var(--pt));
               min-width: calc(150 * var(--pt)); }
.bilan b { display: block; font-family: var(--police-titre); font-weight: 800;
           font-size: var(--t-chiffre); line-height: 1.1;
           color: var(--encre-titre); }
.bilan span { display: block; font-size: var(--t-petit);
              color: var(--gris-texte); margin-top: calc(6 * var(--pt)); }

/* LE MOUVEMENT SUIT L'APPAREIL — SAUF SI L'UTILISATEUR EN A DÉCIDÉ
   AUTREMENT (rubrique Apparence, 13/08/2026). « complet » est le seul
   cas où l'on passe outre le réglage d'accessibilité de la machine :
   c'est un choix explicite, et lui seul peut le faire pour lui-même. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-mouvement="complet"]) .balai { animation: none; }
  :root:not([data-mouvement="complet"]) .echo { animation: none; opacity: .9; }
}
:root[data-mouvement="reduit"] .balai { animation: none; }
:root[data-mouvement="reduit"] .echo { animation: none; opacity: .9; }

/* ══════════════════════════════════════════════════════════════════
   LE PLANNING — le calendrier éditorial.

   Les créneaux sont groupés par jour, pas posés dans une grille de
   mois : une grille est illisible dans une fenêtre de 900 points, et
   pire au doigt sur un téléphone. La liste par jour se lit comme un
   calendrier et tient partout.

   LA COULEUR NE DIT JAMAIS RIEN TOUTE SEULE. Le liseré donne l'état
   d'un coup d'œil, et le mot est toujours écrit à côté.
   ══════════════════════════════════════════════════════════════════ */
.planning-ligne { display: flex; gap: calc(14 * var(--pt)); align-items: center;
                  background: var(--gris-bloc); border-radius: var(--rayon-carte);
                  padding: calc(14 * var(--pt)) calc(20 * var(--pt));
                  margin-bottom: calc(10 * var(--pt));
                  text-decoration: none; color: inherit; }
.planning-ligne:hover { background: var(--carte-survol); }
.planning-ligne > div { min-width: 0; }
.planning-ligne .quoi { font-size: var(--t-carte); font-weight: 700; margin: 0;
                        overflow-wrap: anywhere; }
.planning-ligne .ou { font-size: var(--t-petit); color: var(--gris-texte);
                      margin: calc(5 * var(--pt)) 0 0; }
.planning-ligne .prochain { color: var(--vert-texte); font-weight: 600; }
.planning-ligne .vers { margin-left: auto; flex: 0 0 auto;
                        font-size: var(--t-base); font-weight: 500;
                        color: var(--vert-texte); white-space: nowrap; }

.jour-planning { font-size: var(--t-tuile); color: var(--gris-texte);
                 margin: calc(24 * var(--pt)) 0 calc(10 * var(--pt)); }

/* ══════════════════════════════════════════════════════════════════
   LE CALENDRIER DE SEMAINE, d'après le modèle du directeur.

   SEPT COLONNES, ET DES TRANCHES — pas une ligne par heure. Un créneau
   de 10 h 30 doit tomber quelque part ; avec vingt-quatre lignes pour
   en montrer trois, plus rien ne se lit dans une fenêtre.

   La grille défile dans sa boîte plutôt que de rétrécir sans fin :
   sept colonnes écrasées ne se lisent pas non plus.
   ══════════════════════════════════════════════════════════════════ */
/* ══ LA RANGÉE DE NAVIGATION ══ (refonte validée le 18/10/2026)
   Les vues à gauche, la semaine à droite. Les commandes restent sur la
   rangée du dessous. */
.barre-vues { display: flex; flex-wrap: wrap; align-items: center;
              gap: calc(12 * var(--pt)); margin: 0 0 calc(14 * var(--pt)); }
/* LES VUES SONT UN SÉLECTEUR : trois segments dans une même pilule,
   celui qu'on regarde posé en clair dessus. Plus d'onglets soulignés —
   ils ressemblaient à des titres. */
.vues { display: inline-flex; align-items: stretch; gap: calc(4 * var(--pt));
        min-height: calc(58 * var(--pt)); padding: calc(5 * var(--pt));
        border-radius: 999px; background: var(--gris-champ); }
/* ══ LE HAUT NE DÉFILE PAS ══ (directeur, 07/08/2026)
   Un calendrier plus haut que la fenêtre emportait les onglets et la
   barre d'outils : on perdait ses commandes en descendant. Ils restent
   collés en haut du corps qui défile.

   AUCUNE MARGE NÉGATIVE EN HAUT : un élément collant se cale sur sa
   boîte de MARGE, si bien qu'une marge de -28 le faisait tenir 28
   points plus bas — et l'on voyait un ruban de cartes défiler au-dessus
   des onglets. C'est le corps qui perd son rembourrage du haut, et le
   bandeau qui le reprend. */
#popup.large #popup-corps { padding-top: 0; }
.haut-planning { position: sticky; top: 0; z-index: 6;
                 background: var(--fond);
                 margin: 0 calc(-32 * var(--pt)) calc(6 * var(--pt));
                 padding: calc(28 * var(--pt)) calc(32 * var(--pt)) 0; }

/* Les segments sont NOIRS tous les trois — c'est le fond clair et le
   gras qui disent lequel est ouvert, pas un gris pâle qui les ferait
   passer pour désactivés. */
.vues a { display: inline-flex; align-items: center;
          padding: 0 calc(22 * var(--pt)); border-radius: 999px;
          text-decoration: none; color: var(--encre); white-space: nowrap;
          font-size: var(--t-petit); font-weight: 500;
          transition: background var(--temps) var(--detente); }
.vues a:hover { background: var(--gris-etiquette); }
.vues a.ici { background: var(--segment-pris); font-weight: 700;
              box-shadow: 0 1px 3px var(--ombre); }

/* ══ LA SEMAINE SE CHANGE PAR DES FLÈCHES ══
   Le déroulant entre les deux flèches garde toutes les semaines du
   planning à portée ; les flèches font le geste le plus courant. Une
   flèche sans semaine derrière reste à sa place, éteinte. */
.navigateur-semaine { display: inline-flex; align-items: center;
                      gap: calc(8 * var(--pt)); margin-left: auto; }
.navigateur-semaine .pilule { background: none; font-weight: 700;
                              font-size: var(--t-carte);
                              padding: 0 calc(16 * var(--pt)); }
.navigateur-semaine .pilule:hover,
.navigateur-semaine .deroulant[open] > .pilule { background: var(--gris-champ); }
.fleche-semaine { display: inline-grid; place-items: center; flex: none;
                  width: calc(46 * var(--pt)); height: calc(46 * var(--pt));
                  border-radius: 50%; background: var(--gris-champ);
                  color: var(--encre);
                  transition: background var(--temps) var(--detente); }
/* Le chevron est dessiné comme la flèche des déroulants : deux traits. */
.fleche-semaine::before { content: ""; width: .5em; height: .5em;
                          border-left: 2px solid currentColor;
                          border-bottom: 2px solid currentColor;
                          transform: translateX(.12em) rotate(45deg); }
.fleche-semaine.suivante::before { transform: translateX(-.12em) rotate(-135deg); }
a.fleche-semaine:hover { background: var(--gris-etiquette); }
.fleche-semaine.eteinte { opacity: .35; }
.navigateur-semaine .pilule.aujourdhui { font-size: var(--t-petit); font-weight: 600;
                                         min-height: calc(46 * var(--pt));
                                         margin-left: calc(6 * var(--pt));
                                         box-shadow: inset 0 0 0 1px var(--gris-bord); }
/* Le compte de ce que Vigie a trouvé à proposer. Discret : c'est une
   proposition, pas une alerte — rien ne se dégrade si on l'ignore. */
.pastille-vue { display: inline-block; min-width: calc(18 * var(--pt));
                padding: 0 calc(6 * var(--pt)); margin-left: calc(6 * var(--pt));
                border-radius: 999px; background: var(--vert-voile);
                color: var(--encre); font-size: var(--t-etiquette);
                font-weight: 700; text-align: center; }

/* ══════════════════════════════════════════════════════════════════
   À GARNIR — ce que Vigie propose pour les créneaux vides.

   Le créneau en titre, ses propositions dessous, décalées : on lit
   « ce trou, et ce qui pourrait le combler », dans cet ordre.

   Le bouton « Poser ici » est le seul qui écrit. Tout le reste de cet
   écran est une lecture.
   ══════════════════════════════════════════════════════════════════ */
.a-garnir { margin-bottom: calc(22 * var(--pt)); }
.creneau-vide { display: flex; flex-wrap: wrap; align-items: baseline;
                gap: calc(10 * var(--pt)); margin: 0 0 calc(8 * var(--pt));
                font-family: var(--police-texte); font-size: var(--t-carte);
                font-weight: 600; }
.creneau-vide .quand { color: var(--gris-texte); font-weight: 500; }
.creneau-vide .canal { font-size: var(--t-etiquette); font-weight: 700;
                       text-transform: uppercase; letter-spacing: .04em;
                       padding: calc(2 * var(--pt)) calc(8 * var(--pt));
                       border-radius: 999px; background: var(--gris-etiquette);
                       color: var(--gris-etiquette-texte); }
.a-garnir .discret { margin: 0 0 0 calc(16 * var(--pt));
                     padding-left: calc(12 * var(--pt));
                     border-left: 2px solid var(--gris-bord); }
.proposition { display: flex; align-items: center; gap: calc(14 * var(--pt));
               margin: 0 0 calc(6 * var(--pt)) calc(16 * var(--pt));
               background: var(--carte); border: 1px solid var(--gris-bord);
               border-left: calc(3 * var(--pt)) solid var(--vert-marque);
               border-radius: var(--rayon-carte);
               padding: calc(11 * var(--pt)) calc(16 * var(--pt));
               transition: box-shadow var(--temps) var(--detente); }
.proposition:hover { box-shadow: 0 2px 10px var(--ombre); }
.proposition > div:first-child { flex: 1; min-width: 0; }
.proposition form { margin: 0; }
.proposition button { padding: calc(7 * var(--pt)) calc(16 * var(--pt));
                      font-size: var(--t-petit); white-space: nowrap; }
.titre-prop { margin: 0 0 calc(3 * var(--pt)); font-size: var(--t-petit);
              font-weight: 700; overflow-wrap: anywhere; }
.proposition .ou { margin: 0; font-size: var(--t-etiquette);
                   color: var(--gris-texte); }

@media (max-width: 620px) {
  .proposition { flex-direction: column; align-items: stretch;
                 margin-left: 0; gap: calc(9 * var(--pt)); }
  .proposition button { width: 100%; }
  .a-garnir .discret { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   LA BARRE D'OUTILS DU PLANNING — cadre Figma 131:397 (07/08/2026).

   Six commandes en pilules de 58 points de haut, espacées de 26. Les
   mesures sont celles relevées dans la maquette, en points de maquette
   (le facteur --pt les ramène à la fenêtre réelle).

   LES DÉROULANTS SONT DES <details> : ils s'ouvrent sans une ligne de
   script. Coupez le JavaScript et ils marchent encore — c'est la même
   règle que pour la fenêtre elle-même.
   ══════════════════════════════════════════════════════════════════ */
/* L'écart de la maquette est de 26 points, mesurés sur un cadre de
   1728. La fenêtre, elle, est bornée à 84 % de l'écran : à 26 le bouton
   vert passait à la ligne sur une fenêtre de 1280. 16 tient partout, et
   la barre reste sur un seul rang — c'est ce que montre la maquette. */
.barre-outils { display: flex; flex-wrap: wrap; align-items: center;
                gap: calc(16 * var(--pt)); margin: 0 0 calc(24 * var(--pt)); }
.pilule { display: inline-flex; align-items: center; gap: calc(10 * var(--pt));
          min-height: calc(58 * var(--pt));
          padding: 0 calc(24 * var(--pt)); border-radius: 999px;
          background: var(--gris-champ); border: 0; cursor: pointer;
          color: var(--encre); text-decoration: none;
          font-family: var(--police-texte); font-size: var(--t-petit);
          font-weight: 500; white-space: nowrap;
          transition: background var(--temps) var(--detente); }
.pilule:hover { background: var(--gris-etiquette); }
.pilule.verte { background: var(--vert-marque); color: var(--sur-vert); font-weight: 600;
                padding: 0 calc(34 * var(--pt)); }
.pilule.verte:hover { filter: brightness(1.05); }
.pilule.allume { background: var(--vert-voile); }
/* LA FLÈCHE DU BAS dit qu'un bouton s'ouvre (directeur, 07/08/2026).
   Sans elle, rien ne distinguait « Vos plannings » d'un simple bouton.
   Elle se retourne quand le tiroir est ouvert. */
.avec-fleche { justify-content: space-between; }
.avec-fleche::after { content: ""; flex: none; width: .42em; height: .42em;
                      margin-left: calc(4 * var(--pt));
                      border-right: 2px solid currentColor;
                      border-bottom: 2px solid currentColor;
                      transform: translateY(-.14em) rotate(45deg);
                      transition: transform var(--temps) var(--detente); }
.deroulant[open] > .avec-fleche::after {
  transform: translateY(.1em) rotate(225deg); }

/* LA BARRE PREND TOUTE LA LARGEUR (directeur, 07/08/2026) : la
   recherche absorbe ce qui reste, et le bouton vert arrive au bord
   droit. Les autres pilules portent un mot qu'on ne peut pas couper —
   elles gardent leur taille. */
.pilule-cherche { display: inline-flex; align-items: center;
                  gap: calc(10 * var(--pt)); min-height: calc(58 * var(--pt));
                  padding: 0 calc(20 * var(--pt)); border-radius: 999px;
                  background: var(--gris-champ); margin: 0;
                  flex: 1 1 calc(180 * var(--pt));
                  min-width: calc(150 * var(--pt)); }
/* PAS DE SECOND FOND DANS LA PILULE. Le champ dessinait sa propre
   pilule DEDANS : la règle générale des champs s'est élargie à
   « search » et l'a rattrapé — à spécificité égale, c'est la dernière
   écrite qui gagne, et c'est elle. D'où le « input[type=search] » ici :
   il rend la règle plus précise, et l'ordre cesse de décider. */
.pilule-cherche input[type=search] { border: 0; background: none;
                        padding: 0; margin: 0; border-radius: 0;
                        width: 100%; min-width: 0; font-size: var(--t-petit);
                        color: var(--encre); }
.pilule-cherche input:focus { outline: 0; }
/* La petite croix que le navigateur ajoute aux champs « search » : elle
   n'a pas la couleur de la fenêtre et surgit sans prévenir. */
.pilule-cherche input::-webkit-search-cancel-button { display: none; }

/* La loupe et l'entonnoir : des pochoirs, comme toutes les icônes —
   le fichier donne la forme, la feuille donne la couleur. */
/* LES OUTILS, EN DEUX TONS (seconde série, validée le 17/10/2026). Ils
   sont déclarés par la feuille de style plutôt que par les gabarits : leurs
   deux calques sont donc deux PSEUDO-ÉLÉMENTS — ::before le vert,
   ::after l'encre — et aucun écran n'a eu à changer. Leurs couleurs
   viennent du CONTEXTE (--i-vert, --i-encre), le vert et l'encre n'étant
   qu'un repli : posées sur l'outil lui-même, elles écraseraient celles du
   bouton vert qui le porte. */
.ic-cherche, .ic-filtre, .ic-verser, .ic-plus, .ic-plus-actions, .ic-fermer {
  position: relative; display: inline-block; flex: none;
  width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
.ic-cherche::before, .ic-filtre::before, .ic-verser::before, .ic-plus::before,
.ic-plus-actions::before, .ic-fermer::before {
  content: ""; position: absolute; inset: 0; background: var(--i-vert, var(--vert-marque));
  -webkit-mask: var(--pv) center / contain no-repeat; mask: var(--pv) center / contain no-repeat; }
.ic-cherche::after, .ic-filtre::after, .ic-verser::after, .ic-plus::after,
.ic-plus-actions::after, .ic-fermer::after {
  content: ""; position: absolute; inset: 0; background: var(--i-encre, var(--encre));
  -webkit-mask: var(--pe) center / contain no-repeat; mask: var(--pe) center / contain no-repeat; }
.ic-cherche { --pv: url("/static/icones-vigie/recherche-vert.svg");
              --pe: url("/static/icones-vigie/recherche-encre.svg"); }
.ic-filtre { --pv: url("/static/icones-vigie/filtre-vert.svg");
             --pe: url("/static/icones-vigie/filtre-encre.svg"); }
.ic-verser { --pv: url("/static/icones-vigie/verser-vert.svg");
             --pe: url("/static/icones-vigie/verser-encre.svg"); }
.ic-plus { --pv: url("/static/icones-vigie/plus-vert.svg");
           --pe: url("/static/icones-vigie/plus-encre.svg");
           width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.ic-plus-actions { --pv: url("/static/icones-vigie/actions-vert.svg");
                   --pe: url("/static/icones-vigie/actions-encre.svg");
                   width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.ic-fermer { --pv: url("/static/icones-vigie/fermer-vert.svg");
             --pe: url("/static/icones-vigie/fermer-encre.svg"); }
/* SUR UN BOUTON VERT, le vert d'une icône disparaîtrait : il passe au
   blanc, et le détail à l'encre — la même règle que l'onglet choisi. */
.pilule.verte, .bouton-vert, button.principal, .bouton.principal {
  --i-vert: #fff; --i-encre: var(--detail-sur-vert); }

/* Ce qu'un texte doit dire sans être vu : le nom d'un champ qui n'a
   qu'une icône. Le retirer de l'écran, jamais de la page. */
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden;
              clip-path: inset(50%); white-space: nowrap; }

.deroulant { position: relative; }
.deroulant > summary { list-style: none; }
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant[open] > summary { background: var(--gris-etiquette); }
.tiroir { position: absolute; z-index: 5; top: calc(100% + 6 * var(--pt));
          left: 0; min-width: calc(260 * var(--pt));
          max-height: calc(360 * var(--pt)); overflow-y: auto;
          padding: calc(10 * var(--pt)); background: var(--surface-flottante);
          border: 1px solid var(--bord-flottant);
          border-radius: var(--rayon-carte);
          box-shadow: 0 14px 40px var(--ombre); }
.deroulant.a-droite .tiroir { left: auto; right: 0; }
.tiroir a { display: block; padding: calc(9 * var(--pt)) calc(12 * var(--pt));
            border-radius: calc(10 * var(--pt)); text-decoration: none;
            color: var(--encre); font-size: var(--t-petit); }
.tiroir a:hover { background: var(--gris-bloc); }
.tiroir a.ici { background: var(--vert-actif); font-weight: 700; }
.tiroir a .discret { display: block; font-size: var(--t-etiquette); }
.tiroir form { margin: calc(4 * var(--pt)) 0 0; }
.tiroir .sortie { width: 100%; }
.titre-tiroir { margin: calc(8 * var(--pt)) calc(12 * var(--pt)) calc(4 * var(--pt));
                font-size: var(--t-etiquette); color: var(--gris-texte);
                text-transform: uppercase; letter-spacing: .06em; }
.titre-tiroir:first-child { margin-top: calc(2 * var(--pt)); }
.tout-enlever { margin-top: calc(6 * var(--pt)); border-top: 1px solid var(--gris-bord);
                border-radius: 0; color: var(--gris-texte); }

/* La pilule coupée en deux de la maquette : le filtre, puis le menu. */
.pilule-double { display: inline-flex; align-items: stretch; }
.pilule-double .pilule { padding: 0 calc(24 * var(--pt)); }
.bout-gauche { border-radius: 999px 0 0 999px;
               box-shadow: 1px 0 0 var(--gris-bord); }
.bout-droit { border-radius: 0 999px 999px 0; font-size: var(--t-carte); }

/* LA GRILLE, RELEVÉE DANS LA MAQUETTE (cadre 131:397, 07/08/2026).

   Ce n'est PAS un tableau bordé : ce sont des bandes gris clair
   séparées par de fins vides blancs, avec des traits verticaux entre
   les jours. La colonne des tranches est un bloc à part, détaché de la
   grille des jours, aux coins gauches arrondis. Et le coin en haut à
   gauche ne porte AUCUN fond — seulement la pilule verte.

   Colonnes : 189 points pour les tranches, ~200 par jour. Vides entre
   les rangées : 6 points. Arrondis : 40 en haut, 50 en bas. */
.semaine { display: grid;
           grid-template-columns: calc(189 * var(--pt)) repeat(7, minmax(calc(132 * var(--pt)), 1fr));
           column-gap: 0; row-gap: calc(6 * var(--pt));
           min-width: calc(1080 * var(--pt));
           margin-bottom: calc(22 * var(--pt)); }
.semaine > * { background: var(--gris-champ); }
/* Le vide de 6 points entre la colonne des tranches et les jours. */
/* « Dans planning on va centrer le texte (TBEST 11 août…) » (directeur,
   20/08/2026) : la ligne du nom, sous la barre d'outils. */
.nom-planning { text-align: center; }
.coin, .tranche { margin-right: calc(6 * var(--pt)); }

/* RESSERRÉ (« on va diminuer la taille du calendrier et ses éléments »
   — directeur, 20/08/2026) : rembourrages, chiffre du jour et hauteur
   des cases, tous d'un cran. */
.entete-jour { padding: calc(12 * var(--pt)) calc(8 * var(--pt));
               text-align: center; }
.entete-jour span { display: block; font-size: var(--t-petit);
                    color: var(--encre); margin-bottom: calc(6 * var(--pt)); }
.entete-jour b { font-family: var(--police-titre); font-weight: 800;
                 font-size: max(18px, calc(28 * var(--pt))); line-height: 1; }
/* Les traits verticaux entre les jours — six pour sept colonnes. */
.entete-jour:not(.bord-gauche), .colonne-jour:not(.bord-gauche) {
  box-shadow: inset 1px 0 0 var(--gris-bord); }
.entete-jour.bord-gauche { border-top-left-radius: var(--rayon-bloc); }
.entete-jour.bord-droit { border-top-right-radius: var(--rayon-bloc); }
.colonne-jour.coin-bas { border-bottom-right-radius: var(--rayon-bloc); }

.coin { background: none; display: flex; align-items: center;
        justify-content: center; }
/* LE COIN PORTE « AJOUTER UN CRÉNEAU » : le geste le plus fréquent, à
   l'endroit où l'œil est déjà posé. Vert pâle et sans bordure, comme
   sur la maquette — 134 × 95, arrondi complet. */
.coin-ajouter { display: flex; align-items: center; justify-content: center;
                text-align: center; text-decoration: none; color: var(--encre);
                width: calc(134 * var(--pt)); max-width: 100%;
                min-height: calc(95 * var(--pt));
                /* L'arrondi complet est parti (« … et du bouton ajouter
                   un créneau seront à 10px » — directeur, 20/08/2026). */
                border-radius: var(--rayon-bloc);
                background: var(--vert-voile); border: 0;
                font-size: max(11.5px, calc(15 * var(--pt)));
                line-height: 1.35;
                transition: background var(--temps) var(--detente); }
/* VERT PLEIN DÈS QU'UN PLANNING EST OUVERT : il y a alors quelque chose
   à garnir, et le geste devient le principal de l'écran. */
.coin-ajouter.actif { background: var(--vert-marque); color: var(--sur-vert);
                      font-weight: 600; }
.coin-ajouter:hover { background: var(--vert-actif); }
.coin-ajouter.actif:hover { background: var(--vert-sombre); }

/* La tranche occupe le milieu de sa rangée, comme sur la maquette
   (réponse 5A du directeur, 18/10/2026) — le calendrier reste compact. */
.tranche { padding: calc(10 * var(--pt)) calc(20 * var(--pt));
           font-size: var(--t-petit); color: var(--encre);
           display: flex; align-items: center; }
/* « Les bordures du calendrier … seront à 10px maintenant » (directeur,
   20/08/2026) : les coins à 50 points rejoignent le jeton unique. */
.tranche.bord-haut { border-top-left-radius: var(--rayon-bloc); }
.tranche.bord-bas { border-bottom-left-radius: var(--rayon-bloc); }
/* 88 points de haut : la semaine entière tient sans être coupée en
   deux, y compris sur un écran de 1080 de haut. */
.colonne-jour { padding: calc(6 * var(--pt)); min-height: calc(64 * var(--pt));
                display: flex; flex-direction: column; gap: calc(5 * var(--pt)); }
/* Le jour d'aujourd'hui se repère sans qu'on compte les colonnes. */
.entete-jour.ce-jour { background: var(--vert-voile); }
.colonne-jour.ce-jour { background: rgba(136, 199, 59, .06); }

.carte-creneau { position: relative; z-index: 1;
                 display: block; text-decoration: none; color: inherit;
                 background: var(--carte); border-radius: calc(8 * var(--pt));
                 border-left: calc(4 * var(--pt)) solid var(--gris-etiquette-texte);
                 padding: calc(7 * var(--pt)) calc(9 * var(--pt));
                 box-shadow: 0 1px 3px var(--ombre);
                 transition: transform var(--temps) var(--detente),
                             box-shadow var(--temps) var(--detente),
                             background var(--temps) var(--detente); }
/* L'EFFET FLOTTANT DEMANDÉ (directeur, 07/08/2026), REVU LE 20/08/2026 :
   le détail COUVRE désormais la carte au lieu de pendre dessous (voir
   .detail-creneau) — plus de jonction à cacher, donc plus de coins du
   bas à ouvrir. Le détail est un DESCENDANT de la carte : il monte avec
   elle au survol, les deux restent soudés. */
.carte-creneau:hover { background: var(--carte-survol); z-index: 20;
                       transform: translateY(calc(-3 * var(--pt)));
                       box-shadow: 0 10px 24px var(--ombre); }
.carte-creneau .haut { display: flex; align-items: center;
                       gap: calc(6 * var(--pt)); margin-bottom: calc(4 * var(--pt)); }
.carte-creneau .canal { font-size: var(--t-etiquette); font-weight: 700;
                        color: var(--gris-texte); text-transform: uppercase;
                        letter-spacing: .04em; }
.carte-creneau .heure { margin-left: auto; font-size: var(--t-etiquette);
                        color: var(--gris-texte); }
/* DEUX LIGNES, PAS PLUS. Une case de calendrier doit rester une case :
   un titre long poussait la rangée entière. Le survol, lui, montre le
   titre en entier — c'est ce qui donne un sens au déploiement. */
.carte-creneau .titre { display: -webkit-box; -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical; overflow: hidden;
                        font-size: var(--t-petit);
                        font-weight: 700; line-height: 1.3;
                        overflow-wrap: anywhere; }
/* LE SOUS-TITRE SOUS LE TITRE (maquette du directeur, 20/08/2026) : la
   ligne discrète de sa référence — serrée à deux lignes elle aussi, la
   case reste une case. */
.carte-creneau .sous-titre-creneau { display: -webkit-box;
                        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                        overflow: hidden; font-size: var(--t-etiquette);
                        color: var(--gris-texte); line-height: 1.35;
                        margin-top: calc(2 * var(--pt));
                        overflow-wrap: anywhere; }
/* Le logo du réseau, à sa vraie couleur : ce n'est pas un pochoir. */
.logo-canal { width: calc(15 * var(--pt)); height: calc(15 * var(--pt));
              flex: none; border-radius: calc(3 * var(--pt)); }

/* ══ LE LISERÉ DIT LE CANAL ══ (directeur, 07/08/2026)
   Les couleurs sont celles des logos qu'il a fournis, relevées dans les
   fichiers : inventer une nuance « proche » ferait un faux LinkedIn à
   côté du vrai logo LinkedIn.

   L'ÉTAT PASSE DONC AILLEURS : deux informations ne tiennent pas sur le
   même trait. Il se lit maintenant en toutes lettres dans le détail au
   survol, et à la pastille de la vue Liste.

   L'ÉTAT D'ABORD, LE RÉSEAU ENSUITE : à force égale, c'est la règle
   écrite la dernière qui gagne. L'état venait après, et tous les
   créneaux restaient gris (vu à l'aperçu, 18/10/2026). */
/* Sans canal connu, le liseré redit l'état — mieux que rien du tout. */
.e-a_ecrire.carte-creneau { border-left-color: var(--gris-etiquette-texte); }
.e-brouillon.carte-creneau { border-left-color: var(--jaune-texte); }
.e-valide.carte-creneau { border-left-color: var(--vert-marque); }
.e-publie.carte-creneau { opacity: .75; }
.c-linkedin.carte-creneau { border-left-color: #0076B2; }
.c-facebook.carte-creneau { border-left-color: #1877F2; }
.c-whatsapp.carte-creneau { border-left-color: #25D366; }
.c-instagram.carte-creneau { border-left-color: #C837AB; }

/* ══ LA CARTE SE DÉPLOIE AU SURVOL ══
   « Ils doivent s'agrandir et montrer tout ce qu'ils contiennent »,
   REVU LE 20/08/2026 : « ils affichent deux fois le nom du créneau
   quand on met la souris dessus, et maintenant ils doivent s'agrandir
   vers la droite ». Le détail pendait SOUS la carte — le nom de la
   carte restait visible au-dessus du nom du détail, donc deux fois.

   Le détail COUVRE désormais sa carte (top: 0) et s'étend VERS LA
   DROITE (200 % de large) : un seul nom se lit, celui du détail. Hors
   du flux comme avant : la grille ne saute jamais au passage de la
   souris. Son liseré reprend celui de la carte qu'il recouvre. */
.detail-creneau { position: absolute; top: 0; left: calc(-4 * var(--pt));
                  min-width: calc(200% + 4 * var(--pt)); z-index: 1;
                  display: none; padding: calc(7 * var(--pt)) calc(9 * var(--pt))
                                          calc(9 * var(--pt));
                  background: var(--carte-survol);
                  border-left: calc(4 * var(--pt)) solid transparent;
                  border-radius: calc(8 * var(--pt));
                  box-shadow: 0 12px 24px var(--ombre);
                  font-size: var(--t-etiquette); line-height: 1.45;
                  overflow-wrap: anywhere; }
/* La dernière colonne n'a pas de droite où grandir : son détail s'étend
   vers la gauche — mieux qu'un détail coupé par le bord de la fenêtre. */
.colonne-jour:last-child .detail-creneau { left: auto;
                                           right: calc(-4 * var(--pt)); }
.detail-creneau b { display: block; font-size: var(--t-petit);
                    line-height: 1.3; margin-bottom: calc(5 * var(--pt)); }
.detail-creneau .lignes { color: var(--gris-texte); }
.carte-creneau:hover .detail-creneau { display: block; }
/* Le liseré du détail reprend celui de la carte : le trait descend.
   Même ordre que la carte — l'état d'abord, le réseau ensuite. */
.e-a_ecrire .detail-creneau { border-left-color: var(--gris-etiquette-texte); }
.e-brouillon .detail-creneau { border-left-color: var(--jaune-texte); }
.e-valide .detail-creneau { border-left-color: var(--vert-marque); }
.c-linkedin .detail-creneau { border-left-color: #0076B2; }
.c-facebook .detail-creneau { border-left-color: #1877F2; }
.c-whatsapp .detail-creneau { border-left-color: #25D366; }
.c-instagram .detail-creneau { border-left-color: #C837AB; }

.creneau { display: flex; gap: calc(14 * var(--pt)); align-items: center;
           background: var(--carte); border: 1px solid var(--gris-bord);
           border-radius: var(--rayon-carte); overflow: hidden;
           padding: calc(12 * var(--pt)) calc(18 * var(--pt));
           margin-bottom: calc(8 * var(--pt)); }
.creneau > div { min-width: 0; }
.creneau .marque-urgence { flex: 0 0 auto; width: calc(6 * var(--pt));
                           align-self: stretch; border-radius: 999px;
                           background: var(--gris-etiquette-texte); }
.creneau .quand { flex: 0 0 auto; font-family: var(--police-titre);
                  font-weight: 800; font-size: var(--t-source);
                  color: var(--encre-titre); min-width: calc(52 * var(--pt)); }
.creneau .quoi { font-size: var(--t-carte); font-weight: 700; margin: 0;
                 overflow-wrap: anywhere; }
.creneau .ou { font-size: var(--t-petit); color: var(--gris-texte);
               margin: calc(4 * var(--pt)) 0 0; }
.creneau .vers { margin-left: auto; flex: 0 0 auto; font-size: var(--t-base);
                 font-weight: 500; color: var(--vert-texte);
                 text-decoration: none; white-space: nowrap; }
/* À écrire, brouillon, validé, publié — dans cet ordre de chaleur. */
.e-a_ecrire .marque-urgence { background: var(--gris-etiquette-texte); }
.e-brouillon .marque-urgence { background: var(--jaune-texte); }
.e-valide .marque-urgence { background: var(--vert-marque); }
.e-publie .marque-urgence { background: var(--vert-marque); }
.e-publie .quoi { opacity: .65; }        /* c'est derrière nous */

/* « Créer un planning » : le formulaire dort sous le bouton tant qu'on
   n'en veut pas — un écran qui s'ouvre sur un formulaire vide donne
   l'impression qu'il faut le remplir. */
.creer-planning { margin: 0 0 calc(26 * var(--pt)); }
.creer-planning > summary { display: inline-block; cursor: pointer;
                            list-style: none; }
.creer-planning > summary::-webkit-details-marker { display: none; }
.creer-planning[open] > summary { margin-bottom: calc(18 * var(--pt)); }
.duo-dates { display: grid; grid-template-columns: 1fr 1fr;
             gap: calc(16 * var(--pt)); width: 100%; }
@media (max-width: 620px) { .duo-dates { grid-template-columns: 1fr; } }

/* --- « Word ou Excel ? », et la forme attendue ---------------------
   On ne décrit pas un tableau, on le MONTRE : chacun doit reconnaître
   son propre écran avant de chercher son fichier. */
/* DEUX GRANDES TUILES, d'après le cadre Figma 140:599 du directeur
   (07/08/2026) : on reconnaît Word et Excel à leur couleur avant
   d'avoir lu le mot. Le nom du fichier attendu est écrit dessous. */
.choix-format { display: grid; grid-template-columns: 1fr 1fr;
                gap: calc(24 * var(--pt)); margin: 0 0 calc(26 * var(--pt)); }
.choix-format a { display: flex; flex-direction: column; align-items: center;
                  gap: calc(10 * var(--pt)); text-decoration: none;
                  color: var(--encre); }
.choix-format b { position: absolute; width: 1px; height: 1px;
                  overflow: hidden; clip-path: inset(50%); }
.choix-format .discret { text-align: center; }
.vignette-format { display: flex; align-items: center; justify-content: center;
                   width: 100%; aspect-ratio: 1 / 1;
                   border-radius: var(--rayon-carte);
                   background: var(--gris-bloc);
                   transition: transform var(--temps) var(--detente),
                               box-shadow var(--temps) var(--detente); }
/* 40 % et non 55 : les icônes de Vigie respirent mieux petites que les
   gros logos pleins qu'elles remplacent (20/08/2026). */
.vignette-format .icone { width: 40%; height: 40%; }
.choix-format a:hover .vignette-format { transform: translateY(-2px);
                                         box-shadow: 0 10px 26px var(--ombre); }

/* Le tableau, comme on le voit dans l'un et dans l'autre. */
.modele-word, .modele-excel { overflow-x: auto; margin: 0 0 calc(26 * var(--pt)); }
.modele-word table, .modele-excel table { border: 0; font-size: var(--t-petit);
                                          border-radius: 0; }
.modele-word { background: var(--carte); border: 1px solid var(--gris-bord);
               border-radius: var(--rayon-carte);
               padding: calc(26 * var(--pt)) calc(22 * var(--pt)); }
.modele-word td, .modele-word th { border: 1px solid var(--gris-bord);
                                   padding: calc(8 * var(--pt)) calc(12 * var(--pt));
                                   background: none; }
.modele-excel td, .modele-excel th { border: 1px solid var(--gris-bord);
                                     padding: calc(7 * var(--pt)) calc(12 * var(--pt));
                                     background: var(--carte); }
.modele-excel .reperes, .modele-excel .reperes td {
  background: var(--gris-bloc); color: var(--gris-texte);
  text-align: center; font-size: var(--t-etiquette); }
.entete-modele { font-weight: 700; color: var(--encre);
                 background: var(--vert-voile) !important;
                 text-transform: none; letter-spacing: 0;
                 font-size: var(--t-petit); }

/* --- verser un planning ------------------------------------------- */
.verser { display: flex; align-items: center; gap: calc(14 * var(--pt));
          flex-wrap: wrap; margin: 0 0 calc(26 * var(--pt)); }
.verser label { cursor: pointer; }
.verser .discret { flex: 1; min-width: calc(240 * var(--pt)); }
table.verse input { width: 100%; padding: calc(7 * var(--pt)) calc(12 * var(--pt)); }
table.verse td { vertical-align: middle; }
/* Une ligne mal lue se voit, et la ligne du dessous dit pourquoi. */
tr.boiteuse { background: var(--rouge-fond); }
tr.pourquoi td { border-bottom: 0; padding-top: 0; }

/* ------------------------------------------------- ce que la cloche dit */
/* Un liseré de couleur au bord : la couleur dit l'urgence AVANT qu'on
   ait lu la ligne, et une couleur seule ne dit jamais rien — le texte
   la répète toujours. */
.alerte { display: flex; gap: calc(14 * var(--pt)); align-items: center;
          background: var(--gris-bloc); border-radius: var(--rayon-carte);
          padding: calc(14 * var(--pt)) calc(20 * var(--pt));
          margin-bottom: calc(10 * var(--pt)); overflow: hidden;
          text-decoration: none; color: inherit; }
.alerte:hover { background: rgba(217, 217, 217, .45); }
.alerte > div { min-width: 0; }
.alerte .marque-urgence { flex: 0 0 auto; width: calc(6 * var(--pt));
                          align-self: stretch; border-radius: 999px;
                          background: var(--vert-marque); }
.a-rouge .marque-urgence { background: var(--rouge-texte); }
.a-chaud .marque-urgence { background: var(--jaune-texte); }
.a-calme .marque-urgence { background: var(--gris-etiquette-texte); }
.alerte .quoi { font-size: var(--t-carte); font-weight: 700; margin: 0;
                overflow-wrap: anywhere; }
.alerte .ou { font-size: var(--t-petit); color: var(--gris-texte);
              margin: calc(5 * var(--pt)) 0 0; overflow-wrap: anywhere; }
.alerte .vers { margin-left: auto; flex: 0 0 auto; font-size: var(--t-base);
                font-weight: 500; color: var(--vert-texte); white-space: nowrap; }

.vide { text-align: center; padding: calc(34 * var(--pt)) calc(22 * var(--pt)); }
/* Un écran vide reste calme : son icône s'efface à moitié. */
.vide .icone { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); opacity: .5;
               margin: 0 auto; }
.vide p { margin: calc(12 * var(--pt)) 0 0; }

/* ══════════════════════════════════════════════════════════════════
   LA FENÊTRE DES RACCOURCIS.

   Une popup n'a pas de barre d'adresse : son entête doit donc dire à
   elle seule où l'on est. Icône du bouton, titre de l'écran, croix.

   TOUTE RÈGLE DE CETTE SECTION EST PORTÉE PAR LA FENÊTRE. Une règle
   posée sur « h1 » ou « .sous-titre » nus fuirait vers les écrans
   pleins et rapetisserait les titres de tout le logiciel.
   ══════════════════════════════════════════════════════════════════ */
/* LA BORNE EN POURCENTAGE D'ÉCRAN COMPTE AUTANT QUE LES POINTS. Une
   largeur écrite seulement en points de maquette grandit avec le poste :
   c'est ainsi que la fenêtre du planning avait fini par tout manger
   (07/08/2026). Chaque largeur de ce fichier porte donc ses deux bornes,
   et un test le vérifie. */
/* LE NAVIGATEUR DONNE À TOUTE FENÊTRE SA PROPRE COULEUR DE TEXTE — du
   noir. Le thème sombre retourne les couleurs sur le corps de la page,
   pas dans les fenêtres : titres, intitulés de champ et cellules de
   tableau y sortaient noirs sur fond noir, invisibles (relecture du
   dessin, 16/10/2026). Les deux fenêtres suivent donc le texte du
   thème, comme le reste. */
dialog#popup, dialog#sous-popup { color: var(--encre); }
dialog#popup { border: 0; border-radius: var(--rayon-bloc); padding: 0;
               max-width: min(calc(900 * var(--pt)), 88vw);
               width: calc(100% - 48px);
               background: var(--fond); overflow: hidden; max-height: 86vh;
               flex-direction: column;
               box-shadow: 0 20px 60px var(--ombre); }
/* LA MISE EN COLONNE NE VAUT QUE FENÊTRE OUVERTE. Un « display » posé
   sans condition écrase celui du navigateur, qui cache une fenêtre
   fermée : la boîte vide serait restée visible au bas de CHAQUE écran
   du logiciel. La colonne, elle, sert à ce que l'entête tienne pendant
   que le corps défile. */
dialog#popup[open] { display: flex; }
/* ══ LA FENÊTRE LARGE ══
   Le calendrier de semaine a sept colonnes ; dans neuf cents points,
   plus rien ne se lit. La maquette du directeur (cadre Figma 1728)
   donne au planning toute la fenêtre — c'est ce que reprend « large ».
   L'écran le demande lui-même par « data-large » : la fenêtre ne
   devine jamais ce qu'elle porte. */
/* LA BORNE EN POURCENTAGE D'ÉCRAN EST LA PLUS IMPORTANTE DES DEUX.
   Une largeur écrite seulement en points de maquette grandit avec
   l'écran : sur un poste plus large que 1280, la fenêtre mangeait TOUT
   (directeur, 07/08/2026 — « il est trop grand »). Le minimum des deux
   lui garde une marge sur n'importe quel écran. */
/* L'ARRONDI EST CELUI DES AUTRES FENÊTRES (directeur, 07/08/2026) —
   planification, sources favorites, mon compte. Une fenêtre plus
   arrondie que ses sœurs se remarque, et pas en bien. Il est donc hérité
   de « dialog#popup » et n'est PAS redéfini ici. */
dialog#popup.large { max-width: min(calc(1400 * var(--pt)), 84vw);
                     max-height: 84vh; width: calc(100% - 24px); }

/* ══ LA FENÊTRE AMPLE ══
   Un cran entre l'ordinaire et celle du planning, pour les PARAMÈTRES
   seuls (directeur, 13/08/2026 — « augmente la largeur », puis
   « seulement pour les paramètres »).
   POURQUOI PAS TOUTES LES FENÊTRES. « Inviter quelqu'un » ou « Ajouter
   un site » ne portent que quelques champs : les étaler sur douze cents
   points les délaverait. Les paramètres, eux, portent depuis le 13/08 de
   vrais réglages avec leurs explications, qui se hachaient en trois
   lignes dans neuf cents points.
   POURQUOI PAS « large » NON PLUS. Celle du planning tient sept colonnes
   de calendrier ; une rubrique de réglages y flotterait. */
dialog#popup.ample { max-width: min(calc(1200 * var(--pt)), 88vw); }

/* ══ LA SOUS-FENÊTRE ══
   Les petits formulaires du planning s'ouvrent PAR-DESSUS le tableau
   (directeur, 07/08/2026) : on remplit sans perdre de vue ce qu'on
   garnit. 691 points de large, d'après la maquette. */
dialog#sous-popup { border: 0; border-radius: var(--rayon-bloc); padding: 0;
                    max-width: calc(691 * var(--pt)); width: calc(100% - 24px);
                    background: var(--fond); overflow: hidden; max-height: 88vh;
                    flex-direction: column;
                    box-shadow: 0 24px 70px var(--ombre); }
dialog#sous-popup[open] { display: flex; }
/* Le voile de la sous-fenêtre est plus léger : la grande est déjà
   derrière, et deux voiles empilés noircissent tout. */
dialog#sous-popup::backdrop { background: rgba(0, 0, 0, .28); }
/* L'ENTÊTE DE LA SOUS-FENÊTRE ÉTAIT BLANC, À PART — « il y a des popups
   qui n'ont pas de fond gris au niveau du titre comme les autres »
   (directeur, 20/08/2026, captures à l'appui) : l'exception est
   retirée, l'entête commun (.popup-entete : fond gris, trait dessous)
   vaut pour les deux coquilles et pour toute fenêtre à venir. */
#sous-corps { padding: calc(18 * var(--pt)) calc(32 * var(--pt))
                       calc(30 * var(--pt)); overflow-y: auto; }
/* « Corrige les popups où il y a des espaces vides vers la droite »
   (créer un planning, ajouter un créneau…) : le formulaire gardait sa
   largeur de page (520 points) dans une fenêtre de 691 — ici, les
   champs remplissent la fenêtre. */
#sous-corps .bloc-compte { max-width: none; }
#sous-corps h1 { display: none; }
#sous-corps .page-simple { padding-top: 0; }
#sous-corps form { margin: 0; }
/* Le bouton d'envoi prend toute la largeur, comme sur la maquette. */
#sous-corps button.principal { width: 100%; }
@media (max-width: 620px) { #sous-corps { padding: 8px 18px 22px; } }
/* L'ARRIÈRE DEVIENT FLOU (directeur, 06/08/2026) — pour toutes les
   fenêtres, puisqu'elles n'en sont qu'une. Le voile sombre reste
   dessous : là où le flou n'est pas rendu, la fenêtre se détache
   quand même du fond. */
dialog#popup::backdrop { background: var(--voile);
                         -webkit-backdrop-filter: blur(7px);
                         backdrop-filter: blur(7px); }
.popup-entete { display: flex; align-items: center; gap: calc(16 * var(--pt));
                padding: calc(22 * var(--pt)) calc(26 * var(--pt));
                border-bottom: 1px solid var(--gris-bord);
                background: var(--gris-bloc); }
.popup-rond { width: calc(48 * var(--pt)); height: calc(48 * var(--pt));
              border-radius: 50%; flex: 0 0 auto; background: var(--vert-marque);
              display: flex; align-items: center; justify-content: center; }
/* LA VIGNETTE RECOPIE L'ICÔNE DU BOUTON CLIQUÉ (popup.js) — posée sur le
   rond vert, elle prend les couleurs de l'icône choisie. */
#popup-vignette { width: calc(24 * var(--pt)); height: calc(24 * var(--pt));
                  --i-vert: #fff; --i-encre: var(--detail-sur-vert); }
#popup-vignette[hidden] { display: none; }
/* PAS D'ICÔNE, PAS DE ROND. « Mon compte » s'ouvre depuis un portrait,
   pas depuis un bouton à icône : le rond vert restait vide, et un
   disque vide ressemble à un défaut. */
.popup-rond:has(> [hidden]) { display: none; }
.popup-entete h2 { font-family: var(--police-titre); font-weight: 800;
                   font-size: var(--t-bloc); margin: 0; outline: none; }
/* LA CROIX AU CENTRE DE SON CERCLE (correction du directeur,
   20/08/2026, capture à l'appui : elle flottait en haut à droite) : le
   pochoir est un bloc de 20 points — sans centrage, le rembourrage par
   défaut du navigateur le pousse hors du centre. Le bouton centre donc
   lui-même son contenu, rembourrage à zéro. */
.popup-fermer { margin-left: auto; border: 0; background: var(--carte);
                width: calc(42 * var(--pt)); height: calc(42 * var(--pt));
                border-radius: 50%; font-size: var(--t-bloc); line-height: 1;
                cursor: pointer; color: var(--gris-texte);
                display: flex; align-items: center; justify-content: center;
                padding: 0; }
.popup-fermer:hover { background: var(--gris-champ); }
/* La croix des fenêtres, en deux tons (seconde série, 17/10/2026) — un
   dessin et non le caractère « × », qui change d'une machine à l'autre. */
.popup-fermer .ic-fermer { display: block; width: calc(20 * var(--pt));
                           height: calc(20 * var(--pt)); }

#popup-corps { --marge-bas: calc(28 * var(--pt));
               padding: calc(28 * var(--pt)) calc(32 * var(--pt)) var(--marge-bas);
               overflow: auto; flex: 1; min-height: 130px;
               overscroll-behavior: contain; }

/* Ce que le serveur répond, dit dans la fenêtre — et rien du tout
   quand il n'a rien dit. */
#popup-mot { margin: calc(16 * var(--pt)) calc(32 * var(--pt)) 0; }
#popup-mot:empty { display: none; }

/* Le titre et le pied de la page injectée n'ont plus lieu d'être :
   l'entête porte le premier, et le second parle du tableau de bord. */
#popup-corps h1 { display: none; }
#popup-corps .page-simple { padding-top: 0; }

/* « ANNULER » N'A PAS SA PLACE DANS LA FENÊTRE : la croix ferme déjà, et
   la maquette du directeur ne montre qu'un champ et un bouton. Le lien
   reste dans le gabarit pour la page pleine — sans JavaScript, ou au
   retour d'une erreur — où il n'y a pas de croix pour sortir. */
#popup-corps .lien-annuler { display: none; }
#popup-corps .sous-titre { margin-bottom: calc(20 * var(--pt)); }
#popup-corps h2 { margin: calc(22 * var(--pt)) 0 calc(10 * var(--pt)); }
#popup-corps h2:first-of-type { margin-top: 0; }
#popup-corps .bloc { background: none; border-radius: 0; padding: 0; }
/* Les largeurs figées d'un écran pleine page débordent d'une fenêtre.
   C'est le CONTENEUR qui défile (.table-large, plus bas), jamais le
   tableau : « display: block » sur un tableau lui retire sa nature de
   tableau, et un lecteur d'écran ne rattache plus une cellule à sa
   colonne. */
#popup-corps table { width: 100%; }
#popup-corps input[type=text], #popup-corps input[type=password] { max-width: 100%; }
#popup-corps .bandeau:first-child { margin-top: 0; }
@media (max-width: 620px) { #popup-corps { --marge-bas: 24px; padding: 20px 18px var(--marge-bas); } }

/* ======================================================================
   LES COMPOSANTS COMMUNS — tableaux, cartes, boutons, pastilles.
   Tous les autres écrans s'en servent : ils vivaient dans un <style> du
   gabarit, ils vivent ici.
   ====================================================================== */
.cartes { display: grid; gap: var(--ecart); margin-bottom: calc(26 * var(--pt));
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.carte { background: var(--carte); border: 1px solid var(--gris-bord);
         border-radius: var(--rayon-carte);
         padding: calc(16 * var(--pt)) calc(20 * var(--pt)); }
.carte .libelle { font-size: var(--t-petit); color: var(--gris-texte); margin: 0; }
.carte .valeur { font-family: var(--police-titre); font-weight: 800;
                 font-size: var(--t-note); margin: calc(4 * var(--pt)) 0 0; }
.carte .detail { font-size: var(--t-petit); color: var(--gris-pale);
                 margin: calc(3 * var(--pt)) 0 0; }
/* LE PANNEAU GRIS, EN DEUX TONS (maquette du directeur, 11/08/2026) :
   une liste n'est pas une carte blanche posee sur du blanc. La bande
   d'en-tete est plus soutenue que le corps. Pas de bordure : sur du
   blanc le gris se detache seul, et un trait de plus alourdirait ce que
   la maquette montre leger.
   Les deux gris viennent de la palette, jamais d'une couleur ecrite a
   la main — c'est ce qui fait que le theme sombre suit tout seul. */
table { width: 100%; border-collapse: collapse; background: var(--gris-bloc);
        border: 0; border-radius: var(--rayon-bloc);
        overflow: hidden; font-size: var(--t-carte); }
th { text-align: left; font-size: var(--t-petit); color: var(--gris-texte);
     font-weight: 600; padding: calc(var(--interligne) * var(--pt)) calc(18 * var(--pt));
     border-bottom: 0; background: var(--gris-champ); }
td { padding: calc(var(--interligne) * var(--pt)) calc(18 * var(--pt));
     border-bottom: 1px solid var(--gris-bloc); vertical-align: top; }
tr:last-child td { border-bottom: none; }
/* UNE LISTE VIDE GARDE SON PANNEAU : l'ecran ne se reduit pas a un titre
   suivi d'une phrase perdue au milieu du blanc. Hauteur MINIMALE, jamais
   fixe — le panneau grandit avec ses lignes. */
td[colspan] { height: calc(220 * var(--pt)); vertical-align: top; }

/* ── LES PANNEAUX REPLIABLES (page Suivis, maquette du directeur du
   12/08/2026) ────────────────────────────────────────────────────────
   « Votre équipe » puis « Ce qui s'est passé », l'un SOUS l'autre en
   pleine largeur — la grille à deux colonnes de l'ancien écran a
   disparu. Chacun est un <details open> : ouvert par défaut (on ouvre
   cette page pour LIRE, pas pour déplier), refermable d'un clic, et qui
   fonctionne sans JavaScript.

   MÊME PANNEAU GRIS EN DEUX TONS QUE LES LISTES CI-DESSUS : la bande
   d'en-tête (le <summary>) reprend le gris soutenu de « th », le corps
   le gris clair de « table » — la même famille d'écran, la même règle.

   LE CHEVRON EST LE MARQUEUR DU <details>, jamais une image : le natif
   est masqué puis redessiné avec les deux traits en « currentColor »,
   exactement le mécanisme de « .avec-fleche » plus haut — une seule
   façon de dessiner un chevron dans toute la coque, jamais une couleur
   écrite en dur. Il se retourne quand le panneau s'ouvre. */
.panneau-pliable { background: var(--gris-bloc); border-radius: var(--rayon-bloc);
                    overflow: hidden; margin-bottom: var(--ecart); }
.panneau-pliable > summary { list-style: none; cursor: pointer; position: relative;
    display: block; background: var(--gris-champ);
    padding: calc(18 * var(--pt)) calc(52 * var(--pt)) calc(18 * var(--pt))
             var(--dedans-bloc); }
.panneau-pliable > summary::-webkit-details-marker { display: none; }
.panneau-pliable > summary h3 { margin: 0 0 calc(6 * var(--pt)); }
.panneau-pliable > summary .amorce { margin: 0; }
/* LE CHEVRON, À DROITE DE LA BANDE — la maquette le pose là, pas au
   bord du texte. */
.panneau-pliable > summary::after { content: ""; position: absolute;
    top: 50%; right: var(--dedans-bloc); width: .5em; height: .5em;
    margin-top: -.32em; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform var(--temps) var(--detente); }
.panneau-pliable[open] > summary::after { margin-top: -.18em;
    transform: rotate(225deg); }
.panneau-corps { padding: var(--dedans-bloc); }

.pastille { display: inline-block; font-size: var(--t-etiquette); font-weight: 700;
            padding: calc(3 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px; }
.p-vert { background: var(--vert-voile); color: var(--vert-texte); }
.p-gris { background: var(--gris-etiquette); color: var(--gris-etiquette-texte); }
.p-rouge { background: var(--rouge-fond); color: var(--rouge-texte); }
.p-bleu { background: var(--bleu-fond); color: var(--bleu-texte); }
.point { display: inline-block; width: calc(10 * var(--pt));
         height: calc(10 * var(--pt)); border-radius: 50%;
         margin-right: calc(9 * var(--pt)); }
.discret { color: var(--gris-texte); font-size: var(--t-petit); }
.motif { color: var(--gris-texte); font-size: var(--t-petit);
         margin-top: calc(3 * var(--pt)); }
a.lien { color: var(--vert-sombre); text-decoration: none; }
a.lien:hover { text-decoration: underline; }
.note { background: var(--carte); border: 1px solid var(--gris-bord);
        border-radius: var(--rayon-carte);
        padding: calc(14 * var(--pt)) calc(20 * var(--pt));
        font-size: var(--t-petit); color: var(--gris-texte); }
.bandeau { border-radius: var(--rayon-carte);
           padding: calc(12 * var(--pt)) calc(20 * var(--pt));
           font-size: var(--t-carte); margin: 0 0 calc(20 * var(--pt)); }
.b-ok { background: var(--succes-fond); color: var(--succes); border: 1px solid #c3e39a; }
.b-erreur { background: rgba(235, 36, 21, .12); color: var(--rouge-texte);
            border: 1px solid #f7c1c1; }
/* Les boutons de service reprennent la pilule du dessin, en plus petit. */
button, .bouton { font: 600 var(--t-carte) "Inter", sans-serif;
                  padding: calc(10 * var(--pt)) calc(20 * var(--pt));
                  border: 1px solid var(--gris-bord); border-radius: 999px;
                  cursor: pointer; background: var(--carte); color: var(--encre); }
button:hover, .bouton:hover { background: var(--gris-bloc); }
/* Un lien peut être un bouton : la classe suit l'élément, pour qu'on
   n'écrive plus la couleur à la main dans un gabarit. */
button.principal, .bouton.principal {
  background: var(--vert-marque); border-color: var(--vert-marque);
  color: var(--sur-vert); font-weight: 700; text-decoration: none; display: inline-block; }
button.principal:hover, .bouton.principal:hover {
  background: var(--vert-sombre); border-color: var(--vert-sombre); }
button.discret-b { font-size: var(--t-petit);
                   padding: calc(6 * var(--pt)) calc(14 * var(--pt));
                   color: var(--gris-texte); }
button:disabled { opacity: .55; cursor: default; }

/* ── LE BOUTON DE MISE À JOUR N'EXISTE QUE DANS LA FENÊTRE DU LOGICIEL
   (rubrique À propos, étape 5 du chantier, 18/08/2026) ─────────────────
   window.pywebview.api.mettre_a_jour() n'existe pas dans un navigateur
   ordinaire : le bouton doit donc y rester invisible, jamais un bouton
   qui ne peut pas marcher là où il s'affiche. .pont-actif est posée sur
   <html> par templates/_barre_fenetre.html, SEULEMENT une fois
   window.pywebview confirmé (chargé une fois par la coque, jamais
   rechargé par la popup — voir son commentaire).

   #maj-bouton, PAR SON ID, JAMAIS L'ATTRIBUT « hidden » NU : un
   <button class="bouton principal" hidden> perdrait contre la règle
   juste au-dessus (button.principal { display:inline-block }) — un
   attribut de l'utilisateur-agent (spécificité la plus basse de la
   cascade) ne bat jamais une règle d'auteur, quelle que soit sa
   spécificité à elle. Leçon déjà payée sur ce projet : static/
   entree.css porte le même correctif, sous le même commentaire
   « CACHÉ VEUT DIRE CACHÉ ». #maj-sans-pont (le texte de repli pour un
   navigateur) fait l'échange inverse, sur la même marque. */
#maj-bouton { display: none; }
.pont-actif #maj-bouton { display: inline-block; }
.pont-actif #maj-sans-pont { display: none; }

/* « date » et « search » manquaient : les champs de date sortaient
   carrés et bordés au milieu de champs en pilules — la maquette du
   directeur les veut de la même forme que les autres (07/08/2026). */
/* ── L'HEURE ET LA DATE (éléments personnalisés, refonte validée le
   18/10/2026). Le petit bouton du navigateur s'efface ; l'icône de Vigie
   est dessinée au bout du champ, et un clic sur elle ouvre le choix de
   Vigie (static/elements.js). Ailleurs dans le champ, on tape. Les
   dessins sont ceux des icônes « heure de la veille » et « planning »,
   leurs deux tons écrits dans l'image : le détail passe au clair la nuit. */
input[type=time]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator { display: none; }

/* LES CASES ET LES BOUTONS RADIO prennent le vert de Vigie, comme sur les
   maquettes Figma (18/10/2026) — plus le bleu du navigateur. */
input[type=checkbox], input[type=radio] { accent-color: var(--vert-marque); }
/* Le bouton radio est dessiné : sur un vert clair, le navigateur cerne
   le point coché d'un anneau sombre. La maquette veut un anneau vert fin
   autour d'un point vert, le fond passant entre les deux. */
input[type=radio] { appearance: none; -webkit-appearance: none; flex: none;
                    width: calc(18 * var(--pt)); height: calc(18 * var(--pt));
                    margin: 0; border-radius: 999px; cursor: pointer;
                    border: 1.5px solid var(--gris-texte); background: var(--fond); }
input[type=radio]:checked { border-color: var(--vert-marque);
                            background: radial-gradient(var(--vert-marque) 0 42%, var(--fond) 47%); }
input[type=radio]:focus-visible { outline: 2px solid var(--vert-marque); outline-offset: 2px; }

input[type=text], input[type=password], input[type=time], input[type=tel],
input[type=date], input[type=search], input[type=email], select {
        font: 400 var(--t-carte) "Inter", sans-serif;
        padding: calc(11 * var(--pt)) calc(20 * var(--pt));
        border: 0; border-radius: 999px;
        background: var(--gris-champ); color: var(--encre); }
input[type=time] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cdefs%3E%3Cmask id=%22v%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22%3E%3Crect width=%2224%22 height=%2224%22 fill=%22%23fff%22/%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M12 8.6 V13.4 L15.2 15.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%2388c73b%22 mask=%22url(%23v)%22%3E%3Ccircle cx=%2212%22 cy=%2213.4%22 r=%228.6%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%23090909%22%3E%3Crect x=%229.6%22 y=%221.4%22 width=%224.8%22 height=%222.6%22 rx=%221.3%22/%3E%3Crect x=%2218.1%22 y=%224.6%22 width=%223%22 height=%222.6%22 rx=%221.3%22 transform=%22rotate(45 19.6 5.9)%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
input[type=date] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cdefs%3E%3Cmask id=%22v%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22%3E%3Crect width=%2224%22 height=%2224%22 fill=%22%23fff%22/%3E%3Cg fill=%22%23000%22%3E%3Ccircle cx=%227.3%22 cy=%2214.2%22 r=%221.25%22/%3E%3Ccircle cx=%2212%22 cy=%2214.2%22 r=%221.25%22/%3E%3Ccircle cx=%2216.7%22 cy=%2214.2%22 r=%221.25%22/%3E%3Ccircle cx=%227.3%22 cy=%2217.6%22 r=%221.25%22/%3E%3Ccircle cx=%2212%22 cy=%2217.6%22 r=%221.25%22/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%2388c73b%22 mask=%22url(%23v)%22%3E%3Cpath d=%22M3 10.5 H21 V18.2 A2.6 2.6 0 0 1 18.4 20.8 H5.6 A2.6 2.6 0 0 1 3 18.2 Z%22/%3E%3Crect x=%226.6%22 y=%222.4%22 width=%222.2%22 height=%224.6%22 rx=%221.1%22/%3E%3Crect x=%2215.2%22 y=%222.4%22 width=%222.2%22 height=%224.6%22 rx=%221.1%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%23090909%22%3E%3Cpath d=%22M3 7.2 A2.6 2.6 0 0 1 5.6 4.6 H18.4 A2.6 2.6 0 0 1 21 7.2 V9.4 H3 Z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
input[type=time], input[type=date] {
  background-repeat: no-repeat; background-size: calc(18 * var(--pt));
  background-position: right calc(16 * var(--pt)) center;
  padding-right: calc(46 * var(--pt)); }
:root[data-theme="sombre"] body.clair input[type=time] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cdefs%3E%3Cmask id=%22v%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22%3E%3Crect width=%2224%22 height=%2224%22 fill=%22%23fff%22/%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M12 8.6 V13.4 L15.2 15.4%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%2388c73b%22 mask=%22url(%23v)%22%3E%3Ccircle cx=%2212%22 cy=%2213.4%22 r=%228.6%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%23f4f6f1%22%3E%3Crect x=%229.6%22 y=%221.4%22 width=%224.8%22 height=%222.6%22 rx=%221.3%22/%3E%3Crect x=%2218.1%22 y=%224.6%22 width=%223%22 height=%222.6%22 rx=%221.3%22 transform=%22rotate(45 19.6 5.9)%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="sombre"] body.clair input[type=date] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cdefs%3E%3Cmask id=%22v%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22%3E%3Crect width=%2224%22 height=%2224%22 fill=%22%23fff%22/%3E%3Cg fill=%22%23000%22%3E%3Ccircle cx=%227.3%22 cy=%2214.2%22 r=%221.25%22/%3E%3Ccircle cx=%2212%22 cy=%2214.2%22 r=%221.25%22/%3E%3Ccircle cx=%2216.7%22 cy=%2214.2%22 r=%221.25%22/%3E%3Ccircle cx=%227.3%22 cy=%2217.6%22 r=%221.25%22/%3E%3Ccircle cx=%2212%22 cy=%2217.6%22 r=%221.25%22/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%2388c73b%22 mask=%22url(%23v)%22%3E%3Cpath d=%22M3 10.5 H21 V18.2 A2.6 2.6 0 0 1 18.4 20.8 H5.6 A2.6 2.6 0 0 1 3 18.2 Z%22/%3E%3Crect x=%226.6%22 y=%222.4%22 width=%222.2%22 height=%224.6%22 rx=%221.1%22/%3E%3Crect x=%2215.2%22 y=%222.4%22 width=%222.2%22 height=%224.6%22 rx=%221.1%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(12 12) scale(1.08) translate(-12 -12)%22%3E%3Cg fill=%22%23f4f6f1%22%3E%3Cpath d=%22M3 7.2 A2.6 2.6 0 0 1 5.6 4.6 H18.4 A2.6 2.6 0 0 1 21 7.2 V9.4 H3 Z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* ── LE PANNEAU DES ÉLÉMENTS PERSONNALISÉS : la liste d'une <select>, le
   choix d'une heure, le calendrier. Il monte au premier plan (popover) :
   les réglages du navigateur pour un popover sont annulés ici. ────── */
.panneau-choix { position: fixed; inset: auto; margin: 0; z-index: 80; display: none;
                 box-sizing: border-box; max-height: calc(380 * var(--pt)); overflow: auto;
                 padding: calc(5 * var(--pt)); border: 0; border-radius: var(--rayon-carte);
                 background: var(--surface-flottante); color: var(--encre);
                 font: 400 var(--t-carte) "Inter", sans-serif;
                 box-shadow: 0 12px 32px var(--ombre), 0 0 0 1px var(--bord-flottant); }
.panneau-choix:focus { outline: none; }
.panneau-choix .choix { display: flex; align-items: center; justify-content: space-between;
                        gap: calc(10 * var(--pt)); cursor: pointer;
                        padding: calc(8 * var(--pt)) calc(12 * var(--pt));
                        border-radius: var(--rayon-carte); }
.panneau-choix .choix:hover, .panneau-choix .choix.actif { background: var(--gris-bloc); }
.panneau-choix .pris { background: var(--vert-voile); font-weight: 700; }
.panneau-choix .choix.pris::after { content: ""; width: calc(6 * var(--pt)); height: calc(11 * var(--pt));
                                    border-right: 2px solid var(--vert-texte);
                                    border-bottom: 2px solid var(--vert-texte);
                                    transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.panneau-choix .choix.eteint { opacity: .45; cursor: default; }
.panneau-choix .choix.vide { color: var(--gris-texte); cursor: default; }
.panneau-choix .recherche-choix[type=text] { width: 100%; box-sizing: border-box; margin: 0 0 calc(4 * var(--pt));
                                             border-radius: var(--rayon-carte); }
/* L'heure : deux colonnes qui défilent chacune. */
.panneau-choix.pour-heure { overflow: hidden; width: calc(230 * var(--pt)); }
.heure-choix { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--pt)); }
.colonne-choix { display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
                 max-height: calc(260 * var(--pt)); padding: 0 calc(2 * var(--pt)); }
.colonne-choix p { margin: calc(4 * var(--pt)) 0; text-align: center; font-size: var(--t-petit);
                   color: var(--gris-texte); }
.panneau-choix button.case-choix, .panneau-choix button.jour-choix, .panneau-choix button.fleche-choix,
.panneau-choix button.lien-choix { border: 0; background: none; color: var(--encre); font-weight: 400;
                                   padding: calc(7 * var(--pt)) 0; border-radius: var(--rayon-carte); }
.panneau-choix button.case-choix:hover, .panneau-choix button.jour-choix:hover:not(:disabled),
.panneau-choix button.fleche-choix:hover { background: var(--gris-bloc); }
.panneau-choix button.case-choix.pris, .panneau-choix button.jour-choix.pris {
  background: var(--vert-marque); color: var(--sur-vert); font-weight: 700; }
/* Le calendrier : le jour choisi en vert plein, aujourd'hui cerclé. */
.panneau-choix.pour-calendrier { width: calc(300 * var(--pt)); padding: calc(10 * var(--pt)); }
.mois-choix { display: flex; align-items: center; justify-content: space-between;
              margin: 0 0 calc(8 * var(--pt)); font-weight: 700; }
.panneau-choix button.fleche-choix { width: calc(30 * var(--pt)); height: calc(30 * var(--pt));
                                     padding: 0; border-radius: 50%; background: var(--gris-bloc);
                                     font-weight: 700; }
.jours-choix { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.jours-choix .nom-jour { font-size: var(--t-petit); color: var(--gris-texte); padding: calc(4 * var(--pt)) 0; }
.panneau-choix button.jour-choix { aspect-ratio: 1; border-radius: 50%; padding: 0; }
.panneau-choix button.jour-choix.hors { color: var(--gris-texte); opacity: .6; }
.panneau-choix button.jour-choix.auj { box-shadow: inset 0 0 0 1.5px var(--vert-marque); font-weight: 700; }
.panneau-choix button.jour-choix:disabled { opacity: .25; cursor: default; }
.pied-choix { text-align: center; margin: calc(6 * var(--pt)) 0 0; }
.panneau-choix button.lien-choix { color: var(--vert-texte); font-weight: 600; padding: calc(6 * var(--pt)) calc(12 * var(--pt)); }

/* « LES LISTES DÉROULANTES DES POPUPS DOIVENT ÊTRE COMME CELLES DU
   FORMULAIRE D'INSCRIPTION » (directeur, 20/08/2026) : pilule, chevron
   à droite. Le composant de l'inscription (entree.css, .liste) vit en
   script — or un script ne s'exécute pas dans une sous-fenêtre — donc
   c'est le <select> natif qui prend la même APPARENCE, et le navigateur
   garde sa liste. Le chevron est un dessin embarqué : un gris moyen
   (#757a76) qui se lit sur le champ gris des deux thèmes. */
select { appearance: none; -webkit-appearance: none;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23757a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right calc(18 * var(--pt)) center;
         padding-right: calc(44 * var(--pt)); }
input:focus, select:focus { outline: 2px solid var(--vert-voile); }
/* LE SÉLECTEUR DE FICHIER : le bouton gris du navigateur (« Choisir un
   fichier ») tombait tel quel au milieu des pilules de Vigie — il prend
   leur habit, et le nom du fichier choisi le ton discret des notes
   (relecture du dessin, 16/10/2026). */
input[type=file] { font: 400 var(--t-petit) "Inter", sans-serif;
                   color: var(--gris-texte); max-width: 100%; }
input[type=file]::file-selector-button {
  font: 600 var(--t-petit) "Inter", sans-serif; color: var(--encre);
  background: var(--gris-champ); border: 0; border-radius: 999px;
  padding: calc(9 * var(--pt)) calc(18 * var(--pt));
  margin-right: calc(12 * var(--pt)); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--gris-etiquette); }
form.enligne { display: inline-flex; gap: calc(10 * var(--pt));
               align-items: center; flex-wrap: wrap; }
/* Un tableau trop large défile dans sa boîte, sans emporter la page —
   ni cesser d'être un tableau. */
.table-large { overflow-x: auto; }

/* ── L'INTERRUPTEUR D'UNE SOURCE ────────────────────────────────────
   C'est un BOUTON d'envoi, pas une case à cocher : allumer une source
   la fait collecter au prochain passage, et son tri est payé. Une case
   qui bascule à l'oeil sans rien envoyer ferait croire l'inverse. */
.bascule { border: 0; cursor: pointer; border-radius: 999px;
           padding: calc(4 * var(--pt)) calc(12 * var(--pt));
           font: 600 var(--t-petit) "Inter", sans-serif;
           display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); }
.bascule::before { content: ""; width: calc(9 * var(--pt));
                   height: calc(9 * var(--pt)); border-radius: 999px;
                   background: currentColor; }
.bascule-on { background: var(--vert-voile); color: var(--vert-texte); }
.bascule-off { background: var(--gris-champ); color: var(--texte-3); }
.bascule:hover { filter: brightness(.96); }

/* LA MÊME BASCULE, HABILLANT CETTE FOIS UNE CASE À COCHER — la rubrique
   « La veille » des Paramètres (tâche 4, 12/08/2026) : sans JavaScript,
   un réglage est une case ordinaire que le navigateur garde cochée ou
   non jusqu'à l'envoi du formulaire ; ce n'est jamais un bouton qui
   part tout seul. La couleur suit :checked — natif, pas un script qui
   irait poser bascule-on/off au clic. */
input[type=checkbox].bascule {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: calc(38 * var(--pt)); height: calc(22 * var(--pt));
  background: var(--gris-champ); position: relative; flex: none;
  transition: background .15s; }
/* VERT PLEIN ET ROND BLANC, comme sur les maquettes Figma (18/10/2026) :
   il était vert pâle avec un point de 9 points posé en haut de la piste —
   allumé ou non, on ne le lisait pas d'un coup d'œil. Le rond est centré :
   (22 − 16) / 2 = 3 points de marge tout autour. */
input[type=checkbox].bascule::before {
  position: absolute; top: calc(3 * var(--pt)); left: calc(3 * var(--pt));
  width: calc(16 * var(--pt)); height: calc(16 * var(--pt));
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s; }
input[type=checkbox].bascule:checked {
  background: var(--vert-marque); }
input[type=checkbox].bascule:checked::before {
  transform: translateX(calc(16 * var(--pt))); }
input[type=checkbox].bascule:focus-visible {
  outline: 2px solid var(--vert-voile); outline-offset: 2px; }

/* La mention de nature ne doit pas peser autant que le nom qu'elle suit. */
.mention-nature { margin-left: calc(6 * var(--pt)); font-size: var(--t-petit); }

#bandeau-hors-ligne { display: none; background: #2e2a10; color: #ffd75e;
        padding: 8px 16px; text-align: center; font-size: var(--t-petit);
        flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════
   LES EFFETS — LE MOUVEMENT ET LES ÉTATS.

   RIEN ICI NE CHANGE L'ASPECT DU DESSIN. Les tailles, les couleurs et
   les espacements viennent de Figma et n'ont pas à bouger : ce qui suit
   ne porte que sur ce qui ARRIVE — à l'ouverture, au survol, au clavier,
   quand une fenêtre s'ouvre. C'est là qu'un logiciel se sent fini ou
   non, et c'est le seul endroit où l'on peut ajouter sans trahir.

   TROIS RÈGLES TENUES ICI :

   1. LE MOUVEMENT EST COURT ET NE SE RÉPÈTE PAS. L'écran s'ouvre une
      fois le matin ; une animation qu'on revoit vingt fois par jour
      devient une attente. Un quart de seconde, huit points de montée,
      et c'est fini.

   2. ON NE RÉAGIT QU'À CE QUI SE CLIQUE. Une carte qui se soulève sous
      la souris promet qu'il se passera quelque chose. « Dernières
      actions de l'équipe » et « Le fil de la veille » ne mènent nulle
      part pour l'instant : elles ne bougent donc pas.

   3. CE QUI EST ANIMÉ S'ARRÊTE SI LA MACHINE LE DEMANDE. Le réglage
      « réduire les animations » du système est respecté partout, comme
      dans le formulaire.
   ══════════════════════════════════════════════════════════════════ */

/* --- PLUS D'ARRIVÉE REJOUÉE (directeur, 18/10/2026) -----------------
   Les blocs et les trois tuiles de l'accueil montaient en paraissant —
   à CHAQUE visite, pas seulement le matin : « les éléments
   disparaissent et réapparaissent ». Ils sont simplement là ; le
   passage d'une page à l'autre est réglé plus bas. */

/* --- le survol, là où l'on peut cliquer ---------------------------- */
.tuile, .echeance, .alerte, .mention, .menu a, .rail a, .rond, .carte-qui,
.bouton-vert, .tout-voir, .detail-lien, button, .bouton {
  transition: transform var(--temps) var(--detente),
              box-shadow var(--temps) var(--detente),
              background-color var(--temps) ease,
              border-color var(--temps) ease,
              color var(--temps) ease;
}
.tuile:hover, .alerte:hover, .mention:hover {
  transform: translateY(-2px);
}
.tuile:hover { box-shadow: 0 calc(10 * var(--pt)) calc(24 * var(--pt))
                           var(--ombre); }
.alerte:hover, .mention:hover {
  box-shadow: 0 calc(6 * var(--pt)) calc(16 * var(--pt)) var(--ombre);
}
/* Enfoncé : la carte revient à sa place. Le geste se sent. */
.tuile:active, .alerte:active, .mention:active {
  transform: none; transition-duration: .06s;
}

/* --- la fenêtre s'ouvre --------------------------------------------
   Elle paraissait d'un coup, voile compris. Elle monte maintenant de
   six points en s'ouvrant, et le flou se pose avec elle. */
@keyframes fenetre-arrive {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes voile-arrive { from { opacity: 0; } to { opacity: 1; } }
dialog#popup[open] { animation: fenetre-arrive .22s var(--detente) both; }
dialog#popup::backdrop { animation: voile-arrive .22s ease-out both; }

/* --- ce que voit qui navigue au clavier ----------------------------
   Un logiciel professionnel se juge aussi là : sans ce liseré, on
   ne sait plus où l'on est dès qu'on lâche la souris. */
:focus-visible { outline: 2px solid var(--vert-marque); outline-offset: 2px; }
.cherche:focus-within { outline: 2px solid var(--vert-marque);
                        outline-offset: 2px; }
.cherche input[type=text]:focus-visible { outline: none; }

/* --- LES BARRES DE DÉFILEMENT, PARTOUT (refonte validée le 18/10/2026) :
   plus seulement la page et la fenêtre — les tiroirs, les tableaux, les
   listes, toute boîte qui défile. Fine, grise, plus foncée quand la souris
   passe sur la boîte ; claire la nuit (--ascenseur suit le thème).
   DANS CHROMIUM — donc dans la fenêtre du logiciel — LA BARRE EST
   DESSINÉE, SANS FLÈCHES : la réglette « fine » standard y garde les
   petites flèches de Windows (vu à l'essai). Celle du système faisait
   douze points de large et coupait la page en deux. */
::-webkit-scrollbar { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb { background: var(--ascenseur); border-radius: 999px;
                            border: calc(2.5 * var(--pt)) solid transparent;
                            background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ascenseur-tenu); background-clip: content-box; }
/* Les navigateurs qui ne savent pas la dessiner : leur réglette fine,
   aux mêmes couleurs. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--ascenseur) transparent; }
  *:hover { scrollbar-color: var(--ascenseur-tenu) transparent; }
  .defile, #popup-corps { scrollbar-width: thin; }
}

/* --- UNE RÉPONSE LENTE SE SIGNALE SANS RIEN EFFACER (18/10/2026) ---
   L'écran affiché reste en place pendant le chargement (popup.js,
   Patience) ; passé 400 ms, un trait vert court en haut de la fenêtre. */
dialog.patiente { cursor: progress; }
dialog.patiente::before { content: ""; position: absolute; top: 0; left: 0; z-index: 30;
                          width: 40%; height: 3px; background: var(--vert-marque);
                          border-radius: 999px;
                          animation: patienter 1.1s ease-in-out infinite; }
@keyframes patienter { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* --- quand la machine demande le calme ------------------------------ */
/* LE MOUVEMENT SUIT L'APPAREIL — SAUF SI L'UTILISATEUR EN A DÉCIDÉ
   AUTREMENT (rubrique Apparence, 13/08/2026). « complet » est le seul
   cas où l'on passe outre le réglage d'accessibilité de la machine :
   c'est un choix explicite, et lui seul peut le faire pour lui-même. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-mouvement="complet"]) dialog#popup[open],
  :root:not([data-mouvement="complet"]) dialog#popup::backdrop { animation: none; }
  /* Le trait d'attente reste, immobile : il dit encore qu'on attend. */
  :root:not([data-mouvement="complet"]) dialog.patiente::before { animation: none; width: 100%; opacity: .5; }
  :root:not([data-mouvement="complet"]) .tuile:hover,
  :root:not([data-mouvement="complet"]) .alerte:hover,
  :root:not([data-mouvement="complet"]) .mention:hover {
    transform: none;
  }
  :root:not([data-mouvement="complet"]) * { transition-duration: .01ms !important; }
}
:root[data-mouvement="reduit"] dialog#popup[open],
:root[data-mouvement="reduit"] dialog#popup::backdrop { animation: none; }
:root[data-mouvement="reduit"] dialog.patiente::before { animation: none; width: 100%; opacity: .5; }
:root[data-mouvement="reduit"] .tuile:hover,
:root[data-mouvement="reduit"] .alerte:hover,
:root[data-mouvement="reduit"] .mention:hover {
  transform: none;
}
:root[data-mouvement="reduit"] * { transition-duration: .01ms !important; }

/* ══════════════════════════════════════════════════════════════════
   LES ÉCRANS PLUS PETITS.

   En dessous de 1728, « --pt » a déjà tout réduit. Ce qui suit règle ce
   qu'un simple facteur ne sait pas faire : à un moment, deux colonnes
   ne tiennent plus côte à côte, et une rangée doit se replier.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
  /* L'accueil : l'équipe passe sous le fil. */
  .deux-blocs { grid-template-columns: minmax(0, 1fr); }
  /* Le portrait suffit à dire qui est connecté ; le nom du cabinet est
     déjà écrit ailleurs dans la page. */
  .qui-texte { display: none; }
}
/* LE POINT OÙ LA RANGÉE DU HAUT NE TIENT PLUS. Serrée, la navigation
   perdait « Suivis » derrière son bord, et le bonjour se coupait en
   deux lignes : la navigation prend donc sa propre rangée, et le
   bonjour toute la largeur. */
@media (max-width: 1180px) {
  .barre-haut { flex-wrap: wrap; gap: calc(14 * var(--pt));
                padding-top: calc(34 * var(--pt)); }
  .menu { order: 3; width: 100%; margin: 0; justify-content: flex-start; }
  /* Le resserrement du 20/08/2026 (« réduire l'espace ») vaut aussi
     sous 1180px : 34 → 16 en haut, 28 → 10 en bas. */
  .entete { flex-wrap: wrap; gap: calc(16 * var(--pt));
            padding-top: calc(16 * var(--pt));
            padding-bottom: calc(10 * var(--pt)); }
  .bonjour { flex: 1 1 100%; }
  .outils { margin-left: 0; width: 100%; }
  .cherche { flex: 1; min-width: 0; }
  .cherche input[type=text] { width: 100%; }
  .entete .sous-titre { max-width: none; }
  /* SOUS LA SOURIS, 30 À 38 POINTS PASSENT INAPERÇUS ; SOUS LE DOIGT,
     C'EST UN RATÉ SUR DEUX (accueil, étape 2 du chantier « téléphone »,
     20/08/2026). La navigation vient de passer sur sa propre rangée, et
     les deux ronds (cloche, paramètres) sont déjà les cibles qu'on
     effleure à cette largeur : le plancher tactile (44px, règle
     d'accessibilité — WCAG 2.5.5) s'ajoute ICI, dans ce point de
     rupture, sans toucher à leur taille de dessin sur un poste. */
  .menu a { min-height: 44px; }
  .rond { min-width: 44px; min-height: 44px; }
}
@media (max-width: 1000px) {
  body.clair { --rail: 0px; --marge: clamp(16px, 4vw, 40px); }
  /* LES TUILES S'EMPILENT DÈS ICI (relecture du 18/10/2026) : entre 641
     et ~850 pixels — tablette en portrait, fenêtre en demi-écran — le
     gros chiffre recouvrait sa pastille. Plus serrées une fois empilées ;
     le rond de la période passe en tête, à droite. */
  .accueil-a .tuiles { grid-template-columns: minmax(0, 1fr); }
  .accueil-a .tri-du-bloc { order: -1; justify-self: end; }
  .tuile { padding: calc(18 * var(--pt)) calc(22 * var(--pt)); }
  .tuile .gros { font-size: max(28px, calc(40 * var(--pt))); }
  .tuile .nom { margin-top: calc(4 * var(--pt)); }
  .tuile .rond-icone { width: calc(60 * var(--pt)); height: calc(60 * var(--pt)); }
  /* La barre flottante devient une barre du bas : à cette largeur, une
     colonne à gauche mangerait le quart de l'écran. */
  .rail { left: 50%; right: auto; top: auto; bottom: calc(14 * var(--pt));
          transform: translateX(-50%); flex-direction: row;
          padding: calc(10 * var(--pt)) calc(16 * var(--pt));
          box-shadow: 0 6px 20px rgba(9, 9, 9, .16); }
  /* SES BOUTONS SUIVENT LE MÊME PLANCHER TACTILE QUE CI-DESSUS : à 0,74
     de --pt, 50 points valaient 37px — sous les 44px que le doigt
     réclame, alors que c'est justement ICI que le rail cesse d'être
     visé à la souris. */
  .rail a { min-width: 44px; min-height: 44px; }
  .dedans { padding-bottom: calc(110 * var(--pt)); }
  /* LE LOGO N'A PLUS DE RAIL À ALIGNER À GAUCHE : la pilule flottante
     quitte cette place à la même largeur (elle descend juste au-dessus,
     en barre du bas). Garder l'ancien décalage de 69 points ne cassait
     rien — la barre du haut tenait quand même — mais gaspillait une
     cinquantaine de pixels sur un écran de 390 pour un repère qui n'y
     est plus ; la marge redevient symétrique avec le bord droit. */
  .barre-haut { padding-left: var(--marge); }
}
@media (max-width: 640px) {
  /* ── LES COMMANDES DES FENÊTRES AU DOIGT (relecture du dessin,
     16/10/2026) — mesurées à 390 pixels : la croix à 31, Enregistrer à
     32, les listes et champs à 31, le menu des rubriques à 36, les
     pastilles de filtre à 17, « tout voir » et « Détail » à 20. Le
     plancher de 44 que la coque tient depuis le 20/08 s'étend à elles. */
  .popup-fermer { width: 44px; height: 44px; }
  #popup-corps button, #popup-corps .bouton, #popup-corps select,
  #popup-corps input:not([type=checkbox]):not([type=radio]):not([type=file]),
  #sous-corps button, #sous-corps .bouton, #sous-corps select,
  #sous-corps input:not([type=checkbox]):not([type=radio]):not([type=file]) {
    min-height: 44px; }
  .rubriques-menu a, .filtres .pastille, .tout-voir, .detail-lien {
    min-height: 44px; display: inline-flex; align-items: center; }
  input[type=checkbox].bascule { width: 48px; height: 28px; }
  input[type=checkbox].bascule::before { width: 20px; height: 20px;
                                         top: 4px; left: 4px; }
  input[type=checkbox].bascule:checked::before { transform: translateX(20px); }
  /* LA BARRE DU PLANNING EN GRILLE : elle s'empilait en cinq rangées de
     largeurs inégales, alignées à gauche. Deux colonnes, la recherche et
     « Créer un planning » sur toute la ligne, chaque pilule à la largeur
     de sa case. */
  .barre-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                  gap: 10px; }
  .barre-outils > * { min-width: 0; }
  /* « Ajouter un fichier » aussi : depuis que la semaine est montée dans
     la rangée de navigation (18/10/2026), il restait seul sur une
     demi-ligne. */
  .barre-outils > .pilule-cherche, .barre-outils > a.pilule { grid-column: 1 / -1; }
  .barre-outils .pilule { width: 100%; justify-content: center; }
  .barre-outils .avec-fleche { justify-content: space-between; }
  .barre-outils .pilule-double { display: flex; }
  .barre-outils .pilule-double > details { flex: 1; }
  /* LA RANGÉE DE NAVIGATION SUR DEUX LIGNES : les vues sur toute la
     largeur, segments égaux ; la semaine dessous, flèches au doigt. */
  .vues { display: flex; width: 100%; }
  .vues a { flex: 1; justify-content: center; min-height: 44px; padding: 0 8px; }
  /* Mesuré à 390 pixels : 352 pour 277 de place. « Semaine du »
     s'efface, et « Aujourd'hui » passe sur sa propre ligne. */
  .navigateur-semaine { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .navigateur-semaine .deroulant { flex: 1; min-width: 0; }
  .navigateur-semaine .pilule { width: 100%; justify-content: center; min-height: 44px; }
  .mot-semaine { display: none; }
  .navigateur-semaine .pilule.aujourdhui { flex-basis: 100%; margin-left: 0; }
  .fleche-semaine { width: 44px; height: 44px; }
  .echeance, .action { flex-wrap: wrap; }
  .bouton-vert { min-width: 0; }
  /* LA RECHERCHE ET LE BOUTON DE 53 POINTS TOMBAIENT À 39PX AU DOIGT —
     sous le plancher de 44px. Seule leur hauteur minimale bouge, et
     seulement ici : les deux gardent la forme que le directeur leur a
     réservée (exclus du rayon unique, étape 1). */
  .cherche, .bouton-vert { min-height: 44px; }
  /* JOUR / SEMAINE / MOIS À 17PX DE HAUT — relevé en relecture adverse
     le 20/08/2026, mesuré à 390px, puis les liens ont déménagé dans le
     tiroir du bouton de tri (correction du directeur, 20/08/2026). Même
     règle que tout le reste : 44px au doigt — posée sur TOUS les
     tiroirs, ceux du planning y gagnent au passage. */
  .tiroir a { min-height: 44px; display: flex; align-items: center; }
  /* « LE BONJOUR, PUIS LA RECHERCHE PLEINE LARGEUR, PUIS LE BOUTON »
     (mission « téléphone », étape 2, 20/08/2026) : sous 640px, la
     recherche et « Lancer un passage » cessent de se partager une même
     ligne — chacun sa rangée. « .entete .outils » n'existe que sur
     l'accueil (seul gabarit à combiner ces deux classes) : les autres
     écrans, qui portent leurs outils dans « .tete-outils », ne sont pas
     concernés par cette règle. */
  .entete .outils { flex-direction: column; align-items: stretch; }
  .entete .bouton-vert { width: 100%; }
}

/* ── PASSER D'UN ÉCRAN À L'AUTRE SANS CLIGNOTEMENT ──────────────────
   Le 10/08/2026, le directeur voyait « une sorte d'actualisation » à
   chaque clic ; une animation d'arrivée avait été posée sur le
   contenu. Elle aggravait le mal : le contenu repartait de l'invisible
   à CHAQUE page (« les éléments disparaissent et réapparaissent »,
   18/10/2026). Elle est retirée.

   RIEN NE LA REMPLACE, ET C'EST VOULU. Le moteur d'affichage garde de
   lui-même l'ancienne page à l'écran jusqu'au premier dessin de la
   nouvelle, puis bascule d'un coup — sans éclair blanc. Le reste du
   clignotement venait des icônes redemandées à chaque page : la
   fenêtre du poste les garde désormais en mémoire
   (bureau.garder_les_fichiers_en_memoire). Un passage animé entre les
   pages a été essayé : mesuré dans une vraie fenêtre, il retardait la
   nouvelle page (0,66 s contre 0,47 s sans lui). */

/* ── LE HAUT D'UN ÉCRAN DE LISTE ────────────────────────────────────
   Maquette du directeur (10/08/2026) : le titre et son sous-titre à
   gauche, la recherche et le bouton d'action à droite, sur la MÊME
   ligne. Ils étaient sous le titre : la liste commençait une ligne plus
   bas et toute la moitié droite de l'écran restait vide.

   « align-items: start » cale les deux colonnes en HAUT. Centrées, la
   recherche descendrait avec un sous-titre de deux lignes et cesserait
   d'être alignée sur le titre — c'est justement ce que la maquette
   montre aligné.

   Les mesures sont en points de maquette (--pt) comme tout le reste :
   une largeur en pixels durs grandirait avec l'écran du directeur. */
.tete-ecran {
  display: flex; align-items: start; justify-content: space-between;
  gap: calc(24 * var(--pt)); flex-wrap: wrap;
  margin: 0 0 calc(18 * var(--pt));
}
.tete-ecran h1 { margin: 0 0 calc(6 * var(--pt)); }
.tete-ecran .sous-titre { margin: 0; }

/* Les outils gardent leur ordre quand la place manque : la recherche
   d'abord, le bouton ensuite — jamais le bouton seul sur une ligne. */
.tete-outils {
  display: flex; align-items: center; gap: calc(14 * var(--pt));
  flex-wrap: wrap;
}
.tete-outils .cherche { min-width: calc(300 * var(--pt)); }

/* Le bouton « Chercher de nouveaux avis » est un FORMULAIRE : un envoi,
   jamais un lien (un passage est payé au signal). Le navigateur donne une
   marge basse aux formulaires ; dans une ligne centrée, elle décale
   l'élément vers le haut. La règle vaut pour les DEUX formulaires de la
   tête d'écran — la barre de recherche en est un aussi, et elle portait
   cette marge sans que personne l'ait voulu. */
.tete-outils form { margin: 0; }

/* SUR UN ÉCRAN ÉTROIT, on repasse l'un sous l'autre plutôt que de
   comprimer la recherche jusqu'à l'illisible. */
@media (max-width: 900px) {
  .tete-ecran { flex-direction: column; }
  .tete-outils { width: 100%; }
  .tete-outils .cherche { flex: 1; min-width: 0; }
}

/* ── LES PASTILLES DE FILTRE ────────────────────────────────────────
   Elles collaient au panneau : l'oeil ne voyait plus qu'un seul bloc, et
   l'on ne savait plus si une pastille commandait le tableau ou en
   faisait partie (directeur, 11/08/2026). L'espace dit qu'elles le
   commandent. */
.filtres { margin: 0 0 calc(26 * var(--pt)); }

/* ── LE BOUTON ROND DU TRI (page Passages) ──────────────────────────
   Il vit DANS LA BANDE D'EN-TÊTE DU TABLEAU, dernière cellule à droite :
   c'est là que la maquette le pose, et le directeur l'a redit le
   12/08/2026 — « le bouton dans le top bar du tableau à l'extrême
   droite ». Il commande la liste, il vit donc dans la liste.

   La cellule le tient à droite toute seule : pas de marge négative, qui
   ne tirait de toute façon que le TABLEAU vers le bouton.

   C'est un « details » : il s'ouvre sans JavaScript, et chaque choix
   est un lien. */
.th-tri { width: calc(52 * var(--pt)); text-align: right; }
.tri-passages { position: relative; display: inline-block; }
/* L'ICÔNE EST UN POCHOIR, comme partout ailleurs dans la coque (voir
   « LES ICÔNES — UNE SEULE MÉCANIQUE, PARTOUT » plus haut) : le fichier
   ne donne que la forme, la couleur vient de « currentColor ». Un
   « background-image » posé tel quel affiche le noir du dessin — sur le
   thème sombre, un rond de la même teinte que le fond, invisible. */
.tri-passages > summary { list-style: none; cursor: pointer; position: relative;
    width: calc(34 * var(--pt)); height: calc(34 * var(--pt));
    border-radius: 999px; background: var(--fond); color: var(--texte); }
.tri-passages > summary::-webkit-details-marker { display: none; }
/* L'entonnoir, en deux tons (seconde série, 17/10/2026) : ::before le
   vert, ::after l'encre. */
.tri-passages > summary::before, .tri-passages > summary::after {
    content: ""; position: absolute; inset: 0;
    margin: auto; width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.tri-passages > summary::before { background: var(--vert-marque);
    -webkit-mask: url("/static/icones-vigie/filtre-vert.svg") center / contain no-repeat;
    mask: url("/static/icones-vigie/filtre-vert.svg") center / contain no-repeat; }
.tri-passages > summary::after { background: var(--encre);
    -webkit-mask: url("/static/icones-vigie/filtre-encre.svg") center / contain no-repeat;
    mask: url("/static/icones-vigie/filtre-encre.svg") center / contain no-repeat; }
.tri-panneau { position: absolute; z-index: 5; top: calc(44 * var(--pt)); right: 0;
    background: var(--surface-flottante); border: 1px solid var(--bord-flottant);
    border-radius: var(--rayon-carte);
    padding: calc(14 * var(--pt)); box-shadow: 0 6px 24px var(--ombre);
    min-width: calc(220 * var(--pt)); }
.tri-titre { margin: calc(8 * var(--pt)) 0 calc(6 * var(--pt));
             font: 600 var(--t-petit) "Inter", sans-serif; color: var(--texte-3); }
.tri-panneau .pastille { text-decoration: none; margin: 0 4px 4px 0;
                         display: inline-block; }

/* LA PASTILLE DE RÉSULTAT NE SE COUPE PAS EN DEUX. La colonne du bouton
   rond a reserré celle du résultat, et « échec (code 1) » ou « 2
   passages » retombaient sur deux lignes — un état qu'on lit d'un coup
   d'oeil ne se lit plus quand il est coupé. */
.td-resultat .pastille { white-space: nowrap; }

/* ═════════════ « VOS APPAREILS », LES CINQ ÉTATS DU BOUTON ═════════════
   (chantier « notifications par appareil », étape 5, 19/08/2026 —
   templates/_rubrique_connexions.html) — MASQUÉS PAR ID, JAMAIS PAR
   L'ATTRIBUT « hidden » NU : un <div hidden> perdrait contre
   .reglage-rangee { display: flex } (spécificité d'auteur contre
   attribut d'utilisateur-agent) — MÊME LEÇON DÉJÀ PAYÉE SUR CE PROJET
   que #maj-bouton un peu plus haut (« CACHÉ VEUT DIRE CACHÉ »,
   static/entree.css) : recommencer l'erreur ici, sur cinq blocs à la
   fois, aurait été pire.

   RÉVÉLÉS PAR UNE CLASSE POSÉE SUR LE PARENT #appareil-etat — MÊME
   MÉCANISME QUE .pont-actif CI-DESSUS, posée par un script qui
   n'existe pas encore (étape 3 de ce chantier, static/appareils.js) :
   TANT QU'IL N'EST PAS LÀ, AUCUNE CLASSE N'EST JAMAIS POSÉE, DONC AUCUN
   DES CINQ BLOCS NE S'AFFICHE — jamais un bouton inerte entre les deux
   étapes de ce chantier. */
#appareil-etat-jamais-demande, #appareil-etat-accorde,
#appareil-etat-refuse, #appareil-etat-sans-pushmanager,
#appareil-etat-ios-accueil { display: none; }
.etat-jamais-demande #appareil-etat-jamais-demande,
.etat-accorde #appareil-etat-accorde,
.etat-refuse #appareil-etat-refuse,
.etat-sans-pushmanager #appareil-etat-sans-pushmanager,
.etat-ios-accueil #appareil-etat-ios-accueil { display: flex; }

/* ══════════════════════════════════════════════════════════════════
   L'ÉCRAN D'UNE FICHE, EN ÉTAPES — proposition B du directeur
   (18/10/2026, « on prend B » ; planche : outils/planche_fiche.py).

   Les étapes l'une sous l'autre, reliées par un fil : un rond numéroté,
   vert et coché quand l'étape est faite, cerclé de vert quand c'est là
   que le travail attend (veille/fiches.py, etapes()). Une colonne au
   centre, assez étroite pour se lire d'un trait.

   SUR PLACE : le titre et la synthèse sont des champs qui ont l'air de
   texte ; ils montrent leur fond au survol, et deviennent un champ au
   clic. Ils grandissent avec leur contenu (field-sizing), plus de
   barre de défilement dans une case de trois lignes.

   TOUTES LES COULEURS SONT DES JETONS : la nuit les retourne seule.
   ══════════════════════════════════════════════════════════════════ */
.fiche-etapes { max-width: calc(1060 * var(--pt)); margin: 0 auto; }
.fiche-etapes .retour { display: inline-flex; align-items: center; gap: calc(4 * var(--pt));
    color: var(--vert-texte); font-weight: 600; font-size: var(--t-petit);
    text-decoration: none; margin: 0 0 calc(16 * var(--pt)); }
.fiche-etapes .retour:hover { text-decoration: underline; }
.fiche-etapes .retour svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt));
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; }

/* ── L'EN-TÊTE : la note, le titre, la source, le parcours ── */
.fiche-etapes .tete-fiche { display: flex; align-items: flex-start; gap: calc(18 * var(--pt));
              margin: 0 0 calc(40 * var(--pt)); }
.fiche-etapes .tete-fiche .note-ronde { margin-top: calc(2 * var(--pt)); }
/* Écrite à la main, pas notée : le tiret gris de la liste, jamais un 0 orange. */
.fiche-etapes .note-ronde.sans-note { background: var(--gris-etiquette); color: var(--gris-etiquette-texte); }
.fiche-etapes .tete-fiche .titres { flex: 1; min-width: 0; }
.fiche-etapes .tete-fiche h1 { font-size: max(20px, calc(32 * var(--pt))); line-height: 1.2; margin: 0; }
.fiche-etapes .tete-fiche .tete-droite { margin: 0; flex: none; }
.fiche-etapes .titre-sur-place, .fiche-etapes .sur-place {
    display: block; width: 100%; box-sizing: content-box; resize: none;
    font: inherit; color: inherit; background: transparent; border: 0;
    border-radius: var(--rayon-carte); field-sizing: content; overflow: hidden;
    transition: background-color var(--temps) ease; }
.fiche-etapes .titre-sur-place { padding: calc(2 * var(--pt)) calc(10 * var(--pt));
                   margin: 0 calc(-10 * var(--pt)); }
.fiche-etapes .titre-sur-place:hover, .fiche-etapes .sur-place:hover { background: var(--gris-bloc); }
.fiche-etapes .titre-sur-place:focus, .fiche-etapes .sur-place:focus { outline: 0; background: var(--gris-champ); }
/* Au clavier, un fond pâle ne suffit pas à voir où l'on est : le contour vert. */
.fiche-etapes .titre-sur-place:focus-visible, .fiche-etapes .sur-place:focus-visible {
    outline: 2px solid var(--vert-marque); outline-offset: 0; }
.fiche-etapes .tete-fiche .origine { margin: calc(8 * var(--pt)) 0 0; font-size: var(--t-base);
                       color: var(--gris-texte); }
.fiche-etapes .tete-fiche .origine .lien { margin-left: calc(12 * var(--pt)); font-weight: 600;
                             color: var(--vert-texte); }

/* Le parcours du statut : des ronds reliés, cochés derrière celui du
   moment ; les issues (« Écarté »…) se tiennent à part, sans fil. */
.fiche-etapes .parcours { border: 0; padding: 0; min-width: 0; margin: calc(18 * var(--pt)) 0 0;
            display: flex; flex-wrap: wrap; align-items: center; row-gap: calc(10 * var(--pt)); }
/* 24 pixels au moins : une cible qu'un doigt atteint, même quand --pt rapetisse. */
.fiche-etapes .parcours .pas { display: inline-flex; align-items: center; cursor: pointer;
                 min-height: max(24px, calc(24 * var(--pt)));
                 font-size: var(--t-petit); color: var(--gris-texte); white-space: nowrap; }
.fiche-etapes .parcours .pas + .pas:not(.issue)::before { content: ""; width: calc(22 * var(--pt)); height: 2px;
    margin: 0 calc(9 * var(--pt)); border-radius: 2px; background: var(--gris-bord); }
.fiche-etapes .parcours .pas.issue { margin-left: calc(14 * var(--pt)); }
.fiche-etapes .parcours .pas.issue.premiere { margin-left: calc(30 * var(--pt)); }
.fiche-etapes .parcours .pas > span { position: relative; display: inline-flex; align-items: center;
                        gap: calc(7 * var(--pt)); }
.fiche-etapes .parcours .pas > span::before { content: ""; flex: none; box-sizing: border-box;
    width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); border-radius: 999px;
    border: 2px solid var(--ascenseur); background: var(--fond); }
.fiche-etapes .parcours .pas.passe > span::before { border-color: var(--vert-marque); background: var(--vert-marque); }
.fiche-etapes .parcours .pas.passe > span::after { content: ""; position: absolute;
    left: calc(6.5 * var(--pt)); top: 50%; width: calc(4 * var(--pt)); height: calc(8 * var(--pt));
    border: solid var(--sur-vert); border-width: 0 2px 2px 0;
    transform: translateY(-62%) rotate(45deg); }
.fiche-etapes .parcours .pas input:checked + span { color: var(--encre); font-weight: 600; }
.fiche-etapes .parcours .pas input:checked + span::before { border-color: var(--vert-marque);
    background: radial-gradient(var(--vert-marque) 0 36%, var(--fond) 42%); }
.fiche-etapes .parcours .pas input:focus-visible + span::before { outline: 2px solid var(--vert-marque);
                                                    outline-offset: 2px; }
.fiche-etapes .parcours:not(:disabled) .pas:hover > span { color: var(--encre); }
.fiche-etapes .parcours:disabled .pas { cursor: default; }

/* ── LES ÉTAPES ── */
.fiche-etapes .etapes { margin: 0; }
.fiche-etapes .etape { position: relative; display: grid; grid-template-columns: calc(34 * var(--pt)) minmax(0, 1fr);
         column-gap: calc(22 * var(--pt)); padding-bottom: calc(36 * var(--pt)); }
.fiche-etapes .etape::before { content: ""; position: absolute; left: calc(16 * var(--pt));
                 top: calc(42 * var(--pt)); bottom: calc(6 * var(--pt)); width: 2px;
                 border-radius: 2px; background: var(--gris-bord); }
.fiche-etapes .etape.faite::before { background: var(--vert-voile); }
.fiche-etapes .etape:last-of-type::before { display: none; }
.fiche-etapes .etape .num { position: relative; box-sizing: border-box; display: grid; place-items: center;
              width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 999px;
              border: 2px solid var(--gris-bord); background: var(--fond); color: var(--gris-texte);
              font: 800 var(--t-petit) var(--police-titre); }
.fiche-etapes .etape.ici .num { border-color: var(--vert-marque); color: var(--vert-texte); }
.fiche-etapes .etape.faite .num { border-color: var(--vert-marque); background: var(--vert-marque);
                    color: var(--sur-vert); font-size: 0; }
.fiche-etapes .etape.faite .num::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: calc(6 * var(--pt)); height: calc(12 * var(--pt));
    border: solid var(--sur-vert); border-width: 0 2px 2px 0;
    transform: translate(-50%, -62%) rotate(45deg); }
.fiche-etapes .etape h2 { font-size: var(--t-bloc); margin: calc(5 * var(--pt)) 0 calc(16 * var(--pt)); }
.fiche-etapes .etape.eteinte .num, .fiche-etapes .etape.eteinte h2 { opacity: .5; }
.fiche-etapes .corps-etape { min-width: 0; }
.fiche-etapes .corps-etape > p { margin: 0; }

/* Le signal : la synthèse se lit comme un texte. */
.fiche-etapes .sur-place { font-size: var(--t-base); line-height: 1.6; max-width: 68ch;
    padding: calc(8 * var(--pt)) calc(12 * var(--pt));
    margin: calc(-8 * var(--pt)) calc(-12 * var(--pt)) 0; }
.fiche-etapes .corps-etape .synthese { max-width: 68ch; line-height: 1.6; }

/* La fiche enrichie : les faits en grille, puis l'analyse. Elle se lit seulement. */
.fiche-enrichie { margin-top: calc(20 * var(--pt)); display: flex; flex-direction: column;
                  gap: calc(16 * var(--pt)); max-width: 68ch; }
.fiche-enrichie h3 { margin: 0 0 calc(4 * var(--pt)); font-size: var(--t-petit); font-weight: 600;
                     color: var(--gris-texte); }
.fiche-enrichie p { margin: 0; line-height: 1.5; }
.fiche-enrichie .faits-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                               gap: calc(12 * var(--pt)) calc(24 * var(--pt)); margin: 0; }
.fiche-enrichie .faits-fiche dt { font-size: var(--t-petit); color: var(--gris-texte); }
.fiche-enrichie .faits-fiche dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fiche-enrichie .enjeu + .enjeu { margin-top: calc(8 * var(--pt)); }
.fiche-enrichie .enjeu b { font-weight: 600; }
.fiche-enrichie .noms { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pt)); margin: 0; padding: 0;
                        list-style: none; }
.fiche-enrichie .noms li { padding: calc(4 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px;
                           background: var(--gris-champ); font-size: var(--t-petit); overflow-wrap: anywhere; }

.notes-criteres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                  gap: calc(8 * var(--pt)) calc(24 * var(--pt)); margin: 0; padding: 0; list-style: none; }
.notes-criteres li { display: flex; justify-content: space-between; gap: calc(12 * var(--pt)); }
.section-veille h3, .rubrique-strategique .section-veille h3 { margin: 0 0 calc(4 * var(--pt));
    font-size: var(--t-petit); font-weight: 600; color: var(--gris-texte); }
.section-veille p { margin: 0; line-height: 1.5; }
.section-veille ul { margin: 0; padding-left: calc(18 * var(--pt)); line-height: 1.5; }
.carte-veille { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--pt));
                padding: calc(12 * var(--pt)) calc(16 * var(--pt)); margin-top: calc(8 * var(--pt));
                border-radius: var(--rayon-carte); background: var(--gris-champ); }
.veille-interne { margin: 0; font-weight: 600; }
.tableau-strategique { display: flex; flex-direction: column; gap: calc(28 * var(--pt)); }
.rubrique-strategique { display: flex; flex-direction: column; align-items: stretch; gap: calc(10 * var(--pt)); }
.rubrique-strategique h2 { margin: 0; font-size: var(--t-carte); }
.ligne-strategique { display: flex; align-items: center; gap: calc(12 * var(--pt)); color: inherit; text-decoration: none;
                     min-height: calc(44 * var(--pt)); }
.ligne-strategique small { display: block; color: var(--gris-texte); }

/* Un champ et son nom. */
.fiche-etapes .champ-fiche { display: flex; flex-direction: column; gap: calc(8 * var(--pt));
                       min-width: 0; margin: 0; padding: 0; border: 0; }
.fiche-etapes .champ-fiche > span, .fiche-etapes .champ-fiche > legend {
    padding: 0; font-size: var(--t-petit); font-weight: 600; color: var(--gris-texte); }
.fiche-etapes .champ-fiche > legend { margin-bottom: calc(8 * var(--pt)); }
.fiche-etapes .champ-fiche select, .fiche-etapes .champ-fiche input[type=text] { width: 100%; box-sizing: border-box; }
.fiche-etapes .corps-etape > label.champ-fiche { margin-top: calc(20 * var(--pt)); }
.fiche-etapes .champ-fiche textarea { box-sizing: border-box; width: 100%; resize: vertical;
    field-sizing: content; min-height: calc(64 * var(--pt));
    font: 400 var(--t-carte) "Inter", sans-serif; line-height: 1.5; color: var(--encre);
    padding: calc(12 * var(--pt)) calc(16 * var(--pt)); border: 0;
    border-radius: var(--rayon-carte); background: var(--gris-champ); }
.fiche-etapes .champs-etape { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: calc(24 * var(--pt)) calc(36 * var(--pt)); align-items: start; }
.fiche-etapes .rang { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--pt)); }
.fiche-etapes .champ-fiche .rang select { flex: 1; width: auto; min-width: 0; }
.fiche-etapes .corps-etape .etat { margin: calc(10 * var(--pt)) 0 0; }
.fiche-etapes .corps-etape .champ-fiche .etat { margin: 0; }

/* Les pastilles d'un choix (pilier, angle) : la prise est verte. */
.fiche-etapes .pilules-choix { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt)); }
.fiche-etapes .pilules-choix label { position: relative; cursor: pointer; }
.fiche-etapes .pilules-choix span { display: inline-block; white-space: nowrap; font-size: var(--t-petit);
    padding: calc(7 * var(--pt)) calc(15 * var(--pt)); border-radius: 999px;
    border: 1px solid var(--gris-bord); background: var(--fond); color: var(--encre);
    transition: background-color var(--temps) ease, border-color var(--temps) ease; }
.fiche-etapes fieldset:not(:disabled) .pilules-choix label:hover span { border-color: var(--vert-marque); }
.fiche-etapes .pilules-choix input:checked + span { background: var(--vert-marque); border-color: var(--vert-marque);
                                      color: var(--sur-vert); font-weight: 600; }
.fiche-etapes .pilules-choix input:focus-visible + span { outline: 2px solid var(--vert-marque); outline-offset: 2px; }
.fiche-etapes fieldset:disabled .pilules-choix label { cursor: default; }

/* Le post : un grand champ calme ; les onglets quand il y a des
   déclinaisons, un seul texte visible à la fois. */
.fiche-etapes .textes .editeur { display: block; box-sizing: border-box; width: 100%; resize: vertical;
    field-sizing: content; min-height: calc(200 * var(--pt));
    font: 400 var(--t-base) "Inter", sans-serif; line-height: 1.6; color: var(--encre);
    padding: calc(18 * var(--pt)) calc(20 * var(--pt)); border: 0;
    border-radius: var(--rayon-carte); background: var(--gris-bloc); }
.fiche-etapes .textes .editeur:focus { outline: 2px solid var(--vert-voile); outline-offset: 0; }
.fiche-etapes .textes.a-onglets .editeur { display: none; }
.fiche-etapes .textes:has(#onglet-post:checked) .editeur[data-onglet=post],
.fiche-etapes .textes:has(#onglet-linkedin:checked) .editeur[data-onglet=linkedin],
.fiche-etapes .textes:has(#onglet-facebook:checked) .editeur[data-onglet=facebook],
.fiche-etapes .textes:has(#onglet-instagram:checked) .editeur[data-onglet=instagram] { display: block; }
.fiche-etapes .onglets-texte { display: inline-flex; flex-wrap: wrap; gap: calc(2 * var(--pt));
                 padding: calc(4 * var(--pt)); margin: 0 0 calc(14 * var(--pt));
                 border-radius: 999px; background: var(--gris-champ); }
.fiche-etapes .onglets-texte label { display: inline-flex; align-items: center; gap: calc(7 * var(--pt));
                       padding: calc(7 * var(--pt)) calc(15 * var(--pt)); border-radius: 999px;
                       font-size: var(--t-petit); color: var(--encre); cursor: pointer; }
.fiche-etapes .onglets-texte img { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.fiche-etapes .onglets-texte input:checked + label { background: var(--segment-pris); font-weight: 600;
                                       box-shadow: 0 1px 2px var(--ombre); }
.fiche-etapes .onglets-texte input:focus-visible + label { outline: 2px solid var(--vert-marque); }
.fiche-etapes .sous-editeur { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--pt));
                margin-top: calc(12 * var(--pt)); }
.fiche-etapes .sous-editeur .compte { margin-left: auto; font-size: var(--t-petit); color: var(--gris-texte); }
.fiche-etapes .bouton-doux { display: inline-flex; align-items: center; gap: calc(8 * var(--pt));
    border: 0; background: var(--vert-voile); color: var(--vert-texte); font-weight: 600;
    padding: calc(9 * var(--pt)) calc(18 * var(--pt)); }
.fiche-etapes .bouton-doux:hover { background: var(--vert-voile); box-shadow: inset 0 0 0 1px var(--vert-marque); }
.fiche-etapes .bouton-doux .icone { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }

/* Le visuel : une zone où l'on clique, ou l'on glisse le fichier. */
.fiche-etapes .depot { display: flex; align-items: center; justify-content: center;
    gap: calc(10 * var(--pt)); max-width: calc(560 * var(--pt)); box-sizing: border-box;
    padding: calc(28 * var(--pt)); border: 2px dashed var(--ascenseur);
    border-radius: var(--rayon-carte); color: var(--vert-texte); font-weight: 600;
    font-size: var(--t-carte); cursor: pointer;
    transition: background-color var(--temps) ease, border-color var(--temps) ease; }
.fiche-etapes .depot:hover, .fiche-etapes .depot.survole { border-color: var(--vert-marque);
                                                           background: var(--vert-actif); }
.fiche-etapes .depot .icone { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.fiche-etapes img.visuel { display: block; max-width: min(100%, calc(560 * var(--pt)));
    border-radius: var(--rayon-carte); border: 1px solid var(--gris-bord);
    margin: 0 0 calc(12 * var(--pt)); }
.fiche-etapes .case { display: flex; width: max-content; align-items: center; gap: calc(8 * var(--pt));
                      margin-top: calc(14 * var(--pt)); font-size: var(--t-carte); cursor: pointer; }

/* La validation : le geste du directeur, un bouton cerclé de vert ;
   une fois fait, une pastille verte cochée. */
.fiche-etapes .bouton-valider, .fiche-etapes .validee {
    display: inline-flex; align-items: center; gap: calc(10 * var(--pt));
    border-radius: 999px; font-size: var(--t-carte); }
.fiche-etapes .bouton-valider { border: 2px solid var(--vert-marque); background: var(--fond);
    color: var(--vert-texte); font-weight: 700; padding: calc(12 * var(--pt)) calc(26 * var(--pt)); }
.fiche-etapes .bouton-valider:hover { background: var(--vert-marque); color: var(--sur-vert); }
.fiche-etapes .validee { background: var(--vert-voile); color: var(--vert-texte); font-weight: 600;
                         padding: calc(9 * var(--pt)) calc(18 * var(--pt)); }
.fiche-etapes .bouton-valider::before, .fiche-etapes .validee::before {
    content: ""; flex: none; width: calc(5 * var(--pt)); height: calc(10 * var(--pt));
    border: solid currentColor; border-width: 0 2px 2px 0;
    transform: translateY(-15%) rotate(45deg); }

/* La publication : un bouton par réseau ; éteints avant la validation. */
.fiche-etapes .bouton-reseau { display: inline-flex; align-items: center; gap: calc(8 * var(--pt));
    padding: calc(9 * var(--pt)) calc(16 * var(--pt)); border: 1px solid var(--gris-bord);
    border-radius: 999px; background: var(--fond); color: var(--encre);
    font-weight: 600; font-size: var(--t-carte); text-decoration: none; }
.fiche-etapes .bouton-reseau img { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.fiche-etapes .bouton-reseau.eteint { opacity: .45; }
.fiche-etapes #etape-publication .corps-etape > button { margin-top: calc(14 * var(--pt)); }
.fiche-etapes #etape-publication .ligne-aide { margin-bottom: calc(14 * var(--pt)); }

/* « ENREGISTRER » COLLE AU BAS DE L'ÉCRAN tant qu'on parcourt les étapes. */
.fiche-etapes .pied { position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--pt));
    padding: calc(14 * var(--pt)) 0; background: var(--fond); border-top: 1px solid var(--gris-bord); }

/* ── LA CONVERSATION, sous les étapes, alignée sur leur texte ── */
.fiche-etapes .conversation { margin: calc(44 * var(--pt)) 0 0 calc(56 * var(--pt)); }
.fiche-etapes .conversation h2 { font-size: var(--t-bloc); margin: 0 0 calc(14 * var(--pt)); }
:is(.fiche-etapes, .conversation-fiche) .mot { display: flex; gap: calc(12 * var(--pt)); padding: calc(6 * var(--pt)) 0 calc(14 * var(--pt)); }
:is(.fiche-etapes, .conversation-fiche) .portrait-mot { flex: none; display: grid; place-items: center;
    width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 999px;
    background: var(--jaune-fond); color: var(--encre); font-size: var(--t-petit); font-weight: 700; }
:is(.fiche-etapes, .conversation-fiche) .corps-mot { min-width: 0; }
:is(.fiche-etapes, .conversation-fiche) .qui-mot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--pt));
                         font-size: var(--t-petit); color: var(--gris-texte); }
:is(.fiche-etapes, .conversation-fiche) .qui-mot strong { color: var(--encre); }
:is(.fiche-etapes, .conversation-fiche) .qui-mot form { margin: 0; }
:is(.fiche-etapes, .conversation-fiche) .qui-mot .discret-b { padding: calc(2 * var(--pt)) calc(10 * var(--pt)); }
:is(.fiche-etapes, .conversation-fiche) .texte-mot { margin: calc(3 * var(--pt)) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
:is(.fiche-etapes, .conversation-fiche) .ecrire { display: flex; align-items: flex-end; gap: calc(10 * var(--pt));
    margin: calc(10 * var(--pt)) 0 0; padding: calc(6 * var(--pt)) calc(6 * var(--pt)) calc(6 * var(--pt)) calc(18 * var(--pt));
    border: 1px solid var(--gris-bord); border-radius: var(--rayon-carte); background: var(--fond); }
:is(.fiche-etapes, .conversation-fiche) .ecrire:focus-within { border-color: var(--vert-marque); }
:is(.fiche-etapes, .conversation-fiche) .ecrire textarea { flex: 1; min-width: 0; resize: none; field-sizing: content;
    border: 0; background: transparent; outline: 0; color: var(--encre);
    font: 400 var(--t-carte) "Inter", sans-serif; line-height: 1.5;
    padding: calc(8 * var(--pt)) 0; }

@media (max-width: 640px) {
  .fiche-etapes .tete-fiche { flex-wrap: wrap; gap: calc(14 * var(--pt)); }
  .fiche-etapes .tete-fiche .titres { flex-basis: 100%; order: 2; }
  .fiche-etapes .tete-fiche .tete-droite { margin-left: auto; }
  .fiche-etapes .champs-etape { grid-template-columns: minmax(0, 1fr); }
  .fiche-etapes .etape { column-gap: calc(14 * var(--pt)); }
  .fiche-etapes .conversation { margin-left: 0; }
  .fiche-etapes .parcours .pas + .pas:not(.issue)::before { width: calc(12 * var(--pt)); margin: 0 calc(6 * var(--pt)); }
}

/* ══════════════════════════════════════════════════════════════════
   LES LISTES : LE TABLEAU, AFFINÉ — proposition B du directeur
   (19/10/2026, « on prend B » ; planche : outils/planche_pages.py).

   Publications, appels d'offres, sources, passages. On garde les
   tableaux, plus grands et plus clairs : plus de panneau gris ni de
   bande d'en-tête, un en-tête en petites lettres grises, des lignes
   plus hautes séparées d'un trait fin, le titre en gras et une seconde
   ligne grise dessous. Les autres tableaux du logiciel (Paramètres,
   planning) gardent le panneau gris : la planche ne montrait que les
   listes.

   TOUTES LES COULEURS SONT DES JETONS : la nuit les retourne seule.
   ══════════════════════════════════════════════════════════════════ */
table.tableau-liste { background: transparent; border-radius: 0; overflow: visible;
                      font-size: var(--t-base); }
.tableau-liste th { background: transparent; font-size: var(--t-petit); font-weight: 600;
    color: var(--gris-texte); white-space: nowrap;
    padding: 0 calc(14 * var(--pt)) calc(12 * var(--pt));
    border-bottom: 1px solid var(--gris-bord); }
.tableau-liste td { vertical-align: middle; border-bottom: 1px solid var(--gris-bord);
    padding: calc((var(--interligne) + 6) * var(--pt)) calc(14 * var(--pt)); }
.tableau-liste tr:last-child td { border-bottom: 1px solid var(--gris-bord); }
.tableau-liste th:first-child, .tableau-liste td:first-child { padding-left: 0; }
.tableau-liste th:last-child, .tableau-liste td:last-child { padding-right: 0; }
.tableau-liste th.etroite { width: 1%; }
.tableau-liste td[colspan] { height: auto; padding: calc(40 * var(--pt)) 0;
                             color: var(--gris-texte); border-bottom: 0; }
/* Le titre en gras, la seconde ligne en gris dessous. */
.tableau-liste .titre-ligne { color: var(--encre); font-weight: 600; text-decoration: none; }
.tableau-liste .titre-ligne:hover { text-decoration: underline; }
.tableau-liste .sous-ligne { display: block; margin-top: calc(3 * var(--pt));
                             font-size: var(--t-petit); color: var(--gris-texte); }
.tableau-liste .sous-ligne a { color: var(--vert-texte); text-decoration: none; }
.tableau-liste .sous-ligne a:hover { text-decoration: underline; }
.tableau-liste .note-ronde { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); }
.tableau-liste .note-ronde.sans-note { background: var(--gris-etiquette);
                                       color: var(--gris-etiquette-texte); }
.tableau-liste .quand { display: inline-flex; align-items: center; gap: calc(7 * var(--pt));
                        white-space: nowrap; }
.tableau-liste .quand img { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.tableau-liste .rien { color: var(--gris-texte); }
/* Une cellule courte (rôle, piliers, heure) ne se coupe pas en deux. */
.tableau-liste td.court { white-space: nowrap; }

/* LA PASTILLE DE STATUT (templates/_statut.html) : une couleur par
   statut, et une coche quand la fiche est validée — la colonne
   « Validée : non » est partie. */
.statut { display: inline-flex; align-items: center; gap: calc(6 * var(--pt));
          border-radius: 999px; padding: calc(5 * var(--pt)) calc(12 * var(--pt));
          font-size: var(--t-petit); font-weight: 600; white-space: nowrap; }
.statut.valide::before { content: ""; flex: none; width: calc(4 * var(--pt)); height: calc(8 * var(--pt));
    border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-15%) rotate(45deg); }
.st-gris { background: var(--gris-etiquette); color: var(--gris-etiquette-texte); }
.st-jaune { background: var(--jaune-fond); color: var(--jaune-lisible); }
.st-vert { background: var(--vert-voile); color: var(--vert-texte); }
.st-bleu { background: var(--bleu-fond); color: var(--bleu-lisible); }
.st-rouge { background: var(--rouge-fond); color: var(--rouge-lisible); }
.st-encre { background: var(--encre); color: var(--fond); }

/* L'ÉCHÉANCE EN JOURS (tableau.delai) : rouge à moins de quatre jours,
   ambre jusqu'à deux semaines — les délais d'un dossier de réponse. */
.tableau-liste .echeance { font-weight: 600; white-space: nowrap; }
.tableau-liste .echeance.rouge, .tableau-liste .echeance.passee { color: var(--rouge-texte); }
.tableau-liste .echeance.chaud { color: var(--jaune-lisible); }
/* Une affaire close n'a plus d'horloge : sa date, en gris. */
.tableau-liste .echeance.close { font-weight: 400; color: var(--gris-texte); }

/* LES FILTRES COMPTENT : le sélecteur à segments du planning, et le
   nombre de fiches que garde chaque filtre, posé par la feuille de
   style (le lien garde son seul mot). */
.filtres .vues { flex-wrap: wrap; }
.filtres .vues a { min-height: calc(46 * var(--pt)); }
.filtres .vues a[data-compte]::after { content: attr(data-compte); margin-left: calc(8 * var(--pt));
    font-weight: 500; color: var(--gris-texte); }

/* L'ÉTOILE D'UNE SOURCE : dessinée ici, plus de couleur écrite dans le
   gabarit — la nuit la retourne. */
.tableau-liste form { margin: 0; }
.tableau-liste .etoile { border: 0; background: none; padding: 0;
                         font-size: var(--t-bloc); line-height: 1; color: var(--gris-texte); }
.tableau-liste button.etoile { cursor: pointer; }
.tableau-liste button.etoile:hover { background: none; color: var(--vert-texte); }
/* La bascule d'une source ne se coupe pas en deux dans sa colonne étroite. */
.tableau-liste .bascule { white-space: nowrap; }
/* LE BOUTON ROND DES PASSAGES garde son fond : il tranchait sur la bande
   grise de l'en-tête, qui n'existe plus sur une liste. */
.tableau-liste .tri-passages > summary { background: var(--gris-champ); }
.tableau-liste .etoile.allumee { color: var(--vert-texte); }
.tableau-liste .nature-source { display: inline-block; margin-left: calc(8 * var(--pt));
    padding: calc(2 * var(--pt)) calc(9 * var(--pt)); border-radius: 999px;
    background: var(--jaune-fond); color: var(--jaune-lisible);
    font-size: var(--t-petit); font-weight: 600; }
/* L'ÉTAT D'UNE SOURCE : un point de couleur et son mot. */
.etat-source { display: inline-flex; align-items: center; gap: calc(8 * var(--pt)); white-space: nowrap; }
.etat-source::before { content: ""; width: calc(9 * var(--pt)); height: calc(9 * var(--pt));
                       border-radius: 999px; background: var(--ascenseur); }
.etat-source.active::before { background: var(--vert-marque); }
.etat-source.manque { color: var(--rouge-texte); }
.etat-source.manque::before { background: var(--rouge-texte); }
.etat-source.sommeil { color: var(--gris-texte); }

/* SUIVIS : LES DEUX PANNEAUX PLIABLES RESTENT (maquette du 12/08/2026),
   ils perdent leur fond gris comme les listes ; le titre et son chevron
   tiennent lieu de bande, et les rangées sont celles du tableau affiné. */
.panneau-pliable { background: transparent; border-radius: 0; overflow: visible;
                   margin-bottom: calc(40 * var(--pt)); }
.panneau-pliable > summary { background: transparent;
    padding: 0 calc(40 * var(--pt)) calc(16 * var(--pt)) 0; }
.panneau-pliable > summary::after { right: calc(6 * var(--pt)); }
.panneau-corps { padding: 0; }
.qui-ligne { display: inline-flex; align-items: center; gap: calc(12 * var(--pt)); }
.tableau-liste .portrait { width: calc(40 * var(--pt)); height: calc(40 * var(--pt));
                           font-size: var(--t-petit); }
.pied-panneau { margin: calc(14 * var(--pt)) 0 0; }

/* LA CLOCHE : une ligne par alerte, au dessin des listes — un point dit
   l'urgence, le texte la répète ; plus de carte grise. */
.lignes-alertes { border-top: 1px solid var(--gris-bord); }
.lignes-alertes .alerte { background: transparent; border-radius: 0; margin: 0;
    padding: calc(16 * var(--pt)) calc(8 * var(--pt));
    border-bottom: 1px solid var(--gris-bord); }
.lignes-alertes .alerte:hover { background: var(--gris-bloc); transform: none; box-shadow: none; }
.lignes-alertes .alerte .marque-urgence { align-self: center; width: calc(10 * var(--pt));
                                          height: calc(10 * var(--pt)); }
.lignes-alertes .alerte .quoi { font-weight: 600; font-size: var(--t-base); }
.lignes-alertes .alerte .vers { font-weight: 600; font-size: var(--t-petit); }

/* AU TÉLÉPHONE : une cible au doigt pour chaque filtre (le plancher de
   44 des autres pastilles), et les colonnes secondaires se retirent —
   le titre, la note et ce qui presse restent. */
@media (max-width: 640px) {
  .filtres .vues a { min-height: 44px; }
  /* Une seule rangée qui défile du doigt, plutôt qu'un bloc de deux lignes. */
  .filtres .vues { display: flex; flex-wrap: nowrap; overflow-x: auto;
                   scrollbar-width: none; }
  .tableau-liste .facultative { display: none; }
  .tableau-liste td, .tableau-liste th { padding-left: calc(8 * var(--pt)); padding-right: calc(8 * var(--pt)); }
}

/* ══════════════════════════════════════════════════════════════════
   MON COMPTE — proposition A du directeur (19/10/2026, « 1. A »).
   La carte en haut (portrait, nom, rôle, adresse), puis une ligne par
   réglage séparée d'un trait fin ; le mot de passe dans un volet replié
   que « Changer » déplie ; « Se déconnecter » en bas, à droite.
   ══════════════════════════════════════════════════════════════════ */
.compte-a .carte-compte { margin: 0; }
.compte-a .identite { display: flex; align-items: center; gap: calc(22 * var(--pt));
                      padding-bottom: calc(22 * var(--pt)); border-bottom: 1px solid var(--gris-bord); }
.compte-a .portrait-choix { position: relative; display: block; flex: none; cursor: pointer; }
.compte-a .portrait.grand { background-color: var(--jaune-fond); color: var(--encre);
                            font-family: var(--police-titre); font-weight: 800; border: 0; }
.compte-a .pastille-photo { position: absolute; right: calc(-2 * var(--pt)); bottom: calc(-2 * var(--pt));
    display: grid; place-items: center; width: calc(32 * var(--pt)); height: calc(32 * var(--pt));
    border-radius: 999px; background: var(--surface-flottante); box-shadow: 0 1px 4px var(--ombre); }
.compte-a .pastille-photo .icone { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.compte-a .portrait-choix:focus-within .portrait, .compte-a .portrait-choix:hover .portrait {
    box-shadow: 0 0 0 2px var(--vert-marque); }
.compte-a .identite-texte { display: flex; flex-direction: column; align-items: flex-start;
                            gap: calc(6 * var(--pt)); min-width: 0; }
.compte-a .nom-compte { font: 800 max(18px, calc(26 * var(--pt))) var(--police-titre);
                        color: var(--encre-titre); overflow-wrap: anywhere; }
.compte-a .adresse-compte { font-size: var(--t-base); color: var(--gris-texte); overflow-wrap: anywhere; }
.compte-a .ligne-compte { display: grid; grid-template-columns: calc(230 * var(--pt)) minmax(0, 1fr) auto;
    align-items: center; gap: calc(16 * var(--pt)); padding: calc(16 * var(--pt)) 0;
    border-bottom: 1px solid var(--gris-bord); font-size: var(--t-base); }
.compte-a .nom-ligne { font-weight: 600; color: var(--encre); }
.compte-a .valeur-ligne { display: inline-flex; align-items: center; gap: calc(8 * var(--pt));
                          color: var(--gris-texte); }
.compte-a .ligne-compte input[type=text] { width: 100%; box-sizing: border-box; }
.compte-a .point-actif { width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); border-radius: 999px;
                         background: var(--vert-marque); }
.compte-a .changer-mdp > summary { list-style: none; cursor: pointer; }
.compte-a .changer-mdp > summary::-webkit-details-marker { display: none; }
.compte-a .changer-mdp[open] > summary { border-bottom-color: transparent; }
.compte-a .changer-mdp[open] > summary .bouton { visibility: hidden; }
.compte-a .volet-mdp { display: grid; gap: calc(10 * var(--pt)); max-width: calc(460 * var(--pt));
    margin: 0 0 0 calc(246 * var(--pt)); padding: 0 0 calc(18 * var(--pt)); }
.compte-a .changer-mdp[open] { border-bottom: 1px solid var(--gris-bord); }
.compte-a .volet-mdp button { justify-self: start; }
.compte-a .pied-compte { display: flex; justify-content: flex-end; margin: calc(22 * var(--pt)) 0 0; }

@media (max-width: 640px) {
  .compte-a .identite { gap: calc(14 * var(--pt)); }
  .compte-a .ligne-compte { grid-template-columns: minmax(0, 1fr) auto; }
  .compte-a .ligne-compte .nom-ligne { grid-column: 1 / -1; }
  .compte-a .volet-mdp { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   LE RADAR EN GRAND, SUR LA NUIT — proposition A du directeur
   (19/10/2026). Le disque reste sombre dans les deux thèmes : c'est un
   écran de radar. Les anneaux et le balai sont du vert de la marque, les
   noms des sources s'y lisent en clair. À la fin, le radar rapetisse et
   se pose sur une coche.
   ══════════════════════════════════════════════════════════════════ */
.radar.nuit { width: min(calc(380 * var(--pt)), 70vw); margin-top: calc(10 * var(--pt)); }
.radar.nuit .disque { fill: var(--radar-nuit); }
.radar.nuit .anneau { stroke: var(--vert-voile); }
.radar.nuit .croix { stroke: var(--vert-voile); opacity: 1; }
.radar.nuit stop { stop-color: var(--vert-marque); }
.radar.nuit .balai line { stroke: var(--vert-marque); }
.radar.nuit .centre { fill: var(--vert-marque); }
.radar.nuit .echo text { fill: var(--radar-texte); font-size: 7px; font-weight: 600; }
.radar.nuit.fini { width: min(calc(170 * var(--pt)), 40vw); margin-bottom: calc(6 * var(--pt)); }
.radar.nuit .coche-fond { fill: var(--vert-marque); }
.radar.nuit .coche-trait { fill: none; stroke: var(--sur-vert); stroke-width: 3.4;
                           stroke-linecap: round; stroke-linejoin: round; }
.ecran-passage h1 { margin-top: calc(6 * var(--pt)); }
.ecran-passage .sous-radar { color: var(--gris-texte); }

/* ══════════════════════════════════════════════════════════════════
   LE PLANNING, FACILE À COMPRENDRE — proposition A du directeur
   (19/10/2026, « 3. A »). Une seule rangée de commandes ; la semaine en
   sept colonnes, une carte par publication dans l'ordre de la journée ;
   un jour vide propose « + Ajouter » ; une légende sous la semaine.
   Ces règles viennent APRÈS celles de la grille à tranches : elles la
   remplacent sans toucher aux couleurs des réseaux et des états.
   ══════════════════════════════════════════════════════════════════ */
.barre-planning { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--pt));
                  padding-bottom: calc(18 * var(--pt)); }
.barre-planning .navigateur-semaine { margin: 0 auto; }
.espace-planning { flex: 1 1 0; min-width: 0; }
.barre-planning .navigateur-semaine + .espace-planning { flex: 0 0 0; }
.barre-planning .coin-ajouter { display: inline-flex; gap: calc(8 * var(--pt)); width: auto;
    min-height: var(--haut-champ); padding: 0 calc(22 * var(--pt)); border-radius: 999px;
    font-weight: 700; white-space: nowrap; }
.barre-planning .coin-ajouter .ic-plus { --i-vert: var(--sur-vert); --i-encre: var(--detail-sur-vert); }
.barre-planning .rond-menu { width: var(--haut-champ); min-height: var(--haut-champ);
                             padding: 0; justify-content: center; }
.barre-planning .tiroir-menu { min-width: calc(280 * var(--pt)); max-height: calc(560 * var(--pt));
                               overflow-y: auto; }
.barre-planning .tiroir-menu .pilule-cherche { width: 100%; margin: calc(8 * var(--pt)) 0; }
.barre-planning .tiroir-menu form { margin: calc(6 * var(--pt)) 0 0; }

.semaine { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: calc(10 * var(--pt));
           row-gap: 0; min-width: 0; }
.semaine > * { background: none; }
.jour-semaine { display: flex; flex-direction: column; min-width: 0;
                min-height: calc(320 * var(--pt)); padding: calc(10 * var(--pt));
                border-radius: var(--rayon-bloc); background: var(--gris-bloc); }
.jour-semaine.ce-jour { background: var(--vert-actif); box-shadow: inset 0 0 0 2px var(--vert-marque); }
.jour-semaine .entete-jour { background: none; border: 0; padding: calc(4 * var(--pt)) 0 calc(12 * var(--pt));
                             text-align: center; border-radius: 0; }
.jour-semaine .colonne-jour { background: none; border: 0; padding: 0; border-radius: 0;
                              display: flex; flex-direction: column; gap: calc(8 * var(--pt)); }
.jour-semaine .carte-creneau .haut { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.jour-semaine .carte-creneau .heure { font-weight: 700; margin: 0; text-align: left; flex: 0 1 auto; }
.point-etat { display: inline-block; flex: none; width: calc(8 * var(--pt)); height: calc(8 * var(--pt));
              border-radius: 999px; background: var(--ascenseur); }
.carte-creneau .point-etat { margin-left: auto; }
.e-brouillon .point-etat, .point-etat.e-brouillon { background: var(--jaune-texte); }
.e-valide .point-etat, .point-etat.e-valide { background: var(--vert-marque); }
.e-publie .point-etat, .point-etat.e-publie { background: var(--encre); }
.jour-semaine:nth-child(n+6) .detail-creneau { left: auto; right: calc(-4 * var(--pt)); }
.ajout-jour { display: block; text-align: center; text-decoration: none;
              padding: calc(14 * var(--pt)) 0; border: 2px dashed var(--ascenseur);
              border-radius: var(--rayon-carte); color: var(--vert-texte); font-weight: 600;
              font-size: var(--t-petit); }
.ajout-jour:hover { border-color: var(--vert-marque); background: var(--vert-actif); }
.legende-planning { display: flex; flex-wrap: wrap; gap: calc(18 * var(--pt));
                    margin: 0 0 calc(22 * var(--pt)); font-size: var(--t-petit); color: var(--gris-texte); }
.legende-planning span { display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); }

@media (max-width: 640px) {
  .semaine { grid-template-columns: minmax(0, 1fr); row-gap: calc(10 * var(--pt)); }
  .jour-semaine { min-height: 0; }
  .jour-semaine .entete-jour { text-align: left; }
  .jour-semaine .detail-creneau { left: 0; right: 0; min-width: 0; }
  .barre-planning .coin-ajouter { flex: 1 1 100%; justify-content: center; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   MESSAGES — proposition A du directeur (19/10/2026, « 4. A »). À
   gauche les personnes, à droite la conversation ; ce que j'écris est
   en vert, à droite ; ce qu'on m'écrit, en gris, à gauche. Une mention
   porte sa fiche dans un cartouche clair, sous le texte.
   ══════════════════════════════════════════════════════════════════ */
.rail a { position: relative; }
.pastille-rail {
  position: absolute; top: calc(-4 * var(--pt)); right: calc(-4 * var(--pt));
  min-width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); padding: 0 calc(5 * var(--pt));
  border-radius: 999px; background: var(--vert-marque); color: var(--sur-vert);
  box-shadow: 0 0 0 2px var(--gris-champ);
  font-size: var(--t-etiquette); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.messagerie {
  display: grid; grid-template-columns: minmax(calc(220 * var(--pt)), calc(300 * var(--pt))) minmax(0, 1fr);
  min-height: calc(460 * var(--pt)); border: 1px solid var(--gris-bord);
  border-radius: var(--rayon-bloc); background: var(--carte); overflow: hidden;
}
.colonne-personnes { display: flex; flex-direction: column; gap: calc(4 * var(--pt));
                     padding: calc(12 * var(--pt)); border-right: 1px solid var(--gris-bord);
                     overflow-y: auto; max-height: calc(620 * var(--pt)); }
.personne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
            gap: calc(10 * var(--pt)); padding: calc(10 * var(--pt));
            border-radius: var(--rayon-carte); color: inherit; text-decoration: none; }
.personne:hover { background: var(--gris-bloc); }
.personne.choisie { background: var(--vert-actif); }
.personne .portrait.petit, .tete-conversation .portrait.petit {
  width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); font-size: var(--t-petit); }
.personne-texte { display: flex; flex-direction: column; min-width: 0; }
.personne-texte b { font-size: var(--t-carte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.personne-texte > span { font-size: var(--t-petit); color: var(--gris-texte);
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.personne-quand { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--pt));
                  font-size: var(--t-etiquette); color: var(--gris-texte); white-space: nowrap; }
.non-lu { display: inline-block; width: calc(10 * var(--pt)); height: calc(10 * var(--pt));
          border-radius: 999px; background: var(--vert-marque); }

.conversation { display: flex; flex-direction: column; min-width: 0; }
.tete-conversation { display: flex; align-items: center; gap: calc(10 * var(--pt));
                     padding: calc(14 * var(--pt)) calc(20 * var(--pt));
                     border-bottom: 1px solid var(--gris-bord); }
.tete-conversation .discret { margin-left: calc(4 * var(--pt)); }
.fil-messages { flex: 1 1 auto; display: flex; flex-direction: column-reverse; gap: calc(10 * var(--pt));
                padding: calc(18 * var(--pt)) calc(20 * var(--pt));
                overflow-y: auto; max-height: calc(520 * var(--pt)); }
.fil-vide { margin: auto; color: var(--gris-texte); text-align: center; }
.bulle-message { max-width: 72%; padding: calc(10 * var(--pt)) calc(14 * var(--pt));
                 border-radius: var(--rayon-carte); line-height: 1.45;
                 display: flex; flex-direction: column; gap: calc(6 * var(--pt)); }
.bulle-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle-message time { font-size: var(--t-etiquette); opacity: .75; }
.bulle-message.de-lui { align-self: flex-start; background: var(--gris-bloc); color: var(--encre); }
.bulle-message.de-moi { align-self: flex-end; background: var(--vert-marque); color: var(--sur-vert); }
.bulle-message.de-moi time { align-self: flex-end; }
.lien-fiche { display: flex; align-items: center; gap: calc(8 * var(--pt));
              padding: calc(8 * var(--pt)) calc(10 * var(--pt)); border-radius: var(--rayon-carte);
              background: var(--carte); color: var(--encre); text-decoration: none;
              font-size: var(--t-petit); font-weight: 600; }
.lien-fiche span { min-width: 0; overflow-wrap: anywhere; }
.bulle-message > * { min-width: 0; max-width: 100%; }
.lien-fiche b { margin-left: auto; color: var(--vert-texte); white-space: nowrap; }
.lien-fiche .icone { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); flex: none; }
/* Le même champ que sous la fiche : un cadre arrondi, le texte qui
   grandit avec ce qu'on écrit, le bouton dedans. */
.ecrire-message { display: flex; align-items: flex-end; gap: calc(10 * var(--pt));
                  margin: calc(12 * var(--pt)) calc(16 * var(--pt));
                  padding: calc(6 * var(--pt)) calc(6 * var(--pt)) calc(6 * var(--pt)) calc(18 * var(--pt));
                  border: 1px solid var(--gris-bord); border-radius: var(--rayon-carte);
                  background: var(--fond); }
.ecrire-message:focus-within { border-color: var(--vert-marque); }
.ecrire-message textarea { flex: 1; min-width: 0; resize: none; field-sizing: content;
    max-height: calc(160 * var(--pt)); border: 0; background: transparent; outline: 0;
    color: var(--encre); font: 400 var(--t-carte) "Inter", sans-serif; line-height: 1.5;
    padding: calc(8 * var(--pt)) 0; }
.ecrire-message .bouton { flex: none; }

@media (max-width: 640px) {
  .messagerie { grid-template-columns: minmax(0, 1fr); }
  .colonne-personnes { border-right: 0; border-bottom: 1px solid var(--gris-bord);
                       max-height: calc(220 * var(--pt)); }
  .bulle-message { max-width: 88%; }
  .ecrire-message .bouton { min-height: 44px; }
}

/* LES FENÊTRES SUIVENT LEUR CONTENU. Une hauteur fixe a été essayée le
   19/10/2026, puis retirée le même jour à la demande du directeur
   (« remets la logique des popups en place, il s'agrandit en fonction
   de ce qu'il contient ») : seule la hauteur MAXIMALE de dialog#popup
   et de dialog#sous-popup s'applique, plus haut dans ce fichier. */

/* ── LE PLANNING : le filtre après « Ajouter une publication », et en
   bas à droite de la fenêtre, créer un planning et ajouter un fichier,
   en icônes (directeur, 19/10/2026). ── */
.filtre-planning > summary { display: inline-flex; align-items: center; gap: calc(8 * var(--pt)); }
.filtre-planning > summary .icone { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.barre-planning > .pilule-cherche { flex: 0 1 calc(260 * var(--pt)); min-width: calc(160 * var(--pt)); }

#popup-corps:has(.coin-bas-planning) { display: flex; flex-direction: column; }
#popup-corps:has(.coin-bas-planning) > .page-simple { flex: 1 0 auto; display: flex; flex-direction: column; }
.coin-bas-planning { position: sticky; bottom: 0; z-index: 5; margin-top: auto; align-self: flex-end;
                     display: flex; gap: calc(12 * var(--pt)); padding-top: calc(16 * var(--pt)); }
.rond-coin { position: relative; display: grid; place-items: center;
             width: calc(54 * var(--pt)); height: calc(54 * var(--pt)); border-radius: 999px;
             background: var(--vert-marque); color: var(--sur-vert); text-decoration: none;
             box-shadow: 0 8px 22px var(--ombre); }
.rond-coin:hover { filter: brightness(1.05); }
.rond-coin:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.rond-coin .icone { width: calc(24 * var(--pt)); height: calc(24 * var(--pt));
                    --i-vert: var(--sur-vert); --i-encre: var(--detail-sur-vert); }
.signe-plus { position: absolute; top: calc(-2 * var(--pt)); right: calc(-2 * var(--pt));
              width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 999px;
              display: grid; place-items: center; background: var(--encre); color: var(--fond);
              font-weight: 800; font-size: var(--t-carte); line-height: 1; box-shadow: 0 0 0 2px var(--vert-marque); }

/* ── LA CONVERSATION D'UNE PUBLICATION : le bouton sous « Reclasser »,
   la fenêtre qui lit et ajoute, la liste des membres sur « @ ». ── */
.fiche-etapes .tete-fiche .tete-droite { display: flex; flex-direction: column; align-items: stretch;
                                          gap: calc(8 * var(--pt)); }
.fiche-etapes .tete-droite form { margin: 0; }
.fiche-etapes .tete-droite .discret-b { width: 100%; }
.bouton-conversation { display: inline-flex; align-items: center; justify-content: center;
    gap: calc(8 * var(--pt)); padding: calc(8 * var(--pt)) calc(16 * var(--pt));
    border: 1px solid var(--gris-bord); border-radius: 999px; background: var(--carte);
    color: var(--encre); text-decoration: none; font-weight: 600; font-size: var(--t-petit); }
.bouton-conversation:hover { border-color: var(--vert-marque); }
.bouton-conversation .icone { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.compte-mots { min-width: calc(20 * var(--pt)); padding: 0 calc(6 * var(--pt)); border-radius: 999px;
               background: var(--vert-marque); color: var(--sur-vert); font-size: var(--t-etiquette);
               line-height: calc(20 * var(--pt)); text-align: center; }
.conversation-fiche { display: flex; flex-direction: column; min-height: 100%; }
#popup-corps:has(.conversation-fiche) { display: flex; flex-direction: column; }
#popup-corps:has(.conversation-fiche) > .conversation-fiche { flex: 1 0 auto; }
.conversation-fiche .fil-conversation { flex: 1 1 auto; }
.conversation-fiche .ecrire { position: sticky; bottom: 0; }
.avec-membres { position: relative; }
.choix-membres { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20;
                 min-width: calc(260 * var(--pt)); max-height: calc(240 * var(--pt)); overflow-y: auto;
                 margin: 0; padding: calc(6 * var(--pt)); list-style: none;
                 background: var(--surface-flottante); border: 1px solid var(--bord-flottant);
                 border-radius: var(--rayon-carte); box-shadow: 0 12px 30px var(--ombre); }
.choix-membres li { display: flex; align-items: center; gap: calc(10 * var(--pt));
                    padding: calc(8 * var(--pt)) calc(10 * var(--pt)); border-radius: var(--rayon-carte);
                    cursor: pointer; color: var(--encre); }
.choix-membres li[aria-selected="true"], .choix-membres li:hover { background: var(--vert-actif); }
.choix-membres .portrait-mot { flex: none; display: grid; place-items: center;
    width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 999px;
    background: var(--jaune-fond); color: var(--encre); font-size: var(--t-etiquette); font-weight: 700; }

@media (max-width: 640px) {
  .rond-coin { min-width: 44px; min-height: 44px; }
  .bouton-conversation { min-height: 44px; }
}

/* ── Le cartouche de la fiche dans une bulle a un fond plein : sur une
   bulle verte, le fond translucide de la nuit rendait « Ouvrir la
   fiche » illisible (vu à l'écran, 19/10/2026). ── */
.bulle-message .lien-fiche { background: var(--fond); }

/* ══════════════════════════════════════════════════════════════════
   RETOUCHES DU 20/10/2026 — le fil de la veille se clique, les réseaux
   de la programmation l'un sous l'autre avec leur logo, la mention de
   fin sur toute la largeur.
   ══════════════════════════════════════════════════════════════════ */
.liste-a > a.signal { color: inherit; text-decoration: none; border-radius: var(--rayon-carte); }
.liste-a > a.signal:hover { background: var(--gris-bloc); }
.liste-a > a.signal:hover .texte b { color: var(--vert-texte); }
.liste-reseaux { display: flex; flex-direction: column; border-radius: var(--rayon-bloc);
                 background: var(--gris-bloc); overflow: hidden; }
.ligne-reseau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
                gap: calc(14 * var(--pt)); padding: calc(12 * var(--pt)) calc(16 * var(--pt));
                font-weight: 600; }
.ligne-reseau + .ligne-reseau { border-top: 1px solid var(--gris-bord); }
.ligne-reseau .logo-canal { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); }
.ligne-reseau input[type="time"] { min-width: calc(130 * var(--pt)); }
.mention-large { box-sizing: border-box; width: 100%; min-height: calc(110 * var(--pt)); resize: vertical;
                 padding: calc(12 * var(--pt)) calc(16 * var(--pt)); border: 1px solid var(--gris-bord);
                 border-radius: var(--rayon-carte); background: var(--fond); color: var(--encre);
                 font: 400 var(--t-carte) "Inter", sans-serif; line-height: 1.5; }
.mention-large:focus { outline: 0; border-color: var(--vert-marque); }

/* ══════════════════════════════════════════════════════════════════
   DONNÉES ET CONFIDENTIALITÉ — proposition A du directeur (20/10/2026) :
   trois engagements en tête, puis le détail en cartes ; vos deux droits
   côte à côte.
   ══════════════════════════════════════════════════════════════════ */
.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--pt));
               margin-bottom: calc(10 * var(--pt)); }
.engagement { display: flex; flex-direction: column; gap: calc(4 * var(--pt)); padding: calc(18 * var(--pt));
              border-radius: var(--rayon-bloc); background: var(--vert-actif); }
.engagement b { font: 800 var(--t-carte) "Nexa Pro", sans-serif; letter-spacing: -.01em; margin-top: calc(6 * var(--pt)); }
.engagement > span:last-child { font-size: var(--t-petit); color: var(--gris-texte); }
.rond-engagement { display: grid; place-items: center; flex: none; width: calc(40 * var(--pt)); height: calc(40 * var(--pt));
                   border-radius: 999px; background: var(--carte); }
.rond-engagement .icone { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.carte-donnees { border-radius: var(--rayon-bloc); background: var(--gris-bloc); overflow: hidden; }
.ligne-donnees { display: flex; justify-content: space-between; align-items: center; gap: calc(14 * var(--pt));
                 padding: calc(13 * var(--pt)) calc(16 * var(--pt)); }
.ligne-donnees + .ligne-donnees { border-top: 1px solid var(--gris-bord); }
.ligne-donnees .pastille { flex: none; }
.note-donnees { margin: 0; padding: calc(10 * var(--pt)) calc(16 * var(--pt)); border-top: 1px solid var(--gris-bord); }
.deux-listes, .deux-droits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--pt)); }
.liste-donnees { padding: calc(14 * var(--pt)) calc(16 * var(--pt)); }
.liste-donnees .nom { margin: 0 0 calc(8 * var(--pt)); }
.liste-donnees .vert-liste { color: var(--vert-texte); }
.liste-donnees ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(7 * var(--pt)); font-size: var(--t-petit); }
.liste-donnees li { display: flex; gap: calc(8 * var(--pt)); }
.liste-donnees li.oui::before { content: "✓"; color: var(--vert-texte); font-weight: 700; }
.liste-donnees li.non::before { content: "✕"; color: var(--rouge-texte, #b03a2e); font-weight: 700; }
.titre-droits { margin-top: calc(24 * var(--pt)); }
.carte-droit { display: flex; align-items: flex-start; gap: calc(12 * var(--pt)); margin: 0;
               padding: calc(14 * var(--pt)) calc(16 * var(--pt)); border-radius: var(--rayon-bloc); background: var(--gris-bloc); }
.carte-droit .corps-droit { flex: 1; min-width: 0; }
.carte-droit .bouton { flex: none; }
.note-espace { margin-top: calc(14 * var(--pt)); }
@media (max-width: 760px) {
  .engagements, .deux-listes, .deux-droits { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   À PROPOS — proposition A du directeur (20/10/2026) : la carte
   d'identité sombre, puis l'aide et les nouveautés à gauche, les
   Mentions à droite, la fiche technique repliée.
   ══════════════════════════════════════════════════════════════════ */
/* La carte reste sombre dans les deux thèmes : le vert d'écriture y garde
   l'éclat de la marque, comme en thème sombre. */
.carte-identite { --vert-texte: var(--vert-marque); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
                  gap: calc(20 * var(--pt)); padding: calc(22 * var(--pt)) calc(24 * var(--pt));
                  border-radius: var(--rayon-bloc); background: var(--radar-nuit); color: var(--radar-texte); }
.identite-gauche, .identite-droite { display: flex; align-items: center; flex-wrap: wrap; gap: calc(16 * var(--pt)); }
.embleme-apropos { display: grid; place-items: center; flex: none; width: calc(58 * var(--pt)); height: calc(58 * var(--pt));
                   border-radius: var(--rayon-bloc); background: #000; border: 2px solid var(--vert-marque); }
.embleme-apropos img { width: calc(34 * var(--pt)); }
.nom-apropos { margin: 0; font: 800 var(--t-titre-bloc, 24px) "Nexa Pro", sans-serif; letter-spacing: -.01em; }
.sous-apropos { margin: calc(2 * var(--pt)) 0 0; font-size: var(--t-petit); opacity: .72; }
.versions-apropos { display: flex; gap: calc(22 * var(--pt)); margin: 0; }
.versions-apropos dt { font-size: var(--t-etiquette); text-transform: uppercase; letter-spacing: .06em; opacity: .62; }
.versions-apropos dd { margin: calc(4 * var(--pt)) 0 0; font-weight: 700; }
.versions-apropos code { font: 800 var(--t-carte) "Nexa Pro", sans-serif; }
.etat-a-jour { padding: calc(5 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px; font-size: var(--t-etiquette);
                   font-weight: 700; color: var(--vert-texte); background: rgba(136, 199, 59, .16); }
.etat-a-jour::before { content: "● "; }
.carte-identite .lien-site { color: var(--sur-vert); }
.grille-apropos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(24 * var(--pt));
                  grid-template-areas: "aide mentions" "nouveautes mentions" "fiche fiche"; align-items: start; }
#apropos-aide { grid-area: aide; }
#apropos-nouveautes { grid-area: nouveautes; }
#apropos-mentions { grid-area: mentions; }
#apropos-fiche { grid-area: fiche; }
.tuiles-aide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--pt)); }
.tuile-aide { display: flex; flex-direction: column; gap: calc(6 * var(--pt)); padding: calc(14 * var(--pt));
              border-radius: var(--rayon-bloc); background: var(--gris-bloc); }
.tuile-aide .desc { flex: 1; }
.tuile-aide .bouton { align-self: flex-start; }
.frise-nouveautes { display: grid; gap: calc(12 * var(--pt)); margin-left: calc(6 * var(--pt));
                    padding-left: calc(16 * var(--pt)); border-left: 2px solid var(--gris-bord); }
.nouveaute { position: relative; display: flex; flex-direction: column; }
.nouveaute::before { content: ""; position: absolute; left: calc(-23 * var(--pt)); top: calc(4 * var(--pt));
                     width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 999px; background: var(--vert-marque); }
.date-nouveaute { font-size: var(--t-etiquette); color: var(--gris-texte); }
.titre-nouveaute { font-size: var(--t-petit); font-weight: 600; }
.liste-mentions { display: flex; flex-direction: column; border-radius: var(--rayon-bloc); background: var(--gris-bloc); overflow: hidden; }
.mention-lien { position: relative; display: flex; flex-direction: column; gap: calc(2 * var(--pt));
                padding: calc(12 * var(--pt)) calc(40 * var(--pt)) calc(12 * var(--pt)) calc(16 * var(--pt));
                color: inherit; text-decoration: none; }
.mention-lien + .mention-lien { border-top: 1px solid var(--gris-bord); }
.mention-lien::after { content: "›"; position: absolute; right: calc(16 * var(--pt)); top: 50%; transform: translateY(-50%);
                       font-size: calc(22 * var(--pt)); color: var(--vert-texte); }
.mention-lien:hover { background: var(--carte-survol); }
.pliable-fiche > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pliable-fiche > summary::-webkit-details-marker { display: none; }
.pliable-fiche > summary::after { content: "⌄"; color: var(--vert-texte); font-weight: 700; }
.pliable-fiche[open] > summary::after { content: "⌃"; }
/* Les pages des Mentions */
.doc-mention { display: grid; grid-template-columns: calc(220 * var(--pt)) minmax(0, 1fr); gap: calc(22 * var(--pt)); align-items: start; }
.sommaire-mentions { display: flex; flex-direction: column; gap: calc(2 * var(--pt)); position: sticky; top: calc(10 * var(--pt)); }
.sommaire-mentions a { padding: calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius: var(--rayon-carte); color: inherit; text-decoration: none; font-size: var(--t-petit); }
.sommaire-mentions a:hover { background: var(--gris-bloc); }
.sommaire-mentions a[aria-current="page"] { background: var(--vert-actif); color: var(--vert-texte); font-weight: 600; }
.corps-mention { padding: calc(22 * var(--pt)) calc(26 * var(--pt)); border-radius: var(--rayon-bloc); background: var(--gris-bloc); }
.corps-mention h2 { font-size: var(--t-carte); margin: calc(18 * var(--pt)) 0 calc(6 * var(--pt)); }
.corps-mention h2:first-child { margin-top: 0; }
.corps-mention p, .corps-mention li { color: var(--gris-texte); }
.corps-mention p { margin: 0 0 calc(8 * var(--pt)); }
.corps-mention .a-completer { color: var(--jaune-texte); background: var(--jaune-fond); padding: calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius: var(--rayon-carte); }
.corps-mention .a-completer b { margin-right: calc(6 * var(--pt)); }
.tableau-mention { width: 100%; margin: calc(6 * var(--pt)) 0 calc(10 * var(--pt)); border-collapse: collapse; font-size: var(--t-petit); }
.tableau-mention th, .tableau-mention td { text-align: left; padding: calc(8 * var(--pt)) calc(10 * var(--pt)); border-bottom: 1px solid var(--gris-bord); }
.relire-mention { margin-top: calc(18 * var(--pt)) !important; font-size: var(--t-etiquette); font-style: italic; }
.retour-mention { margin-top: calc(18 * var(--pt)); }
@media (max-width: 760px) {
  .grille-apropos { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aide" "mentions" "nouveautes" "fiche"; }
  .tuiles-aide, .doc-mention { grid-template-columns: minmax(0, 1fr); }
  .sommaire-mentions { position: static; }
}
/* Le nom et sa description, dans les cartes redessinées le 20/10/2026 :
   la même règle que dans les rangées de réglage. */
:is(.ligne-donnees, .carte-droit, .tuile-aide, .mention-lien) .nom { font-size: var(--t-carte); font-weight: 600; color: var(--encre); }
:is(.ligne-donnees, .carte-droit, .tuile-aide, .mention-lien) .desc { font-size: var(--t-petit); color: var(--gris-texte); line-height: 1.45; }

/* ══════════════════════════════════════════════════════════════════
   VIGIE SUR TÉLÉPHONE, REVU (directeur, 21/10/2026 : « ce n'est pas
   adapté sur mobile, il faut que ce soit facile à utiliser » ; planche
   validée, choix « B » pour la barre du bas).

   Tout ce qui suit vit sous 640 pixels, sauf les quelques règles qui
   CACHENT sur un ordinateur ce qui n'existe que sur un téléphone.
   Au-dessus de 640, rien ne change.

   LES MESURES SONT CELLES QUE LA COQUE ADMET DÉJÀ (tests/test_ecran_
   fixe.py) : le plancher tactile de 44, les 48 et 60 des grandes cibles,
   les marges de 10, 16 et 24 ; les textes passent par les jetons
   (--t-petit, --t-carte, --t-tuile, --t-source, --t-bloc), les coins par
   --rayon-bloc ou « tout rond ».

   ÉTAPE 1 — LA NAVIGATION. Une seule barre, en bas, sous le pouce, un
   nom sous chaque icône : Accueil, Publications, Planning, Messages,
   Plus. Les onglets du haut et la barre d'icônes flottante — qui
   recouvrait le contenu et les boutons — se cachent ; l'engrenage du
   haut passe dans « Plus ».
   ══════════════════════════════════════════════════════════════════ */
.barre-bas { display: none; }
/* LA FEUILLE « PLUS » : une feuille qui monte du bas (attribut
   « popover » : le navigateur l'ouvre et la ferme sans script, et la
   touche Échap ou un toucher à côté la referment). */
.feuille-plus {
  /* Elle s'arrête AU-DESSUS de la barre du bas (60 points), qui reste
     visible sous le voile : un toucher dessus referme la feuille. */
  position: fixed; inset: auto 0 calc(60px + env(safe-area-inset-bottom)) 0; width: 100%; max-width: 100%; margin: 0;
  border: 0; border-radius: var(--rayon-bloc) var(--rayon-bloc) 0 0; padding: 10px 16px 18px;
  background: var(--flottant); color: var(--encre); box-shadow: 0 -10px 40px rgba(9, 9, 9, .18);
}
.feuille-plus::backdrop { background: var(--voile); }
.feuille-plus .poignee { display: block; width: 48px; height: 5px; border-radius: 3px;
                         background: var(--gris-bord); margin: 0 auto 16px; }
.grille-plus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grille-plus a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
                 padding: 16px 6px; border-radius: var(--rayon-bloc); background: var(--gris-bloc);
                 color: var(--encre); text-decoration: none; font: 600 var(--t-tuile)/1.2 "Inter", sans-serif; text-align: center; }
.grille-plus .icone { width: 24px; height: 24px; }

@media (max-width: 640px) {
  .menu, .rail { display: none; }
  .barre-haut .rond[href="/parametres"] { display: none; }
  .barre-haut { padding-top: max(10px, env(safe-area-inset-top)); }
  .barre-haut .qui { margin-left: auto; }
  .dedans { padding-bottom: 24px; }
  .barre-bas {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: none; position: relative; z-index: 30;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--fond); border-top: 1px solid var(--gris-bord);
  }
  .barre-bas a, .barre-bas button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--gris-texte); text-decoration: none; font: 600 var(--t-petit)/1.1 "Inter", sans-serif; text-align: center;
  }
  .barre-bas [aria-current="page"], .barre-bas button.ici { color: var(--encre); }
  .pilule-bas { position: relative; display: grid; place-items: center; width: 60px; height: 28px; border-radius: 999px;
                transition: background var(--temps) var(--detente); }
  .pilule-bas .icone { width: 22px; height: 22px; }
  .barre-bas [aria-current="page"] .pilule-bas, .barre-bas button.ici .pilule-bas { background: var(--vert-voile); }
  .pastille-bas { position: absolute; top: -3px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px;
                  border-radius: 9px; background: var(--vert-marque); color: var(--sur-vert);
                  font: 700 var(--t-petit)/18px "Inter", sans-serif; text-align: center; }
  /* LES CHAMPS ÉCRIVENT EN 16 : en dessous, l'iPhone zoome sur la page
     dès qu'on touche un champ, et ne dézoome plus. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}

/* ÉTAPE 2 — L'ACCUEIL : les trois chiffres sur une ligne ; la carte « La
   veille » porte « Lancer un passage », qui n'est plus le gros bouton
   vert du haut. */
.veille-mobile { display: none; }
@media (max-width: 640px) {
  .entete .form-passage { display: none; }
  .accueil-a .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .accueil-a .tri-du-bloc { grid-column: 1 / -1; }
  .accueil-a .tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
                      padding: 10px; min-height: 0; border-radius: var(--rayon-bloc); }
  .accueil-a .tuile .rond-icone { order: -1; align-self: flex-start; width: 28px; height: 28px; margin: 0 0 8px; position: static; }
  .accueil-a .tuile .rond-icone .icone { width: 18px; height: 18px; }
  .accueil-a .tuile .gros { font-size: 28px; line-height: 1; }
  .accueil-a .tuile .nom { font-size: var(--t-carte); line-height: 1.2; margin: 0; color: var(--gris-texte); }
  .veille-mobile { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 16px;
                   border-radius: var(--rayon-bloc); background: var(--radar-nuit); color: var(--radar-texte); }
  .veille-mobile .icone { width: 24px; height: 24px; --i-encre: var(--radar-texte); }
  .veille-mobile > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .veille-mobile b { font-size: var(--t-source); color: #fff; }
  .veille-mobile span { font-size: var(--t-tuile); opacity: .75; }
  .petit-bouton-vert { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
                       background: var(--vert-marque); color: var(--sur-vert); font: 700 var(--t-source) "Inter", sans-serif; }
}

/* ÉTAPE 3 — LES LISTES : une carte par ligne ; la note à gauche, le titre
   au milieu, l'état à droite ; les titres de colonnes se cachent (sauf
   le tri des passages, qui vit dans l'en-tête). */
.plus-flottant { display: none; }
@media (max-width: 640px) {
  .tableau-liste, .tableau-liste tbody { display: block; width: 100%; }
  .tableau-liste tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px;
                      padding: 10px 0; border-bottom: 1px solid var(--gris-bord); }
  .tableau-liste tr:has(th) { justify-content: flex-end; padding: 0; border: 0; }
  .tableau-liste tr:has(th):not(:has(.th-tri)) { display: none; }
  .tableau-liste th:not(.th-tri) { display: none; }
  .tableau-liste td, .tableau-liste th { display: block; flex: 0 0 auto; height: auto; padding: 0; border: 0; }
  .tableau-liste tr:last-child td { border: 0; }
  .tableau-liste td.facultative { display: none; }
  .tableau-liste td[colspan] { flex: 1 1 100%; padding: 28px 0; }
  /* La cellule du titre prend la place : la deuxième quand la ligne
     commence par une note ou une étoile, la première sinon. */
  .tableau-liste tr:has(> td:first-child :is(.note-ronde, .etoile)) > td:nth-child(2),
  .tableau-liste tr:not(:has(> td:first-child :is(.note-ronde, .etoile))) > td:first-child { flex: 1 1 0; min-width: 0; }
  .tableau-liste .note-ronde { width: 44px; height: 44px; }
  .tableau-liste .titre-ligne { font-size: var(--t-bloc); line-height: 1.3; }
  .tableau-liste .sous-ligne { font-size: var(--t-tuile); }
  .filtres .vues { -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
                   mask: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
  .filtres .vues a { flex: none; }
  /* La tête d'une liste : la recherche sur toute la ligne, le bouton dessous. */
  .tete-outils { flex-wrap: wrap; width: 100%; }
  .tete-outils .cherche { flex: 1 1 100%; }
  /* « Créer une publication » : un bouton rond, au-dessus de la barre du bas. */
  .creer-flottant { position: fixed; z-index: 25; right: 16px; bottom: calc(60px + 16px + env(safe-area-inset-bottom));
                    width: 60px; height: 60px; min-height: 60px; padding: 0; border-radius: 50%;
                    display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(9, 9, 9, .35); }
  .creer-flottant .mot-flottant { display: none; }
  .creer-flottant .plus-flottant { display: grid; place-items: center; width: 100%; height: 100%; }
  .creer-flottant .plus-flottant .icone { width: 24px; height: 24px; --i-vert: #fff; --i-encre: var(--detail-sur-vert); }
  /* Les deux boutons ronds du planning (créer un planning, verser un
     fichier) : à droite, au-dessus de la barre du bas — ils flottaient en
     bas à gauche, par-dessus le premier jour (vu à l'aperçu). */
  .coin-bas-planning { position: fixed; z-index: 25; left: auto; right: 16px; bottom: calc(60px + 16px + env(safe-area-inset-bottom));
                       display: flex; flex-direction: column; gap: 10px; margin: 0; }
}

/* ÉTAPE 4 — UNE FICHE : pas de barre du bas ; le pied porte
   « Enregistrer » et « Valider » côte à côte ; « Reclasser » et
   « Conversation » se rangent en haut, à droite de la note. */
.valider-pied { display: none; }
@media (max-width: 640px) {
  .fiche-etapes .tete-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .fiche-etapes .tete-fiche .titres { flex: 1 1 100%; order: 2; }
  .fiche-etapes .tete-fiche .tete-droite { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; }
  .fiche-etapes .tete-droite .discret-b { width: auto; }
  .fiche-etapes .tete-droite :is(.discret-b, .bouton-conversation) { min-height: 44px; }
  .fiche-etapes .pied { gap: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .fiche-etapes .pied .signature { display: none; }
  .fiche-etapes .pied > span:empty { display: none; }
  .fiche-etapes .pied button { flex: 1; min-height: 48px; border-radius: 999px; font-size: var(--t-bloc); }
  .fiche-etapes .pied:has(.valider-pied) .principal { background: var(--gris-champ); color: var(--encre); }
  .valider-pied { display: block; border: 0; cursor: pointer; background: var(--vert-marque);
                  color: var(--sur-vert); font-weight: 700; }
}

/* ÉTAPE 5 — MESSAGES : soit la liste, soit la conversation, en plein
   écran, avec « ‹ Messages » pour revenir et la zone d'écriture en bas. */
.retour-messages { display: none; }
@media (max-width: 640px) {
  .messagerie { display: block; }
  .messagerie.en-conversation { border: 0; background: none; padding: 0; }
  .messagerie.en-conversation .colonne-personnes { display: none; }
  .messagerie:not(.en-conversation) .conversation { display: none; }
  .messagerie .conversation-vide { display: none; }
  .messagerie.en-conversation .conversation { display: flex; flex-direction: column; min-height: calc(100dvh - 130px);
                                              border: 0; border-radius: 0; background: none; }
  .messagerie.en-conversation .fil-messages { flex: 1; }
  .messagerie.en-conversation .tete-conversation { flex-wrap: wrap; row-gap: 2px; }
  .page-simple:has(.en-conversation) > h1 { display: none; }
  .retour-messages { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
                     color: var(--vert-texte); font-weight: 600; text-decoration: none; flex: 1 1 100%; }
  .colonne-personnes .personne { min-height: 60px; }
  .ecrire-message { position: sticky; bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--fond); }
}

/* ÉTAPE 6 — PARAMÈTRES : la liste des rubriques, comme les réglages d'un
   téléphone ; une rubrique s'ouvre en plein écran, avec « ‹ Paramètres »
   pour revenir. */
.retour-rubriques { display: none; }
.titre-mobile { display: none; }
@media (max-width: 640px) {
  .page-simple.reglages > .titre-mobile { display: block; margin: 4px 0 6px; }
  .page-simple.reglages:has(.en-rubrique) > .titre-mobile { display: none; }
  .rubriques { display: block; }
  .rubriques.en-rubrique .rubriques-menu { display: none; }
  .rubriques:not(.en-rubrique) .rubriques-corps { display: none; }
  .rubriques-menu { position: static; display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; background: none; }
  .rubriques-menu .groupe-rubriques { margin: 18px 0 6px; font-size: var(--t-tuile); font-weight: 600; color: var(--gris-texte); }
  .rubriques-menu a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
                      border: 1px solid var(--gris-bord); border-top-width: 0; border-radius: 0;
                      background: var(--carte); color: var(--encre); font-size: var(--t-bloc); font-weight: 500; }
  .rubriques-menu .groupe-rubriques + a { border-top-width: 1px; border-radius: var(--rayon-bloc) var(--rayon-bloc) 0 0; }
  .rubriques-menu a:has(+ .groupe-rubriques), .rubriques-menu a:last-child { border-radius: 0 0 var(--rayon-bloc) var(--rayon-bloc); }
  .rubriques-menu .groupe-rubriques + a:has(+ .groupe-rubriques) { border-radius: var(--rayon-bloc); }
  .rubriques-menu a::after { content: "›"; margin-left: auto; font-size: 22px; color: var(--gris-pale); }
  .rubriques-menu a.ici { background: var(--carte); color: var(--encre); }
  .rubriques-menu a.ici .icone { --i-vert: var(--vert-marque); --i-encre: var(--encre); }
  .rubriques-menu .icone { width: 22px; height: 22px; }
  .retour-rubriques { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px;
                      color: var(--vert-texte); font-weight: 600; text-decoration: none; }
}

/* ÉTAPE 7 — LES FENÊTRES EN PLEIN ÉCRAN : une petite boîte à bords
   coupés au milieu d'un écran de 390 points ne se lit pas ; la fenêtre
   prend tout l'écran, la croix en haut, sous l'encoche. */
@media (max-width: 640px) {
  dialog#popup, dialog#sous-popup { width: 100%; max-width: 100%; min-height: 100dvh; max-height: 100dvh;
                                    margin: 0; border-radius: 0; box-shadow: none; }
  dialog#popup.large, dialog#popup.ample { max-width: 100%; }
  .popup-entete { padding-top: max(16px, env(safe-area-inset-top)); }
  #popup-corps, #sous-corps { flex: 1; overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   LA FENÊTRE DU BAS (directeur, 31/10/2026) — au format téléphone, listes,
   heures, calendriers et filtres montent du bas, sur toute la largeur.
   ===================================================================== */
.panneau-choix.en-feuille { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
                            max-height: 85dvh; border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0;
                            padding: 0 calc(16 * var(--pt)) calc(calc(16 * var(--pt)) + env(safe-area-inset-bottom));
                            font-size: calc(16 * var(--pt)); box-shadow: 0 -calc(12 * var(--pt)) calc(32 * var(--pt)) var(--ombre);
                            animation: monte-du-bas .22s cubic-bezier(.22, 1, .36, 1); }
.panneau-choix.en-feuille::backdrop { background: rgba(0, 0, 0, .5); }
@keyframes monte-du-bas { from { transform: translateY(40%); } }
@media (prefers-reduced-motion: reduce) { .panneau-choix.en-feuille { animation: none; } }
.feuille-tete { position: sticky; top: 0; z-index: 1; margin: 0 -calc(16 * var(--pt)) calc(8 * var(--pt)); padding: calc(12 * var(--pt)) calc(22 * var(--pt)) calc(8 * var(--pt));
                background: var(--surface-flottante); }
.feuille-poignee { display: block; width: calc(44 * var(--pt)); height: calc(5 * var(--pt)); margin: 0 auto calc(14 * var(--pt)); border-radius: 999px;
                   background: var(--gris-bord); }
.feuille-titre { margin: 0; font: 800 calc(20 * var(--pt)) "Nexa Pro", "Inter", sans-serif; color: var(--encre); }
.panneau-choix.en-feuille .choix { min-height: calc(54 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt)); border-radius: var(--rayon-carte); font-size: calc(16 * var(--pt)); }
.panneau-choix.en-feuille.pour-heure, .panneau-choix.en-feuille.pour-calendrier { width: 100%; }
.panneau-choix.en-feuille button.jour-choix { font-size: calc(15 * var(--pt)); }
.panneau-choix.en-feuille button.case-choix { min-height: calc(46 * var(--pt)); font-size: calc(16 * var(--pt)); }
.avec-drapeau-choix { display: inline-flex; align-items: center; gap: calc(12 * var(--pt)); }
.drapeau-choix { width: calc(26 * var(--pt)); height: calc(18 * var(--pt)); border-radius: calc(3 * var(--pt)); object-fit: cover;
                 box-shadow: 0 0 0 calc(1 * var(--pt)) var(--bord-flottant); }

.tri-pied { display: flex; gap: calc(10 * var(--pt)); margin-top: calc(14 * var(--pt)); }
.tri-pied button { flex: 1; min-height: calc(44 * var(--pt)); border-radius: 999px; cursor: pointer;
                   font: 600 calc(14.5 * var(--pt)) "Inter", sans-serif; }
.tri-annuler { background: none; border: calc(1 * var(--pt)) solid var(--gris-bord); color: var(--encre); }
.tri-appliquer { background: var(--vert-marque); border: 0; color: var(--sur-vert); }
@media (max-width: calc(640 * var(--pt))) {
  .tri-passages[open]::before { content: ""; position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .5); }
  .tri-panneau { position: fixed; z-index: 999; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
                 text-align: left; white-space: normal;
                 background: var(--surface-flottante); box-shadow: 0 -calc(12 * var(--pt)) calc(32 * var(--pt)) var(--ombre);
                 border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0; padding: calc(20 * var(--pt)) calc(22 * var(--pt)) calc(calc(18 * var(--pt)) + env(safe-area-inset-bottom));
                 animation: monte-du-bas .22s cubic-bezier(.22, 1, .36, 1); }
  .tri-panneau .tri-titre { text-align: left; font-size: calc(13.5 * var(--pt)); }
  .tri-panneau .pastille { display: inline-block; line-height: calc(42 * var(--pt)); padding: 0 calc(18 * var(--pt)); border-radius: 999px;
                           margin: 0 calc(6 * var(--pt)) calc(8 * var(--pt)) 0; font-size: calc(14.5 * var(--pt)); font-weight: 600; text-transform: none; }
  .tri-panneau .pastille::first-letter { text-transform: uppercase; }
  .tri-panneau .pastille.p-bleu { background: var(--vert-marque); color: var(--sur-vert); }
  .tri-panneau .pastille.p-gris { background: var(--gris-bloc); color: var(--encre); }
  .tri-pied button { min-height: calc(52 * var(--pt)); font-size: calc(15 * var(--pt)); }
}

/* =====================================================================
   LA PAGE DE RECHERCHE (directeur, 31/10/2026) — au format téléphone, une
   barre de recherche s'ouvre dans sa page, qui ne cherche que dans sa zone.
   ===================================================================== */
.page-recherche { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
                  background: var(--surface-flottante); color: var(--encre); }
.recherche-tete { display: flex; align-items: center; gap: calc(8 * var(--pt));
                  padding: calc(10 * var(--pt)) calc(14 * var(--pt)) calc(10 * var(--pt)) calc(6 * var(--pt));
                  padding-top: calc(10 * var(--pt) + env(safe-area-inset-top));
                  border-bottom: 1px solid var(--gris-bord); }
.recherche-retour { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); flex: 0 0 auto;
                    border: 0; background: none; color: var(--encre); cursor: pointer; }
.recherche-retour::before { content: "\2190"; font-size: calc(22 * var(--pt)); line-height: 1; }
.recherche-saisie[type=search] { flex: 1; min-width: 0; height: calc(44 * var(--pt)); box-sizing: border-box;
                                 padding: 0 calc(16 * var(--pt)); border: 0; border-radius: 999px;
                                 background: var(--gris-champ); color: var(--encre);
                                 font: 400 calc(16 * var(--pt)) "Inter", sans-serif; }
.recherche-saisie[type=search]:focus { outline: 2px solid var(--vert-marque); outline-offset: -2px; }
.recherche-resultats { flex: 1; overflow-y: auto; padding: calc(12 * var(--pt)) calc(16 * var(--pt)) calc(32 * var(--pt)); }
.recherche-resultats[aria-busy=true] { opacity: .55; }
.recherche-message { margin: calc(40 * var(--pt)) 0; text-align: center; color: var(--gris-texte); }
.recherche-suggestions { list-style: none; margin: 0; padding: 0; }
.recherche-suggestions a { display: block; padding: calc(14 * var(--pt)) 0; color: var(--encre);
                           text-decoration: none; border-bottom: 1px solid var(--gris-bord); }

/* =====================================================================
   « MON COMPTE » AU FORMAT TÉLÉPHONE (directeur, 31/10/2026) : le portrait au
   centre, puis une carte par rubrique, comme dans l'application.
   ===================================================================== */
@media (max-width: 640px) {
  .compte-a > h1 { text-align: center; }
  .compte-a .identite { flex-direction: column; text-align: center; gap: calc(12 * var(--pt)); }
  .compte-a .identite-texte { align-items: center; }
  .compte-a .carte-compte, .compte-a .lignes-compte { background: var(--gris-bloc); border-radius: var(--rayon-carte);
                                                      padding: calc(16 * var(--pt)); margin-top: calc(12 * var(--pt)); }
  .compte-a .ligne-compte { grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(8 * var(--pt)); }
  .compte-a .ligne-compte input { grid-column: 1 / -1; width: 100%; }
  .compte-a .carte-compte .ligne-compte .principal { grid-column: 1 / -1; width: 100%; }
  .compte-a .pied-compte { margin-top: calc(20 * var(--pt)); }
  .compte-a .pied-compte .sortie { width: 100%; }
}