/* Styles propres à la page « accueil » (repris de la maquette). */
/* ---- Accueil · 1. Assemblage puis plongée dans le D ---------------------- */
.assemble { --len: 3.2; }
.assemble .pin-stage { background: #fff; }
.assemble__logo { position: absolute; left: 50%; top: 44%; width: min(80vw, 560px); aspect-ratio: 234 / 113; margin-left: calc(min(80vw, 560px) / -2); translate: 0 -50%; }
@media (min-width: 900px) { .assemble__logo { width: min(48vw, 740px); margin-left: calc(min(48vw, 740px) / -2); top: 47%; } }
.assemble__logo .zoomer { position: absolute; inset: 0; }
.assemble__logo .p { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.names { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.names .n { position: absolute; display: flex; align-items: center; gap: 7px; font: 600 .8125rem/1 var(--f-text); color: var(--encre); white-space: nowrap; }
.names .n i { width: 9px; height: 9px; background: var(--c); }
.n-point { left: 0; bottom: calc(100% + 14px); } .n-i { left: 30%; bottom: calc(100% + 14px); } .n-G { left: 54%; bottom: calc(100% + 14px); }
.n-cadre { left: 0; top: calc(100% + 14px); } .n-D { left: 28%; top: calc(100% + 14px); } .n-r { left: 72%; top: calc(100% + 14px); }
@media (min-width: 900px) {
  .names .n { font-size: 1rem; gap: 9px; }
  .n-cadre { left: auto; right: calc(100% + 24px); top: 50%; translate: 0 -50%; }
  .n-r { left: calc(100% + 24px); top: 74%; }
  .n-D { left: 21%; top: calc(100% + 20px); }
  .n-point, .n-i, .n-G { bottom: calc(100% + 20px); }
  .n-point { left: 0; } .n-i { left: 18%; } .n-G { left: 50%; }
}
.assemble__tag { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(48px, 9svh, 96px); text-align: center; font: 750 clamp(2.2rem, 9.6vw, 6.4rem)/.9 var(--f-display); letter-spacing: -.035em; color: var(--encre); }
.assemble__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 max(20px, env(safe-area-inset-right, 0px)) clamp(24px, 5svh, 56px) max(20px, env(safe-area-inset-left, 0px)); }
@media (min-width: 768px) { .assemble__copy { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1200px) { .assemble__copy { padding-left: max(64px, env(safe-area-inset-left, 0px)); padding-right: max(64px, env(safe-area-inset-right, 0px)); } }
.assemble__copy .inner { max-width: var(--max); margin-inline: auto; display: grid; gap: 16px; }
@media (min-width: 900px) { .assemble__copy .inner > * { max-width: 44vw; } }
.assemble h1 { display: grid; gap: 12px; }
.assemble h1 .display { font-size: clamp(3.1rem, 13.5vw, 9.5rem); line-height: .86; letter-spacing: -.038em; font-weight: 750; color: var(--encre); }
.portal { position: absolute; inset: 0; z-index: 4; background: var(--rouge); visibility: hidden; }
.cut { position: absolute; inset: 0; display: grid; align-content: center; padding: calc(var(--bar-h) + 20px) max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); font: 750 clamp(3.4rem, 15vw, 12.5rem)/.86 var(--f-display); letter-spacing: -.04em; visibility: hidden; }
@media (min-width: 900px) { .cut { padding-left: 64px; padding-right: 64px; } }
.cut .line { overflow: hidden; padding-bottom: .04em; }
.cut .line > span { display: inline-block; }
.cut1 { color: var(--encre); }
.cut2 { color: var(--encre); }
.cut3 { color: #fff; }

/* ---- Accueil · 2. Les cinq mondes --------------------------------------- */
.mondes { --len: 7.9; }
.mondes .pin-stage { background: #000; color: #fff; }
.mt-intro { position: absolute; inset: 0; display: grid; align-content: center; gap: 20px; padding: calc(var(--bar-h) + 20px) max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .mt-intro { padding-left: 64px; padding-right: 64px; } }
.mt-intro .lead { color: #A9B4BC; }
.world { position: absolute; inset: 0; visibility: hidden; display: grid; align-content: center; padding: calc(var(--bar-h) + 20px) max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .world { padding-left: 64px; padding-right: 64px; } }
.w-in { max-width: var(--max); width: 100%; margin-inline: auto; display: grid; gap: 20px; }
.w-art { display: block; position: absolute; right: -10vw; bottom: -12svh; height: 36svh; width: auto; pointer-events: none; }
.w-marque .w-art { fill: #C73C26; } .w-com .w-art { fill: #2FAAA7; } .w-web .w-art { fill: #1D5D7E; } .w-video .w-art { fill: #E3AE0B; } .w-ia .w-art { fill: #1A8583; }
.w-strategie .w-art { fill: #1B1B1B; height: 24svh; right: -40vw; bottom: -5svh; }
.w-in { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .w-art { right: -6vw; top: 50%; bottom: auto; height: 118svh; translate: 0 -50%; }
  .w-in > * { max-width: 56vw; }
  /* le monde Stratégie est encadré : on voit le côté droit du cadre, ses deux angles et l'ouverture de la barre basse */
  .w-strategie .w-art { height: 90svh; width: 180svh; max-width: none; right: -3vw; bottom: auto; }
}
.w-name { font: 600 1rem/1.2 var(--f-text); display: flex; gap: 12px; align-items: baseline; }
.w-name .mono { font-size: .875rem; opacity: .7; }
.w-promise { font: 750 var(--ps, clamp(3rem, 13.5vw, 10.5rem))/.86 var(--f-display); letter-spacing: -.038em; max-width: 8.6em; }
@media (min-width: 900px) { .w-promise { font-size: clamp(4rem, 8.6vw, 10.5rem); } }
.w-punch { font: 500 clamp(1.1rem, 1.8vw, 1.5rem)/1.4 var(--f-text); max-width: 30em; }
.w-marque { background: var(--rouge); color: var(--encre); }
.w-marque .btn { --b-bg: var(--encre); --b-fg: #fff; } .w-marque .btn--ghost { color: var(--encre); }
.w-com { background: #3CC2BF; color: var(--encre); }
.w-com .btn { --b-bg: var(--encre); --b-fg: #fff; } .w-com .btn--ghost { color: var(--encre); }
.w-web { background: var(--bleu); color: #fff; }
.w-web .btn { --b-bg: #fff; --b-fg: var(--encre); } .w-web .btn--ghost { color: #fff; }
.w-video { background: var(--jaune); color: var(--encre); }
.w-video .btn { --b-bg: #000; --b-fg: var(--jaune); } .w-video .btn--ghost { color: var(--encre); }
.w-ia { background: var(--vert); color: var(--encre); }
.w-ia .btn { --b-bg: #071A1D; --b-fg: #fff; } .w-ia .btn--ghost { color: var(--encre); }
.w-strategie { background: #000; color: #fff; }
.w-strategie .btn { --b-bg: #fff; --b-fg: #000; } .w-strategie .btn--ghost { color: #fff; }
.floods { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.fl { position: absolute; left: 50%; top: 50%; width: 34vw; height: auto; visibility: hidden; overflow: visible; }
@media (min-width: 900px) { .fl { width: 16vw; } }
.fl-point { width: 22vw; } @media (min-width: 900px) { .fl-point { width: 9vw; } }
.fl-cadre { width: 62vw; } @media (min-width: 900px) { .fl-cadre { width: 30vw; } }

/* ---- Accueil · 3. Méthode : le cadre se dessine -------------------------- */
.methode { --len: 3; }
.methode .pin-stage { display: grid; place-items: center; background: #fff; }
.methode__frame { --s: clamp(10px, 1.3vw, 18px); position: absolute; inset: calc(var(--bar-h) + 20px) max(20px, env(safe-area-inset-right, 0px)) 28px max(20px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .methode__frame { inset: calc(var(--bar-h) + 40px) 64px 48px 64px; } }
.methode__frame .seg { position: absolute; background: var(--c); }
.methode__frame .seg1 { left: 0; top: 0; bottom: 0; width: var(--s); transform-origin: 50% 100%; }
.methode__frame .seg2 { top: 0; left: 21%; right: 0; height: var(--s); transform-origin: 0 50%; }
.methode__frame .seg3 { right: 0; top: 0; bottom: 0; width: var(--s); transform-origin: 50% 0; }
.methode__frame .seg4 { bottom: 0; right: 0; width: 16%; height: var(--s); transform-origin: 100% 50%; }
.methode__frame .seg5 { bottom: 0; left: 0; right: 29%; height: var(--s); transform-origin: 100% 50%; }
.methode__frame .mstem { position: absolute; bottom: calc(var(--s) * -1.4); left: 74%; width: var(--s); height: 24%; background: #236F95; transform-origin: 50% 100%; }
.methode__frame .mdot { position: absolute; top: 0; left: 10.7%; width: var(--s); height: var(--s); background: #1F9A98; }
.methode__title { position: absolute; z-index: 2; top: calc(var(--bar-h) + 48px); left: max(44px, env(safe-area-inset-left, 0px)); right: max(44px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .methode__title { left: 104px; right: 104px; top: calc(var(--bar-h) + 80px); } }
.methode__h { font: 600 clamp(1rem, 1.6vw, 1.25rem)/1.35 var(--f-text); color: var(--encre-2); max-width: 30em; }
.methode__steps { position: relative; z-index: 2; width: min(100% - 88px, 780px); display: grid; }
.methode__steps > div { grid-area: 1 / 1; display: grid; gap: 16px; align-content: center; }
.methode__steps .n { font: 500 .9375rem/1 var(--f-mono); color: var(--encre-2); }
.methode__steps h3 { font: 750 clamp(2.8rem, 12vw, 7rem)/.88 var(--f-display); letter-spacing: -.038em; }
.methode__steps p { font-size: var(--t-lead); color: var(--encre-2); max-width: 30em; }
.methode__steps .vous { font-size: 1rem; color: var(--encre); padding: 14px 16px; background: color-mix(in srgb, var(--c) 16%, #fff); max-width: 34em; }
.methode__steps .vous b { font-weight: 600; }
.methode__end { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; top: 50%; translate: 0 -50%; font: 750 clamp(2.6rem, 11vw, 8rem)/.9 var(--f-display); letter-spacing: -.038em; visibility: hidden; }
@media (max-width: 899px) { .methode__end { top: 74%; font-size: 14vw; padding-inline: 20px; } }

/* ---- Coopérative : les couches s'effacent ------------------------------ */
.coop__grid { display: grid; gap: 48px; align-items: center; overflow-x: clip; }
@media (min-width: 1000px) { .coop__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; } }
.chain { display: grid; gap: 10px; justify-items: stretch; max-width: 460px; width: 100%; overflow-x: clip; }
.chain > div { padding: 16px 18px; font-weight: 500; border: 1.5px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg); }
.chain .end { background: var(--encre); color: #fff; border-color: var(--encre); font-weight: 600; }
.chain .end.expert { background: var(--rouge); color: var(--encre); border-color: var(--rouge); }
.chain .layer { color: var(--fg-2); }
.chain .layer s { text-decoration-thickness: 2px; }
.chain .link { height: 28px; width: var(--u); background: var(--encre); justify-self: center; padding: 0; border: 0; transform-origin: 50% 0; }

/* ---- Trois façons ------------------------------------------------------ */
.ways { display: grid; gap: 16px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { padding: clamp(24px, 3vw, 36px); border: 1.5px solid var(--line); display: grid; gap: 14px; align-content: start; position: relative; }
.way h3 { font: 750 2rem/1 var(--f-display); letter-spacing: -.03em; }
.way p { color: var(--fg-2); }
.way.pref { border-color: var(--encre); }
.works__more { margin-top: 32px; }
.way .tag { justify-self: start; font-size: .8125rem; font-weight: 600; padding: 5px 9px; background: var(--encre); color: #fff; }

/* ---- Téléphones : composition pensée pour la hauteur réelle de l'écran -------- */
@media (max-width: 899px) {
  /* Accueil : sur un écran court, la promesse tient en une phrase et les pièces gardent leur place au-dessus */
  .assemble .lead { font-size: 1rem; line-height: 1.5; }
  .assemble__copy .inner { gap: 14px; }
  /* Méthode : le titre en haut, chaque geste centré dans l'espace qui reste, sans jamais le recouvrir */
  .methode .pin-stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(var(--bar-h) + 44px) 0 40px; }
  .methode__title { position: relative; top: auto; left: auto; right: auto; width: calc(100% - 88px); }
  .methode__steps { flex: 1; align-content: center; width: calc(100% - 88px); }
}
@media (max-width: 899px) and (max-height: 760px) {
  .assemble .lead-more { display: none; }
  .assemble h1 .display { font-size: clamp(2.8rem, 12.5vw, 4rem); }
  .methode__h { font-size: .9375rem; }
  .methode__steps > div { gap: 12px; }
  .methode__steps h3 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .methode__steps p { font-size: .9375rem; line-height: 1.5; }
  .methode__steps .vous { font-size: .875rem; padding: 10px 12px; }
  .w-promise { font-size: min(var(--ps, 13.5vw), 7.4svh); }
  .w-in { gap: 16px; }
  .w-punch { font-size: 1rem; }
}

/* ---- Rendu posé ---------------------------------------------------------- */
.is-static .assemble .pin-stage, .is-static .mondes .pin-stage, .is-static .methode .pin-stage { display: grid; gap: 32px; padding: calc(var(--bar-h) + 40px) 0 72px; }
.is-static .assemble__logo { position: relative; left: auto; top: auto; margin: 0 auto 56px; translate: none; }
.is-static .assemble__copy, .is-static .assemble__tag, .is-static .mt-intro, .is-static .world, .is-static .methode__title, .is-static .methode__end { position: relative; inset: auto; translate: none; }
.is-static .portal, .is-static .cut { position: relative; visibility: visible; }
.is-static .cut { min-height: 60svh; }
.is-static .world { visibility: visible; min-height: 80svh; }
.is-static .floods, .is-static .methode__frame { display: none; }
.is-static .methode__steps { gap: 56px; }
.is-static .methode__steps > div { grid-area: auto; }