/* mm-origin - styles de la page d'accueil (FR et EN). Hérite de /style.css. */
/* ============================================================
   Accueil. Ouverture « Le relief » (relief.js), reprise d'une offre mm-origin.
   Hérite de /style.css (palette Mur bleu, Lausanne, nav, boutons, sections).
   ============================================================ */

/* ---------- Ouverture ---------- */
.hero2 { position:relative; overflow:hidden; color:var(--ivory);
  background:
    radial-gradient(900px 620px at 82% 30%, color-mix(in srgb, var(--glow) 80%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #071290 0%, var(--night) 46%, var(--deep) 100%); }
.stage { position:relative; min-height:max(100svh, 760px); display:flex; flex-direction:column; overflow:hidden; }
.stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,15,134,.46) 0%, rgba(5,15,134,.18) 40%, transparent 62%); }
.hero2 .hero-in { position:relative; z-index:2; padding-top:clamp(130px, 17vh, 170px); padding-bottom:40px; flex:1 0 auto;
  max-width:none; margin:0; padding-left:max(clamp(20px, 6.5vw, 110px), env(safe-area-inset-left, 0px)); padding-right:20px; }
.hero2 .hero-in > * { max-width:min(720px, 55vw); }
.hero2 .kicker { margin-bottom:0; }
.hero2 h1 { margin-top:clamp(26px, 4.5vh, 48px); font-weight:600; font-size:clamp(2.5rem, 4.4vw, 4rem);
  line-height:1.02; letter-spacing:-.025em; max-width:16ch; }
.hero2 h1 .alt { display:block; color:var(--accent-2); }
.hero2 h1 .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.hero2 h1 .w > span { display:inline-block; }
.hero2 .sub { margin-top:26px; max-width:42ch; font-size:clamp(1.04rem, 1.45vw, 1.22rem); line-height:1.65; color:var(--mist); }
.hero2 .sub strong { color:var(--ivory); font-weight:400; }
.hero2 h1, .hero2 .sub, .hero2 .kicker { text-shadow:0 2px 22px rgba(5,15,134,.85), 0 1px 3px rgba(5,15,134,.6); }
.cta-h { margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.cue { position:absolute; left:50%; bottom:22px; z-index:2; width:22px; height:38px; margin-left:-11px;
  border:1.5px solid color-mix(in srgb, var(--ivory) 45%, transparent); border-radius:12px; }
.cue span { position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px;
  background:var(--accent-2); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform:translateY(0); opacity:1 } 70% { transform:translateY(13px); opacity:0 } 100% { opacity:0 } }

/* sans WebGL : le repère de la page actuelle */
.axes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9; }
.hero2.gl .axes { display:none; }

/* le relief : WebGL et calque 2D, étiquettes posées par le module */
.relief { position:absolute; inset:0; display:none; pointer-events:none; --rs:1; }
.hero2.gl .relief { display:block; }
.relief canvas { position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
.rl { position:absolute; left:0; top:0; width:0; height:0; z-index:2; }
.rl .in { position:absolute; left:0; top:0; display:flex; flex-direction:column; white-space:nowrap;
  text-shadow:0 2px 16px rgba(5,15,134,.9), 0 1px 3px rgba(5,15,134,.6);
  opacity:0; transform:translateY(10px); transition:opacity .6s ease .12s, transform .8s cubic-bezier(.2,.8,.2,1) .12s; }
.rl.on .in { opacity:1; transform:none; }
.rl .k { font-size:calc(12.5px * var(--rs)); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-2); line-height:1.3; }
.rl .v { font-size:calc(22px * var(--rs)); font-weight:600; color:var(--ivory); line-height:1.2; margin-top:2px; }
.rl .x { font-size:calc(48px * var(--rs)); font-weight:600; color:var(--accent-2); letter-spacing:-.02em; line-height:1.02; }
.rl .s { font-size:calc(14px * var(--rs)); color:var(--mist); line-height:1.4; }

/* chorégraphie d'entrée, seulement avec JS ; ?static et mouvement réduit montrent l'état final */
.js .hero2 .kicker { opacity:0; transition:opacity .9s ease .3s; }
.js .hero2 h1 .w > span { transform:translateY(108%); transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i) * .075s); }
.js .hero2 .sub, .js .hero2 .cta-h, .js .hero2 .cue { opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.js .hero2 .sub { transition-delay:1.1s; } .js .hero2 .cta-h { transition-delay:1.25s; } .js .hero2 .cue { transition-delay:3.4s; }
.js .hero2.go .kicker, .js .hero2.go .sub, .js .hero2.go .cta-h, .js .hero2.go .cue { opacity:1; transform:none; }
.js .hero2.go h1 .w > span { transform:none; }
.hero2.rush * { transition-duration:.35s !important; transition-delay:0s !important; }
.hero2.still * { transition:none !important; }
.hero2.still .cue span { animation:none; }

/* la bande des preuves */
.hero-low { position:relative; z-index:2; padding-top:8px; padding-bottom:clamp(56px, 7vw, 88px); }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line-d); }
.stats > div { padding:22px 22px 0 0; display:grid; gap:8px; align-content:start; }
.stats > div + div { padding-left:22px; border-left:1px solid var(--line-d); }
.stats b { font-size:clamp(1.9rem, 3.4vw, 2.7rem); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--accent-2); font-variant-numeric:tabular-nums; }
.stats span { font-size:.92rem; color:var(--mist); line-height:1.5; }
.stats b span { font-size:inherit; color:inherit; line-height:inherit; }

