/* © 2026 DRAK Infinity (NEQ 2281240509), Montréal (Québec), Canada. Barre du haut UNIQUE (mission 20, lot A; faits 86, 87 et 88; règle 8 de site/REGLES-SITE.md). Écrit à la main.
   Chargée par toutes les pages, accueil compris : le balisage vient de outils/barre-donnees.mjs, un seul gabarit. Règle 1 : aucune couleur en dur, seulement les jetons du thème.
   Largeurs (reprises par outils/barre-donnees.mjs et outils/tester-barre.mjs; mission 30, fait 178a; seuil bas relevé mission 31, lot A,
   fait 179g, 2 novembre 2026, relevé une seconde fois mission 32, lot A, fait A2, 6 novembre 2026 (ajout d'une huitième entrée, Articles),
   puis abaissé mission 32, lot B, fait B3, même jour (Projets/Actualités/Articles quittent la barre pleine pour le groupe déroulant
   « Nouvelles », six éléments au lieu de huit)) : 1125 px et moins, tout (liens, rendez-vous, réseaux, connexion) passe dans le menu
   replié; de 1126 à 1584 px, seule « Connexion » devient une icône (liens, rendez-vous et réseaux pleins; la marque, logo et mot-symbole,
   est réduite sur toute cette tranche depuis le fait 179g, voir le commentaire détaillé plus bas); 1585 px et plus, tout est plein.
   Les règles portent « html[data-theme] nav.barre-drk » et !important là où l'ancienne feuille de l'accueil en portait : elles l'emportent sans la retirer. */

html[data-theme] nav.barre-drk{position:sticky;top:0;left:0;right:0;z-index:50;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px!important;box-sizing:border-box;width:100%;margin:0;padding:10px 40px!important;border:0;border-bottom:1px solid var(--or);background:var(--entete)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px)!important;backdrop-filter:saturate(1.6) blur(16px)!important;color:var(--texte);font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.6;letter-spacing:normal;text-align:left;text-transform:none}
html[data-theme] nav.barre-drk.barre-fixe{position:fixed}

/* marque */
html[data-theme] nav.barre-drk .brand{display:inline-flex!important;align-items:center;gap:10px!important;flex:none;margin:0;padding:0!important;color:var(--texte);font-family:var(--sans)!important;font-size:16px!important;font-weight:400;letter-spacing:normal!important;text-transform:none!important;line-height:1.6;text-decoration:none}
html[data-theme] nav.barre-drk .brandlogo{display:block;width:40px!important;height:40px!important;max-width:none;filter:none!important;object-fit:contain}
html[data-theme] nav.barre-drk .brandtext{font-family:var(--serif-titres)!important;font-weight:600;font-size:15px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--texte)!important;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;line-height:1.6;white-space:nowrap}

/* liens (sept entrées) et langue */
/* Mission 29, fait 176f (décision de Yannick du 29 octobre 2026) : espacement du menu revenu à au moins l'équivalent d'un cadratin entre
   deux entrées (mesuré : 14 px à 13.5 px de police, un cadratin de ce corps valant environ 13,5 px ; un premier essai à 18 px faisait
   déborder la barre de 60 à 75 px à 1 440 px sur les pages à bouton « Prendre rendez-vous » ET réseaux sociaux ET connexion affichés en
   entier — corrigé après mesure, voir outils/tester-maison-3d.mjs et outils/tester-v2.mjs), à toutes les largeurs où les liens sont
   affichés en ligne; ne se resserre JAMAIS plus bas (voir les media queries plus bas, qui ne touchent plus ce gap). */
