/* ============================================================
   INVEST'IMMO — « Le Fil d'Or »
   Holding patrimoniale · refonte éditoriale-luxe
   Direction : ivoire profond · or patrimonial · serif Fraunces
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  /* Neutres */
  --ink:        #0d1014;
  --navy:       #0f1d30;
  --ivory:      #f4efe4;
  --ivory-mid:  #ece5d6;
  --paper:      #fbf8f1;
  --line:       #ddd1bd;
  --muted:      #6c6557;
  --muted-2:    #9a9180;
  --muted-faint:#cdc3b0;

  /* Accent holding : or / patrimoine */
  --gold:        #c2954a;
  --gold-bright: #dcb564;
  --gold-deep:   #9c742f;
  /* Or des petits textes sur fond clair (sur-titres) : --gold-deep assombri
     juste assez. 5,04:1 sur l'ivoire, 4,61 sur --ivory-mid (avant : 3,70 et
     3,38). --gold-deep reste pour les grands titres (3:1 suffit). */
  --gold-text:   #816027;

  /* Filiales — les couleurs propres à chaque société voyagent par --accent,
     posé en style inline sur l'article (voir .soc dans index.html). Seul le
     bleu TDE est repris ici, pour la pastille « par TDE » de la stratégie. */
  --tde-blue: #3dc3ec;

  /* UI dynamiques (basculent clair/sombre via body.over-dark) */
  --nav-fg:    var(--ink);
  --cursor:    var(--ink);
  --thread-bg: rgba(13,16,20,.10);

  --maxw: 1280px;
  --pad: clamp(1.4rem, 5vw, 5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

body.over-dark {
  --nav-fg:    var(--ivory);
  --cursor:    var(--gold-bright);
  --thread-bg: rgba(255,255,255,.12);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
html.lock, body.lock { overflow: hidden; height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }

::selection { background: var(--gold); color: #fff; }

/* Display = Fraunces (serif majestueux) */
h1, h2, h3, .display {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.02;
}

/* Curseur sur-mesure : on masque le natif sur écrans fins */
@media (hover: hover) and (pointer: fine) {
  .cursor-on, .cursor-on * { cursor: none !important; }
}
/* Filet de sécurité : le curseur maison est masqué en mouvement réduit et en
   contraste forcé (voir § MOUVEMENT RÉDUIT) — le pointeur natif doit revenir,
   sinon il n'y a plus de pointeur du tout. */
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .cursor-on, .cursor-on * { cursor: auto !important; }
  .cursor-on a[href], .cursor-on button, .cursor-on [role="button"], .cursor-on summary, .cursor-on label { cursor: pointer !important; }
  .cursor { display: none !important; }
}

/* Lien d'évitement : hors écran, il apparaît au premier Tab. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9600;
  background: var(--ink); color: var(--ivory); padding: .75rem 1.1rem; border-radius: 6px;
  font-weight: 600; font-size: .9rem;
}
.skip-link:focus, .skip-link:focus-visible { left: 1rem; top: 1rem; }
/* Cible focalisée par script (tabindex="-1") : pas de cadre autour du bloc. */
main[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   TEXTURE / GRAIN
   ============================================================ */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CURSEUR SUR-MESURE
   ============================================================ */
.cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none;
  mix-blend-mode: normal; opacity: 0; transition: opacity .4s; }
.cursor.show { opacity: 1; }
.cursor-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cursor); transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s;
}
.cursor-ring {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--cursor); transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease),
              background .35s var(--ease), border-color .35s, opacity .35s;
}
.cursor.hover .cursor-ring { width: 64px; height: 64px; background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: transparent; }
.cursor.hover .cursor-dot { width: 0; height: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   BARRE DE PROGRESSION
   ============================================================ */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; }
.progress-fill { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transform-origin: left; }

/* ============================================================
   FIL D'OR (rail vertical, grands écrans)
   ============================================================ */
