/* ===== La Maison Positive — V2 (artisan local · palettes) ===== */

:root {
  /* Palette "clair · vert" (défaut) — pas de crème, blanc neutre */
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-soft: #f3f4f1;
  --bg-deep: #1c1e1b;
  --ink: #1b1d1a;
  --ink-soft: #565a52;
  --ink-muted: #898d82;
  --ink-light: #c4c8bb;
  --line: #e8e8e1;

  /* Verts — réf. client : clair #A2C037, foncé #4E884D + variante plus foncée */
  --green-light: #a2c037;   /* accents, chips (gardé tel quel) */
  --green-mid:   #4e884d;   /* vert intermédiaire */
  --green-dark:  #2f6b34;   /* variante plus foncée — titres / boutons contrastés */

  --accent: var(--green-light);
  --accent-deep: var(--green-dark);
  --accent-soft: #e8f0d4;
  --accent-bright: var(--green-light);
  --title: var(--green-dark);

  /* Boutons primaires : surface claire / surface foncée */
  --cta-bg: var(--green-dark);  --cta-fg: #ffffff;
  --cta-bg-d: var(--green-light); --cta-fg-d: #18250f;

  --font-heading: 'Quicksand', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22,20,18,.04);
  --shadow-md: 0 6px 24px rgba(22,20,18,.07);
  --shadow-lg: 0 24px 60px rgba(22,20,18,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Variante "vert pâle" — alternative légère */
[data-palette="vert-pale"] {
  --bg: #f2f6ea;
  --bg-card: #f9fbf0;
  --bg-soft: #eaf1da;
  --bg-deep: #1b231a;
  --ink: #1b231a;
  --ink-soft: #515a4a;
  --ink-muted: #828b76;
  --ink-light: #b4c1a1;
  --line: #dde6c9;
  --accent-soft: #e3eecb;
}

/* Variante "anthracite" — fond gris anthracite, accents rouge / gris clair / noir */
[data-palette="anthracite"] {
  --bg: #34383a;
  --bg-card: #3d4244;
  --bg-soft: #2d3133;
  --bg-deep: #191c1d;
  --ink: #eef0ef;
  --ink-soft: #b6bbba;
  --ink-muted: #8b918f;
  --ink-light: #6f7573;
  --line: #4a4f51;

  --accent: #d8473a;
  --accent-deep: #c23a2e;
  --accent-soft: #43302e;
  --accent-bright: #e76a5e;
  --title: #d8473a;

  --cta-bg: #d8473a;   --cta-fg: #ffffff;
  --cta-bg-d: #d8473a; --cta-fg-d: #ffffff;
}

/* Variante "full foncé" — anthracite partout, sans alterner */
[data-palette="fonce"] {
  --bg: #1f2220;
  --bg-card: #282c29;
  --bg-soft: #1a1d1b;
  --bg-deep: #1f2220;
  --ink: #eef0ed;
  --ink-soft: #aab0a8;
  --ink-muted: #7e847c;
  --ink-light: #565b54;
  --line: #343a35;

  --accent: var(--green-light);
  --accent-deep: #b6d24f;
  --accent-soft: #2d3a1d;
  --accent-bright: var(--green-light);
  --title: var(--green-light);

  --cta-bg: var(--green-light);   --cta-fg: #1f2220;
  --cta-bg-d: var(--green-light); --cta-fg-d: #1f2220;
}

/* Sections foncées — remappent les tokens vers une surface sombre.
   En palette claire → crée la rupture light→dark. En anthracite/foncé → cohérent. */
.v2-section--dark,
.v2-testimonial-section,
.v2-footer {
  --bg-card: color-mix(in oklab, #ffffff 7%, var(--bg-deep));
  --bg-soft: color-mix(in oklab, #ffffff 10%, var(--bg-deep));
  --ink: #f1f2ee;
  --ink-soft: color-mix(in oklab, #f1f2ee 72%, transparent);
  --ink-muted: color-mix(in oklab, #f1f2ee 52%, transparent);
  --ink-light: color-mix(in oklab, #f1f2ee 38%, transparent);
  --line: rgba(255,255,255,.13);
  --title: var(--accent-bright);
  --cta-bg: var(--cta-bg-d);
  --cta-fg: var(--cta-fg-d);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .4s var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

.v2-container {
  width: min(1320px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ─── Nav ─── */
.v2-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: .9rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .4s var(--ease);
}
.v2-nav.scrolled { border-bottom-color: var(--line); }
.v2-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.v2-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.05;
}
.v2-logo img { height: 50px; width: auto; }
.v2-logo span { letter-spacing: -0.01em; }
.v2-nav-links {
  display: flex;
  gap: 1.9rem;
  font-size: .9rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.v2-nav-links a {
  position: relative;
  transition: color .2s var(--ease);
}
.v2-nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.v2-nav-links a:hover { color: var(--ink); }
.v2-nav-links a:hover::after { transform: scaleX(1); }
.v2-nav-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.v2-nav-version {
  display: flex;
  gap: .4rem;
  align-items: center;
  font-size: .78rem;
  color: var(--ink-muted);
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.v2-nav-version a { color: var(--ink); font-weight: 500; white-space: nowrap; }
.v2-nav-sep { color: var(--ink-light); }
.v2-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: var(--r-pill);
  font-size: .88rem;
  font-weight: 600;
  transition: all .25s var(--ease);
}
.v2-nav-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
@media (max-width: 920px) {
  .v2-nav-links { display: none; }
}

/* ─── Hero ─── */
.v2-hero { padding: 3.2rem 0 5rem; }
.v2-hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) {
  .v2-hero-layout { grid-template-columns: 1fr; gap: 2.4rem; }
}
.v2-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.v2-hero-eyebrow {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.v2-hero-title {
  /* proportions reprises de la V1 (rapport titre / corps plus généreux) */
  font-size: clamp(2.9rem, 8vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-weight: 600;
  color: var(--ink-light);
  margin: 0;
}
.v2-hero-title .strong { color: var(--title); font-weight: 600; }
.v2-hero-intro {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0;
}
.v2-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.v2-hero-link {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color .2s var(--ease);
}
.v2-hero-link:hover { color: var(--title); border-bottom-color: var(--title); }

.v2-hero-introrow {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.v2-hero-mark {
  height: clamp(76px, 7vw, 104px);
  width: auto;
  flex-shrink: 0;
}
/* logo en ligne sombre → fond clair sur les palettes foncées pour rester lisible */
[data-palette="anthracite"] .v2-hero-mark,
[data-palette="fonce"] .v2-hero-mark {
  height: clamp(52px, 5vw, 70px);
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--r-md);
  box-sizing: content-box;
}
.v2-hero-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-soft);
}
.v2-hero-feature > img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  transition: transform 1.6s var(--ease);
}
.v2-hero-feature:hover > img { transform: scale(1.03); }
@media (max-width: 900px) {
  .v2-hero-feature { aspect-ratio: 4/3; }
}
.v2-hero-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  background: rgba(255,255,255,.92);
  color: #1b1d1a;
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  z-index: 3;
}
.v2-hero-logo {
  position: absolute;
  left: -22px; bottom: -22px;
  width: clamp(96px, 11vw, 132px);
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 4;
}
.v2-hero-logo img { height: 100%; width: auto; }
@media (max-width: 900px) {
  .v2-hero-logo { left: auto; right: 14px; bottom: -18px; }
}

/* ─── Section header pattern ─── */
.v2-section { padding: 5rem 0; }
@media (max-width: 720px) { .v2-section { padding: 3.5rem 0; } }
.v2-section--dark { background: var(--bg-deep); }

.v2-section-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
}
@media (max-width: 880px) {
  .v2-section-head { grid-template-columns: 1fr; gap: 1.5rem; }
}
.v2-section-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--ink-light);
  line-height: 1.05;
}
.v2-section-title .strong { color: var(--title); font-weight: 600; }
.v2-section-aside {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.v2-section-aside p {
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
  max-width: 46ch;
}
.v2-cta-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.3rem;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: var(--r-pill);
  font-size: .88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.v2-cta-pill:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ─── Artisan local : photos chantier + valeurs (remplace les chiffres) ─── */
.v2-chantiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 880px) { .v2-chantiers { grid-template-columns: repeat(2, 1fr); } }
.v2-chantier {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.v2-chantier img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.v2-chantier:hover img { transform: scale(1.06); }
.v2-chantier figcaption {
  position: absolute;
  left: .7rem; bottom: .7rem;
  padding: .35rem .7rem;
  background: rgba(20,22,18,.72);
  color: #fff;
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.v2-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 880px) { .v2-values { grid-template-columns: 1fr; } }
.v2-value {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.v2-value:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-light);
}
.v2-value-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.v2-value-icon svg {
  width: 24px; height: 24px;
  stroke: var(--accent-deep);
  fill: none;
  stroke-width: 1.6;
}
.v2-value h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: .5rem;
}
.v2-value p {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ─── Services (bloc foncé · rupture) ─── */
.v2-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 880px) { .v2-services-grid { grid-template-columns: 1fr; } }
.v2-service {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  border: 1px solid var(--line);
  transition: all .35s var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  position: relative;
  overflow: hidden;
}
.v2-service:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-bright);
}
.v2-service-num {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink-light);
  line-height: 1;
}
.v2-service-icon {
  margin-top: 1.2rem;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-service-icon svg {
  width: 24px; height: 24px;
  stroke: var(--accent-bright);
  fill: none;
  stroke-width: 1.5;
}
.v2-service h3 {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: .6rem;
}
.v2-service p {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.v2-service-tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.v2-service-tag {
  font-size: .74rem;
  padding: .3rem .65rem;
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
}

/* ─── Carousel projets ─── */
.v2-carousel-wrap { position: relative; }
.v2-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem 1.25rem 1.2rem;
  margin: 0 -1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.v2-carousel::-webkit-scrollbar { display: none; }
.v2-carousel-card {
  flex: 0 0 auto;
  width: clamp(280px, 36vw, 440px);
  scroll-snap-align: start;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  border: 1px solid var(--line);
}
.v2-carousel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.v2-carousel-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.v2-carousel-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.v2-carousel-card:hover .v2-carousel-img img { transform: scale(1.05); }
.v2-carousel-cat {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.92);
  color: #1b1d1a;
  backdrop-filter: blur(8px);
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.v2-carousel-body {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.v2-carousel-num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--ink-light);
  line-height: 1;
  letter-spacing: -0.02em;
}
.v2-carousel-text { flex: 1; }
.v2-carousel-text h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.v2-carousel-text p {
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.v2-carousel-controls {
  position: absolute;
  top: -3.6rem;
  right: 0;
  display: flex;
  gap: .5rem;
}
.v2-carousel-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all .2s var(--ease);
}
.v2-carousel-btn:hover {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-color: var(--cta-bg);
}

/* ─── Process ─── */
.v2-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (max-width: 880px) { .v2-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .v2-process-grid { grid-template-columns: 1fr; } }
.v2-step {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.v2-step:hover {
  background: var(--bg-deep);
  color: #f1f2ee;
  border-color: var(--bg-deep);
  transform: translateY(-3px);
}
.v2-step:hover .v2-step-num,
.v2-step:hover .v2-step-text { color: inherit; opacity: .82; }
.v2-step-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink-light);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 1.2rem;
  transition: color .3s var(--ease);
}
.v2-step-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.v2-step-text {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  transition: color .3s var(--ease);
}

/* ─── Testimonial (bloc foncé) ─── */
.v2-testimonial-section {
  background: var(--bg-deep);
  color: var(--ink);
  border-radius: var(--r-xl);
  margin: 1rem 0;
  padding: 4rem 3rem;
}
@media (max-width: 600px) { .v2-testimonial-section { padding: 2.6rem 1.6rem; } }
.v2-testimonial-head {
  text-align: center;
  margin-bottom: 3rem;
}
.v2-testimonial-head .v2-section-title {
  margin-inline: auto;
  max-width: 24ch;
}
.v2-testimonial-card {
  max-width: 760px;
  margin-inline: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.4rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 600px) {
  .v2-testimonial-card { grid-template-columns: 1fr; padding: 1.8rem; }
}
.v2-testimonial-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--accent-bright);
  flex-shrink: 0;
}
.v2-testimonial-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}
.v2-testimonial-role {
  font-size: .82rem;
  color: var(--ink-muted);
  margin-top: .15rem;
}
.v2-testimonial-text {
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.v2-testimonial-controls {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.v2-testimonial-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s var(--ease);
}
.v2-testimonial-btn:hover { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.v2-testimonial-dots { display: flex; gap: .4rem; }
.v2-testimonial-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--ink-light);
  padding: 0;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.v2-testimonial-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--accent-bright);
}

/* ─── Contact (bloc V1 — pro, propre) ─── */
.v2-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  align-items: start;
}
@media (max-width: 880px) { .v2-contact-grid { grid-template-columns: 1fr; gap: 2rem; } }
.v2-contact-info .v2-section-title { margin-bottom: 1.3rem; }
.v2-contact-lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: 1.8rem;
}
.v2-contact-rows {
  display: flex;
  flex-direction: column;
}
.v2-contact-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.v2-contact-row:last-child { border-bottom: 1px solid var(--line); }
.v2-contact-label {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 92px;
}
.v2-contact-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  transition: color .2s var(--ease);
}
a.v2-contact-value:hover { color: var(--accent-bright); }

.v2-contact-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem;
}
.v2-contact-form h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.v2-field { margin-bottom: 1rem; }
.v2-field label {
  display: block;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .35rem;
}
.v2-field input,
.v2-field select,
.v2-field textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .8rem 1rem;
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  outline: none;
  transition: all .2s var(--ease);
}
.v2-field input::placeholder,
.v2-field textarea::placeholder { color: var(--ink-muted); }
.v2-field input:focus,
.v2-field select:focus,
.v2-field textarea:focus {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-bright) 22%, transparent);
}
.v2-field textarea { min-height: 96px; resize: vertical; }

/* Le champ photos. Le bouton natif du navigateur reste, il est compris de tous
   et gere seul l'appareil photo du telephone ; c'est le cadre autour qui suit
   la mise en page du formulaire. */
.v2-field input[type="file"] {
  padding: .65rem .8rem;
  font-size: .88rem;
  cursor: pointer;
}
.v2-field input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* --bg-card suit le fond de la section, --bg non : sur le panneau sombre du
     formulaire, un bouton en --bg restait blanc pendant que son libelle passait
     au blanc lui aussi, et le bouton devenait illisible. */
  background: var(--bg-card);
  color: var(--ink);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.v2-field-hint {
  margin: .4rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.v2-field select option { background: var(--bg-card); color: var(--ink); }
.v2-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 520px) { .v2-form-row { grid-template-columns: 1fr; } }
.v2-submit {
  margin-top: .6rem;
  width: 100%;
  padding: 1rem 1.4rem;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: all .25s var(--ease);
}
.v2-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.v2-form-success {
  margin-top: 1rem;
  background: color-mix(in oklab, var(--accent-bright) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-bright) 35%, transparent);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: .9rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
}

/* Le message d'echec reprend la forme de celui de reussite, la couleur en
   moins : c'est la meme place dans le formulaire, et il se lit au meme endroit
   que le succes qu'on attendait. */
