/* WLDesigner — feuille commune. Esthetique "blueprint" : le produit est un
   outil de dessin de schemas reseau, l'interface en reprend la matiere
   (fond ardoise, grille de plan discrete, identifiants en monospace). */
/* « --sur » : la SURFACE FLOTTANTE — boites modales, menus contextuels,
   bulles. Elle ne peut pas valoir « --panel » : une modale ouverte
   par-dessus le panneau de gauche s'y fondait, et l'on ne voyait plus ou
   commencait la fenetre (v12.22). Elle doit se detacher des DEUX fonds de
   la page, celui de gauche et celui du centre : un menu contextuel n'a pas
   de voile derriere lui pour l'en separer. En famille sombre on l'eclaircit,
   en famille claire on l'assombrit — la ou le centre est deja blanc, c'est
   la seule direction qui reste. */
:root{
  --bg:#0f1620; --panel:#161f2b; --panel2:#1b2634; --line:#26374a;
  --sur:#1e2a39;
  --text:#d7e0ea; --muted:#8f9eb0; --accent:#558ed5; --accent-soft:#2e4f7d;  /* bleu ONAIR.VISION #558ed5 */
  --ok:#4fc27a; --warn:#e0a84a; --err:#e06060;
  --mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:.92em}
h1{font-size:20px;font-weight:600;letter-spacing:.03em;margin:0}
h2{font-size:15px;font-weight:600;color:var(--muted);
   text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px}

/* ===== « hidden » est un attribut, pas une suggestion =================
   La feuille du navigateur pose « [hidden]{display:none} », mais TOUTE
   regle d'auteur qui fixe un « display » l'emporte sur elle, quelle que
   soit sa specificite. Le bandeau mettant ses liens en « inline-flex »,
   Administration et Securite restaient donc VISIBLES a qui n'y a pas
   droit, alors que le code les avait bien masques : le clic ouvrait une
   page qui se refermait aussitot.

   La regle est generale et porte « important », et c'est precisement le
   point : aucune mise en page ne doit pouvoir rouvrir une porte fermee
   par les droits. Le produit se defendait deja au cas par cas — dix
   regles « [hidden]{display:none !important} » eparpillees dans les
   pages en temoignent ; elles deviennent redondantes et peuvent partir
   au prochain nettoyage.

   Elle tranche aussi le conflit inverse, la ou un meme element porte a
   la fois « hidden » (un droit) et un « style.display » (un onglet) :
   le droit gagne. C'etait le cas des boutons « Depuis le catalogue »,
   « Nouvelle reference » et « Etiquettes » de l'inventaire, que le
   changement d'onglet rallumait pour un compte qui n'y avait pas
   droit. */
[hidden]{display:none !important}

/* barre superieure */
/* L'ecart passe de 16 a 10 px : les vignettes portent leur propre marge
   interne, et douze d'entre elles en 60 px plus les horloges ne
   tenaient plus sur une ligne de 1400 px — la largeur d'un portable
   courant. Six pixels repris onze fois suffisent a les y remettre. */
/* v12.53 : la marge haute et basse passe de 14 px a 2 px. Ces 24 px ne
   servaient a rien qu'a entourer de vide des vignettes qu'on n'arrivait
   pas a lire ; rendus aux boutons, ils font la difference entre un mot
   devine et un mot lu. La barre, elle, garde sa hauteur. */
/* v12.55 : L'ECART EST CELUI DU GROSSISSEMENT. La barre n'a plus a etre
   haute pour etre lisible : elle est fine, et la vignette survolee
   grandit d'elle-meme, comme un Dock. Pour qu'elle grandisse sans rien
   recouvrir ni rien deplacer, l'ecart qui separe deux boutons vaut
   EXACTEMENT ce que le grossissement reclame de chaque cote — la
   vignette agrandie remplit le vide, elle ne mord pas sur sa voisine.
   L'ecart n'est donc plus un chiffre choisi : il se deduit du facteur. */
.topbar{display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--wld-gap);row-gap:8px;padding:2px 24px;
  position:relative;z-index:60;
  background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:700;letter-spacing:.06em;
  display:inline-flex;flex-direction:column;line-height:1.1;
  margin-right:var(--wld-air)}
.topbar .brand b{color:var(--accent)}
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:38px}
.pweye{position:absolute;right:3px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  font-size:15px;padding:3px 7px;line-height:1;border-radius:5px}
.pweye:hover{background:transparent;color:var(--text)}
.pweye.on{color:var(--accent)}
.topbar .brand .brandline{white-space:nowrap}
.topbar .brand .ver{font:400 9px var(--mono);color:var(--muted);
  letter-spacing:.4px;margin-top:1px}
.topbar .spacer{flex:1}
.topbar .who{color:var(--muted);font-family:var(--mono);font-size:13px;
  margin:0 var(--wld-air)}
/* v12.91 : les AUTRES comptes actifs, en pastilles au-dessus du sien */
.topbar .wldWhoCol{display:inline-flex;flex-direction:column;
  align-items:center;gap:4px;margin:0 var(--wld-air)}
.topbar .wldWhoCol .who{margin:0}
#wldPresents{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;
  max-width:190px}
#wldPresents:empty{display:none}
#wldPresents .pr{width:20px;height:20px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font:700 9.5px system-ui,sans-serif;
  color:#fff;letter-spacing:.2px;cursor:default;
  background:hsl(var(--h,210) 55% 42%);box-shadow:0 0 0 1.5px var(--panel),
  0 0 0 2.5px hsl(var(--h,210) 55% 62%)}
#wldPresents .pr.plus{background:var(--panel2);color:var(--muted);
  box-shadow:0 0 0 1px var(--line)}
html[data-mobile="1"] #wldPresents{display:none}
/* liens de navigation du bandeau : rendus en BOUTONS — plus lisibles que
   du texte nu ; la page courante (aria-current) est soulignee a l'accent */
.topbar>a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border:1px solid #558ed5;border-radius:8px;background:var(--panel2);
  color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  line-height:1;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.topbar>a:hover{border-color:var(--accent);color:var(--accent)}
/* Boutons a pictogramme de la barre du haut : meme gabarit que les
   raccourcis de module, pour que la ligne soit d'un seul dessin. */
/* UN SEUL gabarit, ecrit une fois : liens et boutons, encadres ou non.
   Le cadre de reference est celui du bouton « message de service ».
   Toute divergence future se verrait ici, et nulle part ailleurs. */
.topbar>a.ico,.topbar button.ico,.wldnav a{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:var(--wld-ico);height:var(--wld-ico);padding:0;
  border-radius:8px;font-size:22px;font-weight:400;line-height:1;
  flex:0 0 auto;text-decoration:none}
/* AUCUN CADRE : la moitie des boutons en portait un, l'autre non, et la
   barre se lisait comme deux familles. C'est le FOND, legerement plus
   clair que la barre, qui donne sa forme au bouton — un aplat suffit a
   dire « ceci se clique », sans le trait qui divisait. */
.topbar>a.ico,.topbar button.ico,.wldnav a{
  border:none;color:var(--text);cursor:pointer;
  transition:background .15s,color .15s;
  /* Voile RELATIF plutot qu'une couleur de palette : « --panel2 » ne se
     detachait que de cinq points sur le fond de la barre, selon le
     theme. Un blanc translucide eclaircit toujours d'autant, quelle que
     soit la palette. */
  background:rgba(255,255,255,.10)}
html[data-tone="light"] .topbar>a.ico,
html[data-tone="light"] .topbar button.ico,
html[data-tone="light"] .wldnav a{background:rgba(0,0,0,.07)}
.topbar>a.ico:hover,.topbar button.ico:hover,.wldnav a:hover{
  background:var(--accent-soft);color:var(--accent)}
/* Page courante : fond soutenu et trait sous le pictogramme. */
.wldnav a.ici{background:var(--accent-soft);
  box-shadow:inset 0 -2px 0 var(--accent);cursor:default}
/* ---- menu « quel espace ? » (v12.11) ----
   Il s'ouvre sous le raccourci Prise de notes ou Planning quand le compte
   travaille sur plusieurs espaces. Il vit sur le corps de la page, pas
   dans la barre : un menu dans une barre en « overflow:hidden » se
   retrouve coupe a mi-hauteur. */
.wld-esp{position:fixed;z-index:400;min-width:220px;max-width:340px;
  max-height:70vh;overflow:auto;background:var(--sur);
  border:1px solid var(--line);border-radius:10px;padding:5px;
  box-shadow:0 12px 34px rgba(0,0,0,.42)}
