/* ═══════════════════════════════════════════════
   02 · MATERIAL DESIGN
   Élévation par ombres portées, grilles de 4 dp,
   formes arrondies M3, boutons en pilule, onde de
   réaction (ripple) à l'interaction.
   ═══════════════════════════════════════════════ */

html[data-theme="material"], [data-theme-scope="material"].sc {
  /* couleurs — palette M3 lavande */
  --bg: #fef7ff;
  --bg-2: #f7f2fa;
  --surface: #ffffff;
  --surface-2: #f3edf7;
  --text: #1c1b1f;
  --muted: #57525e;
  --primary: #6750a4;
  --on-primary: #ffffff;
  --accent: #00696e;
  --line: #e7e0ec;
  --line-w: 1px;

  /* élévation M3 */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .20), 0 1px 3px 1px rgba(0, 0, 0, .10);
  --shadow-2: 0 4px 8px 3px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .22);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 1px 3px 1px rgba(0, 0, 0, .10);
  --card-shadow-hover: 0 4px 8px 3px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .24);
  --card-lift: translateY(-2px);
  --card-strip: transparent;
  --card-img: none;

  /* formes M3 */
  --r: 16px;
  --r-sm: 12px;
  --r-lg: 28px;

  /* typographie */
  --f-body: "Roboto", system-ui, sans-serif;
  --f-display: "Roboto", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --h-weight: 700;
  --h-transform: none;
  --h-tracking: -0.015em;
  --h-shadow: none;
  --em-c: var(--primary);
  --fs-hero: clamp(2.6rem, 6.6vw, 4.7rem);
  --fs-h2: clamp(1.95rem, 4.2vw, 3rem);
  --fs-h3: clamp(1.12rem, 1.5vw, 1.28rem);

  /* boutons pilule M3 */
  --btn-bg: #6750a4;
  --btn-bg-hover: #584394;
  --btn-fg: #ffffff;
  --btn-img: none;
  --btn-radius: 999px;
  --btn-border: transparent;
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  --btn-shadow-hover: 0 2px 5px rgba(0, 0, 0, .28);
  --btn-shadow-press: inset 0 2px 4px rgba(0, 0, 0, .30);

  /* cartes & chips */
  --card-bg: #ffffff;
  --chip-bg: #e8def8;
  --chip-fg: #1d1b20;
  --chip-border: transparent;
  --chip-w: 1px;

  /* liens & focus */
  --link-c: #6750a4;
  --link-deco: underline;
  --focus: #6750a4;

  /* kicker = « secondary container » */
  --kicker-bg: #e8def8;
  --kicker-fg: #4f378b;

  /* fond */
  --pattern: none;
  --pattern-size: auto;

  /* code */
  --code-bg: #211b33;
  --code-fg: #e8e2f5;
  --code-kw: #ffb3d9;
  --code-str: #a6f0c6;
  --code-com: #9b93b5;

  /* rythme + CTA */
  --sec-pad: clamp(66px, 8vw, 116px);
  --card-pad: clamp(22px, 2.6vw, 30px);
  --cta-bg: #6750a4;
  --cta-fg: #ffffff;
  --cta-kicker-bg: rgba(255, 255, 255, .22);
}

/* App bar en elevation 0 au repos, 2 une fois scrollée (déjà en base),
   plus les détails système : */

/* FAB-like : la pastille du rail Material devient ronde (uniquement la sienne) */
[data-theme-scope="material"].sc .dock-swatch { border-radius: 50%; }

/* États « state layer » légers sur les surfaces de la page */
html[data-theme="material"] .path:hover,
html[data-theme="material"] .card:hover {
  background-image: linear-gradient(rgba(103, 80, 164, .05), rgba(103, 80, 164, .05));
}
[data-theme-scope="material"].sc.pv:hover {
  background-image: linear-gradient(rgba(103, 80, 164, .05), rgba(103, 80, 164, .05));
}