/* ==========================================================
   PRECI-DIP INSIDE — INSCRIPTIONS
   Design system du formulaire d'inscription.
   Les steps, conditions, accompagnants, choix et créneaux
   restent pilotés par le markup du Form Builder.
   ========================================================== */

:root {
    --registration-width: 1102px;
    --registration-radius: 30px;
    --registration-padding-x: 100px;
    --registration-padding-top: 100px;
    --registration-padding-bottom: 80px;
    --registration-content-width: 902px;
    --registration-field-height: 50px;
    --registration-control-radius: 8px;
    --registration-button-height: var(--button-height);
    --registration-shadow: 0 0 200px rgba(38, 26, 11, 0.10);
    --registration-line-field: 1.42;
    --registration-tracking-field: -0.5px;
}

/* ----------------------------------------------------------
   Lightbox
   ---------------------------------------------------------- */
html.is-registration-modal-open,
html.is-registration-modal-open body {
    overflow: hidden;
}

.registration-modal[hidden] {
    display: none !important;
}

/*.registration-modal {*/
/*    position: fixed;*/
/*    inset: 0;*/
/*    z-index: 2147483000;*/
/*    overflow: auto;*/
/*    padding: 56px 24px 72px;*/
/*    overscroll-behavior: contain;*/
/*    isolation: isolate;*/
/*}*/

.registration-modal__backdrop {
    z-index: 0;
}

.registration-modal__dialog {
    position: relative;
    z-index: 1;
}


.registration-modal__backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(
            circle at 52% 44%,
            rgba(255, 255, 255, .18),
            transparent 48%
        ),
        rgba(237, 238, 243, .78);

    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.registration-modal__dialog,
.registration-confirmation-page .registration-modal__dialog {
    position: relative;
    z-index: 1;

    width: min(
        var(--registration-width),
        calc(100vw - 48px)
    );

    /*
     * IMPORTANT :
     * la hauteur suit maintenant le contenu.
     */
    height: auto;

    /*
     * Mais la modale ne peut jamais dépasser l'écran.
     */
    max-height: calc(100dvh - 84px);

    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: var(--registration-radius);

    background: var(--color-white);
    box-shadow: var(--registration-shadow);

    outline: 0;
}

.registration-modal__close {
    position: absolute;
    top: 32px;
    right: 36px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-grey-500);
    font-size: 28px;
    font-weight: var(--font-light);
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease;
    background: var(--color-red);
    border-radius: 50%;
}
.registration-modal__close path{
    stroke: white;
}
.registration-modal__close:hover,
.registration-modal__close:focus-visible {
    color: var(--color-grey-900);
}

.registration-modal__eyebrow,
.event-registration-modal__header .event-registration-modal__eyebrow {
    margin: 0 0 12px;
    color: var(--color-grey-500);
    font-size: var(--text-ui);
    font-weight: var(--font-regular);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-body);
    text-transform: uppercase;
}

.registration-modal__title {
    width: min(594px, 100%);
    margin-top: 0;
    color: var(--color-grey-900);
    font-size: var(--text-feature-title);
    font-weight: var(--font-light);
    line-height: var(--line-feature-title);
    letter-spacing: var(--tracking-display);
}

.registration-modal__body {
    margin-top: 40px;
}

/* ----------------------------------------------------------
   Form base
   ---------------------------------------------------------- */
.event-registration-embed,
.event-registration-embed form,
[data-registration-fields] {
    width: 100%;
}

.event-registration-embed form {
    margin: 0;
}

.event-form-step-marker,
.event-form-step-panel[hidden],
.registration-field[hidden],
.registration-choice-card__subchoice[hidden],
.registration-slot-period[hidden] {
    display: none !important;
}

.event-form-step-panel, .event-form-no-step {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 26px;
    align-items: start;
}

.registration-form-block,
.registration-heading,
.registration-message,
.registration-divider,
.registration-recap,
.registration-alert {
    grid-column: 1 / -1;
}

