/* FORTUNEO */
/* FONT */

/*
	Copyright (C) Hoefler & Co.
	This software is the property of Hoefler & Co. (H&Co).
	Your right to access and use this software is subject to the
	applicable License Agreement, or Terms of Service, that exists
	between you and H&Co. If no such agreement exists, you may not
	access or use this software for any purpose.
	This software may only be hosted at the locations specified in
	the applicable License Agreement or Terms of Service, and only
	for the purposes expressly set forth therein. You may not copy,
	modify, convert, create derivative works from or distribute this
	software in any way, or make it accessible to any third party,
	without first obtaining the written permission of H&Co.
	For more information, please visit us at http://typography.com.
*/

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Gotham'), local('Gotham-Book'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Book.woff2') format('woff2'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Book.woff') format('woff'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Book.ttf') format('truetype');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local('Gotham'), local('Gotham-Medium'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Medium.woff2') format('woff2'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Medium.woff') format('woff'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local('Gotham'), local('Gotham-Bold'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Bold.woff2') format('woff2'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Bold.woff') format('woff'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: local('Gotham'), local('Gotham-BookItalic'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-BookItalic.woff2') format('woff2'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-BookItalic.woff') format('woff'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-BookItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-display: swap;
    font-weight: 500;
    src: local('Gotham'), local('Gotham-MediumItalic'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-MediumItalic.woff2') format('woff2'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-MediumItalic.woff') format('woff'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-display: swap;
    font-weight: 700;
    src: local('Gotham'), local('Gotham-BoldItalic'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-BoldItalic.woff2') format('woff2'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-BoldItalic.woff') format('woff'), url('https://static.europ-assistance.fr/Conciergerie_Arkea/fonts/FORTUNEO/Gotham/Gotham-BoldItalic.ttf') format('truetype');
}

/*  */
/*  */
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    margin-bottom: 0px !important;
}

.modal-open {
    height: 100vh;
}

html {
    /* Couleur generique */
    --primaire-color: #8FD448;
    --secondaire-color: #005E6E;
    --tertiaire-color: #000000;
    /* Couleur generique */
    /* COULEUR NAVBAR #004652*/
    --bg-nav: #000000;
    --bg-nav-hover: #999999;
    --bg-body: #000000;
    /* COULEUR NAVBAR */
    /* couleur txt courant */
    --font-color: #232323;
    --font-color-white: #fff;
    /* couleur txt courant */
    /* COULEUR MODAL */
    --modal-header-color: #0085ab;
    /* COULEUR MODAL */
    /* bouton */
    --button-hover: #A5DD6C;
    --color-button: #0085ab;
    --color-white: #fff;
    --color-disabled: #d0d0d0;
    --txt-disabled: #FFF;
    /* bouton #009597*/
    /* couleur txt du telephone de la home */
    --phone: #999999;
    --phone-hover: #999999;
    /* couleur txt du telephone de la home */

    --filet: #D0D0D0;
    /*bandeau de selection des offres*/
    --bandeau-selection: #000000;
    /*bandeau de selection des offres*/
    /* Taille Font */
    --text-courant-taille-font: 12px;
    --text-msgError-taille-font: 11px;
    /* Taille Font */
    /*Message erreur*/
    --msgError: #ED1B2F;
    --msgValid: #007461;
    /*Message erreur*/
    /* Bandeau Collapse et titre*/
    --collapseBox: #EDEDED;
    /* Bandeau Collapse et titre*/
    /* Margin Bottom */
    --marginBottom83: 83px;
    /* Margin Bottom */
}

body {
    font-family: 'Shone', Shone, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--bg-body) !important;
    color: var(--font-color) !important;
}

.content {
    flex: 1 0 auto;
}

/* MARGES */
.marginBottom83 {
    margin-bottom: var(--marginBottom83);
}

.ms-2_5 {
    margin-left: 40px;
}

.ms-2_5 {
    margin-left: 40px;
}

.w-140 {
    width: 140px;
}

/* MARGES */
/* ---HEADER--- */
header {
    position: relative;
    width: 100%;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.43) 40%, rgba(0, 0, 0, 0.9) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
    overflow: hidden;
}

.pictureHome {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -999999999;
}

.logoPortail {
    background-image: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/LOGO.svg);
    background-size: cover;
    width: 120px;
    height: 60px;
}

@media screen and (min-width:767px) and (max-width:1022px) {
    .pictureHome {
        top: -4px;
        left: -199px;
        width: 172%;
    }
}

@media screen and (min-width:350px) and (max-width:420px) {
    .pictureHome {
        top: -4px;
        left: -759px;
        width: 422%;
    }

    header {
        height: 600px;
    }
}

@media screen and (min-width:421px) and (max-width:550px) {
    .pictureHome {
        top: -4px;
        left: -962px;
        width: 370%;
    }

    header {
        height: 600px;
    }
}

@media screen and (min-width:551px) and (max-width:766px) {
    .pictureHome {
        top: -4px;
        left: -962px;
        width: 370%;
    }

    header {
        height: 600px;
    }
}

@media screen and (min-width:1024px) and (max-width:1445px) {
    .pictureHome {
        top: -11px;
        width: 130%;
    }
}

.homeLogoConnect {
    display: flex;
    align-items: center;
    padding: 20px 40px;
    height: 113px;
}

/* titre du header + txt courant et bouton  */
.homeVerbatim {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 0px auto;
    max-width: 750px;
    height: 500px;
}

    .homeVerbatim h1 {
        color: var(--font-color-white);
        font-size: 60px;
        /*  font-weight: 700;*/
        text-align: center;
    }

    .homeVerbatim p {
        color: var(--font-color-white);
        font-size: 17px;
        font-weight: 200;
        text-align: center;
        line-height: 1.5;
        margin: 10px;
    }

/* ---BTN--- */
/* bouton texte blanc / fonds transparent */
.btn-decouverte {
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    text-decoration: none;
    border: 1px solid var(--primaire-color);
    background-color: var(--primaire-color);
    color: black;
    margin-top: 25px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    display: inline-block;
    padding: 5px;
    padding-left: 25px;
    padding-right: 25px;
}

    /* bouton texte blanc / fonds transparent */
    /* bouton Hover texte vert / fonds blanc */
    .btn-decouverte:hover {
        background-color: var(--button-hover);
        color: var(--bg-nav);
        font-weight: 500;
    }

/* ---BTN--- */
/* titre du header + txt courant et bouton  */
@media screen and (max-width:900px) {
    .homeLogoConnect {
        padding: 20px 10px;
    }

    /*.containerMeConnecter span {
        display: none;
    }*/

    .homeVerbatim {
        height: 600px;
        justify-content: center;
        margin: 0px auto;
        max-width: 550px;
    }

        .homeVerbatim h1 {
            font-size: 30px;
            text-align: center;
            padding: 0px 10px;
        }
}

/* ---HEADER--- */


/* ----NAVBAR ----*/
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.navbar {
    padding: 0;
    height: 60px;
    width: 100%;
}

    .navbar.bgNavBar {
        background: var(--bg-nav);
    }

.navDesktop {
    display: flex;
    align-items: center;
    width: 100%;
}

.blocLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-nav);
    height: 60px;
    width: 150px;
}

.logoPortailNav {
    background-image: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/fortuneo_logo_blanc.svg);
    background-repeat: no-repeat;
    width: 130px;
    height: 38px;
}

/* .logoPortailNavWhite {
    background-image: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/LOGO_CAW.svg);
    background-repeat: no-repeat;
    width: 54px;
    height: 38px;
} */

.navbar.bgNavBar .logoBlanc {
    display: none;
}

.navbar.bgNavBar .logoCouleur {
    display: block;
}

@media (max-width: 900px) {
    nav {
        padding: 15px 20px;
        position: absolute;
        top: 0;
        background-color: transparent;
        z-index: 2;
    }

    .navbar.bgNavBar {
        background: transparent;
    }

        .navbar.bgNavBar .logoBlanc {
            display: block;
        }

    .logoPortailNav {
        width: 130px;
        height: 38px;
    }
}

/* BOUTON PROFIL */
.navbar .containerProfil,
.navbar .containerMeConnecter {
    background-color: var(--bg-nav);
    height: 60px;
}

.navbar .btn-profil {
    font-size: 12px;
    height: 60px;
    padding: 0px 15px;
    background-color: var(--bg-nav);
    outline: none;
    color: white;
    border: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .navbar .btn-profil::before {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-user-white.svg);
        margin-right: 10px;
        position: relative;
        top: 2px;
    }

    .navbar .btn-profil::after {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/fleche-down-white.svg);
        margin-left: 10px;
        position: relative;
        top: -2px;
    }

/* BOUTON PROFIL */
/* BOUTON ME CONNECTER */
.navbar .btn-Connect {
    font-weight: 500;
    font-size: 12px;
    height: 60px;
    padding: 0px 15px;
    background-color: var(--bg-nav);
    outline: none;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .navbar .btn-Connect::before {
        /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-log-in-white.svg);*/
        margin-right: 10px;
        position: relative;
        top: 2px;
    }

    .navbar .btn-Connect span {
        text-decoration: underline;
    }

/* BOUTON ME CONNECTER */
.navbar-toggler {
    display: none;
    outline: none;
    border: none;
}

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }

.navbar.bgNavBar .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/burger-Menu.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    margin: 0 15px;
}

@media (max-width:900px) {
    .navbar-toggler {
        display: block;
        padding: 0;
        background-color: var(--primaire-color);
        border-radius: 0;
        height: 60px;
    }

    .navbar .btn-Connect::before {
        /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-log-in-white.svg);*/
        margin-right: 10px;
        position: relative;
        top: 2px;
    }
}

