/* ============================================================
   plugins/barre.css — l'intérieur de la barre Chrono (24/09/2026)
   COPIE CONFORME de la barre d'avant, dessinée en C# :
     police Segoe UI 12, textes doux #6A6A6A, forts #3D3D3D,
     valeurs #1A1A1A, défilant #687D92 sur filet #ECECEC,
     écart de 10 après chaque texte, 38 autour du nom du dossier.
   ⚠ RIEN D'AJOUTÉ. Toute nouveauté visuelle = demandée d'abord.
   ★ RÈGLE DE FRANCK (18/10/2026) : JAMAIS de police, de taille de
   texte ou de couleur ajoutée ou modifiée « en dur » dans un plugin.
   TOUT passe par ce fichier (et Charte.cs pour les plugins dessinés).
   27/09/2026 (Franck) : police Segoe UI 13 (1 px de plus), TOUT en
   noir plein, plus de gris ; burger plus large ; logo parti dans
   le menu du burger.
   Les mesures (--h1, --ag, --ad, --g, --depart...) sont posées par
   le script à partir de ce que dit le plugin.
   ============================================================ */

/* ★ 28/10/2026 soir : la police des noms de la fiche client imaginev2,
   hébergée ICI (plugins/polices/) : aucun appel à Google chez les clients. */
