/* ============================================
   Garden Events — Design System v1 Enhanced
   Base: v1 class naming convention
   Inspired by: captainvegetal.fr, pousse.fr, tracer.fr
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Figtree:wght@400;500;600&display=swap');

/* === DESIGN TOKENS (Charte Graphique Garden Events) === */
:root {
  --green: #00a07a;
  --green-dark: #214b35;
  --green-light: rgba(0,160,122,.08);
  --green-mist: rgba(0,160,122,.04);
  --yellow: #e2c200;
  --black: #11261d;
  --white: #fafcfa;
  --gray: #f3f6f4;
  --gray-border: #dde5df;
  --text: #1e3329;
  --text-light: #4d6358;
  --heading-font: 'Bricolage Grotesque', Helvetica, Arial, sans-serif;
  --body-font: 'Figtree', Helvetica, Arial, sans-serif;
  --max-width: 1200px;
  --nav-height: 72px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 100px;
  --space-3xl: clamp(100px, 12vw, 140px);
  --space-4xl: clamp(120px, 15vw, 180px);
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --shadow-sm: 0 2px 8px rgba(33,75,53,.06);
  --shadow-md: 0 4px 20px rgba(33,75,53,.10);
  --shadow-lg: 0 8px 40px rgba(33,75,53,.14);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body-font); color: var(--text);
  background: var(--white); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; transition: color .2s, background .2s, transform .2s, box-shadow .2s; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--heading-font); font-weight: 800; line-height: 1.1; color: var(--black); }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -1.5px; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -1px; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
p { max-width: 640px; }
sup { font-size: .6em; }

/* === LAYOUT === */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 28px; border-radius: var(--border-radius-sm);
  font-family: var(--heading-font); font-weight: 600; font-size: .9rem;
  cursor: pointer; border: 2px solid transparent;
  transition: all .3s cubic-bezier(.25,.46,.45,.94); line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--green); color: #fff; border-color: var(--green);
}
.btn-primary:hover {
  background: var(--green-dark); border-color: var(--green-dark);
  color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent; color: var(--black); border-color: var(--black);
}
.btn-outline:hover {
  background: var(--black); color: #fff;
}
.btn-secondary {
  background: var(--yellow); color: var(--black); border-color: var(--yellow);
}
.btn-secondary:hover {
  background: #e0b020; border-color: #e0b020;
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.btn-white {
  background: var(--white); color: var(--black); border-color: #fff;
}
.btn-white:hover {
  background: transparent; color: #fff; border-color: #fff;
}

/* Client space button */
.btn-client-space {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--heading-font); font-size: .78rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--border-radius-sm);
  border: 1.5px solid var(--gray-border); color: var(--green-dark);
  background: var(--gray); text-decoration: none;
  transition: all .25s cubic-bezier(.25,.46,.45,.94);
}
.btn-client-space:hover {
  background: rgba(0,160,122,.08); border-color: var(--green);
  color: var(--green-dark);
}

/* ========================================
   NAVIGATION
   ======================================== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(250,252,250,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.navbar.scrolled {
  border-bottom-color: var(--gray-border);
  box-shadow: 0 1px 12px rgba(33,75,53,.08);
}
.navbar > .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--heading-font); font-weight: 700; font-size: 1.15rem;
  color: var(--black); text-decoration: none;
}
.nav-logo .nav-logo-text { color: var(--green); }
.nav-logo:hover { color: var(--green-dark); }
.nav-logo:hover .nav-logo-text { color: var(--green-dark); }
.nav-logo svg { flex-shrink: 0; }

.nav-menu {
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.nav-item { position: relative; }
.nav-link {
  font-family: var(--heading-font); font-weight: 500; font-size: .9rem;
  color: var(--black); padding: 8px 14px; border-radius: 6px;
  display: flex; align-items: center; gap: 4px;
  transition: background .2s, color .2s;
}
.nav-link:hover { color: var(--green); background: var(--green-light); }
.arrow { font-size: .65rem; opacity: .5; }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--white); min-width: 260px; border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg); padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .25s ease;
}
.nav-item:hover .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block; padding: 10px 20px; font-size: .88rem;
  color: var(--text); transition: background .15s, color .15s;
}
.dropdown a:hover {
  background: var(--gray); color: var(--green);
}

.nav-actions {
  display: flex; align-items: center; gap: 10px;
}
.nav-actions .btn {
  padding: 10px 20px; font-size: .85rem;
}

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--black); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

@media (max-width: 992px) {
  .nav-toggle { display: flex; }
  .nav-actions { display: none; }
  .nav-menu {
    position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
    flex-direction: column; background: var(--white);
    padding: 24px 32px; gap: 0; align-items: stretch;
    transform: translateX(100%); transition: transform .3s ease;
    overflow-y: auto;
  }
  .nav-menu.active { transform: translateX(0); }
  .nav-item { border-bottom: 1px solid var(--gray-border); }
  .nav-link { padding: 16px 0; }
  .dropdown {
    position: static; box-shadow: none; opacity: 1; visibility: visible;
    transform: none; padding: 0 0 8px 16px;
    max-height: 0; overflow: hidden; transition: max-height .3s;
  }
  .nav-item.open .dropdown { max-height: 400px; }
}

/* ========================================
   HERO
   ======================================== */
.hero {
  margin-top: var(--nav-height);
  padding: var(--space-3xl) 0 var(--space-xl);
  overflow: hidden;
}
.hero > .container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); align-items: center;
}
.hero-content h1 { margin-bottom: var(--space-md); }
.highlight {
  color: var(--green-dark);
  background: linear-gradient(120deg, rgba(0,160,122,.15) 0%, rgba(0,160,122,.06) 100%);
  padding: 2px 8px; border-radius: 4px;
}
.hero-content p {
  color: var(--text-light); font-size: 1.05rem; line-height: 1.8;
  margin-bottom: var(--space-lg);
}
.hero-buttons {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-visual {
  position: relative; display: flex; justify-content: center;
}
.hero-visual .hero-photo {
  width: 100%; border-radius: var(--border-radius);
  overflow: hidden; aspect-ratio: 4/3;
  box-shadow: var(--shadow-lg);
}
.hero-visual .hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Keep SVG illustration support from v1 */
.hero-illustration { width: 100%; height: auto; max-width: 460px; }
.blob { display: none; }

@media (max-width: 768px) {
  .hero { padding: var(--space-xl) 0 var(--space-lg); }
  .hero > .container { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero-visual { order: -1; }
}

/* ========================================
   REFERENCES (Logo Marquee)
   ======================================== */
.references {
  padding: var(--space-lg) 0 var(--space-sm);
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
  background: var(--gray);
  overflow: hidden;
}
.references h3 {
  font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--text-light); margin-bottom: var(--space-md);
  text-align: center;
}
.logos-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logos-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.logos-track:hover {
  animation-play-state: paused;
}
.logos-track img {
  width: 120px; height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .45; filter: grayscale(1);
  transition: opacity .3s, filter .3s;
}
.logos-track img:hover {
  opacity: 1; filter: none;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Keep old grid for fallback */
.logos-grid {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 28px 36px;
}
.logos-grid img {
  height: 28px; width: auto; object-fit: contain;
  opacity: .4; filter: grayscale(1); transition: all .3s;
}
.logos-grid img:hover {
  opacity: 1; filter: none;
}

/* ========================================
   KEY FIGURES
   ======================================== */
.key-figures {
  padding: var(--space-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decorative motif SVGs */
.motif {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: auto;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.motif--left { left: -20px; }
.motif--right { right: -20px; }
.key-figures .container { position: relative; z-index: 1; }
@media (max-width: 992px) {
  .motif { width: 160px; opacity: .5; }
}
@media (max-width: 768px) {
  .motif { display: none; }
}
.key-figures h2 { margin-bottom: var(--space-lg); }
.figures-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.figure-card {
  border: 1px solid var(--gray-border); border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-md);
  background: var(--white);
  transition: transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.figure-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.figure-card:hover::before { transform: scaleX(1); }
.figure-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.figure-number {
  font-family: var(--heading-font); font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900; color: var(--green-dark); line-height: 1;
}
.figure-label {
  color: var(--text-light); font-size: .9rem; margin-top: 10px;
}
@media (max-width: 768px) {
  .figures-grid { grid-template-columns: 1fr; }
}

/* ========================================
   SERVICE SECTIONS (white, alternating)
   ======================================== */
.service-section {
  padding: var(--space-3xl) 0;
  overflow: hidden;
}
.service-section:nth-child(even) {
  background: var(--gray);
}
.service-section > .container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); align-items: center;
}
.service-section.reverse > .container {
  direction: ltr;
}
.service-section.reverse > .container > .service-visual {
  order: -1;
}

.service-tag {
  display: inline-block;
  background: var(--green); color: #fff;
  padding: 6px 16px; border-radius: 50px;
  font-family: var(--heading-font); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}
.service-content h2 { margin-bottom: var(--space-sm); }
.service-content p {
  color: var(--text-light); font-size: .95rem; line-height: 1.8;
  margin-bottom: var(--space-sm);
}
.service-features {
  list-style: none; margin: var(--space-md) 0;
}
.service-features li {
  padding: 6px 0; font-size: .92rem; color: var(--text);
  display: flex; align-items: flex-start; gap: 10px;
}
.service-features .check {
  color: var(--green); font-weight: 700; font-size: .85rem;
  flex-shrink: 0; margin-top: 2px;
}
.service-buttons {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: var(--space-md);
}

.service-visual { position: relative; }
.service-image {
  width: 100%; border-radius: var(--border-radius);
  object-fit: cover; min-height: 360px;
  box-shadow: var(--shadow-md);
  transition: transform .4s;
}
.service-image:hover { transform: scale(1.01); }

@media (max-width: 768px) {
  .service-section { padding: var(--space-xl) 0; }
  .service-section > .container {
    grid-template-columns: 1fr;
  }
  .service-visual { order: -1; }
  .service-image { min-height: 240px; }
}

/* ========================================
   SERVICE BANNER (dark background)
   ======================================== */
.service-banner {
  background: var(--black); color: #fff;
  padding: var(--space-4xl) 0;
  margin: 0;
  overflow: hidden;
}
.service-banner > .container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); align-items: center;
}
.service-banner h2 { color: #fff; }
.service-banner p { color: rgba(255,255,255,.75); }
.service-banner .service-tag {
  background: rgba(0,160,122,.2); color: var(--green);
}
.service-banner .service-features li { color: rgba(255,255,255,.85); }
.service-banner .service-features .check { color: var(--yellow); }
.service-banner .service-image {
  border-radius: var(--border-radius);
  min-height: 380px;
}

@media (max-width: 768px) {
  .service-banner { padding: var(--space-xl) 0; }
  .service-banner > .container { grid-template-columns: 1fr; }
  .service-banner .service-image { min-height: 240px; }
}

/* ========================================
   PHOTO BAND (full-width gallery strips)
   ======================================== */
/* When a service section is followed by a photo band, kill the gap */
.service-section + .photo-band,
.service-section + .photo-carousel,
.service-banner + .photo-band,
.service-banner + .photo-carousel { margin-top: 0; }
/* Remove bottom padding from service section when photo band follows */
.service-section:has(+ .photo-band),
.service-section:has(+ .photo-carousel) { padding-bottom: 0; }
.service-banner:has(+ .photo-band),
.service-banner:has(+ .photo-carousel) { padding-bottom: 0; }

.photo-band {
  display: grid; gap: 0;
  margin: 0 0 var(--space-3xl);
}
.photo-band.cols-2 { grid-template-columns: 1fr 1fr; }
.photo-band.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.photo-band img {
  width: 100%; height: 320px; object-fit: cover;
  transition: transform .4s;
}
.photo-band img:hover { transform: scale(1.02); }
@media (max-width: 768px) {
  .photo-band.cols-2, .photo-band.cols-3 { grid-template-columns: 1fr; }
  .photo-band img { height: 220px; }
}

/* ========================================
   PHOTO CAROUSEL (auto-scrolling strips)
   ======================================== */
.photo-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0 0 var(--space-3xl);
}
.photo-carousel-track {
  display: flex;
  gap: 4px;
  width: max-content;
}
.photo-carousel[data-direction="left"] .photo-carousel-track {
  animation: carousel-left 45s linear infinite;
}
.photo-carousel[data-direction="right"] .photo-carousel-track {
  animation: carousel-right 45s linear infinite;
}
.photo-carousel:hover .photo-carousel-track {
  animation-play-state: paused;
}
.photo-carousel-track img {
  height: 280px;
  width: auto;
  min-width: 380px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform .4s;
}
.photo-carousel-track img:hover {
  transform: scale(1.02);
}
@keyframes carousel-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes carousel-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@media (max-width: 768px) {
  .photo-carousel-track img {
    height: 200px;
    min-width: 280px;
  }
}

/* ========================================
   SERVICES V2 — Hub + Hero + Asymmetric + Moodboard + Bento
   ======================================== */
.services-v2 {
  padding: 0;
}

/* ── Hub Navigation (sticky tabs) ── */
.services-hub {
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
  background: var(--green-dark);
  padding: 0;
}
.services-hub-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
  justify-content: center;
}
.services-hub-track::-webkit-scrollbar { display: none; }

/* ── Individual tab ── */
.hub-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 26px 10px;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(250,252,250,.5);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .3s cubic-bezier(.25,.46,.45,.94),
              border-color .3s cubic-bezier(.25,.46,.45,.94),
              background .3s cubic-bezier(.25,.46,.45,.94);
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
}
.hub-tab:hover {
  color: rgba(250,252,250,.85);
  background: rgba(250,252,250,.06);
}
.hub-tab.active {
  color: var(--white);
  border-bottom-color: var(--green);
}
.hub-tab.active .hub-tab-icon {
  color: var(--green);
}

/* ── Tab icon ── */
.hub-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: color .3s, transform .3s cubic-bezier(.25,.46,.45,.94);
}
.hub-tab:hover .hub-tab-icon {
  transform: translateY(-1px);
}
.hub-tab-icon svg {
  flex-shrink: 0;
}

/* ── Tab label ── */
.hub-tab-label {
  line-height: 1;
}

/* ── Accent variant (Mobilier vivant) ── */
.hub-tab--accent {
  color: rgba(226,194,0,.55);
}
.hub-tab--accent:hover {
  color: rgba(226,194,0,.9);
  background: rgba(226,194,0,.06);
}
.hub-tab--accent.active {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.hub-tab--accent.active .hub-tab-icon {
  color: var(--yellow);
}

/* ── Hero full-width (murs naturels) ── */
.sv2-hero {
  position: relative;
  z-index: 1;
}
.sv2-hero-media {
  position: relative;
  height: clamp(420px, 55vw, 640px);
  overflow: hidden;
}
.sv2-hero-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv2-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(32px, 5vw, 64px);
  background: linear-gradient(0deg, rgba(17,38,29,.85) 0%, rgba(17,38,29,.4) 60%, transparent 100%);
  color: #fff;
}
.sv2-hero-overlay .service-tag {
  margin-bottom: var(--space-sm);
}
.sv2-hero-overlay h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin-bottom: var(--space-sm);
  line-height: 1.05;
}
.sv2-hero-overlay p {
  color: rgba(255,255,255,.8);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  max-width: 500px;
  margin-bottom: var(--space-md);
}
.sv2-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sv2-hero-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.sv2-hero-strip img {
  width: 100%;
  height: clamp(120px, 14vw, 200px);
  object-fit: cover;
  transition: transform .4s;
}
.sv2-hero-strip img:hover {
  transform: scale(1.03);
}

/* ── Asymmetric layout (stabilisé) ── */
.sv2-asymmetric {
  padding: var(--space-3xl) 0;
  background: var(--gray);
}
.sv2-asymmetric > .container {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.sv2-asym-photo img {
  width: 100%;
  height: clamp(400px, 50vw, 560px);
  object-fit: cover;
  border-radius: var(--border-radius);
}
.sv2-asym-content {
  padding-top: var(--space-lg);
}
.sv2-tag--yellow {
  background: var(--yellow);
  color: var(--black);
}
.sv2-asym-content h2 {
  margin-bottom: var(--space-sm);
}
.sv2-asym-content p {
  color: var(--text-light);
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: var(--space-md);
}
.sv2-asym-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--space-md);
}
.sv2-asym-gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  transition: transform .4s;
}
.sv2-asym-gallery img:hover {
  transform: scale(1.03);
}
.sv2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: .9rem;
  color: var(--green);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.sv2-link:hover {
  color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}

/* ── Moodboard grid (bureaux) ── */
.sv2-moodboard {
  position: relative;
  overflow: hidden;
}
.sv2-mood-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: clamp(400px, 50vw, 600px);
  position: relative;
}
.sv2-mood-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sv2-mood-grid img:hover {
  transform: scale(1.04);
}
.sv2-mood-1 { grid-area: 1 / 1 / 2 / 2; }
.sv2-mood-2 { grid-area: 1 / 2 / 2 / 3; }
.sv2-mood-3 { grid-area: 2 / 1 / 3 / 2; }
.sv2-mood-4 { grid-area: 2 / 2 / 3 / 3; }
.sv2-mood-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17,38,29,.88);
  color: #fff;
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: var(--border-radius);
  text-align: center;
  max-width: 400px;
  z-index: 2;
}
.sv2-mood-center .service-tag {
  margin-bottom: var(--space-xs);
}
.sv2-mood-center h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: var(--space-xs);
}
.sv2-mood-center p {
  color: rgba(255,255,255,.75);
  font-size: .88rem;
  margin-bottom: var(--space-sm);
  max-width: none;
}
.sv2-mood-center .sv2-link {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.3);
}
.sv2-mood-center .sv2-link:hover {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* ── Bento grid (spécialités) ── */
.sv2-bento {
  padding: var(--space-3xl) 0;
}
.sv2-bento-title {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.sv2-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 520px;
}
.sv2-bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  text-decoration: none;
  color: #fff;
  display: flex;
  min-height: 240px;
}
.sv2-bento-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.sv2-bento-card:hover img {
  transform: scale(1.05);
}
.sv2-bento-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2.5vw, 32px);
  width: 100%;
  background: linear-gradient(0deg, rgba(17,38,29,.75) 0%, transparent 70%);
}
.sv2-bento-tag {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.sv2-bento-card h3 {
  color: #fff;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  margin-bottom: 4px;
}
.sv2-bento-arrow {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: .85rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.sv2-bento-card:hover .sv2-bento-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Bento placement */
.sv2-bento--paysage {
  grid-area: 1 / 1 / 2 / 2;
}
.sv2-bento--toiture {
  grid-area: 2 / 1 / 3 / 2;
}
.sv2-bento--vivant {
  grid-area: 1 / 2 / 3 / 4;
}
.sv2-bento-label--vivant {
  background: linear-gradient(0deg, rgba(17,38,29,.88) 0%, rgba(17,38,29,.3) 60%, transparent 100%);
}
.sv2-bento-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--black);
  padding: 4px 14px;
  border-radius: 50px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  width: fit-content;
}
.sv2-bento--vivant h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}
.sv2-bento--vivant p {
  color: rgba(255,255,255,.7);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 8px;
  max-width: 400px;
}
.sv2-bento--vivant .sv2-bento-arrow {
  opacity: 1;
  transform: none;
  color: var(--yellow);
}