.wld-esp[hidden]{display:none}
.wld-esp .t{font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);padding:5px 9px 6px;border-bottom:1px solid var(--line);
  margin-bottom:4px}
.wld-esp a{display:flex;align-items:center;gap:14px;padding:3px 9px;
  border-radius:5px;font-size:13px;line-height:1.3;color:var(--text);
  text-decoration:none;white-space:nowrap}      /* v12.96 : interligne resserre */
/* v12.71 : logo de l'espace devant son nom. Case de taille FIXE, logo ou
   non : les noms restent alignes, et un logo tres large est ramene a la
   case sans deformation.
   v12.72 : logos cales a GAUCHE de leur case (et non plus centres), noms
   justifies a gauche dans une colonne commune, un blanc franc entre les
   deux. */
.wld-esp a .lg{flex:0 0 44px;height:24px;display:flex;align-items:center;
  justify-content:flex-start}
.wld-esp a .lg img{max-width:44px;max-height:24px;object-fit:contain;
  object-position:left center;display:block}
.wld-esp a .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  text-align:left}
.wld-esp a:hover{background:var(--accent-soft);color:var(--accent)}
.wld-esp a.ici{color:var(--accent)}
.wld-esp a .d{display:inline;margin-left:8px;font-size:10.5px;color:var(--muted);
  text-transform:none;letter-spacing:0}
/* Deconnexion : meme forme, teinte differente — c'est le seul bouton de
   la barre dont le clic vous met dehors. */
.topbar button.ico.quit{color:var(--muted)}
.topbar button.ico.quit:hover{background:var(--err);color:#fff}
/* ---- boutons a vignette (Accueil, Aide, Preferences, Deconnexion) ----
   La vignette porte deja son cadre argente et son fond bleu nuit. Le
   bouton doit donc RENDRE les siens : sans cela on verrait un cadre
   dans un cadre, et le voile blanc du fond deborderait aux angles
   arrondis de l'image.

   La taille tient dans UNE variable : la changer ici change les DOUZE
   boutons, sur les neuf pages. Le carre suit celui de la source (1:1) —
   45 x 42 aurait etire la vignette. 60 px plutot que 42 : en dessous, le
   mot grave dans la vignette n'est plus qu'une trace, et l'on perd
   justement ce qui distingue « Tâches » de « Tickets » au premier coup
   d'oeil. */
/* Le gabarit ne s'appuie plus sur « .ico » : Administration et Securite
   sont des liens texte encadres, qui ne l'ont jamais porte. « .ico-img »
   redit donc TOUT ce dont une vignette a besoin, et se suffit a
   lui-meme quelle que soit la nature du bouton qui la porte. */
/* LA TAILLE SUIT LA LARGEUR, sans palier (v12.53). Les deux paliers de
   60/50/42 px etaient MESURES sur la planche de schema, la barre la plus
   chargee du portail : seize vignettes, deux horloges et l'etat de
   sauvegarde. Mesures a nouveau, ils disaient surtout ceci — la largeur
   restante est une DROITE, et un palier la gaspille : a 1900 px on
   affichait encore des vignettes de 60 px alors que 80 tenaient.
   La regle remplace les paliers par cette droite. Elle est MESUREE, pas
   estimee : « diag_bandeau_max.py » cherche par dichotomie, tous les
   40 px de fenetre et sur les cinq barres du portail, la plus grande
   vignette qui tienne encore sur un rang. La planche de schema donne
   « taille = (largeur - 624) / 16 » — seize vignettes a nourrir, et
   624 px pris par la marque, les deux filets, les horloges, le compte et
   les ecarts. On retranche seize pixels de plus, soit un pixel de garde
   par vignette, ce qui couvre aussi la barre de defilement que « 100vw »
   ne deduit pas. Les autres pages sont plus larges d'au moins 50 px a
   taille egale : la barre la plus chargee decide pour toutes, et le
   portail garde une seule et meme ligne.
   v12.56 : LES BOUTONS SE TOUCHENT PRESQUE — deux pixels. L'ecart calcule
   de la v12.55 reservait la place du grossissement, et il la reservait EN
   PERMANENCE : dix-huit pixels de vide entre chaque vignette, tout le
   temps, pour un grossissement qui dure le temps d'un survol. La barre en
   etait trainante a l'oeil. On rend donc ces vingt intervalles a la
   rangee, et la vignette agrandie RECOUVRE ses deux voisines le temps du
   survol — elle passe devant, ombre portee comprise, et se lit comme une
   loupe posee sur la barre. Ce qui est gagne va aux vignettes elles-memes :
   a largeur egale, elles sont plus grandes qu'en v12.55, et la barre tient
   sur un rang bien plus bas (944 px au lieu de 1 220).
   Seuls les FILETS de groupe gardent de l'air, sinon la barre serait une
   file continue de seize vignettes ou l'on ne distinguerait plus les
   familles.
   v12.55 : LA BARRE N'A PLUS A ETRE HAUTE POUR ETRE LISIBLE. Elle l'etait
   parce que le mot grave dans la vignette devait se lire AU REPOS ; on y
   perdait 85 px de hauteur de travail sur toutes les pages, en permanence,
   pour un mot qu'on ne lit qu'a l'instant ou l'on cherche un bouton. Le
   survol grossit desormais la vignette, comme le Dock d'un Mac : la barre
   se fait fine, et c'est le geste qui appelle la lisibilite.
   Les trois chiffres tiennent ensemble, et c'est ce qui evite tout
   recouvrement : le facteur de grossissement decide de l'ECART entre deux
   boutons — la moitie de ce que la vignette gagne de chaque cote —, si
   bien que la vignette agrandie remplit exactement le vide et ne mord
   jamais sur sa voisine ; rien ne se deplace, puisque le grossissement
   est une TRANSFORMATION, hors du flux.
   La droite qui suit est MESUREE a nouveau, « diag_bandeau_max.py »
   comprise dans la boucle : seize vignettes et vingt ecarts qui suivent
   la taille, sur la planche de schema, la barre la plus chargee du
   portail. Les autres pages sont plus larges : la plus chargee decide
   pour toutes, et le portail garde une seule et meme ligne.
   Les bornes : 30 px, la plus petite cible encore sure au pointeur ;
   54 px, au-dela desquels la barre redevient une barre imposante — et,
   agrandie, la vignette atteint 97 px, plus qu'elle n'a jamais mesure. */
:root{
  --wld-zoom:1.8;                    /* le grossissement au survol */
  --wld-ico:clamp(30px, (100vw - 608px) / 16, 54px);
  --wld-gap:2px;                     /* les vignettes se touchent presque */
  --wld-air:9px;                     /* l'air autour des filets de groupe */
}
/* SANS SURVOL, PAS DE GROSSISSEMENT — et une vignette fine deviendrait
   illisible sans aucun moyen de la lire. Une tablette, un ecran tactile :
   on y retrouve la regle de la v12.53, ou la vignette se lit AU REPOS, et
   l'ecart de 10 px pour lequel cette regle a ete mesuree. Le telephone,
   lui, garde ses 42 px : sa barre ne porte que quatre boutons. */
@media (hover:none),(pointer:coarse) {
  :root{--wld-ico:clamp(42px, (100vw - 608px) / 16, 84px)}
}
html[data-mobile="1"]{--wld-ico:42px;--wld-gap:6px}
.topbar>a.ico-img,.topbar button.ico-img,.wldnav a.ico-img{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;flex:0 0 auto;
  width:var(--wld-ico);height:var(--wld-ico);
  background:none;border:none;padding:0;gap:0;border-radius:0;
  text-decoration:none;cursor:pointer}
html[data-tone="light"] .topbar>a.ico-img,
html[data-tone="light"] .topbar button.ico-img,
html[data-tone="light"] .wldnav a.ico-img{background:none}
.topbar>a.ico-img:hover,.topbar button.ico-img:hover,
.topbar button.ico.quit.ico-img:hover,.wldnav a.ico-img:hover{
  background:none;border-color:transparent}
/* Le survol se dit par la vignette elle-meme — elle avance et
   s'eclaircit. Un aplat derriere elle n'aurait ete visible que dans les
   angles, ce qui se lit comme un defaut de detourage, pas comme une
   reponse au geste. */
/* LE GROSSISSEMENT AU SURVOL (v12.55). Il porte sur l'IMAGE, pas sur le
   bouton, et c'est une decision de surete : l'image ne prend pas le
   pointeur, si bien que la vignette agrandie qui descend sur la page ne
   vole pas les clics de ce qu'elle recouvre — un onglet de planche, par
   exemple. Le bouton, lui, garde sa taille et sa place dans la barre.
   L'origine est le HAUT : la barre est collee au bord de l'ecran, une
   vignette qui grandirait par son centre sortirait par le haut de la
   fenetre. Elle descend donc sur la page, et « z-index » sur le bouton
   la met devant ce qu'elle recouvre un instant.
   « @media (hover: hover) » : sur un ecran tactile il n'y a pas de
   survol, et la vignette y resterait agrandie apres le doigt. */
.topbar .icoimg{display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;-webkit-user-drag:none;user-select:none;
  transform-origin:50% 0;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.05),filter .16s ease}
