/* ══ DA Léonidas — lot P0 (26.10.2026) ═══════════════════════════════════
 * Surcharge en fin de feuille : jetons du :root, Panchang/Switzer, boutons
 * plats mats, onglets « Trait acier », en-tête compact. Aucun changement de
 * comportement : uniquement de l'habillage. */

/* ── Typographie ───────────────────────────────────────────────────────── */
body { font-family: var(--font-text); font-weight: 400; }
.card h2,
#auth-gate h2,
.leo-modal-card h2,
.sheet-card h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.card h3, .passkeys-row h3, .push-row h3, #device-mqtt h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
  margin: 16px 0 8px;
}
#panel-controls h2 { margin-top: 20px; }

/* ── En-tête : nom unique, puce « en développement », puces pilules ─────── */
.app-header { border-bottom: 1px solid var(--border); }
.brand { gap: 4px; }
.brand-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
  overflow: visible;
}
.brand-mark { font-family: var(--font-text); }
.meta-chip,
button.meta-chip {
  appearance: none;
  min-height: 0;
  height: auto;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  max-width: none;
}
button.meta-chip { min-height: 32px; display: inline-flex; align-items: center; }
#shell-env {
  align-self: flex-start;
  font-size: 10.5px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
}
.live-chip {
  font-family: var(--font-text);
  font-size: 11.5px;
  padding: 4px 10px 4px 8px;
  background: #000;
  border-color: rgba(201, 206, 214, 0.14);
}

/* ── Champs : pilules, focus acier ─────────────────────────────────────── */
.input,
.field input,
.field select {
  border-radius: var(--r-pill);
  background: var(--bg-card);
  border: 1px solid rgba(201, 206, 214, 0.22);
  color: var(--text-strong);
  padding-left: 18px;
  padding-right: 18px;
  font-family: var(--font-text);
}
.input:focus,
.field input:focus,
.field select:focus { outline: none; border-color: var(--steel); }
.input::placeholder { color: var(--muted); }

/* ── Cartes et lignes ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.fleet-row,
.cmd-target,
.shot-row,
.update-toast {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.fleet-row { border-radius: 14px; }
.fleet-label, .cmd-target-label { color: var(--text-strong); font-weight: 600; }
.fleet-row input { accent-color: var(--accent); }
.fleet-state,
.cmd-target-state {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.fleet-state:empty { display: none; }
.cmd-target-state[data-known="0"] { border-color: var(--warn); color: var(--warn); }
#fleet-status[data-kind="ok"] { color: var(--muted); }
.btn-back, .btn-inline-link { color: var(--text); }
.guide-steps li::before { background: var(--steel); color: var(--bg); }
.shell-only-note { border-left-color: var(--steel); }

/* ── Boutons : plats, mats, pilules ────────────────────────────────────── */
button,
.btn {
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button:active:not(:disabled), .btn:active { transform: scale(0.98); }
button:disabled,
.btn:disabled {
  opacity: 1;
  background: var(--bg-elevated);
  border-color: transparent;
  color: var(--muted-2);
}
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Principal : rouge laqué mat uni, texte blanc en Panchang capitales. */
.btn-primary,
button.btn-primary {
  background: var(--accent);
  background-image: none;
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}
.btn-primary:active:not(:disabled) { background: var(--accent-press); }
.btn-primary:disabled { background: var(--bg-elevated); border-color: transparent; color: var(--muted-2); }

/* Secondaire : contour acier fin. */
.btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }

/* Acier : contour acier marqué (Armer). Distinct du rouge plein de Panique. */
.btn-steel {
  background: var(--grad-steel-surface);
  border: 1.5px solid var(--steel);
  color: var(--text-strong);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-steel:disabled { background: var(--bg-elevated); border-color: rgba(201, 206, 214, 0.14); color: var(--muted-2); }

#panel-controls .btn { font-size: 15px; }
#panel-controls .btn-primary,
#panel-controls .btn-steel { font-size: 14px; }
.btn-ico { width: 20px; height: 20px; flex: none; vertical-align: -4px; margin-right: 8px; }

/* ── Panique sonore : rouge plein, appui maintenu 2 s avec jauge visible ── */
[data-action="panic-loud"],
.btn-panic {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-action="panic-loud"]:disabled { background: var(--bg-elevated); border-color: transparent; color: var(--muted-2); }
/* Jauge : voile blanc qui remplit le bouton de gauche à droite + filet
   blanc en bas, lisibles même au soleil. Piloté par --hold (app.js). */
[data-action="panic-loud"]::after {
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 -3px 0 #fff;
}
.hold-btn::after { background: rgba(201, 206, 214, 0.2); }
.hold-btn.holding,
[data-action="panic-loud"].holding { transform: scale(0.985); }
.hold-btn.armed,
[data-action="panic-loud"].armed { outline: 2px solid var(--steel); outline-offset: 2px; }
[data-trigger-action="STOP"].stop-armed { outline-color: var(--steel); }

/* Modales et toasts */
.leo-modal-card, .sheet-card { background: var(--bg-card); border: 1px solid var(--border); }
.leo-modal .btn-danger, .leo-modal #leo-modal-ok.danger { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.update-toast { border-radius: var(--r-pill); padding-left: 18px; }

/* ── Barre d'onglets « Trait acier » : pilule rouge sur l'onglet actif ─── */
.tabbar {
  background: rgba(14, 16, 19, 0.96);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.tabbar .tab {
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 52px;
  gap: 4px;
  padding: 2px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.tabbar .tab .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-base) var(--ease-island), color var(--dur-base) var(--ease-island);
}
.tabbar .tab .ico svg { width: 22px; height: 22px; display: block; }
.tabbar .tab[aria-current="page"] { background: none; color: var(--text-strong); font-weight: 600; }
.tabbar .tab[aria-current="page"] .ico { background: var(--accent); color: var(--on-accent); }
.tabbar .tab:active:not(:disabled) { transform: none; }

/* ── iPhone : en-tête sans troncature ──────────────────────────────────── */
@media (max-width: 480px) {
  .app-header .meta-chip { max-width: none; }
  .app-header .header-right { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-batt[data-level="critical"] { animation: none; }
  button, .btn, .tabbar .tab .ico { transition: none; }
}

/* ── Écran de connexion : signe Léonidas en acier ─────────────────────── */
.gate-mark { width: 78px; height: auto; display: block; margin: 0 auto 2px; }
#auth-gate .gate-brand {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--text-strong);
}
#auth-passkey, #auth-password, #auth-first, #auth-lost, #auth-enroll { width: 100%; }

/* Bouton « Historique des tirs » : rond, icône horloge (l'ancien libellé
   était écrasé en « Histo… » par la règle générique des boutons). */
button.meta-chip-ico { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }
.fleet-state { justify-self: start; }
/* Appareils de connexion : le texte sur toute la largeur, les actions dessous. */
#passkey-list .fleet-row { grid-template-columns: 1fr 1fr; }
#passkey-list .fleet-row > span { grid-column: 1 / -1; font-size: 14px; line-height: 1.4; color: var(--text); }
#passkey-list .fleet-row .btn { min-height: 40px; padding: 8px 12px; }

/* ── P1 : transition d'apparition des écrans (250 ms, easing « île ») ────
   CSS seul : se joue quand un panneau passe de hidden à visible. Opacité +
   léger glissement, sans toucher au routeur ni à la logique. */
@keyframes leo-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.panel:not([hidden]) { animation: leo-panel-in var(--dur-base) var(--ease-island) both; }
@media (prefers-reduced-motion: reduce) {
  .panel:not([hidden]) { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   DA Léonidas — lot P1
   ════════════════════════════════════════════════════════════════════════ */

/* ── Pastille d'état « île » (js/island.js, présentationnel) ──────────── */
:root { --dur-island: 350ms; --cut: 11px; }
.leo-island {
  position: fixed;
  top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px);
  left: 50%;
  z-index: 1200;
  transform: translateX(-50%);
  width: 44px;
  height: 12px;
  border-radius: 999px;
  background: #000;
  color: var(--text);                       /* acier */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(201, 206, 214, 0.1);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition:
    width var(--dur-island) var(--ease-island),
    height var(--dur-island) var(--ease-island),
    border-radius var(--dur-island) var(--ease-island),
    opacity 200ms var(--ease-out);
}
.leo-island[data-open="1"] { opacity: 1; }
.leo-island .isl-row {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  padding: 0 16px 0 13px;
  box-sizing: border-box;
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 160ms var(--ease-out);
}
.leo-island[data-multi="1"] .isl-row { white-space: normal; padding-top: 9px; padding-bottom: 9px; align-items: flex-start; }
.leo-island .isl-measure {
  position: absolute;
  visibility: hidden;
  left: 0;
  top: 0;
  height: auto;
  min-height: 36px;
}
.leo-island .isl-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.leo-island[data-multi="1"] .isl-dot { margin-top: 5px; }
.leo-island[data-tone="alert"] .isl-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(165, 15, 31, 0.28); }
.leo-island[data-tone="ok"] .isl-dot { background: var(--steel); }
.leo-island[data-tone="pending"] .isl-dot { background: var(--steel); animation: isl-pulse 1s var(--ease-in-out) infinite; }
@keyframes isl-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .leo-island, .leo-island .isl-row { transition: none; }
  .leo-island[data-tone="pending"] .isl-dot { animation: none; }
}