@media (max-width:1000px) {
  .stats { grid-template-columns:1fr 1fr; row-gap:22px; }
  .stats > div:nth-child(3) { padding-left:0; border-left:0; }
}
@media (max-width:760px) {
  .stage { min-height:0; }
  .relief { position:relative; inset:auto; order:2; width:100%; aspect-ratio:4/3; margin-top:8px; }
  .rl { display:none; }
  .hero2.gl .stage::after { display:none; }
  .hero2 .hero-in { padding-top:120px; padding-bottom:8px; }
  .hero2 .hero-in > * { max-width:none; }
  .cue { display:none; }
}
@media (max-width:520px) {
  .stats { grid-template-columns:1fr; }
  .stats > div { padding-left:0 !important; border-left:0 !important; }
}

/* ---------- Une équipe, ou un associé ? ---------- */
.portes-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .9fr); gap:clamp(32px, 6vw, 96px); align-items:end; }
.portes-head .prose p { margin-bottom:0; }
.doors { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; }
.door { padding:clamp(28px, 3.4vw, 44px); border:1px solid var(--line-l); background:var(--ivory);
  display:flex; flex-direction:column; gap:18px; min-width:0; }
.door.mm { background:var(--night); color:var(--ivory); border-color:var(--night); }
.door .who { font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.door.mm .who { color:var(--mist); }
.door h3 { font-size:clamp(1.9rem, 3.2vw, 2.5rem); font-weight:600; letter-spacing:-.015em; line-height:1.05; }
.door h3 .dot { display:inline-block; width:.32em; height:.32em; border-radius:50%; background:var(--accent); margin-right:.3em; vertical-align:.12em; }
.door .l { font-size:1.16rem; line-height:1.5; max-width:34ch; }
.door.mm .l { color:var(--ivory); }
.door ul { list-style:none; display:grid; gap:11px; border-top:1px solid var(--line-l); padding-top:20px; color:var(--ink-soft); font-size:.97rem; line-height:1.5; }
.door.mm ul { border-color:var(--line-d); color:var(--mist); }
.door li { display:grid; grid-template-columns:16px 1fr; gap:6px; }
.door li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ink); margin-top:.62em; }
.door.mm li::before { background:var(--accent); }
.door .door-cta { margin-top:auto; padding-top:10px; }
.door .ext { font-weight:600; font-size:.9rem; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:2px; }
.doors-note { margin-top:30px; max-width:72ch; font-size:1.02rem; line-height:1.7; color:var(--ink); }
.doors-note b { font-weight:600; }
@media (max-width:860px) { .portes-head, .doors { grid-template-columns:1fr; } }

/* ---------- Le blog, en bas de page ---------- */
.sec-blog { padding:clamp(56px, 7vw, 90px) 0; border-top:1px solid var(--line-l); }
.sec-blog .post-list { margin-top:8px; }


.hero2 h1 .nw { white-space:nowrap; }
/* ---------- L'ouverture s'aligne sur le logo et sur le reste de la page, à toutes les tailles ---------- */
.hero2 .hero-in { max-width:var(--w); width:100%; margin:0 auto; padding-left:clamp(20px, 4vw, 48px); padding-right:clamp(20px, 4vw, 48px); }
.hero2 .hero-in > * { max-width:min(860px, 62vw); }
.hero2 h1 { max-width:none; }
.hero2 .sub { max-width:44ch; }
@media (max-width:760px) { .hero2 .hero-in > * { max-width:none; } }

/* ---------- Navigation : six entrées, repli plus tôt ---------- */
@media (max-width:1120px) { .nav-links { display:none; } }

