/* =====================================================
   FLY — Thème partagé
   Formalise la charte graphique existante (bleu #0284C7,
   cartes arrondies, badges de statut) et l'applique de
   façon cohérente à toutes les pages : typographie,
   fond de page, tableaux, états vides, icônes.
   ===================================================== */

:root {
    --fly-primary: #0284C7;
    --fly-primary-dark: #0369A1;
    --fly-bg: #f5f7fa;
    --fly-border: #e5e7eb;
    --fly-text-muted: #6b7280;
    --fly-radius-sm: 8px;
    --fly-radius: 12px;
    --fly-radius-lg: 16px;
    --fly-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    --fly-shadow-lg: 0 15px 30px rgba(15, 23, 42, .07);
}

/* TYPOGRAPHIE */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--fly-bg);
    color: #1f2937;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
    color: #111827;
}

/* SCROLLBAR (Webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ÉTAT VIDE (unifie les messages "aucun résultat" affichés un peu partout) */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border: 1px dashed var(--fly-border);
    border-radius: var(--fly-radius-lg);
    color: var(--fly-text-muted);
}

.empty-state .empty-icon {
    font-size: 34px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

/* 🖼️ ILLUSTRATIONS FLY (public/assets/images/illustrations, voir Format::illustration) */
.illu {
    display: block;
    height: auto;
    margin: 0 auto;
    user-select: none;
    pointer-events: none;
}

.empty-state .illu {
    width: 180px;
    max-width: 70%;
    margin-bottom: 10px;
}

/* visuel de couverture d'une carte sans image (formation, événement, offre) */
.card-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empty-state strong {
    display: block;
    color: #374151;
    font-size: 15px;
    margin-bottom: 4px;
}

.empty-state small {
    font-size: 13px;
}

/* TABLEAUX : en-têtes plus lisibles, cohérents partout */
.table thead th,
.custom-table thead th,
.custom-table th {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 12px;
    font-weight: 600;
    color: var(--fly-text-muted);
    background: #f9fafb;
    border-bottom-width: 1px;
}

/* CARTES : ombre douce cohérente (les cartes Bootstrap gardent .shadow/.shadow-sm) */
.card-box, .job-card, .formation-card, .stat-card, .admin-card,
.doc-card, .form-card, .profile-card, .feature-card {
    box-shadow: var(--fly-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.card-box:hover, .job-card:hover, .formation-card:hover, .admin-card:hover,
.doc-card:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fly-shadow-lg);
}

/* BOUTONS : plus arrondis, légère ombre, meilleure cohérence de couleur */
.btn {
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, .10);
}
.btn-lg {
    border-radius: 12px;
}
.btn-sm {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(2, 132, 199, .08);
}
.btn-primary {
    background: var(--fly-primary);
    border-color: var(--fly-primary);
}
.btn-primary:hover {
    background: var(--fly-primary-dark);
    border-color: var(--fly-primary-dark);
    box-shadow: 0 6px 16px rgba(2, 132, 199, .28);
}
.btn-outline-primary {
    color: var(--fly-primary);
    border-color: var(--fly-primary);
}
.btn-outline-primary:hover {
    background: var(--fly-primary);
    border-color: var(--fly-primary);
    box-shadow: 0 6px 16px rgba(2, 132, 199, .22);
}

/* PAGE HEADER générique (titre + sous-titre + action) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--fly-border);
    border-radius: var(--fly-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.page-header h3 {
    margin-bottom: 2px;
}

.page-header .page-subtitle {
    color: var(--fly-text-muted);
    font-size: 14px;
}

/* ICÔNES rondes utilisées dans les en-têtes de carte (offres, formations, chat...) */
.icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E0F7FE;
    color: var(--fly-primary);
    font-size: 18px;
    flex-shrink: 0;
}

