/*
Theme Name: Scopu
Theme URI: https://scopu.fr
Author: SCOPU
Author URI: https://scopu.fr
Description: Thème WordPress sur-mesure pour SCOPU — agence de communication pour artisans, indépendants, TPE et PME. Pas de page builder : PHP + CSS + JS vanilla, sans dépendance externe.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Propriétaire
Text Domain: scopu
*/

/* DM Sans — self-hosted (vendored from @fontsource/dm-sans) so no request
   to Google's servers is made and no visitor IP is shared without consent. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/dm-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dm-sans-700.woff2') format('woff2');
}

/* ---------------------------------------------
   Lenis (smooth scroll) — vendored companion CSS from
   js/vendor/lenis.min.js, verbatim from the library's dist/lenis.css.
   Lenis itself is only instantiated under normal motion preference
   (see main.js), but this CSS is inert until the `lenis` class is
   present so it's safe to always include.
--------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---------------------------------------------
   Design tokens — see design-system/scopu/MASTER.md
   and design-system/scopu/pages/accueil.md
--------------------------------------------- */
:root {
  --color-bg: #FFFFFF;
  --color-fg: #0A0A0A;
  --color-muted-bg: #F7F7F7;
  --color-muted-fg: #6B6B6B;
  --color-border: #E5E5E5;
  --color-accent: #2A2D34;
  --color-inverse-bg: #0A0A0A;
  --color-inverse-fg: #FFFFFF;

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-card-rest: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.08);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 200ms;
  --motion-base: 300ms;
  --motion-slow: 500ms;

  --header-h: 80px;
  --container-max: 1200px;
}

/* ---------------------------------------------
   Reset
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* <picture> (WebP + JPG fallback) generates no box of its own, so the
   <img> inside sizes/positions exactly as if the wrapper weren't
   there — no layout rule anywhere needs to know it exists. */
picture { display: contents; }
/* Visually invisible but announced by screen readers/kept in the
   document outline — used only to give a section a real heading level
   without adding visible text (see the accessibility heading-order
   fixes on Services/Dotation). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-lg); }
}

/* Focus visibility (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------
   Buttons
--------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-fg);
  color: var(--color-inverse-fg);
}
.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-fg);
  padding: 13px 27px;
}
.btn-secondary:hover { background: var(--color-fg); color: var(--color-inverse-fg); }

.btn-inverse {
  background: var(--color-inverse-fg);
  color: var(--color-fg);
}
.btn-inverse:hover { opacity: 0.85; }

.btn-text {
  padding: 0;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  gap: var(--space-xs);
}
.btn-text:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-text svg { transition: transform var(--motion-fast) var(--ease); }
.btn-text:hover svg { transform: translateX(3px); }

/* ---------------------------------------------
   Header
--------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
}
/* Blur lives on a pseudo-element, not on .site-header itself: filter/backdrop-filter
   on an element creates a new containing block for its position:fixed descendants,
   which would trap the full-screen mobile nav overlay inside the 80px header box. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.site-header.is-scrolled::before {
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.header-logo img, .header-logo svg { height: 24px; width: auto; display: block; }

.header-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2xl);
}
.header-nav a {
  font-size: 0.95rem;
  color: var(--color-fg);
  position: relative;
  padding: var(--space-xs) 0;
}
.header-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-fast) var(--ease);
}
.header-nav a:hover::after,
.header-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta { display: flex; align-items: center; }
.header-cta .btn { padding: 11px 22px; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-fg);
  margin: 5px 0;
  transition: transform var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .header-nav {
    position: fixed;
    inset: 0;
    left: 0;
    transform: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xl);
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-base) var(--ease);
  }
  .header-nav a { font-size: 1.5rem; }
  .nav-open .header-nav { opacity: 1; visibility: visible; }
  .header-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ---------------------------------------------
   Intro splash (homepage only) — full-screen S mark that shrinks and
   fades away as the visitor scrolls, revealing the header/hero
   underneath. Progress is driven by scroll position in main.js, not
   CSS, so it tracks the scroll 1:1 instead of firing once.
--------------------------------------------- */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-inverse-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.intro-splash-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vw, 22px);
}
.intro-mark {
  width: clamp(56px, 10vw, 110px);
  height: auto;
  color: var(--color-inverse-fg);
  overflow: visible;
}
/* Resting state = fully drawn/filled (the entrance choreography in
   main.js hides this first, via GSAP, then reveals it — so a page
   with JS disabled or GSAP failing to load still shows a complete,
   correct mark instead of an invisible/half-drawn one). pathLength="1"
   on the markup normalizes the dash math for the draw-in tween. */
.intro-mark path {
  fill: currentColor;
  fill-opacity: 1;
  stroke: currentColor;
  stroke-opacity: 0;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Resumed once the GSAP entrance timeline completes. */
.intro-mark.is-idle {
  animation: intro-mark-idle 3.4s ease-in-out infinite;
}

.intro-wordmark {
  width: clamp(110px, 20vw, 220px);
  height: auto;
  color: var(--color-inverse-fg);
}
.intro-wordmark path { fill: currentColor; }

.intro-tagline {
  color: var(--color-inverse-fg);
  opacity: 0.72;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.04em;
  text-align: center;
}

@keyframes intro-mark-idle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-splash,
  .intro-splash-spacer {
    display: none;
  }
}

/* ---------------------------------------------
   Hero
--------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
}
.hero .container {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.hero-kicker {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--color-muted-fg);
  margin-bottom: var(--space-lg);
  font-weight: 500;
  text-transform: uppercase;
}
.hero-title {
  font-size: clamp(2.1rem, 4.6vw, 4.1rem);
  line-height: 1.08;
  margin-bottom: var(--space-lg);
  overflow-wrap: break-word;
}
.hero-text {
  font-size: 1.1rem;
  color: var(--color-muted-fg);
  max-width: 32rem;
  margin-bottom: var(--space-2xl);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ---------------------------------------------
   Hero composition — a dominant site window with two smaller real
   pieces (business card, print catalogue) tucked behind/in front of
   it. A first pass with a 4th purely-decorative "brand cover" card
   (just the S mark, no real content) read as unclear clutter — "le
   site c'est good... mais le reste on sait pas à quoi ça correspond" —
   so it was dropped for good; the two pieces kept here are each
   real, identifiable work (a name+contact card, a captioned print
   piece), not abstract decoration. A single-piece version was tried
   next but felt too empty ("ça fait vide, il manque des choses à
   voir") — this is the middle ground: enough to fill the space and
   show range, nothing left unlabeled.
   See design-system/scopu/pages/accueil.md for the full rationale.
--------------------------------------------- */
.hero-visual {
  position: relative;
  height: clamp(480px, 58vw, 620px);
}
.hero-composition {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-piece {
  position: absolute;
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  background: var(--color-bg);
  transform: rotate(var(--r, 0deg));
  transition: transform 300ms var(--ease);
}
.hero-piece:hover { transform: rotate(var(--r, 0deg)) translateY(-10px); }

/* The dominant piece: large, on top, anchors the whole composition. */
.hero-piece--site {
  --r: 1.5deg;
  --d: 140ms;
  width: 80%;
  aspect-ratio: 4 / 3;
  top: 0;
  right: 0;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.hero-piece--site .hero-piece-chrome {
  height: 30px;
  flex-shrink: 0;
  background: var(--color-muted-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}
.hero-piece--site .hero-piece-chrome span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.hero-piece--site img { flex: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-piece--site figcaption {
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: 0.72rem;
  color: #fff;
  background: rgba(10, 10, 10, 0.55);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}

/* SCOPU's own business card — real print mockup photo (supplied by
   Florent, replaces the earlier CSS-built black card with SVG + text). */
.hero-piece--card {
  --r: 4deg;
  --d: 260ms;
  width: 34%;
  aspect-ratio: 4 / 3;
  left: 0;
  top: 56%;
  z-index: 3;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
.hero-piece--card img { flex: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-piece--card figcaption {
  position: absolute;
  left: 10px; bottom: 8px;
  font-size: 0.66rem;
  color: #fff;
  background: rgba(10, 10, 10, 0.55);
  padding: 2px 8px;
  border-radius: 16px;
  letter-spacing: 0.01em;
}

/* A print piece (DBC Concept catalogue) — captioned this time, unlike
   the earlier version, so it's never just an unlabeled photo. */
.hero-piece--catalogue {
  --r: -3deg;
  --d: 360ms;
  width: 46%;
  aspect-ratio: 1.6;
  right: 2%;
  top: 48%;
  z-index: 4;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
.hero-piece--catalogue img { flex: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hero-piece--catalogue figcaption {
  position: absolute;
  left: 10px; top: 8px;
  font-size: 0.66rem;
  color: #fff;
  background: rgba(10, 10, 10, 0.55);
  padding: 2px 8px;
  border-radius: 16px;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .hero-piece { transition: none; }
  .hero-piece:hover { transform: rotate(var(--r, 0deg)); }
}

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { height: clamp(420px, 92vw, 520px); order: -1; margin-bottom: var(--space-xl); }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-3xl); }
}

@media (max-width: 540px) {
  .hero-visual { height: clamp(300px, 82vw, 380px); }
  .hero-piece--card { width: 40%; left: 0; }
  .hero-piece--catalogue { width: 56%; }
}

/* ---------------------------------------------
   Scroll showcase — a browser-frame mockup that un-tilts and scales up
   to full size as the section scrolls into view (perspective + rotateX
   card, à la Apple/Linear product pages). Progress is computed from
   the card's position in the viewport on scroll, in main.js — no
   animation library, same technique as the hero phone/intro splash.
--------------------------------------------- */
.scroll-showcase { overflow: hidden; }
.scroll-showcase-stage {
  perspective: 1400px;
  padding: var(--space-2xl) 0 var(--space-lg);
}
.scroll-showcase-card {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  transform: rotateX(22deg) scale(0.9);
  transform-origin: center top;
  will-change: transform;
}
.scroll-showcase-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: var(--color-muted-bg);
  border-bottom: 1px solid var(--color-border);
}
.scroll-showcase-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.scroll-showcase-body {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.scroll-showcase-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-showcase-card { transform: none; }
}

@media (max-width: 640px) {
  .scroll-showcase-card { transform: rotateX(14deg) scale(0.88); }
}

/* ---------------------------------------------
   Section scaffolding
--------------------------------------------- */
.section { padding: var(--space-4xl) 0; }
.section-tight { padding: var(--space-3xl) 0; }
.section-muted { background: var(--color-muted-bg); }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 36rem; }
.section-eyebrow {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-fg);
  margin-bottom: var(--space-md);
}

@media (max-width: 720px) {
  .section { padding: var(--space-2xl) 0; }
  .section-tight { padding: var(--space-xl) 0; }
  .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-xl); }
}

