/* =========================================
   Drastal Online - correctifs structurels ciblés
   Fichier chargé après le thème principal.
   Objectif : corriger les alignements et espacements
   sans modifier le reste du rendu.
   ========================================= */

/* =========================================
   1) Topbar : remplacement visuel du logo
   ========================================= */
.following.bar .item.brand,
.following.bar .brand.item,
.following.bar .logo,
.following.bar a[href="/"] {
  position: relative;
}

.following.bar .item.brand img,
.following.bar .brand.item img,
.following.bar .logo img,
.following.bar img.logo,
.ui.menu .item.brand img,
.ui.menu .brand.item img {
  content: url("/assets/img/logo.png") !important;
  width: auto !important;
  height: 38px !important;
  max-height: 38px !important;
  object-fit: contain !important;
  margin-right: 6px !important;
  filter: drop-shadow(0 0 8px rgba(255, 210, 127, 0.24));
}

.following.bar .item.brand svg,
.following.bar .brand.item svg,
.following.bar .navbar svg.svg.gitea,
.following.bar .navbar .svg.gitea,
.following.bar .logo svg {
  color: #d9ae68 !important;
  fill: currentColor !important;
  filter: drop-shadow(0 0 6px rgba(255, 212, 142, 0.2));
}

/* =========================================
   2) Surfaces flottantes : fond opaque propre
   ========================================= */
.ui.menu .menu,
.ui.dropdown .menu,
.ui.popup,
.ui.modal,
.ui.calendar.popup,
.ui.selection.dropdown,
.ui.selection.dropdown .menu,
.ui.selection.active.dropdown {
  backdrop-filter: none !important;
}

/* =========================================
   3) Dépôts / fichiers : séparateurs légers
   ========================================= */
.repository .repo-header,
.repository .repo-title,
.repository .repo-buttons,
.repository .repo-description,
.repository .repo-file-list-top,
.repository .repo-file-list,
.repository .file-header,
.repository .file-body {
  position: relative;
}

.repository .repo-file-list-top::after,
.repository .file-header::after,
.repository .ui.top.attached.segment::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 212, 142, 0.35),
    transparent
  );
  pointer-events: none;
}

.ui.table td + td,
table td + td {
  box-shadow: inset 1px 0 0 rgba(184, 138, 84, 0.08);
}

/* =========================================
   4) Pages d'authentification (Dimensions)
   Centre et dimensionne proprement les formulaires.
   ========================================= */
.user.auth .ui.middle.very.relaxed.page.grid,
.page-content .ui.middle.very.relaxed.page.grid {
  align-items: start !important;
}

.user.auth .ui.container,
.user.auth .ui.grid,
.user.auth .ui.middle.very.relaxed.page.grid,
.user.auth .column {
  width: 100% !important;
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.user.auth .ui.top.attached.segment,
.user.auth .ui.attached.segment,
.user.auth .ui.bottom.attached.segment,
.user.auth .ui.message,
.user.auth .ui.form,
.user.auth .ui.form .message {
  width: 100% !important;
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 16px 20px !important;
}

.user.auth .ui.form .field {
  margin-bottom: 14px !important;
}

.user.auth .ui.form .field:last-child {
  margin-bottom: 0 !important;
}

.user.auth .ui.checkbox label,
.user.auth .ui.checkbox + label,
.user.auth .ui.form label {
  color: var(--drastal-text) !important;
}

.user.auth.password-reset .ui.message,
.user.auth.reset-password .ui.message,
.user.auth.signin .ui.message,
.user.auth.signup .ui.message {
  max-width: 660px !important;
}

/* =========================================
   4-bis) DESTRUCTION DU SOUDAGE SEMANTIC UI
   S'applique à TOUTES les pages mais UNIQUEMENT
   dans .page-content pour protéger la navbar.
   Force les marges, bordures et arrondis.
   ========================================= */
.page-content .ui.top.attached.segment,
.page-content .ui.top.attached.header {
  margin-bottom: 10px !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-bottom: 1px solid rgba(184, 138, 84, 0.2) !important;
}

.page-content .ui.top.attached.segment + .ui.attached.segment,
.page-content .ui.top.attached.segment + .ui.bottom.attached.segment,
.page-content .ui.top.attached.segment + .ui.message,
.page-content .ui.top.attached.header + .ui.attached.segment,
.page-content .ui.top.attached.header + .ui.bottom.attached.segment,
.page-content .ui.top.attached.header + .ui.message,
.page-content .ui.attached.segment + .ui.attached.segment,
.page-content .ui.attached.segment + .ui.bottom.attached.segment {
  margin-top: 3px !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  border-top: 1px solid rgba(184, 138, 84, 0.2) !important;
}

/* =========================================
   5) Profil utilisateur / heatmap / dashboard
   ========================================= */
.user.profile .ui.segment,
.dashboard .ui.segment,
.organization .ui.segment {
  padding: 12px 14px !important;
}

.user.profile .ui.segment > .ui.grid,
.dashboard .ui.segment > .ui.grid,
.organization .ui.segment > .ui.grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.user.profile .ui.segment .column,
.dashboard .ui.segment .column,
.organization .ui.segment .column {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.user.profile .ui.stackable.grid > .column > .ui.segment,
.user.profile .ui.tab.segment,
.user.profile .activity-feed,
.user.profile .user-profile-activity,
.user.profile .user-profile-repositories,
.user.profile .ui.grid > .ten.wide.column > .ui.segment,
.user.profile .ui.grid > .eleven.wide.column > .ui.segment,
.user.profile .ui.grid > .twelve.wide.column > .ui.segment {
  padding: 10px 12px !important;
}

.user.profile .ui.grid,
.user.profile .ui.relaxed.grid,
.user.profile .ui.stackable.grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.user.profile .activity-meta,
.user.profile .contribution-graph,
.user.profile .contributions-calendar,
.user.profile .user-profile-contributions,
.user.profile #user-heatmap,
.user.profile .js-heatmap {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================
   5-bis) Espacements ciblés du contenu interne
   ========================================= */
.user.profile .page-content,
.dashboard .page-content,
.organization .page-content,
.repository .page-content,
.explore .page-content,
.admin .page-content,
.issue .page-content,
.notification .page-content,
.feed .page-content {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.user.profile .ui.stackable.grid,
.dashboard .ui.stackable.grid,
.organization .ui.stackable.grid,
.repository .ui.stackable.grid,
.explore .ui.stackable.grid,
.admin .ui.stackable.grid,
.issue .ui.stackable.grid,
.notification .ui.stackable.grid,
.feed .ui.stackable.grid {
  margin-top: 18px !important;
  margin-bottom: 24px !important;
}

/* =========================================
   6) Boutons : rendu propre sans soulignement
   ========================================= */
.ui.button,
.btn,
a.ui.button,
button {
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s ease !important;
}

.ui.button:hover,
.btn:hover,
a.ui.button:hover,
button:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

.ui.button:active,
.btn:active,
a.ui.button:active,
button:active {
  transform: translateY(0);
}

/* =========================================
   7) Homepage publique
   ========================================= */
.page-content.home {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.drastal-home-page {
  min-height: calc(100vh - 150px) !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 90px 20px 120px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      circle at top center,
      rgba(157, 71, 46, 0.18) 0%,
      rgba(157, 71, 46, 0) 32%
    ),
    radial-gradient(
      circle at 20% 0%,
      rgba(255, 210, 127, 0.08) 0%,
      rgba(255, 210, 127, 0) 26%
    ),
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 210, 127, 0.05) 0%,
      rgba(255, 210, 127, 0) 38%
    ),
    linear-gradient(
      180deg,
      rgba(20, 13, 9, 0.68) 0%,
      rgba(12, 8, 6, 0.84) 100%
    ),
    url("/assets/img/background.png") center/cover no-repeat !important;
}

.drastal-home-page .drastal-overlay {
  background: rgba(8, 4, 2, 0.42) !important;
  backdrop-filter: none !important;
}

.drastal-home-page #particles {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.drastal-home-page .drastal-content {
  position: relative !important;
  z-index: 2 !important;
  top: auto !important;
  transform: none !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding-top: 24px !important;
  text-align: center !important;
}

