/* =====================================================================
   COVERD — DESIGN SYSTEM
   Source : Brandbook Coverd (charte officielle, dossier "Charte Coverd").
   Charger AVANT tout <style> inline. Doc : ./DESIGN-SYSTEM.md
   ===================================================================== */

:root {
  /* =================================================================
     COULEURS — extraites du Brandbook officiel (pages 41–50)
     ================================================================= */

  /* --- Greyscale (UX Colors) --- */
  --white:            #FFFFFF;
  --off-white:        #FBFBFB;   /* "Met" — fond doux */
  --gray-extra-light: #F4F4F4;   /* fonds de section neutres */
  --gray-light:       #D0D2D2;   /* bordures, dividers */
  --gray-mid:         #888B8F;   /* icônes, méta décorative */
  --gray-dark:        #33403F;   /* Dark Grey — texte principal */
  --black:            #171F1E;   /* contraste maximal */

  /* --- Texte (alias sémantiques sur la palette grise) --- */
  --text-primary: var(--gray-dark);    /* #33403F */
  --text-muted:   #687271;             /* legacy AA-conforme — voir note bas de fichier */
  --text-dark:    var(--black);        /* #171F1E */
  --text-on-dark: var(--white);

  /* --- Couleur principale d'action (Brandbook : Blue) ---
     Usage exclusif : CTA et éléments d'action. */
  --primary:       #1A60E8;
  --primary-dark:  #1035BB;          /* hover, états actifs */
  --primary-tint:  #E8EFFD;          /* fond badges / pills / code */
  --primary-shadow: rgba(26, 96, 232, 0.16);

  /* --- Fonds pastels Coverd (1 par page, monochrome)
     Brandbook : "Une des 4 couleurs secondaires sera définie en couleur
     principale de la page. Cette teinte sera utilisée dans la Hero et
     le Footer." */
  --bg-beige:    #EFDDCD;            /* "Beige" */
  --bg-mint:     #E3F2E9;            /* "Green" */
  --bg-blue:     #D1EBFB;            /* "Blue" pastel */
  --bg-purple:   #DCD1FB;            /* "Purple" */
  /* alias historiques pour compat */
  --bg-peach:    var(--bg-beige);
  --bg-lavender: var(--bg-purple);
  --bg-blue-tint: var(--primary-tint);

  /* --- Fonds neutres --- */
  --bg-white: var(--white);
  --bg-soft:  var(--off-white);
  --bg-page:  #FAFBFC;               /* pages légères (CGV) */

  /* --- UX Colors (sémantique) — Brandbook officiel --- */
  --success:       #5FCB56;          /* "Validation" */
  --success-dark:  #2E7D32;          /* variante intense */
  --success-light: #E3F2E9;          /* fond mint pour messages */
  --success-tint:  #E3F2E9;
  --warning:       #FFCA43;          /* "Warning" */
  --warning-tint:  #FFF6DC;
  --danger:        #F35F30;          /* "Error" */
  --danger-tint:   #FDE5DC;

  /* --- Bordures --- */
  --border:        var(--gray-light); /* #D0D2D2 — Brandbook */
  --border-light:  rgba(51, 64, 63, 0.1);
  --border-strong: #B0AEA5;

  /* --- Typographie --- */
  --font-display: 'Unbounded', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tailles */
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h1:      clamp(32px, 4vw, 48px);
  --fs-h2:      clamp(24px, 3vw, 32px);
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12px;

  /* Line-heights — Brandbook : 130% titres, 150% corps */
  --lh-tight:    1.1;   /* hero / display ultra-large */
  --lh-display:  1.3;   /* H1–H6 standard (brandbook) */
  --lh-snug:     1.3;
  --lh-normal:   1.5;   /* corps de texte (brandbook) */
  --lh-loose:    1.7;   /* CGV, textes denses */

  /* --- Échelle de border-radius --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* canonique pour boutons, cartes */
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* --- Élévation (shadows) --- */
  --shadow-sm:    0 2px 8px rgba(15, 26, 60, 0.06);
  --shadow-md:    0 8px 24px rgba(15, 26, 60, 0.08);
  --shadow-lg:    0 16px 40px rgba(15, 26, 60, 0.12);
  --shadow-xl:    0 24px 64px rgba(15, 26, 60, 0.16);
  --shadow-brand: 0 8px 24px var(--primary-shadow);

  /* --- Containers / largeurs ---
     Brandbook : grille desktop 1200px / 12 colonnes, gutter 40px,
     espace inter-section 120px. Mobile : 375px / 6 colonnes,
     gutter 5px, marges 24px, espace inter-section 48px.
     Le site utilise 1440px en max-width (plus moderne pour 2K+). */
  --container:         1440px;
  --container-grid:    1200px;  /* grille brandbook */
  --container-narrow:   740px;  /* CGV, articles */
  --container-form:     560px;  /* formulaires, page merci */
  --container-text:     640px;  /* paragraphes lisibilité */
  --gutter-desktop:      40px;
  --gutter-mobile:        5px;
  --section-gap-desktop:120px;
  --section-gap-mobile:  48px;

  /* --- Espacement — système 8 points (Brandbook §53–54) ---
     Tous les paddings, marges et gaps doivent être des multiples de 8.
     Les paliers 4px (--space-xs) sont admis pour les micro-ajustements. */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl:120px;            /* inter-section desktop (brandbook) */

  /* --- Transitions --- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.2s;
  --dur-slow:   0.4s;

  /* --- Layers / z-index --- */
  --z-header:    100;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ---------------------------------------------------------------------
   Reset minimal partagé
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-white);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ---------------------------------------------------------------------
   Typographie de base (Brandbook §31–40)
     • H1, H2 / Marketing  → Unbounded Medium, line-height 130 %
     • H3 à H6             → Inter Bold,        line-height 130 %
     • Content text        → Inter Regular,     line-height 150 %
   --------------------------------------------------------------------- */