.nav-authentication {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.menuOffreEtDemande a {
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    color: var(--font-color-white);
    display: inline-block;
    position: relative;
}

    .menuOffreEtDemande a:hover {
        color: var(--bg-nav-hover);
    }

    .menuOffreEtDemande a.active {
        color: var(--bg-nav-hover);
    }

        .menuOffreEtDemande a.active::after {
            background: var(--primaire-color);
        }

.blocCarte {
    background-color: var(--bg-nav);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.navbar.bgNavBar .modelCarte {
    font-size: 12px;
    color: var(--font-color-white);
    margin-right: 22px;
    margin-left: 22px;
    text-transform: uppercase;
    height: 60px;
    vertical-align: middle;
    line-height: 60px;
    font-weight: 500;
}

    .navbar.bgNavBar .modelCarte::before {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-credit-card-blanc.svg);
        margin-right: 10px;
        position: relative;
        top: 5px;
    }

@media (max-width:900px) {
    .menuOffreEtDemande {
        display: none;
    }
}

@media screen and (min-width:320px) and (max-width:375px) {

    .navbar.bgNavBar .modelCarte.modelCarteRognage {
        width: 90px;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

@media screen and (min-width:375px) and (max-width:500px) {

    .navbar.bgNavBar .modelCarte.modelCarteRognage {
        width: 130px;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

/*CANVAS header*/

.offcanvas {
    width: 100%;
}

.offcanvas-header {
    height: 60px;
    opacity: 0.3;
    justify-content: flex-end;
    position: relative;
}

.offcanvas-btnClose .btn-close {
    background: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/croix-white.svg);
    background-repeat: no-repeat;
    background-size: cover;
    outline: none;
    width: 8px;
    height: 17px;
    opacity: 1 !important;
    margin-right: 10px;
    position: absolute;
    z-index: 9999999;
    top: 85px;
    right: 25px;
}

    .offcanvas-btnClose .btn-close:focus {
        box-shadow: none;
    }

.offcanvas.offcanvas-start {
    border-right: 0px;
    width: 100%;
}

.offcanvas-body {
    background-color: var(--tertiaire-color);
}

    .offcanvas-body .navbar-nav {
        margin-top: 40px;
        align-items: start !important;
    }

.nav-link {
    color: white;
    font-size: 15px;
    text-transform: uppercase;
}

    /* Animation au HOVER*/
    .navbar-nav .nav-link.active,
    .nav-link:focus,
    .nav-link:hover {
        color: white;
    }

.navbar-nav .nav-link {
    font-size: 15px;
    text-decoration: none;
    color: var(--color-white);
    text-transform: none;
    display: inline-block;
    position: relative;
}

    .navbar-nav .nav-link::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 5px;
        width: 100%;
        height: 1px;
        transform: scaleX(0);
        transform-origin: left;
        background: var(--color-white);
        transition: transform 0.3s ease-out;
    }

    .navbar-nav .nav-link:hover::after {
        transform: scaleX(1)
    }

    .navbar-nav .nav-link.active::after {
        transform: scaleX(1)
    }

/* Animation au HOVER*/
@media (max-width:900px) {
    .container-fluid {
        padding-right: 0;
    }

    .containerProfil {
        display: none;
    }

    .bgColorOffCanva {
        background-color: transparent;
    }
}


/* Bouton Profil dans la nav*/
.deroulantProfils {
    position: absolute;
    z-index: 10;
    top: 65px;
    right: 5px;
    width: 174px;
    background-color: #0F0F0F;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    padding: 10px 0 10px 15px;
}

/* .deroulantProfils.active{
    display: none;
} */
.deroulantProfilsHidden {
    display: none;
}

.deroulantProfilsVisible {
    display: block;
}

.deroulantProfils .profilMenu,
.deroulantProfils .deconnexionMenu {
    /* display: flex;
    align-items: center; */
    margin: 8px 0px;
    border: none;
    background-color: transparent;
}

.deroulantProfils .profilMenu,
.deroulantProfils .deconnexionMenu {
    font-size: var(--text-courant-taille-font);
    color: var(--font-color-white);
}

    .deroulantProfils .profilMenu::before {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-user-blanc.svg);
        margin-right: 10px;
        position: relative;
        top: 2px;
    }

    .deroulantProfils .deconnexionMenu::before {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-log-out-blanc.svg);
        margin-right: 7px;
        position: relative;
        top: 2px;
    }

@media (max-width:768px) {
    .deroulantProfils {
        width: 167px;
        right: 10px;
    }
}

/* Bouton Profil dans la nav*/
/* ---NAVBAR--- */
/* MAIN de la page HOME*/
.container-MesServicesHome {
    height: auto;
    display: flex;
    background-color: var(--bandeau-selection);
    padding: 24px;
}

.blocHomService {
    margin: 0 auto;
    display: flex;
    width: 100%;
}

.item-service {
    padding: 50px 50px 25px;
    width: 50%;
    background-color: #0F0F0F;
}

    .item-service:nth-child(1) {
        margin-right: 24px;
    }

    .item-service h2 {
        text-align: left;
        margin-bottom: 30px;
        text-transform: uppercase;
        font-size: 21px;
        color: var(--font-color-white);
    }

        .item-service h2 span {
            font-weight: 700;
        }

    .item-service ul {
        list-style: none;
        max-width: 400px;
        margin: 0;
        font-weight: 400;
    }

    .item-service li {
        margin: 6px 0px 0px 0px;
        display: flex;
        align-items: center;
    }

        .item-service li a {
            display: inline-block;
            font-size: 15px;
            text-decoration: none;
            color: var(--font-color-white);
            transition: all 0.2s ease-out;
        }

            .item-service li a:hover {
                transform: translateX(10px);
            }

    .item-service ul li::before {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/cercle_li_blanc.svg);
        align-self: baseline;
        margin-right: 10px;
        position: relative;
        top: -2px;
    }

.blocAccesConciergerie {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .blocAccesConciergerie p:nth-child(2) {
        font-size: 15px;
        margin-top: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--font-color-white);
    }

    .blocAccesConciergerie p:nth-child(3) {
        font-size: 15px;
        color: var(--font-color-white);
    }

/* BTN */
/*Bouton : bordure verte/ texte vert */
.btn-accesConciergerie {
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
    background-color: var(--primaire-color);
    outline: none;
    border: 1px solid var(--primaire-color);
    color: black;
    margin-top: 20px;
    transition: all 0.3s ease-out;
    padding: 5px;
    padding-left: 25px;
    padding-right: 25px;
}

    /*Bouton : bordure verte/ texte vert */
    /*Bouton Hover : bordure verte/ texte blanc / fonds blanc */
    .btn-accesConciergerie:hover {
        background-color: var(--button-hover);
        color: black;
    }

/*Bouton Hover : bordure verte/ texte blanc / fonds blanc */
/*Bouton : bordure verte/ texte vert / fonds blanc */
.btn-accesConciergerieOutline {
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
    background-color: white;
    outline: none;
    border: 1px solid var(--primaire-color);
    color: var(--primaire-color);
    /*padding: 14px 22px;*/
    margin-top: 20px;
    transition: all 0.3s ease-out;
    padding: 5px;
    padding-left: 25px;
    padding-right: 25px;
}

    /*Bouton : bordure verte/ texte vert */
    /*Bouton Hover : bordure verte/ texte blanc / fonds blanc */
    .btn-accesConciergerieOutline:hover {
        background-color: var(--primaire-color);
        color: white;
    }

/*Bouton Hover : bordure verte/ texte blanc / fonds blanc */
/* BTN */
.callConciergerie {
    font-size: 18px;
    color: var(--phone);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.4s ease-out;
}

    .callConciergerie:hover {
        color: var(--phone-hover);
    }

@media screen and (max-width:848px) {
    .blocHomService {
        flex-direction: column;
    }

    .item-service {
        padding: 30px 20px;
        width: 100%;
        position: relative;
    }

        .item-service > a {
            padding: 0px;
        }

        .item-service ul {
            padding-left: 0;
        }

        .item-service:nth-child(1) {
            margin-right: 0;
            margin-bottom: 24px;
        }
}

@media screen and (min-width:375px) and (max-width:500px) {

    .item-service li a {
        width: 260px;
    }
}

/* MAIN de la page HOME*/



/*---CAROUSEL---*/

.carousel {
    position: relative;
    width: 100%;
    max-width: 1035px;
    height: 500px;
    margin: 0 auto 0;
}

.carousel-inner {
    border-radius: 4%;
}

.carousel-item {
    height: 500px;
    color: white;
    position: relative;
    background-position: center;
    background-size: cover;
}

.overlaySlide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.5) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.containerSlide {
    position: absolute;
    text-align: center;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.carousel-indicators {
    position: absolute;
    z-index: 1;
}

    .carousel-indicators [data-bs-target] {
        box-sizing: content-box;
        flex: 0 1 auto;
        width: 14px;
        height: 14px;
        padding: 0;
        border-radius: 50%;
        margin-right: 7px;
        margin-left: 7px;
        margin-bottom: 20px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #ECECEC;
        background-clip: padding-box;
        border: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        opacity: .85;
        transition: opacity .6s ease;
    }

    .carousel-indicators .active {
        background-color: var(--font-color-white);
        opacity: 1;
        transition: opacity .6s ease;
    }

.containerSlide h1 {
    font-size: 35px;
}

@media (max-width:550px) {

    .carousel,
    .carousel-item {
        height: 500px;
    }
}

/*---CAROUSEL---*/



/*---CONTENUS DES OFFRES---*/
.titreMesOffres {
    width: 100%;
    text-align: center;
}

.toutesMesOffres h1 {
    font-size: 21px;
    /*font-weight: 700;*/
    text-transform: uppercase;
    text-align: center;
    margin: 30px auto 35px;
    display: inline-block;
    position: relative;
    color: var(--font-color-white);
}

    .toutesMesOffres h1::after {
        /*content: "";*/
        background: var(--font-color-white);
        position: absolute;
        text-align: center;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        right: 0;
        width: 20%;
        height: 3px;
    }

.selectionDesOffres {
    width: 100%;
    background-color: var(--bandeau-selection);
    height: 50px;
    /*border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);*/
    display: flex;
    justify-content: center;
    align-items: center;
}

    .selectionDesOffres p {
        font-size: 14px;
        margin: 0px 35px;
    }

        .selectionDesOffres p:nth-child(1)::before {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Ellipse.svg);
            margin-right: 10px;
            position: relative;
            top: -2px;
        }

        .selectionDesOffres p:nth-child(1)::after {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/fleche-down-grise.svg);
            margin-left: 10px;
            position: relative;
            top: -2px;
        }

        .selectionDesOffres p:nth-child(2)::after {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/fleche-down-grise.svg);
            margin-left: 10px;
            position: relative;
            top: -2px;
        }

        .selectionDesOffres p:nth-child(3)::after {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/fleche-down-grise.svg);
            margin-left: 10px;
            position: relative;
            top: -2px;
        }