.drastal-home-page .drastal-logo {
  display: block !important;
  width: min(34vw, 360px) !important;
  max-width: 360px !important;
  min-width: 120px !important;
  margin: 0 auto 24px !important;
  filter: drop-shadow(0 0 18px rgba(255, 212, 142, 0.2)) !important;
}

.drastal-home-page .drastal-content h1 {
  display: none !important;
}

.drastal-home-page .drastal-content p {
  margin: 0 0 32px !important;
}

.drastal-home-page .drastal-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.drastal-home-page .drastal-buttons .btn {
  margin: 0 !important;
  min-width: 190px !important;
}

.following.bar,
.page-footer,
footer,
.page-footer .container,
footer .container {
  position: relative !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* =========================================
   8) Ajustements mobile
   ========================================= */
@media (max-width: 768px) {
  .user.auth .ui.container,
  .user.auth .ui.grid,
  .user.auth .ui.middle.very.relaxed.page.grid,
  .user.auth .column,
  .user.auth .ui.top.attached.segment,
  .user.auth .ui.attached.segment,
  .user.auth .ui.bottom.attached.segment,
  .user.auth .ui.message,
  .user.auth .ui.form,
  .user.auth .ui.form .message {
    max-width: calc(100% - 20px) !important;
  }

  .user.auth .page-content,
  .user.profile .page-content,
  .dashboard .page-content,
  .organization .page-content,
  .repository .page-content,
  .explore .page-content,
  .admin .page-content,
  .issue .page-content,
  .notification .page-content,
  .feed .page-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .user.auth .ui.middle.very.relaxed.page.grid,
  .user.profile .ui.stackable.grid,
  .dashboard .ui.stackable.grid,
  .organization .ui.stackable.grid,
  .repository .ui.stackable.grid,
  .explore .ui.stackable.grid,
  .admin .ui.stackable.grid,
  .issue .ui.stackable.grid,
  .notification .ui.stackable.grid,
  .feed .ui.stackable.grid {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
  }

  .user.auth .ui.top.attached.segment,
  .user.auth .ui.attached.segment,
  .user.auth .ui.bottom.attached.segment,
  .user.auth .ui.message,
  .user.auth .ui.form,
  .user.auth .ui.form .message {
    padding: 14px 16px !important;
  }

  .user.profile .ui.segment,
  .dashboard .ui.segment,
  .organization .ui.segment {
    padding: 10px 12px !important;
  }

  .user.profile .ui.segment .column,
  .dashboard .ui.segment .column,
  .organization .ui.segment .column {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* =========================================
   9) Ajustements Panneau Dépôts (Mise à jour)
   Décolle la barre de recherche et sépare la liste.
   ========================================= */
/* Barre de recherche des dépôts */
.dashboard .ui.segment .repo-search,
.dashboard .ui.segment .ui.secondary.menu,
.dashboard .ui.segment form {
  margin-top: 8px !important;
  margin-bottom: 12px !important; /* Force l'espace avec la liste en dessous */
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* Conteneur de la liste des dépôts */
.dashboard .ui.segment .repo-list,
.dashboard .ui.segment .ui.list {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* Items de la liste */
.dashboard .ui.segment .repo-list .item,
.dashboard .ui.segment .ui.list .item,
.dashboard .ui.segment .ui.menu .item {
  margin-bottom: 5px !important;
}

/* =========================================
   10) Correction Images 1 à 4 : Marges Globales
   Empêche le cadre principal de coller aux bords 
   du navigateur (Gauche, Droite, Bas) et à la Navbar.
   ========================================= */
.page-content {
  margin-left: 10px !important; /* Image 1 : décolle de la gauche */
  margin-right: 10px !important; /* Image 2 : décolle de la droite */
  margin-bottom: 10px !important; /* Image 3 : décolle du bas */
  margin-top: 10px !important; /* Image 4 : décolle de la navbar */
  padding-bottom: 10px !important; /* Un petit padding aussi */
}

/* =========================================
   11) AMÉLIORATION VISUELLE PREMIUM (SAFE)
   ========================================= */

/* ===== CARDS / SEGMENTS ===== */
.page-content .ui.segment,
.page-content .ui.message,
.page-content .ui.card {
  background: linear-gradient(
    145deg,
    rgba(45, 28, 18, 0.85),
    rgba(25, 15, 10, 0.95)
  ) !important;
  border: 1px solid rgba(184, 138, 84, 0.25) !important;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(255, 210, 127, 0.08) inset !important;
  backdrop-filter: none !important;
}

/* ===== HEADER DES BLOCS ===== */
.page-content .ui.top.attached.segment,
.page-content .ui.top.attached.header {
  background: linear-gradient(
    90deg,
    rgba(70, 40, 20, 0.85),
    rgba(40, 25, 15, 0.85)
  ) !important;
  border: 1px solid rgba(184, 138, 84, 0.35) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ===== EFFET HOVER LISTES ===== */
.ui.list .item:hover,
.repo-list .item:hover {
  background: rgba(255, 210, 127, 0.04) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

/* ===== INPUTS ===== */
.ui.input input,
.ui.form input {
  background: rgba(20, 12, 8, 0.9) !important;
  border: 1px solid rgba(184, 138, 84, 0.35) !important;
  color: #e8d3a8 !important;
}

.ui.input input:focus,
.ui.form input:focus {
  border-color: rgba(255, 210, 127, 0.7) !important;
  box-shadow: 0 0 8px rgba(255, 210, 127, 0.25) !important;
}

/* ===== BOUTONS PREMIUM ===== */
.ui.button,
.btn {
  background: linear-gradient(180deg, #c89b5e, #8b6232) !important;
  border: 1px solid rgba(255, 210, 127, 0.4) !important;
  color: #1a120b !important;
  font-weight: 500 !important;
}

.ui.button:hover,
.btn:hover {
  background: linear-gradient(180deg, #e0b673, #a6783f) !important;
  box-shadow: 0 0 10px rgba(255, 210, 127, 0.35) !important;
}

/* ===== PETITS DÉTAILS (TEXTES / CONTRASTE) ===== */
.page-content {
  color: #e6d2a5 !important;
}

.page-content .meta,
.page-content .description {
  color: rgba(230, 210, 165, 0.75) !important;
}

/* ===== BADGES ===== */
.ui.label,
.ui.tag.label {
  background: rgba(184, 138, 84, 0.2) !important;
  border: 1px solid rgba(184, 138, 84, 0.4) !important;
  color: #f1d7a3 !important;
}

/* ===== SCROLLBAR (bonus stylé) ===== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #120b06;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#c89b5e, #8b6232);
  border-radius: 8px;
}

/* =========================================
   12) UI MMORPG PREMIUM (SAFE UPGRADE)
   ========================================= */

/* ===== GLOW DORÉ GLOBAL (léger, pas agressif) ===== */
.page-content .ui.segment,
.page-content .ui.message {
  position: relative;
  overflow: hidden;
}

.page-content .ui.segment::before,
.page-content .ui.message::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: radial-gradient(
    circle at 20% 10%,
    rgba(255, 210, 127, 0.08),
    transparent 60%
  );
}

/* ===== EFFET LUMIÈRE SUBTIL AU HOVER ===== */
.page-content .ui.segment:hover {
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(255, 210, 127, 0.15) inset !important;
  transition: all 0.2s ease;
}

/* ===== TITRES PLUS "JEU" ===== */
.page-content .ui.header {
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(255, 210, 127, 0.15);
}

/* ===== BARRE STYLE RPG (séparateur stylé) ===== */
.page-content hr,
.page-content .divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 127, 0.5),
    transparent
  );
}

/* ===== LISTES TYPE "MENU RPG" ===== */
.ui.list .item {
  border-radius: 8px;
  padding: 6px 10px !important;
}

.ui.list .item:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 210, 127, 0.08),
    rgba(255, 210, 127, 0.02)
  ) !important;
  transform: translateX(2px);
}