/* Le clavier doit voir ou il est : le bouton n'a plus de fond a
   eclaircir, on garde donc un liseré franc. */
.topbar .ico-img:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:9px}
/* Page courante : le cadre bleu de la regle generale se poserait en
   rectangle par-dessus les angles arrondis de la vignette. Un trait
   sous le bouton dit la meme chose sans l'abimer.
   Le bouton de la page ouverte est en outre ETEINT — grisé et un peu en
   retrait : la barre compte desormais une dizaine de vignettes en
   couleurs, et celle ou l'on se trouve deja doit cesser d'appeler le
   clic. La regle vaut pour TOUS les boutons a vignette, qu'ils se
   declarent par « aria-current » (Accueil, Administration, Securite) ou
   par la classe « ici » (raccourcis de module). */
.topbar>a.ico-img[aria-current="page"],
.wldnav a.ico-img.ici{background:none;border:none;
  /* v12.96 : trait plus epais et LUMINEUX (accent eclairci + halo) — le
     trait de 2 px a la teinte d'accent se perdait sur le bandeau */
  box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--accent) 45%, #fff),
    0 6px 10px -6px color-mix(in srgb, var(--accent) 70%, #fff)}
html[data-tone="light"] .topbar>a.ico-img[aria-current="page"],
html[data-tone="light"] .wldnav a.ico-img.ici{
  box-shadow:inset 0 -3px 0 var(--accent)}
.topbar>a.ico-img[aria-current="page"] .icoimg,
.wldnav a.ico-img.ici .icoimg{
  filter:grayscale(.55) brightness(.85);transform:scale(.92)}
/* LE GROSSISSEMENT, ecrit APRES la vignette eteinte de la page ouverte :
   celle-ci est grisee pour ne plus appeler le clic, pas pour cesser de
   se lire. Elle grandit donc comme les autres. */
@media (hover:hover) and (pointer:fine) {
  html:not([data-mobile="1"]) .topbar .ico-img:hover,
  html:not([data-mobile="1"]) .topbar .ico-img:focus-visible{z-index:3}
  html:not([data-mobile="1"]) .topbar .ico-img:hover .icoimg,
  html:not([data-mobile="1"]) .topbar .ico-img:focus-visible .icoimg{
    transform:scale(var(--wld-zoom));
    /* L'ombre n'est pas un ornement depuis la v12.56 : les vignettes se
       touchant a deux pixels, l'agrandie MORD sur ses deux voisines, et
       c'est elle qui dit ou l'une finit et ou l'autre commence. */
    filter:brightness(1.12) drop-shadow(0 3px 9px rgba(0,0,0,.65))}
  html:not([data-mobile="1"]) .topbar .ico-img:active .icoimg{
    transform:scale(calc(var(--wld-zoom) * .95))}
}
/* Ecran qui demande le calme : la vignette grandit quand meme — c'est la
   fonction, pas l'ornement —, mais sans le ressort ni l'ombre portee. */
@media (prefers-reduced-motion:reduce) {
  .topbar .icoimg{transition:none}
  html:not([data-mobile="1"]) .topbar .ico-img:hover .icoimg{
    filter:brightness(1.1)}
}
/* Ni animation ni relief a l'impression, ou la barre part en aplat. */
@media print{.topbar .icoimg{transition:none;transform:none;filter:none}}
/* ---- vignette d'entree d'un espace de travail (accueil) --------------
   Elle ne vit pas dans le bandeau : elle ouvre une LIGNE de la liste des
   espaces. Meme taille et meme reponse au survol que celles de la barre
   — un meme dessin doit se comporter partout de la meme facon — mais
   son gabarit est ecrit ici, car « .ico-img » est cale sur la geometrie
   du bandeau et n'a rien a faire dans un tableau. */
/* Le gabarit vaut pour TOUTE vignette posee hors du bandeau : la liste
   des espaces, la page des offres, et ce qui viendra. « .wsico » n'est
   plus qu'une variante d'emplacement — la marge qui la separe du nom
   d'espace — et non un second gabarit a tenir accorde avec le premier. */
a.icobtn{display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;flex:0 0 auto;vertical-align:middle;
  width:var(--wld-ico);height:var(--wld-ico);
  background:none;border:none;padding:0;text-decoration:none;cursor:pointer}
a.icobtn img{display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;-webkit-user-drag:none;user-select:none;
  transition:transform .12s ease,filter .12s ease}
a.icobtn:hover img{transform:scale(1.07);filter:brightness(1.15)}
a.icobtn:active img{transform:scale(.95)}
a.icobtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:9px}
@media print{a.icobtn img{transition:none;transform:none;filter:none}}
a.wsico{margin-right:12px}
/* Barre de retour des pages PUBLIQUES (offres, inscription) : une seule
   vignette, alignee sur le titre. Ces pages n'ont pas de bandeau — ce
   bouton est leur seule sortie autre que le « precedent » du
   navigateur. Declaree ici, et non dans chaque page, pour que les deux
   restent accordees. */
.pubtop{display:flex;align-items:center;margin:0 0 18px}
@media print{.pubtop{display:none}}
/* Le filet suit la vignette (v12.53) : fige a 26 px devant des boutons de
   80, il ne separait plus deux groupes, il flottait au milieu de la
   barre. La moitie de la vignette le remet a sa hauteur, quelle que
   soit la largeur de l'ecran. */
/* v12.56 : le filet porte SEUL l'air de la barre. Les vignettes se
   touchent a deux pixels ; sans cette respiration-la, seize d'entre elles
   feraient une file continue ou l'on ne distinguerait plus les familles —
   l'aide et l'accueil, les modules, les outils de la page, le compte. */
.topbar .topsep{flex:0 0 auto;width:1px;height:calc(var(--wld-ico) * .5);
  background:var(--line);margin:0 var(--wld-air)}
html[data-mobile="1"] .topbar .topsep{display:none}
/* bouton d'ouverture (espaces, taches) : VERT, franchement visible */
a.btn-open{display:inline-block;padding:6px 14px;border-radius:8px;
  background:#1f883d;border:1px solid #558ed5;color:#fff !important;
  font-weight:600;font-size:12.5px;text-decoration:none;white-space:nowrap;
  transition:background .15s}
