/**
 * AideChezSoi - Global Styles
 * Fichier CSS principal à importer dans votre application
 * Version : 1.0
 */

/* ==========================================
   VARIABLES CSS
   ========================================== */

:root {
    /* Couleurs Primaires */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-500: #667eea;
    --primary-600: #5568d3;
    --primary-700: #4453bc;
    --secondary-500: #764ba2;
    --secondary-600: #653d8a;
    --secondary-700: #542f72;

    /* Couleurs d'Action */
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafb;
    --bg-tertiary: #f3f4f6;

    /* Textes */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;

    /* Bordures */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;

    /* Typographie */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --text-h1: 3rem;
    --text-h2: 2.5rem;
    --text-h3: 1.5rem;
    --text-h4: 1.2rem;
    --text-xl: 1.3rem;
    --text-lg: 1.1rem;
    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;

    /* Poids de police */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;

    /* Espacements */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 5rem;

    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 2rem;
    --section-padding: 4rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(102, 126, 234, 0.3);

    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}

/* ==========================================
   RESET & BASE
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   TYPOGRAPHIE
   ========================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p {
    margin-bottom: var(--spacing-sm);
    line-height: var(--leading-relaxed);
}

a {
    color: var(--primary-500);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--primary-600);
}

/* ==========================================
   LAYOUT
   ========================================== */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--section-padding) 0;
}

/* Grilles */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Flexbox */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.items-center {
    align-items: center;
}
.flex-1 {
    flex: 1;
}
.w-full {
    width: 100%;
}
.leading-relaxed {
    line-height: 1.6;
}
.min-w-250 {
    min-width: 250px;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ==========================================
   BOUTONS
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: var(--success-500);
    color: white;
}

.btn-secondary:hover {
    background: var(--success-600);
}

.btn-outline {
    background: transparent;
    color: var(--primary-500);
    border: 2px solid var(--primary-500);
}

.btn-outline:hover {
    background: var(--primary-500);
    color: white;
}

.btn-white {
    background: white;
    color: var(--primary-500);
}

.btn-white:hover {
    background: var(--bg-tertiary);
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: var(--text-lg);
    border-radius: 30px;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-block {
    width: 100%;
    display: flex;
}

/* ==========================================
   CARTES
   ========================================== */

.card {
    background: var(--bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    color: white;
    flex-shrink: 0;
}

.text-center .card-icon {
    margin-left: auto;
    margin-right: auto;
}

.card-header {
    margin-bottom: var(--spacing-md);
}

.card-title {
    font-size: var(--text-h3);
    margin-bottom: var(--spacing-xs);
}

.card-body {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Card Utilisateur */
.user-card {
    background: var(--bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.user-card-icon {
    width: 100px;
    height: 100px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto var(--spacing-lg);
    color: white;
}

/* ==========================================
   FORMULAIRES
   ========================================== */

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    transition: var(--transition-base);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

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

.form-error {
    color: var(--error-500);
    font-size: var(--text-sm);
    margin-top: 0.25rem;
}

.form-help {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-top: 0.25rem;
}

.form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Checkbox et Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.form-checkbox,
.form-radio {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.form-checkbox:checked,
.form-radio:checked {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

/* ==========================================
   HEADER & NAVIGATION
   ========================================== */

.header {
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 0;
    box-shadow: var(--shadow-md);
}

.header.sticky {
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 2rem;
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}

.nav-mobile-auth {
    display: none;
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
}

.nav-links a {
    color: white;
    font-weight: var(--font-medium);
    transition: var(--transition-base);
}

.nav-links a:hover {
    opacity: 0.8;
}

.nav-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
    background: var(--gradient-primary);
    color: white;
    padding: var(--section-padding) 0;
    text-align: center;
}

.hero h1 {
    color: white;
    font-size: var(--text-h1);
    margin-bottom: var(--spacing-md);
    line-height: var(--leading-tight);
}

.hero p {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
    background: var(--text-primary);
    color: white;
    padding: var(--spacing-xl) 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer h4 {
    color: white;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.footer-logo-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
    border-radius: 3px;
}

.footer ul {
    list-style: none;
}

.footer li {
    padding: 0.5rem 0;
}

.footer a {
    color: var(--border-light);
    transition: var(--transition-base);
}

.footer a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--text-secondary);
    color: var(--text-tertiary);
}

/* Footer minimal (espace connecté) */
.footer-minimal {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-light);
    padding: 0.6rem 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.footer-minimal a {
    color: var(--text-secondary);
    margin: 0 0.4rem;
    text-decoration: none;
}

.footer-minimal a:hover {
    color: var(--primary-500);
}

/* ==========================================
   UTILITAIRES
   ========================================== */

/* Honeypot anti-bot */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Texte */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-white { color: white; }

.text-sm { font-size: var(--text-sm, 0.875rem); }
.text-lg { font-size: 1.2rem; }
.text-3xl { font-size: 3rem; }

.font-bold { font-weight: var(--font-bold); }
.font-semibold { font-weight: var(--font-semibold); }
.font-medium { font-weight: var(--font-medium); }

/* Marges */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Paddings */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Backgrounds */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }
.bg-gradient { background: var(--gradient-primary); }

/* Ombres */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Affichage */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 992px) {
    :root {
        --text-h1: 2.5rem;
        --text-h2: 2rem;
        --container-padding: 1.5rem;
        --section-padding: 3rem;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --text-h1: 2rem;
        --text-h2: 1.75rem;
        --text-h3: 1.25rem;
        --container-padding: 1rem;
        --section-padding: 2.5rem;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #5568d3 0%, #653d8a 100%);
        flex-direction: column;
        padding: var(--spacing-sm) var(--spacing-md);
        gap: 0;
        z-index: 300;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        display: block;
    }

    .nav-links .nav-link:last-child {
        border-bottom: none;
    }

    /* Dropdown guide : afficher en dessous sur mobile, sans positionnement absolu */
    .nav-links .nav-dropdown {
        position: static;
    }

    .nav-links .nav-dropdown-menu {
        position: static;
        display: none;
        transform: none;
        left: auto;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        border-radius: 8px;
        padding: 0.25rem 0;
        margin: 0.25rem 0;
        min-width: auto;
    }

    .nav-links .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    /* Sur mobile, pas de hover pour le dropdown, on utilise la classe .open */
    .nav-links .nav-dropdown:hover .nav-dropdown-menu {
        display: none;
    }

    .nav-links .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-links .nav-dropdown-menu a {
        color: white;
        padding: 0.5rem 1rem;
        font-size: var(--text-sm);
    }

    .nav-links .nav-dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: white;
        margin: 3px 0;
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Logo réduit sur mobile */
    .logo-img {
        height: 36px;
    }

    /* Nav buttons sur mobile : masquer le nom, garder l'avatar compact */
    .nav-buttons {
        display: flex !important;
        gap: 0.5rem;
    }

    .nav-buttons .text-white,
    .nav-buttons .dropdown-arrow {
        display: none;
    }

    .nav-buttons .btn-small {
        font-size: var(--text-xs);
        padding: 0.3rem 0.6rem;
    }

    /* Masquer les boutons Se connecter / S'inscrire du header sur mobile (dispo dans le menu hamburger) */
    .nav-btn-login,
    .nav-btn-register {
        display: none;
    }

    /* Lien S'inscrire dans le menu hamburger (mobile uniquement) */
    .nav-mobile-auth {
        display: block;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 0.25rem;
    }

    .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav .logo {
        flex-shrink: 0;
    }

    /* Hamburger toujours visible à droite */
    .mobile-menu-toggle {
        order: 3;
    }

    .nav-buttons {
        order: 2;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .btn-large {
        padding: 0.6rem 1.2rem;
        font-size: var(--text-sm);
        border-radius: 25px;
    }

    /* Dashboard action buttons */
    .dashboard-header {
        flex-direction: column;
    }

    .dashboard-actions {
        width: 100%;
    }

    /* Card action buttons: inline on mobile */
    .helper-card-actions {
        flex-direction: row;
    }

    .helper-card-actions .btn {
        padding: 0.4rem 0.8rem;
        font-size: var(--text-xs);
    }

    .job-posting-actions .btn {
        padding: 0.4rem 0.8rem;
        font-size: var(--text-xs);
    }

    /* Stats bar compact 2x2 on mobile */
    .stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 1rem;
        gap: 0.75rem;
    }

    .stats-bar-value {
        font-size: 1.2rem;
    }

    .stats-bar-item {
        min-width: 0;
    }
}

@media (max-width: 576px) {
    .flex-between {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .btn-block-mobile {
        width: 100%;
        display: flex;
    }
}

/* ── Page actions — barre de boutons d'en-tête de page ── */
.page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.page-actions .btn {
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    height: 40px;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .page-actions {
        flex-direction: row;
        width: 100%;
    }

    .page-actions .btn {
        flex: 1;
        height: 44px;
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        text-align: center;
        box-sizing: border-box;
    }
}

/* ── Nav buttons — hauteur cohérente avec .page-actions ── */
.nav-buttons .btn,
.nav-mobile-cta .btn {
    height: 40px;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .nav-mobile-cta .btn {
        height: 35px;
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.hover-lift {
    transition: var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* ==========================================
   ACCESSIBILITÉ
   ========================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible pour accessibilité clavier */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* ==========================================
   USER MENU DROPDOWN
   ========================================== */

.user-menu-container {
    position: relative;
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

.user-profile-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: white;
}

.user-menu-container.active .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.user-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-base);
    font-size: var(--text-base);
}

.dropdown-item:hover {
    background: var(--bg-secondary);
}

.dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-600);
}

.item-icon {
    font-size: 1.25rem;
}

.dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0.5rem 0;
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

.breadcrumb-sep {
    color: #d1d5db;
    font-weight: 400;
    user-select: none;
}

.breadcrumb-current {
    color: #6b7280;
    font-weight: 600;
}

/* ==========================================
   UTILITAIRES COMPLÉMENTAIRES
   ========================================== */

.text-tertiary { color: var(--text-tertiary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.container-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }

.btn-danger {
    background: var(--error-500);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-danger:hover {
    background: var(--error-600);
    transform: translateY(-1px);
}

/* ==========================================
   FILTRES / ACCORDÉON
   ========================================== */

.filters-section { /* container card */ }

.filters-section.card {
    padding: 1rem 1.25rem;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.filters-header:hover { opacity: 0.8; }

.filters-header h3,
.filters-header .filters-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.filters-toggle {
    font-size: 1rem;
    transition: transform 0.3s ease;
    color: var(--text-tertiary);
}

.filters-content {
    margin-top: 0.75rem;
}

.filters-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.filters-section .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.filters-section .form-input {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}

.filters-section .service-checkbox {
    padding: 0.3rem 0.5rem;
}

.filters-section .service-label,
.filters-section .service-checkbox span {
    font-size: 0.8rem;
}

.filters-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filters-actions .btn {
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    height: 40px;
    box-sizing: border-box;
}

/* Pagination résultats */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Section label compact (titres de sous-sections) */
.section-label-compact {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Dashboard section header (titre + action côte à côte) */
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

/* ==========================================
   CONVERSATIONS / MESSAGES
   ========================================== */

.conversation-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.application-card.job-application .conversation-type-badge {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.application-card.partner-contact .conversation-type-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.application-card.partner-contact {
    border-left: 4px solid #10b981;
}

.application-card.job-application {
    border-left: 4px solid #667eea;
}

.application-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.application-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.badge-primary {
    display: inline-block;
    background: var(--primary-500);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.last-message {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.message {
    padding: 1rem;
    border-radius: var(--radius-md);
    max-width: 80%;
}

.message-sent {
    align-self: flex-end;
    background: var(--primary-500);
    color: white;
    margin-left: auto;
}

.message-received {
    align-self: flex-start;
    background: var(--bg-secondary);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
}

.message-content {
    line-height: 1.6;
}

.message-sent .text-tertiary {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   CONTRACT SUGGESTION BANNER (messagerie)
   ========================================== */

.contract-suggestion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-500);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
}

.contract-suggestion-banner.freemium {
    border-left-color: var(--success-500);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(5, 150, 105, 0.06) 100%);
}

.contract-suggestion-banner-text {
    flex: 1;
    min-width: 0;
}

.contract-suggestion-banner-text strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.contract-suggestion-banner-text span {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.contract-suggestion-banner .btn {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 0.55rem 1.1rem;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .contract-suggestion-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .contract-suggestion-banner .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================
   CONVERSATION LAYOUT (employer sidebar)
   ========================================== */

.conversation-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.helper-profile-sidebar {
    position: sticky;
    top: var(--spacing-lg);
}

.helper-profile-compact {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 0;
}

.helper-profile-compact-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.helper-profile-compact-name {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.helper-profile-compact-arrow {
    font-size: 0.7rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.helper-profile-compact.open .helper-profile-compact-arrow {
    transform: rotate(180deg);
}

.helper-profile-detail {
    display: block;
}

.helper-profile-card {
    text-align: center;
}

.helper-profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--spacing-md);
    border: 3px solid var(--primary-100, rgba(102,126,234,0.2));
}

.helper-profile-initials-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--primary-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: 2.5rem;
    margin: 0 auto var(--spacing-md);
    border: 3px solid var(--primary-100, rgba(102,126,234,0.2));
}

.helper-name {
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.helper-details {
    text-align: left;
    border-top: 1px solid var(--border-light);
    padding-top: var(--spacing-md);
}

.helper-rate {
    background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    text-align: center;
    display: inline-block;
}

.rate-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.rate-value {
    display: block;
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--primary-600);
}

.helper-info-item {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.info-icon {
    margin-right: var(--spacing-xs);
}

.helper-services {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}

.service-tag-small {
    background: rgba(102,126,234,0.1);
    color: var(--primary-700);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.helper-bio {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-sm);
}

.helper-bio p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.conversation-main {
    min-width: 0;
}

/* ==========================================
   PARTENAIRES / HELPERS CARDS
   ========================================== */

.partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.partner-card {
    padding: 1.5rem;
}

.partner-header {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.partner-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.partner-avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.partner-actions {
    display: flex;
    gap: 0.75rem;
}

.services-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ==========================================
   AUTOCOMPLETE / LOCATION SUGGESTIONS
   ========================================== */

.autocomplete-container {
    position: relative;
}

.location-suggestions {
    display: none;
    position: absolute;
    z-index: 1000;
    background: white;
    border: 2px solid var(--primary-500);
    border-radius: var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.location-suggestions.show {
    display: block;
}

.location-suggestion {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.location-suggestion:last-child {
    border-bottom: none;
}

.location-suggestion:hover,
.location-suggestion.is-active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding-left: 1.25rem;
}

.location-suggestion-empty {
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}

.location-suggestion-error {
    padding: 0.75rem 1rem;
    color: #ef4444;
    text-align: center;
    font-size: 0.875rem;
}

.location-loader {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

.autocomplete-container.is-loading .location-loader {
    display: block;
}

/* ==========================================
   PROFIL DÉTAILLÉ (binôme)
   ========================================== */

.profile-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.profile-main {
    min-width: 0;
}

.profile-card {
    padding: 2rem;
}

.profile-header-section {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.profile-picture-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-picture-placeholder-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
}

.services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.service-badge {
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.preferences-box {
    background: var(--bg-tertiary);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-500);
}

.contact-card {
    padding: 2rem;
}

.map-container-small {
    height: 250px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.map-container-small > div,
.map-container-small .leaflet-container {
    height: 100%;
    width: 100%;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.info-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================
   VÉRIFICATION (KYC)
   ========================================== */

.status-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
}

.status-icon.pending {
    animation: pulse-opacity 2s ease-in-out infinite;
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .admin-table th:nth-child(3),
    .admin-table td:nth-child(3),
    .admin-table th:nth-child(4),
    .admin-table td:nth-child(4) {
        display: none;
    }
}

.admin-notes {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--warning-500);
    text-align: left;
}

.admin-notes h3 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.admin-notes p {
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
}

.verification-header {
    text-align: center;
    margin-bottom: 3rem;
}

.verification-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
}

.benefits-list li {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.benefit-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.benefits-list strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.benefits-list p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.documents-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.documents-list li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.verification-form {
    margin-top: 1.5rem;
}

.security-notice {
    background: rgba(102, 126, 234, 0.1);
    border-left: 4px solid var(--primary-500);
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.security-notice h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary-600);
}

.security-notice p {
    margin: 0;
    line-height: 1.6;
}

/* ==========================================
   DASHBOARD COMMON (header, actions)
   ========================================== */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.dashboard-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================
   DASHBOARD HELPER (premium, jobs)
   ========================================== */

.premium-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.premium-feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium-feature-card h3 {
    font-size: 1.2rem;
    margin: 0.75rem 0 0.5rem 0;
    color: var(--text-primary);
}

.premium-feature-card .text-secondary {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.premium-feature-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.premium-upsell-card {
    padding: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    grid-column: 1 / -1;
}

.premium-upsell-card > div {
    padding: 0.6rem 1rem;
}

.premium-upsell-icon {
    font-size: 3rem;
}

.premium-upsell-card h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
}

/* Version compacte (helper dashboard filet de sécurité) */
.premium-upsell-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.premium-upsell-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.premium-upsell-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.premium-upsell-desc {
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
}

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

.btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Tooltip wrapper for disabled buttons */
.tooltip-wrapper {
    position: relative;
    display: block;
    width: 100%;
    cursor: not-allowed;
}

.tooltip-wrapper .btn-disabled {
    pointer-events: none;
    width: 100%;
}

.tooltip-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
    pointer-events: none;
}

.tooltip-wrapper::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
    pointer-events: none;
}

.tooltip-wrapper:hover::after,
.tooltip-wrapper:hover::before,
.tooltip-wrapper:active::after,
.tooltip-wrapper:active::before {
    opacity: 1;
    visibility: visible;
}

/* Notification badge animated */
.btn-with-badge {
    position: relative;
}

.notification-badge-animated {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error-500);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

/* Job posting grid & actions */
.job-postings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
}

.job-posting-card {
    display: flex;
    flex-direction: column;
}

.job-posting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
}

.job-posting-actions .btn {
    white-space: nowrap;
}

.job-posting-status {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    width: fit-content;
}

.job-posting-status.active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.job-posting-status.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.job-posting-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Job posting badge link */
.job-posting-badge-link {
    text-decoration: none;
}

.job-posting-badge {
    transition: all 0.3s ease;
    cursor: pointer;
}

.job-posting-badge-link:hover .job-posting-badge {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Services grid compact */
.services-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-light);
}

.modal-header h3 {
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.map-container {
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ==========================================
   RESPONSIVE CONSOLIDÉ (modules annonces)
   ========================================== */

@media (max-width: 992px) {
    .profile-container {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        order: -1;
    }

    .profile-header-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .conversation-layout {
        grid-template-columns: 1fr;
    }

    .helper-profile-sidebar {
        position: static;
    }

    .helper-profile-compact {
        display: flex;
    }

    .helper-profile-detail {
        display: none;
    }

    .helper-profile-detail.open {
        display: block;
    }

    .verification-layout {
        grid-template-columns: 1fr;
    }

    .premium-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .filters-grid-compact {
        grid-template-columns: 1fr;
    }

    .partners-grid,
    .helpers-grid,
    .job-postings-grid {
        grid-template-columns: 1fr;
    }

    .premium-upsell-card > div {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .premium-upsell-card .btn {
        width: 100%;
    }

    .verification-cta-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================
   COLOR PICKER & COLOR MODE TOGGLE
   ========================================== */

/* Color picker input */
.form-color-input {
    width: 50px;
    height: 38px;
    padding: 2px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
}

/* Color mode toggle */
.color-mode-toggle {
    display: inline-flex;
    border-radius: 25px;
    overflow: hidden;
    border: 2px solid var(--border-light);
}

.color-mode-btn {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.color-mode-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Activity color dot (inline color picker) */
.activity-color-dot {
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
}

/* ========================================
   Account Pages
   ======================================== */

/* Account hub grid */
.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.account-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.account-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.account-card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.account-card-icon-security {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.account-card-icon-billing {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.account-card-icon-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.account-card-icon-notifications {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.notifications-toggle-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-medium);
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-500);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch-touchable {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.toggle-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.legal-retention-note {
    background: rgba(102, 126, 234, 0.05);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.account-card-link {
    color: var(--primary-500);
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: auto;
}

.account-card-link-danger {
    color: var(--error-500);
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: auto;
}

.account-card-danger {
    border: 2px solid rgba(239, 68, 68, 0.15);
}

.account-card-danger:hover {
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.1);
}

/* Section header */
.section-header {
    margin-bottom: 0.5rem;
}

.section-header h1 {
    margin-bottom: 0.5rem;
}

/* Account nav */
.account-nav-wrapper {
    position: relative;
}

.account-nav-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 2px;
    width: 48px;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
    display: none;
}

@media (max-width: 768px) {
    .account-nav-wrapper::after {
        display: block;
    }
}

.account-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.account-nav::-webkit-scrollbar {
    display: none;
}

.account-nav-item {
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -2px;
}

.account-nav-item:hover {
    color: var(--primary-500);
}

.account-nav-item.active {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
}

.account-nav-item-danger:hover {
    color: var(--error-500);
}

.account-nav-item-danger.active {
    color: var(--error-500);
    border-bottom-color: var(--error-500);
}

/* Security info card */
.security-info-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.security-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.security-info-row + .security-info-row {
    border-top: 1px solid var(--border-light);
}

.security-info-label {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.security-info-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Auth badge */
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.auth-badge.google {
    background: rgba(66, 133, 244, 0.1);
    color: #4285f4;
}

.auth-badge.email {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

/* Security password section */
.security-password-section {
    margin-top: 1rem;
}

.security-password-section h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Danger zone */
.danger-zone {
    background: rgba(239, 68, 68, 0.04);
    border: 2px solid rgba(239, 68, 68, 0.2);
    border-radius: 15px;
    padding: 2rem;
}

.danger-zone-title {
    color: var(--error-600);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.danger-zone-text {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.danger-zone-list {
    color: var(--text-secondary);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

.danger-zone-list li {
    margin-bottom: 0.4rem;
}

.danger-form .form-group {
    margin-top: 1.5rem;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.badge-neutral {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Responsive account */
@media (max-width: 768px) {
    .account-hub-grid {
        grid-template-columns: 1fr;
    }

    .account-nav {
        gap: 0;
    }

    .account-nav-item {
        padding: 0.75rem 0.9rem;
        font-size: 0.875rem;
        min-height: 44px;
    }

    .security-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ==========================================
   APPLICATION STATUS BADGES
   ========================================== */

.status-badge-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge-accepted {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ==========================================
   STATS BAR (employer dashboard)
   ========================================== */

.stats-bar {
    display: flex;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem 2rem;
    color: white;
    gap: 2rem;
    flex-wrap: wrap;
}

.stats-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 100px;
}

.stats-bar-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.stats-bar-label {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 0.25rem;
}

/* ==========================================
   FILTER TABS
   ========================================== */

.application-status-tabs,
.employer-posting-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border-light);
    overflow-x: auto;
}

.contract-search-bar {
    background: var(--bg-secondary);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
}

.contract-search-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.contract-search-input-wrap {
    flex: 1;
    min-width: 220px;
    max-width: 400px;
    position: relative;
}

.contract-search-input {
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    width: 100%;
}

.contract-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1rem;
}

.filter-tabs-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .contract-search-input-wrap {
        max-width: 100%;
    }

    .contract-search-bar-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

.filter-tab {
    padding: 0.6rem 1.25rem;
    border: none;
    background: transparent;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-tab:hover {
    color: var(--primary-500);
}

.filter-tab.active {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
}

/* ==========================================
   DISTANCE BADGE
   ========================================== */

.distance-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary-600);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* ==========================================
   APPLIED BANNER (job detail)
   ========================================== */

.applied-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-weight: 500;
}

/* ==========================================
   STICKY CTA BAR (job detail)
   ========================================== */

.sticky-cta-bar {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 1rem 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 50;
    border-radius: 15px 15px 0 0;
}

/* ==========================================
   CONFIRM MODAL
   ========================================== */

.confirm-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.confirm-modal-overlay.show {
    display: flex;
}

.confirm-modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.confirm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.confirm-modal-header h3 {
    margin: 0;
}

.confirm-modal-message {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.confirm-modal-entity-name {
    font-weight: 600;
    color: var(--text-primary);
}

/* Danger button */
.btn-danger {
    background: var(--error-500);
    color: white;
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: var(--error-600);
}

/* ==========================================
   HELPER PREVIEW (employer applications)
   ========================================== */

.helper-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-light);
}

.link-primary {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}

.link-primary:hover {
    text-decoration: underline;
}

.helper-avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.helper-avatar-placeholder-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.services-tags-inline {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* ==========================================
   HELPER SEARCH CARDS - AVATARS & LAYOUT
   ========================================== */

.helper-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.helper-avatar-placeholder-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.helper-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.helper-card {
    display: flex;
    flex-direction: column;
}

.helper-card-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.helper-card-link:hover {
    color: inherit;
}

.helper-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.helper-card-actions .btn {
    flex: 1;
    text-align: center;
}

/* ==========================================
   COMPACT LIST CARDS — annonces, candidatures, binômes
   Densité équivalente aux modules contrat/planning
   ========================================== */

/* Conteneurs listes */
.applications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* Overrides padding pour les cartes liste */
.job-listing-card,
.application-card,
.job-posting-card,
.partner-card {
    padding: 0.875rem 1.25rem;
}

/* Hover plus subtil sur les listes */
.job-listing-card:hover,
.application-card:hover,
.job-posting-card:hover,
.partner-card:hover {
    transform: translateY(-2px);
}

/* Titres compacts */
.job-listing-card h3,
.application-card h3,
.job-posting-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* Textes secondaires dans ces cartes */
.job-listing-card .text-secondary,
.application-card .text-secondary,
.job-posting-card .text-secondary,
.partner-card .text-secondary {
    font-size: 0.825rem;
}

/* Extraits de description */
.job-listing-excerpt,
.job-posting-excerpt {
    font-size: 0.825rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    margin-bottom: 0.35rem;
}

/* Heures/semaine dans les annonces */
.job-hours {
    font-size: 0.825rem;
    margin: 0.2rem 0;
}

/* Footer des cartes annonces */
.job-listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.625rem;
}

/* Services dans les cartes annonces */
.job-listing-card .job-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.25rem 0;
}

/* Footer candidatures */
.application-footer {
    margin-top: 0.625rem;
}

/* Aperçu dernier message */
.last-message {
    padding: 0.5rem 0.75rem;
    margin-top: 0.35rem;
}

.last-message .text-sm {
    font-size: 0.8rem;
}

/* Grille annonces employeur */
.job-postings-grid {
    gap: 0.75rem;
}

.job-posting-meta {
    margin-top: 0.5rem;
}

.job-posting-actions {
    padding-top: 0.625rem;
}


.partner-header {
    gap: 0.75rem;
}

.partner-avatar,
.partner-avatar-placeholder {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.partner-avatar-placeholder {
    font-size: 1.25rem;
}

.partner-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.partner-card .mt-sm {
    margin-top: 0.35rem;
}

.partner-actions {
    margin-top: 0.625rem;
}

/* ==========================================
   RESPONSIVE - MODULES ANNONCES/CANDIDATURES
   ========================================== */

@media (max-width: 576px) {
    .services-grid,
    .services-grid-compact {
        grid-template-columns: 1fr 1fr;
    }

    /* PROFIL-MOBILE-1 : map compacte sur mobile */
    .profile-map-canvas {
        height: 200px !important;
    }

    .sticky-cta-bar {
        position: fixed;
        left: 0;
        right: 0;
        border-radius: 0;
        padding: 0.75rem 1rem;
    }

    body:has(.mobile-bottom-nav) .sticky-cta-bar {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    .page-title {
        font-size: 1.75rem;
    }

    .stats-bar {
        padding: 1rem;
        gap: 1rem;
    }

    .stats-bar-item {
        min-width: 70px;
    }

    .stats-bar-value {
        font-size: 1.3rem;
    }

    .applied-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .helper-preview {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .helpers-grid {
        grid-template-columns: 1fr;
    }

    .helper-avatar-lg {
        width: 60px;
        height: 60px;
    }

    .helper-avatar-placeholder-lg {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

}

/* ══════════════════════════════════════════════════════════
   Employer Contract Module
   ══════════════════════════════════════════════════════════ */

/* Link badge (contract linking status) */
.link-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.link-badge-active,
.link-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.link-badge-inactive {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Linked contract info banner */
.linked-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    color: #1e40af;
}

.linked-banner strong {
    color: #1e3a8a;
}

/* Read-only overlay hint for linked contracts */
.readonly-hint {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #92400e;
}

/* Employer contract list link badge in rows */
.contract-row .link-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
}

/* ===== SIMULATEUR CESU ===== */

.sim-container {
    max-width: 960px;
}

.sim-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.sim-header h1 {
    font-size: 1.75rem;
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

/* Form card */
.sim-form-card {
    margin-bottom: var(--spacing-lg);
}

.sim-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.sim-section-title h2 {
    font-size: 1.15rem;
    margin: 0;
}

.sim-toggle-icon {
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.sim-form {
    margin-top: var(--spacing-md);
}

.sim-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.sim-form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.sim-radio-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.sim-radio-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.sim-radio-label:has(input:checked) {
    border-color: var(--primary-500);
    background: rgba(102, 126, 234, 0.08);
}

.sim-hint-link {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--primary-500);
    text-decoration: none;
}

.sim-hint-link:hover {
    text-decoration: underline;
}

.sim-subsection {
    background: var(--bg-tertiary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.sim-subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.sim-subsection-header h3 {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-secondary);
}

.sim-subsection-hint {
    margin: 0.5rem 0;
}

.sim-submit-btn {
    width: 100%;
    margin-top: var(--spacing-md);
}

/* Results cards */
.sim-results-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.sim-result-card {
    background: var(--bg-tertiary);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.sim-result-card small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sim-result-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    color: #fff;
}

.sim-result-primary small {
    color: rgba(255, 255, 255, 0.8);
}

.sim-result-success {
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid var(--success-500);
}

.sim-result-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.sim-result-label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

/* Details grid */
.sim-details-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-sm);
}

.sim-right-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sim-detail-card {
    padding: 1.25rem;
}

.sim-detail-card h3 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--primary-600);
}

/* Table */
.sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.sim-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.sim-table-right {
    text-align: right;
    white-space: nowrap;
}

.sim-table-exo td {
    color: var(--success-600);
    font-style: italic;
}

.sim-table-info td {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
}

.sim-table-total td {
    border-top: 2px solid var(--primary-500);
    font-weight: 600;
    padding-top: 0.6rem;
}

.sim-table-credit td {
    color: var(--success-600);
    font-weight: 600;
}

.sim-table-final td {
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    color: #fff;
    padding: 0.6rem 0.5rem;
    border-radius: 6px;
}

.sim-table-final td:first-child {
    border-radius: 6px 0 0 6px;
}

.sim-table-final td:last-child {
    border-radius: 0 6px 6px 0;
}

/* Annual summary */
.sim-annual {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sim-annual-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.9rem;
}

.sim-annual-highlight {
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    color: #fff;
    font-weight: 700;
}

.sim-annual-value {
    font-weight: 700;
    font-size: 1.05rem;
}

.sim-text-success {
    color: var(--success-600);
}

/* Info list */
.sim-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.sim-info-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.sim-info-list li:last-child {
    border-bottom: none;
}

/* Links card */
.sim-links-card {
    background: rgba(102, 126, 234, 0.06);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.sim-links-card h4 {
    font-size: 0.85rem;
    color: var(--primary-600);
    margin: 0 0 0.5rem;
}

.sim-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sim-links-list li {
    padding: 0.25rem 0;
}

.sim-links-list a {
    font-size: 0.8rem;
    color: var(--primary-500);
    text-decoration: none;
}

.sim-links-list a:hover {
    text-decoration: underline;
}

/* Empty state */
.sim-empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.sim-empty-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.sim-empty-state h3 {
    margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sim-form-row,
    .sim-form-row-3 {
        grid-template-columns: 1fr;
    }

    .sim-results-cards {
        grid-template-columns: 1fr;
    }

    .sim-details-grid {
        grid-template-columns: 1fr;
    }

    .sim-radio-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sim-result-value {
        font-size: 1.4rem;
    }

    .sim-header h1 {
        font-size: 1.4rem;
    }
}

/* Printable sim - masqué à l'écran */
#printable-sim {
    display: none;
}

/* ===== IMPRESSION SIMULATEUR ===== */
@media print {
    /* Réutilise les mêmes règles de base que le rapport employeur */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body {
        background: white !important;
        font-size: 9pt;
        line-height: 1.3;
    }

    /* Masquer tout sauf le document imprimable */
    body > header.header.sticky,
    body > footer.footer,
    .no-print,
    .navbar,
    .nav,
    .nav-links,
    .nav-buttons,
    .mobile-menu-toggle,
    .footer-content,
    .footer-bottom,
    .sim-form-card,
    .sim-empty-state,
    .sim-header {
        display: none !important;
    }

    .section {
        padding: 0 !important;
    }

    .sim-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Afficher le document imprimable */
    #printable-sim {
        display: block !important;
    }

    #printable-sim .header {
        margin-bottom: 0.5cm !important;
        padding-bottom: 0.4cm !important;
    }

    #printable-sim .header-content {
        gap: 1cm !important;
    }

    #printable-sim .header-left h1 {
        font-size: 14pt !important;
    }

    #printable-sim .employer-name {
        font-size: 10pt !important;
    }

    #printable-sim .period {
        font-size: 9pt !important;
    }

    #printable-sim .meta {
        font-size: 7pt !important;
    }

    /* Paramètres */
    #printable-sim .parties-section {
        gap: 0.6cm !important;
        margin-bottom: 0.5cm !important;
    }

    #printable-sim .party-box {
        padding: 0.4cm !important;
    }

    #printable-sim .party-box h3 {
        font-size: 7pt !important;
        margin-bottom: 0.25cm !important;
    }

    #printable-sim .party-contact {
        font-size: 8pt !important;
        margin-bottom: 0.1cm !important;
    }

    /* Résumé */
    #printable-sim .summary-box {
        padding: 0.4cm !important;
        margin-bottom: 0.5cm !important;
    }

    #printable-sim .summary-grid {
        gap: 0.4cm !important;
    }

    #printable-sim .summary-item {
        padding: 0.3cm !important;
    }

    #printable-sim .summary-item .label {
        font-size: 6pt !important;
        margin-bottom: 0.15cm !important;
    }

    #printable-sim .summary-item .value {
        font-size: 12pt !important;
    }

    #printable-sim .summary-title {
        font-size: 8pt !important;
        margin-bottom: 0.3cm !important;
    }

    /* Détails financiers */
    #printable-sim .financial-section {
        margin-bottom: 0.5cm !important;
    }

    #printable-sim .financial-section h3 {
        font-size: 9pt !important;
        margin-bottom: 0.4cm !important;
    }

    #printable-sim .financial-block {
        padding: 0.4cm !important;
    }

    #printable-sim .financial-block h4 {
        font-size: 7.5pt !important;
        margin-bottom: 0.3cm !important;
    }

    #printable-sim .financial-table td {
        padding: 0.15cm 0 !important;
        font-size: 8pt !important;
    }

    #printable-sim .financial-table .net-row td,
    #printable-sim .financial-table .cost-row td,
    #printable-sim .financial-table .final-cost-row td {
        padding: 0.2cm !important;
    }

    /* Info box annuel */
    #printable-sim .info-box {
        padding: 0.35cm !important;
        margin-bottom: 0.4cm !important;
    }

    #printable-sim .info-box h4 {
        font-size: 8pt !important;
    }

    #printable-sim .info-box ul {
        font-size: 7.5pt !important;
    }

    /* Footer */
    #printable-sim .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 7pt;
        color: #9ca3af;
        padding: 0.3cm 0;
        border-top: 1px solid #e5e7eb;
        background: #ffffff;
    }

    /* Éviter les coupures */
    #printable-sim .party-box,
    #printable-sim .summary-item,
    #printable-sim .financial-block,
    #printable-sim .info-box {
        page-break-inside: avoid;
    }
}

/* ==========================================
   GUIDE CESU
   ========================================== */

/* Hero compact */
.guide-hero {
    background: var(--gradient-primary);
    color: #ffffff;
    padding: 2.5rem 0 2rem;
}

.guide-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0.5rem 0 0.5rem;
    color: #ffffff;
}

.guide-hero-subtitle {
    font-size: 1.05rem;
    opacity: 0.9;
    max-width: 700px;
    line-height: 1.5;
}

/* Breadcrumb */
.guide-breadcrumb {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.guide-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.guide-breadcrumb a:hover {
    text-decoration: underline;
}

.guide-breadcrumb-sep {
    margin: 0 0.4rem;
    opacity: 0.6;
}

/* Layout 2 colonnes */
.guide-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    align-items: start;
}

.guide-main {
    min-width: 0;
}

/* Sidebar */
.guide-sidebar {
    position: sticky;
    top: 100px;
}

.guide-sidebar-nav {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

.guide-sidebar-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.guide-sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-sidebar-links li {
    margin-bottom: 0.25rem;
}

.guide-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.guide-sidebar-link:hover {
    background: var(--bg-tertiary);
    color: var(--primary-500);
}

.guide-sidebar-link.active {
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary-500);
    font-weight: 600;
}

.guide-sidebar-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.guide-sidebar-cta {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--border-light);
}

.guide-sidebar-cta h4 {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.guide-sidebar-cta p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

/* Sections de contenu */
.guide-section {
    margin-bottom: 2rem;
}

.guide-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.guide-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.guide-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.guide-section ul {
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.guide-section ul li {
    margin-bottom: 0.35rem;
}

/* Cards grids */
.guide-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.guide-cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.guide-card-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Info & Warning boxes */
.guide-info-box {
    background: rgba(102, 126, 234, 0.08);
    border-left: 4px solid var(--primary-500);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.guide-info-box strong {
    color: var(--text-primary);
}

.guide-info-box p,
.guide-info-box ul {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.guide-info-box ul {
    padding-left: 1.25rem;
}

.guide-warning-box {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--warning-500);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.guide-warning-box strong {
    color: var(--text-primary);
}

.guide-warning-box p,
.guide-warning-box ul {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.guide-warning-box ul {
    padding-left: 1.25rem;
}

/* Steps (page 4) */
.guide-steps {
    margin-bottom: 1rem;
}

.guide-step-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.guide-step-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.guide-step-number {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.guide-step-content {
    flex: 1;
    min-width: 0;
}

.guide-step-content h3 {
    margin-top: 0.25rem;
}

/* Pagination */
.guide-pagination {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.guide-pagination-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    max-width: 48%;
}

.guide-pagination-link:hover {
    border-color: var(--primary-500);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.guide-pagination-arrow {
    font-size: 1.25rem;
    color: var(--primary-500);
    flex-shrink: 0;
}

.guide-pagination-text {
    display: flex;
    flex-direction: column;
}

.guide-pagination-text small {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.guide-pagination-text span {
    font-size: 0.9rem;
    font-weight: 600;
}

.guide-pagination-next {
    text-align: right;
    margin-left: auto;
}

/* Index grid */
.guide-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.guide-index-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.guide-index-card:hover {
    border-color: var(--primary-500);
}

.guide-index-card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.guide-index-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.guide-index-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
    margin: 0 0 1rem;
}

.guide-index-card-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-500);
}

/* Nav dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 0.15rem;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    min-width: 240px;
    z-index: 200;
    padding-top: 0.75rem;
}

/* Pont invisible pour garder le hover entre le lien et le menu */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
    display: none;
}

.nav-dropdown:hover::after {
    display: block;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: var(--bg-tertiary);
    color: var(--primary-500);
}

.nav-dropdown-section-title {
    padding: 0.4rem 1rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

.nav-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0.4rem 0;
}

/* Responsive */
@media (max-width: 992px) {
    .guide-layout {
        grid-template-columns: 1fr;
    }

    .guide-sidebar {
        position: static;
        order: -1;
    }

    .guide-cards-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .guide-hero h1 {
        font-size: 1.6rem;
    }

    .guide-cards-grid,
    .guide-cards-grid-3 {
        grid-template-columns: 1fr;
    }

    .guide-index-grid {
        grid-template-columns: 1fr;
    }

    .guide-pagination {
        flex-direction: column;
        gap: 0.75rem;
    }

    .guide-pagination-link {
        max-width: 100%;
        width: 100%;
    }

    .guide-pagination-next {
        margin-left: 0;
        text-align: left;
    }

    .guide-step-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-dropdown-menu {
        left: 0;
        transform: none;
    }
}

/* ==========================================
   HOMEPAGE — Sections spécifiques
   ========================================== */

/* Premium section — gestion contrats/plannings */
.home-premium-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.home-premium-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.home-premium-feature-card {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.home-premium-feature-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-xs);
}

.home-premium-feature-card p {
    margin: 0;
    font-size: var(--text-sm);
}

.home-premium-feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 48px;
    text-align: center;
}

.home-premium-cta-card {
    background: var(--bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: sticky;
    top: var(--spacing-xl);
}

.home-premium-price-tag {
    margin-bottom: var(--spacing-sm);
}

.home-premium-price {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    color: var(--primary-500);
}

.home-premium-period {
    font-size: var(--text-base);
    color: var(--text-tertiary);
}

@media (max-width: 768px) {
    .home-premium-grid {
        grid-template-columns: 1fr;
    }

    .home-premium-cta-card {
        position: static;
    }
}

/* ===== BANDEAU ESSAI GRATUIT (Home) ===== */
.home-trial-banner {
    text-align: center;
    padding: 2rem 1rem;
}

.home-trial-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.home-trial-banner h2 {
    margin-bottom: 0.75rem;
}

.home-trial-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 1.25rem 0;
}

.home-trial-feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.home-trial-check {
    color: #10b981;
    font-weight: bold;
}

.home-trial-cta {
    margin-top: 1.5rem;
}

.home-trial-note {
    margin: 0.75rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

@media (max-width: 576px) {
    .home-trial-features {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }
}

/* Guide CESU cards grid sur la home */
.home-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.home-guide-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.home-guide-card:hover {
    color: inherit;
}

.home-guide-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-xs);
}

.home-guide-card p {
    font-size: var(--text-sm);
    margin: 0;
}

.home-guide-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

/* Dossier highlight banner homepage */
.home-dossier-highlight {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-500);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.home-dossier-highlight:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}

.home-dossier-highlight .home-dossier-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.home-dossier-highlight h3 {
    margin: 0 0 0.25rem 0;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.home-dossier-highlight p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.home-dossier-highlight .home-dossier-arrow {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--primary-500);
    font-weight: 600;
}

@media (max-width: 576px) {
    .home-dossier-highlight {
        flex-wrap: wrap;
    }
    .home-dossier-highlight .home-dossier-arrow {
        display: none;
    }
}

/* Section salarié homepage */
.home-salarie-section {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-xl);
    align-items: flex-start;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    border-left: 4px solid var(--primary-500);
}

.home-salarie-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
    color: var(--primary-600);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.home-salarie-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-salarie-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-base);
}

.home-salarie-check {
    color: var(--success-500);
    font-weight: 700;
    flex-shrink: 0;
}

.home-salarie-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.home-salarie-links {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.home-salarie-links h3 {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.home-salarie-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.home-salarie-link {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
    transition: color 0.2s;
}

.home-salarie-link:last-child {
    border-bottom: none;
}

.home-salarie-link:hover {
    color: var(--primary-500);
}

@media (max-width: 768px) {
    .home-salarie-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }
}

/* Homepage — Featured helpers grid */
.home-featured-helpers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.home-featured-helper-card {
    background: var(--bg-primary);
    border-radius: 15px;
    padding: var(--spacing-md);
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-featured-helper-card:hover {
    color: inherit;
}

.home-featured-helper-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.home-featured-helper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-featured-helper-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.home-featured-helper-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.home-featured-helper-location {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.home-featured-helper-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.home-featured-helper-rate {
    font-size: var(--text-sm);
    color: var(--primary-500);
    font-weight: 600;
    margin: auto 0 0;
}

@media (max-width: 992px) {
    .home-featured-helpers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .home-featured-helpers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .home-featured-helper-card {
        padding: var(--spacing-sm);
    }

    .home-featured-helper-avatar {
        width: 60px;
        height: 60px;
    }
}

/* Simulateur CTA section */
.home-simulator-cta {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.home-simulator-cta-text h2 {
    margin-bottom: var(--spacing-md);
}

.home-simulator-cta-text p {
    margin-bottom: var(--spacing-lg);
}

.home-simulator-cta-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.home-sim-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.home-sim-feature-icon {
    color: var(--success-500);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .home-simulator-cta {
        grid-template-columns: 1fr;
    }

    .home-guide-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   TARIFS PAGE
   ========================================== */

.tarifs-free-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.tarifs-free-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.tarifs-hero-compact {
    padding: var(--spacing-xl) 0;
}

.tarifs-section-subtitle {
    font-size: var(--text-lg);
}

.tarifs-secondary-mention {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.tarifs-trial-reassurance {
    margin: 0.75rem 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.tarifs-trial-login-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tarifs-trial-login-hint a {
    color: var(--primary-500);
}

.tarifs-screenshots-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tarifs-plan-free {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.tarifs-plan-price-free .tarifs-price {
    color: var(--text-primary);
}

.tarifs-plan-detail-text {
    font-size: var(--text-sm);
}

.btn-outline-white {
    background: transparent;
    color: #ffffff;
    padding: 0.7rem 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-outline-white:hover {
    background: #ffffff;
    color: var(--primary-500);
}

.tarifs-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Bandeau essai gratuit — page Tarifs */
.tarifs-trial-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
    border: 2px solid #667eea;
    border-radius: 16px;
    padding: 2rem;
    flex-wrap: wrap;
}

.tarifs-trial-left {
    flex: 1;
    min-width: 240px;
}

.tarifs-trial-left h3 {
    margin: 0.5rem 0 0.25rem;
    font-size: var(--text-h3);
}

.tarifs-trial-left p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.tarifs-trial-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.25rem;
}

.tarifs-trial-right {
    text-align: center;
    flex-shrink: 0;
}

.tarifs-trial-active {
    color: #059669;
    font-weight: 600;
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .tarifs-trial-banner {
        flex-direction: column;
        text-align: center;
    }
    .tarifs-trial-right {
        width: 100%;
    }
}

.tarifs-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 16px; /* espace pour le badge flottant (.tarifs-plan-badge top: -12px) */
}

.tarifs-plan-card {
    text-align: center;
    padding: var(--spacing-xl);
    position: relative;
}

.tarifs-plan-featured {
    border: 2px solid var(--primary-500);
}

.tarifs-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: white;
    padding: 4px 16px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.tarifs-plan-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

.tarifs-plan-price {
    margin-bottom: var(--spacing-md);
}

.tarifs-price {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    color: var(--primary-500);
}

.tarifs-period {
    color: var(--text-tertiary);
    font-size: var(--text-base);
}

.tarifs-feature-list {
    list-style: none;
    padding: 0;
    text-align: left;
}

.tarifs-feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding-left: 1.5em;
    position: relative;
}

.tarifs-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success-500);
    font-weight: var(--font-bold);
}

.tarifs-feature-list li.tarifs-feature-highlight {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.tarifs-feature-list li.tarifs-feature-highlight::before {
    content: "★";
    color: var(--primary-500);
}

/* Comparison table */
.tarifs-comparison {
    max-width: 800px;
    margin: 0 auto;
    overflow-x: auto;
}

.tarifs-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.tarifs-comparison-table th,
.tarifs-comparison-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.tarifs-comparison-table thead th {
    background: var(--bg-tertiary);
    font-weight: var(--font-semibold);
    text-align: left;
}

.tarifs-comparison-table thead th.tarifs-comparison-premium {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--primary-600);
}

.tarifs-comparison-table tbody td {
    color: var(--text-secondary);
}

.tarifs-comparison-table tbody tr:hover {
    background: var(--bg-secondary);
}

.tarifs-faq {
    max-width: 800px;
    margin: 0 auto;
}

.tarifs-faq-item {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-light);
}

.tarifs-faq-item h4 {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.tarifs-faq-item p {
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .tarifs-free-grid {
        grid-template-columns: 1fr;
    }

    .tarifs-plans-grid {
        grid-template-columns: 1fr;
    }

    .tarifs-comparison-table {
        font-size: var(--text-xs);
    }

    .tarifs-comparison-table th,
    .tarifs-comparison-table td {
        padding: 8px 10px;
    }
}

/* ==========================================
   BANNIÈRE ESSAI GRATUIT — DASHBOARD
   ========================================== */

.trial-reminder-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 10px;
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.trial-reminder-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: var(--text-primary);
}

.trial-reminder-days {
    font-weight: 700;
    color: var(--primary-600);
}

.trial-reminder-days.trial-days-warning { color: var(--warning-600); }
.trial-reminder-days.trial-days-urgent  { color: var(--error-500); }

.trial-reminder-date { color: var(--text-secondary); font-size: 0.85rem; }

.trial-reminder-cta {
    display: inline-block;
    background: var(--gradient-primary);
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.trial-reminder-cta:hover { opacity: 0.85; color: white; }

@media (max-width: 576px) {
    .trial-reminder-banner { flex-direction: column; text-align: center; }
    .trial-reminder-info { justify-content: center; }
    .trial-reminder-cta { width: 100%; text-align: center; }
}

/* ==========================================
   PAGES ABONNEMENT (sub-*)
   ========================================== */

/* Hero section abonnement */
.sub-hero h1 { font-size: 3rem; margin-bottom: 1rem; }
.sub-hero p { font-size: 1.3rem; opacity: 0.9; }

/* Badges statut */
.sub-badge-active {
    background: var(--success-500);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.875rem;
    display: inline-block;
}

.sub-badge-trial {
    background: var(--primary-500);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.875rem;
    display: inline-block;
    flex-shrink: 0;
}

/* Carte abonnement actif (non trial) */
.sub-active-card {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Essai gratuit - carte de statut */
.sub-trial-status-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.sub-trial-status {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.sub-trial-status-icon { font-size: 2.5rem; flex-shrink: 0; }
.sub-trial-status-info { flex: 1; min-width: 200px; }
.sub-trial-status-info h2 { margin: 0 0 0.25rem; }
.sub-trial-status-info p { margin: 0; color: var(--text-secondary); }

/* Section plans "après l'essai" */
.sub-continue-section {
    max-width: 900px;
    margin: var(--spacing-xl) auto 0;
}

.sub-continue-section > h3 {
    text-align: center;
    margin-bottom: var(--spacing-xs);
}

.sub-continue-section > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Bouton danger */
.btn-danger {
    background: var(--error-500);
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn-danger:hover { background: var(--error-600); }

/* Bandeau essai gratuit (pages subscription) */
.sub-trial-banner {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 2px solid var(--primary-500);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sub-trial-banner-icon { font-size: 3rem; flex-shrink: 0; }

.sub-trial-content { flex: 1; min-width: 240px; }
.sub-trial-content h2 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.sub-trial-content p { margin: 0 0 0.5rem; color: var(--text-secondary); }

.sub-trial-features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.sub-trial-cta { text-align: center; flex-shrink: 0; }

.btn-trial {
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: var(--font-semibold);
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-trial:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.sub-trial-note {
    margin: 0.5rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.sub-plans-separator {
    text-align: center;
    margin: 0 0 1.5rem;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .sub-hero { padding: 2rem 0 1.5rem !important; }
    .sub-hero h1 { font-size: 2rem; }
    .sub-hero p { font-size: 1.1rem; }
    .sub-trial-content h2 { font-size: 1.25rem; }

    .sub-trial-status { flex-direction: column; text-align: center; }

    .sub-trial-banner {
        flex-direction: column;
        text-align: center;
    }

    .sub-trial-features { justify-content: center; }
    .sub-trial-cta { width: 100%; }
    .btn-trial { width: 100%; box-sizing: border-box; }
}

@media (max-width: 480px) {
    .sub-hero { padding: 1.5rem 0 1rem !important; }
    .sub-hero h1 { font-size: 1.6rem; }
    .sub-hero p { font-size: 1rem; }
    .sub-trial-content h2 { font-size: 1.15rem; }
}

/* ==========================================
   TODAY WIDGET
   ========================================== */

.today-widget {
    margin-top: var(--spacing-lg);
    border: 2px solid var(--primary-500);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.12);
}

.today-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.today-widget-title {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.today-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.today-badge-pending {
    background: var(--warning-500);
    color: #fff;
}

.today-badge-done {
    background: var(--success-500);
    color: #fff;
}

.today-badge-neutral {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.today-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-light);
    transition: background 0.15s;
}

.today-item:hover {
    background: var(--bg-secondary);
}

.today-item-empty {
    padding: 1rem 1.25rem;
    color: var(--text-secondary);
}

.today-item-time {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary-500);
    min-width: 100px;
    flex-shrink: 0;
    white-space: nowrap;
}

.today-item-info {
    flex: 1;
    min-width: 0;
}

.today-item-contract {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-item-activity {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-today-done,
.btn-today-cancel {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-today-done {
    background: var(--success-500);
    color: #fff;
}

.btn-today-done:hover:not(:disabled) {
    background: var(--success-600);
    transform: scale(1.05);
}

.btn-today-cancel {
    background: var(--error-500);
    color: #fff;
}

.btn-today-cancel:hover:not(:disabled) {
    background: var(--error-600);
    transform: scale(1.05);
}

.btn-today-done:disabled,
.btn-today-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.today-item-status {
    flex-shrink: 0;
}

.today-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.today-status-done {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-600);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.today-status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-600);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.today-widget-footer {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
    flex-wrap: wrap;
}

.today-footer-link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--primary-500);
    text-decoration: none;
    transition: color 0.2s;
}

.today-footer-link:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

/* Today widget — responsive mobile */
@media (max-width: 576px) {
    .today-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .today-item-time {
        min-width: auto;
        flex: 0 0 auto;
    }

    .today-item-info {
        flex: 1 1 0;
        min-width: 0;
    }

    .today-item-actions {
        flex: 0 0 100%;
        gap: 0.5rem;
    }

    .btn-today-done,
    .btn-today-cancel {
        flex: 1;
        border-radius: 8px;
        height: 44px;
    }

    .today-widget-footer {
        gap: 1rem;
    }
}

/* ==========================================
   CONTACT PAGE
   ========================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-2xl);
    align-items: flex-start;
}

.contact-card {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.contact-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-xs);
}

.contact-card p {
    margin: 0;
    color: var(--text-secondary);
}

.contact-card-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.contact-info-box {
    background: rgba(102, 126, 234, 0.06);
    border-left: 4px solid var(--primary-500);
    padding: var(--spacing-md);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.contact-info-box h4 {
    color: var(--primary-600);
    margin-bottom: var(--spacing-xs);
}

.contact-info-box p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.contact-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info-box li {
    padding: 4px 0;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   MENTIONS LÉGALES PAGE
   ========================================== */

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.legal-section:last-child {
    border-bottom: none;
}

.legal-section h2 {
    font-size: var(--text-h3);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.legal-section h3 {
    font-size: var(--text-lg);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.legal-section p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-sm);
}

.legal-section ul {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.legal-section li {
    margin-bottom: var(--spacing-xs);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
}

.legal-table td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.legal-table td:first-child {
    width: 200px;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .legal-table td:first-child {
        width: auto;
        white-space: normal;
    }
}

.legal-table th {
    padding: var(--spacing-sm);
    border-bottom: 2px solid var(--border-medium);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    text-align: left;
    font-size: var(--text-sm);
}

.legal-section ol {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.legal-section ol li {
    margin-bottom: var(--spacing-xs);
}

.legal-section blockquote {
    background: var(--bg-tertiary);
    border-left: 4px solid var(--primary-500);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-radius: 0 10px 10px 0;
}

.legal-section blockquote p {
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 0;
}

.legal-form-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.legal-form-box p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.legal-update-date {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-lg);
}

/* ==========================================
   COOKIE CONSENT BANNER
   ========================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-primary);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    padding: 1rem 0;
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cookie-banner-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.cookie-buttons {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
    }

    .cookie-buttons {
        width: 100%;
    }

    .cookie-buttons .btn {
        flex: 1;
    }
}

/* ==========================================
   GUIDE CESU - COMPOSANTS ADDITIONNELS
   ========================================== */

/* Lead paragraph */
.guide-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Info boxes variants */
.guide-info-box-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--warning-500);
}

.guide-info-box-info {
    background: rgba(102, 126, 234, 0.1);
    border-left: 4px solid var(--primary-500);
}

.guide-info-box-success {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--success-500);
}

/* Letter model boxes */
.guide-letter-model {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

.guide-letter-model p {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.guide-letter-model ul {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.guide-letter-model em {
    color: var(--text-secondary);
}

.guide-letter-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(102, 126, 234, 0.15);
}

.guide-letter-header .guide-letter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--primary-500);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
}

.guide-letter-header .guide-letter-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Table of contents */
.guide-toc {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
}

.guide-toc h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-500);
    margin: 0 0 1rem;
}

.guide-toc ol {
    list-style: none;
    counter-reset: toc-counter;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.guide-toc ol li {
    counter-increment: toc-counter;
    margin: 0;
    padding: 0;
}

.guide-toc ol li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.guide-toc ol li a::before {
    content: counter(toc-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.guide-toc ol li a:hover {
    background: rgba(102, 126, 234, 0.08);
    color: var(--primary-500);
}

@media (max-width: 768px) {
    .guide-toc {
        padding: 1.25rem 1.25rem;
    }

    .guide-toc ol {
        grid-template-columns: 1fr;
    }
}

/* Card download */
.card-download {
    text-align: center;
    padding: 2rem;
}

.card-download-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.card-download h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: var(--text-h4);
}

.card-download p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.card-download-info {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Checklist */
.guide-checklist {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.guide-checklist-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.guide-checklist-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

.guide-checklist-item h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.guide-checklist-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Table */
.guide-table-responsive {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.guide-table thead {
    background: var(--gradient-primary);
    color: white;
}

.guide-table th {
    padding: 1rem;
    text-align: left;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

.guide-table td {
    padding: 1rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.guide-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* FAQ */
.guide-faq {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-faq-item {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.guide-faq-item summary {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.guide-faq-item summary:hover {
    background: var(--bg-secondary);
}

.guide-faq-item summary::after {
    content: '▼';
    font-size: var(--text-sm);
    color: var(--primary-500);
    transition: transform 0.2s ease;
}

.guide-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.guide-faq-question {
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.guide-faq-answer {
    padding: 0 1.5rem 1.25rem 1.5rem;
}

.guide-faq-item p {
    padding: 0 1.5rem 1.25rem 1.5rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.guide-faq-answer p {
    padding: 0;
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Resources */
.guide-resources {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-resource-link {
    display: block;
    padding: 1rem 1.5rem;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--primary-500);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: var(--font-medium);
}

.guide-resource-link:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-500);
    transform: translateX(5px);
}

/* Download Box */
.guide-download-box {
    background: linear-gradient(135deg, #f0f4ff 0%, #f5f0ff 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.guide-download-box h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.guide-download-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guide-download-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.guide-download-item:hover {
    border-color: var(--primary-500);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.guide-download-item-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.guide-download-item-content {
    flex: 1;
    min-width: 0;
}

.guide-download-item-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.guide-download-item-content small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.guide-download-item .btn {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .guide-download-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .guide-download-item .btn {
        align-self: stretch;
        text-align: center;
    }
}

/* CTA Box */
.guide-cta-box {
    background: var(--gradient-primary);
    color: white;
    padding: 3rem 2rem;
    border-radius: var(--radius-xl);
    text-align: center;
}

.guide-cta-box h3 {
    margin: 0 0 1rem 0;
    font-size: var(--text-h3);
    color: white;
}

.guide-cta-box p {
    margin: 0 0 2rem 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
}

.guide-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.guide-cta-buttons .btn {
    min-width: 200px;
}

.guide-cta-buttons .btn-outline {
    background: white;
    color: var(--primary-500);
    border-color: white;
}

.guide-cta-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* CTA Simulateur — maillage interne */
.guide-cta-simulateur {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(102, 126, 234, 0.06);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-left: 4px solid var(--primary-500);
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    transition: all 0.3s ease;
}

.guide-cta-simulateur:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

.guide-cta-simulateur-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.guide-cta-simulateur-content {
    flex: 1;
}

.guide-cta-simulateur-content p {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.guide-cta-simulateur-content small {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.guide-cta-simulateur .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .guide-cta-simulateur {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    .guide-cta-simulateur .btn {
        width: 100%;
    }
}

/* CTA recherche aide à domicile (guides employeur) */
.cta-recherche-aide {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-left: 4px solid var(--success-500);
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    transition: all 0.3s ease;
}

.cta-recherche-aide:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.cta-recherche-aide-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.cta-recherche-aide-content {
    flex: 1;
}

.cta-recherche-aide-content p {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.cta-recherche-aide-content small {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.cta-recherche-aide-btn {
    flex-shrink: 0;
    white-space: nowrap;
    border-color: var(--success-500) !important;
    color: var(--success-500) !important;
}

.cta-recherche-aide-btn:hover {
    background: var(--success-500) !important;
    color: #fff !important;
}

@media (max-width: 576px) {
    .cta-recherche-aide {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    .cta-recherche-aide-btn {
        width: 100%;
    }
}

/* Index cards */
.guide-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.guide-index-card {
    display: block;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: all 0.3s ease;
}

.guide-index-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.guide-index-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.guide-index-card-title {
    margin: 0 0 0.75rem 0;
    font-size: var(--text-h4);
    color: var(--text-primary);
}

.guide-index-card-desc {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.guide-index-card-link {
    color: var(--primary-500);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .guide-checklist-item {
        flex-direction: row;
        gap: 1rem;
    }

    .guide-checklist-number {
        width: 32px;
        height: 32px;
        font-size: var(--text-base);
    }

    .guide-cta-buttons {
        flex-direction: column;
    }

    .guide-cta-buttons .btn {
        width: 100%;
        min-width: 0;
    }

    .guide-table th,
    .guide-table td {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .guide-index-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ==========================================
   MOBILE BOTTOM NAVIGATION (Helper)
   ========================================== */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        z-index: 999;
        background: #fff;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.08), 0 -4px 16px rgba(0,0,0,0.06);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateZ(0);
    }

    /* Compenser la hauteur du bandeau sur le contenu */
    body:has(.mobile-bottom-nav) main {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    body:has(.mobile-bottom-nav) .footer {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-secondary);
    padding: 6px 2px;
    position: relative;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 60px;
}

.mobile-nav-item.active {
    color: var(--primary-500);
}

.mobile-nav-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 0 2px 2px;
}

.mobile-nav-item.locked {
    color: var(--text-tertiary);
}

.mobile-nav-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.mobile-nav-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.mobile-nav-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 18px);
    font-size: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: 700;
    line-height: 1.4;
}

/* ===== COMING SOON / MAINTENANCE ===== */
.coming-soon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem 0;
}

.coming-soon-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.12);
    padding: 3rem 2.5rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
}

.coming-soon-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.coming-soon-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.coming-soon-subtitle {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.coming-soon-divider {
    height: 1px;
    background: var(--border-light);
    margin: 2rem 0;
}

.coming-soon-cta-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.coming-soon-form {
    margin-bottom: 0;
}

.coming-soon-form-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.coming-soon-form-row .form-input {
    flex: 1;
    min-width: 0;
}

.coming-soon-success {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: left;
    color: var(--text-primary);
}

.coming-soon-success-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.coming-soon-success p {
    margin: 0;
    line-height: 1.5;
}

.coming-soon-links {
    margin-top: 1.75rem;
    font-size: 0.9rem;
}

@media (max-width: 576px) {
    .coming-soon-card {
        padding: 2rem 1.25rem;
    }

    .coming-soon-form-row {
        flex-direction: column;
    }

    .coming-soon-form-row .btn {
        width: 100%;
    }
}

/* ===== COOKIE BANNER : compensation hauteur ===== */
/* Evite que la bannière cookie (position:fixed, bottom:0) ne recouvre les boutons */
@media (max-width: 768px) {
    body.cookie-banner-visible main {
        padding-bottom: 150px;
    }

    body.cookie-banner-visible:has(.mobile-bottom-nav) main {
        padding-bottom: calc(150px + 68px + env(safe-area-inset-bottom, 0px));
    }

    body.cookie-banner-visible .sticky-cta-bar {
        bottom: 140px;
    }
}

/* Desktop : la bannière est moins haute mais on compense quand même */
@media (min-width: 769px) {
    body.cookie-banner-visible main {
        padding-bottom: 90px;
    }
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 420px;
    pointer-events: none;
}

@media (max-width: 768px) {
    .toast-container {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 14px 16px;
    border-left: 4px solid var(--border-medium);
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.3s ease;
}

@media (max-width: 768px) {
    .toast {
        transform: translateY(100%);
    }
}

.toast.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .toast.toast-visible {
        transform: translateY(0);
    }
}

.toast.toast-removing {
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease-in, opacity 0.25s ease-in;
}

@media (max-width: 768px) {
    .toast.toast-removing {
        transform: translateY(100%);
    }
}

.toast-success { border-left-color: #10b981; }
.toast-error   { border-left-color: #ef4444; }
.toast-warning { border-left-color: #f59e0b; }
.toast-info    { border-left-color: #667eea; }

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.toast-success .toast-icon { background: #10b981; }
.toast-error .toast-icon   { background: #ef4444; }
.toast-warning .toast-icon { background: #f59e0b; }
.toast-info .toast-icon    { background: #667eea; }

.toast-content {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
    padding-top: 2px;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.toast-close:hover {
    color: var(--text-primary);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    border-radius: 0 0 0 10px;
    animation: toast-progress-shrink linear forwards;
}

.toast-progress-success { background: #10b981; }
.toast-progress-error   { background: #ef4444; }
.toast-progress-warning { background: #f59e0b; }
.toast-progress-info    { background: #667eea; }

@keyframes toast-progress-shrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* ===== IMPRESSION UNIVERSELLE ===== */
@media print {
    /* Masquer les éléments de navigation et d'interface */
    header, nav, footer,
    .mobile-bottom-nav,
    .no-print,
    .mobile-fab,
    .sticky-cta-bar,
    .cookie-banner,
    .toast-container,
    .breadcrumb-nav {
        display: none !important;
    }

    /* Fond blanc, texte noir pour l'impression */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    main, .container, .section {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Supprimer les ombres et les bordures décoratives */
    .card, .contract-card, [class*="bloc-"] {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    /* Liens : afficher l'URL */
    a[href]::after {
        content: none !important;
    }

    /* Assurer que les tableaux ne se coupent pas */
    table { break-inside: avoid; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
}

/* =====================================================
   SECTION BIFURCATION SALARIÉ / EMPLOYEUR (homepage)
   ===================================================== */
.home-profils-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.home-profil-card {
    background: var(--bg-primary);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.home-profil-card-salarie {
    border-color: var(--primary-500);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.home-profil-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.home-profil-title {
    font-size: var(--text-h3);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.home-profil-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
}

.home-profil-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-profil-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.home-profil-check {
    color: var(--success-500);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.home-profil-actions {
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .home-profils-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   TABLEAU COMPARATIF GRATUIT/PREMIUM (homepage)
   ===================================================== */
.home-comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.home-comparison-table th {
    background: var(--bg-tertiary);
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-light);
}

.home-comparison-table th.home-comparison-premium-col {
    background: var(--primary-500);
    color: white;
}

.home-comparison-table td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.home-comparison-table td.home-comparison-premium-col {
    background: rgba(102, 126, 234, 0.05);
    font-weight: var(--font-semibold);
    color: var(--primary-500);
}

.home-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.home-comparison-table tbody tr:hover td {
    background: var(--bg-secondary);
}

.home-comparison-table tbody tr:hover td.home-comparison-premium-col {
    background: rgba(102, 126, 234, 0.1);
}

/* =====================================================
   BADGE RECOMMANDÉ — TARIFS PLAN ANNUEL
   ===================================================== */
.tarifs-plan-recommended {
    position: relative;
}

.tarifs-plan-recommended-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =====================================================
   CHIFFRES CLÉS — GUIDE BARÈMES
   ===================================================== */
.guide-chiffres-cles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.guide-chiffre-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
}

.guide-chiffre-label {
    font-size: var(--text-xs);
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.guide-chiffre-value {
    font-size: 1.4rem;
    font-weight: var(--font-bold);
}

@media (max-width: 768px) {
    .guide-chiffres-cles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Badge Premium Helper ── */
.badge-premium-helper {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    margin-left: 0.4rem;
    vertical-align: middle;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Indicateur tri premium dans les résultats de recherche */
.results-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.premium-sort-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #d97706;
    font-weight: 500;
}

@media (max-width: 576px) {
    .results-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================
   ALERTE CUMUL HEBDOMADAIRE CCN 3239
   ===================================================== */
.weekly-alert {
    padding: 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.weekly-alert a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.weekly-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.weekly-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

/* =====================================================
   HEADER MOBILE — CTA D'AUTHENTIFICATION HORS BURGER
   ===================================================== */
.nav-mobile-cta {
    display: none;
}

@media (max-width: 768px) {
    .nav-mobile-cta {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-right: 0.5rem;
    }
}

/* =====================================================
   CTA FIND BANNER — Après désactivation de contrat
   ===================================================== */
.cta-find-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 10px;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cta-find-banner span {
    color: var(--text-primary);
    font-weight: 500;
}

/* =====================================================
   PAGE PREMIUM EXPIRED
   ===================================================== */
.premium-expired-container {
    max-width: 640px;
}

.premium-expired-card {
    text-align: center;
    padding: 3rem 2rem;
}

.premium-expired-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.premium-expired-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.premium-expired-desc {
    margin-bottom: 0.75rem;
}

.premium-expired-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Banner lecture seule post-expiration */
.read-only-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.read-only-banner-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.read-only-banner-text {
    flex: 1;
    min-width: 0;
}

.read-only-banner-title {
    font-weight: 700;
    color: #92400e;
    margin-bottom: 0.15rem;
}

.read-only-banner-desc {
    font-size: 0.875rem;
    color: #b45309;
}

.read-only-banner-cta {
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .read-only-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .read-only-banner-cta {
        width: 100%;
        text-align: center;
    }
}

/* ─── Onboarding checklist ────────────────────────────────────────────────── */
.onboarding-checklist {
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.onboarding-checklist-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.onboarding-checklist-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.onboarding-checklist-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.onboarding-checklist-title strong {
    display: block;
    font-size: 1.05rem;
    color: #1f2937;
}

.onboarding-checklist-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.1rem;
}

.onboarding-dismiss-btn {
    background: transparent;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.onboarding-dismiss-btn:hover {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #a5b4fc;
}

.onboarding-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e0e7ff;
    transition: all 0.2s ease;
}

.onboarding-step-done {
    background: #f0fdf4;
    border-color: #bbf7d0;
    opacity: 0.8;
}

.onboarding-step-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #e0e7ff;
    color: #6366f1;
}

.onboarding-step-done .onboarding-step-check {
    background: #22c55e;
    color: #ffffff;
}

.onboarding-step-label {
    flex: 1;
    font-size: 0.95rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.onboarding-step-done .onboarding-step-label {
    color: #6b7280;
    text-decoration: line-through;
}

.onboarding-step-premium {
    font-size: 0.75rem;
    background: #fef3c7;
    color: #d97706;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
}

.onboarding-step-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.onboarding-step-cta:hover {
    color: #4338ca;
}

@media (max-width: 576px) {
    .onboarding-checklist-header {
        flex-direction: column;
    }
    .onboarding-dismiss-btn {
        align-self: flex-end;
    }
    .onboarding-step {
        flex-wrap: wrap;
    }
    .onboarding-step-cta {
        width: 100%;
        text-align: right;
        font-size: 0.9rem;
        padding: 0.25rem 0;
    }
}

/* ── Onboarding Accordion (P1-8b) ─────────────────────────────────────────── */
.onboarding-checklist {
    background: linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%);
    border: 1px solid rgba(102,126,234,0.2);
    border-left: 3px solid var(--primary-500, #667eea);
    border-radius: 10px;
    margin-top: 1rem;
    overflow: hidden;
    padding: 0;
}

.onboarding-checklist.is-hidden {
    display: none;
}

/* Header cliquable — ligne unique compacte */
.onboarding-accordion-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    user-select: none;
}

.onboarding-accordion-header:hover {
    background: rgba(102,126,234,0.07);
}

.onboarding-accordion-header:focus-visible {
    outline: 2px solid var(--primary-500, #667eea);
    outline-offset: -2px;
}

.onboarding-header-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
    line-height: 1;
}

.onboarding-header-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onboarding-header-step-name {
    display: none;
}

@media (min-width: 768px) {
    .onboarding-header-step-name {
        display: inline;
    }
}

/* Mini barre de progression dans le header */
.onboarding-progress-mini {
    width: 80px;
    height: 5px;
    background: var(--border-light, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}

.onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.onboarding-toggle-icon {
    font-size: 0.7rem;
    color: var(--text-secondary, #6b7280);
    transition: transform 0.2s ease;
}

/* Corps accordéon */
.onboarding-accordion-body {
    display: none;
    border-top: 1px solid var(--border-light, #e5e7eb);
    padding: 0.5rem 1rem 0.4rem;
}

.onboarding-accordion-body.is-open {
    display: block;
}

/* Tiers */
.onboarding-tier {
    margin-bottom: 0.4rem;
}

.onboarding-tier-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.2rem;
}

/* Steps */
.onboarding-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary, #1f2937);
}

.onboarding-step.is-done {
    color: #059669;
}

.onboarding-step.is-locked {
    color: var(--text-tertiary, #9ca3af);
}

.onboarding-step-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.onboarding-step.is-done .onboarding-step-icon {
    color: #059669;
}

.onboarding-step.is-locked .onboarding-step-icon {
    color: var(--border-medium, #d1d5db);
}

.onboarding-step-label {
    flex: 1;
}

.onboarding-step-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-500, #667eea);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.onboarding-step-cta:hover {
    text-decoration: underline;
}

/* Footer */
.onboarding-footer {
    border-top: 1px solid var(--border-light, #e5e7eb);
    padding-top: 0.3rem;
    margin-top: 0.3rem;
    display: flex;
    justify-content: flex-end;
}

.onboarding-dismiss-btn {
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.onboarding-dismiss-btn:hover {
    color: var(--text-secondary, #6b7280);
    background: var(--bg-tertiary, #f3f4f6);
}

/* "Revoir le guide" link */
.link-revoir-guide {
    font-size: 0.8rem;
    color: var(--text-tertiary, #9ca3af);
    text-decoration: none;
    cursor: pointer;
}

.link-revoir-guide:hover {
    color: var(--primary-500, #667eea);
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 576px) {
    .onboarding-progress-mini {
        width: 50px;
    }

    .onboarding-step-cta {
        font-size: 0.72rem;
        padding: 0.15rem 0.45rem;
    }
}

/* ==========================================
   CONTRACT PAGES — classes communes
   (employer/contract/show, time_entry/create, etc.)
   ========================================== */

/* Outer container max-width pages contrat */
.contract-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
.contract-page-container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

/* Stats bar — sous-label (ex : "net/h") */
.stats-bar-sub {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.1rem;
}

/* Page title row (h1 + badges sur la même ligne) */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Boutons outline colorés */
.btn-success-outline {
    border-color: #10b981 !important;
    color: #10b981 !important;
}
.btn-success-outline:hover {
    background: #10b981 !important;
    color: white !important;
}
.btn-warning-outline {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}
.btn-warning-outline:hover {
    background: #f59e0b !important;
    color: white !important;
}
.btn-danger-outline {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
.btn-danger-outline:hover {
    background: #ef4444 !important;
    color: white !important;
}
.btn-warning {
    background: #f59e0b;
    color: white;
    border: none;
}
.btn-warning:hover { background: #d97706; }

/* Dropdown wrapper */
.dropdown-wrap {
    position: relative;
    display: inline-block;
}
.dropdown-form { margin: 0; }

/* Card dropdown item color modifiers */
.card-dropdown-item-success { color: #10b981; }
.card-dropdown-item-warning { color: #f59e0b; }
.card-dropdown-item-danger {
    color: #ef4444;
    border-top: 1px solid #e5e7eb;
}

/* Status badges (contrats) */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-active   { background: #d1fae5; color: #065f46; }
.status-draft    { background: #fef3c7; color: #92400e; }
.status-canceled { background: #fee2e2; color: #991b1b; }
.status-completed { background: #e5e7eb; color: #1f2937; }

/* ── Toolbar (barre de recherche/filtre dans show contrat) ── */
.toolbar {
    background: #f8fafb;
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.toolbar-left {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.month-selector {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Action buttons (petits boutons de tableau) ── */
.action-btn {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.action-btn-primary { background: #667eea; color: white; }
.action-btn-primary:hover { background: #5568d3; }
.action-btn-neutral { background: #f3f4f6; color: #1f2937; }
.action-btn-neutral:hover { background: #e5e7eb; }
.action-btn-menu {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}
.action-btn-menu:hover { background: #e5e7eb; }

/* ── Activity tags ── */
.activity-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #ede9fe;
    color: #5b21b6;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.activities-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

/* ── Card container (show contrat) ── */
.card-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}
.card-container-mb { margin-bottom: 1.5rem; }
.card-section { padding: 1.25rem 1.5rem; }

/* ── Info sections ── */
.info-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}
.info-section-last { border-bottom: none; }
.info-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.info-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.info-item {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}
.info-label {
    font-size: 0.85rem;
    color: #9ca3af;
    min-width: 100px;
}
.info-value {
    font-size: 0.95rem;
    color: #1f2937;
    font-weight: 500;
}
.section-month-label {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}
.notes-text {
    color: #1f2937;
    margin: 0;
    padding: 0.5rem 0;
    line-height: 1.6;
}

/* ── Hours mini cards ── */
.hours-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.hours-mini-card {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 3px solid;
}
.hours-mini-label { font-size: 0.75rem; margin-bottom: 0.15rem; }
.hours-mini-value { font-size: 1.25rem; font-weight: 700; }
.hours-mini-completed { background: #d1fae5; border-left-color: #10b981; }
.hours-mini-completed .hours-mini-label { color: #065f46; }
.hours-mini-completed .hours-mini-value { color: #065f46; }
.hours-mini-planned { background: #fef3c7; border-left-color: #f59e0b; }
.hours-mini-planned .hours-mini-label { color: #92400e; }
.hours-mini-planned .hours-mini-value { color: #92400e; }
.hours-mini-cancelled { background: #fee2e2; border-left-color: #ef4444; }
.hours-mini-cancelled .hours-mini-label { color: #991b1b; }
.hours-mini-cancelled .hours-mini-value { color: #991b1b; }

/* ── Financial card & salary table ── */
.financial-card {
    background: white;
    border: 2px solid #667eea;
    padding: 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}
.section-title {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.salary-table-wrap {
    background: #f8fafb;
    padding: 1rem;
    border-radius: 8px;
    max-width: 420px;
}
.salary-table { width: 100%; border-collapse: collapse; }
.salary-label { padding: 0.45rem 0; color: #4b5563; font-size: 0.9rem; }
.salary-value { padding: 0.45rem 0; text-align: right; font-weight: 600; font-size: 0.9rem; }
.salary-divider td { border-top: 2px solid #667eea; padding-top: 0.75rem; font-weight: 600; }
.salary-deduction { color: #ef4444; }
.salary-net-row td { padding: 0.65rem 0.5rem; font-weight: 700; color: #065f46; background: #d1fae5; }
.salary-net-row td:last-child { text-align: right; }

/* ── Empty state (contrat, résumé) ── */
.empty-state {
    background: #f8fafb;
    padding: 3rem;
    border-radius: 0 0 15px 15px;
    text-align: center;
}
.empty-state h2 { color: #6b7280; margin-bottom: 0.5rem; }
.empty-state p { color: #9ca3af; }

/* ── Info box ── */
.info-box {
    background: #f8fafb;
    padding: 1.25rem;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}
.info-box h4 { margin: 0 0 0.5rem 0; font-size: 0.9rem; color: #1f2937; }
.info-box ul { margin: 0; padding-left: 1.25rem; color: #6b7280; font-size: 0.85rem; line-height: 1.7; }

/* ── Hours table ── */
.hours-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.hours-table th,
.hours-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e5e7eb;
}
.hours-table thead tr { background: #f8fafb; }
.hours-table th { font-weight: 600; color: #6b7280; font-size: 0.875rem; }
.hours-table tfoot td { background: #f3f4f6; font-weight: 700; }
.col-date { width: 14%; }
.col-hours { width: 12%; }
.col-time { width: 16%; }
.col-activity { width: 28%; }
.col-notes { width: 30%; }
.time-sub { color: #9ca3af; font-size: 0.8rem; }
.col-empty { color: #d1d5db; }

/* ── Modal loading/error ── */
.modal-loading { text-align: center; padding: 2rem; color: #6b7280; }
.modal-error { text-align: center; padding: 2rem; color: #ef4444; }

/* ── Time entry form ── */
.rate-info-box {
    background: #f8fafb;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    border-left: 4px solid #667eea;
}
.rate-info-box strong { color: #1f2937; display: block; margin-bottom: 0.25rem; }
.rate-value { font-size: 1.5rem; color: #667eea; font-weight: 700; }
.rate-unit { color: #6b7280; margin-left: 0.5rem; }
.form-field { margin-bottom: 1.5rem; }
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.form-grid-rate {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.rate-type-radios { display: flex; gap: 0.5rem; }
.rate-type-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
}
.estimate-box {
    background: #f8fafb;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.amount-value { color: #667eea; font-size: 1.2rem; font-weight: 700; }
.cancellation-note-container { margin-bottom: 2rem; display: none; }

/* ── Responsive contract pages ── */
@media (max-width: 768px) {
    .col-notes, .col-time { display: none; }
    .hours-table th.col-notes, .hours-table td.col-notes,
    .hours-table th.col-time, .hours-table td.col-time { display: none; }
    .col-date { width: 25%; }
    .col-hours { width: 20%; }
    .col-activity { width: 55%; }
    .info-item { flex-direction: column; gap: 0.15rem; }
    .info-label { min-width: 0; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-left { justify-content: center; }
    .month-selector { justify-content: center; }
    .form-grid-2, .form-grid-rate { grid-template-columns: 1fr; }
    .contract-page-container, .contract-page-container-sm { padding: 1rem; }
}

/* ── Email search row (contrats helper & employer) ── */
.email-search-row {
    display: flex;
    gap: 0.5rem;
}
.email-search-row .form-input {
    flex: 1;
    min-width: 0;
}
.btn-search-helper {
    padding: 0.5rem 1rem;
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.btn-search-helper:hover {
    background: #667eea;
    color: #fff;
}

/* ── Navigation rapport mensuel ── */
.report-nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.report-nav-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.report-nav-select {
    padding: 0.4rem 0.6rem;
    min-width: 5.5rem;
}
select.report-nav-select[name="month"] {
    min-width: 7rem;
}
.report-nav-arrow {
    padding: 0.4rem 0.75rem;
    font-size: 1.1rem;
    line-height: 1;
    min-width: 2rem;
    text-align: center;
    text-decoration: none;
}
.report-nav-arrow--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
@media (max-width: 576px) {
    .report-nav { gap: 0.35rem; }
    .report-nav-form { flex-wrap: wrap; }
    .report-nav-select { font-size: 0.85rem; padding: 0.35rem 0.4rem; }
}

/* Date de mise à jour visible sur les guides */
.guide-date-updated {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    margin-top: -0.5rem;
}

/* Bloc de contact discret en bas des dashboards */
.dashboard-contact-hint {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1.25rem;
    background: #f3f4f8;
    border-radius: 10px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}
.dashboard-contact-hint a {
    color: var(--primary-500, #667eea);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.dashboard-contact-hint a:hover {
    color: var(--primary-700, #4453bc);
}

/* ===== PARTAGE RAPPORT ===== */

/* Modale */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.share-modal-content {
    background: #fff;
    border-radius: 15px;
    padding: 1.5rem;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.share-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1f2937;
}

.share-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 1rem;
    padding: 0.25rem;
    line-height: 1;
}

.share-modal-hint {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Ligne URL + bouton copier */
.share-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.share-link-row .share-link-input {
    flex: 1;
    font-size: 0.85rem;
    color: #374151;
    background: #f8fafb;
}

/* Séparateur email */
.share-separator {
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 1rem 0;
    position: relative;
}

/* Ligne email + bouton envoyer */
.share-email-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.share-email-row input {
    flex: 1;
}

/* Feedback */
.share-feedback {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.share-feedback-success {
    background: #d1fae5;
    color: #065f46;
}

.share-feedback-error {
    background: #fee2e2;
    color: #991b1b;
}

/* Footer modale */
.share-modal-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    text-align: center;
}

.share-revoke-link {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 0.8rem;
    text-decoration: underline;
    padding: 0;
}

.share-revoke-link:hover {
    color: #ef4444;
}

/* Section révoquée */
.share-revoked-message {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #4b5563;
}

.share-revoked-message p {
    margin-bottom: 1rem;
}

/* Page publique */
.public-report-body {
    background: #f8fafb;
    min-height: 100vh;
}

.public-report-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1rem 0;
}

.public-report-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.public-report-logo img {
    height: 40px;
    display: block;
}

.public-report-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.public-report-footer {
    padding: 1.5rem 0;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

.public-report-footer a {
    color: #667eea;
}

/* Bloc growth CTA */
.growth-block {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    border: 1px solid #667eea30;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
}

.growth-block-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.growth-block h3 {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.growth-block p {
    color: #6b7280;
    margin-bottom: 1.25rem;
}

/* ===== PAGE RAPPORT PUBLIC ===== */

/* Header public */
.public-report-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0.875rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.public-report-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.public-report-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.public-report-logo-link img {
    display: block;
}

.public-report-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.public-report-register-btn {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
}

.public-report-register-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Footer public */
.public-report-footer {
    padding: 1.25rem 0;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 3rem;
}

.public-report-footer a {
    color: #667eea;
    text-decoration: none;
}

.public-report-footer a:hover {
    text-decoration: underline;
}

/* Bandeau contextuel */
.public-report-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.public-report-context-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #374151;
}

.public-report-context-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.public-report-context-validity {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Bloc CTA Employeur */
.employer-cta-block {
    background: linear-gradient(135deg, #667eea08 0%, #764ba210 100%);
    border: 1px solid #667eea25;
    border-radius: 20px;
    padding: 2.5rem;
    margin-top: 2.5rem;
    overflow: hidden;
}

.employer-cta-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: center;
}

.employer-cta-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.employer-cta-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.employer-cta-subtitle {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.employer-cta-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.employer-cta-features li {
    font-size: 0.95rem;
    color: #374151;
}

.employer-cta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.employer-cta-btn-learn {
    border-color: #667eea !important;
    color: #667eea !important;
}

.employer-cta-reassurance {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
}

/* Visual droite CTA */
.employer-cta-visual {
    display: flex;
    justify-content: center;
}

.ecv-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
    width: 100%;
    max-width: 300px;
    border: 1px solid #e0e7ff;
}

.ecv-card-header {
    font-weight: 700;
    color: #667eea;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.ecv-stat {
    background: #f0fdf4;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.ecv-stat-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ecv-stat-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #065f46;
}

.ecv-highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.ecv-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ecv-item {
    font-size: 0.85rem;
    color: #4b5563;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f3f4f6;
}

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

/* Responsive */
@media (max-width: 900px) {
    .employer-cta-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .employer-cta-right {
        display: none;
    }
}

@media (max-width: 576px) {
    .employer-cta-block {
        padding: 1.5rem;
        border-radius: 12px;
    }
    .employer-cta-title {
        font-size: 1.3rem;
    }
    .employer-cta-actions {
        flex-direction: column;
    }
    .employer-cta-actions .btn {
        text-align: center;
    }
    .public-report-context-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Filter Accordion ─────────────────────────────────────── */
.filter-accordion {
    background: #f8fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.filter-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    text-align: left;
    transition: background 0.2s ease;
    gap: 0.5rem;
}

.filter-accordion-header:hover {
    background: #f0f1f3;
}

.filter-accordion-body {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}

/* ── Screenshots Alternating (Homepage) ──────────────────────────── */
.screenshots-alternating {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.screenshot-block {
    display: flex;
    align-items: center;
    gap: 3.5rem;
}
.screenshot-block-reverse { flex-direction: row-reverse; }
.screenshot-block-img { flex: 0 0 55%; }
.screenshot-block-text { flex: 1; }
.screenshot-block-text h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}
.screenshot-block-text p {
    color: #6b7280;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0;
}
/* Browser frame wrapper */
.screenshot-frame {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: #f3f4f6;
    max-width: 560px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.screenshot-frame:hover {
    box-shadow: 0 28px 72px rgba(102, 126, 234, 0.18), 0 12px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
.screenshot-browser-bar {
    background: #f3f4f6;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.screenshot-browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.screenshot-browser-dot:nth-child(1) { background: #ff5f57; }
.screenshot-browser-dot:nth-child(2) { background: #febc2e; }
.screenshot-browser-dot:nth-child(3) { background: #28c840; }
.screenshot-browser-url {
    flex: 1;
    background: #e5e7eb;
    border-radius: 4px;
    height: 18px;
    margin-left: 6px;
}
.screenshot-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

@media (max-width: 768px) {
    .screenshot-block,
    .screenshot-block-reverse { flex-direction: column; }
    .screenshot-block-img { flex: 1; width: 100%; }
    .screenshot-frame { max-width: 100%; }
    .screenshot-frame:hover { transform: none; }
    .screenshots-alternating { gap: 2.5rem; }
}

/* ── Screenshots Carousel (Tarifs) ───────────────────────────────── */
.tarifs-screenshots {
    margin: 2.5rem 0;
}
.tarifs-screenshots-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tarifs-screenshots-track {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tarifs-screenshots-track::-webkit-scrollbar { display: none; }
.tarifs-screenshots-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    text-align: center;
    padding: 0.25rem 0;
}
.tarifs-screenshots-item .screenshot-frame {
    max-width: 640px;
    margin: 0 auto;
}
.tarifs-screenshots-item .screenshot-img {
    width: 100%;
    display: block;
}
.tarifs-screenshots-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}
.tarifs-screenshots-nav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.tarifs-screenshots-nav:hover {
    border-color: #667eea;
    color: #667eea;
}
.tarifs-screenshots-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.tarifs-screenshots-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.tarifs-screenshots-dot.active {
    background: #667eea;
    width: 20px;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .tarifs-screenshots-nav { display: none; }
    .tarifs-screenshots-item .screenshot-img { max-width: 100%; }
}

/* ── Contract Quota Banner ── */
.contract-quota-banner {
    background: #f8fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.contract-quota-banner.quota-warning {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.3);
}
.contract-quota-banner.quota-full {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}
.quota-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.quota-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quota-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}
.quota-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.quota-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.quota-full .quota-bar-fill {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}
.btn-quota-upgrade {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}
.btn-quota-upgrade:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    color: #fff;
}

/* ==========================================
   INFINITE SCROLL
   ========================================== */
.infinite-scroll-loader {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.infinite-scroll-loader .spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary-500, #667eea);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ==========================================
   PUBLIC HELPER PAGES
   ========================================== */

/* Hero */
.public-helper-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}
.public-helper-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.public-helper-hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Breadcrumb */
.public-helper-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
}
.public-helper-breadcrumb a {
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}
.public-helper-breadcrumb a:hover {
    color: #fff;
}

/* Non-hero breadcrumb (profile page) */
.section .public-helper-breadcrumb {
    color: var(--text-secondary, #6b7280);
}
.section .public-helper-breadcrumb a {
    color: var(--primary-500, #667eea);
}
.section .public-helper-breadcrumb a:hover {
    color: var(--primary-700, #4453bc);
}

/* Regions grid */
.public-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.public-region-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.public-region-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary, #1f2937);
}

/* Helpers grid */
.public-helpers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.public-helper-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Filters */
.public-helper-filters {
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    padding-bottom: 1rem;
}
.public-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.public-filter-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.public-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-medium, #d1d5db);
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: var(--text-secondary, #6b7280);
}
.public-filter-chip input[type="checkbox"] {
    display: none;
}
.public-filter-chip.active,
.public-filter-chip:hover {
    background: var(--primary-500, #667eea);
    color: #fff;
    border-color: var(--primary-500, #667eea);
}

/* Pagination */
.public-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.public-pagination-info {
    font-size: 0.9rem;
    color: var(--text-secondary, #6b7280);
}

/* Region intro */
.public-helper-region-intro {
    background: var(--bg-secondary, #f8fafb);
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.6;
}

/* SEO block */
.public-helper-seo-block {
    padding: 2rem 0;
    border-top: 1px solid var(--border-light, #e5e7eb);
}
.public-helper-seo-block h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.public-helper-seo-block p {
    color: var(--text-secondary, #6b7280);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
.public-helper-seo-block a {
    color: var(--primary-500, #667eea);
}

/* Public profile CTA */
.public-profile-cta {
    background: linear-gradient(135deg, rgba(102,126,234,0.04) 0%, rgba(118,75,162,0.04) 100%);
    border: 1px solid rgba(102,126,234,0.15);
}
.public-profile-container .profile-sidebar {
    order: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .public-helper-hero {
        padding: 2rem 1rem;
    }
    .public-helper-hero h1 {
        font-size: 1.6rem;
    }
    .public-regions-grid {
        grid-template-columns: 1fr;
    }
    .public-helpers-grid {
        grid-template-columns: 1fr;
    }
    .public-filter-services {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    .public-filter-chip {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ==========================================
   JOB ALERT BUTTON
   ========================================== */
.job-alert-btn.active {
    border-color: #10b981;
    color: #059669;
    background: rgba(16, 185, 129, 0.06);
}

.job-alert-btn.active:hover {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}