.thread {
  position: fixed; top: 0; left: clamp(1rem, 4vw, 4rem);
  width: 80px; height: 100vh; z-index: 4; pointer-events: none;
  overflow: visible;
}
.thread path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.thread-ghost { stroke: var(--thread-bg); transition: stroke .5s; }
.thread-draw  { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(194,149,74,.5)); }
@media (max-width: 1180px) { .thread { display: none; } }

/* ============================================================
   PRÉCHARGEUR / INTRO
   ============================================================ */
/* 800 ms au total (18/10/2026) : compteur 420 ms puis glissement 380 ms
   (script.js, initLoader). Il durait de 2 à 4 s et retardait d'autant
   l'affichage du titre — c'est lui que les moteurs mesurent (LCP). */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--ink); color: var(--ivory);
  overflow: hidden; transition: transform .38s var(--ease);
  /* Filet de secours SANS JavaScript : si script.js ne charge pas ou plante
     avant de lever le rideau, celui-ci s'efface seul à 2,5 s. Le chemin normal
     l'a retiré du document bien avant (vers 1,4 s) : ce filet ne joue jamais. */
  animation: rideauSecours 0s linear 2.5s forwards;
}
@keyframes rideauSecours { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.loader.done { transform: translateY(-100%); pointer-events: none; }
/* Sans JavaScript, ou déjà vu pendant cette visite : pas de rideau (audit du
   17/10/2026). Sans cette garde, un script en échec laissait la page couverte. */
html:not(.js) .loader, .intro-vue .loader { display: none !important; }
.loader-stage { position: relative; z-index: 1; text-align: center; transition: opacity .3s, transform .38s var(--ease); }
.loader.done .loader-stage { opacity: 0; transform: translateY(-30px); }

.loader-mark { width: 64px; height: 64px; margin: 0 auto 1.2rem; display: block; }
/* 36,6 = longueur du tracé du toit (deux rampants de 18,32). Une valeur trop
   courte laisserait le toit à moitié dessiné au repos. */
/* Même chorégraphie qu'avant (toit, battants, lettrage, sous-titre), resserrée
   dans les 420 ms du compteur. */
.loader-mark .lm-roof { stroke-dasharray: 37; stroke-dashoffset: 37; animation: lmRoof .3s var(--ease) .02s forwards; }
.loader-mark .lm-b { transform: scaleY(0); transform-origin: bottom; }
.loader-mark .lm-b1 { animation: lmBar .18s var(--ease) .2s forwards; }
.loader-mark .lm-b2 { animation: lmBar .18s var(--ease) .25s forwards; }
@keyframes lmRoof { to { stroke-dashoffset: 0; } }
@keyframes lmBar { to { transform: scaleY(1); } }

/* Le lettrage du logo officiel, révélé par le bas — l'ancienne animation
   lettre par lettre demandait du texte, celui-ci est une image. */
.loader-mot { overflow: hidden; }
.loader-mot img {
  display: block; margin: 0 auto;
  width: clamp(240px, 62vw, 460px); height: auto;
  transform: translateY(110%); animation: lmWord .3s var(--ease) .1s forwards;
}
@keyframes lmWord { to { transform: translateY(0); } }

.loader-sub {
  margin-top: 1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .28em;
  color: var(--gold-bright); opacity: 0; animation: lmFade .2s ease .22s forwards;
}
@keyframes lmFade { to { opacity: .85; } }

.loader-count {
  position: absolute; right: clamp(1.4rem, 5vw, 4rem); bottom: clamp(1.4rem, 5vw, 3rem);
  z-index: 1; font-family: 'Fraunces', serif; font-size: clamp(2.6rem, 9vw, 5rem);
  letter-spacing: -.03em;
  /* .14 d'opacite rendait le compteur invisible et le faisait echouer au
     controle de contraste. .55 reste discret tout en etant lisible. */
  color: rgba(255,255,255,.55);
}
.loader-count i { font-style: normal; font-size: .42em; color: var(--gold); margin-left: .1em; }

/* ============================================================
   NAVBAR
   ============================================================ */
header { position: fixed; inset: 0 0 auto 0; z-index: 1100; }
/* Le fond flouté de la barre défilée est porté par nav::before, jamais par
   nav elle-même (revue du tour 4) : un backdrop-filter sur nav en faisait le
   bloc conteneur de ses descendants en position: fixed. Le tiroir mobile
   (.nav-links) se dimensionnait alors sur la barre (64 px de haut au lieu de
   l'écran) dès qu'on avait fait défiler la page. Aucun ancêtre du tiroir
   (header, nav) ne doit porter transform, filter, backdrop-filter,
   perspective, contain ou will-change. isolation: isolate garde le pseudo-
   élément (z-index -1) sous le contenu de la barre sans passer sous la page. */
nav {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.7rem var(--pad); color: var(--nav-fg);
  transition: padding .45s var(--ease), color .45s var(--ease);
}
nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0;
  /* Même rythme qu'avant : apparition, puis bascule clair/sombre (over-dark). */
  transition: opacity .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
  background: color-mix(in srgb, var(--ivory) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
body.over-dark nav::before {
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
nav.scrolled { padding: .9rem var(--pad); }
nav.scrolled::before { opacity: 1; }

.brand { display: flex; align-items: center; color: var(--nav-fg); }
.brand-logo { display: block; }
.brand-logo img { display: block; height: 40px; width: auto; }
/* La barre bascule clair/sombre selon la section survolée : on montre le
   verrou dont l'encre contraste avec le fond du moment. */
.brand-logo.sur-sombre { display: none; }
body.over-dark .brand-logo.sur-clair  { display: none; }
body.over-dark .brand-logo.sur-sombre { display: block; }
@media (max-width: 640px) { .brand-logo img { height: 32px; } }

.nav-links { display: flex; align-items: center; gap: 2.4rem; }
.nav-link {
  font-size: .82rem; font-weight: 500; color: var(--nav-fg);
  text-transform: uppercase; letter-spacing: .1em;
  opacity: .65; transition: opacity .25s; position: relative;
}
.nav-link:hover { opacity: 1; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -7px;
  width: 0; height: 1px; background: var(--gold); transition: width .35s var(--ease);
}
.nav-link:hover::after { width: 100%; }

.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid color-mix(in srgb, var(--nav-fg) 35%, transparent); color: var(--nav-fg);
  padding: .6rem 1.3rem; border-radius: 100px;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  transition: background .35s, color .35s, border-color .35s, transform .2s;
}
.nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }  /* blanc sur or : 2,7:1, encre : lisible */

.burger { display: none; flex-direction: column; gap: 6px; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 1101; }
.burger span { width: 26px; height: 1.5px; background: var(--nav-fg); transition: .35s var(--ease); }

@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.8rem;
    background: var(--ink); padding: 2rem clamp(1.6rem, 8vw, 3rem);
    /* Fermé, le panneau est aussi invisible : ses liens sortent du parcours
       clavier. La visibility bascule après le glissement à la fermeture. */
    transform: translateX(100%); visibility: hidden;
    transition: transform .55s var(--ease), visibility 0s linear .55s;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
  .nav-link { opacity: 1; font-size: 1.4rem; letter-spacing: -.01em; text-transform: none;
    font-family: 'Fraunces', serif; color: var(--ivory); }
  .nav-cta { color: var(--ivory); border-color: rgba(255,255,255,.3); font-size: .9rem;
    font-family: 'Inter', sans-serif; }
  .burger { display: flex; }
  .burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); background: var(--ivory); }
  .burger.open span:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); background: var(--ivory); }
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; }
.section { padding: clamp(5rem, 12vw, 11rem) var(--pad); position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .24em;
  color: var(--gold-text); margin-bottom: 1.6rem;
}
.eyebrow.light { color: var(--gold-bright); }
/* Un sur-titre peut être un vrai titre (h2) pour le plan de la page : on
   neutralise ce que la règle h1, h2, h3 lui apporterait (Fraunces, interligne
   serré). Taille, graisse et espacement viennent déjà de .eyebrow. */