html[data-theme] nav.barre-drk .links{display:flex;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;gap:14px!important;margin:0 0 0 auto;padding:0;font-size:13.5px;letter-spacing:0;line-height:1.6}
html[data-theme] nav.barre-drk .links a.nm{position:relative;display:block;margin:0;padding:0;color:var(--texte2);font-size:13.5px;font-weight:400;line-height:1.6;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:color .2s}
html[data-theme] nav.barre-drk .links a.nm:hover,html[data-theme] nav.barre-drk .links a.nm:focus-visible{color:var(--texte)}
/* Mission 29, fait 176f (décision de Yannick du 29 octobre 2026) : la page courante est signalée par une pilule (contour arrondi, fond
   légèrement teinté), comme les onglets du sélecteur de kits de l'accueil (outils/v2-donnees.mjs, .drk-v2-kits button.on), À LA PLACE du
   trait doré seul (fait 87, mission 20) qui reste pour tracer le survol/focus. Rendue par un ::before absolument positionné (jamais par un
   remplissage/marge négative sur le lien lui-même) : un essai à padding+margin négative avait légèrement changé la largeur de .links
   (le lien courant n'existe pas sur l'accueil, qui n'en a aucun) et décalait tous les éléments suivants de la barre de 1 à 2 px — détecté
   par outils/tester-barre.mjs (parité des boîtes avec l'accueil). Le ::before est hors du flux : aucun élément voisin ne bouge. Contraste de
   4,5 pour 1 au moins dans les deux thèmes (vérifié par outils/tester-barre.mjs, qui lit le ::before). aria-current="page" reste posé par
   outils/barre-donnees.mjs. */
html[data-theme] nav.barre-drk .links a.nm[aria-current="page"]{color:var(--texte)}
/* Mission 29, écart 4 du contrôleur Opus (1er passage) : un débord horizontal de -13px, avec gap:14px (ligne 20) entre les liens, ne
   laissait qu'1 px d'espace visible entre la pilule et l'entrée voisine à la barre pleine (1585 px et plus) — corrigé une première fois
   en ramenant le débord horizontal à 0 (inset:-5px 0), ce qui redonnait le gap complet (14 px) entre deux entrées, mais ne laissait plus
   AUCUN rembourrage intérieur : le texte touchait le bord arrondi de la pilule (régression trouvée par le contrôleur, 2e passage).
   Correctif définitif (2e passage) : un vrai rembourrage horizontal de 8 px de chaque côté, comme les onglets du sélecteur de kits
   (outils/v2-donnees.mjs, .drk-v2-kits button / .drk-v2-kits-fact button, padding:9px 15px — 8 px est la valeur la plus proche que le
   gap existant (14 px, fixe, ne peut pas grandir) permette sans faire toucher la pilule à son entrée voisine). Avec gap:14px, un
   rembourrage de 8 px de chaque côté laisse un écart réel de 6 px entre le bord de la pilule et l'entrée voisine (14 - 8 = 6 px) : plus
   qu'assez pour qu'elles ne se touchent jamais, mesuré et vérifié par outils/tester-barre.mjs (qui contrôle maintenant le rembourrage
   intérieur ET l'écart résiduel avec la voisine séparément — l'écart résiduel n'a plus besoin d'atteindre un cadratin complet, puisque le
   cadratin entre les ENTRÉES elles-mêmes, lui, reste le gap complet de 14 px, jamais touché par la pilule qui est hors du flux). */
html[data-theme] nav.barre-drk .links a.nm[aria-current="page"]::before{content:"";position:absolute;inset:-5px -8px;background:var(--puce);border:1px solid var(--trait);border-radius:999px;z-index:-1}

/* Mission 32, lot B (fait B3, ordre du 6 novembre 2026) : groupe déroulant « Nouvelles » / « What's new » — Projets,
   Actualités et Articles, rassemblés (outils/barre-donnees.mjs, GROUPE_NOUVELLES). Le déclencheur est un VRAI lien
   (href vers /actualites, jamais seulement un <button>) : site/commun/barre-nouvelles.js le rehausse en bouton de
   bascule une fois chargé, sans jamais retirer le href (clic du milieu, Ctrl+clic ou navigateur sans JavaScript
   fonctionnent toujours). Le panneau n'est JAMAIS display:none (ça retirerait ses liens de l'ordre de tabulation,
   impossible à atteindre au clavier) : opacity:0 + pointer-events:none par défaut, révélé par :focus-within (clavier,
   sans JavaScript) ou .open (JavaScript, voir le script) — exactement le motif « CSS-only dropdown » déjà éprouvé. */
