/* Animations du site (actives seulement quand anim.js a ajouté .anim sur <html>) */

/* apparition au défilement, avec décalage par élément (--d) */
.rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.anim .rv:not(.in){opacity:0;transform:translateY(34px)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv.zoom:not(.in){transform:scale(.94) translateY(20px)}
.anim .rv.left:not(.in){transform:translateX(-40px)}
.anim .rv.right:not(.in){transform:translateX(40px)}

/* images : révélation en rideau + léger zoom qui se pose */
.anim .wipe img{clip-path:inset(0 0 100% 0);transform:translateY(var(--py,0px)) scale(1.18);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) var(--d,0s),transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.anim .wipe.in img{clip-path:inset(0 0 0 0);transform:translateY(var(--py,0px)) scale(1.06)}
.anim .wipe.settled img{transition:none}
.anim .wipe.contain img{transform:scale(.9)}
.anim .wipe.contain.in img{transform:none}

/* titres : mots qui montent un par un */
.anim .words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.anim .words .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 55ms + var(--d,0s))}
.anim .words.in .w>span{transform:none}

/* badges qui apparaissent avec un petit rebond */
.anim .badge.pop{opacity:0;transform:translateY(10px) scale(.85);transition:opacity .5s,transform .7s cubic-bezier(.3,1.6,.5,1)}
.anim .badge.pop.in{opacity:1;transform:none}

/* boutons : reflet lumineux au survol */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}

/* cartes : icône qui s'anime, bordure lumineuse */
.card{position:relative}
.card .ico{transition:transform .5s cubic-bezier(.3,1.5,.5,1),background .3s}
.card:hover .ico{transform:rotate(-8deg) scale(1.12);background:#fff3cc}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--gold),var(--sky));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before{opacity:1}
.quote{transition:transform .4s,box-shadow .4s}
.quote:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(7,7,58,.1)}
.ticks li::before{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ticks li:hover::before{transform:scale(1.2) rotate(-10deg)}
.faq details{transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:0 14px 40px rgba(7,7,58,.08);border-color:var(--gold)}
.faq details[open] p{animation:fq .5s ease}
@keyframes fq{from{opacity:0;transform:translateY(-6px)}}

/* navigation : réduite et ombrée au défilement, masquée en descendant */
.nav{transition:transform .5s cubic-bezier(.2,.8,.2,1),top .4s,box-shadow .4s,background .4s}
.nav.scrolled{top:10px;box-shadow:0 14px 40px rgba(7,7,58,.12);background:rgba(255,255,255,.88)}
.nav.hide{transform:translate(-50%,-140%)}
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.menu a.on{text-decoration:none}
.menu a.on::after{transform:scaleX(1)}

/* barre de progression de lecture */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;background:linear-gradient(90deg,var(--gold),var(--sky));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

/* bandeaux de page : fond qui respire, titre qui se dévoile */
.subbox{background-size:160% 160%;animation:breathe 16s ease-in-out infinite alternate}
@keyframes breathe{to{background-position:100% 60%}}
.subbox::after{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.anim .subbox>*{opacity:0;transform:translateY(24px);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.anim .subbox>*:nth-child(2){animation-delay:.12s}
.anim .subbox>*:nth-child(3){animation-delay:.26s}
@keyframes up{to{opacity:1;transform:none}}

/* bandeau contact : lueur qui se déplace */
.cta-box{position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,26,.25),transparent 65%);top:-260px;left:-120px;animation:roam 14s ease-in-out infinite alternate;pointer-events:none}
.cta-box>*{position:relative}
@keyframes roam{to{left:70%;top:40%}}

/* grand chiffre et barres */
.big{font-variant-numeric:tabular-nums}

/* galeries : léger voile au survol */
.gal div{position:relative}
.gal div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,7,58,.45));opacity:0;transition:opacity .4s}
.gal div:hover::after{opacity:1}

/* onglets ambassades : transition douce */
.tabp.on{animation:tabin .7s cubic-bezier(.2,.8,.2,1)}
@keyframes tabin{from{opacity:0;transform:translateY(18px)}}

/* entrée de page */
.anim body{animation:pagein .6s ease}
@keyframes pagein{from{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .anim .rv:not(.in),.anim .badge.pop,.anim .subbox>*{opacity:1;transform:none;animation:none}
  .anim .wipe img{clip-path:none;transform:none}
  .anim .words .w>span{transform:none}
  .subbox,.subbox::after,.cta-box::before{animation:none}
}
