/* =====================================================
   FNDA – Charte graphique officielle
   Vert FNDA : #1A6B3C  |  Or : #D4A017  |  Rouge : #C0392B
   ===================================================== */

:root {
    --fnda-green:         #1A7340;   /* vert logo FNDA */
    --fnda-green-light:   #228B50;   /* survol / actif */
    --fnda-green-dark:    #145730;   /* bord / ombre */
    --fnda-gold:          #F5C000;   /* triangle doré logo */
    --fnda-red:           #CC2200;   /* bande rouge drapeau Bénin */
    --fnda-sidebar-bg:    #1A2E22;   /* fond sidebar */
    --fnda-sidebar-hover: #24402E;   /* ligne survolée */
    --fnda-text:          #2C3E50;   /* texte général */
    --fnda-bg:            #F0F5F2;   /* fond page */
}

/* ── Global ───────────────────────────────────────── */
/* Base à 16px (18px - 1,5pt ≈ 2px) : la quasi-totalité des tailles de
   police de l'appli (Bootstrap compris) sont en rem/em, donc ce seul
   réglage les réduit toutes proportionnellement, y compris sur les
   pages d'auth qui chargent aussi ce fichier. Remonté à 18px dans une
   précédente itération pour la lisibilité, mais jugé trop grand à
   l'usage sur l'ensemble de l'appli - revenu à la taille standard du
   navigateur. */
html {
    font-size: 16px;
}

body {
    font-family: 'Segoe UI', 'Source Sans Pro', Arial, sans-serif;
    color: var(--fnda-text);
    background-color: var(--fnda-bg);
}

a { text-decoration: none !important; }

/* ── Logo mini / lg toggle ────────────────────────── */
/* master_style.css met les deux en inline-block — on corrige ici */
.main-header .logo .logo-mini {
    display: none !important;
}
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
    display: block !important;
}
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
    display: none !important;
}

/* ── Header / Navbar ──────────────────────────────── */
.main-header,
.skin-blue .main-header .navbar {
    background: var(--fnda-green) !important;
    border-bottom: 3px solid var(--fnda-gold) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.main-header .logo,
.skin-blue .main-header .logo {
    background: #FFFFFF !important;
    border-right: 1px solid #e0e0e0 !important;
    padding: 6px 12px !important;
}

.main-header .logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.main-header .logo img {
    max-height: 48px;
    width: auto;
    display: block;
}

/* ── Sidebar ──────────────────────────────────────── */
.skin-blue .sidebar,
.skin-blue .main-sidebar,
.main-sidebar {
    background: var(--fnda-sidebar-bg) !important;
}

.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
    color: #C8D8CC !important;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    background: var(--fnda-sidebar-hover) !important;
    color: #FFFFFF !important;
    border-left: 3px solid var(--fnda-gold) !important;
}

.skin-blue .sidebar-menu > li.active > a {
    background: var(--fnda-green) !important;
}

.sidebar-menu > li > a > i {
    color: var(--fnda-gold) !important;
    width: 20px;
}

.skin-blue .treeview-menu > li > a {
    color: #A8C4B0 !important;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
    color: #FFFFFF !important;
}

.skin-blue .sidebar .user-panel .info a {
    color: #C8D8CC !important;
}

.treeview-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.treeview-menu > li > a > span:not(.menu-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.treeview-menu > li.menu-header {
    padding: 10px 15px 4px 34px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6E8A78;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
}

.treeview-menu > li.menu-header:first-child {
    padding-top: 4px;
}

.treeview-menu .menu-badge {
    margin-left: auto;
    background: rgba(245, 192, 0, .16);
    color: var(--fnda-gold);
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
}

.skin-blue .treeview-menu > li.active > a .menu-badge,
.treeview-menu > li > a:hover .menu-badge {
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}

.sidebar-menu > li > a.btn-new-submission-fnda {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 6px 12px;
    padding: 10px 14px !important;
    border-radius: 8px;
    background: var(--fnda-gold) !important;
    color: #000000 !important;
    font-weight: 700;
    border-left: none !important;
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    white-space: normal;
}

.skin-blue .sidebar-menu > li:hover > a.btn-new-submission-fnda,
.skin-blue .sidebar-menu > li.active > a.btn-new-submission-fnda {
    background: #FFD426 !important;
    color: #000000 !important;
    border-left: none !important;
}

.sidebar-menu > li > a.btn-new-submission-fnda > i {
    color: #000000 !important;
    flex-shrink: 0;
}

.sidebar-menu > li > a.btn-new-submission-fnda > span {
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.25;
}

/* ── Pied de page collé en bas (sticky footer) ───────
   AdminLTE 2 calcule la hauteur de .content-wrapper en JS au chargement
   (template.js: Layout.fix, basé sur les hauteurs mesurées du header/
   footer à cet instant précis) et la fige en style inline — un calcul qui
   se retrouve facilement faux (fontes pas encore appliquées, contenu
   ajouté après coup...) et laisse un vide sous le footer. On bascule sur
   un sticky-footer flexbox pur : min-height:0 !important neutralise
   l'inline-style que le JS continue de poser, sans avoir à toucher à ce
   script partagé. */
.wrapper {
    display: flex;
    flex-direction: column;
    /* !important nécessaire : Layout.prototype.init() (template.js) pose
       min-height:100% en style inline sur .wrapper au chargement, qui
       l'emporterait sinon (spécificité inline > feuille de style). 100%
       ne se résout d'ailleurs à rien d'utile ici (html/body reçoivent la
       même valeur inline, sans hauteur explicite en amont dans la chaîne
       de parents) : .wrapper retombe alors sur la hauteur de son contenu
       au lieu de remplir la fenêtre, laissant un vide entre le footer et
       le bas de la page sur les pages au contenu court. */
    min-height: 100vh !important;
}

.content-wrapper {
    background: var(--fnda-bg) !important;
    flex: 1 0 auto;
    min-height: 0 !important;
}

.main-footer {
    flex-shrink: 0;
}

/* ── Sidebar : hauteur indépendante du contenu de page ──
   master_style.css pose .main-sidebar en position:absolute avec
   min-height:100% - une hauteur relative au CONTENU de la sidebar
   elle-même (le menu, ~50 entrées tous rôles confondus), pas à la page.
   Sur une page courte (ex. dashboard admin avec un seul petit widget),
   le menu déborde alors de .wrapper (limité à 100vh ci-dessus) : la
   page entière devient aussi haute que la sidebar, le footer se
   retrouve visuellement "au milieu" et l'espace en dessous n'est que le
   fond de body qui transparaît. En position:fixed avec son propre
   défilement interne, la hauteur de la sidebar ne dépend plus jamais de
   celle de la page (comportement identique pour le collapse/mini, basé
   sur un transform, indifférent à position:absolute vs fixed). */
.main-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    min-height: 0;
}

/* ── Box / Card ───────────────────────────────────── */
.box {
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(26,107,60,.10) !important;
    border-top: 3px solid var(--fnda-green) !important;
}

.box-header.with-border {
    background: var(--fnda-green) !important;
    color: #FFFFFF !important;
    border-radius: 4px 4px 0 0 !important;
    border-bottom: none !important;
    padding: 12px 20px !important;
}

.box-header.with-border h4,
.box-header.with-border h3,
.box-header.with-border .box-title {
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: .02em;
}

.box-header.with-border .box-controls a {
    color: rgba(255,255,255,.7) !important;
}

.box-body {
    padding: 20px !important;
}

/* ── Buttons ──────────────────────────────────────── */
.btn-green,
.bg-green.btn {
    background-color: var(--fnda-green) !important;
    border-color: var(--fnda-green-dark) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .2s, transform .1s;
}

.btn-green:hover,
.bg-green.btn:hover {
    background-color: var(--fnda-green-light) !important;
    border-color: var(--fnda-green) !important;
    transform: translateY(-1px);
}

.btn-green:active { transform: translateY(0); }

.skin-blue .btn-primary,
.btn-primary {
    background-color: var(--fnda-green) !important;
    border-color: var(--fnda-green-dark) !important;
}

.skin-blue .btn-primary:hover {
    background-color: var(--fnda-green-light) !important;
}

/* ── Utility colours ──────────────────────────────── */
.bg-green   { background-color: var(--fnda-green) !important; }
.bg-gold    { background-color: var(--fnda-gold)  !important; }
.bg-gray    { background-color: #67757c; }
.text-green { color: var(--fnda-green) !important; }
.border-green { border-color: var(--fnda-green) !important; color: var(--fnda-green); }

/* ── Form controls ────────────────────────────────── */
.form-control:focus {
    border-color: var(--fnda-green) !important;
    box-shadow: 0 0 0 .2rem rgba(26,107,60,.20) !important;
}

.input-group-text.bg-green {
    background-color: var(--fnda-green) !important;
    border-color: var(--fnda-green) !important;
    color: #FFFFFF !important;
}

/* ── Breadcrumb / content header ──────────────────── */
.content-header { border-bottom: 2px solid var(--fnda-gold); }

.content-header h1 {
    color: var(--fnda-green);
    font-weight: 700;
    font-size: 1.4rem;
}

.breadcrumb-item.active,
.breadcrumb > li + li::before { color: var(--fnda-green-light); }

/* ── Multi-step form indicator ────────────────────── */
.form-steps {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 20px auto 15px;
    z-index: 1;
}

.form-steps > ul {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-steps > ul > li {
    display: inline-block;
    width: auto;
    text-align: center;
    position: relative;
    padding: .5rem 2.5rem;
    border-radius: 30px;
    margin: 0 10px;
    background-color: #f0f4f1;
    border: 2px solid #c8d8cc;
    line-height: 24px;
}

.form-steps > ul > li a,
.footer-link { color: #455a64 !important; }

.form-steps > ul > li.current {
    border: 2px solid var(--fnda-green);
    background-color: var(--fnda-green);
}

.form-steps > ul > li.current > a {
    color: #FFFFFF !important;
    cursor: default;
}

/* ── Champs de formulaire (inputs / textarea / select2) ──
   Style unifié, cohérent avec le reste de l'interface (cartes,
   stepper, boutons) plutôt que le gris générique Bootstrap. ── */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #D7E3DB;
    border-radius: 8px;
    background-color: #FBFDFC;
    color: #1C2B22;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control {
    min-height: 40px;
    padding: .5rem .85rem;
    font-size: .92rem;
    box-shadow: none;
}

textarea.form-control {
    min-height: 90px;
}

.form-control::placeholder {
    color: #9BB0A2;
    opacity: 1;
}

.form-control:focus {
    border-color: var(--fnda-green);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(26, 115, 64, .12);
    outline: 0;
    color: #1C2B22;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #F9FBFA;
    border-color: #E4EDE8;
    color: #6B8573;
}

.form-control.is-invalid {
    border-color: #E4574C;
}

/* Champ signalé manquant en arrivant sur profil.edit depuis l'alerte
   "profil incomplet" (cf. submissions/create.blade.php ?missing=...). */
.field-missing-highlight {
    border-color: #E4574C !important;
    box-shadow: 0 0 0 2px rgba(228,87,76,.15) !important;
}

/* ── Select2 ──────────────────────────────────────── */
.select2-container { width: 100% !important; }

.select2-container .select2-selection--single { height: 40px !important; }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 14px !important;
    color: #1C2B22;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 6px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 40px !important;
    padding: 3px 6px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--fnda-green) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 64, .12);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fnda-green) !important;
    border: 1px solid var(--fnda-green-dark) !important;
    border-radius: 6px !important;
    color: #fff !important;
    padding: 2px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 6px !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--fnda-green) !important;
}

.select2-dropdown {
    border-color: #D7E3DB !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* ── Content sections ─────────────────────────────── */
.content-form {
    background: #F8FAF9;
    min-height: 250px;
    padding: 1rem;
    border-radius: 4px;
}

div.col-md-5.text-bold h5,
div.col-md-7.text-content h5 { min-height: 36px; }

.fieldset {
    border: 1px solid var(--fnda-green) !important;
    border-radius: 4px;
    padding: 12px !important;
    margin-bottom: 15px !important;
}

.legend {
    width: fit-content !important;
    width: -moz-fit-content !important;
    font-size: 1.1rem;
    color: var(--fnda-green);
    font-weight: 600;
}

/* ── Typography ───────────────────────────────────── */
.title    { font-size: 1.1rem; color: var(--fnda-text); }
.size     { font-size: 1.1rem; }
.text-black { color: #000 !important; }

div.col-6.text-bold { min-height: 60px; }
.alert h4 { font-weight: 400 !important; }

/* ── File links ───────────────────────────────────── */
.link-show-file  { font-size: 15px; }
a.link-show-file:hover { color: var(--fnda-gold) !important; }
.link-show-file > i   { font-size: 1.5em; color: rgba(17,17,133,.5); }

.link-add-file      { font-size: 15px; }
.link-add-file-icon { font-size: 1.5em; margin-top: 5px; }

/* ── Misc ─────────────────────────────────────────── */
.plan-box  { padding-left: 15px; padding-right: 15px; margin-top: -15px; }
.size-icon { font-size: 17px; }
.hide      { display: none; }

/* ── Badges & labels ──────────────────────────────── */
.badge-success, .label-success { background-color: var(--fnda-green) !important; }
.badge-warning, .label-warning { background-color: var(--fnda-gold)  !important; color: #000 !important; }
.badge-danger,  .label-danger  { background-color: var(--fnda-red)   !important; }

/* ── Table ────────────────────────────────────────── */
.table thead th {
    background-color: var(--fnda-green) !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid var(--fnda-gold) !important;
    font-weight: 600;
}

.table-hover tbody tr:hover { background-color: rgba(26,107,60,.06); }

/* ── Pagination ───────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--fnda-green) !important;
    border-color: var(--fnda-green) !important;
    color: #fff !important;
}

.page-link { color: var(--fnda-green) !important; }
.page-link:hover { background-color: var(--fnda-gold) !important; color: #000 !important; }

/* Pagination DataTables : master_style.css (AdminLTE) impose du bleu/violet
   (#2196F3 / #9C27B0) qui ne correspond plus à la charte FNDA. Sur les
   pages qui chargent leur propre CSS DataTables via @section('style')
   (voir layouts/master.blade.php, @yield('style') après ce fichier), cette
   feuille se retrouve après style.css dans le <head> - d'où le !important
   ci-dessous, pour ne plus dépendre de l'ordre de chargement entre pages.
   Page courante en vert, survol en or (même convention que .badge-warning
   plus bas : fond or + texte noir, le blanc manquant de contraste dessus). */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    border-color: var(--fnda-green) !important;
    background-color: var(--fnda-green) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #000 !important;
    border-color: var(--fnda-gold) !important;
    background-color: var(--fnda-gold) !important;
}
.paging_simple_numbers .pagination .paginate_button.active a,
.paging_simple_numbers .pagination .paginate_button.active .page-link {
    background: var(--fnda-green) !important;
    color: #fff !important;
}
.paging_simple_numbers .pagination .paginate_button:hover a,
.paging_simple_numbers .pagination .paginate_button:hover .page-link {
    background: var(--fnda-gold) !important;
    color: #000 !important;
}

/* ── Alerts ───────────────────────────────────────── */
.alert-success { border-left: 4px solid var(--fnda-green); }
.alert-warning { border-left: 4px solid var(--fnda-gold); }
.alert-danger  { border-left: 4px solid var(--fnda-red); }

/* ── Bandeau "profil incomplet" (submissions/create.blade.php) ───
   Remplace .alert-warning (orange saturé #ffc36d + texte blanc, cf.
   master_style.css - peu harmonieux avec la charte FNDA) par le même
   type de bandeau plat que .on-behalf-banner, en ton or/vert du logo. */
.profile-incomplete-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #FFF8E1;
    border-left: 4px solid var(--fnda-gold);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 24px;
    color: #5A4A00;
}
.profile-incomplete-banner .mdi {
    color: var(--fnda-gold);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.profile-incomplete-banner-body { flex: 1; min-width: 0; }
.profile-incomplete-banner-title { font-weight: 700; color: #3A2E00; }
.profile-incomplete-banner ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.profile-incomplete-banner-close {
    background: none;
    border: none;
    color: #5A4A00;
    opacity: .6;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.profile-incomplete-banner-close:hover { opacity: 1; }

/* Bouton d'action dans le bandeau ci-dessus (vert FNDA, s'accorde avec
   l'or comme le logo — vert et or sont les 2 couleurs de marque). */
.alert-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 16px;
    background: var(--fnda-green);
    color: #fff !important;
    font-size: .92rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none !important;
}
.alert-cta-btn:hover { background: #145730; color: #fff !important; }

/* ── User dropdown header ─────────────────────────── */
.navbar-nav > .user-menu > .dropdown-menu {
    width: 280px !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background: linear-gradient(135deg, var(--fnda-green) 0%, var(--fnda-green-light) 100%) !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 100px;
    padding: 16px 14px;
    text-align: left;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin: 0;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
    margin: 0;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
    display: block;
    opacity: .85;
    word-break: break-all;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header .btn {
    margin-top: 10px;
}

/* ── Notification menu ────────────────────────────── */
.dropdown-menu > .header {
    background: var(--fnda-green) !important;
    color: #FFFFFF !important;
}

/* ── Scrollbar (webkit) ───────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: #f0f4f1; }
::-webkit-scrollbar-thumb  { background: var(--fnda-green); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fnda-green-light); }

/* ── Form sections (demande de facilité) ──────────── */
.form-section {
    background: #fff;
    border: 1.5px solid #E4EDE8;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #EEF4F0;
    background: #FAFCFB;
}

.form-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(26,115,64,.12);
    color: #1A7340;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-section-icon.icon-blue   { background: rgba(52,152,219,.13); color: #2980B9; }
.form-section-icon.icon-orange { background: rgba(211,84,0,.12);   color: #D35400; }

.form-section-title {
    font-size: 1.075rem;
    font-weight: 700;
    color: #1C2B22;
    line-height: 1.2;
}

.form-section-sub {
    font-size: .905rem;
    color: #4F6B5D;
    margin-top: 1px;
}

.form-section-body {
    padding: 20px;
}

/* Page header bar */
.form-page-header {
    background: var(--fnda-green);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #fff;
}

.form-page-header-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.18);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-page-header h4 {
    font-size: 1.175rem;
    font-weight: 700;
    margin: 0 0 3px;
    color: #fff;
}

.form-page-header p {
    font-size: .905rem;
    color: rgba(255,255,255,.8);
    margin: 0;
}

/* File input styled */
.file-drop-zone {
    border: 2px dashed #B8D4C2;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #FAFCFB;
}

.file-drop-zone:hover { border-color: var(--fnda-green); background: rgba(26,115,64,.03); }
.file-drop-zone.is-invalid { border-color: var(--fnda-red); background: rgba(204,34,0,.03); }

.file-drop-zone input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.file-drop-label {
    font-size: .945rem;
    color: #6B8573;
}

.file-drop-label strong { color: var(--fnda-green); }

/* Input with unit append */
.input-fcfa .input-group-text {
    background: #F0F5F2;
    border-color: #ced4da;
    color: #6B8573;
    font-size: .925rem;
    font-weight: 600;
}

/* Document list */
.doc-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F0F5F2;
}

.doc-list-item:last-child { border-bottom: none; }

.doc-list-info { flex: 1; min-width: 0; }

.doc-list-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1C2B22;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.doc-badge {
    font-size: .775rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 30px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.doc-badge-annuelle     { background: #E8F5EE; color: #1A7340; border: 1px solid #B8D4C2; }
.doc-badge-trimestrielle { background: #EBF5FF; color: #2471A3; border: 1px solid #AED6F1; }

.doc-list-meta {
    font-size: .875rem;
    color: #8AAF96;
    margin-top: 2px;
}

.doc-list-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.doc-list-file-input {
    font-size: .925rem;
}

.doc-list-file-input .form-control-file {
    font-size: .905rem;
}

/* Coffre banner */
.coffre-banner {
    background: #E8F5EE;
    border: 1.5px solid #B8D4C2;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.coffre-banner-icon {
    width: 36px;
    height: 36px;
    background: rgba(26,115,64,.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1A7340;
}

.coffre-banner-text > strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1A7340;
}

.coffre-banner-text span {
    font-size: .905rem;
    color: #4A8A60;
    margin-top: 2px;
    display: block;
    white-space: normal;
}

/* Document card rows */
.doc-card {
    border: 1.5px solid #E4EDE8;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    background: #fff;
    transition: border-color .15s;
}

.doc-card:hover { border-color: #B8D4C2; }

.doc-card-info { flex: 1; min-width: 0; }

.doc-card-name {
    font-size: 1.005rem;
    font-weight: 700;
    color: #1C2B22;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.doc-card-meta {
    font-size: .885rem;
    color: #8AAF96;
}

.doc-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* "Repris du coffre" file-upload button */
.btn-coffre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: .925rem;
    font-weight: 600;
    color: #1A7340;
    background: #fff;
    border: 1.5px solid #B8D4C2;
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-coffre:hover {
    background: #E8F5EE;
    border-color: #1A7340;
}

.btn-coffre input[type="file"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.btn-coffre.has-file {
    background: #E8F5EE;
    border-color: #1A7340;
    color: #145730;
}

.btn-visualiser {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .925rem;
    font-weight: 600;
    color: #5A7060;
    background: none;
    border: none;
    padding: 6px 4px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
}

.btn-visualiser:hover { color: #1A7340; }

.btn-visualiser:disabled {
    color: #C8D8CC;
    cursor: not-allowed;
    pointer-events: none;
}

/* Formatted amount preview */
.formatted-amount {
    display: block;
    margin-top: 4px;
    font-size: .905rem;
    font-weight: 600;
    color: var(--fnda-green);
    letter-spacing: .01em;
    min-height: 1em;
}

/* Info hint */
/* Icône + texte : padding-left/icône positionnée en absolu plutôt que
   flexbox — avec flex, chaque nœud de texte autour d'une balise inline
   (ex. <strong>) devient sa propre "colonne" au lieu de couler en un seul
   paragraphe. Cette approche fonctionne quel que soit le balisage à
   l'intérieur. */
.form-hint {
    font-size: .885rem;
    color: #5A7060;
    margin-top: 6px;
    position: relative;
    padding-left: 21px;
}

.form-hint > i:first-child,
.form-hint > svg:first-child {
    position: absolute;
    left: 0;
    top: 2px;
}

/* Filtres au-dessus des listes (tableaux DataTables) ───────── */
.list-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.list-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}
.list-filter label {
    font-size: .78rem;
    font-weight: 600;
    color: #5A7060;
    margin: 0;
}
.list-filter select.form-control {
    padding: 6px 10px;
    height: auto;
}

/* Facility cards (page Nouvelle demande) ───────── */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 8px;
}

.facility-card {
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #E4EDE8;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .2s, transform .15s, border-color .2s;
    text-decoration: none !important;
    color: inherit !important;
}

.facility-card:hover {
    box-shadow: 0 6px 20px rgba(26,115,64,.13);
    transform: translateY(-2px);
    border-color: var(--fnda-green);
}

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

.fi-green  { background: rgba(26,115,64,.12);  color: #1A7340; }
.fi-blue   { background: rgba(52,152,219,.13); color: #2980B9; }
.fi-orange { background: rgba(211,84,0,.12);   color: #D35400; }
.fi-purple { background: rgba(125,60,152,.12); color: #7D3C98; }
.fi-teal   { background: rgba(20,143,119,.12); color: #148F77; }
.fi-red    { background: rgba(192,57,43,.12);  color: #C0392B; }

.facility-title {
    font-size: 1.105rem;
    font-weight: 700;
    color: #1C2B22;
    line-height: 1.3;
}

.facility-desc {
    font-size: .945rem;
    color: #6B8573;
    line-height: 1.55;
    flex: 1;
}

.facility-link {
    font-size: .955rem;
    font-weight: 700;
    color: var(--fnda-green) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    transition: gap .15s;
}

.facility-link:hover { gap: 10px !important; }

.facility-card.disabled {
    opacity: .55;
    pointer-events: none;
    cursor: not-allowed;
}

.facility-page-title {
    font-size: 1.475rem;
    font-weight: 700;
    color: #1C2B22;
    margin-bottom: 4px;
}

.facility-page-sub {
    font-size: 1rem;
    color: #6B8573;
    margin-bottom: 22px;
}

/* ── Autres fichiers (extra file rows) ───────────── */
.extra-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed #C0D8CC;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #fff;
}
.extra-file-row.has-error {
    border: 1.5px solid #E4574C;
    border-style: solid;
    background: #FDF3F2;
}
.extra-file-name {
    flex: 0 0 240px;
    font-size: .945rem;
    height: 34px;
    border: 1.5px solid #D0E0D8;
    border-radius: 6px;
    padding: 0 10px;
    color: #2C3E50;
    outline: none;
}
.extra-file-name:focus {
    border-color: #1A7340;
    box-shadow: 0 0 0 2px rgba(26,115,64,.1);
}
.btn-browse-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: .945rem;
    font-weight: 600;
    color: #1A7340;
    background: #E8F5EE;
    border: 1.5px solid #B8D4C2;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    margin-bottom: 0;
}
.btn-browse-label:hover { background: #D4EDE0; }
.extra-file-display {
    flex: 1;
    min-width: 0;
    font-size: .925rem;
    color: #7A9A86;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-extra-delete {
    background: none;
    border: none;
    color: #CC2200;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .15s;
    line-height: 1;
}
.btn-extra-delete:hover { background: #FDECEA; }
.btn-add-extra {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: .945rem;
    font-weight: 600;
    color: #1A7340;
    background: #fff;
    border: 1.5px solid #1A7340;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.btn-add-extra:hover { background: #E8F5EE; }

/* ── Boutons d'action compacts (colonnes "Actions" des tableaux) ── */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #E4EDE8;
    background: #fff;
    color: #7A9A86;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none !important;
    flex-shrink: 0;
}
.table-action-view {
    color: #1A7340;
}
.table-action-view:hover {
    background: #E8F5EE;
    border-color: #B8D4C2;
    color: #145730;
}
.table-action-edit {
    color: #2980B9;
}
.table-action-edit:hover {
    background: #EAF3FB;
    border-color: #B7D3EC;
    color: #1F5A8C;
}
.table-action-delete {
    color: #C0392B;
}
.table-action-delete:hover {
    background: #FDECEA;
    border-color: #F0C4BE;
    color: #96271B;
}

/* ── Boutons bas de page (actions) ───────────────── */
.btn-action-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: .92rem;
    font-weight: 500;
    color: #5A7A65;
    background: #F4F7F5;
    border: 1.5px solid #D0E0D8;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.btn-action-back:hover { background: #E8EDE9; color: #2C3E50; }
.btn-action-draft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: .92rem;
    font-weight: 600;
    color: #1A7340;
    background: #fff;
    border: 1.5px solid #1A7340;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.btn-action-draft:hover { background: #E8F5EE; }
.btn-action-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 26px;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: #1A7340;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .2s, transform .1s;
}
.btn-action-submit:hover,
.btn-action-submit:focus { background: #228B50; color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn-action-submit:active { transform: translateY(0); }

/* ── Panneau de révision ─────────────────────────── */
.review-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #EBF3FB;
    border: 1px solid #B8D4F0;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 1rem;
    color: #1A4D7A;
    margin-bottom: 20px;
}
.review-card {
    background: #fff;
    border: 1.5px solid #E4EDE8;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #F0F5F2;
    background: #FAFCFB;
}
.review-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.075rem;
    font-weight: 700;
    color: #1C2B22;
}
.review-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A7340;
    flex-shrink: 0;
}
.review-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .925rem;
    font-weight: 600;
    color: #1A7340;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: none !important;
}
.review-edit-btn:hover { text-decoration: underline !important; color: #145730; }
.review-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid #F4F7F5;
    font-size: 1rem;
}
.review-row:last-child { border-bottom: none; }
.review-row-label {
    flex: 0 0 220px;
    color: #7A9A86;
    font-size: .945rem;
}
.review-row-value {
    flex: 1;
    font-weight: 600;
    color: #1C2B22;
    text-align: right;
}
/* .review-row-value est déjà en font-weight:600 par défaut ; sans ceci,
   bootstrap-extend.css force `strong, b { font-weight: 500 }` et le texte
   "en gras" ressort moins gras que le texte normal environnant. */
.review-row-value strong,
.review-row-value b {
    font-weight: 700;
}
/* Pour les valeurs longues / multi-lignes (zones de texte enrichi) : la
   valeur passe sous le libellé et s'aligne à gauche au lieu d'être coincée
   à droite dans la colonne étroite. */
.review-row-multiline {
    flex-direction: column;
    align-items: flex-start;
}
/* .review-row-label a `flex: 0 0 220px` pour fixer sa largeur dans la mise
   en page en ligne (2 colonnes) ; une fois le conteneur passé en colonne
   (ci-dessus), ce même flex-basis:220px s'applique à la hauteur au lieu de
   la largeur, ce qui créait un grand vide sous le libellé. */
.review-row-multiline .review-row-label {
    flex: none;
}
.review-row-multiline .review-row-value {
    flex: none;
    text-align: left;
    width: 100%;
}
/* Ligne d'historique avec observation rattachée (ex. motif de rejet sous
   "Retourné pour complément le ...") : la ligne principale label/valeur
   garde la mise en page à 2 colonnes, l'observation vient en dessous en
   texte plus petit et atténué. */
.review-row-with-note {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.review-row-with-note .review-row-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.review-row-with-note .review-row-label { flex: 0 0 220px; }
.review-row-with-note .review-row-value { flex: 1; }
.review-row-note {
    font-size: .85rem;
    color: #7A9A86;
    text-align: right;
    padding-left: 232px;
}
/* Bouton "Voir plus/moins" qui déplie la synthèse d'analyse d'une ligne
   d'historique (cf. _history_row_with_note.blade.php) - repousse le bouton
   en bout de ligne dans .review-row-main (flex). */
.review-row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .8rem;
    font-weight: 600;
    color: #1A7340;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    margin-left: auto;
    flex-shrink: 0;
}
.review-row-toggle:hover { text-decoration: underline; }
.review-row-note-detail {
    padding-top: 6px;
}
.review-doc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-bottom: 1px solid #F4F7F5;
    font-size: .945rem;
}
.review-doc-row:last-child { border-bottom: none; }
.rv-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E8F5EE;
    border: 1.5px solid #B8D4C2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A7340;
    font-size: .825rem;
    font-weight: 700;
    flex-shrink: 0;
}
/* ── Badge type de crédit (groupe / individuel) ────── */
.credit-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
.credit-type-badge-group { background: rgba(125,60,152,.14); color: #7D3C98; }
.credit-type-badge-individual { background: rgba(52,152,219,.14); color: #2980B9; }

/* ── Boutons d'action icône (cellule de tableau) ───── */
.table-actions-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    color: #4F6B5D;
    border: 1.5px solid #D8E4DC;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20,87,48,.06);
}
.btn-icon-action:hover {
    background: #1A7340;
    color: #fff;
    border-color: #1A7340;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(20,87,48,.18);
}
.btn-icon-action-info { color: #2980B9; border-color: #C7DEF0; }
.btn-icon-action-info:hover { background: #2980B9; color: #fff; border-color: #2980B9; box-shadow: 0 2px 5px rgba(41,128,185,.2); }
/* Action principale d'une ligne, avec libellé (ex. reprise d'un brouillon) */
.btn-resume-fnda {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: #1A7340;
    color: #fff;
    border: 1.5px solid #1A7340;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-resume-fnda:hover,
.btn-resume-fnda:focus {
    background: #145730;
    border-color: #145730;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(20,87,48,.18);
}
.btn-icon-action-warning { color: #D35400; border-color: #F0D6BE; }
.btn-icon-action-warning:hover { background: #D35400; color: #fff; border-color: #D35400; box-shadow: 0 2px 5px rgba(211,84,0,.2); }
.btn-icon-action-danger { color: #C0392B; border-color: #EFC9C4; }
.btn-icon-action-danger:hover { background: #C0392B; color: #fff; border-color: #C0392B; box-shadow: 0 2px 5px rgba(192,57,43,.2); }

.rv-doc-name { flex: 1; color: #2C3E50; }
.rv-doc-file {
    font-size: .885rem;
    color: #8AAF96;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv-vis-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 8px;
    font-size: .885rem;
}
.review-obs-box {
    background: #F9FBFA;
    border: 1px solid #E4EDE8;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .945rem;
    color: #4A6A55;
    margin: 0 20px 12px;
}

/* ── Stepper multi-étapes ────────────────────────── */
.garantie-stepper {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}
.gstep {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gstep-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #C8D8CC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .905rem;
    font-weight: 700;
    color: #8AAF96;
    background: #fff;
    flex-shrink: 0;
}
.gstep.gstep-active .gstep-num {
    background: #1A7340;
    border-color: #1A7340;
    color: #fff;
}
.gstep-label {
    font-size: .945rem;
    color: #8AAF96;
    font-weight: 500;
    white-space: nowrap;
}
.gstep.gstep-active .gstep-label {
    color: #1C2B22;
    font-weight: 700;
}
.gstep-line {
    flex: 1;
    height: 1.5px;
    background: #D0E4D8;
    min-width: 30px;
    margin: 0 8px;
}
.gstep-line-done { background: #1A7340; }
.gstep.gstep-done .gstep-num {
    background: #1A7340;
    border-color: #1A7340;
    color: #fff;
}
.gstep.gstep-done .gstep-label {
    color: #1A7340;
    font-weight: 600;
}

/* ── Accordéon "Projet & Facilité" ─────────────────── */
.accordion-section {
    background: #fff;
    border: 1.5px solid #E4EDE8;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.accordion-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #F0F5F2;
    background: #FAFCFB;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.accordion-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.075rem;
    font-weight: 700;
    color: #1C2B22;
}
.accordion-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #E8F5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A7340;
    flex-shrink: 0;
}
.accordion-chevron {
    transition: transform .2s;
    color: #7A9A86;
}
.accordion-section.open .accordion-chevron {
    transform: rotate(180deg);
}
.accordion-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    padding: 0 20px;
}
.accordion-section.open .accordion-section-body {
    max-height: none;
    padding: 20px;
}
/* ── Recherche multi-critère (page Analyses graphiques) ────────────
   Champs regroupés par thème dans une grille alignée, plutôt qu'une
   simple ligne flex-wrap : évite le désalignement quand un champ
   (multi-sélection, indice) est plus haut que ses voisins. */
.analytics-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.analytics-filters-group-label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7A9A86;
    margin: 0 0 14px;
}
.analytics-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}
.analytics-filters-grid .list-filter {
    min-width: 0;
}
.analytics-filters-divider {
    border-top: 1px solid #E4EDE8;
}
@media (max-width: 992px) {
    .analytics-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .analytics-filters-grid { grid-template-columns: 1fr; }
}

.accordion-indicator-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    margin-bottom: 1rem;
}
.accordion-indicator-label {
    display: block;
    color: #7A9A86;
    font-size: .945rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.accordion-indicator-value {
    display: flex;
    align-items: center;
    min-height: 36px;
    box-sizing: border-box;
    background: #F9FBFA;
    border: 1px solid #E4EDE8;
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 700;
    color: #1A7340;
    font-size: 1.075rem;
}

/* ── Boutons de navigation Précédent / Suivant (pill) ──── */
.step-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: .99rem;
    border: 1.5px solid #E4EDE8;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
/* Bouton natif HTML "disabled" (ex. soumission bloquée tant qu'une
   condition n'est pas remplie, voir tirages/confirm.blade.php) : déjà
   inactionnable par le navigateur, mais sans style propre les couleurs
   .step-nav-btn-next/-draft/-prev ci-dessous s'appliquaient quand même
   et masquaient totalement cet état côté utilisateur. Même traitement
   visuel que .is-gated-disabled pour rester cohérent. */
.step-nav-btn:disabled,
.step-nav-btn:disabled:hover {
    opacity: .45;
    filter: grayscale(.3);
    cursor: not-allowed;
    background: #E4EDE8;
    border-color: #E4EDE8;
    color: #6B8573;
}

/* Élément visuellement désactivé tant qu'une case d'attestation liée n'est
   pas cochée (voir submissions/components/eligibility_conditions.blade.php)
   — reste cliquable (le clic rouvre le rappel des conditions) plutôt que
   d'utiliser pointer-events:none, qui empêcherait ce rattrapage. */
.is-gated-disabled {
    opacity: .45;
    filter: grayscale(.3);
}
.field-over-ceiling {
    border-color: #C0392B !important;
    background-color: rgba(192, 57, 43, .08) !important;
    color: #C0392B !important;
    font-weight: 600;
}
.step-nav-btn-prev {
    background: #fff;
    color: #1C2B22;
}
.step-nav-btn-prev:hover {
    background: #FAFCFB;
    border-color: #D5E3DB;
    color: #1C2B22;
}
.step-nav-btn-next {
    background: #1A7340;
    border-color: #1A7340;
    color: #fff;
}
.step-nav-btn-next:hover {
    background: #145C34;
    border-color: #145C34;
    color: #fff;
}
.step-nav-btn-draft {
    background: #fff;
    border-color: #1A7340;
    color: #1A7340;
}
.step-nav-btn-draft:hover {
    background: #E8F5EE;
    border-color: #1A7340;
    color: #1A7340;
}

/* ── Bouton d'action compact (cellule de tableau) ──── */
.btn-table-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-table-action-primary {
    background: var(--fnda-green);
    border-color: var(--fnda-green);
    color: #fff;
}
.btn-table-action-primary:hover {
    background: var(--fnda-green-dark);
    border-color: var(--fnda-green-dark);
    color: #fff;
}
.btn-table-action-outline {
    background: #fff;
    border-color: #E4EDE8;
    color: #1C2B22;
}
.btn-table-action-outline:hover {
    background: #FAFCFB;
    border-color: #D5E3DB;
    color: #1C2B22;
}

/* ── Bouton d'action icône seule (colonnes "Actions" des listes
   d'administration - PSF, utilisateurs...), en remplacement des icônes
   nues sans fond ni bordure utilisées jusqu'ici. Mêmes teintes que les
   pastilles de statut ci-dessous, pour rester cohérent dans toute la
   colonne. ──────────────────────────────────────────── */
.table-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #E4EDE8;
    background: #fff;
    color: #5A7060;
    font-size: .95rem;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.table-icon-action:hover { text-decoration: none; }
.table-icon-action + .table-icon-action { margin-left: 6px; }
.table-icon-action-view    { color: #2980B9; }
.table-icon-action-view:hover    { background: rgba(52,152,219,.10); border-color: #2980B9; color: #2980B9; }
.table-icon-action-edit    { color: #7D6608; }
.table-icon-action-edit:hover    { background: rgba(245,192,0,.15);  border-color: #C9A400; color: #7D6608; }
.table-icon-action-success { color: #1A7340; }
.table-icon-action-success:hover { background: rgba(26,115,64,.12);  border-color: var(--fnda-green); color: #1A7340; }
.table-icon-action-danger  { color: #CC2200; }
.table-icon-action-danger:hover  { background: rgba(204,34,0,.10);   border-color: #CC2200; color: #CC2200; }

/* ── Pastille de statut (tableaux de suivi) ──────────── */
/* Les libellés de statut sont parfois longs (ex. "Soumis par le
   promoteur et en attente d'approbation") - en une seule ligne, la
   pastille forçait la colonne "Statut" (et donc tout le tableau) à
   devenir très large, ce qui déclenchait le repli DataTables Responsive
   (bouton +/- pour déplier/replier les colonnes masquées). Autorisée à
   passer sur 2 lignes et limitée en largeur pour que le tableau tienne
   sans ce repli. */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 12px;
    font-size: .62rem;
    font-weight: 600;
    white-space: normal;
    line-height: 1.2;
    max-width: 115px;
}
.status-pill-success { background: rgba(26,115,64,.12);  color: #1A7340; }
.status-pill-info     { background: rgba(52,152,219,.13); color: #2980B9; }
.status-pill-danger   { background: rgba(204,34,0,.10);   color: #CC2200; }
.status-pill-warning  { background: rgba(245,192,0,.15);  color: #7D6608; }
.status-pill-neutral  { background: #F0F2F1;               color: #5A7060; }
.status-pill-primary  { background: rgba(125,60,152,.12);  color: #7D3C98; }

/* ── Carte "tirage" (détail d'une ligne de refinancement) ──────────── */
.tirage-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.tirage-card {
    background: #fff;
    border: 1.5px solid #E4EDE8;
    border-radius: 12px;
    padding: 18px 20px;
    transition: box-shadow .2s, border-color .2s;
}
.tirage-card:hover {
    border-color: #B8D4C2;
    box-shadow: 0 6px 20px rgba(26,115,64,.1);
}
.tirage-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.tirage-card-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B8573;
}
.tirage-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1C2B22;
    margin-top: 2px;
}
.tirage-card-stats {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #EEF3F0;
}
.tirage-card-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1C2B22;
    font-variant-numeric: tabular-nums;
}
.tirage-card-stat-label {
    font-size: .72rem;
    color: #6B8573;
    margin-top: 1px;
}
.tirage-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* ── Cartes type de promoteur ─────────────────────── */
.promoter-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.promoter-type-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1.5px solid #E4EDE8;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fff;
    user-select: none;
}
.promoter-type-card:hover { border-color: #B8D4C2; background: #FAFCFB; }
.promoter-type-card.ptc-active { border-color: #1A7340; background: #F2FAF5; }
.ptc-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #C8D8CC;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s;
}
.promoter-type-card.ptc-active .ptc-radio { border-color: #1A7340; }
.ptc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1A7340;
    display: none;
}
.promoter-type-card.ptc-active .ptc-dot { display: block; }
.ptc-title { font-size: 1.025rem; font-weight: 700; color: #1C2B22; }
.ptc-sub { font-size: .905rem; color: #6B8573; margin-top: 2px; }

/* ── Tuiles de statistiques (tableau de bord) ──────── */
.stat-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.stat-tile {
    background: #fff;
    border: 1.5px solid #E4EDE8;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow .2s, border-color .2s;
}
.stat-tile:hover {
    border-color: #B8D4C2;
    box-shadow: 0 6px 20px rgba(26,115,64,.1);
}
.stat-tile-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    background: rgba(26,115,64,.12);
    color: #1A7340;
}
.stat-tile-icon.icon-blue   { background: rgba(52,152,219,.13); color: #2980B9; }
.stat-tile-icon.icon-orange { background: rgba(211,84,0,.12);   color: #D35400; }
.stat-tile-icon.icon-purple { background: rgba(125,60,152,.12); color: #7D3C98; }
.stat-tile-icon.icon-teal   { background: rgba(20,143,119,.12); color: #148F77; }
.stat-tile-body { min-width: 0; }
.stat-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1C2B22;
    line-height: 1.2;
}
.stat-tile-label {
    font-size: .82rem;
    color: #6B8573;
    margin-top: 2px;
}

.stat-tile-detailed {
    align-items: flex-start;
}
.stat-tile-body {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.stat-tile-amounts {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #EEF3F0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stat-tile-amounts .amount-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.stat-tile-amounts .amount-label {
    color: #6B8573;
    font-size: .7rem;
}
.stat-tile-amounts .amount-value {
    font-weight: 700;
    color: #1C2B22;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.stat-tile-pills {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #EEF3F0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.stat-pill {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: .74rem;
    font-weight: 500;
    color: #4C6656;
    line-height: 1.3;
}
.stat-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    align-self: center;
}
.stat-pill .pill-label {
    flex: 1 1 auto;
}
.stat-pill .pill-value {
    font-weight: 700;
    color: #1C2B22;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
}
.stat-pill-brown   { color: #6D4C41; }
.stat-pill-info    { color: #2980B9; }
.stat-pill-purple  { color: #7D3C98; }
.stat-pill-success { color: #1A7340; }

/* ── Dossiers récents (tableau de bord) ──────── */
.recent-files-box {
    margin-top: 20px;
}

/* ── Ligne "autre source de financement" (subventions) ─────────── */
.other-financing-row {
    position: relative;
    border: 1px dashed #C0D8CC;
    border-radius: 8px;
    padding: 18px 46px 4px 16px;
    margin-bottom: 14px;
    background: #fff;
}
.other-financing-remove {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ── Bandeau "vous soumettez pour un tiers" (Agent FNDA) ───────── */
.on-behalf-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #E8F5EE;
    border-left: 4px solid var(--fnda-green);
    border-radius: 6px;
    padding: 12px 18px;
    margin: 20px 20px 0 20px;
    color: var(--fnda-green-dark);
    font-weight: 500;
}
.on-behalf-banner .mdi {
    color: var(--fnda-green);
    margin-right: 6px;
}
.on-behalf-banner a {
    font-weight: 600;
    color: var(--fnda-red) !important;
}

/* ── Bandeau d'en-tête de tableau (remplace bg-pale-info) ─── */
.callout-fnda-green {
    background-color: #E8F5EE !important;
    border-left-color: var(--fnda-green) !important;
}
.callout-fnda-green h4 {
    color: var(--fnda-green-dark);
}
.callout-fnda-green p {
    color: #4C6656;
}
.callout-fnda-gold {
    background-color: #FBF3D9 !important;
    border-left-color: #C99A00 !important;
}
.callout-fnda-gold h4 {
    color: #7D6608;
}
.callout-fnda-gold p {
    color: #6B5A1F;
}
.callout-fnda-red {
    background-color: #FBEAEA !important;
    border-left-color: var(--fnda-red) !important;
}
.callout-fnda-red h4 {
    color: var(--fnda-red);
}
.callout-fnda-red p {
    color: #7A3030;
}

/* ── Bandeau "N° de suivi" (résumé / page voir) ───────────────── */
.tracking-banner-fnda {
    background-color: #E8F5EE;
    border-left: 4px solid var(--fnda-green);
    border-radius: 6px;
    padding: 14px 18px;
}
.tracking-banner-fnda-label {
    color: #4C6656;
    font-weight: 600;
}
.tracking-banner-fnda-value {
    color: var(--fnda-green-dark);
    font-weight: 700;
    font-size: 1.25rem;
    margin-left: 6px;
}

/* ── Fenêtres modales : habillage cohérent avec le reste de l'app,
   au lieu du style Bootstrap générique par défaut. S'applique à toutes
   les pop-up du site (une seule mise à jour, effet partout). ── */
.modal-content {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0,0,0,.2);
}
.modal-header {
    background: var(--fnda-green);
    border-bottom: none;
    padding: 16px 22px;
}
.modal-header .modal-title {
    color: #fff;
    font-weight: 700;
}
.modal-header .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
}
.modal-header .close:hover,
.modal-header .close:focus {
    color: #fff;
    opacity: 1;
}
.modal-body {
    padding: 22px;
}
.modal-footer {
    border-top: 1px solid #F0F5F2;
    padding: 16px 22px;
}

/* ── En-tête de liste (titre + bouton "Ajouter un nouveau") ─── */
.list-header-fnda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.list-header-fnda .callout {
    flex: 1 1 260px;
    margin-bottom: 0;
}
.btn-add-new-fnda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fnda-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: .86rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 2px rgba(20, 87, 48, .15);
}
.btn-add-new-fnda:hover,
.btn-add-new-fnda:focus {
    background: var(--fnda-green-dark);
    color: #fff;
    text-decoration: none;
}
.btn-add-new-fnda i {
    font-size: .95rem;
}

/* Variante secondaire (ex. lien "Historique" à côté d'une action verte
   principale) — texte foncé nécessaire ici, le blanc manque de contraste
   sur ce jaune. */
.btn-add-new-fnda.btn-gold {
    background: var(--fnda-gold);
    color: #1C2B22;
    box-shadow: 0 1px 2px rgba(197, 154, 0, .25);
}
.btn-add-new-fnda.btn-gold:hover,
.btn-add-new-fnda.btn-gold:focus {
    background: #DDAD00;
    color: #1C2B22;
}

/* ── Notification de succès (remplace le turquoise générique du thème) ─── */
.alert-success {
    background-color: var(--fnda-green) !important;
    border-color: var(--fnda-green-dark) !important;
}

/* ── Override AdminLTE radio/checkbox blue → FNDA green ─── */
[type=radio]:checked + label:after,
[type=radio].with-gap:checked + label:after {
    background-color: #1A7340 !important;
}
[type=radio]:checked + label:after,
[type=radio].with-gap:checked + label:before,
[type=radio].with-gap:checked + label:after {
    border-color: #1A7340 !important;
}
[type=checkbox]:checked + label:before {
    border-right-color: #1A7340 !important;
    border-bottom-color: #1A7340 !important;
}
[type=checkbox].filled-in:checked + label:after {
    background-color: #1A7340 !important;
    border-color: #1A7340 !important;
}

/* ── Login page ───────────────────────────────────── */
.content-top-agile h2 {
    color: #FFFFFF;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
    font-weight: 700;
}

.content-bottom {
    border-top: 4px solid var(--fnda-green);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

/* ── Éditeur riche (barre d'outils + contenteditable) ── */
.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #D7E3DB;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background-color: #F0F5F2;
    padding: 4px;
}

.rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #4A5D52;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.rte-btn:hover {
    background-color: #E4EDE8;
    color: #1A7340;
}

.rte-btn.active {
    background-color: #fff;
    border-color: #D7E3DB;
    color: #1A7340;
}

.rte-sep {
    width: 1px;
    height: 20px;
    background-color: #D7E3DB;
    margin: 0 4px;
}

/* Boutons couleur : <label class="rte-btn"> autour d'un <input type="color">
   visuellement masqué — cliquer sur l'icône ouvre le sélecteur natif. */
label.rte-btn {
    position: relative;
    margin: 0;
    cursor: pointer;
}
.rte-color-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: none;
    padding: 0;
}

.rte-editor {
    min-height: 90px;
    border-radius: 0 0 8px 8px;
    overflow-y: auto;
    cursor: text;
}

.rte-editor p {
    margin: 0 0 .5rem;
}

.rte-editor p:last-child {
    margin-bottom: 0;
}

.rte-editor ul,
.rte-editor ol {
    margin: 0 0 .5rem;
    padding-left: 1.4rem;
}

.rte-editor table,
.review-row-value table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 .5rem;
}

.rte-editor table td,
.rte-editor table th,
.review-row-value table td,
.review-row-value table th {
    border: 1px solid #C9D4CE;
    padding: 6px 8px;
    min-width: 40px;
}

.rte-editor.rte-empty:before {
    content: attr(data-placeholder);
    color: #9CA9A3;
    white-space: pre-wrap;
}

.rte-editor:focus {
    border-color: var(--fnda-green);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(26, 115, 64, .12);
    outline: 0;
}

/* bootstrap-extend.css force `b, strong { font-weight: 500 }` globalement,
   ce qui rend le bouton "Gras" du rte-toolbar (et de CKEditor, cf.
   .ck-content ci-dessous) visuellement inefficace : 500 est quasi
   indiscernable de 400 dans les polices système (Helvetica/Arial/Verdana),
   contrairement au vrai gras (700). Concerne aussi bien la saisie
   (.rte-editor/.ck-content) que tout affichage en lecture seule de ce même
   contenu riche une fois enregistré (.review-obs-box, .review-row-note,
   .review-row-multiline .review-row-value). */
.rte-editor b,
.rte-editor strong,
.ck-content b,
.ck-content strong,
.review-obs-box b,
.review-obs-box strong,
.review-row-note b,
.review-row-note strong,
.review-row-multiline .review-row-value b,
.review-row-multiline .review-row-value strong {
    font-weight: 700;
}

/* ── Wizard jquery.steps.js (pages de modification) : reproduit le look
   du .garantie-stepper (cercles numérotés + trait de liaison) utilisé sur
   les autres étapes, au lieu des onglets pilule bleus par défaut du thème.
   La navigation/validation reste gérée par jquery.steps.js — seule
   l'apparence des <li> générés (et du <span class="step"> qu'il insère déjà
   via titleTemplate, cf. public/js/steps.js) est modifiée. ── */
.wizard-content .wizard > .steps > ul {
    display: flex;
    align-items: center;
}
.wizard-content .wizard > .steps > ul > li,
.wizard-content .wizard > .steps > ul > li.current,
.wizard-content .wizard > .steps > ul > li.done {
    display: flex;
    align-items: center;
    flex: 1;
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    color: inherit;
}
.wizard-content .wizard > .steps > ul > li:not(:last-child):after {
    content: '';
    flex: 1;
    height: 1.5px;
    background: #D0E4D8;
    min-width: 30px;
    margin: 0 8px;
}
.wizard-content .wizard > .steps > ul > li.done:not(:last-child):after {
    background: var(--fnda-green);
}
/* Le thème "wizard-circle" (SoftMaterial admin) dessine par défaut une
   barre bleue en position absolue via :before/:after sur chaque <li>
   (y compris des variantes .current/.done/~li encore plus spécifiques) :
   on neutralise entièrement ce mécanisme pour ne garder que le trait de
   liaison ci-dessus. */
.wizard-content .wizard.wizard-circle > .steps > ul > li:before {
    content: none !important;
}
.wizard-content .wizard.wizard-circle > .steps > ul > li:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:before,
.wizard-content .wizard.wizard-circle > .steps > ul > li.done:after {
    content: '' !important;
    position: static !important;
    top: auto !important;
    width: auto !important;
    height: 1.5px !important;
    flex: 1 !important;
    min-width: 30px !important;
    margin: 0 8px !important;
    background-color: #D0E4D8 !important;
}
.wizard-content .wizard.wizard-circle > .steps > ul > li:last-child:after {
    content: none !important;
}
.wizard-content .wizard.wizard-circle > .steps > ul > li.done:after {
    background-color: var(--fnda-green) !important;
}
.wizard-content .wizard > .steps > ul > li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8AAF96;
    font-weight: 500;
    font-size: .945rem;
    white-space: nowrap;
}
.wizard-content .wizard > .steps > ul > li a .step {
    position: static !important;
    left: auto !important;
    margin-left: 0 !important;
    width: 30px;
    height: 30px;
    line-height: 26px;
    border-radius: 50%;
    border: 2px solid #C8D8CC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .905rem;
    font-weight: 700;
    color: #8AAF96;
    background: #fff;
    flex-shrink: 0;
}
.wizard-content .wizard > .steps > ul > li.current a,
.wizard-content .wizard > .steps > ul > li.current a:hover,
.wizard-content .wizard > .steps > ul > li.current a:focus {
    color: #1C2B22;
    font-weight: 700;
    cursor: default;
}
.wizard-content .wizard > .steps > ul > li.current a .step {
    background: var(--fnda-green);
    border-color: var(--fnda-green);
    color: #fff;
}
.wizard-content .wizard > .steps > ul > li.done a,
.wizard-content .wizard > .steps > ul > li.done a:hover,
.wizard-content .wizard > .steps > ul > li.done a:focus {
    color: var(--fnda-green);
    font-weight: 600;
}
.wizard-content .wizard > .steps > ul > li.done a .step {
    background: var(--fnda-green);
    border-color: var(--fnda-green);
    color: #fff;
    font-size: 0;
}
.wizard-content .wizard > .steps > ul > li.done a .step:after {
    content: '\2713';
    font-size: 1rem;
    line-height: 1;
    color: #fff;
}
.wizard-content .wizard > .steps > ul > li.disabled a,
.wizard-content .wizard > .steps > ul > li.disabled a:hover,
.wizard-content .wizard > .steps > ul > li.disabled a:focus {
    color: #8AAF96;
}

/* Boutons Précédent/Suivant/Valider du wizard : remplace les pilules bleues
   par défaut du thème par le style .step-nav-btn utilisé partout ailleurs. */
.wizard-content .wizard > .actions > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.075rem;
    border: 1.5px solid #E4EDE8;
    background: var(--fnda-green);
    color: #fff;
    transition: background .15s, border-color .15s, color .15s;
    box-shadow: none;
}
.wizard-content .wizard > .actions > ul > li > a:hover,
.wizard-content .wizard > .actions > ul > li > a:focus {
    background: #145C34;
    border-color: #145C34;
    color: #fff;
    box-shadow: none;
}
.wizard-content .wizard > .actions > ul > li > a[href="#previous"] {
    background: #fff;
    border-color: #E4EDE8;
    color: #1C2B22;
}
.wizard-content .wizard > .actions > ul > li > a[href="#previous"]:hover,
.wizard-content .wizard > .actions > ul > li > a[href="#previous"]:focus {
    background: #FAFCFB;
    border-color: #D5E3DB;
    color: #1C2B22;
    box-shadow: none;
}
.wizard-content .wizard > .actions > ul > li.disabled > a {
    opacity: .5;
    pointer-events: none;
    box-shadow: none;
}

/* ── Onglets (pages de suivi) — remplace le bleu par défaut du thème ──
   Soulignement vert, avec une puce or comme repère d'état actif. */
.nav-tabs-fnda {
    border-bottom: 2px solid #E4EDE8;
    margin-bottom: 20px;
}

.nav-tabs-fnda .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 7px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #6B8573;
    font-weight: 600;
    background: transparent;
    padding: 12px 18px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.nav-tabs-fnda .nav-item .nav-link::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background-color .15s ease;
}

.nav-tabs-fnda .nav-item .nav-link:hover {
    color: var(--fnda-green);
    background: #F3F8F5;
    border-color: transparent;
}

.nav-tabs-fnda .nav-item .nav-link.active {
    color: var(--fnda-green);
    background: transparent;
    border-color: transparent transparent var(--fnda-green);
}

.nav-tabs-fnda .nav-item .nav-link.active::before {
    background: var(--fnda-gold);
}

/* Pastille de décompte sur un onglet (ex. nombre de crédits d'un tirage) :
   cercle plein coloré (s'allonge en gélule pour "2 / 177" ou 4+ chiffres). */
.nav-tabs-fnda .nav-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--fnda-green);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 3px rgba(26, 115, 64, .15);
}

/* Onglet sans aucun élément : cercle neutre, pour ne pas attirer l'œil à tort */
.nav-tabs-fnda .nav-tab-count.nav-tab-count-empty {
    background: #C9D6CE;
    color: #33413A;
    box-shadow: none;
}

/* Éléments à surveiller (ex. crédits retirés/rejetés par le FNDA) */
.nav-tabs-fnda .nav-tab-count.nav-tab-count-alert {
    background: var(--fnda-red);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(204, 34, 0, .15);
}

/* ── Indicateur d'étapes (parcours guidé, ex. import de crédits) ──── */
.step-progress {
    display: flex;
    align-items: flex-start;
    margin-bottom: 28px;
}

.step-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.step-progress-line {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #E4EDE8;
    z-index: 0;
}

.step-progress-item:last-child .step-progress-line { display: none; }

.step-progress-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    z-index: 1;
    flex-shrink: 0;
}

.step-progress-circle.step-green  { background: var(--fnda-green); }
.step-progress-circle.step-blue   { background: #2980B9; }
.step-progress-circle.step-gold   { background: #C99A00; }
.step-progress-circle.step-orange { background: #D35400; }

.step-progress-circle {
    position: relative;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}

/* Étape courante : mise en avant. Étapes à venir : atténuées jusqu'à ce
   qu'on les atteigne, pour que l'oeil suive naturellement la progression. */
.step-progress-item.is-active .step-progress-circle {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(26,115,64,.18), 0 2px 8px rgba(0,0,0,.12);
}

/* Le cercle (décoratif) suffit à distinguer une étape à venir ; le libellé
   reste pleinement lisible plutôt que délavé. */
.step-progress-item.is-upcoming .step-progress-circle { opacity: .45; }

.step-progress-item.is-completed .step-progress-circle::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: 50%;
    font-size: 1.1rem;
}

.step-progress-label {
    margin-top: 10px;
    font-size: .82rem;
    font-weight: 700;
    color: #3A5040;
    text-align: center;
    max-width: 130px;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .step-progress-label { font-size: .72rem; max-width: 90px; }
    .step-progress-circle { width: 36px; height: 36px; font-size: 1.05rem; }
    .step-progress-line { top: 18px; }
}

/* ── Variantes de couleur pour form-section-icon (au-delà de vert/bleu/orange) */
.form-section.step-card-green  { border-top: 3px solid var(--fnda-green); }
.form-section.step-card-blue   { border-top: 3px solid #2980B9; }
.form-section.step-card-gold   { border-top: 3px solid #C99A00; }
.form-section.step-card-orange { border-top: 3px solid #D35400; }

.form-section-icon.icon-gold { background: rgba(201,154,0,.14); color: #C99A00; }

/* Deux blocs comparatifs (ex. Individuel vs Groupe) */
.compare-cols {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.compare-col {
    flex: 1;
    min-width: 260px;
    border: 1.5px solid #E4EDE8;
    border-radius: 8px;
    padding: 16px;
}

.compare-col-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.compare-col-badge.badge-green { background: rgba(26,115,64,.12); color: var(--fnda-green); }
.compare-col-badge.badge-blue  { background: rgba(41,128,185,.12); color: #2980B9; }