/* JNMFO-26 — visuals.css : designs, photos, sections animées */

/* ───────── Décor mathématique flottant (sections) ───────── */
.fx-has-decor{position:relative;overflow:clip;isolation:isolate}
.fx-decor{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fx-sym{position:absolute;font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1;color:var(--teal2);opacity:var(--o,.1);
  animation:fxFloat var(--t,14s) ease-in-out var(--dl,0s) infinite}
.fx-sym.gold{color:var(--gold2)}
[data-theme=dark] .fx-sym{opacity:calc(var(--o,.1) * 1.3)}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-26px) rotate(9deg)}}

/* ───────── Vagues animées ───────── */
.fx-wave{position:absolute;left:0;right:0;height:64px;overflow:hidden;line-height:0;pointer-events:none;z-index:2}
.fx-wave.bottom{bottom:-1px}
.fx-wave.top{top:-1px;transform:scaleY(-1)}
.fx-wave svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:fxWave 18s linear infinite}
.fx-wave svg+svg{animation-duration:11s;animation-direction:reverse;opacity:.55}
.fx-wave path{fill:var(--wave,var(--white))}
@keyframes fxWave{to{transform:translateX(-50%)}}
.page-header.has-wave{padding-bottom:104px}
.page-header.has-wave::after{display:none}
.has-wave-host{position:relative}

/* ───────── Bande « En chiffres » ───────── */
.fx-stats{position:relative;overflow:hidden;color:#fff;padding:110px 24px 120px;
  background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/52px 52px,
             linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/52px 52px,
             linear-gradient(130deg,var(--b900),var(--b700) 45%,var(--b800) 70%,var(--b900));background-size:52px 52px,52px 52px,300% 300%;
  animation:fxGrad 16s ease-in-out infinite}
@keyframes fxGrad{0%,100%{background-position:0 0,0 0,0% 50%}50%{background-position:52px 52px,52px 52px,100% 50%}}
.fx-stats::before,.fx-stats::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:fxDrift 14s ease-in-out infinite}
.fx-stats::before{width:380px;height:380px;left:-90px;top:-80px;background:rgba(226,185,59,.28)}
.fx-stats::after{width:440px;height:440px;right:-120px;bottom:-140px;background:rgba(var(--b500-rgb),.35);animation-delay:-6s}
@keyframes fxDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.18)}}
.fx-stats .container{position:relative;z-index:3}
.fx-stats h2{color:#fff}
.fx-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.fx-stat{text-align:center;padding:34px 18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:translate .35s var(--ease),background .35s,border-color .35s}
.fx-stat:hover{translate:0 -8px;background:rgba(255,255,255,.12);border-color:var(--gold2)}
.fx-stat b{display:block;font:700 clamp(2.6rem,5vw,3.8rem)/1 'Playfair Display',serif;color:var(--gold2);margin-bottom:10px;text-shadow:0 4px 24px rgba(226,185,59,.35)}
.fx-stat span{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* ───────── Bandeau défilant (thématiques) ───────── */
.fx-marquee{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--b900),var(--b700),var(--b900));padding:18px 0;border-block:3px solid var(--gold2);user-select:none}
.fx-mq-row{display:flex;width:max-content;animation:fxMarquee 38s linear infinite}
.fx-mq-row.rev{animation-direction:reverse;animation-duration:52s;margin-top:6px}
.fx-marquee:hover .fx-mq-row{animation-play-state:paused}
.fx-mq-set{display:flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap}
.fx-mq-set span{font:600 clamp(1.1rem,2.2vw,1.6rem) 'Playfair Display',serif;color:#fff;letter-spacing:.03em}
.fx-mq-row.rev .fx-mq-set span{color:transparent;-webkit-text-stroke:1px rgba(226,185,59,.85);font-weight:700}
.fx-mq-set i{font-style:normal;color:var(--gold2);font-size:1.1rem}
@keyframes fxMarquee{to{transform:translateX(-50%)}}
body.rtl .fx-mq-row{animation-direction:reverse}
body.rtl .fx-mq-row.rev{animation-direction:normal}

/* ───────── Galerie en mosaïque ───────── */
.fx-gallery{background:var(--white)}
.fx-mosaic{display:grid;grid-template-columns:1.5fr 1fr .9fr;grid-auto-rows:230px;gap:20px;margin-top:44px}
.fx-shot{position:relative;margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--sh2);background:var(--b800);display:block;text-decoration:none;color:#fff;
  translate:0 var(--py,0px);transition:box-shadow .4s}
.fx-shot.s1{grid-row:span 2}.fx-shot.s3{grid-row:span 2;grid-column:3}
.fx-shot img{width:100%;height:100%;object-fit:cover;display:block;animation:fxKen 22s ease-in-out infinite alternate;transition:filter .5s}
.fx-shot.s2 img{animation-delay:-8s}.fx-shot.s3 img{object-position:top;animation-delay:-14s}
@keyframes fxKen{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1.5%)}}
.fx-shot:hover img{filter:saturate(1.15) brightness(1.05)}
.fx-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 20px 18px;font:600 1rem 'Playfair Display',serif;
  background:linear-gradient(transparent,rgba(var(--b900-rgb),.92));translate:0 12px;opacity:.92;transition:translate .4s var(--ease),opacity .4s}
