/* ─────────────────────────────────────────────────
   Habillage commun des outils de la plateforme : même fond bleu nuit et même barre du haut
   que /home, pour ne plus avoir l'impression de changer de site d'un outil à l'autre.
   Volontairement minimal : chaque page garde sa mise en page et ses composants.
   Chargé en dernier dans le <head> des pages outils (après leurs propres styles).
   ───────────────────────────────────────────────── */
html, body { background-color: var(--wc-fond-plateforme) !important; }
body > nav, body > .nav {
  background-color: rgba(7, 11, 22, .78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}

/* En-tête commun (modèle /chat-live), monté par /entete.js : l'ancienne barre est masquée */
.wc-entete-remplacee { display: none !important; }
.wc-entete { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 16px 22px 18px; box-sizing: border-box; font-family: inherit; }
.wc-entete .haut { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wc-entete .lien-retour { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 3px; color: var(--wc-entete-retour-couleur); text-decoration: none; font-size: var(--wc-entete-retour-taille); }
.wc-entete .lien-retour svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wc-entete .droite { display: flex; align-items: center; gap: 10px; }
.wc-entete .droite:empty { display: none; }
.wc-entete .logo { height: var(--wc-entete-logo-hauteur); opacity: .9; flex: none; }
.wc-entete .titre { font-size: var(--wc-entete-titre-taille); font-weight: var(--wc-entete-titre-graisse); letter-spacing: var(--wc-entete-titre-espacement); line-height: 1.08; color: var(--wc-text); }
.wc-entete .sous { color: var(--wc-entete-sous-couleur); font-size: var(--wc-entete-sous-taille); margin-top: 5px; line-height: 1.45; }
/* badge du compte, sorti de l'ancienne barre : on lui redonne son allure de pastille */
.wc-entete #user-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--wc-r-pilule); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 12px; font-weight: 500; color: var(--wc-text-secondary); cursor: pointer; white-space: nowrap; }
.wc-entete #user-badge:empty { display: none !important; }
.wc-entete #user-badge .x { opacity: .6; }
.wc-entete #header-clock { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--wc-text-secondary); }
.wc-entete .btn-print { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: var(--wc-r-s); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
@media (max-width: 600px) { .wc-entete { padding: 14px 16px 16px; } .wc-entete .titre { font-size: var(--wc-entete-titre-taille-mobile); } .wc-entete .logo { height: calc(var(--wc-entete-logo-hauteur) * .8); } }
@media print { .wc-entete .haut { display: none; } }
/* Cibles tactiles de l'en-tête (audit du 21/10) : le lien « ‹ Accueil » ne faisait que 16 px
   de haut et le badge du compte 23 px, avec un texte à 10 px une fois l'échelle mobile de 85 %
   appliquée. On agrandit la zone qui réagit au doigt sans changer l'aspect : padding compensé
   par une marge négative pour le lien, pseudo-élément débordant pour les pastilles. */
.wc-entete .lien-retour { padding: 10px 0; margin: -10px 0; touch-action: manipulation; }
/* L'en-tête commun dessine sa flèche en SVG : une flèche ajoutée par la page (production.css,
   « .lien-retour::before ») faisait « ‹ ‹ Accueil ». */
.wc-entete .lien-retour::before { content: none !important; }
.wc-entete #user-badge, .wc-entete #btn-logout, .wc-entete a[href*="xr18-agent"] { position: relative; font-size: 13px; touch-action: manipulation; }
.wc-entete #user-badge::before, .wc-entete #btn-logout::before, .wc-entete a[href*="xr18-agent"]::before {
  content: ''; position: absolute; inset: -9px -5px; }
.wc-entete .sous { display: block !important; margin: 5px 0 0 !important; padding: 0 !important; font-size: var(--wc-entete-sous-taille) !important; color: var(--wc-entete-sous-couleur) !important; line-height: 1.45; }
/* version compacte (outils plein écran) : seulement la ligne du haut */
.wc-entete.compact { max-width: none !important; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,11,22,.78); }
.wc-entete.compact .haut { margin-bottom: 0; }
.wc-entete #btn-logout, .wc-entete a[href*="xr18-agent"] { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: var(--wc-r-pilule); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--wc-text-secondary); text-decoration: none; cursor: pointer; white-space: nowrap; }
.wc-entete #timer-display { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: #fff; }
.wc-entete #last-update { font-size: 12px; color: var(--wc-text-tertiary); }

/* ═════ Charte commune des outils (présentée sur /charte-ui) ═════
   Un seul langage visuel pour les boutons, champs et focus de toutes les pages : mêmes
   couleurs, mêmes arrondis, mêmes états. Chaque page garde ses tailles et sa mise en page. */
:root { --wc-bleu: var(--wc-accent); --wc-rouge: var(--wc-red); --wc-vert: var(--wc-green); --wc-r: var(--wc-r-m); }
::selection { background: rgba(var(--wc-accent-rgb),.35); color: #fff; }
* { scrollbar-color: rgba(255,255,255,.18) transparent; scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--wc-bleu) !important; outline-offset: 2px !important; }
/* boutons existants des pages (.btn + variantes) */
.btn { border-radius: var(--wc-r) !important; font-weight: 600 !important; letter-spacing: 0 !important; transition: background-color .15s, border-color .15s, color .15s, opacity .15s, transform .1s !important; -webkit-tap-highlight-color: transparent; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled, .btn[disabled] { opacity: .45 !important; cursor: default !important; transform: none !important; }
.btn-primary, .btn.btn-primary { background: var(--wc-bleu) !important; border: 1px solid var(--wc-bleu) !important; color: #fff !important; }
.btn-primary:hover:not(:disabled) { background: #4aa8ff !important; border-color: #4aa8ff !important; }
.btn-secondary, .btn.btn-sec { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff !important; }
.btn-secondary:hover:not(:disabled), .btn.btn-sec:hover:not(:disabled) { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.2) !important; }
.btn-ghost { background: transparent !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.88) !important; }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.btn-danger { background: rgba(255,69,58,.14) !important; border: 1px solid rgba(255,69,58,.42) !important; color: #ff7a6e !important; }
.btn-danger:hover:not(:disabled) { background: rgba(255,69,58,.26) !important; color: #fff !important; }
/* champs : même couleur de focus partout */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus, select:focus, textarea:focus { border-color: var(--wc-bleu) !important; box-shadow: 0 0 0 3px rgba(var(--wc-accent-rgb),.18) !important; outline: none !important; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--wc-bleu); }

/* composants communs pour les nouvelles pages et les pages harmonisées */
.wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 16px; border-radius: var(--wc-r); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: #fff; font: 600 14px/1.2 Geist, -apple-system, system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s; }
.wc-btn:hover { background: rgba(255,255,255,.12); } .wc-btn:active { transform: scale(.98); } .wc-btn:disabled { opacity: .45; cursor: default; transform: none; }
.wc-btn.principal { background: var(--wc-bleu); border-color: var(--wc-bleu); } .wc-btn.principal:hover { background: #4aa8ff; }
.wc-btn.danger { background: rgba(255,69,58,.14); border-color: rgba(255,69,58,.42); color: #ff7a6e; }
.wc-btn.discret { background: transparent; }
.wc-btn.petit { min-height: 32px; padding: 6px 11px; font-size: 13px; border-radius: var(--wc-r-s); }
.wc-champ { width: 100%; min-height: 42px; padding: 10px 12px; border-radius: var(--wc-r); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font: 400 16px/1.3 Geist, -apple-system, system-ui, sans-serif; }
.wc-etiquette { display: block; font-size: var(--wc-etiquette-taille); font-weight: var(--wc-etiquette-graisse); letter-spacing: var(--wc-etiquette-espacement); text-transform: var(--wc-etiquette-casse); color: var(--wc-etiquette-couleur); margin: 0 0 6px; }
.wc-carte { background: #0f1729; border: 1px solid rgba(255,255,255,.08); border-radius: var(--wc-r-l); padding: 16px 18px; }
.wc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--wc-r-pilule); font: 700 11.5px/18px Geist, -apple-system, system-ui, sans-serif; background: rgba(255,255,255,.1); color: #fff; }
.wc-badge.bleu { background: rgba(var(--wc-accent-rgb),.18); color: var(--wc-bleu-ciel); } .wc-badge.vert { background: rgba(48,209,88,.16); color: #6fe08f; }
.wc-badge.orange { background: rgba(255,159,10,.16); color: #ffbe5c; } .wc-badge.rouge { background: rgba(255,69,58,.16); color: #ff7a6e; }
.wc-modale-fond[hidden], .wc-depot[hidden] { display: none !important; }
.wc-modale-fond { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.wc-modale { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #0f1830; border: 1px solid rgba(255,255,255,.12); border-radius: var(--wc-r-xl); padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.wc-modale h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; } .wc-modale .pied { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* Le raccourci Accueil (home-shortcut.js, z-index maximal) recouvrait le bouton principal des
   fenêtres sur téléphone (« Créer », « Enregistrer »…) : masqué tant qu'une fenêtre est ouverte,
   quelle que soit la façon dont la page la dessine (audit du 21/10). */
/* Seulement les fenêtres marquées OUVERTES : Inventaire et Festival gardent leurs fenêtres fermées
   dans la page (masquées par leur CSS) — un sélecteur plus large y cachait le raccourci en permanence. */
body:has(.modal-backdrop.open, .mb.open, .modal.open, .modal-overlay.open, dialog[open]) #home-shortcut-link { display: none !important; }

/* ═════ En-tête : une seule apparence, réglée par les jetons --wc-entete-* de charte.css ═════
   Trois écritures coexistent : l'en-tête monté par entete.js (.wc-entete), celui écrit à la main
   par Compositions / Décomptes / Habillage (header.ent), et celui de Chat unifié / Liens
   (body > header). Elles reçoivent toutes les mêmes réglages. */
.wc-entete, header.ent, body > header:has(> .haut > .lien-retour) { text-align: var(--wc-entete-alignement); }
header.ent .ent-haut .lien-retour, body > header > .haut > .lien-retour { color: var(--wc-entete-retour-couleur); font-size: var(--wc-entete-retour-taille); }
header.ent .ent-logo, body > header > .haut > img { height: var(--wc-entete-logo-hauteur); }
header.ent .ent-titre, body > header > .titre { font-size: var(--wc-entete-titre-taille); font-weight: var(--wc-entete-titre-graisse);
  letter-spacing: var(--wc-entete-titre-espacement); line-height: 1.08; color: var(--wc-text); }
header.ent .ent-sous, body > header > .sous { font-size: var(--wc-entete-sous-taille); color: var(--wc-entete-sous-couleur); }
@media (max-width: 600px) {
  header.ent .ent-titre, body > header > .titre { font-size: var(--wc-entete-titre-taille-mobile); }
  header.ent .ent-logo, body > header > .haut > img { height: calc(var(--wc-entete-logo-hauteur) * .8); }
}
/* Classe commune des titres de section, pour les pages nouvelles ou harmonisées */
.wc-surtitre { display: block; font-size: var(--wc-surtitre-taille); font-weight: var(--wc-surtitre-graisse); letter-spacing: var(--wc-surtitre-espacement);
  text-transform: var(--wc-surtitre-casse); color: var(--wc-surtitre-couleur); margin: 0 0 12px; }