/* =========================================================
   IKECHIMA HOLDING INC — « STRUCTURE »
   Quatre piliers, une seule structure.
   Système visuel dérivé du logo : barres modulaires, losange,
   arêtes vives, aplats bleus massifs, jaune en signal.
   ========================================================= */

:root {
  /* Couleurs de marque */
  --blue:      #0e74bb;   /* bleu du losange */
  --blue-d:    #0a5891;
  --blue-l:    #2a90d8;
  --yellow:    #fbea36;   /* jaune du « H » — signal rare */
  --yellow-d:  #e2d016;

  /* Neutres */
  --ink:    #0b1620;
  --ink-2:  #12212e;
  --paper:  #ffffff;
  --mist:   #f1f5f8;
  --muted:  #5d6b78;
  --muted-l: rgba(255, 255, 255, .68);

  --line:   rgba(11, 22, 32, .14);
  --line-l: rgba(255, 255, 255, .18);

  /* Typographie */
  --display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --text:    "Inter", system-ui, -apple-system, sans-serif;

  /* Bleu profond du voile du hero (teinte sombre du bleu de marque) */
  --hero-veil: 6, 38, 66;

  --header-h: 90px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--yellow); color: var(--ink); }

.shell { width: min(1320px, 100% - 48px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* Titres de section : 40 px fixes (le hero garde sa propre échelle).
   En dessous de 620 px, on redescend pour éviter les débordements. */
.h-display { font-size: 40px; color: var(--ink); }
.h-display--light { color: var(--paper); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 26px;
}
.eyebrow--light { color: var(--yellow); }

/* Losange : motif signature repris du logo */
.dmd {
  width: 9px; height: 9px;
  background: currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.55; }

/* ---------- Icônes ---------- */
.ico {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ico .fill { fill: currentColor; stroke: none; }
.socials .ico, .fab--wa .ico { fill: currentColor; stroke: none; }

/* ---------- Boutons : rectangulaires, arêtes vives ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px;
  border: 2px solid var(--blue);
  border-radius: 2px;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-size: .92rem; font-weight: 500;
  letter-spacing: -.01em;
  position: relative; overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
/* Remplissage au survol : jaune de la marque (et non plus noir).
   Le texte passe en encre, seul contraste lisible sur ce jaune. */
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleY(1); }
.btn:hover { border-color: var(--yellow); color: var(--ink); }
.btn .ico { transition: transform .35s var(--ease); }
.btn:hover .ico { transform: translateX(5px); }

/* Bouton déjà jaune : un jaune plus soutenu, sinon le survol ne se voit pas */
.btn--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn--yellow::before { background: var(--yellow-d); }
.btn--yellow:hover { border-color: var(--yellow-d); color: var(--ink); }

.btn--outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn--outline.btn--light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--outline:hover, .btn--outline.btn--light:hover { border-color: var(--yellow); color: var(--ink); }

.btn--sm { padding: 12px 20px; font-size: .85rem; }

/* ---------- Cadre visuel ----------
   Plus aucune teinte bleue : les photos sont rendues en couleurs réelles.
   .dt ne sert plus qu'à cadrer l'image (recadrage + débordement masqué). */
.dt { position: relative; overflow: hidden; background: var(--ink-2); }
.dt img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- États d'animation ----------
   IMPORTANT : aucun état « masqué » n'est déclaré en CSS. C'est GSAP qui
   pose l'état initial (fromTo, rendu immédiat) et qui le retire. Ainsi,
   si GSAP ne se charge pas ou ne tourne pas, RIEN n'est jamais invisible. */
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line__in { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { display: none !important; }
  .scrollcue { animation: none !important; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand img { height: 64px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__link {
  position: relative;
  font-family: var(--display);
  font-size: .9rem; font-weight: 500;
  color: var(--ink);
  padding: 4px 0;
  transition: color .25s ease;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover { color: var(--blue); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--blue); }
.nav__link--cta { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 14px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; gap: 7px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 2px;
}
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(60px, 9vh, 110px) 0 0;
  background: rgb(var(--hero-veil));
  color: #fff;
  overflow: hidden;
}

/* Diaporama : un visuel par pôle, fondu enchaîné + léger zoom */
/* Le conteneur déborde volontairement du hero (haut et bas) : le parallax
   le décale verticalement, et sans cette marge il découvrirait une bande
   noire sous le header. */
.hero__slides { position: absolute; left: 0; right: 0; top: -10%; height: 120%; z-index: 0; }
.hslide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hslide.is-on { opacity: 1; }
.hslide img {
  width: 100%; height: 100%; object-fit: cover;
  /* Fond bleu assumé : images assombries et désaturées pour laisser
     toute la place au texte. */
  filter: grayscale(.18) brightness(.74) contrast(1.06);
}
.hslide.is-on img { animation: hzoom 9s ease-out both; }
@keyframes hzoom { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Voile : bleu dense à gauche (sous le texte), transparent à droite */
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Écran appuyé sous le texte (gauche), quasi nul à droite : le visuel
       reste lumineux sans jamais compromettre la lisibilité du titre. */
    linear-gradient(95deg,
      rgba(var(--hero-veil), .92) 0%,
      rgba(var(--hero-veil), .82) 28%,
      rgba(var(--hero-veil), .52) 50%,
      rgba(var(--hero-veil), .18) 72%,
      rgba(var(--hero-veil), .06) 100%),
    linear-gradient(180deg,
      rgba(var(--hero-veil), .48) 0%,
      rgba(var(--hero-veil), .06) 32%,
      rgba(var(--hero-veil), .74) 100%);
}

.hero__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Les blocs de texte se superposent : un seul visible à la fois.
   Hauteur figée sur le conteneur — sans elle, la bascule absolute/relative
   ferait sauter les boutons à chaque changement de slide. */
.hero__texts { position: relative; min-height: clamp(290px, 36vh, 430px); }
.htext {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.htext.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.htext__num {
  display: inline-block;
  font-family: var(--display); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 18px;
}

.hero__title {
  font-size: clamp(2.6rem, 7.4vw, 6.2rem);
  color: #fff;
  margin-bottom: clamp(18px, 2.6vh, 28px);
}
.hero__title em { font-style: normal; color: var(--yellow); }

.hero__lede { max-width: 50ch; font-size: clamp(1rem, 1.35vw, 1.16rem); color: rgba(255,255,255,.76); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(26px, 4vh, 44px); }

/* Index modulaire des pôles = navigation du diaporama (barres du logo) */
.hero__index {
  position: relative; z-index: 2;
  width: min(1320px, 100% - 48px); margin: clamp(30px, 5vh, 56px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hidx { border-right: 1px solid rgba(255,255,255,.16); }
.hidx:last-child { border-right: 0; }
.hidx button {
  position: relative;
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  text-align: left;
  padding: 18px 18px 24px;
  transition: background .35s var(--ease);
}
.hidx button:hover { background: rgba(255,255,255,.07); }
.hidx b {
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; color: rgba(255,255,255,.5);
  transition: color .35s var(--ease);
}
.hidx span {
  font-family: var(--display); font-size: clamp(.82rem, 1.1vw, .98rem);
  font-weight: 500; color: rgba(255,255,255,.62);
  transition: color .35s var(--ease);
}
.hidx.is-on b { color: var(--yellow); }
.hidx.is-on span { color: #fff; }

/* Barre de progression du slide actif */
.hidx__bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--yellow);
  transform: scaleX(0); transform-origin: left center;
}

.scrollcue {
  position: absolute; z-index: 3; right: 24px; bottom: 18px;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  color: #fff;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* =========================================================
   Bande défilante
   ========================================================= */
.strip {
  overflow: hidden; white-space: nowrap;
  background: var(--ink); color: #fff;
  border-block: 1px solid rgba(255,255,255,.12);
  padding: 16px 0;
}
.strip__track { display: inline-flex; animation: strip 32s linear infinite; }
.strip__track span {
  font-family: var(--display); font-size: 1.05rem; font-weight: 500;
  letter-spacing: -.01em; padding-right: .4em;
}
.strip__track i {
  display: inline-block; width: 7px; height: 7px; margin: 0 .8em;
  background: var(--yellow); transform: rotate(45deg);
}
@keyframes strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* =========================================================
   2. MANIFESTE
   ========================================================= */
.manifesto { padding: clamp(80px, 12vw, 160px) 0; background: var(--paper); }
.manifesto__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 90px); align-items: start;
}
.manifesto__media { aspect-ratio: 3 / 4; }
.manifesto__body > * + * { margin-top: 22px; }
.manifesto__body .h-display { margin-bottom: 34px; }
.manifesto__body p { color: var(--muted); max-width: 56ch; }

.ticks { display: grid; gap: 12px; margin-top: 30px !important; }
.ticks li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-size: .96rem; font-weight: 500; color: var(--ink);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.ticks .ico { color: var(--blue); }
.manifesto__body .btn { margin-top: 34px !important; }

/* =========================================================
   3. LES 4 PÔLES — grille de cartes
   Structure reprise de la référence : visuel en haut, puis icône,
   titre, description et lien. Angles nets (2px), conformes au reste
   du site plutôt qu'aux coins arrondis de la référence.
   ========================================================= */
.poles {
  position: relative; overflow: hidden;
  padding: clamp(90px, 13vw, 165px) 0;
  background: rgb(var(--hero-veil)); color: #fff;
}
/* Photo de fond, franche en haut puis dissoute : la grille se lit
   ensuite sur un fond parfaitement net. */
.poles::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/construction-site.webp") center top / cover no-repeat;
  opacity: .62;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 52%);
          mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 52%);
}
.poles::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    rgba(var(--hero-veil), .60) 0%,
    rgba(var(--hero-veil), .84) 26%,
    rgba(var(--hero-veil), .97) 52%,
    rgba(var(--hero-veil), 1)  100%);
}
.poles > .shell { position: relative; z-index: 1; }

