/* ==================================================
   PARTICIPANTS — saisie au moment de la réservation

   Le bloc s'insère dans le tunnel WooCommerce, entre les
   coordonnées de facturation et le récapitulatif.
================================================== */

.virages-participants {
    margin: 32px 0;
}

.virages-participants h3 {
    font-family: var(--v-font-titre);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    margin: 0 0 8px;
}

.virages-participants__intro {
    margin: 0 0 20px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-meta);
}

.virages-participants__session {
    margin-bottom: 24px;
}

.virages-participants__session h4 {
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    margin: 0;
}

.virages-participants__dates {
    margin: 2px 0 12px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* Une place = un encadré. Le repère visuel compte : réserver trois
   places affiche trois blocs identiques, il faut voir où l'un finit
   et où le suivant commence. */
.virages-participant {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    margin: 0 0 12px;
    padding: 20px 22px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.virages-participant legend {
    width: 100%;
    padding: 0;
    margin-bottom: 12px;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.virages-participant__champ {
    flex: 1 1 100%;
    margin: 0 0 14px;
}

.virages-participant__champ--quart  { flex-basis: calc(25% - 14px); }
.virages-participant__champ--moitie { flex-basis: calc(50% - 9px); }

.virages-participant__champ label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-corps);
}

.virages-participant__champ input,
.virages-participant__champ select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-sm);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.virages-participant__champ input:focus,
.virages-participant__champ select:focus {
    outline: 2px solid var(--v-turquoise-400);
    outline-offset: 1px;
}

.virages-participant__aide {
    display: block;
    margin-top: 5px;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    color: var(--v-texte-meta);
}

/* Le choix d'un collaborateur, pour un compte d'organisation : au-dessus
   des champs qu'il remplit, sur toute la largeur de l'encadré. */
.virages-participant__choix {
    flex: 1 1 100%;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--v-radius-md);
    background: var(--v-turquoise-100);
}

.virages-participant__choix label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-corps);
}

.virages-participant__choix select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-sm);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

@media (max-width: 767px) {
    .virages-participant {
        padding: 16px 18px;
    }
    .virages-participant__champ--quart,
    .virages-participant__champ--moitie {
        flex-basis: 100%;
    }
}