.registration-heading h3,
.registration-choice-block__title,
.registration-guests-block__title,
.registration-slot-block__title,
.registration-fieldset > legend,
.event-form-step-title {
    margin: 0;
    color: var(--color-grey-900);
    font-size: var(--text-news-title);
    font-weight: var(--font-regular);
    line-height: var(--line-news-title);
    letter-spacing: var(--tracking-title);
}

.registration-message,
.event-form-step-intro {
    max-width: 692px;
    color: var(--color-grey-700);
    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-message p:last-child,
.event-form-step-intro p:last-child {
    margin-bottom: 0;
}

.registration-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--color-grey-300);
}

/* ----------------------------------------------------------
   Progress + titre du step
   Figma: ligne à 304, titre à 364 sur le premier écran.
   ---------------------------------------------------------- */
.event-form-step-head {
    margin: 0 0 26px;
}

.event-form-step-head[hidden] {
    display: none !important;
}

.event-form-step-progress {
    width: 100%;
    margin: 0 0 53px;
}

.event-form-step-progress-line {
    position: relative;
    width: 100%;
    height: 1px;
    background: var(--color-grey-300);
}

.event-form-step-progress-line > span {
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    background: var(--color-red);
    transition: width 220ms ease;
}

.event-form-step-title {
    min-height: 34px;
}

.event-form-step-intro {
    margin-top: 14px;
}

.event-form-step-intro[hidden] {
    display: none !important;
}

/* ----------------------------------------------------------
   Fields
   ---------------------------------------------------------- */
.registration-field {
    min-width: 0;
}

.registration-field--half {
    grid-column: span 1;
}

.registration-field--full {
    grid-column: 1 / -1;
}

.registration-field > label,
.registration-guest-row__fields .registration-field > label {
    display: block;
    margin: 0 0 8px;
    color: var(--color-grey-900);
    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-control {
    width: 100%;
    min-height: var(--registration-field-height);
    padding: 10px 20px;
    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);
    outline: 0;
    color: var(--color-grey-900);
    background: var(--color-white);
    box-shadow: none;
    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

select.registration-control {
    padding-right: 46px;
    appearance: none;
    background-image: url('/assets/icons/dropdown.svg');
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 8px;
}

textarea.registration-control {
    min-height: 160px;
    padding-top: 16px;
    resize: none;
}
textarea{
    resize: none;
}
.registration-control:focus {
    border-color: var(--color-grey-900);
}

.registration-control::placeholder {
    color: var(--color-grey-500);
}

.registration-control:disabled,
.registration-control--readonly {
    color: var(--color-grey-500);
    background: var(--color-grey-100);
}

.registration-field__help,
.registration-guests-block__meta,
.registration-choice-card__availability {
    margin-top: 8px;
    color: var(--color-grey-500);
    font-size: var(--text-ui);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

/* ----------------------------------------------------------
   Radio / boolean / checkbox
   ---------------------------------------------------------- */
.registration-boolean {
    min-height: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.registration-boolean__option {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.registration-boolean__input,
.registration-option-card__input,
.registration-choice-card__input,
.registration-slot-card__input,
.registration-radio-card__input,
.registration-boolean-card__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.registration-boolean__marker,
.registration-choice-card__marker,
.registration-radio-card__marker {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-grey-300);
    border-radius: 50%;
    background: var(--color-white);
}

.registration-boolean__marker::after,
.registration-choice-card__marker::after,
.registration-radio-card__marker::after {
    content: '';
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    background: var(--color-red);
    opacity: 0;
    transform: scale(.5);
    transition: opacity 120ms ease, transform 120ms ease;
}

.registration-boolean__input:checked + .registration-boolean__marker,
.registration-choice-card__input:checked + .registration-choice-card__marker,
.registration-radio-card__input:checked + .registration-radio-card__marker {
    border-color: var(--color-grey-300);
}

.registration-boolean__input:checked + .registration-boolean__marker::after,
.registration-choice-card__input:checked + .registration-choice-card__marker::after,
.registration-radio-card__input:checked + .registration-radio-card__marker::after {
    opacity: 1;
    transform: scale(1);
}

.registration-boolean__text,
.registration-radio-card__text {
    color: var(--color-grey-700);
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-title);
}

.registration-boolean__input:checked ~ .registration-boolean__text,
.registration-radio-card__input:checked ~ .registration-radio-card__text {
    color: var(--color-grey-900);
}

/* checkbox variants */
.registration-option-card__marker,
.registration-choice-card--checkbox .registration-choice-card__marker,
.registration-boolean-card__marker {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-grey-300);
    border-radius: 4px;
    background: var(--color-white);
}

.registration-option-card__marker::after,
.registration-choice-card--checkbox .registration-choice-card__marker::after,
.registration-boolean-card__marker::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 1px;
    background: var(--color-red);
    opacity: 0;
}