/* filtre */
/****************/
.container-portfolio {
    width: 100%;
    max-width: 1035px;
    margin: 0 auto;
}

    .container-portfolio > p {
        font-weight: 400;
        padding: 10px 0;
        opacity: 0.7;
        text-align: center;
    }

.category-head {
    margin: 20px 0px;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .category-head p {
        font-weight: 700;
    }

@media (max-width:500px) {
    .category-head {
        justify-content: center;
    }
}

@media (min-width:501px) {
    .category-head {
        margin-left: 20px;
    }
}

.result-badge {
    display: flex;
    justify-content: center;
    background: var(--tertiaire-color);
    font-size: var(--text-courant-taille-font);
    padding: 5px 15px;
    color: white;
    border: 1px solid var(--tertiaire-color);
    margin: 5px 10px;
    cursor: pointer;
    border-radius: 999px;
}

    .result-badge::after {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/croix-white.svg);
        margin-left: 10px;
    }

.posts-main-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 25px;
}

.posts-collect .post-img {
    position: relative;
}

    .posts-collect .post-img img {
        max-width: 500px;
        width: 100%;
    }

.posts-collect a {
    text-decoration: none;
    color: var(--font-color-white);
}

.categoryOffres-details {
    display: flex;
    align-items: center;
    width: 60%;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0 15px 0px 300px;
}

.categoryOffres {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0 5px 0px 0px;
}

.category-name {
    display: flex;
}

    .category-name .badge-category {
        font-size: 10px;
        background-color: #141414;
        border-radius: 99px;
        padding: 5px 10px;
        margin: 0 10px 0 0px;
        color: var(--font-color-white);
        font-weight: 500;
        text-transform: uppercase;
    }

.category-lieu {
    margin-left: auto;
}

    .category-lieu .badge-lieu {
        font-size: var(--text-courant-taille-font);
        color: var(--font-color-white);
    }

        .category-lieu .badge-lieu::after {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-map-pin-blanc.svg);
            margin-left: 10px;
            position: relative;
            top: 2px;
        }

.post-content {
    padding: 10px 0px 20px;
    width: 100%;
    max-width: 500px;
}

    .post-content h2 {
        font-size: 18px;
        padding: 10px 0px 7px;
        font-weight: 700;
        margin-bottom: 0;
    }

    .post-content p {
        font-size: 15px;
        font-weight: 400;
        line-height: 1.3;
    }

    .post-content .descriptifOffres {
        font-size: 15px;
        line-height: 1.5;
    }

/* effet de Hover sur l'image*/
.imgOffres {
    border-radius: 4%;
    max-width: 500px;
    width: 100%;
}

.overlay-Offres {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    top: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    max-width: 500px;
    height: auto;
    transition: .5s ease;
    opacity: 0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}

    .overlay-Offres img {
        width: 30px !important;
        margin-bottom: 20px;
    }

    .overlay-Offres p {
        font-size: 15px;
    }

.post-img:hover .overlay-Offres {
    opacity: 1;
}

/* effet de Hover sur l'image*/

/***************/
@media(max-width: 1170px) {
    .posts-main-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 768px) {
    .posts-main-container {
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
        margin: 0 auto;
    }
}

@media(max-width: 500px) {
    .posts-main-container {
        grid-template-columns: 1fr;
        width: 95%;
        margin: 0 auto;
    }
}

/* filtre */
/* Dropdown filtre*/
.dropdown-container {
    position: relative;
    max-width: 320px;
    /* width: 100%;
    margin: 80px auto 30px; */
}

.select-btn,
.select-btn-region,
.select-btn-categorie {
    position: relative;
    display: flex;
    margin: 0 40px;
    align-items: center;
    padding: 5px 8px;
    cursor: pointer;
    background-color: #191919;
    border-radius: 5%;
}

    .select-btn .btn-text,
    .select-btn-region .btn-text,
    .select-btn-categorie .btn-text {
        font-size: 15px;
        font-weight: 400;
        color: var(--font-color-white);
    }

        .select-btn .btn-text.selectedOffre::before,
        .select-btn-region .btn-text.selectedOffre::before,
        .select-btn-categorie .btn-text.selectedOffre::before {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Ellipse.svg);
            margin-right: 8px;
            position: relative;
            top: 0px;
        }

    .select-btn .arrow-dwn,
    .select-btn-region .arrow-dwn,
    .select-btn-categorie .arrow-dwn {
        display: flex;
        height: 21px;
        width: 21px;
        color: #fff;
        font-size: 14px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

        .select-btn .arrow-dwn svg .fleche-path,
        .select-btn-region .arrow-dwn svg .fleche-path,
        .select-btn-categorie .arrow-dwn svg .fleche-path {
            stroke: #fff;
        }

    .select-btn.open .arrow-dwn,
    .select-btn-region.open .arrow-dwn,
    .select-btn-categorie.open .arrow-dwn {
        transform: rotate(-180deg);
    }

.list-items {
    position: absolute;
    z-index: 99999;
    width: 130px;
    margin-top: 15px;
    border-radius: 5px;
    padding: 10px 0px;
    background-color: black;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    display: none;
}

    .list-items.ml36 {
        margin-left: 36px;
    }

    .list-items.ml28 {
        margin-left: 28px;
    }

.select-btn.open ~ .list-items,
.select-btn-region.open ~ .list-items,
.select-btn-categorie.open ~ .list-items {
    display: block;
}

.select-btn.close ~ .list-items,
.select-btn-region.close ~ .list-items,
.select-btn-categorie.close ~ .list-items {
    display: none;
}

.list-items .item {
    display: flex;
    align-items: center;
    list-style: none;
    height: 30px;
    cursor: pointer;
    transition: 0.3s;
    padding: 0 0 0 15px;
    border-radius: 8px;
}

.list-items .item-text:hover {
    color: #999999;
}

.item .item-text {
    font-size: var(--text-courant-taille-font);
    font-weight: 400;
    color: var(--font-color-white);
}

.item.checked .item-text {
    color: var(--font-color);
    font-weight: 700;
}

.item.checked .check-icon {
    transform: scale(1);
}

@media(max-width: 768px) {
    .dropdown-container {
        margin: 0 5px;
    }

    .list-items {
        width: 120px;
        margin-left: -8px;
    }

    .select-btn,
    .select-btn-region,
    .select-btn-categorie {
        padding: 0;
        margin: 0;
    }

    .list-items.ml36 {
        margin-left: 0px;
    }

    .list-items.ml28 {
        margin-left: -18px;
    }
}

/* Dropdown filtre*/
/* page DETAIL DES OFFRES */
.bgDetailOffre {
    background-color: black;
    color: var(--font-color-white);
}

.blocOffresRight {
    width: 40%;
    position: fixed;
    top: 160px;
    left: 60%;
}

.blocDetailDesOffres {
    text-align: center;
}

.imgDetailOffre {
    position: relative;
    height: 500px;
    width: 60%;
    overflow: hidden;
}

.detailOffreImg {
    height: 500px;
    color: white;
    position: relative;
    background-position: top;
    background-size: cover;
}

.imgTitledetailOffre {
    display: none;
}

.detailOffres .blocDetailDesOffres h1 {
    font-size: 21px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 30px auto 25px;
    display: inline-block;
    position: relative;
}

    .detailOffres .blocDetailDesOffres h1::after {
        /*content: "";*/
        background: var(--font-color);
        position: absolute;
        text-align: center;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        right: 0;
        width: 40px;
        height: 4px;
    }

.blocDetailDesOffres button {
    border-radius: 999px;
    border: none;
    background-color: var(--primaire-color);
    /*padding: 20px 30px;*/
    color: var(--bg-nav);
    margin-top: 50px;
    transition: all 0.4s ease-in-out;
    height: 34px;
    padding-left: 25px;
    padding-right: 25px;
}

    .blocDetailDesOffres button:hover {
        border-radius: 999px;
        border: none;
        background-color: var(--button-hover);
        /*padding: 20px 30px;*/
        color: var(--bg-nav);
        margin-top: 50px;
    }

.blocDetailDesOffres p {
    font-size: 15px;
}

    .blocDetailDesOffres p:nth-child(4) {
        font-weight: 700;
        margin: 10px 0px;
    }

.blocOffresRightMobile {
    display: none;
}

@media (max-width:901px) {
    .blocOffresRightMobile {
        display: block;
        position: sticky;
        bottom: 0;
        width: 100%;
    }

    .blocOffresRight {
        display: none;
    }

    .blocDetailDesOffresMobile {
        display: flex;
    }

    .detailOffreMobile {
        background-color: var(--primaire-color);
        color: var(--tertiaire-color);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .detailOffreMobile button {
            font-size: 15px;
            border: none;
            outline: none;
            background-color: transparent;
            padding: 0px 10px;
        }

    .detailInfoMobile {
        background-color: var(--tertiaire-color);
        color: var(--color-white);
        text-align: center;
        font-size: 13px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: 10px 0px;
    }

        .detailInfoMobile p:nth-child(1) {
            font-weight: 700;
        }

    .imgTitledetailOffre {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
    }

        .imgTitledetailOffre h1 {
            font-size: 35px;
            font-weight: 400;
            text-transform: uppercase;
            color: var(--color-white);
            text-align: center;
        }

        .imgTitledetailOffre p {
            font-weight: 400;
            font-size: 15px;
            margin: 20px 0px;
            color: var(--color-white);
            text-align: center;
        }

    .imgDetailOffre {
        width: 100%;
    }

    .detailOffreImg {
        height: 600px;
        color: white;
        position: relative;
        background-position: top;
        background-size: cover;
    }
}

@media (min-width:1400px) {
    .detailOffres .imgDetailOffre {
        background-position: top;
    }
}

.detailOffreContenu {
    width: 60%;
    padding: 0 0 50px 300px;
    color: var(--font-color-white);
}

    .detailOffreContenu h2 {
        font-size: 18px;
        font-weight: 700;
    }

    .detailOffreContenu p {
        font-size: 15px;
    }

.adhesion {
    font-weight: 700;
}

.detailOffreContenu ul {
    list-style: none;
    padding: 0;
}

.detailOffreContenu .priorityPass a {
    text-decoration: underline;
    color: white;
    margin: 0 0 0 0;
}

.filetSeparation {
    height: 4px;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: var(--filet);
}

.rondImage {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bandeau-selection);
    width: 0px;
    height: 70px;
    border-radius: 50%
}

.priorityPass {
    display: flex;
    align-items: center;
}

    .priorityPass a {
        color: #999999;
        margin-left: 10px;
        text-decoration: none;
    }

        .priorityPass a::after {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-arrow-up-right-white.svg);
            margin-left: 5px;
        }

