/* S'assurer que l'arrière-plan s'étire correctement pour remplir la totalité de la hauteur de la fenêtre du navigateur. */
/* couleurs du logo Coffeeandbill */
/* bleu marine: #0050bb */
/* bleu clair: #599dff */
/* jaune: #fddf62 */
/* gris: #5e5e5e */

/* COULEURS À TESTER AVEC "PETIT LORD" */
/* BACKGROUND : DÉGRADÉ RADIAL - Externe: #2c4b48, centre foncé: #496864 Centre clair 1: #9cf4b6, Centre clair 2: #71b886 */
/* Externe: #2c4b48, centre foncé: #496864 CENTRE CLAIR 1: #9cf4b6, CENTRE CLAIR 2: #71b886, CENTRE CLAIR 3: #5cae74 */
/* DÉGRADÉ RADIAL CSS: background: radial-gradient(#71b886, #2c4b48); */

*,
*::before,
*::after {
  box-sizing: border-box !important;
}
body, html {
    /* TOUT OK */
    margin: 0;
    height: 100%;
    /* Pour éviter le défilement horizontal */
    overflow-x: hidden; 
}
body {
    /* TOUT OK */
    margin: 0;
    padding: 0;
    
    /* position relative pour le contenu */
    /* NEW - COMMENTÉ */
    /* position: relative;  */

    /* position: absolute;  */
    font-family: 'Oswald', sans-serif;
    color: #1d1d1f; 

    /* only test background-color - not ok */
    /* background-color: #636EAF; */
    /* bottom color of background-image #643BA7 avec background-color du .background-container::before à 0 - ok */
    /* background-color: #643BA7; */
    /* Toujours avoir un background dans le body pour le défilement forcé vers le haut et le bas */
    /* background: linear-gradient(#5981AF, #643BA7); */
    background: #fff;    
}
/* TEST : Add this class to body element to toggle light-mode */
.light-mode {
    background-color: white !important;
    color: black !important;
}

.background-image-container {
    /* NEW 31/01 - OK */
    width: 100%;
    /* ATTENTION À LA LIGNE CI-DESSOUS */
    min-height: 100vh;
    position: relative;

    /* NEW COMMENTÉ */
    /* overflow: auto; */

    /* NEW COMMENTÉ 29/01 - Définir la hauteur de l'écran */
    /* height: 100vh; */

    /* background-color peut-etre pas obligatoire car background dans le body */
    background-color: #9B7FFF;
    /* background-image: url('/images/app/modern_gradient_large_no_line_for_web_45.png'); */
    background-image: url('/images/app/new_background_futuristic.png');
    /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_desktop.jpg'); */
    /* background-image: url('/images/app/modern_gradient_large_lines_for_web_45.png'); */
    /* background-image: url('/images/app/modern_gradient_large_one_line_for_web_45.png'); */
    /* background-image: url('/images/app/modern_gradient_large_two_lines_for_web_45.png'); */
    background-size: cover;
    /* background-position: center center; */
    background-position: center;
    background-repeat: no-repeat;

    /* Ci-dessous : avec background-attachment: fixed; commenté, le background défile dans Android donc je décommente le 09/01/2024 pour tester ! */
    /* NEW COMMENTÉ */
    /* background-attachment: fixed; */
}

/* V1 -Appliquer le fond noir semi-transparent à l'ensemble du contenu */
/* .background-image-container::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 2;
} */