/* Presentation */
.presentation { max-width: 44rem; }
.presentation p { font-size: 1.15rem; color: var(--color-muted-fg); margin-top: var(--space-lg); }

/* ---------------------------------------------
   Domaines de réalisation — tabbed video showcase (below the hero).
   Tabs choose which <video> shows in the stage; switching wipes the
   new one in top-to-bottom via clip-path (see main.js), not a plain
   crossfade — one discreet directional reveal, no bounce, no color.
--------------------------------------------- */
.domains-shell {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.domains-tabs {
  display: flex;
  flex-direction: column;
}
.domains-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
  cursor: pointer;
  font-family: inherit;
}
.domains-tabs .domains-tab:last-child { border-bottom: 1px solid var(--color-border); }
.domains-tab-index {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-fg);
  margin-bottom: var(--space-sm);
}
.domains-tab-label {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-fg);
  opacity: 0.4;
  transition: opacity var(--motion-fast) var(--ease);
}
.domains-tab-text {
  display: block;
  font-size: 0.92rem;
  color: var(--color-muted-fg);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease), margin-top var(--motion-base) var(--ease);
}
.domains-tab.is-active .domains-tab-label { opacity: 1; }
.domains-tab.is-active .domains-tab-text { max-height: 4rem; opacity: 1; margin-top: var(--space-xs); }

.domains-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-float);
  background: var(--color-muted-bg);
}
.domains-video {
  position: absolute;
  inset: 0;
  clip-path: inset(0% 0% 100% 0%);
}
.domains-video.is-active { clip-path: inset(0% 0% 0% 0%); z-index: 2; }
.domains-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .domains-shell { grid-template-columns: 1fr; gap: var(--space-xl); }
  .domains-tabs { flex-direction: row; }
  .domains-tab { border-top: none; border-bottom: 2px solid var(--color-border); padding: var(--space-md) var(--space-sm); text-align: center; }
  .domains-tabs .domains-tab:last-child { border-bottom: 2px solid var(--color-border); }
  .domains-tab.is-active { border-bottom-color: var(--color-fg); }
  .domains-tab-index { display: none; }
  .domains-tab-label { font-size: 0.92rem; }
  .domains-tab-text { display: none; }
  .domains-stage { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .domains-video { transition: none; }
  .domains-tab-label, .domains-tab-text { transition: none; }
}

/* ---------------------------------------------
   Services cards
--------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.service-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card-rest);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border);
}
.service-card .icon {
  width: 32px; height: 32px;
  margin-bottom: var(--space-lg);
  stroke: var(--color-fg);
}
.service-card h3 { font-size: 1.1rem; margin-bottom: var(--space-sm); }
.service-card p { margin: 0; color: var(--color-muted-fg); font-size: 0.95rem; }

@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}
/* 3-card variant (Services overview page's "complementary" section) —
   only overrides the desktop column count; the 960px/560px rules
   above already apply since .services-grid stays on the element too. */
.services-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------
   Service overview cards (image + title + text + link) — Services
   page's 4 main services, one level richer than .service-card (which
   stays icon-only, used for the homepage teaser and the "complémentaire"
   section below).
--------------------------------------------- */
.service-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.service-overview-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-card-rest);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.service-overview-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.service-overview-card-image { aspect-ratio: 4 / 3; }
.service-overview-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-overview-card-body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.service-overview-card-body h3 { font-size: 1.15rem; }
.service-overview-card-body p { margin: 0; color: var(--color-muted-fg); font-size: 0.95rem; flex: 1; }
.service-overview-card-body .btn-text { align-self: flex-start; margin-top: var(--space-sm); }

@media (max-width: 720px) {
  .service-overview-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------
   Fil d'Ariane (pages détaillées des services)
--------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-muted-fg);
  margin-bottom: var(--space-xl);
}
.breadcrumb a { color: var(--color-muted-fg); }
.breadcrumb a:hover { color: var(--color-fg); }
.breadcrumb span[aria-current] { color: var(--color-fg); }

/* ---------------------------------------------
   FAQ (<details>/<summary>, pas de JS)
--------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  max-width: 42rem;
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.05rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-muted-fg);
  transition: transform var(--motion-fast) var(--ease);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 var(--space-lg); color: var(--color-muted-fg); line-height: 1.7; }

/* ---------------------------------------------
   Work / Réalisations — two-column grid
--------------------------------------------- */
/* Used on both the homepage teaser and the full Réalisations page
   (scopu_render_work_columns()). Each column is its own endlessly
   looping vertical strip (.vgallery, see main.js) — the grid IS the
   carousel now, so there's exactly one réalisations display per page,
   not a static grid plus a separate duplicate banner above it. */
