/* =====================================================================
   Gautier Collet · design system
   Éditorial chaleureux · warm off-white, soft ink, clay accent
   ===================================================================== */

/* ---------- Polices ----------
   Manrope est hébergée sur le site (licence SIL Open Font License) : aucun appel à Google Fonts.
   Les titres utilisent The Seasons (Adobe Fonts, chargée dans <head>). */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --paper:      #f5efe6;
  --paper-2:    #ece2d4;
  --paper-3:    #e3d6c4;
  --ink:        #211e1a;
  --ink-soft:   #47413a;
  --muted:      #6b6255; /* contraste >= 4.5:1 sur --paper et --paper-2 (WCAG AA) */
  --clay:       #a9764f;
  --clay-deep:  #825a39; /* texte d'accent : contraste >= 4.5:1 sur --paper et --paper-2 */
  --line:       rgba(33,30,26,.14);
  --line-soft:  rgba(33,30,26,.08);
  --white:      #fbf8f2;

  /* Two-font system: The Seasons (display / editorial accents) + Manrope (all UI & running text) */
  --font-display: "the-seasons", "The Seasons", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  /* Legacy aliases remapped onto the two families */
  --serif: var(--font-display);
  --title: var(--font-display);
  --sans:  var(--font-body);

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(.95rem, .92rem + .18vw, 1.05rem);
  --step-1:  clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --step-4:  clamp(3rem, 2rem + 5vw, 6.5rem);
  --step-5:  clamp(3.6rem, 2rem + 8vw, 9rem);

  /* Editorial type scale (Manrope body + The Seasons headings) */
  --text-base: clamp(16px, 1rem + .2vw, 17px);
  --text-lead: clamp(18px, 1rem + .6vw, 23px);
  --heading-1: clamp(46px, 6vw, 76px);
  --heading-2: clamp(34px, 4vw, 48px);
  --heading-3: clamp(26px, 3vw, 34px);

  --gutter: clamp(1.15rem, 5vw, 5.5rem);
  --section: clamp(4.5rem, 8vw, 9rem);
  --maxw: 1560px;
  --content: 1120px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);

  /* Surfaces volontairement sombres (footer, CTA, menu, cookies) : stables dans les 2 thèmes */
  --dark-surface: #211e1a;
  --footer-surface: #211e1a;
  --footer-logo: #ece2d4;
  --on-dark: #f5efe6;
  --on-dark-soft: #d9cdbb;
  --on-dark-muted: #a99e8e;
  --card: #fbf8f2;

  color-scheme: light;
}

/* ---------- Thème sombre ---------- */
:root[data-theme="dark"] {
  --paper:      #14110d;
  --paper-2:    #1c1712;
  --paper-3:    #241e17;
  --ink:        #f0e8dc;
  --ink-soft:   #c7bdae;
  --muted:      #9a9082;
  --clay:       #c88f61;
  --clay-deep:  #d59c6c;
  --line:       rgba(240,232,220,.15);
  --line-soft:  rgba(240,232,220,.08);
  --white:      #fbf8f2;
  /* surfaces sombres : plus profondes que la page, footer encore plus sombre */
  --dark-surface: #100d0a;
  --footer-surface: #0b0906;
  --footer-logo: #d9cdbb;
  --card: #201b15;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
html { overflow-x: hidden; }
[hidden] { display: none !important; }
/* Pas de zoom au double-tap sur les éléments interactifs (le pinch-to-zoom reste possible) */
a, button, input, select, textarea, label, summary, .lb-fig, .filter-btn, [role="button"] { touch-action: manipulation; }
/* Lien d'évitement : caché hors écran, visible au focus clavier. Anneau de focus aux couleurs du site. */
.skip { position: absolute; left: -999px; top: 0; z-index: 500; padding: .8rem 1.3rem; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: var(--step--1); letter-spacing: .08em; }
.skip:focus { left: 1rem; top: 1rem; }
/* Indicateur de défilement (desktop souris/trackpad) : fine barre colorée en haut de page, à la place de la barre de scroll native.
   Le défilement reste possible à la molette, au trackpad et au clavier. Sur mobile/tactile rien ne change. */
.scroll-progress { display: none; }
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .scroll-progress { display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none; transition: opacity .3s var(--ease); }
  .scroll-progress span { display: block; height: 100%; background: var(--clay); transform: scaleX(0); transform-origin: left; will-change: transform; }
  body.menu-open .scroll-progress { opacity: 0; }
}
/* Titre lisible par les lecteurs d'écran uniquement (garde l'ordre h1 > h2 > h3 sans changer le design) */
.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; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
/* ---------- Cookie consent ---------- */
.cc-banner { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 200; width: min(360px, calc(100vw - 2.4rem)); background: var(--dark-surface); color: var(--on-dark); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.cc-banner__title { font-family: var(--sans); font-weight: 600; font-size: var(--step-0); margin-bottom: .3rem; }
.cc-banner p { font-size: var(--step--1); line-height: 1.6; color: var(--on-dark-soft); }
.cc-banner a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cc-banner__btns { display: flex; gap: .6rem; margin-top: 1rem; }
.cc-banner__btns .btn { flex: 1; justify-content: center; padding: .7em 1em !important; }
.cc-banner .btn { --c: var(--on-dark); }
.cc-banner .btn:hover { color: var(--dark-surface); }
.cc-banner .btn--solid { background: var(--on-dark); color: var(--dark-surface); border-color: var(--on-dark); }
.cc-banner .btn--solid::before { background: var(--clay); }
.cc-banner .btn--solid:hover { color: var(--white); }
.cc-banner__custom { display: block; width: 100%; margin-top: .8rem; background: none; border: 0; color: var(--on-dark-soft); font: inherit; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: center; }
.cc-banner__custom:hover { color: var(--on-dark); }
/* modal */
.cc-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 1.2rem; background: rgba(20,18,15,.55); }
.cc-modal__panel { position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: 18px; padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 40px 90px rgba(20,18,15,.35); }
.cc-modal__panel h3, .cc-modal__title { font-family: var(--title); font-size: var(--step-2); font-weight: 400; line-height: 1.05; margin: 0; }
.cc-modal__intro { font-size: var(--step--1); color: var(--ink-soft); margin: .6rem 0 1.4rem; }
.cc-modal__close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; }
.cc-modal__close:hover { color: var(--ink); }
.cc-opt { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.cc-opt__txt strong { display: block; font-family: var(--sans); font-size: var(--step-0); font-weight: 600; }
.cc-opt__txt span { display: block; font-size: var(--step--1); color: var(--muted); margin-top: .2rem; }
.cc-modal__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.cc-modal__actions .btn { flex: 1; justify-content: center; min-width: 160px; }
/* toggle switch */
.cc-toggle { position: relative; flex-shrink: 0; width: 46px; height: 26px; cursor: pointer; }
.cc-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-toggle__track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .3s var(--ease); }
.cc-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .3s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cc-toggle input:checked + .cc-toggle__track { background: var(--clay); }
.cc-toggle input:checked + .cc-toggle__track::after { transform: translateX(20px); }
.cc-toggle input:disabled { cursor: default; }
.cc-toggle input:disabled + .cc-toggle__track { background: var(--clay); opacity: .5; }
.cc-manage { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--on-dark-muted); cursor: pointer; letter-spacing: .04em; transition: color .3s; }
.cc-manage:hover { color: var(--white); }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
::selection { background: var(--clay); color: var(--white); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--title); font-weight: 400; line-height: 1.05; letter-spacing: -.015em; }
.display { font-size: var(--step-5); line-height: .96; }
h1 { font-size: var(--heading-1); line-height: .98; letter-spacing: -.02em; }
h2 { font-size: var(--heading-2); line-height: 1.05; }
h3 { font-size: var(--heading-3); line-height: 1.1; letter-spacing: -.01em; }
em, .italic { font-style: italic; }
/* The Seasons is never italic (brand rule): keep title accents upright, italics only in Manrope body */
h1, h2, h3, h4, .display, .svc__name, .faq summary,
h1 em, h2 em, h3 em, h4 em, h1 .italic, h2 .italic, h3 .italic, h4 .italic,
.hero__title .italic, .hero__title em { font-style: normal; }
p { max-width: 62ch; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay-deep);
  display: inline-flex;
  align-items: center;
  gap: .8em;
}
.eyebrow::before {
  content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6;
}
.eyebrow.center::after {
  content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6;
}
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--content); margin-inline: auto; }
.section { padding-block: var(--section); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center p { margin-inline: auto; }
.stack > * + * { margin-top: 1.4rem; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3.2rem; }

/* ---------- Buttons / links ---------- */
.btn {
  --c: var(--ink);
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--sans); font-weight: 500; font-size: var(--step--1);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c); padding: 1.05em 1.9em;
  border: 1px solid var(--c); border-radius: 999px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c);
  transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: scaleY(1); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid::before { background: var(--clay-deep); }
