/* ====== généré par DZ (version corrigée + favoris/filtre/recherche) ====== */

/* reset léger + police par défaut */
* {
  margin: 0;
  padding: 0;
  font-family: Avenir, sans-serif;
}
.nav-clock {
  display: flex;
  align-items: center;
  gap: 8px; /* espacement entre l'icône et le texte */
}

.nav-clock-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ====== FOND & GLOBAL ====== */

.magic-btn {
  position: relative;
  transition: box-shadow 0.3s;
}
.magic-btn::after {
  content: '✦'; /* petite étoile scintillante */
  position: absolute;
  top: -5px; right: -5px;
  font-size: 14px;
  color: #ffd700;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.5s, opacity 0.5s;
  pointer-events: none;
}
.magic-btn:hover {
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.magic-btn:hover::after {
  opacity: 1;
  transform: scale(1.2) translate(-2px, 2px);
}

body {
  background-image: url(./images/background.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
}

html, body {
  overflow-x: hidden;
}

h2 {
  color: #536ec5;
}

h3 {
  font-size: 13px;
  color: #4c6b1b;
  margin: 1%;
}
/* Popup légal harmonisé */
.modal.hidden {
  display: none;
}
.modal {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fefefe;
  padding: 25px;
  max-width: 800px;
  width: 90%;
  max-height: 85vh;      
  overflow-y: auto;   
  border-radius: 12px;
  position: relative;
  font-family: 'Verdana', sans-serif;
  animation: fadeIn 0.3s ease-in-out;
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #c3d78f;
  border-radius: 999px;
}

.modal-content::-webkit-scrollbar-track {
  background: #f5ffe9;
}
.legal-section {
  padding: 26px;
  margin-top: 20px;
  margin-bottom: 15px;
  border-radius: 20px;
  display: none; /* par défaut caché */
}

/* Quand un bloc est actif (onglet en cours) */
.legal-section.visible {
  display: block;
    border: 3px dashed #98b477;
    background: #f3ffd7; 
}

/* Titres internes */

.legal-title {
  color: #536ec5;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 #ffffff;
  font-size: 28px;
  font-weight: 700;
}

.legal-subtitle {
  font-size: 17px;
  font-weight: bold;
  font-weight: 600;
  color: #3d510a;
  margin-top: 12px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}

.legal-section-content p {
  font-size: 15px;
  color: #2d3605;
  line-height: 1.6;
  padding-left: 11px;
  border-left: 3px solid #a8d55f;
}

#legal-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #fafff0;
  border: 2px solid #c1d7a0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.popup-switch-button {
  background: linear-gradient(to bottom, #f4ffe2, #d0e6b4);
  border: 2px solid #9bb76a;
  border-radius: 10px;
  color: #2d3605;
  padding: 6px 16px;
  margin: 0 6px 12px;
  font-weight: bold;
  box-shadow: 0 3px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.popup-switch-button:hover {
  background: #e7f7cc;
  box-shadow: 0 0 10px #c8e6a4;
}

#legal-popup .popup-content {
  font-family: "Trebuchet MS", sans-serif;
  color: #2d3605;
  background: linear-gradient(135deg, #f7ffe0 0%, #e4f4cc 100%);
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  line-height: 1.6;
  font-size: 15px;
  text-align: left;
  margin: auto;
}

#legal-popup h2 {
  color: #2d3605;
  font-size: 22px;
  margin-bottom: 15px;
}

#legal-popup strong {
  color: #3d510a;
}

.legal-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1em;
}
.tab-btn {
  background-color: #e3e3e3;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
.tab-btn.active {
  background-color: #a8d55f;
  color: #222;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}


/* ====== BLOCS HAUT DE PAGE ====== */

div.h1-haut {
  background-image: url(./images/coeur.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 30px;
  min-height: 120px;
  text-align: center;
  animation: pop 1.4s ease forwards;
}

div.h1-bas {
  text-align: center;
  color: #af0808;
  font-size: 2em;
}
.nav-clock {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 0, #f9ffe4 2%, #e2f5b9 40%, #cadf99 1200%);
  border: 3px solid #8bbf3f;
  box-shadow: 0 0 6px rgba(139, 191, 63, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
  color: #31440f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
width: 282px; }

.nav-clock-label {
  font-size: 18px;
  letter-spacing: 0.01em;
  opacity: 1;
}

.nav-clock-time {
  font-size: 18px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fdfef8 0%, #f7ffe2 50%, #fdfef8 100%);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    inset 0 0 4px rgba(139,191,63,0.45);
  border: 1px solid rgba(130, 170, 60, 0.8);
}

/* petit effet “respiration” discret */
@keyframes clockPulse {
  0%   { box-shadow: 0 0 4px rgba(139,191,63,0.45); }
  50%  { box-shadow: 0 0 10px rgba(139,191,63,0.9); }
  100% { box-shadow: 0 0 4px rgba(139,191,63,0.45); }
}

.nav-clock-time {
  animation: clockPulse 3s ease-in-out infinite;
}
@keyframes pop {
  0% { background-size: 45px; opacity: 0; }
  100% { background-size: 109px; margin: 10px; opacity: 1; }
}

/* ====== NAVBAR ====== */

nav {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, #f5ffe9 0%, #d5e9b8 100%);
  border-bottom: 2px solid #8bbf3f;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 24px;
}

.title-menu {
  font-size: 18px;
  color: #4c6b1b;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 8px;
}

nav ul.menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

nav ul.menu li.logo img {
  height: 24px;
  width: auto;
  display: block;
}

nav ul.menu li a {
  display: block;
  text-decoration: none;
  color: #364019;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  border-bottom: none;
}

nav ul.menu li a:hover {
  background: #8bbf3f;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* neutralisation des anciennes règles génériques */
nav ul li {
  flex: 0 0 auto;
  text-align: center;
  position: relative;
}

nav a {
  border-bottom: none;
  padding: 0;
}

/* ====== LAYOUT PRINCIPAL ====== */

main {
  width: 900px;
  padding: 40px;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
  background-color: white;
  border-radius: 33px;
  box-shadow: inset 0 0 1em rgb(0, 0, 0), 0 0 1em rgb(124, 124, 124);
}

.trois {
  margin-top: 20px;
}
/* Image erreur */
.error-img {
  width: 350px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.4));
  margin-bottom: 8px;
}

/* Anim tremblement léger */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

.error-text {
  line-height: 2;
}

/* classes de grille héritées (au cas où utilisées ailleurs) */
.un {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.deux {
  grid-column: 2 / 7;
  grid-row: 3 / 2;
}
.trois {
  grid-column: 2 / 10;
  grid-row: 3 / 5;
}
.quatre {
  grid-column: 4 / 10;
  grid-row: 4 / 6;
}

.licorne .un {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  width: 100%;
  color: #FFF;
  font-family: Arial, sans-serif;
  justify-content: space-between;
}

.alaligne {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.trois .quatre {
  display: flex;
  justify-content: space-between;
}

/* ====== BARRE RECHERCHE / FILTRE / FAVORIS ====== */

.toolbar {
  margin: 12px 2px 12px;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(245, 253, 235, 0.96);
  border: 1px solid rgba(184, 214, 138, 0.9);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 0 6px rgba(155, 204, 98, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px 20px;
}

.toolbar-group label {
  font-size: 14px;
  color: #4b5b1b;
  margin: 1%;
}


#search-input,
#per-page-select {
  min-width: auto;
  padding: 7px 10px 7px 21px;
  border-radius: 999px;
  border: 1px solid #c3d78f;
  background: #fdfef8;
  font-size: 13px;
  color: #30361a;
  box-shadow: -1px 1px 3px rgba(0,0,0,0.12);
  outline: none;
  transition: border 0.15s ease, box-shadow 0.25s ease, background 0.15s ease;

  /* >>> AJOUT POUR LE DÉFILEMENT DU TEXTE <<< */
  white-space: nowrap;     /* tout sur une seule ligne */
  overflow-x: auto;        /* permet le scroll horizontal */
}
/* Lien "Mes favoris ⭐" avec badge */
#nav-favorites {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes heartGlow {
  0%   { box-shadow: 0 0 0 rgba(255, 99, 132, 0); }
  50%  { box-shadow: 0 0 16px rgba(255, 99, 132, 0.95); }
  100% { box-shadow: 0 0 6px rgba(255, 99, 132, 0.6); }
}

.lightbox-vote.heart-animate {
  animation:
    heartPop 0.35s ease-out,
    heartGlow 0.6s ease-out;
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes heartGlow {
  0%   { box-shadow: 0 0 0 rgba(255, 99, 132, 0); }
  50%  { box-shadow: 0 0 16px rgba(255, 99, 132, 0.95); }
  100% { box-shadow: 0 0 6px rgba(255, 99, 132, 0.6); }
}

.lightbox-vote.heart-animate {
  animation:
    heartPop 0.35s ease-out,
    heartGlow 0.6s ease-out;
}
/* Badge compteur dans la nav */
.nav-fav-badge {
  min-width: 25px;
  min-height: 27px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 13px;
  background: linear-gradient(180deg, #fff7d7 0%, #f0cf6a 100%);
  color: #5a3907;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  display: none; /* masqué par défaut */
}

.nav-fav-badge.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#search-input:focus,
#per-page-select:focus {
  border-color: #88b43c;
  box-shadow:
    0 0 0 2px rgba(170, 214, 103, 0.5),
    0 2px 5px rgba(0,0,0,0.18);
  background: #ffffff;
}
.copy-toast.copy-toast-error {
  background: linear-gradient(90deg, #ffd1d1 0%, #ff8a8a 100%);
  color: #6b0b0b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 8px rgba(255, 80, 80, 0.7);
}

#search-input {
  white-space: nowrap;
  overflow-x: auto;
}
#search-input::-webkit-scrollbar {
  display: none;
}
.fav-mode-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #cfa93b;
  background: linear-gradient(180deg, #fff7d7 0%, #f0cf6a 50%, #d9a93a 100%);
  color: #3a2a0b;
  font-size: 14px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  transition:
    background 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}
.fav-mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.fav-mode-btn:hover {
  background: linear-gradient(180deg, #fffbe4 0%, #f5d87c 50%, #e2b247 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
}

.fav-mode-btn.active {
  background: linear-gradient(180deg, #e6ffd2 0%, #b8e36b 50%, #7caf2b 100%);
  color: #24330a;
  border-color: #7caf2b;
  box-shadow:
    0 3px 9px rgba(0,0,0,0.35),
    0 0 8px rgba(124,175,43,0.9);
}
#search-input.search-marquee {
  color: #999;
}
#search-input:not(.search-marquee) {
  color: #30361a;
}

/* ====== GRILLE DES EMOTES ====== */

.licorne-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 35px;
  row-gap: 45px;   /* plus d’espace vertical */
  justify-items: center;
  margin: 1%;
}


/* Icône émeraude */
.contact-icon {
  width: 48px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 10px;
  filter: drop-shadow(0 0 4px rgba(118, 210, 80, 0.8));
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Style de base du pseudo */
.highlight-name {
  font-weight: 700;
  color: #355012;
  padding: 2px 4px;
  border-radius: 6px;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    text-shadow 0.25s ease,
    box-shadow 0.25s ease;
}

/* Quand on survole le bloc contact (et donc l’image) */
.footer-name:hover .contact-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(134, 255, 92, 1));
}

/* Effet brillance sur Hell Mina (idzeus) */
.footer-name:hover .highlight-name {
  color: #fefdf5;
  background: linear-gradient(90deg, #9be44f 0%, #dfff94 50%, #9be44f 100%);
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(140, 220, 80, 0.9);
  animation: redSoftPulse 1.8s infinite ease-in-out;
}

.photo3 {
  width: 100%;
}
.header-button {
  background: linear-gradient(to bottom, #ffffff, #d6eabf);
  border: 1px solid #98b477;
  padding: 6px 12px;
  border-radius: 10px;
  color: #2d3605;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.header-button:hover {
  background: #f1ffe5;
  box-shadow: 0 0 10px #bfe99f;
}
/* Bouton Mentions légales / CGU dans la navbar */
nav ul.menu li .header-button {
  display: block;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: bold;
  background: linear-gradient(to bottom, #ffffff, #d6eabf);
  border: 1px solid #98b477;
  color: #2d3605;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}

nav ul.menu li .header-button:hover {
  background: #8bbf3f;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}

/* Bande verte au-dessus de l'image */
.licorne-header {
  background: linear-gradient(180deg, #ecf9dd 0%, #d6edb2 100%);
  padding: 4px 8px;
  font-size: 15px;
  font-weight: bold;
  color: #6b8b26;
  text-align: center;
  min-height: 32px;
  border-radius: 18px 18px 0 0;
  align-items: center;
  justify-content: center;
    display: flex;
  gap: 6px;
  position: relative;
  z-index: 2;
}


/* bouton favori (étoile) */
/* === STYLE GLOBAL POUR TOUS LES BOUTONS FAVORIS ⭐ === */
.fav-toggle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 150%;
  color: #ffd700;
  border: 2px solid #ffd700;
  padding: 0%;
  border-radius: 10px;
  cursor: pointer;
  transition: .25s ease;
  backdrop-filter: blur(4px);
  z-index: 20;
}

.fav-toggle:hover {
  background: rgba(255, 215, 0, .95);
  color: rgb(110, 210, 22);
  transform: scale(1.25);
}
.favorited .fav-toggle:hover {
  color: rgb(110, 210, 22);
}

/* Actif → en favoris */
.fav-toggle.active,
.favorited .fav-toggle {
  background: #FFD700;
  color: black;
  border-color: #FFC700;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: 0.25s ease;
  cursor: pointer;
}
.profile-link:hover {
  color: #ffe57e;
  text-shadow: 0px 0px 10px rgba(255,255,150,0.9);
}
.profile-link:hover .contact-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(255,255,120,0.9));
}

/* état favori (si tu ajoutes la classe .is-fav en JS) */
.fav-toggle.is-fav {
  background: radial-gradient(circle at 30% 20%, #fff9d0 0%, #f3c352 55%, #c78c24 100%);
  color: #7b2d00;
  box-shadow:
    0 0 10px rgba(255, 215, 80, 0.9),
    0 3px 8px rgba(0,0,0,0.5);
}

/* hover propre */
.fav-toggle:hover {
  transform: scale(1.05) translateY(-1px);
  background: rgba(0, 0, 0, 0.45);
}

.licorne-box.favorited .fav-toggle {
  color: #f5c000;
  background: #fff3c0;
  box-shadow:
    0 0 6px rgba(255, 220, 120, 0.9),
    0 2px 6px rgba(0,0,0,0.35);
}

/* Hover cartes */
.licorne-box:hover img {
  transform: scale(1.1);
  opacity: 0.8;
}
.licorne-box:hover .enlarge-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(5px);
}
.licorne-box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 8px rgba(125, 210, 60, 0.7),
    0 0 22px rgba(255, 215, 80, 0.6),
    0 8px 18px rgba(0, 0, 0, 0.25);
}
.licorne-box {
  width: 240px;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;          /* on garde le clipping du cadre */
  background: #f5ffe4;
  border: 2px solid #8bbf3f;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  margin-top: 10px;
}

@keyframes wakfuPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,255,200,0.6); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,255,255,0); }
}

