/* ============================================================
   CLARION STRATUM — hero-or.css · ouverture « gravure à l'or »
   Les traits d'or se dessinent lentement, l'aube se lève dans l'arche,
   une trirème toute en courbes rame vers la lumière. Doux, lent, majestueux.
   ============================================================ */
.hero .embleme,.hero .pilastre{display:none !important}
.scene-or{display:block;width:min(1100px,100%);height:auto;margin:0 auto;overflow:hidden}

/* ---------- Les traits se dessinent ---------- */
.scene-or .trace{stroke-dasharray:1;stroke-dashoffset:1;animation:or-dessin var(--d,1.8s) cubic-bezier(.45,.05,.3,1) var(--t,0s) forwards}
.scene-or .trace.fin{stroke-width:1;opacity:.75}
@keyframes or-dessin{to{stroke-dashoffset:0}}

/* Masses de marbre de nuit, clef d'or, inscription */
.scene-or .masse{opacity:0;animation:or-fondu 2.4s ease 1.4s forwards}
.scene-or .cle{opacity:0;transform-box:fill-box;transform-origin:center;animation:or-cle 1.1s cubic-bezier(.3,1.25,.5,1) 2.9s forwards,or-luit 5s ease-in-out 4.2s infinite}
.scene-or .inscription{opacity:0;letter-spacing:22px;animation:or-inscription 2.2s cubic-bezier(.2,.7,.2,1) 3.1s forwards}
.scene-or .devise{opacity:0;animation:or-fondu 2s ease 3.6s forwards}
@keyframes or-fondu{to{opacity:1}}
@keyframes or-cle{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes or-luit{0%,100%{filter:none}50%{filter:drop-shadow(0 0 7px rgba(251,235,184,.9))}}
@keyframes or-inscription{to{opacity:1;letter-spacing:14px}}

/* ---------- L'aube dans l'arche ---------- */
.scene-or .halo{opacity:0;animation:or-fondu 4s ease 1.8s forwards,or-respire 7s ease-in-out 6s infinite}
.scene-or .aube{opacity:0;animation:or-fondu 3s ease 1.6s forwards}
.scene-or .soleil{opacity:0;transform:translateY(46px);animation:or-soleil 5s cubic-bezier(.2,.7,.2,1) 2s forwards}
.scene-or .horizon{opacity:0;animation:or-fondu 2s ease 2.4s forwards}
@keyframes or-soleil{to{opacity:1;transform:none}}
@keyframes or-respire{0%,100%{opacity:1}50%{opacity:.75}}

/* ---------- La mer ---------- */
.scene-or .houle{opacity:0;animation:or-houle-apparait 2.4s ease forwards,or-houle 11s ease-in-out infinite alternate}
.scene-or .mer{animation:none}
@keyframes or-houle-apparait{to{opacity:var(--o,.2)}}
@keyframes or-houle{from{transform:translateX(0)}to{transform:translateX(-30px)}}
.scene-or .reflets{opacity:0;animation:or-fondu 3s ease 3s forwards}
.scene-or .reflets rect{opacity:.2;animation:or-scintille 2.8s ease-in-out infinite alternate}
@keyframes or-scintille{from{opacity:.12}to{opacity:.95}}

/* ---------- La trirème : elle glisse lentement vers l'arche ---------- */
.scene-or .navire{opacity:0;transform:translate(600px,880px) scale(.9);animation:or-navigue 10s cubic-bezier(.3,.55,.25,1) 3.6s forwards}
.scene-or .navire-flot{transform-box:fill-box;transform-origin:50% 90%;animation:or-tangue 4.6s ease-in-out infinite}
.scene-or .sillage{stroke-dasharray:1 0;opacity:.4}
.scene-or .ecume{animation:or-ecume 2.8s ease-in-out infinite}
.scene-or .lanterne{animation:or-lanterne 3s ease-in-out infinite alternate}
@keyframes or-navigue{0%{opacity:0;transform:translate(600px,880px) scale(.9)}14%{opacity:1}100%{opacity:1;transform:translate(600px,722px) scale(.6)}}
@keyframes or-tangue{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg) translateY(2px)}}
@keyframes or-ecume{0%,55%{opacity:0}70%{opacity:.7}100%{opacity:0}}
@keyframes or-lanterne{from{opacity:.5}to{opacity:1}}

