/* ═══════════════════════════════════════════════════════
   STUDIO7J — Design System v2
   Typographie : Cormorant Garamond (display) + DM Sans (UI)
   Palette     : Cream / Ink / Ochre / Stone
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* Couleurs */
  --cream:       #F7F4EF;
  --cream-warm:  #EDE8DF;
  --white:       #FFFFFF;
  --ink:         #1A1714;
  --ink-60:      rgba(26, 23, 20, 0.60);
  --ink-20:      rgba(26, 23, 20, 0.20);
  --ink-08:      rgba(26, 23, 20, 0.08);
  --stone:       #5C5650;   /* #7A746C → #5C5650 : ratio 6.5:1 sur cream, WCAG AA ✓ */
  --sand:        #DDD7CE;
  --ochre:       #C96B2D;
  --ochre-dark:  #A85523;
  --ochre-light: rgba(201, 107, 45, 0.08);

  /* Typographie */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Échelle typographique — minimums WCAG */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base: 16px;
  --text-md:  18px;
  --text-lg:  24px;
  --text-xl:  36px;
  --text-2xl: 52px;
  --text-3xl: 72px;

  /* Espacement (base 4px) */
  --s1:  4px;  --s2:  8px;  --s3:  12px;
  --s4:  16px; --s5:  20px; --s6:  24px;
  --s8:  32px; --s10: 40px; --s12: 48px;
  --s16: 64px; --s20: 80px; --s24: 96px;

  /* Layout */
  --max:       1120px;
  --radius:    4px;
  --radius-lg: 12px;

  /* Effets */
  --shadow-sm: 0 1px 4px var(--ink-08);
  --shadow-md: 0 6px 32px var(--ink-08);
  --ease:      200ms ease;
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lien d'évitement — RGAA 12.7 */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s4);
  z-index: 9999;
  background: var(--ink);
  color: var(--cream);
  padding: var(--s2) var(--s5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

/* Focus visible — navigation clavier */
:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien actif dans la nav — RGAA 12.1 */
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.nav a[aria-current="page"]::after {
  width: 100%;
}

/* Abréviations */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Champ obligatoire — RGAA 11.10 */
.contact-form__required-note {
  font-size: var(--text-sm);
  color: var(--stone);
  margin-bottom: var(--s4);
}

/* Fallback Cal.com */
.cal-embed__fallback {
  font-size: var(--text-sm);
  color: var(--stone);
  padding: var(--s4);
}

/* Réduction des mouvements — RGAA 13.8 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-video { display: none; }
  .hero-video__overlay { display: none; }
}

/* Liens dans le texte courant */
.prose a, .post__body a {
  color: var(--ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover, .post__body a:hover {
  color: var(--ochre-dark);
}

a          { color: inherit; text-decoration: none; }
img        { max-width: 100%; height: auto; display: block; }
strong     { font-weight: 500; }
em         { font-style: italic; }

/* ── LAYOUT ──────────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s5) var(--s8);
}

/* ── HEADER ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 239, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--sand);
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s8);
  height: 74px;
  display: flex;
  align-items: center;
  gap: var(--s6);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
  margin-right: var(--s2);
}

.brand__studio {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ochre);
  line-height: 1;
}


/* Navigation — poussée à droite */
.nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-left: auto;
}

.nav a {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--stone);
  transition: color var(--ease);
  position: relative;
  padding-bottom: 2px;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ochre);
  transition: width 250ms ease;
}

.nav a:hover        { color: var(--ink); }
.nav a:hover::after { width: 100%; }

/* CTA pill */
.nav__cta {
  margin-left: var(--s3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ochre);
  border: 1.5px solid var(--ochre);
  padding: 7px 18px;
  border-radius: 999px;
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__cta:hover {
  background: var(--ochre);
  color: var(--white);
}

.nav__cta::after { display: none; }

/* ── TYPOGRAPHIE ─────────────────────────────────────── */
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--text-md);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 var(--s4);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ochre);
  margin: 0 0 var(--s3);
}

/* ── HÉRO ────────────────────────────────────────────── */
.hero {
  padding: var(--s20) 0 var(--s16);
  position: relative;
}

