/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-fixed);
    background-image: var(--color-bg-body);
    background-attachment: fixed;
    background-size: 100% 100%;
    color: var(--color-text-main);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-accent);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: 3rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.25rem;
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
}

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

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

ul,
ol {
    list-style: none;
    /* Remove default bullets globally */
    margin: 0;
    padding: 0;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Layout --- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

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

.bg-alt {
    background-color: var(--color-bg-alt);
}

/* --- Components --- */

.faq-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
    /* Petit tiret de separation discret à la place de la carte */
}

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-normal);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-primary);
    color: #ffffff !important;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

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

.btn-outline:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* Cards */
/* Glass Cards */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    /* More rounded */
    padding: var(--spacing-md);
    box-shadow: var(--glass-shadow);
    transition: var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-xl);
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.75);
}

/* Card Image */
.card-image {
    margin: calc(-1 * var(--spacing-md));
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: var(--transition-normal);
}

.card:hover .card-image img {
    transform: scale(1.05);
}

/* Card Small (Partners) */
.card-small {
    padding: var(--spacing-sm);
    align-items: center;
    text-align: center;
}

.card-small h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.card-small p {
    font-size: 0.8rem;
    margin-bottom: 0;
    color: var(--color-text-light);
}

.grid-partners {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .grid-partners {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Icon Box Small */
.icon-box-small {
    width: 44px;
    height: 44px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    transition: var(--transition-fast);
}

.card-small:hover .icon-box-small {
    background: var(--color-primary);
    color: white;
}

/* Icon Box */
.icon-box {
    width: 64px;
    height: 64px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-sm);
    transition: var(--transition-fast);
}

.card:hover .icon-box {
    background: var(--color-primary);
    color: white;
}

/* Navbar */
/* Glass Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

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

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo i {
    color: var(--color-primary);
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--color-text-main);
}

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

.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-main);
}

/* Hero */
.hero {
    padding: 6rem 0 4rem;
    background: var(--gradient-hero);
    text-align: center;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-light);
    max-width: 700px;
    margin: 0 auto 3rem;
    animation: fade-in-up 0.8s ease-out 0.2s backwards;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    background: -webkit-linear-gradient(315deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fade-in-up 0.8s ease-out backwards;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.font-serif {
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.01em;
}

.mobile-break {
    display: none;
}

.italic {
    font-style: italic;
}

.hero-badges {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-light);
    font-weight: 500;
}

.badge-item i {
    color: var(--color-primary);
}

/* Page Hero (Internal Pages) */
.page-hero {
    background: var(--gradient-hero);
    padding: 2.5rem 0;
    text-align: center;
    margin-bottom: 2rem;
    /* Reduced for tighter spacing */
}

.page-hero h1 {
    margin-bottom: 0.5rem;
}

.breadcrumb {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

/* Grid Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

/* Footer (Modern & Compact) */
.footer {
    background: white;
    border-top: 1px solid var(--color-border);
    padding: 3rem 0 1.5rem;
    /* Reduced padding from 4rem */
    margin-top: 4rem;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer h4 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: var(--color-text-light);
    /* Lighter, more elegant */
}

.footer-link {
    display: block;
    margin-bottom: 0.5rem;
    /* Tighter spacing */
    color: var(--color-text-main);
    font-size: 0.95rem;
}

.footer-link:hover {
    color: var(--color-primary);
    transform: translateX(3px);
    /* Subtle hover */
}

.footer-social-inline {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    /* Slightly smaller for bottom bar */
    height: 32px;
    background: var(--color-bg-alt);
    color: var(--color-text-light);
    border-radius: 50%;
    transition: var(--transition-fast);
    font-size: 0.9rem;
    text-decoration: none;
    /* Ensure no underline */
}

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

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column-reverse;
        /* Icons top, copyright bottom on mobile? Or just column */
        text-align: center;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .mobile-toggle {
        display: block;
        z-index: 1001;
        /* Keep above menu */
        position: relative;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        /* Reset left */
        width: 300px;
        max-width: 85%;
        height: 100vh;
        background: white;
        flex-direction: column;
        align-items: flex-start;
        /* Align links to start */
        padding: 6rem 2rem 2rem;
        /* Top padding for close button space */
        border-left: 1px solid var(--color-border);
        transform: translateX(100%);
        /* Slide from right */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
        /* Shadow specifically on left */
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-link {
        font-size: 1.5rem;
        /* Larger, more premium text */
        font-weight: 600;
        font-family: var(--font-heading);
        /* Use heading font for style */
        color: var(--color-accent);
        width: 100%;
        padding: 0.25rem 0;
        /* Reduced from 0.75rem */
        /* Airy spacing */
        border-bottom: none;
        /* Remove separators */
        transition: transform 0.2s, color 0.2s;
    }

    .nav-link:hover {
        color: var(--color-primary);
        transform: translateX(10px);
        /* Subtle movement */
    }

    /* Style the button in the menu */
    .nav-menu .btn {
        margin-top: 1.5rem;
        width: 100%;
    }

    /* Adjust Hero title on mobile */
    .hero h1 {
        font-size: 2.5rem;
    }

    .mobile-break {
        display: block;
    }

    .hero-badges {
        gap: 0.5rem;
        margin-top: 2rem;
    }

    /* Tighter Internal Page Headers on Mobile */
    .page-hero {
        padding: 2rem 0;
        /* Reduced from 4rem */
        margin-bottom: 1.5rem;
        /* Reduced from 2rem */
    }

    /* --- Global Fixes --- */

    /* Fix for check-list columns on mobile */
    .check-list li {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 0.5rem;
    }

    @media (max-width: 768px) {
        .check-list {
            columns: 1 !important;
            width: 100% !important;
        }
    }

    /* Fix for Definition Page Mobile */
    @media (max-width: 768px) {
        .quote-box {
            width: 100% !important;
            margin-bottom: 2rem !important;
            text-align: center !important;
            /* Center text nicely on mobile? User said no centering before but on full width card it looks better. Let's keep left align if user hates centering, but usually full block looks better centered text. I will stick to default (left) if I don't force it, but "fit-content" was the issue. I will just force width 100%. */
        }

        .definition-visual img {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .definition-visual {
            margin-top: 2rem;
        }
    }
}

/* End of accidental nesting */

/* Global Rules */
.intro-grid {
    margin-bottom: 4rem;
}

/* Mobile Spacing Adjustments */
@media (max-width: 768px) {
    .intro-grid {
        margin-bottom: 2rem !important;
        gap: 2rem !important;
        /* Force 2rem gap */
    }

    .intro-grid>div:first-child p:last-child {
        margin-bottom: 0 !important;
        /* Remove p margin so gap is exactly 2rem */
    }

    .definition-visual {
        margin-top: 0 !important;
    }



    .history-grid {
        margin-bottom: 2rem !important;
    }

    /* Fix spacing inside History card on mobile */
    .history-content {
        gap: 2rem !important;
    }

    .history-content>div:first-child p:last-child {
        margin-bottom: 0 !important;
    }
}

/* Desktop styles for history-content (moved from inline) */
.history-content {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}