/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ===== CHARTE GRAPHIQUE PRO WORK AGENCY =====
       Bleu nuit #1F2E52  -> couleur principale (structure, titres, boutons principaux)
       Bleu moyen #3B569B -> couleur secondaire (boutons secondaires, liens, cartes)
       Bleu ciel #59C6F2  -> couleur d'accent (CTA, icônes, hover)
       Blanc #FFFFFF      -> fond principal
       Gris très clair #F5F7FA -> fond secondaire (sections, formulaires, cartes)
       Gris foncé #1E293B -> texte principal
       Gris #64748B       -> texte secondaire
    ====================================================== */
    --primary: #1F2E52;
    --primary-dark: #0F1929;
    --primary-light: #2D3968;
    --primary-medium: #3B569B;
    --primary-medium-dark: #2E435B;
    --primary-medium-light: #1F2E52;
    --secondary: #59C6F2;
    --secondary-dark: #2FA8E0;
    --secondary-light: #80D4F9;
    --white: #FFFFFF;
    --off-white: #F5F7FA;
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --gray-50: #F5F7FA;
    --gray-100: #e7ecf3;
    --gray-200: #d9e2ed;
    --gray-300: #c2cee2;
    --gray-400: #a7b0c9;
    --gray-500: #64748B;
    --gray-600: #64748B;
    --gray-700: #1E293B;
    --gray-800: #1E293B;
    --gray-900: #1E293B;
    --success: #55a657;
    --warning: #e5c547;
    --error: #e65649;
    --shadow-sm: 0 1px 2px rgba(13, 19, 35, 0.08);
    --shadow: 0 4px 6px -1px rgba(13, 19, 35, 0.12), 0 2px 4px -2px rgba(13, 19, 35, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(13, 19, 35, 0.12), 0 4px 6px -4px rgba(13, 19, 35, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(13, 19, 35, 0.15), 0 8px 10px -6px rgba(13, 19, 35, 0.08);
    --shadow-2xl: 0 25px 50px -12px rgba(13, 19, 35, 0.2);
    --radius-sm: 16px;
    --radius: 16px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--off-white);
    overflow-x: clip;
}

/* Charte graphique : titres en bleu nuit, liens en bleu moyen (hover bleu ciel) */
h1, h2, h3 {
    color: var(--primary);
}

a {
    color: var(--primary-medium);
}

a:hover {
    color: var(--secondary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== PAGE SYSTEM ===== */
.page {
    display: none;
    min-height: calc(100vh - 72px);
}

.page.active {
    display: block;
}

#page-offres { background: var(--off-white); }
#page-conditions { background: var(--off-white); }
#page-conditions .page { background: var(--off-white); }
#page-apropos { background: var(--white); }
#page-connexion {
    background: linear-gradient(160deg, #3b569b 0%, #1F2E52 100%);
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

#page-connexion.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.connexion-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0f1929;
}

.connexion-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 100vh;
    opacity: 0.7;
    transition: opacity 0.8s ease;
    filter: contrast(1.1) saturate(1.0) brightness(1.2);
    -webkit-filter: contrast(1.1) saturate(1.0) brightness(1.2);
}

.connexion-video.active {
    opacity: 0.7;
}

.connexion-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15,25,41,0.5) 0%, rgba(31,46,82,0.4) 50%, rgba(15,25,41,0.55) 100%);
    z-index: 1;
}

.connexion-bg-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(89,198,242,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(89,198,242,0.04) 0%, transparent 50%);
    pointer-events: none;
}

.connexion-bg-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(89,198,242,0.04) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

#page-connexion .connexion-section {
    position: relative;
    z-index: 2;
    background: transparent;
    align-items: center;
    padding: 20px 0;
}
#page-compte { background: var(--off-white); }
#page-employeur { background: var(--off-white); }
#page-contrat { background: var(--off-white); }

/* ===== HEADER ===== */
.header {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1340px;
    z-index: 1000;
    background: rgba(31, 46, 82, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition);
}

.header.scrolled {
    background: rgba(31, 46, 82, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Smart header: black variant when over a white/light background (keeps the glass/transparent look) */
.header.header--light {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(0, 0, 0, 0.15);
}

.header.header--light .nav-link {
    color: #000000;
}

.header.header--light .nav-link:hover,
.header.header--light .nav-link.active {
    color: #000000;
    background: rgba(0, 0, 0, 0.08);
}

.header.header--light .nav-link-connexion {
    color: #000000 !important;
}

.header.header--light .nav-link-connexion:hover {
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

.header.header--light .logo-img {
    filter: brightness(0) saturate(100%);
    opacity: 0.9;
}

.header.header--light .bar {
    background: #000000;
}

.header.header--light .hamburger.active .bar {
    background: #000000;
}

.navbar {
    padding: 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 8px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 28px;
    width: auto;
    display: block;
}

.logo-icon svg {
    width: 40px;
    height: 40px;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.nav-link {
    padding: 6px 12px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: var(--white);
    background: rgba(255,255,255,0.08);
}

.nav-link-connexion {
    padding: 6px 12px !important;
    color: rgba(255,255,255,0.85) !important;
    margin-left: 8px;
    font-weight: 500 !important;
    border-radius: 999px !important;
    transition: all 0.2s ease !important;
}

.nav-link-connexion:hover {
    color: var(--white) !important;
    background: rgba(255,255,255,0.08) !important;
}

.nav-link-connexion.nav-avatar-link {
    background: none !important;
    padding: 0;
    margin-left: 8px;
    border-radius: 50%;
    border: none;
    line-height: 0;
}

.nav-link-connexion.nav-avatar-link:hover,
.nav-link-connexion.nav-avatar-link.active {
    background: none !important;
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ===== ACCOUNT DROPDOWN ===== */
.nav-item-account { position: relative; }

.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: -4px;
    min-width: 260px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.06);
    padding: 6px;
    z-index: 1000;
    animation: dropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0,0,0,0.06);
}

.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    background: var(--white);
    transform: rotate(45deg);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    border-bottom: none;
    border-right: none;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 10px;
    margin-bottom: 4px;
}

.nav-dropdown-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.nav-dropdown-header-info {
    flex: 1;
    min-width: 0;
}

.nav-dropdown-header-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.nav-dropdown-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    background: var(--secondary);
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 3px;
    letter-spacing: 0;
}

.nav-dropdown-header-badge.employer {
    background: var(--primary);
}

.nav-dropdown-header-badge.hybrid {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
}

.nav-dropdown-section {
    padding: 2px 0;
}

.nav-dropdown-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 6px 14px 4px;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #1E293B;
    text-decoration: none;
    border-radius: 16px;
    transition: all 0.15s ease;
    cursor: pointer;
}

.nav-dropdown-item:hover {
    background: #F5F7FA;
    color: var(--primary);
}

.nav-dropdown-item:active {
    transform: scale(0.98);
}

.nav-dropdown-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #64748B;
    transition: all 0.15s;
}

.nav-dropdown-item:hover svg {
    color: var(--secondary);
}

.nav-dropdown-item.nav-dropdown-danger {
    color: var(--error);
}

.nav-dropdown-item.nav-dropdown-danger svg {
    color: #fca5a5;
}

.nav-dropdown-item.nav-dropdown-danger:hover {
    background: #fef2f2;
}

.nav-dropdown-item.nav-dropdown-danger:hover svg {
    color: var(--error);
}

.nav-dropdown-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
    margin: 4px 10px;
}

.nav-dropdown-item-active {
    background: #F5F7FA !important;
    color: var(--secondary) !important;
    font-weight: 600;
}

.nav-dropdown-item-active svg {
    color: var(--secondary) !important;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    cursor: pointer;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #1E293B;
    transition: background 0.15s;
}
.nav-dropdown-toggle:hover {
    background: #F5F7FA;
}
.nav-dropdown-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--secondary);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-dropdown-toggle span {
    line-height: 1.3;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.bar {
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 16px;
    transition: var(--transition-fast);
}

.hamburger.active .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== PAGE HERO BANNER ===== */
.page-hero {
    padding: 120px 0 40px;
    text-align: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    position: relative;
    overflow: hidden;
}
#page-employeur .page-hero {
    padding: 160px 0 80px;
}
#page-employeur .account-section {
    padding: 0 0 80px;
}
#page-employeur .account-layout {
    margin-top: 0;
    padding-top: 12px;
}
#page-compte .page-hero {
    padding: 130px 0 50px;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 70%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(89, 198, 242, 0.1) 0%, transparent 65%);
    pointer-events: none;
}

.page-hero-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0;
    position: relative;
}

.page-hero-subtitle {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    max-width: 600px;
    margin: 8px auto 0;
    position: relative;
}

.page-content {
    padding: 40px 0 80px;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(31, 46, 82, 0.3);
}

.btn-primary:hover {
    background: var(--primary-medium);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 86, 155, 0.4);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(31, 46, 82, 0.3);
}

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

.btn-secondary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

/* Bouton CTA (accent bleu ciel) : actions importantes et appels à l'action */
.btn-cta {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(31, 46, 82, 0.35);
}

.btn-cta:hover {
    background: var(--primary-light);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 46, 82, 0.4);
}
.btn-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(31, 46, 82, 0.3);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: 1.5px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    background: transparent;
    font-family: inherit;
}

.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }

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

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 10px 24px;
    font-size: 14px;
}

.btn-full {
    width: 100%;
}

/* ===== JOBS SECTION ===== */
.jobs-section {
    padding: 140px 0 80px;
    background: var(--off-white);
}

.jobs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.jobs-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 12px 20px;
    flex: 1;
    max-width: 400px;
    color: var(--gray-600);
}

.jobs-search input {
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--gray-700);
    width: 100%;
}

.jobs-count {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
    white-space: nowrap;
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.job-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.job-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.job-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.job-badge {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(89, 198, 242, 0.1);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-date {
    font-size: 13px;
    color: var(--gray-600);
}

.job-favorite {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    color: var(--gray-400);
}

.job-favorite:hover {
    background: rgba(89, 198, 242, 0.1);
    color: var(--secondary);
}

.job-favorite.active {
    color: #EF4444;
}

.job-favorite.active svg {
    fill: #EF4444;
}

.share-logo {
    width: 22px;
    height: 22px;
    display: inline-block;
    background: currentColor;
    -webkit-mask-image: url('/images/logo-partage.png');
    mask-image: url('/images/logo-partage.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.job-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.job-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.job-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
}

.job-salary {
    font-weight: 600;
}

.job-meta-item svg {
    color: var(--secondary);
    flex-shrink: 0;
}

.job-excerpt {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== JOB DETAIL MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    position: relative;
    animation: modalIn 0.3s ease;
}

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

.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: var(--gray-100);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: var(--transition-fast);
    z-index: 10;
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--primary);
}

.modal-body {
    padding: 48px;
}

.modal-body h2 {
    font-size: 1.75rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.modal-body .modal-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.modal-body .modal-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 6px 14px;
    border-radius: 16px;
}

.modal-body h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin: 28px 0 12px;
}

.modal-body p {
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 12px;
}

.modal-body ul {
    list-style: none;
    margin-bottom: 16px;
}

.modal-body ul li {
    position: relative;
    padding: 8px 0 8px 28px;
    color: var(--gray-700);
    line-height: 1.6;
}

.modal-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
}

.modal-apply {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===== CONDITIONS SECTION ===== */
.conditions-section {
    padding: 50px 0 80px;
}

.profile-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 50px;
    position: sticky;
    top: 70px;
    z-index: 50;
    padding: 12px 0;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

.profile-btn svg {
    width: 14px;
    height: 14px;
    transition: var(--transition-fast);
}

.profile-btn.active {
    border-color: var(--gray-400);
    background: var(--gray-100);
}

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

/* ===== SERVICES HERO ===== */
.services-hero {
    position: relative;
    padding: 140px 0 30px;
    background: linear-gradient(160deg, #1f2e52 0%, #0f1929 100%);
    overflow: hidden;
}

.services-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(89,198,242,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.services-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(89,198,242,0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.services-hero-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 20px;
}

.services-hero-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(89,198,242,0.12);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.services-hero-content h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.services-hero-content p {
    font-size: 14.5px;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
    max-width: 580px;
    margin: 0 auto;
}

.services-hero-stats {
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.services-hero-stat {
    text-align: center;
}

.services-hero-stat-num {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.2;
}

.services-hero-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ===== SECTION HEADER NUMBERED ===== */
.section-numbered {
    text-align: center;
    margin-bottom: 40px;
}

.section-numbered .section-number {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    background: rgba(89,198,242,0.1);
    padding: 4px 14px;
    border-radius: 50px;
}

.section-numbered h2 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

/* ===== SERVICES PRICING ===== */
.services-pricing {
    padding: 80px 0 60px;
    background: var(--off-white);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 820px;
    margin: 55px auto 0;
}

.pricing-card {
    background: var(--white);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--secondary);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.pricing-card-featured {
    box-shadow: 0 0 0 1px rgba(89,198,242,0.15), var(--shadow-lg);
    transform: scale(1.03);
    z-index: 1;
}

.pricing-card-featured:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow: 0 0 0 1px rgba(89,198,242,0.25), var(--shadow-2xl);
}

.pricing-card-sm {
    padding: 32px 28px;
}

.pricing-card-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    background: var(--primary);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    white-space: nowrap;
}

.pricing-card-label-popular {
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
}

.pricing-card-label-special {
    background: linear-gradient(135deg, #64748B, #64748B);
}

.pricing-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.pricing-card-icon svg {
    width: 12px;
    height: 12px;
}

.pricing-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.pricing-card-subtitle {
    font-size: 13px;
    color: var(--gray-400);
    margin-bottom: 20px;
}

.pricing-card-price {
    margin-top: auto;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gray-100);
    white-space: nowrap;
}

.pricing-card-amount {
    display: inline;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    margin-right: 6px;
}

.pricing-card-period {
    display: inline;
    font-size: 13px;
    color: var(--gray-400);
    font-weight: 500;
}

.pricing-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pricing-grid > .pricing-card:nth-child(2) .pricing-card-price {
    margin-top: 20px;
}
.pricing-grid > .pricing-card:nth-child(3) .pricing-card-price {
    margin-top: 128px;
}


.pricing-card-features-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
    margin-top: 8px;
}
.pricing-card-features {
    list-style: none;
    margin-bottom: 24px;
}

.pricing-card-features li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 13.5px;
    color: var(--gray-600);
    line-height: 1.6;
}

.pricing-card-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 5px;
    height: 1.5px;
    background: var(--secondary);
    border-radius: 16px;
}

.pricing-card-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #F5F7FA;
    border-radius: 16px;
    font-size: 12.5px;
    color: var(--primary);
    line-height: 1.5;
    margin-bottom: 20px;
}

#page-conditions .pricing-card-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--secondary);
    width: 8px;
    height: 8px;
}

#page-conditions .services-cta-btn svg {
    width: 10px;
    height: 10px;
}

.pricing-card-pay {
    text-align: center;
    font-size: 12px;
    color: var(--gray-400);
    margin-bottom: 20px;
}

.pricing-card-btn {
    width: 100%;
    padding: 12px 24px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: var(--white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}

.pricing-card-btn:hover {
    background: linear-gradient(135deg, #2fa8e0, #2FA8E0);
    color: var(--white);
}

.pricing-card-btn-primary {
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    border-color: transparent;
    color: var(--white);
}

.pricing-card-btn-primary:hover {
    background: linear-gradient(135deg, #2fa8e0, #2FA8E0);
    border-color: transparent;
    color: var(--white);
    box-shadow: 0 4px 15px rgba(89,198,242,0.3);
}

.pricing-card-line-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.pricing-card-line-item + .pricing-card-line-item {
    border-top: 1px solid var(--gray-50);
}

.pricing-card-line-item span {
    font-size: 14px;
    color: var(--gray-600);
}

.pricing-card-line-item strong {
    font-size: 15px;
    color: var(--primary);
}

/* ===== SERVICES CTA ===== */
.services-cta-section {
    padding: 0 0 80px;
    background: var(--off-white);
}

.services-cta-card {
    background: linear-gradient(135deg, #1f2e52 0%, #2d3968 100%);
    border-radius: 20px;
    padding: 24px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.services-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(89,198,242,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.services-cta-content {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.services-cta-content h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
}

.services-cta-content p {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: var(--white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.services-cta-btn:hover {
    background: linear-gradient(135deg, #2fa8e0, #2FA8E0);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(89,198,242,0.3);
}

/* ===== COMMUNICATIONS SECTION ===== */
.services-communications {
    padding: 20px 0 60px;
    background: var(--off-white);
}

.services-communications .pricing-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ===== ENSEIGNEMENT SECTION ===== */
.services-conseils {
    padding: 20px 0 80px;
    background: var(--off-white);
}

.services-enseignement {
    padding: 20px 0 80px;
    background: var(--off-white);
}

.services-conseils .pricing-grid-3,
.services-enseignement .pricing-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.services-communications .pricing-grid-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.services-communications .pricing-grid-3 .pricing-card {
    width: calc((100% - 48px) / 3);
    flex-shrink: 0;
}

/* ===== SERVICES PAGE ===== */

/* ===== ABOUT SECTION ===== */
.about-section {
    padding: 100px 0 60px;
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
}

.about-image {
    align-self: center;
}

.about-content h1,
.about-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-content p {
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-features {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    flex-shrink: 0;
}

.about-feature span {
    font-weight: 500;
}

.about-img-box {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-img-box svg {
    width: 100%;
    height: auto;
}

.about-img-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}

/* ===== VALUES SECTION ===== */
.values-section {
    padding: 80px 0;
    background: var(--gray-50);
    position: relative;
    overflow: hidden;
}
.values-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(89,198,242,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.values-section .values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.values-section .value-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.values-section .value-card:hover {
    background: var(--white);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.values-section .value-circle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(89,198,242,0.15);
    border-radius: 50%;
    color: var(--secondary);
    margin: 0 auto 20px;
}

.values-section .value-card h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.values-section .value-card p {
    color: var(--gray-600);
    font-size: 14px;
}

/* ===== TESTIMONIALS (About page) ===== */
.testimonials-section {
    padding: 80px 0;
    background: var(--gray-50);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: var(--white);
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

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

.testimonial-quote {
    margin-bottom: 20px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-700);
    font-style: italic;
    margin-bottom: 24px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 600;
}

.author-info strong {
    display: block;
    color: var(--primary);
    font-size: 15px;
}

.author-info span {
    font-size: 13px;
    color: var(--gray-600);
}

.section-heading {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
    text-align: center;
}

.section-heading.light {
    color: var(--white);
}

.section-subtitle {
    font-size: 17px;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-subtitle.light {
    color: rgba(255,255,255,0.7);
}

/* ===== CONTACT SECTION ===== */
.contact-section {
    padding: 60px 0 80px;
    background: var(--white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.contact-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white);
    border-radius: 16px;
    flex-shrink: 0;
}

.contact-card h4 {
    color: var(--primary);
    margin-bottom: 4px;
    font-size: 15px;
}

.contact-card p {
    color: var(--gray-600);
    font-size: 14px;
    margin: 0;
}

.contact-form {
    background: var(--white);
    padding: 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-700);
    background: var(--gray-50);
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(89, 198, 242, 0.12);
    background: var(--white);
}

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

.required {
    color: var(--secondary);
    font-weight: 700;
}

/* ===== LANGUES MULTI-SELECT DROPDOWN ===== */
.langues-dropdown {
    position: relative;
    width: 100%;
}

.langues-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    background: var(--white);
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.langues-trigger:hover {
    border-color: var(--secondary);
}

.langues-trigger:focus,
.langues-dropdown.open .langues-trigger {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(89, 198, 242, 0.12);
}

#langues-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#langues-summary.langues-placeholder {
    color: var(--gray-400);
}

.langues-arrow {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--gray-500);
    transition: transform 0.25s ease;
}

.langues-dropdown.open .langues-arrow {
    transform: rotate(180deg);
}

.langues-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1200;
    max-height: 260px;
    overflow-y: auto;
}

.langues-dropdown.open .langues-menu {
    display: block;
    animation: dropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.select-dropdown {
    position: relative;
    width: 100%;
}

.select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    background: var(--white);
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.select-trigger:hover {
    border-color: var(--secondary);
}

.select-trigger:focus,
.select-dropdown.open .select-trigger {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(89, 198, 242, 0.12);
}

.select-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-summary.select-placeholder {
    color: var(--gray-400);
}

.select-dropdown.open .langues-arrow {
    transform: rotate(180deg);
}

.select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1200;
    max-height: 260px;
    overflow-y: auto;
}

.select-dropdown.open .select-menu {
    display: block;
    animation: dropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.select-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    color: var(--gray-700);
    text-align: left;
    transition: background 0.15s ease;
}

.select-option:hover {
    background: var(--gray-50);
}

.select-option.selected {
    background: #F5F7FA;
    color: var(--primary);
    font-weight: 600;
}

.select-option.selected::after {
    content: '✓';
    margin-left: auto;
    color: var(--white);
    font-weight: 700;
}

.form-group .langues-option {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-700);
    transition: background 0.15s ease;
}

.form-group .langues-option:hover {
    background: var(--gray-50);
}

.form-group .langues-option input[type="checkbox"] {
    display: none;
}

.form-group .langues-option .langues-check-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--gray-300);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
}

.form-group .langues-option:hover .langues-check-box {
    border-color: var(--secondary);
    box-shadow: 0 0 18px rgba(89,198,242,0.12);
}

.form-group .langues-option .langues-check:checked + .langues-check-box {
    background: var(--secondary);
    border-color: var(--secondary-dark);
    box-shadow:
        0 0 12px rgba(89,198,242,0.25),
        0 0 30px rgba(89,198,242,0.1);
}

.form-group .langues-option .langues-check:checked + .langues-check-box svg {
    display: block;
    animation: langues-check-pop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group .langues-option .langues-check-box svg {
    display: none;
    stroke: var(--white);
    width: 12px;
    height: 12px;
}

@keyframes langues-check-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.form-group .langues-option-autre {
    border-top: 1px solid var(--gray-100);
    margin-top: 2px;
    padding-top: 10px;
    color: var(--primary);
    font-weight: 500;
}

.langues-custom {
    padding: 8px 6px 4px;
    border-top: 1px dashed var(--gray-200);
    margin-top: 4px;
}

.langues-custom-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.langues-custom-row input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    font-size: 13px;
    font-family: inherit;
    color: var(--gray-700);
    transition: var(--transition);
}

.langues-custom-row input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(89, 198, 242, 0.12);
}

.langues-custom-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.langues-custom-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(89, 198, 242, 0.12);
    color: var(--secondary-dark);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.langues-custom-tag button {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.langues-custom-tag button:hover {
    opacity: 1;
}

.langues-custom-empty {
    font-size: 12px;
    color: var(--gray-500);
    padding: 4px 0;
}

.notification-check {
    margin-top: 8px;
}

.notification-check .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--gray-700);
    cursor: pointer;
}

.notification-check .checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.notification-warning {
    display: none;
    font-size: 12px;
    color: #EF4444;
    margin-top: 6px;
    padding-left: 26px;
}

.notification-check input[type="checkbox"]:not(:checked) ~ .notification-warning {
    display: block;
}

/* ===== LEGAL PAGES (Confidentialité & Cookies) ===== */
.legal-page {
    padding: 120px 0 80px;
    background: var(--white);
    min-height: calc(100vh - 80px);
}
.legal-content {
    max-width: 800px;
    margin: 0 auto;
}
.legal-content h1 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
}
.legal-update {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 32px;
}
.legal-content h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 28px;
    margin-bottom: 10px;
}
.legal-content h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-700);
    margin-top: 18px;
    margin-bottom: 8px;
}
.legal-content p {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 10px;
}
.legal-content ul {
    padding-left: 20px;
    margin-bottom: 10px;
}
.legal-content li {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 4px;
}
.legal-content a {
    color: var(--secondary-dark);
    text-decoration: underline;
}
.legal-content a:hover {
    color: var(--secondary);
}

/* ===== FOOTER LEGAL ===== */
.footer-legal {
    text-align: center;
    padding: 16px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-legal a {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-legal a:hover {
    color: var(--white);
}
.footer-legal-sep {
    color: rgba(255,255,255,0.3);
    margin: 0 10px;
    font-size: 12px;
}

/* ===== PASSWORD TOGGLE (generic) ===== */
.pw-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    z-index: 2;
}
.pw-toggle-btn:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}
.form-group { position: relative; }

/* ===== CONNEXION ===== */
.connexion-section {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    flex: 1;
    min-height: calc(100vh - 80px);
}

.connexion-wrapper {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    margin-top: -30px;
}

/* ===== LOGIN CARD ===== */
.login-card {
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
    position: relative;
}

.login-card-body {
    background: var(--gray-50);
    padding: 24px 32px 32px;
}

/* ===== LOGIN TABS ===== */
.login-tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: 16px;
    padding: 4px;
    position: relative;
    margin-bottom: 24px;
}

.login-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.login-tab:hover {
    color: var(--gray-700);
}

.login-tab.active {
    color: var(--primary);
}

.login-tab svg {
    flex-shrink: 0;
}

.login-tab-line {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--white);
    border-radius: 16px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(31,46,82,0.08), 0 2px 8px rgba(31,46,82,0.04);
    z-index: 0;
}

/* ===== LOGIN BODY ===== */
.login-body {
    display: flex;
    flex-direction: column;
}

.login-body-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-body-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.login-body-header .reg-type-toggle {
    display: inline-flex;
    gap: 0;
    background: var(--gray-100);
    border-radius: 16px;
    padding: 3px;
}
.login-body-header .reg-type-toggle input[type="radio"] {
    display: none;
}
.login-body-header .reg-type-toggle .reg-type-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
    transition: all 0.25s ease;
}
.login-body-header .reg-type-toggle .reg-type-option svg {
    width: 15px;
    height: 15px;
    color: var(--gray-400);
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.login-body-header .reg-type-toggle .reg-type-option:hover {
    color: var(--gray-700);
}
.login-body-header .reg-type-toggle input[type="radio"]:checked + .reg-type-option {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(31,46,82,0.1);
}
.login-body-header .reg-type-toggle input[type="radio"]:checked + .reg-type-option svg {
    color: var(--secondary);
}

/* ===== LOGIN FIELD ===== */
.login-field {
    position: relative;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.login-field-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.login-field-input {
    position: relative;
    width: 100%;
}

.login-field-input label {
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--gray-500);
    pointer-events: none;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 500;
    line-height: 1;
    z-index: 1;
}

.login-field-input input:focus + label,
.login-field-input input:valid + label,
.login-field-input select:focus + label,
.login-field-input select:valid + label {
    top: 6px;
    transform: translateY(0);
    font-size: 10px;
    color: var(--secondary-dark);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.login-field-input input:not(:focus):valid + label,
.login-field-input select:not(:focus):valid + label {
    color: var(--gray-500);
    top: 6px;
    transform: translateY(0);
}

.login-field input,
.login-field select {
    width: 100%;
    padding: 20px 16px 8px 46px;
    border: 1.5px solid var(--gray-200);
    border-radius: 16px;
    font-family: inherit;
    font-size: 14px;
    color: var(--gray-900);
    background: var(--white);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.login-field input::placeholder {
    color: var(--gray-300);
}

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--gray-900) !important;
    -webkit-box-shadow: 0 0 0 30px var(--white) inset !important;
    box-shadow: 0 0 0 30px var(--white) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.login-field input:focus,
.login-field select:focus {
    outline: none;
    border-color: var(--secondary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(89,198,242,0.12);
}

.login-field select {
    cursor: pointer;
    appearance: none;
    color: var(--gray-700);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7290' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.login-field select option {
    color: var(--gray-800);
    background: var(--white);
}

.login-field-icon,
.login-field-ico {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    width: 18px;
    height: 18px;
    z-index: 1;
}

.login-field-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.login-field-toggle:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

/* ===== REGISTER TYPE TOGGLE (handled in .login-body-header) ===== */

/* ===== LOGIN ROW ===== */
.login-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.login-row .login-field {
    margin-bottom: 0;
}

.login-check input[type="checkbox"]:disabled + .login-check-box {
    opacity: 1;
}
.login-check input[type="checkbox"]:disabled ~ .login-check-label {
    opacity: 1;
}

/* ===== LOGIN EXTRA (checkbox + forgot) ===== */
.login-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 20px;
}

.login-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: color 0.3s ease;
}

.login-check:hover {
    color: var(--gray-700);
}

.login-check input {
    display: none;
}

.login-check-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--gray-300);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
}

.login-check:hover .login-check-box {
    border-color: var(--secondary);
    box-shadow: 0 0 18px rgba(89,198,242,0.12);
}

.login-check input:checked + .login-check-box {
    background: var(--secondary);
    border-color: var(--secondary-dark);
    box-shadow:
        0 0 12px rgba(89,198,242,0.25),
        0 0 30px rgba(89,198,242,0.1);
}

.login-check input:checked + .login-check-box svg {
    display: block;
    animation: login-check-pop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-check-box svg {
    display: none;
    stroke: var(--white);
    width: 12px;
    height: 12px;
}

@keyframes login-check-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.login-check-label {
    line-height: 1.4;
    transition: color 0.3s ease;
}

.login-check input:checked ~ .login-check-label {
    color: var(--gray-800);
}

.login-link {
    color: var(--secondary-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: color 0.2s ease;
}

.login-link:hover {
    color: var(--secondary);
}

/* ===== LOGIN SUBMIT ===== */
.login-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: var(--white);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(89,198,242,0.25);
}

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

/* ===== LOGIN SOCIAL ===== */
.login-alt {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.login-alt-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

.login-alt-text {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    font-weight: 500;
    white-space: nowrap;
}

.login-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.login-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    transition: all 0.2s ease;
}

.login-social-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

/* ===== LOGIN FOOTER ===== */
.login-footer {
    text-align: center;
    font-size: 13.5px;
    color: var(--gray-500);
    margin-top: 20px;
}

.login-footer-btn {
    background: none;
    border: none;
    color: var(--secondary-dark);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    margin-left: 2px;
}

.login-footer-btn:hover {
    color: var(--secondary);
}

/* ===== LOGIN CHECKLINE ===== */
.login-checkline {
    margin: 12px 0;
}

.login-checkline .login-check {
    align-items: flex-start;
    line-height: 1.5;
}

.login-checkline .login-check-box {
    margin-top: 1px;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--primary);
    color: rgba(255,255,255,0.6);
    padding: 64px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-logo-link {
    display: inline-block;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.footer-brand p {
    margin-top: 16px;
    line-height: 1.7;
    font-size: 14px;
}

.footer-links h4 {
    color: var(--white);
    font-size: 15px;
    margin-bottom: 16px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
    font-size: 14px;
}

.footer-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--secondary);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 13px;
}

.footer-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    margin: 24px 0 20px;
}

.footer-categories {
    text-align: left;
}

.footer-categories-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    text-align: center;
}

.footer-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.footer-categories-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-categories-group-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.footer-categories-group a {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    line-height: 1.8;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-categories-group a:hover {
    color: var(--secondary);
}

/* ===== ABOUT: HERO ===== */
/* ===== ABOUT: HERO ===== */
.about-hero {
    padding: 140px 0 80px;
    background: linear-gradient(160deg, #0f1929 0%, #1f2e52 35%, #2d3968 65%, #1f2e52 100%);
    position: relative;
    overflow: hidden;
}
.about-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 50%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(89,198,242,0.07) 0%, transparent 65%);
    pointer-events: none;
}
.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    background: rgba(89,198,242,0.12);
    border: 1px solid rgba(89,198,242,0.2);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
}
.about-hero-badge svg {
    width: 14px;
    height: 14px;
}
.about-hero-text h1 {
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 18px;
}
.about-hero-text h1 span {
    background: linear-gradient(135deg, #59c6f2, #2FA8E0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.about-hero-text p {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
    margin-bottom: 32px;
}
.about-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.about-hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: var(--white);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}
.about-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(89,198,242,0.3);
}
.about-hero-btn-outline {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
}
.about-hero-btn-outline:hover {
    border-color: var(--secondary);
    color: var(--white);
    box-shadow: none;
}
.about-hero-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.about-hero-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: all 0.35s ease;
}
.about-hero-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}
.about-hero-card-num {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #59c6f2, #2FA8E0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
}
.about-hero-card-label {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ===== ABOUT: MISSION ===== */
.about-mission {
    padding: 0;
    background: var(--gray-50);
    position: relative;
}
.about-mission-card {
    text-align: center;
    padding: 36px 32px;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    top: -40px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(31,46,82,0.06);
    border: 1px solid var(--gray-100);
}
.about-mission-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(89,198,242,0.12), rgba(89,198,242,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    margin: 0 auto 20px;
}
.about-mission-card h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}
.about-mission-card p {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--gray-700);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== ABOUT: VALEURS ===== */
.about-valeurs {
    padding: 60px 0 100px;
    background: var(--gray-50);
    position: relative;
}
.about-valeurs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.about-valeur-card {
    text-align: center;
    padding: 36px 20px 32px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    transition: all 0.35s ease;
}
.about-valeur-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(31,46,82,0.06);
    border-color: transparent;
}
.about-valeur-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: all 0.35s ease;
}
.about-valeur-card:hover .about-valeur-icon {
    transform: scale(1.1) rotate(-4deg);
}
.about-valeur-card h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 700;
}
.about-valeur-card p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* ===== ABOUT: DOMAINES ===== */
.about-domaines {
    padding: 100px 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.about-domaines::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse, rgba(89,198,242,0.03) 0%, transparent 65%);
    pointer-events: none;
}
.about-domaines-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.about-domaine-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 32px 24px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}
.about-domaine-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(31,46,82,0.06);
    border-color: transparent;
}
.about-domaine-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gray-50);
    line-height: 1;
    position: absolute;
    top: 8px;
    right: 14px;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    transition: all 0.35s ease;
}
.about-domaine-card:hover .about-domaine-num {
    color: rgba(89,198,242,0.06);
}
.about-domaine-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(89,198,242,0.12), rgba(89,198,242,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    margin-bottom: 18px;
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
}
.about-domaine-card:hover .about-domaine-icon {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--white);
    transform: scale(1.05);
}
.about-domaine-card h3 {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.about-domaine-card p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ===== ABOUT: CHOISIR ===== */
.about-choisir {
    padding: 100px 0;
    background: var(--gray-50);
    position: relative;
}
.about-choisir-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}
.about-choisir-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.35s ease;
}
.about-choisir-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(31,46,82,0.08);
}
.about-choisir-header {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}
.about-choisir-body {
    padding: 28px 24px 32px;
}
.about-choisir-body h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 12px;
    font-weight: 700;
}
.about-choisir-body p {
    color: var(--gray-600);
    line-height: 1.8;
    margin: 0;
    font-size: 14px;
}

/* ===== ABOUT: ANCRAGE ===== */
.about-ancrage {
    padding: 100px 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.about-ancrage::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(89,198,242,0.03) 0%, transparent 70%);
    pointer-events: none;
}
.about-ancrage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.about-ancrage-text h2 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
}
.about-ancrage-text h2 span {
    color: var(--secondary);
}
.about-ancrage-text p {
    line-height: 1.9;
    margin-bottom: 16px;
    color: var(--gray-700);
}
.about-ancrage-text p:last-child {
    margin-bottom: 0;
}
.about-ancrage-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.about-ancrage-stat {
    background: var(--gray-50);
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: all 0.35s ease;
}
.about-ancrage-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(31,46,82,0.06);
    border-color: transparent;
}
.about-ancrage-stat-num {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 40%, var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
}
.about-ancrage-stat-label {
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 500;
}

/* ===== ABOUT: EQUIPE ===== */
.about-equipe {
    padding: 100px 0;
    background: var(--gray-50);
    position: relative;
}
.about-equipe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.about-equipe-card {
    text-align: center;
    padding: 24px 12px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    transition: all 0.35s ease;
}
.about-equipe-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(31,46,82,0.06);
    border-color: transparent;
}
.about-equipe-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: var(--white);
    transition: all 0.35s ease;
    box-shadow: 0 4px 12px rgba(31,46,82,0.12);
}
.about-equipe-card:hover .about-equipe-avatar {
    transform: scale(1.1);
}
.about-equipe-card h3 {
    font-size: 0.9rem;
    color: var(--primary);
    margin-bottom: 4px;
    font-weight: 600;
}
.about-equipe-card p {
    font-size: 12px;
    color: var(--gray-400);
    margin: 0;
    line-height: 1.3;
}

/* ===== ABOUT: DIFFUSION ===== */
.about-diffusion {
    padding: 24px 0;
    background: linear-gradient(160deg, #0f1929 0%, #1f2e52 50%, #2d3968 100%);
    position: relative;
    overflow: hidden;
}
.about-diffusion::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(89,198,242,0.06) 0%, transparent 65%);
    pointer-events: none;
}
.about-diffusion-card {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.about-diffusion-card h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 700;
}
.about-diffusion-card p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.65);
    margin-bottom: 32px;
}
.about-diffusion-card p strong {
    color: var(--white);
}
.about-diffusion-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 36px;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: var(--white);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.about-diffusion-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(89,198,242,0.3);
}