/* ---------- Comment ça marche ---------- */
.deal-head { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(32px, 6vw, 96px); align-items:end; }
.deal-head h2 { max-width:16ch; }
.deal-head .prose p:last-child { margin-bottom:0; }
.eq { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap:0 16px; margin-top:60px; align-items:stretch; }
.eq-op { align-self:center; font-size:2.3rem; font-weight:300; line-height:1; color:color-mix(in srgb, var(--ink) 40%, transparent); }
.eq-card { border:1px solid var(--line-l); background:var(--ivory); padding:clamp(24px, 2.6vw, 34px); display:flex; flex-direction:column; gap:12px; min-width:0; }
.eq-card .who { font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.eq-card h3 { font-size:clamp(1.6rem, 2.4vw, 2.1rem); font-weight:600; letter-spacing:-.01em; line-height:1.1; }
.eq-card p { font-size:1rem; line-height:1.65; color:var(--ink-soft); }
.eq-card p strong { color:var(--ink); font-weight:600; }
.eq-card.me { background:var(--night); border-color:var(--night); color:var(--ivory); }
.eq-card.me .who, .eq-card.me p { color:var(--mist); }
.eq-card.me p strong { color:var(--ivory); }
.eq-card.part { background:var(--ivory-2); border-color:transparent; }

.phases { margin-top:72px; display:grid; grid-template-columns:1fr 1fr; }
.phase { position:relative; padding:42px 40px 0 0; min-width:0; }
.phase::before { content:''; position:absolute; left:0; right:0; top:11px; height:3px; background:var(--ink); }
.phase.run::before { background:repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px); opacity:.45; }
.phase .pt { position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%; background:var(--ivory); border:3px solid var(--ink); }
.phase.run .pt { background:var(--accent); }
.phase .when { font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.phase h3 { font-size:clamp(1.25rem, 1.8vw, 1.45rem); font-weight:600; margin:10px 0 10px; letter-spacing:-.005em; line-height:1.25; }
.phase p { color:var(--ink-soft); line-height:1.65; max-width:46ch; }

.engage { margin-top:72px; background:var(--night); color:var(--ivory); display:grid; grid-template-columns:auto auto minmax(0, 1fr); gap:clamp(24px, 4vw, 60px); align-items:center; padding:clamp(28px, 4vw, 48px); }
.engage .fig { display:grid; gap:8px; align-content:start; }
.engage .fig b { font-size:clamp(2.4rem, 4.4vw, 3.4rem); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--accent-2); white-space:nowrap; }
.engage .fig span { font-size:.88rem; color:var(--mist); line-height:1.45; max-width:22ch; }
.engage p { font-size:1.08rem; line-height:1.7; color:var(--mist); max-width:52ch; }
.engage p strong { color:var(--ivory); font-weight:600; }

/* ---------- Pour qui ---------- */
.crit-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(32px, 5vw, 72px); margin-top:52px; border-top:1px solid var(--line-l); }
.light-2 .critere { border-bottom-color:var(--line-l); }
.pasnous { margin-top:30px; max-width:72ch; font-size:1.02rem; line-height:1.7; color:var(--ink); }
.pasnous b { font-weight:600; }
.sub-h { margin-top:clamp(64px, 8vw, 96px); font-size:clamp(1.7rem, 3vw, 2.3rem); font-weight:600; letter-spacing:-.01em; line-height:1.1; max-width:22ch; }
.sub-h + .doors { margin-top:32px; }

/* ---------- Mes aventures ---------- */
.av-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:56px; }
.av { border:1px solid var(--line-l); background:var(--ivory); padding:clamp(26px, 2.6vw, 34px); display:flex; flex-direction:column; gap:14px; min-height:250px; min-width:0; }
.av.wide { grid-column:span 2; background:var(--night); border-color:var(--night); color:var(--ivory); }
.av .st { display:flex; align-items:center; gap:9px; font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.av .st::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent-ink); }
.av.wide .st { color:var(--mist); }
.av.wide .st::before { background:var(--accent); }
.av h3 { font-size:clamp(1.55rem, 2.2vw, 1.9rem); font-weight:600; letter-spacing:-.01em; line-height:1.1; }
.av .promise { font-size:1.08rem; line-height:1.45; color:var(--ink); font-weight:400; }
.av.wide .promise { color:var(--ivory); font-size:1.2rem; max-width:40ch; }
.av p { font-size:.97rem; line-height:1.65; color:var(--ink-soft); }
.av.wide p { color:var(--mist); max-width:56ch; }
.av .lnk { margin-top:auto; align-self:flex-start; font-weight:600; font-size:.88rem; color:inherit; text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:2px; }
.av.next { border-style:dashed; background:transparent; }
.av.next h3 { color:var(--ink); }
.av.next .st::before { background:transparent; border:1.5px solid var(--accent-ink); }

@media (max-width:960px) {
  .deal-head { grid-template-columns:1fr; }
  .av-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .eq { grid-template-columns:1fr; gap:10px 0; }
  .eq-op { justify-self:center; }
  .engage { grid-template-columns:1fr 1fr; }
  .engage p { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .phases, .crit-grid { grid-template-columns:1fr; }
  .phase { padding-right:0; padding-bottom:28px; }
}
@media (max-width:600px) {
  .av-grid { grid-template-columns:1fr; }
  .av.wide { grid-column:auto; }
  .av { min-height:0; }
}

/* Mots en « co- » : jamais coupés au trait d’union */
.nw { white-space:nowrap; }