/* ============================================================
   style.css — Gestion des dossiers · Design system Creth/SATIH
   Palette : navy #2B2C73 · orange coral #EC7A4B · warm neutrals
   Typo    : Nunito 400/600/700/800 · 18 px body · 1.7 lh
   Accès.  : WCAG AAA target · focus rings · no motion abuse
   ============================================================ */

/* ─── 1. Tokens Creth ─────────────────────────────────────────────────────── */
:root {
    /* Navy brand */
    --creth-navy-900: #16174a;
    --creth-navy-800: #1e1f5e;
    --creth-navy:     #2B2C73;
    --creth-navy-600: #3d3e8a;
    --creth-navy-400: #6667a8;
    --creth-navy-200: #b3b4d4;
    --creth-navy-100: #e3e3f3;
    --creth-navy-50:  #f0f0fa;

    /* Orange coral — action, CTA */
    --creth-orange-700: #c4602c;
    --creth-orange-600: #d86d38;
    --creth-orange:     #EC7A4B;
    --creth-orange-400: #f09270;
    --creth-orange-200: #f8c4a8;
    --creth-orange-100: #fde9de;
    --creth-orange-50:  #fef6f1;

    /* Danger */
    --creth-red: #D32C47;

    /* Neutrals chauds */
    --bg-page:    #FAF8F5;
    --bg-surface: #FFFFFF;
    --fg-1:       #1a1a2e;
    --fg-2:       #3b3b5c;
    --fg-muted:   #6a6a8a;
    --border-subtle:  #e8e5df;
    --border-default: #ccc9bf;

    /* Ombres navy-tintées */
    --shadow-xs: 0 1px 3px rgba(43,44,115,.06);
    --shadow-sm: 0 2px 8px rgba(43,44,115,.09);
    --shadow-md: 0 4px 16px rgba(43,44,115,.13);
    --shadow-lg: 0 8px 32px rgba(43,44,115,.16);

    /* Rayons */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-pill: 9999px;

    /* Bootstrap overrides */
    --bs-primary:       #2B2C73;
    --bs-primary-rgb:   43, 44, 115;
    --bs-secondary:     #6a6a8a;
    --bs-danger:        #D32C47;
    --bs-danger-rgb:    211, 44, 71;
    --bs-success:       #1a7a4a;
    --bs-success-rgb:   26, 122, 74;
    --bs-body-font-family: 'Nunito', system-ui, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-color:     #1a1a2e;
    --bs-body-bg:        #FAF8F5;
    --bs-border-radius:  var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-link-color:     var(--creth-orange);
    --bs-link-hover-color: var(--creth-orange-700);
}

/* ─── 2. Base & typographie ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1rem;          /* 16 px base, composants à 17–18 px */
    line-height: 1.7;
    color: var(--fg-1);
    background-color: var(--bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--fg-1);
}

a {
    color: var(--creth-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover { color: var(--creth-orange-700); }

/* ─── 3. Focus rings accessibles (WCAG AAA) ────────────────────────────────── */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--creth-orange-200), 0 0 0 5px var(--creth-orange);
}

/* ─── 4. Layout principal ──────────────────────────────────────────────────── */
main.container-fluid {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
}

/* ─── 5. Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
    background-color: var(--creth-navy) !important;
    min-height: 68px;
    box-shadow: 0 2px 12px rgba(43,44,115,.25);
}

.navbar-brand {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .2px;
    gap: .6rem;
}

.navbar-brand-text {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .15px;
    color: #fff;
}

.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity .2s;
}
.navbar-brand:hover .navbar-logo { opacity: .85; }

.navbar .nav-link {
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none;
    padding: .45rem .8rem !important;
    border-radius: var(--radius-sm);
    transition: color .15s, background-color .15s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: #fff !important;
    background-color: rgba(255,255,255,.12);
}
.navbar .nav-link.active {
    color: #fff !important;
    background-color: rgba(255,255,255,.18);
}

/* Badge admin dans la nav */
.navbar .badge.bg-warning {
    background-color: var(--creth-orange) !important;
    color: #fff !important;
    font-size: .65em;
    border-radius: var(--radius-pill);
}

