/* ✅ Importation des polices */

/*-----------Bacalisties---------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Bacalisties';
    src: url('polices/bacalisties/Bacalisties.ttf') format('truetype'),
        url('polices/bacalisties/bacalisties.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*-----------Montserrat---------*/
@font-face {
    font-family: 'Montserrat';
    src: url('polices/Montserrat/montserrat-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*-----------montserrat-bold---------*/
@font-face {
    font-family: 'Montserrat-bold';
    src: url('polices/Montserrat/montserrat-800.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
html{
    height: 100%;
}

/* ✅ Styles généraux */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
   
}

main.main {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    background-size: cover;
  }
  
img {
    max-width: 100%;
    height: auto; /* Garde les proportions */
    display: block; /* Évite les espaces indésirables sous les images */
}



/* Assurer que les vidéos sont aussi responsives */
video {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 .iindex-page {
    font-family: 'Montserrat';
}

.h1-title {
    font-size: 2.813rem; /* 45px / 16 */
    font-family: 'Montserrat';
    margin-bottom: 15px;
    
}

.h2-title {
    font-size: 2.5rem; /* 40px / 16 */
    margin-bottom: 15px;
}
.h2-40px-bas{
    padding-bottom: 40px;
}

.blanc {
    color: white;
}

.black {
    color: black;
}

.orange {
    color: #db7d11;
}

.bleu {
    color: #0d343d;
}

.padding-50 {
    padding: 50px;
}

section {
    padding-left: clamp(20px, 8vw, 150px); /* Padding flexible : min 20px, idéal 8% viewport width, max 150px */
    padding-right: clamp(20px, 8vw, 150px); /* Idem */
    margin: 0;
    padding-top: clamp(50px, 10vh, 100px); /* Padding haut/bas flexible */
    padding-bottom: 100px;
}

.full-bleed {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100vw;
    box-sizing: border-box; /* S'assurer que le padding ne s'ajoute pas à la largeur */
    overflow-x: hidden; /* Empêche le débordement horizontal accidentel */
}

.full-width {
    width: 100%;
    max-width: 100%;
}

/* ✅ Header Général */
/* ✅ HEADER GLOBAL FIXE ET RÉACTIF */
#header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}


/* ✅ Style appliqué au scroll */


/* ✅ Conteneur interne (si tu l’utilises encore) */
#header-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
}

/* ✅ LOGO */
#logo {
    height: 75px;
    /* max-height: 275.16px; */ /* Enlevé pour taille fixe */
    /* max-width: 350px; */ /* Enlevé pour taille fixe */
    margin-top: 20px;
    margin-left: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Ajout des transitions */
    opacity: 1;
    transform: translateY(0);
    /* Position initiale */
    
}

#logo.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

/* ✅ BOUTON RETOUR ACCUEIL */
.back-homepage {
    background-color: white;
    color: black;
    width: 50px;
    height: 50px;
    font-size: 1.125rem; /* 18px / 16 */
    font-family: montserrat-bold;
    padding: 10px 10px;
    border: none;
    border-radius: 500px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background-color 0.5s ease, color 0.5s ease;
    margin-right: 20px;
}


.icon-chevron {
    width: 24px;
    height: 24px;
    filter: invert(0); /* noir par défaut */
    transition: filter 0.3s ease;
    flex-shrink: 0; /* empêche de rapetisser dans les petits boutons */
}

/* ✅ Style après scroll */
#header-bar.scrolled .back-homepage {
    background-color: black;
    color: white;
}


/* ✅ Mise en page EMI Rêve */

main.emi-rev {
    background: url('images/BACK-Rev.jpg') no-repeat top center;
    background-size: contain;

}
.pad-top-100{
    padding-top: 100px;
}
.pad-botoom-100{
    padding-bottom: 100px;
}


.emi-reve-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    text-align: left;
    padding: 0 clamp(20px, 5vw, 50px); /* Ajout padding pour petits écrans */
    z-index: 2;
    position: relative;

}

