/* ============================================================
   ui.css — primitives partagées des maquettes Mystic Luna
   Mobile-first strict (UX-03). Toute variante passe par une classe,
   jamais par du style ad hoc : ces primitives préfigurent les
   composants Blade de M01.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ml-font-texte);
  font-size: var(--ml-t-base);
  line-height: 1.65;
  color: var(--ml-encre);
  background: var(--ml-creme);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ml-font-titre);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--ml-e-4);
  letter-spacing: 0.01em;
}
h1 { font-size: var(--ml-t-3xl); }
h2 { font-size: var(--ml-t-2xl); }
h3 { font-size: var(--ml-t-xl); }
p  { margin: 0 0 var(--ml-e-4); }
/* Couleur de lien par défaut, en spécificité ZÉRO (`:where`). Toutes les règles
   de couleur de lien du fichier sont écrites ainsi : l'ordre d'apparition suffit
   à les départager, et n'importe quelle classe de composant (`.ml-btn`…) les
   emporte sans avoir à surenchérir en spécificité. */
:where(a) { color: var(--ml-rose-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }

@media (min-width: 768px) {
  h1 { font-size: var(--ml-t-4xl); }
  h2 { font-size: var(--ml-t-3xl); }
}

/* --- Mise en page --------------------------------------------------- */
.ml-conteneur {
  width: 100%;
  max-width: var(--ml-lg-contenu);
  margin-inline: auto;
  padding-inline: var(--ml-e-4);
}
@media (min-width: 768px) { .ml-conteneur { padding-inline: var(--ml-e-6); } }

.ml-section { padding-block: var(--ml-e-7); }
.ml-section--ivoire { background: var(--ml-ivoire); }
.ml-section--rose   { background: var(--ml-rose-050); }
@media (min-width: 768px) { .ml-section { padding-block: var(--ml-e-8); } }

.ml-titre-section { text-align: center; margin-bottom: var(--ml-e-6); }
.ml-titre-section p { color: var(--ml-taupe); max-width: 60ch; margin-inline: auto; }

.ml-surtitre {
  font-family: var(--ml-font-texte);
  font-size: var(--ml-t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ml-rose-700);
  margin-bottom: var(--ml-e-2);
}

.ml-grille { display: grid; gap: var(--ml-e-5); }
.ml-grille--2 { grid-template-columns: 1fr; }
.ml-grille--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .ml-grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .ml-grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ml-grille--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Boutons (primitive à variantes) -------------------------------- */
.ml-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ml-e-2);
  min-height: 48px;                      /* cible tactile confortable (UX-03) */
  padding: var(--ml-e-3) var(--ml-e-5);
  border: 1px solid transparent;
  border-radius: var(--ml-r-pill);
  font-family: var(--ml-font-texte);
  font-size: var(--ml-t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ml-transition), border-color var(--ml-transition), transform var(--ml-transition);
}
.ml-btn:active { transform: translateY(1px); }
.ml-btn:focus-visible { outline: 3px solid var(--ml-lilas-400); outline-offset: 2px; }

.ml-btn--primaire { background: var(--ml-rose-700); color: var(--ml-blanc); }
.ml-btn--primaire:hover { background: var(--ml-rose-800); }

.ml-btn--secondaire { background: transparent; color: var(--ml-rose-800); border-color: var(--ml-rose-300); }
.ml-btn--secondaire:hover { background: var(--ml-rose-100); }

.ml-btn--lilas { background: var(--ml-lilas-600); color: var(--ml-blanc); }
.ml-btn--lilas:hover { background: var(--ml-lilas-700); }

.ml-btn--sur-image { background: var(--ml-blanc); color: var(--ml-rose-900); }
.ml-btn--sur-image:hover { background: var(--ml-rose-050); }

/* Bouton posé sur une photo : un voile sombre garantit la lisibilité du texte
   blanc, même si la photo fournie est très lumineuse. */
.ml-btn--contour-clair { background: rgba(58, 50, 56, .34); color: var(--ml-blanc);
  border-color: rgba(255, 255, 255, .65); backdrop-filter: blur(2px); }
.ml-btn--contour-clair:hover { background: rgba(58, 50, 56, .5); border-color: var(--ml-blanc); }

.ml-btn--bloc { width: 100%; }
.ml-btn[aria-disabled="true"] { background: var(--ml-complet-bg); color: var(--ml-complet-fg); pointer-events: none; }

