/* YouForm — YOUFORM_DS_0.2 (version de travail, 16 octobre 2026 ; base 0.1 du 8 octobre)
   Système visuel original du projet : fondations, tokens sémantiques,
   composants partagés et états, templates (entrée, catalogue, fiche, aperçu),
   responsive 360/768/1280, mouvement réduit, couleurs forcées.
   Règle de couleur : hex, rgba et primitives n'apparaissent que dans :root et
   .yf-tone--* (définition de tokens) ; composants, états et illustrations
   consomment --yf-color-*, --yf-tone-* ou --yf-art-*.
   Aucune police, image ni ressource distante. Documentation : DESIGN_SYSTEM.md. */

/* 1. Fondations et tokens ------------------------------------------------ */

:root {
  /* Palette primitive (à ne pas utiliser directement dans les composants) */
  --yf-ink-900: #1b1f3b;
  --yf-ink-700: #3a3f63;
  --yf-ink-600: #4f5478;
  --yf-ink-500: #6b7092;
  --yf-ink-200: #cfd2e3;
  --yf-paper-0: #ffffff;
  --yf-paper-100: #fbf8f2;
  --yf-paper-200: #f3eee3;
  --yf-indigo-900: #221d6b;
  --yf-indigo-800: #2b2585;
  --yf-indigo-700: #3730a3;
  --yf-indigo-500: #6159d8;
  --yf-lavender-300: #c9c3f2;
  --yf-lavender-100: #eceafb;
  --yf-mint-800: #0f6b5c;
  --yf-mint-500: #2fa58c;
  --yf-mint-300: #9ed9c9;
  --yf-mint-100: #e3f4ef;
  --yf-sun-800: #8a4b00;
  --yf-sun-400: #f5b841;
  --yf-sun-300: #f0cf7a;
  --yf-sun-100: #fff1d6;
  --yf-coral-500: #ee7b5c;
  --yf-blue-700: #1d4ed8;
  /* Primitives translucides (seules valeurs rgba hors élévation) */
  --yf-indigo-700-a12: rgba(55, 48, 163, 0.12);
  --yf-paper-0-a80: rgba(255, 255, 255, 0.8);

  /* Couleurs sémantiques */
  --yf-color-bg: var(--yf-paper-100);
  --yf-color-surface: var(--yf-paper-0);
  --yf-color-surface-muted: var(--yf-paper-200);
  --yf-color-text: var(--yf-ink-900);
  --yf-color-text-soft: var(--yf-ink-700);
  --yf-color-text-muted: var(--yf-ink-600);
  --yf-color-border: var(--yf-ink-200);
  --yf-color-border-strong: var(--yf-ink-500);
  --yf-color-action: var(--yf-indigo-700);
  --yf-color-action-hover: var(--yf-indigo-800);
  --yf-color-action-active: var(--yf-indigo-900);
  --yf-color-action-soft: var(--yf-lavender-100);
  --yf-color-on-action: var(--yf-paper-0);
  --yf-color-link: var(--yf-indigo-700);
  --yf-color-focus: var(--yf-blue-700);
  --yf-color-notice-bg: var(--yf-sun-100);
  --yf-color-notice-border: var(--yf-sun-300);
  --yf-color-notice-icon: var(--yf-sun-800);
  --yf-color-info-bg: var(--yf-lavender-100);
  --yf-color-info-border: var(--yf-lavender-300);
  /* États et décors (ajoutés en 0.2 : plus aucune primitive dans les composants) */
  --yf-color-selection-bg: var(--yf-sun-300);
  --yf-color-selection-text: var(--yf-ink-900);
  --yf-color-action-soft-pressed: var(--yf-lavender-300);
  --yf-color-expanded-border: var(--yf-sun-400);
  --yf-color-pattern-dot: var(--yf-indigo-700-a12);

  /* Illustrations décoratives : un thème les redéfinit ici, sans toucher aux composants */
  --yf-art-ink: var(--yf-ink-900);
  --yf-art-paper: var(--yf-paper-0);
  --yf-art-veil: var(--yf-paper-0-a80);
  --yf-art-blob: var(--yf-lavender-100);
  --yf-art-card-back: var(--yf-mint-100);
  --yf-art-line: var(--yf-ink-200);
  --yf-art-line-strong: var(--yf-indigo-700);
  --yf-art-trail: var(--yf-indigo-500);
  --yf-art-sun: var(--yf-sun-400);
  --yf-art-mint: var(--yf-mint-500);
  --yf-art-coral: var(--yf-coral-500);

  /* Ton par défaut ; surchargé par .yf-tone--* */
  --yf-tone-bg: var(--yf-lavender-100);
  --yf-tone-fg: var(--yf-indigo-700);
  --yf-tone-accent: var(--yf-indigo-500);
  --yf-tone-border: var(--yf-lavender-300);

  /* Typographie locale/système */
  --yf-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --yf-font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --yf-text-xs: 0.8125rem;
  --yf-text-sm: 0.875rem;
  --yf-text-md: 1rem;
  --yf-text-lg: 1.125rem;
  --yf-text-xl: 1.375rem;
  --yf-text-2xl: 1.75rem;
  --yf-text-3xl: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
  --yf-text-title: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  --yf-leading-tight: 1.15;
  --yf-leading-snug: 1.3;
  --yf-leading-body: 1.6;
  --yf-weight-semibold: 600;
  --yf-weight-bold: 700;
  --yf-weight-heavy: 800;

  /* Espaces (base 4 px) */
  --yf-space-1: 0.25rem;
  --yf-space-2: 0.5rem;
  --yf-space-3: 0.75rem;
  --yf-space-4: 1rem;
  --yf-space-5: 1.5rem;
  --yf-space-6: 2rem;
  --yf-space-7: 3rem;
  --yf-space-8: 4rem;

  /* Bordures et rayons */
  --yf-border-thin: 1px;
  --yf-border-thick: 2px;
  --yf-border-accent: 6px;
  --yf-radius-sm: 0.375rem;
  --yf-radius-md: 0.75rem;
  --yf-radius-lg: 1.25rem;
  --yf-radius-pill: 999px;

  /* Élévation */
  --yf-shadow-1: 0 1px 2px rgba(27, 31, 59, 0.08), 0 1px 1px rgba(27, 31, 59, 0.04);
  --yf-shadow-2: 0 10px 24px -12px rgba(27, 31, 59, 0.28), 0 2px 4px rgba(27, 31, 59, 0.06);

  /* Focus, cibles tactiles, mise en page */
  --yf-focus-width: 3px;
  --yf-focus-offset: 2px;
  --yf-touch-min: 2.75rem;
  --yf-container-max: 72rem;
  --yf-gutter: var(--yf-space-4);
  --yf-pattern-size: 20px;

  /* Mouvement (ramené à 0 si mouvement réduit) */
  --yf-duration-fast: 120ms;
  --yf-duration-base: 220ms;
  --yf-duration-slow: 900ms;
  --yf-delay-intro: 200ms;
  --yf-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

.yf-tone--mint { --yf-tone-bg: var(--yf-mint-100); --yf-tone-fg: var(--yf-mint-800); --yf-tone-accent: var(--yf-mint-500); --yf-tone-border: var(--yf-mint-300); }
.yf-tone--lavender { --yf-tone-bg: var(--yf-lavender-100); --yf-tone-fg: var(--yf-indigo-700); --yf-tone-accent: var(--yf-indigo-500); --yf-tone-border: var(--yf-lavender-300); }
.yf-tone--sun { --yf-tone-bg: var(--yf-sun-100); --yf-tone-fg: var(--yf-sun-800); --yf-tone-accent: var(--yf-sun-400); --yf-tone-border: var(--yf-sun-300); }

/* 2. Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--yf-color-bg);
  color: var(--yf-color-text);
  font-family: var(--yf-font-body);
  font-size: var(--yf-text-md);
  line-height: var(--yf-leading-body);
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--yf-font-display); line-height: var(--yf-leading-snug); text-wrap: balance; }
ul[class] { padding: 0; list-style: none; }
a { color: var(--yf-color-link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--yf-color-selection-bg); color: var(--yf-color-selection-text); }

/* Règle de focus unique : quand :focus-visible s'applique, un anneau --yf-color-focus est
   toujours visible, sur l'élément ou sur un remplaçant déclaré (carte, puce). Les cibles
   programmatiques (tabindex="-1") n'en sont privées que hors :focus-visible, comme le
   ferait le navigateur. */
:focus-visible { outline: var(--yf-focus-width) solid var(--yf-color-focus); outline-offset: var(--yf-focus-offset); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus-visible { outline-offset: var(--yf-space-1); border-radius: var(--yf-radius-sm); }

/* 3. Mise en page -------------------------------------------------------- */

.yf-container {
  width: 100%;
  max-width: calc(var(--yf-container-max) + 2 * var(--yf-gutter));
  margin-inline: auto;
  padding-inline: var(--yf-gutter);
}
.yf-main { flex: 1 0 auto; }
/* Cible du lien d'évitement : anneau conservé, tracé à l'intérieur pour rester visible bord à bord. */
.yf-main:focus-visible { outline-offset: calc(-1 * var(--yf-focus-width)); }
.yf-section { padding-block: var(--yf-space-6) var(--yf-space-7); }
.yf-section__head { display: grid; gap: var(--yf-space-2); margin-bottom: var(--yf-space-5); }
.yf-section__title { font-size: var(--yf-text-xl); font-weight: var(--yf-weight-heavy); }
.yf-section__intro { color: var(--yf-color-text-muted); }
.yf-view__end { margin-top: var(--yf-space-6); }
.yf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 4. Composants partagés ------------------------------------------------- */

/* Lien d'évitement */
.yf-skip-link {
  position: absolute;
  top: var(--yf-space-3);
  left: var(--yf-space-3);
  z-index: 100;
  padding: var(--yf-space-2) var(--yf-space-4);
  border: var(--yf-border-thick) solid var(--yf-color-action);
  border-radius: var(--yf-radius-md);
  background: var(--yf-color-surface);
  color: var(--yf-color-action);
  font-weight: var(--yf-weight-bold);
  transform: translateY(-200%);
}
.yf-skip-link:focus { transform: none; }

/* Pictogramme */
.yf-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Bandeau de démonstration */
.yf-banner {
  border-bottom: var(--yf-border-thin) solid var(--yf-color-notice-border);
  background: var(--yf-color-notice-bg);
  font-size: var(--yf-text-sm);
}
.yf-banner__inner { display: flex; align-items: flex-start; gap: var(--yf-space-3); padding-block: var(--yf-space-3); }
.yf-banner__icon { margin-top: 0.1em; color: var(--yf-color-notice-icon); }

/* En-tête, marque textuelle (pas un logo) et navigation */
.yf-header { border-bottom: var(--yf-border-thin) solid var(--yf-color-border); background: var(--yf-color-surface); }
.yf-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--yf-space-2) var(--yf-space-5);
  padding-block: var(--yf-space-2);
}
.yf-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--yf-space-2);
  min-height: var(--yf-touch-min);
  color: var(--yf-color-text);
  font-family: var(--yf-font-display);
  font-size: var(--yf-text-xl);
  font-weight: var(--yf-weight-heavy);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.yf-brand__tag {
  padding: 0.125rem var(--yf-space-2);
  border-radius: var(--yf-radius-pill);
  background: var(--yf-color-action-soft);
  color: var(--yf-color-action);
  font-family: var(--yf-font-body);
  font-size: var(--yf-text-xs);
  font-weight: var(--yf-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.yf-nav__list { display: flex; flex-wrap: wrap; gap: var(--yf-space-1) var(--yf-space-2); }
.yf-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--yf-touch-min);
  padding-inline: var(--yf-space-3);
  border-radius: var(--yf-radius-pill);
  color: var(--yf-color-text-soft);
  font-weight: var(--yf-weight-semibold);
  text-decoration: none;
}
.yf-nav__link:hover { background: var(--yf-color-surface-muted); color: var(--yf-color-text); }
.yf-nav__link[aria-current="page"] {
  background: var(--yf-color-action-soft);
  color: var(--yf-color-action);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Surtitre */
.yf-eyebrow {
  color: var(--yf-color-action);
  font-size: var(--yf-text-sm);
  font-weight: var(--yf-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Boutons : primary, secondary, ghost, block ; états hover, active, focus, expanded, disabled */
.yf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yf-space-2);
  min-height: var(--yf-touch-min);
  padding: var(--yf-space-2) var(--yf-space-5);
  border: var(--yf-border-thick) solid transparent;
  border-radius: var(--yf-radius-pill);
  font-weight: var(--yf-weight-bold);
  line-height: var(--yf-leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.yf-button--primary { background: var(--yf-color-action); color: var(--yf-color-on-action); }
.yf-button--primary:hover { background: var(--yf-color-action-hover); }
.yf-button--primary:active,
.yf-button--primary[aria-expanded="true"] { background: var(--yf-color-action-active); }
.yf-button--primary[aria-expanded="true"] { border-color: var(--yf-color-expanded-border); }
.yf-button--secondary { border-color: var(--yf-color-action); background: var(--yf-color-surface); color: var(--yf-color-action); }
.yf-button--secondary:hover { background: var(--yf-color-action-soft); }
.yf-button--secondary:active { background: var(--yf-color-action-soft-pressed); }
.yf-button--ghost { border-color: var(--yf-color-border-strong); background: transparent; color: var(--yf-color-text-soft); }
.yf-button--ghost:hover { background: var(--yf-color-surface-muted); color: var(--yf-color-text); }
.yf-button--block { width: 100%; }
.yf-button:disabled,
.yf-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Lien de retour et navigation « Retour » (un seul lien : pas un fil d'Ariane) */
.yf-back-nav { margin-bottom: var(--yf-space-5); }
.yf-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--yf-space-2);
  min-height: var(--yf-touch-min);
  font-weight: var(--yf-weight-semibold);
}

/* Badges : tone, fiction, neutral */
.yf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--yf-space-1);
  padding: 0.125rem var(--yf-space-2);
  border: var(--yf-border-thin) solid transparent;
  border-radius: var(--yf-radius-pill);
  font-size: var(--yf-text-xs);
  font-weight: var(--yf-weight-bold);
  line-height: var(--yf-leading-snug);
}
.yf-badge--tone { border-color: var(--yf-tone-border); background: var(--yf-tone-bg); color: var(--yf-tone-fg); }
.yf-badge--fiction { border-style: dashed; border-color: var(--yf-color-border-strong); background: var(--yf-color-surface); color: var(--yf-color-text-soft); }
.yf-badge--neutral { background: var(--yf-color-surface-muted); color: var(--yf-color-text-soft); }

/* Champs : label, aide, saisie, lecture seule */
.yf-field { display: grid; align-content: start; gap: var(--yf-space-2); }
.yf-field__label { padding: 0; font-weight: var(--yf-weight-bold); }
.yf-field__hint { color: var(--yf-color-text-muted); font-size: var(--yf-text-sm); }
.yf-field__hint--icon { display: flex; align-items: flex-start; gap: var(--yf-space-2); }
.yf-input {
  width: 100%;
  min-height: var(--yf-touch-min);
  padding: var(--yf-space-2) var(--yf-space-3);
  border: var(--yf-border-thick) solid var(--yf-color-border-strong);
  border-radius: var(--yf-radius-md);
  background: var(--yf-color-surface);
  color: var(--yf-color-text);
}
.yf-input:hover { border-color: var(--yf-color-text-soft); }
.yf-input[readonly] {
  border-style: dashed;
  background: var(--yf-color-surface-muted);
  color: var(--yf-color-text-soft);
  cursor: default;
}
.yf-textarea { min-height: 7rem; line-height: var(--yf-leading-body); resize: vertical; }

/* Recherche */
.yf-search { position: relative; }
.yf-search__icon {
  position: absolute;
  top: 50%;
  left: var(--yf-space-3);
  color: var(--yf-color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.yf-search__input { padding-left: 2.75rem; -webkit-appearance: none; appearance: none; }

/* Filtre : puces radio natives */
.yf-filter { min-width: 0; margin: 0; padding: 0; border: 0; }
.yf-filter > legend { margin-bottom: var(--yf-space-2); }
.yf-filter__options { display: flex; flex-wrap: wrap; gap: var(--yf-space-2); }
.yf-chip { position: relative; display: inline-flex; }
.yf-chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.yf-chip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--yf-space-2);
  min-height: var(--yf-touch-min);
  padding: var(--yf-space-1) var(--yf-space-4);
  border: var(--yf-border-thick) solid var(--yf-color-border-strong);
  border-radius: var(--yf-radius-pill);
  background: var(--yf-color-surface);
  color: var(--yf-color-text-soft);
  font-weight: var(--yf-weight-semibold);
}
.yf-chip__label .yf-icon { color: var(--yf-tone-fg); }
.yf-chip:hover .yf-chip__label { border-color: var(--yf-color-action); color: var(--yf-color-text); }
.yf-chip__input:focus-visible + .yf-chip__label { outline: var(--yf-focus-width) solid var(--yf-color-focus); outline-offset: var(--yf-focus-offset); }
.yf-chip__input:checked + .yf-chip__label { border-color: var(--yf-color-action); background: var(--yf-color-action); color: var(--yf-color-on-action); }
.yf-chip__input:checked + .yf-chip__label .yf-icon { color: currentColor; }

/* Barre d'outils du catalogue */
.yf-toolbar {
  display: grid;
  grid-template-areas: "search" "filter" "reset";
  gap: var(--yf-space-4);
  padding: var(--yf-space-4);
  border: var(--yf-border-thin) solid var(--yf-color-border);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-color-surface);
  box-shadow: var(--yf-shadow-1);
}
.yf-toolbar__search { grid-area: search; }
.yf-toolbar__filter { grid-area: filter; }
.yf-toolbar__reset { grid-area: reset; display: flex; align-items: flex-start; }

/* Nombre de résultats */
.yf-result-count { margin-block: var(--yf-space-5) var(--yf-space-4); color: var(--yf-color-text-soft); font-weight: var(--yf-weight-semibold); }

/* Grille et carte de fiche (variante compact pour les suggestions) */
.yf-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yf-space-4); }
.yf-card-grid__item { display: flex; }
.yf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: var(--yf-border-thin) solid var(--yf-color-border);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-color-surface);
  box-shadow: var(--yf-shadow-1);
}
.yf-card:hover { border-color: var(--yf-tone-border); box-shadow: var(--yf-shadow-2); }
.yf-card__media { display: flex; align-items: center; padding: var(--yf-space-4) var(--yf-space-5); background: var(--yf-tone-bg); color: var(--yf-tone-fg); }
.yf-card__icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.75; }
.yf-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--yf-space-3); padding: var(--yf-space-4) var(--yf-space-5) var(--yf-space-5); }
.yf-card__meta { display: flex; flex-wrap: wrap; gap: var(--yf-space-2); }
.yf-card__title { font-size: var(--yf-text-lg); font-weight: var(--yf-weight-heavy); }
.yf-card__link { color: var(--yf-color-text); text-decoration: none; }
.yf-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--yf-radius-lg); }
.yf-card:hover .yf-card__link { text-decoration: underline; text-decoration-thickness: 2px; }
.yf-card__link:focus-visible { outline: none; }
.yf-card__link:focus-visible::after { outline: var(--yf-focus-width) solid var(--yf-color-focus); outline-offset: calc(-1 * var(--yf-focus-width)); }
.yf-card__summary { color: var(--yf-color-text-soft); }
.yf-card__cta { display: inline-flex; align-items: center; gap: var(--yf-space-1); margin-top: auto; color: var(--yf-color-action); font-weight: var(--yf-weight-bold); }
.yf-card--compact .yf-card__media { padding-block: var(--yf-space-3); }
.yf-card--compact .yf-card__icon { width: 2rem; height: 2rem; }