html[data-theme] nav.barre-drk .drk-nouv{position:relative;display:flex;align-items:center}
html[data-theme] nav.barre-drk .drk-nouv-btn{display:flex!important;align-items:center;gap:4px}
html[data-theme] nav.barre-drk .drk-nouv-chevron{width:12px;height:12px;flex:none;transition:transform .2s}
html[data-theme] nav.barre-drk .drk-nouv.open .drk-nouv-chevron{transform:rotate(180deg)}
html[data-theme] nav.barre-drk .drk-nouv-btn[aria-current="true"]{color:var(--texte)}
html[data-theme] nav.barre-drk .drk-nouv-btn[aria-current="true"]::before{content:"";position:absolute;inset:-5px -8px;background:var(--puce);border:1px solid var(--trait);border-radius:999px;z-index:-1}
html[data-theme] nav.barre-drk .drk-nouv-panel{position:absolute;top:100%;left:0;margin-top:10px;min-width:180px;padding:8px;border:1px solid var(--trait);border-radius:14px;background:var(--entete);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 14px 34px rgba(0,0,0,.16);display:grid;gap:2px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s;z-index:60}
html[data-theme] nav.barre-drk .drk-nouv:hover .drk-nouv-panel,html[data-theme] nav.barre-drk .drk-nouv:focus-within .drk-nouv-panel,html[data-theme] nav.barre-drk .drk-nouv.open .drk-nouv-panel{opacity:1;pointer-events:auto;transform:translateY(0)}
html[data-theme] nav.barre-drk .drk-nouv-panel a{display:block;min-height:44px;padding:11px 14px;border-radius:9px;color:var(--texte2);font-size:13.5px;font-weight:400;line-height:1.3;text-decoration:none;white-space:nowrap}
html[data-theme] nav.barre-drk .drk-nouv-panel a:hover,html[data-theme] nav.barre-drk .drk-nouv-panel a:focus-visible{background:var(--puce);color:var(--texte)}
html[data-theme] nav.barre-drk .drk-nouv-panel a[aria-current="page"]{color:var(--texte);background:var(--puce)}
@media (prefers-reduced-motion:reduce){html[data-theme] nav.barre-drk .drk-nouv-panel,html[data-theme] nav.barre-drk .drk-nouv-chevron{transition:none}}
/* Menu replié (390 px et moins) : pas de panneau, un sous-titre en petites capitales puis les liens indentés dessous
   (ordre, fait B3). */
html[data-theme] #drakMenu .drk-nouv-sous{margin:10px 0 0;padding:0 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte2);font-weight:700}
html[data-theme] #drakMenu a.drk-nouv-item{padding-left:28px}
html[data-theme] nav.barre-drk #lang{display:block;box-sizing:border-box;margin:0 0 0 2px!important;padding:5px 13px!important;border:1px solid var(--or)!important;border-radius:999px!important;background:transparent!important;color:var(--or-texte)!important;font:inherit;font-family:var(--sans);font-size:13px!important;font-weight:600!important;line-height:1.6;letter-spacing:0;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}
html[data-theme] nav.barre-drk #lang:hover,html[data-theme] nav.barre-drk #lang:focus-visible{background:var(--puce)!important;color:var(--texte)!important}

/* « Prendre rendez-vous » */
html[data-theme] nav.barre-drk .drkr-bouton-racine{display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;margin:0 6px;padding:6px 14px;border:1px solid var(--or);border-radius:999px;background:transparent;color:var(--texte);font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer}
html[data-theme] nav.barre-drk .drkr-bouton-racine:hover,html[data-theme] nav.barre-drk .drkr-bouton-racine:focus-visible{background:var(--puce);color:var(--texte)}
html[data-theme] nav.barre-drk .drkr-bouton-racine .drkr-ico{display:none}

/* réseaux sociaux (mission 21, fait 105) : Instagram et Facebook, à droite, à gauche du thème (fait 179j, mission 31 lot C : plus de Musique entre les deux); icônes pleines en currentColor (jetons du thème), cible de 32 px dans la barre,
   de 48 px dans le menu replié (voir plus bas); au-dessous de 1 100 px (LARGEUR_MENU_PLEIN, fait 178a, mission 30) la rangée de la barre disparaît et celle du menu replié prend le relais */
