/* ==========================================================
   Bandeau d'exemples de sites (deux rangées, sens opposés)
   ========================================================== */

.showcase { padding: 0 var(--gutter) clamp(56px, 8vw, 104px); }
.showcase__frame {
  max-width: calc(var(--wrap) + 120px);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(12px, 1.6vw, 20px) 0;
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
}
.showcase__note { text-align: center; margin-top: 18px; font-size: .9375rem; color: var(--muted); }

.marquee {
  --gap: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; gap: var(--gap); width: max-content; }
.marquee.is-ready .marquee__track { animation: marquee-left 70s linear infinite; }
.marquee--right.is-ready .marquee__track { animation-name: marquee-right; animation-duration: 80s; }

@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes marquee-right { from { transform: translateX(calc(-50% - var(--gap) / 2)); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .marquee.is-ready .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Carte « site » ---------- */
.site {
  --bg: #fff; --ink: #111; --accent: #111; --on-accent: #fff; --soft: rgba(0,0,0,.08);
  flex: none;
  width: clamp(270px, 31vw, 410px);
  aspect-ratio: 16 / 10.4;
  container-type: inline-size;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  font-family: var(--body);
  user-select: none;
}
.site__bar {
  flex: none; display: flex; align-items: center; gap: .9cqw;
  height: 6.4cqw; padding: 0 2.6cqw;
  background: var(--soft);
}
.site__bar i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: currentColor; opacity: .25; }
.site__bar span {
  margin-left: 2cqw; padding: .5cqw 2.4cqw; border-radius: 99px;
  font-size: 2.3cqw; font-weight: 600; line-height: 1.2;
  background: color-mix(in srgb, var(--bg) 70%, #fff); opacity: .9;
}
.site__body { flex: 1; display: flex; flex-direction: column; padding: 3.2cqw 4.6cqw 4.4cqw; min-height: 0; }
.site__nav { display: flex; align-items: center; gap: 3cqw; font-size: 2.4cqw; line-height: 1; }
.site__nav span { opacity: .7; }
.site__logo { font-size: 3.6cqw; margin-right: auto; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.site__nav em {
  font-style: normal; font-weight: 700; padding: 1.2cqw 2.4cqw; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
}
.site__main { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 4cqw; align-items: center; min-height: 0; }
.site__kicker { font-size: 2.4cqw; font-weight: 600; opacity: .7; margin-bottom: 1.6cqw; }
.site__h { font-size: 6.4cqw; line-height: 1.02; letter-spacing: -0.02em; }
.site__cta {
  display: inline-block; margin-top: 3.2cqw;
  font-size: 2.5cqw; font-weight: 700; line-height: 1;
  padding: 1.9cqw 3.2cqw; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
}
.v-badge {
  position: absolute; left: -3cqw; bottom: 3cqw;
  font-size: 2.3cqw; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 1.6cqw 2.4cqw; border-radius: 99px;
  background: #fff; color: #222;
  box-shadow: 0 1.5cqw 3cqw -1.5cqw rgba(0,0,0,.35);
}

/* 1. Coiffeur */
.site--coiffeur { --bg: #F4E3DC; --ink: #4A1525; --accent: #6B1E33; --soft: rgba(74,21,37,.07); }
.site--coiffeur .site__logo, .site--coiffeur .site__h { font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; }
.site--coiffeur .site__h { font-size: 6.8cqw; }
.v-arch {
  position: relative; align-self: end; height: 88%;
  border-radius: 99cqw 99cqw 1.5cqw 1.5cqw;
  background:
    radial-gradient(circle at 50% 38%, #F6C1A8 0 16%, transparent 16.5%),
    linear-gradient(180deg, #C46B7C, #6B1E33 85%);
}

/* 2. Boulangerie */
.site--boulangerie { --bg: #F5EAD6; --ink: #3B2414; --accent: #B8621F; --soft: rgba(59,36,20,.07); }
.site--boulangerie .site__logo, .site--boulangerie .site__h { font-family: "Fraunces", serif; font-weight: 800; }
.site--boulangerie .site__logo { font-size: 3.2cqw; }
.v-loaf { position: relative; height: 100%; display: grid; place-items: center; }
.v-loaf::before {
  content: ""; width: 100%; aspect-ratio: 1.7;
  border-radius: 50% / 46%;
  background:
    repeating-linear-gradient(115deg, transparent 0 17%, rgba(255,226,170,.75) 17% 19.5%, transparent 19.5% 30%),
    radial-gradient(ellipse at 40% 30%, #E7A862, #A85A22 70%, #7A3E14);
  box-shadow: 0 2cqw 3cqw -1.5cqw rgba(59,36,20,.5);
}
.v-stamp {
  position: absolute; right: -1cqw; top: 0;
  width: 13cqw; height: 13cqw; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font: 800 2.1cqw/1.1 "Fraunces", serif;
  background: #3B2414; color: #F5EAD6; transform: rotate(10deg);
}

/* 3. Plombier */
.site--plombier { --bg: #0F2A4A; --ink: #fff; --accent: #FFC83C; --on-accent: #0F2A4A; --soft: rgba(255,255,255,.08); }
.site--plombier .site__logo, .site--plombier .site__h { font-family: "Archivo Black", sans-serif; font-weight: 400; text-transform: uppercase; }
.site--plombier .site__logo { font-size: 3cqw; }
.site--plombier .site__h { font-size: 6cqw; line-height: 1.05; }
.site--plombier .site__cta { font-size: 3.4cqw; font-family: "Archivo Black", sans-serif; font-weight: 400; }
.v-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; }
.v-checks li {
  display: flex; align-items: center; gap: 1.6cqw;
  font-size: 2.6cqw; font-weight: 700; padding: 2cqw 2.4cqw; border-radius: 1.6cqw;
  background: rgba(255,255,255,.08);
}
.v-checks li::before { content: "✓"; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #FFC83C; color: #0F2A4A; font-size: 2.2cqw; }

/* 4. Yoga */
.site--yoga { --bg: #E2EADC; --ink: #2E4A3A; --accent: #2E4A3A; --soft: rgba(46,74,58,.07); }
.site--yoga .site__logo, .site--yoga .site__h { font-family: "DM Serif Display", serif; font-weight: 400; }
.v-rings {
  position: relative; aspect-ratio: 1; width: 100%; max-height: 100%; justify-self: center; border-radius: 50%;
  background: radial-gradient(circle, #F2D7B6 0 22%, #B9CBB0 22.5% 44%, #94B08C 44.5% 66%, #6E8F6A 66.5% 100%);
}

/* 5. Garage */
.site--garage { --bg: #161616; --ink: #fff; --accent: #E5372B; --soft: rgba(255,255,255,.07); }
.site--garage .site__logo, .site--garage .site__h { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.site--garage .site__h { font-size: 8.2cqw; line-height: .98; }
.v-stripes {
  height: 100%; border-radius: 1.6cqw; display: flex; align-items: flex-end; padding: 3cqw;
  background: repeating-linear-gradient(-55deg, #E5372B 0 4cqw, #161616 4cqw 7cqw);
}
.v-stripes span { background: #fff; color: #161616; font: 400 3cqw/1.15 "Anton", sans-serif; text-transform: uppercase; padding: 1.8cqw 2.4cqw; }

/* 6. Restaurant */
.site--resto { --bg: #1E3A2C; --ink: #F3E8D0; --accent: #E9B44C; --on-accent: #1E3A2C; --soft: rgba(243,232,208,.08); }
.site--resto .site__logo, .site--resto .site__h { font-family: "Fraunces", serif; font-style: italic; font-weight: 600; }
.v-plate {
  position: relative; aspect-ratio: 1; width: 92%; justify-self: center; border-radius: 50%;
  background:
    radial-gradient(circle at 42% 44%, #E9B44C 0 9%, transparent 9.5%),
    radial-gradient(circle at 58% 56%, #C2502E 0 11%, transparent 11.5%),
    radial-gradient(circle at 56% 38%, #6E9B4F 0 8%, transparent 8.5%),
    radial-gradient(circle at 40% 60%, #8DB86B 0 7%, transparent 7.5%),
    radial-gradient(circle, #FBF6EC 0 46%, #E8DDC6 46.5% 50%, #FBF6EC 50.5% 70%, #D9CCB0 70.5%);
  box-shadow: 0 2cqw 4cqw -1cqw rgba(0,0,0,.45);
}

/* 7. Fleuriste */
.site--fleurs { --bg: #FFE6D8; --ink: #7A2E1F; --accent: #E8613F; --soft: rgba(122,46,31,.07); }
.site--fleurs .site__logo { font-family: "Caveat", cursive; font-size: 5.2cqw; font-weight: 700; }
.site--fleurs .site__h { font-family: "DM Serif Display", serif; font-weight: 400; }
.v-flowers { position: relative; height: 100%; }
.v-flowers i {
  position: absolute; width: 7cqw; height: 7cqw; border-radius: 50%; background: #F7C948;
  box-shadow:
    0 -6.5cqw 0 1.2cqw var(--p), 6.2cqw -2cqw 0 1.2cqw var(--p), 3.8cqw 5.3cqw 0 1.2cqw var(--p),
    -3.8cqw 5.3cqw 0 1.2cqw var(--p), -6.2cqw -2cqw 0 1.2cqw var(--p);
}
.v-flowers i:nth-child(1) { --p: #F59BB0; left: 28%; top: 30%; }
.v-flowers i:nth-child(2) { --p: #E8613F; left: 68%; top: 18%; transform: scale(.7) rotate(20deg); }
.v-flowers i:nth-child(3) { --p: #C9A0E8; left: 64%; top: 66%; transform: scale(.6) rotate(-15deg); }

/* 8. Coach */
.site--coach { --bg: #F0F0EA; --ink: #141414; --accent: #FF5A1F; --soft: rgba(0,0,0,.06); }
.site--coach .site__logo, .site--coach .site__h { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.site--coach .site__h { font-size: 7.6cqw; line-height: 1; }
.v-bars { position: relative; height: 82%; display: flex; align-items: flex-end; gap: 1.6cqw; padding-top: 6cqw; }
.v-bars i { flex: 1; border-radius: 1cqw 1cqw 0 0; background: #FF5A1F; }
.v-bars i:nth-child(1) { height: 28%; opacity: .35; }
.v-bars i:nth-child(2) { height: 42%; opacity: .5; }
.v-bars i:nth-child(3) { height: 58%; opacity: .7; }
.v-bars i:nth-child(4) { height: 76%; opacity: .85; }
.v-bars i:nth-child(5) { height: 100%; }
.v-bars span { position: absolute; top: 0; left: 0; font: 400 3.4cqw/1 "Anton", sans-serif; text-transform: uppercase; }

/* 9. Avocate */
.site--avocat { --bg: #F7F4EE; --ink: #1C2B4A; --accent: #1C2B4A; --soft: rgba(28,43,74,.06); }
.site--avocat .site__logo, .site--avocat .site__h { font-family: "Cormorant Garamond", serif; font-weight: 700; }
.site--avocat .site__h { font-size: 7cqw; line-height: .98; }
.v-column {
  height: 92%; width: 70%; justify-self: center; display: grid; place-items: center;
  background: #1C2B4A; border-radius: 1cqw;
  box-shadow: inset 0 0 0 1.4cqw #1C2B4A, inset 0 0 0 1.7cqw #B08D57;
}
.v-column span { font: 700 14cqw/1 "Cormorant Garamond", serif; color: #B08D57; }

/* 10. Photographe */
.site--photo { --bg: #FFFFFF; --ink: #121212; --accent: #121212; --soft: rgba(0,0,0,.05); }
.site--photo .site__logo, .site--photo .site__h { font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.site--photo .site__h { font-size: 5.8cqw; letter-spacing: -0.03em; }
.v-gallery { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.3fr 1fr; gap: 1.4cqw; }
.v-gallery i { border-radius: 1cqw; }
.v-gallery i:nth-child(1) { grid-row: span 2; background: linear-gradient(170deg, #F7B267, #F25F5C 55%, #5C374C); }
.v-gallery i:nth-child(2) { background: linear-gradient(160deg, #A9C6D8, #4F7CAC); }
.v-gallery i:nth-child(3) { background: linear-gradient(160deg, #D8C3A5, #8E7C68); }
.v-gallery i:nth-child(4) { display: none; }