body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        scroll-behavior: smooth;
        background-color: white;
        font-family: 'Times New Roman', Times, serif, Arial, sans-serif; /* Ajout de polices alternatives */
    }
    .fixed-header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        text-align: center;
        z-index: 2000;  /* Assurez-vous que ce z-index est supérieur à celui de tout autre contenu de page */
        border-bottom: 1px solid #ccc;
        height: 192px;
    }
    .fixed-header img {
        height: 150px;
    }
    .menu {
        padding: 10px 0;
        z-index: 2001;  /* Plus élevé pour s'assurer qu'il reste au-dessus des autres éléments */
        position: relative; /* position relative/absolute/fixed est nécessaire pour que z-index soit effectif */

    }
    .menu a {
        margin: 0 15px;
        text-decoration: none;
        color: black;
        font-size: 19px; /* Augmentation de la taille et mise en gras */
        font-weight: bold;
    }
    .menu a:hover {
        text-decoration: underline; /* Effet souligné au survol */
    }
    section {
        min-height: 100vh;
        padding: 60px 0 30px;
        box-sizing: border-box;
        background-attachment: fixed;
        background-size: cover;
        background-position: top;
        padding-top: 190px;
        position: relative; /* Important pour z-index */
        z-index: 100; /* Assurez-vous qu'il est inférieur à celui du menu et du header */
    }

    .text {
        width: 60%;
        margin: 20px auto;
        text-align: justify;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        padding: 35px;
        font-size: 19px;
        position: relative;
    }
    .text p::first-letter {
        font-size: 60px; /* Taille plus grande pour la première lettre */
        float: left; /* Aligner avec la ligne */
        line-height: 0.6; /* Ajustement de la hauteur de ligne pour aligner correctement avec le reste du texte */
        margin-right: 4px; /* Espace après la grande lettre */
    }

    .info-table {
        width: calc(100% - 100px);
        margin: 20px 50px;
        border-collapse: separate;
    }

    .info-table th, .info-table td {
        padding: 10px;
        border: 1px solid #ccc;
    }

    .info-table th {
        font-weight: bold;
        text-align: center;
        background-color: rgba(240, 240, 240, 0.5);
        font-size: 17px;
    }

    .info-table td {
        text-align: left;
    }

    .info-table td a{
        color:black;
    }

    .info-table td a:visited{
        color:black;
    }

    .info-table th, .info-table td:not(:nth-child(2)) {
        width: calc(50% - 20px); /* Calcul pour prendre en compte la largeur de la colonne du milieu et les espacements */
    }

    .info-table td:nth-child(2) {
        width: 40px;
        border: none;
    }

    .info-table img {
        width: auto; /* Largeur automatique pour conserver le ratio de l'image */
        height: 250px; /* Hauteur fixée à 250px */
        display: block;
        margin: 0 auto; /* Centrage de l'image */
    }



    footer {
        background-color: black;
        color: white;
        text-align: center;
        padding: 10px 50px;
        display: flex; /* Utilise Flexbox pour gérer la disposition des colonnes */
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
        justify-content: space-between; /* Répartit l'espace uniformément entre les colonnes */
    }

    footer .footer-column {
        flex: 1 1 20%; /* Chaque colonne peut grandir mais ne prendra pas plus de 20% de l'espace */
        margin: 10px; /* Espacement entre les colonnes */
        padding:3px 0px 10px 20px;
    }

    footer p {
        width: 100%; /* Force le paragraphe à prendre toute la largeur */
        text-align: center; /* Centre le texte du paragraphe */
        margin-top: 30px; /* Ajoute un peu d'espace au-dessus du paragraphe */
        order: 1; /* Assure que le paragraphe est toujours en dessous des colonnes */
    }

    footer .footer-column h4 {
        text-align: center;
        font-weight: bold;
        margin: 0 0 10px; /* Espacement entre le titre et les liens */
    }

    footer a, footer span {
        color: white;
        text-decoration: none;
        display: block; /* Assure que chaque lien est sur une nouvelle ligne */
        text-align: left; /* Alignement des liens à gauche */
        padding-left: 10px; /* Un léger décalage à gauche pour les liens */
        cursor: pointer;
    }
    footer a:hover, footer span:hover{
        text-decoration: underline;
    }

    .popup-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 3000; /* Plus élevé que le header pour couvrir toute la page */
        display: none;
    }

    .popup {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 1000px;
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 3001; /* Assurez-vous qu'il est le plus élevé pour apparaître au-dessus de tout */
        display: none;
    }


    .popup.visible {
        display: block;
    }

    .popup.hidden {
        display: none;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        cursor: pointer;
        color: grey;
    }

    .close-btn:hover {
        color: white;
    }

    @media (max-width: 768px) {
        section {
            background-attachment: scroll; /* Change l'attachement pour qu'il défile avec la page, évitant ainsi les problèmes de parallaxe sur mobile */
            background-size: auto 100%; /* Ajuste la taille de l'image pour mieux couvrir la section verticalement */
            background-position: center center; /* Centre l'image horizontalement et l'aligne en haut */
        }

        .fixed-header img {
            height: 100px; /* Réduit la taille du logo pour les appareils mobiles */
            margin-right:20%;
        }

        .fixed-header {
            height: 140px; /* Ajuste la hauteur du header pour les appareils mobiles */
        }

        .menu a {
            font-size: 16px; /* Réduit la taille de la police dans le menu pour les appareils mobiles */
        }

        .text {
            width: 80%; /* Augmente la largeur du texte pour une meilleure lisibilité sur mobile */
        }

        section {
            padding-top: 150px; /* Ajuste l'espacement en haut pour compenser le header plus petit */
        }
        .info-table {
            width: calc(100% - 20px);
            margin: 20px 10px;
        }
        .footer {
            padding: 10px 5px;
        }
    }

    /* Ajout pour positionner les icônes de langue en haut à droite */
    .language-switch {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 3000;
    }
    .language-switch img {
        width: 30px;
        margin-left: 10px;
        cursor: pointer;
    }
    .language-switch img.selected {
        outline: 2px solid black; /* L'épaisseur et la couleur de l'outline */
        outline-offset: 1px; /* Décalage de l'outline par rapport à l'image */
        border-radius: 100%;
    }

        /* Style de la bannière */
    #cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right:0;
        background-color: white;
        color: black;
        padding: 20px;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
    }

    #cookie-banner p {
        margin: 0;
        font-size: 16px;
        flex-grow: 1;
        padding-right: 20px;
    }

    .cookie-button {
        background-color: black;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 14px;
        margin-left: 10px;
        border-radius: 5px;
    }

    .cookie-button:hover {
        opacity: 0.8;
    }