/* Styles de base */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0; /* Fond gris clair pour un look moderne */
    color: #333; /* Couleur de texte sombre */
}

/* Mode sombre */
.dark-theme {
    background-color: #121212;
    color: #f0f0f0;
}

.dark-theme .navbar {
    background-color: #1e1e1e;
}

.dark-theme button {
    background-color: #1e1e1e;
}

.dark-theme .bottom-row a {
    border-color: #f0f0f0;
}

/* Mode sombre : les logos peuvent être modifiés ici */
body.dark-theme #Teckium-Logo {
    content: url('image/Logo_Teckium_Dark.webp');
}

/* Nav-bar principale */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Padding réduit dans la navbar */
    background-color: #333;
    color: white;
    flex-wrap: wrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre douce */
}

/* Icônes des réseaux sociaux */
.social-icon {
    width: 30px;
    height: 30px;
    transition: transform 0.3s, filter 0.3s;
}

.social-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.2); /* Lumière augmentée au survol */
}

/* Logo */
.nav-left img {
    width: 80px;
    border-radius: 5px;
}

/* Boutons d'accès aux pages */
.nav-center {
    display: flex;
    gap: 15px;
}

.nav-center a img {
    height: 70px;
    border-radius: 10px; /* Coins arrondis pour les vignettes */
    transition: transform 0.3s, box-shadow 0.3s;
}

.nav-center a img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre douce au survol */
}

/* Boutons à droite */
.nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Ligne supérieure : Connexion et Thème */
.top-row {
    display: flex;
    gap: 10px;
}

button {
    padding: 8px 15px;
    border: none;
    border-radius: 8px; /* Coins arrondis */
    cursor: pointer;
    background-color: #444;
    color: white;
    font-size: 0.9em;
    transition: background-color 0.3s, transform 0.3s;
}

button:hover {
    background-color: #555;
    transform: scale(1.05); /* Légère augmentation au survol */
}

/* Ligne inférieure : Réseaux sociaux */
.bottom-row {
    display: flex;
    gap: 10px;
}

.bottom-row a {
    filter: invert(1) brightness(100%);
    padding: 8px 12px;
    border-radius: 50%; /* Icônes sociales rondes */
    transition: background-color 0.3s, transform 0.3s;
}

.bottom-row a:hover {
    filter: invert(47%) sepia(80%) saturate(329%) hue-rotate(180deg) brightness(90%) contrast(85%);
    transform: scale(1.1); /* Agrandissement au survol */
}

/* Section vidéo et playlists */
.video-section {
    padding: 30px;
    background-color: #fff; /* Fond blanc pour la section vidéo en mode normal */
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    text-align: center;
    transition: background-color 0.3s, box-shadow 0.3s; /* Ajout d'une transition pour l'effet sombre */
    margin-left: 20px;
    margin-right: 20px;
}

/* Appliquer un style spécifique au mode sombre pour la section vidéo */
body.dark-theme .video-section {
    background-color: #333; /* Fond sombre en mode sombre */
    color: #f0f0f0; /* Texte clair en mode sombre */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Ombre légère mais visible sur fond sombre */
}

/* Vidéo en mode sombre */
body.dark-theme .video-section iframe {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Ombre claire pour la vidéo en mode sombre */
}

/* Thumbnails des playlists */
body.dark-theme .playlist-thumbnail img {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2); /* Ombre claire sur les vignettes en mode sombre */
}

/* Hover sur les vignettes en mode sombre */
body.dark-theme .playlist-thumbnail:hover {
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3); /* Ombre plus marquée au survol en mode sombre */
}


.video-container iframe {
    width: 100%;
    max-width: 700px; /* Limite la largeur sur grand écran */
    height: 400px;
    border-radius: 10px; /* Coins arrondis pour la vidéo */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Ombre douce */
    transition: box-shadow 0.3s;
}

.video-container iframe:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
}

.playlist-thumbnails {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.playlist-thumbnail {
    width: 180px;
    cursor: pointer;
    border-radius: 15px; /* Coins arrondis */
    transition: transform 0.3s, box-shadow 0.3s;
}

.playlist-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Coins arrondis pour les vignettes */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

.playlist-thumbnail p {
    font-weight: bold;
}

.playlist-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
}




















/* Section outils */
.tool-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
    padding: 20px;
}

.tool-item {
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 15px;
    max-width: 800px;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 100%;
}

.tool-item:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.tool-item img {
    width: 100px;
    height: auto;
    border-radius: 10px;
}

.tool-description {
    flex: 1;
}

.tool-description h2 {
    font-size: 1.5em;
    margin: 0;
    color: #333;
}

.tool-description p {
    margin: 10px 0;
    color: #555;
}

.tool-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background-color: #444;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.tool-link:hover {
    background-color: #555;
    transform: scale(1.05);
}

.team-select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: border-color 0.3s;
}

.team-select:focus {
    border-color: #444; /* Couleur d'accentuation au focus */
}

.team-redirect {
    padding: 10px 15px;
    border: none;
    background-color: #444;
    color: white;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    margin-top: 10px;
}

.team-redirect:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}


.content {
    display: flex;
    flex-direction: column; /* Arrange les éléments en colonne */
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    text-align: center; /* Aligne le texte au centre */
    margin: 20px auto; /* Espace autour de la section */
    max-width: 800px; /* Largeur maximale de la section */
    padding: 20px; /* Espace intérieur */
    background-color: #fff; /* Fond blanc */
    border-radius: 15px; /* Coins arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

.content img {
    width: 100%; /* Par défaut, prend toute la largeur disponible */
    max-width: 200px; /* Taille maximale de l'image */
    height: auto; /* Garde les proportions */
    border-radius: 10px; /* Coins arrondis */
    margin-bottom: 20px; /* Espacement avec les autres éléments */
    transition: transform 0.3s; /* Animation au survol */
}

.content img:hover {
    transform: scale(1.05); /* Légère mise en avant au survol */
}

.content h1 {
    font-size: 2em; /* Taille du titre */
    color: #333; /* Couleur du texte */
    margin: 10px 0; /* Espacement au-dessus et en dessous */
}

.content p {
    font-size: 1em; /* Taille du paragraphe */
    color: #555; /* Couleur du texte */
    line-height: 1.6; /* Hauteur de ligne pour meilleure lisibilité */
}

/* Mode sombre pour la section des outils et ses éléments */
body.dark-theme .tool-item {
    background-color: #333; /* Fond sombre pour chaque outil */
    color: #f0f0f0; /* Texte clair pour une meilleure lisibilité */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Ombre claire mais visible sur fond sombre */
}

/* Description des outils en mode sombre */
body.dark-theme .tool-item .tool-description h2 {
    color: #f0f0f0; /* Titre clair en mode sombre */
}

body.dark-theme .tool-item .tool-description p {
    color: #ccc; /* Texte de description plus clair */
}

/* Les liens dans la description des outils */
body.dark-theme .tool-item .tool-link {
    background-color: #444; /* Fond sombre pour les boutons */
    color: #fff; /* Texte blanc pour les liens */
}

body.dark-theme .tool-item .tool-link:hover {
    background-color: #555; /* Fond plus clair au survol */
    transform: scale(1.05);
}

/* Sélecteur de team (dropdown) */
body.dark-theme .team-select {
    background-color: #444; /* Fond sombre pour le menu déroulant */
    color: #fff; /* Texte blanc */
    border: 1px solid #555; /* Bordure plus claire */
}

body.dark-theme .team-select:focus {
    border-color: #777; /* Couleur de bordure au focus */
}

/* Bouton de redirection en mode sombre */
body.dark-theme .team-redirect {
    background-color: #555; /* Fond sombre */
    color: #fff; /* Texte blanc */
}

body.dark-theme .team-redirect:hover {
    background-color: #666; /* Fond plus clair au survol */
}

/* Contenu principal en mode sombre */
body.dark-theme .content {
    background-color: #121212; /* Fond sombre pour la section de contenu */
    color: #f0f0f0; /* Texte clair */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Ombre douce mais visible */
}

body.dark-theme .content img {
    border-radius: 10px; /* Coins arrondis pour les images */
    filter: brightness(0.8); /* Rendre l'image plus sombre pour correspondre au thème */
}

body.dark-theme .content h1 {
    color: #f0f0f0; /* Titre clair */
}

body.dark-theme .content p {
    color: #ccc; /* Paragraphe clair */
}








/* Styles spécifiques pour la liste des quêtes */
.quest-list-container {
    margin: 20px auto;
    max-width: 800px;
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.quest-search {
    display: block; /* Pour que l'input occupe toute la largeur disponible */
    margin: 20px auto; /* Centré horizontalement et espace vertical */
    padding: 10px; /* Ajout d'espace intérieur pour un meilleur rendu */
    width: calc(100% - 10px); /* Réduction de la largeur pour ajouter des espaces équilibrés */
    max-width: 750px; /* Limite la largeur pour les écrans larges */
    border: 1px solid #ddd; /* Bordure pour démarquer visuellement */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Effet d'ombre */
    font-size: 16px; /* Taille de police confortable */
}


.quest-search:focus {
    border-color: #444;
}

.quest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quest-item {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
}

.quest-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.quest-item a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block; /* Étendre le lien à toute la zone de l'élément */
    width: 100%;
    height: 100%;
}

.quest-item a:hover {
    text-decoration: underline;
}

/* Mode sombre */
body.dark-theme .quest-list-container {
    background-color: #121212;
    color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

body.dark-theme .quest-item {
    background-color: #333;
}

body.dark-theme .quest-item a {
    color: #f0f0f0;
}

















/* Responsive */
@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: center;
    }

    .nav-center {
        justify-content: center;
        gap: 10px;
    }

    .playlist-thumbnails {
        justify-content: space-around;
    }

    .playlist-thumbnail {
        width: 120px; /* Vignettes plus petites sur mobile */
    }

    .video-container iframe {
        height: 250px; /* Hauteur plus petite sur mobile */
    }

    .tool-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .tool-item img {
        margin-bottom: 10px;
    }    
}