/**
 * Jetons inspirés de Material Design 3 (surfaces tonales, formes, élévation, mouvement).
 * Réf. publique : https://m3.material.io/styles (couleur, typo, formes).
 * Police de référence M3 : Roboto — https://m3.material.io/styles/typography
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  color-scheme: light;
  /* Formes (M3 corner scale) */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  /* Élévation (ombres superposées type M3, adaptées au web) */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px 1px rgba(0, 0, 0, 0.12);
  --md-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px 2px rgba(0, 0, 0, 0.14);
  --md-elevation-3: 0 2px 3px rgba(0, 0, 0, 0.28), 0 4px 8px 3px rgba(0, 0, 0, 0.14);
  /* Échelle typo (proches des rôles display / headline / title / body / label) */
  --md-sys-typescale-display-small-size: clamp(2.25rem, 4.8vw, 2.75rem);
  --md-sys-typescale-display-small-leading: 1.15;
  --md-sys-typescale-headline-medium-size: clamp(1.65rem, 3.2vw, 1.95rem);
  --md-sys-typescale-headline-medium-leading: 1.2;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-leading: 1.5;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-weight: 500;
  /* Durées / easing (M3 standard curve) */
  --md-sys-motion-duration-short3: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-leading);
}

/* États de focus visibles (accessibilité, aligné UX moderne) */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--md-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

/* Boutons / liens d’action : arrondi M3 « full » pour pill */
.md-filled-button,
.btn {
  transition:
    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .md-filled-button,
  .btn {
    transition: none;
  }
}