:root {
    /* COULEURS OFFICIELLES */
    --ut-brown: #3f2a22;  /* Texte (Confiance/Clarté) */
    --ut-orange: #F8931F; /* Interaction (Énergie) */
    --ut-ivory: #Fefae0;  /* Fond bouton (Équilibre) */
    --ut-beige: #ffe6bc;

    --ut-red: #ef4444;
    --ut-brown-light: #A56F59;
    --ut-brown-dark: #2D1F19;
    --ut-green: #10B981;
    --ut-red: red;
    --ut-red-50: #FF6565;
    --ut-gray-dark: #333333;
    --ut-gray-text: #A3A3A3;
    --ut-gray-fond: #E5E5E5;
    --ut-gray: #3d4750;
    /* Version RGB de l'orange pour gérer la transparence de la lueur */
    --ut-orange-rgb: 248, 147, 31;
    --bg-pos-x: 100%;
}

/* --- UT Colors : Texte --- */
.text-ut-brown { color: #3f2a22; }
.text-ut-orange { color: #F8931F; }
.text-ut-ivory { color: #Fefae0; }
.text-ut-beige { color: #Ffe6bc; }
.text-ut-gray { color: #3d4750; }
/* --- UT Colors : Fonds --- */
.bg-ut-brown { background-color: #3f2a22; }
.bg-ut-orange { background-color: #F8931F; }
.bg-ut-ivory { background-color: #Fefae0; }
.bg-ut-beige { background-color: #Ffe6bc; }
.bg-ut-gray { background-color: #3d4750; }

/* --- UT Colors : Bordures --- */
.border-ut-brown { border-color: #3f2a22; }
.border-ut-orange { border-color: #F8931F; }
.border-ut-ivory { border-color: #Fefae0; }
.border-ut-beige { border-color: #Ffe6bc; }
.border-ut-gray { border-color: #3d4750; }

/* --- Hover texte --- */
.hover\:text-ut-brown:hover { color: #3f2a22; }
.hover\:text-ut-orange:hover { color: #F8931F; }
.hover\:text-ut-ivory:hover { color: #Fefae0; }
.hover\:text-ut-beige:hover { color: #Ffe6bc; }
.hover\:text-ut-gray:hover { color: #3d4750; }

/* --- Hover fond --- */
.hover\:bg-ut-brown:hover { background-color: #3f2a22; }
.hover\:bg-ut-orange:hover { background-color: #F8931F; }
.hover\:bg-ut-ivory:hover { background-color: #Fefae0; }
.hover\:bg-ut-beige:hover { background-color: #Ffe6bc; }
.hover\:bg-ut-gray:hover { background-color: #3d4750; }

/* --- Hover bordure --- */
.hover\:border-ut-brown:hover { border-color: #3f2a22; }
.hover\:border-ut-orange:hover { border-color: #F8931F; }
.hover\:border-ut-ivory:hover { border-color: #Fefae0; }
.hover\:border-ut-beige:hover { border-color: #Ffe6bc; }
.hover\:border-ut-gary:hover { border-color: #3d4750; }

/* Transitions */
.auth-transition { transition: all 0.3s ease-in-out; }

.ut-filter { 
  background-color: var(--ut-gray-fond);
  border-radius: 10px;
}
.dark .ut-filter { background-color: var(--ut-gray-dark) }

.ut-text-code { color: var(--ut-gray) }
.dark .ut-text-code { color: var(--ut-beige) }

.ut-text-username { color: var(--ut-gray) }
.dark .ut-text-username { color: var(--ut-beige) }

.ut-text-address { color: var(--text-gray-600) }
.dark .ut-text-adress { color: var(--text-gray-300) }

.ut-text-time { color: var(--ut-green) }
.dark .ut-text-time { color: var(--ut-red-50) }

.ut-text-lang { color: var(--ut-brown) }
.dark .ut-text-lang { color: var(--ut-gray-fond) }

.ut-text-price { color: var(--ut-orange) }
.dark .ut-text-price { color: var(--ut-brown-light) }

/* --- UT Colors : Texte --- */
.ut-line {
  border-top: 1px solid var(--ut-gray-fond);
}
.dark .ut-line {
  border-top: 1px solid var(--ut-brown-dark);
}

/* États de validation pour les cartes (Inputs) */
.kt-card {
    border-inline-start-width: 2px !important;
    border-inline-start-color: var(--ut-orange) !important; /* Orange par défaut (Neutre) */
    border-bottom-width: 1px !important;
    border-bottom-color: var(--ut-orange) !important; /* Orange par défaut (Neutre) */
    transition: border-color 0.3s ease;
}
.kt-card.valid {
    border-inline-start-color: var(--ut-green) !important;
    border-bottom-color: var(--ut-green) !important;
 }
.kt-card.invalid {
    border-inline-start-color: var(--ut-red) !important;
    border-bottom-color: var(--ut-red) !important;
}

/* Boutons désactivés */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Radio Cards */
.account-type-radio:checked + .account-type-card {
    border-color: var(--ut-orange);
    background-color: #fff8f0;
    color: var(--ut-orange);
}

/* Animation de l'image */
#auth-image {
    transition: opacity 0.4s ease-in-out;
}

/* Ajout transition douce */
.transition-ut {
    transition: all 0.25s ease-in-out;
}

/* --- Le Bouton "Warm Glass" --- */
.ultra-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  /* --- L'EFFET VERRE CHAUD --- */
  /* On utilise l'Ivoire (#Fefae0) avec transparence au lieu du blanc froid */
  /*background:rgba(254, 250, 224, 0.65);*/

  /* Le flou reste pour l'effet moderne */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Bordure subtile en brun très léger pour définir la forme */
  box-shadow:
    inset 0 0 0 1px rgba(63, 42, 34, 0.1), /* Contour brun subtil */
    0 4px 6px -1px rgba(63, 42, 34, 0.05); /* Ombre brune douce */

  /* Typographie en Brun Foncé (#3f2a22) */
  font-family: 'Inter', sans-serif; /* Ou votre police spécifique */
  font-weight: 600;
  font-size: 15px;
  color: var(--ut-brown);
  letter-spacing: 0.5px;

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-wrapper {
  display: flex;
  align-items: center;
  transition: transform 0.4s ease;
  /* L'icône prend la couleur du texte par défaut */
  stroke: var(--ut-brown);
}

/* --- ÉTAT AU SURVOL (HOVER) --- */
.ultra-back:hover {
  /* Le texte devient Orange (#F8931F) */
  color: var(--ut-orange);

  /* Le fond devient un Ivoire plus opaque pour la lisibilité */
  /*background: rgba(254, 250, 224, 0.95);*/

  /* --- L'EFFET "ÉNERGIE" --- */
  /* Halo lumineux Orange */
  box-shadow:
    inset 0 0 0 1px var(--ut-orange), /* Bordure nette orange */
    0 8px 20px -4px rgba(var(--ut-orange-rgb), 0.4), /* Halo externe */
    0 4px 8px -2px rgba(63, 42, 34, 0.1);

  transform: translateY(-2px);
}

/* Changement de couleur de l'icône au survol */
.ultra-back:hover .icon-wrapper svg path {
  stroke: var(--ut-orange);
}

.ultra-back:hover .icon-wrapper {
  transform: translateX(-5px) scale(1.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 640px) {
  .ultra-back .btn-text {
    display: none;
  }
  .ultra-back {
    padding: 14px;
    border-radius: 50%;
  }
}

/* Forcer les boutons sur mobile */
@media (max-width: 991px) {
    .swiper-button-next,
    .swiper-button-prev {
        opacity: 1 !important;      /* forcer visible */
        pointer-events: auto !important; /* activer clic */
        display: flex !important;   /* s'assurer qu'ils s'affichent */
        z-index: 500;                /* au-dessus du slider */
    }

    /* Positionner les boutons correctement sur mobile */
    .swiper-button-prev {
        left: 10px;
        top: auto;
        bottom: 20px;
    }
    .swiper-button-next {
        right: 10px;
        top: auto;
        bottom: 20px;
    }
}