/* Ligne décorative verticale gauche */
.hero::before {
  content: '';
  position: absolute;
  left: -1px;
  top: var(--s12);
  bottom: var(--s8);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--ochre) 30%, var(--ochre) 70%, transparent);
  opacity: 0.4;
}

.hero__title {
  max-width: 20ch;
  margin: 0 0 var(--s6);
}

.hero__title em {
  font-style: italic;
  color: var(--stone);
}

.hero__cta {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s8);
}

/* ── BOUTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 11px var(--s5);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--ochre);
  background: var(--ochre);
  color: var(--white);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  white-space: nowrap;
}

.btn:hover {
  background: var(--ochre-dark);
  border-color: var(--ochre-dark);
}

.btn--ghost {
  background: transparent;
  border-color: var(--sand);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

/* ── SECTIONS ────────────────────────────────────────── */
.section {
  padding: var(--s16) 0;
  border-top: 1px solid var(--sand);
}

.section--cta {
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: var(--s10) var(--s8);
  margin-top: var(--s8);
  background: var(--white);
}

/* ── CARDS ───────────────────────────────────────────── */
/* Grille à joints fins (style galerie / musée) */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--s8);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
}

.card {
  background: var(--white);
  padding: var(--s8) var(--s6);
  transition: background var(--ease);
}

.card:hover {
  background: var(--cream);
}

.card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin: 0 0 var(--s3);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card p {
  color: var(--stone);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.65;
  margin: 0;
}

/* Numéro de carte (optionnel) */
.card__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--stone);
  font-weight: 300;
  margin-bottom: var(--s3);
  letter-spacing: -0.02em;
  opacity: 0.5;
}

/* ── PAGE HEADER ─────────────────────────────────────── */
.page__header {
  padding: var(--s16) 0 var(--s8);
  border-bottom: 1px solid var(--sand);
  margin-bottom: var(--s10);
}

/* ── PROSE ───────────────────────────────────────────── */
.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: var(--s12);
  margin-bottom: var(--s4);
}

.prose h3 {
  margin-top: var(--s8);
  margin-bottom: var(--s3);
}

.prose p {
  margin-bottom: var(--s4);
  color: var(--ink);
  line-height: 1.75;
}

.prose ul, .prose ol {
  padding-left: var(--s5);
  color: var(--ink);
  margin-bottom: var(--s4);
}

.prose li { margin-bottom: var(--s2); }

.prose strong { color: var(--ink); }

/* ── FORMULAIRES ─────────────────────────────────────── */
.form {
  display: grid;
  gap: var(--s4);
  max-width: 480px;
}

label {
  display: grid;
  gap: var(--s2);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink);
}

input, textarea {
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 10px var(--s4);
  font: inherit;
  font-size: var(--text-base);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--ease);
  appearance: none;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--ochre);
}

textarea { resize: vertical; min-height: 120px; }

/* ── CTA BLOC ────────────────────────────────────────── */
.cta {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s6) 0;
}

/* ── CAL EMBED ───────────────────────────────────────── */
.cal-embed {
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 760px;
  background: var(--white);
}

/* ── BADGE / PILL ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ochre-light);
  color: var(--ochre);
  border: 1px solid rgba(201, 107, 45, 0.2);
}

/* ── TEXTE UTILITAIRE ────────────────────────────────── */
.small {
  font-size: var(--text-sm);
  color: var(--stone);
  margin: var(--s1) 0;
  line-height: 1.5;
}

.muted { color: var(--stone); }

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  overflow: hidden;
}

/* Pré-footer — bande CTA */
.footer__prefooter {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__prefooter-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s8) var(--s8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

.footer__prefooter-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
}

.footer__prefooter-cta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ochre);
  border: 1.5px solid var(--ochre);
  padding: 10px var(--s6);
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
  flex-shrink: 0;
}

.footer__prefooter-cta:hover {
  background: var(--ochre);
  color: var(--white);
}

/* Corps footer */
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s12) var(--s8) 0;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s16);
  padding-bottom: var(--s10);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.footer__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.footer__logo-studio {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.footer__logo-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--ochre);
  letter-spacing: -0.02em;
}

