/* /Components/Desktop/CarteDeTache.razor.rz.scp.css */
/* La fiche flottante du panneau 3 -- variante << archify >>.

   L'ossature (fond, bordure, ombre, bouton de fermeture) vient de theme-archify.css, classe
   `.passeport`. Ce fichier ne pose que ce qui est propre a une TACHE : sa place sur la
   toile, sa teinte, et la mise en forme de ses champs.

   Ces regles portaient le prefixe `.carte-tache` du temps ou la carte du graphe etait le
   formulaire. Elle ne l'est plus : le noeud est un repere, tout le detail est ici. */

/* Ancree en haut a droite de la toile, jamais sous le curseur : elle ne suit pas le noeud,
   et se ferme sans rien deplacer. */
.fiche-tache[b-2nctn770qa] {
    top: var(--espace);
    right: var(--espace);
    border-left: 3px solid var(--teinte, var(--neutre));
}

.fiche-tache h2[b-2nctn770qa] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Les crans d'importance, du calme au vif. Memes melanges que le noeud : deux echelles
   differentes pour la meme donnee se liraient comme deux informations. */
.fiche-tache.teinte-imp1[b-2nctn770qa] { --teinte: var(--ok); }
.fiche-tache.teinte-imp2[b-2nctn770qa] { --teinte: color-mix(in oklab, var(--ok) 55%, var(--attention)); }
.fiche-tache.teinte-imp3[b-2nctn770qa] { --teinte: var(--attention); }
.fiche-tache.teinte-imp4[b-2nctn770qa] { --teinte: color-mix(in oklab, var(--attention) 55%, var(--alerte)); }
.fiche-tache.teinte-imp5[b-2nctn770qa] { --teinte: var(--alerte); }
.fiche-tache.teinte-imminent[b-2nctn770qa] { --teinte: color-mix(in oklab, var(--alerte) 70%, var(--attention)); }
.fiche-tache.teinte-retard[b-2nctn770qa]   { --teinte: var(--alerte); }
.fiche-tache.teinte-close[b-2nctn770qa]    { --teinte: var(--neutre); }






/* Une tache close reste lisible mais cesse de reclamer l'attention. L'opacite DOUBLE la
   pastille et l'interrupteur, elle ne porte pas l'information seule. */
.fiche-tache.cloturee[b-2nctn770qa] { opacity: 0.72; }







.fiche-tache .indicateur[b-2nctn770qa] {
    margin-left: auto;
    font-weight: 700;
    line-height: 1;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--fond-profond);
    flex: none;
}

.fiche-tache .indicateur.ok[b-2nctn770qa]        { color: var(--ok); }
.fiche-tache .indicateur.attention[b-2nctn770qa] { color: var(--attention); }
.fiche-tache .indicateur.alerte[b-2nctn770qa]    { color: var(--alerte); }

.fiche-tache .corps[b-2nctn770qa] {
    border-radius: 0 0 var(--rayon) var(--rayon);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem 0.6rem;
    overflow-y: auto;
    color: var(--texte);
    font-size: 0.85rem;
    /* Les champs se selectionnent et se saisissent : le user-select pose sur la carte pour
       le confort du glisser doit s'arreter ici. */
    user-select: text;
}

.fiche-tache .curseur label[b-2nctn770qa],
.fiche-tache .dates label[b-2nctn770qa] {
    display: block;
    color: var(--texte-doux);
    font-size: 0.78rem;
}

.fiche-tache .curseur .valeur[b-2nctn770qa] {
    color: var(--texte);
    /* Les deux curseurs se comparent d'une carte a l'autre : chiffres a chasse fixe. */
    font-variant-numeric: tabular-nums;
}

.fiche-tache .curseur input[type="range"][b-2nctn770qa] {
    width: 100%;
    accent-color: var(--accent);
}

.fiche-tache .dates[b-2nctn770qa] {
    display: flex;
    gap: 0.4rem;
}

.fiche-tache .dates label[b-2nctn770qa] { flex: 1; }

.fiche-tache .dates input[type="date"][b-2nctn770qa] {
    width: 100%;
    background: var(--fond);
    color: var(--texte);
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 0.2rem 0.3rem;
    font: inherit;
}

/* Ces applications se pilotent au clavier : le contour de focus n'est pas decoratif. */
.fiche-tache .corps :focus-visible[b-2nctn770qa] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .fiche-tache[b-2nctn770qa], .fiche-tache *[b-2nctn770qa] {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}










/* Entre le coin et la poignee : a un quart et aux trois quarts de chaque cote. */



@media (prefers-reduced-motion: reduce) {
}









/* Ascenseur discret plutot qu'absent : le masquer cacherait qu'il reste du contenu. */
.fiche-tache .corps[b-2nctn770qa] {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-defilement, var(--bord)) transparent;
}

.fiche-tache .corps[b-2nctn770qa]::-webkit-scrollbar { width: 6px; }
.fiche-tache .corps[b-2nctn770qa]::-webkit-scrollbar-track { background: transparent; }
.fiche-tache .corps[b-2nctn770qa]::-webkit-scrollbar-thumb {
    background: var(--bord);
    border-radius: 3px;
}

/* ---- Teinte de la banniere : importance, ou echeance quand elle presse ---- */

/* Aucune couleur litterale : les cinq crans sont des melanges des jetons de la charte, en
   oklab pour que le degrade traverse le vert-jaune-orange sans passer par le gris. Une
   valeur hexadecimale ecrite ici divergerait a la premiere retouche de la charte. */

/* L'echeance PRIME quand elle presse : une tache en retard doit se voir, meme peu
   importante. Au-dela de trois jours c'est l'importance qui parle, sinon le rouge finirait
   partout et ne distinguerait plus rien. */
.fiche-tache .banniere.teinte-retard[b-2nctn770qa]   { background: var(--alerte); }

/* Une tache close cesse de reclamer l'attention : sa banniere revient au neutre. */

/* Le chiffre DOUBLE la teinte : la couleur confirme l'importance, elle ne la porte jamais
   seule (charte du homelab, principe 1). */
.fiche-tache h2 .cran[b-2nctn770qa] {
    flex: none;
    min-width: 1.1rem;
    text-align: center;
    border-radius: 4px;
    background: var(--fond-profond);
    color: var(--texte);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    padding: 0 0.25rem;
}

/* ---- Rappel ---- */

.fiche-tache .rappel[b-2nctn770qa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
}

.fiche-tache .rappel > label[b-2nctn770qa] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--texte-doux);
    font-size: 0.78rem;
}

.fiche-tache .rappel input[type="datetime-local"][b-2nctn770qa] {
    background: var(--fond);
    color: var(--texte);
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 0.2rem 0.3rem;
    font: inherit;
}

.fiche-tache .rappel .transports[b-2nctn770qa] { display: flex; gap: 0.5rem; }
.fiche-tache .rappel .case[b-2nctn770qa] { display: flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; }

/* Une date de rappel sans transport : rien ne partira. Le mot le dit, la teinte le
   confirme -- l'inverse effacerait l'information au lieu de la porter. */
.fiche-tache .rappel .avertissement[b-2nctn770qa] {
    color: var(--attention);
    font-size: 0.72rem;
}


/* ---- Responsables ---- */

.fiche-tache .responsables[b-2nctn770qa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    /* min-width: 0 sur un enfant de colonne flex : sans lui, la ligne refuse de retrecir
       sous la largeur de son contenu et les pastilles debordaient PAR-DESSUS l'etiquette au
       lieu de passer a la ligne. Constate a l'ecran sur une carte de 300 px. */
    min-width: 0;
}

