/* ═══════════════════════════════════════════════════
   CENTRE BODY RESET — EFFETS PREMIUM DE LA HOME
   Survols, profondeur 3D, parallaxe, micro-interactions.
   Chargé après les styles inline de index.html (il les
   surcharge). Les éléments "fx-*" et ".sl-img" sont créés
   par js/home-fx.js.

   Règles suivies :
   - transform / opacity uniquement (60 fps, pas de reflow)
   - effets souris réservés aux pointeurs fins (hover:hover)
   - tout désactivé si prefers-reduced-motion
═══════════════════════════════════════════════════ */

:root{
  --fx-spring:cubic-bezier(.34,1.56,.64,1);
  --fx-out:cubic-bezier(.22,.61,.36,1);
}

/* ── Accessibilité : focus clavier bien visible ── */
.btn:focus-visible,.sl-row:focus-visible,.tc:focus-visible,.nls a:focus-visible,.ci a:focus-visible,.fbl a:focus-visible{outline:2px solid var(--tc);outline-offset:4px}
.sl-row:focus-visible{border-radius:8px}

/* ── Barre de progression de lecture ── */
.fx-prog{position:fixed;top:0;left:0;width:100%;height:2px;z-index:1200;pointer-events:none;background:linear-gradient(90deg,var(--tc),var(--sg));transform:scaleX(0);transform-origin:left;will-change:transform}

/* ── Grain photographique (texture éditoriale) ── */
.fx-grain{position:fixed;inset:0;z-index:1100;pointer-events:none;opacity:.028;background-size:250px 250px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Curseur halo ── */
.fx-cur{position:fixed;top:0;left:0;z-index:1300;pointer-events:none;opacity:0;transition:opacity .4s ease;will-change:transform}
.fx-cur.on{opacity:1}
/* Double liseré : terracotta (lisible sur crème) + contour clair (lisible sur terracotta et sur fond sombre) */
.fx-cur-r{display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(196,112,74,.9);box-shadow:0 0 0 1px rgba(255,255,255,.55);border-radius:50%;transition:transform .45s var(--fx-spring),background-color .3s ease,border-color .3s ease}
.fx-cur.hov .fx-cur-r{transform:scale(1.9);background:rgba(255,255,255,.14);border-color:rgba(196,112,74,.7)}
.fx-cur.down .fx-cur-r{transform:scale(.7)}
.fx-cur.hov.down .fx-cur-r{transform:scale(1.45)}

/* ── Reveals au scroll : ajout d'un flou qui se dissipe ── */
@keyframes revealUp{from{opacity:0;transform:translateY(45px);filter:blur(7px)}to{filter:blur(0)}}
@keyframes revealLeft{from{opacity:0;transform:translateX(-55px);filter:blur(7px)}to{filter:blur(0)}}
@keyframes revealRight{from{opacity:0;transform:translateX(55px);filter:blur(7px)}to{filter:blur(0)}}

/* ── Hero : titre révélé ligne par ligne (masque) ── */
.hero h1{animation:none}
.hero h1 .l1,.hero h1 .l2,.hero h1 .l3{animation:fxLine 1.15s var(--fx-out) both}
.hero h1 .l1{animation-delay:.28s}
.hero h1 .l2{animation-delay:.42s}
.hero h1 .l3{animation-delay:.56s}
@keyframes fxLine{from{clip-path:inset(0 0 100% 0);transform:translateY(.5em)}to{clip-path:inset(-.15em 0 -.25em 0);transform:translateY(0)}}

/* ── Hero : indicateur de défilement ── */
.fx-scroll{position:absolute;z-index:4;left:max(56px,calc((100vw - 1200px) / 2 + 56px));bottom:34px;display:flex;align-items:center;gap:14px;font-family:var(--fb);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bm);opacity:0;animation:fupr .9s var(--ease) 1.5s forwards;pointer-events:none;transition:opacity .4s ease}
.fx-scroll.off{opacity:0!important}
.fx-scroll .ln{width:1px;height:46px;background:var(--be);position:relative;overflow:hidden}
.fx-scroll .ln::after{content:'';position:absolute;left:0;top:0;width:100%;height:40%;background:var(--tc);animation:fxScroll 1.9s var(--fx-out) infinite}
@keyframes fxScroll{from{transform:translateY(-110%)}to{transform:translateY(270%)}}

