/* app.css — dashboard Yumi Bridge : sobre, pleine largeur, statique, zéro animation décorative. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Fond posé sur la RACINE du document (gate visuel : le thème se lit sur <html>,
   jamais emprunté à l'hôte). [data-theme] vit sur <html> → le fond suit. */
html { background: var(--fond); color: var(--texte); }
body {
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Barre haute --- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.topbar-inner {
  display: flex; align-items: center; gap: var(--espace-l);
  padding: 0 var(--espace-l);
}
.marque { font-weight: 600; letter-spacing: .01em; }
/* Identité à gauche : marque puis version vJJMM-HHMM en encre secondaire (skill yumi-minimalist-design). */
.identite { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.version { color: var(--texte-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.nav { display: flex; gap: var(--espace); flex: 1; }
.nav a {
  color: var(--texte-dim); text-decoration: none; padding: 14px 2px 12px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--texte); }
.nav a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent); }
.topbar-actions { display: flex; gap: var(--espace); align-items: center; }
.inline-form { display: inline; margin: 0; }

/* --- Contenu pleine largeur : règle du propriétaire — le contenu utilise la
   largeur de l'écran, JAMAIS de colonne centrée plafonnée (max-width). --- */
.contenu { flex: 1; width: 100%; padding: var(--espace-l); }

/* --- Boutons --- */
.btn, .btn-ghost {
  font: inherit; cursor: pointer; border-radius: var(--rayon);
  padding: 7px 14px; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost:hover { border-color: var(--texte-dim); }
.btn:hover { filter: brightness(1.08); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ico { width: 16px; height: 16px; fill: currentColor; }

/* --- En-tête : pastille de compte, panneau ancré, langue, interrupteur de
   thème (L10-bis — règle du propriétaire : à droite, compte puis langue puis
   thème ; skill yumi-minimalist-design). --- */
.compte { position: relative; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--bordure); background: var(--surface);
  color: var(--texte); font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar:hover { border-color: var(--texte-dim); }
.panneau-compte {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10;
  display: flex; flex-direction: column; gap: var(--espace);
  min-width: 200px; padding: var(--espace);
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: 0 8px 30px rgb(0 0 0 / 0.25);
}
.panneau-compte[hidden] { display: none; }
.panneau-identite {
  margin: 0; display: flex; flex-direction: column; gap: 2px;
  padding-bottom: var(--espace); border-bottom: 1px solid var(--bordure);
}
.panneau-compte a { color: var(--texte); text-decoration: none; }
.panneau-compte a:hover { color: var(--accent); }
.panneau-compte a[aria-current="page"] { color: var(--accent); }
.controle-langue {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--texte-dim); font-size: 13px; white-space: nowrap;
}
.controle-langue .drapeau { width: 16px; height: 12px; border-radius: 2px; }
/* Interrupteur de thème : pastille sobre à UNE icône qui annonce l'action
   (lune en clair → va vers le sombre, soleil en sombre — réserve 1 du gate
   L10-bis ; le gabarit choisit le symbole, le CSS n'a rien à permuter). */
.interrupteur {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--surface); color: var(--accent); cursor: pointer;
}
.interrupteur .ico { width: 13px; height: 13px; }

/* --- Listes : un item = une ligne --- */
.liste { display: flex; flex-direction: column; gap: var(--espace); }
/* L49 : une carte bornée, la grille ajoute des colonnes (pas de 1fr). */
.grille-abonnements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 520px));
  gap: var(--espace);
  align-items: start;
}
.grille-abonnements .ligne-boutique { flex-wrap: wrap; max-width: 520px; }
.grille-abonnements .marque-boutique {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch;
}
.grille-abonnements details { flex: 1 0 100%; }
.grille-abonnements summary { cursor: pointer; }

/* Tableau large : la PAGE ne défile jamais horizontalement — le tableau
   défile DANS son conteneur (gate visuel 390 px : scrollWidth <= innerWidth). */
.defilable { overflow-x: auto; max-width: 100%; }

/* Sous 480 px les rangées se replient : rien ne force une largeur de page. */
@media (max-width: 480px) {
  .topbar-inner { flex-wrap: wrap; padding: 0 var(--espace); gap: var(--espace); }
  .nav { flex-wrap: wrap; row-gap: 0; }
  .contenu { padding: var(--espace); }
  .ligne-boutique { flex-wrap: wrap; padding: var(--espace); }
  .ligne-detail { flex-wrap: wrap; }
  .entete-page { flex-wrap: wrap; row-gap: var(--espace); }
}
.ligne-boutique {
  display: flex; align-items: center; gap: var(--espace);
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: var(--espace) var(--espace-l);
}
.ligne-principal { flex: 1; display: flex; align-items: baseline; gap: var(--espace); min-width: 0; }
.marque-boutique { font-weight: 600; }
.handle { font-family: var(--mono); font-size: 13px; color: var(--texte-dim); }
.ligne-detail { display: flex; gap: var(--espace); align-items: center; color: var(--texte-dim); }
.dim { color: var(--texte-dim); }
.erreur-code { font-family: var(--mono); font-size: 13px; color: var(--ko); }

