/* ===========================================================================
   COQUILLE APPLICATIVE — barre du haut et rail latéral corrigés
   Passation « design 14 » (docs/modeles/passation-design-14-coquille.md),
   maquette de référence « Layout EasyTime v2 ».

   CHARGÉE APRÈS easytime-shell.css, et seulement après : elle ne redéclare que
   ce qui change. Les sélecteurs .et-* de la coquille restent ceux du fichier
   d'origine — c'est le même rail, pas un second système.

   POURQUOI SA PROPRE FEUILLE ET NON LA QUEUE D'easytime-shell.css
     Même motif que les feuilles d'écran (voir l'en-tête d'App.razor) : ce
     fichier-là porte AUSSI le tableau unifié (.tbl-*) et les filtres (.flt-*),
     que rien ici ne touche. Y ajouter la coquille aurait fait bouger leur clé
     de cache à chaque retouche du menu.

   COULEURS EN JETONS, PAS EN DUR
     La passation donne des valeurs littérales (#F5F6F7, #E5E5E5, #32363A…) :
     ce sont celles des jetons --et-* de la charte, repris ici sous leur nom.
     La raison n'est pas cosmétique — les jetons BASCULENT en thème sombre
     (.appgrid[data-theme="dark"], easytech-theme.css), qu'EasyTime active. Une
     valeur en dur y aurait laissé un rail blanc dans une application sombre.
     Restent littérales les seules couleurs qui ne basculent pas par nature :
     le bleu SAP et l'orange de marque, posés sur le marine de la barre.
   =========================================================================== */

/* --- Palette de la coquille : REMONTÉE DANS easytime-shell.css -------------
   Ce fichier reportait ici douze jetons de la coquille sur la charte, et son
   commentaire disait pourquoi cela ne suffisait pas : « le bloc sombre
   d'easytime-shell.css reste maître, sa spécificité (0,2,0) l'emporte sur le
   sélecteur de classe nu employé ici (0,1,0) ». Le report ne tenait donc qu'en
   thème clair.

   Le bloc sombre a été supprimé et le report fait à sa source, dans le bloc
   .appgrid d'easytime-shell.css : une seule définition par jeton, qui bascule
   d'elle-même. Deux corrections au passage — --side-border prenait
   --et-filet-fort, qui n'a PAS de valeur sombre et laissait donc un filet clair
   sur un rail sombre ; --item-active-* prenaient --et-form-blue, qui ne bascule
   pas non plus et que le bloc sombre contournait avec un bleu à lui.

   Ne restent ici que les deux jetons PROPRES à ce fichier. */
.appgrid {
    /* Intitulés de groupe : l'ardoise de la charte, et non le gris d'aide.
       Contraste 2,9:1 -> 8,6:1 sur fond blanc. */
    --group-text: var(--et-table-head);
    --group-text-active: var(--et-form-blue-encre);
}

/* L'ardoise #354A5F sur un panneau #111A2B ne se lit plus : --group-text prend en
   sombre l'encre que la charte réserve au texte posé sur fond ardoise.
   --group-text-active, lui, n'a plus besoin de ligne — --et-form-blue-encre
   bascule seul, là où --et-form-blue ne le pouvait pas et forçait un #7db8f0
   écrit à la main. */
.appgrid[data-theme="dark"] {
    --group-text: var(--et-sur-ardoise);
}

/* --- Barre du haut : filet bleu, orange rendu au logotype ------------------
   L'orange est réservé aux boutons d'engagement : un filet large de tout
   l'écran n'en est pas un. Il revient sur le second mot de la marque, comme
   .et-brand .txt span le prévoyait déjà pour le logotype de connexion.

   La barre elle-même RESTE MARINE (--et-blue) : le marine tient le chrome, le
   bleu SAP tient le contenu. C'est le choix déjà inscrit en commentaire dans
   easytime-shell.css, et la passation ne le remet pas en cause.

   Le filet suit --accent, posé par ShellModule d'après son paramètre du même
   nom : sa valeur par défaut passe à #0A6ED1 (voir ShellModule.Accent), et
   EasyProjects garde son vert. La règle ne peut donc pas vivre ici — elle
   serait battue par le <style> embarqué du composant, rendu dans le corps
   donc après cette feuille. */
/* Le logotype du module. Il n'avait AUCUNE règle servie : .shell-marque n'était
   définie que dans css/shell-module.css, feuille héritée de l'ancienne coquille
   .shell-* et jamais référencée par App.razor. La marque s'affichait donc en
   texte courant, sans graisse ni protection de retour à la ligne — visible dès
   qu'un module au nom long croisait une fenêtre étroite. Reprise ici, à la
   dimension de la maquette.

   CETTE FEUILLE A ÉTÉ SUPPRIMÉE LE 2026-08-21, et c'est ici qu'on le note parce
   que c'est ici que la passation 15 renvoie (§4.2, « constat déjà écrit dans
   rail-lateral.css »). Elle y qualifiait la suppression d'ARBITRAGE OUVERT, pas
   de correction : l'arbitrage est tranché pour celle-ci. Vérifié avant de
   supprimer — aucun fichier de code ne la référençait, App.razor ne la chargeait
   pas, et de ses sept classes .shell-* une seule était encore émise par
   ShellModule : .shell-marque, dont la règle est celle qui suit. Le reste
   (.shell-mod, .shell-top, .shell-top-libre, .shell-top-actions, .shell-corps,
   .shell-side) n'apparaissait dans aucun balisage.

   L'AUTRE MOITIÉ DE L'ARBITRAGE RESTE OUVERTE. La passation 15 §4.2 nomme DEUX
   coquilles inertes : celle-ci, et l'ancienne — les .app-* d'app.css, seize
   règles dont aucune classe n'est plus émise. Différence qui compte : app.css
   est bien chargée par App.razor, donc ces seize règles partent au navigateur à
   chaque écran. Les retirer demande de toucher une feuille vivante, ce qui n'est
   pas le même geste que de supprimer un fichier mort. */
