/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.2
*/


html, body {


}

.show-when-loaded
{
    display: none;
}


@media (max-width: 768px) {
    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
        padding: 0 15px !important;
    }
}

.woocommerce-page .inside-article
{
    margin: 0 1.5em;

}

@media (max-width: 768px) {
    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
        padding: 0 30px;
    }
}

.blue-icon
{
    color: #007bff;
}

.orange-icon
{
    color: #f6881f;
}


.centered-container
{
    display: flex;
    justify-content: center; /* Centre horizontalement */
    flex-direction: column; /* Empile verticalement */
    width: 100%; /* Assure que le conteneur s'étend sur toute la largeur */

}


.cemsa-user-name
{
    text-align: center;
}

.cemsa-header-nav
{
    margin-bottom: 1em;
}
.cemsa-header-nav a
{
    text-decoration: none;
    color: inherit;
}
.cemsa-header-nav svg
{
    vertical-align: middle;
    margin-right: 3px;
}

.cemsa-user-name svg
{
    vertical-align: top;
    margin-right: 5px;
}

.cemsa-card .atomic,
.cemsa-form .atomic
{
    white-space: nowrap;
}

a.cemsa-card-link
{
    text-decoration: none;
}

.cemsa-card
{
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    margin: 0 auto 1em auto;
    border: 1px solid #ea892c;
}

.cemsa-card.awaiting,
.cemsa-card.done,
.cemsa-card.issue
{
    background: rgb(246,136,31);
    background: linear-gradient(130deg, rgba(246,136,31,1) 53%, rgba(252,163,116,1) 100%);

}

.cemsa-card.expired
{
    background: rgb(146,146,146);
    background: linear-gradient(130deg, rgba(146,146,146,1) 53%, rgba(194,194,194,1) 100%);
}

a.cemsa-card-link .cemsa-card.awaiting:hover,
a.cemsa-card-link .cemsa-card.done:hover,
a.cemsa-card-link .cemsa-card.issue:hover {
    background: rgb(209,115,26);
    background: linear-gradient(130deg, rgba(209,115,26,1) 53%, rgba(214,138,99,1) 100%);
}

a.cemsa-card-link .cemsa-card.expired:hover {
    background: rgb(124,124,124);
    background: linear-gradient(130deg, rgba(124,124,124,1) 53%, rgba(165,165,165,1) 100%);
}


.cemsa-card-content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: stretch;
}

.cemsa-card-content .details h3,
.cemsa-card-content .details h4,
.cemsa-card-content .details h5,
.cemsa-card-content .details p
{
    margin: 0;
}
.cemsa-card-content .details h3
{
    font-size: 1.3em;
    margin-bottom: 0.2em;
}

.cemsa-card-content .details p.date
{
    font-size: 0.9em;
    line-height: 1.1em;
    margin-bottom: 0.5em;

}

.cemsa-card-content .details .cars-name p
{
    font-size: 1.1em;
    line-height: 1.3em;
    font-weight: 500;
}

.cemsa-card-content .details
{
    flex: 10;
    padding-right: 10px;
    display: flex;
    flex-direction: column; /* Disposition verticale */
}

.cemsa-card-content .details-bottom
{
    margin-top: auto;
}

.cemsa-card-content .cars
{
    display: flex;
    justify-content: space-between;
    gap:5px;
}

.cemsa-card-content .car h5
{
    font-size: 1.05em;
}
.cemsa-card-content .car img
{
    margin-top: 5px;
}

.cemsa-card-content .cars-count-1 .car .legend,
.cemsa-card-content .cars-count-2 .car .legend
{
    font-size: 1em;
    text-align: center;
    line-height: 1em;
}

.cemsa-card-content .cars-count-3 .car .legend
{
    font-size: 0.9em;
    text-align: center;
    line-height: 1em;
}

.cemsa-card-content .cars-count-4 .car .legend
{
    font-size: 0.8em;
    text-align: center;
    line-height: 1em;
}

.cemsa-card-content .car .legend.passenger
{
    /* pas de diff */
}

.cemsa-card-content .car em
{
    font-size: 0.8em;
    white-space: nowrap;
}

.cemsa-card-content .more-info
{
    border-left: 1px solid white;
    padding-left: 10px;
    flex: 7;
    font-size: 0.75em;
    display: flex;
    flex-direction: column; /* Disposition verticale */
}

.cemsa-card-content .more-info p
{
    margin: 0;
    margin-bottom: 0.5em;
}

.cemsa-card-content .more-info p.important
{
    font-size: 1.1em;
}

.cemsa-card-content .more-info-bottom
{
    margin-top: auto;
}

.cemsa-card-content .more-info .progress-bar
{
    border: 1px solid white;
    border-radius: 5px;
    margin-bottom: 5px;

    padding: 2px;
}

.cemsa-card-content .more-info .progress-bar .progress
{
    height: 10px;
    background: white;
    border-radius: 3px;
}
.cemsa-card.done .cemsa-card-content .more-info .progress-bar .progress
{
    background: #00FF2B;
}
.cemsa-card.issue .cemsa-card-content .more-info .progress-bar .progress,
.cemsa-card.expired .cemsa-card-content .more-info .progress-bar .progress
{
    background: #FF0000;
}

.cemsa-card-content .more-info .options {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    align-items: flex-start; /* Aligne les éléments au début verticalement */
    gap: 2px;
}

.cemsa-card-content .more-info .options .option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(50% - 1px);
}

.cemsa-card-content .more-info .options .option-icon {
    width: 50px;
    height: 22px;
    margin-bottom: 2px;
}

.cemsa-card-content .more-info .options .option-text-icon {

    height: 22px;
    line-height: 22px;
    font-size: 20px;
    margin-bottom: 2px;
    font-weight: 600;
}

.cemsa-card-content .more-info .options .option-item span {
    white-space: nowrap;
    font-size: 0.9em;
}


.cemsa-card-cta {
    text-align: center;
    display: block;
    min-height: 3em;
    position:relative;
    z-index: 999;
    top:-2em;
}

