/**
 * BB Module de réservation — styles.
 * 1) Styles d'origine du code Elementor « Module de réservation » (10979), repris à l'identique (13/10/2026),
 *    sauf les hauteurs forcées des zones de texte, limitées au mode de repli (:not(.bb-resa)).
 * 2) Couche « étapes » : active seulement quand le script a reconnu le formulaire (#reservation-form.bb-resa).
 */

/* ---------- 1) Styles d'origine ---------- */
body[data-elementor-device-mode='tablet'] #reservation-container,
body[data-elementor-device-mode='mobile'] #reservation-container {
    position: relative !important;
}

#reservation-form .top-0 {
    top: 0 !important;
}

#reservation-form .wpbs-field-layout-default {
    clear: both;
}


#reservation-form .wpbs-field-layout-left {
    width: 48% !important;
    margin-right: 2%;
    float: left;
    clear: both;
}


#reservation-form .wpbs-field-layout-right {
    width: 48% !important;
    margin-left: 2%;
    clear: none !important;
    float: right;
}

@media (min-width: 1025px) {
    #reservation-container {
        width: 420px;
        max-width: 420px;
    }
}

#reservation-form {
    height: 435px;
}

#reservation-form .wpbs-total-price {
    text-align: center;
}

#reservation-form .wpbs-form-field-input {
    line-height: inherit !important;
}


#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table .wpbs-line-item-total * {
    border: none !important;
}

#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table tr.wpbs-line-item-subtotal td,
#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table tr.wpbs-line-item-total td {
    background: var(--e-global-color-c281b8b) !important;
    padding: 10px !important;
}

#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table td,
#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table th {
    padding: 7px 10px !important;
}

#reservation-form .wpbs-form-field-hidden,
#reservation-form .wpbs-payment-confirmation,
#reservation-form .wpbs-form-selected-dates,
#reservation-form .wpbs-pricing-table .wpbs-line-item-subtotal,
#reservation-form .wpbs-form-field-total .wpbs-form-field-label,
#reservation-form .wpbs-pricing-table thead,
#reservation-form .wpbs-form-general-error,
#reservation-form .wpbs-form-field-has-error .wpbs-form-field-input .wpbs-form-field-error {
    display: none;
}

#reservation-form .wpbs-form-field-has-error .wpbs-form-field-input.focus .wpbs-form-field-error {
    display: block;
}

#reservation-form .wpbs-form-field-has-error .wpbs-form-field-input:not(.focus) input:not(.not-empty),
#reservation-form .wpbs-form-field-has-error .wpbs-form-field-input:not(.focus) textarea:not(.not-empty) {
    border-color: var(--e-global-color-cc8ccdc) !important;
}

#reservation-form .two-columns-html {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    top: 15px;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-error {
    position: absolute !important;
    z-index: 1 !important;
    padding: 5px 10px !important;
    top: -40px;
    background: var(--e-global-color-cc8ccdc) !important;
    color: var(--e-global-color-8b7710f) !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-error:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--e-global-color-cc8ccdc) transparent;
    transform: translateX(-50%) rotate(-180deg);
}

#reservation-form h3 {
    margin-bottom: -5px;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field:not(.wpbs-form-field-html) {
    padding-bottom: 12px !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.no-padding {
    padding: 0 !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field .resa-paragraph,
#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select,
#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table td,
#reservation-form .wpbs-main-wrapper table.wpbs-pricing-table th,
#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input,
#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field textarea,
#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field label {
    font-size: var(--e-global-typography-4b71ab7-font-size) !important;
    line-height: var(--e-global-typography-4b71ab7-line-height) !important;
    letter-spacing: var(--e-global-typography-4b71ab7-letter-spacing) !important;
    word-spacing: var(--e-global-typography-4b71ab7-word-spacing) !important;
    font-family: var(--e-global-typography-4b71ab7-font-family), Sans-serif !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-line-item-part-payments td {
    font-size: 80% !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.wpbs-form-field-1-part-payment-applicability {
    padding-bottom: 0 !important;
}


#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select {
    font-size: 80% !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.logement-name {
    padding: 0 !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.logement-name input {
    background: none !important;
    border: none !important;
    height: auto !important;
    font-family: var(--e-global-typography-35dd18c-font-family), Sans-serif !important;
    font-size: 26px !important;
    font-weight: var(--e-global-typography-35dd18c-font-weight);
    font-style: var(--e-global-typography-35dd18c-font-style);
    text-align: center;
    padding: 0 !important;
}


/* Pour Chrome, Safari et Opera */
#reservation-form::-webkit-scrollbar {
    width: 5px;
    background-color: var(--e-global-color-c281b8b);
}

#reservation-form::-webkit-scrollbar-thumb {
    background-color: #dbdbdb;
}

/* Pour Firefox */
#reservation-form::-moz-scrollbar {
    width: 5px;
}

#reservation-form::-moz-scrollbar-thumb {
    background-color: #dbdbdb;
}

