html, body { background: #FFFFFF; color: #0F172A; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

.card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.inp {
    width: 100%; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: .75rem;
    padding: .6rem .8rem; font-size: .875rem; color: #0F172A; outline: none; transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: #94A3B8; }
.inp:focus { border-color: #0D9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, .10); }
.inp.is-invalid { border-color: #F43F5E; box-shadow: 0 0 0 4px rgba(244, 63, 94, .08); }
.lbl { display: block; font-size: .75rem; font-weight: 600; color: #64748B; margin-bottom: .3rem; }

.modal { display: flex; }
.modal.hidden { display: none; }

.leaflet-container { font-family: Inter, sans-serif; background: #F8FAFC; }
.relay-pin {
    width: 30px; height: 30px; border-radius: 9999px 9999px 9999px 2px; transform: rotate(-45deg);
    background: #FFFFFF; border: 2px solid #0D9488; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
}
.relay-pin i { transform: rotate(45deg); color: #0D9488; font-size: 12px; }
.relay-pin.is-locker { border-color: #0EA5E9; }
.relay-pin.is-locker i { color: #0EA5E9; }
.relay-pin.is-sel { background: #0D9488; border-color: #0D9488; }
.relay-pin.is-sel i { color: #FFFFFF; }

@keyframes floatUp { 0% { transform: translateY(6px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.step-anim { animation: floatUp 3s ease-in-out infinite; }

@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-float { animation: heroFloat 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-float, .step-anim { animation: none; } }

/* Aperçus de finition (mini écran) */
.swatch { display: block; width: 34px; height: 56px; border-radius: 9px; border: 2px solid #CBD5E1; position: relative; overflow: hidden; box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .25); }
.swatch::before { content: ""; position: absolute; top: 4px; left: 50%; width: 10px; height: 3px; margin-left: -5px; border-radius: 2px; background: rgba(15, 23, 42, .55); z-index: 2; }
.sw-hd { background: linear-gradient(135deg, #7DD3FC, #22D3EE 55%, #5EEAD4); }
.sw-hd::after { content: ""; position: absolute; inset: -10px; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 46%, transparent 54%); }
.sw-mat { background: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.2px) 0 0 / 4px 4px, linear-gradient(135deg, #A5D8E8, #9FD3CF); filter: saturate(.75); }
.sw-privacy { background: linear-gradient(90deg, rgba(15, 23, 42, .9), rgba(15, 23, 42, 0) 38%, rgba(15, 23, 42, 0) 62%, rgba(15, 23, 42, .9)), linear-gradient(135deg, #7DD3FC, #22D3EE 55%, #5EEAD4); }
.sw-blue { background: linear-gradient(135deg, #FDE68A, #FCD34D 55%, #FDBA74); }

/* ===== Back-office (style admin Shopify / Polaris, thème clair) ===== */
.adm { background: #F1F5F9; color: #1E293B; font-size: 14px; }
.pcard { background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .06); }
.pcard-h { padding: 14px 16px 0; font-weight: 650; color: #0F172A; font-size: 14px; }
.pbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #1E293B; background: #FFFFFF; box-shadow: 0 1px 0 rgba(15, 23, 42, .08), inset 0 0 0 1px #D9DEE5; transition: background .15s; white-space: nowrap; }
.pbtn:hover { background: #F8FAFC; }
.pbtn:disabled { opacity: .5; cursor: not-allowed; }
.pbtn-primary { background: #0D9488; color: #FFFFFF; box-shadow: 0 1px 0 rgba(15, 23, 42, .12), inset 0 -1px 0 rgba(0, 0, 0, .15); }
.pbtn-primary:hover { background: #0F766E; }
.pbtn-ghost { box-shadow: none; background: transparent; }
.pbtn-ghost:hover { background: #E2E8F0; }
.pbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 550; line-height: 18px; white-space: nowrap; }
.pdot { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; }
.pdot-hollow { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; border: 1.5px solid currentColor; }
.pdot-half { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.ptable { width: 100%; font-size: 13px; }
.ptable th { text-align: left; font-weight: 600; color: #64748B; font-size: 12px; padding: 8px 12px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
.ptable td { padding: 10px 12px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
.ptable tbody tr:hover td { background: #F8FAFC; }
.ptab { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #475569; white-space: nowrap; }
.ptab:hover { background: #F1F5F9; }
.ptab.is-on { background: #E2E8F0; color: #0F172A; }
.navlink { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #334155; }
.navlink:hover { background: #E2E8F0; }
.navlink.is-on { background: #FFFFFF; color: #0F172A; box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .06); }
.navlink i { width: 18px; text-align: center; color: #64748B; }
.navlink.is-on i { color: #0D9488; }
.toggle { position: relative; width: 36px; height: 20px; border-radius: 9999px; background: #CBD5E1; transition: background .15s; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 9999px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.toggle.is-on { background: #0D9488; }
.toggle.is-on::after { transform: translateX(16px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ptable th.text-right { text-align: right; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }