body {
    background-color: #1e1e1e;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;	/* Ajoute une marge de 20 px tout autour de ma page Web */
}

strong {
    font-weight: 700;
    font-size: 1.1em;
}

#logo-site {
    width: 50px;          /* Ajuste la taille du logo */
    height: auto;          /* Garde les proportions de l'image */
    border-radius: 100%;       /* Coins arrondis */
    border: 2px solid #4CAF50;   /* Bordure verte assortie à ton style */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);  /* Ombre douce */
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;  /* Transition pour un effet de survol */
}

#logo-site:hover {
    transform: scale(1.05);    /* Agrandit légèrement au survol */
    box-shadow: 0px 0px 15px 5px rgba(76, 175, 80, 0.5);  /* Lueur verte plus intense */
}


h1 {
    text-align: center;
    font-size: 200%;
    color: #06e70a;
    text-decoration: underline;
}

.couleur-texte-blanc {
    color: #ffffff;
}

#text-intro {
    margin-right: 12%;
    font-size: 0.85em;
}



    /* BARRE DE NAVIGATION HAUTE */


/* Style général de la barre de navigation */
.navbarre-haute {
    background-color: #4CAF50; /* 33b437 Vert */
    padding: 15px 0;
    display: flex;
    justify-content: center;
}

.navbarre-haute ul {
    list-style-type: none;  /* enlève les puces ou les numéros par défaut des éléments de liste */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-evenly; /* Répartit les éléments avec un espacement égal */
    align-items: center;
    width: 100%; /* Prend toute la largeur disponible */
}

.navbarre-haute li {
    display: inline;
    font-weight: bold;
    color: white;
}

/* Style des liens */
.navbarre-haute a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

/* Effet de survol pour assombrir légèrement */
.navbarre-haute a:hover {
    background-color: #238528; /* Vert un peu plus foncé */
}



    /* BARRE DE NAVIGATION LATERALE */


/* Style du bouton carré */
.nav-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    z-index: 3;	/* Comme 2 > 3, alors le bouton carré sera au-dessus de la barre de navigation latérale */
}

/* Barre de navigation latérale */
.sidebar-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-x: hidden;
    transition: 0.3s;
    z-index: 2;	/* Second z-index */
    padding-top: 60px;
}

/* Liste de liens */
.sidebar-nav ul {
    list-style-type: none;
    padding: 0;
}

.sidebar-nav ul li {
    padding: 10px 20px;
}

.sidebar-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.sidebar-nav ul li a:hover {
    background-color: #575757;
    border-radius: 4px;
}




    /* Liens TikTok */
.social-link {
    display: inline-flex; /* Change de block à inline et garde l'alignement */
    align-items: center; /* Centre verticalement l'icône et le texte */
    text-decoration: none; /* Supprime le soulignement du lien */
    background-color: #1e1e1e; /* Couleur du fond */
    border-radius: 5px;
    padding: 5px 10px; /* vertical horizontal */
    color: #fff;
    transition: background-color 0.3s, transform 0.3s; /* Ajoute des transitions pour l'effet au survol */
    width: fit-content; /* Adapte la taille de la boîte au contenu */
}

.social-link:hover {
    transform: scale(1.05);
}

/* Hover TikTok : fond rouge */
.tiktok:hover {
    background-color: #69C9D0;;  /* ancien rouge flashy de tiktok #ff0050 */
    color: black;
}

/* Hover Pinterest : fond vert */
.pinterest:hover {
    background-color: #f0314e;  /* rouge profond #E60023 */
    color: black;
}

#tiktok-icon {
    width: 2.5rem;
    height: auto;
    margin-right: 0.42rem; /* Espace entre l'icône et le texte */
}

#pinterest-icon {
    width: 2.5rem;    /* 1 rem = 16px (taille de police définie dans .social-text) */
    height: auto;
    margin-right: 0.85rem; /* Espace entre l'icône et le texte */
    margin-left: 5px;
}

.social-text {
    font-size: 16px;
}

.social-bold {
    font-weight: bold;
}



    /* CREER SA PROPRE TIER LIST ET OPTION DE RECHERCHE DE WEBTOONS */

/* Conteneur pour aligner les éléments */
.others-tierlist {
    display: flex;
    gap: 10px; /* Espace entre le bouton et la barre de recherche */
    justify-content: center; /* Centre les éléments horizontalement */
    margin: 20px 0; /* Espace au-dessus et en-dessous de la section */
}

/* Style du bouton */
.creer-tierlist-btn {
    background-color: #53c357; /* Couleur verte */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.creer-tierlist-btn:hover {
    background-color: #3a873e; /* Couleur un peu plus foncée au survol */
}

#search-webtoon {
    padding: 10px;
    font-size: 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    width: 200px;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: 
        linear-gradient(#fff, #fff), /* Couleur interne */
        linear-gradient(90deg, #4CAF50, #2196F3); /* Vert -> Bleu */
    background-repeat: no-repeat;
    background-size: 100% 100%, 200% 100%;
    transition: background-position 1s linear;
    background-position: center center, 0% 0%;
}

#search-webtoon:focus {
    outline: none;
    background-position: center center, 100% 0%; /* "tourne" le dégradé */
}






    /* MA TIER LIST */