a.btn-open:hover{background:#2ea043}
/* Boutons de module : meme aspect que la barre d'outils des
   schemas (.tool). Declare ici plutot que recopie dans la page,
   pour que les deux restent accordes.
   Le vert plein de .btn-open reste a l'action principale : une
   rangee ou tout crie de la meme facon ne dit plus ce qui compte. */
a.modbtn{display:inline-block;background:transparent;color:#fff;
  border:1px solid #558ed5;border-radius:6px;padding:6px 12px;
  font-size:13px;font-weight:400;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:background .15s}
a.modbtn:hover{background:rgba(85,142,213,.14)}
/* Sans cette regle, le texte blanc disparaitrait sur les themes
   Clair, Sepia et Contraste eleve. */
html[data-tone="light"] a.modbtn{color:#111}
html[data-mobile="1"] a.modbtn{min-height:44px;padding:11px 16px;
  font-size:14px;display:block;text-align:center}
/* panneaux estampilles ONAIR.VISION : cadre au bleu du logo */
.panel.panel-onair{border:1px solid #558ed5}
.topbar>a[aria-current="page"]{border-color:var(--accent);
  color:var(--accent);background:rgba(85,142,213,.12)}
/* logo d'entete : transparent, pose directement sur le bandeau sombre
   (le logo est en couleurs moyennes, lisible sans fond) */
.topbar .toplogo{height:26px;background:transparent;padding:0}
/* icone d'entete : marque carree posee AVANT le nom du produit.
   Hauteur calee SOUS le bloc texte du bandeau (15px x 1.1 pour le
   nom, plus la ligne de version en 9px, soit ~27px) : l'image ne
   doit jamais piloter la hauteur de la barre. Aucun border-radius,
   la source porte deja ses coins arrondis en transparence — les
   cumuler rognerait les angles.
   Contrairement a l'ancien logotype large, elle reste affichee sur
   telephone : 22 px carres tiennent dans le bandeau. */
.topbar .topicon{height:24px;width:24px;background:transparent;
  padding:0;flex:0 0 auto;display:block;align-self:center}
/* v12.26 : la marque prend la TAILLE DES BOUTONS. A 24 px, perdue avant
   une rangee de vignettes de 60, elle se lisait comme un reste de l'ancien
   bandeau. Elle suit le meme gabarit « --wld-ico » que les vignettes, donc
   leurs deux paliers d'ecran : la barre garde une seule hauteur, que la
   marque ne pilote pas plus qu'avant. La source fait 72 px : aucun flou. */
html:not([data-mobile="1"]) .topbar .topicon{
  width:var(--wld-ico);height:var(--wld-ico);object-fit:contain}
html[data-mobile="1"] .topbar .topicon{height:22px;width:22px}
.wslogo{height:22px;max-width:120px;object-fit:contain;vertical-align:middle;
  margin-left:8px;border-radius:4px}

.wrap{max-width:1040px;margin:28px auto;padding:0 20px}
.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:20px 22px;margin-bottom:24px}

/* tableaux */
table{width:100%;border-collapse:collapse;font-size:14px}
th{color:var(--muted);text-align:left;font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;
  padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .mono{color:var(--text)}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:12px;font-family:var(--mono)}
.badge.admin{background:#3b2f4d;color:#c9a8ff}
.badge.user{background:var(--accent-soft);color:#9fe3ee}
.badge.readonly{background:#33404f;color:#a9bccf}
.badge.off{background:#4d2f2f;color:#f0a8a8}

/* formulaires */
label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px;
  text-transform:uppercase;letter-spacing:.07em}
input,select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);
  color:var(--text);border-radius:6px;padding:8px 10px;font:inherit}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
/* ===== fenetres modales (mutualise : admin, tickets, todo...) ===== */
.wld-veil{position:fixed;inset:0;background:rgba(8,12,18,.66);z-index:300;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:auto;padding:38px 14px}
.wld-veil[hidden]{display:none !important}
.wld-veil .card{background:var(--sur);border:1px solid var(--accent);
  border-radius:12px;padding:18px 22px;width:min(680px,96vw)}
.wld-veil .card h2{margin:0 0 12px}
/* ---- partager un document (v12.73) : meme dessin que le partage des
   schemas ---- */
.wld-ps h2{text-transform:none;letter-spacing:0;font-size:16px;
  color:var(--accent);word-break:break-word}
.wld-ps .field{margin-bottom:11px}
.wld-ps .portee label.choix{display:flex;gap:8px;align-items:center;font-size:13px;
  color:var(--text);margin:4px 0;text-transform:none;letter-spacing:normal}
.wld-ps .portee input{width:auto;margin:0}
.wld-ps .wps-boutons{display:flex;gap:10px}
.wld-ps .lien{display:flex;gap:8px;margin:6px 0 2px}
.wld-ps .lien input{flex:1;font:12px var(--mono)}
.wld-ps .wps-res{margin-top:12px}
.wld-ps .actifs{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.wld-ps .actifs[hidden]{display:none}
.wld-ps .actifs h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted)}
.wld-ps .ps{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.wld-ps .ps .n{flex:1;min-width:0}
.wld-ps .ps .d{color:var(--muted);font-size:11.5px}
/* ---- la fiche des partages d'un espace (v12.74) ---- */
.wld-pse .pse-liste{max-height:60vh;overflow:auto}
.wld-pse .pse-t{width:100%;border-collapse:collapse;font-size:13px}
.wld-pse .pse-t th{text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);font-weight:600;padding:6px 8px;
  border-bottom:1px solid var(--line)}
.wld-pse .pse-t td{padding:7px 8px;border-bottom:1px solid var(--line);
  vertical-align:top}
.wld-pse .pse-t td:last-child{text-align:right;white-space:nowrap}
.wld-pse .pse-t .d{display:block;color:var(--muted);font-size:11.5px}
.wld-pse .wps-boutons{justify-content:flex-end}
.wld-veil label{display:block;font-size:11.5px;color:var(--muted);
  margin-bottom:3px}
html[data-mobile="1"] .wld-veil{padding:8px}
html[data-mobile="1"] .wld-veil .card{width:100%;max-height:92vh;overflow:auto}

.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}

/* ======================= AFFICHAGE TELEPHONE =======================
   Actif seulement sous <html data-mobile="1"> (voir wld-common.js) :
   les tablettes et ordinateurs ne voient RIEN de ce bloc.
   Principe : une colonne, cibles tactiles >= 44 px, tableaux convertis
   en cartes empilees (l'intitule de colonne passe en etiquette). */
html[data-mobile="1"]{-webkit-text-size-adjust:100%}
html[data-mobile="1"] body{font-size:15px}
/* --- bandeau --- */
html[data-mobile="1"] .topbar{flex-wrap:wrap;gap:6px;padding:8px 12px;
  position:sticky;top:0;z-index:40}
html[data-mobile="1"] .topbar .brand{font-size:15px}
html[data-mobile="1"] .toplogo,
html[data-mobile="1"] #wldClocks,       /* horloges LOC / UTC */
html[data-mobile="1"] #adminLink,       /* Administration : grand ecran */
html[data-mobile="1"] #secLink,         /* Sécurité : grand ecran */
html[data-mobile="1"] #totpPanel,       /* double authentification */
html[data-mobile="1"] .topbar .who{display:none}
html[data-mobile="1"] .topbar>a,
html[data-mobile="1"] .topbar button{padding:9px 12px;font-size:13px;
  min-height:40px}
/* --- contenu --- */
html[data-mobile="1"] .wrap{margin:12px 0;padding:0 10px}
html[data-mobile="1"] .panel{padding:12px}
html[data-mobile="1"] h2{font-size:15px}
html[data-mobile="1"] .field,
html[data-mobile="1"] .row{display:block}
html[data-mobile="1"] .row>div{width:auto}
html[data-mobile="1"] input,
html[data-mobile="1"] select,
html[data-mobile="1"] textarea{font-size:16px;padding:11px 12px}
  /* 16 px : empeche le zoom automatique d'iOS a la saisie */
html[data-mobile="1"] button,
html[data-mobile="1"] .btn-open{min-height:44px;padding:11px 16px;
  font-size:14px}
html[data-mobile="1"] .veil{padding:8px}
html[data-mobile="1"] .card{width:100%;padding:14px;
  max-height:92vh;overflow:auto}
/* --- tableaux en CARTES --- */
html[data-mobile="1"] table thead{display:none}
html[data-mobile="1"] table,
html[data-mobile="1"] table tbody,
html[data-mobile="1"] table tr,
html[data-mobile="1"] table td{display:block;width:auto}
html[data-mobile="1"] table tr{border:1px solid var(--line);
  border-radius:10px;background:var(--panel2);margin:0 0 10px;padding:8px 10px}
html[data-mobile="1"] table td{border:0;padding:3px 0;max-width:none}
html[data-mobile="1"] table td:empty{display:none}
html[data-mobile="1"] table td[data-lbl]::before{content:attr(data-lbl) " ";
  color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.4px}
/* la cellule tronquee de l'accueil se deplie sur telephone (3 lignes) */
html[data-mobile="1"] td.trunc{white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
/* le bouton d'ouverture prend toute la largeur en bas de carte */
html[data-mobile="1"] table td .btn-open{display:block;text-align:center;
  margin-top:6px}
/* --- barres d'outils des modules : enroulement et defilement --- */
html[data-mobile="1"] .todobar,
html[data-mobile="1"] .tkbar,
html[data-mobile="1"] .mntbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
html[data-mobile="1"] .todobar .spacer,
html[data-mobile="1"] .tkbar .spacer,
html[data-mobile="1"] .mntbar .spacer{display:none}
html[data-mobile="1"] .todobar select,
html[data-mobile="1"] .tkbar select,
html[data-mobile="1"] .mntbar select,
html[data-mobile="1"] .tkbar input{flex:1 1 46%;min-width:0}
html[data-mobile="1"] .seg{display:flex;width:100%}
html[data-mobile="1"] .seg button{flex:1}
html[data-mobile="1"] #kpiCards{grid-template-columns:1fr 1fr}
html[data-mobile="1"] html,
html[data-mobile="1"] body{height:auto;max-height:none;overflow:auto}
html[data-mobile="1"] .tkmain,
html[data-mobile="1"] .todomain,
html[data-mobile="1"] .mntmain{overflow:visible}

/* --- ecran d'orientation (pages reservees au grand ecran) --- */
.phone-block{max-width:520px;margin:0 auto;padding:38px 22px;
  text-align:center;color:var(--text)}
.phone-block .pb-logo{font-weight:700;letter-spacing:.06em;
  color:var(--text);margin-bottom:18px}
.phone-block .pb-logo b{color:var(--accent)}
.phone-block .pb-ico{font-size:46px;margin-bottom:10px}
.phone-block h1{font-size:19px;margin:0 0 12px}
.phone-block p{color:var(--muted);font-size:14px;line-height:1.5}
.phone-block .pb-ok{color:var(--text)}
.phone-block .pb-btn{display:inline-block;margin-top:18px;padding:12px 22px;
  background:var(--accent);color:var(--btn-text,#fff);border-radius:8px;
  text-decoration:none;font-weight:600}

.row>div{flex:1;min-width:150px}
/* TOUS les boutons : bord au bleu ONAIR.VISION, texte BLANC */
button{
  background:var(--accent);color:var(--btn-text,#fff);border:1px solid #558ed5;
  border-radius:6px;
  padding:9px 18px;font:600 14px/1 inherit;cursor:pointer}
button:hover{filter:brightness(1.1)}
button.ghost,a.ghost{background:transparent;color:#fff;
  border:1px solid #558ed5}
/* En lien, « ghost » doit reprendre ce que « button » apporte de lui-meme :
   la boite, la police et le curseur ne viennent pas avec la classe. */
a.ghost{display:inline-block;border-radius:6px;padding:9px 18px;
  font:600 14px/1 inherit;text-align:center;text-decoration:none;
  cursor:pointer}
a.ghost:hover{filter:brightness(1.1)}
a.ghost:focus-visible{outline:2px solid var(--text);outline-offset:2px}
button.danger{background:transparent;color:var(--err);
  border:1px solid #558ed5}
button.small{padding:5px 10px;font-size:12.5px}
button:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.msg{margin:10px 0 0;font-size:13.5px;min-height:1.2em}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.hint{color:var(--muted);font-size:13px}
.members{background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;margin:6px 0}
.members label{display:inline-flex;align-items:center;gap:6px;margin:3px 14px 3px 0;
  text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--text)}
.members input[type=checkbox]{width:auto}

/* page de connexion */
.login-card{max-width:360px;margin:14vh auto;background:var(--sur);
  border:1px solid var(--line);border-radius:10px;padding:30px 28px}
.login-card h1{margin-bottom:4px}
/* L'accroche portait l'ecart entre le titre et le premier champ. Quand
   le formulaire suit directement le titre — la page de connexion, qui
   ne dit plus rien entre les deux — c'est a lui de le reprendre : sans
   cela, l'identifiant vient se coller sous le nom du produit.
   Le selecteur ne mord que dans ce cas ; la page de reinitialisation,
   qui garde son sous-titre, n'est pas concernee. */
.login-card h1+form{margin-top:22px}
/* Bloc « pas encore de compte », sous le rappel de mot de passe. Le
   trait qui le precede dit qu'on quitte la connexion : ce qui suit ne
   s'adresse plus a celui qui possede deja un identifiant. Les deux
   actions sont empilees et pleine largeur — cote a cote, elles se
   seraient disputees le meme poids alors que l'une ouvre un espace et
   l'autre se contente d'informer. */
.login-neuf{margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line)}
.login-neuf p{margin:0 0 10px;text-align:center;font-size:13px;
  color:var(--muted)}
.login-neuf a{display:block;width:100%;box-sizing:border-box;
  text-align:center}
.login-neuf a.btn-open{padding:10px 14px;font-size:13.5px}
.login-neuf a+a{margin-top:8px}
.login-card .sub{color:var(--muted);font-size:13px;margin:0 0 22px;
  font-family:var(--mono)}
.login-card form>div{margin-bottom:14px}
@media (prefers-reduced-motion: no-preference){
  .panel{animation:rise .25s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
}

/* logo societe (page de connexion).
   L'icone porte ses propres coins arrondis et son propre fond : la
   plaque blanche qui portait l'ancien bandeau n'a plus lieu d'etre, et
   l'aurait encadre d'un liseré clair sur un fond sombre. */
.login-card .logo{
  display:block;width:128px;height:128px;max-width:100%;
  margin:0 auto 16px;
}

/* ===================== THEMES GRAPHIQUES =====================
   « Sombre » = palette historique (:root ci-dessus).
   « Clair » = fond blanc, memes variables surchargees. */
/* CONTRASTE DES TEXTES.
   Les couleurs ci-dessous ne sont pas choisies a l'oeil : chaque teinte
   a ete relevee en CLARTE seulement — teinte et saturation intactes —
   jusqu'a un rapport WCAG de 12 pour le corps de lecture et de 6 pour
   les mentions secondaires, mesure sur le fond des PANNEAUX, la surface
   la plus claire et donc la plus defavorable. Le minimum reglementaire
   est de 4,5 ; « Regie nuit » etait a 3,9 et « Phosphore » a 4,3 sur
   leurs mentions secondaires, ce qui se voyait sur les petits textes —
   libelles de bibliotheque et cellules de tableau a 11 px.
   L'outil de calcul est « outils/contraste.py » du paquet du manuel. */
html[data-theme="light"]{
  --bg:#ffffff; --panel:#f4f7fa; --panel2:#e9eef5; --line:#cfd9e4; --sur:#e6edf5;
  --text:#1a2433; --muted:#506071; --accent:#3f77c0; --accent-soft:#d7e6f7;
  --ok:#238a52; --warn:#a8720d; --err:#c03d3d;
}
html[data-tone="light"] .badge.admin{background:#e9ddf9;color:#6b3fa6}
html[data-tone="light"] .badge.user{background:#d7e6f7;color:#2d5f9e}
html[data-tone="light"] .badge.readonly{background:#e2e8ee;color:#54657a}
html[data-tone="light"] .badge.off{background:#f6dcdc;color:#a53c3c}
html[data-tone="light"] .toplogo{background:#fff;border-radius:6px}
html[data-tone="light"] button.ghost,
html[data-tone="light"] a.ghost{color:var(--text)}
/* Famille claire : l'encre des boutons PLEINS passe au noir. C'est la
   VARIABLE qu'on change, plus la propriete « color » (v12.22) : une regle
   « html[data-tone] button » frappait aussi les boutons PLATS — ceux des
   menus deroulants, la gomme d'un champ, les onglets — qui se donnent
   pourtant leur propre fond et leur propre encre. Elle l'emportait sur eux
   par specificite, et le menu contextuel des notes s'ecrivait en blanc sur
   fond clair. La variable, elle, n'est lue que par les boutons qui gardent
   le fond d'accent. */
html[data-tone="light"]{--btn-text:#111}
html[data-tone="light"] button.danger{color:var(--err)}
/* liens-boutons du bandeau (AIDE, navigation) : noirs en Clair */
html[data-tone="light"] .topbar>a{color:#111}
html[data-tone="light"] .topbar>a:hover{color:var(--accent)}
html[data-tone="light"] .topbar>a[aria-current="page"]{color:var(--accent)}

/* ===== la collection de themes (palettes) ===== */
html[data-theme="camo"]{            /* Camouflage : olive drab, pochoir */
  --bg:#171c12; --panel:#1f2618; --panel2:#262e1d; --line:#3a4529; --sur:#2b3520;
  --text:#e3e4d6; --muted:#9ca48b; --accent:#c8a02e; --accent-soft:#4a4420;
  --btn-text:#0b1118;   /* accent clair : encre sombre (v12.43) */
  --ok:#7a9c4a; --warn:#d0902e; --err:#c05b45;
}
html[data-theme="blueprint"]{       /* Blueprint : bureau d'etudes */
  --bg:#0c2440; --panel:#123056; --panel2:#173a66; --line:#2b5382; --sur:#1a3f6c;
  --text:#f0f5fb; --muted:#93b3d1; --accent:#5db7de; --accent-soft:#1d4d7a;
  --btn-text:#0b1118;   /* accent clair : encre sombre (v12.43) */
  --ok:#58c39a; --warn:#e0b25a; --err:#e57373;
}
html[data-theme="nuit"]{            /* Regie nuit : rouge, vision nocturne */
  --bg:#0a0a0c; --panel:#131013; --panel2:#1a1416; --line:#3a2426; --sur:#1d171a;
  --text:#e4c8c8; --muted:#a68b8b; --accent:#c84040; --accent-soft:#4a1e1e;
  --ok:#b06060; --warn:#d07040; --err:#ff5050;
}
html[data-theme="phosphore"]{       /* Phosphore : CRT vert monochrome */
  --bg:#04120a; --panel:#072016; --panel2:#0a2a1c; --line:#14512f; --sur:#0d2e20;
  --text:#9ae9ba; --muted:#4bab77; --accent:#43d17a; --accent-soft:#0f3d24;
  --ok:#43d17a; --warn:#c9c94a; --err:#e06060; --btn-text:#08130b;
}
html[data-theme="ambre"]{           /* Ambre : console des annees 80 */
  --bg:#141006; --panel:#1e1809; --panel2:#28200c; --line:#4a3a14; --sur:#2a2210;
  --text:#eed29b; --muted:#b19351; --accent:#e8a03a; --accent-soft:#4a350f;
  --ok:#b0c24a; --warn:#e8b04a; --err:#d06040; --btn-text:#08130b;
}
html[data-theme="sepia"]{           /* Sepia : papier chaud (famille claire) */
  --bg:#f3ecdf; --panel:#faf5ea; --panel2:#ece2cf; --line:#cbbc9f; --sur:#ece1cd;
  --text:#372f24; --muted:#675b4a; --accent:#8a5a2a; --accent-soft:#e2d0b4;
  --ok:#4a7a3a; --warn:#9a6a10; --err:#a04030;
}
html[data-theme="contraste"]{       /* Contraste eleve : accessibilite */
  --bg:#000000; --panel:#0a0a0a; --panel2:#161616; --line:#9a9a9a; --sur:#1a1a1a;
  --text:#ffffff; --muted:#d0d0d0; --accent:#ffd400; --accent-soft:#3a3300;
  --ok:#00e070; --warn:#ffb000; --err:#ff4040; --btn-text:#000;
}
/* contraste eleve : interactions soulignees de bordures franches.
   Les boutons a pictogramme sont nommes EXPLICITEMENT : sans cela la
   regle generale « .topbar>a » l'emportait sur les liens (ordre du
   fichier) mais perdait contre « .topbar button.ico » (specificite), et
   l'aide se retrouvait bordee de 2 px quand ses voisines l'etaient de
   1 px. Une barre dont les cadres n'ont pas la meme epaisseur se lit
   comme un desordre, pas comme une hierarchie. */
html[data-theme="contraste"] button,
html[data-theme="contraste"] .topbar>a{border-width:2px}
/* En contraste eleve le cadre n'est pas une decoration mais le repere
   d'accessibilite : on le REMET, sur TOUS les boutons de la barre, donc
   sans rompre l'homogeneite. */
html[data-theme="contraste"] .topbar>a.ico,
html[data-theme="contraste"] .topbar button.ico,
html[data-theme="contraste"] .wldnav a{
  border:2px solid var(--line)}
html[data-theme="contraste"] .topbar>a.ico:hover,
html[data-theme="contraste"] .topbar button.ico:hover,
html[data-theme="contraste"] .wldnav a:hover{border-color:var(--accent)}
/* SAUF les boutons a vignette. Depuis la v10.98 ils portent une image
   qui a DEJA son cadre argente : le liseré du contraste eleve s'y
   ajoutait en second cadre, a angles droits par-dessus des angles
   arrondis — et seulement sur les boutons qui portent « .ico », si bien
   qu'Administration et Securite, eux, n'en avaient pas. La barre se
   lisait comme deux familles.
   Le repere d'accessibilite n'est pas perdu : il est dans le dessin.
   Le survol ne redessine RIEN autour de la vignette : un liseré, meme
   fugace, remet a l'ecran le carre qu'on vient d'oter, et il le remet
   la ou l'oeil est deja pose. La loupe — la vignette qui avance de 7 %
   et s'eclaircit — dit la meme chose sans rien ajouter au contour, et
   c'est ce que font tous les autres themes. Le contour de FOCUS
   clavier, lui, demeure : il ne s'adresse pas au meme geste.
   La regle porte le theme, la barre et la classe : elle l'emporte sur
   celle du dessus, qui n'a pas la classe. */
html[data-theme="contraste"] .topbar>a.ico-img,
html[data-theme="contraste"] .topbar button.ico-img,
html[data-theme="contraste"] .wldnav a.ico-img,
html[data-theme="contraste"] .topbar>a.ico-img:hover,
html[data-theme="contraste"] .topbar button.ico-img:hover,
html[data-theme="contraste"] .wldnav a.ico-img:hover{
  border:none;outline:none}
html[data-theme="contraste"] button:focus-visible,
html[data-theme="contraste"] a:focus-visible{outline:3px solid var(--accent)}

/* ===================== THEME PERSONNALISE (v12.00) =====================
   Les VALEURS sont calculees dans wld-common.js et injectees dans une
   feuille « #wldPersoCss » ; ce qui suit ne dit que l'ARCHITECTURE : quelle
   surface prend quelle variable.

   Tout tient a une propriete de l'heritage des variables CSS : redeclarer
   « --text » sur « .topbar » le change pour la barre ET pour tout ce qu'elle
   contient, sans qu'aucune de ces regles ait a etre reecrite. L'en-tete a
   donc ses propres encres, et peut etre d'une clarte opposee au reste de la
   page sans rien lui imposer.

   Ces regles viennent APRES celles de « data-tone » : elles doivent gagner
   sur « html[data-tone=light] button{color:#111} », qui est de la meme
   specificite — seul l'ordre du fichier les departage. */
/* « color » doit etre REDECLAREE ici, et pas seulement « --text » : la
   couleur du texte est calculee une fois sur « body », et les descendants
   heritent de ce RESULTAT, pas de la variable. Sans cette ligne, la barre
   recevait bien ses propres variables mais gardait l'encre du corps — et
   une barre bordeaux se retrouvait ecrite en noir. */
/* v12.08 : ces regles valent pour le theme personnalise ET pour les themes
   ENREGISTRES, dont l'identifiant commence par « th_ ». Les deux sont faits
   de trois fonds et d'encres calculees : ils s'habillent pareil. */
html[data-theme="perso"] .topbar,
html[data-theme^="th_"] .topbar{background:var(--tete);color:var(--text)}
/* Les boutons a pictogramme : voile clair sur fond sombre, sombre sur fond
   clair, calcule pour la barre et non pour la page. */
html[data-theme="perso"] .topbar>a.ico,
html[data-theme="perso"] .topbar button.ico,
html[data-theme="perso"] .wldnav a,
html[data-theme^="th_"] .topbar>a.ico,
html[data-theme^="th_"] .topbar button.ico,
html[data-theme^="th_"] .wldnav a{background:var(--voile-ico)}
html[data-theme="perso"] .topbar>a,
html[data-theme^="th_"] .topbar>a{color:var(--text)}
html[data-theme="perso"] .topbar>a:hover,
html[data-theme="perso"] .topbar>a[aria-current="page"],
html[data-theme^="th_"] .topbar>a:hover,
html[data-theme^="th_"] .topbar>a[aria-current="page"]{color:var(--accent)}
html[data-theme="perso"] .topbar button.ico.quit,
html[data-theme^="th_"] .topbar button.ico.quit{color:var(--muted)}
/* v12.22 : la regle « html[data-theme] button{color:var(--btn-text)} » a
   disparu d'ici. Elle n'existait que pour reprendre la main sur la regle
   « Clair » ci-dessus, qui ne touche plus a « color » : le bouton plein lit
   desormais « --btn-text » depuis sa propre regle de base, et le bouton
   plat garde l'encre qu'il se donne. */
html[data-theme="perso"] button.ghost,
html[data-theme="perso"] a.ghost,
html[data-theme^="th_"] button.ghost,
html[data-theme^="th_"] a.ghost{color:var(--text)}
html[data-theme="perso"] button.danger,
html[data-theme^="th_"] button.danger{color:var(--err)}
/* La vignette des boutons du bandeau porte son propre fond blanc en famille
   claire ; en personnalise c'est la clarte de la BARRE qui decide. */
html[data-theme="perso"] .toplogo,
html[data-theme^="th_"] .toplogo{background:none}


/* ------ horloges du bandeau (v12.26) ------
   Une ligne tant qu'il y en a deux ; au-dela, deux rangs dont la hauteur
   totale ne depasse pas celle des boutons (--wld-ico). Les chiffres suivent
   le meme gabarit : ils retrecissent avec les vignettes aux deux paliers
   d'ecran, sans quoi quatre horloges pousseraient la barre sur deux rangs. */
#wldClocks{display:inline-flex;gap:14px;align-items:center;
  margin:0 var(--wld-air) 0 4px;
  font:700 1.15rem/1.15 'Courier New',monospace;color:#e3b341;
  text-shadow:0 0 6px rgba(227,179,65,.6);font-variant-numeric:tabular-nums;
  letter-spacing:.5px;white-space:nowrap}
#wldClocks.deux-rangs{display:inline-grid;grid-template-columns:auto auto;
  column-gap:16px;row-gap:6px;font-size:calc(var(--wld-ico) * .34);line-height:1.1}
/* Planche de schema : l'etat de sauvegarde loge SOUS les horloges, dans la
   meme hauteur de bouton — les chiffres y cedent un peu de place. */
#clockCol #wldClocks.deux-rangs{font-size:calc(var(--wld-ico) * .29);row-gap:2px}
#wldClocks .hz{display:inline-flex;align-items:center;gap:6px;cursor:default}
#wldClocks .lb{font-size:.52em;color:#8b949e;font-weight:600;letter-spacing:1px;
  text-shadow:none}
#wldClocks .dr{width:1.2em;height:.9em;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);flex:0 0 auto}
#wldClocks .j{font-size:.5em;color:#8b949e;text-shadow:none;margin-left:-3px;
  align-self:flex-start}
#wldClocks .j:empty{display:none}
/* FAMILLE CLAIRE (v12.43) : l'ambre du player SAPHIR-DFX etait pose tel
   quel sur un bandeau devenu blanc — 1,8:1, illisible de biais. On garde la
   teinte, on la fonce, et la lueur (faite pour le noir) s'eteint. */
html[data-tone="light"] #wldClocks{color:#8a5a08;text-shadow:none}
html[data-tone="light"] #wldClocks .lb,
html[data-tone="light"] #wldClocks .j{color:var(--muted)}
/* l'interrupteur a glissiere des preferences (meme dessin que la boite des
   droits de la page d'administration) */
.wld-sw{position:relative;display:inline-block;width:40px;height:22px;
  flex:0 0 auto;cursor:pointer}
.wld-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;
  cursor:pointer;z-index:1}
.wld-sw span{position:absolute;inset:0;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line);transition:background .15s,border-color .15s}
.wld-sw span::after{content:'';position:absolute;top:2px;left:2px;width:16px;
  height:16px;border-radius:50%;background:var(--muted);
  transition:transform .15s,background .15s}
.wld-sw input:checked+span{background:var(--accent);border-color:var(--accent)}
.wld-sw input:checked+span::after{transform:translateX(18px);background:#fff}
.wld-sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.wld-sw input:disabled+span{opacity:.45}
#wldPrefs .hzl{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
#wldPrefs .hzl .n{flex:1;min-width:0;font-size:13.5px}
#wldPrefs .hzl .n b{display:block}
#wldPrefs .hzl .n .d{color:var(--muted);font-size:11.5px}
#wldPrefs .hzl img{width:24px;height:18px;border-radius:2px;
  box-shadow:0 0 0 1px var(--line);flex:0 0 auto}
#wldPrefs .hzl .utc{width:24px;text-align:center;font:700 10px var(--mono);
  color:var(--muted);flex:0 0 auto}
#wldPrefs .hzl select{width:auto;max-width:100%;padding:4px 6px;margin-top:4px;
  font-size:12.5px}

/* ------ panneau de preferences utilisateur (injecte par wld-common) ------ */
/* La roue crantee suit desormais le gabarit commun « .ico » : sa regle
   propre la faisait plus petite que ses voisines. */
#wldPrefs{position:fixed;inset:0;background:rgba(8,12,18,.6);z-index:400;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:auto;padding:60px 16px}
#wldPrefs[hidden]{display:none !important}
#wldPrefs .card{background:var(--sur);border:1px solid var(--accent);
  border-radius:12px;padding:20px 24px;width:min(380px,94vw);
  color:var(--text);font:15px/1.5 system-ui,sans-serif}
#wldPrefs h2{margin:0 0 12px}
#wldPrefs label.thm{display:flex;gap:10px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;margin-bottom:8px}
#wldPrefs label.thm:hover{border-color:var(--accent)}
#wldPrefs label.thm input{width:auto}
#wldPrefs .sw{width:34px;height:20px;border-radius:4px;border:1px solid
  var(--line);flex:0 0 auto;position:relative;overflow:hidden}
#wldPrefs .sw i{position:absolute;right:3px;bottom:3px;width:8px;height:8px;
  border-radius:50%}
#wldPrefs .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#wldPrefs label.thm{margin-bottom:6px}
#wldPrefs label.thm b{font-size:13px}
#wldPrefs label.thm .d{color:var(--muted);font-size:11px}
/* ---- reglage du theme personnalise (v12.00) ---- */
/* La carte s'elargit quand le reglage est ouvert : trois lignes « libelle,
   pastille, code hexadecimal » ne tiennent pas dans 380 px. */
#wldPrefs .card.pz-ouvert{width:min(460px,94vw)}
#wldPersoBloc{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
#wldPersoBloc[hidden]{display:none}
#wldPrefs .pz-i{margin:0 0 8px;font-size:11.5px;color:var(--muted);
  line-height:1.5}