/* --- Badges d'état de disponibilité (EVT-05) ------------------------ */
.ml-badge {
  display: inline-flex; align-items: center; gap: var(--ml-e-1);
  padding: 3px var(--ml-e-3);
  border-radius: var(--ml-r-pill);
  font-size: var(--ml-t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ml-badge--dispo   { background: var(--ml-dispo-bg);   color: var(--ml-dispo-fg); }
.ml-badge--bientot { background: var(--ml-bientot-bg); color: var(--ml-bientot-fg); }
.ml-badge--complet { background: var(--ml-complet-bg); color: var(--ml-complet-fg); }
.ml-badge--attente { background: var(--ml-attente-bg); color: var(--ml-attente-fg); }
.ml-badge--externe { background: var(--ml-lilas-100);  color: var(--ml-lilas-700); }

/* --- Cartes --------------------------------------------------------- */
.ml-carte {
  background: var(--ml-blanc);
  border: 1px solid var(--ml-bord);
  border-radius: var(--ml-r-md);
  box-shadow: var(--ml-ombre-douce);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--ml-transition), transform var(--ml-transition);
}
.ml-carte:hover { box-shadow: var(--ml-ombre-carte); transform: translateY(-2px); }
.ml-carte__media { aspect-ratio: 3 / 2; background: var(--ml-rose-100); }
.ml-carte__corps { padding: var(--ml-e-4); display: flex; flex-direction: column; flex: 1; gap: var(--ml-e-2); }
.ml-carte__date {
  font-size: var(--ml-t-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ml-rose-700);
}
.ml-carte__titre { font-family: var(--ml-font-titre); font-size: var(--ml-t-lg); margin: 0; }
.ml-carte__meta { font-size: var(--ml-t-sm); color: var(--ml-taupe); margin: 0; }
.ml-carte__pied {
  margin-top: auto; padding-top: var(--ml-e-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ml-e-3);
  border-top: 1px solid var(--ml-bord);
}
.ml-carte__prix { font-family: var(--ml-font-titre); font-size: var(--ml-t-lg); color: var(--ml-encre); }

/* --- Image d'attente (photos réelles à venir, CDC §7.1) ------------- */
.ml-photo-attente {
  background:
    linear-gradient(135deg, var(--ml-rose-100) 0%, var(--ml-lilas-100) 50%, var(--ml-sauge-100) 100%);
  display: grid; place-items: center;
  color: var(--ml-taupe);
  font-size: var(--ml-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--ml-e-3);
  overflow: hidden;
}
/* En fond de bandeau : le libellé descend en bas pour ne pas passer sous le titre. */
.ml-photo-attente--bas { align-items: end; }
/* Petit format (portrait rond, vignette) : libellé discret, jamais tronqué au milieu d'un mot. */
.ml-photo-attente--mini { font-size: 9px; letter-spacing: 0.04em; padding: 2px; }

/* --- En-tête / navigation (UX-01 : 3 entrées) ----------------------- */
.ml-entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 244, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ml-bord);
}
.ml-entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ml-e-4);
  min-height: 68px;
}
.ml-logo { display: flex; align-items: center; gap: var(--ml-e-3); text-decoration: none; color: inherit; }
.ml-logo img { width: 44px; height: 44px; border-radius: var(--ml-r-sm); flex: none; }
.ml-logo__texte { font-family: var(--ml-font-titre); font-size: var(--ml-t-lg); line-height: 1.1; white-space: nowrap; }
.ml-logo__texte span { display: block; font-family: var(--ml-font-texte); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ml-taupe); }

.ml-nav { display: none; gap: var(--ml-e-4); align-items: center; }
/* `:where()` = spécificité zéro : un `.ml-btn` placé dans la navigation conserve
   sa propre couleur. Écrites en `.ml-nav a` (0,1,1), ces règles rendaient le
   texte du bouton primaire encre sur rose, soit 2.54:1 — illisible. */
:where(.ml-nav a) { font-size: var(--ml-t-sm); font-weight: 600; color: var(--ml-encre); text-decoration: none; }
:where(.ml-nav a:hover, .ml-nav a[aria-current="page"]) { color: var(--ml-rose-700); }

.ml-burger {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  background: transparent; border: 1px solid var(--ml-bord); border-radius: var(--ml-r-sm);
  cursor: pointer;
}

/* Bascule desktop — doit rester APRÈS .ml-nav et .ml-burger,
   sinon l'ordre source annule le masquage du burger. */
@media (min-width: 900px) {
  .ml-nav { display: flex; }
  .ml-burger { display: none; }
}