h2.eyebrow { font-family: inherit; line-height: inherit; }
.eyebrow.center { justify-content: center; }
.hx-line { width: 34px; height: 1px; background: currentColor; display: inline-block; opacity: .7; }

.s-title { font-size: clamp(2.3rem, 5.6vw, 4.6rem); margin-bottom: 1rem; }
.s-title em { color: var(--gold-deep); }
.s-title.light { color: var(--ivory); }
.s-title.light em { color: var(--gold-bright); }

.lead { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 46ch; }
.lead.light { color: rgba(255,255,255,.62); }

.grid-head {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem 4rem;
  align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
@media (max-width: 860px) { .grid-head { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 1.05rem 1.9rem; border-radius: 100px;
  cursor: pointer; border: 1px solid transparent; transition: all .4s var(--ease);
  white-space: nowrap;
}
.btn svg { transition: transform .4s var(--ease); }
.btn-fill { background: var(--ink); color: var(--ivory); }
.btn-fill:hover { background: var(--gold-deep); }
.btn-fill:hover svg { transform: translateX(4px); }
.btn-line { background: transparent; border-color: color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--ivory); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; padding: 8rem var(--pad) 2.5rem; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(194,149,74,.10), transparent 55%),
    radial-gradient(90% 80% at 10% 90%, rgba(15,29,48,.06), transparent 55%),
    var(--ivory);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.hero-wm {
  position: absolute; right: -2vw; bottom: 4vh; z-index: 1;
  font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(8rem, 30vw, 28rem);
  letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(13,16,20,.06);
  white-space: nowrap; pointer-events: none; user-select: none; line-height: .8;
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin-inline: auto; flex: 1; display: flex; flex-direction: column; justify-content: center; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .8rem; align-self: flex-start;
  font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--gold-text); margin-bottom: 2rem;
}

