/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {
    /* -- page global -- */
    html, body {
        width: 100%;
        margin: 0px;
        padding: 0px;
        scroll-behavior: smooth;
    }

    main {
        position: relative;
    }

    /* Titre "standard" de section */
    .section-base-ttr {
        font-family: 'Teko', sans-serif;
        font-size: 42px;
        font-weight: 500;
        color: var(--noir-texte);
        line-height: 1.0;
        margin-bottom: 8px;
    }

    .section-base-ttr.accent-voyageur {
        color: var(--secondary);
    }

    .section-base-ttr.accent-annonceur {
        color: var(--primary);
    }

    .section-base-ttr.accent-darkbg {
        color: #ffffff;
    }

    /* Paragraphe "standard" de section */
    .section-base-txt {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: var(--noir-texte);
        margin: 0;
    }

    .section-base-txt:not(:last-of-type) {
        margin: 0 0 5px 0;
    }

    .section-base-txt.accent-darkbg {
        color: #ffffff;
    }

    /* Barre contenant les boutons/liens de CTA d'une section */
    .section-base-cta-bar {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    /* Bouton standard CTA */
    .section-base-cta-btn {
        text-decoration: none;
        background-color: var(--noir-clair);
        padding: 6px 15px;
        color: #ffffff;
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        width: -moz-fit-content;
        width: fit-content;
        border-radius: 5px;
        cursor: pointer;
        border: none;
    }

    .section-base-cta-btn:hover {
        background-color: var(--primary-grad2);
    }

    .section-base-cta-btn.accent-voyageur {
        background-color: var(--secondary);
    }

    .section-base-cta-btn.accent-voyageur:hover {
        background-color: var(--secondary-dark);
    }

    .section-base-cta-btn.accent-annonceur {
        background-color: var(--primary);
    }

    .section-base-cta-btn.accent-annonceur:hover {
        background-color: var(--primary-grad2);
    }

    /* Lien standard CTA */
    .section-base-cta-link {
        text-decoration: none;
        color: var(--noir-texte);
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }

    .section-base-cta-link:hover {
        color: var(--primary-grad2);
    }

    .section-base-cta-link.accent-darkbg {
        color: #ffffff;
    }

    .section-base-cta-link.accent-darkbg:hover {
        color: var(--primary-grad1);
    }

    .btn-link {
        width: fit-content;
        width: -moz-fit-content;
        padding: 0;
    }

    .btn-primary-T1 {
        background: var(--primary);
        color: #ffffff;
        border-radius: 6px;
        padding: 10px 18px;
        border: none;
        font-family: 'Cabin', sans-serif;
        font-size: 18px;
        font-weight: 400;
        text-decoration: none;
    }

    .btn-primary-T1:hover, .btn-primary-T1:focus {
        background: var(--primary-grad2);
        color: #ffffff;
    }

    .btn-primary-T1:active {
        background: var(--primary-dark);
        color: #ffffff;
    }

    .hide-element {
        display: none!important;
    }

    /* --- style des différentes types d'input form du site --- */
    .form-bloc {
        margin-bottom: 30px;
    }

    .with-flav-txt {
        margin-bottom: 20px;
    }

    .form-bloc label {
        font-family: 'Cabin', sans-serif;
        font-size: 20px;
        font-weight: 400;
        color: var(--noir-texte);
        margin-bottom: 8px;
    }

    .form-bloc .label-optionnel {
        font-family: 'Cabin', sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: var(--gris);
        font-style: italic;
        margin-left: 5px;
    }

    input, textarea {
        width: 100%;
        padding: 12px 15px;
        background: var(--gris-contraste);
        border: 1px solid var(--gris);
        border-radius: 4px;
        outline: 0;
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: var(--noir-texte);
    }

    textarea {
        height: 250px;
    }

    .input-lpad {
        padding: 12px 15px 12px 40px;
    }

    .input-rpad {
        padding: 12px 40px 12px 15px;
    }

    input:hover {
        border: 1px solid var(--primary);
        border-color: var(--primary)!important;
    }

    input:focus, input:focus-within, .input:active, .input:focus-visible {
        border: 1px solid var(--primary);
        border-color: var(--primary)!important;
        background: #ffffff;
    }

    textarea:hover {
        border: 1px solid var(--primary);
        border-color: var(--primary)!important;
    }

    textarea:focus, textarea:focus-within, .textarea:active, .textarea:focus-visible {
        border: 1px solid var(--primary);
        border-color: var(--primary)!important;
        background: #ffffff;
    }

    input::placeholder, textarea::placeholder {
        font-style: italic;
        color: var(--gris);
    }

    .field-empty, .field-empty:hover, .field-empty:focus, .field-empty:focus-visible, .field-empty:focus-within, .field-empty:active {
        border: 2px solid var(--attention);
        border-color: var(--attention)!important;
        background: #eef5ff;
    }

    .field-invalid, .field-invalid:hover, .field-invalid:focus, .field-invalid:focus-visible, .field-invalid:focus-within, .field-invalid:active {
        border: 2px solid var(--negatif);
        border-color: var(--negatif)!important;
        background: #fff9f9;
    }

    /* styles pour les cases à cocher */
    .container-checkbox {
        display: block;
        position: relative;
        padding-left: 30px;
        margin-bottom: 15px;
        cursor: pointer;
        user-select: none;
        font-family: 'Cabin', sans-serif!important;
        font-size: 16px!important;
        color: var(--noir-texte);
    }

    .container-checkbox a {
        color: var(--primary);
        text-decoration: none;
    }

    .container-checkbox a:hover {
        color: var(--primary-grad2);
    }

    .container-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-checkmark {
        position: absolute;
        top: 2px;
        left: 0;
        height: 20px;
        width: 20px;
        border-radius: 5px;
        background-color: #ffffff;
        border: 2px solid var(--gris);
    }

    .container-checkbox:hover input ~ .custom-checkmark {
        background-color: var(--gris-contraste);
        border-color: var(--primary-grad2);
    }

    .container-checkbox:hover input:checked ~ .custom-checkmark {
        background-color: var(--gris-contraste);
        border-color: var(--primary-dark);
    }

    .container-checkbox input:checked ~ .custom-checkmark {
        border-color: var(--primary);
    }

    .custom-checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .container-checkbox input:checked ~ .custom-checkmark:after {
        display: block;
    }

    .container-checkbox .custom-checkmark:after {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 3px;
        background: var(--primary);
    }

    .container-checkbox:hover input:checked ~ .custom-checkmark:after {
        background-color: var(--primary-dark);
    }

    .check-missing .custom-checkmark {
        border-color: var(--negatif);
    }

    .check-missing {
        color: var(--negatif)!important;
    }

    /* styles pour version avec label imbriqué flottant */
    .float-label-grp {
        position: relative;
        display: flex
    }

    .float-label-grp label {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 16px;
        font-style:italic;
        color: var(--gris);
        transition: top 0.2s ease-in-out, left 0.2s ease-in-out, font-size 0.2s ease-in-out;
        z-index: 2;
    }

    .float-label-grp label {
        cursor: text;
        user-select: none;
    }

    .float-input {
        width: 100%;
    }

    /* style pour label flottant */
    .float-input ~ label::before {
        content: "";
       /* height: 2px;*/
        height: 4px;
        width: calc(100% + 14px);
        position: absolute;
        z-index: -1;
        top: 50%;
        transform: translateY(-50%);
        left: -7px;
        background: var(--gris-contraste);
        opacity: 0;
        /*transition: opacity 0.1s ease;*/
    }

    .float-input:focus ~ label::before {
        background: #ffffff;
    }

    .float-input:focus ~ label::before, .float-input:not(:placeholder-shown) ~ label::before{
        opacity: 1;
    }

    .float-input:focus ~ label, .float-input:not(:placeholder-shown) ~ label {
        left: 20px;
        top: -10px;
        transform: translate(0, 0%);
        font-size: 14px;
    }

    .float-input:focus ~ label {
        color: var(--primary);
    }

    .float-input:not(:placeholder-shown):hover ~ label {
        color: var(--primary);
    }

    /*.float-line-mask {
        content: "";
        height: 2px;
        position: absolute;
        top: 0;
        left: 16px;
        background: var(--gris-contraste);
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    .float-input:focus ~ .float-line-mask, .float-input:not(:placeholder-shown) ~ .float-line-mask{
        opacity: 1;
    }

    .float-input:focus ~ .float-line-mask {
        background: #ffffff;
    }*/

    /* styles pour icone imbriquée dans input */
    .ico-input-grp {
        position: relative;
    }

    .ico-input-left, .ico-input-right {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 25px;
        height: 25px;
        pointer-events: none;
    }

    .ico-input-left {
        left: 15px;
    }

    .ico-input-right {
        right: 15px;
    }

    /* style compteur de caractères */
    .cara-counter {
        display: flex;
        justify-content: end;
        gap: 4px;
        font-family: 'Cabin', sans-serif;
        font-size: 14px;
        color: var(--gris);
        font-style: italic;
        opacity: 0;
    }

    input:focus ~ .cara-counter, textarea:focus ~ .cara-counter {
        opacity: 1;
    }

    .compt-maxed {
        color: var(--negatif);
        font-weight: 900;
    }

    /* style flavor text sous un input */
    .input-flav-txt {
        display: flex;
        justify-content: start;
        gap: 4px;
        font-family: 'Cabin', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: var(--gris);
        font-style: italic;
        opacity: 0;
        margin-top: 5px;
        
    }

    .input-flav-txt p {
        margin-bottom: 0;
    }

    /* --- Variante spéciale pour la création de mot de passe (créer compte + redéfinir mdp) --- */

    /* Conteneur du groupe de contrainte */
    .input-flav-txt#Password_constraints_grp {
        flex-direction: column;
        gap: 6px;
    }

    /* Contrainte composée d'une icone et d'un texte */
    .pass-constraint-txt {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: start;
    }

    /* Icone de la contrainte */
    .pass-constraint-txt .mask-ico {
        -webkit-mask-image: url(../svg/ico-croix.svg);
        mask-image: url(../svg/ico-croix.svg);
        background-color: var(--negatif);
        min-width: 15px;
        width: 15px;
        min-height: 15px;
        height: 15px;
        margin: 0 5px 0 0;
    }

    /* Contenu texte de la contrainte */
    .pass-constraint-txt .txt-content {
        
    }

    /* -- État "valide" si la contrainte est respectée -- */
    .pass-constraint-txt[valid] {

    }

    .pass-constraint-txt[valid] .mask-ico {
        -webkit-mask-image: url(../svg/ico-checkmark.svg);
        mask-image: url(../svg/ico-checkmark.svg);
        background-color: var(--positif);
    }

    .pass-constraint-txt[valid] .txt-content {
        color: var(--positif);
    }


    /* styles bouton d'envoi */
    .send-btn-form {
        background: var(--primary);
        color: #ffffff;
        font-family: 'Cabin', sans-serif;
        font-size: 20px;
        border-radius: 6px;
        border: none;
        width: 100%;
        max-width: 300px;
        padding: 12px 20px;
        margin: auto;
    }

    .send-btn-form:hover, .send-btn-form:focus {
        background: var(--primary-grad2);
        border: none;
    }

    input[type="button"]:disabled, input[type="button"]:disabled:hover {
        background: var(--attention);
        cursor: not-allowed;
    }

    .msg-sent {
        display: flex;
        background: var(--attention);
        cursor: not-allowed;
        border-radius: 6px;
        border: none;
        padding: 12px 25px;
        margin: auto;
    }

    .msg-sent img {
        width: 15px;
        height: 15px;
        margin: auto 8px auto auto;
    }

    .msg-sent p {
        color: #ffffff;
        font-family: 'Cabin', sans-serif;
        font-size: 20px;
        margin: 0;
    }

    /* --------------------- Style des modals ------------------------ */
    body:has(.modal-overlay.show-overlay) {
        overflow: hidden;
    }

    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
    }

    .show-overlay {
        display: block;
    }

    /* zone blanche du modale contenant les éléments */
    .conteneur-modal {
        position: fixed;
        bottom: 0;
        left: 50%;
        background: #ffffff;
        border-radius: 15px 15px 0 0;
        padding: 25px 0px 40px 0px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        max-width: 992px;
        transform: translate(-50%, 101%);
        transition: transform 150ms linear;
    }

    .modal-animation {
        transform: translate(-50%, 0%);
    }

    .modal-row {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        width: 100%;
        padding: 0 20px;
    }

    .modal-row.modal-row-fullwidth {
        padding: 0px;
        flex-wrap: wrap;
    }

    .modal-row-btn {
        justify-content: space-between!important;
    }

    /* variante pop-up même sur mobile (pour petit message de chargement par exemple) */
    .pop-up-only {
        width: -moz-max-content;
        width: max-content;
        max-width: 85%;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        padding: 30px 0px 30px 0px;
    }

    .pop-up-only .modal-row {
        justify-content: center;
    }
    .pop-up-only.modal-animation {
        transform: translate(-50%, -50%);
    }

    /* icone du modal */
    .ico-enonce-modal {
        width: 34px;
        margin: 0 8px 0 0;
    }

    .txt-enonce-modal {
        font-family: 'Roboto', sans-serif;
        font-size: 18px;
        font-weight: 500;
        color: var(--noir-texte);
        margin: 0;
        line-height: 1.2;
    }

    .txt-enonce-modal-bleu {
        color: var(--secondary);
    }

    .txt-alt-enonce-modal {
        text-align: center;
        color: var(--secondary);
        font-weight: 700;
        margin: 0 auto 0 auto;
        font-size: 20px;
    }

    .txt-sm-enonce-modal {
        font-size: 16px;
    }

    /* passer un texte important en rouge */
    .modal-txt-alert {
        color: var(--negatif-light);
    }

    .italic-txt-modal {
        font-style: italic;
    }

    .modal-btn {
        background: var(--noir-clair);
        color: #ffffff;
        border-radius: 5px;
        border: none;
        width: 48%;
        font-family: 'Roboto', sans-serif;
        font-size: 19px;
        font-weight: 500;
        text-align: center;
        padding: 6px 15px;
    }

    .modal-btn:focus, .modal-btn:focus-visible {
        outline: none;
        background: var(--secondary);
    }

    .modal-btn:hover {
        background: var(--secondary);
    }

    .modal-btn.modal-btn-bleu {
        background: var(--secondary);
    }

    .modal-btn.modal-btn-bleu:hover, .modal-btn.modal-btn-bleu:focus, .modal-btn.modal-btn-bleu:focus-visible {
        background: var(--secondary-dark);
    }

    .modal-btn.modal-btn-prune {
        background: var(--primary-grad2);
    }

    .modal-btn.modal-btn-prune:hover, .modal-btn.modal-btn-prune:focus, .modal-btn.modal-btn-prune:focus-visible {
        background: var(--primary);
    }

    .modal-btn-solo {
        width: 100%;
    }

    /* Petite barre d'info sur une ligne, présente dans les modals */
    .modal-infobar-ligne-bus {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: var(--gris-background);
        border-top: 1px solid var(--secondary-light);
        cursor: pointer;
        padding: 8px 10px;

    }

    .modal-infobar-ligne-bus:last-child {
        border-bottom: 1px solid var(--secondary-light);
    }

    .modal-infobar-ligne-bus:hover {
        background: var(--gris-bleu);
    }

    /* Numéro de la ligne */
    .modal-infobar-num {
        /* padding: 4px 12px 3px 12px;
        min-width: 42px; */
        padding: 4px 6px 3px 6px;
        width: 48px;
        height: 31px;
        background: var(--primary-grad2);
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
        color: #ffffff; 
    }

    /* Zone de texte terminus et nom complet ligne */
    .modal-infobar-txt-zone {
        display: flex;
        flex-direction: column;
    }

    .modal-infobar-txt-zone * {
        margin: 0;
        line-height: 1.2;
    }

    .txt-bloc-info-ligne {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--noir-texte);
    }

    .txt-bloc-info-ligne-terminus {
        font-family: 'Cabin', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--gris);
    }

    /* formulaire de changement de ligne */
    #Mod_changer_ligne .modal-row:first-of-type {
        justify-content: center;
    }

    #Mod_changer_ligne .modal-row:first-of-type .txt-enonce-modal {
        color: var(--secondary);
    }

    .explo-ligne-box {
        position: relative;
        width: 100%;
    }

    .explo-ligne-box input {
        width: 100%;
        padding: 12px 10px;
        line-height: 1.2;
        border: 1px solid var(--gris-form);
        border-radius: 8px;
        background-color: #ffffff;
        -webkit-box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.12); 
        box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.12);
        margin-bottom: 12px;
    }

    .explo-ligne-box input::placeholder {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        color:var(--gris-form);
    }

    .explo-lign-btn {
        display: flex;
        justify-content: center;
        background: var(--secondary);
        text-decoration: none;
        width: 100%;
        padding: 10px 15px;
        border-radius: 8px;
        cursor: pointer;
    }

    .explo-lign-btn:hover {
        background: var(--secondary-dark);
    }

    .explo-lign-btn.disabled-btn {
        background: var(--gris-mid);
        pointer-events: none;
    }

    .explo-lign-btn .btn-ico {
        background-image: url("../svg/ico-loupe-blanc.svg");
        width: 22px;
        height: 22px;
        margin: auto 0 auto 0;
    }

    .explo-lign-btn .btn-txt {
        font-family: 'Cabin', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        margin: auto 0 auto 5px;
    }

    /* Style spécifique du preloader */
    .explo-ligne-box .loading-buffer-anim {
        background: rgba(255, 255, 255, 0.9);
        display: none;
    }



    

    /* Bloc preloader générique appelé à différents endroits de l'interface au besoin */
    .loading-buffer-anim {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #ffffff;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        z-index: 2;
        border-radius: inherit;
    }

    .loading-buffer-anim p {
        font-family: 'Roboto';
        color: var(--noir-texte);
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        margin: 0;
    }

    /* =======================================
    Animation des points de chargements loader
    ======================================= */
    .dot-flashing {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--secondary);
        color: var(--secondary);
        animation: anim-dot-flashing 0.8s infinite linear alternate;
        animation-delay: 0.4s;
        margin-right: 25px;
    }
    .dot-flashing::before, .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }
    .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--secondary);
        color: var(--secondary);
        animation: anim-dot-flashing 0.8s infinite alternate;
        animation-delay: 0s;
    }
    .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--secondary);
        color: var(--secondary);
        animation: anim-dot-flashing 0.8s infinite alternate;
        animation-delay: 0.8s;
    }
    
    @keyframes anim-dot-flashing {
        0% {
        background-color: var(--secondary);
        }
        50%, 100% {
        background-color: rgba(33, 149, 243, 0.2);
        }
    }

    @keyframes anim-dot-flashing-white {
        0% {
        background-color: #ffffff;
        }
        50%, 100% {
        background-color: rgba(255, 255, 255, 0.2);
        }
    }

}


