function JewelPicker({ jewel, onPick, className = '' }) {
  const models = (window.QJewel && window.QJewel.models) || [];
  return <div className={'picker ' + className} role="radiogroup" aria-label="Choisir le bijou 3D">
    {models.map((m, i) => <button key={m.id} role="radio" aria-checked={jewel === m.id} className={'pick' + (jewel === m.id ? ' on' : '')} style={{ '--r': ([-2, 1.5, -1, 2.5, -1.5][i % 5]) + 'deg' }} onClick={() => onPick(m.id)}>{m.label}</button>)}
  </div>;
}

// Étiquette « Tournez-le » rendue au-dessus du canvas 3D (fixe, suit son ancre dans la scène)
function TurnTag() {
  const a = React.useRef(null), f = React.useRef(null);
  React.useEffect(() => {
    let raf, on = false;
    const tick = () => { const r = a.current.getBoundingClientRect(); f.current.style.transform = `translate(${r.left}px,${r.top}px)`; if (on) raf = requestAnimationFrame(tick); };
    const io = new IntersectionObserver(([e]) => { on = e.isIntersecting; f.current.classList.toggle('vis', on); cancelAnimationFrame(raf); if (on) tick(); });
    io.observe(a.current); return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, []);
  return <React.Fragment><span ref={a} className="turn-tag turn-anchor" aria-hidden="true"></span>{ReactDOM.createPortal(<div ref={f} className="turn-float"><Paper n={1} color="var(--q-fuchsia)" className="turn-tag-p" innerStyle={{ padding: '18px 34px' }}><span>Tournez-le</span></Paper></div>, document.body)}</React.Fragment>;
}

function Scrap({ cls, n, color, z = 10, i = 0, rot = 0, dur = 7, fx = 0, fy = 0, children }) {
  return <div className={'scrap ' + cls} style={{ '--z': z, '--i': i, '--rot': rot + 'deg', '--dur': dur + 's', '--fx': fx + '%', '--fy': fy + '%' }}><div className="drop"><Paper n={n} color={color}></Paper>{children}</div></div>;
}

function Hero({ jewel, onPick }) {
  const { Button, Tape } = QDS();
  React.useEffect(() => {
    if (!matchMedia('(pointer:fine)').matches || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const el = document.querySelector('.hero .sticky'); let raf;
    const f = e => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { el.style.setProperty('--mx', (e.clientX / innerWidth - .5).toFixed(3)); el.style.setProperty('--my', (e.clientY / innerHeight - .5).toFixed(3)); }); };
    addEventListener('pointermove', f, { passive: true }); return () => { removeEventListener('pointermove', f); cancelAnimationFrame(raf); };
  }, []);
  return <section id="top" data-pin="" data-loop="" data-screen-label="Accueil" className="hero pin">
    <div className="sticky">
      <div className="rip" aria-hidden="true"><i className="rip-top"></i><i className="rip-bot"></i></div>
      <Orn k="forme-organique-1" cls="h-o1"></Orn>
      <Orn k="forme-organique-3" cls="h-o2"></Orn>
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="logo-collage">
            <Scrap cls="s1" fx={120} fy={90} n={12} color="var(--q-blush)" z={14} i={1} rot={-12} dur={8}></Scrap>
            <Scrap cls="s2" fx={-140} fy={110} n={16} color="var(--q-sunflower)" z={20} i={2} rot={9} dur={6.5}><span className="tape-in" style={{ '--i': 5 }}><Tape n={5} width={64} rotate={-14} style={{ position: 'absolute', top: -8, left: '20%' }}></Tape></span></Scrap>
            <Scrap cls="s3" fx={40} fy={-160} n={1} color="var(--q-peach)" z={10} i={3} rot={3} dur={9}></Scrap>
            <Scrap cls="s4" fx={-90} fy={-140} n={3} color="var(--q-pink)" z={24} i={4} rot={-8} dur={7.5}></Scrap>
            <Scrap cls="s0" n={19} color="var(--q-bordeaux-chic)" z={5} i={0} rot={-2} dur={10}><span className="tape-in" style={{ '--i': 6 }}><Tape n={2} width={110} rotate={-6} style={{ position: 'absolute', top: -14, left: '8%' }}></Tape></span></Scrap>
            <div className="hero-logo" role="img" aria-label="Quintescence — Bijoux • Accessoires • Vêtements" dangerouslySetInnerHTML={{ __html: window.LOGO_SVG }}></div>
          </div>
          <h1 className="hero-h1"><Words text="Bijoux de créateurs & Accessoires à Bourges"></Words></h1>
          <p className="hero-sub" data-reveal="">Une sélection singulière, audacieuse et raffinée au cœur du centre historique.</p>
          <div className="row" data-reveal="" style={{ '--d': '.2s' }}>
            <Button variant="cta" size="lg" iconRight={Ic('arrow-right', 18, '#fff')} onClick={() => go('univers')}>Découvrir nos univers</Button>
            <Button variant="outlineLight" size="lg" iconLeft={Ic('map-pin', 18, 'var(--q-creme)')} onClick={() => go('visite')}>Nous rendre visite</Button>
          </div>
        </div>
        <div className="hero-stage">
          <div className="stage">
            <Scrap cls="st-a" fx={-120} fy={60} n={16} color="var(--q-peach)" z={18} i={3} rot={10} dur={8.5}></Scrap>
            <Scrap cls="st-b" fx={130} fy={-50} n={3} color="var(--q-sunflower)" z={26} i={5} rot={-7} dur={7}></Scrap>
            <Scrap cls="st-paper" n={12} color="var(--q-blush)" z={8} i={2} rot={-4} dur={11}></Scrap>
            <div className="pop" style={{ '--i': 4 }}><img src="assets/elements/cercle-brosse-vectorizely.svg" alt="" aria-hidden="true" className="stage-ring"></img></div>
            <span className="tape-in" style={{ '--i': 6 }}><Tape n={2} width={130} rotate={-9} style={{ position: 'absolute', top: '2%', left: '8%', zIndex: 3 }}></Tape></span>
            <div className="pop pop-f" style={{ '--i': 7 }}><Orn k="fleur" cls="stage-fleur"></Orn></div>
            <div className="pop pop-e" style={{ '--i': 8 }}><Orn k="etoile" cls="stage-etoile"></Orn></div>
            <div className="jewel-anchor" data-jewel-anchor="0" data-jewel-drag="" title="Faites-le tourner"></div>
            <TurnTag></TurnTag>
          </div>
          {/* Choix du bijou — à remettre avec les autres modèles : <JewelPicker jewel={jewel} onPick={onPick}></JewelPicker> */}
        </div>
      </div>
      <div className="scroll-hint"><span></span>Faites défiler</div>
    </div>
  </section>;
}