.work-scroll-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 720px) {
  .work-scroll-columns { grid-template-columns: 1fr; }
}

.work-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
}
.work-card .work-media {
  width: 100%; height: 100%;
  transition: transform var(--motion-slow) var(--ease);
}
.work-card .work-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.work-card:hover .work-media { transform: scale(1.03); }

/* Name + description sit permanently on every card (not hover-only —
   a caption you can only see by hovering a photo that never stops
   moving, or by tapping a touchscreen with no hover at all, isn't a
   caption anyone can actually read). The gradient keeps the top of
   the photo clear while still giving the text reliable contrast. */
.work-card .work-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.65), rgba(10, 10, 10, 0.05) 60%, rgba(10, 10, 10, 0) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
}

.work-card .work-info {
  color: #fff;
}
.work-info .work-name { font-weight: 600; font-size: 1.05rem; }
.work-info .work-meta { font-size: 0.85rem; opacity: 0.85; }

/* Each .work-scroll-col is also a .vgallery: an endlessly looping
   vertical strip (main.js runs one independent loop per column) built
   as a straight vertical port of .atelier-gallery below — same mouse
   drag-to-scroll, same setPointerCapture — after native-scroll-only
   handling proved unreliable on real mouse hardware. No scroll-snap
   here (unlike .atelier-gallery) — a native snap correction firing the
   instant autoplay pauses on touchdown is a likely cause of taps
   failing to register as a click, since content settling into place
   right under the finger reads to the browser as a scroll gesture, not
   a tap. Card height comes from .work-card's own 4:3 aspect-ratio at
   the column's width (not a fixed short height), so photos never get
   cropped into a squashed letterbox — the column is just tall enough
   to comfortably show about two cards at a time. */