.btn--solid:hover { color: var(--white); }
.btn--light { --c: var(--white); }
.btn--light:hover { color: var(--dark-surface); }

.link-underline {
  position: relative; font-family: var(--sans); font-size: var(--step--1);
  letter-spacing: .18em; text-transform: uppercase; padding-bottom: .35em;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-underline:hover::after { transform: scaleX(0); transform-origin: left; }

/* Inline text link (in prose, at body size) */
.tlink { color: var(--clay-deep); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--clay) 55%, transparent); transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.tlink:hover { color: var(--ink); text-decoration-color: currentColor; }

/* SEO prose block, centred readable column to match other sections */
.prose-seo { max-width: 74ch; margin-inline: auto; margin-top: clamp(1.8rem,3.5vw,2.8rem); text-align: center; }
.prose-seo p { margin-inline: auto; }
@media (max-width: 640px) { .prose-seo { text-align: left; } }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.4vw,1.9rem) var(--gutter);
  color: var(--white);
  transition: background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.header.solid {
  background: var(--paper); color: var(--ink);
  padding-block: clamp(.7rem,1.4vw,1rem);
  box-shadow: 0 1px 0 var(--line-soft);
}
/* Pages that open on a light background (legal, etc.): header readable from load */
.header--onlight { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line-soft); }
.header__logo { display: flex; align-items: center; height: 40px; }
.header__logo svg, .header__logo img { height: 100%; width: auto; }
.header__logo .logo-mark { fill: currentColor; height: 36px; }
.nav { display: flex; align-items: center; gap: clamp(.95rem, 1.9vw, 2.8rem); }
.nav a {
  font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  position: relative; padding-bottom: .25em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { border: 1px solid currentColor; border-radius: 999px; padding: .7em 1.4em !important; }
.nav__cta::after { display: none; }
/* Liens du menu principal : jamais de retour à la ligne (évite « À / PROPOS »), resserrés sur laptop.
   Sous 1240px le menu burger prend le relais (voir plus bas) : plus aucun chevauchement avec le logo. */
.nav > a, .nav__item > a { white-space: nowrap; }
@media (max-width: 1439px) {
  .nav > a, .nav__item > a { letter-spacing: .1em; }
  .nav__cta { padding: .65em 1.25em !important; }
}
/* Mega menu (Prestations) */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .1rem .3rem;
  width: min(860px, calc(100vw - 3rem)); padding: .8rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px rgba(20,18,15,.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease); z-index: 80;
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega a { display: block; padding: .7rem .85rem; border-radius: 10px; text-transform: none; letter-spacing: 0; }
.mega a::after { display: none; }
.mega a:hover { background: var(--paper-2); }
.mega strong { display: block; font-family: var(--sans); font-weight: 600; font-size: var(--step-0); line-height: 1.2; color: var(--ink); }
.mega span { display: block; margin-top: .15rem; font-size: var(--step--1); color: var(--muted); letter-spacing: .02em; text-transform: none; }
.header__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); }
/* Bouton thème clair/sombre */
/* Boutons Instagram / Facebook de la barre de navigation (masqués sous 1240px : le menu burger propose déjà les liens) */
.header__social { display: flex; align-items: center; gap: .4rem; }
.social-btn { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: inherit; opacity: .85; transition: opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.social-btn svg { display: block; width: 15px; height: 15px; }
.social-btn:hover, .social-btn:focus-visible { opacity: 1; background: var(--clay); border-color: var(--clay); color: var(--white); }
@media (max-width: 1239px) { .header__social { display: none; } }
.theme-toggle { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; cursor: pointer; opacity: .85; transition: opacity .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.theme-toggle:hover { opacity: 1; transform: rotate(12deg); }
.theme-toggle svg { display: block; }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: inline; }
.burger { display: none; width: 30px; height: 16px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: .4s var(--ease); }
.burger span:nth-child(1){ top: 0; } .burger span:nth-child(2){ bottom: 0; }
/* Menu ouvert : les deux traits se croisent en croix (fermer) */
.burger.is-open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { bottom: 7px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99; background: var(--dark-surface); color: var(--on-dark);
  height: 100vh; height: 100dvh; /* dvh = hauteur visible reelle sur iOS (barre du navigateur) */
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--gutter) + 4.2rem) var(--gutter) calc(var(--gutter) + 1rem + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease-slow), visibility 0s linear .7s;
  pointer-events: none; overflow: hidden auto; overscroll-behavior: contain; max-width: 100vw;
}
/* Menu ouvert : la barre du haut passe en clair sur le fond sombre du menu */
body.menu-open .header { background: transparent; color: var(--white); box-shadow: none; }
.menu nav a {
  max-width: 100%; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  transition-delay: var(--d, 0s);
}
.menu.open { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; transition: clip-path .7s var(--ease-slow), visibility 0s; }
.menu nav { display: flex; flex-direction: column; gap: 0; }
.menu nav > a {
  font-family: var(--sans); font-size: clamp(1.05rem, 4vw, 1.25rem); font-weight: 500;
  letter-spacing: .01em; line-height: 1.2; padding-block: .68rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.menu nav > a:hover { color: var(--clay); }
.menu.open nav a { opacity: 1; transform: none; }
.menu__subs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 1rem; padding: 0; }
.menu nav .menu__subs a.menu__sub {
  font-family: var(--sans); font-size: .72rem; font-weight: 500; line-height: 1;
  padding: .55rem .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft);
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
}
.menu nav .menu__subs a.menu__sub:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }
.menu__foot { margin-top: auto; padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; color: var(--on-dark-soft); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; }
.menu__foot a:hover { color: var(--white); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero.is-in .hero__media img { transform: scale(1); transition: transform 2.4s var(--ease-slow); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,18,15,.5) 0%, rgba(20,18,15,.18) 32%, rgba(20,18,15,.62) 74%, rgba(20,18,15,.82) 100%); }
.hero__inner { padding: var(--gutter); padding-bottom: clamp(3rem,7vh,6rem); width: 100%; }
.hero__h1 { margin: 0; font-weight: 400; }
.hero__kicker { display: block; font-family: var(--sans); font-weight: 500; font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--white); text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.kicker-br { display: none; }
.hero__title { font-size: clamp(2.8rem, 9vw, 8.5rem); line-height: .95; font-weight: 400; max-width: 15ch; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
@media (max-width: 700px) {
  .hero__kicker { font-size: .64rem; letter-spacing: .1em; line-height: 1.5; }
  .kicker-br { display: inline; }
}
.hero__title .italic { color: var(--on-dark-soft); }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.5rem; }
.hero__meta p { max-width: 34ch; color: rgba(255,255,255,.86); }
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.scroll-cue span { width: 1px; height: 46px; background: rgba(255,255,255,.6); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateY(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateY(-100%)} 50%{transform:translateY(0)} 100%{transform:translateY(100%)} }

/* Page hero (interior pages) */
.phero { position: relative; min-height: 74svh; display: grid; align-items: end; color: var(--white); overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,18,15,.35), rgba(20,18,15,.55)); }
.phero__inner { padding: var(--gutter); padding-bottom: clamp(2.4rem,6vh,4.5rem); }
.phero__inner h1 { font-size: clamp(2.6rem,7vw,6rem); max-width: 18ch; }
.phero .eyebrow { color: var(--on-dark-soft); }
.phero .article__meta { color: var(--on-dark-soft); }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); padding-block: clamp(1.1rem,2vw,1.7rem); overflow: hidden; }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: slide var(--dur, 42s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--serif); font-style: normal; font-size: var(--step-2); color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee span::after { content: "·"; color: var(--clay); }
/* Bandeau d'extraits d'avis (page contact) : bande pleine largeur, texte discret, durée réglée par --dur */
.marquee--quotes { padding-block: clamp(.95rem, 1.7vw, 1.35rem); background: var(--paper-2); }
.marquee--quotes .marquee__track, .marquee--quotes span { gap: 2rem; }
.marquee--quotes span { font-size: var(--step-1); }
/* Mouvement réduit : plus de défilement automatique, le bandeau se fait défiler à la main */
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee__track { animation: none !important; } }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Editorial split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__body { max-width: 46ch; }
.split .num { font-family: var(--serif); font-style: normal; font-size: var(--step-2); color: var(--clay); }

/* ---------- Figure reveal ---------- */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-slow); }
.reveal-img::after {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  transform: scaleY(1); transform-origin: top; transition: transform 1.1s var(--ease-slow);
}
.reveal-img.is-in::after { transform: scaleY(0); }
.reveal-img.is-in img { transform: scale(1.001); }
.reveal-img:hover img { transform: scale(1.05); }

/* full-bleed band */
.band { position: relative; height: clamp(60vh, 78vh, 900px); overflow: hidden; display: grid; align-items: center; justify-items: center; color: var(--white); text-align: center; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 95% at center, rgba(16,13,10,.62) 0%, rgba(16,13,10,.44) 100%); z-index: 1; }
.band__inner { position: relative; z-index: 2; padding: var(--gutter); max-width: 40ch; text-shadow: 0 2px 26px rgba(0,0,0,.6); }
.band .parallax { will-change: transform; }

