/* app/static/css/style.css */

/* 1. Import Google Fonts (Playfair Display pour les titres, Lato pour le corps) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');

/* 2. Définir les variables de couleurs Nuoo */
:root {
    --nuoo-primary-green: #5E8C80; /* Le vert principal observé */
    --nuoo-primary-green-darker: #4a7066; /* Pour les survols/états actifs */
    --nuoo-light-bg: #F7F5F2;     /* Un beige/crème très clair */
    --nuoo-text-dark: #333333;     /* Gris foncé pour le texte */
    --nuoo-text-light: #FFFFFF;    /* Blanc pour texte sur fond sombre */
    --nuoo-border-color: #DDDDDD; /* Gris clair pour les bordures */
}

/* 3. Styles de base du corps et de la typographie */
body {
    font-family: 'Lato', sans-serif; /* Police par défaut pour le corps */
    color: var(--nuoo-text-dark);
    background-color: #FFFFFF; /* Fond blanc par défaut, peut être changé pour --nuoo-light-bg */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif; /* Police pour les titres */
    color: var(--nuoo-primary-green);      /* Titres en vert Nuoo */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

a {
    color: var(--nuoo-primary-green);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--nuoo-primary-green-darker);
    text-decoration: underline;
}

/* 4. Barre de Navigation */
/* Utiliser une classe personnalisée pour éviter de surcharger .bg-dark partout */
.navbar.bg-nuoo {
    background-color: var(--nuoo-primary-green) !important; /* Force la couleur primaire */
}

/* Assurer la lisibilité du texte dans la navbar */
.navbar.bg-nuoo .navbar-brand,
.navbar.bg-nuoo .nav-link,
.navbar.bg-nuoo .navbar-text {
    color: var(--nuoo-text-light) !important;
}

.navbar.bg-nuoo .nav-link:hover,
.navbar.bg-nuoo .nav-link.active {
    color: rgba(255, 255, 255, 0.8) !important; /* Légèrement atténué au survol */
}

.navbar.bg-nuoo .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar.bg-nuoo .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Style spécifique pour le bouton de déconnexion dans la navbar */
.navbar.bg-nuoo .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.9);
}
.navbar.bg-nuoo .btn-outline-light:hover {
     border-color: #FFFFFF;
     background-color: rgba(255, 255, 255, 0.1);
     color: #FFFFFF;
}


/* 5. Boutons */
.btn-primary {
    background-color: var(--nuoo-primary-green);
    border-color: var(--nuoo-primary-green);
    color: var(--nuoo-text-light);
    padding: 0.5rem 1.2rem;
    border-radius: 0.25rem; /* Coins légèrement arrondis */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--nuoo-primary-green-darker);
    border-color: var(--nuoo-primary-green-darker);
    color: var(--nuoo-text-light);
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(94, 140, 128, 0.5); /* Ombre focus assortie */
}

.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--nuoo-primary-green-darker);
    border-color: var(--nuoo-primary-green-darker);
}

/* Bouton Succès (vert standard Bootstrap ou vert Nuoo ?) */
/* Option 1: Garder le vert standard Bootstrap pour distinction */
/* .btn-success { ... } */
/* Option 2: Utiliser aussi le vert Nuoo pour le succès */
.btn-success {
    background-color: var(--nuoo-primary-green); /* Ou une autre nuance si besoin */
    border-color: var(--nuoo-primary-green);
    color: var(--nuoo-text-light);
    padding: 0.5rem 1.2rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn-success:hover {
    background-color: var(--nuoo-primary-green-darker);
    border-color: var(--nuoo-primary-green-darker);
    color: var(--nuoo-text-light);
}
.btn-success:focus, .btn-success.focus {
    box-shadow: 0 0 0 0.2rem rgba(94, 140, 128, 0.5);
}

/* 6. Cartes (Cards) */
.card {
    border: 1px solid var(--nuoo-border-color);
    border-radius: 0.3rem; /* Coins légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Ombre très subtile */
}

.card-header {
    background-color: #f8f9fa; /* Gris très clair standard Bootstrap */
    /* Alternative: background-color: var(--nuoo-light-bg); */
    border-bottom: 1px solid var(--nuoo-border-color);
    font-weight: bold; /* Mettre les titres de carte en gras */
    color: var(--nuoo-text-dark);
    /* Optionnel: utiliser la police des titres
    font-family: 'Playfair Display', serif;
    color: var(--nuoo-primary-green); */
}

/* 7. Formulaires */
.form-control:focus {
    border-color: var(--nuoo-primary-green);
    box-shadow: 0 0 0 0.2rem rgba(94, 140, 128, 0.3); /* Ombre focus assortie plus subtile */
}

.form-label {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

/* 8. Alertes (Facultatif: ajuster les couleurs si besoin) */
/* .alert-success { background-color: #e1f0e3; border-color: #badbcc; color: #3d7a4b; } */
/* .alert-danger { ... } */
/* .alert-info { ... } */
/* .alert-warning { ... } */

/* 9. Badges (Facultatif: utiliser la couleur primaire pour info) */
.badge.bg-info {
    background-color: var(--nuoo-primary-green) !important;
}
.badge.bg-secondary {
    background-color: #6c757d !important; /* Garder gris standard */
}
.badge.bg-danger {
    background-color: #dc3545 !important; /* Garder rouge standard */
}

/* 10. Ajustements spécifiques (si besoin) */
hr {
    border-top: 1px solid var(--nuoo-border-color);
    opacity: 0.5;
}