/* 
    ⓒ 2025 - Design et styles créés par Van Massenhove Jérémy
    Ne pas copier sans autorisation.
*/

/* Styles globaux */
body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #fff;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Positionnement du bouton en haut à droite */
#theme-toggle {
    position: absolute;
    top: 20px;  /* Décale légèrement du haut */
    left: 80%;
    transform: translate(-50%, -50%); /* Centrer le bouton par rapport à son point d'ancrage */
    width: 50px;  /* Définir une largeur pour le bouton */
    height: 50px;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: none;
    visibility: visible;  /* Assurer que le bouton soit visible */
    z-index: 10;  /* Le bouton reste cliquable au-dessus des autres éléments */
}

/* Icônes de soleil et lune */
.sun-icon,
.moon-icon {
    font-size: 24px; /* Ajuste la taille des icônes */
    width: 24px; /* Largeur des icônes */
    height: 24px; /* Hauteur des icônes */
    transition: opacity 0.3s ease;
    position: absolute;
    visibility: visible; /* Les icônes restent visibles */
}

/* Positionner les icônes au centre du bouton */
.sun-icon, .moon-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Centrer les icônes */
}

/* Icône de soleil par défaut, cachée en mode sombre */
.sun-icon {
    opacity: 1;
}

/* Icône de lune par défaut, cachée en mode clair */
.moon-icon {
    opacity: 0;
}

/* Mode sombre : changement des icônes */
body.dark-mode .sun-icon {
    opacity: 0; /* Cacher l'icône du soleil en mode sombre */
    color: white;
}

body.dark-mode .moon-icon {
    opacity: 1; /* Afficher l'icône de la lune en mode sombre */
}

body {
    transition: background-color 0.5s ease, color 0.5s ease; /* Transition sur le fond et la couleur du texte */
}
/* Mode clair */
body {
    background-color: rgb(183, 183, 183);
    color: black;
}

/* Mode sombre */
body.dark-mode {
    background-color: rgb(36, 33, 33);
    color: white;
}

/* logo */
.logos {

    display: flex;
    justify-content: center; /* Centrer les logos */
    align-items: center; /* Aligner les logos verticalement */
}

.logocarpe1 {
    width: 600px;
}

.dark-mode .logocarpe1 {
    filter: invert(100%);
}

h1 {
    font-size: clamp(2rem, 5vw, 6em);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px; /* Marge sous le titre pour espacer des onglets */
    margin-top: 20px; /* Aucune marge au-dessus */
    color: #5a6b7a;
    text-align: center;
}
h2, h3 {
    color: #5a6b7a;
    padding: 20px;
}

p {
    font-size: 1.2em;
    line-height: 1.5;
    margin: 10px 0; /* Marge autour des paragraphes */
    padding: 0 20px; /* Espacement interne pour le texte */
}

.site-footer {
    background-color: #333; /* Gris foncé */
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  
  .site-footer a {
    color: #4CAF50; /* Vert pour les liens */
    text-decoration: none;
  }
  
  .site-footer a:hover {
    text-decoration: underline;
  }

@media screen and (max-width: 600px) {
    header {
        align-items: center;
        text-align: center;
        padding: 10px;
    }

    body {
        box-sizing: border-box; /* Réduire la taille de la police sur mobile */
    }
    #titresite {
        padding: 5px 10px; /* Ajuster le padding */
        justify-content: center;
        width: 100%;
    }

    .logocarpe1, .logocarpe2 {
        width: 80%; /* Réduire un peu plus les logos sur mobile */
    }

    h1 {
        font-size: 1.6rem;
        box-sizing: border-box;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    p {
        font-size: 0.9rem;
    }

    .site-footer {
        padding: 5px 5px;
        font-size: 0.85rem;
        width: 100%;
        box-sizing: border-box; /* Pour que padding et marges ne dépassent pas la largeur */
        margin: 0; /* Assure-toi qu'il n'y a pas de marge qui pourrait créer un espace */
    }
    
    .site-footer p, .site-footer a {
        margin: 0;
        padding: 0;
    }
}