/* Kilora — couche applicative au-dessus de liquid-glass.css (étape AC1).
   Chargé après Tailwind (CDN) et liquid-glass.css par views/layout.ejs. Classes préfixées k- / glass-.
   Conventions du skill (.claude/skills/plugins/liquid-glass) : le verre est incolore, la couleur vient du fond maillé
   (`liquid-glass-backdrop` sur <body>) ; une seule surface de verre par pile ; un enfant d'un panneau ne peint ni fond
   ni bordure (un simple voile gris au survol, comme dans assets/demo.html) ; chaque jeton ajouté est valué clair + sombre. */

/* Identité Kilora : le maillage du skill retravaillé en violet / indigo dominant, page claire à dégradé subtil.
   Seuls les jetons du fond changent (--glass-page-*, --glass-mesh-*) ; teinte, reflets et bordure du verre restent
   incolores (règle 2 du skill). Les deux thèmes sont valués. */
:root,
html[data-theme='light'] {
  --glass-page-bg: #eef0f7;
  --glass-page-fg: #262a38;
  --glass-mesh-violet: rgba(99, 102, 241, 0.24);     /* indigo-500 : la lueur principale */
  --glass-mesh-pink: rgba(167, 139, 250, 0.2);       /* violet-400 à la place du rose */
  --glass-mesh-cyan: rgba(56, 189, 248, 0.13);       /* sky-400, discret : une 2e teinte pour que le verre « varie » */
  --glass-mesh-corner-top: rgba(79, 70, 229, 0.08);
  --glass-mesh-corner-bottom: rgba(129, 140, 248, 0.12);
  --k-page-top: #f5f6fb;
  --k-page-bottom: #e6e8f3;
}
html[data-theme='dark'] {
  --glass-page-bg: #0b0b12;
  --glass-mesh-violet: rgba(129, 140, 248, 0.28);
  --glass-mesh-pink: rgba(167, 139, 250, 0.22);
  --glass-mesh-cyan: rgba(56, 189, 248, 0.16);
  --glass-mesh-corner-top: rgba(99, 102, 241, 0.16);
  --glass-mesh-corner-bottom: rgba(79, 70, 229, 0.3);
  --k-page-top: #101018;
  --k-page-bottom: #0b0b12;
}
/* Dégradé doux sous les lueurs (le ::before du skill porte les « blobs », inchangé) */
.liquid-glass-backdrop { background: linear-gradient(165deg, var(--k-page-top), var(--k-page-bottom)) fixed var(--glass-page-bg); }

:root {
  --k-accent: #4f46e5;                 /* indigo-600 */
  --k-accent-strong: #4338ca;          /* indigo-700 */
  --k-accent-soft: rgba(79, 70, 229, 0.1);
  --k-ink: var(--glass-page-fg);
  --k-ink-soft: #545a6b;               /* 6,5:1 sur la page claire */
  --k-wash: rgba(128, 128, 128, 0.14); /* survol d'un enfant de verre (démo : rgba(128,128,128,.18)) */
  --k-wash-strong: rgba(128, 128, 128, 0.2);
  --k-success: #047857;                /* emerald-700 */
  --k-topbar-h: 3rem;
  --k-control-radius: calc(var(--k-topbar-h) / 2);
  --k-fast: 150ms;
  --k-base: 220ms;
  --k-slow: 320ms;
  --k-ease: var(--glass-ease);
}
html[data-theme='dark'] {
  --k-accent: #818cf8;                 /* indigo-400 */
  --k-accent-strong: #a5b4fc;          /* indigo-300 */
  --k-accent-soft: rgba(129, 140, 248, 0.16);
  --k-ink-soft: #a9adba;
  --k-wash: rgba(255, 255, 255, 0.08);
  --k-wash-strong: rgba(255, 255, 255, 0.13);
  --k-success: #6ee7b7;                /* emerald-300 */
}

[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body.k-no-scroll { overflow: hidden; }

/* --- Barre supérieure : pilule flottante et collante, tier menu du skill ----------------------------------------- */
/* Barre au-dessus d'un contenu qui défile (references/recipes.md, « A glass panel that scrolls with content behind
   it ») : ses libellés doivent rester lisibles quelle que soit la page dessous → tier menu (givre 22 px + voile),
   pas tier panneau. Seul le rayon est écrasé après la classe, comme le skill l'autorise. */
.k-topbar-wrap { position: sticky; top: 0; z-index: 30; padding: 0.75rem 1rem 0; }
.k-topbar {
  max-width: 72rem; margin: 0 auto; height: var(--k-topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 0.5rem 0 1.1rem;
  border-radius: var(--k-control-radius);
}
.k-brand { font-weight: 600; letter-spacing: -0.01em; color: var(--k-accent-strong); white-space: nowrap; transition: opacity var(--k-fast) var(--k-ease); }
.k-brand:hover { opacity: 0.8; }

/* Entrées principales (enfants du verre : pas de fond ni de bordure, un voile au survol) */
.k-nav-item {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  height: 2.1rem; padding: 0 0.75rem; border: 0; border-radius: var(--glass-radius-full);
  font: inherit; font-size: 0.875rem; color: var(--k-ink-soft); background: transparent; cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease);
}
.k-nav-item:hover, .k-nav-item[aria-expanded="true"] { background: var(--k-wash); color: var(--k-ink); }
.k-nav-item.is-active { color: var(--k-accent-strong); font-weight: 600; }
/* Indicateur de section active : trait sous le libellé */
.k-nav-item.is-active::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.2rem; height: 2px;
  border-radius: 2px; background: var(--k-accent);
}
.k-nav-item:focus-visible, .k-menu-item:focus-visible, .k-icon-btn:focus-visible, .k-trial:focus-visible, .k-btn:focus-visible {
  outline: 2px solid var(--k-accent); outline-offset: 2px;
}
.k-caret { width: 0.9em; height: 0.9em; opacity: 0.7; transition: transform var(--k-fast) var(--k-ease); }
[aria-expanded="true"] > .k-caret { transform: rotate(180deg); }

/* Menus déroulants (tier menu : flou 22 px + voile de la surface, lisibles quel que soit le contenu dessous) */
.k-menu { position: absolute; top: calc(100% + 8px); min-width: 13.5rem; padding: 0.4rem; z-index: 40; }
.k-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* pont pour le survol */
.k-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; padding: 0.5rem 0.7rem; border: 0; border-radius: 6px;
  font: inherit; font-size: 0.875rem; color: var(--k-ink); text-align: left; background: none; cursor: pointer;
  transition: background-color var(--k-fast) var(--k-ease);
}
.k-menu-item:hover, .k-menu-item:focus-visible { background: var(--k-wash-strong); }
.k-menu-item.is-active { color: var(--k-accent-strong); font-weight: 600; }
.k-menu-item.is-active > span:first-child::before { content: "•"; margin-right: 0.4rem; }
.k-menu-item.is-muted { color: var(--k-ink-soft); }
.k-menu-sep { height: 1px; margin: 0.35rem 0.5rem; background: var(--glass-border); opacity: 0.7; }
.k-menu-head { padding: 0.4rem 0.7rem 0.3rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--k-ink-soft); }

/* Pastille des initiales : verre coloré (recipes.md « Colored glass ») — seule la teinte change, reflets conservés */
.k-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: var(--glass-radius-full);
  background: linear-gradient(155deg, rgba(79, 70, 229, 0.85), rgba(67, 56, 202, 0.72));
  box-shadow: 0 4px 10px rgba(67, 56, 202, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #fff; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
}
.k-avatar.k-avatar-lg { width: 2.25rem; height: 2.25rem; font-size: 0.8rem; }
.k-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 1.2rem; height: 1.2rem; padding: 0 0.35rem; border-radius: var(--glass-radius-full);
  font-size: 0.68rem; font-weight: 600; line-height: 1; color: #fff; background: var(--k-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-theme='dark'] .k-badge { color: #0a0a0c; }
.k-badge.k-badge-dot { min-width: 0.5rem; width: 0.5rem; height: 0.5rem; padding: 0; }

/* Bouton icône rond (menu mobile, fermeture) : diamètre et rayon dérivés de la hauteur de barre */
.k-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--k-control-radius);
  color: var(--k-ink); background: transparent; cursor: pointer;
  transition: background-color var(--k-fast) var(--k-ease);
}
.k-icon-btn:hover { background: var(--k-wash); }

/* Panneau mobile plein écran : tier menu (givre 22 px + voile, lisible sur n'importe quelle page), sans rayon ni
   bordure puisqu'il couvre la fenêtre — le skill autorise d'écraser le rayon après la classe. */
.k-sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 0; border: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.k-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex: none;
  height: var(--k-topbar-h); margin: 0.75rem 1rem 0; padding: 0 0.5rem 0 1.1rem;
}
.k-sheet-body { padding: 0.75rem 1rem 1.5rem; display: grid; gap: 1rem; }
.k-sheet-group { display: grid; gap: 0.15rem; }
.k-sheet-group + .k-sheet-group { padding-top: 1rem; border-top: 1px solid var(--glass-border); }
.k-sheet .k-menu-head { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.85rem; text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
.k-sheet .k-menu-head .k-avatar { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; }
.k-sheet .k-menu-item { padding: 0.75rem 0.85rem; font-size: 1rem; border-radius: var(--glass-radius); }
.k-scrim { z-index: 50; display: block; }

/* Modales (fix/modale-envoi-lien) : téléportées dans <body> (x-teleport) car le backdrop-filter et l'overflow de
   <main class="k-main"> y confinaient le position:fixed (voile limité à <main>, panneau rogné à ~260 px). Voile plein
   écran sombre + flou, panneau OPAQUE (surface des menus, claire ou sombre selon le thème) : rien ne transparaît
   dessous. Hauteur auto jusqu'à 85vh, défilement interne seulement au-delà. Largeur : classe max-w-* sur le panneau. */
.k-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  overscroll-behavior: contain;
}
.k-modal-panel {
  position: relative; width: 100%; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem; border: 1px solid var(--glass-border); border-radius: var(--glass-radius-lg);
  background: var(--glass-menu-surface); color: var(--k-ink); box-shadow: var(--glass-menu-shadow);
}
.k-modal-close {
  flex: none; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--glass-radius-full); font-size: 1.4rem; line-height: 1; color: var(--k-ink-soft);
  transition: background-color var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease);
}
.k-modal-close:hover { background: var(--k-wash); color: var(--k-ink); }
@media print { .k-modal { display: none !important; } }

/* Bandeau d'essai : fine bannière de verre (tier chip, sans directive) sous la barre, discrète et non bloquante */
.k-notice-row { max-width: 72rem; margin: 0.75rem auto 0; padding: 0 1rem; display: flex; justify-content: flex-end; }
.k-trial {
  display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;
  padding: 0.35rem 0.9rem 0.35rem 0.8rem; font-size: 0.8rem; color: var(--k-ink-soft); text-decoration: none;
  transition: background var(--glass-duration) var(--glass-ease), color var(--k-fast) var(--k-ease);
}
.k-trial:hover { background: linear-gradient(180deg, var(--glass-tint-top-hover), var(--glass-tint-bottom-hover)); color: var(--k-ink); }
.k-trial strong { font-weight: 600; color: var(--k-ink); }
.k-trial-text { display: inline-flex; align-items: center; gap: 0.5rem; }
.k-trial .k-trial-cta { color: var(--k-accent-strong); font-weight: 500; white-space: nowrap; }
.k-trial-dot { flex: none; width: 0.45rem; height: 0.45rem; border-radius: var(--glass-radius-full); background: var(--k-accent); box-shadow: 0 0 0 3px var(--k-accent-soft); }

/* --- Conteneur principal : la carte de verre de la page (tier panneau + réfraction via liquid-glass.js) ---------- */
.k-main {
  max-width: 72rem; margin: 1rem auto 2rem; padding: 1.25rem 1rem;
  border-radius: var(--glass-radius-lg);
  overflow: hidden; /* les enfants n'écornent pas le rayon (recipes.md) */
}
@media (min-width: 640px) { .k-main { padding: 1.5rem; } }
@media (min-width: 768px) { .k-main { padding: 2rem; } }
/* Sur des écrans étroits la carte touche presque les bords : on garde une marge de respiration */
@media (max-width: 639px) { .k-main { margin-left: 0.75rem; margin-right: 0.75rem; } }
/* Une seule surface de verre par pile (SKILL.md règle 3, recipes.md « Nesting glass in glass ») : à l'intérieur de la
   carte principale, les surfaces des vues (glass-card, glass-column) ne sont plus du verre mais de simples voiles
   séparés par un filet — pas de flou, pas de reflet, pas d'ombre. */
.k-main .glass, .k-main .glass-card, .k-main .glass-column {
  background: var(--k-card-wash); border-color: var(--glass-border); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.k-main .k-lift:hover { background: var(--k-card-wash-hover); }
:root { --k-card-wash: rgba(255, 255, 255, 0.42); --k-card-wash-hover: rgba(255, 255, 255, 0.6); }
html[data-theme='dark'] { --k-card-wash: rgba(255, 255, 255, 0.05); --k-card-wash-hover: rgba(255, 255, 255, 0.09); }

/* --- Surfaces des pages (étapes AC2+) : alias des tiers du skill, pour les vues déjà passées au verre ---------- */
.glass, .glass-card {
  position: relative; border: 1px solid var(--glass-border); border-radius: var(--glass-radius);
  background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-rim-top), inset 0 0 0 1px var(--glass-rim-hairline), inset 0 -1px 0 var(--glass-rim-bottom);
  backdrop-filter: blur(3px) saturate(125%); -webkit-backdrop-filter: blur(3px) saturate(125%);
}
.glass-modal {
  border: 1px solid var(--glass-border); border-radius: var(--glass-radius-lg);
  background: linear-gradient(180deg, var(--glass-modal-tint), var(--glass-modal-tint)), linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow: var(--glass-menu-shadow), inset 0 1px 0 var(--glass-rim-top), inset 0 0 0 1px var(--glass-rim-hairline);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.glass-column { border: 1px solid var(--glass-border); border-radius: var(--glass-radius); background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom)); }
/* Bandeaux d'état : verre teinté (recipes.md « Colored glass » — seule la teinte change, reflet conservé) */
.glass-banner {
  position: relative; border: 1px solid var(--glass-border); border-radius: var(--glass-radius);
  background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow: inset 0 1px 0 var(--glass-rim-top);
  backdrop-filter: blur(6px) saturate(125%); -webkit-backdrop-filter: blur(6px) saturate(125%);
}
.glass-banner.k-tint-emerald { background: linear-gradient(155deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.08)); border-color: rgba(16, 185, 129, 0.35); }
.glass-banner.k-tint-sky { background: linear-gradient(155deg, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0.08)); border-color: rgba(14, 165, 233, 0.35); }
.glass-banner.k-tint-amber { background: linear-gradient(155deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08)); border-color: rgba(245, 158, 11, 0.4); }
.glass-banner.k-tint-red { background: linear-gradient(155deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.08)); border-color: rgba(239, 68, 68, 0.4); }
.glass-banner.k-strip { border-radius: 0; border-width: 0 0 1px 0; }
.glass-banner.k-strip-soft { background: linear-gradient(155deg, var(--k-accent-soft), transparent); border-color: var(--glass-border); }

.k-lift { transition: transform var(--glass-duration) var(--glass-ease), box-shadow var(--glass-duration) var(--glass-ease), background var(--glass-duration) var(--glass-ease); }
.k-lift:hover { transform: translateY(-2px); background: linear-gradient(180deg, var(--glass-tint-top-hover), var(--glass-tint-bottom-hover)); }
.k-lift:active { transform: translateY(0) scale(0.995); transition-duration: var(--k-fast); }
.k-table-wrap { overflow-x: auto; }
.k-table thead th { font-weight: 500; color: var(--k-ink-soft); }
.k-table tbody tr { transition: background-color var(--k-fast) var(--k-ease); }
.k-table tbody tr:hover { background: var(--k-wash); }
.k-table tbody tr + tr { border-top: 1px solid var(--glass-border); }
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem; border-radius: var(--glass-radius-full);
  font-size: 0.875rem; font-weight: 500; line-height: 1.25;
  transition: transform var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease), background var(--k-fast) var(--k-ease);
}
.k-btn-primary {
  color: #fff; background: linear-gradient(155deg, rgba(79, 70, 229, 0.9), rgba(67, 56, 202, 0.8)); border: 1px solid rgba(79, 70, 229, 0.5);
  box-shadow: 0 8px 20px rgba(67, 56, 202, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.k-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(67, 56, 202, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.k-btn-primary:active { transform: translateY(0) scale(0.98); }
.k-btn-ghost { color: var(--k-accent-strong); border: 1px solid var(--glass-border); background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom)); box-shadow: inset 0 1px 0 var(--glass-rim-top); }
.k-btn-ghost:hover { background: var(--k-wash); transform: translateY(-1px); }
.k-btn-ghost:active { transform: translateY(0) scale(0.98); }
.k-btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.k-btn-success {
  color: #fff; background: linear-gradient(155deg, rgba(5, 150, 105, 0.9), rgba(4, 120, 87, 0.8)); border: 1px solid rgba(5, 150, 105, 0.5);
  box-shadow: 0 8px 20px rgba(4, 120, 87, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.k-btn-success:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(4, 120, 87, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.k-btn-danger {
  color: #fff; background: linear-gradient(155deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.8)); border: 1px solid rgba(220, 38, 38, 0.5);
  box-shadow: 0 8px 20px rgba(185, 28, 28, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.k-btn-danger:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(185, 28, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.k-btn-dark {
  color: #fff; background: linear-gradient(155deg, rgba(51, 65, 85, 0.92), rgba(30, 41, 59, 0.85)); border: 1px solid rgba(30, 41, 59, 0.5);
  box-shadow: 0 8px 20px rgba(30, 41, 59, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.k-btn-dark:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(30, 41, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.k-btn-success:active, .k-btn-danger:active, .k-btn-dark:active { transform: translateY(0) scale(0.98); }
/* Créneau de visite : verre teinté indigo qui se remplit au survol */
.k-btn-slot { color: var(--k-accent-strong); border: 1px solid rgba(79, 70, 229, 0.35); background: linear-gradient(155deg, var(--k-accent-soft), transparent); box-shadow: inset 0 1px 0 var(--glass-rim-top); }
.k-btn-slot:hover { color: #fff; background: linear-gradient(155deg, rgba(79, 70, 229, 0.9), rgba(67, 56, 202, 0.8)); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(67, 56, 202, 0.3); }
.k-btn-slot:active { transform: translateY(0) scale(0.98); }
.k-btn[disabled], .k-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.k-chip { display: inline-flex; align-items: center; border-radius: var(--glass-radius-full); padding: 0.15rem 0.55rem; font-size: 0.75rem; font-weight: 500; }
/* Encart neutre à l'intérieur d'un panneau : un simple voile, jamais une seconde surface de verre */
.k-well { border-radius: var(--glass-radius); background: var(--k-wash); }
.glass-banner.k-tint-indigo { background: linear-gradient(155deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.07)); border-color: rgba(99, 102, 241, 0.35); }
.k-thead th { font-weight: 500; color: var(--k-ink-soft); border-bottom: 1px solid var(--glass-border); }
/* Option cliquable (radio / case dans un panneau) : bordure du verre, voile au survol, accent quand cochée */
.k-option { border: 1px solid var(--glass-border); border-radius: var(--glass-radius); transition: background-color var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease); }
.k-option:hover { background: var(--k-wash); }
.k-option.is-checked, .k-option:has(input:checked) { border-color: var(--k-accent); background: var(--k-accent-soft); box-shadow: 0 0 0 1px var(--k-accent-soft); }
/* Barre d'onglets collante (état des lieux) : léger givre pour rester lisible sur le contenu qui défile dessous */
.k-sticky-strip { background: color-mix(in srgb, var(--glass-page-bg) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Titre de page : entrée en fondu comme les cartes */
main > h1, main > div > h1, main > div > div > h1 { animation: k-fade-up var(--k-slow) var(--k-ease) both; }
/* Champs de saisie : même surface que les menus (voile de la surface + bordure du verre), anneau accent au focus */
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.k-select),
main select:not(.k-select), main textarea,
.k-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .k-modal textarea {
  border: 1px solid var(--glass-border); border-radius: var(--glass-radius);
  background-color: color-mix(in srgb, var(--glass-menu-surface) 70%, transparent); color: var(--k-ink);
  transition: box-shadow var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease), background-color var(--k-fast) var(--k-ease);
}
main input:focus, main select:focus, main textarea:focus, .k-modal input:focus, .k-modal textarea:focus { border-color: var(--k-accent); box-shadow: 0 0 0 3px var(--k-accent-soft); outline: none; background-color: color-mix(in srgb, var(--glass-menu-surface) 85%, transparent); }
main input[type="checkbox"], main input[type="radio"] { accent-color: var(--k-accent); }
main input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.35rem 0.75rem; border: 1px solid var(--glass-border); border-radius: var(--glass-radius-full);
  font: inherit; font-size: 0.8rem; color: var(--k-accent-strong); background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  cursor: pointer; transition: background-color var(--k-fast) var(--k-ease);
}
main input[type="file"]::file-selector-button:hover { background: var(--k-wash); }
main a { transition: color var(--k-fast) var(--k-ease), opacity var(--k-fast) var(--k-ease); }
main img { transition: opacity var(--k-fast) var(--k-ease), transform var(--k-base) var(--k-ease); }

/* --- Formulaire multi-étapes (candidature) : barre de progression animée, étapes qui glissent ------------------ */
.k-progress { position: relative; height: 0.4rem; border-radius: var(--glass-radius-full); background: var(--k-wash); overflow: hidden; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06); }
.k-progress-bar {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--glass-radius-full);
  background: linear-gradient(90deg, var(--k-accent-strong), var(--k-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: width var(--k-slow) var(--k-ease);
}
.k-steps { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; padding: 0; list-style: none; }
.k-steps li { flex: 1; display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: 0.78rem; color: var(--k-ink-soft); transition: color var(--k-base) var(--k-ease); }
.k-steps li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-step-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: var(--glass-radius-full);
  border: 1px solid var(--glass-border); background: linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow: inset 0 1px 0 var(--glass-rim-top); font-size: 0.7rem; font-weight: 600;
  transition: background var(--k-base) var(--k-ease), color var(--k-base) var(--k-ease), border-color var(--k-base) var(--k-ease), transform var(--k-base) var(--k-ease);
}
.k-steps li.is-active { color: var(--k-accent-strong); font-weight: 600; }
.k-steps li.is-active .k-step-dot { color: #fff; border-color: transparent; background: linear-gradient(155deg, rgba(79, 70, 229, 0.9), rgba(67, 56, 202, 0.8)); transform: scale(1.1); }
.k-steps li.is-done .k-step-dot { color: var(--k-success); border-color: rgba(16, 185, 129, 0.4); background: linear-gradient(155deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08)); }
.k-t-step { transition: opacity var(--k-base) var(--k-ease), transform var(--k-base) var(--k-ease); }
.k-t-step-hidden { opacity: 0; transform: translateX(14px); }
.k-t-step-shown { opacity: 1; transform: none; }

/* Retour visuel : bouton « Copier » (Copié ✓) */
@keyframes k-pop { 0% { transform: scale(0.92); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.is-copied { color: var(--k-success) !important; animation: k-pop var(--k-base) var(--k-ease); }
.k-code { font-size: 0.75rem; border-radius: 6px; padding: 0.25rem 0.5rem; background: var(--k-wash); }
.k-select { border-radius: var(--glass-radius); border-color: var(--glass-border); background-color: color-mix(in srgb, var(--glass-menu-surface) 70%, transparent); transition: box-shadow var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease); }
.k-select:focus { border-color: var(--k-accent); box-shadow: 0 0 0 3px var(--k-accent-soft); outline: none; }

/* --- Formulaires : état de chargement (posé par le script du layout) ------------------------------------------- */
.k-btn.is-loading, button.is-loading, [type="submit"].is-loading { position: relative; pointer-events: none; opacity: 0.75; color: transparent !important; }
button.is-loading::after, [type="submit"].is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor; border-color: rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) transparent transparent;
  border-radius: var(--glass-radius-full); animation: k-spin 700ms linear infinite; color: var(--k-ink);
}
button.is-loading:not(.k-btn-primary):not(.bg-indigo-600):not(.bg-red-600)::after { border-color: var(--k-accent) var(--k-accent) transparent transparent; }

/* --- Animations ------------------------------------------------------------------------------------------------ */
@keyframes k-spin { to { transform: rotate(360deg); } }
/* Pas d'image finale explicite : l'élément retrouve sa propre opacité (opacity-70, x-show…) une fois l'animation jouée */
@keyframes k-fade-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes k-toast-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes k-toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -8px); } }
.k-fade-up { animation: k-fade-up var(--k-slow) var(--k-ease) both; }
/* Cascade légère : chaque enfant direct apparaît 35 ms après le précédent (plafonnée au 12e) */
.k-stagger > * { animation: k-fade-up var(--k-slow) var(--k-ease) both; }
.k-stagger > :nth-child(2) { animation-delay: 35ms; }
.k-stagger > :nth-child(3) { animation-delay: 70ms; }
.k-stagger > :nth-child(4) { animation-delay: 105ms; }
.k-stagger > :nth-child(5) { animation-delay: 140ms; }
.k-stagger > :nth-child(6) { animation-delay: 175ms; }
.k-stagger > :nth-child(7) { animation-delay: 210ms; }
.k-stagger > :nth-child(8) { animation-delay: 245ms; }
.k-stagger > :nth-child(9) { animation-delay: 280ms; }
.k-stagger > :nth-child(10) { animation-delay: 315ms; }
.k-stagger > :nth-child(11) { animation-delay: 350ms; }
.k-stagger > :nth-child(n+12) { animation-delay: 385ms; }

/* Bandeau de confirmation : tier menu (lisible sur n'importe quel contenu), glisse depuis le haut puis s'estompe */
.k-toast {
  position: fixed; top: 4.75rem; left: 50%; z-index: 70;
  max-width: min(36rem, calc(100vw - 2rem)); padding: 0.65rem 1rem;
  font-size: 0.875rem; color: var(--k-success);
  animation: k-toast-in var(--k-slow) var(--k-ease) both, k-toast-out var(--k-slow) var(--k-ease) 4s forwards;
}
.k-toast a { font-weight: 500; text-decoration: underline; }

/* Transitions Alpine (menus, tiroir, voile) */
.k-t-enter { transition: opacity var(--k-base) var(--k-ease), transform var(--k-base) var(--k-ease); }
.k-t-leave { transition: opacity var(--k-fast) var(--k-ease), transform var(--k-fast) var(--k-ease); }
.k-t-hidden { opacity: 0; transform: translateY(-4px) scale(0.98); }
.k-t-shown { opacity: 1; transform: none; }
.k-t-sheet { transition: opacity var(--k-base) var(--k-ease), transform var(--k-base) var(--k-ease); }
.k-t-sheet-hidden { opacity: 0; transform: translateY(-10px) scale(0.99); }
.k-t-sheet-shown { opacity: 1; transform: none; }
.k-t-fade { transition: opacity var(--k-slow) var(--k-ease); }
.k-t-fade-hidden { opacity: 0; }
.k-t-fade-shown { opacity: 1; }

/* --- Étape AC2 : composants des pages ------------------------------------------------------------------------- */

/* Pastilles de score (Kanban, fiche candidat) : tier chip du skill en verre coloré (recipes.md « Colored glass ») —
   seule la teinte change, le reflet supérieur reste ; un point plein rappelle la couleur pour les daltoniens. */
.k-score {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  padding: 0.15rem 0.6rem 0.15rem 0.5rem; border: 1px solid; border-radius: var(--glass-radius-full);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px) saturate(125%); -webkit-backdrop-filter: blur(6px) saturate(125%);
}
.k-score::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: var(--glass-radius-full); background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); }
.k-score-vert { color: #065f46; background: linear-gradient(155deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.12)); border-color: rgba(16, 185, 129, 0.45); }
.k-score-orange { color: #9a3412; background: linear-gradient(155deg, rgba(249, 115, 22, 0.3), rgba(249, 115, 22, 0.12)); border-color: rgba(249, 115, 22, 0.45); }
.k-score-rouge { color: #991b1b; background: linear-gradient(155deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.12)); border-color: rgba(239, 68, 68, 0.45); }
html[data-theme='dark'] .k-score-vert { color: #6ee7b7; }
html[data-theme='dark'] .k-score-orange { color: #fdba74; }
html[data-theme='dark'] .k-score-rouge { color: #fca5a5; }

/* Jauges : barre fine qui se remplit au chargement (scaleX, sans reflow) — répartition du Kanban, taux d'encaissement,
   poids d'une catégorie de dépenses. La largeur finale vient de --k-meter (0 à 100 %). */
.k-meter { position: relative; height: 0.3rem; border-radius: var(--glass-radius-full); background: var(--k-wash); overflow: hidden; }
.k-meter-bar {
  position: absolute; inset: 0; width: var(--k-meter, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--k-accent-strong), var(--k-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform-origin: left center; animation: k-grow-x var(--k-slow) var(--k-ease) both;
  animation-delay: var(--k-meter-delay, 120ms);
}
.k-meter-bar.k-meter-emerald { background: linear-gradient(90deg, #059669, #34d399); }
.k-meter-bar.k-meter-amber { background: linear-gradient(90deg, #d97706, #fbbf24); }
.k-meter-bar.k-meter-red { background: linear-gradient(90deg, #dc2626, #f87171); }
@keyframes k-grow-x { from { transform: scaleX(0); } }
/* Barres du graphique SVG (trésorerie) : poussent depuis l'axe, un mois après l'autre (--k-i = index du mois) */
@keyframes k-grow-y { from { transform: scaleY(0); } }
.k-bar { transform-box: fill-box; transform-origin: center bottom; animation: k-grow-y var(--k-slow) var(--k-ease) both; animation-delay: calc(var(--k-i, 0) * 25ms); }
/* Compteurs animés (data-count-to, script du layout) : chiffres tabulaires pour que la largeur ne saute pas */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* Reflet au survol des cartes : une bande claire en diagonale qui se révèle (au-dessus du contenu, sans intercepter
   le pointeur) — s'ajoute à l'élévation de .k-lift. */
.k-lift::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 32%, var(--k-sheen) 50%, transparent 68%);
  opacity: 0; transition: opacity var(--k-base) var(--k-ease);
}
.k-lift:hover::after { opacity: 1; }
:root { --k-sheen: rgba(255, 255, 255, 0.35); }
html[data-theme='dark'] { --k-sheen: rgba(255, 255, 255, 0.1); }

/* Pression au clic : tous les boutons de la page, pas seulement les .k-btn */
main button:not(.k-btn):not([disabled]):not(.is-loading) { transition: transform var(--k-fast) var(--k-ease); }
main button:not([disabled]):not(.is-loading):active { transform: scale(0.97); }

/* Lisibilité sur le verre : les gris clairs de Tailwind sont trop pâles sur une surface translucide (slate-400 ≈ 2,4:1,
   slate-500 ≈ 4,4:1 sur la page claire) → remontés aux gris de la charte (≥ 4,5:1 : #5f6577 = 5,4:1, --k-ink-soft = 6,4:1).
   La hiérarchie (400 plus discret que 500) est conservée. */
:root { --k-ink-muted: #5f6577; }
html[data-theme='dark'] { --k-ink-muted: #9296a6; }
.k-main .text-slate-400, .k-main .text-slate-300, .k-modal .text-slate-400 { color: var(--k-ink-muted); }
.k-main .text-slate-500, .k-modal .text-slate-500 { color: var(--k-ink-soft); }
.k-main .placeholder-slate-400::placeholder, .k-main input::placeholder, .k-main textarea::placeholder, .k-modal input::placeholder, .k-modal textarea::placeholder { color: var(--k-ink-muted); opacity: 1; }
/* Thème sombre : les gris foncés de Tailwind disparaîtraient sur la page sombre → encre de la charte */
html[data-theme='dark'] .k-main :is(.text-slate-600, .text-slate-700, .text-slate-800, .text-slate-900) { color: var(--k-ink); }

/* Petit écran : la réfraction est coupée (liquid-glass.js) et le verre reçoit un voile plus opaque, un flou plus
   large (moins de détail du fond derrière un texte plus serré) — les libellés restent lisibles sur la partie la plus
   chargée du maillage. */
:root { --k-mobile-frost: rgba(255, 255, 255, 0.5); }
html[data-theme='dark'] { --k-mobile-frost: rgba(10, 10, 14, 0.55); }
@media (max-width: 639px) {
  .k-main {
    background: linear-gradient(180deg, var(--k-mobile-frost), var(--k-mobile-frost)), linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
    backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
  :root { --k-card-wash: rgba(255, 255, 255, 0.6); --k-card-wash-hover: rgba(255, 255, 255, 0.72); }
  html[data-theme='dark'] { --k-card-wash: rgba(255, 255, 255, 0.07); --k-card-wash-hover: rgba(255, 255, 255, 0.11); }
  .glass-banner, .k-score, .liquid-glass-chip { backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
  .k-lift:hover { transform: none; } /* pas de survol au doigt */
}

/* --- Thème sombre : utilitaires Tailwind de couleur ramenés à des valeurs lisibles (étape AC2) ------------------
   Les vues gardent leurs classes text-slate-* / text-X-700 / bg-X-100 ; en sombre, ces gris et ces pastilles sont
   remplacés par des teintes claires (contraste AA sur la page #0b0b12). La spécificité html[data-theme] + classe passe
   devant la feuille générée par le CDN Tailwind. */
html[data-theme='dark'] .text-slate-900, html[data-theme='dark'] .text-slate-800 { color: var(--k-ink); }
html[data-theme='dark'] .text-slate-700 { color: #d3d6de; }
html[data-theme='dark'] .text-slate-600, html[data-theme='dark'] .text-slate-500 { color: var(--k-ink-soft); }
html[data-theme='dark'] .text-slate-400 { color: #8b91a2; }
html[data-theme='dark'] .text-slate-300 { color: rgba(255, 255, 255, 0.18); }
html[data-theme='dark'] .text-indigo-700, html[data-theme='dark'] .text-indigo-800, html[data-theme='dark'] .text-indigo-900, html[data-theme='dark'] .hover\:text-indigo-700:hover { color: var(--k-accent-strong); }
html[data-theme='dark'] .text-green-700, html[data-theme='dark'] .text-green-800, html[data-theme='dark'] .text-green-900,
html[data-theme='dark'] .text-emerald-600, html[data-theme='dark'] .text-emerald-700, html[data-theme='dark'] .text-emerald-800, html[data-theme='dark'] .text-emerald-900 { color: #6ee7b7; }
html[data-theme='dark'] .text-amber-700, html[data-theme='dark'] .text-amber-800, html[data-theme='dark'] .text-amber-900, html[data-theme='dark'] .hover\:text-amber-700:hover { color: #fcd34d; }
html[data-theme='dark'] .text-orange-700, html[data-theme='dark'] .text-orange-800 { color: #fdba74; }
html[data-theme='dark'] .text-red-600, html[data-theme='dark'] .text-red-700, html[data-theme='dark'] .text-red-800, html[data-theme='dark'] .text-red-900 { color: #fca5a5; }
html[data-theme='dark'] .text-sky-700, html[data-theme='dark'] .text-sky-800, html[data-theme='dark'] .text-sky-900, html[data-theme='dark'] .hover\:text-sky-700:hover { color: #7dd3fc; }
html[data-theme='dark'] .bg-green-100, html[data-theme='dark'] .bg-emerald-100, html[data-theme='dark'] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.18); }
html[data-theme='dark'] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18); }
html[data-theme='dark'] .bg-amber-100, html[data-theme='dark'] .bg-amber-200, html[data-theme='dark'] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.18); }
html[data-theme='dark'] .bg-red-100, html[data-theme='dark'] .bg-red-50 { background-color: rgba(239, 68, 68, 0.16); }
html[data-theme='dark'] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18); }
html[data-theme='dark'] .bg-indigo-100, html[data-theme='dark'] .bg-indigo-50, html[data-theme='dark'] .bg-indigo-200 { background-color: rgba(129, 140, 248, 0.16); }
html[data-theme='dark'] .bg-green-50 { background-color: rgba(16, 185, 129, 0.12); }
html[data-theme='dark'] .bg-slate-50, html[data-theme='dark'] .bg-slate-100, html[data-theme='dark'] .bg-slate-200, html[data-theme='dark'] .hover\:bg-slate-50:hover, html[data-theme='dark'] .hover\:bg-slate-100:hover { background-color: var(--k-wash); }
html[data-theme='dark'] .bg-white { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme='dark'] .border-slate-100, html[data-theme='dark'] .border-slate-200, html[data-theme='dark'] .border-slate-300, html[data-theme='dark'] .border-slate-400,
html[data-theme='dark'] .border-indigo-100, html[data-theme='dark'] .border-indigo-200, html[data-theme='dark'] .border-t, html[data-theme='dark'] .border-b, html[data-theme='dark'] .border:not([class*='border-']) { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme='dark'] .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme='dark'] .border-emerald-600, html[data-theme='dark'] .border-emerald-200, html[data-theme='dark'] .border-green-200 { border-color: rgba(16, 185, 129, 0.45); }
html[data-theme='dark'] .border-amber-200, html[data-theme='dark'] .border-amber-300, html[data-theme='dark'] .border-amber-400 { border-color: rgba(245, 158, 11, 0.45); }
html[data-theme='dark'] .border-red-200, html[data-theme='dark'] .border-red-600 { border-color: rgba(239, 68, 68, 0.45); }
html[data-theme='dark'] .border-indigo-300, html[data-theme='dark'] .border-indigo-500, html[data-theme='dark'] .border-indigo-600 { border-color: rgba(129, 140, 248, 0.5); }
html[data-theme='dark'] img, html[data-theme='dark'] iframe { color-scheme: dark; }

/* Bouton clair / sombre de la barre : une icône par thème, légère rotation au survol */
.k-theme-toggle svg { width: 1.15rem; height: 1.15rem; transition: transform var(--k-base) var(--k-ease); }
.k-theme-toggle:hover svg { transform: rotate(20deg); }
html[data-theme='light'] .k-theme-toggle .k-icon-moon, html[data-theme='dark'] .k-theme-toggle .k-icon-sun { display: none; }
/* Pastilles de la barre : apparition en pop, la pastille mobile pulse deux fois */
@keyframes k-pop-in { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes k-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.06); } }
.k-badge { animation: k-pop-in var(--k-slow) var(--k-ease) both; }
.k-badge.k-badge-dot { animation: k-pop-in var(--k-slow) var(--k-ease) both, k-pulse 2.4s ease-in-out 1s 2; }

/* --- Squelettes de chargement en verre (images de galerie, carte) : miroitement sur le voile du verre ------------- */
@keyframes k-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
:root { --k-skeleton-a: rgba(255, 255, 255, 0.35); --k-skeleton-b: rgba(255, 255, 255, 0.7); }
html[data-theme='dark'] { --k-skeleton-a: rgba(255, 255, 255, 0.05); --k-skeleton-b: rgba(255, 255, 255, 0.12); }
.k-skeleton {
  position: relative; overflow: hidden; border-radius: 6px;
  background: linear-gradient(90deg, var(--k-skeleton-a) 25%, var(--k-skeleton-b) 50%, var(--k-skeleton-a) 75%);
  background-size: 200% 100%; animation: k-shimmer 1.6s linear infinite;
  box-shadow: inset 0 1px 0 var(--glass-rim-top), inset 0 0 0 1px var(--glass-rim-hairline);
}
.k-skeleton.is-loaded { animation: none; background: transparent; box-shadow: none; }
.k-skeleton-line { height: 0.8em; margin: 0.35em 0; }
img.k-img-fade { opacity: 0; transition: opacity var(--k-slow) var(--k-ease); }
img.k-img-fade.is-loaded { opacity: 1; }

/* Impression : ni verre ni fond maillé */
@media print {
  .liquid-glass-backdrop { background: #fff; color: #000; }
  .liquid-glass-backdrop::before { display: none; }
  .glass, .glass-card, .glass-banner, .glass-modal, .glass-column { background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .k-main { margin: 0; padding: 0; border: 0; background: #fff; box-shadow: none; backdrop-filter: none !important; -webkit-backdrop-filter: none; }
}

/* Mouvement réduit : tout est immédiat */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .k-stagger > *, .k-fade-up { animation: none; }
  .k-toast { animation: none; }
  .k-meter-bar, .k-bar, .k-badge, .k-skeleton { animation: none; }
  .k-theme-toggle:hover svg { transform: none; }
  .k-lift::after { display: none; }
  main button:not([disabled]):not(.is-loading):active { transform: none; }
  .k-lift:hover, .k-btn-primary:hover, .k-btn-ghost:hover, .k-btn-success:hover, .k-btn-danger:hover, .k-btn-dark:hover, .k-btn-slot:hover { transform: none; }
  .is-copied { animation: none; }
  .k-t-step-hidden { transform: none; }
  .k-steps li.is-active .k-step-dot { transform: none; }
}