/* Boutons */
.mh-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:.7rem 1rem;font-weight:600;cursor:pointer;background:linear-gradient(90deg,#3b82f6,#7c3aed);color:#fff;transition:opacity .15s}
.mh-btn:hover{opacity:.9}
.mh-btn-ghost{background:#1f2937;color:#e5e7eb}
.mh-btn-danger{background:#ef4444;color:#fff}
.mh-btn.mh-block{display:block;width:100%}

/* Modal container */
.mh-auth-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:9999}
.mh-auth-modal.is-open{opacity:1;visibility:visible}

/* Sheet (mobile fullscreen) */
.mh-auth-sheet{background:#0f172a;color:#e5e7eb;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:20px 18px 24px;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(20px);transition:transform .2s}
.mh-auth-modal.is-open .mh-auth-sheet{transform:translateY(0)}
@media(min-width:768px){
  .mh-auth-modal{align-items:center}
  .mh-auth-sheet{border-radius:20px;padding:28px 26px}
}

/* Contrainte de hauteur + scroll interne de la feuille */
.mh-auth-modal{position:fixed;inset:0;display:grid;place-items:center;padding:16px;z-index:9999}
.mh-auth-sheet{max-height:92vh;overflow:auto;width:min(820px,96vw)}
body.mh-auth-no-scroll{overflow:hidden}

/* Close */
.mh-auth-close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer}

/* Tabs */
.mh-tabs{display:flex;gap:8px;margin:8px 0 16px}
.mh-tab{flex:1;border:1px solid #334155;background:#0b1220;color:#93c5fd;border-radius:10px;padding:.6rem;cursor:pointer}
.mh-tab.is-active{background:linear-gradient(90deg,#3b82f6,#7c3aed);border-color:transparent;color:#fff}
.mh-tabpanel{display:none}
.mh-tabpanel.is-active{display:block}

/* Grille simple 2 colonnes (desktop) */
.mh-grid{display:grid;gap:12px}
.mh-grid-2{grid-template-columns:1fr}
@media(min-width:768px){ .mh-grid-2{grid-template-columns:1fr 1fr} }

/* Fields */
.mh-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.mh-field span{font-size:.9rem;color:#93c5fd}
.mh-field input,.mh-field select{background:#0b1220;border:1px solid #334155;border-radius:12px;padding:.7rem;color:#e5e7eb;outline:none}
.mh-field input:focus,.mh-field select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.2)}

/* Messages */
.mh-msg{margin-top:10px;font-size:.95rem}
.mh-msg.ok{color:#34d399}
.mh-msg.err{color:#f87171}
.mh-auth-muted{color:#9ca3af;font-size:.9rem}

/* Buttons row */
.mh-auth-actions{display:flex;gap:10px;margin-top:12px}

/* Wrapper for header buttons */
.mh-auth-buttons{display:flex;gap:10px}

/* ===== Champ mot de passe (sans toggle) ===== */
.mh-password{position:relative}
.mh-password input{width:100%;padding-right:.7rem}

/* Accessibilité visuelle des états de champ (live checks) */
.is-valid{border-color:#22c55e !important}
.is-invalid{border-color:#ef4444 !important}
.mh-field-status{font-size:.85rem;margin-top:4px}
.mh-field-status.ok{color:#22c55e}
.mh-field-status.err{color:#ef4444}

/* Carte centres d’intérêt (laisse le style du plugin dédié gérer le reste) */
#mh-int-picker{margin-top:6px}

/* ===== Interests (guest picker rendu dans le modal) =====
   Normalisation et hotfix anti-débordement */
.mh-int-guest{border:1px solid #24324f;border-radius:12px;background:#0b1220;padding:12px}
.mh-int-guest .mh-int-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}
.mh-int-guest .mh-int-header h3{margin:0;font-size:18px;font-weight:800}

.mh-int-guest .mh-int-section{border:1px solid #24324f;border-radius:10px;background:#121a2f;margin-bottom:10px;overflow:hidden}
.mh-int-guest .mh-int-section__head{display:flex;align-items:center;gap:10px;padding:12px 14px;user-select:none;cursor:pointer}
.mh-int-guest .mh-int-section__head:hover{background:#16213c}
.mh-int-guest .mh-int-parent{display:flex;align-items:center;gap:10px}
.mh-int-guest .mh-int-section__title{font-weight:700}
.mh-int-guest .mh-int-arrow{margin-left:auto;opacity:.8}
.mh-int-guest .mh-int-body{display:none;padding:12px}
.mh-int-guest .mh-int-section.is-open .mh-int-body{display:block}

/* Grille fluide : évite les débordements de libellés longs */
.mh-int-guest .mh-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

/* Chips */
.mh-int-guest .mh-chip{
  display:flex;align-items:flex-start;gap:10px;
  background:#17233f;border:1px solid #24324f;border-radius:10px;padding:10px 12px;
  line-height:1.25;min-height:44px;
  word-break:break-word;overflow-wrap:anywhere;
}
.mh-int-guest .mh-chip input{margin-top:2px;transform:scale(1.1)}
.mh-int-guest .mh-chip.is-checked,
.mh-int-guest .mh-chip:has(input:checked){background:#243b6b;border-color:#6366f1}

/* --- Anti-débordement des libellés de chips (fix fort) --- */
.mh-int-guest .mh-chips > * { min-width: 0; } /* permet au contenu de rétrécir dans la grille */

.mh-int-guest .mh-chip,
.mh-int-guest .mh-chip *,
.mh-int-card  .mh-chip,
.mh-int-card  .mh-chip * {
  white-space: normal !important;   /* enlève tout nowrap hérité */
  overflow: visible !important;      /* enlève ellipsis / hidden */
  text-overflow: clip !important;    /* pas d'ellipse */
  word-break: break-word;            /* casse les mots longs si besoin */
  overflow-wrap: anywhere;           /* autorise la casse “partout” */
  hyphens: auto;                     /* permet une césure propre quand dispo */
}

/* ===== Amélioration visuelle du bouton afficher/masquer mot de passe ===== */
.mh-password {
  position: relative;
}

.mh-password input {
  width: 100%;
  padding-right: 42px; /* espace pour le bouton */
}

.mh-password__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.mh-password__toggle:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #fff;
}

.mh-password__toggle svg {
  width: 20px;
  height: 20px;
}

/* Icône œil ouvert */
.mh-password__toggle::before {
  content: '👁️‍🗨️';
  font-size: 18px;
  line-height: 1;
}

/* Icône œil fermé */
.mh-password__toggle.is-on::before {
  content: '👁️‍🗨️';
}