/* En-tête sur deux colonnes : accroche à gauche, chapô à droite */
.poles__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(46px, 6vw, 76px);
}
.poles__intro {
  color: var(--muted-l);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  max-width: 52ch;
  padding-bottom: .4em;
}

.poles__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.pole {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 2px;
  overflow: hidden;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.pole:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-4px);
}

.pole__media { display: block; aspect-ratio: 16 / 11; }

.pole__body {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1;
  padding: clamp(20px, 1.8vw, 28px);
}
.pole__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 16px;
  background: var(--yellow); color: var(--ink);
  border-radius: 2px;
}
.pole__icon .ico { width: 1.25em; height: 1.25em; }

/* Numéro discret, calé en haut à droite de la carte */
.pole__num {
  position: absolute; top: clamp(20px, 1.8vw, 28px); right: clamp(20px, 1.8vw, 28px);
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; color: rgba(255, 255, 255, .38);
}

.pole__title { font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: #fff; margin-bottom: 12px; }
.pole__desc {
  color: var(--muted-l); font-size: .94rem; line-height: 1.6;
  margin-bottom: 22px;
}

/* Le lien reste collé en bas : toutes les cartes s'alignent */
.pole__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: auto;
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow);
  transition: gap .3s var(--ease);
}
.pole:hover .pole__cta { gap: 15px; }

/* =========================================================
   4. RÉALISATIONS
   ========================================================= */
.reas { padding: clamp(80px, 12vw, 150px) 0; background: var(--mist); }
.reas__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 60px);
}

/* Filtres : rectangulaires, arêtes vives, cohérents avec les boutons */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 2px;
  background: transparent;
  font-family: var(--display); font-size: .84rem; font-weight: 500;
  color: var(--muted);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
.filter.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.reas__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.rea { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.rea__media { aspect-ratio: 4 / 3; }
.rea__body { padding: 20px 20px 24px; }
.rea__tag {
  display: inline-block;
  font-family: var(--display); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.rea__title { font-size: 1.16rem; color: var(--ink); margin-bottom: 6px; }
.rea__meta { font-size: .88rem; color: var(--muted); }

/* Carte masquée par le filtre : retirée du flux après l'animation */
.rea.is-hidden { display: none; }

.reas__empty {
  margin-top: 30px; padding: 26px;
  border: 1px dashed var(--line); border-radius: 2px;
  text-align: center; color: var(--muted);
}

/* =========================================================
   Carte (sous le contact)
   ========================================================= */
.mapsec { background: var(--ink); }
.mapsec__frame { position: relative; height: clamp(320px, 46vw, 520px); }
/* Repère visible tout de suite, puis effacé quand la carte a répondu */
.mapsec__ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink-2);
  color: rgba(255, 255, 255, .7);
  font-family: var(--display); font-size: .9rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .5s var(--ease);
}
.mapsec__ph .ico { width: 1.8em; height: 1.8em; color: var(--yellow); }
.mapsec__frame.is-ready .mapsec__ph { opacity: 0; pointer-events: none; }

.mapsec__frame iframe {
  position: relative; z-index: 2;
  width: 100%; height: 100%; border: 0; display: block;
  /* Harmonise la carte avec la charte : légèrement désaturée */
  filter: grayscale(.35) contrast(1.05);
  opacity: 0; transition: opacity .6s var(--ease);
}
.mapsec__frame.is-ready iframe { opacity: 1; }

/* =========================================================
   5. CHIFFRES CLÉS
   ========================================================= */
/* Bloc dense sur fond bleu : la version claire manquait de tenue.
   Chiffres en jaune, séparateurs francs, pas de filet orphelin. */
.figures {
  position: relative; overflow: hidden;
  padding: clamp(64px, 9vw, 110px) 0;
  background: var(--blue); color: #fff;
}
/* Losanges décoratifs (motif du logo), déplacés au scroll */
.figures__dmd {
  position: absolute; z-index: 0;
  background: rgba(255,255,255,.07);
  transform: rotate(45deg);
  pointer-events: none;
}
.figures__dmd--a { width: 340px; height: 340px; top: -140px; right: -90px; }
.figures__dmd--b { width: 220px; height: 220px; bottom: -110px; left: 6%; background: rgba(251,234,54,.1); }

.figures .shell { position: relative; z-index: 1; }
.figures__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-bottom: clamp(34px, 5vw, 56px);
}
.figures__top .eyebrow { margin-bottom: 0; }
.figures__intro { max-width: 46ch; color: rgba(255,255,255,.78); font-size: .98rem; }

.figures__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.2);          /* les gouttières font les filets */
  border: 1px solid rgba(255,255,255,.2);
}
.fig {
  background: var(--blue);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
}
/* Icône en tête de chaque statistique */
.fig__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 2px;
  color: var(--yellow);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.fig__icon .ico { width: 1.35em; height: 1.35em; }
.fig:hover .fig__icon { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

.fig__num {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: .9; letter-spacing: -.045em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.fig__label {
  display: block;
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  color: #fff; margin-bottom: 6px;
}
.fig__note {
  display: block; font-size: .82rem; line-height: 1.45;
  color: rgba(255,255,255,.62);
}

/* =========================================================
   6. MÉTHODE
   ========================================================= */
.method {
  position: relative; overflow: hidden;
  padding: clamp(80px, 12vw, 160px) 0;
  background: rgb(var(--hero-veil)); color: #fff;
}
/* Visuel de chantier en fond, très atténué : donne de la profondeur
   sans nuire à la lisibilité des étapes. */
.method::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/construction.webp") center / cover no-repeat;
  opacity: .18; filter: grayscale(.55) contrast(1.05);
}
.method::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(var(--hero-veil), .58) 0%, rgba(var(--hero-veil), .87) 100%);
}
.method .shell { position: relative; z-index: 1; }
.method__head { margin-bottom: clamp(44px, 6vw, 80px); }
.steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.step {
  display: flex; gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-l); border-radius: 2px;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.step:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.34); }
.step__n {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--yellow); flex-shrink: 0;
}
.step h3 { font-size: 1.28rem; color: #fff; margin-bottom: 8px; }
.step p { color: var(--muted-l); font-size: .96rem; }

/* =========================================================
   7. CTA + CONTACT
   ========================================================= */
.contact {
  position: relative; overflow: hidden;
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--blue); color: #fff;
}
/* Visuel d'échange en fond, très atténué sous l'aplat bleu : donne de la
   matière sans toucher au contraste du formulaire. */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/contact-bg.webp") center / cover no-repeat;
  opacity: .16; filter: grayscale(.45) contrast(1.05);
}
.contact > .shell { position: relative; z-index: 1; }
.contact__head { margin-bottom: clamp(40px, 6vw, 70px); }
.contact__title { font-size: 40px; color: #fff; }

.contact__grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
}

.cinfo { display: grid; gap: 22px; border-top: 1px solid var(--line-l); padding-top: 26px; }
.cinfo__k {
  display: block;
  font-family: var(--display); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 6px;
}
.cinfo__v { color: #fff; font-size: .98rem; }
.cinfo__v--lg { font-family: var(--display); font-size: 1.16rem; font-weight: 500; transition: color .3s ease; }
a.cinfo__v--lg:hover { color: var(--yellow); }

.socials { display: flex; gap: 10px; margin-top: 30px; }
.socials a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-l); border-radius: 2px; color: #fff;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* Formulaire */
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--display); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 16px;
  font-family: var(--text); font-size: .96rem; font-weight: 300;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line-l); border-radius: 2px;
  transition: border-color .3s ease, background .3s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.45); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--yellow); background: rgba(255,255,255,.13);
}
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--ink); color: #fff; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.cform__status { display: none; margin-bottom: 16px; padding: 13px 16px; border-radius: 2px; font-size: .9rem; }
.cform__status.is-error { display: block; background: rgba(255,255,255,.14); border-left: 3px solid #ff6b5e; color: #fff; }
.cform__status.is-success { display: block; background: rgba(251,234,54,.16); border-left: 3px solid var(--yellow); color: #fff; }

.cform__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cform__note { margin-top: 16px; font-size: .8rem; color: rgba(255,255,255,.6); }

/* =========================================================
   Footer
   ========================================================= */
/* Fond volontairement plus clair que --ink (#0b1620), qui rendait le pied
   de page presque noir. Teinte légèrement bleutée, cohérente avec la charte. */
.site-footer { background: #17293a; color: var(--muted-l); padding: clamp(56px, 8vw, 90px) 0 28px; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--line-l);
}
.site-footer__logo { height: 76px; width: auto; margin-bottom: 18px; }
.site-footer__brand p { max-width: 36ch; font-size: .92rem; }
.site-footer__col h4 {
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 18px;
}
.site-footer__col a, .site-footer__addr {
  display: block; font-size: .92rem; margin-bottom: 11px;
  transition: color .25s ease;
}
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; padding-top: 24px;
  font-size: .84rem;
}
.site-footer__legal { display: flex; gap: 22px; }
.site-footer__legal a:hover { color: #fff; }

/* =========================================================
   Boutons flottants + curseur
   ========================================================= */
.fab {
  position: fixed; right: 22px; z-index: 90;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 2px;
  color: #fff;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.fab--wa { bottom: 22px; background: #25d366; }
.fab--wa:hover { transform: translateY(-3px); }
.fab--top {
  bottom: 86px; background: var(--ink);
  opacity: 0; pointer-events: none;
}
.fab--top.is-visible { opacity: 1; pointer-events: auto; }
.fab--top:hover { background: var(--blue); transform: translateY(-3px); }

/* Barre de progression de lecture (injectée par le JS) */
.readbar {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 3px;
  background: var(--yellow);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}

.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease),
              background .28s var(--ease), border-color .28s var(--ease), opacity .3s ease;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hover {
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  background: rgba(251, 234, 54, .22); border-color: var(--yellow);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =========================================================
   Responsive
   ========================================================= */

/* Laptop */
@media (max-width: 1180px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* Tablette */
@media (max-width: 1024px) {
  .shell { width: min(1320px, 100% - 40px); }
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__media { aspect-ratio: 16 / 10; max-height: 420px; }
  .poles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poles__head { grid-template-columns: 1fr; align-items: start; }
  .poles__intro { padding-bottom: 0; }
  .steps { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reas__head { align-items: flex-start; }
  .figures__top { align-items: flex-start; }
}

/* Les pôles repassent en empilement vertical natif — jamais un scroll
   horizontal rétréci. Le JS désactive le pin en dessous de 900px. */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 26px;
    transform: translateY(-120%);
    transition: transform .45s var(--ease);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav__link { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__link--cta { display: block; }
  .nav__link::after { display: none; }
  .burger { display: flex; }
  .site-header__actions .btn { display: none; }


  .hero__index { grid-template-columns: repeat(2, 1fr); }
  .hidx:nth-child(2) { border-right: 0; }
  .hidx:nth-child(-n+2) { border-bottom: 1px solid var(--line-l); }
  .scrollcue { display: none; }
}

/* Mobile */
@media (max-width: 620px) {
  .shell { width: min(1320px, 100% - 32px); }
  body { font-size: 15px; }
  /* 40 px dépasseraient la largeur utile : les lignes de titre sont en
     overflow:hidden, le texte serait coupé net. */
  .h-display, .contact__title { font-size: 29px; }
  .brand img { height: 52px; }
  .hero { min-height: auto; padding-bottom: 40px; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .poles__grid { grid-template-columns: 1fr; }
  .figures__grid { grid-template-columns: 1fr; }
  .strip__track span { font-size: .92rem; }
  .reas__grid { grid-template-columns: 1fr; }
  .filters { width: 100%; }
  .cform__row { grid-template-columns: 1fr; gap: 0; }
  .cform__actions .btn { width: 100%; justify-content: center; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .fab { right: 16px; }
  .fab--wa { bottom: 16px; }
  .fab--top { bottom: 76px; }
}