/* ── Services V2 responsive ── */
@media (max-width: 992px) {
  .sv2-asymmetric > .container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .sv2-asym-photo img {
    height: 320px;
  }
  .sv2-asym-content {
    padding-top: 0;
  }
  .sv2-bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }
  .sv2-bento--paysage { grid-area: 1 / 1 / 2 / 2; }
  .sv2-bento--toiture { grid-area: 1 / 2 / 2 / 3; }
  .sv2-bento--vivant { grid-area: 2 / 1 / 3 / 3; min-height: 320px; }
}

@media (max-width: 768px) {
  .services-hub {
    padding: 0;
  }
  .services-hub-track {
    justify-content: flex-start;
  }
  .hub-tab {
    padding: 10px 18px 8px;
    font-size: .65rem;
    gap: 3px;
  }
  .hub-tab-icon {
    width: 24px;
    height: 24px;
  }
  .hub-tab-icon svg {
    width: 18px;
    height: 18px;
  }
  .sv2-hero-media {
    height: 360px;
  }
  .sv2-hero-overlay {
    padding: 24px;
  }
  .sv2-hero-overlay h2 {
    font-size: 1.8rem;
  }
  .sv2-hero-strip {
    grid-template-columns: 1fr;
  }
  .sv2-hero-strip img {
    height: 180px;
  }
  .sv2-hero-strip img:nth-child(n+3) {
    display: none;
  }
  .sv2-mood-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }
  .sv2-mood-grid img {
    height: 200px;
  }
  .sv2-mood-3, .sv2-mood-4 {
    display: none;
  }
  .sv2-mood-1 { grid-area: auto; }
  .sv2-mood-2 { grid-area: auto; }
  .sv2-mood-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-width: none;
    border-radius: 0;
    margin: 0;
  }
  .sv2-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sv2-bento--paysage,
  .sv2-bento--toiture,
  .sv2-bento--vivant {
    grid-area: auto;
    min-height: 260px;
  }
  .sv2-bento--vivant {
    order: -1;
    min-height: 340px;
  }
  .sv2-bento-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   SOCIAL PROOF - SCROLLING QUOTE WALL
   ======================================== */
/* ── Flip Cards 3D — Avis Clients ── */
.flip-section{padding:clamp(48px,7vw,80px) 0;background:#fafbfa}

/* Grid */
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px);max-width:1100px;margin:0 auto}

/* Flip container — perspective for 3D */
.flip-wrap{perspective:900px;height:clamp(260px,28vw,320px);cursor:pointer;border-radius:16px;outline:none}
.flip-wrap:focus-visible{box-shadow:0 0 0 3px var(--green)}

/* Inner flip element */
.flip-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.flip-wrap:hover .flip-inner,
.flip-wrap:focus .flip-inner{transform:rotateY(180deg)}

/* Front & Back shared */
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;overflow:hidden}

/* Front — photo + overlay */
.flip-front img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.flip-wrap:hover .flip-front img{transform:scale(1.05)}
.flip-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,43,30,.7) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,1.5vw,20px)}
.flip-client{font-family:var(--heading-font);font-weight:700;font-size:clamp(1rem,1.3vw,1.2rem);color:#fff;line-height:1.2}
.flip-loc{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:2px}

/* Back — testimonial (rotated 180deg) */
.flip-back{transform:rotateY(180deg);background:var(--green-dark);display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,2vw,28px)}
.flip-back blockquote{font-size:clamp(.82rem,1vw,.92rem);line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 14px;font-style:italic}
.flip-subtitle{font-family:var(--heading-font);font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;color:var(--text-light);margin:8px auto clamp(28px,4vw,44px);text-align:center;display:block;letter-spacing:.01em}
.flip-rating{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.flip-rating-stars{font-size:.75rem;letter-spacing:2px;color:var(--yellow)}
.flip-rating-note{font-family:var(--heading-font);font-size:.7rem;font-weight:600;color:rgba(255,255,255,.45)}
.flip-author{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.flip-role{font-weight:700;color:var(--yellow);font-size:.8rem}
.flip-company{color:rgba(255,255,255,.5);font-size:.75rem}

/* Hint text */
.flip-hint{text-align:left;margin-top:clamp(16px,2vw,24px);font-size:.8rem;color:var(--text-light);opacity:.7;max-width:1100px;margin-left:auto;margin-right:auto}

/* ── Mobile: 2 columns ── */
@media(max-width:768px){
  .flip-grid{grid-template-columns:repeat(2,1fr)}
  .flip-wrap{height:clamp(220px,45vw,280px)}
  .flip-hint{display:none}
}
@media(max-width:420px){
  .flip-grid{grid-template-columns:1fr 1fr;gap:10px}
  .flip-wrap{height:240px}
}

/* ========================================
   HISTORY SECTION
   ======================================== */
.history-section {
  background: var(--black); color: #fff;
  padding: var(--space-4xl) 0;
}
.history-section h2.text-center { text-align: center; color: #fff; margin-bottom: var(--space-xl); }
.history-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.history-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
}
.history-card h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--space-sm); }
.history-card p {
  color: rgba(255,255,255,.65); font-size: .92rem; line-height: 1.8;
  margin-top: var(--space-sm);
}
.green-team h2 { color: var(--green) !important; }
.team-circles {
  display: flex; gap: 12px; margin-top: var(--space-md); flex-wrap: wrap;
}
.team-circle {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,.3); background: #333;
}
.team-circle img { width: 100%; height: 100%; object-fit: cover; }
.team-circle--empty { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); }

/* ── Crew Game Cards ── */
.history-card--team{grid-column:1/-1;background:var(--green-dark)}
.crew-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,16px)}
.crew-card{perspective:700px;height:clamp(180px,22vw,240px);cursor:pointer;outline:none}
.crew-card:focus-visible{box-shadow:0 0 0 3px var(--green)}
.crew-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.crew-card:hover .crew-inner,
.crew-card:focus .crew-inner{transform:rotateY(180deg)}

.crew-front,.crew-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden}

/* Front — photo */
.crew-front{display:flex;flex-direction:column;justify-content:flex-end}
.crew-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crew-front::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 50%)}
.crew-name{position:relative;z-index:1;font-family:var(--heading-font);font-weight:700;font-size:clamp(.85rem,1.1vw,1rem);color:#fff;padding:0 12px 10px;text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* Front placeholder (no photo) */
.crew-front--placeholder{background:linear-gradient(135deg,rgba(0,160,122,.3) 0%,rgba(33,75,53,.5) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.crew-front--placeholder::after{display:none}
.crew-initial{font-family:var(--heading-font);font-weight:800;font-size:clamp(2.5rem,4vw,3.5rem);color:rgba(255,255,255,.15);line-height:1;margin-bottom:4px}
.crew-front--placeholder .crew-name{position:static;text-shadow:none;padding:0;text-align:center}

/* Back — description */
.crew-back{transform:rotateY(180deg);background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(12px,1.5vw,20px)}
.crew-back-name{font-family:var(--heading-font);font-weight:700;font-size:clamp(.8rem,1vw,.95rem);color:#fff;margin-bottom:2px}
.crew-back-title{font-family:var(--heading-font);font-weight:600;font-size:clamp(.7rem,.85vw,.82rem);color:var(--yellow);margin-bottom:8px}
.crew-back-desc{font-size:clamp(.68rem,.8vw,.78rem);line-height:1.5;color:rgba(255,255,255,.8);margin:0}

@media (max-width: 768px) {
  .crew-grid{grid-template-columns:repeat(3,1fr)}
  .crew-card{height:clamp(160px,35vw,200px)}
  .history-card--team{grid-column:span 1}
}
@media (max-width: 480px) {
  .crew-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px) {
  .history-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CTA BANNER
   ======================================== */
.cta-banner {
  background: var(--green); padding: var(--space-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner .container { position: relative; z-index: 2; }
.cta-banner h2 {
  color: #fff; margin-bottom: 12px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.cta-banner p {
  color: rgba(255,255,255,.9); margin: 0 auto var(--space-md);
  font-size: 1.02rem;
  max-width: 600px;
  text-align: center;
}
/* Formes décoratives CTA */
.cta-deco {
  position: absolute;
  top: 0;
  width: 220px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.cta-deco--left { left: 0; }
.cta-deco--right { right: 0; }
@media (max-width: 768px) {
  .cta-deco { width: 120px; }
  .cta-banner p { max-width: 400px; }
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background: var(--black); padding: var(--space-xl) 0 var(--space-lg);
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}
.footer-brand { }
.footer-brand .nav-logo { color: #fff; margin-bottom: var(--space-sm); }
.footer-brand .nav-logo .nav-logo-text { color: var(--green); }
.footer-brand p {
  color: rgba(255,255,255,.5); font-size: .88rem; line-height: 1.6;
}
.footer-savoir-faire {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-made-in {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  margin-bottom: 4px;
}
.footer-flag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 1px;
}
.footer-expertise {
  display: block;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  font-style: italic;
  line-height: 1.5;
}
.footer-social{display:flex;gap:12px;margin-top:14px}
.footer-social a{color:rgba(255,255,255,.6);transition:color .2s}
.footer-social a:hover{color:#e2c200}
.footer-links h4 {
  color: #fff; font-size: .9rem; font-weight: 700;
  margin-bottom: var(--space-sm);
}
.footer-links a {
  display: block; color: rgba(255,255,255,.5); font-size: .86rem;
  padding: 4px 0; transition: color .2s;
}
.footer-links a:hover { color: var(--green); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35); font-size: .82rem;
}
.footer-bottom a { color: rgba(255,255,255,.35); }
.footer-bottom a:hover { color: var(--green); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ========================================
   FADE-IN ANIMATIONS
   ======================================== */
/* === SCROLL REVEAL SYSTEM === */
.fade-in {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94);
}
.fade-in.visible {
  opacity: 1; transform: none;
}
/* Stagger delays */
.fade-in[data-delay="1"] { transition-delay: .1s; }
.fade-in[data-delay="2"] { transition-delay: .2s; }
.fade-in[data-delay="3"] { transition-delay: .3s; }
.fade-in[data-delay="4"] { transition-delay: .4s; }
.fade-in[data-delay="5"] { transition-delay: .5s; }

/* Hero entrance orchestration */
.hero .hero-content { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94); }
.hero .hero-content h1 { opacity: 0; transform: translateY(20px); transition: opacity .6s .15s cubic-bezier(.25,.46,.45,.94), transform .6s .15s cubic-bezier(.25,.46,.45,.94); }
.hero .hero-content p { opacity: 0; transform: translateY(16px); transition: opacity .6s .3s cubic-bezier(.25,.46,.45,.94), transform .6s .3s cubic-bezier(.25,.46,.45,.94); }
.hero .hero-buttons { opacity: 0; transform: translateY(12px); transition: opacity .5s .45s cubic-bezier(.25,.46,.45,.94), transform .5s .45s cubic-bezier(.25,.46,.45,.94); }
.hero .hero-visual { opacity: 0; transform: translateX(40px); transition: opacity .9s .2s cubic-bezier(.25,.46,.45,.94), transform .9s .2s cubic-bezier(.25,.46,.45,.94); }
.hero.is-visible .hero-content,
.hero.is-visible .hero-content h1,
.hero.is-visible .hero-content p,
.hero.is-visible .hero-buttons,
.hero.is-visible .hero-visual { opacity: 1; transform: none; }

/* Figure cards stagger */
.figure-card.fade-in:nth-child(1) { transition-delay: 0s; }
.figure-card.fade-in:nth-child(2) { transition-delay: .12s; }
.figure-card.fade-in:nth-child(3) { transition-delay: .24s; }

/* Slide-in variants */
.fade-in-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94); }
.fade-in-right { opacity: 0; transform: translateX(32px); transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94); }
.fade-in-left.visible, .fade-in-right.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-left, .fade-in-right,
  .hero .hero-content, .hero .hero-content h1, .hero .hero-content p,
  .hero .hero-buttons, .hero .hero-visual {
    opacity: 1; transform: none; transition: none;
  }
}

/* ========================================
   PLACEHOLDER (for missing images)
   ======================================== */
.img-placeholder {
  background: var(--gray); border-radius: var(--border-radius);
  min-height: 360px; display: flex; align-items: center; justify-content: center;
}
.placeholder-text {
  text-align: center; color: var(--text-light); font-size: .9rem;
}
.placeholder-icon { font-size: 2.5rem; margin-bottom: 8px; }

/* ========================================
   SERVICE DETAIL PAGES
   ======================================== */

/* Page Hero (full-width photo with overlay) */
.page-hero {
  margin-top: var(--nav-height); position: relative;
  height: 50vh; min-height: 360px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.page-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%);
}
.page-hero-content {
  position: relative; z-index: 2; padding: var(--space-lg) 32px;
  width: 100%; max-width: var(--max-width); margin: 0 auto;
}
.page-hero-content h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.page-hero-content p { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-top: 8px; }

/* === HERO CINÉMATIQUE (overlay gauche) === */
.page-hero--cinema {
  height: auto;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.page-hero--cinema::after {
  background: linear-gradient(
    105deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.6) 38%,
    rgba(0,0,0,.18) 68%,
    transparent 100%
  );
}
.page-hero-cinema-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) 32px;
}
/* Breadcrumb dans le hero */
.breadcrumb--hero {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-bottom: var(--space-sm);
  background: none;
  border-radius: 0;
}
.breadcrumb--hero,
.breadcrumb--hero a,
.breadcrumb--hero span {
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
}
.breadcrumb--hero a:hover { color: var(--green); }
.breadcrumb--hero .sep {
  color: rgba(255,255,255,.5);
  margin: 0 6px;
  opacity: 1;
}
/* Badge */
.page-hero-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  border: 1px solid rgba(0,160,122,.5);
  padding: 5px 14px;
  margin-bottom: var(--space-xs);
  border-radius: 20px;
  margin-bottom: var(--space-sm);
}
/* Titre */
.page-hero--cinema h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -1.5px;
  text-shadow: none;
  margin-bottom: var(--space-sm);
  max-width: 550px;
}
.page-hero--cinema h1 span {
  color: var(--green);
}
/* Baseline sur une ligne */
.page-hero-baseline {
  font-size: 1.05rem;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: var(--space-md);
  max-width: 580px;
  white-space: nowrap;
}
/* Boutons */
.page-hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: var(--space-lg);
}
.btn-ghost {
  display: inline-block;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: .9rem;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  transition: all .25s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
}
/* Stats */
.page-hero-stats {
  display: flex;
  gap: 32px;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.12);
}
.page-hero-stat strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.page-hero-stat span {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .5px;
}
@media (max-width: 768px) {
  .page-hero--cinema { min-height: 420px; }
  .page-hero-cinema-content { padding: var(--space-lg) 20px; }
  .page-hero-baseline { white-space: normal; max-width: 340px; }
  .page-hero-actions { flex-direction: column; gap: 8px; }
  .page-hero-actions .btn { text-align: center; }
  .page-hero-stats { gap: 20px; }
  .page-hero-stat strong { font-size: 1.1rem; }
}

/* Breadcrumb */
.breadcrumb {
  padding: 14px 0; font-size: .84rem; color: var(--text-light);
}
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { margin: 0 6px; opacity: .4; }

/* Section spacing for detail pages */
.section { padding: var(--space-xl) 0; }
.section--gray { background: var(--gray); }
.section--dark { background: var(--green-dark); }

/* Section titles for detail pages */
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: var(--space-lg);
  position: relative;
}
.section-title::after {
  content: ''; display: block; width: 48px; height: 4px;
  background: var(--green); border-radius: 2px; margin-top: 12px;
}
.section-title--center { text-align: center; }
.section-title--center::after { margin: 12px auto 0; }

/* ========================================
   PROCESS CARDS (murs int: 2 procédés)
   ======================================== */
.process-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}
.process-card {
  border: 1px solid var(--gray-border); border-radius: var(--border-radius);
  overflow: hidden; background: var(--white); transition: transform .3s, box-shadow .3s;
}
.process-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.process-card-img {
  height: 240px; overflow: hidden;
}
.process-card-img img { width: 100%; height: 100%; object-fit: cover; }
.process-card-body { padding: var(--space-md); }
.process-card-tag {
  display: inline-block; background: var(--green); color: #fff;
  padding: 5px 16px; border-radius: 50px;
  font-family: var(--heading-font); font-weight: 700; font-size: .78rem;
  margin-bottom: 10px;
}
.process-card-body h3 {
  font-size: 1.15rem; margin-bottom: 10px; line-height: 1.3;
}
.process-card-body p { color: var(--text-light); font-size: .88rem; }
.process-list { margin-top: 14px; }
.process-list li {
  padding: 6px 0; font-size: .88rem; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--gray-border);
}
.process-list li::before {
  content: '\2713'; color: var(--green); font-weight: 700; font-size: .8rem;
}
@media (max-width: 768px) { .process-grid { grid-template-columns: 1fr; } }

/* Expandable process cards */
.process-card--expandable {
  cursor: pointer;
  position: relative;
}
.process-card--expandable .process-card-body h3 {
  display: flex; align-items: center; justify-content: space-between;
}
.process-card-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green-light); color: var(--green);
  font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
  transition: transform .3s ease, background .3s ease, color .3s ease;
  line-height: 1;
}
.process-card--expandable.open .process-card-toggle {
  transform: rotate(45deg);
  background: var(--green); color: #fff;
}
.process-card--expandable::after {
  content: 'Cliquer pour plus de d\00e9tails techniques';
  display: block; text-align: center;
  padding: 10px; font-size: .78rem;
  color: var(--green); font-weight: 500;
  font-family: var(--heading-font);
  border-top: 1px dashed var(--gray-border);
  transition: opacity .3s;
}
.process-card--expandable.open::after {
  opacity: 0; height: 0; padding: 0; overflow: hidden;
}

/* Detail section (hidden by default) */
.process-card-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .5s ease, opacity .4s ease;
}
.process-card--expandable.open .process-card-detail {
  max-height: 800px; opacity: 1;
}
.process-card-detail-inner {
  padding: var(--space-md);
  border-top: 2px solid var(--green);
  background: linear-gradient(to bottom, var(--green-light), transparent);
}
.process-card-detail-inner h4 {
  font-size: 1.05rem; color: var(--green); margin-bottom: var(--space-sm);
  font-weight: 700;
}
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
}
.detail-block {
  background: var(--white); padding: 14px 16px;
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--green);
}
.detail-block h5 {
  font-family: var(--heading-font); font-size: .88rem;
  font-weight: 700; color: var(--black); margin-bottom: 6px;
}
.detail-block p {
  font-size: .84rem; color: var(--text-light); line-height: 1.7; margin: 0;
}
.detail-note {
  margin-top: var(--space-sm); padding: 10px 14px;
  background: var(--green); color: #fff;
  border-radius: var(--border-radius-sm);
  font-size: .84rem; font-weight: 500; font-family: var(--heading-font);
}
@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Detail list (airy alternative to detail-grid) */
.detail-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.detail-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,160,122,.12);
}
.detail-list li:last-child { border-bottom: none; }
.detail-list-icon {
  font-size: 1.4rem; flex-shrink: 0; margin-top: 2px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,160,122,.08); border-radius: 8px;
}
.detail-list li strong {
  font-family: var(--heading-font); font-size: .92rem;
  font-weight: 700; color: var(--black); display: block; margin-bottom: 4px;
}
.detail-list li p {
  font-size: .84rem; color: var(--text-light); line-height: 1.7; margin: 0;
}

/* ========================================
   TECH TABS & VISUAL GALLERY (doc technique)
   ======================================== */