/* Dropdown nav utilisateur */
.navbar .dropdown-menu {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: .5rem;
}
.navbar .dropdown-item {
    border-radius: var(--radius-sm);
    font-size: .9rem;
    padding: .45rem .8rem;
    color: var(--fg-2);
    text-decoration: none;
}
.navbar .dropdown-item:hover { background-color: var(--creth-navy-50); }
.navbar .dropdown-item.text-danger { color: var(--creth-red) !important; }
.navbar .dropdown-item.text-danger:hover { background-color: #fdf0f3; }
.navbar .dropdown-divider { border-color: var(--border-subtle); }

/* ─── 6. Pied de page ──────────────────────────────────────────────────────── */
footer.footer-creth {
    background-color: var(--creth-navy);
    color: rgba(255,255,255,.75);
    font-size: .82rem;
    padding: 1.1rem 0;
    margin-top: auto;
}

/* ─── 7. Cartes ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-md); }

.card-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-size: .875rem;
    font-weight: 700;
    padding: .85rem 1.25rem;
    background-color: var(--bg-surface) !important;
    color: var(--fg-1);
}
.card-header.bg-primary {
    background-color: var(--creth-navy) !important;
    color: #fff !important;
    border-bottom: none !important;
}
.card-header.bg-light {
    background-color: var(--creth-navy-50) !important;
    color: var(--creth-navy) !important;
}

.card-footer {
    background-color: var(--creth-navy-50) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    font-size: .82rem;
    color: var(--fg-muted);
}

/* ─── 8. Boutons ─────────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .03em;
    border-radius: var(--radius-pill);
    padding: .45rem 1.2rem;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
    text-decoration: none;
}

/* Bouton principal = orange coral */
.btn-primary {
    background-color: var(--creth-orange) !important;
    border-color: var(--creth-orange) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--creth-orange-600) !important;
    border-color: var(--creth-orange-600) !important;
}
.btn-primary:active {
    background-color: var(--creth-orange-700) !important;
    border-color: var(--creth-orange-700) !important;
}

/* Bouton contour navy */
.btn-outline-primary {
    border-color: var(--creth-navy) !important;
    color: var(--creth-navy) !important;
    background: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--creth-navy-50) !important;
    color: var(--creth-navy) !important;
}

/* Bouton contour secondaire */
.btn-outline-secondary {
    border-color: var(--border-default) !important;
    color: var(--fg-2) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--creth-navy-50) !important;
    border-color: var(--creth-navy-200) !important;
    color: var(--creth-navy) !important;
}

/* Bouton navy plein (success → navy ici) */
.btn-success {
    background-color: var(--creth-navy) !important;
    border-color: var(--creth-navy) !important;
    color: #fff !important;
}
.btn-success:hover {
    background-color: var(--creth-navy-800) !important;
    border-color: var(--creth-navy-800) !important;
}

/* Bouton danger */
.btn-danger {
    background-color: var(--creth-red) !important;
    border-color: var(--creth-red) !important;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: #b52340 !important;
    border-color: #b52340 !important;
}

/* Petits boutons */
.btn-sm {
    font-size: .8rem;
    padding: .3rem .85rem;
}

/* Bouton outline-dark (Imprimer) */
.btn-outline-dark {
    border-color: var(--fg-2) !important;
    color: var(--fg-2) !important;
}
.btn-outline-dark:hover {
    background-color: var(--fg-2) !important;
    color: #fff !important;
}

/* Bouton warning */
.btn-warning {
    background-color: #e6a817 !important;
    border-color: #e6a817 !important;
    color: var(--fg-1) !important;
}

/* ─── 9. Formulaires ─────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    font-family: 'Nunito', sans-serif;
    font-size: .95rem;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: .55rem .9rem;
    background-color: var(--bg-surface);
    color: var(--fg-1);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--creth-orange);
    box-shadow: 0 0 0 3px var(--creth-orange-100);
    outline: none;
}
.form-control::placeholder { color: var(--fg-muted); opacity: 1; }

.form-label {
    font-weight: 700;
    font-size: .875rem;
    color: var(--fg-2);
    margin-bottom: .35rem;
}

.input-group-text {
    background-color: var(--creth-navy-50);
    border: 1.5px solid var(--border-default);
    color: var(--creth-navy-400);
    border-radius: var(--radius-sm);
}
.input-group > :not(:first-child) .input-group-text,
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-left: none;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.65;
}

/* Checkbox "Se souvenir de moi" */
.form-check-input:checked {
    background-color: var(--creth-orange);
    border-color: var(--creth-orange);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--creth-orange-100);
    border-color: var(--creth-orange);
}

/* ─── 10. Tableaux ───────────────────────────────────────────────────────────── */
.table {
    font-size: .9rem;
    color: var(--fg-1);
    --bs-table-striped-bg: var(--creth-navy-50);
}

.table th {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    color: var(--creth-navy);
}

.table-primary {
    --bs-table-bg: var(--creth-navy-50);
    --bs-table-border-color: var(--creth-navy-100);
}
.table-primary th,
.table-primary td {
    color: var(--creth-navy) !important;
}

/* Tableau bénéficiaires */
.benef-table thead th {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .85rem 1rem;
    white-space: nowrap;
    color: var(--creth-navy) !important;
}

.benef-table tbody td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.benef-table tbody tr:last-child td { border-bottom: none; }

.benef-row { cursor: pointer; transition: background-color .12s; }
.benef-row:hover { background-color: var(--creth-orange-50) !important; }

