/* Style global */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fde8f0; /* Rose clair pour le fond général */
    color: #333;
    overflow-x: hidden;
    max-width: 100vw;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

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

img, iframe {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100vw;
    overflow-x: hidden;
}

/* Logo et slogan */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    position: relative;
    height: 150px;
    z-index: 10;
}

#logo {
    width: 200px;
    transition: transform 2s ease-in-out;
    animation: pulse 5s infinite;
}

.slogan {
    position: absolute;
    top: 20px;
    left: -500px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    color: #ff004f;
    transform: rotate(-15deg);
    animation: slideInOut 10s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideInOut {
    0% {
        left: -500px;
    }
    40% {
        left: calc(30% - 200px);
    }
    60% {
        left: calc(30% - 200px);
    }
    100% {
        left: -500px;
    }
}

/* Menu déroulant */
.menu-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 999;
}

nav {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 200px;
    background-color: #ff004f;
    display: none;
    z-index: 999;
    padding: 10px;
}

nav.visible {
    display: block;
    animation: slideDown 0.5s ease-in-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    padding: 10px;
    text-align: center;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    display: block;
    transition: background-color 0.3s ease-in-out;
}

nav ul li a:hover {
    background-color: #ff6f61;
}

/* Section titre avec photo de fond */
.header-text {
    position: relative;
    height: 450px;
    background-image: url('animation-culinaire-foodtruck-chahaignes-72340.webp'); /* Remplacer par l'image de fond */
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100vw;
}

.header-content {
    background-color: rgba(0, 0, 0, 0.5); /* Encadré gris */
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    width: 100%;
}

.header-content h1 {
    font-size: 3rem;
    animation: colorChange 5s infinite;
}

.header-content p {
    font-size: 1.5rem;
    margin: 10px 0;
}

@keyframes colorChange {
    0% { color: #007bb5; }
    50% { color: #f48fb1; }
    100% { color: #007bb5; }
}

/* Encadré avec les informations de contact */
.contact-info {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 15px;
    margin-top: 20px;
    border-radius: 8px;
}

.contact-info h2, .contact-info p {
    color: #333;
    margin: 5px 0;
}

/* Section photos des clients */
.photos-section {
    padding: 40px;
    background-color: #f0f0f0;
}

.photo-title {
    text-align: center;
    font-size: 2rem;
    color: #007bb5;
    margin-bottom: 20px;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Grille responsive */
    gap: 20px;
    justify-items: center;
    max-width: 100vw;
}

.client-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.client-photo:hover {
    transform: scale(1.05);
}

/* Section chat Crisp */
.chat-section {
    padding: 50px;
    text-align: center;
    background-color: #f0f0f0;
    max-width: 100vw;
}

.chat-section h2 {
    font-size: 2.5rem;
    color: #007bb5;
    margin-bottom: 20px;
}

/* Section Facebook */
.facebook-section {
    padding: 50px;
    background-color: #ff004f; /* Rose clair */
    color: white;
    text-align: center;
    max-width: 100vw;
}

.facebook-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.mobile-facebook-link {
    display: none;
    text-align: center;
    margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2rem;
    }

    .contact-section {
        padding: 20px;
    }

    .facebook-section {
        padding: 20px;
    }

    .facebook-title {
        font-size: 2rem;
    }

    .fb-page {
        display: none;
    }

    .mobile-facebook-link {
        display: block;
    }

    .slogan {
        display: none;
    }
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
}

/* Lien vers la page Facebook */
.mobile-facebook-link a {
    display: inline-block;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    background-color: #007bb5; /* Bleu pour la version mobile */
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

.mobile-facebook-link a:hover {
    background-color: #ff6f61;
    color: white;
    transform: scale(1.05);
}
/* Désactive la détection automatique des numéros de téléphone sur mobile */
html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
}
/* Taille de l'e-mail ajustée pour entrer dans l'encadré */
.contact-info p strong {
    font-size: 1rem; /* Ajustez cette valeur selon la taille souhaitée */
    white-space: nowrap; /* Empêche les sauts de ligne */
}

/* Empêche le lien Siret d'être cliquable */
.contact-info p.siret a {
    pointer-events: none;  /* Désactive l'interaction avec le lien */
    cursor: default;       /* Change le curseur pour indiquer que ce n'est pas cliquable */
    text-decoration: none; /* Supprime le soulignement du lien */
    color: inherit;        /* Utilise la couleur par défaut du texte */
}


/* Ajustement général pour s'assurer que le texte du Siret ne devienne pas un lien */
.contact-info p.siret {
    white-space: nowrap; /* Garde le Siret sur une ligne */
    color: inherit; /* Applique la couleur du texte par défaut */
    pointer-events: none; /* Empêche toute interaction avec le lien */
    text-decoration: none; /* Retire le soulignement des liens */
}
/* Affichage pour les petits écrans (mobile) : les images s'affichent les unes en dessous des autres */
@media (max-width: 768px) {
    .photos-grid {
        display: grid;
        grid-template-columns: 1fr; /* Une seule colonne, donc les images s'affichent une par une */
        gap: 20px;
    }
}

/* Affichage pour tablette en format portrait : trois images sur une ligne, la quatrième cachée */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .photos-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes, donc trois images sur une ligne */
        gap: 20px;
    }

    .photos-grid img:nth-child(4) {
        display: none; /* Cache la quatrième image */
    }
}

/* Affichage pour les grands écrans : quatre images sur une ligne */
@media (min-width: 1025px) {
    .photos-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Quatre colonnes, donc les quatre images sur une seule ligne */
        gap: 20px;
    }
}