/* ============================================================
   Champs obligatoires — convention partagée sur TOUS les formulaires.
   .req-star = bloquant (astérisque rouge).  .req-soft = conseillé (astérisque ambre, title="conseillé").
   ============================================================ */
.req-star,
.req-soft {
  font-weight: 800;
  margin-left: 2px;
  cursor: help;
}
.req-star { color: #e5484d; }
.req-soft { color: #e0901a; }

/* Astérisque OBLIGATOIRE rendue À L'INTÉRIEUR du champ, collée à l'extrême droite.
   On enveloppe l'input/select/textarea dans .req-box (position:relative) → l'astérisque se cale
   sur le bord droit du champ quelle que soit sa hauteur. */
.req-box { position: relative; display: block; }
.req-box > input,
.req-box > select,
.req-box > textarea { width: 100%; }
.req-box > .req-star {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  margin: 0;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}
/* le texte saisi ne doit pas passer sous l'astérisque */
.req-box > input,
.req-box > textarea { padding-right: 26px !important; }
/* selects et dates : décaler à gauche du contrôle natif (flèche / icône calendrier) */
.req-box:has(> select) > .req-star,
.req-box:has(> input[type="date"]) > .req-star { right: 30px; }
/* textarea : ancrer en haut plutôt qu'au centre */
.req-box:has(> textarea) > .req-star { top: 15px; transform: none; }

/* Encadré « champs manquants » réutilisable (pour les formulaires qui n'ont pas déjà leur propre zone d'erreur). */
.form-missing {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 650;
  color: #b42318;
  background: #fdecec;
  border: 1px solid #f3c0c0;
  border-radius: 9px;
  padding: 8px 11px;
}