html[data-theme] nav.barre-drk .reseaux{display:flex;flex:none;align-items:center;gap:0;margin:0 2px 0 0;padding:0}
html[data-theme] nav.barre-drk .reseaux a.rs{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;margin:0;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--texte2);text-decoration:none;transition:color .2s,border-color .2s}
html[data-theme] nav.barre-drk .reseaux a.rs svg{display:block;width:18px;height:18px;flex:none}
html[data-theme] nav.barre-drk .reseaux a.rs:hover,html[data-theme] nav.barre-drk .reseaux a.rs:focus-visible{color:var(--texte);border-color:var(--or)}

/* thème (gabarit rond de 38 px) */
html[data-theme] nav.barre-drk .bouton-theme{position:static;right:auto;bottom:auto;z-index:auto;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:38px;height:38px;margin:0;padding:0;border:1px solid var(--trait);border-radius:50%;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;font:inherit;line-height:1;cursor:pointer;transition:none}
html[data-theme] nav.barre-drk .bouton-theme{color:var(--texte)}
html[data-theme] nav.barre-drk .bouton-theme svg{width:18px;height:18px;flex:none}
html[data-theme] nav.barre-drk .bouton-theme:hover{border-color:var(--or);transform:none}
/* connexion (mission 22, fait 107) : lien vers /app/, à droite du thème (fait 179j, mission 31 lot C : plus de bouton Musique entre les deux); icône au trait (même gabarit rond que le thème) et libellé visible sur grand écran.
   Mission 30, fait 178a (décision de la direction générale du 29 octobre 2026 au soir, exécutée le 30 octobre 2026) : icône seule (44×44 px,
   motif réutilisé de la mission 22/mission 29-lot D) entre 1 100 et 1 584 px (voir @media plus bas) — le libellé reste dans aria-label, title
   ET dans le DOM (caché visuellement), lu par les lecteurs d'écran dans les trois états; jamais « page courante » (/app/ est hors du site) */
html[data-theme] nav.barre-drk a.cx{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:38px;margin:0 0 0 2px;padding:0 12px 0 10px;border:1px solid var(--trait);border-radius:999px;background:transparent;color:var(--texte);font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.2;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s}
html[data-theme] nav.barre-drk a.cx svg{display:block;width:18px;height:18px;flex:none}
html[data-theme] nav.barre-drk a.cx:hover,html[data-theme] nav.barre-drk a.cx:focus-visible{border-color:var(--or);background:var(--puce)}

/* bouton du menu replié (☰) et menu replié */
html[data-theme] #drakMenuBtn{display:none;position:fixed;top:14px;right:14px;z-index:1200;align-items:center;justify-content:center;box-sizing:border-box;width:42px;height:42px;margin:0;padding:0;border:1px solid var(--trait);border-radius:50%;background:var(--entete);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--texte);font-size:20px;line-height:1;cursor:pointer}
html[data-theme] #drakMenuBtn:hover,html[data-theme] #drakMenuBtn:focus-visible{border-color:var(--or)}
body:has(.jmodal.show) #drakMenuBtn{display:none!important}
/* !important : sur l'accueil, la vieille règle « html[data-theme] nav{padding,fond,bordure} » de la feuille d'origine atteint aussi ce menu (<nav>); le menu est le même partout */
html[data-theme] #drakMenu{display:none;position:fixed;inset:0;z-index:1190;box-sizing:border-box;gap:0!important;margin:0;padding:86px 28px 40px!important;border:0!important;overflow:auto;background:var(--fond)!important;opacity:1;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;color:var(--texte);font-family:var(--sans);font-size:16px;line-height:1.6}
html[data-theme] #drakMenu.ouvert{display:block}
html[data-theme] #drakMenu a{display:block;margin:0;padding:14px 6px;border:0;border-bottom:1px solid var(--trait);border-radius:0;background:transparent;color:var(--texte);font-size:19px;font-weight:400;letter-spacing:.02em;line-height:1.6;text-decoration:none}
html[data-theme] #drakMenu a:hover,html[data-theme] #drakMenu a:focus-visible{color:var(--or-texte)}
/* Pilule de page courante (fait 176f), même traitement que la barre : fond teinté, contour arrondi, à la place du souligné. */
html[data-theme] #drakMenu a[aria-current="page"]{color:var(--or-texte);background:var(--puce);border-radius:12px;padding:14px 14px}
/* connexion du menu replié (fait 107) : icône et libellé, pleine largeur comme les autres liens (cible de plus de 44 px) */
html[data-theme] #drakMenu a.cx{display:flex;align-items:center;gap:14px}
html[data-theme] #drakMenu a.cx svg{display:block;width:22px;height:22px;flex:none}
/* réseaux sociaux du menu replié (fait 105) : rangée d'icônes, cibles de 48 px */
html[data-theme] #drakMenu .reseaux{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:22px 6px 0}
html[data-theme] #drakMenu .reseaux a.rs{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;margin:0;padding:0;border:1px solid var(--trait);border-radius:50%;background:transparent;color:var(--texte)}
html[data-theme] #drakMenu .reseaux a.rs svg{display:block;width:22px;height:22px;flex:none}
html[data-theme] #drakMenu .reseaux a.rs:hover,html[data-theme] #drakMenu .reseaux a.rs:focus-visible{color:var(--or-texte);border-color:var(--or)}

