/* Jetons BRNSG, tirés du kit logo (logo-brnsg/kit/guide-logo-brnsg.md). Tout style en dérive. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-125.woff2?v=1bcc7da1") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2?v=d1a24527") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Polices de repli calibrées : tant qu'Archivo et Inter ne sont pas arrivées (réseau lent), Arial est dessinée
   à leur chasse et à leurs hauteurs, pour que les lignes ne se recomposent pas à l'arrivée de la vraie police.
   Mesuré dans Chromium sur un texte du site : Archivo 125 (650) = Arial Bold × 1,237 ; Inter 400 = Arial × 1,071 ;
   Inter 600 = Arial Bold × 1,014. Aucune police téléchargée : local() lit celle du système, sinon on passe à system-ui. */
@font-face {
  font-family: "Archivo repli";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 700;
  size-adjust: 123.7%;
  ascent-override: 71.1%;
  descent-override: 17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter repli";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 107.1%;
  ascent-override: 90.6%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter repli";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 101.4%;
  ascent-override: 95.7%;
  descent-override: 23.7%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  /* Palette du guide du logo (sources/guide-logo-brnsg.md) : Onyx, Glacier, Bleu dragée. Le Bleu dragée est l'accent
     unique (bouton principal, moitié basse du B, focus) et ne se pose jamais sur un fond clair. */
  --onyx: #020202;
  --glacier: #F3F9FB;
  --bleu: #B2D5E5;
  --bg: var(--onyx);
  --text: var(--glacier);
  /* Dosages repris du site de test validé le 24/10/2026 (~/Brnsg.fr test nouveau site /site/css/tokens.css) */
  --text-muted: color-mix(in oklab, var(--glacier) 62%, var(--onyx));
  --rule: color-mix(in srgb, var(--glacier) 14%, transparent);
  /* Bandes en relief : un cran au-dessus de l'Onyx */
  --sombre: color-mix(in oklab, var(--onyx) 92%, var(--glacier));
  --sur-sombre: var(--glacier);
  /* Bordure d'un champ ou d'un bouton : contraste de 3:1 au moins sur le fond (WCAG 1.4.11) */
  --bordure: color-mix(in oklab, var(--glacier) 60%, var(--onyx));
  --surface: var(--sombre);
  /* Cadre des captures de démos : assez marqué pour qu'une capture sombre se détache de l'Onyx */
  --cadre: color-mix(in srgb, var(--glacier) 35%, transparent);
  --ring: var(--bleu);

  /* Typographie : polices du site, corps de 17 px. Approche et interlignage par palier (passe design du 07/11/2026) : plus le
     texte est grand, plus il se resserre ; le petit texte s'aère un peu. */
  --font-display: "Archivo", "Archivo repli", system-ui, sans-serif;
  --font-text: "Inter", "Inter repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-xl: -0.025em; /* --step-3 et --step-4 : h1, appel final */
  --tracking-l: -0.02em;   /* --step-2 : h2, prix, preuves */
  --tracking-m: -0.01em;   /* --step-1 : h3, onglets, noms de services */
  --tracking-s: 0.01em;    /* --step--1 : notes, légendes, fil d'Ariane */
  --leading-xl: 1.02;
  --leading-l: 1.08;
  --leading-m: 1.15;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.25rem, 1.11rem + 0.7vw, 1.62rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --step-3: clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem);
  --step-4: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  --leading: 1.6;
  /* Colonne de lecture : 58 ch d'Inter font 78 caractères au plus par ligne (mesuré ; 68 ch en donnaient 91) */
  --lecture: 58ch;

  /* Rythme */
  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max: 1320px;
  --section: clamp(64px, 9vw, 128px);

  /* Mouvement : une seule table, courbes et durées du skill animate (passe design du 07/11/2026). Rien d'autre ailleurs. */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* sortie forte : ce qui entre, sort ou fond ; retour d'appui */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* déplacement à l'écran : indicateur d'onglet, repère du sommaire */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* barre mobile qui glisse depuis le bord de l'écran */
  --ease-couleur: ease;                            /* survol et changement de couleur */
  --dur-1: 150ms;  /* retour d'appui, couleur, fondu du menu et du panneau d'onglet, signe de la FAQ */
  --dur-2: 200ms;  /* dépliage de la FAQ, fondus courts */
  --dur-3: 250ms;  /* indicateur d'onglet et repère du sommaire qui glissent */
}

/* Contraste renforcé demandé par le système (prefers-contrast: more) : texte secondaire en Glacier plein, filets et bordures
   plus marqués. Mêmes couleurs de marque, seulement des dosages plus forts. */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--glacier);
    --rule: color-mix(in srgb, var(--glacier) 45%, transparent);
    --bordure: var(--glacier);
  }
}