/* ============================================================
   VAMOS – cssBase.css
   Variables CSS, reset, typographie
   Version claire sécurité / SaaS premium
   ============================================================ */

:root {
    /* ── Charte VAMOS ─────────────────────────────────────── */
    --orange:         #F28C00;
    --orange-dark:    #D97900;
    --orange-soft:    #FFF4E3;
    --orange-alpha:   rgba(242, 140, 0, 0.12);

    --red:            #F45B3F;
    --red-dark:       #D9432C;
    --red-soft:       #FFF1EE;
    --red-alpha:      rgba(244, 91, 63, 0.12);

    --green:          #6FBE5E;
    --green-dark:     #4F9D45;
    --green-soft:     #F1FAEE;
    --green-alpha:    rgba(111, 190, 94, 0.14);

    --blue:           #4A90E2;
    --blue-soft:      #EEF6FF;

    /* ── Surfaces ─────────────────────────────────────────── */
    --bg:             #F7F9FC;
    --surface:        #FFFFFF;
    --surface-2:      #F1F5F9;
    --surface-3:      #EAF0F7;

    /* ── Texte ────────────────────────────────────────────── */
    --text:           #2D3748;
    --text-muted:     #718096;
    --text-faint:     #A0AEC0;
    --text-gray:      #8792A2;

    /* ── Bordures et ombres ───────────────────────────────── */
    --border:         #E2E8F0;
    --border-hover:   rgba(242, 140, 0, 0.42);
    --shadow-sm:      0 4px 14px rgba(15, 23, 42, 0.04);
    --shadow-md:      0 12px 32px rgba(15, 23, 42, 0.08);
    --shadow-lg:      0 24px 70px rgba(15, 23, 42, 0.12);

    /* ── Typographie ──────────────────────────────────────── */
    --font-title:     'Sora', sans-serif;
    --font-body:      'Inter', sans-serif;

    /* ── Espacements ──────────────────────────────────────── */
    --section-pad:    100px 5%;
    --radius-sm:      12px;
    --radius-md:      16px;
    --radius-lg:      22px;
    --radius-xl:      28px;

    /* ── Transitions ──────────────────────────────────────── */
    --transition:     all 0.2s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-title);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.text-orange { color: var(--orange); }
.text-green  { color: var(--green-dark); }
.text-muted  { color: var(--text-muted); }
.bg-surface  { background: var(--surface); }
.text-center { text-align: center; }

/* ============================================================
   Ajustements VAMOS – contraste, lisibilité, sécurité premium
   ============================================================ */
:root {
    --bg:             #EEF2F7;
    --surface-2:      #E8EDF4;
    --surface-3:      #DDE5EF;
    --text:           #1F2937;
    --text-muted:     #4B5563;
    --text-faint:     #6B7280;
    --text-gray:      #4A5568;
    --border:         #D4DCE8;
    --border-hover:   rgba(242, 140, 0, 0.72);
    --shadow-sm:      0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md:      0 16px 38px rgba(15, 23, 42, 0.12);
    --shadow-lg:      0 28px 80px rgba(15, 23, 42, 0.18);
}