/* Simonvils Design Modes — adapted to Barbier Vallier. Original mode preserves the current visual identity. */ :root{--ds-ease:cubic-bezier(.16,1,.3,1)} .design-control{position:relative;flex:0 0 auto;z-index:95} .design-trigger{display:inline-flex;align-items:center;gap:.38rem;height:38px;padding:.2rem .72rem;border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,.45);color:var(--ink);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:transform .2s var(--ds-ease),background .2s ease,border-color .2s ease} .design-trigger:hover,.design-trigger[aria-expanded="true"]{background:rgba(255,255,255,.78);transform:translateY(-1px)} .design-trigger:active{transform:scale(.97)} .design-icon{font-size:.92rem;line-height:1} .design-panel{position:absolute;right:0;top:calc(100% + .7rem);z-index:100;width:min(430px,calc(100vw - 1.5rem));padding:.9rem;border:1px solid rgba(18,19,26,.12);border-radius:22px;background:rgba(248,249,252,.94);color:#171b24;box-shadow:0 24px 70px rgba(12,18,32,.22),0 4px 16px rgba(12,18,32,.08);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.985);transform-origin:top right;transition:opacity .22s var(--ds-ease),transform .22s var(--ds-ease),visibility .22s} .design-control.open .design-panel{opacity:1;visibility:visible;pointer-events:auto;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:#667085;margin-top:.15rem} .design-close{border:0;background:none;color:#667085;font:inherit;font-size:1.15rem;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 rgba(23,27,36,.12);background:rgba(255,255,255,.68);color:#171b24;border-radius:15px;padding:.45rem;text-align:left;cursor:pointer;transition:transform .18s var(--ds-ease),border-color .18s ease,box-shadow .18s ease,background .18s ease} .design-option:hover{transform:translateY(-2px);border-color:rgba(79,70,229,.45);box-shadow:0 8px 20px rgba(20,25,40,.1)} .design-option[aria-pressed="true"]{border-color:#4f46e5;box-shadow:0 0 0 2px rgba(79,70,229,.15)} .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:650;line-height:1.15} .design-option-desc{display:block;color:#667085;font-size:.61rem;margin-top:.18rem;line-height:1.25} .design-foot{font-size:.62rem;color:#667085;padding:.65rem .25rem .1rem} /* Previews */ .swatch-original{background:#f7f7f9}.swatch-original::before{background:#12131a}.swatch-original::after{background:#4f46e5} .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)} .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)} /* Shared mode variables */ html[data-design="minimalism"]{--mode-bg:#fff;--mode-surface:#fff;--mode-text:#111;--mode-muted:#626262;--mode-accent:#111;--mode-border:rgba(17,17,17,.14)} html[data-design="brutalism"]{--mode-bg:#f7f5ee;--mode-surface:#fff9df;--mode-text:#080808;--mode-muted:#303030;--mode-accent:#ff3b00;--mode-border:#080808} html[data-design="maximalism"]{--mode-bg:#fff8f2;--mode-surface:#f1eaff;--mode-text:#160b2f;--mode-muted:#5f4b76;--mode-accent:#ff2e88;--mode-border:rgba(22,11,47,.18)} html[data-design="neomorphism"]{--mode-bg:#e7ebf0;--mode-surface:#e7ebf0;--mode-text:#27313d;--mode-muted:#6d7784;--mode-accent:#4267d5;--mode-border:transparent} html[data-design="skeuomorphism"]{--mode-bg:#e7e0d2;--mode-surface:#d3c8b6;--mode-text:#27221b;--mode-muted:#6f6253;--mode-accent:#1d62a8;--mode-border:#9d907e} html[data-design="claymorphism"]{--mode-bg:#f7f4ff;--mode-surface:#eee9ff;--mode-text:#2b2540;--mode-muted:#706986;--mode-accent:#6257e8;--mode-border:transparent} html[data-design="glassmorphism"]{--mode-bg:#eef4ff;--mode-surface:rgba(255,255,255,.38);--mode-text:#17233f;--mode-muted:#62708c;--mode-accent:#4b6bff;--mode-border:rgba(255,255,255,.62)} html[data-design="liquid-glass"]{--mode-bg:#f1f6ff;--mode-surface:rgba(255,255,255,.34);--mode-text:#182039;--mode-muted:#66718c;--mode-accent:#6c7cff;--mode-border:rgba(255,255,255,.7)} html[data-design="spatial"]{--mode-bg:#edf3fa;--mode-surface:#dfe7f1;--mode-text:#172233;--mode-muted:#627083;--mode-accent:#3b82f6;--mode-border:rgba(23,34,51,.15)} html[data-design]:not([data-design="original"]) body{background:var(--mode-bg)!important;color:var(--mode-text)!important} html[data-design]:not([data-design="original"]) .shell-bar{color:var(--mode-text)} html[data-design]:not([data-design="original"]) .shell-bar .shell-links a{color:var(--mode-muted)} html[data-design]:not([data-design="original"]) .shell-bar .shell-lang, html[data-design]:not([data-design="original"]) .design-trigger{color:var(--mode-text);border-color:var(--mode-border)} html[data-design]:not([data-design="original"]) .hero .sub, html[data-design]:not([data-design="original"]) .tile p, html[data-design]:not([data-design="original"]) .addr p, html[data-design]:not([data-design="original"]) .hrs td:last-child, html[data-design]:not([data-design="original"]) .summary span, html[data-design]:not([data-design="original"]) .closed, html[data-design]:not([data-design="original"]) .tile .role{color:var(--mode-muted)} html[data-design]:not([data-design="original"]) .glass, html[data-design]:not([data-design="original"]) .tile, html[data-design]:not([data-design="original"]) .opt, html[data-design]:not([data-design="original"]) .day, html[data-design]:not([data-design="original"]) .slot, html[data-design]:not([data-design="original"]) .field-in, html[data-design]:not([data-design="original"]) .info .glass{ background:var(--mode-surface)!important;color:var(--mode-text)!important;border-color:var(--mode-border)!important } html[data-design]:not([data-design="original"]) .kicker, html[data-design]:not([data-design="original"]) .tile .role{color:var(--mode-accent)} html[data-design]:not([data-design="original"]) .go{background:var(--mode-accent);color:#fff;border-color:transparent} html[data-design]:not([data-design="original"]) .eyebrow{background:var(--mode-surface);color:var(--mode-text);border-color:var(--mode-border)} html[data-design]:not([data-design="original"]) .demo-note{background:var(--mode-surface);color:var(--mode-muted);border-color:var(--mode-border)} /* Minimalism */ html[data-design="minimalism"] body{font-family:Geist,ui-sans-serif,system-ui,sans-serif} html[data-design="minimalism"] .shell-bar{background:#fff;backdrop-filter:none;border-radius:10px;box-shadow:0 1px 0 rgba(0,0,0,.08)} html[data-design="minimalism"] .design-trigger{border-radius:8px} html[data-design="minimalism"] .glass,html[data-design="minimalism"] .tile{border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.08);backdrop-filter:none} html[data-design="minimalism"] .go{border-radius:8px;box-shadow:none} html[data-design="minimalism"] .field{display:none} /* 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} html[data-design="brutalism"] .shell{padding:.5rem 0} html[data-design="brutalism"] .shell-bar{background:#f7f5ee;backdrop-filter:none;border:3px solid #050505;border-radius:0;box-shadow:6px 6px 0 #050505} html[data-design="brutalism"] .design-trigger,html[data-design="brutalism"] .shell-lang{border:2px solid #050505;border-radius:0;background:#fff9df;color:#050505} html[data-design="brutalism"] .go{border:3px solid #050505;border-radius:0;box-shadow:6px 6px 0 #050505} html[data-design="brutalism"] .tile,html[data-design="brutalism"] .glass{border:3px solid #050505;border-radius:0;box-shadow:8px 8px 0 #050505;backdrop-filter:none} html[data-design="brutalism"] .opt,html[data-design="brutalism"] .day,html[data-design="brutalism"] .slot{border:2px solid #050505;border-radius:0} html[data-design="brutalism"] .design-panel{border:3px solid #050505;border-radius:0;box-shadow:10px 10px 0 #050505;backdrop-filter:none} /* Maximalism */ html[data-design="maximalism"] body{background:radial-gradient(circle at 8% 12%,rgba(255,176,0,.18),transparent 26%),radial-gradient(circle at 92% 32%,rgba(255,46,136,.15),transparent 30%),var(--mode-bg)!important} html[data-design="maximalism"] .shell-bar{background:rgba(255,248,242,.82);border-color:rgba(255,46,136,.28)} html[data-design="maximalism"] .go{background:linear-gradient(100deg,#ff2e88,#7c3aed);border-radius:12px;box-shadow:0 12px 28px rgba(255,46,136,.28)} html[data-design="maximalism"] .tile,html[data-design="maximalism"] .glass{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"] .field{opacity:.9} /* Neomorphism */ html[data-design="neomorphism"] body{background:var(--mode-bg)!important} html[data-design="neomorphism"] .shell-bar{background:#e7ebf0;border:0;box-shadow:8px 8px 18px rgba(145,155,170,.28),-7px -7px 16px rgba(255,255,255,.95);backdrop-filter:none} html[data-design="neomorphism"] .glass,html[data-design="neomorphism"] .tile,html[data-design="neomorphism"] .opt,html[data-design="neomorphism"] .day,html[data-design="neomorphism"] .slot{border:0;box-shadow:9px 9px 20px rgba(145,155,170,.32),-9px -9px 20px rgba(255,255,255,.95);backdrop-filter:none} html[data-design="neomorphism"] .go{background:#e7ebf0;color:#4267d5;box-shadow:7px 7px 14px rgba(145,155,170,.35),-6px -6px 14px rgba(255,255,255,.95)} html[data-design="neomorphism"] .done{background:#e7ebf0} html[data-design="neomorphism"] .field{opacity:.12} /* Skeuomorphism */ html[data-design="skeuomorphism"] body{background:linear-gradient(180deg,#eee7d8,#e2d9ca)!important;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} html[data-design="skeuomorphism"] .shell-bar{background:linear-gradient(#f8f3e9,#d9d0c1);backdrop-filter:none;border:1px solid #9e927f;border-radius:10px;box-shadow:inset 0 1px #fff,0 3px 8px rgba(60,45,30,.25)} html[data-design="skeuomorphism"] .design-trigger,html[data-design="skeuomorphism"] .shell-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"] .glass,html[data-design="skeuomorphism"] .tile{background:linear-gradient(#f8f3e9,#ddd3c4)!important;border:1px solid #a79a88!important;border-radius:10px;box-shadow:inset 0 1px #fff,0 7px 15px rgba(60,45,30,.25);backdrop-filter:none} html[data-design="skeuomorphism"] .go{background:linear-gradient(#fff,#d7cdbd);color:#27221b;border:1px solid #9e927f;box-shadow:inset 0 1px #fff,0 3px 5px rgba(60,45,30,.3);border-radius:7px} html[data-design="skeuomorphism"] .opt,html[data-design="skeuomorphism"] .day,html[data-design="skeuomorphism"] .slot{background:linear-gradient(#fff,#e2d8ca)!important;border:1px solid #a79a88!important;border-radius:8px} /* Claymorphism */ html[data-design="claymorphism"] body{background:linear-gradient(145deg,#f7f4ff,#eee9ff)!important} html[data-design="claymorphism"] .shell-bar{background:rgba(247,244,255,.9);border:0;border-radius:24px;box-shadow:inset 0 -4px 8px rgba(92,78,180,.08),0 12px 25px rgba(68,55,130,.16);backdrop-filter:none} html[data-design="claymorphism"] .glass,html[data-design="claymorphism"] .tile{border:0;border-radius:28px;background:linear-gradient(145deg,#f9f7ff,#e8e2ff)!important;box-shadow:inset 0 -5px 12px rgba(92,78,180,.1),0 16px 26px rgba(68,55,130,.16);backdrop-filter:none} html[data-design="claymorphism"] .go{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"] .opt,html[data-design="claymorphism"] .day,html[data-design="claymorphism"] .slot{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)!important} html[data-design="glassmorphism"] .shell-bar{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.52)} html[data-design="glassmorphism"] .glass,html[data-design="glassmorphism"] .tile,html[data-design="glassmorphism"] .opt,html[data-design="glassmorphism"] .day,html[data-design="glassmorphism"] .slot{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.16))!important;border:1px solid rgba(255,255,255,.62)!important;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"] .go{background:rgba(75,107,255,.85);backdrop-filter:blur(12px)} /* 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,#eef3ff,#dce4ff 48%,#f6e9ff)!important} html[data-design="liquid-glass"] .shell-bar{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px rgba(255,255,255,.85),0 20px 45px rgba(50,60,130,.2)} html[data-design="liquid-glass"] .glass,html[data-design="liquid-glass"] .tile,html[data-design="liquid-glass"] .opt,html[data-design="liquid-glass"] .day,html[data-design="liquid-glass"] .slot{background:linear-gradient(120deg,rgba(255,255,255,.45),rgba(255,255,255,.12))!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:inset 0 1px rgba(255,255,255,.9),0 25px 55px rgba(67,78,145,.2);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)} html[data-design="liquid-glass"] .go{background:linear-gradient(110deg,#6c7cff,#a47cff,#e681bb);border-radius:16px;box-shadow:0 15px 35px rgba(108,124,255,.3)} /* Spatial UI */ html[data-design="spatial"] body{background:radial-gradient(circle at 20% 10%,rgba(120,170,230,.25),transparent 30%),linear-gradient(160deg,#edf3fa,#dfe7f1 60%,#edf3fa)!important} html[data-design="spatial"] .shell-bar{background:rgba(244,249,255,.72);border-color:rgba(255,255,255,.75);box-shadow:0 18px 40px rgba(38,59,88,.18),inset 0 1px rgba(255,255,255,.9)} html[data-design="spatial"] .glass,html[data-design="spatial"] .tile{background:linear-gradient(145deg,#f6faff,#dfe9f4)!important;border:1px solid rgba(255,255,255,.85)!important;box-shadow:12px 18px 32px rgba(38,59,88,.2),-8px -8px 20px rgba(255,255,255,.85);backdrop-filter:none} html[data-design="spatial"] .tile:nth-child(2){transform:translateY(-8px)} html[data-design="spatial"] .tile:nth-child(3){transform:translateY(6px)} html[data-design="spatial"] .go{background:linear-gradient(145deg,#5d9cff,#3b82f6);box-shadow:0 14px 28px rgba(59,130,246,.28)} /* Mobile: same control, panel stays inside viewport */ @media(max-width:860px){ .design-control{z-index:110} .design-trigger{height:38px} .design-panel{position:fixed;top:calc(env(safe-area-inset-top,0px) + 66px);right:max(1rem,env(safe-area-inset-right));width:min(430px,calc(100vw - 2rem));max-height:calc(100dvh - 82px);overflow:auto} .design-options{grid-template-columns:repeat(2,1fr);max-height:none} } @media(max-width:380px){ .design-options{grid-template-columns:1fr} .design-panel{width:calc(100vw - 1rem);right:.5rem} } @media(prefers-reduced-motion:reduce){.design-trigger,.design-panel,.design-option{transition:none!important}} .design-icon{font-size:0;display:inline-grid;place-items:center;width:1rem;height:1rem}.design-icon::before{content:'◐';font-size:.9rem;line-height:1}.design-control:has(+ .shell-lang){} html[data-design="minimalism"] .design-icon::before{content:'—';font-weight:800}html[data-design="brutalism"] .design-icon::before{content:'+';font-weight:900}html[data-design="maximalism"] .design-icon::before{content:'✦'}html[data-design="neomorphism"] .design-icon::before{content:'●';font-size:.62rem}html[data-design="skeuomorphism"] .design-icon::before{content:'⚙';font-size:.8rem}html[data-design="claymorphism"] .design-icon::before{content:'●';font-size:.72rem}html[data-design="glassmorphism"] .design-icon::before{content:'◈';font-size:.82rem}html[data-design="liquid-glass"] .design-icon::before{content:'≈';font-weight:800}html[data-design="spatial"] .design-icon::before{content:'◇';font-size:.84rem} /* ══════════════════════════════════════════════════════════════════════════ GLOBAL ENGINE The Design Mode is not an index.html feature. It is a document-level theme consumed by public, auth, admin and legal pages. ══════════════════════════════════════════════════════════════════════════ */ html[data-design="original"]{--ds-bg:#F7F7F9;--ds-surface:rgba(255,255,255,.58);--ds-text:#12131A;--ds-muted:#6B7280;--ds-accent:#4F46E5;--ds-border:rgba(18,19,26,.10);--ds-radius:22px;--ds-shadow:0 1px 2px rgba(18,19,26,.05),0 12px 32px -12px rgba(18,19,26,.18)} html[data-design="minimalism"]{--ds-bg:#fff;--ds-surface:#fff;--ds-text:#111;--ds-muted:#626262;--ds-accent:#111;--ds-border:rgba(17,17,17,.14);--ds-radius:10px;--ds-shadow:0 1px 0 rgba(0,0,0,.08)} html[data-design="brutalism"]{--ds-bg:#f7f5ee;--ds-surface:#fff9df;--ds-text:#080808;--ds-muted:#303030;--ds-accent:#ff3b00;--ds-border:#080808;--ds-radius:0;--ds-shadow:6px 6px 0 #050505} html[data-design="maximalism"]{--ds-bg:#fff8f2;--ds-surface:#f1eaff;--ds-text:#160b2f;--ds-muted:#5f4b76;--ds-accent:#ff2e88;--ds-border:rgba(22,11,47,.18);--ds-radius:28px;--ds-shadow:0 18px 40px rgba(65,30,100,.18)} html[data-design="neomorphism"]{--ds-bg:#e7ebf0;--ds-surface:#e7ebf0;--ds-text:#27313d;--ds-muted:#6d7784;--ds-accent:#4267d5;--ds-border:transparent;--ds-radius:22px;--ds-shadow:9px 9px 20px rgba(145,155,170,.32),-9px -9px 20px rgba(255,255,255,.95)} html[data-design="skeuomorphism"]{--ds-bg:#e7e0d2;--ds-surface:#ddd3c4;--ds-text:#27221b;--ds-muted:#6f6253;--ds-accent:#1d62a8;--ds-border:#9d907e;--ds-radius:10px;--ds-shadow:inset 0 1px #fff,0 7px 15px rgba(60,45,30,.25)} html[data-design="claymorphism"]{--ds-bg:#f7f4ff;--ds-surface:#eee9ff;--ds-text:#2b2540;--ds-muted:#706986;--ds-accent:#6257e8;--ds-border:transparent;--ds-radius:28px;--ds-shadow:inset 0 -5px 12px rgba(92,78,180,.1),0 16px 26px rgba(68,55,130,.16)} html[data-design="glassmorphism"]{--ds-bg:#eef4ff;--ds-surface:rgba(255,255,255,.38);--ds-text:#17233f;--ds-muted:#62708c;--ds-accent:#4b6bff;--ds-border:rgba(255,255,255,.62);--ds-radius:22px;--ds-shadow:0 24px 50px rgba(53,76,130,.18)} html[data-design="liquid-glass"]{--ds-bg:#f1f6ff;--ds-surface:rgba(255,255,255,.34);--ds-text:#182039;--ds-muted:#66718c;--ds-accent:#6c7cff;--ds-border:rgba(255,255,255,.7);--ds-radius:24px;--ds-shadow:0 25px 55px rgba(67,78,145,.2)} html[data-design="spatial"]{--ds-bg:#edf3fa;--ds-surface:#dfe7f1;--ds-text:#172233;--ds-muted:#627083;--ds-accent:#3b82f6;--ds-border:rgba(23,34,51,.15);--ds-radius:22px;--ds-shadow:12px 18px 32px rgba(38,59,88,.2),-8px -8px 20px rgba(255,255,255,.85)} html[data-design] body{background:var(--ds-bg)!important;color:var(--ds-text)} html[data-design] input,html[data-design] select,html[data-design] textarea{color:var(--ds-text);background:var(--ds-surface);border-color:var(--ds-border)} html[data-design] button{color:inherit} html[data-design] a{color:inherit} html[data-design] .field-bg{opacity:.82} /* Global shell/control chrome */ html[data-design] .shell-bar{border-color:var(--ds-border);color:var(--ds-text)} html[data-design] .shell-links a,html[data-design] .shell-user{color:var(--ds-muted)} html[data-design] .shell-links a:hover,html[data-design] .shell-links button:not(.shell-lang):hover{color:var(--ds-text);background:var(--ds-surface)} html[data-design] .burger,html[data-design] .shell-lang,.design-trigger{color:var(--ds-text);border-color:var(--ds-border)} html[data-design] .design-control{position:relative;z-index:95} html[data-design] .design-trigger{background:var(--ds-surface);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)} html[data-design] .design-panel{background:var(--ds-surface);color:var(--ds-text);border-color:var(--ds-border);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)} html[data-design] .design-option{background:var(--ds-surface);color:var(--ds-text);border-color:var(--ds-border)} html[data-design] .design-option-desc,html[data-design] .design-panel-sub,html[data-design] .design-foot{color:var(--ds-muted)} html[data-design] .design-option[aria-pressed="true"]{border-color:var(--ds-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ds-accent) 18%,transparent)} /* Admin/auth ecosystem */ html[data-design] .card,html[data-design] .block,html[data-design] .stat,html[data-design] .membre,html[data-design] .mdp-boite{background:var(--ds-surface)!important;color:var(--ds-text);border-color:var(--ds-border)} html[data-design] .glass{border-color:var(--ds-border)!important} html[data-design] .btn,html[data-design] .tab{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)} html[data-design] .btn--go{background:var(--ds-accent);color:#fff;border-color:transparent} html[data-design] .tab[aria-selected="true"]{background:var(--ds-text);color:var(--ds-bg)} html[data-design] th,html[data-design] td{border-color:var(--ds-border);color:var(--ds-text)} html[data-design] th,html[data-design] .note,html[data-design] .stat span,html[data-design] .block .lede,html[data-design] .card .sub,html[data-design] .creds,html[data-design] .membre-note{color:var(--ds-muted)} html[data-design] .etiq--owner{background:var(--ds-accent);color:#fff} html[data-design] .etiq--staff,html[data-design] .etiq--muet{background:color-mix(in srgb,var(--ds-text) 8%,transparent);color:var(--ds-muted)} html[data-design] .reveal-pw,html[data-design] .mdp-valeur{background:color-mix(in srgb,#15803d 12%,var(--ds-surface));border-color:color-mix(in srgb,#15803d 30%,var(--ds-border))} html[data-design] .toast{background:var(--ds-text);color:var(--ds-bg)} /* Legal / utility pages */ html[data-design] body:has(.wrap) .wrap{color:var(--ds-text)} html[data-design] body:has(.wrap) .note{background:var(--ds-surface);border-color:var(--ds-border);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)} html[data-design] body:has(.wrap) .en{border-color:var(--ds-border)} html[data-design] body:has(.wrap) small{color:var(--ds-muted)} html[data-design] body:has(.wrap) .back{padding:.5rem .75rem;border:1px solid var(--ds-border);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:var(--ds-shadow)} /* Mode-specific global character for pages that do not use index components. */ html[data-design="minimalism"] body{font-family:Geist,ui-sans-serif,system-ui,sans-serif} html[data-design="brutalism"] body{font-family:Arial,Helvetica,sans-serif} html[data-design="brutalism"] .card,html[data-design="brutalism"] .block,html[data-design="brutalism"] .stat,html[data-design="brutalism"] .membre,html[data-design="brutalism"] .mdp-boite{border:3px solid #050505!important;box-shadow:6px 6px 0 #050505!important;border-radius:0!important} html[data-design="brutalism"] .btn,html[data-design="brutalism"] .tab,html[data-design="brutalism"] input,html[data-design="brutalism"] select,html[data-design="brutalism"] textarea{border:2px solid #050505;border-radius:0} html[data-design="brutalism"] .btn--go{box-shadow:5px 5px 0 #050505} html[data-design="neomorphism"] .card,html[data-design="neomorphism"] .block,html[data-design="neomorphism"] .stat,html[data-design="neomorphism"] .membre,html[data-design="neomorphism"] .mdp-boite{border:0!important;box-shadow:var(--ds-shadow)!important} html[data-design="neomorphism"] input,html[data-design="neomorphism"] select,html[data-design="neomorphism"] textarea{box-shadow:inset 5px 5px 10px rgba(145,155,170,.22),inset -5px -5px 10px rgba(255,255,255,.9)} html[data-design="skeuomorphism"] body{font-family:Georgia,"Times New Roman",serif} html[data-design="skeuomorphism"] .card,html[data-design="skeuomorphism"] .block,html[data-design="skeuomorphism"] .stat,html[data-design="skeuomorphism"] .membre,html[data-design="skeuomorphism"] .mdp-boite{background:linear-gradient(#f8f3e9,#ddd3c4)!important;box-shadow:var(--ds-shadow)!important} html[data-design="claymorphism"] .card,html[data-design="claymorphism"] .block,html[data-design="claymorphism"] .stat,html[data-design="claymorphism"] .membre,html[data-design="claymorphism"] .mdp-boite{border:0!important;box-shadow:var(--ds-shadow)!important} html[data-design="glassmorphism"] .card,html[data-design="glassmorphism"] .block,html[data-design="glassmorphism"] .stat,html[data-design="glassmorphism"] .membre,html[data-design="glassmorphism"] .mdp-boite,html[data-design="liquid-glass"] .card,html[data-design="liquid-glass"] .block,html[data-design="liquid-glass"] .stat,html[data-design="liquid-glass"] .membre,html[data-design="liquid-glass"] .mdp-boite{backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);box-shadow:var(--ds-shadow)!important} html[data-design="spatial"] .card,html[data-design="spatial"] .block,html[data-design="spatial"] .stat,html[data-design="spatial"] .membre,html[data-design="spatial"] .mdp-boite{box-shadow:var(--ds-shadow)!important} @media(max-width:860px){ html[data-design] .design-panel{position:fixed;top:calc(env(safe-area-inset-top,0px) + 66px);right:max(1rem,env(safe-area-inset-right));width:min(430px,calc(100vw - 2rem));max-height:calc(100dvh - 82px);overflow:auto} html[data-design] .design-options{grid-template-columns:repeat(2,1fr);max-height:none} } @media(max-width:380px){html[data-design] .design-options{grid-template-columns:1fr}html[data-design] .design-panel{width:calc(100vw - 1rem);right:.5rem}} @media(prefers-reduced-motion:reduce){html[data-design] .design-trigger,html[data-design] .design-panel,html[data-design] .design-option{transition:none!important}} .design-control--floating{position:fixed!important;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));z-index:200} html[data-design="maximalism"] .design-control--floating .design-trigger{box-shadow:0 12px 28px rgba(255,46,136,.28)} html[data-design="glassmorphism"] .design-control--floating .design-trigger,html[data-design="liquid-glass"] .design-control--floating .design-trigger{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)} /* ══════════════════════════════════════════════════════════════════════════ THEMED SELECT MENUS Native