.registration-option-card__input:checked + .registration-option-card__marker,
.registration-choice-card--checkbox .registration-choice-card__input:checked + .registration-choice-card__marker,
.registration-boolean-card__input:checked + .registration-boolean-card__marker {
    border-color: var(--color-grey-700);
}

.registration-option-card__input:checked + .registration-option-card__marker::after,
.registration-choice-card--checkbox .registration-choice-card__input:checked + .registration-choice-card__marker::after,
.registration-boolean-card__input:checked + .registration-boolean-card__marker::after {
    opacity: 1;
}

.registration-radio-list {
    display: grid;
    gap: var(--space-4);
}

.registration-radio-card {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--space-5) var(--space-8);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.registration-radio-card:hover,
.registration-radio-card:has(.registration-radio-card__input:checked) {
    border-color: var(--color-grey-900);
}

.registration-boolean-card {
    min-height: 109px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px var(--space-8);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.registration-boolean-card:hover,
.registration-boolean-card:has(.registration-boolean-card__input:checked) {
    border-color: var(--color-grey-900);
}

.registration-boolean-card__marker {
    margin-top: 2px;
}

.registration-boolean-card__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.registration-boolean-card__title {
    color: var(--color-grey-900);
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-title);
}

.registration-boolean-card__help {
    color: var(--color-grey-700);
    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-body);
}

/* ----------------------------------------------------------
   Generic option cards + activity cards
   ---------------------------------------------------------- */
.registration-option-list,
.registration-choice-list {
    display: grid;
    gap: 10px;
}