@font-face {
  font-family: "DM Serif Display";
  src: url("polices/dm-serif-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   ★ THÈME (02/10/2026) — toutes les couleurs des plugins, À UN SEUL
   ENDROIT. Le reste du fichier n'écrit plus aucune couleur en dur :
   il utilise ces noms (var(--c-...)).
   Thème « Clair » = le look actuel, à l'identique.
   Pour un futur thème : copier le bloc, le nommer
     :root[data-theme="sombre"] { ... }
   et ne changer que les valeurs. Un thème créé par l'utilisateur
   pourra n'en redéfinir que quelques-unes (les autres restent).
   ============================================================ */
:root,
:root[data-theme="clair"] {
  /* fonds et textes */
  --c-fond:            #FFFFFF;  /* fond des barres, docks, menus */
  --c-texte:           #000000;  /* texte courant (noir plein, 27/09) */
  --c-texte-inverse:   #FFFFFF;  /* texte posé sur l'accent */
  --c-texte-absent:    #8A8A8A;  /* vue absente du dossier */

  /* couleur de la marque */
  --c-accent:          #687D92;  /* vue affichée, titres, actif, fils actifs */
  --c-accent-survol:   #5A6E82;

  /* boutons et survols */
  --c-bouton:          #F2F4F6;  /* gros bouton d'un favori */
  --c-bouton-survol:   #DDE5ED;
  --c-survol:          #EEF2F6;  /* survol des textes cliquables */

  /* traits */
  --c-filet:           #ECECEC;  /* séparations */
  --c-bord-menu:       #C8C8C8;  /* cadre du menu sous la souris */

  /* états oui / non (02/10 : coche verte, croix rouge, comme imaginev2) */
  --c-oui:             #22A845;
  --c-non:             #D93025;
  --c-erreur:          #E07B00;  /* 21/10 : une erreur d'un plugin, dans la barre d'état (orange) */
  --c-etat-fixe:       #C98A00;  /* 06/11 : un avertissement fixe d'un plugin, dans la ligne d'état */
  --punaise-bloquee:   #3B3F45;  /* 06/11 : Magic Slide — punaise d'un panneau bloqué (gris foncé, choix A) */
  --punaise-libre:     #8A8F96;  /* 06/11 : punaise d'un panneau libre (grise, vide) */
  --punaise-survol:    #D6D6D6;  /* 06/11 : fond de la punaise sous la souris */
  --c-arme:            #E07B00;  /* 1er clic d'une action à deux clics (« Tous ») */
  --noms-blanc:        #FFFFFF;  /* 29/10 : la pièce à nommer redevient blanche dessous… */
  --noms-blanc-opacite: 0.15;    /* …à ce point (0 = rien, 1 = blanc plein) */
  --noms-surbrillance: #FF1900;  /* 23/10 : voile qui clignote sur la pièce à nommer (Magic Dim, orange) */

  /* ★ 27/10 : LA POLICE des fenêtres dessinées par les plugins (tableau Magic PDF,
     noms des pièces, ligne de secours de la barre, Préférences). Seul le 1er nom compte. */
  --police:            "Segoe UI";

  /* alertes et bulles */
  --c-danger:          #C62828;  /* ✕ armé */
  --c-ombre:           rgba(0, 0, 0, 0.25);

  /* ★ 15/10/2026 — LE VERRE GIVRÉ des plugins DESSINÉS (Bébé Ring, plus
     tard The Ring). Lu aussi par le plugin (StylePlugins.cs), sans
     compiler. Les pages web ne s'en servent pas encore.
     Opacités : 0 = invisible, 1 = plein. */
  --verre-actif:        1;        /* 1 = flou de Windows derrière, 0 = fond fumé simple */
  --verre-teinte:       #06080B;  /* couleur du verre (thème sombre du Ring) */
  --verre-opacite:      0.50;     /* force de la teinte sur le flou */
  --verre-voile:        0.12;     /* voile ajouté par le plugin par-dessus */
  --verre-reflet:       0.08;     /* reflet clair en haut */
  --verre-liseret:      0.30;     /* bord lumineux */
  --verre-nuage:        0.06;     /* texture « nuage » (0 = aucune) */
  --verre-nuage-taille: 220;      /* taille des nuages (px) */
  --verre-arrondi:      8;       /* rayon des coins (px) */

  /* ★ 17/10/2026 — LE TEXTE des plugins DESSINÉS (The Ring, ses
     Préférences, le Bébé et ses Préférences). Lu par Charte.cs, sans
     compiler. RÉFÉRENCE (Franck) : les propriétés du Ring. Changer une
     valeur ici = elle change PARTOUT. Les pages web ne s'en servent pas. */
  --texte-taille:         11;       /* les lignes (propriétés, vues) en px */
  --texte-couleur:        #9FB0C0;  /* texte des lignes, fond sombre */
  --texte-couleur-clair:  #5A6672;  /* texte des lignes, fond clair */
  --texte-fort:           #FFFFFF;  /* ligne choisie + grands titres, fond sombre */
  --texte-fort-clair:     #1A1F26;  /* idem, fond clair */
  --titre-taille:         10;       /* VUES, FEUILLES, groupes des Préférences, dossiers */
  --titre-fond-opacite:   0.15;     /* léger fond des grands titres (0 = aucun) */

  /* ★ 18/10/2026 — mode Préférences du Bébé : les vues PAS ENCORE dans
     le Bébé (écrites en orange pâle, décalées de 1 cm vers l'extérieur). */
  --texte-absent:         #E3C4A6;  /* leur texte, fond sombre (orange éteint, validé par Franck) */
  --texte-absent-clair:   #B8683A;  /* idem, fond clair */
  --bebe-oeil-absent:     0;        /* œil sur ces lignes : 0 = non, 1 = oui */
  --bebe-case-absent:     0.97;     /* transparence de leur case (0 = invisible, 1 = normale) */

  /* ★ 18/10/2026 — VUE <-> FEUILLE : au survol d'une vue, sa feuille ; au
     survol d'une feuille, ses vues (sans survol : la vue ouverte). Même
     orange que les vues absentes, réglable à part. */
  --texte-lie:            #C9B0A1;  /* fond sombre (18/10 soir : plus vif, on ne le voyait pas) */
  --texte-lie-clair:      #B8683A;  /* fond clair */
  --oeil-lie:             #C9B0A1;  /* l'œil des lignes liées : orange vif, fond sombre */
  --oeil-lie-clair:       #D9661A;  /* idem, fond clair */

  /* ★ 18/10/2026 soir — LA RÉFÉRENCE (Franck : « le bébé devient la
     référence, je règle tout ici, le Ring s'adaptera ») : titres, boutons,
     fond des lignes et fond principal. Valeurs = le look d'avant. */
  --grand-titre-taille:        10;       /* VUES, FEUILLES */
  --grand-titre-couleur:       #FFFFFF;  /* fond sombre */
  --grand-titre-couleur-clair: #1A1F26;  /* fond clair */
  --petit-titre-taille:        11;       /* les dossiers de l'Arborescence */
  --petit-titre-couleur:       #CCCCCC;  /* fond sombre */
  --petit-titre-couleur-clair: #5A6672;  /* fond clair */
  --bouton-taille:             12;       /* Préférences, Fixe, Feuilles, flèches, Diapo */
  --bouton-couleur:            #9FB0C0;  /* au repos, fond sombre */
  --bouton-couleur-clair:      #5A6672;  /* au repos, fond clair */
  --bouton-actif:              #FFFFFF;  /* actif (Fixe, Diapo), fond sombre */
  --bouton-actif-clair:        #1A1F26;  /* actif, fond clair */
  --case-couleur:              #585C5F;  /* fond des lignes, fond sombre */
  --case-couleur-clair:        #000000;  /* fond des lignes, fond clair */
  --case-opacite:              1;     /* fond sombre */
  --case-opacite-clair:        0.06;     /* fond clair */
  --case-bord-opacite:         0;     /* bord des lignes, fond sombre */
  --case-bord-opacite-clair:   0.09;     /* bord des lignes, fond clair */
  --fond-couleur:              #464A4E;  /* fond principal, fond sombre */
  --fond-couleur-clair:        #F4F6F8;  /* fond principal, fond clair */
  --fond-opacite:              0.94;     /* fond sombre (et teinte) */
  --fond-opacite-clair:        0.88;     /* fond clair */
  /* ★ 19/10/2026 (Franck : « trop transparents ») — les cases du SOUS-ANNEAU
     du Ring : il s'ouvre par-dessus le dessin, il lui faut plus d'opacité. */
  --sous-fond-couleur:         #464A4E;  /* fond sombre */
  --sous-fond-couleur-clair:   #E6E9EC;  /* fond clair */
  --sous-fond-opacite:         0.94;     /* fond sombre (avant : 0.75) */
  --sous-fond-opacite-clair:   0.95;     /* fond clair */
  /* ★ 18/10 soir : la ligne de la VUE OUVERTE et la pilule du SURVOL.
     « accent » = la couleur choisie dans le Ring (comme avant). */
  --actif-fond-couleur:        #D4E0ED;   /* la pilule de la vue ouverte */
  --actif-fond-opacite:        0.32;     /* fond sombre */
  --actif-fond-opacite-clair:  0.19;     /* fond clair */
  --actif-texte-couleur:       #FFFFFF;   /* son texte, fond sombre */
  --actif-texte-couleur-clair: accent;   /* son texte, fond clair */
  --survol-couleur:            #FFFFFF;   /* la pilule qui suit la souris */
  --survol-opacite:            1;
  --survol-bord-opacite:       1;
  --oeil-couleur:              #8498B3;   /* l'œil des lignes, au repos */
  --oeil-survol:               #D9D9D9;  /* l'œil, la souris dessus */

  /* ★ 18/10/2026 — le grand « Diaporama » écrit en haut du dessin tant que
     la diapo du Bébé est active (Franck : « sinon on oublie »). Style du
     nom client d'imaginev2. La police est EMBARQUÉE dans le plugin. */
  --diapo-police:         "DM Serif Display";
  --diapo-taille:         72;       /* en px */
  --diapo-couleur:        #CFCFCF;  /* le gris clair de « Mme » */
  --diapo-opacite:        1;        /* 0 = invisible, 1 = plein */
  --diapo-haut:           12;       /* écart au haut du dessin, en px */

  /* ============================================================
     ★ 28/10/2026 soir — LA BARRE MAGIC DESK : DEUX HABILLAGES
     Animé (au départ) : les actions en grands mots gris qui naissent et
     s'évaporent. Classique (« pour les puristes ») : un petit tiroir avec
     des lignes, comme un menu de logiciel récent. Le client choisit dans
     Préférences > Général. Tout se règle en direct dans « Style ».
     Nombres seuls : px pour les tailles, ms pour les durées.
     ============================================================ */
  /* les boutons de la ligne (Magic Dim, Magic Time…) — les deux habillages */
  --bt-taille:             14;       /* taille du texte */
  --bt-arrondi:            3;        /* coins */
  --bt-survol:             #AF9F9D;  /* la souris dessus */
  --bt-on-fond:            #D9DBDE;  /* plugin en marche : fond */
  --bt-on-survol:          #B8BFC7;  /* en marche, la souris dessus */
  --bt-on-texte:           #353536;  /* en marche : texte */
  --bt-trait-couleur:      #82A271;  /* en marche : le trait souligné */
  --bt-trait-epaisseur:    2;        /* épaisseur du trait (à 0 : aucun) */
  --bt-off-texte:          #8C8C8C;  /* arrêté : texte */

  /* ANIMÉ — les mots */
  --mot-police:            "DM Serif Display";
  --mot-taille:            18;       /* les actions (Recalculer…) */
  --mot-info-taille:       15;       /* une information (ex. rien à faire) */
  --mot-erreur-taille:     17;       /* un message d'erreur */
  --mot-couleur:           #8C8C8C;  /* gris très léger */
  --mot-survol:            #4C4F52;  /* la souris dessus */
  --mot-erreur-couleur:    #E07B00;  /* une erreur (orange) */
  --mot-ecart:             23;       /* écart entre deux mots */
  --mot-naissance:         380;      /* naissance d'un mot (ms) */
  --mot-decalage:          60;       /* décalage entre deux mots qui naissent (ms) */
  --mot-evaporation:       650;      /* évaporation (ms) */
  --mot-flou:              6;        /* flou de la naissance et de l'évaporation */
  --mot-distance:          71;       /* chemin parcouru en s'évaporant */
  --mot-hasard:            1;        /* 1 = évaporations au hasard, 0 = toujours la fumée */
  --mot-sursaut:           1.8;     /* le petit sursaut d’un mot cliqué (à 1 : aucun) */
  /* ANIMÉ — la bande sous la barre (toujours opaque) */
  --anime-fond:            #FFFFFF;  /* couleur de la bande */
  --anime-bord:            #ECECEC;  /* son filet du bas */
  --anime-bord-epaisseur:  1;        /* épaisseur du filet, en px (à 0 : aucun) */
  --anime-marge:           4;        /* marge en haut et en bas des mots */
  --anime-marge-cote:      18;       /* marge à gauche et à droite */
  --anime-arrondi:         0;        /* coins de la bande */

  /* CLASSIQUE — le tiroir */
  --classique-fond:          #FFFFFF;
  --classique-bord:          #DDE2E8;  /* son cadre */
  --classique-arrondi:       8;        /* coins */
  --classique-ecart:         6;        /* écart sous la barre */
  --classique-marge:         8;        /* marge intérieure */
  --classique-titre-taille:  11;       /* le nom du plugin (MAGIC DIM) */
  --classique-titre-couleur: #8A96A3;
  --classique-texte-taille:  13;       /* les lignes (Recalculer…) */
  --classique-texte-couleur: #1E293B;
  --classique-ligne-hauteur: 30;       /* hauteur d'une ligne */
  --classique-survol:        #EEF2F6;  /* ligne sous la souris */
  --classique-erreur:        #E07B00;  /* une erreur */

  /* ★ 28/10/2026 soir — LES NOMS DES PIÈCES EN CASCADE (Animé, Magic Dim
     « Renommer les pièces »). Dessinés par le plugin (CascadeNoms.cs) : un
     réglage changé sert à la prochaine liste. Classique = la liste d'avant. */
  --cascade-police:        "DM Serif Display";
  --cascade-taille:        60;       /* taille des noms */
  --cascade-interligne:    1.3;     /* espace entre deux noms (× la taille) */
  --cascade-style:         1;        /* la chute : 1 pluie, 2 feuilles, 3 rideau, 4 lettres, 0 au hasard */
  --cascade-couleur:       #828282;  /* les noms au repos (29/10 : atelier Lisibilité) */
  --cascade-halo:          0.05;        /* halo clair autour des lettres, pour les lire sur un plan coloré (à 0 : aucun) */
  --cascade-halo-couleur:  #FAFAFA;  /* couleur du halo */
  --cascade-survol:        #1A1F26;  /* la souris dessus */
  --cascade-duree:         700;      /* chute des feuilles (ms) */
  --cascade-decalage:      45;       /* décalage entre deux noms qui tombent (ms) */
  --cascade-balancement:   120;      /* balancement à gauche et à droite (px) */
  --cascade-hasard:        70;       /* hasard des feuilles, en % */
  --cascade-vol:           450;      /* vol du nom choisi jusqu'à la pièce (ms) */
  --cascade-vol-couleur:   #687D92;  /* le nom qui vole */
  --cascade-sursaut:       1.15;     /* le petit sursaut du nom de la pièce renommée (à 1 : aucun) */
  --cascade-glisse:        320;      /* la liste glisse vers la pièce suivante (ms) */
  --cascade-ecart-piece:   60;       /* écart entre la pièce et la liste (px) */
  --cascade-evaporation:   320;      /* les noms s'effacent à la fin (ms) */
  --cascade-ecart-maison:  40;       /* 29/10 : écart entre la maison (toutes les pièces) et la liste (px) */

  /* ★ 29/10/2026 — LES PETITES FENÊTRES « GIVRE » (liste des noms de pièces,
     tableau des couleurs de Magic PDF) : gris très clair, coins à peine
     arrondis, ombre en bas à gauche, ✕ rouge / ✓ vert (--c-non / --c-oui). */
  --fen-fond:              #D6D6D6;  /* le fond */
  --fen-filet:             #DCDCDC;  /* le filet autour */
  --fen-survol:            #D4D4D4;  /* ligne sous la souris */
  --fen-texte:             #54585F;  /* les noms, les calques */
  --fen-texte-survol:      #000000;  /* la souris dessus */
  --fen-chiffres:          #546469;  /* nombres, cases, « autre nom » */
  --fen-police:            "Arial";
  --fen-taille:            14;       /* noms des pièces */
  --fen-taille-pdf:        13;       /* lignes de Magic PDF */
  --fen-arrondi:           4;        /* arrondi des coins (px) */
  --fen-ombre-flou:        16;       /* flou de l'ombre */
  --fen-ombre-distance:    9;        /* l'ombre part en bas à gauche de tant (px) */
  --fen-ombre-opacite:     0.37;     /* force de l'ombre (0 à 1) */
  --fen-poignee:           51;       /* hauteur de la bande en haut, pour attraper la fenêtre (px) */
  --fen-marge-vue:         16;       /* écart avec le bord de la vue à l'ouverture (px) */
  --fen-cascade-duree:     260;      /* arrivée des lignes (ms, Animé) */
  --fen-cascade-decalage:  30;       /* décalage entre deux lignes (ms) */
  /* ★ 05/11/2026 : les mesures qui étaient écrites dans le code */
  --fen-marge:             2;        /* marge autour du contenu, côtés et bas (px) */
  --fen-liste-max:         677;      /* hauteur maximum d'une liste avant le défilement (Magic PDF, couleurs) */
  --fen-pdf-largeur:       258;      /* largeur minimum de la fenêtre Magic PDF */
  --fen-noms-largeur:      165;      /* largeur minimum de la liste des noms de pièces */
  --fen-couleurs-largeur:  200;      /* largeur minimum de la fenêtre des couleurs (Magic Color) */
  --fen-couleurs-message:  320;      /* largeur maximum du message de la fenêtre des couleurs */

  /* ★ 29/10/2026 — LE FOND DES LISTES posées sur le plan (noms des pièces
     en cascade + tableau des couleurs de Magic PDF) : le plan flouté, un
     voile léger, des bords qui s'estompent (atelier « Lisibilité »). */
  --liste-flou:            5;        /* flou du plan derrière la liste (0 = aucun) */
  --liste-voile:           0.23;     /* voile par-dessus (0 = aucun, 1 = plein) */
  --liste-voile-couleur:   #FFFFFF;  /* couleur du voile */
  --liste-fondu:           37;       /* largeur des bords qui s'estompent (px) */
  --liste-marge:           12;       /* espace entre les mots et le début du fondu (px) */

  /* ★ 29/10/2026 — MAGIC SELECTOR : pendant le lasso, les objets déjà
     entièrement dedans se dessinent par-dessus, en ROUGE (Franck : « pour
     différencier de Revit »). Simple aperçu : la vraie sélection reste bleue.
     Lu à l'allumage de Magic Selector. */
  --lasso-apercu:            #FF1A1A;  /* couleur des objets pris */
  --lasso-apercu-opacite:    1;        /* 0 = invisible, 1 = plein */
  --lasso-apercu-epaisseur:  2;        /* épaisseur des traits (px) */
  /* ★ 05/11/2026 : le lasso lui-même (avant : la couleur d'accent) */
  --lasso-trait:             #687D92;  /* couleur du trait du lasso */
  --lasso-epaisseur:         1.5;      /* épaisseur du trait du lasso (px) */
  --lasso-fond:              #687D92;  /* couleur de l'intérieur du lasso */
  --lasso-fond-opacite:      0.12;     /* intérieur : 0 = invisible, 1 = plein */

  /* ★ 29/10/2026 — MAGIC COLOR : le contour de la zone EN TRAVAIL (tant
     qu'on clique, Ctrl, Maj…), dessiné par Revit. Il disparaît à la fin. */
  --color-contour:            #FF1A1A;  /* couleur du contour */
  --color-contour-epaisseur:  6;        /* épaisseur Revit (1 à 16) */
  --color-gene:               #E07B00;  /* les traits qui empêchent de colorier : le cercle orange autour */
  --color-cercle:             8;        /* rayon mini du cercle, en mm sur le papier */

  /* ★ 05/11/2026 — LA BULLE D'AIDE (petit message noir posé sur le dessin).
     Avant, ses couleurs suivaient le texte et le fond : elles sont à part. */
  --bulle-fond:              #000000;  /* fond de la bulle */
  --bulle-texte:             #FFFFFF;  /* texte de la bulle */
  --bulle-police:            "Segoe UI";
  --bulle-taille:            13;       /* taille du texte (la 2e ligne, indicative : 1,5 de moins) */
  --bulle-largeur:           388;      /* largeur maximum (px) */
  --bulle-arrondi:           4;        /* arrondi des coins (px) */
  --bulle-marge-cote:        22;       /* marge intérieure gauche et droite (px) */
  --bulle-marge-haut:        10;       /* marge intérieure haut et bas (px) */

  /* ★ 05/11/2026 — L'ICÔNE DU BOUTON Magic Desk dans le ruban de Revit
     (au prochain démarrage de Revit). */
  --ruban-icone-fond:        #687D92;  /* fond de l'icône */
  --ruban-icone-texte:       #FFFFFF;  /* lettres de l'icône */
  --ruban-icone-police:      "Segoe UI";

  /* ============================================================
     ★ 04/11/2026 (Franck) — LA BARRE EN TOUCHES (nouvelle version du
     plugin). Touches en relief, LED dedans, noms courts, temps sur deux
     lignes, fond = celui du dessin de Revit. Deux jeux de couleurs : touches
     NOIRES sur fond clair, touches GRIS-BLEU (+ liseré) sur fond sombre.
     L'ancienne version du plugin n'est pas touchée.
     ============================================================ */
  --barre-hauteur:         44;       /* hauteur de la ligne, en points (lue AUSSI par le plugin) */
  --barre-defilant:        20;       /* hauteur de la ligne qui défile sous la barre (lue AUSSI par le plugin) */
  --barre-secours-taille:  12;       /* texte de la barre de secours (sans internet) */
  --t-hauteur:             31;       /* hauteur d'une touche (px) */
  --t-arrondi:             5;
  --t-taille:              13;       /* texte des touches ET des temps (jamais plus petit) */
  --t-ecart:               8;        /* entre deux touches */
  --t-marge:               10;       /* marge à gauche et à droite du nom */
  --t-police:              "Segoe UI";
  /* fond CLAIR : touches noires */
  --t-c-haut:              #C0C9CE;
  --t-c-mi:                #8B8F9C;
  --t-c-bas:               #404040;
  --t-c-pied:              #454545;
  --t-c-bord:              #949494;
  --t-c-tranche:           #9598A3;  /* l'épaisseur sous la touche */
  --t-c-texte:             #F0F0F0;
  --t-c-survol:            #A3C4EF;
  --t-c-ombre:             rgba(0, 0, 0, 0.35);
  --t-c-liseret:           rgba(0, 0, 0, 0);   /* aucun */
  /* fond SOMBRE : touches gris-bleu, liseré clair */
  --t-s-haut:              #8A9FA8;
  --t-s-mi:                #212934;
  --t-s-bas:               #212934;
  --t-s-pied:              #454545;
  --t-s-bord:              #4F5B6D;
  --t-s-tranche:           #000000;
  --t-s-texte:             #D6D6D6;
  --t-s-survol:            #B2D0F0;
  --t-s-ombre:             rgba(0, 0, 0, 0.5);
  --t-s-liseret:           rgba(209, 222, 238, 0.09);
  --t-actif-texte:         #FFFFFF;  /* nom d'une touche allumée */
  /* ★ 04/11 (Franck : « on a pas tout à fait la couleur du fond ») : l'ombre
     sous les touches ; elle doit rester DANS la barre, sinon elle est coupée
     net en bas et fait une bande plus sombre. */
  --t-c-lumiere:           0;     /* 04/11 : les touches glissent vers le blanc, fond clair (de zéro : normal, à un : blanches) */
  --t-s-lumiere:           0.00;     /* idem, fond sombre */
  --vb-blanc:              #FFFFFF;  /* la couleur visée tout au bout du curseur */
  --vb-bord:               #A9AFB9;  /* le contour d'une touche blanche */
  --vb-tranche:            #B9BEC7;  /* sa tranche */
  --vb-texte:              #3D4555;  /* le nom (éteint) sur une touche blanche */
  --vb-actif:              #111827;  /* le nom (allumé) sur une touche blanche */
  --vb-bascule:            0.4;      /* à partir de là, les noms passent au foncé */
  --t-ombre-x:             -3;       /* 04/11 : lumière en haut à droite, l'ombre part à GAUCHE (px, négatif = gauche) */
  --t-ombre-y:             4;        /* décalage vers le bas (px) */
  --t-ombre-flou:          6;        /* flou (px) */
  /* les LED */
  --led-largeur:           18;
  --led-epaisseur:         3;
  --led-eteinte:           #161A22;
  --led-bleu:              #7FB6FF;  /* allumé / à toi de jouer */
  --led-bleu-halo:         #4A90FF;
  --led-orange:            #FFB347;  /* le plugin travaille */
  --led-orange-halo:       #FF9500;
  --led-clignote:          700;      /* l'orange qui respire (ms) */
  --led-vert:              #6DFF8A;  /* fini : deux flashs */
  --led-vert-halo:         #22D455;
  --led-flash:             500;      /* durée d'un flash vert (ms) */
  /* les temps, sur deux lignes */
  --tps-c-titre:           #737373;
  --tps-c-valeur:          #191919;
  --tps-c-filet:           #CFCFCF;
  --tps-s-titre:           #9AA3B3;
  --tps-s-valeur:          #D9D9D9;
  --tps-s-filet:           #3A4253;
  /* les options qui remplacent les touches */
  --options-delai:         500;      /* survol avant qu'elles arrivent (ms) */
  --rangee-ecart:          8;        /* écart avec la touche gardée (px) */
  --o-hauteur:             28;       /* hauteur d'une touche d'option */
  --champ-fond:            #16181D;  /* le champ de Magic Length */
  --champ-texte:           #E6ECF7;
  --champ-largeur:         150;
  --rec-c:                 #555C6B;  /* les 3 derniers textes, fond clair */
  --rec-c-survol:          #1D2230;
  --rec-s:                 #9AA3B3;  /* idem, fond sombre */
  --rec-s-survol:          #FFFFFF;
  /* le bandeau et les noms des panneaux sur fond sombre */
  --def-s-texte:           #9FB0C0;
  --def-s-filet:           #3A4253;
  --noms-s:                #D9D9D9;

  /* ============================================================
     ★ 05/11/2026 — LA FENÊTRE PRÉFÉRENCES (Coeur\FenetrePreferences.cs)
     Avant, ces tailles étaient écrites dans le code. Valeurs d'origine
     ci-dessous : rien ne change à l'écran. Prises à chaque ouverture
     de la fenêtre. Nombres seuls, en px.
     ============================================================ */
  --prefs-largeur:         967;      /* largeur de la fenêtre */
  --prefs-police:          "Segoe UI";   /* police de la fenêtre */
  --prefs-hauteur:         680;      /* hauteur de la fenêtre */
  --prefs-taille:          12.5;     /* taille du texte */
  --prefs-titre-taille:    11;       /* taille des titres (COTES, PIÈCES…) et de l'en-tête */
  --prefs-signes-plus:     6;        /* ✕ et ✓ en bas : plus grands que le texte de */
  --prefs-bord:            22;       /* marge à gauche et à droite de l'en-tête et du bas */
  --prefs-tete-marge:      14;       /* marge en haut et en bas de l'en-tête */
  --prefs-pied-marge:      10;       /* marge en haut et en bas du bas de fenêtre */
  --prefs-pied-ecart:      26;       /* écart entre Visualiser, ✕ et ✓ */
  --prefs-onglets-largeur: 170;      /* colonne des onglets (Général, Magic Dim…) */
  --prefs-onglet-retrait:  22;       /* retrait du nom de l'onglet */
  --prefs-onglet-espace:   8;        /* espace au-dessus et au-dessous d'un onglet */
  --prefs-contenu-cote:    28;       /* marge à gauche et à droite du contenu */
  --prefs-contenu-haut:    18;       /* marge en haut et en bas du contenu */
  --prefs-libelles:        340;      /* largeur de la colonne des libellés */
  --prefs-ecart-choix:     18;       /* écart entre deux choix (Oui / Non…) */
  --prefs-ecart-actions:   22;       /* écart avant Enregistrer / Supprimer */
  --prefs-bloc-espace:     16;       /* espace sous chaque bloc de réglages */
  --prefs-liste-hauteur:   320;      /* hauteur maximale d'une liste déroulante */
  --prefs-ombre-flou:      16;       /* flou de l'ombre de la fenêtre */
  --prefs-ombre-opacite:   0.15;     /* force de l'ombre (0 à 1) */

  /* ============================================================
     ★ 05/11/2026 — LES FENÊTRES GESTION, VITRINE ET MESSAGES (Coeur\Message.cs)
     Valeurs d'origine : rien ne change à l'écran. Prises à la prochaine ouverture.
     La fenêtre de SECOURS s'affiche quand le serveur ne répond pas.
     ============================================================ */
  --msg-gestion-largeur:   960;      /* largeur de Gestion (Mon compte) */
  --msg-vitrine-largeur:   1140;     /* largeur de la vitrine (+ Outils) */
  --msg-page-largeur:      480;      /* largeur des autres messages (essai, annonces…) */
  --msg-hauteur-max:       90;       /* jamais plus haute que ce % de la fenêtre de Revit */
  --msg-secours-largeur:   460;      /* secours : largeur */
  --msg-secours-marge:     24;       /* secours : marge à gauche et à droite */
  --msg-secours-logo:      12;       /* secours : taille de « Magic Desk » en haut (texte indicatif) */
  --msg-secours-titre:     15;       /* secours : taille du titre */
  --msg-secours-texte:     12.5;     /* secours : taille du texte et du bouton */
  --msg-secours-interligne: 19;      /* secours : hauteur d'une ligne de texte */
  --msg-secours-bouton:    16;       /* secours : marge à gauche et à droite du bouton */
}


html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--fond-dessin, var(--c-fond));   /* ★ 04/11 : le fond du dessin (nouveau plugin) */
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--c-texte);
  cursor: default;
  user-select: none;
}