/* État vide / sans résultat */
.yf-empty {
  display: grid;
  justify-items: center;
  gap: var(--yf-space-3);
  padding: var(--yf-space-6) var(--yf-space-4);
  border: var(--yf-border-thick) dashed var(--yf-color-border-strong);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-color-surface);
  text-align: center;
}
.yf-empty__art { width: 10rem; height: auto; }
.yf-empty__title { font-size: var(--yf-text-xl); font-weight: var(--yf-weight-heavy); }
.yf-empty__text { max-width: 32rem; color: var(--yf-color-text-soft); }

/* Alertes : info, warning */
.yf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--yf-space-3);
  padding: var(--yf-space-4);
  border: var(--yf-border-thin) solid var(--yf-color-info-border);
  border-left-width: var(--yf-border-accent);
  border-radius: var(--yf-radius-md);
  background: var(--yf-color-info-bg);
}
.yf-alert--warning { border-color: var(--yf-color-notice-border); background: var(--yf-color-notice-bg); }
.yf-alert__icon { margin-top: 0.15em; color: var(--yf-color-action); }
.yf-alert--warning .yf-alert__icon { color: var(--yf-color-notice-icon); }
.yf-alert__body { display: grid; gap: var(--yf-space-1); }
.yf-alert__title { font-family: var(--yf-font-display); font-size: var(--yf-text-md); font-weight: var(--yf-weight-bold); }
h1.yf-alert__title { font-size: var(--yf-text-xl); }

/* Pied de page : informations du prototype et mentions légales */
.yf-footer {
  border-top: var(--yf-border-thin) solid var(--yf-color-border);
  background: var(--yf-color-surface-muted);
  color: var(--yf-color-text-soft);
  font-size: var(--yf-text-sm);
}
.yf-footer__inner { display: grid; gap: var(--yf-space-5); padding-block: var(--yf-space-6); }
.yf-footer__block { display: grid; align-content: start; gap: var(--yf-space-2); min-width: 0; }
.yf-footer__brand { color: var(--yf-color-text); }
.yf-footer__title { color: var(--yf-color-text); font-size: var(--yf-text-md); font-weight: var(--yf-weight-bold); }

/* Liste de mentions (terme / valeur) */
.yf-legal { display: grid; gap: var(--yf-space-2); }
.yf-legal__row { display: grid; }
.yf-legal dt { color: var(--yf-color-text); font-weight: var(--yf-weight-bold); }

/* Illustrations SVG inline originales (décoratives) : couleurs par tokens --yf-art-* uniquement */
.yf-art__blob { fill: var(--yf-art-blob); }
.yf-art__trail { fill: none; stroke: var(--yf-art-trail); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.yf-art__card { fill: var(--yf-art-paper); stroke: var(--yf-art-ink); stroke-width: 2.5; }
.yf-art__card--back { fill: var(--yf-art-card-back); }
.yf-art__line { fill: var(--yf-art-line); }
.yf-art__line--strong { fill: var(--yf-art-line-strong); }
.yf-art__badge { fill: var(--yf-art-mint); }
.yf-art__tick { fill: none; stroke: var(--yf-art-paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.yf-art__bubble { fill: var(--yf-art-sun); stroke: var(--yf-art-ink); stroke-width: 2.5; stroke-linejoin: round; }
.yf-art__bubble--paper { fill: var(--yf-art-paper); }
.yf-art__question { fill: none; stroke: var(--yf-art-line-strong); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.yf-art__dots { fill: none; stroke: var(--yf-art-ink); stroke-width: 6; stroke-linecap: round; }
.yf-art__spark { fill: var(--yf-art-coral); }
.yf-art__step { stroke: var(--yf-art-ink); stroke-width: 2.5; }
.yf-art__step--sun { fill: var(--yf-art-sun); }
.yf-art__step--mint { fill: var(--yf-art-mint); }
.yf-art__step--coral { fill: var(--yf-art-coral); }
.yf-art__lens { fill: var(--yf-art-veil); stroke: var(--yf-art-ink); stroke-width: 5; }
.yf-art__handle { fill: none; stroke: var(--yf-art-ink); stroke-width: 9; stroke-linecap: round; }
.yf-art__dash { fill: none; stroke: var(--yf-art-trail); stroke-width: 4; stroke-linecap: round; }

/* 5. Templates ----------------------------------------------------------- */

/* Entrée : question d'accueil dans une section ordinaire (pas de modale, pas de piège de focus).
   Variantes : question (défaut), déclinée (--declined), repli sans script (.yf-entry__fallback). */
.yf-entry {
  border-bottom: var(--yf-border-thin) solid var(--yf-color-border);
  background-color: var(--yf-color-bg);
  background-image: radial-gradient(circle at 1px 1px, var(--yf-color-pattern-dot) 1px, transparent 1.5px);
  background-size: var(--yf-pattern-size) var(--yf-pattern-size);
}
.yf-entry__inner { display: grid; justify-items: center; padding-block: var(--yf-space-6) var(--yf-space-7); }
.yf-entry__panel {
  display: grid;
  justify-items: center;
  gap: var(--yf-space-4);
  width: 100%;
  max-width: 40rem;
  padding: var(--yf-space-5);
  border: var(--yf-border-thin) solid var(--yf-color-border);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-color-surface);
  box-shadow: var(--yf-shadow-2);
  text-align: center;
}
.yf-entry__panel--declined { border: var(--yf-border-thick) dashed var(--yf-color-border-strong); box-shadow: var(--yf-shadow-1); }
.yf-entry__art { width: 100%; max-width: 12.5rem; height: auto; }
.yf-entry__title { font-size: var(--yf-text-3xl); font-weight: var(--yf-weight-heavy); line-height: var(--yf-leading-tight); letter-spacing: -0.02em; }
.yf-entry__lead { max-width: 34rem; color: var(--yf-color-text-soft); font-size: var(--yf-text-lg); }
.yf-entry__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--yf-space-3); }
.yf-entry__answer { min-width: 8rem; }
.yf-entry__note { max-width: 34rem; color: var(--yf-color-text-muted); font-size: var(--yf-text-sm); }
.yf-entry__fallback { width: 100%; text-align: start; }

/* Catalogue : en-tête d'accueil */
.yf-hero {
  border-bottom: var(--yf-border-thin) solid var(--yf-color-border);
  background-color: var(--yf-color-surface);
  background-image: radial-gradient(circle at 1px 1px, var(--yf-color-pattern-dot) 1px, transparent 1.5px);
  background-size: var(--yf-pattern-size) var(--yf-pattern-size);
}
.yf-hero__inner { display: grid; align-items: center; gap: var(--yf-space-6); padding-block: var(--yf-space-7); }
.yf-hero__text { display: grid; gap: var(--yf-space-4); }
.yf-hero__title { font-size: var(--yf-text-3xl); font-weight: var(--yf-weight-heavy); line-height: var(--yf-leading-tight); letter-spacing: -0.02em; }
.yf-hero__lead { max-width: 38rem; color: var(--yf-color-text-soft); font-size: var(--yf-text-lg); }
.yf-hero__facts { display: flex; flex-wrap: wrap; gap: var(--yf-space-2); }
.yf-hero__fact {
  display: inline-flex;
  align-items: baseline;
  gap: var(--yf-space-1);
  padding: var(--yf-space-1) var(--yf-space-3);
  border: var(--yf-border-thin) solid var(--yf-color-border);
  border-radius: var(--yf-radius-pill);
  background: var(--yf-color-surface);
  font-size: var(--yf-text-sm);
}
.yf-hero__fact strong { color: var(--yf-color-action); font-family: var(--yf-font-display); font-size: var(--yf-text-lg); }
.yf-hero__art { justify-self: center; width: 100%; max-width: 22rem; height: auto; }

/* Fiche */
.yf-detail { display: grid; gap: var(--yf-space-5); }
.yf-detail__header {
  display: grid;
  gap: var(--yf-space-3);
  padding: var(--yf-space-5);
  border: var(--yf-border-thin) solid var(--yf-tone-border);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-tone-bg);
}
.yf-detail__meta { display: flex; flex-wrap: wrap; gap: var(--yf-space-2); }
.yf-detail__meta .yf-badge--tone { background: var(--yf-color-surface); }
.yf-detail__title { font-size: var(--yf-text-2xl); font-weight: var(--yf-weight-heavy); line-height: var(--yf-leading-tight); }
.yf-detail__lead { color: var(--yf-color-text-soft); font-size: var(--yf-text-lg); }
.yf-detail__layout { display: grid; gap: var(--yf-space-5); }
.yf-detail__main { display: grid; align-content: start; gap: var(--yf-space-3); }
.yf-detail__subtitle { margin-top: var(--yf-space-3); font-size: var(--yf-text-lg); font-weight: var(--yf-weight-heavy); }
.yf-detail__subtitle:first-child { margin-top: 0; }
.yf-detail__text { max-width: 44rem; }
.yf-detail__aside { display: grid; align-content: start; gap: var(--yf-space-4); }
.yf-detail__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--yf-radius-lg);
  background: var(--yf-tone-bg);
  color: var(--yf-tone-fg);
}
.yf-detail__icon { width: 5rem; height: 5rem; stroke-width: 1.5; }
.yf-checklist { display: grid; gap: var(--yf-space-3); }
.yf-checklist__item { position: relative; padding-left: 2rem; }
.yf-checklist__item::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--yf-border-thick) solid var(--yf-tone-fg);
  border-radius: var(--yf-radius-sm);
  background: var(--yf-tone-bg);
}
.yf-checklist__item::after {
  content: "";
  position: absolute;
  top: 0.38em;
  left: 0.45rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--yf-tone-fg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.yf-suggestions {
  display: grid;
  gap: var(--yf-space-4);
  margin-top: var(--yf-space-7);
  padding-top: var(--yf-space-6);
  border-top: var(--yf-border-thin) solid var(--yf-color-border);
}

/* Aperçu de formulaire */
.yf-page-head { display: grid; gap: var(--yf-space-3); margin-bottom: var(--yf-space-6); }
.yf-page-head__title { font-size: var(--yf-text-2xl); font-weight: var(--yf-weight-heavy); line-height: var(--yf-leading-tight); }
.yf-page-head__lead { max-width: 42rem; color: var(--yf-color-text-soft); font-size: var(--yf-text-lg); }
.yf-form-preview { display: grid; align-items: start; gap: var(--yf-space-5); }
.yf-panel {
  display: grid;
  gap: var(--yf-space-5);
  padding: var(--yf-space-5);
  border: var(--yf-border-thin) solid var(--yf-color-border);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-color-surface);
  box-shadow: var(--yf-shadow-1);
}
.yf-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.yf-fieldset__legend { margin-bottom: var(--yf-space-2); padding: 0; font-family: var(--yf-font-display); font-size: var(--yf-text-lg); font-weight: var(--yf-weight-heavy); }
.yf-fieldset > .yf-field__hint { margin-bottom: var(--yf-space-4); }
.yf-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yf-space-4); }
.yf-form-preview__actions { display: grid; justify-items: start; gap: var(--yf-space-2); }
.yf-preview {
  display: grid;
  gap: var(--yf-space-3);
  padding: var(--yf-space-5);
  border: var(--yf-border-thick) dashed var(--yf-color-action);
  border-radius: var(--yf-radius-lg);
  background: var(--yf-color-action-soft);
}
.yf-preview__title { font-size: var(--yf-text-xl); font-weight: var(--yf-weight-heavy); }
.yf-preview__text { color: var(--yf-color-text-soft); }
.yf-summary-list { display: grid; gap: var(--yf-space-3); margin-top: var(--yf-space-2); padding: var(--yf-space-4); border-radius: var(--yf-radius-md); background: var(--yf-color-surface); }
.yf-summary-list__row { display: grid; gap: var(--yf-space-1); }
.yf-summary-list__row dt { color: var(--yf-color-text-muted); font-size: var(--yf-text-sm); font-weight: var(--yf-weight-bold); }
.yf-summary-list__row dd { margin: 0; }

/* 6. Responsive : base 360 px, 768 px (48em), 1280 px (80em) ------------ */

@media (min-width: 48em) {
  :root { --yf-gutter: var(--yf-space-5); }
  .yf-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); padding-block: var(--yf-space-8); }
  .yf-hero__art { max-width: none; }
  .yf-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "search reset" "filter filter";
    padding: var(--yf-space-5);
  }
  .yf-toolbar__reset { padding-top: calc(var(--yf-text-md) * var(--yf-leading-body) + var(--yf-space-2)); }
  .yf-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yf-space-5); }
  .yf-detail__header { padding: var(--yf-space-6); }
  .yf-detail__title,
  .yf-page-head__title { font-size: var(--yf-text-title); }
  .yf-detail__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--yf-space-6); }
  .yf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yf-field--wide { grid-column: 1 / -1; }
  .yf-panel { padding: var(--yf-space-6); }
  .yf-entry__inner { padding-block: var(--yf-space-7) var(--yf-space-8); }
  .yf-entry__panel { padding: var(--yf-space-6) var(--yf-space-7); }
  .yf-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yf-space-5) var(--yf-space-6); }
  .yf-footer__block--about { grid-column: 1 / -1; }
}

@media (min-width: 80em) {
  :root { --yf-gutter: var(--yf-space-6); }
  .yf-section { padding-block: var(--yf-space-7) var(--yf-space-8); }
  .yf-toolbar {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr) auto;
    grid-template-areas: "search filter reset";
  }
  .yf-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--yf-space-6); }
  .yf-card-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yf-form-preview { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .yf-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
  .yf-footer__block--about { grid-column: auto; }
}

