/* Mayia — identité visuelle v1.
   Couleurs de marque relevées sur le logo : sauge #B0BBA5, sable #DECFBA, ivoire #F9F7F3.
   Ces trois-là sont décoratives (sauge sur ivoire = 1,87:1). Les variantes -fort en dessous
   sont les versions assombries utilisables pour du texte/des bordures : toutes ≥ 4,5:1. */

:root {
  --sauge: #B0BBA5;
  --sable: #DECFBA;

  --fond: #F9F7F3;
  --surface: #FFFDFA;
  --bordure: #E4DFD5;

  --texte: #2E3229;
  --texte-doux: #5B6152;

  --accent: #5F7052;
  --accent-contraste: #FFFFFF;
  --accent-doux: #E8EDE3;

  --terracotta: #9A5A3C;
  --terracotta-doux: #F4E7DE;
  /* Variante pour du TEXTE terracotta sur fond --terracotta-doux : la couleur pleine n'y tient
     que 4,44:1 (mesuré), sous le seuil AA pour du petit texte comme la pastille « Nouveau ». */
  --terracotta-texte: #915337;

  --erreur: #A63D2F;

  --rayon: 12px;
  --rayon-sm: 8px;
  --ombre: 0 1px 2px rgba(46, 50, 41, .06), 0 4px 16px rgba(46, 50, 41, .05);

  --police-titre: "Fraunces", "Lora", Georgia, serif;
  --police-corps: "Inter", "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pas: 8px;
  --largeur-max: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1E211C;
    --surface: #272B24;
    --bordure: #3A3F35;

    --texte: #EDEAE3;
    --texte-doux: #B9BEB2;

    --accent: #B0BBA5;
    --accent-contraste: #1E211C;
    --accent-doux: #313629;

    --terracotta: #D89670;
    --terracotta-doux: #3A2E26;
    --terracotta-texte: #D89670; /* déjà 5,33:1 sur le fond sombre : rien à corriger */

    --erreur: #E88C7D;

    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

/* `hidden` doit VRAIMENT cacher. La règle `[hidden] { display: none }` vient de la feuille du
   navigateur ; n'importe quelle règle d'auteur qui pose un `display` (ex. `form { display: grid }`
   sur la page de connexion) la bat — l'origine auteur l'emporte toujours sur l'origine UA, quelle
   que soit la spécificité. Sans ce rappel, l'attribut `hidden` était silencieusement sans effet :
   la bascule « J'ai déjà un compte » / « J'ai un code » changeait bien les attributs mais les deux
   formulaires restaient affichés l'un sous l'autre (bug remonté le 2026-08-10).
   Le `!important` est ici volontaire : c'est la seule façon de garantir qu'aucun `display`
   d'auteur, présent ou futur, ne ressuscite un élément marqué caché. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-corps);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 calc(var(--pas) * 1.5);
}

h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
h3 { font-size: 1.1rem; }

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

button, .bouton {
  font: inherit;
  font-weight: 500;
  padding: calc(var(--pas) * 1.25) calc(var(--pas) * 2);
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  background: var(--accent);
  color: var(--accent-contraste);
  cursor: pointer;
  min-height: 44px; /* cible tactile confortable sur mobile */
}

button.secondaire {
  background: transparent;
  border-color: var(--bordure);
  color: var(--texte);
}

button:hover { filter: brightness(.95); }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

input, textarea, select {
  font: inherit;
  width: 100%;
  padding: calc(var(--pas) * 1.25);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: var(--surface);
  color: var(--texte);
  min-height: 44px;
}

label {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  color: var(--texte-doux);
  margin-bottom: calc(var(--pas) * .5);
}

/* Champ mot de passe avec bouton afficher/masquer.
   Le bouton se superpose à droite de l'input ; l'input réserve la place via padding-right. */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 5.5rem; }
.bascule-mdp {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  min-height: 0;
  padding: 0 calc(var(--pas) * 1.25);
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: .85rem;
  font-weight: 500;
}
.bascule-mdp:hover { filter: none; text-decoration: underline; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: calc(var(--pas) * 2.5);
  box-shadow: var(--ombre);
}

.enveloppe {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: calc(var(--pas) * 3) calc(var(--pas) * 2);
}

.pile { display: grid; gap: calc(var(--pas) * 2); }

.erreur {
  color: var(--erreur);
  font-size: .9rem;
  min-height: 1.2em;
}