/* ===== INPUTS STYLE DARK RPG ===== */
.ui.input input,
.ui.form input {
  border-radius: 10px !important;
  transition: all 0.2s ease;
}

.ui.input input:focus,
.ui.form input:focus {
  transform: scale(1.01);
}

/* ===== BOUTONS STYLE JEU ===== */
.ui.button,
.btn {
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
}

/* effet lumière bouton */
.ui.button::after,
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 210, 127, 0.35),
    transparent
  );
  transition: all 0.4s ease;
}

.ui.button:hover::after,
.btn:hover::after {
  left: 120%;
}

/* ===== PANEL STYLE MMORPG ===== */
.page-content .ui.segment {
  border-radius: 14px !important;
}

/* ===== ANIMATION LÉGÈRE D'APPARITION ===== */
.page-content .ui.segment {
  animation: fadeInDrastal 0.4s ease;
}

@keyframes fadeInDrastal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== BADGES STYLE RPG ===== */
.ui.label {
  border-radius: 999px !important;
  padding: 4px 10px !important;
}

/* ===== SCROLLBAR AMÉLIORÉE ===== */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#e0b673, #a6783f);
}

/* =========================================
   13) FORMULAIRES DARK FANTASY (FIX FINAL)
   Corrige inputs blancs + lisibilité + style RPG
   ========================================= */