/* Mission 29, fait 176f (décision de Yannick du 29 octobre 2026) : UN SEUL palier, pas deux. Yannick a tranché que le menu plein (sept
   liens, « Prendre rendez-vous », réseaux sociaux, libellé « Connexion ») reste tel qu'il est, et que TOUT bascule ensemble au format
   compact (le même qu'au téléphone) sous 1 585 px, y compris à 1 440 px (écran très courant) — jamais une partie du menu seulement,
   conformément au texte littéral de l'ordre de mission 29 : « le menu passe au format compact », pas « une partie du menu ». Le
   débordement ne se règle plus en resserrant les espaces ni les lettres : seule la bascule barre pleine / menu replié règle le débordement.
   Historique de la mesure : un premier essai à un seul palier bas (1 366/1 367 px) débordait de 84 px à 1 367 px pour la barre complète
   (sept liens, « Prendre rendez-vous », réseaux sociaux ET libellé « Connexion »). Le lot D avait alors posé DEUX paliers (liens et
   rendez-vous à 1 366/1 367 px; réseaux et connexion à 1 584/1 585 px), ce qui créait un état HYBRIDE entre les deux (barre à moitié
   compacte entre 1 367 et 1 584 px), explicitement refusé par Yannick. Le seuil retenu est celui mesuré par le lot D comme nécessaire pour
   que TOUT tienne sans rien comprimer : 1 585 px (mesuré directement, page « Catalogue d'outils », le libellé le plus long). Sous
   1 585 px (donc max-width:1584px) : les liens (.links a.nm), « Prendre rendez-vous » (.drkr-bouton-racine), les réseaux (.reseaux) ET la
   connexion (a.cx, texte ET icône — plus besoin de la réduire à 44 px puisqu'elle part entièrement dans le menu replié comme les autres)
   sortent TOUS de la barre vers le menu replié (#drakMenu); #drakMenuBtn (☰) s'affiche. Au-dessus de 1 584 px (min-width:1585px), le menu
   replié reste caché et tout le contenu, réseaux et libellé « Connexion » compris, est visible en texte entier dans la barre pleine.
   Comme a.cx n'est plus le dernier élément visible de la barre sous le palier (il est entièrement caché), la marge qui réservait la place
   du bouton ☰ (48 px) passe du lien de connexion au bouton de thème (.bouton-theme), désormais le dernier élément visible dans ce cas
   (fait 179j, mission 31 lot C : le bouton Musique qui suivait le thème jusque-là, et qui portait cette marge, est retiré).
   La règle « hauteur de barre au plus 62 px » (outils/tester-barre.mjs) avait échoué à 65 px entre 1 367 et 1 584 px dans la version à
   deux paliers : la connexion y était réduite à une icône de 44 px (plus haute que les 40 px du logo, le plus grand élément normal de la
   barre) alors que le remplissage (padding) restait à 10 px (celui de la barre pleine, puisque seul l'ancien palier bas réduisait le
   remplissage à 8 px) : 10 + 44 + 10 + 1 px de bordure = 65 px. Le palier unique supprime cette zone : a.cx est soit cachée (0 px), soit
   pleine (38 px, plus petite que le logo) — la hauteur de la barre ne dépasse plus jamais 61 px (mesuré par outils/tester-barre.mjs).
   outils/barre-donnees.mjs (LARGEUR_MENU) et outils/tester-barre.mjs reprennent cette même valeur, un seul seuil partout. */
