/**

 * ============================================================================

 * WARAP SERVICES - MAIN STYLES v11.0

 * ============================================================================

 * Site: https://warapservices.com

 * "L'Esprit Africain" - Digitaliser la débrouillardise locale

 * ============================================================================

 */



/* ============================================================================

   CSS VARIABLES - Design System WARAP

   ============================================================================ */



:root {

    /* Couleurs Principales WARAP */

    --primary: #f59e0b;

    --primary-dark: #d97706;

    --primary-light: #fef3c7;

    --primary-gradient: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);



    /* Couleurs Accent */

    --secondary: #10b981;

    --secondary-dark: #059669;

    --accent: #8b5cf6;



    /* Couleurs Status */

    --success: #22c55e;

    --warning: #eab308;

    --danger: #ef4444;

    --info: #3b82f6;



    /* Couleurs Neutres - Light Mode */

    --bg-primary: #ffffff;

    --bg-secondary: #f8fafc;

    --bg-tertiary: #f1f5f9;

    --text-primary: #0f172a;

    --text-secondary: #475569;

    --text-muted: #94a3b8;

    --border-color: #e2e8f0;

    --border-light: #f1f5f9;



    /* Ombres */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    --shadow-glow: 0 0 30px rgba(245, 158, 11, 0.3);



    /* Rayons */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 16px;

    --radius-xl: 24px;

    --radius-full: 9999px;



    /* Typographie */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;



    /* Transitions */

    --transition-fast: 0.15s ease;

    --transition-normal: 0.25s ease;

    --transition-slow: 0.4s ease;



    /* Z-Index */

    --z-dropdown: 1000;

    --z-sticky: 1020;

    --z-fixed: 1030;

    --z-modal-backdrop: 1040;

    --z-modal: 1050;

    --z-popover: 1060;

    --z-tooltip: 1070;

    --z-toast: 1080;

}



/* Dark Mode */

[data-theme="dark"] {

    --bg-primary: #0f172a;

    --bg-secondary: #1e293b;

    --bg-tertiary: #334155;

    --text-primary: #f8fafc;

    --text-secondary: #cbd5e1;

    --text-muted: #64748b;

    --border-color: #334155;

    --border-light: #1e293b;



    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

}



/* ============================================================================

   ACCESSIBILITY - WCAG 2.1 AA Compliance

   ============================================================================ */



/* Skip to main content link */

.skip-link {

    position: absolute;

    top: -100%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 99999;

    padding: 12px 24px;

    background: var(--primary);

    color: white;

    font-weight: 600;

    border-radius: var(--radius-md);

    text-decoration: none;

    transition: top 0.3s;

}



.skip-link:focus {

    top: 20px;

}



/* Enhanced focus states */

:focus-visible {

    outline: 3px solid var(--primary);

    outline-offset: 2px;

}



button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

    outline: 3px solid var(--primary);

    outline-offset: 2px;

}



/* Reduced motion for vestibular disorders */

@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;

    }

}



/* Skeleton loading animation */

.skeleton {

    background: linear-gradient(90deg,

            var(--bg-tertiary) 25%,

            var(--bg-secondary) 50%,

            var(--bg-tertiary) 75%);

    background-size: 200% 100%;

    animation: skeleton-loading 1.5s infinite;

    border-radius: var(--radius-sm);

}



@keyframes skeleton-loading {

    0% {

        background-position: 200% 0;

    }



    100% {

        background-position: -200% 0;

    }

}



.skeleton-text {

    height: 16px;

    margin-bottom: 8px;

}



.skeleton-text.short {

    width: 60%;

}



.skeleton-title {

    height: 24px;

    width: 80%;

    margin-bottom: 12px;

}



.skeleton-image {

    aspect-ratio: 4/3;

    width: 100%;

}



.skeleton-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

}



/* ============================================================================

   RESET & BASE

   ============================================================================ */



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: 16px;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}



body {

    font-family: var(--font-sans);

    background: var(--bg-secondary);

    color: var(--text-primary);

    line-height: 1.6;

    min-height: 100vh;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



a {

    color: var(--primary);

    text-decoration: none;

    transition: color var(--transition-fast);

}



a:hover {

    color: var(--primary-dark);

}



img,

video {

    max-width: 100%;

    height: auto;

    display: block;

}



button,

input,

select,

textarea {

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

    color: inherit;

}



button {

    cursor: pointer;

    border: none;

    background: transparent;

}



ul,

ol {

    list-style: none;

}



/* ============================================================================

   LAYOUT

   ============================================================================ */



.container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 20px;

}



