/* ============================================================
   Design tokens — Annonces m2m · prototype design v2
   Tâche A2 — source unique de toutes les valeurs visuelles.
   main.css ne consomme QUE ces variables : 0 valeur magique.
   ============================================================ */

:root {

  /* ---------- Palette : neutres (10 paliers, froid équilibré) ---------- */
  --neutre-0:   #ffffff;  /* surfaces pures (cartes, boutons pleins) */
  --neutre-50:  #fafafa;  /* fond de page */
  --neutre-100: #f4f5f6;  /* fonds secondaires, zébrures */
  --neutre-150: #eceef0;  /* dégradés placeholder */
  --neutre-200: #e3e6ea;  /* bordures courantes */
  --neutre-300: #cdd2d9;  /* bordures fortes, séparateurs marqués */
  --neutre-400: #a7aeba;  /* éléments désactivés, texte décoratif */
  --neutre-500: #6b7280;  /* texte secondaire (AA sur neutre-0/50) */
  --neutre-700: #454b57;  /* texte courant */
  --neutre-800: #2a2e37;  /* titres secondaires */
  --neutre-900: #1a1d23;  /* encre — titres, header */

  /* ---------- Palette : bleu nuit « machine / confiance » ---------- */
  --nuit-50:  #eef1f8;    /* fond doux des blocs machine (CBOR, journal) */
  --nuit-700: #2c3a63;    /* texte technique, liens machine (AA sur blanc) */

  /* ---------- Palette : accent ambre-cuivré (prix, CTA) ---------- */
  --accent-100: #fdf0e7;  /* fond doux (surbrillance prix) */
  --accent-600: #c2410c;  /* accent principal (AA sur neutre-0/50/100) */
  --accent-700: #9a3412;  /* accent hover/focus (plus soutenu) */

  /* ---------- Palette : sémantiques ---------- */
  --succes-100: #e9f7ee;
  --succes-600: #15803d;  /* AA sur neutre-0/50 */
  --alerte-100: #fdf6e3;
  --alerte-600: #a16207;  /* AA sur neutre-0/50 */
  --info-100:   #eaf0fe;
  --info-600:   #1d4ed8;  /* AA sur neutre-0/50 */

  /* ---------- Couleurs sémantiques d'usage ---------- */
  --couleur-encre:        var(--neutre-900);
  --couleur-titre-2:      var(--neutre-800);
  --couleur-texte:        var(--neutre-700);
  --couleur-texte-2:      var(--neutre-500);
  --couleur-texte-inactif: var(--neutre-400);
  --couleur-texte-machine: var(--nuit-700);
  --couleur-prix:         var(--accent-600);
  --couleur-fond:         var(--neutre-50);
  --couleur-surface:      var(--neutre-0);
  --couleur-surface-2:    var(--neutre-100);
  --couleur-surface-machine: var(--nuit-50);
  --couleur-bordure:      var(--neutre-200);
  --couleur-bordure-forte: var(--neutre-300);

  /* ---------- Typographie ---------- */
  --police-texte: system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --texte-xs:   0.75rem;    /* 12 px — badges, métadonnées */
  --texte-s:    0.875rem;   /* 14 px — légendes, champs */
  --texte-base: 1rem;       /* 16 px — corps */
  --texte-m:    1.125rem;   /* 18 px — corps important */
  --texte-l:    1.25rem;    /* 20 px — sous-titres */
  --texte-xl:   1.5rem;     /* 24 px — prix */
  --texte-2xl:  1.75rem;    /* 28 px — titres de section */
  --texte-3xl:  2.25rem;    /* 36 px — titres de page */
  --texte-4xl:  2.75rem;    /* 44 px — héro */
  --texte-5xl:  3.25rem;    /* 52 px — héro mobile XL */

  --graisse-normale:      400;
  --graisse-moyenne:      500;
  --graisse-forte:        600;
  --graisse-tres-forte:   700;

  --interligne-serre:   1.2;   /* titres */
  --interligne-normal:  1.45;  /* UI */
  --interligne-coulant: 1.65;  /* corps de texte */

  /* ---------- Échelle de titres (hiérarchie unique du site) ----------
     Un seul endroit décide de la taille d'un titre : `main.css` s'y réfère.
     Les variantes locales (héro, carte, pied de page) se décalant d'un cran
     restent explicites et documentées dans main.css — jamais une taille
     inventée sur place. */
  --titre-page:         var(--texte-3xl);  /* h1 — titre de page (36 px) */
  --titre-section:      var(--texte-2xl);  /* h2 — titre de section (28 px) */
  --titre-sous-section: var(--texte-l);    /* h3 — sous-section (20 px) */
  --titre-detail:       var(--texte-base); /* h4 — détail (16 px) */

  /* ---------- Espacements (base 4 px) ---------- */
  --espacement-0: 0;
  --espacement-1: 4px;
  --espacement-2: 8px;
  --espacement-3: 12px;
  --espacement-4: 16px;
  --espacement-5: 24px;
  --espacement-6: 32px;
  --espacement-7: 48px;
  --espacement-8: 64px;
  --espacement-9: 96px;

  /* ---------- Espacements de structure ----------
     L'écart entre deux sections de contenu est le même partout : c'est ce
     qui fait qu'une page légale, une page de guides et une page de
     recherche se lisent avec le même rythme. */
  --espacement-section: var(--espacement-6); /* 32 px — entre deux sections */

  /* ---------- Rayons (respiration wallapop : 8/12/16) ---------- */
  --rayon-s:      8px;
  --rayon-m:      12px;
  --rayon-l:      16px;
  --rayon-plein:  999px;

  /* ---------- Ombres (2 niveaux, douces) ---------- */
  --ombre-1: 0 1px 2px rgba(26, 29, 35, 0.06), 0 2px 8px rgba(26, 29, 35, 0.05);
  --ombre-2: 0 4px 12px rgba(26, 29, 35, 0.08), 0 12px 32px rgba(26, 29, 35, 0.10);

  /* ---------- Breakpoints ----------
     Consommés par les @media de main.css. Les media queries CSS ne peuvent
     pas lire var() : la valeur littérale est répétée dans main.css — ce
     token est la référence documentaire unique. */
  --bp-xs: 360px;   /* mobile étroit — 2 colonnes */
  --bp-sm: 768px;   /* tablette — 3 colonnes */
  --bp-md: 1024px;  /* laptop — 4 colonnes */
  --bp-lg: 1440px;  /* large — 5 colonnes */
  --bp-xl: 1920px;  /* très large — conteneur plafonné */

  /* ---------- Structure ---------- */
  --largeur-conteneur: 1360px;
  --duree-transition: 150ms;
}

/* =====================================================================
   Maquette v2 — brutalisme editorial 2026 (ajout du 2026-10-24)
   ===================================================================== */
:root {
  --cream: #f5f0e8;
  --off-white: #fafaf7;
  --white: #ffffff;
  --black: #0a0a0a;
  --orange: #ff4500;
  --orange-pale: #fff1ec;
  --gray: #8a8a8a;
  --border: #e0ddd5;
  --gray-strong: #565656;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rayon: 8px;
  --rayon-s: 6px;
  --ombre-douce: 0 8px 24px rgba(10, 10, 10, .08);
  --gouttiere: 24px;
}