/* ════════════════════════════════════════════════════════════
   MARION SOCIAL MEDIA — Studio VM
   Palette : noir / blanc / jaune. Display Heavitas + Montserrat.
   ════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Heavitas';
  src: url('../fonts/Heavitas.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #2e2d2d;
  --ink-soft: #262525;
  --paper: #f4f0e9;
  --white: #ffffff;
  --yellow: #f9eb1f;
  --yellow-deep: #e6d800;
  --muted: #756d60;
  --taupe: #8f877a;
  --line: rgba(46, 45, 45, 0.12);
  --line-light: rgba(255, 255, 255, 0.18);

  --font-display: 'Heavitas', 'Arial Black', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --container: 1240px;
  --radius: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden transforme html/body en conteneur de defilement, ce qui
   neutralise tout position:sticky de la page (la colonne de filtres du
   portfolio partait avec le scroll). clip bloque le debordement horizontal
   sans creer ce conteneur. hidden reste en repli pour les navigateurs
   anterieurs a Safari 16 qui ignorent clip. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; }
section { position: relative; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--yellow); color: var(--ink); padding: 12px 20px;
  z-index: 999; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ───────── Reveal on scroll ───────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
}
.js .reveal {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ───────── Buttons & links ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: var(--ink); color: var(--yellow); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--yellow); color: var(--ink); }
.btn--sm { padding: 11px 22px; font-size: 0.82rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--ink);
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--light { border-color: var(--yellow); color: var(--white); }

/* ───────── Eyebrow ───────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: 18px;
}
.eyebrow--light { color: var(--white); }
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
}

/* ───────── Section headings (shared) ───────── */
.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: .01em;
  margin-bottom: 22px;
}
.section-title--light { color: var(--white); }
.title-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
}
.title-outline .title-dot {
  -webkit-text-stroke: 0;
  color: var(--yellow);
}
.section-lead {
  max-width: 640px;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--muted);
}
.section-head { max-width: 780px; margin: 0 auto 60px; text-align: center; padding: 0 24px; }
.section-head--dark { color: var(--white); }
.section-head .section-lead { margin: 0 auto; }

mark {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 .18em;
  border-radius: .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ════════════════════ HEADER ════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Le flou vit sur un pseudo-élément : un backdrop-filter posé
   directement sur .site-header créerait un containing block et
   casserait le position:fixed du menu mobile qu'il contient.
   Transparent au sommet (le logo du hero traverse le header),
   il réapparaît au scroll pour garder le menu lisible. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(246, 244, 238, 0.88);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 4px 24px rgba(23,24,26,0.05);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.site-header__nav ul {
  display: flex;
  gap: 22px;
}
.site-header__nav a {
  font-weight: 600;
  font-size: 0.92rem;
  position: relative;
  padding-bottom: 4px;
}
.site-header__nav a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--yellow);
  transition: right .3s var(--ease);
}
.site-header__nav a:hover::after { right: 0; }
.site-header__nav a.is-current::after { right: 0; }
.site-header__nav a.is-current { color: var(--ink); }

.site-header__side { display: flex; align-items: center; gap: 16px; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════ HERO ════════════════════ */
.hero {
  position: relative;
  padding: 66px 22px 52px;
  overflow: hidden;
}
.hero__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image: radial-gradient(circle at 16% 20%, rgba(23,24,26,0.05) 0, transparent 42%),
                     radial-gradient(circle at 88% 70%, rgba(249,235,31,0.20) 0, transparent 48%);
}

.hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: 44px;
  align-items: center;
}

/* ── Colonne texte ── */
.hero__logo { width: clamp(240px, 36vw, 440px); height: auto; margin-bottom: 20px; }

.hero__kicker {
  display: flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 20px;
}

.hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.01em;
}

/* Titre : révélation par balayage jaune (le bloc passe et dévoile le texte) */
.tline {
  display: block;
  position: relative;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
}
.tline__t {
  display: inline-block;
  color: var(--ink);
}
.tline__t .t-hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
}
.tline__t .t-dot { color: var(--yellow-deep); }
.tline::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  animation: tSweep 5s cubic-bezier(.7, 0, .2, 1) infinite;
}
.tline:nth-child(2)::after { animation-delay: .18s; }

@keyframes tSweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  6%   { transform: scaleX(1); transform-origin: left center; }
  7%   { transform: scaleX(1); transform-origin: right center; }
  13%  { transform: scaleX(0); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

@media (prefers-reduced-motion: reduce) {
  .tline::after { display: none; }
}

.hero__sub {
  margin-top: 54px; max-width: 46ch;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--muted);
}

.hero__actions {
  margin-top: 32px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}

