/*
 * ============================================================
 *  RELAIS DOSSIER — DESIGN SYSTEM
 *  Fichier de référence — v1.0 — juin 2026
 * ============================================================
 *
 *  USAGE : copier le bloc :root de la palette concernée
 *  dans le <style> de chaque page, sous le bloc @import fonts.
 *  Les variables globales (section 1) sont identiques partout.
 *
 *  STRUCTURE :
 *  1. Tokens globaux         — communs à toutes les pages
 *  2. Palettes colorées      — 12 pages de litige
 *  3. Guides colorés         — 3 guides thématiques
 *  4. Guides journal         — 3 guides éditoriaux noir/blanc
 *  5. Règles d'usage         — quel token sur quel élément
 * ============================================================
 */


/* ============================================================
   1. TOKENS GLOBAUX
   Copier dans TOUTES les pages, avant le bloc palette.
   ============================================================ */

:root {

  /* Polices */
  --font-display : 'DM Serif Display', serif;
  --font-body    : 'DM Sans', sans-serif;

  /* Fond neutre partagé (blanc chaud de marque) */
  --warm-white   : #fffdf4;

  /* Rayon de bordure standard */
  --radius       : 4px;
  --radius-lg    : 8px;

  /* Échelle typographique */
  --text-xs      : 11px;
  --text-sm      : 13px;
  --text-base    : 15px;
  --text-md      : 16px;
  --text-lg      : 17px;
  --text-xl      : 22px;
  --text-2xl     : 28px;
  --text-3xl     : 30px;
  --text-hero    : clamp(22px, 3vw, 34px);

  /* Espacements */
  --space-xs     : 8px;
  --space-sm     : 16px;
  --space-md     : 24px;
  --space-lg     : 32px;
  --space-xl     : 48px;
  --space-2xl    : 64px;

  /* Largeur max contenu */
  --max-width    : 960px;
}

/* Import Google Fonts — à placer dans le <head> de chaque page */
/*
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
*/


/* ============================================================
   2. PALETTES COLORÉES — PAGES DE LITIGE
   ============================================================

   CONVENTION DE NOMMAGE :
   --page-bg           fond principal de la page (très clair)
   --page-surface      surface blanche / cartes
   --page-surface-soft surface intermédiaire
   --page-line         bordure légère
   --page-line-strong  bordure marquée
   --page-accent       couleur d'accentuation principale
   --page-accent-mid   variante intermédiaire
   --page-accent-dark  variante foncée
   --page-accent-hover état hover des éléments interactifs
   --page-title        couleur des titres h1/h2
   --page-text         couleur du corps de texte
   --page-muted        texte secondaire / légendes

   ============================================================ */


/* ------------------------------------------------------------
   2.01  ACCUEIL (index.html)
   Vert forêt
   ------------------------------------------------------------ */
.palette-accueil,
[data-palette="accueil"] {
  --page-bg           : #edf7f0;
  --page-surface      : #f7fbf8;
  --page-surface-soft : #dfeee5;
  --page-line         : #c4dacd;
  --page-line-strong  : #7ab89a;
  --page-accent       : #5fa082;
  --page-accent-mid   : #2f5a48;
  --page-accent-dark  : #1d3027;
  --page-accent-hover : #213c31;
  --page-title        : #14261f;
  --page-text         : #1d3027;
  --page-muted        : #6e8577;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.02  À PROPOS (qui_sommes_nous.html)
   Beige taupe
   ------------------------------------------------------------ */
.palette-apropos,
[data-palette="apropos"] {
  --page-bg           : #f4efe6;
  --page-surface      : #fbf8f2;
  --page-surface-soft : #e9e3d8;
  --page-line         : #d8cfbf;
  --page-line-strong  : #8a7d68;
  --page-accent       : #8a7d68;
  --page-accent-mid   : #5f584d;
  --page-accent-dark  : #3f3b34;
  --page-accent-hover : #2b2823;
  --page-title        : #2b2823;
  --page-text         : #34312c;
  --page-muted        : #625c52;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.03  DOSSIER CONCILIATEUR (dossier_conciliateur.html)
   Or chaud
   ------------------------------------------------------------ */
.palette-conciliateur,
[data-palette="conciliateur"] {
  --page-bg           : #fff8df;
  --page-surface      : #fffdf4;
  --page-surface-soft : #fff1bf;
  --page-line         : #e4c76b;
  --page-line-strong  : #cba13a;
  --page-accent       : #b88a22;
  --page-accent-mid   : #8b763f;
  --page-accent-dark  : #725f32;
  --page-accent-hover : #46381c;
  --page-title        : #332913;
  --page-text         : #46381c;
  --page-muted        : #8b763f;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.04  DOSSIER AVOCAT (dossier_pour_avocat.html)
   Brun rouille
   ------------------------------------------------------------ */
.palette-avocat,
[data-palette="avocat"] {
  --page-bg           : #faeae4;
  --page-surface      : #fef4f0;
  --page-surface-soft : #f0d5c8;
  --page-line         : #d4a898;
  --page-line-strong  : #a04535;
  --page-accent       : #8a4a3b;
  --page-accent-mid   : #6b352b;
  --page-accent-dark  : #49302b;
  --page-accent-hover : #3a1f1a;
  --page-title        : #332d20;
  --page-text         : #3d321b;
  --page-muted        : #72524b;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.05  LITIGE ADMINISTRATION (litige_administration.html)
   Bleu acier
   ------------------------------------------------------------ */
.palette-administration,
[data-palette="administration"] {
  --page-bg           : #e7eef2;
  --page-surface      : #f7fbfd;
  --page-surface-soft : #dbe7ed;
  --page-line         : #b7c8d1;
  --page-line-strong  : #4f7384;
  --page-accent       : #315c6f;
  --page-accent-mid   : #2a5162;
  --page-accent-dark  : #244656;
  --page-accent-hover : #1b3744;
  --page-title        : #17313d;
  --page-text         : #1b3744;
  --page-muted        : #5a717d;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.06  LITIGE COMMERCIAL (litige_commercial_contentieux.html)
   Teal profond
   ------------------------------------------------------------ */
.palette-commercial,
[data-palette="commercial"] {
  --page-bg           : #e7f3f2;
  --page-surface      : #f4fbfa;
  --page-surface-soft : #d7ecea;
  --page-line         : #9fc9c5;
  --page-line-strong  : #3d8f8a;
  --page-accent       : #1f7a78;
  --page-accent-mid   : #176360;
  --page-accent-dark  : #0f4f4d;
  --page-accent-hover : #0b3f3e;
  --page-title        : #0b3f3e;
  --page-text         : #123f3e;
  --page-muted        : #52706e;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.07  LITIGE COPROPRIÉTÉ (litige_copropriete_contentieux.html)
   Rouge brique
   ------------------------------------------------------------ */
.palette-copropriete,
[data-palette="copropriete"] {
  --page-bg           : #fde8e4;
  --page-surface      : #fff4f1;
  --page-surface-soft : #fbd8d1;
  --page-line         : #e3a49a;
  --page-line-strong  : #c85d4f;
  --page-accent       : #b94335;
  --page-accent-mid   : #a84a3f;
  --page-accent-dark  : #923126;
  --page-accent-hover : #7a261e;
  --page-title        : #3b1814;
  --page-text         : #4b241f;
  --page-muted        : #7b4a42;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.08  LITIGE LOCATIF (litige_locatif.html)
   Terracotta
   ------------------------------------------------------------ */
.palette-locatif,
[data-palette="locatif"] {
  --page-bg           : #fde8dc;
  --page-surface      : #fff4ec;
  --page-surface-soft : #f9d8c7;
  --page-line         : #e1b49f;
  --page-line-strong  : #b86445;
  --page-accent       : #a34f35;
  --page-accent-mid   : #934630;
  --page-accent-dark  : #7f3b27;
  --page-accent-hover : #6b301f;
  --page-title        : #3b1f16;
  --page-text         : #4f3329;
  --page-muted        : #76584e;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.09  RECOURS ADMINISTRATIF (recours_administratif.html)
   Bleu marine
   ------------------------------------------------------------ */
.palette-recours,
[data-palette="recours"] {
  --page-bg           : #eaf3f7;
  --page-surface      : #f5f7fa;
  --page-surface-soft : #dfeef5;
  --page-line         : #b8cfdd;
  --page-line-strong  : #4f7f99;
  --page-accent       : #365f78;
  --page-accent-mid   : #2b4462;
  --page-accent-dark  : #1f3148;
  --page-accent-hover : #1c2633;
  --page-title        : #142235;
  --page-text         : #1c2633;
  --page-muted        : #4c6378;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.10  REFUS PRESTATION CAF/CPAM/RETRAITE
         (refus_prestation_caf_cpam_retraite.html)
   Violet prune — version foncée/chaude
   ------------------------------------------------------------ */
.palette-refus-caf,
[data-palette="refus-caf"] {
  --page-bg           : #f0e7fb;
  --page-surface      : #f8f3ff;
  --page-surface-soft : #e7d8f4;
  --page-line         : #cbb6de;
  --page-line-strong  : #7a4f99;
  --page-accent       : #5d3478;
  --page-accent-mid   : #56306f;
  --page-accent-dark  : #47245f;
  --page-accent-hover : #2e183f;
  --page-title        : #2e183f;
  --page-text         : #443050;
  --page-muted        : #695677;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.11  CONTESTER DÉCISION CPAM (contester_decision_cpam.html)
   Violet prune — version claire/froide
   Même famille que 2.10, teinte plus bleue et plus lumineuse.
   ------------------------------------------------------------ */
.palette-contester-cpam,
[data-palette="contester-cpam"] {
  --page-bg           : #eef0fd;
  --page-surface      : #f5f7fe;
  --page-surface-soft : #d8dffa;
  --page-line         : #b0bbec;
  --page-line-strong  : #5B73C2;
  --page-accent       : #4A5FA8;
  --page-accent-mid   : #3d4b7a;
  --page-accent-dark  : #253070;
  --page-accent-hover : #1e2647;
  --page-title        : #111838;
  --page-text         : #1a2050;
  --page-muted        : #5a6899;
  --radius            : 4px;
}


/* ------------------------------------------------------------
   2.12  SINISTRE CONTESTÉ (sinistre_conteste.html)
   Orange ambre
   ------------------------------------------------------------ */
.palette-sinistre,
[data-palette="sinistre"] {
  --page-bg           : #fff0df;
  --page-surface      : #fff8ef;
  --page-surface-soft : #ffe3c4;
  --page-line         : #e7b174;
  --page-line-strong  : #c8752b;
  --page-accent       : #b86625;
  --page-accent-mid   : #a95718;
  --page-accent-dark  : #8c4613;
  --page-accent-hover : #5a3218;
  --page-title        : #4a260d;
  --page-text         : #5a3218;
  --page-muted        : #9a7250;
  --radius            : 4px;
}


/* ============================================================
   3. GUIDES COLORÉS
   Même palette que la page thématique parente.
   Copier le bloc :root de la palette correspondante.

   avocat-guide-SEO.md       → palette 2.04 Brun rouille
   conciliation-guide-SEO.md → palette 2.03 Or chaud
   recours-en-ligne-guide-SEO.md → palette 2.09 Bleu marine
   ============================================================ */


/* ============================================================
   4. GUIDES JOURNAL — NOIR/BLANC ÉDITORIAL
   Pour :
   bordereau-organisation-guide-SEO.md
   chronologie-guide-SEO.md
   erreurs-dossier-CORRIGE.md
   ============================================================ */

.palette-journal,
[data-palette="journal"] {
  --page-bg           : #fffdf4;   /* fond chaud de marque */
  --page-surface      : #ffffff;
  --page-surface-soft : #f5f2ea;
  --page-line         : #ddd8cc;
  --page-line-strong  : #5a5448;
  --page-accent       : #3d3830;
  --page-accent-mid   : #2e2a24;
  --page-accent-dark  : #1f1c17;
  --page-accent-hover : #111009;
  --page-title        : #1a1814;
  --page-text         : #2a2720;
  --page-muted        : #7a7468;
  --radius            : 4px;
}


/* ============================================================
   5. RÈGLES D'USAGE
   ============================================================

   CORPS DE PAGE
   body           → font-family: var(--font-body); color: var(--page-text); background: var(--page-bg);
   html/body bg   → var(--page-bg)

   TITRES
   h1             → font-family: var(--font-display); color: var(--page-title); font-size: var(--text-hero); font-weight: 400;
   h2             → font-family: var(--font-display); color: var(--page-title); font-size: var(--text-2xl); font-weight: 400;
   h3             → font-family: var(--font-body);    color: var(--page-accent-dark); font-size: var(--text-xl); font-weight: 500;
   h4             → font-family: var(--font-body);    color: var(--page-accent-dark); font-size: var(--text-lg); font-weight: 500;

   TEXTE
   Corps p        → color: var(--page-text); font-size: var(--text-base); line-height: 1.7;
   Texte secondaire → color: var(--page-muted); font-size: var(--text-sm);
   Lead / intro   → color: var(--page-accent-mid); font-size: var(--text-lg); font-weight: 300;

   LIENS
   a              → color: var(--page-accent);
   a:hover        → color: var(--page-accent-hover);

   HEADER
   header bg      → var(--page-bg)
   header border  → 1px solid var(--page-line)

   NAVIGATION
   nav bg         → var(--page-bg)
   nav lien actif → color: var(--page-accent); border-bottom: 2px solid var(--page-accent);
   nav lien hover → color: var(--page-accent-dark);

   CARTES / BLOCS
   card bg        → var(--page-surface)
   card border    → 1px solid var(--page-line)
   card radius    → var(--radius-lg)
   section alt bg → var(--page-surface-soft)

   BOUTONS PRIMAIRES
   btn bg         → var(--page-accent)
   btn bg hover   → var(--page-accent-hover)
   btn texte      → #ffffff
   btn radius     → var(--radius)

   BOUTONS SECONDAIRES / OUTLINE
   btn border     → 1px solid var(--page-accent)
   btn texte      → var(--page-accent)
   btn bg hover   → var(--page-surface-soft)

   BORDURES / SÉPARATEURS
   bordure légère → 1px solid var(--page-line)
   bordure forte  → 1px solid var(--page-line-strong)
   hr             → border-color: var(--page-line)

   BADGES / ÉTIQUETTES
   badge bg       → var(--page-surface-soft)
   badge border   → 1px solid var(--page-line-strong)
   badge texte    → var(--page-accent-dark)

   FOOTER
   footer bg      → var(--page-accent-dark)
   footer texte   → #ffffff (ou --page-surface selon contraste)

   TABLEAUX
   thead bg       → var(--page-surface-soft)
   tr:nth-child(even) bg → var(--page-bg)
   td border      → 1px solid var(--page-line)

   GUIDES JOURNAL — RÈGLES SPÉCIFIQUES
   Titres h1/h2   → font-family: var(--font-display); letter-spacing: -0.02em;
   Accent éditorial → border-left: 3px solid var(--page-accent); padding-left: 1rem;
   Pull quote     → font-family: var(--font-display); font-size: var(--text-xl); color: var(--page-accent);
   Numéros de section → font-variant-numeric: tabular-nums; color: var(--page-muted);

   ============================================================ */