/* 7. Mouvement : uniquement sans préférence de réduction ----------------- */

@keyframes yf-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@keyframes yf-twinkle {
  0% { opacity: 0; transform: scale(0.6) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.1) rotate(8deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .yf-view:not([hidden]),
  .yf-preview:not([hidden]) { animation: yf-rise var(--yf-duration-base) var(--yf-ease-out) both; }
  .yf-hero__art .yf-art__spark,
  .yf-entry__art .yf-art__spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: yf-twinkle var(--yf-duration-slow) var(--yf-ease-out) var(--yf-delay-intro) 1 both;
  }
  .yf-card {
    transition: transform var(--yf-duration-fast) var(--yf-ease-out),
      box-shadow var(--yf-duration-fast) var(--yf-ease-out),
      border-color var(--yf-duration-fast) var(--yf-ease-out);
  }
  .yf-card:hover { transform: translateY(-3px); }
  .yf-button,
  .yf-chip__label,
  .yf-nav__link,
  .yf-input {
    transition: background-color var(--yf-duration-fast) var(--yf-ease-out),
      border-color var(--yf-duration-fast) var(--yf-ease-out),
      color var(--yf-duration-fast) var(--yf-ease-out);
  }
  .yf-button:active { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --yf-duration-fast: 0ms; --yf-duration-base: 0ms; --yf-duration-slow: 0ms; --yf-delay-intro: 0ms; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 8. Couleurs forcées (contraste élevé du système) ----------------------- */

@media (forced-colors: active) {
  .yf-card,
  .yf-toolbar,
  .yf-panel,
  .yf-preview,
  .yf-empty,
  .yf-alert,
  .yf-detail__header,
  .yf-entry__panel,
  .yf-badge,
  .yf-hero__fact { border-color: CanvasText; }
  .yf-chip__input:checked + .yf-chip__label {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}