.tech-tabs {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: var(--space-lg);
}
.tech-tab {
  font-family: var(--heading-font); font-weight: 600; font-size: .95rem;
  padding: 12px 28px; border-radius: 50px;
  background: var(--gray); color: var(--text-light);
  border: 2px solid var(--gray-border); cursor: pointer;
  transition: all .25s ease;
}
.tech-tab:hover { border-color: var(--green); color: var(--green); }
.tech-tab--active {
  background: var(--green); color: #fff;
  border-color: var(--green);
}
.tech-tab--active:hover { color: #fff; }

.tech-tab-content {
  display: none;
}
.tech-tab-content--active {
  display: block;
}

/* Tech hero image (full-width feature image) */
.tech-hero {
  margin-bottom: var(--space-xl);
  overflow: hidden;
}
.tech-hero img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Tech steps (alternating image + text) */
.tech-step {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--gray-border);
}
.tech-step:last-of-type { border-bottom: none; }
.tech-step--reverse > :first-child { order: 1; }

.tech-step-visual {
  position: relative;
}
.tech-step-visual img {
  width: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
  max-height: 500px;
}
.tech-step-visual-secondary {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 45% !important;
  max-height: 200px !important;
  border: 3px solid #fff;
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius-sm) !important;
}

.tech-step-num {
  font-family: var(--heading-font);
  font-size: 3rem;
  font-weight: 900;
  color: var(--green);
  opacity: .2;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.tech-step-content h3 {
  font-size: 1.3rem;
  margin-bottom: var(--space-sm);
}
.tech-step-content p {
  color: var(--text-light);
  font-size: .95rem;
  line-height: 1.8;
  max-width: 480px;
}

@media (max-width: 768px) {
  .tech-step,
  .tech-step--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--space-md);
    padding: var(--space-md) 0;
  }
  .tech-step-visual { order: -1; }
  .tech-step-visual-secondary {
    position: static;
    width: 100% !important;
    max-height: none !important;
    margin-top: 8px;
    border: none;
    box-shadow: none;
  }
  .tech-hero img { max-height: 300px; }
  .tech-tabs { flex-direction: column; align-items: center; }
  .tech-step-num { font-size: 2rem; }
}

/* ========================================
   THEME CARDS (stabilisé themes)
   ======================================== */
.themes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
}
.theme-card {
  border-radius: var(--border-radius); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
}
.theme-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.theme-card-img { height: 200px; overflow: hidden; }
.theme-card-img img { width: 100%; height: 100%; object-fit: cover; }
.theme-card-body { padding: var(--space-sm) var(--space-md); }
.theme-card-body h3 { font-size: 1rem; margin-bottom: 4px; }
.theme-price {
  font-family: var(--heading-font); font-size: 1.3rem;
  font-weight: 800; color: var(--green);
}
.theme-price span { font-size: .78rem; font-weight: 400; color: var(--text-light); }
@media (max-width: 768px) { .themes-grid { grid-template-columns: 1fr; } }

/* ========================================
   INSPIRATIONS PAR THEME (stabilisé)
   ======================================== */
.inspi-cat-label {
  font-family: var(--heading-font);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  margin-bottom: var(--space-md);
}
.inspi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.inspi-card {
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-border);
  transition: transform .3s, box-shadow .3s;
}
.inspi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.inspi-card-img {
  height: 210px;
  overflow: hidden;
}
.inspi-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.inspi-card:hover .inspi-card-img img {
  transform: scale(1.05);
}
.inspi-card-body {
  padding: var(--space-md);
}
.inspi-card-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.inspi-plants {
  font-size: .88rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 12px;
}
.inspi-tag {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--green);
  color: #fff;
}
.inspi-tag--outline {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
}

/* Unified theme minimal cards */
.inspi-card--minimal {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}
.inspi-card--minimal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.inspi-card--minimal p {
  font-size: .9rem;
  color: var(--text-light);
  margin-bottom: 14px;
}
.inspi-card-icon {
  margin-bottom: var(--space-sm);
}
.inspi-card-icon svg {
  display: inline-block;
}

/* CTA fin de bloc */
.inspi-cta {
  text-align: center;
  margin-top: var(--space-xl);
}
.inspi-cta .btn {
  font-size: 1.05rem;
  padding: 18px 40px;
}

@media (max-width: 768px) {
  .inspi-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   FINITIONS CARDS (stabilisé)
   ======================================== */
.finitions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.finition-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border: 1px solid var(--gray-border);
  transition: transform .3s, box-shadow .3s;
}
.finition-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.finition-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--green-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.finition-card h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.finition-card p {
  font-size: .88rem;
  color: var(--text-light);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .finitions-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .finitions-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   ENSEIGNE INTEGREE (stabilisé)
   ======================================== */
.enseigne-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.enseigne-card {
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-border);
  transition: transform .3s, box-shadow .3s;
}
.enseigne-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.enseigne-card-img {
  height: 180px;
  overflow: hidden;
  background: var(--gray);
}
.enseigne-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.enseigne-card:hover .enseigne-card-img img {
  transform: scale(1.05);
}
.enseigne-card-body {
  padding: var(--space-md);
}
.enseigne-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--green-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.enseigne-card-body h4 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.enseigne-card-body p {
  font-size: .88rem;
  color: var(--text-light);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .enseigne-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SHOWCASE FULL-WIDTH (stabilisé)
   ======================================== */
.showcase-stab-full {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 6px;
  width: 100%;
}
.showcase-stab-full .showcase-stab-item--hero {
  grid-column: span 2;
  grid-row: span 2;
}
.showcase-stab-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.showcase-stab-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.showcase-stab-item:hover img {
  transform: scale(1.06);
}
.showcase-stab-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 40%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  opacity: 0;
  transition: opacity .4s;
}
.showcase-stab-item:hover .showcase-stab-overlay {
  opacity: 1;
}
.showcase-stab-client {
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.showcase-stab-full .showcase-stab-item--hero .showcase-stab-client {
  font-size: 1.4rem;
}
.showcase-stab-type {
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .showcase-stab-full {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }
  .showcase-stab-full .showcase-stab-item--hero {
    grid-column: span 2;
    grid-row: span 1;
  }
  .showcase-stab-overlay {
    opacity: 1;
  }
}
@media (max-width: 480px) {
  .showcase-stab-full {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }
  .showcase-stab-full .showcase-stab-item--hero {
    grid-column: span 1;
  }
}

/* ========================================
   FEATURE GRID (tracer.fr inspired)
   ======================================== */
.features-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}
.feature-item {
  padding: var(--space-md);
  border-left: 3px solid var(--green);
  background: var(--white); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.feature-item h4 {
  color: var(--green); font-size: .95rem; margin-bottom: 6px;
  font-weight: 700;
}
.feature-item p {
  color: var(--text-light); font-size: .88rem; line-height: 1.7; margin: 0;
}
@media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }

/* ========================================
   FRISE INTERACTIVE (process timeline)
   ======================================== */
.frise {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 32px;
}
/* Ligne horizontale de connexion */
.frise-line {
  position: absolute;
  top: 60px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: rgba(0,160,122,.15);
  border-radius: 2px;
  z-index: 0;
}
.frise-line-fill {
  width: 0;
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.frise.is-visible .frise-line-fill {
  width: 100%;
}
/* Chaque étape */
.frise-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 0 12px;
  cursor: pointer;
}
/* Pastille ronde avec icône */
.frise-dot {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,160,122,.25);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.frise-dot svg {
  width: 24px; height: 24px;
}
.frise-step:hover .frise-dot,
.frise-step.is-active .frise-dot {
  transform: scale(1.18);
  background: var(--green);
  box-shadow: 0 6px 24px rgba(0,160,122,.4);
}
/* Numéro sous la pastille */
.frise-label {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 0.05em;
  margin-top: 10px;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity .3s ease;
}
.frise-step:hover .frise-label,
.frise-step.is-active .frise-label { opacity: 1; }
/* Titre étape */
.frise-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--black);
  margin-top: 6px;
  margin-bottom: 0;
  transition: color .3s ease;
}
.frise-step:hover h4,
.frise-step.is-active h4 { color: var(--green-dark); }
/* Détail — caché par défaut, slide + fade in au hover/active */
.frise-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .35s ease, margin .3s ease;
  margin-top: 0;
}
.frise-step:hover .frise-detail,
.frise-step.is-active .frise-detail {
  max-height: 120px;
  opacity: 1;
  margin-top: 8px;
}
.frise-detail p {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.55;
  max-width: 200px;
  margin: 0 auto;
}
/* Mobile : colonne verticale */
@media (max-width: 768px) {
  .frise {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-top: 0;
    padding-left: 36px;
  }
  .frise-line {
    top: 0; bottom: 0;
    left: 27px; right: auto;
    width: 3px; height: 100%;
  }
  .frise-line-fill {
    width: 100%; height: 0;
    transition: height 1.2s cubic-bezier(.4,0,.2,1);
  }
  .frise.is-visible .frise-line-fill { height: 100%; }
  .frise-step {
    flex-direction: row;
    text-align: left;
    gap: var(--space-sm);
    padding: 0;
  }
  .frise-dot { width: 44px; height: 44px; flex-shrink: 0; }
  .frise-dot svg { width: 20px; height: 20px; }
  .frise-label { display: none; }
  .frise-detail {
    max-height: none;
    opacity: 1;
    margin-top: 4px;
  }
  .frise-detail p { max-width: none; }
}

/* ========================================
   SYSTEM COMPARE CARDS (toiture)
   ======================================== */
.sys-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}
.sys-card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid var(--gray-border);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.sys-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
}
/* Featured card (recommended) */
.sys-card--featured {
  border: 2px solid var(--green);
  box-shadow: 0 4px 20px rgba(0,160,122,.12);
  transform: scale(1.03);
  z-index: 1;
}
.sys-card--featured:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,160,122,.18);
}
/* Ribbon — horizontal badge top-left */
.sys-card-ribbon {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--yellow);
  color: var(--black);
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
/* Header — colored band */
.sys-card-header {
  padding: 28px 24px 22px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sys-card-header svg { opacity: .85; }
.sys-card-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}
.sys-card-tag {
  display: inline-block;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 3px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Header color variants */
.sys-card-header--ext { background: linear-gradient(135deg, #6bb38a 0%, #4a9c6e 100%); }
.sys-card-header--semi { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); }
.sys-card-header--int { background: linear-gradient(135deg, #214b35 0%, #16332a 100%); }
/* Specs list */
.sys-card-specs {
  list-style: none;
  padding: 20px 24px;
  margin: 0;
  flex: 1;
}
.sys-card-specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  gap: 12px;
}
.sys-card-specs li:last-child { border-bottom: none; }
.sys-spec-label {
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 500;
  white-space: nowrap;
}
.sys-spec-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
  text-align: right;
}
/* Footer */
.sys-card-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.015);
}
.sys-card-best {
  font-size: 0.78rem;
  color: var(--green-dark);
  font-weight: 500;
  font-style: italic;
}
.sys-card-link {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green);
  transition: color .2s;
}
.sys-card:hover .sys-card-link { color: var(--green-dark); }
/* Responsive */
@media (max-width: 900px) {
  .sys-compare { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .sys-card--featured { transform: none; }
  .sys-card--featured:hover { transform: translateY(-4px); }
}

/* ========================================
   WATER CYCLE (gestion eaux pluviales)
   ======================================== */
.water-cycle {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
}
.water-step {
  flex: 1;
  text-align: center;
  padding: 0 12px;
  position: relative;
}
.water-step-num {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 10px;
}
.water-step-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(14,178,122,.08);
  border: 2px solid rgba(14,178,122,.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  transition: border-color .3s, background .3s;
}
.water-step:hover .water-step-icon {
  border-color: var(--green);
  background: rgba(14,178,122,.14);
}
.water-step h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.water-step-stat {
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 6px;
  line-height: 1;
}
.water-step p {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.5;
  max-width: 180px;
  margin: 0 auto;
}
.water-step-arrow {
  display: flex;
  align-items: center;
  padding-top: 40px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .water-cycle {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }
  .water-step-arrow {
    padding-top: 0;
    transform: rotate(90deg);
  }
  .water-step p { max-width: none; }
}

/* ========================================
   AVANTAGES HORIZONTAL (compact toiture)
   ======================================== */
.avantages-h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.avantage-h-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid var(--gray-border);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.avantage-h-item:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,160,122,.08);
}
.avantage-h-icon {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: 10px;
  background: rgba(14,178,122,.10);
  display: flex; align-items: center; justify-content: center;
}
.avantage-h-item h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 2px;
  line-height: 1.2;
}
.avantage-h-item p {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 900px) {
  .avantages-h { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .avantages-h { grid-template-columns: 1fr; }
}

/* ========================================
   SYSTEM DETAIL BLOCKS (toiture)
   ======================================== */
.sys-detail {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: start;
}
.sys-detail--reverse > :first-child { order: 1; }
/* Image */
.sys-detail-img {
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.sys-detail-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  min-height: 380px;
}
/* Body */
.sys-detail-body {}
.sys-detail-tag {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.sys-detail-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 12px;
  line-height: 1.2;
}
.sys-detail-intro {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}
/* Stats mini-grid */
.sys-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: var(--space-md);
}
.sys-detail-stat {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: border-color .3s;
}
.section--gray .sys-detail-stat {
  background: rgba(255,255,255,.7);
}
.sys-detail-stat:hover { border-color: var(--green); }
.sys-detail-stat-val {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.1;
}
.sys-detail-stat-unit {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green);
}
.sys-detail-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 4px;
}
/* Feature checks */
.sys-detail-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-sm);
}
.sys-detail-feat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sys-detail-feat svg { flex-shrink: 0; }
.sys-detail-feat span {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.4;
}
/* Variants (semi-intensif) */
.sys-detail-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--space-sm);
}
.sys-detail-variant {
  background: rgba(14,178,122,.06);
  border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
}
.sys-detail-variant h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}
.sys-detail-variant p {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .sys-detail,
  .sys-detail--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .sys-detail-img { position: static; }
  .sys-detail-img img { min-height: 220px; }
  .sys-detail-variants { grid-template-columns: 1fr; }
}

/* ========================================
   REALISATIONS MOSAIC
   ======================================== */
.realisations-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 6px;
  width: 100%;
}
/* Paysage variant — 3 cols, hero 2×2, no holes */
.realisations-mosaic--paysage {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 220px 220px 220px;
}
.mosaic-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.mosaic-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mosaic-item:hover img { transform: scale(1.05); }
.mosaic-item--tall { grid-row: span 2; }
.mosaic-item--wide { grid-column: span 2; }
.mosaic-item--hero { grid-column: span 2; grid-row: span 2; }
.mosaic-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  opacity: 0;
  transition: opacity .3s ease;
}
.mosaic-item:hover .mosaic-overlay { opacity: 1; }
.mosaic-overlay span {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
}
@media (max-width: 768px) {
  .realisations-mosaic,
  .realisations-mosaic--paysage {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    grid-template-rows: auto;
  }
  .mosaic-item--hero { grid-column: span 2; grid-row: span 1; }
  .mosaic-item--wide { grid-column: span 2; }
}
@media (max-width: 480px) {
  .realisations-mosaic,
  .realisations-mosaic--paysage {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
    grid-template-rows: auto;
  }
  .mosaic-item--wide, .mosaic-item--tall, .mosaic-item--hero { grid-column: span 1; grid-row: span 1; }
}

/* ========================================
   IRRIGATION SHOWCASE (premium dark section)
   ======================================== */
.irrigation-showcase {
  background: var(--green-dark);
  position: relative;
  overflow: hidden;
}
.irrigation-showcase::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 10% 90%, rgba(0,160,122,.15), transparent),
    radial-gradient(ellipse 500px 350px at 90% 10%, rgba(226,194,0,.08), transparent);
  pointer-events: none;
}

/* Header */
.irrigation-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  position: relative;
}
.irrigation-badge {
  display: inline-block;
  font-family: var(--body-font);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  border: 1px solid rgba(0,160,122,.35);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: var(--space-sm);
}
.irrigation-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #fff;
  margin-bottom: var(--space-sm);
}
.irrigation-subtitle {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}

/* Cards grid */
.irrigation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.irrigation-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  transition: transform .3s, background .3s, border-color .3s;
  position: relative;
}
.irrigation-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.1);
  border-color: rgba(0,160,122,.3);
}
.irrigation-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(0,160,122,.15);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
}
.irrigation-card h4 {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.irrigation-card p {
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  line-height: 1.65;
  margin: 0 0 var(--space-sm);
}
.irrigation-card-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green);
  background: rgba(0,160,122,.12);
  padding: 3px 10px;
  border-radius: 4px;
}

/* Stats bar */
.irrigation-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md) 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.irrigation-stat {
  text-align: center;
}
.irrigation-stat strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.irrigation-stat span {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.irrigation-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.1);
}
.irrigation-footnote {
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  margin-top: var(--space-md);
  font-style: italic;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .irrigation-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .irrigation-grid { grid-template-columns: 1fr; }
  .irrigation-stats { flex-wrap: wrap; gap: var(--space-md); }
  .irrigation-stat-sep { display: none; }
}

/* ========================================
   GALLERY CAROUSEL — SPLIT LAYOUT
   ======================================== */
.gallery-carousel-header {
  margin-bottom: var(--space-lg);
}
.gallery-carousel-sub {
  text-align: center;
  color: var(--text-light);
  font-size: .95rem;
  margin-top: calc(-1 * var(--space-sm));
}
/* Split container — hauteur adaptée au viewport */
.gallery-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-md);
  /* Clamp entre 420px min et 70vh max pour tenir sur un écran */
  height: clamp(420px, 55vh, 600px);
}
/* Left — image area */
.gallery-split-visual {
  position: relative;
  overflow: hidden;
  background: var(--black);
  height: 100%;
}
.gallery-carousel-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  height: 100%;
}
.gallery-carousel-slide {
  min-width: 100%;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.gallery-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Arrows — charte graphique verte */
.gallery-carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: rgba(0,160,122,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--green);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s, border-color .25s;
}
.gallery-carousel-arrow:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-50%) scale(1.08);
}
.gallery-carousel-arrow--prev { left: 14px; }
.gallery-carousel-arrow--next { right: 14px; }
/* Counter on image */
.gallery-carousel-counter {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  font-family: var(--heading-font);
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
}
/* Right — info panel */
.gallery-split-info {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.gallery-split-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  margin-bottom: 4px;
}
.gallery-split-client {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 800;
  color: var(--black);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
/* Detail list — compact */
.gallery-split-details {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gallery-split-details li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-border);
}
.gallery-split-details li:last-child { border-bottom: none; }
.gallery-split-details svg {
  flex-shrink: 0;
  color: var(--green);
}
.gallery-split-key {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-light);
  line-height: 1;
  margin-bottom: 2px;
}
.gallery-split-details strong {
  font-size: .88rem;
  font-weight: 600;
  color: var(--black);
}
/* Dots inside info panel */
.gallery-split-dots {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-sm);
}
.gallery-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--gray-border);
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s;
}
.gallery-carousel-dot--active {
  background: var(--green);
  transform: scale(1.3);
}
.gallery-carousel-dot:hover { background: #bbb; }
.gallery-carousel-dot--active:hover { background: var(--green); }
/* CTA */
.gallery-split-cta {
  align-self: flex-start;
  font-size: .85rem;
}

/* ---- Responsive ---- */
/* Grands écrans (1440px+) */
@media (min-width: 1440px) {
  .gallery-split { height: clamp(500px, 50vh, 650px); }
}
/* Écrans moyens (1024-1439) — défaut ci-dessus */

/* Petits laptops (768-1024) */
@media (max-width: 1024px) {
  .gallery-split {
    height: clamp(380px, 50vh, 520px);
    grid-template-columns: 1.1fr 1fr;
  }
  .gallery-split-client { font-size: 1.15rem; }
  .gallery-split-details li { padding: 6px 0; }
}
/* Tablette / mobile */
@media (max-width: 768px) {
  .gallery-split {
    grid-template-columns: 1fr;
    height: auto;
  }
  .gallery-split-visual { height: 50vw; min-height: 220px; max-height: 320px; }
  .gallery-split-info { padding: var(--space-md); }
  .gallery-carousel-arrow { width: 38px; height: 38px; }
  .gallery-carousel-arrow--prev { left: 8px; }
  .gallery-carousel-arrow--next { right: 8px; }
}

/* ========================================
   ADVANTAGES SECTION
   ======================================== */
.advantages-section {
  background: var(--gray);
}
.advantages-header {
  margin-bottom: var(--space-lg);
}
.advantages-sub {
  text-align: center;
  color: var(--text-light);
  font-size: .95rem;
  max-width: 560px;
  margin: calc(-1 * var(--space-sm)) auto 0;
}
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.advantage-card {
  text-align: left;
  padding: var(--space-md) var(--space-md);
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius);
  background: var(--white);
  transition: transform .3s, box-shadow .3s, border-color .3s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.advantage-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.advantage-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(14,178,122,.10);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.advantage-icon svg {
  width: 26px; height: 26px;
}
.advantage-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--black);
}
.advantage-card p {
  font-size: .88rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.6;
}
.advantages-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .advantages-grid, .advantages-grid--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .advantages-grid, .advantages-grid--four { grid-template-columns: 1fr; } }