/* Pour Edge et Internet Explorer */
#reservation-form::-ms-scrollbar {
    width: 5px;
    background-color: var(--e-global-color-secondary);
}

#reservation-form::-ms-scrollbar-thumb {
    background-color: #dbdbdb;
}


#reservation-form .btn-resa-prev,
#reservation-form .btn-resa-next {
    background-color: var(--e-global-color-primary) !important;
    font-family: var(--e-global-typography-c3a78eb-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-c3a78eb-font-size) !important;
    font-weight: var(--e-global-typography-c3a78eb-font-weight) !important;
    line-height: var(--e-global-typography-c3a78eb-line-height) !important;
    color: #fff !important;
    padding: 10px 55px !important;
    border-radius: 15px !important;
    cursor: pointer !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


body[data-elementor-device-mode='mobile'] #reservation-form .btn-resa-prev,
body[data-elementor-device-mode='mobile'] #reservation-form .btn-resa-next {
    padding: 10px 35px !important;
}


#reservation-form .btn-resa-prev {
    background-color: var(--e-global-color-c281b8b) !important;
    color: var(--e-global-color-text) !important;
    font-family: var(--e-global-typography-976e08e-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-976e08e-font-size) !important;
    font-weight: var(--e-global-typography-976e08e-font-weight) !important;
    text-transform: var(--e-global-typography-976e08e-text-transform) !important;
    line-height: var(--e-global-typography-976e08e-line-height) !important;
    letter-spacing: var(--e-global-typography-976e08e-letter-spacing) !important;
    word-spacing: var(--e-global-typography-976e08e-word-spacing) !important;
}

#reservation-form .margin-bottom-400 {
    margin-bottom: 400px !important;
}

#reservation-form .margin-top-20 {
    margin-top: 20px !important;
}

#reservation-form:not(.bb-resa) .height-90-textarea textarea {
    height: 90px !important;
}

#reservation-form:not(.bb-resa) .height-60-textarea textarea {
    height: 60px !important;
}

#reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.padding-0 {
    padding: 0 !important;
}

#reservation-form.error .btn-reserver,
#reservation-form.pending .btn-reserver,
#reservation-form .btn-reserver {
    opacity: 0.5;
    visibility: visible;
}

#reservation-form:not(.error):not(.pending) .wpbs-dates-selected .btn-resa {
    opacity: 1;
}


#reservation-form .wpbs-main-wrapper .wpbs-form-container {
    padding: 15px 0 0 0 !important;
    max-width: 100% !important;
}

#reservation-form .wpbs-calendar {
    max-width: 800px !important;
}

#reservation-form .wpbs-date-today:not(.wpbs-date-hover):not(.wpbs-date-selected) .wpbs-legend-item-icon {
    border-width: 2px !important;
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header {
    background: none;
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar {
    border: none;
    margin: 0;
}

#reservation-form .reservation-step-title {
    text-align: center;
    padding-top: 20px;
}


#reservation-form .two-columns-html.recap-resa-dates {
    justify-content: center;
    text-align: center;
    margin-top: -5px;
    gap: 0;
}

#reservation-form #recap-resa-start-date {
    border-right: 1px solid black;
    padding-right: 15px;
}

#reservation-form #recap-resa-end-date {
    padding-left: 15px;
}