.footer__desc {
  font-size: var(--text-sm);
  color: rgba(247,244,239,0.85);
  font-weight: 400;
  line-height: 1.65;
}

.footer__nav-cols {
  display: flex;
  gap: var(--s12);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 130px;
}

.footer__col-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(247,244,239,0.70);
  margin-bottom: var(--s2);
}

.footer__col a {
  font-size: var(--text-sm);
  color: rgba(247,244,239,0.90);
  font-weight: 400;
  transition: color var(--ease);
}

.footer__col a:hover { color: var(--cream); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s5) 0 var(--s6);
  gap: var(--s4);
}

.footer__bottom p {
  font-size: 13px;
  color: rgba(247,244,239,0.65);
  font-weight: 400;
}

.footer__legal-link {
  font-size: 13px;
  color: rgba(247,244,239,0.65);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-right: var(--s4);
  transition: color var(--ease);
}

.footer__legal-link:hover {
  color: var(--cream);
}

/* Watermark supprimé */
.footer__watermark { display: none; }

/* ── DIVIDER ─────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--sand);
  margin: var(--s10) 0;
}

/* ══════════════════════════════════════════════════════
   LANDING PAGE — Composants spécifiques
   ══════════════════════════════════════════════════════ */

/* ── Sections pleine largeur ─────────────────────────── */
.lp-section {
  padding: var(--s20) var(--s8);
  border-top: 1px solid var(--sand);
}

.lp-section--warm  { background: var(--cream-warm); }
.lp-section--dark  { background: var(--ink); border-top: none; }

.lp-inner          { max-width: var(--max); margin: 0 auto; }
.lp-inner--center  { text-align: center; }

/* Split layout (texte + aside) */
.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.lp-split--pricing {
  align-items: start;
  gap: var(--s12);
}

.lp-split__text  { max-width: 44ch; }
.lp-split__aside { }

/* ── Hero pleine largeur avec cadres ─────────────────── */
.lp-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  padding: var(--s20) var(--s8);
}

.lp-hero__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.lp-hero__content .eyebrow {
  color: #E8935A;
}

.lp-hero__content .btn--ghost {
  border-color: rgba(247,244,239,0.6);
  color: var(--cream);
}

.lp-hero__content .btn--ghost:hover {
  border-color: var(--cream);
  background: rgba(247,244,239,0.1);
  color: var(--cream);
}

.lp-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: var(--s4) 0 var(--s6);
}

.lp-hero__h1 em {
  color: #E8935A;
  font-style: italic;
}

