/* --- Style général du Header --- */
header.bg-warning {
    background-color: #fdc715 !important; /* Le jaune exact Yellow Square */
    position: sticky;
    top: 0;
    z-index: 1050;
    min-height: 85px; /* Hauteur fixe pour permettre le centrage vertical précis */
    padding: 0 !important; /* On annule les paddings génériques Bootstrap */
    display: flex;
    align-items: center;
}

header .container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px; /* Aligné sur la hauteur du header */
}

/* --- Style du Logo (Grand et arrondi en bas) --- */
header .logo {
    position: absolute;
    top: 25px;
    left: 130px;
    z-index: 1000;
}

header .logo img {
    height: 200px;
    width: 200px;
    object-fit: contain;
    background-color: #000000; /* Fond noir du logo */
    padding: 5px;
    border-radius: 25px; /* Coins arrondis du bas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

header .logo img:hover {
    transform: scale(1.02); /* Léger effet au survol du logo */
}

/* --- Style de la Navigation (Calée à droite et centrée verticalement) --- */
header nav.nav {
    margin-left: auto; /* Pousse tout le bloc navigation à l'extrême droite */
    margin-bottom: 17px; /* On annule le margin-bottom par défaut de Bootstrap */
    display: flex;
    align-items: center; /* Centre verticalement tous les liens */
    gap: 5rem !important; /* Espace identique entre les blocs de texte */
}

/* --- Style des Liens (Textes compacts, police grasse) --- */
header nav.nav .nav-link {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 0.5px;
    color: #000000 !important; /* Couleur par défaut : noir */
    text-align: center;
    line-height: 1.1; /* Effet condensé sur deux lignes comme sur la maquette */
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Aligne la boîte de collision pour un centrage parfait */
    white-space: pre-line; /* Permet la gestion des sauts de ligne */
}

/* --- Gestion de la page Active (Texte en blanc) --- */
header nav.nav .nav-link.active {
    color: #FFFFFF !important; /* Devient blanc lorsque la classe active est injectée par Evo */
}

header nav.nav .nav-link:hover {
    color: #FFFFFF !important; /* Effet de survol agréable */
}

/* ==========================================
   RESPONSIVE HEADER (Yellow Square)
   ========================================== */
/* --- 1. Écrans Moyens / Tablettes (max-width: 1024px) --- */
@media (max-width: 1024px) {
    header.bg-warning {
        min-height: 75px;
    }

    header .container {
        height: 75px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* On repositionne le logo pour qu'il soit plus petit et ne mange pas tout l'écran */
    header .logo {
        top: 15px;
        left: 30px; 
    }

    header .logo img {
        height: 110px;
        width: 110px;
        border-radius: 15px;
    }

    /* On réduit l'espace entre les liens pour éviter que la navigation passe à la ligne */
    header nav.nav {
        gap: 2rem !important;
        margin-bottom: 0; /* Centrage vertical net */
    }

    header nav.nav .nav-link {
        font-size: 16px;
    }
}

/* --- 2. Mobiles et Petites Tablettes (max-width: 768px) --- */
@media (max-width: 768px) {
    header.bg-warning {
        min-height: 65px;
    }

    header .container {
        height: 65px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Alignement du logo à gauche, très compact */
    header .logo {
        top: 10px;
        left: 15px;
    }

    header .logo img {
        height: 80px;
        width: 80px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Ajustement des liens de navigation pour qu'ils tiennent sur une seule ligne tout à droite */
    header nav.nav {
        gap: 1rem !important;
        margin-bottom: 0;
    }

    header nav.nav .nav-link {
        font-size: 13px;
        min-height: auto;
        letter-spacing: 0;
    }
}

/* --- 3. Très petits Mobiles (max-width: 480px) --- */
@media (max-width: 480px) {
    header .logo img {
        height: 65px;
        width: 65px;
    }
    
    header nav.nav {
        gap: 0.6rem !important;
    }

    header nav.nav .nav-link {
        font-size: 11px;
    }
}


/* ==========================================================
   STYLE DU FOOTER (YELLOW SQUARE)
   ========================================================== */

.main-footer {
    width: 100%;
}

/* --- 1. Section Newsletter (Zone blanche/grisâtre) --- */
.footer-newsletter {
    background-color: #F8F9FA; /* Fond légèrement grisé type conteneur de la maquette */
    padding-top: 50px;
    padding-bottom: 50px;
}

.newsletter-title {
    font-family:'Arial Black', sans-serif;
    font-weight: 0;
    font-size: 15px;
    color: #292929;
    letter-spacing: 0.2px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* --- 2. Section Basse (Bandeau Jaune) --- */
.footer-bottom {
    background-color: #FFCC00; /* Jaune Yellow Square exact */
    padding-top: 35px;
    padding-bottom: 15px;
    color: #000000;
}

.social-title {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-weight: 100;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Alignement et dimension des icônes de l'image */
.footer-bottom .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espace harmonieux entre chaque cercle */
    margin-bottom: 40px;
}

.footer-bottom .social-icons img {
    width: 45px; /* Légèrement plus grand pour correspondre aux proportions de la maquette */
    height: 45px;
    transition: transform 0.2s ease-in-out;
}

.footer-bottom .social-icons a:hover img {
    transform: scale(1.1); /* Effet dynamique discret au survol */
}

/* Texte de Copyright tout en bas à droite/centré */
.footer-bottom .copyright {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0;
    opacity: 0.8;
}

/* ==========================================================
   RESPONSIVE DU FOOTER
   ========================================================== */
@media (max-width: 767.98px) {
    .footer-bottom .social-icons {
        gap: 12px;
        flex-wrap: wrap; /* Évite que les icônes sortent de l'écran sur très petit mobile */
    }
    
    .footer-bottom .social-icons img {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================
   SECTION 1 - ACCUEIL
   ========================================================== */
/* Section contenant la vidéo */
.video-only-section {
    position: relative; /* Indispensable pour positionner l'overlay noir par-dessus */
    width: 100%;
    height: 450px; /* Ajustez cette hauteur selon le rendu souhaité pour la vidéo seule */
    background-color: #000000;
    overflow: hidden;
}

.video-only-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Filtre noir sur la vidéo */
.video-only-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Filtre noir à 40% d'opacité. Ajustez de 0.1 à 0.9 pour plus ou moins sombre */
    pointer-events: none; /* Laisse passer les clics au cas où */
    z-index: 1;
}

/* --- Style du bloc Texte avec Image de Fond --- */
.adn-text-section {
    background: url('../images/bgtxt1.png') center center / cover no-repeat; 
    background-color: #0d0d0d; /* Couleur de secours très sombre */
    position: relative;
    z-index: 1;
}

/* Filtre noir sur l'image de fond texturée */
.adn-text-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: -1; 
}

/* On s'assure que le bloc de texte reste bien lisible et centré */
.adn-text-section .visual-adn {
    position: relative;
    z-index: 2; /* Force le texte à passer au-dessus du filtre noir */
    max-width: 950px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}


/* ==========================================================
   SECTION 2 - ACCUEIL
   ========================================================== */
/* --- Section Alphasynt --- */
.section-alphasynt {
    font-family: 'Poppins', sans-serif;
}

/* Grand titre de droite style Impact / Bold */
.section-alphasynt .title-meritez {
    margin-left: 75px;
    font-size: 3rem; 
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: #000000;
    line-height: 1;
    font-family: 'Impact', 'Arial Black', sans-serif; /* Pour se rapprocher de la police condensée de la maquette */
}

/* Textes de description de gauche */
.section-alphasynt .loyalty-block p.small {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #333333 !important;
}

/* Ajustement des boutons "NOUS REJOINDRE" en capsules jaunes */
.section-alphasynt .btn-join {
    background-color: #fdc715 !important; /* Jaune exact */
    border: none;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.section-alphasynt .btn-join:hover {
    background-color: #e0ae0f !important;
    transform: translateY(-2px);
}

/* Tailles maximales des images */
.section-alphasynt .img-phone {
    max-height: 250px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3 ease;
}

.section-alphasynt .img-cards {
    max-height: 250px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3 ease;
}

.section-alphasynt .img-alphasynt {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.section-alphasynt .img-phone:hover,
.section-alphasynt .img-cards:hover {
    transform: scale(1.05);
}

/* --- Responsive pour Tablettes & Mobiles --- */
@media (max-width: 768px) {
    .section-alphasynt .title-meritez {
        font-size: 2rem;
        text-align: center;
        margin-top: 2rem;
    }
    
    .section-alphasynt .col-md-7 {
        order: -1; /* Sur mobile, on affiche la gamme d'huile d'abord */
    }
}

/* ==========================================================
   SECTION 3 - ACCUEIL
   ========================================================== */
.bg-salon {
    /* Image de fond */
    background: url('../images/attente_page1.png') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid #fdc715; /* Bordure jaune de séparation en bas */
}

/* Filtre noir translucide couvrant tout le fond */
.bg-salon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Obscurcit l'image de fond à 70% */
    z-index: 0;
}

/* Force les éléments à passer au-dessus du filtre noir */
.bg-salon .z-1 {
    z-index: 1;
}

/* Style des paragraphes de gauche */
.text-salon-block p {
    font-family: 'Poppins', sans-serif;
    font-size: 21px; 
    font-weight: 600;
    line-height: 1.5;
    color: #FFFFFF;
}

/* Couleur jaune spécifique pour "Yellow-Square" */
.text-salon-block .text-warning-yellow {
    color: #fdc715 !important;
    font-weight: 700;
}

/* --- Adaptabilité Mobile (Responsive) --- */
@media (max-width: 768px) {
    .text-salon-block p {
        font-size: 17px; /* On réduit un peu la taille du texte sur mobile */
        text-align: center; /* On centre le texte sur mobile */
    }
}

/* ========================================== */
/* --- Section Page Contact ---               */
/* ========================================== */

.section-contact {
    font-family: 'Poppins', sans-serif;
}

/* Titre "Contact" style Impact imposant */
.section-contact .title-contact {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 3rem;
    margin-top: 50px;
    margin-left: 20px;
    font-weight: 100;
    color: #1e1e1e;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Image des bidons d'huile à gauche */
.section-contact .img-contact-huile {
    max-width: 100%;
    margin-left: -100px;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15)); /* Effet d'ombre réaliste sous les bouteilles */
}

/* Formulaire : Style des champs de saisie (Inputs et Textarea) */
.contact-form .form-control {
    background-color: #e5dfda !important;
    border: none;
    border-radius: 6px;
    padding: 12px 18px;
    font-size: 15px;
    color: #212529;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Effet d'activation au clic dans un champ (Focus) */
.contact-form .form-control:focus {
    background-color: #dbd4ce !important; /* Légèrement plus foncé */
    box-shadow: 0 0 0 3px rgba(253, 199, 21, 0.3); /* Halo jaune discret */
    outline: none;
}

/* Libellés (Name, E-mail, Subject, Message) */
.contact-form .form-label {
    font-size: 14px;
    letter-spacing: 1px;
    color: #1e1e1e;
    margin-bottom: 3px;
}

/* Style du bouton "ENVOYER" jaune arrondi (Pilule) */
.contact-form .btn-send-contact {
    background-color: #fdc715 !important;
    border: none;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 12px 50px;
    transition: all 0.2s ease-in-out;
}

.contact-form .btn-send-contact:hover {
    background-color: #e0ae0f !important; /* Jaune un peu plus sombre au survol */
    transform: translateY(-2px); /* Léger effet de lévitation */
    box-shadow: 0 5px 15px rgba(253, 199, 21, 0.4);
}

/* Responsive pour mobiles */
@media (max-width: 768px) {
    .section-contact .title-contact {
        font-size: 2.5rem;
        text-align: center;
        width: 100%;
    }
    .section-contact .img-contact-huile {
        max-width: 70%;
        margin-bottom: 2rem;
    }
}

/*===============================================*/
/* NOUS REJOINDRE 						    	 */
/*===============================================*/
/* Couleur Jaune signature */
.text-warning-ys {
    color: #fdc715 !important;
    font-weight: bold;
}
.btn-warning-ys {
    background-color: #fdc715 !important;
    border: none;
    color: #000 !important;
    transition: all 0.3s ease;
}
.btn-warning-ys:hover {
    background-color: #e0ae0f !important;
    transform: translateY(-2px);
}

/* SECTION 1 : Bannière d'introduction */
.hero-rejoindre {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65)), 
                url('../images/bgtxt1.png') no-repeat center center;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 80px;
    border-bottom: 5px solid #fdc715;
}

.title-hero-rejoindre {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 1px;
}

.desc-hero-rejoindre {
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.5px;
    max-width: 950px;
    margin: 45px auto;
}

.ctnr {
    margin-top: 25px;
    display: inline-block;
    text-align: center;
}

.list-hero-rejoindre {
    text-align: left;
    margin-left: 50px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}
.list-hero-rejoindre li {
    margin-bottom: 8px;
}

/* SECTION 2 : Avantages (Photos & Textes) */
.section-avantages {
    font-family: 'Poppins', sans-serif;
}
.title-avantages {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.7rem;
    line-height: 1.5;
    letter-spacing: 0.5px;
    color: #000000;
}
.list-points {
    letter-spacing: 0.5px;
}
.list-points li {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

/* SECTION 3 : Formulaire & Animation */
.btn-demande {
    font-size: 1.3rem;
    padding: 15px 60px;
    letter-spacing: 1px;
    border-radius: 50px;
}

/* Cache le formulaire et gère l'effet d'ouverture fluide */
.form-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.5s ease-in-out;
}

/* Classe injectée par JavaScript au clic */
.form-collapse.show {
    max-height: 1500px;
    opacity: 1;
    padding-bottom: 40px;
}

.rejoindre-form .form-control {
    background-color: #e5dfda !important;
    border: none;
    border-radius: 6px;
    padding: 12px 18px;
    font-weight: 500;
}
.rejoindre-form .form-control:focus {
    background-color: #dbd4ce !important;
    box-shadow: 0 0 0 3px rgba(253, 199, 21, 0.3);
    outline: none;
}

/* Custom Styles - Rejoindre YS Network */
/*.form-collapse {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.form-collapse.show {
    display: block !important;
    opacity: 1 !important;
}

.btn-warning-ys {
    background-color: #ff9900;
    border-color: #ff9900;
    transition: all 0.3s ease;
}

.btn-warning-ys:hover {
    background-color: #e68a00;
    border-color: #e68a00;
}

.form-error {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}


/*===============================================*/
/* NOS HUILES    						    	 */
/*===============================================*/
.oils-hero {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.65)), url('../images/bgtxt1.png'); 
    background-size: cover;
    min-height: 500px;
}

.header-title-yellow {
    text-transform: uppercase;
    font-family: 'Impact', 'Arial Black', sans-serif;
    color: #FFFFFF;
    font-size: 2.1rem;
    letter-spacing: 1px;
}

.oils-hero-text p {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.7;
    color: #E0E0E0;
    text-align:justify;
}

/* Force les images des catégories à être de taille identique */
.category-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Ratio carre */
    overflow: hidden;
    border: 1px solid #DDD; /* Optionnel : léger contour */
}

.category-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease;
}

/* Effet au survol des images */
.category-card:hover .category-img {
    transform: scale(1.05);
}

.category-title {
    font-family:'Arial Black', sans-serif;
    font-size: 1.1rem;
    font-weight:bolder;
    color: #000000;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

/* --- Fiches Techniques --- */
.tech-sheets-card {
    background-color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.custom-select {
    max-width: 450px;
    border-radius: 4px;
    border: 1px solid #CCC;
    background-color: #F8F9FA;
    font-size: 0.95rem;
    font-weight: 600;
}

.custom-select:focus {
    border-color: #000;
    box-shadow: 0 0 0 0.25rem rgba(255, 204, 0, 0.5); /* Halo Jaune Yellow-Square */
}

#openPdfBtn {
    background-color: #000000;
    color: #FFFFFF;
    border: none;
    transition: all 0.3s ease;
}

#openPdfBtn:hover:not(:disabled) {
    background-color: #FFCC00;
    color: #000000;
}

#openPdfBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*===============================================*/
/* 01. VARIABLES 						    	 */
/*===============================================*/
/*:root {
    --main-color: #fdc715;
    --text-color: #111827;
    --accent-text-color: #252525;
    --font-family: 'Poppins', sans-serif;
}

/*===============================================*/
/* 02. COLORS	 						    	 */
/*===============================================*/
/*.main-color {
    color: var(--main-color);
}

.main-bg {
    background-color: var(--main-color);
}

.white-color {
    color: #FFFFFF;
}

.white-bg {
    background-color: #FFFFFF;
}

.text-color {
    color: var(--text-color);
}

.accent-text-color {
    color: var(--accent-text-color);
}

.hover-main-color:hover {
    color: var(--main-color);
}

.hover-white-color:hover {
    color: #FFFFFF;
}

.hover-main-bg:hover {
    background-color: var(--main-color);
}


/*===============================================*/
/* 03. LAYOUT	 						    	 */
/*===============================================*/
/*.object-fit {
    position: relative;
    background-color: #333333;
}

.object-fit img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}

/*===============================================*/
/* 04. TYPOGRAPHY 						    	 */
/*===============================================*/
/*body {
    font-family: var(--font-family);
    font-weight: 200;
    line-height: 1.8;
}

.align-justify {
    text-align: justify;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-14 {
    font-size: 14px;
}

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

.font-size-16 {
    font-size: 16px;
}

.font-size-18 {
    font-size: 18px;
}

.uppercase {
    text-transform: uppercase;
}

.base-line-height {
    line-height: 1;
}

.text-decoration-none {
    text-decoration: none;
}

.font-weight-regular {
    font-weight: 400;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-semibold {
    font-weight: 600;
}

.font-weight-bold {
    font-weight: 700;
}

.font-weight-extrabold {
    font-weight: 800;
}

a:hover {
    color: var(--main-color);
}

/*===============================================*/
/* 05. NAVBAR	 						    	 */
/*===============================================*/
/*.navbar-light .navbar-nav .nav-link {
    color: var(--accent-text-color);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--main-color);
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #000;
    font-weight: 600;
}

.navbar-light .navbar-text a
{
    color: #ffffff;
    font-weight: 500;
}

.navbar-light .navbar-nav .nav-item a,
.navbar-light .navbar-text
{
    font-size: 14px;
}

.navbar-light .navbar-toggler {
    color: var(--accent-text-color);
    border-color: rgba(0,0,0,.1);
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0;
}

.list-group-item.list-menu-item {
    padding: 1rem 0rem;
}

.navbar-light .navbar-nav .nav-item {
    padding-right: 0px;
}

.navbar-scrolling {
    padding-bottom: 15px;
    background-color: #FFFFFF;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.fixed-top {
    background-color: #fdc715;
}

.footer-bg {
    background-color: #fdc715;
}

/*===============================================*/
/* 06. INTRODUCTION						    	 */
/*===============================================*/

/*#introduction {
    padding: 200px 0px 60px;
    background-image: url(../img/circles.png);
    background-repeat: no-repeat;
    background-size: 450px;
    background-position: left bottom;
}

.img-hero {
    width: 80%;
}

/*===============================================*/
/* 07. COMPANIES LOGO   				    	 */
/*===============================================*/
/*.company-logo img {
    width: 140px;
    filter: grayscale(100%);
}

.company-logo img:hover {
    filter: grayscale(0);
    cursor: pointer;
}

/*===============================================*/
/* 08. ENGAGEMENTS 						    	 */
/*===============================================*/
/*#engagement {
    background: #8e9eab;
    background-image: url(../images/home/video-bg.jpeg);
    background-image: url(../images/home/video-bg.jpeg), -webkit-linear-gradient(to right, #ffffff, #ffffff);
    background-image: url(../images/home/video-bg.jpeg), linear-gradient(to right, #ffffff, #ffffff);
    height: 490px;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-gradient-slide {
    background: rgb(142 158 171 / 20%);
    background-image: url(../img/video-bg.jpeg);
    background-image: url(../img/video-bg.png), -webkit-linear-gradient(to right, #eef2f3, #8e9eab);
    background-image: url(../img/video-bg.png), linear-gradient(to right, #eef2f3, #8e9eab9f);
}

#engagement a:hover {
    color: #FFFFFF;
}

/*===============================================*/
/* 09. SERVICES	 						    	 */
/*===============================================*/
/*.list-group-item {
    border: 1px solid rgba(0,0,0,.05);
    background-color: transparent;
}

/*===============================================*/
/* 10. PRICING	 						    	 */
/*===============================================*/
/*.bg-pricing {
    background-image: url(../img/circles2.png);
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: right bottom;
}

.red-color {
    color: #EF4444;
}

/*===============================================*/
/* 11. TESTIMONIALS						    	 */
/*===============================================*/