.hero-title {
  font-size: clamp(3rem, 11vw, 9rem); font-weight: 400; line-height: .98;
  letter-spacing: -.025em; margin-bottom: 2.2rem;
}
.hero-title .line { display: block; overflow: hidden; padding: .04em 0; }
/* Les lignes montent d'elles-mêmes au chargement (18/10/2026), en 600 ms
   au plus : elles attendaient body.ready, donc la fin du préchargeur, et sans
   JavaScript le titre ne s'affichait jamais. « both » tient chaque ligne sous
   son masque pendant son délai. */
.hero-title .line-in { display: block; animation: heroLigne .5s var(--ease) both; }
.hero-title em { font-style: italic; color: var(--gold-deep); }
.hero-title .gold { color: var(--gold-deep); position: relative; }
.hero-title .line:nth-child(2) .line-in { animation-delay: .05s; }
.hero-title .line:nth-child(3) .line-in { animation-delay: .1s; }
@keyframes heroLigne { from { transform: translateY(115%); } to { transform: translateY(0); } }

.hero-desc { font-size: clamp(1.08rem, 1.8vw, 1.4rem); color: var(--muted); max-width: 40ch; margin-bottom: 2.6rem; line-height: 1.55; }
.hero-desc strong { color: var(--ink); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero-foot {
  position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 2.5rem auto 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
.hero-meta { display: flex; align-items: baseline; gap: .8rem; max-width: 30%; }
.hero-meta-r { text-align: right; flex-direction: row-reverse; }
.hm-k { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--gold-deep); line-height: 1; }
.hm-v { font-size: .76rem; color: var(--muted); line-height: 1.35; }

.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }  /* 5,04:1 (--muted-2 : 2,72) */
.sc-line { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.sc-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--gold); animation: scDrop 1.8s var(--ease) infinite; }
@keyframes scDrop { 0% { top: -50%; } 60%,100% { top: 100%; } }
@media (max-width: 700px) { .hero-meta { display: none; } .hero-foot { justify-content: center; } }

/* ============================================================
   MANIFESTE — texte révélé au scroll
   ============================================================ */
.manifesto { padding: clamp(6rem, 16vw, 13rem) var(--pad); background: var(--paper); text-align: center; }
.manifesto-text {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem); line-height: 1.28; letter-spacing: -.015em;
  max-width: 22ch; margin: 1.5rem auto 0;
}
/* L'etat AVANT revelation etait a 1.52:1 sur le creme : illisible tant que
   le defilement n'avait pas atteint le mot. #726b5e passe a 4.61 et garde
   un ecart net avec l'encre pleine une fois le mot revele. */
.manifesto-text .w { color: #726b5e; transition: color .5s var(--ease-soft); }
.manifesto-text .w.lit { color: var(--ink); }
.manifesto-text .w.gold.lit { color: var(--gold-deep); }

/* ============================================================
   LE GROUPE — piliers
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  padding: 2.6rem 1.8rem 2.6rem 0; position: relative;
  border-right: 1px solid var(--line);
}
.pillars .pillar:nth-child(4n) { border-right: 0; }
.pillar { padding-left: 1.8rem; }
.pillar:first-child { padding-left: 0; }
@media (min-width: 561px) and (max-width: 980px) { .pillars .pillar:nth-child(2n) { border-right: 0; } }
@media (max-width: 560px) { .pillar { border-right: 0; border-bottom: 1px solid var(--line); padding: 2rem 0; } }

.pillar::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px;
  background: var(--gold); transition: width .5s var(--ease);
}
.pillar:hover::before { width: 100%; }
.pillar-n {
  font-family: 'Fraunces', serif; font-size: 1.1rem; color: #7a5a1f;  /* 5,53:1 sur l'ivoire (avant : --gold = 2,38) */
  display: block; margin-bottom: 2.4rem;
}
.pillar h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; margin-bottom: .7rem; }
.pillar p { font-size: .92rem; color: var(--muted); }

/* ============================================================
   NOS SOCIÉTÉS — bascule horizontale (scroll pinné)
   ============================================================ */
.societes { position: relative; height: 320vh; background: var(--ink); }
/* overflow: clip et non hidden (revue du tour 4) : hidden fait du bloc un
   conteneur de défilement, que le navigateur fait glisser de côté pour montrer
   un lien focalisé au clavier dans le 2ᵉ panneau (scrollLeft ≈ 1137 px, en
   plus du translate3d) : bande ivoire, compteur faux, pilule coupée. clip
   rogne pareil sans rien laisser défiler ; hidden reste en repli. */
.societes-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
}
.societes-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6.5rem var(--pad) 0;
}
.societes-step { font-family: 'Fraunces', serif; color: var(--muted-2); font-size: 1rem; }
.societes-step b { color: var(--gold-bright); }

.societes-track { display: flex; width: 200%; height: 100%; will-change: transform; }
.soc {
  width: 50%; height: 100%; position: relative;
  display: grid; place-items: center; padding: 8rem var(--pad) 5rem;
}
.soc-bg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-size: clamp(14rem, 42vw, 44rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05);
  pointer-events: none; user-select: none;
}
.soc-tde .soc-bg { -webkit-text-stroke-color: rgba(61,195,236,.08); }

.soc-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1040px;
  display: grid; grid-template-columns: 210px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 820px) { .soc-inner { grid-template-columns: 1fr; gap: 1.6rem; text-align: left; } }

.soc-logo {
  display: grid; place-items: center; justify-self: center;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
/* <picture> sert le WebP et garde le PNG en secours ; il doit occuper toute la
   pastille, sinon l'image reprendrait sa taille naturelle et déborderait. */
.soc-logo picture { display: block; width: 100%; height: 100%; }
.soc-logo img { width: 100%; height: 100%; object-fit: contain; }
/* TDH — pastille ronde noire */
.soc-tdh .soc-logo {
  width: 200px; height: 200px; border-radius: 50%;
  background: #0d1014; padding: 1.25rem;
}
/* TDE — logo agrandi (déjà rond sur fond noir) */
.soc-tde .soc-logo {
  width: 200px; height: 200px; border-radius: 50%;
  background: #0a141f; padding: .35rem;
}
@media (max-width: 820px) {
  .soc-tdh .soc-logo { width: 138px; height: 138px; padding: .95rem; }
  .soc-tde .soc-logo { width: 138px; height: 138px; padding: .3rem; }
}

.soc-tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); margin-bottom: .8rem; }
.soc-name { font-family: 'Fraunces', serif; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: .9; color: #fff; letter-spacing: -.03em; }
.soc-full { font-size: .9rem; letter-spacing: .04em; color: rgba(255,255,255,.5); margin: .4rem 0 1.4rem; text-transform: uppercase; }
.soc-desc { font-size: 1.04rem; color: rgba(255,255,255,.74); max-width: 48ch; margin-bottom: 1.6rem; line-height: 1.6; }
.soc-tdh .soc-desc, .soc-tdh .soc-full { color: rgba(13,16,20,.7); }
.soc-tdh .soc-name { color: var(--ink); }
.soc-tdh { background: linear-gradient(160deg, #fff7ec, #f4efe4); }
.soc-tdh .soc-bg { -webkit-text-stroke-color: rgba(255,140,0,.10); }
.soc-tde { background: linear-gradient(160deg, #0c1826, #0a1018); }

.soc-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.soc-chips span {
  font-size: .76rem; font-weight: 600; padding: .4rem .9rem; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: color-mix(in srgb, var(--accent) 88%, #fff);
}
.soc-tdh .soc-chips span { color: color-mix(in srgb, var(--accent) 75%, #000); }

.soc-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 1rem 1.8rem; border-radius: 100px; color: var(--ink);
  /* Encre foncee et non blanc : sur l'orange de TDH, le blanc ne donne
     que 2.33:1 quand l'encre en donne 8.17. La carte TDE fait deja ainsi. */
  background: var(--accent); transition: transform .4s var(--ease), box-shadow .4s var(--ease), gap .3s;
}
.soc-link:hover { gap: 1rem; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.soc-link svg { transition: transform .4s var(--ease); }
.soc-link:hover svg { transform: translate(3px, -3px); }

/* Lien vers la page détaillée : en bas à droite de l'écran épinglé. Fond or,
   encre foncée (l'accent est posé en ligne), lisible sur les deux cartes. */
.societes-more { position: absolute; right: var(--pad); bottom: 1.6rem; z-index: 5; }
/* En dessous de 1100 px, la pilule (≈ 420 px) rejoindrait les points centrés
   de .societes-hint : on la remonte au-dessus d'eux. */
@media (max-width: 1100px) { .societes-more { bottom: 3.2rem; } }

.societes-hint { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .55rem; z-index: 5; }
.sh-dot { width: 28px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); transition: background .4s; }
.sh-dot.on { background: var(--gold-bright); }

/* Repli mobile : empilé vertical, pas de pin */
@media (max-width: 820px) {
  .societes { height: auto; }
  .societes-sticky { position: relative; height: auto; }
  .societes-track { flex-direction: column; width: 100%; }
  .soc { width: 100%; min-height: 92svh; }
  .societes-head { position: relative; padding: 0 var(--pad); margin: 0 auto; max-width: var(--maxw);
    padding-top: 6rem; padding-bottom: 1rem; }
  .societes-hint { display: none; }
  .societes-more { position: relative; right: auto; bottom: auto; align-self: flex-start; margin: 2.5rem var(--pad) 3.5rem; }
}

/* ============================================================
   CHAÎNE DE VALEUR — sombre
   ============================================================ */
.chain-section { background: var(--ink); color: var(--ivory); }
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 900px) { .chain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .chain { grid-template-columns: 1fr; } }

.step { position: relative; padding: 2.4rem 1.6rem 2.4rem 0; }
.step-rail { position: absolute; left: 0; top: 0; right: 0; height: 1px; background: rgba(255,255,255,.12); }
.step-rail::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--gold-bright); transition: width 1s var(--ease) .15s; }
.step.in .step-rail::after { width: 100%; }
.step-rail::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid rgba(255,255,255,.25); transition: border-color .5s, background .5s; }
.step.in .step-rail::before { background: var(--gold-bright); border-color: var(--gold-bright); }

.step-n { font-family: 'Fraunces', serif; font-size: 2.4rem; color: transparent;
  -webkit-text-stroke: 1px rgba(220,181,100,.5); display: block; margin: 1.6rem 0 1rem; }
.step h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.24rem; margin-bottom: .6rem; }
.step p { font-size: .9rem; color: rgba(255,255,255,.58); }
.step-by { display: inline-block; margin-top: 1.2rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 6px; }
.by-tdh { background: rgba(255,140,0,.16); color: #ffb454; }
.by-tde { background: rgba(61,195,236,.16); color: var(--tde-blue); }
.by-group { background: rgba(220,181,100,.16); color: var(--gold-bright); }
@media (max-width: 520px) { .step { padding-right: 0; } }

/* ============================================================
   CHIFFRES — compteurs
   ============================================================ */
.figures { background: var(--ivory-mid); }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 3.5rem;
  background: var(--line); border: 1px solid var(--line); }
@media (max-width: 820px) { .figs { grid-template-columns: repeat(2, 1fr); } }
.fig { background: var(--ivory-mid); padding: 3rem 1.6rem; text-align: center;
  transition: background .4s var(--ease); }
.fig:hover { background: var(--paper); }
.fig-n { font-family: 'Fraunces', serif; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--ink); }
.fig-n i { font-style: normal; font-size: .42em; color: #7a5a1f;  /* 5,06:1 sur --ivory-mid, 5,98 au survol (avant : --gold-deep = 3,38) */
  margin-left: .12em; vertical-align: super; }
.fig-l { font-size: .82rem; color: var(--muted); margin-top: 1rem; }

/* ============================================================
   CONTACT / CTA — sombre
   ============================================================ */
.cta { background: var(--navy); color: var(--ivory); text-align: center; overflow: hidden; }
.cta-wm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;
  font-family: 'Fraunces', serif; font-size: clamp(6rem, 22vw, 20rem); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.045); white-space: nowrap;
  pointer-events: none; user-select: none; }