.cdgColor {
    color: var(--secondaire-color);
}

.returnOffres {
    display: none;
}

@media (max-width:901px) {
    .categoryOffres-details {
        width: 100%;
        padding: 10px;
    }

    .detailOffreContenu {
        width: 100%;
        padding: 0 25px 30px 25px;
    }

    .categoryOffres {
        width: 100%;
    }

    .returnOffres {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        margin-bottom: 30px;
        background-color: var(--bandeau-selection);
        border-top: 1px solid #D0D0D0;
        border-bottom: 1px solid #D0D0D0;
        padding: 0px 0px 0px 20px;
    }

        .returnOffres button {
            border: none;
            background-color: transparent;
            outline: none;
            color: var(--color-button);
            font-weight: 500;
        }

            .returnOffres button::before {
                content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-retour-offres.svg);
                margin-right: 10px;
            }
}

@media screen and (min-width:902px) and (max-width:1440px) {
    .detailOffreContenu {
        width: 60%;
        padding: 0 25px 30px 25px;
    }

    .categoryOffres-details {
        padding: 0 15px 0px 25px;
    }
}

.btn-EnvoyerDemande {
    color: white;
    background-color: var(--color-button);
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    outline: none;
}

/* page DETAIL DES OFFRES */
/*---CONTENUS DES OFFRES---*/



/*-----MODAL-------*/
@media (min-width: 768px) {
    .modal-dialog {
        max-width: 665px;
        /* New width for default modal */
    }
}

/*taille modal*/
#faireDemandeConcierge .modal-dialog {
    max-width: 320px;
}

#modalAccesConciergerie .modal-dialog {
    max-width: 495px;
}

/*taille modal*/
/* Spec pour modal de la demande au concierge*/

@media (min-width: 576px) {
    #faireDemandeConcierge .modal-dialog {
        margin-right: 10px;
        margin-left: auto;
    }

    #faireDemandeConcierge .modal-dialog {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 0 10px 10px 0;
    }
}

@media (max-width: 575px) {
    #faireDemandeConcierge .modal-dialog {
        margin-right: auto;
        margin-left: auto;
    }

    #faireDemandeConcierge.modal.fade .modal-dialog {
        transform: none;
    }
}

/* Spec pour modal de la demande au concierge*/
/* Modif generale de la modal*/
.modal {
    z-index: 99999 !important;
}

.modal-header {
    background-color: #000000;
    /* border-bottom: 1px solid var(--tertiaire-color); */
    padding: 30px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
    /* .modal-header {
    background-color: var(--primaire-color);
    padding: 30px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
} */

    .modal-header h1 {
        font-size: 18px;
        color: var(--primaire-color);
    }
/* .modal-header h1 {
    font-size: 18px;
    color: var(--font-color-white);
} */
.modal-content {
    background-color: #0f0f0f;
    border: none;
    border-radius: 12px;
    color: white;
}

.btn-close {
    background: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/croix_blanc.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 20px;
    height: 26px;
    opacity: 1;
    padding-right: 15px !important;
    outline: none;
}
    /* @media screen and (min-width:315px) and (max-width:374px){
    .btn-close {
        
        width: 34px;
        height: 34px;
        
       
    }
} */
    .btn-close:hover {
        opacity: 1;
    }

.modal-body h2 {
    font-size: 16px;
    font-weight: 700;
    /*color: var(--font-color);*/
    margin-bottom: 10px;
}

.modal-body p {
    font-size: var(--text-courant-taille-font);
    line-height: 1.4;
    margin-bottom: 5px;
}

.modal-body .modal-lien {
    color: var(--color-button);
    text-decoration: underline;
    font-size: 15px;
}

.modal-body .modal-lien-bis {
    color: var(--color-button);
    font-weight: 700;
    font-size: 15px;
}

.modal-body .modal-body-paraph {
    font-size: 15px;
}

.matError::before {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-material-error-outline.svg);
    position: relative;
    top: 3px;
    margin-right: 5px;
}

.modal-tiret {
    height: 3px;
    width: 50px;
    background-color: var(--primaire-color);
    margin-top: 10px;
}

.btnCivilite {
    background-color: #191919;
    color: white;
    border: 1px solid #ccc;
    border-radius: 999px;
    outline: none;
    font-size: 12px;
    /*padding: 8px 13px;*/
    height: 34px;
    padding-left: 25px;
    padding-right: 25px;
}

.btnSMS {
    background-color: #fff;
    color: var(--tertiaire-color);
    border: 1px solid #ced4da;
    outline: none;
    font-size: 12px;
    padding: 8px 13px;
    border-radius: 9999px;
}

#mdpContient {
    color: var(--font-color);
}

@media (max-width:770px) {
    .btnSMS:nth-child(1) {
        margin-bottom: 10px;
    }
}

.btnCivilite.active {
    background-color: var(--primaire-color);
    color: var(--bg-nav);
    border: 1px solid var(--primaire-color);
    outline: none;
    font-size: 12px;
    /*padding: 8px 13px;*/
    height: 34px;
    padding-left: 25px;
    padding-right: 25px;
}

.btnSMS.active {
    background-color: var(--primaire-color);
    color: #fff;
    border: 1px solid var(--primaire-color);
    outline: none;
    font-size: 12px;
    padding: 8px 13px;
}

.form-control:focus {
    border-color: var(--primaire-color );
    box-shadow: none;
}

.modal-round-icon-btn {
    border-radius: 999px;
    border: none;
    outline: none;
    background-color: #88c648;
    padding: 7px 7px;
}

.modal-bouton {
    display: flex;
    justify-content: center;
}

#connexionEspaceClient .modal-btn {
    padding: 10px 14px;
    color: #0C0C0C !important;
    background-color: #8ED63F !important;
    text-decoration : none;
}
.modal-btn {
    border-radius: 999px;
    font-size: 15px !important;
    font-weight: 500;
    outline: none;
    text-decoration: none;
    border: 1px solid var(--primaire-color);
    background-color: var(--primaire-color);
    color: black;
    cursor: pointer;
    transition: all 0.2s ease-out;
    display: inline-block;
    padding: 5px;
    padding-left: 25px;
    padding-right: 25px;
}     

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

        .modal-btn:disabled,
        .modal-btn:hover:disabled {
            background-color: #ccc;
            color: var(--bg-nav);
            cursor: not-allowed;
            opacity: 1;
        }

.modal-content a {
    color: var(--color-white);
    font-size: var(--text-courant-taille-font);
    transition: all 0.3s ease-out;
    text-decoration: underline;
}

    .modal-content a:hover {
        color: #999999;
    }

.modal-content .modalImg {
    display: block;
    position: relative;
}

/* .modal-content .modalImg::after {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-arrow-left.svg);
    display: inline-block;
    position: relative;
    top: 2px;
    right: -7px;
    transition: all 0.5s ease-out;
}

.modal-content .modalImg:hover::after {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-arrow-left-vertNav.svg);
    display: inline-block;
    position: relative;
    top: 2px;
    right: -7px;
} */

.form-control,
.form-select {
    padding: 0.375rem 0.75rem 0.375rem 2.5rem;
    font-size: var(--text-courant-taille-font);
    border-radius: 4px;
    height: 40px;
}

.form-select {
    background-image: none !important;
}

    .form-select:focus {
        outline: none;
        box-shadow: none;
        border-color: var(--secondaire-color);
    }

/* Modif generale de la modal*/



/* Retirer les fleches de l'unput type nuber*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

/* Retirer les fleches de l'unput type nuber*/


/* Padding Modal*/
.paddingModal .modal-body {
    padding: 25px 80px 50px 80px;
}

@media (max-width:550px) {
    .paddingModal .modal-body {
        padding: 25px 20px 50px 20px;
    }
}

/* Padding Modal*/


/*Input icone CARD acceder a la conciergerie*/
.inputCard {
    position: relative;
}

    .inputCard input, .inputCard input:focus {
        background-color: #191919;
        color: white;
    }

/*----modal "CONNEXION A VOTRE ESPACE CLIENT"-----*/
.modal-connexion-EspaceClient .w-315 {
    width: 315px;
}