#wldPrefs .pz label{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#wldPrefs .pz .e{flex:1;font-size:12.5px}
#wldPrefs .pz input[type=color]{width:34px;height:24px;padding:0;flex:0 0 auto;
  border:1px solid var(--line);border-radius:5px;background:none;cursor:pointer}
#wldPrefs .pz .hx{width:74px;flex:0 0 auto;padding:3px 6px;border-radius:5px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  font:12px var(--mono);text-align:center}
/* Le verdict de lisibilite : il se lit, il ne se clique pas. */
#wldPrefs .pz-j{margin:8px 0 10px;font-size:11.5px;line-height:1.55;
  color:var(--muted);border-left:2px solid var(--accent);padding-left:8px}
/* LA COULEUR CORRIGEE (v12.54), sous la ligne qu'elle corrige : teinte
   d'avertissement, et la pastille de ce qui est REELLEMENT pose a cote de
   celle que l'on a demandee. */
#wldPrefs .pz-corr{display:flex;align-items:flex-start;gap:7px;margin:2px 0 6px;
  font-size:11.5px;line-height:1.5;color:var(--warn);
  border-left:2px solid var(--warn);padding-left:8px}
#wldPrefs .pz-corr[hidden]{display:none}
#wldPrefs .pz-corr .sw{flex:0 0 auto;width:26px;height:18px}
#wldPrefs .pz-l{margin-top:8px;font-size:11.5px;color:var(--muted);
  line-height:1.9}