/*.testimonial-user {
    width: 20%;
}

.gray-color-500 {
    color: #6B7280;
}

/*===============================================*/
/* 12. BLOG	 						    	 */
/*===============================================*/
/*#blog-hero {
    margin-top: 80px;
}

.page-link {
    color: var(--main-color);
}

.page-link:hover {
    color: var(--main-color);
    opacity: .8;
}

.page-link:focus {
    z-index: 3;
    color:  var(--main-color);
    background-color: #e9ecef;
    outline: 0;
    box-shadow: none;
}

/*===============================================*/
/* 13. SINGLE POST 						    	 */
/*===============================================*/

/*#article h1, 
#article h2, 
#article h3, 
#article h4, 
#article h5, 
#article h6 {
    font-weight: 600;
    margin-top: 3rem;
    color: var(--text-color);
}

#article p {
    font-size: 16px;
    line-height: 2;
    color: var(--accent-text-color);
    margin-top: 2rem;
    margin-bottom: 0px;
}

#article img {
    margin-top: 2rem;
}

#article figure {
    background-color: #f8f9fa;
    padding: 3rem;
    margin-top: 2rem;
}

#article figure p {
    margin-top: 0rem;
    font-weight: 600;
    color: var(--text-color);
}

/*===============================================*/
/* 14. SUBSCRIBE 						    	 */
/*===============================================*/

/*.form-control:focus {
    border-color: #34D399;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(209, 250, 229,.45);
}

/*===============================================*/
/* 15. FOOTER	 						    	 */
/*===============================================*/

/*#footer a:hover{
    color: var(--main-color)!important;
}

/*===============================================*/
/* 16. MISC 	 						    	 */
/*===============================================*/

/*.pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #10B981;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #10B981;
  }
}

@keyframes ldio-r67ztvwtjg {
  0% {
    top: 137.76px;
    left: 137.76px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 25.830000000000002px;
    left: 25.830000000000002px;
    width: 223.86px;
    height: 223.86px;
    opacity: 0;
  }
}

.ldio-r67ztvwtjg div {
  position: absolute;
  border-width: 5.74px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: ldio-r67ztvwtjg 3.125s cubic-bezier(0,0.2,0.8,1) infinite;
}

.ldio-r67ztvwtjg div:nth-child(1) {
  border-color: #fdc715
}

.ldio-r67ztvwtjg div:nth-child(2) {
  border-color: #ffffff;
  animation-delay: -1.5625s;
}

.loadingio-spinner-ripple-n04314c8ef9 {
  width: 287px;
  height: 287px;
  display: inline-block;
  overflow: hidden;
  background: transparent;
}
.ldio-r67ztvwtjg {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
/*
}
/*.ldio-r67ztvwtjg div { box-sizing: content-box; }
/* generated by https://loading.io/ */

/*@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

#preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: rgb(23, 22, 22);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: opacity 0.3s linear;
}

#preloader.isdone {
    opacity: 0;
    visibility: hidden;
}

#back-to-top {
    display: inline-block;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    cursor: pointer;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.transition {
    transition: all .3s ease;
}

html {
    scroll-behavior: smooth; 
} 

.hr {
    color: #D1D5DB;
}

.icon-12 {
    width: 12px;
    height: 12px;
}

.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-24 {
    width: 16px;
    height: 16px;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

.icon-42 {
    width: 42px;
    height: 42px;
}

.icon-64{
    width: 64px;
    height: 64px;
}

.bg-gradient-to-top {
    background: rgb(243,244,246);
    background: linear-gradient(0deg, rgba(243,244,246,1) 0%, rgba(255,255,255,1) 50%);
}

.flex-basis-100 {
    flex-basis: 100px;
}

.navbar-brand img {
    width: 170px;
    position: absolute;
    box-shadow: 0px 0px 12px 10px rgb(0 0 0 / 8%);
    border-radius: 5px;
    top: 0px;
}

.navbar-light .navbar-brand {
    width: 200px;
}

.fixed-top {
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
    padding-bottom: 15px;
}

.bg-ys {
    background: rgb(253 199 21 / 30%);
}

.bg-ys-img {
    background-image: url(../images/home/bg2.jpeg);
    background-attachment: fixed;
    color: #FFFFFF !important;
}

.bg-ys-img .text-color {
    color: rgb(255 255 255 / 90%);
}

.bg-ys-img .accent-text-color {
    color: rgb(255 255 255);
    font-weight: 500;
}


.img {
    width: 100%;
}


.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.main-bg-img {
    background-image: url(../images/bg.jpeg);
}

.main-intro {
    color: #0a58ca;
    font-size: 20px;
}


.main-intro span {
    color: #fdc715;
}




.main-content {
    color: #ffffff;
    font-size: 20px;
    font-weight: 100;
}

.main-title {
    text-transform: uppercase;
    color: #FFF;
    font-size: 30px;
    padding-bottom: 20px;
}

.form-label {
    color: #e0ad05;
    font-weight: 400;
    margin-top: 10px;
}


.slideshow-container {
    top: 70px;
}

.contactyellowsquareForm .succes, .contact-form .warnig, .contact-form .alert {
    text-align: center;
    /* background: #7f5d3f; */
/*    color: #FFF;
    margin-bottom: 0;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
}

/*.form-messageul {
    margin-bottom: 20px;
    padding-top: 20px;
    background: #0d47a1;
    padding-bottom: 15px;
    color: #FFF;
}

/*===============================================*/
/* 17. RESPONSIVE 						    	 */
/*===============================================*/

/*@media (max-width: 991px) {
.rejoindre-bloc-top {
    text-align: center;
    display: block;
}
}

@media (min-width: 992px) {
    .list-group-item.list-menu-item {
        border: none;
        padding: 0rem 1rem;
    }
    
    .navbar-light .navbar-nav .nav-item {
        padding-right: 0px;
    }

    #introduction {
        padding: 80px 0px 60px;
    }
}





@media (max-width: 767px) {
.navbar-brand img {
    width: 100px;
    position: absolute;
    box-shadow: 0px 0px 12px 10px rgb(0 0 0 / 8%);
    border-radius: 5px;
    top: 0px;
}

#introduction {
    padding: 100px 0px 60px;
    background-image: url(../img/circles.png);
    background-repeat: no-repeat;
    background-size: 450px;
    background-position: left bottom;
}
	
	


.navbar-collapse .nav-item a {
    text-align: center;
}


}