.lp-hero__lead {
  font-size: var(--text-md);
  color: rgba(247,244,239,0.78);
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: var(--s8);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.lp-hero__cta {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Grands boutons hero */
.btn--lg {
  padding: 13px var(--s6);
  font-size: var(--text-base);
}

/* ── Hero vidéo de fond ───────────────────────────────── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.8s ease;
}

.hero-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20,16,12,0.52);
  z-index: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.lp-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-wall {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s5);
  width: 100%;
  animation: float 8s ease-in-out infinite;
}

.gallery-wall__side {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding-top: var(--s10);
}

/* Cadre individuel */
.gallery-frame {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* Le passe-partout blanc + cadre */
.gallery-frame__mat {
  background: var(--white);
  padding: 10px;
  border: 1.5px solid #C8BEB4;
  box-shadow:
    0 2px 6px rgba(26,23,20,0.07),
    0 8px 32px rgba(26,23,20,0.10);
  position: relative;
}

/* Filet intérieur décoratif (comme un vrai passe-partout) */
.gallery-frame__mat::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 0.5px solid rgba(200,190,180,0.6);
  pointer-events: none;
}

/* Zone "artwork" */
.gallery-frame__art {
  width: 100%;
  display: block;
}

.gallery-frame--main .gallery-frame__art {
  aspect-ratio: 3/4;
}

.gallery-wall__side .gallery-frame__art {
  aspect-ratio: 4/3;
}

/* Tons chauds — évoquent de vraies œuvres */
.gallery-frame__art--1 { background: linear-gradient(145deg, #C4AA90 0%, #B09478 50%, #C8B4A0 100%); }
.gallery-frame__art--2 { background: linear-gradient(135deg, #8A9E8C 0%, #7A9080 60%, #A0B4A0 100%); }
.gallery-frame__art--3 { background: linear-gradient(155deg, #A89280 0%, #C0A898 50%, #988070 100%); }

/* Légende sous le cadre */
.gallery-frame__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--stone);
  line-height: 1.4;
  padding-left: 2px;
  letter-spacing: 0.01em;
}

.mockup {
  width: 100%;
  max-width: 440px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sand);
  box-shadow: 0 24px 80px rgba(26,23,20,0.12), 0 4px 16px rgba(26,23,20,0.06);
  background: var(--white);
  animation: float 7s ease-in-out infinite;
}

.mockup__bar {
  background: var(--cream-warm);
  border-bottom: 1px solid var(--sand);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mockup__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mockup__dot--red    { background: #FF5F57; }
.mockup__dot--yellow { background: #FEBC2E; }
.mockup__dot--green  { background: #28C840; }

.mockup__url {
  flex: 1;
  margin-left: var(--s3);
  font-size: 11px;
  color: var(--stone);
  background: var(--white);
  border: 1px solid var(--sand);
  padding: 4px var(--s3);
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.mockup__body { padding: 0; }

.mockup__sitenav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sand);
}

.mockup__logo-line {
  display: block;
  width: 72px;
  height: 7px;
  background: var(--ink);
  border-radius: 2px;
}

.mockup__nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mockup__nav-link {
  display: block;
  width: 30px;
  height: 6px;
  background: var(--sand);
  border-radius: 2px;
}

.mockup__nav-link--cta {
  width: 50px;
  height: 22px;
  background: var(--ochre);
  border-radius: 3px;
}

.mockup__cover {
  height: 180px;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 18px;
}

.mockup__artist-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
  margin: 0 0 4px;
}

.mockup__artist-tag {
  font-size: 10px;
  font-family: var(--font-body);
  font-weight: 300;
  color: rgba(247,244,239,0.45);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
}

.mockup__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sand);
}

.mockup__thumb {
  aspect-ratio: 1;
}

.mockup__thumb--1 { background: #D4C4B0; }
.mockup__thumb--2 { background: #B8A898; }
.mockup__thumb--3 { background: #9E8E80; }
.mockup__thumb--4 { background: #C8B8A4; }

.mockup__footer-line {
  padding: 14px 20px;
  border-top: 1px solid var(--sand);
}

.mockup__footer-line::after {
  content: '';
  display: block;
  width: 40%;
  height: 6px;
  background: var(--sand);
  border-radius: 2px;
}

/* ── Stats bar ───────────────────────────────────────── */
.lp-stats-bar {
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  background: var(--white);
  padding: var(--s8) var(--s8);
}

.lp-stats-bar__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.lp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  flex: 1;
  text-align: center;
}

.lp-stat-item__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}

.lp-stat-item__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stone);
  font-weight: 400;
}

.lp-stat-item__sep {
  width: 1px;
  height: 40px;
  background: var(--sand);
  flex-shrink: 0;
  margin: 0 var(--s8);
}

/* ── Pour qui — Tags artistes ────────────────────────── */
.artists-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.artist-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px var(--s4);
  border: 1px solid var(--sand);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--stone);
  background: var(--white);
  letter-spacing: 0.01em;
  transition: all var(--ease);
  cursor: default;
}

.artist-tag:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Le constat (section sombre) ─────────────────────── */
.lp-section--dark .eyebrow { color: var(--ochre); }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.problem-item {
  padding: var(--s8) var(--s6);
  background: rgba(255,255,255,0.03);
  transition: background var(--ease);
}

.problem-item:hover { background: rgba(255,255,255,0.06); }

.problem-item__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

.problem-item__desc {
  font-size: var(--text-sm);
  color: rgba(247,244,239,0.75);  /* 0.45 → 0.75 : lisible sur fond sombre */
  font-weight: 400;
  line-height: 1.6;
}

/* ── Process — Étapes ────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.step {
  background: var(--white);
  padding: var(--s8) var(--s6);
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 300;
  color: var(--sand);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s5);
}

.step h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s3);
  letter-spacing: -0.01em;
}

.step p {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: var(--s2);
}

.step__detail {
  font-size: var(--text-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ochre) !important;
  margin-top: var(--s4) !important;
  font-weight: 400 !important;
}

/* ── Features grid ───────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s10) var(--s8);
}

.feature { display: flex; flex-direction: column; }

.feature__icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ochre);
  margin-bottom: var(--s4);
  flex-shrink: 0;
}

.feature h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

.feature p {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
}

/* ── Tarif ───────────────────────────────────────────── */
.pricing-card {
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: var(--s10);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.pricing-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--stone);
  font-weight: 400;
  margin-bottom: var(--s4);
}

.pricing-price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--stone);
  line-height: 1.3;
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--sand);
  padding-bottom: var(--s6);
}

