/* ==========================================================================
   Site web sur mesure
   ========================================================================== */
@keyframes smFade { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
[data-fade] { animation: smFade 1.2s var(--ease) both; }
[data-fade="2"] { animation-delay: .18s; }
[data-fade="3"] { animation-delay: .34s; }

.svc-hero__title--sm { margin: clamp(24px, 2.6vw, 40px) 0 0; font-size: clamp(42px, 9.4vw, 150px); line-height: .92; letter-spacing: -.04em; }
.svc-hero__row--sm { margin-top: clamp(40px, 4.4vw, 64px); }

/* --------------------------------------------------------------------------
   Démonstration interactive
   -------------------------------------------------------------------------- */
.demo {
  position: relative; overflow: hidden; background: var(--paper); color: var(--ink-text);
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  padding: clamp(120px, 15vw, 220px) var(--gutter);
}
.demo__fade { position: absolute; left: 0; right: 0; top: 0; height: clamp(80px, 10vw, 150px); background: linear-gradient(180deg, rgba(16, 16, 18, .05), transparent); pointer-events: none; }
.demo__halo { position: absolute; left: -12%; top: -6%; width: 52%; height: 70%; background: radial-gradient(circle, rgba(224, 194, 0, .16), transparent 62%); filter: blur(30px); pointer-events: none; }
.demo .glow-follow { background: radial-gradient(circle, rgba(224, 194, 0, .13), transparent 62%); }
.demo__grid {
  position: relative; max-width: 1520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 4vw, 70px); align-items: center;
}
.demo__copy { min-width: 0; }
.demo__eyebrow { display: block; color: rgba(16, 16, 18, .45); }
.demo__title {
  margin: clamp(26px, 3.2vw, 44px) 0 0; max-width: 18ch;
  font-family: var(--f-display); font-variation-settings: 'wdth' 98, 'wght' 700;
  font-size: clamp(28px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -.03em;
}
.demo__text { margin: 22px 0 0; max-width: 46ch; font: 400 clamp(13.5px, 1.1vw, 15.5px)/1.8 var(--f-body); color: rgba(16, 16, 18, .62); }
.demo__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.demo__tags li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(16, 16, 18, .16); font: 500 11.5px/1 var(--f-body); color: rgba(16, 16, 18, .66); }
.demo__actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.demo__reset {
  padding: 0; border: 0; background: none;
  font: 600 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(16, 16, 18, .45);
  cursor: pointer; transition: color .3s;
}
.demo__reset:hover { color: #a88f00; }

.demo__play { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); }
.demo__hint { margin: 0; display: flex; align-items: center; gap: 10px; }
.demo__hint::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--yellow-deep); }
.demo__hint strong { flex: none; white-space: nowrap; font: 600 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-text); }
.demo__hint span { font: 400 12px/1 var(--f-body); color: rgba(16, 16, 18, .5); }
/* Sur grand écran, l'invitation à jouer est agrandie pour être bien repérée */
@media (min-width: 1000px) {
  .demo__hint { gap: 14px; }
  .demo__hint::before { width: 11px; height: 11px; }
  .demo__hint strong { font-size: clamp(14px, 1.15vw, 18px); }
  .demo__hint span { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.3; color: rgba(16, 16, 18, .6); }
}

.strip-wrap { position: relative; }
.strip { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 44px 4px 4px; }
.strip::-webkit-scrollbar { display: none; }
.bubble {
  flex: 0 0 auto; box-sizing: content-box; width: 132px; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 8px;
  border-radius: 22px; cursor: pointer; background: #fff; border: 1px solid rgba(16, 16, 18, .12);
  font: inherit; color: inherit; text-align: center;
  transition: border-color .3s, background .3s, transform .3s;
}
.bubble[aria-pressed="true"] { background: rgba(255, 238, 51, .22); border-color: var(--yellow-deep); transform: translateY(-3px); }
.bubble__tile { height: 82px; border-radius: 15px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bubble__glyph { letter-spacing: -.02em; }
.bubble__label { text-align: center; font: 600 9.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(16, 16, 18, .55); }
.bubble[aria-pressed="true"] .bubble__label { color: #8f7800; }
.strip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; box-sizing: content-box; width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0;
  border-radius: 999px; background: var(--yellow); color: var(--ink); border: 2px solid var(--paper);
  font: 700 15px/1 var(--f-body); cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 16, 18, .28), 0 0 0 6px rgba(247, 246, 242, .9);
  transition: transform .25s, box-shadow .25s;
}
.strip-arrow--prev { left: -14px; }
.strip-arrow--next { right: -14px; }
.strip-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 26px rgba(16, 16, 18, .35), 0 0 0 6px rgba(247, 246, 242, .95); }

.browser { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid rgba(16, 16, 18, .12); box-shadow: 0 30px 80px rgba(16, 16, 18, .18); }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #141419; border-bottom: 1px solid rgba(244, 244, 242, .08); }
.browser__bar i { width: 9px; height: 9px; border-radius: 999px; }
.browser__url { margin-left: 14px; padding: 5px 14px; border-radius: 999px; background: rgba(244, 244, 242, .06); font: 400 10.5px/1 var(--f-mono); color: rgba(16, 16, 18, .4); }
.mock { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 31vw, 430px); overflow: hidden; }
.mock__nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 30px); }
.mock [hidden] { display: none !important; }
.mock.is-static, .mock.is-static * { transition: none !important; }
.mock__menu-line { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.mock__body { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; padding: 0 clamp(16px, 2.4vw, 30px) clamp(18px, 2.6vw, 34px); max-width: 74%; }
.mock__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(12px, 1.6vw, 18px); }
.demo__count { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; font: 600 9.5px/1.6 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(16, 16, 18, .4); }
.demo__count span { margin-left: auto; }

@media (hover: none) { .strip-arrow:hover { transform: translateY(-50%); } }
@media (max-width: 520px) {
  .mock__body { max-width: 100%; }
  .mock__nav { flex-wrap: wrap; row-gap: 10px; }
  .strip-arrow--prev { left: -8px; }
  .strip-arrow--next { right: -8px; }
}