.container-sm {

    max-width: 640px;

}



.container-md {

    max-width: 768px;

}



.container-lg {

    max-width: 1024px;

}



.container-xl {

    max-width: 1280px;

}



.section {

    padding: 60px 0;

}



.section-header {

    text-align: center;

    margin-bottom: 48px;

}



.section-title {

    font-size: 32px;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 12px;

}



.section-subtitle {

    font-size: 18px;

    color: var(--text-secondary);

}



/* Grid */

.grid {

    display: grid;

    gap: 24px;

}



.grid-2 {

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

}



.grid-3 {

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

}



.grid-4 {

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

}



@media (max-width: 1024px) {

    .grid-4 {

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

    }

}



@media (max-width: 768px) {



    .grid-2,

    .grid-3,

    .grid-4 {

        grid-template-columns: 1fr;

    }

}



/* Flex utilities */

.flex {

    display: flex;

}



.flex-col {

    flex-direction: column;

}



.items-center {

    align-items: center;

}



.justify-center {

    justify-content: center;

}



.justify-between {

    justify-content: space-between;

}



.gap-1 {

    gap: 4px;

}



.gap-2 {

    gap: 8px;

}



.gap-3 {

    gap: 12px;

}



.gap-4 {

    gap: 16px;

}



.gap-6 {

    gap: 24px;

}



/* ============================================================================

   TYPOGRAPHY

   ============================================================================ */



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 700;

    line-height: 1.2;

    color: var(--text-primary);

}



h1 {

    font-size: 48px;

}



h2 {

    font-size: 36px;

}



h3 {

    font-size: 28px;

}



h4 {

    font-size: 22px;

}



h5 {

    font-size: 18px;

}



h6 {

    font-size: 16px;

}



.text-sm {

    font-size: 14px;

}



.text-xs {

    font-size: 12px;

}



.text-lg {

    font-size: 18px;

}



.text-xl {

    font-size: 20px;

}



.text-2xl {

    font-size: 24px;

}



.text-muted {

    color: var(--text-muted);

}



.text-secondary {

    color: var(--text-secondary);

}



.text-primary {

    color: var(--primary);

}



.text-success {

    color: var(--success);

}



.text-danger {

    color: var(--danger);

}



.font-medium {

    font-weight: 500;

}



.font-semibold {

    font-weight: 600;

}



.font-bold {

    font-weight: 700;

}



/* ============================================================================

   HEADER / NAVBAR

   ============================================================================ */



.navbar {

    position: sticky;

    top: 0;

    z-index: var(--z-sticky);

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--border-light);

    transition: box-shadow var(--transition-normal);

}



[data-theme="dark"] .navbar {

    background: rgba(15, 23, 42, 0.9);

}



.navbar.scrolled {

    box-shadow: var(--shadow-md);

}



.navbar-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 70px;

    padding: 0 20px;

    max-width: 1400px;

    margin: 0 auto;

}



.navbar-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 24px;

    font-weight: 800;

    color: var(--text-primary);

}



.navbar-brand img {

    height: 40px;

    width: auto;

}



.navbar-brand span {

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.navbar-nav {

    display: flex;

    align-items: center;

    gap: 8px;

}



.nav-link {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: var(--radius-full);

    color: var(--text-secondary);

    font-weight: 500;

    transition: all var(--transition-fast);

}



.nav-link:hover {

    background: var(--bg-tertiary);

    color: var(--text-primary);

}



.nav-link.active {

    background: var(--primary-light);

    color: var(--primary-dark);

}



[data-theme="dark"] .nav-link.active {

    background: rgba(245, 158, 11, 0.2);

    color: var(--primary);

}



.navbar-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* Mobile menu toggle */

.navbar-toggle {

    display: none;

    width: 40px;

    height: 40px;

    border-radius: var(--radius-md);

    background: var(--bg-tertiary);

    align-items: center;

    justify-content: center;

    font-size: 20px;

}



@media (max-width: 1024px) {

    .navbar-nav {

        position: fixed;

        top: 70px;

        left: 0;

        right: 0;

        bottom: 0;

        background: var(--bg-primary);

        flex-direction: column;

        padding: 20px;

        transform: translateX(-100%);

        transition: transform var(--transition-normal);

    }



    .navbar-nav.open {

        transform: translateX(0);

    }



    .navbar-toggle {

        display: flex;

    }



    .nav-link {

        width: 100%;

        padding: 16px 20px;

        border-radius: var(--radius-md);

    }

}



/* ============================================================================

   BUTTONS

   ============================================================================ */



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 24px;

    border-radius: var(--radius-full);

    font-weight: 600;

    font-size: 15px;

    transition: all var(--transition-fast);

    white-space: nowrap;

}



