/*
Veuillez noter que le modèle de site fourni n'est pas exclusif au client. Cela signifie que ce modèle peut être utilisé par d'autres clients également, avec la possibilité d'y apporter des variantes ou modifications selon les besoins spécifiques de chaque projet. 
*/
:root {
    --primary-color: #00aaff;
    --secondary-color: #004b8d;
    --text-color: #333;
    --background-color: #f4f4f9;
    --footer-background: #333;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
    position: relative;
    padding-bottom: 60px; /* Ajout d'espace pour le pied de page */
   /*user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none; 
   -ms-user-select: none;*/
}

/* En-tête */
.header {
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    height: 170px;
    overflow: hidden;
    //transition: background 0.3s ease;


    //box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s forwards;
    //transition: box-shadow 0.3s ease, transform 0.3s ease;


    /* spécifique dans les fichiers de langues*/
    margin: 0; /* Pour enlever les marges par défaut du body */
    padding: 0; /* Pour enlever les paddings par défaut du body */
    background-image: url('fr.jpg');
    background-position: left top; /* Positionner l'image à gauche en haut */
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
    background-size: cover; /* Ajuster la taille de l'image pour couvrir */
}

/* Image superposée */
.overlay-image {
    position: absolute; /* Positionner l'image par rapport au conteneur */
   margin-left: -50px;
    width: 40px; /* Définir la largeur de l'image superposée (ajustez la taille selon vos besoins) */
    height: auto; /* Ajuster automatiquement la hauteur en fonction de la largeur */
    z-index: 1; /* Assurer que l'image superposée est au-dessus de l'image d'arrière-plan */
}

.header:hover {
    /* background: linear-gradient(to right, var(--secondary-color), var(--primary-color)); */
}

.header h1 {
    margin: 0;
    font-size: 2.3em;
    position: relative;
    z-index: 2;
    animation: fadeIn 2s ease-out;
    color: black;
    z-index: 3000;
}

.header p {
    margin: 0;
    font-size: 1.41em;
    position: relative;
    z-index: 2;
    animation: fadeIn 3s ease-out;
    color: black;
    z-index: 3000;
}

/* Conteneur principal */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

/* Sections avec animation de défilement */
.section {
    background: #fff;
    padding: 2em;
    margin-bottom: 2em;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s forwards;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.section:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px);
}

.section h2 {
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
    font-size: 1.8em;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.section:hover h2 {
    color: var(--primary-color);
}

.section p {
    font-size: 1.4em; /* Agrandir le texte à 1.4em */
    line-height: 1.6;
}

.section a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.section a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Effets d'animation 3D sur survol */
.image-3d {
    perspective: 1200px;
    margin-bottom: 1.5em;
}

.image-3d img {
    width: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.image-3d:hover img {
    transform: rotateY(10deg);
}

/* Pied de page */
.footer {
    text-align: center;
    padding: 1.5em;
    background: var(--footer-background);
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    /* transition: transform 0.3s ease, opacity 0.3s ease; */
    transition: background-color 0.4s ease, opacity 0.4s ease;
    transform: translateY(0);
    opacity: 0;
    z-index: 1000;
    box-shadow: 
      0 -15px 30px rgba(0, 0, 0, 0.3),          
      inset 0 -15px 15px rgba(97, 236, 255, 0.1);
    border-bottom: 1px solid rgba(97, 236, 255, 0.4);
    margin-top: 1px; 
);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.4s ease;
}

/* Animation de la flèche de retour en haut */
/*.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 30px; /* Largeur réduite */
    height: 30px; /* Hauteur réduite */
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    line-height: 30px; /* Alignement vertical du texte */
    border-radius: 50%;
    font-size: 18px; /* Taille de police réduite */
    font-weight: bold; /* Texte en gras */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(0);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
} */

.back-to-top:hover {
    background: var(--secondary-color);
}

.back-to-top.show {
    transform: scale(1);
    opacity: 1;
}