@media (max-width:550px) {
    .modal-connexion-EspaceClient .w-315 {
        width: 100%
    }
}

/*----modal "CONNEXION A VOTRE ESPACE CLIENT"-----*/

/*----modal "CREATION ESPACE CLIENT ETAPE 1"-----*/
.modal-form-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

    .modal-form-inline .mr20 {
        margin-right: 20px;
    }

.modal-client-etape-1 .w-155 {
    width: 155px;
}

.modal-client-etape-1 .w-242 {
    width: 242px;
}

.modal-client-etape-1 .w-220 {
    width: 220px;
}

.modal-client-etape-1 .iconeCreditCard {
    position: absolute;
    top: 12px;
    left: 10px;
}

#creationEspaceClient input:not(#selectBin) + img {
    display: none;
}

#creationEspaceClient input:not(#selectBin) {
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
}

#creationEspaceClient .creationName {
    background-color: #191919;
    color: white;
}

@media (max-width:768px) {
    .modal-client-etape-1 .w-155, .modal-client-etape-1 .w-242 {
        width: 100%;
    }

    .modal-client-etape-1 .modal-form-inline {
        flex-direction: column;
    }

        .modal-client-etape-1 .modal-form-inline .mr20 {
            margin-right: 0px;
        }
}

/*----modal "CREATION ESPACE CLIENT ETAPE 1"-----*/

/*----modal "CREATION ESPACE CLIENT ETAPE 2"-----*/
.modal-client-etape-2 .w-220 {
    width: 220px;
}

/*----modal "CREATION ESPACE CLIENT ETAPE 2"-----*/


/*----modal "CREATION ESPACE CLIENT ETAPE 3"-----*/
.modal-client-etape-3 .w-315 {
    width: 315px;
}

.secuMotdePasse {
    display: flex;
    flex-direction: column;
}

@media (max-width:768px) {
    .modal-client-etape-3 .w-315 {
        width: 100%;
    }
}

/*----modal "CREATION ESPACE CLIENT ETAPE 3"-----*/

/*----modal "reinitialisation MOT DE PASSE Etape 1 (email)"-----*/
.emailReinitMdp {
    width: 50%;
}

@media (max-width:900px) {
    .emailReinitMdp {
        width: 100%;
    }
}

/*----modal "reinitialisation MOT DE PASSE Etape 1 (email)"-----*/

/*----modal "HOME => accès conciergerie"-----*/
.modalHomeAccesConciergerie .w-220 {
    width: 220px;
}

/*----modal "HOME => accès conciergerie"-----*/

/*Input icone CARD acceder a la conciergerie*/

/* Input icone date de naissance/mail/ portable*/
.formIconeCalandar,
.formIconeMail,
.formIconeSmartphone {
    position: absolute;
    top: 38px;
    left: 10px;
}

.creditCard {
    position: absolute;
    top: 12px;
    left: 10px;
}

/* Input icone date de naissance/mail/ portable*/

/* modal formulaire espace client */


.form-label {
    margin-bottom: 0.2rem;
    font-size: var(--text-courant-taille-font);
    color: var(--font-color-white);
}

/* .infoCardBancaire .form-label{
    color: var(--secondaire-color);
    font-size: var(--text-courant-taille-font);
} */

/* modal formulaire espace client */



/* PLACEHolder*/
::placeholder {
    color: var(--color-white) !important;
    font-size: var(--text-courant-taille-font);
}

/* PLACEHolder*/


/* Custom checkbox*/