/* ---------- Portfolio grid ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.6rem, 1.4vw, 1.4rem); }
.grid figure { overflow: hidden; }
.grid img { width: 100%; height: 100%; object-fit: cover; }
.g-6 { grid-column: span 6; } .g-5 { grid-column: span 5; } .g-7 { grid-column: span 7; }
.g-4 { grid-column: span 4; } .g-8 { grid-column: span 8; } .g-3 { grid-column: span 3; }
.g-12 { grid-column: span 12; }
.ar-45 { aspect-ratio: 4/5; } .ar-32 { aspect-ratio: 3/2; } .ar-23 { aspect-ratio: 2/3; }
.ar-11 { aspect-ratio: 1/1; } .ar-169 { aspect-ratio: 16/9; } .ar-34 { aspect-ratio: 3/4; }
.mt-grid { margin-top: clamp(3rem,6vw,7rem); }

/* masonry-ish columns for full galleries */
.columns { column-count: 3; column-gap: clamp(.6rem,1.4vw,1.4rem); }
.columns figure { break-inside: avoid; margin-bottom: clamp(.6rem,1.4vw,1.4rem); overflow: hidden; }

/* Editorial 2-column gallery grid: landscapes can span both columns, portraits stay 1 col */
.gal-w { max-width: 1040px; margin-inline: auto; }
.gal2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; gap: clamp(.5rem, 1.2vw, 1.1rem); max-width: 1040px; margin-inline: auto; }
.gal2 .gal2__cell { margin: 0; overflow: hidden; }
.gal2 .gal2__cell.span-2 { grid-column: span 2; }
.gal2 .gal2__cell img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .gal2 { grid-template-columns: 1fr; }
  .gal2 .gal2__cell.span-2 { grid-column: auto; }
}

/* ---------- Services index (hover reveal) ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
  border-bottom: 1px solid var(--line); padding: clamp(1.3rem,2.6vw,2.4rem) .4rem;
  position: relative; transition: padding-inline .5s var(--ease);
}
.svc__idx { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .1em; color: var(--muted); }
.svc__name { font-family: var(--title); font-size: var(--step-3); font-weight: 400; transition: transform .5s var(--ease), color .5s var(--ease); }
.svc__go { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: color .4s var(--ease); }
.svc:hover { padding-left: 1.5rem; }
.svc:hover .svc__name { color: var(--clay-deep); }
.svc:hover .svc__go { color: var(--ink); }
.svc__peek {
  position: fixed; top: 0; left: 0; width: 22vw; max-width: 340px; aspect-ratio: 3/4;
  pointer-events: none; z-index: 60; opacity: 0; overflow: hidden;
  transform: translate(-50%,-50%) scale(.9); transition: opacity .4s var(--ease), transform .5s var(--ease);
  box-shadow: 0 30px 60px rgba(20,18,15,.25);
}
.svc__peek img { width: 100%; height: 100%; object-fit: cover; }
.svc__peek.show { opacity: 1; }
@media (hover: none) { .svc__peek { display: none; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-block: 1px solid var(--line); }
.stat { padding: clamp(2rem,4vw,3.2rem) 1rem; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); line-height: 1; color: var(--ink); }
.stat > span { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stat b span { font-size: inherit; letter-spacing: normal; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(2rem,4vw,3.5rem); }
.quote { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.quote p { font-family: var(--sans); font-size: var(--text-base); font-weight: 400; line-height: 1.6; color: var(--ink-soft); }
.quote cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stars { color: var(--clay); letter-spacing: .2em; font-size: .8rem; margin-bottom: 1rem; }

/* Testimonials slider */
.tslider { position: relative; }
.tslider__track {
  display: flex; gap: clamp(1.5rem,3vw,3rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; padding-bottom: .4rem;
}
.tslider__track::-webkit-scrollbar { display: none; }
.tslide { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 720px) { .tslide { flex-basis: calc((100% - clamp(1.5rem,3vw,3rem)) / 2); } }
@media (min-width: 1080px) { .tslide { flex-basis: calc((100% - 2 * clamp(1.5rem,3vw,3rem)) / 3); } }
/* Avis longs : texte replié sur 10 lignes (le carrousel garde une hauteur raisonnable) ; le bouton « Lire la suite » est ajouté par main.js seulement si le texte est coupé */
.tslide p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
.tslide.is-open p { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
.quote__more { margin-top: .9rem; padding: 0; border: 0; background: none; font: inherit; font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; cursor: pointer; }
.quote__more:hover { color: var(--ink); }
.tslider__nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: clamp(1.8rem,3.5vw,2.6rem); }
.tslider__btn {
  width: 2.8rem; height: 2.8rem; flex: none; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tslider__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tslider__dots { display: flex; align-items: center; gap: .55rem; }
.tdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); }
.tdot.is-active { background: var(--clay); transform: scale(1.4); }
/* Glisser à la souris (main.js) : curseur « main », pas de sélection de texte ni d'image fantôme ; le tactile défile nativement.
   .is-free = accroche (scroll-snap) coupée pendant le geste et l'animation de retour sur la carte la plus proche */
@media (hover: hover) and (pointer: fine) {
  .tslider__track { cursor: grab; -webkit-user-select: none; user-select: none; }
  .tslider__track a, .tslider__track img { cursor: inherit; -webkit-user-drag: none; }
  .tslider__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
  .tslider__track.is-dragging * { pointer-events: none; }
  .tslider__track.is-free { scroll-snap-type: none; }
}
/* Slider de cartes (lieux et galeries des pages « zones ») : même mécanique que le slider d'avis ; 1 carte et un morceau de la suivante sur mobile,
   2 puis 3 cartes sur grand écran ; quand il y a peu de cartes, elles restent alignées à gauche (jamais centrées) et les flèches disparaissent (main.js) */
.tslider--cards { --cgap: clamp(1rem, 2.5vw, 2rem); }
.tslider--cards .tslider__track { gap: var(--cgap); }
.tslider--cards .tslide { flex-basis: 78%; }
@media (min-width: 720px) { .tslider--cards .tslide { flex-basis: calc((100% - var(--cgap)) / 2); } }
@media (min-width: 1080px) { .tslider--cards .tslide { flex-basis: calc((100% - 2 * var(--cgap)) / 3); } }

/* Gallery floating "back" button (always visible while scrolling) */
.gal-back {
  position: fixed; z-index: 60;
  bottom: calc(clamp(1rem, 4vw, 1.8rem) + env(safe-area-inset-bottom)); left: var(--gutter);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62rem 1.05rem;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid var(--line-soft); border-radius: 999px;
  font-family: var(--sans); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); box-shadow: 0 8px 26px rgba(20,18,16,.14);
  transition: gap .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.gal-back::before { content: "\2039"; font-size: 1.3em; line-height: 1; }
