@font-face {
    font-family: "SmoochSans-Regular";
    src: url("/fonts/otf/SmoochSans-Regular.otf");
}

@font-face {
    font-family: "SmoochSans-Bold";
    src: url("/fonts/otf/SmoochSans-Bold.otf");
}

@font-face {
    font-family: "SmoochSans-Semi-Bold";
    src: url("/fonts/otf/SmoochSans-SemiBold.otf");
}

@font-face {
    font-family: "SmoochSans-ExtraBold";
    src: url("/fonts/otf/SmoochSans-ExtraBold.otf");
}

body {
    font-family: "SmoochSans-Regular", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "SmoochSans-Bold", sans-serif;
}

h2 {
    font-size: 30px;
}

p {
    font-family: "SmoochSans-Regular", sans-serif;
    font-size: 22px;
}

/* Carrousel à défilement infini */
.carousel-infinite {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 1rem 0; /* espace vertical léger */
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: 2rem; /* espace entre les visuels */
    will-change: transform;
    animation: carousel-scroll 40s linear infinite;
}

.carousel-item-infinite {
    flex: 0 0 auto; /* empêcher le redimensionnement */
}

.carousel-item-infinite img {
    display: block;
    border-radius: 12px;
}

/* Pause au survol */
.carousel-infinite:hover .carousel-track {
    animation-play-state: paused;
}

/* Animation continue de gauche à droite */
@keyframes carousel-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
    /* Espace un peu réduit et vitesse plus rapide sur mobile */
    .carousel-track { gap: 1rem; animation-duration: 16s; }
    /* Slides plus petites sur mobile */
    .carousel-item-infinite img { height: 140px; }
}

/* Accessibilité: réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

/* Encore un peu plus rapide sur très petits écrans */
@media (max-width: 480px) {
    .carousel-track { animation-duration: 12s; }
    /* Encore un peu plus petites sur très petits écrans */
    .carousel-item-infinite img { height: 110px; }
}

@font-face {
    font-family: "SmoochSans-Regular";
    src: url("/fonts/otf/SmoochSans-Regular.otf");
}

@font-face {
    font-family: "SmoochSans-Bold";
    src: url("/fonts/otf/SmoochSans-Bold.otf");
}

@font-face {
    font-family: "SmoochSans-Semi-Bold";
    src: url("/fonts/otf/SmoochSans-SemiBold.otf");
}

@font-face {
    font-family: "SmoochSans-ExtraBold";
    src: url("/fonts/otf/SmoochSans-ExtraBold.otf");
}

body {
    font-family: "SmoochSans-Regular", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "SmoochSans-Bold", sans-serif;
}

h2 {
    font-size: 30px;
}

p {
    font-family: "SmoochSans-Regular", sans-serif;
    font-size: 22px;
}

.header-background {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100vh;
    z-index: -1; /* Ensure the image is below other content */
}

header {
    font-family: "SmoochSans-Regular", serif;
}

header div {
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    font-size: 40px;
    top: 70%;
    left: 10%;
}

header img {
    width: 100%;
    height: auto;
}

header a {
    display: flex;
    color: black;
    font-size: 17.48px;
    text-decoration: none;
    min-width: 251px;
    width: 251px;
    background-color: white;
    align-content: center;
    justify-content: center;
    border-radius: 7px;
}

@media screen and (min-width: 768px) {
    header header + #nous-trouver {
        height: 40vh;
    }

    header div {
        top: 60%;
        left: 20%;
        transform: translate(-50%, -50%);
    }
}

@media screen and (min-width: 768px) {
    #nous-trouver {
        height: 50vh;
    }
}

.icone-right {
    position: absolute;
    top: 90%;
    left: 95%;
    transform: translate(-50%, -50%) rotate(15deg);
    max-width: 30%;
}

@media screen and (min-width: 768px) {
    .icone-right {
        left: 100%;
    }
}

ul > li {
    color: black;
    font-size: 23px;
    font-family: "SmoochSans-Bold", sans-serif;
}

.container-slide {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none; /* Pour Firefox */
    margin-top: -50px !important;
    -ms-overflow-style: none; /* Pour Internet Explorer 10+ */
    width: 100%;
}

.container-slide::-webkit-scrollbar {
    display: none;
}

.scrollable-div {
    flex: 0 0 auto;
    width: 70vw;
    min-width: 70vw;
}

.scrollable-div + .scrollable-div {
    margin-left: 6vw;
}

@media screen and (min-width: 768px) {
    .scrollable-div {
        flex: 0 0 auto;
        width: 33vw;
        min-width: 33vw;
    }

    .scrollable-div + .scrollable-div {
        margin-left: -70px;
    }
}

#troisMouss {
    font-size: clamp(80px, 20vw, 420px);
    font-family: "SmoochSans-Bold", sans-serif;
    z-index: -1000;
    position: relative;
    padding: 0;
    color: rgb(236, 0, 0);
    opacity: 0.32;
    margin: -30px 0 0;
}

@media screen and (min-width: 768px) {
    #troisMouss {
        margin-top: -180px;
    }

    .container-slide {
        margin-top: -210px !important;
    }
}

@font-face {
    font-family: "SmoochSans-Regular";
    src: url("/fonts/otf/SmoochSans-Regular.otf");
}

@font-face {
    font-family: "SmoochSans-Bold";
    src: url("/fonts/otf/SmoochSans-Bold.otf");
}

@font-face {
    font-family: "SmoochSans-Semi-Bold";
    src: url("/fonts/otf/SmoochSans-SemiBold.otf");
}

@font-face {
    font-family: "SmoochSans-ExtraBold";
    src: url("/fonts/otf/SmoochSans-ExtraBold.otf");
}

body {
    font-family: "SmoochSans-Regular", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "SmoochSans-Bold", sans-serif;
}

h2 {
    font-size: 30px;
}

p {
    font-family: "SmoochSans-Regular", sans-serif;
    font-size: 22px;
}

#reseau {
    margin-top: 3rem;
    height: 100vh;
    font-family: "SmoochSans-Regular", serif;
}

#reseau .background-image {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    z-index: -1;
}

#reseau div {
    text-transform: uppercase;
    background-color: rgba(49, 51, 5, 0.8);
    border-radius: 20px;
    font-size: 40px;
    top: 30%;
    width: 90%;
}

#reseau a {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: black;
    font-size: 17.48px;
    text-decoration: none;
    background-color: white;
    justify-content: center;
    border-radius: 7px;
    padding: .5rem 1rem;
    width: 100%;
}

@media screen and (min-width: 768px) {
    #reseau {
        height: 50vh;
    }

    #reseau div {
        top: 60%;
        left: 30%;
        transform: translate(-50%, -50%);
        width: 20%;
    }

    #reseau .background-image {
        min-height: 50vh;
    }
}

#service {
    background-image: url("/images/frise-mobile.webp");
    background-size: cover;
    position: relative;
    z-index: -2000;
    margin-top: 10px;
}

#service-home {
    background-image: url("/images/frise-mobile.webp");
    background-size: cover;
    position: relative;
    z-index: -2000;
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    #service {
        background-image: url("/images/frise.webp");
        height: 200px;
    }

    #service-home {
        background-image: url("/images/frise.webp");
        height: 410px;
    }
}

a {
    color: var(--corp);
    text-decoration: none;
}

.bg-darkMouss {
    background-color: rgb(49, 51, 5) !important;
}