/* ============================================================
   AstonLegacy — Design System Layer v0.1
   Lot 2 : tokens + composants transverses + motion douce.
   Non destructif : cette couche complète les classes existantes.
   ============================================================ */

:root {
  /* Core surfaces */
  --al-ink: var(--ink, #131514);
  --al-muted: var(--muted, #676C68);
  --al-subtle: var(--subtle, #9CA29C);
  --al-paper: #F6F7F4;
  --al-surface: #FFFFFF;
  --al-gold: var(--color-gold-deep, #7A5E16);
  --al-line: var(--line, rgba(19, 21, 20, 0.10));
  --al-line-soft: var(--line-soft, rgba(19, 21, 20, 0.06));

  /* Liquid glass recipe */
  --al-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.44));
  --al-glass-border: rgba(255, 255, 255, 0.28);
  --al-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 22px 70px -42px rgba(19,21,20,0.62);
  --al-glass-blur: 14px;

  /* Shape */
  --al-radius-xs: 8px;
  --al-radius-sm: 12px;
  --al-radius-md: 18px;
  --al-radius-lg: 24px;
  --al-radius-pill: 999px;

  /* Spacing scale */
  --al-space-1: 4px;
  --al-space-2: 8px;
  --al-space-3: 12px;
  --al-space-4: 16px;
  --al-space-5: 24px;
  --al-space-6: 32px;
  --al-space-7: 48px;

  /* Motion */
  --al-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --al-spring: var(--spring-soft, cubic-bezier(0.22, 1, 0.36, 1));
  --al-dur-fast: 160ms;
  --al-dur-med: 280ms;
  --al-dur-slow: 520ms;
}

/* Shared, opt-in liquid glass primitive */
.al-glass,
.al-panel,
.al-card--glass {
  isolation: isolate;
  background: var(--al-glass-bg);
  border: 1px solid var(--al-glass-border);
  -webkit-backdrop-filter: blur(var(--al-glass-blur)) saturate(1.04) brightness(1.12);
          backdrop-filter: blur(var(--al-glass-blur)) saturate(1.04) brightness(1.12);
  box-shadow: var(--al-glass-shadow);
}

.al-panel {
  border-radius: var(--al-radius-lg);
  padding: clamp(22px, 3vw, 36px);
}

.al-card {
  position: relative;
  border-radius: var(--al-radius-md);
  border: 1px solid var(--al-line-soft);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 18px 56px -44px rgba(19,21,20,0.65);
  transition: transform var(--al-dur-med) var(--al-ease), box-shadow var(--al-dur-med) var(--al-ease), border-color var(--al-dur-med) var(--al-ease);
}

.al-card:hover,
.al-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(122,94,22,0.20);
  box-shadow: 0 24px 72px -46px rgba(19,21,20,0.72);
}

.al-btn,
.model-btn,
.ct-send,
.rev-sort,
.archive-card__cta,
.sidebar-share__btn,
.btn-gold {
  --al-btn-bg: rgba(255,255,255,0.68);
  --al-btn-fg: var(--al-ink);
  --al-btn-bd: rgba(19,21,20,0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  border-radius: var(--al-radius-pill);
  border: 1px solid var(--al-btn-bd);
  background: var(--al-btn-bg);
  color: var(--al-btn-fg);
  font-family: var(--font-nb, var(--font-sans));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--al-dur-med) var(--al-spring), background var(--al-dur-med) ease, color var(--al-dur-med) ease, border-color var(--al-dur-med) ease, box-shadow var(--al-dur-med) ease, gap var(--al-dur-med) var(--al-spring);
}

.al-btn:hover,
.model-btn:hover,
.ct-send:hover,
.rev-sort:hover,
.archive-card__cta:hover,
.sidebar-share__btn:hover,
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(19,21,20,0.55);
}

.al-btn:focus-visible,
.model-btn:focus-visible,
.ct-send:focus-visible,
.rev-cat:focus-visible,
.rev-sort:focus-visible,
.archive-card__cta:focus-visible,
.sidebar-share__btn:focus-visible,
.btn-gold:focus-visible {
  outline: 2px solid rgba(122, 94, 22, 0.55);
  outline-offset: 3px;
}

.al-btn--primary,
.model-btn--primary,
.ct-send,
.btn-gold {
  --al-btn-bg: rgba(19,21,20,0.92);
  --al-btn-fg: #FFFFFF;
  --al-btn-bd: rgba(19,21,20,0.88);
}

.al-btn--ghost,
.model-btn--ghost {
  --al-btn-bg: rgba(255,255,255,0.48);
  --al-btn-fg: var(--al-ink);
  --al-btn-bd: rgba(19,21,20,0.10);
}

.al-btn--gold {
  --al-btn-bg: rgba(122,94,22,0.12);
  --al-btn-fg: var(--al-gold);
  --al-btn-bd: rgba(122,94,22,0.20);
}

.al-chip,
.ct-chip,
.rev-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: var(--al-radius-pill);
  border: 1px solid rgba(19,21,20,0.08);
  background: rgba(255,255,255,0.54);
  color: var(--al-muted);
  font-family: var(--font-nb, var(--font-sans));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: transform var(--al-dur-med) var(--al-spring), color var(--al-dur-med) ease, background var(--al-dur-med) ease, border-color var(--al-dur-med) ease;
}

.al-chip:hover,
.ct-chip:hover,
.rev-cat:hover {
  transform: translateY(-1px);
  color: var(--al-ink);
  border-color: rgba(122,94,22,0.16);
}

.al-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--al-gold);
  font-family: var(--font-nb, var(--font-sans));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.al-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .45; }

.al-motion-rise,
.al-design-lab [data-al-reveal] {
  opacity: 0;
  transform: translateY(16px);
  animation: al-motion-rise var(--al-dur-slow) var(--al-ease) forwards;
}
@keyframes al-motion-rise {
  to { opacity: 1; transform: translateY(0); }
}

.al-liquid-sheen {
  position: relative;
  overflow: hidden;
}
.al-liquid-sheen::after {
  content: '';
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.44), transparent);
  opacity: 0;
  pointer-events: none;
}
.al-liquid-sheen:hover::after { animation: al-sheen 900ms var(--al-ease); }
@keyframes al-sheen {
  0% { opacity: 0; left: -55%; }
  18% { opacity: .8; }
  100% { opacity: 0; left: 115%; }
}

/* Existing component harmonisation — conservative overrides */
.model-btn,
.ct-send { padding-inline: 18px; }
.rev-sort { min-height: 30px; padding-inline: 14px; }
.archive-card__cta { padding: 0; border: 0; background: transparent; min-height: 0; }
.sidebar-share__btn { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .al-btn,
  .al-card,
  .al-chip,
  .al-panel,
  .al-glass,
  .model-btn,
  .ct-send,
  .ct-send i,
  .rev-cat,
  .rev-sort,
  .archive-card__cta,
  .sidebar-share__btn,
  .btn-gold,
  .al-liquid-sheen::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  .al-motion-rise,
  .al-design-lab [data-al-reveal] { opacity: 1; transform: none; animation: none !important; }
}

/* Design Lab template */
.al-design-lab {
  --bg: var(--al-paper);
  min-height: 100svh;
  padding: calc(var(--nav-h, 56px) + 46px) clamp(18px, 4vw, 64px) 72px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,0.95), transparent 24vw),
    radial-gradient(circle at 84% 18%, rgba(122,94,22,0.10), transparent 22vw),
    linear-gradient(180deg, #F3F4F1, #ECEDEA);
}
.al-dl-hero { max-width: 980px; margin: 0 auto 52px; }
.al-dl-hero h1 { margin: 14px 0 18px; max-width: 820px; }
.al-dl-hero p { max-width: 680px; }
.al-dl-section { max-width: 980px; margin: 0 auto 48px; }
.al-dl-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.al-dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.al-dl-grid--buttons { grid-template-columns: repeat(3, minmax(0, max-content)); align-items: center; }
.al-design-lab .al-card { padding: clamp(20px, 3vw, 30px); min-height: 220px; }
.al-design-lab .al-card h2 { font-size: clamp(25px, 3vw, 38px); margin: 26px 0 12px; }
.al-design-lab [data-al-reveal] {
  animation-delay: var(--al-reveal-delay, 0ms);
}
.al-design-lab [data-al-reveal]:not(.is-revealed) {
  animation-play-state: paused;
}
.al-design-lab [data-al-reveal].is-revealed {
  animation-play-state: running;
}
@media (max-width: 760px) {
  .al-dl-grid,
  .al-dl-grid--buttons { grid-template-columns: 1fr; }
  .al-dl-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Lot 2b — Design Lab liquid validation layer
   Image-backed glass, organic buttons, and nav indicator concept.
   ============================================================ */
.al-dl-visual-field {
  position: relative;
  overflow: hidden;
  border-radius: clamp(26px, 4vw, 42px);
  min-height: 520px;
  padding: clamp(24px, 4vw, 56px);
  display: grid;
  align-items: end;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(246,247,244,0.12), rgba(246,247,244,0.36)),
    url('https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=1800&q=80') center / cover;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 32px 90px -62px rgba(19,21,20,0.70);
}
.al-dl-visual-field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.72), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(201,168,76,0.18), transparent 26%),
    linear-gradient(180deg, rgba(19,21,20,0.06), rgba(19,21,20,0.22));
}
.al-dl-visual-card {
  max-width: 760px;
  border-radius: clamp(22px, 3vw, 34px);
  padding: clamp(22px, 3vw, 38px);
  color: var(--al-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.22));
  border: 1px solid rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.08) brightness(1.12);
          backdrop-filter: blur(22px) saturate(1.08) brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -24px 70px rgba(255,255,255,0.10),
    0 30px 90px -60px rgba(0,0,0,0.82);
}
.al-dl-visual-card h2 { margin: 8px 0 10px; font-size: clamp(32px, 5vw, 72px); letter-spacing: -0.06em; line-height: 0.92; }
.al-dl-visual-card p { max-width: 62ch; color: rgba(19,21,20,0.74); }

.al-btn--liquid,
.al-btn--letters,
.al-btn--droplet {
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.al-btn--liquid::before {
  content: '';
  position: absolute;
  inset: auto -18% -74% -18%;
  height: 155%;
  border-radius: 45% 48% 42% 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.72), transparent 22%),
    linear-gradient(135deg, rgba(122,94,22,0.98), rgba(201,168,76,0.80));
  transform: translateY(72%) rotate(0deg) scale(1.04);
  opacity: 0.92;
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 760ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.al-btn--liquid:hover::before,
.al-btn--liquid:focus-visible::before {
  transform: translateY(0%) rotate(7deg) scale(1.12);
  border-radius: 38% 58% 42% 62%;
  animation: alLiquidBlob 1.9s ease-in-out infinite alternate;
}
.al-btn--liquid:hover,
.al-btn--liquid:focus-visible { color: #fff; border-color: rgba(122,94,22,0.32); }

.al-btn--letters .al-btn__text {
  display: inline-flex;
  gap: 0.01em;
  line-height: 1;
}
.al-btn--letters .al-btn__char {
  display: inline-block;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 520ms ease;
  transition-delay: calc(var(--al-char-index, 0) * 22ms);
}
.al-btn--letters:hover .al-btn__char,
.al-btn--letters:focus-visible .al-btn__char {
  animation: alLettersRise 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--al-char-index, 0) * 24ms);
}

.al-btn--droplet::before,
.al-btn--droplet::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.al-btn--droplet::before {
  width: 22px;
  height: 22px;
  left: var(--al-ripple-x, 50%);
  top: var(--al-ripple-y, 50%);
  background: radial-gradient(circle, rgba(255,255,255,0.70), rgba(201,168,76,0.26) 44%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.al-btn--droplet.is-rippling::before { animation: alDropletRipple 760ms ease-out; }
.al-btn--droplet::after {
  inset: 7px;
  border: 1px solid rgba(255,255,255,0.40);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 280ms ease, transform 520ms cubic-bezier(0.16,1,0.3,1);
}
.al-btn--droplet:hover::after,
.al-btn--droplet:focus-visible::after { opacity: 1; transform: scale(1); }

/* Design Lab nav indicator proposal. Scoped to the demo only: the production header nav is owned by style.css + nav.js. */
.al-dl-nav-demo .nav-ind {
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.92), transparent 23%),
    radial-gradient(circle at 74% 78%, rgba(201,168,76,0.20), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.38));
  border: 1px solid rgba(255,255,255,0.46);
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
          backdrop-filter: blur(16px) saturate(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -8px 18px rgba(201,168,76,0.10),
    0 12px 28px -22px rgba(19,21,20,0.55);
  transition:
    transform 720ms cubic-bezier(0.18, 1.34, 0.28, 1),
    width 720ms cubic-bezier(0.18, 1.34, 0.28, 1),
    opacity 260ms ease,
    border-radius 520ms ease;
}
.al-dl-nav-demo .nav-ind::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.al-dl-nav-demo .nav-ind::before {
  width: 38%;
  height: 70%;
  left: 9%;
  top: 12%;
  background: radial-gradient(circle, rgba(255,255,255,0.74), transparent 68%);
  filter: blur(0.4px);
  animation: alNavDropletFloat 3.8s ease-in-out infinite alternate;
}
.al-dl-nav-demo .nav-ind::after {
  width: 18px;
  height: 18px;
  right: 12%;
  bottom: 8%;
  background: rgba(255,255,255,0.38);
  box-shadow: 0 0 18px rgba(255,255,255,0.36);
  animation: alNavDropletFloat 4.6s ease-in-out -1.2s infinite alternate-reverse;
}
.al-dl-nav-demo {
  display: inline-flex;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px;
  gap: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(255,255,255,0.34);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
          backdrop-filter: blur(18px) saturate(1.08);
}
.al-dl-nav-demo li { position: relative; z-index: 1; }
.al-dl-nav-demo a { display: block; padding: 9px 22px; color: var(--al-ink); text-decoration: none; font-size: 13px; border-radius: 999px; }
.al-dl-nav-demo .nav-ind { top: 8px; height: calc(100% - 16px); opacity: 1; width: 92px; transform: translateX(98px); }

@keyframes alLiquidBlob {
  0% { border-radius: 38% 58% 42% 62%; transform: translateY(0%) rotate(3deg) scale(1.12); }
  100% { border-radius: 62% 38% 58% 42%; transform: translateY(-3%) rotate(-4deg) scale(1.15); }
}
@keyframes alLettersRise {
  0% { transform: translateY(0); opacity: 1; }
  42% { transform: translateY(-128%); opacity: 0; }
  43% { transform: translateY(128%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes alDropletRipple {
  0% { opacity: 0.86; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}
@keyframes alNavDropletFloat {
  0% { transform: translate3d(-2px, -1px, 0) scale(0.92); opacity: 0.72; }
  100% { transform: translate3d(5px, 2px, 0) scale(1.12); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .al-btn--liquid::before,
  .al-btn--letters .al-btn__char,
  .al-btn--droplet::before,
    .al-dl-nav-demo .nav-ind::after { animation: none !important; transition-duration: 1ms !important; }
}

/* ============================================================
   Lot 2c — Optical Liquid Glass (SVG displacement + organic controls)
   Experimental enhancement inspired by SVG displacement-map refraction.
   Chrome gets backdrop-filter:url(); other browsers keep the layered fallback.
   ============================================================ */
:root {
  --al-optic-refraction: 18px;
  --al-optic-blur: 8px;
  --al-optic-saturate: 1.28;
  --al-liquid-fill: var(--al-gold);
}

.al-svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.al-optic-glass,
.al-dl-visual-card,
.al-dl-nav-demo .nav-ind {
  position: relative;
  isolation: isolate;
}

@supports ((backdrop-filter: url('#al-liquid-glass-filter')) or (-webkit-backdrop-filter: url('#al-liquid-glass-filter'))) {
  .al-optic-glass,
  .al-dl-visual-card {
    -webkit-backdrop-filter:
      url('#al-liquid-glass-filter')
      blur(var(--al-optic-blur))
      saturate(var(--al-optic-saturate))
      brightness(1.08);
            backdrop-filter:
      url('#al-liquid-glass-filter')
      blur(var(--al-optic-blur))
      saturate(var(--al-optic-saturate))
      brightness(1.08);
  }

    .al-dl-nav-demo .nav-ind {
    -webkit-backdrop-filter:
      url('#al-liquid-nav-filter')
      blur(7px)
      saturate(1.32)
      brightness(1.10);
            backdrop-filter:
      url('#al-liquid-nav-filter')
      blur(7px)
      saturate(1.32)
      brightness(1.10);
  }
}

.al-optic-glass::before,
.al-dl-visual-card::before,
.al-dl-nav-demo .nav-ind::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at calc(var(--al-fluid-x, 34) * 1%) calc(var(--al-fluid-y, 24) * 1%), rgba(255,255,255,0.88), transparent 16%),
    radial-gradient(circle at 82% 88%, rgba(201,168,76,0.18), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.10));
  filter: url('#al-liquid-edge-filter');
  opacity: 0.92;
  mix-blend-mode: screen;
}

.al-optic-glass::after,
.al-dl-visual-card::after,
.al-dl-nav-demo .nav-ind::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), transparent 32%),
    radial-gradient(circle at calc(var(--al-fluid-x, 50) * 1%) calc(var(--al-fluid-y, 50) * 1%), rgba(255,255,255,0.62), transparent 10%),
    radial-gradient(circle at 100% 100%, rgba(122,94,22,0.12), transparent 30%);
  opacity: 0.56;
  mask: linear-gradient(#000, transparent 78%);
}

.al-optic-glass.is-fluid-active,
.al-dl-visual-card.is-fluid-active,
.al-dl-nav-demo .nav-ind.is-fluid-active {
  --al-optic-blur: 6px;
  --al-optic-saturate: 1.38;
}

.al-dl-refraction-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.86;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.26) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(19,21,20,0.16) 0 1px, transparent 1px 54px),
    radial-gradient(circle at 18% 30%, rgba(201,168,76,0.30), transparent 22%),
    radial-gradient(circle at 76% 62%, rgba(255,255,255,0.62), transparent 18%);
  filter: contrast(1.18) saturate(0.8);
}

.al-dl-optic-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.al-liquid-switch,
.al-liquid-slider {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 66px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 22px 52px -42px rgba(19,21,20,0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.16);
          backdrop-filter: blur(16px) saturate(1.16);
  overflow: hidden;
}

.al-liquid-switch__knob,
.al-liquid-slider__thumb {
  position: absolute;
  top: 9px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.94), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.74), rgba(255,255,255,0.22));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 14px 28px -22px rgba(19,21,20,0.74);
  filter: url('#al-liquid-edge-filter');
  transition: transform 760ms cubic-bezier(0.18, 1.34, 0.28, 1), width 520ms cubic-bezier(0.18, 1.34, 0.28, 1);
}

.al-liquid-switch__knob { left: 9px; transform: translateX(var(--al-switch-x, 0px)); }
.al-liquid-switch.is-on .al-liquid-switch__knob { --al-switch-x: 78px; width: 58px; }
.al-liquid-slider__thumb { left: 9px; transform: translateX(var(--al-slider-x, 118px)); width: 64px; }

.al-liquid-switch__label,
.al-liquid-slider__label {
  position: relative;
  z-index: 2;
  justify-self: end;
  color: rgba(19,21,20,0.72);
  font-family: var(--font-nb, var(--font-sans));
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.al-liquid-slider__track {
  height: 7px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122,94,22,0.55) var(--al-slider-pct, 52%), rgba(255,255,255,0.34) 0);
  box-shadow: inset 0 1px 2px rgba(19,21,20,0.12);
}

/* More assertive organic button variants */
.al-btn--liquid,
.al-btn--liquid-border,
.al-btn--letters,
.al-btn--droplet {
  position: relative;
  z-index: 0;
  contain: paint;
}

.al-btn--liquid-border {
  --al-btn-fg: var(--al-gold);
  --al-btn-bd: rgba(122,94,22,0.58);
  --al-btn-bg: transparent;
  border-width: 1.5px;
  color: var(--al-gold);
  transition: color 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 220ms var(--al-spring), border-color 420ms ease;
}
.al-btn--liquid-border::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.62), transparent 20%),
    linear-gradient(180deg, rgba(201,168,76,0.94), rgba(122,94,22,0.98));
  border-radius: 45% 45% 0 0;
  transition: height 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 520ms ease;
}
.al-btn--liquid-border:hover,
.al-btn--liquid-border:focus-visible { color: #fff; border-color: rgba(122,94,22,0.88); }
.al-btn--liquid-border:hover::before,
.al-btn--liquid-border:focus-visible::before { height: 118%; border-radius: 48% 52% 0 0; animation: alLiquidSurface 1.7s ease-in-out infinite alternate; }
.al-btn--liquid-border:active { transform: scale(0.97); }

.al-dl-nav-demo .nav-ind {
  transform-origin: calc(var(--al-nav-fluid-x, 50) * 1%) 50%;
  border-radius: 999px 999px 999px 999px / 68% 62% 70% 64%;
  filter: drop-shadow(0 14px 20px rgba(19,21,20,0.08));
}
.al-dl-nav-demo .nav-ind.is-fluid-active {
  animation: alNavWaterSettle 820ms cubic-bezier(0.18, 1.34, 0.28, 1);
}
.al-dl-nav-demo .nav-ind .al-nav-blob {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.82), rgba(255,255,255,0.14) 58%, transparent 72%);
  filter: blur(0.2px);
  opacity: 0.7;
}
.al-dl-nav-demo .nav-ind .al-nav-blob--a { width: 28%; height: 70%; left: 10%; top: 14%; animation: alNavDropletFloat 3.4s ease-in-out infinite alternate; }
.al-dl-nav-demo .nav-ind .al-nav-blob--b { width: 17px; height: 17px; right: 13%; bottom: 12%; animation: alNavDropletFloat 4.4s ease-in-out -1s infinite alternate-reverse; }

@keyframes alLiquidSurface {
  0% { border-radius: 42% 58% 0 0; transform: translateY(0) skewX(-1deg); }
  100% { border-radius: 60% 40% 0 0; transform: translateY(-3%) skewX(1deg); }
}
@keyframes alNavWaterSettle {
  0% { border-radius: 54% 46% 58% 42% / 62% 68% 52% 72%; transform: scaleX(1.08) scaleY(0.96) translateZ(0); }
  45% { border-radius: 42% 58% 48% 52% / 72% 48% 70% 52%; transform: scaleX(0.97) scaleY(1.05) translateZ(0); }
  100% { border-radius: 999px; transform: scale(1) translateZ(0); }
}

@media (max-width: 760px) {
  .al-dl-optic-controls { grid-template-columns: 1fr; }
}

/* ============================================================
   Lot 2d — CSS-first liquid glass inspired by Daftplug CodePen.
   Difference vs .al-optic-glass: the pseudo-element itself is
   filtered with SVG url(), closer to the reference structure.
   ============================================================ */
:root {
  --al-css-glass-radius: 30px;
  --al-css-glass-filter: url('#al-daft-container-glass');
  --al-css-button-filter: url('#al-daft-button-glass');
}

.al-css-glass {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--al-css-glass-radius);
  background: transparent;
}

.al-css-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 2px 2px 0 -2px rgba(255,255,255,0.76),
    inset 0 0 3px 1px rgba(255,255,255,0.58),
    inset 0 -20px 42px -28px rgba(122,94,22,0.28),
    0 24px 70px -48px rgba(19,21,20,0.74);
}

.al-css-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  -webkit-filter: var(--al-css-glass-filter);
          filter: var(--al-css-glass-filter);
  background:
    radial-gradient(circle at calc(var(--al-fluid-x, 32) * 1%) calc(var(--al-fluid-y, 18) * 1%), rgba(255,255,255,0.20), transparent 22%),
    rgba(255,255,255,0.14);
}

.al-css-glass__content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 42px);
  border-radius: inherit;
}

.al-css-glass__content::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--al-css-glass-radius) - 1px);
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82), transparent 26%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,0.38), transparent 18%);
  opacity: 0.46;
  mix-blend-mode: screen;
}

.al-css-glass.is-fluid-active::after {
  animation: alCssGlassBreathe 900ms cubic-bezier(0.18, 1.34, 0.28, 1);
}

.al-btn--css-glass {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  color: rgba(19,21,20,0.78);
  background: transparent;
  box-shadow: none;
  transform: translateZ(0);
}
.al-btn--css-glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    inset 1px 1px 0 -1px rgba(255,255,255,0.92),
    inset 0 0 3px rgba(255,255,255,0.62),
    0 16px 34px -28px rgba(19,21,20,0.72);
}
.al-btn--css-glass::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  -webkit-filter: var(--al-css-button-filter);
          filter: var(--al-css-button-filter);
  background: rgba(255,255,255,0.16);
  transition: transform 520ms cubic-bezier(0.18, 1.34, 0.28, 1), opacity 360ms ease;
}
.al-btn--css-glass:hover::after,
.al-btn--css-glass:focus-visible::after {
  transform: scale(1.045, 1.12);
  opacity: 0.96;
}
.al-btn--css-glass:active { transform: scale(0.965); }

.al-dl-css-glass-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  gap: 18px;
  align-items: stretch;
}

.al-dl-css-glass-card {
  min-height: 280px;
}

.al-dl-css-glass-side {
  position: relative;
  min-height: 280px;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent),
    repeating-linear-gradient(45deg, rgba(19,21,20,0.18) 0 1px, transparent 1px 24px),
    radial-gradient(circle at 34% 28%, rgba(201,168,76,0.50), transparent 28%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,0.78), transparent 24%),
    linear-gradient(135deg, #d7d8d0, #868d82);
}
.al-dl-css-glass-side .al-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
}

@keyframes alCssGlassBreathe {
  0% { transform: scale(1.015, .985); border-radius: 34px 26px 32px 28px; }
  52% { transform: scale(.992, 1.018); border-radius: 26px 36px 28px 34px; }
  100% { transform: scale(1); border-radius: var(--al-css-glass-radius); }
}

@media (max-width: 760px) {
  .al-dl-css-glass-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Lot 2e — Kube-inspired liquid nav/search + advanced buttons
   ============================================================ */
.al-dl-kube-stage {
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  padding: clamp(20px, 4vw, 44px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.03)),
    radial-gradient(circle at 18% 20%, rgba(201,168,76,0.46), transparent 26%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,0.62), transparent 20%),
    linear-gradient(115deg, rgba(14,20,22,0.72), rgba(141,150,142,0.26)),
    url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1600&q=80') center / cover;
  box-shadow: inset 0 1px rgba(255,255,255,0.42), 0 28px 80px -58px rgba(13,15,14,0.78);
}
.al-dl-kube-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 50% 50%, transparent, rgba(12,14,13,0.38));
  mix-blend-mode: screen;
  opacity: 0.68;
  pointer-events: none;
}
.al-dl-kube-stage > * { position: relative; z-index: 1; }
.al-dl-kube-copy {
  max-width: 560px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 18px rgba(0,0,0,0.22);
}
.al-dl-kube-copy .al-kicker { color: rgba(255,255,255,0.74); }
.al-dl-kube-copy h2 { color: #fff; margin-bottom: 8px; }
.al-dl-kube-copy p { color: rgba(255,255,255,0.78); }
.al-kube-draggable {
  touch-action: none;
  cursor: grab;
  user-select: none;
  transform: translate3d(var(--al-drag-x, 0px), var(--al-drag-y, 0px), 0);
  transition: transform 540ms cubic-bezier(.16, 1.34, .26, 1), border-radius 520ms cubic-bezier(.16, 1.34, .26, 1), box-shadow 420ms ease;
}
.al-kube-draggable.is-dragging {
  cursor: grabbing;
  transition: border-radius 180ms ease, box-shadow 180ms ease;
  scale: 1.018;
}
.al-kube-draggable.is-settling { animation: alKubeSoftBounce 620ms cubic-bezier(.16, 1.34, .26, 1); }
.al-kube-nav-shell {
  position: absolute;
  left: clamp(18px, 5vw, 70px);
  bottom: clamp(24px, 6vw, 58px);
  width: min(620px, calc(100% - 40px));
  min-height: 66px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 999px;
  isolation: isolate;
  background: rgba(255,255,255,0.16);
  box-shadow:
    inset 1px 1px rgba(255,255,255,0.72),
    inset -1px -1px rgba(255,255,255,0.18),
    0 24px 70px -42px rgba(0,0,0,0.78);
  -webkit-backdrop-filter: url(#al-kube-lens-glass) blur(0.5px) saturate(1.18);
          backdrop-filter: url(#al-kube-lens-glass) blur(0.5px) saturate(1.18);
}
.al-kube-nav-shell::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at calc(var(--al-fluid-x, 28) * 1%) calc(var(--al-fluid-y, 24) * 1%), rgba(255,255,255,0.56), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.30));
  opacity: 0.42;
  filter: url(#al-kube-lens-glass);
  pointer-events: none;
}
.al-kube-nav-shell::after {
  content: '';
  position: absolute;
  inset: 10px 14px auto 14px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.86), transparent);
  opacity: 0.72;
  pointer-events: none;
}
.al-kube-nav-shell a {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  font: 650 0.78rem/1 var(--al-font-sans, inherit);
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
}
.al-kube-nav-shell a:hover,
.al-kube-nav-shell a:focus-visible { color: #fff; outline: none; }
.al-kube-lens {
  --al-lens-w: 168px;
  position: absolute;
  left: clamp(24px, 9vw, 120px);
  top: clamp(190px, 48%, 280px);
  width: var(--al-lens-w);
  height: 54px;
  border-radius: 999px;
  isolation: isolate;
  box-shadow:
    inset 1px 1px rgba(255,255,255,0.82),
    inset -1px -1px rgba(255,255,255,0.20),
    0 18px 46px -26px rgba(0,0,0,0.88);
  -webkit-backdrop-filter: url(#al-kube-lens-glass) blur(0px) saturate(1.22);
          backdrop-filter: url(#al-kube-lens-glass) blur(0px) saturate(1.22);
}
.al-kube-lens::before,
.al-kube-lens::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.al-kube-lens::before {
  inset: -1px;
  background:
    radial-gradient(circle at calc(var(--al-fluid-x, 34) * 1%) 18%, rgba(255,255,255,0.75), transparent 24%),
    linear-gradient(120deg, rgba(255,255,255,0.62), rgba(255,255,255,0.05) 52%, rgba(255,255,255,0.36));
  filter: url(#al-kube-lens-glass);
  opacity: 0.62;
}
.al-kube-lens::after {
  inset: 8px 16px auto 16px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  filter: blur(3px);
  opacity: 0.78;
}
.al-kube-lens__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.82);
  font: 700 .76rem/1 var(--al-font-sans, inherit);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,0.28);
}
.al-kube-nav-ind {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 9px;
  width: calc((100% - 18px) / 4);
  height: calc(100% - 18px);
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 1px 1px rgba(255,255,255,0.82), inset -1px -1px rgba(255,255,255,0.12), 0 14px 34px -24px rgba(0,0,0,.78);
  -webkit-backdrop-filter: url(#al-kube-lens-glass) blur(0px) saturate(1.28);
          backdrop-filter: url(#al-kube-lens-glass) blur(0px) saturate(1.28);
}
.al-kube-nav-shell.is-dragging .al-kube-nav-ind,
.al-kube-nav-shell.is-settling .al-kube-nav-ind { animation: alKubeIndSettle 640ms cubic-bezier(.16, 1.34, .26, 1); }

.al-btn--text-swap {
  position: relative;
  overflow: hidden;
  min-width: 148px;
  border-color: color-mix(in srgb, var(--al-color-gold, #c9a84c) 62%, transparent);
  background: rgba(255,255,255,0.15);
}
.al-btn--text-swap .al-btn__line {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 360ms ease;
}
.al-btn--text-swap .al-btn__line--hover { transform: translateY(115%); opacity: .6; }
.al-btn--text-swap:hover .al-btn__line--base,
.al-btn--text-swap:focus-visible .al-btn__line--base { transform: translateY(-115%); opacity: .4; }
.al-btn--text-swap:hover .al-btn__line--hover,
.al-btn--text-swap:focus-visible .al-btn__line--hover { transform: translateY(0); opacity: 1; }
.al-btn--text-swap .al-btn__swap-char {
  display: inline-block;
  transition-delay: calc(var(--al-char-index, 0) * 18ms);
}
.al-btn--text-swap:active { transform: scale(.972); }

.al-btn--gooey-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(13,15,14,.48);
  color: var(--al-color-ink, #0d0f0e);
  background: rgba(255,255,255,0.10);
  transition: color 420ms cubic-bezier(.25,.46,.45,.94), transform 160ms ease, border-color 420ms ease;
}
.al-btn--gooey-fill::before,
.al-btn--gooey-fill::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -72%;
  width: 170%;
  aspect-ratio: 1;
  border-radius: 44% 56% 48% 52%;
  background: var(--al-color-ink, #0d0f0e);
  transform: translateX(-50%) scale(.05);
  transition: transform 620ms cubic-bezier(.16,1,.3,1), border-radius 620ms ease;
}
.al-btn--gooey-fill::after {
  width: 136%;
  background: color-mix(in srgb, var(--al-color-ink, #0d0f0e) 72%, white);
  opacity: .42;
  transition-delay: 60ms;
}
.al-btn--gooey-fill:hover,
.al-btn--gooey-fill:focus-visible { color: white; border-color: rgba(13,15,14,.88); }
.al-btn--gooey-fill:hover::before,
.al-btn--gooey-fill:focus-visible::before { transform: translateX(-50%) scale(1.05); border-radius: 52% 48% 58% 42%; animation: alGooeyWave 1.2s ease-in-out infinite alternate; }
.al-btn--gooey-fill:hover::after,
.al-btn--gooey-fill:focus-visible::after { transform: translateX(-50%) scale(.92); border-radius: 58% 42% 45% 55%; animation: alGooeyWave 1.45s ease-in-out infinite alternate-reverse; }
.al-btn--gooey-fill:active { transform: scale(.97); }

.al-btn--ghost.al-btn--ghost-plus {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.38);
  box-shadow: inset 0 1px rgba(255,255,255,0.38), 0 12px 26px -24px rgba(13,15,14,0.55);
}
.al-btn--ghost.al-btn--ghost-plus::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.24), transparent 44%, rgba(201,168,76,0.10));
  opacity: 0;
  transition: opacity 260ms ease;
}
.al-btn--ghost.al-btn--ghost-plus:hover::after,
.al-btn--ghost.al-btn--ghost-plus:focus-visible::after { opacity: 1; }

@keyframes alKubeSoftBounce {
  0% { scale: 1.016 .982; border-radius: 999px 999px 36px 999px; }
  42% { scale: .988 1.018; border-radius: 999px 42px 999px 999px; }
  72% { scale: 1.006 .996; }
  100% { scale: 1; border-radius: 999px; }
}
@keyframes alKubeIndFloat {
  0%,100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(1px) scale(1.018, .982); }
}
@keyframes alKubeIndSettle {
  0% { scale: 1.06 .88; border-radius: 999px 999px 44px 999px; }
  46% { scale: .94 1.08; border-radius: 999px 42px 999px 999px; }
  100% { scale: 1; border-radius: 999px; }
}
@keyframes alGooeyWave {
  from { rotate: -2deg; translate: 0 0; }
  to { rotate: 3deg; translate: 0 -3px; }
}


/* Lot 2f — curated design tokens validation */
.al-dl-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.al-dl-swatch {
  min-height: 138px;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  border: 1px solid rgba(13,15,14,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.52), 0 18px 46px -38px rgba(13,15,14,.42);
}
.al-dl-swatch strong { font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.al-dl-swatch code { font-size: .76rem; opacity: .72; }
.al-dl-swatch--ink { color: #fff; background: var(--al-color-ink, #0d0f0e); }
.al-dl-swatch--paper { color: var(--al-color-ink, #0d0f0e); background: var(--al-color-paper, #eff0ef); }
.al-dl-swatch--gold { color: #fff; background: var(--al-color-gold, #c9a84c); }
.al-dl-swatch--glass { color: var(--al-color-ink, #0d0f0e); background: var(--al-glass-bg, rgba(255,255,255,.22)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.al-dl-type-specimen {
  display: grid;
  gap: 22px;
  margin-top: 16px;
}
.al-dl-type-line {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(13,15,14,.10);
}
.al-dl-type-line h1,
.al-dl-type-line h2,
.al-dl-type-line h3,
.al-dl-type-line p { margin: 0; }
.al-dl-type-meta {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(13,15,14,.52);
}
.al-dl-link-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 16px;
}
/* Lien-flèche global : style défini dans style.css (.al-link).
   Ici on ne garde que la couleur/transition de base — l'underline animé
   (background-gradient) appartient au modificateur .al-link--iker (lab),
   qui porte son propre soulignement sur le <span>. */
.al-link {
  color: var(--al-color-ink, #0d0f0e);
  text-decoration: none;
  transition: color 220ms ease, opacity 220ms ease;
}
.al-link:hover,
.al-link:focus-visible {
  color: color-mix(in srgb, var(--al-color-ink, #0d0f0e) 78%, var(--al-color-gold, #c9a84c));
}
.al-excerpt {
  font-size: clamp(1rem, .96rem + .22vw, 1.14rem);
  line-height: 1.72;
  color: rgba(13,15,14,.68);
  max-width: 66ch;
}
.al-dl-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.al-card__eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13,15,14,.54);
}
.al-card__title { margin: 0 0 10px; }
.al-card__excerpt { margin: 0; color: rgba(13,15,14,.64); line-height: 1.68; }
.al-dl-approved-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.al-dl-section.is-exiting {
  animation: alDlSectionExit 420ms cubic-bezier(.55,0,.32,1) both;
}
@keyframes alDlSectionExit {
  to { opacity: 0; transform: translateY(14px) scale(.992); filter: blur(3px); }
}

@media (max-width: 760px) {
  .al-dl-kube-stage { min-height: 620px; }
  .al-kube-nav-shell { left: 16px; right: 16px; width: auto; flex-wrap: wrap; border-radius: 26px; }
  .al-kube-nav-shell a { flex: 1 1 42%; }
  .al-kube-nav-ind { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .al-kube-draggable,
  .al-kube-nav-ind,
  .al-btn--gooey-fill::before,
  .al-btn--gooey-fill::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Lot 2g — corrections Design Lab après revue live
   ============================================================ */
.al-design-lab {
  --al-color-ink: var(--ink, #131514);
  --al-color-paper: #EFF0EF;
  --al-color-gold: var(--color-gold-deep, #7A5E16);
  --al-header-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.41));
  --al-header-glass-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.14), 0 2px 60px -12px rgba(19,21,20,0.33);
}

/* Tokens : image behind the palette so glass can be judged on a complex background. */
.al-design-lab #tokens {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(246,247,244,0.76), rgba(246,247,244,0.46)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=78') center / cover;
}
.al-design-lab #tokens::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,0.70), transparent 24%),
    radial-gradient(circle at 80% 74%, rgba(19,21,20,0.18), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 44px);
  opacity: .84;
}

/* Header-equivalent glass primitive for Design Lab validation.
   Chromium gets the SVG refraction through alBuildGlass inline JS; this is the fallback recipe. */
.al-ds-header-glass,
.al-dl-swatch--glass,
#glass-test .al-dl-visual-card,
#nav-indicator .al-dl-nav-demo {
  isolation: isolate;
  background: var(--al-header-glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1) brightness(1.16);
          backdrop-filter: blur(14px) saturate(1) brightness(1.16);
  box-shadow: var(--al-header-glass-shadow);
  border: 0;
}
.al-ds-header-glass::before,
.al-dl-swatch--glass::before,
#glass-test .al-dl-visual-card::before,
#nav-indicator .al-dl-nav-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(130% 90% at 50% -30%, rgba(255,255,255,0.30), rgba(255,255,255,0) 62%);
  filter: none;
  mix-blend-mode: normal;
}
.al-ds-header-glass > *,
#glass-test .al-dl-visual-card > *,
#nav-indicator .al-dl-nav-demo > * { position: relative; z-index: 1; }
.al-dl-swatch--glass { position: relative; color: var(--al-ink); }
.al-dl-swatch--glass strong,
.al-dl-swatch--glass code { position: relative; z-index: 1; }

/* Typography : stronger weight contrast using already loaded theme fonts. */
.al-dl-type-specimen h1 {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.055em;
}
.al-dl-type-specimen h2 {
  font-family: var(--font-nb, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.045em;
}
.al-dl-type-specimen h3 {
  font-family: var(--font-nb, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.al-dl-type-line--bold p {
  margin: 0;
  font-family: var(--font-nb, 'Manrope', system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.42rem);
  line-height: 1.45;
}
.al-dl-type-line--bold strong { font-weight: 800; color: var(--al-ink); }

/* Links : Aaron Iker style underline/arrow adapted to AstonLegacy. */
.al-link--iker {
  --line: rgba(122, 94, 22, .72);
  --color: var(--al-ink);
  display: inline;
  color: var(--color);
  text-decoration: none;
  position: relative;
  font-weight: 650;
}
.al-link--iker span {
  background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size, 100%) 1px;
  transition: background-size .2s linear var(--background-delay, .15s);
  transform: translateZ(0);
}
.al-link--iker svg {
  vertical-align: text-bottom;
  display: inline;
  width: 13px;
  height: 20px;
  margin-left: 2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke: var(--line);
  stroke-dasharray: 7.95 30;
  stroke-dashoffset: var(--stroke-dashoffset, 46);
  transition: stroke-dashoffset var(--stroke-duration, .15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.al-link--iker:hover,
.al-link--iker:focus-visible {
  --background-size: 0%;
  --background-delay: 0s;
  --stroke-dashoffset: 26;
  --stroke-duration: .3s;
  --stroke-easing: cubic-bezier(.3, 1.5, .5, 1);
  --stroke-delay: .195s;
  outline: none;
}
.al-link--iker:focus-visible span { box-shadow: 0 2px 0 rgba(122,94,22,.22); }

/* Buttons : hide gooey ink blobs until hover/focus; remove visible grey/black dots at rest. */
.al-design-lab .al-dl-approved-list { grid-template-columns: repeat(2, minmax(0, max-content)); }
.al-btn--gooey-fill::before,
.al-btn--gooey-fill::after {
  bottom: -128%;
  transform: translateX(-50%) scale(0.01);
  opacity: 0;
}
.al-btn--gooey-fill:hover::before,
.al-btn--gooey-fill:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) scale(1.05);
}
.al-btn--gooey-fill:hover::after,
.al-btn--gooey-fill:focus-visible::after {
  opacity: .38;
  transform: translateX(-50%) scale(.92);
}
.al-btn--gooey-fill:not(:hover):not(:focus-visible)::before,
.al-btn--gooey-fill:not(:hover):not(:focus-visible)::after { animation: none !important; }

/* Glass test : remove the previous moving/gridy refraction demo and align to header glass. */
#glass-test .al-dl-visual-field {
  min-height: 460px;
  background:
    linear-gradient(135deg, rgba(246,247,244,0.12), rgba(246,247,244,0.34)),
    url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1800&q=82') center / cover;
}
#glass-test .al-dl-refraction-map { display: none !important; }
#glass-test .al-dl-visual-card,
#glass-test .al-dl-visual-card::before,
#glass-test .al-dl-visual-card::after {
  animation: none !important;
  transition: transform .24s ease, box-shadow .24s ease;
}
#glass-test .al-dl-visual-card::after { display: none; }

/* Nav indicator : image backdrop, indicator truly behind text, no spontaneous drift. */
#nav-indicator.al-dl-nav-indicator-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(246,247,244,.82), rgba(246,247,244,.38)),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80') center / cover;
}
#nav-indicator.al-dl-nav-indicator-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.66), transparent 22%),
    radial-gradient(circle at 80% 78%, rgba(19,21,20,.18), transparent 28%);
}
.al-dl-nav-demo {
  isolation: isolate;
  overflow: hidden;
}
.al-dl-nav-demo li { z-index: 2; }
.al-dl-nav-demo a { position: relative; z-index: 3; }
.al-dl-nav-demo .nav-ind {
  position: absolute;
  z-index: 1 !important;
  opacity: 1;
  background: rgb(255 255 255 / 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 3px rgba(19,21,20,0.16);
  -webkit-backdrop-filter: blur(8px) saturate(1) brightness(1.16);
          backdrop-filter: blur(8px) saturate(1) brightness(1.16);
}
@supports ((backdrop-filter: url(#al-lg-design-nav-ind)) or (-webkit-backdrop-filter: url(#al-lg-design-nav-ind))) {
  .al-dl-nav-demo .nav-ind {
    -webkit-backdrop-filter: url(#al-lg-design-nav-ind) brightness(1.16) saturate(1);
            backdrop-filter: url(#al-lg-design-nav-ind) brightness(1.16) saturate(1);
  }
}
.al-dl-nav-demo .nav-ind::before,
.al-dl-nav-demo .nav-ind::after,
.al-dl-nav-demo .nav-ind .al-nav-blob { animation: none !important; }

/* Kube stage : no autonomous motion; keep only user-driven drag/settle. */
.al-dl-kube-stage .al-kube-nav-ind,
.al-dl-kube-stage .al-kube-lens::before,
.al-dl-kube-stage .al-kube-lens::after,
.al-dl-kube-stage .al-kube-nav-shell::before,
.al-dl-kube-stage .al-kube-nav-shell::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .al-link--iker span,
  .al-link--iker svg { transition: none !important; }
}

/* ============================================================
   Lot 2h — refinements after design-system review
   ============================================================ */
.al-design-lab {
  --al-header-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.24));
  --al-header-glass-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 0 0 1px rgba(255,255,255,0.10), 0 22px 70px -44px rgba(19,21,20,0.34);
}
.al-design-lab .al-ds-header-glass,
.al-design-lab .al-dl-swatch--glass,
.al-design-lab #glass-test .al-dl-visual-card,
.al-design-lab #nav-indicator .al-dl-nav-demo {
  background: var(--al-header-glass-bg) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.04) brightness(1.08);
          backdrop-filter: blur(8px) saturate(1.04) brightness(1.08);
  box-shadow: var(--al-header-glass-shadow);
}
.al-design-lab .al-dl-swatch--glass::before,
.al-design-lab #glass-test .al-dl-visual-card::before,
.al-design-lab #nav-indicator .al-dl-nav-demo::before {
  opacity: .045;
}

/* Typography rebalance: H1 editorial/airy, H2 section stronger and more visible. */
.al-design-lab .al-dl-type-specimen h1 {
  font-size: clamp(2.45rem, 7vw, 5.4rem);
  font-weight: 520;
  line-height: .92;
  color: rgba(13,15,14,.82);
}
.al-design-lab .al-dl-type-specimen h2 {
  font-size: clamp(2.2rem, 5.2vw, 4.65rem);
  font-weight: 850;
  line-height: .88;
  color: var(--al-color-ink, #0d0f0e);
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}
.al-design-lab .al-dl-type-specimen h3 {
  font-size: clamp(1.45rem, 2.8vw, 2.45rem);
}

/* Iker link: remove inherited/native decoration from .al-link and keep only the custom span/arrow animation. */
.al-design-lab .al-link.al-link--iker,
.al-design-lab .al-link.al-link--iker:hover,
.al-design-lab .al-link.al-link--iker:focus-visible {
  text-decoration: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
}
.al-design-lab .al-link--iker span { text-decoration: none !important; }

/* Nav indicator: the pill is now physically below the labels. */
.al-design-lab #nav-indicator .al-dl-nav-demo {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.al-design-lab #nav-indicator .al-dl-nav-demo .nav-ind {
  z-index: 0 !important;
  pointer-events: none;
  opacity: .78;
}
.al-design-lab #nav-indicator .al-dl-nav-demo li {
  position: relative;
  z-index: 2;
}
.al-design-lab #nav-indicator .al-dl-nav-demo a {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 0 rgba(255,255,255,.44);
}
.al-design-lab #nav-indicator .al-dl-nav-demo > .nav-ind { z-index: 0 !important; }

/* Archive model cards reference — scoped copy of the /modeles/ card language. */
.al-design-lab .al-dl-model-reference {
  position: relative;
  margin-top: 26px;
  padding: clamp(22px, 4vw, 40px);
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 52% 30%, rgba(255,255,255,.62), rgba(239,240,239,.20) 42%, rgba(19,21,20,.12) 100%),
    linear-gradient(135deg, #f4f1eb, #ddd7cc);
  isolation: isolate;
}
.al-design-lab .al-dl-model-reference::before {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: -1;
  background:
    linear-gradient(108deg, transparent 0 42%, rgba(13,15,14,.88) 42.2% 58%, transparent 58.2%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 54px);
  opacity: .58;
}
.al-design-lab .al-dl-model-strip {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 22px clamp(10px, 5vw, 70px) 30px;
  scrollbar-width: thin;
}
.al-design-lab .alc-scard {
  flex: 0 0 320px;
  width: 320px;
  height: 440px;
  border-radius: 10px;
  background-color: rgba(255,255,255,.34);
  box-shadow: 0 28px 60px -18px rgba(14,12,9,.32);
  position: relative;
  overflow: hidden;
  transform: scale(.86) rotateY(10deg);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(.16,1,.3,1), background-color 420ms ease, box-shadow 420ms ease;
}
.al-design-lab .alc-scard:nth-child(2) {
  transform: scale(1) rotateY(0deg);
  background-color: rgba(255,255,255,.88);
  z-index: 2;
}
.al-design-lab .alc-scard:hover {
  transform: scale(1.02) rotateY(0deg);
  background-color: rgba(255,255,255,.92);
  box-shadow: 0 34px 80px -24px rgba(14,12,9,.40);
}
.al-design-lab .alc-scard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 5;
  opacity: .78;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,0) 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.al-design-lab .alc-scard__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.al-design-lab .alc-scard__top {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.al-design-lab .alc-scard__year {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .2em;
  color: rgba(14,12,9,.94);
}
.al-design-lab .alc-scard__num {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 10px;
  color: rgba(14,12,9,.94);
  letter-spacing: .08em;
}
.al-design-lab .alc-scard__info { padding: 0 18px 20px; }
.al-design-lab .alc-scard__title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 28px;
  font-weight: 300;
  color: #0E0C09;
  line-height: 1;
  margin: 0 0 5px;
  letter-spacing: -.5px;
}
.al-design-lab .alc-scard__tagline {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 10px;
  font-style: italic;
  font-weight: 300;
  color: rgba(14,12,9,.96);
  line-height: 1.45;
  margin: 0 0 14px;
}
.al-design-lab .alc-scard__divider { width: 22px; height: .5px; background: rgba(14,12,9,.12); margin-bottom: 12px; }
.al-design-lab .alc-scard__specs { display: flex; gap: 16px; }
.al-design-lab .alc-scard__spec-val { display: block; font-family: var(--font-serif, Georgia, serif); font-size: 15px; font-weight: 600; color: #0E0C09; line-height: 1; margin-bottom: 3px; }
.al-design-lab .alc-scard__spec-val em { font-size: 10px; font-style: normal; font-weight: 400; color: #7A5E16; margin-left: 1px; }
.al-design-lab .alc-scard__spec-key { display: block; font-family: var(--font-sans, system-ui, sans-serif); font-size: 8px; color: rgba(14,12,9,.90); letter-spacing: .12em; text-transform: uppercase; }
.al-design-lab .alc-scard__car {
  position: absolute;
  right: -72px;
  bottom: 96px;
  width: 420px;
  height: 220px;
  pointer-events: none;
  z-index: 3;
  opacity: .88;
}
.al-design-lab .alc-scard__car::before {
  content: '';
  position: absolute;
  left: 44px;
  right: 42px;
  bottom: 48px;
  height: 44px;
  border-radius: 60% 52% 36% 34%;
  background: linear-gradient(180deg, rgba(13,15,14,.88), rgba(13,15,14,.66));
  clip-path: polygon(3% 68%, 16% 40%, 36% 24%, 58% 20%, 78% 35%, 92% 64%, 100% 76%, 89% 83%, 10% 83%);
}
.al-design-lab .alc-scard__car::after {
  content: '';
  position: absolute;
  left: 88px;
  bottom: 38px;
  width: 210px;
  height: 38px;
  border-radius: 999px;
  border: 12px solid rgba(13,15,14,.76);
  box-shadow: 168px 0 0 -2px rgba(13,15,14,.76);
}
@media (max-width: 760px) {
  .al-design-lab .al-dl-model-strip { padding-inline: 0; }
  .al-design-lab .alc-scard { flex-basis: 280px; width: 280px; height: 410px; }
  .al-design-lab .alc-scard__car { right: -110px; transform: scale(.86); }
}

/* ============================================================
   Lot 2i — design-system calibration from project guide
   ============================================================ */
.al-design-lab {
  --al-type-heading: 'PT Serif', var(--font-serif, Georgia, serif);
  --al-type-ui: var(--font-nb, 'Manrope', system-ui, sans-serif);
  --al-header-glass-bg: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.18));
  --al-header-glass-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 64px -46px rgba(19,21,20,.30);
}

.al-design-lab .al-ds-header-glass,
.al-design-lab .al-dl-swatch--glass,
.al-design-lab #glass-test .al-dl-visual-card,
.al-design-lab #nav-indicator .al-dl-nav-demo {
  background: var(--al-header-glass-bg) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.04) brightness(1.06);
          backdrop-filter: blur(5px) saturate(1.04) brightness(1.06);
  box-shadow: var(--al-header-glass-shadow);
}

.al-design-lab .al-dl-swatch--glass::before,
.al-design-lab #glass-test .al-dl-visual-card::before,
.al-design-lab #nav-indicator .al-dl-nav-demo::before { opacity: .032; }

/* Typography: H1 > H2 > H3, table inspired by the supplied global guide. */
.al-design-lab .al-dl-type-scale {
  gap: 0;
  margin-top: 22px;
}
.al-design-lab .al-dl-type-header,
.al-design-lab .al-dl-type-scale .al-dl-type-line {
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(140px, .7fr) minmax(240px, .95fr);
  gap: clamp(18px, 4vw, 64px);
  align-items: baseline;
}
.al-design-lab .al-dl-type-header {
  padding: 0 0 10px;
  color: rgba(13,15,14,.42);
  font-family: var(--al-type-ui);
  font-size: 11px;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(13,15,14,.08);
}
.al-design-lab .al-dl-type-scale .al-dl-type-line {
  padding: 16px 0;
  border-bottom: 1px solid rgba(13,15,14,.075);
}
.al-design-lab .al-dl-type-scale .al-dl-type-line > :is(h1,h2,h3,p) {
  margin: 0;
  color: #17333D;
}
.al-design-lab .al-dl-type-scale code,
.al-design-lab .al-dl-type-scale .al-dl-type-line > span {
  font-family: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(23,51,61,.82);
  font-size: 13px;
  line-height: 1.45;
}
.al-design-lab .al-dl-type-line--h1 h1 {
  font-family: var(--al-type-heading);
  font-size: clamp(38px, 4.5vw, 46px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: .01em;
}
.al-design-lab .al-dl-type-line--h2 h2 {
  font-family: var(--al-type-heading);
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .005em;
  color: rgba(23,51,61,.94);
  text-shadow: none;
}
.al-design-lab .al-dl-type-line--h3 h3 {
  font-family: var(--al-type-heading);
  font-size: clamp(21px, 2.1vw, 24px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
}
.al-design-lab .al-dl-type-line--overline p {
  font-family: var(--al-type-ui);
  font-size: clamp(28px, 3.3vw, 38px);
  line-height: 1.21;
  font-weight: 800;
  letter-spacing: -.035em;
}
.al-design-lab .al-dl-type-line--subtitle p {
  font-family: var(--al-type-ui);
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.22;
  font-weight: 600;
}
.al-design-lab .al-dl-type-line--body p,
.al-design-lab .al-dl-type-line--bold p {
  font-family: var(--al-type-ui);
  font-size: 18px;
  line-height: 1.61;
  font-weight: 400;
}
.al-design-lab .al-dl-type-line--bold strong { font-weight: 800; }
.al-design-lab .al-dl-type-note { margin-top: 20px; }

/* Iker links: no inherited/native decoration, only custom animated span + arrow. */
.al-design-lab .al-link.al-link--iker,
.al-design-lab .al-link.al-link--iker:visited,
.al-design-lab .al-link.al-link--iker:hover,
.al-design-lab .al-link.al-link--iker:focus,
.al-design-lab .al-link.al-link--iker:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.al-design-lab .al-link.al-link--iker span {
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Nav indicator: fix visibility and stacking. Pill sits behind labels but above nav glass. */
.al-design-lab #nav-indicator .al-dl-nav-demo {
  display: inline-flex;
  position: relative;
  z-index: 1;
  min-height: 52px;
  padding: 8px;
  overflow: hidden;
  isolation: isolate;
}
.al-design-lab #nav-indicator .al-dl-nav-demo::before { z-index: -1; }
.al-design-lab #nav-indicator .al-dl-nav-demo .nav-ind {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 8px;
  top: 8px;
  height: calc(100% - 16px);
  min-width: 76px;
  width: 92px;
  opacity: .96 !important;
  z-index: 1 !important;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.86), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.42));
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 -10px 24px rgba(255,255,255,.12), 0 10px 24px -20px rgba(13,15,14,.42);
  transform: translateX(96px);
  transition: transform .6s var(--bounce, cubic-bezier(.34,1.42,.64,1)), width .6s var(--bounce, cubic-bezier(.34,1.42,.64,1)), opacity .25s ease;
}
.al-design-lab #nav-indicator .al-dl-nav-demo li { position: relative; z-index: 3; }
.al-design-lab #nav-indicator .al-dl-nav-demo a { position: relative; z-index: 4; color: var(--al-ink); }
@supports ((backdrop-filter: url('#al-liquid-nav-filter')) or (-webkit-backdrop-filter: url('#al-liquid-nav-filter'))) {
  .al-design-lab #nav-indicator .al-dl-nav-demo .nav-ind {
    -webkit-backdrop-filter: url('#al-liquid-nav-filter') blur(3px) saturate(1.08) brightness(1.08);
            backdrop-filter: url('#al-liquid-nav-filter') blur(3px) saturate(1.08) brightness(1.08);
  }
}

/* Archive model cards: closer to current /modeles/ card with SVG refraction, transparent base. */
.al-design-lab .al-dl-model-reference {
  background:
    linear-gradient(135deg, rgba(239,240,239,.82), rgba(239,240,239,.36)),
    url('https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1800&q=82') center / cover;
}
.al-design-lab .al-dl-model-reference::before { opacity: .38; }
.al-design-lab .al-dl-model-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.al-design-lab .al-dl-model-strip.lg-svg {
  perspective: 1300px;
}
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard {
  width: 320px;
  height: 440px;
  flex: 0 0 320px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background-color: rgba(255,255,255,.20);
  border: 0;
  box-shadow: 0 26px 58px -20px rgba(14,12,9,.34);
  transform: scale(.88) rotateY(10deg);
  transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .35s ease, box-shadow .35s ease;
}
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard.lg-on {
  -webkit-backdrop-filter: url('#al-liquidglass') blur(2px) saturate(1.05) brightness(1.05);
          backdrop-filter: url('#al-liquidglass') blur(2px) saturate(1.05) brightness(1.05);
}
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard.alc-scard--active {
  transform: scale(1) rotateY(0deg);
  background-color: rgba(255,255,255,.34);
  box-shadow: 0 34px 78px -24px rgba(14,12,9,.40);
}
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard::after {
  opacity: .86;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,0) 42%);
}
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard__car {
  position: absolute;
  right: -86px;
  bottom: 86px;
  width: 430px;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(14,12,9,.26));
  opacity: .96;
  z-index: 3;
}
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard__car::before,
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard__car::after { content: none; }
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard__inner { z-index: 4; }
.al-design-lab .al-dl-model-strip.lg-svg .alc-scard__info { padding: 0 18px 20px; }

@media (max-width: 820px) {
  .al-design-lab .al-dl-type-header,
  .al-design-lab .al-dl-type-scale .al-dl-type-line {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .al-design-lab .al-dl-type-header { display: none; }
}