/* V2 -Appliquer le fond noir semi-transparent à l'ensemble du contenu */
.background-image-container::before {
    content: "";
    /* BACKGROUND-COLOR - OK */
    /* background-color: rgba(0, 0, 0, 0.3); */
    background-color: rgba(0, 0, 0, 0.2);

    /* BACKGROUND-COLOR - TESTS */
    /* background-color: rgba(0, 0, 0, 0.4); */
    /* background-color: rgba(39, 35, 103, 1); */
    /* background-color: rgba(99, 71, 178, 1); */

    /* BACKGROUND LINEAR GRADIENT - TESTS */
    /* background: linear-gradient(#272367, #6447b2); */
    /* background: linear-gradient(#272367, #000); */
    /* background: linear-gradient(#272367, #272367); */
    /* background: linear-gradient(#6447b2, #272367); */

    /* BACKGROUND-RADIAL - TESTS */
    /* background: radial-gradient(#71b886, #2c4b48); */
    /* background: radial-gradient(#5cae74, #2c4b48); */
    /* background: radial-gradient(#48885b, #2a3c4d); */
    /* background: radial-gradient(#496A66, #2a3c4d); */
    /* background: radial-gradient(#5588af, #656aae); */
    /* background: radial-gradient(#5588af, #424572); */
    /* background: radial-gradient(#5588af, #4c2b8a); */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
    /* z-index: 2; */
}
/* NEW - REMPLACE CI-DESSUS */
/* .background-container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 2;
} */
#page-content {
    /* NEW : 01/03/2024 */
    display: none;

    /* Position relative pour le contenu principal */
    position: relative; 
    /* width: 100%; */
    /* Hauteur minimale pour couvrir toute la hauteur de la fenêtre */
    /* min-height: 100vh; */

    /* Ajouter un débordement vertical avec un défilement automatique si nécessaire */
    /* overflow-y: auto; */

    /* Définir une hauteur maximale pour le défilement */
    /* Ajustez la valeur (100px) selon vos besoins */
    /* max-height: calc(100vh - 10px); */

    /* max-height: 100vh; */
    
    z-index: 3; /* Au-dessus de l'arrière-plan */
}
/* #firstPicture, #secondPicture, #thirdPicture { */
    /* background-image: url('/images/app/confirmed_mail.jpg'); */
    /* background-size: cover;     */
    /* background-position: center center; */
    /* height: 150px; */
    /* background-color: #0d1a2f; */