/* ===== RESPONSIVE (Global) ===== */
@media (max-width: 768px) {
    /* --- Mobile menu: right-side drawer --- */
    .header {
        z-index: 1000;
    }
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 16, 32, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 90;
    }
    .nav-menu.active ~ .nav-backdrop,
    .nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
    .nav-menu {
        position: fixed;
        top: 84px;
        right: 12px;
        height: auto;
        width: min(80%, 320px);
        max-height: calc(100vh - 104px);
        background: linear-gradient(160deg, rgba(31,46,82,0.98) 0%, rgba(15,25,41,0.98) 100%);
        border: 1px solid rgba(89,198,242,0.25);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 10px;
        gap: 2px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.45);
        border-radius: 22px;
        transform: translateX(120%);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
        z-index: 100;
    }
    .nav-menu.active {
        transform: translateX(0);
    }
    .nav-menu .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: 13px 16px;
        font-size: 15px;
        border-radius: 14px;
        color: rgba(255,255,255,0.82);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-menu li:last-child .nav-link {
        border-bottom: none;
    }
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        background: rgba(89,198,242,0.16);
        color: #fff;
    }
    .nav-menu .nav-link-connexion:not(.nav-avatar-link) {
        margin-left: 0 !important;
        margin-top: 10px !important;
        text-align: center !important;
        background: var(--secondary) !important;
        color: #0F1929 !important;
        font-weight: 700 !important;
        border-bottom: none !important;
        border-radius: 14px !important;
    }
    .nav-menu .nav-link-connexion:not(.nav-avatar-link):hover {
        background: var(--secondary-dark) !important;
        color: #0F1929 !important;
    }
    .nav-menu .nav-avatar-link {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        padding: 12px 16px !important;
        background: rgba(89,198,242,0.10) !important;
        border-bottom: none !important;
        border-radius: 14px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
    .nav-menu .nav-avatar {
        display: inline-flex !important;
        vertical-align: middle;
    }
    .nav-menu .nav-avatar-link:hover {
        background: rgba(89,198,242,0.18) !important;
    }
    .nav-menu .nav-user-email {
        display: inline-block !important;
        vertical-align: middle;
        max-width: calc(100% - 56px);
        margin-left: 12px;
        font-size: 13px;
        color: rgba(255,255,255,0.85);
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav-menu .nav-link {
        color: rgba(255,255,255,0.9);
        padding: 9px 14px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 12px;
        border: 1px solid transparent;
        transition: background 0.2s ease, border-color 0.2s ease;
        white-space: normal;
        text-align: center;
    }
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: #fff;
        background: rgba(89,198,242,0.16);
        border-color: rgba(89,198,242,0.35);
    }
    .nav-menu .nav-link-connexion {
        color: #fff !important;
        background: linear-gradient(135deg, #59c6f2, #2fa8e0) !important;
        margin-left: 0 !important;
        text-align: center;
        border-radius: 9px !important;
        border: none !important;
        margin-top: 2px;
        font-weight: 600 !important;
        font-size: 13px !important;
        padding: 6px 12px !important;
        box-shadow: 0 3px 10px rgba(47,168,224,0.25);
    }
    .nav-menu .nav-link-connexion:hover {
        background: linear-gradient(135deg, #2fa8e0, #2FA8E0) !important;
    }
    .hamburger {
        display: flex;
        z-index: 110;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .testimonials-grid,
    .values-grid,
    .conditions-grid {
        grid-template-columns: 1fr;
    }
    .domaines-grid {
        grid-template-columns: 1fr;
    }
    .choisir-grid {
        grid-template-columns: 1fr;
    }
    .ancrage-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .equipe-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .pricing-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-row {
        grid-template-columns: 1fr;
    }
    .pricing-card-featured {
        transform: none;
    }
    .pricing-card-featured:hover {
        transform: translateY(-4px);
    }
    .services-hero {
        padding: 90px 0 40px;
    }
    .services-hero-stats {
        gap: 24px;
    }
    .login-card-body {
        padding: 20px 24px 24px;
    }
    .connexion-wrapper {
        max-width: 400px;
    }
    .services-cta-card {
        padding: 40px 24px;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    section {
        padding: 60px 0;
    }
}
@media (max-width: 1024px) {
    .testimonials-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .domaines-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .equipe-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-card-featured {
        transform: none;
    }
    .pricing-card-featured:hover {
        transform: translateY(-4px);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .footer-categories-group-title {
        font-size: 11px;
    }
    .footer-categories-group a {
        font-size: 11px;
    }
}
@media (max-width: 480px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .values-grid {
        grid-template-columns: 1fr;
    }
    .conditions-grid {
        grid-template-columns: 1fr;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .pricing-grid-4 {
        grid-template-columns: 1fr;
    }
    .pricing-grid-3 {
        grid-template-columns: 1fr;
    }
    .pricing-row {
        grid-template-columns: 1fr;
    }
    .pricing-card-featured {
        transform: none;
    }
    .pricing-card-featured:hover {
        transform: translateY(-4px);
    }
    .services-hero-stats {
        gap: 20px;
    }
    .services-hero-stat-num {
        font-size: 1.3rem;
    }
    .services-cta-card {
        padding: 24px 18px;
        border-radius: 16px;
    }
    .login-card-body {
        padding: 16px 16px 20px;
    }
    .login-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    .login-tabs {
        margin-bottom: 20px;
    }
    .login-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .login-row .login-field {
        margin-bottom: 12px;
    }
    .login-row .login-field:last-child {
        margin-bottom: 0;
    }
    .login-body-header {
        margin-bottom: 16px;
    }
    .login-body-header h3 {
        font-size: 1.05rem;
    }
    .contact-form {
        padding: 24px;
    }
    .footer-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== HOMEPAGE STYLES ===== */

#page-accueil {
    background: var(--white);
}

/* --- Hero --- */
.home-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(160deg, #3b569b 0%, #1F2E52 100%);
    overflow: hidden;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top,
        rgba(15, 25, 41, 0.7) 0%,
        rgba(15, 25, 41, 0.25) 40%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.home-hero {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #1F2E52;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 100vh;
    opacity: 0;
    transition: opacity 0.6s ease;
    filter: contrast(1.2) saturate(1.0) brightness(1.4);
    -webkit-filter: contrast(1.2) saturate(1.0) brightness(1.4);
}

.hero-video.active {
    opacity: 1;
}

/* Switch */

.hero-switch-btn {
    height: 38px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    flex: 1;
}

.hero-switch-active {
    background: var(--primary);
    color: #fff;
}

.hero-switch-active:hover {
    background: var(--primary-light);
}

.hero-switch-inactive {
    background: transparent;
    color: rgba(255,255,255,0.8);
}

.hero-switch-inactive:hover {
    background: rgba(255,255,255,0.12);
}

/* Content area */
.hero-content-area {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 60px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.hero-switch {
    display: inline-flex;
    align-items: center;
    width: 340px;
    height: 44px;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 999px;
    padding: 3px;
    border: none;
    margin-bottom: 32px;
}

/* Panels row */
.hero-panels-row {
    width: 100%;
}

/* Panels wrapper (text panels that swap) */
.hero-panels {
    display: grid;
    flex: 1;
    max-width: 620px;
}

.hero-panel {
    grid-area: 1 / 1;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.hero-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-text-col {
    max-width: 620px;
}


.hero-heading {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -2px;
    margin: 0;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
}

.hero-heading-accent {
    color: #59c6f2;
}

.hero-description {
    max-width: 560px;
    color: rgba(255,255,255,0.95);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin: 28px 0 0 0;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.hero-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    height: 48px;
    background: #fff;
    border-radius: 999px;
    padding: 0 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
    margin-top: 36px;
}

.hero-search-field {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    padding-left: 14px;
    color: #333;
}

.hero-search-field::placeholder {
    color: #64748B;
}

.hero-search-submit {
    width: 170px;
    height: 36px;
    background: #1f2e52;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    flex-shrink: 0;
}

.hero-search-submit:hover {
    background: var(--primary-light);
}

.hero-search-submit-offres {
    background: #1f2e52;
}

.hero-search-submit-offres:hover {
    background: var(--primary);
}

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

/* --- Section Header --- */
.section-header-center {
    text-align: center;
    margin-bottom: 40px;
}
.section-header-center h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.section-header-center p {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Override for light-background pages */
#page-conditions .section-header-center h2,
#page-offres .section-header-center h2,
#page-apropos .section-header-center h2,
#page-connexion .section-header-center h2 {
    color: var(--primary);
}
#page-conditions .section-header-center p,
#page-offres .section-header-center p,
#page-apropos .section-header-center p,
#page-connexion .section-header-center p {
    color: var(--gray-600);
}
.section-badge {
    display: inline-block;
    padding: 6px 18px;
    color: var(--secondary);
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Services --- */
.home-services {
    position: relative;
    padding: 80px 0;
    background: #0f1929;
}

.home-services .section-header-center h2 {
    color: var(--white);
}
.home-services .section-header-center p {
    color: rgba(255,255,255,0.65);
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.home-services .srv-card {
    position: relative;
    background: transparent;
    border-radius: 16px;
    padding: 24px 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.home-services .srv-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 20px rgba(89,198,242,0.15),
        var(--shadow-lg);
    border-color: var(--secondary);
}
.home-services .srv-card-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 16px;
    color: var(--secondary);
    margin-bottom: 16px;
    transition: all 0.3s ease;
}
.home-services .srv-card:hover .srv-card-icon {
    background: var(--secondary);
    color: var(--white);
}
.home-services .srv-card-icon svg { width: 14px; height: 14px; }
.home-services .srv-card h3 {
    font-size: 0.95rem;
    color: var(--white);
    margin-bottom: 8px;
    font-weight: 600;
}
.home-services .srv-card p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.srv-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}
.srv-link svg { transition: all 0.2s ease; }
.srv-link:hover { color: var(--secondary-dark); }
.srv-link:hover svg { transform: translateX(4px); }
.home-services .srv-link {
    color: var(--secondary);
}
.home-services .srv-link:hover {
    color: var(--secondary-light);
}


/* --- Featured Jobs --- */
.home-featured-jobs {
    padding: 80px 0;
    background: var(--white);
    position: relative;
}
.home-featured-jobs .section-header-center h2 {
    color: var(--primary);
}
.home-featured-jobs .section-header-center p {
    color: var(--gray-600);
}
.featured-jobs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.featured-job-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 18px;
    padding: 32px 28px 28px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(31,46,82,0.04);
}
.featured-job-card:hover {
    transform: translateY(-6px);
    border-color: var(--secondary);
    box-shadow:
        0 8px 24px rgba(31,46,82,0.08),
        0 20px 40px rgba(31,46,82,0.06);
}

.home-featured-jobs .jobs-grid {
    grid-template-columns: repeat(4, 1fr);
}
.home-featured-jobs .job-card {
    cursor: pointer;
}
.home-featured-jobs .featured-jobs-cta {
    margin-top: 40px;
    text-align: center;
}
.home-featured-jobs .job-title {
    font-size: 1rem;
}
.home-featured-jobs .job-card-header .job-favorite {
    display: flex;
}

@media (max-width: 768px) {
    .job-card {
        padding: 20px !important;
    }
    .job-card-header .job-favorite {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        background: #F5F7FA !important;
        border: 1px solid #E2E8F0 !important;
        color: #1F2E52 !important;
        border-radius: 50% !important;
    }
    .job-card-header .job-favorite:hover {
        background: #E2E8F0 !important;
    }
    .job-card-header .job-favorite.active {
        background: #FEF2F2 !important;
        border-color: #FECACA !important;
        color: #EF4444 !important;
    }
    .share-logo {
        width: 18px !important;
        height: 18px !important;
    }
    .job-card-header .job-favorite svg {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 768px) {
    .home-featured-jobs { padding: 60px 0; }
    .home-featured-jobs .jobs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .home-featured-jobs .jobs-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Process --- */
.home-process {
    padding: 100px 0;
    background: linear-gradient(160deg, #F5F7FA 0%, var(--off-white) 100%);
    position: relative;
    overflow: hidden;
}
.home-process::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -8%;
    width: 55%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(89,198,242,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.home-process::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 45%;
    height: 55%;
    background: radial-gradient(ellipse, rgba(31,46,82,0.03) 0%, transparent 70%);
    pointer-events: none;
}
.home-process .section-header-center {
    position: relative;
    z-index: 1;
}
.home-process .section-header-center h2 {
    color: var(--primary);
}
.home-process .section-header-center p {
    color: var(--gray-600);
}

/* ======================================================
   ORBIT-RING (process flow)
   ====================================================== */
.orbit-ring {
    position: relative;
    width: 820px;
    height: 760px;
    margin: 0 auto;
}

.orbit-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.orbit-hub {
    position: absolute;
    left: 410px;
    top: 380px;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.orbit-hub:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border-color: var(--secondary);
}

.orbit-hub-icon {
    color: var(--primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(31,46,82,0.06);
    border-radius: 50%;
}

.orbit-hub-icon svg {
    width: 14px;
    height: 14px;
}

.orbit-hub-text {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
}

.orbit {
    position: absolute;
    left: var(--ox);
    top: var(--oy);
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Dot radii for equal card gap */
.orbit-ring > .orbit:nth-child(3) { --r: 32px; }
.orbit-ring > .orbit:nth-child(4) { --r: 28px; }
.orbit-ring > .orbit:nth-child(5) { --r: 25px; }
.orbit-ring > .orbit:nth-child(6) { --r: 22px; }
.orbit-ring > .orbit:nth-child(7) { --r: 19px; }
.orbit-ring > .orbit:nth-child(8) { --r: 17px; }
.orbit-ring > .orbit:nth-child(9) { --r: 15px; }

.orbit-dot {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3b569b;
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 4;
    transition: all 0.3s ease;
}

.orbit:hover .orbit-dot {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* Progressive dot sizes: 01 largest → 07 smallest */
.orbit-ring > .orbit:nth-child(3) .orbit-dot { width: 64px; height: 64px; font-size: 22px; }
.orbit-ring > .orbit:nth-child(4) .orbit-dot { width: 56px; height: 56px; font-size: 18px; }
.orbit-ring > .orbit:nth-child(5) .orbit-dot { width: 50px; height: 50px; font-size: 16px; }
.orbit-ring > .orbit:nth-child(6) .orbit-dot { width: 44px; height: 44px; font-size: 15px; }
.orbit-ring > .orbit:nth-child(7) .orbit-dot { width: 38px; height: 38px; font-size: 13px; }
.orbit-ring > .orbit:nth-child(8) .orbit-dot { width: 34px; height: 34px; font-size: 12px; border-width: 2px; }
.orbit-ring > .orbit:nth-child(9) .orbit-dot { width: 30px; height: 30px; font-size: 11px; border-width: 2px; }

.orbit-card {
    position: absolute;
    background: var(--white);
    border-radius: 16px;
    padding: 18px;
    width: 210px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid var(--gray-100);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

.orbit:hover .orbit-card {
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    border-color: var(--secondary);
    margin-top: -3px;
}

.orbit-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-400);
    margin-bottom: 2px;
}

.orbit-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.orbit-card p {
    font-size: 11.5px;
    color: var(--gray-500);
    line-height: 1.55;
    margin: 0;
}

/* ---------- Card positioning by data-pos (outward from circle) ---------- */
.orbit[data-pos="n"] .orbit-card {
    bottom: calc(var(--r) + 16px);
    left: 50%;
    transform: translateX(-50%);
}

.orbit[data-pos="s"] .orbit-card {
    top: calc(var(--r) + 16px);
    left: 50%;
    transform: translateX(-50%);
}

.orbit[data-pos="e"] .orbit-card {
    left: calc(var(--r) + 16px);
    top: 50%;
    transform: translateY(-50%);
}

.orbit[data-pos="w"] .orbit-card {
    right: calc(var(--r) + 16px);
    top: 50%;
    transform: translateY(-50%);
}

.orbit[data-pos="ne"] .orbit-card {
    bottom: calc((var(--r) + 16px) / 1.414);
    left: calc((var(--r) + 16px) / 1.414);
}

.orbit[data-pos="se"] .orbit-card {
    top: calc((var(--r) + 16px) / 1.414);
    left: calc((var(--r) + 16px) / 1.414);
}

.orbit[data-pos="sw"] .orbit-card {
    top: calc((var(--r) + 16px) / 1.414);
    right: calc((var(--r) + 16px) / 1.414);
}

.orbit[data-pos="nw"] .orbit-card {
    bottom: calc((var(--r) + 16px) / 1.414);
    right: calc((var(--r) + 16px) / 1.414);
}

/* ---------- Responsive orbit ---------- */
@media (max-width: 860px) {
    .orbit-ring {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0;
    }
    .orbit-lines { display: none; }
    .orbit-hub { display: none; }
    .orbit {
        position: static;
        left: auto;
        top: auto;
        transform: none;
    }
    .orbit-dot { display: none; }
    .orbit-card {
        position: static;
        width: 100%;
        transform: none !important;
    }
    .orbit:hover .orbit-card {
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .orbit-ring {
        grid-template-columns: 1fr;
    }
}

/* --- Why Us --- */
.home-why {
    padding: 100px 0;
    background: var(--white);
}

.home-why .section-header-center h2 {
    color: var(--primary);
}

.home-why .section-header-center p {
    color: var(--gray-500);
}

.why-grid-alt {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    max-width: 960px;
    margin: 0 auto;
}

.why-grid-alt > .why-card-alt:nth-child(1),
.why-grid-alt > .why-card-alt:nth-child(2) {
    grid-column: span 3;
}

.why-grid-alt > .why-card-alt-hero {
    grid-column: 2 / 6;
}

.why-grid-alt > .why-card-alt:nth-child(4),
.why-grid-alt > .why-card-alt:nth-child(5) {
    grid-column: span 3;
}

.why-card-alt {
    padding: 28px 26px;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.why-card-alt:hover {
    box-shadow: 0 8px 30px rgba(31,46,82,0.08);
    border-color: var(--secondary);
    transform: translateY(-3px);
}

.why-card-alt-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary);
    letter-spacing: 2px;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.why-card-alt-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.why-card-alt-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(89,198,242,0.1), rgba(89,198,242,0.04));
    border-radius: 16px;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.why-card-alt:hover .why-card-alt-icon {
    background: var(--secondary);
    color: #fff;
}

.why-card-alt-icon svg { width: 14px; height: 14px; }

.why-card-alt-header h3 {
    font-size: 1rem;
    color: var(--primary);
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
    flex: 1;
    padding-top: 2px;
}

.why-card-alt p {
    color: var(--gray-500);
    font-size: 13.5px;
    line-height: 1.75;
    margin: 0;
}

.why-card-alt-hero {
    padding: 32px 30px;
}

.why-card-alt-hero .why-card-alt-num {
    font-size: 12px;
}

.why-card-alt-hero .why-card-alt-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 16px;
}

.why-card-alt-hero .why-card-alt-icon svg {
    width: 14px;
    height: 14px;
}

.why-card-alt-hero .why-card-alt-header h3 {
    font-size: 1.1rem;
}

.why-card-alt-hero p {
    font-size: 14px;
}

@media (max-width: 900px) {
    .why-grid-alt {
        gap: 20px;
    }
    .why-grid-alt > .why-card-alt:nth-child(1),
    .why-grid-alt > .why-card-alt:nth-child(2) {
        grid-column: span 3;
    }
    .why-grid-alt > .why-card-alt-hero {
        grid-column: 1 / -1;
    }
    .why-grid-alt > .why-card-alt:nth-child(4),
    .why-grid-alt > .why-card-alt:nth-child(5) {
        grid-column: span 3;
    }
}

@media (max-width: 700px) {
    .why-grid-alt {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .why-grid-alt > .why-card-alt:nth-child(1),
    .why-grid-alt > .why-card-alt:nth-child(2),
    .why-grid-alt > .why-card-alt-hero,
    .why-grid-alt > .why-card-alt:nth-child(4),
    .why-grid-alt > .why-card-alt:nth-child(5) {
        grid-column: 1 / -1;
    }
    .why-card-alt {
        padding: 22px 20px;
    }
    .why-card-alt-hero {
        padding: 24px 22px;
    }
}

@media (max-width: 640px) {
    .why-grid-alt {
        grid-template-columns: 1fr;
    }
    .why-card-alt {
        padding: 24px 20px;
    }
}

/* --- Processus Section --- */
.home-processus {
    padding: 80px 0;
    background: var(--gray-50);
}

.home-processus .section-header-center h2 {
    color: var(--primary);
}

.home-processus .section-header-center p {
    color: var(--gray-500);
}

.processus-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 780px;
    margin: 0 auto;
    position: relative;
}

.processus-steps::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(to bottom, var(--secondary), var(--primary));
    z-index: 0;
}

.processus-step {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    padding-bottom: 32px;
}

.processus-step:last-child {
    padding-bottom: 0;
}

.processus-step-num {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--secondary);
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.processus-step:hover .processus-step-num {
    background: var(--secondary);
    color: #fff;
    transform: scale(1.06);
}

.processus-step-body {
    flex: 1;
    padding: 12px 0 0;
    min-width: 0;
}

.processus-step-body h3 {
    font-size: 1.05rem;
    color: var(--primary);
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.4;
}

.processus-step-body p {
    color: var(--gray-500);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 640px) {
    .home-processus {
        padding: 60px 0;
    }
    .processus-step {
        gap: 16px;
        padding-bottom: 24px;
    }
    .processus-step-num {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 15px;
    }
    .processus-steps::before {
        left: 20px;
    }
    .processus-step-body h3 {
        font-size: 1rem;
    }
    .processus-step-body p {
        font-size: 13px;
    }
}

/* --- Stats Section --- */
.home-stats {
    padding: 0;
    background: linear-gradient(135deg, #1F2E52 0%, #1F2E52 50%, #1F2E52 100%);
    position: relative;
    overflow: hidden;
}

.home-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(89,198,242,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(89,198,242,0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.home-stats-bg-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2359c6f2' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.home-stats-glow-left {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(89,198,242,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-stats-glow-right {
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-stats-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 10px;
    gap: 0;
}

.home-stats-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 16px;
}

.home-stats-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
    margin-bottom: 10px;
    transition: all 0.4s ease;
    position: relative;
}

.home-stats-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.home-stats-card:hover .home-stats-icon {
    background: rgba(89,198,242,0.15);
    transform: translateY(-3px) scale(1.02);
}

.home-stats-card:hover .home-stats-icon::after {
    opacity: 1;
}

.home-stats-icon svg { width: 14px; height: 14px; }

.home-stats-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #ffffff 60%, rgba(89,198,242,0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-stats-number .counter {
    font-size: 1.6rem;
    font-weight: 800;
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-stats-label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.home-stats-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
    flex-shrink: 0;
}

.home-stats-card:first-child .home-stats-icon {
    background: rgba(89,198,242,0.12);
}

.home-stats-card:last-child .home-stats-icon {
    background: rgba(255,255,255,0.05);
}

/* --- Testimonials --- */
.home-reviews {
    padding: 60px 0 40px;
    background: #F5F7FA;
}
.home-testimonials {
    padding: 140px 0 80px;
    background: #F5F7FA;
    margin-top: 60px;
}
.home-testimonials .section-header-center h2 {
    color: #1f2e52;
    font-weight: 700;
}
.home-testimonials .section-header-center p {
    color: #64748B;
}
.testimonials-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.temo-card {
    background: #ffffff;
    padding: 26px 24px;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.temo-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--secondary);
}
.temo-stars {
    color: #e6a817;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.temo-text {
    font-size: 14px;
    color: #1E293B;
    line-height: 1.7;
    font-style: italic;
    flex: 1;
    margin-bottom: 16px;
}
.temo-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}
.temo-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.temo-info { display: flex; flex-direction: column; gap: 1px; }
.temo-info strong { font-size: 14px; color: #1E293B; font-weight: 700; }
.temo-info span { font-size: 12px; color: #1E293B; }

/* --- Scroll Reviews --- */
.home-scroll-reviews {
    padding: 20px 0 10px;
    background: #F5F7FA;
    overflow: hidden;
    position: relative;
}
.home-scroll-reviews::before,
.home-scroll-reviews::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.home-scroll-reviews::before { left: 0; background: linear-gradient(to right, #F5F7FA, transparent); }
.home-scroll-reviews::after { right: 0; background: linear-gradient(to left, #F5F7FA, transparent); }
.scroll-reviews-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollReviews 30s linear infinite;
}
.scroll-reviews-track:hover {
    animation-play-state: paused;
}
@keyframes scrollReviews {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.scroll-review-card {
    flex: 0 0 300px;
    background: #fff;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.sr-stars { color: #e6a817; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.sr-text { font-size: 13px; color: #1E293B; line-height: 1.65; font-style: italic; flex: 1; margin-bottom: 12px; }
.sr-author { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.sr-avatar { width: 36px; height: 36px; border-radius: 50%; background: #59c6f2; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.sr-info { display: flex; flex-direction: column; gap: 1px; }
.sr-info strong { font-size: 13px; color: #1E293B; font-weight: 700; }
.sr-info span { font-size: 11px; color: #64748B; }

/* --- Final CTA --- */
.home-cta {
    padding: 40px 0;
    background: linear-gradient(160deg, #0f1929 0%, #1F2E52 50%, #0f1929 100%);
    position: relative;
    overflow: hidden;
}

.home-cta-bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.home-cta-bg-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(89,198,242,0.06) 0%, transparent 70%);
}

.cta-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border-radius: 16px;
    padding: 32px 32px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
    max-width: 680px;
    margin: 0 auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(89,198,242,0.1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.cta-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(89,198,242,0.9);
    background: rgba(89,198,242,0.1);
    border: 1px solid rgba(89,198,242,0.15);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}

.cta-card-content h2 {
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 700;
    line-height: 1.35;
}

.cta-card-content p {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 22px;
}

.cta-card-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--secondary);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.cta-btn-primary:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(89,198,242,0.25);
}

.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.cta-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    transform: translateY(-2px);
}
.btn-lg {
    padding: 14px 28px;
    font-size: 14px;
}
.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2px solid rgba(255,255,255,0.25);
    color: var(--white);
    background: transparent;
    font-family: inherit;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hero-switch {
        width: 300px;
        height: 40px;
        margin-bottom: 20px;
    }
    .hero-switch-btn {
        height: 34px;
        font-size: 13px;
    }
    .hero-content-area {
        padding: 60px 30px 0;
    }
    .hero-heading {
        font-size: 38px;
    }
    .hero-description {
        font-size: 16px;
    }
    .hero-search {
        width: 100%;
    }
    .hero-image-wrapper {
        width: 260px;
        height: 310px;
    }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-row { grid-template-columns: 1fr; max-width: 500px; }
    .home-stats-inner { padding: 30px 10px; }
    .home-stats-number { font-size: 1.8rem; }
    .home-stats-number .counter { font-size: 1.8rem; }
    .home-stats-divider { height: 40px; }
    .home-stats-icon { width: 36px; height: 36px; }
    .home-stats-icon svg { width: 14px; height: 14px; }
}
@media (max-width: 768px) {
    .home-hero {
        height: auto;
        min-height: auto;
    }
    .hero-switch {
        width: 90%;
        max-width: 300px;
        height: 38px;
        margin-bottom: 16px;
    }
    .hero-switch-btn {
        height: 32px;
        font-size: 12px;
    }
    .hero-content-area {
        padding: 60px 20px 40px;
    }
    .hero-panels-row {
        flex-direction: column;
        text-align: center;
    }
    .hero-panels {
        max-width: 100%;
        min-height: 300px;
    }
    .hero-text-col {
        max-width: 100%;
    }
    .hero-heading {
        font-size: 30px;
        letter-spacing: -1px;
    }
    .hero-description {
        font-size: 15px;
        margin-top: 16px;
        max-width: 100%;
    }
    .hero-search {
        flex-direction: column;
        height: auto;
        max-width: 100%;
        border-radius: 16px;
        padding: 6px;
        gap: 6px;
        margin-top: 20px;
    }
    .hero-search-field {
        width: 100%;
        height: 38px;
        font-size: 13px;
        padding-left: 10px;
    }
    .hero-search-submit {
        width: 100%;
        height: 38px;
        font-size: 13px;
    }
    .home-services { padding: 60px 0; }
    .services-grid { grid-template-columns: 1fr; }
    .home-process { padding: 60px 0; }
    .home-why { padding: 60px 0; }
    .home-stats-inner { padding: 30px 10px; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .home-stats-card { flex: 0 0 45%; padding: 8px; }
    .home-stats-number { font-size: 1.6rem; }
    .home-stats-number .counter { font-size: 1.6rem; }
    .home-stats-divider { display: none; }
    .home-stats-icon { width: 36px; height: 36px; margin-bottom: 10px; }
    .home-stats-icon svg { width: 14px; height: 14px; }
    .home-testimonials { padding: 60px 0; }
    .testimonials-row { grid-template-columns: 1fr; }
    .home-cta { padding: 36px 0; }
    .cta-card { padding: 24px 20px; }
    .cta-card-content h2 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .hero-switch {
        height: 34px;
    }
    .hero-switch-btn {
        height: 28px;
        font-size: 11px;
    }
    .hero-heading {
        font-size: 26px;
    }
    .hero-description {
        font-size: 14px;
    }
    .home-stats-inner { padding: 30px 10px; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .home-stats-card { flex: 0 0 45%; padding: 8px; }
    .home-stats-divider { display: none; }
    .home-stats-number { font-size: 1.8rem; }
    .home-stats-number .counter { font-size: 1.8rem; }
    .home-stats-icon { width: 36px; height: 36px; margin-bottom: 10px; }
    .home-cta { padding: 28px 0; }
    .cta-card { padding: 20px 16px; }
    .cta-card-content h2 { font-size: 1rem; }
    .cta-card-actions { flex-direction: column; align-items: center; }
}

/* ===== AI CHAT FLOATING BUTTON ===== */
.chat-floating-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #3b569b;
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(59, 86, 155, 0.45), 0 0 0 0 rgba(59, 86, 155, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: chatPulse 2.5s ease-in-out infinite;
}
.chat-floating-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(59, 86, 155, 0.3);
    z-index: -1;
    animation: chatGlow 2.5s ease-in-out infinite alternate;
}
.chat-floating-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 32px rgba(59, 86, 155, 0.55), 0 0 0 6px rgba(59, 86, 155, 0.15);
    animation: none;
}
.chat-floating-btn:active { transform: scale(0.93); }
.chat-floating-btn.hidden { display: none; }
.chat-floating-btn svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }

@keyframes chatPulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(59, 86, 155, 0.45), 0 0 0 0 rgba(59, 86, 155, 0.4); }
    50% { box-shadow: 0 4px 24px rgba(59, 86, 155, 0.45), 0 0 0 10px rgba(59, 86, 155, 0); }
}
@keyframes chatGlow {
    from { opacity: 0.5; transform: scale(1); }
    to { opacity: 1; transform: scale(1.08); }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
#page-conditions .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    align-self: flex-start;
    background: #FFFFFF;
    border-radius: 4px 14px 14px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #3b569b;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-8px); opacity: 1; }
}

/* Reply Preview */
.chat-reply-preview {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #E8F5E9;
    border-top: 1px solid #C8E6C9;
    gap: 8px;
}

.reply-content {
    flex: 1;
    border-left: 3px solid var(--primary);
    padding-left: 10px;
    overflow: hidden;
}

.reply-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.reply-text {
    display: block;
    font-size: 13px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-preview button {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748B;
    padding: 4px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    align-self: flex-start;
    background: #1F2C34;
    border-radius: 4px 14px 14px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #00A884, #008069);
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-8px); opacity: 1; }
}

/* Reply Preview */
.chat-reply-preview {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #1A2830;
    border-top: 1px solid #222D34;
    gap: 8px;
}

.reply-content {
    flex: 1;
    border-left: 3px solid #00A884;
    padding-left: 10px;
    overflow: hidden;
}

.reply-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #00A884;
}

.reply-text {
    display: block;
    font-size: 13px;
    color: #8696A0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-preview button {
    background: none;
    border: none;
    cursor: pointer;
    color: #8696A0;
    padding: 4px;
}

/* WhatsApp Date Separator */
.chat-date-separator {
    display: flex;
    justify-content: center;
    margin: 12px 0 6px;
    clear: both;
}
.chat-date-separator span {
    background: #182229;
    color: #8696A0;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* WhatsApp Encryption Notice */
.chat-encryption-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 6px auto 10px;
    max-width: 380px;
    background: #182229;
    border-radius: 8px;
    font-size: 12px;
    color: #8696A0;
    text-align: center;
    line-height: 1.4;
}
.chat-encryption-notice svg {
    flex-shrink: 0;
    color: #F5C518;
}
.chat-encryption-notice strong {
    color: #53BDEB;
    font-weight: 600;
    cursor: pointer;
}

/* Message Context Menu */
.message-context-menu {
    position: absolute;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1000;
    min-width: 150px;
}

.message-context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--gray-700);
    transition: var(--transition);
}

.message-context-menu button:hover {
    background: var(--gray-100);
}

.message-context-menu button.danger {
    color: #EF4444;
}

/* Search Highlight */
.panel-message.highlight {
    background: #FEF3C7 !important;
    border: 1px solid #F59E0B !important;
}

/* ===== EMOJI PICKER ===== */
.emoji-picker-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 8px;
    width: 320px;
    max-width: calc(100% - 16px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 100;
    overflow: hidden;
    margin-bottom: 8px;
}

.emoji-picker-popup.active {
    display: block;
    animation: fadeUpSmall 0.2s ease;
}

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

.emoji-picker-header {
    display: flex;
    gap: 2px;
    padding: 8px;
    border-bottom: 1px solid #E2E8F0;
    background: #F5F7FA;
}

.emoji-cat {
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s;
    text-align: center;
    background: none;
    border: none;
}

.emoji-cat:hover { background: rgba(0,0,0,0.05); }
.emoji-cat.active { background: rgba(59,130,246,0.1); }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-grid span {
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    text-align: center;
    transition: background 0.1s;
    line-height: 1;
}

.emoji-grid span:hover { background: #F5F7FA; transform: scale(1.15); }
.emoji-grid::-webkit-scrollbar { width: 4px; }
.emoji-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 16px; }

.panel-emoji-picker { bottom: auto; top: 100%; left: 8px; margin-bottom: 0; margin-top: 8px; }

/* ===== ATTACHMENT MENU ===== */
.attach-menu-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 52px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 100;
    overflow: hidden;
    min-width: 180px;
    margin-bottom: 8px;
}

.attach-menu-popup.active { display: block; animation: fadeUp 0.2s ease; }

.attach-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: #1E293B;
    transition: background 0.15s;
    text-align: left;
}

.attach-option:hover { background: #F5F7FA; }
.attach-option svg { color: var(--primary); }
.panel-attach-menu { bottom: auto; top: 100%; left: 52px; margin-bottom: 0; margin-top: 8px; }

/* ===== VOICE MESSAGE ===== */
.voice-message { display: flex; align-items: center; gap: 8px; min-width: 180px; }

.voice-message .play-btn {
    width: 32px; height: 32px; background: var(--primary); color: #fff;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background 0.2s, transform 0.1s;
}
.voice-message .play-btn:hover { background: var(--primary-light); transform: scale(1.1); }
.voice-message .play-btn:active { transform: scale(0.95); }
.voice-message.playing .waveform span { transition: background 0.15s; }

.voice-message .waveform { display: flex; align-items: center; gap: 2px; flex: 1; height: 24px; }
.voice-message .waveform span { width: 3px; background: var(--primary); border-radius: 16px; opacity: 0.5; min-height: 4px; }
.voice-message .duration { font-size: 11px; color: rgba(0,0,0,0.5); white-space: nowrap; }

/* ===== IMAGE & FILE ATTACHMENTS ===== */
.image-attachment { max-width: 100%; border-radius: 8px; margin-bottom: 4px; cursor: pointer; display: block; max-height: 250px; object-fit: cover; }

.file-attachment { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(0,0,0,0.04); border-radius: 8px; margin-bottom: 4px; }
.file-attachment svg { flex-shrink: 0; color: var(--primary); }
.file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-name { font-size: 13px; font-weight: 500; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size { font-size: 11px; color: #64748B; }

/* ===== MESSAGE REACTIONS ===== */
.message-reaction {
    position: absolute; bottom: -10px; left: 8px;
    background: #fff; border-radius: 16px; padding: 1px 5px;
    font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 2px; z-index: 5; line-height: 1.2;
}
.message-reaction .reaction-count { font-size: 10px; color: #64748B; }

.reaction-picker {
    display: none; position: absolute;
    background: #fff; border-radius: 24px; padding: 4px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 50; gap: 2px;
}
.reaction-picker.active { display: flex; animation: fadeUp 0.15s ease; }
.reaction-picker span { font-size: 24px; cursor: pointer; padding: 4px; border-radius: 50%; transition: transform 0.15s; }
.reaction-picker span:hover { transform: scale(1.3); background: #F5F7FA; }

/* ===== EDIT MESSAGE ===== */
.message-edit-area { display: flex; flex-direction: column; gap: 4px; }
.message-edit-area textarea { width: 100%; border: none; border-radius: 8px; padding: 6px 8px; font-family: inherit; font-size: 14px; resize: none; outline: none; background: rgba(0,0,0,0.06); min-height: 36px; color: #1E293B; }
.message-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.message-edit-actions button { padding: 4px 12px; border: none; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; }
.message-edit-actions .edit-confirm { background: var(--primary); color: #fff; }
.message-edit-actions .edit-cancel { background: rgba(0,0,0,0.08); color: #1E293B; }
.message-edited-tag { font-size: 10px; color: rgba(0,0,0,0.35); font-style: italic; margin-left: 4px; }
.message-deleted { font-style: italic; color: rgba(0,0,0,0.4); font-size: 13px; }

/* ===== DATE SEPARATOR ===== */
.chat-date-separator { display: flex; justify-content: center; margin: 12px 0 6px; clear: both; }
.chat-date-separator span { background: #E1F2FB; color: #5A6C7D; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 8px; white-space: nowrap; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }

/* ===== ENCRYPTION NOTICE ===== */
.chat-encryption-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 6px auto 10px;
    max-width: 380px;
    background: #FFF8E1;
    border-radius: 8px;
    font-size: 12px;
    color: #5A6C7D;
    text-align: center;
    line-height: 1.4;
}
.chat-encryption-notice svg { flex-shrink: 0; color: #F5A623; }
.chat-encryption-notice strong { color: var(--primary); font-weight: 600; cursor: pointer; }

/* ===== SEARCH BAR ===== */
.chat-search-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: #F0F0F0; border-bottom: 1px solid #E2E8F0; }
.chat-search-bar.active { display: flex; }
.chat-search-bar input { flex: 1; border: none; border-radius: 20px; padding: 8px 14px; font-family: inherit; font-size: 14px; outline: none; background: #fff; color: #1E293B; }
.chat-search-bar input::placeholder { color: #64748B; }
.chat-search-bar .search-count { font-size: 12px; color: #64748B; white-space: nowrap; min-width: 40px; text-align: center; }
.chat-search-bar button { background: none; border: none; cursor: pointer; color: #64748B; padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.chat-search-bar button:hover { background: rgba(0,0,0,0.05); }
.panel-message.search-highlight { outline: 2px solid var(--primary); border-radius: 8px; background: rgba(59,130,246,0.08) !important; }
.panel-message.search-active { outline: 3px solid var(--primary); background: rgba(59,130,246,0.15) !important; }

/* ===== UNREAD BADGE ===== */
.conversation-badge { background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.conv-mute-icon { color: #64748B; margin-left: 4px; display: inline-flex; vertical-align: middle; }

/* ===== STARRED MESSAGE ===== */
.message-starred { color: #F59E0B; font-size: 12px; margin-right: 4px; }

/* ===== LINK PREVIEW ===== */
.link-preview { background: rgba(0,0,0,0.04); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; border-left: 3px solid var(--primary); cursor: pointer; }
.link-preview-domain { font-size: 11px; color: var(--primary); font-weight: 600; margin-bottom: 2px; text-transform: uppercase; }
.link-preview-text { font-size: 13px; color: #1E293B; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===== SCROLL TO BOTTOM ===== */
.scroll-to-bottom {
    position: absolute; bottom: 80px; right: 20px;
    width: 40px; height: 40px;
    background: #3b569b;
    border: none; border-radius: 50%;
    box-shadow: 0 3px 12px rgba(59, 86, 155, 0.35);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; color: #fff; transition: all 0.2s;
}
.scroll-to-bottom:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(59, 86, 155, 0.5); }
.scroll-to-bottom.visible { display: flex; animation: fadeUp 0.2s ease; }
.scroll-to-bottom .badge { position: absolute; top: -4px; right: -4px; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); }

/* ===== HEADER DROPDOWN MENU ===== */
.chat-dropdown-menu { display: none; position: absolute; top: 100%; right: 8px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 200; min-width: 200px; overflow: hidden; }
.chat-dropdown-menu.active { display: block; animation: fadeUp 0.15s ease; }
.chat-dropdown-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: #1E293B; transition: background 0.15s; text-align: left; }
.chat-dropdown-menu button:hover { background: #F5F7FA; }
.chat-dropdown-menu button.danger { color: #EF4444; }
.chat-dropdown-menu button svg { flex-shrink: 0; }

/* ===== FORWARD MODAL ===== */
.forward-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 20000; align-items: center; justify-content: center; }
.forward-modal-overlay.active { display: flex; }
.forward-modal { background: #fff; border-radius: 12px; width: 340px; max-width: 90vw; max-height: 400px; overflow: hidden; display: flex; flex-direction: column; }
.forward-modal-header { padding: 16px; border-bottom: 1px solid #E2E8F0; font-size: 16px; font-weight: 600; color: #1E293B; }
.forward-modal-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.forward-modal-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.15s; }
.forward-modal-item:hover { background: #F5F7FA; }
.forward-modal-item .conv-name { font-size: 14px; color: #1E293B; }

/* ===== SEARCH BAR (Dark) ===== */
.chat-search-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: #1F2C34; border-bottom: 1px solid #222D34; }
.chat-search-bar.active { display: flex; }
.chat-search-bar input { flex: 1; border: none; border-radius: 20px; padding: 8px 14px; font-family: inherit; font-size: 14px; outline: none; background: #2A3942; color: #D1D7DB; }
.chat-search-bar input::placeholder { color: #8696A0; }
.chat-search-bar .search-count { font-size: 12px; color: #8696A0; white-space: nowrap; min-width: 40px; text-align: center; }
.chat-search-bar button { background: none; border: none; cursor: pointer; color: #8696A0; padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.chat-search-bar button:hover { background: rgba(255,255,255,0.08); }
.panel-message.search-highlight { outline: 2px solid #00A884; border-radius: 8px; background: rgba(0,168,132,0.1) !important; }
.panel-message.search-active { outline: 3px solid #00A884; background: rgba(0,168,132,0.2) !important; }

/* ===== UNREAD BADGE ===== */
.conversation-badge { background: #00A884; color: #111B21; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.conv-mute-icon { color: #8696A0; margin-left: 4px; display: inline-flex; vertical-align: middle; }

/* ===== STARRED MESSAGE ===== */
.message-starred { color: #F5C518; font-size: 12px; margin-right: 4px; }

/* ===== LINK PREVIEW (Dark) ===== */
.link-preview { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; border-left: 3px solid #00A884; cursor: pointer; }
.link-preview-domain { font-size: 11px; color: #00A884; font-weight: 600; margin-bottom: 2px; text-transform: uppercase; }
.link-preview-text { font-size: 13px; color: #E9EDEF; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===== SCROLL TO BOTTOM (Dark) ===== */
.scroll-to-bottom {
    position: absolute; bottom: 80px; right: 20px;
    width: 36px; height: 36px; background: #1F2C34; border: none; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; color: #AEBAC1; transition: opacity 0.2s;
    border: 1px solid #222D34;
}
.scroll-to-bottom.visible { display: flex; animation: fadeUp 0.2s ease; }
.scroll-to-bottom .badge { position: absolute; top: -4px; right: -4px; background: #00A884; color: #111B21; font-size: 10px; min-width: 16px; height: 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ===== HEADER DROPDOWN MENU (Dark) ===== */
.chat-dropdown-menu { display: none; position: absolute; top: 100%; right: 8px; background: #1F2C34; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 200; min-width: 200px; overflow: hidden; border: 1px solid #222D34; }
.chat-dropdown-menu.active { display: block; animation: fadeUp 0.15s ease; }
.chat-dropdown-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: #E9EDEF; transition: background 0.15s; text-align: left; }
.chat-dropdown-menu button:hover { background: rgba(255,255,255,0.08); }
.chat-dropdown-menu button.danger { color: #EF4444; }
.chat-dropdown-menu button svg { flex-shrink: 0; }

/* ===== FORWARD MODAL (Dark) ===== */
.forward-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 20000; align-items: center; justify-content: center; }
.forward-modal-overlay.active { display: flex; }
.forward-modal { background: #1F2C34; border-radius: 12px; width: 340px; max-width: 90vw; max-height: 400px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #222D34; }
.forward-modal-header { padding: 16px; border-bottom: 1px solid #222D34; font-size: 16px; font-weight: 600; color: #E9EDEF; }
.forward-modal-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.forward-modal-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.15s; }
.forward-modal-item:hover { background: rgba(255,255,255,0.08); }
.forward-modal-item .conv-name { font-size: 14px; color: #E9EDEF; }

/* ===== ACCOUNT PAGE ===== */
.account-section {
    padding: 40px 0 80px;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--gray-50) 100%);
    position: relative;
}

.account-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-light), transparent);
    opacity: 0.3;
}

.account-layout {
    display: flex;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Sidebar */
.account-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: sticky;
    top: 90px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(27, 42, 74, 0.06);
    transition: box-shadow 0.3s ease;
}

.account-sidebar:hover {
    box-shadow: 0 8px 30px rgba(27, 42, 74, 0.1);
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    position: relative;
}

.sidebar-profile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

.sidebar-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

.sidebar-profile-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--white);
    line-height: 1.3;
}

.sidebar-profile-info p {
    font-size: 12px;
    opacity: 0.75;
    margin: 2px 0 0;
    color: var(--white);
}

.sidebar-nav {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: none;
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    width: 100%;
    position: relative;
}

.sidebar-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.sidebar-link:hover svg {
    transform: scale(1.1);
}

.sidebar-link:hover {
    background: var(--gray-50);
    color: var(--primary);
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.06), rgba(89, 198, 242, 0.06));
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--secondary);
}

.sidebar-link.active svg {
    color: var(--secondary);
}

.sidebar-badge {
    margin-left: auto;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 16px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(89, 198, 242, 0.3);
}

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--gray-100);
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #DC2626;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
}

.sidebar-logout:hover {
    background: #FEF2F2;
    color: #B91C1C;
}

.sidebar-logout svg {
    transition: transform 0.25s ease;
}

.sidebar-logout:hover svg {
    transform: translateX(3px);
}

/* Main Content */
.account-main {
    flex: 1;
    min-width: 0;
}

.account-content {
    display: none;
}

.account-content.active {
    display: block;
    animation: accountFadeUp 0.4s ease;
}

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

.account-content.active .account-card {
    animation: cardStagger 0.5s ease both;
}

.account-content.active .account-card:nth-child(1) { animation-delay: 0s; }
.account-content.active .account-card:nth-child(2) { animation-delay: 0.08s; }
.account-content.active .account-card:nth-child(3) { animation-delay: 0.16s; }

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

.account-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(27, 42, 74, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.account-card:hover {
    box-shadow: 0 8px 25px rgba(27, 42, 74, 0.07);
}

.account-card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gray-100);
    position: relative;
}

.account-card-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary), var(--secondary-light));
    border-radius: 16px;
}

.account-card-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.account-card-header p {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0;
}

/* Account section toolbars (WhatsApp-style search + date period) */
.acct-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.acct-wa-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F5F7FA;
    border-radius: 22px;
    padding: 8px 14px;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    transition: background 0.15s;
}

.acct-wa-search:focus-within {
    background: #E2E8F0;
}

.acct-wa-search svg {
    color: #64748B;
    flex-shrink: 0;
}

.acct-wa-search input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--gray-800);
    font-family: inherit;
}

.acct-wa-search input::placeholder {
    color: #64748B;
}

.acct-wa-search .wa-search-clear {
    display: none;
}

.acct-toolbar .wa-search-clear {
    border: none;
    background: #64748B;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    cursor: pointer;
    padding: 0;
    text-align: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.acct-toolbar .wa-search-clear:hover {
    background: #64748B;
}

.acct-toolbar .wa-search-clear.show {
    display: block;
}

.acct-date-select {
    border: 1px solid var(--gray-200);
    border-radius: 22px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
    outline: none;
    font-family: inherit;
    flex-shrink: 0;
}

.acct-date-select:focus {
    border-color: var(--secondary);
}

.acct-custom-dates {
    display: none;
    align-items: center;
    gap: 8px;
}

.acct-custom-dates.show {
    display: flex;
}

.acct-custom-dates input[type="date"] {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--gray-700);
    outline: none;
    font-family: inherit;
    background: var(--white);
}

.acct-custom-dates input[type="date"]:focus {
    border-color: var(--secondary);
}

.acct-custom-dates span {
    font-size: 12px;
    color: var(--gray-500);
}

.account-form {
    text-align: left;
}

/* Avatar Section */
.account-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: linear-gradient(135deg, var(--gray-50), var(--off-white));
    border-radius: 16px;
    border: 1px solid var(--gray-100);
}

.avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(27, 42, 74, 0.2);
}

.avatar-initials {
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
}

.avatar-edit-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avatar-edit-info strong {
    font-size: 16px;
    color: var(--gray-800);
}

.avatar-edit-info span {
    font-size: 13px;
    color: var(--gray-500);
}

/* Form Actions */
.form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-actions .btn {
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.form-actions .btn:active {
    transform: scale(0.97);
}

.form-actions .btn-primary {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--white);
    border: none;
    box-shadow: 0 4px 14px rgba(89, 198, 242, 0.3);
}

.form-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(89, 198, 242, 0.4);
}

/* Notification Options */
.notification-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--gray-50);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.notification-option:hover {
    background: var(--white);
    border-color: var(--gray-200);
    box-shadow: 0 4px 12px rgba(27, 42, 74, 0.06);
    transform: translateY(-1px);
}

.notification-option:has(input:checked) {
    background: rgba(89, 198, 242, 0.05);
    border-color: rgba(89, 198, 242, 0.2);
}

.notification-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 16px;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.06), rgba(89, 198, 242, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.notification-option:hover .notification-icon {
    transform: scale(1.05);
}

.notification-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.notification-info strong {
    font-size: 14px;
    color: var(--gray-800);
    font-weight: 600;
}

.notification-info span {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.3;
}

/* Applications List */
.applications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--gray-500);
}

.empty-state svg {
    margin-bottom: 20px;
    opacity: 0.25;
    color: var(--gray-400);
    width: 56px;
    height: 56px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.empty-state p {
    margin-bottom: 24px;
    font-size: 15px;
    color: var(--gray-500);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.application-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--gray-50);
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    transition: all 0.25s ease;
}

.application-item:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 15px rgba(27, 42, 74, 0.06);
    transform: translateY(-1px);
}

.application-info {
    flex: 1;
}

.application-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.application-info p {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.application-status {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-pending {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E;
}

.status-review {
    background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
    color: #1E40AF;
}

.status-accepted {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: #065F46;
}

.status-rejected {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    color: #991B1B;
}

/* Favorites List */
.favorites-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--gray-50);
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    transition: all 0.25s ease;
}

.favorite-item:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 15px rgba(27, 42, 74, 0.06);
    transform: translateY(-1px);
}

.favorite-info {
    flex: 1;
    cursor: pointer;
}

.favorite-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.favorite-info p {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.favorite-actions {
    display: flex;
    gap: 8px;
}

.favorite-actions button {
    padding: 7px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    font-family: inherit;
}

.favorite-remove {
    background: #FEE2E2;
    color: #DC2626;
}

.favorite-remove:hover {
    background: #FECACA;
    transform: translateY(-1px);
}

.favorite-apply {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--white);
    box-shadow: 0 2px 8px rgba(89, 198, 242, 0.3);
}

.favorite-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(89, 198, 242, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .account-layout {
        flex-direction: column;
    }
    
    .account-sidebar {
        position: relative;
        width: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        overflow: visible;
        top: auto;
    }

    .account-sidebar .sidebar-toggle {
        margin-top: 0;
    }

    .account-sidebar .sidebar-popover {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 1000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 64px 16px 24px;
        overflow-y: auto;
    }

    .account-sidebar.nav-open .sidebar-popover {
        display: flex;
        animation: sidebarFade 0.2s ease;
    }

    .account-sidebar .sidebar-card {
        background: var(--white);
        border-radius: 18px;
        width: 100%;
        max-width: 340px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: sidebarPop 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
    }

    @keyframes sidebarPop {
        from { opacity: 0; transform: translateY(-12px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes sidebarFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .account-sidebar .sidebar-popover .sidebar-profile {
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid var(--gray-100);
        padding: 18px;
    }

    .account-sidebar .sidebar-popover .sidebar-nav {
        flex-direction: column;
        overflow-x: visible;
        width: 100%;
        padding: 8px;
        gap: 2px;
    }

    .account-sidebar .sidebar-popover .sidebar-link {
        white-space: normal;
        padding: 12px 14px;
        font-size: 14px;
        flex-shrink: 1;
    }

    .account-sidebar .sidebar-popover .sidebar-link.active {
        box-shadow: inset 3px 0 0 var(--primary);
        border-bottom: none;
        border-radius: 10px;
    }

    .account-sidebar .sidebar-popover .sidebar-footer {
        width: 100%;
        border-top: 1px solid var(--gray-100);
        border-left: none;
    }
}

@media (max-width: 768px) {
    .account-card {
        padding: 20px;
    }
    
    .account-avatar-section {
        flex-direction: column;
        text-align: center;
    }
    
    .avatar-edit-info {
        align-items: center;
    }
    
    .favorite-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .favorite-actions {
        width: 100%;
    }
    
    .favorite-actions button {
        flex: 1;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .profile-avatar-section {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-info {
        align-items: center;
    }

    .skills-input-row {
        flex-direction: column;
    }
}

/* ===== MESSAGES TAB ===== */
/* ===== MESSAGES CARD ===== */
.messages-card {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.08);
    border-radius: 20px;
    max-width: 960px;
    margin: 20px auto;
    background: #fff;
}

.messages-layout {
    display: flex;
    height: 540px;
    min-height: 0;
    overflow: hidden;
}

/* Conversations Panel */
.conversations-panel {
    width: 310px;
    border-right: 1px solid #E8ECF0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    overflow: hidden;
}

.conversations-header {
    padding: 18px 18px 14px;
    background: #3b569b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.conversations-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.conversations-list::-webkit-scrollbar { width: 4px; }
.conversations-list::-webkit-scrollbar-thumb { background: rgba(59,86,155,0.2); border-radius: 16px; }
.conversations-list::-webkit-scrollbar-thumb:hover { background: rgba(59,86,155,0.4); }

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 2px 8px;
    border-radius: 14px;
    position: relative;
}

.conversation-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 4px 4px 0;
    background: #3b569b;
    transition: transform 0.2s ease;
}

.conversation-item:hover {
    background: rgba(59, 86, 155, 0.06);
}
.conversation-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}
.conversation-item.active {
    background: rgba(59, 86, 155, 0.1);
}
.conversation-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

.conversation-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #3b569b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(59, 86, 155, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.conversation-item:hover .conversation-avatar {
    transform: scale(1.05);
    box-shadow: 0 3px 12px rgba(59, 86, 155, 0.4);
}

.conversation-item.active .conversation-avatar {
    background: #2d4373;
    box-shadow: 0 3px 12px rgba(59, 86, 155, 0.5);
}

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

.conversation-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-info p {
    font-size: 12px;
    color: #64748B;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.conversation-time { font-size: 11px; color: #94A3B8; font-weight: 500; }
.conversation-unread {
    width: 20px; height: 20px; border-radius: 50%;
    background: #3b569b;
    color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(59, 86, 155, 0.4);
}

/* Chat Panel */
.chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #FFFFFF;
    height: 100%;
    overflow: hidden;
}

.chat-panel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    gap: 12px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
}

.chat-panel-empty svg {
    opacity: 0.3;
    transform: scale(1.2);
}

.chat-panel-empty p { font-size: 15px; font-weight: 500; margin: 0; color: #64748B; }

.chat-panel-active { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; }

/* Panel Header — fixe en haut, ne bouge jamais */
.chat-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #3b569b;
    min-height: 56px;
    flex: 0 0 auto;
    flex-shrink: 0;
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(59, 86, 155, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    order: -1;
}

.chat-panel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-panel-info > div:last-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.chat-panel-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chat-panel-header h4 { font-size: 15px; font-weight: 600; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.1); display: inline; }
.chat-panel-subtitle {
    font-size: 11px; color: rgba(255,255,255,0.85); margin: 0;
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 8px;
}
.chat-panel-subtitle::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
    animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
    50% { opacity: 0.7; box-shadow: 0 0 10px rgba(74, 222, 128, 0.8); }
}

.chat-panel-delete {
    background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.chat-panel-delete:hover { background: rgba(255,255,255,0.15); color: #fff; transform: scale(1.05); }

/* Panel Messages */
.chat-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    background-color: #E8DFD5;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23D5CCC0' fill-opacity='0.5'/%3E%3Ccircle cx='12' cy='12' r='0.8' fill='%23D5CCC0' fill-opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23p)'/%3E%3C/svg%3E");
}

.chat-panel-messages::-webkit-scrollbar { width: 5px; }
.chat-panel-messages::-webkit-scrollbar-track { background: transparent; }
.chat-panel-messages::-webkit-scrollbar-thumb { background: rgba(59,86,155,0.2); border-radius: 16px; }
.chat-panel-messages::-webkit-scrollbar-thumb:hover { background: rgba(59,86,155,0.35); }

/* Panel Messages Bubbles */
.panel-message {
    max-width: 72%;
    padding: 8px 12px 6px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
    position: relative;
    animation: msgAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes msgAppear {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.panel-message.received {
    align-self: flex-start;
    background: #FFFFFF;
    color: #1E293B;
    border-radius: 4px 14px 14px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.panel-message.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, #D4E9F7 0%, #BFDBF7 100%);
    color: #0F172A;
    border-radius: 14px 4px 14px 14px;
    box-shadow: 0 1px 4px rgba(0, 119, 182, 0.12);
}

.panel-message-time,
.panel-message .chat-message-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    float: right;
    margin: 4px 0 -4px 8px;
    line-height: 1;
    white-space: nowrap;
    color: rgba(0,0,0,0.35);
}

/* Panel Input Area */
.chat-panel-input {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 12px 14px;
    background: #fff;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
}

.chat-panel-input textarea {
    flex: 1;
    border: 2px solid #E2E8F0;
    border-radius: 22px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13.5px;
    resize: none;
    outline: none;
    background: #fff;
    max-height: 60px;
    line-height: 1.35;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1E293B;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.chat-panel-input textarea::placeholder { color: #94A3B8; }
.chat-panel-input textarea:focus {
    border-color: #3b569b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 86, 155, 0.12), 0 1px 4px rgba(0,0,0,0.04);
    outline: none;
}

.chat-panel-send {
    width: 38px; height: 38px;
    background: #3b569b;
    color: #fff;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 86, 155, 0.3);
}
.chat-panel-send:hover {
    background: #2d4373;
    box-shadow: 0 3px 12px rgba(59, 86, 155, 0.45);
    transform: scale(1.08);
}
.chat-panel-send:active { transform: scale(0.92); }

.chat-mic-btn {
    width: 38px; height: 38px;
    background: #3b569b;
    color: #fff;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 86, 155, 0.3);
}
.chat-mic-btn:hover {
    background: #2d4373;
    box-shadow: 0 3px 12px rgba(59, 86, 155, 0.45);
    transform: scale(1.08);
}
.chat-mic-btn:active { transform: scale(0.92); }
.chat-mic-btn.recording {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: recordingPulse 1s ease-in-out infinite;
}
@keyframes recordingPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 2px 16px rgba(239, 68, 68, 0.6); }
}

.chat-back-btn {
    width: 28px; height: 28px;
    background: none;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    padding: 0;
}
.chat-back-btn:hover {
    transform: scale(1.15);
    opacity: 0.8;
}
.chat-back-btn:active { transform: scale(0.9); }

/* Empty state small */
.empty-state-sm {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px; color: #94A3B8; text-align: center; gap: 10px;
}
.empty-state-sm svg { opacity: 0.35; }
.empty-state-sm p { font-size: 14px; font-weight: 500; margin: 0; color: #64748B; }
.empty-state-sm span { font-size: 12px; color: #94A3B8; }

/* Responsive messages */
@media (max-width: 768px) {
    .messages-card {
        border-radius: 0;
        margin: 0;
        background: #fff;
    }

    .messages-layout {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        position: relative;
    }

    .conversations-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
        min-height: 100vh;
        background: #F5F7FA;
    }

    .chat-panel {
        display: none;
    }

    .chat-back-btn {
        display: none;
    }

    #page-compte .page-hero,
    #page-employeur .page-hero {
        padding-bottom: 0 !important;
    }
    #page-compte .account-section,
    #page-employeur .account-section {
        padding-top: 0 !important;
    }

    body.conversation-open .page-hero,
    body.conversation-open #header,
    body.conversation-open .mobile-bottom-nav,
    body.conversation-open .chat-floating-btn,
    body.conversation-open .footer,
    body.conversation-open .account-sidebar,
    body.conversation-open .messages-tabs,
    body.conversation-open .messages-card > .acct-toolbar,
    body.conversation-open .messages-tab-content > .acct-toolbar {
        display: none !important;
    }

    body.conversation-open .page,
    body.conversation-open .account-section,
    body.conversation-open .account-section > .container,
    body.conversation-open .account-layout,
    body.conversation-open .account-main,
    body.conversation-open .account-content,
    body.conversation-open .messages-card,
    body.conversation-open .messages-tab-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.conversation-open {
        padding-bottom: 0 !important;
        background: #ECE5DD !important;
        overflow: hidden !important;
    }

    body.conversation-open .page {
        background: #ECE5DD !important;
        overflow: hidden !important;
    }

    body.conversation-open .account-section {
        background: #ECE5DD !important;
    }
    body.conversation-open .account-section::before { display: none !important; }

    body.conversation-open .messages-card {
        background: #ECE5DD !important;
    }

    body.conversation-open .messages-layout {
        display: block !important;
        overflow: visible !important;
    }

    body.conversation-open .conversations-panel { display: none !important; }

    body.conversation-open .chat-panel {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        z-index: 99999 !important;
        border-radius: 0 !important;
        background: #ECE5DD !important;
        overflow: visible !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.conversation-open .chat-panel-empty {
        display: none !important;
    }

    body.conversation-open .chat-panel-active {
        display: flex !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        flex-direction: column !important;
    }

    body.conversation-open .chat-panel-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 100001 !important;
        flex: none !important;
        min-height: 56px !important;
    }

    body.conversation-open .chat-panel-messages {
        position: fixed !important;
        top: 56px !important;
        bottom: 56px !important;
        left: 0 !important;
        right: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        background-color: #ECE5DD;
        z-index: 100000 !important;
    }

    body.conversation-open .chat-panel-input {
        flex-shrink: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-top: 6px;
        padding-bottom: 12px;
        background: #ECE5DD !important;
        border-top: none;
        box-sizing: border-box !important;
        z-index: 100001 !important;
    }

    body.conversation-open .chat-back-btn { display: flex; }

    body.conversation-open .chat-input-area {
        flex-shrink: 0;
    }

    .chat-input-container {
        background: transparent;
        border: none;
    }

    .chat-header-actions .chat-header-btn:not(.chat-close-desktop) {
        display: none;
    }
    .chat-header-actions .chat-header-btn:last-child {
        display: flex;
    }
}

/* Employer Messages light */
@media (max-width: 768px) {
    #page-employeur.employer-messages-active .account-sidebar { display: none !important; }
    #page-employeur.employer-messages-active .account-section { padding-top: 96px !important; }
    #page-employeur.employer-messages-active .account-layout { gap: 0 !important; }
    #page-employeur.employer-messages-active .account-main { width: 100%; }
    #page-employeur.employer-messages-active .messages-card {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
        background: #fff !important;
    }
    #page-employeur.employer-messages-active .conversations-panel {
        background: #F5F7FA !important;
        border-right: 1px solid #E2E8F0 !important;
    }
    #page-employeur.employer-messages-active .chat-panel { background: #fff !important; }
}

/* ===== EMPLOYER DASHBOARD STATS ===== */
.employer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.stat-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 2px 8px rgba(89, 198, 242, 0.1);
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--white);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 500;
}

/* Employer job list items */
.job-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    margin-bottom: 10px;
    transition: var(--transition);
}

.job-list-item:hover {
    border-color: var(--secondary);
    box-shadow: 0 2px 8px rgba(89, 198, 242, 0.08);
}

.job-list-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-list-info strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
}

.job-list-info span {
    font-size: 13px;
    color: var(--gray-500);
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.badge.active {
    background: #D1FAE5;
    color: #065F46;
}

.badge.closed {
    background: #FEE2E2;
    color: #991B1B;
}

.badge.pending {
    background: #FEF3C7;
    color: #92400E;
}

/* Activity feed */
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

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

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gray-100);
    color: var(--primary);
}

.activity-content {
    flex: 1;
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.4;
}

.activity-time {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
}

/* Candidature list */
.candidature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    margin-bottom: 10px;
    transition: var(--transition);
}

.candidature-item:hover {
    border-color: var(--secondary);
}

.candidature-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.candidature-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.candidature-info strong {
    font-size: 14px;
    color: var(--gray-800);
}

.candidature-job {
    font-size: 13px;
    color: var(--gray-500);
}

.candidature-date {
    font-size: 12px;
    color: var(--gray-400);
    white-space: nowrap;
}

.candidature-actions {
    display: flex;
    gap: 6px;
}

.candidature-actions button {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition-fast);
}

/* Employer profile form */
.employer-profile-section {
    margin-bottom: 24px;
}

.employer-profile-section h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.employer-profile-section h4 svg {
    width: 18px;
    height: 18px;
    stroke: var(--secondary);
}

@media (max-width: 768px) {
    .employer-stats {
        grid-template-columns: 1fr;
    }
    
    .job-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===== NEW JOB MODAL ===== */
.new-job-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-box {
    background: var(--white);
    border-radius: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.3s ease;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 16px;
    color: var(--gray-500);
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.modal-box .account-form {
    padding: 24px 28px;
}

/* ===== NOTIFICATION TOAST ===== */
.notification-toast {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    min-width: 320px;
    max-width: 420px;
    animation: notifSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
    font-family: 'Poppins', sans-serif;
}

.notification-toast.notif-exit {
    animation: notifSlideOut 0.3s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
}

.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-success .notif-icon {
    background: #ECFDF5;
    color: #059669;
}

.notification-error .notif-icon {
    background: #FEF2F2;
    color: #DC2626;
}

.notification-info .notif-icon {
    background: #F5F7FA;
    color: #2563EB;
}

.notif-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.notif-message {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    line-height: 1.4;
    word-wrap: break-word;
}

.notif-progress {
    height: 3px;
    border-radius: 16px;
    background: var(--gray-100);
    overflow: hidden;
}

.notif-progress::after {
    content: '';
    display: block;
    height: 100%;
    border-radius: 16px;
    animation: notifProgress 3.5s linear forwards;
}

.notification-success .notif-progress::after {
    background: #059669;
}

.notification-error .notif-progress::after {
    background: #DC2626;
}

.notification-info .notif-progress::after {
    background: #2563EB;
}

.notif-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 16px;
    color: var(--gray-400);
    transition: var(--transition);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

@keyframes notifSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes notifSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

@keyframes notifProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@media (max-width: 480px) {
    .notification-toast {
        top: auto;
        bottom: 24px;
        right: 16px;
        left: 16px;
        min-width: auto;
        max-width: none;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== CONTRACT SIGNATURE PAGE ===== */
.contract-signature-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}
.contract-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.contract-signature-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 768px) {
    .contract-signature-layout {
        grid-template-columns: 1fr;
    }
}
.contract-view h3,
.signature-area h3 {
    margin-bottom: 12px;
    font-size: 18px;
}
.contract-text {
    background: var(--bg);
    border-radius: 16px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    line-height: 1.6;
    border: 1px solid var(--border);
}

/* ===== PENDING OFFERS CARDS (ADMIN) ===== */
.pending-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}
.pending-offer-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.pending-offer-card:hover {
    box-shadow: var(--shadow);
}
.offer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--off-white);
    border-bottom: 1px solid var(--border-light);
}
.offer-card-header h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.offer-card-body {
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.5;
}
.offer-card-body p {
    margin: 4px 0;
    color: var(--text-dark);
}
.offer-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

/* ===== NOTIFICATIONS LIST (ADMIN) ===== */
#page-notifications .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

#page-notifications .empty-state svg {
    color: var(--text-light);
    margin-bottom: 12px;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    transition: all 0.25s ease;
}
.notif-item:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 15px rgba(27, 42, 74, 0.06);
    transform: translateY(-1px);
}
.notif-item.unread {
    background: var(--orange-subtle);
    border-color: var(--orange-glow);
}
.notif-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}
.notif-content {
    flex: 1;
    min-width: 0;
}
.notif-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-800);
    margin-bottom: 4px;
}
.notif-msg {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 4px;
}
.notif-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--gray-400);
}
.notif-client {
    background: var(--orange-subtle);
    padding: 1px 6px;
    border-radius: 16px;
    color: var(--secondary);
    font-weight: 500;
}
.notif-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.notif-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    background: var(--secondary);
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.5;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-action-btn {
    border: none;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--white);
    border-radius: 16px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(89, 198, 242, 0.3);
}