#wldPrefs .pz-c{display:inline-flex;align-items:center;gap:4px;padding:2px 4px
  2px 8px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
#wldPrefs .pz-c button{border:0;background:none;color:var(--muted);
  padding:0 4px;font-size:11px;line-height:1;cursor:pointer}
#wldPrefs .pz-c button:hover{color:var(--err)}
/* v12.08 : le ✕ d'une palette enregistree, dans la liste des themes. Il
   reste discret tant qu'on ne survole pas sa ligne : retirer une palette
   commune a toute l'organisation n'est pas un geste a portee de doigt. */
#wldPrefs .pz-x{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:11px;line-height:1;padding:0 4px;opacity:0;transition:opacity .12s}
#wldPrefs .thm:hover .pz-x,#wldPrefs .pz-x:focus{opacity:1}
#wldPrefs .pz-x:hover{color:var(--err)}
/* « Tout ou partie » : le choix de portee vaut pour tous les themes, il
   sort donc du bloc du theme personnalise. */
#wldPrefs #wldThmOu{margin-top:10px;border-top:1px solid var(--line);
  padding-top:10px}
#wldPrefs #wldVerrouMot{margin:8px 0 0;font-size:11.5px;line-height:1.55;
  color:var(--muted);border-left:2px solid var(--wrn,var(--accent));
  padding-left:8px}