.fx-shot figcaption::before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--gold2);margin-bottom:8px;transition:width .4s var(--ease)}
.fx-shot:hover figcaption{translate:0 0;opacity:1}.fx-shot:hover figcaption::before{width:70px}
.fx-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.fx-tile{display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(135deg,var(--b700),var(--b600) 60%,var(--b500));background-size:200% 200%;animation:fxGrad2 9s ease-in-out infinite}
@keyframes fxGrad2{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.fx-tile .big{font:700 5.2rem/1 'Playfair Display',serif;color:var(--gold2);display:block;animation:fxSpin 14s linear infinite;transform-origin:50% 55%;text-shadow:0 8px 30px rgba(0,0,0,.3)}
@keyframes fxSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.fx-tile p{margin:10px 0 0;font:600 .95rem 'Playfair Display',serif;color:#fff}

/* ───────── Titres : soulignement animé ───────── */
section h2.fx-reveal::after{content:"";display:block;height:3px;width:0;margin-top:12px;border-radius:3px;background:linear-gradient(90deg,var(--gold2),var(--teal2));transition:width .9s var(--ease) .25s}
section h2[style*="center"].fx-reveal::after{margin-inline:auto}
section h2.fx-reveal.fx-in::after{width:72px}
.fx-stats h2.fx-reveal::after{background:var(--gold2)}

/* ───────── Entrées directionnelles ───────── */
@keyframes fxLeft{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}
@keyframes fxRight{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}
@keyframes fxZoom{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
.fx-reveal.fx-in.dir-l{animation-name:fxLeft}
.fx-reveal.fx-in.dir-r{animation-name:fxRight}
.fx-reveal.fx-in.dir-z{animation-name:fxZoom}
body.rtl .fx-reveal.fx-in.dir-l{animation-name:fxRight}
body.rtl .fx-reveal.fx-in.dir-r{animation-name:fxLeft}

/* ───────── Frise du programme qui se dessine ───────── */
.timeline::before{background:linear-gradient(var(--teal2),var(--gold2));transform:scaleY(var(--tl,1));transform-origin:top}

/* ───────── Hero : halos lumineux ───────── */
.fx-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:fxDrift 16s ease-in-out infinite}
.fx-orb.a{width:340px;height:340px;right:6%;top:10%;background:rgba(226,185,59,.22)}
.fx-orb.b{width:420px;height:420px;left:35%;bottom:-160px;background:rgba(var(--b500-rgb),.28);animation-delay:-7s}

@media(max-width:980px){
  .fx-stat-grid{grid-template-columns:1fr 1fr}
  .fx-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .fx-shot.s1{grid-column:1/-1;grid-row:span 1}.fx-shot.s3{grid-column:auto;grid-row:span 1}
}
@media(max-width:560px){
  .fx-stat-grid,.fx-mosaic{grid-template-columns:1fr}
  .fx-stat{padding:24px 14px}
  .fx-shot.s1,.fx-shot.s3{grid-column:auto}
}

/* ═══════════ Illustrations (SVG originaux) ═══════════ */
/* Illustrations d'en-têtes de pages */
.ph-art{position:absolute;top:50%;height:84%;max-width:32%;object-fit:contain;opacity:.62;translate:0 -50%}
.ph-art.r{right:3%}
.ph-art.l{left:3%;transform:scaleX(-1);opacity:.32}
@media(max-width:1100px){.ph-art{display:none}}

/* Silhouette d'Oran au-dessus du pied de page */
.fx-skyline-foot{line-height:0;margin-bottom:-1px;background:transparent;pointer-events:none}
.fx-skyline-foot img{display:block;width:100%;height:clamp(64px,9vw,130px);object-fit:cover;object-position:bottom}

/* Illustrations des thématiques */
.fx-arts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.fx-art{margin:0;position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--sh);background:var(--b800);transition:translate .4s var(--ease),box-shadow .4s}
.fx-art:hover{translate:0 -8px;box-shadow:var(--sh2)}
.fx-art img{display:block;width:100%;aspect-ratio:10/7;object-fit:cover;transition:transform .8s var(--ease)}
.fx-art:hover img{transform:scale(1.07)}
.fx-art figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;font:600 .9rem/1.3 'Playfair Display',serif;background:linear-gradient(transparent,rgba(var(--b900-rgb),.9))}
.fx-art figcaption::before{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--gold2);margin-bottom:7px;transition:width .4s var(--ease)}
.fx-art:hover figcaption::before{width:60px}

/* Bandeau illustré (page Lieu) */
.fx-sky-band{position:relative;margin:56px 0 0;border-radius:24px;overflow:hidden;box-shadow:var(--sh2);height:clamp(220px,28vw,340px);background:#7fd1e8}
.fx-sky-band img{width:100%;height:100%;object-fit:cover;display:block}
.fx-sky-text{position:absolute;left:5%;bottom:14%;color:#fff;font:700 clamp(1.6rem,4vw,3rem)/1.1 'Playfair Display',serif;text-shadow:0 4px 22px rgba(var(--b900-rgb),.65);max-width:48%}
.fx-sky-text small{display:block;margin-top:8px;font:500 .9rem 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
body.rtl .fx-sky-text{left:auto;right:5%}

/* Cartes des personnes : motif mathématique dans la bannière */
.person-banner{background:url(../img/art/pattern-math.svg) 0 0/180px 180px,linear-gradient(120deg,var(--b800),var(--b600) 55%,var(--b500));background-size:180px 180px,200% 200%}

@media(max-width:980px){.fx-arts{grid-template-columns:1fr 1fr}.fx-sky-text{max-width:80%}}
@media(max-width:560px){.fx-arts{grid-template-columns:1fr}}