/* ================================
   Carte / Container
   ================================ */
.mh-card{
  max-width: 860px;
  margin: 24px auto;
  background: #0b0f1a;
  color: #eef2ff;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid #1e293b;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* ================================
   Header avec avatar (mobile-first)
   ================================ */
.mh-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.mh-avatar-block{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.mh-avatar-preview{
  width:128px;
  height:128px;
  object-fit:cover;
  border-radius:999px;
  border:3px solid #1f3b76;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  background:#0f172a;
}

.mh-avatar-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mh-inline{ display:flex; gap:8px; align-items:center; font-size:13px; color:#cbd5e1; }

/* ================================
   Titre
   ================================ */
.mh-title{
  text-align:center;
  font-size: 24px;
  margin: 0;
  letter-spacing: .4px;
  font-weight: 700;
}

/* ================================
   Grille
   ================================ */
.mh-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mh-field{ display:flex; flex-direction:column; }
.mh-col-2{ grid-column: 1/ -1; }

/* ================================
   Labels & Aide
   ================================ */
.mh-field label{
  font-size: 14px;
  margin-bottom: 6px;
  color: #a5b4fc;
}
.mh-req{ color:#fca5a5; }
.mh-help{
  color:#94a3b8; font-size:12px; margin-top:6px;
}

/* ================================
   Inputs
   ================================ */
.mh-field input[type="text"],
.mh-field input[type="number"],
.mh-field input[list],
.mh-field select,
.mh-field textarea{
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.mh-field input::placeholder,
.mh-field textarea::placeholder{ color:#8aa0bd; }

.mh-field input:focus,
.mh-field select:focus,
.mh-field textarea:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}

/* ================================
   Badge Génération
   ================================ */
.mh-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  min-width: 140px;
  text-align:center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #334155;
  background:#111827;
  color:#e5e7eb;
  font-weight:600;
}
.mh-badge-empty{ opacity:.6; }
.mh-badge-alpha{ background:#1f2937; border-color:#7c3aed; color:#ede9fe; }
.mh-badge-genz { background:#111827; border-color:#22d3ee; color:#cffafe; }
.mh-badge-mill { background:#0f172a; border-color:#38bdf8; color:#e0f2fe; }
.mh-badge-genx { background:#0b1220; border-color:#f59e0b; color:#fffbeb; }

/* ================================
   Bouton & messages
   ================================ */
.mh-actions{ margin-top: 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.mh-btn{
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight:700;
  cursor:pointer;
}
.mh-btn:hover{ filter:brightness(1.08); }

.mh-result{ min-height: 22px; }
.mh-result .mh-ok{ color:#86efac; }
.mh-result .mh-ko{ color:#fca5a5; }

/* Bouton mini */
.mh-btn-mini{ padding:8px 12px; font-size:13px; border-radius:8px }
.mh-btn-ghost{ background:transparent; border:1px solid #475569; color:#e2e8f0 }

/* Modal recadrage */
.mh-crop-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.mh-crop-box{
  background:#0b0f1a; border:1px solid #1e293b; border-radius:12px;
  padding:14px; max-width:90vw; max-height:90vh;
}
.mh-crop-box img{ max-width:80vw; max-height:70vh; display:block }
.mh-crop-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px }


/* ================================
   Responsive
   ================================ */
@media (max-width: 800px){
  .mh-grid{ grid-template-columns: 1fr; }
  .mh-title{ font-size: 20px; }
  .mh-avatar-preview{ width:96px; height:96px; }
}

/* 1) Focus clair au clavier, sans affecter la souris */
:where(button, [type="button"], [type="submit"], a, input, select, textarea):focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

/* 2) Désactivation des animations si l’utilisateur l’a demandé */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 3) État disabled explicite pour le bouton */
.mh-btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* 4) Champs plus « tap-friendly » sur mobile (hauteur mini) */
input[type="text"], input[type="number"], input[list], input[type="date"], select, textarea {
  min-height: 44px;
}

/* 5) Petits écrans très étroits (≲360px) */
@media (max-width: 380px) {
  .mh-card { padding: 16px; }
  .mh-avatar-preview { width: 84px; height: 84px; }
}

/* 6) Safe areas iOS (pour futurs boutons bas collants si tu en mets) */
.mh-safe-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}