/* --- Statut : PASTILLE STATIQUE, zéro animation --- */
.pastille { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pastille.ok { background: var(--ok); }
.pastille.ko { background: var(--ko); }

/* --- Divers --- */
.entete-page { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--espace-l); }
.entete-page h1 { font-size: 20px; margin: 0; }
.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: var(--espace-l);
  max-width: 420px; margin: 8vh auto 0;
}
.connexion h1 { font-size: 18px; margin-top: 0; }
.colonne { display: flex; flex-direction: column; gap: var(--espace); }
.colonne label { font-size: 13px; color: var(--texte-dim); }
.colonne input:not([type="checkbox"]):not([type="hidden"]),
.filtre-journal input[type="text"] {
  font: inherit; padding: 8px 10px; border-radius: var(--rayon);
  border: 1px solid var(--bordure); background: var(--fond); color: var(--texte);
}
.filtre-journal { display: flex; gap: var(--espace); align-items: center;
  margin: 0 0 var(--espace); }
.filtre-journal input[type="text"] { flex: 0 1 260px; }
.erreur {
  background: var(--erreur-fond); color: var(--ko);
  border-radius: var(--rayon); padding: 8px var(--espace);
}
.avertissement {
  background: var(--avertissement-fond); border-radius: var(--rayon);
  padding: 8px var(--espace);
}

/* --- L6b : Journal (tableau tabular-nums), Clés API, Réglages --- */
.tableau-journal { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau-journal th, .tableau-journal td {
  text-align: left; padding: 6px var(--espace);
  border-bottom: 1px solid var(--bordure); font-size: 13px;
}
.tableau-journal th { color: var(--texte-dim); font-weight: 500; }
.tableau-journal .num { text-align: right; white-space: nowrap; }
.code-statut { font-family: var(--mono); }
.statut-ok { color: var(--ok); }
.statut-ko { color: var(--ko); }
.pagination { display: flex; gap: var(--espace); margin-top: var(--espace-l); }
.ligne-revoquee .marque-boutique { color: var(--texte-dim); }
/* Action destructive confirmée dans une boîte de la page (jamais confirm() natif). */
.btn.btn-danger { background: var(--ko); border-color: var(--ko); color: #fff; }
/* Hiérarchie des actions (L10-bis) : primaire .btn, secondaire .btn-ghost,
   lien sobre .btn-lien (accent, souligné seulement au survol) ; le rouge est
   RARE — réservé à .danger (Supprimer, Révoquer, Désactiver). Chaque action
   d'une ligne vit dans son propre conteneur .action (filet de séparation). */
.btn-lien {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--accent); cursor: pointer; text-decoration: none;
}
.btn-lien:hover { text-decoration: underline; }
.btn-lien.danger { color: var(--ko); }
.ligne-detail .action { display: inline-flex; align-items: center; gap: var(--espace); }
.ligne-detail .action + .action {
  border-left: 1px solid var(--bordure); padding-left: var(--espace);
}

/* --- Cases à cocher (portées, plafonds — L10-bis) et validation inline --- */
.cases {
  border: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cases legend { font-size: 13px; color: var(--texte-dim); padding: 0; margin-bottom: 2px; }
.cases-inline { flex-direction: row; gap: var(--espace); align-items: center; }
.case {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--texte); cursor: pointer;
}
.case input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.case-desactivee { color: var(--texte-dim); cursor: default; }
.erreur-champ { color: var(--ko); font-size: 13px; margin: -4px 0 0; }

/* --- <dialog> NON-modal (show() dans app.js) : la page reste interactive,
   un clic extérieur atteint sa cible et ferme la boîte. Pas de ::backdrop
   (il n'existe qu'en modal) : position fixe centrée + ombre portée. --- */
.boite-dialog {
  position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--surface); color: var(--texte);
  padding: var(--espace-l); min-width: 320px; max-width: 90vw;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.25);
}
.boite-dialog h2 { font-size: 16px; margin: 0 0 var(--espace); }
.actions-dialog { display: flex; gap: var(--espace); justify-content: flex-end; }
.jeton-unique { max-width: 640px; }
.jeton-clair {
  font-family: var(--mono); font-size: 14px; user-select: all;
  padding: var(--espace); border: 1px solid var(--bordure);
  border-radius: var(--rayon); word-break: break-all; background: var(--fond);
}
a { color: var(--accent); }