.notif-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(89, 198, 242, 0.4);
}

.notif-action-danger {
    background: #FEE2E2;
    color: #DC2626;
    box-shadow: none;
}

.notif-action-danger:hover {
    background: #FECACA;
}

/* ===== CONTRACT CONTENT IN EMPLOYER PAGE ===== */
.contract-content {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-top: 12px;
}
.contract-content pre {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.6;
}

/* ===== SIGNATURE CANVAS ===== */
#signature-canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== SCROLLING BAND ===== */
.scrolling-band {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #0f1929 0%, #1F2E52 50%, #0f1929 100%);
    overflow: hidden;
    padding: 0;
    z-index: 1;
    border-top: 1px solid rgba(89,198,242,0.08);
    border-bottom: 1px solid rgba(89,198,242,0.08);
}

.scrolling-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(89,198,242,0.15), transparent);
    z-index: 2;
}

.scrolling-band::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(89,198,242,0.1), transparent);
    z-index: 2;
}

.scrolling-band-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #0f1929 0%, transparent 10%, transparent 90%, #0f1929 100%);
    z-index: 3;
    pointer-events: none;
}

.scrolling-band-track {
    display: flex;
    width: max-content;
    animation: scrollBand 140s linear infinite;
    padding: 12px 0;
}

.scrolling-band:hover .scrolling-band-track {
    animation-play-state: paused;
}

.scrolling-band-content {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.scrolling-band-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 18px;
    margin: 0 20px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #59c6f2;
    white-space: nowrap;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(89,198,242,0.1);
    border: 1px solid rgba(89,198,242,0.2);
    border-radius: 999px;
    position: relative;
}

.scrolling-band-label::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #59c6f2;
    animation: labelPulse 1.5s ease-in-out infinite;
}

@keyframes labelPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.scrolling-band-item {
    display: inline-flex;
    align-items: center;
    padding: 7px 22px;
    margin: 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    transition: all 0.3s ease;
}

.scrolling-band:hover .scrolling-band-item {
    border-color: rgba(255,255,255,0.1);
}

@keyframes scrollBand {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .scrolling-band-item {
        font-size: 11px;
        padding: 5px 14px;
        margin: 0 3px;
    }
    .scrolling-band-label {
        font-size: 10px;
        padding: 4px 12px;
        margin: 0 12px 0 0;
    }
    .scrolling-band-track {
        animation-duration: 80s;
        padding: 10px 0;
    }
}

/* ===== SECTOR PAGES ===== */

.secteur-hero {
    position: relative;
    padding: 100px 0 50px;
    overflow: hidden;
}

.secteur-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,25,41,0.7) 0%, rgba(31,46,82,0.7) 100%);
    pointer-events: none;
    z-index: 0;
}

.secteur-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.secteur-hero-content .secteur-badge {
    display: inline-block;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary);
    background: rgba(89,198,242,0.12);
    border: 1px solid rgba(89,198,242,0.15);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.secteur-hero-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 12px;
}

.secteur-hero-content p {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    max-width: 560px;
}

.secteur-section {
    padding: 60px 0;
    background: var(--white);
}

.secteur-section:nth-child(even) {
    background: var(--off-white);
}

.secteur-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.secteur-grid.reverse {
    direction: rtl;
}

.secteur-grid.reverse > * {
    direction: ltr;
}

.secteur-text h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 14px;
    line-height: 1.3;
}

.secteur-text p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 12px;
}

.secteur-text ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.secteur-text ul li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
}

.secteur-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    opacity: 0.6;
}

.secteur-image {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.secteur-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    transition: transform 0.6s ease;
}

.secteur-image:hover img {
    transform: scale(1.03);
}

.secteur-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
    pointer-events: none;
}

/* Métiers cards */
.secteur-metiers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.secteur-metier-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 18px 16px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.secteur-metier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.secteur-metier-card:hover::before {
    transform: scaleX(1);
}

.secteur-metier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border-color: rgba(89,198,242,0.2);
}

.secteur-metier-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.secteur-metier-card p {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0;
}

.service-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* Stats row for sector */
.secteur-stats {
    display: flex;
    gap: 30px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.secteur-stat {
    text-align: center;
}

.secteur-stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    font-family: 'Inter', 'SF Pro Display', sans-serif;
    letter-spacing: -1px;
}

.secteur-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

/* CTA at bottom of sector page */
.secteur-cta {
    text-align: center;
    padding: 40px 0;
}

.secteur-cta h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

.secteur-cta p {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* ===== BTP SECTOR PAGE (Pro Work BTP) ===== */

.btp-hero {
    background: linear-gradient(155deg, #1F2E52 0%, #1F2E52 100%);
    position: relative;
    overflow: hidden;
}
.btp-hero::before {
    content: '🏗️';
    position: absolute;
    font-size: 26rem;
    opacity: 0.05;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}
.btp-hero::after { display: none; }
.btp-hero-wrap {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.btp-hero-content h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.btp-hero-content h1 span { color: var(--secondary); }
.btp-hero-features {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}
.btp-hero-features li {
    position: relative;
    padding: 5px 0 5px 28px;
    font-size: 15px;
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
}
.btp-hero-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 5px;
    color: #4cd964;
    font-weight: 800;
    font-size: 16px;
}
.btp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.btp-hero-cta .btn { margin-top: 0; }

.btp-hero-form {
    background: var(--white);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.btp-hero-form h3 { color: var(--primary); font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.btp-hero-form .btp-form-sub { color: var(--gray-500); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.btp-hero-form .form-group { margin-bottom: 12px; }
.btp-hero-form .form-group label { font-size: 12px; margin-bottom: 4px; }
.btp-hero-form .btn { width: 100%; margin-top: 10px; }
.btp-hero-form .btn.btn-primary { background: var(--primary); color: var(--white); }
.btp-hero-form .btn.btn-whatsapp { background: #3B82F6; box-shadow: 0 4px 14px rgba(37,211,102,0.35); }
.btp-hero-form .btn.btn-whatsapp:hover { background: #1eb85a; }
.btp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btp-form-row .form-group { margin-bottom: 12px; }

.btp-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 10px;
}
.btp-label-ico {
    font-size: 9px;
    vertical-align: middle;
    margin-right: 2px;
}
.btp-head { text-align: center; max-width: 740px; margin: 0 auto 34px; }
.btp-head p { color: var(--gray-500); font-size: 15px; line-height: 1.7; margin-top: 4px; }

.secteur-section.btp-stats { background: var(--primary); }
.btp-stats-grid { justify-content: space-between; gap: 20px; }
.btp-stats .secteur-stat { flex: 1; min-width: 140px; }
.btp-stats .secteur-stat-number { color: var(--secondary); font-size: 1.9rem; }
.btp-stats .secteur-stat-label { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.4; }

.btp-profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 10px; }
.btp-profile-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 26px 24px;
    text-align: center;
    transition: all 0.35s ease;
}
.btp-profile-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
    border-color: rgba(89,198,242,0.35);
}
.btp-profile-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 14px;
}
.btp-profile-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.btp-profile-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin-bottom: 16px; }
.btp-skills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.btp-skill-tag { background: var(--off-white); color: var(--gray-700); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; }

.btp-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 10px; }
.btp-step-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 30px 22px 24px;
    text-align: center;
    position: relative;
    transition: all 0.35s ease;
}
.btp-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.07);
    border-color: rgba(89,198,242,0.3);
}
.btp-step-num {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    background: var(--secondary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(89,198,242,0.4);
}
.btp-step-icon { font-size: 1.5rem; margin: 10px 0 8px; }
.btp-step-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.btp-step-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin: 0; }

.btp-pricing-note {
    background: #eef9f2;
    border: 1px solid #cdeeda;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 14px;
    color: #166534;
    line-height: 1.6;
    margin-bottom: 26px;
}
.btp-pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.btp-pricing-table th, .btp-pricing-table td { padding: 15px 20px; text-align: left; font-size: 14px; }
.btp-pricing-table thead th { background: var(--primary); color: #fff; font-weight: 600; }
.btp-pricing-table tbody tr { border-top: 1px solid var(--gray-100); }
.btp-pricing-table tbody tr:hover { background: var(--off-white); }
.btp-pricing-table .btp-price { font-weight: 800; color: var(--secondary); white-space: nowrap; text-align: right; }

.btp-advantages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 10px; }
.btp-adv-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.35s ease;
}
.btp-adv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.07);
    border-color: rgba(89,198,242,0.3);
}
.btp-adv-icon {
    width: 40px;
    height: 40px;
    background: rgba(89,198,242,0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.btp-adv-card h3 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.btp-adv-card p { font-size: 13px; color: var(--gray-500); line-height: 1.65; margin: 0; }

.btp-sectors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 10px; }
.btp-sector-tile {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.btp-sector-tile:hover {
    border-color: var(--secondary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.btp-sector-tile .btp-sector-emoji { font-size: 1.3rem; }

.btp-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 10px; }
.btp-testimonial-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 26px 24px;
    transition: all 0.35s ease;
}
.btp-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.07);
}
.btp-testimonial-stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.btp-testimonial-card blockquote { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin: 0 0 16px; font-style: italic; }
.btp-testimonial-author { display: flex; align-items: center; gap: 12px; }
.btp-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.btp-testimonial-author strong { display: block; font-size: 14px; color: var(--primary); }
.btp-testimonial-author span { font-size: 12px; color: var(--gray-500); }

.secteur-section.btp-cta-final { background: linear-gradient(155deg, #1F2E52 0%, #1F2E52 100%); text-align: center; }
.btp-cta-final h3 { font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.btp-cta-final p { font-size: 15px; color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto 22px; line-height: 1.7; }
.btp-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btp-cta-actions .btn-primary { background: var(--primary); color: var(--white); }
.btp-cta-actions .btn-ghost { border-color: rgba(255,255,255,0.35); }

@media (max-width: 900px) {
    .btp-hero-wrap { grid-template-columns: 1fr; gap: 30px; }
    .btp-hero::before { font-size: 16rem; }
}
@media (max-width: 600px) {
    .btp-form-row { grid-template-columns: 1fr; }
    .btp-pricing-table th, .btp-pricing-table td { padding: 11px 12px; font-size: 13px; }
    .btp-pricing-table .btp-price { white-space: normal; text-align: left; }
    .btp-adv-card { flex-direction: column; }
}

/* Review Modal */
.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 41, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.review-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 24px 80px rgba(0,0,0,0.06);
    animation: modalSlide 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.review-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    border-radius: 20px 20px 16px 16px;
}

.review-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fff;
    border: none;
    font-size: 20px;
    color: var(--primary-light);
    opacity: 0.4;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.review-modal-close:hover {
    background: rgba(89, 198, 242, 0.08);
    color: var(--primary);
    opacity: 0.8;
}

@keyframes modalSlide {
    0% { opacity: 0; transform: translateY(20px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Review header */
.review-modal-header {
    padding: 24px 28px 0;
    text-align: center;
}
.review-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}
.review-modal-subtitle {
    font-size: 14px;
    color: var(--primary-light);
    margin: 6px 0 20px;
    line-height: 1.5;
}

/* Review type selection */
.review-type-wrap {
    padding: 0 28px 24px;
}
.review-type-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-light);
    margin-bottom: 14px;
    text-align: center;
}
.review-type-btns {
    display: flex;
    gap: 8px;
}
.review-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 12px 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    position: relative;
}
.review-type-btn .btn-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    background: #fff;
}
.review-type-btn .btn-indicator svg {
    width: 8px;
    height: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.review-type-btn .btn-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    transition: color 0.25s ease;
}
.review-type-btn .btn-desc {
    font-size: 12px;
    color: var(--primary-light);
    opacity: 0.5;
    transition: color 0.25s ease;
    line-height: 1.3;
}
.review-type-btn:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 20px rgba(89, 198, 242, 0.1);
    transform: translateY(-2px);
}
.review-type-btn.selected {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(89, 198, 242, 0.04), rgba(31, 46, 82, 0.02));
    box-shadow: 0 4px 20px rgba(31, 46, 82, 0.08);
}
.review-type-btn.selected .btn-indicator {
    border-color: var(--secondary);
    background: var(--secondary);
}
.review-type-btn.selected .btn-indicator svg {
    opacity: 1;
}
.review-type-btn.selected[data-type="employe"] {
    border-color: rgba(89, 198, 242, 0.3);
}
.review-type-btn.selected[data-type="employeur"] {
    border-color: rgba(31, 46, 82, 0.3);
}

/* Form */
.review-form-body {
    padding: 0 24px 16px;
}
#review-position-group {
    background: rgba(89, 198, 242, 0.06);
    border: 1px solid rgba(89, 198, 242, 0.2);
    border-radius: 16px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
#review-position-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}
#review-position-group input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid rgba(89, 198, 242, 0.25);
    border-radius: 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--primary);
    background: #fff;
    transition: all 0.2s ease;
}
#review-position-group input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(89, 198, 242, 0.1);
}
#review-position-group input::placeholder {
    color: #d1d5db;
}
.review-form-fieldset {
    background: #F5F7FA;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 10px 10px 0;
    margin-bottom: 8px;
}
.review-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.review-form-group {
    margin-bottom: 8px;
}
.review-form-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-light);
    margin-bottom: 4px;
}
.review-form-group label svg {
    width: 13px;
    height: 13px;
    color: var(--secondary);
    opacity: 0.5;
}
.review-form-group input,
.review-form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--primary);
    transition: all 0.2s ease;
    background: #fff;
}
.review-form-group input::placeholder,
.review-form-group textarea::placeholder {
    color: #d1d5db;
}
.review-form-group input:focus,
.review-form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(89, 198, 242, 0.1);
}
.review-stars {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 4px 0 2px;
}
.review-stars .star {
    font-size: 26px;
    cursor: pointer;
    color: #F5F7FA;
    transition: all 0.15s ease;
    line-height: 1;
}
.review-stars .star.hover,
.review-stars .star.active {
    color: var(--secondary);
}
.review-stars .star.active {
    animation: starPop 0.3s ease;
}
@keyframes starPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.review-submit-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 16px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.review-submit-btn svg {
    width: 14px;
    height: 14px;
}
.review-submit-btn:hover {
    background: var(--primary-light);
    box-shadow: 0 8px 24px rgba(31, 46, 82, 0.3);
    transform: translateY(-1px);
}
.review-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.review-trigger:hover {
    opacity: 0.9;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(31, 46, 82, 0.25);
}

.secteur-grid,
.secteur-metier-card,
.secteur-stat {
    animation: sectorFadeUp 0.6s ease backwards;
}

.secteur-grid { animation-delay: 0.1s; }
.secteur-grid.reverse { animation-delay: 0.2s; }
.secteur-metier-card:nth-child(1) { animation-delay: 0.05s; }
.secteur-metier-card:nth-child(2) { animation-delay: 0.1s; }
.secteur-metier-card:nth-child(3) { animation-delay: 0.15s; }
.secteur-metier-card:nth-child(4) { animation-delay: 0.2s; }
.secteur-metier-card:nth-child(5) { animation-delay: 0.25s; }
.secteur-metier-card:nth-child(6) { animation-delay: 0.3s; }

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

@media (max-width: 768px) {
    .secteur-hero { padding: 80px 0 40px; }
    .secteur-section { padding: 40px 0; }
    .secteur-grid { grid-template-columns: 1fr; gap: 30px; }
    .secteur-grid.reverse { direction: ltr; }
    .secteur-image img { height: 240px; }
    .secteur-metiers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .secteur-hero { padding: 70px 0 30px; }
    .secteur-metiers { grid-template-columns: 1fr; }
    .secteur-stats { gap: 16px; justify-content: center; }
}

/* ===== REDESIGNED CANDIDATE SETTINGS ===== */

/* Card header with icon */
.card-header-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.card-header-with-icon > svg {
    flex-shrink: 0;
    margin-top: 1px;
    width: 20px;
    height: 20px;
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.06), rgba(89, 198, 242, 0.06));
    color: var(--primary);
    box-sizing: content-box;
}

.card-header-with-icon h3 {
    margin-bottom: 2px;
}

/* Profile avatar section */
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 4px;
}

.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle-lg {
    width: 88px;
    height: 88px;
    font-size: 36px;
    box-shadow: 0 4px 16px rgba(27, 42, 74, 0.2);
    transition: transform 0.3s ease;
}

.avatar-circle-lg:hover {
    transform: scale(1.02);
}

.avatar-circle-lg .avatar-initials {
    position: absolute;
    font-size: 36px;
    font-weight: 700;
    color: var(--white);
}

.avatar-upload-btn {
    position: absolute;
    bottom: 2px;
    right: -2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--white);
    border: 3px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
    box-shadow: 0 2px 8px rgba(89, 198, 242, 0.3);
}

.avatar-upload-btn:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary));
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(89, 198, 242, 0.4);
}

.profile-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-avatar-info strong {
    font-size: 18px;
    color: var(--gray-800);
    font-weight: 700;
}

.profile-avatar-info > span {
    font-size: 14px;
    color: var(--gray-500);
}

.avatar-hint {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 2px;
}

/* Password strength indicator */
.password-strength {
    margin-top: 12px;
}

.password-strength-bar {
    height: 4px;
    background: var(--gray-100);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 6px;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 16px;
    transition: var(--transition);
}

.password-strength-text {
    font-size: 12px;
    color: var(--gray-500);
}

/* CV Upload Zone */
.cv-upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--gray-50), var(--off-white));
    position: relative;
}

.cv-upload-zone::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(135deg, transparent, rgba(89, 198, 242, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cv-upload-zone:hover {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(89, 198, 242, 0.04), var(--off-white));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(89, 198, 242, 0.1);
}

.cv-upload-zone:hover::before {
    opacity: 1;
}

.cv-upload-zone > svg {
    color: var(--gray-400);
    margin-bottom: 16px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.cv-upload-zone:hover > svg {
    color: var(--secondary);
    transform: translateY(-4px);
}

.cv-upload-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 4px;
}

.cv-upload-hint {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.cv-file-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 14px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    font-size: 13px;
    color: var(--gray-700);
}

.cv-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 2px;
    display: flex;
    align-items: center;
}

.cv-file-remove:hover {
    color: #DC2626;
}

/* Skills input */
.skills-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.07), rgba(89, 198, 242, 0.07));
    color: var(--primary);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid rgba(27, 42, 74, 0.06);
}

.skill-tag:hover {
    background: linear-gradient(135deg, rgba(27, 42, 74, 0.1), rgba(89, 198, 242, 0.1));
    transform: translateY(-1px);
}

.skill-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    opacity: 0.6;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.skill-remove:hover {
    opacity: 1;
}

.skills-input-row {
    display: flex;
    gap: 8px;
}

.skills-input-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    font-size: 14px;
    font-family: inherit;
    transition: var(--transition);
}

.skills-input-row input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(89, 198, 242, 0.1);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

/* Soft cancel button */
.btn-cancel {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    border-radius: 999px;
    padding: 11px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

/* Fix responsive .form-row conflict */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== UNIVERSAL CUSTOM CHECKBOXES (même design que la connexion) ===== */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid var(--gray-300);
    border-radius: 16px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    background: var(--white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-option input[type="checkbox"] {
    width: 22px;
    height: 22px;
    border-radius: 16px;
}

.nav-dropdown-toggle input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
}

label:hover > input[type="checkbox"] {
    border-color: var(--secondary);
    box-shadow: 0 0 18px rgba(89, 198, 242, 0.12);
}

input[type="checkbox"]:checked {
    background: var(--secondary);
    border-color: var(--secondary-dark);
    box-shadow:
        0 0 12px rgba(89, 198, 242, 0.25),
        0 0 30px rgba(89, 198, 242, 0.1);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 11px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    animation: cb-pop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cb-pop {
    0% { transform: translate(-50%, -60%) rotate(45deg) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -60%) rotate(45deg) scale(1.15); }
    100% { transform: translate(-50%, -60%) rotate(45deg) scale(1); opacity: 1; }
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== ARRONDISSEMENT GÉNÉRAL : rectangles sans règle de rayon ===== */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button,
img {
    border-radius: 16px;
}

/* ===== DROPDOWNS UNIFIÉS : même panneau que le menu langues ===== */
.nav-dropdown,
.langues-menu,
.chat-dropdown-menu,
.emoji-picker-popup,
.attach-menu-popup {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.chat-dropdown-menu,
.attach-menu-popup {
    padding: 6px;
    overflow: visible;
}

.nav-dropdown-item,
.chat-dropdown-menu button,
.attach-option {
    border-radius: 8px;
    padding: 10px 12px;
}

.chat-dropdown-menu button:hover,
.attach-option:hover {
    background: var(--gray-50);
}

.nav-dropdown::before {
    border-color: var(--gray-200);
}

/* Boutons du prompt de connexion dans le chat IA (visiteurs non connectes) */
.chat-login-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.chat-login-btn:hover {
    background: var(--primary-light);
}
.chat-login-btn-secondary {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.chat-login-btn-secondary:hover {
    background: #F5F7FA;
}



/* ============================================================
   MOBILE MASTER OVERRIDE  —  must remain at the END of this file
   ------------------------------------------------------------
   The stylesheet contains many scattered @media rules defined
   next to each component. Those later rules were overriding the
   main mobile block (max-width:768px) and re-introducing
   multi-column layouts that overflow phones. This block, placed
   last in source order with !important, guarantees a correct
   mobile (<=768px) rendering.
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        max-width: 100%;
        overflow-x: clip;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* --- Force every multi-column grid to stack --- */
    .testimonials-grid,
    .values-grid,
    .conditions-grid,
    .domaines-grid,
    .choisir-grid,
    .ancrage-grid,
    .equipe-grid,
    .footer-grid,
    .footer-categories-grid,
    .pricing-grid,
    .pricing-grid-3,
    .pricing-grid-4,
    .pricing-row,
    .about-hero-grid,
    .about-ancrage-stats,
    .about-grid,
    .contact-grid,
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* About page: keep small cards in 2 columns (they fit), stack the rest */
    .about-valeurs-grid { grid-template-columns: 1fr 1fr !important; }
    .about-equipe-grid  { grid-template-columns: 1fr 1fr !important; }
    .about-hero-visual  { grid-template-columns: 1fr !important; }

    /* --- Pricing cards must fit the viewport --- */
    .pricing-row {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 28px 22px !important;
    }
    .pricing-card-body { min-width: 0 !important; }
    .pricing-card-price { white-space: normal !important; }
    .pricing-card-amount { font-size: 1.5rem !important; }
    .pricing-card-featured { transform: none !important; }

    /* --- Hamburger: a closed menu must NOT capture taps on the button --- */
    .nav-menu:not(.active) { visibility: hidden; pointer-events: none; }
    .nav-menu.active { visibility: visible; pointer-events: auto; }
    .hamburger { position: relative; z-index: 110; }

    /* --- Hero content on phones --- */
    .hero-content-area { padding: 40px 20px 0 !important; }
    .hero-switch { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; justify-content: center; }

    /* --- Generic safety net: tables never wider than screen --- */
    table { max-width: 100% !important; }

    /* --- Mobile usability polish --- */
    /* Prevent iOS auto-zoom on focused inputs (a common "broken on mobile" feel) */
    input, select, textarea { font-size: 16px !important; }
    /* Keep in-page media from ever exceeding the screen (logo is outside .page, so safe) */
    .page img, .page svg, .page canvas { max-width: 100% !important; }

    /* --- Readable text sizes on phones (user: text too small) --- */
    body { font-size: 16px !important; line-height: 1.65 !important; }
    p, li, dd, dt, label, figcaption,
    .section-subtitle, .section-desc, .card p, .card-body, .card-text,
    .about-text, .about-desc, .contact-info, .contact-text,
    .hero-subtitle, .hero-desc, .footer-col p, .footer-links a,
    .nav-link, .nav-menu a, .testimonial-text, .value-text, .domaine-text,
    .about-valeur-text, .about-domaine-text, .btp-step-card p, .btp-adv-card p,
    .pricing-card-body, .pricing-card-desc, .price-desc {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    h1, .hero-title { font-size: 28px !important; line-height: 1.2 !important; }
    h2, .section-title { font-size: 23px !important; line-height: 1.25 !important; }
    h3, .card-title, .section-subtitle { font-size: 19px !important; line-height: 1.3 !important; }

    /* --- Small but readable UI text (user: everything too small) --- */
    .hero-switch-btn { font-size: 14px !important; padding: 10px 14px !important; flex: 1 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .hero-heading { margin-top: 18px !important; }
    .scrolling-band-item, .scrolling-band-label { font-size: 13px !important; }
    .cta-badge { font-size: 13px !important; }

    /* --- Badges, labels and micro-text: readable minimum on phones --- */
    .section-badge, .services-hero-badge, .home-stats-label,
    .section-number, .pricing-card-features-label, .pricing-card-pay,
    .pricing-card-notice, .secteur-badge, .secteur-stat-label, .about-hero-badge { font-size: 13px !important; }
    .section-badge { font-size: 16px !important; }
    .pricing-card-label { font-size: 13px !important; padding: 5px 14px !important; }
    .pricing-card-period, .pricing-card-subtitle { font-size: 13.5px !important; }
    .footer-categories-group a { font-size: 14px !important; line-height: 1.7 !important; }
    .install-toast-title { font-size: 14px !important; }
    .install-toast-text { font-size: 13px !important; }
    .install-toast-btn { font-size: 13px !important; padding: 6px 12px !important; }

    /* --- Login tabs and secondary buttons --- */
    .login-tab { font-size: 14px !important; }
    .login-footer-btn { font-size: 14px !important; }
    .login-btn { font-size: 16px !important; min-height: 48px !important; }

    * { box-sizing: border-box; }
}

/* ============================================================
   MOBILE NAVIGATION
   Logged-out users: the 4 main sections (Offres, Services,
   À Propos, Connexion) are accessed via the hamburger menu
   (3 lines) at the top right.
   Logged-in users: the hamburger disappears and the 4 sections
   appear as a fixed bar at the bottom of the screen.
   ============================================================ */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* The hamburger dropdown links must stay visible on mobile */
    .nav-menu .nav-link {
        display: block !important;
    }

    /* Hamburger sur mobile : visible quand déconnecté (menu déroulant),
       caché quand connecté (la navigation passe par la barre du bas). */
    body:not(.has-bottom-nav) .hamburger {
        display: flex !important;
    }
    body.has-bottom-nav .hamburger {
        display: none !important;
    }

    /* The install toast must never cover the hamburger button (top right) */
    .install-toast {
        top: 72px !important;
        right: 12px !important;
        z-index: 995 !important;
    }

    /* Bottom bar: shown only when the user is logged in (body.has-bottom-nav).
       Sticky: embedded in the page flow (scrolls with the page, takes its own
       space at the bottom) and stays pinned to the bottom of the screen. */
    .mobile-bottom-nav {
        position: sticky;
        bottom: 0;
        width: 100%;
        min-height: 64px;
        background: linear-gradient(165deg, rgba(31, 46, 82, 0.94) 0%, rgba(15, 25, 41, 0.96) 100%);
        border-top: 1px solid rgba(89, 198, 242, 0.18);
        z-index: 1200;
        justify-content: space-around;
        align-items: center;
        padding: 8px 6px;
    }

    body.has-bottom-nav .mobile-bottom-nav {
        display: flex;
    }

    .mobile-bottom-nav .bottom-nav-link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1;
        padding: 5px 2px;
        border-radius: 16px;
        transition: color 0.22s ease, transform 0.22s ease;
        -webkit-tap-highlight-color: transparent;
        background: transparent !important;
    }

    .mobile-bottom-nav .bottom-nav-link:hover,
    .mobile-bottom-nav .bottom-nav-link.active {
        background: transparent !important;
    }

    .mobile-bottom-nav .bottom-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 20px;
        border-radius: 8px;
        transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .mobile-bottom-nav .bottom-nav-icon svg {
        width: 18px;
        height: 18px;
        stroke: none;
        fill: currentColor;
        stroke-width: 0;
        opacity: 0.85;
        transition: fill 0.25s ease, opacity 0.25s ease;
    }

    .mobile-bottom-nav .bottom-nav-link.active {
        color: var(--secondary);
    }

    .mobile-bottom-nav .bottom-nav-link.active .bottom-nav-icon {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .mobile-bottom-nav .bottom-nav-link.active .bottom-nav-icon svg {
        fill: #ffffff;
        stroke: none;
        opacity: 1;
    }

    .mobile-bottom-nav .bottom-nav-connexion {
        color: rgba(255, 255, 255, 0.55);
    }

    .mobile-bottom-nav .bottom-nav-connexion.active {
        color: var(--secondary);
    }

    /* Logged-in users: replace hamburger (3 bars) with account avatar top right */
    body.has-bottom-nav .hamburger {
        display: none !important;
    }
    body.has-bottom-nav .header-account {
        display: inline-flex !important;
    }

    body.has-bottom-nav .nav-menu {
        visibility: hidden;
        pointer-events: none;
    }
    body.has-bottom-nav .nav-menu.active {
        visibility: visible;
        pointer-events: auto;
    }

    /* Lift the floating chat button above the bottom bar */
    body.has-bottom-nav .chat-floating-btn {
        bottom: 96px;
    }

    /* Fix: footer caché par la bottom bar fixe → réserve espace en bas */
    body.has-bottom-nav {
        padding-bottom: 72px !important;
    }
    body.has-bottom-nav .footer {
        padding-bottom: 72px !important;
    }

    /* Fix: hamburger menu toujours lisible sur fond sombre meme quand header est clair (page Offres blanche) */
    .header.header--light .nav-menu .nav-link {
        color: rgba(255,255,255,0.9) !important;
    }
    .header.header--light .nav-menu .nav-link:hover,
    .header.header--light .nav-menu .nav-link.active {
        color: #fff !important;
        background: rgba(89,198,242,0.16) !important;
        border-color: rgba(89,198,242,0.35) !important;
    }
    .header.header--light .nav-menu .nav-link-connexion {
        color: #fff !important;
        background: linear-gradient(135deg, #59c6f2, #2fa8e0) !important;
    }
}

/* ============================================================
   PWA INSTALL TOAST (slides in from the right, top-right)
   ============================================================ */
.install-toast {
    position: fixed;
    top: 12px;
    right: 12px;
    width: min(300px, calc(100vw - 24px));
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.20);
    padding: 10px 10px 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    z-index: 3000;
    transform: translateX(150%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.install-toast.show {
    transform: translateX(0);
}

.install-toast-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.install-toast-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
}

.install-toast-icon svg {
    width: 18px;
    height: 18px;
}

.install-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.install-toast-title {
    margin: 0 0 1px;
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
}

.install-toast-text {
    margin: 0;
    font-size: 10px;
    line-height: 1.25;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.install-toast-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.install-toast-btn {
    border: none;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.install-toast-btn:hover {
    background: linear-gradient(135deg, #2fa8e0, #2FA8E0);
}

.install-toast-close {
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px 0 0;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 8px;
}

.install-toast-close:hover {
    color: #1E293B;
}

/* Bannière "Ouvrir l'application" (navigateur alors que l'app est installée) */
.openapp-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: 560px;
    margin: 0 auto;
    background: #1F2E52;
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(31, 46, 82, 0.45);
    padding: 12px 12px 12px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 4000;
}
.openapp-banner[hidden] {
    display: none !important;
}
.openapp-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.openapp-body {
    flex: 1 1 auto;
    min-width: 0;
}
.openapp-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
}
.openapp-text {
    margin: 0;
    font-size: 12px;
    opacity: 0.85;
}
.openapp-btn {
    flex: 0 0 auto;
    border: none;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.openapp-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.openapp-close:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .install-toast {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}



/* ============================================================
   AMÉLIORATIONS RESPONSIVE (ajout)
   Objectif : fluidité de la typographie, médias fluides,
   repli systématique des grilles sur mobile et garde
   anti-débordement horizontal. Bloc placé en fin de fichier.
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    overflow-x: clip;
    max-width: 100%;
}
/* Nav mobile basse : toujours épinglée au viewport (évite tout débordement/overflow qui casserait le fixed) */
.mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1200 !important;
}
img,
video,
iframe,
canvas,
svg,
object {
    max-width: 100%;
    height: auto;
}
* {
    -webkit-tap-highlight-color: transparent;
}

/* --- Typographie fluide (caps calées sur le desktop pour ne pas l'agrandir) --- */
h1, .h1 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.12; }
h2, .h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.18; }
h3, .h3 { font-size: clamp(1.05rem, 2.4vw, 1.1rem); line-height: 1.25; }
h4, .h4 { font-size: clamp(1.02rem, 1.8vw, 1.15rem); }
p, li { line-height: 1.6; }

@media (max-width: 1024px) {
    .container { max-width: 960px; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Repli de toutes les grilles non encore gérées */
    [class*="-grid"],
    [class*="grid-"],
    [class*="Grid"],
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Cartes compactes conservées en 2 colonnes */
    .about-valeurs-grid,
    .about-equipe-grid { grid-template-columns: 1fr 1fr !important; }
    /* Rangées flexibles qui peuvent déborder */
    .hero-panels-row,
    .hero-switch,
    .nav-container,
    .form-row,
    .pricing-row { flex-wrap: wrap !important; }
    .hero-search { width: 100% !important; }
    .home-hero { padding-top: 90px; }
    /* Espacements verticaux resserrés */
    section, .section { padding-top: 48px !important; padding-bottom: 48px !important; }
    .hero-content-area { padding: 0 4px; }
}

@media (max-width: 600px) {
    .container { padding-left: 14px !important; padding-right: 14px !important; }
    .about-valeurs-grid,
    .about-equipe-grid { grid-template-columns: 1fr !important; }
    .bottom-nav-link { font-size: 11px; }
    .cta-button, .btn, button.btn { width: 100%; max-width: 100%; }
    input, select, textarea { font-size: 16px; } /* évite le zoom auto iOS */
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    h1, .h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
    h2, .h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
    .container { padding-left: 12px !important; padding-right: 12px !important; }
    .scrolling-band-content { font-size: 13px; }
}


/* ============================================================
   MINIATURISATION DE LA NAV MOBILE DU BAS
   (employeur / candidat connectés)
   ============================================================ */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        padding: 4px 4px !important;
    }
    .mobile-bottom-nav .bottom-nav-link {
        font-size: 9px !important;
        gap: 2px !important;
        padding: 3px 1px !important;
        letter-spacing: 0 !important;
    }
    .mobile-bottom-nav .bottom-nav-icon,
    .mobile-bottom-nav .bottom-nav-icon svg {
        width: 19px !important;
        height: 19px !important;
    }
    .mobile-bottom-nav .bottom-nav-label {
        font-size: 10px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 480px) {
    .mobile-bottom-nav .bottom-nav-link {
        font-size: 9.5px !important;
    }
    .mobile-bottom-nav .bottom-nav-icon,
    .mobile-bottom-nav .bottom-nav-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ============================================================
   EMPLOYEUR - MODE DIRECT "MES DEMANDES" (sans en-tête)
   Clic bas "Mes demandes" → masque hero Espace Employeur
   et sidebar catégories, affiche directement la liste.
   ============================================================ */
#page-employeur.employeur-direct-demandes .page-hero,
#page-employeur.employeur-direct-demandes .account-sidebar {
    display: none !important;
}
#page-employeur.employeur-direct-demandes .account-layout {
    display: block !important;
    gap: 0 !important;
}
#page-employeur.employeur-direct-demandes .account-section {
    padding-top: 88px !important;
}
#page-employeur.employeur-direct-demandes .account-main {
    width: 100% !important;
    max-width: none !important;
}

/* Mobile: sidebar du compte en liste verticale alignee a gauche et compacte */
@media (max-width: 768px) {
    .account-sidebar {
        flex-direction: column !important;
        width: 50% !important;
        max-width: 50%;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(27, 42, 74, 0.04);
    }
    .sidebar-profile {
        padding: 14px 16px;
        gap: 12px;
    }
    .sidebar-avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    .sidebar-profile-info h4 {
        font-size: 14px;
    }
    .sidebar-profile-info p {
        font-size: 11px;
    }
    .sidebar-nav {
        flex-direction: column !important;
        overflow-x: visible !important;
        width: 100% !important;
        padding: 6px !important;
        gap: 2px !important;
    }
    .sidebar-link {
        white-space: normal !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        flex-shrink: 1 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .sidebar-link.active {
        box-shadow: inset 3px 0 0 var(--secondary) !important;
        border-bottom: none !important;
        border-radius: 12px !important;
    }
}
/* --- Suite mobile: repli de la liste des onglets + bouton 3 barres + avatar header --- */
.header-account {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin-left: 8px;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .sidebar-nav,
    .sidebar-footer {
        display: none !important;
    }
    .account-sidebar.nav-open .sidebar-nav,
    .account-sidebar.nav-open .sidebar-footer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 6px !important;
        gap: 2px !important;
    }
    .sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 3px;
        align-self: flex-start;
        margin-top: 0px;
        width: 42px;
        height: 36px;
        border-radius: 10px;
        background: var(--primary);
        border: none;
        cursor: pointer;
        padding: 0;
    }
    .sidebar-toggle .bar {
        width: 18px;
        height: 2px;
        background: var(--white);
        border-radius: 2px;
        display: block;
    }
}
/* --- Ajustements: avatar header visible sur desktop connecte + toggle 3 barres vertical --- */
body.has-bottom-nav .header-account {
    display: inline-flex !important;
}
body.has-bottom-nav .nav-link-connexion {
    display: none !important;
}
.sidebar-toggle {
    display: none;
    flex-direction: column !important;
}

/* ============================================================
   FIX MOBILE FINAL — Tout est lisible, rien ne déborde
   ============================================================ */
@media (max-width: 768px) {
    /* Prevent horizontal overflow on everything */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body {
        font-size: 17px;
    }

    /* Container strict */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* All sections compact */
    section, .section, .page-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: hidden;
    }

    /* Page hero compact */
    .page-hero {
        padding: 70px 16px 32px !important;
        min-height: auto !important;
    }
    #page-compte .page-hero {
        padding: 72px 16px 28px !important;
    }
    .page-hero-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
    }
    .page-hero-subtitle {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Headings smaller */
    h1, .h1 { font-size: 18px !important; line-height: 1.25 !important; }
    h2, .h2 { font-size: 16px !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 14px !important; line-height: 1.3 !important; }
    h4, .h4 { font-size: 13px !important; }

    /* Body text compact */
    body { font-size: 13px !important; line-height: 1.5 !important; }
    p, li, dd, dt, label, figcaption, span, a, div {
        line-height: 1.5 !important;
    }

    /* All text readable but compact */
    .hero-title { font-size: 18px !important; }
    .hero-subtitle, .hero-desc { font-size: 12px !important; }
    .section-title { font-size: 16px !important; }
    .section-subtitle { font-size: 12px !important; }
    .card-title { font-size: 14px !important; }
    .card p, .card-body, .card-text { font-size: 12px !important; }

    /* Account / Candidat / Employeur sections */
    .account-layout {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .account-section {
        padding-top: 16px !important;
    }
    #page-employeur .account-section {
        padding-top: 0 !important;
        margin-top: -1px !important;
    }
    #page-employeur .account-layout {
        padding-top: 8px !important;
    }
    #page-employeur .page-hero {
        padding: 90px 16px 32px !important;
    }
    #page-compte .account-section {
        padding-top: 12px !important;
    }
    #page-compte .account-content,
    #page-employeur .account-content {
        scroll-margin-top: 88px !important;
    }
    #account-notifications .account-card,
    #employer-notifications .account-card,
    #page-compte #account-notifications,
    #page-employeur #employer-notifications {
        scroll-margin-top: 88px !important;
    }
    .account-content {
        padding: 0 !important;
    }
    .account-card {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .account-card-header {
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }
    .account-card-header h3 {
        font-size: 14px !important;
    }
    .account-card-header p {
        font-size: 11px !important;
    }

    /* Forms compact */
    .form-group {
        margin-bottom: 10px !important;
    }
    .form-group label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Buttons compact */
    .btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .btn-primary {
        padding: 8px 16px !important;
    }

    /* Account sidebar mobile */
    .account-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px !important;
        padding: 6px !important;
    }
    .sidebar-profile {
        padding: 10px !important;
    }
    .sidebar-link {
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    /* Messages / Chat */
    .chat-container {
        height: auto !important;
        min-height: 400px !important;
    }

    /* Tables */
    table {
        font-size: 12px !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* Pricing cards */
    .pricing-card {
        padding: 16px 14px !important;
        padding-top: 24px !important;
    }
    .pricing-card-amount {
        font-size: 1.1rem !important;
    }

    /* Login / Connexion */
    .login-card-body {
        padding: 14px !important;
    }
    .login-card {
        margin: 0 6px !important;
    }

    /* Hero content */
    .hero-content-area {
        padding: 0 8px !important;
    }
    .hero-switch {
        max-width: 100% !important;
    }

    /* Secteur sections */
    .secteur-section {
        padding: 28px 14px !important;
    }
    .secteur-text h2 {
        font-size: 16px !important;
    }
    .secteur-text p {
        font-size: 12px !important;
    }

    /* About page */
    .about-card {
        padding: 14px !important;
    }
    .about-card h3 {
        font-size: 14px !important;
    }

    /* Footer */
    .footer-col {
        margin-bottom: 20px !important;
    }
    .footer-col h4 {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    .footer-col a, .footer-links a {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    /* Any card with overflow */
    .card, .account-card, .about-card {
        overflow: hidden !important;
    }
    .pricing-card {
        overflow: visible !important;
    }

    /* Force word-wrap everywhere */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* No element wider than viewport */
    img, video, iframe, canvas, svg, object, embed {
        max-width: 100% !important;
        height: auto !important;
    }

    /* All grids single column */
    [class*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Scrollable areas */
    .account-content, .notif-list {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Bottom nav space */
    body.has-bottom-nav {
        padding-bottom: 80px !important;
    }

    /* Header compact on mobile */
    .header {
        top: 4px !important;
        width: calc(100% - 20px) !important;
        border-radius: 16px !important;
        padding: 0 !important;
    }
    .nav-container {
        height: 40px !important;
        padding: 0 8px !important;
    }
    .logo-img {
        height: 28px !important;
        width: auto !important;
    }
    .logo-text {
        font-size: 15px !important;
    }
    .hamburger {
        padding: 4px !important;
    }
    .hamburger .bar {
        width: 18px !important;
        height: 2px !important;
    }
    /* Hero buttons lower from header */
    .hero-content-area {
        padding-top: 50px !important;
    }
    .hero-switch {
        margin-top: 16px !important;
    }

    /* === ESPACE CANDIDAT / EMPLOYEUR : tout s'affiche pleinement === */
    .account-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    .account-section {
        padding-top: 68px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: auto !important;
    }
    .account-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    .account-content {
        display: none;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .account-content.active {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .account-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        margin-bottom: 10px !important;
    }
    .account-card-header {
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }
    .account-form {
        width: 100% !important;
        overflow: visible !important;
    }
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .form-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .form-actions {
        width: 100% !important;
    }
    .form-actions .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sidebar toggle for mobile */
    .account-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    .account-sidebar .sidebar-nav,
    .account-sidebar .sidebar-footer {
        display: none !important;
    }
    .account-sidebar.nav-open .sidebar-nav,
    .account-sidebar.nav-open .sidebar-footer {
        display: flex !important;
    }

    /* Toolbar compact */
    .acct-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .acct-wa-search {
        width: 100% !important;
    }
    .acct-wa-search input {
        width: 100% !important;
        font-size: 12px !important;
    }
    .acct-date-select {
        width: 100% !important;
        font-size: 12px !important;
    }

    /* Notifications */
    .notif-item {
        padding: 12px 14px;
    }
    .notif-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .notif-actions {
        flex-direction: column;
        gap: 4px;
    }
    .notif-action-btn {
        padding: 5px 12px;
        font-size: 11px;
    }

    /* Empty state */
    .empty-state {
        padding: 20px 10px !important;
        text-align: center !important;
    }
    .empty-state p {
        font-size: 12px !important;
    }
    .empty-state span {
        font-size: 11px !important;
    }

    /* Sidebar profile */
    .sidebar-profile {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .sidebar-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .sidebar-profile-info h4 {
        font-size: 13px !important;
    }
    .sidebar-profile-info p {
        font-size: 10px !important;
    }

    /* === ESPACE EMPLOYEUR : tout s'affiche pleinement === */
    #page-employeur .account-section {
        padding-top: 76px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: auto !important;
    }
    #page-employeur .account-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    #page-employeur .account-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    #page-employeur .account-content.active {
        width: 100% !important;
        max-width: 100% !important;
    }
    #page-employeur .account-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    #page-employeur .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    #page-employeur .form-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    #page-employeur .form-group input,
    #page-employeur .form-group select,
    #page-employeur .form-group textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #page-employeur .employer-stats {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #page-employeur .stat-card {
        padding: 10px !important;
    }
    #page-employeur .stat-info h4 {
        font-size: 16px !important;
    }
    #page-employeur .stat-info p {
        font-size: 11px !important;
    }
    #page-employeur .job-list-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    #page-employeur .acct-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #page-employeur .acct-wa-search {
        width: 100% !important;
    }
    #page-employeur .acct-wa-search input {
        width: 100% !important;
        font-size: 12px !important;
    }
    #page-employeur .messages-card {
        height: auto !important;
        min-height: 400px !important;
    }
    #page-employeur .messages-sidebar {
        width: 100% !important;
        max-height: 300px !important;
    }
    #page-employeur .messages-main {
        width: 100% !important;
    }

    /* === FOOTER MOBILE === */
    .footer {
        padding: 40px 0 16px !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
    }
    .footer-brand p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    .footer-logo-img {
        height: 30px !important;
    }
    .footer-links h4 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    .footer-links li {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .footer-links a {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    .footer-bottom {
        font-size: 11px !important;
        padding-top: 16px !important;
    }
    .footer-categories {
        padding: 20px 0 !important;
    }
    .footer-categories-title {
        font-size: 15px !important;
        margin-bottom: 14px !important;
    }
    .footer-categories-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    .footer-categories-group-title {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    .footer-categories-group a {
        font-size: 12.5px !important;
        line-height: 1.7 !important;
    }

    /* === PAGE OFFRES MOBILE === */
    .jobs-section {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }
    .jobs-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    .jobs-search {
        max-width: 100% !important;
        padding: 10px 14px !important;
    }
    .jobs-search input {
        font-size: 13px !important;
    }
    .jobs-count {
        font-size: 12px !important;
        text-align: center !important;
    }
    .jobs-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Override: conversation-open removes bottom-nav padding (must be last) */
body.conversation-open.has-bottom-nav {
    padding-bottom: 0 !important;
}

/* Fix: prevent white flash behind chat on mobile scroll */
body.conversation-open {
    background: #ECE5DD !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
body.conversation-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ECE5DD;
    z-index: -1;
}

/* Services/A propos dans sidebar (desktop + mobile) */
.sidebar-link.mobile-only { display: flex !important; }
@media (max-width: 768px) {
    body.has-bottom-nav .hamburger { display: none !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (min-width: 769px) {
    .account-sidebar { display: flex !important; flex-direction: column !important; width: 280px !important; min-width: 280px !important; visibility: visible !important; opacity: 1 !important; }
    .account-layout { display: flex !important; flex-direction: row !important; gap: 28px !important; }
    .sidebar-nav, .sidebar-footer { display: flex !important; flex-direction: column !important; visibility: visible !important; }
    .sidebar-toggle { display: none !important; }
}

/* ===== FIX: entete du chat fixee en haut, ne bouge plus (doit rester en dernier) ===== */
.chat-panel-active {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}
.chat-panel-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    order: -1 !important;
}
.chat-panel-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}
.chat-panel-input {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
}
@media (max-width: 768px) {
    body.conversation-open .messages-card,
    body.conversation-open .account-card.messages-card {
        overflow: hidden !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    body.conversation-open .messages-layout,
    body.conversation-open .account-content,
    body.conversation-open .account-content.active,
    body.conversation-open .account-main {
        overflow: hidden !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}