/* ==========================================================================
   screen97 - Motion system
   Principes (Emil Kowalski) :
   - courbes ease-out fortes (jamais ease / ease-in sur l'UI)
   - UI < 300 ms, révélations 500-700 ms
   - on n'anime que transform / opacity (GPU), jamais width / height / top
   - rien ne naît de scale(0) : départ à 0.95 + opacity
   - :active = scale(0.97) pour un retour tactile immédiat
   - hover réservé aux pointeurs précis, stagger de 60-80 ms
   - prefers-reduced-motion respecté partout
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none; will-change: transform;
}

/* ---------- En-tête : ombre douce au scroll ---------- */
.site-header { transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.site-header.is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(15, 36, 48, 0.35);
}
:root[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8); }

/* ---------- Navigation : pastille qui glisse ---------- */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; transition: color 0.2s var(--ease-out); }
.nav a.is-active { color: var(--ink); }
.nav-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  background: var(--bg-soft); border-radius: 999px;
  opacity: 0; pointer-events: none; will-change: transform;
  transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out),
              height 0.35s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-pill.no-anim { transition: opacity 0.2s var(--ease-out); }
.nav.has-pill a:hover { background: transparent; }

/* ---------- Boutons : retour tactile ---------- */
.btn, .theme-toggle, .lang-switch {
  transition-property: background-color, color, border-color, transform, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-out);
}
.btn:active, .theme-toggle:active, .lang-switch:active { transform: scale(0.97); transition-duration: 0.1s; }
.btn-primary:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(6, 122, 86, 0.6); }
  .btn-primary:hover:active { transform: translateY(0) scale(0.97); }
  .lang-switch:hover .flag { transform: scale(1.12); }
}
.flag { transition: transform 0.3s var(--ease-out); }

/* ---------- Bascule thème : icônes qui pivotent ---------- */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle svg {
  position: absolute; inset: 0; margin: auto;
  transition: transform 0.5s var(--ease-out), opacity 0.25s var(--ease-out);
}
.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; opacity: 1; transform: none; }
.theme-toggle .icon-moon,
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; opacity: 0; }
.theme-toggle .icon-moon { transform: rotate(-80deg) scale(0.5); }
:root[data-theme="dark"] .theme-toggle .icon-sun { transform: rotate(80deg) scale(0.5); }

/* Transition de thème : cercle qui s'étend depuis le bouton */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---------- Héro ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Titre : mots qui montent un à un (découpés par motion.js) */
  .split-ready .w {
    display: inline-block;
    animation: wordIn 0.75s var(--ease-out) both;
    animation-delay: calc(var(--i) * 55ms + 80ms);
  }
  @keyframes wordIn {
    from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  .hero .lead    { animation: fadeUp 0.8s 0.45s var(--ease-out) both; }
  .hero .actions { animation: fadeUp 0.8s 0.6s var(--ease-out) both; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  /* Collage : même entrée, courbe plus nette + parallaxe souris via la propriété `translate` */
  .hero .collage .main   { animation: rise 1s var(--ease-out) both; translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px); }
  .hero .collage .side   { animation: rise 1s 0.15s var(--ease-out) both; translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 14px); }
  .hero .collage .window { animation: rise 1s 0.3s var(--ease-out) both; translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -14px); }
  .hero .collage .sun    { translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 20px); animation: breathe 6s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

  /* Fenêtre "site en ligne" : barres qui se dessinent, point qui pulse */
  .window .bar { transform-origin: 0 50%; animation: draw 0.9s var(--ease-out) both; }
  .window .bar.w85 { animation-delay: 0.95s; }
  .window .bar.w60 { animation-delay: 1.1s; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .window .live { animation: fadeUp 0.6s 1.3s var(--ease-out) both; }
  .window .live::before { animation: pulse 2s 1.8s ease-out infinite; }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 10px transparent; }
  }
}

/* ---------- Images différées : fondu net ---------- */
@media (prefers-reduced-motion: no-preference) {
  img.img-fade { opacity: 0; transition: opacity 0.6s var(--ease-out); }
  img.img-fade.loaded { opacity: 1; }
}

/* ---------- Cartes : survols précis ---------- */
.service, .promise .photo, .strip .photo { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out); }
.service .photo img, .promise .photo img, .strip .photo img, .work .photo img, .method .photo img {
  transition: transform 0.7s var(--ease-out);
}
.work .url::after {
  content: "\2192"; display: inline-block; margin-left: 6px;
  transition: transform 0.3s var(--ease-out);
}
.work:active .photo { transform: scale(0.985); }
.work .photo { transition: transform 0.2s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .service:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  .service:hover .photo img,
  .promise:hover .photo img,
  .strip .photo:hover img { transform: scale(1.06); }
  .work:hover .photo img { transform: scale(1.05); }
  .work:hover .url::after { transform: translateX(5px); }
  .strip .photo:hover { transform: translateY(-3px); }
  .site-footer a { transition: color 0.2s var(--ease-out); }
}
.work .photo img { transition: transform 0.7s var(--ease-out); }

/* ---------- Carte "Votre projet" : la place encore libre, révélée en spot ---------- */
.work-slot .photo {
  --mx: 50%; --my: 42%;
}
.work-slot .photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background-image: url("../../images/photo-votre-projet.jpg");
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.15) brightness(0.96) sepia(0.18) hue-rotate(108deg) saturate(1.6);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, black 100%);
          mask-image: radial-gradient(circle, transparent 38%, black 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 130px 130px; mask-size: 130px 130px;
  -webkit-mask-position: calc(var(--mx) - 65px) calc(var(--my) - 65px);
          mask-position: calc(var(--mx) - 65px) calc(var(--my) - 65px);
  pointer-events: none;
}
.work-slot .photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-bright) 45%, transparent);
  pointer-events: none;
}
.work-slot .badge-slot {
  position: absolute; z-index: 3; left: auto; right: 14px; bottom: 14px; top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: var(--accent); border: 1px solid var(--accent);
  font-size: 0.82rem; font-weight: bold; padding: 5px 12px 5px 10px; border-radius: 999px;
  box-shadow: var(--shadow);
}
.work-slot .badge-slot i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); flex: none; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .work-slot .photo::after { animation: slotGlow 2.6s ease-in-out infinite; }
  @keyframes slotGlow {
    0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-bright) 35%, transparent), 0 0 0 0 transparent; }
    50%      { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-bright) 80%, transparent), 0 0 30px -4px color-mix(in srgb, var(--accent-bright) 60%, transparent); }
  }
  .work-slot .badge-slot i { animation: slotPulse 2s ease-out infinite; }
  @keyframes slotPulse {
    0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 9px transparent; }
  }
}

/* ---------- Mouvement réduit : on garde les fondus, on retire les déplacements ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .nav-pill, .site-header { transition: none; }
  .scrub .sw { opacity: 1 !important; }
  .theme-toggle svg { transition: opacity 0.2s linear; }
  .btn:active, .theme-toggle:active, .lang-switch:active { transform: none; }
  .service:hover, .strip .photo:hover, .btn-primary:hover { transform: none; }
}


/* ==========================================================================
   Narration au scroll (inspirée des pages produit Apple)
   Les valeurs --hp, --pv, --is, --g, --e sont écrites par motion.js à chaque frame.
   On passe par les propriétés individuelles translate / scale / rotate :
   elles se composent avec les animations `transform` existantes sans les écraser.
   ========================================================================== */

/* Héro : le texte s'efface, le collage s'élargit quand on quitte l'écran d'accueil */
.hero-copy { translate: 0 calc(var(--hp, 0) * -48px); opacity: calc(1 - var(--hp, 0) * 1.15); }
.hero .collage { translate: 0 calc(var(--hp, 0) * 56px); scale: calc(1 + var(--hp, 0) * 0.08); }

/* Phrase manifeste : les mots s'allument au fil de la lecture */
section.statement { padding: clamp(96px, 16vw, 190px) 0; }
.scrub {
  margin: 0; max-width: 19em;
  font-size: clamp(1.9rem, 4.8vw, 3.8rem); line-height: 1.12;
  letter-spacing: -0.03em; font-weight: 800;
}

/* Parallaxe par profondeur */
[data-speed] { translate: 0 calc(var(--pv, 0) * 1px); }
img.sz { scale: var(--is, 1); }
.contact-card.grow { scale: calc(0.92 + var(--g, 1) * 0.08); }

/* ---------- Scène épinglée : les quatre étapes, jouées pendant le scroll ---------- */
section.method { padding: 0; }
.method-stage { padding: 96px 0; }
.method .method-grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }

.method-copy h2 {
  margin: 0 0 10px; font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 800;
}
.method-sub { margin: 0 0 28px; color: var(--ink-soft); }

.method .steps li { padding: 0 0 0 68px; margin-bottom: 18px; border-bottom: 0; }
.method .steps li:last-child { margin-bottom: 0; padding-bottom: 0; }
.method .steps li::before {
  z-index: 1; width: 44px; height: 44px; font-size: 1.05rem;
  background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border);
}
.method .steps h3 { margin: 9px 0 0; font-size: 1.25rem; }
.method .steps .sp { display: grid; grid-template-rows: 1fr; }
.method .steps .sp > p { overflow: hidden; min-height: 0; padding-top: 6px; }

/* Mode épinglé (activé par motion.js uniquement) */
.method-pin.is-pinned { height: 420vh; position: relative; }
.is-pinned .method-stage {
  position: sticky; top: var(--hh, 72px);
  height: calc(100vh - var(--hh, 72px)); height: calc(100svh - var(--hh, 72px));
  padding: 0; display: flex; align-items: center; overflow: hidden;
}
.is-pinned .steps li { opacity: 0.36; transition: opacity 0.45s var(--ease-out); }
.is-pinned .steps li.is-done { opacity: 0.62; }
.is-pinned .steps li.is-on { opacity: 1; }
.is-pinned .steps .sp { grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out); }
.is-pinned .steps li.is-on .sp { grid-template-rows: 1fr; }
.is-pinned .steps li::before { transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), scale 0.5s var(--ease-spring); }
.is-pinned .steps li.is-on::before { background: var(--accent); color: var(--on-accent); border-color: var(--accent); scale: 1.1; }
.is-pinned .steps li.is-done::before { border-color: var(--accent); color: var(--accent); }

/* Fenêtre de navigateur */
.method-visual { display: grid; place-items: center; perspective: 1500px; }
.browser {
  position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 11;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow);
  scale: calc(0.84 + var(--e, 1) * 0.16);
  translate: 0 calc((1 - var(--e, 1)) * 80px);
  rotate: x calc((1 - var(--e, 1)) * 14deg);
  transition: box-shadow 0.6s var(--ease-out);
}
.browser.st3 { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent-bright) 50%, transparent); }

.b-bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.b-dots { display: flex; gap: 6px; }
.b-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.b-url {
  flex: 1; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px;
  border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft);
  font-size: 0.82rem; white-space: nowrap; overflow: hidden;
}
.b-lock { display: none; width: 13px; height: 13px; flex: none; color: var(--accent); }
.browser.st3 .b-lock { display: block; animation: lockIn 0.5s var(--ease-spring) both; }
.browser.st3 .b-url-text { color: var(--ink); font-weight: bold; }
.b-url.typing .b-url-text::after {
  content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px;
  background: currentColor; vertical-align: -0.12em; animation: blink 0.9s steps(1) infinite;
}
@keyframes lockIn { from { scale: 0; rotate: -30deg; } to { scale: 1; rotate: 0deg; } }
@keyframes blink { 50% { opacity: 0; } }

