/* Akvido — espace membre.
   Complément de style.css : on ne redéfinit aucune variable, on réutilise
   celles de la feuille principale (--accent, --surface, --line…).
   Tout est préfixé « mb- » pour ne jamais heurter les classes existantes.
   Palette bleu ciel, thème clair unique. Aucune teinte verte. */

/* ---------- encart « tout reste gratuit » ---------- */
.mb-libre { margin-top: 18px; }
.mb-libre p + p { margin-top: 8px; }

/* L'attribut « hidden » doit toujours l'emporter. Sans cela, une règle de
   style.css comme « .panes { display: grid } » le neutralise et le bloc
   « non connecté » resterait affiché sous le bloc « connecté ». */
[hidden] { display: none !important; }

/* ---------- états généraux ---------- */
.mb-etat { color: var(--muted); font-size: 15px; }

.mb-vide {
  color: var(--muted); font-size: 15px; font-style: italic;
  padding: 10px 0;
}

.mb-sous-titre {
  font-size: 16px; font-weight: 640; margin-top: 22px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.mb-bloc > .mb-sous-titre:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }

.mb-bloc { margin-top: 18px; }

/* ---------- bandeau du membre ---------- */
.mb-bandeau {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 18px 28px;
}
.mb-identite { min-width: 200px; }
.mb-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.mb-email { font-weight: 620; font-size: 17px; word-break: break-all; }

.mb-compteurs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 30px; margin-left: auto;
}
.mb-compteurs li { display: flex; flex-direction: column; }
.mb-compteurs b {
  font-size: 22px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* Idem : ces libellés nomment les chiffres, ils doivent rester lisibles. */
.mb-compteurs span { font-size: 13px; color: var(--muted); }

/* ---------- formulaires ---------- */
.mb-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* Les boutons s'alignent sur le bas de la ligne ; les champs, eux, sont
   étirés pour que leurs étiquettes restent alignées entre elles même quand
   l'un d'eux porte un texte d'aide supplémentaire. */
.mb-form-inline {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.mb-form-inline .btn { flex: 0 0 auto; }
.mb-form-inline > .mb-champ { align-self: stretch; }

/* La largeur souple ne vaut QUE dans les formulaires en ligne : dans un
   conteneur en colonne, « flex-basis » s'appliquerait à la hauteur et
   creuserait des trous entre les champs. */
.mb-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mb-form-inline > .mb-champ { flex: 1 1 200px; }
.mb-form-inline > .mb-champ-large { flex: 1 1 320px; }
.mb-form-inline > .mb-champ-ac { flex: 1 1 260px; }

.mb-champ label { font-size: 14px; font-weight: 570; color: var(--ink); }

/* .ac vient de style.css avec « flex: 1 1 210px ». Dans notre champ, qui est
   un conteneur en colonne, cette base s'appliquerait à la hauteur et
   creuserait un vide de 210 px sous l'étiquette. On la neutralise, en
   gardant le positionnement relatif dont la liste de suggestions dépend. */
.mb-champ-ac .ac { flex: 0 0 auto; width: 100%; }

.mb-champ input[type="text"],
.mb-champ input[type="email"],
.mb-champ input[type="password"],
.mb-champ input[type="search"] {
  width: 100%; min-width: 0; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mb-champ input::placeholder { color: var(--faint); }
.mb-champ input[aria-invalid="true"] { border-color: var(--q-poor); }

/* Cases à cocher : la cible cliquable couvre la case ET son libellé. */
.mb-champ-case { flex-direction: row; align-items: center; gap: 9px; }
.mb-form-inline > .mb-champ-case { flex: 1 1 100%; }
.mb-champ-case input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.mb-champ-case label { font-weight: 500; color: var(--muted); font-size: 14.5px; }

/* --muted plutôt que --faint : ce texte porte une règle utile (12 caractères
   minimum) et doit tenir 4,5:1. --faint ne monte qu'à 3,5:1 sur ce fond. */
.mb-aide { font-size: 13px; color: var(--muted); }

/* Zone de retour d'un formulaire (succès ou erreur). */
.mb-retour { font-size: 14.5px; color: var(--muted); }
.mb-form-inline > .mb-retour { flex: 1 1 100%; }
.mb-retour:empty { display: none; }
.mb-retour.mb-err { color: var(--q-poor); font-weight: 570; }
.mb-retour.mb-ok  { color: var(--accent-2); font-weight: 570; }

/* Bouton d'action destructrice : brique, jamais rouge vif.
   #A03A2B sous du blanc tient 6,7:1. */
.btn-danger {
  color: var(--on-accent); background: var(--q-poor); border-color: var(--q-poor);
}
.btn-danger:hover { background: #86301F; border-color: #86301F; }

.mb-danger-titre { color: var(--q-poor); }
.mb-danger { border-left: 3px solid var(--q-poor); padding-left: 14px; }

/* ---------- listes (adresses, sites, résultats) ---------- */
.mb-liste { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-liste:empty { margin: 0; }

.mb-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.mb-item-corps { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-item-nom { font-weight: 600; font-size: 15.5px; }
.mb-item-info { font-size: 13.5px; color: var(--muted); }
.mb-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.mb-badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  padding: 3px 7px; border-radius: 2px; align-self: center;
}

.mb-resultats:empty { display: none; }
.mb-resultats .mb-item { background: var(--accent-sk); }

/* ---------- alertes ---------- */
.mb-alerte-groupe { margin-top: 14px; }
.mb-alerte-groupe > h3 {
  font-size: 14px; font-weight: 620; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}

.mb-cible {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); padding: 12px 14px; margin: 0 0 8px;
}
.mb-cible legend { font-weight: 600; font-size: 15px; padding: 0 4px; }
.mb-cible-lignes { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.mb-bascule { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.mb-bascule input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.mb-bascule label { color: var(--muted); }
.mb-bascule input:checked + label { color: var(--ink); font-weight: 570; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .mb-compteurs { margin-left: 0; gap: 10px 20px; }
  .mb-item-actions { margin-left: 0; width: 100%; }
  .mb-form-inline .btn { width: 100%; }
}

/* Sélecteur de pays de la recherche de sites de baignade. */
.mb-champ-pays { flex: 0 0 auto; min-width: 170px; }
.mb-champ-pays select {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
/* Le champ de recherche porte l'autocomplétion : il lui faut un repère. */
#mb-site-form .ac { position: relative; }

/* ---------- mot de passe oublié ---------- */
/* Parcours de secours : replié par défaut, il ne doit pas concurrencer
   visuellement le formulaire de connexion. */
.mb-oubli { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.mb-oubli > summary {
  cursor: pointer; font-size: 14.5px; color: var(--accent);
  font-weight: 570; list-style: none;
}
.mb-oubli > summary::-webkit-details-marker { display: none; }
.mb-oubli > summary::before { content: "+ "; font-weight: 700; }
.mb-oubli[open] > summary::before { content: "\2212  "; }
.mb-oubli > summary:hover { color: var(--accent-2); }
.mb-oubli .hint { margin: 10px 0 12px; }
.mb-oubli .mb-form { gap: 12px; }

/* ---------- adresse en attente de confirmation ---------- */
/* Ton d'avertissement, jamais alarmant : rien n'est cassé, il manque un clic. */
.mb-averti { border-left: 4px solid var(--q-suff); margin-bottom: 18px; }
.mb-averti h2 { font-size: 17px; }