/* ========================================
   SCHEMA LAYERS (technical composition)
   ======================================== */
.schema-section { background: var(--gray); padding: var(--space-lg) 0; overflow: hidden; }
.schema-section > .container { max-width: 1300px; padding: 0 24px; }
.schema-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl);
  align-items: center; margin-top: var(--space-md);
}
.schema-image img {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover;
}
@media (max-width: 768px) {
  .schema-layout { grid-template-columns: 1fr; }
}
.schema-layers {
  display: flex; flex-direction: column; gap: 8px;
}
.schema-layer {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; background: var(--white);
  border-radius: var(--border-radius-sm);
  border-left: 4px solid var(--green);
  transition: transform .2s;
}
.schema-layer:hover { transform: translateX(4px); }
.schema-layer-dot {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem; font-weight: 700;
}
.schema-layer h4 { font-size: .92rem; font-weight: 700; margin-bottom: 2px; }
.schema-layer p { font-size: .84rem; color: var(--text-light); margin: 0; }

/* ========================================
   EXPLODED VIEW — Photo-based
   2-column: photo left | all labels right
   ======================================== */
.exploded-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
}

/* Scene container — stretches to labels height */
.exploded-scene {
  display: grid;
  place-items: center;
  width: 100%;
  position: relative;
  min-height: 0;
}

/* 3D render image — constrained to labels height */
.exploded-photo {
  width: auto;
  max-width: 100%;
  height: 0;
  min-height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(.92) translateY(20px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1),
              transform 1.2s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.10));
  position: relative;
  z-index: 1;
}
.exploded-scene.is-visible .exploded-photo {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ====== LABELS — all stacked on the right ====== */
.exploded-labels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.exploded-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid transparent;
  width: 100%;
  opacity: 0;
  transform: translateX(20px);
  transition: all .5s cubic-bezier(.22,1,.36,1);
}
.exploded-label.is-visible {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger + colors */
.exploded-label:nth-child(1) { transition-delay: .15s; border-left-color: #3a8a2a; }
.exploded-label:nth-child(2) { transition-delay: .25s; border-left-color: #7a9a68; }
.exploded-label:nth-child(3) { transition-delay: .35s; border-left-color: #7a8a78; }
.exploded-label:nth-child(4) { transition-delay: .45s; border-left-color: #b8935a; }
.exploded-label:nth-child(5) { transition-delay: .55s; border-left-color: #a0a098; }

.exploded-label-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  margin-top: 1px;
}
.exploded-label:nth-child(1) .exploded-label-dot { background: #3a8a2a; }
.exploded-label:nth-child(2) .exploded-label-dot { background: #7a9a68; }
.exploded-label:nth-child(3) .exploded-label-dot { background: #7a8a78; }
.exploded-label:nth-child(4) .exploded-label-dot { background: #b8935a; }
.exploded-label:nth-child(5) .exploded-label-dot { background: #a0a098; }

.exploded-label-text h4 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.exploded-label-text p {
  font-size: .8rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.45;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 900px) {
  .exploded-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 520px;
    margin: 0 auto;
  }
  .exploded-scene { order: 1; }
  .exploded-labels { order: 2; }
}
@media (max-width: 480px) {
  .exploded-label {
    padding: 12px 14px;
  }
}

/* ========================================
   GALLERY GRID
   ======================================== */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.gallery-item {
  overflow: hidden; border-radius: 4px; aspect-ratio: 4/3;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .4s;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item--large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item--large { grid-column: span 1; grid-row: span 1; }
}

/* ========================================
   PRICING BLOCK
   ======================================== */
.pricing-block {
  background: var(--gray); border-radius: var(--border-radius);
  padding: var(--space-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.pricing-amount {
  font-family: var(--heading-font); font-size: 2.4rem;
  font-weight: 900; color: var(--green);
}
.pricing-amount span {
  font-size: .88rem; font-weight: 400; color: var(--text-light);
}
.pricing-info { font-size: .9rem; color: var(--text-light); }

/* ========================================
   SPEC TABLE
   ======================================== */
.spec-table {
  width: 100%; border-collapse: collapse; margin-top: var(--space-md);
  border-radius: var(--border-radius-sm); overflow: hidden;
}
.spec-table th, .spec-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--gray-border); font-size: .88rem;
}
.spec-table th {
  background: var(--black); color: #fff;
  font-family: var(--heading-font); font-weight: 600;
}
.spec-table td:first-child { font-weight: 600; }
.spec-table tr:nth-child(even) { background: var(--gray); }

/* ========================================
   TWO-COLUMN TEXT+IMAGE LAYOUT
   ======================================== */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); align-items: center;
}
.two-col--reverse > :first-child { order: 1; }
.two-col img {
  width: 100%; border-radius: var(--border-radius);
  object-fit: cover;
}
@media (max-width: 768px) {
  .two-col, .two-col--reverse {
    grid-template-columns: 1fr; direction: ltr;
  }
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center { text-align: center; }
.mt-xs { margin-top: 0.5rem; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ========================================
   TOITURE-SPECIFIC COMPONENTS
   ======================================== */
.specs-list {
  list-style: none; padding: 0; margin: var(--space-sm) 0 0;
}
.specs-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 0.95rem; line-height: 1.5;
}
.specs-list li:last-child { border-bottom: none; }
.subsystem-block {
  background: rgba(14,178,122,.06);
  border-left: 3px solid var(--green);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
}
.subsystem-block h4 { margin-bottom: 0.25rem; }
.subsystem-block ul {
  list-style: disc; padding-left: 1.2rem; font-size: 0.9rem;
}
/* Avis Technique Card */
.avis-technique-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}
.avis-technique-icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 14px;
  background: rgba(14,178,122,.10);
  display: flex; align-items: center; justify-content: center;
}
.avis-technique-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 0.4rem;
}
.avis-technique-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-light);
}
.compliance-note {
  background: rgba(14,178,122,.08);
  border: 1px solid rgba(14,178,122,.2);
  border-radius: var(--border-radius);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
  font-size: 0.95rem; line-height: 1.6;
}
.table-wrapper {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.figure-note {
  font-size: 0.85rem; color: var(--text-light);
  margin-top: 0.25rem;
}

/* ========================================
   PAGE HERO SHORT (no background image)
   ======================================== */
.page-hero--short {
  background: var(--black);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.page-hero--short .page-hero-content { position: static; }

/* ========================================
   ATELIER SHOWCASE
   ======================================== */
.atelier-showcase {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
  margin-bottom: var(--space-xl);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.atelier-main {
  position: relative;
  min-height: 360px;
  overflow: hidden;
}
.atelier-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.atelier-main-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.atelier-main-caption span {
  font-family: var(--heading-font);
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
}
.atelier-main-caption span:last-child {
  font-weight: 400;
  font-size: .78rem;
  opacity: .75;
}
.atelier-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atelier-side-img {
  flex: 1;
  overflow: hidden;
}
.atelier-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.atelier-side-img:hover img {
  transform: scale(1.05);
}

/* Atelier features */
.atelier-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.atelier-feature {
  text-align: center;
  padding: var(--space-md);
}
.atelier-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--green-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.atelier-feature h4 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.atelier-feature p {
  font-size: .85rem;
  color: var(--text-light);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .atelier-showcase {
    grid-template-columns: 1fr;
  }
  .atelier-main {
    min-height: 240px;
  }
  .atelier-side {
    flex-direction: row;
  }
  .atelier-features {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .atelier-features {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   TEAM GRID
   ======================================== */
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg); text-align: center;
}
.team-member {}
.team-photo {
  width: 160px; height: 160px; border-radius: 50%;
  overflow: hidden; margin: 0 auto var(--space-sm);
  border: 3px solid var(--green);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo--placeholder {
  background: var(--gray);
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(0,160,122,.25);
  border-style: dashed;
}
.team-member h4 { margin-bottom: 2px; }
.team-role {
  display: inline-block; font-size: .85rem;
  color: var(--green); font-weight: 500; margin-bottom: var(--space-xs, .5rem);
}
.team-member p { font-size: .9rem; color: var(--text-light); margin-top: .5rem; }
@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ========================================
   CONTACT FORM
   ======================================== */
.contact-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-size: .88rem; font-weight: 500; color: var(--black);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: 14px 16px;
  border: 1.5px solid var(--gray-border);
  border-radius: var(--border-radius-sm);
  font-family: var(--body-font); font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
  background: #fff;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14,178,122,.12);
}
.form-group textarea { resize: vertical; }

/* ── File Upload Zone ── */
.form-label-hint { font-weight: 400; color: var(--text-light); font-size: .78rem; }
.file-upload {
  position: relative;
  border: 2px dashed var(--gray-border);
  border-radius: var(--border-radius);
  background: var(--gray);
  transition: border-color .25s, background .25s;
  overflow: hidden;
}
.file-upload.drag-over {
  border-color: var(--green);
  background: rgba(0, 160, 122, .04);
}
.file-upload-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.file-upload-content {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 16px;
  pointer-events: none;
}
.file-upload-icon { opacity: .6; }
.file-upload-text {
  font-size: .88rem; color: var(--text-light);
  margin: 0;
}
.file-upload-browse {
  color: var(--green); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}
.file-upload-hint {
  font-size: .75rem; color: #999; margin: 0;
}
.file-upload-preview {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: rgba(0, 160, 122, .06);
  border-top: 1px solid rgba(0, 160, 122, .15);
}
.file-preview-info {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.file-preview-name {
  font-size: .88rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.file-preview-size {
  font-size: .78rem; color: var(--text-light);
  white-space: nowrap;
}
.file-preview-remove {
  background: none; border: none; cursor: pointer;
  color: #999; font-size: 1.1rem; padding: 4px 8px;
  border-radius: 6px; transition: all .2s;
}
.file-preview-remove:hover { background: rgba(220,50,50,.08); color: #d33; }
.file-upload-error {
  padding: 10px 16px;
  font-size: .82rem; color: #d33;
  background: rgba(220,50,50,.06);
  border-top: 1px solid rgba(220,50,50,.12);
}
.file-upload-security {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: #888; margin-top: 6px;
}
.file-upload-security svg { flex-shrink: 0; opacity: .5; }

/* Form status message */
.form-status {
  text-align: center; padding: 12px 16px;
  border-radius: var(--border-radius);
  font-size: .88rem; margin-top: 8px;
}
.form-status--error {
  background: rgba(220,50,50,.06); color: #c33;
  border: 1px solid rgba(220,50,50,.15);
}
.form-status--success {
  background: rgba(0,160,122,.06); color: var(--green-dark);
  border: 1px solid rgba(0,160,122,.15);
}
.form-status--spam {
  background: rgba(226,194,0,.08); color: #8a7200;
  border: 1px solid rgba(226,194,0,.2);
}

/* Submit button spinner */
.btn-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.form-section-title {
  font-family: var(--heading-font);
  font-size: 1.15rem; font-weight: 600;
  margin-top: var(--space-md); margin-bottom: var(--space-xs, .5rem);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--green);
}
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ========================================
   CONTACT INFO
   ======================================== */
.contact-info-block { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-info-item {
  display: flex; gap: var(--space-sm); align-items: flex-start;
}
.contact-info-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.contact-info-item h4 { margin-bottom: 2px; }
.contact-info-item a { color: var(--green); font-weight: 500; }
.contact-info-item p { font-size: .92rem; color: var(--text-light); margin: 0; }
.contact-hours h4 { margin-bottom: 6px; }
.contact-hours p { font-size: .92rem; color: var(--text-light); margin: 2px 0; }

/* ========================================
   JOB CARDS
   ======================================== */
.job-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.job-card {
  background: var(--white); border-radius: var(--border-radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.job-card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid #f0f0f0;
}
.job-card-header h3 { margin-bottom: 6px; }
.job-meta { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.job-tag {
  display: inline-block; background: var(--green);
  color: #fff; font-size: .78rem; font-weight: 600;
  padding: 3px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .5px;
}
.job-location { font-size: .88rem; color: var(--text-light); }
.job-card-body {
  padding: var(--space-md) var(--space-lg);
}
.job-card-body p { font-size: .95rem; color: var(--text-light); line-height: 1.7; margin-bottom: var(--space-sm); }
.job-card-body h4 { font-size: .95rem; margin-bottom: 6px; margin-top: var(--space-sm); }
.job-card-body ul {
  list-style: disc; padding-left: 1.4rem; font-size: .9rem;
  color: var(--text-light); line-height: 1.7;
}
.job-card-footer {
  padding: var(--space-sm) var(--space-lg) var(--space-md);
}

/* ========================================
   LEGAL CONTENT
   ======================================== */
/* ========================================
   LEGAL PAGE — Premium Design
   ======================================== */

/* ── Barre de progression lecture ── */
.legal-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--yellow));
  z-index: 9999;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Hero ── */
.legal-hero {
  margin-top: var(--nav-height);
  padding: clamp(56px, 9vw, 90px) 0 clamp(40px, 6vw, 64px);
  background: linear-gradient(145deg, #0d3d2a 0%, var(--green-dark) 40%, #1a5c3a 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.legal-hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.legal-shape { position: absolute; animation: legalFloat 9s ease-in-out infinite; }
.legal-shape--1 { width: 280px; top: -60px; right: -60px; }
.legal-shape--2 { width: 160px; bottom: -40px; left: 10%; animation-delay: -4s; }
.legal-shape--3 { width: 100px; top: 35%; left: 60%; animation-delay: -6s; }
@keyframes legalFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.03); }
}
.legal-hero-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.legal-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: var(--space-md);
  backdrop-filter: blur(4px);
  letter-spacing: .02em;
}
.legal-hero h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: var(--space-md);
  font-weight: 700;
  white-space: nowrap;
}
.legal-hero-accent {
  color: var(--green);
}
.legal-hero > .container > .legal-hero-inner > p {
  color: rgba(255,255,255,.6);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  white-space: nowrap;
}

/* Navigation pills */
.legal-hero-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.legal-nav-pill {
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  backdrop-filter: blur(4px);
}
.legal-nav-pill:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ── Layout principal ── */
.legal-page {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--gray);
}
.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ── Sidebar sticky ── */
.legal-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}
.legal-toc {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  margin-bottom: 16px;
}
.legal-toc-title {
  font-family: var(--heading-font);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  padding: 14px 18px 8px;
}
.legal-toc-link {
  padding: 10px 18px;
  font-size: .88rem;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .2s;
}
.legal-toc-link:hover {
  background: rgba(0,160,122,.05);
  border-left-color: var(--green);
  color: var(--green-dark);
}
.legal-sidebar-contact {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.legal-sidebar-contact p {
  font-size: .8rem;
  color: var(--text-light);
  margin-bottom: 6px;
}
.legal-sidebar-contact a {
  font-size: .85rem;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

/* ── Main content ── */
.legal-main {
  min-width: 0;
}

/* ── Sections ── */
.legal-section {
  margin-bottom: var(--space-xl);
}
.legal-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--green);
}
.legal-section-num {
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 800;
  color: var(--green);
  opacity: .25;
  line-height: 1;
}
.legal-section-header h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  color: var(--green-dark);
  margin: 0;
}

/* ── Cards ── */
.legal-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
}
.legal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.legal-card h3 {
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.legal-card p {
  font-size: .92rem;
  color: var(--text-light);
  line-height: 1.75;
  margin: 0;
}
.legal-card p + p { margin-top: 6px; }
.legal-card a { color: var(--green); font-weight: 600; text-decoration: none; }
.legal-card a:hover { text-decoration: underline; }

/* Card highlight (RGPD) */
.legal-card--highlight {
  background: linear-gradient(135deg, var(--green-dark), #1a5c3a);
  border: none;
}
.legal-card--highlight h3 { color: #fff; }
.legal-card--highlight p { color: rgba(255,255,255,.8); }
.legal-card--highlight a { color: var(--yellow); }

/* Card sub-grids */
.legal-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.legal-card-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.legal-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green);
  margin-bottom: 4px;
}
.legal-address p {
  font-size: .9rem;
}

/* Update notice */
.legal-cgv-intro {
  font-size: .95rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  padding: 16px 20px;
  background: rgba(0,160,122,.04);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--green);
}

.legal-update {
  padding: 14px 20px;
  background: rgba(0,160,122,.06);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  font-size: .85rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: var(--space-md);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-sidebar {
    position: static;
    display: flex;
    gap: 12px;
  }
  .legal-toc { flex: 1; }
  .legal-sidebar-contact { flex: 1; }
  .legal-card-grid,
  .legal-card-duo {
    grid-template-columns: 1fr;
  }
  .legal-hero-nav { flex-direction: column; align-items: center; }
}

/* ── Breathers — apartés fun entre sections ── */
.legal-breather {
  text-align: center;
  padding: var(--space-lg) 0;
}
.legal-breather span {
  display: inline-block;
  font-size: .85rem;
  color: var(--text-light);
  font-style: italic;
  background: var(--white);
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  border: 1px dashed rgba(0,0,0,.08);
}

/* ── Easter egg — fin de page ── */
.legal-easter {
  margin-top: var(--space-xl);
  text-align: center;
}
.legal-easter-inner {
  background: linear-gradient(145deg, #f8faf9, #edf5f0);
  border: 2px dashed var(--green);
  border-radius: var(--border-radius);
  padding: var(--space-xl) var(--space-lg);
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}
.legal-easter-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-sm);
}
.legal-easter-title {
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.legal-easter-sub {
  font-size: .92rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}
.legal-easter-cta {
  font-size: .95rem;
  color: var(--green-dark);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.legal-easter .btn {
  display: inline-flex;
}

/* Legacy support */
.legal-content { max-width: 800px; }
.legal-block { margin-bottom: var(--space-lg); }
.legal-block h3 { font-family: var(--heading-font); font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-xs, .5rem); color: var(--black); }
.legal-block p { font-size: .95rem; color: var(--text-light); line-height: 1.8; }
.legal-block p + p { margin-top: .5rem; }
.legal-block a { color: var(--green); font-weight: 500; }

/* ========================================
   VERTICAL TIMELINE
   ======================================== */
.timeline {
  position: relative;
  max-width: 600px;
  margin: var(--space-xl) auto 0;
  padding: 0;
}
/* Vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--green), rgba(14,178,122,.2));
  border-radius: 3px;
}

.timeline-item {
  position: relative;
  padding-left: 100px;
  margin-bottom: var(--space-lg);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Image bubble on the line */
.timeline-bubble {
  position: absolute;
  left: 14px;
  top: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--green);
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 2;
}
.timeline-item:hover .timeline-bubble {
  transform: scale(1.12);
  box-shadow: 0 4px 20px rgba(14,178,122,.3);
}
.timeline-item.open .timeline-bubble {
  border-color: var(--yellow);
  transform: scale(1.15);
}
.timeline-bubble img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Date label */
.timeline-date {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin-bottom: 4px;
  transition: color .2s;
}
.timeline-item.open .timeline-date {
  color: var(--black);
}

/* Title */
.timeline-title {
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--black);
  position: relative;
  padding-right: 24px;
}
/* Expand arrow indicator */
.timeline-title::after {
  content: '▸';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--green);
  transition: transform .3s ease;
}
.timeline-item.open .timeline-title::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Expandable text block */
.timeline-expand {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease, margin .3s ease;
  margin-top: 0;
}
.timeline-item.open .timeline-expand {
  max-height: 300px;
  opacity: 1;
  margin-top: 10px;
}
.timeline-expand p {
  font-size: .92rem;
  color: var(--text-light);
  line-height: 1.7;
  background: var(--white);
  padding: 14px 18px;
  border-radius: var(--border-radius);
  border-left: 3px solid var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .timeline::before { left: 28px; }
  .timeline-item { padding-left: 76px; }
  .timeline-bubble {
    left: 4px;
    width: 48px; height: 48px;
  }
  .timeline-date { font-size: 1.1rem; }
  .timeline-title { font-size: .95rem; }
}