/* ── Philosophie : étiquettes qui flottent doucement ── */
.fl{animation:fxBob 6.5s ease-in-out infinite}
.fl2{animation:fxBob 7.5s ease-in-out -2.5s infinite}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── Solutions : aperçu photo qui suit le curseur (créé par JS) ── */
.sl-img{position:fixed;top:0;left:0;z-index:1150;width:230px;height:300px;margin:-150px 0 0 36px;border-radius:999px 999px 22px 22px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform;box-shadow:0 30px 70px -20px rgba(42,32,27,.35)}
.sl-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.18);transition:transform .7s var(--fx-out)}
.sl-img.on{opacity:1}
.sl-img.on img{transform:scale(1)}

/* ── Technologies : aurore lumineuse en fond ── */
.tecs::before{content:'';position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(42% 52% at 28% 38%,rgba(196,112,74,.26),transparent 70%),radial-gradient(38% 48% at 72% 66%,rgba(107,140,90,.22),transparent 70%);animation:fxAurora 24s ease-in-out infinite alternate;will-change:transform}
.tecs .wrap{position:relative;z-index:1}
@keyframes fxAurora{from{transform:translate3d(-6%,-4%,0) rotate(-5deg) scale(1)}to{transform:translate3d(6%,5%,0) rotate(6deg) scale(1.18)}}

/* ── Témoignages : étoiles qui s'allument une à une ── */
.qg.shown .star{animation:fxStar .55s var(--fx-spring) backwards}
.qg.shown .star:nth-child(1){animation-delay:.55s}
.qg.shown .star:nth-child(2){animation-delay:.63s}
.qg.shown .star:nth-child(3){animation-delay:.71s}
.qg.shown .star:nth-child(4){animation-delay:.79s}
.qg.shown .star:nth-child(5){animation-delay:.87s}
@keyframes fxStar{from{opacity:0;transform:scale(.3) rotate(-35deg)}}

/* ── Images : préparation de la parallaxe au scroll ── */
.team-photo img{scale:1.08;will-change:translate}
.iv img{will-change:translate}

/* ═══════ Effets souris — pointeurs fins uniquement ═══════ */
@media (hover:hover) and (pointer:fine){

  /* Boutons : magnétisme (JS) + reflet qui balaie */
  .btn{position:relative;overflow:hidden;transition:transform .55s var(--fx-spring),background .3s ease,box-shadow .45s ease,color .3s ease,border-color .3s ease}
  .btn.fx-mag{transition:transform .14s ease-out,background .3s ease,box-shadow .45s ease}
  .btn::before{content:'';position:absolute;top:-60%;bottom:-60%;left:0;width:38%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);transform:translateX(-240%) skewX(-18deg);pointer-events:none}
  .btn:hover::before{transform:translateX(440%) skewX(-18deg);transition:transform .8s var(--fx-out)}

  /* Technologies : inclinaison 3D (JS) + halo terracotta qui suit la souris */
  .fx-tilt{will-change:transform;transition:transform .6s var(--fx-spring)}
  .fx-tilt.is-tilting{transition:transform .13s ease-out}
  .fx-tilt:hover{z-index:5}
  .fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(196,112,74,.32) 0%,rgba(196,112,74,.08) 32%,transparent 66%)}
  .fx-tilt:hover .fx-glare{opacity:1}

  /* Hero : parallaxe profondeur au mouvement de la souris (variables posées par JS) */
  .hero{--mx:0;--my:0}
  .hero-photo{transform:translate3d(calc(var(--mx) * -12px),calc(var(--my) * -9px),0) scale(1.045);transition:transform 1s var(--fx-out)}
  .hr{transform:translate3d(calc(var(--mx) * 20px),calc(var(--my) * 14px),0);transition:transform 1s var(--fx-out)}
  .hl-in{transform:translate3d(calc(var(--mx) * 8px),calc(var(--my) * 6px),0);transition:transform 1s var(--fx-out)}
}

/* ═══════ Tactile : retour au toucher, pas d'effets souris ═══════ */
@media (hover:none){
  .fx-cur,.fx-grain,.fx-scroll,.sl-img{display:none}
  .sl-row:active,.tc:active{transform:scale(.985);transition:transform .15s ease}
  .btn:active{transform:scale(.97)}
}

/* ═══════ Mouvement réduit : on coupe tout ═══════ */
@media (prefers-reduced-motion:reduce){
  .fx-cur,.fx-grain,.fx-scroll,.fx-prog,.sl-img{display:none!important}
  .hero h1 .l1,.hero h1 .l2,.hero h1 .l3{animation:none;clip-path:none}
  .hero-photo,.hr,.hl-in{transform:none!important;transition:none!important}
  .tecs::before,.fl,.fl2{animation:none}
  .qg.shown .star{animation:none}
  .btn::before{display:none}
  .fx-tilt{transition:none}
  .fx-glare{display:none}
}