/*
 * apps/_shared/static/css/composants.css
 * --------------------------------------
 * LE JEU DE COMPOSANTS COMMUN À TOUT MEELTON : bouton, champ, libellé, aide,
 * carte, alerte, indicateur de chargement, champ avec unité, case à cocher.
 * Chargé par le cadre unique (`_cadre_marque.html`) sur toutes les pages de
 * toutes les marques, AVANT la feuille de l'app, qui peut donc préciser.
 *
 * 🚨 POURQUOI (12/10/2026, lot 5 du cadre unique). Les trois outils du Brief
 * (annuaire, baromètre, frais de notaire) recopiaient chacun leur bouton, leur
 * champ et leur carte, avec des écarts de détail (marges, survol, couleur du
 * texte) et une gamme de nuances recopiée trois fois. Une correction faite dans
 * l'un ne valait jamais pour les deux autres.
 *
 * AUCUNE COULEUR EN DUR : tout se lit dans les valeurs de la marque
 * (`<marque>/base.html`), avec un repli neutre pour une marque qui ne les
 * déclare pas :
 *   --color-primary, --color-text-on-primary   le bouton, les titres de carte
 *   --color-primary-light                      les fonds doux (unité, encadré)
 *   --marque-filet                             les bordures des composants
 *   --marque-gris                              le texte secondaire (aide)
 *   --marque-encre                             le texte saisi
 * Seules les alertes « attention » et « erreur » gardent leurs couleurs
 * d'usage (ambre, rouge) : elles disent un état, pas une marque.
 *
 * PRÉFIXE `m-`, celui du socle (`m-nl` pour le bandeau, `m-encart` pour la
 * publicité) : aucun risque de collision avec une classe d'app ou de Tailwind.
 */

/* ── Bouton ── */
.m-bouton {
  display: inline-block; text-align: center; text-decoration: none;
  background: var(--color-primary); color: var(--color-text-on-primary);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  border: none; border-radius: 8px; padding: 0.75rem 1.9rem; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.m-bouton:hover { opacity: 0.92; transform: translateY(-1px); color: var(--color-text-on-primary); text-decoration: none; }
.m-bouton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Le bouton secondaire, à côté d'un bouton principal (« Précédent »). */
.m-bouton--contour {
  background: #fff; color: var(--color-primary);
  border: 1px solid var(--color-primary); padding: 0.7rem 1.6rem; font-size: 0.95rem;
  transition: background-color 0.15s;
}
.m-bouton--contour:hover { background: var(--color-primary-light, #f5f5f5); color: var(--color-primary); opacity: 1; transform: none; }
/* Toute la largeur de son conteneur (le bouton d'un formulaire en colonne). */
.m-bouton--plein { display: block; width: 100%; }

/* ── Champ, libellé, aide ── */
.m-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.35rem; }
.m-champ {
  display: block; width: 100%; font-family: inherit; font-size: 0.95rem;
  color: var(--marque-encre, #1a1a1a); background: #fff;
  padding: 0.65rem 0.85rem; border: 1px solid var(--marque-filet, #e3e3e3); border-radius: 7px; outline: none;
}
.m-champ:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.m-champ--invalide { border-color: #b42318; }
/* Seule la marge du haut : posée sur un <p>, l'aide garde l'espace du
   paragraphe sous elle (les formulaires de l'annuaire en dépendent). */
.m-aide { font-size: 0.78rem; color: var(--marque-gris, #666); margin-top: 0.3rem; }

/* Un champ et son unité (€, €/an, ans), soudés. */
.m-groupe { display: flex; }
.m-groupe .m-champ { border-radius: 7px 0 0 7px; min-width: 0; }
.m-groupe__unite {
  display: flex; align-items: center; padding: 0 0.85rem; white-space: nowrap;
  font-size: 0.95rem; color: var(--marque-encre, #1a1a1a);
  background: var(--color-primary-light, #f5f5f5);
  border: 1px solid var(--marque-filet, #e3e3e3); border-left: none; border-radius: 0 7px 7px 0;
}

/* Une case à cocher ou un bouton radio, avec son libellé. */
.m-case { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.m-case input { accent-color: var(--color-primary); width: 1rem; height: 1rem; margin: 0; }

/* ── Carte ── */
.m-carte {
  background: #fff; border: 1px solid var(--marque-filet, #e3e3e3); border-radius: 10px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 6%, transparent);
  padding: 1.5rem;
}
.m-carte__titre {
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; line-height: 1.3;
  color: var(--color-primary); margin: 0 0 1rem;
}

/* ── Alertes ── Les modificateurs portent les valeurs que les routes posent
   déjà (`ton` : ok, warn, err). */
.m-alerte { border-radius: 8px; padding: 0.85rem 1.1rem; font-size: 0.92rem; margin-bottom: 1.25rem; }
.m-alerte--ok {
  background: var(--color-primary-light, #f5f5f5);
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, #fff); color: var(--color-primary);
}
.m-alerte--warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.m-alerte--err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Indicateur de chargement ── */
.m-sablier {
  width: 2rem; height: 2rem; margin: 0 auto;
  border: 3px solid var(--marque-filet, #e3e3e3); border-top-color: var(--color-primary);
  border-radius: 50%; animation: m-tourne 0.8s linear infinite;
}
@keyframes m-tourne { to { transform: rotate(360deg); } }