.cta-inner { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; }
.cta-pill { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 1.8rem; }
.cta-pill .blink { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,181,100,.5); } 50% { opacity: .4; box-shadow: 0 0 0 6px rgba(220,181,100,0); } }
.cta-title { font-size: clamp(2.6rem, 8vw, 5.5rem); margin-bottom: 1.4rem; }
.cta-title em { color: var(--gold-bright); }
.cta-desc { color: rgba(255,255,255,.66); font-size: 1.1rem; max-width: 46ch; margin: 0 auto 3.4rem; }

.cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; }
@media (max-width: 640px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-c { background: var(--navy); padding: 2rem 1.4rem; }
.cta-c-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-bright); margin-bottom: .8rem; }
.cta-c-val { font-size: .98rem; color: rgba(255,255,255,.85); }

.reveal-btn {
  background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.9);
  font: inherit; font-size: 1rem; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem;
  transition: color .25s; letter-spacing: .01em;
}
.cta-c .reveal-btn { font-family: 'Fraunces', serif; font-size: 1.2rem; }
.reveal-btn:hover { color: var(--gold-bright); }
.reveal-btn .eye { width: 15px; height: 15px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--ink); color: var(--ivory); padding: clamp(4rem, 8vw, 6rem) var(--pad) 0; position: relative; }
footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ft-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 3rem; max-width: var(--maxw);
  margin-inline: auto; padding-bottom: 3.5rem; }
@media (max-width: 880px) { .ft-top { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } }
@media (max-width: 520px) { .ft-top { grid-template-columns: 1fr; } }

.ft-brand { display: flex; align-items: center; margin-bottom: 1.2rem; }
.ft-brand img { display: block; height: 46px; width: auto; }
.ft-tagline { font-size: .92rem; color: rgba(255,255,255,.55); max-width: 38ch; margin-bottom: 1.4rem; }
.ft-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.ft-badge { font-size: .72rem; font-weight: 500; padding: .35rem .8rem; border-radius: 100px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); }

