/* ==========================================================================
   Coccinet — tokens de design
   Piste « Sept points » V3 : pétrole + champagne, une seule famille.
   Règles : aplats uniquement (aucun dégradé), rouge = étape en cours,
   encre sur champagne, une famille, motion sur 4 durées.
   Contrastes calculés (WCAG 2.2) indiqués en commentaire.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* ---------- Couleurs : palette ---------- */
  --c-white: #FFFFFF;
  --c-ink: color-mix(in srgb, var(--c-petrol) 62%, #000);  /* dérivé : encre profonde (jamais noire) · ≈14:1 sur blanc */
  --c-ink-muted: #5C564E;    /* texte secondaire · 7,3:1 sur blanc, 6,2:1 sur lin */
  --c-linen: #F1ECE2;
  --c-linen-soft: #F7F4EE;   /* fond très léger (citations) */        /* fond secondaire · encre 15,2:1 */
  --c-line: #E3DDD1;         /* filets décoratifs (non porteurs d'information) */
  --c-line-strong: #8C8577;  /* bordures de champs et de choix · 3,7:1 sur blanc */
  --c-petrol: #1F3A5F;       /* bleu nuit (couleur principale) · fonds sombres, pictos et accents texte sur clair */
  --c-petrol-dark: color-mix(in srgb, var(--c-petrol) 78%, #000);  /* dérivé : survol, bandes sombres */
  --c-petrol-tint: color-mix(in srgb, var(--c-petrol) 10%, #fff);  /* dérivé : fond de sélection clair */
  --c-champagne: #C4A46E;    /* accent lumineux · encre dessus 7,5:1 · sur pétrole 4,05:1 = grands textes, points et filets uniquement */
  --c-on-dark-muted: #D9DEDC;          /* texte secondaire sur pétrole · 7,0:1 */
  --c-on-dark-line: rgba(255, 255, 255, 0.22); /* filets sur fond sombre */
  --c-red: #ED1C24;          /* rouge Coccinet (logo officiel) · 4,4:1 sur blanc : repères et logo uniquement, jamais en texte ; sur pétrole (2,2:1) toujours cerclé de blanc */
  --c-red-deep: #C4151C;     /* rouge Coccinet profond · blanc dessus 6,0:1 · bouton d'action principale uniquement */

  /* Lignes d'offre et secteurs : repères discrets (point, filet), jamais en aplat */
  --c-line-apps: #2F5D8A;       /* 6,9:1 */
  --c-line-cloud: #3F6F78;      /* 5,6:1 */
  --c-line-data-ai: #6A5A8C;    /* 6,1:1 */
  --c-line-healthtech: #3D7357; /* 5,5:1 */
  --c-line-govtech: #2A3A64;    /* 11,1:1 */

  /* États */
  --c-error: #A3161B;   /* 7,8:1 sur blanc, 6,6:1 sur lin */
  --c-success: #2E6B4A; /* 6,3:1 sur blanc */
  --c-todo-bg: #FFF4D6; /* emplacement [À fournir] — prototype uniquement */
  --c-todo-ink: #5C4300;

  /* ---------- Couleurs : rôles ---------- */
  --surface-page: var(--c-white);
  --surface-alt: var(--c-linen);
  --surface-accent: var(--c-champagne);
  --surface-dark: var(--c-petrol);
  --accent-ink: var(--c-petrol);       /* pictos, numéros, petits accents sur fond clair */
  --accent-light: var(--c-champagne);  /* points, filets, grands textes sur fond sombre */
  --text: var(--c-ink);
  --text-muted: var(--c-ink-muted);
  --text-on-dark: var(--c-white);
  --border: var(--c-line);
  --border-control: var(--c-line-strong);
  --action: var(--c-petrol);
  --action-hover: var(--c-petrol-dark);
  --action-text: var(--c-white);
  --focus-ring: var(--c-ink);
  --focus-ring-on-dark: var(--c-white);
  --marker-current: var(--c-red);
  --cta: var(--c-red-deep);   /* action principale : « Tester mon projet », « Envoyer ma demande » */
  --cta-hover: color-mix(in srgb, var(--c-red-deep) 82%, #000);
  --cta-text: var(--c-white);

  /* Texture des fonds sombres : motif de points en aplat (aucun dégradé) */
  --texture-points: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E");

  /* ---------- Typographie ---------- */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Échelle tierce majeure (1,25), base 16 px */
  --text-meta: 0.75rem;      /* 12 — légal, horodatage */
  --text-secondary: 0.875rem;/* 14 */
  --text-body: 1rem;         /* 16 */
  --text-lead: 1.125rem;     /* 18 */
  --text-h4: 1.25rem;        /* 20 */
  --text-h3: 1.5625rem;      /* 25 */
  --text-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.4375rem);   /* 28 → 39 */
  --text-h1: clamp(2.25rem, 1.6rem + 2.9vw, 3.8125rem);   /* 36 → 61 */
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);   /* 44 → 88, hero uniquement */
  --text-statement: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); /* signature « Plus vite. Juste. Plus loin. » */
  --text-quote: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);

  --leading-tight: 1.08;   /* H1 */
  --leading-heading: 1.2;
  --leading-body: 1.55;
  --leading-meta: 1.4;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;

  --measure: 68ch;         /* longueur de ligne max du texte courant */
  --measure-narrow: 52ch;

  /* ---------- Espacements (base 4 / 8) ---------- */
  --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;
  --gutter: 16px;           /* 24 px dès 768, 48 px dès 1200 */
  --container: 1280px;
  --section-gap: var(--space-8);  /* 96 px dès 1024 */

  /* ---------- Rayons ---------- */
  --radius-none: 0;
  --radius-control: 4px;   /* champs de saisie */
  --radius-pill: 999px;    /* boutons et choix cliquables */
  --radius-dot: 50%;

  /* ---------- Bordures ---------- */
  --border-hairline: 1px solid var(--border);
  --border-rule: 2px solid var(--c-petrol);       /* filet de tête « Registre » */
  --border-input: 1.5px solid var(--border-control);
  --focus-outline: 2px solid var(--focus-ring);
  --focus-offset: 3px;

  /* ---------- Élévations (rares : la marque est plate) ---------- */
  --elev-0: none;
  --elev-1: 0 1px 3px rgba(26, 23, 20, 0.06);    /* menu déroulant */
  --elev-2: 0 8px 24px rgba(26, 23, 20, 0.07);   /* panneau mobile */

  /* ---------- Motion ---------- */
  --dur-100: 100ms;
  --dur-150: 150ms;
  --dur-200: 200ms;
  --dur-300: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --stagger: 100ms;        /* moment orchestré : remplissage des sept points */

  /* ---------- Cibles ---------- */
  --target-min: 44px;
  --dot-size: 14px;
  --dot-size-lg: 22px;

  /* ---------- Plans ---------- */
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --section-gap: var(--space-9); }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}

/* Thèmes de couleur principale (sélecteur de prototype) — toutes les nuances en dérivent */
html[data-theme="petrole"]  { --c-petrol: #2B4A4F; }
html[data-theme="ardoise"]  { --c-petrol: #3A4450; }
html[data-theme="foret"]    { --c-petrol: #24493B; }
html[data-theme="bordeaux"] { --c-petrol: #7A1F2B; }
html[data-theme="prune"]    { --c-petrol: #4A2E52; }