.v2-form-error {
  margin-bottom: 1rem;
  background: color-mix(in oklab, #b4442d 14%, transparent);
  border: 1px solid color-mix(in oklab, #b4442d 40%, transparent);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: .9rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
}

/* Le champ leurre. Ni display:none ni visibility:hidden, que certains robots
   savent lire pour justement l'eviter : il est sorti de l'ecran, et hors du
   parcours au clavier par tabindex. */
.v2-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Footer ─── */
.v2-footer {
  background: var(--bg-deep);
  color: var(--ink-soft);
  padding: 2rem 0;
  margin-top: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.v2-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .85rem;
}
.v2-footer-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
}
.v2-footer-logo img { height: 40px; }

/* ─── Bandeau des cookies ─── */
/* Une carte en bas a droite, sans voile : la page reste lisible et cliquable
   derriere. Sous 600px, une bande pleine largeur collee en bas. Il se glisse
   en place une fois affiche, et reste immobile pour qui a demande moins de
   mouvements. Les deux boutons sont identiques, c'est une exigence de l'APD :
   refuser doit etre aussi visible qu'accepter. */
.v2-cookies {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 150;
  max-width: 340px;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: .86rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.v2-cookies.is-visible { opacity: 1; transform: none; }
.v2-cookies p { margin: 0 0 .8rem; }
.v2-cookies-actions { display: flex; gap: .5rem; }
.v2-cookies-btn {
  flex: 1;
  padding: .55rem .9rem;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .2s var(--ease);
}
.v2-cookies-btn:hover { filter: brightness(.96); }
.v2-cookies p a { color: var(--accent-deep); text-decoration: underline; }
@media (max-width: 600px) {
  .v2-cookies {
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    border-radius: var(--r-md) var(--r-md) 0 0;
    border-width: 1px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-cookies { transition: none; transform: none; }
}

/* ─── Modal ─── */
.v2-modal {
  position: fixed;
  inset: 0;
  background: rgba(20,22,18,.7);
  backdrop-filter: blur(10px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.v2-modal.open { opacity: 1; pointer-events: auto; }
.v2-modal-content {
  background: var(--bg);
  border-radius: var(--r-lg);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform .35s var(--ease);
}
.v2-modal.open .v2-modal-content { transform: translateY(0); }
.v2-modal-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--ink);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s var(--ease);
}
.v2-modal-close:hover { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.v2-modal-hero {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.v2-modal-body { padding: 2.2rem; }
.v2-modal-meta {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.v2-modal-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.v2-modal-text {
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1.6rem;
  max-width: 65ch;
}
.v2-modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (max-width: 600px) { .v2-modal-gallery { grid-template-columns: 1fr; } }
.v2-modal-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* ─── Portfolio (page réalisations) ─── */
.v2-port { padding: 2.5rem 0 4rem; }
.v2-detail { padding: 2.5rem 0 4rem; }

.v2-detail-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  transition: color .2s var(--ease);
}
.v2-detail-back:hover { color: var(--title); }

.v2-port-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.4rem;
}
@media (max-width: 880px) { .v2-port-head { grid-template-columns: 1fr; gap: 1.2rem; } }
.v2-port-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.v2-port-head p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 46ch; }

.v2-port-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.2rem;
}
.v2-port-filter {
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.v2-port-filter:hover { border-color: var(--ink-light); color: var(--ink); }
.v2-port-filter.active {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-color: var(--cta-bg);
}

.v2-port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 900px) { .v2-port-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-port-grid { grid-template-columns: 1fr; } }
.v2-port-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.v2-port-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-light);
}
.v2-port-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.v2-port-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.v2-port-card:hover .v2-port-card-img img { transform: scale(1.05); }
.v2-port-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.v2-port-card-body h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
}
.v2-port-card-body p {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.v2-port-card-link {
  margin-top: auto;
  padding-top: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--title);
}

/* ─── Page projet (détail dédié) ─── */
.v2-detail-head { max-width: 760px; margin-bottom: 2rem; }
.v2-detail-cat {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
}
.v2-detail-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: .8rem 0 1rem;
}
.v2-detail-short {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.v2-detail-cover {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 16/9;
  margin-bottom: 2.4rem;
}
.v2-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.v2-detail-body { max-width: 68ch; margin: 0 auto 2.6rem; }

/* Ouverture en deux colonnes, quand la couverture est debout ou presque carree.
   La colonne de la photo est calculee a partir de ses proportions, posees dans
   --r par le gabarit : sa hauteur ne depasse jamais --cover-h, sa largeur suit,
   et rien n'est jamais recadre. */
.v2-detail-intro.is-split {
  --cover-h: 34rem;
  display: grid;
  grid-template-columns: minmax(0, calc(var(--cover-h) * var(--r))) minmax(17rem, 1fr);
  gap: 1.6rem;
  align-items: start;
  margin-bottom: 2.6rem;
}
.v2-detail-intro.is-split .v2-detail-cover {
  aspect-ratio: var(--r);
  margin-bottom: 0;
}
/* Le texte prend son panneau, et s'arrete a son contenu : trois phrases dictees
   ne doivent pas etirer un aplat gris sur toute la hauteur de la photo. */
.v2-detail-intro.is-split .v2-detail-body {
  max-width: none;
  margin: 0;
  padding: 1.7rem 1.9rem;
  background: var(--bg-soft);
  border-radius: var(--r-xl);
}
/* Sur un telephone, la photo reprend toute la largeur et le texte passe dessous. */
@media (max-width: 780px) {
  .v2-detail-intro.is-split {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.v2-detail-body p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.v2-detail-meta {
  margin-top: 1rem;
  font-size: .92rem !important;
  color: var(--ink-muted) !important;
  font-style: italic;
}
/* Galerie en rangees justifiees.
   Aucune photo n'est recadree : chaque cadre prend les proportions de la sienne,
   posees par le gabarit dans --r (largeur divisee par hauteur).
   Les largeurs d'une rangee sont reparties proportionnellement a --r, si bien
   qu'a l'interieur d'une rangee toutes les hauteurs tombent juste : une photo
   couchee occupe plus de large qu'une photo debout, et la rangee remplit la
   largeur sans trou. Les photos restent dans l'ordre du CMS, de gauche a
   droite, et le passage a la ligne se fait tout seul selon la place. */
.v2-detail-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}
.v2-detail-gallery figure {
  flex: var(--r, 1.3333) 1 calc(var(--r, 1.3333) * 17rem);
  min-width: 0;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: var(--r, 4/3);
}
/* Sur un telephone, une photo par ligne : deux cotes a cote ne montreraient
   plus rien du chantier. */
@media (max-width: 600px) {
  .v2-detail-gallery figure { flex-basis: 100%; }
}
.v2-detail-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

.v2-detail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--bg-deep);
  color: #f1f2ee;
  border-radius: var(--r-lg);
  padding: 2.2rem 2.4rem;
  margin-bottom: 2.4rem;
  --cta-bg: var(--cta-bg-d);
  --cta-fg: var(--cta-fg-d);
}
.v2-detail-cta h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: .3rem;
}
.v2-detail-cta p { color: color-mix(in oklab, #f1f2ee 72%, transparent); font-size: .95rem; }

.v2-detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) { .v2-detail-nav { grid-template-columns: 1fr; } }
.v2-detail-nav-link {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  transition: all .25s var(--ease);
}
.v2-detail-nav-link:hover { border-color: var(--ink-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.v2-detail-nav-link.next { text-align: right; }
.v2-detail-nav-dir { font-size: .78rem; color: var(--ink-muted); font-weight: 600; letter-spacing: .04em; }
.v2-detail-nav-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }

.v2-nav-links a.active { color: var(--ink); }
.v2-nav-links a.active::after { transform: scaleX(1); }

/* ─── Reveal animation ─── */
@media (prefers-reduced-motion: no-preference) {
  .v2-reveal[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .v2-reveal[data-reveal].in { opacity: 1; transform: translateY(0); }
}

/* ===== Ajustements du rendu serveur ===== */
/* Les cartes de temoignage sont masquees par l'attribut hidden, qui doit primer
   sur le display: grid de la regle .v2-testimonial-card. */
[hidden] { display: none !important; }
/* Les filtres de categorie sont des liens (ils fonctionnent sans JavaScript). */
a.v2-port-filter { display: inline-block; text-decoration: none; }

/* ===== Rotation des photos d'accueil ===== */
/* Les photos sont empilees ; sans JavaScript, la premiere reste affichee. */
.v2-hero-feature[data-hero-rotation] { position: relative; }
.v2-hero-feature[data-hero-rotation] .v2-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.v2-hero-feature[data-hero-rotation] .v2-hero-photo.is-visible { opacity: 1; }
/* La premiere photo dicte la hauteur du bloc : elle reste dans le flux. */
.v2-hero-feature[data-hero-rotation] .v2-hero-photo:first-of-type { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .v2-hero-feature[data-hero-rotation] .v2-hero-photo { transition: none; }
}

/* ===== Page de mentions legales ===== */
.v2-legal h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--title);
  margin: 2.2rem 0 .6rem;
}
.v2-legal h2:first-child { margin-top: 0; }
.v2-legal p { margin: 0 0 1rem; }
.v2-legal a { color: var(--title); text-decoration: underline; }

/* ===== Photos d'avant travaux ===== */
/* Un comparateur a curseur vivait ici. Il prenait la premiere photo d'avant et
   la premiere d'apres, alors que Kiki en met souvent trois de chaque : le
   visiteur ne savait plus laquelle il regardait. L'etiquette dit la meme chose
   sur chaque photo concernee, et la galerie les montre toutes. */
.v2-detail-gallery figure { position: relative; }
.v2-photo-tag {
  position: absolute;
  top: .7rem;
  left: .7rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-deep) 78%, transparent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* La photo passe dessous en defilant : sans ce voile, l'etiquette se perd
     sur un mur clair. */
  backdrop-filter: blur(3px);
}