#reservation-form .recap-resa-start-date-label,
#reservation-form .recap-resa-end-date-label,
#reservation-form .reservation-step-title,
#reservation-form .wpbs-calendar-header-navigation,
#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-select-container select {
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-adc1a1d-font-family), Sans-serif;
    font-size: var(--e-global-typography-adc1a1d-font-size) !important;
    font-weight: var(--e-global-typography-adc1a1d-font-weight);
    text-transform: var(--e-global-typography-adc1a1d-text-transform);
    font-style: var(--e-global-typography-adc1a1d-font-style);
    letter-spacing: var(--e-global-typography-adc1a1d-letter-spacing);
    word-spacing: var(--e-global-typography-adc1a1d-word-spacing);
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-select-container select {
    border: none;
    text-align: center;
    -webkit-appearance: none;
    /* Enlève le style par défaut pour WebKit/Blink */
    -moz-appearance: none;
    /* Enlève le style par défaut pour Firefox */
    appearance: none;
    /* Enlève le style par défaut pour les navigateurs modernes */
    /* Styles supplémentaires pour votre select */
}




#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-select-container:after {
    content: '';
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}


#reservation-form .recap-resa-start-date-value,
#reservation-form .recap-resa-end-date-value {
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-976e08e-font-family), Sans-serif;
    font-size: var(--e-global-typography-976e08e-font-size);
    font-weight: var(--e-global-typography-976e08e-font-weight);
    text-transform: var(--e-global-typography-976e08e-text-transform);
    line-height: var(--e-global-typography-976e08e-line-height);
    letter-spacing: var(--e-global-typography-976e08e-letter-spacing);
    word-spacing: var(--e-global-typography-976e08e-word-spacing);

}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation>a {
    height: inherit;
    width: inherit;
    background: none;
    margin-top: -16px;
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-arrow {
    border: none;
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-arrow:before {
    content: "";
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: contain !important;

}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar table tr td .wpbs-date-inner {
    height: 38px !important;
    line-height: 38px !important;
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar.wpbs-has-prices table tr td .wpbs-date-inner {
    line-height: 10px !important;
}



/* Écrans de laptop bas : module plus compact pour rester visible en entier */
@media (max-height: 700px) {
    #reservation-container #reservation-form {
        height: 400px;
    }

    @media (min-width: 1025px) {
        #reservation-container #reservation-header > .e-con-inner {
            padding-top: 4px;
            padding-bottom: 4px;
        }
    }

    #reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar table tr td .wpbs-date-inner {
        height: 34px !important;
        line-height: 34px !important;
    }

    #reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar.wpbs-has-prices table tr td .wpbs-date-inner {
        line-height: 10px !important;
    }
}

#reservation-form .wpbs-legend-item-icon[data-type=split] div svg {
    width: 100%;
}

	  #reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation button{
				width: 0 !important;
		height: 0 !important;
				background:none!important;
		}
	
#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-prev .wpbs-arrow:before {
    background: url(/wp-content/themes/laparpaille/assets/img/arrow_back.svg);
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next .wpbs-arrow:before {
    background: url(/wp-content/themes/laparpaille/assets/img/arrow_forward.svg);
}

#reservation-form .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next .wpbs-arrow {
    margin-right: 40px;
}
/* Étapes du formulaire resserrées pour tenir dans le module réduit */
#reservation-container #reservation-form .reservation-step-title {
    padding-top: 10px;
}

#reservation-container #reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field:not(.wpbs-form-field-html) {
    padding-bottom: 4px !important;
}

#reservation-container #reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    height: 34px !important;
}

#reservation-container #reservation-form:not(.bb-resa) .height-60-textarea textarea {
    height: 50px !important;
}

/* Récapitulatif : nom du logement, espacements et demande particulière plus compacts */
#reservation-container #reservation-form .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.logement-name input {
    font-size: 22px !important;
}

#reservation-container #reservation-form:not(.bb-resa) .padding-0.height-60-textarea textarea {
    height: 42px !important;
}

#reservation-container #reservation-form .margin-top-20 {
    margin-top: 10px !important;
}

/* Boutons Retour / Continuer : deux colonnes égales, sans déborder */
#reservation-container #reservation-form .two-columns-html:not(.recap-resa-dates) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    top: 0 !important;
    padding-top: 20px;
    padding-bottom: 20px;
}

#reservation-container #reservation-form .two-columns-html .btn-resa,
#reservation-container #reservation-form .wpbs-main-wrapper .wpbs-form-container .two-columns-html button.btn-resa {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 8px 12px !important;
    height: 48px !important;
    white-space: nowrap;
}

