/* ============================================================
   akt — Page « Notre approche »
   Rythme : sombre → clair → gris → vert → clair → sombre → clair → sombre
   8 sections : Hero · ADN · Principes · Engagement · Confiance · Fonds · Méthode (teaser) · CTA
   ============================================================ */

/* ===== NAV — variante page intérieure (réutilise .nav--solid de contact.css logic) ===== */
.nav--solid {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav--solid .brand,
.nav--solid .nav-links a,
.nav--solid .nav-drop > button { color: var(--ink); }
.nav-links a.is-current {
  color: var(--green);
  font-weight: var(--fw-bold);
}

.approche-page { padding-top: 0; }

/* ============================================================
   1. HERO — fond clair, titre split (normal + atténué), centré façon manifeste
   ============================================================ */
.approche-hero {
  background: var(--white);
  color: var(--ink);
  padding: clamp(7rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.approche-hero-inner {
  max-width: 1100px;
  text-align: center;
}

.approche-kicker {
  display: inline-block;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

/* Titre split : strong (full ink) + muted (40% opacity), inline avec espace */
.approche-hero-title--split {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: var(--fw-med);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.approche-hero-strong { color: var(--ink); }
.approche-hero-muted {
  color: rgba(26, 26, 26, 0.45);   /* --ink à 45% */
}

/* ============================================================
   1b. CERCLES SVG — 7 anneaux concentriques, rotation pilotée par scroll
   Section 250vh sur desktop avec sticky 100vh interne (donne du scroll-space
   à la rotation scrub gérée par approche.js). Mobile : 70vh sans sticky.
   ============================================================ */
.approche-rings {
  position: relative;
  background: var(--white);
  min-height: 280vh;                  /* desktop : large scroll-space pour scrub */
}
.approche-rings-sticky {
  position: sticky;
  top: 0;
  height: 117vh;                      /* agrandi pour accueillir un cercle +30% sans tronquer */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;                   /* descend légèrement le bloc cercles pour aérer le haut */
  overflow: hidden;                   /* clip les cercles qui débordent du viewport */
}
.approche-rings-figref {
  position: absolute;
  top: clamp(1.5rem, 3vw, 3rem);
  left: clamp(1.25rem, 3vw, 3rem);
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

/* Container cercles : largement plus grand que le viewport, débordement assumé
   (clippé par overflow:hidden du sticky). Effet "cercles continuent au-delà du cadre". */
.approche-rings-container {
  position: relative;
  width: min(107vh, 105vw, 1400px);    /* +30% vs précédent (82vh) — contraint par hauteur dispo */
  height: min(107vh, 105vw, 1400px);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.approche-rings-svg {
  width: 100%;
  height: 100%;
  color: var(--ink);
  overflow: visible;
  display: block;
  /* Stabilise le rendu pendant la rotation continue (anti-scintillement) */
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  transform: translateZ(0);            /* force un layer GPU sur l'ensemble du SVG */
  backface-visibility: hidden;
}
.approche-rings-svg circle {
  stroke-width: 0.9;
  opacity: 0.18;
}

/* Typo des arcs : plus fine (regular), letter-spacing plus large pour respirer */
.ring-text {
  fill: var(--ink);
  font-family: var(--font);
  font-weight: var(--fw-reg);          /* 400 au lieu de 500, plus fin */
  font-size: 13px;
  letter-spacing: 0.12em;              /* ↑ de 0.04 à 0.12em pour aérer */
}
@media (max-width: 1200px) { .ring-text { font-size: 12px; letter-spacing: 0.10em; } }
@media (max-width: 900px)  { .ring-text { font-size: 10px; letter-spacing: 0.08em; } }
@media (max-width: 540px)  { .ring-text { font-size:  9px; letter-spacing: 0.06em; } }

/* Rotation : pilotée par approche.js via GSAP scrub ScrollTrigger.
   transform-origin est géré par GSAP via `svgOrigin: '200 200'` (coords viewBox),
   pas en CSS — sinon le centre CSS (calculé en pixels) ne matche pas le centre SVG. */
.ring-group {
  will-change: transform;
  backface-visibility: hidden;
}
.ring-text {
  /* Anti-scintillement sur le texte courbé pendant la rotation continue */
  paint-order: stroke fill;
  shape-rendering: geometricPrecision;
}

/* Texte central — overlay au CENTRE EXACT du sticky (pas du container qui déborde) */
.approche-rings-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(22ch, 30vw);             /* contraint pour rester dans le cercle r=80 */
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.approche-rings-center p {
  margin: 0;
  font-size: clamp(0.78rem, 0.9vw, 0.95rem);   /* plus fin pour tenir dans r=80 */
  line-height: 1.4;
  color: var(--ink);
  font-weight: var(--fw-med);
  letter-spacing: 0;
}
.approche-rings-center strong {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* ===== Mobile (<900px) : 70vh sans sticky, container compact ===== */
@media (max-width: 900px) {
  .approche-rings { min-height: 0; padding: 2.5rem 0; }
  .approche-rings-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 70vh;
    padding: 0 1rem;
    overflow: visible;
  }
  .approche-rings-container {
    width: min(92vw, 480px);
    height: min(92vw, 480px);
  }
  .approche-rings-figref {
    top: 1.5rem;
    left: 1.25rem;
  }
  .approche-rings-center {
    width: min(18ch, 60vw);             /* mobile : un peu plus large pour rester lisible */
  }
  .approche-rings-center p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

@media (max-width: 540px) {
  .approche-rings-sticky { min-height: 60vh; }
  .approche-rings-container {
    width: min(94vw, 380px);
    height: min(94vw, 380px);
  }
  .approche-rings-center p { font-size: 0.7rem; }
}

/* ============================================================
   Génériques de section
   ============================================================ */
.approche-section {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: var(--white);
  color: var(--ink);
}
.approche-section--gray { background: var(--gray-100); }

.approche-section-head {
  max-width: 65ch;
  margin: 0 auto clamp(2.8rem, 6vw, 5rem);
  text-align: center;
}
.approche-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
.approche-eyebrow--on-green { color: #5fc9b3; }

.approche-section-title {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.approche-chapo {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-60);
  font-weight: var(--fw-med);
}

/* ============================================================
   2. ADN — 3 paliers (Opérationnels · Intégrés · Ancrés)
   Layout : grand numéro à gauche + titre + body
   ============================================================ */
/* Section ADN — pattern Wondermakers : ScrollTrigger.pin gère le sticky
   et calcule exactement la runway de scroll qui correspond à la timeline,
   donc pas de dead zone après la révélation de la card 3. */
.approche-adn {
  padding: 0;
}
.approche-adn-sticky {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vw, 2rem);
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(2rem, 3vw, 3rem) clamp(1.25rem, 3vw, 3rem);
  min-height: 100vh;                     /* le pin scrollTrigger se cale là-dessus */
  justify-content: center;
}

/* Barre de progression : 2px, fond gris clair, fill noir scaleX 0→1 */
.approche-adn-progress {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 2px;
  margin-inline: auto;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.approche-adn-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Grille des 3 cards */
.approche-pillars {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.4vw, 1.4rem);
}
.approche-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  aspect-ratio: 4 / 5;                   /* cards verticales 4:5 (un peu moins haut que 3:4) */
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 28px;
  overflow: hidden;
  color: var(--white);
  background-color: #001f1a;
  /* Pas de transform initial ici : GSAP pose yPercent: 150 dès l'init pour éviter
     le double-translate composé (CSS + GSAP). Visibility hidden = pas de flash
     avant que GSAP.set s'applique. */
  visibility: hidden;
  will-change: transform;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.5s var(--ease);
}
.approche-pillar.is-ready { visibility: visible; }
.approche-pillar:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.approche-pillar:hover .approche-pillar-bg {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .approche-pillar { visibility: visible; }
}
/* Image partagée entre les 3 cards. object-position calculé via --index :
   card 0 → 0%, card 1 → 50%, card 2 → 100% → chaque card pioche son tiers
   du même panorama → impression de fond continu seamless. */
/* TRIPTYQUE SEAMLESS : l'image est étirée à 300% de la largeur d'une card
   (= la largeur totale des 3 cards mises côte à côte), puis décalée
   horizontalement de -100% × index. Résultat : la card 0 affiche le tiers
   gauche de l'image, la 1 le tiers central, la 2 le tiers droit — strictement
   contigus, sans recouvrement. object-fit: cover gère le crop vertical
   (l'image est plus haute que la card une fois étirée à 300%). */
.approche-pillar-bg {
  position: absolute;
  top: 0;
  left: calc(var(--index, 0) * -100%);
  width: 300%;
  max-width: none;                       /* override base.css img { max-width: 100% } qui plafonnait width:300% */
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.7s var(--ease);
}
.approche-pillar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);      /* assombrit légèrement pour la lisibilité du texte blanc */
  z-index: 1;
  pointer-events: none;
}
.approche-pillar > .approche-pillar-num,
.approche-pillar > .approche-pillar-title,
.approche-pillar > .approche-pillar-body {
  position: relative;
  z-index: 2;
}

.approche-pillar-num {
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  line-height: 1;
}
.approche-pillar-title {
  margin: 0.85rem 0 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--white);
}
.approche-pillar-body {
  margin: 0;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 38ch;
}

/* ============================================================
   3. PRINCIPES — Deck de cards qui se stackent au scroll
   Pattern Sakazuki : chaque card est sticky au même top, pré-orientée
   (translate-x + rotate) → effet "pile de cartes posées" naturel.
   ============================================================ */
.approche-principles-grid {
  list-style: none; padding: 0; margin: 0;
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  /* Pas de gap : l'espace entre cards vient du margin-top sur chaque carte sticky */
}
.approche-principle {
  position: sticky;
  top: clamp(96px, 14vh, 140px);         /* sous la nav fixed (~72-80px) + un peu d'air */
  background: var(--white);
  color: var(--ink);
  padding: clamp(2.2rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  min-height: clamp(280px, 38vh, 380px);
  transform: translateX(var(--card-x, 0)) rotate(var(--card-r, 0deg));
  transform-origin: 50% 0%;
  transition: box-shadow 0.4s var(--ease);
  will-change: transform;
}
/* Pré-positionnement style "deck posé" — angles & offsets variés par index */
.approche-principle:nth-child(1) { --card-x: 0;     --card-r: 0deg;  z-index: 1; }
.approche-principle:nth-child(2) { --card-x: 3.2rem; --card-r: 2.2deg;  z-index: 2; background: var(--green); color: var(--white); border-color: transparent; }
.approche-principle:nth-child(3) { --card-x: -3.6rem; --card-r: -2.8deg; z-index: 3; }
.approche-principle:nth-child(4) { --card-x: 4.4rem; --card-r: 3.4deg;  z-index: 4; background: var(--green-deep); color: var(--white); border-color: transparent; }
/* Scroll-space entre cards = chaque carte sticky reste lisible avant que la suivante recouvre */
.approche-principle + .approche-principle {
  margin-top: 35vh;
}

.approche-principle-num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 1rem;
}
.approche-principle:nth-child(2) .approche-principle-num,
.approche-principle:nth-child(4) .approche-principle-num {
  color: rgba(255, 255, 255, 0.7);       /* num blanc-transparent sur fond vert */
}
.approche-principle-title {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: var(--fw-black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: inherit;
  max-width: 22ch;
}
.approche-principle p {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 56ch;
}
.approche-principle:nth-child(2) p,
.approche-principle:nth-child(4) p {
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   4. SANS ENGAGEMENT — vert akt, citation forte centrée
   ============================================================ */
.approche-engagement {
  background: var(--green);
  color: var(--white);
  padding: clamp(5rem, 10vw, 8rem) 0;
  text-align: center;
}
.approche-engagement .container { max-width: 880px; }
.approche-engagement-title {
  margin: 0 0 1.6rem;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.approche-engagement-title em {
  font-style: normal;
  color: #5fc9b3;
}
.approche-engagement-lead {
  margin: 0 auto 2.5rem;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  font-weight: var(--fw-med);
}
.approche-engagement-quote {
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 56ch;
}
.approche-engagement-quote p {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: 1.4;
  color: var(--white);
  letter-spacing: -0.005em;
}

/* ============================================================
   5. CONFIANCE — 4 blocs (Proximité · Franchise · Durée · Discrétion)
   ============================================================ */
.approche-confiance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 1100px;
  margin-inline: auto;
}
.approche-confiance-block {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--green);
}
.approche-confiance-block h3 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.approche-confiance-block p {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-60);
}

/* ============================================================
   6. FONDS — vert profond, K filigrane, 2 colonnes
   ============================================================ */
.approche-fonds {
  background: var(--green-deep);
  color: var(--white);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.approche-fonds .k-watermark {
  position: absolute;
  width: clamp(280px, 30vw, 460px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.approche-fonds-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.approche-fonds-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--white);
  text-wrap: balance;
}
.approche-fonds-body {
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  font-weight: var(--fw-med);
}
.approche-fonds-emphasis {
  margin: 0 0 2rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: #5fc9b3;
  font-style: italic;
}
.approche-fonds-cta { margin: 0; }

/* ============================================================
   7. MÉTHODE TEASER — 3 temps simples avec gros numéros
   ============================================================ */
.approche-methode-grid {
  list-style: none; padding: 0; margin: 0 0 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  max-width: 1100px;
  margin-inline: auto;
}
.approche-methode-step {
  text-align: left;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--green);
}
.approche-methode-num {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--fw-black);
  color: var(--green);
  line-height: 1;
  margin-bottom: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.approche-methode-step h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.approche-methode-step p {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--ink-60);
}
.approche-methode-link {
  text-align: center;
  margin: 0;
}
.approche-methode-link .link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--green);
  font-weight: var(--fw-bold);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.25s var(--ease);
}
.approche-methode-link .link-arrow svg { width: 16px; height: 16px; }
.approche-methode-link .link-arrow:hover { gap: 0.9rem; }

/* ============================================================
   8. CTA FINAL — vert profond
   ============================================================ */
.approche-cta-final {
  background: var(--green-deep);
  color: var(--white);
  padding: clamp(5rem, 9vw, 7rem) 0;
  text-align: center;
}
.approche-cta-final .container { max-width: 720px; }
.approche-cta-title {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--white);
  text-wrap: balance;
}
.approche-cta-lead {
  margin: 0 auto 2.5rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 55ch;
}
.approche-cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.approche-cta-actions .btn--secondary { color: var(--white); border-color: var(--white); }
.approche-cta-actions .btn--secondary:hover { background: var(--white); color: var(--green-deep); }