.pricing-price strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--s2);
}

.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.pricing-list li {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 300;
  padding-left: var(--s5);
  position: relative;
}

.pricing-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--ochre);
}

.pricing-note {
  font-size: var(--text-xs);
  color: var(--stone);
  margin-top: var(--s4);
  text-align: center;
  opacity: 0.6;
}

/* ── FAQ ─────────────────────────────────────────────── */
.faq {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 720px;
}

.faq-item {
  background: var(--cream);
  padding: var(--s6) var(--s8);
  transition: background var(--ease);
}

.faq-item:hover { background: var(--white); }

.faq-item dt {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s3);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.faq-item dd {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.72;
}

/* ── CTA Final ───────────────────────────────────────── */
.lp-final-cta {
  background: var(--ochre);
  padding: var(--s24) var(--s8);
}

.eyebrow--light     { color: rgba(247,244,239,0.75); }

.lp-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: var(--s4) auto var(--s5);
  max-width: 14ch;
}

.lp-final-cta__title em { color: rgba(247,244,239,0.55); }

.lp-final-cta__lead {
  color: rgba(247,244,239,0.88);
  font-size: var(--text-md);
  max-width: 40ch;
  margin: 0 auto var(--s8);
  font-weight: 400;
  line-height: 1.65;
}

.btn--light {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.btn--light:hover {
  background: #2e2a26;
  border-color: #2e2a26;
  color: var(--cream);
}

/* ══════════════════════════════════════════════════════
   BLOG — Journal & Articles
   ══════════════════════════════════════════════════════ */

/* ── Index blog ──────────────────────────────────────── */
.blog-header {
  padding: var(--s16) 0 var(--s10);
  border-bottom: 1px solid var(--sand);
  margin-bottom: var(--s10);
}

.blog-header .h1 em {
  color: var(--ochre);
}

.blog-grid {
  display: grid;
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.blog-card {
  background: var(--white);
  transition: background var(--ease);
}

.blog-card:hover {
  background: var(--cream);
}

.blog-card__link {
  display: block;
  padding: var(--s8);
  color: inherit;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.blog-card__date {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stone);
  font-weight: 400;
}

.blog-card__sep {
  color: var(--sand);
  font-size: var(--text-xs);
}

.blog-card__time {
  font-size: var(--text-xs);
  color: var(--stone);
  font-weight: 300;
  letter-spacing: 0.04em;
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
  max-width: 26ch;
}

.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
  max-width: 60ch;
  margin-bottom: var(--s5);
}

.blog-card__cta {
  font-size: var(--text-sm);
  color: var(--ochre);
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: gap var(--ease);
}

/* ── Article (post) ──────────────────────────────────── */
/* ── En-tête article ─────────────────────────────────── */
.post__header {
  background: var(--ink);
  padding: var(--s20) var(--s8) var(--s16);
}

.post__header-inner {
  max-width: 72ch;
  margin: 0 auto;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

.post__date {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ochre);
  font-weight: 500;
}

.post__sep { color: rgba(247,244,239,0.25); font-size: var(--text-xs); }

.post__time {
  font-size: 13px;
  color: rgba(247,244,239,0.55);
  font-weight: 400;
}

.post__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin-bottom: var(--s6);
  max-width: 22ch;
}

.post__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(247,244,239,0.72);
  max-width: 58ch;
  letter-spacing: -0.01em;
  border-left: 2px solid var(--ochre);
  padding-left: var(--s5);
}

/* ── Corps de l'article ──────────────────────────────── */
.post__body {
  max-width: 72ch;
  margin: var(--s12) auto var(--s16);
  padding: 0 var(--s8);
}

.post__body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: var(--s12);
  margin-bottom: var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid var(--sand);
}

.post__body h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  color: var(--ink);
  margin-top: var(--s8);
  margin-bottom: var(--s3);
  letter-spacing: -0.01em;
}

.post__body p {
  font-size: var(--text-md);
  line-height: 1.78;
  color: var(--ink);
  margin-bottom: var(--s5);
}

.post__body p:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--stone);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.post__body ul, .post__body ol {
  padding-left: var(--s6);
  margin-bottom: var(--s5);
}

.post__body li {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.post__body strong { font-weight: 500; color: var(--ink); }

.post__body hr {
  border: none;
  border-top: 1px solid var(--sand);
  margin: var(--s10) 0;
}

/* Tables dans les articles */
.post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s8) 0;
  font-size: var(--text-sm);
}

.post__body th {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--sand);
  font-weight: 500;
  color: var(--ink);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.post__body td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--sand);
  color: var(--stone);
}

/* ── Footer article — CTA ────────────────────────────── */
.post__footer {
  background: var(--ochre);
  padding: var(--s16) var(--s8);
  text-align: center;
}

.post__cta {
  max-width: 520px;
  margin: 0 auto;
}

.post__cta-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s3) 0 var(--s4);
}

.post__cta-lead {
  color: rgba(247,244,239,0.88);
  font-size: var(--text-base);
  margin-bottom: var(--s6);
}

.post__footer .eyebrow {
  color: rgba(247,244,239,0.75);
}

.post__footer .btn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.post__footer .btn:hover {
  background: #2e2a26;
  border-color: #2e2a26;
}

.post__back {
  max-width: 72ch;
  margin: var(--s8) auto 0;
  padding: 0 var(--s8);
  font-size: var(--text-sm);
}

.post__back a {
  color: var(--stone);
  transition: color var(--ease);
}

.post__back a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .blog-card__link { padding: var(--s6); }
  .blog-card__title { font-size: var(--text-lg); max-width: 100%; }
  .post__header { padding: var(--s12) var(--s5) var(--s10); }
  .post__body { padding: 0 var(--s5); margin-top: var(--s10); }
  .post__back { padding: 0 var(--s5); }
}

/* ══════════════════════════════════════════════════════
   PAGE OFFRE
   ══════════════════════════════════════════════════════ */

.offer-header {
  padding: var(--s16) 0 var(--s12);
  border-bottom: 1px solid var(--sand);
  margin-bottom: 0;
}

.offer-header__title {
  max-width: 22ch;
  margin: var(--s4) 0 var(--s5);
}

.offer-header__title em { color: var(--ochre); }

.offer-header__lead {
  max-width: 54ch;
  margin-bottom: var(--s8);
}

/* Sections */
.offer-section {
  padding: var(--s16) 0;
  border-top: 1px solid var(--sand);
}

.offer-section--light {
  background: var(--cream-warm);
  margin-left: calc(-1 * var(--s8));
  margin-right: calc(-1 * var(--s8));
  padding-left: var(--s8);
  padding-right: var(--s8);
}

.offer-section__head {
  margin-bottom: var(--s10);
}

.offer-section__head .h2 em { color: var(--ochre); }

/* Grille "inclus" */
.offer-includes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.offer-include-group {
  background: var(--white);
  padding: var(--s8) var(--s6);
}

.offer-include-group__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ochre);
  font-weight: 400;
  margin-bottom: var(--s4);
}

.offer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.offer-list li {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 300;
  padding-left: var(--s4);
  position: relative;
  line-height: 1.5;
}

.offer-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--sand);
}

/* Non inclus */
.offer-nonincludes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

.offer-noninclude {
  border-left: 2px solid var(--sand);
  padding-left: var(--s5);
}

