/* ==========================================================================
   tokens.css — Design tokens sémantiques
   Toutes les valeurs sont surchargeables via data-theme et data-accent.
   ========================================================================== */

:root {
  /* ---- Espacements (échelle 4px) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 1.75rem;  /* 28px */
  --space-8: 2rem;     /* 32px */
  --space-9: 2.5rem;   /* 40px */
  --space-10: 3rem;    /* 48px */
  --space-11: 4rem;    /* 64px */
  --space-12: 5rem;    /* 80px */

  /* ---- Rayons ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ---- Ombres ---- */
  --shadow-sm: 0 1px 2px rgba(15, 30, 77, 0.08);
  --shadow-md: 0 2px 8px rgba(15, 30, 77, 0.10);
  --shadow-lg: 0 8px 24px rgba(15, 30, 77, 0.14);
  --shadow-xl: 0 16px 48px rgba(15, 30, 77, 0.18);

  /* ---- Transitions ---- */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Typographie ---- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  /* ---- Échelle de tailles ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;

  /* ---- Hauteurs de ligne ---- */
  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ---- Z-index ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ======================================================================
     CHARTE ADIRTPI — primitives exactes (couleurs.md, infographie officielle)
     Ne pas modifier ces valeurs : ce sont les couleurs de référence.
     ====================================================================== */
  --adirtpi-blue-deep: #0F1E4D;    /* Bleu Royal Profond — fond principal, bandeau titre, footer */
  --adirtpi-blue-night: #1B2A5E;   /* Bleu Nuit — dégradés de fond, sections sombres */
  --adirtpi-blue-israel: #2E5C9A;  /* Bleu Israël — détails, accents secondaires */
  --adirtpi-gold: #D4A017;         /* Or — titres, bordures, icônes (décoratif) */
  --adirtpi-gold-light: #E8C158;   /* Or clair — dégradés dorés, surbrillances, filets */
  --adirtpi-white: #FFFFFF;        /* Blanc — fond des cartes, texte sur fond foncé */
  --adirtpi-text: #222222;         /* Texte courant */
  --adirtpi-text-quote: #B8860B;   /* Citations — AA sur fond sombre (5.75:1) uniquement */
  --adirtpi-text-on-dark: #F3D98B; /* Texte sur fond bleu foncé — 11.51:1 sur #0F1E4D */

  /* ---- Couleurs de section (en-têtes de cartes / bandeaux) ---- */
  --adirtpi-danisme: #3B78B5;
  --adirtpi-danite: #16234D;
  --adirtpi-daniste: #3E7A45;
  --adirtpi-maison-priere: #8B5A2B;
  --adirtpi-responsables: #D4841E;
  --adirtpi-femmes: #8B2C63;
  --adirtpi-jeunes: #1F6B5C;

  /* Fonds doux dérivés (cartes, badges) — thème clair */
  --adirtpi-danisme-soft: #EBF2F8;
  --adirtpi-danite-soft: #E8E9ED;
  --adirtpi-daniste-soft: #ECF2EC;
  --adirtpi-maison-priere-soft: #F3EFEA;
  --adirtpi-responsables-soft: #FBF3E9;
  --adirtpi-femmes-soft: #F3EAEF;
  --adirtpi-jeunes-soft: #E9F0EF;

  /* Texte sur bandeau de section — blanc, sauf teintes claires (AA ≥ 4.5:1) */
  --on-section-danisme: var(--adirtpi-white);          /* 4.63:1 */
  --on-section-danite: var(--adirtpi-white);           /* 15.20:1 */
  --on-section-daniste: var(--adirtpi-white);          /* 5.15:1 */
  --on-section-maison-priere: var(--adirtpi-white);    /* 5.84:1 */
  --on-section-responsables: var(--adirtpi-blue-deep); /* 5.42:1 — or ambré trop clair pour du blanc */
  --on-section-femmes: var(--adirtpi-white);           /* 7.96:1 */
  --on-section-jeunes: var(--adirtpi-white);           /* 6.33:1 */

  /* Texte sur fond doux de section (badges) — AA ≥ 4.5:1 */
  --on-section-danisme-soft: #356CA2;                            /* 4.87:1 */
  --on-section-danite-soft: var(--adirtpi-danite);               /* 12.53:1 */
  --on-section-daniste-soft: #3A7441;                            /* 4.92:1 */
  --on-section-maison-priere-soft: var(--adirtpi-maison-priere); /* 5.10:1 */
  --on-section-responsables-soft: #985D12;                       /* 4.89:1 */
  --on-section-femmes-soft: var(--adirtpi-femmes);               /* 6.76:1 */
  --on-section-jeunes-soft: var(--adirtpi-jeunes);               /* 5.48:1 */

  /* ---- Couleurs sémantiques — THÈME CLAIR (défaut) ---- */
  --color-bg: var(--adirtpi-white);
  --color-surface: var(--adirtpi-white);   /* fond des cartes */
  --color-surface-alt: #EEF2F9;            /* fonds alternés (bleu très clair) */
  --color-text: var(--adirtpi-text);
  --color-muted: #5A6072;                  /* AA (6.2:1 sur blanc) */
  --color-border: #D6DCE8;
  --color-border-strong: #AEB8CC;
  --color-focus: var(--adirtpi-blue-israel);

  /* ---- Accent (identité : bleu royal profond + or) ---- */
  --accent: var(--adirtpi-blue-deep);
  --accent-hover: var(--adirtpi-blue-night);
  --accent-soft: #E4E9F4;
  --accent-soft-hover: #D5DDF0;
  --on-accent: var(--adirtpi-white);
  --on-accent-soft: var(--adirtpi-blue-night);

  /* ---- Or (charte + déclinaisons texte) ---- */
  --gold: var(--adirtpi-gold);             /* or de la charte — accents décoratifs */
  --gold-text: var(--adirtpi-text-quote);  /* citations (grand texte) */
  --gold-ink: #8A6508;                     /* or texte courant — AA (5.3:1 sur blanc) */
  --gold-bright: var(--adirtpi-gold-light);
  --on-gold: var(--adirtpi-blue-deep);

  /* ---- Couleurs de section (codification infographie) ---- */
  --section-danisme: var(--adirtpi-danisme);
  --section-danite: var(--adirtpi-danite);
  --section-daniste: var(--adirtpi-daniste);
  --section-maison: var(--adirtpi-maison-priere);
  --section-responsables: var(--adirtpi-responsables);
  --section-femmes: var(--adirtpi-femmes);
  --section-jeunes: var(--adirtpi-jeunes);

  /* ---- États ---- */
  --color-success: #2F6B3F;
  --color-success-soft: #E1EDE2;
  --on-success: #FFFFFF;
  --color-warning: #8A5A16;
  --color-warning-soft: #F7EEDC;
  --on-warning: #222222;
  --color-danger: #A63A2F;
  --color-danger-soft: #F6E3E0;
  --on-danger: #FFFFFF;
  --color-info: var(--adirtpi-blue-israel);
  --color-info-soft: #E1EAF6;
  --on-info: #FFFFFF;

  /* ---- Composants ---- */
  --header-height: 4.5rem;   /* navbar unique */
  --container-max: 1320px;
}

/* ---- THÈME SOMBRE (prefers-color-scheme + data-theme) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #14120F;
    --color-surface: #1E1B17;
    --color-surface-alt: #26221D;
    --color-text: #EDE9DF;         /* AAA (13.8:1 sur bg sombre) */
    --color-muted: #A39E93;        /* AAA (7.2:1 sur bg sombre) */
    --color-border: #3A352E;
    --color-border-strong: #524C42;
    --color-focus: var(--adirtpi-gold-light);

    --accent: var(--adirtpi-gold-light); /* or clair sur sombre — AAA (10.86:1) */
    --accent-hover: #F0D27A;       /* or clair éclairci — 12.65:1 */
    --accent-soft: #2E2A22;
    --accent-soft-hover: #3A3428;
    --on-accent: #14120F;
    --on-accent-soft: #EDE9DF;

    --gold: var(--adirtpi-gold);
    --gold-text: var(--adirtpi-gold); /* or texte sur fond sombre — AA (7.87:1) */
    --gold-ink: var(--adirtpi-gold-light); /* or des libellés — AA sur fond sombre */
    --gold-bright: var(--adirtpi-gold-light);
    --on-gold: #14120F;

    /* ---- Sections — variantes éclaircies lisibles sur fond sombre ---- */
    --adirtpi-danisme: #76A1CB;
    --adirtpi-danite: #969CAF;
    --adirtpi-daniste: #78A27D;
    --adirtpi-maison-priere: #B49475;
    --adirtpi-responsables: #D68A29;
    --adirtpi-femmes: #BF8BA9;
    --adirtpi-jeunes: #79A69D;

    --adirtpi-danisme-soft: #23272B;
    --adirtpi-danite-soft: #282727;
    --adirtpi-daniste-soft: #232820;
    --adirtpi-maison-priere-soft: #2C261E;
    --adirtpi-responsables-soft: #312413;
    --adirtpi-femmes-soft: #2E2426;
    --adirtpi-jeunes-soft: #232824;

    --on-section-danisme: #14120F;        /* 6.88:1 */
    --on-section-danite: #14120F;         /* 6.83:1 */
    --on-section-daniste: #14120F;        /* 6.47:1 */
    --on-section-maison-priere: #14120F;  /* 6.62:1 */
    --on-section-responsables: #14120F;   /* 6.70:1 */
    --on-section-femmes: #14120F;         /* 6.66:1 */
    --on-section-jeunes: #14120F;         /* 6.90:1 */
    --on-section-danisme-soft: var(--adirtpi-danisme);             /* 5.54:1 */
    --on-section-danite-soft: var(--adirtpi-danite);               /* 5.44:1 */
    --on-section-daniste-soft: var(--adirtpi-daniste);             /* 5.20:1 */
    --on-section-maison-priere-soft: var(--adirtpi-maison-priere); /* 5.30:1 */
    --on-section-responsables-soft: var(--adirtpi-responsables);   /* 5.41:1 */
    --on-section-femmes-soft: var(--adirtpi-femmes);               /* 5.36:1 */
    --on-section-jeunes-soft: var(--adirtpi-jeunes);               /* 5.54:1 */

    --color-success: #7FBF8F;      /* AAA (8.4:1 sur bg sombre) */
    --color-success-soft: #22301F;
    --on-success: #14120F;
    --color-warning: #D9B05C;      /* AAA (9.2:1 sur bg sombre) */
    --color-warning-soft: #32281A;
    --on-warning: #14120F;
    --color-danger: #E08575;       /* AAA (7.6:1 sur bg sombre) */
    --color-danger-soft: #3A1E18;
    --on-danger: #14120F;
    --color-info: #85B0D9;         /* AAA (8.9:1 sur bg sombre) */
    --color-info-soft: #1A2836;
    --on-info: #14120F;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --color-bg: #14120F;
  --color-surface: #1E1B17;
  --color-surface-alt: #26221D;
  --color-text: #EDE9DF;
  --color-muted: #A39E93;
  --color-border: #3A352E;
  --color-border-strong: #524C42;
  --color-focus: var(--adirtpi-gold-light);

  --accent: var(--adirtpi-gold-light); /* or clair sur sombre — AAA (10.86:1) */
  --accent-hover: #F0D27A;       /* or clair éclairci — 12.65:1 */
  --accent-soft: #2E2A22;
  --accent-soft-hover: #3A3428;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;

  --gold: var(--adirtpi-gold);
  --gold-text: var(--adirtpi-gold); /* or texte sur fond sombre — AA (7.87:1) */
  --gold-ink: var(--adirtpi-gold-light); /* or des libellés — AA sur fond sombre */
  --gold-bright: var(--adirtpi-gold-light);
  --on-gold: #14120F;

  /* ---- Sections — variantes éclaircies lisibles sur fond sombre ---- */
  --adirtpi-danisme: #76A1CB;
  --adirtpi-danite: #969CAF;
  --adirtpi-daniste: #78A27D;
  --adirtpi-maison-priere: #B49475;
  --adirtpi-responsables: #D68A29;
  --adirtpi-femmes: #BF8BA9;
  --adirtpi-jeunes: #79A69D;

  --adirtpi-danisme-soft: #23272B;
  --adirtpi-danite-soft: #282727;
  --adirtpi-daniste-soft: #232820;
  --adirtpi-maison-priere-soft: #2C261E;
  --adirtpi-responsables-soft: #312413;
  --adirtpi-femmes-soft: #2E2426;
  --adirtpi-jeunes-soft: #232824;

  --on-section-danisme: #14120F;        /* 6.88:1 */
  --on-section-danite: #14120F;         /* 6.83:1 */
  --on-section-daniste: #14120F;        /* 6.47:1 */
  --on-section-maison-priere: #14120F;  /* 6.62:1 */
  --on-section-responsables: #14120F;   /* 6.70:1 */
  --on-section-femmes: #14120F;         /* 6.66:1 */
  --on-section-jeunes: #14120F;         /* 6.90:1 */
  --on-section-danisme-soft: var(--adirtpi-danisme);             /* 5.54:1 */
  --on-section-danite-soft: var(--adirtpi-danite);               /* 5.44:1 */
  --on-section-daniste-soft: var(--adirtpi-daniste);             /* 5.20:1 */
  --on-section-maison-priere-soft: var(--adirtpi-maison-priere); /* 5.30:1 */
  --on-section-responsables-soft: var(--adirtpi-responsables);   /* 5.41:1 */
  --on-section-femmes-soft: var(--adirtpi-femmes);               /* 5.36:1 */
  --on-section-jeunes-soft: var(--adirtpi-jeunes);               /* 5.54:1 */

  --color-success: #7FBF8F;
  --color-success-soft: #22301F;
  --on-success: #14120F;
  --color-warning: #D9B05C;
  --color-warning-soft: #32281A;
  --on-warning: #14120F;
  --color-danger: #E08575;
  --color-danger-soft: #3A1E18;
  --on-danger: #14120F;
  --color-info: #85B0D9;
  --color-info-soft: #1A2836;
  --on-info: #14120F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   8 PALETTES D'ACCENT — chacune respecte AA/AAA sur les deux thèmes
   Usage : <body data-accent="3"> — palette n°3 (Bleu Israël)
   ========================================================================== */

/* 1 — Ivoire (neutre) */
[data-accent="1"] {
  --accent: #2B2926;
  --accent-hover: #443F38;
  --accent-soft: #EDE9DF;
  --accent-soft-hover: #E0DBCE;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="1"][data-theme="dark"] {
  --accent: #EDE9DF;
  --accent-hover: #FFFFFF;
  --accent-soft: #2B2926;
  --accent-soft-hover: #3A352E;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* 2 — Or */
[data-accent="2"] {
  --accent: #8A6508;          /* or assombri — AA (4.81:1 sur bg ; 4.43:1 avant ajustement) */
  --accent-hover: #7E5C08;    /* AA (5.55:1 sur bg) */
  --accent-soft: #F3EAD0;
  --accent-soft-hover: #EBDFB8;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
  --gold: #8A6508;
}
[data-accent="2"][data-theme="dark"] {
  --accent: var(--adirtpi-gold-light); /* or clair — 10.86:1 */
  --accent-hover: #F0D27A;
  --accent-soft: #2E2A22;
  --accent-soft-hover: #3A3428;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
  --gold: var(--adirtpi-gold-light);
}

/* 3 — Bleu Israël (charte) */
[data-accent="3"] {
  --accent: #2E5C9A;          /* Bleu Israël — AA (6.10:1 sur bg) */
  --accent-hover: #3A6FA0;    /* AA (4.79:1 sur bg) */
  --accent-soft: #E0EAF3;
  --accent-soft-hover: #D0E1EF;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="3"][data-theme="dark"] {
  --accent: #85B0D9;
  --accent-hover: #9AC1E5;
  --accent-soft: #1A2836;
  --accent-soft-hover: #223245;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* 4 — Terracotta */
[data-accent="4"] {
  --accent: #9C4526;          /* AA (4.9:1 sur bg) */
  --accent-hover: #B45430;
  --accent-soft: #F3E2D9;
  --accent-soft-hover: #EDD4C5;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="4"][data-theme="dark"] {
  --accent: #E08575;
  --accent-hover: #EA988A;
  --accent-soft: #3A1E18;
  --accent-soft-hover: #472620;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* 5 — Vert sauge */
[data-accent="5"] {
  --accent: #4F6B4F;          /* AA (4.6:1 sur bg) */
  --accent-hover: #5E7D5E;
  --accent-soft: #E4EBE3;
  --accent-soft-hover: #D6E2D4;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="5"][data-theme="dark"] {
  --accent: #9BC49F;
  --accent-hover: #AED2B2;
  --accent-soft: #22301F;
  --accent-soft-hover: #2A3A26;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* 6 — Prune */
[data-accent="6"] {
  --accent: #6B2C4F;          /* AAA (8.1:1 sur bg) */
  --accent-hover: #80375D;
  --accent-soft: #EFE1E9;
  --accent-soft-hover: #E9D3E1;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="6"][data-theme="dark"] {
  --accent: #D9A0BE;
  --accent-hover: #E5B0CB;
  --accent-soft: #3A1E2A;
  --accent-soft-hover: #472635;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* 7 — Ardoise */
[data-accent="7"] {
  --accent: #4A5568;          /* AA (6.6:1 sur bg) */
  --accent-hover: #5A667A;
  --accent-soft: #E5E8ED;
  --accent-soft-hover: #D8DCE4;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="7"][data-theme="dark"] {
  --accent: #C5CDD9;
  --accent-hover: #D8DEE8;
  --accent-soft: #2A3038;
  --accent-soft-hover: #363D47;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* 8 — Bleu Royal Profond (charte — défaut) */
[data-accent="8"] {
  --accent: var(--adirtpi-blue-deep);  /* #0F1E4D — AAA (14.46:1 sur bg) */
  --accent-hover: var(--adirtpi-blue-night); /* #1B2A5E — 12.33:1 */
  --accent-soft: #E2E7F0;
  --accent-soft-hover: #D3DAE8;
  --on-accent: #F7F3EC;
  --on-accent-soft: #2B2926;
}
[data-accent="8"][data-theme="dark"] {
  --accent: #A3B8D9;
  --accent-hover: #B8CADF;
  --accent-soft: #1E2836;
  --accent-soft-hover: #283247;
  --on-accent: #14120F;
  --on-accent-soft: #EDE9DF;
}

/* ---- Respect de prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}