/* Petite grappe de photos dans le vide central du hero (desktop only) */
.hero__cluster { display: none; }

/* ── Colonne visuelle ── */
.hero__visual { position: relative; width: 100%; display: flex; justify-content: center; }
.hero__disc {
  position: absolute; z-index: 0;
  width: min(74vw, 440px); aspect-ratio: 4 / 5;
  border-radius: 30px; background: var(--yellow);
  left: 50%; top: 50%;
  transform: translate(calc(-50% - 18px), calc(-50% - 18px));
}
.hero__cut {
  position: relative; z-index: 1;
  width: min(74vw, 440px); aspect-ratio: 4 / 5;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 36px 74px -28px rgba(46,45,45,.5);
}
.hero__cut img { width: 100%; height: 100%; object-fit: cover; }

/* Badge circulaire rotatif (accent unique) */
.hero__spin {
  position: absolute; z-index: 3;
  left: -14px; bottom: -14px;
  width: 104px; height: 104px;
  display: grid; place-items: center;
  background: var(--ink); border-radius: 50%;
  box-shadow: 0 18px 34px -12px rgba(23,24,26,.55);
}
.hero__spin-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: heroSpin 16s linear infinite;
}
.hero__spin-ring text {
  font-family: var(--font-body); font-size: 8.2px; font-weight: 700;
  letter-spacing: .14em; fill: var(--yellow); text-transform: uppercase;
}
.hero__spin-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: grid; place-items: center;
  transition: transform .4s var(--ease);
}
.hero__spin-arrow svg { width: 20px; height: 20px; }
.hero__spin:hover .hero__spin-arrow { transform: rotate(45deg) scale(1.08); }
@keyframes heroSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__spin-ring { animation: none; } }

/* ════════════════════ DEUX UNIVERS ════════════════════ */
.univers { padding: 90px 24px 40px; }
.univers__grid {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: 58px;
  grid-template-columns: 1fr;
}
/* Monogramme VM détouré, dans le couloir crème entre les deux cartes */
.univers__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: clamp(42px, 4vw, 58px);
  transform: translate(-50%, -50%);
  animation: vmfloat 5.5s ease-in-out infinite;
  pointer-events: none;
}
.univers__logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(46,45,45,.20));
  transition: transform .55s var(--ease);
}
/* interaction au survol des cartes */
.univers__grid:hover .univers__logo img { transform: scale(1.1) rotate(-4deg); }

@keyframes vmfloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 9px)); }
}
@media (prefers-reduced-motion: reduce) {
  .univers__logo { animation: none; }
}
/* Cartes empilées en mobile : le logo ne peut plus flotter au centre du
   couloir (il n'existe plus), on le remet dans le flux entre les deux
   cartes plutôt que de le laisser chevaucher l'une d'elles. */
@media (max-width: 899px) {
  .univers__logo {
    position: static;
    order: 2;
    margin: -29px auto;
    animation-name: vmfloat-mobile;
  }
  .univers__card:last-of-type { order: 3; }
}
@keyframes vmfloat-mobile {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.univers__card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.univers__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px -22px rgba(46,45,45,0.28);
}
.univers__card--dark { background: var(--ink); color: var(--white); }
.univers__card--dark p { color: rgba(255,255,255,0.72); }
.univers__card--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.univers__card--yellow p { color: rgba(46,45,45,0.78); }
.univers__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  margin-bottom: 20px;
}
.univers__num svg { width: 22px; height: 22px; }
.univers__card--dark .univers__num { background: var(--yellow); color: var(--ink); }
.univers__card--yellow .univers__num { background: var(--ink); color: var(--yellow); }
.univers__card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.05;
  margin-bottom: 16px;
}
.univers__card p { color: var(--muted); max-width: 46ch; margin-bottom: 24px; }
.univers__tags {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
  max-width: 42ch;
  margin: 0 0 28px;
}
.univers__card--dark .univers__tags { color: rgba(255,255,255,0.62); }
.univers__card--yellow .univers__tags { color: rgba(46,45,45,0.68); }
.univers__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}
.univers__link svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.univers__card:hover .univers__link svg { transform: translateX(4px); }

/* ════════════════════ AVIS CLIENTS ════════════════════ */
.avis { padding: 60px 24px 110px; overflow: hidden; }
.avis__inner { max-width: 980px; margin: 0 auto; }

.avis__carousel {
  position: relative;
  margin-top: 56px;
  padding: 0 40px;
}

.avis__track { position: relative; transition: height .4s var(--ease); }

.avis__slide {
  display: grid;
  gap: 48px;
  align-items: center;
  align-content: start;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.avis__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .avis__slide { transition: opacity .01s linear; transform: none; }
}