.customcheck {
    display: block;
    position: relative;
    padding-left: 23px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .customcheck input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.customcheck:hover input ~ .checkmark {
    background-color: #ccc;
}

.customcheck input:checked ~ .checkmark {
    background-color: var(--primaire-color);
    border-radius: 5px;
}

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

.customcheck input:checked ~ .checkmark:after {
    display: block;
}

.customcheck .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Custom checkbox*/



/* Range Etape 1 sur X*/
.barreRange {
    height: 10px;
    width: 100%;
    background-color: #ccc;
    border-radius: 999px;
}

.portionRange-1 {
    width: 33%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.portionRange-2 {
    width: 66%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.portionRange-3 {
    width: 100%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.etapeRange {
    color: black;
}

/* Range Etape 1 sur X*/


/*Effet au survol dans la page connexion espace client*/
.connexionEspace .item-service-connexion ul {
    list-style: none;
    padding-left: 0px;
}

.connexionEspace .item-service-connexion li {
    margin: 5px 0px 0 0;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.connexionEspace .item-service-connexion ul li::before {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Ellipse.svg);
    margin-right: 10px;
    position: relative;
    top: 0px;
}

/*Effet au survol dans la page connexion espace client*/
/* Switch oeil mot de passe*/
.password-icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 47px;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    color: #f9f9f9;
    transition: all 0.2s;
}

    .password-icon .eye-off {
        display: none;
    }

    .password-icon .eye-off-confirm {
        display: none;
    }

/* Switch oeil mot de passe*/
/* Message d'erreur*/
.msgError {
    font-size: var(--text-msgError-taille-font);
    color: var(--msgError);
    display: block;
    line-height: 16px;
    margin-top: 4px;
}

.msgValid {
    font-size: var(--text-msgError-taille-font);
    color: #007461;
    display: block;
    line-height: 16px;
    margin-top: 4px;
}

.clickNone {
    cursor: pointer;
}

/* Message d'erreur*/


/*-----MODAL-------*/

/*PAGE MES DEMANDE EN COURS ET PROFIL*/
.demande-profil {
    max-width: 1000px;
    margin: 0px auto 30px;
    color: white;
}

    .demande-profil h1 {
        font-size: 21px;
        color: var(--font-color-white);
        margin: 40px 0px;
    }

        .demande-profil h1::after {
            /*content: "";*/
            display: block;
            width: 33px;
            height: 4px;
            margin-top: 10px;
            background-color: var(--font-color);
        }

.blocEnCoursPriseEnCharge {
    color: var(--primaire-color);
    margin-left: auto;
    margin-right: 50px;
    font-size: 14px;
    font-weight: 700;
}

.priseEncharge {
    color: var(--font-color-white);
}

.grisAnnul {
    color: var(--font-color-secondaire);
}

.blocEnCoursPriseEnCharge-Mobile {
    display: none;
}

@media (max-width:670px) {
    .blocEnCoursPriseEnCharge-Mobile {
        display: block;
        margin-left: auto;
        margin-right: 50px;
        font-size: 14px;
        font-weight: 700;
    }

    .blocEnCoursPriseEnCharge {
        display: none;
    }
}

@media (max-width:900px) {
    .demande-profil {
        margin: 0px auto 30px;
    }
}

@media (max-width:998px) {
    .demande-profil h1 {
        margin-left: 20px;
    }
}

.collapseBandeau {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #0f0f0f;
    color: var(--font-color-white);
    cursor: pointer;
    padding: 18px;
    margin-bottom: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: all 0.3 ease-in-out;
}

/* PICTO SVG  => Changement de couleur  */
.picto-clef-voiture-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-clef-voiture-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-hebergement-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-hebergement-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-mesPreference-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.mesPreferenceFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-informations-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-informations-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-mesCartes-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-mesCartes-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-centreInteret-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-centreInteret-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-service-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-service-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-shopping-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-shopping-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-voyage-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-voyage-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-billeterie-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-billeterie-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-information-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-information-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-assistance-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-assistance-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-monetique-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-monetique-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-service-pratique-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-service-pratique-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-autres-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-autres-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-taxi-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-taxi-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-restaurant-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-restaurant-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-billetTransport-colorFill {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

.picto-billetTransport-colorFill_traite {
    fill: var(--color-white);
    position: absolute;
    left: 0;
    top: 7px;
}

/* PICTO SVG  => Changement de couleur  */
/* TODO 11/01/2023 */
.collapseTitle {
    margin-left: 0px;
    position: relative;
}

    .collapseTitle p:nth-child(1) {
        font-size: 18px;
        color: var(--font-color-white);
    }

    .collapseTitle p:nth-child(2) {
        font-size: 12px;
        font-weight: 400;
        color: white;
    }

.collapseBandeau::after {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-ionic-ios-arrow-dropup-blanc.svg);
    position: absolute;
    display: flex;
    align-items: center;
    top: 31px;
    right: 25px;
    width: 24px;
    height: 24px;
    transform: rotate(0deg);
    transform-origin: center;
}

.collapseBandeau.collapsed::after {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-ionic-ios-arrow-dropup-blanc.svg);
    position: absolute;
    display: flex;
    align-items: center;
    top: 25px;
    right: 25px;
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
    transform-origin: center;
}

.boxCollapseTraites .collapseTitle p:nth-child(1) {
    font-size: 18px;
    color: var(--font-color-white);
}

.boxCollapseTraites .collapseTitle p:nth-child(2) {
    font-size: 12px;
    font-weight: 400;
    color: var(--font-color-white);
}

.contentCollapse {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    width: 460px;
    transition: max-height 0.2s ease-out;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: justify;
    transition: all 0.6s ease-in-out;
}

.card {
    border-radius: 0;
    border: none;
    padding: 30px 50px;
}

.card-body {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    background-color: #0f0f0f;
}

.cardBodyAlign {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;
    margin-bottom: 10px;
}

.blockEnLigne {
    width: 33.33%;
    padding-right: 10px;
    margin-bottom: 15px;
}

.card-body h3 {
    font-size: 14px;
    font-weight: 700;
}

.card-body p {
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 649px) {
    .card-body {
        max-width: 1000px;
    }

    .cardBodyAlign {
        display: flex;
        flex-direction: column;
    }

    .blockEnLigne {
        width: 100%;
    }

    .mob-mt-4 {
        margin-top: 1.5rem !important;
    }
}

@media screen and (min-width: 650px) and (max-width: 900px) {
    .card-body {
        max-width: 1000px;
    }

    .cardBodyAlign {
        display: flex;
        flex-direction: row;
    }

    .blockEnLigne {
        width: 50%;
        margin-bottom: 25px;
    }

    .mob-mt-4 {
        margin-top: 1.5rem !important;
    }
}

@media (max-width: 520px) {
    .card {
        padding: 30px 30px
    }

    .collapseTitle {
        width: 100%;
    }

        .collapseTitle p:nth-child(1) {
            font-size: 17px;
            width: 80%;
        }

        .collapseTitle p:nth-child(2) {
            width: 80%;
        }
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

input.radioSwitch {
    display: none;
}

input:checked + .slider {
    background: var(--primaire-color);
}

.slider {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c5c5c5;
    border-radius: 55px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

input:checked + .slider:before {
    -webkit-transform: translateX(24px);
    transform: translateX(24px);
}

.slider:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 40px;
    -webkit-box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
    box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* bloc Centre d'interet*/
.choix-centre-interet {
    cursor: pointer;
    width: 645px;
    position: relative;
}

.overflowHidMob {
    width: 100%;
    overflow: auto;
}

.mesChoix {
    height: 100%;
    margin: 0px 25px 0px 0px;
    font-size: 15px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: var(--font-color-white);
}

@media (max-width: 900px) {
    .mesChoix {
        font-size: 14px;
    }
}

.mesChoix.active-choix {
    font-weight: 700;
}

    .mesChoix.active-choix::after {
        content: "";
        position: relative;
        z-index: 1;
        display: block;
        margin-top: 6px;
        width: 100%;
        background-color: var(--font-color);
        height: 4px;
    }

.barreHorizontale {
    position: relative;
    margin-top: -4px;
    margin-left: 0px;
    z-index: 0;
    width: 100%;
    background-color: var(--collapseBox);
    height: 4px;
}

.interet {
    display: none;
    width: 75%;
}

.interet-active {
    display: block;
}

.interet .btn-interet {
    border: 1px solid var(--primaire-color);
    outline: none;
    background-color: var(--font-color-white);
    font-size: 12px;
    color: var(--bg-nav);
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 999px;
    height: 34px;
    padding-left: 25px;
    padding-right: 25px;
}

    .interet .btn-interet.active-interet {
        border: 1px solid var(--primaire-color);
        outline: none;
        background-color: var(--primaire-color);
        font-size: 12px;
        color: var(--bg-nav);
        margin-right: 15px;
        margin-bottom: 15px;
        height: 34px;
        padding-left: 25px;
        padding-right: 25px;
    }

.card .arrow-left {
    transform: rotate(90deg);
    display: none;
}

.card .arrow-right {
    transform: rotate(-90deg);
    display: none;
}

@media (max-width: 665px) {
    .card .arrow-left {
        position: absolute;
        top: 41px;
        left: 11px;
        transform: rotate(90deg);
        display: block;
    }

    .card .arrow-right {
        position: absolute;
        top: 41px;
        right: 11px;
        transform: rotate(-90deg);
        display: block;
    }

    .interet {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .overflowHidMob {
        width: 100%;
        overflow: auto;
    }
}

/* bloc Centre d'interet*/
/*---bloc jout carte---*/
.containerCarte {
    display: flex;
    justify-content: space-between;
}

#containerModifCarte,
#containerAjouterCarte {
    display: none;
}

    #containerModifCarte.active,
    #containerAjouterCarte.active {
        display: block;
    }

.containerGrisCarte {
    background-color: #0f0f0f;
    padding: 10px;
}

.spaceCarte {
    background-color: #0f0f0f;
    margin-top: 8px;
    padding: 16px 16px 16px 60px;
}

    .spaceCarte h4 {
        font-size: 16px;
        font-weight: 700;
    }

.blocChampsModif {
    display: flex;
    height: 92px;
}

.chiffreCarte {
    font-weight: 700 !important;
    margin-left: 15px;
    font-size: 15px;
}

.blocCarteNumberSwitch {
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

.blocCarteNumber {
    display: flex;
    align-items: center;
}

.nomCarte {
    width: 180px;
}

.nomCarteDefault {
    font-weight: 700 !important;
    color: var(--font-color-white);
    margin-left: 15px;
    display: block;
}

    .nomCarteDefault.active {
        color: var(--secondaire-color);
        display: none;
    }

.nomCarteDefaultBis {
    font-weight: 700 !important;
    color: var(--secondaire-color);
    margin-left: 15px;
    display: none;
}

    .nomCarteDefaultBis.active {
        color: var(--color-button);
        display: block;
    }

.btnswitchCarte {
    margin-left: 30px;
}

.btn-carte {
    border: 1px solid #ccc;
    font-size: var(--text-courant-taille-font);
    padding: 13px 16px;
    border-radius: 999px;
    background-color: white;
    color: var(--font-color);
}

.btn-modifier-carte::before {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-edit-2.svg);
    position: relative;
    top: 3px;
    margin-right: 5px;
}

.btn-supprimer-carte::before {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-feather-trash.svg);
    position: relative;
    top: 3px;
    margin-right: 5px;
}

.spaceCarte .iconeCreditCard {
    position: absolute;
    top: 36px;
    left: 10px;
}

.labelCarte {
    font-size: var(--text-courant-taille-font);
    color: var(--secondaire-color);
}

.modificationCarte {
    margin-left: 20px;
    border: none;
    border-radius: 999px;
    background-color: var(--primaire-color);
    color: var(--bg-nav);
    height: 40px;
    /*padding: 0 10px;*/
    font-size: 14px;
    height: 34px;
    padding-left: 25px;
    padding-right: 25px;
}

    .modificationCarte:disabled,
    .modificationCarte:hover:disabled {
        background-color: #ccc;
        color: var(--bg-nav);
        cursor: not-allowed;
        opacity: 1;
    }

.blocChampsModif .form-control.creationName {
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    font-size: var(--text-courant-taille-font);
    background-color: #191919;
}

.annulationCarte {
    background-color: white;
    border: 1px solid var(--msgError);
    color: var(--msgError);
    font-size: 14px;
    border-radius: 999px;
    /*padding: 12px 14px;*/
    margin: 15px 0px;
    height: 34px;
    padding-left: 15px;
    padding-right: 15px;
}

.blocCarteBtn,
.blocAnnulCarte {
    display: flex;
    justify-content: flex-end;
}

@media (max-width:500px) {

    .blocCarteBtn,
    .blocAnnulCarte {
        display: flex;
        justify-content: center;
    }

    .annulationCarte,
    .ajouterNewCarte {
        margin-right: 0px;
    }
}

.ajouterNewCarte {
    background-color: var(--primaire-color);
    border: 1px solid var(--primaire-color);
    color: var(--bg-nav);
    font-size: 14px;
    border-radius: 999px;
    /*padding: 12px 14px;*/
    margin: 15px 0px;
    height: 34px;
    padding-left: 15px;
    padding-right: 15px;
}

    .ajouterNewCarte:hover {
        background-color: var(--button-hover);
    }

@media (max-width:1000px) {

    .annulationCarte,
    .ajouterNewCarte {
        margin-right: 12px;
    }
}

@media screen and (min-width:715px) and (max-width:838px) {
    .nomCarteDefault {
        display: none;
    }

    .blocCarteNumber {
        width: 100%;
    }

    .containerCarte {
        flex-direction: column;
    }

    .blocCarteNumberSwitch {
        justify-content: space-between;
    }

    .groupButton {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        padding-left: 1rem !important;
    }

    .nomCarte {
        width: 250px;
    }

    .btn-carte:first-child {
        margin-right: 10px;
    }

    .nomCarte {
        width: 100%;
    }

    .chiffreCarte {
        width: 100%;
    }
}

@media (max-width:714px) {
    .containerCarte {
        flex-direction: column;
    }

    .blocCarteNumber {
        width: 100%;
    }

    .blocCarteNumberSwitch {
        justify-content: space-between;
    }

    .groupButton {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        padding-left: 1rem !important;
    }

    .btn-carte {
        padding: 13px 12px;
    }

        .btn-carte:first-child {
            margin-right: 10px;
        }

    .nomCarteDefault {
        display: none;
    }

    .chiffreCarte {
        width: 100px;
    }

    .nomCarte {
        width: 115px;
    }

    .nomCarteDefaultBis.active {
        display: none;
    }

    .blocChampsModif {
        flex-direction: column;
        height: auto;
    }

    .modificationCarte {
        margin-left: 0;
        margin-top: 20px;
    }

    .spaceCarte {
        padding: 16px 26px 16px 26px;
    }

        .spaceCarte .inputWidth {
            width: 100%;
        }
}

/*--bloc jout carte*/
/*PAGE MES DEMANDE EN COURS ET PROFIL*/

/*--- CHATBOT =>  Faire une demande a mon concierge----*/
@media (max-width:550px) {
    #overlayToster {
        display: none;
        background: #3e4347;
        width: 100%;
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
    }

        #overlayToster.active {
            background: #3e4347a3;
            width: 100%;
            display: block;
            position: fixed;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 2;
        }
}

.toast {
    background-color: rgba(255, 255, 255, 0)
}

#liveToast .toast-body {
    border-radius: 0rem;
    background-color: white;
    min-height: 405px;
    max-height: 390px;
    padding: 20px;
    overflow: auto;
}

#liveToast .btn-close {
    background: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/croix-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 14px;
    height: 14px;
    opacity: 1;
    border-radius: 0rem;
}

.toast-position {
    position: fixed;
    bottom: 0;
    right: 0;
}

.positionHeure {
    width: 140px;
    position: absolute;
    right: 0px;
    top: 0;
}

@media (max-width:400px) {
    .overlayMobileToast {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        z-index: 10;
    }
}