/* Mission 30, fait 178a (décision de la direction générale du 29 octobre 2026 au soir, exécutée le 30 octobre 2026) : CE « palier UNIQUE »
   ci-dessus est remplacé par un nouveau réglage, assumé et DIFFÉRENT de la philosophie « jamais d'état hybride » du paragraphe précédent —
   pas une erreur corrigée dans l'autre sens : la direction générale a vu en production qu'à 1 366 px (la largeur de portable la plus
   courante), sous le seuil de 1 585 px, la majorité des visiteurs ne voyaient plus du tout les liens de la barre, seulement ☰. Nouveau
   comportement, mesuré (outils/tester-barre.mjs, section N1, aux largeurs 1 100/1 280/1 366/1 440/1 600 px, FR et EN, clair et nuit, sur la
   page au libellé le plus long) :
     - sous 1 100 px (LARGEUR_MENU_PLEIN, outils/barre-donnees.mjs) : menu compact (☰), inchangé depuis le fait 176f ci-dessus;
     - de 1 100 à 1 584 px (LARGEUR_MENU_PLEIN à LARGEUR_MENU) : les sept liens, « Prendre rendez-vous » et les réseaux sociaux restent en
       texte plein (jamais comprimés ni raccourcis, gap de 14 px intact) — SEULE « Connexion » devient une icône (44×44 px, remplissage nul,
       motif réutilisé de la mission 22/mission 29-lot D : voir le commentaire de a.cx plus haut), avec aria-label/title qui portent le
       libellé complet et le texte caché visuellement mais toujours dans le DOM, lu par les lecteurs d'écran (outils/barre-donnees.mjs,
       connexionHtml());
     - à partir de 1 585 px (LARGEUR_MENU + 1) : tout plein, y compris le texte « Connexion », comme avant.
   1 100 px a été retenu (et non un seuil plus bas) après mesure réelle : à cette largeur, avec Connexion réduite à une icône, le menu
   complet (sept liens les plus longs, FR « Catalogue d'outils », EN « Facturier Québec online ») tient sans déborder (scrollWidth égal à
   clientWidth), gap de 14 px intact entre deux entrées, pilule du lien courant (inset:-5px -8px, fait 176f) toujours bien rembourrée, sans
   rien comprimer. La hauteur de la barre (au plus 62 px, outils/tester-barre.mjs) exige un remplissage vertical réduit à 8 px dans cette
   tranche (comme le menu compact ci-dessous) : l'icône de connexion (44 px de haut) est le plus grand élément de la barre dans cette
   tranche (plus grande que le logo, 40 px), et 10 + 44 + 10 + 1 px de bordure = 65 px dépasserait le seuil — avec 8 px, 8 + 44 + 8 + 1 = 61 px. */
/* Mission 31, lot A (fait 179g, ordre du 2 novembre 2026) : LARGEUR_MENU_PLEIN relevée de 1 100 à 1 160 px (outils/barre-donnees.mjs).
   Conséquence mesurée et nécessaire de l'ajout de « Maison 3D connectée » à la barre pleine : son libellé est plus long que ce qu'elle
   remplace (Facturier en ligne, Articles et l'ancre Contact sortent de la barre), si bien que le contenu total de la barre est maintenant
   plus large. Mesuré directement (Playwright, recherche binaire au pixel, outils/_tmp-mission-31/_tmp-mesure-barre-m31d.mjs, conservé) :
   à l'ancien seuil (1 100 px), la barre déborde de 59 px sur /outils (FR, « Catalogue d'outils », toujours la page la plus contraignante);
   elle tient sans déborder à partir de 1 159 px (1 160 retenu, 1 px de marge). Le cadratin de 14 px entre deux liens et la cible de 44 px
   de « Connexion » n'ont pas été resserrés pour tenter de revenir pile à 1 100 px (les deux restent protégés, voir le commentaire du fait
   176f plus haut) : un resserrage plus poussé est une décision pour le contrôleur ou Yannick, pas prise dans ce lot. */
/* Mission 32, lot A (fait A2, ordre du 6 novembre 2026) : LARGEUR_MENU_PLEIN relevée une seconde fois, de 1 160 à 1 184 px, pour la même
   raison : « Articles » rejoint la barre pleine et le menu replié (huitième entrée, entre Actualités et À propos), annulant la décision
   de la mission 31-BIS (fait 192 f) de la laisser seulement au pied de page. Mesuré directement (Playwright, via le vrai serveur de test,
   recherche binaire au pixel, outils/_tmp-mission-32/_tmp-mesure-barre-m32a2.mjs, conservé dans outils/) sur /outils (FR, « Catalogue d'outils », toujours
   la page la plus contraignante) : le dernier élément de la barre (Connexion) déborde de la fenêtre jusqu'à 1 182 px inclus (22 px à
   l'ancien seuil de 1 160 px); elle tient sans déborder à partir de 1 183 px (1 184 retenu, 1 px de marge, même méthode). Le gap de 14 px
   et la cible de 44 px de Connexion, protégés, n'ont pas été touchés.
   Mission 32, lot B (fait B3, ordre du 6 novembre 2026) : abaissée une troisième fois, de 1 184 à 1 126 px — Projets, Actualités et
   Articles quittent la barre pleine pour se regrouper sous un seul déclencheur « Nouvelles »/« What's new » (.drk-nouv, plus bas) : le
   contenu RÉTRÉCIT (un déclencheur remplace trois liens entiers), d'où un seuil plus bas. Mesuré directement (Playwright, recherche
   binaire au pixel, outils/_tmp-mission-32/_tmp-mesure-barre-m32b3.mjs, conservé) sur /outils (FR) avec la tranche « icône » forcée (la
   media query ci-dessous cachant encore la barre pleine sous l'ancien seuil pendant la mesure) : débordement jusqu'à 1 124 px inclus;
   plus aucun débordement à partir de 1 125 px. 1 126 retenu (1 px de marge, même méthode). */
@media (max-width:1125px){
  html[data-theme] nav.barre-drk{padding-left:14px!important;padding-right:14px!important;gap:12px!important;padding-top:8px!important;padding-bottom:8px!important}
  /* Mission 32, lot B (fait B3) : !important nécessaire ici — .drk-nouv-btn (plus bas) pose display:flex!important pour s'afficher en
     ligne avec son chevron dans la barre pleine; sans ce !important-ci, cette règle (plus spécifique en nombre de classes, mais SANS
     !important) perdrait contre lui et le déclencheur resterait visible en dessous du seuil (mesuré : il restait affiché à 390 px avant
     ce correctif, outils/tester-barre.mjs). */
  html[data-theme] nav.barre-drk .links a.nm{display:none!important}
  /* Mission 32, lot B (fait B3) : cacher le déclencheur (ci-dessus, via .links a.nm) ne cache PAS son panneau (.drk-nouv-panel, un
     FRÈRE du déclencheur dans .drk-nouv, pas un descendant de .drk-nouv-btn) — en position absolute avec min-width:180px, le panneau
     restait dans le flux (opacity:0 n'enlève rien du calcul de débordement) et faisait déborder la barre à 390 px (mesuré,
     outils/tester-barre.mjs : nav.scrollWidth > nav.clientWidth). On cache tout le groupe ici, déclencheur ET panneau d'un coup. */
  html[data-theme] nav.barre-drk .drk-nouv{display:none!important}
  html[data-theme] nav.barre-drk .drkr-bouton-racine{display:none}
  html[data-theme] nav.barre-drk .reseaux{display:none}
  html[data-theme] nav.barre-drk a.cx{display:none}
  html[data-theme] nav.barre-drk #lang{margin:0!important}
  html[data-theme] nav.barre-drk .bouton-theme{margin:0 48px 0 0}
  html[data-theme] #drakMenuBtn{display:flex;top:10px}
}
/* Mission 30, fait 178a : tranche intermédiaire, « Connexion » seule devient une icône (44×44 px, remplissage nul); les sept liens, leur
   gap de 14 px (un cadratin, jamais touché) et « Prendre rendez-vous » restent en texte plein, voir le commentaire ci-dessus.
   Mission 31, lot A (fait 179g) : la marque (logo et mot-symbole DRAK INFINITY) reste réduite (24 px / 8,5 px) sur TOUTE cette tranche,
   jusqu'à 1 584 px inclus — avant cette mission, un second seuil (LARGEUR_MARQUE_PLEINE, écart 1 du contrôleur Opus, mission 30) la
   restaurait pleine (40 px / 15 px) à partir de 1 209 px, là où la mesure d'alors montrait assez de place libre. Avec le contenu élargi
   par « Maison 3D connectée », restaurer la marque pleine dès 1 209 px rouvre un débordement de 50 px entre 1 209 et 1 259 px sur
   /outils (mesuré, outils/_tmp-mission-31/_tmp-mesure-barre-m31c.mjs, conservé) : la marque réduite, elle, ne déborde plus nulle part
   dans la tranche. Le second seuil disparaît donc (LARGEUR_MARQUE_PLEINE = LARGEUR_MENU + 1, jamais atteint à l'intérieur de la tranche) :
   une seule media query pour la marque, fusionnée ci-dessous. */
@media (min-width:1126px) and (max-width:1584px){
  html[data-theme] nav.barre-drk{padding:8px 8px!important;gap:1px!important}
  html[data-theme] nav.barre-drk .brand{gap:4px!important}
  html[data-theme] nav.barre-drk .brandlogo{width:24px!important;height:24px!important}
  html[data-theme] nav.barre-drk .brandtext{font-size:8.5px!important;letter-spacing:.01em!important}
  html[data-theme] nav.barre-drk .drkr-bouton-racine{margin:0 2px;padding:5px 6px}
  html[data-theme] nav.barre-drk .reseaux a.rs{width:26px;height:26px}
  html[data-theme] nav.barre-drk .reseaux a.rs svg{width:15px;height:15px}
  html[data-theme] nav.barre-drk a.cx{width:44px;height:44px;padding:0;margin-left:0}
  html[data-theme] nav.barre-drk a.cx .cx-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (min-width:1126px){html[data-theme] #drakMenu{display:none!important}}
@media (max-width:560px){
  html[data-theme] nav.barre-drk .brandlogo{width:34px!important;height:34px!important}
  html[data-theme] nav.barre-drk .brandtext{display:inline!important;font-size:12px!important;letter-spacing:.2em!important}
  html[data-theme] nav.barre-drk .links{gap:4px!important}
}
@media (max-width:430px){
  html[data-theme] nav.barre-drk{gap:4px!important}
  html[data-theme] nav.barre-drk .brandtext{font-size:10.5px!important;letter-spacing:.06em!important}
  html[data-theme] nav.barre-drk .brand{gap:6px!important}
  html[data-theme] nav.barre-drk .brandlogo{width:30px!important;height:30px!important}
  html[data-theme] nav.barre-drk #lang{padding:5px 8px!important}
}
@media (max-width:375px){
  html[data-theme] nav.barre-drk .brandlogo{width:28px!important;height:28px!important}
  html[data-theme] nav.barre-drk .brandtext{font-size:9.5px!important;letter-spacing:.03em!important}
}
@media (max-width:360px){
  html[data-theme] nav.barre-drk{gap:4px!important;padding-left:10px!important;padding-right:10px!important}
  html[data-theme] nav.barre-drk .brandlogo{width:28px!important;height:28px!important}
  html[data-theme] nav.barre-drk .brand{gap:5px!important}
  html[data-theme] nav.barre-drk .brandtext{font-size:9px!important;letter-spacing:.02em!important}
  html[data-theme] nav.barre-drk #lang{padding:5px 8px!important}
  html[data-theme] nav.barre-drk a.cx{margin-right:50px}
}

/* Architecte (mission 20, m6) : sur les pages où la barre est collante (sticky), le haut d une section visée par une ancre (#en-ligne, #online, #a-propos, #contact) n est pas caché par la barre. Sur l accueil la barre est fixe et les sections portent déjà scroll-margin-top : pas de doublon. */
html[data-theme]:not(:has(nav.barre-fixe)){scroll-padding-top:72px}