.fiche-tache .responsables .etiquette[b-2nctn770qa] {
    color: var(--texte-doux);
    font-size: 0.78rem;
    flex: none;
}

/* Les << bulles colorees >> de la specification : la selection se lit d'un coup d'oeil, et
   aria-pressed la porte aussi pour qui n'a pas la couleur.
   
   Nommees .bulle et NON .pastille : la charte du homelab reserve deja .pastille au point de
   statut, large de 9 px. Reutiliser ce nom faisait heriter cette largeur, et les bulles
   s'affichaient reduites a un carre de 18 px avec leur texte tronque -- sans qu'aucune de mes
   regles ne soit en cause. Constate a l'ecran. */
.fiche-tache .bulle[b-2nctn770qa] {
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: var(--fond);
    color: var(--texte-doux);
    padding: 0.1rem 0.5rem;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    /* flex: none AVANT tout le reste. Sans lui, le retrecissement flex ecrasait les
       pastilles a une vingtaine de pixels -- << ha.. >>, << yv.. >> -- au lieu de les faire
       passer a la ligne : un conteneur flex retrecit ses enfants avant de les envelopper.
       Constate a l'ecran. */
    flex: none;
    /* Un identifiant tres long est tronque plutot que de pousser la ligne : le nom complet
       reste dans l'infobulle, la pastille sert a reconnaitre, pas a lire. */
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fiche-tache .bulle.retenue[b-2nctn770qa] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fond-profond);
    font-weight: 600;
}

.fiche-tache .bulle:focus-visible[b-2nctn770qa] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* La ligne des destinataires suit celle des responsables, et doit se lire comme une PRECISION
   de celle-ci, pas comme une seconde liste independante : meme vocabulaire de bulles, un retrait
   qui la rattache visuellement a la ligne du dessus. */
.fiche-tache .prevenus[b-2nctn770qa] { margin-top: -0.2rem; }
.fiche-tache .prevenus .etiquette[b-2nctn770qa] { opacity: 0.85; }

/* Une bulle non retenue ici veut dire << cette personne ne recevra rien >>, ce qui est plus
   qu'un simple non-choix : elle s'efface franchement pour que l'ecart se voie d'un coup d'oeil. */
.fiche-tache .prevenus .bulle:not(.retenue)[b-2nctn770qa] { opacity: 0.45; }
.fiche-tache .prevenus .bulle:not(.retenue):hover[b-2nctn770qa] { opacity: 0.75; }
/* /Components/Desktop/GroupeSurLaToile.razor.rz.scp.css */
/* Le rectangle d'un groupe — ADR 0005.

   Il vit SOUS les cartes et sous les flèches : c'est un fond, pas un objet de premier plan.
   Son trait est franc mais sa surface reste presque transparente — un remplissage marqué
   ferait ressortir le contenant plus que le contenu, et c'est le contenu qui porte le sens.

   CSS isolé : ces règles n'atteignent que le balisage de CE composant. */

.groupe[b-0hjnm9uywa] {
    position: absolute;
    z-index: 0;
    border: 1px solid var(--teinte);
    border-radius: var(--rayon);
    background: color-mix(in oklab, var(--teinte) 7%, transparent);
    cursor: grab;
    transition: box-shadow 160ms ease, background-color 160ms ease;
}
.groupe.actif[b-0hjnm9uywa] {
    cursor: grabbing;
    box-shadow: 0 0 0 2px var(--teinte),
                0 0 26px color-mix(in oklab, var(--teinte) 45%, transparent);
}

/* À cheval sur le bord haut : le rectangle est vide par nature, et un nom posé à l'intérieur
   se confondrait avec les cartes qu'il encadre. */
.groupe .etiquette[b-0hjnm9uywa] {
    position: absolute;
    top: -0.75rem;
    left: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--fond-profond);
    border: 1px solid var(--teinte);
    color: var(--texte);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    white-space: nowrap;
}

.groupe .etiquette .compte[b-0hjnm9uywa] {
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}

/* Pas de classe de teinte : la couleur est choisie librement par l'utilisateur et posée en
   style en ligne sur l'élément (`--teinte`). Une table de classes ne pourrait couvrir qu'un
   nombre fixe de teintes, ce qui est précisément ce qu'on a retiré. La valeur de repli est le
   jeton neutre. */

/* --- Barres de redimensionnement --------------------------------------------

   Une barre couchée sur l'arête qu'elle déplace, pas un carré posé dessus. La forme porte le
   geste : on saisit un bord pour l'étirer, et le port de liaison, lui, est rond. Deux gestes
   différents ne portent jamais la même forme.

   Comme pour les ports, LA BOÎTE EST LA CIBLE : 44 × 20 px de vide, dont le `::before` ne
   peint que la barre centrale. Un halo posé en pseudo-élément ne participe pas au test de
   pointage — mesuré au pointeur, pas déduit. */
.groupe .poignee[b-0hjnm9uywa] {
    position: absolute;
    opacity: 0;
    transition: opacity 140ms ease;
}

.groupe .poignee[b-0hjnm9uywa]::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 999px;
    background: var(--teinte);
    transition: inset 140ms ease, filter 140ms ease;
}

.groupe:hover .poignee[b-0hjnm9uywa], .groupe.actif .poignee[b-0hjnm9uywa] { opacity: 0.85; }
.groupe .poignee:hover[b-0hjnm9uywa] { opacity: 1; }

/* La barre visée court sur toute la cible : elle dit ce qu'elle va faire avant qu'on tire. */
.groupe .poignee:hover[b-0hjnm9uywa]::before { filter: brightness(1.35); }
.groupe .poignee.haut:hover[b-0hjnm9uywa]::before,
.groupe .poignee.bas:hover[b-0hjnm9uywa]::before    { inset: 7px 0; }
.groupe .poignee.gauche:hover[b-0hjnm9uywa]::before,
.groupe .poignee.droite:hover[b-0hjnm9uywa]::before { inset: 0 7px; }

.groupe .poignee.haut[b-0hjnm9uywa],
.groupe .poignee.bas[b-0hjnm9uywa]    { width: 44px; height: 20px; left: calc(50% - 22px); cursor: ns-resize; }
.groupe .poignee.gauche[b-0hjnm9uywa],
.groupe .poignee.droite[b-0hjnm9uywa] { width: 20px; height: 44px; top: calc(50% - 22px);  cursor: ew-resize; }

.groupe .poignee.haut[b-0hjnm9uywa]   { top: -10px; }
.groupe .poignee.bas[b-0hjnm9uywa]    { bottom: -10px; }
.groupe .poignee.gauche[b-0hjnm9uywa] { left: -10px; }
.groupe .poignee.droite[b-0hjnm9uywa] { right: -10px; }

/* --- Ports de liaison --------------------------------------------------------

   Même anneau que sur un nœud : le vocabulaire est commun aux deux objets de la toile, et
   comme sur un nœud c'est la boîte de 20 px qui est la cible, le `::before` seulement sa
   peinture (voir NoeudDeTache.razor.css). Posés au quart du côté, ils ne rencontrent jamais
   la barre centrale. */
.groupe .port[b-0hjnm9uywa] {
    position: absolute;
    width: 20px; height: 20px;
    opacity: 0;
    transition: opacity 140ms ease;
    cursor: crosshair;
}
.groupe .port[b-0hjnm9uywa]::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--fond-profond);
    border: 2px solid var(--teinte);
    transition: background-color 140ms ease,
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.groupe:hover .port[b-0hjnm9uywa], .groupe.actif .port[b-0hjnm9uywa] { opacity: 1; }
.groupe .port:hover[b-0hjnm9uywa]::before { background: var(--teinte); transform: scale(1.3); }

.groupe .port.haut[b-0hjnm9uywa]   { top: -10px;    left: calc(25% - 10px); }
.groupe .port.bas[b-0hjnm9uywa]    { bottom: -10px; left: calc(75% - 10px); }
.groupe .port.gauche[b-0hjnm9uywa] { left: -10px;   top: calc(75% - 10px); }
.groupe .port.droite[b-0hjnm9uywa] { right: -10px;  top: calc(25% - 10px); }

@media (prefers-reduced-motion: reduce) {
    .groupe[b-0hjnm9uywa], .groupe .poignee[b-0hjnm9uywa], .groupe .port[b-0hjnm9uywa], .groupe .port[b-0hjnm9uywa]::before { transition-duration: 90ms; }
}
/* /Components/Desktop/NoeudDeTache.razor.rz.scp.css */
/* Le noeud compact. L'essentiel de son apparence vient de theme-archify.css (classe
   `.noeud-graphe`) ; ce fichier ne pose que ce qui est propre a une TACHE : la teinte selon
   l'importance, et la mise en forme des responsables.

   CSS isole : ces regles ne s'appliquent qu'au balisage de CE composant. Les mettre dans
   Home.razor.css ne les ferait atteindre aucun noeud -- constate deux fois dans ce projet. */

/* Largeur bornee : un intitule long ne doit pas etirer le noeud jusqu'a recouvrir ses
   voisins, et c'est la position relative des noeuds qui porte le sens du graphe. */
.noeud-graphe[b-uboo6in43i] {
    max-width: 20rem;
    z-index: 1;
}

.noeud-graphe .intitule[b-uboo6in43i] {
    /* Trois lignes au plus, puis une ellipse. Un intitule fleuve transformerait le repere
       en pave de texte -- exactement ce que la variante archify retire de la toile. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noeud-graphe.cloturee .intitule[b-uboo6in43i] { text-decoration: line-through; color: var(--texte-doux); }

.noeud-graphe .personne[b-uboo6in43i] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--bord);
    background: var(--fond-profond);
}
.noeud-graphe .personne.vide[b-uboo6in43i] { border-style: dashed; color: var(--neutre); }

/* --- Teintes ---------------------------------------------------------------

   L'importance va du calme au vif. Les crans intermediaires sont obtenus par melange
   plutot que par de nouveaux jetons : la charte n'a que trois couleurs de gravite, et en
   inventer deux autres les ferait diverger a la premiere retouche de la palette. */
.noeud-graphe.teinte-imp1[b-uboo6in43i] { --teinte: var(--ok); }
.noeud-graphe.teinte-imp2[b-uboo6in43i] { --teinte: color-mix(in oklab, var(--ok) 55%, var(--attention)); }
.noeud-graphe.teinte-imp3[b-uboo6in43i] { --teinte: var(--attention); }
.noeud-graphe.teinte-imp4[b-uboo6in43i] { --teinte: color-mix(in oklab, var(--attention) 55%, var(--alerte)); }
.noeud-graphe.teinte-imp5[b-uboo6in43i] { --teinte: var(--alerte); }

/* Une echeance depassee prime sur l'importance : elle dit quelque chose de plus urgent.
   Une tache close s'eteint -- elle reste lisible sans plus rien reclamer. */
.noeud-graphe.teinte-retard[b-uboo6in43i] { --teinte: var(--alerte); }
.noeud-graphe.teinte-close[b-uboo6in43i]  { --teinte: var(--neutre); opacity: 0.75; }

/* --- Ports de liaison ------------------------------------------------------

   Un anneau, pas une pastille pleine. Le disque prend le fond de la toile et la teinte ne
   tient que le contour : posé à cheval sur le bord d'une carte, il reste lisible du côté
   sombre comme du côté carte, ce qu'un aplat de la même teinte que la bordure ne faisait pas
   — huit taches de la couleur du cadre se lisaient comme de la décoration.

   La forme dit le geste : rond = relier. La barre d'un groupe redimensionne.

   LA BOÎTE EST LA CIBLE, L'ANNEAU N'EST QUE SA PEINTURE. Un halo posé en `::before` ne
   participe PAS au test de pointage — mesuré au pointeur réel : 3 px hors du disque, ni le
   port ni la carte ne sont survolés, c'est la ligne de sélection du lien voisin qui prend
   l'événement. Élargir le port par un pseudo-élément donnait donc une cible imaginaire.
   Le port fait 20 px de vide, et son `::before` peint les 12 px visibles au centre.

   20 px et pas 44 : le nœud entier EST la poignée de déplacement, et la cible mord déjà de
   10 px sur sa surface. Plus large, un glisser près du bord tirerait un lien au lieu de
   bouger la carte. C'est la seule dérogation à la cible de 44 px, et elle est mesurée. */
.noeud-graphe .port[b-uboo6in43i] {
    position: absolute;
    width: 20px; height: 20px;
    opacity: 0;
    transition: opacity 140ms ease;
    cursor: crosshair;
}

.noeud-graphe .port[b-uboo6in43i]::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--fond-profond);
    border: 2px solid var(--teinte);
    transition: background-color 140ms ease,
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Au repos ils n'existent pas ; la carte survolée ou sélectionnée les montre. Une carte
   sélectionnée garde donc ses ports visibles sans qu'on ait à la survoler. */
.noeud-graphe:hover .port[b-uboo6in43i],
.noeud-graphe.actif .port[b-uboo6in43i] { opacity: 1; }

/* Le port visé se remplit : l'anneau devient disque. C'est le seul moment où la teinte est
   pleine, et il dit « c'est d'ici que part le trait ». */
.noeud-graphe .port:hover[b-uboo6in43i]::before {
    background: var(--teinte);
    transform: scale(1.3);
}

.noeud-graphe .port.haut[b-uboo6in43i]   { top: -10px;    left: calc(50% - 10px); }
.noeud-graphe .port.bas[b-uboo6in43i]    { bottom: -10px; left: calc(50% - 10px); }
.noeud-graphe .port.gauche[b-uboo6in43i] { left: -10px;   top: calc(50% - 10px); }
.noeud-graphe .port.droite[b-uboo6in43i] { right: -10px;  top: calc(50% - 10px); }

@media (prefers-reduced-motion: reduce) {
    .noeud-graphe .port[b-uboo6in43i], .noeud-graphe .port[b-uboo6in43i]::before { transition-duration: 90ms; }
}
/* /Components/Desktop/SelecteurDeCouleur.razor.rz.scp.css */
/* Le phylactère de choix de couleur.

   Il flotte SOUS le champ qui l'ouvre, avec la petite pointe qui le rattache — d'où son nom.
   Positionné en absolu par rapport au champ, il ne pousse rien : la fiche garde sa hauteur,
   et le reste ne saute pas à l'ouverture. */

.phylactere[b-pvwtm577r0] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.6rem);
    left: 0;
    width: 17rem;
    padding: 0.7rem 0.8rem;
    background: var(--fond-profond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: 0 16px 40px color-mix(in oklab, var(--fond-profond) 85%, transparent);
}

/* La pointe : deux carrés tournés, l'un pour le fond, l'autre pour le liseré. Un seul
   laisserait apparaître la bordure en travers du phylactère. */