.toast-header {
    background-color: var(--tertiaire-color);
    border-bottom: 1px solid #ccc;
    padding: 30px;
    border-radius: 4px;
    border-top-right-radius: 0.375rem;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    /* border-bottom: 0px !important; */
}

    .toast-header h1 {
        font-weight: 400;
        font-size: 18px;
        color: white;
    }

#liveToast .items-demandeConcierge {
    border: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tertiaire-color);
    font-weight: 500;
    border: 1px solid var(--filet);
    width: 100%;
    height: 50px;
    background-color: #f2f5f2;
    margin-bottom: 10px;
    transition: all 0.2s ease-in-out;
    border-radius: 999px;
}

    #liveToast .items-demandeConcierge:hover p {
        color: white !important;
    }

#liveToast .tchatConcierge {
    background-color: #f7f7f7;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

    #liveToast .tchatConcierge p:nth-child(1) {
        font-weight: 700;
        font-size: 14px;
    }

    #liveToast .tchatConcierge p:nth-child(2) {
        font-size: 15px;
    }

#liveToast.mbottomToast {
    margin-bottom: 67px;
    transition: all 0.1s ease-in-out;
}

@media (max-width:550px) {
    .toast-position {
        position: fixed;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.demandeConcierge {
    position: sticky;
    float: right;
    background-color: var(--primaire-color);
    z-index: 1;
    width: 190px;
    height: auto;
    border: none;
    border-bottom-left-radius: 999px;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    font-size: 12px;
    color: #fff;
    padding: 10px 15px;
    margin: 10px;
    bottom: 10px;
    left: 100%;
    cursor: pointer;
}

    .demandeConcierge p {
        font-size: 11px;
        width: 100%;
        display: flex;
        align-items: center;
        text-align: left;
    }

        .demandeConcierge p::before {
            content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-demande-concierge.svg);
            display: block;
            position: relative;
            top: 5px;
            margin-left: 5px;
            margin-right: 10px;
        }

#liveToast .item-taxi p,
#liveToast .item-resto p,
#liveToast .item-hebergement p,
#liveToast .item-billetTransport p,
#liveToast .item-locationVoiture p,
#liveToast .item-autre p {
    color: var(--tertiaire-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 15px 0px;
    transition: all 0.2s ease-out;
}

/* TAXI / RESTAURANT / HEBERGEMENT / BILLET TRANSPORT /
LOCATION VOITURE / AUTRE ==> HOVER*/
#liveToast .item-taxi:hover,
#liveToast .item-resto:hover,
#liveToast .item-hebergement:hover,
#liveToast .item-billetTransport:hover,
#liveToast .item-locationVoiture:hover,
#liveToast .item-autre:hover {
    color: var(--color-white) !important;
    border: 1px solid var(--tertiaire-color);
    background-color: var(--tertiaire-color);
}

/* TAXI / RESTAURANT / HEBERGEMENT / BILLET TRANSPORT /
LOCATION VOITURE / AUTRE*/

/* TAXI */
#liveToast .item-taxi p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-taxi.svg);*/
    display: block;
    margin-right: 10px;
}

#liveToast .item-taxi:hover p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-taxi-hover.svg);*/
}

/* TAXI */

/* RESTAURANT */
#liveToast .item-resto p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-restaurant.svg);*/
    display: block;
    margin-right: 10px;
}

#liveToast .item-resto:hover p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-restaurant-hover.svg);*/
}

/* RESTAURANT */

/* HEBERGEMENT */
#liveToast .item-hebergement p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-hebergement.svg);*/
    display: block;
    margin-right: 10px;
}

#liveToast .item-hebergement:hover p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-hebergement-hover.svg);*/
}

/* HEBERGEMENT */

/* BILLET TRANSPORT */
#liveToast .item-billetTransport p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-billet-transport.svg);*/
    display: block;
    margin-right: 10px;
}

#liveToast .item-billetTransport:hover p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-billet-transport-hover.svg);*/
}

/* BILLET TRANSPORT */

/* LOCATION VOITURE */
#liveToast .item-locationVoiture p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-clef-voiture.svg);*/
    display: block;
    margin-right: 10px;
}

#liveToast .item-locationVoiture:hover p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-clef-voiture-hover.svg);*/
}

/* LOCATION VOITURE */

/* AUTRE */
#liveToast .item-autre p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-cloche.svg);*/
    display: block;
    margin-right: 10px;
}

#liveToast .item-autre:hover p::before {
    /*content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/picto-cloche-hover.svg);*/
}

/* AUTRE */

@media (max-width:550px) {
    .demandeConcierge {
        background-color: var(--primaire-color);
        height: 80px;
        border: none;
        font-size: 15px;
        color: #fff;
        display: block;
        text-align: center;
        position: sticky;
        z-index: 1;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        margin: 10px 0px 0px 0px;
        padding: 25px 15px;
    }

        .demandeConcierge p {
            width: 100%;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .demandeConcierge p::before {
                content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-demande-concierge.svg);
                display: block;
                position: relative;
                top: 5px;
                margin-left: 10px;
                margin-right: 10px;
            }
}

/*----partie hebergment----*/
.footerToast {
    background-color: white;
    padding: 20px;
    border-radius: 0.375rem;
}

.toast-body h2 {
    font-size: 16px;
    margin-bottom: 0px;
    color: var(--font-color);
    font-weight: 700;
}

.toast-body h3 {
    font-size: 14px;
    margin-bottom: 0px;
    color: var(--font-color);
    font-weight: 700;
    /* margin-top: 20px; */
}

.toast-body p {
    color: var(--font-color);
    font-weight: 400;
}

.toast-body .toast-body-paraph {
    font-size: 12px;
}

.toast-body .toast-body-paraph-end {
    font-size: 14px;
    margin-top: 10px;
}

    .toast-body .toast-body-paraph-end a {
        font-size: 14px;
        color: var(--color-button);
    }

.toast-body .toast-tiret {
    /*display: block;*/
    height: 4px;
    width: 50px;
    background-color: var(--primaire-color);
    margin-top: 5px;
    margin-bottom: 5px;
}

.toast-body .form-label,
.toast-body .form-control,
.toast-body .form-select {
    color: var(--tertiare-color);
}

.toast-body ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: var(--tertiaire-color);
}

.toast-body :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--tertiaire-color);
    opacity: 1;
}

.toast-body ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--tertiaire-color);
    opacity: 1;
}

.toast-body :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--tertiaire-color);
}

.toast-body ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--tertiaire-color);
}

.toast-body ::placeholder {
    /* Most modern browsers support this now. */
    color: var(--tertiaire-color);
}

#liveToast .items-demandeConcierge.hoverGenerique:hover {
    color: var(--color-white);
    border: 1px solid var(--primaire-color);
    background-color: var(--primaire-color);
}

#liveToast .items-demandeConcierge.hoverGenerique.active {
    color: var(--color-white);
    border: 1px solid var(--secondaire-color);
    background-color: var(--secondaire-color);
}

.footerToast .etapeRange {
    font-size: var(--text-courant-taille-font);
}

.footerToast .btn-toast-prev {
    color: var(--tertiaire-color);
    background-color: transparent;
    border: none;
    outline: none;
    text-decoration: underline;
}

.footerToast .btn-toast-next {
    border-radius: 999px;
    color: var(--bg-nav);
    background-color: var(--primaire-color);
    /*padding: 10px 20px;*/
    border: none;
    outline: none;
    height: 34px;
    padding-left: 15px;
    padding-right: 15px;
}

