:root {
 --bg: #080808;
 --bg-elevated: #111111;
 --ink: #f4f2ef;
 --muted: #b7b3ab;
 --line: rgba(244, 242, 239, 0.14);
 --red: #dc2626;
 --red-deep: #b91c1c;
 --radius: 2px;
 --header-h: 72px;
 --ease: cubic-bezier(0.22, 1, 0.36, 1);
 --font-display: "Big Shoulders Display", Impact, sans-serif;
 --font-body: "IBM Plex Sans", system-ui, sans-serif;
 /* Colonne de lecture centrée (~1180) sur écrans géants / ultrawide */
 --max: 1180px;
 --gutter: clamp(1rem, 4vw, 3rem);
 --shell-pad-left: max(var(--gutter), env(safe-area-inset-left, 0px), calc((100% - var(--max)) / 2));
 --shell-pad-right: max(var(--gutter), env(safe-area-inset-right, 0px), calc((100% - var(--max)) / 2));
 --focus: #f87171;
 --z-header: 50;
 --z-menu: 49;
 --z-fab: 45;
 --z-skip: 100;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
 overflow-x: clip;
}

body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a, button, input, textarea, select, summary { touch-action: manipulation; }

:focus { outline: none; }
:focus-visible {
 outline: 2px solid var(--focus);
 outline-offset: 3px;
}

.sr-only {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.skip-link {
 position: absolute; left: 1rem; top: -4rem; z-index: var(--z-skip);
 padding: 0.75rem 1rem; background: var(--red); color: #fff;
 border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }

.btn {
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 48px; min-width: 48px; padding: 0 1.35rem;
 border: 1px solid transparent; border-radius: var(--radius);
 font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
 text-transform: uppercase; white-space: nowrap; cursor: pointer;
 transition: transform 160ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), opacity 200ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled,
.btn[aria-disabled="true"] {
 opacity: 0.45; cursor: not-allowed; transform: none;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--red-deep); }
.btn--ghost {
 border-color: rgba(255,255,255,0.55); color: #fff;
 background: rgba(0,0,0,0.35);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
 .btn--ghost { backdrop-filter: blur(6px); }
}
.btn--ghost:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--ghost-dark {
 border-color: rgba(255,255,255,0.55);
 color: #fff;
 background: transparent;
}
.btn--ghost-dark:hover:not(:disabled) {
 border-color: #fff;
 background: rgba(255,255,255,0.1);
}