/* ========================================
   ARCHITECTURE EXPLODED (extérieur page)
   Horizontal layered cards with connecting line
   ======================================== */
.archi-exploded {
  padding: var(--space-xl) 0;
  background: var(--white);
}
.archi-exploded-intro {
  text-align: center;
  max-width: 600px;
  margin: calc(-1 * var(--space-md)) auto var(--space-xl);
  color: var(--text-light);
  font-size: .95rem;
}
.archi-layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  position: relative;
}
.archi-layer-card {
  background: var(--gray);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  position: relative;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.archi-layer-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.archi-layer-card:hover::before { transform: scaleX(1); }
.archi-layer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.archi-layer-num {
  font-family: var(--heading-font);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--green);
  opacity: .2;
  line-height: 1;
  margin-bottom: 8px;
}
.archi-layer-card h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}
.archi-layer-card p {
  font-size: .84rem;
  color: var(--text-light);
  line-height: 1.7;
  margin: 0;
}
.archi-layer-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green);
  background: rgba(0,160,122,.1);
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 10px;
}
@media (max-width: 768px) {
  .archi-layers-grid { grid-template-columns: 1fr; }
}

/* ========================================
   IRRIGATION EXT (split layout: image + features)
   Dark section, different from 4-card grid
   ======================================== */
.irrigation-ext {
  background: var(--green-dark);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}
.irrigation-ext::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 500px 400px at 80% 20%, rgba(0,160,122,.12), transparent),
    radial-gradient(ellipse 400px 300px at 20% 80%, rgba(226,194,0,.06), transparent);
  pointer-events: none;
}
.irrigation-ext-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
}
.irrigation-ext-visual {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.irrigation-ext-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
  max-height: 460px;
}
.irrigation-ext-content {
  position: relative;
}
.irrigation-ext-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  border: 1px solid rgba(0,160,122,.4);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: var(--space-sm);
}
.irrigation-ext-content h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: #fff;
  margin-bottom: var(--space-sm);
}
.irrigation-ext-content > p {
  color: rgba(255,255,255,.65);
  font-size: .92rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 480px;
}
.irrigation-ext-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.irrigation-ext-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.irrigation-ext-features li:last-child { border-bottom: none; }
.irrigation-ext-features .irr-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(0,160,122,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.irrigation-ext-features .irr-icon svg {
  width: 20px;
  height: 20px;
}
.irrigation-ext-features strong {
  display: block;
  font-family: var(--heading-font);
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.irrigation-ext-features span {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
/* Stats bar for ext irrigation */
.irrigation-ext-stats {
  display: flex;
  gap: 24px;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,.1);
}
.irrigation-ext-stat strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.irrigation-ext-stat span {
  font-size: .7rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .5px;
}
@media (max-width: 768px) {
  .irrigation-ext-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .irrigation-ext-visual img { max-height: 280px; }
  .irrigation-ext-stats { gap: 16px; flex-wrap: wrap; }
}

/* ========================================
   PROVENANCE EXT (horizontal journey, SVG icons)
   ======================================== */
.provenance-ext {
  padding: var(--space-xl) 0;
  background: var(--gray);
}
.provenance-ext-intro {
  text-align: center;
  max-width: 560px;
  margin: calc(-1 * var(--space-md)) auto var(--space-xl);
  color: var(--text-light);
  font-size: .92rem;
}
.provenance-grid-ext {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.provenance-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  border: 1px solid var(--gray-border);
  text-align: center;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.provenance-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.provenance-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.provenance-card-icon svg {
  width: 24px;
  height: 24px;
}
.provenance-card h4 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.provenance-card p {
  font-size: .84rem;
  color: var(--text-light);
  margin: 0;
}
.provenance-card .provenance-location {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--green);
  margin-top: 8px;
}
@media (max-width: 768px) {
  .provenance-grid-ext { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .provenance-grid-ext { grid-template-columns: 1fr; }
}

/* ========================================
   PALETTE EXT (visual plant cards)
   ======================================== */
.palette-ext-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.palette-ext-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  border: 1px solid var(--gray-border);
  transition: transform .3s, box-shadow .3s, border-color .3s;
  text-align: center;
}
.palette-ext-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.palette-ext-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0,160,122,.08);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.palette-ext-icon svg {
  width: 24px;
  height: 24px;
}
.palette-ext-card h4 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--black);
}
.palette-ext-card p {
  font-size: .84rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .palette-ext-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .palette-ext-grid { grid-template-columns: 1fr; }
}

/* ========================================
   CONTACT PAGE — New layout
   ======================================== */
.contact-hero {
  margin-top: var(--nav-height);
  padding: var(--space-3xl) 0 calc(var(--space-xl) + 20px);
  background: linear-gradient(135deg, var(--green-dark) 0%, #1a5c3a 40%, #0d3d2a 100%);
  position: relative;
  overflow: hidden;
}

/* ── Formes décoratives flottantes ── */
.contact-hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.contact-shape {
  position: absolute;
  animation: contactFloat 8s ease-in-out infinite;
}
.contact-shape--1 { width: 320px; top: -60px; right: -80px; animation-delay: 0s; }
.contact-shape--2 { width: 180px; bottom: -40px; left: 5%; animation-delay: -3s; }
.contact-shape--3 { width: 100px; top: 30%; right: 25%; animation-delay: -5s; }
@keyframes contactFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.05); }
}

.contact-hero-inner {
  max-width: 600px;
  position: relative;
  z-index: 2;
}

/* ── Badge réactivité ── */
.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,160,122,.2);
  border: 1px solid rgba(0,160,122,.35);
  color: #7ddfbb;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  backdrop-filter: blur(6px);
}
.contact-hero-badge svg { width: 15px; height: 15px; stroke: #7ddfbb; }

.contact-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  margin-bottom: var(--space-sm);
  line-height: 1.15;
}
.contact-hero-accent {
  color: var(--green);
  position: relative;
}
.contact-hero-accent::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 3px;
  background: var(--green);
  border-radius: 2px;
  opacity: .4;
}
.contact-hero p {
  color: rgba(255,255,255,.75);
  font-size: 1.1rem;
  line-height: 1.7;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.contact-form-wrap {
  background: #fff;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  margin-top: -60px;
  position: relative;
  z-index: 2;
  border: 1px solid var(--gray-border);
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: var(--space-md);
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--gray);
  border-radius: var(--border-radius-sm);
  transition: transform .3s;
}
.contact-card:hover { transform: translateX(3px); }
.contact-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-card h4 {
  font-size: .9rem;
  margin-bottom: 4px;
}
.contact-card p {
  font-size: .84rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0;
}
.contact-card a {
  font-size: .9rem;
}
.contact-link {
  color: var(--text); font-weight: 600; text-decoration: none;
  transition: color .2s;
}
.contact-link:hover { color: var(--green); }
.contact-link--phone { font-size: 1.1rem; }
.btn-submit { width: 100%; justify-content: center; padding: 16px 28px; font-size: .95rem; margin-top: var(--space-xs); }

.contact-availability {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(0,160,122,.06);
  border: 1px solid rgba(0,160,122,.15);
  border-radius: var(--border-radius-sm);
}
.contact-availability-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,160,122,.4); }
  50% { opacity: .7; box-shadow: 0 0 0 6px rgba(0,160,122,0); }
}
.contact-availability span {
  font-size: .82rem;
  color: var(--green-dark);
  font-weight: 500;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-form-wrap { margin-top: 0; }
}

/* ========================================
   NOTRE HISTOIRE — Hero immersif
   ======================================== */
.histoire-hero {
  margin-top: var(--nav-height);
  padding: clamp(60px, 10vw, 100px) 0;
  background: linear-gradient(145deg, var(--green-dark) 0%, #1a5c3a 50%, #0d3d2a 100%);
  position: relative;
  overflow: hidden;
}

/* Shapes flottantes */
.histoire-hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.histoire-shape { position: absolute; animation: histoireFloat 10s ease-in-out infinite; }
.histoire-shape--1 { width: 400px; top: -100px; right: -100px; animation-delay: 0s; }
.histoire-shape--2 { width: 250px; bottom: -60px; left: -40px; animation-delay: -4s; }
.histoire-shape--3 { width: 140px; top: 40%; left: 35%; animation-delay: -7s; }
@keyframes histoireFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.04); }
}

/* Grid hero */
.histoire-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-lg);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Texte hero */
.histoire-hero-text { max-width: 540px; }
.histoire-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,160,122,.18);
  border: 1px solid rgba(0,160,122,.3);
  color: #7ddfbb;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: var(--space-md);
  backdrop-filter: blur(6px);
}
.histoire-hero-label svg { width: 15px; height: 15px; stroke: #7ddfbb; }

.histoire-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.08;
  margin-bottom: var(--space-md);
  font-weight: 800;
}
.histoire-accent {
  color: var(--green);
  position: relative;
}
.histoire-accent::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 100%; height: 4px;
  background: var(--green);
  border-radius: 2px;
  opacity: .35;
}
.histoire-hero-text > p {
  color: rgba(255,255,255,.75);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* Stats inline */
.histoire-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 22px 32px;
  backdrop-filter: blur(8px);
}
.histoire-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.histoire-stat strong {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--heading-font);
  line-height: 1.1;
}
.histoire-stat span {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.histoire-stat-sep {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.15);
  margin: 0 16px;
}

/* Mosaïque visuelle */
.histoire-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.histoire-mosaic-img {
  border-radius: 12px;
  object-fit: cover;
  width: 100%;
}
.histoire-mosaic--big {
  grid-row: 1 / 3;
  height: 100%;
  min-height: 380px;
}
.histoire-mosaic--small-top,
.histoire-mosaic--small-bottom {
  height: 184px;
}

/* Manifeste texte — pleine largeur */
.histoire-manifeste {
  max-width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-xl);
  align-items: start;
}
.histoire-manifeste h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--green-dark);
  margin-bottom: 0;
  grid-column: 1;
  grid-row: 1 / 3;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  padding-top: 6px;
  border-right: 3px solid var(--green);
  padding-right: var(--space-lg);
}
.histoire-manifeste p {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}
@media (max-width: 768px) {
  .histoire-manifeste {
    grid-template-columns: 1fr;
  }
  .histoire-manifeste h2 {
    border-right: none;
    border-bottom: 3px solid var(--green);
    padding-right: 0;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    white-space: normal;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .histoire-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .histoire-hero h1 { font-size: 2.2rem; }
  .histoire-hero-stats { padding: 14px 16px; }
  .histoire-stat strong { font-size: 1.3rem; }
  .histoire-mosaic { max-width: 100%; }
  .histoire-mosaic--big { min-height: 240px; }
  .histoire-mosaic--small-top,
  .histoire-mosaic--small-bottom { height: 115px; }
}

/* ── Valeurs v2 — éditorial ── */
.valeurs-v2 {
  padding-bottom: var(--space-xl);
}

/* Citation pleine largeur */
.valeurs-quote {
  background: var(--green-dark);
  padding: clamp(48px, 8vw, 80px) 0;
}
.valeurs-quote .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.valeurs-quote blockquote {
  margin: 0 0 var(--space-md);
  max-width: 760px;
}
.valeurs-line1 {
  white-space: nowrap;
}
.valeurs-quote blockquote p {
  font-family: var(--heading-font);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  color: #fff;
  line-height: 1.35;
  font-weight: 400;
}
.valeurs-quote blockquote strong {
  font-weight: 800;
  color: var(--green);
}
.valeurs-quote-sub {
  max-width: 620px;
  color: rgba(255,255,255,.6);
  font-size: 1.05rem;
  line-height: 1.75;
  text-align: center;
}

/* Cards valeurs */
.valeurs-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: -32px;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.valeurs-card {
  background: var(--white);
  padding: var(--space-lg) var(--space-md);
  border-right: 1px solid rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
  text-align: center;
}
.valeurs-card:last-child { border-right: none; }
.valeurs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  z-index: 3;
  position: relative;
}
.valeurs-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 10px;
  line-height: 1.3;
}
.valeurs-card p {
  color: var(--text-light);
  font-size: .9rem;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 900px) {
  .valeurs-cards { grid-template-columns: repeat(2, 1fr); margin-top: -24px; }
  .valeurs-card { border-bottom: 1px solid rgba(0,0,0,.06); }
}
@media (max-width: 480px) {
  .valeurs-cards { grid-template-columns: 1fr; }
}

/* ========================================
   STATION AQUAPONIE — Immersive Design
   ======================================== */

/* ── HERO FULLSCREEN ── */
.aqua-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: var(--nav-height);
}
.aqua-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.aqua-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.3) 70%,
    rgba(0,0,0,.5) 100%
  );
}
/* Cocarde BBR — positionnée en haut à gauche */
.aqua-cocarde {
  position: absolute;
  top: 32px; left: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}
.aqua-cocarde svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.aqua-cocarde-text {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .82rem;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.aqua-cocarde-text span {
  display: block;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,.6);
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .aqua-cocarde {
    top: 20px; left: 20px;
  }
  .aqua-cocarde svg { width: 52px; height: 65px; }
  .aqua-cocarde-text { font-size: .72rem; }
}

.aqua-hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: var(--space-xl) 32px;
  max-width: 820px;
}
.aqua-hero h1 {
  color: #fff;
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: -3px;
  line-height: .95;
  margin-bottom: var(--space-md);
  text-shadow: 0 4px 40px rgba(0,0,0,.4);
}
.aqua-hero h1 span {
  color: var(--green);
}
.aqua-hero-sub {
  color: rgba(255,255,255,.85);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto var(--space-lg);
}
.aqua-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Scroll indicator */
.aqua-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.aqua-hero-scroll span {
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: var(--heading-font);
}
.aqua-hero-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 768px) {
  .aqua-hero { min-height: 90vh; }
  .aqua-hero h1 { letter-spacing: -2px; }
  .aqua-hero-sub br { display: none; }
  .aqua-hero-scroll { display: none; }
}

/* ── MANIFESTE ── */
.aqua-manifeste {
  padding: var(--space-3xl) 0;
  background: var(--white);
}
.aqua-manifeste-inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.aqua-manifeste-label {
  display: inline-block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--green);
  margin-bottom: var(--space-sm);
}
.aqua-manifeste h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: var(--space-md);
  letter-spacing: -1px;
}
.aqua-manifeste p {
  font-size: 1.02rem;
  color: var(--text-light);
  line-height: 1.85;
  max-width: none;
  margin: 0 auto;
}

/* ── PHOTO STRIP ── */
.aqua-photo-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.aqua-photo-strip img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform .5s;
}
.aqua-photo-strip img:hover { transform: scale(1.03); }

@media (max-width: 768px) {
  .aqua-photo-strip { grid-template-columns: 1fr; }
  .aqua-photo-strip img { height: 220px; }
}

/* ── SHOWCASE — 3 niveaux ── */
.aqua-showcase {
  padding: var(--space-2xl) 0;
  background: var(--gray);
}
.aqua-showcase-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.aqua-showcase-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -1px;
}
.aqua-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.aqua-showcase-card {
  background: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s, box-shadow .4s;
}
.aqua-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.aqua-showcase-img {
  height: 220px;
  overflow: hidden;
}
.aqua-showcase-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.aqua-showcase-card:hover .aqua-showcase-img img {
  transform: scale(1.06);
}
.aqua-showcase-num {
  font-family: var(--heading-font);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--green-light);
  padding: var(--space-md) var(--space-md) 0;
  line-height: 1;
  color: rgba(0,160,122,.15);
}
.aqua-showcase-card h3 {
  font-size: 1.1rem;
  padding: 4px var(--space-md) 0;
}
.aqua-showcase-card p {
  font-size: .88rem;
  color: var(--text-light);
  line-height: 1.6;
  padding: 8px var(--space-md) var(--space-md);
  margin: 0;
}

@media (max-width: 900px) {
  .aqua-showcase-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ── SYMBIOSE — Split image + content ── */
.aqua-symbiose {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.aqua-symbiose-bg {
  position: absolute; inset: 0;
}
.aqua-symbiose-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.aqua-symbiose-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.8) 50%,
    rgba(0,0,0,.4) 100%
  );
}
.aqua-symbiose > .container {
  position: relative; z-index: 2;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.aqua-symbiose-content {
  max-width: 520px;
}
.aqua-symbiose h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-sm);
}
.aqua-symbiose-intro {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 440px;
}
.aqua-symbiose-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aqua-symbiose-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.aqua-symbiose-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aqua-symbiose-step h4 {
  color: #fff;
  font-size: .9rem;
  margin-bottom: 2px;
}
.aqua-symbiose-step p {
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .aqua-symbiose { min-height: auto; }
  .aqua-symbiose-bg::after {
    background: rgba(0,0,0,.85);
  }
}

/* ── GALERIE CINÉMATIQUE ── */
.aqua-cinema {
  padding: 4px 0 0;
}
.aqua-cinema-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.aqua-cinema-item {
  position: relative;
  overflow: hidden;
}
.aqua-cinema-large {
  grid-row: 1 / 3;
}
.aqua-cinema-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 260px;
  transition: transform .6s;
}
.aqua-cinema-item:hover img {
  transform: scale(1.04);
}
.aqua-cinema-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.aqua-cinema-item:hover .aqua-cinema-caption {
  opacity: 1;
  transform: translateY(0);
}
.aqua-cinema-caption h3 {
  color: #fff;
  font-size: .95rem;
  margin-bottom: 2px;
}
.aqua-cinema-caption p {
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  margin: 0;
}

@media (max-width: 768px) {
  .aqua-cinema-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .aqua-cinema-large { grid-row: auto; }
  .aqua-cinema-item img { min-height: 220px; }
  .aqua-cinema-caption { opacity: 1; transform: none; }
}

