/* JNMFO-26 · motion.css — bandeau « Bienvenue à Oran » animé + animations globales */
html{scroll-behavior:smooth}
::selection{background:var(--gold2,#e6b84a);color:#10281f}

/* ---------- Bandeau Oran ---------- */
.oh{--oh-s1:#6ec6e8;--oh-s2:#eaf8fc;--oh-w1:#1b8fb5;--oh-w2:#0d5a8a;--oh-sun:#f3c53c;--oh-h1:#176a4d;--oh-h2:#104f3a;--oh-cl:#fff;--oh-st:0;--oh-win:0;--oh-beam:0;--oh-moon:0;
position:relative;margin:56px 0 0;height:clamp(400px,40vw,500px);border-radius:28px;overflow:hidden;isolation:isolate;background:var(--oh-s1);color:#fff;box-shadow:var(--sh2,0 22px 50px rgba(0,0,0,.28))}
.oh[data-scene=sunset]{--oh-s1:#3a3478;--oh-s2:#ff9b5e;--oh-w1:#c75a6c;--oh-w2:#40285a;--oh-sun:#ff7a3c;--oh-h1:#1a4838;--oh-h2:#0e3027;--oh-cl:#ffc9a8;--oh-st:.35;--oh-win:.6}
.oh[data-scene=night]{--oh-s1:#050a1d;--oh-s2:#1e3263;--oh-w1:#11295c;--oh-w2:#040c22;--oh-h1:#0c3a2b;--oh-h2:#072920;--oh-cl:#7f93bd;--oh-st:1;--oh-win:1;--oh-beam:1;--oh-moon:1}
.oh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,28,40,.58),rgba(4,28,40,.12) 58%,transparent)}
.oh>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.oh stop{transition:stop-color 1.2s}
.oh-h1{fill:var(--oh-h1)}.oh-h2{fill:var(--oh-h2)}.oh-h1,.oh-h2,.oh-cl{transition:fill 1.2s}
.oh-cl{fill:var(--oh-cl);animation:ohDrift 80s linear infinite}
.oh-stars{opacity:var(--oh-st);transition:opacity 1.4s}.oh-star{fill:#fff;animation:ohTw 3.6s ease-in-out infinite}
.oh-moon{opacity:var(--oh-moon);transition:opacity 1.4s}
.oh-wins{opacity:var(--oh-win);transition:opacity 1.4s}.oh-win{fill:#ffd66b;animation:ohTw 5s ease-in-out infinite}
.oh-beam{opacity:var(--oh-beam);transition:opacity 1.4s}.oh-sweep{transform-origin:736px 102px;animation:ohSweep 7s ease-in-out infinite alternate}
.oh-sun{transition:transform 1.8s cubic-bezier(.5,0,.2,1),opacity 1.4s}
.oh[data-scene=sunset] .oh-sun{transform:translate(330px,150px)}
.oh[data-scene=night] .oh-sun{transform:translate(500px,330px);opacity:0}
.oh-rays{transform-origin:170px 140px;animation:ohSpin 70s linear infinite}
.oh-pulse{transform-origin:170px 140px;animation:ohPulse 4.5s ease-in-out infinite}
.oh-wave{animation:ohWave 7s linear infinite}.oh-wave.w2{animation-duration:9s;animation-direction:reverse}.oh-wave.w3{animation-duration:12s}
.oh-sail{animation:ohSail 34s ease-in-out infinite alternate}.oh-sail.b2{animation-direction:alternate-reverse}
.oh-bob{animation:ohBob 3.2s ease-in-out infinite}
.oh-bird{animation:ohFly 28s linear infinite}.oh-wing{transform-box:fill-box;transform-origin:center;animation:ohFlap .7s ease-in-out infinite alternate}
.oh-lamp{fill:#ffe9a0;animation:ohTw 2.4s ease-in-out infinite}
.oh-p1,.oh-p2,.oh-p3{transition:transform .6s ease-out}
.oh-p1{transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-8px))}
.oh-p2{transform:translate(calc(var(--px,0)*-24px),calc(var(--py,0)*-10px))}
.oh-p3{transform:translate(calc(var(--px,0)*-34px),calc(var(--py,0)*-12px))}

.oh-content{position:absolute;z-index:2;left:5%;bottom:8%;max-width:min(560px,90%)}
.oh-content>*{animation:ohIn 1s cubic-bezier(.2,.8,.2,1) both}
.oh-content>:nth-child(2){animation-delay:.15s}.oh-content>:nth-child(3){animation-delay:.3s}.oh-content>:nth-child(4){animation-delay:.4s}.oh-content>:nth-child(5){animation-delay:.5s}.oh-content>:nth-child(6){animation-delay:.65s}
.oh-eye{display:inline-flex;align-items:center;gap:8px;font:600 .78rem 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2,#e6b84a)}
.oh-eye i{width:9px;height:9px;border-radius:50%;background:var(--gold2,#e6b84a);animation:ohDot 1.8s ease-out infinite}
.oh-title{position:relative;display:inline-block;margin:6px 0 8px;font:700 clamp(2rem,5vw,3.9rem)/1.05 'Playfair Display',serif;text-shadow:0 4px 22px rgba(0,0,0,.45)}
.oh-title::after{content:"";position:absolute;left:0;bottom:-6px;height:4px;width:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold2,#e6b84a),transparent);transform-origin:left;animation:ohLine 1.2s .8s cubic-bezier(.2,.8,.2,1) both}
.oh-date{margin:10px 0 2px;font:600 .95rem 'DM Sans',sans-serif;letter-spacing:.18em;color:var(--gold2,#e6b84a)}
.oh-go{margin:0 0 14px;font:400 .92rem 'DM Sans',sans-serif;opacity:.92}
.oh-cd{display:flex;gap:10px;margin-bottom:18px}
.oh-cell{min-width:66px;padding:10px 8px;text-align:center;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.oh-cell b{display:block;font:700 clamp(1.3rem,3vw,2rem)/1 'Playfair Display',serif;font-variant-numeric:tabular-nums}
.oh-cell b.tick{animation:ohTick .45s ease-out}
.oh-cell span{display:block;margin-top:4px;font:500 .66rem 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.oh-cta{display:flex;flex-wrap:wrap;gap:10px}
.oh-btn{position:relative;overflow:hidden;padding:12px 22px;border-radius:999px;font:600 .92rem 'DM Sans',sans-serif;text-decoration:none;color:#10281f;background:linear-gradient(135deg,#f6d36b,#e0a92f);box-shadow:0 8px 20px rgba(0,0,0,.28);transition:transform .25s,box-shadow .25s}
.oh-btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .6s}
.oh-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 28px rgba(0,0,0,.35)}.oh-btn:hover::after{left:130%}
.oh-btn.ghost{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.oh-sw{position:absolute;z-index:3;top:14px;right:14px;display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.oh-sw button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:1.1rem;cursor:pointer;transition:transform .25s,background .25s}
.oh-sw button:hover{transform:scale(1.15)}.oh-sw button[aria-pressed=true]{background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.25)}
body.rtl .oh-content{left:auto;right:5%;text-align:right}body.rtl .oh-title::after{left:auto;right:0;transform-origin:right;background:linear-gradient(270deg,var(--gold2,#e6b84a),transparent)}
body.rtl .oh-sw{right:auto;left:14px}body.rtl .oh::after{background:linear-gradient(270deg,rgba(4,28,40,.58),rgba(4,28,40,.12) 58%,transparent)}body.rtl .oh-cd,body.rtl .oh-cta{flex-direction:row-reverse;justify-content:flex-end}

@keyframes ohDrift{from{transform:translateX(-300px)}to{transform:translateX(1700px)}}
@keyframes ohWave{to{transform:translateX(-150px)}}
@keyframes ohSail{to{transform:translateX(260px)}}
@keyframes ohBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes ohFly{from{transform:translateX(-80px)}to{transform:translateX(1300px)}}
@keyframes ohFlap{to{transform:scaleY(.35)}}
@keyframes ohSpin{to{transform:rotate(360deg)}}
@keyframes ohPulse{50%{transform:scale(1.12);opacity:.8}}
@keyframes ohTw{50%{opacity:.25}}
@keyframes ohSweep{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes ohIn{from{opacity:0;transform:translateY(24px)}}
@keyframes ohLine{from{transform:scaleX(0)}}
@keyframes ohTick{from{opacity:0;transform:translateY(-35%)}}
@keyframes ohDot{0%{box-shadow:0 0 0 0 rgba(230,184,74,.7)}100%{box-shadow:0 0 0 12px rgba(230,184,74,0)}}

@media(max-width:700px){
 .oh{height:clamp(460px,125vw,580px);border-radius:20px;margin-top:40px}
 .oh::after,body.rtl .oh::after{background:linear-gradient(0deg,rgba(4,28,40,.88),rgba(4,28,40,.25) 62%,transparent)}
 .oh-content,body.rtl .oh-content{left:6%;right:6%;bottom:5%;max-width:none}
 .oh-cd{gap:6px}.oh-cell{flex:1;min-width:0;padding:8px 2px}.oh-btn{flex:1;text-align:center;padding:12px 14px}
 .oh-sun{translate:430px 0}.oh-bird{display:none}
}

/* ---------- Animations globales ---------- */
.fx-sym{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-sym span{position:absolute;bottom:-70px;font-family:'Playfair Display',serif;color:var(--gold2,#c9962c);opacity:.09;animation:fxRise linear infinite}
@keyframes fxRise{to{transform:translateY(-118vh) rotate(45deg)}}
.fx-glow{position:fixed;left:0;top:0;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:1;will-change:transform;background:radial-gradient(circle,rgba(230,184,74,.15),transparent 65%)}
.fx-shot,.fx-art,.map-wrap{overflow:hidden}
.fx-shot img,.fx-art img,.map-wrap img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.fx-shot:hover img,.fx-art:hover img,.map-wrap:hover img{transform:scale(1.05)}}
.fx-opt{position:fixed;left:14px;bottom:14px;z-index:60;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;font-size:1.15rem;background:var(--gold2,#e6b84a);color:#10281f;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .25s,opacity .25s}
.fx-opt:hover{transform:scale(1.1) rotate(12deg)}.fx-opt[aria-pressed=false]{opacity:.55;filter:grayscale(1)}
body.rtl .fx-opt{left:auto;right:14px}
body.no-motion .oh *,body.no-motion .oh *::after{animation:none!important}
body.no-motion .fx-sym,body.no-motion .fx-glow{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}