.appgrid .et-topbar .shell-marque {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    font-size: 18px; font-weight: 700; white-space: nowrap;
}
.appgrid .et-topbar .shell-marque i { color: var(--et-orange); }
.appgrid .et-topbar .shell-marque .accent { color: var(--et-orange); }

/* --- Bascule de société ---------------------------------------------------
   Rendue dès qu'un dossier est ouvert (2026-09-05), et ouvrable dans le cas
   général : le panneau porte la fiche d'identité du dossier — activité,
   immatriculations, rôle tenu, état d'archive — autant qu'il porte la bascule.
   Un compte mono-dossier y voit donc une ligne, cochée ; un compte de cabinet y
   choisit (core.UserCompany, db/1248).

   UNE EXCEPTION, ET UNE SEULE : le super-administrateur entré dans un dossier.
   L'API ne lui sert aucun périmètre — il n'a pas de limite, pas une liste —,
   donc son panneau serait vide et son état vide le contredirait au mot près
   (« aucun dossier ne vous est rattaché », sous le nom du dossier ouvert). Il
   reçoit la pilule INERTE `.est-fixe` : l'énoncé sans la promesse.

   Même famille que la pilule de période, à dessein : la société sur laquelle
   on travaille est un fait du CONTEXTE, au même titre que le mois ouvert. */
.et-societe { position: relative; flex-shrink: 0; }
.et-societe-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px; background: var(--et-fond-marine-doux); color: var(--et-sur-marine);
    font-size: 13px; font-family: inherit; white-space: nowrap;
    border: none; cursor: pointer;
}
.et-societe-btn:hover, .et-societe-btn.actif { background: var(--et-fond-marine-survol); }
/* LA FORME QUI N'OUVRE RIEN — le super-administrateur, seul compte dont le panneau
   n'aurait rien à montrer. Même pilule, même place, même famille de fond : c'est le
   même fait de contexte. Ce qui change est ce qu'elle promet — pas de chevron dans le
   balisage, donc pas de survol qui suggère un geste, et le curseur reste celui du
   texte. Rien d'autre ne bouge : un aspect plus pâle ferait lire « indisponible » là
   où il n'y a simplement rien à ouvrir. */
.et-societe-btn.est-fixe { cursor: default; }
.et-societe-btn.est-fixe:hover { background: var(--et-fond-marine-doux); }
.et-societe-chev { font-size: 12px; opacity: .8; }

/* Le voile : un clic n'importe où referme. Sans lui le panneau reste ouvert
   derrière l'écran suivant. */
.et-societe-fond { position: fixed; inset: 0; z-index: 39; }
.et-societe-panneau {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
    /* TROIS LIGNES PAR DOSSIER DEMANDENT DE LA LARGEUR : nom + rôle, activité,
       immatriculations. À 260 px le NIF et le RCCM se coupaient à l'ellipse, et une
       immatriculation tronquée ne vérifie plus rien — c'est pourtant sa seule raison
       d'être ici. Bornée à 420 px : au-delà, le panneau déborderait la moitié gauche
       de la barre sur un portable de 1280 px.
       IL NE DÉFILE PAS LUI-MÊME : c'est sa LISTE qui défile (.et-societe-liste plus
       bas), pour que le champ de recherche et le rappel sur les droits restent posés.
       Un panneau entièrement défilant emmenait les deux hors de vue au premier coup
       de molette, sur le cabinet qui en a justement le plus besoin.
       La largeur cède devant la fenêtre elle-même : sous 640 px la barre du
       haut reste en place (le rail, lui, devient un tiroir), et un panneau de 360 px
       posé à 50 px du bord gauche d'un écran de 390 px sortirait par la droite. Le
       min() n'est pas un palier — c'est la fenêtre qui borne, pas un seuil choisi. */
    /* UNE LARGEUR FIXE, ET NON UNE FOURCHETTE. Bornée entre 360 et 420 px, la boîte se
       dimensionnait sur son contenu et s'arrêtait à 367 px : il manquait alors 11 px à
       l'immatriculation de la ligne ouverte, la seule qui porte aussi une coche. Une
       fourchette fait en outre respirer le panneau d'un compte à l'autre, selon la
       longueur des noms — un menu qui change de largeur quand on change de dossier. */
    width: min(420px, calc(100vw - 24px));
    padding: 6px 0;
    background: var(--ph-bg); border: 1px solid var(--ph-border);
    /* Le jeton d'ombre flottante a ete cree POUR ce panneau et celui du lanceur
       de modules (easytech-theme.css) ; il n'y avait plus qu'a le nommer ici. */
    box-shadow: var(--et-ombre-flottant); color: var(--crumb-current);
}
.et-societe-titre {
    padding: 6px 14px 8px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--et-muted);
}
.et-societe-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 14px; font-size: 14px; font-family: inherit; text-align: left;
    color: var(--crumb-current); background: transparent; border: none; cursor: pointer;
}
.et-societe-item:hover { background: var(--row-hover); }