.text-link {
 display: inline-flex; align-items: center; margin-top: 1.5rem; gap: 0.4rem;
 font-size: 0.95rem; font-weight: 500; color: var(--red);
 transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.text-link:hover { gap: 0.7rem; color: #f87171; }
.text-link .icon { width: 1.05em; height: 1.05em; }

/* Phosphor icons */
.icon {
 display: inline-block; flex-shrink: 0;
 width: 1.25rem; height: 1.25rem;
 vertical-align: -0.2em;
 fill: currentColor;
}
.icon--sm { width: 1.05rem; height: 1.05rem; }
.icon--md { width: 1.35rem; height: 1.35rem; }
.icon--lg { width: 1.65rem; height: 1.65rem; }
.icon--accent { color: var(--red); }

.valeurs__featured .icon,
.valeurs__item .icon {
 display: block; width: 1.75rem; height: 1.75rem;
 margin-bottom: 0.85rem; color: var(--red);
}

.contact-card__label {
 display: flex; align-items: center; gap: 0.45rem;
 margin-bottom: 0.3rem;
 font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
 text-transform: uppercase; color: var(--muted);
}
.contact-card__label .icon {
 width: 1rem; height: 1rem; color: var(--red);
}

.social-links {
 display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
 margin: 1rem 0 0; color: var(--muted); font-size: 0.92rem;
}
.social-links a {
 display: inline-flex; align-items: center; gap: 0.4rem;
 min-height: 44px; color: var(--ink);
}
.social-links a:hover { color: var(--red); }
.social-links .icon { width: 1.2rem; height: 1.2rem; }

.atelier__facts dt {
 display: flex; align-items: center; gap: 0.4rem;
}
.atelier__facts dt .icon {
 width: 0.95rem; height: 0.95rem; color: var(--red);
}

.btn .icon {
 width: 1.05rem; height: 1.05rem; margin-right: 0.35rem;
}

/* Header */
.site-header {
 position: fixed; inset: 0 0 auto; z-index: var(--z-header);
 height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
 padding-top: env(safe-area-inset-top, 0px);
 display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem;
 /* Fond full-bleed, contenu (logo + nav + actions) borné à --max et centré */
 padding-left: var(--shell-pad-left);
 padding-right: var(--shell-pad-right);
 transition: background 280ms var(--ease), border-color 280ms var(--ease), backdrop-filter 280ms var(--ease);
 border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.is-solid {
 background: rgba(8,8,8,0.92);
 border-bottom-color: var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
 .site-header.is-scrolled,
 .site-header.is-solid {
 background: rgba(8,8,8,0.78);
 backdrop-filter: blur(14px);
 }
}
@media (prefers-reduced-transparency: reduce) {
 .site-header.is-scrolled,
 .site-header.is-solid {
 background: rgba(8,8,8,0.96);
 backdrop-filter: none;
 }
}
.brand {
 display: inline-flex; align-items: center; gap: 0.75rem; justify-self: start;
 min-height: 44px;
}
.brand img { height: 40px; width: auto; }
.brand__name {
 font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
 letter-spacing: 0.04em; text-transform: uppercase;
}
.nav { display: none; gap: 0.35rem; }
.nav a {
 display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.65rem;
 font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
 text-transform: uppercase; color: rgba(244,242,239,0.82);
 transition: color 200ms var(--ease);
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: var(--red); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.header-social {
 display: none; align-items: center; gap: 0.15rem;
}
.header-social a {
 display: inline-flex; align-items: center; justify-content: center;
 width: 40px; height: 40px; color: rgba(244,242,239,0.72);
 transition: color 200ms var(--ease);
}
.header-social a:hover { color: var(--red); }
.header-social .icon { width: 1.1rem; height: 1.1rem; }
.header-phone {
 display: none; font-size: 0.85rem; font-weight: 500;
 min-height: 44px; align-items: center; gap: 0.4rem; padding: 0 0.5rem;
}
.header-phone .icon { width: 1rem; height: 1rem; }
.nav-toggle {
 position: relative; z-index: 1;
 width: 44px; height: 44px; display: grid; place-content: center;
 border-radius: var(--radius);
}
.nav-toggle__bars {
 display: grid; gap: 7px; width: 22px;
}
.nav-toggle__bar {
 display: block; width: 100%; height: 1.5px; background: #fff;
 transition: transform 280ms var(--ease);
 transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
 transform: translateY(4.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
 transform: translateY(-4.25px) rotate(-45deg);
}

.menu-mobile {
 position: fixed; inset: 0; z-index: var(--z-menu);
 display: flex; flex-direction: column; justify-content: center;
 padding:
  calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem)
  max(1.5rem, env(safe-area-inset-right, 0px))
  max(2rem, env(safe-area-inset-bottom, 0px) + 1rem)
  max(1.5rem, env(safe-area-inset-left, 0px));
 background: #080808;
 opacity: 0; visibility: hidden; pointer-events: none;
 transition: opacity 320ms var(--ease), visibility 320ms var(--ease);
}
.menu-mobile.is-open {
 opacity: 1; visibility: visible; pointer-events: auto;
}
.menu-mobile__inner {
 display: flex; flex-direction: column; gap: 0.15rem;
 max-width: 28rem; width: 100%; margin: 0 auto;
}
.menu-mobile__link {
 display: flex; align-items: center; min-height: 56px;
 padding: 0.35rem 0;
 font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.75rem);
 font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
 line-height: 1; border-bottom: 0;
 color: rgba(244,242,239,0.88);
 opacity: 0; transform: translateY(14px);
 transition: color 200ms var(--ease), opacity 420ms var(--ease), transform 420ms var(--ease);
}
.menu-mobile.is-open .menu-mobile__link {
 opacity: 1; transform: translateY(0);
}
.menu-mobile.is-open .menu-mobile__link:nth-child(1) { transition-delay: 60ms; }
.menu-mobile.is-open .menu-mobile__link:nth-child(2) { transition-delay: 100ms; }
.menu-mobile.is-open .menu-mobile__link:nth-child(3) { transition-delay: 140ms; }
.menu-mobile.is-open .menu-mobile__link:nth-child(4) { transition-delay: 180ms; }
.menu-mobile.is-open .menu-mobile__link:nth-child(5) { transition-delay: 220ms; }
.menu-mobile__link:hover,
.menu-mobile__link:focus-visible { color: #fff; }
.menu-mobile__link[aria-current="page"] { color: var(--red); }
.menu-mobile__footer {
 display: grid; gap: 0.85rem; margin-top: 2rem; padding-top: 1.5rem;
 border-top: 1px solid var(--line);
 opacity: 0; transform: translateY(12px);
 transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.menu-mobile.is-open .menu-mobile__footer {
 opacity: 1; transform: translateY(0); transition-delay: 260ms;
}
.menu-mobile__phone {
 display: inline-flex; align-items: center; gap: 0.45rem;
 min-height: 44px; font-size: 1.05rem; font-weight: 500; color: var(--muted);
}
.menu-mobile__phone:hover { color: #fff; }
.menu-mobile__footer .btn { width: 100%; border-bottom: 0; }
.menu-mobile__social {
 display: flex; align-items: center; gap: 0.35rem;
}
.menu-mobile__social a {
 display: inline-flex; align-items: center; justify-content: center;
 width: 48px; height: 48px;
 border: 1px solid var(--line); border-radius: var(--radius);
 color: var(--muted);
 transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.menu-mobile__social a:hover {
 color: #fff; border-color: rgba(244,242,239,0.35); background: rgba(255,255,255,0.04);
}
.menu-mobile__social .icon { width: 1.35rem; height: 1.35rem; }

.site-header.is-menu-open {
 background: rgba(8,8,8,0.98);
 border-bottom-color: var(--line);
}
body.menu-open { overflow: hidden; }

@media (min-width: 900px) {
 .site-header {
 grid-template-columns: 1fr auto 1fr;
 gap: 1rem;
 }
 .nav { display: flex; justify-self: center; }
 .header-social { display: flex; }
 .header-phone { display: inline-flex; }
 .nav-toggle { display: none; }
 .menu-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
 .menu-mobile,
 .menu-mobile__link,
 .menu-mobile__footer,
 .nav-toggle__bar {
 transition: none !important;
 }
 .menu-mobile__link,
 .menu-mobile__footer {
 opacity: 1; transform: none;
 }
}

/* Hero home */
.hero {
 position: relative; min-height: 100svh; min-height: 100dvh;
 display: grid; align-items: end;
 padding:
  calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem)
  var(--shell-pad-right)
  max(3rem, env(safe-area-inset-bottom, 0px) + 1.5rem)
  var(--shell-pad-left);
 overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__media iframe {
 position: absolute; top: 50%; left: 50%; z-index: 1;
 width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh;
 max-width: none;
 /* Scale up pour rogner la chrome YouTube (barre bas / titre) hors cadre */
 transform: translate(-50%, -50%) scale(1.35); border: 0;
 filter: saturate(0.85) contrast(1.05);
 pointer-events: none;
 opacity: 0;
 transition: opacity 700ms var(--ease);
}
.hero__fallback {
 position: absolute; inset: 0; z-index: 2;
 background: #0a0a0a center / cover no-repeat;
 background-image: url("../img/traite.webp");
 transition: opacity 700ms var(--ease);
}
@media (max-width: 639px) {
 .hero__fallback {
  background-image: url("../img/traite-900.webp");
 }
}
.hero__scrim {
 position: absolute; inset: 0; z-index: 3;
 background:
 linear-gradient(90deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.55) 48%, rgba(8,8,8,0.35) 100%),
 linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.2) 35%, rgba(8,8,8,0.75) 100%);
}
/* Affiche la vidéo seulement quand elle joue (masque le player YouTube au démarrage) */
.hero__media.is-ready iframe { opacity: 1; }
.hero__media.is-ready .hero__fallback { opacity: 0; }
/* Contenu toujours au-dessus de l'iframe (évite chrome YT au-dessus du texte, surtout iOS) */
.hero__content {
 position: relative; z-index: 5; max-width: 38rem;
 animation: hero-in 900ms var(--ease) both;
 isolation: isolate;
}
/* Mobile : zoom plus fort pour rogner la chrome basse ; le fallback masque le flash initial */
@media (max-width: 899px) {
 .hero__media iframe {
  transform: translate(-50%, -50%) scale(1.55);
 }
}
.hero__brand {
 margin: 0; font-family: var(--font-display); font-weight: 800;
 font-size: clamp(3.4rem, 9vw, 6.5rem); line-height: 0.92;
 letter-spacing: 0.02em; text-transform: uppercase;
}
.hero__position {
 margin: 0.85rem 0 0; font-family: var(--font-display);
 font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 600;
 letter-spacing: 0.04em; text-transform: uppercase; color: rgba(244,242,239,0.92);
 max-width: 22em;
}
.hero__lever {
 display: flex; align-items: center; gap: 0.7rem;
 margin: 0.7rem 0 0; font-size: 0.98rem; font-weight: 500;
 color: rgba(244,242,239,0.72); letter-spacing: 0.02em;
}
.hero__lever::before {
 content: ""; flex-shrink: 0; width: 1.35rem; height: 2px;
 background: var(--red);
}
.hero__lead { margin: 1rem 0 0; max-width: 38ch; color: rgba(244,242,239,0.78); font-size: 1.02rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero__cta .btn { flex: 1 1 auto; }

@keyframes hero-in {
 from { opacity: 0; transform: translateY(22px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Page hero (inner) */
.page-hero {
 padding:
  calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.25rem)
  var(--shell-pad-right)
  2.5rem
  var(--shell-pad-left);
 border-bottom: 1px solid var(--line);
 background:
 radial-gradient(ellipse at 10% 0%, rgba(220,38,38,0.18), transparent 45%),
 var(--bg);
}
.page-hero .page-hero__crumb {
 margin: 0 0 2.25rem; color: var(--muted); font-size: 0.85rem;
 line-height: 1.4;
}
.page-hero__crumb a:hover { color: var(--ink); }
.page-hero .porsche-mark {
 margin-top: 0.15rem;
 margin-bottom: 1.15rem;
}
.page-hero h1 {
 margin: 0; font-family: var(--font-display); font-weight: 800;
 font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05;
 letter-spacing: 0.02em; text-transform: uppercase;
 padding-top: 0.12em; /* laisse de l'air aux accents (À, É…) */
}
.page-hero h1 + p {
 margin: 1.15rem 0 0; max-width: 48ch; color: var(--muted);
}

/* Valeurs - asymmetric, not 3 equal cards */
.valeurs {
 display: grid; gap: 0;
 border-bottom: 1px solid var(--line); background: var(--bg-elevated);
 /* Fond full-bleed, grille bornée à --max */
 padding-inline: max(0px, calc((100% - var(--max)) / 2));
}
.valeurs__featured,
.valeurs__item {
 padding: 1.75rem clamp(1rem, 4vw, 2.5rem);
 border-bottom: 1px solid var(--line);
}
.valeurs__featured strong,
.valeurs__item strong {
 display: block; font-family: var(--font-display); font-size: 1.45rem;
 font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 0.45rem;
}
.valeurs__featured p,
.valeurs__item p { margin: 0; max-width: 36ch; color: var(--muted); font-size: 0.95rem; }
.valeurs__featured {
 background: linear-gradient(135deg, rgba(220,38,38,0.16), transparent 60%);
}
.valeurs__featured strong { font-size: clamp(1.6rem, 3vw, 2rem); }
@media (min-width: 860px) {
 .valeurs { grid-template-columns: 1.35fr 1fr; }
 .valeurs__featured { border-bottom: 0; border-right: 1px solid var(--line); }
 .valeurs__stack { display: grid; grid-template-rows: 1fr 1fr; }
 .valeurs__item:last-child { border-bottom: 0; }
}

/* Sections generic */
.section {
 padding:
  clamp(3rem, 8vw, 6rem)
  var(--shell-pad-right)
  clamp(3rem, 8vw, 6rem)
  var(--shell-pad-left);
}
.wrap,
.services__grid,
.lists-2,
.svc-examples,
.pricing,
.team,
.blog-grid,
.realisations__row,
.contact-grid,
.contact-band {
 min-width: 0;
}
.section--elevated { background: var(--bg-elevated); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: var(--max); width: 100%; margin: 0 auto 2.5rem; }
.section-head h2,
.section h2,
.split__copy h2 {
 margin: 0; font-family: var(--font-display); font-weight: 700;
 font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: 0.02em;
 text-transform: uppercase; line-height: 0.98;
 text-wrap: balance;
}
.section-head p { margin: 0.85rem 0 0; max-width: 48ch; color: var(--muted); text-wrap: pretty; }
.page-hero h1,
.about-band__copy h2,
.contact-band h2,
.atelier__copy h2,
.hero__position,
.hero__lever {
 text-wrap: balance;
}
.page-hero h1 + p,
.about-band__copy p,
.split__copy p,
.hero__lead {
 text-wrap: pretty;
}

.wrap { max-width: var(--max); width: 100%; margin-inline: auto; }

.about-band {
 display: grid; gap: 2rem; align-items: center;
}
.about-band__copy h2 {
 margin: 0; font-family: var(--font-display); font-weight: 700;
 font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: 0.02em;
 text-transform: uppercase; line-height: 0.98;
}
.porsche-mark {
 display: block;
 width: 2.35rem; height: 2.35rem;
 margin: 0 0 0.95rem;
 background: var(--red);
 -webkit-mask: url("../icons/porsche-mark.svg") center / contain no-repeat;
 mask: url("../icons/porsche-mark.svg") center / contain no-repeat;
}
.porsche-mark--lg {
 width: 2.85rem; height: 2.85rem;
 margin-bottom: 1.1rem;
}
.about-band__copy p { margin: 1rem 0 0; max-width: 42ch; color: var(--muted); }
.about-band__media { margin: 0; overflow: hidden; border-radius: var(--radius); }
.about-band__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
@media (min-width: 900px) {
 .about-band { grid-template-columns: 0.95fr 1.05fr; gap: 3rem; }
}

/* Experience strip (home) : typographic break, no photo */
.experience {
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 background:
  linear-gradient(90deg, rgba(220,38,38,0.12) 0%, transparent 42%),
  var(--bg);
}
.experience__inner {
 max-width: var(--max);
 width: 100%;
 margin-inline: auto;
 padding:
  clamp(2.5rem, 7vw, 4.5rem)
  var(--gutter)
  clamp(2.5rem, 7vw, 4.5rem);
 display: grid;
 gap: 1.75rem;
 align-items: end;
}
.experience__brand {
 display: grid;
 gap: 1rem;
 justify-items: start;
}
.experience__logo {
 width: clamp(9rem, 28vw, 12.5rem);
 height: auto;
}
.experience__stat {
 margin: 0;
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(4.5rem, 16vw, 8.5rem);
 line-height: 0.85;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 color: var(--ink);
}
.experience__stat span {
 color: var(--red);
}
.experience__copy h2 {
 margin: 0;
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(1.7rem, 3.5vw, 2.4rem);
 letter-spacing: 0.03em;
 text-transform: uppercase;
 line-height: 1;
 text-wrap: balance;
}
.experience__copy p {
 margin: 0.85rem 0 0;
 max-width: 36ch;
 color: var(--muted);
 text-wrap: pretty;
}
.experience__copy .text-link { margin-top: 1.1rem; }
@media (min-width: 800px) {
 .experience__inner {
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
 }
 .experience__brand { gap: 1.15rem; }
 .experience__copy { max-width: 28rem; }
}

/* Porsche / split */
.split {
 display: grid; gap: 2rem; max-width: calc(var(--max) + 6rem);
 width: 100%;
 margin-inline: auto;
 padding:
  clamp(3rem, 8vw, 6rem)
  max(var(--gutter), env(safe-area-inset-right, 0px))
  clamp(3rem, 8vw, 6rem)
  max(var(--gutter), env(safe-area-inset-left, 0px));
 align-items: center;
}
.split__copy,
.split__visual { min-width: 0; }
.split__eyebrow {
 margin: 0 0 0.65rem;
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--red);
}
.split__copy p { margin: 1.1rem 0 0; max-width: 42ch; color: var(--muted); }
.split__copy p.split__eyebrow { margin: 0 0 0.65rem; color: var(--red); }
.service-index {
 list-style: none;
 margin: 1.6rem 0 0;
 padding: 0;
 border-top: 1px solid var(--line);
}
.service-index li {
 display: grid;
 grid-template-columns: 2.6rem 1fr;
 gap: 0.85rem;
 align-items: baseline;
 padding: 0.85rem 0;
 border-bottom: 1px solid var(--line);
}
.service-index__num {
 font-family: var(--font-display);
 font-size: 1.05rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 color: var(--red);
 line-height: 1.2;
}
.service-index strong {
 display: block;
 font-family: var(--font-display);
 font-size: clamp(1.15rem, 2.4vw, 1.35rem);
 font-weight: 700;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 line-height: 1.1;
}
.service-index li span:not(.service-index__num) {
 display: block;
 margin-top: 0.25rem;
 font-size: 0.9rem;
 color: var(--muted);
}
.split__copy .text-link { margin-top: 1.35rem; }
body[data-page="porsche"] .split__copy .porsche-mark {
 margin-bottom: 1.1rem;
}
body[data-page="porsche"] .service-index { margin-top: 1.75rem; }
body[data-page="porsche"] .split__copy .text-link { margin-top: 1.5rem; }
.split__visual { margin: 0; overflow: hidden; border-radius: var(--radius); }
.split__visual img {
 width: 100%; aspect-ratio: 16/10; object-fit: cover;
 transition: transform 800ms var(--ease);
}
.split__visual:hover img { transform: scale(1.04); }
@media (min-width: 960px) {
 .split { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
 .split--reverse { grid-template-columns: 1.1fr 0.9fr; }
 .split--reverse .split__copy { order: 2; }
}

/* Services */
.services__grid {
 max-width: var(--max); width: 100%; margin-inline: auto; display: grid; gap: 0;
 border-top: 1px solid var(--line);
}
.service {
 padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.service__icon {
 display: block;
 width: 1.7rem; height: 1.7rem;
 margin-bottom: 0.9rem;
 color: var(--red);
}
.service h3 {
 margin: 0; font-family: var(--font-display); font-size: 1.55rem;
 font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.service p { margin: 0.35rem 0 0; color: var(--muted); max-width: 42ch; }
.service__points {
 list-style: none;
 margin: 0.9rem 0 0;
 padding: 0;
 display: grid;
 gap: 0.4rem;
 max-width: 40ch;
}
.service__points li {
 position: relative;
 padding-left: 0.95rem;
 color: var(--muted);
 font-size: 0.92rem;
 line-height: 1.4;
}
.service__points li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 0.35rem;
 height: 0.35rem;
 border-radius: 1px;
 background: var(--red);
}
@media (min-width: 768px) {
 .services__grid { grid-template-columns: 1fr 1fr; }
 .service:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--line); }
 .service:nth-child(even) { padding-left: 1.5rem; }
}
@media (min-width: 960px) {
 .service:nth-child(odd) { padding-right: 2rem; }
 .service:nth-child(even) { padding-left: 2rem; }
}

/* Services page: hero + exemples */
.page-hero__eyebrow {
 margin: 0 0 0.55rem;
 color: var(--red);
 font-family: var(--font-display);
 font-size: 0.95rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.page-hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 margin-top: 1.5rem;
}
.page-hero__actions .btn { flex: 0 1 auto; }
.example-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.55rem;
}
.example-list li {
 position: relative;
 padding-left: 1rem;
 color: var(--muted);
 font-size: 0.95rem;
 line-height: 1.45;
 text-wrap: pretty;
}
.example-list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 0.35rem;
 height: 0.35rem;
 border-radius: 1px;
 background: var(--red);
}
body[data-page="services"] .service-group h3 {
 color: var(--ink);
}
body[data-page="services"] .service-group:first-child h3 {
 color: var(--red);
}

.lists-2 {
 max-width: var(--max); margin: 0 auto; display: grid; gap: 2rem;
}
.lists-2 h3,
.service-group h3 {
 margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.5rem;
 letter-spacing: 0.03em; text-transform: uppercase;
}
.chip-grid {
 display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.chip-grid span {
 padding: 0.55rem 0.8rem;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 color: var(--muted); font-size: 0.9rem;
}
@media (min-width: 800px) { .lists-2 { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* Services - exemples (anciens / standard) */
.svc-examples {
 max-width: var(--max);
 width: 100%;
 margin-inline: auto;
 display: grid;
 gap: 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}
.svc-examples__group {
 padding: 1.75rem 0 0.25rem;
}
.svc-examples__group--focus {
 background: linear-gradient(160deg, rgba(220, 38, 38, 0.12), transparent 55%);
 padding-inline: clamp(1rem, 3vw, 1.5rem);
 border-bottom: 1px solid var(--line);
 border-radius: var(--radius);
 min-width: 0;
}
.svc-examples__group--standard {
 padding-top: 2rem;
}
.svc-examples__head {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin: 0 0 1.15rem;
 padding-bottom: 0.85rem;
 border-bottom: 1px solid var(--line);
}
.svc-examples__icon {
 flex-shrink: 0;
 width: 1.45rem;
 height: 1.45rem;
 color: var(--red);
}
.svc-examples__group--standard .svc-examples__icon {
 color: var(--muted);
}
.svc-examples__head h3 {
 margin: 0;
 font-family: var(--font-display);
 font-size: clamp(1.35rem, 2.8vw, 1.75rem);
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 line-height: 1.1;
}
.svc-examples__group--focus .svc-examples__head h3 {
 color: var(--red);
}
.svc-examples__group--standard .svc-examples__head h3 {
 color: var(--ink);
}
.svc-examples__list {
 list-style: none;
 margin: 0;
 padding: 0;
 counter-reset: svc-ex;
}
.svc-examples__list li {
 counter-increment: svc-ex;
 display: grid;
 grid-template-columns: 2.1rem 1fr;
 gap: 0.85rem;
 align-items: baseline;
 padding: 0.72rem 0;
 border-bottom: 1px solid var(--line);
 color: var(--ink);
 font-size: 0.97rem;
 line-height: 1.45;
 text-wrap: pretty;
}
.svc-examples__list li:last-child {
 border-bottom: 0;
}
.svc-examples__list li::before {
 content: counter(svc-ex, decimal-leading-zero);
 font-family: var(--font-display);
 font-size: 0.82rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 color: var(--red);
 opacity: 0.85;
}
.svc-examples__group--standard .svc-examples__list li {
 color: var(--muted);
}
.svc-examples__group--standard .svc-examples__list li::before {
 color: var(--muted);
 opacity: 0.7;
}
@media (min-width: 800px) {
 .svc-examples {
  grid-template-columns: 1.15fr 0.85fr;
  border-bottom: 0;
 }
 .svc-examples__group {
  padding: 0 0 0.25rem;
  min-width: 0;
 }
 .svc-examples__group--focus {
  padding: 1.75rem clamp(1.25rem, 2.5vw, 2rem) 0.5rem;
  border-bottom: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
 }
 .svc-examples__group--standard {
  padding: 1.75rem 0 0.5rem clamp(1.25rem, 2.5vw, 2rem);
 }
}

.pricing {
 max-width: var(--max); margin: 0 auto; display: grid; gap: 1rem;
}
.price-card {
 padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius);
 background: var(--bg);
}
.price-card h3 {
 margin: 0; font-family: var(--font-display); font-size: 1.4rem;
 letter-spacing: 0.03em; text-transform: uppercase;
}
.price-card p { margin: 0.65rem 0 0; color: var(--muted); }
.price-card strong { color: var(--ink); font-size: 1.15rem; }
@media (min-width: 700px) { .pricing { grid-template-columns: repeat(3, 1fr); } }

/* Atelier - dark theme lock */
.atelier { display: grid; gap: 0; background: var(--bg-elevated); color: var(--ink); }
.atelier__media { margin: 0; min-height: 280px; }
.atelier__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.atelier__copy { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem); }
.atelier__copy h2 {
 margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem);
 font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
}
.atelier__copy > p { margin: 1.1rem 0 0; max-width: 48ch; color: var(--muted); }
.atelier__facts {
 display: grid; gap: 1.1rem; margin: 2rem 0 0; padding-top: 1.5rem;
 border-top: 1px solid var(--line);
}
.atelier__facts dt {
 font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
 text-transform: uppercase; color: var(--muted);
}
.atelier__facts dd { margin: 0.25rem 0 0; font-weight: 500; }
@media (min-width: 920px) {
 .atelier { grid-template-columns: 1.15fr 0.85fr; min-height: 560px; }
 .atelier__media img { min-height: 100%; }
}

.team {
 max-width: var(--max); margin: 0 auto; display: grid; gap: 1.25rem;
}
.team__card {
 display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line);
 background: var(--bg); border-radius: var(--radius);
}
.team__card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); }
.team__card strong {
 display: block; font-family: var(--font-display); font-size: 1.4rem;
 letter-spacing: 0.03em; text-transform: uppercase;
}
.team__card span { color: var(--muted); font-size: 0.92rem; }
@media (min-width: 700px) { .team { grid-template-columns: 1fr 1fr; } }

/* À propos : citation atelier + duo père/fils */
.story-quote {
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 background:
  linear-gradient(90deg, rgba(220, 38, 38, 0.14), transparent 42%),
  var(--bg-elevated);
}
.story-quote__inner {
 margin-inline: auto;
 max-width: calc(var(--max) + 2rem);
 width: 100%;
 padding:
  clamp(2.75rem, 7vw, 4.5rem)
  max(var(--gutter), env(safe-area-inset-right, 0px))
  clamp(2.75rem, 7vw, 4.5rem)
  max(var(--gutter), env(safe-area-inset-left, 0px));
 border: 0;
}
.story-quote__inner p {
 margin: 0;
 max-width: 22ch;
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(1.85rem, 4.2vw, 3rem);
 letter-spacing: 0.02em;
 text-transform: uppercase;
 line-height: 1.05;
 text-wrap: balance;
}
.story-quote__inner footer {
 margin-top: 1.25rem;
 color: var(--muted);
 font-size: 0.92rem;
 letter-spacing: 0.04em;
}
body[data-page="apropos"] .split--story .split__copy p { max-width: 46ch; line-height: 1.65; }
body[data-page="apropos"] .page-hero {
 padding-bottom: clamp(2.75rem, 6vw, 3.5rem);
}
body[data-page="apropos"] .page-hero h1 + p {
 max-width: 42ch;
 margin-top: 1.25rem;
 line-height: 1.6;
}
body[data-page="apropos"] .split--story {
 gap: 2.75rem;
 padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
body[data-page="apropos"] .split--story .split__eyebrow {
 margin-bottom: 1.05rem;
}
body[data-page="apropos"] .split--story .split__copy h2 {
 margin-bottom: 0.35rem;
 line-height: 1.08;
 padding-top: 0.06em;
}
body[data-page="apropos"] .split--story .split__copy p + p {
 margin-top: 1.35rem;
}
body[data-page="apropos"] .story-quote__inner {
 padding-block: clamp(3.25rem, 8vw, 5.25rem);
}
body[data-page="apropos"] .story-quote__inner p {
 line-height: 1.12;
 max-width: 20ch;
}
body[data-page="apropos"] .story-quote__inner footer {
 margin-top: 1.5rem;
}
body[data-page="apropos"] .atelier__copy {
 padding-block: clamp(3rem, 7vw, 5rem);
}
body[data-page="apropos"] .atelier__copy > p {
 margin-top: 1.25rem;
 line-height: 1.65;
}
body[data-page="apropos"] .atelier__facts {
 gap: 1.35rem;
 margin-top: 2.35rem;
 padding-top: 1.75rem;
}
body[data-page="apropos"] .atelier__facts dd {
 margin-top: 0.4rem;
 line-height: 1.45;
}
body[data-page="apropos"] .duo-section {
 padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
body[data-page="apropos"] .duo-section .section-head {
 margin-bottom: 2.5rem;
}
body[data-page="apropos"] .duo-section .section-head p {
 margin-top: 1rem;
 line-height: 1.55;
}
body[data-page="apropos"] .duo {
 gap: 3.25rem;
}
body[data-page="apropos"] .duo__meta {
 display: grid;
 gap: 0;
}
body[data-page="apropos"] .duo__meta h3 {
 margin-top: 0.45rem;
 padding-top: 0.05em;
}
body[data-page="apropos"] .duo__meta p:last-child {
 margin-top: 0.85rem;
 line-height: 1.65;
}
body[data-page="apropos"] .section:has(#travaux-title) {
 padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
body[data-page="apropos"] .section:has(#travaux-title) .section-head {
 margin-bottom: 2.35rem;
}
body[data-page="apropos"] .section:has(#travaux-title) .blog-grid {
 gap: 1.5rem;
}
@media (min-width: 760px) {
 body[data-page="apropos"] .duo {
  gap: 3rem 4rem;
 }
 body[data-page="apropos"] .duo__person--offset {
  margin-top: 4rem;
 }
}
@media (max-width: 639px) {
 body[data-page="apropos"] .split--story {
  gap: 2.25rem;
  padding-block: 3.75rem;
 }
 body[data-page="apropos"] .story-quote__inner {
  padding-block: 3.25rem;
 }
 body[data-page="apropos"] .story-quote__inner p {
  max-width: 14ch;
  font-size: clamp(1.7rem, 8vw, 2.15rem);
 }
 body[data-page="apropos"] .duo-section,
 body[data-page="apropos"] .section:has(#travaux-title) {
  padding-block: 3.75rem;
 }
 body[data-page="apropos"] .duo {
  gap: 2.85rem;
 }
 body[data-page="apropos"] .duo__person {
  gap: 1.35rem;
 }
 body[data-page="apropos"] .atelier__copy {
  padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px));
 }
}
.duo {
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 gap: 2.75rem;
}
.duo__person { display: grid; gap: 1.15rem; min-width: 0; }
.duo__media {
 margin: 0;
 overflow: hidden;
 border-radius: var(--radius);
}
.duo__media img {
 width: 100%;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 object-position: center top;
}
.duo__role {
 margin: 0;
 font-size: 0.72rem;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--red);
}
.duo__meta h3 {
 margin: 0.35rem 0 0;
 font-family: var(--font-display);
 font-size: clamp(1.55rem, 3vw, 1.9rem);
 font-weight: 700;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 line-height: 1.05;
}
.duo__meta p:last-child {
 margin: 0.65rem 0 0;
 max-width: 36ch;
 color: var(--muted);
 font-size: 0.95rem;
 line-height: 1.6;
 text-wrap: pretty;
}
@media (min-width: 760px) {
 .duo {
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3.5rem;
  align-items: start;
 }
 .duo__person--offset { margin-top: 3.5rem; }
 .duo__person:first-child .duo__media img { aspect-ratio: 4 / 5; }
 .duo__person--offset .duo__media img { aspect-ratio: 3 / 4; }
}

/* Blog cards */
.blog-grid {
 max-width: var(--max); margin: 0 auto; display: grid; gap: 1.25rem;
 align-items: stretch;
}
.blog-card {
 display: grid; grid-template-rows: auto 1fr; gap: 0; overflow: hidden;
 border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--line);
 transition: border-color 200ms var(--ease); min-width: 0; height: 100%;
}
.blog-card:hover { border-color: rgba(244,242,239,0.28); }
.blog-card__media {
 display: block; aspect-ratio: 16 / 10; overflow: hidden;
 background: #0c0c0c; min-height: 0;
}
.blog-card__media img {
 width: 100%; height: 100%; max-width: none;
 object-fit: cover; object-position: center;
 aspect-ratio: auto;
}
.blog-card__body { padding: 1.25rem 1.25rem 1.5rem; display: grid; align-content: start; }
.blog-card__body time {
 display: block; font-size: 0.75rem; letter-spacing: 0.08em;
 text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem;
}
.blog-card__body h3 {
 margin: 0; font-family: var(--font-display); font-size: 1.45rem;
 letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05;
}
.blog-card__body p {
 margin: 0.7rem 0 0; color: var(--muted); font-size: 0.95rem;
 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
 overflow: hidden;
}
@media (min-width: 800px) { .blog-grid { grid-template-columns: 1fr 1fr; } }

.work {
 position: relative; overflow: hidden; border-radius: var(--radius);
 isolation: isolate; aspect-ratio: 16 / 10;
}
.work img {
 position: absolute; inset: 0;
 width: 100%; height: 100%; object-fit: cover;
 transition: transform 700ms var(--ease);
}
.work::after {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.78) 100%);
}
.work__meta {
 position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.15rem; z-index: 1;
 display: grid; gap: 0.2rem;
}
.work__meta span {
 font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
 color: rgba(255,255,255,0.7);
}
.work__meta strong {
 font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
 letter-spacing: 0.03em; text-transform: uppercase;
}
.work:hover img { transform: scale(1.05); }
.realisations__row {
 max-width: var(--max); margin: 0 auto; display: grid; gap: 1rem;
}
@media (min-width: 800px) {
 .realisations__row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* Article */
.article {
 max-width: 760px; margin: 0 auto;
 padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem;
}
.article__meta {
 color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em;
 text-transform: uppercase; margin-bottom: 1rem;
}
.article h1 {
 margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 800;
 font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 0.98;
 letter-spacing: 0.02em; text-transform: uppercase;
}
.article .cover {
 margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden;
}
.article .cover img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.article-body h2, .article-body h3, .article-body h4 {
 margin: 2rem 0 0.75rem; font-family: var(--font-display);
 font-size: 1.55rem; letter-spacing: 0.03em; text-transform: uppercase;
}
.article-body p { margin: 0 0 1rem; color: rgba(244,242,239,0.86); }
.article-body ul { margin: 0 0 1.25rem; padding-left: 1.1rem; color: rgba(244,242,239,0.86); }
.article-body li { margin: 0.4rem 0; }
.article-body figure { margin: 1.5rem 0; }
.article-body figure img { width: 100%; border-radius: var(--radius); }
.article-body .gallery {
 display: grid; gap: 0.75rem; margin: 1.5rem 0;
}
@media (min-width: 640px) {
 .article-body .gallery,
 .article-body .gallery--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
 .article-body .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Contact */
.contact-grid {
 max-width: var(--max); width: 100%; margin: 0 auto; display: grid; gap: 2rem;
}
.contact-cards { display: grid; gap: 0.75rem; }
.contact-card {
 padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius);
 background: var(--bg-elevated);
 min-width: 0;
}
.contact-card strong {
 font-weight: 500;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.contact-card a:hover { color: var(--red); }

.contact-form {
 position: relative;
 padding: clamp(1.15rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius);
 background: var(--bg-elevated);
 min-width: 0;
 width: 100%;
 container-type: inline-size;
 container-name: contact-form;
}
.contact-form h2 {
 margin: 0 0 1.25rem; font-family: var(--font-display);
 font-size: clamp(1.45rem, 4.5vw, 1.8rem);
 letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05;
 text-wrap: balance;
}
.form-grid { display: grid; gap: 1.1rem; }
.form-grid > * { min-width: 0; }
.form-grid .field--full { grid-column: 1 / -1; }
/* 2 colonnes seulement si le formulaire a assez d'espace (évite overflow mobile + colonne étroite desktop) */
@container contact-form (min-width: 520px) {
 .form-grid--2 { grid-template-columns: 1fr 1fr; }
}
@supports not (container-type: inline-size) {
 @media (min-width: 720px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
 }
}
@media (min-width: 960px) {
 .contact-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
 }
}
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.9rem; font-weight: 500; }
.field .req { color: var(--red); }
.field input, .field textarea, .field select {
 width: 100%; max-width: 100%; min-height: 48px; padding: 0.75rem 0.9rem;
 border: 1px solid var(--line); border-radius: var(--radius);
 background: #0c0c0c; color: var(--ink);
 transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8a8680; }
.field input:focus-visible, .field textarea:focus-visible {
 outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent;
}
.field.is-invalid input,
.field.is-invalid textarea {
 border-color: #f87171;
}
.field-error {
 display: none; margin: 0; color: #fecaca; font-size: 0.85rem;
}
.field.is-invalid .field-error { display: block; }
.field-check {
 display: flex; gap: 0.75rem; align-items: flex-start;
 margin-top: 1rem;
 font-size: 0.9rem; color: var(--muted); line-height: 1.45;
}
.field-check input {
 width: 20px; height: 20px; min-width: 20px; margin-top: 0.15rem;
 accent-color: var(--red);
 flex-shrink: 0;
}
.field-check.is-invalid label { color: #fecaca; }
.field-check label { min-width: 0; }
.form-status {
 margin: 1rem 0 0; padding: 0.85rem 1rem; border-radius: var(--radius);
 border: 1px solid var(--line); color: var(--muted); font-size: 0.92rem;
 line-height: 1.45; overflow-wrap: anywhere;
}
.form-status[hidden] { display: none; }
.form-status.is-success {
 border-color: rgba(34,197,94,0.45); color: #bbf7d0; background: rgba(34,197,94,0.08);
}
.form-status.is-error {
 border-color: rgba(248,113,113,0.45); color: #fecaca; background: rgba(248,113,113,0.08);
}
.contact-form .btn[type="submit"] { margin-top: 1.25rem; }
.hp-field {
 position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.map-embed {
 margin-top: 1.25rem; border-radius: var(--radius); overflow: hidden;
 border: 1px solid var(--line); background: #0c0c0c;
 aspect-ratio: 16 / 9; width: 100%; max-width: 100%;
 min-height: 220px;
}
.map-embed iframe {
 width: 100%; max-width: 100%; height: 100%; border: 0; display: block;
}

.contact-band {
 max-width: var(--max); margin: 0 auto; padding: clamp(2.25rem, 5vw, 3.5rem);
 background: var(--red); color: #fff; border-radius: var(--radius);
}
.contact-band h2 {
 margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.3rem);
 font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.98;
}
.contact-band > p { margin: 0.85rem 0 0; max-width: 42ch; color: rgba(255,255,255,0.88); }
.contact-band .contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.contact-band .btn--primary { background: #fff; color: var(--red); }
.contact-band .btn--primary:hover { background: #f0eeea; }
.contact-band .btn--ghost-dark { border-color: rgba(255,255,255,0.55); color: #fff; }
.contact-band .btn--ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.section--cta {
 padding: 0;
}
.section--cta .contact-band {
 max-width: none;
 border-radius: 0;
}

@media (min-width: 640px) {
 .section--cta {
  padding:
   clamp(3rem, 8vw, 6rem)
   var(--shell-pad-right)
   clamp(3rem, 8vw, 6rem)
   var(--shell-pad-left);
 }
 .section--cta .contact-band {
  max-width: var(--max);
  width: 100%;
  border-radius: var(--radius);
 }
}

.realisations__more {
 max-width: var(--max); margin: 1.35rem auto 0;
}
.realisations__more .text-link { margin-top: 0; }

/* Legal */
.legal {
 max-width: 760px; margin: 0 auto;
 padding: 2.5rem clamp(1rem, 4vw, 3rem) 4rem;
}
.legal h2 {
 margin: 2rem 0 0.75rem; font-family: var(--font-display); font-size: 1.4rem;
 letter-spacing: 0.03em; text-transform: uppercase;
}
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.1rem; }

/* Footer */
.site-footer {
 display: grid; gap: 1.75rem;
 padding:
  clamp(2.5rem, 6vw, 4rem)
  var(--shell-pad-right)
  max(5.5rem, env(safe-area-inset-bottom, 0px) + 4.5rem)
  var(--shell-pad-left);
 border-top: 1px solid var(--line);
 background:
  linear-gradient(180deg, rgba(220,38,38,0.06) 0%, transparent 28%),
  var(--bg);
 color: var(--muted);
}
.footer__main {
 display: grid; gap: 1.5rem;
}
.footer__brand strong {
 display: block; color: var(--ink); font-family: var(--font-display);
 font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 700;
 letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.55rem;
}
.footer__brand p {
 margin: 0; max-width: 34ch; font-size: 0.95rem; line-height: 1.5;
}
.footer__actions {
 display: grid; gap: 0.55rem;
}
.footer__action {
 display: flex; align-items: center; gap: 0.7rem;
 min-height: 48px; padding: 0.7rem 0.9rem;
 border: 1px solid var(--line); border-radius: var(--radius);
 color: var(--ink); background: rgba(255,255,255,0.02);
 transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.footer__action .icon {
 width: 1.15rem; height: 1.15rem; color: var(--red); flex-shrink: 0;
}
.footer__action span {
 overflow-wrap: anywhere; font-size: 0.95rem; font-weight: 500;
}
.footer__action:hover {
 border-color: rgba(244,242,239,0.28);
 background: rgba(255,255,255,0.04);
}
.footer__nav {
 display: flex; flex-wrap: wrap; align-items: center;
 gap: 0.15rem 1.35rem;
 padding: 1.15rem 0 0; border-top: 1px solid var(--line);
}
.footer__nav a {
 display: inline-flex; align-items: center; min-height: 44px;
 padding: 0.2rem 0;
 font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
 letter-spacing: 0.03em; text-transform: uppercase; color: rgba(244,242,239,0.78);
 transition: color 200ms var(--ease);
}
.footer__nav a:hover { color: #fff; }
.footer__meta {
 display: grid; gap: 0.85rem; padding-top: 0.25rem;
}
.footer__social {
 display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem;
}
.footer__social a {
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 44px; min-width: 44px; color: var(--muted);
 transition: color 200ms var(--ease);
}
.footer__social a:hover { color: var(--ink); }
.footer__social a:not([aria-label]) {
 min-width: 0; margin-left: 0.55rem; padding: 0; font-size: 0.85rem;
}
.footer__copy {
 margin: 0; font-size: 0.78rem; line-height: 1.45;
 color: rgba(183,179,171,0.85);
}
.footer__copy a:hover { color: var(--ink); }
.footer__copy-short { display: none; }

@media (min-width: 860px) {
 .footer__main {
  grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: end;
 }
 .footer__actions { gap: 0.65rem; }
 .footer__nav {
  gap: 0.15rem 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.35rem;
 }
 .footer__meta {
  grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem;
 }
 .footer__social { gap: 0.15rem 0.45rem; }
}

/* Reveal */
.reveal {
 opacity: 0; transform: translateY(18px);
 transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive: phone ---------- */
@media (max-width: 639px) {
 :root { --header-h: 64px; }

 .brand img { height: 38px; }

 .hero {
  min-height: 100svh;
  align-items: end;
  padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(2.75rem, env(safe-area-inset-bottom, 0px) + 1.5rem);
 }
 .hero__scrim {
  background:
   linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.68) 72%, rgba(8,8,8,0.5) 100%),
   linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.2) 28%, rgba(8,8,8,0.9) 100%);
 }
 .hero__content { max-width: 22rem; }
 .hero__brand {
  font-size: clamp(2.55rem, 12vw, 3.35rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
 }
 .hero__position {
  margin-top: 1.05rem;
  font-size: clamp(1.12rem, 5vw, 1.35rem);
  max-width: 18em;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 600;
 }
 .hero__lever {
  margin-top: 0.95rem;
  font-size: 0.9rem;
  gap: 0.55rem;
  line-height: 1.35;
 }
 .hero__lever::before { width: 1rem; }
 .hero__lead {
  margin-top: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 32ch;
  color: rgba(244,242,239,0.72);
 }
 .hero__cta {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin-top: 1.85rem;
 }
 .hero__cta .btn {
  width: 100%;
  flex: 1 1 auto;
 }

 /* Plus d'air entre les blocs de l'accueil */
 body[data-page="home"] .valeurs__featured,
 body[data-page="home"] .valeurs__item {
  padding: 1.85rem 1.35rem;
 }
 body[data-page="home"] .valeurs__featured strong,
 body[data-page="home"] .valeurs__item strong {
  margin-bottom: 0.55rem;
  letter-spacing: 0.02em;
 }
 body[data-page="home"] .split {
  gap: 2.5rem;
  padding-block: 3.75rem;
 }
 body[data-page="home"] .split__eyebrow { margin-bottom: 0.85rem; }
 body[data-page="home"] .split__copy p { margin-top: 1.25rem; line-height: 1.6; }
 body[data-page="home"] .service-index { margin-top: 1.85rem; }
 body[data-page="home"] .service-index li {
  padding: 1.15rem 0;
  gap: 1rem;
 }
 body[data-page="home"] .service-index strong {
  font-size: 1.12rem;
  letter-spacing: 0.02em;
 }
 body[data-page="home"] .split__copy .text-link { margin-top: 1.6rem; }
 body[data-page="home"] .section {
  padding-block: 3.75rem;
 }
 body[data-page="home"] #porsche.section {
  padding-bottom: 3.25rem;
 }
 body[data-page="home"] .about-band { gap: 1.85rem; }
 body[data-page="home"] .about-band__copy p {
  margin-top: 1.15rem;
  line-height: 1.6;
 }
 body[data-page="home"] .experience__inner {
  gap: 2rem;
  padding-block: 3.25rem;
 }
 body[data-page="home"] .experience__stat {
  font-size: clamp(3.8rem, 14vw, 5.5rem);
 }
 body[data-page="home"] .experience__logo {
  width: clamp(8rem, 26vw, 10.5rem);
 }
 body[data-page="home"] .section-head {
  margin-bottom: 2.15rem;
 }
 body[data-page="home"] .section-head p {
  margin-top: 1rem;
  line-height: 1.55;
 }
 body[data-page="home"] .realisations__row { gap: 1.25rem; }
 body[data-page="home"] .realisations__more { margin-top: 1.5rem; }

 .section--cta .contact-band {
  padding: 2rem 1.25rem 2.15rem;
 }
 .contact-band .contact__actions {
  flex-direction: column;
  align-items: stretch;
  margin-top: 1.35rem;
 }
 .contact-band .contact__actions .btn { width: 100%; }

 .realisations__more { margin-top: 1.15rem; }

 .page-hero {
  padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px));
  padding-bottom: 2.85rem;
 }
 .page-hero .page-hero__crumb {
  margin-bottom: 2.5rem;
 }
 .page-hero h1 {
  font-size: clamp(2.15rem, 10.5vw, 2.75rem);
  line-height: 1.08;
  padding-top: 0.15em;
 }
 .page-hero h1 + p { max-width: 36ch; line-height: 1.55; }

 .valeurs__featured,
 .valeurs__item {
  padding: 1.65rem 1.35rem;
 }

 .section,
 .split {
  padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px));
  padding-block: 3.5rem;
 }
 .section.section--cta {
  padding-inline: 0;
 }

 .section-head { margin-bottom: 2rem; }
 .section-head h2,
 .section h2,
 .split__copy h2,
 .about-band__copy h2,
 .atelier__copy h2,
 .experience__copy h2 {
  font-size: clamp(1.85rem, 8.5vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: 0.015em;
 }

 .service { padding: 1.35rem 0; }
 .service h3 { font-size: 1.35rem; }

 .chip-grid span {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
 }

 .atelier__media { min-height: 220px; }
 .atelier__media img { min-height: 220px; }
 .atelier__facts { gap: 1rem; }

 .story-quote__inner {
  padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px));
  padding-block: 2.75rem;
 }
 .story-quote__inner p { max-width: 16ch; }
 .duo { gap: 2.35rem; }
 .duo__meta p:last-child { max-width: 34ch; }

 .work__meta strong { font-size: 1.35rem; }

 .blog-card__body { padding: 1.1rem 1.1rem 1.35rem; }
 .blog-card__body h3 { font-size: 1.3rem; }

 .contact-form {
  padding: 1.15rem 1rem 1.25rem;
 }
 .contact-form h2 { margin-bottom: 1.05rem; }
 .contact-form .btn[type="submit"] { width: 100%; }
 .contact-card { padding: 1rem 1.05rem; }
 .contact-cards { gap: 0.65rem; }
 .form-grid { gap: 1rem; }
 .field-check { font-size: 0.88rem; gap: 0.65rem; }
 .social-links {
  gap: 0.55rem 0.85rem;
  margin-top: 1.15rem;
 }
 .map-embed {
  aspect-ratio: 16 / 9;
  min-height: 200px;
  max-height: 260px;
 }

 .site-footer {
  padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px));
  gap: 1.5rem;
  padding-top: 3rem;
  padding-bottom: max(5.75rem, env(safe-area-inset-bottom, 0px) + 4.75rem);
 }
 .footer__brand strong { font-size: 1.75rem; }
 .footer__nav {
  gap: 0.1rem 1.1rem;
 }
 .footer__nav a {
  font-size: 0.92rem;
  min-height: 40px;
 }
 .footer__meta { gap: 0.75rem; }
 .footer__social {
  gap: 0.1rem 0.2rem;
 }
 .footer__social a:not([aria-label]) {
  margin-left: 0.4rem;
 }
 .footer__copy {
  max-width: 100%;
  padding-right: 7.5rem; /* évite le chevauchement avec le FAB */
 }
 .footer__copy-full { display: none; }
 .footer__copy-short { display: inline; }

 .article { padding-top: 1.75rem; padding-inline: max(1.35rem, env(safe-area-inset-left, 0px)) max(1.35rem, env(safe-area-inset-right, 0px)); }
 .article h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
}

