/* =========================================================
   ERYX — mise en page : en-tête fixe, bande d'accueil, barre
   d'incitation fixe, sections « page par page », onglets empilés.
   Défilement natif et continu partout (aucun scroll-snap).
   ========================================================= */

/* ---------- EN-TÊTE FIXE ----------
   Logo réduit, centré en haut ; dès qu'on défile (page ou onglet), il glisse en haut à gauche,
   à côté de « Stratégie × Design × Impact » (classe .is-scrolled sur <html>). */
.hdr {
  position: fixed; left: 0; right: 0; top: 0; z-index: 10;
  height: calc(130 * var(--u));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 8, 8, 0.92), rgba(9, 8, 8, 0));
}
.hdr > * { pointer-events: auto; }
.hdr__tag {
  position: absolute; left: calc(73 * var(--u)); top: calc(73 * var(--u));
  font-size: calc(10.5 * var(--u)); font-weight: 400; letter-spacing: 0.4em; color: #A09C9A; white-space: nowrap; line-height: normal;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
/* position pilotée par le défilement (navigation.js) : left/top à 0, tout passe par transform */
.hdr__logo {
  position: absolute; left: 0; top: 0; transform: translate3d(calc(50vw - 50%), calc(55 * var(--u)), 0); gap: calc(12 * var(--u));
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
.hdr__logo svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.hdr__logo span { font-size: calc(22 * var(--u)); font-weight: 400; letter-spacing: 0.26em; color: var(--text); line-height: normal; }
.hdr__menu {
  position: absolute; right: calc(66 * var(--u)); top: calc(56 * var(--u));
  width: calc(48 * var(--u)); height: calc(44 * var(--u)); border: 0; background: transparent; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(15 * var(--u));
}
.hdr__menu span { display: block; width: calc(33 * var(--u)); height: 1.5px; background: #D9D4D1; }
/* bouton son : quatre barres fines qui ondulent doucement (immobiles et basses quand le son est coupé) */
.hdr__son {
  position: absolute; right: calc(126 * var(--u)); top: calc(56 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); border: 0; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: calc(3.5 * var(--u));
}
.hdr__son::after { content: ""; position: absolute; inset: -6px; }
.hdr__son i { display: block; width: 1.5px; height: calc(14 * var(--u)); background: #D9D4D1; border-radius: 1px; transform-origin: 50% 50%;
  animation: eqs 1.1s ease-in-out infinite alternate; }
.hdr__son i:nth-child(2) { animation-delay: -.35s; } .hdr__son i:nth-child(3) { animation-delay: -.7s; } .hdr__son i:nth-child(4) { animation-delay: -.2s; }
.hdr__son.is-off i { animation: none; transform: scaleY(.18); background: #8F8784; }
@keyframes eqs { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .hdr__son i { animation: none; transform: scaleY(.6); } }

@media (max-width: 699px) {
  .hdr { height: calc(80 * var(--u)); }
  .hdr__logo { gap: calc(7 * var(--u)); }
  .hdr__logo svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .hdr__logo span { font-size: calc(16 * var(--u)); }
  .hdr__menu { right: calc(22 * var(--u)); top: calc(35 * var(--u)); width: calc(26 * var(--u)); height: calc(10.5 * var(--u)); gap: calc(9 * var(--u)); justify-content: flex-start; }
  .hdr__menu span { width: calc(26 * var(--u)); }
  .hdr__son { right: calc(62 * var(--u)); top: calc(29 * var(--u)); width: calc(24 * var(--u)); height: calc(22 * var(--u)); gap: calc(3 * var(--u)); }
  .hdr__son::after { inset: -11px; }
  .hdr__son i { height: calc(12 * var(--u)); }
}

/* ---------- BANDE D'ACCUEIL ----------
   Quand un onglet est ouvert, la homepage reste visible au-dessus, à l'endroit où l'on était.
   Cette zone transparente la rend cliquable : un clic ferme tout et revient à la homepage. */
.band {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  height: var(--band-h, 100px);
  display: none; background: transparent; cursor: pointer;
}
.has-tabs .band { display: block; }
.band:focus-visible { outline-offset: -4px; }

/* ---------- BARRE D'INCITATION FIXE ----------
   Absente au premier écran ; elle apparaît à partir de « Chaque entreprise est différente… » (JS : .is-hidden). */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: calc(28 * var(--u)) 0 calc(28 * var(--u) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; pointer-events: none;
  background: linear-gradient(0deg, rgba(9, 8, 8, 0.95) 40%, rgba(9, 8, 8, 0));
  transition: transform .6s var(--ease), opacity .5s ease;
}
.bar.is-hidden { transform: translateY(100%); opacity: 0; }
.bar.is-hidden .bar__row { pointer-events: none; }
html:not(.js) .bar.is-hidden { transform: none; opacity: 1; }
html:not(.js) .bar.is-hidden .bar__row { pointer-events: auto; }
.bar__row { position: relative; width: calc(436 * var(--u)); height: calc(72 * var(--u)); pointer-events: auto; }
/* « Appeler » et « Discussion » retirés : emplacements gardés pour les icônes réseaux sociaux */
.bar .o2 { left: 0; } .bar .pill { left: calc(86 * var(--u)); }
.bar .o3 { left: calc(364 * var(--u)); }
@media (max-width: 699px) {
  .bar { padding: calc(10 * var(--u)) 0 calc(12 * var(--u) + env(safe-area-inset-bottom, 0px)); }
  .bar__row { width: auto; height: calc(52 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); flex-wrap: nowrap; }
  .bar .orb, .bar .pill { position: relative; left: auto; flex: none; }
}

/* ---------- SECTIONS « PAGE PAR PAGE » ----------
   Chaque bloc est centré dans sa propre section d'au moins un écran de haut.
   Le vide autour est voulu ; aucune ligne de découpe : fond uni. */
.home { position: relative; }
.scene {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding-top: var(--hh); padding-bottom: var(--bh);
}
.stage { position: relative; flex: none; z-index: 1; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }

/* arc rouge lumineux de décor, entier dans sa section */
.arc {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  border: 1.5px solid rgba(210, 52, 70, 0.85);
  box-shadow: 0 0 20px rgba(200, 36, 54, 0.5), inset 0 0 40px rgba(170, 26, 44, 0.4), inset 0 0 130px rgba(100, 12, 24, 0.3);
}

/* ---------- ONGLETS EMPILÉS (portefeuille) ---------- */
.tabs { position: relative; z-index: 30; }
.tab {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--top, 100px);
  border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; overflow: hidden;
  background: #0D0A0A;
  box-shadow: inset 0 0 0 1px rgba(201, 58, 75, 0.5), inset 0 1px 0 rgba(255, 190, 198, 0.25), 0 -18px 50px rgba(0, 0, 0, 0.55);
  transform: translateY(0);
  transition: transform var(--tab-dur) var(--ease);
  will-change: transform; contain: layout paint style;
  outline: none;
}
.tab.is-out { transform: translateY(105vh); }
.tab__scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* le fond de la feuille défile avec elle (halo en haut, lueur en bas) */
  background: var(--tab-bg, radial-gradient(760px 380px at 88% 0%, rgba(120, 16, 32, 0.42), rgba(120, 16, 32, 0) 70%), radial-gradient(700px 340px at 0% 100%, rgba(90, 10, 22, 0.32), rgba(90, 10, 22, 0) 70%), #0D0A0A);
  background-attachment: local;
}
.tab__scroll:focus-visible { outline: none; }
.tab__handle { position: absolute; left: 50%; top: calc(12 * var(--u)); width: calc(56 * var(--u)); height: 4px; margin-left: calc(-28 * var(--u)); border-radius: 4px; background: rgba(251, 248, 246, 0.28); z-index: 2; pointer-events: none; }
.tab__top { position: relative; height: 0; z-index: 3; }
.tab__top > * { position: absolute; }

/* sections d'un onglet : au moins la hauteur visible de l'onglet */
.sec {
  position: relative; overflow: clip;
  min-height: var(--tab-h, 100dvh);
  display: flex; align-items: center; justify-content: center;
  padding: 6vh 0 calc(var(--bh) + 6vh);
}
.sec--top { align-items: flex-start; padding-top: 0; }
.tab__end { position: relative; padding-bottom: var(--bh); }

@media (prefers-reduced-motion: reduce) {
  .tab, .hdr__logo, .hdr__tag, .bar { transition: none; }
}