/* =====================================================================
   OMYA — animation d'ouverture, curseur et apparitions progressives
   (commun à toutes les pages)
   ===================================================================== */

/* Pied de page : colonne de liens sans titre, alignée avec « Contact » */
.fnav{padding-top:30px}
@media (max-width:760px){.fnav{padding-top:0}}

/* ---------- 1. Animation d'ouverture ---------- */
#loader{display:none}
html.loading #loader{display:block;position:fixed;inset:0;z-index:9999;pointer-events:all}
html.loading,html.loading body{overflow:hidden}
#loader .ld-veil{position:absolute;inset:0;will-change:transform;transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
#loader .ld-back{background:var(--azur,#246588);transition-delay:.14s}
#loader .ld-front{background:var(--azur-fonce,#0e2938)}
#loader .ld-front::before{content:"";position:absolute;inset:0;background:url(motifs/courbes-niveau-fonce.jpg) center/cover no-repeat;opacity:.8}
#loader .ld-logo{position:absolute;left:50%;top:50%;width:min(416px,83vw);translate:-50% -50%;transition:transform 1.1s cubic-bezier(.77,0,.18,1),opacity .6s}
#loader .ld-logo img{display:block;width:100%;height:auto;clip-path:inset(0 100% 0 0);scale:.92;animation:ld-reveal 1.2s cubic-bezier(.77,0,.18,1) .25s forwards,ld-grow 2s cubic-bezier(.2,.75,.15,1) .25s forwards}
@keyframes ld-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes ld-grow{to{scale:1}}
/* levée du voile */
#loader.out .ld-veil{transform:translateY(-100%)}
#loader.out .ld-logo{transform:translateY(-38vh);opacity:0}

/* ---------- 2. Curseur ---------- */
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:text!important}
.cur{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;border-radius:50%;translate:-50% -50%;width:16px;height:16px;background:var(--azur,#246588);box-shadow:0 0 0 1px rgba(143,193,220,.35);transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),opacity .3s,background-color .3s}
.cur.hover{width:64px;height:64px;opacity:.45;box-shadow:none}
.cur.down{width:12px;height:12px}
.cur.hover.down{width:52px;height:52px}
.cur.hide{opacity:0}

/* ---------- 3. Apparitions progressives ---------- */
/* Titres : mot par mot, comme une ligne qui se déroule */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.m-w>span{display:inline-block;translate:0 115%;rotate:6deg;opacity:0;filter:blur(8px);transform-origin:0 100%;transition:translate 1.25s cubic-bezier(.16,.84,.2,1),rotate 1.25s cubic-bezier(.16,.84,.2,1),opacity .9s ease,filter 1.1s ease}
.m-in .m-w>span{translate:0 0;rotate:0deg;opacity:1;filter:blur(0)}
/* Textes : fondu et glissement */
.m-up{opacity:0;translate:0 60px;filter:blur(10px);transition:opacity 1.2s cubic-bezier(.2,.75,.15,1),translate 1.3s cubic-bezier(.16,.84,.2,1),filter 1.2s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,padding .4s,background .25s,border-color .25s}
.m-up.m-in{opacity:1;translate:0 0;filter:none}
/* Images : dévoilement de bas en haut + léger zoom arrière (le cadre reste en place, seule l'image se dévoile) */
.m-img>img,.m-img>video{clip-path:inset(100% 0 0 0);scale:1.22;transition:clip-path 1.3s cubic-bezier(.77,0,.18,1),scale 1.8s cubic-bezier(.2,.75,.15,1),transform 1.2s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1)}
.m-img.m-in>img,.m-img.m-in>video{clip-path:inset(0 0 0 0);scale:1}
@media (prefers-reduced-motion:reduce){
  .m-w>span,.m-up,.m-img>img,.m-img>video{translate:none!important;rotate:none!important;filter:none!important;opacity:1!important;clip-path:none!important;scale:1!important;transition:none!important}
}

/* Voile du changement de langue : il recouvre la page de bas en haut */
#loader.enter{display:block;position:fixed;inset:0;z-index:9999;pointer-events:all}
#loader.enter .ld-veil{transform:translateY(100%);transition:transform .8s cubic-bezier(.77,0,.18,1)}
#loader.enter .ld-back{transition-delay:0s}
#loader.enter .ld-front{transition-delay:.12s}
#loader.enter .ld-logo{opacity:0;transition:opacity .45s ease .55s}
#loader.enter .ld-logo img{animation:none;clip-path:none;scale:1}
#loader.enter.on .ld-veil{transform:none}
#loader.enter.on .ld-logo{opacity:1}