/* ---------- Responsive: tablet ---------- */
@media (min-width: 640px) and (max-width: 959px) {
 .hero {
  padding-bottom: 3.75rem;
 }
 .hero__content { max-width: 34rem; }
 .hero__brand { font-size: clamp(3.6rem, 8.5vw, 5rem); }
 .hero__cta .btn { flex: 0 1 auto; min-width: 11rem; }

 .page-hero {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.75rem);
 }

 .about-band { gap: 2.25rem; }
 .split { gap: 2.25rem; }

 .atelier__media { min-height: 340px; }
 .atelier__media img { min-height: 340px; }

 .contact-grid { gap: 2.25rem; }
 .contact-cards {
  grid-template-columns: 1fr 1fr;
 }
 .map-embed {
  aspect-ratio: 16 / 9;
  min-height: 260px;
  max-height: 360px;
 }

 .contact-band { padding: 2.5rem 2rem; }

}

/* Short phones / landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
 .hero {
  min-height: auto;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1rem);
  padding-bottom: 1.5rem;
 }
 .hero__brand { font-size: clamp(2.2rem, 8vw, 3rem); }
 .hero__position { font-size: 1.1rem; max-width: none; }
 .hero__lead { margin-top: 0.65rem; }
 .hero__cta { margin-top: 1rem; flex-direction: row; }
 .hero__cta .btn { width: auto; }
}

/* Floating call CTA */
.call-fab {
 position: fixed;
 right: max(1rem, env(safe-area-inset-right, 0px));
 bottom: max(1rem, env(safe-area-inset-bottom, 0px));
 z-index: var(--z-fab);
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
 min-height: 52px;
 padding: 0.8rem 1.05rem 0.8rem 0.95rem;
 background: var(--red);
 color: #fff;
 border-radius: var(--radius);
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
 font-family: var(--font-display);
 font-weight: 700;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(12px);
 transition:
  background 200ms var(--ease),
  transform 280ms var(--ease),
  opacity 280ms var(--ease),
  visibility 280ms var(--ease);
}
.call-fab.is-visible {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
}
.call-fab .icon {
 width: 1.2rem;
 height: 1.2rem;
 flex-shrink: 0;
}
.call-fab__text {
 display: grid;
 line-height: 1.05;
}
.call-fab__label {
 font-size: 1.05rem;
}
.call-fab__number {
 display: none;
 font-family: var(--font-body);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.02em;
 text-transform: none;
 opacity: 0.88;
 margin-top: 0.15rem;
}
.call-fab:hover {
 background: var(--red-deep);
 transform: translateY(-2px);
}
.call-fab:active {
 transform: translateY(0);
}
body.menu-open .call-fab {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}
@media (min-width: 768px) {
 .call-fab {
  right: max(1.5rem, env(safe-area-inset-right, 0px));
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  padding-right: 1.2rem;
 }
 .call-fab__number { display: block; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .reveal, .hero__content, .work img, .split__visual img {
 animation: none !important; transition: none !important;
 opacity: 1 !important; transform: none !important;
 }
 .btn, .nav a, .text-link, .call-fab { transition: none !important; }
 .call-fab { transform: none; }
 .call-fab.is-visible:hover { transform: none; }
}