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

:root {
    --primary: #1f2e52;
    --primary-dark: #0f1929;
    --primary-light: #2d3968;
    --secondary: #59c6f2;
    --secondary-dark: #2fa8e0;
    --secondary-light: #80d4f9;
    --white: #FFFFFF;
    --off-white: #f8f9fb;
    --gray-50: #f1f3f8;
    --gray-100: #e7ecf3;
    --gray-200: #d9e2ed;
    --gray-300: #c2cee2;
    --gray-400: #a7b0c9;
    --gray-500: #8b92b0;
    --gray-600: #7c84a2;
    --gray-700: #6a7290;
    --gray-800: #595a7e;
    --gray-900: #484a6b;
    --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(--gray-700);
    background: var(--off-white);
    overflow-x: clip;
}

.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%, #2d4885 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(15, 25, 41, 0.12);
    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(15, 25, 41, 0.06);
    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: #334155;
    text-decoration: none;
    border-radius: 16px;
    transition: all 0.15s ease;
    cursor: pointer;
}

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

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

.nav-dropdown-item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #94a3b8;
    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: #eef2ff !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: #334155;
    transition: background 0.15s;
}
.nav-dropdown-toggle:hover {
    background: #f1f5f9;
}
.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,
#page-compte .page-hero {
    padding: 80px 0 24px;
}

.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(--secondary);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(89, 198, 242, 0.3);
}

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

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
}

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

.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: 100px 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, #6a6472, #4a4462);
}

.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: #f0f4ff;
    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, #1a8ec8);
    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, #1a8ec8);
    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, #1a8ec8);
    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);
    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: #A4B4DC;
    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;
}

/* ===== 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: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-dark);
    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: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    text-align: center;
}

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

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

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

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

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

/* ===== ABOUT: HERO ===== */
/* ===== ABOUT: HERO ===== */
.about-hero {
    padding: 100px 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, #3b82f6);
    -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, #3b82f6);
    -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: 88px;
        right: 0;
        height: auto;
        width: min(70%, 300px);
        background: linear-gradient(160deg, #1f2e52 0%, #151d36 100%);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 14px 12px;
        gap: 2px;
        box-shadow: -14px 0 40px rgba(0,0,0,0.35);
        border-radius: 22px 0 0 22px;
        transform: translateX(110%);
        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 {
        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, #2194c4) !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: 60px 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%, #2d4885 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: #2d4885;
}

.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 {
    background: linear-gradient(135deg, #59c6f2, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.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: #A8A8A8;
}

.hero-search-submit {
    width: 170px;
    height: 36px;
    background: #3b569b;
    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: #4d6ab0;
}

.hero-search-submit-offres {
    background: #3b569b;
}

.hero-search-submit-offres:hover {
    background: #4d6ab0;
}

@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;
    background: rgba(89,198,242,0.15);
    color: var(--secondary);
    font-size: 12px;
    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: none;
}

@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, #f7f9fc 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, #1a2a52 0%, #2d4885 50%, #1a2a52 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: #f8fafc;
}
.home-testimonials {
    padding: 140px 0 80px;
    background: #edf2f7;
    margin-top: 60px;
}
.home-testimonials .section-header-center h2 {
    color: #1f2e52;
    font-weight: 700;
}
.home-testimonials .section-header-center p {
    color: #4a5568;
}
.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 #cbd5e0;
    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: #1a202c;
    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: #1a202c; font-weight: 700; }
.temo-info span { font-size: 12px; color: #2d3748; }

/* --- Scroll Reviews --- */
.home-scroll-reviews {
    padding: 20px 0 10px;
    background: #f8fafc;
    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, #f8fafc, transparent); }
.home-scroll-reviews::after { right: 0; background: linear-gradient(to left, #f8fafc, 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: #2d3748; 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: #1a202c; font-weight: 700; }
.sr-info span { font-size: 11px; color: #4a5568; }

/* --- Final CTA --- */
.home-cta {
    padding: 40px 0;
    background: linear-gradient(160deg, #0f1929 0%, #1a2a52 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 { flex-direction: column; gap: 16px; padding: 30px 10px; }
    .home-stats-card { flex: none; width: 100%; max-width: 220px; padding: 0; }
    .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: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(89, 198, 242, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(89, 198, 242, 0.5);
}
.chat-floating-btn:active {
    transform: scale(0.95);
}
.chat-floating-btn.hidden {
    display: none;
}

/* ===== 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);
}

/* ===== CHAT MODAL (WhatsApp Style) ===== */
.chat-modal {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 420px;
    max-width: calc(100vw - 40px);
    height: 600px;
    max-height: calc(100vh - 100px);
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 10000;
    flex-direction: column;
    overflow: hidden;
    animation: chatSlideUp 0.3s ease;
}

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

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

/* WhatsApp Header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--primary);
    color: var(--white);
    min-height: 60px;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-header h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #fff;
}

.chat-status {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.chat-header-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.chat-header-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* WhatsApp Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 16px;
}

/* WhatsApp Message Bubbles */
.chat-message {
    max-width: 65%;
    padding: 6px 7px 8px 9px;
    border-radius: 16px;
    font-size: 14.2px;
    line-height: 1.35;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
    margin-top: 2px;
    clear: both;
}

.chat-message.received {
    align-self: flex-start;
    background: #FFFFFF;
    border-radius: 16px;
}

.chat-message.received::after {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #FFFFFF transparent transparent;
    filter: drop-shadow(-1px 0 0.5px rgba(0,0,0,0.13));
}

.chat-message.sent {
    align-self: flex-end;
    background: #DBEAFE;
    color: var(--primary);
    border-radius: 16px;
}

.chat-message.sent::after {
    content: '';
    position: absolute;
    top: 0;
    right: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 8px 8px;
    border-color: transparent transparent transparent #DBEAFE;
    filter: drop-shadow(1px 0 0.5px rgba(0,0,0,0.13));
}

/* Time + read receipt inside bubble */
.chat-message-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: rgba(0,0,0,0.4);
    float: right;
    margin: 4px 0 -4px 8px;
    line-height: 1;
    white-space: nowrap;
}

.chat-message.sent .chat-message-time {
    color: rgba(0,0,0,0.4);
}

/* Message Status (read receipts) */
.message-status {
    display: inline-flex;
    align-items: center;
    gap: -2px;
    margin-left: 2px;
}

.message-status svg {
    width: 14px;
    height: 14px;
}

.message-status.read svg {
    color: var(--secondary);
}

/* WhatsApp Input Area */
.chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    background: #F0F2F5;
    position: relative;
}

.chat-input {
    flex: 1;
    border: none;
    border-radius: 21px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 15px;
    resize: none;
    outline: none;
    background: #FFFFFF;
    min-height: 42px;
    max-height: 100px;
    line-height: 1.35;
    color: #111B21;
    box-shadow: none;
}

.chat-input::placeholder {
    color: #667781;
}

.chat-input:focus {
    border: none;
    outline: none;
}

.chat-send {
    width: 42px;
    height: 42px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.chat-send:hover {
    background: var(--primary-light);
}

/* Chat Input Icon Buttons */
.chat-input-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #54656F;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.chat-input-btn:hover {
    background: rgba(0,0,0,0.05);
}

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

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #8696A0;
    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.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Reply Preview */
.chat-reply-preview {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #F0F2F5;
    border-top: 1px solid #E9EDEF;
    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: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Message Context Menu */
.message-context-menu {
    position: absolute;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    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 */
.chat-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: 16px;
    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 #E9EDEF;
    background: #F0F2F5;
}

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

.emoji-cat:hover { background: rgba(0,0,0,0.05); }
.emoji-cat.active { background: rgba(27,42,74,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: 16px;
    text-align: center;
    transition: background 0.1s;
    line-height: 1;
}

.emoji-grid span:hover { background: #F0F2F5; 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: 16px;
    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: #334155;
    transition: background 0.15s;
    text-align: left;
}

.attach-option:hover { background: #F0F2F5; }
.panel-attach-menu { bottom: auto; top: 100%; left: 52px; margin-bottom: 0; margin-top: 8px; }

/* ===== MIC BUTTON ===== */
.chat-mic-btn {
    width: 42px; height: 42px; background: none; color: #54656F;
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s, color 0.2s; flex-shrink: 0;
}

.chat-mic-btn:hover { background: rgba(0,0,0,0.05); }

.chat-mic-btn.recording { color: #EF4444; animation: pulse-record 1.5s infinite; }

@keyframes pulse-record { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ===== 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: 16px; 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: 16px; 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: #111B21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size { font-size: 11px; color: #667781; }

/* ===== 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: #667781; }

.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: #F0F2F5; }

/* ===== EDIT MESSAGE ===== */
.message-edit-area { display: flex; flex-direction: column; gap: 4px; }
.message-edit-area textarea { width: 100%; border: none; border-radius: 16px; padding: 6px 8px; font-family: inherit; font-size: 14px; resize: none; outline: none; background: rgba(0,0,0,0.06); min-height: 36px; }
.message-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.message-edit-actions button { padding: 4px 12px; border: none; border-radius: 16px; 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: #334155; }
.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; clear: both; }
.chat-date-separator span { background: rgba(0,0,0,0.08); color: #54656F; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 16px; white-space: nowrap; }

/* ===== SEARCH BAR ===== */
.chat-search-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: #F0F2F5; border-bottom: 1px solid #E9EDEF; }
.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; }
.chat-search-bar .search-count { font-size: 12px; color: #667781; white-space: nowrap; min-width: 40px; text-align: center; }
.chat-search-bar button { background: none; border: none; cursor: pointer; color: #54656F; 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); }
.chat-message.search-highlight { outline: 2px solid var(--secondary); border-radius: 16px; background: rgba(89,198,242,0.08) !important; }
.chat-message.search-active { outline: 3px solid var(--secondary); background: rgba(89,198,242,0.15) !important; }

/* ===== UNREAD BADGE ===== */
.conversation-badge { background: var(--secondary); 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: #8696A0; 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: 16px; 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: #334155; 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: 36px; height: 36px; background: #fff; border: none; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; color: #54656F; transition: opacity 0.2s;
}
.scroll-to-bottom.visible { display: flex; animation: fadeUp 0.2s ease; }
.scroll-to-bottom .badge { position: absolute; top: -4px; right: -4px; background: var(--secondary); color: #fff; 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 ===== */
.chat-dropdown-menu { display: none; position: absolute; top: 100%; right: 8px; background: #fff; border-radius: 16px; 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: #334155; transition: background 0.15s; text-align: left; }
.chat-dropdown-menu button:hover { background: #F0F2F5; }
.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: 16px; width: 340px; max-width: 90vw; max-height: 400px; overflow: hidden; display: flex; flex-direction: column; }
.forward-modal-header { padding: 16px; border-bottom: 1px solid #E9EDEF; font-size: 16px; font-weight: 600; color: #111B21; }
.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: #F0F2F5; }
.forward-modal-item .conv-name { font-size: 14px; color: #111B21; }

@media (max-width: 480px) {
    .chat-modal {
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 16px;
    }
}

/* ===== 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: #F0F2F5;
    border-radius: 22px;
    padding: 8px 14px;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    transition: background 0.15s;
}

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

.acct-wa-search svg {
    color: #54656F;
    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: #8696A0;
}

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

.acct-toolbar .wa-search-clear {
    border: none;
    background: #8696A0;
    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: #667781;
}

.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 {
        width: 100%;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        box-shadow: 0 2px 12px rgba(27, 42, 74, 0.05);
    }
    
    .account-sidebar:hover {
        box-shadow: 0 2px 12px rgba(27, 42, 74, 0.05);
    }
    
    .sidebar-profile {
        width: 100%;
        border-radius: 16px;
    }
    
    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        width: 100%;
        padding: 10px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    
    .sidebar-nav::-webkit-scrollbar {
        height: 3px;
    }
    
    .sidebar-nav::-webkit-scrollbar-thumb {
        background: var(--gray-200);
        border-radius: 16px;
    }
    
    .sidebar-link {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 13px;
        flex-shrink: 0;
    }
    
    .sidebar-link.active {
        box-shadow: none;
        border-bottom: 2px solid var(--secondary);
        border-radius: 16px;
    }
    
    .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 {
    padding: 0 !important;
    overflow: hidden;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.06);
    border-radius: 16px;
    max-width: 960px;
    margin: 20px auto;
    background: #fff;
}

.messages-layout {
    display: flex;
    height: 520px;
    min-height: 0;
}

/* Conversations Panel */
.conversations-panel {
    width: 300px;
    border-right: 1px solid #EDF2F7;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #FAFBFC;
}

.conversations-header {
    padding: 16px 16px 12px;
    background: #fff;
    border-bottom: 1px solid #EDF2F7;
    display: flex;
    align-items: center;
}

.conversations-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1A202C;
    margin: 0;
    letter-spacing: -0.01em;
}

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

.conversation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 6px;
    border-radius: 16px;
}

.conversation-item:hover {
    background: #EDF2F7;
}

.conversation-item.active {
    background: #EBF4FF;
}

.conversation-avatar {
    width: 38px;
    height: 38px;
    border-radius: 16px;
    background: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A5568;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
}

.conversation-item.active .conversation-avatar {
    background: #3182CE;
    color: #fff;
}

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

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

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

.conversation-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.conversation-time {
    font-size: 11px;
    color: #A0AEC0;
}

.conversation-unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3182CE;
}

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

.chat-panel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #A0AEC0;
    gap: 8px;
    background: #F7FAFC;
}

.chat-panel-empty p {
    font-size: 14px;
    margin: 0;
    color: #A0AEC0;
}

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

/* Panel Header */
.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #3182CE;
    min-height: 56px;
}

.chat-panel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-panel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 16px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.chat-panel-header h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.chat-panel-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.chat-panel-delete {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.chat-panel-delete:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Panel Messages */
.chat-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    background-color: #F7FAFC;
}

.chat-panel-messages::-webkit-scrollbar {
    width: 4px;
}
.chat-panel-messages::-webkit-scrollbar-thumb {
    background: #CBD5E0;
    border-radius: 16px;
}
.chat-panel-messages::-webkit-scrollbar-thumb:hover {
    background: #A0AEC0;
}

/* Panel Messages */
.panel-message {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
}

.panel-message.received {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-bottom-left-radius: 4px;
}

.panel-message.sent {
    align-self: flex-end;
    background: #3182CE;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.panel-message-time,
.panel-message .chat-message-time {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    float: right;
    margin: 6px 0 -4px 8px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.7;
}

.panel-message.received .panel-message-time,
.panel-message.received .chat-message-time {
    color: #718096;
}

.panel-message.sent .panel-message-time,
.panel-message.sent .chat-message-time {
    color: rgba(255,255,255,0.8);
}

/* Panel Input Area */
.chat-panel-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #EDF2F7;
}

.chat-panel-input textarea {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    resize: none;
    outline: none;
    background: #F7FAFC;
    max-height: 80px;
    line-height: 1.45;
    transition: all 0.2s;
    color: #2D3748;
}

.chat-panel-input textarea::placeholder {
    color: #A0AEC0;
}

.chat-panel-input textarea:focus {
    border-color: #3182CE;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(49,130,206,0.1);
}

.chat-panel-send {
    width: 38px;
    height: 38px;
    background: #3182CE;
    color: #fff;
    border: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.chat-panel-send:hover {
    background: #2B6CB0;
    box-shadow: 0 2px 8px rgba(49,130,206,0.3);
}

.chat-panel-send:active {
    transform: scale(0.95);
}

/* Empty state small */
.empty-state-sm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #A0AEC0;
    text-align: center;
    gap: 8px;
}

.empty-state-sm p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #718096;
}

.empty-state-sm span {
    font-size: 12px;
    color: #A0AEC0;
}

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

    .messages-layout {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    
    .conversations-panel {
        width: 100%;
        max-height: 280px;
        border-right: none;
        border-bottom: 1px solid #EDF2F7;
    }
    
    .chat-panel {
        height: 380px;
    }
}

/* ===== 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: #EFF6FF;
    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) ===== */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    background: var(--white);
    transition: background 0.2s;
}
.notif-item.unread {
    background: var(--orange-subtle);
    border-color: var(--orange-glow);
}
.notif-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--off-white);
    border-radius: 50%;
}
.notif-content {
    flex: 1;
    min-width: 0;
}
.notif-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}
.notif-msg {
    font-size: 12px;
    color: var(--text-muted);
    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: 4px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* ===== 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%, #141e34 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, #1a2332 0%, #2d4263 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(--secondary); }
.btp-hero-form .btn.btn-whatsapp { background: #25D366; 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, #1a2332 0%, #2d4263 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(--secondary); }
.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 #e5e7eb;
    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 #e5e7eb;
    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: #f9fafb;
    border: 1.5px solid #f3f4f6;
    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 #e5e7eb;
    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: #e5e7eb;
    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: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    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 {
    box-shadow: 0 8px 24px rgba(89, 198, 242, 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: 16px;
    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: 16px;
    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: 16px;
    background: #2d4885;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.chat-login-btn:hover {
    background: #1a2a52;
}
.chat-login-btn-secondary {
    background: #fff;
    color: #2d4885;
    border: 1px solid #2d4885;
}
.chat-login-btn-secondary:hover {
    background: #f1f5f9;
}



/* ============================================================
   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; }
    .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;
    }

    /* The hamburger button is always visible on mobile (top right) */
    .hamburger {
        display: flex !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;
    }

    .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-width: 1.9;
        opacity: 0.85;
        transition: stroke 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: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
        box-shadow: 0 4px 14px rgba(47, 168, 224, 0.45);
        transform: translateY(-1px);
    }

    .mobile-bottom-nav .bottom-nav-link.active .bottom-nav-icon svg {
        stroke: #ffffff;
        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: hide the hamburger and its dropdown */
    body.has-bottom-nav .hamburger {
        display: none !important;
    }

    body.has-bottom-nav .nav-menu {
        visibility: hidden;
        pointer-events: none;
    }

    /* Lift the floating chat button above the bottom bar */
    body.has-bottom-nav .chat-floating-btn {
        bottom: 96px;
    }
}

/* ============================================================
   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: 28px;
    height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, #59c6f2, #2fa8e0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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: #0f172a;
}

.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, #2194c4);
}

.install-toast-close {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.install-toast-close:hover {
    color: #475569;
}

@media (max-width: 768px) {
    .install-toast {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}