/* Custom UI Properties for UMBB Theme */
:root {
	--font-primary: 'Abel', sans-serif;
    --font-arabic: 'Cairo', sans-serif;
	
    --primary-color: #0d6efd;
    --primary-dark: #0a58ca;
    --emerald-color: #10b981;
    --emerald-dark: #059669;
    --dark-blue: #0f172a;
}

/* Application de la typographie Abel en LTR (FR / EN) */
html[dir="ltr"] body {
    font-family: var(--font-primary);
    font-size: 1.05rem; /* Ajustement d'échelle pour la police Abel */
    letter-spacing: 0.3px; /* Améliore la lisibilité des polices condensées */
    color: #334155;
    background-color: #f8fafc;
}

/* Fallback propre pour la version Arabe (RTL) */
html[dir="rtl"] body {
    font-family: var(--font-arabic);
    font-size: 1rem;
    letter-spacing: normal;
}

/* Optimisation des titres avec la police Abel */
h1, h2, h3, h4, h5, h6, 
.display-5, .navbar-brand, .btn {
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4, 
html[dir="rtl"] h5, 
html[dir="rtl"] h6, 
html[dir="rtl"] .btn {
    font-family: var(--font-arabic);
}

body {
    font-family: var(--font-family);
    color: #334155;
    background-color: #f8fafc;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar Customization */
.brand-icon {
    width: 38px;
    height: 38px;
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.2rem;
}

.brand-title {
    color: var(--dark-blue);
    font-size: 1.1rem;
}

/* Statut Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-open {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--emerald-dark);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-closed {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-open .status-dot { background-color: var(--emerald-color); }
.status-closed .status-dot { background-color: #ef4444; }

/* Dimensionnement du Logo Header */
.logo-header {
    height: 42px;
    width: auto;
    object-fit: contain;
}

/* /* Hero Section avec Image de Fond 
.hero-section {
	width: 100%;
  background: linear-gradient(
        135deg, 
        rgba(15, 23, 42, 0.70) 0%,   /* Réduit de 0.90 à 0.50 
        rgba(30, 41, 59, 0.60) 100%   /* Réduit de 0.85 à 0.40 
    ), url('../img/hero-bg.png') center / 100% 100% no-repeat;
  padding: 0;
  position: relative;

}*/

.hero-section {
  width: 100%;
  
  /* 1. Augmenter la hauteur interne (haut/bas) */
  padding: 120px 0; 

  /* 2. Fixer une hauteur minimale par rapport à l'écran */
  min-height: 70vh; /* Représente 70% de la hauteur de l'écran */

  /* 3. Centrer le contenu verticalement (Flexbox) */
  display: flex;
  align-items: center;

  background: linear-gradient(
        135deg, 
        rgba(15, 23, 42, 0.70) 0%, 
        rgba(30, 41, 59, 0.60) 100%
    ), url('../img/hero-bg.png') center / cover no-repeat; /* 'cover' évite de déformer l'image */
  
  position: relative;
}

.text-light-80 {
    color: rgba(255, 255, 255, 0.8);
}

.btn-emerald {
    background-color: var(--emerald-color);
    color: #fff;
    border: none;
}

.btn-emerald:hover {
    background-color: var(--emerald-dark);
    color: #fff;
}

/* Cards & Roles */
.card-role {
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.transition-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

.role-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); }
.bg-success-soft { background-color: rgba(16, 185, 129, 0.1); }
.bg-dark-soft { background-color: rgba(15, 23, 42, 0.1); }

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ==========================================
   Footer Custom Styling & Contrast Fix
   ========================================== */
footer {
    background-color: var(--dark-blue) !important; /* Force le fond bleu très sombre institutionnel */
    color: #ffffff;
}

/* Force la visibilité des textes secondaires dans le footer */
footer .text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.875rem;
}

/* Style et état au survol des liens du footer */
.footer-link {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease-in-out;
}

.footer-link:hover {
    color: #ffffff;
    text-decoration: underline !important;
}

/* Sécurisation du layout en cas de contenu court (Sticky Footer) */

#espaces-acces {
    flex: 1; /* Pousse le footer en bas de page si le contenu est court */
}

/* ==========================================
   Hero Section & Integrated Cards Styling
   ========================================== */

.hero-section {
    background: linear-gradient(
        135deg, 
        rgba(15, 23, 42, 0.92) 0%, 
        rgba(30, 41, 59, 0.88) 100%
    ), url('../img/hero-bg.png') center/contain no-repeat;
    padding: 60px 0 80px 0;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
}

.max-w-700 {
    max-width: 700px;
}

/* Style des Cartes situées dans le Hero */
.card-hero {
    background-color: #ffffff;
    border-radius: 18px;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}

.card-hero:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25) !important;
}

.text-dark-blue {
    color: var(--dark-blue);
}

.role-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); }
.bg-success-soft { background-color: rgba(16, 185, 129, 0.1); }
.bg-dark-soft { background-color: rgba(15, 23, 42, 0.1); }

.btn-2.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* ==========================================
   Page de Connexion - Style Raffiné
   ========================================== */

.login-section {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.card-login {
    border-radius: 20px !important;
}

.login-icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.input-group .form-control:focus {
    box-shadow: none;
    border-color: var(--primary-color);
}

.input-group-text {
    color: #94a3b8;
}

.hover-primary {
    transition: color 0.2s ease;
}

.hover-primary:hover {
    color: var(--primary-color) !important;
}

/* Bouton Flottant (FAB) Doléances */
.btn-fab-doleance {
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    z-index: 1040; /* Au-dessus du contenu, sous la modale (1050) */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* Effet Hover (Survol) UI moderne */
.btn-fab-doleance:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.4) !important;
}

/* Gestion du RTL pour la langue Arabe */
[dir="rtl"] .btn-fab-doleance {
    right: auto;
    left: 25px;
}

/* Adaptation Mobile */
@media (max-width: 576px) {
    .btn-fab-doleance {
        bottom: 15px;
        right: 15px;
        width: 48px;
        height: 48px;
    }
    
    [dir="rtl"] .btn-fab-doleance {
        left: 15px;
    }
}

/* --- Style Spécifique Timeline Index --- */
.process-card {
    position: relative;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease-in-out;
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

.process-number-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #495057;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.max-w-700 {
    max-width: 700px;
}