.b-body {
  flex: 1; min-height: 0; padding: 16px; overflow: hidden; border-radius: 0 0 17px 17px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px;
}
.b-hero { grid-column: 1 / -1; grid-row: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.b-hero picture { display: block; width: 100%; height: 100%; }
.b-hero img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-out); }
.b-lines { grid-column: 1; grid-row: 2; display: grid; gap: 8px; align-content: center; }
.b-lines i { height: 10px; border-radius: 6px; background: var(--bg-soft); transition: background-color 0.5s var(--ease-out); }
.b-lines i:nth-child(2) { width: 70%; }
.b-cta {
  grid-column: 2; grid-row: 2; justify-self: end; align-self: center;
  width: 112px; height: 30px; border-radius: 999px; background: var(--bg-soft);
  transition: background-color 0.5s var(--ease-out) 0.2s;
}
.b-cards { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.b-cards i {
  height: 46px; border-radius: 10px; background: var(--bg-soft); border: 1px solid transparent;
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.b-cards i:nth-child(2) { transition-delay: 0.08s; }
.b-cards i:nth-child(3) { transition-delay: 0.16s; }

/* étape 2 et suivantes : la maquette prend vie */
.browser.st2 .b-hero img { clip-path: inset(0 0 0 0); }
.browser.st2 .b-lines i:first-child { background: var(--ink); }
.browser.st2 .b-lines i:last-child { background: var(--ink-soft); }
.browser.st2 .b-cta { background: var(--accent); }
.browser.st2 .b-cards i { background: var(--surface); border-color: var(--border); border-top: 3px solid var(--accent-bright); }

/* étape 1 : la discussion */
.b-bubbles { position: absolute; inset: 58px 18px auto 18px; display: grid; gap: 10px; pointer-events: none; }
.b-bubbles span {
  justify-self: start; max-width: 72%; padding: 10px 14px; font-size: 0.92rem; line-height: 1.35;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px;
  box-shadow: var(--shadow); opacity: 0; translate: 0 14px; scale: 0.94;
  transition: opacity 0.35s var(--ease-out), translate 0.5s var(--ease-out), scale 0.5s var(--ease-out);
}
.b-bubbles .me { justify-self: end; background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-radius: 16px 16px 4px 16px; }
.browser[data-state="1"] .b-bubbles span { opacity: 1; translate: 0 0; scale: 1; }
.browser[data-state="1"] .b-bubbles .me { transition-delay: 0.3s; }

/* étape 3 : mise en ligne */
.b-badge {
  position: absolute; top: 56px; right: 26px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: bold;
  background: var(--surface); color: var(--accent); border: 1px solid var(--accent); box-shadow: var(--shadow);
  opacity: 0; scale: 0.8; transition: opacity 0.3s var(--ease-out), scale 0.5s var(--ease-spring);
}
.b-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright); }
.browser.st3 .b-badge { opacity: 1; scale: 1; transition-delay: 0.25s; }

/* étape 4 : le suivi */
.b-chips { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.b-chips span {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-size: 0.82rem; font-weight: bold; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  opacity: 0; translate: 0 16px; scale: 0.9; transition: opacity 0.3s var(--ease-out), translate 0.5s var(--ease-spring), scale 0.5s var(--ease-spring);
}
.b-chips span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); }
.browser[data-state="4"] .b-chips span { opacity: 1; translate: 0 0; scale: 1; }
.browser[data-state="4"] .b-chips span:nth-child(2) { transition-delay: 0.12s; }
.browser[data-state="4"] .b-chips span:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 1000px) {
  .method .method-grid { grid-template-columns: 1fr; gap: 16px; }
  .method-visual { order: -1; }
  .browser { max-width: 420px; aspect-ratio: 16 / 10; max-height: 34vh; max-height: 34svh; }
  .is-pinned .method-sub { display: none; }
  .method-copy h2 { font-size: 1.5rem; margin-bottom: 14px; }
  .method .steps li { padding-left: 54px; margin-bottom: 8px; }
  .method .steps li::before { width: 36px; height: 36px; font-size: 0.95rem; }
  .method .steps h3 { margin-top: 5px; font-size: 1.08rem; }
  .method .steps .sp > p { font-size: 0.93rem; line-height: 1.45; }
  .b-bubbles { inset: 50px 12px auto 12px; }
  .b-bubbles span { font-size: 0.8rem; padding: 7px 11px; }
  .b-badge { top: 48px; right: 16px; padding: 5px 11px; font-size: 0.78rem; }
  .b-chips { left: 12px; right: 12px; bottom: 12px; }
  .b-chips span { font-size: 0.74rem; padding: 5px 10px; }
  .b-cards i { height: 30px; }
  .b-body { padding: 12px; gap: 9px; }
}

/* ---------- Réalisations : galerie qui défile horizontalement ---------- */
.work-scroll { position: relative; }
/* Carte "Votre projet" : seul le lien "Démarrer un projet" est cliquable */
.work-slot { cursor: default; }
.work-slot .url { cursor: pointer; }
.work-scroll::before, .work-scroll::after {
  content: ""; position: absolute; top: 0; bottom: 14px; width: 1cm; z-index: 2; pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.work-scroll::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.work-scroll::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
/* Rien avant la première carte / après la dernière : le fondu ne doit pas « rogner » l'image */
.work-scroll.is-at-start::before { opacity: 0; }
.work-scroll.is-at-end::after { opacity: 0; }
.work-scroll .work-grid {
  display: flex; flex-wrap: nowrap; grid-template-columns: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  /* 1 cm de marge de chaque côté : les photos ne touchent plus les bords de la zone.
     scroll-padding-inline évite que le navigateur "rattrape" cette marge au chargement
     en alignant d'office la première carte sur le bord (bug de calage du scroll-snap). */
  padding: 4px 1cm 16px; margin: -4px 0 -12px; scroll-padding-inline: 1cm;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
}
.work-scroll .work-grid::-webkit-scrollbar { display: none; }
.work-scroll.is-dragging .work-grid,
.work-scroll.is-animating .work-grid { scroll-snap-type: none; }
.work-scroll.is-dragging .work-grid { cursor: grabbing; }
.work-scroll.is-dragging .work-grid, .work-scroll.is-dragging .work-grid * { user-select: none; }
.work-scroll .work {
  flex: 0 0 clamp(250px, 30vw, 360px); grid-column: unset; scroll-snap-align: start;
  -webkit-user-drag: none;
}
.work-scroll .work.big { flex-basis: clamp(310px, 42vw, 520px); }
.work-scroll .work.mid { flex-basis: clamp(280px, 36vw, 440px); }
.work-scroll .work img { -webkit-user-drag: none; }

/* Flèches de défilement, sur les photos (centrées sur la hauteur des cartes) */
.work-arrow {
  position: absolute; top: 50%; margin-top: -24px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), visibility 0.2s;
}
.work-arrow svg { width: 20px; height: 20px; }
.work-arrow:hover { border-color: var(--accent); transform: scale(1.06); }
.work-arrow:active { transform: scale(0.95); }
.work-arrow.prev { left: 6px; }
.work-arrow.next { right: 6px; }
.work-arrow:disabled { opacity: 0; visibility: hidden; pointer-events: none; }
@media (hover: none), (max-width: 640px) {
  .work-arrow { display: none; }
}

@media (max-width: 640px) {
  .work-scroll::before, .work-scroll::after { width: 20px; }
  .work-scroll .work-grid { padding-left: 14px; padding-right: 14px; scroll-padding-inline: 14px; }
  .work-scroll .work { flex-basis: 78vw; }
  .work-scroll .work.big, .work-scroll .work.mid { flex-basis: 86vw; }
}