/* Received Claude native R3 foundations, exact primitives; DOM adapter R20. Work Sans OFL fallback, not a commercial-font licence. */

/* Couleurs — CERFrance Veille CNEIDF, révision R1.
   « observé » = valeur relevée dans app.1371aa7e1a809b3820ff.css (site régional, classes .c-* / .bg-*).
   « dérivé R1 » = ajout de ce système, contraste vérifié (voir guidelines/contrastes.md). */
:root{
  /* Palette de base — observée */
  --cf-black:#000000;
  --cf-grey-900:#212121; /* very-dark-grey */
  --cf-grey-700:#4B4B4E; /* dark-grey — texte du site */
  --cf-grey-400:#A09F9F; /* grey */
  --cf-grey-300:#D7D6D4; /* medium-grey */
  --cf-grey-200:#ECECEC; /* light-grey */
  --cf-grey-100:#F6F6F6; /* very-light-grey — fond du site */
  --cf-white:#FFFFFF;
  --cf-yellow-500:#F8B334; /* yellow — jaune d'action */
  --cf-yellow-600:#F7A50E; /* dark-yellow */
  --cf-yellow-100:#FDEED5; /* light-yellow */
  --cf-red-500:#E8511E; /* red — accent */
  --cf-red-800:#9C2F16; /* dark-red */
  --cf-red-100:#FCD8C3; /* light-red */
  --cf-teal-500:#00A096; /* teal — accent */
  --cf-teal-800:#03554F; /* dark-teal */
  --cf-teal-100:#D6ECEB; /* light-teal */
  /* Palette de base — dérivée R1 */
  --cf-grey-600:#67676A; /* texte secondaire : 5,64 sur blanc, 5,22 sur #F6F6F6 */
  --cf-grey-500:#8A898C; /* bord de contrôle : 3,48 sur blanc, 3,22 sur #F6F6F6 */
  --cf-yellow-700:#E3960B; /* jaune pressé : texte #212121 à 6,62 */
  --cf-amber-900:#6B4A00; /* texte d'avertissement : 7,05 sur #FDEED5 */
  --cf-teal-900:#023F3A; /* lien survolé : 11,83 sur blanc */
  --cf-red-900:#7F2611; /* danger survolé : blanc à 9,60 */

  /* Surfaces */
  --surface-page:var(--cf-grey-100);
  --surface-card:var(--cf-white);
  --surface-sunken:var(--cf-grey-200);
  --surface-raised:var(--cf-white);
  --surface-inverse:var(--cf-grey-900);
  --surface-selected:var(--cf-yellow-100);
  --surface-hover:var(--cf-grey-100);
  --surface-overlay:rgba(33,33,33,.48);

  /* Texte */
  --text-strong:var(--cf-grey-900);
  --text-body:var(--cf-grey-700);
  --text-muted:var(--cf-grey-600);
  --text-disabled:var(--cf-grey-400);
  --text-inverse:var(--cf-white);
  --text-on-action:var(--cf-grey-900);
  --text-link:var(--cf-teal-800);
  --text-link-hover:var(--cf-teal-900);
  --text-danger:var(--cf-red-800);
  --text-success:var(--cf-teal-800);
  --text-warning:var(--cf-amber-900);

  /* Bords */
  --border-subtle:var(--cf-grey-200);
  --border-default:var(--cf-grey-300);
  --border-strong:var(--cf-grey-500);
  --border-emphasis:var(--cf-grey-700);
  --border-action:var(--cf-yellow-500);
  --border-danger:var(--cf-red-500);
  --border-success:var(--cf-teal-500);
  --border-provisional:var(--cf-grey-500);

  /* Actions — le jaune est réservé à l'action principale et à la sélection courante */
  --action-primary-bg:var(--cf-yellow-500);
  --action-primary-bg-hover:var(--cf-yellow-600);
  --action-primary-bg-active:var(--cf-yellow-700);
  --action-primary-fg:var(--cf-grey-900);
  --action-secondary-bg:var(--cf-white);
  --action-secondary-bg-hover:var(--cf-grey-100);
  --action-secondary-border:var(--cf-grey-700);
  --action-secondary-fg:var(--cf-grey-900);
  --action-ghost-bg-hover:var(--cf-grey-200);
  --action-danger-bg:var(--cf-red-800);
  --action-danger-bg-hover:var(--cf-red-900);
  --action-danger-fg:var(--cf-white);
  --action-disabled-bg:var(--cf-grey-200);
  --action-disabled-fg:var(--cf-grey-400);

  /* Statuts — fond / texte / repère graphique. Jamais la couleur seule : toujours un libellé. */
  --status-neutral-bg:var(--cf-grey-200);--status-neutral-fg:var(--cf-grey-700);--status-neutral-mark:var(--cf-grey-500);
  --status-action-bg:var(--cf-yellow-100);--status-action-fg:var(--cf-grey-900);--status-action-mark:var(--cf-yellow-600);
  --status-success-bg:var(--cf-teal-100);--status-success-fg:var(--cf-teal-800);--status-success-mark:var(--cf-teal-500);
  --status-danger-bg:var(--cf-red-100);--status-danger-fg:var(--cf-red-800);--status-danger-mark:var(--cf-red-500);
  --status-warning-bg:var(--cf-yellow-100);--status-warning-fg:var(--cf-amber-900);--status-warning-mark:var(--cf-yellow-600);
  --status-provisional-bg:var(--cf-white);--status-provisional-fg:var(--cf-grey-700);--status-provisional-mark:var(--cf-grey-500);

  /* Accents — usages précis */
  --accent-urgent:var(--cf-red-500);   /* urgence, contestation, erreur : repère graphique uniquement */
  --accent-verified:var(--cf-teal-500); /* vérifié, source confirmée, progression : sur fond blanc uniquement */

  /* Données */
  --chart-1:var(--cf-grey-700);
  --chart-2:var(--cf-teal-800);
  --chart-3:var(--cf-grey-400);
  --chart-highlight:var(--cf-yellow-500);
  --chart-track:var(--cf-grey-200);

  /* Focus */
  --focus-ring-color:var(--cf-grey-900);
  --focus-ring-color-inverse:var(--cf-yellow-500);
}

/* Typographie.
   Références déclarées par la CSS du site régional : « graphik » (titres, graisse 200) et « canela ».
   Ces polices commerciales ne sont ni fournies ni redistribuables sans droit : elles ne sont PAS chargées.
   Work Sans (OFL) est le repli provisoire explicite, pas la police officielle. Point d'extension :
   le produit qui détient une licence définit --font-licensed-sans (ex. "Graphik", "Work Sans") ; rien à changer ailleurs.
   Observé : tailles .fs-* 12/16/18/28/36/50, titres .title-* 16/18/24/30/50/80 (graisse 200, interligne 1,2),
   interlignes .lh-* 1/1,2/1,5/1,6/1,8/2, approches .ls-* 1–6px. Ajout R1 : 14px pour l'interface dense. */
:root{
  --font-provisional-sans:"Work Sans"; /* @kind font */
  --font-sans:var(--font-licensed-sans,var(--font-provisional-sans)),system-ui,-apple-system,"Segoe UI",sans-serif; /* @kind font */
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-12:12px; /* @kind font */--fs-14:14px; /* @kind font */--fs-16:16px; /* @kind font */--fs-18:18px; /* @kind font */--fs-24:24px; /* @kind font */--fs-28:28px; /* @kind font */--fs-30:30px; /* @kind font */--fs-36:36px; /* @kind font */--fs-50:50px; /* @kind font */--fs-80:80px; /* @kind font */
  --lh-1:1; /* @kind font */--lh-1-2:1.2; /* @kind font */--lh-1-35:1.35; /* @kind font */--lh-1-5:1.5; /* @kind font */--lh-1-6:1.6; /* @kind font */
  --fw-light:300; /* @kind font */--fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */--fw-bold:700; /* @kind font */
  --ls-0:0; /* @kind font */--ls-1:1px; /* @kind font */--ls-2:2px; /* @kind font */

  --fs-display:var(--fs-50); /* @kind font */
  --fs-h1:var(--fs-30); /* @kind font */
  --fs-h2:var(--fs-24); /* @kind font */
  --fs-h3:var(--fs-18); /* @kind font */
  --type-display:var(--fw-light) var(--fs-display)/var(--lh-1-2) var(--font-sans); /* @kind font */
  --type-h1:var(--fw-light) var(--fs-h1)/var(--lh-1-2) var(--font-sans); /* @kind font */
  --type-h2:var(--fw-medium) var(--fs-h2)/var(--lh-1-2) var(--font-sans); /* @kind font */
  --type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-1-35) var(--font-sans); /* @kind font */
  --type-lead:var(--fw-regular) var(--fs-18)/var(--lh-1-6) var(--font-sans); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-16)/var(--lh-1-5) var(--font-sans); /* @kind font */
  --type-body-strong:var(--fw-semibold) var(--fs-16)/var(--lh-1-5) var(--font-sans); /* @kind font */
  --type-ui:var(--fw-regular) var(--fs-14)/var(--lh-1-5) var(--font-sans); /* @kind font */
  --type-ui-strong:var(--fw-semibold) var(--fs-14)/var(--lh-1-35) var(--font-sans); /* @kind font */
  --type-caption:var(--fw-regular) var(--fs-12)/var(--lh-1-5) var(--font-sans); /* @kind font */
  --type-overline:var(--fw-semibold) var(--fs-12)/var(--lh-1-2) var(--font-sans); /* @kind font */
  --type-kpi:var(--fw-light) var(--fs-36)/var(--lh-1) var(--font-sans); /* @kind font */
  --type-mono:var(--fw-regular) var(--fs-12)/var(--lh-1-5) var(--font-mono); /* @kind font */
}
/* Paliers observés pour .title-xl : 50 → 42 (< 992px) → 32 (< 576px) */
@media (max-width:991.98px){:root{--fs-display:42px;--fs-h1:28px}}
@media (max-width:575.98px){:root{--fs-display:32px;--fs-h1:24px;--fs-h2:20px}}

