/* ═══════════════════════════════════════════════════════════════════════════
   EZEMICROASSURANCE — DESIGN SYSTEM
   Thème : "Inclusion Modernist"
   Version : 1.0.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Google Fonts ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ─── 2. Custom Properties (Tokens) ──────────────────────────────────────── */
:root {
    /* ── Couleurs Principales ─────────────────────────────────────────────── */
    --color-primary:            #003667;   /* Bleu Confiance */
    --color-primary-container:  #0D4D8B;   /* Bleu bouton */
    --color-primary-fixed:      #D4E3FF;   /* Bleu très clair */
    --color-primary-fixed-dim:  #A5C8FF;   /* Bleu clair */
    --color-on-primary:         #FFFFFF;
    --color-on-primary-fixed:   #001C3A;

    --color-secondary:           #006D40;  /* Vert Santé */
    --color-secondary-container: #86F6B3;  /* Vert clair */
    --color-secondary-fixed:     #89F9B6;
    --color-secondary-fixed-dim: #6CDC9B;
    --color-on-secondary:        #FFFFFF;
    --color-on-secondary-container: #007243;
    --color-on-secondary-fixed:  #002110;

    --color-tertiary:            #003374;
    --color-tertiary-container:  #0049A0;
    --color-tertiary-fixed:      #D8E2FF;
    --color-on-tertiary:         #FFFFFF;
    --color-on-tertiary-container: #9FBDFF;

    /* ── Surfaces ─────────────────────────────────────────────────────────── */
    --color-background:              #F8F9FF;
    --color-surface:                 #F8F9FF;
    --color-surface-alt:             #F6F8FB;  /* background-surface */
    --color-surface-card:            #FFFFFF;  /* surface-container-lowest */
    --color-surface-low:             #EEF4FF;  /* surface-container-low */
    --color-surface-container:       #E6EEFD;
    --color-surface-high:            #E0E9F7;  /* surface-container-high */
    --color-surface-highest:         #DAE3F1;  /* surface-container-highest */
    --color-surface-dim:             #D2DBE9;
    --color-surface-variant:         #DAE3F1;
    --color-inverse-surface:         #28313C;
    --color-inverse-on-surface:      #E9F1FF;

    /* ── Texte ────────────────────────────────────────────────────────────── */
    --color-on-surface:         #131C26;
    --color-on-surface-variant: #424750;   /* Gris Texte */
    --color-text-heading:       #253041;   /* Gris Foncé */

    /* ── Contours ─────────────────────────────────────────────────────────── */
    --color-outline:         #727781;
    --color-outline-variant: #C2C6D2;

    /* ── États ────────────────────────────────────────────────────────────── */
    --color-success:  #22C55E;
    --color-warning:  #F59E0B;
    --color-error:    #DC2626;
    --color-info:     #3B82F6;

    /* ─── Typographie ────────────────────────────────────────────────────── */
    --font-headline: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-body:     'Inter', system-ui, -apple-system, sans-serif;

    --text-headline-xl:        clamp(2rem, 4vw + 0.5rem, 3rem);      /* 32-48px */
    --text-headline-lg:        clamp(1.75rem, 3vw + 0.25rem, 2rem);  /* 28-32px */
    --text-headline-md:        1.5rem;    /* 24px */
    --text-headline-sm:        1.25rem;   /* 20px */
    --text-body-lg:            1.125rem;  /* 18px */
    --text-body-md:            1rem;      /* 16px */
    --text-body-sm:            0.875rem;  /* 14px */
    --text-label-md:           0.875rem;  /* 14px */
    --text-label-sm:           0.75rem;   /* 12px */

    --lh-headline-xl: 1.16;
    --lh-headline-lg: 1.25;
    --lh-headline-md: 1.33;
    --lh-body-lg:     1.56;
    --lh-body-md:     1.5;
    --lh-body-sm:     1.43;
    --lh-label:       1.14;

    --fw-regular:    400;
    --fw-medium:     500;
    --fw-semibold:   600;
    --fw-bold:       700;
    --fw-extrabold:  800;

    --ls-tight:  -0.02em;
    --ls-snug:   -0.01em;
    --ls-wide:    0.01em;
    --ls-wider:   0.05em;

    /* ─── Espacement ──────────────────────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;   /* stack-md */
    --space-5:  20px;   /* margin-mobile */
    --space-6:  24px;   /* gutter-desktop */
    --space-8:  32px;   /* stack-lg */
    --space-10: 40px;   /* margin-desktop */
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --container-max:    1280px;
    --gutter-desktop:   24px;
    --gutter-mobile:    16px;
    --margin-desktop:   40px;
    --margin-mobile:    20px;

    /* ─── Border Radius ───────────────────────────────────────────────────── */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-btn:   12px;  /* boutons, champs */
    --radius-card:  16px;  /* cartes */
    --radius-xl:    20px;
    --radius-2xl:   24px;
    --radius-3xl:   32px;
    --radius-full:  9999px;

    /* ─── Ombres ──────────────────────────────────────────────────────────── */
    --shadow-soft:  0 4px 16px rgba(0, 0, 0, 0.08);   /* signature */
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.14);
    --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.18);

    /* ─── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-md:     300ms ease;
    --transition-slow:   500ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-index ─────────────────────────────────────────────────────────── */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:  10;
    --z-overlay: 40;
    --z-nav:     50;
    --z-modal:   60;
    --z-toast:   70;
}

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

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    line-height: var(--lh-body-md);
    color: var(--color-on-surface);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: var(--font-body);
    border: none;
    background: none;
}

