/* Styles propres au formulaire d'inscription */
.intro-formulaire { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
@media (min-width: 48rem) { .intro-formulaire { grid-template-columns: 3fr 1fr; } }

.formulaire { max-width: 40rem; }
.formulaire *:focus { outline: none; }

.legende-obligatoire { color: #f0a04b; font-weight: 600; }
.asterisque { color: #f0a04b; }

.champ { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; }
.champ label, .libelle { font-weight: 600; }
.champ input, .champ select, .champ textarea {
  font: inherit; padding: .5rem .75rem; border: 2px solid #5b6b63; border-radius: 4px; background: #ffffff;
}
.aide { font-size: .9rem; color: #4a5560; }

.champ-erreur { border-color: #c81e1e !important; }
.message-erreur { border: 2px solid #c81e1e; color: #9b1c1c; background: #fdf2f2; padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }

.case-perso { display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.case-visuelle { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid #5b6b63; border-radius: 3px; background: #ffffff; }
.case-perso[data-checked="true"] .case-visuelle { background: #1f5f3f; border-color: #1f5f3f; box-shadow: inset 0 0 0 3px #ffffff; }

.confirmation { margin-top: 1rem; font-weight: 600; color: #14402a; }