/* redeploy 2026-08-16 — force re-upload FTP (fichier absent du serveur) */
/* ============================================================
   Fauna Morocco — Section « The final stretch »
   Panneau split (image + texte) interactif + timeline (desktop) / chevrons+points (mobile).
   Tout isolé sous .fs / préfixe fs- pour ne rien toucher d'autre. Retravail en cours.
   ============================================================ */
.fs{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#0a0a0a;color:var(--on-dark,#F4EFE6);font-family:'Lato',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.fs *{box-sizing:border-box}
.fs-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .9s cubic-bezier(.23,1,.32,1)}
.fs.fs-lit .fs-bg{opacity:.45}   /* le paysage émerge du noir à l'arrivée */
.fs-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,8,.55),rgba(8,8,8,.82))}
.fs-wrap{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:66px 24px;width:100%;text-align:center}
.fs-eyebrow{font-family:'Lato';font-weight:700;text-transform:uppercase;letter-spacing:.26em;font-size:13px;color:var(--eyebrow,#f0c9a0);margin:0 0 12px}
.fs-title{font-family:'Oswald';font-weight:600;text-transform:uppercase;line-height:1.03;margin:0;font-size:clamp(30px,4.4vw,50px);color:#fff}
.fs-sub{color:var(--on-dark,#F4EFE6);font-size:15.5px;line-height:1.6;max-width:52ch;margin:14px auto 0;opacity:.92}

/* panneau split */
/* scène = largeur fixe du panneau ; les flèches sont posées EN DEHORS sans toucher à sa largeur */
.fs-stage{position:relative;max-width:860px;margin:32px auto 0}
.fs-side{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;padding:12px;z-index:3;filter:drop-shadow(0 1px 12px rgba(0,0,0,.9));transition:opacity .18s}
.fs-side::before{content:'';display:block;width:15px;height:15px;border-right:3.5px solid #f0ebe0;border-bottom:3.5px solid #f0ebe0}
.fs-side.prev{left:-46px}
.fs-side.prev::before{transform:rotate(135deg)}
.fs-side.next{right:-46px}
.fs-side.next::before{transform:rotate(-45deg)}
.fs-panel{display:flex;width:100%;margin:0;border:1px solid rgba(244,239,230,.16);border-radius:14px;overflow:hidden;text-align:left;background:#161310;box-shadow:0 22px 50px rgba(0,0,0,.45)}
.fs-pmedia{position:relative;flex:0 0 61%;min-height:340px;overflow:hidden;background:#111}
.fs-pmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;transition:opacity .3s ease}
/* rythme fixe : titre+date en haut, bouton en bas (margin-top:auto), seul le paragraphe varie */
.fs-ptext{flex:1;padding:30px 30px;display:flex;flex-direction:column;justify-content:flex-start}
/* 3 typographies : label (sur-titre) → titre → date */
.fs-plabel{font-family:'Lato';font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--eyebrow,#f0c9a0);margin:0 0 8px}
.fs-panel.fs-next .fs-plabel{color:var(--ocre,#C06A2C)}
.fs-pname{font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:26px;color:#fff;margin:0;line-height:1}
.fs-pdate{font-family:'Lato';font-weight:400;font-size:13px;letter-spacing:.02em;color:rgba(244,239,230,.65);margin:1px 0 0}
.fs-pline{color:#d9d0c2;font-size:14px;line-height:1.55;margin:18px 0 22px}
.fs-pcta{align-self:flex-start;margin-top:auto}

/* timeline desktop */
.fs-tl{position:relative;height:56px;margin:36px 78px 0}
.fs-seg{position:absolute;top:6px}
.fs-seg.fs-solid{left:0;width:75%;height:2px;background:rgba(244,239,230,.18)}
.fs-seg.fs-dash{left:75%;right:0;top:5px;border-top:2px dashed var(--ocre,#C06A2C)}
.fs-tn{position:absolute;top:0;transform:translateX(-50%);background:none;border:0;cursor:pointer;padding:0;font-family:inherit;display:flex;flex-direction:column;align-items:center;text-align:center}
.fs-tn .fs-dot{width:12px;height:12px;border-radius:50%;background:#6f6a62;box-shadow:0 0 0 4px #0a0a0a;margin-bottom:10px;transition:background .18s,transform .18s,box-shadow .18s}
.fs-tn .fs-l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8A8378;white-space:nowrap;transition:color .18s}
.fs-tn.on .fs-dot{background:#fff;transform:scale(1.25)}
.fs-tn.on .fs-l{color:#fff;font-weight:700}
.fs-tn.fs-next .fs-dot{background:var(--ocre,#C06A2C)}
.fs-tn.fs-next .fs-l{color:var(--ocre,#C06A2C)}
.fs-tn.fs-next.on .fs-dot{background:var(--ocre,#C06A2C);box-shadow:0 0 0 4px #0a0a0a,0 0 0 8px rgba(192,106,44,.28)}

/* nav mobile : chevrons + points */
.fs-mbar{display:none;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.fs-chev{background:none;border:0;cursor:pointer;padding:9px 11px;filter:drop-shadow(0 1px 10px rgba(0,0,0,.8));transition:opacity .18s}
.fs-chev::before{content:'';display:block;width:13px;height:13px;border-right:3px solid #f0ebe0;border-bottom:3px solid #f0ebe0}
.fs-chev.prev::before{transform:rotate(135deg)}
.fs-chev.next::before{transform:rotate(-45deg)}
.fs-mdots{display:flex;gap:14px}
.fs-mdot{width:10px;height:10px;border-radius:50%;background:#78726a;border:0;cursor:pointer;padding:0;transition:background .18s,transform .18s}
.fs-mdot.on{transform:scale(1.3);background:var(--on-dark,#F4EFE6)}
.fs-mdot.fs-nx{background:var(--ocre,#C06A2C)}
.fs-mdot.fs-nx.on{background:var(--ocre,#C06A2C)}
.fs-hint{margin-top:20px;font-size:12.5px;color:rgba(244,239,230,.55)}

.fs-reveal{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.23,1,.32,1),transform 1s cubic-bezier(.23,1,.32,1)}
.fs-reveal.on{opacity:1;transform:none}

/* survols réservés aux appareils à souris (évite l'état « collant » au tap) */
@media(hover:hover) and (pointer:fine){
  .fs-side:hover,.fs-chev:hover{opacity:.7}
  .fs-tn:hover .fs-l{color:var(--on-dark,#F4EFE6)}
}

@media(max-width:768px){
  .fs-tl,.fs-side{display:none}
  .fs-mbar{display:flex}
  .fs-panel{flex-direction:column;max-width:520px}
  .fs-pmedia{flex:none;width:100%;aspect-ratio:16/10;min-height:0}
  .fs-ptext{flex:none;height:246px;padding:22px;justify-content:flex-start}
  .fs-pname{font-size:22px}
  .fs-pline{margin:12px 0 18px}
  .fs-wrap{padding:56px 18px}
}
@media(prefers-reduced-motion:reduce){.fs-reveal{transition:none;opacity:1;transform:none}.fs-pmedia img{transition:none}.fs-bg{opacity:.45;transition:none}}