/* LE DOSSIER OUVERT SE VOIT À TROIS CHOSES, ET PAS À UNE SEULE : la graisse, la
   teinte de fond, et le filet de 3 px à gauche. Une teinte seule se perd sur un
   écran délavé ou en plein soleil, et c'est la ligne qu'on cherche en premier en
   ouvrant le panneau. Le filet est posé en ombre INTÉRIEURE et non en bordure :
   une bordure décalerait la ligne active de 3 px par rapport aux autres, ce qui
   se lit comme un défaut d'alignement.
   LE FILET PREND L'ENCRE BLEUE, PAS L'APLAT : --et-form-blue n'a pas de valeur
   sombre (easytech-theme.css) et tombe à 2,08:1 sur la teinte sombre, sous le
   seuil de 3:1 d'une marque graphique ; --et-form-blue-encre tient 4,50:1 en
   clair et 6,77:1 en sombre.
   Le survol ne reprend pas la main sur la ligne active : perdre sa marque au
   passage de la souris ferait douter de ce qu'on est en train de quitter. */
.et-societe-item.actif {
    background: var(--et-tint);
    box-shadow: inset 3px 0 0 var(--et-form-blue-encre);
}
/* LE GRAS PORTE SUR LE NOM, PAS SUR LA RANGÉE ENTIÈRE. Posé sur la rangée, il
   épaississait aussi le NIF et le RCCM — en chasse fixe, donc plus larges — et
   l'immatriculation de la ligne OUVERTE, la seule qui porte en plus une coche,
   finissait à l'ellipse : la seule ligne du panneau dont on tronquait la
   vérification était celle du dossier où l'on travaille. */
.et-societe-item.actif .et-societe-nom { font-weight: 600; }
.et-societe-item.actif:hover { background: var(--et-tint); }

/* La première ligne : la raison sociale et le rôle qu'on y porte.

   *** ELLE REVIENT À LA LIGNE, ELLE NE COUPE PLUS ***
   La règle précédente disait : « le nom cède à l'ellipse et le rôle jamais — un
   rôle tronqué ne dit plus quels droits on a, alors qu'un nom coupé reste
   reconnaissable ». L'arbitrage était pris à l'envers, et la recette le montre :
   sur un panneau de 420 px, « Transgabonaise Logistique » suivi de « Chef
   comptable » rend « Transgabonaise Logisti… ». C'est l'IDENTIFIANT PRINCIPAL du
   dossier qui saute — celui qu'on lit en premier, celui par lequel on reconnaît
   qu'on est au bon endroit —, au profit d'un qualificatif. Deux dossiers d'un
   même groupe portent justement des noms voisins qui ne se distinguent QUE sur
   leur fin : « SOTRACAM » et « SOTRACAM Distribution » se coupent au même
   endroit, donc au même mot.

   Le nom s'enroule donc dans sa propre boîte, sur deux rangs au plus, et le rôle
   reste à sa droite. La ligne ne se REPLIE pas (`flex-wrap` reste à `nowrap`) :
   un élément flex qui peut se reporter ne se comprime plus, si bien que le rôle
   descendait sous le nom même quand il y avait toute la place — mesuré sur trois
   des quatre premiers rangs. Le nom grandit d'une hauteur de texte quand il est
   long : un coût qui se paie sur ces lignes-là seulement, dans un panneau dont
   chaque entrée porte déjà trois étages.

   `align-items: flex-start` plutôt que `center` : sur deux rangs, une pastille
   de rôle centrée verticalement flotterait au milieu du nom qu'elle qualifie.
   Le plafond de deux rangs borne le cas pathologique (une raison sociale de
   cent caractères) sans couper aucun nom réel : au-delà, l'ellipse revient, mais
   après deux lignes entières et non après quatre mots. */
