/* =========================================================
   SimonvilsTech — Design Modes
   A single semantic layer changes the visual language without
   changing content, routes or application behaviour.
   ========================================================= */

html[data-design="minimalism"]{
  --paper:#ffffff; --surface:#f5f5f5; --ink:#111111; --muted:#666666;
  --dark:#111111; --blue:#155eef; --blue-lift:#7aa7ff; --amber:#6b7280;
  --hairline:rgba(17,17,17,.12); --hairline-dark:rgba(255,255,255,.16);
}

html[data-design="brutalism"]{
  --paper:#f7f5ee; --surface:#e8e4d9; --ink:#050505; --muted:#2e2e2e;
  --dark:#050505; --blue:#ff3b00; --blue-lift:#ffd400; --amber:#ff3b00;
  --hairline:#050505; --hairline-dark:#f7f5ee;
}

html[data-design="maximalism"]{
  --paper:#fff8f2; --surface:#f1eaff; --ink:#160b2f; --muted:#5f4b76;
  --dark:#160b2f; --blue:#ff2e88; --blue-lift:#8b5cf6; --amber:#ffb000;
  --hairline:rgba(22,11,47,.18); --hairline-dark:rgba(255,255,255,.2);
}

html[data-design="neomorphism"]{
  --paper:#e7ebf0; --surface:#dfe4ea; --ink:#27313d; --muted:#6d7784;
  --dark:#27313d; --blue:#4267d5; --blue-lift:#7f9bea; --amber:#8b6b35;
  --hairline:rgba(39,49,61,.08); --hairline-dark:rgba(255,255,255,.18);
}

html[data-design="skeuomorphism"]{
  --paper:#e7e0d2; --surface:#d3c8b6; --ink:#27221b; --muted:#6f6253;
  --dark:#27221b; --blue:#1d62a8; --blue-lift:#78b4ed; --amber:#a6671c;
  --hairline:rgba(39,34,27,.22); --hairline-dark:rgba(255,255,255,.2);
}

html[data-design="claymorphism"]{
  --paper:#f7f4ff; --surface:#eee9ff; --ink:#2b2540; --muted:#706986;
  --dark:#2b2540; --blue:#6257e8; --blue-lift:#a79fff; --amber:#ff8c69;
  --hairline:rgba(43,37,64,.1); --hairline-dark:rgba(255,255,255,.18);
}

html[data-design="glassmorphism"]{
  --paper:#eef4ff; --surface:#dfe9ff; --ink:#17233f; --muted:#62708c;
  --dark:#10182e; --blue:#4b6bff; --blue-lift:#a9b9ff; --amber:#ffb454;
  --hairline:rgba(67,89,145,.2); --hairline-dark:rgba(255,255,255,.2);
}

html[data-design="liquid-glass"]{
  --paper:#f1f6ff; --surface:#e7eaff; --ink:#182039; --muted:#66718c;
  --dark:#0d1429; --blue:#6c7cff; --blue-lift:#b8c0ff; --amber:#ffb86b;
  --hairline:rgba(72,87,154,.18); --hairline-dark:rgba(255,255,255,.2);
}

html[data-design="spatial"]{
  --paper:#edf3fa; --surface:#dfe7f1; --ink:#172233; --muted:#627083;
  --dark:#0c1523; --blue:#3b82f6; --blue-lift:#8ebcff; --amber:#f0a35b;
  --hairline:rgba(23,34,51,.15); --hairline-dark:rgba(255,255,255,.2);
}

/* ---------------- Shared switcher ---------------- */
.design-control{position:relative;flex-shrink:0}
.design-trigger{
  display:inline-flex;align-items:center;gap:.38rem;
  height:30px;padding:.2rem .62rem;border:1px solid var(--hairline);
  border-radius:999px;background:transparent;color:var(--muted);
  font:inherit;font-size:.72rem;font-weight:550;letter-spacing:-.01em;
  cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.design-trigger:hover,.design-trigger[aria-expanded="true"]{
  color:var(--ink);border-color:currentColor;background:color-mix(in srgb,var(--paper) 55%,transparent);
}
.design-trigger:active{transform:scale(.97)}
.nav.dark .design-trigger{color:rgba(251,251,253,.68);border-color:rgba(255,255,255,.22)}
.nav.dark .design-trigger:hover,.nav.dark .design-trigger[aria-expanded="true"]{color:var(--paper);border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.design-icon{font-size:.9rem;line-height:1}
.design-panel{
  position:absolute;right:0;top:calc(100% + .7rem);z-index:80;width:min(390px,calc(100vw - 2rem));
  padding:.9rem;background:color-mix(in srgb,var(--paper) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:22px;
  box-shadow:0 24px 70px rgba(20,25,40,.18),0 4px 16px rgba(20,25,40,.08);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top right;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.design-control.open .design-panel{opacity:1;visibility:visible;transform:none}
.design-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.25rem .25rem .75rem}
.design-panel-title{font-size:.9rem;font-weight:650;letter-spacing:-.02em}
.design-panel-sub{font-size:.72rem;color:var(--muted);margin-top:.15rem}
.design-close{border:0;background:none;color:var(--muted);font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;padding:.15rem}
.design-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;max-height:min(62vh,470px);overflow:auto;padding:.15rem}
.design-option{
  appearance:none;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:color-mix(in srgb,var(--paper) 68%,transparent);
  color:var(--ink);border-radius:15px;padding:.45rem;text-align:left;cursor:pointer;
  transition:transform .18s var(--ease),border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.design-option:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 45%,transparent);box-shadow:0 8px 20px rgba(20,25,40,.1)}
.design-option[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 16%,transparent)}
.design-swatch{height:58px;border-radius:11px;position:relative;overflow:hidden;margin-bottom:.42rem;background:#eee}
.design-swatch::before,.design-swatch::after{content:"";position:absolute}
.design-swatch::before{left:13%;right:13%;top:24%;height:12px;border-radius:6px;background:#fff}
.design-swatch::after{left:13%;right:34%;top:51%;height:7px;border-radius:5px;background:rgba(255,255,255,.72)}
.design-option-name{display:block;font-size:.72rem;font-weight:600;line-height:1.15}
.design-option-desc{display:block;color:var(--muted);font-size:.61rem;margin-top:.18rem;line-height:1.25}
.design-foot{font-size:.62rem;color:var(--muted);padding:.65rem .25rem .1rem}

/* CSS-only previews */
.swatch-original{background:#fbfaf7}.swatch-original::before{background:#1e1b18;border-radius:999px}.swatch-original::after{background:#0a66d9}
.swatch-minimal{background:#fff}.swatch-minimal::before{background:#111;border-radius:2px;height:9px}.swatch-minimal::after{background:#ddd;border-radius:1px}
.swatch-brutal{background:#f1e800;border:2px solid #050505}.swatch-brutal::before{background:#050505;border-radius:0;height:16px;box-shadow:7px 7px 0 #ff3b00}.swatch-brutal::after{background:#fff;border-radius:0;border:2px solid #050505}
.swatch-maximal{background:linear-gradient(135deg,#7c3aed,#ff2e88 48%,#ffb000)}.swatch-maximal::before{background:#fff;border-radius:0;transform:rotate(-5deg);box-shadow:22px 8px 0 #160b2f}.swatch-maximal::after{background:#7cffcb;border-radius:0;transform:rotate(4deg)}
.swatch-neo{background:#e7ebf0}.swatch-neo::before{background:#e7ebf0;box-shadow:-5px -5px 10px rgba(255,255,255,.95),5px 5px 10px rgba(120,130,145,.28)}.swatch-neo::after{background:#cfd5dd}
.swatch-skeuo{background:linear-gradient(#eee7d8,#cfc4b0)}.swatch-skeuo::before{background:linear-gradient(#fff,#d8d0c1);border:1px solid #9e927f;box-shadow:inset 0 1px #fff,0 3px 5px rgba(60,45,30,.35)}.swatch-skeuo::after{background:#1d62a8;border-radius:4px}
.swatch-clay{background:#eee9ff}.swatch-clay::before{background:#a79fff;border-radius:16px;box-shadow:inset 0 -4px 8px rgba(67,54,170,.18),0 8px 12px rgba(68,55,130,.2)}.swatch-clay::after{background:#fff;border-radius:14px}
.swatch-glass{background:linear-gradient(135deg,#4b6bff,#b9e7ff 48%,#8d6bff)}.swatch-glass::before{background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(8px);box-shadow:inset 0 1px rgba(255,255,255,.75)}.swatch-glass::after{background:rgba(255,255,255,.45)}
.swatch-liquid{background:radial-gradient(circle at 25% 30%,#7b8cff,transparent 35%),radial-gradient(circle at 75% 65%,#ff8ec5,transparent 40%),#202a5c}.swatch-liquid::before{background:linear-gradient(120deg,rgba(255,255,255,.48),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(8px)}.swatch-liquid::after{background:rgba(255,255,255,.55);filter:blur(1px)}
.swatch-spatial{background:linear-gradient(145deg,#dbeafe,#91a8c7)}.swatch-spatial::before{background:#f6faff;transform:perspective(120px) rotateX(12deg) rotateY(-8deg);box-shadow:14px 15px 20px rgba(24,38,62,.25)}.swatch-spatial::after{background:#3b82f6;transform:translate(7px,7px) rotate(-2deg);box-shadow:0 8px 14px rgba(59,130,246,.28)}

/* ---------------- Mode-specific component language ---------------- */

/* Minimalism */
html[data-design="minimalism"] body{letter-spacing:-.008em}
html[data-design="minimalism"] .nav{background:rgba(255,255,255,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="minimalism"] .pill{border-radius:8px;box-shadow:none;background:#111}
html[data-design="minimalism"] .tile,html[data-design="minimalism"] .card{border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.08);border:1px solid rgba(17,17,17,.1)}
html[data-design="minimalism"] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.92);box-shadow:none;border:1px solid rgba(17,17,17,.1)}
html[data-design="minimalism"] .tile-wide,html[data-design="minimalism"] .dark-band{background:#111}
html[data-design="minimalism"] .aurora{opacity:.18}

/* Brutalism */
html[data-design="brutalism"] body{font-family:Arial,Helvetica,sans-serif;letter-spacing:0}
html[data-design="brutalism"] h1,html[data-design="brutalism"] h2,html[data-design="brutalism"] h3{font-weight:800;letter-spacing:-.055em;text-transform:none}
html[data-design="brutalism"] .nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:3px solid #050505}
html[data-design="brutalism"] .mark{font-weight:800}
html[data-design="brutalism"] .design-trigger,html[data-design="brutalism"] #lang{border:2px solid #050505;border-radius:0;color:#050505}
html[data-design="brutalism"] .pill{background:#ff3b00;color:#fff;border:3px solid #050505;border-radius:0;box-shadow:6px 6px 0 #050505;font-weight:800}
html[data-design="brutalism"] .tile,html[data-design="brutalism"] .card{border:3px solid #050505;border-radius:0;box-shadow:8px 8px 0 #050505}
html[data-design="brutalism"] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper);border:3px solid #050505;box-shadow:8px 8px 0 #050505}
html[data-design="brutalism"] .tile-wide,html[data-design="brutalism"] .dark-band{background:#050505;color:#fff}
html[data-design="brutalism"] .aurora{opacity:.35;filter:none}
html[data-design="brutalism"] .design-panel{border:3px solid #050505;border-radius:0;box-shadow:10px 10px 0 #050505;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="brutalism"] .design-option{border:2px solid #050505;border-radius:0}

/* Maximalism */
html[data-design="maximalism"] body{background:radial-gradient(circle at 8% 12%,rgba(255,176,0,.13),transparent 26%),radial-gradient(circle at 92% 32%,rgba(255,46,136,.12),transparent 30%),var(--paper)}
html[data-design="maximalism"] .nav{background:rgba(255,248,242,.78);border-bottom-color:rgba(255,46,136,.25)}
html[data-design="maximalism"] .hero h1{font-weight:750;letter-spacing:-.06em}
html[data-design="maximalism"] .pill{background:linear-gradient(100deg,#ff2e88,#7c3aed);box-shadow:0 12px 28px rgba(255,46,136,.28);border-radius:12px}
html[data-design="maximalism"] .tile,html[data-design="maximalism"] .card{border-radius:28px;border:2px solid rgba(255,255,255,.75);box-shadow:0 18px 40px rgba(65,30,100,.18)}
html[data-design="maximalism"] .tile:nth-child(2){transform:rotate(-.8deg)}
html[data-design="maximalism"] .tile:nth-child(3){transform:rotate(.8deg)}
html[data-design="maximalism"] .glass{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-design="maximalism"] .aurora{opacity:1}
html[data-design="maximalism"] .design-panel{border-color:rgba(255,46,136,.3)}

/* Neomorphism */
html[data-design="neomorphism"] body{background:var(--paper)}
html[data-design="neomorphism"] .nav{background:rgba(231,235,240,.92);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:0 5px 12px rgba(130,140,154,.18)}
html[data-design="neomorphism"] .pill{background:var(--paper);color:var(--blue);box-shadow:7px 7px 14px rgba(145,155,170,.35),-6px -6px 14px rgba(255,255,255,.95);border:0}
html[data-design="neomorphism"] .tile,html[data-design="neomorphism"] .card,html[data-design="neomorphism"] .glass{background:var(--paper);color:var(--ink);border:0;box-shadow:9px 9px 20px rgba(145,155,170,.34),-9px -9px 20px rgba(255,255,255,.95);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="neomorphism"] .tile-wide,html[data-design="neomorphism"] .dark-band{background:var(--paper);color:var(--ink)}
html[data-design="neomorphism"] .tile-wide .body,html[data-design="neomorphism"] .tile-wide .price .note,html[data-design="neomorphism"] .card p,html[data-design="neomorphism"] .stack{color:var(--muted)!important}
html[data-design="neomorphism"] .pin,html[data-design="neomorphism"] .closing{background:var(--paper);color:var(--ink)}
html[data-design="neomorphism"] .tasks li{border-color:rgba(39,49,61,.1)}
html[data-design="neomorphism"] .tasks .t{color:var(--muted)}
html[data-design="neomorphism"] .design-panel{background:rgba(231,235,240,.94);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Skeuomorphism */
html[data-design="skeuomorphism"] body{background:linear-gradient(180deg,#eee7d8,#e2d9ca);font-family:Georgia,'Times New Roman',serif}
html[data-design="skeuomorphism"] h1,html[data-design="skeuomorphism"] h2,html[data-design="skeuomorphism"] h3{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.025em}
html[data-design="skeuomorphism"] .nav{background:linear-gradient(#f8f3e9,#d9d0c1);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #9e927f;box-shadow:0 2px 7px rgba(60,45,30,.25)}
html[data-design="skeuomorphism"] .pill,html[data-design="skeuomorphism"] .design-trigger,html[data-design="skeuomorphism"] #lang{background:linear-gradient(#fff,#d7cdbd);color:#27221b;border:1px solid #9e927f;box-shadow:inset 0 1px #fff,0 2px 5px rgba(60,45,30,.3);border-radius:7px}
html[data-design="skeuomorphism"] .tile,html[data-design="skeuomorphism"] .card,html[data-design="skeuomorphism"] .glass{background:linear-gradient(#f8f3e9,#ddd3c4);border:1px solid #a79a88;border-radius:10px;box-shadow:inset 0 1px #fff,0 7px 15px rgba(60,45,30,.25);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="skeuomorphism"] .tile-wide,html[data-design="skeuomorphism"] .dark-band,html[data-design="skeuomorphism"] .pin,html[data-design="skeuomorphism"] .closing{background:linear-gradient(#322b23,#1f1a15);color:#f7f0e5}
html[data-design="skeuomorphism"] .design-panel{background:linear-gradient(#f8f3e9,#ddd3c4);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#a79a88;border-radius:10px}
html[data-design="skeuomorphism"] .design-option{background:linear-gradient(#fff,#e2d8ca);border-color:#a79a88;border-radius:8px}

/* Claymorphism */
html[data-design="claymorphism"] .nav{background:rgba(247,244,255,.78);border-color:rgba(98,87,232,.1)}
html[data-design="claymorphism"] .pill{background:linear-gradient(145deg,#7c73ff,#5950d9);border-radius:18px;box-shadow:inset 0 -4px 8px rgba(38,30,130,.22),0 12px 20px rgba(68,55,130,.22)}
html[data-design="claymorphism"] .tile,html[data-design="claymorphism"] .card,html[data-design="claymorphism"] .glass{border:0;border-radius:28px;background:linear-gradient(145deg,#f9f7ff,#e8e2ff);box-shadow:inset 0 -5px 12px rgba(92,78,180,.1),0 16px 26px rgba(68,55,130,.16);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="claymorphism"] .tile-wide,html[data-design="claymorphism"] .dark-band,html[data-design="claymorphism"] .pin,html[data-design="claymorphism"] .closing{background:#2b2540;color:#fff}
html[data-design="claymorphism"] .design-panel{border:0;border-radius:28px;background:rgba(247,244,255,.94);box-shadow:inset 0 -5px 12px rgba(92,78,180,.08),0 20px 45px rgba(68,55,130,.18)}
html[data-design="claymorphism"] .design-option{border:0;border-radius:18px;box-shadow:inset 0 -3px 7px rgba(92,78,180,.08),0 6px 12px rgba(68,55,130,.1)}

/* Glassmorphism */
html[data-design="glassmorphism"] body{background:radial-gradient(circle at 10% 10%,#8bb6ff 0,transparent 32%),radial-gradient(circle at 90% 25%,#d5a9ff 0,transparent 32%),linear-gradient(135deg,#dfe9ff,#f2f7ff 45%,#dce5ff)}
html[data-design="glassmorphism"] .nav{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.45)}
html[data-design="glassmorphism"] .hero,.html[data-design="glassmorphism"] .section,.html[data-design="glassmorphism"] .closing{background:transparent}
html[data-design="glassmorphism"] .tile,html[data-design="glassmorphism"] .card,html[data-design="glassmorphism"] .glass{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.16));border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px rgba(255,255,255,.8),0 24px 50px rgba(53,76,130,.18);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
html[data-design="glassmorphism"] .tile-wide,html[data-design="glassmorphism"] .dark-band,html[data-design="glassmorphism"] .pin,html[data-design="glassmorphism"] .closing{background:rgba(16,24,46,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-design="glassmorphism"] .design-panel{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7)}
html[data-design="glassmorphism"] .aurora{opacity:1}

/* Liquid Glass */
html[data-design="liquid-glass"] body{background:radial-gradient(55% 35% at 12% 5%,rgba(116,132,255,.55),transparent 70%),radial-gradient(45% 40% at 90% 18%,rgba(255,133,190,.45),transparent 72%),linear-gradient(145deg,#dfe8ff,#f5efff 48%,#d8e5ff)}
html[data-design="liquid-glass"] .nav{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.45);box-shadow:0 8px 30px rgba(68,77,130,.08)}
html[data-design="liquid-glass"] .tile,html[data-design="liquid-glass"] .card,html[data-design="liquid-glass"] .glass{background:linear-gradient(120deg,rgba(255,255,255,.48),rgba(255,255,255,.1));border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px rgba(255,255,255,.85),inset 0 -1px rgba(255,255,255,.15),0 30px 60px rgba(56,66,126,.18);backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%);border-radius:30px}
html[data-design="liquid-glass"] .tile::before,html[data-design="liquid-glass"] .card::before,html[data-design="liquid-glass"] .glass::before{background:radial-gradient(80% 70% at 10% 0%,rgba(255,255,255,.55),transparent 60%)}
html[data-design="liquid-glass"] .tile-wide,html[data-design="liquid-glass"] .dark-band,html[data-design="liquid-glass"] .pin,html[data-design="liquid-glass"] .closing{background:linear-gradient(135deg,rgba(13,20,41,.82),rgba(46,40,92,.62));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-design="liquid-glass"] .pill{background:linear-gradient(110deg,#697cff,#9a74ff);box-shadow:inset 0 1px rgba(255,255,255,.5),0 12px 30px rgba(78,88,190,.25);border-radius:18px}
html[data-design="liquid-glass"] .design-panel{background:rgba(255,255,255,.48);border-color:rgba(255,255,255,.72)}
html[data-design="liquid-glass"] .aurora{opacity:1;filter:blur(2px)}

/* Spatial UI */
html[data-design="spatial"] body{background:linear-gradient(145deg,#eef4fb,#dfe7f2)}
html[data-design="spatial"] .nav{background:rgba(239,245,252,.78);border-color:rgba(23,34,51,.1)}
html[data-design="spatial"] .hero-inner{transform-style:preserve-3d}
html[data-design="spatial"] .tile,html[data-design="spatial"] .card,html[data-design="spatial"] .glass{background:rgba(248,251,255,.86);border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:0 20px 35px rgba(35,53,80,.16),0 3px 8px rgba(35,53,80,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-design="spatial"] .tile:nth-child(2){transform:translateY(5px)}
html[data-design="spatial"] .tile:nth-child(3){transform:translateY(-5px)}
html[data-design="spatial"] .tile-wide,html[data-design="spatial"] .dark-band,html[data-design="spatial"] .pin,html[data-design="spatial"] .closing{background:linear-gradient(145deg,#0e1828,#172b45);color:#f5f8fc}
html[data-design="spatial"] .pill{border-radius:14px;background:linear-gradient(145deg,#4b91ff,#2f6fe0);box-shadow:0 12px 20px rgba(38,83,145,.28),inset 0 1px rgba(255,255,255,.4)}
html[data-design="spatial"] .design-panel{background:rgba(248,251,255,.84);border-color:rgba(255,255,255,.9);box-shadow:0 28px 55px rgba(35,53,80,.18)}

/* Keep the dark nav controls readable where the existing JS adds .dark. */
html[data-design="neomorphism"] .nav.dark,
html[data-design="skeuomorphism"] .nav.dark,
html[data-design="claymorphism"] .nav.dark{color:var(--paper)}

/* Fallback for browsers without color-mix. */
@supports not (color:color-mix(in srgb, white 50%, black)){
  .design-panel{background:rgba(251,250,247,.97)}
  .design-trigger:hover,.design-trigger[aria-expanded="true"]{background:rgba(251,250,247,.8)}
}

@media (max-width:860px){
  .design-panel{position:fixed;left:var(--gut);right:var(--gut);top:auto;bottom:max(.75rem,env(safe-area-inset-bottom));width:auto;transform:translateY(12px) scale(.98);transform-origin:bottom center;border-radius:24px;padding:1rem;max-height:min(78vh,620px)}
  .design-control.open .design-panel{transform:none}
  .design-options{grid-template-columns:repeat(2,1fr);max-height:55vh}
  .design-trigger{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
  .design-trigger .design-label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .design-trigger,.design-panel,.design-option{transition:none}
  html[data-design="maximalism"] .tile:nth-child(2),html[data-design="maximalism"] .tile:nth-child(3),html[data-design="spatial"] .tile:nth-child(2),html[data-design="spatial"] .tile:nth-child(3){transform:none}
}


/* =========================================================
   FINAL DESIGN SYSTEM — readable, unified, no banding
   ========================================================= */
.design-swatch{display:none !important}
.design-option{min-height:4.4rem;padding:.75rem .8rem;text-align:left}
.design-option-name{font-size:.82rem}
.design-option-desc{font-size:.68rem;line-height:1.3}
.design-options{overflow:visible;max-height:none}

/* One canvas per visual language. Sections inherit the same palette. */
html[data-design="minimalism"] body{
  --paper:#ffffff;--surface:#f7f7f7;--ink:#111111;--muted:#505050;--blue:#175cd3;--blue-lift:#175cd3;
  background:#fff;color:#111;
}
html[data-design="minimalism"] .pin,html[data-design="minimalism"] .dark-band,html[data-design="minimalism"] .closing{
  background:#f7f7f7;color:#111;
}
html[data-design="minimalism"] .pin h2,html[data-design="minimalism"] .closing h2{color:#111}
html[data-design="minimalism"] .tasks .t{color:#333}
html[data-design="minimalism"] .tasks li{border-color:rgba(17,17,17,.14)}
html[data-design="minimalism"] .card{background:#111;color:#fff}
html[data-design="minimalism"] .card p{color:#d4d4d4}

html[data-design="brutalism"] body{
  --paper:#f7f5ee;--surface:#f7f5ee;--ink:#111;--muted:#333;--blue:#0057ff;--blue-lift:#0057ff;
  background:#f7f5ee;color:#111;
}
html[data-design="brutalism"] .pin,html[data-design="brutalism"] .dark-band,html[data-design="brutalism"] .closing{background:#f7f5ee;color:#111}
html[data-design="brutalism"] .pin h2,html[data-design="brutalism"] .closing h2{color:#111}
html[data-design="brutalism"] .tasks .t{color:#222}
html[data-design="brutalism"] .tasks li{border-color:#111}
html[data-design="brutalism"] .card{background:#fff;color:#111;border:3px solid #111;border-radius:18px;box-shadow:8px 8px 0 #111}
html[data-design="brutalism"] .card p{color:#333}

html[data-design="maximalism"] body{
  --paper:#fff8f2;--surface:#fff8f2;--ink:#20152a;--muted:#55485d;--blue:#6b36e8;--blue-lift:#8b5cf6;
  background:radial-gradient(circle at 8% 8%,rgba(255,176,0,.13),transparent 25%),radial-gradient(circle at 92% 28%,rgba(255,46,136,.12),transparent 28%),#fff8f2;color:#20152a;
}
html[data-design="maximalism"] .pin,html[data-design="maximalism"] .dark-band,html[data-design="maximalism"] .closing{background:rgba(255,248,242,.78);color:#20152a}
html[data-design="maximalism"] .pin h2,html[data-design="maximalism"] .closing h2{color:#20152a}
html[data-design="maximalism"] .tasks .t{color:#43354a}
html[data-design="maximalism"] .tasks li{border-color:rgba(32,21,42,.15)}
html[data-design="maximalism"] .card{background:rgba(255,255,255,.72);color:#20152a;border:1px solid rgba(107,54,232,.16);box-shadow:0 22px 45px rgba(65,30,100,.16)}
html[data-design="maximalism"] .card p{color:#55485d}

html[data-design="neomorphism"] body{
  --paper:#e7ebf0;--surface:#e7ebf0;--ink:#27313d;--muted:#53606e;--blue:#3f6fb5;--blue-lift:#3f6fb5;
  background:#e7ebf0;color:#27313d;
}
html[data-design="neomorphism"] .pin,html[data-design="neomorphism"] .dark-band,html[data-design="neomorphism"] .closing{background:#e7ebf0;color:#27313d}
html[data-design="neomorphism"] .pin h2,html[data-design="neomorphism"] .closing h2{color:#27313d}
html[data-design="neomorphism"] .tasks .t{color:#4a5664}
html[data-design="neomorphism"] .tasks li{border-color:rgba(39,49,61,.10)}
html[data-design="neomorphism"] .steps li,.steps li.reveal.in{transition:transform .7s var(--ease),opacity .7s var(--ease)}
html[data-design="neomorphism"] .steps li:hover{transform:translateY(-4px)}
html[data-design="neomorphism"] .steps h3{color:#27313d}
html[data-design="neomorphism"] .steps p{color:#53606e}
html[data-design="neomorphism"] .num{color:#3f6fb5}
html[data-design="neomorphism"] .card{background:#e7ebf0;color:#27313d;border:0;border-radius:24px;box-shadow:10px 10px 22px rgba(145,155,170,.36),-10px -10px 22px rgba(255,255,255,.95)}
html[data-design="neomorphism"] .card p{color:#53606e}
html[data-design="neomorphism"] .card-kicker{color:#3f6fb5}
html[data-design="neomorphism"] .tile{background:#e7ebf0;box-shadow:10px 10px 22px rgba(145,155,170,.36),-10px -10px 22px rgba(255,255,255,.95)}
html[data-design="neomorphism"] .section.alt{background:#e7ebf0}

html[data-design="skeuomorphism"] body{
  --paper:#eee7d8;--surface:#eee7d8;--ink:#29231d;--muted:#5e554b;--blue:#6b4b2a;--blue-lift:#8a633b;
  background:linear-gradient(180deg,#eee7d8,#e2d9ca);color:#29231d;
}
html[data-design="skeuomorphism"] .pin,html[data-design="skeuomorphism"] .dark-band,html[data-design="skeuomorphism"] .closing{background:transparent;color:#29231d}
html[data-design="skeuomorphism"] .pin h2,html[data-design="skeuomorphism"] .closing h2{color:#29231d}
html[data-design="skeuomorphism"] .tasks .t{color:#433a32}
html[data-design="skeuomorphism"] .tasks li{border-color:rgba(41,35,29,.16)}
html[data-design="skeuomorphism"] .card{background:linear-gradient(#f8f3e9,#ddd3c4);color:#29231d;border:1px solid #a79a88;box-shadow:inset 0 1px #fff,0 9px 18px rgba(60,45,30,.22)}
html[data-design="skeuomorphism"] .card p{color:#5e554b}

html[data-design="claymorphism"] body{
  --paper:#f7f4ff;--surface:#f7f4ff;--ink:#2b2540;--muted:#625b72;--blue:#6258e8;--blue-lift:#746aff;
  background:#f7f4ff;color:#2b2540;
}
html[data-design="claymorphism"] .pin,html[data-design="claymorphism"] .dark-band,html[data-design="claymorphism"] .closing{background:#f7f4ff;color:#2b2540}
html[data-design="claymorphism"] .pin h2,html[data-design="claymorphism"] .closing h2{color:#2b2540}
html[data-design="claymorphism"] .tasks .t{color:#4f4860}
html[data-design="claymorphism"] .tasks li{border-color:rgba(43,37,64,.10)}
html[data-design="claymorphism"] .card{background:linear-gradient(145deg,#f9f7ff,#e8e2ff);color:#2b2540;border:0;border-radius:28px;box-shadow:inset 0 -5px 12px rgba(92,78,180,.1),0 16px 26px rgba(68,55,130,.16)}
html[data-design="claymorphism"] .card p{color:#625b72}

html[data-design="glassmorphism"] body{
  --paper:#eef4ff;--surface:#eef4ff;--ink:#18243d;--muted:#43506a;--blue:#3867d6;--blue-lift:#6f9cff;
  background:radial-gradient(circle at 10% 10%,#8bb6ff 0,transparent 32%),radial-gradient(circle at 90% 25%,#d5a9ff 0,transparent 32%),linear-gradient(135deg,#dfe9ff,#f2f7ff 45%,#dce5ff);color:#18243d;
}
html[data-design="glassmorphism"] .pin,html[data-design="glassmorphism"] .dark-band,html[data-design="glassmorphism"] .closing{background:transparent;color:#18243d}
html[data-design="glassmorphism"] .pin h2,html[data-design="glassmorphism"] .closing h2{color:#18243d}
html[data-design="glassmorphism"] .tasks .t{color:#34435f}
html[data-design="glassmorphism"] .tasks li{border-color:rgba(24,36,61,.14)}
html[data-design="glassmorphism"] .card{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.24));color:#18243d;border:1px solid rgba(255,255,255,.8);box-shadow:0 24px 50px rgba(53,76,130,.18);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
html[data-design="glassmorphism"] .card p{color:#43506a}

html[data-design="liquid-glass"] body{
  --paper:#edf2ff;--surface:#edf2ff;--ink:#18213b;--muted:#43506a;--blue:#5b6ff2;--blue-lift:#8b7cff;
  background:radial-gradient(55% 35% at 12% 5%,rgba(116,132,255,.55),transparent 70%),radial-gradient(45% 40% at 90% 18%,rgba(255,133,190,.45),transparent 72%),linear-gradient(145deg,#dfe8ff,#f5efff 48%,#d8e5ff);color:#18213b;
}
html[data-design="liquid-glass"] .pin,html[data-design="liquid-glass"] .dark-band,html[data-design="liquid-glass"] .closing{background:transparent;color:#18213b}
html[data-design="liquid-glass"] .pin h2,html[data-design="liquid-glass"] .closing h2{color:#18213b}
html[data-design="liquid-glass"] .tasks .t{color:#34435f}
html[data-design="liquid-glass"] .tasks li{border-color:rgba(24,33,59,.14)}
html[data-design="liquid-glass"] .card{background:linear-gradient(120deg,rgba(255,255,255,.62),rgba(255,255,255,.18));color:#18213b;border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 60px rgba(56,66,126,.18);backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%)}
html[data-design="liquid-glass"] .card p{color:#43506a}

html[data-design="spatial"] body{
  --paper:#eef4fb;--surface:#eef4fb;--ink:#1a2b43;--muted:#4d5f75;--blue:#3977dc;--blue-lift:#5c96ff;
  background:linear-gradient(145deg,#eef4fb,#dfe7f2);color:#1a2b43;
}
html[data-design="spatial"] .pin,html[data-design="spatial"] .dark-band,html[data-design="spatial"] .closing{background:transparent;color:#1a2b43}
html[data-design="spatial"] .pin h2,html[data-design="spatial"] .closing h2{color:#1a2b43}
html[data-design="spatial"] .tasks .t{color:#40536c}
html[data-design="spatial"] .tasks li{border-color:rgba(26,43,67,.14)}
html[data-design="spatial"] .card{background:rgba(248,251,255,.9);color:#1a2b43;border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:0 20px 35px rgba(35,53,80,.16),0 3px 8px rgba(35,53,80,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-design="spatial"] .card p{color:#4d5f75}

/* All design modes: make the method section actually participate. */
html[data-design] .steps li{padding:1.25rem;border-radius:24px}
html[data-design] .steps li:hover{box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 10%,transparent)}
html[data-design] .steps p{line-height:1.55}

@media (max-width:860px){
  .design-panel{overflow:auto}
  .design-options{overflow:visible;max-height:none}
}

/* =========================================================
   FINAL CANVAS OVERRIDE — continuous page, uniform project grid
   ========================================================= */
html[data-design] .pin,
html[data-design] .pin-track,
html[data-design] .pin-stage,
html[data-design] .section,
html[data-design] .section.alt,
html[data-design] .carousel-section,
html[data-design] .dark-band,
html[data-design] .closing{
  background:transparent !important;
  color:var(--ink);
}

html[data-design] .pin h2,
html[data-design] .dark-band h2,
html[data-design] .closing h2{color:var(--ink) !important;}
html[data-design] .pin .pin-foot{color:var(--muted);}
html[data-design] .tasks .t{color:var(--muted);}
html[data-design] .tasks li{border-color:var(--hairline);}

#services .aurora,
#travaux .aurora{display:none !important;}

/* The project grid is never a translucent colour sampler. All cards
   share one fill per mode, so moving across the row cannot produce
   pink/blue/white card-to-card shifts. */
html[data-design="minimalism"] #travaux .card{background:#f7f7f7 !important;}
html[data-design="brutalism"] #travaux .card{background:#fff !important;}
html[data-design="maximalism"] #travaux .card{background:#fff8f2 !important;}
html[data-design="neomorphism"] #travaux .card{background:#e7ebf0 !important;}
html[data-design="skeuomorphism"] #travaux .card{background:linear-gradient(#f8f3e9,#ddd3c4) !important;}
html[data-design="claymorphism"] #travaux .card{background:linear-gradient(145deg,#f9f7ff,#e8e2ff) !important;}
html[data-design="glassmorphism"] #travaux .card{background:rgba(255,255,255,.58) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
html[data-design="liquid-glass"] #travaux .card{background:rgba(255,255,255,.58) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
html[data-design="spatial"] #travaux .card{background:#f8fbff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}

/* The navigation no longer switches to a dark treatment when the old
   dark work section passes underneath it. */
html[data-design] .nav.dark{
  background:color-mix(in srgb,var(--paper) 90%,transparent) !important;
  border-bottom-color:var(--hairline) !important;
  color:var(--ink);
}
html[data-design] .nav.dark .mark{color:var(--ink) !important;}
html[data-design] .nav.dark .links a{color:var(--muted) !important;}
html[data-design] .nav.dark .links a:hover{color:var(--ink) !important;}
html[data-design] .nav.dark #lang,
html[data-design] .nav.dark .design-trigger{color:var(--muted) !important;border-color:var(--hairline) !important;}

@media (max-width:860px){
  html[data-design] .nav.dark .burger span{background:var(--ink) !important;}
}

/* =========================================================
   FINAL DESIGN SWITCHER — content-driven sizing
   The panel grows with its contents and only becomes scrollable
   when the viewport cannot display the complete menu. The grid
   also reflows automatically if more design options are added.
   ========================================================= */
.design-panel{
  width:min(520px,calc(100vw - 2rem));
  max-width:calc(100vw - 2rem);
  max-height:calc(100dvh - var(--nav-h) - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.design-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  grid-auto-rows:auto;
  align-items:stretch;
  gap:.55rem;
  max-height:none;
  overflow:visible;
}

.design-option{
  min-width:0;
  min-height:0;
  height:auto;
  align-self:stretch;
}

@media (max-width:860px){
  /* On phones the switcher is anchored to the viewport, directly below
     the fixed header. `top` is used instead of combining top+bottom so
     the panel keeps a natural height driven by its contents. */
  .design-panel{
    position:fixed;
    top:calc(var(--nav-h) + env(safe-area-inset-top) + .65rem);
    left:max(.7rem,env(safe-area-inset-left));
    right:max(.7rem,env(safe-area-inset-right));
    bottom:auto;
    width:auto;
    max-width:none;
    max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.3rem);
    overflow:auto;
  }

  .design-options{
    grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));
  }
}

@media (max-width:380px){
  .design-options{
    grid-template-columns:1fr;
  }
}



/* The switcher itself follows the active visual language instead of
   falling back to a bright generic glass surface. */
.design-swatch{display:none !important}
.design-panel{
  background:color-mix(in srgb,var(--surface) 94%,var(--paper));
  color:var(--ink);
  border-color:var(--hairline);
  box-shadow:0 26px 70px rgba(0,0,0,.34),0 8px 24px rgba(0,0,0,.18);
}
.design-option{
  background:color-mix(in srgb,var(--surface) 88%,var(--paper));
  color:var(--ink);
  border-color:var(--hairline);
}
.design-option-desc,.design-panel-sub,.design-foot,.design-close{color:var(--muted)}
.design-option:hover{
  background:color-mix(in srgb,var(--surface) 72%,var(--paper));
  border-color:color-mix(in srgb,var(--blue) 60%,var(--hairline));
  box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 22px color-mix(in srgb,var(--blue) 16%,transparent);
}
.design-option[aria-pressed="true"]{
  border-color:var(--blue);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 22%,transparent),0 10px 24px rgba(0,0,0,.16);
}

/* Square project cards at every size. The phone breakpoint below turns
   the same cards into a horizontal touch carousel. */
#travaux .card{aspect-ratio:1 / 1;min-height:0;height:auto}

/* =========================================================
   FINAL RESPONSIVE / DARK VISUAL PASS
   - Mobile project cards are a real horizontal touch rail.
   - Every project card is square at every breakpoint.
   - The page canvas is darker and each visual mode has a distinct
     visual identity without changing the content structure.
   - Header geometry is explicit and content-safe on small screens.
   ========================================================= */

/* ---------- Shared square project geometry ---------- */
#travaux .rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  overflow:visible;
  overscroll-behavior-x:contain;
}
#travaux .card{
  width:100%;
  min-width:0;
  min-height:0;
  aspect-ratio:1 / 1;
  height:auto;
  padding:clamp(1rem,2.2vw,1.45rem);
  overflow:hidden;
  justify-content:flex-start;
}
#travaux .card h3{font-size:clamp(1.15rem,2.4vw,1.45rem)}
#travaux .card p{font-size:clamp(.76rem,1.15vw,.9rem);line-height:1.42}
#travaux .card .stack{font-size:.68rem;line-height:1.3;margin-top:.8rem !important}
#travaux .card .card-actions{margin-top:.75rem}

/* ---------- Darker single-canvas base ---------- */
html:not([data-design]){
  --paper:#111418;--surface:#191d22;--ink:#f4f6f8;--muted:#a9b0b9;
  --dark:#0b0d10;--blue:#65aaff;--blue-lift:#9bc8ff;--amber:#e0a15b;
  --hairline:rgba(244,246,248,.13);--hairline-dark:rgba(244,246,248,.16);
}
html:not([data-design]) body{background:#111418;color:#f4f6f8}
html:not([data-design]) .hero .aurora{opacity:.18}
html:not([data-design]) .nav{background:rgba(17,20,24,.92);border-bottom-color:rgba(244,246,248,.11);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html:not([data-design]) .nav .mark{color:#f4f6f8}
html:not([data-design]) .nav .links a{color:#a9b0b9}
html:not([data-design]) .nav .links a:hover{color:#f4f6f8}
html:not([data-design]) .nav #lang,
html:not([data-design]) .nav .design-trigger{color:#cbd1d8;border-color:rgba(244,246,248,.2)}
html:not([data-design]) .nav.dark{background:rgba(17,20,24,.94);border-bottom-color:rgba(244,246,248,.12)}
html:not([data-design]) .pin,
html:not([data-design]) .dark-band,
html:not([data-design]) .closing{background:transparent !important;color:#f4f6f8}
html:not([data-design]) .pin h2,
html:not([data-design]) .closing h2{color:#f4f6f8 !important}
html:not([data-design]) .tasks .t{color:#a9b0b9}
html:not([data-design]) #travaux .card{background:#1a1e23;color:#f4f6f8;border:1px solid rgba(244,246,248,.10);box-shadow:0 18px 40px rgba(0,0,0,.28)}
html:not([data-design]) #travaux .card p{color:#b8bec6}
html:not([data-design]) #travaux .card-kicker{color:#e0a15b}
html:not([data-design]) #travaux .stack{color:#7f8893 !important}

/* ---------- Minimalism: near-black, flat, disciplined ---------- */
html[data-design="minimalism"]{
  --paper:#111315;--surface:#181a1d;--ink:#f3f4f5;--muted:#a1a5aa;
  --blue:#79a9ff;--blue-lift:#a9c8ff;--hairline:rgba(243,244,245,.14);
}
html[data-design="minimalism"] body{background:#111315;color:#f3f4f5}
html[data-design="minimalism"] .nav{background:rgba(17,19,21,.94);border-color:rgba(243,244,245,.11)}
html[data-design="minimalism"] .hero .aurora{opacity:.08}
html[data-design="minimalism"] #travaux .card{background:#181a1d;color:#f3f4f5;border:1px solid rgba(243,244,245,.12);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
html[data-design="minimalism"] #travaux .card p{color:#b5b8bc}
html[data-design="minimalism"] #travaux .card-kicker{color:#79a9ff}

/* ---------- Brutalism: hard contrast, black borders, raw accent ---------- */
html[data-design="brutalism"]{
  --paper:#121212;--surface:#181818;--ink:#f7f5ee;--muted:#c4c0b6;
  --blue:#4f8cff;--blue-lift:#ffd400;--hairline:#f7f5ee;
}
html[data-design="brutalism"] body{background:#121212;color:#f7f5ee}
html[data-design="brutalism"] .nav{background:#121212;border-bottom:3px solid #f7f5ee}
html[data-design="brutalism"] .design-trigger,html[data-design="brutalism"] #lang{color:#f7f5ee;border-color:#f7f5ee}
html[data-design="brutalism"] .hero .aurora{display:none}
html[data-design="brutalism"] #travaux .card{background:#f7f5ee;color:#090909;border:3px solid #f7f5ee;border-radius:10px;box-shadow:8px 8px 0 #4f8cff}
html[data-design="brutalism"] #travaux .card p{color:#242424}
html[data-design="brutalism"] #travaux .card-kicker{color:#d93600}
html[data-design="brutalism"] #travaux .stack{color:#4d4d4d !important}

/* ---------- Maximalism: deep plum with controlled saturated accents ---------- */
html[data-design="maximalism"]{
  --paper:#160d20;--surface:#21112e;--ink:#fff4fb;--muted:#c8b5c8;
  --blue:#ff4b9b;--blue-lift:#b58cff;--amber:#ffbe4d;--hairline:rgba(255,255,255,.16);
}
html[data-design="maximalism"] body{background:radial-gradient(circle at 8% 12%,rgba(255,190,77,.09),transparent 24%),radial-gradient(circle at 92% 32%,rgba(255,75,155,.10),transparent 26%),#160d20;color:#fff4fb}
html[data-design="maximalism"] .nav{background:rgba(22,13,32,.9);border-color:rgba(255,75,155,.22)}
html[data-design="maximalism"] .hero .aurora{opacity:.14}
html[data-design="maximalism"] #travaux .card{background:#21112e;color:#fff4fb;border:1px solid rgba(255,75,155,.28);border-radius:26px;box-shadow:0 20px 45px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.08)}
html[data-design="maximalism"] #travaux .card p{color:#d1c1d2}
html[data-design="maximalism"] #travaux .card-kicker{color:#ff70b2}

/* ---------- Neomorphism: dark soft-touch surfaces ---------- */
html[data-design="neomorphism"]{
  --paper:#252a31;--surface:#252a31;--ink:#edf1f5;--muted:#aeb7c1;
  --blue:#8eb5ff;--blue-lift:#b7d0ff;--hairline:rgba(237,241,245,.08);
}
html[data-design="neomorphism"] body{background:#252a31;color:#edf1f5}
html[data-design="neomorphism"] .nav{background:#252a31;border:0;box-shadow:7px 7px 18px rgba(0,0,0,.34),-7px -7px 18px rgba(255,255,255,.035)}
html[data-design="neomorphism"] .hero .aurora{opacity:.05}
html[data-design="neomorphism"] #travaux .card{background:#252a31;color:#edf1f5;border:0;border-radius:24px;box-shadow:10px 10px 22px rgba(0,0,0,.34),-10px -10px 22px rgba(255,255,255,.045)}
html[data-design="neomorphism"] #travaux .card p{color:#aeb7c1}
html[data-design="neomorphism"] #travaux .card-kicker{color:#8eb5ff}

/* ---------- Skeuomorphism: dark physical material ---------- */
html[data-design="skeuomorphism"]{
  --paper:#211c17;--surface:#2d251e;--ink:#f5eee3;--muted:#c1b3a3;
  --blue:#78b4ed;--blue-lift:#9ccaff;--hairline:rgba(245,238,227,.18);
}
html[data-design="skeuomorphism"] body{background:linear-gradient(180deg,#211c17,#18130f);color:#f5eee3}
html[data-design="skeuomorphism"] .nav{background:linear-gradient(#3a3027,#211b16);border-bottom:1px solid #6f6253;box-shadow:0 2px 8px rgba(0,0,0,.45)}
html[data-design="skeuomorphism"] .hero .aurora{opacity:.06}
html[data-design="skeuomorphism"] #travaux .card{background:linear-gradient(#3a3027,#261f19);color:#f5eee3;border:1px solid #786a59;border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.18),0 10px 20px rgba(0,0,0,.42)}
html[data-design="skeuomorphism"] #travaux .card p{color:#c1b3a3}
html[data-design="skeuomorphism"] #travaux .card-kicker{color:#9ccaff}

/* ---------- Claymorphism: inflated dark clay ---------- */
html[data-design="claymorphism"]{
  --paper:#201c30;--surface:#2b2540;--ink:#f6f1ff;--muted:#c3bad6;
  --blue:#9d94ff;--blue-lift:#c1bcff;--hairline:rgba(246,241,255,.10);
}
html[data-design="claymorphism"] body{background:#201c30;color:#f6f1ff}
html[data-design="claymorphism"] .nav{background:rgba(32,28,48,.92);border-color:rgba(157,148,255,.14)}
html[data-design="claymorphism"] .hero .aurora{opacity:.06}
html[data-design="claymorphism"] #travaux .card{background:linear-gradient(145deg,#332b4d,#27213a);color:#f6f1ff;border:0;border-radius:28px;box-shadow:inset 0 -6px 12px rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.30)}
html[data-design="claymorphism"] #travaux .card p{color:#c3bad6}
html[data-design="claymorphism"] #travaux .card-kicker{color:#aaa2ff}

/* ---------- Glassmorphism: dark backdrop, translucent panes ---------- */
html[data-design="glassmorphism"]{
  --paper:#0c1426;--surface:#121e36;--ink:#edf4ff;--muted:#a8b6cf;
  --blue:#79a6ff;--blue-lift:#b8d0ff;--hairline:rgba(237,244,255,.18);
}
html[data-design="glassmorphism"] body{background:radial-gradient(circle at 15% 12%,rgba(80,130,255,.18),transparent 28%),radial-gradient(circle at 86% 35%,rgba(157,103,255,.12),transparent 28%),#0c1426;color:#edf4ff}
html[data-design="glassmorphism"] .nav{background:rgba(12,20,38,.62);border-color:rgba(255,255,255,.14)}
html[data-design="glassmorphism"] .hero .aurora{opacity:.18}
html[data-design="glassmorphism"] #travaux .card{background:rgba(255,255,255,.09);color:#edf4ff;border:1px solid rgba(255,255,255,.22);border-radius:24px;box-shadow:inset 0 1px rgba(255,255,255,.16),0 20px 45px rgba(0,0,0,.30);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-design="glassmorphism"] #travaux .card p{color:#b6c4dc}
html[data-design="glassmorphism"] #travaux .card-kicker{color:#9fc0ff}

/* ---------- Liquid Glass: darker, luminous, fluid ---------- */
html[data-design="liquid-glass"]{
  --paper:#090f20;--surface:#10182e;--ink:#f1f5ff;--muted:#aab5d0;
  --blue:#8e9cff;--blue-lift:#c4cbff;--hairline:rgba(241,245,255,.18);
}
html[data-design="liquid-glass"] body{background:radial-gradient(48% 35% at 12% 8%,rgba(96,111,255,.28),transparent 72%),radial-gradient(44% 38% at 88% 25%,rgba(255,88,174,.18),transparent 72%),#090f20;color:#f1f5ff}
html[data-design="liquid-glass"] .nav{background:rgba(9,15,32,.64);border-color:rgba(255,255,255,.15);box-shadow:0 8px 30px rgba(0,0,0,.22)}
html[data-design="liquid-glass"] .hero .aurora{opacity:.16}
html[data-design="liquid-glass"] #travaux .card{background:linear-gradient(125deg,rgba(255,255,255,.13),rgba(255,255,255,.045));color:#f1f5ff;border:1px solid rgba(255,255,255,.20);border-radius:28px;box-shadow:inset 0 1px rgba(255,255,255,.18),0 24px 50px rgba(0,0,0,.34);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
html[data-design="liquid-glass"] #travaux .card p{color:#b7c2da}
html[data-design="liquid-glass"] #travaux .card-kicker{color:#aeb8ff}

/* ---------- Spatial UI: dark depth + layered planes ---------- */
html[data-design="spatial"]{
  --paper:#0b1422;--surface:#121f33;--ink:#edf5ff;--muted:#a8b8cc;
  --blue:#69a5ff;--blue-lift:#a9ccff;--hairline:rgba(237,245,255,.16);
}
html[data-design="spatial"] body{background:linear-gradient(145deg,#0b1422,#101d30);color:#edf5ff}
html[data-design="spatial"] .nav{background:rgba(11,20,34,.9);border-color:rgba(237,245,255,.12)}
html[data-design="spatial"] .hero .aurora{opacity:.08}
html[data-design="spatial"] #travaux .card{background:#14243a;color:#edf5ff;border:1px solid rgba(169,204,255,.18);border-radius:24px;box-shadow:0 20px 35px rgba(0,0,0,.42),0 4px 10px rgba(0,0,0,.22)}
html[data-design="spatial"] #travaux .card p{color:#afbdd0}
html[data-design="spatial"] #travaux .card-kicker{color:#7fb2ff}

/* ---------- Header: never clips on a phone ---------- */
.nav{overflow:visible}
.nav-inner{width:100%;min-width:0}
@media (max-width:860px){
  .nav-inner{
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:.35rem;
    padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right));
  }
  .mark{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav-actions{min-width:0;gap:.4rem}
  .design-control{position:relative;z-index:81}
  #lang{width:38px;min-width:38px;height:30px;padding:0;display:grid;place-items:center}
  .burger{margin-left:0;width:40px;height:40px}
  .links{
    max-height:0;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .nav.open .links{
    max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top) - .75rem);
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* ---------- Phone: the Work section becomes a touch carousel ---------- */
@media (max-width:860px){
  #travaux .rail{
    display:flex;
    width:100%;
    max-width:none;
    padding-inline:var(--gut);
    gap:.85rem;
    overflow-x:auto !important;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  #travaux .rail::-webkit-scrollbar{display:none;width:0;height:0}
  #travaux .card{
    flex:0 0 min(78vw,21rem);
    width:min(78vw,21rem);
    aspect-ratio:1 / 1;
    scroll-snap-align:start;
    padding:1.15rem;
  }
  #travaux .card p{font-size:.78rem;line-height:1.38}
  #travaux .card h3{font-size:1.2rem}
  #travaux .card .stack{font-size:.66rem}
}

@media (max-width:380px){
  #travaux .card{flex-basis:min(82vw,19.5rem);width:min(82vw,19.5rem);padding:1rem}
  #travaux .card p{font-size:.74rem}
}

/* Tablet keeps a grid, with two square cards per row. */
@media (min-width:861px) and (max-width:1100px){
  #travaux .rail{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Large screens: square cards remain square instead of growing vertically. */
@media (min-width:1101px){
  #travaux .rail{grid-template-columns:repeat(4,minmax(0,1fr));}
}


/* =========================================================
   VISUAL IDENTITY PASS — authentic palettes + adaptive controls
   The reference styles use a coherent material, not a generic tint.
   Text is kept deliberately darker/lighter than its surface so the
   visual language survives without sacrificing readability.
   ========================================================= */

/* Base: never let the generic .nav.dark treatment destroy a mode. */
html[data-design] .nav.dark{background:var(--nav-bg);border-bottom-color:var(--nav-border)}
html[data-design] .nav.dark .mark{color:var(--ink)}
html[data-design] .nav.dark .links a{color:var(--muted)}
html[data-design] .nav.dark .links a:hover{color:var(--ink)}
html[data-design] .nav.dark #lang{color:var(--muted);border-color:var(--hairline)}
html[data-design] .nav.dark .burger span{background:var(--ink)}

/* Original — warm editorial / restrained technology. */
html:not([data-design]){
  --nav-bg:rgba(251,250,247,.92);--nav-border:rgba(30,27,24,.11);
}
html:not([data-design]) .design-trigger,
html:not([data-design]) #lang{background:rgba(251,250,247,.72)}

/* Minimalism — almost monochrome, hard hierarchy, no decorative haze. */
html[data-design="minimalism"]{
  --paper:#f4f4f2;--surface:#ededeb;--ink:#161616;--muted:#555;--dark:#161616;
  --blue:#174ea6;--blue-lift:#174ea6;--amber:#8a5a00;
  --hairline:rgba(22,22,22,.16);--nav-bg:rgba(244,244,242,.96);--nav-border:rgba(22,22,22,.16);
}
html[data-design="minimalism"] body{background:#f4f4f2;color:#161616}
html[data-design="minimalism"] .nav{box-shadow:0 1px 0 rgba(0,0,0,.05);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="minimalism"] .burger span{background:#161616}
html[data-design="minimalism"] .design-trigger,html[data-design="minimalism"] #lang{background:#f4f4f2;border-color:#161616;color:#161616;border-radius:8px}
html[data-design="minimalism"] .design-panel{background:#f4f4f2;border:1px solid #161616;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="minimalism"] .design-option{background:#ededeb;border-color:rgba(22,22,22,.16);border-radius:8px;box-shadow:none}
html[data-design="minimalism"] .design-option:hover,html[data-design="minimalism"] .design-option[aria-pressed="true"]{border-color:#174ea6;box-shadow:0 0 0 2px rgba(23,78,166,.12)}
html[data-design="minimalism"] .links a{background:#ededeb;border:1px solid rgba(22,22,22,.16);box-shadow:none;border-radius:8px;color:#161616}

/* Brutalism — paper, ink and one hard blue/orange signal. */
html[data-design="brutalism"]{
  --paper:#efe9da;--surface:#e4dccb;--ink:#111;--muted:#353535;--dark:#111;
  --blue:#0057ff;--blue-lift:#0057ff;--amber:#ff5a00;
  --hairline:#111;--nav-bg:#efe9da;--nav-border:#111;
}
html[data-design="brutalism"] body{background:#efe9da;color:#111}
html[data-design="brutalism"] .nav{background:#efe9da;border-bottom:3px solid #111;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="brutalism"] .burger span{background:#111;height:2px}
html[data-design="brutalism"] .design-trigger,html[data-design="brutalism"] #lang{background:#efe9da;color:#111;border:2px solid #111;border-radius:0;box-shadow:3px 3px 0 #111}
html[data-design="brutalism"] .design-panel{background:#efe9da;border:3px solid #111;border-radius:0;box-shadow:10px 10px 0 #111;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="brutalism"] .design-option{background:#f8f5ed;border:2px solid #111;border-radius:0;box-shadow:4px 4px 0 #111}
html[data-design="brutalism"] .design-option:hover,html[data-design="brutalism"] .design-option[aria-pressed="true"]{border-color:#0057ff;box-shadow:4px 4px 0 #0057ff}
html[data-design="brutalism"] .links a{background:#efe9da;color:#111;border:2px solid #111;border-radius:0;box-shadow:5px 5px 0 #111}

/* Maximalism — dark jewel canvas with controlled saturated accents. */
html[data-design="maximalism"]{
  --paper:#17111f;--surface:#21182d;--ink:#f7f1ff;--muted:#c8b9d6;--dark:#0d0912;
  --blue:#b28cff;--blue-lift:#d9b9ff;--amber:#ffbd66;
  --hairline:rgba(255,255,255,.16);--nav-bg:rgba(23,17,31,.88);--nav-border:rgba(255,255,255,.14);
}
html[data-design="maximalism"] body{background:radial-gradient(circle at 12% 8%,rgba(255,96,176,.14),transparent 22%),radial-gradient(circle at 88% 24%,rgba(123,92,255,.15),transparent 25%),#17111f;color:#f7f1ff}
html[data-design="maximalism"] .nav{backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
html[data-design="maximalism"] .burger span{background:#f7f1ff}
html[data-design="maximalism"] .design-trigger,html[data-design="maximalism"] #lang{background:rgba(255,255,255,.06);color:#f7f1ff;border-color:rgba(255,255,255,.2)}
html[data-design="maximalism"] .design-panel{background:rgba(31,22,43,.97);border-color:rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.42);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-design="maximalism"] .design-option{background:#241a32;border-color:rgba(255,255,255,.13);color:#f7f1ff}
html[data-design="maximalism"] .design-option-desc,html[data-design="maximalism"] .design-panel-sub,html[data-design="maximalism"] .design-foot{color:#c8b9d6}
html[data-design="maximalism"] .design-option:hover,html[data-design="maximalism"] .design-option[aria-pressed="true"]{border-color:#b28cff;box-shadow:0 0 0 2px rgba(178,140,255,.18),0 12px 26px rgba(0,0,0,.22)}
html[data-design="maximalism"] .links a{background:linear-gradient(145deg,#291d39,#1c1426);color:#f7f1ff;border:1px solid rgba(255,255,255,.15);box-shadow:0 18px 40px rgba(0,0,0,.3)}

/* Neomorphism — the requested soft grey material. One neutral canvas,
   dual light source, dark readable type, restrained blue accent. */
html[data-design="neomorphism"]{
  --paper:#e0e5ec;--surface:#e0e5ec;--ink:#26313d;--muted:#596675;--dark:#26313d;
  --blue:#315ea8;--blue-lift:#315ea8;--amber:#805b22;
  --hairline:rgba(38,49,61,.12);--nav-bg:#e0e5ec;--nav-border:rgba(38,49,61,.08);
}
html[data-design="neomorphism"] body{background:#e0e5ec;color:#26313d}
html[data-design="neomorphism"] .nav{box-shadow:6px 6px 14px rgba(163,177,198,.28),-6px -6px 14px rgba(255,255,255,.88);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="neomorphism"] .burger span{background:#26313d;height:2px}
html[data-design="neomorphism"] .design-trigger,html[data-design="neomorphism"] #lang{background:#e0e5ec;color:#26313d;border:0;box-shadow:5px 5px 10px #b8c3d0,-5px -5px 10px #fff}
html[data-design="neomorphism"] .design-panel{background:#e0e5ec;border:0;border-radius:22px;box-shadow:12px 12px 26px #b8c3d0,-12px -12px 26px #fff;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="neomorphism"] .design-option{background:#e0e5ec;border:0;border-radius:16px;color:#26313d;box-shadow:7px 7px 14px #b8c3d0,-7px -7px 14px #fff}
html[data-design="neomorphism"] .design-option:hover{transform:translateY(-2px)}
html[data-design="neomorphism"] .design-option[aria-pressed="true"]{box-shadow:inset 4px 4px 8px #b8c3d0,inset -4px -4px 8px #fff;color:#315ea8}
html[data-design="neomorphism"] .links a{background:#e0e5ec;color:#26313d;border:0;box-shadow:8px 8px 16px #b8c3d0,-8px -8px 16px #fff}
html[data-design="neomorphism"] .links a:hover{color:#315ea8}

/* Skeuomorphism — warm ivory, physical controls, brown/steel accents. */
html[data-design="skeuomorphism"]{
  --paper:#e7dfd0;--surface:#ddd2c0;--ink:#29231d;--muted:#5b5147;--dark:#29231d;
  --blue:#2d659d;--blue-lift:#6e9cc7;--amber:#8a5a24;
  --hairline:rgba(41,35,29,.24);--nav-bg:linear-gradient(#f6f0e5,#d9cebc);--nav-border:#8f806c;
}
html[data-design="skeuomorphism"] body{background:linear-gradient(#e7dfd0,#ddd2c0);color:#29231d;font-family:Georgia,'Times New Roman',serif}
html[data-design="skeuomorphism"] .nav{background:linear-gradient(#f8f2e8,#d8ccba);border-bottom:1px solid #8f806c;box-shadow:0 3px 9px rgba(65,50,34,.25);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="skeuomorphism"] .burger span{background:#29231d;height:2px;box-shadow:0 1px 0 rgba(255,255,255,.65)}
html[data-design="skeuomorphism"] .design-trigger,html[data-design="skeuomorphism"] #lang{background:linear-gradient(#fffaf1,#d6c9b6);color:#29231d;border:1px solid #8f806c;border-radius:7px;box-shadow:inset 0 1px #fff,0 2px 5px rgba(65,50,34,.28)}
html[data-design="skeuomorphism"] .design-panel{background:linear-gradient(#f8f2e8,#ded2c0);border:1px solid #8f806c;border-radius:12px;box-shadow:inset 0 1px #fff,0 14px 28px rgba(65,50,34,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="skeuomorphism"] .design-option{background:linear-gradient(#fffaf2,#ddd1bf);border:1px solid #9a8a75;border-radius:8px;color:#29231d;box-shadow:inset 0 1px #fff,0 3px 7px rgba(65,50,34,.22)}
html[data-design="skeuomorphism"] .design-option:hover{box-shadow:inset 0 1px #fff,0 5px 9px rgba(65,50,34,.28)}
html[data-design="skeuomorphism"] .design-option[aria-pressed="true"]{border-color:#2d659d;box-shadow:inset 0 2px 4px rgba(65,50,34,.16),0 0 0 2px rgba(45,101,157,.16)}
html[data-design="skeuomorphism"] .links a{background:linear-gradient(#fffaf2,#ddd1bf);color:#29231d;border:1px solid #8f806c;border-radius:8px;box-shadow:inset 0 1px #fff,0 4px 9px rgba(65,50,34,.28)}

/* Claymorphism — dark lavender clay so the site does not become a white glow. */
html[data-design="claymorphism"]{
  --paper:#201b2f;--surface:#29223d;--ink:#f5f1ff;--muted:#c8bfdc;--dark:#14101f;
  --blue:#9c91ff;--blue-lift:#c5bfff;--amber:#ffad7a;
  --hairline:rgba(255,255,255,.12);--nav-bg:rgba(32,27,47,.92);--nav-border:rgba(255,255,255,.12);
}
html[data-design="claymorphism"] body{background:#201b2f;color:#f5f1ff}
html[data-design="claymorphism"] .burger span{background:#f5f1ff}
html[data-design="claymorphism"] .design-trigger,html[data-design="claymorphism"] #lang{background:#29223d;color:#f5f1ff;border:0;box-shadow:inset 0 -3px 7px rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.25);border-radius:16px}
html[data-design="claymorphism"] .design-panel{background:#29223d;border:0;border-radius:26px;box-shadow:inset 0 -6px 14px rgba(0,0,0,.16),0 24px 50px rgba(0,0,0,.3);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design="claymorphism"] .design-option{background:#302848;color:#f5f1ff;border:0;border-radius:18px;box-shadow:inset 0 -4px 8px rgba(0,0,0,.14),0 8px 14px rgba(0,0,0,.22)}
html[data-design="claymorphism"] .design-option-desc,html[data-design="claymorphism"] .design-panel-sub,html[data-design="claymorphism"] .design-foot{color:#c8bfdc}
html[data-design="claymorphism"] .design-option[aria-pressed="true"]{box-shadow:inset 0 3px 7px rgba(0,0,0,.18),0 0 0 2px rgba(156,145,255,.65)}
html[data-design="claymorphism"] .links a{background:#302848;color:#f5f1ff;border:0;border-radius:18px;box-shadow:inset 0 -4px 8px rgba(0,0,0,.14),0 12px 20px rgba(0,0,0,.26)}

/* Glassmorphism — dark glass over a restrained blue/violet atmosphere. */
html[data-design="glassmorphism"]{
  --paper:#101827;--surface:rgba(255,255,255,.10);--ink:#f3f7ff;--muted:#b9c6db;--dark:#09101c;
  --blue:#8db0ff;--blue-lift:#b9cbff;--amber:#ffc275;
  --hairline:rgba(255,255,255,.18);--nav-bg:rgba(12,19,33,.52);--nav-border:rgba(255,255,255,.18);
}
html[data-design="glassmorphism"] body{background:radial-gradient(circle at 12% 8%,rgba(75,107,255,.30),transparent 28%),radial-gradient(circle at 88% 22%,rgba(154,104,255,.24),transparent 28%),#101827;color:#f3f7ff}
html[data-design="glassmorphism"] .nav{backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
html[data-design="glassmorphism"] .burger span{background:#f3f7ff}
html[data-design="glassmorphism"] .design-trigger,html[data-design="glassmorphism"] #lang{background:rgba(255,255,255,.08);color:#f3f7ff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-design="glassmorphism"] .design-panel{background:rgba(19,29,48,.86);border-color:rgba(255,255,255,.2);box-shadow:0 28px 70px rgba(0,0,0,.42);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
html[data-design="glassmorphism"] .design-option{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#f3f7ff}
html[data-design="glassmorphism"] .design-option-desc,html[data-design="glassmorphism"] .design-panel-sub,html[data-design="glassmorphism"] .design-foot{color:#b9c6db}
html[data-design="glassmorphism"] .design-option:hover,html[data-design="glassmorphism"] .design-option[aria-pressed="true"]{border-color:#8db0ff;box-shadow:0 0 0 2px rgba(141,176,255,.16)}
html[data-design="glassmorphism"] .links a{background:rgba(19,29,48,.72);color:#f3f7ff;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 38px rgba(0,0,0,.34);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Liquid Glass — darker, more luminous glass with fluid highlights. */
html[data-design="liquid-glass"]{
  --paper:#0e1428;--surface:rgba(255,255,255,.09);--ink:#f5f7ff;--muted:#b6bfd7;--dark:#070b18;
  --blue:#9caaff;--blue-lift:#c5ccff;--amber:#ffc17a;
  --hairline:rgba(255,255,255,.18);--nav-bg:rgba(11,17,34,.46);--nav-border:rgba(255,255,255,.17);
}
html[data-design="liquid-glass"] body{background:radial-gradient(55% 35% at 12% 5%,rgba(101,121,255,.28),transparent 72%),radial-gradient(45% 40% at 90% 18%,rgba(255,116,180,.20),transparent 72%),#0e1428;color:#f5f7ff}
html[data-design="liquid-glass"] .nav{backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
html[data-design="liquid-glass"] .burger span{background:#f5f7ff}
html[data-design="liquid-glass"] .design-trigger,html[data-design="liquid-glass"] #lang{background:rgba(255,255,255,.08);color:#f5f7ff;border-color:rgba(255,255,255,.22);border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-design="liquid-glass"] .design-panel{background:rgba(18,24,49,.84);border-color:rgba(255,255,255,.22);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45);backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%)}
html[data-design="liquid-glass"] .design-option{background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border-color:rgba(255,255,255,.15);color:#f5f7ff;border-radius:18px;box-shadow:inset 0 1px rgba(255,255,255,.12)}
html[data-design="liquid-glass"] .design-option-desc,html[data-design="liquid-glass"] .design-panel-sub,html[data-design="liquid-glass"] .design-foot{color:#b6bfd7}
html[data-design="liquid-glass"] .design-option:hover,html[data-design="liquid-glass"] .design-option[aria-pressed="true"]{border-color:#9caaff;box-shadow:0 0 0 2px rgba(156,170,255,.18),inset 0 1px rgba(255,255,255,.18)}
html[data-design="liquid-glass"] .links a{background:linear-gradient(120deg,rgba(255,255,255,.11),rgba(255,255,255,.035));color:#f5f7ff;border:1px solid rgba(255,255,255,.17);border-radius:18px;box-shadow:0 20px 44px rgba(0,0,0,.34);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}

/* Spatial UI — deep navy canvas and crisp layered surfaces. */
html[data-design="spatial"]{
  --paper:#0c1420;--surface:#142133;--ink:#f2f6fb;--muted:#b3c0d1;--dark:#070c14;
  --blue:#6ea8ff;--blue-lift:#a8c8ff;--amber:#ffc27d;
  --hairline:rgba(255,255,255,.15);--nav-bg:rgba(10,18,31,.88);--nav-border:rgba(255,255,255,.14);
}
html[data-design="spatial"] body{background:linear-gradient(145deg,#0c1420,#101d2e 55%,#0a121e);color:#f2f6fb}
html[data-design="spatial"] .nav{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-design="spatial"] .burger span{background:#f2f6fb}
html[data-design="spatial"] .design-trigger,html[data-design="spatial"] #lang{background:#142133;color:#f2f6fb;border-color:rgba(255,255,255,.16);border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.28)}
html[data-design="spatial"] .design-panel{background:#142133;border-color:rgba(255,255,255,.16);border-radius:20px;box-shadow:0 30px 65px rgba(0,0,0,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-design="spatial"] .design-option{background:#192a40;border-color:rgba(255,255,255,.13);color:#f2f6fb;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.24)}
html[data-design="spatial"] .design-option-desc,html[data-design="spatial"] .design-panel-sub,html[data-design="spatial"] .design-foot{color:#b3c0d1}
html[data-design="spatial"] .design-option:hover,html[data-design="spatial"] .design-option[aria-pressed="true"]{border-color:#6ea8ff;box-shadow:0 0 0 2px rgba(110,168,255,.16),0 12px 24px rgba(0,0,0,.3)}
html[data-design="spatial"] .links a{background:#142133;color:#f2f6fb;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 14px 28px rgba(0,0,0,.32)}

/* The hamburger/menu follows the same material as the Design control. */
@media (max-width:860px){
  html[data-design="neomorphism"] .links a,
  html[data-design="skeuomorphism"] .links a,
  html[data-design="minimalism"] .links a,
  html[data-design="brutalism"] .links a,
  html[data-design="maximalism"] .links a,
  html[data-design="claymorphism"] .links a,
  html[data-design="glassmorphism"] .links a,
  html[data-design="liquid-glass"] .links a,
  html[data-design="spatial"] .links a{opacity:0}

  html[data-design="neomorphism"] .links a{border-radius:18px}
  html[data-design="skeuomorphism"] .links a{border-radius:8px}
  html[data-design="minimalism"] .links a{border-radius:8px}
  html[data-design="brutalism"] .links a{border-radius:0}
}

/* The Design panel must be readable even if a new option is added later. */
.design-option-name,.design-option-desc{overflow-wrap:anywhere}
@media (max-width:860px){
  .design-panel{max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1.5rem)}
  .design-options{max-height:none;overflow:auto;overscroll-behavior:contain}
}

/* =========================================================
   TARGETED FIX — NEOMORPHISM + GLASSMORPHISM
   Only these two modes are changed in this pass.
   ========================================================= */

/* Neomorphism: every interactive/content surface shares the same
   physical grey material and the same raised/inset light model. */
html[data-design="neomorphism"] .nav{
  background:rgba(224,229,236,.46);
  border-bottom:0;
  -webkit-backdrop-filter:blur(18px) saturate(105%);
  backdrop-filter:blur(18px) saturate(105%);
  box-shadow:6px 6px 16px rgba(163,177,198,.30),-6px -6px 16px rgba(255,255,255,.78);
}
html[data-design="neomorphism"] .nav-inner{background:transparent}
html[data-design="neomorphism"] .links a{
  background:#e0e5ec;
  color:#26313d;
  border:0;
  border-radius:16px;
  box-shadow:7px 7px 15px #b8c3d0,-7px -7px 15px #fff;
  padding:.36rem .72rem;
}
html[data-design="neomorphism"] .links a:hover,
html[data-design="neomorphism"] .links a:focus-visible{
  color:#315ea8;
  box-shadow:5px 5px 11px #b8c3d0,-5px -5px 11px #fff;
}
html[data-design="neomorphism"] .burger{
  background:#e0e5ec;
  border-radius:14px;
  box-shadow:6px 6px 12px #b8c3d0,-6px -6px 12px #fff;
}
html[data-design="neomorphism"] .burger span{background:#26313d}
html[data-design="neomorphism"] .design-trigger,
html[data-design="neomorphism"] #lang{
  background:#e0e5ec;
  color:#26313d;
  border:0;
  box-shadow:6px 6px 12px #b8c3d0,-6px -6px 12px #fff;
}
html[data-design="neomorphism"] .design-trigger:hover,
html[data-design="neomorphism"] .design-trigger[aria-expanded="true"],
html[data-design="neomorphism"] #lang:hover{
  color:#315ea8;
  background:#e0e5ec;
  box-shadow:inset 4px 4px 8px #b8c3d0,inset -4px -4px 8px #fff;
}
html[data-design="neomorphism"] .design-panel{
  background:rgba(224,229,236,.92);
  border:0;
  box-shadow:12px 12px 28px rgba(184,195,208,.82),-12px -12px 28px rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
html[data-design="neomorphism"] .design-option{
  background:#e0e5ec;
  color:#26313d;
  border:0;
  border-radius:16px;
  box-shadow:7px 7px 14px #b8c3d0,-7px -7px 14px #fff;
}
html[data-design="neomorphism"] .design-option:hover{
  transform:translateY(-2px);
  box-shadow:8px 8px 16px #b8c3d0,-8px -8px 16px #fff;
}
html[data-design="neomorphism"] .design-option[aria-pressed="true"]{
  color:#315ea8;
  box-shadow:inset 4px 4px 8px #b8c3d0,inset -4px -4px 8px #fff;
}

/* Important: #travaux needs a higher-specificity rule because the
   base stylesheet deliberately normalizes its cards. */
html[data-design="neomorphism"] #travaux .card,
html[data-design="neomorphism"] #travaux .card.glass{
  background:#e0e5ec;
  color:#26313d;
  border:0;
  border-radius:22px;
  box-shadow:12px 12px 24px #b8c3d0,-12px -12px 24px #fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-design="neomorphism"] #travaux .card:hover{
  transform:translateY(-4px);
  box-shadow:14px 14px 28px #b8c3d0,-14px -14px 28px #fff;
}
html[data-design="neomorphism"] #travaux .card p{color:#596675}
html[data-design="neomorphism"] #travaux .card-kicker{color:#315ea8}
html[data-design="neomorphism"] #travaux .stack{color:#6a7480 !important}
html[data-design="neomorphism"] #travaux .card-btn{
  background:#e0e5ec;
  color:#26313d;
  border:0;
  border-radius:14px;
  box-shadow:5px 5px 10px #b8c3d0,-5px -5px 10px #fff;
}
html[data-design="neomorphism"] #travaux .card-btn:hover,
html[data-design="neomorphism"] #travaux .card-btn:focus-visible{
  color:#315ea8;
  background:#e0e5ec;
  box-shadow:inset 3px 3px 7px #b8c3d0,inset -3px -3px 7px #fff;
}
html[data-design="neomorphism"] #travaux .card-btn--go{
  color:#e0e5ec;
  background:#315ea8;
  border-color:#315ea8;
  box-shadow:5px 5px 10px #b8c3d0,-3px -3px 8px rgba(255,255,255,.72);
}

/* Neomorphism also applies to the other content blocks that use the
   generic .tile/.glass surface. */
html[data-design="neomorphism"] .tile,
html[data-design="neomorphism"] .glass,
html[data-design="neomorphism"] .tasks-panel{
  background:#e0e5ec;
  color:#26313d;
  border:0;
  box-shadow:10px 10px 22px #b8c3d0,-10px -10px 22px #fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-design="neomorphism"] .tasks li{border-color:rgba(38,49,61,.12)}

/* On phones the expanded menu keeps the same raised material rather
   than reverting to the generic white glass bubbles. */
@media (max-width:860px){
  html[data-design="neomorphism"] .links a{
    margin:.55rem var(--gut);
    padding:1rem 1.25rem;
    border-radius:18px;
    background:#e0e5ec;
    box-shadow:8px 8px 16px #b8c3d0,-8px -8px 16px #fff;
  }
  html[data-design="neomorphism"] .links a:hover,
  html[data-design="neomorphism"] .links a:focus-visible{
    box-shadow:inset 4px 4px 8px #b8c3d0,inset -4px -4px 8px #fff;
  }
}

/* Glassmorphism: transparent floating controls over the page, with
   blur behind them. No opaque/solid header strip. */
html[data-design="glassmorphism"] .nav{
  background:rgba(10,17,30,.24);
  border-bottom:0;
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
html[data-design="glassmorphism"] .nav-inner{background:transparent}
html[data-design="glassmorphism"] .mark,
html[data-design="glassmorphism"] .links a,
html[data-design="glassmorphism"] #lang,
html[data-design="glassmorphism"] .design-trigger{color:#f3f7ff}
html[data-design="glassmorphism"] .links a{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 10px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter:blur(16px) saturate(145%);
}
html[data-design="glassmorphism"] .links a:hover,
html[data-design="glassmorphism"] .links a:focus-visible{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 12px 28px rgba(0,0,0,.22);
}
html[data-design="glassmorphism"] .burger{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 10px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter:blur(16px) saturate(145%);
}
html[data-design="glassmorphism"] .burger span{background:#f3f7ff}
html[data-design="glassmorphism"] .design-trigger,
html[data-design="glassmorphism"] #lang{
  background:rgba(255,255,255,.10);
  color:#f3f7ff;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 10px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  backdrop-filter:blur(16px) saturate(145%);
}
html[data-design="glassmorphism"] .design-trigger:hover,
html[data-design="glassmorphism"] .design-trigger[aria-expanded="true"],
html[data-design="glassmorphism"] #lang:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
html[data-design="glassmorphism"] .design-panel{
  background:rgba(16,25,42,.72);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 28px 70px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
html[data-design="glassmorphism"] .design-option{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#f3f7ff;
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 10px 22px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
}
html[data-design="glassmorphism"] .design-option:hover,
html[data-design="glassmorphism"] .design-option[aria-pressed="true"]{
  background:rgba(255,255,255,.13);
  border-color:#8db0ff;
  box-shadow:0 0 0 2px rgba(141,176,255,.16),inset 0 1px rgba(255,255,255,.18),0 12px 26px rgba(0,0,0,.20);
}

@media (max-width:860px){
  html[data-design="glassmorphism"] .links a{
    margin:.55rem var(--gut);
    padding:1rem 1.25rem;
    background:rgba(16,25,42,.48);
    border:1px solid rgba(255,255,255,.24);
    border-radius:16px;
    color:#f3f7ff;
    box-shadow:inset 0 1px rgba(255,255,255,.22),0 14px 30px rgba(0,0,0,.24);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
  }
  html[data-design="glassmorphism"] .links a:hover,
  html[data-design="glassmorphism"] .links a:focus-visible{
    background:rgba(255,255,255,.13);
  }
}