.emi-rev-page {
    background: #010101;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem; /* 18px / 16 */
    padding: 0;
    margin: auto;
    width: 100%;
}
.background-black{
    background-color: black;
}


/* body.emi-reve-page .snf-general-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    padding-right: 150px;
    margin-bottom: 0;
  }
   */

.snf-general-container.emi-rev {
    width: 650px;
    max-width: 90%;
    margin-right: clamp(20px, 5vw, 50px); /* Marge droite flexible */
    /* 
    padding-left: 70px; */
    /* border-radius: 20px; */
    /* color: white; */
    margin-left: auto;
    /* margin-right: 0;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */

}




.row {
    display: flex;
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne si besoin */
}

.column-20 {
    flex: 20%;
}

.column-30 {
    flex: 30%;
}

.column-40 {
    flex: 40%;
}

.column-50 {
    width: 50%;
    padding: 0 clamp(15px, 3vw, 50px); /* Padding interne flexible */
    box-sizing: border-box; /* Inclure le padding dans la largeur */
  }
  
  @media screen and (max-width: 1024px) {
    .column-50 {
      width: 100%;
      padding: 0 clamp(15px, 3vw, 20px);
    }
  }

.column-60 {
    flex: 60%;
}

.column-70 {
    flex: 70%;
}

.column-80 {
    flex: 80%;
}

.column-full {
    flex: 100%;
}

.column-center-midle {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centre horizontalement */
    justify-content: center;
    /* centre verticalement si tu veux aussi */
    height: 100%;
    /* adapte si tu veux un centrage vertical */
    text-align: center;
}

.centrer-horizontal {
    justify-content: center
}

.centrer-vertical {
    align-items: center;
}

.centrer-text {
    text-align: center;
}

.image-right {
    text-align: right;
}

.image-left {
    text-align: left;
}

.aligner-bas {
    align-items: end;
}

.aligner-a-gauvhe {
    justify-content: left;
}




/* ✅ Titres et styles EMI Rêve */

.emi-reve-h1 {
    font-family: 'Montserrat';
    font-size: 2.5rem; /* 40px / 16 */
    color: #f0cfa6;

    /* Centrage automatique */

    margin-bottom: 10px;
}

.emi-reve-h1 span {
    font-family: Bacalisties;
    font-size: 3.125rem; /* 50px / 16 */
}