function Manifeste() {
  return <section data-pin="" data-screen-label="Manifeste" className="manif pin">
    <div className="sticky">
      <Orn k="forme-organique-2" cls="fly f1"></Orn>
      <Orn k="feuille" cls="fly f2"></Orn>
      <Orn k="traits" cls="fly f3"></Orn>
      <div className="m-copy">
        <Paper n={1} color="var(--q-sunflower)" className="m-eyebrow" innerStyle={{ padding: '16px 34px' }}><span>Notre raison d'être</span></Paper>
        <h2 className="m-h2">Exprimez votre</h2>
        <div className="m-script">Quintescence</div>
        <p className="m-lead">Nous concevons le bijou comme le prolongement d'une personnalité.</p>
      </div>
      <div className="m-disc">
        <Paper n={19} color="var(--q-sunflower)" className="m-paper"></Paper>
        <img src="assets/elements/cercle-brosse-vectorizely.svg" alt="" aria-hidden="true" className="m-ring"></img>
        <div className="jewel-anchor" data-jewel-anchor="1" data-jewel-drag=""></div>
        <div className="m-words">{['Douceur', 'Féminité', 'Énergie', 'Créativité', 'Caractère', 'Élégance'].map((w, i) => <span key={w} style={{ '--k': i }}>{w}</span>)}</div>
      </div>
    </div>
  </section>;
}

function Showroom({ jewel, onPick }) {
  const models = (window.QJewel && window.QJewel.models) || [];
  const { Tape } = QDS();
  return <section id="showroom" className="showroom pin" data-screen-label="Showroom 3D">
    <div className="wrap">
      <Paper n={8} color="var(--q-creme)" className="sr-paper" innerStyle={{ padding: 'clamp(40px,6vw,80px) clamp(24px,5vw,72px) clamp(72px,9vw,120px)', position: 'relative' }}>
        <div className="sr-grid" style={{ position: 'relative' }}>
          <div className="sr-stage">
            <img src="assets/elements/cercle-brosse-vectorizely.svg" alt="" aria-hidden="true" className="sr-ring"></img>
            <Orn k="forme-organique-3" cls="sr-o"></Orn>
            <div className="jewel-anchor" data-jewel-anchor="2" data-jewel-drag="" title="Faites-le tourner"></div>
          </div>
          <div className="sr-copy" style={{ margin: '25px -3px' }}>
            <Eyebrow color="var(--q-fuchsia)">Showroom 3D</Eyebrow>
            <h2 className="h2 dark"><Scraps text="Faites tourner nos pièces"></Scraps></h2>
            <p className="body">Notre bracelet en 3D : faites-le tourner pour l'admirer sous tous les angles.</p>
            {/* Liste des modèles — à remettre avec les autres GLB :
            <div className="sr-list">{models.map((m, i) => <button key={m.id} className={'sr-item' + (jewel === m.id ? ' on' : '')} onClick={() => onPick(m.id)} aria-pressed={jewel === m.id}><span className="sr-n">0{i + 1}</span><span className="sr-l">{m.label}</span></button>)}</div>
            */}
            <div className="sr-hint">{Ic('hand', 18, 'var(--q-fuchsia)')}Glissez sur le bijou pour le faire pivoter</div>
          </div>
        </div>
      </Paper>
      <Tape n={7} width={150} rotate={6} style={{ position: 'absolute', top: -18, right: '14%' }}></Tape>
    </div>
  </section>;
}

function Bienvenue() {
  return <TornBand className="layer welcome" data-screen-label="Bienvenue">
    <div className="wrap center" style={{ maxWidth: 940 }}>
      <Orn k="fleur" cls="w-fleur"></Orn>
      <Eyebrow color="var(--q-fuchsia)">Bienvenue</Eyebrow>
      <Words as="p" className="welcome-lead" step={0.025} text="Bienvenue chez Quintescence, votre écrin de créateurs niché au 68 rue Mirebeau. Depuis plus d'une décennie, notre boutique célèbre la créativité, l'artisanat d'art et l'élégance sous toutes ses formes."></Words>
      <p className="welcome-sub" data-reveal="">Poussez la porte d’un univers sensoriel où les couleurs, les matières nobles et les senteurs composent un voyage unique au fil des saisons.</p>
    </div>
  </TornBand>;
}

function Univers({ onBrands }) {
  const { Tape, Button } = QDS();
  const swipe = useDevice() !== 'desktop';
  const track = React.useRef(null), sec = React.useRef(null), [cur, setCur] = React.useState(0);
  React.useEffect(() => {
    if (swipe) {
      const t = track.current; sec.current.style.height = '';
      const f = () => { const c = t.scrollLeft + t.clientWidth / 2; let b = 0, bd = 1e9; t.querySelectorAll('.u-card').forEach((el, i) => { const d = Math.abs(el.offsetLeft + el.offsetWidth / 2 - c); if (d < bd) { bd = d; b = i; } }); setCur(b); };
      f(); t.addEventListener('scroll', f, { passive: true }); return () => t.removeEventListener('scroll', f);
    }
    const upd = () => { if (track.current && sec.current) { const w = Math.max(0, track.current.scrollWidth - innerWidth); sec.current.style.setProperty('--tw', w + 'px'); sec.current.style.height = (innerHeight + w * 1.1) + 'px'; } };
    upd(); addEventListener('resize', upd); addEventListener('load', upd); document.fonts?.ready.then(upd);
    const ro = new ResizeObserver(upd); track.current && ro.observe(track.current); ro.observe(document.documentElement);
    const t = setTimeout(upd, 800); return () => { removeEventListener('resize', upd); removeEventListener('load', upd); ro.disconnect(); clearTimeout(t); };
  }, [swipe]);
  const goCard = i => { const t = track.current, el = t.querySelectorAll('.u-card')[i]; t.scrollTo({ left: el.offsetLeft - (t.clientWidth - el.offsetWidth) / 2, behavior: 'smooth' }); };
  return <section id="univers" ref={sec} {...(swipe ? {} : { 'data-pin': '' })} data-screen-label="Univers" className={'univers layer ' + (swipe ? 'swipe' : 'pin')}>
    <div className="sticky">
      <div className="u-head wrap">
        <div><Eyebrow>Univers &amp; Créateurs</Eyebrow><h2 className="h2"><Scraps text="Les univers phares"></Scraps></h2></div>
        <div className="script pink">L'élégance dans chaque détail</div>
        <Orn k="feuille" cls="u-orn" style={{ position: 'absolute', left: 617, top: 162 }}></Orn>
      </div>
      <div className="u-track" ref={track}>
        {UNIVERS.map((u, i) => <div key={u.id} className="u-card" style={{ rotate: [-1.5, 1.2, -.8, 1.6][i] + 'deg' }}>
          <Paper n={[12, 9, 19, 10][i]} color={u.c} innerStyle={{ padding: '40px 9% 46px' }}>
            <div className="u-img"><img src={u.img} alt={u.t} loading="lazy"></img></div>
            <div className="u-k">{u.k}</div>
            <h3>{u.t}</h3>
            <p>{u.d}</p>
            <Button variant="primary" size="sm" iconRight={Ic('arrow-right', 14, 'var(--q-creme)')} onClick={() => onBrands(u.id)}>Voir les créateurs</Button>
            {i < 3 && <Tape n={[2, 5, 7][i]} width={110} rotate={[-6, 5, -4][i]} style={{ position: 'absolute', zIndex: 3, ...[{ top: 213, left: 284 }, { top: 4, left: 47 }, { top: 182, left: 214 }][i] }}></Tape>}
          </Paper>
          {i !== 2 && <Orn k={u.orn} cls="u-orn"></Orn>}
        </div>)}
        <div className="u-end"><div className="script pink" style={{ fontSize: 56 }}>Idées cadeaux</div><p>Une parure d'exception pour une célébration ou un cadeau coup de cœur.</p></div>
      </div>
      {swipe ? <div className="u-dots">{UNIVERS.map((u, i) => <button key={u.id} className={i === cur ? 'on' : ''} aria-label={'Univers ' + (i + 1) + ' : ' + u.t} aria-current={i === cur} onClick={() => goCard(i)}></button>)}</div> : <div className="u-progress"><span></span></div>}
    </div>
  </section>;
}

const CU_OFF = { 'Gas Bijoux': -7, 'Satellite Paris': -10, 'Enomis': -6, 'Taratata': -9, 'Ayala Bar': -7, 'Canyon': -3, 'Cyclone': -7, 'Litchi': -6 };
function Createurs({ filter, setFilter }) {
  const { Tape } = QDS();
  const tones = ['var(--q-creme)', 'var(--q-blush)', 'var(--q-peach)', 'var(--q-sunflower)', 'var(--q-poudre)', 'var(--q-rose-pale)'];
  const tabs = [['tous', 'Tous les créateurs'], ...UNIVERS.map(u => [u.id, u.t])];
  return <TornBand id="createurs" color="var(--q-bordeaux-chic)" className="layer createurs" data-screen-label="Créateurs">
    <div className="wrap">
      <div className="c-head">
        <div><Eyebrow>Marques phares</Eyebrow><h2 className="h2"><Scraps text="Le mur des créateurs"></Scraps></h2></div>
        <p className="c-lead">Une sélection qui évolue au fil des saisons et des arrivages.</p>
      </div>
      <div className="c-tabs" role="tablist">{tabs.map(([id, l]) => <button key={id} role="tab" aria-selected={filter === id} className={'pick' + (filter === id ? ' on' : '')} onClick={() => setFilter(id)}>{l}</button>)}</div>
      <div className="c-wall">
        {BRANDS.map((b, i) => { const on = filter === 'tous' || filter === b.u; const u = UNIVERS.find(x => x.id === b.u);
          return <div key={b.name} className={'c-label' + (on ? '' : ' off')} style={{ rotate: ([-3, 2, -1.5, 3.5, -2.5, 1][i % 6]) + 'deg', '--d': (i % 6) * 0.03 + 's' }}>
            <Paper n={[1, 3, 16, 4][i % 4]} color={tones[i % tones.length]} innerStyle={{ padding: 'clamp(22px,2.4vw,32px) clamp(32px,3.8vw,52px)' }}>
              <span className="c-name">{b.name}</span><span className="c-u" style={CU_OFF[b.name] ? { position: 'relative', top: CU_OFF[b.name] } : undefined}>{BRAND_INFO[b.name] || u.t}</span>
            </Paper>
          </div>; })}
      </div>
    </div>
  </TornBand>;
}

function Vitrine({ onOpen, onAdd }) {
  const { Badge, Tape } = QDS();
  const [ok, setOk] = React.useState(null), okT = React.useRef();
  const add = p => { onAdd(p); setOk(p.id); clearTimeout(okT.current); okT.current = setTimeout(() => setOk(null), 900); };
  return <section id="vitrine" className="layer vitrine" data-screen-label="Vitrine">
    <div className="wrap">
      <div className="v-head">
        <div><Eyebrow>En vitrine</Eyebrow><h2 className="h2"><Scraps text="Nouvelle Collection"></Scraps></h2></div>
        <div className="script pink">en ligne ou en boutique</div>
      </div>
      <div className="v-grid">{PIECES.map((p, i) => <div key={p.id} className="piece" style={{ '--tilt': ([-2, 1.5, -1, 2.2, -1.6, 1][i]) + 'deg', '--d': (i % 3) * 0.08 + 's' }} data-reveal="">
        <button className="piece-open" onClick={() => onOpen(p)} aria-label={'Voir ' + p.name}><Paper n={[9, 19, 10, 12, 18, 2][i]} color="var(--q-creme)" innerStyle={{ padding: '10% 10% 12%' }}>
          <div className="piece-img"><img src={p.img} alt={p.name} loading="lazy"></img></div>
          <div className="piece-brand">{p.brand}</div>
          <div className="piece-name">{p.name}</div>
          <div className="piece-foot"><span className="piece-price">{fmt(p.price)}</span></div>
        </Paper></button>
        <button className={'piece-add' + (ok === p.id ? ' ok' : '')} onClick={() => add(p)} aria-label={'Ajouter ' + p.name + ' au panier'}><span key={ok === p.id ? 'c' : 'p'} className="pa-ic">{Ic(ok === p.id ? 'check' : 'plus', 18, 'var(--q-bordeaux-chic)')}</span></button>
        {p.badge && <Badge tone={p.tone} style={{ position: 'absolute', top: 8, right: -6 }}>{p.badge}</Badge>}
        {i % 2 === 0 && <Tape n={[2, 4, 10][i % 3]} width={96} rotate={-8} style={{ position: 'absolute', top: -12, left: 18 }}></Tape>}
      </div>)}</div>
    </div>
  </section>;
}

function Cadeaux() {
  const C = [
    { icon: 'gift', title: 'Le petit mot', range: 'Moins de 30 €', desc: "Une paire de boucles ou une pince fleur, glissée dans une pochette en coton." },
    { icon: 'heart', title: 'Le cadeau sûr', range: '30 à 60 €', desc: "Un bijou doré à porter tous les jours, emballé avec une carte écrite à la main." },
    { icon: 'star', title: 'La grande occasion', range: 'Plus de 60 €', desc: "Un sac, une robe ou une pièce en édition limitée, présentée dans son écrin." }
  ];
  return <section id="cadeaux" data-loop="" className="layer cadeaux" data-screen-label="Idées cadeaux">
    <Paper n={4} color="var(--q-bordeaux-chic)" innerStyle={{ padding: 'clamp(76px,12vw,120px) 24px', position: 'relative', overflow: 'hidden' }}>
      <div className="cd-disc" data-par=""><Paper n={6} color="var(--q-fuchsia)" innerStyle={{ borderRadius: '50%' }}></Paper></div>
      <Orn k="etoile" cls="cd-star"></Orn>
      <div className="cd-in">
        <Eyebrow>Emballage offert</Eyebrow>
        <h2 className="h2"><Scraps text="Idées cadeaux"></Scraps></h2>
        <p className="cd-lead" data-reveal="">Dites-nous pour qui, nous composons l'écrin. Carte écrite à la main et emballage cadeau offerts, en boutique comme en ligne.</p>
        <div className="cd-grid">{C.map((c, i) => <div key={c.title} className="cd-tag" data-reveal="" style={{ '--d': i * 0.12 + 's' }}>
          <span className="cd-string" aria-hidden="true"></span>
          <button className="cd-card" style={{ animationDelay: (i * -1.7) + 's' }} onClick={() => go('vitrine')}>
            <Paper n={7} color="var(--q-creme)" innerStyle={{ padding: '42px 34px 38px' }}>
              <div className="cd-body">
                <span className="cd-hole" aria-hidden="true"></span>
                <span className="cd-ic">{Ic(c.icon, 24, '#fff')}</span>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <span className="cd-range">{c.range}</span>
              </div>
            </Paper>
          </button>
        </div>)}</div>
      </div>
    </Paper>
  </section>;
}

function Garanties() {
  const { Guarantee } = QDS();
  const g = [['sparkles', 'Conseil stylistique personnalisé', 'Une écoute sur-mesure pour sublimer votre carnation, votre coiffure et vos tenues.'], ['gem', 'Exclusivité berruyère', 'Une sélection rigoureuse de designers indépendants français et internationaux.'], ['star', 'Confiance de nos clientes', 'Établissement noté 4,9/5 sur Google et recommandé par le Petit Futé (5/5).']];
  return <section className="layer wrap gar" data-screen-label="Garanties">
    <Eyebrow>Vos garanties</Eyebrow>
    <div className="gar-grid">{g.map(([ic, t, d], i) => <div key={t} data-reveal="" style={{ '--d': i * 0.1 + 's', rotate: [-1, 1, -.5][i] + 'deg' }}>
      <Paper n={[4, 1, 16][i]} color="var(--q-bordeaux-chic)" innerStyle={{ padding: 'clamp(44px,5vw,60px) clamp(38px,4vw,54px)' }}>
        <Guarantee icon={ic} title={t} tone={['blush', 'poudre', 'creme'][i]}>{d}</Guarantee>
      </Paper>
    </div>)}</div>
  </section>;
}

function Histoire() {
  const { Tape } = QDS();
  const H = ({ t, children, d }) => <div data-reveal="" style={{ '--d': d }}><h3 className="h3">{t}</h3><p className="body">{children}</p></div>;
  return <TornBand id="histoire" className="layer histoire" data-screen-label="Notre histoire">
    <div className="wrap hist-grid">
      <div className="hist-copy">
        <div><Eyebrow color="var(--q-fuchsia)">Notre histoire</Eyebrow><div className="script fuchsia">depuis plus d'une décennie</div></div>
        <H t="Une institution de la rue Mirebeau" d="0s">Implantée dans la principale artère piétonne historique de Bourges, Quintescence est bien plus qu’une boutique : c’est une véritable « caverne d’Ali Baba » pensée pour surprendre et émerveiller. Dès l'origine, l'établissement s'est forgé une identité à contre-courant de la standardisation, en privilégiant l'audace de designers inspirés et de manufactures artisanales.</H>
        <H t="La transmission : continuité et modernité" d=".1s">Reprise fin août 2023 par Morgane Aubailly, l’aventure Quintescence perpétue cet héritage tout en affirmant un regard contemporain sur la mode et l’accessoire. L'ambition demeure intacte : dénicher des pièces d'exception, renouveler constamment les collections et faire rayonner le commerce de proximité berruyer.</H>
      </div>
      <div className="hist-photos">
        <div className="ph ph1" data-par=""><Paper n={9} color="#fff" innerStyle={{ padding: '7%', position: 'relative' }}><img src="assets/photos/facade-boutique.png" alt="Façade de la boutique Quintescence"></img></Paper></div>
        <div className="ph ph2" data-par=""><Paper n={20} color="#fff" innerStyle={{ padding: '14% 9% 9%' }}><img src="assets/photos/vitrine-quintescence.png" alt="Vitrine Quintescence"></img></Paper></div>
        <div className="ph ph3" data-par=""><Paper n={11} color="var(--q-bordeaux-chic)" innerStyle={{ padding: 'clamp(40px,5vw,58px) clamp(38px,5vw,58px)' }}>
          <div className="u-k" style={{ color: 'var(--q-peach)' }}>L'art du conseil sur-mesure</div>
          <p className="body" style={{ color: 'var(--q-creme)', marginTop: 10 }}>Nous concevons le bijou comme le prolongement d'une personnalité. Que vous cherchiez l'accessoire discret d'un vestiaire quotidien, une parure d'exception pour une célébration ou un cadeau coup de cœur, nous prenons le temps de composer avec vous l'harmonie parfaite.</p>
        </Paper></div>
      </div>
    </div>
  </TornBand>;
}

function Visite() {
  const { Button, IconRoundel, PaperNote, Tape } = QDS();
  const rows = [['map-pin', 'Adresse', '68 Rue Mirebeau, 18000 Bourges'], ['phone', 'Téléphone', '02 48 65 07 15'], ['clock', 'Du mardi au samedi', '10h00 – 12h30 / 14h00 – 19h00'], ['moon', 'Dimanche et Lundi', 'Fermé'], ['instagram', 'Instagram', '@quintescencebourges'], ['facebook', 'Facebook', 'QuintescenceB']];
  return <section id="visite" className="layer wrap visite" data-screen-label="Nous rendre visite">
    <div>
      <Eyebrow>Nous rendre visite</Eyebrow>
      <h2 className="h2"><Scraps text="Poussez la porte du 68 rue Mirebeau"></Scraps></h2>
      <div className="v-rows">{rows.map(([ic, l, v], i) => <div key={l} className="v-row" data-reveal="" style={{ '--d': i * 0.06 + 's' }}><IconRoundel name={ic} tone="blush" size={44}></IconRoundel><div><div className="u-k" style={{ color: 'var(--q-peach)' }}>{l}</div><div className="v-val">{v}</div></div></div>)}</div>
      <p className="body muted">Membre actif de l'Office de Commerce et de l'Artisanat de Bourges (OCAB).</p>
      <div className="row" style={{ marginTop: 24 }}>
        <Button variant="cta" iconLeft={Ic('map-pin', 16, '#fff')} onClick={() => open('https://maps.google.com/?q=68+rue+Mirebeau+18000+Bourges')}>Itinéraire</Button>
        <Button variant="outlineLight" iconLeft={Ic('phone', 16, 'var(--q-creme)')} onClick={() => (location.href = 'tel:+33248650715')}>Appeler</Button>
      </div>
    </div>
    <div className="v-photo" data-par="">
      <Paper n={12} color="#fff" innerStyle={{ padding: '6%' }}><img src="assets/photos/vitrine-quintescence.png" alt="Vitrine de la boutique" style={{ display: 'block', width: '100%', aspectRatio: '4/3', objectFit: 'cover' }}></img></Paper>
      <Tape n={3} width={130} rotate={7} style={{ position: 'absolute', top: -16, right: '18%' }}></Tape>
      <div className="v-note"><PaperNote paper="cahier" width={250} rotate={-5} tapeN={6}>À très vite !</PaperNote></div>
    </div>
  </section>;
}

function Footer({ onLegal }) {
  const { SiteFooter } = QDS();
  return <TornBand color="var(--q-bordeaux-profond)" bottom={false} className="layer foot">
    <SiteFooter onNavigate={id => (id === 'legal' ? onLegal() : go(id))}></SiteFooter>
  </TornBand>;
}

Object.assign(window, { Cadeaux, Hero, Manifeste, Showroom, Bienvenue, Univers, Createurs, Vitrine, Garanties, Histoire, Visite, Footer });