/* Espacement & mise en page.
   Observé : marge xs 5px ; grille Bootstrap 4.2.1 à 24 colonnes, gouttière 2 × 15px ;
   paliers 576 / 768 / 992 / 1280px ; marges de section = fractions de --section-margin (1/4, 1/2, 3/4, 1, 1,5).
   Décision R1 (valeur non observée) : --section-margin 80 / 60 / 40px ; échelle en pas de 5px. */
:root{
  --space-0:0;
  --space-1:5px;
  --space-2:10px;
  --space-3:15px;
  --space-4:20px;
  --space-5:30px;
  --space-6:40px;
  --space-7:60px;
  --space-8:80px;

  --section-margin:80px;
  --section-sm:calc(var(--section-margin) / 4);
  --section-md:calc(var(--section-margin) / 2);
  --section-lg:calc(var(--section-margin) * .75);
  --section-xl:var(--section-margin);

  --gutter:30px; /* @kind spacing */
  --grid-columns:24; /* @kind other */
  --bp-sm:576px; /* @kind spacing */--bp-md:768px; /* @kind spacing */--bp-lg:992px; /* @kind spacing */--bp-xl:1280px; /* @kind spacing */

  --header-height:64px; /* @kind spacing */
  --sidenav-width:248px; /* @kind spacing */
  --content-max:1440px; /* @kind spacing */
  --reading-max:72ch; /* @kind spacing */
  --control-height:44px; /* @kind spacing */
  --control-height-sm:36px; /* @kind spacing */
  --hit-min:44px; /* @kind spacing */

  --z-header:100; /* @kind other */--z-dropdown:200; /* @kind other */--z-overlay:300; /* @kind other */--z-dialog:310; /* @kind other */--z-toast:400; /* @kind other */
}
@media (max-width:1279.98px){:root{--section-margin:60px}}
@media (max-width:767.98px){:root{--section-margin:40px;--gutter:20px; /* @kind spacing */--header-height:56px}}

/* Rayons, bords, ombres — décisions R1 (aucune valeur relevée sur le site faute d'accès aux règles de composants). */
:root{
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;

  --border-width:1px; /* @kind spacing */
  --border-width-strong:2px; /* @kind spacing */
  --border-provisional-style:dashed; /* @kind other */

  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(33,33,33,.06);
  --shadow-2:0 4px 12px rgba(33,33,33,.08),0 1px 2px rgba(33,33,33,.06);
  --shadow-3:0 16px 40px rgba(33,33,33,.16),0 2px 6px rgba(33,33,33,.08);

  --focus-ring-width:2px; /* @kind spacing */
  --focus-ring-offset:2px; /* @kind spacing */
}

/* Mouvement — sobre : fondus et glissements courts, aucun rebond.
   Mouvement réduit : préférence système OU attribut data-motion="reduced" sur un ancêtre (recette). */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --ease-enter:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
  --motion-distance:8px; /* @kind spacing */
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms; /* @kind other */--duration-base:0ms; /* @kind other */--duration-slow:0ms; /* @kind other */--motion-distance:0px}}
[data-motion="reduced"]{--duration-fast:0ms; /* @kind other */--duration-base:0ms; /* @kind other */--duration-slow:0ms; /* @kind other */--motion-distance:0px}

@font-face{font-family:"Work Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/work-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:italic;font-weight:100 900;font-display:swap;src:url("/assets/fonts/work-sans-latin-wght-italic.woff2") format("woff2")}