/* Poeydomenge Performance — landing */
:root {
  --bg: #0A0907;
  --bg-2: #14110E;
  --bg-3: #1C1814;
  --line: #2A241D;
  --line-soft: #1F1B15;
  --gold: #C9A961;
  --gold-soft: #A88A4A;
  --gold-pale: #E8D4A2;
  --ivory: #F5EFE3;
  --ivory-dim: #D9D2C2;
  --muted: #8A8275;
  --muted-2: #5C5648;

  --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 100%;
  --pad-x: clamp(20px, 5vw, 96px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Typography primitives */
.display {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.display em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.eyebrow {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  margin: 0 10px 3px 0;
  vertical-align: middle;
}
.kicker {
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lead {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  color: var(--ivory-dim);
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section {
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
}
.section + .section { border-top: 1px solid var(--line-soft); }

.hairline {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: 0.4;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateY(0); }

.btn-solid {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-solid::before { background: var(--gold-pale); }
.btn-solid:hover { color: var(--bg); }

.btn-ghost {
  border-color: rgba(233, 212, 162, 0.25);
  color: var(--ivory-dim);
}
.btn-ghost::before { background: var(--ivory); }
.btn-ghost:hover { color: var(--bg); }

.btn .arrow {
  width: 14px; height: 1px;
  background: currentColor;
  position: relative;
}
.btn .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* Monogram logo */
.monogram {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
}
.monogram .mark-img {
  width: 54px;
  height: 42px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 14px rgba(201, 169, 97, 0.15));
}
.monogram .mark {
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.04em;
  position: relative;
}
.monogram .mark::before,
.monogram .mark::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border: 1px solid var(--gold);
}
.monogram .mark::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.monogram .mark::after { bottom: -3px; right: -3px; border-left: none; border-top: none; }
.monogram .wordmark {
  font-family: var(--ff-display);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  line-height: 1;
}
.monogram .wordmark small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-top: 4px;
}

/* Nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 9, 7, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.nav-links {
  display: flex;
  gap: 36px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--gold); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* Hero */
.hero {
  /* min-height au lieu de height fixe : sur écrans plus courts (laptop Mac
     ~800px), la grille peut grandir pour ne plus couper les boutons CTA. */
  min-height: 100vh;
  padding-top: clamp(80px, 10vh, 110px);
  padding-bottom: clamp(24px, 5vh, 56px);
  display: flex;
  align-items: stretch;
  position: relative;
  /* overflow déplacé sur .hero-visual pour ne pas clipper le texte / CTA */
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  /* 1fr : la rangée prend toute la place dispo si le contenu est court,
     mais peut grandir au-delà si nécessaire (auto/min-content garanti). */
  grid-template-rows: 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
  width: 100%;
  min-height: 0;
}
/* Colonne texte : on remplit toute la hauteur du hero, contenu réparti
   équilibré du haut (eyebrow) jusqu'au bas (meta). */
.hero-text {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* container-type: inline-size — le H1 scale en cqw (largeur de colonne)
     au lieu de vw, donc plus d'overflow sur écran intermédiaire. */
  container-type: inline-size;
}
.hero-text-top { margin-top: clamp(24px, 6vh, 150px); margin-bottom: clamp(12px, 2vh, 32px); }
.hero .sub { margin-top: 0; margin-bottom: auto; }
.hero-text-bottom {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vh, 32px);
}
.hero-text-bottom .hero-cta { margin-top: 0; }
.hero-text-bottom .hero-meta { margin-top: 0; padding-top: 14px; }
@media (max-width: 980px) {
  /* Sur tablette/mobile la grille passe en 1 colonne — il faut donc casser
     les contraintes de hauteur du desktop, sinon la photo s'écrase à 0px
     sous le texte. */
  .hero {
    height: auto;
    min-height: 0;
    display: block;
    padding-top: 110px;
    padding-bottom: 60px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    gap: 40px;
  }
  .hero-text { display: block; height: auto; }
  .hero-text-top { margin-top: 0; margin-bottom: 12px; }
  .hero-text-bottom { margin-top: 0; gap: 0; display: block; }
  /* H1 : on borne la taille pour que le mot tournant rentre sur une seule
     ligne dans la largeur dispo (sinon il se casse et chevauche le sub). */
  .hero h1 {
    font-size: clamp(36px, 6.4vw, 64px);
    line-height: 1.05;
    margin: 14px 0 24px;
  }
  .hero-visual {
    height: auto;
    aspect-ratio: 4/5;
    transform: none;
    min-height: 380px;
  }
}

.hero h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  /* Échelle pilotée par la LARGEUR DE LA COLONNE (cqw), bornée par
     la hauteur (vh) sur écran court. La valeur 17.5cqw vient du gabarit
     "courbatures" qui doit rentrer sur une ligne dans la colonne texte
     (≈ 11 caractères × ~1.6cqw chacun = ~17.5cqw → ratio safe).
     Plus aucun overflow possible : le titre s'adapte à son contenant. */
  font-size: clamp(34px, min(17.5cqw, 12vh), 132px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: clamp(8px, 1.6vh, 18px) 0 clamp(14px, 3vh, 28px);
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

/* Rotating word slot — le mot fantôme (invisible) fixe la largeur du
   créneau ; le mot visible est superposé en absolu. Résultat : la ligne
   ne se reflowe jamais quand le mot change, et la hauteur du H1 — et
   donc l'espace entre les sections — reste constante. */
.rot-slot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  font-style: italic;
  color: var(--gold);
}
.rot-slot .rot-ghost {
  visibility: hidden;
  pointer-events: none;
  font-style: italic;
  white-space: nowrap;
}
.rot-slot .rot {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  font-style: italic;
  color: var(--gold);
  white-space: nowrap;
  transition:
    opacity 380ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 380ms;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.rot-slot .rot.rot-out {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(4px);
}
.hero .sub {
  font-size: clamp(15px, min(1.5vw, 2.3vh), 23px);
  line-height: 1.55;
  color: var(--ivory-dim);
  max-width: 52ch;
  font-weight: 300;
}
.hero-cta {
  margin-top: clamp(20px, 4vh, 40px);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.hero-meta {
  margin-top: clamp(24px, 5vh, 56px);
  display: flex; gap: clamp(14px, 2.5vw, 32px); flex-wrap: wrap;
  padding-top: clamp(16px, 3vh, 28px);
  border-top: 1px solid var(--line-soft);
  font-size: clamp(10px, min(0.85vw, 1.4vh), 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 10px; }
.hero-meta .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(201, 169, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}

/* Placeholder image */
.ph {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    rgba(201, 169, 97, 0.04) 22px 23px
  );
}
.ph .ph-label {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ph .ph-corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--gold);
  opacity: 0.5;
}
.ph .ph-corner.tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.ph .ph-corner.tr { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
.ph .ph-corner.bl { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
.ph .ph-corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }

.hero-visual {
  height: 100%;
  width: 100%;
  position: relative;
  /* Dépasse légèrement les limites du grid pour plus de présence.
     On origine en haut pour que l'agrandissement laisse le bas du sujet
     visible et fonde tranquillement vers la section suivante. */
  transform: scale(1.12);
  transform-origin: 50% 20%;
  /* clip ici (au lieu de sur .hero) : les CTA peuvent dépasser sans être coupés */
  overflow: hidden;
}
@media (max-width: 980px) { .hero-visual { transform: none; aspect-ratio: 3/4; } }
.hero-photo {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recadré légèrement plus bas pour ne plus couper le sujet aux genoux —
     on garde le visage haut tout en montrant le buste complet. */
  object-position: 50% 38%;
  filter: grayscale(0.15) contrast(1.12) brightness(1.08) saturate(0.85);
  display: block;
  transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(
    ellipse 50% 78% at 50% 52%,
    #000 0%,
    #000 38%,
    rgba(0,0,0,0.78) 62%,
    rgba(0,0,0,0.32) 84%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 78% at 50% 52%,
    #000 0%,
    #000 38%,
    rgba(0,0,0,0.78) 62%,
    rgba(0,0,0,0.32) 84%,
    rgba(0,0,0,0) 100%
  );
}
.hero-photo {
  /* Fondu vertical TRES généreux en bas : on évite toute coupure visible
     et le passage à la section Parcours devient continu. Le fondu démarre
     plus tôt (à 55%) et s'étire jusqu'à 100% pour un dégradé soyeux. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 55%, rgba(0,0,0,0.6) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 55%, rgba(0,0,0,0.6) 78%, transparent 100%);
}
.hero-photo::before {
  /* halo doré qui éclaire le sujet */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 55% at 50% 45%, rgba(232,212,162,0.18) 0%, rgba(201,169,97,0.08) 35%, rgba(201,169,97,0) 70%),
    radial-gradient(ellipse 20% 30% at 50% 40%, rgba(255,240,200,0.12) 0%, rgba(255,240,200,0) 60%);
  mix-blend-mode: screen;
  z-index: 2;
}
.hero-photo::after { display: none; }
.hero-photo .photo-caption {
  position: absolute;
  left: 22px;
  bottom: 22px;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ivory);
  letter-spacing: 0.01em;
  z-index: 3;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero-visual .badge {
  position: absolute;
  top: 20px; right: 20px;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  background: rgba(10, 9, 7, 0.65);
  backdrop-filter: blur(6px);
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  z-index: 2;
}
.hero-visual .caption {
  position: absolute;
  left: 24px; bottom: 24px;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ivory);
  z-index: 2;
}

/* Section headers */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(24px, 6vw, 96px);
  margin-bottom: clamp(48px, 7vw, 88px);
}
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; gap: 16px; } }
.sec-head h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
.sec-head h2 em { font-style: italic; color: var(--gold); }
.sec-head .side {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 14px;
}
.sec-head .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-visual {
  aspect-ratio: 4/5;
  position: sticky;
  top: 100px;
}
.about-copy p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ivory-dim);
  margin: 0 0 20px;
}
.about-copy p:first-child::first-letter {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold);
  font-size: 56px;
  float: left;
  line-height: 0.9;
  margin: 8px 10px -4px 0;
}
.about-pillars {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.about-pillars .item {
  padding: 24px 20px 24px 0;
  border-bottom: 1px solid var(--line);
}
.about-pillars .item:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--line); }
.about-pillars .item:nth-child(even) { padding-left: 24px; }
.about-pillars .k {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold);
  font-size: 32px;
  line-height: 1;
}
.about-pillars .v {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Philosophy */
.philo {
  background: var(--bg-2);
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 80px);
  /* CRITIQUE — align-items: start (et NON stretch).
     Conséquence : les colonnes ne cherchent JAMAIS à matcher la hauteur
     l'une de l'autre. Les photos gardent leur taille intrinsèque
     (aspect-ratio fixe), le texte garde la sienne. Aucune photo ne peut
     plus déborder sur le texte ou être étirée. C'est la règle de base
     pour toutes les sections en deux colonnes du site. */
  align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about-visual {
  position: relative;
  top: auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: start;
  min-height: 0;
}
.about-photo {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
  /* PAS d'aspect-ratio fixe : chaque photo garde son ratio natif.
     Conséquence : aucun crop, aucun zoom inégal — les deux photos
     scalent strictement à la même vitesse (largeur 100% de colonne)
     et leurs hauteurs respectives suivent leur ratio source. */
  overflow: hidden;
  background: transparent;
}
.about-photo img {
  width: 100%;
  height: auto;
  /* Plus de object-fit / object-position : l'image s'affiche en entier,
     non rognée. C'est ce qui supprime définitivement les zooms inégaux. */
  filter: grayscale(0.15) contrast(1.12) brightness(1.08) saturate(0.85);
  display: block;
}
.about-photo::before {
  /* halo doré plus marqué qui éclaire le sujet */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 55% at 50% 45%, rgba(232,212,162,0.18) 0%, rgba(201,169,97,0.08) 35%, rgba(201,169,97,0) 70%),
    radial-gradient(ellipse 20% 30% at 50% 40%, rgba(255,240,200,0.12) 0%, rgba(255,240,200,0) 60%);
  mix-blend-mode: screen;
  z-index: 2;
}
.about-photo::after { display: none; }

/* Coupe le halo doré sur la première photo (lumière de stade déjà présente). */
.about-photo:not(.about-photo-2)::before { display: none; }
.about-photo.about-photo-2 { margin-top: 0; }
.about-photo figcaption {
  position: absolute;
  left: 22px;
  bottom: 22px;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ivory);
  z-index: 3;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.about-copy p { margin: 0 0 20px; max-width: 62ch; }
.about-pillars {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 680px) { .about-pillars { grid-template-columns: repeat(2, 1fr); } }
.about-pillars .item {
  padding: 22px 18px;
  border-right: 1px solid var(--line);
}
.about-pillars .item:last-child { border-right: none; }
@media (max-width: 680px) {
  .about-pillars .item:nth-child(2) { border-right: none; }
  .about-pillars .item:nth-child(1), .about-pillars .item:nth-child(2) { border-bottom: 1px solid var(--line); }
}
.about-pillars .k {
  font-family: var(--ff-display);
  font-size: clamp(26px, 2.6vw, 32px);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.about-pillars .v {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.philo-intro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  /* Même règle que .about-grid : pas de stretch, chaque colonne garde
     sa hauteur naturelle, aucun chevauchement possible. */
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 860px) { .philo-intro { grid-template-columns: 1fr; gap: 28px; } }
.philo-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.philo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(0.25) contrast(1.02) brightness(0.85) saturate(0.75);
  display: block;
}
.philo-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(270deg, var(--bg-2) 0%, rgba(20,17,14,0.5) 16%, rgba(20,17,14,0) 52%),
    linear-gradient(180deg, rgba(20,17,14,0.4) 0%, rgba(20,17,14,0) 30%, rgba(20,17,14,0) 65%, rgba(20,17,14,0.85) 100%),
    radial-gradient(120% 80% at 30% 40%, rgba(20,17,14,0) 40%, rgba(20,17,14,0.55) 100%);
  z-index: 1;
}
.philo-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 25% 25%, rgba(201,169,97,0.08) 0%, rgba(201,169,97,0) 70%);
  mix-blend-mode: screen;
  z-index: 2;
}
.philo-intro .lead {
  max-width: 58ch;
  margin: 0;
}
.philo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  margin-top: 40px;
}
@media (max-width: 760px) { .philo-split { grid-template-columns: 1fr; } }
.philo-split > div {
  padding: clamp(28px, 4vw, 48px);
}
.philo-split > div:first-child {
  border-right: 1px solid var(--line);
  background: var(--bg-3);
}
@media (max-width: 760px) { .philo-split > div:first-child { border-right: none; border-bottom: 1px solid var(--line); } }
.philo-split h4 {
  margin: 0 0 18px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.philo-split .big {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  font-weight: 400;
  margin: 0 0 20px;
}
.philo-split .big em { font-style: italic; color: var(--gold); }
.philo-split p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ivory-dim);
  margin: 0;
}
.philo-quote {
  margin-top: 48px;
  padding: 36px 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  color: var(--ivory);
  max-width: 900px;
  margin-left: auto; margin-right: auto;
}
.philo-quote::before {
  content: '—';
  color: var(--gold);
  margin-right: 12px;
}

/* Techniques */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr; } }
.tech-card {
  background: var(--bg);
  padding: clamp(28px, 3.5vw, 44px);
  transition: background 0.4s ease;
  position: relative;
}
.tech-card:hover { background: var(--bg-2); }
.tech-card .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.tech-card h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  margin: 56px 0 16px;
}
.tech-card h3 em { font-style: italic; color: var(--gold); }
.tech-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ivory-dim);
  margin: 0 0 20px;
}
.tech-card ul {
  list-style: none;
  padding: 0; margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tech-card ul li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: flex; gap: 10px;
}
.tech-card ul li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--gold);
  margin-top: 9px;
  flex-shrink: 0;
}

/* Disclaimer strip */
.disclaim {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px dashed var(--line);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  display: flex; align-items: center; gap: 18px;
}
.disclaim strong { color: var(--ivory-dim); font-weight: 500; letter-spacing: 0.04em; }
.disclaim .tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  padding: 6px 10px;
  border: 1px solid var(--gold);
  flex-shrink: 0;
}

/* Tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column;
  min-height: 480px;
  position: relative;
  transition: border-color 0.35s ease, background 0.35s ease;
  background: linear-gradient(180deg, transparent 0%, rgba(201, 169, 97, 0.02) 100%);
}
.tier:hover { border-color: var(--gold-soft); }
.tier.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(201, 169, 97, 0.05) 0%, transparent 50%); }
.tier .level {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 14px;
}
.tier h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.tier h3 em { font-style: italic; color: var(--gold); }
.tier .tag {
  font-size: 13px;
  color: var(--ivory-dim);
  font-style: italic;
  font-family: var(--ff-display);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.tier ul {
  list-style: none;
  padding: 0; margin: 0 0 32px;
  flex: 1;
}
.tier ul li {
  padding: 12px 0;
  font-size: 13px;
  color: var(--ivory-dim);
  letter-spacing: 0.02em;
  display: flex; gap: 12px;
}
.tier ul li::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--gold);
  margin-top: 10px;
  flex-shrink: 0;
}
.tier .price-hint {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
  padding-bottom: 18px;
}
.tier .featured-badge {
  position: absolute;
  top: -10px; right: 20px;
  padding: 6px 10px;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Zone / map */
