@charset "UTF-8";
/**
 * DSFR Design Tokens
 * Based on Système de Design de l'État Français
 */
/**
 * Base DSFR theme for reveal.js presentations, after the Système de Design de
 * l'État. Brand-neutral: light surfaces, bleu France accents, Marianne type.
 * A brand extends it with `@use 'pkg:@vignettes/theme-dsfr';` and adds its
 * own rules and background images.
 */
@font-face {
  font-family: "Marianne";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/themes/dsfr/fonts/Marianne-Light.woff2") format("woff2"), url("/themes/dsfr/fonts/Marianne-Light.woff") format("woff");
}
@font-face {
  font-family: "Marianne";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/themes/dsfr/fonts/Marianne-Regular.woff2") format("woff2"), url("/themes/dsfr/fonts/Marianne-Regular.woff") format("woff");
}
@font-face {
  font-family: "Marianne";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/themes/dsfr/fonts/Marianne-Medium.woff2") format("woff2"), url("/themes/dsfr/fonts/Marianne-Medium.woff") format("woff");
}
@font-face {
  font-family: "Marianne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/themes/dsfr/fonts/Marianne-Bold.woff2") format("woff2"), url("/themes/dsfr/fonts/Marianne-Bold.woff") format("woff");
}
/**
 * Shared foundation barrel.
 *
 * The "engine" CSS layer: rules that depend on the Vignettes Vue components
 * (SlideContent, RevealSlides, MDC bridge) and on Reveal.js conventions.
 * Themes (skins) build on top of this layer, never replace it.
 *
 * Usage from a theme entry:
 *   @use 'pkg:@vignettes/theme-kit';
 */
/**
 * Neutral semantic tokens (the theme contract).
 *
 * This file defines the palette of CSS custom properties that every theme
 * MUST provide and that all theme-agnostic code (MDC components, the foundation
 * layer) references. A new theme is created by overriding these tokens.
 *
 * The defaults below are neutral greys with a plain blue accent: a theme that
 * forgets a token degrades to a readable look that belongs to no brand.
 *
 * Naming conventions:
 *   --accent / --accent-soft / --accent-bg
 *       the brand/primary color and its lighter companions used for tints,
 *       borders, link highlighting, etc.
 *   --accent-strong
 *       the accent mixed with the title color, for text set on --accent-soft
 *       or --accent-bg; derived from --accent unless the theme sets it.
 *   --accent-line
 *       the accent mixed with the surface, for the outlines of a diagram: the
 *       cards, the subject regions and the edge labels; derived from --accent unless the theme sets it.
 *   --accent-on-contrast
 *       the accent mixed with white, for a mark set on --surface-contrast or
 *       on a dark code block; derived from --accent unless the theme sets it.
 *   --surface / --surface-contrast / --on-contrast
 *       background colors and the matching text color on dark backgrounds.
 *   --text-default / --text-title / --text-mention
 *       the three text intensities used by the typography system.
 *   --border / --radius / --shadow
 *       the outline, the corners and the elevation of a box drawn by a
 *       component (card, quote, frame, code block).
 *   --code-min-size
 *       the smallest size of a code block, in slide units; `0px` by default.
 *   --code-surface / --code-surface-dark
 *       the backgrounds of the light code theme `clair` and of the dark code
 *       theme `nuit`, by default the backgrounds of GitHub's light and dark code.
 *   --on-surface-title / --on-surface-default / --on-surface-mention
 *       the text intensities as the page root sets them, for the text of a
 *       surface a component paints. Derived here: a theme does not set them.
 *   --text-step-1 … --text-step-4
 *       the type scale above the body text, in `em` of the text around: a
 *       heading inside the body and the sizes of a highlighted message. They
 *       follow a column that shrinks its text.
 *   --flow-space / --block-space / --heading-space-before
 *       the vertical rhythm of the body of a content slide, in `em` of the element that
 *       carries the margin: the space inside a group of text (between a heading
 *       and its paragraph, two paragraphs, a paragraph and its list, two list
 *       items), above and below a block other than text, and above a heading of
 *       the body.
 *   --measure
 *       the maximum line length of a paragraph or a list of the body of a
 *       content slide.
 */
:root {
  --accent: #1c4fd8;
  --accent-soft: #dbe4fb;
  --accent-bg: #f4f6fd;
  --accent-strong: color-mix(in srgb, var(--accent) 70%, var(--text-title));
  --accent-line: color-mix(in srgb, var(--accent) 35%, var(--surface));
  --accent-on-contrast: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --surface: #ffffff;
  --surface-contrast: #1a1a1a;
  --on-contrast: #ffffff;
  --text-default: #1a1a1a;
  --text-title: #111111;
  --text-mention: #6b6b6b;
  --border: #e0e0e0;
  --radius: 6px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --code-min-size: 0px;
  --code-surface: #f6f8fa;
  --code-surface-dark: #24292e;
  --text-step-1: 1.2em;
  --text-step-2: 1.44em;
  --text-step-3: 1.728em;
  --text-step-4: 2.074em;
  --flow-space: 0.6em;
  --block-space: 2em;
  --heading-space-before: 1.6em;
  --measure: 60ch;
  --on-surface-title: var(--text-title);
  --on-surface-default: var(--text-default);
  --on-surface-mention: var(--text-mention);
}

/**
 * The tints a card or a region of a diagram takes with `color="<name>"`.
 *
 * Each name sets three properties: `-bg` the surface of a region, `-main` its
 * outline, `-text` the title and the icon of a card or a region, readable on
 * `-bg`. A theme redefines them, and may add names of its own with the same
 * three properties.
 */
:root {
  --palette-blue-bg: #eff6ff;
  --palette-blue-main: #3b82f6;
  --palette-blue-text: #1e40af;
  --palette-green-bg: #f0fdf4;
  --palette-green-main: #22c55e;
  --palette-green-text: #166534;
  --palette-yellow-bg: #fefce8;
  --palette-yellow-main: #eab308;
  --palette-yellow-text: #854d0e;
  --palette-orange-bg: #fff7ed;
  --palette-orange-main: #f97316;
  --palette-orange-text: #9a3412;
  --palette-brown-bg: #faf6f1;
  --palette-brown-main: #a47148;
  --palette-brown-text: #6b4426;
  --palette-pink-bg: #fdf2f8;
  --palette-pink-main: #ec4899;
  --palette-pink-text: #9d174d;
  --palette-purple-bg: #faf5ff;
  --palette-purple-main: #a855f7;
  --palette-purple-text: #6b21a8;
  --palette-grey-bg: #f9fafb;
  --palette-grey-main: #9ca3af;
  --palette-grey-text: #374151;
}

/**
 * Reveal patches & MDC structural bridge.
 *
 * MDCRenderer wraps rendered Markdown in extra <div>s, which would otherwise
 * break the semantic flow of header/hgroup/article and full-layout slides.
 * `display: contents` makes those wrapper divs transparent in the box tree.
 *
 * These rules belong to the engine layer (Vignettes component contract),
 * not to any individual theme. They were previously inside SlideContent.vue
 * <style scoped> but had to be promoted here because:
 *   - the ":deep(...)" tunnel only works while we keep the Vue component,
 *   - duplicating the same rules across every theme would be brittle.
 */
.reveal .slides section .layout-full > div,
.reveal .slides .slide-content-pane > header > div,
.reveal .slides .slide-content-pane > article > div,
.reveal .slides .slide-content-pane > hgroup .slide-pretitle > div,
.reveal .slides .slide-content-pane > hgroup .slide-heading > div,
.reveal .slides .slide-content-pane > hgroup .slide-subtitle > div {
  display: contents;
}
.reveal .slides .slide-content-pane {
  display: contents;
}

html.reveal-print * {
  print-color-adjust: exact;
}

.reveal.reveal-viewport {
  color: var(--text-default);
}

:root .reveal .slide-number {
  font-family: inherit;
  background-color: transparent;
  color: var(--text-mention);
}

.reveal :not(pre) > code {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
}

.reveal .code-group {
  white-space: nowrap;
}
.reveal .code-group > code {
  white-space: normal;
}

/**
 * Slide spacing — comfortable text inset on every slide.
 *
 * Reveal only reserves a thin outer `margin`; without inner padding the text
 * sits almost on the slide edge. This layer adds a horizontal/vertical inset
 * to every *leaf* slide so text always breathes — while media panes are
 * allowed to bleed back out to the slide edge (see `_media-layouts.scss`).
 *
 * Tunable per deck by overriding `--slide-padding-x` / `--slide-padding-y`
 * on `.reveal`.
 */
.reveal {
  --slide-padding-x: 4rem;
  --slide-padding-y: 1.75rem;
}

/* Leaf slides only: the `.stack` wrapper of a vertical group is not a slide. */
.reveal .slides > section:not(.stack),
.reveal .slides > section.stack > section {
  box-sizing: border-box;
  padding: var(--slide-padding-y) var(--slide-padding-x);
}

/* Reveal's print view moves each slide into a `.pdf-page` and sets its padding
   to 0 with `!important`: the printed slide keeps the same inset. */
html.reveal-print .reveal .slides .pdf-page > section {
  padding: var(--slide-padding-y) var(--slide-padding-x) !important;
}

/**
 * Media layouts: the grid of `:layout{media=…}` (see `readLayout` in
 * `@vignettes/core/deck`).
 *
 * A slide with a media carries `layout-media`, `layout-media-<placement>`
 * (`right`, `left`, `top`, `bottom`, `behind`) and, when the media has a share
 * of the slide, `media-size-<p>-<q>`. These selectors form a contract between
 * the slide engine and any theme: themes only paint, the layout grid is
 * invariant.
 */
.reveal .slides section:where(.layout-media) {
  --media-text-share: 1fr;
  --media-share: 1fr;
  --media-text-scale: 1;
}
.reveal .slides section.layout-media:not(.layout-media-behind) {
  display: grid !important;
  gap: 2.5rem;
  align-items: stretch;
}
.reveal .slides section.media-size-1-3 {
  --media-text-share: 2fr;
  --media-share: 1fr;
}
.reveal .slides section.media-size-1-2 {
  --media-text-share: 1fr;
  --media-share: 1fr;
}
.reveal .slides section.media-size-2-3 {
  --media-text-share: 1fr;
  --media-share: 2fr;
  --media-text-scale: 0.8;
}
.reveal .slides section.media-size-3-4 {
  --media-text-share: 1fr;
  --media-share: 3fr;
  --media-text-scale: 0.68;
}
.reveal .slides section.layout-media-right {
  grid-template-columns: minmax(0, var(--media-text-share)) minmax(0, var(--media-share));
  grid-template-rows: minmax(0, 1fr);
}
.reveal .slides section.layout-media-left {
  grid-template-columns: minmax(0, var(--media-share)) minmax(0, var(--media-text-share));
  grid-template-rows: minmax(0, 1fr);
}
.reveal .slides section.layout-media-top,
.reveal .slides section.layout-media-bottom {
  --media-text-scale: 1;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.reveal .slides section.layout-media-top {
  grid-template-rows: minmax(0, 1fr) auto;
}
.reveal .slides section.layout-media-bottom {
  grid-template-rows: auto minmax(0, 1fr);
}
.reveal .slides section.layout-media-top[class*=media-size-] {
  grid-template-rows: minmax(0, var(--media-share)) minmax(0, var(--media-text-share));
}
.reveal .slides section.layout-media-bottom[class*=media-size-] {
  grid-template-rows: minmax(0, var(--media-text-share)) minmax(0, var(--media-share));
}
.reveal .slides section:is(.layout-media-left, .layout-media-top) > .slide-media-pane {
  order: 1;
}
.reveal .slides section:is(.layout-media-left, .layout-media-top) > .slide-content-pane {
  order: 2;
}
.reveal .slides section.layout-media-right > .slide-media-pane {
  margin-right: calc(-1 * var(--slide-padding-x, 4rem));
}
.reveal .slides section.layout-media-left > .slide-media-pane {
  margin-left: calc(-1 * var(--slide-padding-x, 4rem));
}
.reveal .slides section:is(.layout-media-top, .layout-media-bottom) > .slide-media-pane {
  margin-left: calc(-1 * var(--slide-padding-x, 4rem));
  margin-right: calc(-1 * var(--slide-padding-x, 4rem));
}
.reveal .slides section.layout-media > .slide-content-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: var(--slide-align);
  text-align: left;
  min-width: 0;
  min-height: 0;
  font-size: calc(var(--media-text-scale, 1) * 1em);
}
.reveal .slides section.layout-media > .slide-content-pane > :is(header, hgroup) {
  height: auto;
  flex-shrink: 0;
}
.reveal .slides section.layout-media:not(.media-veil) > .slide-content-pane > article {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reveal .slides section.layout-media.media-size-2-3:is(.layout-media-right, .layout-media-left) > .slide-content-pane > :is(header, hgroup) :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.6em;
}
.reveal .slides section.layout-media.media-size-3-4:is(.layout-media-right, .layout-media-left) > .slide-content-pane {
  padding-top: 0.5rem;
}
.reveal .slides section.layout-media.media-size-3-4:is(.layout-media-right, .layout-media-left) > .slide-content-pane > :is(header, hgroup) :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.9em;
  line-height: 1.08;
  margin-bottom: 0.7em;
}
.reveal .slides section.layout-media.media-size-3-4:is(.layout-media-right, .layout-media-left) > .slide-content-pane > article > p:first-child {
  font-size: 1.08em;
  line-height: 1.45;
  margin-top: 0;
}
.reveal .slides section.layout-media > .slide-media-pane {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.reveal .slides section.layout-media > .slide-media-pane:not(.fit-contain) {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.reveal .slides section.layout-media > .slide-media-pane.fit-contain {
  overflow: visible;
  background: transparent;
}
.reveal .slides section.layout-media > .slide-media-pane iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}
.reveal .slides section.layout-media > .slide-media-pane.is-interactive iframe {
  pointer-events: auto;
}
.reveal .slides section.layout-media > .slide-media-pane.is-scaled {
  --preview-width: 1440px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.reveal .slides section.layout-media > .slide-media-pane.is-scaled iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}
.reveal .slides section.layout-media > .slide-media-pane img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  background: transparent;
}
.reveal .slides section.layout-media > .slide-media-pane img.fit-cover {
  object-fit: cover;
}
.reveal .slides section.layout-media > .slide-media-pane img.fit-contain {
  display: block;
  width: auto;
  object-fit: contain;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.reveal .slides section.layout-media > .slide-media-pane.position-top img {
  object-position: top;
}
.reveal .slides section.layout-media > .slide-media-pane.position-bottom img {
  object-position: bottom;
}
.reveal .slides section.layout-media > .slide-media-pane.position-left img {
  object-position: left;
}
.reveal .slides section.layout-media > .slide-media-pane.position-right img {
  object-position: right;
}
.reveal .slides .slide-content-pane .slide-media-hint {
  position: absolute;
  bottom: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--link-color, #06c) !important;
  pointer-events: none;
}
.reveal .slides section.layout-media-right > .slide-content-pane .slide-media-hint {
  text-align: right;
  right: 0;
}
.reveal .slides section.layout-media-right > .slide-content-pane .slide-media-hint::after {
  content: " →";
  opacity: 0.7;
}
.reveal .slides section.layout-media-left > .slide-content-pane .slide-media-hint {
  text-align: left;
  left: 0;
}
.reveal .slides section.layout-media-left > .slide-content-pane .slide-media-hint::before {
  content: "← ";
  opacity: 0.7;
}
.reveal .slides section:is(.layout-media-top, .layout-media-bottom) > .slide-content-pane .slide-media-hint {
  position: static;
  text-align: center;
}
.reveal .slides section.layout-media-top > .slide-content-pane .slide-media-hint::after {
  content: " ↑";
  opacity: 0.7;
}
.reveal .slides section.layout-media-bottom > .slide-content-pane .slide-media-hint::after {
  content: " ↓";
  opacity: 0.7;
}
.reveal .slides section.layout-media > .slide-media-pane.has-lightbox {
  cursor: pointer;
}
.reveal .slides section.layout-media > .slide-media-pane.has-lightbox iframe {
  pointer-events: none;
}
.reveal .slides section.layout-media-behind.media-card {
  display: flex !important;
  flex-direction: column;
  justify-content: var(--slide-align);
  align-items: flex-start;
}
.reveal .slides section.layout-media-behind.media-card > .slide-content-pane {
  max-width: min(50%, 38rem);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 18, 0.18);
  font-size: 0.85em;
}
.reveal .slides section.layout-media-behind.media-veil > .slide-content-pane {
  display: contents;
}
.reveal .slides section.layout-media-behind.media-veil {
  --text-title: var(--on-contrast, #fff);
  --text-default: var(--on-contrast, #fff);
  --text-mention: var(--on-contrast, #fff);
  color: var(--on-contrast, #fff);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.reveal .slides section.layout-media-behind.media-veil :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, em, figcaption) {
  color: var(--on-contrast, #fff);
}

html.reveal-print .reveal .slides section.layout-media:not(.layout-media-behind) {
  display: grid !important;
}

html.reveal-print .reveal .slides section.layout-media-behind {
  display: flex !important;
}

.reveal-scroll .scroll-page section.layout-media:not(.layout-media-behind) {
  --media-text-scale: 1;
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
}
.reveal-scroll .scroll-page section.layout-media:not(.layout-media-behind) > .slide-content-pane {
  order: 1;
  flex: none;
}
.reveal-scroll .scroll-page section.layout-media:not(.layout-media-behind) > .slide-media-pane {
  order: 2;
  flex: 1 1 auto;
  margin-left: 0;
  margin-right: 0;
}

.reveal-scroll .scroll-page section.layout-media-top:not(.layout-media-behind) > .slide-media-pane {
  order: 1;
}
.reveal-scroll .scroll-page section.layout-media-top:not(.layout-media-behind) > .slide-content-pane {
  order: 2;
}

.reveal-scroll .scroll-page section.layout-media-behind.media-card > .slide-content-pane {
  max-width: 100%;
}

/**
 * Slide section structural skeleton.
 *
 * The engine tags each slide with the class of its role (`surfaceLevel` of
 * `@vignettes/core/deck`): `slide-h1` for the title slide, `slide-h2` for a
 * section, a `##` slide made of its heading and at most one short paragraph,
 * and `slide-h3` for a content slide, whose heading may be a `##`. The flex
 * skeleton here is identical in every theme.
 *
 * What stays in this layer: positioning primitives (display: flex, ordering,
 * `width: 100%`, the vertical alignment of the content), and the rhythm and
 * the measure of the body of a content slide, from the tokens of
 * `_semantic-tokens.scss`.
 * What belongs in a theme or a preset: sizes, as the tokens below, colors and
 * typography.
 *
 * Size tokens, set on `.reveal`:
 * - `--slide-heading-min-height`: the height a content slide keeps for its heading;
 * - `--slide-body-padding-y`: the space above and below the body of a content slide.
 *
 * The rhythm tokens of `_semantic-tokens.scss` (`--flow-space`, `--block-space`,
 * `--heading-space-before`) set the vertical margins of
 * the blocks of the body of a content slide, and `--measure` the maximum line
 * length of its paragraphs and lists.
 */
.reveal .slides section {
  --slide-align: safe center;
}

.reveal .slides section:where(.layout-media-top, .layout-media-bottom, .media-size-3-4:is(.layout-media-right, .layout-media-left)) {
  --slide-align: flex-start;
}

.reveal .slides section:where(.layout-media-behind.media-card) {
  --slide-align: safe flex-end;
}

.reveal .slides section.align-top {
  --slide-align: flex-start;
}

.reveal .slides section.align-center {
  --slide-align: safe center;
}

.reveal .slides section.align-bottom {
  --slide-align: safe flex-end;
}

.reveal section.slide-h1,
.reveal section.slide-h2 {
  display: flex !important;
  flex-direction: column;
  justify-content: var(--slide-align);
  align-items: start;
}

.reveal section.slide-h3 {
  display: flex !important;
  flex-direction: column;
}
.reveal section.slide-h3 header,
.reveal section.slide-h3 hgroup {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: var(--slide-heading-min-height, 0);
}
.reveal section.slide-h3 header h3,
.reveal section.slide-h3 hgroup h3 {
  margin: 0;
}
.reveal section.slide-h3 article {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--slide-align);
  padding-block: var(--slide-body-padding-y, 0);
}

.reveal section article {
  width: 100%;
}

.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > * {
  margin-block: var(--flow-space) 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :where(:not(p:not(:has(> img)), ul, ol, h4, h5, h6, blockquote:not(.quote), .fragments, .notes)),
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :where(:not(p:not(:has(> img)), ul, ol, h4, h5, h6, blockquote:not(.quote), .fragments, .notes)) + * {
  margin-top: var(--block-space);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(h4, h5, h6) {
  margin-block: var(--heading-space-before) 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(h4, h5, h6) + * {
  margin-top: var(--flow-space);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(p:not(:has(> img)), ul, ol) {
  max-inline-size: var(--measure);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol),
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) :is(ul, ol) {
  row-gap: 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) > li,
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) :is(ul, ol) > li {
  margin-block: 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) > li + li,
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) :is(ul, ol) > li + li {
  margin-top: var(--flow-space);
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :is(ul, ol) li > :is(ul, ol) {
  margin-block: var(--flow-space) 0;
}
.reveal .slides section.slide-h3 :is(article > div, .column, .fragments) > :first-child {
  margin-top: 0;
}

/**
 * `:layout{heading="compact"}`.
 *
 * For comparison slides whose body is a tall gallery (e.g. a 2×2 `Screens` grid
 * of full-height page screenshots): the default slide title eats ~⅓ of the
 * height. Here we shrink the heading row to a single compact line and hand the
 * remaining vertical space to the article, so each screenshot can show its whole
 * hero without being clipped.
 */
.reveal section.heading-compact {
  --slide-heading-min-height: 0;
  --slide-body-padding-y: 0;
  justify-content: start;
}
.reveal section.heading-compact header,
.reveal section.heading-compact hgroup {
  flex: 0 0 auto;
  margin-bottom: 0.9em;
}
.reveal section.heading-compact header h3,
.reveal section.heading-compact hgroup h3 {
  font-size: 1.4em;
  line-height: 1.1;
  margin: 0;
}
.reveal section.heading-compact article {
  flex: 1 1 auto;
  min-height: 0;
}

.reveal .slides section.layout-full > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
}

.reveal section.heading-hidden.layout-full > div > :is(h1, h2, h3, h4, h5, h6),
.reveal section.heading-hidden .slide-content-pane > :is(header, hgroup),
html:not(.reveal-print) .reveal section.heading-print.layout-full > div > :is(h1, h2, h3, h4, h5, h6),
html:not(.reveal-print) .reveal section.heading-print .slide-content-pane > :is(header, hgroup),
.reveal .slide-media-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html.reveal-print .reveal .slides section.slide-h1,
html.reveal-print .reveal .slides section.slide-h2,
html.reveal-print .reveal .slides section.slide-h3:not(.layout-media) {
  display: flex !important;
}

/**
 * Quicklink: small navigation hint pinned to the bottom of a slide.
 * Prefix (e.g. "Pressé·e ?") is muted text; the link is styled distinctly.
 *
 * Promoted from `RevealSlides.vue` global <style> block.
 * Colors are intentionally read from Reveal CSS variables (with literal
 * fallbacks) so the rule is theme-neutral; individual themes can override
 * `--r-main-color` and `--r-link-color` if they want a custom palette.
 */
.reveal .slides section > .slide-quicklink-wrapper {
  position: absolute;
  bottom: 0.5em;
  left: 0;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.reveal .slides section > .slide-quicklink-wrapper:hover {
  opacity: 1;
}
.reveal .slides section > .slide-quicklink-wrapper .slide-quicklink-prefix {
  color: var(--r-main-color, #3a3a3a);
  margin-right: 0.4em;
}
.reveal .slides section > .slide-quicklink-wrapper .slide-quicklink {
  color: var(--r-link-color, var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/**
 * Layout preset: the positioning and the scale of a slide, without any color
 * or font. A skin composes it with its own:
 *
 *   @use 'pkg:@vignettes/theme-kit';
 *   @use 'pkg:@vignettes/theme-kit/presets/layout';
 */
/**
 * Layout preset: scale.
 *
 * Heading sizes, weights, paragraph rhythm and small text utilities.
 * No colors, no font-family decisions — those belong to the skin.
 *
 * This preset can be reused by any skin that wants the DSFR scale
 * (e.g. a brand with different colors but the same rhythm).
 */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 0.5em 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.011em;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word;
  text-wrap: balance;
  text-align: left;
}
.reveal h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}
.reveal h2 {
  font-size: 4rem;
  line-height: 1.06;
  letter-spacing: -0.02em;
  padding-bottom: 0.2em;
  margin-bottom: 0.5em;
}
.reveal h3,
.reveal section.slide-h3 :is(header, hgroup) h2 {
  padding-bottom: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 0.8em;
}
.reveal h4 {
  font-size: var(--text-step-1);
  line-height: 1.2;
}
.reveal h5 {
  font-size: 1em;
}
.reveal p {
  margin: 0.6em 0;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.reveal strong,
.reveal b {
  font-weight: 700;
}
.reveal em {
  font-style: italic;
}
.reveal small {
  font-size: 0.75em;
}
.reveal .text-sm {
  font-size: 0.85em;
}
.reveal .text-xs {
  font-size: 0.75em;
}
.reveal .text-lg {
  font-size: 1.15em;
}

/**
 * DSFR-layout preset — Slide rhythm.
 *
 * Sizes for the `slide-h3` content slides: the heading's minimum height and the
 * body's padding, as the tokens of `_slide-structure.scss`, and the margins of
 * the pretitle and the subtitle. No colors here: those belong to the skin.
 *
 * Pairs with `_slide-structure.scss` of the kit, which provides the flex
 * skeleton. Together they describe the DSFR-style slide layout.
 */
.reveal {
  --slide-heading-min-height: 8rem;
  --slide-body-padding-y: 2rem;
}

.reveal section.slide-h3 hgroup .slide-pretitle p {
  margin: 0 0 0.65em 0;
  font-size: 0.9em;
  font-style: normal;
}
.reveal section.slide-h3 hgroup .slide-subtitle p {
  margin: 0.75em 0 0 0;
  font-size: 1.25rem;
  font-style: italic;
}

/**
 * Base reveal.js overrides and global styles
 */
body {
  padding: 0;
  margin: 0;
}

.reveal-viewport {
  background: var(--dsfr-background-default);
}

.reveal {
  font-family: "Marianne", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.reveal .slides section {
  text-align: left;
}

.reveal .slides section {
  height: 100%;
}

.reveal ::selection {
  color: var(--dsfr-grey-1000) !important;
  background: var(--dsfr-blue-france-main-525);
  text-shadow: none;
}

.reveal ::-moz-selection {
  color: var(--dsfr-grey-1000) !important;
  background: var(--dsfr-blue-france-main-525);
  text-shadow: none;
}

/**
 * DSFR base typography: colors and font-family. Sizes, weights, margins,
 * line-heights and the slide-h3 rhythm come from the layout preset.
 * Text colors read the semantic tokens: a brand that paints its section
 * dividers (slide-h2) dark sets `--text-title`, `--text-default` and
 * `--text-mention` on them.
 */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  color: var(--text-title);
  font-family: "Marianne", Arial, sans-serif;
}

.reveal h2 em,
.reveal h3 em {
  font-style: normal;
  color: #000091;
}

.reveal h1 {
  color: var(--dsfr-blue-france-main-525);
}

.reveal h2 {
  color: var(--text-title);
}

.reveal h3 {
  color: var(--dsfr-blue-france-main-525);
}

.reveal strong,
.reveal b {
  color: var(--text-title);
}

.reveal small {
  color: var(--text-mention);
}

.reveal section.slide-h2 h1,
.reveal section.slide-h2 h2,
.reveal section.slide-h2 h3,
.reveal section.slide-h2 h4,
.reveal section.slide-h2 h5,
.reveal section.slide-h2 h6 {
  color: var(--text-title) !important;
}
.reveal section.slide-h2 p {
  color: var(--text-mention) !important;
}

.reveal section.slide-h3 h1,
.reveal section.slide-h3 h2,
.reveal section.slide-h3 h3,
.reveal section.slide-h3 h4,
.reveal section.slide-h3 h5,
.reveal section.slide-h3 h6 {
  color: var(--text-title) !important;
}
.reveal section.slide-h3 hgroup .slide-pretitle p {
  color: var(--text-mention) !important;
}
.reveal section.slide-h3 hgroup .slide-subtitle p {
  color: var(--text-mention) !important;
}

/**
 * Component styles: links, lists, tables, code, quotes, images
 */
.reveal a {
  color: var(--dsfr-blue-france-main-525);
  text-decoration: underline;
  transition: color 0.15s ease;
}
.reveal a:hover {
  color: var(--dsfr-blue-france-sun-113);
  text-decoration: underline;
  text-underline-offset: 4px;
  border: none;
}

.reveal ul,
.reveal ol {
  display: block;
  margin: 0 0 0.8em 1.2em;
  text-align: left;
}

.reveal ul {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--flow-space);
}
.reveal ul li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.4;
}
.reveal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4em;
  height: 0.4em;
  background: var(--dsfr-blue-france-main-525);
  border-radius: 50%;
}

.reveal ol {
  list-style-type: decimal;
  list-style-position: outside;
}
.reveal ol li {
  line-height: 1.4;
}

.reveal ul.compact li,
.reveal ol.compact li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

.reveal table {
  margin: 1em 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.7em;
}
.reveal table th {
  font-weight: 700;
  background: var(--dsfr-blue-france-main-525);
  color: var(--dsfr-grey-1000);
  padding: 0.8em 1em;
  text-align: left;
}
.reveal table td {
  padding: 0.6em 1em;
  border-bottom: 1px solid var(--dsfr-border-default);
}
.reveal table tbody tr:nth-child(even) {
  background: var(--dsfr-background-alt);
}
.reveal table tbody tr:hover {
  background: var(--dsfr-blue-france-950);
}

.reveal pre {
  display: block;
  position: relative;
  width: 100%;
  margin: 16px auto;
  text-align: left;
  font-size: max(var(--code-size, 0px), 0.62em, var(--code-min-size));
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-weight: 500;
  line-height: 1.55;
  word-wrap: break-word;
  background: var(--code-background, var(--code-surface-dark));
  color: var(--code-text, #f5f5fe);
  border: var(--code-border, none);
  border-radius: var(--radius);
  padding: 1em 1.2em;
  box-shadow: var(--shadow);
}

.reveal pre.shiki {
  box-sizing: border-box;
  background: var(--code-background, var(--code-surface-dark)) !important;
}

.reveal code {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 0 0.45em;
  border-radius: 4px;
  font-size: 0.9em;
}

.reveal pre code {
  display: block;
  padding: 0;
  overflow: visible;
  max-height: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: transparent;
  color: inherit;
  font-weight: inherit;
  font-size: 1em;
}

.reveal blockquote {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  padding: 1em 1em 1em 2em;
  font-style: italic;
  background: var(--dsfr-blue-france-950);
  border-left: 4px solid var(--dsfr-blue-france-main-525);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  margin: 0;
}

.reveal section p > img:not(.has-lightbox img) {
  margin: 15px 0px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  box-shadow: none;
  max-width: 100%;
  max-height: 500px; /* Prevent overflow on raw markdown images */
  object-fit: contain;
}

.reveal p:has(+ .columns-container),
.reveal p:has(+ .two-columns),
.reveal p:has(+ .three-columns),
.reveal p:has(+ table),
.reveal p:has(+ .mermaid-wrapper) {
  margin-bottom: 2em;
}

.reveal p:has(+ ul) {
  margin-bottom: 1em;
}

/**
 * Utility classes: callouts, badges, dark backgrounds, controls
 */
.reveal .fr-callout {
  background: var(--dsfr-blue-france-950);
  border-left: 4px solid var(--dsfr-blue-france-main-525);
  padding: 1.5em;
  margin: 1em 0;
}
.reveal .fr-callout--green {
  background: var(--dsfr-green-emeraude-950);
  border-left-color: var(--dsfr-green-emeraude-main-632);
}
.reveal .fr-callout--red {
  background: var(--dsfr-red-marianne-925);
  border-left-color: var(--dsfr-red-marianne-main-472);
}

.reveal .fr-badge {
  display: inline-block;
  padding: 0.3em 0.8em;
  background: var(--dsfr-blue-france-main-525);
  color: var(--dsfr-grey-1000);
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 700;
}
.reveal .fr-badge--success {
  background: var(--dsfr-green-emeraude-main-632);
}
.reveal .fr-badge--error {
  background: var(--dsfr-red-marianne-main-472);
}

.reveal .controls {
  color: var(--dsfr-blue-france-main-525);
}

/**
 * The DSFR illustrative palette, for the cards and the regions of a diagram:
 * the generic names of the theme kit point to one DSFR tone each, and the theme
 * also defines the DSFR names, such as `color="green-emeraude"`.
 */
:root {
  --palette-blue-france-bg: #f5f5fe;
  --palette-blue-france-main: #6a6af4;
  --palette-blue-france-text: #000091;
  --palette-blue-ecume-bg: #f4f6fe;
  --palette-blue-ecume-main: #465f9d;
  --palette-blue-ecume-text: #2f4077;
  --palette-blue-cumulus-bg: #f3f6fe;
  --palette-blue-cumulus-main: #417dc4;
  --palette-blue-cumulus-text: #3558a2;
  --palette-green-tilleul-verveine-bg: #fef7da;
  --palette-green-tilleul-verveine-main: #b7a73f;
  --palette-green-tilleul-verveine-text: #66673d;
  --palette-green-bourgeon-bg: #e6feda;
  --palette-green-bourgeon-main: #68a532;
  --palette-green-bourgeon-text: #447049;
  --palette-green-emeraude-bg: #e3fdeb;
  --palette-green-emeraude-main: #00a95f;
  --palette-green-emeraude-text: #297254;
  --palette-green-menthe-bg: #dffdf7;
  --palette-green-menthe-main: #009081;
  --palette-green-menthe-text: #37635f;
  --palette-green-archipel-bg: #e5fbfd;
  --palette-green-archipel-main: #009099;
  --palette-green-archipel-text: #006a6f;
  --palette-yellow-tournesol-bg: #fef6e3;
  --palette-yellow-tournesol-main: #c8aa39;
  --palette-yellow-tournesol-text: #716043;
  --palette-yellow-moutarde-bg: #fef5e8;
  --palette-yellow-moutarde-main: #c3992a;
  --palette-yellow-moutarde-text: #695240;
  --palette-orange-terre-battue-bg: #fef4f2;
  --palette-orange-terre-battue-main: #e4794a;
  --palette-orange-terre-battue-text: #755348;
  --palette-brown-cafe-creme-bg: #fbf6ed;
  --palette-brown-cafe-creme-main: #d1b781;
  --palette-brown-cafe-creme-text: #685c48;
  --palette-brown-caramel-bg: #fbf5f2;
  --palette-brown-caramel-main: #c08c65;
  --palette-brown-caramel-text: #845d48;
  --palette-brown-opera-bg: #fbf5f2;
  --palette-brown-opera-main: #bd987a;
  --palette-brown-opera-text: #745b47;
  --palette-beige-gris-galet-bg: #f9f6f2;
  --palette-beige-gris-galet-main: #aea397;
  --palette-beige-gris-galet-text: #6a6156;
  --palette-pink-macaron-bg: #fef4f2;
  --palette-pink-macaron-main: #e18b76;
  --palette-pink-macaron-text: #8d533e;
  --palette-pink-tuile-bg: #fef4f3;
  --palette-pink-tuile-main: #ce614a;
  --palette-pink-tuile-text: #a94645;
  --palette-purple-glycine-bg: #fef3fd;
  --palette-purple-glycine-main: #a558a0;
  --palette-purple-glycine-text: #6e445a;
  --palette-blue-bg: var(--palette-blue-cumulus-bg);
  --palette-blue-main: var(--palette-blue-cumulus-main);
  --palette-blue-text: var(--palette-blue-cumulus-text);
  --palette-green-bg: var(--palette-green-emeraude-bg);
  --palette-green-main: var(--palette-green-emeraude-main);
  --palette-green-text: var(--palette-green-emeraude-text);
  --palette-yellow-bg: var(--palette-yellow-tournesol-bg);
  --palette-yellow-main: var(--palette-yellow-tournesol-main);
  --palette-yellow-text: var(--palette-yellow-tournesol-text);
  --palette-orange-bg: var(--palette-orange-terre-battue-bg);
  --palette-orange-main: var(--palette-orange-terre-battue-main);
  --palette-orange-text: var(--palette-orange-terre-battue-text);
  --palette-brown-bg: var(--palette-brown-caramel-bg);
  --palette-brown-main: var(--palette-brown-caramel-main);
  --palette-brown-text: var(--palette-brown-caramel-text);
  --palette-pink-bg: var(--palette-pink-tuile-bg);
  --palette-pink-main: var(--palette-pink-tuile-main);
  --palette-pink-text: var(--palette-pink-tuile-text);
  --palette-purple-bg: var(--palette-purple-glycine-bg);
  --palette-purple-main: var(--palette-purple-glycine-main);
  --palette-purple-text: var(--palette-purple-glycine-text);
  --palette-grey-bg: var(--palette-beige-gris-galet-bg);
  --palette-grey-main: var(--palette-beige-gris-galet-main);
  --palette-grey-text: var(--palette-beige-gris-galet-text);
}

:root {
  --dsfr-blue-france-sun-113: #000091;
  --dsfr-blue-france-main-525: #000091;
  --dsfr-blue-france-850: #e3e3fd;
  --dsfr-blue-france-925: #ececfe;
  --dsfr-blue-france-950: #f5f5fe;
  --dsfr-blue-france-975: #f5f5fe;
  --dsfr-blue-france-625: #8585f6;
  --dsfr-blue-france-75: #1b1b35;
  --dsfr-red-marianne-main-472: #e1000f;
  --dsfr-red-marianne-850: #fddde0;
  --dsfr-red-marianne-925: #fee9eb;
  --dsfr-green-emeraude-main-632: #00a95f;
  --dsfr-green-emeraude-950: #c3fad5;
  --dsfr-grey-950: #f6f6f6;
  --dsfr-grey-1000: #ffffff;
  --dsfr-grey-200: #3a3a3a;
  --dsfr-grey-425: #666666;
  --dsfr-grey-625: #929292;
  --dsfr-text-title: #161616;
  --dsfr-text-default: #3a3a3a;
  --dsfr-text-mention: #666666;
  --dsfr-background-default: #ffffff;
  --dsfr-background-alt: #f6f6f6;
  --dsfr-background-contrast: #161616;
  --dsfr-border-default: #dddddd;
  --dsfr-border-action: #000091;
  --accent: var(--dsfr-blue-france-main-525);
  --accent-soft: var(--dsfr-blue-france-850);
  --accent-bg: var(--dsfr-blue-france-950);
  --accent-strong: var(--dsfr-blue-france-sun-113);
  --accent-on-contrast: var(--dsfr-blue-france-625);
  --surface: var(--dsfr-background-default);
  --surface-contrast: var(--dsfr-background-contrast);
  --on-contrast: var(--dsfr-grey-1000);
  --text-default: var(--dsfr-text-default);
  --text-title: var(--dsfr-text-title);
  --text-mention: var(--dsfr-text-mention);
  --border: var(--dsfr-border-default);
  --radius: 0.375rem;
  --shadow: 0 1px 3px rgba(0, 0, 18, 0.16);
  --code-surface: var(--dsfr-background-alt);
  --code-surface-dark: var(--dsfr-blue-france-75);
}

.reveal h1 {
  background: linear-gradient(89deg, #2828b2 30.04%, #8f8ffc 100.41%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.14em;
}

.reveal h2 em {
  font-style: normal;
  color: #fac5b8;
}

.reveal section.slide-h2:not(.stack) h1,
.reveal section.slide-h2:not(.stack) h2,
.reveal section.slide-h2:not(.stack) h3,
.reveal section.slide-h2:not(.stack) h4,
.reveal section.slide-h2:not(.stack) h5,
.reveal section.slide-h2:not(.stack) h6 {
  color: var(--dsfr-grey-950) !important;
}
.reveal section.slide-h2:not(.stack) p {
  color: var(--dsfr-grey-625) !important;
}