body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* État initial */
        .intro {
            background-color: #0d6526;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .intro img {
            transition: transform 0.3s ease;
            width: 50%;
            max-width: 400px;
            cursor: pointer;
        }

        .intro img:hover {
            transform: scale(1.25);
        }

        .hidden {
            display: none;
        }

        /* TODO : Mettre dans une autre feuille de style */
        /* Site classique */
        .site {
        display: none;   /* invisible au départ */
        }

        .site.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 1;              /* devient visible */
        background-color: #40ab6e; /* ancienne couleur #40ab6e; */
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        }


        header {
            background-color: #0d6526;
            padding: 1rem;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        header nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
        }

        main {
            padding: 2rem;
            text-align: center;
            opacity: 0;
            transition: opacity 10s ease;
        }

        main img {
            width: 50%;
            max-width: 800px;
        }

        .images {
            padding: 30px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            opacity: 0;
            max-width: 100%;
            transition: opacity 1s ease 1s;
        }

        .images img {
            height:120px;
            max-width: auto;
            background-color: #ffffff;
        }

        .images img:hover {
            transform: scale(1.05);
        }

        footer.mentions-legales {
            margin-top: auto;        /* <-- pousse le footer en bas de la colonne flex */
            text-align: center;          /* centré */
            padding: 15px 10px;          /* un peu d’espace */
            font-size: 0.9em;            /* plus petit que le corps du texte */
            color: #555;                 /* gris */
        }

        footer.mentions-legales a {
            color: #555;              /* couleur du lien  ancienne couleur : #0073e6*/
            text-decoration: none;
        }

        footer.mentions-legales a:hover {
            text-decoration: underline;
        }

        .mentions_legales {
            background-color: #40ab6e; /* ancienne couleur #40ab6e; */
            color: #333;
            width: 100vw;      /* prend toute la largeur de la fenêtre */
            height: 100vh;     /* prend toute la hauteur de la fenêtre */
            margin: 0;         /* évite les marges par défaut */
            padding: 20px;     /* un peu d’espace intérieur */
            box-sizing: border-box; /* padding inclus dans les 100% */
        }

        .mentions_legales a {
            color: #333;              /* couleur du lien  ancienne couleur : #0073e6*/
            text-decoration: none;
        }

        .mentions_legales a:hover {
            text-decoration: underline;
        }