.offer-noninclude__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

.offer-noninclude__desc {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
  position: relative;
}

/* Ligne verticale */
.timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--sand);
}

.timeline-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s5);
  padding: var(--s5) 0;
  position: relative;
}

.timeline-item__day {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
  background: var(--cream);
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sand);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-item__day--accent {
  background: var(--ochre);
  border-color: var(--ochre);
  color: var(--white);
  font-weight: 500;
}

.timeline-item__content {
  padding-top: var(--s2);
  padding-bottom: var(--s4);
}

.timeline-item__content h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

.timeline-item__content p {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
}

/* Garanties */
.offer-guarantees {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 680px;
}

.offer-guarantee {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s5);
  align-items: start;
  padding: var(--s6) var(--s6);
  background: var(--white);
  transition: background var(--ease);
}

.offer-guarantee:hover { background: var(--cream); }

.offer-guarantee__num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  color: var(--sand);
  line-height: 1;
  letter-spacing: -0.04em;
  padding-top: var(--s1);
}

.offer-guarantee__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

.offer-guarantee__desc {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
}

/* CTA final */
.offer-final-cta {
  padding: var(--s16) 0 var(--s12);
  border-top: 1px solid var(--sand);
  margin-top: 0;
}

.offer-final-cta .h2 {
  margin: var(--s4) 0 var(--s3);
}

/* Responsive offre */
@media (max-width: 860px) {
  .offer-section--light {
    margin-left: calc(-1 * var(--s5));
    margin-right: calc(-1 * var(--s5));
    padding-left: var(--s5);
    padding-right: var(--s5);
  }
  .offer-includes { grid-template-columns: 1fr; }
  .offer-nonincludes { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .timeline::before { left: 19px; }
  .timeline-item { grid-template-columns: 40px 1fr; gap: var(--s3); }
  .timeline-item__day { width: 38px; height: 38px; font-size: 9px; }
}

/* ══════════════════════════════════════════════════════
   PAGE À PROPOS
   ══════════════════════════════════════════════════════ */

.about-section {
  padding: var(--s16) 0;
  border-top: 1px solid var(--sand);
}

.about-section--dark {
  background: var(--ink);
  border-top: none;
  margin: 0 calc(-1 * var(--s8));
  padding: var(--s16) var(--s8);
}

/* Split : texte + valeurs */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: start;
}

.about-split__text p {
  color: var(--stone);
  font-size: var(--text-base);
  line-height: 1.75;
  margin-bottom: var(--s4);
}

.about-split__text .h2 {
  margin: var(--s4) 0 var(--s8);
}

/* Valeurs numérotées */
.about-split__values {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-value {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s4);
  align-items: start;
  padding: var(--s6);
  background: var(--white);
  transition: background var(--ease);
}

.about-value:hover { background: var(--cream); }

.about-value__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--sand);
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-value__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

.about-value__desc {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
}

/* Section sombre */
.about-conviction__text {
  font-size: var(--text-md);
  color: rgba(247,244,239,0.75);
  font-weight: 400;
  line-height: 1.7;
  max-width: 60ch;
  margin-top: var(--s5);
}

/* Grille approche */
.about-approach {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--s10);
}

.about-approach__item {
  background: var(--white);
  padding: var(--s8) var(--s6);
  transition: background var(--ease);
}

.about-approach__item:hover { background: var(--cream); }

.about-approach__item h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s3);
  letter-spacing: -0.01em;
}

.about-approach__item p {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 400;
  line-height: 1.65;
}

/* Items dans section sombre — fond sombre, texte clair */
.about-section--dark .about-approach {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.07);
}

.about-section--dark .about-approach__item {
  background: rgba(255,255,255,0.04);
}

.about-section--dark .about-approach__item:hover {
  background: rgba(255,255,255,0.09);
}

.about-section--dark .about-approach__item h3 {
  color: var(--cream);
}

.about-section--dark .about-approach__item p {
  color: rgba(247,244,239,0.78);
}

/* Liens dans section sombre */
.about-section--dark .about-approach__item a {
  color: var(--ochre);
}

@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; gap: var(--s10); }
  .about-approach { grid-template-columns: 1fr; }
  .about-section--dark {
    margin: 0 calc(-1 * var(--s5));
    padding: var(--s12) var(--s5);
  }
}

/* ══════════════════════════════════════════════════════
   PAGE CONTACT
   ══════════════════════════════════════════════════════ */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s16);
  padding: var(--s12) 0 var(--s16);
  border-top: 1px solid var(--sand);
}

/* Infos gauche */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

.contact-info__block {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.contact-info__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ochre);
  font-weight: 400;
}

.contact-info__value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.contact-info__note {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 300;
}

.contact-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.contact-info__list li {
  font-size: var(--text-sm);
  color: var(--stone);
  font-weight: 300;
  padding-left: var(--s4);
  position: relative;
}

.contact-info__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--sand);
}

.contact-link {
  color: var(--ochre);
  transition: color var(--ease);
}

.contact-link:hover { color: var(--ochre-dark); }

/* Formulaire droite */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: var(--s10);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.contact-label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.contact-label span {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink);
}

.contact-label__opt {
  color: var(--stone);
  font-weight: 300;
}

.contact-label input,
.contact-label textarea {
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: 11px var(--s4);
  font: inherit;
  font-size: var(--text-base);
  background: var(--cream);
  color: var(--ink);
  transition: border-color var(--ease), background var(--ease);
  appearance: none;
}

.contact-label input:focus,
.contact-label textarea:focus {
  outline: none;
  border-color: var(--ochre);
  background: var(--white);
}

.contact-label input::placeholder,
.contact-label textarea::placeholder {
  color: var(--stone);
  opacity: 0.5;
}

.contact-label textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.contact-form__note {
  font-size: var(--text-xs);
  color: var(--stone);
  text-align: center;
  margin-top: var(--s1);
  opacity: 0.6;
}

@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }
  .contact-form-wrap { padding: var(--s6); }
}

/* ── Responsive Landing ──────────────────────────────── */
@media (max-width: 960px) {
  .lp-hero {
    min-height: auto;
    padding: var(--s16) var(--s5) var(--s10);
  }
  .hero-frames .hf:nth-child(n+10) { display: none; }
  .lp-split { grid-template-columns: 1fr; gap: var(--s8); }
  .lp-split__text { max-width: 100%; }
}

@media (max-width: 520px) {
  .hero-frames { display: none; }
  .lp-hero { padding: var(--s12) var(--s4) var(--s8); }
}

@media (max-width: 860px) {
  .lp-section { padding: var(--s12) var(--s5); }
  .lp-stats-bar { padding: var(--s6) var(--s5); }
  .lp-final-cta { padding: var(--s16) var(--s5); }
  .problem-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
  .lp-stat-item__sep { margin: 0 var(--s5); }
}

@media (max-width: 520px) {
  .features { grid-template-columns: 1fr; }
  .faq-item { padding: var(--s5); }
  .lp-stat-item__num { font-size: var(--text-xl); }
  .lp-stat-item__sep { margin: 0 var(--s3); }
  .btn--lg { padding: 12px var(--s5); font-size: var(--text-sm); }
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 860px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .h1, h1 { font-size: var(--text-xl); }
  .h2, h2 { font-size: 28px; }

  .hero {
    padding: var(--s12) 0 var(--s10);
  }

  .hero::before { display: none; }

  .container {
    padding: var(--s5) var(--s5);
  }

  .section--cta {
    padding: var(--s8) var(--s5);
  }

  .footer__grid {
    flex-direction: column;
    gap: var(--s6);
  }
}

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--s10); }
  .footer__prefooter-text { font-size: var(--text-lg); }
}

@media (max-width: 600px) {
  .footer__prefooter-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .site-header__inner { padding: 0 var(--s4); height: 58px; }
  .nav { gap: var(--s3); }
  .nav a:not(.nav__cta) { display: none; }
  .nav__divider { display: none; }
  .h1, h1 { font-size: 32px; }
  .site-footer { margin-top: 0; }
  .footer__nav-cols { flex-direction: column; gap: var(--s8); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s1); }
}