/* === SÉLECTEUR DE PROFIL (dialog bac) === */
.profile-select { position: relative; }
.profile-select-list { position: absolute; z-index: 50; top: calc(100% + 0.3rem); left: 0; min-width: 250px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.profile-opt-group { display: flex; flex-direction: column; gap: 0.15rem; }
/* Séparateur entre familles : rend le regroupement lisible. */
.profile-opt-group + .profile-opt-group { border-top: 1px solid var(--header-border); padding-top: 0.45rem; margin-top: 0.2rem; }
.profile-opt-fam { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 0.35rem; margin-bottom: 0.1rem; }
.profile-opt { display: flex; flex-direction: column; gap: 0.05rem; width: 100%; text-align: start; background: transparent; border: none; border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; color: var(--text-primary); cursor: pointer; font-family: var(--font-text); }
.profile-opt-lab { font-size: 0.9rem; font-weight: 500; }
/* Description tronquée à une ligne (aperçu, sans casser la hauteur du menu). */
.profile-opt-desc { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.profile-opt:hover { background: var(--accent-muted); color: var(--accent); }
.profile-opt:hover .profile-opt-desc { color: var(--accent); opacity: 0.75; }
.profile-opt.is-active { background: var(--accent-muted); color: var(--accent); }
.profile-opt.is-active .profile-opt-lab { font-weight: 600; }
.profile-opt.is-active .profile-opt-desc { color: var(--accent); opacity: 0.75; }

/* === MULTI-BAC : switcher (header desktop = dropdown, titre mobile = bottom sheet) === */
/* Caché hors session. Variante A : la pilule bac est dans le HEADER (mobile + desktop), pas de
   titre dans le contenu. */
.tanksw { position: relative; display: none; }
body.authed .tanksw--header { display: inline-flex; margin-inline-start: 0.6rem; } /* pilule bac dans le header */
/* Corail (.logo-coral) : taille/affichage dans 03-shell (partagé app + landing). ICI uniquement :
   Mobile CONNECTÉ = header compact -> on masque le wordmark, seul le corail reste. Le nom « Suiton »
   reste porté par l'alt du corail, le <title> (SEO) et l'écran de connexion. */
@media (max-width: 599px) {
  body.authed .logo { display: none; }
  body.authed .tanksw--header { margin-inline-start: 0.5rem; }
}
@media (min-width: 600px) {
  body.authed .tanksw--header { margin-inline-start: 1rem; }
}

/* ===== Niveau 1 : en-tête de bac : fil d'ariane (ligne 1) + "Bac actuel : dropdown" (ligne 2) ===== */
.bac-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.bac-header[hidden] { display: none; }
/* Retour = lien SECONDAIRE (petit, léger). Le "Bac actuel : dropdown" en dessous est l'élément fort. */
.bac-crumb {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer; padding: 0.1rem 0;
  font-family: inherit; font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); opacity: 0.85;
}
.bac-crumb[hidden] { display: none; }
.bac-crumb:hover { color: var(--accent); opacity: 1; }
.bac-crumb span[aria-hidden] { font-size: 1rem; line-height: 1; }
/* "Bac actuel" + le switcher : le conteneur porte le contexte de positionnement du dropdown. */
.bac-current { display: inline-flex; align-items: center; gap: 0.5rem; }
.bac-current-lbl { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.bac-current .tanksw--header { margin-inline-start: 0; } /* le gap du conteneur gère l'espacement */
/* "+" inline d'ajout de bac (option 2 : pastille à accent doux), à côté du switcher.
   .bac-current étant déjà un flex row (gap 0.5rem), le bouton se place tout seul sans wrap. */
.tank-add-inline {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: var(--accent-muted); color: var(--accent);
  font-size: 1rem; line-height: 1; cursor: pointer; position: relative;
}
.tank-add-inline:hover { background: rgba(var(--accent-rgb), 0.24); }
/* Étoile Premium (✦) au coin haut-droit quand le quota Free est atteint : placement commun aux
   3 badges d'angle (.tank-add-inline / #hab-repro-btn / .photo-add-btn) -> règle unique dans 17-premium.css. */

/* ===== Niveau 0 "Mes bacs" : KPI agrégés + grille de cartes de bacs ===== */
.mesbacs { padding-block-start: 0.25rem; }
.mb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 1rem; flex-wrap: wrap; }
.mb-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.mb-customize { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--accent); padding: 0.15rem 0; }
.mb-customize:hover { text-decoration: underline; }
.mb-search { margin-bottom: 0.9rem; } /* barre de recherche (affichée au-delà de 6 bacs) */
/* "Aucun bac ne correspond" (recherche filtrée à vide) : ligne muette centrée, pas de gros gabarit. */
.mb-empty { color: var(--text-secondary); font-size: 0.85rem; padding: 1.6rem 1rem; text-align: center; }

/* Desktop : les KPI ne s'étirent pas (largeur bornée, alignés à gauche) -> 1 ou 2 KPI ne prennent
   pas toute la largeur. Jusqu'à 6, ils se répartissent puis passent à la ligne. */
.mb-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 160px)); justify-content: start; gap: 0.6rem; margin-bottom: 1.4rem; }
/* Mobile : 3 colonnes ÉGALES max ; au-delà de 3 KPI on masque le surplus (garde l'accueil compact). */
@media (max-width: 560px) {
  .mb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mb-kpi:nth-child(n+4) { display: none; }
}
/* KPI = même look CARTE que les bacs (ombre) MAIS non cliquable (pas de hover, pas de curseur).
   La différenciation vient de la PHOTO sur les cartes de bacs, pas du style de la carte. */
.mb-kpi {
  background: var(--bg-card); border: 1px solid var(--header-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 0.65rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.mb-kpi-v { font-size: 1.15rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mb-kpi-v.is-ok { color: var(--ok); } .mb-kpi-v.is-warn { color: var(--warn); } .mb-kpi-v.is-bad { color: var(--bad); }
.mb-kpi-l { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.mb-kpi-s { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mobile : 1 bac par ligne (la photo respire). Tablette/desktop : 2 puis 3 colonnes. */
.mb-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 480px) { .mb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .mb-grid { grid-template-columns: repeat(3, 1fr); } }
.mb-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--header-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color 0.15s ease;
  display: flex; flex-direction: column;
}
.mb-card.is-pinned { border-color: var(--accent); }
.mb-card:hover { border-color: var(--accent); }
.mb-open {
  display: flex; flex-direction: column; gap: 0.25rem; width: 100%; text-align: start;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 0.8rem 0.85rem;
  flex: 1 1 auto;
}
/* Vignette photo (1er enfant du bouton) : placeholder si pas d'image chargée.
   Plus haute en 1 colonne (mobile, la photo respire), plus compacte en grille multi-colonnes. */
.mb-thumb {
  display: block; width: 100%; height: 100px; object-fit: cover;
  border-radius: var(--radius-md); margin-block-end: 0.5rem; background: var(--bg-secondary);
}
.mb-thumb--empty { display: grid; place-items: center; background: var(--accent-muted); color: var(--accent); }
.mb-thumb--empty svg { width: 44px; height: 44px; }
@media (min-width: 480px) { .mb-thumb { height: 88px; } } /* cartes plus étroites en grille */
.mb-name { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.mb-stat { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; }
.mb-stat .mb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex: 0 0 auto; }
.mb-stat.is-ok { color: var(--ok); } .mb-stat.is-ok .mb-dot { background: var(--ok); }
.mb-stat.is-warn { color: var(--warn); } .mb-stat.is-warn .mb-dot { background: var(--warn); }
.mb-stat.is-bad { color: var(--bad); } .mb-stat.is-bad .mb-dot { background: var(--bad); }
.mb-stat.is-none { color: var(--text-secondary); }
.mb-test { font-size: 0.75rem; color: var(--text-secondary); }
.mb-test.is-warn { color: var(--warn); }
.mb-pin {
  position: absolute; inset-block-start: 0.4rem; inset-inline-end: 0.4rem; z-index: 1;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; border-radius: 50%;
  font-size: 0.85rem; opacity: 0.35; filter: grayscale(1); transition: opacity 0.15s ease, filter 0.15s ease;
}
.mb-pin:hover { opacity: 0.7; }
.mb-pin[aria-pressed="true"] { opacity: 1; filter: none; }
/* "+ Nouveau bac" : pilule à accent doux (cf. .tank-add-inline), calibrée sur son contenu et
   alignée à gauche sous la grille (ni pleine largeur, ni bleu plein .pill-accent). */
.mb-add {
  position: relative; /* ancre l'étoile ✦ Premium en badge coin haut-droit (cf. 17-premium.css) */
  margin-top: 0.9rem; display: inline-flex; align-items: center; padding: 0.45rem 0.9rem;
  border: 1px solid rgba(var(--accent-rgb), 0.5); border-radius: var(--radius-pill);
  background: var(--accent-muted); cursor: pointer; font-family: inherit;
  font-weight: 700; color: var(--accent); transition: background-color 0.15s ease;
}
.mb-add:hover { background: rgba(var(--accent-rgb), 0.24); }
/* Header : pilule déroulante, cohérente avec le sélecteur de profil. Tronquée sur petit écran. */
.tanksw-cur { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; max-width: 46vw; min-width: 0; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-secondary); font-family: var(--font-title); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.tanksw-cur-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (min-width: 600px) { .tanksw-cur { max-width: none; } }
.tanksw-cur::-webkit-details-marker { display: none; }
.tanksw-cur::after { content: "\25BE"; color: var(--text-secondary); font-size: 0.8rem; }
.tanksw[open] .tanksw-cur { border-color: var(--accent); color: var(--accent); }
.tanksw[open] .tanksw-cur::after { color: var(--accent); }
.tanksw-list { position: absolute; z-index: 60; top: calc(100% + 0.3rem); left: 0; min-width: 220px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.tanksw-opt { display: flex; flex-direction: column; gap: 0.05rem; width: 100%; text-align: start; background: transparent; border: none; border-radius: var(--radius-sm); padding: 0.45rem 0.55rem; color: var(--text-primary); cursor: pointer; font-family: var(--font-text); }
.tanksw-opt-lab { font-size: 0.92rem; font-weight: 500; }
.tanksw-opt-sub { font-size: 0.72rem; color: var(--text-secondary); }
.tanksw-opt:hover { background: var(--accent-muted); color: var(--accent); }
.tanksw-opt.is-active { background: var(--accent-muted); color: var(--accent); }
.tanksw-opt.is-active .tanksw-opt-lab { font-weight: 600; }
.tanksw-add { width: 100%; text-align: start; background: transparent; border: none; border-top: 1px solid var(--header-border); margin-top: 0.2rem; padding: 0.5rem 0.55rem; color: var(--accent); cursor: pointer; font-family: var(--font-text); font-size: 0.88rem; font-weight: 600; }
.tanksw-add:hover { background: var(--accent-muted); }

/* Bottom sheet (switcher mobile, M3) : feuille montante + page assombrie. */
.sheet { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; background: var(--scrim-bg); -webkit-backdrop-filter: blur(var(--scrim-blur)); backdrop-filter: blur(var(--scrim-blur)); opacity: 0; transition: opacity 0.2s ease; }
.sheet.is-open { opacity: 1; }
.sheet-panel { width: 100%; background: var(--bg-card); border-top-left-radius: 22px; border-top-right-radius: 22px; padding: 0.5rem 0.9rem calc(1.1rem + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1); }
.sheet.is-open .sheet-panel { transform: translateY(0); }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0.45rem auto 0.7rem; }
.sheet-title { font-family: var(--font-title); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 0 0.3rem 0.5rem; }
.sheet-opt { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: start; background: transparent; border: none; border-radius: var(--radius-md); padding: 0.75rem 0.6rem; color: var(--text-primary); cursor: pointer; font-family: var(--font-text); }
.sheet-opt.is-active { background: var(--accent-muted); }
.sheet-opt-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.sheet-opt.is-active .sheet-opt-dot { background: var(--accent); }
.sheet-opt-txt { display: flex; flex-direction: column; gap: 0.05rem; }
.sheet-opt-lab { font-size: 0.98rem; font-weight: 500; }
.sheet-opt.is-active .sheet-opt-lab { color: var(--accent); font-weight: 600; }
.sheet-opt-sub { font-size: 0.76rem; color: var(--text-secondary); }
.sheet-add { border-top: 1px solid var(--header-border); margin-top: 0.3rem; color: var(--accent); font-weight: 600; }

/* Dialog thémé (création / édition de bac) : remplace le prompt() natif. */
/* Scrim commun (fond sombre + flou) : voir --scrim-bg / --scrim-blur (01-tokens.css). */
.dlg { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--scrim-bg); -webkit-backdrop-filter: blur(var(--scrim-blur)); backdrop-filter: blur(var(--scrim-blur)); opacity: 0; transition: opacity 0.2s ease; }
/* Mobile : padding réduit -> pop-up plus large (plus de place pour le contenu sur petit écran). */
@media (max-width: 480px) { .dlg { padding: 0.5rem; } }
.dlg.is-open { opacity: 1; }
.dlg-panel { position: relative; width: min(420px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.2rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; box-shadow: var(--shadow-card); transform: translateY(8px) scale(0.98); transition: transform 0.2s ease; }
/* Croix de fermeture (tap à côté difficile au doigt sur mobile). */
.dlg-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2rem; height: 2rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.dlg-close:hover { color: var(--accent); border-color: var(--accent); }
.dlg.is-open .dlg-panel { transform: none; }
.dlg-title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; padding-inline-end: 2.2rem; }
.dlg-msg { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }
.dlg-field { display: flex; flex-direction: column; gap: 0.4rem; }
.dlg-field > span { font-size: 0.78rem; color: var(--text-secondary); }
/* Nom = champ PRIMAIRE (plus grand que le profil). */
.dlg-input { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.65rem 0.75rem; color: var(--text-primary); font: inherit; font-size: 1.05rem; font-weight: 600; }
.dlg-input:focus { outline: none; border-color: var(--accent); }
.dlg-input--sub { font-size: 0.95rem; font-weight: 400; } /* champ secondaire (description) : moins appuyé que le nom */
.dlg-select { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; cursor: pointer; list-style: none; padding: 0.55rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; color: var(--text-primary); }
.dlg-select::-webkit-details-marker { display: none; }
.dlg-select::after { content: "\25BE"; color: var(--text-secondary); }
.dlg .profile-select[open] .dlg-select { border-color: var(--accent); color: var(--accent); }
/* Dans le dialog : liste de profils INLINE (dans le flux) et non absolue, pour ne jamais sortir de
   l'écran ; le panneau (.dlg-panel, max-height 90vh) scrolle si tout ne tient pas. */
.dlg .profile-select-list { position: static; min-width: 0; margin-top: 0.35rem; max-height: 42vh; box-shadow: none; }
.dlg-danger-row { border-top: 1px solid var(--header-border); padding-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dlg-danger-row span { font-size: 0.8rem; color: var(--text-secondary); }
.dlg-del { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; color: var(--bad); cursor: pointer; font: inherit; font-size: 0.82rem; }
.dlg-del:hover { border-color: var(--bad); }
/* Actions du dialog : les 2 boutons se partagent la largeur et wrappent si trop étroit (320px). */
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.2rem; }
.dlg-actions .pill { flex: 1 1 8rem; white-space: nowrap; text-align: center; }