.vgallery {
  cursor: grab;
  /* Without this, main.js's offsetTop-based measurements (where a card
     sits, where the loop should wrap) are relative to whatever ancestor
     the browser picks as the offsetParent — normally fine, except the
     .reveal section wrapping this grid briefly has a transform during
     its entrance animation, which makes IT the offsetParent... until
     main.js clears that transform once the animation finishes, at
     which point the offsetParent (and therefore every offsetTop
     reading) silently changes. That one-time jump was corrupting the
     loop's wrap threshold shortly after page load, letting the strip
     scroll hundreds of pixels past where the loop should have wrapped
     — the actual cause of a real "can't click" report, not a timing
     fluke. position: relative pins this element as the offsetParent
     itself, so its children's offsetTop always means "distance from
     the top of this scrollable strip," regardless of what any ancestor
     is doing. */
  position: relative;
  height: clamp(560px, 44vw, 820px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.vgallery.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.vgallery .work-card {
  flex: 0 0 auto;
  width: 100%;
}
@media (max-width: 720px) {
  .vgallery { height: clamp(460px, 105vw, 640px); }
}
@media (prefers-reduced-motion: reduce) {
  .vgallery { scroll-behavior: auto; }
}

/* Réalisations page only: horizontal filmstrip for a photo-reportage
   project (several photos from one shoot, not separate clients) — a
   deliberate change of rhythm from the vertical up/down columns right
   above it. .atelier-gallery-bleed breaks out of .container to run
   edge-to-edge; the inner padding realigns the first photo with the
   rest of the page's content on wide screens. Touch/trackpad scrolling
   works natively (overflow-x + scroll-snap); main.js adds mouse-drag
   and wheel support for desktop pointer/mouse users only, so it never
   fights the browser's own touch-scroll handling on iPad. */
.atelier-gallery-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.atelier-gallery {
  /* position: relative for the same reason as .vgallery above: pins
     this element as the offsetParent for its photos, so main.js's
     offsetLeft-based loop math can't be thrown off by the ancestor
     .reveal section's transform appearing/disappearing during its
     entrance animation. */
  position: relative;
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 0 max(var(--space-xl), calc((100vw - var(--container-max)) / 2 + var(--space-xl))) var(--space-md);
}
.atelier-gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* Auto-scroll (main.js): snapping otherwise pulls every tiny per-frame
   nudge straight back to the nearest photo edge, cancelling the drift
   entirely — turned off for exactly as long as the tick is playing. */
.atelier-gallery.is-autoplaying { scroll-snap-type: none; }
.atelier-gallery .atelier-photo {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: min(62vh, 520px);
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: block;
  cursor: pointer;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}
.atelier-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-slow) var(--ease);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.atelier-gallery .atelier-photo:hover img { transform: scale(1.03); }
/* The two long-exposure shots read as texture/atmosphere rather than
   clear documentation — kept narrower so they accent instead of confuse. */
.atelier-gallery-accent { aspect-ratio: 2 / 5; }

@media (max-width: 720px) {
  .atelier-gallery .atelier-photo { height: min(55vh, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-gallery { scroll-behavior: auto; }
}

.section-cta-link { display: flex; align-items: center; }

/* ---------------------------------------------
   Réalisations — lightbox ("agrandir" un projet)
--------------------------------------------- */
body.lightbox-open { overflow: hidden; }
.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-base) var(--ease), visibility 0s linear var(--motion-base);
}
.work-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--motion-base) var(--ease);
}
.work-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.7);
  cursor: pointer;
}
.work-lightbox-panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  max-width: 900px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--motion-base) var(--ease);
}
.work-lightbox.is-open .work-lightbox-panel { transform: translateY(0) scale(1); }
.work-lightbox-media { aspect-ratio: 4 / 3; background: var(--color-muted-bg); }
.work-lightbox-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.work-lightbox-close:hover { background: var(--color-fg); color: var(--color-inverse-fg); }
.work-lightbox-info { padding: var(--space-xl); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.work-lightbox-name { font-size: 1.4rem; font-weight: 600; }
.work-lightbox-meta { color: var(--color-muted-fg); }
.work-lightbox-link { margin-top: var(--space-md); }
.work-lightbox-link[hidden] { display: none; }

@media (max-width: 640px) {
  .work-lightbox { padding: var(--space-md); }
  .work-lightbox-panel { max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
  .work-lightbox, .work-lightbox-panel { transition: none; }
}

/* ---------------------------------------------
   Cookie / RGPD information banner
--------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 250;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-fg);
  color: var(--color-inverse-fg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  transform: translateY(calc(100% + var(--space-lg)));
  opacity: 0;
  transition: transform var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease);
  pointer-events: none;
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner p { flex: 1 1 18rem; font-size: 0.9rem; line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.8); }
.cookie-banner a { color: var(--color-inverse-fg); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner .btn-primary { flex: 0 0 auto; background: var(--color-inverse-fg); color: var(--color-fg); }
.cookie-banner .btn-primary:hover { opacity: 0.85; }

@media (max-width: 640px) {
  .cookie-banner { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* ---------------------------------------------
   Timeline
--------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.timeline--3 { grid-template-columns: repeat(3, 1fr); }
.timeline::before {
  content: '';
  position: absolute;
  top: 1.4rem;
  left: 0; right: 0;
  height: 1px;
  background: var(--color-border);
}
.timeline-step {
  position: relative;
  padding-right: var(--space-xl);
}
.timeline-number {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-bg);
  width: 2.8rem;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}
.timeline-step h3 { font-size: 1.05rem; margin-bottom: var(--space-sm); }
.timeline-step p + p { margin-top: var(--space-sm); }
.timeline-step p { margin: 0; color: var(--color-muted-fg); font-size: 0.92rem; }

@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .timeline::before { display: none; }
  .timeline-step { padding-right: 0; padding-left: var(--space-xl); border-left: 1px solid var(--color-border); }
  .timeline-number { position: static; }
}

/* ---------------------------------------------
   CTA final
--------------------------------------------- */
.cta-final {
  position: relative;
  background: var(--color-inverse-bg);
  color: var(--color-inverse-fg);
  text-align: center;
  padding: var(--space-4xl) 0;
  overflow: hidden;
  isolation: isolate;
}
.cta-final h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-md); }
.cta-final p { color: rgba(255, 255, 255, 0.65); margin-bottom: var(--space-sm); }
.cta-final p:last-of-type { margin-bottom: var(--space-2xl); }
.cta-final-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
/* .btn-text is styled for dark text on a light page background by
   default — this overrides it for use inside .cta-final, whose
   background is dark, so the link stays legible. */
