/* ═══════════════════════════════════════════════════════════
   VIZARNE — page Services (refonte)
   Mouvement : courbes fortes, transform / opacity / clip-path seulement,
   survols réservés aux souris, appui à 0.97 sur tout ce qui se clique.
   ═══════════════════════════════════════════════════════════ */
.sv { --out: cubic-bezier(.23, 1, .32, 1); --io: cubic-bezier(.77, 0, .175, 1); }
[data-c="electric"] { --c: #3d5afe; } [data-c="coral"] { --c: #ff3d5a; }
[data-c="ice"] { --c: #cbe1f8; } [data-c="white"] { --c: #ffffff; }

/* ── 1 · en-tête ── */
.sv-hero { padding-top: clamp(130px, 16vw, 190px); }
.sv-hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: end; }
.sv-hero-top .p-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.sv-h1 { font-family: var(--display); font-weight: 750; font-stretch: 75%; font-size: clamp(56px, 10vw, 168px); line-height: .88; letter-spacing: -.035em; }
.sv-h1 .it { font-weight: 400; letter-spacing: -.02em; }
.sv-h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.sv-h1 .line > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--out); }
.sv-h1 .line:nth-child(2) > span { transition-delay: 70ms; }
.is-in .sv-h1 .line > span { transform: none; }
.sv-lead { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 34ch; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .8s var(--out); transition-delay: .25s; }
.is-in .sv-lead { opacity: 1; transform: none; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sv-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .6s var(--out), border-color .2s ease, background-color .2s ease, color .2s ease;
}
.sv-chip span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--c); transition: color .2s ease; }
.is-in .sv-chip { opacity: 1; transform: none; }
.is-in .sv-chip:nth-child(1) { transition-delay: .32s, .32s, 0s, 0s, 0s; }
.is-in .sv-chip:nth-child(2) { transition-delay: .37s, .37s, 0s, 0s, 0s; }
.is-in .sv-chip:nth-child(3) { transition-delay: .42s, .42s, 0s, 0s, 0s; }
.is-in .sv-chip:nth-child(4) { transition-delay: .47s, .47s, 0s, 0s, 0s; }
.sv-chip:active { transform: scale(.97); transition-duration: .5s, .12s, .2s, .2s, .2s; }
@media (hover: hover) and (pointer: fine) {
  .sv-chip:hover { background: var(--c); border-color: var(--c); color: #081320; }
  .sv-chip:hover span { color: #081320; }
}

/* grande image : se dévoile depuis le bas au chargement, puis s'élargit au scroll */
.sv-hero-media { margin-top: clamp(40px, 6vw, 72px); padding: 0 var(--gutter); }
.sv-hero-media figure {
  --k: 0;
  height: clamp(320px, 62vh, 680px); border-radius: calc(24px * (1 - var(--k))); overflow: hidden;
  /* les côtés sont rognés par clip-path (pas de scaleX : l'image ne se déforme pas) */
  clip-path: inset(100% 5% 0 5% round 24px);
  transition: clip-path 1.2s var(--io) .2s;
}
.is-in .sv-hero-media figure { clip-path: inset(0 5% 0 5% round 24px); }
.sv-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - .18 * var(--k))); }