.et-societe-ligne { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.et-societe-nom {
    flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; overflow: hidden;
}

/* LE RÔLE PORTÉ DANS CE DOSSIER : c'est lui qui explique qu'un même écran soit
   modifiable ici et en lecture seule là.

   TROIS RANGS, PAS SEPT COULEURS (Services/RolesDossier.Rang). Sept rôles font
   sept teintes, donc une légende à apprendre pour un menu qu'on ouvre trois
   secondes ; ce qui se lit d'un coup d'œil, c'est ce qu'on PEUT dans le dossier.
     · administrer — l'encre bleue de contenu sur sa teinte (4,50:1 en clair,
       6,77:1 en sombre) : le seul rang qui ouvre les droits des autres ;
     · saisir      — aplat neutre, encre pleine (15,25:1) ;
     · lire        — contour seul, encre secondaire (4,94:1 sur blanc, 4,77:1 sur
       le survol de rangée, 4,65:1 sur la teinte). Le rang le plus léger est celui
       qui fait le moins, et cela se voit sans lire l'étiquette.
   AUCUNE COULEUR D'ÉTAT : --et-succes / --et-avertissement / --et-danger disent
   l'état d'une chose, et un rôle n'est pas un incident (docs/couleurs-en-dur.md). */
.et-societe-role {
    flex-shrink: 0; padding: 1px 8px; border-radius: var(--et-r-pill);
    font-size: 12px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
.et-societe-role.rang-admin   { background: var(--et-tint); color: var(--et-form-blue-encre); }
.et-societe-role.rang-saisie  { background: var(--et-rang); color: var(--et-ink); }
.et-societe-role.rang-lecture { background: transparent; border-color: var(--ph-border); color: var(--et-muted); }
/* SUR LA LIGNE OUVERTE, le rang d'administration reprend la surface : sa teinte est
   celle de la rangée retenue, et une pastille du même fond que son fond n'est plus
   une pastille. L'encre ne bouge pas — 5,04:1 sur blanc, au-dessus de ses 4,50:1
   sur la teinte. */
.et-societe-item.actif .et-societe-role.rang-admin { background: var(--et-surface); }
.et-societe-coche { flex-shrink: 0; color: var(--et-action); }

/* --- Ce qui permet de NE PAS SE TROMPER de dossier (passation Pilotage §1) --
   Deux dossiers d'un même groupe portent des raisons sociales voisines et se
   choisissent l'un pour l'autre ; leur code et leurs immatriculations, non.
   La ligne devient donc une colonne : le nom au premier rang, le NIF et le
   RCCM au second — même hiérarchie que partout ailleurs dans le produit. */
.et-societe-pastille {
    flex-shrink: 0; min-width: 42px; padding: 2px 7px;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
    text-align: center; letter-spacing: .02em;
    background: var(--et-rang); color: var(--crumb-current);
}
/* LA MÊME PASTILLE, SUR LA MARINE DE LA BARRE. Le fond du panneau est clair et le
   code y prend --et-rang ; sur la barre il n'y a pas de gris à poser — la charte
   n'y connaît que la famille des voiles blancs (--et-fond-marine, .16), plus
   marquée que l'aplat du bouton lui-même (-doux, .12), donc lisible comme une
   pastille et non comme un second bouton. La largeur minimale saute : la barre du
   haut est l'endroit le plus cher du produit, un code de trois lettres n'y paie
   pas la place de six. */
.et-societe-btn .et-societe-pastille.est-barre {
    min-width: 0; background: var(--et-fond-marine); color: var(--et-sur-marine);
}

.et-societe-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.et-societe-meta, .et-societe-activite, .et-societe-motif {
    font-size: 12px; color: var(--et-muted); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* LES DEUX LIGNES SECONDAIRES NE SE VALENT PAS, et rien ne le disait tant qu'elles
   partageaient jusqu'à la fonte. L'activité est de la PROSE — elle se reconnaît,
   c'est par elle qu'on retrouve un dossier dont le nom échappe ; les
   immatriculations sont des IDENTIFIANTS — elles se comparent caractère par
   caractère, ce que la mono fait et la proportionnelle défait (« 074512K » contre
   « 074S12K »). Même rang de couleur, deux gestes de lecture. */
.et-societe-meta { font-family: var(--et-font-mono); }
.et-societe-meta:empty { display: none; }
/* Le motif s'enroule, lui : c'est une phrase, et la tronquer en retirerait
   justement le geste qui lève le refus. */
.et-societe-motif { white-space: normal; font-style: italic; }
.et-societe-groupe {
    padding: 8px 14px 4px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted);
}
/* Le compte de ce que le groupe montre : même encre, graisse ordinaire. Il informe,
   il n'intitule pas — le mettre au même gras que le titre en ferait un second titre. */
.et-societe-compte { font-weight: 400; letter-spacing: 0; }

/* LA SEULE ZONE QUI DÉFILE. Le titre, la recherche et le pied du panneau restent
   posés — un cabinet de quarante dossiers ferait sinon partir le champ de recherche
   vers le haut au premier coup de molette, et le rappel « vos droits changent avec le
   dossier » ne serait jamais lu. Même découpe que le rail latéral et que le panneau
   de période.
   Deux bornes : 360 px sur un écran ordinaire — cinq lignes entières et la sixième
   coupée, qui dit qu'il y a une suite —, mais jamais plus de 60 % de la hauteur de la
   fenêtre, sans quoi le pied sortirait de l'écran sur un portable couché, le panneau
   étant ancré sous la barre. `contain` retient la roulette DANS la liste : sans lui,
   elle continue sur la page derrière une fois le bas atteint. */
.et-societe-liste {
    max-height: min(360px, 60vh); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
}
.et-societe-vide { padding: 10px 14px; font-size: 13px; color: var(--et-muted); }

/* La recherche, au-delà de six dossiers. */
.et-societe-rech {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 8px 6px; padding: 6px 10px;
    background: var(--et-surface-2); border: 1px solid var(--ph-border);
    color: var(--et-muted);
}
.et-societe-rech input {
    flex: 1 1 auto; min-width: 0; border: none; background: transparent;
    font-family: inherit; font-size: 13px; color: var(--crumb-current); outline: none;
}

/* SANS ACCÈS — visible, grimé, inerte. Le masquer ferait chercher longtemps un
   dossier qu'on sait exister ; le laisser cliquable ferait croire à une panne. */
.et-societe-item.est-inerte { cursor: default; opacity: .62; align-items: flex-start; }
.et-societe-item.est-inerte:hover { background: transparent; }
.et-societe-cadenas { flex-shrink: 0; color: var(--et-muted); margin-top: 2px; }

/* L'ÉTAT « ARCHIVÉ », DANS SES DEUX FONDS. Sur la marine de la barre du haut,
   la charte inverse sa paire habituelle (aplat teinté + encre claire) ; dans le
   panneau, qui est blanc, c'est la paire ordinaire fond pâle + encre foncée.
   Le même jeton aux deux endroits perdrait le contraste à l'un des deux. */
.et-societe-etat {
    flex-shrink: 0; padding: 1px 8px; border-radius: var(--et-r-pill);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.et-societe-btn .et-societe-etat.est-archive {
    background: var(--et-fond-marine-avertissement); color: var(--et-sur-marine-avertissement);
}
.et-societe-item .et-societe-etat.est-archive {
    background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
}

/* --- L'ATTENTE DE LA BASCULE ----------------------------------------------
   Le rechargement est une navigation forcée : le navigateur garde la page
   précédente à l'écran pendant que le serveur rend la suivante. Sans ce voile,
   on lit les chiffres du dossier QUITTÉ pendant l'aller-retour. */
.et-societe-bascule {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    background: var(--et-voile);
}
.et-societe-bascule-boite {
    display: flex; align-items: center; gap: 14px;
    max-width: 420px; padding: 18px 22px;
    background: var(--et-surface); color: var(--crumb-current);
    border: 1px solid var(--ph-border); box-shadow: var(--et-ombre-flottant);
}
.et-societe-bascule-txt { display: flex; flex-direction: column; gap: 3px; }
.et-societe-bascule-txt strong { font-size: 14px; }
.et-societe-bascule-txt span { font-size: 13px; color: var(--et-muted); }
.et-societe-pied {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px; padding: 8px 14px 6px;
    border-top: 1px solid var(--ph-border);
    font-size: 12px; color: var(--et-muted);
}
/* Sous 1360 px la barre cède le libellé, pas le contrôle — l'icône reste cliquable.
   (Le bouton porte de nouveau le CODE du dossier depuis que la pastille y est posée
   plus haut : c'est lui qui nomme le dossier ouvert quand le libellé s'en va, au
   palier de 640 px que la règle suivante rétablit.) */
@media (max-width: 1360px) { .et-societe-lbl { display: none; } }

/* *** MAIS UN SÉLECTEUR N'EST PAS UNE PILULE, ET LE SEUIL NE PEUT PAS ÊTRE LE MÊME ***
   La règle ci-dessus a été écrite pour des contrôles qui ANNONÇAIENT : y perdre le
   libellé laissait une icône, et l'information restait à un survol. Depuis que le
   dossier et la période se CHOISISSENT là, le libellé EST la réponse — « sur quel
   dossier, sur quel exercice suis-je ? » — et son absence laisse un bouton qui ne
   nomme plus rien, avec un chevron qui promet un choix qu'on ne peut pas situer.

   Mesuré à 1024 px : la barre est vide aux trois quarts et les deux libellés y
   tiennent sans serrer personne. Ils ne cèdent donc qu'au palier réellement contraint
   — 640 px, celui où le rail devient un tiroir (lot 01) et où la barre porte déjà sa
   poignée. Entre les deux, on lit ce qu'on a choisi. */
@media (min-width: 641px) and (max-width: 1360px) {
    .et-societe-lbl,
    .et-choix-btn .et-periode-lbl { display: inline; }
}

/* --- Sélecteur de contexte du module (exercice comptable, période de pointage) ----
   Le bouton EST la pilule de période (.et-periode) : même famille, même place,
   mêmes règles tactiles du lot 02 — il ne s'en distingue que par le chevron, qui
   annonce qu'on peut en changer. Le panneau, lui, est commun aux deux modules.

   POURQUOI UNE FAMILLE À PART DE .et-societe-* : le panneau de dossier liste des
   OBJETS (un code, un nom, un rôle), celui-ci liste des ÉTATS (ouvert, arrêté,
   fermé) et porte une grille de périodes. Les partager aurait fait d'une des deux
   listes une exception dans les règles de l'autre. */
.et-choix { position: relative; flex-shrink: 0; }
button.et-periode { border: none; font-family: inherit; cursor: pointer; }
button.et-periode.actif { background: var(--et-fond-marine-actif); }
.et-choix-chev { font-size: 12px; opacity: .8; }
.et-choix-fond { position: fixed; inset: 0; z-index: 39; }
/* 396 px ET NON 292 (2026-09-08) : à 292 px, aucun rang ne montrait sa période en
   entier. Le libellé d'une période est « Période du 01/09/2026 Au 30/09/2026 » — 36
   caractères, soit ~238 px à 13 px — et le rang lui ajoute ses deux gouttières de
   14 px, la pastille, deux écarts de 10 px, le mot d'état et la barre de défilement :
   ~360 px avant de couper. Les douze rangs se lisaient donc tous « Période du
   01/09/2026 Au … », c'est-à-dire la moitié qui ne distingue rien — c'est la borne de
   FIN qui différencie un mois civil d'une paie arrêtée au 25, et c'est elle qui
   tombait. Choisir dans une liste dont tous les rangs s'écrivent pareil suppose de
   compter les rangs.

   396 px et non davantage : le panneau de DOSSIER voisin est borné à 420 px pour ne
   pas déborder la moitié gauche de la barre sur un portable de 1280 px, et celui-ci
   n'a pas besoin de plus. C'est aussi la valeur que la règle de repli sous 560 px,
   plus bas, nomme déjà. Le min() n'est pas un palier — c'est la fenêtre qui borne,
   pour les largeurs entre 560 et 640 px où le panneau reste ancré sur son bouton.

   L'ellipse reste, comme garde : un découpage hebdomadaire porte des libellés plus
   longs encore. */
.et-choix-panneau {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
    width: min(396px, calc(100vw - 24px)); padding: 6px 0;
    background: var(--ph-bg); border: 1px solid var(--ph-border);
    box-shadow: var(--et-ombre-flottant); color: var(--crumb-current);
}
.et-choix-titre {
    padding: 6px 14px 6px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--et-muted);
}
/* La liste rend une ANNÉE entière (la rangée d'années est juste au-dessus), soit
   douze rangs d'ordinaire — mais cinquante-deux sur un découpage hebdomadaire.
   La hauteur borne donc toujours : un panneau qui dépasse la fenêtre n'a plus de
   pied, donc plus de lien vers l'écran des périodes. */
.et-choix-liste { max-height: 306px; overflow-y: auto; }
.et-choix-rang {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 14px; font-size: 13px; font-family: inherit; text-align: left;
    color: var(--crumb-current); background: transparent; border: none; cursor: pointer;
}
.et-choix-rang:hover { background: var(--row-hover); }
.et-choix-rang.est-actif { background: var(--et-tint); font-weight: 600; }
.et-choix-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* L'ÉTAT NE PREND PAS LA COULEUR DE L'ÉTAT : une couleur d'état ne s'écrit jamais
   en `color:` (charte 2026-09-03). Elle est portée par la pastille, qui est une
   marque ; le mot reste de l'encre secondaire. */
.et-choix-etat { flex-shrink: 0; font-size: 12px; color: var(--et-muted); }
.et-choix-pastille { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--et-inerte); }
.et-choix-pastille[data-etat="ouverte"] { background: var(--et-succes); }
.et-choix-pastille[data-etat="arretee"] { background: var(--et-avertissement-mark); }
.et-choix-pastille[data-etat="fermee"], .et-choix-pastille[data-etat="planifiee"] { background: var(--et-inerte); }
/* La rangée d'ANNÉES du sélecteur de période de pointage : elle filtre la liste
   qui la suit, elle ne retient rien. Elle revient à la ligne plutôt que de
   défiler — un dossier de dix ans tient en deux lignes, et une rangée qui défile
   cache ses crans les plus anciens, qui sont justement ceux qu'on vient chercher.

   MÊMES CASES QUE LA GRILLE DE PÉRIODES ci-dessous : deux jeux de petits boutons
   dans le même panneau, dessinés différemment, se liraient comme deux natures de
   contrôle. Seule la mise en page diffère — rangée ici, grille là. */
.et-choix-annees { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 12px 6px; }
.et-choix-annees button { min-width: 46px; }
/* L'année qui porte la période retenue. La marque prend `currentColor` et non une
   couleur écrite : la case est tantôt claire, tantôt bleue quand elle est celle
   qu'on feuillette, et l'encre suit dans les deux cas. */
.et-choix-annees button[data-retenue="oui"]::after {
    content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}

/* La grille des périodes : douze cases se voient d'un coup, douze lignes se lisent
   une par une (c'est l'argument de CPT-02, repris ici en petit). */
.et-choix-mois { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 2px 12px 6px; }
.et-choix-annees button,
.et-choix-mois button {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 5px 0; font-family: inherit; font-size: 12px; text-align: center;
    background: var(--et-surface-2); color: var(--crumb-current);
    border: 1px solid var(--ph-border); cursor: pointer;
}
.et-choix-annees button:hover,
.et-choix-mois button:hover { background: var(--row-hover); }
.et-choix-mois button[data-etat="arretee"] { color: var(--et-muted); border-style: dashed; }
.et-choix-mois button[data-etat="fermee"] { color: var(--et-muted); background: var(--et-neutre-bg); }
.et-choix-annees button.est-actif,
.et-choix-mois button.est-actif {
    background: var(--et-form-blue); color: var(--et-sur-aplat);
    border-color: var(--et-form-blue); font-weight: 600;
}
.et-choix-note {
    padding: 6px 14px 8px; font-size: 12px; line-height: 1.45; color: var(--et-muted);
}
.et-choix-lien {
    display: block; padding: 8px 14px 6px; border-top: 1px solid var(--ph-border);
    font-size: 12px; color: var(--et-lien); text-decoration: none;
}
.et-choix-lien:hover { text-decoration: underline; }

/* --- Les deux panneaux sur un écran étroit ---------------------------------
   Un panneau de 396 px ancré sur un bouton qui commence à 120 px déborde d'un
   écran de 390. Sous 560 px (palier retenu, docs/conventions-responsive.md) ils
   se posent donc sur la fenêtre plutôt que sur leur bouton : mêmes rangs, même
   contenu, seule l'ancre change. Géométrie seule — aucune couleur ici. */
@media (max-width: 560px) {
    .et-societe-panneau,
    .et-choix-panneau {
        position: fixed; left: 8px; right: 8px; top: 56px;
        width: auto; min-width: 0; max-width: none;
    }
}

/* --- Pilule de période ----------------------------------------------------
   Ce qu'elle évite : une correction ou une génération posée sur une période
   fermée, qui se découvrait à l'erreur serveur, APRÈS la saisie. */
.et-periode {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 5px 10px; background: var(--et-fond-marine-doux); color: var(--et-sur-marine);
    font-size: 13px; white-space: nowrap; text-decoration: none;
}
.et-periode:hover { background: var(--et-fond-marine-survol); color: var(--et-sur-marine); }
.et-periode-etat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 7px; border-radius: var(--et-r-pill); background: var(--et-sur-marine);
    font-size: 12px; font-weight: 600;
}
.et-periode-etat .pt { width: 6px; height: 6px; border-radius: 50%; }
/* Posée sur la pastille blanche de la barre marine : littérales à dessein,
   les jetons sombres n'ont pas cours sur ce fond-là.
   Le FOND de la pastille, lui, prend --et-sur-marine (2026-09-02) : c'est du
   blanc opaque posé sur la marine, et ce jeton est justement celui qui ne
   bascule pas au thème sombre. --et-surface aurait viré au bleu nuit sur une
   barre restée marine, ce que le commentaire ci-dessus met en garde d'écrire. */