.display, h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;             /* Unbounded Medium */
  color: var(--text-primary);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}
.display { line-height: var(--lh-tight); }
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;             /* Inter Bold */
  color: var(--text-primary);
  line-height: var(--lh-display);
}

/* Highlight de titre (Brandbook §39) — souligne sous le mot-clé. */
.text-highlight {
  background-image: linear-gradient(transparent 75%, var(--bg-mint) 75%);
  background-position: 0 88%;
  background-repeat: no-repeat;
  padding: 0 0.05em;
}
.text-highlight--blue   { background-image: linear-gradient(transparent 75%, var(--bg-blue) 75%); }
.text-highlight--beige  { background-image: linear-gradient(transparent 75%, var(--bg-beige) 75%); }
.text-highlight--purple { background-image: linear-gradient(transparent 75%, var(--bg-purple) 75%); }

/* ---------------------------------------------------------------------
   Composants utilitaires partagés
   --------------------------------------------------------------------- */
.ds-container        { max-width: var(--container);        margin: 0 auto; padding: 0 48px; }
.ds-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.ds-container-form   { max-width: var(--container-form);   margin: 0 auto; padding: 0 24px; }

@media (max-width: 900px) {
  .ds-container { padding: 0 24px; }
}
@media (max-width: 480px) {
  .ds-container { padding: 0 16px; }
}

/* Badge / pill — réutilisable, accessible */
.ds-badge {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* Bouton primaire — recette canonique */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.ds-btn:hover  { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }

.ds-btn--primary {
  background: var(--primary);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-brand);
}
.ds-btn--primary:hover { background: var(--primary-dark); }

.ds-btn--secondary {
  background: var(--bg-white);
  color: var(--text-primary);
  border-color: var(--border);
}
.ds-btn--secondary:hover { border-color: var(--text-primary); }

/* ---------------------------------------------------------------------
   Préférences de l'utilisateur
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible accessible */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}