.inci-bar {
    font-family: montserrat;
    color: black;
    font-size: 1.125rem; /* 18px / 16 */
    background-color: white;
    padding: 5px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.subtitle {
    padding-top: 15px;
    font-size: 1.25rem; /* 20px / 16 */
}

/* ✅ Section des Avantages alignée */

.section-feaeture-emi-rev {
    margin: 0;
    padding: 0;
}

.emi-reve-features {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 50px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 250px;
}

.feature img {
    width: 60px;
    height: auto;
    margin-bottom: 5px;
}

.feature h3 {
    font-size: 1rem; /* 16px / 16 */
    color: #db7d11;
    margin-bottom: 0px;
}

.feature p {
    font-size: 0.875rem; /* 14px / 16 */
    line-height: 1.5;
    color: #ffffff;
}

.bold {
    font-weight: bold;
}



/* ✅ Titres et styles EMI Rêve */
/* ✅ Titres et styles EMI Rêve */
.emi-reve-h1 {
    font-family: 'Montserrat';
    font-size: 3.125rem; /* 50px / 16 */
    color: #f0cfa6;
    margin: 0 auto;
    text-align: left;
}

.emi-reve-h1 span {
    font-family: Bacalisties;
    font-size: 3.75rem; /* 60px / 16 */
}





h3 {
    font-size: 1rem; /* 16px / 16 */
    color: #db7d11;
    margin-bottom: 5px;
}

p {
    font-size: 0.875rem; /* 14px / 16 */
    line-height: 1.5;
    color: #ffffff;
}




/* ✅ Section des Avantages alignée */
.emi-reve-features {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    text-align: center;
    margin-top: 20px;
    flex-wrap: wrap; /* Permet aux features de passer à la ligne */
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: clamp(180px, 25%, 250px); /* Largeur flexible pour les features */
    max-width: 250px;
}

.feature img {
    width: 60px;
    height: auto;
    margin-bottom: 5px;
}

.feature h3 {
    font-size: 1.25rem; /* 20px / 16 */
    color: #db7d11;
    margin-bottom: 5px;
}

.feature p {
    font-size: 0.875rem; /* 14px / 16 */
    line-height: 1.5;
    color: #ffffff;
}

.bold {
    font-weight: bold;
}

.emi-reve-title {
    color: #f0cfa6;
    font-family: 'Montserrat', sans-serif; /* Utilisation de la police standard */
    font-size: 1.75rem; /* 28px / 16 */
    margin-top: 10px;
}



/*---------patie basse avec cheveux gauche et droite -----*/

.emi-reve-additional {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* ou center si vous préférez et que le contenu le permet */
    min-height: 1100px; /* Permet à la section de grandir si besoin */
    overflow: hidden;
    z-index: 1;
    margin-top: -80px;
    background: url('images/bg-cheveux-g-djpg.jpg')no-repeat center;
    background-size: 100%;

}

.cards-container {
    display: grid;
    grid-template-columns: repeat(3, 250px);
    /* Sur petits écrans, on pourrait changer ça en 1 ou 2 colonnes via media query */
    gap: 40px;

}


/* L'animation automatique de la première carte */
.auto-rotate .card-inner {
    animation: infiniteFlip 2.5s ease-in-out infinite;
  }
  
  @keyframes infiniteFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
  }
  
  /* Flip manuel par classe JS */
  .card.flipped .card-inner {
    animation: none !important;
    transform: rotateY(180deg);
  }
  
  /* Quand non retournée */
  .card .card-inner {
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
  }
  

.card {
    width: 230px;
    height: 230px;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;

}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: montserrat;
    font-size: 1.125rem; /* 18px / 16 */
    text-transform: uppercase;
    border-radius: 10px;
}

.card-front {
    background: rgba(219, 125, 17, 0.8);
    text-align: center;
}

.card-title {
    margin: auto;
    text-align: center;
    color: white;
}

.card-front img {
    width: 120px;
    height: 120px;
    /* margin-bottom: 20px; */
    margin: auto;
    color: white;
    display: block;

}
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    /* ✅ activation du flex */
    flex-direction: column;
    /* ✅ permet de stacker proprement */
    align-items: center;
    /* ✅ centrer horizontalement */
    justify-content: center;
    /* ✅ centrer verticalement */
    font-family: montserrat;
    font-size: 1.125rem; /* 18px / 16 */
    border-radius: 10px;
    background: #f0cfa6;
    transform: rotateY(180deg);
    text-align: center;
    /* ✅ centrer le texte à l'intérieur */
    padding: 20px;
    /* ✅ un peu d'air autour du texte */
    box-sizing: border-box;
    /* ✅ pour que le padding ne déborde pas */
}
.card-back p {
    color: black;
    font-family: montserrat;
    font-size: 1.125rem; /* 18px / 16 */

}
.description {
    margin-top: 15px;
}

h2.emi-reve-title-cheveux {
    margin-bottom: 150px;
    font-family: montserrat;
    font-size: 1.875rem; /* 30px / 16 */
    text-align: center;
    color: white;

}
.card-back p {
    margin-top: 15px;
}

/*-------------------parti emi lite--------------*/

/* ✅ Mise en page EMI Lite */

main.emi-lite {
    background: url('images/Feuilles.jpg') no-repeat top center;
    background-size: contain;
    

}

