/* ============================================================
   AXELIGHT — Harmonisation globale des boutons & encadrés
   (même esthétique que la page d'accueil / hub)
   Chargé sur layout.html.twig ET layout-minimal.html.twig
   ============================================================ */

/* --- Boutons / tuiles : style "carte pilule" du hub --- */
#tilemenu { text-align: center; }
#tilemenu .align { text-align: center; }

.tile,
#tilemenu .tile,
#tilemenu a.tile {
  text-decoration: none !important;
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #1f3a5f !important;
  background: #fff !important;
  border: 1px solid #e6ebf1 !important;
  border-radius: 14px !important;
  padding: 11px 18px !important;
  margin: 0 8px 10px 0 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  vertical-align: middle !important;
  overflow: visible !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease !important;
}
.tile:hover,
#tilemenu .tile:hover {
  transform: translateY(-2px) !important;
  background: #fff !important;
  border-color: #bcd6f5 !important;
  box-shadow: 0 9px 22px rgba(0,0,0,.11) !important;
  color: #0f4c91 !important;
}
.tile img,
#tilemenu .tile img {
  height: 30px !important;
  width: auto !important;
  margin: 0 !important;
  vertical-align: middle;
}

/* Tuiles "double" (titre + sous-titre EMPILÉS sous le titre) */
.tile.dbl { text-align: left !important; flex-wrap: wrap !important; align-content: center !important; }
.tile.dbl .second {
  flex-basis: 100% !important;
  width: 100% !important;
  display: block !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
  margin-left: 40px !important;   /* aligné sous le titre, après l'icône (30px + gap 10px) */
  color: #7a8694 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Variante administration (accent ambré discret) */
.tile.admin {
  border-color: #f3d2bf !important;
  color: #b85c1e !important;
  background: linear-gradient(180deg,#fff7f1,#fff) !important;
}
.tile.admin:hover { border-color: #e8b48f !important; color: #9b4d18 !important; }

/* Variante développeur */
.tile.dev { border-color: #f1c0c0 !important; color: #b3261e !important; background: linear-gradient(180deg,#fdf2f2,#fff) !important; }

/* Bouton température extérieure (barre HELIOS) */
.tile.tempext,
#tilemenu a.tempext {
  background: #5b3a7a !important;
  color: #fff !important;
  border-color: #5b3a7a !important;
}
.tile.tempext:hover,
#tilemenu a.tempext:hover { background: #4c2f66 !important; color: #fff !important; cursor: default; }

/* États verrouillés */
.tile.locked, .tile.lockable.locked { opacity: .5 !important; filter: grayscale(1); }
.tile.locked:hover { cursor: not-allowed; transform: none !important; }

/* --- Titres de page centrés et cohérents --- */
#content > h1 { color: #1f3a5f; }

/* --- Encadré du synoptique (#view) : cadre propre type carte --- */
#view {
  border-radius: 16px;
}

/* --- Tableaux (.admintable) : encadré carte cohérent sur TOUTES les pages --- */
.admintable {
  width: 100%; border-spacing: 0; border-collapse: separate;
  border: 1px solid #e6ebf1 !important; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); margin: 8px 0;
}
.admintable th {
  text-align: left !important; background: #1f3a5f !important; color: #fff !important;
  font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px !important;
}
.admintable td {
  text-align: left !important; background: #fff !important; color: #33414f !important;
  font-size: 13px !important; padding: 9px 12px !important; border-bottom: 1px solid #eef2f6 !important;
}
.admintable tr:nth-child(odd) td { background: #fafbfd !important; }
.admintable tr:hover td { background: #eef5fe !important; }
.admintable td.on { background: #e9f8ef !important; }
.admintable td.off { background: #fdecea !important; }
.admintable a, .admintable a.name { color: #1565c0 !important; text-decoration: none; font-weight: 700; }
.admintable a.name { font-size: 135% !important; }
a.action img { width: 19px; height: 19px; opacity: .75; transition: opacity .1s; }
a.action:hover img { opacity: 1; }

/* --- Formulaires (.adminform) : carte cohérente partout --- */
form.adminform {
  max-width: 820px; border: 1px solid #e6ebf1 !important; background: #fafbfd !important;
  padding: 18px 20px !important; margin: 10px auto !important; border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
form.adminform label { color: #33414f !important; width: 220px !important; font-weight: 700 !important; }
form.adminform input[type=text], form.adminform input[type=password], form.adminform input[type=email],
form.adminform input[type=number], form.adminform select, form.adminform textarea {
  border: 1px solid #cfd8e3; border-radius: 8px; padding: 7px 10px; font-size: 13px; min-width: 240px;
}
form.adminform input[type=submit], form.adminform button {
  background: #1565c0; color: #fff; border: 0; border-radius: 999px; padding: 9px 22px;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
form.adminform input[type=submit]:hover, form.adminform button:hover { background: #0f4c91; }

/* Tableaux de module sans classe (alarmes, etc.) : même encadré carte */
#content table#alarms, #content table#synotable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid #e6ebf1; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin: 8px 0;
}
#content table#alarms th { background: #1f3a5f !important; color: #fff !important; text-transform: uppercase;
  font-size: 12px !important; letter-spacing: .5px; padding: 10px 12px !important; text-align: left !important; }
#content table#alarms td { background: #fff !important; padding: 9px 12px !important;
  border-bottom: 1px solid #eef2f6 !important; font-size: 13px !important; color: #33414f !important; }
#content table#alarms tr:nth-child(odd) td { background: #fafbfd !important; }

/* ============================================================
   Bandeau opérationnel global AXELIGHT (#ax-header)
   ============================================================ */
#ax-header { position:sticky; top:0; z-index:9000; height:64px; display:flex; align-items:center; gap:16px;
  padding:0 18px; background:#1f3a5f; color:#fff; box-shadow:0 3px 14px rgba(0,0,0,.20); box-sizing:border-box; }
#ax-header a { text-decoration:none !important; color:inherit; }
#ax-header .ax-left, #ax-header .ax-right { display:flex; align-items:center; gap:12px; }
#ax-header .ax-center { flex:1; display:flex; align-items:center; justify-content:center; gap:14px; }
#ax-header .ax-logo { background:#fff; border-radius:11px; padding:0 12px; display:flex; align-items:center; height:46px; box-sizing:border-box; }
#ax-header .ax-logo img { height:28px; width:auto; display:block; }
#ax-header .ax-site { display:flex; align-items:center; gap:9px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.10); height:46px; box-sizing:border-box; }
#ax-header .ax-site:hover { background:rgba(255,255,255,.18); }
#ax-header .ax-site img { width:21px; height:21px; }
#ax-header .ax-site .ax-site-name { font-size:16px; font-weight:800; letter-spacing:.2px; }

#ax-header .ax-ind { display:flex; align-items:center; gap:9px; height:46px; padding:0 16px; border-radius:13px;
  background:rgba(255,255,255,.08); box-sizing:border-box; }
#ax-header .ax-ind img { width:23px; height:23px; }
#ax-header .ax-ind .v { font-size:21px; font-weight:800; line-height:1; }
#ax-header .ax-ind .lbl { font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:.5px; }
#ax-header .ax-alarm.ok { background:rgba(46,163,106,.24); }
#ax-header .ax-alarm.ok .v { color:#8ff0bf; }
#ax-header .ax-alarm.ko { background:rgba(214,69,69,.32); animation:axpulse 1.7s ease-in-out infinite; }
#ax-header .ax-alarm.ko .v { color:#ffd2cd; }
@keyframes axpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(214,69,69,.55);} 50%{ box-shadow:0 0 0 7px rgba(214,69,69,0);} }
#ax-header .ax-comm .dot { width:13px; height:13px; border-radius:50%; background:#9aa7b5; box-shadow:0 0 0 3px rgba(255,255,255,.12); }
#ax-header .ax-comm.ok .dot { background:#2ec27a; }
#ax-header .ax-comm.ko .dot { background:#ef5350; }
#ax-header .ax-comm.ko .lbl { color:#ffd2cd; }
#ax-header .ax-temp .v { font-size:18px; }

#ax-header .ax-clock { text-align:right; line-height:1.05; padding-right:4px; }
#ax-header .ax-clock .h { font-size:21px; font-weight:800; }
#ax-header .ax-clock .d { display:block; font-size:11px; opacity:.82; text-transform:capitalize; }
#ax-header .ax-user { display:flex; align-items:center; gap:9px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.10); height:46px; box-sizing:border-box; }
#ax-header .ax-user:hover { background:rgba(255,255,255,.18); }
#ax-header .ax-user .ini { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#1565c0,#2ea36a); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
#ax-header .ax-user .role { font-size:12px; opacity:.9; text-transform:capitalize; }
#ax-header .ax-logout { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:11px; background:rgba(255,255,255,.10); font-size:19px; }
#ax-header .ax-logout:hover { background:rgba(214,69,69,.38); }

@media (max-width:820px){
  #ax-header { height:56px; gap:8px; padding:0 10px; }
  #ax-header .ax-ind .lbl, #ax-header .ax-clock .d, #ax-header .ax-user .role { display:none; }
  #ax-header .ax-site .ax-site-name { font-size:13px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #ax-header .ax-center { gap:8px; }
  #ax-header .ax-logo, #ax-header .ax-site, #ax-header .ax-ind, #ax-header .ax-user, #ax-header .ax-logout { height:42px; }
}

/* Boutons de navigation dans le bandeau (Retour / Accueil) */
#ax-header .ax-nav { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 46px;
  border-radius:11px; background:rgba(255,255,255,.10); color:#fff; font-size:26px; font-weight:700; line-height:1; text-decoration:none !important; }
#ax-header .ax-nav:hover { background:rgba(255,255,255,.20); }
#ax-header .ax-nav img { width:22px; height:22px; filter:brightness(0) invert(1); }
@media (max-width:820px){ #ax-header .ax-nav { width:40px; height:40px; flex-basis:40px; } }

/* Actions contextuelles de page, remontées dans le bandeau */
#ax-header .ax-ctx { display:flex; align-items:center; gap:8px; margin-left:4px; }
#ax-header .ax-cta { display:flex; align-items:center; gap:7px; height:40px; padding:0 13px; border-radius:10px;
  background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; text-decoration:none !important; }
#ax-header .ax-cta:hover { background:rgba(255,255,255,.22); }
#ax-header .ax-cta img { width:18px; height:18px; filter:brightness(0) invert(1); }
@media (max-width:1180px){ #ax-header .ax-cta span { display:none; } #ax-header .ax-cta { padding:0 11px; } }

/* Garde-fou : tableaux larges défilables, ne débordent jamais de la page/carte */
.ax-tablewrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.ax-tablewrap > table, .ax-tablewrap > .admintable { margin:0; }

/* Distinction intelligente des actions du bandeau : création (+) = vert, le reste = neutre */
#ax-header .ax-cta.ax-cta-add { background:rgba(46,163,106,.85); }
#ax-header .ax-cta.ax-cta-add:hover { background:#2ea36a; }

/* Bouton de validation des formulaires : navy (couleur bandeau), placé en bas du formulaire */
.ax-formsubmit { margin-top:22px; padding-top:16px; border-top:1px solid #eef2f6; text-align:right; }
#content #submit, #content a#submit.tile {
  background:#1f3a5f !important; color:#fff !important; border-color:#1f3a5f !important;
  font-size:15px !important; padding:11px 30px !important; box-shadow:0 4px 12px rgba(31,58,95,.25) !important; }
#content #submit:hover { background:#16304f !important; color:#fff !important; }
#content #submit img { filter:brightness(0) invert(1); }



/* ═══════════════════════════════════════════════════════════════
   THÈME CLAIR  body.ax-light — bandeau blanc
   THÈME SOMBRE = défaut (pas de classe nécessaire)
   ═══════════════════════════════════════════════════════════════ */

/* Toggle thème dans le bandeau */
.ax-theme-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:transparent;border:none;cursor:pointer;font-size:17px;transition:background .12s;flex-shrink:0}
body:not(.ax-light) .ax-theme-btn{color:rgba(255,255,255,.75)}
body:not(.ax-light) .ax-theme-btn:hover{background:rgba(255,255,255,.14)}
body.ax-light .ax-theme-btn{color:rgba(255,255,255,.8)}
body.ax-light .ax-theme-btn:hover{background:rgba(255,255,255,.18)}

/* ── MODE CLAIR ── */
body.ax-light #ax-header{background:#1a3060;color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.25)}
body.ax-light #ax-header .ax-logo{background:#fff;border-radius:11px;padding:0 12px}
body.ax-light #ax-header .ax-site{background:rgba(255,255,255,.12)}
body.ax-light #ax-header .ax-site:hover{background:rgba(255,255,255,.22)}
body.ax-light #ax-header .ax-nav{color:#fff}
body.ax-light #ax-header .ax-nav:hover{background:rgba(255,255,255,.18)}
body.ax-light #ax-header .ax-back{color:rgba(255,255,255,.7)}
body.ax-light #ax-header .ax-alarm.ok{background:rgba(46,163,106,.24)}
body.ax-light #ax-header .ax-alarm.ok .v{color:#8ff0bf}
body.ax-light #ax-header .ax-alarm.ko{background:rgba(214,69,69,.32)}
body.ax-light #ax-header .ax-alarm.ko .v{color:#ffd2cd}
body.ax-light #ax-header .ax-comm.ko .lbl{color:#ffd2cd}
body.ax-light #ax-header .ax-temp .v{color:#fff}
body.ax-light #ax-header .ax-clock .h{color:#fff}
body.ax-light #ax-header .ax-clock .d{color:rgba(255,255,255,.7)}
body.ax-light #ax-header .ax-user{background:rgba(255,255,255,.12)}
body.ax-light #ax-header .ax-user:hover{background:rgba(255,255,255,.22)}
body.ax-light #ax-header .ax-logout{background:rgba(255,255,255,.12);color:#fff}
body.ax-light #ax-header .ax-logout:hover{background:rgba(180,30,30,.10);color:#b91c1c}
body.ax-light #ax-header .ax-cta{background:rgba(31,58,95,.06);border-color:rgba(31,58,95,.16);color:#1f3a5f!important}
body.ax-light #ax-header .ax-cta span{color:#1f3a5f!important}
body.ax-light #ax-header .ax-cta:hover{background:rgba(31,58,95,.12)}
body.ax-light #ax-header .ax-cta.ax-cta-add{background:rgba(22,160,90,.10);border-color:rgba(22,160,90,.3);color:#0a7a3c!important}
body.ax-light #ax-header .ax-cta.ax-cta-add span{color:#0a7a3c!important}
body.ax-light .ax-nav-sep{background:rgba(31,58,95,.12)!important}


/* ── Header : tout le texte en blanc éclatant (dark + light) ── */
#ax-header,#ax-header *{color:#fff}
#ax-header .ax-clock .d{color:rgba(255,255,255,.72)!important}
#ax-header .ax-logout:hover{color:#fca5a5!important}
#ax-header .ax-logout .ax-logout-lbl{color:rgba(255,255,255,.7)!important}
#ax-header .ax-back{color:rgba(255,255,255,.65)!important}
/* Surcharge light mode pour garder blanc sur fond marine */
body.ax-light #ax-header,body.ax-light #ax-header *{color:#fff}
body.ax-light #ax-header .ax-clock .d{color:rgba(255,255,255,.72)!important}
body.ax-light #ax-header .ax-back{color:rgba(255,255,255,.65)!important}
body.ax-light #ax-header .ax-logout:hover{color:#fca5a5!important}
/* ── Dark mode : boutons nav principale blancs éclatants ── */
body:not(.ax-light) .ax-nb{color:rgba(255,255,255,.82)!important}
body:not(.ax-light) .ax-nb img{filter:brightness(0) invert(1)!important;opacity:.9!important}
body:not(.ax-light) .ax-nb:hover,body:not(.ax-light) .ax-nb.open{background:rgba(255,255,255,.14)!important;color:#fff!important}
body:not(.ax-light) .ax-nb:hover img,body:not(.ax-light) .ax-nb.open img{opacity:1!important}
body.ax-light .ax-nb{color:#4a6080!important;background:transparent!important}
body.ax-light .ax-nb img{filter:none!important;opacity:.75}
body.ax-light .ax-nb:hover,body.ax-light .ax-nb.open{background:rgba(31,58,95,.08)!important;color:#1f3a5f!important}
body.ax-light .ax-nb:hover img,body.ax-light .ax-nb.open img{opacity:1}
body.ax-light .ax-nb-bdot{border-color:#fff!important}
/* ── Logout bouton : icone + label Déco. ── */
#ax-header .ax-logout { flex-direction:column; gap:1px; font-size:16px; }
#ax-header .ax-logout .ax-logout-lbl { font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.85; line-height:1; }
body.ax-light #ax-header .ax-logout .ax-logout-lbl { color:#4a6080; }
/* ── Flex-shrink protection : .ax-right jamais coupé ── */
#ax-header .ax-left, #ax-header .ax-right { flex-shrink:0; }
/* ── Responsive header serré ≤1400px (Surface Pro 1366px) ── */
@media (max-width:1400px){
  #ax-header { gap:10px; }
  #ax-header .ax-temp { display:none; }
  #ax-header .ax-clock .d { display:none; }
  #ax-header .ax-site .ax-site-name { font-size:13px; }
}
@media (max-width:1200px){
  #ax-header .ax-center { display:none; }
}
/* ── Hotspots Saphir Arc — arc HSL 215°→272° · icones noires clair / blanches sombre · WCAG AA ── */

/* Icones */
body.ax-light .ax-hspot img{filter:brightness(0)}
body:not(.ax-light) .ax-hspot img{filter:brightness(0) invert(1)}

/* MODE CLAIR — base synoptique 215° bleu acier */
body.ax-light .ax-hspot{background:rgba(220,230,255,.72);border:1px solid rgba(80,110,200,.45);color:#1a2d6b;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.ax-light .ax-hspot:not(.editing):hover{background:rgba(220,230,255,.88);border-color:rgba(80,110,200,.65);transform:translate(-50%,-50%) translateY(-2px) scale(1.03)}

/* chaleur — 242° indigo chaud */
body.ax-light .ax-hspot.c-heat{background:rgba(215,218,255,.70);border-color:rgba(90,78,218,.45);color:#2d1e8a}
body.ax-light .ax-hspot.c-heat:not(.editing):hover{background:rgba(215,218,255,.88);border-color:rgba(90,78,218,.65)}

/* air — 225° bleu ciel profond */
body.ax-light .ax-hspot.c-air{background:rgba(210,228,255,.72);border-color:rgba(50,105,215,.45);color:#0d2e72}
body.ax-light .ax-hspot.c-air:not(.editing):hover{background:rgba(210,228,255,.88);border-color:rgba(50,105,215,.65)}

/* electricite — 234° indigo electrique */
body.ax-light .ax-hspot.c-elec{background:rgba(205,215,255,.72);border-color:rgba(60,80,220,.45);color:#1c1a72}
body.ax-light .ax-hspot.c-elec:not(.editing):hover{background:rgba(205,215,255,.88);border-color:rgba(60,80,220,.65)}

/* solaire — 258° violet lavande */
body.ax-light .ax-hspot.c-sun{background:rgba(222,212,255,.70);border-color:rgba(112,72,215,.45);color:#2d1a72}
body.ax-light .ax-hspot.c-sun:not(.editing):hover{background:rgba(222,212,255,.88);border-color:rgba(112,72,215,.65)}

/* decret tertiaire — 272° mauve reglementaire */
body.ax-light .ax-hspot.c-green{background:rgba(232,218,255,.68);border-color:rgba(135,62,200,.45);color:#3a1065}
body.ax-light .ax-hspot.c-green:not(.editing):hover{background:rgba(232,218,255,.86);border-color:rgba(135,62,200,.65)}

/* sans classe (synoptique) */
body.ax-light .ax-hspot:not([class*="c-"]):not([class*="editing"]){background:rgba(220,230,255,.72);border-color:rgba(80,110,200,.45);color:#1a2d6b}

/* MODE SOMBRE — base synoptique bleu acier nocturne */
body:not(.ax-light) .ax-hspot{background:rgba(30,40,100,.62);border:1px solid rgba(140,170,255,.40);color:#c8d8ff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body:not(.ax-light) .ax-hspot:not(.editing):hover{background:rgba(30,40,100,.80);border-color:rgba(140,170,255,.60);transform:translate(-50%,-50%) translateY(-2px) scale(1.03)}

/* chaleur sombre */
body:not(.ax-light) .ax-hspot.c-heat{background:rgba(42,26,112,.62);border-color:rgba(175,148,255,.40);color:#d8c8ff}
body:not(.ax-light) .ax-hspot.c-heat:not(.editing):hover{background:rgba(42,26,112,.80);border-color:rgba(175,148,255,.60)}

/* air sombre */
body:not(.ax-light) .ax-hspot.c-air{background:rgba(18,40,118,.62);border-color:rgba(120,160,255,.40);color:#bcd8ff}
body:not(.ax-light) .ax-hspot.c-air:not(.editing):hover{background:rgba(18,40,118,.80);border-color:rgba(120,160,255,.60)}

/* electricite sombre */
body:not(.ax-light) .ax-hspot.c-elec{background:rgba(26,24,108,.62);border-color:rgba(148,140,255,.40);color:#c4c8ff}
body:not(.ax-light) .ax-hspot.c-elec:not(.editing):hover{background:rgba(26,24,108,.80);border-color:rgba(148,140,255,.60)}

/* solaire sombre */
body:not(.ax-light) .ax-hspot.c-sun{background:rgba(52,24,118,.62);border-color:rgba(188,148,255,.40);color:#dcc8ff}
body:not(.ax-light) .ax-hspot.c-sun:not(.editing):hover{background:rgba(52,24,118,.80);border-color:rgba(188,148,255,.60)}

/* decret tertiaire sombre */
body:not(.ax-light) .ax-hspot.c-green{background:rgba(65,16,108,.62);border-color:rgba(205,140,255,.40);color:#e4c0ff}
body:not(.ax-light) .ax-hspot.c-green:not(.editing):hover{background:rgba(65,16,108,.80);border-color:rgba(205,140,255,.60)}

/* ─── RESPONSIVE MOBILE <= 480px (LOT D3) ─────────────────────────────── */
@media (max-width:480px){
  /* Hauteur hero auto sur mobile (ne pas forcer 100vh) */
  #content{height:auto!important;overflow:auto!important}
  .ax-hero{height:auto!important;min-height:100dvh}

  /* Image de fond cachee sur mobile (trop petite, coute cher en bande passante) */
  .ax-hero-bg{display:none!important}

  /* Logos : stack vertical */
  .ax-hero-logos{flex-direction:column;align-items:center;padding:10px 12px 0;gap:8px}
  .ax-logo-card{min-width:0;max-width:90%;justify-content:center}

  /* Centre : taille reduite */
  .ax-hero-center{padding:12px 16px;gap:4px}
  .ax-hero-site{font-size:18px}
  .ax-hero-sub{font-size:11px}
  .ax-hero-clock{font-size:28px}

  /* Selecteur batiment : wrap */
  .ax-bld-bar{flex-wrap:wrap;gap:6px;padding:0 12px 8px}
  .ax-bld-tab{font-size:10px;padding:5px 10px}

  /* Hotspots : quitter l'absolu → grille 2 colonnes */
  .ax-hs-layer{position:static!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 12px;background:rgba(8,18,38,.85);pointer-events:auto!important}
  .ax-hspot{
    position:static!important;
    transform:none!important;
    translate:none!important;
    width:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    padding:12px 8px 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
    text-align:center!important;
    gap:6px!important;
    min-width:0!important;
    white-space:normal!important;
  }
  /* Annuler le translate(-50%,-50%) du positionnement absolu */
  .ax-hspot:not(.editing):hover{transform:translateY(-2px)!important}
  .ax-hspot.editing{transform:none!important}

  .ax-hspot img{width:22px!important;height:22px!important}

  /* Overlay admin : masquee sur mobile (trop petit) */
  .hs-admin-bar{display:none!important}

  /* Status bar : wrap */
  .ax-hero-status{flex-wrap:wrap;gap:10px;padding:8px 12px;font-size:10px}

  /* Header nav : taille reduite */
  #ax-header{gap:6px;padding:0 8px}
  #ax-header .ax-site .ax-site-name{font-size:11px;max-width:100px}
  #ax-header .ax-center{display:none!important}
  #ax-header .ax-clock .d{display:none!important}
  #ax-header .ax-clock .h{font-size:15px}

  /* Hub cards : 1 colonne */
  .hub-grid,.ax-hub-grid{grid-template-columns:1fr!important}
}