/* ----------------------------------------------- */
/* ---------- PETIT TABLETTE SM - 576px ---------- */
@media (min-width:576px) {

    .msg-sent {
        margin: auto 0 auto auto;
    }

}




/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    
}


/* ----------------------------------------------------------------------- */
/* ---------- Toutes tailles mobile uniquement - moins de 992px ---------- */
@media (min-width:1px) and (max-width:992px) {

    /* Bloquer le scroll sur le body si la nav mobile est ouverte */
    body:has(.navbar.navbar-open) {
        overflow: hidden;
    }

}


/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {

    .btn-primary-T1 {
        font-size: 19px;
    }

    /* --- style des différentes types d'input form du site --- */

    label {
        font-size: 18px;
    }

    input, textarea {
        padding: 8px 15px 8px 15px;
    }

    .input-lpad {
        padding: 12px 8px 8px 40px;
    }

    .input-rpad {
        padding: 8px 40px 8px 15px;
    }

    .send-btn-form {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
    }

    .ico-input-left, .ico-input-right {
        width: 20px;
        height: 20px;
    }

    

    /* adaptation des modals en pop-ups */
    .conteneur-modal {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 550px;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        padding: 30px 0px 30px 0px;
        transition: transform 0ms linear;
    }

    .modal-animation{
        transform: translate(-50%, -50%);
    }

    .modal-row {
        padding: 0 30px;
        justify-content: center;
    }

    .modal-infobar-ligne-bus {
        max-width: 90%;
        border: 1px solid var(--secondary-light);
    }

}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {
    /* Titre "standard" de section */
    .section-base-ttr {
        font-size: 48px;
    }

    /* Paragraphe "standard" de section */
    .section-base-txt {
        font-size: 18px;
    }

    /* Barre contenant les boutons/liens de CTA d'une section */
    .section-base-cta-bar {
        gap: 30px;
    }

    /* Bouton standard CTA */
    .section-base-cta-btn {
        font-size: 17px;
    }

    /* Lien standard CTA */
    .section-base-cta-link {
        font-size: 17px;
    }
}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {


}

/* ---------------------------------------------- */
/* ---------- EXCEPTION - 2400px ---------- */
@media (min-width:2400px) {



}

/* CODE DE BUG FIX DEDIE A SAFARI */
@media not all and (min-resolution:.001dpcm) { 

    /* règle le problème menu hamburger positionné hors champ sur Safari 13/iOS 13 */
    @media (min-width:1px) and (max-width:991px) {
        .cara-counter {
            gap: 0px;
            float: right;
        }

        .cara-counter span {
            margin-left: 4px;
        }
    }



}