/* ==========================================================================
   CHAMPS DE FORMULAIRE
   ==========================================================================
   Texte, zone de texte, liste de choix, case à cocher.
   États : normal, focus, erreur, désactivé.

   Structure attendue :
     <div class="groupe-champ">
       <label class="libelle" for="x">Titre</label>
       <input class="champ" id="x">
       <p class="aide">Une phrase d'explication.</p>
     </div>
   ========================================================================== */

.groupe-champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.libelle {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

/* Marque les champs facultatifs plutôt que les obligatoires : dans cette
   plateforme, la plupart des champs sont obligatoires. */
.libelle__facultatif {
  font-weight: var(--weight-normal);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Champ de saisie
   -------------------------------------------------------------------------- */
.champ {
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-base);
  transition: border-color var(--transition), background-color var(--transition);
}

.champ::placeholder {
  color: var(--text-subtle);
}

.champ:hover:not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--text-subtle);
}

/* Le focus assombrit la bordure en plus de l'anneau défini dans base.css :
   le champ actif reste identifiable même pour une personne qui distingue
   mal les couleurs. */
.champ:focus {
  border-color: var(--accent);
  outline: var(--focus-epaisseur) solid var(--accent);
  outline-offset: var(--focus-decalage);
}

.champ:disabled {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--text-subtle);
  cursor: not-allowed;
}

/* Erreur : bordure rouge. Le message est toujours écrit en plus de la
   couleur, car la couleur seule n'est pas une information accessible. */
.champ[aria-invalid="true"] {
  border-color: var(--danger);
}

.champ[aria-invalid="true"]:focus {
  outline-color: var(--danger);
}

/* Zone de texte (commentaires, descriptions). */
.champ--zone {
  min-height: 120px;
  line-height: var(--leading-text);
  /* L'utilisateur peut agrandir en hauteur, pas en largeur (ça casserait
     la mise en page). */
  resize: vertical;
}

/* Liste de choix. La petite flèche est dessinée en CSS pur, sans image. */
.champ--choix {
  appearance: none;
  padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Texte d'aide et message d'erreur
   -------------------------------------------------------------------------- */
.aide {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.erreur-champ {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--danger);
}

.erreur-champ .icone {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Case à cocher
   -------------------------------------------------------------------------- */
.case {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--cible-tactile);
  /* Toute la ligne est cliquable, pas seulement le petit carré. */
  cursor: pointer;
  padding: var(--space-2) 0;
}

.case__boite {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.case__texte {
  font-size: var(--text-sm);
}

.case input:disabled,
.case input:disabled + .case__texte {
  color: var(--text-subtle);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Bandeau d'erreur en tête de formulaire
   --------------------------------------------------------------------------
   Utilisé quand l'erreur ne porte pas sur un champ précis (« adresse ou mot
   de passe incorrect », par exemple).
   -------------------------------------------------------------------------- */
.bandeau {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.bandeau .icone {
  margin-top: 1px;
}

.bandeau--erreur {
  background-color: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.bandeau--succes {
  background-color: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

.bandeau--info {
  background-color: var(--info-soft);
  border-color: var(--info);
  color: var(--info);
}

.bandeau--attention {
  background-color: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
}