.phylactere[b-pvwtm577r0]::before,
.phylactere[b-pvwtm577r0]::after {
    content: "";
    position: absolute;
    top: -6px; left: 1.1rem;
    width: 10px; height: 10px;
    transform: rotate(45deg);
}
.phylactere[b-pvwtm577r0]::before { background: var(--bord); }
.phylactere[b-pvwtm577r0]::after  { background: var(--fond-profond); top: -5px; }

.phylactere .titre-bloc[b-pvwtm577r0] {
    margin: 0 0 0.45rem;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--texte-doux);
}

/* --- Pastilles ------------------------------------------------------------- */

.phylactere .pastilles[b-pvwtm577r0] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.phylactere .pastille[b-pvwtm577r0] {
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--bord);
    cursor: pointer;
    padding: 0;
}
/* Le contour épais dit laquelle est retenue. La couleur ne peut pas le dire elle-même :
   c'est justement elle qu'on est en train de comparer. */
.phylactere .pastille.retenue[b-pvwtm577r0] {
    box-shadow: 0 0 0 2px var(--fond-profond), 0 0 0 4px var(--texte);
}
.phylactere .pastille:focus-visible[b-pvwtm577r0] { outline: 2px solid var(--accent); outline-offset: 2px; }

.phylactere .pastille.aucune[b-pvwtm577r0] {
    background: var(--fond);
    color: var(--texte-doux);
    font-size: 0.85rem; line-height: 1;
}

/* --- Code et roue ----------------------------------------------------------- */

.phylactere .entrees[b-pvwtm577r0] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: end;
    margin-top: 0.8rem;
}
.phylactere .entrees label[b-pvwtm577r0] { display: grid; gap: 0.2rem; }
.phylactere .entrees span[b-pvwtm577r0] { color: var(--texte-doux); font-size: 0.75rem; }

.phylactere input[type="text"][b-pvwtm577r0] {
    width: 100%;
    padding: 0.3rem 0.45rem;
    border-radius: calc(var(--rayon) - 4px);
    border: 1px solid var(--bord);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

/* La roue est le sélecteur natif : sur macOS il ouvre le panneau système, avec roue,
   curseurs et pipette. Aucune bibliothèque à charger ni à maintenir, et c'est l'outil que
   l'utilisateur connaît déjà. Seule sa vignette est habillée. */
.phylactere input[type="color"][b-pvwtm577r0] {
    width: 2.6rem; height: 2rem;
    padding: 2px;
    border: 1px solid var(--bord);
    border-radius: calc(var(--rayon) - 4px);
    background: var(--fond);
    cursor: pointer;
}

.phylactere .message[b-pvwtm577r0] { font-size: 0.8rem; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-fv1g5ue70m] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-fv1g5ue70m] {
    flex: 1;
}

.sidebar[b-fv1g5ue70m] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-fv1g5ue70m] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-fv1g5ue70m]  a, .top-row[b-fv1g5ue70m]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-fv1g5ue70m]  a:hover, .top-row[b-fv1g5ue70m]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-fv1g5ue70m]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-fv1g5ue70m] {
        justify-content: space-between;
    }

    .top-row[b-fv1g5ue70m]  a, .top-row[b-fv1g5ue70m]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-fv1g5ue70m] {
        flex-direction: row;
    }

    .sidebar[b-fv1g5ue70m] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-fv1g5ue70m] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-fv1g5ue70m]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-fv1g5ue70m], article[b-fv1g5ue70m] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-fv1g5ue70m] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-fv1g5ue70m] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-vbll5uxe5a] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-vbll5uxe5a] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-vbll5uxe5a] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-vbll5uxe5a] {
    font-size: 1.1rem;
}

.bi[b-vbll5uxe5a] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-vbll5uxe5a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-vbll5uxe5a] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-vbll5uxe5a] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-vbll5uxe5a] {
        padding-bottom: 1rem;
    }

    .nav-item[b-vbll5uxe5a]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-vbll5uxe5a]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-vbll5uxe5a]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-vbll5uxe5a] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-vbll5uxe5a] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-vbll5uxe5a] {
        display: none;
    }

    .nav-scrollable[b-vbll5uxe5a] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* La modale de reconnexion.

   C'est le SEUL ecran qu'on rencontre au pire moment : l'ADR 0001 dit que le circuit meurt a
   la mise en veille du poste, et c'est cette boite qui apparait alors. Elle est restee celle du
   modele -- fond blanc, boutons #6b9ed2, anneaux #0087ff -- soit un aplat clair jete sur une
   table sombre, dans une langue visuelle qui n'appartient a aucun systeme. Elle prend ici les
   jetons de la charte, comme tout le reste.

   Les identifiants et les classes viennent du script de reconnexion de Blazor : ils se citent,
   ils ne se renomment pas. */

.components-reconnect-first-attempt-visible[b-gr0pqio7kp],
.components-reconnect-repeated-attempt-visible[b-gr0pqio7kp],
.components-reconnect-failed-visible[b-gr0pqio7kp],
.components-pause-visible[b-gr0pqio7kp],
.components-resume-failed-visible[b-gr0pqio7kp],
.components-rejoining-animation[b-gr0pqio7kp] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-retrying[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-failed[b-gr0pqio7kp],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-gr0pqio7kp] {
    display: block;
}

/* --- La boite --------------------------------------------------------------- */

#components-reconnect-modal[b-gr0pqio7kp] {
    width: min(23rem, calc(100vw - 2rem));
    margin: 22vh auto;
    padding: 1.6rem 1.5rem 1.4rem;
    /* `!important`, et il n'est pas decoratif : il repond a un `!important` de MudBlazor.
       La bibliotheque pose `background-color: var(--mud-palette-background) !important` sur cet
       identifiant precis. Sans cette reponse, le fond de la charte ne s'appliquait pas
       PENDANT QUE la bordure et le texte, eux, passaient : la modale paraissait presque juste.
       L'ordre des feuilles n'y peut rien, un `!important` gagne quelle que soit sa position.
       Pire ailleurs : `--mud-palette-background` n'est definie que par MudThemeProvider, qui
       vit dans la page interactive. Sur toute page qui n'en porte pas, la declaration devient
       invalide et la boite retombe sur le blanc du navigateur. */
    background: var(--fond-profond) !important;
    color: var(--texte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    /* Une ombre portee, pas un halo : un decalage ET un flou doux. Une ombre sans decalage
       n'est pas de la profondeur, c'est de la decoration. */
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-gr0pqio7kp 0.4s both;
}

#components-reconnect-modal[open][b-gr0pqio7kp] {
    animation: components-reconnect-modal-slideUp-b-gr0pqio7kp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
               components-reconnect-modal-fadeInOpacity-b-gr0pqio7kp 0.4s ease-out 0.25s;
    animation-fill-mode: both;
}

/* Le voile. `::backdrop` n'herite pas des variables de la boite sur tous les moteurs : la
   valeur est ecrite en clair ICI, et nulle part ailleurs. C'est --fond-profond a 78 %. */
#components-reconnect-modal[b-gr0pqio7kp]::backdrop {
    background-color: rgba(24, 24, 37, 0.78);
    backdrop-filter: blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-gr0pqio7kp 0.4s ease-out;
    opacity: 1;
}

.components-reconnect-container[b-gr0pqio7kp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

#components-reconnect-modal p[b-gr0pqio7kp] {
    margin: 0;
    text-align: center;
    line-height: 1.5;
    color: var(--texte-doux);
    /* Sans equilibrage, << Nouvel essai dans / 7 s. >> renvoyait la valeur seule a la ligne,
       separee de la phrase qu'elle complete. */
    text-wrap: balance;
}

