/* The same calendar and visitor journey serve the full examples and home preview. */
[data-example]{--journey-ink:var(--ink,#21372d);--journey-paper:var(--paper,#fffdf7);--journey-line:var(--line,#d2d9d1);--journey-accent:var(--accent,#254f3d)}
[data-example] [hidden]{display:none!important}
[data-example] button,[data-example] input,[data-example] select,[data-example] textarea{font:inherit}
[data-example] button,[data-example] a,[data-example] input,[data-example] summary{touch-action:manipulation}
[data-example] :focus-visible{outline:3px solid #b77832;outline-offset:4px}
[data-example] input,[data-example] select,[data-example] textarea{min-width:0;max-width:100%;font-size:1rem}
[data-example] label{display:block;margin:12px 0 5px}
[data-example] label input:not([type=radio]),[data-example] label textarea{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid var(--journey-line);background:var(--journey-paper);color:var(--journey-ink);border-radius:4px}
[data-example] label textarea{min-height:100px;resize:vertical}
[data-example] .calendar-panel{min-width:0}
[data-example] .calendar-panel h3{font-size:1.5rem;margin:0 0 12px}
[data-example] .cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 12px}
[data-example] .cal-nav strong{text-transform:capitalize;font-size:1rem;text-align:center}
[data-example] .cal-nav button{width:44px;min-height:44px;padding:4px;border:1px solid var(--journey-line);background:transparent;color:var(--journey-ink);border-radius:5px;font-size:1.6rem}
[data-example] .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
[data-example] .weekday{font-size:.72rem;color:var(--muted,#5c685f);text-align:center;padding:4px 0}
[data-example] .day{min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 0;background:transparent;color:var(--journey-ink);border:1px solid var(--journey-line);border-radius:4px;font-size:.95rem;line-height:1.2}
[data-example] .day-state{font:10px/1.3 Arial,sans-serif;margin-top:3px}
[data-example] .day.available{background:var(--soft,#edf2ec);cursor:pointer}
[data-example] .day.available:hover,[data-example] .day.chosen{background:var(--journey-accent);color:var(--journey-paper)}
[data-example] .day.busy{border-style:dashed}
[data-example] .day.busy>span:first-child{text-decoration:line-through}
[data-example] .day.past{border-color:transparent;color:var(--muted,#657169)}
[data-example] .legend{font-size:.72rem;line-height:1.5;margin:12px 0;color:var(--muted,#5c685f)}
[data-example] .jump{display:flex;align-items:end;gap:10px;margin:16px 0 0}
[data-example] .jump label{flex:1;font-size:.78rem;min-width:0;margin:0}
[data-example] .jump input{min-height:44px;font-size:1rem;padding:8px}
[data-example] .jump button{min-height:44px;padding:10px 20px}
[data-example] .slots{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
[data-example] .slots p{flex-basis:100%;font-size:.9rem}
[data-example] .slots button{min-height:44px;min-width:76px;padding:10px;border:1px solid var(--journey-line);background:var(--journey-paper);color:var(--journey-ink);border-radius:4px}
[data-example] .slots button:disabled{opacity:.6;text-decoration:line-through}
[data-example] dialog{width:min(620px,calc(100% - 24px));max-height:90dvh;overflow:auto;margin:auto;padding:48px 28px 28px;background:var(--journey-paper);color:var(--journey-ink);border:1px solid var(--journey-line);border-radius:8px}
[data-example] dialog::backdrop{background:#10251ed9}
[data-example] dialog .close{position:absolute;right:5px;top:3px;width:44px;height:44px;background:transparent;color:var(--journey-ink);border:0;font-size:1.8rem;padding:0}
[data-example] dialog h2{font-family:Georgia,serif;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:400;margin:10px 0 20px;line-height:1.12}
[data-example] dialog p{font-size:.93rem;line-height:1.6;margin:14px 0}
[data-example] dialog .fine{font-size:.78rem;color:var(--muted,#59685f)}
[data-example] .journey-recap{padding:15px 0;border-block:1px solid var(--journey-line)}
[data-example] .journey-recap dt{font-size:.78rem;color:var(--muted,#59685f);margin-top:10px}
[data-example] .journey-recap dd{margin:5px 0 14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:1rem}
[data-example] .clarification{padding:13px 15px;border-left:3px solid var(--journey-accent);background:var(--soft,#edf2ec);border-radius:0 4px 4px 0}
[data-example] .actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px}
[data-example] .actions>button,[data-example] .actions>a,[data-example] #visitor-form button{min-height:48px;font-size:.9rem;white-space:normal}
[data-example] .actions>button:not(.button){padding:10px 14px;border:1px solid var(--journey-line);background:transparent;color:var(--journey-ink)}
[data-example] .example-amount{font:2.4rem Georgia,serif!important}
[data-example] .example-amount span{display:block;font: .85rem/1.6 Arial,sans-serif;margin-top:8px}
[data-example] .payment-choice{display:flex;flex-wrap:wrap;gap:12px;border:0;padding:0;margin:22px 0}
[data-example] .payment-choice legend{font-size:.9rem;margin-bottom:10px}
[data-example] .payment-choice label{flex:1;display:flex;align-items:center;gap:12px;border:1px solid var(--journey-line);border-radius:6px;padding:16px;min-width:130px;margin:0}
[data-example] .payment-choice input{width:20px;height:20px;margin:0}
[data-example] #photo-dialog img{max-width:100%;width:100%;height:60dvh;object-fit:contain}
[data-example] #photo-dialog figcaption{font-size:.9rem;margin-top:10px}
.example-frame{background:#f5f2e8;color:#23392f;padding:10px 3vw;display:flex;gap:16px;align-items:center;border-bottom:1px solid #d4d7ca;font:12px/1.45 Arial,sans-serif;position:relative;z-index:4}
.example-logo{display:inline-flex;flex:none}
.example-logo img{display:block;width:72px;height:72px;object-fit:contain;max-width:none;border-radius:7px}
.example-frame>div{flex:1;min-width:0}
.example-frame strong{font-weight:600;display:block;font-size:13px}
.example-frame span{display:block;margin-top:3px;color:#526052}
.example-frame a:not(.example-logo){font-size:12px;color:#23392f;min-height:44px;display:flex;align-items:center}
.example-settings{position:relative;border:0;color:#23392f;margin:0;padding:0;flex:none}
.example-settings summary{font:12px/1.4 Arial,sans-serif;padding:14px 22px 14px 0;min-height:44px;color:#23392f;cursor:pointer}
.example-settings>div{position:absolute;z-index:6;right:0;top:100%;width:min(340px,90vw);padding:20px;background:#fffdf7;color:#23392f;border:1px solid #d4d7ca;box-shadow:0 12px 30px #10251e1a;border-radius:6px}
.example-settings label,.example-settings p{font:13px/1.6 Arial,sans-serif;margin:8px 0}
.example-settings select{width:100%;padding:10px;border:1px solid #bbc8b8;border-radius:4px;background:white;color:#23392f}
.example-settings button{border:1px solid #bbc8b8;background:white;color:#23392f;min-height:44px;padding:10px;font-size:13px}
.immersive-example .site-header{height:auto;min-height:104px;flex-wrap:wrap}
.immersive-example .brand img{width:110px;height:74px;object-fit:contain;display:block}
.immersive-example .site-header .brand .eyebrow{font-size:10px;letter-spacing:.08em;margin-top:5px}
.immersive-example .site-header nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.immersive-example .site-header nav a{display:flex;align-items:center;min-height:44px;font-size:13px}
.immersive-example .hero{min-height:640px}
.immersive-example .hero-photo{min-height:580px}
.immersive-example .hero-copy{padding-top:48px;padding-bottom:48px}
.immersive-example .hero-copy h1{font-size:clamp(3rem,5.5vw,5.7rem)}
.immersive-example .hero .eyebrow{font-size:11px}
.immersive-example .hero-photo img{filter:none}
.immersive-example.traiteur .hero-photo{height:clamp(480px,43vw,620px);min-height:0;align-self:start}
.immersive-example.traiteur .hero-photo img{height:100%;object-position:50% 91%}
.immersive-example.photographe .hero-photo img{object-position:48% 25%}
.immersive-example .booking-heading{position:static}
.immersive-example .section{scroll-margin-top:20px}
.immersive-example .review-entry{max-width:700px;margin-top:30px}
.immersive-example .review-entry summary{min-height:48px}
.example-footer{display:flex;gap:28px;align-items:start;padding:42px 5vw;border-top:1px solid var(--line);font-size:.8rem}
.example-footer>div{flex:1;max-width:65ch}
.example-footer p{font-size:.8rem;line-height:1.6;margin:10px 0}
.example-footer nav{display:flex;flex-direction:column;gap:4px;align-items:start}
.example-footer nav a{display:flex;align-items:center;min-height:44px;font-size:.85rem}
.videaste{--paper:#202328;--ink:#f1e7db;--muted:#c5bfb8;--accent:#e4b59b;--soft:#303238;--line:#535459}
.videaste h1,.videaste h2,.videaste .brand{font-family:Georgia,serif}
.videaste .hero{grid-template-columns:1fr 1.1fr}
.videaste .hero-photo{margin:30px 30px 30px 0}
.videaste .hero-photo img{object-position:65% center}
.videaste .gallery-grid img{aspect-ratio:16/9;object-fit:cover}
.example-index{padding:42px 0 24px}
.example-index>p{max-width:65ch}
.example-index .fine{font-size:.85rem;color:var(--muted);margin-top:20px}
.example-index .trade-grid{margin-top:32px}
.example-index .trade-card small{display:block;padding:0 20px 20px;color:var(--muted)}
/* Home: a live component of the photographer example, with explicit attribution. */
.product-preview{--ink:#293a31;--paper:#fffdf7;--muted:#5f695f;--accent:#31513c;--soft:#edf0e6;--line:#d5dacb;border:1px solid #c5cdbf;background:#fffdf7;color:#293a31;border-radius:12px;box-shadow:0 20px 55px #23392f13;overflow:hidden;max-width:510px;margin:auto;width:100%}
.preview-caption{padding:10px 16px;background:#e3eada;display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:.72rem}
.preview-caption a{min-height:30px;display:flex;align-items:center;color:#264231}
.preview-identity{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.preview-identity>span{font:1.3rem Georgia,serif;letter-spacing:-.03em}
.preview-identity small{font-size:.65rem;max-width:90px;line-height:1.5;text-align:right}
.preview-cover{height:165px;position:relative;isolation:isolate}
.preview-cover img{width:100%;height:100%;object-fit:cover;object-position:center 25%;position:absolute;inset:0;z-index:-2}
.preview-cover:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#122c24b8,transparent)}
.preview-cover>div{padding:20px;color:white}
.preview-cover strong{font:1.8rem/1.1 Georgia,serif}
.preview-cover span{display:block;font-size:.75rem;margin-top:12px}
.preview-calendar{padding:18px 20px 8px}
.preview-calendar h2{font:1.35rem Georgia,serif;margin:0 0 5px}
.preview-calendar>p{font-size:.78rem;margin:0}
.product-preview .cal-nav{margin-top:12px;margin-bottom:8px}
.product-preview .day{min-height:40px;font-size:.88rem}
.product-preview .day-state{font-size:9px}
.product-preview .jump{margin-top:10px}
.product-preview .jump input{padding:5px 8px}
.preview-note{font-size:.72rem;line-height:1.5;margin:0;padding:6px 20px 18px;color:#596b5e}
.preview-note a{display:block;margin-top:10px;min-height:32px;font-size:.85rem}
@media(max-width:760px){
 .example-frame{gap:10px;padding:8px 14px;flex-wrap:nowrap}
 .example-frame .example-logo img{width:72px;height:72px}
 .example-frame>div{flex:1;min-width:0}
 .example-frame strong{font-size:12px}.example-frame span{font-size:11px}
 .example-settings summary{padding:14px 20px 14px 0;min-height:44px}
 .immersive-example .site-header{gap:4px;padding:8px 5vw;min-height:0}
 .immersive-example .site-header .brand{max-width:none;font-size:1.3rem;flex:1}
 .immersive-example.dj .site-header .brand{display:flex;gap:12px;align-items:center}
 .immersive-example .site-header .brand img{width:72px;height:56px}
 .immersive-example.dj .site-header .brand .eyebrow{max-width:180px;line-height:1.5;margin:0}
 .immersive-example .site-header nav{gap:0 16px;justify-content:flex-start;flex:1 1 100%}
 .immersive-example .site-header nav a{font-size:.75rem;min-height:40px}
 .immersive-example .hero,.immersive-example.salle .hero{display:flex;flex-direction:column;min-height:0;padding-bottom:40px}
 .immersive-example .hero-photo,.immersive-example.dj .hero-photo,.immersive-example.photographe .hero-photo,.immersive-example.traiteur .hero-photo,.immersive-example.salle .hero-photo,.immersive-example.videaste .hero-photo{position:relative;inset:auto;order:0;min-height:0;height:clamp(198px,55vw,224px);margin:0 5vw;align-self:stretch}
 .immersive-example .hero-photo img,.immersive-example.salle .hero-photo img{height:100%;object-fit:cover;max-height:none}
 .immersive-example.dj .hero-photo img{object-position:50% 22%}
 .immersive-example.traiteur .hero-photo img{object-position:50% 94%}
 .immersive-example.salle .hero-photo:after{display:none}
 .immersive-example .hero-copy,.immersive-example.dj .hero-copy,.immersive-example.salle .hero-copy{order:1;margin:0;padding:16px 6vw 22px;max-width:none;background:none;color:var(--ink);display:flex;flex-direction:column}
 .immersive-example .hero-copy h1,.immersive-example.salle .hero-copy h1{order:1;font-size:clamp(2.2rem,8.5vw,3.6rem);line-height:1.04}
 .immersive-example .hero-copy>p:not(.eyebrow),.immersive-example.salle .hero-copy>p:not(.eyebrow){order:3;font-size:.95rem;line-height:1.6;margin:18px 0 8px;color:var(--muted)}
 .immersive-example .hero .eyebrow{font-size:.7rem;margin-bottom:10px}
 .immersive-example.salle .hero-copy em{color:var(--accent)}
 .immersive-example.salle .hero-foot{color:var(--muted)}
 .immersive-example .hero .text-link{order:4;font-size:.85rem;min-height:44px;margin-top:5px;display:flex;align-items:center}
 .immersive-example .hero .button{order:2;align-self:start;margin-top:16px;min-height:48px;padding:12px 20px;font-size:.875rem}
 .immersive-example .signature,.immersive-example .booking,.immersive-example .appointment,.immersive-example .faq,.immersive-example .contact{grid-template-columns:1fr;gap:28px}
 .immersive-example .three{grid-template-columns:1fr}
 .example-footer{flex-wrap:wrap;padding:28px 6vw;gap:20px}
 .example-footer>div{flex:1 1 calc(100% - 100px)}
 .example-footer nav{width:100%;flex-direction:row;flex-wrap:wrap;gap:5px 20px}
 .product-preview{max-width:440px}.preview-caption{padding:5px 12px;font-size:.68rem}
 .preview-identity{padding:10px 14px}.preview-identity>span{font-size:1.2rem}
 .preview-cover{height:135px}.preview-cover>div{padding:18px}.preview-cover strong{font-size:1.65rem}
 .preview-calendar{padding:14px 12px 6px}.preview-calendar h2{font-size:1.2rem}
 .product-preview .day{min-height:42px}.product-preview .cal-grid{gap:3px}
 .preview-note{padding:8px 12px 14px}
 [data-example] dialog{padding:44px 20px 24px}
 [data-example] .actions{align-items:stretch;flex-direction:column}
 [data-example] .actions>button,[data-example] .actions>a{width:100%;justify-content:center;text-align:center}
}