#scrollTopBtn.show {
  animation: wakfuPulse 2s ease-in-out infinite;
}

#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 10%;
  right: 15%;
  z-index: 50;
  width: 60px;
  height: 63px;
  background-image: url('./images/topag.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease;
}

#scrollTopBtn.show {
  opacity: 1;
}

#scrollTopBtn:hover {
  transform: scale(1.2);
  filter: brightness(1.5);
}


#scrollTopBtn:hover {
  transform: scale(1.15);
}

.enlarge-hint {
  position: absolute;
  top: 65px;
  left: 28%;
  transform: translateX(-70%);
  padding: 1px 9px;
  font-size: 13px;
  color: #dd1515;
  background: rgba(255, 255, 255, 0.8); /* plus lisible qu’un rouge transparent */
  border-radius: 6px;
  pointer-events: none;
  z-index: 10; /* très important */
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* image en “fond” */
.licorne-box img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* bande verte toujours au-dessus de tout */
.licorne-header {
  position: relative;
  z-index: 3;
}
.licorne-item {
  position: relative; /* Pour placer les tags par rapport au parent */
  margin-top: 26px;   /* Ajoute espace pour que les tags n’écrasent pas le cadre */
}

/* Tags flottants au-dessus du cadre */
.emote-tags {
  position: absolute;
  top: -12px;
  left: 3px;
  display: flex;
  gap: 6px;
  z-index: 50; /* passe devant l'image */
  pointer-events: none; /* ne bloque pas les clics */
}
.emote-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Style individuel des tags */
.emote-tag {
  padding: 2px 6px;
  font-size: 11px;
  color: white;
  pointer-events: auto; /* clique si besoin */
  cursor: default;
}


/* l'image passe sous le header + tags */

/* ====== LIGHTBOX ====== */

.lightbox.hidden {
  display: none;
}

@keyframes redSoftPulse {
  0% {
    color: #b82525;
    text-shadow: none;
  }
  50% {
    color: #d94a4a;
    text-shadow:
      0 0 3px rgba(200, 40, 40, 0.25),
      0 0 6px rgba(200, 40, 40, 0.15);
  }
  100% {
    color: #b82525;
    text-shadow: none;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

/* fond sombre cliquable */
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* petite ligne en haut de la fenêtre */
.lightbox-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 5px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #7fb23a, #b6e35a);
}

/* fenêtre au centre */
.lightbox-content {
  position: relative;
  background: #fdfdf8;
  border-radius: 42px;
  padding: 22px 26px 26px;
  max-width: 758px;
  width: 143vw;
  max-height: 85vh;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
  border: 7px groove #8bbf3f;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* bouton croix */
.lightbox-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: #f5ffe4;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
  color: #55751d;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.2s, transform 0.1s;
}

.lightbox-close:hover {
  background: #b6e35a;
  transform: scale(1.05);
}
/* Bouton favoris dans la popup */
.lightbox-fav {
  position: absolute;
  top: 110px;
  left: 98px;
  /* taille du carré */
  width: 48px;
  height: 48px;
  border-radius: 12px;
  /* taille de l’étoile */
  font-size: 2.4rem;
  /* style de base */
  background: #585858;
  border: 2px solid #ffd700;
  color: #c3bfa7d3;          /* étoile gris clair avant survol */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 20;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

/* Survol : étoile or + léger zoom chaleureux */
.lightbox-fav:hover {
  background: #fff7c0;              /* fond jaune clair */
  color: #bfe970;;                   /* ⭐ OR au survol */
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* état actif (déjà en favoris) */
.lightbox-fav.active {
  background: #fff7c0;
  color: #ffd700;
  box-shadow:
    0 0 6px rgba(255, 220, 120, 0.9),
    0 2px 6px rgba(0,0,0,0.35);
}
.lightbox-image-row {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;              /* centré */
  display: flex;
  justify-content: center;
  align-items: center;
  /* on enlève le gap et la limite de hauteur ici */
  gap: 0;
  max-height: none;
  overflow: visible;
}

/* Image dans la popup */
.lightbox-image-row img,
#lightbox-img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
.lightbox-prev,
.lightbox-next {
   position: absolute;
  top: 60%;
  transform: translateY(-60%);
  width: 54px;
  height: 55px;
  margin: 0;                 /* plus de marge latérale */
  border: none;
  background: #82c309;
  font-size: 44px;
  cursor: pointer;
  color: #55751d;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease,
              background 0.2s ease,
              box-shadow 0.2s ease;
}
.lightbox-next {
  right: 5px;
}
.lightbox-prev{
  left: 5px;
}
.lightbox-prev:hover,
.lightbox-next:hover {
  background: #bfe970;
  transform: translateY(-50%) translateY(-2px); /* léger lift */
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
/* ===== PAGINATION DES GIFS ===== */

.pagination {
  margin: 26px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250, 253, 242, 0.96);
  border: 1px solid rgba(185, 211, 138, 0.9);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.18),
    0 0 6px rgba(180, 220, 120, 0.45);
  width: auto;
}

/* Boutons numérotés / flèches */
.pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;

  border-radius: 999px;
  border: 1px solid rgba(180, 200, 135, 0.9);
  background: #f7fbe9;
  color: #3a3f1a;
  font-size: 14px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

/* flèches un peu plus étroites */
.pagination button:first-child,
.pagination button:last-child {
  padding: 0 8px;
}

/* Hover sobre */
.pagination button:hover:not(.active):not(:disabled) {
  background: linear-gradient(180deg, #fbfff2 0%, #e4f0c2 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* Page active – vert Dofus propre */
.pagination button.active {
  background: linear-gradient(180deg, #e7ffd7 0%, #b7e66d 50%, #7fb333 100%);
  color: #24310c;
  border-color: #7fb333;
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(131, 196, 63, 0.85);
}

/* Désactivé (‹ ou › bloqué) */
.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}
/* === ANIM FAV DOFUS CHALEUREUSE ⭐ === */

@keyframes favJoyPop {
  0% {
    transform: scale(0.8) rotate(0deg);
  }
  40% {
    transform: scale(1.35) rotate(-12deg);
  }
  70% {
    transform: scale(1.1) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes favJoyGlow {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  40% {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.95);
  }
  100% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.55);
  }
}

/* Classe appliquée au clic */
.fav-toggle.fav-animate {
  animation:
    favJoyPop 0.45s ease-out,
    favJoyGlow 0.9s ease-out;
}

/* Petit glow chaleureux sur la carte quand elle est en favoris */
.licorne-box.favorited {
  box-shadow:
    0 0 10px rgba(255, 223, 120, 0.95),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

/* titre lightbox */
#lightbox-title {
  width: 100%;                 /* prend toute la largeur de la popup */
  margin-top: 20px;
  margin-bottom: 5px;
  padding-left: 17%;
  font-size: 24px;
  color: #c62828;
  font-weight: 700;
  text-align: left;            /* aligné à gauche */
  align-self: flex-start;      /* ne suit plus le centrage du flex parent */
}
.status-box {
  margin: 6px 0 12px;
  margin-left: 0;
  display: inline-block;        
  padding: 8px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7ffe5 0%, #e1f3b8 50%, #f7ffe5 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  border: 1px solid rgba(150,190,80,0.9);
  display: inline-block;         /* taille auto autour du contenu */
  text-align: right;
}

.fav-mode-btn {
  align-self: center;
}


/* Description dans la popup */
#lightbox-desc {
  max-width: 900px;      /* même base que la zone GIF */
  margin: 8px auto 0;    /* centré sous l’image */
  font-size: 15px;
  text-align: center;
  color: #c62828;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;   /* forcer les retours à la ligne */
  word-wrap: break-word; /* coupe si un mot est trop long */
}

#lightbox-desc a {
  color: #2b75ff;
  font-weight: bold;
  text-decoration: underline;
  transition: 0.2s;
}

#lightbox-desc a:hover {
  color: #d94a4a;
  text-shadow: 0 0 6px rgba(255, 80, 80, 0.6);
}

/* ====== FOOTER DOFUS VERT CLEAN ====== */

footer {
  margin-top: 40px;
  background: linear-gradient(180deg, #d5e9b8 0%, #f5ffe9 100%);
  border-top: 2px solid #8bbf3f;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.35);
}

/* panneau central du footer */
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 26px;
  border-radius: 14px;
  background: radial-gradient(circle at top, #f7ffe8 0%, #e0f2c2 60%, #d0e6b0 100%);
  border: 2px solid #8bbf3f;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #405716;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);

  position: relative;
  box-shadow:
    0 -4px 10px rgba(0,0,0,0.25),
    0 0 10px rgba(139,191,63,0.5);
  animation: footerGlow 3s ease-in-out infinite alternate;
}

/* barres lumineuses haut + bas */
.footer-inner::before,
.footer-inner::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #b6e35a, #ffffff);
  opacity: 0.9;
}

.footer-inner::before {
  top: -2px;
}
.footer-inner::after {
  bottom: -2px;
}

/* texte du footer */
.footer-brand {
  font-weight: 700;
}

.footer-name {
  font-style: italic;
}

.footer-sep {
  opacity: 0.6;
}

/* bloc info Ankama */
.footer-legal {
  text-align: center;
  margin-top: 4px;
  padding-bottom: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}

/* message "aucun résultat" */
.no-results {
  display: none; /* caché par défaut */
  margin-top: 10px;
  padding: 6px 24px;
  border-radius: 999px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #ffe0e0 0%, #ffd1d1 50%, #ffe0e0 100%);
  color: #b00000;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.no-results.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* compteur d'émotes */
.emote-counter {
  text-align: right;
  font-size: 14px;
  color: #355012;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7ffe5 0%, #e2f5bf 50%, #f7ffe5 100%);
  display: block;
  box-shadow: 4px 6px 4px rgba(0,0,0,0.12);
  margin: 6px;
}
.page-info {
  margin-top: 2px;
  text-align: right;
  font-size: 13px;
  color: #566b23;
}

.filter-info {
  margin-top: 2px;
  text-align: right;
  font-size: 13px;
  color: #7a4a16;
  white-space: normal;
  line-height: 1.4;
}

.hidden {
  display: none;
}
/* Icône info (toujours visible) */
.legal-icon {
  font-size: 20px;
  padding: 6px;
  border-radius: 50%;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.footer-legal:hover .legal-text {
  opacity: 1;
}
.legal-icon:hover {
  transform: scale(1.25);
  opacity: 1;
}

/* Texte (tooltip) au-dessus de l’icône */
.legal-text {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;

  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;

  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #8bbf3f;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);

  color: #2d3b13;
  font-style: italic;

  opacity: 0;
  pointer-events: none;
}

.lightbox-zoom:hover {
  background: #b6e35a;
  transform: scale(1.95);
}


/* Overlay de zoom au-dessus de tout (devant la lightbox) */
.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;                    /* > 999 de la lightbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-overlay.hidden {
  display: none;
}

/* Fond sombre derrière le GIF zoomé */
.zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* Conteneur scrollable pour le zoom */
.zoom-container {
  position: relative;
  z-index: 1;
  max-width: 1500vw;
  max-height: 1500vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* GIF zoomé x5, posé devant tout */
#zoom-img {
  max-width: 200vw;
  max-height: 200vh;
  width: auto;
  height: auto;
  image-rendering: auto;
  cursor: zoom-out;
  transform: none;          /* IMPORTANT : on enlève le scale(5) */
}

.lightbox-zoom {
  position: absolute;
  top: 26px;
  right: 54px;              /* juste à gauche de la croix */
  border: none;
  background: #f5ffe4;
  border-radius: 999px;
  width: 85px;
  height: 53px;
  font-size: 41px;
  cursor: pointer;
  color: #55751d;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: footerGlow 0.2s, transform 0.1s;
}

.lightbox-zoom:hover {
  background: #b6e35a;
  transform: scale(1.05);
}
/* glow léger, vert */
@keyframes footerGlow {
  0% {
    box-shadow:
      0 -4px 10px rgba(0,0,0,0.25),
      0 0 8px rgba(139,191,63,0.35);
  }
  100% {
    box-shadow:
      0 -6px 16px rgba(0,0,0,0.35),
      0 0 16px rgba(139,191,63,0.7);
  }
}

/* mention légale éventuelle */
.legal-note {
  font-size: 11px;
  margin-top: 6px;
  text-align: center;
  opacity: 0.55;
  font-style: italic;
  color: #2d3b13;
  padding-bottom: 10px;
}

/* ================== AUTO-COMPLÉTION RECHERCHE ================== */
.toolbar-row {
  display: flex;
  width: 100%;
  gap: 20px;
  align-items: flex-start;
  padding: 1%;
}

/* Chaque bloc prend la moitié de la largeur */
.toolbar-stats,
.toolbar-tags {
  flex: 1;
  min-width: 0;
}
.toolbar-group.search-group {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;

  background: #fdfef8;
  border-radius: 12px;
  border: 1px solid #c3d78f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

.search-suggestions.visible {
  display: block;
}

.search-suggestions li {
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  color: #3a421b;
}

.search-suggestions li:hover,
.search-suggestions li.active {
  background: #e4f0c2;
}

/* ================== VOTE PAR CŒUR ================== */

.vote-container {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vote-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.9);
  background: rgba(0, 0, 0, 0.35);
  color: #ffb3c1;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vote-btn:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 3px 7px rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.5);
}

.vote-btn.voted {
  background: radial-gradient(circle at 30% 20%, #ffe3ea 0%, #ff7294 55%, #b3163d 100%);
  color: #fffdf8;
  box-shadow:
    0 0 8px rgba(255, 144, 168, 0.9),
    0 3px 8px rgba(0,0,0,0.6);
}

.vote-btn.cooldown {
  cursor: not-allowed;
  opacity: 0.6;
}

.vote-count {
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  font-size: 12px;
  color: #b02a4a;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Petit tremblement si vote impossible */
@keyframes voteShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.vote-btn.denied {
  animation: voteShake 0.35s;
}
.toolbar-tags-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #4b5b1b;
}
.tag-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #c3d78f;
}

/* Colonnes de tags */
.tag-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* On garde ton style de label bulle */
.tag-checkbox-container label {
  padding: 0px 10px;
  background: #f7ffe2;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.15s;
}

.tag-checkbox-container label:hover {
  background: #d8f6a3;
  transform: scale(1.05);
}

/* Séparateur vertical propre */
.tag-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    rgba(195,215,143,0),
    rgba(195,215,143,0.9),
    rgba(195,215,143,0)
  );
  margin: 2px 4px;
}

.lightbox-vote {
  font-size: 20px;
  background: #fff4d4;
  border: 2px solid #dca75b;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  transition: 0.2s;
  color: red;
  width: 10%;
}
/* ================== HERO (intro catalogue) ================== */

/* ============== HERO COMPACT ============== */

.hero {
  margin: 10px 0 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(248, 255, 233, 0.95);
  border: 1px solid rgba(184, 214, 138, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.hero h1 {
  font-size: 20px;
  color: #4c6b1b;
  margin: 0 0 4px;
}

.hero-subtitle {
  font-size: 13px;
  color: #eb0000;
  margin: 0 0 6px;
}

/* Ligne de petites pastilles explicatives */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}

.hero-pill {
  padding: 3px 4px;
  border-radius: 999px;
  border: 1px solid rgba(155, 204, 98, 0.9);
  background: #fdfef8;
  color: #374217;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  white-space: nowrap;
}

.hero-pill:hover {
  background: #a1d940be;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
/* Favoris : met en avant les étoiles des cartes + icône de la popup */
body.highlight-fav .fav-toggle {
  box-shadow: 0 0 0 2px #ffd35c;
  background-color: #fff9d9;
  transform: scale(1.05);
}

/* Likes : met en avant le bouton coeur dans la lightbox */
body.highlight-like #lightbox-vote {
  box-shadow: 0 0 0 2px #ff90b0;
  background-color: #ffe4ec;
  transform: scale(1.05);
}

/* Zoom : contour lumineux sur les cartes d’émotes */
body.highlight-zoom .licorne-box {
  box-shadow: 0 0 0 2px #84c7ff;
  transform: translateY(-1px);
}

/* Copie nom / lien : surbrillance des boutons de copie */
body.highlight-copy .copy-btn,
body.highlight-copy .copy-btn-ghost {
  box-shadow: 0 0 0 2px #b5a7ff;
  background-color: #f4f0ff;
  transform: scale(1.02);
}

.hero-pill:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.hero-help {
  margin-top: 6px;
  font-size: 12px;
  color: #eb0000;
  line-height: 1.5;
  background: rgba(110, 211, 121, 0.7);;
  border-radius: 10px;
  padding: 6px 8px;
  border: 1px dashed rgba(180,210,120,0.8);
}
@media (max-width: 480px) {
  nav {
    flex-direction: column;  
    align-items: flex-start;     
  }

  /* Empiler verticalement les items du menu */
  nav ul.menu {
    flex-direction: column;
    align-items: flex-start;    
    margin-top: 8px;  
  }

  .nav-clock {
    align-self: flex-start;   
    margin-top: 10px;    
    width: auto;            
  }
}

/* *** 5. Très petits écrans (≤ 320px) – réglages fins *** */
@media (max-width: 320px) {
  .nav-clock-label, .nav-clock-time {
    font-size: 16px;
  }

}
@media (max-width: 700px) {
  .hero {
    padding: 8px 10px;
  }

  .hero h1 {
    font-size: 18px;
  }

  .hero-subtitle {
    font-size: 12px;
  }

  .hero-pill {
    font-size: 11px;
  }
}

.highlight-search input#search-input {
  outline: 3px solid #76b84a;
  background: #f2ffe7;
  border-radius: 6px;
  transition: 0.25s;
}

.highlight-tags #filter-checkboxes {
  outline: 3px solid #76b84a;
  background: #f2ffe7;
  border-radius: 6px;
  padding: 6px;
  transition: 0.25s;
}

/* Petite adaptation mobile */
@media (max-width: 800px) {
  .hero {
    flex-direction: column;
  }

  .hero-right {
    width: 100%;
    justify-content: flex-start;
  }
}

.lightbox-vote:hover {
  background: #ffe9b0;
  transform: scale(1.05);
}
#search-input.is-placeholder {
  color: #aaa;
}
.lightbox-vote.cooldown {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ====== COPIE NOM / CODE + BULLE VERTE ====== */

.copy-toast-container {
  position: relative;
}

.copy-actions,
.lightbox-copy-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.copy-btn {
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #355012;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.copy-btn:hover {
  background: #cce98b;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.copy-btn-ghost {
  border-color: #e0c14a;
  background: linear-gradient(180deg, #fff7d7 0%, #f0cf6a 100%);
}


.emote-title-text {
  flex: 1;
  padding-right: 4px;
}

/* titre popup + boutons */
.lightbox-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 6px;
}

.lightbox-title-row h3 {
  margin: 0;
}
/* ====== BADGES TAGS SUR LES CARTES ====== */




/* Couleurs selon tag */
.emote-tag-kickstarter {
  background: linear-gradient(90deg, #7c4dff, #b388ff);
}

.emote-tag-boutique {
  background: linear-gradient(90deg, #ff9800, #ffc107);
}

.emote-tag-supporter {
  background: linear-gradient(90deg, #e91e63, #ff6090);
}

.emote-tag-event {
  background: linear-gradient(90deg, #03a9f4, #4fc3f7);
}

.emote-tag-pack {
  background: linear-gradient(90deg, #8bc34a, #aed581);
}
.emote-tag-classe {
  background: linear-gradient(90deg, #5c6bc0, #9fa8da);
}

.emote-tag-quete {
  background: linear-gradient(90deg, #795548, #a1887f);
}

.emote-tag-acs {
  background: linear-gradient(90deg, #9c27b0, #ce93d8);
}

.emote-tag-expedition {
  background: linear-gradient(90deg, #009688, #4db6ac);
}

/* bulle verte "copié" */
.copy-toast {
  position: absolute;
  bottom: 103%;             /* au-dessus du titre */
  right: 24%;
  transform: translateY(-0px);
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c2f29a 0%, #7ecf3f 100%);
  color: #1f3407;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* ====== MINI CHANGELOG ====== */

@media (max-width: 1024px) {
  .title-menu { display: none; }
}
@media (max-width: 768px) {
  nav { padding: 6px 12px; }

  nav ul.menu { gap: 10px; }

  .nav-clock { 
    width: auto;             
    padding: 2px 6px;        
  }
  .tag-checkbox-container {
    flex-direction: column;
  }
  .tag-divider {
    display: none;
  }
  .tag-col {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ====== MINI CHANGELOG PLIABLE ====== */
.changelog:hoover {
  max-width: 857px;
}
.changelog {
max-width: 185px;
  margin: 24px auto 8px;
  padding: 6px 16px;                    /* petit quand replié */
  border-radius: 16px;
  background: rgba(245, 253, 235, 0.45);
  border: 1px solid rgba(184, 214, 138, 0.4);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  max-height: 46px;                     /* laisse juste apparaître le titre */
  overflow: hidden;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    max-height 0.35s ease,
    padding 0.25s ease;
}

/* Titre : logo + mot "Changelog" visibles tout le temps */
.changelog h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  color: #536ec5;
}

/* Icône un peu “éteinte” au repos */
.changelog h2 .fa-history {
  opacity: 0.4;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.changelog-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.changelog-modal.hidden {
  display: none;
}

.changelog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.changelog-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  padding: 18px 22px;
  border-radius: 26px;
  background: #fdfef8;
  border: 3px solid #8bbf3f;
  box-shadow: 0 14px 26px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.changelog-panel h2 {
  margin: 0;
  font-size: 22px;
  color: #536ec5;
}

#changelog-list {
  margin: 4px 0 0;
  padding-left: 0;
  list-style: none;
  overflow-y: auto;
}

#changelog-list li {
  margin-bottom: 6px;
  font-size: 14px;
  color: #374217;
}

#changelog-list .chg-date {
  font-weight: 700;
  margin-right: 6px;
  color: #c62828;
}

/* bouton fermeture */
.changelog-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #f5ffe4;
  color: #55751d;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.2s, transform 0.1s;
}

.changelog-close:hover {
  background: #b6e35a;
  transform: scale(1.05);
}

/* Liste cachée par défaut */
.changelog-list {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
  font-size: 14px;
  color: #374217;
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    max-height 0.35s ease;
}

.changelog-list li {
  margin-bottom: 4px;
}

/* ————— ÉTAT AU SURVOL : le bloc se déplie ————— */

.changelog:hover {
  max-height: 220px;                    /* assez pour 3–4 lignes */
  background: rgba(245, 253, 235, 0.96);
  border-color: #b8d68a;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.changelog:hover h2 .fa-history {
  opacity: 1;
  transform: rotate(-15deg);
}

.changelog:hover .changelog-list {
  opacity: 1;
  transform: translateY(0);
  max-height: 500px;
}


.copy-toast.visible {
  opacity: 1;
  transform: translateY(-10px);
}
.lightbox-content .copy-toast {
  top: -32px;
  right: 16%;
  left: auto;
  bottom: auto;
  transform: translateY(0);
}