@font-face {

    font-family: 'Bickley';

    src: url('Bickley.woff') format('woff');

}



/* Utilisation de variables CSS pour la flexibilité */

:root {

    --scroll-text-duration-top: 5s;

    --scroll-text-duration-bottom: 10s;

    --scroll-images-duration: 50s;

    --font-color-top: #26686D;

    --font-color-bottom: #4A4A4A;

    --container-size:870px;

}



/* Réinitialisation des marges et du padding */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Montserrat", sans-serif;

}



html, body {

    margin: 0;

    padding: 0;

}





body {

    font-family: "Roboto", sans-serif;

    font-size: 16px;

    line-height: 1.5;

    color: #000;

    background-color: #FFF6EF;

    display: flex;

    flex-direction: column;

    height:100%;

}



.footer {

    flex-shrink: 0;

  }



.contenu {

    display:flex;

    flex-direction:column;

    position:relative;

    flex: 1 0 auto;

    min-height:900px;

  }



/* Styles pour l'en-tête */

.header {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding-top:20px;

    flex-shrink: 0;

}



.header h1 {

    font-family: 'Bickley';

    font-size: 50px;

    color: #26686D;

}



.header hr {

    margin: 25px 0 5px 0;

    background-color: #26686D;

    width: 376px;

    height: 3px;

}



.header img {

    width: 381px;

}



img {

    max-width: 100%;

    display: block;

}



/* Conteneur des gammes */

.gammes {

    width: 1000px;

    height: 462px;

    margin-inline: auto;

    display: flex;

    justify-content: center;

    gap: 0.75rem;

    overflow: hidden;

    margin-top: 5px;

}



/* Styles pour chaque élément gamme */

.gamme {

    position: relative;

    flex: 0 1 calc(75% / 5 - 0.75rem); /* Répartition des éléments */

    cursor: pointer;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: flex ease-out 1s, transform 1s;

    min-width: 165px;

}



.gamme img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    filter: brightness(80%);

    transition: filter 0.8s ease-out;

    z-index: 1;

}



.gamme:hover img {

    filter: brightness(100%);

}



/* Gradient au survol */

.gamme::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(94, 130, 129, 0) 0%, rgba(69, 112, 111, 0.05) 17%, rgba(47, 96, 95, 0.40) 37%, rgba(38, 90, 89, 0.50) 100%);

    opacity: 0;

    transition: opacity 0.8s ease;

    z-index: 2;

}



.gamme:hover::before {

    opacity: 1;

}



/* Texte de la gamme */

.texte-gamme {

    font-family: "Montserrat", sans-serif;

    font-size: 50px;

    position: absolute;

    color: #fff;

    white-space: nowrap;

    transform: rotate(-90deg) translateY(40%);

    transition: opacity 0.8s ease;

    opacity: 1;

    z-index: 3;

}



.gamme:hover .texte-gamme {

    opacity: 0;

}



/* Overlay avec le contenu */

.overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    transform: translateX(100%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #fff;

    opacity: 0;

    transition: opacity 1s ease-out, transform 1s;

    text-align: center;

    width: 100%;

    height: 100%;

    z-index: 3;

}



.gamme:hover .overlay {

    opacity: 1;

    transform: scale(1);

}



.overlay .produit {

    width: 80%;

    height: auto;

}



.overlay .nom-gamme {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    text-align: center;

}



.overlay .logo-white {

    width: 90%;

    height: auto;

    display: block;

    margin: 0 auto;

}



.overlay .text-below {

    font-family: "Bickley";

    font-size: 40px;

    text-align: right;

    color: #fff;

    padding-right: 10%;

    text-shadow: 0.5px 0.5px 0 #fff, -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff;

    white-space: nowrap;

}





.gamme:hover {

    flex: 1 1 20%;

}





.container {

    width:var(--container-size);

    margin: auto;

    padding:0 0 20px 0;

}

/* Conteneur du texte défilant */



.scroll-section {

    overflow: hidden;

    white-space: nowrap;

    position: relative;

    margin: auto;

}



.scroll-text {

    display: inline-block;

    white-space: nowrap;

    overflow: hidden;

    position: relative;

    height: 60px; 

    line-height: 60px;

}



.scroll-text-content {

    display: flex; 

    align-items: center; /* Centre les éléments verticalement */

    font-size: 20px;

    color: var(--font-color-top);

}



.scroll-text-content span {

    margin-top: 10px;

}



.scroll-text img {

    width: 135px;

    vertical-align: middle;

    margin: 6px 10px 0px 10px;

}



/* Animation du texte défilant */

@keyframes scroll-text {

    0% {

        transform: translateX(0%);

    }

    100% {

        transform: translateX(-50%);

    }

}



/* Section des images défilantes */

.scroll-images-section {

    overflow: hidden;

    position: relative;

    margin: auto; /* Centre horizontalement */

}



.scroll-images {

    display: flex;

    gap: 10px; /* Espace entre les images */

    animation: scroll-images var(--scroll-images-duration) linear infinite; /* Durée d'animation synchronisée */

}



.scroll-image {

    flex: 0 0 auto; 

    width: 114px; 

    height: 114px; 

    border-radius: 10px; 

    overflow: hidden;

}



.scroll-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease; 

}



@keyframes scroll-images {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%); /* Ajuste ici pour faire défiler la moitié des images */

    }

}





/* Arrêt de l'animation au survol */

.scroll-images-section:hover .scroll-images {

    animation-play-state: paused; /* Met l'animation en pause lors du survol */

}



/* Styles pour la deuxième section de texte défilant */

.scroll-text-bottom {

    margin-bottom:10px;

}

.scroll-text-bottom .scroll-text-content-bottom {

    line-height: 2; 

    display: flex; 

    align-items: center; 

    font-size: 20px;

    color: var(--font-color-bottom);

    animation: scroll-text-bottom var(--scroll-text-duration-top) linear infinite; 

}



.scroll-text-bottom span {

    margin: 0;

    color: var(--font-color-top);

}



.scroll-text-bottom .scroll-text {

    height:auto;

}

/* Animation du texte défilant pour la deuxième section */

@keyframes scroll-text-bottom {

    0% {

        transform: translateX(0%);

    }

    100% {

        transform: translateX(-50%);

    }

}



.bouton {

   display: flex;

   justify-content: center; /* Centre le bouton horizontalement */

  }



.gradient-button {

    background-color: black;

    border: none;

    border-radius: 50px;

    padding: 20px 40px;

    color: white;

    font-size: 18px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition: color 0.4s ease, width 0.4s ease;

    min-width: 325px; /* Largeur minimale pour éviter les changements de taille */

    text-align: center;

  }



  .gradient-button .text-container {

    position: relative;

    width: 100%;

    height: 100%;

  }

  

  .gradient-button::before {

    left:180px;

  }

  .gradient-button::before,

  .gradient-button::after {

    content: '';

    position: absolute;

    width: 200%;

    height: 6px;

    background: transparent;

    transition: all 1.10s ease-out;

    transform: translateX(-100%) rotate(45deg);

  }

  



  .gradient-button:hover::before,

  .gradient-button:hover::after {

    background: linear-gradient(180deg, #CCA01D 0%, rgba(204, 160, 29, 0) 100%);

    transform: translateX(0%) rotate(45deg);

  }



  .gradient-button .text-original,

  .gradient-button .text-replacement {

    position: absolute;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: opacity 0.5s ease, transform 0.5s ease;

  }



  .gradient-button .text-replacement {

    font-size:20px;

  }





  .gradient-button .text-replacement {

    opacity: 0;

    transform: translateY(10px);

  }

  

  .gradient-button:hover .text-original {

    opacity: 0;

    transform: translateY(-10px);

  }

  

  .gradient-button:hover .text-replacement {

    opacity: 1;

    transform: translateY(0);

  }



  /* Adaptations pour petits écrans */

  @media (max-width: 1000px) {



    .container {

        width:100%;

        padding:0 10px 10px 10px;

    }

    .header h1 {

        margin-top: 20px;

        font-size: 45px!important;

        line-height: 1;

    }





    .header hr {

        width: 52%;

    }



    .texte-gamme {

        transform: rotate(-90deg);

        font-size: 40px;

    }



    .gammes {

        width: 100%;

        min-height:500px;

        height: 50vh;

        gap: 0.25rem;

        display: flex;

        padding: 0 20px;

        flex-wrap: nowrap;

        overflow: hidden;

        justify-content: center;

    }



    .gamme {

        flex: 1 1 10%;

        min-width: 30px;

        height: 100%;

        transition: flex ease-out 0.80s, transform 0.80s;



    }



    .gamme img {

        height: 100%;

        object-fit: cover;

    }



    .overlay {

        font-size: 16px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;

        height: 100%;

        overflow: hidden;

    }



    .overlay .produit {

        width: auto;

        max-width: 100%;

        height: auto;

        max-height: 80%;

    }



    .overlay .text-below {

        font-size: 40px;

        text-shadow: 0.25px 0.25px 0 #fff, -0.25px -0.25px 0 #fff, 0.25px -0.25px 0 #fff, -0.25px 0.25px 0 #fff;

    }



    .gamme:hover {

        flex: 1 1 75%;

    }

}





/* Section Les philosophies */

.philosophies {

    text-align: center;

    padding: 75px 10px 10px 10px;

}



.philosophies-header {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;

}



.philosophies-header h2 {

    font-family: 'Montserrat', sans-serif;

    font-size: 25px;

    margin: 0;

    font-weight: 400;

}



.header-logo {

    height: 25px;

    margin-top: -8px;

}



.philosophies-content {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 80px;

}



.ellipse-container {

    text-align: center;

    text-decoration: none;

    color: #000;

}



.philosophies .ellipse {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 180px;

    height: 227px;

    border-radius: 50%;

    position: relative;

    background-size: cover;

    background-position: center;

    margin:auto;

    margin-bottom:10px;

}



.philosophies .ellipse:hover {

    box-shadow: inset 0 0 0 10px #ffffff6c; /* Bordure transparente par défaut */

}



.philosophies .ellipse.active {

    box-shadow: inset 0 0 0 10px #00000029; /* Bordure noire au clic */

}



.ellipse-image {

    width: 110px;

    height: 110px;

    position: relative; 

    z-index: 1; /* Au-dessus de la bordure */

}



.ellipse-text {

    font-family: 'Montserrat', sans-serif;

    font-size: 25px;

    margin: 0;

}



/* Spécificités pour chaque ellipse */

.ellipse-1 {

    background-image: url('img/Gamme1.jpg');

}



.ellipse-2 {

    background-image: url('img/Gamme2.jpg');

}



.ellipse-3 {

    background-image: url('img/Gamme3.jpg');

}



.ellipse-4 {

    background-image: url('img/Gamme4.jpg');

}



.ellipse-5 {

    background-image: url('img/Gamme5.jpg');

}





/* FOOTER */



.footer {

    background-color: #26686D;

    color: white;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top:50px;

}



.footer-top,

.footer-bottom {

    display: flex;

    justify-content: space-between;

    width: 100%;

    max-width: 900px; /* Limite de largeur pour les écrans larges */

}



.footer-top {

    align-items: center;

}



.footer-top div,

.footer-bottom a {

    text-align: center;

}



.footer-top > .social-icon {

    flex-basis: 20%;

    display: flex;

    justify-content: center; /* Centrer les logos des réseaux sociaux horizontalement */

}



.footer-top > .logo {

    flex-basis: 60%;

    display: flex;

    justify-content: center; /* Centrer le logo principal */

}



.footer-top .logo img {

    width: 278px; /* Taille spécifique du logo principal */

}



.footer-bottom > a {

    flex-basis: 20%;

    text-align: center;

}



.footer-bottom > a:nth-child(2) {

    flex-basis: 60%;

}



.footer hr {

    margin: 20px 0;

    width: 30%;

    border: none;

    border-top: 2px solid white;

}



.footer a {

    color: white;

    text-decoration: none;

    font-size: 18px;

}



.social-icon img {

    width: 40px;

    height: 40px;

}



/* Masquer les icônes des réseaux sociaux sous le logo par défaut */

.social-icon-wrapper {

    display: none;

}



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

    .footer-top {

        flex-direction: column;

        align-items: center;

    }



    .social-icon-wrapper {

        display: flex; 

        justify-content: center;

        margin-top: 20px;

    }



    .social-icon {

        margin: 0 10px; 

    }





    .social-icon-left,

    .social-icon-right {

        display: none!important;

    }



    .footer-bottom {

        flex-direction: column; 

        align-items: center;

    }



    .footer hr {

        width: 80%;

    }



    .footer a {

        margin-bottom: 10px;

    }

}





.container-texte {

    display: flex;

    flex-direction: column;

    padding: 50px 15px;

    width: 100%; 

    max-width: 1440px;

    margin: auto;

    font-size: 20px;

    gap: 20px;

}



.no-style {

    list-style-type:none;

}



.container-texte h1 {

    font-weight:600;

}



.container-texte h2, .container-texte h3 {

    font-weight:500;

}



@media (min-width: 2000px) {

    body {

        zoom: 1.3;

    }

}



@media (min-width: 3000px) {

    body {

        zoom: 2;

    }

}



@media (min-width: 4000px) {

    body {

        zoom: 3.5;

    }

}