.benef-id {
    font-size: .78rem;
    font-weight: 700;
    background: var(--creth-navy-50);
    color: var(--creth-navy);
    padding: .2em .55em;
    border-radius: var(--radius-sm);
    font-family: 'Nunito', monospace;
}

/* ─── 11. Badges ─────────────────────────────────────────────────────────────── */
.badge {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .72em;
    letter-spacing: .02em;
    border-radius: var(--radius-pill);
}

.badge.bg-primary   { background-color: var(--creth-navy) !important; }
.badge.bg-success   { background-color: var(--bs-success) !important; }
.badge.bg-secondary { background-color: var(--creth-navy-400) !important; }
.badge.bg-warning   { background-color: var(--creth-orange) !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--creth-navy-400) !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--creth-red) !important; }

/* Statuts bénéficiaires */
.badge.bg-success-subtle {
    background-color: #e6f4ed !important;
    color: #1a7a4a !important;
    border-color: #b8dfc9 !important;
}
.badge.bg-secondary-subtle {
    background-color: var(--creth-navy-50) !important;
    color: var(--creth-navy-400) !important;
    border-color: var(--creth-navy-100) !important;
}

/* Badge service */
.badge-service {
    background: var(--creth-orange-100);
    color: var(--creth-orange-700);
    font-weight: 700;
    font-size: .72em;
    padding: .3em .65em;
    border-radius: var(--radius-pill);
}

/* Badge type contact rapport suivi */
.badge.bg-info.text-dark {
    background-color: var(--creth-navy-100) !important;
    color: var(--creth-navy) !important;
}

/* ─── 12. Alertes flash ──────────────────────────────────────────────────────── */
.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: .9rem;
    font-weight: 600;
}
.alert-success {
    background-color: #e8f5ee;
    border-color: #b8dfc9;
    color: #1a5c38;
}
.alert-danger {
    background-color: #fcedf0;
    border-color: #f0b8c2;
    color: #8b1a2f;
}
.alert-info {
    background-color: var(--creth-navy-50);
    border-color: var(--creth-navy-100);
    color: var(--creth-navy-600);
}
.alert-warning {
    background-color: #fef6e6;
    border-color: #f8dfa0;
    color: #7a5200;
}

/* ─── 13. Cartes statistiques (page d'accueil) ───────────────────────────────── */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle) !important;
    transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); }

.stat-card__icon {
    font-size: 1.6rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card__value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--fg-1);
}

.stat-card__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fg-muted);
}

.stat-card--total .stat-card__icon {
    background: var(--creth-navy-50);
    color: var(--creth-navy);
}
.stat-card--actif .stat-card__icon {
    background: #e6f4ed;
    color: #1a7a4a;
}
.stat-card--cloture .stat-card__icon {
    background: var(--creth-navy-50);
    color: var(--creth-navy-400);
}

/* ─── 14. Rapport : contenu lecture ──────────────────────────────────────────── */
.rapport-content {
    line-height: 1.85;
    font-size: .95rem;
    color: var(--fg-2);
    white-space: pre-wrap;
}
.border-start.border-primary {
    border-color: var(--creth-orange) !important;
}

/* ─── 15. List groups ───────────────────────────────────────────────────────── */
.list-group-item {
    border-color: var(--border-subtle) !important;
    font-size: .9rem;
    color: var(--fg-2);
}
.list-group-item-action:hover {
    background-color: var(--creth-orange-50) !important;
    color: var(--fg-1);
}

/* ─── 16. Code inline (identifiants) ────────────────────────────────────────── */
code {
    font-family: 'Nunito', ui-monospace, monospace;
    font-size: .82em;
    background: var(--creth-navy-50);
    color: var(--creth-navy);
    padding: .15em .45em;
    border-radius: 5px;
}

/* ─── 17. Liens dans les nav ─────────────────────────────────────────────────── */
.nav-link.active {
    color: var(--creth-orange) !important;
    font-weight: 700;
}

/* ─── 18. Section filtres (page d'accueil) ───────────────────────────────────── */
.filter-card .card-header {
    background-color: var(--creth-navy-50) !important;
    color: var(--creth-navy) !important;
}

/* ─── 19. Impression ─────────────────────────────────────────────────────────── */
@media print {
    .navbar, footer, .btn, .alert, .no-print { display: none !important; }

    body {
        background: #fff;
        font-size: 11pt;
        color: #000;
    }

    .print-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    .card-header {
        background-color: #f4f4f4 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a[href]::after { content: none !important; }
    .page-break { page-break-before: always; }
}

/* ─── 20. Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    h1.h4 { font-size: 1.05rem; }

    .stat-card { padding: .85rem 1rem; }
    .stat-card__value { font-size: 1.55rem; }
    .stat-card__icon { width: 42px; height: 42px; font-size: 1.3rem; }

    .btn { font-size: .82rem; padding: .4rem 1rem; }
    .btn-sm { font-size: .75rem; padding: .25rem .7rem; }
}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}