/* Choix courts du formulaire de contact : la case native, masquée visuellement, reste focusable et porte
   l'état ; la pastille (ou la tuile illustrée) le montre. Choix retenu : pastille nuit, texte champagne. */
.choice-group {
    min-width: 0;
    border: 0;
}

.choice-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.contact-form .choice {
    position: relative;
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-height: var(--tap-size);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-pill);
    background-color: var(--color-bone);
    font-weight: var(--fw-regular);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice:hover {
    border-color: var(--text-secondary);
}

.choice:has(.choice__input:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.choice:has(.choice__input:checked) {
    border-color: var(--btn-bg);
    background-color: var(--btn-bg);
    color: var(--btn-text);
}

/* Coche dessinée devant le libellé choisi. */
.choice:has(.choice__input:checked) .choice__label::before {
    content: '';
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: var(--space-2);
    background-color: currentColor;
    mask: var(--icon-check) center / contain no-repeat;
    vertical-align: -0.05em;
}

/* Groupe non rempli : encadré rouge, visible même d'un coup d'œil. */
.contact-form .choice-group--invalid {
    padding: var(--space-4);
    border: 2px solid var(--color-error);
    border-radius: var(--radius-md);
    background-color: var(--color-error-bg);
}

/* Une légende se pose sur la bordure du fieldset : flottante, elle rentre dans le cadre. */
.contact-form .choice-group--invalid > legend {
    float: left;
    width: 100%;
}

.contact-form .choice-group--invalid > legend + * {
    clear: both;
}

/* Tuiles illustrées (machine visée) : la photo détourée de la machine au-dessus du libellé. */
.choice-group--tiles .choice-group__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.contact-form .choice-group--tiles .choice {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
    line-height: var(--leading-snug);
}

.choice-group--tiles .choice:has(.choice__input:checked) {
    border-color: var(--text-primary);
    background-color: var(--color-bone);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--text-primary);
}

.choice__art {
    display: flex;
    gap: var(--space-1);
    align-items: end;
    justify-content: center;
    height: 5.5rem;
    transition: translate 0.3s var(--ease-out);
}

.choice__art img {
    width: auto;
    height: 100%;
}

.choice__art .icon-ring {
    align-self: center;
    width: 3.5rem;
    height: 3.5rem;
}

.choice__art .icon-ring::after {
    width: 1.75rem;
    height: 1.75rem;
}

.choice:hover .choice__art,
.choice:has(.choice__input:checked) .choice__art {
    translate: 0 -0.125rem;
}

@media (min-width: 40rem) {
    .choice-group--tiles .choice-group__options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}