/* ==========================================================================
   0. IMPORT DES POLICES PREMIUM (Google Fonts)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

@font-face {
            font-family: 'Plus Jakarta Sans';
            font-style: normal;
            font-weight: 300 700;
            font-display: optional;
            src: url('fonts/plus-jakarta-sans-v8.woff2') format('woff2'); /* Fichier local */
        }
        @font-face {
            font-family: 'Tenor Sans';
            font-style: normal;
            font-weight: 400;
            font-display: optional;
            src: url('fonts/tenor-sans-v14.woff2') format('woff2'); /* Fichier local */
        }



/* ==========================================================================
   1. VARIABLES & THÈMES (Palette Premium Équestre)
   ========================================================================== */
:root {
    /* Typographies */
    --font-titres: 'Montserrat', sans-serif;
    --font-corps: 'Inter', sans-serif;

    /* Thème Clair */
    --couleur-principale: #1e293b;  /* Bleu Marine */
    --couleur-accent: #c5a059;      /* Or / Sable */
    --couleur-accent-hover: #b08c46;
    --fond-page: #f8fafc;
    --blanc: #ffffff;
    --card-bg: #ffffff;
    --texte-sombre: #0f172a;
    --texte-gris: #64748b;
    --border-color: #e2e8f0;
    --card-border: 1px solid #e2e8f0;
    --weather-bg: #f1f5f9;
    --ombre: 0 4px 20px rgba(15, 23, 42, 0.05);
}

body.dark-mode {
    --fond-page: #0f172a;
    --card-bg: #1e293b;
    --couleur-principale: #e2e8f0;
    --blanc: #1e293b;
    --texte-sombre: #f8fafc;
    --texte-gris: #94a3b8;
    --border-color: #334155;
    --card-border: 1px solid #334155;
    --weather-bg: rgba(255, 255, 255, 0.03);
    --ombre: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* Force l'application de votre couleur Or/Sable sur l'événement lune et ses sous-éléments */
.text-foalia-accent,
.text-foalia-accent .fc-event-main,
.text-foalia-accent .fc-event-title {
    color: var(--couleur-accent) !important;
}
.text-accent {
    color: var(--couleur-accent) !important; /* Le !important permet de surcharger Bootstrap à coup sûr */
}
/* ==========================================================================
   1b. APPLICATION DES POLICES
   ========================================================================== */
body {
    font-family: var(--font-corps);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-titre {
    font-family: var(--font-titres);
    letter-spacing: -0.02em; /* Rend les titres plus compacts et modernes */
}

/* ==========================================================================
   2. STRUCTURE GLOBALE & UTILITAIRES
   ========================================================================== */
body { 
    background-color: var(--fond-page); 
    color: var(--texte-sombre);
    font-size: 0.95rem; 
    padding-bottom: 30px; 
    transition: background-color 0.3s, color 0.3s; 
}

.text-dark { color: var(--texte-sombre) !important; }
.text-muted { color: var(--texte-gris) !important; }
.border-bottom, .border { border-color: var(--border-color) !important; }

/* ==========================================================================
   3. COMPOSANTS (CARTES & FORMULAIRES)
   ========================================================================== */
.card-main, .card-dash, .card-premium, .mobile-card, .edit-card, .card { 
    border: var(--card-border) !important; 
    border-radius: 20px; 
    box-shadow: var(--ombre); 
    background: var(--card-bg) !important; 
    color: var(--texte-sombre); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-main:hover, .card-dash:hover, .horse-card-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

body.dark-mode .card-main:hover, 
body.dark-mode .card-dash:hover, 
body.dark-mode .horse-card-row:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.form-control, .form-select { 
    background-color: var(--card-bg) !important; 
    color: var(--texte-sombre) !important; 
    border-color: var(--border-color) !important; 
    border-radius: 10px; 
    padding: 10px 14px; 
}

.form-control:focus, .form-select:focus { 
    border-color: var(--couleur-accent) !important; 
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.2) !important; 
}

textarea {
    background-color: var(--card-bg) !important;
    color: var(--texte-sombre) !important;
    border-color: var(--border-color) !important;
}

/* CORRECTIF RECHERCHE DARK */
body.dark-mode .form-control[type="search"],
body.dark-mode input.form-control {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

body.dark-mode .form-control::placeholder {
    color: #94a3b8 !important;
}

/* ==========================================================================
   4. NAVIGATION, ONGLETS (PILLS) & CORRECTIFS THÈMES
   ========================================================================== */

/* --- [1] ONGLETS STANDARDS (NAV-PILLS) --- */

/* Style de base des onglets (commun aux deux thèmes) */
.nav-pills .nav-link {
    background-color: var(--weather-bg) !important;
    color: var(--texte-gris) !important;
    border-radius: 12px;
    padding: 8px 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* En mode clair : L'onglet actif (Fond doré uni, texte sombre) */
body:not(.dark-mode) .nav-pills .nav-link.active {
    background-color: var(--couleur-accent) !important;
    color: #1a1a1a !important; 
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
}

/* En mode sombre : Onglets inactifs */
body.dark-mode .nav-pills .nav-link:not(.active) {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
body.dark-mode .nav-pills .nav-link:not(.active):hover {
    color: #ffffff !important;
    background-color: #334155 !important;
}

/* En mode sombre : Onglet actif (Style Premium or & transparent) */
body.dark-mode .nav-pills .nav-link.active {
    background-color: rgba(197, 160, 89, 0.15) !important;
    color: var(--couleur-accent) !important;
    border: 1px solid var(--couleur-accent) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.1);
}
/* Correction pour le thème Light (Code promo) */
body:not(.dark-mode) .promo-text {
    color: #4a3a1a !important; /* Un doré plus foncé pour contraster sur fond clair */
    font-weight: 700;
}

/* Correction pour le thème Dark (Jauge "X poulinières") */
body.dark-mode .quota-text {
    color: #f1f5f9 !important; /* Blanc cassé pour lisibilité sur fond sombre */
}

/* --- [2] EXTENSION : ONGLETS PREMIUM EN FILTRAGE HORIZONTAL (Ex: Gestation) --- */

/* Conteneur technique pour empêcher le retour à la ligne sur mobile */
.custom-nav-pills {
    background-color: #f1f5f9 !important; /* Fond gris doux en Mode Clair */
    border: 1px solid #e2e8f0;
    display: flex !important;             /* Force le comportement Flexbox */
    flex-wrap: nowrap !important;         /* Interdit le retour à la ligne */
    overflow-x: auto;                     /* Permet le défilement horizontal */
    min-width: 100%;
    gap: 4px;
    -webkit-overflow-scrolling: touch;    /* Glissement fluide au doigt sur iOS */

    /* --- EFFET PREMIUM : On cache la barre sur Firefox et Edge --- */
    scrollbar-width: none !important;     /* Masque la barre sur Firefox */
    -ms-overflow-style: none !important;  /* Masque la barre sur IE / Edge */
}

/* --- EFFET PREMIUM : On cache la barre sur Chrome, Safari et Opera --- */
.custom-nav-pills::-webkit-scrollbar {
    display: none !important;             /* Masque la barre sur les moteurs Webkit */
}

/* On s'assure que les sous-éléments ne s'écrasent pas */
.custom-nav-pills .nav-item {
    flex: 1 0 auto;                       /* Empêche le bouton de rétrécir */
    text-align: center;
}

.custom-nav-pills .nav-link {
    color: #64748b !important;
    font-size: 0.9rem;
    white-space: nowrap !important;        /* Empêche le texte de se couper */
    border-radius: 8px;
    background: transparent !important;
}
body.dark-mode .custom-nav-pills .nav-link {
    color: #94a3b8 !important;
}

/* Effet de carte surélevée sur l'onglet actif */
body:not(.dark-mode) .custom-nav-pills .nav-link.active {
    background-color: #ffffff !important;
    color: var(--couleur-accent) !important;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05);
    border: 1px solid transparent !important;
}
body.dark-mode .custom-nav-pills .nav-link.active {
    background-color: #1e293b !important; /* Reprend la teinte de tes cartes */
    color: var(--couleur-accent) !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* --- [3] GESTION DES BADGES DANS LES ONGLETS --- */
.nav-pills .nav-link .badge {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: inherit !important;
    font-weight: 700;
    margin-left: 5px;
}
body:not(.dark-mode) .nav-pills .nav-link.active .badge {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #1a1a1a !important;
}
body.dark-mode .nav-pills .nav-link.active .badge {
    background-color: var(--couleur-accent) !important;
    color: #1e293b !important;
}

/* ==========================================================================
   STYLES SPÉCIFIQUES - REGISTRE & MOUVEMENTS FOALIA
   ========================================================================== */

/* --- Typographie et Couleurs de base --- */
.text-foalia-accent {
    color: var(--couleur-accent, #c5a059) !important;
}

.text-foalia-marine {
    color: var(--couleur-principale, #1e293b) !important;
}
/* Adaptation du texte marine en mode sombre pour rester lisible */
body.dark-mode .text-foalia-marine {
    color: var(--blanc, #ffffff) !important;
}

/* --- Effet de surbrillance JS (Sélection poulain) --- */
.foalia-highlight-row {
    background-color: rgba(197, 160, 89, 0.15) !important; /* Couleur Or/Sable avec opacité */
    border-radius: 6px;
    transition: background-color 0.8s ease;
}
/* Ajustement de l'opacité pour le mode sombre */
body.dark-mode .foalia-highlight-row {
    background-color: rgba(197, 160, 89, 0.25) !important; 
}

/* --- Boutons Premium Foalia --- */
.btn-foalia-primary {
    background-color: var(--couleur-principale, #1e293b);
    color: var(--blanc, #ffffff);
    border: none;
    transition: all 0.2s ease;
}
.btn-foalia-primary:hover {
    background-color: var(--texte-sombre, #0f172a);
    color: var(--blanc, #ffffff);
}

.btn-foalia-accent {
    background-color: var(--couleur-accent, #c5a059);
    color: var(--blanc, #ffffff);
    border: none;
    transition: all 0.2s ease;
}
.btn-foalia-accent:hover {
    background-color: var(--couleur-accent-hover, #b08c46);
    color: var(--blanc, #ffffff);
}

/* --- Badges d'information Registre --- */
.foalia-badge-accent {
    background-color: rgba(197, 160, 89, 0.15);
    color: var(--couleur-accent, #c5a059);
    border: 1px solid var(--couleur-accent, #c5a059);
    font-weight: 600;
}
body.dark-mode .foalia-badge-accent {
    background-color: rgba(197, 160, 89, 0.1);
}

/* --- [4] CORRECTIFS GRAPHQUES DU MODE SOMBRE --- */

/* Bouton "btn-outline-dark" (Ajout de mouvements/soins) visible la nuit */
body.dark-mode .btn-outline-dark {
    color: var(--texte-sombre) !important;
    border-color: #475569 !important;
    --bs-btn-color: var(--texte-sombre) !important;
    --bs-btn-border-color: #475569 !important;
    --bs-btn-hover-bg: var(--texte-sombre) !important;
    --bs-btn-hover-color: #0f172a !important;
    --bs-btn-hover-border-color: var(--texte-sombre) !important;
}

/* Éléments de liste (Groupes, Centres d'insémination) */
body.dark-mode .list-group-item {
    background-color: var(--card-bg) !important;  /* Utilisation propre de tes variables */
    color: var(--texte-sombre) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .list-group-item .text-muted {
    color: #94a3b8 !important;
}


/* --- [5] RECHERCHE UNIFIÉE (CHAMPS AVEC ICÔNE) --- */

/* Supprimer la cassure visuelle entre la loupe et l'input */
body.dark-mode .input-group .input-group-text {
    border-right: none !important;
}
body.dark-mode .input-group .form-control {
    border-left: none !important;
}

/* Mise en valeur dorée du bloc de recherche au focus */
.input-group:focus-within .input-group-text {
    border-color: var(--couleur-accent) !important;
    color: var(--couleur-accent) !important;
}


/* --- [6] COMPOSANTS DE PROFIL & AVATARS --- */

.avatar-container { 
    width: 75px; 
    height: 75px; 
    background-color: var(--weather-bg); 
    border-radius: 15px;
    flex-shrink: 0; /* Évite l'écrasement sur ordinateur */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-placeholder {
    font-size: 1.5rem;
    color: var(--texte-gris);
}

.photo-header {
    width: 100%;
    height: 250px;
    background-color: #e9ecef;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 1rem 1rem;
    overflow: hidden;
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.btn-success {
    background-color: var(--couleur-accent) !important;
    border-color: var(--couleur-accent) !important;
    color: #ffffff !important;
    border-radius: 10px;
}

/* ==========================================================================
   BOUTONS THEME ACCENT / OR (CORRECTION HOVER)
   ========================================================================== */

/* 1. Bouton Plein Or (Valider la naissance) */
.btn-accent {
    background-color: var(--couleur-accent) !important;
    border-color: var(--couleur-accent) !important;
    color: #1e293b !important; /* Texte Marine pour le contraste */
}
.btn-accent:hover {
    background-color: var(--couleur-accent-hover) !important;
    border-color: var(--couleur-accent-hover) !important;
    color: #ffffff !important; /* Devient blanc au survol */
}

/* 2. Bouton Contour Or (Check-list Poulinage) */
.btn-outline-accent {
    background-color: transparent !important;
    border-color: var(--couleur-accent) !important;
    color: var(--couleur-accent) !important;
}
.btn-outline-accent:hover {
    background-color: var(--couleur-accent) !important;
    border-color: var(--couleur-accent) !important;
    color: #1e293b !important; /* Fond Or complet et texte sombre au survol */
}

/* Optionnel : Légère opacité de fond pour le contour en Mode Sombre pour le rendre plus doux */
body.dark-mode .btn-outline-accent {
    background-color: rgba(197, 160, 89, 0.05) !important;
}
.btn-success:hover {
    background-color: var(--couleur-accent-hover) !important;
    border-color: var(--couleur-accent-hover) !important;
}

.btn-edit-float { 
    position: absolute; bottom: -20px; right: 20px; 
    width: 45px; height: 45px; border-radius: 50%; 
    background: var(--couleur-accent); color: #ffffff !important; 
    border: 4px solid var(--fond-page); display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 100;
}

.sticky-btn-container { 
    position: fixed; bottom: 0; left: 0; right: 0; 
    background: var(--card-bg); padding: 15px; 
    z-index: 1000; box-shadow: 0 -4px 10px rgba(0,0,0,0.05); 
}

/* ==========================================================================
   CORRECTIF TUILES CHEPTEL (Mode Sombre)
   ========================================================================== */

/* On s'assure que la ligne a un fond et une transition fluide */
.horse-card-row {
    background: var(--card-bg) !important;
    border: var(--card-border);
    border-radius: 18px;
    margin-bottom: 12px;
    transition: all 0.2s ease-in-out;
}

/* Optimisation spécifique pour le Dark Mode sur PC */
body.dark-mode .horse-card-row {
    background-color: #1e293b !important; /* On force le bleu marine card-bg */
    border-color: #334155 !important;
}

/* Effet de survol pour casser le côté "plat" sur PC */
.horse-card-row:hover {
    background-color: var(--weather-bg) !important; /* Légère illumination au survol */
    transform: translateX(5px); /* Petit décalage vers la droite très élégant */
    border-color: var(--couleur-accent) !important;
}

body.dark-mode .horse-card-row:hover {
    background-color: #2d3748 !important; /* Teinte légèrement plus claire en dark mode */
}

/* ==========================================================================
   7. GESTATION, AGENDA & GENETIQUE
   ========================================================================== */
.timeline-scroll-container { display: flex; overflow-x: auto; padding: 20px 10px; }
.timeline-event-item { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; position: relative; }




/* Conteneur global de la bulle (Uniformisation de la taille) */
.timeline-bubble {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0 !important;

    /* 2. Verrouillage des dimensions */
    box-sizing: border-box !important; /* Force la bordure à se dessiner à l'INTÉRIEUR du rond */
    
    /* 3. Anti-aliasing mobile (force le navigateur à lisser le cercle) */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

/* Force toutes les icônes internes à avoir exactement la même taille de police */
.timeline-bubble i {
    font-size: 1.05rem !important;
    display: inline-block;
    line-height: 1;
}
/* Effet flash JS lors de la sélection du poulain */
.foalia-flash-accent {
    background-color: rgba(197, 160, 89, 0.15) !important; /* Base couleur Or/Sable avec opacité */
    transition: background-color 0.3s ease;
}

/* Bulle Événement Validé / Effectué (Light Mode) */
.bubble-valide {
    background-color: #ffffff !important;
    border: 2px solid #10b981 !important; /* Bordure verte */
}

/* Bulle Événement Validé / Effectué (Dark Mode) */
body.dark-mode .bubble-valide {
    background-color: var(--card-bg) !important;
}

/* Bulle Événement à venir (Light Mode) */
.bubble-futur {
    background-color: #ffffff !important;
    border: 2px solid #f59e0b !important; /* Bordure jaune/orange */
}

/* Bulle Événement à venir (Dark Mode) */
body.dark-mode .bubble-futur {
    background-color: var(--card-bg) !important;
}

/* Bulle Événement du jour J */
.bubble-today { 
    background-color: var(--couleur-accent) !important; 
    color: #fff !important; 
    border: 2px solid var(--couleur-accent) !important;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.2); 
}

/* Effet au survol des bulles */
.timeline-bubble:hover {
    transform: scale(1.1);
}

#calendar { background: var(--card-bg); padding: 12px; border-radius: 15px; color: var(--texte-sombre); }
.fc-event { cursor: pointer; border: none !important; }

.genetic-group { display: flex; gap: 8px; overflow-x: auto; }
.btn-outline-track { 
    flex: 1; padding: 12px; border-radius: 12px; border: var(--card-border);
    background: var(--card-bg); color: var(--texte-gris); font-weight: 600;
}
.btn-check:checked + .btn-outline-track { 
    border-color: var(--couleur-accent); background-color: rgba(197, 160, 89, 0.1); color: var(--couleur-accent); 
}
/* Amélioration du contraste des boutons-radios actifs (Support) */
.btn-check:checked + .btn-outline-secondary {
    color: #ffffff !important;
    background-color: #6c757d !important;
}

/* Force le sous-titre text-muted à devenir blanc translucide quand le bouton est actif */
.btn-check:checked + .btn-outline-secondary .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Force l'icône à s'adapter aussi en blanc */
.btn-check:checked + .btn-outline-secondary i {
    color: #ffffff !important;
}

/* ==========================================================================
   PERSONNALISATION DE L'AGENDA (FULLCALENDAR) - CHARTE FOALIA
   ========================================================================== */

/* 1. LE MOIS EN COURS (Le titre principal de l'agenda) */
#calendar .fc-toolbar-title {
    color: var(--couleur-accent) !important; /* Teinte Or/Sable Premium */
    font-weight: 700;
    text-transform: capitalize; /* Optionnel : force la majuscule sur le mois */
}

/* 2. LES BOUTONS (Mois, Liste, Flèches de navigation, Aujourd'hui) */
#calendar .fc-button-primary {
    background-color: #1e293b !important; /* Fond Bleu Marine Foalia */
    border-color: #1e293b !important;
    color: #ffffff !important;
    border-radius: 8px !important; /* Arrondi élégant */
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

/* Au survol des boutons (Mois, Liste, Flèches) */
#calendar .fc-button-primary:hover {
    background-color: var(--couleur-accent) !important; /* Bascule en Or/Sable au survol */
    border-color: var(--couleur-accent) !important;
    color: #ffffff !important;
}

/* État actif (Ex: Quand la vue "Mois" ou "Liste" est sélectionnée) */
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active {
    background-color: var(--couleur-accent) !important; /* Fond Or/Sable */
    border-color: var(--couleur-accent) !important;
    color: #ffffff !important; /* Texte Bleu Marine sur fond Or pour le contraste */
}

/* Cas du bouton "Aujourd'hui" quand il est grisé (désactivé) */
#calendar .fc-button-primary:disabled {
    background-color: rgba(30, 41, 59, 0.4) !important;
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 3. LES NUMÉROS DE JOURS (Dans les cases de la grille) */
#calendar .fc-daygrid-day-number {
    color: var(--texte-gris) !important; /* Couleur neutre pour les chiffres */
    text-decoration: none !important; /* Retire le soulignement de lien natif */
    font-weight: 600;
    padding: 6px 10px;
}
/* Optionnel : Mettre en valeur le numéro du jour actuel (Aujourd'hui) */
#calendar .fc-day-today .fc-daygrid-day-number {
    color: var(--couleur-accent) !important; /* Chiffre en Or */
    font-weight: 700;
}

/* 4. LES EN-TÊTES DE COLONNES (Lun., Mar., Mer...) */
#calendar .fc-col-header-cell-cushion {
    color: var(--texte-sombre) !important; 
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ==========================================================================
   VUE LISTE - SUPPRESSION DES TEXTES BLEUS PAR DÉFAUT
   ========================================================================== */

/* 1. Les titres des événements (liens <a>) */
#calendar .fc-list-event-title a {
    color: var(--texte-sombre) !important; /* Utilise ton texte sombre/clair selon le thème */
    text-decoration: none !important;      /* Supprime le soulignement */
    font-weight: 600;
}

/* Au survol du titre de l'événement */
#calendar .fc-list-event-title a:hover {
    color: var(--couleur-accent) !important; /* Devient Or/Sable Premium au survol */
}

/* 2. Les en-têtes des jours dans la liste (Ex: "lundi 22 juin") */
#calendar .fc-list-day-text, 
#calendar .fc-list-day-side-text {
   order: 2 !important;
    color: var(--couleur-accent) !important; /* Met les dates en Or/Sable */
    font-weight: 700;
}

/* Force les liens dans les en-têtes de jour si présents */
#calendar .fc-list-day a {
    color: var(--couleur-accent) !important;
    text-decoration: none !important;
}

/* 3. L'heure de l'événement */
#calendar .fc-list-event-time {
    color: var(--texte-gris) !important; /* En gris neutre pour la discrétion */
    font-weight: 600;
}

/* 4. [Optionnel] Adoucir le fond des en-têtes de jours de la liste */
#calendar .fc-list-day {
    background-color: rgba(197, 160, 89, 0.05) !important; /* Un très léger voile Or/Sable */
}

/* 5. Ajustement de la bordure globale de la liste */
#calendar .fc-list {
    border-color: var(--card-border) !important;
}
/* Aligne la date et le nom du jour côte à côte à gauche */
#calendar .fc-list-day-cushion {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px; /* Espace entre "24 juin" et "mercredi" */
}

/* Optionnel : Si tu veux inverser l'ordre ou adoucir le nom du jour (ex: mercredi) */
#calendar .fc-list-day-side-text {
    order: 1 !important; /* Passe en premier (à gauche) */
    color: var(--couleur-accent) !important; /* Optionnel : en Or Foalia */
    font-weight: 700 !important;
}
/* ==========================================================================
   NETTOYAGE ET INTEGRATION FINALE DE LA GRILLE (MOIS + TITRES DE JOURS)
   ========================================================================== */

/* Applique le fond de ta charte sur TOUTES les cases (jours et en-têtes) */
#calendar td,
#calendar th,
#calendar .fc-daygrid-day,
#calendar .fc-daygrid-day-frame,
#calendar .fc-col-header-cell {
    background-color: var(--card-bg) !important;
    --bs-table-bg: var(--card-bg) !important; /* Coupe définitivement le blanc Bootstrap */
}

/* Style spécifique du texte des intitulés (lun. mar. etc.) */
#calendar .fc-col-header-cell-cushion {
    color: var(--texte-sombre) !important;
    font-weight: 600;
    text-decoration: none !important;
}

/* Les bordures fines de la grille pour harmoniser le tout */
#calendar td, 
#calendar th, 
#calendar .fc-scrollgrid {
    border-color: var(--card-border) !important;
}

/* Case d'aujourd'hui mise en valeur avec un léger reflet Or/Sable */
#calendar .fc-day-today {
    background-color: rgba(197, 160, 89, 0.08) !important;
}
/* Drag & Drop */
.sortable-ghost { opacity: 0.6; background-color: var(--weather-bg) !important; border: 2px dashed var(--couleur-accent) !important; }
#widget-grid { display: flex; flex-direction: column; overscroll-behavior-y: contain; }
.handle { touch-action: none; cursor: grab; }

/* Donne une hauteur maximale au offcanvas pour qu'il ne soit pas "tout petit" */
.offcanvas-bottom {
    height: 85vh !important; /* 85% de la hauteur de l'écran */
    max-height: 85vh !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.offcanvas-body {
    overflow-y: auto; /* Permet de faire défiler le formulaire à l'intérieur */
}

/* [Style dédié à l'agrandissement de la timeline sur mobile] */
.gestation-timeline {
    position: relative;
    padding: 20px 0;
}

/* Le point de repère (Node) sur la ligne */
.timeline-node {
    width: 28px; /* Augmenté pour un confort tactile optimal (doigts) */
    height: 28px;
    border-radius: 50%;
    background-color: var(--bs-card-bg);
    border: 3px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    z-index: 2;
}

/* État actif ou complété */
.timeline-node.node-success {
    border-color: var(--bs-success);
    background-color: var(--bs-success);
    color: #fff;
}

.timeline-node.node-warning {
    border-color: var(--bs-warning);
    background-color: var(--bs-warning);
    color: #fff;
}

.timeline-node.node-danger {
    border-color: var(--bs-danger);
    background-color: var(--bs-danger);
    color: #fff;
}

/* Ajustement de la zone de clic pour mobile */
.timeline-item-wrapper {
    padding: 10px 0;
}

/* ==========================================================================
   10. INDEX, BADGES & CHAT
   ========================================================================== */
.sab-danger { background-color: var(--weather-bg); color: #e11d48; border-left: 5px solid #b91c1c; }
.sab-warning { background-color: var(--weather-bg); color: #eab308; border-left: 5px solid #eab308; }
#penseBete { color: var(--texte-sombre); width: 100%; padding: 10px; }

/* CORRECTIF BADGES DARK */
body.dark-mode .badge.bg-light { background-color: #334155 !important; color: #f8fafc !important; }
body.dark-mode .badge { filter: brightness(0.9); font-weight: 600; letter-spacing: 0.5px; }

.chat-container { height: 60vh; overflow-y: auto; background: var(--weather-bg); padding: 15px; border-radius: 15px; }
body.dark-mode .reply-link { background: transparent !important; color: var(--couleur-accent) !important; }

/* Empêche les liens du dashboard de devenir bleus */
.card-dash a.text-decoration-none {
    color: inherit !important;
}

/* Force le blanc (ou gris très clair) sur le badge de gestation en Dark Mode */
body.dark-mode .badge-robe {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fond très léger */
    color: #f8fafc !important; /* Blanc cassé premium */
    border-color: #334155 !important;
}

/* Optionnel : si tu veux que le "/" et le "j" soient un peu plus discrets */
body.dark-mode .gest-muted {
    color: #94a3b8 !important;
    font-weight: normal;
}

/* Style par défaut (Mode Clair) */
.badge-robe {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #f1f5f9; 
    color: #475569;
}

/* Style spécifique pour le Mode Sombre */
body.dark-mode .badge-robe {
    background-color: transparent !important; /* On supprime le fond qui jure */
    border: 1px solid #334155 !important;    /* Bordure fine assortie aux cartes */
    color: #f8fafc !important;               /* Texte blanc cassé propre */
}

/* Optionnel : Si tu veux un très léger rappel de ta couleur d'accent (doré/bleu) sur la bordure */
body.dark-mode .badge-robe {
    border-color: rgba(var(--couleur-accent-rgb), 0.3) !important;
}

/* ==========================================================================
   IMPORT IFCE - REGROUPEMENT TBODY & NETTOYAGE LIGNE / FOND MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Transformation du conteneur global */
    .table-responsive table { 
        display: block !important; 
        width: 100% !important;
    }
    
    .table-responsive thead { 
        display: none !important; 
    }

    /* 2. BLOC FAMILLE UNIQUE (TBODY) */
    .table-responsive tbody.horse-family-group {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 8px 10px !important;
        background-color: var(--weather-bg) !important;
        border: var(--card-border) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    /* Unification du fond : TR et TD 100% transparents pour éviter toute variation de couleur au clic */
    .table-responsive tbody.horse-family-group tr,
    .table-responsive tbody.horse-family-group td {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* 3. Lignes Flexbox internes */
    .table-responsive tr.horse-row-item,
    .table-responsive tr.foal-row { 
        display: flex !important; 
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        border: none !important;
    }

    .table-responsive tr.horse-row-item {
        padding: 2px 0 !important;
    }

    /* Ligne d'arborescence des poulains */
    .table-responsive tr.foal-row {
        margin-top: 6px !important;
        padding: 8px 0 4px 12px !important;
        border-top: 1px dashed var(--border-color) !important;
        border-left: 3px solid var(--accent) !important;
    }

    /* Masquage de l'accordéon */
    .table-responsive tr.foal-mobile-hidden {
        display: none !important;
    }

    /* 4. Cellules TD */
    .table-responsive tr > td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Neutralisation des pseudos-éléments CSS */
    .table-responsive tr > td::before,
    .table-responsive tr > td::after,
    .table-responsive td::before,
    .table-responsive td::after { 
        display: none !important; 
        content: "" !important;
    }

    /* 5. ORDONNANCEMENT INTERNE SUR MOBILE */
    
    /* Checkbox (Gauche) */
    .table-responsive tr > td:nth-child(1) {
        order: 1 !important;
        width: auto !important;
        margin-right: 8px !important;
    }

    /* Nom & Année (Centre) */
    .table-responsive tr > td:nth-child(2) {
        order: 2 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Statut (Droite) */
    .table-responsive tr > td:nth-child(4) {
        order: 3 !important;
        width: auto !important;
        margin-left: auto !important;
        text-align: right !important;
    }

    /* Généalogie Père/Mère & Bouton Accordéon (Ligne 2) */
    .table-responsive tr > td:nth-child(3) {
        order: 4 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 2px !important;
        padding-top: 0 !important;
        border-top: none !important; /* Suppression de la ligne séparatrice sous l'année */
    }
}

/* Case à cocher agrandie pour tactile */
.checkbox-custom-lg {
    width: 1.35rem !important;
    height: 1.35rem !important;
    cursor: pointer;
}

/* ==========================================================================
   BARRE DE RECHERCHE UNIFIÉE (Loupe + Input)
   ========================================================================== */

/* Style de base pour la loupe (reprend la couleur de bordure globale) */
.input-group-text {
    border-color: var(--border-color) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- MODE SOMBRE --- */
body.dark-mode .input-group-text {
    background-color: #0f172a !important; /* Force le fond sombre identique à l'input */
    border-color: #334155 !important;     /* Bordure ardoise nuit */
    color: #94a3b8 !important;            /* Icône loupe en gris adouci */
}

body.dark-mode #searchInput {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode #searchInput::placeholder {
    color: #94a3b8 !important;
}

/* --- EFFET DE FOCUS PREMIUM (Clair & Sombre) --- */
/* Quand on clique dans l'input, la loupe ET l'input s'illuminent ensemble */
.input-group:focus-within .input-group-text {
    border-color: var(--couleur-accent) !important;
}

.input-group:focus-within #searchInput {
    border-color: var(--couleur-accent) !important;
    box-shadow: none !important; /* On retire l'ombre par défaut de Bootstrap pour la gérer sur le groupe complet */
}

.input-group:focus-within {
    border-radius: 10px;
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.2) !important; /* Lueur dorée sur tout le bloc */
/* ==========================================================================
   12. CORRECTIFS UNIFIÉS POUR LE MODE SOMBRE (Modaux, Tables & Boutons)
   ========================================================================== */
body.dark-mode .bg-white,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .modal-body,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: #1e293b !important; /* Bleu marine premium */
    color: #f8fafc !important;            /* Texte blanc */
    border-color: #334155 !important;     /* Bordures ardoise */
}

/* Force le fond des petits encadrés (ex: Généalogie) à passer en bleu nuit */
body.dark-mode .bg-light {
    background-color: #0f172a !important; 
}

/* Gestion des tableaux et listes imbriquées */
body.dark-mode .list-group-item,
body.dark-mode .table,
body.dark-mode .table td,
body.dark-mode .table th {
    background-color: #0f172a !important; /* Bleu nuit contrasté */
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Sécurité pour les lignes alternées Bootstrap (striped) */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #162235 !important;
    color: #f8fafc !important;
}

/* Fix pour les boutons outline et éléments clairs en dark mode */
body.dark-mode .btn-outline-dark,
body.dark-mode .btn-light {
    color: #f8fafc !important;
    border-color: var(--couleur-accent, #c5a059) !important;
    background-color: transparent !important;
}

body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-light:hover {
    background-color: var(--couleur-accent, #c5a059) !important;
    color: #0f172a !important;
}

/* Sécurité pour les textes, labels et titres dans les popups/modaux */
body.dark-mode .modal-title,
body.dark-mode .modal-header h5,
body.dark-mode .modal-body label,
body.dark-mode .modal-body .form-label {
    color: #f8fafc !important;
}

/* Ajustement du bouton "Ajouter un soin" (.btn-outline-success) en mode sombre */
body.dark-mode .btn-outline-success {
    color: var(--couleur-accent, #c5a059) !important;
    border-color: var(--couleur-accent, #c5a059) !important;
}
body.dark-mode .btn-outline-success:hover {
    background-color: var(--couleur-accent, #c5a059) !important;
    color: #0f172a !important;
}



/* ==========================================================================
   13. STYLISATION DES ONGLETS ET CORRECTION NATIVE DES CONTRASTES
   ========================================================================== */

/* 13.1 - L'En-tête des Onglets (Reste toujours sombre pour le côté haut de gamme) */
.header-tabs-container {
    background-color: #1e293b !important; /* Bleu marine de la charte */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.header-tabs-container .nav-tabs {
    border-bottom: none !important;
}

/* 13.2 - Style de base de tous les onglets */
.header-tabs-container .nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out;
    
    /* Inactif : Blanc estompé / argenté sur le fond sombre */
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Au survol d'un onglet inactif */
.header-tabs-container .nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 13.3 - L'ONGLET ACTIF (Résout le problème du "Doré sur Blanc") */
.header-tabs-container .nav-tabs .nav-link.active {
    color: var(--couleur-accent, #c5a059) !important; /* Texte Or/Sable */
    background: rgba(255, 255, 255, 0.08) !important; /* Supprime le blanc de Bootstrap et met un léger relief */
    border-bottom: 3px solid var(--couleur-accent, #c5a059) !important; /* Soulignement Or */
}

/* ==========================================================================
   13. STYLISATION DES ONGLETS ET CORRECTION NATIVE DES CONTRASTES
   ========================================================================== */

/* 13.1 - Conteneur principal (Reste toujours sombre pour le côté haut de gamme) */
.header-tabs-container {
    background-color: #1e293b !important; /* Bleu marine de la charte */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 13.2 - Style de base des onglets (Inactifs) */
#registreTabs.nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out;
    
    /* Couleur de base : Blanc argenté / estompé */
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Au survol d'un onglet inactif */
#registreTabs.nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 13.3 - L'ONGLET ACTIF (Verrouillé en DORÉ, supprime le noir de Bootstrap au clic) */
#registreTabs.nav-tabs .nav-link.active,
#registreTabs.nav-tabs .nav-link.active:focus,
#registreTabs.nav-tabs .nav-link.active:hover,
#registreTabs.nav-tabs .nav-link:active {
    color: var(--couleur-accent, #c5a059) !important; /* Doré impératif */
    background: rgba(255, 255, 255, 0.08) !important; /* Léger relief en fond */
    border-bottom: 3px solid var(--couleur-accent, #c5a059) !important; /* Soulignement doré */
    box-shadow: none !important; /* Supprime l'effet d'ombre bleue/noire de Bootstrap */
}

/* ==========================================================================
   13. STYLISATION DES ONGLETS ET CORRECTION NATIVE DES CONTRASTES
   ========================================================================== */

/* 13.1 - Conteneur principal (Reste toujours sombre pour le côté haut de gamme) */
.header-tabs-container {
    background-color: #1e293b !important; /* Bleu marine de la charte */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 13.2 - Style de base des onglets (Inactifs) */
#registreTabs.nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out;
    
    /* Couleur de base : Blanc argenté / estompé */
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Au survol d'un onglet inactif */
#registreTabs.nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 13.3 - L'ONGLET ACTIF (Verrouillé en DORÉ, supprime le noir de Bootstrap au clic) */
#registreTabs.nav-tabs .nav-link.active,
#registreTabs.nav-tabs .nav-link.active:focus,
#registreTabs.nav-tabs .nav-link.active:hover,
#registreTabs.nav-tabs .nav-link:active {
    color: var(--couleur-accent, #c5a059) !important; /* Doré impératif */
    background: rgba(255, 255, 255, 0.08) !important; /* Léger relief en fond */
    border-bottom: 3px solid var(--couleur-accent, #c5a059) !important; /* Soulignement doré */
    box-shadow: none !important; /* Supprime l'effet d'ombre bleue/noire de Bootstrap */
}

/* ==========================================================================
   13. STYLISATION DYNAMIQUE & CORRECTIONS DU MODE SOMBRE (Registre & Modals)
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 - RENDU EN MODE CLAIR (Par défaut)
   -------------------------------------------------------------------------- */
.header-tabs-container {
    background-color: #f1f5f9 !important; 
    border-bottom: 1px solid #e2e8f0 !important;
}

#registreTabs.nav-tabs .nav-link {
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

#registreTabs.nav-tabs .nav-link:hover {
    color: #1e293b !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

#registreTabs.nav-tabs .nav-link.active,
#registreTabs.nav-tabs .nav-link.active:focus {
    color: var(--couleur-accent, #c5a059) !important;
    background: #ffffff !important; 
    border-bottom: 3px solid var(--couleur-accent, #c5a059) !important;
    box-shadow: none !important;
}

#tab-soins-hist .text-primary,
#tab-mouvements .fw-bold {
    color: #1e293b !important;
}
/* --------------------------------------------------------------------------
   13.2 - CORRECTIONS MAGIQUES POUR LE MODE SOMBRE (body.dark-mode)
   -------------------------------------------------------------------------- */

/* 1. Correction immédiate des textes forcés en noir par Bootstrap (text-dark) */
body.dark-mode .text-dark,
body.dark-mode .form-check-label.text-dark,
body.dark-mode .form-label.text-dark,
body.dark-mode .card-header.text-dark,
body.dark-mode .alert-light strong.text-dark {
    color: #f8fafc !important; /* Passe en blanc cassé doux */
}

/* 2. Refonte esthétique du bloc de Rappels (Fini le jaune et le blanc flash) */
body.dark-mode .card.border-warning {
    border-color: rgba(245, 158, 11, 0.25) !important;
    background-color: #1e293b !important;
}

body.dark-mode .card-header.bg-warning {
    background-color: #78350f !important; /* Magnifique Ambre/Bronze sombre haut de gamme */
    color: #fef3c7 !important; /* Écriture ambre clair */
    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}

body.dark-mode .alert-light {
    background-color: #151f32 !important; /* Fond ardoise discret qui se fond dans la carte */
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* 3. Gestion Unifiée des Onglets du Registre (Sans doublons) */
body.dark-mode .header-tabs-container {
    background-color: #0f172a !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark-mode #registreTabs.nav-tabs {
    border-bottom: none !important;
}

body.dark-mode #registreTabs.nav-tabs .nav-link {
    color: var(--texte-gris, #94a3b8) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

body.dark-mode #registreTabs.nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode #registreTabs.nav-tabs .nav-link.active,
body.dark-mode #registreTabs.nav-tabs .nav-link.active:focus {
    color: var(--couleur-accent, #c5a059) !important; 
    background: #1e293b !important; /* S'intègre parfaitement avec le fond de carte */
    border: none !important;
    border-bottom: 3px solid var(--couleur-accent, #c5a059) !important;
}

/* 4. Tableaux & En-têtes (Éradication totale du fond blanc et fix du Hover) */
body.dark-mode .table {
    --bs-table-bg: #1e293b !important;
    --bs-table-color: #f8fafc !important;
    --bs-table-border-color: #334155 !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Force l'arrière-plan sombre directement sur les cellules pour tuer le blanc Bootstrap */
body.dark-mode .table th,
body.dark-mode .table td {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* En-tête du tableau (.table-light) passe en mode nuit ardoise */
body.dark-mode .table-light,
body.dark-mode .table thead th {
    --bs-table-bg: #0f172a !important;
    --bs-table-color: #94a3b8 !important;
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
    border-bottom: 2px solid #334155 !important;
}

/* Bloque le changement de couleur de police intempestif au survol de la souris */
body.dark-mode .table-hover tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important; /* Le texte reste clair et lisible */
}

/* Maintien de l'affichage de ton Or Équestre pour les éléments importants, même au survol */
body.dark-mode .text-primary,
body.dark-mode #tab-soins-hist .text-primary,
body.dark-mode #tab-mouvements .fw-bold,
body.dark-mode .table-hover tbody tr:hover td.fw-bold {
    color: var(--couleur-accent, #c5a059) !important;
}

body.dark-mode .table .text-muted {
    color: #94a3b8 !important;
}

/* 5. Harmonisation complète du Modal de Soin Groupé */
body.dark-mode .modal-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #334155 !important;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(1) brightness(2); /* Rend la croix de fermeture blanche */
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: var(--couleur-accent, #c5a059) !important;
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.25) !important;
}
/* ==========================================================================
   CHARTE GRAPHIQUE - GESTATIONS & POULINAGES
   ========================================================================== */


/* Boîtes de statistiques & Autocomplétion (Teinte Or très subtile) */
.stat-box { 
    background: rgba(197, 160, 89, 0.08); 
    border-radius: 15px; 
    padding: 10px; 
    text-align: center;
    color: var(--couleur-accent);
    font-weight: 600;
}
.autocomplete-items { 
    border: 1px solid var(--border-color); 
    background: var(--card-bg); 
    position: absolute; 
    z-index: 99; 
    width: 93%; 
    max-height: 200px; 
    overflow-y: auto; 
    border-radius: 0 0 10px 10px; 
}
.autocomplete-item { padding: 8px 12px; cursor: pointer; color: var(--texte-sombre); }
.autocomplete-item:hover { background-color: rgba(197, 160, 89, 0.15); }

/* Cartes des juments */
.jument-row-card { 
    padding: 15px; 
    border-radius: 15px; 
    background: var(--card-bg); 
    margin-bottom: 12px; 
    border: var(--card-border); 
    box-shadow: var(--ombre); 
}

/* Badges d'étapes */
.badge-acte { font-size: 0.75rem; font-weight: bold; padding: 5px 10px; border-radius: 8px; }
.badge-retard { background-color: #fff5f5; color: #dc3545; border: 1px solid #fecaca; }
.badge-today { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.badge-future { background-color: var(--weather-bg); color: var(--texte-gris); border: 1px solid var(--border-color); }

/* Navigation Onglets (Passage au Doré de l'application) */
.nav-pills .nav-link { border-radius: 10px; color: var(--texte-gris); font-weight: bold; font-size: 0.85rem; }
.nav-pills .nav-link.active { 
    background-color: var(--couleur-accent) !important; 
    color: white !important; 
}

/* Divers & Timeline */
.icon-gender { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; }
.timeline-nested-item { border-left: 3px solid var(--border-color); padding-left: 12px; position: relative; }
.timeline-nested-item.done { border-left-color: var(--couleur-accent); }

/* ==========================================================================
   BOUTONS ET BADGES ACTIONS SANS CONFLIT BOOTSTRAP (FOALIA)
   ========================================================================== */

/* Structure commune aux deux badges */
.foalia-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

/* Style Contour - Check-list Poulinage (Texte Or, fond transparent, bordure Or) */
.foalia-badge-outline {
    background-color: transparent !important;
    color: var(--couleur-accent, #c5a059) !important;
    border: 1px solid var(--couleur-accent, #c5a059) !important;
}
.foalia-badge-outline:hover {
    background-color: var(--couleur-accent, #c5a059) !important;
    color: #1e293b !important; /* Devient fond Or, texte bleu marine */
}

/* Style Plein - Valider la naissance (Fond Or, texte bleu marine) */
.foalia-badge-filled {
    background-color: var(--couleur-accent, #c5a059) !important;
    color: #1e293b !important;
    border: 1px solid var(--couleur-accent, #c5a059) !important;
}
.foalia-badge-filled:hover {
    background-color: var(--couleur-accent-hover, #b08c46) !important;
    border-color: var(--couleur-accent-hover, #b08c46) !important;
    color: #ffffff !important; /* S'assombrit et passe en texte blanc */
}

/* Petit bouton Éditer circulaire */
.foalia-btn-edit {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--weather-bg, #f1f5f9);
    color: var(--texte-gris, #64748b) !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}
.foalia-btn-edit:hover {
    background-color: #e2e8f0;
    color: var(--texte-sombre, #0f172a) !important;
}
body.dark-mode .foalia-btn-edit:hover {
    background-color: #334155;
}

/* --- Style de la boîte pour les dates et étapes --- */
.badge-acte-container {
    display: inline-block;
}

.badge-acte {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}

/* --- Variantes de couleurs pour le badge (selon tes conditions) --- */
.badge-retard { 
    background-color: #fee2e2 !important; 
    color: #b91c1c !important; 
    border-color: #fecaca !important; 
}
.badge-today { 
    background-color: #fef3c7 !important; 
    color: #b45309 !important; 
    border-color: #fde68a !important; 
}
.badge-future { 
    /* Style par défaut déjà défini dans .badge-acte */
}