/* ============================================================
   homepage.css — La salle du serment · Ordre des Bannis
   Obsidienne, rubis, ambre et or. Profondeur 3D, braises,
   parallaxe multi-vitesses et entrées cinématiques.
   Moteur des effets : public/assets/js/odb-home.js
   ============================================================ */

/* ── 1. Jetons de la page ───────────────────────────────────── */
.oh{
  --oh-ink: #f8ede8;
  --oh-soft: #d6c0ba;
  --oh-muted: #a3858b;
  --oh-ruby: #ff3d5c;
  --oh-ember: #ff7a3c;
  --oh-amber: #ffb340;
  --oh-gold: #ffdc9a;
  --oh-line: #ffb9a326;
  --oh-line-soft: #ffb9a312;
  --oh-glass: linear-gradient(158deg, #ffffff0e, #ffffff03 46%), #241813a8;
  --oh-glass-flat: #1d1410c4;
  --oh-flame: linear-gradient(96deg, #ff4d63 0%, #ff8a4c 46%, #ffdc9a 100%);
  --oh-ease: cubic-bezier(.16, 1, .3, 1);
  --oh-hue: var(--oh-ember);
  position: relative; z-index: 1; min-width: 0;
  display: grid; gap: clamp(56px, 8vh, 118px);
  padding-bottom: clamp(46px, 8vh, 120px);
  color: var(--oh-ink); font-family: var(--font-body);
}
.oh :is(p, h1, h2, h3, h4, ul){ margin: 0 }
.oh ul{ padding: 0; list-style: none }
.oh a{ color: inherit; text-decoration: none }
.oh :is(a, button, summary):focus-visible{ outline: 2px solid var(--oh-gold); outline-offset: 5px; border-radius: 6px }
.oh-shell{ width: 100%; max-width: 1580px; margin-inline: auto; padding-inline: var(--page-gutter) }
.oh-shell--narrow{ max-width: 1080px }
.oh-flame{
  background: var(--oh-flame); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: oh-shimmer 9s ease-in-out infinite;
}

/* ── 2. Atmosphère : braises, halos, sol, grain ─────────────── */
.oh-atmos{ position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none }
.oh-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9 }
.oh-shaft{
  position: absolute; top: -30%; width: 42vw; height: 150%;
  background: linear-gradient(178deg, #ff6a3d1f, #ff2f5700 62%);
  filter: blur(46px); transform: rotate(9deg);
  animation: oh-breathe 14s ease-in-out infinite;
}
.oh-shaft--a{ left: 4%; animation-delay: -3s }
.oh-shaft--b{ right: 2%; transform: rotate(-12deg); animation-delay: -8s; background: linear-gradient(182deg, #ffb34018, #ff2f5700 58%) }
.oh-floor{
  position: absolute; left: -25%; right: -25%; bottom: -6%; height: 42vh;
  background:
    repeating-linear-gradient(90deg, #ff8a4c14 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, #ff8a4c10 0 1px, transparent 1px 74px);
  transform: perspective(420px) rotateX(74deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000c, transparent 78%);
  animation: oh-floor-drift 16s linear infinite;
}
.oh-vignette{ position: absolute; inset: 0; background: radial-gradient(ellipse 78% 62% at 50% 44%, transparent 42%, #0b05079c 100%) }

.oh-laser{ position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 40; pointer-events: none; background: #ffffff08 }
.oh-laser i{ display: block; height: 100%; width: var(--oh-progress, 0%); background: var(--oh-flame); box-shadow: 0 0 14px #ff7a3cb0, 0 0 34px #ff3d5c5c }

/* ── 3. Hero — le serment ───────────────────────────────────── */
.oh-hero{ position: relative; z-index: 1; display: grid; gap: clamp(26px, 4vh, 54px); padding-top: clamp(22px, 4vh, 54px) }
.oh-hero-decor{ position: absolute; inset: -10% 0 0; z-index: -1; overflow: hidden; pointer-events: none }
.oh-wordmark{
  position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  font-family: 'Outfit', var(--font-body); font-size: clamp(96px, 20vw, 340px); font-weight: 800;
  letter-spacing: -.03em; line-height: .8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.4px #ffb9a31c;
}
.oh-crest{ position: absolute; top: 12%; left: 6%; font-size: clamp(40px, 5vw, 86px); color: #ff8a4c1f; animation: oh-float 12s ease-in-out infinite }
.oh-crest--b{ top: auto; bottom: 12%; left: auto; right: 5%; color: #ff3d5c20; animation-delay: -5s }
.oh-bar{ position: absolute; top: 26%; right: 16%; width: 2px; height: clamp(90px, 16vh, 190px); background: linear-gradient(#ff8a4c00, #ff8a4c4d, #ff8a4c00) }
.oh-bar--b{ top: auto; bottom: 8%; right: auto; left: 12%; height: clamp(60px, 11vh, 140px); background: linear-gradient(#ffdc9a00, #ffdc9a3d, #ffdc9a00) }
.oh-spark{ position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff6dd, #ff9a4d 55%, #ff3d5c00); box-shadow: 0 0 16px 3px #ff8a4c66; animation: oh-float 9s ease-in-out infinite }
.oh-spark:nth-child(7){ animation-delay: -2s } .oh-spark:nth-child(8){ animation-delay: -4.5s } .oh-spark:nth-child(9){ animation-delay: -7s }

.oh-hero-shell{ display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); align-items: center; gap: clamp(28px, 4vw, 74px); container-type: inline-size }
.oh-kicker{ font-family: 'Space Grotesk', var(--font-body); font-size: clamp(10px, .8vw, 13px); font-weight: 600; letter-spacing: .34em; color: var(--oh-amber); margin-bottom: clamp(18px, 2.4vh, 30px); min-height: 1.2em }
/* Le titre se taille d'après le canevas et non d'après sa colonne : deux lignes
   lui suffisent, et il déborde dans l'intervalle plutôt que de s'empiler. */
.oh-title{
  font-family: 'Outfit', var(--font-body); font-weight: 700;
  width: max-content; max-width: 132%;
  font-size: clamp(30px, 7.4cqi, 92px); line-height: 1.05; letter-spacing: -.035em;
  text-transform: none;
}
.oh-mask{ display: block; overflow: hidden; padding-bottom: .04em }
.oh-mask-in{ display: block }
.oh-motion .oh-hero.oh-lit .oh-mask-in{ animation: oh-lift-in 1.15s var(--oh-ease) both }
.oh-hero .oh-mask:nth-child(2) .oh-mask-in{ animation-delay: .1s }
.oh-hero .oh-mask:nth-child(3) .oh-mask-in{ animation-delay: .2s }
.oh-hero .oh-mask:nth-child(4) .oh-mask-in{ animation-delay: .3s }
.oh-lead{ max-width: 56ch; margin-top: clamp(20px, 2.6vh, 34px); font-size: clamp(16px, 1.15vw, 21px); line-height: 1.85; color: var(--oh-soft) }
.oh-actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(26px, 3.4vh, 44px) }
.oh-facts{ max-width: none; display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 52px); margin-top: clamp(30px, 4vh, 52px); padding-top: clamp(20px, 2.6vh, 30px); border-top: 1px solid var(--oh-line-soft) }
.oh-facts li{ display: grid; gap: 5px }
.oh-fact-v{ font-family: 'Space Grotesk', var(--font-body); font-size: clamp(17px, 1.5vw, 26px); font-weight: 600; letter-spacing: -.02em }
.oh-fact-l{ font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--oh-muted) }

/* Boutons */
.oh-btn{
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .62em;
  padding: 1.02rem 1.7rem; min-height: 54px; border-radius: 999px;
  border: 1px solid var(--oh-line); background: #ffffff08; color: var(--oh-ink);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translate3d(var(--oh-mx, 0px), var(--oh-my, 0px), 0);
  transition: box-shadow .4s var(--oh-ease), border-color .4s, color .3s, scale .4s var(--oh-ease);
}
.oh-btn i{ font-size: 1.12em }
.oh-btn:hover{ scale: 1.02 }
.oh-btn--flame{ border-color: transparent; color: #2b0d10; background: var(--oh-flame); background-size: 180% 100%; box-shadow: 0 14px 40px #ff5a3d3d, inset 0 1px 0 #fff3 }
.oh-btn--flame::after{
  content: ""; position: absolute; inset: -60% -20%; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, #ffffffa8 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .85s var(--oh-ease);
}
.oh-btn--flame:hover{ box-shadow: 0 18px 52px #ff5a3d5c, inset 0 1px 0 #fff5; background-position: 60% 0 }
.oh-btn--flame:hover::after{ transform: translateX(130%) }
.oh-btn--ghost{ color: var(--oh-ink); background: #ffffff07; border-color: #ffdc9a30 }
.oh-btn--ghost:hover{ border-color: #ffdc9a6b; box-shadow: 0 0 32px #ffb34024, inset 0 1px 0 #ffffff12; background: #ffb3400d }
.oh-btn--xl{ padding: 1.2rem 2.3rem; min-height: 62px; font-size: 1.05rem }

/* Scène 3D de l'emblème */
.oh-stage-wrap{ display: grid; place-items: center; width: 100%; container-type: inline-size }
.oh-stage{
  position: relative; display: grid; place-items: center; width: 100%; max-width: 520px;
  aspect-ratio: 1; transform-style: preserve-3d; will-change: transform;
  animation: oh-float 13s ease-in-out infinite;
}
.oh-halo{ position: absolute; inset: -14%; z-index: -2; border-radius: 50%; background: radial-gradient(circle, #ff6a3d2e, #ff3d5c12 42%, transparent 68%); filter: blur(18px); animation: oh-breathe 8s ease-in-out infinite }
.oh-ring{ position: absolute; border-radius: 50%; border: 1px solid #ffdc9a1c; transform-style: preserve-3d }
.oh-ring--far{ inset: 0; border-style: dashed; border-color: #ff8a4c26; animation: oh-spin 46s linear infinite }
.oh-ring--mid{ inset: 8%; border-width: 2px; border-color: transparent; background: conic-gradient(from 0deg, #ff3d5c00 0 62%, #ff7a3caa 78%, #ffdc9a00 92%) border-box; mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0); animation: oh-spin 18s linear infinite reverse }
.oh-ring--near{ inset: 16%; border-color: #ffb9a314; box-shadow: inset 0 0 60px #ff6a3d1f; animation: oh-spin 32s linear infinite }
.oh-orbit{ position: absolute; inset: 4%; animation: oh-spin 26s linear infinite }
.oh-orbit i{ position: absolute; top: 50%; left: 50%; font-size: clamp(15px, 2.1cqi, 25px); color: var(--oh-gold); filter: drop-shadow(0 0 12px #ff8a4c8c) }
.oh-orbit i:nth-child(1){ transform: rotate(0deg) translateX(48%) rotate(0deg) }
.oh-orbit i:nth-child(2){ transform: rotate(90deg) translateX(48%) rotate(-90deg) }
.oh-orbit i:nth-child(3){ transform: rotate(180deg) translateX(48%) rotate(-180deg) }
.oh-orbit i:nth-child(4){ transform: rotate(270deg) translateX(48%) rotate(-270deg) }
.oh-emblem{ position: relative; width: 66% }
.oh-emblem img{
  display: block; width: 100%; height: auto; border-radius: 50%; object-fit: cover;
  border: 1px solid #ffbd9c3a; box-shadow: 0 0 0 1px #1b0d10, 0 34px 70px #0a0407a8, 0 0 70px #ff6a3d2b, inset 0 1px 0 #ffffff24;
  animation: oh-kb 22s ease-in-out infinite alternate;
}
.oh-plaque{ position: absolute; bottom: -6%; text-align: center }
.oh-plaque span{ display: block; font-family: 'Space Grotesk', var(--font-body); font-size: 9.5px; letter-spacing: .3em; color: var(--oh-muted) }
.oh-plaque strong{ display: block; margin-top: 7px; font-family: 'Outfit', var(--font-body); font-size: clamp(15px, 1.7vw, 23px); font-weight: 500 }
.oh-plaque i{ font-style: normal; color: var(--oh-ruby); padding-inline: 8px }
.oh-tag{
  position: absolute; display: inline-flex; align-items: center; gap: .5em; padding: .5rem .9rem;
  border-radius: 999px; border: 1px solid var(--oh-line); background: #1b130fd9;
  font-family: 'Space Grotesk', var(--font-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; box-shadow: 0 16px 40px #0a04079c; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.oh-tag--a{ top: 8%; left: 2%; color: var(--oh-gold) }
.oh-tag--b{ bottom: 15%; right: 1%; color: #9ce6b0 }
.oh-tag i{ font-size: 13px }

/* Pied du hero */
.oh-hero-foot{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 34px); align-items: center; padding-block: clamp(18px, 2.6vh, 30px); border-block: 1px solid var(--oh-line-soft) }
.oh-status{ display: inline-flex; align-items: center; gap: 10px; grid-column: 1 / -1; font-family: 'Space Grotesk', var(--font-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--oh-soft) }
.oh-status-dot{ position: relative; width: 8px; height: 8px; border-radius: 50%; background: #8cceaa }
.oh-status-dot::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #8cceaa7a; animation: oh-ping 2.4s ease-out infinite }
.oh-status.is-closed .oh-status-dot{ background: var(--oh-amber) }
.oh-status.is-closed .oh-status-dot::after{ border-color: #ffb34070 }
.oh-paths{ display: grid; gap: 4px }
.oh-paths a{ position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; font-size: 15px; transition: background .35s, transform .45s var(--oh-ease) }
.oh-paths a > i{ font-size: 19px; color: var(--oh-hue) }
.oh-paths a small{ display: block; margin-top: 3px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--oh-muted) }
.oh-paths a em{ position: absolute; right: 14px; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--oh-hue)); opacity: .5; transition: width .45s var(--oh-ease) }
.oh-paths a:hover{ background: color-mix(in srgb, var(--oh-hue) 9%, transparent); transform: translateX(6px) }
.oh-paths a:hover em{ width: 42px }
.oh-fido{ display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 18px; border: 1px solid var(--oh-line); background: var(--oh-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: border-color .4s, box-shadow .4s, transform .5s var(--oh-ease) }
.oh-fido > img{ flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain; animation: oh-float 7s ease-in-out infinite }
.oh-fido > span{ flex: 1; min-width: 0 }
.oh-fido :is(strong, small, .oh-fido-kicker){ display: block }
.oh-fido-kicker{ font-family: 'Space Grotesk', var(--font-body); font-size: 9.5px; letter-spacing: .22em; color: var(--oh-amber); margin-bottom: 6px }
.oh-fido strong{ font-size: 14.5px; font-weight: 600; line-height: 1.5 }
.oh-fido small{ margin-top: 5px; font-size: 11.5px; line-height: 1.7; color: var(--oh-muted) }
.oh-fido > i{ color: var(--oh-gold); transition: transform .4s var(--oh-ease) }
.oh-fido:hover{ border-color: #ffdc9a52; box-shadow: 0 22px 60px #0a04077a, 0 0 40px #ff8a4c1f; transform: translateY(-4px) }
.oh-fido:hover > i{ transform: translate(4px, -4px) }
.oh-scroll{ grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 16px; padding-block: 16px; font-family: 'Space Grotesk', var(--font-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--oh-muted) }
.oh-scroll-line{ position: relative; display: block; width: 1px; height: 46px; background: linear-gradient(#ffdc9a00, #ffdc9a66) }
.oh-scroll-line::after{ content: ""; position: absolute; left: -1.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--oh-gold); box-shadow: 0 0 10px var(--oh-gold); animation: oh-drop 2.2s ease-in-out infinite }
.oh-scroll:hover{ color: var(--oh-gold) }

/* ── 4. Ruban défilant ──────────────────────────────────────── */
.oh-ribbon{ position: relative; display: grid; gap: 10px; padding-block: clamp(22px, 3vh, 34px); overflow: hidden; border-block: 1px solid var(--oh-line-soft); background: linear-gradient(#ff6a3d0a, transparent) }
.oh-ribbon-row{ display: flex; width: max-content; gap: 42px; animation: oh-tape 44s linear infinite }
.oh-ribbon-row--back{ animation-direction: reverse; animation-duration: 58s; opacity: .55 }
.oh-tape{ display: inline-flex; align-items: center; gap: 16px; font-family: 'Outfit', var(--font-body); font-size: clamp(15px, 1.6vw, 27px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; color: #ffffff14; -webkit-text-stroke: 1px #ffb9a333 }
.oh-tape b{ font-weight: inherit }
.oh-tape .hot{ color: transparent; background: var(--oh-flame); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 0 }
.oh-tape .cool{ color: transparent; -webkit-text-stroke: 1px #ffdc9a5c }
.oh-tape > i{ font-size: .62em; color: var(--oh-ember) }
.oh-ribbon:hover .oh-ribbon-row{ animation-play-state: paused }

/* ── 5. Ossature des sections ───────────────────────────────── */
.oh-band{ position: relative }
.oh-band--tint{ padding-block: clamp(30px, 5vh, 64px); background: radial-gradient(ellipse 70% 100% at 50% 0%, #ff6a3d0c, transparent 70%) }
.oh-head{ max-width: 900px; margin: 0 auto clamp(34px, 5vh, 62px); text-align: center }
.oh-eyebrow{ display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; margin-bottom: 22px; border-radius: 999px; border: 1px solid var(--oh-line); background: #ff8a4c0d; font-family: 'Space Grotesk', var(--font-body); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oh-amber) }
.oh-eyebrow i{ font-size: 12px }
.oh-h2{ font-family: 'Outfit', var(--font-body); font-size: clamp(31px, 4.6vw, 74px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; text-transform: none }
.oh-h2--left{ margin-block: 26px 20px; text-align: left }
.oh-sub{ max-width: 72ch; margin: 22px auto 0; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.85; color: var(--oh-soft) }
.oh-body{ font-size: clamp(15px, 1.05vw, 18px); line-height: 1.9; color: var(--oh-soft) }
.oh-body strong{ color: var(--oh-gold); font-weight: 600 }
/* Entrées : la propriété « translate » reste indépendante des transforms 3D. */
.oh-motion :is(.oh-head, .oh-hero, .oh-oath, .oh-portal-inner, .oh-founder, .oh-metrics, .oh-cards, .oh-trio, .oh-perks, .oh-rail, .oh-orbit-stack, .oh-qa, .oh-call) > *{ opacity: 0; translate: 0 34px }
.oh-motion .oh-rise,.oh-motion .oh-mask-in{ opacity: 0; translate: 0 30px }
.oh-motion .oh-mask-in{ translate: 0 112% }
.oh-motion .oh-lit > *,.oh-motion .oh-lit :is(.oh-rise, .oh-mask-in){ opacity: 1; translate: 0 0; transition: opacity .85s var(--oh-ease) var(--oh-delay, 0s), translate 1.05s var(--oh-ease) var(--oh-delay, 0s) }
.oh-motion .oh-lit .oh-h2 .oh-rise:nth-child(2){ --oh-delay: .1s }
.oh-motion .oh-lit .oh-oath-text .oh-mask:nth-child(2) .oh-mask-in{ --oh-delay: .12s }
.oh-h2 .oh-rise{ display: inline }
[data-oh-tilt]{ transform: perspective(1100px) rotateX(var(--oh-rx, 0deg)) rotateY(var(--oh-ry, 0deg)) translate3d(0, var(--oh-ty, 0px), 0); transition: box-shadow .5s var(--oh-ease), border-color .5s, background .5s }
[data-oh-lift]{ transform: translateZ(var(--oh-z, 0px)) }
[data-oh-drill],[data-oh-swim]{ transform: translate3d(var(--oh-x, 0px), calc(var(--oh-y, 0px) + var(--oh-s, 0px)), 0) }

/* ── 6. Annales chiffrées ───────────────────────────────────── */
.oh-metrics{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px) }
.oh-metric{ position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 2.4vw, 40px) clamp(16px, 1.6vw, 28px); border-radius: 22px; border: 1px solid var(--oh-line); background: var(--oh-glass); text-align: center; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px #07030642, inset 0 1px 0 #ffffff0d }
.oh-metric-glow{ position: absolute; inset: -40%; z-index: -1; opacity: 0; background: radial-gradient(circle at var(--oh-gx, 50%) var(--oh-gy, 50%), #ff7a3c40, transparent 55%); transition: opacity .5s }
.oh-metric:hover .oh-metric-glow{ opacity: 1 }
.oh-metric-v{ font-family: 'Space Grotesk', var(--font-body); font-size: clamp(34px, 4.2vw, 66px); font-weight: 700; line-height: 1; letter-spacing: -.04em; background: var(--oh-flame); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent }
.oh-metric-l{ margin-top: 16px; font-size: 14.5px; font-weight: 600 }
.oh-metric-s{ margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--oh-muted) }

/* ── 7. Les pavillons ───────────────────────────────────────── */
.oh-cards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 30px); transform-style: preserve-3d }
.oh-card{ position: relative; isolation: isolate; display: grid; align-content: start; gap: 4px; padding: clamp(24px, 2.3vw, 40px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--oh-hue) 22%, var(--oh-line)); background: linear-gradient(165deg, color-mix(in srgb, var(--oh-hue) 11%, transparent), #ffffff03 44%), var(--oh-glass-flat); box-shadow: 0 34px 80px #0703066b, inset 0 1px 0 #ffffff10; overflow: hidden; transform-style: preserve-3d }
.oh-card:nth-child(2){ --oh-ty: -22px }
.oh-card-aura{ position: absolute; inset: -30% -10% auto; height: 62%; z-index: -1; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--oh-hue) 34%, transparent), transparent 68%); opacity: .5; filter: blur(24px); transition: opacity .6s }
.oh-card-edge{ position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--oh-gx, 50%) var(--oh-gy, 0%), #ffffff24, transparent 62%); opacity: 0; transition: opacity .45s; mix-blend-mode: screen }
.oh-card:hover .oh-card-edge{ opacity: 1 }
.oh-card:hover .oh-card-aura{ opacity: .95 }
.oh-card-crest{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px }
.oh-card-crest img{ width: 68px; height: 82px; object-fit: contain; filter: drop-shadow(0 12px 24px #0006) drop-shadow(0 0 22px color-mix(in srgb, var(--oh-hue) 40%, transparent)); transition: transform .6s var(--oh-ease) }
.oh-card:hover .oh-card-crest img{ transform: translateZ(48px) scale(1.07) rotate(-3deg) }
.oh-card-state{ padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--oh-hue) 40%, transparent); background: color-mix(in srgb, var(--oh-hue) 14%, transparent); font-family: 'Space Grotesk', var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--oh-hue) 78%, white) }
.oh-card-state.is-closed{ border-color: var(--oh-line); background: #ffffff07; color: var(--oh-muted) }
.oh-card-line{ font-family: 'Space Grotesk', var(--font-body); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oh-hue) }
.oh-card-title{ margin-top: 10px; font-family: 'Outfit', var(--font-body); font-size: clamp(21px, 1.9vw, 31px); font-weight: 650; line-height: 1.18; letter-spacing: -.03em }
.oh-card-craft{ margin-top: 6px; font-size: 13.5px; color: var(--oh-gold); font-style: italic; opacity: .82 }
.oh-card-hook{ margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--oh-soft) }
.oh-duties{ display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff0f }
.oh-duties li{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--oh-soft) }
.oh-duties i{ color: var(--oh-hue); font-size: 13px }
.oh-card-cta{ display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 13px 20px; border: 1px solid color-mix(in srgb, var(--oh-hue) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--oh-hue) 12%, transparent); color: color-mix(in srgb, var(--oh-hue) 82%, white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .4s, box-shadow .4s, transform .4s var(--oh-ease) }
.oh-card-cta:hover{ background: color-mix(in srgb, var(--oh-hue) 22%, transparent); box-shadow: 0 14px 38px color-mix(in srgb, var(--oh-hue) 22%, transparent); transform: translateY(-2px) }
.oh-card.is-locked{ opacity: .84 }
.oh-card.is-locked .oh-card-cta{ border-color: var(--oh-line); background: #ffffff07; color: var(--oh-muted) }

/* ── 8. Le serment (citation) ───────────────────────────────── */
.oh-oath{ position: relative; padding-block: clamp(64px, 12vh, 150px); text-align: center; overflow: hidden; border-block: 1px solid var(--oh-line-soft) }
.oh-oath-decor{ position: absolute; inset: 0; z-index: 0; pointer-events: none }
.oh-oath-glyph{ position: absolute; top: 8%; left: 50%; translate: -50%; font-size: clamp(46px, 6vw, 96px); color: #ff6a3d24; animation: oh-float 11s ease-in-out infinite }
.oh-oath-word{ position: absolute; bottom: 6%; left: 50%; translate: -50%; font-family: 'Outfit', var(--font-body); font-size: clamp(58px, 13vw, 210px); font-weight: 800; letter-spacing: .04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px #ffb9a314 }
.oh-oath .oh-shell{ position: relative; z-index: 1 }
.oh-oath-text{ font-family: 'Outfit', var(--font-body); font-size: clamp(28px, 4.4vw, 72px); font-weight: 650; line-height: 1.16; letter-spacing: -.035em }
.oh-oath-sign{ margin-top: clamp(22px, 3vh, 38px); font-family: 'Space Grotesk', var(--font-body); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--oh-muted) }

/* ── 9. Fondation ───────────────────────────────────────────── */
.oh-split{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 3.4vw, 64px); align-items: center }
.oh-founder{ position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 2.8vw, 48px); border-radius: 30px; border: 1px solid var(--oh-line); background: var(--oh-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 90px #0703065c, inset 0 1px 0 #ffffff0d }
.oh-founder-glow{ position: absolute; top: -30%; left: -10%; z-index: -1; width: 60%; height: 80%; background: radial-gradient(circle, #ff5a3d2e, transparent 62%); filter: blur(40px); animation: oh-breathe 12s ease-in-out infinite }
.oh-founder-head{ display: flex; align-items: center; gap: 18px }
.oh-founder-av{ display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; border: 1px solid #ffdc9a30; background: linear-gradient(150deg, #ff8a4c2e, #ff3d5c1a); font-size: 27px; color: var(--oh-gold); box-shadow: inset 0 1px 0 #ffffff24 }
.oh-founder-name{ font-family: 'Outfit', var(--font-body); font-size: clamp(20px, 1.8vw, 29px); font-weight: 600; letter-spacing: -.02em }
.oh-founder-role{ margin-top: 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oh-muted) }
.oh-founder > .oh-body{ margin-top: 4px }
.oh-founder-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 28px; padding-top: 26px; border-top: 1px solid #ffffff0f; font-size: 13.5px; color: var(--oh-soft) }
.oh-founder-list i{ margin-right: 9px; color: var(--oh-amber) }
.oh-orbit-stack{ display: grid; gap: clamp(14px, 1.8vh, 22px) }
.oh-chip{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.9vw, 28px); border-radius: 20px; border: 1px solid var(--oh-line); background: linear-gradient(150deg, #ffffff0a, #ffffff02 60%), #1c1410c9; box-shadow: 0 24px 60px #07030652; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: border-color .5s, box-shadow .5s }
.oh-chip span{ font-size: 13px; letter-spacing: .04em; color: var(--oh-muted) }
.oh-chip strong{ font-family: 'Space Grotesk', var(--font-body); font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.04em }
.oh-chip:hover{ border-color: #ffdc9a45; box-shadow: 0 28px 70px #07030670, 0 0 44px #ff7a3c24 }

/* ── 10. Valeurs ────────────────────────────────────────────── */
.oh-trio{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px) }
.oh-value{ position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 2.4vw, 38px); border-radius: 26px; border: 1px solid color-mix(in srgb, var(--oh-hue) 20%, var(--oh-line)); background: var(--oh-glass); box-shadow: 0 26px 60px #0703064a }
.oh-value::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--oh-hue), transparent); opacity: .55; transform: scaleX(.4); transform-origin: left; transition: transform .8s var(--oh-ease) }
.oh-value:hover::after{ transform: scaleX(1) }
.oh-value-ico{ display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border-radius: 17px; background: color-mix(in srgb, var(--oh-hue) 18%, transparent); border: 1px solid color-mix(in srgb, var(--oh-hue) 40%, transparent); color: color-mix(in srgb, var(--oh-hue) 85%, white); font-size: 23px; box-shadow: 0 0 30px color-mix(in srgb, var(--oh-hue) 24%, transparent) }
.oh-value h3{ font-family: 'Outfit', var(--font-body); font-size: clamp(18px, 1.5vw, 25px); font-weight: 600; letter-spacing: -.02em }
.oh-value p{ margin-top: 13px; font-size: 15px; line-height: 1.85; color: var(--oh-soft) }

/* ── 11. Engagements ────────────────────────────────────────── */
.oh-perks{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px) }
.oh-perk{ position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 2.2vw, 34px); border-radius: 24px; border: 1px solid var(--oh-line); background: linear-gradient(160deg, color-mix(in srgb, var(--oh-hue) 9%, transparent), #ffffff02 50%), #1c1410bf; box-shadow: 0 22px 54px #07030642; transition: border-color .5s, box-shadow .5s }
.oh-perk::before{ content: ""; position: absolute; inset: auto -20% -60% auto; z-index: -1; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--oh-hue) 30%, transparent), transparent 66%); opacity: 0; transition: opacity .6s }
.oh-perk:hover{ border-color: color-mix(in srgb, var(--oh-hue) 42%, transparent); box-shadow: 0 30px 70px #0703066b, 0 0 46px color-mix(in srgb, var(--oh-hue) 14%, transparent) }
.oh-perk:hover::before{ opacity: 1 }
.oh-perk-ico{ display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--oh-hue) 16%, transparent); border: 1px solid color-mix(in srgb, var(--oh-hue) 34%, transparent); color: color-mix(in srgb, var(--oh-hue) 86%, white); font-size: 20px }
.oh-perk h3{ margin-top: 22px; font-family: 'Outfit', var(--font-body); font-size: clamp(17px, 1.35vw, 22px); font-weight: 600; letter-spacing: -.02em }
.oh-perk p{ margin-top: 11px; font-size: 14.5px; line-height: 1.85; color: var(--oh-soft) }
.oh-perk-num{ position: absolute; top: 18px; right: 22px; font-family: 'Space Grotesk', var(--font-body); font-size: 34px; font-weight: 700; color: #ffffff08; line-height: 1 }
.oh-call{ display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 44px); margin-top: clamp(26px, 3.4vh, 44px); padding: clamp(22px, 2.4vw, 36px); border-radius: 26px; border: 1px solid #ffb34030; background: linear-gradient(110deg, #ff5a3d17, #ffdc9a0a 60%), #1c1410cc; box-shadow: 0 30px 70px #0703065c }
.oh-call-title{ display: flex; align-items: center; gap: 11px; font-family: 'Outfit', var(--font-body); font-size: clamp(18px, 1.6vw, 26px); font-weight: 600 }
.oh-call-title i{ color: var(--oh-amber) }
.oh-call-txt{ margin-top: 9px; font-size: 15px; line-height: 1.8; color: var(--oh-soft) }
.oh-call .oh-btn{ flex: 0 0 auto }

/* ── 12. La voie (rail 3D) ──────────────────────────────────── */
.oh-rail{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); padding-top: 14px }
.oh-rail-line{ position: absolute; top: 44px; left: 6%; right: 6%; height: 1px; background: #ffffff12; overflow: hidden }
.oh-rail-line i{ display: block; height: 100%; background: linear-gradient(90deg, var(--oh-ruby), var(--oh-ember), var(--oh-gold)); transform: scaleX(var(--oh-rail, 0)); transform-origin: left; box-shadow: 0 0 18px #ff7a3c8c }
.oh-rail-step{ position: relative; padding: clamp(24px, 2.4vw, 36px) clamp(18px, 1.8vw, 28px); border-radius: 24px; border: 1px solid var(--oh-line); background: var(--oh-glass); text-align: center; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: border-color .5s, transform .6s var(--oh-ease) }
.oh-rail-step:hover{ border-color: #ffdc9a47; transform: translateY(-8px) }
.oh-seal{ display: grid; place-items: center; width: 58px; height: 58px; margin: -53px auto 26px; border-radius: 50%; border: 1px solid #ffdc9a3a; background: radial-gradient(circle at 32% 28%, #ff8a4c3d, #1b130f 68%); font-family: 'Space Grotesk', var(--font-body); font-size: 19px; font-weight: 700; color: var(--oh-gold); box-shadow: 0 14px 34px #07030680, inset 0 1px 0 #ffffff1f }
.oh-rail-step h4{ font-family: 'Outfit', var(--font-body); font-size: clamp(16px, 1.3vw, 21px); font-weight: 600; letter-spacing: -.02em }
.oh-rail-step p{ margin-top: 13px; font-size: 14px; line-height: 1.85; color: var(--oh-soft) }

/* ── 13. Questions fréquentes ───────────────────────────────── */
.oh-qa{ display: grid; gap: 12px }
.oh-qa-item{ border: 1px solid var(--oh-line); border-radius: 20px; background: #1c1410a8; overflow: hidden; transition: border-color .45s, background .45s }
.oh-qa-item[open]{ border-color: #ffdc9a40; background: linear-gradient(#ff8a4c0d, transparent 40%), #1c1410d4 }
.oh-qa-item summary{ display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: clamp(17px, 1.8vw, 26px); font-family: 'Outfit', var(--font-body); font-size: clamp(15px, 1.3vw, 21px); font-weight: 550; cursor: pointer; list-style: none }
.oh-qa-item summary::-webkit-details-marker{ display: none }
.oh-qa-plus{ position: relative; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--oh-line); transition: background .4s, border-color .4s, rotate .5s var(--oh-ease) }
.oh-qa-plus::before,.oh-qa-plus::after{ content: ""; position: absolute; inset: 50% 6px auto; height: 1.5px; background: var(--oh-gold); translate: 0 -50% }
.oh-qa-plus::after{ rotate: 90deg; transition: opacity .4s }
.oh-qa-item[open] .oh-qa-plus{ background: #ff8a4c24; border-color: #ffdc9a5c; rotate: 180deg }
.oh-qa-item[open] .oh-qa-plus::after{ opacity: 0 }
.oh-qa-body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--oh-ease) }
.oh-qa-item[open] .oh-qa-body{ grid-template-rows: 1fr }
.oh-qa-body > p{ overflow: hidden; padding: 0 clamp(17px, 1.8vw, 26px); font-size: 15px; line-height: 1.9; color: var(--oh-soft); transition: padding .4s }
.oh-qa-item[open] .oh-qa-body > p{ padding-bottom: clamp(19px, 2vw, 28px) }

/* ── 14. Le portail (CTA final) ─────────────────────────────── */
.oh-portal{ position: relative; overflow: hidden; padding-block: clamp(56px, 10vh, 128px); text-align: center; border-top: 1px solid var(--oh-line-soft) }
.oh-portal-decor{ position: absolute; inset: 0; z-index: 0; pointer-events: none }
.oh-portal-glow{ position: absolute; left: 50%; bottom: -46%; width: min(1200px, 130%); height: 120%; translate: -50%; background: radial-gradient(ellipse at 50% 100%, #ff5a3d33, #ff3d5c0f 42%, transparent 68%); filter: blur(20px); animation: oh-breathe 10s ease-in-out infinite }
.oh-portal-ring{ position: absolute; left: 50%; top: 50%; width: min(760px, 86vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed #ff8a4c26; animation: oh-spin 40s linear infinite }
.oh-portal-ring--b{ width: min(520px, 64vw); border-style: solid; border-color: #ffdc9a14; animation-duration: 26s; animation-direction: reverse }
.oh-portal-inner{ position: relative; z-index: 1; display: grid; justify-items: center }
.oh-portal-txt{ max-width: 66ch; margin: 24px auto 0; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.9; color: var(--oh-soft) }
.oh-portal .oh-btn{ margin-top: clamp(28px, 4vh, 44px) }
.oh-portal-note{ margin-top: 20px; font-size: 12.5px; letter-spacing: .04em; color: var(--oh-muted) }
.oh-portal-note i{ color: var(--oh-amber); margin-right: 6px }

/* ── 15. Modale pavillon fermé ──────────────────────────────── */
.oh-modal{ position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: #080407b8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.oh-modal[hidden]{ display: none }
.oh-modal-box{ width: min(520px, 100%); padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; border: 1px solid var(--oh-line); background: linear-gradient(#ffffff0a, transparent 40%), #1b130ff2; text-align: center; box-shadow: 0 50px 120px #05020690; animation: oh-pop .5s var(--oh-ease) both }
.oh-modal-ico{ display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%; border: 1px solid #ffdc9a33; background: #ff8a4c1c; font-size: 25px; color: var(--oh-gold) }
.oh-modal-box h3{ font-family: 'Outfit', var(--font-body); font-size: clamp(21px, 2vw, 29px); font-weight: 650; letter-spacing: -.02em }
.oh-modal-box p{ margin-top: 15px; font-size: 15px; line-height: 1.85; color: var(--oh-soft) }
.oh-modal-actions{ display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap }
.oh-modal-actions .oh-btn{ min-height: 48px; padding: .85rem 1.4rem; font-size: .9rem }

/* ── 16. Images de mouvement ────────────────────────────────── */
@keyframes oh-lift-in { from { translate: 0 112%; opacity: 0 } to { translate: 0 0; opacity: 1 } }
@keyframes oh-shimmer { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@keyframes oh-tape { to { transform: translateX(-50%) } }
@keyframes oh-spin { to { rotate: 360deg } }
@keyframes oh-float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -16px } }
@keyframes oh-breathe { 0%, 100% { opacity: .55; scale: 1 } 50% { opacity: 1; scale: 1.07 } }
@keyframes oh-ping { 0% { opacity: .9; scale: .6 } 70%, 100% { opacity: 0; scale: 2.1 } }
@keyframes oh-drop { 0% { translate: 0 -4px; opacity: 0 } 30% { opacity: 1 } 100% { translate: 0 44px; opacity: 0 } }
@keyframes oh-floor-drift { to { background-position: 0 74px, 0 74px } }
@keyframes oh-kb { from { scale: 1 } to { scale: 1.07 } }
@keyframes oh-pop { from { opacity: 0; transform: translateY(22px) scale(.96) } to { opacity: 1; transform: none } }

/* ── 17. Adaptation ─────────────────────────────────────────── */
@media (max-width: 1240px) {
  .oh-hero-shell{ grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 54px) }
  .oh-stage-wrap{ max-width: 460px; margin-inline: auto }
  .oh-metrics{ grid-template-columns: 1fr 1fr }
  .oh-cards{ grid-template-columns: 1fr }
  .oh-card:nth-child(2){ --oh-ty: 0px }
  .oh-split{ grid-template-columns: 1fr }
  .oh-trio{ grid-template-columns: 1fr }
  .oh-perks{ grid-template-columns: 1fr 1fr }
  .oh-rail{ grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 44px) }
  .oh-rail-line{ display: none }
}
@media (max-width: 860px) {
  .oh{ gap: clamp(46px, 7vh, 84px) }
  .oh-hero-foot{ grid-template-columns: 1fr }
  .oh-founder-list{ grid-template-columns: 1fr }
  .oh-call{ flex-direction: column; align-items: flex-start }
  .oh-call .oh-btn{ width: 100% }
}
@media (max-width: 640px) {
  /* Sur mobile le titre reprend sa colonne : il peut s'y empiler sans déborder. */
  .oh-title{ width: auto; max-width: none; font-size: clamp(38px, 11.6vw, 56px) }
  .oh-perks,.oh-metrics,.oh-rail{ grid-template-columns: 1fr }
  .oh-actions .oh-btn{ flex: 1 1 100% }
  .oh-tag--a{ left: 2% } .oh-tag--b{ right: 2% }
  .oh-plaque{ bottom: -2% }
  .oh-seal{ margin-top: -44px }
  .oh-fido{ align-items: flex-start }
  .oh-wordmark{ top: 30% }
}
/* Échelons grands écrans : la composition suit la largeur du canevas.
   Chaque palier démarre exactement au plafond du niveau précédent. */

/* ── 17.1 Grand écran (≥1900px) ───────────────────────────────── */
@media (min-width: 1900px) {
  .oh-shell{ max-width: 1900px }
  .oh-shell--narrow{ max-width: 1260px }
  .oh-head{ max-width: 1180px; margin-bottom: clamp(56px, 4.4vw, 84px) }

  .oh-hero-shell{ grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(56px, 3.4vw, 88px) }
  .oh-kicker{ font-size: clamp(13px, .63vw, 15px); margin-bottom: clamp(26px, 2.2vw, 38px) }
  .oh-lead{ font-size: clamp(21px, .92vw, 24px); max-width: 54ch; margin-top: clamp(30px, 2.4vw, 42px) }
  .oh-actions{ gap: 20px; margin-top: clamp(36px, 2.8vw, 52px) }
  .oh-facts{ gap: clamp(30px, 2.6vw, 56px); margin-top: clamp(42px, 3.4vw, 60px); padding-top: clamp(28px, 2.2vw, 38px) }
  .oh-fact-v{ font-size: clamp(26px, 1.1vw, 30px) }
  .oh-fact-l{ font-size: 13px }

  .oh-btn{ min-height: 56px; padding: 1.05rem 1.8rem; font-size: .98rem }
  .oh-btn--xl{ min-height: 64px; padding: 1.2rem 2.2rem; font-size: 1.06rem }

  .oh-stage{ max-width: 720px }
  .oh-tag{ padding: .62rem 1.1rem; font-size: 12.5px }
  .oh-plaque span{ font-size: 11px }
  .oh-plaque strong{ font-size: clamp(23px, 1.15vw, 26px) }

  .oh-shell.oh-hero-foot{ max-width: 1720px; margin-inline: auto; gap: clamp(30px, 2.6vw, 52px); padding-block: clamp(28px, 2.4vw, 40px) }
  .oh-status{ font-size: 14px }
  .oh-paths{ max-width: 900px }
  .oh-paths a{ padding: 16px 20px; font-size: 17px }
  .oh-paths a > i{ font-size: 23px }
  .oh-paths a small{ font-size: 12px }
  .oh-fido{ max-width: 720px; justify-self: end; gap: 22px; padding: 22px }
  .oh-fido > img{ flex-basis: 76px; width: 76px; height: 76px }
  .oh-fido strong{ font-size: 17px }
  .oh-fido small{ font-size: 13px }
  .oh-scroll{ font-size: 12.5px }

  .oh-wordmark{ font-size: clamp(340px, 13.8vw, 420px) }
  .oh-crest{ font-size: clamp(86px, 4vw, 100px) }
  .oh-bar{ height: clamp(160px, 18vh, 240px) }
  .oh-tape{ font-size: clamp(27px, 1.35vw, 32px) }

  .oh-h2{ font-size: clamp(74px, 2.9vw, 86px) }
  .oh-sub{ font-size: clamp(19px, .9vw, 22px); max-width: 74ch }
  .oh-body{ font-size: clamp(18px, .85vw, 20px) }
  .oh-eyebrow{ padding: 9px 18px; font-size: 12px }

  .oh-metrics,.oh-cards,.oh-trio,.oh-perks,.oh-rail{ gap: clamp(26px, 1.9vw, 44px) }
  .oh-metric{ padding: clamp(40px, 2.3vw, 60px) clamp(26px, 1.9vw, 40px) }
  .oh-metric-v{ font-size: clamp(66px, 2.6vw, 78px) }
  .oh-metric-l{ margin-top: 22px; font-size: 17px }
  .oh-metric-s{ margin-top: 10px; font-size: 14px }

  .oh-card{ padding: clamp(38px, 2.6vw, 60px) }
  .oh-card-crest img{ width: 88px; height: 106px }
  .oh-card-title{ font-size: clamp(31px, 1.35vw, 38px) }
  .oh-card-craft{ font-size: 16px }
  .oh-card-hook{ margin-top: 22px; font-size: 17px; max-width: 46ch }
  .oh-duties{ gap: 14px; margin-top: 30px; padding-top: 26px }
  .oh-duties li{ font-size: 15.5px }
  .oh-card-cta{ margin-top: 32px; padding: 16px 24px; font-size: 16px }

  .oh-oath{ padding-block: clamp(120px, 12vh, 190px) }
  .oh-oath-glyph{ font-size: clamp(96px, 4.4vw, 110px) }
  .oh-oath-word{ font-size: clamp(210px, 8.3vw, 250px) }
  .oh-oath-text{ font-size: clamp(72px, 2.8vw, 84px) }
  .oh-oath-sign{ font-size: 13.5px }

  .oh-split{ gap: clamp(52px, 4vw, 88px) }
  .oh-founder{ padding: clamp(40px, 2.8vw, 64px) }
  .oh-founder-av{ width: 76px; height: 76px; font-size: 33px }
  .oh-founder-name{ font-size: clamp(29px, 1.15vw, 34px) }
  .oh-founder-role{ font-size: 13.5px }
  .oh-founder > .oh-body{ max-width: 68ch }
  .oh-founder-list{ gap: 18px 34px; margin-top: 38px; padding-top: 32px; font-size: 15.5px }
  .oh-chip{ padding: clamp(26px, 2.1vw, 38px) clamp(26px, 2.2vw, 40px) }
  .oh-chip span{ font-size: 14.5px }
  .oh-chip strong{ font-size: clamp(40px, 1.5vw, 46px) }

  .oh-value{ padding: clamp(34px, 2.4vw, 52px) }
  .oh-value-ico{ width: 64px; height: 64px; margin-bottom: 30px; font-size: 28px }
  .oh-value h3{ font-size: clamp(25px, 1.1vw, 29px) }
  .oh-value p{ margin-top: 18px; font-size: 16.5px; max-width: 44ch }
  .oh-perk{ padding: clamp(30px, 2.2vw, 46px) }
  .oh-perk-ico{ width: 56px; height: 56px; font-size: 24px }
  .oh-perk h3{ margin-top: 28px; font-size: clamp(22px, .95vw, 26px) }
  .oh-perk p{ margin-top: 15px; font-size: 16px; max-width: 42ch }
  .oh-perk-num{ top: 24px; right: 28px; font-size: 46px }
  .oh-call{ padding: clamp(30px, 2.4vw, 46px) }
  .oh-call-title{ font-size: clamp(26px, 1.1vw, 30px) }
  .oh-call-txt{ font-size: 16.5px; max-width: 62ch }

  .oh-rail-step{ padding: clamp(34px, 2.5vw, 50px) clamp(24px, 2vw, 40px) }
  .oh-seal{ width: 72px; height: 72px; margin: -62px auto 30px; font-size: 23px }
  .oh-rail-step h4{ font-size: clamp(21px, .9vw, 24px) }
  .oh-rail-step p{ margin-top: 16px; font-size: 15.5px }
  .oh-rail-line{ top: 54px }

  .oh-qa{ gap: 16px }
  .oh-qa-item summary{ padding: clamp(24px, 1.8vw, 32px); font-size: clamp(21px, .95vw, 25px) }
  .oh-qa-plus{ flex-basis: 32px; width: 32px; height: 32px }
  .oh-qa-body > p{ padding: 0 clamp(24px, 1.8vw, 32px); font-size: 17px }
  .oh-qa-item[open] .oh-qa-body > p{ padding-bottom: clamp(26px, 2vw, 36px) }

  .oh-portal{ padding-block: clamp(110px, 11vh, 180px) }
  .oh-portal-glow{ width: min(1900px, 130%) }
  .oh-portal-ring{ width: min(1100px, 62vw) }
  .oh-portal-ring--b{ width: min(760px, 44vw) }
  .oh-portal-txt{ font-size: clamp(19px, .9vw, 22px); max-width: 62ch }

  .oh-modal-box{ width: min(640px, 100%); padding: clamp(40px, 3vw, 56px) }
  .oh-modal-box h3{ font-size: clamp(29px, 1.25vw, 34px) }
  .oh-modal-box p{ font-size: 17px }
}

/* ── 17.2 Très grand écran (≥2400px) ──────────────────────────── */
/* Le conteneur s'élargit, pas la typo : les plafonds du palier ≥1900px
   restent la seule échelle. Sans ça, le texte grossissait deux fois plus
   vite que sa colonne et écrasait l'emblème. */
@media (min-width: 2400px) {
  .oh{ gap: clamp(110px, 6vw, 170px) }
  .oh-shell{ max-width: 2180px }
  .oh-shell--narrow{ max-width: 1420px }
  .oh-head{ max-width: 1320px }
  .oh-stage{ max-width: 800px }
  .oh-emblem{ width: 74% }
  .oh-hero-shell{ grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(70px, 3.2vw, 104px) }
  .oh-paths{ max-width: 1000px }
  .oh-fido{ max-width: 800px }
  .oh-shell.oh-hero-foot{ max-width: 1880px }
  .oh-lead{ max-width: 58ch }
}

/* ── 17.3 Écran ultralarge (≥3000px) ──────────────────────────── */
@media (min-width: 3000px) {
  .oh-shell{ max-width: 2440px }
  .oh-shell--narrow{ max-width: 1560px }
  .oh-hero-shell{ gap: clamp(90px, 3vw, 120px) }
  .oh-stage{ max-width: 860px }
  .oh-tag{ padding: .8rem 1.4rem; font-size: 14px; letter-spacing: .12em }
  .oh-cards,.oh-trio,.oh-perks{ gap: clamp(44px, 2vw, 64px) }
  .oh-card-hook,.oh-value p,.oh-perk p,.oh-call-txt{ font-size: 18px }
}

/* ── 18. Préférences de confort ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .oh :is(.oh-shaft, .oh-floor, .oh-ribbon-row, .oh-ring, .oh-orbit, .oh-emblem img, .oh-halo, .oh-crest, .oh-spark, .oh-oath-glyph, .oh-portal-ring, .oh-portal-glow, .oh-fido > img, .oh-scroll-line::after, .oh-status-dot::after, .oh-flame, .oh-modal-box){ animation: none !important }
  .oh-motion :is(.oh-head, .oh-hero, .oh-oath, .oh-portal-inner, .oh-founder, .oh-metrics, .oh-cards, .oh-trio, .oh-perks, .oh-rail, .oh-orbit-stack, .oh-qa, .oh-call) > *,.oh-motion :is(.oh-rise, .oh-mask-in){ opacity: 1 !important; translate: none !important }
  [data-oh-tilt],[data-oh-lift],[data-oh-drill],[data-oh-swim]{ transform: none !important }
  .oh-canvas,.oh-laser{ display: none }
}
@media (prefers-reduced-transparency: reduce) {
  .oh :is(.oh-metric, .oh-card, .oh-founder, .oh-chip, .oh-value, .oh-perk, .oh-rail-step, .oh-fido){ background: #191310; -webkit-backdrop-filter: none; backdrop-filter: none }
  .oh-atmos{ display: none }
}

/* ── 19. Thème clair : braise sur porcelaine ────────────────── */
html[data-theme="light"] .oh{
  --oh-ink: #2c1618;
  --oh-soft: #6b4a49;
  --oh-muted: #93736f;
  --oh-line: #8d3a2f26;
  --oh-line-soft: #8d3a2f17;
  --oh-glass: linear-gradient(158deg, #ffffffd9, #fff6efb8 60%);
  --oh-glass-flat: #fff7f1e6;
  --oh-flame: linear-gradient(96deg, #d8303f 0%, #e2683a 52%, #b97814 100%);
}
html[data-theme="light"] .oh-vignette{ background: radial-gradient(ellipse 78% 62% at 50% 44%, transparent 46%, #b9543f14 100%) }
html[data-theme="light"] .oh-wordmark,html[data-theme="light"] .oh-oath-word{ -webkit-text-stroke-color: #8d3a2f20 }
html[data-theme="light"] .oh-tape{ -webkit-text-stroke-color: #8d3a2f33 }
html[data-theme="light"] .oh-metric-v,html[data-theme="light"] .oh-chip strong{ filter: saturate(1.1) }
html[data-theme="light"] .oh-btn--flame{ color: #fff6f1 }
html[data-theme="light"] .oh-btn--ghost{ color: #2c1618; background: #ffffff8c }
html[data-theme="light"] .oh-tag,html[data-theme="light"] .oh-rail-step{ background: #fffaf6e8 }
html[data-theme="light"] .oh-perk-num{ color: #8d3a2f14 }
html[data-theme="light"] .oh-card{ box-shadow: 0 30px 70px #a54d3f1f, inset 0 1px 0 #fff }
html[data-theme="light"] .oh-qa-item{ background: #fff8f3d9 }
html[data-theme="light"] .oh-modal-box{ background: #fffaf7 }