/* BANNIÈRE DE BIENVENUE (en-tête vivant des tableaux de bord) */
.welcome-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0284C7, #38BDF8 55%, #7bcedd);
    color: #fff;
    border-radius: var(--fly-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.welcome-banner::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-banner::before {
    content: "";
    position: absolute;
    bottom: -60px;
    right: 120px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-banner .welcome-content {
    position: relative;
    z-index: 1;
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(255, 255, 255, .18);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.welcome-banner h3 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 4px;
}

.welcome-banner p {
    color: rgba(255, 255, 255, .92);
    margin: 0;
    font-size: 14px;
}

.welcome-banner .welcome-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.welcome-banner .btn-light {
    color: #0284C7;
    font-weight: 600;
}

/* Icône décorative dans une carte de statistique */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 10px;
    background: rgba(2, 132, 199, .1);
    color: var(--fly-primary);
}

.stat-card.light .stat-icon,
.stat-card[class*="light"] .stat-icon {
    background: rgba(2, 132, 199, .1);
    color: var(--fly-primary);
}

.stat-card:not(.light) .stat-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* =====================================================
   MODE SOMBRE — activé via [data-theme="dark"] sur <html>
   (voir main.php + settings/index.php). Recible les
   surfaces partagées ; les bannières dégradées (hero,
   welcome-banner, sidebar) restent identiques dans les
   deux modes car déjà sombres/colorées.
   ===================================================== */
:root {
    --fly-dark-bg: #0f172a;
    --fly-dark-surface: #1e293b;
    --fly-dark-border: #334155;
    --fly-dark-text: #e2e8f0;
    --fly-dark-text-strong: #f8fafc;
    --fly-dark-text-muted: #94a3b8;
}

[data-theme="dark"] body {
    background: var(--fly-dark-bg);
    color: var(--fly-dark-text);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--fly-dark-text-strong);
}

[data-theme="dark"] .text-muted {
    color: var(--fly-dark-text-muted) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-box,
[data-theme="dark"] .job-card,
[data-theme="dark"] .formation-card,
[data-theme="dark"] .saved-card,
[data-theme="dark"] .stat-card.light,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .page-header,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .login-card,
[data-theme="dark"] .apply-card,
[data-theme="dark"] .subscribe-card,
[data-theme="dark"] .chat-card,
[data-theme="dark"] .user-card,
[data-theme="dark"] .candidate-card,
[data-theme="dark"] .settings-card {
    background: var(--fly-dark-surface) !important;
    border-color: var(--fly-dark-border) !important;
    color: var(--fly-dark-text);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--fly-dark-bg) !important;
    border-color: var(--fly-dark-border) !important;
    color: var(--fly-dark-text) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--fly-dark-text-muted);
}

[data-theme="dark"] .table {
    color: var(--fly-dark-text);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .custom-table thead {
    background: var(--fly-dark-surface) !important;
    color: var(--fly-dark-text-muted);
}

[data-theme="dark"] .custom-table tr:hover,
[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, .03) !important;
}

[data-theme="dark"] .badge-role,
[data-theme="dark"] .tag,
[data-theme="dark"] .doc-name {
    background: var(--fly-dark-border) !important;
    color: var(--fly-dark-text) !important;
}

[data-theme="dark"] hr {
    border-color: var(--fly-dark-border);
}

[data-theme="dark"] .content-box,
[data-theme="dark"] .doc-box,
[data-theme="dark"] .chat-box,
[data-theme="dark"] .job-info-box,
[data-theme="dark"] .formation-info-box,
[data-theme="dark"] .theme-option,
[data-theme="dark"] .settings-row {
    background: var(--fly-dark-surface) !important;
    border-color: var(--fly-dark-border) !important;
    color: var(--fly-dark-text);
}

[data-theme="dark"] .settings-row {
    border-top-color: var(--fly-dark-border) !important;
    background: transparent !important;
}

[data-theme="dark"] .login-wrapper,
[data-theme="dark"] .empty-chat {
    background: var(--fly-dark-bg) !important;
}

/* =====================================================
   ONBOARDING — assistant en 3 étapes (student/candidate)
   ===================================================== */
.onboarding-wrapper {
    min-height: 100vh;
    display: flex;
}

.onboarding-side {
    flex: 1;
    max-width: 420px;
    background: linear-gradient(160deg, #E0F7FE, #f5fdff);
    padding: 60px 44px;
    display: none;
}

.onboarding-side-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #fff;
    color: var(--fly-primary);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--fly-shadow);
    margin-bottom: 24px;
}

.onboarding-side h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
}

.onboarding-side p {
    color: var(--fly-text-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

@media (min-width: 900px) {
    .onboarding-side {
        display: block;
    }
}

.onboarding-main {
    flex: 1;
    padding: 50px 40px;
    max-width: 640px;
    margin: 0 auto;
}

/* STEPPER */
.onboarding-stepper {
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fly-text-muted);
}

.onboarding-step .step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--fly-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.onboarding-step.done .step-circle {
    background: #dcfce7;
    color: #166534;
}

.onboarding-step.active .step-circle {
    background: var(--fly-primary);
    color: #fff;
}

.onboarding-step.active {
    color: #111827;
}

.onboarding-step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 10px;
}