/* Citation vedette — la phrase qui reste, en typo poster */
.avis__pull {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 13ch;
  margin: 0 0 40px;
  padding-left: 0.55em;
}
.avis__pull-mark {
  position: absolute;
  top: 0.06em;
  left: -0.14em;
  font-size: 1.5em;
  line-height: 1;
  color: var(--yellow);
  z-index: -1;
  user-select: none;
}
.avis__pull-hl {
  display: inline;
  background: var(--yellow);
  color: var(--ink);
  padding: 0.05em 0.14em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Bloc détail — avis complet + attribution */
.avis__detail { max-width: 560px; padding-left: 0.55em; }
.avis__full {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

.avis__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;          /* le badge doit rester sur la ligne : une capsule
                                 qui passe sur deux lignes colle son contenu
                                 contre l'arrondi et devient illisible */
  max-width: 100%;
  margin-top: 28px;
  padding: 8px 18px 8px 8px;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.avis__tag-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
}
.avis__tag-check svg { width: 15px; height: 15px; }
.avis__tag-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;               /* autorise le texte a se comprimer plutot que
                                 pousser le badge a la ligne */
}
.avis__tag-text strong { font-size: 0.92rem; font-weight: 700; }
.avis__tag-text span { font-size: 0.76rem; color: var(--muted); }
.avis__tag-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 11px;
  margin-left: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Photo d'ambiance — cadrage façon post, cassé pour éviter le côté "vide" */
.avis__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 340px;
  margin: 0;
  transform: rotate(1.6deg);
}
.avis__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  border: 6px solid var(--white);
  box-shadow: 0 28px 54px -22px rgba(46, 45, 45, 0.4);
}
.avis__visual::after {
  content: '';
  position: absolute;
  inset: 14px -10px -10px 14px;
  z-index: -1;
  background: var(--yellow);
  border-radius: 22px;
  transform: rotate(-3deg);
}

/* Flèches de navigation du carrousel */
.avis__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--ink);
  border: none;
  color: var(--yellow);
  box-shadow: 0 14px 28px -12px rgba(46, 45, 45, 0.45);
  transition: background .25s ease, color .25s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.avis__arrow:hover {
  background: var(--yellow);
  color: var(--ink);
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(46, 45, 45, 0.55);
}
.avis__arrow:active { transform: translateY(-50%) scale(0.96); }
.avis__arrow svg { width: 20px; height: 20px; }
.avis__arrow--prev { left: -12px; }
.avis__arrow--next { right: -12px; }

/* Points de pagination */
.avis__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.avis__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  transition: background .25s ease, transform .25s ease;
}
.avis__dot.is-active { background: var(--ink); transform: scale(1.25); }

@media (max-width: 640px) {
  .avis__carousel { padding: 0; }
  .avis__arrow { position: static; transform: none; }
  .avis__arrow--prev, .avis__arrow--next { display: none; }
}

@media (min-width: 900px) {
  .avis__carousel { padding: 0 clamp(40px, 7vw, 96px); }
  .avis__arrow--prev { left: clamp(-16px, -3vw, 0px); }
  .avis__arrow--next { right: clamp(-16px, -3vw, 0px); }
  .avis__detail { margin-left: 2.5ch; }
  .avis__slide { grid-template-columns: 1.3fr 1fr; gap: 40px; }
  .avis__visual { max-width: 300px; justify-self: end; transform: rotate(2.2deg); }
}

/* ════════════════════ CTA PORTFOLIO ════════════════════ */
.portfolio-cta { background: var(--ink); padding: 90px 24px 110px; }
.portfolio-cta__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.portfolio-cta__lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 20px);
  color: rgba(255,255,255,0.75);
}

.portfolio-cta__btn {
  position: relative;
  display: inline-block;
  transform: rotate(-1.2deg);
  transition: transform .4s var(--ease);
}
.portfolio-cta__btn:hover { transform: rotate(0deg) translateY(-4px); }
.portfolio-cta__btn:active { transform: rotate(0deg) translateY(-1px) scale(0.98); }

.portfolio-cta__btn-shadow {
  position: absolute;
  inset: 10px -14px -14px 10px;
  background: var(--taupe);
  border-radius: 26px 20px 30px 22px / 22px 30px 20px 26px;
  transition: inset .4s var(--ease);
}
.portfolio-cta__btn:hover .portfolio-cta__btn-shadow { inset: 14px -20px -20px 14px; }

.portfolio-cta__btn-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--yellow);
  color: var(--ink);
  padding: 34px 56px;
  border-radius: 26px 20px 30px 22px / 22px 30px 20px 26px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.55);
}