.btn-sm {

    padding: 8px 16px;

    font-size: 14px;

}



.btn-lg {

    padding: 16px 32px;

    font-size: 17px;

}



.btn-primary {

    background: var(--primary-gradient);

    color: white;

    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);

    color: white;

}



.btn-secondary {

    background: var(--secondary);

    color: white;

}



.btn-secondary:hover {

    background: var(--secondary-dark);

    color: white;

}



.btn-outline {

    background: transparent;

    border: 2px solid var(--border-color);

    color: var(--text-primary);

}



.btn-outline:hover {

    border-color: var(--primary);

    color: var(--primary);

}



.btn-ghost {

    background: transparent;

    color: var(--text-secondary);

}



.btn-ghost:hover {

    background: var(--bg-tertiary);

    color: var(--text-primary);

}



.btn-whatsapp {

    background: #25d366;

    color: white;

}



.btn-whatsapp:hover {

    background: #128c7e;

    color: white;

}



.btn-icon {

    width: 44px;

    height: 44px;

    padding: 0;

    border-radius: var(--radius-full);

}



.btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none !important;

}



/* ============================================================================

   CARDS

   ============================================================================ */



.card {

    background: var(--bg-primary);

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-light);

    transition: all var(--transition-normal);

}



.card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-4px);

}



.card-image {

    position: relative;

    aspect-ratio: 4/3;

    overflow: hidden;

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform var(--transition-slow);

}



.card:hover .card-image img {

    transform: scale(1.05);

}



.card-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    padding: 6px 12px;

    border-radius: var(--radius-full);

    font-size: 12px;

    font-weight: 600;

    background: var(--primary);

    color: white;

}



.card-favorite {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    transition: all var(--transition-fast);

}



.card-favorite:hover,

.card-favorite.active {

    background: var(--danger);

    color: white;

}



.card-body {

    padding: 16px;

}



.card-title {

    font-size: 16px;

    font-weight: 600;

    margin-bottom: 8px;

    color: var(--text-primary);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.card-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    color: var(--text-muted);

    margin-bottom: 12px;

}



.card-price {

    font-size: 20px;

    font-weight: 700;

    color: var(--primary-dark);

}



.card-price .original {

    font-size: 14px;

    color: var(--text-muted);

    text-decoration: line-through;

    font-weight: 400;

    margin-left: 8px;

}



.card-rating {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 14px;

}



.card-rating i {

    color: var(--primary);

}



.card-rating span {

    color: var(--text-muted);

}



.card-footer {

    padding: 12px 16px;

    border-top: 1px solid var(--border-light);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* ============================================================================

   FORMS

   ============================================================================ */



.form-group {

    margin-bottom: 20px;

}



.form-label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: var(--text-primary);

}



.form-control {

    width: 100%;

    padding: 14px 16px;

    background: var(--bg-primary);

    border: 2px solid var(--border-color);

    border-radius: var(--radius-md);

    font-size: 15px;

    color: var(--text-primary);

    transition: all var(--transition-fast);

}



.form-control:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);

}



.form-control::placeholder {

    color: var(--text-muted);

}



textarea.form-control {

    resize: vertical;

    min-height: 120px;

}



.form-control-lg {

    padding: 18px 20px;

    font-size: 17px;

}



.form-helper {

    margin-top: 6px;

    font-size: 13px;

    color: var(--text-muted);

}



.form-error {

    color: var(--danger);

}



/* Input with icon */

.input-group {

    position: relative;

}



.input-group-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);

    pointer-events: none;

}



.input-group .form-control {

    padding-left: 48px;

}



/* Search input */

.search-input {

    display: flex;

    align-items: stretch;

    background: var(--bg-primary);

    border: 2px solid var(--border-color);

    border-radius: var(--radius-full);

    overflow: hidden;

    transition: all var(--transition-fast);

}



.search-input:focus-within {

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);

}



.search-input input {

    flex: 1;

    padding: 14px 20px;

    border: none;

    background: transparent;

}



.search-input input:focus {

    outline: none;

}



.search-input button {

    padding: 0 24px;

    background: var(--primary-gradient);

    color: white;

    font-weight: 600;

}



/* ============================================================================

   MODAL

   ============================================================================ */



.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    z-index: var(--z-modal-backdrop);

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-normal);

}



.modal-backdrop.show {

    opacity: 1;

    visibility: visible;

}



.modal {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.95);

    width: 90%;

    max-width: 500px;

    max-height: 90vh;

    background: var(--bg-primary);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-xl);

    z-index: var(--z-modal);

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-normal);

    overflow: hidden;

}



.modal.show {

    opacity: 1;

    visibility: visible;

    transform: translate(-50%, -50%) scale(1);

}



.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 24px;

    border-bottom: 1px solid var(--border-light);

}



.modal-title {

    font-size: 20px;

    font-weight: 700;

}



.modal-close {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    transition: all var(--transition-fast);

}



.modal-close:hover {

    background: var(--bg-tertiary);

    color: var(--text-primary);

}



.modal-body {

    padding: 24px;

    overflow-y: auto;

    max-height: calc(90vh - 140px);

}



.modal-footer {

    padding: 16px 24px;

    border-top: 1px solid var(--border-light);

    display: flex;

    justify-content: flex-end;

    gap: 12px;

}



/* ============================================================================

   AUTH MODAL PREMIUM STYLES (MODERN GLASSMORPHISM)

   ============================================================================ */



.modal-auth {

    max-width: 450px;

    max-height: 90vh;

    border-radius: 24px;

    overflow: hidden;

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;

}



[data-theme="dark"] .modal-auth {

    background: rgba(15, 23, 42, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.05);

}



.modal-auth-container {

    display: flex;

    flex-direction: column;

    max-height: 85vh;

}



/* Header */

.modal-auth-header {

    position: relative;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    padding: 40px 30px 30px;

    text-align: center;

    color: white;

    /* Subtle pattern overlay */

    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0);

    background-size: 20px 20px;

}



.modal-auth-header::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 0;

    right: 0;

    height: 20px;

    background: var(--bg-primary);

    border-radius: 24px 24px 0 0;

}



[data-theme="dark"] .modal-auth-header::after {

    background: var(--bg-secondary);

}



.modal-auth-header .modal-close {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 32px;

    height: 32px;

    color: white;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.modal-auth-header .modal-close:hover {

    background: rgba(255, 255, 255, 0.3);

    transform: rotate(90deg);

}



.modal-auth-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

    transform: translateY(0);

    transition: transform var(--transition-normal);

}



.modal-auth-logo:hover {

    transform: scale(1.05);

}



.modal-auth-logo img {

    width: 56px;

    height: 56px;

    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));

}



.modal-auth-logo span {

    font-size: 32px;

    font-weight: 900;

    letter-spacing: -1px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.modal-auth-subtitle {

    font-size: 15px;

    opacity: 0.95;

    margin: 0;

    font-weight: 500;

}



/* Tabs */

.modal-auth-tabs {

    display: flex;

    background: var(--bg-tertiary);

    padding: 6px;

    margin: 0 30px;

    border-radius: 16px;

    position: relative;

    z-index: 10;

    margin-top: -10px;

    /* Overlap header */

    box-shadow: var(--shadow-sm);

}



.auth-tab {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px;

    border-radius: 12px;

    font-weight: 600;

    font-size: 15px;

    color: var(--text-muted);

    background: transparent;

    cursor: pointer;

    transition: all var(--transition-fast);

    border: none;

}



.auth-tab:hover {

    color: var(--text-primary);

    background: rgba(0, 0, 0, 0.02);

}



.auth-tab.active {

    background: var(--bg-primary);

    color: var(--primary);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



[data-theme="dark"] .auth-tab.active {

    background: var(--bg-secondary);

    color: var(--primary);

}



/* Content */

.modal-auth-content {

    padding: 30px;

    max-height: calc(90vh - 250px);

    overflow-y: auto;

    /* Custom Scrollbar */

    scrollbar-width: thin;

    scrollbar-color: var(--border-color) transparent;

}



.modal-auth-content::-webkit-scrollbar {

    width: 6px;

}



.modal-auth-content::-webkit-scrollbar-thumb {

    background-color: var(--border-color);

    border-radius: 3px;

}



/* Form Styles */

.auth-form .form-label {

    font-size: 14px;

    font-weight: 600;

    color: var(--text-secondary);

    margin-bottom: 8px;

    padding-left: 4px;

}



.auth-form .input-group-icon {

    left: 16px;

    color: var(--text-muted);

    font-size: 16px;

}



.auth-form .input-group .form-control {

    padding-left: 48px;

    padding-right: 48px;

    height: 52px;

    border-radius: 14px;

    background: var(--bg-secondary);

    border: 1px solid transparent;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.auth-form .input-group .form-control:focus {

    background: var(--bg-primary);

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);

    transform: translateY(-1px);

}



.auth-form .input-group-toggle {

    right: 12px;

    width: 40px;

    height: 40px;

}



/* Auth Options Row */

.auth-options {

    margin: 24px 0;

}



.checkbox-label span {

    font-size: 14px;

    color: var(--text-secondary);

}



.forgot-link {

    font-size: 13px;

    font-weight: 500;

}



/* Auth Submit Button */

.auth-submit {

    width: 100%;

    margin-top: 12px;

    height: 54px;

    border-radius: 14px;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.5px;

    background: var(--primary-gradient);

    box-shadow: 0 8px 20px -4px rgba(245, 158, 11, 0.4);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.auth-submit:hover {

    transform: translateY(-2px) scale(1.02);

    box-shadow: 0 12px 24px -4px rgba(245, 158, 11, 0.5);

}



.auth-submit:active {

    transform: translateY(0) scale(0.98);

}



/* Loading/Sending state */

.auth-submit.loading {

    cursor: wait;

    opacity: 0.9;

}



/* Divider */

.auth-divider {

    margin: 24px 0;

}



.auth-divider span {

    font-size: 12px;

    font-weight: 600;

    color: var(--text-muted);

    background: var(--bg-primary);

    padding: 0 12px;

}



/* WhatsApp Button */

.btn-whatsapp {

    background: #25d366;

    height: 50px;

    border-radius: 14px;

    font-weight: 600;

    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);

    border: none;

    transition: all 0.2s ease;

}



.btn-whatsapp:hover {

    background: #20bd5a;

    transform: translateY(-2px);

    box-shadow: 0 8px 16px rgba(37, 211, 102, 0.3);

}



/* Password Strength */

.password-strength {

    height: 4px;

    margin-top: 10px;

    gap: 6px;

    padding: 0 4px;

}



.password-strength .strength-bar {

    border-radius: 4px;

    background: var(--border-color);

}



/* Footer */

.modal-auth-footer {

    padding: 20px 30px;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-light);

}



.modal-auth-footer p {

    font-size: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}



/* Mobile Responsive */

@media (max-width: 480px) {

    .modal-auth {

        max-width: 100%;

        height: 100%;

        max-height: 100%;

        border-radius: 0;

    }



    .modal-auth-header {

        padding: 40px 20px 30px;

    }



    .modal-auth-tabs {

        margin: -15px 16px 0;

    }



    .modal-auth-content {

        padding: 24px 20px;

        max-height: none;

        /* Let it scroll naturally on mobile full screen */

        flex: 1;

    }



    .modal-auth-container {

        min-height: 100vh;

    }

}



/* ============================================================================

   HERO SECTION

   ============================================================================ */



.hero {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    background: var(--primary-gradient);

    overflow: hidden;

}



.hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');

    background-size: 30px 30px;

    animation: heroPattern 20s linear infinite;

}



@keyframes heroPattern {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(30px);

    }

}



.hero-content {

    position: relative;

    z-index: 1;

    text-align: center;

    padding: 60px 20px;

    max-width: 800px;

    margin: 0 auto;

}



.hero-title {

    font-size: 48px;

    font-weight: 800;

    color: white;

    margin-bottom: 20px;

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}



.hero-subtitle {

    font-size: 20px;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 32px;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



.hero-search {

    max-width: 600px;

    margin: 0 auto;

}



.hero-search .search-input {

    background: white;

    border: none;

    box-shadow: var(--shadow-xl);

}



@media (max-width: 768px) {

    .hero-title {

        font-size: 32px;

    }



    .hero-subtitle {

        font-size: 16px;

    }

}



/* ============================================================================

   CATEGORIES

   ============================================================================ */



.categories-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    gap: 16px;

}



.category-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 24px 16px;

    background: var(--bg-primary);

    border-radius: var(--radius-lg);

    border: 1px solid var(--border-light);

    text-align: center;

    transition: all var(--transition-normal);

}



.category-card:hover {

    border-color: var(--primary);

    box-shadow: var(--shadow-md);

    transform: translateY(-4px);

}



.category-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: var(--primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: var(--primary-dark);

    margin-bottom: 12px;

}



[data-theme="dark"] .category-icon {

    background: rgba(245, 158, 11, 0.2);

}



.category-name {

    font-weight: 600;

    color: var(--text-primary);

}



.category-count {

    font-size: 13px;

    color: var(--text-muted);

}



/* ============================================================================

   FOOTER

   ============================================================================ */



.footer {

    background: var(--text-primary);

    color: white;

    padding: 60px 0 30px;

    margin-top: auto;

}



[data-theme="dark"] .footer {

    background: #020617;

}



.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 40px;

    margin-bottom: 40px;

}



@media (max-width: 1024px) {

    .footer-grid {

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

    }

}



@media (max-width: 640px) {

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

}



.footer-brand {

    font-size: 28px;

    font-weight: 800;

    color: var(--primary);

    margin-bottom: 16px;

}



.footer-description {

    color: rgba(255, 255, 255, 0.7);

    line-height: 1.7;

    margin-bottom: 20px;

}



.footer-social {

    display: flex;

    gap: 12px;

}



@media (max-width: 640px) {

    .footer-social {

        justify-content: center;

    }

}



.footer-social a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    transition: all var(--transition-fast);

}



.footer-social a:hover {

    background: var(--primary);

    transform: translateY(-3px);

}



.footer-title {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 20px;

    color: white;

}



.footer-links {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.footer-links a {

    color: rgba(255, 255, 255, 0.7);

    transition: all var(--transition-fast);

}



.footer-links a:hover {

    color: var(--primary);

    padding-left: 5px;

}



.footer-bottom {

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

}



.footer-copyright {

    color: rgba(255, 255, 255, 0.5);

    font-size: 14px;

}



.footer-copyright a {

    color: var(--primary);

}



.footer-copyright a:hover {

    text-decoration: underline;

}



.footer-bottom-links {

    display: flex;

    gap: 24px;

    font-size: 13px;

}



.footer-bottom-links a {

    color: rgba(255, 255, 255, 0.5);

    transition: color var(--transition-fast);

}



.footer-bottom-links a:hover {

    color: var(--primary);

}



.footer-parent {

    font-size: 13px;

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 16px;

}



.footer-parent a {

    color: var(--primary);

}



@media (max-width: 640px) {

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }



    .footer-bottom-links {

        justify-content: center;

        flex-wrap: wrap;

        gap: 16px;

    }

}



/* ============================================================================

   LEGAL PAGES STYLES

   ============================================================================ */



.legal-content {

    background: var(--bg-primary);

    padding: 40px;

    border-radius: var(--radius-lg);

    margin-top: 32px;

}



.legal-content h2 {

    font-size: 20px;

    color: var(--text-primary);

    margin-top: 32px;

    margin-bottom: 16px;

    padding-bottom: 8px;

    border-bottom: 2px solid var(--primary-light);

}



.legal-content h2:first-child {

    margin-top: 0;

}



.legal-content p {

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 16px;

}



.legal-content ul {

    list-style: disc;

    padding-left: 24px;

    margin-bottom: 16px;

}



.legal-content li {

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 8px;

}



.legal-content a {

    color: var(--primary);

    text-decoration: underline;

}



.info-box {

    background: var(--bg-tertiary);

    padding: 20px;

    border-radius: var(--radius-md);

    border-left: 4px solid var(--primary);

    margin: 16px 0;

}



.info-box p {

    margin-bottom: 8px;

}



.info-box ul {

    margin-bottom: 0;

}



.legal-footer {

    margin-top: 40px;

    padding-top: 24px;

    border-top: 1px solid var(--border-color);

    text-align: center;

    color: var(--text-muted);

}



.legal-footer p {

    margin-bottom: 8px;

}



@media (max-width: 768px) {

    .legal-content {

        padding: 24px 16px;

    }

}



/* ============================================================================

   UTILITIES

   ============================================================================ */



.hidden {

    display: none !important;

}



.invisible {

    visibility: hidden;

}



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}



.text-center {

    text-align: center;

}



.text-left {

    text-align: left;

}



.text-right {

    text-align: right;

}



.w-full {

    width: 100%;

}



.h-full {

    height: 100%;

}



.m-0 {

    margin: 0;

}



.p-0 {

    padding: 0;

}



.mt-4 {

    margin-top: 16px;

}



.mb-4 {

    margin-bottom: 16px;

}



.my-4 {

    margin-top: 16px;

    margin-bottom: 16px;

}



.mx-auto {

    margin-left: auto;

    margin-right: auto;

}



.rounded {

    border-radius: var(--radius-md);

}



.rounded-lg {

    border-radius: var(--radius-lg);

}



.rounded-full {

    border-radius: var(--radius-full);

}



.overflow-hidden {

    overflow: hidden;

}



.overflow-auto {

    overflow: auto;

}



/* Animations */

@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}



@keyframes spin {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



.animate-fadeIn {

    animation: fadeIn 0.5s ease-out;

}



.animate-slideUp {

    animation: slideUp 0.5s ease-out;

}



.animate-pulse {

    animation: pulse 2s infinite;

}



.animate-spin {

    animation: spin 1s linear infinite;

}



/* Loading spinner */

.spinner {

    width: 40px;

    height: 40px;

    border: 3px solid var(--border-color);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}



/* Skeleton */

.skeleton {

    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);

    background-size: 200% 100%;

    animation: skeletonShimmer 1.5s infinite;

}



@keyframes skeletonShimmer {

    0% {

        background-position: 200% 0;

    }



    100% {

        background-position: -200% 0;

    }

}



/* ============================================================================

   RESPONSIVE UTILITIES

   ============================================================================ */



@media (max-width: 768px) {

    .hide-mobile {

        display: none !important;

    }

}



@media (min-width: 769px) {

    .hide-desktop {

        display: none !important;

    }

}



/* ============================================================================

   PRINT STYLES

   ============================================================================ */



@media print {



    .navbar,

    .footer,

    .btn,

    .no-print {

        display: none !important;

    }



    body {

        background: white;

        color: black;

    }



    .card {

        box-shadow: none;

        border: 1px solid #ddd;

    }

}



/* ============================================================================ 

   FLOATING BUTTONS

   ============================================================================ */



.whatsapp-float {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 60px;

    height: 60px;

    background-color: #25d366;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

    z-index: 9999;

    transition: all 0.3s ease;

    text-decoration: none;

    overflow: visible;

}



.whatsapp-float:hover {

    transform: scale(1.1);

    background-color: #128c7e;

    color: white;

}



.whatsapp-float i {

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

}



@media (max-width: 768px) {

    .whatsapp-float {

        width: 50px;

        height: 50px;

        bottom: 20px;

        right: 20px;

        font-size: 24px;

    }

}



/* ============================================================================ 

   ANIMATIONS

   ============================================================================ */



/* Pulse Animation for Agent Button */

.pulse-animation {

    animation: pulse-orange 2s infinite;

}



@keyframes pulse-orange {

    0% {

        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);

    }



    70% {

        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);

    }



    100% {

        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);

    }

}



/* ============================================================================ 

   MOBILE FIRST OPTIMIZATIONS - Pour les utilisateurs camerounais sur mobile

   ============================================================================ */



/* Touch Optimizations */

*,

*::before,

*::after {

    -webkit-tap-highlight-color: transparent;

}



/* Améliorer la réactivité tactile */

a,

button,

.btn,

.card,

.nav-link,

input,

select,

textarea {

    touch-action: manipulation;

}



/* Minimum touch target size (44x44px recommandé par Apple/Google) */

.touch-target {

    min-height: 44px;

    min-width: 44px;

}



/* Safe Area - Pour les téléphones avec encoches (iPhone X+, etc.) */

body {

    padding-left: env(safe-area-inset-left);

    padding-right: env(safe-area-inset-right);

}



.navbar {

    padding-top: env(safe-area-inset-top);

}



.footer {

    padding-bottom: calc(30px + env(safe-area-inset-bottom));

}



.whatsapp-float {

    bottom: calc(20px + env(safe-area-inset-bottom));

    right: calc(20px + env(safe-area-inset-right));

}



/* Prevent zoom on input focus (iOS) */

@media screen and (max-width: 768px) {



    input[type="text"],

    input[type="email"],

    input[type="password"],

    input[type="tel"],

    input[type="number"],

    input[type="search"],

    select,

    textarea {

        font-size: 16px !important;

    }

}



/* Amélioration du scroll sur mobile */

.scroll-container {

    -webkit-overflow-scrolling: touch;

    overflow-y: auto;

}



/* Optimisation des images pour mobile */

img {

    image-rendering: -webkit-optimize-contrast;

    content-visibility: auto;

}



/* Pull-to-refresh friendly */

html {

    overscroll-behavior-y: contain;

}



/* Reduce motion pour économie de batterie */

@media (prefers-reduced-motion: reduce) {



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* Performance: GPU acceleration pour les éléments qui bougent */

.card,

.btn,

.modal,

.navbar,

.whatsapp-float {

    will-change: transform;

    transform: translateZ(0);

    backface-visibility: hidden;

}



/* Bottom navigation fixed (style app mobile) */

.mobile-bottom-nav {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: var(--bg-primary);

    border-top: 1px solid var(--border-color);

    padding: 8px 0;

    padding-bottom: calc(8px + env(safe-area-inset-bottom));

    z-index: var(--z-fixed);

}



.mobile-bottom-nav .nav-items {

    display: flex;

    justify-content: space-around;

    align-items: center;

}



.mobile-bottom-nav .nav-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 8px 16px;

    color: var(--text-muted);

    font-size: 10px;

    text-decoration: none;

    transition: color var(--transition-fast);

}



.mobile-bottom-nav .nav-item i {

    font-size: 20px;

}



.mobile-bottom-nav .nav-item.active,

.mobile-bottom-nav .nav-item:hover {

    color: var(--primary);

}



@media (max-width: 768px) {

    .mobile-bottom-nav {

        display: block;

    }



    /* Ajouter padding en bas du body pour le bottom nav */

    body {

        padding-bottom: calc(70px + env(safe-area-inset-bottom));

    }



    /* Masquer la navbar classique sur mobile si bottom nav activée */

    .navbar-nav {

        display: none !important;

    }



    .navbar-toggle {

        display: none !important;

    }

}



/* Styles spécifiques pour petits écrans (< 360px - Téléphones économiques) */

@media (max-width: 360px) {

    :root {

        --radius-sm: 6px;

        --radius-md: 8px;

        --radius-lg: 12px;

    }



    .container {

        padding: 0 12px;

    }



    .btn {

        padding: 10px 18px;

        font-size: 14px;

    }



    .hero-title {

        font-size: 26px;

    }



    .section-title {

        font-size: 24px;

    }



    .card-body {

        padding: 12px;

    }



    .form-control {

        padding: 12px 14px;

    }

}



/* Orientation landscape sur mobile */

@media (max-width: 768px) and (orientation: landscape) {

    .hero {

        min-height: auto;

        padding: 40px 0;

    }



    .hero-content {

        padding: 20px;

    }



    .navbar-inner {

        height: 50px;

    }

}



/* Dark mode automatique pour économiser batterie OLED */

@media (prefers-color-scheme: dark) {

    html:not([data-theme="light"]) {

        --bg-primary: #0f172a;

        --bg-secondary: #1e293b;

        --bg-tertiary: #334155;

        --text-primary: #f8fafc;

        --text-secondary: #cbd5e1;

        --text-muted: #64748b;

        --border-color: #334155;

        --border-light: #1e293b;

    }

}