.onboarding-step-line.done {
    background: #86efac;
}

/* CHECK GROUP */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    cursor: pointer;
    transition: 0.2s;
}

.check-option:hover {
    border-color: var(--fly-primary);
    background: #E0F7FE;
}

.check-option input {
    accent-color: var(--fly-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* =====================================================
   🛡️ SUPERVISION (espace administrateur système)
   ===================================================== */
.status-pill {
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 9px;
    flex-shrink: 0;
}

.status-pending  { background: #fef3c7; color: #92400e; }
.status-approved { background: #dcfce7; color: #166534; }
.status-rejected { background: #fee2e2; color: #991b1b; }

/* 🖼️ PASTILLE UTILISATEUR (Format::avatar) : photo de profil ou initiale */
.fly-avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #0284C7;
    color: #fff;
    font-weight: 700;
    vertical-align: middle;
}

.fly-avatar-initial {
    margin: auto;
    line-height: 1;
}

.fly-avatar a {
    position: absolute;
    inset: 0;
}

.fly-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
    display: block;
}

/* 📁 DOSSIER DE VALIDATION (ProfileCompletion::meter) */
.dossier-meter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    cursor: help;
}

.dossier-bar {
    flex: 1;
    height: 7px;
    min-width: 60px;
    border-radius: 10px;
    background: #e5e7eb;
    overflow: hidden;
}

.dossier-bar > span {
    display: block;
    height: 100%;
    border-radius: 10px;
}

.dossier-pct {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.dossier-meter.is-complete .dossier-bar > span { background: #22c55e; }
.dossier-meter.is-complete .dossier-pct { color: #166534; }
.dossier-meter.is-partial .dossier-bar > span { background: #f59e0b; }
.dossier-meter.is-partial .dossier-pct { color: #92400e; }
.dossier-meter.is-low .dossier-bar > span { background: #ef4444; }
.dossier-meter.is-low .dossier-pct { color: #b91c1c; }

/* liste à cocher du dossier */
.dossier-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 14px;
    text-align: left;
}

.dossier-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.dossier-checklist .bi-check-circle-fill { color: #22c55e; }
.dossier-checklist .bi-circle { color: #ef4444; }
.dossier-checklist li.is-missing { color: #b91c1c; font-weight: 600; }

/* 🖼️ CHAMP PHOTO (partials/image_field.php) : aperçu + contrôles */
.image-field-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.image-field-preview {
    position: relative;
    flex: 0 0 240px;
    height: 130px;
    border-radius: 12px;
    overflow: hidden;
    background: #e0f2fe;
    border: 1px solid #e5e7eb;
}

.image-field-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-field-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(15, 23, 42, .7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.image-field-controls {
    flex: 1;
    min-width: 0;
}

.image-field-error {
    margin-top: 6px;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border-radius: 8px;
    padding: 6px 10px;
}

@media (max-width: 575.98px) {
    .image-field-row {
        flex-direction: column;
    }

    .image-field-preview {
        flex-basis: auto;
        width: 100%;
        height: 160px;
    }
}

/* ✍️ PRÉ-REMPLISSAGE DES FORMULAIRES (partials/prefill_picker.php) */
.prefill-box {
    background: #f0f9ff;
    border: 1px solid #e0f2fe;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.prefill-box .form-label {
    font-weight: 600;
    color: #075985;
}

.prefill-box.is-applied {
    border-color: #86efac;
    background: #f0fdf4;
}

.prefill-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #075985;
    background: #f8fafc;
    border-left: 3px solid #38BDF8;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
}

.prefill-image-note {
    margin-top: 6px;
    font-size: 13px;
    color: #166534;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 6px 10px;
}

/* ✅ BADGE DE CONFIANCE (Format::trustBadge) : entreprise vérifiée / publiée par FLY */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* 📤 PARTAGE (partials/share.php) */
.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.share-label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-right: 4px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.share-btn:hover {
    border-color: #bae6fd;
    color: #0f172a;
}

.share-whatsapp .bi { color: #16a34a; }
.share-facebook .bi { color: #1877f2; }
.share-linkedin .bi { color: #0a66c2; }
.share-copy .bi,
.share-native .bi { color: #0284C7; }

@media (max-width: 575.98px) {
    .share-btn span {
        display: none;
    }

    .share-btn {
        padding: 9px 13px;
        font-size: 16px;
    }
}

/* 🏷️ ÉTAT D'UNE DEMANDE (candidature, inscription, mentorat) : une étiquette, pas un bouton —
   aucun relief ni curseur, pour ne pas inviter au clic */
.state-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
    background: #f1f5f9;
    color: #334155;
}

.state-badge.state-pending  { background: #fef3c7; color: #92400e; }
.state-badge.state-approved { background: #dcfce7; color: #166534; }
.state-badge.state-rejected { background: #fee2e2; color: #991b1b; }
.state-badge.state-info     { background: #e0f2fe; color: #075985; }

/* 🗂️ ONGLETS DE FILTRE (gestion des utilisateurs) : défilement horizontal sur mobile */
.filter-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
    scrollbar-width: thin;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--fly-border, #e5e7eb);
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.filter-tab:hover {
    color: #0284C7;
    border-color: #bae6fd;
}

.filter-tab.is-active {
    background: #0284C7;
    border-color: #0284C7;
    color: #fff;
}

.filter-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.filter-tab.has-todo .filter-count {
    background: #fef3c7;
    color: #92400e;
}

.filter-tab.is-active .filter-count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.filter-bar .form-select {
    width: auto;
    min-width: 170px;
}

.filter-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 420px;
}

.filter-search .bi-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.filter-search .form-control {
    padding-left: 36px;
}

@media (max-width: 575.98px) {
    .filter-search,
    .filter-bar .form-select {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* 🔎 FILTRE ACTIF (ex : candidatures d'une offre) */
.filter-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e0f2fe;
    color: #075985;
    font-size: 13px;
}

.filter-chip a {
    margin-left: 6px;
    color: #0369a1;
    font-weight: 600;
    text-decoration: none;
}

/* CATÉGORIES DU JOURNAL (mêmes couleurs dans /system/activity) */
.cat-badge {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    padding: 3px 8px;
    min-width: 128px;
    text-align: center;
    background: #f1f5f9;
    color: #334155;
}

.cat-compte      { background: #e0f2fe; color: #075985; }
.cat-validation  { background: #dcfce7; color: #166534; }
.cat-offre,
.cat-candidature { background: #ede9fe; color: #5b21b6; }
.cat-formation,
.cat-evenement,
.cat-opportunite { background: #fef3c7; color: #92400e; }
.cat-service,
.cat-mentorat    { background: #fce7f3; color: #9d174d; }
.cat-assistance  { background: #ffedd5; color: #9a3412; }
.cat-systeme     { background: #fee2e2; color: #991b1b; }

/* ✅ RAPPEL "PROFIL À COMPLÉTER" (tableaux de bord étudiant / candidat) */
.completion-nudge {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}

.completion-nudge:hover {
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
    transform: translateY(-2px);
    color: inherit;
}

.completion-nudge-ring {
    --p: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(#f59e0b calc(var(--p) * 1%), #fef3c7 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.completion-nudge-ring span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.completion-nudge-body {
    flex: 1;
    min-width: 0;
}

.completion-nudge-body strong,
.completion-nudge-body small {
    display: block;
}

.completion-nudge-body small {
    color: #6b7280;
}

.completion-nudge > i {
    color: #d97706;
    font-size: 18px;
}

[data-theme="dark"] .completion-nudge,
[data-theme="dark"] .completion-nudge-ring span {
    background: var(--fly-dark-surface);
}

/* LIEN "RETOUR" en haut des pages de détail */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.back-link:hover {
    color: var(--fly-primary);
}

[data-theme="dark"] .back-link {
    color: var(--fly-dark-text);
}

/* =====================================================
   🔑 BANDEAU "MOT DE PASSE TEMPORAIRE" (layouts/main.php)
   ===================================================== */
.temp-password-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: var(--fly-radius);
    padding: 12px 16px;
    margin: 0 auto 18px;
    max-width: 1296px;
    font-size: 14px;
}

.temp-password-banner > i {
    font-size: 20px;
}

.temp-password-banner-text {
    flex: 1 1 220px;
    min-width: 0;
}

.temp-password-banner-text strong {
    display: block;
}

.temp-password-banner .btn-warning {
    font-weight: 600;
    border-radius: 8px;
}

[data-theme="dark"] .temp-password-banner {
    background: #422006;
    border-color: #92400e;
    color: #fde68a;
}

/* =====================================================
   📱 RESPONSIVE — règles mobiles partagées entre les pages
   ===================================================== */

/* un mot ou une URL très longs passent à la ligne au lieu de déborder */
body {
    overflow-wrap: break-word;
}

/* éléments flex qui contiennent du texte : autorisés à rétrécir */
.onboarding-main,
.job-header-left > div,
.formation-header-left > div,
.event-header-left > div {
    min-width: 0;
}

@media (max-width: 767.98px) {

    /* En-têtes des pages détail (offre / formation / événement) :
       infos au-dessus, puis prix + bouton sur une ligne */
    .content .job-header-card,
    .content .formation-header-card,
    .content .event-header-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .content .job-header-left,
    .content .formation-header-left,
    .content .event-header-left {
        align-items: flex-start;
    }

    .content .job-header-left .job-icon,
    .content .formation-header-left .formation-icon,
    .content .event-header-left .event-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .content .job-header-card h3,
    .content .formation-header-card h3,
    .content .event-header-card h3 {
        font-size: 1.2rem;
    }

    .content .job-header-right,
    .content .formation-header-right,
    .content .event-header-right {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .content .job-header-right .salary,
    .content .formation-header-right .price,
    .content .event-header-right .price {
        margin-bottom: 0;
    }

    .content .organizer-line {
        flex-wrap: wrap;
    }

    /* Bannière de bienvenue des tableaux de bord */
    .welcome-banner {
        padding: 22px 20px;
    }

    .welcome-banner h3 {
        font-size: 1.35rem;
    }

    /* Onboarding : marges réduites, stepper compact */
    .onboarding-main {
        padding: 32px 20px;
    }

    .onboarding-stepper {
        margin-bottom: 28px;
    }

    .onboarding-step:not(.active) {
        font-size: 0;
        gap: 0;
    }

    .onboarding-step-line {
        margin: 0 6px;
    }

    .onboarding-actions {
        flex-direction: column-reverse;
    }

    .onboarding-actions .btn {
        width: 100%;
    }

    /* En-têtes de liste (titre + recherche / bouton) : empilés */
    .content .jobs-header,
    .content .events-header,
    .content .formations-header,
    .content .candidate-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .content .jobs-header > *,
    .content .events-header > *,
    .content .formations-header > * {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Boutons de formulaire : action principale en haut, pleine largeur */
    .content .form-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .content .form-actions .btn {
        width: 100%;
    }

    /* Tableaux → cartes empilées (labels posés par assets/js/responsive.js) */
    .content .table-stack thead {
        display: none;
    }

    .content .table-stack,
    .content .table-stack tbody,
    .content .table-stack tr,
    .content .table-stack td {
        display: block;
        width: 100%;
    }

    .content .table-stack tr {
        padding: 10px 2px;
        border-bottom: 1px solid var(--fly-border);
    }

    .content .table-stack tr:last-child {
        border-bottom: none;
    }

    .content .table-stack td {
        border: none;
        padding: 5px 12px;
        text-align: left !important;
    }

    .content .table-stack td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #9ca3af;
        margin-bottom: 3px;
    }

    .content .table-stack td .justify-content-end {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }
}

[data-theme="dark"] .content .table-stack tr {
    border-color: var(--fly-dark-border);
}

/* 📱 FILET DE SÉCURITÉ MOBILE
   Beaucoup de grilles Bootstrap dans ce projet n'utilisent qu'une classe
   col-md-* ou col-lg-* sans base col-6/col-12 pour les petits écrans — Bootstrap
   ne leur applique alors AUCUNE largeur en dessous de 768px (l'élément se
   réduit au contenu au lieu de s'empiler en pleine largeur). Plutôt que de
   corriger un par un des dizaines de fichiers de formulaires/grilles, ce
   filet de sécurité force toute colonne col-md-* ou col-lg-* qui n'a pas déjà
   une classe col-6/col-12 explicite à occuper 100% de la largeur en dessous
   de 768px. Les colonnes déjà corrigées manuellement (col-6 col-md-*) ne
   sont pas concernées par cette règle. */
@media (max-width: 767.98px) {
    .row > [class*="col-md-"]:not(.col-6):not(.col-12),
    .row > [class*="col-lg-"]:not(.col-6):not(.col-12) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* empêche un bloc flex de déborder (textes longs dans une cellule) */
.min-w-0 {
    min-width: 0;
}

/* illustration en tête des pages de statut (inscription envoyée, en attente, refusée, validée) */
.status-illu {
    width: 190px;
    max-width: 70%;
    margin-bottom: 14px;
}

/* illustration des panneaux bleus (connexion, inscription, mot de passe oublié, onboarding) */
.auth-illu {
    width: 100%;
    max-width: 300px;
    margin: 0 0 24px;
}