.RangeToast-1 {
    width: 20%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.RangeToast-2 {
    width: 40%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.RangeToast-3 {
    width: 60%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.RangeToast-4 {
    width: 80%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.RangeToast-5 {
    width: 100%;
    background-color: var(--primaire-color);
    height: 10px;
    border-radius: 999px;
}

.iconeLocalisation {
    position: absolute;
    top: 35px;
    left: 11px;
}

/* TODO 01/01/2023 */
.iconeDeleteChoose {
    position: absolute;
    border: none;
    display: none;
    width: 20px;
    height: 20px;
    line-height: 16px;
    font-size: 12px;
    border-radius: 50%;
    top: 33px;
    right: 11px;
    margin: auto;
    background: #ccc;
    padding: 0;
    outline: none;
    cursor: pointer;
    transition: .1s;
}

    .iconeDeleteChoose img {
        vertical-align: middle;
    }

/* TODO 01/01/2023 */
.nbrPersonnes {
    font-size: 12px;
}

.btnDeleteRoom {
    border: none;
    font-size: 11px;
    outline: none;
    background-color: transparent;
    margin-top: 3px;
}

.nombreChambres {
    font-weight: 700;
}

.nbrChambres {
    border: none;
    width: 15px;
}

    .nbrChambres:focus-visible {
        outline: none;
    }

.separation-chambre {
    height: 4px;
    background-color: var(--collapseBox);
    margin-top: 10px;
}

.signNbr {
    background-color: var(--tertiaire-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: none;
    outline: none;
}

.signPlus::after {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/plus.svg);
    position: relative;
    top: 3px;
    right: 1px;
}

.signMoins::after {
    content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/moins.svg);
    position: relative;
    top: 0px;
    right: 0px;
}

/* btn ajouter ue chambre */
.btn-ajoutChambre {
    font-size: 12px;
    cursor: pointer;
    background-color: white;
    outline: none;
    border: 1px solid var(--tertiaire-color);
    color: var(--tertiaire-color);
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 999px;
    transition: all 0.3s ease-out;
}

    .btn-ajoutChambre:hover {
        background-color: var(--tertiaire-color);
        border: 1px solid var(--tertiaire-color);
        color: white;
        padding: 10px 20px;
        margin-top: 20px;
        transition: all 0.3s ease-out;
    }

    .btn-ajoutChambre:disabled {
        background-color: var(--color-disabled);
        color: var(--txt-disabled);
        cursor: not-allowed;
        opacity: 1;
        border: none
    }

/* btn ajouter ue chambre */
/* btn Euros */
.btn-euros {
    font-weight: 400;
    background-color: #fff;
    color: var(--tertiaire-color);
    border: 1px solid var(--tertiaire-color);
    outline: none;
    font-size: 14px;
    padding: 6px 15px;
    border-radius: 999px;
    height: 34px;
}

    .btn-euros.active {
        font-weight: 400;
        background-color: var(--tertiaire-color);
        color: white;
        border: 1px solid var(--tertiaire-color);
        outline: none;
        font-size: 14px;
    }

/* btn Euros */
.toast-body .form-control.inputSansPicto {
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    font-size: var(--text-courant-taille-font);
}

/*----partie hebergment----*/
.btn-toast-next:disabled,
.btn-toast-next:hover:disabled {
    background-color: var(--color-disabled);
    color: var(--bg-nav);
    cursor: not-allowed;
    opacity: 1;
}

/* TEXTAREA  */
.form-floating > label {
    height: auto;
    top: 2px;
    font-size: var(--text-courant-taille-font);
    color: var(--secondaire-color);
}

.msgPourConcierge {
    margin-top: 20px;
    width: 100%;
    height: 90px;
    padding: 10px;
    font-size: 12px;
    border: 1px solid var(--secondaire-color);
    resize: none;
}

    .msgPourConcierge:focus-visible {
        outline: none;
    }

    
.labelCompteurTextArea {
    display: none;
}

.spanCompteurArea,
.blocCompteur {
    color: var(--font-color) !important;
}

#dateResaRetour,
#dateResaDepart {
    position: relative;
}

.textAreaDemandeConcierge {
    margin-top: 20px;
    width: 100%;
    height: 130px !important;
    padding: 10px;
    font-size: 12px;
    border: 1px solid var(--secondaire-color);
    resize: none;
}

/*--- CHATBOT =>  Faire une demande a mon concierge----*/

/* FAQ */
.faqCollapseBandeau {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--tertiaire-color);
    color: #000000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: all 0.3 ease-in-out;
}

    .faqCollapseBandeau::after {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-ionic-ios-arrow-dropup-blanc.svg);
        position: absolute;
        display: flex;
        align-items: center;
        right: 25px;
        width: 24px;
        height: 24px;
    }

    .faqCollapseBandeau.collapsed::after {
        content: url(https://static.europ-assistance.fr/Conciergerie_Arkea/images/FORTUNEO/Icon-ionic-ios-arrow-dropup-blanc.svg);
        position: absolute;
        display: flex;
        align-items: center;
        right: 25px;
        transform: rotate(180deg);
    }

@media (max-width:695px) {
    .faqCollapseBandeau p {
        width: 80%;
    }
}

/* FAQ */

/*DATEPICKER*/
.datepicker {
    font-size: var(--text-courant-taille-font);
}

    .datepicker td,
    .datepicker th {
        text-align: center;
        width: 32px;
        height: 32px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: none;
    }

    .datepicker table tr td.today {
        background-color: var(--secondaire-color) !important;
        background-image: none;
        color: var(--color-white);
        border-radius: 50%;
    }

        .datepicker table tr td.today:hover,
        .datepicker table tr td.today:hover:hover {
            background-color: var(--secondaire-color) !important;
            background-image: none;
            color: var(--color-white);
        }

    .datepicker table tr td.active.active {
        background-color: var(--color-button) !important;
        background-image: none;
        color: var(--color-white);
        border-radius: 50%;
    }

    .datepicker table tr td.day:hover,
    .datepicker table tr td.day.focused {
        background: #eee;
        cursor: pointer;
        border-radius: 50%;
    }

    .datepicker td.old.disabled.day {
        color: var(--filet)
    }

    .datepicker td.new.day {
        color: var(--filet)
    }

/*DATEPICKER*/


/*LOADER*/
.overlay-loader {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    opacity: .6;
    z-index: 1;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 80px;
    height: 80px;
    display: inline-block;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 0.08);
    border-top-color: var(--primaire-color);
    animation: spin .9s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

/* Loader Conciergerie */
#loaderConciergerie {
    display: none;
}

.overlay-loader-conciergerie {
    right: 4px;
    bottom: 3px;
    width: 349px;
    height: 595px;
    position: fixed;
    background: #000;
    opacity: 0.3;
    z-index: 9999;
    overflow: hidden;
}

.overlay__inner__conciergerie {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
}

@media (max-width:550px) {
    .overlay-loader-conciergerie {
        right: 5px;
        top: 5px;
        /* bottom: -17px; */
        width: 348px;
        height: 592px;
        position: fixed;
        background: #000;
        opacity: 0.3;
        z-index: 9999;
    }

    .overlay__inner__conciergerie {
        left: 0;
        top: 0;
        width: 348px;
        height: 592px;
        position: absolute;
        z-index: 9999;
    }
}

/* Loader Conciergerie */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/*LOADER*/


/* CONTROLE MOT DE PASSE */
#blocGrisMdp {
    width: 315px;
    margin: 0 auto;
}

.validMotDePasse {
    display: none;
}

.invalidMotDePasse {
    color: var(--font-color);
}

.displayBlockMDP {
    display: block;
}

.displayNoneMDP {
    display: none;
}

.cadreForceMDP {
    padding: 10px;
    width: 85%;
    margin-top: 0px;
    font-size: 12px;
    background-color: var(--collapseBox);
}

.cadreForce-Email-Mdp {
    padding: 10px;
    margin-top: 10px;
    font-size: 12px;
    background-color: var(--collapseBox);
}

#wrong_pass_alert {
    font-size: 12px;
}

/* CONTROLE MOT DE PASSE */
/* 404 */
.page404,
.maintenance {
    max-width: 550px;
    margin: 120px auto 30px;
}

    .page404 h1 {
        font-size: 21px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--font-color);
        margin: 40px 0px 20px 0px;
    }

        .page404 h1::after,
        .maintenance h1::after {
            content: "";
            display: block;
            width: 33px;
            height: 4px;
            margin-top: 10px;
            background-color: var(--font-color);
        }

    .page404 p:nth-child(2) {
        font-size: 18px;
        color: var(--primaire-color);
        font-weight: 700;
    }

    .page404 p:nth-child(3) {
        font-size: 14px;
        color: var(--font-color);
        font-weight: 400;
        margin-top: 18px;
    }

    .page404 a {
        font-size: 14px;
        color: var(--color-button);
        font-weight: 400;
    }

    .maintenance h1 {
        font-size: 21px;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--font-color);
        margin: 40px 0px 20px 0px;
    }

    .maintenance p:nth-child(2) {
        font-size: 18px;
        color: var(--font-color);
        font-weight: 700;
    }

    .maintenance p:nth-child(3) {
        font-size: 14px;
        color: var(--font-color);
        font-weight: 400;
        margin-top: 18px;
    }

@media (max-width:900px) {
    .page404, .maintenance {
        margin: 0px auto 30px;
        padding: 0px 50px;
    }
}

/* 404 */


/* MAINTENANCE EN COURS */

/* ---FOOTER--- */
footer {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
    padding: 20px 50px;
    background: var(--bg-nav);
    box-shadow: inset 0 7px 0 var(--tertiaire-color);
}

.footerFixed {
    flex-shrink: 0;
}

.navlinks-mentions {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer a {
    margin: 0px 10px;
    color: var(--font-color-white);
    text-decoration: none;
    font-size: var(--text-courant-taille-font);
    transition: color 0.4s ease-in-out;
}

.lienFAQ {
    margin-left: 70px;
    font-weight: 500;
}

footer a:hover {
    color: #999999;
    text-decoration: none;
}

footer .navlinks-contact a {
    text-transform: uppercase;
}

.pipeFooter {
    color: black;
}

@media screen and (max-width:768px) {

    footer {
        flex-direction: column;
        padding: 10px 0px 25px 0px;
    }

        footer a {
            margin: 0px;
        }

    .navlinks-mentions {
        width: 100%;
        margin: 10px 0px 10px;
        display: flex;
        flex-direction: column;
        text-align: center;
        order: 2;
        box-shadow: inset 0 1px 0 var(--filet);
    }

        .navlinks-mentions a {
            margin: 15px 0px 0px;
        }

            .navlinks-mentions a:nth-child(1) {
                margin: 20px 0px 0px 0px;
            }

    .navlinks-contact {
        order: 1;
    }

    .lienFAQ {
        margin-left: 0px;
    }

    .pipeFooter {
        display: none;
    }
}

/* FOOTER */

/* ===== Scrollbar CSS ===== */
/* Firefox */
.scrollCustom {
    scrollbar-width: none;
    scrollbar-color: var(--modal-header-color) #ffffff;
}

#liveToast .toast-body {
    scrollbar-width: none;
    scrollbar-color: var(--modal-header-color) #ffffff;
}

    /* Chrome, Edge, and Safari */
    .scrollCustom::-webkit-scrollbar,
    #liveToast .toast-body::-webkit-scrollbar {
        width: 0px;
    }

    .scrollCustom::-webkit-scrollbar-track,
    #liveToast .toast-body::-webkit-scrollbar-track {
        background: #ffffff;
    }

    .scrollCustom::-webkit-scrollbar-thumb,
    #liveToast .toast-body::-webkit-scrollbar-thumb {
        background-color: var(--modal-header-color);
        border-radius: 10px;
        border: 3px solid #ffffff;
    }

.modal-header h2 {
    color: var(--font-color-white) !important;
    font-weight: 700;
}
/* ===== Scrollbar CSS ===== */

.text-copied {
    margin-left: 15px;
    color: var(--font-color-white);
}

    .text-copied::before {
        content: '✔';
        color: var(--font-color-white);
        margin-right: 5px;
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
    }




#liveToast .inputCard input, #liveToast .inputCard input:focus {
    background-color: white;
    color: black;
}

#floatingTextarea::placeholder {
    color: black !important;
    font-size: var(--text-courant-taille-font);
}