.tier-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;     /* Espacement entre les différentes catégories de la tier list */
}

.tier-category {
    margin-bottom: 0.5em;   /* Créé un espacement entre les différentes catégories de ma tier list */
    display: flex;
    background-color: #2a2a2a;  /* gris foncé */
    border-radius: 0.5em;
    overflow: hidden;
}

    /* Pour les titres des catégories */
.tier-category h2 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 0.5em;
    text-align: center;
}

.tier-label {
    width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1.5em;     /* Créé un espacement entre le label et le fond *//* Espacement entre les titres et les conteneurs */
}

.tier-grid {
    display: flex;
    flex-wrap: wrap;    /* Permet aux images de se répartir sur plusieurs lignes */
    gap: 0.5em;     /* Espacement entre les images */
    padding: 1em;
    flex-grow: 1;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  /* Crée un nombre variable de colonnes qui ont une largeur minimale de 150px et remplissent l'espace disponible.             template = modèle */
}

.tier-grid img {
    width: 5.5rem;
    height: auto;
    border-radius: 0.5em;
    transition: transform 0.2s ease;    /* Ajoute une transition douce de 0.2s sur les images quand on glisse le curseur dessus (Pour éviter que l'image s'agrandisse d'un coup, moins moche  */
}

    /* Hover signifie "survoler" en anglais, cela signifie que le style sera appliqué de façon temporaire, seulement quand un curseur survolera l'image */
.tier-grid img:hover {
    transform: scale(1.05); /* Lorsque l'on survole l'image, elle s'agrandit de/* Agrandi légèrement l'image que le curseur glisse dessus */
}



#style-sss .tier-label { background-color: #FF9FF3; }
#style-excellents .tier-label { background-color: #FFC300; }
#style-tres-bons .tier-label { background-color: #DAF7A6; }
#style-bons .tier-label { background-color: #FF5733; }
#style-intermediaires .tier-label { background-color: #2E86C1;}
#style-moyens .tier-label { background-color: #C70039; }
#style-ennuyants .tier-label { background-color: #900C3F; }
#style-caca-supreme .tier-label { background-color: #581845; }
#style-flemme-de-classer .tier-label { background-color: #7D3C98; }
#style-en-cours-evaluation .tier-label { background-color: #17b114; }





    /* Pop-up */
    /* animation d'opacité à l'apparition de la pop-up */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.webtoon-details {
    display: none;		/* Permet de masquer le pop-up, qui sera affiché grâce au JS */
    position: fixed; /* anciennement : fixed */
    top: 50%;	/* centre le pop-up verticalement */
    left: 50%;	/* centre horizontalement */
    transform: translate(-50%, -50%);	/* Permet de centrer EXACTEMENT le pop-up */
    background-color: white;
    padding: 20px;		/* espace intérieur entre les bords du pop-up et le reste (ex : texte) */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);	/* Petit effet d'ombre sur les bords de la boîte pour rajouter en profondeur */
    z-index: 4;		/* Pas vraiment utile, mais place le pop-up au-dessus de tous les éléments de m page */
	max-height: 80vh; /* Limite la hauteur maximale à 80% de la hauteur de la vue */
    overflow-y: auto; /* Ajoute un scroll si le contenu dépasse la hauteur maximale */
	animation: fadeIn 0.5s ease-in-out;
}


	/* Titre du pop-up */
.webtoon-details h3 {
	margin-top: 0;	/* Supprime la marge supérieure par défaut du titre pour l'aligner correctement avec le contenu du pop-up */
	font-size: 28px;
	text-decoration: underline;
}

.webtoon-details img {
	width: 200px;
    height: auto;
    border-radius: 10px;
}


    /* Bannières des pop-ups webtoons */
.titres_bannières {
	text-align: center;
}

.titres_bannières img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 25px;
}

    /* Contenu de la pop-up des webtoons */
.details-content {
    display: flex;           /* Utilise Flexbox pour aligner l'image et le texte */
    gap: 20px;               /* Espace de 20px entre l'image et le texte */
    align-items: flex-start; /* Aligne le contenu au début verticalement (en haut) */
}

.details-content img {
    width: 200px;            /* Tu peux ajuster la largeur de l'image si nécessaire */
    height: auto;
    border-radius: 10px;
}

#dimensions-img-demonemperor img {
    width: 100px;
    height: auto;
}


.details-text {
    flex: 1;                 /* Prend le reste de l'espace disponible pour le texte */
	font-size: 90%;
}

.img-popup {    /* Le conteneur */
    display: flex;
    flex-wrap: wrap; /* répartit sur 1 ligne, et si il n'y a pas assez de place, il passe à la ligne suivante */
    justify-content: space-between; /* Espacement horizontal uniforme */
    gap: 15px; /* espace entre les images */
    margin: 20px auto; /* Centrage horizontal et marges verticales */
    max-width: 600px; /* Largeur maximale pour la grille */
}

.img-popup img {    /* Images prévisualisation */
    flex: 1 1 calc(33.33% - 15px); /* Chaque image prend 1/3 de la largeur avec un espacement */
    max-width: 100px; /* Taille maximale pour réduire les dimensions */
    height: auto; /* Conserve le ratio de l'image */
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre esthétique */
    margin: 5px; /* Espacement supplémentaire autour des images */
}

    /* Bouton en forme de Croix pour fermer le pop-up */
.close-popup {
    cursor: pointer;
    position: sticky;   /* Chiant mais permet que la croix défile vers le bas en même temps que le pop-up */
    top: 0; /* Jsp pk mais essentielle, sinon la croix ne bougera pas */
    left: 600px; /* Distance de la droite */
    font-size: 40px; /* Taille de la croix */
    color: black;
    transition: color 0.3s ease, transform 0.3s ease; /* Transition pour la couleur et la transformation */
    z-index: 10; /* S'assurer qu'elle est au-dessus des autres éléments */
}

.close-popup:hover {
    color: red; /* Changer la couleur au survol */
    transform: scale(1.1); /* Agrandir légèrement au survol */
}



    /* Zoom sur Image */
.thumbnail {
    width: 150px;
    cursor: pointer;
    transition: transform 0.2s; /* Animation pour l'effet de survol */
}

.thumbnail:hover {
    transform: perspective(500px) rotateY(10deg);
}

/* Crée en JS */
.modal {
    display: none; /* Masquer le modal par défaut */
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;	/* 80% */
    height: 620px;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}



/* style du bloc mobile nouvellement créé */
.sites-mobile {
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #fbfbfb;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* si besoin, styliser le contenu interne */
.sites-mobile .sites-list {
    margin: 0 0 6px 0;
    font-weight: 700;
}
.sites-mobile .sites-ul {
    margin: 6px 0 0 1rem;
    padding: 0;
    list-style: disc inside;
}
.sites-mobile .sites-ul li {
    margin: 6px 0;
    font-size: 0.95rem;
}

/* desktop safety: si jamais .sites-container reste, garder l'apparence d'origine */
.sites-container {
    margin-top: 0.6rem;
}






.contact-séparateur {
    height: 50px;
    background-color: #4CAF50;
    width: auto; /* Ajuste la largeur pour compenser le padding */
    margin-top: 70px;
    border: none;
}

    /* A Propos / Contact */
#àpropos-contact {
    background-color: #f9f9f9; /* Couleur de fond douce */
    padding: 2.5em;
    margin: 40px 7em; /* Espacement vertical - horizontal */
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet de profondeur */
}

#àpropos-contact h2 {
    color: #33b437; /* Couleur pour les titres */
    font-size: 24px;
    margin-bottom: 10px;
}

#àpropos-contact p {
    color: #555; /* Couleur du texte */
    line-height: 1.6;
}



.contact-form {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    font-family: 'Segoe UI', sans-serif;
}

.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #017605; /* vert plus foncé pour titres */
}

.contact-form input[type="email"], .contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid #a5d6a7; /* vert clair */
    border-radius: 0.75rem;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="email"]:focus, .contact-form textarea:focus {
    border-color: #7ccc7c; /* vert vif */
    box-shadow: 0 0 0 3px rgba(178, 231, 178, 0.3);
    outline: none;
}

.contact-form button {
    background-color: #b2e7b2; /* vert pastel clair */
    color: #222;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover {
    background-color: #9dd89d; /* vert un peu plus foncé */
    transform: scale(1.02);
}

/* Le compteur de caractères */
.contact-form p#char-count {
    font-size: 0.9em;
    color: #3a7d3a; /* vert moyen */
    margin-top: 3px;
}

/* Message de Confirmation d'envoi du mail (formulaire) */
#popup-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(136, 225, 136, 0.95); /* vert clair semi-transparent */
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    border: 3px solid #297e29; /* vert vif pour bordure */
    animation: blink-border 1s infinite;
}

#popup-message.popup-visible {
    opacity: 1;
}

@keyframes blink-border {
    0%, 100% { border-color: #297e29; } /* vert vif */
    50%      { border-color: #a6d8a6; } /* vert pastel */
}








/* RESPONSIVE / */
@media (max-width: 495px) {
    .navbarre-haute li {
        font-size: 0.85em;
    }
    #pinterest-icon {
        margin-left: 2px;
    }
    #àpropos-contact {
    margin: 40px 0;   /* Espacement vertical - horizontal */

    }
}



@media (max-width: 600px) {
    .tier-list {
        gap: 0.2rem;
    }

    .tier-category {
        margin-bottom: 0.2rem;
        border-radius: 0.3rem;
    }

    .tier-category h2 {
        font-size: 0.9rem;  /* ~14px */
        margin-bottom: 0.2rem;
    }

    .tier-label {
        width: 4rem;  /* ~64px */
        font-size: 0.9rem;
        padding: 1rem;
    }

    .tier-grid {
        gap: 0.4rem;
        padding: 0.5rem;
    }

    .tier-grid img {
        width: 3.57rem; /* ~64px */
        border-radius: 0.3rem;
    }
}