:root {
    /* ==[COLOR THEME]== */
    --color-main-v1-rgb:16,40,53;
    --color-main-v1:#00131A;
    --color-carglass-2: #f49400!important;
    --color-carglass-3: #0e2f3d!important;
    --color-carglass-text: #2b2b2b!important;
    --color-sub-v2:#62aee0;
    --color-main-title-v1:var(--color-main-v1);
    --color-main-text-v1:var(--color-main-v1);
    --color-main-point-v1:var(--color-carglass-2);
    --color-main-point-barre-v1:var(--color-main-v1);
    --color-sub-title-v1:var(--color-main-v1);
    --color-sub-text-v1:var(--color-carglass-2);
    --color-sub-point-v1:#ffffff;
    --color-sub-point-barre-v1:var(--color-carglass-2);
    --border-blue: 3px solid var(--color-blue);
    --radius-modal-header:0!important;
}
/**********************************************************************************************************************/
/*                                                 [FONT FAMILY]                                                      */
/**********************************************************************************************************************/
*{
    font-family: "Libre Franklin", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.text-light{
    color: white!important;
}
/****************************************************************/
/*                    [GENERAL]                                */
/**************************************************************/
.pointClassCarglass{
    background-color:#102734!important;
    color:#ffffff!important;
}
.bg-sub-v1{background-color:var(--color-carglass-2)!important;}
.bg-sub-v3{background-color:var(--color-sub-v3)!important;}

.color-title{color:var(--color-main-v1)!important;}
.color-title-v1{color:var(--color-main-v1)!important;}
.color-title-v2{color:var(--color-carglass-2)!important;}
.color-sub-title{color:var(--color-carglass-text)!important;}
.color-point{color:var(--color-main-v1)!important;}
.text-main-v1{color:var(--color-main-v1)!important;}
.legende{font-size: 0.75em; line-height: 1.25em;}
/****************************************************************/
/* [LAYOUT]                                                      */
/****************************************************************/
.bg-yellow { /* Jaune carglass*/
    background-color: var(--color-carglass-2)!important;
}
.bg-top-menu, .bg-darkblue { /* Jaune carglass*/
    background-color: rgba(var(--color-main-v1-rgb), 0.8)!important;
    color: #fff;
}
.bg-top-card { /* Bandeau des card carglass*/
    background-color: var(--color-carglass-3)!important;
    color: #fff!important;
}
.bg-top-card.color-title-v2{
    color:var(--color-carglass-2)!important;
}
.card-header .bg-top-card{text-transform: uppercase !important;}

.header-menu {
    padding: 1rem 1rem;
    vertical-align: bottom;
}
.menu-item {
    border-radius: 5px;
    padding: 0.2rem;
    text-align: center;
    cursor: pointer;
}
.menu-item span {
    font-size: 10px !important;
}
.messageCommercial{
    height: 100%;
    min-height: 150px;
    max-height: 240px;
}
.badges{
    opacity: 0.2;
}
.badges-winned{
    opacity: 1;
}
.badges.bigStatus{
    text-align: center;
}
.badges.bigStatus img{
    max-width: 170px;
    margin-bottom: 29px;
}
.badges.smallStatus{
    text-align: center;
}
.badges.smallStatus img{
    max-width: 65px;
}
.profile-card {
    color: #fff;
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
    /*margin: 0 1rem;*/
}
/** JAUGE **/
/* Styles généraux de la jauge */
.gauge-bar {
    position: relative;
    height: 34px; /* Hauteur de la barre */
    border-radius: 5px;
    /* Dégradé personnalisé avec des arrêts de couleur nets pour l'effet "segmenté" */
    background-image: linear-gradient(to right,
            transparent 0%, transparent 9%, black 9%, red 10%,
            transparent 10%, transparent 19%, black 19%, red 20%,
            transparent 20%, transparent 29%, black 29%, orange 30%,
            transparent 30%, transparent 39%, black 39%, orange 40%,
            transparent 40%, transparent 49%, black 49%, orange 50%,
            transparent 50%, transparent 59%, black 59%, orange 60%,
            transparent 60%, transparent 69%, black 69%, orange 70%,
            transparent 70%, transparent 79%, black 79%, green 80%,
            transparent 80%, transparent 89%, black 89%, green 90%),
                /* Dégradé principal pour les couleurs (segments) */
            linear-gradient(to right,
            red 0%, orange 33%, orange 66%, green 100%
            );
  /*  background: linear-gradient(to right,
    red 0%, red 16.6%,
    orange 16.6%, orange 41.6%,
    #ffc107 41.6%, #ffc107 58.3%,
    #28a745 58.3%, #28a745 83.3%,
    green 83.3%, green 100%
    );*/
    overflow: visible; /* Important pour que le curseur dépasse */
}

/* Style du curseur (la "flèche" ou le "V inversé") */
.gauge-needle {
    position: absolute;
    top: -10px; /* Ajuster pour qu'il soit au-dessus de la barre */
    left: 50%; /* Position initiale, sera écrasée par JS */
    transform: translateX(-50%); /* Centrer la flèche sur sa position */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid black; /* Couleur et taille du curseur (la pointe) */
    z-index: 10;
}

/*** */

/* CSS personnalisé */

.logo-text {
    font-size: 2.5rem;
    font-weight: bold;
    color: #f7a83b;
    text-shadow: 2px 2px #7a5a22;
    transform: rotate(-10deg);
}


/*.profile-image {
    width: 70px;
    height: 70px;
    margin-right: 1rem;
}*/
.profile-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f3f3f3;
    margin-right: 0.75rem;
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-info span{
    font-size: 12px !important;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-left: 1rem;
    flex-grow: 1;
}



.menu-item:hover {
    transform: translateY(-5px);
}

.menu-item i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.logo-placeholder {
    width: 120px;
    height: 120px;
    border: 2px dashed #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    color: #fff;
}
#contentCarousel .card-footer{
    border: 0;
}
.bd-white{
    border: 1px solid white;
}
.bst-1{
    margin:5px;
}
.table-separated {
    /* Propriété clé pour séparer les bordures */
    border-collapse: separate;

    /* Espacement entre les cellules (bordures) */
    /* Vous pouvez ajuster cette valeur (par exemple, 5px) */
    border-spacing: 1px;

    /* Optionnel : Assurez-vous que l'espacement est appliqué à l'extérieur */
    padding: 0;
}
.table-separated th,
.table-separated td {
    border: 2px solid white; /* Remplacez par la couleur de l'arrière-plan du conteneur pour simuler un espace */
    padding: 5px; /* Ajoutez un padding interne si nécessaire */
}
/**********************************************************************************************************************/
/*                                                      [PAGE LOGIN]                                                  */
/**********************************************************************************************************************/
body{background: url("/medias/images/itinerairegagnant/fond/fond_bleu.jpg") top left repeat-x #a8d6ee; background-size:contain;}
body#login-login{background:#262626 url("/medias/images/itinerairegagnant/fond/login_hiver.jpg")20% bottom no-repeat;background-size:cover;}
/* COLONNE DU FORMULAIRE */
body#login-login #formCol{background-color:rgba(248,248,250,.9); border-radius: 15px;}
body#login-login .accordion-item{background-color:transparent!important;}
/* BOUTON */
body#login-login .accordion-button{width:85%;margin:0 auto;padding:.50rem!important;color:var(--color-main-v1)!important;background:transparent!important;justify-content:center!important;font-size:22px;letter-spacing:1px;border-bottom:1px solid var(--color-main-v1)!important;box-shadow:none!important;}
body#login-login .accordion-button::after{display:none!important;}
/* COLONNE DU FORMULAIRE */
body#login-login .accordion-header svg{width:12px;font-size:1.5rem!important;line-height:1rem!important;left:calc(50% - 6px);color:var(--color-main-v1)!important;z-index:var(--z-index-1096)!important;}
body#login-login .accordion-header .sort-1{top:30px!important;}
body#login-login .accordion-header .sort-2{top:30px!important;}
/* CHAMPS DU FORMULAIRE */
body#login-login .accordion input{background-color:rgba(255,255,255,1)!important;}
body#login-login .accordion input:focus{box-shadow:none!important;border:none!important;}
body#login-login .accordion .invalid-tooltip{position:relative!important;}
body#login-login .btn{font-size: 1.25em; border-radius: 15px;}
body#login-login .mentionslegales{font-size: 0.7em;}
body#login-login .mx-1{margin-left: -1rem !important}

/**********************************************************************************************************************/
/*                                                [PAGE LAYOUT]                                                  */
/**********************************************************************************************************************/
.header-menu{font-size: 11px !important;}
.contenuPanierArrondi{border-radius: 10px 10px 10px 0}

/**********************************************************************************************************************/
/*                                                [PAGE RULES & CGV]                                                  */
/**********************************************************************************************************************/
#rulesPage h2,#cgvPage h2,#legalPage h2,#rulesPage h3,#cgvPage h3,#legalPage h2{font-family:var(--font-family-antenna-regular)!important;}
#rulesPage h4,#cgvPage h4,#cgvPage li::marker,#legalPage h4{font-family:var(--font-family-arial-narrow)!important;}
#rulesPage p,#cgvPage p,#legalPage p{font-family:var(--font-family-arial-light-regular)!important;}
#rulesPage b,#cgvPage b,#legalPage b{font-size:14px;font-family:var(--font-family-antenna-medium)!important;letter-spacing:1px;}
/**********************************************************************************************************************/
/*                                                  [PAGE ACTUALITY]                                                  */
/**********************************************************************************************************************/
#contentNews .card img{min-height:200px!important;}

#contentCarousel h4 span{margin-top: 10px;}
#cadeaux .card-subtitle{min-height: 58px !important;}
/**********************************************************************************************************************/
/*                                                     [PAGE HOME]                                                    */
/**********************************************************************************************************************/
#progressBar{height:35px;margin-top:60px;background:transparent!important;}
#progressBar span{width:55px;height:40px;font-size:10px;line-height:40px;position:absolute;top:calc(-100% - 10px);}
#progressBar span:nth-child(2){left:calc(25% - (55px/2))!important;}
#progressBar span:nth-child(4){left:calc(50% - (55px/2))!important;}
#progressBar span:nth-child(6){left:calc(75% - (55px/2))!important;}
#progressBar span:last-child{left:calc(100% - (55px/2))!important;}
#progressBar #segment-one,#progressBar #objective-one{background-color:#5192d4!important;}
#progressBar #segment-two{background:linear-gradient(to right,#9ec6ea 60%,#65a344 100%)!important;backface-visibility:hidden;}
#progressBar #objective-two{background:#9ec6ea;}
#progressBar #segment-three{background:linear-gradient(to right,#65a344 75%,#eed257 100%)!important;backface-visibility:hidden;}
#progressBar #objective-three{background:#65a344;}
#progressBar #segment-four,#progressBar #objective-four{background:linear-gradient(to right,#eed257 50%,#dcb401)!important;backface-visibility:hidden;}

.photoCommercial{position: absolute; float: right; height: 100px; top: 5px; right: 30px;}
/**********************************************************************************************************************/
/*                                             [PAGE ACCOUNT & CONTACT]                                               */
/**********************************************************************************************************************/
#myTab .nav-link.active,#supportTabHeader .nav-item .nav-link.active{background-color:var(--color-white);}
#myTab .nav-link:not(.active){color:var(--color-main-v1)!important;background-color:var(--color-grey);border:1px solid var(--bs-border-color);}
#supportTabHeader .nav-item .nav-link:not(.active){color:var(--color-main-v1);}
#myTab .nav-link:not(.active):hover,#supportTabHeader .nav-item .nav-link:not(.active):hover{color:var(--color-carglass-2)!important;background-color:var(--bs-light);}
/**********************************************************************************************************************/
/*                                                  [PARTNER SLIDER]                                                  */
/**********************************************************************************************************************/
.slick-slide{height:70px!important;}
.slick-slide a{height:100%!important;display:flex;justify-content:center!important;}
.slick-slide img{max-width:95%;max-height:70px;margin:auto!important;}
/**********************************************************************************************************************/
/*                                                    [CATALOG]                                                       */
/**********************************************************************************************************************/
#contentCarousel #cadeaux .card{height:225px!important;min-height:unset!important;}
#contentCarousel #cadeaux .card-img-overlay{background:rgba(16,43,78,.75)!important;}
/**********************************************************************************************************************/
/*                                           [ORIENTATION MOBILE LANDSCAPE]                                           */
/**********************************************************************************************************************/
@media (orientation: landscape) and (min-width: 568px) and (max-width: 968px) {
    /*body#login-login main{height:max-content!important;}*/
    /*body#login-login footer{position:relative!important;}*/
}
/**********************************************************************************************************************/
/*                                                     [SM VIEWPORT]                                                  */
/**********************************************************************************************************************/
@media screen and (min-width: 568px) {

}
/**********************************************************************************************************************/
/*                                                     [MD VIEWPORT]                                                  */
/**********************************************************************************************************************/
@media screen and (min-width: 768px) {

}
/**********************************************************************************************************************/
/*                                                     [LG VIEWPORT]                                                  */
/**********************************************************************************************************************/
@media screen and (min-width: 992px) {
    body#login-login main{height:100vh!important;}
    #navbarHeader{width:75%;}
    header .navbar-brand img{height:100px;}
    /*header ul li:first-child{width:28%!important;}*/
    header ul li:first-child{width:40%!important;}
    header ul li:not(:first-child){width:12%!important;}
    header ul.scd-nav li:last-child{width:24%!important;}
    header ul span{font-size:11px!important;}
    #navbarHeader{background-color:var(--color-white)!important;background-image:none!important;}
    #progressBar{margin-top:30px;}
    #contentAccount .dataTables_info{text-align:start;}
}
/**********************************************************************************************************************/
/*                                                     [XL VIEWPORT]                                                  */
/**********************************************************************************************************************/
@media screen and (min-width: 1200px) {

}
/**********************************************************************************************************************/
/*                                                    [XXL VIEWPORT]                                                  */
/**********************************************************************************************************************/
@media screen and (min-width: 1400px) {

}
/**
AMBITIONS
 */
/* Cible les inputs à l'intérieur des en-têtes de DataTables */
#blockAmbition table.dataTable thead th input {
    width: 100%;            /* Prend toute la largeur disponible */
    box-sizing: border-box; /* Empêche le dépassement (padding inclus dans la largeur) */
    display: block;         /* Force le passage à la ligne sous le titre */

    margin-top: 5px;
    padding: 4px;
    font-weight: normal;    /* Pour ne pas hériter du gras du <th> */
    font-size: 0.9em;
    border-radius: 3px;
    border: 1px solid #ccc;

    position: absolute;      /* Sort l'input du flux de texte */
    bottom: 5px;             /* Le colle à 5px du bas de la cellule */
    left: 5px;               /* Alignement gauche */
    width: calc(100% - 10px);/* Prend toute la largeur moins les marges */
    box-sizing: border-box;  /* S'assure que le padding ne casse pas la largeur */
}
/* Configuration de la cellule parente (th) */
#blockAmbition table.dataTable thead th {
    position: relative;      /* Référence pour le positionnement absolu */
    vertical-align: top;     /* Aligne les titres (textes) tout en haut */
    padding-bottom: 40px !important; /* Crée l'espace réservé pour l'input en bas */
    height: 100%;            /* Force la cellule à prendre toute la hauteur */
}

/* Cible les inputs à l'intérieur des en-têtes de DataTables */
table#table_suivi.dataTable thead th input {
    width: 100%;            /* Prend toute la largeur disponible */
    box-sizing: border-box; /* Empêche le dépassement (padding inclus dans la largeur) */
    display: block;         /* Force le passage à la ligne sous le titre */

    margin-top: 5px;
    padding: 4px;
    font-weight: normal;    /* Pour ne pas hériter du gras du <th> */
    font-size: 0.9em;
    border-radius: 3px;
    border: 1px solid #ccc;

    position: absolute;      /* Sort l'input du flux de texte */
    bottom: 5px;             /* Le colle à 5px du bas de la cellule */
    left: 5px;               /* Alignement gauche */
    width: calc(100% - 10px);/* Prend toute la largeur moins les marges */
    box-sizing: border-box;  /* S'assure que le padding ne casse pas la largeur */
}
/* Configuration de la cellule parente (th) */
table#table_suivi.dataTable thead th {
    position: relative;      /* Référence pour le positionnement absolu */
    vertical-align: top;     /* Aligne les titres (textes) tout en haut */
    padding-bottom: 40px !important; /* Crée l'espace réservé pour l'input en bas */
    height: 100%;            /* Force la cellule à prendre toute la hauteur */
}

/**
 POPUP RETOUR
 */
/* Overlay écran grisé */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 1050; /* juste sous la popup */
}

.popup-retour {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1055; /* au-dessus de Bootstrap */
    border: 3px solid var(--color-carglass-2);
    border-radius: 20px;
    background-color: white;
    color: #0f2938;
    padding: 40px 50px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    max-width: 90%;
}