/* h2 depuis le 18/10/2026 (la 404 sautait du h1 au h3) ; h3 garde pour les pages qui l'emploient encore. */
.ft-col h2, .ft-col h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--gold-bright); margin-bottom: 1.3rem; }
.ft-col ul li { margin-bottom: .8rem; }
.ft-col a, .ft-col li, .ft-col .reveal-btn { font-size: .92rem; color: rgba(255,255,255,.6); transition: color .25s; }
.ft-col a:hover { color: var(--gold-bright); }
.ft-col .reveal-btn { color: rgba(255,255,255,.6); font-size: .92rem; padding: 0; font-weight: 400; }
.ft-col .reveal-btn:hover { color: var(--gold-bright); }

.ft-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.8rem 0;
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center;
  max-width: var(--maxw); margin-inline: auto; font-size: .8rem; color: rgba(255,255,255,.45); }
.ft-bottom-end { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.ft-employee { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600;
  color: var(--ivory); padding: .6rem 1.2rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.25); transition: all .35s var(--ease); }
.ft-employee svg { transition: transform .35s var(--ease); }
.ft-employee:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ============================================================
   RÉVÉLATIONS AU SCROLL (amélioration progressive)
   ============================================================ */
.js .reveal-up { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal-up.in { opacity: 1; transform: none; }
.js .reveal-lines { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 8% 0);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), clip-path 1.1s var(--ease); }
.js .reveal-lines.in { opacity: 1; transform: none; clip-path: inset(0 0 -8% 0); }
/* Filet de secours : html.js est posé dans le <head>, AVANT script.js. Si ce
   dernier ne charge pas ou plante avant d'installer l'observateur, ces blocs
   resteraient transparents pour toujours. script.js pose html.reveal-ok dès
   l'observateur en place ; sans elle, tout réapparaît à 1,5 s. */
@keyframes revealSecours { to { opacity: 1; transform: none; clip-path: none; } }
.js:not(.reveal-ok) .reveal-up,
.js:not(.reveal-ok) .reveal-lines { animation: revealSecours 0s linear 1.5s forwards; }

/* stagger automatique pour grappes d'enfants .reveal-up */
.js .pillars .reveal-up.in:nth-child(2) { transition-delay: .08s; }
.js .pillars .reveal-up.in:nth-child(3) { transition-delay: .16s; }
.js .pillars .reveal-up.in:nth-child(4) { transition-delay: .24s; }
.js .chain .reveal-up.in:nth-child(2) { transition-delay: .1s; }
.js .chain .reveal-up.in:nth-child(3) { transition-delay: .2s; }
.js .chain .reveal-up.in:nth-child(4) { transition-delay: .3s; }
.js .figs .reveal-up.in:nth-child(2) { transition-delay: .08s; }
.js .figs .reveal-up.in:nth-child(3) { transition-delay: .16s; }
.js .figs .reveal-up.in:nth-child(4) { transition-delay: .24s; }

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .loader { display: none !important; }
  .reveal-up, .reveal-lines, .js .reveal-up, .js .reveal-lines { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-title .line-in { transform: none !important; animation: none !important; }
  .societes-more { position: relative !important; right: auto !important; bottom: auto !important; align-self: flex-start; margin: 2.5rem var(--pad) 3.5rem; }
  .manifesto-text .w { color: var(--ink) !important; }
  .cursor, .thread { display: none !important; }
  .societes { height: auto !important; }
  .societes-sticky { position: relative !important; height: auto !important; }
  .societes-track { flex-direction: column !important; width: 100% !important; transform: none !important; }
  .soc { width: 100% !important; min-height: 90svh; }
}

/* Une adresse e-mail dévoilée ne déborde pas d'un écran de 360 px (relecture du 17/10/2026). */
.reveal-btn .value { overflow-wrap: anywhere; }