/* Espace au-dessus des champs à libellé (nombre de personnes, adresse) */
#reservation-form .wpbs-form-field-number {
    padding-top: 12px !important;
}

#reservation-form .wpbs-form-field-textarea.wpbs-field-required {
    margin-top: 12px;
}


/* ---------- 2) Parcours en étapes ---------- */

/* Une seule étape visible : plus d'espaceurs de 400 px ni de défilement simulé. */
#reservation-form.bb-resa .wpbs-form-fields > [data-bb-step]:not(.bb-on),
#reservation-form.bb-resa:not([data-bb-current="0"]) .wpbs-container {
    display: none !important;
}

/* Bouton d'envoi natif de WPBS : l'envoi passe par le bouton de la dernière étape (il était auparavant hors champ, sous un espaceur). */
#reservation-form.bb-resa .wpbs-form-submit-button {
    display: none !important;
}

/* Étapes après le calendrier : titre calé en haut du module, comme le faisait l'ancien défilement. */
#reservation-form.bb-resa:not([data-bb-current="0"]) > .e-con-inner {
    padding-top: 0 !important;
}

#reservation-form.bb-resa:not([data-bb-current="0"]) .wpbs-main-wrapper .wpbs-form-container {
    padding-top: 0 !important;
}

#reservation-form.bb-resa .reservation-step-title {
    margin-top: 0;
}

#reservation-form.bb-resa .margin-bottom-400 {
    margin-bottom: 0 !important;
}

/* Bureau : la hauteur d'origine devient un minimum (cartes identiques), le module ne s'allonge que si l'étape
   le demande (zones de texte agrandies) : jamais d'ascenseur interne.
   Tablette et mobile : le module prend simplement la hauteur de l'étape. */
#reservation-form.bb-resa {
    height: auto !important;
    min-height: 435px;
    overflow: visible;
}

@media (max-height: 700px) {
    #reservation-container #reservation-form.bb-resa {
        min-height: 400px;
    }
}

body[data-elementor-device-mode='tablet'] #reservation-form.bb-resa,
body[data-elementor-device-mode='mobile'] #reservation-form.bb-resa {
    min-height: 0;
}

/* Sous les boutons, la marge du conteneur Elementor suffit (évite 20 px en double). */
#reservation-container #reservation-form.bb-resa .two-columns-html:not(.recap-resa-dates) {
    padding-bottom: 0;
}

/* Téléphone : la liste des pays passe au-dessus des champs suivants ; indicatif masqué dans le champ
   (le drapeau suffit, l'indicatif reste dans la liste) pour laisser la place au numéro. */
#reservation-form.bb-resa .wpbs-form-field-phone {
    position: relative;
    z-index: 3;
}

#reservation-form.bb-resa .wpbs-form-field-phone .iti--separate-dial-code .iti__selected-dial-code {
    display: none;
}

#reservation-form.bb-resa .wpbs-form-field-phone .iti--separate-dial-code input {
    padding-left: 52px !important;
}

/* Zones de texte : WPBS impose « height: 120px !important », qui bloque la poignée du navigateur. La hauteur passe
   par une variable posée par le script (agrandissement à la saisie et à la poignée). */
#reservation-form.bb-resa .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field textarea {
    height: var(--bb-ta-h, 60px) !important;
    resize: vertical;
    overflow-y: hidden;
}

/* Champs calés : grille à deux colonnes au lieu des flottants, rangées alignées sur le bas des champs. */
#reservation-form.bb-resa .wpbs-form-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4%;
    align-items: end;
}

#reservation-form.bb-resa .wpbs-form-fields > * {
    grid-column: 1 / -1;
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
}

#reservation-form.bb-resa .wpbs-form-fields > .wpbs-field-layout-left {
    grid-column: 1;
}

#reservation-form.bb-resa .wpbs-form-fields > .wpbs-field-layout-right {
    grid-column: 2;
}

#reservation-form.bb-resa .wpbs-form-field .iti {
    width: 100%;
}

/* Progression : la barre du bandeau « Réservation » se remplit d'une étape à l'autre. */
#reservation-header.bb-resa-header {
    background-color: var(--e-global-color-secondary);
    background-image: linear-gradient(var(--e-global-color-primary), var(--e-global-color-primary)) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: var(--bb-progress, 0%) 100% !important;
    transition: background-size .6s cubic-bezier(.16, 1, .3, 1);
}

/* Arrivée d'une étape, dans le sens de la navigation. */
@keyframes bbResaInFwd {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes bbResaInBack {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: none; }
}

@keyframes bbResaFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

#reservation-form.bb-resa.bb-in-fwd .wpbs-form-fields > .bb-on,
#reservation-form.bb-resa.bb-in-fwd[data-bb-current="0"] .wpbs-container {
    animation: bbResaInFwd .34s cubic-bezier(.16, 1, .3, 1) backwards;
}

#reservation-form.bb-resa.bb-in-back .wpbs-form-fields > .bb-on,
#reservation-form.bb-resa.bb-in-back[data-bb-current="0"] .wpbs-container {
    animation: bbResaInBack .34s cubic-bezier(.16, 1, .3, 1) backwards;
}

/* Bouton « Réserver mon séjour » : s'allume quand les dates sont choisies. */
#reservation-form.bb-resa .btn-reserver {
    transition: opacity .3s ease;
}

#reservation-form.bb-resa .btn-reserver.bb-ready {
    animation: bbResaReady .45s cubic-bezier(.16, 1, .3, 1);
}

@keyframes bbResaReady {
    0% { transform: scale(1); }
    40% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

/* Erreur sur un champ : léger mouvement pour attirer l'oeil, l'infobulle d'origine porte le message. */
#reservation-form.bb-resa .bb-nudge {
    animation: bbResaNudge .32s cubic-bezier(.36, .07, .19, .97);
}

@keyframes bbResaNudge {
    20% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    80% { transform: translateX(-2px); }
    100% { transform: none; }
}

/* Message au-dessus d'un bouton (dates manquantes) ou en tête d'étape (erreur générale), mêmes couleurs que les infobulles. */
#reservation-form.bb-resa .bb-resa-hint {
    position: relative;
    margin: 0 0 12px;
    padding: 7px 12px;
    background: var(--e-global-color-cc8ccdc);
    color: var(--e-global-color-8b7710f);
    font-family: var(--e-global-typography-4b71ab7-font-family), Sans-serif;
    font-size: var(--e-global-typography-4b71ab7-font-size);
    line-height: 1.4;
    text-align: center;
    animation: bbResaFade .2s ease backwards;
}

#reservation-form.bb-resa .bb-tip-anchor {
    position: relative;
}

#reservation-form.bb-resa .bb-resa-hint.bb-tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    margin: 0;
    z-index: 2;
}

#reservation-form.bb-resa .bb-resa-hint.bb-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--e-global-color-cc8ccdc);
}

/* Total : bref surlignage quand le prix change. */
#reservation-form.bb-resa .wpbs-line-item-total.bb-flash td {
    animation: bbResaFlash .9s ease;
}

@keyframes bbResaFlash {
    0% { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0); }
    25% { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--e-global-color-primary) 18%, transparent); }
    100% { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0); }
}

/* Clavier : les boutons du parcours sont atteignables et visibles au focus. */
#reservation-form.bb-resa .btn-resa:focus-visible,
#reservation-form.bb-resa .wpbs-form-field input:focus-visible,
#reservation-form.bb-resa .wpbs-form-field textarea:focus-visible,
#reservation-form.bb-resa .wpbs-form-field select:focus-visible {
    outline: 2px solid var(--e-global-color-primary) !important;
    outline-offset: 2px;
}

#reservation-form.bb-resa .reservation-step-title:focus {
    outline: none;
}

.bb-resa-live {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #reservation-form.bb-resa.bb-in-fwd .wpbs-form-fields > .bb-on,
    #reservation-form.bb-resa.bb-in-back .wpbs-form-fields > .bb-on,
    #reservation-form.bb-resa.bb-in-fwd[data-bb-current="0"] .wpbs-container,
    #reservation-form.bb-resa.bb-in-back[data-bb-current="0"] .wpbs-container {
        animation: bbResaFade .2s ease backwards;
    }

    #reservation-form.bb-resa .bb-nudge,
    #reservation-form.bb-resa .btn-reserver.bb-ready {
        animation: none;
    }

    #reservation-header.bb-resa-header {
        transition-duration: .01s;
    }
}