/* Le compte a rebours change chaque seconde : sans chasse fixe, la phrase respire d'un pixel
   a chaque tic. C'est la regle de la chasse fixe de la charte, et c'est ici qu'elle se voit. */
#components-seconds-to-next-attempt[b-gr0pqio7kp] {
    font-variant-numeric: tabular-nums;
    color: var(--texte);
    font-weight: 600;
}

/* L'echec se dit ET se teinte -- la couleur double le mot, elle ne le remplace pas.

   Le selecteur vise `p`, et c'est indispensable : le BOUTON porte lui aussi la classe d'etat
   (c'est ainsi que le script de Blazor le montre). Sans cette restriction, il heritait du rouge
   d'alerte par-dessus son fond bleu -- un libelle illisible, constate a l'ecran. */
#components-reconnect-modal p.components-reconnect-failed-visible[b-gr0pqio7kp],
#components-reconnect-modal p.components-resume-failed-visible[b-gr0pqio7kp] {
    color: var(--alerte);
}

/* --- Les boutons ------------------------------------------------------------ */

/* Reprendre la main est LA seule action de cet ecran : elle porte donc le fond plein de la
   charte. La cible de 44 px s'applique sans derogation -- rien ici ne se dispute la surface. */
#components-reconnect-modal button[b-gr0pqio7kp] {
    min-height: 44px;
    padding: 0.5rem 1.4rem;
    border: 1px solid transparent;
    border-radius: calc(var(--rayon) - 4px);
    background: var(--accent);
    color: var(--fond);
    font: inherit;
    font-weight: 600;
    /* Contredit MudBlazor, qui met CE bouton en capitales espacees. Ce n'est pas le
       vocabulaire de la charte, dont les boutons sont en casse normale -- et ne rien declarer
       laissait passer le style de la bibliotheque sans que rien ne le signale. */
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: filter 140ms ease;
}

#components-reconnect-modal button:hover[b-gr0pqio7kp]  { filter: brightness(1.1); }
#components-reconnect-modal button:active[b-gr0pqio7kp] { filter: brightness(0.92); }
#components-reconnect-modal button:focus-visible[b-gr0pqio7kp] {
    outline: 2px solid var(--texte);
    outline-offset: 2px;
}

/* --- L'attente -------------------------------------------------------------- */

/* Deux anneaux qui s'ouvrent, l'un en retard sur l'autre. C'est la seule chose qui bouge sur
   cet ecran, et elle dit qu'on attend le reseau -- pas que l'application travaille. */
.components-rejoining-animation[b-gr0pqio7kp] {
    position: relative;
    width: 56px;
    height: 56px;
}

.components-rejoining-animation div[b-gr0pqio7kp] {
    position: absolute;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 1;
    animation: components-rejoining-animation-b-gr0pqio7kp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-gr0pqio7kp] { animation-delay: -0.5s; }

@keyframes components-rejoining-animation-b-gr0pqio7kp {
    0%, 4.9% { top: 28px; left: 28px; width: 0; height: 0; opacity: 0; }
    5%       { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
    100%     { top: 0; left: 0; width: 56px; height: 56px; opacity: 0; }
}

@keyframes components-reconnect-modal-slideUp-b-gr0pqio7kp {
    0%   { transform: translateY(18px) scale(0.97); }
    100% { transform: translateY(0); }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-gr0pqio7kp  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes components-reconnect-modal-fadeOutOpacity-b-gr0pqio7kp { 0% { opacity: 1; } 100% { opacity: 0; } }

/* La charte l'exige, et ici plus qu'ailleurs : cet ecran arrive sans qu'on l'ait demande.
   Les anneaux gardent un battement -- les supprimer laisserait un ecran fige, qui se lit comme
   une application bloquee au moment precis ou il faut dire qu'on attend. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-gr0pqio7kp],
    #components-reconnect-modal[open][b-gr0pqio7kp],
    #components-reconnect-modal[b-gr0pqio7kp]::backdrop {
        animation-duration: 0.01ms;
        animation-delay: 0s;
    }

    #components-reconnect-modal[open][b-gr0pqio7kp] { opacity: 1; }

    .components-rejoining-animation div[b-gr0pqio7kp] {
        animation: components-rejoining-pulsation-b-gr0pqio7kp 1.8s ease-in-out infinite;
        top: 8px; left: 8px; width: 40px; height: 40px;
    }
    .components-rejoining-animation div:nth-child(2)[b-gr0pqio7kp] { display: none; }
}

@keyframes components-rejoining-pulsation-b-gr0pqio7kp {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Ossature des quatre panneaux de la specification.

   Aucune couleur litterale ici : les teintes viennent toutes des jetons de
   wwwroot/css/theme-homelab.css, qui est la seule autorite sur la palette. Une valeur
   ecrite en dur ici divergerait a la premiere retouche de la charte, sans que rien ne le
   signale. */

.bureau[b-6bq8j6ia3y] {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    /* dvh et non vh : sur mobile, vh compte la barre d'adresse retractee et le pied de
       page passe alors sous le bord de l'ecran. */
    height: 100dvh;
    padding: 0.75rem;
    box-sizing: border-box;
    background: var(--fond-profond);
}

.panneau[b-6bq8j6ia3y] {
    background: var(--fond-eleve);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 0.75rem 1rem;
    min-width: 0;
}

.panneau-titre[b-6bq8j6ia3y],
.panneau-raccourcis[b-6bq8j6ia3y] { grid-column: 1 / -1; }

.panneau-titre[b-6bq8j6ia3y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.panneau-titre .marque[b-6bq8j6ia3y] { margin: 0; font-size: 1.15rem; }
.panneau-titre .sous-titre[b-6bq8j6ia3y] { color: var(--texte-doux); }

.date-du-jour[b-6bq8j6ia3y] {
    margin-left: auto;
    color: var(--texte-doux);
    /* Les dates se comparent d'un jour a l'autre : chiffres a chasse fixe. */
    font-variant-numeric: tabular-nums;
}

.deconnexion[b-6bq8j6ia3y] { margin: 0; }

.panneau-arbre[b-6bq8j6ia3y],
.panneau-editeur[b-6bq8j6ia3y] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tete-panneau[b-6bq8j6ia3y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tete-panneau h2[b-6bq8j6ia3y] { margin: 0; font-size: 0.95rem; color: var(--texte-doux); }
/* flex-wrap : sans lui, un bouton de plus sort du panneau sans que rien ne le signale --
   la barre ne defile pas, elle se contente de deborder sous un overflow: hidden. */
.tete-panneau .actions[b-6bq8j6ia3y] { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.arbre[b-6bq8j6ia3y] {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    overflow-y: auto;
    flex: 1;
    border-radius: calc(var(--rayon) - 4px);
}

/* La specification pilote cette application au clavier : le contour de focus n'est pas
   decoratif, c'est le seul indice de l'endroit ou les touches vont agir. */
.arbre:focus-visible[b-6bq8j6ia3y] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.noeud[b-6bq8j6ia3y] {
    display: flex;
    /* La ligne se clique : le curseur doit le dire. */
    cursor: pointer;
    align-items: baseline;
    gap: 0.4rem;
    /* L'indentation vient de --profondeur, pose par le serveur sur chaque ligne : une
       imbrication de <ul> obligerait le module JS a remonter le DOM pour connaitre la
       profondeur, alors qu'elle est connue a la construction de l'arbre. */
    padding: 0.25rem 0.5rem 0.25rem calc(var(--profondeur) * 1.15rem + 0.4rem);
    border-radius: calc(var(--rayon) - 4px);
}

.noeud[hidden][b-6bq8j6ia3y] { display: none; }

.chevron[b-6bq8j6ia3y] {
    width: 1ch;
    color: var(--texte-doux);
    flex: none;
}

.intitule[b-6bq8j6ia3y] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.date[b-6bq8j6ia3y] {
    margin-left: auto;
    color: var(--texte-doux);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* La selection double le marqueur ARIA aria-selected, elle ne le remplace pas : la couleur
   confirme, elle ne porte jamais l'information seule. */
.noeud.selectionne[b-6bq8j6ia3y] {
    background: var(--fond);
    box-shadow: inset 3px 0 0 var(--accent);
}

.panneau-editeur[b-6bq8j6ia3y] {
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Repere des fiches flottantes. Sans cette position, elles se caleraient sur la toile --
       qui defile -- ou sur la page entiere. */
    position: relative;
}

/* Le pied de page ne porte PAS la classe .raccourcis de la charte, et c'est deliberé :
   celle-ci est une barre de page en position: fixed, faite pour flotter au-dessus d'un
   contenu qui defile. Ici le panneau 4 est une cellule de la grille. Posee dessus, elle le
   sortait du flux : la troisieme rangee s'effondrait a 0 px, le 1fr du milieu prenait toute
   la hauteur, et la barre se dessinait par-dessus les panneaux 2 et 3 sur 21 px. On reprend
   donc ses deux seules autres declarations plutot que de neutraliser sa position. */
.panneau-raccourcis[b-6bq8j6ia3y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    align-items: baseline;
    color: var(--texte-doux);
    font-size: 0.85rem;
}

/* Le panneau 4 annonce ce qui est accessible : il ne doit donc nommer que des touches que
   le clavier present peut produire. Les claviers Apple n'ont pas de touche Ins -- l'annoncer
   sur un Mac promet une touche qui n'existe pas, et c'est ce qui a ete signale. L'attribut
   est pose par App.razor avant le premier rendu. S'il manque (JS desactive), les deux
   variantes s'affichent : degrade, jamais faux. */
[data-clavier="apple"] .si-pc[b-6bq8j6ia3y] { display: none; }
[data-clavier="pc"] .si-apple[b-6bq8j6ia3y] { display: none; }

@media (prefers-reduced-motion: reduce) {
    /* Le mouvement qu'on n'a pas choisi peut provoquer un vrai malaise. Le systeme sait
       deja qui l'a refuse. */
    .bureau *[b-6bq8j6ia3y], .bureau *[b-6bq8j6ia3y]::before, .bureau *[b-6bq8j6ia3y]::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---- Panneau 3 : la toile et les cartes ---- */

/* Barre d'outils de la toile. Au-dessus d'elle et non dedans : posee dans la toile, elle
   defilerait avec le graphe et s'en irait au premier deplacement. */
.outils-toile[b-6bq8j6ia3y] { display: flex; justify-content: flex-end; gap: 0.4rem; margin-bottom: 0.4rem; }
.outils-toile .bouton[b-6bq8j6ia3y] { display: inline-flex; align-items: center; gap: 0.35rem; }

.toile[b-6bq8j6ia3y] {
    position: relative;
    flex: 1;
    overflow: auto;
    /* Repere de positionnement des cartes. Leurs coordonnees sont celles de CETTE boite,
       pas celles du viewport : le module JS lit style.left/top et non
       getBoundingClientRect, qui deviendrait faux des que la toile defile. */
    min-height: 0;
    /* Ni fond ni bordure ici : c'est theme-archify.css qui peint la toile et son
       quadrillage. Reposer un `background` a plat l'effacerait -- le quadrillage est une
       image de fond, et la propriete raccourcie la remet a none sans rien signaler. */
}

.fleches[b-6bq8j6ia3y] {
    position: absolute;
    inset: 0;
    /* Les fleches passent SOUS les cartes et ne captent aucun clic : sans cela, le SVG
       recouvrirait la toile et aucune carte ne pourrait plus etre saisie. */
    pointer-events: none;
    z-index: 0;
}

/* ::deep est INDISPENSABLE ici, et son absence ne produit aucune erreur.

   Le CSS isole de Blazor reecrit `.fleche` en `.fleche[b-xxxxx]`, et les <line> que le
   module JS cree par innerHTML ne portent pas cet attribut de portee. La regle ne
   s'appliquait donc a rien : un trait SVG sans `stroke` est simplement invisible, sans
   avertissement ni console. Les fleches etaient bien tracees, aux bonnes coordonnees, et
   ne se voyaient pas.

   ::deep deplace l'attribut sur l'ancetre -- `.fleches[b-xxxxx] .fleche` -- et retrouve
   ainsi les noeuds construits par le module. Constate au banc. */
.fleches[b-6bq8j6ia3y]  .fleche {
    stroke: var(--neutre);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}

/* Le trait plein dit la dependance BLOQUANTE -- celle qui empeche une cloture. La forme
   double le titre porte par le <title> du SVG, elle ne le remplace pas. */
.fleches[b-6bq8j6ia3y]  .fleche.bloquante {
    stroke: var(--attention);
    stroke-width: 2;
    stroke-dasharray: none;
}

/* Aucun trajet propre n'a ete trouve : le trait est rendu quand meme, et se signale.
   Ne rien tracer se lirait comme une dependance absente -- une erreur plus couteuse qu'un
   trait imparfait qui s'annonce. */
.fleches[b-6bq8j6ia3y]  .fleche.contrainte {
    stroke: var(--alerte);
    stroke-dasharray: 2 4;
}

.fleches[b-6bq8j6ia3y]  marker path { fill: var(--neutre); }

/* Les regles de la carte vivent dans Components/Desktop/CarteDeTache.razor.css.

   Le CSS isole de Blazor est PAR COMPOSANT : depuis que la carte est un composant a part,
   des regles ecrites ici ne l'atteindraient plus. Elles ne produiraient aucune erreur --
   simplement une carte sans style, et on chercherait la cause dans le balisage. */

/* La page desktop dessine sa propre ossature : le panneau 3 n'est plus centre comme
   l'etait son emplacement reserve. */
.panneau-editeur[b-6bq8j6ia3y] { justify-content: flex-start; align-items: stretch; text-align: left; }

/* ---- Zone de prise et etats du trait ---- */

/* Le SVG est transparent au pointeur, mais CETTE polyligne le capte : cliquer un trait de
   2 px serait une epreuve d'adresse. Large, invisible, et seule cliquable. */
.fleches[b-6bq8j6ia3y]  .prise {
    stroke: transparent;
    stroke-width: 14;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}

.fleches[b-6bq8j6ia3y]  .fleche.selectionnee {
    /* Halo FRANC, du meme ordre que celui des cartes : la selection d'un lien doit se voir
       aussi nettement que celle d'un noeud, sans quoi on cherche laquelle des fleches a
       ouvert la fiche. Il double la fiche flottante -- la selection ne repose pas sur la
       seule couleur du trait. */
    filter: drop-shadow(0 0 3px var(--halo)) drop-shadow(0 0 10px var(--halo));
}

/* Le trait tire depuis un losange, avant relachement. */
.fleches[b-6bq8j6ia3y]  .fleche.provisoire {
    stroke: var(--halo);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    fill: none;
}

/* ---- Fiche flottante d'un groupe ----

   En haut a GAUCHE : la fiche d'une tache occupe le haut a droite et celle d'un lien le bas.
   Les trois peuvent etre ouvertes ensemble, et se marcher dessus les rendrait inutilisables. */

.fiche-groupe[b-6bq8j6ia3y] {
    top: var(--espace);
    left: var(--espace);
    border-left: 3px solid var(--neutre);
    /* Ni ascenseur ni rognage : le phylactere de couleur est positionne EN ABSOLU dans cette
       fiche, et l'`overflow: auto` de .passeport le coupait net -- la roue et le message
       d'erreur disparaissaient sous le bord. Constate a l'ecran. Le contenu d'une fiche de
       groupe tient de toute facon sans defiler. */
    max-height: none;
    overflow: visible;
}

/* Le nom s'edite en place : ouvrir une fiche pour y trouver un champ en lecture seule, puis
   devoir chercher ou renommer, serait un detour pour la seule donnee que porte un groupe. */
.fiche-groupe .nom[b-6bq8j6ia3y] {
    width: 100%;
    padding: 0.2rem 0.4rem;
    border: 1px solid transparent;
    border-radius: calc(var(--rayon) - 4px);
    background: transparent;
    color: var(--texte);
    font: inherit;
}
.fiche-groupe .nom:hover[b-6bq8j6ia3y] { border-color: var(--bord); }
.fiche-groupe .nom:focus[b-6bq8j6ia3y] { border-color: var(--accent); background: var(--fond-profond); outline: none; }

/* Repère du phylactère : il se positionne par rapport à CE bloc, pas à la fiche entière. */
.fiche-groupe .couleur[b-6bq8j6ia3y] { position: relative; }

/* L'aperçu montre la couleur ET l'écrit. La pastille seule ne dirait rien à qui ne distingue
   pas la teinte, et rien du tout quand aucune couleur n'est choisie. */
.fiche-groupe .apercu[b-6bq8j6ia3y] {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--bord);
    border-radius: calc(var(--rayon) - 4px);
    color: var(--texte);
    cursor: pointer;
    font: inherit; font-size: 0.85rem;
    /* Le texte reste lisible sur n'importe quelle teinte choisie : il porte son propre fond
       plutot que de parier sur le contraste d'une couleur qu'on ne connait pas a l'avance. */
    text-shadow: 0 1px 2px var(--fond-profond);
}
.fiche-groupe .apercu:hover[b-6bq8j6ia3y] { border-color: var(--accent); }
.fiche-groupe select[b-6bq8j6ia3y] {
    padding: 0.25rem 0.4rem;
    border-radius: calc(var(--rayon) - 4px);
    border: 1px solid var(--bord);
    background: var(--fond-profond);
    color: var(--texte);
    font: inherit;
}

.fiche-groupe .sous-titre-bloc[b-6bq8j6ia3y] {
    margin: var(--espace) 0 0.4rem;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--texte-doux);
}
.fiche-groupe .membres[b-6bq8j6ia3y] { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-size: 0.9rem; }
.fiche-groupe .vide[b-6bq8j6ia3y] {
    margin: 0; padding: 0.5rem 0.7rem;
    border: 1px dashed var(--bord); border-radius: calc(var(--rayon) - 4px);
    color: var(--texte-doux); font-size: 0.85rem;
}
.fiche-groupe .actions[b-6bq8j6ia3y] { margin-top: var(--espace); }
.fiche-groupe :focus-visible[b-6bq8j6ia3y] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Fiche flottante d'une dependance ----

   Elle remplace la barre horizontale qui coiffait le panneau. Celle-ci disait le style du
   lien sans jamais dire DE QUOI A QUOI il va -- sa premiere information, et la seule qu'on
   ne puisse pas deduire du trait. */

.fiche-lien[b-6bq8j6ia3y] {
    /* En BAS a droite : la fiche d'une tache occupe le haut, et les deux peuvent etre
       ouvertes en meme temps -- un lien selectionne garde sa fiche pendant qu'on ouvre
       celle d'une de ses extremites. */
    bottom: var(--espace);
    right: var(--espace);
    border-left: 3px solid var(--halo);
}

/* Flex plutot que du texte en ligne : Razor supprime les blancs autour d'un bloc @if, et
   le titre s'ecrivait « depend degroupeNouveau groupe ». Le gap les rend, sans dependre de
   ce que le moteur de rendu conserve ou non. */
.fiche-lien h2[b-6bq8j6ia3y] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
    font-size: 0.95rem; line-height: 1.4;
}
.fiche-lien h2 .vers[b-6bq8j6ia3y] { color: var(--texte-doux); font-weight: 400; }

/* Dit la NATURE de l'extrémité. Sans elle, « X dépend de Y » ne laisse pas deviner que Y est
   un lot et non une tâche — et la règle de clôture, elle, n'est pas la même. */
.fiche-lien h2 .marque[b-6bq8j6ia3y] {
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--bord);
    color: var(--texte-doux);
    font-size: 0.7rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em;
}

/* La portee du lien, ecrite. La couleur du trait ne dit pas s'il bloque une cloture. */
.fiche-lien .portee[b-6bq8j6ia3y] {
    margin: 0 0 var(--espace);
    padding: 0.4rem 0.6rem;
    border-radius: calc(var(--rayon) - 4px);
    border-left: 3px solid var(--neutre);
    background: var(--fond);
    color: var(--texte-doux);
    font-size: 0.85rem;
}
.fiche-lien .portee.bloquante[b-6bq8j6ia3y] { border-left-color: var(--alerte); color: var(--texte); }

.fiche-lien .reglages[b-6bq8j6ia3y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.8rem;
    font-size: 0.85rem;
}
.fiche-lien .reglages label[b-6bq8j6ia3y] { display: flex; flex-direction: column; gap: 0.2rem; color: var(--texte-doux); }
.fiche-lien .reglages label.case[b-6bq8j6ia3y] { flex-direction: row; align-items: center; gap: 0.35rem; }

.fiche-lien select[b-6bq8j6ia3y] {
    padding: 0.25rem 0.4rem;
    border-radius: calc(var(--rayon) - 4px);
    border: 1px solid var(--bord);
    background: var(--fond-profond);
    color: var(--texte);
    font: inherit;
}

.fiche-lien .actions[b-6bq8j6ia3y] { margin-top: var(--espace); }
.fiche-lien :focus-visible[b-6bq8j6ia3y] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* !important assume : la couleur du trait est posee en STYLE EN LIGNE par le module, pour
   suivre le jeton choisi par l'utilisateur. Aucun selecteur ne peut la surpasser, et le
   signal doit primer sur l'apparence choisie -- le temps de l'animation seulement. */
.fleches[b-6bq8j6ia3y]  .fleche.blocage {
    stroke: var(--alerte) !important;
    stroke-width: 3 !important;
    animation: halo-de-blocage-b-6bq8j6ia3y 800ms ease-in-out 3;
}

@keyframes halo-de-blocage-b-6bq8j6ia3y {
    0%, 100% { filter: drop-shadow(0 0 1px var(--alerte)); }
    50%      { filter: drop-shadow(0 0 9px var(--alerte)); }
}

@media (prefers-reduced-motion: reduce) {
    /* Le mouvement qu'on n'a pas choisi peut provoquer un vrai malaise. Le signal, lui,
       reste : il devient fixe au lieu de disparaitre. */
    .fleches[b-6bq8j6ia3y]  .fleche.blocage {
        animation: none;
        filter: drop-shadow(0 0 6px var(--alerte));
    }
}

/* Badge de pré-version. Il ne s'affiche que si le suffixe de version est renseigné :
   passer en release, c'est le vider dans Directory.Build.props, et le badge disparaît sans
   qu'aucun code ne change. */
.panneau-titre .prerelease[b-6bq8j6ia3y] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--attention);
    color: var(--fond-profond);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Le lien vers la gestion des comptes, dans la barre de titre. Il suit la date, donc apres
   la marge automatique : sans cette regle il se collerait au titre, a gauche. */
.panneau-titre .lien-comptes[b-6bq8j6ia3y] { text-decoration: none; }
/* /Components/Pages/Utilisateurs.razor.rz.scp.css */
/* Comptes et partage — ADR 0008.

   Un ecran de gestion, pas une toile : il se lit de haut en bas, en pleine largeur bornee.
   Le vocabulaire vient de la charte (panneau, bouton, marqueur) ; rien n'est invente ici qui
   existe deja ailleurs. */

.ecran[b-tvfiyr5ri3] {
    display: flex;
    flex-direction: column;
    gap: var(--espace);
    padding: var(--espace);
    max-width: 78rem;
    margin: 0 auto;
    min-height: 100vh;
    box-sizing: border-box;
}

.entete[b-tvfiyr5ri3] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}

.entete .marque[b-tvfiyr5ri3] { margin: 0; font-size: 1.15rem; }
.entete .sous-titre[b-tvfiyr5ri3] { color: var(--texte-doux); font-size: 0.85rem; }
/* Le retour pousse a droite : c'est la sortie, elle ne se dispute pas la gauche avec le titre. */
.entete .retour[b-tvfiyr5ri3] { margin-left: auto; text-decoration: none; }

.bloc[b-tvfiyr5ri3] { padding: 1rem 1.1rem 1.2rem; }

.titre-bloc[b-tvfiyr5ri3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}
.titre-bloc h2[b-tvfiyr5ri3] { margin: 0; font-size: 1rem; letter-spacing: 0.02em; }
.titre-bloc .bouton[b-tvfiyr5ri3] { margin-left: auto; }

/* --- Tableau des comptes ---------------------------------------------------- */

.table-comptes[b-tvfiyr5ri3] { width: 100%; border-collapse: collapse; }

.table-comptes th[b-tvfiyr5ri3] {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 400;
    color: var(--texte-doux);
    padding: 0 0.6rem 0.5rem;
    border-bottom: 1px solid var(--bord);
}

.table-comptes td[b-tvfiyr5ri3] {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--filet);
    vertical-align: middle;
}

/* Les comptes se comparent ligne a ligne : sans chasse fixe, deux nombres voisins ne
   s'alignent pas et l'oeil doit relire. C'est la regle de la charte. */
.table-comptes .nombre[b-tvfiyr5ri3] { text-align: right; font-variant-numeric: tabular-nums; }

.table-comptes .nom[b-tvfiyr5ri3] { font-weight: 600; }
.table-comptes code[b-tvfiyr5ri3] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }

/* Un compte desactive s'efface SANS disparaitre : il doit rester lisible partout ou il est
   encore responsable de quelque chose. */
.table-comptes tr.verrouille td[b-tvfiyr5ri3] { opacity: 0.55; }

.topic .absent[b-tvfiyr5ri3] { color: var(--texte-doux); font-style: italic; }

.marqueur[b-tvfiyr5ri3] {
    margin-left: 0.45rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--bord);
    background: var(--fond-profond);
    font-size: 0.72rem;
    color: var(--texte-doux);
    white-space: nowrap;
}
/* Le mot porte l'information, la couleur ne fait que la doubler. */
.marqueur.alerte[b-tvfiyr5ri3] { border-color: var(--alerte); color: var(--alerte); }

.actions-ligne[b-tvfiyr5ri3] { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.actions-ligne .bouton[b-tvfiyr5ri3] { padding: 0.25rem 0.6rem; font-size: 0.82rem; }

/* Le seul bouton destructeur de l'ecran. Il ne prend PAS un fond plein : un aplat rouge dans
   chaque ligne du tableau ferait de la suppression l'action la plus visible de la page, alors
   qu'elle est la plus rare. Le contour suffit a le distinguer, et le dialogue fait le reste. */
.bouton.danger[b-tvfiyr5ri3] { border-color: color-mix(in oklab, var(--alerte) 55%, transparent); color: var(--alerte); }
.bouton.danger:hover[b-tvfiyr5ri3] { border-color: var(--alerte); }

.invisible[b-tvfiyr5ri3] {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* --- Formulaires ------------------------------------------------------------ */

.formulaire[b-tvfiyr5ri3] {
    display: grid;
    gap: 0.8rem;
    margin: 1rem 0 0;
    padding: 0.9rem 1rem;
    background: var(--fond-profond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    max-width: 34rem;
}

.formulaire h3[b-tvfiyr5ri3] { margin: 0; font-size: 0.95rem; }
.formulaire label[b-tvfiyr5ri3] { display: grid; gap: 0.25rem; }
.formulaire label > span[b-tvfiyr5ri3] { font-size: 0.8rem; color: var(--texte-doux); }

/* `input` sans qualifier le type : un selecteur input[type="text"] manquerait les champs
   rendus sans attribut type, qui gardent alors le rendu clair du systeme sur fond sombre.
   Le piege est deja consigne pour les pages mobiles. */
.formulaire input[b-tvfiyr5ri3] {
    padding: 0.4rem 0.55rem;
    border-radius: calc(var(--rayon) - 4px);
    border: 1px solid var(--bord);
    background: var(--fond);
    color: var(--texte);
    font: inherit;
}
.formulaire input:focus-visible[b-tvfiyr5ri3] { outline: 2px solid var(--accent); outline-offset: 1px; }

.formulaire small[b-tvfiyr5ri3] { color: var(--texte-doux); font-size: 0.76rem; line-height: 1.45; }

.formulaire .interrupteur[b-tvfiyr5ri3] { display: flex; align-items: center; gap: 0.5rem; }
.formulaire .interrupteur input[b-tvfiyr5ri3] { width: auto; accent-color: var(--accent); }
.formulaire .interrupteur span[b-tvfiyr5ri3] { font-size: 0.88rem; color: var(--texte); }

.formulaire .actions[b-tvfiyr5ri3] { display: flex; gap: 0.5rem; }

/* --- Projets et partage ----------------------------------------------------- */

.projet[b-tvfiyr5ri3] {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    margin-bottom: 0.7rem;
}

.projet header[b-tvfiyr5ri3] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.projet h3[b-tvfiyr5ri3] { margin: 0; font-size: 0.95rem; }
.projet header .bouton[b-tvfiyr5ri3] { margin-left: auto; padding: 0.25rem 0.6rem; font-size: 0.82rem; }

.membres[b-tvfiyr5ri3] { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

.membres li[b-tvfiyr5ri3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.3rem 0.4rem;
    border-radius: calc(var(--rayon) - 4px);
}
.membres li:hover[b-tvfiyr5ri3] { background: var(--fond-profond); }
.membres .nom[b-tvfiyr5ri3] { flex: 1; }

.choix[b-tvfiyr5ri3] { display: flex; gap: 0.25rem; }
.choix .bouton[b-tvfiyr5ri3] { padding: 0.2rem 0.6rem; font-size: 0.8rem; }

/* Le niveau retenu se dit par un contour franc, pas par un aplat : trois aplats cote a cote
   se liraient comme trois actions disponibles, alors qu'un seul est l'etat courant. */
.choix .bouton.retenu[b-tvfiyr5ri3] {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.vide[b-tvfiyr5ri3] { color: var(--texte-doux); font-size: 0.88rem; margin: 0.6rem 0 0; line-height: 1.5; }