#wldPrefs .foot{display:flex;justify-content:flex-end;gap:10px;
  margin-top:14px}
#wldPrefs button{border-radius:8px;padding:7px 14px;cursor:pointer;
  font-size:13.5px;border:1px solid var(--line);background:none;
  color:var(--text)}
/* Seul bouton PLEIN du panneau : son encre se calcule sur l'accent, comme
   celle des autres boutons pleins. Elle etait ecrite en blanc en dur, ce
   qui ne se voyait pas tant qu'une regle de theme la recouvrait ; sur un
   accent clair — celui qu'un panneau sombre appelle — « Enregistrer » se
   lisait blanc sur bleu pale (v12.22). */
#wldPrefs button.save{background:var(--accent);border-color:var(--accent);
  color:var(--btn-text,#fff)}
#wldPrefs .msg{font-size:12px;color:var(--muted);min-height:16px;
  margin-top:8px}

.dtecho{display:block;margin-top:3px;font-size:11.5px;opacity:.8}

/* ===== navigation inter-modules (v9.81) ===== */
/* Plus de filet propre : il doublait le separateur pose dans le
   balisage, et deux traits colles ne separent rien de plus qu'un. Les
   filets sont desormais tous des « topsep », d'une seule facture. */
/* v12.55 : le meme ecart que la barre — il n'est plus decoratif, il est la
   place que la vignette occupe en grandissant. Deux pixels ici et vingt
   ailleurs, et les raccourcis de module seraient les seuls a se
   recouvrir au survol. */
.wldnav{display:flex;align-items:center;gap:var(--wld-gap);flex:0 0 auto;
  flex-wrap:wrap;margin:0 2px}
/* L'opacite servait a distinguer les raccourcis des boutons encadres.
   Sans cadre nulle part, elle ne distinguerait plus que du flou. */
.wldnav a{opacity:1}
html[data-mobile="1"] .wldnav{display:none}
@media print{.wldnav{display:none}}

/* ===== pied de page legal (v9.59) ===== */
#wldPied{margin:38px 0 0;padding:14px 24px 22px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center}
#wldPied a{color:var(--muted);text-decoration:none}
#wldPied a:hover{color:var(--accent);text-decoration:underline}
#wldPied .ed{margin-left:auto;opacity:.75}
html[data-mobile="1"] #wldPied{padding:14px 16px 20px;gap:12px}
html[data-mobile="1"] #wldPied .ed{margin-left:0;width:100%}
@media print{#wldPied{display:none}}

/* ===== bandeau d'echeance (v9.59) =====
   En tete de page, jamais en surimpression : il informe, il n'interrompt
   pas. */
.wldech{display:flex;align-items:center;gap:14px;padding:9px 18px;
  font-size:13.5px;border-bottom:1px solid var(--line);
  background:var(--panel2);color:var(--text);flex-wrap:wrap}
.wldech.proche{border-bottom-color:var(--accent)}
.wldech.chaud{border-bottom-color:var(--warn)}
.wldech.grave{border-bottom-color:var(--err)}
.wldech span{flex:1;min-width:240px}
.wldech a{color:var(--accent);font-weight:600;text-decoration:none;
  white-space:nowrap}
.wldech a:hover{text-decoration:underline}
.wldech .x{background:transparent;border:0;color:var(--muted);
  cursor:pointer;padding:2px 6px;font-size:14px}
@media print{.wldech{display:none}}

/* ===== acces suspendu (v9.59) ===== */
#wldSusp{border:1px solid var(--err);border-radius:10px;
  padding:16px 18px;margin-top:14px;text-align:left}
#wldSusp h3{margin:0 0 8px;font-size:15px;color:var(--err)}
#wldSusp p{margin:0 0 12px;font-size:13.5px;line-height:1.55}
#wldSusp .act{display:flex;gap:8px;flex-wrap:wrap}

/* ===== verrouillage d'ecran (v9.53) =====
   Au-dessus de TOUT, modales comprises : un ecran verrouille ne doit
   laisser passer aucune interaction avec la page. */
#wldLock{position:fixed;inset:0;z-index:9000;
  background:rgba(6,9,14,.94);display:flex;align-items:center;
  justify-content:center;padding:24px}
#wldLock[hidden]{display:none !important}
#wldLock .box{background:var(--sur);border:1px solid #558ed5;
  border-radius:14px;padding:26px 28px;width:min(420px,94vw);
  text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#wldLock .lk{font-size:34px;margin:0 0 6px;line-height:1}
#wldLock h2{margin:0 0 8px;font-size:17px}
#wldLock p{color:var(--muted);font-size:13px;margin:0 0 16px;
  line-height:1.5}
#wldLock input{text-align:center}
#wldLock .msg{min-height:1.3em;margin:10px 0 0;font-size:13px}
#wldLockWarn{position:fixed;left:50%;transform:translateX(-50%);
  bottom:22px;z-index:8900;background:var(--sur);
  border:1px solid var(--warn);border-radius:10px;padding:10px 16px;
  font-size:13.5px;color:var(--text);
  box-shadow:0 6px 22px rgba(0,0,0,.45)}
#wldLockWarn[hidden]{display:none !important}
#wldLockWarn b{color:var(--warn);font-family:var(--mono)}

/* ===== etat d'une tache et avancement (v11.61) =====
   Pictogrammes : wld-etats.js. La pastille garde la couleur de l'etat
   sur le trait ET sur le libelle ; la forme du pictogramme suffit seule
   a l'impression. */
.etat-pas{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--ec,var(--text))}
.etat-ico{flex:0 0 auto;vertical-align:-2px}
.etat-av{display:inline-block;width:64px;height:6px;border-radius:3px;
  background:var(--panel2);border:1px solid var(--line);overflow:hidden;
  vertical-align:middle}
.etat-av>span{display:block;height:100%;background:var(--accent)}
.etat-avn{font:11px var(--mono);color:var(--muted);margin-left:6px;
  vertical-align:middle}
.tache-titre{font-weight:600;display:block;margin-bottom:2px}


/* ===== interrupteur a coulisse (v11.68 : quitte workspace.html pour
   servir aussi le module TODO) ===== */
/* Interrupteur a coulisse. Il dit un ETAT, pas une action : on le lit
   d'un regard sans avoir a chercher la coche. */
.switch{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;
  font-size:12px;color:var(--text);user-select:none}
.switch input{appearance:none;width:34px;height:19px;flex:0 0 auto;
  border-radius:19px;background:var(--panel2);border:1px solid var(--line);
  position:relative;cursor:pointer;transition:background .12s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;
  width:13px;height:13px;border-radius:50%;background:var(--muted);
  transition:transform .12s,background .12s}
.switch input:checked{background:#1d4f57;border-color:#5ad0e0}
.switch input:checked::after{transform:translateX(15px);background:#5ad0e0}
.switch input:disabled{opacity:.45;cursor:default}


/* ===== editeur de texte enrichi (v11.77 : partage par le TODO et la fiche
   du planning — il vivait dans todo.html) ===== */
.rtbar{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.rtbar button{min-width:32px;padding:5px 8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);border-radius:6px;cursor:pointer}
.rtbar .sw{width:22px;height:22px;min-width:22px;padding:0;border-radius:5px}
.rtzone{min-height:110px;max-height:280px;overflow:auto;border:1px solid
  var(--line);border-radius:8px;background:var(--bg);padding:10px 12px;
  font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.rtzone:focus{outline:1px solid var(--accent)}
.rtzone[contenteditable="false"]{background:var(--panel2)}
.rtzone p,.rtzone div{margin:0 0 3px}

/* notes liees (v11.87) */
.notes-liees{margin:8px 0;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.notes-liees .nl-t{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.notes-liees a{display:flex;justify-content:space-between;gap:10px;padding:4px 2px;color:var(--accent);text-decoration:none;font-size:13px;border-top:1px solid var(--line)}
.notes-liees a:first-of-type{border-top:0}
.notes-liees a:hover{text-decoration:underline}
.notes-liees a span{color:var(--muted);font-size:11.5px;white-space:nowrap}

/* ===== ONGLETS du panneau de préférences, et liste des MOTS CLÉS (v12.20) */
.wld-ong{display:flex;gap:4px;margin:0 0 12px;border-bottom:1px solid var(--line)}
.wld-ong button{border:0;background:none;color:var(--muted);cursor:pointer;
  padding:7px 14px;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.wld-ong button:hover{color:var(--text)}
.wld-ong button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.wld-mc{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.wld-mc .mcl{display:flex;align-items:center;gap:8px}
.wld-mc .mcm{flex:1 1 auto;min-width:0;padding:5px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel2);color:var(--text);font-size:13px}
.wld-mc .mcc{flex:0 0 auto;width:auto;padding:4px 6px}
.wld-mc label{display:flex;align-items:center;gap:3px;flex:0 0 auto;cursor:pointer;
  color:var(--muted);font-size:12.5px}
/* La règle générale met les libellés de champ en CAPITALES : juste pour un
   intitulé de deux mots, illisible pour une phrase. Ce volet en porte. */
#wldPrefs [data-vol="mots"] label{text-transform:none;letter-spacing:normal}
.wld-mc .mca{flex:0 0 auto;min-width:64px;max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.wld-mc .pz-x{position:static;flex:0 0 auto}