.cemsa-card-cta .btn {
    background: #007bff;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    transition: background 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}




.cemsa-form {
    margin-bottom: 2em;
}

.cemsa-form-content
{
    color: #333;
    border-radius: 10px;
    border: 1px solid #dfdfdf;
    background: #f2f3f5;
    /*background: #ECEEF1;*/
    width: 100%;
    padding: 1em;
}


.cemsa-form-content.success
{
    background: #edfeef;
    border:2px solid #306f4e;
    font-weight: bold;
}
.cemsa-form-content.warning
{
    background: #FFECE5;
}



.hint
{
    font-size: 0.9em;
    color: #333;
}
.cemsa-form-title h3
{
    font-size: 1.1em;
    line-height: 1em;
    color:#333;
}

.cemsa-form-content h4
{
    font-size: 1.1em;
    line-height: 1em;
    color:#333;
    margin-bottom: 0.5em;
}

.bottom-merge .cemsa-form
{
    margin-bottom: 0;
}

.bottom-merge .cemsa-form .cemsa-form-content
{
    border-radius: 10px 10px 0 0;
    border-bottom: 1px dashed #dfdfdf;
}

.top-merge .cemsa-form .cemsa-form-content
{
    border-radius: 0 0 10px 10px;
    border-top:none;
}


.choice-list {
    display: flex;
    gap: 0.5em; /* Espace entre les éléments */
    font-size: 0.8em;
}

.choice-list select {
    flex: 8; /* 80% de l'espace disponible */
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;


}

.choice-button
{
    text-align: center;
}

.update-row.choice-button
{
    text-align: right;
}

.choice-popup button,
.choice-list button,
.choice-button button,
.choice-button a,
.cemsa-popup .button-alt
{
    flex: 2; /* 20% de l'espace disponible */
    height: 40px;
    background: #007BFF;

    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
}



.cemsa-form-main-action button:disabled,
.cemsa-form-main-action button:disabled:hover,
.choice-button button:disabled,
.choice-button button:disabled:hover
{
    background: #757575;
    cursor: not-allowed;
    opacity: 0.7;
}

.warning .choice-button a,
.warning .choice-button button
{
    background: #FF2020;
}

.choice-popup button:hover,
.choice-list button:hover,
.choice-button button:hover,
.choice-button a:hover,
.cemsa-popup .button-alt:hover
{
    background-color: #0056b3;
}

.warning .choice-button a:hover,
.warning .choice-button button:hover
{
    background: #B30000;
}

.cemsa-form-main-action
{
    text-align: center;

}

.cemsa-form-main-action .button,
.cemsa-popup .button,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-button,
.button.button-alt
{
    background-color: #f6881f;
    color: white;
    border-radius: 10px;
}
.cemsa-form-main-action .button:hover,
.cemsa-popup .button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wc-block-checkout__actions_row .wc-block-components-button:hover,
.button.button-alt:hover
{
    background-color: #b26216;
}

.full-width
{
    width: 100%;
}


.input-webkit-box-reset
{
    -webkit-appearance: none; /* Désactive le style natif de Safari */
    appearance: none;

    display: block;
    color: var(--contrast);
    background-color: var(--base-2);
    border:1px solid var(--base);

    /* Hauteur forcée */
    height: 3em; /* Assure la même hauteur que les autres inputs */
    padding: 0 1em; /* Ajoute de l'espace interne pour le texte */
    line-height: normal; /* Évite que le texte soit mal centré */

    /* Correction du comportement de Safari */
    font-size: inherit;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;


}

.input-webkit-box-reset.arrow, .select-arrow
{
    /* Ajout d'une flèche */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23888'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

select:disabled.input-webkit-box-reset.arrow
{
    background: none;
}

.cemsa-form-content input, .cemsa-form-content select
{
    border-radius: 10px;
}

.d-flex {
    display: flex;
    gap: 0.5em;
    align-items: center; /* Centre verticalement les éléments */
}

.d-flex.margin
{
    margin-bottom: 1em;
    margin-left: 3em;
    margin-right: 3em;
}

.d-flex.margin-bottom
{
    margin-bottom: 1em;
}

.w-1-3
{
    flex: 1;
}



.w-8-10 {
    flex: 8;
}

.w-2-10 {
    flex: 2;
}

.w-4-10 {
    flex: 4;
}

.w-6-10 {
    flex: 6;
}

.w-5-10 {
    flex: 5;
}

.text-left
{
    text-align: left;
}
.text-right
{
    text-align: right;
}
.text-center
{
    text-align: center;
}

.small-margin-lr
{
    padding-left: 1em;
    padding-right: 1em;
}

.large-margin-lr
{
    margin-left: 2.5em;
    margin-right: 2.5em;
}

/* checkbox-wrapper-13 */

.checkbox-wrapper-13
{
    white-space: nowrap;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-13 input[type=checkbox] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .checkbox-wrapper-13 input[type=checkbox]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .checkbox-wrapper-13 input[type=checkbox]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    .checkbox-wrapper-13 input[type=checkbox]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }
    .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }
    .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
        cursor: not-allowed;
    }
    .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }
    .checkbox-wrapper-13 input[type=checkbox]:focus {
        box-shadow: 0 0 0 var(--focus);
    }
    .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
        width: 21px;
    }
    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
        opacity: var(--o, 0);
    }
    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
        --o: 1;
    }
    .checkbox-wrapper-13 input[type=checkbox] + label {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 4px;
    }

    .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
        border-radius: 7px;
    }
    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }
    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
        --r: 43deg;
    }
}

.checkbox-wrapper-13 * {
    box-sizing: inherit;
}
.checkbox-wrapper-13 *:before,
.checkbox-wrapper-13 *:after {
    box-sizing: inherit;
}

.table-label-status
{
    margin: 0;
}
.table-label-status,
.table-label-status td
{
    border: none;
}

.table-label-status tr.more-option .label
{
    font-style: italic;
    opacity: 0.8;
}

.table-label-status tr.wip td
{
    font-weight: bold;
}


.table-label-cart td
{
    height: 3.5em;
}




/* Overlay (fond grisé) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Couleur grise semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Toujours au-dessus du contenu */
}

.modal-overlay.active {
    display: flex;
}

/* Modal (fenêtre centrale) */
.modal {
    background: #F4F6FB;
    border-radius: 10px;
    padding: 20px;
    padding-top: 50px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    max-height: 90vh;

    display: flex;              /* ✅ clé pour que .scroller fonctionne */
    flex-direction: column;     /* ✅ en colonne */
}

.modal .scroller {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Bouton de fermeture */
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #c0c0c0;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1.2em;
    width: 2em;
}

/* Titre et texte de la modal */
.modal h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.modal p {
    font-size: 0.9em;
    margin-bottom: 20px;
}

.option-choice-style-c0 .bullet,
.option-choice-style-c1 .bullet,
.option-choice-style-c2 .bullet,
.option-choice-style-c3 .bullet
{
    width: 1em;
    display: inline-block;
    height: 10px;
    border-radius: 4px;
}



.option-choice-style-c0 { color: #2E7D32; }
.option-choice-style-c0 .bullet { background: #2E7D32; }

.option-choice-style-c1 { color: #1565C0; }
.option-choice-style-c1 .bullet { background: #1565C0; }

.option-choice-style-c2 { color: #1565C0; }
.option-choice-style-c2 .bullet { background: #1565C0; }

.option-choice-style-c3 { color: #1565C0; }
.option-choice-style-c3 .bullet { background: #1565C0; }



 */
.option-choice-style-open
{
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.option-choice-style-c0.disabled,
.option-choice-style-c1.disabled,
.option-choice-style-c2.disabled,
.option-choice-style-c3.disabled
{
    opacity: 0.5;
}


/* Masquer la modal par défaut */
.hidden {
    display: none;
}

/* Bouton général */
.btn {
    background: rgba(252, 163, 116, 1);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

.btn:hover {
    background: rgba(246, 136, 31, 1);
}

.top-margin
{
    margin-top: 1em;
}
.top-margin-xl
{
    margin-top: 2em;
}
.top-margin-xxl
{
    margin-top: 3em;
}
.top-small-margin
{
    margin-top: 0.5em;
}

.bottom-margin
{
    margin-bottom: 1em;
}

.bottom-margin-xl
{
    margin-bottom: 2em;
}

.bottom-margin-xxl
{
    margin-bottom: 3em;
}

.small-margin
{
    margin: 0.5em;
}

.margin-touch-check
{
    margin-top: 1em;
    margin-bottom: 1em;
}

.checkbox-wrapper-13.multilines
{
    white-space: wrap !important;

}

.checkbox-wrapper-13.multilines label
{
    display: inline !important;
}

.time-bubble
{
    font-size: 3em;
    color: #5093FE;
    font-weight: bold;
    background: #E7EBF5;
    padding: .1em .5em;
    border-radius: .25em;
}

@media (min-width: 500px) {
    .cemsa-card
    {
        font-size: 1.1em;
    }
}
@media (min-width: 600px) {
    .cemsa-card
    {
        font-size: 1.2em;
    }
}

.warning-block
{
    background: #FFECE5;
    border-radius: 5px;
    color: black;
    text-align: left;
    padding: .2em 1em;
    font-size: .9em;
}


/* steps indicator */

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    color: #ccc;


    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;

}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    color:white;

    margin-bottom: 6px;

}

.stepper-item.active {
    font-weight: bold;
    color: #5093FE;
}

.stepper-item.completed
{
    color: #5093FE;
}

.stepper-item.active .step-counter
{
    border: 3px solid #5093FE;
    color: #5093FE;
    background: white;
}

.stepper-item.completed .step-counter {
    background-color: #5093FE;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #5093FE;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}

.error, .warning
{
    color: #81362c; /* #ee6352;*/
}

.success
{
    color: #306f4e; /*#59cd90;*/
}

/* sécurity check */
.pass-security-check .progress
{

    height: 1em;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--base);

    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.pass-security-check .level-0,
.pass-security-check .level-1,
.pass-security-check .level-2
{
    display: none;
}



.pass-security-check.level-0 .progress
{
    background: #ee6352;
    width: 30%;
}
.pass-security-check.level-1 .progress
{
    background: #fac05e;
    width: 70%;
}
.pass-security-check.level-2 .progress
{
    background: #59cd90;
    width: 100%;
}

.pass-security-check.level-0 .level-0
{
    display: block;
}
.pass-security-check.level-1 .level-1
{
    display: block;
}
.pass-security-check.level-2 .level-2
{
    display: block;
}



input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled
 {
    color: #999; /* Texte grisé */
    background: none;
    cursor: not-allowed;
    border-color: #cfcfcf;
    font-style: italic;
}


/* cemsa-new-registration */
.cemsa-new-registration
{
    display: flex;
    background: #f7f8fc;
    border-radius: 10px;
    padding: 0;
    color: black;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
    border: 1px solid #bbb;
    min-height: 100px;
}

.cemsa-new-registration .marker
{
    flex: 1;
    background: #F9935A;
    color: white;
    border-radius: 10px 0 0 10px;
    font-size: 32px;
    text-align: center;
    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    transition: background 0.3s ease, transform 0.2s ease, font-size 0.3s ease;
}

.cemsa-new-registration .content
{
    flex: 5;
    padding-left: 1em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    transition: background 0.3s ease, transform 0.2s ease, font-size 0.3s ease;
}
.cemsa-new-registration .content h3
{
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 1.5em;
    transition: font-size 0.3s ease;
}
.cemsa-new-registration .content p
{
    margin: 0;
    padding: 0;
    color: #333;
}

.cemsa-new-registration:hover
{
    background: #ebebeb;
    /*border: 1px solid #ccc;*/
    box-shadow: 0px 0px 0px #eee;
}

.cemsa-new-registration:hover .marker
{
    background: rgba(246, 136, 31, 1);
    font-size: 48px;
}

.cemsa-new-registration:hover .content h3
{
    color: rgba(246, 136, 31, 1);
    
}


/* cemsa_link_card */
.cemsa_link_card
{
    display: block;
    background: #ECEEF1;
    border-radius: 15px;

    text-align: center;
    text-decoration: none;
    width: 300px;
    margin: 0 auto;
    margin-bottom: 1.5em;

    min-height: 160px;

    display: flex; /* Active Flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */

    color: black;
}

.cemsa_link_card img
{
    width: 180px;
}

.cemsa_link_card .text
{
    font-size: 1.8em;
}

.cemsa_link_card:hover
{
    background: #cfcfcf;
}

.cemsa_link_card:hover img,
.cemsa_link_card:hover .text
{
    opacity: 0.8;
}

.dots-menu-icon
{
    background: #ECEEF1;
    padding-left: 10px;
    padding-left: 5px;
    border-radius: 0.3em;
}


/* woocommerce */

.wc-block-checkout__actions_row
{
    text-align: center !important;
    display: block !important;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button
{
    display: inline-block;
}

.wc-block-components-checkout-return-to-cart-button,
.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wc-block-components-checkout-step__title,
.wc-block-checkout__order-notes,
.checkout-order-summary-block-fill
{
    display: none !important;
}

.rem--wp-block-woocommerce-checkout-order-summary-block .rem--wp-block-woocommerce-checkout-order-summary-block
{
    display: flex !important;
}


.woocommerce #payment,
.woocommerce-page #payment
{
    text-align: center !important;
}


.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order
{
    background-color: #f6881f;
    color: white;
    border-radius: 10px;
    font-size: 1em !important;
    padding: 10px 20px !important;
    font-weight: normal !important;
    width: auto !important;
    display: inline-block !important;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover
{
    background-color: #b26216;
}


#customer_details+#wc_checkout_add_ons, #order_review, #order_review_heading
{
    float: none !important;
    width: auto !important;
}





.choice-button a.edit-button
{
    padding-top: 0.7em;
    padding-bottom: 0.2em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    border-radius: 50px;
}

.choice-button button.link-button
{
    color: #007BFF;
    text-decoration: underline;
    font-weight: bold;
    background: none;
}



span.mandatory
{
    color:red;
}

.option-side-image
{

}



.cemsa-form-main-action .button, .cemsa-popup .button, .wc-block-cart__submit-container .wc-block-cart__submit-button, .wc-block-checkout__actions_row .wc-block-components-button, .button.button-alt, .cemsa-card-cta .btn
{
    font-size: 1.1em;
}



ul.option-list {
    list-style: none; /* Enlève les puces par défaut */
    padding-left: 20px; /* Ajoute de l'espace à gauche pour les nouvelles puces */
}

ul.option-list
{
    margin: 0 0 0 0;
}

ul.option-list > li {
    position: relative;
}

ul.option-list > li::before {
    content: '●'; /* Utilise un point comme puce */
    font-size: 18px; /* Taille du point, ajustée pour être plus grosse */
    color: #007BFF; /* Couleur des puces */
    position: absolute;
    left: -20px; /* Ajuste la position du point à gauche */
    top: 50%;
    transform: translateY(-50%); /* Centre verticalement */
}



.changing-status.changed {
    animation: shrinkBounce 0.4s ease-in-out;
}

@keyframes shrinkBounce {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    60% {
        transform: scale(1.05);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}




/* accordion */
.accordion {

}

.accordion-header {
    margin-top: 1em;
    background-color: #fff;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
    font-size: 1.3em;

    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}

.accordion.open .accordion-content {
    padding: 10px 16px;
}

.accordion .chevron {
    display: inline-block;
    transition: transform 0.3s ease;
    width: 1em;
    height: 1em;
    position: relative;
    flex-shrink: 0;
}

.accordion .chevron::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transition: transform 0.3s ease;
}

.accordion .accordion.open .chevron::before {
    transform: translate(-50%, -50%) rotate(-135deg) scale(1);
}

/* help block */
.help-block .gb-headline-text-intro
{
    margin-bottom: 2.25rem;
}

.help-block .gb-highlight
{
    color: var(--accent);
}
.help-block .icon-and-text
{
    display: flex;
    align-items: flex-start;
    column-gap: 1rem;
    margin-bottom: 0.75rem;
}

.help-block .icon-and-text .gb-icon svg
{
    width: 1.6875rem;
    height: 1.6875rem;
}

.help-block .icon-and-text .gb-icon,
.help-block .icon-and-text .gb-icon svg
{
    color: var(--accent);
}
.help-block h4
{
    font-size: 1.25em;
}


.progress-carusage-container {
    width: 100%;
    max-width: 300px;
    height: 24px;
    background-color: #4caf50;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-carusage-bar {
    height: 100%;
    background-color: #f44336;
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    transition: width 0.3s ease;
    position: relative;
}



/* international telephone input */
.iti {
    width: 100% !important;
}

.iti__search-input
{
    padding-left: 30px !important;
}


/* validation checklist */
.checklist-validation-steps {
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 5px;
}

.checklist-validation-steps .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.2;
    opacity: 0.7;
    color: #fff; /* explicite, au cas où */
}

.checklist-validation-steps .circle {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 11px;     /* coche un peu plus fine */
    font-weight: 700;

    background: transparent;
    color: transparent;  /* pas de coche par défaut */
}

.checklist-validation-steps .item.done {
    font-weight: 600;
    opacity: 1;
}

.checklist-validation-steps .item.done .circle {
    border-color: #fff;
    background: #fff;
    color: #F8923E;      /* ta couleur principale pour la coche */
}

.checklist-validation-steps .item.done  .circle::before {
    content: "✔";
}