/* ================================================================
 * DATIVO — DESIGN TOKENS v4.0 « Vert imprimable »
 * Source unique de vérité de toutes les couleurs, typos, espacements,
 * radius et ombres utilisés par les produits Dativo SAS.
 *
 * Inclure dans toute page / produit avant tout autre CSS :
 *   <link rel="stylesheet" href="/_shared/dativo-design-tokens.css">
 *
 * Toute valeur non listée ici doit être discutée avant d'être ajoutée.
 * Dernière mise à jour : 22 juin 2026
 * ================================================================ */

:root {
    /* ---- FAMILLE DE VERTS v4 « Emerald-first » (RGAA AA) ------------ */
    /* Chaque couleur = un rôle + un texte officiel RGAA (AA 4,5:1).    */
    --emerald:  #1C8A65;   /* COULEUR PRINCIPALE / signature — logo, gros titres ≥19px, accents · PMS 7724 C · blanc 4,3:1 = grand texte/UI SEULEMENT */
    --primary:  var(--emerald); /* alias de rôle (= --emerald) */
    --pine:     #157049;   /* Vert profond — BOUTONS (fond + txt blanc 6,1:1 RGAA ✓) + hover Emerald */
    --forest:   #1F3D33;   /* ENCRE — textes, titres, fonds foncés · PMS 5535 C · blanc 11,8:1 AAA */
    --mint:     #B7DDD2;   /* Surface claire, CTA sur fond foncé · PMS 565 C · txt ENCRE 7,8:1 */
    --dew:      #DCF1E0;   /* Surfaces très douces, alerts info · PMS 9520 C · txt ENCRE 9,7:1 */
    --tender:   #157F77;   /* Teal accent (highlights, badges) · PMS 562 C · blanc 4,8:1 */
    --cream:    #FFF8F0;   /* Fond global (jamais dans le logo) */
    --terra:    #E37222;   /* Accent conversion · PMS 158 C · blanc ≥19px bold (3,1:1) */
    --white:    #FFFFFF;   /* Cartes, modales */
    /* Retiré v4 : ancien Emerald #4E7F65 (remplacé par Emerald #1C8A65). */

    /* ---- BOUTONS (RGAA — texte JAMAIS de la même teinte que le fond) */
    --btn-primary-bg:   var(--pine);    /* #157049 + texte blanc 6,1:1 ✓ — le bouton vert */
    --btn-primary-text: var(--white);
    --btn-dark-bg:      var(--forest);  /* #1F3D33 + texte blanc 11,8:1 ✓ */
    --btn-dark-text:    var(--white);
    --btn-light-bg:     var(--mint);    /* clair + texte encre */
    --btn-light-text:   var(--forest);
    --btn-accent-bg:    var(--terra);   /* texte blanc, label ≥19px bold */
    --btn-accent-text:  var(--white);
    /* Emerald #1C8A65 n'est JAMAIS un fond de bouton à texte normal (4,3:1 < 4,5). */

    /* ---- GRAYS ------------------------------------------------------ */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ---- SÉMANTIQUE (États UI uniquement) -------------------------- */
    --success:  #059669;
    --error:    #B91C1C;
    --warning:  #D97706;
    --info:     #2563EB;

    /* Versions atténuées des sémantiques (badges, alerts) */
    --success-soft: #D1FAE5;
    --error-soft:   #FEE2E2;
    --warning-soft: #FED7AA;
    --info-soft:    #DBEAFE;

    /* ---- TYPOGRAPHIE ----------------------------------------------- */
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-accent:  'Fraunces', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Échelle modulaire (base 16 px, ratio ≈ 1.25) */
    --text-xs:   0.75rem;   /* 12 px — captions, mentions légales */
    --text-sm:   0.875rem;  /* 14 px — UI, badges */
    --text-base: 1rem;      /* 16 px — corps */
    --text-lg:   1.125rem;  /* 18 px — lead body */
    --text-xl:   1.25rem;   /* 20 px — sous-titres */
    --text-2xl:  1.5rem;    /* 24 px — H3 */
    --text-3xl:  1.875rem;  /* 30 px — H2 */
    --text-4xl:  2.25rem;   /* 36 px — H1 */
    --text-5xl:  3rem;      /* 48 px — Hero */

    /* ---- ESPACEMENTS (Base 8, scale 4-8-12-16-24-32-48-64) -------- */
    --space-1:  0.25rem;    /*  4 px */
    --space-2:  0.5rem;     /*  8 px */
    --space-3:  0.75rem;    /* 12 px */
    --space-4:  1rem;       /* 16 px */
    --space-6:  1.5rem;     /* 24 px */
    --space-8:  2rem;       /* 32 px */
    --space-12: 3rem;       /* 48 px */
    --space-16: 4rem;       /* 64 px */
    --space-24: 6rem;       /* 96 px */

    /* ---- RADIUS ---------------------------------------------------- */
    --radius-sm:   6px;     /* Inputs, badges */
    --radius-md:   10px;    /* Boutons, inputs primaires */
    --radius-lg:   16px;    /* Cartes */
    --radius-xl:   24px;    /* Hero, modales */
    --radius-full: 9999px;  /* Pills, avatars */

    /* ---- OMBRES (teintées Forest, jamais noires) ------------------ */
    --shadow-sm: 0 1px 2px  rgba(26, 60, 52, 0.05);
    --shadow-md: 0 4px 12px rgba(26, 60, 52, 0.08);
    --shadow-lg: 0 8px 30px rgba(26, 60, 52, 0.12);
    --shadow-xl: 0 16px 48px rgba(26, 60, 52, 0.16);

    /* ---- TRANSITIONS ----------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ---- LAYOUT ---------------------------------------------------- */
    --max-width:   1200px;  /* Largeur max de container */
    --max-text:    65ch;    /* Largeur max d'un paragraphe */
    --nav-height:  64px;
    --header-height: 80px;
}

/* ================================================================
 * RESET / BASE STYLES OPTIONNELS
 * À inclure si pas de reset global déjà en place
 * ================================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--forest);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--forest);
}

a { color: var(--emerald); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--forest); }

p { max-width: var(--max-text); }
*/

/* ================================================================
 * UTILITAIRES MARQUE — Classes prêtes à l'emploi
 * ================================================================ */

.text-primary { color: var(--primary); }   /* gros titres ≥19px bold, accents — jamais texte courant */
.text-forest  { color: var(--forest); }
.text-emerald { color: var(--emerald); }
.text-terra   { color: var(--terra); }
.text-cream   { color: var(--cream); }

.bg-primary { background: var(--primary); color: var(--white); }  /* surfaces de marque, boutons ≥1rem bold */
.bg-forest  { background: var(--forest); color: var(--white); }
.bg-emerald { background: var(--emerald); color: var(--white); }
.bg-tender  { background: var(--tender); color: var(--forest); }
.bg-dew     { background: var(--dew); color: var(--forest); }
.bg-cream   { background: var(--cream); color: var(--forest); }

.accent-text {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--terra);
    font-weight: 400;
}

.brand-gradient {
    background: linear-gradient(135