:root{--brand:#102f28;--accent:#cba65a;--paper:#f4efe5;--ink:#17231f;--muted:#69736e;--line:#d9d9d2;--white:#fff;--font-title:"Fraunces",serif;--font-body:"DM Sans",sans-serif}*{box-sizing:border-box}body{margin:0;background:#f6f7f5;color:var(--ink);font-family:var(--font-body)}button,input{font:inherit}.topbar{height:68px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e6e9e7}.brand{font-weight:800;color:#123e35;text-decoration:none;font-size:22px}.brand span{font-size:13px;font-weight:600;color:#71807a;margin-left:9px}.draft{font-size:12px;background:#edf5f1;color:#245c4d;padding:7px 11px;border-radius:99px}.intro{text-align:center;max-width:760px;margin:58px auto 36px;padding:0 20px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8a6a29;font-weight:700}.intro h1{font-family:var(--font-title);font-size:clamp(36px,5vw,58px);line-height:1.03;margin:12px 0}.intro>p:last-child{color:var(--muted);font-size:17px}.builder{width:min(1440px,calc(100% - 32px));margin:0 auto 60px;display:grid;grid-template-columns:370px 1fr;gap:20px}.controls,.preview-zone{background:#fff;border:1px solid #e2e5e3;border-radius:20px;box-shadow:0 14px 45px rgba(27,46,39,.06)}.controls{padding:24px;max-height:900px;overflow:auto}.step{display:flex;gap:12px;align-items:flex-start;margin:24px 0 14px}.step:first-child{margin-top:0}.step>span{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:#153d34;color:#fff;font-size:13px;font-weight:700}.step h2{font-size:15px;margin:2px 0}.step p{font-size:12px;color:var(--muted);margin:2px 0}.controls>label,dialog label{display:grid;gap:7px;font-size:12px;font-weight:700;margin:10px 0}.controls input,dialog input{border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}.controls input:focus,dialog input:focus{border-color:#367564;box-shadow:0 0 0 3px #dfeee9}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice,.palette{border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;text-align:left}.choice{padding:12px}.choice b{display:block;font-size:13px}.choice small{color:var(--muted)}.choice.active,.palette.active{border-color:#28604f;box-shadow:0 0 0 2px #cfe3dc}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette{padding:9px}.swatches{display:flex;margin-bottom:7px}.swatches i{width:22px;height:18px;display:block}.swatches i:first-child{border-radius:5px 0 0 5px}.swatches i:last-child{border-radius:0 5px 5px 0}.palette b{font-size:11px}.plans{display:grid;gap:8px}.plans label{cursor:pointer}.plans input{position:absolute;opacity:0}.plans span{display:grid;border:1px solid var(--line);border-radius:11px;padding:11px}.plans input:checked+span{border-color:#28604f;background:#f1f8f5}.plans small{color:var(--muted);margin-top:3px}.preview-zone{padding:18px;min-width:0}.preview-tools{display:flex;justify-content:space-between;align-items:center;padding:0 4px 14px}.preview-tools strong{font-size:14px}.device{border:0;background:#eef1ef;color:#58655f;padding:7px 10px;font-size:11px;cursor:pointer}.device:first-child{border-radius:8px 0 0 8px}.device:last-child{border-radius:0 8px 8px 0}.device.active{background:#173d34;color:#fff}.screen{background:#e8ecea;border-radius:13px;min-height:650px;padding:24px;display:flex;justify-content:center;overflow:auto}.site-preview{width:100%;max-width:980px;background:var(--paper);color:var(--ink);box-shadow:0 10px 34px rgba(0,0,0,.16);transition:.3s}.screen.mobile .site-preview{max-width:390px}.site-preview nav{height:64px;padding:0 30px;display:flex;justify-content:space-between;align-items:center;background:var(--paper)}.site-preview nav strong{font-family:var(--font-title);font-size:20px}.site-preview nav span{font-size:11px}.hero{min-height:330px;padding:46px;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.05)),url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=85') center/cover;color:#fff}.hero-copy{max-width:510px}.mini{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--accent)}.hero h2{font-family:var(--font-title);font-size:48px;line-height:1;margin:10px 0}.hero p{margin:0 0 20px}.hero button,.summary button,.primary{background:var(--accent);color:#201806;border:0;padding:12px 17px;border-radius:99px;font-weight:700;cursor:pointer}.preview-body{padding:38px}.preview-body h3{font-family:var(--font-title);font-size:30px;max-width:520px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.cards div{background:color-mix(in srgb,var(--paper),white 50%);padding:16px;border:1px solid color-mix(in srgb,var(--ink),transparent 85%)}.cards b,.cards small{display:block}.cards small{font-size:11px;color:color-mix(in srgb,var(--ink),transparent 40%);margin-top:6px}.pro-only{display:none}.site-preview[data-plan="pro"] .pro-only{display:block}.screen.mobile .site-preview nav span{display:none}.screen.mobile .hero{min-height:430px;padding:28px}.screen.mobile .hero h2{font-size:40px}.screen.mobile .preview-body{padding:26px}.screen.mobile .cards{grid-template-columns:1fr}.summary{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 0;gap:14px}.summary small,.summary b{display:block}.summary small{font-size:11px;color:var(--muted)}.summary b{font-size:13px}.summary button{background:#173d34;color:#fff}dialog{border:0;border-radius:18px;padding:0;width:min(500px,calc(100% - 30px));box-shadow:0 30px 90px #0004}dialog::backdrop{background:#0d211caa;backdrop-filter:blur(3px)}dialog form{padding:30px;position:relative}dialog h2{font-family:var(--font-title);font-size:32px;margin:8px 0}.close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:26px;cursor:pointer}.notice{font-size:12px;color:var(--muted);background:#f1f4f2;padding:12px;border-radius:8px}@media(max-width:900px){.builder{grid-template-columns:1fr}.controls{max-height:none}.screen{min-height:550px;padding:12px}}@media(max-width:560px){.intro{margin-top:38px}.builder{width:min(100% - 18px,1440px)}.choice-grid,.palette-grid{grid-template-columns:1fr 1fr}.preview-zone{padding:10px}.screen{padding:7px}.site-preview nav{padding:0 18px}.hero{padding:26px;min-height:420px}.hero h2{font-size:40px}.preview-body{padding:24px}.cards{grid-template-columns:1fr}.summary{align-items:stretch;flex-direction:column}.summary button{width:100%}}
/* Official Site Builder identity */
.topbar{min-height:88px;height:auto;padding-block:10px;background:#0d1422;border-bottom-color:#202b3c}
.brand{display:block;width:min(430px,68vw);text-decoration:none}
.brand img{display:block;width:100%;height:auto;max-height:68px;object-fit:contain;object-position:left center}
.draft{background:#162b45;color:#dce9ff;border:1px solid #284465;white-space:nowrap}
.topbar{position:sticky;top:0;z-index:1000;box-shadow:0 8px 24px rgba(5,12,24,.16)}
.topbar{transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
.topbar.scrolled{background:rgba(13,20,34,.78);border-bottom-color:rgba(123,146,181,.28);box-shadow:0 10px 32px rgba(5,12,24,.22);-webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%)}

/* Make every selected palette visibly transform the preview identity. */
.site-preview nav{background:var(--brand);color:#fff;border-bottom:3px solid var(--accent)}
.site-preview nav strong{color:#fff}
.site-preview .hero{background-image:linear-gradient(90deg,color-mix(in srgb,var(--brand),#000 18%) 0%,color-mix(in srgb,var(--brand),transparent 35%) 58%,transparent 100%),url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=85')}
.site-preview .hero button{background:var(--accent);box-shadow:0 8px 22px color-mix(in srgb,var(--brand),transparent 58%)}
.site-preview .preview-body{border-top:7px solid var(--accent)}
.site-preview .preview-body>h3{color:var(--brand)}
.site-preview .cards div{border-left:4px solid var(--brand);box-shadow:0 6px 18px color-mix(in srgb,var(--brand),transparent 88%)}
.site-preview .cards b{color:var(--brand)}

/* Template 1 — Elegance: editorial, spacious and refined. */
.site-preview[data-template="elegance"] .hero-copy{border-left:3px solid var(--accent);padding-left:24px}
.site-preview[data-template="elegance"] .preview-body{text-align:center}
.site-preview[data-template="elegance"] .preview-body>h3{margin-inline:auto}
.site-preview[data-template="elegance"] .cards{text-align:left}

/* Template 2 — Café de quartier: friendly, compact and rounded. */
.site-preview[data-template="quartier"] nav{margin:12px;border-radius:14px;height:58px}
.site-preview[data-template="quartier"] .hero{min-height:300px;margin:0 12px;border-radius:18px;align-items:center}
.site-preview[data-template="quartier"] .hero-copy{padding:22px;background:color-mix(in srgb,var(--brand),transparent 20%);border-radius:16px;backdrop-filter:blur(6px)}
.site-preview[data-template="quartier"] .hero h2{font-size:42px}
.site-preview[data-template="quartier"] .cards div{border-left:0;border-top:5px solid var(--accent);border-radius:15px}

/* Template 3 — Bistro moderne: clean, graphic and horizontal. */
.site-preview[data-template="bistro"] nav strong{text-transform:uppercase;letter-spacing:.08em}
.site-preview[data-template="bistro"] .hero{min-height:260px;align-items:center;background-position:center 58%}
.site-preview[data-template="bistro"] .hero-copy{max-width:620px;display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:end}
.site-preview[data-template="bistro"] .hero-copy .mini,.site-preview[data-template="bistro"] .hero-copy h2{grid-column:1/-1}
.site-preview[data-template="bistro"] .hero-copy p{margin:0}
.site-preview[data-template="bistro"] .preview-body{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;align-items:start}
.site-preview[data-template="bistro"] .preview-body .mini,.site-preview[data-template="bistro"] .preview-body h3{grid-column:1}
.site-preview[data-template="bistro"] .preview-body h3{margin-top:0}
.site-preview[data-template="bistro"] .cards{grid-column:2;grid-row:1/3;grid-template-columns:1fr}

/* Template 4 — Lounge: immersive, dramatic and premium. */
.site-preview[data-template="lounge"]{background:color-mix(in srgb,var(--brand),#08090d 72%);color:#f6f1e8}
.site-preview[data-template="lounge"] nav{background:color-mix(in srgb,var(--brand),#05070a 65%);text-transform:uppercase;letter-spacing:.12em}
.site-preview[data-template="lounge"] .hero{min-height:410px;justify-content:center;text-align:center;align-items:center;background-image:linear-gradient(0deg,color-mix(in srgb,var(--brand),#000 28%),transparent 78%),url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=85')}
.site-preview[data-template="lounge"] .hero-copy{max-width:600px}
.site-preview[data-template="lounge"] .hero h2{font-size:54px;text-transform:uppercase;letter-spacing:.04em}
.site-preview[data-template="lounge"] .preview-body>h3{color:var(--accent)}
.site-preview[data-template="lounge"] .cards div{background:rgba(255,255,255,.06);border-color:var(--accent)}
.site-preview[data-template="lounge"] .cards b{color:#fff}.site-preview[data-template="lounge"] .cards small{color:rgba(255,255,255,.68)}

@media(max-width:650px){.site-preview[data-template="bistro"] .hero-copy,.site-preview[data-template="bistro"] .preview-body{display:block}.site-preview[data-template="bistro"] .cards{margin-top:22px}.site-preview[data-template="lounge"] .hero h2{font-size:40px}}

/* Local logo and hero-photo preview controls. */
.site-preview{position:relative;overflow:hidden}.plan-badge{position:absolute;z-index:4;right:14px;top:76px;background:rgba(255,255,255,.94);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand),transparent 70%);border-radius:99px;padding:6px 10px;font-size:9px;font-weight:800;letter-spacing:.12em;box-shadow:0 6px 18px rgba(0,0,0,.12)}.site-preview[data-plan="pro"] .plan-badge{background:var(--accent);color:#241a0d}.pro-panel{display:none;margin-top:28px;background:var(--brand);color:#fff;padding:26px;border-radius:16px;text-align:left}.site-preview[data-plan="pro"] .pro-panel{display:block}.pro-panel-head span{display:block;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.17em}.pro-panel-head strong{display:block;font-family:var(--font-title);font-size:24px;line-height:1.15;margin-top:8px}.pro-features{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.pro-features div{padding:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:10px}.pro-features i{display:block;color:var(--accent);font-size:10px;font-style:normal;font-weight:800}.pro-features b,.pro-features small{display:block}.pro-features b{font-size:12px;margin-top:7px}.pro-features small{font-size:10px;color:rgba(255,255,255,.68);margin-top:3px}.pro-panel>button{border:0;border-radius:99px;background:var(--accent);color:#261c0d;padding:10px 14px;font-size:11px;font-weight:800}.screen.mobile .plan-badge{top:74px}.screen.mobile .pro-features{grid-template-columns:1fr}@media(max-width:650px){.pro-features{grid-template-columns:1fr}}
.controls select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 36px 11px 12px;outline:none;background:#fff;color:var(--ink);font:inherit;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#587069 50%),linear-gradient(135deg,#587069 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}.controls select:focus{border-color:#367564;box-shadow:0 0 0 3px #dfeee9}
.site-preview .hero{background-image:linear-gradient(90deg,color-mix(in srgb,var(--brand),#000 18%) 0%,color-mix(in srgb,var(--brand),transparent 35%) 58%,transparent 100%),var(--hero-photo,url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=85'))}
.site-preview[data-template="lounge"] .hero{background-image:linear-gradient(0deg,color-mix(in srgb,var(--brand),#000 28%),transparent 78%),var(--hero-photo,url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=85'))}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.upload{display:grid;gap:6px;font-size:11px;font-weight:700}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload span{display:grid;place-items:center;min-height:42px;padding:8px;border:1px dashed #91a09a;border-radius:10px;background:#f7faf8;color:#28594b;cursor:pointer;text-align:center}.upload:hover span{border-color:#28604f;background:#edf6f2}.upload-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}.upload-actions small{font-size:10px;color:var(--muted)}.upload-actions button{border:0;background:none;color:#7b3b43;font-size:10px;font-weight:700;cursor:pointer;padding:4px}.preview-brand{display:flex;align-items:center;gap:10px;min-width:0}.preview-brand img{display:none;width:auto;height:42px;max-width:150px;object-fit:contain}.preview-brand img.visible{display:block}.preview-brand img.visible+strong{display:none}