/* =========================================================
   Maison Filali — animations du site
   Activées seulement si JavaScript est actif ET que le visiteur
   n'a pas demandé « réduire les animations » sur son appareil.
   Pour tout désactiver : retirer anim.css et anim.js du layout.
   ========================================================= */

:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- Transition douce entre les pages (Chrome / Edge) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mf-fade-out .25s ease both}
::view-transition-new(root){animation:mf-fade-in .45s ease both}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--ease-out)}

@keyframes mf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes mf-fade-out{to{opacity:0}}
@keyframes mf-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* Sans opacité 0 au départ : le texte reste mesurable par Google (LCP) */
@keyframes mf-rise{from{opacity:.01;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes mf-line{from{transform:translateY(105%)}to{transform:none}}
@keyframes mf-zoom-out{from{scale:1.12}to{scale:1}}
@keyframes mf-spin{to{transform:rotate(360deg)}}
@keyframes mf-pulse{0%{box-shadow:0 0 0 0 rgba(15,74,62,.35)}70%{box-shadow:0 0 0 22px rgba(15,74,62,0)}100%{box-shadow:0 0 0 0 rgba(15,74,62,0)}}
@keyframes mf-drop{0%{opacity:0;transform:translate(-50%,-60px)}60%{opacity:1;transform:translate(-50%,6px)}80%{transform:translate(-50%,-3px)}100%{transform:translate(-50%,0)}}
@keyframes mf-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mf-modal{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mf-shine{from{left:-60%}to{left:130%}}

/* ---------- Apparition au défilement ---------- */
.anim [data-anim]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease-out) var(--d,0s)}
.anim [data-anim="left"]{transform:translateX(-46px)}
.anim [data-anim="right"]{transform:translateX(46px)}
.anim [data-anim="zoom"]{transform:scale(.94)}
.anim [data-anim].in{opacity:1;transform:none}

/* Séparateur ✦ : les filets s'étirent, l'étoile tourne */
.anim [data-anim] .divider>span:not(.ico){transform:scaleX(0);transition:transform .9s var(--ease-out) calc(var(--d,0s) + .25s)}
.anim [data-anim] .divider>span:first-child{transform-origin:right}
.anim [data-anim] .divider>span:last-child{transform-origin:left}
.anim [data-anim] .divider .ico{transform:rotate(-180deg) scale(.4);opacity:0;transition:transform 1.1s var(--ease-out) calc(var(--d,0s) + .15s),opacity .6s ease calc(var(--d,0s) + .15s)}
.anim [data-anim].in .divider>span:not(.ico){transform:scaleX(1)}
.anim [data-anim].in .divider .ico{transform:none;opacity:1}

/* ---------- Accueil : entrée du hero ---------- */
.anim .hero>img{animation:mf-zoom-out 2.6s var(--ease-out) both;will-change:translate}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln>span{display:block}
.anim .hero h1 .ln>span{animation:mf-line 1.1s var(--ease-out) both}
.anim .hero h1 .ln:nth-child(1)>span{animation-delay:.25s}
.anim .hero h1 .ln:nth-child(2)>span{animation-delay:.38s}
.anim .hero h1 .ln:nth-child(3)>span{animation-delay:.51s}
.anim .hero .kicker{animation:mf-rise .9s var(--ease-out) .1s both}
.anim .hero .kicker .ico{animation:mf-spin 14s linear infinite}
.anim .hero .content>p{animation:mf-rise 1s var(--ease-out) .75s both}
.anim .hero .ctas{animation:mf-rise 1s var(--ease-out) .9s both}
.anim .hero-cats{animation:mf-rise 1.1s var(--ease-out) 1.05s both}
.hero-cats a{transition:background .3s}
.hero-cats a:hover{background:var(--cream)}
.hero-cats .thumb{transition:transform .5s var(--ease-out)}
.hero-cats a:hover .thumb{transform:translateY(-5px)}
.hero-cats a .ico{transition:transform .35s var(--ease-out)}
.hero-cats a:hover .ico{transform:translateX(6px)}

/* Bandeau du haut : petites étoiles qui tournent */
.anim .topbar .ico{animation:mf-spin 18s linear infinite}

/* En-tête : ombre quand on descend */
.header{transition:box-shadow .35s ease}
.header.scrolled{box-shadow:0 10px 30px rgba(31,42,39,.08)}

/* ---------- Boutons et liens ---------- */
.btn{position:relative;overflow:hidden;transition:background .25s,color .25s,opacity .25s,transform .25s var(--ease-out),box-shadow .25s}
.btn-green::after,.btn-gold::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
    background:linear-gradient(110deg,transparent,rgba(232,206,150,.45),transparent);transform:skewX(-22deg)}
.btn-green:hover::after,.btn-gold:hover::after{animation:mf-shine .8s ease}
.btn:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,74,62,.18)}
.btn:not([disabled]):active{transform:translateY(0);box-shadow:none}
.link-gold{background:linear-gradient(var(--green),var(--green)) left bottom/0 1px no-repeat;transition:background-size .45s var(--ease-out),letter-spacing .45s var(--ease-out)}
.link-gold:hover{background-size:100% 1px}
.hs-btn{transition:background .25s,border-color .25s,transform .25s var(--ease-out),opacity .2s}
.hs-btn:not([disabled]):hover{transform:scale(1.08);background:var(--green);border-color:var(--green)}
.hs-btn:not([disabled]):hover .ico{filter:brightness(0) invert(1)}
.ctab{transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease-out)}
.ctab:hover{transform:translateY(-2px);border-color:var(--gold)}

