/* Studio Devanture · le mouvement du site. Tout ce qui cache du contenu dépend de .anime,
   posée par le script d'en tête seulement si l'appareil accepte les animations. */
html{overflow-x:clip}

/* ---------- barre de lecture ---------- */
.lecture{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--corail);transform-origin:left;transform:scaleX(0);z-index:60;pointer-events:none}

/* ---------- ouverture : rideau de devanture qui se lève ---------- */
.hero{isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-1;background:url(img/hero.webp) center 60%/cover;transform-origin:60% 60%}
.rideau{display:none}
.anime .rideau{display:block;position:absolute;inset:0;z-index:8;transform:translateY(0);animation:lever 1.25s cubic-bezier(.75,0,.2,1) .45s forwards;border-radius:inherit}
.rideau .lames{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#0E545B 0 34px,#0A4046 34px 36px,#12606A 36px 38px)}
.rideau .barre-rideau{position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,#083338,#0B4A50);display:grid;place-items:center;box-shadow:0 -1px 0 rgba(255,255,255,.08) inset}
.rideau .barre-rideau:after{content:"";position:absolute;left:50%;bottom:18px;width:120px;height:6px;border-radius:9px;background:var(--corail);transform:translateX(-50%)}
.rideau svg{width:34px;margin-bottom:18px;opacity:.9}
.rideau.deja{display:none!important}
@keyframes lever{to{transform:translateY(-102%)}}
.anime .hero-img{animation:approche 16s cubic-bezier(.2,.6,.3,1) .5s both}
@keyframes approche{from{transform:scale(1.18)}to{transform:scale(1)}}

/* les vignettes flottent, doucement, chacune à son rythme */
.anime .chip.a{animation:flotte 7s ease-in-out 2s infinite}
.anime .chip.b{animation:flotte 9s ease-in-out 2.6s infinite reverse}
@keyframes flotte{50%{translate:0 -9px}}
.chip.a .pal i{transition:background-color .6s ease,transform .6s cubic-bezier(.3,1.6,.5,1)}
.chip.a .pal i.saut{transform:scale(.6) rotate(-8deg)}
.chip.a small,.chip.a .fnt span{transition:opacity .35s ease,transform .35s ease}
.chip.a .change{opacity:0;transform:translateY(6px)}

/* l'anneau des 10 jours se remplit et le chiffre compte */
@property --rempli{syntax:'<percentage>';inherits:false;initial-value:70%}
@property --jours{syntax:'<integer>';inherits:false;initial-value:10}
.chip.b .c{background:conic-gradient(var(--corail) 0 var(--rempli),var(--sable2) 0)}
.chip.b .c:after{counter-reset:j var(--jours);content:counter(j)}
.anime .chip.b .c,.anime .chip.b .c:after{animation:remplir 2.2s cubic-bezier(.3,.7,.2,1) 1.6s both}
@keyframes remplir{from{--rempli:0%;--jours:0}}

/* ---------- titres qui montent mot par mot ---------- */
.anime .titre-anime .mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.anime .titre-anime .mot>span{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:left bottom;transition:transform 1.05s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0) * 55ms)}
.anime .titre-anime.vu .mot>span{transform:none}
.anime .hero h1 .mot>span{transition-delay:calc(1.35s + var(--i,0) * 70ms)}

/* ---------- apparitions ---------- */
.anime .apparait{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.75,.25,1),transform .9s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i,0) * 80ms)}
.anime .apparait.vu{opacity:1;transform:none}
.anime .hin .apparait{transition-delay:calc(1.9s + var(--i,0) * 120ms)}

/* ---------- bandeau des métiers, chacun dans son caractère ---------- */
.metiers{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;white-space:nowrap;padding:26px 0;margin-bottom:110px;border-top:1px solid var(--lin);border-bottom:1px solid var(--lin);background:#fff}
.metiers .piste{display:inline-flex;align-items:center;animation:defiler 46s linear infinite}
.metiers span{font-size:clamp(28px,3.6vw,46px);line-height:1.1;padding:0 30px;display:inline-flex;align-items:center}
.metiers span:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--turq);margin-left:60px}
.metiers:hover .piste{animation-play-state:paused}
@keyframes defiler{to{transform:translateX(-50%)}}

