/* ============================================================================
   Célian Peinture — tokens de design
   ----------------------------------------------------------------------------
   Source de vérité : UI-UX/tokens/*.css (6 fichiers concaténés dans l'ordre
   de UI-UX/styles.css). Les valeurs sont reprises À L'IDENTIQUE.
   Ne pas modifier ici : modifier dans UI-UX/ puis reporter.

   Seul écart : les webfonts sont auto-hébergées (@font-face ci-dessous) au
   lieu de l'@import Google Fonts d'origine, qui transmettait l'adresse IP du
   visiteur à Google — incompatible avec la politique « aucun traceur » du
   site, et pénalisant pour le LCP.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. fonts */
/* Poppins — titres. Sous-ensemble latin. */
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Poppins-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/Poppins-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/Poppins-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/Poppins-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Public Sans — corps de texte. Sous-ensemble latin. */
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/PublicSans-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/PublicSans-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/PublicSans-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------- 2. colors */
:root{
  /* ---- Base palette (extracted from the CP monogram) ---- */
  --cp-gold-100:#F3ECD9;   /* accent, heavily diluted — badges, quiet section fills */
  --cp-gold-200:#E3D3A6;   /* hairline rules on gold tints */
  --cp-gold-500:#A6841F;   /* brand accent — the monogram colour */
  --cp-gold-600:#8A6D19;   /* hover / active */
  --cp-gold-700:#6E5614;   /* pressed, small text on light gold */

  --cp-ink-900:#1C1C1A;    /* anthracite — never pure black */
  --cp-ink-700:#3A3934;
  --cp-ink-500:#6B6862;    /* warm grey — secondary copy, captions */
  --cp-ink-300:#A9A69E;
  --cp-ink-200:#DEDBD3;    /* borders */
  --cp-ink-100:#EFEDE7;    /* dividers, muted surface */

  --cp-white:#FFFFFF;
  --cp-bone:#FBFAF7;       /* off-white page background */

  --cp-success:#3F6B4A;
  --cp-warning:#9A6B15;
  --cp-danger:#8C3B2E;

  /* ---- Semantic aliases ---- */
  --surface-page:var(--cp-bone);
  --surface-card:var(--cp-white);
  --surface-inverse:var(--cp-ink-900);
  --surface-muted:var(--cp-ink-100);
  --surface-accent-soft:var(--cp-gold-100);

  --text-heading:var(--cp-ink-900);
  --text-body:var(--cp-ink-700);
  --text-muted:var(--cp-ink-500);
  --text-inverse:var(--cp-bone);
  --text-accent:var(--cp-gold-600);
  --text-on-accent:var(--cp-white);

  --accent:var(--cp-gold-500);
  --accent-hover:var(--cp-gold-600);
  --accent-press:var(--cp-gold-700);

  --border-subtle:var(--cp-ink-200);
  --border-strong:var(--cp-ink-900);
  --border-accent:var(--cp-gold-500);

  --focus-ring:var(--cp-gold-600);
  --overlay-photo:linear-gradient(180deg,rgba(28,28,26,.55) 0%,rgba(28,28,26,.25) 45%,rgba(28,28,26,.7) 100%);
}

/* ----------------------------------------------------------- 3. typography */
:root{
  --font-display:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-body:"Public Sans","Segoe UI",system-ui,sans-serif;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  --fs-display:clamp(2.75rem,5.2vw,4.25rem);
  --fs-h1:clamp(2.25rem,3.6vw,3rem);
  --fs-h2:clamp(1.75rem,2.6vw,2.25rem);
  --fs-h3:1.375rem;
  --fs-h4:1.125rem;
  --fs-lead:1.1875rem;
  --fs-body:1.0625rem;
  --fs-small:0.9375rem;
  --fs-caption:0.8125rem;
  --fs-eyebrow:0.75rem;

  --lh-tight:1.08;
  --lh-heading:1.18;
  --lh-body:1.6;
  --lh-loose:1.75;

  --ls-display:-0.02em;
  --ls-heading:-0.01em;
  --ls-body:0;
  --ls-eyebrow:0.16em;
}

/* -------------------------------------------------------------- 4. spacing */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --section-y:clamp(64px,9vw,128px);
  --gutter:clamp(20px,5vw,48px);
  --container:1200px;
  --container-narrow:720px;            /* colonnes de texte SEO / blog */
  --grid-gap:var(--space-5);
}

/* ------------------------------------------------------- 5. radius, shadow */
:root{
  /* Coins doux, en écho à l'arc du monogramme — jamais d'angles durs, jamais de pilules molles */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --radius-xl:24px; --radius-pill:999px;

  --border-hairline:1px;

  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(28,28,26,.05);
  --shadow-sm:0 2px 6px rgba(28,28,26,.06);
  --shadow-md:0 8px 24px rgba(28,28,26,.08);
  --shadow-lg:0 20px 48px rgba(28,28,26,.10);
  --shadow-focus:0 0 0 3px rgba(166,132,31,.28);
}

/* --------------------------------------------------------------- 6. motion */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:320ms;
  --dur-reveal:600ms;
  --reveal-shift:16px;   /* translateY de départ des fade-in au scroll */
}
@media (prefers-reduced-motion:reduce){:root{
  --dur-fast:0ms;
  --dur-base:0ms;
  --dur-slow:0ms;
  --dur-reveal:0ms;
  --reveal-shift:0px;
}}

/* ------------------------------------------------- Règle de lien globale */
/* Reprise de UI-UX/tokens/colors.css:48-49 */
a{color:var(--text-accent);text-decoration:none;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--accent-press);text-decoration:underline}