.registration-option-card,
.registration-choice-card {
    position: relative;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 30px;
    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.registration-choice-card:hover:not(.is-disabled),
.registration-option-card:hover {
    border-color: var(--color-grey-900);
}

.registration-choice-card__copy,
.registration-option-card__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.registration-choice-card__title,
.registration-option-card__title {
    color: var(--color-grey-500);
    font-size: var(--text-body);
    font-weight: var(--font-bold);
    line-height: var(--registration-line-field);
    letter-spacing: var(--tracking-title);
}

.registration-choice-card__input:checked ~ .registration-choice-card__copy .registration-choice-card__title,
.registration-option-card__input:checked ~ .registration-option-card__copy .registration-option-card__title {
    color: var(--color-grey-900);
}

.registration-choice-card__description,
.registration-option-card__description {
    color: var(--color-grey-700);
    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-choice-card__availability {
    margin-top: 0;
}

.registration-choice-card.is-disabled {
    background: var(--color-grey-200);
    cursor: not-allowed;
    opacity: .62;
}

.registration-choice-card__subchoice {
    position: relative;
    margin: -1px 0 12px 52px;
    padding: 12px 14px 14px;
    border-left: 2px solid var(--color-grey-300);
    background: var(--color-grey-100);
}

.registration-choice-card__subchoice-label {
    display: block;
    margin: 0 0 7px;
    color: var(--color-grey-700);
    font-size: 12px;
    font-weight: var(--font-bold);
    line-height: 1.35;
}

.registration-choice-card__subchoice .registration-control {
    min-height: 48px;
    background: var(--color-white);
}

@media (max-width: 640px) {
    .registration-choice-card__subchoice {
        margin-left: 20px;
    }
}

.registration-choice-block--participation .registration-choice-card {
    min-height: 109px;
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
}

.registration-choice-block--participation .registration-choice-card__marker {
    margin-top: 3px;
}

.registration-choice-block--participation .registration-choice-card__title {
    color: var(--color-grey-900);
}

.registration-choice-block--participation .registration-choice-card__description {
    margin-top: 4px;
}

/* ----------------------------------------------------------
   Blocks / fieldsets / participant labels
   ---------------------------------------------------------- */
.registration-form-block {
    margin: 0;
}

.registration-form-block + .registration-form-block {
    margin-top: 12px;
}

.registration-choice-block__title,
.registration-guests-block__title,
.registration-slot-block__title {
    margin-bottom: 26px;
}

.registration-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.registration-fieldset + .registration-fieldset {
    margin-top: 36px;
}

.registration-fieldset > legend {
    width: 100%;
    margin: 0 0 26px;
    padding: 0;
}

.registration-participant-label {
    margin: 0 0 12px;
    color: var(--color-grey-700);
    font-size: var(--text-ui);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-body);
}

.event-individual-choice-person + .event-individual-choice-person,
.event-individual-slot-person + .event-individual-slot-person {
    margin-top: 32px;
}

/* ----------------------------------------------------------
   Guests
   ---------------------------------------------------------- */
.registration-guests-block__intro {
    margin: -14px 0 20px;
}

.registration-guests-block__intro p {
    margin: 0;
    color: var(--color-grey-700);
    font-size: var(--text-ui);
    line-height: 1.45;
}

.registration-guests-block__meta {
    margin-top: 3px !important;
    color: var(--color-grey-500) !important;
}

.registration-guest-groups {
    display: grid;
    gap: 12px;
}

.registration-guest-group {
    overflow: hidden;
    border: 1px solid var(--color-grey-300);
    border-radius: 8px;
    background: var(--color-white);
}

.registration-guest-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 10px 14px 10px 16px;
}

.registration-guest-group__label-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.registration-guest-group__label {
    color: var(--color-grey-900);
    font-size: var(--text-body);
    font-weight: var(--font-regular);
}

.registration-guest-count {
    color: var(--color-grey-500);
    font-size: 12px;
    font-weight: var(--font-regular);
    white-space: nowrap;
}

.registration-guest-add {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--color-grey-300);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-grey-900);
    font-size: 12px;
    font-weight: var(--font-regular);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.registration-guest-add > span {
    font-size: 16px;
    font-weight: var(--font-light);
    line-height: 1;
}

.registration-guest-add:hover:not(:disabled),
.registration-guest-add:focus-visible:not(:disabled) {
    border-color: var(--color-red);
    color: var(--color-red);
    outline: 0;
}

.registration-guest-add:disabled {
    opacity: .38;
    cursor: default;
}

.registration-guest-group__list:empty {
    display: none;
}

.registration-guest-group__list:not(:empty) {
    border-top: 1px solid var(--color-grey-200);
}

.registration-guest-row {
    position: relative;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-white);
}

.registration-guest-row + .registration-guest-row {
    border-top: 1px solid var(--color-grey-200);
}

.registration-guest-row__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 52px;
    padding: 10px 16px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.registration-guest-row__summary::-webkit-details-marker {
    display: none;
}

.registration-guest-row__summary::marker {
    display: none;
    content: '';
}

.registration-guest-row__summary:hover {
    background: rgba(0, 0, 0, .015);
}

.registration-guest-row__summary-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.registration-guest-row__title {
    flex: 0 0 auto;
    color: var(--color-grey-900);
    font-size: 13px;
    font-weight: var(--font-regular);
}