/* ---------- Nos univers : arches ---------- */
.arch img{transition:transform .8s var(--ease-out),filter .8s}
.arch:before{transition:transform .7s var(--ease-out),border-color .4s}
.arch{transition:transform .7s var(--ease-out)}
.arch-card:hover .arch{transform:translateY(-8px)}
.arch-card:hover .arch:before{transform:translate(8px,8px);border-color:var(--green)}
.arch-card:hover .arch img{filter:saturate(1.12)}
.arch-card h3{transition:color .3s}
.arch-card:hover h3{color:var(--green)}

/* Grande étoile marocaine en filigrane qui tourne lentement */
.univers,.feature{position:relative;overflow:hidden}
.univers>.wrap,.feature>.wrap{position:relative;z-index:1}
.univers::before,.feature::before{content:'';position:absolute;width:620px;height:620px;pointer-events:none;opacity:.22;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C6A15B' stroke-width='.7'%3E%3Crect x='40' y='40' width='120' height='120'/%3E%3Crect x='40' y='40' width='120' height='120' transform='rotate(45 100 100)'/%3E%3Ccircle cx='100' cy='100' r='42'/%3E%3Crect x='65' y='65' width='70' height='70'/%3E%3Crect x='65' y='65' width='70' height='70' transform='rotate(45 100 100)'/%3E%3Ccircle cx='100' cy='100' r='16'/%3E%3C/svg%3E") center/contain no-repeat}
.univers::before{right:-180px;top:-160px}
.feature::before{left:-220px;bottom:-240px}
.anim .univers::before,.anim .feature::before{animation:mf-spin 120s linear infinite}

/* ---------- Cartes produits ---------- */
.pcard .media img{transition:transform .9s var(--ease-out),opacity .6s ease}
.pcard .media .alt{position:absolute;inset:0;opacity:0}
.pcard:hover .media img{transform:scale(1.06)}
.pcard:hover .media .alt{opacity:1}
.pcard .media::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,rgba(15,74,62,.28));opacity:0;transition:opacity .5s}
.pcard:hover .media::after{opacity:1}
.pcard .tag{z-index:2;transition:transform .4s var(--ease-out)}
.pcard:hover .tag{transform:translateX(4px)}
.pcard .name{transition:color .3s}
.pcard:hover .name{color:var(--green)}
.pcard .dots i{transition:transform .3s var(--ease-out)}
.pcard:hover .dots i{transform:translateY(-2px)}
.pcard:hover .dots i:nth-child(2){transition-delay:.04s}.pcard:hover .dots i:nth-child(3){transition-delay:.08s}
.pcard:hover .dots i:nth-child(4){transition-delay:.12s}.pcard:hover .dots i:nth-child(5){transition-delay:.16s}
.slide.pop{animation:mf-pop .6s var(--ease-out) both;animation-delay:var(--d,0s)}

/* ---------- Réassurance ---------- */
.reassure .item .ico{transition:transform .5s var(--ease-out)}
.reassure .item:hover .ico{animation:mf-float 1.4s ease-in-out infinite}

/* ---------- Mise en avant ---------- */
.feature .pic1,.feature .pic2{will-change:translate}
.feature .sw{transition:transform .25s var(--ease-out),border-color .25s}
.feature .sw:hover{transform:translateY(-2px)}

/* ---------- Plan / épingle ---------- */
.map>img{transition:transform 1.2s var(--ease-out)}
.map:hover>img{transform:scale(1.04)}
.anim .map .pin{opacity:0}
.anim .map.in .pin,.anim .in .map .pin{animation:mf-drop .9s var(--ease-out) .35s both}
.anim .map .pin>span{animation:mf-pulse 2.4s ease-out 1.4s infinite}

/* ---------- Pages intérieures ---------- */
.anim .cat-hero .txt>*{animation:mf-rise .9s var(--ease-out) both}
.anim .cat-hero .txt>*:nth-child(2){animation-delay:.12s}
.anim .cat-hero .txt>*:nth-child(3){animation-delay:.24s}

/* Page produit : changement de photo en fondu */
#mainPic.swap{animation:mf-fade-in .5s ease both}
.main-pic:before{transition:transform .8s var(--ease-out)}
.main-pic:hover:before{transform:translate(8px,8px)}
.thumbs button{transition:transform .25s var(--ease-out),opacity .25s}
.thumbs button:hover{transform:translateY(-3px)}

/* Fenêtre de commande */
.modal.open>*{animation:mf-modal .45s var(--ease-out) both}
.modal.open{animation:mf-fade-in .3s ease both}

/* Pied de page */
.footer .socials a{transition:transform .3s var(--ease-out),background .3s,border-color .3s}
.footer .socials a:hover{transform:translateY(-3px) rotate(-6deg);border-color:var(--gold)}
.footer ul a{transition:color .25s,padding .3s var(--ease-out)}
.footer ul a:hover{padding-left:6px}

/* Mobile : déplacements plus courts */
@media (max-width:900px){
    .anim [data-anim="left"],.anim [data-anim="right"]{transform:translateY(26px)}
    .univers::before,.feature::before{width:380px;height:380px}
}

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    @view-transition{navigation:none}
}