.gal-back:hover { gap: .82em; background: var(--paper); }
@media (max-width: 620px) { .gal-back { font-size: .68rem; padding: .5rem .85rem; letter-spacing: .1em; } }

/* Bouton fixe « Vérifier ma date » (mobile uniquement). Apparaît après le haut de page, se masque près du
   bandeau final / footer, pendant le menu, la visionneuse photo et tant que le bandeau cookies est affiché. */
.sticky-cta { display: none; }
@media (max-width: 820px) {
  .sticky-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    position: fixed; z-index: 90; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom));
    padding: .95em 1.6em; border-radius: 999px;
    background: var(--clay-deep); color: var(--white); border: 1px solid var(--clay-deep); /* terracotta : reste visible sur fond clair comme sur les blocs sombres */
    font-family: var(--sans); font-weight: 600; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 14px 34px rgba(20,18,15,.32);
    transform: translate(-50%, 160%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s linear .5s;
  }
  .sticky-cta.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s; }
  .sticky-cta svg { flex: none; }
  :root[data-theme="dark"] .sticky-cta { background: var(--clay); border-color: var(--clay); color: #14110d; }
}

/* Bouton « retour en haut » (toutes les pages) : en bas à droite, visible après un écran de défilement (main.js). Masqué avec le menu, la visionneuse
   et le bandeau cookies. Sous 360 px de large il passe au-dessus du bouton « Vérifier ma date » quand celui-ci est affiché, pour ne jamais le chevaucher. */
.to-top {
  position: fixed; z-index: 85; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid var(--line); color: var(--ink); box-shadow: 0 8px 26px rgba(20,18,16,.16);
  opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease), bottom .4s var(--ease), visibility 0s linear .45s, background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.to-top.is-visible {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .35s var(--ease), transform .45s var(--ease), bottom .4s var(--ease), visibility 0s, background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.to-top svg { width: 1.1rem; height: 1.1rem; flex: none; }
.to-top:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 400px) { .to-top { width: 2.6rem; height: 2.6rem; } }
@media (max-width: 359px) { .sticky-cta.is-visible + .to-top { bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }

/* ---------- CTA band ---------- */
.cta { background: var(--dark-surface); color: var(--on-dark); text-align: center; }
.cta h2 { color: var(--white); }
.cta .lead { color: var(--on-dark-soft); }
.cta .eyebrow { color: #c8956a; } /* clay éclairci : lisible (>= 4.5:1) sur fond sombre */

/* ---------- Feature list ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(1.6rem,3vw,3rem); }
.feature { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.feature .num { font-family: var(--serif); font-style: normal; font-size: var(--step-2); color: var(--clay); }
.feature h3 { font-size: var(--step-1); margin-top: .4rem; }
.feature p { color: var(--ink-soft); margin-top: .6rem; font-size: var(--step-0); }

/* ---------- À propos : parcours, citation, planche de photos ---------- */
.features--steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .features--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features--steps { grid-template-columns: minmax(0, 1fr); } }
.statement h2 { font-size: var(--step-3); line-height: 1.1; max-width: 17ch; margin-inline: auto; }
.statement .lead { max-width: 38ch; }
.me-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.4rem); }
.me-grid figure { aspect-ratio: 4/5; }
@media (max-width: 820px) { .me-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(1.2rem,2.5vw,2rem); }
.price {
  border: 1px solid var(--line); padding: clamp(1.8rem,3vw,2.6rem); background: var(--card);
  display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.price:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(20,18,15,.1); }
.price--feat { background: var(--dark-surface); color: var(--on-dark); border-color: var(--dark-surface); }
.price--feat h3, .price--feat .price__num { color: var(--white); }
.price--feat .price__list li { border-color: rgba(255,255,255,.16); }
.price__tag { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--clay-deep); }
.price--feat .price__tag { color: var(--on-dark-soft); }
.price h3 { font-size: var(--step-2); margin-top: .8rem; }
.price__num { font-family: var(--serif); font-size: var(--step-2); margin-top: .4rem; }
.price__list { margin-top: 1.4rem; flex: 1; }
.price__list li { padding: .7rem 0 .7rem 1.5rem; border-top: 1px solid var(--line); font-size: var(--text-base); color: inherit; position: relative; }
.price__list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.price .btn { margin-top: 1.8rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: clamp(1.2rem,2.4vw,1.9rem) 0; display: flex; justify-content: space-between; align-items: center; gap: 2rem; font-family: var(--title); font-size: var(--step-1); font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; width: 20px; height: 20px; position: relative; }
.faq summary .ic::before, .faq summary .ic::after { content: ""; position: absolute; background: var(--clay); transition: transform .4s var(--ease); }
.faq summary .ic::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq summary .ic::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq details[open] summary .ic::after { transform: translateX(-50%) scaleY(0); }
.faq details.closing summary .ic::after { transform: translateX(-50%) scaleY(1); }
.faq__a { overflow: hidden; }
.faq__a p { padding-bottom: 1.6rem; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); }
.field { margin-bottom: 1.6rem; }
.field label { display: block; font-size: var(--step--1); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-weight: 400; font-size: var(--text-base); color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: .7em 0; transition: border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--clay); }
.field textarea { resize: vertical; min-height: 120px; }
/* Liste déroulante lisible en clair comme en sombre */
.field select { background-color: var(--paper); color: var(--ink); }
.field select option { background: var(--paper); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.contact-info dt { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 1.6rem; }
.contact-info dd { font-family: var(--sans); font-weight: 500; font-size: var(--step-0); margin-top: .3rem; }
.contact-info dd a:hover { color: var(--clay-deep); }

/* ---------- Local SEO chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .55em 1.1em; font-size: var(--step--1); letter-spacing: .04em; color: var(--ink-soft); transition: .4s var(--ease); }
.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* prose */
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 1.2rem; }
.prose h2 { margin-top: 2.6rem; margin-bottom: 1rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; margin-bottom: .6rem; }
.prose ul { margin: 1rem 0; }
.prose ul li { padding: .5rem 0 .5rem 1.6rem; position: relative; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } }
.blog-card { display: flex; flex-direction: column; }
.blog-card__media { overflow: hidden; border-radius: 12px; aspect-ratio: 3/2; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__meta { margin-top: 1rem; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.blog-card h3 { font-size: var(--step-2); margin: .5rem 0 .6rem; font-weight: 400; }
.blog-card p { color: var(--ink-soft); }
.blog-card .link-underline { margin-top: 1rem; }
.article { max-width: var(--content); margin-inline: 0; }
.article__lead { font-family: var(--sans); font-size: var(--text-lead); line-height: 1.5; color: var(--ink-soft); font-weight: 400; margin-bottom: 2rem; }
.article__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 1.2rem; }
.article__img { margin: 2.6rem 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3/2; }
.article__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Footer ---------- */
.footer { background: var(--footer-surface); color: var(--on-dark-soft); padding-top: clamp(3.6rem, 6vw, 5.5rem); }
.footer a { transition: color .3s; }
.footer a:hover { color: var(--white); }
/* Pied de page compact : un seul grand logo (colonne de gauche), navigation sur 2 colonnes, contact à droite */
.footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(min-content, .9fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; padding-bottom: clamp(2.4rem, 4vw, 3.4rem); border-bottom: 1px solid rgba(255,255,255,.14); }
.footer__brand .logo-mark, .footer__brand svg { display: block; height: clamp(92px, 10.5vw, 160px); width: auto; }
.footer__brand svg path { fill: var(--footer-logo); }
.footer__nav { columns: 2; column-gap: clamp(1.6rem, 3vw, 3rem); }
.footer__nav li { break-inside: avoid; }
.footer ul a[href^="mailto:"] { white-space: nowrap; } /* l'adresse e-mail reste sur une seule ligne */
.footer h4, .footer__title { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin-bottom: 1.4rem; font-weight: 400; }
.footer ul li { padding: .35rem 0; font-size: var(--step-0); }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); font-size: var(--step--1); letter-spacing: .04em; color: var(--on-dark-muted); }
.footer__bar a { color: var(--on-dark-muted); }
.footer__seo { padding-top: clamp(1.8rem, 3vw, 2.6rem); padding-bottom: clamp(1.6rem, 2.6vw, 2.2rem); display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.footer__seo a { font-size: .78rem; color: var(--on-dark-muted); }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal="fade"] { transform: none; }
.stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-slow), transform .9s var(--ease-slow); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(2){ transition-delay: .08s; }
.stagger.is-in > *:nth-child(3){ transition-delay: .16s; }
.stagger.is-in > *:nth-child(4){ transition-delay: .24s; }
.stagger.is-in > *:nth-child(5){ transition-delay: .32s; }
.stagger.is-in > *:nth-child(6){ transition-delay: .40s; }

/* Titres de page (accueil comprise) : la montée du titre est portée par le CSS et non par main.js. Elle démarre dès le premier affichage de la page, donc
   en même temps que le rideau de la transition entre pages. Avant, elle attendait main.js puis l'IntersectionObserver : sur mobile, quand le script
   arrivait après le début du rideau, le titre montait bien après la transition. Léger retard (.12 s) pour que le titre soit déjà en mouvement quand le rideau le découvre. */
.reveal-line { display: block; overflow: hidden; padding-bottom: .16em; }
.reveal-line > * { display: block; transform: translateY(130%); animation: line-up 1.1s var(--ease-slow) calc(var(--d, 0s) + .12s) both; }
@keyframes line-up { from { transform: translateY(130%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal-line > * { animation: none; transform: none; } }

/* ---------- Gallery covers ---------- */
.back-link { display: inline-flex; align-items: center; gap: .6em; font-family: var(--sans); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease), gap .3s var(--ease); }
.back-link::before { content: "\2039"; font-size: 1.4em; line-height: 1; }
.back-link:hover { color: var(--ink); gap: .9em; }
.gal-credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.2rem; margin-top: 1.6rem; max-width: 60rem; }
@media (max-width: 640px) { .gal-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gal-credits dt { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gal-credits dd { font-family: var(--sans); font-weight: 500; font-size: var(--step-0); margin-top: .25rem; color: var(--ink); }

/* Before / after case study (retouch + poster) */
.ba-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 680px) { .ba-compare { grid-template-columns: 1fr; gap: 2rem; } }
.ba-cell { position: relative; }
.ba-cell figure { border-radius: 12px; overflow: hidden; margin: 0; }
.ba-cell img { width: 100%; height: auto; display: block; }
.ba-badge { position: absolute; top: 1rem; left: 1rem; z-index: 3; font-family: var(--sans); font-weight: 600; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: .42rem .85rem; border-radius: 999px; }
.ba-badge--after { background: var(--clay); color: var(--white); }
.ba-cap { margin-top: .9rem; font-size: var(--step--1); letter-spacing: .02em; color: var(--muted); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.gal-card { display: block; position: relative; overflow: hidden; }
.gal-card__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.gal-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-slow); }
.gal-card:hover img { transform: scale(1.05); }
.gal-card__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.gal-card__cap h3 { font-size: var(--step-1); }
.gal-card__cap span { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* « Voir plus » toujours visible (pas seulement au survol) : sur mobile, rien ne dit sinon que la vignette ouvre un album complet */
.gal-card__over { position: absolute; inset: auto 0 0 0; display: flex; justify-content: flex-end; padding: clamp(.7rem, 1.4vw, 1rem); background: linear-gradient(0deg, rgba(20,18,15,.36), rgba(20,18,15,0) 40%); pointer-events: none; }
.gal-card__over span { display: inline-flex; align-items: center; gap: .6em; color: var(--white); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(20,18,15,.35), 0 1px 12px rgba(20,18,15,.6); padding-bottom: .3em; border-bottom: 1px solid rgba(255,255,255,0); transition: border-color .4s var(--ease); }
.gal-card__over svg { flex: none; width: 13px; height: 13px; transition: transform .4s var(--ease); }
.gal-card:hover .gal-card__over span, .gal-card:focus-visible .gal-card__over span { border-bottom-color: rgba(255,255,255,.85); }
.gal-card:hover .gal-card__over svg, .gal-card:focus-visible .gal-card__over svg { transform: translateX(3px); }
/* Cartes de la page « Lieux de mariage » : 3 colonnes (2 puis 1 sur petit écran), alignées à gauche ; une ou deux cartes ne sont jamais centrées */
.gal-grid--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .gal-grid--cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gal-grid--cols3 { grid-template-columns: minmax(0, 1fr); } }