.registration-guest-row__name {
    overflow: hidden;
    color: var(--color-grey-500);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registration-guest-row__name:empty {
    display: none;
}

.registration-guest-row__chevron {
    position: relative;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 1px solid var(--color-grey-600);
    border-bottom: 1px solid var(--color-grey-600);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 150ms ease;
}

.registration-guest-row[open] .registration-guest-row__chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.registration-guest-row__body {
    padding: 4px 16px 14px;
}

.registration-guest-row__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.registration-guest-row__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.registration-guest-row__remove {
    padding: 3px 0;
    border: 0;
    background: none;
    color: var(--color-grey-500);
    font-size: 11px;
    cursor: pointer;
    transition: color 140ms ease;
}

.registration-guest-row__remove:hover,
.registration-guest-row__remove:focus-visible {
    color: var(--color-red);
    outline: 0;
}

/* ----------------------------------------------------------
   Time slots
   Figma: 5 x 172 px on 901 px content width.
   ---------------------------------------------------------- */
.registration-slot-period + .registration-slot-period {
    margin-top: 35px;
}

.registration-slot-period__title {
    margin: 0 0 14px;
    color: var(--color-grey-900);
    font-size: var(--text-intro);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-slot-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.registration-slot-card {
    min-width: 0;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 22px;
    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.registration-slot-card:hover:not(.is-disabled) {
    border-color: var(--color-grey-900);
}

.registration-slot-card__time {
    color: var(--color-grey-900);
    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-slot-card__meta {
    color: var(--color-grey-500);
    font-size: var(--text-ui);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-slot-card:has(.registration-slot-card__input:checked) {
    border-color: var(--color-red);
    background: var(--color-red);
}

.registration-slot-card:has(.registration-slot-card__input:checked) .registration-slot-card__time,
.registration-slot-card:has(.registration-slot-card__input:checked) .registration-slot-card__meta {
    color: var(--color-white);
}

.registration-slot-card.is-disabled,
.registration-slot-card:has(.registration-slot-card__input:disabled) {
    border-color: var(--color-grey-300);
    background: var(--color-grey-200);
    cursor: not-allowed;
    opacity: .55;
}

/* ----------------------------------------------------------
   Recap
   ---------------------------------------------------------- */
.registration-recap-block {
    grid-column: 1 / -1;
}

.registration-recap-block__title {
    margin: 0 0 var(--space-7);
    color: var(--color-grey-900);
    font-size: var(--text-news-title);
    font-weight: var(--font-regular);
    line-height: var(--line-news-title);
    letter-spacing: var(--tracking-title);
}

.registration-recap-block__title[hidden] {
    display: none !important;
}

.registration-recap {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 36px 54px;
    color: var(--color-grey-700);
    font-size: var(--text-body);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-recap__fields,
.registration-recap__checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.registration-recap__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.registration-recap__label {
    color: var(--color-grey-500);
    font-size: var(--text-tag);
    text-transform: uppercase;
}

.registration-recap__value {
    color: var(--color-grey-700);
}

.registration-recap__item {
    position: relative;
    padding-left: 21px;
    color: var(--color-grey-700);
}

.registration-recap__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 13px;
    height: 9px;
    background: var(--color-red);
    -webkit-mask: url('/assets/icons/select.svg') center / contain no-repeat;
    mask: url('/assets/icons/select.svg') center / contain no-repeat;
}

/* ----------------------------------------------------------
   Alerts / states
   ---------------------------------------------------------- */
.registration-alert,
.registration-state {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 8px;
    color: var(--color-grey-700);
    background: var(--color-grey-100);
    font-size: var(--text-button);
    line-height: var(--registration-line-field);
}

.registration-alert[hidden] {
    display: none !important;
}

.registration-alert--error {
    border-color: rgba(227, 6, 19, .35);
    background: rgba(227, 6, 19, .05);
}

.registration-alert ul {
    margin-top: 8px;
}

/* ----------------------------------------------------------
   Buttons + step navigation
   ---------------------------------------------------------- */
.event-form-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 50px;
}

.event-form-step-nav__end {
    margin-left: auto;
}

.registration-button {
    min-height: var(--registration-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--radius-pill);
    outline: 0;
    color: var(--color-white);
    background: var(--color-red);
    box-shadow: none;
    font-size: var(--text-button);
    font-weight: var(--font-regular);
    line-height: 1;
    letter-spacing: var(--tracking-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: filter 140ms ease, opacity 140ms ease;
}

.registration-button--secondary {
    background: var(--color-grey-900);
}

.registration-button:hover:not(:disabled),
.registration-button:focus-visible:not(:disabled) {
    filter: brightness(.94);
}

.registration-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.registration-button[hidden] {
    display: none !important;
}

.registration-button__arrow {
    width: 37px;
    height: 11px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url('/assets/icons/arrow-long.svg') center / contain no-repeat;
    mask: url('/assets/icons/arrow-long.svg') center / contain no-repeat;
}

.registration-button__arrow--back {
    transform: rotate(180deg);
}

/* ----------------------------------------------------------
   Confirmation screens
   ---------------------------------------------------------- */
.registration-confirmation-page {
    min-height: 100vh;
    background: var(--color-grey-100);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.registration-confirmation-page .registration-modal__dialog {
    min-height: 686px;
}

.registration-confirmation {
    margin-top: 10px;
}

.registration-confirmation__title {
    width: min(594px, 100%);
    margin: 0;
    color: var(--color-grey-900);
    font-size: var(--text-feature-title);
    font-weight: var(--font-light);
    line-height: var(--line-feature-title);
    letter-spacing: var(--tracking-display);
}

.registration-confirmation__copy {
    width: min(594px, 100%);
    margin-top: 28px;
    color: var(--color-grey-700);
    font-size: var(--text-intro);
    line-height: var(--line-body);
    letter-spacing: var(--tracking-body);
}

.registration-confirmation__copy a {
    color: var(--color-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.registration-confirmation__facts {
    width: min(622px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 36px;
}

.registration-confirmation__fact {
    position: relative;
    padding-left: 16px;
    color: var(--color-grey-700);
    font-size: var(--text-intro);
    line-height: var(--registration-line-field);
    letter-spacing: var(--tracking-title);
}

.registration-confirmation__fact::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-red);
}

.registration-confirmation__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 72px;
}

/* ----------------------------------------------------------
   Preferences / automatic allocation
   ---------------------------------------------------------- */
.registration-preference-person + .registration-preference-person {
    margin-top: 28px;
}

.registration-preference-list {
    display: grid;
    gap: 12px;
}

.registration-preference-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.registration-preference-row__rank {
    color: var(--color-grey-700);
    font-size: var(--text-button);
    line-height: 1.35;
}

.registration-field > label.registration-boolean-card{
    display: flex;
}
.registration-boolean-card__marker::after{
    background: var(--color-red);
}
.registration-boolean-card__marker::after,
.registration-boolean-card__marker{
    border-radius: 50%;

}

.registration-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 42px 24px;

    overflow: hidden;
    overscroll-behavior: contain;
}

.registration-modal__dialog,
.registration-confirmation-page .registration-modal__dialog {
    position: relative;
    z-index: 1;

    width: min(
        var(--registration-width),
        calc(100vw - 48px)
    );

    height: min(
        800px,
        calc(100dvh - 84px)
    );

    min-height: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: var(--registration-radius);

    background: var(--color-white);
    box-shadow: var(--registration-shadow);

    outline: 0;
}
.registration-confirmation-page .registration-modal__dialog{
    height: auto;
    padding: var(--space-10);
    max-width: 900px;

}
.registration-modal__scroll {
    width: 100%;
    transform: translate(0,0);
    /*
     * Ne surtout plus forcer height: 100%.
     * La zone suit le contenu.
     */
    height: auto;
    overflow-anchor: none;
    /*
     * Le scroll apparaît seulement si le contenu
     * est réellement plus haut que l'écran.
     */
    max-height: calc(100dvh - 84px);

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        var(--registration-padding-top)
        var(--registration-padding-x)
        var(--registration-padding-bottom);

    box-sizing: border-box;

    overscroll-behavior: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.registration-modal__scroll::-webkit-scrollbar {
    display: none;
}
.registration-modal__scrollbar {
    position: absolute;

    top: 24px;
    right: 10px;
    bottom: 24px;

    width: 4px;

    z-index: 20;

    pointer-events: none;

    opacity: 0;

    transition: opacity 180ms ease;
}

.registration-modal__scrollbar.is-visible {
    opacity: 1;
}
.registration-modal__scrollbar-thumb {
    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 60px;

    border-radius: 999px;

    background: rgba(45, 52, 60, 0.28);

    transform: translate3d(0, 0, 0);

    will-change: transform, height;
}
.registration-modal__scrollbar-thumb {
    background: rgba(45, 52, 60, 0.42);
}
/* ==========================================================
   ACCOMPAGNANTS — version sobre
   ========================================================== */

.registration-guests-block__intro {
    margin: -10px 0 24px;
}

.registration-guests-block__intro p {
    color: var(--color-grey-500);
    font-size: var(--text-ui);
    line-height: 1.45;
}


/* Groupes
   ---------------------------------------------------------- */

.registration-guest-groups {
    display: grid;
    gap: 14px;
}

.registration-guest-group {
    overflow: hidden;

    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);

    background: var(--color-white);
}


/* Header Adultes / Enfants
   ---------------------------------------------------------- */

.registration-guest-group__head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 12px 16px 12px 18px;
}

.registration-guest-group__label-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.registration-guest-group__label {
    color: var(--color-grey-900);

    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: 1.3;
}

.registration-guest-count {
    color: var(--color-grey-500);

    font-size: 12px;
    font-weight: var(--font-regular);
    line-height: 1;
}


/* Bouton ajouter
   ---------------------------------------------------------- */

.registration-guest-add {
    min-height: 34px;

    padding: 6px 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid var(--color-grey-300);
    border-radius: 999px;

    background: var(--color-white);
    color: var(--color-grey-700);

    font-size: 12px;
    font-weight: var(--font-regular);

    cursor: pointer;

    transition:
        border-color 140ms ease,
        color 140ms ease,
        background 140ms ease;
}

.registration-guest-add > span {
    color: var(--color-red);

    font-size: 16px;
    font-weight: var(--font-light);
    line-height: 1;
}

.registration-guest-add:hover:not(:disabled),
.registration-guest-add:focus-visible:not(:disabled) {
    border-color: var(--color-grey-500);

    background: var(--color-grey-100);
    color: var(--color-grey-900);

    outline: none;
}

.registration-guest-add:disabled {
    opacity: .35;
    cursor: default;
}


/* Liste
   ---------------------------------------------------------- */

.registration-guest-group__list:empty {
    display: none;
}

.registration-guest-group__list:not(:empty) {
    border-top: 1px solid var(--color-grey-200);
}


/* Ligne accompagnant
   ---------------------------------------------------------- */

.registration-guest-row {
    background: var(--color-white);
}

.registration-guest-row + .registration-guest-row {
    border-top: 1px solid var(--color-grey-200);
}

.registration-guest-row__summary {
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 10px 18px;

    cursor: pointer;

    transition: background 140ms ease;
}

.registration-guest-row__summary:hover {
    background: rgba(236, 239, 243, .45);
}

.registration-guest-row[open] > .registration-guest-row__summary {
    background: var(--color-grey-100);
}


/* Titre + nom
   ---------------------------------------------------------- */

.registration-guest-row__summary-main {
    min-width: 0;

    display: flex;
    align-items: baseline;
    gap: 10px;
}

.registration-guest-row__title {
    flex: 0 0 auto;

    color: var(--color-grey-900);

    font-size: 13px;
    font-weight: var(--font-bold);
    line-height: 1.4;
}

.registration-guest-row__name {
    min-width: 0;

    overflow: hidden;

    color: var(--color-grey-500);

    font-size: 13px;
    font-weight: var(--font-regular);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.registration-guest-row__name:empty {
    display: none;
}


/* Chevron
   ---------------------------------------------------------- */

.registration-guest-row__chevron {
    position: relative;

    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    margin-right: 3px;

    border-right: 1px solid var(--color-grey-500);
    border-bottom: 1px solid var(--color-grey-500);

    transform: rotate(45deg) translateY(-2px);

    transition: transform 150ms ease;
}

.registration-guest-row[open] .registration-guest-row__chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}


/* Contenu ouvert
   ---------------------------------------------------------- */

.registration-guest-row__body {
    padding: 18px 18px 16px;

    border-top: 1px solid var(--color-grey-200);

    background: var(--color-white);
}

.registration-guest-row__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px 18px;
}

.registration-guest-row__fields .registration-field > label {
    margin-bottom: 7px;

    color: var(--color-grey-700);

    font-size: 14px;
}


/* Suppression
   ---------------------------------------------------------- */

.registration-guest-row__actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 12px;
}

.registration-guest-row__remove {
    padding: 4px 0;

    border: 0;

    background: transparent;
    color: var(--color-grey-500);

    font-size: 11px;
    font-weight: var(--font-regular);

    cursor: pointer;

    transition: color 140ms ease;
}

.registration-guest-row__remove:hover,
.registration-guest-row__remove:focus-visible {
    color: var(--color-red);
    outline: 0;
}
/* ==========================================================
   INSCRIPTION EN EQUIPE
   ========================================================== */

.registration-team {
    display: grid;
    gap: 26px;
}

/* Titre + texte d'intro */
.registration-team > .registration-heading {
    margin: 0;
}

.registration-team > .registration-heading h3 {
    margin: 0 0 10px;
}

.registration-team__intro p{
    margin: 0;
    max-width: 720px;

    color: var(--color-grey-500);

    font-size: var(--text-ui);
    font-weight: var(--font-regular);
    line-height: 1.45;
    letter-spacing: var(--tracking-body);
}

/* Chaque sous-partie */
.registration-team .registration-field {
    margin: 0;
}

.registration-team .registration-field > label {
    margin-bottom: 12px;
}

/* Zone qui apparait après "Oui" */
.registration-team [data-team-details] {
    display: grid;
    gap: 26px;
}

.registration-team [data-team-details][hidden] {
    display: none !important;
}

/* Bloc création / rejoindre */
.registration-team [data-team-create],
.registration-team [data-team-join] {
    margin-top: 0;
}

/* Les cartes radio restent sobres et cohérentes */
.registration-team .registration-radio-list {
    gap: 10px;
}

.registration-team .registration-radio-card {
    min-height: 66px;
    padding: 15px 30px;

    border: 1px solid var(--color-grey-300);
    border-radius: var(--registration-control-radius);

    background: var(--color-white);
}

.registration-team .registration-radio-card:hover,
.registration-team .registration-radio-card:has(
    .registration-radio-card__input:checked
) {
    border-color: var(--color-grey-900);
}

/* Texte des choix */
.registration-team .registration-radio-card__text {
    color: var(--color-grey-700);

    font-size: var(--text-body);
    font-weight: var(--font-regular);
    line-height: var(--registration-line-field);
    letter-spacing: var(--registration-tracking-field);
}

.registration-team
.registration-radio-card__input:checked
~ .registration-radio-card__text {
    color: var(--color-grey-900);
    font-weight: var(--font-bold);
}

/* Champs nom d'équipe / équipe à rejoindre */
.registration-team .registration-control {
    margin: 0;
}

/* Aide */
.registration-team .registration-field__help {
    margin-top: 8px;

    color: var(--color-grey-500);

    font-size: var(--text-ui);
    line-height: 1.45;
}

/* Evite un espace bizarre avant/après le bloc */
.registration-form-block > .registration-team {
    margin: 0;
}
.registration-form-actions{
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}