/* ═══════════════════════════════════════════════════════════════════════════
   🎩 V5.0 — LOGO ALFRED ET HABILLAGE « MY HOME IT » (CSS seul, retirable)
   RÈGLE : uniquement de l'habillage (images, couleurs, police, contours). AUCUNE structure,
   AUCUN élément, AUCUNE taille de bloc modifiés.
   TOUT est sous html.marque-v5 : cette classe n'est posée que par modules/marque.js.
   📱 V5.002 (mobile) : décision d'Alex → posée PAR DÉFAUT pour tout le monde ; un admin peut l'éteindre
   (Paramètres → 🎩 Apparence & logo, « non » gardé). Sans la classe, ce fichier n'a AUCUN effet.
   Repli : l'emoji 🎩 de styles.css reste DESSOUS la tuile image → si l'image ne charge pas
   (hors ligne, aperçu Claude), l'ancien logo reste visible.
   Chemins d'images relatifs à core/ ('../icons/…').
   Pour revenir en arrière : retirer la ligne <link …theme-v5.css> d'index.html (et marque.js).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Marque Bricolage'; src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2'); font-weight:200 800; font-display:swap; }

/* ── A. Barre latérale : tuile « chapeau » par-dessus l'ancien carré (l'emoji reste dessous) ── */
html.marque-v5 .logo-mark{
  box-shadow:0 4px 12px rgba(10,19,48,.45);
}
html.marque-v5 .logo-mark::after{
  content:'';
  position:absolute; inset:0;
  background:url('../icons/marque-chapeau-128.png') center/cover no-repeat;   /* PAS de couleur : repli emoji */
  border-radius:inherit;
  pointer-events:none;
}

/* ── B. Écran de chargement : logo au-dessus du rond qui tourne ──
   (visible seulement si la classe est posée assez tôt : voir le petit script facultatif du plan) */
html.marque-v5 #auth-gate::before{
  content:'';
  display:block;
  width:96px; height:96px;
  background:url('../icons/logo-alfred-256.png') center/contain no-repeat;
  border-radius:22px;
}

/* ── C. Espace client : petite pastille chapeau devant le titre ── */
html.marque-v5 #tab-espaceclient > .toprow .page-title::before{
  content:'';
  display:inline-block;
  width:34px; height:34px;
  margin-right:10px;
  vertical-align:middle;
  border-radius:9px;
  background:url('../icons/marque-chapeau-128.png') center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(212,175,106,.35);
}

/* ── 1. Nom « Alfred » : police My Home IT, or, « CONCIERGERIE » en dessous (pas en tactical) ── */
html.marque-v5 body:not(.tactical-mode) .logo-name{
  font-family:'Marque Bricolage','Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  color:#D4AF6A;
  letter-spacing:.08em;
  text-transform:uppercase;
}
html.marque-v5 body:not(.tactical-mode) .logo-name::after{
  content:'Conciergerie';
  display:block;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--text3);
  margin-top:2px;
}
/* thème clair : or foncé (l'or clair serait illisible sur le fond bleu pâle) */
html.marque-v5 body.theme-clair .logo-name{ color:#9C7A3C; }
/* tiroir mobile ouvert : le nom réapparaît (caché sous 900 px par styles.css) */
html.marque-v5 body:not(.tactical-mode) .sidebar.mobile-open .logo-name{ display:block; }

/* ── 2. Repère de l'onglet actif en or (thème sombre seulement) ── */
html.marque-v5 body:not(.theme-clair):not(.tactical-mode) .nav-item.active::before{
  background:#D4AF6A;
  box-shadow:0 0 8px rgba(212,175,106,.55);
}

/* ── 3. Chiffres alignés dans les tableaux et les tuiles (rien d'autre ne bouge) ── */
html.marque-v5 td,
html.marque-v5 .stat-val{
  font-variant-numeric:tabular-nums;
}

/* ── 4. Contour visible au CLAVIER seulement (aucun effet à la souris ; champs de saisie exclus) ── */
html.marque-v5 button:focus-visible,
html.marque-v5 a:focus-visible,
html.marque-v5 [tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ── 5. Impression propre : on n'imprime que le contenu (Export PDF du cockpit) ── */
@media print{
  html.marque-v5 .sidebar,
  html.marque-v5 .mobile-menu-btn,
  html.marque-v5 .mobile-overlay,
  html.marque-v5 #mbarre,            /* 📱 V5.002 (mobile) : barre du haut téléphone (mobile-barre.js) */
  html.marque-v5 .toast-container,
  html.marque-v5 #announcement-banner{ display:none !important; }
  html.marque-v5 .content{ margin-left:0 !important; }
}

/* ── 6. Animations coupées pour ceux qui l'ont demandé au système (aucun code n'attend une animation) ── */
@media (prefers-reduced-motion:reduce){
  html.marque-v5 *,
  html.marque-v5 *::before,
  html.marque-v5 *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}