/* ── 2 · les 4 services ── */
.sx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); padding: clamp(100px, 12vw, 180px) var(--gutter) 0; max-width: 1440px; margin: 0 auto; }
.sx-media { position: relative; }
.sx-frame { position: sticky; top: 104px; height: calc(100vh - 140px); border-radius: 22px; overflow: hidden; background: var(--deep); }
.sx-shot { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--io); }
.sx-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.4s var(--out); }
.sx-shot.on { clip-path: inset(0 0 0 0); z-index: 1; }
.sx-shot.on img { transform: scale(1); }
.sx-shot.past { clip-path: inset(0 0 0 0); z-index: 0; }
.sx-count {
  position: absolute; left: 20px; bottom: 22px; z-index: 3; color: #fff; font-size: 12px;
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(8, 19, 32, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sx-num { display: inline-block; overflow: hidden; height: 1.4em; }
.sx-num span { display: inline-block; transition: transform .45s var(--out), opacity .3s ease; }
.sx-num span.swap { transform: translateY(-100%); opacity: 0; transition: none; }
.sx-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .12); }
.sx-bar i { display: block; height: 100%; width: 100%; background: var(--sx-c, #3d5afe); transform-origin: left; transform: scaleX(0); transition: background-color .3s ease; }

.sx-item { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; }
.sx-item:last-child { min-height: 80vh; }
.sx-mobile-shot { display: none; }
.sx-kicker { color: var(--muted); display: flex; gap: 10px; align-items: center; }
.sx-kicker span { color: var(--c); }
.sx-title { font-family: var(--display); font-weight: 700; font-stretch: 78%; font-size: clamp(46px, 6.2vw, 104px); line-height: .9; letter-spacing: -.035em; margin: 18px 0 22px; }
.sx-title .it { font-weight: 400; color: var(--c); }
.sx-text { color: var(--muted); font-size: clamp(17px, 1.35vw, 20px); max-width: 38ch; }
.sx-list { list-style: none; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.sx-list li { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); }
.sx-link { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--c); transition: gap .25s var(--out), transform .12s ease-out; }
.sx-link:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .sx-link:hover { gap: 16px; } }
/* le texte de l'article actif est plein, les autres en retrait */
.sx-item > *:not(.sx-mobile-shot) { opacity: .28; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--out); }
.sx-item.on > * { opacity: 1; transform: none; }
.sx-item.on > :nth-child(3) { transition-delay: 40ms; }
.sx-item.on > :nth-child(4) { transition-delay: 80ms; }
.sx-item.on > :nth-child(5) { transition-delay: 120ms; }
.sx-item.on > :nth-child(6) { transition-delay: 160ms; }

/* ── 3 · inclus : défilement horizontal ── */
.hz { position: relative; height: 320vh; background: var(--ice); color: var(--night); margin-top: clamp(100px, 12vw, 180px); --muted: #3c4f69; }
.hz .p-kicker { color: #3c4f69; }
.hz-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vh, 48px); padding-top: 72px; }
.hz-head .h2 { color: var(--night); }
.hz-track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.hz-card { width: clamp(280px, 30vw, 420px); flex: none; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(8, 19, 32, .5); }
.hz-card figure { height: clamp(200px, 30vh, 300px); overflow: hidden; }
.hz-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--out); }
@media (hover: hover) and (pointer: fine) { .hz-card:hover img { transform: scale(1.04); } }
.hz-body { padding: 22px 24px 26px; }
.hz-body svg { width: 26px; height: 26px; fill: none; stroke: #ff3d5a; stroke-width: 1.6; }
.hz-body h3 { font-family: var(--display); font-weight: 700; font-stretch: 82%; font-size: 28px; letter-spacing: -.03em; margin: 10px 0 6px; }
.hz-body p { color: #3c4f69; font-size: 15px; }
.hz-progress span { display: block; height: 2px; background: rgba(8, 19, 32, .12); border-radius: 2px; overflow: hidden; max-width: 320px; }
.hz-progress i { display: block; height: 100%; background: #ff3d5a; transform-origin: left; transform: scaleX(0); }

/* ── 4 · appel à l'action : la photo s'ouvre depuis le centre ── */
.cx { position: relative; height: 220vh; }
.cx-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.cx-media { position: absolute; inset: 0; margin: 0; clip-path: inset(var(--ci, 28%) var(--cs, 30%) round 28px); }
.cx-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - .25 * var(--k, 0))); }
.cx-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 19, 32, .25), rgba(8, 19, 32, .78)); opacity: var(--k, 0); }
.cx-copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); color: #fff; opacity: var(--t, 0); transform: translateY(calc(24px * (1 - var(--t, 0)))); }
.cx-copy .h2 { max-width: 14ch; margin: 0 auto; }
.cx-copy p { margin: 18px auto 26px; color: rgba(255, 255, 255, .85); font-size: 19px; }
.cx-copy .btn { transition: background-color .2s ease, color .2s ease, transform .12s ease-out; }
.cx-copy .btn:active, .sv .btn:active { transform: scale(.97); }

/* ── mobile ── */
@media (max-width: 860px) {
  .sv-hero-top { grid-template-columns: 1fr; gap: 20px; }
  .sx { grid-template-columns: 1fr; padding-top: 80px; }
  .sx-media { display: none; }
  .sx-item, .sx-item:last-child { min-height: 0; padding: 0 0 72px; }
  .sx-item > *:not(.sx-mobile-shot) { opacity: 1; transform: none; }
  .sx-mobile-shot { display: block; margin: 0 0 22px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; clip-path: inset(100% 0 0 0 round 18px); transition: clip-path .9s var(--io); }
  .sx-mobile-shot.in { clip-path: inset(0 0 0 0 round 18px); }
  .sx-mobile-shot img { width: 100%; height: 100%; object-fit: cover; }
  .hz { height: auto; }
  .hz-sticky { position: static; height: auto; padding: 80px 0; }
  .hz-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .hz-card { width: 78vw; scroll-snap-align: center; }
  .hz-progress { display: none; }
  .cx { height: 160vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-h1 .line > span, .sv-lead, .sv-chip { transform: none !important; opacity: 1 !important; transition: none !important; }
  .sv-hero-media figure, .sx-shot, .sx-mobile-shot { transition: none !important; }
  .sx-item > * { opacity: 1 !important; transform: none !important; }
  .hz { height: auto; } .hz-sticky { position: static; height: auto; padding: 80px 0; } .hz-track { width: auto; overflow-x: auto; }
  .cx { height: auto; } .cx-sticky { position: relative; height: 100vh; }
  .cx-media { clip-path: none; } .cx-media::after { opacity: 1; } .cx-copy { opacity: 1; transform: none; }
}

/* ── deux options côte à côte : création ou refonte ── */
.sx-duo .sx-title { margin-bottom: 26px; }
.sx-options { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sx-opt {
  padding: 24px 22px 22px; border-radius: 20px; background: rgba(27, 38, 59, .55);
  border: 1px solid var(--line); border-top: 3px solid var(--c);
  transition: border-color .2s ease, transform .25s var(--out);
}
@media (hover: hover) and (pointer: fine) { .sx-opt:hover { border-color: var(--c); transform: translateY(-3px); } }
.sx-opt-tag { color: var(--c); font-size: 10px; margin-bottom: 12px; }
.sx-opt h3 { font-family: var(--display); font-weight: 700; font-stretch: 80%; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: -.03em; margin-bottom: 12px; }
.sx-opt h3 .it { font-weight: 400; color: var(--c); }
.sx-opt p:not(.sx-opt-tag) { color: var(--muted); font-size: 15px; }
.sx-opt .sx-list { margin-top: 16px; gap: 6px; }
.sx-opt .sx-list li { font-size: 12px; padding: 6px 11px; }
.sx-or {
  align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #ff3d5a; color: #fff; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 20px;
}
.sx-alert { margin-top: 16px; padding: 14px 16px; border-radius: 14px; border-left: 3px solid #ff3d5a; background: rgba(255, 61, 90, .08); }
.sx-alert b { color: #fff; font-weight: 600; }
.sx-item.on > .sx-options { transition-delay: 80ms; }
@media (max-width: 1100px) and (min-width: 861px) {
  .sx-options { grid-template-columns: 1fr; }
  .sx-or { justify-self: center; margin: -4px 0; }
}
@media (max-width: 860px) {
  .sx-options { grid-template-columns: 1fr; }
  .sx-or { justify-self: center; margin: -4px 0; }
}
.sx-note { margin-top: 10px; font-size: 15px; color: #cbe1f8; }
.sx-opt .sx-opt-note { margin-top: 14px; font-size: 13px; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--c); }

/* iPhone / Android : hauteur stable, qui ne saute pas quand la barre d'adresse apparaît ou disparaît */
@supports (height: 100svh) {
  .sx-frame { height: calc(100svh - 140px); }
  .hz-sticky, .cx-sticky { height: 100svh; }
}