/* ===== INPUTS (fond sombre + texte lisible) ===== */
.ui.form input,
.ui.input input,
.ui.form textarea {
  background: linear-gradient(180deg, #1a120b, #120b06) !important;
  border: 1px solid rgba(184, 138, 84, 0.4) !important;
  color: #f1d7a3 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* ===== PLACEHOLDER ===== */
.ui.form input::placeholder,
.ui.input input::placeholder,
textarea::placeholder {
  color: rgba(241, 215, 163, 0.4) !important;
}

/* ===== FOCUS ===== */
.ui.form input:focus,
.ui.input input:focus,
.ui.form textarea:focus {
  border-color: rgba(255, 210, 127, 0.8) !important;
  box-shadow:
    0 0 0 1px rgba(255, 210, 127, 0.3),
    0 0 10px rgba(255, 210, 127, 0.25) !important;
  background: linear-gradient(180deg, #1f140c, #140c07) !important;
  color: #fff3d1 !important;
}

/* ===== TEXTE SAISI ===== */
.ui.form input,
.ui.input input {
  font-weight: 500;
}

/* ===== LABELS ===== */
.ui.form label {
  color: #e6c88f !important;
  font-weight: 500;
}

/* ===== CHECKBOX ===== */
.ui.checkbox label {
  color: #e6c88f !important;
}

/* ===== INPUT DISABLED ===== */
.ui.form input:disabled {
  opacity: 0.6;
  background: #120b06 !important;
}

/* ===== ERREURS ===== */
.ui.form .field.error input {
  border-color: #c0392b !important;
  box-shadow: 0 0 6px rgba(192, 57, 43, 0.4) !important;
}

/* ===== MESSAGE (genre "mot de passe oublié") ===== */
.ui.message {
  background: linear-gradient(
    180deg,
    rgba(35, 20, 12, 0.95),
    rgba(20, 10, 6, 0.95)
  ) !important;
  border: 1px solid rgba(184, 138, 84, 0.3) !important;
  color: #f1d7a3 !important;
}

/* =========================================
   FIX HARD OVERRIDE INPUTS (GITEA / SEMANTIC UI)
   ========================================= */

/* Force TOUS les inputs Gitea */
input,
textarea,
select {
  background: #140c07 !important;
  color: #f1d7a3 !important;
  border: 1px solid rgba(184, 138, 84, 0.5) !important;
}

/* Cas spécifiques Semantic UI */
.ui.input input,
.ui.form input,
.ui.form textarea {
  background: #140c07 !important;
  color: #f1d7a3 !important;
}

/* Autofill Chrome (TRÈS IMPORTANT sinon blanc revient) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1d7a3 !important;
  -webkit-box-shadow: 0 0 0px 1000px #140c07 inset !important;
  box-shadow: 0 0 0px 1000px #140c07 inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Placeholder */
input::placeholder {
  color: rgba(241, 215, 163, 0.4) !important;
}

/* Focus */
input:focus,
textarea:focus {
  border-color: #ffd27f !important;
  box-shadow: 0 0 8px rgba(255, 210, 127, 0.4) !important;
}

/* =========================================
   14) FORM RPG+ (MMORPG UI)
   Inputs avec icônes + glow + style jeu
   ========================================= */

/* =========================================
   FIX ICONES INPUT (méthode fiable)
   ========================================= */

/* wrapper */
.ui.form .field {
  position: relative;
}

/* espace pour icône */
.ui.form input {
  padding-left: 40px !important;
}

/* ===== ICÔNE USER ===== */
.ui.form .field:has(input[type="text"])::before,
.ui.form .field:has(input[name="user_name"])::before {
  content: "👤";
  position: absolute;
  left: 12px;
  top: 65%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.7;
  pointer-events: none;
}

/* ===== ICÔNE PASSWORD ===== */
.ui.form .field:has(input[type="password"])::before {
  content: "🔒";
  position: absolute;
  left: 12px;
  top: 65%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.7;
  pointer-events: none;
}

/* ===== GLOW ANIMÉ AU FOCUS ===== */
.ui.form input:focus {
  animation: glowInput 1.2s ease-in-out infinite alternate;
}

@keyframes glowInput {
  from {
    box-shadow:
      0 0 4px rgba(255, 210, 127, 0.2),
      0 0 8px rgba(255, 210, 127, 0.2);
  }
  to {
    box-shadow:
      0 0 8px rgba(255, 210, 127, 0.5),
      0 0 14px rgba(255, 210, 127, 0.4);
  }
}

/* ===== HOVER INPUT ===== */
.ui.form input:hover {
  border-color: rgba(255, 210, 127, 0.6) !important;
}

/* ===== CHECKBOX STYLE RPG ===== */
.ui.checkbox input:checked ~ label::before {
  background: linear-gradient(180deg, #c89b5e, #8b6232) !important;
  border-color: rgba(255, 210, 127, 0.6) !important;
}

/* ===== BOUTON CONNEXION UPGRADE ===== */
.ui.button,
.btn {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(255, 210, 127, 0.15) inset !important;
}

/* ===== HOVER BUTTON MAGIC ===== */
.ui.button:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(255, 210, 127, 0.35) inset !important;
}

/* =========================================
   15) CHECKBOX CLEAN (NATIVE + FANTASY)
   Garde le rendu natif + couleur personnalisée
   ========================================= */

/* Checkbox native (PAS custom cassée) */
.ui.checkbox input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;

  transform: scale(1.1); /* léger agrandissement propre */
  accent-color: #c89b5e; /* couleur dorée */

  cursor: pointer;
}

/* Alignement propre */
.ui.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Texte */
.ui.checkbox label {
  color: #e6c88f !important;
  cursor: pointer;
}

/* Hover léger */
.ui.checkbox input[type="checkbox"]:hover {
  filter: brightness(1.1);
}