.cta-final .btn-text { color: var(--color-inverse-fg); border-color: rgba(255, 255, 255, 0.35); }
.cta-final .btn-text:hover { color: var(--color-inverse-fg); opacity: 0.75; border-color: var(--color-inverse-fg); }

/* ---------------------------------------------
   Footer
--------------------------------------------- */
.site-footer {
  padding: var(--space-3xl) 0 var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}
.footer-brand img, .footer-brand svg { height: 20px; margin-bottom: var(--space-md); width: auto; }
.footer-brand p { color: var(--color-muted-fg); font-size: 0.9rem; max-width: 18rem; }
.footer-social { display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-fg);
  transition: color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
.footer-social a svg { height: 18px; width: 18px; margin: 0; }
.footer-social a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.footer-col h3 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-weight: 500;
  /* Neutralizes the global h1,h2,h3{line-height:1.1} rule (this was a
     <h4> until the accessibility heading-order fix below): keeps the
     line-height this element already had (inherited from body) so the
     tag change is invisible. */
  line-height: 1.6;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col a, .footer-col span { font-size: 0.92rem; }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-muted-fg);
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------
   Reveal-on-scroll (progressive enhancement, JS toggles .is-visible)
--------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-disabled .reveal,
.no-js .reveal { opacity: 1; transform: none; }

/* ---------------------------------------------
   Page hero (Réalisations / Contact)
--------------------------------------------- */
.page-hero {
  padding: calc(var(--header-h) + var(--space-3xl)) 0 var(--space-2xl);
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-md); }
.page-hero p { color: var(--color-muted-fg); font-size: 1.1rem; max-width: 36rem; margin: 0; }
.page-hero p + p { margin-top: var(--space-sm); }
.dotation-logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}

/* ---------------------------------------------
   404
--------------------------------------------- */
.error-404 {
  padding-top: calc(var(--header-h) + var(--space-3xl));
  text-align: center;
}
.error-404-code {
  display: block;
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-border);
}
.error-404 h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: var(--space-md) 0; }
.error-404 p { color: var(--color-muted-fg); font-size: 1.1rem; max-width: 34rem; margin: 0 auto var(--space-2xl); }
.error-404-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

/* ---------------------------------------------
   Legal content (Mentions légales / Confidentialité)
--------------------------------------------- */
.legal-content { max-width: 42rem; }
.legal-content h2 { font-size: 1.25rem; margin: var(--space-2xl) 0 var(--space-sm); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--color-muted-fg); line-height: 1.7; }
.legal-content a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 2px; }
.legal-fields { list-style: none; padding: 0; margin: 0 0 var(--space-lg); color: var(--color-muted-fg); line-height: 1.8; }
.legal-fields strong { color: var(--color-fg); font-weight: 600; }