.portfolio-cta__btn-text {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(22px, 3.6vw, 34px);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.portfolio-cta__btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  transition: transform .35s var(--ease), background .3s ease;
}
.portfolio-cta__btn-arrow svg { width: 20px; height: 20px; }
.portfolio-cta__btn:hover .portfolio-cta__btn-arrow { transform: translateX(6px); }

@media (max-width: 560px) {
  .portfolio-cta__btn-face { padding: 26px 32px; gap: 14px; }
  .portfolio-cta__btn-arrow { width: 38px; height: 38px; }
  .portfolio-cta__btn-arrow svg { width: 17px; height: 17px; }
  /* Le libellé le plus long ("Réserver un appel découverte") ne tient pas
     sur une ligne aux petites largeurs : on autorise le retour à la ligne
     plutôt que de le laisser déborder hors de l'écran. */
  .portfolio-cta__btn-text { white-space: normal; }
}

/* ════════════════════ BASCULE ENTREPRISES / PARTICULIERS (Prestations) ════════════════════ */
.ptoggle {
  position: sticky;
  top: 88px;
  z-index: 20;
  max-width: 640px;
  width: calc(100% - 48px);
  margin: 52px auto 64px;
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(46,45,45,0.18), 0 28px 54px -18px rgba(46,45,45,0.4);
}
.ptoggle__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-soft);
  transition: background .3s ease, color .3s ease;
}
.ptoggle__btn svg { width: 23px; height: 23px; flex-shrink: 0; }
.ptoggle__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--yellow);
}

@media (max-width: 480px) {
  .ptoggle { margin-top: 40px; margin-bottom: 48px; gap: 4px; padding: 6px; }
  .ptoggle__btn { padding: 14px 10px; gap: 7px; font-size: 0.85rem; white-space: nowrap; }
  .ptoggle__btn svg { width: 18px; height: 18px; }
}
.ptoggle__btn.is-active { background: var(--ink); color: var(--yellow); }
.ptoggle__btn:not(.is-active):hover { background: var(--paper); }

.ppanel { display: none; }
.ppanel.is-active { display: block; }
.ppanel[data-ppanel="particuliers"] { background: var(--ink); }
.ppanel[data-ppanel="particuliers"] .pexamples { background: var(--ink); }

/* Bandes d'exemples photo */
.pexamples { padding: 20px 24px 90px; }
.pexamples--dark { background: var(--ink); }
.pexamples__label {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 22px;
}
.pexamples--dark .pexamples__label { color: rgba(255,255,255,0.55); }
.pexamples__row {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.pexamples__item { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; }
.pexamples__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pexamples__item:hover img { transform: scale(1.06); }
.pexamples__more { display: flex; justify-content: center; margin-top: 26px; }

@media (min-width: 640px) { .pexamples__row { grid-template-columns: repeat(5, 1fr); } }

/* ════════════════════ PORTFOLIO COMPLET (filtre + masonry + lightbox) ════════════════════ */
.pfull { padding: 140px 24px 100px; }
.pfull__head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.pfull__head .section-lead { margin: 0 auto; }
.pfull__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 16px;
}

.pfull__layout {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.pfilter__label {
  display: none;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
}

.pfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.pfilter__divider { display: none; }
.pfilter__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  transition: color .25s ease;
}
.pfilter__icon svg { width: 100%; height: 100%; }
.pfilter__text { flex: 1; text-align: left; }
.pfilter__count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}
.pfilter__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--white);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.pfilter__pill:hover { border-color: var(--ink); transform: translateY(-1px); }
.pfilter__pill:hover .pfilter__icon { color: var(--ink); }
.pfilter__pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pfilter__pill.is-active .pfilter__icon,
.pfilter__pill.is-active .pfilter__count { color: var(--yellow); }
.pfilter__result { display: none; }

/* Sous 900px, pas de colonne latérale sticky (elle n'existe qu'en desktop,
   voir plus bas) : les 12 pastilles s'empilaient en mur de tags avant même
   la première photo. On les passe en bandeau défilant sur une seule ligne,
   comme le fait déjà le carrousel de photos de la page Photographie. */
@media (max-width: 899px) {
  .pfilter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px 32px;
    padding: 0 24px;
  }
  .pfilter::-webkit-scrollbar { display: none; }
  .pfilter__pill { flex-shrink: 0; }
}

.pfull__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .pfull__layout { grid-template-columns: 246px 1fr; gap: 48px; align-items: start; }
  .pfilter__label { display: block; }
  .pfilter {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 3px;
    margin-bottom: 0;
    position: sticky;
    top: 104px;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 22px;
    padding: 22px 18px;
    box-shadow: 0 24px 50px -26px rgba(46,45,45,0.24);
    /* Sur un portable peu haut, la colonne depasse l'ecran : on la rend
       parcourable au lieu de couper les derniers univers. */
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .pfilter::-webkit-scrollbar { width: 6px; }
  .pfilter::-webkit-scrollbar-track { background: transparent; }
  .pfilter::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .pfilter__pill {
    justify-content: flex-start;
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 11px 12px;
    position: relative;
  }
  .pfilter__pill--all {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
  }
  .pfilter__pill--all .pfilter__count { font-size: 0.75rem; }
  .pfilter__divider {
    display: block;
    height: 1px;
    background: var(--line);
    margin: 10px 4px 12px;
  }
  .pfilter__pill:hover { background: var(--paper); transform: none; }
  .pfilter__pill.is-active { position: relative; }
  .pfilter__pill.is-active::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--yellow);
  }
  .pfilter__pill.is-active:hover { background: var(--ink); }
  .pfilter__result {
    display: block;
    margin: 16px 4px 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 0.76rem;
    color: var(--muted);
  }
}
.pfull__item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
.pfull__item.is-hidden { display: none; }
.pfull__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.pfull__item:hover img { transform: scale(1.04); }
.pfull__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,24,26,.45), transparent 45%);
  opacity: 0;
  transition: opacity .3s ease;
}
.pfull__item:hover::after { opacity: 1; }
.pfull__item-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(23,24,26,0.55);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.pfull__item:hover .pfull__item-tag { opacity: 1; transform: none; }

.pfull__empty { text-align: center; color: var(--muted); margin-top: 40px; }

@media (min-width: 640px)  { .pfull__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pfull__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .pfull__grid { grid-template-columns: repeat(4, 1fr); } }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(23,24,26,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 90px;
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  border-radius: 12px;
}
.lightbox__figure figcaption { color: rgba(255,255,255,0.7); font-size: 0.88rem; }

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--line-light);
  color: var(--white);
  transition: background .25s ease, color .25s ease;
}
.lightbox__close:hover,
.lightbox__arrow:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__arrow { top: 50%; transform: translateY(-50%); }
.lightbox__arrow svg { width: 20px; height: 20px; }
.lightbox__arrow--prev { left: 20px; }
.lightbox__arrow--next { right: 20px; }
.lightbox__count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .lightbox { padding: 90px 20px 40px; }
  .lightbox__arrow--prev { left: 8px; }
  .lightbox__arrow--next { right: 8px; }
  .lightbox__close { top: 16px; right: 16px; }
}

/* ════════════════════ RETOUR AUX FILTRES (mobile) ════════════════════ */
.pf-totop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  box-shadow: 0 14px 28px -10px rgba(23,24,26,.55);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s ease, color .25s ease;
}
.pf-totop svg { width: 20px; height: 20px; }
.pf-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pf-totop:hover { background: var(--yellow); color: var(--ink); }
@media (max-width: 899px) {
  .pf-totop { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-totop { transition: opacity .01s linear; transform: none; }
}

/* ════════════════════ MARQUEE ════════════════════ */
.marquee {
  background: var(--ink);
  color: var(--yellow);
  overflow: hidden;
  padding: 20px 0;
  transform: rotate(-1deg);
  margin: 72px 0 40px;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 32s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  padding: 0 28px;
  white-space: nowrap;
  position: relative;
}
.marquee__track span::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ════════════════════ SERVICES ════════════════════ */
.services { padding: 40px 24px 110px; }
/* ── Onglets verticaux + visuel ── */
.tabs {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.tabs__list { display: flex; flex-direction: column; }
.tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 8px 18px 20px;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.tabs__list .tabs__tab:last-child { border-bottom: 1px solid var(--line); }
.tabs__tab::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--yellow);
  transform: translateY(-50%);
  transition: height .3s var(--ease);
}
.tabs__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.tabs__ico svg { width: 23px; height: 23px; }
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active { color: var(--ink); padding-left: 26px; }
.tabs__tab.is-active::before { height: 60%; }
.tabs__tab.is-active .tabs__ico { background: var(--yellow); color: var(--ink); }

.tabs__panels {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  background: var(--ink);
}
.tabs__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity .55s var(--ease), transform .7s var(--ease), visibility .55s;
}
.tabs__panel.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.tabs__panel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tabs__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,24,26,.92) 0%, rgba(23,24,26,.45) 45%, rgba(23,24,26,.08) 100%);
}
.tabs__panel-body {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 1;
  padding: 34px;
  color: var(--white);
}
.tabs__panel-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: var(--yellow);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.tabs__panel-icon svg { width: 26px; height: 26px; }
.tabs__panel h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 10px;
}
.tabs__panel p { color: rgba(255,255,255,.82); max-width: 44ch; line-height: 1.6; }
.tabs__panel-price {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--yellow);
}

@media (min-width: 860px) {
  .tabs {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
  }
  .tabs__panels { min-height: 500px; height: 100%; }
}

.services__cta {
  max-width: var(--container);
  margin: 50px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ════════════════════ PRICING (Prestations) ════════════════════ */
.pricing { padding: 90px 24px; }
.pricing--dark { background: var(--ink); color: var(--white); }

.pricing__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.pricing__card--yellow { background: var(--yellow); border-color: var(--yellow); }
.pricing__card-desc { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; }
.pricing__card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}
.pricing__card-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.pricing__card-link:hover svg { transform: translateX(4px); }

.pricing__card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.pricing__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease);
}
.pricing__card:hover .pricing__card-media img { transform: scale(1.05); }

.pricing__card-body { padding: 32px 34px 40px; display: flex; flex-direction: column; flex: 1; }

.pricing__card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.pricing__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pricing__card-price { font-size: 1.05rem; margin-bottom: 24px; }
.pricing__card-price strong { font-family: var(--font-display); font-size: 1.3em; }
.pricing__card-list { display: flex; flex-direction: column; gap: 12px; }
.pricing__card-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pricing__card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--ink);
}
.pricing__card--yellow .pricing__card-list li::before { background: var(--ink); }

/* ── Carte pleine largeur (offre unique, ex: Identité & branding) ── */
.pricing__feature {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  border: 1.5px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
}
.pricing__feature-media { aspect-ratio: 4 / 3; overflow: hidden; }
.pricing__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.pricing__feature:hover .pricing__feature-media img { transform: scale(1.05); }
.pricing__feature-body {
  padding: 40px 32px 44px;
  display: flex;
  flex-direction: column;
}
.pricing__feature-body .pricing__card-list { margin-bottom: 30px; }
.pricing__feature-cta { align-self: flex-start; }

@media (min-width: 780px) {
  .pricing__feature { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
  .pricing__feature-media { aspect-ratio: auto; }
  .pricing__feature-body { justify-content: center; padding: 48px 56px; }
  .pricing__feature-body .pricing__card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 14px;
  }
}

.pricing__note {
  text-align: center;
  max-width: var(--container);
  margin: 34px auto 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.pricing__mini-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pricing__mini {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1.5px solid var(--line-light);
}
.pricing__mini picture { display: block; width: 100%; height: 100%; }
.pricing__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease);
}
.pricing__mini:hover img { transform: scale(1.07); }
.pricing__mini-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 18px;
  background: linear-gradient(to top, rgba(23,24,26,0.88) 4%, rgba(23,24,26,0.25) 55%, transparent 100%);
}
.pricing__mini-overlay span { font-size: 0.82rem; color: rgba(255,255,255,0.75); }
.pricing__mini-overlay strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--yellow); }

.pricing__deroule {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
}
.pricing__deroule .link-arrow { display: inline-flex; margin-top: 12px; }

@media (min-width: 640px) {
  .pricing__grid { grid-template-columns: 1fr 1fr; }
  .pricing__mini-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .pricing__grid--three { grid-template-columns: repeat(3, 1fr); }
  .pricing__mini-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════ PHOTOGRAPHIE — LE DÉFILÉ ════════════════════ */
.pgallery {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: 58px 0 62px;
  overflow: hidden;
}
.pgallery__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pgallery__head {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto 30px;
  padding: 0 24px;
}
.pgallery__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: .01em;
  max-width: 20ch;
  margin: 12px 0 0;
}
.pgallery__hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.pgallery__dot { color: var(--yellow); }
.pgallery__lead {
  color: rgba(255,255,255,.66);
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.6;
}

.pgallery__rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Deux mondes : Particuliers / Entreprises ── */
.pworld { position: relative; }
/* séparateur fin entre les deux mondes */
.pworld--pro { padding-top: 24px; }
.pworld--pro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: var(--container);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(46,45,45,.16), transparent);
}
.pworld__head {
  max-width: var(--container);
  margin: 0 auto 14px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
}
/* effet miroir : entreprises alignées à droite */
.pworld--pro .pworld__head { flex-direction: row-reverse; text-align: right; }
/* badge à icône (remplace les numéros) */
.pworld__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.pworld__icon svg { width: 23px; height: 23px; }
.pworld--part .pworld__icon { border: 1.5px solid rgba(46,45,45,.28); color: var(--ink); }
.pworld--pro .pworld__icon { background: var(--yellow); color: var(--ink); }
.pworld__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1;
  letter-spacing: .01em;
  margin: 0 0 7px;
  color: var(--ink);
}
.pworld__tags {
  font-weight: 600;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0;
}

.prow__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.prow__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: pmarquee 48s linear infinite;
}
.prow[data-dir="right"] .prow__track { animation-direction: reverse; }
.pworld--part .prow__track { animation-duration: 62s; }
.pworld--pro .prow__track  { animation-duration: 72s; }
@keyframes pmarquee { to { transform: translateX(-50%); } }

.prow__item {
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  height: 340px;
  margin-right: 18px;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.prow__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.prow:hover .prow__track { animation-play-state: paused; }
.prow__viewport:hover .prow__item:not(:hover) { filter: brightness(.5); }
.prow__item:hover { transform: translateY(-10px) scale(1.04); z-index: 2; }

.pgallery__cta {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .prow__track { animation: none; }
  .prow__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* ════════════════════ À PROPOS ════════════════════ */
.apropos {
  padding: 100px 24px;
  display: grid;
  gap: 50px;
  max-width: var(--container);
  margin: 0 auto;
}
.apropos__visual { display: flex; justify-content: center; }
.apropos__media { width: min(85vw, 490px); }
.apropos__frame {
  position: relative;
  width: 100%;
}
.apropos__thumbs {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}
.apropos__thumbs li {
  flex: 1;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--paper);
  box-shadow: 0 16px 32px -18px rgba(46, 45, 45, .55);
  transition: transform .4s var(--ease);
}
.apropos__thumbs picture { display: block; width: 100%; height: 100%; }
.apropos__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apropos__thumbs li:nth-child(odd)  { transform: rotate(-3deg); }
.apropos__thumbs li:nth-child(even) { transform: rotate(3deg); }
.apropos__thumbs li:hover { transform: translateY(-5px) rotate(0deg); }
.apropos__frame::before {
  content: '';
  position: absolute;
  top: -18px; left: -18px;
  width: 100%; height: 100%;
  background: var(--yellow);
  border-radius: 28px;
  z-index: 0;
  animation: shift 8s var(--ease) infinite alternate;
}
@keyframes shift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(6px, -6px) rotate(-2deg); }
}
.apropos__frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 60px -24px rgba(46,45,45,0.35);
}
.apropos__bio { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 56ch; margin-bottom: 30px; }

.apropos__objectif {
  position: relative;
  padding: 26px 28px;
  margin-bottom: 30px;
  max-width: 60ch;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  border-radius: 20px;
  border-left: 4px solid var(--yellow);
}
.apropos__objectif-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.apropos__objectif-title {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 14px;
}
.apropos__objectif-title mark {
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  color: inherit;
  padding: 0 2px;
}
.apropos__objectif-text {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.apropos__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.apropos__chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: .01em;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.apropos__chips li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
}
.apropos__chips li:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.apropos__chips + .link-arrow { margin-top: 40px; }
@media (min-width: 640px) {
  .apropos__chips { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; }
  .apropos__chips li { padding: 8px 14px; font-size: 0.74rem; }
}

/* ════════════════════ CTA FINAL ════════════════════ */
/* ════════════════════ FOOTER + CONTACT (combinés) ════════════════════ */
.site-footer { background: var(--ink); color: var(--white); }

.site-footer__top {
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 24px 80px;
  display: grid;
  gap: 60px;
}

.site-footer__intro { text-align: center; }
.site-footer__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--yellow);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.02;
  margin-bottom: 20px;
}
.site-footer__sub { color: rgba(255,255,255,0.72); font-size: 1.02rem; margin-bottom: 34px; }
.site-footer__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 22px;
}
.site-footer__meta a:hover { color: var(--yellow); }

.site-footer__socials { display: flex; justify-content: center; gap: 16px; }
.site-footer__socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.site-footer__socials svg { width: 18px; height: 18px; }
.site-footer__socials a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

/* Formulaire de contact */
.footer-form-wrap { max-width: 480px; margin: 0 auto; width: 100%; }
.footer-form { display: flex; flex-direction: column; gap: 16px; }
.footer-form__honeypot { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.footer-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.footer-form__field { display: flex; flex-direction: column; gap: 6px; }
.footer-form__field span {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
}
.footer-form__field input,
.footer-form__field select,
.footer-form__field textarea {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--line-light);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  transition: border-color .25s ease, background .25s ease;
}
.footer-form__field input::placeholder,
.footer-form__field textarea::placeholder { color: rgba(255,255,255,0.38); }
.footer-form__field input:focus,
.footer-form__field select:focus,
.footer-form__field textarea:focus {
  outline: none;
  border-color: var(--yellow);
  background: rgba(255,255,255,0.1);
}
.footer-form__field textarea { resize: vertical; min-height: 100px; }
.footer-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.footer-form__field select:invalid { color: rgba(255,255,255,0.38); }
.footer-form__field select option { color: var(--ink); background: var(--white); }
@media (max-width: 520px) {
  .footer-form__row { grid-template-columns: 1fr; }
}

.footer-form__submit {
  justify-content: center;
  margin-top: 4px;
}
.footer-form__submit svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.footer-form__submit:hover svg { transform: translateX(4px); }
.footer-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.footer-form__legal { font-size: 0.76rem; color: rgba(255,255,255,0.45); text-align: center; }

.footer-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px 24px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--line-light);
  border-radius: 18px;
}
.footer-form__success[hidden] { display: none; }
.footer-form__success-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.footer-form__success p { color: rgba(255,255,255,0.8); font-size: 0.95rem; }

/* Bandeau bas : logo, nav, mentions */
.site-footer__bottom {
  border-top: 1px solid var(--line-light);
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  color: rgba(255,255,255,0.55);
}
.site-footer__logo { height: 28px; width: auto; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; font-size: 0.85rem; }
.site-footer__nav a:hover { color: var(--yellow); }
.site-footer__legal { font-size: 0.78rem; }
.site-footer__rega {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: underline;
  opacity: .85;
  transition: opacity .25s ease;
}
.site-footer__rega:hover { opacity: 1; }
.site-footer__rega-logo { height: 15px; width: auto; vertical-align: middle; }

@media (min-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; align-items: center; text-align: left; }
  .site-footer__intro { text-align: left; }
  .site-footer__actions { justify-content: flex-start; }
  .site-footer__meta { align-items: flex-start; }
  .site-footer__socials { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — tablette (≥ 640px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .apropos { grid-template-columns: minmax(220px, 430px) 1fr; align-items: center; }
  .apropos__visual { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — desktop (≥ 900px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1180px) {
  .site-header__nav ul { gap: 14px; }
  .site-header__nav a { font-size: 0.82rem; }
  .site-header__inner { gap: 10px; }
}

@media (min-width: 900px) {
  .site-header__nav { display: block; }
  .burger { display: none; }

  /* Aligne le menu avec le bord droit de la photo du hero (qui déborde) */
  .site-header__inner { transform: translateX(clamp(0px, calc((100vw - var(--container)) / 2 + 20px), 130px)); }


  /* ── HERO desktop ── */
  .hero { padding: 38px 40px 88px; }
  .hero__inner { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .hero__kicker { white-space: nowrap; }
  .hero__visual { margin-top: 84px; width: auto; justify-self: end; margin-right: -130px; }
  .hero__cut { width: 100%; max-width: 500px; aspect-ratio: 4 / 5; }
  .hero__disc { width: 100%; max-width: 500px; }
  .hero__spin { left: -26px; bottom: -22px; width: 116px; height: 116px; }

  .hero__cluster {
    display: flex; flex-direction: column; gap: 12px;
    position: absolute; left: 56%; top: 50%;
    transform: translate(-50%, -50%);
    width: 128px; z-index: 0;
  }
  .hero__cluster img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 14px;
    border: 3px solid var(--paper);
    box-shadow: 0 16px 32px -18px rgba(46, 45, 45, .55);
  }
  .hero__cluster img:nth-child(odd)  { transform: rotate(-3deg); }
  .hero__cluster img:nth-child(even) { transform: rotate(3deg); }

  .univers { padding: 120px 40px 60px; }
  .univers__grid { grid-template-columns: repeat(2, 1fr); gap: 84px; }
  .univers__card { padding: 56px 44px; }

  .services { padding: 60px 40px 140px; }

  .pgallery { padding: 72px 0 78px; }

  .apropos { padding: 140px 40px; grid-template-columns: 510px 1fr; }
  .apropos__visual { margin-left: -40px; }
  .apropos__text { padding-left: 90px; }

  .site-footer__top { padding: 150px 40px 90px; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — mobile nav (< 900px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .burger { display: flex; }
  .site-header__nav {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--paper);
    padding: 40px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .site-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .site-header__nav ul { flex-direction: column; gap: 26px; }
  .site-header__nav a { font-size: 1.3rem; }
  .site-header__side .btn--sm { display: none; }
}

@media (min-width: 900px) {
  .site-header__nav { position: static; background: none; padding: 0; opacity: 1; visibility: visible; transform: none; }
}