.zone-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
}
@media (max-width: 860px) { .zone-wrap { grid-template-columns: 1fr; } }
.zone-copy {
  padding: clamp(28px, 4vw, 52px);
  border-right: 1px solid var(--line);
  background: var(--bg-2);
}
@media (max-width: 860px) { .zone-copy { border-right: none; border-bottom: 1px solid var(--line); } }
.zone-copy h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  margin: 20px 0 24px;
}
.zone-copy h3 em { font-style: italic; color: var(--gold); }
.zone-copy p { color: var(--ivory-dim); line-height: 1.8; margin: 0 0 18px; }
.zone-copy .areas {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: block;
}
.zone-copy .areas-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.zone-copy .areas-list {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ivory);
  letter-spacing: 0.01em;
}
.zone-copy .areas-list i {
  font-style: normal;
  color: var(--gold);
  margin: 0 4px;
  opacity: 0.7;
}
.zone-map {
  position: relative;
  min-height: 440px;
  background: var(--bg-3);
  overflow: hidden;
}

/* Testimonials */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } }
.testi {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  min-height: 420px;
}
.testi-head {
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.testi-level {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.testi-sub {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
}
.testi .quote-mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 56px;
  color: var(--gold);
  line-height: 0.5;
  margin-top: 22px;
  margin-bottom: 10px;
}
.testi-body {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ivory);
  margin: 0 0 24px;
  flex: 1;
  animation: testiFade 0.5s ease both;
}
@keyframes testiFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.testi .author {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testi .author small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-top: 6px;
  text-transform: none;
  font-style: italic;
  font-family: var(--ff-display);
}
.testi-dots {
  display: flex; gap: 8px;
  margin-top: 18px;
}
.testi-dots button {
  width: 20px; height: 2px;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.testi-dots button.on { background: var(--gold); }
.testi-dots button:hover { background: var(--gold-soft); }

/* FAQ */
.faq-list {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  color: var(--ivory);
  text-align: left;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.3;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--gold); }
.faq-q .plus {
  width: 14px; height: 14px;
  position: relative;
  flex-shrink: 0;
}
.faq-q .plus::before,
.faq-q .plus::after {
  content: '';
  position: absolute;
  background: var(--gold);
}
.faq-q .plus::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.faq-q .plus::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; transition: transform 0.3s; }
.faq-item.open .faq-q .plus::after { transform: rotate(90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-a-inner {
  padding: 0 0 32px;
  padding-right: 40px;
  max-width: 72ch;
  color: var(--ivory-dim);
  font-size: 15px;
  line-height: 1.8;
}

/* Guarantees */
.guar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 40px;
  border: 1px solid var(--line);
}
@media (max-width: 860px) { .guar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .guar-grid { grid-template-columns: 1fr; } }
.guar {
  background: var(--bg);
  padding: clamp(24px, 3vw, 36px);
}
.guar .ico {
  width: 28px; height: 28px;
  color: var(--gold);
  margin-bottom: 18px;
}
.guar h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 10px;
  line-height: 1.1;
}
.guar p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* Final CTA */
.final-cta {
  text-align: center;
  padding: clamp(88px, 12vw, 160px) var(--pad-x);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.final-cta h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 auto 28px;
  max-width: 16ch;
}
.final-cta h2 em { font-style: italic; color: var(--gold); }
.final-cta p {
  max-width: 56ch;
  margin: 0 auto 40px;
  color: var(--ivory-dim);
  line-height: 1.7;
}
.final-cta .ctas {
  display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}

/* Premier contact — bouton WhatsApp pleine largeur */
.final-cta-actions {
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.final-cta-actions .btn-wa {
  --wa-green: #25D366;
  --wa-green-deep: #128C7E;
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: #0B1410;
  font-weight: 500;
  padding: 18px 30px;
  font-size: 13px;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  box-shadow:
    0 12px 32px -10px rgba(37, 211, 102, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.final-cta-actions .btn-wa::before { background: #20bd5a; }
.final-cta-actions .btn-wa:hover {
  color: #0B1410;
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px -10px rgba(37, 211, 102, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.final-cta-actions .btn-wa .btn-wa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: #0B1410;
}
.final-cta-actions .btn-wa .btn-wa-icon svg { width: 18px; height: 18px; }
.final-cta-actions .btn-wa .arrow {
  width: 24px; height: 1px;
  background: #0B1410;
  position: relative;
  margin-left: 4px;
}
.final-cta-actions .btn-wa .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px; height: 7px;
  border-top: 1px solid #0B1410;
  border-right: 1px solid #0B1410;
}
.final-cta-note {
  margin: 0 !important;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* QR code WhatsApp — desktop only, en complément du bouton */
.final-cta-qr { display: none; }
@media (min-width: 921px) and (hover: hover) and (pointer: fine) {
  .final-cta-qr {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 28px auto 0;
  }
  .final-cta-qr-divider {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 22px;
  }
  .final-cta-qr-divider::before,
  .final-cta-qr-divider::after {
    content: ''; flex: 1 1 auto;
    height: 1px;
    background: var(--line-soft);
  }
  .final-cta-qr-divider span {
    flex: 0 0 auto;
    padding: 0 2px;
  }
  .final-cta-qr-card {
    display: grid;
    grid-template-columns: 144px 1fr;
    gap: 22px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.015);
  }
  .final-cta-qr-img {
    margin: 0;
    width: 144px; height: 144px;
    background: #0a0a0a;
    border: 1px solid var(--line-soft);
    padding: 6px;
    display: flex; align-items: center; justify-content: center;
  }
  .final-cta-qr-img img {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
  }
  .final-cta-qr-copy {
    display: flex; flex-direction: column; gap: 8px;
    text-align: left;
  }
  .final-cta-qr-eyebrow {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .final-cta-qr-text {
    margin: 0 !important;
    max-width: none;
    font-family: var(--ff-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
  }
}

/* Footer — minimal, direction artistique */
.footer {
  padding: clamp(56px, 7vw, 88px) var(--pad-x) 28px;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 28px;
  background: var(--gold);
  opacity: 0.5;
}
.footer-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-bottom: 48px;
}
.footer-top .monogram { margin-bottom: 4px; }
.footer-sig-name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ivory);
  letter-spacing: -0.005em;
  line-height: 1;
}
.footer-sig-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer-copy { color: var(--muted); display: block; margin-bottom: 4px; }
.footer-copy-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.footer-address {
  color: var(--muted-2);
  letter-spacing: 0.22em;
  font-size: 10px;
  line-height: 1.9;
  text-transform: uppercase;
  font-family: var(--ff-mono);
}
.footer-brand {
  display: block;
  color: var(--gold);
  letter-spacing: 0.28em;
  font-weight: 500;
  margin-bottom: 4px;
}
.footer-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  letter-spacing: 0.22em;
}
.footer-links a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold-soft);
}
.footer-links .sep {
  color: var(--muted-2);
  opacity: 0.6;
}

@media (max-width: 560px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .footer-copy-block { align-items: center; text-align: center; }
}

/* Legal modal */
.legal-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(5, 4, 3, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 24px;
  animation: legalFade 0.25s ease both;
}
@keyframes legalFade { from { opacity: 0; } to { opacity: 1; } }
.legal-modal {
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  animation: legalSlide 0.3s ease both;
}
@keyframes legalSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.legal-head {
  position: relative;
  padding: 32px 40px 24px;
  border-bottom: 1px solid var(--line);
}
.legal-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal-head h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--ivory);
  margin: 10px 0 0;
  letter-spacing: -0.01em;
}
.legal-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ivory-dim);
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.legal-close:hover { border-color: var(--gold); color: var(--gold); }
.legal-body {
  padding: 28px 40px 40px;
  overflow-y: auto;
  color: var(--ivory-dim);
  font-size: 14px;
  line-height: 1.7;
}
.legal-body .lead {
  font-family: var(--ff-display);
  font-size: 16px;
  font-style: italic;
  color: var(--ivory);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.legal-body h4 {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 28px 0 12px;
  font-weight: 500;
}
.legal-body h4:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 20px; }
.legal-body ul li { margin-bottom: 8px; }
.legal-body strong { color: var(--ivory); font-weight: 500; }
.legal-body a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.legal-body a:hover { color: var(--ivory); border-color: var(--ivory); }
.legal-meta {
  margin-top: 32px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (max-width: 640px) {
  .legal-head, .legal-body { padding-left: 24px; padding-right: 24px; }
  .legal-head h3 { font-size: 22px; }
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  animation: cookieSlide 0.4s ease 0.4s both;
}
@keyframes cookieSlide {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.cookie-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  color: var(--ivory-dim);
  font-size: 13px;
  line-height: 1.6;
}
.cookie-inner strong { color: var(--gold); font-weight: 500; }
.cookie-inner > div:first-child { flex: 1; min-width: 280px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ivory-dim);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.cookie-btn:hover { border-color: var(--ivory); color: var(--ivory); }
.cookie-btn-accept {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.cookie-btn-accept:hover { background: var(--ivory); border-color: var(--ivory); color: var(--bg); }
@media (max-width: 640px) {
  .cookie-inner { padding: 16px; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}

/* WhatsApp float */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 14px 14px;
  background: var(--bg-2);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
}
.wa-float:hover { background: var(--gold); color: var(--bg); }
.wa-float svg { width: 18px; height: 18px; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Tweaks panel */
.tweaks {
  position: fixed;
  right: 22px;
  top: 90px;
  z-index: 70;
  width: 280px;
  background: rgba(20, 17, 14, 0.96);
  border: 1px solid var(--gold);
  backdrop-filter: blur(10px);
  color: var(--ivory);
  font-size: 12px;
  padding: 18px;
  display: none;
}
.tweaks.open { display: block; }
.tweaks h6 {
  margin: 0 0 14px;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.tweaks label {
  display: block;
  margin: 14px 0 6px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tweaks .swatches { display: flex; gap: 8px; }
.tweaks .swatch {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.2s;
}
.tweaks .swatch:hover { transform: scale(1.08); }
.tweaks .swatch.active { outline: 1px solid var(--ivory); outline-offset: 2px; }
.tweaks .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tweaks .opts button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ivory-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
}
.tweaks .opts button.active { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   RESPONSIVE — fixes critiques tous écrans
   1. Pas de scroll horizontal jamais (clip)
   2. min-width: 0 sur tous les enfants de grid pour permettre
      au contenu de rétrécir sous sa taille intrinsèque.
   3. Médias et SVG fluides.
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Tous les enfants directs de grids du site doivent pouvoir
   rétrécir — sinon le contenu force la grille à dépasser. */
.hero-grid > *,
.about-grid > *,
.about-pillars > *,
.philo-intro > *,
.philo-split > *,
.tech-grid > *,
.tiers > *,
.zone-wrap > *,
.testi-grid > *,
.guar-grid > *,
.sec-head > *,
.footer-top > *,
.footer-bottom > * {
  min-width: 0;
  min-height: 0;
}

img, video, svg, iframe { max-width: 100%; }
.container { max-width: 100%; }

/* ============================================================
   TABLET — 720px à 1024px
   Pont entre mobile complet et desktop. Évite l'effet
   « 2 colonnes ratatinées » sur les mid-width.
   ============================================================ */
@media (max-width: 1024px) {
  .about-grid,
  .philo-intro,
  .tech-grid,
  .tiers,
  .zone-wrap,
  .testi-grid {
    grid-template-columns: 1fr !important;
  }
  .about-grid { gap: clamp(28px, 4vw, 56px); }
  .about-visual {
    position: relative !important;
    top: auto !important;
    aspect-ratio: auto;
    max-height: none;
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
  .about-visual .about-photo {
    flex: 1 1 0;
    margin: 0;
  }
  .zone-copy {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .philo-split {
    grid-template-columns: 1fr;
  }
  .philo-split > div:first-child {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .guar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   MOBILE OVERRIDES — phone uniquement (≤ 720px)
   N'altère pas la version desktop. Corrige les superpositions,
   les hauteurs forcées, les images coupées et le débordement.
   ============================================================ */
@media (max-width: 720px) {

  /* --- Base typo & rythme --- */
  body { font-size: 15px; line-height: 1.65; }
  .section { padding: 56px 0; }
  .container { padding-left: 22px; padding-right: 22px; }

  /* --- Header / Nav --- */
  .nav-inner { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .monogram { gap: 10px; }
  .monogram .mark-img { width: 36px; height: 28px; }
  /* Wordmark : on garde le logo entier en réduisant juste la taille
     pour qu'il rentre à côté du bouton Bilan. */
  .monogram .wordmark {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
  }
  .monogram .wordmark small {
    font-size: 7px;
    letter-spacing: 0.22em;
    margin-top: 2px;
  }
  .nav .btn,
  .nav-inner > .btn-solid {
    padding: 9px 12px !important;
    font-size: 9px;
    letter-spacing: 0.16em;
    gap: 8px;
    flex-shrink: 0;
  }

  /* --- Hero ---
     IMPORTANT : on doit casser le `height: 100vh` du desktop, sinon la grille
     1-colonne tente de tenir dans la hauteur d'écran et la photo s'écrase
     (height 0) sous le texte. */
  .hero {
    padding-top: 96px;
    padding-bottom: 48px;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 28px;
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-text { display: block !important; height: auto !important; }
  .hero-text-top {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  .hero-text-bottom { display: block !important; }
  .hero h1 {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.05;
    margin: 14px 0 22px;
  }
  /* Le mot tournant : pas de break, il doit rester sur une seule ligne.
     Si l'un des mots les plus longs ne tient vraiment pas, son scale
     factor (défini dans hero.jsx) le réduit déjà. */
  .hero h1 em {
    max-width: 100%;
    white-space: nowrap;
  }
  .hero .sub {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
  }
  .hero-cta { gap: 12px; margin-top: 28px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-meta {
    margin-top: 28px;
    padding-top: 20px;
    gap: 14px 22px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  /* Photo : on lui donne une hauteur explicite pour que l'aspect-ratio
     ne soit pas écrasé par un parent flex/grid contraint. */
  .hero-visual {
    transform: none !important;
    aspect-ratio: 4/5;
    margin-top: 8px;
    height: auto !important;
    min-height: 360px;
    width: 100%;
  }
  .hero-photo {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* --- Section heads --- */
  .sec-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 36px;
  }
  .sec-head h2 { font-size: 30px; line-height: 1.1; }
  .sec-head .side { padding-top: 0; gap: 12px; }

  /* --- About / Parcours --- *
     Fix critique : la sticky + margin-top négatif faisait
     se superposer la photo au header de section. */
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-visual {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    aspect-ratio: auto;
    display: block !important;
    height: auto !important;
  }
  .about-photo {
    flex: none !important;
    min-height: auto !important;
  }
  .about-photo.about-photo-2 { margin-top: 16px; }
  /* Drop cap proportionné */
  .about-copy p:first-child::first-letter {
    font-size: 42px;
    margin: 6px 8px -2px 0;
  }
  .about-copy p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; }

  /* Pillars : 2 colonnes propres, sans border débordants */
  .about-pillars {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 28px;
  }
  .about-pillars .item {
    padding: 18px 14px !important;
    border-right: 1px solid var(--line) !important;
  }
  .about-pillars .item:nth-child(2n) { border-right: none !important; }
  .about-pillars .item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .about-pillars .item:nth-child(n+3) { border-bottom: none; }
  .about-pillars .k { font-size: 24px; }
  .about-pillars .v { font-size: 10px; letter-spacing: 0.14em; }

  /* --- Philosophy --- */
  .philo-intro { grid-template-columns: 1fr; gap: 24px; }
  .philo-photo { aspect-ratio: 4/3; }
  .philo-split {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }
  .philo-split > div { padding: 24px 22px; }
  .philo-split > div:first-child {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .philo-split .big { font-size: 22px; }
  .philo-split p { font-size: 14px; }
  .philo-quote {
    margin-top: 36px;
    padding-top: 28px;
    font-size: 20px;
    line-height: 1.45;
  }

  /* --- Techniques --- */
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card { padding: 28px 22px; }
  .tech-card h3 { font-size: 24px; margin-top: 36px; }
  .tech-card p { font-size: 14px; }

  /* Disclaim : passe en colonne pour ne plus écraser le tag */
  .disclaim {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px;
    font-size: 13px;
  }
  .disclaim .tag { align-self: flex-start; }

  /* --- Tiers / Gamme --- */
  .tiers { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .tier {
    min-height: auto !important;
    padding: 28px 22px;
  }
  .tier h3 { font-size: 30px; }
  .tier ul li { font-size: 13px; }
  .tier .featured-badge {
    top: -10px;
    right: 16px;
    font-size: 8px;
    padding: 5px 9px;
  }
  /* Espace au-dessus de la carte mise en avant pour ne pas coller à la précédente */
  .tier.featured { margin-top: 6px; }

  /* --- Zone --- */
  .zone-wrap { grid-template-columns: 1fr; }
  .zone-copy {
    padding: 26px 22px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .zone-copy h3 { font-size: 24px; margin: 14px 0 18px; }
  .zone-copy .areas { margin-top: 26px; padding-top: 20px; }
  .zone-copy .areas-label { font-size: 9px; letter-spacing: 0.2em; }
  .zone-copy .areas-list { font-size: 15px; line-height: 1.65; }
  .zone-copy .areas-list i { margin: 0 2px; }
  .zone-map { min-height: 280px; }

  /* --- Témoignages --- */
  .testi-grid { grid-template-columns: 1fr; gap: 16px; }
  .testi {
    min-height: auto !important;
    padding: 26px 22px;
  }
  .testi-body { font-size: 15px; line-height: 1.55; }
  .testi .quote-mark { font-size: 44px; margin-top: 16px; }

  /* --- FAQ --- */
  .faq-q {
    padding: 22px 0;
    font-size: 17px;
    line-height: 1.3;
    gap: 16px;
  }
  .faq-a-inner {
    padding: 0 0 24px;
    padding-right: 0;
    font-size: 14px;
    line-height: 1.7;
  }

  /* --- Garanties --- */
  .guar-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .guar { padding: 22px; }
  .guar h4 { font-size: 19px; }
  .guar p { font-size: 13px; }

  /* --- Final CTA / Calendrier --- */
  .final-cta {
    padding: 64px 22px;
  }
  .final-cta h2 { font-size: 34px; }
  .final-cta .ctas { gap: 12px; }
  .final-cta .ctas .btn { width: 100%; justify-content: center; }
  .final-cta-actions { margin-top: 32px; gap: 14px; }
  .final-cta-actions .btn-wa { width: 100%; justify-content: center; padding: 16px 22px; font-size: 12px; }
  .final-cta-actions .btn-wa .arrow { display: none; }

  /* --- Footer --- */
  .footer { padding: 56px 22px 24px; }
  .footer-top { padding-bottom: 32px; gap: 14px; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  .footer-copy-block { align-items: center; text-align: center; }
  .footer-address {
    font-size: 9px;
    letter-spacing: 0.16em;
    line-height: 1.7;
  }
  .footer-links { gap: 10px; justify-content: center; }

  /* --- Cookie banner --- */
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  .cookie-inner {
    padding: 14px;
    gap: 14px;
    font-size: 12px;
  }
  .cookie-inner > div:first-child { min-width: 0; }

  /* --- WhatsApp float : ne doit pas couvrir le calendrier --- */
  .wa-float {
    right: 12px;
    bottom: 12px;
    padding: 10px 12px 10px 10px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  .wa-float svg { width: 16px; height: 16px; }

  /* --- Tweaks panel : reste accessible mais plus compact --- */
  .tweaks {
    right: 10px;
    top: 76px;
    width: calc(100vw - 20px);
    max-width: 320px;
    padding: 14px;
  }

  /* --- Anti-débordement global --- */
  .container, .footer, .final-cta, .cookie-banner {
    overflow-x: clip;
  }
}

/* Très petits écrans (≤ 380px) — derniers ajustements */
@media (max-width: 380px) {
  .hero h1 { font-size: 34px; }
  .sec-head h2 { font-size: 26px; }
  .final-cta h2 { font-size: 28px; }
  /* Header très étroit : on réduit légèrement le wordmark mais on le garde. */
  .monogram { gap: 8px; }
  .monogram .mark-img { width: 32px; height: 25px; }
  .monogram .wordmark { font-size: 11px; letter-spacing: 0.16em; }
  .monogram .wordmark small { font-size: 6.5px; letter-spacing: 0.18em; }
  .nav .btn,
  .nav-inner > .btn-solid {
    padding: 8px 10px !important;
    font-size: 8.5px;
    letter-spacing: 0.14em;
  }
  .about-pillars { grid-template-columns: 1fr; }
  .about-pillars .item {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .about-pillars .item:last-child { border-bottom: none !important; }
}