/* portrait placeholder (About) */
.portrait-empty { display: grid; place-content: center; background: var(--paper-2); border: 1px dashed var(--line); min-height: 320px; }
.split__media.portrait-empty { aspect-ratio: 4/5; }
.portrait-empty span { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* gallery filter bar */
.gal-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.filter-btn {
  font-family: var(--sans); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .7em 1.4em;
  transition: .4s var(--ease);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gal-filter-grid .hide { display: none; }
.gal-empty { text-align: center; color: var(--muted); padding-top: 2rem; }

/* clickable gallery figures */
.lb-fig { cursor: zoom-in; }
.lb-fig:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(18,16,13,.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lb-stage { max-width: 92vw; max-height: 86vh; margin: 0; display: flex; }
.lb-img {
  max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 40px 100px rgba(0,0,0,.5); cursor: zoom-in;
  opacity: 0; transform: scale(.97); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.lightbox.open .lb-img { opacity: 1; transform: none; }
.lb-img.zoomed { cursor: zoom-out; max-width: none; max-height: none; }
.lb-stage.pan { overflow: auto; max-width: 100vw; max-height: 100vh; }
.lb-close, .lb-nav {
  position: absolute; z-index: 2; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px);
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-content: center;
  font-size: 2rem; line-height: 1; transition: .3s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.16); color: #fff; }
.lb-close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); font-size: 1.6rem; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(1rem,3vw,2.5rem); }
.lb-next { right: clamp(1rem,3vw,2.5rem); }
.lb-nav:active { transform: translateY(-50%) scale(.92); }
.lb-count { position: absolute; bottom: clamp(1rem,3vw,2rem); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: var(--step--1); letter-spacing: .2em; }
@media (max-width: 640px) {
  .lb-nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .lb-prev { left: .6rem; } .lb-next { right: .6rem; }
}

/* ---------- Page vidéos (réels + vidéos, aperçus muets, lecteur plein écran) ---------- */
.vid-consent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; padding: 1.2rem 1.5rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.vid-consent[hidden] { display: none; }
.vid-consent p { margin: 0; max-width: 64ch; font-size: var(--step-0); color: var(--ink-soft); }
.vid-consent .btn { flex: none; }
.vid .gal-filter { margin-bottom: clamp(2.4rem, 5vw, 4.4rem); }
.vid-section { margin-bottom: clamp(3rem, 6vw, 5.5rem); transition: opacity .25s var(--ease); }
.vid-section[hidden] { display: none; }
.vid.is-switching .vid-section { opacity: 0; }
.vid-head { display: flex; align-items: center; gap: .9rem; }
.vid-head h2 { margin: 0; }
.vid-count { font-family: var(--sans); font-size: var(--step--1); letter-spacing: .1em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1em .75em; }
.vid-intro { margin: .9rem 0 clamp(1.8rem, 3.2vw, 2.6rem); max-width: 56ch; color: var(--ink-soft); }
.vid-grid { display: grid; column-gap: clamp(.9rem, 1.8vw, 1.7rem); row-gap: clamp(2.6rem, 4.8vw, 4rem); }
.vid-grid--videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vid-grid--reels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vid-card { position: relative; display: block; min-width: 0; color: inherit; cursor: pointer; touch-action: manipulation; }
.vid-media { display: block; position: relative; overflow: hidden; border-radius: 14px; background: #161310; isolation: isolate; }
.vid-grid--videos .vid-media { aspect-ratio: 16 / 9; }
.vid-grid--reels .vid-media { aspect-ratio: 9 / 16; }
.vid-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.5); background: radial-gradient(120% 120% at 25% 15%, #3b322a 0%, #1a1612 70%); }
.vid-ph svg { width: 46px; height: 46px; fill: currentColor; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .5s; }
.vid-frame { position: absolute; top: 0; left: 50%; height: 100%; width: 100%; transform: translateX(-50%) scale(1.01); border: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: #111; }
.vid-grid--reels .vid-frame { width: 316%; } /* lecteur 16:9 recadré sur un format 9:16 */
.vid-card.is-live .vid-frame { opacity: 1; }
.vid-card.is-live .vid-poster { opacity: 0; }
@media (hover: hover) { .vid-card:hover .vid-poster { transform: scale(1.04); } }
.vid-tag { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .35em .85em; border-radius: 999px; }
.vid-sound { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; transform: scale(.85); opacity: 0; transition: .25s var(--ease); }
.vid-sound svg { width: 24px; height: 24px; fill: currentColor; }
/* Ondes sonores : chaque barre suit le même cycle (1,17 s), décalé par --p ; en pause (hauteurs fixes --s) tant que le badge est masqué */
.vid-sound rect { transform-box: fill-box; transform-origin: center; transform: scaleY(var(--s, .5)); animation: vid-wave 1.17s linear infinite paused; animation-delay: calc(var(--p, 0) * -41.79ms); }
.vid-card:hover .vid-sound rect, .vid-card:focus-visible .vid-sound rect { animation-play-state: running; }
@keyframes vid-wave{0%{transform:scaleY(.211)}3.57%{transform:scaleY(.263)}7.14%{transform:scaleY(.263)}10.71%{transform:scaleY(.316)}14.29%{transform:scaleY(.368)}17.86%{transform:scaleY(.368)}21.43%{transform:scaleY(.421)}25%{transform:scaleY(.474)}28.57%{transform:scaleY(.526)}32.14%{transform:scaleY(.579)}35.71%{transform:scaleY(.684)}39.29%{transform:scaleY(.737)}42.86%{transform:scaleY(.842)}46.43%{transform:scaleY(.895)}50%{transform:scaleY(1)}53.57%{transform:scaleY(.895)}57.14%{transform:scaleY(.842)}60.71%{transform:scaleY(.737)}64.29%{transform:scaleY(.684)}67.86%{transform:scaleY(.579)}71.43%{transform:scaleY(.526)}75%{transform:scaleY(.474)}78.57%{transform:scaleY(.421)}82.14%{transform:scaleY(.368)}85.71%{transform:scaleY(.316)}89.29%{transform:scaleY(.316)}92.86%{transform:scaleY(.263)}96.43%{transform:scaleY(.211)}100%{transform:scaleY(.211)}}
.vid-card:hover .vid-sound, .vid-card:focus-visible .vid-sound { opacity: 1; transform: scale(1); }
@media (hover: none) { .vid-sound { opacity: 1; transform: none; width: 36px; height: 36px; } .vid-sound svg { width: 20px; height: 20px; } .vid-sound rect { animation-play-state: running; } }
.vid-name { margin: 1.1rem 0 0; font-size: var(--step-1); line-height: 1.25; }
/* Apparition des cartes (au clic sur un filtre) : fondu + glissement, en cascade */
@keyframes vid-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
.vid-card.is-new { animation: vid-in .65s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
/* Lecteur plein écran */
.vid-modal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; background: rgba(14,12,10,.94); padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overscroll-behavior: contain; }
.vid-modal.is-open { display: flex; }
.vid-stage { position: relative; width: min(1200px, 100%, calc(86vh * 16 / 9)); width: min(1200px, 100%, calc(86dvh * 16 / 9)); aspect-ratio: 16 / 9; }
.vid-stage.is-vertical { width: min(100%, calc(86vh * 9 / 16)); width: min(100%, calc(86dvh * 9 / 16)); aspect-ratio: 9 / 16; }
.vid-stage iframe, .vid-stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; background: #000; }
.vid-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2; width: 54px; height: 54px; display: grid; place-content: center; border-radius: 999px; font-size: 1.6rem; line-height: 1; color: rgba(255,255,255,.88); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.vid-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.vid-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: clamp(1.2rem, 4vw, 2.4rem); text-align: center; color: var(--on-dark); background: #1b1713; border-radius: 14px; }
.vid-gate p { margin: 0; max-width: 46ch; color: var(--on-dark-soft); }
.vid-gate__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
@media (max-width: 991px) {
  .vid-grid--videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-grid--reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vid .gal-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .vid .gal-filter::-webkit-scrollbar { display: none; }
  .vid .filter-btn { flex: none; }
  .vid-grid--videos { grid-template-columns: minmax(0, 1fr); row-gap: 2.6rem; }
  .vid-grid--reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
  .vid-grid--reels::-webkit-scrollbar { display: none; }
  .vid-grid--reels .vid-card { flex: 0 0 58%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .vid-frame, .vid-poster, .vid-section { transition: none; } .vid-card.is-new { animation: none; } .vid-sound rect { animation: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .grid { gap: .6rem; }
}
/* Le menu horizontal a besoin d'environ 1100px : en dessous de 1240px, menu burger (logo, liens et bouton ne se chevauchent jamais) */
@media (max-width: 1239px) {
  .nav { display: none; }
  .burger { display: block; }
}
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse .split__media { order: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2){ border-right: none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; }
  .columns { column-count: 2; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  [class*="g-"] { grid-column: span 6; }
  .g-12 { grid-column: span 12; }
  .svc { grid-template-columns: auto 1fr auto; gap: 1rem; }
  /* Titres en police de titre mais pas en <h2> : sans interligne serré ils héritent de celui du texte (1.6) et un titre sur deux lignes
     (« Corporate & marque », une question de FAQ) s'étire en un long espace */
  .svc__name { font-size: var(--step-2); line-height: 1.12; }
  .faq summary { line-height: 1.3; }
}
@media (max-width: 640px) {
  .scroll-cue { display: none; }
  /* Footer mobile : un seul logo (celui du haut, agrandi), on retire le grand wordmark */
  .footer__brand .logo-mark, .footer__brand svg { height: 54px; }
  /* Barre du bas : empilée, alignée à gauche, marges régulières + zone sûre iOS */
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer__bar > span:last-child { gap: .8rem 1.4rem; }
  .footer { padding-bottom: env(safe-area-inset-bottom); }
  /* Le grand logo (qui espaçait le bloc) est masqué sur mobile : on remet la marge haute */
  .footer__seo { padding-top: 2.6rem; }
}
@media (max-width: 520px) {
  .columns { column-count: 1; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .hero__meta { flex-direction: column; align-items: flex-start; }
  [class*="g-"], .g-12 { grid-column: span 12; }
}

/* ---------- Transitions entre les pages ----------
   View Transitions inter-documents (Chrome, Edge, Safari) ; les autres navigateurs ignorent la règle et gardent une apparition douce (.no-vt).
   Aller vers une page : l'ancienne recule et s'assombrit pendant que la nouvelle monte du bas de l'écran, comme un rideau.
   Retour arrière, rechargement ou clic sur une galerie (.vt-soft, posé par le script du <head>) : simple fondu ;
   la vignette de la galerie cliquée s'agrandit en bannière (gal-cover). L'en-tête reste en place. Désactivé si le visiteur demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.header { view-transition-name: site-header; }
/* Éléments fixes : ils restent en place au lieu d'être balayés avec la page. Le menu déroulant se referme dès le départ (classe posée par le script du <head>) */
.cc-banner { view-transition-name: cc-banner; }
.sticky-cta.is-visible { view-transition-name: sticky-cta; }
.to-top.is-visible { view-transition-name: to-top; }
html.vt-leaving .nav__item .mega { opacity: 0; visibility: hidden; transition: none; }
::view-transition { background: #14110d; }
::view-transition-group(root) { animation-duration: .85s; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-back .85s cubic-bezier(.76, 0, .24, 1) both; }
::view-transition-new(root) { animation: vt-rise .85s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes vt-back { to { transform: translateY(-6vh) scale(.97); opacity: .35; } }
@keyframes vt-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
html.vt-soft::view-transition-old(root) { animation: vt-fade-out .5s ease both; }
html.vt-soft::view-transition-new(root) { animation: vt-fade-in .6s ease both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
::view-transition-group(site-header) { animation-duration: .85s; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
::view-transition-group(gal-cover) { animation-duration: .85s; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
::view-transition-old(gal-cover), ::view-transition-new(gal-cover) { height: 100%; object-fit: cover; mix-blend-mode: normal; }
.no-vt main { animation: page-in .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .no-vt main { animation: none; } }