/* Reset et police */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f9f9f9;
    color: #333;
}

/* Header */
header {
    background-color: #ffb347;
    background-image: linear-gradient(to right, #ffcc33, #ff6600);
    color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

header h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

/* Container principal */
.container {
    display: flex;
    justify-content: center;
    margin: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

/* Colonnes pub */
aside.pub {
    /* background-color: #ffeaa7;*/
    width: 150px;
    min-width: 120px;
    padding: 10px;
    text-align: center;
   /*  border: 2px dashed #f39c12;*/
   /*  border-radius: 10px;*/
    height: fit-content;
}

/* Contenu principal */
main {
    flex: 1;
    min-width: 250px;
    max-width: 800px;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
}

/* Sections */
.hidden {
    display: none;
}

/* Conteneur du personnage */
.personnage-container {
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement */
    margin: 25px auto;
    margin-top: 25px; /* espace en haut et en bas */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;        /* évite que l'image dépasse */
}

/* Image du personnage */
.personnage-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* garde l'image entière, pas de recadrage */
    border-radius: 10px;
    animation: fadeIn 0.5s ease-in-out;
}

/* Conteneur réponse + bouton */
.answer-container {
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* aligne verticalement input + bouton */
    gap: 10px;               /* espace entre l'input et le bouton */
    margin: 15px auto;       /* centré et espace vertical */
}

/* Input de réponse */
.answer-container input[type="text"] {
    padding: 10px;
    width: 250px;            /* largeur fixe pour un alignement net */
    border: 2px solid #ffb347;
    border-radius: 8px;
    font-size: 1em;
}

/* Boutons (Commencer / Valider / Rejouer) */
.btn {
    padding: 10px 20px;
    background-color: #ffb347;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    margin: 10px auto;
}

.btn:hover {
    background-color: #ff6600;
}

/* Variantes */
.btn-start {
    background-color: #ffa500;
}

.btn-validate {
    background-color: #ffb347;
}

.btn-rejouer {
    background-color: #ff9800;
}

/* 🔥 Fix spécifique pour le bouton Valider dans la zone réponse */
.answer-container .btn-validate {
    margin: 0;   /* enlève le margin auto qui cassait l’alignement */
}

/* Résultat et score */
#result {
    margin-top: 10px;
    font-size: 1.1em;
    font-weight: bold;
}

p {
    margin: 5px 0;
}

/* Formulaire catégories */
#categories-form label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Confetti canvas */
#confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }

    aside.pub {
        width: 80%;
        margin-bottom: 15px;
    }

    main {
        width: 90%;
    }
}

#accueil {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centre horizontalement tout le contenu */
  gap: 15px;                 /* espace entre les éléments */
  padding: 20px;
}

/* Cacher la checkbox */
#categories-container input[type="checkbox"] {
  display: none;
}

/* Conteneur des catégories */
#categories-container {
  display: flex;
  flex-wrap: wrap;         /* passe à la ligne si nécessaire */
  justify-content: center; /* centre horizontalement */
  gap: 6px;               /* espace entre les catégories */
  padding: 10px 0;
}

/* Labels de catégories */
#categories-container label {
  display: inline-block;
  padding: 8px 15px;       /* réduit la “bulle” */
  margin: 3px;
  border: 1px solid #ccc;
  border-radius: 15px;
  background-color: #f8f8f8;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  white-space: nowrap;      /* empêche le texte de se casser */
}

/* Hover uniquement pour labels non cochés */
#categories-container label:not(:has(input:checked)):hover {
  background-color: #e0e0e0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px) scale(1.02);
}

/* Style pour label sélectionné */
#categories-container label:has(input:checked) {
  background: linear-gradient(135deg, #f5be48, #f7a600);
  color: white;
  border-color: #f7b968;
  box-shadow: 0 0 10px rgba(245, 190, 72, 0.5);
  transform: none; /* pas de déplacement au hover */
}

/* Cacher la checkbox */
#categories-container input[type="checkbox"] {
  display: none;
}

/* Responsive pour petits écrans */
@media screen and (max-width: 480px) {
  #categories-container {
    gap: 6px; /* réduit l’espace entre les catégories */
    padding: 8px 0;
  }

  #categories-container label {
    padding: 6px 12px;   /* bulles plus petites pour mobile */
    font-size: 0.9em;
  }
}



/* Conteneur principal */
#score-container {
  display: flex;
  justify-content: space-between; /* espace entre le meilleur score et le score/vie */
  align-items: center;
  padding: 10px 20px;
  margin-top: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  background-color: #f4f4f4;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Meilleur score */
#best-score {
  padding: 8px 15px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 88%);
  border-color: #f8e800;
  color: #333;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease-in-out;
}

/* Conteneur Score + Vie */
#score-lives span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  background-color: hsl(0, 0%, 88%);
  color: #333;
  min-width: 35px;
  text-align: center;
  margin-left: 5px;
  transition: all 0.3s ease-in-out;
}

/* Survol */
#score-lives span:hover, #best-score:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  cursor: default;
}

#accueil, #quiz {
    margin: 0;
    padding: 0;
    overflow: hidden; /* empêche le margin collapsing */
}

.quiz-end-card {
  text-align: center;
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  max-width: 400px;
  margin: 40px auto;
  animation: fadeInUp 0.6s ease;
}

/* Titre */
.quiz-end-card h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #f5be48;
  margin-bottom: 20px;
}

/* Texte des résultats */
.quiz-end-card p {
  font-size: 1.2rem;
  margin: 10px 0;
  color: #333;
}

.quiz-end-card span {
  font-weight: bold;
  color: #f7a600;
}

/* Bouton rejouer */
.btn-rejouer {
  margin-top: 20px;
  padding: 12px 25px;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #f5be48, #f7a600);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
}

.btn-rejouer:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Effet visuel au clic */
.click-effect {
    transform: scale(0.95);      /* bouton légèrement réduit */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* léger effet d’ombre */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Dégradé animé du fond */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #fff6e6, #ffe0b3, #ffd699, #fff6e6);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  overflow-x: hidden;
}

@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* Canvas de confettis déjà présent pour particules */
#confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; /* derrière le contenu */
}

header {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 20px 15px;
  background: linear-gradient(135deg, #ffd699, #ffcc99);
  background-size: 400% 400%;
  animation: gradientHeader 30s ease infinite;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  border-radius: 0 0 12px 12px;
}

header h1 {
  font-size: 2em;
  color: #ff6600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin: 0;
  animation: textPulse 6s ease-in-out infinite alternate;
}

header p {
  font-size: 1em;
  margin-top: 5px;
  color: #555;
}

/* Animations */
@keyframes gradientHeader {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

@keyframes textPulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.01);}
  100% {transform: scale(1);}
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: linear-gradient(135deg, #ffb347, #ff9900, #555555); /* orange + gris */
  background-size: 400% 400%;
  animation: gradientHeader 30s ease infinite;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* ombre subtile pour démarquer */
  position: relative;
  overflow: hidden;
}

/* Overlay léger pour assombrir subtilement */
header::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.05); /* très subtil */
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

/* Animation du gradient */
@keyframes gradientHeader {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}




/* Partie gauche : menu */
.header-left {
  flex: 1;
}

.header-left .header-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  align-items: center;
}

.header-left a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: color 0.2s;
}

.header-left a:hover {
  color: #ff6600;
}

.dropdown {
  position: relative;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  background: #fff;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 5px 15px;
}

.dropdown-menu li a:hover {
  color: #ff6600;
}

/* Header principal */
header {
  display: flex;
  align-items: center;
  justify-content: center; /* titre centré */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 15px 40px;
  background: linear-gradient(270deg, #ffcc80, #ff9966, #ffcc80);
  background-size: 400% 400%;
  animation: gradientHeader 30s ease infinite;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  position: relative;
  box-sizing: border-box;
}

/* Partie centrale : titre */
.header-center {
  text-align: center;
  flex: 1; /* prend tout l’espace central */
  z-index: 1; /* pour rester au-dessus si besoin */
}

.header-center h1 {
  margin: 0;
  font-size: 2em;
  color: #ff6600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.header-center p {
  margin: 5px 0 0 0;
  font-size: 1em;
  color: #555;
}

/* Menu à droite */
.header-right {
  position: absolute; /* pour rester à droite sans décaler le titre */
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.header-right ul {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-right a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
  padding: 5px 10px;
  transition: color 0.2s;
}

.header-right a:hover {
  color: #ff6600;
}

/* Animations */
@keyframes gradientHeader {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* Responsive mobile */
@media screen and (max-width: 768px) {
  header {
    flex-direction: column;
    justify-content: center;
    padding: 15px 20px;
  }

  .header-right {
    position: static;
    transform: none;
    margin-top: 10px;
    justify-content: center;
    gap: 10px;
  }
}

/* Badge “en développement” */
.dev-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0 3px;       /* padding très réduit */
    font-size: 0.45em;    /* beaucoup plus petit */
    font-weight: bold;
    color: #fff;
    background-color: #ff6600;
    border-radius: 4px;   /* petit arrondi */
    text-transform: uppercase;
    vertical-align: middle;
    animation: pulse 3s infinite alternate;
}

/* Animation pulsante */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.6; }
}

/* Titre animé : gradient + flottement + surbrillance qui respire */
.header-center h1 {
    font-size: 2.5em;
    font-weight: bold;
    background: linear-gradient(270deg, #000000, #353433, #fffff); /* 90° au lieu de 270° */
    background-clip: text;          /* standard */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 2px rgba(255,102,0,0.4), 0 0 4px rgba(255,204,51,0.4);
    animation: gradientText 6s ease infinite,
               floatSlow 10s ease-in-out infinite,
               glowBreathe 4s ease-in-out infinite;
    text-align: center;
    margin: 0;
}

/* Dégradé animé */
@keyframes gradientText {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Flottement lent et naturel */
@keyframes floatSlow {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(0.5px, -1px); }
    20%  { transform: translate(-0.5px, 0.5px); }
    30%  { transform: translate(1px, -0.5px); }
    40%  { transform: translate(-1px, 1px); }
    50%  { transform: translate(0.5px, -0.5px); }
    60%  { transform: translate(-0.5px, 0.5px); }
    70%  { transform: translate(1px, 0); }
    80%  { transform: translate(-1px, -0.5px); }
    90%  { transform: translate(0.5px, 1px); }
    100% { transform: translate(0, 0); }
}

/* Surbrillance qui respire doucement */
@keyframes glowBreathe {
    0%   { text-shadow: 0 0 2px rgba(255,102,0,0.4), 0 0 4px rgba(255,204,51,0.4); }
    50%  { text-shadow: 0 0 4px rgba(255,102,0,0.6), 0 0 8px rgba(255,204,51,0.6); }
    100% { text-shadow: 0 0 2px rgba(255,102,0,0.4), 0 0 4px rgba(255,204,51,0.4); }
}

/* Barre d'infos défilante plus douce et plus lente */
.info-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: linear-gradient(270deg, #ffcc80, #ff9966, #ffcc80); /* orange plus doux */
    background-size: 600% 100%; /* pour l’animation du dégradé */
    color: #fff;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0; /* hauteur réduite */
    box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95em;
    animation: gradientBar 10s ease infinite; /* dégradé qui respire légèrement plus lent */
}

/* Contenu qui défile */
.info-content {
    display: inline-block;
    padding-left: 100%;
    animation: scrollInfo 30s linear infinite; /* défilement plus lent */
}

/* Défilement du texte */
@keyframes scrollInfo {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Animation du dégradé pour effet “respiration” */
@keyframes gradientBar {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Responsive : réduit encore un peu le texte sur petit écran */
@media screen and (max-width: 768px) {
    .info-bar {
        font-size: 0.85em;
        padding: 5px 0;
    }
}

header, .header-right ul, #open-login, #open-signup {
  position: relative;
  z-index: 9999;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

header {
  position: relative;
  z-index: 10001; /* plus haut que modales ou info-bar */
}

.header-right {
  z-index: 10002; /* liens au-dessus du header */
}

/* Modales */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 1030;
  background: linear-gradient(135deg, #fff6e6, #ffd699);
  padding: 25px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  width: 350px;
  max-width: 90%;
  text-align: center;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal h2 {
  margin-bottom: 15px;
  color: #ff6600;
  font-size: 1.6em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.modal input {
  width: 85%;
  padding: 10px;
  margin: 8px 0;
  border: 2px solid #ffb347;
  border-radius: 12px;
  font-size: 1em;
  outline: none;
  transition: border 0.3s, box-shadow 0.3s;
}

.modal input:focus {
  border-color: #ff6600;
  box-shadow: 0 0 8px rgba(255,102,0,0.3);
}

.modal button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #ffb347, #ff6600);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  margin: 5px 0;
  transition: background 0.3s, transform 0.2s;
}

.modal button:hover {
  background: linear-gradient(135deg, #ff9900, #ff3300);
  transform: scale(1.05);
}

/* Messages d'erreur/succès */
.modal-message {
  font-size: 0.9em;
  margin-bottom: 10px;
  min-height: 18px;
}

#user-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  gap: 20px;
}

#user-pseudo {
  background: linear-gradient(135deg, #f5e8cd, #f5d391);
  color: rgb(0, 0, 0);
  padding: 5px 10px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

#user-info button {
  padding: 6px 12px;
  background: linear-gradient(135deg, #ffb347, #ff6600);
  color: white;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
#user-info button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Conteneur principal du leaderboard */
#leaderboard-container {
  width: 80%; /* 20% de moins que le main */
  max-width: 640px; /* 80% de 800px pour correspondre au max du main */
  margin: 25px auto;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}

/* Titre */
#leaderboard-container h3 {
  font-size: 1.8em;
  color: #ff6600;
  margin-bottom: 15px;
}

/* Onglets (Jour / Semaine / Mois / Total) */
.leaderboard-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.leaderboard-tabs button {
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #ffb347;
  color: #fff;
  font-weight: bold;
  transition: background 0.3s;
}

.leaderboard-tabs button.active {
  background: linear-gradient(135deg, #f5be48, #f7a600);
}

.leaderboard-tabs button:hover:not(.active) {
  background-color: #ff6600;
}

/* Tableau */
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  font-weight: 500;
}

.leaderboard-table tbody tr:nth-child(even) {
  background: #f9f9f9;
}

/* Responsive */
@media screen and (max-width: 480px) {
  #leaderboard-container {
    padding: 15px;
  }

  .leaderboard-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }

  .leaderboard-tabs button {
    padding: 6px 10px;
    font-size: 0.9em;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 6px 4px;
    font-size: 0.9em;
  }
}

#fun-facts-container {
  width: 220px;
  background: linear-gradient(135deg, #fff6e6, #ffe0b3);
  padding: 15px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 15px;

  position: fixed; /* reste visible et n'affecte pas le flux */
  top: 120px;      /* décale sous le header */
  left: 20px;      /* marge depuis le bord gauche */
  transition: opacity 1.5s ease-in-out;
  z-index: 1000;   /* au-dessus du contenu */
}

#fun-fact-text {
  line-height: 1.4;
  opacity: 0;
  transition: opacity 1s ease-in-out; /* fondu */
}

/* Conteneur principal des requests anime */
#request-anime {
    position: fixed;          /* reste visible en scroll */
    top: 120px;               /* sous le header */
    right: 20px;              /* distance du bord droit */
    display: flex;
    flex-direction: column;   /* empile les deux boxes verticalement */
    gap: 15px;                /* espace entre les deux boxes */
    z-index: 1000;            /* au-dessus du contenu principal */
    margin-top: 15px;
}

/* Boxes individuelles */
#anime-request-box,
#anime-request-box-2 {
    background: linear-gradient(135deg, #fff6e6, #ffe0b3);
    border: 2px solid #ffb347;     /* bordure orange */
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;         /* empile éléments verticalement */
    align-items: center;            /* centre horizontalement */
    gap: 10px;                      /* espace entre éléments */
    width: 250px;                   /* largeur fixe, ajustable */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Titres */
#anime-request-box h3,
#anime-request-box-2 h3 {
    margin: 0;
    font-size: 14px;
    color: #ff6600;
    text-align: center;
}

/* Textarea */
#anime-request-box textarea,
#anime-request-box-2 textarea {
    width: 100%;
    height: 60px;
    padding: 8px 10px;
    border: 2px solid #ffb347;
    border-radius: 8px;
    font-size: 0.9em;
    resize: none;
    outline: none;
    transition: border 0.3s, box-shadow 0.3s;
}

#anime-request-box textarea:focus,
#anime-request-box-2 textarea:focus {
    border-color: #ff6600;
    box-shadow: 0 0 6px rgba(255,102,0,0.3);
}

/* Input (optionnel) */
#anime-request-box input,
#anime-request-box-2 input {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #ffb347;
    border-radius: 8px;
    font-size: 0.9em;
    outline: none;
    transition: border 0.3s, box-shadow 0.3s;
}

#anime-request-box input:focus,
#anime-request-box-2 input:focus {
    border-color: #ff6600;
    box-shadow: 0 0 6px rgba(255,102,0,0.3);
}

/* Boutons */
#anime-request-box button,
#anime-request-box-2 button {
    padding: 8px 12px;
    background: linear-gradient(135deg, #ffb347, #ff6600);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    align-self: center;   /* centre le bouton */
}

#anime-request-box button:hover,
#anime-request-box-2 button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Notes sous les boutons */
.anime-request-note {
    font-size: 12px;
    color: #555;
    text-align: center;
    margin-top: 5px;
}

/* Responsive petits écrans */
@media screen and (max-width: 480px) {
    #request-anime {
        right: 10px;
        gap: 10px;
    }

    #anime-request-box,
    #anime-request-box-2 {
        width: 180px;
        padding: 12px;
        gap: 8px;
    }

    #anime-request-box h3,
    #anime-request-box-2 h3 {
        font-size: 13px;
    }

    #anime-request-box textarea,
    #anime-request-box-2 textarea,
    #anime-request-box input,
    #anime-request-box-2 input {
        font-size: 0.85em;
    }

    #anime-request-box button,
    #anime-request-box-2 button {
        font-size: 0.85em;
        padding: 6px 10px;
    }
}

#accueil h2 {
  font-size: 2em;
  font-weight: bold;
  background: linear-gradient(45deg, #ff6600, #ffcc33, #ff6600);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flame 3s ease-in-out infinite;
  
  /* Glow réduit */
  text-shadow: 0 0 4px rgba(255,100,0,0.4);
}

@keyframes flame {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.heart {
  display: inline-block;
  font-size: 1.8rem;
  transition: transform 0.3s, opacity 0.3s;
}

.heart.lost {
  transform: scale(1.5);
  opacity: 0;
}