/* Le texte arrive quand la gravure est posée */
.hero h1,.hero .baseline,.hero .hero-sub,.hero .hero-cta,.hero .chips{opacity:0;animation:or-texte 1.4s ease forwards}
.hero h1{animation-delay:3.4s}.hero .baseline{animation-delay:3.8s}.hero .hero-sub{animation-delay:4.2s}
.hero .hero-cta{animation-delay:4.6s}.hero .chips{animation-delay:5s}
@keyframes or-texte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- La traversée au défilement (traversee.js) ---------- */
.hero.hero-traversee{overflow:clip !important;height:230vh;min-height:0 !important;padding:0 !important;display:block !important}
.hero-traversee .scene-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:78px 20px 16px;box-sizing:border-box;overflow:hidden}
.hero-traversee .scene-or{flex:0 0 auto;width:auto;height:clamp(240px,64vh,760px);max-width:100%;margin:0 auto 6px;will-change:transform;transform-origin:50% 56%}
.hero-traversee h1{font-size:clamp(2rem,5vw,3.3rem) !important;margin:0 !important}
.hero-traversee .baseline{margin:4px 0 8px !important}
.hero-traversee .hero-sub{margin:0 0 12px !important;font-size:1.02rem}
.hero-traversee .hero-cta{margin:0 0 10px !important}
.hero-traversee .chips{margin:0 !important}
.hero-traversee .scroll-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%)}
.hero-traversee .lumiere-traversee{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 44%,#FFFDF4 0%,#FBEBC4 35%,#F5F1E9 75%)}
@media (max-width:760px){
  .hero-traversee .scene-or{height:auto;width:112%;max-width:none}
  .hero-traversee .hero-sub,.hero-traversee .chips{display:none}
}
@media (max-height:720px){.hero-traversee .chips,.hero-traversee .hero-sub{display:none}}
@media (max-height:780px){.hero-traversee .scroll-hint{display:none}}
@media (max-width:480px){.brand-name small{display:none}.brand-name b{font-size:.92rem;letter-spacing:.24em}}

@media (prefers-reduced-motion:reduce){
  .scene-or *,.hero h1,.hero .baseline,.hero .hero-sub,.hero .hero-cta,.hero .chips{animation:none !important;opacity:1 !important}
  .scene-or .trace{stroke-dashoffset:0 !important}
  .scene-or .houle{opacity:var(--o,.2) !important}
  .scene-or .soleil{transform:none !important}
  .scene-or .navire{transform:translate(600px,722px) scale(.6) !important}
  .hero.hero-traversee{height:auto}
  .hero-traversee .scene-stage{position:relative;height:auto}
}

/* ============================================================
   v5 : du rocher brut à l'arc de triomphe (le défilement redevient libre)
   ============================================================ */
.hero.hero-traversee{height:auto !important}
.scene-or{--decal:3.4s}
/* Les traits d'or se dessinent pendant l'approche de la trirème */
.scene-or .trace{animation-duration:calc(var(--d,1.8s) * 1.35);animation-delay:calc(var(--t,0s) * 1.5 + var(--decal))}
.scene-or .masse{animation:or-fondu 3.2s ease 5.6s forwards}
.scene-or .cle{animation:or-cle 1.1s cubic-bezier(.3,1.25,.5,1) 8.9s forwards,or-luit 5s ease-in-out 10.2s infinite}
.scene-or .inscription{animation:or-inscription 2.4s cubic-bezier(.2,.7,.2,1) 9.2s forwards}
/* L'aube se lève dès le début, derrière le rocher */
.scene-or .halo{animation:or-fondu 3s ease .4s forwards,or-respire 7s ease-in-out 4s infinite}
.scene-or .aube{animation:or-fondu 2.4s ease .3s forwards}
.scene-or .soleil{animation:or-soleil 6s cubic-bezier(.2,.7,.2,1) .6s forwards}
.scene-or .horizon{animation:or-fondu 2s ease .8s forwards}
.scene-or .reflets{animation:or-fondu 3s ease 1.2s forwards}
/* Le rocher : présent d'emblée, il se défait facette par facette, de la base vers le sommet */
.scene-or .rocher{opacity:0;animation:or-fondu 1.6s ease .2s forwards}
.scene-or .facette{transform-box:fill-box;transform-origin:center;animation:or-roc 1.5s cubic-bezier(.5,0,.7,.4) var(--r) forwards}
@keyframes or-roc{0%{opacity:1;transform:none}35%{opacity:.9;fill:#B9B08E}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.6) rotate(8deg)}}
/* La trirème approche pendant toute la métamorphose */
.scene-or .navire{animation:or-navigue 11.5s cubic-bezier(.3,.55,.25,1) 1.2s forwards}
/* Le titre n'attend pas la fin de la scène */
.hero h1{animation-delay:1.4s}.hero .baseline{animation-delay:1.8s}.hero .hero-sub{animation-delay:2.2s}
.hero .hero-cta{animation-delay:2.6s}.hero .chips{animation-delay:3s}
@media (prefers-reduced-motion:reduce){.scene-or .rocher{display:none}}
.hero .scene-or{width:auto;height:clamp(260px,62vh,720px);max-width:100%;margin:0 auto 18px}
@media (max-width:760px){.hero .scene-or{width:108%;height:auto;max-width:none}}

/* ============================================================
   v6 : la caverne de la peur, détruite par le soleil
   ============================================================ */
.scene-or{--decal:6.9s}
.scene-or .trace{animation-delay:calc(var(--t,0s) * .95 + var(--decal))}
.scene-or .masse{animation:or-fondu 3s ease 7.6s forwards}
.scene-or .cle{animation:or-cle 1.1s cubic-bezier(.3,1.25,.5,1) 10.2s forwards,or-luit 5s ease-in-out 11.5s infinite}
.scene-or .inscription{animation:or-inscription 2.4s cubic-bezier(.2,.7,.2,1) 10.5s forwards}
.scene-or .halo{animation:or-fondu 2.4s ease 6.4s forwards,or-respire 7s ease-in-out 9s infinite}
.scene-or .reflets{animation:or-fondu 3s ease 7s forwards}
.scene-or .navire{animation:or-navigue 10.5s cubic-bezier(.3,.55,.25,1) .8s forwards}

/* La caverne : présente d'emblée, sombre et menaçante */
.scene-or .caverne{opacity:0;animation:or-fondu 1.4s ease .1s forwards}
.scene-or .paire{opacity:0;transform-box:fill-box;transform-origin:center;animation:or-yeux 3.6s ease-in-out var(--b) infinite;filter:drop-shadow(0 0 4px #E0642E)}
.scene-or .yeux{animation:or-eteint .5s ease 5.7s forwards}
@keyframes or-yeux{0%{opacity:0;transform:scaleY(1)}12%{opacity:.95}46%{opacity:.95;transform:scaleY(1)}50%{transform:scaleY(.1)}54%{transform:scaleY(1)}80%{opacity:.9}100%{opacity:0}}
@keyframes or-eteint{to{opacity:0}}
/* Un point de lumière naît au fond, grandit, puis tout s'embrase */
.scene-or .naissance{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.04);animation:or-naissance 3.6s cubic-bezier(.5,0,.3,1) 5.1s forwards}
@keyframes or-naissance{0%{opacity:0;transform:scale(.04)}30%{opacity:1;transform:scale(.35)}60%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2.4)}}
.scene-or .gouffre{animation:or-eteint 1.4s ease 6.6s forwards}
/* Fissures d'or, puis la roche vole en éclats */
.scene-or .fissures{stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #FFD98A);animation:or-dessin 1s cubic-bezier(.6,0,.4,1) 6.1s forwards,or-eteint .8s ease 7.6s forwards}
.scene-or .eclat{transform-box:fill-box;transform-origin:center;animation:or-eclat 1.7s cubic-bezier(.4,0,.8,.5) var(--e) forwards}
@keyframes or-eclat{0%{opacity:1;transform:none;fill:#1A2323}15%{fill:#6B5A33}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(.7)}}
.scene-or .grain,.scene-or .lisere{animation:or-eteint .6s ease 7s forwards}
@media (prefers-reduced-motion:reduce){.scene-or .caverne{display:none}}

/* ============================================================
   v7 : la falaise de strates, détruite par la lumière strate par strate
   ============================================================ */
.scene-or .strate-roc{transform-box:fill-box;transform-origin:center;animation:or-strate 1.35s cubic-bezier(.45,0,.75,.45) var(--e) forwards}
@keyframes or-strate{0%{opacity:1;transform:none;filter:none}20%{filter:brightness(1.9) sepia(.5)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(.92);filter:brightness(2.4) sepia(.7)}}
.scene-or .joint-or{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 6px #FFD98A);animation:or-joint 1.2s ease var(--j) forwards}
@keyframes or-joint{0%{opacity:1;stroke-dashoffset:1}45%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.scene-or .joints{animation:or-eteint 1.8s ease 6.9s forwards}
.scene-or .rim{animation:or-eteint 1s ease 6.4s forwards}
.scene-or .ecume-roc{opacity:0;transform-box:fill-box;transform-origin:center;animation:or-ressac 2.9s ease-in-out infinite}
@keyframes or-ressac{0%,100%{opacity:0;transform:scaleX(.6)}40%{opacity:.55;transform:scaleX(1.1)}}
.scene-or .ecumes{animation:or-eteint 1.2s ease 8.8s forwards}
.scene-or .naissance{animation:or-naissance 3.6s cubic-bezier(.5,0,.3,1) 5s forwards}

/* ============================================================
   v8 : l'arche terne qui se révèle magnifique
   ============================================================ */
/* L'arche terne : visible d'emblée, grise, sans ornement ni éclat */
.scene-or .arc-terne .trace{stroke:#6A7275 !important;stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;opacity:.85}
.scene-or .arc-terne .trace.fin,.scene-or .arc-terne .inscription{display:none}
.scene-or .arc-terne .masse{opacity:1 !important;animation:none !important;fill:#1F272A}
.scene-or .arc-terne .cle{opacity:1 !important;animation:none !important;fill:#4C5456}
.scene-or .arc-terne{opacity:0;animation:or-terne-apparait 1.2s ease .1s forwards,or-terne-efface 4.6s ease-in 5.2s forwards}
@keyframes or-terne-apparait{to{opacity:1}}
@keyframes or-terne-efface{from{opacity:1}to{opacity:0}}
/* Ciel bouché dans l'ouverture, puis le soleil perce */
.scene-or .voile-gris{animation:or-eteint 3.2s ease 4s forwards}
.scene-or .aube{animation:or-fondu 1s ease .1s forwards}
.scene-or .soleil{animation:or-soleil 5.5s cubic-bezier(.2,.7,.2,1) 3.6s forwards}
.scene-or .halo{animation:or-fondu 3s ease 4.6s forwards,or-respire 7s ease-in-out 8s infinite}
.scene-or .reflets{animation:or-fondu 3s ease 5.4s forwards}
/* La mer passe du gris à l'or */
.scene-or .mer{stroke:#5B6466;animation:or-mer-dore 4s ease 4.6s forwards}
@keyframes or-mer-dore{to{stroke:#E2C06F}}
/* L'arche d'or se dessine par-dessus pendant l'approche */
.scene-or{--decal:4.4s}
.scene-or .trace{animation-delay:calc(var(--t,0s) * 1.05 + var(--decal))}
.scene-or .masse{animation:or-fondu 3s ease 5.6s forwards}
.scene-or .cle{animation:or-cle 1.1s cubic-bezier(.3,1.25,.5,1) 8.4s forwards,or-luit 5s ease-in-out 9.8s infinite}
.scene-or .inscription{animation:or-inscription 2.4s cubic-bezier(.2,.7,.2,1) 8.8s forwards}
.scene-or .navire{animation:or-navigue 10.5s cubic-bezier(.3,.55,.25,1) .6s forwards}
@media (prefers-reduced-motion:reduce){.scene-or .arc-terne,.scene-or .voile-gris{display:none}.scene-or .mer{stroke:#E2C06F}}

/* v9 : grisaille nuancée */
.scene-or .arc-terne .masse{fill:url(#pierre-terne) !important}
.scene-or .arc-terne .trace{stroke:#7A8385 !important;opacity:.7}
.scene-or .arc-terne .trace:nth-child(3n){opacity:.5}
.scene-or .arc-terne .cle{fill:url(#pierre-terne) !important;stroke:#7A8385;stroke-width:1}
.scene-or .mer{stroke:#66737A}
.scene-or .nuages-gris{animation:or-derive 14s ease-in-out infinite alternate}
@keyframes or-derive{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

/* ============================================================
   v10 : la mer de brume et d'éclairs, puis l'arche d'or
   ============================================================ */
.scene-or{--decal:5.8s}
.scene-or .masse{animation:or-fondu 3s ease 6.8s forwards}
.scene-or .cle{animation:or-cle 1.1s cubic-bezier(.3,1.25,.5,1) 9.4s forwards,or-luit 5s ease-in-out 10.8s infinite}
.scene-or .inscription{animation:or-inscription 2.4s cubic-bezier(.2,.7,.2,1) 9.8s forwards}
.scene-or .voile-gris{animation:or-eteint 2.6s ease 5.2s forwards}
.scene-or .soleil{animation:or-soleil 5.5s cubic-bezier(.2,.7,.2,1) 5.2s forwards}
.scene-or .halo{animation:or-fondu 3s ease 5.8s forwards,or-respire 7s ease-in-out 9s infinite}
.scene-or .reflets{animation:or-fondu 3s ease 6.4s forwards}
.scene-or .mer{stroke:#51606A;animation:or-mer-dore 4s ease 5.8s forwards}
.scene-or .navire{animation:or-navigue 11.5s cubic-bezier(.3,.55,.25,1) .4s forwards}
/* Nuit d'orage, brume, pluie */
.scene-or .nuit-orage{opacity:.72;animation:or-eteint 3s ease 5.2s forwards}
.scene-or .nappe{fill:#7F8E97;opacity:.62;animation:or-brume-derive 9s ease-in-out infinite alternate}
.scene-or .nappe:nth-child(3n){fill:#566671}
.scene-or .nappe:nth-child(4n){fill:#A3B0B7;opacity:.5}
.scene-or .brume,.scene-or .brume-avant{animation:or-eteint 1s ease 9.6s forwards}
.scene-or .nappe-g{animation:or-brume-derive 9s ease-in-out infinite alternate,or-rideau-g 4.2s cubic-bezier(.5,0,.3,1) 5.3s forwards}
.scene-or .nappe-d{animation:or-brume-derive 9s ease-in-out infinite alternate-reverse,or-rideau-d 4.2s cubic-bezier(.5,0,.3,1) 5.3s forwards}
@keyframes or-brume-derive{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
@keyframes or-rideau-g{to{transform:translateX(-420px);opacity:0}}
@keyframes or-rideau-d{to{transform:translateX(420px);opacity:0}}
.scene-or .pluie{animation:or-pluie .5s linear infinite,or-eteint 1.6s ease 5s forwards}
@keyframes or-pluie{from{transform:translate(0,0)}to{transform:translate(-9px,24px)}}
/* Éclairs et flashs, chacun à son instant */
.scene-or .eclair{opacity:0;filter:drop-shadow(0 0 8px #CFE0FF) drop-shadow(0 0 18px #9FB8E0);animation:or-eclair .55s linear var(--f) forwards}
.scene-or .flash{opacity:0;animation:or-flash .6s ease-out var(--f) forwards}
@keyframes or-eclair{0%{opacity:0}6%{opacity:1}14%{opacity:.15}22%{opacity:1}45%{opacity:.6}100%{opacity:0}}
@keyframes or-flash{0%{opacity:0}6%{opacity:.34}14%{opacity:.05}22%{opacity:.26}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.scene-or .tempete,.scene-or .brume-avant{display:none}}
/* v10b : brume sombre d'orage */
.scene-or .nuit-orage{opacity:.82}
.scene-or .nappe{fill:#4E5D67;opacity:.6}
.scene-or .nappe:nth-child(3n){fill:#34434D}
.scene-or .nappe:nth-child(4n){fill:#6E7C85;opacity:.45}

/* v11 : bande panoramique sur toute la largeur de l'écran */
.hero .scene-or{width:100vw !important;max-width:none !important;height:clamp(340px,66vh,780px) !important;margin:0 0 18px calc(50% - 50vw) !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 93%,transparent 100%)}
@media (max-width:760px){.hero .scene-or{height:clamp(300px,54vh,440px) !important}}

/* ============================================================
   v12 : une mer, puis l'arche. Rien d'autre.
   ============================================================ */
.scene-or .mer{stroke:#E2C06F;animation:none}
.scene-or .houle{animation:or-houle-apparait 2s ease forwards,or-houle 11s ease-in-out infinite alternate}
.scene-or{--decal:1.8s}
.scene-or .trace{animation-delay:calc(var(--t,0s) * 1.1 + var(--decal))}
.scene-or .masse{animation:or-fondu 3s ease 2.6s forwards}
.scene-or .aube{animation:or-fondu 2.6s ease 2.2s forwards}
.scene-or .soleil{animation:or-soleil 5s cubic-bezier(.2,.7,.2,1) 2.6s forwards}
.scene-or .horizon{animation:or-fondu 2s ease 2.8s forwards}
.scene-or .halo{animation:or-fondu 3s ease 3s forwards,or-respire 7s ease-in-out 6s infinite}
.scene-or .reflets{animation:or-fondu 3s ease 3.2s forwards}
.scene-or .cle{animation:or-cle 1.1s cubic-bezier(.3,1.25,.5,1) 5.4s forwards,or-luit 5s ease-in-out 6.8s infinite}
.scene-or .inscription{animation:or-inscription 2.4s cubic-bezier(.2,.7,.2,1) 5.8s forwards}
.scene-or .navire{animation:or-navigue 9s cubic-bezier(.3,.55,.25,1) .5s forwards}
/* Téléphone : hauteur calculée pour que l'arche entière tienne dans la largeur (≈ 700 unités visibles) */
@media (max-width:760px){.hero .scene-or{height:calc(100vw * 1.22) !important;max-height:none !important}}