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

    --ut-orange-light: #FDD7AD;
    --ut-red: #ef4444;
    --ut-brown-light: #A56F59;
    --ut-brown-mid: #6A483A;
    --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%;
}

.icon-ut-color {
    fill: var(--ut-orange);
    transition: fill 0.3s ease;
}
.dark .icon-ut-color { fill: var(--ut-brown-light); }

/* --- UT Colors : Texte --- */
.text-ut-titre { color: var(--ut-brown); }
.dark .text-ut-titre { color: var(--ut-beige); }
.text-ut-subtitre { color: var(--ut-brown-mid); }
.dark .text-ut-subtitre { color: var(--ut-ivory); }

.text-ut-titre-orange { color: var(--ut-orange); }
.dark .text-ut-titre-orange { color: var(--ut-brown-mid); }

.btn-ut-orange { background-color: var(--ut-orange); }
.dark .btn-ut-orange { background-color: var(--ut-brown-mid); }

.btn-ut-brown { background-color: var(--ut-brown-mid); }
.dark .btn-ut-brown { background-color: var(--ut-orange); }

.text-ut-brown { color: var(--ut-brown); }
.text-ut-orange { color: var(--ut-orange); }
.text-ut-ivory { color: var(--ut-ivory); }
.text-ut-beige { color: var(--ut-beige); }
.text-ut-gray { color: var(--ut-gray-text); }
.text-ut-red { color: var(--ut-red); }
.text-ut-red-50 { color: var(--ut-red-50); }
.text-ut-green { color: var(--ut-green); }
.text-ut-brown-light { color: var(--ut-brown-light); }

.ring-ut-green { color: var(--ut-green); }
/* --- UT Colors : Fonds --- */
.bg-ut-brown { background-color: var(--ut-brown); }
.bg-ut-orange { background-color: var(--ut-orange); }
.bg-ut-ivory { background-color: var(--ut-ivory); }
.bg-ut-beige { background-color: var(--ut-beige); }
.bg-ut-gray { background-color: var(--ut-gray); }
.bg-ut-green { background-color: var(--ut-green); }
.bg-ut-red { background-color: var(--ut-red); }
.bg-ut-red-50 { background-color: var(--ut-red-50); }
.bg-ut-orange-light { background-color: #FEEDDA; }
.bg-ut-brown-light { background-color:var(--ut-brown-light); }

/* --- UT Colors : Bordures --- */
.border-ut-brown { border-color: var(--ut-brown); }
.border-ut-orange { border-color: var(--ut-orange); }
.border-ut-ivory { border-color: var(--ut-ivory); }
.border-ut-beige { border-color: var(--ut-beige); }
.border-ut-gray { border-color: var(--ut-gray); }

/* --- Hover texte --- */
.hover\:text-ut-brown:hover { color: var(--ut-brown); }
.hover\:text-ut-orange:hover { color: var(--ut-orange); }
.hover\:text-ut-ivory:hover { color: var(--ut-ivory); }
.hover\:text-ut-beige:hover { color: var(--ut-beige); }
.hover\:text-ut-gray:hover { color: var(--ut-gray); }

/* --- Hover fond --- */
.hover\:bg-ut-brown:hover { background-color: var(--ut-brown); }
.hover\:bg-ut-orange:hover { background-color: var(--ut-orange); }
.hover\:bg-ut-ivory:hover { background-color: var(--ut-ivory); }
.hover\:bg-ut-beige:hover { background-color: var(--ut-beige); }
.hover\:bg-ut-gray:hover { background-color: var(--ut-gray); }

/* --- Hover bordure --- */
.hover\:border-ut-brown:hover { border-color: var(--ut-brown); }
.hover\:border-ut-orange:hover { border-color: var(--ut-orange); }
.hover\:border-ut-ivory:hover { border-color: var(--ut-ivory); }
.hover\:border-ut-beige:hover { border-color: var(--ut-beige); }
.hover\:border-ut-gary:hover { border-color: var(--ut-gray); }

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

/* 1. On garde la zone globale cliquable */
#dropzone-area {
    cursor: pointer;
}

/* 2. On s'assure que les VIGNETTES sont cliquables */
/* (Ceci annule le pointer-events: none si vous l'aviez mis partout) */
#dropzone-area .dz-preview {
    position: relative; /* C'est la clé ! L'icône se calera par rapport à ICI */
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; /* Assure une hauteur minimale */
}

/* 3. Le bouton "Remove" doit rester cliquable normalement */
#dropzone-area .dz-remove {
    cursor: pointer;
    z-index: 5;
}
/* Style pour l'icône de type de fichier */
.dz-file-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    z-index: 6;
    pointer-events: none; /* Laisse le clic passer à travers */
}

/* Pour les PDF, on cache la balise img générée par défaut par Dropzone qui est souvent vide */
.dz-preview.dz-pdf-preview .dz-image {
    display: none !important; /* On cache le cadre image par défaut qui est moche */
}

/* On s'assure que le conteneur reste visible même sans image */
.dz-preview.dz-pdf-preview {
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 120px;
    height: 120px;
}

/* Conteneur de la barre de progression (au dessus de la vignette) */
.ocr-progress-container {
    position: absolute;
    bottom: 10px;
    left: 5%;
    width: 90%;
    height: 16px;
    background: #e2e8f0; /* Gris clair */
    border-radius: 8px;
    z-index: 7;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: none; /* Caché par défaut */
}

/* La barre verte qui avance */
.ocr-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--ut-green); /* Vert (Tailwind emerald-500) */
    transition: width 0.3s ease;
}

/* Petit texte de statut (ex: "Page 1/5") */
.ocr-status-text {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #333;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 0;
    z-index: 8;
    display: none;
}

.ut-num-label { 
  background-color: var(--ut-orange);
  color: var(--ut-ivory);
  border-radius: 6px 5px 5px 0px;
  font: bold;
}
.dark .ut-num-label { 
  background-color: var(--ut-beige);
  color: var(--ut-gray);
}

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

.ut-select { 
  border-width: none;
  border-color: var(--ut-gray-fond);
  background-color: white;
  color: black;
}
.dark .ut-select { 
  border-color: var(--ut-gray-dark);
  background-color: black;
  color: white;
}

.ut-card-item { 
  border-top: 2px;
  border-color: var(--ut-gray-green);
  border-radius: 10px;
}
.dark .ut-card-item { border-color: var(--ut-gray-green) }

.ut-input::placeholder { 
  color: var(--ut-gray-text);
}
.dark .ut-input::placeholder { color: var(--ut-gray-text) }

.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;
    }
}