/* ==========================================================
   Page Démo : le site fictif « Atelier Aurore » + étiquettes
   Le site a son propre thème (variables redéfinies sur .fakesite),
   indépendant de celui de Webcabulaire.
   ========================================================== */
.demo-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.lbl-switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; cursor: pointer; position: relative; }
.lbl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lbl-switch .lt { width: 48px; height: 28px; border-radius: 99px; background: var(--line); padding: 3px; transition: background .2s; flex: none; }
.lbl-switch .lth { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.lbl-switch input:checked + .lt { background: var(--brand); } .lbl-switch input:checked + .lt .lth { transform: translateX(20px); }
.lbl-switch input:focus-visible + .lt { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ----- Thème du site fictif ----- */
.fakesite {
  --bg: #fffaf4; --bg-2: #f6ece1; --surface: #ffffff; --ink: #2a1a12; --muted: #7a6a5f; --line: #eaddcf;
  --brand: #c2511f; --brand-2: #d9703a; --brand-soft: #fbe5d8; --on-brand: #ffffff;
  --html-soft: #ffe9e1; --css-soft: #e3eeff; --js-soft: #fff3cc;
  --shadow-sm: 0 1px 2px rgba(60,30,10,.08), 0 2px 8px rgba(60,30,10,.06); --shadow: 0 10px 30px rgba(60,30,10,.14);
  --hero-bg: linear-gradient(135deg, #fde8d6, #f4bf93);
  color-scheme: light;
}
.fakesite[data-theme="dark"] {
  --bg: #19120e; --bg-2: #231a14; --surface: #2a2019; --ink: #f6ece1; --muted: #b5a698; --line: #3d2f25;
  --brand: #ff9a63; --brand-2: #ffb083; --brand-soft: #3b2418; --on-brand: #1a0e07;
  --html-soft: #3a2218; --css-soft: #17263f; --js-soft: #3a2f0c;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 10px 30px rgba(0,0,0,.5);
  --hero-bg: linear-gradient(135deg, #34201a, #1d120c);
  color-scheme: dark;
}
.fakesite { position: relative; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); font-size: 16px; line-height: 1.6; overflow: clip; transition: background .3s, color .3s; }
.fakesite * { box-sizing: border-box; }
.fakesite h1, .fakesite h2, .fakesite h4 { letter-spacing: -.02em; }
.chrome { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .chrome i:nth-child(2) { background: #febc2e; } .chrome i:nth-child(3) { background: #28c840; }
.chrome .url { margin-left: 14px; flex: 1; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 3px 14px; font-size: .8rem; color: var(--muted); }
.chrome small { opacity: .7; }

.slot-inline { display: inline-block; vertical-align: middle; }
.slot-block { display: block; }
.fs-promo { margin: 0; border-radius: 0; border-left: 0; justify-content: center; align-items: center; }
.fs-promo p { flex: 0 1 auto; }
.fakesite .dm-marquee { border-radius: 0; }
.fs-header { position: sticky; top: var(--header-h); z-index: 40; border-radius: 0; border-width: 0 0 1px; gap: 20px; padding: 10px 24px; flex-wrap: wrap; }
.fs-header .dm-navbar { border: 0; background: transparent; padding: 0; }
.fs-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fs-crumb { padding: 12px 24px; background: var(--bg); } .fs-crumb .dm-breadcrumb { border: 0; padding: 0; background: transparent; }
.fs-theme { width: 42px; height: 42px; }
.fs-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; padding: clamp(32px, 6vw, 72px) clamp(18px, 4vw, 48px); background: var(--hero-bg); }
.fs-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.04; margin: 12px 0 14px; min-height: 2.1em; }
.tw { color: var(--brand); }
.tw-wrap .dm-caret { height: .9em; }
.fs-hero p { font-size: 1.1rem; color: var(--muted); max-width: 44ch; }
.fs-search { margin-top: 22px; max-width: 440px; }
.fs-band { padding: 26px clamp(18px, 4vw, 48px); background: var(--surface); border-block: 1px solid var(--line); }
.fs-section { padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 48px); background: var(--bg); }
.fs-section.alt { background: var(--bg-2); }
.fs-section > h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 26px; }
.fs-section .two > div > h2 { font-size: 1.5rem; margin: 0 0 18px; }
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.shop-side { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 16px; }
.shop-side h4 { margin: 0; } .side-note b { display: block; font-size: .85rem; margin-bottom: 6px; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.shop-grid .dm-card { width: auto; }
.shop-foot { margin: 22px 0; } .loading-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
.p-media .mt, .mt { margin-top: 22px; } .p-media h4 { margin-bottom: 10px; }
.price b { font-size: 1.9rem; letter-spacing: -.03em; }
.p-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.three { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 28px; align-items: center; }
.team-col { display: grid; gap: 12px; } .team-col.center { justify-items: center; }
.tl-pad { padding: 6px 0 0 6px; }
.stepper-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.cta-slot .dm-cta { border-radius: 22px; }
.phones { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.phone { width: 270px; border: 10px solid #1b1a22; border-radius: 38px; background: #1b1a22; box-shadow: var(--shadow); }
.phone-screen { height: 420px; overflow: hidden; background: var(--surface); border-radius: 26px; position: relative; }
.phone-screen .dm-burger-wrap { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.fs-footer { border-radius: 0; }

/* Fenêtres : plein écran comme sur un vrai site (et non dans un cadre) */
.fakesite .dm-modal-ov, .fakesite .dm-drawer-ov, .fakesite .dm-lb { position: fixed; z-index: 95; }
.fakesite .dm-drawer { position: fixed; z-index: 96; }
.fakesite .dm-toasts { position: fixed; z-index: 97; right: 22px; bottom: 22px; }
.fakesite .dm-fab-zone { position: absolute; }

/* ----- Étiquettes « Je suis… » : pastille + pointe qui désigne l'élément ----- */
.nm { display: none; position: absolute; top: 0; left: 0; z-index: 30; background: var(--cc, #5b3df5); color: #fff;
  font: 700 .74rem/1 var(--font); letter-spacing: 0; text-transform: none; font-style: normal; text-decoration: none; white-space: nowrap; text-shadow: none; text-align: left;
  padding: 7px 12px; border-radius: 99px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); pointer-events: auto; transition: filter .15s; }
.nm:hover { filter: brightness(1.15); }
.nm.trig { background: var(--ink); color: var(--bg); }
.nm::before { content: ""; position: absolute; left: var(--tx, 16px); width: 0; height: 0; margin-left: -7px; display: none; border: 7px solid transparent; }
.nm.tail-down::before { display: block; top: 100%; border-top-color: var(--cc, #5b3df5); border-bottom-width: 0; }
.nm.tail-up::before { display: block; bottom: 100%; border-bottom-color: var(--cc, #5b3df5); border-top-width: 0; }
.nm.trig.tail-down::before { border-top-color: var(--ink); } .nm.trig.tail-up::before { border-bottom-color: var(--ink); }
.labels-on .nm { display: inline-block; }
.labels-on [data-c] { outline: 1.5px dashed color-mix(in srgb, var(--cc, var(--ink)) 60%, transparent); outline-offset: -1px; }
.labels-on .dm-tip[data-c] { outline-offset: 2px; }

@media (max-width: 960px) {
  .fs-hero, .shop, .product, .two, .three { grid-template-columns: 1fr; }
  .loading-row { grid-template-columns: 1fr; }
  .fs-header { position: static; }
  .fs-actions { margin-left: 0; }
}

.fakesite [hidden] { display: none !important; }

.fs-hero .dm-glass p { color: #fff; font-size: .95rem; margin: 0 0 12px; }
.fs-hero .dm-glass h5 { color: #fff; }
.fs-crumb { padding-top: 30px; }

.shop-side .dm-grid2 { grid-template-columns: 1fr; }
.shop-side .dm-range-demo, .shop-side .dm-fieldset { padding: 12px; box-shadow: none; }

/* Interrupteur des étiquettes : toujours visible, flottant en bas à gauche */
.lbl-switch { position: fixed; left: 20px; bottom: 20px; z-index: 99; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 10px 18px 10px 12px; box-shadow: var(--shadow); font-size: .92rem; }
.lbl-switch:hover { border-color: var(--brand); }
@media (max-width: 520px) { .lbl-switch { left: 12px; bottom: 12px; padding: 8px 14px 8px 10px; font-size: .85rem; } }

/* Apparition au scroll : franche et bien visible (glissement + fondu + léger zoom) */
.fakesite .reveal { opacity: 0; transform: translateY(70px) scale(.94); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.fakesite .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fakesite .reveal { opacity: 1; transform: none; } }