/* ==========================================================================
   robot-nettoyage-pro.fr — Charte graphique (tokens)
   Thème clair uniquement, direction « pixel & trame », signal magenta.
   Une fois la palette retenue, il suffira de supprimer les deux autres blocs.
   Toutes les couleurs de texte respectent WCAG AA (4,5:1) sur leur fond.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Pixel";
  src: url("../fonts/geist-pixel-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---- Système : papier, encre, un seul signal -------------------------------
   Le site vit en deux couleurs : un papier gris neutre et une encre presque
   noire. La couleur de signal (bouton principal, robot sur la carte, repères)
   est la seule teinte vive. Trois signaux candidats, tous absents des
   concurrents (bleu, cyan, jaune, orange, rouge et vert sont déjà pris). */

/* ---- Signal « Magenta trame » -----------------------------------------------
   Le magenta d'imprimerie, celui des trames CMJN : il prolonge le dither. */
:root {
  --color-bg: #F4F3F3;
  --color-bg-subtle: #EAE8E9;
  --color-surface: #FFFFFF;
  --color-text: #141214;
  --color-text-muted: #5C5A5C;
  --color-border: #DCD9DA;
  --color-border-strong: #8A878A;

  --color-primary: #B0005A;
  --color-link: #B0005A;
  --color-accent: #D4006F;          /* bouton principal */
  --color-accent-hover: #B0005A;
  --color-on-accent: #FFFFFF;
  --color-accent-ink: #B0005A;      /* signal utilisé en texte */
  --color-accent-tint: #FCE6F1;
  --color-mark: #D4006F;            /* repères : carrés, puces, soulignés */
  --color-highlight: #E00090;       /* surligneur : magenta acidulé, texte blanc dessus (4,6:1) */
  --color-on-highlight: #FFFFFF;
  --color-tech: #141214;            /* données : encre + police pixel */
  --color-tech-tint: #EAE8E9;

  --color-inverse-bg: #161214;
  --color-inverse-muted: #B3AEB1;
  --color-inverse-tech: #FF7DBE;

  --color-focus: #D4006F;
  --logo-bg: #141214;
  --logo-line: #F4F3F3;
  --logo-dot: #FF2E93;
}

:root {
  color-scheme: light;
  --color-inverse-text: #FFFFFF;
  --color-success: #0F7B4F;
  --color-error: #C62828;

  /* Couleurs de secteur : petites pastilles et liserés uniquement */
  --sector-logistique: #E8772E;
  --sector-sante: #12A39A;
  --sector-commerce: #4F9D2D;
  --sector-hotellerie: #D9A21B;
  --sector-bureaux: #3C78D8;
  --sector-industrie: #6E6E73;

  /* Carte de couverture et trames (canvas, voir pixel.js) */
  --map-dirt: var(--color-border-strong);
  --map-wall: var(--color-text);
  --map-bot: var(--color-accent);
  --map-trail: var(--color-accent);
  --map-cell: 6px;
  --dither-color: var(--color-text);
  --dither-px: 4px;

  /* ---- Typographie ----------------------------------------------------- */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Geist Pixel", "IBM Plex Mono", ui-monospace, monospace; /* étiquettes, chiffres */
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;  /* valeurs techniques */

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1.0625rem; /* 17 — lecture longue */
  --fs-lg: 1.25rem;     /* 20 — chapô */
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.375rem, 2.2vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 4vw, 2.75rem);
  --fs-h1: clamp(2.375rem, 6vw, 4.25rem);
  --fs-display: clamp(3rem, 8vw, 6rem);

  --lh-body: 1.65;
  --lh-heading: 1.08;
  --tracking-display: -0.025em;
  --tracking-label: 0.04em;

  /* ---- Espacements (base 4 px) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --section-pad: clamp(4rem, 10vh, 7.5rem);

  --content-width: 76rem;
  --prose-width: 42rem;
  --container-pad: clamp(1rem, 4vw, 3rem);

  /* ---- Formes ---------------------------------------------------------- */
  --radius-sm: 2px;     /* champs, badges : coins presque nets, esprit pixel */
  --radius: 3px;        /* boutons */
  --radius-lg: 4px;     /* cartes, médias */
  --radius-pill: 2px;   /* plus de pilules : pastilles carrées */

  --shadow-sm: none;    /* pas d'ombres floues : des bordures fines */
  --shadow-card: 4px 4px 0 var(--color-text);   /* ombre « pixel », au survol */
  --shadow-pop: 6px 6px 0 var(--color-text);

  /* ---- Mouvement ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 600ms;
}