/* Animation de la flèche */
.back-to-top::before {
    content: '▲'; /* Icône de la flèche, utilisant le caractère Unicode pour une flèche vers le haut */
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Style de base pour le menu */
nav {
    background-color: transparent;          
    padding: 10px 0;
    height: 20px;
    margin: 20px auto;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
    position: relative; /* Positionnement relatif pour la flèche */
}

nav ul li a {
    background-color: #afafaf;
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    border: 1px solid black;
}

nav ul li a:hover {
    background-color: #e0e0e0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
}

nav ul li a.active {
    color: white;    
    padding: 5px 15px;      
    background-color: gray;
    border-top: 1px solid white;
    border-left:  1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

/* Style de la flèche sous le lien actif avec bordure blanche */
nav ul li a.active {
    position: relative; /* Assurez-vous que l'élément parent est positionné */
}

nav ul li a.active::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent; /* Largeur de la flèche */
    border-right: 15px solid transparent; /* Largeur de la flèche */
    border-top: 15px solid transparent; /* Hauteur de la flèche */
    position: absolute;
    bottom: -16px; /* Ajustez la position en conséquence */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; /* Assurez-vous que la flèche est au-dessus de la bordure */
}

/* Ajouter une bordure blanche de 1px autour de la flèche */
nav ul li a.active::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -17px; /* Placez la bordure sous la flèche */
    left: 50%;
    width: 0;
    height: 0;
    border-left: 16px solid transparent; /* Largeur totale incluant la bordure */
    border-right: 16px solid transparent; /* Largeur totale incluant la bordure */
    border-top: 16px solid white; /* Couleur de la bordure */
    transform: translateX(-50%);
    z-index: 0; /* Assurez-vous que la bordure est derrière la flèche */
}


/* Media Queries pour les appareils mobiles */
@media only screen and (max-width: 768px) {
    .container {
        width: 95%;
    }

    .header {
        height: auto;
        padding: 10px 0;
        text-align: center;
    }

    .header h1 {
        font-size: 1.6em;
    }

    .header p {
        font-size: 1em;
    }

    .section {
        padding: 1em;
    }

    .section h2 {
        font-size: 1.4em;
    }

    .section p {
        font-size: 1em;
    }

    .footer {
        padding: 0.5em;
    }

    .back-to-top {
        font-size: 14px;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .image {
        zoom:.6;
    }

    nav {
        zoom:.7;
    }

    footer {
        zoom:.7;
    }

   /* Image superposée */
   .overlay-image {
       zoom: 0.8;
   }

}


@media only screen and (max-width: 480px) {
    .container {
        width: 100%;
    }

    .header h1 {
        font-size: 1.5em;
    }

    .header p {
        font-size: 0.9em;
    }

    .section h2 {
        font-size: 1.2em;
    }

    .section p {
        font-size: 0.9em;
    }

    .image {
        zoom:.5;
    }

    nav {
        zoom:.8;
    }

    footer {
        zoom:.6;
    }
   /* Image superposée */
   .overlay-image {
       zoom: 0.8;
   }

}

@media only screen and (max-width: 420px) {
    .container {
        width: 100%;
    }

    .header h1 {
        font-size: 1.5em;
    }

    .header p {
        font-size: 0.9em;
    }

    .section h2 {
        font-size: 1.2em;
    }

    .section p {
        font-size: 0.9em;
    }

    .image {
        zoom:.5;
    }

    nav {
        zoom:.5;
    }

    footer {
        zoom:.6;
    }
   /* Image superposée */
   .overlay-image {
       zoom: 0.8;
   }

}


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

.container {
   z-index: 0;
}

.container-line {
    position: absolute;
    left: 1px;
    width: 100%;
    height: 100px; /* Hauteur du conteneur */
    overflow: hidden;
    z-index: 100; 
    opacity: 0.5;
}

.line {
    position: absolute;
    height: 1px; /* Épaisseur de la ligne */
    width: 50px; /* Longueur de la ligne */
    //background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 94%, rgba(0, 0, 0, 0) 100%);
    /* Dégradé linéaire pour les extrémités plus pâles */
    //box-shadow: 0 0 0 1px #333; /* Embouts de 1px */
}

}


/* Ajouter ces styles pour la transition */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.5s ease;
}


#iconeBasPage {
    position: fixed;
    bottom: 25px;
    right: 30px;
    z-index: 9999;
    width: 0;
    height: 0;
    /* Triangle pointant vers le haut */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 40px solid #00aaff; /* couleur du triangle */
    border-top: 0 solid transparent;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
    animation: couleurTriangle 3s infinite alternate;
}
#iconeBasPage.visible {
    opacity: 1;
    transform: scale(1.1);
}
#iconeBasPage:hover {
    transform: scale(1.7);
}
@keyframes couleurTriangle {
    from {
        border-bottom-color: #00aaff;
    }
    to {
        border-bottom-color: #0011cc;
    }
}