/* ── DISTINCTION — Bandeau pleine largeur ── */
.aqua-distinction {
  padding: var(--space-4xl) 0;
  margin-top: 0;
  background: var(--green-dark);
  overflow: hidden;
}
.aqua-distinction-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.aqua-distinction-cocarde {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.25));
}
.aqua-distinction-content {
  max-width: 600px;
}
.aqua-distinction-tag {
  display: inline-block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--yellow);
  margin-bottom: var(--space-xs);
}
.aqua-distinction h2 {
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--space-sm);
}
.aqua-distinction p {
  font-size: .92rem;
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  .aqua-distinction-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
  .aqua-distinction-cocarde svg { width: 64px; height: 80px; }
}

/* ── Cookie Consent Banner — Le bandeau qui a de l'âme ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0 20px 20px;
  pointer-events: none;
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cookie-banner.cookie-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner.cookie-bye {
  transform: translateY(110%);
  transition: transform .5s cubic-bezier(.55, 0, 1, .45);
}
.cookie-inner {
  max-width: 820px;
  margin: 0 auto;
  background: var(--green-dark);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  backdrop-filter: blur(12px);
}
.cookie-icon {
  flex-shrink: 0;
  animation: cookieLeafSway 4s ease-in-out infinite;
}
@keyframes cookieLeafSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.cookie-text {
  flex: 1;
  min-width: 0;
}
.cookie-title {
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
}
.cookie-sub {
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
  line-height: 1.5;
}
.cookie-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cookie-btn {
  border: none;
  cursor: pointer;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .85rem;
  border-radius: 12px;
  padding: 12px 22px;
  white-space: nowrap;
  transition: all .25s ease;
}
.cookie-btn--ok {
  background: var(--green);
  color: #fff;
}
.cookie-btn--ok:hover {
  background: #00b88a;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 160, 122, .35);
}
.cookie-btn--no {
  background: transparent;
  color: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 22px;
  font-size: .8rem;
}
.cookie-btn--no:hover {
  color: rgba(255, 255, 255, .7);
  border-color: rgba(255, 255, 255, .25);
}
.cookie-link {
  color: rgba(255, 255, 255, .4);
  font-size: .75rem;
  text-decoration: none;
  transition: color .2s;
}
.cookie-link:hover {
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 768px) {
  .cookie-inner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 14px;
  }
  .cookie-icon { display: none; }
  .cookie-actions { width: 100%; }
  .cookie-btn { width: 100%; }
}

/* ── Responsive Fixes — Mobile & Tablet ── */

/* Fix: showcase-stab-full grid has no responsive rule */
@media (max-width: 768px) {
  .showcase-stab-full {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }
}
@media (max-width: 480px) {
  .showcase-stab-full {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }
}

/* Fix: 480px breakpoints for components missing them */
@media (max-width: 480px) {
  .cookie-inner {
    padding: 16px;
    gap: 10px;
  }
  .cookie-title { font-size: .9rem; }
  .cookie-sub { font-size: .75rem; }
  .cookie-btn { padding: 10px 18px; font-size: .8rem; }

  .legal-sidebar {
    flex-direction: column;
  }

  .gallery-split-client { font-size: 1.05rem; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .footer-brand {
    text-align: center;
  }

  .page-hero-baseline {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }

  .valeurs-card {
    min-width: 100%;
  }

  .team-grid {
    gap: var(--space-md);
  }
}

/* Fix: legal hero text overflow on small screens */
@media (max-width: 900px) {
  .legal-hero h1 {
    white-space: normal;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
  }
  .legal-hero > .container > .legal-hero-inner > p {
    white-space: normal;
  }
}

/* Fix: contact hero shapes overflow */
@media (max-width: 480px) {
  .contact-hero-shapes,
  .legal-hero-shapes {
    display: none;
  }
}

/* ── FAQ Section — Conversational Timeline ── */
.faq-section {
  padding: 0;
  margin-top: 4px;
  background: var(--white);
  overflow: hidden;
}

/* Hero band — dark green intro */
.faq-band {
  background: var(--green-dark);
  padding: clamp(28px, 4vw, 36px) 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.faq-band::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: var(--green-dark);
  border-radius: 50%;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3c-1 5-5 7-5 11a5 5 0 0010 0c0-4-4-6-5-11z' fill='%2300a07a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.faq-band .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.faq-band-title {
  color: #fff;
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.faq-band-headline {
  color: rgba(255, 255, 255, .85);
  font-family: var(--body-font);
  font-size: clamp(.88rem, 1.3vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 420px;
  margin: 0 auto 4px;
}
.faq-band-sub {
  color: rgba(255, 255, 255, .45);
  font-family: var(--body-font);
  font-size: .8rem;
  font-style: italic;
}

/* Timeline container */
.faq-timeline {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 24px 16px;
  position: relative;
}
/* Vertical stem line */
.faq-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--green), rgba(0, 160, 122, .1) 90%, transparent);
}

/* Each Q/A pair */
.faq-node {
  position: relative;
  margin-bottom: 10px;
}
/* Dot on the stem */
.faq-node::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray);
  border: 2px solid var(--green);
  z-index: 3;
  transition: all .3s ease;
}
.faq-node[open]::before {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(0, 160, 122, .15);
}

/* Alternate left/right */
.faq-node .faq-card {
  width: 44%;
  background: var(--gray);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: all .35s cubic-bezier(.22, 1, .36, 1);
  border: 1px solid transparent;
}
.faq-node .faq-card::-webkit-details-marker { display: none; }
.faq-node:nth-child(odd) .faq-card { margin-right: auto; }
.faq-node:nth-child(even) .faq-card { margin-left: auto; }

/* Arrow pointer toward stem */
.faq-card::after {
  content: '';
  position: absolute;
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--gray);
  transform: rotate(45deg);
  transition: background .35s ease, border-color .35s ease;
  border: 1px solid transparent;
}
.faq-node:nth-child(odd) .faq-card::after {
  right: -7px;
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
}
.faq-node:nth-child(even) .faq-card::after {
  left: -7px;
  border-left: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* Question text */
.faq-q {
  padding: 14px 18px;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.4;
  display: block;
}

/* Hover & Open states */
.faq-node .faq-card:hover {
  border-color: rgba(0, 160, 122, .12);
}
.faq-node[open] .faq-card {
  background: var(--white);
  border-color: rgba(0, 160, 122, .18);
  box-shadow: 0 4px 16px rgba(0, 160, 122, .08);
  border-radius: 12px 12px 0 0;
}
.faq-node[open] .faq-card::after {
  background: var(--white);
}
.faq-node:nth-child(odd)[open] .faq-card::after {
  border-right-color: rgba(0, 160, 122, .18);
  border-top-color: rgba(0, 160, 122, .18);
}
.faq-node:nth-child(even)[open] .faq-card::after {
  border-left-color: rgba(0, 160, 122, .18);
  border-bottom-color: rgba(0, 160, 122, .18);
}
.faq-node[open] .faq-q {
  color: var(--green-dark);
}

/* Answer — solid bubble connected to card */
.faq-a {
  width: 44%;
  background: var(--white);
  padding: 0 18px 14px;
  border-radius: 0 0 12px 12px;
  border: 1px solid rgba(0, 160, 122, .18);
  border-top: none;
  box-shadow: 0 8px 28px rgba(0, 160, 122, .08);
  margin-top: -1px;
  animation: faqReveal .35s ease;
  position: relative;
  z-index: 1;
}
.faq-node:nth-child(odd) .faq-a { margin-right: auto; }
.faq-node:nth-child(even) .faq-a { margin-left: auto; }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-a p {
  color: var(--text-light);
  font-size: .82rem;
  line-height: 1.65;
  max-width: none;
}

/* CTA at bottom */
.faq-cta {
  text-align: center;
  padding: 8px 24px 28px;
  position: relative;
  z-index: 2;
}
.faq-cta p {
  color: var(--text-light);
  font-size: .85rem;
  margin-bottom: 10px;
  max-width: none;
}
.faq-cta .btn {
  padding: 10px 24px;
  font-size: .85rem;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 768px) {
  .faq-timeline::before { left: 20px; }
  .faq-node::before { left: 20px; top: 16px; }
  .faq-node .faq-card { width: calc(100% - 52px); margin-left: auto !important; margin-right: 0 !important; }
  .faq-a { width: calc(100% - 52px) !important; margin-left: auto !important; margin-right: 0 !important; }
  .faq-card::after { left: -7px !important; right: auto !important; border-left: 1px solid transparent !important; border-bottom: 1px solid transparent !important; border-right: none !important; border-top: none !important; }
  .faq-node:nth-child(odd)[open] .faq-card::after,
  .faq-node:nth-child(even)[open] .faq-card::after {
    border-left-color: rgba(0, 160, 122, .18) !important;
    border-bottom-color: rgba(0, 160, 122, .18) !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
  }
}
@media (max-width: 480px) {
  .faq-timeline { padding: 20px 16px 12px; }
  .faq-q { padding: 12px 14px; font-size: .84rem; }
  .faq-a { padding: 0 14px 12px; width: calc(100% - 52px) !important; }
  .faq-band { padding: 22px 16px; }
}

/* ============ BLOG SECTION ============ */

/* ── Magazine Blog ── */
.mag-hero {
  position: relative;
  background: linear-gradient(135deg, var(--green-dark) 0%, #0d2b1e 100%);
  padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.mag-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(0, 160, 122, 0.25), transparent 60%);
  pointer-events: none;
}
.mag-hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  color: #fff;
}
.mag-hero-content h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 16px 0 12px;
}
.mag-hero-content h2 a {
  color: #fff;
  text-decoration: none;
  transition: text-decoration 0.2s;
}
.mag-hero-content h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mag-hero-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.mag-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  margin-bottom: 24px;
}
.mag-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.mag-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mag-tag--bienetre {
  background: rgba(0, 160, 122, 0.15);
  color: #00a07a;
}
.mag-tag--guide {
  background: rgba(226, 194, 0, 0.15);
  color: #c5a900;
}
.mag-tag--reglementation {
  background: rgba(33, 75, 53, 0.15);
  color: #214b35;
}
.mag-tag--realisations {
  background: rgba(45, 138, 110, 0.15);
  color: #2d8a6e;
}
.mag-hero .mag-tag {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.mag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 0 0 40px;
}

.mag-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.mag-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.mag-card-accent {
  height: 4px;
  background: var(--card-accent, var(--green));
}
.mag-card-body {
  padding: 24px 24px 28px;
}
.mag-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mag-card-time {
  font-size: 0.8rem;
  color: var(--text-light);
}
.mag-card h3 {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 10px;
}
.mag-card h3 a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.mag-card h3 a:hover {
  color: var(--green);
}
.mag-card p {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.55;
}
.mag-card-img{margin:-24px -24px 16px -24px;height:180px;overflow:hidden}
.mag-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.mag-card:hover .mag-card-img img{transform:scale(1.06)}

@media (max-width: 768px) {
  .mag-grid {
    grid-template-columns: 1fr;
  }
  .mag-hero-content {
    max-width: 100%;
  }
}

/* Article Hero */
.article-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  color: #fff;
  padding: 60px 0 40px;
  position: relative;
}
.article-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 20px 0 24px;
  letter-spacing: -0.5px;
  max-width: 900px;
}

/* ── Article Hero with Photo ── */
.article-hero-img{position:relative;padding:clamp(80px,12vw,140px) 0 clamp(40px,6vw,60px);background:var(--hero-img) center/cover no-repeat;color:#fff}
.article-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,43,30,.6) 0%,rgba(13,43,30,.85) 100%)}
.article-hero-img .container{position:relative;z-index:1}
.article-hero-img h1{font-size:clamp(1.5rem,3.5vw,2.4rem);max-width:800px;margin:12px 0 16px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.article-hero-img .breadcrumb--hero a,.article-hero-img .breadcrumb--hero{color:rgba(255,255,255,.7)}
.article-hero-img .breadcrumb--hero .sep{color:rgba(255,255,255,.4)}
.article-hero-img .article-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:rgba(255,255,255,.7);font-size:.88rem}
.article-tag{background:rgba(255,255,255,.15);padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:600;color:#fff;letter-spacing:.03em;backdrop-filter:blur(4px)}

/* Article Meta */
.article-meta {
  display: flex;
  gap: 24px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
.article-date, .article-author, .article-reading-time {
  display: inline-block;
}

/* Article Container */
.article-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Article Content */
.article-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}
.article-content h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 48px 0 20px;
  color: var(--text);
  padding-top: 16px;
}
.article-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 32px 0 16px;
  color: var(--green-dark);
}
.article-content p {
  margin-bottom: 16px;
  max-width: 100%;
}
.article-content ul, .article-content ol {
  margin: 20px 0 20px 24px;
}
.article-content li {
  margin-bottom: 12px;
  line-height: 1.7;
}
.article-content strong {
  color: var(--green-dark);
  font-weight: 700;
}

/* Table Styling */
.article-content table {
  border-collapse: collapse;
}
.article-content th {
  background: var(--green);
  color: #fff;
  padding: 12px;
  text-align: left;
  font-weight: 600;
}
.article-content td {
  border: 1px solid #e0e0e0;
  padding: 12px;
}
.article-content tr:nth-child(even) {
  background: #f9f9f9;
}

/* Article TOC */
.article-toc {
  background: #f5f5f5;
  border-left: 4px solid var(--green);
  padding: 20px;
  margin-bottom: 40px;
  border-radius: 8px;
}
.article-toc h3 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: var(--text);
}
.article-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-toc li {
  margin-bottom: 8px;
}
.article-toc a {
  color: var(--green);
  text-decoration: none;
  font-size: 0.95rem;
}
.article-toc a:hover {
  text-decoration: underline;
}

/* Article CTA */
.article-cta {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 32px;
  margin: 48px 0;
  text-align: center;
}
.article-cta h3 {
  font-size: 1.4rem;
  margin: 0 0 12px;
  color: var(--text);
}
.article-cta p {
  color: var(--text-light);
  margin-bottom: 20px;
  font-size: 1rem;
}

/* Related Articles */
.related-articles {
  margin: 48px 0;
  padding: 32px;
  background: linear-gradient(135deg, rgba(0, 160, 122, 0.05) 0%, rgba(226, 194, 0, 0.05) 100%);
  border-radius: 12px;
}
.related-articles h3 {
  font-size: 1.4rem;
  margin: 0 0 20px;
  color: var(--text);
}
.related-articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-articles li {
  margin-bottom: 12px;
}
.related-articles a {
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.related-articles a:hover {
  color: var(--green-dark);
  transform: translateX(4px);
  display: inline-block;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .blog-hero h1 {
    font-size: 2.4rem;
  }
  .article-content h2 {
    font-size: 1.6rem;
    margin: 36px 0 16px;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .blog-hero {
    padding: 60px 0 40px;
  }
  .blog-hero h1 {
    font-size: 2rem;
  }
  .blog-hero-subtitle {
    font-size: 1rem;
  }
  .article-hero h1 {
    font-size: 2rem;
  }
  .article-meta {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
  }
  .article-content {
    font-size: 1rem;
  }
  .article-content h2 {
    font-size: 1.5rem;
    margin: 32px 0 14px;
  }
  .article-content h3 {
    font-size: 1.2rem;
    margin: 24px 0 12px;
  }
  .article-toc {
    padding: 16px;
    margin-bottom: 32px;
  }
  .article-cta {
    padding: 24px;
    margin: 32px 0;
  }
  .related-articles {
    padding: 24px;
    margin: 32px 0;
  }
}

@media (max-width: 480px) {
  .blog-hero h1 {
    font-size: 1.6rem;
  }
  .blog-hero-subtitle {
    font-size: 0.95rem;
  }
  .article-hero h1 {
    font-size: 1.6rem;
  }
  .article-card-image {
    height: 180px;
  }
  .article-meta {
    flex-direction: column;
    gap: 8px;
  }
  .blog-card-content {
    padding: 16px;
  }
  .blog-card-title {
    font-size: 1.1rem;
    margin: 8px 0 12px;
  }
  .blog-card-excerpt {
    font-size: 0.9rem;
  }
}

.footer-zones{font-size:.85rem;color:rgba(255,255,255,.5)}
.footer-zones a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
.footer-zones a:hover{color:#e2c200}
.footer-sep{color:rgba(255,255,255,.3);margin:0 8px}

/* === ARTICLE IMAGES === */
.article-img{margin:32px 0;border-radius:12px;overflow:hidden}
.article-img img{width:100%;height:auto;display:block;max-height:400px;object-fit:cover}
.article-img figcaption{font-size:.82rem;color:var(--text-light);padding:10px 0 0;font-style:italic;text-align:center}

/* ========================================
   PRESS PAGE
   ======================================== */

/* Hero */
.press-hero{padding:clamp(120px,16vw,180px) 0 clamp(56px,8vw,90px);background:linear-gradient(160deg,var(--green-dark) 0%,#0d2b1e 100%);color:#fff;position:relative;overflow:hidden}
.press-hero::before{content:'';position:absolute;top:-40%;right:-15%;width:700px;height:700px;border-radius:50%;background:rgba(0,160,122,.06)}
.press-hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;border-radius:50%;background:rgba(226,194,0,.04)}
.press-hero-content{max-width:700px}
.press-hero-label{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--yellow);margin-bottom:20px;text-transform:uppercase;letter-spacing:.06em}
.press-hero-label svg{color:var(--yellow)}
.press-hero h1{font-family:var(--heading-font);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.12;margin-bottom:20px;letter-spacing:-.01em;color:#fff}
.press-hero p{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.75;color:rgba(255,255,255,.7);max-width:580px}

/* Section titles for press */
.press-section-title{font-family:var(--heading-font);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--text);text-align:center;margin-bottom:8px}
.press-section-sub{text-align:center;font-size:.92rem;color:var(--text-light);margin-bottom:clamp(28px,4vw,44px)}

/* Pitch */
.press-pitch{margin:0 auto;text-align:left}
.press-pitch h2{font-family:var(--heading-font);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--green-dark);margin-bottom:clamp(16px,2vw,24px)}
.press-pitch p{font-size:1.02rem;line-height:1.85;color:#3a3a3a;margin-bottom:18px}
.press-pitch p strong{color:var(--green-dark)}

/* Stats grid */
.press-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);max-width:960px;margin:0 auto}
.press-stat{background:var(--white);border-radius:16px;padding:clamp(24px,3vw,36px);text-align:center;border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 12px rgba(0,0,0,.03)}
.press-stat strong{display:block;font-family:var(--heading-font);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:var(--green);line-height:1;margin-bottom:8px}
.press-stat span{font-size:.88rem;color:#555;font-weight:500}

/* Angles éditoriaux */
.press-angles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px);max-width:1000px;margin:0 auto}
.press-angle{background:var(--white);border-radius:16px;padding:clamp(26px,3vw,36px);border:1px solid rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}
.press-angle:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.press-angle-tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--green);padding:5px 12px;border-radius:20px;margin-bottom:14px}
.press-angle h3{font-family:var(--heading-font);font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:700;color:var(--green-dark);margin-bottom:10px;line-height:1.35}
.press-angle p{font-size:.92rem;line-height:1.65;color:#555;margin:0}

/* Gallery */
.press-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,20px);max-width:1100px;margin:0 auto}
.press-gallery-item{border-radius:14px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.press-gallery-item img{width:100%;height:220px;object-fit:cover;transition:transform .4s;display:block}
.press-gallery-item:hover img{transform:scale(1.05)}
.press-gallery-caption{display:block;font-size:.8rem;color:#555;padding:10px 12px;text-align:center;background:var(--white)}

/* Timeline presse */
.press-timeline{max-width:740px;margin:clamp(28px,4vw,44px) auto 0;display:flex;flex-direction:column;gap:0}
.press-tl-item{display:flex;align-items:baseline;gap:clamp(20px,3vw,32px);padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid rgba(0,0,0,.08)}
.press-tl-item:last-child{border-bottom:none}
.press-tl-item strong{flex-shrink:0;font-family:var(--heading-font);font-size:clamp(1.2rem,1.6vw,1.4rem);font-weight:800;color:var(--green);min-width:65px}
.press-tl-item span{font-size:.95rem;line-height:1.65;color:#3a3a3a}

/* Références */
.press-refs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.press-ref{background:var(--white);border:1.5px solid rgba(0,0,0,.1);border-radius:30px;padding:10px 22px;font-size:.9rem;font-weight:600;color:var(--green-dark);transition:all .2s}
.press-ref:hover{border-color:var(--green);color:var(--green);background:rgba(0,160,122,.04)}

/* Contact presse */
.press-contact{margin:0 auto}
.press-contact h2{font-family:var(--heading-font);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;color:var(--green-dark);margin-bottom:12px}
.press-contact>p{font-size:.98rem;line-height:1.75;color:#555;margin-bottom:clamp(24px,3vw,36px)}
.press-contact-info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-bottom:clamp(28px,4vw,40px)}
.press-contact-card{background:#f7f8f6;border-radius:16px;padding:clamp(22px,2.5vw,30px);border:1px solid rgba(0,0,0,.04)}
.press-contact-card h4{font-family:var(--heading-font);margin-bottom:2px;font-size:1.05rem;color:var(--green-dark)}
.press-contact-card span{display:block;font-size:.84rem;color:#777;margin-bottom:14px}
.press-contact-card a{display:block;font-size:.92rem;color:var(--green);font-weight:600;text-decoration:none;margin-bottom:6px}
.press-contact-card a:hover{text-decoration:underline;color:var(--green-dark)}
.press-contact-note{background:rgba(0,160,122,.04);border-left:4px solid var(--green);border-radius:0 14px 14px 0;padding:clamp(20px,2.5vw,28px)}
.press-contact-note p{font-size:.92rem;line-height:1.7;color:#3a3a3a;margin:0 0 14px}
.press-contact-note p:last-child{margin-bottom:0}
.press-contact-note strong{color:var(--green-dark)}

/* Mobile */
@media(max-width:768px){
  .press-stats{grid-template-columns:repeat(2,1fr)}
  .press-angles{grid-template-columns:1fr}
  .press-gallery{grid-template-columns:repeat(2,1fr)}
  .press-contact-info{grid-template-columns:1fr}
}
@media(max-width:480px){
  .press-stats{grid-template-columns:1fr}
}

/* Gallery overlay */
.press-gallery-item{position:relative}
.press-gallery-overlay{position:absolute;inset:0;bottom:auto;height:220px;background:rgba(13,43,30,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity .3s;cursor:pointer;border-radius:14px 14px 0 0}
.press-gallery-item:hover .press-gallery-overlay{opacity:1}
.press-gallery-overlay span{font-size:.8rem;font-weight:600;color:#fff}

/* Modal téléchargement presse */
.press-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.press-modal.active{opacity:1;pointer-events:all}
.press-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.press-modal-box{position:relative;background:var(--white);border-radius:20px;padding:clamp(28px,4vw,44px);max-width:520px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .3s}
.press-modal.active .press-modal-box{transform:translateY(0)}
.press-modal-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:1.8rem;color:var(--text-light);cursor:pointer;line-height:1;transition:color .2s}
.press-modal-close:hover{color:var(--text)}
.press-modal-box h3{font-family:var(--heading-font);font-size:1.3rem;font-weight:700;color:var(--green-dark);margin-bottom:4px}
.press-modal-photo-name{font-size:.85rem;color:var(--green);font-weight:600;margin-bottom:12px}
.press-modal-desc{font-size:.88rem;line-height:1.6;color:#555;margin-bottom:20px}
.press-modal-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.press-modal-field{display:flex;flex-direction:column;gap:4px}
.press-modal-field--full{grid-column:1/-1}
.press-modal-field label{font-size:.78rem;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.03em}
.press-modal-field input{padding:10px 14px;border:1.5px solid rgba(0,0,0,.12);border-radius:10px;font-size:.92rem;font-family:var(--body-font);transition:border-color .2s;outline:none}
.press-modal-field input:focus{border-color:var(--green)}
.press-modal-submit{width:100%;text-align:center;padding:14px;font-size:.95rem;border-radius:12px}
.press-modal-legal{font-size:.72rem;color:#999;margin-top:12px;line-height:1.5;text-align:center}

@media(max-width:480px){
  .press-modal-fields{grid-template-columns:1fr}
}

/* ============================================================
   MOBILE RESPONSIVE OVERHAUL — App-quality mobile experience
   Target: < 768px (phone), with extra refinements at < 480px
   ============================================================ */

/* --- Mobile Navigation — Bottom bar + overlay (generated by JS) --- */
.bottom-nav{display:none}
.mnav{display:none}

@media (max-width: 768px) {
  /* Hide old static bottom nav */
  .bottom-nav{display:none!important}

  /* New mobile bottom bar — 3 items, premium look */
  .mnav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:1001;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-top:1px solid rgba(0,0,0,.04);
    box-shadow:0 -4px 30px rgba(0,0,0,.07);
    padding:8px 24px calc(8px + env(safe-area-inset-bottom,0px));
    justify-content:space-between;
    align-items:flex-end;
  }
  .mnav-item{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:4px 16px;min-height:44px;
    border:none;background:none;cursor:pointer;
    text-decoration:none;color:#999;
    font-family:var(--heading-font);font-size:9.5px;font-weight:600;
    letter-spacing:.03em;text-transform:uppercase;
    transition:color .25s;-webkit-tap-highlight-color:transparent;
  }
  .mnav-item svg{width:20px;height:20px;flex-shrink:0}
  .mnav-item>span:last-child{line-height:1}
  .mnav-item.active{color:var(--green-dark)}
  /* Central CTA button — elevated green circle */
  .mnav-item--cta{
    color:var(--green-dark)!important;
    margin-top:-22px;
    position:relative;
  }
  .mnav-cta-circle{
    width:52px;height:52px;border-radius:50%;
    background:linear-gradient(135deg,var(--green) 0%,#00c896 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(0,160,122,.35);
    transition:transform .2s,box-shadow .2s;
  }
  .mnav-item--cta:active .mnav-cta-circle{transform:scale(.92);box-shadow:0 2px 8px rgba(0,160,122,.25)}
  .mnav-cta-circle svg{width:22px;height:22px;stroke:#fff;stroke-width:2}
  /* Menu hamburger */
  .mnav-item--menu svg{transition:transform .3s}

  /* Full-screen menu overlay */
  .mnav-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    display:flex;flex-direction:column;
    opacity:0;pointer-events:none;
    transform:translateY(20px);
    transition:opacity .3s ease,transform .3s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .mnav-overlay.active{
    opacity:1;pointer-events:all;transform:translateY(0);
  }
  .mnav-overlay-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.06);
    position:sticky;top:0;background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1;
  }
  .mnav-overlay-logo{
    font-family:var(--heading-font);font-size:1.1rem;font-weight:700;
    color:var(--green-dark);
  }
  .mnav-overlay-close{
    width:40px;height:40px;border-radius:50%;border:none;
    background:rgba(0,0,0,.05);font-size:1.2rem;color:#555;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s;
  }
  .mnav-overlay-close:hover{background:rgba(0,0,0,.1)}
  .mnav-overlay-body{
    padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column;gap:24px;
  }
  .mnav-group{display:flex;flex-direction:column;gap:4px}
  .mnav-group-title{
    font-family:var(--heading-font);font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;color:#aaa;
    padding:0 0 8px;
  }
  .mnav-link{
    display:block;padding:12px 16px;border-radius:12px;
    font-family:var(--body-font);font-size:.95rem;font-weight:500;
    color:var(--text);text-decoration:none;
    transition:background .2s,color .2s;
  }
  .mnav-link:hover,.mnav-link:active{background:rgba(0,160,122,.06);color:var(--green)}
  .mnav-link--cta{
    background:var(--green);color:#fff!important;text-align:center;
    font-weight:700;font-size:1rem;padding:14px 16px;border-radius:14px;
    margin-top:8px;
  }
  .mnav-link--cta:hover{background:var(--green-dark)}
  .mnav-link--outline{
    text-align:center;font-weight:600;color:var(--green-dark)!important;
    border:1.5px solid rgba(0,0,0,.1);border-radius:14px;padding:12px 16px;
  }
  .mnav-link--outline:hover{border-color:var(--green);color:var(--green)!important}

  /* Hide hamburger toggle and nav-actions on mobile */
  .nav-toggle {
    display: none !important;
  }
  .nav-actions {
    display: none !important;
  }

  /* Keep top navbar slim on mobile (logo only) */
  .navbar {
    height: 56px;
  }
  .nav-menu {
    display: none !important;
  }

  /* Prevent content being hidden behind bottom nav */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* Adjust top spacing for shorter navbar */
  .hero {
    margin-top: 56px;
  }

  /* --- Global text minimum sizes --- */
  body {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
  }

  p, li, td, th, span, a, label, input, textarea, select, blockquote {
    font-size: max(14px, inherit);
  }

  /* --- Touch targets: minimum 44px --- */
  .btn,
  button,
  a.btn,
  .nav-link,
  .bottom-nav-item,
  summary,
  .faq-card,
  .flip-wrap,
  input[type="submit"],
  .cookie-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .btn {
    padding: 14px 24px;
    font-size: .92rem;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .service-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .service-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Prevent horizontal overflow everywhere --- */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .container {
    padding: 0 16px;
    max-width: 100%;
    overflow-x: hidden;
  }

  section, div, article, main, header, footer {
    max-width: 100vw;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Photo bands: stack or scroll horizontally */
  .photo-band {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 16px;
  }

  .photo-band img {
    flex-shrink: 0;
    width: 80vw;
    max-width: 300px;
    scroll-snap-align: start;
    border-radius: var(--border-radius-sm);
  }

  /* --- Tables: horizontal scroll wrapper --- */
  .table-wrapper,
  .spec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .spec-table,
  table {
    min-width: 500px;
  }

  /* Alternative: table-as-cards for smaller tables */
  .article-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Modals: full-screen on mobile --- */
  .press-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0 !important;
    margin: 0;
    padding: 24px 20px !important;
  }

  .press-modal {
    align-items: stretch !important;
  }

  .press-modal-close {
    top: 12px;
    right: 16px;
    font-size: 2rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .press-modal-fields {
    grid-template-columns: 1fr !important;
  }

  .press-modal-field input {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .press-modal-submit {
    padding: 16px;
    font-size: 1rem;
    min-height: 48px;
  }

  /* --- Forms: single column --- */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .contact-layout {
    grid-template-columns: 1fr !important;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 16px; /* Prevents iOS keyboard zoom */
    padding: 14px 16px;
    min-height: 48px;
  }

  .form-group label {
    font-size: .9rem;
  }

  .file-upload-content {
    padding: 20px 16px;
  }

  .file-upload-text {
    font-size: .9rem;
  }

  .contact-form-wrap {
    padding: var(--space-md);
    margin-top: 0;
    border-radius: 12px;
  }

  /* Contact sidebar: stack below form */
  .contact-sidebar {
    padding-top: var(--space-md);
  }

  /* --- Service sections: single column --- */
  .service-section > .container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .service-section.reverse > .container {
    direction: ltr;
  }

  .service-content p {
    font-size: .95rem;
    max-width: 100%;
  }

  .service-features li {
    font-size: .93rem;
    padding: 8px 0;
  }

  .service-image {
    border-radius: var(--border-radius);
    width: 100%;
  }

  /* Service banner sections */
  .service-banner > .container {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg);
  }

  /* --- Flip cards: scroll horizontally on mobile --- */
  .flip-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }

  .flip-wrap {
    flex-shrink: 0;
    width: 75vw;
    max-width: 280px;
    scroll-snap-align: start;
  }

  .flip-hint {
    font-size: .82rem;
    text-align: center;
  }

  /* --- Key figures grid --- */
  .figures-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .figure-card {
    padding: var(--space-md);
    text-align: center;
  }

  .figure-number {
    font-size: 2.4rem;
  }

  .figure-label {
    font-size: .88rem;
  }

  /* --- FAQ section --- */
  .faq-card {
    padding: 16px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .faq-q {
    font-size: .95rem;
  }

  .faq-a p {
    font-size: .9rem;
    line-height: 1.7;
  }

  /* --- History section --- */
  .history-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-md);
  }

  /* --- Footer responsive --- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding-bottom: calc(24px + 64px + env(safe-area-inset-bottom, 0px));
  }

  .footer-zones {
    font-size: .82rem;
  }

  /* --- Cookie banner: stack on mobile --- */
  .cookie-inner {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }

  .cookie-icon svg {
    width: 40px;
    height: 40px;
  }

  .cookie-text .cookie-title {
    font-size: .95rem;
  }

  .cookie-text .cookie-sub {
    font-size: .84rem;
  }

  .cookie-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .cookie-btn {
    flex: 1;
    min-height: 44px;
    font-size: .88rem;
    padding: 12px 16px;
    text-align: center;
    justify-content: center;
  }

  /* --- CTA Banner --- */
  .cta-banner {
    padding: var(--space-xl) 0;
    text-align: center;
  }

  .cta-banner h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .cta-banner p {
    font-size: .92rem;
    max-width: 100%;
  }

  .cta-banner .btn {
    width: auto;
    display: inline-flex;
  }

  /* --- Legal sidebar: stack on mobile --- */
  .legal-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--space-md);
  }

  .legal-layout {
    grid-template-columns: 1fr !important;
  }

  /* --- Team circles: wrap nicely --- */
  .team-circles {
    justify-content: center;
    gap: 8px;
  }

  .team-circle {
    width: 52px;
    height: 52px;
  }

  /* --- Logos marquee: smaller on mobile --- */
  .logos-track {
    gap: 28px;
  }

  .logos-track img {
    width: 90px; height: 32px;
  }

  /* --- Page hero sections margin fix --- */
  .histoire-hero,
  .blog-hero,
  .contact-hero,
  .press-hero,
  .legal-hero,
  .service-hero,
  [class*="-hero"] {
    margin-top: 56px;
  }

  /* --- Section spacing: tighter on mobile --- */
  .service-section {
    padding: var(--space-xl) 0;
  }

  .key-figures {
    padding: var(--space-lg) 0;
  }

  .flip-section {
    padding: var(--space-lg) 0;
  }

  .history-section {
    padding: var(--space-lg) 0;
  }

  /* --- Headings tighter on mobile --- */
  h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: -0.5px;
  }

  h2 {
    font-size: clamp(1.4rem, 5.5vw, 2rem);
    letter-spacing: -0.5px;
  }

  h3 {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
  }

  /* --- References section --- */
  .references h3 {
    font-size: .78rem;
  }

  /* --- Advantages grid (sub-pages) --- */
  .advantages-grid,
  .advantages-grid--four {
    grid-template-columns: 1fr !important;
  }
}

/* Extra small phones (< 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }

  .btn {
    padding: 14px 18px;
    font-size: .88rem;
  }

  .flip-wrap {
    width: 85vw;
  }

  .photo-band img {
    width: 85vw;
  }

  .footer-brand p {
    font-size: .85rem;
  }

  .bottom-nav-label {
    font-size: 9px;
  }
}

/* ============================================================
   RESPONSIVE OPTIMIZATION PASS — April 2026
   Comprehensive fixes for all screen sizes
   ============================================================ */

/* --- Prevent horizontal overflow globally --- */
html{overflow-x:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%}

/* --- Touch targets: minimum 44px for all interactive elements --- */
.gallery-carousel-dot{width:12px;height:12px;padding:16px;background-clip:content-box}
.cookie-btn{min-height:44px;padding:14px 20px}

/* --- iOS zoom prevention: all inputs 16px+ --- */
input,select,textarea{font-size:max(16px,1em)}

/* ---- 1024px: Laptop/small desktop refinements ---- */
@media(max-width:1024px){
  .flip-grid{gap:16px}
  .crew-grid{gap:14px}
  .press-angles{grid-template-columns:1fr 1fr;gap:16px}
}

/* ---- 768px: Tablet & large phone refinements ---- */
@media(max-width:768px){
  /* Typography scaling */
  h1{font-size:clamp(1.6rem,6vw,2.2rem)!important;letter-spacing:-.5px}
  h2{font-size:clamp(1.3rem,5vw,1.8rem)}
  h3{font-size:clamp(1.05rem,3.5vw,1.3rem)}

  /* Hero images */
  .hero-visual .hero-photo{aspect-ratio:3/2}

  /* Service sections */
  .service-image{min-height:200px}

  /* Flip cards: 2 col max */
  .flip-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .flip-wrap{height:clamp(220px,40vw,280px)}

  /* Crew cards: 2 col */
  .crew-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px}
  .crew-card{height:clamp(240px,50vw,300px)}

  /* Press page */
  .press-stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .press-angles{grid-template-columns:1fr;gap:16px}
  .press-gallery{grid-template-columns:repeat(2,1fr);gap:12px}
  .press-contact-info{grid-template-columns:1fr}

  /* Contact shapes */
  .contact-hero-shapes{display:none!important}

  /* Gallery arrows */
  .gallery-carousel-arrow{width:36px;height:36px}

  /* Atelier images */
  .atelier-side{flex-direction:column;gap:8px}

  /* Tables scroll */
  .spec-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Section spacing reduction */
  .section{padding:clamp(32px,6vw,48px) 0}

  /* Footer safe area */
  .footer-bottom{padding-bottom:calc(24px + 64px + env(safe-area-inset-bottom,0px))!important}

  /* Valeurs quote nowrap fix */
  .valeurs-line1{white-space:normal!important}

  /* Page hero baseline */
  .page-hero-baseline{white-space:normal;max-width:100%}

  /* Blog card images */
  .mag-card-img{height:140px;margin:-20px -20px 12px -20px}

  /* Legal hero */
  .legal-hero h1{white-space:normal!important;font-size:clamp(1.2rem,5vw,1.8rem)!important}
}

/* ---- 600px: Small tablet / large phone landscape ---- */
@media(max-width:600px){
  /* Flip cards: still 2 col but smaller */
  .flip-wrap{height:clamp(200px,50vw,260px)}
  .flip-back blockquote{font-size:.82rem}
  .flip-author{font-size:.75rem}

  /* Crew cards: 2 col stays */
  .crew-card{height:clamp(220px,55vw,280px)}

  /* Photo band horizontal scroll */
  .photo-band{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:8px;padding:0 16px}
  .photo-band img{flex:0 0 80vw;max-width:300px;scroll-snap-align:center;border-radius:12px}

  /* Histoire mosaic stacking */
  .histoire-mosaic{grid-template-columns:1fr!important;grid-template-rows:auto!important}
  .histoire-mosaic>*{grid-column:1!important;grid-row:auto!important}

  /* Gallery arrows positioning */
  .gallery-carousel-arrow{width:32px;height:32px}
  .gallery-carousel-arrow:first-of-type{left:8px}
  .gallery-carousel-arrow:last-of-type{right:8px}

  /* Press stats already 2col, reduce padding */
  .press-stat{padding:16px 12px}
  .press-stat strong{font-size:clamp(1.6rem,6vw,2.2rem)}
}

/* ---- 480px: Small phones ---- */
@media(max-width:480px){
  /* Global typography reduction */
  body{font-size:14px}
  p,li,td,th{font-size:max(13px,inherit)}
  h1{font-size:clamp(1.3rem,6vw,1.7rem)!important}

  /* Flip cards: single column */
  .flip-grid{grid-template-columns:1fr!important;gap:10px;max-width:340px;margin-left:auto;margin-right:auto}
  .flip-wrap{height:260px;width:100%}

  /* Crew cards: single column */
  .crew-grid{grid-template-columns:1fr!important;gap:10px;max-width:320px;margin-left:auto;margin-right:auto}
  .crew-card{height:280px}

  /* Press stats: single column */
  .press-stats{grid-template-columns:1fr!important;gap:10px;max-width:320px;margin-left:auto;margin-right:auto}

  /* Press gallery: single column */
  .press-gallery{grid-template-columns:1fr!important;gap:10px}

  /* Section spacing */
  .section{padding:24px 0}
  .flip-section{padding:24px 0}

  /* Service image heights */
  .service-image{min-height:180px}

  /* Hero image */
  .hero-visual .hero-photo{aspect-ratio:16/9}

  /* Atelier showcase */
  .atelier-main{min-height:200px}
  .atelier-side{flex-direction:column;gap:6px}
  .atelier-side img{min-height:140px}

  /* FAQ timeline fix */
  .faq-node .faq-card{width:calc(100% - 44px)}

  /* Letter spacing fix */
  .aqua-hero-title,.station-hero h1{letter-spacing:-1px!important}

  /* Article headings */
  .article-content h2{font-size:1.3rem;margin:24px 0 12px}
  .article-content h3{font-size:1.1rem}

  /* Press modal */
  .press-modal-box{padding:20px;width:95%;border-radius:14px}
  .press-modal-fields{grid-template-columns:1fr}

  /* Page hero baseline */
  .page-hero-baseline{font-size:clamp(.95rem,4vw,1.1rem)}

  /* Logos marquee */
  .logos-track img{width:80px;height:28px}

  /* Showcase grid */
  .showcase-stab-full{grid-template-columns:1fr!important}
  .showcase-stab-full .showcase-stab-hero{grid-column:1!important;grid-row:auto!important}

  /* Contact hero — mobile optimized */
  .contact-hero{
    padding:80px 0 32px;
    margin-top:56px;
  }
  .contact-hero h1{
    font-size:clamp(1.5rem,6vw,2rem)!important;
    line-height:1.2;
    margin-bottom:12px;
  }
  .contact-hero p{
    font-size:.92rem;
    line-height:1.6;
  }
  .contact-hero-badge{
    font-size:.72rem;
    padding:5px 12px;
    margin-bottom:12px;
  }
  .contact-hero-inner{
    max-width:100%;
  }

  /* Gallery dots bigger for touch */
  .gallery-carousel-dot{width:10px;height:10px;padding:17px;background-clip:content-box}

  /* Advantages grid */
  .advantages-grid,.advantages-grid--four{grid-template-columns:1fr!important}

  /* Footer adjustments */
  .footer-grid{gap:24px}
  .footer-brand{text-align:center}
  .footer-social{justify-content:center}
}

/* ---- 360px: Extra small phones (Galaxy S, iPhone SE) ---- */
@media(max-width:360px){
  .container{padding:0 10px}
  h1{font-size:1.3rem!important}
  .flip-wrap{height:240px}
  .crew-card{height:260px}
  .btn{padding:12px 14px;font-size:.82rem}
  .press-modal-box{padding:16px;width:98%}
  .flip-grid{max-width:100%}
  .crew-grid{max-width:100%}
}

/* ---- Landscape phones ---- */
@media(max-height:500px) and (orientation:landscape){
  .press-hero,.page-hero,.hero,.contact-hero,.legal-hero,.histoire-hero,.blog-hero{padding-top:80px!important;padding-bottom:30px!important}
  .bottom-nav{padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px))}
  .flip-wrap{height:200px}
}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0s!important;transition-duration:0s!important}
  .flip-inner{transition:none!important}
  .crew-inner{transition:none!important}
}

/* ==============================
   ORIGIN CARD + STORY MODAL
   ============================== */

/* --- Press Featured + Articles + Videos (press page) --- */

/* Paris Match featured block */
.press-featured{
  background:var(--white);
  border-radius:20px;
  padding:clamp(28px,4vw,44px) clamp(24px,3vw,40px);
  box-shadow:0 4px 24px rgba(0,0,0,.05);
  border-left:4px solid #E30613;
  margin-bottom:clamp(32px,4vw,48px);
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.press-featured-badge{margin-bottom:16px}
.press-featured-badge img{height:24px;width:auto}
.press-featured-quote{margin:0 0 12px}
.press-featured-quote p{
  font-family:var(--heading-font);
  font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:600;
  color:var(--green-dark);
  line-height:1.4;
  font-style:italic;
}
.press-featured-quote cite{
  font-style:normal;
  font-size:.78rem;
  color:#888;
}
.press-featured-ctx{
  font-size:.85rem;
  color:#666;
  line-height:1.6;
  margin-top:8px;
}

/* Press pitch — 3 blocks with numbers */
.press-pitch{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:720px;
  margin:0 auto;
}
.press-pitch-block{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 24px;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  border-left:3px solid var(--green);
}
.press-pitch-num{
  flex-shrink:0;
  font-family:var(--heading-font);
  font-size:1.3rem;
  font-weight:800;
  color:rgba(0,160,122,.25);
  line-height:1.75;
  letter-spacing:-.03em;
}
.press-pitch-block p{
  font-size:clamp(.86rem,1.2vw,.95rem);
  color:#444;
  line-height:1.75;
}
.press-pitch-block strong{
  color:var(--green-dark);
  font-weight:600;
}
@media(max-width:480px){
  .press-pitch-block{padding:16px 18px}
}

/* (article grid removed — using press-row list instead) */
/* Article list: rows with logo left + text right */
.press-articles-list{
  max-width:780px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.press-row{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.5vw,28px);
  padding:18px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
  cursor:pointer;
  transition:background .2s;
  border-radius:0;
}
.press-row:first-child{border-top:1px solid rgba(0,0,0,.06)}
.press-row:hover{background:rgba(0,160,122,.03)}
.press-row-logo{
  flex:0 0 120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.press-row-logo img,
.press-row-logo svg{
  max-width:110px;
  max-height:40px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.press-row-text{
  flex:1;
  min-width:0;
}
.press-row-text h4{
  font-family:var(--heading-font);
  font-size:clamp(.88rem,1.3vw,1rem);
  font-weight:600;
  color:var(--green-dark);
  line-height:1.35;
  margin-bottom:2px;
}
.press-row-tag{
  font-size:.72rem;
  color:#999;
}
.press-row-arrow{
  flex-shrink:0;
  color:#ccc;
  transition:color .2s,transform .2s;
}
.press-row:hover .press-row-arrow{
  color:var(--green);
  transform:translateX(3px);
}

/* Article modal (iframe popup) */
.press-article-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s,visibility .35s;
}
.press-article-modal[aria-hidden="false"]{
  opacity:1;visibility:visible;
}
.press-article-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.press-article-modal-box{
  position:relative;
  width:min(920px,94vw);
  height:85vh;
  background:var(--white);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.97);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.press-article-modal[aria-hidden="false"] .press-article-modal-box{
  transform:translateY(0) scale(1);
}
.press-article-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fafafa;
  flex-shrink:0;
}
.press-article-modal-info{
  font-size:.78rem;
  color:#888;
  font-weight:500;
}
.press-article-modal-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.press-article-modal-ext{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:8px;
  color:#666;
  text-decoration:none;
  transition:background .2s;
}
.press-article-modal-ext:hover{background:rgba(0,0,0,.06)}
.press-article-modal-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:8px;
  border:none;
  background:none;
  color:#666;
  cursor:pointer;
  transition:background .2s;
}
.press-article-modal-close:hover{background:rgba(0,0,0,.08)}
.press-article-modal-box iframe{
  flex:1;
  width:100%;
  border:none;
}

/* Video info: logo left + text right under video */
.press-video-info{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px 16px;
}
.press-video-logos{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.press-video-logos img,
.press-video-logos svg{
  max-height:36px;
  max-width:120px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.press-video-info h4{
  font-family:var(--heading-font);
  font-size:.88rem;
  font-weight:600;
  color:var(--green-dark);
  line-height:1.3;
  margin-bottom:2px;
}
.press-video-info p{
  font-size:.78rem;
  color:#888;
  line-height:1.4;
}

/* Video cards */
.press-videos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:860px;
  margin:0 auto;
}
.press-video-card{
  background:var(--white);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.press-video-player{
  width:100%;
  aspect-ratio:16/9;
  background:var(--black);
}
.press-video-player video{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* (video card h4/p styling moved to .press-video-info) */

@media(max-width:768px){
  .press-videos{grid-template-columns:1fr;max-width:480px}
  .press-row-logo{flex:0 0 90px}
  .press-row-logo img{max-width:80px;max-height:32px}
  .press-video-info{flex-direction:column;align-items:flex-start;gap:8px}
}

/* --- Press Band (homepage) --- */
.press-band{
  padding:clamp(48px,6vw,72px) 0;
  background:#f8faf9;
}
.press-band-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4vw,56px);
  align-items:center;
}
.press-band-quote{
  padding-right:clamp(16px,3vw,32px);
  border-right:1px solid rgba(0,0,0,.06);
}
.press-band-logo{
  margin-bottom:16px;
  opacity:.85;
}
.press-band-quote blockquote{margin:0}
.press-band-quote blockquote p{
  font-family:var(--heading-font);
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  font-weight:600;
  color:var(--green-dark);
  line-height:1.4;
  margin-bottom:8px;
  font-style:italic;
}
.press-band-quote cite{
  font-style:normal;
  font-size:.78rem;
  color:#888;
  font-weight:500;
}
.press-band-media{
  padding-left:clamp(8px,2vw,16px);
}
.press-band-label{
  display:block;
  font-family:var(--heading-font);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:16px;
}
.press-band-logos{
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  align-items:center;
  margin-bottom:18px;
}
.press-band-logos svg,
.press-band-logos img{
  height:18px;
  width:auto;
  opacity:.5;
  filter:grayscale(1);
  transition:opacity .2s,filter .2s;
}
.press-band-logos svg:hover,
.press-band-logos img:hover{
  opacity:1;
  filter:none;
}
.press-band-link{
  font-family:var(--heading-font);
  font-size:.82rem;
  font-weight:600;
  color:var(--green);
  text-decoration:none;
  transition:color .2s;
}
.press-band-link:hover{color:var(--green-dark)}

@media(max-width:768px){
  .press-band-inner{
    grid-template-columns:1fr;
    gap:24px;
  }
  .press-band-quote{
    padding-right:0;
    border-right:none;
    border-bottom:1px solid rgba(0,0,0,.06);
    padding-bottom:24px;
  }
  .press-band-media{padding-left:0}
}

/* --- Video Feature Block --- */
.video-feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(28px,4vw,48px);
  align-items:center;
}
.video-feature-player{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.1);
  background:var(--black);
}
.video-feature-player iframe,
.video-feature-player .video-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  object-fit:cover;
}
.video-play-btn{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.25);
  border:none;
  cursor:pointer;
  transition:background .25s;
  z-index:2;
}
.video-play-btn:hover{background:rgba(0,0,0,.1)}
.video-play-btn svg{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
  transition:transform .2s;
}
.video-play-btn:hover svg{transform:scale(1.1)}
.video-feature-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--heading-font);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:12px;
}
.video-feature-title{
  font-family:var(--heading-font);
  font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:700;
  color:var(--green-dark);
  line-height:1.3;
  margin-bottom:10px;
}
.video-feature-desc{
  font-size:clamp(.86rem,1.2vw,.95rem);
  color:#555;
  line-height:1.7;
}
.video-feature-desc strong{
  color:var(--green-dark);
}
@media(max-width:768px){
  .video-feature{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* --- Horizontal Timeline — Innovation --- */
.htl-wrap{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  padding:0 0 20px;
  scrollbar-width:thin;
  scrollbar-color:var(--green) transparent;
}
.htl-wrap::-webkit-scrollbar{height:4px}
.htl-wrap::-webkit-scrollbar-track{background:transparent}
.htl-wrap::-webkit-scrollbar-thumb{background:var(--green);border-radius:4px}

.htl-track{
  display:flex;
  gap:20px;
  padding:0 max(24px,calc((100vw - var(--max-width))/2 + 24px));
  position:relative;
  min-width:min-content;
}
/* Horizontal line through cards */
.htl-track::before{
  content:'';
  position:absolute;
  top:20px;
  left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,160,122,.2) 5%,rgba(0,160,122,.2) 95%,transparent);
}

.htl-card{
  flex:0 0 220px;
  background:var(--white);
  border-radius:16px;
  padding:24px 20px;
  position:relative;
  box-shadow:0 2px 16px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.04);
  transition:transform .25s,box-shadow .25s;
  cursor:default;
}
.htl-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
/* Dot on the line */
.htl-card::before{
  content:'';
  position:absolute;
  top:-11px;
  left:28px;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--green);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--green);
}

.htl-year{
  display:block;
  font-family:var(--heading-font);
  font-size:clamp(1.6rem,3vw,2rem);
  font-weight:900;
  color:var(--green);
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-.03em;
}
.htl-label{
  font-family:var(--heading-font);
  font-size:.82rem;
  font-weight:700;
  color:var(--green-dark);
  margin-bottom:8px;
  line-height:1.3;
}
.htl-desc{
  font-size:.78rem;
  color:#555;
  line-height:1.6;
}

/* Teaser card (2026) */
.htl-card--teaser{
  background:linear-gradient(135deg,var(--green-dark),#1a3d2a);
  border:none;
}
.htl-card--teaser .htl-year{color:rgba(255,255,255,.3)}
.htl-card--teaser .htl-label{color:#fff}
.htl-card--teaser .htl-desc{color:rgba(255,255,255,.6)}
.htl-card--teaser::before{
  background:var(--green-dark);
  box-shadow:0 0 0 2px var(--green-dark);
}

/* Responsive */
@media(max-width:768px){
  .htl-track{
    padding:0 20px;
    gap:14px;
  }
  .htl-card{flex:0 0 190px;padding:20px 16px}
}
@media(max-width:480px){
  .htl-card{flex:0 0 170px;padding:18px 14px}
  .htl-year{font-size:1.4rem}
  .htl-label{font-size:.78rem}
  .htl-desc{font-size:.74rem}
}

/* --- Origin Card (compact section) --- */
.origin-card{
  position:relative;
  max-width:100%;
  margin:0 auto;
  background:var(--white);
  border-radius:20px;
  padding:clamp(36px,5vw,56px) clamp(28px,4vw,48px);
  box-shadow:0 4px 32px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
  overflow:hidden;
}
.origin-card-accent{
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--green),#00c896,var(--yellow));
  z-index:1;
}

/* Two-column layout: photo left + text right */
.origin-card-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:clamp(28px,3vw,44px);
  align-items:center;
}
.origin-card-photo{
  border-radius:16px;
  overflow:hidden;
}
.origin-card-photo img{
  width:100%;
  height:100%;
  min-height:260px;
  max-height:340px;
  object-fit:cover;
  display:block;
  border-radius:16px;
}

.origin-tag{
  display:inline-block;
  font-family:var(--heading-font);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:16px;
}
.origin-title{
  font-family:var(--heading-font);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:800;
  line-height:1.2;
  color:var(--green-dark);
  margin-bottom:14px;
}
.origin-sub{
  font-size:clamp(.88rem,1.2vw,.98rem);
  color:#555;
  line-height:1.7;
  margin-bottom:24px;
  max-width:520px;
}
.origin-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--heading-font);
  font-size:.88rem;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,var(--green) 0%,#00c896 100%);
  border:none;
  padding:12px 28px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 16px rgba(0,160,122,.25);
}
.origin-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,160,122,.35);
}
.origin-cta:active{transform:translateY(0)}

/* --- Story Modal (fullscreen immersive) --- */
.story-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.story-modal[aria-hidden="false"]{
  opacity:1;
  visibility:visible;
}
.story-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.story-modal-container{
  position:relative;
  width:min(560px,92vw);
  max-height:85vh;
  background:var(--white);
  border-radius:24px;
  padding:clamp(32px,5vw,48px) clamp(28px,4vw,44px);
  overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.2);
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.story-modal[aria-hidden="false"] .story-modal-container{
  transform:translateY(0) scale(1);
}

/* Close button */
.story-modal-close{
  position:absolute;
  top:16px;right:16px;
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.05);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s;
  z-index:2;
}
.story-modal-close:hover{background:rgba(0,0,0,.1)}
.story-modal-close svg{color:#333}

/* Progress bar */
.story-progress{
  height:3px;
  background:rgba(0,0,0,.06);
  border-radius:3px;
  margin-bottom:clamp(24px,3vw,36px);
  overflow:hidden;
}
.story-progress-bar{
  height:100%;
  width:25%;
  background:linear-gradient(90deg,var(--green),#00c896);
  border-radius:3px;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

/* Slides */
.story-slide{
  display:none;
  animation:storyFadeIn .45s ease;
}
.story-slide--active{display:block}
@keyframes storyFadeIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}

/* Slide image */
.story-slide-img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:20px;
}

.story-slide-num{
  display:inline-block;
  font-family:var(--heading-font);
  font-size:clamp(2.5rem,6vw,3.5rem);
  font-weight:900;
  color:rgba(0,160,122,.1);
  line-height:1;
  margin-bottom:4px;
  letter-spacing:-.04em;
}
.story-slide h3{
  font-family:var(--heading-font);
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  font-weight:700;
  color:var(--green-dark);
  margin-bottom:16px;
}
.story-slide p{
  font-size:clamp(.9rem,1.3vw,1rem);
  color:#3a3a3a;
  line-height:1.8;
  margin-bottom:14px;
}
.story-slide p:last-child{margin-bottom:0}

/* Navigation */
.story-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:clamp(24px,3vw,36px);
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.06);
}
.story-nav-btn{
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.1);
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .2s;
}
.story-nav-btn:hover:not(:disabled){
  border-color:var(--green);
  background:rgba(0,160,122,.06);
}
.story-nav-btn:hover:not(:disabled) svg{color:var(--green)}
.story-nav-btn:disabled{
  opacity:.3;cursor:default;
}
.story-nav-btn svg{color:#555}
.story-nav-count{
  font-family:var(--heading-font);
  font-size:.82rem;
  font-weight:600;
  color:#999;
  letter-spacing:.04em;
}

/* --- Origin + Modal responsive --- */
@media(max-width:768px){
  .origin-card-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
  .origin-card-photo img{
    min-height:180px;
    max-height:220px;
  }
  .story-slide-img{height:150px}
}
@media(max-width:480px){
  .origin-title{font-size:1.25rem}
  .story-modal-container{
    padding:28px 22px;
    border-radius:18px;
  }
  .story-slide-num{font-size:2.2rem}
  .story-slide-img{height:120px;border-radius:10px}
}

/* ---- Dark mode support (optional, respects system prefs) ---- */
@media(prefers-color-scheme:dark){
  /* Placeholder for future dark mode */
}