.emi-lite-highlight>p {
    font-family: montserrat;
    font-size: 1.125rem; /* 18px / 16 */
    color: #0d343d;
    padding: 10px;
}

/* ✅ Hashtags */
.emi-lite-tags {
    display: flex;
    flex-wrap: wrap;

    /* ✅ Ajoute un espace entre chaque tag */
    margin-top: 40px;
    /* ✅ Espacement entre les tags et le texte du dessus */
}

/* ✅ Image à droite */
.emi-light-right {
    flex: 1;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

p {
    color: white;
}


/* ✅ Mise en page EMI Lite */


.emi-lite-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Utiliser 100% au lieu de 100vw pour éviter les débordements potentiels avec scrollbar */
    min-height: 700px; /* Permet à la section de s'adapter au contenu */
    overflow: hidden;
    position: relative;
}

/* ✅ Section Bénéfices EMI Lite */
.emi-lite-benefits {

    padding: 80px 5%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 0px;
}

.emi-lite-subtitle {
    font-size: 1.875rem; /* 30px / 16 */
    color: black;
    padding-bottom: 50px;
    padding-top: 100px;
    text-align: center;
}

/* ✅ Cartes Flip */
.emi-lite-cards-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    padding-bottom: 0px;
}

/* ✅ Animation automatique uniquement sur la première carte EMI LITE */
.emi-lite-card.auto-rotate .emi-lite-card-inner {
    animation: infiniteFlipLite 2.5s ease-in-out infinite;
  }
  
  /* ✅ Animation keyframes */
  @keyframes infiniteFlipLite {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
  }
  
  /* ✅ Une fois cliquée (flipped), on annule l'animation */
  .emi-lite-card.flipped .emi-lite-card-inner {
    animation: none !important;
    transform: rotateY(180deg);
  }

.emi-lite-card {
    width: 250px;
    height: 380px;
    perspective: 1200px;
    cursor: pointer;
    width: clamp(200px, 80%, 250px); /* Largeur flexible */
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.emi-lite-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.emi-lite-card.flipped .emi-lite-card-inner {
    transform: rotateY(180deg);
}

/* ✅ Faces avant et arrière des cartes (Correction de taille et texte visible) */
.emi-lite-card-front,
.emi-lite-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.emi-lite-card-front {
    display: flex;
    flex-direction: column;
    /* empile verticalement */
    justify-content: flex-end;
    /* pousse le contenu en haut et en bas */
    align-items: center;
    /* centre horizontalement */
    padding: 10px;
    /* évite que le texte touche les bords */
    background-position: center;
    color: white;
    font-family: montserrat-bold;
    font-size: 1rem; /* 16px / 16 */
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
}

.emi-lite-card-title {
    background-color: #fff;
    color: #000000;
    padding: 10px;
    border-radius: 10px;
}

.emi-lite-card-back {
    background: linear-gradient(to bottom, rgba(101, 160, 154, 0.8), rgba(194, 222, 234, 0.8)) no-repeat center center/cover;
    ;
    transform: rotateY(180deg);
    color: white;
    font-family: montserrat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    margin: auto;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 20px;
    /* Ajout de padding pour éviter que le texte colle aux bords */
    box-sizing: border-box;
    /* Assure que padding ne dépasse pas */
}

.emi-lite-card-back p {
    color: black;
    /* Texte en noir */
    font-size: 1.125rem; /* 18px / 16 */
    font-family: montserrat;
    text-align: center;
    max-width: 100%;
    line-height: 1.4;
    margin: 0 auto;
}
.back-end {
    background-image: url('images/feuille-de-fin.jpg');
    background-repeat: no-repeat;
   
    background-size: auto 100%; /* Ajuste la hauteur à 50%, largeur auto */
}
.fin-70-lite {
    flex: 1;
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

}

/* ✅ Reproduction du style inspiré de l'image */
.fin-30-lite {


    text-align: center;
    padding: 50px 20px;
    background: linear-gradient(to bottom, rgba(101, 160, 154, 0.8), rgba(194, 222, 234, 0.8)) no-repeat center center/cover;
    border-radius: 30px;
    max-width: 500px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 50px;
}

.fin-30-lite::before {
    content: "Lite";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%); 
    font-size: 11.25rem; /* 180px / 16 */
    font-family: Bacalisties;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1;
}
.end-lite {
    font-size: 1.75rem; /* 28px / 16 */
    font-weight: bold;
    color: #0d343d;
    letter-spacing: 1px;
    /* background: rgba(255, 255, 255, 0.5); */
    padding: 10px 20px;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

/* ✅ QR Code EMI Lite */
.qr-code-emi-lite {
    width: 120px;
    /* ✅ Ajuste la taille du QR code */
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    margin-top: 20px;
    /* ✅ Espacement entre le texte et le QR code */
    z-index: 800;
    display: inline-block;
    background: url('images/qr-code-emi-lite.png') no-repeat center center/cover;
}

/*--------------PRODUCTS---PAGE-----------------------*/

/* ✅ Styles généraux pour la page brochure */

.main-products{
    background: url('images/AdobeStock_945341175.jpeg') no-repeat center center;
    background-size: cover; /* TRÈS IMPORTANT */
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem; /* 18px / 16 */
}
/* ✅ Styles spécifiques pour la première section */

main .products-main-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Permet de passer en colonne sur petits écrans */
    max-width: 1280px;
    padding: 0px 0px;

    /* ✅ Assure une hauteur fixe pour bien structurer la section */
}