/* ---- la ligne du chrono : hauteur donnée par le plugin ---- */
.b-ligne {
  position: relative;
  height: calc(var(--h1, 26) * 1px);
  background: var(--fond-dessin, var(--c-fond));
}

/* Le chrono au centre. Quand la barre s'allonge (panneau ouvert),
   le plugin donne l'allongement (--ag / --ad) : le contenu ne bouge pas. */
.b-contenu {
  position: absolute;
  inset: 0;
  padding-left: calc(var(--ag, 0) * 1px);
  padding-right: calc(var(--ad, 0) * 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.b-contenu > span { margin-right: 10px; }
.b-contenu > .b-dernier { margin-right: 0; }

/* Tout en noir plein (27/09) : titres, valeurs, tirets. */
.b-titre, .b-val, .b-sep { color: var(--c-texte); }
.b-gras { font-weight: 700; }

/* Le burger (24/09), plus large le 27/09 : plus facile à attraper.
   Isolé d'un centimètre du reste, comme l'était le logo. */
.b-contenu > .b-burger {
  color: var(--c-texte);
  font-size: 17px;
  padding: 0 6px;
  margin-right: 38px;
  cursor: pointer;
}

/* Le survol du nom de la vue ou de son temps ouvre la liste des vues. */
.b-vue { cursor: default; }

/* ---- les noms des panneaux du store ---- */
.b-noms {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.b-nom {
  position: absolute;
  top: 50%;
  left: calc(var(--g, 0) * 1px);
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--c-texte);
  cursor: pointer;
  pointer-events: auto;
}
.b-nom[data-ep="1"] { font-weight: 700; }

/* ---- ★ 21/10/2026 : LES BOUTONS DE MAGIC DESK ----
   COLLÉS au temps, de part et d'autre (Franck : « ils sont très loin ») :
   à gauche Magic Dim (marche / arrêt) et ↻ (tout recalculer),
   à droite Compte et ? (aide). Un centimètre d'écart avec le temps. */
.b-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.b-btns-g { margin-right: 38px; }
.b-btns-d { margin-left: 38px; }
.b-btns:empty { display: none; }

/* ★ 28/10/2026 soir (Franck : « Animé + Moderne ») : le plugin en marche a
   un fond pâle et un trait souligné sous son nom. Tout se règle (--bt-…). */
.b-btn {
  position: relative;
  padding: 1px 9px;
  border-radius: calc(var(--bt-arrondi) * 1px);
  font-size: calc(var(--bt-taille) * 1px);
  color: var(--c-texte);
  cursor: pointer;
}
.b-btn:hover { background: var(--bt-survol); }
/* les petits boutons-signes (↻, ?) */
.b-btn[data-k="icone"] { font-size: calc((var(--bt-taille) + 2) * 1px); padding: 0 6px; line-height: 1; }
/* EN MARCHE : fond pâle + trait souligné */
.b-btn[data-e="on"] { background: var(--bt-on-fond); color: var(--bt-on-texte); }
.b-btn[data-e="on"]:hover { background: var(--bt-on-survol); }
.b-btn[data-e="on"]::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: calc(var(--bt-trait-epaisseur) * 1px);
  background: var(--bt-trait-couleur);
}
/* ARRÊTÉ : gris */
.b-btn[data-e="off"] { color: var(--bt-off-texte); }
/* FERMÉ (démo finie, pas dans le Pack) : rouge */
.b-btn[data-e="ferme"] { color: var(--c-non); }
/* ★ 27/10/2026 (Franck) : un plugin QUI TRAVAILLE (ex. Magic PDF qui lit le
   PDF et crée ses lignes) : le bouton CLIGNOTE, allumé (comme sélectionné) /
   blanc (comme au repos). L'animation tourne dans la page : elle continue
   même quand Revit est occupé. Rythme : --b-clignote (un cycle complet). */
.b-btn[data-e="travail"] { animation: b-clignote var(--b-clignote, 0.8s) steps(1, end) infinite; }
@keyframes b-clignote {
  0%   { background: var(--bt-on-fond); color: var(--bt-on-texte); }
  50%  { background: transparent;      color: var(--c-texte); }
}

/* ---- ★ 21/10/2026 : LA BARRE D'ÉTAT (sous la ligne Chrono) ----
   Invisible au repos. Au survol d'un bouton : ses choix, centrés sous
   lui (une .b-zone par bouton, placée par la page avec --zg). Une erreur :
   en orange, sous le bouton du plugin. Elle va du premier au dernier
   bouton (--eg, --el) et se pose sous la ligne, ou sous le bandeau quand il
   défile (--ey). Pas d'ombre : la fenêtre ne montre que la barre et elle. */
/* ★ 28/10/2026 soir : la barre d'état a DEUX HABILLAGES (body[data-look]).
   .b-etat = le cadre (invisible) ; .b-fond = ce qui se voit (la bande
   animée ou le tiroir classique), à la taille des mots qu'il porte (--fx,
   --fw, --fh, posés par la page). La fenêtre du plugin ne montre QUE .b-fond. */
.b-etat {
  position: absolute;
  top: calc(var(--ey, 26) * 1px);
  left: calc(var(--eg, 0) * 1px);
  width: calc(var(--el, 400) * 1px);
  height: calc(var(--e-ecart) + var(--fh, 30) * 1px + 2 * var(--e-mv));
  z-index: 5;
  white-space: nowrap;
  --e-ecart: 0px;
  --e-mv: calc(var(--anime-marge) * 1px);
  --e-mh: calc(var(--anime-marge-cote) * 1px);
}
.b-etat[hidden] { display: none; }
.b-fond {
  position: absolute;
  top: var(--e-ecart);
  left: calc(var(--fx, 0) * 1px - var(--e-mh));
  width: calc(var(--fw, 0) * 1px + 2 * var(--e-mh));
  height: calc(var(--fh, 30) * 1px + 2 * var(--e-mv));
  box-sizing: border-box;
}
.b-zone {
  position: absolute;
  top: calc(var(--e-ecart) + var(--e-mv));
  left: calc(var(--zg, 0) * 1px);
  display: flex;
  align-items: center;
}
.b-zone[hidden], .b-zone [hidden] { display: none !important; }
.b-zone-titre:empty, .b-choix-liste:empty, .b-erreur:empty { display: none; }
.b-choix-liste { display: flex; }
.b-choix { cursor: pointer; }
.b-choix[data-e="vide"] { cursor: default; font-style: italic; }

/* ---------- ANIMÉ : des mots, pas de boutons ---------- */
body:not([data-look="classique"]) .b-fond {
  background: var(--anime-fond);
  border-bottom: calc(var(--anime-bord-epaisseur) * 1px) solid var(--anime-bord);
  border-radius: calc(var(--anime-arrondi) * 1px);
}
body:not([data-look="classique"]) .b-zone { gap: calc(var(--mot-ecart) * 1px); }
body:not([data-look="classique"]) .b-zone-titre { display: none; }
body:not([data-look="classique"]) .b-choix-liste { gap: calc(var(--mot-ecart) * 1px); }
body:not([data-look="classique"]) .b-choix,
body:not([data-look="classique"]) .b-erreur,
body:not([data-look="classique"]) .b-pos {
  display: inline-block;
  font-family: var(--mot-police), Georgia, serif;
  font-size: calc(var(--mot-taille) * 1px);
  line-height: 1.15;
  color: var(--mot-couleur);
  transition: color 160ms;
}
body:not([data-look="classique"]) .b-choix:hover,
body:not([data-look="classique"]) .b-pos:hover { color: var(--mot-survol); }
body:not([data-look="classique"]) .b-choix[data-e="vide"] { font-size: calc(var(--mot-info-taille) * 1px); }
body:not([data-look="classique"]) .b-choix[data-e="vide"]:hover { color: var(--mot-couleur); }
body:not([data-look="classique"]) .b-choix[data-e="ferme"] { color: var(--c-non); }
body:not([data-look="classique"]) .b-erreur {
  font-size: calc(var(--mot-erreur-taille) * 1px);
  color: var(--mot-erreur-couleur);
}
body:not([data-look="classique"]) .b-pos { cursor: pointer; background: none; padding: 0 4px; }
body:not([data-look="classique"]) .b-pos:hover { background: none; }

/* ---------- CLASSIQUE : un petit tiroir avec des lignes ---------- */
body[data-look="classique"] .b-etat {
  --e-ecart: calc(var(--classique-ecart) * 1px);
  --e-mv: calc(var(--classique-marge) * 1px);
  --e-mh: calc(var(--classique-marge) * 1px);
}
body[data-look="classique"] .b-fond {
  background: var(--classique-fond);
  border: 1px solid var(--classique-bord);
  border-radius: calc(var(--classique-arrondi) * 1px);
}
body[data-look="classique"] .b-zone { flex-direction: column; align-items: stretch; gap: 2px; min-width: 150px; }
body[data-look="classique"] .b-zone-titre {
  padding: 0 10px 4px;
  font-size: calc(var(--classique-titre-taille) * 1px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--classique-titre-couleur);
}
body[data-look="classique"] .b-choix-liste { flex-direction: column; }
body[data-look="classique"] .b-choix,
body[data-look="classique"] .b-erreur {
  display: flex;
  align-items: center;
  height: calc(var(--classique-ligne-hauteur) * 1px);
  padding: 0 10px;
  border-radius: calc(var(--classique-arrondi) * 0.6px);
  font-size: calc(var(--classique-texte-taille) * 1px);
  color: var(--classique-texte-couleur);
}
body[data-look="classique"] .b-choix:hover { background: var(--classique-survol); }
body[data-look="classique"] .b-choix[data-e="ferme"] { color: var(--c-non); }
body[data-look="classique"] .b-choix[data-e="vide"] { color: var(--c-texte-absent); }
body[data-look="classique"] .b-choix[data-e="vide"]:hover { background: none; }
body[data-look="classique"] .b-erreur { color: var(--classique-erreur); }
body[data-look="classique"] .b-saisie-place { padding: 2px 6px; }

/* ★ Le mode « Viser » (fenêtre Style ouverte) : un clic règle, il n'agit pas */
body[data-vise="1"] .b-btn,
body[data-vise="1"] .b-choix,
body[data-vise="1"] .b-pos,
body[data-vise="1"] .b-erreur,
body[data-vise="1"] .b-fond { cursor: crosshair; }

/* ---- Magic Length : [ ◀ Préfixe ]  ( texte  × )  [ Suffixe ▶ ] ---- */
.b-saisie-place { display: flex; align-items: center; gap: 8px; }
.b-pos {
  padding: 2px 10px;
  border-radius: 3px;
  background: var(--c-bouton);
  color: var(--c-texte);
  cursor: pointer;
}
.b-pos:hover { background: var(--c-bouton-survol); }
.b-champ {
  display: flex;
  align-items: center;
  width: 200px;
  border-bottom: 1px solid var(--c-bord-menu);
}
.b-champ:focus-within { border-bottom-color: var(--c-accent); }
.b-entree {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  margin: 0;
  padding: 2px 2px;
  border: 0;
  background: transparent;
  color: var(--c-texte);
  outline: none;
}
.b-entree::placeholder { color: var(--c-texte-absent); font-style: italic; }
.b-entree::selection { background: var(--c-survol); color: var(--c-texte-absent); }
.b-vider {
  padding: 0 4px;
  color: var(--c-texte-absent);
  cursor: pointer;
}
.b-vider:hover { color: var(--c-texte); }

/* ★ 19/10/2026 (Franck) : « Barre temps » coupée = BANDEAU SEUL.
   La ligne du temps disparaît ; la ligne défilante (promos) reste,
   seule en haut du dessin (le plugin cache tout s'il n'y a rien à dire). */
body[data-seul="1"] .b-ligne { display: none; }
/* ★ 21/10/2026 (Magic Time désactivé) : les compteurs se cachent, il ne
   reste que les boutons et l'heure */
body[data-temps="0"] .b-contenu > :not(.b-btns):not(.b-heure):not(.b-blocs) { display: none; }

/* ---- la ligne défilante, sous la barre ---- */
.b-defilant {
  position: relative;
  height: calc(var(--barre-defilant, 20) * 1px);   /* ★ 05/11 : le plugin lit la même valeur */
  border-top: 1px solid var(--c-filet);
  background: var(--fond-dessin, var(--c-fond));
  overflow: hidden;
  cursor: pointer;
}
.b-defilant[hidden] { display: none; }
/* ★ 06/11/2026 : la FLÈCHE vers la feuille, derrière le nom de la vue — en touche, comme les boutons */
.b-feuille {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.25em; min-width: 1.6em; margin-left: 6px; padding: 0 3px; box-sizing: border-box;
  border: 1px solid var(--t-bord, #1b1e22); border-radius: calc(var(--t-arrondi, 4) * 1px);
  background: linear-gradient(180deg, var(--t-haut, #4a4f57) 0%, var(--t-mi, #3a3f46) 18%, var(--t-bas, #2b2f35) 70%, var(--t-pied, #1f2226) 100%);
  color: var(--t-texte, #e8eaed); line-height: 1; cursor: pointer; vertical-align: middle;
  pointer-events: auto;
}
.b-feuille:hover { color: var(--t-survol, #ffffff); }
.b-feuille:active { transform: translateY(1px); }
.b-feuille[hidden] { display: none; }
/* ★ 06/11/2026 : la LIGNE D'ÉTAT — le même emplacement, texte immobile */
.b-defilant[data-fixe] { cursor: default; }
.b-defilant[data-fixe] .b-def-texte { left: 10px; right: 10px; overflow: hidden; text-overflow: ellipsis; transform: none; }
body[data-nv] .b-defilant[data-fixe="err"] .b-def-texte, .b-defilant[data-fixe="err"] .b-def-texte { color: var(--c-erreur); }
body[data-nv] .b-defilant[data-fixe="fixe"] .b-def-texte, .b-defilant[data-fixe="fixe"] .b-def-texte { color: var(--c-etat-fixe); }
.b-def-texte {
  position: absolute;
  top: 2px;
  left: 0;
  white-space: pre;
  color: var(--c-accent);
}
.b-def-texte[data-anime="1"] {
  animation: b-defile calc(var(--duree, 10) * 1s) linear infinite;
}
/* 08/10/2026 (Franck) : 1er passage depuis le CENTRE, une seule fois ;
   ensuite le script repasse en « 1 » (en boucle depuis la droite). */
.b-def-texte[data-anime="2"] {
  animation: b-defile calc(var(--duree, 10) * 1s) linear 1 forwards;
}
@keyframes b-defile {
  from { transform: translateX(calc(var(--depart, 0) * 1px)); }
  to   { transform: translateX(calc(var(--arrivee, 0) * 1px)); }
}

/* ★ 05/11/2026 : les styles des pages de l'ancien plugin (liste des vues, Raccourcis,
   Propriétés, fenêtre des temps, vague, légendes, cotation ligne, aide courte) sont
   retirés : ces pages n'existent plus. Restent les deux classes communes ci-dessous. */

/* ============================================================
   02/10/2026 — ÉTAT OUI / NON, classe COMMUNE à tous les plugins
   (on déroge un peu au style Revit, Franck) : coche verte = oui,
   croix rouge = non. Usage : <span class="ic-etat" data-on="1">✓</span>
   ============================================================ */
.ic-etat { display: inline-block; width: 14px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1; }
.ic-etat[data-on="1"] { color: var(--c-oui); }
.ic-etat[data-on="0"] { color: var(--c-non); }

/* ============================================================
   02/10/2026 — ACTIONS EN TEXTE, classes COMMUNES à tous les plugins
   (Franck : pas de pavé de couleur, juste le texte).
     .ic-action        : action ordinaire (Annuler…)
     .ic-action-forte  : action principale (Appliquer…), en gras
   Le style des boutons de TOUS les plugins se réglera ici, plus tard.
   ============================================================ */
.ic-action, .ic-action:hover,
.p-actions .p-annuler, .p-actions .p-appliquer,
.p-actions .p-annuler:hover, .p-actions .p-appliquer:hover {
  background: none !important; border: 0; border-radius: 0;
  padding: 2px 0; cursor: pointer;
  font-size: 12px; font-weight: 400; color: var(--c-texte) !important;
}
.ic-action-forte, .p-actions .p-appliquer { font-weight: 700; }
.ic-action:hover, .p-actions .p-annuler:hover, .p-actions .p-appliquer:hover { text-decoration: underline; }

/* ============================================================
   ★ 18/10/2026 soir — LA PAGE « RÉGLAGES DU STYLE » (plugins/style.php)
   Ouverte dans Revit par le bouton palette en bas du cœur du Ring.
   Une ligne = libellé | réglage | valeur, colonnes alignées.
   Couleurs : uniquement les noms du thème.
   ============================================================ */
body.s-page {
  height: 100vh;
  overflow-y: auto;
  cursor: default;
}
.s-refus { padding: 24px; line-height: 20px; }

/* la tête reste en haut pendant qu'on fait défiler */
.s-tete {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 12px 14px 10px;
  background: var(--c-fond);
  border-bottom: 1px solid var(--c-filet);
}
.s-titre { font-size: 15px; font-weight: 700; }
.s-actions { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 18px; }
.s-etat { font-size: 12px; color: var(--c-accent); }
.s-etat[data-err="1"] { color: var(--c-non); }

/* les actions : juste le texte ; grisées quand rien n'est modifié ;
   « Enregistrer » armé (1er clic) = orange */
.s-page .ic-action { padding: 3px 2px; font-size: 13px; }
.s-page .ic-action[data-off="1"] { opacity: .35; cursor: default; text-decoration: none; }
.s-page .ic-action[data-arme="1"] { color: var(--c-arme) !important; font-weight: 700; }

.s-corps { padding: 4px 14px 10px; }
.s-bloc + .s-bloc { margin-top: 6px; }
.s-groupe {
  padding: 12px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-accent);
  border-bottom: 1px solid var(--c-filet);
}
.s-clic { cursor: pointer; user-select: none; }
.s-groupe.s-clic:hover { color: var(--c-accent-survol); }

.s-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 70px;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  border-bottom: 1px solid var(--c-filet);
}
.s-lib { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* réglage modifié, pas encore enregistré : le libellé en couleur et en gras */
.s-ligne[data-change="1"] .s-lib { color: var(--c-accent); font-weight: 700; }
.s-reglage { display: flex; align-items: center; min-width: 0; }

.s-curseur { width: 100%; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
.s-nuancier {
  width: 44px; height: 22px; padding: 0;
  border: 1px solid var(--c-bord-menu); border-radius: 4px;
  background: var(--c-fond); cursor: pointer;
}
.s-police {
  width: 100%; height: 24px;
  font: inherit; font-size: 12px;
  border: 1px solid var(--c-bord-menu); border-radius: 3px;
  background: var(--c-fond); color: var(--c-texte);
}
.s-valeur {
  width: 100%; box-sizing: border-box; height: 22px;
  font: inherit; font-size: 12px; text-align: right;
  padding: 0 4px;
  border: 1px solid var(--c-filet); border-radius: 3px; outline: none;
  background: var(--c-fond); color: var(--c-texte);
}
.s-valeur:focus { border-color: var(--c-accent); }
.s-valeur[readonly] { border-color: transparent; }
.s-reglage .ic-etat { width: 22px; height: 22px; line-height: 22px; font-size: 15px; }

.s-histo { padding: 0 14px 18px; }
.s-ligne-histo { grid-template-columns: auto minmax(0, 1fr) auto; }
.s-qui { font-size: 11px; color: var(--c-texte-absent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-vide { padding: 8px 0; font-size: 12px; font-style: italic; color: var(--c-texte-absent); }
/* 18/10 soir : couleur « du Ring » (accent) : le lien « Ring » à côté du nuancier,
   grisé quand c'est déjà la couleur du Ring ; le nuancier en pointillés */
.s-ring { margin-left: 10px; font-size: 12px; }
.s-nuancier[data-ring="1"] { border-style: dashed; opacity: .6; }
/* 18/10 soir : le mode « viser » — la phrase d'aide, le lien « Tout afficher »,
   et le nom de l'élément visé */
.s-aide { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 4px; font-size: 12px; color: var(--c-texte-absent); }
.s-tout { margin-left: auto; font-size: 12px; white-space: nowrap; }
.s-vise { padding: 8px 0 2px; font-size: 14px; font-weight: 700; color: var(--c-texte); }
/* ★ 28/10/2026 soir : essayer les deux habillages de la barre Magic Desk */
.s-look { grid-column: 1 / span 2; display: flex; align-items: center; gap: 16px; padding-top: 6px; }
.s-look .ic-action[data-on="1"] { font-weight: 700; color: var(--c-accent); text-decoration: underline; }
.s-look #voir-erreur { margin-left: auto; color: var(--c-erreur); }
/* ★ 05/11/2026 : un bouton par fenêtre, en haut de la page Style */
.s-fenetres { grid-column: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.s-fen { border: 1px solid var(--c-filet); border-radius: 14px; padding: 3px 11px; font-size: 13px; cursor: pointer; color: var(--c-texte); }
.s-fen:hover { border-color: var(--c-accent); }
.s-fen[data-on="1"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-texte-inverse); }
.s-aide .s-erreur { color: var(--c-erreur); }


/* ============================================================
   ★ 04/11/2026 (Franck) — LA BARRE EN TOUCHES
   ★★ RÈGLE DES LED, pour TOUS les plugins, présents et à venir :
        BLEU            = le plugin est activé, disponible ;
        ORANGE (pulse)  = le plugin OU l'utilisateur est en train de travailler ;
        2 FLASHS VERTS  = c'est fini (puis la LED revient à son état).
   Seulement quand le plugin envoie nv:2 (body[data-nv="2"]) : l'ancien
   plugin garde l'ancien look. Couleurs : les variables --t-, --led-,
   --tps-… plus haut. Fond clair ou sombre : body[data-fond], choisi par la
   page d'après le fond du dessin de Revit.
   ============================================================ */
.b-led, .b-blocs, .b-rangee { display: none; }

/* les deux jeux de couleurs */
body[data-nv="2"] {
  --t-haut: var(--t-c-haut); --t-mi: var(--t-c-mi); --t-bas: var(--t-c-bas); --t-pied: var(--t-c-pied);
  --t-bord: var(--t-c-bord); --t-tranche: var(--t-c-tranche); --t-texte: var(--t-c-texte);
  --t-survol: var(--t-c-survol); --t-ombre: var(--t-c-ombre); --t-liseret: var(--t-c-liseret);
  --tps-titre: var(--tps-c-titre); --tps-valeur: var(--tps-c-valeur); --tps-filet: var(--tps-c-filet);
  --rec: var(--rec-c); --rec-survol: var(--rec-c-survol);
  --t-lum: var(--t-c-lumiere);
  font-size: calc(var(--t-taille) * 1px);
}
body[data-nv="2"][data-fond="sombre"] {
  --t-haut: var(--t-s-haut); --t-mi: var(--t-s-mi); --t-bas: var(--t-s-bas); --t-pied: var(--t-s-pied);
  --t-bord: var(--t-s-bord); --t-tranche: var(--t-s-tranche); --t-texte: var(--t-s-texte);
  --t-survol: var(--t-s-survol); --t-ombre: var(--t-s-ombre); --t-liseret: var(--t-s-liseret);
  --tps-titre: var(--tps-s-titre); --tps-valeur: var(--tps-s-valeur); --tps-filet: var(--tps-s-filet);
  --rec: var(--rec-s); --rec-survol: var(--rec-s-survol);
  --t-lum: var(--t-s-lumiere);
}
/* ★ 04/11 (Franck : « les couleurs elles-mêmes, jusqu'au blanc ») : chaque
   couleur de la touche glisse vers le blanc (--t-c-lumiere / --t-s-lumiere,
   de 0 à 1). Les noms foncent en même temps pour rester lisibles ; les LED
   ne bougent pas. */
body[data-nv="2"] .b-btn,
body[data-nv="2"] .b-opt {
  --p: calc(var(--t-lum, 0) * 100%);
  /* les noms basculent D'UN COUP au foncé quand la touche devient assez claire
     (un gris sur un gris ne se lit pas) */
  --pt: clamp(0%, calc((var(--t-lum, 0) - var(--vb-bascule)) * 100000%), 100%);
  --k-haut:    color-mix(in srgb, var(--t-haut), var(--vb-blanc) var(--p));
  --k-mi:      color-mix(in srgb, var(--t-mi), var(--vb-blanc) var(--p));
  --k-bas:     color-mix(in srgb, var(--t-bas), var(--vb-blanc) var(--p));
  --k-pied:    color-mix(in srgb, var(--t-pied), var(--vb-blanc) var(--p));
  --k-bord:    color-mix(in srgb, var(--t-bord), var(--vb-bord) var(--p));
  --k-tranche: color-mix(in srgb, var(--t-tranche), var(--vb-tranche) var(--p));
  --k-texte:   color-mix(in srgb, var(--t-texte), var(--vb-texte) var(--pt));
  --k-survol:  color-mix(in srgb, var(--t-survol), var(--vb-actif) var(--pt));
  --k-actif:   color-mix(in srgb, var(--t-actif-texte), var(--vb-actif) var(--pt));
}

/* ---- les touches ---- */
body[data-nv="2"] .b-btns { gap: calc(var(--t-ecart) * 1px); }
body[data-nv="2"] .b-btns-g { margin-right: 24px; }
body[data-nv="2"] .b-btns-d { margin-left: 24px; }
body[data-nv="2"] .b-btn,
body[data-nv="2"] .b-btn[data-k="icone"] {
  box-sizing: border-box;
  height: calc(var(--t-hauteur) * 1px);
  min-width: calc(var(--bw, 0) * 1px);
  padding: 0 calc(var(--t-marge) * 1px);
  border: 1px solid var(--k-bord);
  border-radius: calc(var(--t-arrondi) * 1px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--t-police), "Segoe UI", sans-serif;
  font-size: calc(var(--t-taille) * 1px);
  line-height: 1;
  color: var(--k-texte);
  background: linear-gradient(180deg, var(--k-haut) 0%, var(--k-mi) 18%, var(--k-bas) 70%, var(--k-pied) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.45),
              inset -1px 0 0 rgba(255, 255, 255, 0.10), inset 1px 0 0 rgba(0, 0, 0, 0.30),   /* bord droit éclairé, bord gauche dans l'ombre */
              0 0 0 1px var(--t-liseret), 0 2px 0 var(--k-tranche),
              calc(var(--t-ombre-x) * 1px) calc(var(--t-ombre-y) * 1px) calc(var(--t-ombre-flou) * 1px) var(--t-ombre);
  animation: none;
  transition: color 100ms, transform 80ms, opacity 200ms;
}
body[data-nv="2"] .b-btn:hover { color: var(--k-survol); background: linear-gradient(180deg, var(--k-haut) 0%, var(--k-mi) 18%, var(--k-bas) 70%, var(--k-pied) 100%); }
body[data-nv="2"] .b-btn:active { transform: translateY(1px); }
body[data-nv="2"] .b-btn::after { display: none; }
body[data-nv="2"] .b-btn[data-e="on"],
body[data-nv="2"] .b-btn[data-e="travail"],
body[data-nv="2"] .b-btn[data-f="1"] { color: var(--k-actif); }
body[data-nv="2"] .b-btn[data-e="ferme"] { color: var(--c-non); }

/* ---- les LED ---- */
body[data-nv="2"] .b-led {
  display: block;
  width: calc(var(--led-largeur) * 1px);
  height: calc(var(--led-epaisseur) * 1px);
  border-radius: 3px;
  background: var(--led-eteinte);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7);
}
body[data-nv="2"] .b-btn[data-e="on"] .b-led {
  background: var(--led-bleu);
  box-shadow: 0 0 5px var(--led-bleu-halo), 0 0 10px var(--led-bleu-halo);
}
body[data-nv="2"] .b-btn[data-e="travail"] .b-led {
  background: var(--led-orange);
  box-shadow: 0 0 5px var(--led-orange-halo), 0 0 10px var(--led-orange-halo);
  animation: led-respire calc(var(--led-clignote) * 1ms) ease-in-out infinite alternate;
}
body[data-nv="2"] .b-btn[data-f="1"] .b-led { animation: led-vert calc(var(--led-flash) * 1ms) steps(1, end) 2; }
/* ★ 04/11 : l'orange posé par la page au clic (data-a), sur une touche ou une option */
body[data-nv="2"] .b-btn[data-a="1"],
body[data-nv="2"] .b-opt[data-a="1"] { color: var(--k-actif); }
body[data-nv="2"] .b-btn[data-a="1"] .b-led,
body[data-nv="2"] .b-opt[data-a="1"] .b-led {
  background: var(--led-orange);
  box-shadow: 0 0 5px var(--led-orange-halo), 0 0 10px var(--led-orange-halo);
  animation: led-respire calc(var(--led-clignote) * 1ms) ease-in-out infinite alternate;
}
body[data-nv="2"] .b-opt[data-f="1"] .b-led { animation: led-vert calc(var(--led-flash) * 1ms) steps(1, end) 2; }
@keyframes led-respire { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes led-vert {
  0%  { background: var(--led-vert); box-shadow: 0 0 6px var(--led-vert-halo), 0 0 14px var(--led-vert-halo); }
  50% { background: var(--led-eteinte); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7); }
}

/* ---- les temps, sur deux lignes ---- */
body[data-nv="2"] .b-contenu > span { display: none; }
body[data-nv="2"] .b-blocs { display: flex; align-items: center; transition: opacity 200ms; }
body[data-nv="2"] .b-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--tps-valeur);
}
body[data-nv="2"] .b-bloc + .b-bloc { border-left: 1px solid var(--tps-filet); }
body[data-nv="2"] .b-h { color: var(--tps-titre); }
body[data-nv="2"][data-temps="0"] .b-bloc:not(.b-heure) { display: none; }

/* ---- les options : elles remplacent les autres touches ---- */
body[data-ouvert="1"] .b-btn:not([data-garde="1"]),
body[data-ouvert="1"] .b-blocs,
body[data-ouvert="1"] .b-noms { opacity: 0; pointer-events: none; }
body[data-nv="2"] .b-rangee {
  position: absolute;
  top: 50%;
  left: calc(var(--rg, 0) * 1px);
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: calc(var(--rangee-ecart) * 1px);
  white-space: nowrap;
}
body[data-nv="2"] .b-rangee[hidden],
body[data-nv="2"] .b-rangee [hidden] { display: none !important; }
body[data-nv="2"] .r-opts,
body[data-nv="2"] .r-saisie { display: flex; align-items: center; gap: calc(var(--t-ecart) * 1px); }
body[data-nv="2"] .b-opt {
  box-sizing: border-box;
  height: calc(var(--o-hauteur) * 1px);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--k-bord);
  border-radius: calc(var(--t-arrondi) * 0.9px);
  font-family: var(--t-police), "Segoe UI", sans-serif;
  font-size: calc(var(--t-taille) * 1px);
  color: var(--k-texte);
  background: linear-gradient(180deg, var(--k-mi), var(--k-bas));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px var(--t-liseret),
              0 1px 0 var(--k-tranche),
              calc(var(--t-ombre-x) * 1px) calc(var(--t-ombre-y) * 1px) calc(var(--t-ombre-flou) * 1px) var(--t-ombre);
  cursor: pointer;
  transition: color 100ms, transform 80ms;
}
body[data-nv="2"] .b-opt:hover { color: var(--k-survol); }
body[data-nv="2"] .b-opt:active { transform: translateY(1px); }
body[data-nv="2"] .b-opt .b-led { width: 4px; height: 14px; }
body[data-nv="2"] .b-opt[data-e="vide"] { cursor: default; font-style: italic; }
body[data-nv="2"] .b-opt[data-e="ferme"] { color: var(--c-non); }
body[data-nv="2"] .r-err { font-size: calc(var(--t-taille) * 1px); color: var(--c-erreur); }
/* Magic Length : le champ, puis les 3 derniers textes en simple texte */
body[data-nv="2"] .b-entree2 {
  box-sizing: border-box;
  height: calc(var(--o-hauteur) * 1px);
  width: calc(var(--champ-largeur) * 1px);
  padding: 0 10px;
  border: 1px solid var(--k-bord);
  border-radius: calc(var(--t-arrondi) * 0.9px);
  font: inherit;
  font-size: calc(var(--t-taille) * 1px);
  text-align: center;
  color: var(--champ-texte);
  background: var(--champ-fond);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
  outline: none;
}
body[data-nv="2"] .b-entree2::placeholder { color: var(--t-texte); }
body[data-nv="2"] .b-recents { display: flex; gap: 16px; margin-left: 6px; }
body[data-nv="2"] .b-recent { color: var(--rec); cursor: pointer; }
body[data-nv="2"] .b-recent:hover { color: var(--rec-survol); text-decoration: underline; }

/* ---- fond sombre : bandeau et noms des panneaux lisibles ---- */
body[data-nv="2"][data-fond="sombre"] .b-defilant { border-top-color: var(--def-s-filet); }
body[data-nv="2"][data-fond="sombre"] .b-def-texte { color: var(--def-s-texte); }
body[data-nv="2"][data-fond="sombre"] .b-nom { color: var(--noms-s); }