/* Feuille de style du site public — structure et valeurs portées fidèlement
   depuis design/Samuel Perez - Portfolio.dc.html (styles inline consolidés
   ici sans changer le rendu). Le bloc de media queries mobiles (sélecteurs
   [data-mq~="..."]) est repris tel quel depuis le design, qui les définissait
   déjà dans une feuille de style plutôt qu'en inline (impossible autrement
   en media query). */

html, body { height: 100%; margin: 0; background: #000; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Seule la page d'accueil a besoin de bloquer le scroll du document : elle
   gère son propre défilement en interne via .sp-main. Les fiches projet et
   pages statiques n'ont pas de scroller interne, elles doivent utiliser le
   défilement normal de la page. */
body.sp-home { overflow: hidden; }
* { box-sizing: border-box; }
input, textarea, select, button { font-family: inherit; }
::placeholder { color: inherit; opacity: 0.5; }
.sp-scroll::-webkit-scrollbar { width: 0; height: 0; }

@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

a { color: inherit; }

/* ============ ÉCRAN DE CHARGEMENT ============ */
.sp-load {
  position: fixed; inset: 0; z-index: 100; background: #0a0a0a; color: #F4F1EB;
  display: flex; flex-direction: column; justify-content: center; padding: 0 40px;
  transition: opacity .5s ease;
}
.sp-load[hidden] { display: none; }
.sp-load__top {
  position: absolute; top: 40px; left: 40px; right: 40px; display: flex;
  justify-content: space-between; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.55;
}
.sp-load__stage { position: relative; width: 100%; max-width: 1500px; }
.sp-load__grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px;
  padding: 0 clamp(10px,3vw,55px); font-size: clamp(21px,2.9vw,43px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.12; color: rgba(244,241,235,0.18);
}
.sp-load__grid > span:first-child { justify-self: start; }
.sp-load__grid > span:nth-child(2) { justify-self: center; text-align: center; }
.sp-load__grid > span:last-child { justify-self: end; text-align: right; }
.sp-load__fill-wrap { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.sp-load__grid--fill {
  color: #F4F1EB; width: min(1500px, calc(100vw - 80px));
}
.sp-load__base {
  position: absolute; bottom: 40px; left: 40px; right: 40px; text-align: center;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.4;
}

/* ============ CURSEUR CUSTOM ============ */
.sp-cursor {
  position: fixed; left: 0; top: 0; z-index: 95; width: 34px; height: 34px; opacity: 0;
  mix-blend-mode: difference; pointer-events: none; transform: translate(-50%,-50%);
  will-change: left, top;
  transition: width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.sp-cursor__corner { position: absolute; width: 9px; height: 9px; border: 0 solid #fff; }
.sp-cursor__corner--nw { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.sp-cursor__corner--ne { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.sp-cursor__corner--sw { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.sp-cursor__corner--se { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.sp-cursor__dot {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; transform: translate(-50%,-50%); transition: opacity .2s ease;
}
.sp-cursor__text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; transition: opacity .2s ease;
}

/* ============ HEADER FIXE ============ */
.sp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; padding: 26px 40px; mix-blend-mode: difference; pointer-events: none;
}
.sp-header__name {
  font-size: 17px; cursor: pointer; pointer-events: auto; color: #fff; opacity: 0;
  transition: opacity 0.3s ease; background: none; border: none; padding: 0;
}
.sp-header__name.is-visible { opacity: 1; }
.sp-header__menu-btn {
  pointer-events: auto; background: none; border: none; color: #fff; font-size: 17px;
  letter-spacing: 0.01em; cursor: pointer; padding: 0;
}

/* ============ MENU OVERLAY ============ */
.sp-menu {
  position: fixed; inset: 0; z-index: 60; background: #0c0c0c; color: #F4F1EB;
  display: flex; flex-direction: column; padding: 26px 40px 48px; animation: spFade 0.25s ease;
}
.sp-menu[hidden] { display: none; }
.sp-menu__top { display: flex; align-items: center; justify-content: space-between; }
.sp-menu__top button { background: none; border: none; color: #F4F1EB; font-size: 17px; cursor: pointer; }
.sp-menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sp-menu__nav a, .sp-menu__nav button {
  font-size: clamp(44px,9vw,120px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04;
  color: #F4F1EB; text-decoration: none; cursor: pointer; background: none; border: none;
  text-align: left; padding: 0; font-family: inherit;
}
.sp-menu__bottom { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.sp-menu__langs { display: flex; gap: 18px; font-size: 15px; letter-spacing: 0.04em; }
.sp-menu__langs a {
  cursor: pointer; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.sp-menu__langs a.is-active { opacity: 1; font-weight: 700; border-bottom-color: currentColor; }
.sp-menu__langs a:not(.is-active) { opacity: 0.4; }
.sp-menu__email { display: flex; gap: 26px; font-size: 15px; opacity: 0.7; }
.sp-menu__email a { text-decoration: none; }

/* ============ SECTIONS HÉROS PROJETS ============ */
.sp-main {
  height: 100vh; overflow-y: scroll; scroll-behavior: smooth;
  /* Calage natif du navigateur plutôt qu'un magnétisme piloté en JS : ne
     force le calage que si on est déjà proche d'une section (contrairement
     à "mandatory"), donc le scroll libre reste fluide et sans "lutte"
     contre le geste — juste un alignement propre en fin de scroll. */
  scroll-snap-type: y proximity;
}
.sp-main > .sp-hero, .sp-main > section { scroll-snap-align: start; }
.sp-hero {
  position: relative; height: 100vh; overflow: hidden; cursor: none;
  background: linear-gradient(135deg, #c7c2b8 0%, #b1aca2 100%);
  display: block; text-decoration: none; color: inherit;
}
/* Le cadre garde une taille STABLE (100% x 128% du panneau) — c'est lui que
   la parallaxe translate. L'image à l'intérieur est positionnée en absolu
   avec des % calculés dynamiquement par ImageCrop/le JS de cadrage ; sa
   propre boîte change avec le cadrage, donc jamais utilisée comme référence
   de mesure (voir sp-hero__frame ci-dessus pour ça). */
.sp-hero__frame {
  position: absolute; left: 0; top: -14%; width: 100%; height: 128%; will-change: transform;
  overflow: hidden;
  /* Fond noir en letterbox dès que la photo ne couvre pas tout le cadre
     (dézoom autorisé sur les héros) — pas seulement sur mobile. */
  background: #000000;
}
.sp-hero__media {
  position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);
  object-fit: cover; object-position: center;
}
.sp-hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 1;
  background: linear-gradient(to bottom, transparent 2%, rgba(0,0,0,0.28) 50%, transparent 98%);
}
.sp-hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.40) 100%);
}
.sp-hero__head {
  position: absolute; left: 40px; top: 52px; right: 40px; z-index: 3; pointer-events: none;
}
.sp-hero__h1 {
  font-size: clamp(48px,9vw,168px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.88;
  color: #fff; margin: 0; text-shadow: 0 2px 34px rgba(0,0,0,0.5);
}
.sp-hero__tagline {
  font-size: clamp(20px,2.4vw,38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  color: #fff; margin: 20px 0 0; white-space: nowrap; text-shadow: 0 1px 24px rgba(0,0,0,0.55);
}
.sp-hero__role {
  font-size: clamp(13px,1.1vw,15px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin: 18px 0 0; text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 2px 18px rgba(0,0,0,0.7);
}
.sp-hero__label {
  position: absolute; left: 0; right: 0; top: 0; transform: translateY(44vh); z-index: 2;
  padding: 0 40px; pointer-events: none; will-change: transform;
}
.sp-hero__label-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; }
.sp-hero__label-grid span {
  font-size: clamp(21px,2.9vw,43px); font-weight: 600; letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 1px 20px rgba(0,0,0,0.3);
}
.sp-hero__label-grid span:first-child { justify-self: start; }
.sp-hero__label-grid span:nth-child(2) { justify-self: center; text-align: center; }
.sp-hero__label-grid span:last-child { justify-self: end; text-align: right; }
.sp-hero__fmt {
  position: absolute; left: 40px; bottom: 96px; z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 9px; filter: drop-shadow(0 1px 10px rgba(0,0,0,0.55));
}
.sp-hero__fmt-tri { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; }
.sp-hero__fmt-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-sizing: border-box; }
.sp-hero__fmt-label { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }

/* ============ APPROCHE ============ */
.sp-approach {
  position: relative; min-height: 100vh; background: #F4F1EB; color: #111;
  display: flex; flex-direction: column; justify-content: center; padding: clamp(72px,10vh,120px) 40px;
}
.sp-approach__inner { width: 100%; max-width: 1440px; margin: 0 auto; }
.sp-eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; }
.sp-approach__title { font-size: clamp(36px,5vw,72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; margin: 20px 0 26px; max-width: 16ch; }
.sp-approach__intro { font-size: clamp(18px,1.6vw,22px); line-height: 1.5; opacity: 0.7; max-width: 620px; margin: 0 0 clamp(48px,7vh,80px); }
.sp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px,3vw,44px); }
.sp-step { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(0,0,0,0.16); padding-top: 24px; transition: border-color .3s ease; }
.sp-step:hover { border-top-color: #c96442; }
.sp-step__n { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: #c96442; }
.sp-step__title { font-size: clamp(20px,1.6vw,25px); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.sp-step__body { font-size: 15px; line-height: 1.6; opacity: 0.6; margin: 0; }

/* ============ À PROPOS ============ */
.sp-about {
  position: relative; min-height: 100vh; background: #0c0c0c; color: #F4F1EB;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: clamp(48px,6vh,90px) 40px;
}
.sp-about__title { font-size: clamp(28px,3.6vw,50px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 14px 0 18px; }
.sp-about__body { font-size: 15.5px; line-height: 1.5; opacity: 0.8; max-width: 540px; margin: 0 0 11px; }
.sp-about__body2 { font-size: 15.5px; line-height: 1.5; opacity: 0.8; max-width: 540px; margin: 0 0 24px; }
.sp-about__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.sp-about__list-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.4; display: block; margin-bottom: 10px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; list-style: none; }
.sp-chip { border: 1px solid rgba(244,241,235,0.25); border-radius: 100px; padding: 6px 13px; font-size: 12.5px; display: inline-block; }
.sp-about__portrait {
  width: 100%; aspect-ratio: 4/5; max-width: 480px; justify-self: center; border-radius: 8px;
  overflow: hidden; background: linear-gradient(135deg, #c7c2b8 0%, #b1aca2 100%); position: relative;
}
.sp-about__portrait img { position: absolute; }

/* ============ CONTACT ============ */
.sp-contact {
  position: relative; min-height: 100vh; background: #F4F1EB; color: #111;
  display: flex; flex-direction: column; justify-content: center; padding: 120px 40px 56px;
}
.sp-contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; flex: 1; }
.sp-contact__col--text { align-self: center; }
.sp-contact__title { font-size: clamp(44px,7vw,104px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; margin: 0 0 30px; }
.sp-contact__sub { font-size: 19px; line-height: 1.55; opacity: 0.65; max-width: 420px; margin: 0 0 36px; }
.sp-contact__links { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.sp-contact__links a { text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.2); width: fit-content; padding-bottom: 3px; }
.sp-form { align-self: center; display: flex; flex-direction: column; gap: 18px; }
.sp-form input, .sp-form select, .sp-form textarea {
  background: transparent; border: none; border-bottom: 1px solid rgba(0,0,0,0.25); color: #111;
  padding: 13px 0; font-size: 16px; outline: none; border-radius: 0;
}
.sp-form select { background: #F4F1EB; }
.sp-form textarea { resize: none; }
.sp-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-form__submit {
  margin-top: 6px; align-self: flex-start; background: #111; color: #F4F1EB; border: none;
  padding: 15px 36px; font-size: 15px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: opacity .2s ease;
}
.sp-form__submit[disabled] { cursor: wait; opacity: 0.6; }
.sp-form__status { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; }
.sp-form__status--ok { color: #2e7d4f; }
.sp-form__status--err { color: #b0432a; }
.sp-footer {
  display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(0,0,0,0.12);
  padding-top: 22px; margin-top: 48px; font-size: 13px; opacity: 0.55;
}
.sp-footer__right { display: inline-flex; align-items: center; gap: 14px; }
.sp-footer__right a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ FICHE PROJET (page /projets/<slug>) ============ */
.sp-detail { position: relative; background: #0b0b0b; color: #F4F1EB; min-height: 100vh; animation: spFade 0.3s ease; }
.sp-detail__top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; background: linear-gradient(180deg,#0b0b0b 60%,rgba(11,11,11,0));
}
.sp-detail__back { background: none; border: none; color: #F4F1EB; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sp-detail__meta-top { font-size: 14px; opacity: 0.55; letter-spacing: 0.04em; }
.sp-detail__h1wrap { padding: 18px 40px 0; }
.sp-detail__h1 { font-size: clamp(40px,8vw,120px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; margin: 0 0 28px; }
.sp-detail__hero { padding: 0 40px; }
.sp-detail__hero-box { position: relative; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #c7c2b8 0%, #b1aca2 100%); }
.sp-detail__hero-box--h { width: 100%; aspect-ratio: 16/9; }
.sp-detail__hero-box--v { width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 9/16; }
.sp-detail__hero-box--photo { width: 100%; aspect-ratio: 3/2; }
.sp-detail__hero-box img { position: absolute; }
.sp-detail__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.sp-detail__play-circle {
  pointer-events: auto; cursor: pointer; width: 88px; height: 88px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.85); background: rgba(0,0,0,0.14); display: flex;
  align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.sp-detail__play-tri { width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 20px solid #fff; margin-left: 5px; }
.sp-detail__yt-fallback {
  position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; text-align: center; padding: 9px;
  font-size: 12.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.85);
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent); text-decoration: none;
}
.sp-detail__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-detail__meta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; padding: 64px 40px; }
.sp-detail__intro { font-size: clamp(20px,2.2vw,30px); line-height: 1.45; font-weight: 400; margin: 18px 0 0; max-width: 640px; letter-spacing: -0.01em; }
.sp-detail__side { display: flex; flex-direction: column; gap: 28px; }
.sp-detail__side p { font-size: 18px; margin: 8px 0 0; }
.sp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.sp-pill { border: 1px solid rgba(244,241,235,0.25); border-radius: 100px; padding: 7px 15px; font-size: 14px; display: inline-block; }
.sp-stills { columns: 2; column-gap: 18px; padding: 0 40px 84px; }
.sp-still {
  position: relative; break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 18px;
  border-radius: 8px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg,#1b1b1b,#0f0f0f);
  display: block; text-decoration: none; opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.sp-still.is-visible { opacity: 1; transform: none; }
.sp-still__inner { position: absolute; top: -7%; bottom: -7%; left: 0; right: 0; will-change: transform; }
.sp-still__inner img { width: 100%; height: 100%; position: absolute; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.sp-still:hover .sp-still__inner img { transform: scale(1.045); }
.sp-detail__next {
  border-top: 1px solid rgba(244,241,235,0.15); padding: 54px 40px 80px; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; text-decoration: none; color: inherit;
}
.sp-detail__next-title { font-size: clamp(32px,5vw,64px); font-weight: 600; letter-spacing: -0.03em; margin: 12px 0 0; }

/* ============ LIGHTBOX ============ */
.sp-lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(7,7,7,0.95); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; animation: spFade .28s ease; cursor: pointer;
}
.sp-lightbox[hidden] { display: none; }
.sp-lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 3px; box-shadow: 0 40px 140px rgba(0,0,0,0.7); cursor: default; }
.sp-lightbox__close, .sp-lightbox__nav {
  position: fixed; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.35);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sp-lightbox__close { top: 26px; right: 30px; width: 46px; height: 46px; font-size: 19px; }
.sp-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 26px; line-height: 1; }
.sp-lightbox__nav--prev { left: 26px; }
.sp-lightbox__nav--next { right: 26px; }
.sp-lightbox__count { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); }

/* ============ MENTIONS LÉGALES / PAGE STATIQUE SOMBRE ============ */
.sp-static-page { background: #0b0b0b; color: #F4F1EB; min-height: 100vh; animation: spFade 0.3s ease; }
.sp-static-page__top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px,4vw,40px); background: linear-gradient(180deg,#0b0b0b 60%,rgba(11,11,11,0));
}
.sp-static-page__body { max-width: 760px; margin: 0 auto; padding: 24px clamp(20px,4vw,40px) 100px; display: flex; flex-direction: column; gap: 40px; }
.sp-static-page h1 { font-size: clamp(34px,5vw,64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; margin: 0; }
.sp-legal-block { display: flex; flex-direction: column; gap: 12px; }
.sp-legal-block__label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; }
.sp-legal-block p { font-size: 16px; line-height: 1.65; opacity: 0.85; margin: 0; }

/* ============ PAGE 404 ============ */
.sp-404 {
  position: fixed; inset: 0; background: #0a0a0a; color: #F4F1EB; display: flex; flex-direction: column;
  justify-content: center; padding: 0 clamp(24px,4vw,40px); animation: spFade .4s ease;
}
.sp-404__top {
  position: absolute; top: clamp(20px,4vh,40px); left: clamp(24px,4vw,40px); right: clamp(24px,4vw,40px);
  display: flex; justify-content: space-between; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
}
.sp-404__inner { width: 100%; max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.sp-404__num { font-size: clamp(72px,16vw,240px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.88; margin: 0; color: rgba(244,241,235,0.18); }
.sp-404__msg { display: flex; flex-direction: column; gap: 14px; }
.sp-404__msg p:first-child { font-size: clamp(21px,2.9vw,43px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
.sp-404__msg p:last-child { font-size: clamp(15px,1.3vw,18px); line-height: 1.55; opacity: 0.6; margin: 0; max-width: 520px; }
.sp-404__back {
  align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; color: #F4F1EB;
  text-decoration: none; font-size: 16px; border: 1px solid rgba(244,241,235,0.3); border-radius: 100px; padding: 13px 26px;
  transition: background .2s ease, color .2s ease;
}
.sp-404__back:hover { background: #F4F1EB; color: #111; }
.sp-404__base {
  position: absolute; bottom: clamp(20px,4vh,40px); left: clamp(24px,4vw,40px); right: clamp(24px,4vw,40px);
  text-align: center; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.4;
}

/* ============ MÉDIA MOBILE (≤760px) — porté tel quel depuis le design ============ */
@media (max-width: 760px) {
  .sp-load { padding: 0 24px !important; }
  .sp-load__top { top: 20px !important; left: 24px !important; right: 24px !important; font-size: 11px !important; }
  .sp-load__grid { grid-template-columns: 1fr !important; gap: 6px !important; padding: 0 !important; font-size: clamp(20px,6.4vw,24px) !important; line-height: 1.25 !important; }
  .sp-load__grid > span { justify-self: start !important; text-align: left !important; }
  .sp-load__grid--fill { width: calc(100vw - 48px) !important; }
  .sp-load__base { bottom: 20px !important; left: 24px !important; right: 24px !important; font-size: 10.5px !important; }
  .sp-header { padding: 18px 22px !important; }
  .sp-header span, .sp-header button { font-size: 15px !important; }
  .sp-menu { padding: 20px 22px 32px !important; }
  .sp-hero__head { left: 24px !important; right: 24px !important; }
  .sp-hero__label { padding: 0 20px !important; }
  .sp-hero__label-grid { gap: 12px !important; }
  .sp-hero__label-grid span { font-size: 16.5px !important; }
  .sp-hero__fmt { left: 24px !important; bottom: 72px !important; }
  .sp-approach { padding: 84px 24px 56px !important; }
  .sp-steps { grid-template-columns: 1fr !important; gap: 26px !important; }
  .sp-about { grid-template-columns: 1fr !important; gap: 40px !important; padding: 84px 24px 56px !important; }
  .sp-about__lists { grid-template-columns: 1fr !important; gap: 20px !important; }
  .sp-about__portrait { max-width: 300px !important; justify-self: start !important; }
  .sp-contact { padding: 96px 24px 40px !important; }
  .sp-contact__grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .sp-footer { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; font-size: 11.5px !important; }
  .sp-detail__top { padding: 14px 20px !important; }
  .sp-detail__h1wrap { padding: 12px 20px 0 !important; }
  .sp-detail__hero { padding: 0 16px !important; }
  .sp-detail__meta { grid-template-columns: 1fr !important; gap: 36px !important; padding: 44px 20px !important; }
  .sp-stills { columns: 1 !important; padding: 0 16px 64px !important; }
  .sp-detail__next { padding: 40px 20px 60px !important; }
  .sp-lightbox__close { top: 14px !important; right: 14px !important; width: 40px !important; height: 40px !important; }
  .sp-lightbox__nav { width: 42px !important; height: 42px !important; }
  .sp-lightbox__nav--prev { left: 10px !important; }
  .sp-lightbox__nav--next { right: 10px !important; }
  .sp-lightbox img { max-width: 96vw !important; max-height: 78vh !important; }
  .sp-admin-btn { left: 16px !important; bottom: 14px !important; padding: 9px 15px !important; font-size: 12px !important; }
  .sp-reframe-btn { left: 16px !important; bottom: 56px !important; padding: 9px 15px !important; font-size: 12px !important; }
  .sp-mobile-btn { display: none !important; }
}

/* Bande cinéma (mfit=contain, UNIQUEMENT sur mobile) : photo entière visible,
   pas de recadrage pan/zoom ni de parallaxe — seul un zoom optionnel (mzoom)
   s'applique, en CSS transform posé par le JS sur le cadre. La classe est
   posée par le JS (pas un simple attribut serveur) car la décision dépend du
   viewport du visiteur, connu seulement côté client. */
.sp-hero__frame.is-contain {
  top: 0 !important; height: 100% !important; background: #000 !important;
  transform-origin: center center;
}
.sp-hero__frame.is-contain .sp-hero__media { object-fit: contain; }