/* ✅ Partie gauche vide */
.products-left {
    flex: 1;
    width: 50%;
    /* ✅ Réserve 50% de l'espace */
}

/* ✅ Contenu texte aligné à droite */
.products-content {
    flex: 1;
    width: clamp(100%, 55%, 55%); /* Prend toute la largeur sur petit écran */
    margin-left: 45%;
    padding: 0px;
    text-align: left;
    /* ✅ Aligne le texte à gauche */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    /* ✅ Ajoute une marge de 40px à droite */
}

/* ✅ Titres et textes */
.products-title {
    font-size: 3.125rem; /* 50px / 16 */
    color: white;
    text-transform: uppercase;
    font-family: montserrat;
    margin-bottom: 10px;
}

.products-title span {
    font-family: montserrat-bold;
    /* ✅ Montserrat-bold */
    color: white;
}



.products-description {
    font-size: 1.125rem; /* 18px / 16 */
    color: #000000;
    margin-top: 20px;
    font-family: montserrat-bold;
    padding: 0px;
    line-height: 1.5;
    margin-left: 0px;
}


.products-list {

    padding: 0;
    margin-top: 20px;
}


.products-list li {
    font-size: 1rem; /* 16px / 16 */
    color: black;
    margin-bottom: 10px;
    font-weight: bold;
}

strong {
    font-family: montserrat-bold;
}


/* ✅ Section du carrousel */
.brochure-carousel-section {
    text-align: left;
    padding: 50px 0px;
    position: relative;
}

.brochure-title {
    font-size: 2.188rem; /* 35px / 16 */
    font-family: montserrat;
    /* ✅ Montserrat-bold */
    color: #000000;
    margin-bottom: 30px;
    margin-left: 100px;

}

/* ✅ Conteneur principal du carrousel */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: auto;
    padding: 0 10px; /* Petit padding pour éviter que ça colle aux bords */
    overflow: hidden;
}

/* ✅ Wrapper pour les images (scroll horizontal) */
.carousel-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    gap: 20px;
    padding: 10px;
    scrollbar-width: none;
    /* ✅ Masquer la scrollbar sur Firefox */
    -ms-overflow-style: none;
    /* ✅ Masquer la scrollbar sur IE/Edge */
}

/* ✅ Masquer la scrollbar sur Chrome/Safari */
.carousel-wrapper::-webkit-scrollbar {
    display: none;
}

/* ✅ Track contenant toutes les images */
.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
}

/* ✅ Styles des images */
.carousel-item {
    flex: 0 0 auto;
    width: clamp(80%, 100%, 100%); /* Ajuster si besoin pour voir plusieurs items */
    /* ✅ Largeur de chaque page */
    height: auto;
    scroll-snap-align: start;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.fin-prod {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Utiliser 100% */
    flex-wrap: wrap;
    min-height: 600px; /* Permet à la section de s'adapter */
    overflow: hidden;
    position: relative;
    margin-top: 50px;

}

.prod-50g {
    width: clamp(100%, 50%, 50%); /* Prend toute la largeur sur petit écran */
    margin-right: 30px;

}

.prod-50d {
    width: clamp(100%, 50%, 50%); /* Prend toute la largeur sur petit écran */
    text-align: center; /* Centrer l'image quand elle est seule */

}

.prod-50g h2 {
    color: black;
    font-family: montserrat;
    font-size: 2.188rem; /* 35px / 16 */
    margin-left: 20px;
    padding: 30px;
    padding-left: 30%;
    text-align: left;

}

.prod-50g span {
    font-family: montserrat-bold;
    font-size: 2.5rem; /* 40px / 16 */
    color: white;
}




/* ✅ Boutons de navigation */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.5rem; /* 24px / 16 */
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s ease;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.left {
    left: 10px;
}

.right {
    right: 10px;
}




/* ✅ Bouton Retour en Haut */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: white;
    color: black; /* ✔️ noir = flèche noire */
    border: none;
    border-radius: 50%;
    display: none; /* caché par défaut */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.scroll-to-top .scroll-icon {
    width: 24px;
    height: 24px;
    filter: invert(0); /* noir */
    transition: filter 0.3s ease;
}
.scroll-to-top.show {
    display: flex;
}

.scroll-to-top:hover {
    background-color: black;
    color: white; /* ✔️ la flèche devient blanche grâce à stroke: currentColor */
}

.scroll-to-top .chevron-up {
    stroke: currentColor;
}



/* ✅ Nouveau CSS pour SNF General */

main.general {
    background: url('images/back-general-3.jpg') no-repeat top center;
    background-size: contain;

}

.snf-general-page {
    background: transparent;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem; /* 18px / 16 */
    padding: 0;
    margin: auto;
    width: 100%;
}

/* ✅ Section Hero avec image couvrant Hero + Overview */
.hero {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    display: flex;
    /* flex-wrap: wrap; */ /* Déjà présent */
    flex-wrap: wrap;
    padding: 100px 0;
    align-items: center;
  }

.bacalisties {
    font-family: bacalisties;
}

h2 {
    font-size: 2.5rem; /* 40px / 16 */
    color: #161515;
}

p {
    color: black;
    font-family: montserrat;
}

.snf-general-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.snf-general-text {
    max-width: 400px;

}

.snf-general-title {
    font-size: 3.125rem; /* 50px / 16 */
    color: #f0cfa6;
}


.emi-reve-page .snf-general-title {
    color: #fff;
}

.emi-lite-page .snf-general-title {
    color: #fff;
}

.snf-general-subtitle {
    font-size: 1.25rem; /* 20px / 16 */
    color: #161515;
    margin-top: 130px;

}

/* ✅ Correction pour centrer les sections */
.snf-general-layout {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permet de passer en colonne */
    justify-content: space-between;
    /* padding: 50px; */
    max-width: 1280px;
    margin: 0 auto;
}



.snf-general-content,
.snf-general-image {
    max-width: 400px;
    width: clamp(100%, 45%, 400px); /* Prend toute la largeur sur petit écran */
    /* margin: auto; */
    padding: 0px;
    text-align: left;
    @media screen and (max-width: 768px) { /* Point de rupture pour tablette/mobile */
        text-align: center; /* Centrer le texte et l'image */
    }
}

p {
    font-size: 1.125rem; /* 18px / 16 */
}

/* ✅ Ajout des couleurs pour chaque section après Overview */
.snf-sustainability {
    background: #e6c69d;
}

.snf-general-cosmetics {
    background: #ead6bd;

}

.snf-general-global {
    background: #EDE5DA;

}

.snf-general-innovation {
    background: #FFFFFF;

}

.snf-general-innovation p {
    color: black;
}

.btn-call {
    background-color: white;
    border-style: none;
    text-decoration: none;
    font-family: montserrat;
    font-size: 1.375rem; /* 22px / 16 */
    color: black;
    padding: 10px 40px;
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
}

.btn-call-white {
    background-color: white;
    text-decoration: none;
    font-family: montserrat;
    font-size: 1.375rem; /* 22px / 16 */
    color: black;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
}


.color-beige {
    background-color: #eee2d2;

}

.color-brown {
    background-color: #b7917e;
}

.lets-go {
    background-color: #e3cfb4;
}









/* ✅ ENCAPSULÉ : rien ne dépasse */
/* ========================================
   SECTION VIDÉOS — STYLISÉE & ENCAPSULÉE
   ======================================== */
   .body-videos{
    background: url('images/img-switch1.png')no-repeat top center ;
    background-size: 100%;
   

   }
.body-videos h2{
   padding: 10px;
 
}
.body-videos h1{
    font-family: montserrat;
    font-size: 3.125rem; /* 50px / 16 */
}

* {
    box-sizing: border-box; 
}



h2 span {
    font-family: bacalisties;
    font-size: 2.813rem; /* 45px / 16 */
}








/* ✅ Bloc vidéo */
.vs-video-wrapper {
    flex: 1;
    max-width: 600px;
}

.vs-video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
}



.qr-section {
    min-height: 300px; /* Ou height: auto; si le contenu doit dicter entièrement la hauteur */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* Tu peux le modifier ou retirer */
    position: relative;
    z-index: 1;
}

#QR\ Code {
    transform: scale(1.3);
}
.qr-image {
    width: 100%;
    max-width: 450px;
    height: auto;
    display: block;
    margin: 0 auto; /* ou `margin-left: auto` selon centrage souhaité */
}




.back-homepage {
    position: relative;
    z-index: 9999;
    color: black;
    background: white;
}

.text-block-padding {
    padding-left: 150px;
    padding-right: 150px;
  }
  
  @media screen and (max-width: 1024px) {
    .text-block-padding {
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  
  @media screen and (max-width: 600px) {
    .text-block-padding {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

/*---------------------HVA ADDITIONAL CSS -------------------------------*/
    .scroll-bar {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      padding: 0 5px;
    }

    .scroll-bar > .line {
      width: 33.3%;
      height: 2px;
      float: left;
      position: relative;
      top: 50%;
    }

    .scroll-bar > .line:before {
      content: "";
      width: 100%;
      position: absolute;
      height: 2px;
      background: #f4ddb6;
      top: 0;
      right: 0;
      transform-origin: top right;
      transform: scale(0, 1);
      transition: all 0.4s ease-out;
    }

    .scroll-bar > .line:after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      background: #f4ddb6;
      top: -2px;
      border-radius: 100%;
      background-clip: padding-box;
      right: 0;
      transform: scale(0);
      transition: all 0.4s cubic-bezier(.895, .03, .685, .22);
    }

    .scroll-bar > .line.left:before {
      transform-origin: top right;
    }

    .scroll-bar > .line.right:before {
      left: 0;
      right: auto;
      transform-origin: top left;
    }

    .scroll-bar > .line.right:after {
      left: 0;
      right: auto;
    }

    .scroll-bar > .mouse {
      width: 33.3%;
      height: 100%;
      color:#f4ddb6;
      background: url(images/title-scroll.svg) center top no-repeat;
      float: left;
      opacity: 0;
      transition: all 0.4s ease;
    }

    /* Animation steps */
    .first-step.line:after {
      transform: scale(2);
    }

    .second-step.line:after {
      transform: scale(1);
    }

    .second-step.line:before {
      transform: scale(1, 1);
    }

    .first-step.mouse {
      opacity: 1;
    }
    section.empty{
        padding-top: 0;
        padding-bottom: 0;
        margin-top: -240px;
    }

    .scroll-bar.black > .line:before,  .scroll-bar.black > .line:after {
        background-color: black;
    }
     .scroll-bar.black > .mouse{
        background: url(images/title-scroll-black.svg) center top no-repeat;
    }
/*--------------------- END HVA ADDITIONAL CSS -------------------------------*/



@media screen and (max-width: 1024px) {
    section {
        padding-left: 50px;
        padding-right: 50px;
    }

    .row {
        flex-direction: column;
        align-items: center;
        gap: 30px; /* Ajouter de l'espace entre les colonnes empilées */
    }

    .column-50,
    .column-60,
    .column-70,
    .column-80,
    .column-40,
    .column-30,
    .column-20 {
        width: 100%;
        max-width: 100%;
        flex: 100%;
        padding: 0 clamp(15px, 3vw, 15px); /* Ajustement padding */
    }
    
    /* Correction: Déplacer les règles de media query ici */
    .products-content {
        width: 100%;
        margin-left: 0;
        align-items: center; /* Centrer le contenu sur mobile/tablette */
        text-align: center;
    }
    .prod-50g {
         margin-right: 0;
        margin-bottom: 30px; /* Espace quand ça passe en colonne */
    }

    .carousel-item {
        width: 80vw;
    }

    .brochure-title {
        text-align: center;
        margin-left: 0;
    }

    .qr-image {
        max-width: 200px;
        height: auto;
    }

    .prod-50g h2 {
        padding-left: 0;
        text-align: center;
    }

    .emi-lite-cards-container,
    .emi-reve-features {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .emi-lite-card,
    .feature {
        width: 90%;
        max-width: 300px;
    }
}



@media screen and (max-width: 600px) {
    .h1-title {
        font-size: 1.75rem; /* 28px / 16 */
        text-align: center;
    }

    .h2-title,
    .emi-reve-title {
        font-size: 1.5rem; /* 24px / 16 */
        text-align: center;
    }

    section {
        padding-left: clamp(15px, 5vw, 20px); /* Réduire padding sur très petits écrans */
        padding-right: clamp(15px, 5vw, 20px);
    }

    .inci-bar,
    .products-description,
    .products-list li {
        font-size: 1rem; /* 16px / 16 */
        text-align: center;
    }


    .back-homepage {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .btn-call {
        font-size: 1.125rem; /* 18px / 16 */
        padding: 8px 24px;
    }

    .emi-lite-card,
    .card {
        width: 90%;
        height: auto;
    }

    .carousel-item {
        width: 90vw;
    }

    .carousel-wrapper {
        gap: 10px;
    }
}

/* ✅ Styles pour les grands écrans (ex: 1440px et plus) */
@media screen and (min-width: 1440px) {
    /* Augmentation générale de la taille de base pour les paragraphes sur très grands écrans */
    p {
        font-size: 1.25rem; /* Était 1.125rem */
    } 

    /* Augmentation des titres principaux */
    .h1-title, .products-title, .snf-general-title, .body-videos h1 {
        font-size: 3.5rem; /* Était ~3.125rem */
    }
    .h1-title {
        font-size: 3.2rem; /* Était 2.813rem */
    }

    /* Augmentation des titres secondaires */
    .h2-title, h2, .prod-50g span {
        font-size: 2.8rem; /* Était ~2.5rem */
    }
    .emi-reve-h1 {
        font-size: 3.5rem; /* Était 3.125rem */
    }
     .emi-reve-h1 span {
        font-size: 4.2rem; /* Était 3.75rem */
    }

}