/* --- Tiroir de navigation mobile (6 entrées, UX-01 revu) ----------- */
.ml-tiroir { border-top: 1px solid var(--ml-bord); background: var(--ml-creme); }
.ml-tiroir__nav { display: flex; flex-direction: column; }
.ml-tiroir__nav a {
  display: block; padding: var(--ml-e-4);
  border-bottom: 1px solid var(--ml-bord);
  font-size: var(--ml-t-base); font-weight: 600; text-decoration: none;
  min-height: 52px;                        /* cible tactile confortable */
}
:where(.ml-tiroir__nav a) { color: var(--ml-encre); }
:where(.ml-tiroir__nav a[aria-current="page"]) { color: var(--ml-rose-700); background: var(--ml-rose-050); }
.ml-tiroir__nav a:last-child { border-bottom: 0; }
@media (min-width: 900px) { .ml-tiroir { display: none !important; } }

/* --- Barre d'action mobile fixe (UX-02 : CTA toujours visibles) ----- */
.ml-barre-action {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; gap: var(--ml-e-3);
  padding: var(--ml-e-3) var(--ml-e-4);
  padding-bottom: max(var(--ml-e-3), env(safe-area-inset-bottom));
  background: var(--ml-blanc);
  border-top: 1px solid var(--ml-bord);
  box-shadow: 0 -4px 16px rgba(94, 63, 75, 0.08);
}
/* Les libellés doivent tenir sur une ligne, même sur un petit écran. */
.ml-barre-action .ml-btn {
  flex: 1; min-width: 0;
  padding-inline: var(--ml-e-3);
  font-size: var(--ml-t-xs);
  white-space: nowrap;
}
@media (min-width: 900px) { .ml-barre-action { display: none; } }
.ml-barre-action--cachee { transform: translateY(110%); pointer-events: none; }
.ml-barre-action { transition: transform 220ms ease; }
.ml-marge-barre { height: 88px; }
@media (min-width: 900px) { .ml-marge-barre { display: none; } }

/* --- Formulaires ---------------------------------------------------- */
.ml-champ { margin-bottom: var(--ml-e-4); }
.ml-champ label { display: block; font-size: var(--ml-t-sm); font-weight: 600; margin-bottom: var(--ml-e-2); }
.ml-champ .ml-aide { font-weight: 400; color: var(--ml-taupe); font-size: var(--ml-t-xs); }
.ml-champ input, .ml-champ select, .ml-champ textarea {
  width: 100%; min-height: 48px;
  padding: var(--ml-e-3);
  font-family: inherit; font-size: var(--ml-t-base); color: var(--ml-encre);
  background: var(--ml-blanc);
  border: 1px solid var(--ml-bord); border-radius: var(--ml-r-sm);
}
.ml-champ input:focus, .ml-champ select:focus, .ml-champ textarea:focus {
  outline: 3px solid var(--ml-lilas-400); outline-offset: 1px; border-color: var(--ml-lilas-400);
}
.ml-case { display: flex; gap: var(--ml-e-3); align-items: flex-start; font-size: var(--ml-t-sm); }
.ml-case input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 2px; }

/* --- Encadré d'information ----------------------------------------- */
.ml-note {
  padding: var(--ml-e-4);
  border-left: 3px solid var(--ml-lilas-400);
  background: var(--ml-lilas-100);
  border-radius: var(--ml-r-sm);
  font-size: var(--ml-t-sm);
}
.ml-note--sauge { border-color: var(--ml-sauge-400); background: var(--ml-sauge-100); }
.ml-note--rose  { border-color: var(--ml-rose-300);  background: var(--ml-rose-100); }
.ml-note p:last-child { margin-bottom: 0; }

/* --- Pied de page --------------------------------------------------- */
.ml-pied { background: var(--ml-rose-900); color: var(--ml-rose-100); padding-block: var(--ml-e-7) var(--ml-e-5); }
.ml-pied h4 { font-family: var(--ml-font-texte); font-size: var(--ml-t-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ml-rose-300); margin-bottom: var(--ml-e-3); }
:where(.ml-pied a) { color: var(--ml-rose-100); }
.ml-pied__bas { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--ml-e-6);
  padding-top: var(--ml-e-4); font-size: var(--ml-t-xs); color: var(--ml-rose-300); }

/* --- Bandeau « maquette » ------------------------------------------ */
.ml-bandeau-maquette {
  background: var(--ml-lilas-700); color: var(--ml-blanc);
  font-size: var(--ml-t-xs); text-align: center; padding: var(--ml-e-2) var(--ml-e-4);
}
.ml-bandeau-maquette a { color: var(--ml-blanc); }

.ml-visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}