/* ── Cartes chanfreinées, arête acier brossé ─────────────────────────────
   Deux coins opposés coupés (haut-gauche, bas-droit). L'élément est découpé
   par clip-path ; ::before = arête (dégradé acier), ::after = fond, inset
   1px avec la même découpe : le filet suit donc aussi le biseau. */
.card,
.fleet-row,
.cmd-target {
  --chamfer-poly: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
  position: relative;
  isolation: isolate;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  clip-path: var(--chamfer-poly);
}
.card::before, .card::after,
.fleet-row::before, .fleet-row::after,
.cmd-target::before, .cmd-target::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.card::before,
.fleet-row::before,
.cmd-target::before {
  inset: -1px;                              /* recouvre la bordure transparente */
  z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(238, 240, 243, 0.62) 0%, rgba(138, 145, 156, 0.22) 28%,
      rgba(201, 206, 214, 0.42) 52%, rgba(90, 96, 105, 0.18) 76%, rgba(220, 224, 230, 0.55) 100%);
  clip-path: var(--chamfer-poly);
}
.card::after,
.fleet-row::after,
.cmd-target::after {
  inset: 0;                                 /* = 1px dans la zone de bordure */
  z-index: -1;
  background: var(--bg-card);
  --cut-in: calc(var(--cut) - 0.6px);
  clip-path: polygon(
    var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)),
    calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in)
  );
}
.fleet-row, .cmd-target { --cut: 9px; }
.fleet-row::after, .cmd-target::after { background: var(--bg-elevated); }
.card .card, .card .fleet-row { --cut: 8px; }
/* Signal de rafraîchissement : porté par le fond (::after). */
.fleet-row.row-pulse { animation: none; }
.fleet-row.row-pulse::after { animation: row-pulse-fill 0.9s ease-out; }
@keyframes row-pulse-fill {
  0% { background: #2a2e34; }
  100% { background: var(--bg-elevated); }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-row.row-pulse::after { animation: none; }
}

/* ── Focus clavier visible sur les cartes à pans coupés (Léo PWA, 26.10) ──
   clip-path coupe tout ce qui dépasse : l'anneau est donc tracé À L'INTÉRIEUR
   (outline-offset négatif). La ligne Blaster est un <label> autour d'un radio. */
.fleet-row:focus-visible,
.fleet-row:has(input:focus-visible),
.cmd-target:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--text, #C9CED6);
  outline-offset: -3px;
}

/* Île : toujours sur une ligne, texte tronqué par une ellipse (le message complet reste dans #shell-status). */
.leo-island[data-multi="1"] { height: 36px !important; border-radius: 999px !important; }
.leo-island[data-multi="1"] .isl-row { white-space: nowrap; padding-top: 0; padding-bottom: 0; align-items: center; }
.leo-island[data-multi="1"] .isl-dot { margin-top: 0; }
.leo-island .isl-text { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── Ajouter mon Blaster / guide WiFi (26.10.2026) ───────────────────── */
.fleet-extra { margin-top: 10px; }
.profile-blaster-actions { flex-wrap: wrap; margin-top: 10px; }
.profile-blaster-actions:empty { display: none; }
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
}
.seg-btn {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.seg-btn[aria-selected="true"] { background: var(--steel); color: var(--bg); }
.seg-btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; box-shadow: none; }
a.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wifi-portal { margin: 8px 0 10px; min-height: 44px; }
.claim-scan { margin-top: 12px; }
.claim-scan video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  background: #000;
  margin-bottom: 8px;
}
#wifi-wait-status[data-kind="ok"] { font-weight: 600; font-size: 16px; }
#panel-wifi-guide [data-os-only][hidden], #panel-claim [hidden] { display: none; }