input, textarea, select {
    font-family: var(--font-body);
}

/* ─── 4. Typographie ──────────────────────────────────────────────────────── */
.text-headline-xl {
    font-family: var(--font-headline);
    font-size: var(--text-headline-xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-headline-xl);
    letter-spacing: var(--ls-tight);
}

.text-headline-lg {
    font-family: var(--font-headline);
    font-size: var(--text-headline-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-headline-lg);
    letter-spacing: var(--ls-snug);
}

.text-headline-md {
    font-family: var(--font-headline);
    font-size: var(--text-headline-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-md);
}

.text-headline-sm {
    font-family: var(--font-headline);
    font-size: var(--text-headline-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline-md);
}

.text-body-lg  { font-size: var(--text-body-lg);  line-height: var(--lh-body-lg); }
.text-body-md  { font-size: var(--text-body-md);  line-height: var(--lh-body-md); }
.text-body-sm  { font-size: var(--text-body-sm);  line-height: var(--lh-body-sm); }
.text-label-md { font-size: var(--text-label-md); font-weight: var(--fw-semibold); line-height: var(--lh-label); letter-spacing: var(--ls-wide); }
.text-label-sm { font-size: var(--text-label-sm); font-weight: var(--fw-medium);   line-height: var(--lh-label); }

/* ─── 5. Couleurs utilitaires ─────────────────────────────────────────────── */
.text-primary         { color: var(--color-primary); }
.text-secondary       { color: var(--color-secondary); }
.text-heading         { color: var(--color-text-heading); }
.text-muted           { color: var(--color-on-surface-variant); }
.text-on-primary      { color: var(--color-on-primary); }
.text-success         { color: var(--color-success); }
.text-warning         { color: var(--color-warning); }
.text-error           { color: var(--color-error); }

.bg-primary           { background-color: var(--color-primary); }
.bg-secondary         { background-color: var(--color-secondary); }
.bg-surface           { background-color: var(--color-surface); }
.bg-surface-alt       { background-color: var(--color-surface-alt); }
.bg-surface-card      { background-color: var(--color-surface-card); }
.bg-surface-low       { background-color: var(--color-surface-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-high      { background-color: var(--color-surface-high); }
.bg-surface-highest   { background-color: var(--color-surface-highest); }

/* ─── 6. Matérial Symbols ─────────────────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── 7. Ombres ───────────────────────────────────────────────────────────── */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }