/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --couleur-accent: #e8a8d8;
  --couleur-accent-vif: #f2c4e8;
  --couleur-lavande: #b39ddb;
  --fond-haut: #3a2a52;
  --fond-milieu: #5a3d68;
  --fond-bas: #7a5580;
  --couleur-carte: rgba(255, 255, 255, 0.07);
  --couleur-bordure-carte: rgba(244, 198, 224, 0.28);
  --couleur-texte: #fbf3fa;
  --couleur-texte-discret: #d8c4e0;
  --hauteur-entete: 68px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--couleur-texte);
  font-family: 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(244, 198, 224, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 20%, rgba(179, 157, 219, 0.18), transparent 60%),
    linear-gradient(180deg, var(--fond-haut) 0%, var(--fond-milieu) 55%, var(--fond-bas) 100%);
  background-attachment: fixed;
  position: relative;
}

a {
  color: inherit;
}

.conteneur {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 32px;
  /* Espace réservé en bas pour que la barre flottante (voir .barre-flottante) ne masque jamais le
     dernier élément d'une page quand elle apparaît — présent en permanence, pas juste quand elle affiche. */
  padding-bottom: 110px;
  position: relative;
  z-index: 1;
}

.page-centree {
  min-height: calc(100vh - var(--hauteur-entete));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Glassmorphism --- */
.carte {
  background: var(--couleur-carte);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--couleur-bordure-carte);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 8px 32px rgba(58, 20, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--couleur-accent-vif), var(--couleur-accent));
  color: #3a1a3d;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 4px 18px rgba(244, 198, 224, 0.35);
}

.bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(244, 198, 224, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  filter: brightness(1.05);
}

.bouton:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(244, 198, 224, 0.4);
  filter: brightness(0.97);
}

.bouton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.bouton.secondaire {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure-carte);
  box-shadow: 0 2px 10px rgba(20, 8, 30, 0.2);
}

.bouton.secondaire:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--couleur-accent);
  box-shadow: 0 6px 20px rgba(244, 198, 224, 0.22);
  transform: translateY(-2px);
}

.bouton.secondaire:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.09);
}

/* --- Barre flottante Sauvegarder/Annuler (remplace le bouton "Enregistrer" classique sur tout le
   dashboard) : apparaît en bas de l'écran dès qu'une page a des changements non enregistrés. --- */
.barre-flottante {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px;
  background: var(--couleur-carte);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--couleur-bordure-carte);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(20, 8, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.barre-flottante-texte {
  font-size: 14px;
  font-weight: 600;
  color: var(--couleur-texte);
}

.barre-flottante-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .barre-flottante {
    left: 16px;
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .barre-flottante-actions {
    justify-content: flex-end;
  }
}

.champ {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--couleur-bordure-carte);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--couleur-texte);
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(20, 8, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  color-scheme: dark;
}

.champ:hover {
  border-color: rgba(244, 198, 224, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.champ:focus {
  outline: none;
  border-color: var(--couleur-accent);
  background: rgba(255, 255, 255, 0.095);
  box-shadow: 0 0 0 3px rgba(232, 168, 216, 0.16), 0 4px 16px rgba(232, 168, 216, 0.22);
}

textarea.champ {
  resize: vertical;
}

/* Menu déroulant natif : on masque la flèche par défaut du navigateur pour la remplacer par la nôtre
   (rose, cohérente avec le reste), sinon le contrôle a un aspect "HTML brut" qui détonne. */
select.champ {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8a8d8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Le popup natif d'un <select> ignore souvent le fond translucide du parent : on force un fond
   sombre opaque sur les <option> pour que le texte clair reste lisible (sinon texte clair sur
   fond blanc par défaut du navigateur, illisible). */
select.champ option {
  background: #2a1b3d;
  color: var(--couleur-texte);
}

/* Cases à cocher : remplacées par un vrai interrupteur (toggle) au lieu de la case native du
   navigateur, pour toutes les cases à cocher du site sans avoir à toucher chaque page. */
input[type='checkbox'] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  min-width: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--couleur-bordure-carte);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: inset 0 1px 3px rgba(20, 8, 30, 0.3);
  transition: background 0.25s ease, border-color 0.25s ease;
}

input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 8, 30, 0.4);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input[type='checkbox']:hover {
  border-color: var(--couleur-accent);
}

input[type='checkbox']:checked {
  background: linear-gradient(135deg, var(--couleur-accent-vif), var(--couleur-accent));
  border-color: var(--couleur-accent);
  box-shadow: 0 0 12px rgba(232, 168, 216, 0.45);
}

input[type='checkbox']:checked::before {
  transform: translateX(18px);
}

label {
  display: block;
  font-size: 13px;
  color: var(--couleur-texte-discret);
  margin-bottom: 6px;
  margin-top: 18px;
}

.serveurs-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.serveur-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid var(--couleur-bordure-carte);
  transition: background 0.2s ease, transform 0.2s ease;
}

.serveur-item:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

/* --- En-tête / navigation --- */
.entete {
  height: var(--hauteur-entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(42, 27, 61, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 20;
}

/* --- Barre de serveurs (à droite, façon DraftBot) : colorée = bot présent, grise = pas encore ajouté --- */
.barre-serveurs {
  position: -webkit-sticky;
  position: sticky;
  top: var(--hauteur-entete);
  height: calc(100vh - var(--hauteur-entete));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px;
  flex-shrink: 0;
}

.serveur-pastille {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure-carte);
  font-size: 13px;
  font-weight: 700;
  color: var(--couleur-texte);
  transition: border-radius 0.2s ease, transform 0.15s ease, opacity 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.serveur-pastille img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serveur-pastille:hover {
  border-radius: 16px;
  transform: scale(1.06);
}

.serveur-pastille-actif {
  border-radius: 16px;
  border-color: var(--couleur-accent);
}

.serveur-pastille-inactif {
  filter: grayscale(1);
  opacity: 0.45;
}

.serveur-pastille-inactif:hover {
  filter: grayscale(0.5);
  opacity: 0.85;
}

.entete-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  color: var(--couleur-texte);
}

.entete-logo-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.entete-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.menu-deroulant {
  position: relative;
}

.menu-deroulant-bouton {
  background: none;
  border: none;
  color: var(--couleur-texte);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}

.menu-deroulant-bouton:hover,
.menu-deroulant.ouvert .menu-deroulant-bouton {
  background: rgba(255, 255, 255, 0.08);
}

.menu-deroulant-contenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: rgba(48, 32, 66, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--couleur-bordure-carte);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(20, 8, 30, 0.45);
  display: none;
  flex-direction: column;
}

.menu-deroulant.ouvert .menu-deroulant-contenu {
  display: flex;
}

.menu-deroulant-lien {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--couleur-texte);
  font-size: 13.5px;
  transition: background 0.15s ease;
}

.menu-deroulant-lien:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- Dashboard : sidebar --- */
.sidebar-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(244, 198, 224, 0.18);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lien-sidebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--couleur-texte);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lien-sidebar:hover {
  background: rgba(255, 255, 255, 0.06);
}

.lien-sidebar:hover .sidebar-icone {
  background: rgba(244, 198, 224, 0.22);
  border-color: var(--couleur-accent);
  transform: scale(1.08);
}

.lien-sidebar-actif {
  background: rgba(244, 198, 224, 0.14);
  border-color: var(--couleur-accent);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(244, 198, 224, 0.18);
}

.lien-sidebar-actif .sidebar-icone {
  background: linear-gradient(135deg, var(--couleur-accent-vif), var(--couleur-accent));
  border-color: transparent;
}

.mascotte-sidebar {
  display: block;
  width: 72px;
  margin: 20px auto 4px;
  opacity: 0.55;
  filter: drop-shadow(0 6px 14px rgba(222, 149, 237, 0.25));
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* --- États vides --- */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  border-radius: 16px;
  border: 1px dashed var(--couleur-bordure-carte);
  background: rgba(255, 255, 255, 0.03);
}

.etat-vide img {
  width: 68px;
  opacity: 0.75;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 14px rgba(222, 149, 237, 0.25));
}

.etat-vide p.etat-vide-titre {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--couleur-texte);
}

.etat-vide p.etat-vide-texte {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--couleur-texte-discret);
  max-width: 260px;
}

/* --- Sélecteur de rôle(s) réutilisable (pastilles + couleur réelle Discord) --- */
.pastille-role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--couleur-bordure-carte);
  font-size: 12.5px;
  line-height: 1;
}

.pastille-role-couleur {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.pastille-role-retirer {
  background: none;
  border: none;
  color: var(--couleur-texte-discret);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  transition: color 0.15s ease;
}

.pastille-role-retirer:hover {
  color: #ED4245;
}

.pastille-role-ajouter {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed var(--couleur-bordure-carte);
  background: rgba(255, 255, 255, 0.04);
  color: var(--couleur-accent-vif);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pastille-role-ajouter:hover {
  background: rgba(244, 198, 224, 0.14);
  border-color: var(--couleur-accent);
  transform: scale(1.06);
}

.pastille-role-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 220px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(48, 32, 66, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--couleur-bordure-carte);
  box-shadow: 0 12px 32px rgba(20, 8, 30, 0.45);
}

.pastille-role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--couleur-texte);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pastille-role-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- Builder de messages : blocs toggleables (Contenu/Image/Embed/Boutons/Menu) --- */
.bloc-constructeur {
  border: 1px solid var(--couleur-bordure-carte);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 10px;
  transition: border-color 0.2s ease;
}

.bloc-constructeur.actif {
  border-color: rgba(244, 198, 224, 0.4);
}

.bloc-constructeur-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 13px;
  transition: background 0.15s ease;
}

.bloc-constructeur-entete:hover {
  background: rgba(255, 255, 255, 0.04);
}

.bloc-constructeur-titre {
  flex: 1 1;
  font-size: 13.5px;
  font-weight: 600;
}

.bloc-constructeur-chevron {
  color: var(--couleur-texte-discret);
  font-size: 11px;
  transition: transform 0.2s ease;
}

.bloc-constructeur-contenu {
  padding: 2px 14px 16px;
  border-top: 1px solid var(--couleur-bordure-carte);
}

.sous-carte {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--couleur-bordure-carte);
  margin-bottom: 8px;
  position: relative;
}

/* --- Décor : pétales et étoiles --- */
.petales-conteneur {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.petale {
  position: absolute;
  top: -30px;
  animation-name: chute-petale;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes chute-petale {
  0% {
    transform: translate(0, -5vh) rotate(0deg);
  }
  100% {
    transform: translate(var(--derive), 105vh) rotate(var(--rotation));
  }
}

.etoiles-conteneur {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.etoile {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation-name: scintille;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes scintille {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.9; }
}