/**
 * Socle de style — volontairement neutre.
 *
 * ⚠️ Ce n'est PAS une direction artistique. C'est un gris décent qui permet
 * de travailler le fonctionnel sans que rien ne pique les yeux. Les couleurs,
 * la typographie et l'identité de MyLibreEntreprise restent à définir : tout
 * passe par les variables ci-dessous, il n'y a qu'elles à changer.
 */

:root {
  --fond: #fbfbf9;
  --carte: #ffffff;
  --encre: #1c1c1a;
  --encre-douce: #5f5f58;
  --trait: #e4e4de;
  --accent: #2f6d55;
  --accent-doux: #eaf2ee;
  --danger: #a63d2f;
  --rayon: 10px;
  --texte-h1: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --texte-h2: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16171a;
    --carte: #1e1f23;
    --encre: #ededea;
    --encre-douce: #a0a09a;
    --trait: #2e3036;
    --accent: #6fbd9a;
    --accent-doux: #1f2c27;
    --danger: #e08373;
  }
}

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

/**
 * `hidden` doit gagner contre nos `display: flex` et `display: grid`.
 *
 * Sans cette règle, l'attribut `hidden` du HTML ne fait plus rien dès qu'une
 * classe pose un display : la feuille du navigateur perd contre la nôtre. Dans
 * l'espace membre, les trois étapes du parcours s'affichaient d'un coup —
 * formulaire d'email, saisie du code et tableau de bord empilés.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: 2.5rem 4rem;
}

h1 {
  font-size: var(--texte-h1);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

h2 {
  font-size: var(--texte-h2);
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--encre-douce);
}

.lede {
  color: var(--encre-douce);
  font-size: 1.05rem;
}

.aide {
  color: var(--encre-douce);
  font-size: 0.875rem;
}

.center {
  text-align: center;
}

.pile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ── Formulaires ───────────────────────────────────────────── */

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.champ label {
  font-size: 0.875rem;
  font-weight: 600;
}

.champ input,
.champ textarea,
.champ select {
  font: inherit;
  color: inherit;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.6rem 0.75rem;
  width: 100%;
  max-width: 26rem;
}

.champ input:focus-visible,
.champ textarea:focus-visible,
.champ select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.champ-code input {
  max-width: 9rem;
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
}

.facultatif {
  font-weight: 400;
  color: var(--encre-douce);
}

button {
  font: inherit;
  cursor: pointer;
}

.b-envoi,
.b-primaire {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
}

.b-secondaire {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
}

.b-lien {
  background: none;
  border: 0;
  padding: 0;
  color: var(--encre-douce);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.b-primaire.fait {
  background: var(--accent-doux);
  color: var(--accent);
}

/* ── Formulaire de contact ─────────────────────────────────── */

.lead {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.5rem;
}

.lead-champs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.lead-champs .champ input {
  max-width: none;
}

.lead-rappel {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
}

.lead-mention {
  font-size: 0.8rem;
  color: var(--encre-douce);
}

.lead-etat {
  font-size: 0.9rem;
  font-weight: 600;
}

.lead-etat.ok {
  color: var(--accent);
}

.lead-etat.erreur {
  color: var(--danger);
}