/* ---------------------------------------------
   Contact page
--------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form-field { display: flex; flex-direction: column; gap: var(--space-sm); }
.form-field label { font-size: 0.9rem; font-weight: 500; }
.form-field .optional { color: var(--color-muted-fg); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-fg);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}
.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.checkbox-group label { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.92rem; font-weight: 400; }
.checkbox-group input { width: auto; }

.contact-info { border-left: 1px solid var(--color-border); padding-left: var(--space-2xl); }
.contact-info .info-label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-fg); margin: 0 0 var(--space-md); font-weight: 500; }
.contact-info .info-item { margin-bottom: var(--space-xl); }
.contact-info .info-item a, .contact-info .info-item span { font-size: 1.05rem; }

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-info { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-2xl); }
}

/* Full-width photo banner below the form (Florent's own landscape photo)
   instead of a stock video — desaturated to match the site's black &
   white palette, with a slow, subtle drift so it doesn't sit dead still. */
.photo-banner {
  width: 100%;
  height: clamp(220px, 26vw, 320px);
  margin-top: var(--space-3xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.photo-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.08);
  animation: photo-banner-drift 18s ease-in-out infinite alternate;
}
@keyframes photo-banner-drift {
  0% { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1.5%); }
}

/* ---------------------------------------------
   Split hero (text + photo, 2 columns) — reused by the À propos page
   and the 4 Services detail pages wherever a hero needs a photo next
   to the title/text (unlike the plain .page-hero used on pages
   without one).
--------------------------------------------- */
.split-hero { padding-top: calc(var(--header-h) + var(--space-2xl)); }
.split-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-3xl);
  align-items: center;
}
.split-hero-content h1 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--space-sm) 0 var(--space-md); }
.split-hero-text { color: var(--color-muted-fg); font-size: 1.1rem; max-width: 32rem; }
.split-hero-content .btn { margin-top: var(--space-md); }
.split-hero-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.split-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Landscape crop for mockup/reportage photos (Services detail pages)
   instead of the square portrait crop used for Florent's own photo. */
.split-hero-photo--wide { aspect-ratio: 4 / 3; }

/* Left-aligned ~42rem reading column for body copy — reused across
   the À propos and Services pages wherever a section is mostly prose.
   Not centered: it sits flush with the container's left edge so it
   lines up with a left-aligned heading above it (e.g. .page-hero h1).
   Gap alone controls the vertical rhythm between children — every
   child below has its own margin reset to 0 so spacing never doubles
   up with a default browser margin on top of the flex gap. */
.prose-block { max-width: 42rem; display: flex; flex-direction: column; gap: var(--space-md); }
.prose-block p { font-size: 1.05rem; margin: 0; }
.prose-block .section-title { margin: 0 0 var(--space-xs); }

.apropos-quote {
  max-width: 34rem;
  margin: var(--space-2xl) auto;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.apropos-quote p {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.apropos-vision { max-width: 42rem; margin: 0 auto; text-align: center; }
.apropos-vision .section-title { margin-bottom: var(--space-md); }
.apropos-vision p { color: var(--color-muted-fg); font-size: 1.1rem; }
/* Bulleted list with a small circular marker (no default browser
   bullets) — reused across the À propos and Services pages. */
.content-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}
.content-list li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-fg);
  font-size: 1rem;
}
.content-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-fg);
}

@media (max-width: 720px) {
  .split-hero-grid { grid-template-columns: 1fr; }
  .split-hero-photo { order: -1; }
  .split-hero-photo:not(.split-hero-photo--wide) { max-width: 280px; margin: 0 auto; }
}

.form-consent { font-size: 0.85rem; color: var(--color-muted-fg); margin: 0; }
.form-consent a { text-decoration: underline; color: inherit; }
.form-consent a:hover { color: var(--color-fg); }

.form-status {
  font-size: 0.9rem;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  display: none;
}
.form-status.is-success { display: block; background: var(--color-muted-bg); }
.form-status.is-error { display: block; background: var(--color-muted-bg); border-left: 3px solid #C0392B; }

/* Honeypot (functions.php scopu_handle_contact_form()): off-screen for
   real visitors, not display:none/visibility:hidden — some spam bots
   specifically skip fields hidden that way, defeating the trap. */
.scopu-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }