/* ==========================================================================
   Thème HUD — L'IA mon Alliée
   --------------------------------------------------------------------------
   Décidé avec Thomas le 04/09/2026, à partir des maquettes comparatives
   (https://claude.ai/code/artifact/f56d5c28-c7b3-4761-8a0c-c1bc09d0b1d6) et
   de deux recherches sur les interfaces primées 2026 (Cooldock et Grainient
   sur Awwwards pour le principe des îlots flottants sur fond mouvant).

   Principes :
   - chaque bloc est un ÎLOT de verre qui flotte, le fond vit entre les blocs ;
   - deux lumières, NUIT et JOUR, choisies par l'utilisateur (mémorisées) ;
   - le RAIL DE GAUCHE NE DISPARAÎT JAMAIS : replié il montre ses icônes,
     déplié il montre les libellés. Le logo autruche bascule les deux états.

   Cette feuille est une SURCOUCHE : elle ne s'applique que sous
   `body[data-theme="hud"]` et ne modifie aucune règle existante d'app.css.
   Retirer le thème = retirer l'attribut, rien d'autre à défaire.
   ========================================================================== */

body[data-theme="hud"]{
  --hud-corail:#FF5A3C; --hud-lagon:#17C3B2;
  --hud-r:20px;
}
/* sur une fenêtre transparente (réglette), l'îlot ne peut pas être translucide :
   ce qu'il y a derrière est le bureau, pas le fond de la plateforme */
body[data-theme="hud"]{--hud-side-opaque:#FBF7F3}
body[data-theme="hud"][data-hud="sable"]{--hud-side-opaque:#EAE0CF}
body[data-theme="hud"][data-hud="lin"]{--hud-side-opaque:#DCE2D3}
body[data-theme="hud"][data-hud="ardoise"]{--hud-side-opaque:#26292E}
body[data-theme="hud"][data-hud="encre"]{--hud-side-opaque:#121318}

/* ---------- Ambiance par défaut (= jour : H · HUD, lumière du jour) ----------
   Les jetons sont ceux de la maquette retenue par Thomas (photos du 04/09/2026),
   repris tels quels — c'est à ce rendu-là que la plateforme doit ressembler. */
body[data-theme="hud"]{
  --hud-bg:#F6F2EC;
  --hud-panel:rgba(255,255,255,.72);
  --hud-row:rgba(21,24,28,.035);
  --hud-row-h:rgba(21,24,28,.06);
  --hud-line:rgba(21,24,28,.09);
  --hud-line-h:rgba(21,24,28,.2);
  --hud-ink:#181A1F;
  --hud-muted:#5B6675;
  --hud-side:rgba(255,255,255,.6);
  --hud-side-muted:#6C7480;
  --hud-corail-d:#D6431F;
  --hud-shadow:0 24px 60px -30px rgba(21,24,28,.28),0 1px 0 rgba(255,255,255,.9) inset;
  --hud-shadow-h:0 34px 80px -30px rgba(21,24,28,.34),0 0 0 1px rgba(255,90,60,.3);
  --hud-grain-op:.045;
  --hud-grain-blend:multiply;
  --hud-halo1:rgba(255,160,130,.55);
  --hud-halo2:rgba(120,230,215,.5);
  --hud-halo3:rgba(255,205,170,.45);
}


/* ---------- le fond : halos mouvants + grain, sous toute l'application ---------- */
body[data-theme="hud"]{background:var(--hud-bg);color:var(--hud-ink)}
body[data-theme="hud"] #app{position:relative;background:transparent}
body[data-theme="hud"] #app::before,
body[data-theme="hud"] #app::after{content:"";position:fixed;inset:0;pointer-events:none}
body[data-theme="hud"] #app::before{
  z-index:0;
  background:
    radial-gradient(1100px 750px at 12% -10%, var(--hud-halo1), transparent 55%),
    radial-gradient(900px 700px at 100% 8%, var(--hud-halo2), transparent 55%),
    radial-gradient(1000px 800px at 45% 120%, var(--hud-halo3), transparent 55%),
    var(--hud-bg);
  animation:hudDrift 22s ease-in-out infinite alternate;
}
body[data-theme="hud"] #app::after{
  z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--hud-grain-op);
  mix-blend-mode:var(--hud-grain-blend);
}
@keyframes hudDrift{
  0%{filter:hue-rotate(0deg) saturate(1)}
  50%{filter:hue-rotate(-8deg) saturate(1.15)}
  100%{filter:hue-rotate(6deg) saturate(1)}
}
body[data-theme="hud"] #side,
body[data-theme="hud"] #main,
body[data-theme="hud"] #login{position:relative;z-index:2}

/* L'écran de connexion suit le thème : c'est la première image que le client
   voit, elle ne peut pas rester en clair quand la plateforme est en nuit. */
body[data-theme="hud"] #login{background:transparent;color:var(--hud-ink)}
/* L'autruche 3D du site, celle que le client a vue avant de s'inscrire : la
   première image de la plateforme doit être la même que celle de la vitrine.
   L’icône de visage 3D garde sa lisibilité dans la colonne, une fois connecté. */
body[data-theme="hud"] #login .brand-logo{
  width:auto;height:clamp(220px,32vh,340px);
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.5));
}
body[data-theme="hud"] #login label,
body[data-theme="hud"] #login .lbl{color:var(--hud-ink)}
body[data-theme="hud"] #login input{
  background:var(--hud-panel);border:1px solid var(--hud-line);color:var(--hud-ink);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
body[data-theme="hud"] #login a{color:var(--hud-corail)}
/* Les boutons SECONDAIRES prennent le verre. Le bouton principal `.btn` garde
   son corail : c'est l'action attendue, elle doit rester la seule colorée. */
body[data-theme="hud"] #login button:not(.btn),
body[data-theme="hud"] #login .btn.ghost{
  background:var(--hud-panel);border:1px solid var(--hud-line);color:var(--hud-ink);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
/* Seule l'action attendue est corail. `.ghost` = bouton secondaire, `.lien` =
   un lien déguisé en bouton (mot de passe oublié) : ni l'un ni l'autre ne doit
   rivaliser avec « Se connecter ». */
body[data-theme="hud"] #login .btn:not(.ghost):not(.lien){background:var(--hud-corail);color:#fff;border:0}
body[data-theme="hud"] #login .btn.lien{background:none;border:0;color:var(--hud-muted);text-decoration:underline}
body[data-theme="hud"] #login .btn.lien:hover{color:var(--hud-corail)}
body[data-theme="hud"] #login .small,
body[data-theme="hud"] #login .muted,
body[data-theme="hud"] #login footer{color:var(--hud-muted)}

/* ---------- le rail : un ÎLOT de verre qui flotte, TOUJOURS visible ----------
   Reprise de la maquette H · HUD : le cadre est transparent (padding 18 px,
   gap 18 px), la colonne est un îlot arrondi (22 px) en verre, replié en
   icônes (74 px) ou déployé (248 px). Le logo autruche bascule les deux. */
/* 11 px de marge partout : la même en réglette (96 = 74 + 2 × 11) et déroulée, pour
   qu'aucun élément ne saute quand la fenêtre glisse */
body[data-theme="hud"] #app{padding:11px;gap:14px}
body[data-theme="hud"] #side{
  width:248px;flex:none;margin:0;color:var(--hud-ink);
  border:1px solid var(--hud-line);border-right:1px solid var(--hud-line);border-radius:22px;
  background:var(--hud-side);
  backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:var(--hud-shadow);
  transition:width .38s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;display:flex;flex-direction:column;
}
body[data-theme="hud"][data-rail="replie"] #side{width:74px}
body[data-theme="hud"] #side .bande-gamme{display:none}
body[data-theme="hud"] #main{padding:18px 22px 18px 4px}

/* le logo autruche : bouton de bascule du rail. Au survol, elle bouge. */
body[data-theme="hud"] #side .logo{
  display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;
  padding:18px 16px 8px;border-bottom:0;text-align:left;cursor:pointer;position:relative;
  transition:padding .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side .logo img{
  grid-row:1/3;grid-column:1;height:46px;width:44px;object-fit:contain;border-radius:10px;margin:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side .logo:hover img{transform:rotate(-6deg) translateY(-2px)}
body[data-theme="hud"] #side .logo:active img{transform:rotate(-10deg) translateY(1px) scale(.96)}
body[data-theme="hud"] #side .logo-nom{
  grid-column:2;margin:0;font:700 22px/1 "Space Grotesk","Public Sans",sans-serif;
  color:var(--hud-corail);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);
}
/* le même mot-marque sur l'écran de connexion, sous l'autruche, en plus grand */
body[data-theme="hud"] #login .brand-nom{
  margin:14px auto 0;text-align:center;font:700 34px/1 "Space Grotesk","Public Sans",sans-serif;
  color:var(--hud-corail);text-transform:uppercase;letter-spacing:-.01em;
}
body[data-theme="hud"] #login .brand-nom b{display:block;font-weight:700}
body[data-theme="hud"] #login .brand-nom small{
  display:block;font:600 13px "Public Sans",sans-serif;letter-spacing:.2em;margin-top:6px;
}
body[data-theme="hud"] #login .brand-promesse{
  margin:14px auto 0;max-width:360px;text-align:center;font:400 15px/1.5 "Public Sans",sans-serif;
  color:var(--hud-muted);
}
body[data-theme="hud"] #side .logo-nom b{display:block;font-weight:700}
body[data-theme="hud"] #side .logo-nom small{
  display:block;font:600 9.5px "Public Sans",sans-serif;letter-spacing:.18em;margin-top:3px;
}
body[data-theme="hud"] #side .logo-gamme{
  grid-column:2;margin:2px 0 0;font:700 10px "Public Sans",sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hud-corail);white-space:nowrap;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side .logo-plan{grid-column:1/-1}
body[data-theme="hud"] #side .logo-bascule{grid-column:1/-1}

/* les pastilles de gamme, comme dans la maquette : trois cases égales */
body[data-theme="hud"] #side .logo-bascule{
  margin:6px 14px 8px;padding:0;border-top:0;display:flex;gap:6px;flex-wrap:nowrap;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side .logo-bascule .pl{
  flex:1;min-width:0;padding:6px 2px;border-radius:8px;text-align:center;
  font:600 9px "Public Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase;
  color:var(--hud-side-muted);background:transparent;border:1px solid var(--hud-line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .18s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side .logo-bascule .pl:not(.on):hover{border-color:var(--hud-corail);color:var(--hud-corail-d)}
body[data-theme="hud"] #side .logo-bascule .pl.on{
  background:rgba(255,90,60,.14);border-color:rgba(255,90,60,.4);color:var(--hud-corail-d);
}
/* les pastilles de rôle en lecture seule font doublon avec le pied (statut) :
   seul le sélecteur du staff (.role-switch) garde sa place */
body[data-theme="hud"] #side .role-badge-row,
body[data-theme="hud"] #side .role-badge{display:none}
body[data-theme="hud"] #side .role-switch{margin:6px 14px 0}
body[data-theme="hud"] #side .role-switch > div{margin:0!important;gap:4px}

/* ce qui s'efface quand le rail est replié — jamais les icônes */
body[data-theme="hud"][data-rail="replie"] #side .logo{display:block;padding:14px 0 8px;text-align:center}
body[data-theme="hud"][data-rail="replie"] #side .logo img{height:44px;margin:0 auto}
body[data-theme="hud"][data-rail="replie"] #side .logo-nom,
body[data-theme="hud"][data-rail="replie"] #side .logo-gamme,
body[data-theme="hud"][data-rail="replie"] #side .logo-plan,
body[data-theme="hud"][data-rail="replie"] #side .role-badge,
body[data-theme="hud"][data-rail="replie"] #side .role-badge-row,
body[data-theme="hud"][data-rail="replie"] #side .role-switch,
body[data-theme="hud"][data-rail="replie"] #side .role-pills,
body[data-theme="hud"][data-rail="replie"] #side .pill-role,
body[data-theme="hud"][data-rail="replie"] #side .pl,
body[data-theme="hud"][data-rail="replie"] #side .logo-bascule,
body[data-theme="hud"][data-rail="replie"] #side .foot #footInfo,
body[data-theme="hud"][data-rail="replie"] #side .foot .hud-who,
body[data-theme="hud"][data-rail="replie"] #side .foot button,
body[data-theme="hud"][data-rail="replie"] #side nav .nav-sec,
body[data-theme="hud"][data-rail="replie"] #side nav button .badge-attente,
body[data-theme="hud"][data-rail="replie"] #side nav button > span:not(.ic){
  opacity:0;transform:translateX(-8px);pointer-events:none;
  visibility:hidden;height:0;width:0;margin:0;padding:0;overflow:hidden;
}
body[data-theme="hud"][data-rail="replie"] #side nav .nav-sec{height:8px;visibility:visible}
body[data-theme="hud"][data-rail="replie"] #side nav button{justify-content:center;padding-left:0;padding-right:0}
body[data-theme="hud"][data-rail="replie"] #side nav button .ic{margin:0}
body[data-theme="hud"][data-rail="replie"] #side nav button.active::before{left:-4px}
body[data-theme="hud"][data-rail="replie"] #side .foot{flex-direction:column;padding:10px 6px 14px;gap:0}

/* la navigation, ligne à ligne */
body[data-theme="hud"] #side nav{padding:6px 10px 10px;scrollbar-width:none}
body[data-theme="hud"] #side nav::-webkit-scrollbar{display:none}
body[data-theme="hud"] #side .nav-sec{
  font:600 10px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hud-side-muted);padding:14px 10px 6px;white-space:nowrap;overflow:hidden;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side nav button{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border-radius:11px;font-weight:500;font-size:13.5px;text-align:left;
  color:var(--hud-ink);white-space:nowrap;
  transition:background .18s cubic-bezier(.2,.8,.2,1),color .18s,transform .18s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side nav button > span:not(.ic){
  white-space:nowrap;transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side nav button:hover{background:var(--hud-row-h);color:var(--hud-ink);transform:translateX(2px)}
body[data-theme="hud"] #side nav button.active{
  background:rgba(255,90,60,.12);color:var(--hud-ink);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,90,60,.3);
}
body[data-theme="hud"] #side nav button.active::before{
  content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:var(--hud-corail);transition:left .32s cubic-bezier(.2,.8,.2,1);
}
/* Les icônes au trait (theme-hud-icones.js) prennent la couleur du texte et
   s'alignent toutes pareil — un emoji, lui, a sa propre taille et sa couleur. */
body[data-theme="hud"] #side nav button .ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:none;font-size:0;
}
body[data-theme="hud"] #side nav button .ic svg{display:block}
/* la couleur portée par l'icône (F · Linear) — nuances pour le jour, puis pour la nuit.
   Chaque nuance tient ≥ 3:1 (WCAG 1.4.11) sur le fond de son rail : jour 4,2, sable 3,4,
   lin 3,4, encre 4,8, ardoise 3,8 au minimum (calculé le 04/09/2026). */
body[data-theme="hud"] #side nav button .ic{color:var(--hud-side-muted)}
body[data-theme="hud"] #side nav button[data-hud-teinte="jaune"] .ic{color:#9C6F14}
body[data-theme="hud"] #side nav button[data-hud-teinte="ocre"] .ic{color:#866318}
body[data-theme="hud"] #side nav button[data-hud-teinte="indigo"] .ic{color:#4A56BF}
body[data-theme="hud"] #side nav button[data-hud-teinte="bleu"] .ic{color:#2B6BB3}
body[data-theme="hud"] #side nav button[data-hud-teinte="rouge"] .ic{color:#B83A3A}
body[data-theme="hud"] #side nav button[data-hud-teinte="vert"] .ic{color:#1F7A50}
body[data-theme="hud"] #side nav button[data-hud-teinte="magenta"] .ic{color:#9E4396}
body[data-theme="hud"] #side nav button[data-hud-teinte="corail"] .ic{color:#C43C1B}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="jaune"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="jaune"] .ic{color:#E8B24A}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="ocre"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="ocre"] .ic{color:#D0A030}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="indigo"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="indigo"] .ic{color:#7B86E6}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="bleu"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="bleu"] .ic{color:#3D8BE0}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="rouge"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="rouge"] .ic{color:#E05A5A}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="vert"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="vert"] .ic{color:#2FA36B}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="magenta"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="magenta"] .ic{color:#C15AB8}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="corail"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="corail"] .ic{color:#FF5A3C}
body[data-theme="hud"][data-hud="ardoise"] #side nav button[data-hud-teinte="gris"] .ic,
body[data-theme="hud"][data-hud="encre"] #side nav button[data-hud-teinte="gris"] .ic{color:#8A8F98}
body[data-theme="hud"] .badge-attente{
  margin-left:auto;font:600 10.5px "Public Sans",sans-serif;padding:2px 7px;border-radius:999px;
  background:var(--hud-row-h);color:var(--hud-muted);min-width:0;
}

/* le pied : avatar, nom, statut — et la sortie, discrète */
body[data-theme="hud"] #side .foot{
  padding:10px 14px 14px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  border-top:1px solid var(--hud-line);color:var(--hud-muted);
}
body[data-theme="hud"] #side .foot #footInfo,
body[data-theme="hud"] #side .foot #footVersion{display:none}
body[data-theme="hud"] #side .foot .hud-av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--hud-corail),var(--hud-lagon));color:#fff;
  font:700 12px "Space Grotesk","Public Sans",sans-serif;box-shadow:0 0 16px rgba(255,90,60,.35);
}
body[data-theme="hud"] #side .foot .hud-who{
  flex:1;min-width:0;font-size:12.5px;line-height:1.2;color:var(--hud-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #side .foot .hud-who small{display:block;color:var(--hud-side-muted);font-size:11px}
body[data-theme="hud"] #side .foot button{
  width:30px;height:30px;margin:0;padding:0;border-radius:8px;font-size:0;flex:none;
  border:1px solid var(--hud-line);color:var(--hud-muted);background:var(--hud-row);
  display:grid;place-items:center;
}
body[data-theme="hud"] #side .foot button::before{
  content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat;
}
body[data-theme="hud"] #side .foot button:hover{border-color:var(--hud-corail);color:var(--hud-corail)}

/* le déroulé : le contenu se dévoile de gauche à droite derrière le rail */
body[data-theme="hud"] #main{clip-path:inset(0 0 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1),opacity .3s cubic-bezier(.2,.8,.2,1)}
body[data-theme="hud"].hud-deploiement #main{clip-path:inset(0 100% 0 0);opacity:0;pointer-events:none}

/* application installée : la fenêtre est transparente, la plateforme entière
   est un panneau arrondi (22 px) posé sur le bureau — le même arrondi que l'îlot */
html.hud-natif{background:transparent}
body[data-theme="hud"].hud-natif{background:transparent}
body[data-theme="hud"].hud-natif #app{border-radius:22px;overflow:hidden;background:var(--hud-bg);height:100vh}
body[data-theme="hud"].hud-natif #app::before,
body[data-theme="hud"].hud-natif #app::after{position:absolute}
body[data-theme="hud"].hud-natif #login{border-radius:22px;overflow:hidden;background:var(--hud-bg);min-height:100vh;box-sizing:border-box}

/* ---------- les îlots : chaque carte flotte, séparée ---------- */
body[data-theme="hud"] #main{background:transparent;color:var(--hud-ink)}
body[data-theme="hud"] #main header h1{color:var(--hud-ink)}
body[data-theme="hud"] #main header .sub{color:var(--hud-muted)}
body[data-theme="hud"] .card{
  background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:var(--hud-r);
  box-shadow:var(--hud-shadow);color:var(--hud-ink);
  backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] .card:hover{transform:translateY(-4px);box-shadow:var(--hud-shadow-h)}
body[data-theme="hud"] .card h3{color:var(--hud-ink)}

/* champs, boutons et tables, accordés aux deux lumières */
body[data-theme="hud"] input,
body[data-theme="hud"] textarea,
body[data-theme="hud"] select{
  background:var(--hud-row);border-color:var(--hud-line);color:var(--hud-ink);
}
body[data-theme="hud"] input:focus,
body[data-theme="hud"] textarea:focus,
body[data-theme="hud"] select:focus{
  border-color:var(--hud-corail);box-shadow:0 0 0 4px rgba(255,90,60,.18);
}
body[data-theme="hud"] input::placeholder,
body[data-theme="hud"] textarea::placeholder{color:var(--hud-muted)}
body[data-theme="hud"] .btn,
body[data-theme="hud"] button.btn{border-radius:11px}
/* Les boutons secondaires de l'application n'ont pas de couleur propre : sous
   une ambiance sombre, ils héritaient d'une encre sombre sur fond sombre et
   devenaient illisibles (constaté en « encre » le 04/09/2026). */
body[data-theme="hud"] .btn.ghost,
body[data-theme="hud"] button.ghost,
body[data-theme="hud"] .card button:not(.btn):not(.ghost):not(.pc-step):not(.tab):not(.assist-x):not(.scan-choix):not(.hud-past):not(.hud-aide-b):not(.hud-aide-ok){
  background:var(--hud-row);border:1px solid var(--hud-line);color:var(--hud-ink);
}
body[data-theme="hud"] .btn.ghost:hover,
body[data-theme="hud"] button.ghost:hover{
  background:var(--hud-row-h);border-color:var(--hud-corail);color:var(--hud-ink);
}
body[data-theme="hud"] table{color:var(--hud-ink)}
body[data-theme="hud"] th{color:var(--hud-muted);border-color:var(--hud-line)}
body[data-theme="hud"] td{border-color:var(--hud-line)}
body[data-theme="hud"] tr:hover td{background:var(--hud-row)}
body[data-theme="hud"] hr{border-color:var(--hud-line)}

/* ---------- les AMBIANCES : cinq lumières au choix du client ----------
   Reprises de la direction E · Trait, que Thomas a retenue avec le HUD
   (04/09/2026) : sable et papier à gauche, lin au milieu, ardoise et encre à
   droite — du plus clair au plus sombre, comme on lit. Chaque ambiance
   re-tokenise l'interface entière, elle n'est pas un simple filtre. */
#hudLumiere{
  /* bas GAUCHE : le coin bas droit appartient à l'assistant autruche (#assistWrap). */
  position:fixed;left:22px;bottom:18px;z-index:60;display:none;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:var(--hud-panel);
  border:1.5px solid var(--hud-ink);box-shadow:3px 3px 0 var(--hud-corail);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
body[data-theme="hud"] #hudLumiere{display:flex}
#hudLumiere .lbl{
  font:600 10.5px "Public Sans",-apple-system,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hud-muted);margin-right:2px;
}
#hudLumiere button{
  width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s;
  font-size:0;
}
#hudLumiere button:hover{transform:scale(1.15)}
#hudLumiere button[aria-pressed="true"]{border-color:var(--hud-ink)}
#hudLumiere button[data-lumiere="sable"]{background:#F0E6D6}
#hudLumiere button[data-lumiere="jour"]{background:linear-gradient(135deg,#FFE3D8,#FFFFFF 55%,#DDF6F2);box-shadow:inset 0 0 0 1px #E6DFD6}
#hudLumiere button[data-lumiere="lin"]{background:#E3E7DC}
#hudLumiere button[data-lumiere="ardoise"]{background:#2A2D32}
#hudLumiere button[data-lumiere="encre"]{background:#08090C}

/* Chaque ambiance redéfinit les mêmes jetons : rien d'autre ne change. */
body[data-theme="hud"][data-hud="sable"]{
  --hud-bg:#F0E6D6; --hud-panel:rgba(255,252,246,.82); --hud-row:rgba(31,27,23,.04);
  --hud-row-h:rgba(31,27,23,.07); --hud-line:rgba(31,27,23,.12); --hud-line-h:rgba(31,27,23,.28);
  --hud-ink:#1F1B17; --hud-muted:#6E655B; --hud-side:rgba(232,220,200,.9);
  --hud-shadow:0 1px 2px rgba(31,27,23,.05),0 14px 34px -20px rgba(31,27,23,.22);
  --hud-shadow-h:0 2px 5px rgba(31,27,23,.07),0 22px 46px -22px rgba(31,27,23,.3);
  --hud-grain-op:.09; --hud-grain-blend:multiply;
  --hud-halo1:rgba(255,90,60,.14); --hud-halo2:rgba(23,195,178,.1); --hud-halo3:rgba(255,205,170,.2);
}
body[data-theme="hud"][data-hud="jour"]{
  --hud-bg:#F6F2EC; --hud-panel:rgba(255,255,255,.72); --hud-row:rgba(21,24,28,.035);
  --hud-row-h:rgba(21,24,28,.06); --hud-line:rgba(21,24,28,.09); --hud-line-h:rgba(21,24,28,.2);
  --hud-ink:#181A1F; --hud-muted:#5B6675; --hud-side:rgba(255,255,255,.6); --hud-side-muted:#6C7480;
  --hud-shadow:0 24px 60px -30px rgba(21,24,28,.28),0 1px 0 rgba(255,255,255,.9) inset;
  --hud-shadow-h:0 34px 80px -30px rgba(21,24,28,.34),0 0 0 1px rgba(255,90,60,.3);
  --hud-grain-op:.045; --hud-grain-blend:multiply;
  --hud-halo1:rgba(255,160,130,.55); --hud-halo2:rgba(120,230,215,.5); --hud-halo3:rgba(255,205,170,.45);
}
body[data-theme="hud"][data-hud="lin"]{
  --hud-bg:#E3E7DC; --hud-panel:rgba(250,251,247,.88); --hud-row:rgba(30,36,32,.04);
  --hud-row-h:rgba(30,36,32,.07); --hud-line:rgba(30,36,32,.12); --hud-line-h:rgba(30,36,32,.3);
  --hud-ink:#1E2420; --hud-muted:#5F6B60; --hud-side:rgba(214,220,204,.92);
  --hud-shadow:0 1px 2px rgba(30,36,32,.05),0 14px 34px -20px rgba(30,36,32,.2);
  --hud-shadow-h:0 2px 5px rgba(30,36,32,.07),0 22px 46px -22px rgba(30,36,32,.28);
  --hud-grain-op:.07; --hud-grain-blend:multiply;
  --hud-halo1:rgba(255,90,60,.08); --hud-halo2:rgba(23,195,178,.16); --hud-halo3:rgba(200,220,190,.2);
}
body[data-theme="hud"][data-hud="ardoise"]{
  --hud-bg:#2A2D32; --hud-panel:rgba(52,56,62,.82); --hud-row:rgba(255,255,255,.05);
  --hud-row-h:rgba(255,255,255,.09); --hud-line:rgba(255,255,255,.1); --hud-line-h:rgba(255,255,255,.24);
  --hud-ink:#F1EEE8; --hud-muted:#A7ABB2; --hud-side:rgba(35,38,42,.9);
  --hud-shadow:0 24px 56px -28px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset;
  --hud-shadow-h:0 34px 74px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,90,60,.28);
  --hud-grain-op:.05; --hud-grain-blend:overlay;
  --hud-halo1:rgba(255,90,60,.2); --hud-halo2:rgba(23,195,178,.16); --hud-halo3:rgba(120,60,220,.12);
}
body[data-theme="hud"][data-hud="encre"]{
  --hud-bg:#08090C; --hud-panel:rgba(18,19,24,.72); --hud-row:rgba(255,255,255,.045);
  --hud-row-h:rgba(255,255,255,.08); --hud-line:rgba(255,255,255,.09); --hud-line-h:rgba(255,255,255,.22);
  --hud-ink:#F3F1EC; --hud-muted:#9A9FA8; --hud-side:rgba(18,19,24,.72); --hud-side-muted:#8B8F97;
  --hud-corail-d:#FF7A5C;
  --hud-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06) inset;
  --hud-shadow-h:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,90,60,.3);
  --hud-grain-op:.05; --hud-grain-blend:overlay;
  --hud-halo1:rgba(255,90,60,.35); --hud-halo2:rgba(23,195,178,.28); --hud-halo3:rgba(120,60,220,.22);
}
body[data-theme="hud"][data-hud="sable"]{--hud-side-muted:#8A8075;--hud-corail-d:#D6431F}
body[data-theme="hud"][data-hud="lin"]{--hud-side-muted:#6B7A6C;--hud-corail-d:#D6431F}
body[data-theme="hud"][data-hud="ardoise"]{--hud-side-muted:#A7ABB2;--hud-corail-d:#FF7A5C}

/* ---------- RÉGLETTE : la fenêtre collée au bord de l'écran ----------
   Dans l’application native sous 420 px, la fenêtre EST le rail : le contenu n'a pas la place d'exister.
   Il n'est pas rétréci, il attend — un clic sur l'autruche élargit la FENÊTRE
   (pont natif, voir client_app.py) et la plateforme se déroule vers la droite.
   C'est la fenêtre qui bouge, jamais le contenu qui se comprime. */
@media (max-width:420px){
  /* app.css bascule en mise en page MOBILE sous 680 px : rail horizontal,
     logo et pied masqués. C'est juste pour un téléphone, désastreux pour une
     réglette verticale — l'autruche disparaissait, donc plus rien à cliquer
     pour dérouler (constaté le 04/09/2026). On rétablit la colonne. */
  /* La réglette garde sa taille physique ; le zoom mémorisé reste réservé au
     contenu déployé. Les dimensions en vh/vw et le zoom du conteneur se
     compensent différemment selon les versions de WebKit. */
  html.hud-natif{background:transparent!important}
  body[data-theme="hud"].hud-natif #app:not(.hidden):not([hidden]){display:flex!important;flex-direction:row!important;zoom:1!important;width:100vw!important;height:100vh!important;padding:11px!important;gap:0!important;box-sizing:border-box}
  body[data-theme="hud"].hud-natif #betaBouton{display:none!important}
  /* L'îlot prend EXACTEMENT la place qui reste dans la fenêtre — largeur ET hauteur, bordure
     comprise (`box-sizing`). Avant, 74 px de contenu + 2 px de bordure + 22 px de marge
     dépassaient les 96 px de la réglette : le bord droit et ses coins arrondis étaient coupés,
     et l'on voyait « le début d'un truc qui doit s'étirer » (Thomas, 05/09/2026). Entier,
     maintenant : quatre coins ronds, un liseré tout autour, quelle que soit la largeur. */
  body[data-theme="hud"].hud-natif #side{
    width:calc(100vw - 22px)!important;min-width:0!important;max-width:none!important;
    box-sizing:border-box!important;
    flex-direction:column!important;align-items:stretch!important;
    height:calc(100vh - 22px)!important;margin:0!important;border-radius:22px!important;
    overflow-x:hidden!important;
  }
  /* la fenêtre est transparente : seul l'îlot arrondi se voit, collé au bord */
  body[data-theme="hud"].hud-natif,
  body[data-theme="hud"].hud-natif #app{background:transparent!important}
  body[data-theme="hud"].hud-natif #app::before,
  body[data-theme="hud"].hud-natif #app::after{display:none}
  body[data-theme="hud"].hud-natif #side{background:var(--hud-side-opaque,var(--hud-side))!important}
  body[data-theme="hud"].hud-natif #login{background:var(--hud-side-opaque,var(--hud-bg))!important}
  body[data-theme="hud"].hud-natif #side .logo{display:block!important}
  body[data-theme="hud"].hud-natif #side .foot{display:flex!important}
  body[data-theme="hud"].hud-natif #side nav{
    flex-direction:column!important;overflow-x:hidden!important;overflow-y:auto!important;
  }
  body[data-theme="hud"].hud-natif #side nav button{width:100%!important}
  body[data-theme="hud"].hud-natif #main{display:none}
  /* Une réglette ne montre QUE l'autruche et les icônes. Les pastilles de rôle,
     le choix de gamme et les titres de section débordaient de 96 px — ils
     reviennent dès que la fenêtre est déroulée. Ces règles ne peuvent pas se
     greffer sur `data-rail="replie"` : en réglette, le rail est DÉPLOYÉ, il
     occupe simplement toute la fenêtre. */
  body[data-theme="hud"].hud-natif #side .role-badge,
  body[data-theme="hud"].hud-natif #side .role-switch,
  body[data-theme="hud"].hud-natif #side .role-pills,
  body[data-theme="hud"].hud-natif #side .pill-role,
  body[data-theme="hud"].hud-natif #side .logo-bascule,
  body[data-theme="hud"].hud-natif #side .logo-nom,
  body[data-theme="hud"].hud-natif #side .logo-gamme,
  body[data-theme="hud"].hud-natif #side .logo-plan,
  body[data-theme="hud"].hud-natif #side .nav-sec,
  body[data-theme="hud"].hud-natif #side nav button > span:not(.ic),
  body[data-theme="hud"].hud-natif #side .foot #footInfo,
  body[data-theme="hud"].hud-natif #side .foot button{
    display:none!important;
  }
  body[data-theme="hud"].hud-natif #side nav button{justify-content:center!important;padding-inline:0!important}
  body[data-theme="hud"].hud-natif #side .logo{display:block!important;padding:14px 0 8px!important;text-align:center}
  body[data-theme="hud"].hud-natif #side .logo img{height:46px!important;margin:0 auto}
  body[data-theme="hud"].hud-natif #side .foot .hud-who,
  body[data-theme="hud"].hud-natif #side .foot .hud-av{display:none!important}
  body[data-theme="hud"].hud-natif #side nav button.active::before{left:-4px}
  /* Le sélecteur d'ambiance et l'assistant n'ont pas leur place dans 96 px :
     ils reviennent dès que la fenêtre est déroulée. */
  body[data-theme="hud"].hud-natif #hudLumiere{display:none!important}
  body[data-theme="hud"].hud-natif #assistWrap{display:none!important}
  /* L'écran de connexion ne tient pas non plus : on invite à dérouler. */
  body[data-theme="hud"].hud-natif #login{padding:18px 8px}
  body[data-theme="hud"].hud-natif #login .brand-logo{height:auto;width:100%;max-width:88px;margin:0 auto;display:block}
  body[data-theme="hud"].hud-natif #login label,
  body[data-theme="hud"].hud-natif #login .login-form,
  body[data-theme="hud"].hud-natif #login .login-alt,
  body[data-theme="hud"].hud-natif #login .note,
  body[data-theme="hud"].hud-natif #login #loginVersion,
  body[data-theme="hud"].hud-natif #login img:not(.brand-logo){display:none}
  /* Rail replié, non connecté (Thomas, 05/09/2026) : l'autruche en HAUT, rien dessous — ni
     mot-marque, ni consigne. Elle est le bouton : un clic déroule la fenêtre et mène à la
     connexion (theme-hud.js). */
  body[data-theme="hud"].hud-natif #login:not(.hidden):not([hidden]){
    display:flex!important;flex-direction:column;justify-content:flex-start;align-items:center;
    min-height:auto!important;padding:12px 6px!important;
  }
  body[data-theme="hud"].hud-natif #login .brand-nom,
  body[data-theme="hud"].hud-natif #login .brand-promesse{display:none!important}
  /* Une seule autruche, jamais étirée : la règle générale (hauteur en vh) est écrasée ici,
     la largeur commande et la hauteur suit l'image (Thomas, 05/09/2026 : « l'image est
     étirée »). */
  body[data-theme="hud"].hud-natif #login .brand-logo{
    cursor:pointer;width:100%!important;max-width:76px!important;height:auto!important;
    aspect-ratio:1/1;object-fit:contain;
  }
  body[data-theme="hud"].hud-natif #login .brand-logo:hover{transform:scale(1.06)}
  body[data-theme="hud"].hud-natif #login .brand-logo{transition:transform .15s}
}

@media (prefers-reduced-motion:reduce){
  body[data-theme="hud"] #app::before{animation:none}
  body[data-theme="hud"] #side,
  body[data-theme="hud"] .card,
  body[data-theme="hud"] #side .logo img{transition:none}
}

/* ======================================================================
   L'ACCUEIL DE LA MAQUETTE (theme-hud-accueil.js) — Thomas, 04/09/2026 :
   « je veux l'UI que tu m'as fait ». La barre ⌘K en haut, le bonjour daté,
   « Ma journée » repliable, la question du moment, les tuiles chiffrées à
   droite, l'autruche qui parle en bas à droite, l'ambiance au centre.
   ====================================================================== */

/* ---------- la barre du haut ---------- */
#hudTop{display:none}
body[data-theme="hud"] #hudTop{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:-8px 0 22px;
}
body[data-theme="hud"] .hud-search{
  flex:1 1 150px;min-width:0;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;
  border-radius:14px;border:1px solid var(--hud-line);background:var(--hud-panel);
  color:var(--hud-muted);font:500 13px "Public Sans",-apple-system,sans-serif;
  cursor:pointer;text-align:left;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--hud-shadow);transition:border-color .2s,box-shadow .2s;
}
body[data-theme="hud"] .hud-search:hover{border-color:var(--hud-line-h);box-shadow:var(--hud-shadow-h)}
body[data-theme="hud"] .hud-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body[data-theme="hud"] .hud-search span{flex:1}
body[data-theme="hud"] .hud-search kbd{
  font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;border-radius:7px;
  border:1px solid var(--hud-line);color:var(--hud-muted);background:var(--hud-row);
}
body[data-theme="hud"] .hud-top-droite{display:flex;flex-wrap:wrap;gap:8px;max-width:100%;margin-left:auto}
/* Un bouton de cette barre porte son nom en toutes lettres quand il en a un (.hud-icb-lab) :
   une infobulle ne se lit qu'au survol d'une souris, et n'existe donc pas au doigt (retour
   client du 20/09/2026, tablette). Sans étiquette, le bouton garde ses 42 px : 18 px d'icône
   et deux fois 12 px de marge. */
body[data-theme="hud"] .hud-icb{
  position:relative;min-width:42px;height:42px;padding:0 12px;gap:8px;border-radius:14px;border:1px solid var(--hud-line);
  background:var(--hud-panel);color:var(--hud-ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--hud-shadow);transition:border-color .2s,transform .2s;
}
body[data-theme="hud"] .hud-icb:hover{border-color:var(--hud-line-h);transform:translateY(-1px)}
body[data-theme="hud"] .hud-icb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="hud"] .hud-icb .hud-dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--hud-corail);box-shadow:0 0 0 2px var(--hud-panel)}
body[data-theme="hud"] .hud-icb-ic{position:relative;display:flex;align-items:center;justify-content:center;flex:none}
body[data-theme="hud"] .hud-icb-lab{font:500 12.5px "Public Sans",-apple-system,sans-serif;white-space:nowrap}
/* la pastille suit l'icône, jamais le bout de l'étiquette */
body[data-theme="hud"] .hud-icb .hud-icb-ic .hud-dot{top:-3px;right:-4px}

/* ---------- la palette ⌘K ---------- */
#hudPal{position:fixed;inset:0;z-index:9000;background:rgba(20,17,15,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
#hudPal .hud-pal-box{width:min(560px,92vw);border-radius:18px;background:var(--hud-panel,#fff);border:1px solid var(--hud-line-h,#ddd);box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:hidden;color:var(--hud-ink,#222)}
#hudPal .hud-pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hud-line,#eee)}
#hudPal .hud-pal-in svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;color:var(--hud-muted,#777)}
#hudPal input{flex:1;border:0;outline:0;background:transparent;font:500 15px "Public Sans",-apple-system,sans-serif;color:inherit}
#hudPalList{max-height:52vh;overflow:auto;padding:6px}
#hudPal .hud-pal-r{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;font:500 13.5px "Public Sans",-apple-system,sans-serif}
#hudPal .hud-pal-r.sel,#hudPal .hud-pal-r:hover{background:var(--hud-row-h,#f2f2f2)}
#hudPal .hud-pal-r small{margin-left:auto;color:var(--hud-muted,#888);font-size:11.5px}
#hudPal .hud-pal-ic{width:20px;text-align:center;opacity:.8}
#hudPal .hud-pal-vide{padding:18px;color:var(--hud-muted,#888);font-size:13px}

/* ---------- l'accueil : le titre standard s'efface, le hero prend sa place ---------- */
body[data-theme="hud"].hud-accueil #main header{display:none}
body[data-theme="hud"] .hud-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:6px 0 26px;flex-wrap:wrap}
body[data-theme="hud"] .hud-date{
  font:600 11px "Public Sans",-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hud-muted);margin-bottom:8px;
}
body[data-theme="hud"] .hud-hero h1{
  font:600 clamp(28px,3.2vw,38px)/1.08 "Space Grotesk","Public Sans",-apple-system,sans-serif;letter-spacing:-.01em;
  color:var(--hud-ink);margin:0;
}
body[data-theme="hud"] .hud-sous{margin-top:8px;font-size:14px;color:var(--hud-muted)}
/* Apprenant : la société adossée sous le nom ; les étapes du parcours en points, le sens au survol */
body[data-theme="hud"] .hud-societe{margin-top:2px;font-size:15px;letter-spacing:.02em;color:var(--hud-muted)}
body[data-theme="hud"] .hud-etapes{position:relative;list-style:none;display:flex;gap:18px;margin:16px 0 0;padding:0;flex-wrap:wrap}
body[data-theme="hud"] .hud-etapes li{position:static;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--hud-muted)}
body[data-theme="hud"] .hud-etapes .hud-etape-point{width:12px;height:12px;border-radius:50%;border:2px solid var(--hud-muted);box-sizing:border-box;transition:transform .15s}
body[data-theme="hud"] .hud-etapes li.faite .hud-etape-point{background:var(--hud-corail,#FF5A3C);border-color:var(--hud-corail,#FF5A3C)}
body[data-theme="hud"] .hud-etapes li.courante .hud-etape-point{border-color:var(--hud-corail,#FF5A3C);box-shadow:0 0 0 4px rgba(255,90,60,.18)}
body[data-theme="hud"] .hud-etapes li.courante{color:var(--hud-texte,inherit)}
body[data-theme="hud"] .hud-etapes li:hover .hud-etape-point{transform:scale(1.25)}
body[data-theme="hud"] .hud-etapes li::after{content:attr(data-lab);position:absolute;left:0;top:calc(100% + 8px);z-index:5;box-sizing:border-box;min-width:min(220px,100%);max-width:min(340px,100%);width:max-content;overflow-wrap:anywhere;padding:8px 10px;border-radius:8px;background:var(--hud-fond-carte,#1c1a18);color:var(--hud-texte,#f3efe9);border:1px solid var(--hud-bord,rgba(255,255,255,.08));font-size:12.5px;line-height:1.4;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s,transform .15s;white-space:normal}
body[data-theme="hud"] .hud-etapes li:hover::after,body[data-theme="hud"] .hud-etapes li:focus-within::after{opacity:1;transform:none}
/* ---------- l'accès (essai) ---------- */
body[data-theme="hud"] .hud-acces{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 16px;
  border-radius:14px;background:var(--hud-panel);border:1px solid var(--hud-line);border-left:3px solid var(--hud-lagon);
  font-size:13px;color:var(--hud-ink);
}
body[data-theme="hud"] .hud-acces-fin{border-left-color:var(--hud-corail)}

/* ---------- la grille ---------- */
body[data-theme="hud"] .hud-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start}
body[data-theme="hud"] .hud-col8{grid-column:span 8;display:grid;gap:16px}
body[data-theme="hud"] .hud-col4{grid-column:span 4;display:grid;gap:16px}
body[data-theme="hud"] .hud-col12{grid-column:span 12}
@media (max-width:900px){
  body[data-theme="hud"] .hud-col8,body[data-theme="hud"] .hud-col4{grid-column:span 12}
  body[data-theme="hud"] .hud-col4{grid-template-columns:repeat(2,1fr)}
}

/* entrée en scène : les îlots montent l'un après l'autre */
@keyframes hudMonte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body[data-theme="hud"] .hud-grille > *,body[data-theme="hud"] .hud-col8 > *,body[data-theme="hud"] .hud-col4 > *{animation:hudMonte .5s cubic-bezier(.2,.8,.2,1) both}
body[data-theme="hud"] .hud-col8 > :nth-child(2){animation-delay:.06s}
body[data-theme="hud"] .hud-col4 > :nth-child(1){animation-delay:.04s}
body[data-theme="hud"] .hud-col4 > :nth-child(2){animation-delay:.09s}
body[data-theme="hud"] .hud-col4 > :nth-child(3){animation-delay:.14s}
body[data-theme="hud"] .hud-col4 > :nth-child(4){animation-delay:.19s}

/* ---------- une carte qui se déplie au survol, s'épingle au clic ---------- */
body[data-theme="hud"] .hud-pli{padding:0;overflow:hidden;margin:0}
body[data-theme="hud"] .hud-pli-tete{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;user-select:none}
body[data-theme="hud"] .hud-pli-tete h2{
  margin:0;font:600 15px "Public Sans",-apple-system,sans-serif;color:var(--hud-ink);display:flex;align-items:center;gap:10px;
}
body[data-theme="hud"] .hud-k{
  font:600 10.5px "Public Sans",-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--hud-corail);color:#fff;
}
body[data-theme="hud"] .hud-question .hud-k{background:var(--hud-row-h);color:var(--hud-muted)}
body[data-theme="hud"] .hud-question .hud-pli-tete h2{font:600 15px/1.35 "Public Sans",-apple-system,sans-serif;flex-wrap:wrap}
body[data-theme="hud"] .hud-peek{margin-left:auto;font-size:12.5px;color:var(--hud-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%;transition:opacity .25s}
body[data-theme="hud"] .hud-chev{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--hud-muted);transition:transform .3s cubic-bezier(.2,.8,.2,1);flex:none}
body[data-theme="hud"] .hud-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="hud"] .hud-pli-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1)}
body[data-theme="hud"] .hud-pli-corps > div{min-height:0;overflow:hidden}
body[data-theme="hud"] .hud-pli:not([data-open="false"]):hover .hud-pli-corps,
body[data-theme="hud"] .hud-pli[data-open="true"] .hud-pli-corps{grid-template-rows:1fr}
body[data-theme="hud"] .hud-pli:not([data-open="false"]):hover .hud-chev,
body[data-theme="hud"] .hud-pli[data-open="true"] .hud-chev{transform:rotate(180deg)}
body[data-theme="hud"] .hud-pli:not([data-open="false"]):hover .hud-peek,
body[data-theme="hud"] .hud-pli[data-open="true"] .hud-peek{opacity:0}
body[data-theme="hud"] .hud-pli-tete:focus-visible{outline:2px solid var(--hud-corail);outline-offset:-2px;border-radius:var(--hud-r)}
body[data-theme="hud"] .hud-pli-corps > div > *{padding:0 20px 18px}
body[data-theme="hud"] .hud-pli .card{box-shadow:none;border:0;background:transparent;padding:0 20px 14px;margin:0;border-radius:0}
body[data-theme="hud"] .hud-pli .card + .card{border-top:1px solid var(--hud-line);padding-top:14px}
body[data-theme="hud"] .hud-pli .hud-prop{padding-bottom:6px}
body[data-theme="hud"] .hud-pli .hud-prop > .card,body[data-theme="hud"] .hud-pli .hud-rapport > .card{padding-left:0;padding-right:0}

body[data-theme="hud"] .hud-ligne{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--hud-line)}
body[data-theme="hud"] .hud-ligne:first-child{border-top:0}
body[data-theme="hud"] .hud-st{width:8px;height:8px;border-radius:50%;flex:none;background:var(--hud-corail)}
body[data-theme="hud"] .hud-st.c{background:var(--hud-lagon)}
body[data-theme="hud"] .hud-st.a{background:var(--hud-corail);box-shadow:0 0 0 4px color-mix(in srgb,var(--hud-corail) 18%,transparent)}
body[data-theme="hud"] .hud-t{flex:1;min-width:0}
body[data-theme="hud"] .hud-t b{display:block;font-size:13.5px;color:var(--hud-ink);font-weight:600}
body[data-theme="hud"] .hud-t small{display:block;font-size:12.5px;color:var(--hud-muted);margin-top:2px}
body[data-theme="hud"] .hud-ligne .btn{white-space:nowrap}

/* ---------- les tuiles chiffrées ---------- */
body[data-theme="hud"] .hud-tuile{margin:0;padding:16px 18px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
body[data-theme="hud"] .hud-tuile:hover{transform:translateY(-3px);box-shadow:var(--hud-shadow-h);border-color:var(--hud-line-h)}
body[data-theme="hud"] .hud-tuile:focus-visible{outline:2px solid var(--hud-corail);outline-offset:2px}
/* Une tuile sans destination (écran absent de l'espace) est un chiffre, pas un bouton. */
body[data-theme="hud"] .hud-tuile:not([data-go]){cursor:default}
body[data-theme="hud"] .hud-tuile:not([data-go]):hover{transform:none;box-shadow:var(--hud-shadow);border-color:var(--hud-line)}
body[data-theme="hud"] .hud-tuile-k{display:flex;align-items:center;gap:8px;font:600 11px "Public Sans",-apple-system,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-muted)}
body[data-theme="hud"] .hud-tuile-k svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--hud-corail)}
body[data-theme="hud"] .hud-tuile-v{margin-top:10px;font:600 30px/1 "Space Grotesk","Public Sans",-apple-system,sans-serif;color:var(--hud-ink);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
body[data-theme="hud"] .hud-tuile-v small{font:500 12px "Public Sans",-apple-system,sans-serif;color:var(--hud-muted)}
body[data-theme="hud"] .hud-v-txt{font-size:22px}
body[data-theme="hud"] .hud-v-muet{color:var(--hud-muted)}
body[data-theme="hud"] .hud-tuile-d{margin-top:6px;font-size:12.5px;color:var(--hud-muted)}
body[data-theme="hud"] .hud-tuile-d b{color:var(--hud-ink);font-weight:600}
body[data-theme="hud"] .hud-tuile-accent{border-color:color-mix(in srgb,var(--hud-corail) 45%,var(--hud-line))}
body[data-theme="hud"] .hud-barre{margin-top:12px;height:5px;border-radius:999px;background:var(--hud-row-h);overflow:hidden}
body[data-theme="hud"] .hud-barre i{display:block;height:100%;border-radius:999px;background:var(--hud-corail);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* ---------- l'autruche qui parle ---------- */
body[data-theme="hud"] #assistWrap{display:flex;flex-direction:row;align-items:flex-end;gap:10px}
#hudBulle{display:none}
body[data-theme="hud"] #hudBulle{
  display:block;position:fixed;right:90px;bottom:34px;max-width:260px;padding:10px 14px;border-radius:16px 16px 4px 16px;
  background:var(--hud-panel);border:1px solid var(--hud-line-h);box-shadow:var(--hud-shadow);
  font-size:13px;line-height:1.4;color:var(--hud-ink);z-index:59;
  animation:hudMonte .5s .4s cubic-bezier(.2,.8,.2,1) both;
}
body[data-theme="hud"] #hudBulle b{display:block;font:600 10.5px "Public Sans",-apple-system,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-corail);margin-bottom:3px}
body[data-theme="hud"]:not(.hud-accueil) #hudBulle{display:none}
body[data-theme="hud"] #assistFab{
  width:64px;height:64px;background:var(--hud-panel);border:1.5px solid var(--hud-ink);
  box-shadow:3px 3px 0 var(--hud-corail);
}
body[data-theme="hud"] #assistFab:hover{background:var(--hud-row-h);transform:translateY(-2px) rotate(-4deg)}
body[data-theme="hud"] #assistFab img{width:44px!important;height:44px!important}

/* ---------- l'ambiance : au centre, comme dans la maquette ---------- */
body[data-theme="hud"] #hudLumiere{left:50%;transform:translateX(-50%)}
body[data-theme="hud"][data-rail="deploye"] #hudLumiere{left:calc(50% + 130px)}
body[data-theme="hud"][data-rail="replie"] #hudLumiere{left:calc(50% + 43px)}

@media (prefers-reduced-motion:reduce){
  body[data-theme="hud"] .hud-grille > *,body[data-theme="hud"] .hud-col8 > *,body[data-theme="hud"] .hud-col4 > *,
  body[data-theme="hud"] #hudBulle{animation:none}
  body[data-theme="hud"] .hud-pli-corps,body[data-theme="hud"] .hud-tuile{transition:none}
}

/* la rangée de chiffres vit sous « Ma journée », face aux tuiles de droite */
body[data-theme="hud"] .hud-rangee{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body[data-theme="hud"] .hud-rangee .hud-note{grid-column:span 3;color:var(--hud-muted);font-size:13px;margin:0}
body[data-theme="hud"] .hud-rangee > .hud-tuile:nth-child(1){animation-delay:.12s}
body[data-theme="hud"] .hud-rangee > .hud-tuile:nth-child(2){animation-delay:.16s}
body[data-theme="hud"] .hud-rangee > .hud-tuile:nth-child(3){animation-delay:.20s}
@media (max-width:900px){body[data-theme="hud"] .hud-rangee{grid-template-columns:1fr}}
/* place en bas pour l'ambiance et l'autruche qui parle */
body[data-theme="hud"].hud-accueil #view{padding-bottom:96px}
/* la barre de gamme sous la recherche : le hero dit déjà où l’on est */
body[data-theme="hud"].hud-accueil .bande-gamme-titre{display:none}

/* ======================================================================
   LE MODÈLE COMPLET — toute surface partagée de la plateforme passe au
   nouveau modèle (Thomas, 04/09/2026 : « une mise à jour intégrale de la
   plateforme vers le nouveau modèle présenté »). Chaque composant d'app.css
   reçoit ici sa version « îlot de verre » : la règle d'origine reste, la
   surcouche la recouvre sous body[data-theme="hud"].
   ====================================================================== */

/* ---------- l'en-tête de page : surtitre en capitales, titre en dégradé ---------- */
body[data-theme="hud"] #main header{margin:2px 0 22px}
body[data-theme="hud"] #main header h1{
  font:700 clamp(26px,2.6vw,32px)/1.05 "Space Grotesk","Public Sans",sans-serif;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--hud-ink) 25%,var(--hud-corail-d) 68%,var(--hud-lagon));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-right:.15em;
}
body[data-theme="hud"] #main header .sub{color:var(--hud-muted);font-size:14px;margin-top:6px}
body[data-theme="hud"] #main .bande-gamme,
body[data-theme="hud"] #main .bande-gamme-titre{display:none}
body[data-theme="hud"] #main{padding-bottom:96px}

/* ---------- le bandeau de démonstration : un îlot ambré, pas une alerte jaune ---------- */
body[data-theme="hud"] #demoBanner{
  background:color-mix(in srgb,#E8B24A 14%,var(--hud-panel));border:1px solid color-mix(in srgb,#E8B24A 45%,transparent);
  color:var(--hud-ink);border-radius:14px;padding:10px 16px;margin:0 0 14px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--hud-shadow);
}

/* ---------- chaque écran entre en scène ---------- */
@keyframes hudEntre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body[data-theme="hud"] #view > *{animation:hudEntre .32s cubic-bezier(.2,.8,.2,1) both}
body[data-theme="hud"] #view > :nth-child(2){animation-delay:.04s}
body[data-theme="hud"] #view > :nth-child(3){animation-delay:.08s}
body[data-theme="hud"] #view > :nth-child(4){animation-delay:.12s}
body[data-theme="hud"] #view > :nth-child(n+5){animation-delay:.16s}

/* ---------- onglets ---------- */
body[data-theme="hud"] .tabbar{gap:4px;margin-bottom:22px;border-bottom:1px solid var(--hud-line)}
body[data-theme="hud"] .tab{color:var(--hud-muted);font-weight:500;padding:10px 14px;border-bottom:2px solid transparent;transition:color .18s}
body[data-theme="hud"] .tab:hover{color:var(--hud-ink)}
body[data-theme="hud"] .tab.on{color:var(--hud-ink);border-bottom-color:var(--hud-corail);font-weight:600}

/* ---------- cartes : texte, titres, sous-titres ---------- */
body[data-theme="hud"] .card h3{color:var(--hud-ink);letter-spacing:.12em;font-size:11px}
body[data-theme="hud"] .card p,body[data-theme="hud"] .card li,body[data-theme="hud"] .card label{color:var(--hud-ink)}
body[data-theme="hud"] .muted,body[data-theme="hud"] .card .muted{color:var(--hud-muted)}
body[data-theme="hud"] .section-title{color:var(--hud-muted);letter-spacing:.14em}
body[data-theme="hud"] .kpi .val{color:var(--hud-corail);font-weight:700;letter-spacing:-.02em}
body[data-theme="hud"] .kpi .lab{color:var(--hud-muted)}
body[data-theme="hud"] hr{border-color:var(--hud-line)}
body[data-theme="hud"] a{color:var(--hud-corail-d)}
body[data-theme="hud"] code,body[data-theme="hud"] pre{background:var(--hud-row);color:var(--hud-ink);border-radius:8px}

/* ---------- la chaîne de prospection : cercles, fil, maillon courant qui pulse ---------- */
body[data-theme="hud"] .pc-head b{color:var(--hud-ink)}
body[data-theme="hud"] .pc-head{color:var(--hud-muted)}
body[data-theme="hud"] .pc-bar{background:var(--hud-row-h)}
body[data-theme="hud"] .pc-bar i{background:linear-gradient(90deg,var(--hud-lagon),var(--hud-corail))}
body[data-theme="hud"] .pc-line{background:var(--hud-line-h)}
body[data-theme="hud"] .pc-step{background:transparent;border:0;border-radius:12px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
body[data-theme="hud"] .pc-step:hover{transform:translateY(-2px)}
body[data-theme="hud"] .pc-num{background:var(--hud-row);border:2px solid var(--hud-line-h);color:var(--hud-muted);transition:all .25s cubic-bezier(.2,.8,.2,1)}
body[data-theme="hud"] .pc-lab{color:var(--hud-muted)}
body[data-theme="hud"] .pc-step.done .pc-num,body[data-theme="hud"] .pc-step.ch-fait .pc-num{background:var(--hud-lagon);border-color:var(--hud-lagon);color:#fff;box-shadow:0 0 14px rgba(23,195,178,.45)}
body[data-theme="hud"] .pc-step.done .pc-lab,body[data-theme="hud"] .pc-step.ch-fait .pc-lab{color:var(--hud-ink)}
body[data-theme="hud"] .pc-step.ch-cur .pc-num,body[data-theme="hud"] .pc-step.ch-encours .pc-num{
  background:var(--hud-corail);border-color:var(--hud-corail);color:#fff;
  box-shadow:0 0 0 6px rgba(255,90,60,.18);animation:hudPulse 2.2s infinite;
}
body[data-theme="hud"] .pc-step.ch-cur .pc-lab{color:var(--hud-ink);font-weight:600}
body[data-theme="hud"] .pc-step.ch-lock .pc-num{background:var(--hud-row);color:var(--hud-muted);opacity:.6}
body[data-theme="hud"] .pc-tag{background:rgba(255,90,60,.14);color:var(--hud-corail-d);border-radius:999px;padding:2px 7px}
@keyframes hudPulse{0%,100%{box-shadow:0 0 0 6px rgba(255,90,60,.18)}50%{box-shadow:0 0 0 10px rgba(255,90,60,0)}}

/* ---------- tableaux : un îlot, des lignes qui respirent ---------- */
body[data-theme="hud"] .table-wrap{border-radius:var(--hud-r);box-shadow:var(--hud-shadow);border:1px solid var(--hud-line)}
body[data-theme="hud"] table{background:var(--hud-panel);color:var(--hud-ink);border-radius:var(--hud-r);box-shadow:none}
body[data-theme="hud"] th{background:var(--hud-row);color:var(--hud-muted);letter-spacing:.12em;font-size:10.5px;border-bottom:1px solid var(--hud-line)}
body[data-theme="hud"] td{border-bottom:1px solid var(--hud-line);color:var(--hud-ink)}
body[data-theme="hud"] tr:hover td{background:var(--hud-row-h)}

/* ---------- pastilles, feux, étiquettes ---------- */
body[data-theme="hud"] .pill{border-radius:999px;font-weight:600}
body[data-theme="hud"] .pill.ok{background:rgba(23,195,178,.18);color:var(--hud-ink)}
body[data-theme="hud"] .pill.warn{background:rgba(232,178,74,.22);color:var(--hud-ink)}
body[data-theme="hud"] .pill.ko{background:rgba(209,77,77,.2);color:var(--hud-ink)}
body[data-theme="hud"] .pill.neutre,body[data-theme="hud"] .pill.plat{background:var(--hud-row-h);color:var(--hud-muted)}
body[data-theme="hud"] .tag-plat{background:var(--hud-corail);color:#fff;border-radius:999px}
body[data-theme="hud"] .dot.on{background:var(--hud-lagon);box-shadow:0 0 8px rgba(23,195,178,.6)}
body[data-theme="hud"] .bar{background:var(--hud-row-h);height:6px}
body[data-theme="hud"] .bar > i{background:linear-gradient(90deg,var(--hud-lagon),var(--hud-corail));border-radius:6px}

/* ---------- notes, états vides, définitions, confirmations ---------- */
body[data-theme="hud"] .note{background:var(--hud-row);border-left:3px solid var(--hud-corail);color:var(--hud-ink);border-radius:0 12px 12px 0}
body[data-theme="hud"] .note.ok{border-left-color:var(--hud-lagon)}
body[data-theme="hud"] .empty{color:var(--hud-muted)}
body[data-theme="hud"] .empty-guide{background:var(--hud-row);border:1px dashed var(--hud-line-h);color:var(--hud-ink);border-radius:14px}
body[data-theme="hud"] .terme-def{border-bottom-color:var(--hud-lagon)}
body[data-theme="hud"] #termeBulle{background:var(--hud-panel);border-color:var(--hud-line);border-left-color:var(--hud-lagon);color:var(--hud-ink);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px}
body[data-theme="hud"] .confirm-overlay{background:rgba(13,15,18,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body[data-theme="hud"] .confirm-card{background:var(--hud-panel);color:var(--hud-ink);border:1px solid var(--hud-line);border-radius:18px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
body[data-theme="hud"] .confirm-corps{color:var(--hud-ink)}

/* ---------- formulaires ---------- */
body[data-theme="hud"] label.fld span{color:var(--hud-muted)}
body[data-theme="hud"] input,body[data-theme="hud"] textarea,body[data-theme="hud"] select{border-radius:10px;border:1px solid var(--hud-line);background:var(--hud-row)}
body[data-theme="hud"] input:focus,body[data-theme="hud"] textarea:focus,body[data-theme="hud"] select:focus{background:var(--hud-panel)}
body[data-theme="hud"] .ice-edit{border-color:var(--hud-line-h);background:var(--hud-row);color:var(--hud-ink)}

/* ---------- boutons : le principal en corail, les autres en verre ---------- */
body[data-theme="hud"] .btn{background:var(--hud-corail);color:#fff;border-radius:11px;box-shadow:0 8px 20px -10px rgba(255,90,60,.7);transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,box-shadow .18s}
body[data-theme="hud"] .btn:hover{background:var(--hud-corail-d);transform:translateY(-1px)}
body[data-theme="hud"] .btn:active{transform:scale(.98)}
body[data-theme="hud"] .btn.ghost{box-shadow:none}
body[data-theme="hud"] .btn.stop{background:#B02A22;color:#fff;box-shadow:none}

/* ---------- l'atelier des agents : chaque agent est une ligne de verre ---------- */
body[data-theme="hud"] .agent-liste{display:grid;gap:10px}
body[data-theme="hud"] .agent-ligne{
  background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:14px;color:var(--hud-ink);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--hud-shadow);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;
}
body[data-theme="hud"] .agent-ligne:hover{transform:translateX(3px);border-color:var(--hud-line-h);box-shadow:var(--hud-shadow-h)}
body[data-theme="hud"] .agent-nom{color:var(--hud-ink)}
body[data-theme="hud"] .agent-fam{color:var(--hud-muted)}
body[data-theme="hud"] .agent-detail{color:var(--hud-ink)}

/* ---------- détails repliables : la tête seule au repos ---------- */
body[data-theme="hud"] details{border-radius:14px}
body[data-theme="hud"] summary{color:var(--hud-ink);cursor:pointer;border-radius:10px;transition:background .18s}
body[data-theme="hud"] summary:hover{background:var(--hud-row-h)}

/* ---------- l'assistant : son panneau est un îlot ---------- */
body[data-theme="hud"] #assistPanel,body[data-theme="hud"] .assist-panel{
  background:var(--hud-panel);border:1px solid var(--hud-line);color:var(--hud-ink);border-radius:20px;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:var(--hud-shadow-h);
}
body[data-theme="hud"] .assist-head{background:var(--hud-row);border-bottom:1px solid var(--hud-line)}
body[data-theme="hud"] .assist-head b{color:var(--hud-ink)}
body[data-theme="hud"] .assist-sub{color:var(--hud-muted)}
body[data-theme="hud"] .assist-x{color:var(--hud-muted);background:transparent;border:0}
body[data-theme="hud"] .assist-x:hover{color:var(--hud-corail)}
body[data-theme="hud"] .assist-msgs{background:transparent}
body[data-theme="hud"] .assist-msg.a .bubble{background:var(--hud-row);border:1px solid var(--hud-line);color:var(--hud-ink)}
body[data-theme="hud"] .assist-msg.u .bubble{background:var(--hud-corail);color:#fff}
body[data-theme="hud"] .assist-input{background:transparent;border-top:1px solid var(--hud-line)}
body[data-theme="hud"] .assist-input textarea{background:var(--hud-row);color:var(--hud-ink)}

/* ---------- les emojis du contenu devenus icônes au trait ---------- */
body[data-theme="hud"] .hud-em{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--hud-corail-d)}
body[data-theme="hud"] .hud-em svg{width:16px;height:16px}
body[data-theme="hud"] .btn .hud-em{color:inherit;margin-right:5px;vertical-align:-2px}
body[data-theme="hud"] .btn .hud-em svg{width:14px;height:14px}
body[data-theme="hud"] h3 .hud-em svg,body[data-theme="hud"] .card h3 .hud-em svg{width:15px;height:15px}
body[data-theme="hud"] .pill .hud-em svg{width:12px;height:12px}

/* ======================================================================
   AUDIT INTÉGRAL (04/09/2026, 161 constats sur 21 écrans, 11 lots + synthèse)
   ====================================================================== */

/* ---------- cause racine : les jetons de l'ancienne palette suivent l'ambiance ----------
   Tout ce qu'app.css peint en --blanc, --noir, --bord… devient de fait au modèle,
   en jour comme en encre, sans réécrire chaque règle. */
body[data-theme="hud"]{
  --blanc:var(--hud-panel);--card:var(--hud-panel);--creme:var(--hud-row);--paper-2:var(--hud-row);
  --ecume:var(--hud-bg);--cuivre-soft:var(--hud-row);--corail-soft:rgba(255,90,60,.14);--lagon-soft:rgba(23,195,178,.16);
  --noir:var(--hud-ink);--graphite:var(--hud-ink);--graphite-l:var(--hud-ink);--gris-texte:var(--hud-ink);
  --gris:var(--hud-muted);--gris-l:var(--hud-muted);
  --bord:var(--hud-line);--bord-2:var(--hud-line-h);--bordure:var(--hud-line);--border:var(--hud-line);
  --cuivre:var(--hud-corail);--cuivre-d:var(--hud-corail-d);--cuivre-mid:var(--hud-corail);--laiton:var(--hud-lagon);
  --sur-accent:#fff;--ombre:var(--hud-shadow);--ombre-md:var(--hud-shadow-h);
  --vert-bg:rgba(23,195,178,.16);--ambre-bg:rgba(232,178,74,.18);--rouge-bg:rgba(209,77,77,.18);
}
body[data-theme="hud"] .lisere-liama{display:none!important}

/* ---------- l'encre : l'îlot flotte vraiment (moins opaque, ligne plus nette) ---------- */
body[data-theme="hud"][data-hud="encre"]{--hud-panel:rgba(22,24,30,.6);--hud-line:rgba(255,255,255,.13);--hud-shadow:0 18px 48px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.05) inset}
body[data-theme="hud"][data-hud="ardoise"]{--hud-panel:rgba(52,56,62,.66);--hud-line:rgba(255,255,255,.13)}

/* ---------- le rail : la dernière entrée ne passe plus sous le pied ---------- */
body[data-theme="hud"] #side nav{padding-bottom:18px;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}

/* ---------- onglets : un segment de verre, plus de filet pleine largeur ---------- */
body[data-theme="hud"] .tabbar{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:20px;border:1px solid var(--hud-line);border-bottom:1px solid var(--hud-line);
  border-radius:14px;background:var(--hud-row);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body[data-theme="hud"] .tab{border:0;margin:0;padding:8px 14px;border-radius:10px;color:var(--hud-muted);font-weight:500;transition:all .18s cubic-bezier(.2,.8,.2,1)}
body[data-theme="hud"] .tab:hover{color:var(--hud-ink);background:var(--hud-row-h)}
body[data-theme="hud"] .tab.on{background:var(--hud-panel);color:var(--hud-ink);font-weight:600;box-shadow:var(--hud-shadow);border-bottom-color:transparent}

/* ---------- étiquettes de carte et titres de section : un seul registre ---------- */
body[data-theme="hud"] .card h3{display:flex;align-items:center;gap:8px;font:700 11px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-muted);margin-bottom:12px}
body[data-theme="hud"] .card h3 .hud-em{color:var(--hud-corail);margin-right:0}
body[data-theme="hud"] .section-title{font:700 11px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-muted);margin:22px 0 10px}
body[data-theme="hud"] .sb-sec{font:700 11px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-corail-d)}
body[data-theme="hud"] .badge-apprenant,body[data-theme="hud"] .badge-admin{background:var(--hud-row);color:var(--hud-muted);border:1px solid var(--hud-line);border-radius:999px;font:700 10px "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}
body[data-theme="hud"] .pill{font:600 10.5px "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border:1px solid var(--hud-line)}
body[data-theme="hud"] .pill.ok{border-color:rgba(23,195,178,.4)}
body[data-theme="hud"] .pill.warn{border-color:rgba(232,178,74,.5)}
body[data-theme="hud"] .pill.ko{border-color:rgba(209,77,77,.45)}

/* ---------- notes et liserés : plus d'aplat rose, plus de liseré inline ---------- */
body[data-theme="hud"] .note{background:var(--hud-row);border:1px solid var(--hud-line);border-left:3px solid var(--hud-corail);border-radius:12px;color:var(--hud-ink);padding:12px 16px;margin:10px 0}
body[data-theme="hud"] .note.ok{border-left-color:var(--hud-lagon)}
body[data-theme="hud"] .card[style*="border-left"]{border-left:1px solid var(--hud-line)!important;box-shadow:var(--hud-shadow),inset 3px 0 0 var(--hud-corail)}
body[data-theme="hud"] .card[style*="border-left"][style*="lagon"],body[data-theme="hud"] .card[style*="border-left"][style*="laiton"]{box-shadow:var(--hud-shadow),inset 3px 0 0 var(--hud-lagon)}
body[data-theme="hud"] div[style*="border-top:1px solid var(--bord)"]{border-top-color:var(--hud-line)!important}

/* ---------- listes dans une carte : des rangées, pas des puces ---------- */
body[data-theme="hud"] .card > ul,body[data-theme="hud"] .card > div > ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
body[data-theme="hud"] .card > ul > li,body[data-theme="hud"] .card > div > ul > li{
  display:flex;gap:10px;align-items:flex-start;padding:10px 14px;background:var(--hud-row);border:1px solid var(--hud-line);border-radius:12px;color:var(--hud-ink);line-height:1.45;
}
body[data-theme="hud"] .card > ul > li::before,body[data-theme="hud"] .card > div > ul > li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hud-corail);flex:none;margin-top:8px}

/* Carte encre : elle porte son propre fond sombre, le texte doit s'y détacher.
   Placée APRÈS les règles ci-dessus, à spécificité égale, pour les emporter. */
body[data-theme="hud"] .card-encre{background:linear-gradient(135deg,#1b2433,#0e1420);border-color:rgba(255,255,255,.10);color:#fff}
body[data-theme="hud"] .card-encre h2{color:#fff}
body[data-theme="hud"] .card-encre p,body[data-theme="hud"] .card-encre li,body[data-theme="hud"] .card-encre label{color:#C7CDD6}
body[data-theme="hud"] .card-encre > ul > li,body[data-theme="hud"] .card-encre > div > ul > li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#C7CDD6}

/* ---------- boutons : la pilule de la maison ---------- */
body[data-theme="hud"] .btn{border-radius:12px}
body[data-theme="hud"] .btn.sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
body[data-theme="hud"] .btn.ghost{background:var(--hud-row);border:1px solid var(--hud-line);color:var(--hud-ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body[data-theme="hud"] .btn.ghost:hover{background:var(--hud-row-h);border-color:var(--hud-corail);color:var(--hud-ink)}
body[data-theme="hud"] .btn .hud-em svg{stroke-width:2}

/* ---------- champs : rayon 12, focus corail, case cochée corail ---------- */
body[data-theme="hud"] input:not([type=checkbox]):not([type=radio]),body[data-theme="hud"] textarea,body[data-theme="hud"] select{border-radius:12px;padding:10px 13px}
body[data-theme="hud"] input:focus,body[data-theme="hud"] textarea:focus,body[data-theme="hud"] select:focus{outline:0;border-color:var(--hud-corail);box-shadow:0 0 0 3px rgba(255,90,60,.16)}
body[data-theme="hud"] input[type=checkbox],body[data-theme="hud"] input[type=radio]{accent-color:var(--hud-corail)}
body[data-theme="hud"] input[type=number]::-webkit-inner-spin-button{opacity:.5}

/* ---------- déroulants : chevron au trait, plus de marqueur natif ---------- */
body[data-theme="hud"] summary{list-style:none;display:flex;align-items:center;gap:8px}
body[data-theme="hud"] summary::-webkit-details-marker{display:none}
body[data-theme="hud"] summary::before{content:"";width:14px;height:14px;flex:none;background:currentColor;opacity:.7;transition:transform .25s cubic-bezier(.2,.8,.2,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-theme="hud"] details[open] > summary::before{transform:rotate(90deg)}
body[data-theme="hud"] .agent-ligne > summary{padding:12px 16px}
body[data-theme="hud"] .agent-ligne[open]{box-shadow:var(--hud-shadow-h);border-color:var(--hud-line-h)}
body[data-theme="hud"] .com-grille{background:var(--hud-row);border:1px solid var(--hud-line);border-radius:14px;padding:12px}

/* ---------- code, états vides ---------- */
body[data-theme="hud"] code{font:12.5px ui-monospace,Menlo,monospace;padding:2px 7px;border:1px solid var(--hud-line)}
body[data-theme="hud"] .empty{display:grid;place-items:center;gap:10px;padding:40px;background:var(--hud-panel);border:1px dashed var(--hud-line-h);border-radius:var(--hud-r);color:var(--hud-muted)}

/* ---------- écran « Claude » ---------- */
body[data-theme="hud"] .cstart-chip{background:var(--hud-row);border:1px solid var(--hud-line);color:var(--hud-ink);border-radius:999px;transition:all .18s}
body[data-theme="hud"] .cstart-chip:hover{border-color:var(--hud-corail);color:var(--hud-corail-d);transform:translateY(-1px)}
body[data-theme="hud"] .cchat{background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:var(--hud-r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--hud-shadow)}
body[data-theme="hud"] .cchat-empty{color:var(--hud-muted)}
body[data-theme="hud"] .cchat-bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:var(--hud-r);margin-top:12px}
body[data-theme="hud"] .cchat-bar textarea{background:transparent;border:0;box-shadow:none;padding:8px 0}
body[data-theme="hud"] .cchat-bar textarea:focus{box-shadow:none}
body[data-theme="hud"] .cchat-bar .btn{border-radius:999px;flex:none}

/* ---------- écran « Mon site » ---------- */
body[data-theme="hud"] .imp-card,body[data-theme="hud"] #elementsBox,body[data-theme="hud"] .facil-sb{
  background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:var(--hud-r);padding:16px 18px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--hud-shadow);color:var(--hud-ink);
}
body[data-theme="hud"] .imp-row input{background:var(--hud-row);border:1px solid var(--hud-line);border-radius:12px;color:var(--hud-ink)}
body[data-theme="hud"] .fld{color:var(--hud-ink)}

/* ---------- écran « Mes réseaux » ---------- */
body[data-theme="hud"] table.img-coherence{background:transparent;border-collapse:separate;border-spacing:0;border:1px solid var(--hud-line);border-radius:14px;overflow:hidden}
body[data-theme="hud"] .img-coherence th,body[data-theme="hud"] .img-coherence td{border:0;border-bottom:1px solid var(--hud-line);border-right:1px solid var(--hud-line)}
body[data-theme="hud"] .img-coherence thead th{background:var(--hud-row);color:var(--hud-muted);font:700 10.5px "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}
body[data-theme="hud"] .img-coherence tbody th{background:var(--hud-row);color:var(--hud-ink)}
body[data-theme="hud"] .img-coherence td.img-vide,body[data-theme="hud"] .img-coherence td.img-trop{color:var(--hud-corail-d)}
body[data-theme="hud"] .img-vide-carre{border:1.5px dashed var(--hud-line-h);border-radius:12px;background:var(--hud-row);color:var(--hud-muted)}

/* ---------- écran « Mon dossier » : l'îlot prend la largeur ---------- */
body[data-theme="hud"] #view > .card[style*="max-width:620px"]{max-width:none!important}

/* ---------- l'assistant : au-dessus du dock, jamais sous lui ---------- */
body[data-theme="hud"] #assistPanel{bottom:96px;max-height:min(70vh,640px);z-index:60;border-radius:var(--hud-r)}
body[data-theme="hud"] #hudBulle{z-index:61}

/* ---------- la palette ⌘K : verre net, lignes alignées, fondu en bas ---------- */
body[data-theme="hud"] #hudPal{background:rgba(8,9,12,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body[data-theme="hud"] #hudPal .hud-pal-box{background:color-mix(in srgb,var(--hud-panel) 93%,var(--hud-bg));backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border-radius:var(--hud-r)}
body[data-theme="hud"] #hudPal .hud-pal-in{padding:12px 14px}
body[data-theme="hud"] #hudPal input{background:var(--hud-row);border:1px solid var(--hud-line);border-radius:12px;padding:9px 12px}
body[data-theme="hud"] #hudPal .hud-pal-r{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:42px}
body[data-theme="hud"] #hudPal .hud-pal-r small{margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
body[data-theme="hud"] #hudPal .hud-pal-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--hud-corail-d)}
body[data-theme="hud"] #hudPal .hud-pal-ic svg{width:16px;height:16px}
body[data-theme="hud"] #hudPalList{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent);padding-bottom:14px}

/* ---------- la connexion : le formulaire est un îlot ----------
   La largeur se prend sur l'écran de connexion (92 %), pas sur la fenêtre (92vw) :
   quand la personne a choisi d'agrandir le texte, les unités de fenêtre ne suivent
   pas l'agrandissement et le formulaire dépassait le bord droit. */
body[data-theme="hud"] #loginMount{width:min(420px,92%)}
body[data-theme="hud"] .login-form{background:var(--hud-panel);border:1px solid var(--hud-line);border-radius:var(--hud-r);padding:24px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--hud-shadow)}
body[data-theme="hud"] #login .brand-logo{filter:drop-shadow(0 12px 28px rgba(20,17,15,.14))}
body[data-theme="hud"][data-hud="encre"] #login .brand-logo,body[data-theme="hud"][data-hud="ardoise"] #login .brand-logo{filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
body[data-theme="hud"] #login .mdp-oeil{background:none;border:0;box-shadow:none;padding:0 10px;color:var(--hud-muted);font:600 11px "Public Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-theme="hud"] #login .mdp-oeil:hover{color:var(--hud-corail)}
body[data-theme="hud"] #loginVersion{font:600 10.5px "Public Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-muted);margin-top:16px}
body[data-theme="hud"] #loginVersion a{color:var(--hud-muted)}
body[data-theme="hud"] .login-msg{color:var(--hud-corail-d)}
body[data-theme="hud"] .btn.lien,body[data-theme="hud"] #login .btn.lien{box-shadow:none;background:none;transform:none}
body[data-theme="hud"] .hud-titre-double{display:none!important}

/* ======================================================================
   CONTRE-AUDIT (04/09/2026) — 37 restes sur 22 écrans, notes 5 à 10
   ====================================================================== */
/* le titre de l'accueil prend le même dégradé que les autres écrans */
body[data-theme="hud"] .hud-hero h1{background:linear-gradient(100deg,var(--hud-ink) 25%,var(--hud-corail-d) 68%,var(--hud-lagon));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-right:.15em}
/* un bouton-lien se comporte comme un bouton */
body[data-theme="hud"] a.btn{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;text-decoration:none}
/* l'encre : un fond qui vit jusqu'au centre, pas un noir plat */
body[data-theme="hud"][data-hud="encre"]{--hud-bg:#0F1117;--hud-halo1:rgba(255,90,60,.42);--hud-halo2:rgba(23,195,178,.34);--hud-halo3:rgba(120,60,220,.3)}
body[data-theme="hud"][data-hud="encre"] #app::before,body[data-theme="hud"][data-hud="ardoise"] #app::before{
  background:radial-gradient(1100px 750px at 12% -10%,var(--hud-halo1),transparent 55%),
             radial-gradient(900px 700px at 100% 8%,var(--hud-halo2),transparent 55%),
             radial-gradient(1400px 1000px at 45% 120%,var(--hud-halo3),transparent 70%),var(--hud-bg);
}
body[data-theme="hud"][data-hud="encre"],body[data-theme="hud"][data-hud="ardoise"]{color-scheme:dark}
/* onglet actif lisible la nuit */
body[data-theme="hud"][data-hud="encre"] .tab.on,body[data-theme="hud"][data-hud="ardoise"] .tab.on{background:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 16px rgba(0,0,0,.35)}
body[data-theme="hud"][data-hud="encre"] .pc-line{background:rgba(255,255,255,.22)}
/* la note est un îlot */
body[data-theme="hud"] .note{background:var(--hud-panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--hud-r);border-left:1px solid var(--hud-line);box-shadow:var(--hud-shadow),inset 3px 0 0 var(--hud-corail)}
body[data-theme="hud"] .note.ok{box-shadow:var(--hud-shadow),inset 3px 0 0 var(--hud-lagon)}
/* écran réservé : l'îlot se dimensionne à son contenu, et s'ouvre par une étiquette */
body[data-theme="hud"] #view > .card:only-child{max-width:860px}
body[data-theme="hud"] .hud-etiquette{font:700 11px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-muted);margin-bottom:12px}
/* chaîne : le contenu des cercles reste lisible */
body[data-theme="hud"] .pc-num{font-size:13px;line-height:1}
body[data-theme="hud"] .pc-num .hud-em{margin:0}
body[data-theme="hud"] .pc-num .hud-em svg{width:14px;height:14px}
/* agents : le nom est un nom, pas une étiquette ; même rayon que les îlots */
body[data-theme="hud"] .agent-nom{text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:600}
body[data-theme="hud"] .agent-ligne,body[data-theme="hud"] .agent-ligne > summary:hover{border-radius:var(--hud-r)}
/* état vide : bordure continue */
body[data-theme="hud"] .empty{border:1px solid var(--hud-line);background:var(--hud-row);padding:28px}
/* étiquettes de section d'un même écran : un seul registre */
body[data-theme="hud"] .sb-sec{color:var(--hud-muted)}
body[data-theme="hud"] .sb-sec .hud-em{color:var(--hud-corail-d)}
/* case à cocher au modèle */
body[data-theme="hud"] input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:6px;border:1px solid var(--hud-line-h);background:var(--hud-panel);display:inline-grid;place-items:center;vertical-align:-3px}
body[data-theme="hud"] input[type=checkbox]:checked{background:var(--hud-corail);border-color:var(--hud-corail)}
body[data-theme="hud"] input[type=checkbox]:checked::before{content:"";width:10px;height:10px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* assistant : un verre qui floute vraiment, au-dessus de la bulle */
body[data-theme="hud"] #assistPanel{background:color-mix(in srgb,var(--hud-panel) 60%,var(--hud-bg));backdrop-filter:blur(36px) saturate(1.4);-webkit-backdrop-filter:blur(36px) saturate(1.4);isolation:isolate;bottom:176px;max-height:min(66vh,600px)}
/* palette : un îlot opaque, un voile clair le jour, icônes colorées par famille */
body[data-theme="hud"] #hudPal .hud-pal-box{background:color-mix(in srgb,var(--hud-side-opaque,var(--hud-bg)) 96%,transparent);isolation:isolate}
body[data-theme="hud"]:not([data-hud="encre"]):not([data-hud="ardoise"]) #hudPal{background:rgba(246,242,236,.38)}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="jaune"] .hud-pal-ic{color:#9C6F14}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="ocre"] .hud-pal-ic{color:#866318}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="indigo"] .hud-pal-ic{color:#4A56BF}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="bleu"] .hud-pal-ic{color:#2B6BB3}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="rouge"] .hud-pal-ic{color:#B83A3A}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="vert"] .hud-pal-ic{color:#1F7A50}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="magenta"] .hud-pal-ic{color:#9E4396}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="corail"] .hud-pal-ic{color:#C43C1B}
body[data-theme="hud"] #hudPal .hud-pal-r[data-hud-teinte="gris"] .hud-pal-ic{color:var(--hud-muted)}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="jaune"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="jaune"] .hud-pal-ic{color:#E8B24A}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="indigo"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="indigo"] .hud-pal-ic{color:#7B86E6}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="bleu"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="bleu"] .hud-pal-ic{color:#3D8BE0}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="vert"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="vert"] .hud-pal-ic{color:#2FA36B}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="corail"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="corail"] .hud-pal-ic{color:#FF5A3C}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="magenta"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="magenta"] .hud-pal-ic{color:#C15AB8}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="rouge"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="rouge"] .hud-pal-ic{color:#E05A5A}
body[data-theme="hud"][data-hud="encre"] #hudPal .hud-pal-r[data-hud-teinte="ocre"] .hud-pal-ic,body[data-theme="hud"][data-hud="ardoise"] #hudPal .hud-pal-r[data-hud-teinte="ocre"] .hud-pal-ic{color:#D0A030}
/* connexion : les halos, des étiquettes en capitales, une composition centrée */
body[data-theme="hud"] #login{position:relative;isolation:isolate;padding:24px 0 72px;min-height:100vh;box-sizing:border-box}
body[data-theme="hud"] #login::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 750px at 12% -10%,var(--hud-halo1),transparent 55%),radial-gradient(900px 700px at 100% 8%,var(--hud-halo2),transparent 55%),radial-gradient(1400px 1000px at 45% 120%,var(--hud-halo3),transparent 70%),var(--hud-bg)}
body[data-theme="hud"] #login .brand-logo{height:clamp(180px,26vh,300px)}
body[data-theme="hud"] #login label,body[data-theme="hud"] .login-form label{font:600 11px "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hud-muted)}
body[data-theme="hud"] #login button.mdp-oeil{background:none;border:0;box-shadow:none;border-radius:999px}

/* le filigrane de pied : discret, et absent de la réglette */
body[data-theme="hud"] #filigrane{color:var(--hud-muted);opacity:.7}
@media (max-width:420px){body[data-theme="hud"] #filigrane{display:none!important}}

/* ======================================================================
   FENÊTRES FLOTTANTES (visite guidée, fiches, confirmations, bandeaux) :
   un verre OPAQUE — on ne lit pas la page à travers (Thomas, 04/09/2026 :
   « on voit trop à travers »). Un jeton solide par ambiance.
   ====================================================================== */
body[data-theme="hud"]{--hud-solid:#FBF9F6}
body[data-theme="hud"][data-hud="sable"]{--hud-solid:#F8F1E5}
body[data-theme="hud"][data-hud="lin"]{--hud-solid:#F5F7F1}
body[data-theme="hud"][data-hud="ardoise"]{--hud-solid:#30343A}
body[data-theme="hud"][data-hud="encre"]{--hud-solid:#181B21}
body[data-theme="hud"] .onb-overlay,body[data-theme="hud"] .fiche-overlay,body[data-theme="hud"] .tronc-overlay,body[data-theme="hud"] .confirm-overlay{
  background:rgba(13,15,18,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body[data-theme="hud"] .onb-card,body[data-theme="hud"] .confirm-card,body[data-theme="hud"] #opCard,
body[data-theme="hud"] .fiche-overlay > *,body[data-theme="hud"] .tronc-overlay > *,body[data-theme="hud"] #wall > *,
body[data-theme="hud"] #mvToast,body[data-theme="hud"] #majBanner{
  background:var(--hud-solid);color:var(--hud-ink);border:1px solid var(--hud-line-h);border-radius:var(--hud-r);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.35) inset;isolation:isolate;
}
body[data-theme="hud"] .onb-script-card{background:var(--hud-row);border:1px solid var(--hud-line);border-radius:14px}
body[data-theme="hud"] .onb-title{color:var(--hud-ink);font-family:"Space Grotesk","Public Sans",sans-serif;font-weight:700;letter-spacing:-.01em}
body[data-theme="hud"] .onb-survol,body[data-theme="hud"] .onb-count{color:var(--hud-muted)}
body[data-theme="hud"] .onb-close{color:var(--hud-muted)}
body[data-theme="hud"] .onb-close:hover{color:var(--hud-corail)}
body[data-theme="hud"] .onb-dots i{background:var(--hud-line-h)}
body[data-theme="hud"] .onb-dots i.on{background:var(--hud-corail)}
body[data-theme="hud"] .onb-ic-xl{display:flex;justify-content:center;margin-bottom:10px}
body[data-theme="hud"] .onb-ic-xl .hud-em{margin:0;width:64px;height:64px;border-radius:20px;background:rgba(255,90,60,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--hud-corail-d)}
body[data-theme="hud"] .onb-ic-xl .hud-em svg{width:30px;height:30px}
body[data-theme="hud"] .onb-ic .hud-em svg{width:18px;height:18px}
body[data-theme="hud"] .onb-spot{box-shadow:0 0 0 3px var(--hud-corail),0 0 0 9px rgba(255,90,60,.22)}
body[data-theme="hud"] .deck-overlay{background:var(--hud-bg)}

/* une icône née d'un emoji prend la couleur de son contexte ; corail seulement
   en tête d'étiquette. Dans une pastille « validé » (fond lagon), elle est blanche. */
body[data-theme="hud"] .hud-em{color:inherit}
body[data-theme="hud"] h3 .hud-em,body[data-theme="hud"] .card h3 .hud-em,body[data-theme="hud"] .section-title .hud-em,
body[data-theme="hud"] .sb-sec .hud-em,body[data-theme="hud"] b > .hud-em:first-child,body[data-theme="hud"] .onb-ic-xl .hud-em{color:var(--hud-corail-d)}
body[data-theme="hud"] .pc-num .hud-em,body[data-theme="hud"] .hd-sb-dot .hud-em,body[data-theme="hud"] .step.done .hud-em,
body[data-theme="hud"] .pill .hud-em,body[data-theme="hud"] .btn .hud-em{color:inherit}
body[data-theme="hud"] .hd-sb-dot .hud-em svg,body[data-theme="hud"] .pc-num .hud-em svg{width:14px;height:14px;stroke-width:2.6}
body[data-theme="hud"] .hd-sb-dot.done,body[data-theme="hud"] .pc-step.done .pc-num{background:var(--hud-lagon);border-color:var(--hud-lagon);color:#fff}
body[data-theme="hud"] .pill.ok .hud-em{color:var(--hud-lagon-d,#0E8F82)}

/* ======================================================================
   CLAIR / SOMBRE — le bouton flottant n'a plus que deux positions (Thomas,
   04/09/2026 : jour = référence claire, ardoise = référence sombre ; le
   reste se règle dans les paramètres de l'utilisateur).
   ====================================================================== */
body[data-theme="hud"] #hudLumiere{padding:5px;gap:4px;border:1px solid var(--hud-line-h);box-shadow:var(--hud-shadow);background:var(--hud-panel)}
body[data-theme="hud"] #hudLumiere .lbl{display:none}
body[data-theme="hud"] #hudLumiere button[data-mode]{
  width:auto;height:auto;padding:7px 14px;border-radius:999px;border:0;background:transparent;
  font:600 11.5px "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hud-muted);
  display:inline-flex;align-items:center;gap:7px;transition:all .2s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] #hudLumiere button[data-mode] svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="hud"] #hudLumiere button[data-mode]:hover{color:var(--hud-ink);transform:none}
body[data-theme="hud"] #hudLumiere button[data-mode][aria-pressed="true"]{background:var(--hud-corail);color:#fff;border-color:transparent}

/* la carte « Apparence » des réglages */
body[data-theme="hud"] #hudApparence{margin-bottom:16px}
body[data-theme="hud"] .hud-app-l{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--hud-line)}
body[data-theme="hud"] .hud-app-l:first-of-type{border-top:0}
body[data-theme="hud"] .hud-app-l > b{font-size:13.5px;color:var(--hud-ink)}
body[data-theme="hud"] .hud-app-l > small{grid-column:2;color:var(--hud-muted);font-size:12px}
body[data-theme="hud"] .hud-app-r{display:flex;flex-wrap:wrap;gap:8px}
body[data-theme="hud"] .hud-past{
  display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:999px;
  border:1px solid var(--hud-line);background:var(--hud-row);color:var(--hud-ink);font:600 12.5px "Public Sans",sans-serif;
  cursor:pointer;transition:all .18s cubic-bezier(.2,.8,.2,1);
}
body[data-theme="hud"] .hud-past:hover{border-color:var(--hud-corail);transform:translateY(-1px)}
/* pastille sans pastille de couleur (ex. taille du texte) : le padding gauche
   n'a pas à réserver la place du rond de 22 px */
body[data-theme="hud"] .hud-past-txt{padding:6px 12px}
body[data-theme="hud"] .hud-past[aria-pressed="true"]{border-color:var(--hud-corail);box-shadow:0 0 0 3px rgba(255,90,60,.16);background:var(--hud-panel)}
body[data-theme="hud"] .hud-past i{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.08)}
body[data-theme="hud"] .hud-past i[data-lumiere="sable"]{background:#F0E6D6}
body[data-theme="hud"] .hud-past i[data-lumiere="jour"]{background:linear-gradient(135deg,#FFE3D8,#FFFFFF 55%,#DDF6F2)}
body[data-theme="hud"] .hud-past i[data-lumiere="lin"]{background:#E3E7DC}
body[data-theme="hud"] .hud-past i[data-lumiere="ardoise"]{background:#2A2D32}
body[data-theme="hud"] .hud-past i[data-lumiere="encre"]{background:#08090C}

/* ======================================================================
   ÉPURE — les explications se replient derrière un « ? » (Thomas, 05/09/2026 :
   « le moins possible, que le client aille le plus rapidement vers les
   boutons ; un petit point d'interrogation, et une fois lu elle disparaît »)
   ====================================================================== */
body[data-theme="hud"] .hud-aide{display:inline-flex;align-items:center;margin-left:auto;vertical-align:middle}
body[data-theme="hud"] h3 .hud-aide,body[data-theme="hud"] h2 .hud-aide,body[data-theme="hud"] b .hud-aide{margin-left:8px}
body[data-theme="hud"] .hud-aide-b{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--hud-line-h);background:var(--hud-row);color:var(--hud-muted);
  font:700 12px "Public Sans",sans-serif;display:inline-grid;place-items:center;cursor:pointer;padding:0;
  transition:all .18s cubic-bezier(.2,.8,.2,1);letter-spacing:0;text-transform:none;
}
body[data-theme="hud"] .hud-aide-b:hover,body[data-theme="hud"] .hud-aide-b[aria-expanded="true"]{background:var(--hud-corail);border-color:var(--hud-corail);color:#fff;transform:translateY(-1px)}
body[data-theme="hud"] .hud-aide-txt{position:relative;padding-right:0}
body[data-theme="hud"] .hud-aide-txt[hidden]{display:none!important}
body[data-theme="hud"] .hud-aide-txt.hud-aide-ouverte{animation:hudEntre .25s cubic-bezier(.2,.8,.2,1) both}
body[data-theme="hud"] .hud-aide-ok{
  display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:5px 11px;border-radius:999px;
  border:1px solid var(--hud-line-h);background:var(--hud-row);color:var(--hud-ink);font:600 11.5px "Public Sans",sans-serif;
  letter-spacing:.04em;cursor:pointer;
}
body[data-theme="hud"] .hud-aide-ok:hover{border-color:var(--hud-corail);color:var(--hud-corail-d)}
body[data-theme="hud"] .hud-aide-ok svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="hud"] .note.hud-aide-txt{margin-top:8px}
body[data-theme="hud"] .hud-aide-seul{display:flex;justify-content:flex-end;margin:-4px 0 6px}

/* ---------- le mode oral : un bouton dans la barre du haut, pour toute la plateforme ---------- */
body[data-theme="hud"] #hudMicro.on,body[data-theme="hud"] #hudMicro[aria-pressed="true"]{background:var(--hud-corail);border-color:var(--hud-corail);color:#fff;box-shadow:0 0 0 4px rgba(255,90,60,.18)}
body[data-theme="hud"] #hudMicro[aria-pressed="true"] .hud-dot{background:#fff;box-shadow:0 0 0 2px var(--hud-corail);animation:hudPulse 1.8s infinite}
body[data-theme="hud"] .assist-mic{display:none!important}

/* le bouton clair / sombre est un bouton de la barre du haut, plus rien ne flotte en bas :
   il reprend donc les mesures de `.hud-icb`, étiquette comprise (padding et gap hérités). */
body[data-theme="hud"] #hudLumiere{position:static;left:auto;bottom:auto;transform:none;padding:0 12px;border-radius:14px;gap:8px;box-shadow:var(--hud-shadow);display:flex}
body[data-theme="hud"][data-rail="deploye"] #hudLumiere,body[data-theme="hud"][data-rail="replie"] #hudLumiere{left:auto}
body[data-theme="hud"] #hudLumiere svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="hud"] #main{padding-bottom:40px}
body[data-theme="hud"].hud-accueil #view{padding-bottom:40px}

/* ---------- l'assistant n'a qu'une porte, en haut ; rien ne flotte en bas à droite ---------- */
body[data-theme="hud"] #assistFab,body[data-theme="hud"] #hudBulle{display:none!important}
body[data-theme="hud"] #assistPanel{top:72px;bottom:auto;right:22px;max-height:calc(100vh - 96px);height:min(600px,calc(100vh - 96px))}
body[data-theme="hud"] .hud-points{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
body[data-theme="hud"] .hud-points li{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;background:var(--hud-row);border:1px solid var(--hud-line);border-radius:12px;color:var(--hud-ink);line-height:1.45}
body[data-theme="hud"] .hud-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hud-corail);flex:none;margin-top:8px}
body[data-theme="hud"] .hud-dossier-action{margin-top:16px}

/* ---------- un choix sélectionné se voit (Thomas, 05/09/2026 : « on voit pas que je l'ai sélectionné ») ---------- */
body[data-theme="hud"] .scan-choix{border:1px solid var(--hud-line-h);background:var(--hud-row);color:var(--hud-ink);transition:all .18s cubic-bezier(.2,.8,.2,1);display:inline-flex;align-items:center;gap:6px}
body[data-theme="hud"] .scan-choix:hover{border-color:var(--hud-corail);transform:translateY(-1px)}
body[data-theme="hud"] .scan-choix.on{background:var(--hud-corail);border-color:var(--hud-corail);color:#fff;font-weight:600;box-shadow:0 6px 16px -8px rgba(255,90,60,.7)}
body[data-theme="hud"] .scan-choix.on::before{content:"";width:12px;height:12px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-theme="hud"] .chip[aria-pressed="true"],body[data-theme="hud"] .cstart-chip[aria-pressed="true"]{background:var(--hud-corail);border-color:var(--hud-corail);color:#fff}

/* ---------- espace Abonnement actif : les repères de la formation (J1, J4, « avec le formateur ») n'y ont pas de sens ---------- */
body[data-theme="hud"][data-role="abonne"] .dns-when{display:none}
body[data-theme="hud"][data-role="abonne"] .dns-body > .muted:first-child{display:none}

/* ---------- nos règles de sécurité : le lien sous chaque question de confiance, et la page ---------- */
body[data-theme="hud"] .hud-secu-lien{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hud-line);font-size:12.5px;color:var(--hud-muted)}
body[data-theme="hud"] .hud-secu-lien svg{width:15px;height:15px;fill:none;stroke:var(--hud-lagon);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
body[data-theme="hud"] .hud-secu-lien a{color:var(--hud-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
body[data-theme="hud"] .hud-secu-lien a:hover{color:var(--hud-corail-d)}
body[data-theme="hud"] .hud-secu{position:fixed;inset:0;z-index:9500;background:rgba(13,15,18,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px}
body[data-theme="hud"] .hud-secu-boite{position:relative;width:min(680px,94vw);max-height:88vh;overflow:auto;background:var(--hud-solid);color:var(--hud-ink);border:1px solid var(--hud-line-h);border-radius:var(--hud-r);padding:28px 32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:hudEntre .3s cubic-bezier(.2,.8,.2,1) both}
body[data-theme="hud"] .hud-secu-boite h2{font:700 24px/1.1 "Space Grotesk","Public Sans",sans-serif;margin:0 0 8px;letter-spacing:-.01em}
body[data-theme="hud"] .hud-secu-boite h3{font:700 11px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-muted);margin:20px 0 6px;display:block}
body[data-theme="hud"] .hud-secu-boite p,body[data-theme="hud"] .hud-secu-boite li{font-size:14px;line-height:1.55;color:var(--hud-ink);margin:0 0 6px}
body[data-theme="hud"] .hud-secu-intro{color:var(--hud-muted)!important}
body[data-theme="hud"] .hud-secu-boite ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
body[data-theme="hud"] .hud-secu-boite li{display:flex;gap:10px;padding:10px 14px;background:var(--hud-row);border:1px solid var(--hud-line);border-radius:12px}
body[data-theme="hud"] .hud-secu-boite li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hud-lagon);flex:none;margin-top:8px}
body[data-theme="hud"] .hud-secu-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:10px;border:1px solid var(--hud-line);background:var(--hud-row);color:var(--hud-muted);font-size:20px;line-height:1;cursor:pointer}
body[data-theme="hud"] .hud-secu-x:hover{color:var(--hud-corail);border-color:var(--hud-corail)}
body[data-theme="hud"] .hud-secu-pied{margin-top:20px;display:flex;justify-content:flex-end}
/* « Ce qui attend » — le panneau de la cloche, ANCRÉ sous le bouton, dans la page (05/09/2026) :
   un îlot de la même famille que les cartes, aucun voile, se referme d'un clic ailleurs. */
body[data-theme="hud"] .hud-top-droite{position:relative}
body[data-theme="hud"] .hud-attente{
  position:absolute;top:calc(100% + 10px);right:0;width:min(440px,calc(100vw - 48px));z-index:900;
  background:var(--hud-solid);color:var(--hud-ink);border:1px solid var(--hud-line-h);border-radius:16px;
  box-shadow:0 22px 48px -22px rgba(0,0,0,.5);padding:14px 14px 12px;
  animation:hudEntre .2s cubic-bezier(.2,.8,.2,1) both;
}
body[data-theme="hud"] .hud-attente-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px 2px}
body[data-theme="hud"] .hud-attente-tete h2{font:700 15px/1.2 "Space Grotesk","Public Sans",sans-serif;margin:0;letter-spacing:-.01em}
body[data-theme="hud"] .hud-attente-x{width:26px;height:26px;border-radius:8px;border:1px solid var(--hud-line);background:var(--hud-row);color:var(--hud-muted);font-size:16px;line-height:1;cursor:pointer;flex:none}
body[data-theme="hud"] .hud-attente-x:hover{color:var(--hud-corail);border-color:var(--hud-corail)}
body[data-theme="hud"] .hud-attente-vide{margin:0 2px 2px;font-size:13.5px;color:var(--hud-muted)}
body[data-theme="hud"] .hud-attente-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
body[data-theme="hud"] .hud-attente-liste li{
  display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13.5px;line-height:1.4;
  background:var(--hud-row);border:1px solid var(--hud-line);border-radius:11px;
}
body[data-theme="hud"] .hud-attente-liste li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hud-lagon);flex:none}
body[data-theme="hud"] .hud-attente-liste li>span{flex:1;min-width:0}
body[data-theme="hud"] .hud-attente-liste a{color:var(--hud-corail);font-weight:600;white-space:nowrap;text-decoration:none;padding:2px 2px 2px 10px;flex:none}
body[data-theme="hud"] .hud-attente-liste a:hover{text-decoration:underline}
/* une rubrique à une seule entrée n'a pas d'en-tête : l'entrée porte son propre nom */
body[data-theme="hud"] #side nav .nav-sec.hud-sec-seule{display:none!important}
body[data-theme="hud"] .hud-secu-boite li b{color:var(--hud-ink);margin-right:4px}
body[data-theme="hud"] .hud-secu-boite code{font-size:12px}
/* le fond de la page suit l'ambiance sur <html> aussi : rien de blanc sous le contenu zoomé */
html{background:var(--hud-bg,#F6F2EC)}

/* Sur téléphone, la réglette native ne remplace pas la page : navigation horizontale
   et contenu disponible, y compris après un rail replié mémorisé sur ordinateur. */
@media(max-width:680px){
  body[data-theme="hud"]:not(.hud-natif) #app{height:100dvh;min-height:0;gap:10px;overflow:hidden}
  body[data-theme="hud"]:not(.hud-natif) #side{width:100%;min-height:0;max-height:180px;flex-direction:column;align-items:center;flex-shrink:0;border-radius:14px}
  body[data-theme="hud"]:not(.hud-natif) #side .logo{display:none}
  body[data-theme="hud"]:not(.hud-natif) #side nav{display:flex;flex-direction:row;overflow-x:auto;min-width:0;width:100%;flex-shrink:0;padding:8px;gap:6px}
  body[data-theme="hud"]:not(.hud-natif) #side nav .nav-sec{display:none}
  body[data-theme="hud"]:not(.hud-natif) #side nav button{width:auto;flex-shrink:0;padding:8px 10px;gap:6px}
  /* Sous 420 px, le rail s'ouvre replié par défaut (theme-hud.js, railParDefaut) : la règle
     [data-rail="replie"] #side nav button > span:not(.ic) (plus haut dans ce fichier) met alors
     ce span à opacity:0, visibility:hidden, width/height:0 — le display:inline!important seul
     ne suffisait pas à le rendre visible, le texte restait invisible malgré l'icône (ticket
     porte-parole 68, vague1 20/09/2026). On annule ici toutes ces propriétés : sur téléphone,
     le rail horizontal montre TOUJOURS le mot sous l'icône, quel que soit l'état replié/déployé
     mémorisé par ailleurs. */
  body[data-theme="hud"]:not(.hud-natif) #side nav button > span:not(.ic){
    display:inline!important;opacity:1!important;visibility:visible!important;
    width:auto!important;height:auto!important;margin:0!important;padding:0!important;
    overflow:visible!important;pointer-events:auto!important;transform:none!important;
  }
  body[data-theme="hud"]:not(.hud-natif) #side .foot{display:flex;padding:4px 8px;flex-shrink:0;align-self:flex-end}
  /* Le pied du rail tombait dans le même piège que les libellés, et le display seul ne
     suffisait pas davantage : sous 420 px l'état replié laissait « Se déconnecter » à
     opacity:0, visibility:hidden et pointer-events:none. Le bouton gardait sa boîte —
     une bande vide en haut de l'écran, au-dessus du contenu — sans rien montrer ni
     accepter le doigt (tickets porte-parole 1613 et 1321, vague2 20/09/2026). On annule
     ici l'état replié pour lui aussi. `:not([hidden])` garde sa parole à l'attribut
     `hidden` : « Télécharger l'application » est masqué quand rien ne se télécharge, et
     le display forcé ne doit pas le ressusciter. */
  body[data-theme="hud"]:not(.hud-natif) #side .foot button:not([hidden]){
    display:inline-flex!important;align-items:center;gap:6px;width:auto;height:auto;
    font-size:12px;white-space:nowrap;padding:6px 9px;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:none!important;overflow:visible!important;
  }
  body[data-theme="hud"]:not(.hud-natif) #side .foot button::before{font-size:16px}
  body[data-theme="hud"]:not(.hud-natif) #side .foot .hud-who,body[data-theme="hud"]:not(.hud-natif) #side .foot .hud-av{display:none}
  body[data-theme="hud"]:not(.hud-natif) #main{display:block;min-height:0;min-width:0;padding:12px 8px 28px;overflow:auto}
}

/* Les composants récents utilisent les mêmes couleurs que les écrans historiques. */
body[data-theme="hud"]{--text:var(--hud-ink);--text-muted:var(--hud-muted);--muted:var(--hud-muted);--background:var(--hud-bg)}

/* Surfaces de travail : même contraste dans les fenêtres et panneaux secondaires. */
body[data-theme="hud"] .forum-volet,
body[data-theme="hud"] .forum-autruche .card,
body[data-theme="hud"] .tp-carte,
body[data-theme="hud"] .contexte-socle article,
body[data-theme="hud"] .contexte-rubriques button,
body[data-theme="hud"] .tl-dialog,
body[data-theme="hud"] .tl-dialog-content{background:var(--hud-solid);color:var(--hud-ink);border-color:var(--hud-line-h)}
body[data-theme="hud"] .tp-outils input,body[data-theme="hud"] .tp-outils select{background:var(--hud-solid);color:var(--hud-ink);border-color:var(--hud-line-h)}
body[data-theme="hud"] .btn:not(.ghost):not(.lien):not(.danger){background:#C73A23;color:#fff}

/* ---------- une porte fermée dit quand elle s'ouvrira (bêta du 23/09/2026) ----------
   La cloche et les tuiles de l'accueil ne montrent un lien que vers un écran ouvert à ce
   compte (theme-hud-accueil.js, `ecranOuvert`) ; à la place du lien, une phrase courte. */
.hud-ferme{font-size:12.5px;color:var(--hud-muted,var(--gris));line-height:1.35}
.hud-attente-liste .hud-ferme{flex:0 1 46%;text-align:right;padding-left:10px}
.hud-tuile-ferme{margin-top:6px;font-size:12px;color:var(--hud-muted,var(--gris));font-style:italic}

/* ---------- la palette ⌘K ne retient jamais la page (bêta du 23/09/2026) ----------
   Le voile reste visible mais laisse passer les clics : seule la boîte les reçoit. Un clic
   sur le menu, sur « Signaler » ou ailleurs referme la palette (theme-hud-accueil.js,
   `paletteClicDehors`) et fait ce qu'il visait. */
#hudPal{pointer-events:none}
#hudPal .hud-pal-box{pointer-events:auto}

/* ---------- « Mon assistant » ouvert : la page lui fait place (bêta du 23/09/2026) ----------
   `body.assist-ouvert` est posé par theme-hud-accueil.js tant que le panneau est ouvert.
   Grand écran : la page se resserre à gauche du panneau, rien ne passe dessous.
   Écran étroit (tablette, téléphone) : le panneau devient un tiroir en bas, et la page
   reçoit sous son dernier bouton une marge de la hauteur du tiroir — tout se remonte au
   doigt au-dessus de lui. */
@media (min-width:1100px){
  body.assist-ouvert #main{padding-right:calc(min(370px, 100vw - 44px) + 44px)!important}
  /* la page resserrée : la recherche garde une ligne lisible, les boutons passent dessous */
  body[data-theme="hud"].assist-ouvert #hudTop{flex-wrap:wrap}
  body[data-theme="hud"].assist-ouvert .hud-search{flex:1 1 260px;min-width:220px}
  body[data-theme="hud"].assist-ouvert .hud-top-droite{margin-left:auto;flex-wrap:wrap}
}
@media (max-width:1099px){
  body.assist-ouvert #assistPanel,
  body[data-theme="hud"].assist-ouvert #assistPanel{
    top:auto!important;bottom:10px!important;left:10px!important;right:10px!important;
    width:auto!important;max-width:none!important;height:min(46vh,420px)!important;max-height:none!important}
  body.assist-ouvert #main{padding-bottom:calc(min(46vh,420px) + 28px)!important}
  body.assist-ouvert #assistFab{display:none}
}

/* Portrait choisi, entier dans le repère du compte ; aucun recadrage du visage. */
body[data-theme="hud"] #side .foot .hud-av:has(.agent-avatar){width:44px;height:30px;border-radius:8px;background:transparent}
body[data-theme="hud"] #side .foot .hud-av .agent-avatar{width:44px;border-radius:8px}