/* ================================
   1. VARIABLES CSS
================================ */
:root {
    /* === Couleurs principales === */
    --color-principal: #00D66C;
    --color-principal-hover: #00B65A;
    --color-primary: #001875;
    --color-primary-hover: #1437B9;
    --color-accent: #ff3268;
    --color-accent-hover: #ea2559;
    --color-primary-light: #3B5CE6;
    --color-primary-dark: #0F2A8A;
    --color-primary-extradark: #001875;
    --color-success: #00B67A;
    --color-warning: #ce3517;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --bg-section-color: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    /* === Couleurs texte === */
    --color-text: #1A2B33;
    --color-text-light: #5D778A;
    --color-gray: #B9C9D6;
    --color-gray-light: #F1F5F9;
    --color-gray-medium: #D1D5DB;

    /* === Fonds et bordures === */
    --color-bg-light: #F6F8FA;
    --color-border: #E5E9ED;
    --color-bg-gradient-1: #FEAD80;
    --color-bg-gradient-2: #FFE2D2;

    /* === Typographie === */
    --font-family: 'Nunito Sans', 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 700;
    --font-weight-semibold: 800;
    --font-weight-bold: 900;

    --h1-font-size-mobile: 2.5rem;
    --h1-font-size-tablet: 2.85rem;
    --h1-font-size-desktop: 2.9rem;
    --h1-line-height: 1.4;

    --h2-font-size-mobile: 2.5rem;
    --h2-font-size-tablet: 2.55rem;
    --h2-font-size-desktop: 2.6rem;
    --h2-line-height: 1.55;

    --h3-font-size-mobile: 1.55rem;
    --h3-font-size-tablet: 1.6rem;
    --h3-font-size-desktop: 1.65rem;
    --h3-line-height: 1.3;

    --h4-font-size-mobile: 1.4rem;
    --h4-font-size-tablet: 1.45rem;
    --h4-font-size-desktop: 1.5rem;
    --h4-line-height: 1.4;

    --body-font-size-mobile: 1rem;
    --body-font-size-desktop: 1.05rem;
    --body-line-height: 1.72;

    --button-font-size-mobile: 1rem;
    --button-font-size-desktop: 1.2rem;

    /* === Bordures === */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-full: 100px;

    /* === Ombres === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-input: 0 2px 8px rgba(20, 55, 185, 0.1);

    /* === Transitions === */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    --animation-bounce: bounce 0.5s ease-in-out;

    /* === Espacements === */
    --heading-margin-bottom: 2rem;
    --heading-margin-bottom-desktop: 5rem;
    --paragraph-margin: 1em 0;
    --section-margin-top: 3rem auto;
    --section-margin-top-desktop: 6rem auto;
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-ms: 0.9rem;
    --space-sm: 1rem;
    --space-xm: 1.25rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-xxl: 4rem;
    --space-2xl: 6rem;

    /* === Buttons space === */
    --space-button-height: 3rem;
    --space-button-small-height: 2.5rem;

    /* === Composants Spacing === */
    --content-gap: 1rem;
    --section-padding-mobile: 1rem 1rem;
    --section-padding-tablet: 2.5rem 5%;
    --section-padding-laptop: 3.75rem 10%;
    --section-padding-desktop: 5.6rem 2.5rem;

    /* === Layout === */
    --header-height: 60px;
    --header-height-tablet: 70px;
    --container-width-mobile: 100%;
    --container-width-tablet: 720px;
    --container-width-laptop: 960px;
    --container-width-desktop: 1200px;
    --container-width-wide: 1400px;
    --form-width: 480px;

    /* === Header Layout === */
    --header-padding-mobile: var(--space-sm) var(--space-md);
    --header-padding-desktop: var(--space-lg) var(--space-2xl);
    --header-logo-height: 40px;

    /* === Content Layout === */
    --content-max-width: 800px;

    /* === Breakpoints === */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-laptop: 980px;
    --breakpoint-desktop: 1200px;
    --breakpoint-wide: 1600px;
}

/* ================================
   2. RESET + BASE
================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: var(--body-line-height);
    font-size: var(--body-font-size-mobile);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ================================
   3. TYPOGRAPHIE RESPONSIVE
================================ */
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: var(--heading-margin-bottom);
}

h1 {
    font-size: var(--h1-font-size-mobile);
    line-height: var(--h1-line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: .67em 0;
    letter-spacing: normal;
}

h2 {
    font-size: var(--h2-font-size-mobile);
    line-height: var(--h2-line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-principal);
}

h3 {
    font-size: var(--h3-font-size-mobile);
    line-height: var(--h3-line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

h4 {
    font-size: var(--h4-font-size-mobile);
    line-height: var(--h4-line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-primary);
}

@media (min-width: 576px) {
    h1 {
        font-size: var(--h1-font-size-tablet);
    }

    h2 {
        font-size: var(--h2-font-size-tablet);
    }

    h3 {
        font-size: var(--h3-font-size-tablet);
    }

    h4 {
        font-size: var(--h4-font-size-tablet);
    }

}

@media (min-width: 980px) {

    h2 {
        margin-bottom: var(--heading-margin-bottom-desktop);
    }

}

@media (min-width: 1200px) {
    h1 {
        font-size: var(--h1-font-size-desktop);
    }

    h2 {
        font-size: var(--h2-font-size-desktop);
    }

    h3 {
        font-size: var(--h3-font-size-desktop);
    }

    h4 {
        font-size: var(--h4-font-size-desktop);
    }

    p {
        font-size: 1.1rem;
    }
}

p {
    font-weight: var(--font-weight-regular);
    margin: var(--paragraph-margin);
    display: block;
    unicode-bidi: isolate;
}



/* ================================
   4. LAYOUT
================================ */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-width-tablet);
    }
}

@media (min-width: 980px) {
    .container {
        max-width: var(--container-width-laptop);
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-width-desktop);
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: var(--container-width-wide);
    }
}

/* ================================
   5. UTILITAIRES
================================ */
.d-none {
    display: none !important;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.d-grid {
    display: grid;
}

.flex-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

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

.text-right {
    text-align: right;
}

.m-0 {
    margin: 0 !important;
}

.mt-xs {
    margin-top: var(--space-xs);
}

.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mb-xs {
    margin-bottom: var(--space-xs);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: var(--space-xs);
}

.p-sm {
    padding: var(--space-sm);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

.p-xl {
    padding: var(--space-xl);
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.no-wrap {
    white-space: nowrap;
    word-break: keep-all;
}

.no-list-style {
    list-style: none;
}

/* Desktop-specific utilities */
@media (min-width: 1200px) {
    .desktop-row {
        flex-direction: row;
    }

    .desktop-flex-start {
        align-items: flex-start;
    }

    .desktop-space-between {
        justify-content: space-between;
    }
}

/* ================================
   6. BOUTONS GLOBAUX
================================ */
.button,
.button-small {
    border: none;
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--button-font-size-mobile);
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    gap: var(--space-sm);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.button {
    padding: 0 50px;
    height: var(--space-button-height);

}

.button-small {
    padding: 0 20px;
    height: var(--space-button-small-height);

}

/* Button Primary - Bleu */
.button--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.button--primary:hover {
    background: var(--color-primary-hover);
}

.button--primary:active {
    background: var(--color-primary);
}

/* Button Principal - Vert */
.button--principal {
    background: var(--color-principal);
    color: var(--color-white);
}

.button--principal:hover {
    background: var(--color-principal-hover);
}

.button--principal:active {
    background: var(--color-principal);
}

/* Button Accent - Rouge */
.button--accent {
    background: var(--color-accent);
    color: var(--color-white);
}

.button--accent:hover {
    background: var(--color-accent-hover);
}

.button--accent:active {
    background: var(--color-principal-hover);
}

/* Button Secondary - Gris */
.button--secondary {
    background: var(--color-gray-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.button--secondary:hover {
    background: var(--color-gray-medium);
    border-color: var(--color-gray-medium);
}

.button--secondary:active {
    background: var(--color-gray-light);
}