/* ============================================================
   MOBILE / TABLET
   ============================================================ */
@media (max-width: 900px) {
  /* Sur mobile : pas de pin, flow normal, reveal simple à l'entrée. */
  .approche-adn {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
  }
  .approche-adn-sticky {
    min-height: 0;
    padding: 0 var(--gutter);
    justify-content: flex-start;
  }
  .approche-adn-progress { display: none; }
  .approche-pillars {
    grid-template-columns: 1fr;
  }
  .approche-pillar {
    aspect-ratio: 4 / 5;
  }
  .approche-fonds-grid { grid-template-columns: 1fr; }
  .approche-methode-grid { grid-template-columns: 1fr; }

  /* Principes : stack sticky conservé sur mobile, mais offsets/padding adaptés au viewport étroit */
  .approche-principle {
    top: clamp(72px, 11vh, 100px);       /* nav mobile + air, plus bas que desktop */
    padding: clamp(1.6rem, 5vw, 2rem);
    min-height: clamp(240px, 36vh, 320px);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04);
  }
  /* Offsets et rotations réduits : sur 375px on a peu de marge horizontale */
  .approche-principle:nth-child(2) { --card-x: 1.1rem; --card-r: 1.6deg; }
  .approche-principle:nth-child(3) { --card-x: -1.1rem; --card-r: -1.8deg; }
  .approche-principle:nth-child(4) { --card-x: 1.4rem; --card-r: 2.4deg; }
  .approche-principle + .approche-principle { margin-top: 24vh; }
}

@media (max-width: 540px) {
  .approche-section-head { text-align: left; }
  .approche-engagement { text-align: left; }
  .approche-engagement .container { padding: 0 var(--gutter); }
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .approche-principle {
    transition: none;
    position: relative; top: auto; transform: none;
    margin-top: 1rem !important;
  }
}