/* } */
.myLogo {
    width: 150px; /* Définir la largeur souhaitee pour l'image */
    height: auto;
}
h1, h2, h3, h4, h5, h6 {
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Raleway', sans-serif; */
    /* font-family: 'Oswald', sans-serif;     */
}
h1 {
    /* text-shadow: 1px 1px 2px gray;  */
    /* text-shadow: 1px 1px 2px purple;  */
    /* text-shadow: 1px 1px 2px #558ABB; */
    /* Oswald Bold 700 */
    /* font-weight: 700;  */
    font-weight: 200; 
}
h1 .strongerCustom {
    /* ORIGINAL */
    /* font-weight: 400; */
    /* NEW 31/05/2024 */
    font-weight: 500;
}
/* Animation h1 (application web / site web) */
.custom-animate-text {
    opacity: 1;
    /* Animation de transition */
    -webkit-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

/* Style pour masquer le texte à animer */
.hidden {
    opacity: 0;
}

/* NEW: Remplace .hidden : Style pour masquer le texte à animer */
.hidden-custom-animate-text {
    opacity: 0;
}


/* Apparition en fondu */
.fade-in-home-section {
    animation: fadeIn 2s;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

h2 {
    /* Oswald Light 300 */
    /* font-weight: 300;  */
    /* Oswald Regular 400 */
    font-weight: 500; 
}
h3 {
    /* Oswald Regular 400 */
    font-weight: 300; 
}
h5 {
    /* bootstrap warning color #ffc107*/
    color: #CFD8DC;
}
p, span, label {
    /* font-family: 'Oswald', sans-serif; */
}
button, a {
    /* font-family: 'Oswald', sans-serif; */
}
/* NEW OK */
.textColorAndStroke {
    font-weight: 500 !important;
    color: #ffc107 !important;
    -webkit-text-stroke-width: 1.5px !important;
    -webkit-text-stroke-color: white !important;
}
/* NEW OK */
.textTransparentAndStroke {
    font-weight: 700 !important;
    color: transparent !important;
    -webkit-text-stroke-width: 1.5px !important;
    -webkit-text-stroke-color: white !important;
}
/* NEW OK */
.textColorAndShadow {
    font-weight: 500 !important;
    color: #fff !important;
    text-shadow: 1.5px 1.5px #ffc107 !important;
}
/* NEW OK - EFFET SURLIGNÉ STABILO */
.realistic-marker-highlight{
    position:relative;
    color: #ffffff;
    margin-left: 15px;
    font-weight: 500;
}
.realistic-marker-highlight::before{
    content: "";
    /* background-color:#ef8c22; */
    background-color:#ffc107;
    opacity: 1;
    width: 110%;
    /* height:1.05em; */
    height: 70%;
    position: absolute;
    z-index: -1;
    /* filter: url('../../svg/oneSvg.svg'); */
    left: -0.25em;
    /* left: -4%; */
    /* top:-0.05em; */
    top: 0.2em;
    padding: 0 0.30em;
    /* padding: 0 1em; */
    transform: rotate(-1deg);
}

/* HEADER - announcement-bar */
.announcement-bar {
    height: auto;
    font-family: "Roboto", sans-serif;
    /* background-color with Bootstrap class - bg-white */
    /* font-color with Bootstrap class - text-black */
}
.header-title {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.header-description {
    font-size: 14px !important;
    font-weight: 300 !important;
}
.header-cta-if-bg-black {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}
/* hover header-cta if bg-black */
.header-cta-if-bg-black:hover {
    color: black !important;
    background-color: #fff !important;
    border: 1px solid #fff !important;
}
.header-cta-if-bg-white {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}
/* hover header-cta if bg-white */
.header-cta-if-bg-white:hover {
    color: #fff !important;
    background-color: #000 !important;
    border: 1px solid #000 !important;
}

/* Mediaqueries : if max-width > top to bottom xxl to xs - if min-width > top to bottom xs to xxl */
/* NEW */
/* Styles spécifiques pour le mode mobile (Bootstrap class: None xsmall) */
/* de 0px à 576px */
@media (max-width: 576px) {
    .background-image-container {
        /* Même image en mobile mais Décalage vers la droite */
        /* background-image: url('/images/app/futuristic_city_1_1920x1280.jpg'); */
        /* IF CSS IN HTML PAGE */
        /* background-position: right 55% top 100%;  */
        
        /* background-image en mobile differente du differente en desktop */
        /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_mobile.jpg'); */
        /* background-image: url('/images/app/modern_gradient_no_line_mobile.png'); */
        /* background-image: url('/images/app/new_background_hexagonal_top.png'); */
        background-image: url('/images/app/new_background_hexagonal_top_lighter_80.jpg');
    }
    /* Styles pour le texte h1 en mobile */
    .h1-lg {
        font-size: 2.5rem !important;
    }
    .h4-lg {
        font-size: 2.5rem !important;
    }
}

/* NEW CAR BREAKPOINT MANQUANT : 07/02/2024 */
/* Styles spécifiques pour le mode mobile (Bootstrap class: sm) */
/* de 576px à PLUS */
@media (min-width: 576px) {
    .background-image-container {
        /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_mobile.jpg'); */
        /* background-image: url('/images/app/modern_gradient_no_line_mobile.png'); */
        background-image: url('/images/app/new_background_hexagonal_top.png');
        background-image: url('/images/app/new_background_hexagonal_top_lighter_80.jpg');
    }
    .h1-lg {
        font-size: 2.5rem !important;
    }
    .h4-lg {
        font-size: 2.5rem !important;
    }
}

/* NEW */
/* Styles spécifiques (Bootstrap class: md) */
/* de 768px à PLUS */
@media (min-width: 768px) {
    .background-image-container {
        /* Même image en mobile mais Décalage vers la droite */
        /* background-image: url('/images/app/futuristic_city_1_1920x1280.jpg'); */
        /* IF CSS IN HTML PAGE */
        /* background-position: right 55% top 100%;  */
        
        /* background-image specifique desktop */
        /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_desktop.jpg'); */
        /* background-image: url('/images/app/modern_gradient_no_line_desktop.png'); */
        /* background-image: url('/images/app/new_background_futuristic.png'); */
        /* background-image: url('/images/app/new_background_hexagonal_left.png'); */
        background-image: url('/images/app/new_background_hexagonal_left_lighter_80.jpg');
    }
    .h1-lg {
        font-size: 2.5rem !important;
    }
    .h4-lg {
        font-size: 2.5rem !important;
    }
}
/* NEW */
/* Styles spécifiques (Bootstrap class: lg) */
/* de 992px à PLUS */
@media (min-width: 992px) {
    .background-image-container {
        /* Même image en mobile mais Décalage vers la droite */
        /* background-image: url('/images/app/futuristic_city_1_1920x1280.jpg'); */
        /* IF CSS IN HTML PAGE */
        /* background-position: right 55% top 100%;  */
        
        /* background-image specifique desktop */
        /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_desktop.jpg'); */
        /* background-image: url('/images/app/modern_gradient_no_line_desktop.png'); */
        /* background-image: url('/images/app/new_background_futuristic.png'); */
        /* background-image: url('/images/app/new_background_hexagonal_left.png'); */
        background-image: url('/images/app/new_background_hexagonal_left_lighter_80.jpg');
    }
    .h1-lg {
        font-size: 2.2rem !important;
    }
    .h4-lg {
        font-size: 2.2rem !important;
    }
}

/* Styles spécifiques (Bootstrap class: xl) */
/* de 1200px à PLUS */
@media (min-width: 1200px) {
    .background-image-container {
        /* Même image en mobile mais Décalage vers la droite */
        /* background-image: url('/images/app/futuristic_city_1_1920x1280.jpg'); */
        /* IF CSS IN HTML PAGE */
        /* background-position: right 55% top 100%;  */
        
        /* background-image specifique desktop */
        /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_desktop.jpg'); */
        /* background-image: url('/images/app/modern_gradient_no_line_desktop.png'); */
        /* background-image: url('/images/app/new_background_futuristic.png'); */
        /* background-image: url('/images/app/new_background_hexagonal_left.png'); */
        background-image: url('/images/app/new_background_hexagonal_left_lighter_80.jpg');
    }
    .h1-lg {
        /* le 07/02/2024 j'ai décommenté la ligne ci-dessous */
        font-size: 3.1rem !important;
        /* font-size: 2.8rem !important; */
    }
    .h4-lg {
        font-size: 3.1rem !important;
    }
}
/* Styles spécifiques (Bootstrap class: xxl) */
/* de 1400px à PLUS */
@media (min-width: 1400px) {
    .background-image-container {
        /* Même image en mobile mais Décalage vers la droite */
        /* background-image: url('/images/app/futuristic_city_1_1920x1280.jpg'); */
        /* IF CSS IN HTML PAGE */
        /* background-position: right 55% top 100%;  */
        
        /* background-image specifique desktop */
        /* background-image: url('/images/app/modern_gradient_lines_jpeg_48pc_quality60_desktop.jpg'); */
        /* background-image: url('/images/app/modern_gradient_no_line_desktop.png'); */
        /* background-image: url('/images/app/new_background_futuristic.png'); */
        /* background-image: url('/images/app/new_background_hexagonal_left.png'); */
        background-image: url('/images/app/new_background_hexagonal_left_lighter_80.jpg');
    }
    .h1-lg {
        /* font-size: 3rem; */
        font-size: 3.1rem !important;
    }
    .h4-lg {
        font-size: 2.7rem !important;
    }
}

/* Burger Menu */
.btn-icon {
    padding: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
    /* border-radius: 100% !important; */
    /* border-color: #fff !important; */
    border-style: none !important;
    flex-shrink: 0 !important;
    height: calc((0.875rem * 1) + (0.875rem * 2) + (2px)) !important;
    width: calc((0.875rem * 1) + (0.875rem * 2) + (2px)) !important;
    color: #fff !important;
}

/* Next Button */
.next-button {
    position: fixed;
    /* background: #6059c0; */
    background: #FFC107;
    color: #fff;
    width: 44px;
    height: 44px;
    line-height: 1.5;
    font-size: 16px;
    /* round button */
    /* border-radius: 50%; */
    /* square button */
    border-radius: 10%;
    border: 2px solid #fff;
    /* right: 35px; */
    right: 25px;
    bottom: 85px;
    /* transition: background 0.5s; */
    z-index: 999;
    /* z-index: 1000; */
    display: flex;
    align-items: center;
    justify-content: center;
} 
.next-button i {
    color: #fff;
}
.next-button:hover {
    color: #fff;
}
@media (max-width: 768px) {
    .next-button {
        /* right: 25px; */
        /* bottom: 60px; */
        right: 25px;
        bottom: 40px;
    }
}
/* Animate for next-button Button */
@keyframes bouton-anime {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(6px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
.translate-animate {
    animation-name: bouton-anime;
    /* Durée de l'intervalle avant le début de l'animation */
    animation-delay: 5s;
    /* Durée de l'animation */
    animation-duration: 300ms;
    /* Définition du nombre de fois que l'animation doit être répétée */
    animation-iteration-count: 2;
}
/* NEW - 12/02/2024 */
.new-next-button {
    position: fixed;
    background: #FFC107;
    color: #fff;
    /* width: 44px; */
    height: 44px;
    line-height: 1.5;
    font-size: 16px;
    /* square button */
    /* border-radius: 10%; */
    border-radius: 5px;
    border: 2px solid #fff;
    /* right: 35px; */
    right: 25px;
    /* bottom: 85px; */
    bottom: 65px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-next-button i {
    color: #fff;
}
.new-next-button:hover {
    color: #fff;
    background-color: #e0a800;
}
@media (max-width: 768px) {
    .new-next-button {
        /* right: 25px; */
        /* bottom: 60px; */
        right: 25px;
        /* bottom: 40px; */
        bottom: 45px;
    }
}
/* Animate for new-next-button Button */
@keyframes new-bouton-anime {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(6px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
.new-translate-animate {
    animation-name: new-bouton-anime;
    /* Durée de l'intervalle avant le début de l'animation */
    animation-delay: 5s;
    /* Durée de l'animation */
    animation-duration: 300ms;
    /* Définition du nombre de fois que l'animation doit être répétée */
    animation-iteration-count: 2;
    /* animation-iteration-count: infinite; */
}

/* animation infini START */
/* ... */
/* animation infini END */

/* IMAGES HEXAGONE ISOMETRIC */
.drop-shadow-1 {
    /* box-shadow : Effet sur le cadre de l'image */
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); */
    /* filter: drop-shadow() : Effet sur l'image détouré */
    /* filter: drop-shadow(0 0 0.75rem rgb(255, 255, 255)); */
    /* filter: drop-shadow(0 0 0.75rem rgb(30, 30, 30)); */
    filter: drop-shadow(0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.5));
}

/* FOOTER */
#footer_comingsoon {
    /* position: fixed;
    left: 0;
    bottom: 0; */
    width: 100%;
    color: #fff;
    /* font-family: 'Oswald', sans-serif; */
    font-weight: 300;
}
#footer_comingsoon a {
    text-decoration: none;
    color: #fff;
}

/* FORMULAIRES */
input {
    font-family: Arial, Helvetica, sans-serif;
}
input::placeholder {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
/* Live Toast - flash message public */
/* variable .custom-toast UTILE - NE PAS SUPPRIMER */
.custom-toast {
    position: fixed; 
    top: 67px; 
    z-index: 9999999 !important;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
}

/* variable .container-custom-toast INUTILE - Déployer, Tester, et Supprimer */
/* .container-custom-toast {
    position: fixed;
    top: 72px;
    z-index: 1090;
} */

/* Bootstrap forms : Error messages */
.invalid-feedback {
    color: #ff1919;
    /* letter-spacing: 0.5px; */
}
/* contactPublic */
.secondary-input {
    position: absolute !important;
    left: -9999px !important;
}