.et-periode-etat.ouverte { color: var(--et-succes-ink); }
.et-periode-etat.ouverte .pt { background: var(--et-succes); }
.et-periode-etat.cloturee { color: var(--et-muted); }
.et-periode-etat.cloturee .pt { background: var(--et-inerte); }
/* La pilule en lecture seule cède son libellé sous 1360 px ; le SÉLECTEUR le garde
   jusqu'à 640 px — voir la note du bloc « Bascule de dossier » ci-dessus. */
@media (max-width: 1360px) { .et-periode-lbl { display: none; } }

/* --- Rail : trois zones, la liste seule défile ----------------------------
   L'ancien rail défilait d'un bloc : le champ de recherche et le pied
   partaient avec la liste. Ici seule la zone du milieu défile. */
.et-side {
    display: flex; flex-direction: column; min-height: 0;
    overflow: hidden; padding-bottom: 0;
}
.et-side-tete {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.et-side-liste { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 0 12px; }
.et-side-pied {
    flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px; background: var(--et-surface-2);
    border-top: 1px solid var(--et-hairline);
}
.et-side-pied .soc { font-size: 12px; font-weight: 600; color: var(--et-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-side-pied .ver { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bouton de repli : en TÊTE du rail, jamais en pied. Sous 640 px de haut un
   pied ancré passe sous la ligne de flottaison, et la sortie du rail d'icônes
   devient inatteignable sans faire défiler la page. */
.et-repli {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; background: var(--et-surface);
    /* --et-form-border et non --et-filet-fort : c'est le jeton des bordures de
       champ, et le seul des deux qui bascule en thème sombre. */
    border: 1px solid var(--et-form-border); border-radius: var(--et-r-btn);
    color: var(--et-form-blue-encre); cursor: pointer;
}
.et-repli:hover { background: var(--et-tint); }

/* Recherche du rail : champ à angles droits, comme tout champ de saisie de la
   charte. Elle quitte la barre du haut — elle cherche des ÉCRANS et des
   SALARIÉS, deux choses du module, pas du chrome. */
.et-side-rech { position: relative; flex: 1; min-width: 0; }
.et-side-rech .lp { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--et-faint); display: inline-flex; font-size: 13px; pointer-events: none; }
.et-side-rech input {
    width: 100%; height: 32px; padding: 0 8px 0 30px; font-family: inherit; font-size: 13px;
    color: var(--et-ink); background: var(--et-surface);
    border: 1px solid var(--et-form-border); border-radius: 0; outline: none;
}
.et-side-rech input:focus { border-color: var(--et-form-blue); }
/* La réserve du bouton d'effacement n'est prise que lorsqu'il existe. */
.et-side-rech.rempli input { padding-right: 28px; }
.et-side-rech .clr {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; background: transparent; border: none;
    color: var(--et-faint); cursor: pointer; font-size: 12px;
}

/* --- Intitulés de groupe -------------------------------------------------- */
.et-grouphdr {
    padding: 11px 12px 7px; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    color: var(--group-text);
    border-top: 1px solid transparent;   /* réservé à l'état replié */
}
.et-grouphdr:hover { color: var(--et-ink); }
/* Le groupe qui contient l'écran affiché passe au bleu : c'est le seul repère
   qui reste quand l'accordéon est refermé sur un autre groupe. */
.et-grouphdr.contient-actif { color: var(--group-text-active); }
.et-grouphdr .ico { display: inline-flex; align-items: center; font-size: 15px; color: inherit; }
.et-grouphdr .chev { font-size: 12px; opacity: .6; }

/* Titres non repliables : Favoris, Récents, Salariés, Écrans. */
.et-listhdr {
    display: flex; align-items: center; gap: 7px; padding: 11px 12px 7px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--group-text);
}
.et-listhdr .ico { display: inline-flex; align-items: center; font-size: 12px; color: var(--et-muted); }
.et-listhdr .ico.fav { color: var(--et-form-blue-encre); }

/* --- Rangées d'écran ------------------------------------------------------
   PAS D'ICÔNE SUR LA FEUILLE en état déployé : c'est le groupe qui la porte.
   Trente-neuf icônes en colonne ne distinguaient plus rien — cinq horloges,
   trois calendriers. Le retrait de 31 px tient l'alignement à leur place, et
   l'icône reparaît telle quelle dans le rail replié, où elle redevient le seul
   moyen de nommer l'écran. */
.et-navrow { align-items: stretch; }
.et-navrow.active { background: var(--item-active-bg); border-left-color: var(--et-form-blue); }
.et-navmain { position: relative; gap: 10px; padding: 7px 6px 7px 31px; min-height: 32px; font-weight: 400; }
.et-navrow.active .et-navmain { font-weight: 600; }
.et-navmain .ic { display: none; }
.et-navmain .lb { display: flex; flex-direction: column; gap: 1px; }
.et-navmain .sub { font-size: 12px; font-weight: 400; color: var(--et-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* L'étoile reste visible en permanence sur un favori posé, et n'apparaît
   au survol que sur les autres (opacité gérée par easytime-shell.css). */
.et-star { width: 30px; font-size: 12px; color: var(--et-inerte); }
.et-star.on { color: var(--et-form-blue-encre); }

/* Compteur d'attente : le rouge négatif de la charte, chiffres en mono. Il
   accroche l'œil parce qu'il appelle une ACTION, pas parce qu'il informe. */
.et-nav-badge {
    background: var(--et-danger); font-family: var(--et-font-mono);
    font-size: 12px; font-weight: 500; border-radius: var(--et-r-pill);
}
/* Total porté par un groupe REPLIÉ, perdu dès qu'il s'ouvre : le détail le dit
   mieux, ligne par ligne. */
.et-grouphdr .et-nav-badge { font-size: 12px; }
.et-grouphdr[aria-expanded="true"] .et-nav-badge { display: none; }

/* Point d'attente du rail replié : la pastille chiffrée n'y tient pas. */
.et-navmain .pt-attente { position: absolute; left: 9px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--et-danger); display: none; }

/* Passerelles de fin de liste (paramètre Connexions) : elles gardaient jusqu'ici
   leurs classes utilitaires Bootstrap posées à la main dans chaque layout. Le
   filet de séparation est repris ici pour qu'il suive les jetons de la charte. */
.et-side-passerelles { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--et-hairline); }
.appgrid[data-rail="true"] .et-side-passerelles { display: none; }

/* --- Ligne de salarié (résultats de recherche) ----------------------------
   Sur quarante écrans, ce qu'on cherche neuf fois sur dix est une personne. */
.et-pers { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-left: 3px solid transparent; min-height: 40px; text-decoration: none; }
.et-pers:hover { background: var(--row-hover); }
.et-pers .av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--et-navy-soft); color: var(--et-navy-ink); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.et-pers .nom { font-size: 13px; color: var(--et-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-pers .meta { font-size: 12px; color: var(--et-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-pers .meta .mat { font-family: var(--et-font-mono); }

/* --- Rail replié : 52 px, groupes et écrans distincts ---------------------
   Remplace l'ancien état [data-collapsed="true"] (64 px), où groupes et écrans
   se présentaient à l'identique : on croyait cliquer un écran, on dépliait un
   groupe. Ici le groupe porte un bandeau et un filet, l'écran reste en retrait
   sous une icône plus petite. */
.appgrid[data-rail="true"] { grid-template-columns: 52px 1fr; }
.appgrid[data-rail="true"] .et-side-rech,
.appgrid[data-rail="true"] .et-grouphdr span:not(.ico),
.appgrid[data-rail="true"] .et-grouphdr .chev,
.appgrid[data-rail="true"] .et-listhdr span:not(.ico),
.appgrid[data-rail="true"] .et-navmain .lb,
.appgrid[data-rail="true"] .et-star,
.appgrid[data-rail="true"] .et-nav-badge,
.appgrid[data-rail="true"] .et-pers .nom,
.appgrid[data-rail="true"] .et-pers .meta,
.appgrid[data-rail="true"] .et-side-pied .soc,
.appgrid[data-rail="true"] .et-side-pied .ver { display: none; }
.appgrid[data-rail="true"] .et-grouphdr { justify-content: center; background: var(--et-surface-2); border-top-color: var(--et-hairline); }
.appgrid[data-rail="true"] .et-listhdr { justify-content: center; }
.appgrid[data-rail="true"] .et-navmain { padding-left: 19px; }
.appgrid[data-rail="true"] .et-navmain .ic { display: inline-flex; font-size: 12px; }
.appgrid[data-rail="true"] .et-navmain .pt-attente { display: block; }
.appgrid[data-rail="true"] .et-side-tete { justify-content: center; padding: 8px 6px; }
.appgrid[data-rail="true"] .et-side-pied { padding: 8px 6px; }

/* --- Barre du haut : ce qui cède la place quand la largeur manque ---------
   Ordre de sacrifice : le libellé de l'écran d'accueil, puis le nom de la
   période, puis l'identité de l'utilisateur. Les trois boutons de commande ne
   cèdent jamais — ils n'ont pas de repli ailleurs. */
@media (max-width: 1240px) { .et-accueil-lbl { display: none; } }
@media (max-width: 1100px) { .et-user .n1, .et-user .n2 { display: none; } }

/* --- Le logo du client dans la barre du haut (LogoSociete.razor) -------------
   Il prend la place de l'icône du module — .shell-marque i ci-dessus — quand la
   société a déposé un logo (core.CompanyLogo). Sans logo, l'icône reste et cette
   règle ne sert jamais : la coquille des quinze modules est inchangée pour tout
   client qui n'en a pas déposé.

   22 PX, ET LA BARRE FAIT 44. La marque du module l'accompagne à 16,8 px ; un
   logo plus haut pousserait la barre, qui porte déjà le sélecteur de société, la
   pilule de période et les actions. 120 px de large laissent passer un bandeau
   sans écraser le nom du module derrière lui. */
.appgrid .et-topbar .shell-marque .shell-logo {
    max-height: 22px;
    max-width: 120px;
}