/* ---------- réalisations : relief au survol ---------- */
.case{transition:transform .5s cubic-bezier(.2,.75,.25,1),box-shadow .5s ease;transform-style:preserve-3d;will-change:transform}
.case.penche{box-shadow:0 40px 70px -40px rgba(16,39,42,.45)}
.case .stage>*{transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.case:hover .stage>*{transform:translateY(-6px) scale(1.015)}

/* ---------- de la devanture au site : la construction pas à pas ---------- */
.anime .flow .st,.anime .flow .ar,.anime .flow .dec>div,.anime .flow .dec .p i{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1)}
.anime .flow .st{transform:translateY(24px)}
.anime .flow .ar{transform:translateX(-14px)}
.anime .flow .dec>div{transform:translateY(16px)}
.anime .flow .dec .p i{transform:scale(.3)}
.anime .flow.vu .st,.anime .flow.vu .ar,.anime .flow.vu .dec>div,.anime .flow.vu .dec .p i{opacity:1;transform:none}
.anime .flow.vu .st:nth-child(1){transition-delay:0s}
.anime .flow.vu .ar:nth-child(2){transition-delay:.5s}
.anime .flow.vu .st:nth-child(3){transition-delay:.7s}
.anime .flow.vu .dec>div:nth-child(1){transition-delay:.9s}
.anime .flow.vu .dec .p i:nth-child(1){transition-delay:1.05s}
.anime .flow.vu .dec .p i:nth-child(2){transition-delay:1.15s}
.anime .flow.vu .dec .p i:nth-child(3){transition-delay:1.25s}
.anime .flow.vu .dec .p i:nth-child(4){transition-delay:1.35s}
.anime .flow.vu .dec>div:nth-child(2){transition-delay:1.6s}
.anime .flow.vu .dec>div:nth-child(3){transition-delay:2s}
.anime .flow.vu .ar:nth-child(4){transition-delay:2.4s}
.anime .flow.vu .st:nth-child(5){transition-delay:2.6s}
.anime .flow .res .tablet{transition:transform 1.2s cubic-bezier(.2,.75,.25,1) 2.7s}
.anime .flow:not(.vu) .res .tablet{transform:rotate(-6deg) translateY(30px) scale(.94)}
@media (max-width:900px){.anime .flow .ar{transform:rotate(90deg) translateX(-14px)}.anime .flow.vu .ar{transform:rotate(90deg)}}

/* ---------- avant, après : les questions sans réponse arrivent, puis le vrai site ---------- */
.anime .fb .q div{opacity:0;transform:translateX(-18px) scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.4,.5,1)}
.anime .fb .q div em{opacity:0;transition:opacity .4s ease}
.anime .aa.vu .fb .q div{opacity:1;transform:none}
.anime .aa.vu .fb .q div:nth-child(1){transition-delay:.4s}.anime .aa.vu .fb .q div:nth-child(1) em{transition-delay:1.1s}
.anime .aa.vu .fb .q div:nth-child(2){transition-delay:.9s}.anime .aa.vu .fb .q div:nth-child(2) em{transition-delay:1.6s}
.anime .aa.vu .fb .q div:nth-child(3){transition-delay:1.4s}.anime .aa.vu .fb .q div:nth-child(3) em{transition-delay:2.1s}
.anime .aa.vu .fb .q div em{opacity:1}
.anime .aa .after .phone{transform:translateY(90px) rotate(4deg);opacity:0;transition:transform 1.1s cubic-bezier(.2,.75,.2,1) 2.4s,opacity .8s ease 2.4s}
.anime .aa.vu .after .phone{transform:none;opacity:1}
.anime .aa .vs{transform:translate(-50%,-50%) scale(0) rotate(-180deg);transition:transform .8s cubic-bezier(.3,1.5,.5,1) 2.2s}
.anime .aa.vu .vs{transform:translate(-50%,-50%) scale(1) rotate(0)}

/* ---------- l'offre : le prix se compte ---------- */
.anime .offer .ul>div{opacity:0;transform:translateX(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.25,1)}
.anime .offer.vu .ul>div{opacity:1;transform:none}
.anime .offer.vu .ul>div:nth-child(1){transition-delay:.5s}.anime .offer.vu .ul>div:nth-child(2){transition-delay:.62s}
.anime .offer.vu .ul>div:nth-child(3){transition-delay:.74s}.anime .offer.vu .ul>div:nth-child(4){transition-delay:.86s}
.anime .offer.vu .ul>div:nth-child(5){transition-delay:.98s}
.offer:after{content:"";position:absolute;right:-240px;top:-260px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(233,115,90,.22),transparent);pointer-events:none}
.anime .offer:before{animation:derive 14s ease-in-out infinite alternate}
.anime .offer:after{animation:derive 18s ease-in-out infinite alternate-reverse}
@keyframes derive{to{translate:140px -90px}}

/* ---------- les dix jours : une ligne se trace d'étape en étape ---------- */
.steps>div{overflow:hidden}
.steps>div:after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--turq),var(--corail));transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.6,0,.3,1)}
.anime .steps.vu>div:after{transform:scaleX(1)}
.anime .steps.vu>div:nth-child(2):after{transition-delay:.7s}
.anime .steps.vu>div:nth-child(3):after{transition-delay:1.4s}
.anime .steps.vu>div:nth-child(4):after{transition-delay:2.1s}
.steps>div:before{transition:background .4s ease,color .4s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.anime .steps.vu>div:before{background:var(--lagon);color:#fff;transform:rotate(-8deg)}
.anime .steps.vu>div:nth-child(1):before{transition-delay:.6s}
.anime .steps.vu>div:nth-child(2):before{transition-delay:1.3s}
.anime .steps.vu>div:nth-child(3):before{transition-delay:2s}
.anime .steps.vu>div:nth-child(4):before{transition-delay:2.7s}

/* ---------- fin : la photo respire, les boutons attirent le curseur ---------- */
.end{isolation:isolate}
.anime .end{background-size:115%;transition:background-size 6s cubic-bezier(.2,.6,.3,1)}
.anime .end.vu{background-size:100%}
@media (max-width:900px){.anime .end{background-size:cover}}
.aimant{transition:transform .35s cubic-bezier(.2,.75,.25,1)}

@media (prefers-reduced-motion:reduce){
  .metiers .piste{animation:none}
}
.offer>*{position:relative;z-index:1}