/* ========================================================================== UpMyChain — motion design de l'accueil (27/09/2026, demande de Damien : « explique rapidement le concept, simple, fluide, minimaliste, moderne »). Trois principes, tenus partout : 1. RIEN NE DÉPEND DU JS POUR ÊTRE LU. Les états cachés n'existent que sous `html.mo` (posé par le script du thème, dans le ) ; et si ce fichier-ci ou `umc-motion.js` ne se chargeaient pas, une animation de secours rend tout visible au bout de 2,5 s. 2. On n'anime que `transform` et `opacity` (composités, 60 i/s sur mobile). Le titre H1 n'est JAMAIS masqué : il est l'élément LCP de la page. 3. `prefers-reduced-motion` : aucun mouvement, aucune boucle, tout visible. ========================================================================== */ :root{ --mo-ease:cubic-bezier(.22,1,.36,1); /* sortie douce, « expo out » */ --mo-ease-in-out:cubic-bezier(.65,0,.35,1); --mo-etape:4.2s; /* durée d'une étape de la scène */ } /* ---------- 1. Entrée du hero, en cascade ---------------------------------- */ @keyframes mo-monte{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}} @keyframes mo-glisse{from{transform:translate3d(0,10px,0)}to{transform:none}} html.mo .hero .eyebrow, html.mo .hero .lede, html.mo .hero .search, html.mo .hero .trends, html.mo .hero .hero-cta, html.mo .hero .hero-note, html.mo .hero .steps{animation:mo-monte .8s var(--mo-ease) both;} /* H1 : mouvement seul, jamais d'opacité (LCP). */ html.mo .hero h1{animation:mo-glisse .8s var(--mo-ease) both;} html.mo .hero .eyebrow{animation-delay:.02s} html.mo .hero h1{animation-delay:.06s} html.mo .hero .lede{animation-delay:.16s} html.mo .hero .search{animation-delay:.24s} html.mo .hero .trends{animation-delay:.30s} html.mo .hero .hero-cta{animation-delay:.36s} html.mo .hero .hero-note{animation-delay:.42s} html.mo .hero .steps{animation-delay:.28s;animation-duration:1s} /* Le trait orange qui se dessine sous « près de chez vous ». */ .hero h1 em{position:relative;white-space:nowrap} .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em; border-radius:1em;background:var(--accent);opacity:.9;transform-origin:left center;transform:scaleX(1)} html.mo .hero h1 em::after{animation:mo-trait 1s .55s var(--mo-ease) both} @keyframes mo-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (max-width:520px){.hero h1 em{white-space:normal}.hero h1 em::after{display:none}} /* ---------- 2. Fond vivant du hero (deux halos qui dérivent) --------------- */ .hero{position:relative;overflow:hidden;isolation:isolate} /* ⛔ Pas de `filter:blur()` : animé en boucle, un flou de 60 px se recalcule à CHAQUE image dès que le GPU manque (téléphone modeste, rendu logiciel) — mesuré le 27/09, il figeait l'onglet. Le dégradé radial est déjà doux : aucun flou nécessaire. */ .mo-halo{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;opacity:.8} .mo-halo.a{width:560px;height:560px;right:-180px;top:-220px; background:radial-gradient(circle,var(--accent-soft) 0%,transparent 68%); animation:mo-derive-a 22s var(--mo-ease-in-out) infinite alternate} /* Le second halo reste DANS le hero (posé à mi-hauteur) : collé au bas, il était coupé net par le bord de la section et faisait une tache. */ .mo-halo.b{width:460px;height:460px;left:-240px;top:34%; background:radial-gradient(circle,rgba(255,99,0,.07) 0%,transparent 68%); animation:mo-derive-b 26s var(--mo-ease-in-out) infinite alternate} html[data-theme="dark"] .mo-halo.a{background:radial-gradient(circle,rgba(255,122,36,.11) 0%,transparent 68%)} html[data-theme="dark"] .mo-halo.b{background:radial-gradient(circle,rgba(255,122,36,.07) 0%,transparent 68%)} @keyframes mo-derive-a{to{transform:translate3d(-90px,70px,0) scale(1.12)}} @keyframes mo-derive-b{to{transform:translate3d(120px,-50px,0) scale(.92)}} /* Une trame de points, qui s'efface vers le bas : de la profondeur sans bruit. */ .mo-trame{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 20%,#000 0%,transparent 70%); mask-image:radial-gradient(ellipse 70% 60% at 70% 20%,#000 0%,transparent 70%)} /* ---------- 3. La scène « le concept en trois temps » ---------------------- */ .steps{position:relative} .mo-scene{position:relative;height:178px;margin:-6px -6px 22px;border-radius:14px; background:var(--bg-2);border:1px solid var(--line);overflow:hidden} .mo-sc{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:9px; opacity:0;transform:translate3d(0,8px,0);transition:opacity .5s var(--mo-ease),transform .6s var(--mo-ease);pointer-events:none} .steps[data-etape="1"] .mo-sc.s1, .steps[data-etape="2"] .mo-sc.s2, .steps[data-etape="3"] .mo-sc.s3{opacity:1;transform:none} /* Temps 1 — le besoin s'écrit */ .mo-bulle{align-self:flex-start;max-width:92%;background:var(--surface);border:1px solid var(--line); border-radius:14px 14px 14px 4px;padding:11px 14px;font-size:13.5px;line-height:1.45;color:var(--ink); box-shadow:var(--shadow)} /* ⚠️ Préfixe `.steps` : la page impose `.steps span{font-size:14px;color:var(--ink-3)}` à TOUS les span de la carte, et sa feuille en ligne passe après celle-ci — sans lui, le texte tapé, le badge et le jeton sortaient gris et trop gros (constaté sur capture, 27/09). */ .steps .mo-tape{font-size:inherit;color:inherit;display:inline;background:linear-gradient(currentColor,currentColor) no-repeat right/1.5px 1.05em; animation:mo-curseur .9s steps(1) infinite} @keyframes mo-curseur{50%{background-size:0 1.05em}} .steps .mo-envoi{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600; color:var(--on-accent);background:var(--accent);border-radius:100px;padding:6px 12px; opacity:0;transform:scale(.9);transition:opacity .35s,transform .45s var(--mo-ease)} .steps[data-etape="1"].mo-envoye .mo-envoi{opacity:1;transform:none} /* Temps 2 — des devis au même format */ .mo-devis{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px; background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px; opacity:0;transform:translate3d(14px,0,0);transition:opacity .45s,transform .6s var(--mo-ease),border-color .3s,box-shadow .3s} .mo-devis b{font-weight:600;color:var(--ink)} .mo-devis i{font-style:normal;color:var(--ink-3);font-size:12px} .mo-devis em{font-style:normal;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)} .steps[data-etape="2"] .mo-devis{opacity:1;transform:none} .steps[data-etape="2"] .mo-devis:nth-child(2){transition-delay:.12s} .steps[data-etape="2"] .mo-devis:nth-child(3){transition-delay:.24s} .mo-devis.retenu{position:relative} .steps[data-etape="2"].mo-choisi .mo-devis.retenu{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,99,0,.14)} .steps .mo-badge{position:absolute;right:10px;top:-9px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--on-accent);background:var(--accent);border-radius:100px;padding:2px 8px; opacity:0;transform:translate3d(0,4px,0) scale(.9);transition:opacity .3s,transform .4s var(--mo-ease)} .steps[data-etape="2"].mo-choisi .mo-badge{opacity:1;transform:none} /* Temps 3 — l'argent bloqué, puis versé */ .mo-piste{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;margin-top:6px} .mo-piste::before,.mo-piste::after{content:"";position:absolute;left:16.6%;right:16.6%;top:19px;height:2px;border-radius:2px;background:var(--line)} .mo-piste::after{background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 2.4s var(--mo-ease-in-out)} .steps[data-etape="3"].mo-verse .mo-piste::after{transform:scaleX(1)} .mo-noeud{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center; font-size:11.5px;line-height:1.3;color:var(--ink-3)} .steps .mo-noeud span{font-size:inherit;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%; background:var(--surface);border:1.5px solid var(--line);color:var(--ink-3); transition:border-color .35s,color .35s,background .35s,transform .45s var(--mo-ease)} .mo-noeud svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .steps[data-etape="3"] .mo-noeud.n1 span, .steps[data-etape="3"].mo-valide .mo-noeud.n2 span, .steps[data-etape="3"].mo-verse .mo-noeud.n3 span{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft);transform:scale(1.06)} .steps[data-etape="3"] .mo-noeud.n1, .steps[data-etape="3"].mo-valide .mo-noeud.n2, .steps[data-etape="3"].mo-verse .mo-noeud.n3{color:var(--ink-2)} .steps .mo-jeton{position:absolute;z-index:2;top:6px;left:16.6%;margin-left:-26px;width:52px;text-align:center; font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--on-accent);background:var(--accent); border-radius:100px;padding:3px 0;box-shadow:0 4px 14px rgba(255,99,0,.35); opacity:0;transform:translate3d(0,-10px,0);transition:opacity .35s,transform .5s var(--mo-ease),left 2.4s var(--mo-ease-in-out)} .steps[data-etape="3"] .mo-jeton{opacity:1;transform:translate3d(0,-22px,0)} .steps[data-etape="3"].mo-verse .mo-jeton{left:83.4%} .mo-legende{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:4px;min-height:1.4em;transition:color .3s} .mo-legende b{color:var(--accent-ink);font-weight:640} /* Les étapes de la liste : l'active s'allume, une barre mesure le temps. */ .steps li{transition:opacity .35s var(--mo-ease)} html.mo .steps[data-etape] li{opacity:.5;cursor:pointer} html.mo .steps[data-etape] li.on{opacity:1} html.mo .steps[data-etape] li:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px} html.mo .steps[data-etape] li::before{transition:background .3s,color .3s} html.mo .steps[data-etape] li.on::before{background:var(--accent);color:var(--on-accent)} .steps li .mo-barre{display:block;height:2px;margin-top:9px;border-radius:2px;background:var(--line);overflow:hidden} .steps li .mo-barre::after{content:"";display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)} .steps li.on .mo-barre::after{animation:mo-progres var(--mo-etape) linear forwards} .steps.mo-pause li.on .mo-barre::after{animation-play-state:paused} @keyframes mo-progres{to{transform:scaleX(1)}} /* ---------- 4. Apparitions au défilement ----------------------------------- */ html.mo .rv{opacity:0;transform:translate3d(0,22px,0); transition:opacity .7s var(--mo-ease),transform .9s var(--mo-ease);transition-delay:calc(var(--i,0) * 80ms)} html.mo .rv.vu{opacity:1;transform:none} /* Filet de sécurité : si le script ne passe jamais, tout apparaît quand même. */ html.mo:not(.mo-pret) .rv{animation:mo-secours 0s 2.5s forwards} @keyframes mo-secours{to{opacity:1;transform:none}} /* ---------- 5. Cartes : relief, filet orange, icône qui se dessine --------- */ .grid-3 .card{position:relative} .grid-3 .card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--mo-ease)} .grid-3 a.card:hover::before,.grid-3 a.card:focus-visible::before{transform:scaleX(1)} .grid-3 a.card .mo-fleche{position:absolute;right:20px;top:24px;width:18px;height:18px;fill:none;stroke:var(--accent-ink); stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translate3d(-6px,0,0); transition:opacity .25s,transform .35s var(--mo-ease)} .grid-3 a.card:hover .mo-fleche,.grid-3 a.card:focus-visible .mo-fleche{opacity:1;transform:none} .mo-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px; background:var(--accent-soft);color:var(--accent-ink);margin-bottom:16px} .mo-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mo-ico svg *{stroke-dasharray:1;stroke-dashoffset:0} html.mo .rv .mo-ico svg *{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--mo-ease) .25s} html.mo .rv.vu .mo-ico svg *{stroke-dashoffset:0} /* Bandeau et appel final : un reflet lent qui traverse, une fois à l'arrivée. */ .band,.cta{position:relative;overflow:hidden} .band::after,.cta::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translate3d(-100%,0,0)} html[data-theme="dark"] .band::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.05) 50%,transparent 65%)} .band.vu::after,.cta.vu::after{animation:mo-reflet 1.6s .3s var(--mo-ease) both} @keyframes mo-reflet{to{transform:translate3d(100%,0,0)}} /* Boutons pleins : une pression qui répond. */ .btn,.search input[type=submit]{transition:background .15s,border-color .15s,color .15s,transform .2s var(--mo-ease),box-shadow .2s} .btn-solid:hover,.search input[type=submit]:hover{transform:translate3d(0,-1px,0);box-shadow:0 6px 18px rgba(255,99,0,.28)} .btn:active,.search input[type=submit]:active{transform:scale(.98)} /* ---------- 6. Mouvement réduit : tout est là, rien ne bouge -------------- */ @media (prefers-reduced-motion:reduce){ html.mo .hero *,html.mo .hero h1 em::after{animation:none!important} .mo-halo{animation:none!important} html.mo .rv{opacity:1!important;transform:none!important;transition:none!important} html.mo .rv .mo-ico svg *{stroke-dashoffset:0!important} .mo-sc,.mo-devis,.mo-jeton,.mo-piste::after,.mo-noeud span{transition:none!important} .steps li .mo-barre{display:none} .band::after,.cta::after,.mo-tape{animation:none!important} } /* ========================================================================== 2e passe (27/09 soir) — « Toute la Côte d'Azur », « ce que vous trouvez ici », FAQ ========================================================================== */ /* ---------- 7. La carte vivante des communes ------------------------------- */ .cz{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center} .cz .head{margin-bottom:26px} .cz-chips{display:flex;flex-wrap:wrap;gap:10px} .cz-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border:1px solid var(--line); border-radius:12px;background:var(--surface);font-size:14.5px;color:var(--ink-2); transition:border-color .2s,color .2s,background .25s,box-shadow .3s,opacity .7s var(--mo-ease),transform .5s var(--mo-ease)} .cz-chip svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--accent-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cz-chip:hover,.cz-chip:focus-visible,.cz-chip.actif{border-color:var(--accent);color:var(--ink);box-shadow:var(--shadow)} .cz-chip.actif{background:var(--accent-soft)} .cz-tout{color:var(--accent-ink);font-weight:600;padding-left:14px} .cz-tout svg{stroke:currentColor;transition:transform .3s var(--mo-ease)} .cz-tout:hover svg{transform:translate3d(3px,0,0)} .cz-carte{margin:0;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:16px 16px 10px;box-shadow:var(--shadow);overflow:hidden} .cz-carte svg{display:block;width:100%;height:auto;overflow:visible} .cz-mer{fill:url(#czMer)} .cz-cote{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0} html.mo .cz-carte.rv .cz-cote{stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--mo-ease-in-out) .15s} html.mo .cz-carte.rv.vu .cz-cote{stroke-dashoffset:0} .cz-lib-mer{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;fill:var(--ink-3);text-anchor:middle;opacity:.65} .cz-lib-pays{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;fill:var(--ink-3);text-anchor:end;opacity:.55} .cz-pt .pop{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .55s var(--mo-ease)} .cz-pt.ok .pop{transform:scale(1)} .cz-pt .coeur{fill:var(--accent);stroke:var(--surface);stroke-width:2;transition:transform .3s var(--mo-ease);transform-box:fill-box;transform-origin:center} .cz-pt .onde{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center} .cz-pt .nom{font-size:12px;font-weight:650;fill:var(--ink);text-anchor:middle;opacity:0;transition:opacity .3s; paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round} .cz-pt.actif .coeur{transform:scale(1.35)} .cz-pt.actif .nom{opacity:1} .cz-pt.actif .onde{animation:cz-onde 1.8s var(--mo-ease) infinite} @keyframes cz-onde{from{opacity:.4;transform:scale(.3)}to{opacity:0;transform:scale(1.7)}} .cz-legende{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);padding:6px 4px 2px} .cz-legende b{color:var(--ink);font-weight:640} .cz-legende-pt{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:0 0 auto} @media (max-width:980px){.cz{grid-template-columns:1fr;gap:30px}} /* ---------- 8. « Ce que vous trouvez ici » : quatre cartes ---------------- */ .tp-tete{max-width:780px} .tp-tete p{color:var(--ink-2);font-size:16.5px;line-height:1.7} .tp-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .tp{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:28px 28px 30px;transition:border-color .25s,box-shadow .35s,opacity .7s var(--mo-ease),transform .6s var(--mo-ease)} .tp::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);opacity:0;transition:opacity .45s} .tp:hover{border-color:var(--accent);box-shadow:var(--shadow)} .tp:hover::after{opacity:1} .tp h3{position:relative;font-size:18.5px;margin-bottom:10px} .tp p{position:relative;color:var(--ink-2);font-size:15px;line-height:1.72} .tp a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .tp a:hover{color:var(--accent-hover)} @media (max-width:760px){.tp-grille{grid-template-columns:1fr}.tp{padding:24px 22px 26px}} /* ---------- 9. FAQ : accordéon ------------------------------------------- */ .faq{display:grid;grid-template-columns:.78fr 1.4fr;gap:60px;align-items:start} .faq-cote{position:sticky;top:96px} .faq-cote h2{font-size:clamp(25px,3.1vw,36px);margin-bottom:14px} .faq-cote p{color:var(--ink-2);font-size:16px;line-height:1.65} .faq-cote .see-all{margin-top:20px} .faq-it{position:relative;border-bottom:1px solid var(--line)} .faq-it:first-child{border-top:1px solid var(--line)} .faq-it h3{font-size:17px;line-height:1.4;padding:20px 0;margin:0;transition:color .2s} .faq-rep p{color:var(--ink-2);font-size:15.5px;line-height:1.72;padding:0 44px 22px 0} .faq-rep a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} .faq-it::before{content:"";position:absolute;left:-18px;top:20px;bottom:20px;width:2px;border-radius:2px; background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--mo-ease)} .faq-it.ouvert::before{transform:scaleY(1)} .faq-bt{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:18px;cursor:pointer} .faq-bt:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px} .faq-it:hover h3,.faq-it.ouvert h3{color:var(--accent-ink)} .faq-plus{position:relative;flex:0 0 30px;height:30px;border-radius:50%;border:1px solid var(--line); transition:transform .5s var(--mo-ease),background .3s,border-color .3s} .faq-plus::before,.faq-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px; border-radius:2px;background:var(--ink-2);transition:background .3s} .faq-plus::after{transform:rotate(90deg)} .faq-it:hover .faq-plus{border-color:var(--accent)} .faq-it.ouvert .faq-plus{transform:rotate(135deg);background:var(--accent);border-color:var(--accent)} .faq-it.ouvert .faq-plus::before,.faq-it.ouvert .faq-plus::after{background:var(--on-accent)} /* Le repli n'existe que si le script a préparé la liste (sinon : tout reste ouvert). */ .faq-liste.pret .faq-rep{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--mo-ease)} .faq-liste.pret .faq-rep>div{overflow:hidden;min-height:0} .faq-liste.pret .faq-it.ouvert .faq-rep{grid-template-rows:1fr} .faq-liste.pret .faq-rep p{opacity:0;transform:translate3d(0,-6px,0);transition:opacity .3s,transform .45s var(--mo-ease)} .faq-liste.pret .faq-it.ouvert .faq-rep p{opacity:1;transform:none;transition-delay:.1s} @media (max-width:980px){.faq{grid-template-columns:1fr;gap:26px}.faq-cote{position:static}.faq-it::before{left:-12px}} @media (max-width:520px){.faq-rep p{padding-right:0}} @media (prefers-reduced-motion:reduce){ .cz-pt .pop{transform:none!important;transition:none!important} .cz-pt.actif .onde{animation:none!important} html.mo .cz-carte.rv .cz-cote{stroke-dashoffset:0!important;transition:none!important} .faq-liste.pret .faq-rep,.faq-liste.pret .faq-rep p,.faq-plus,.faq-it::before{transition:none!important} } /* ---------- 10. Survol ET apparition sur le même élément ------------------- */ /* `.rv` impose sa transition (opacité + position, décalée de --i × 80 ms) : sans ces règles, le relief au survol des cartes était soit perdu, soit retardé comme l'apparition. Chaque propriété reçoit ici sa durée ; le script remet --i à 0 une fois l'élément apparu, pour que le survol réponde tout de suite. */ html.mo .card.rv,html.mo .tp.rv,html.mo .cz-chip.rv{ transition-property:opacity,transform,border-color,box-shadow,background-color,color; transition-duration:.7s,.9s,.25s,.35s,.25s,.2s;transition-timing-function:var(--mo-ease); transition-delay:calc(var(--i,0) * 80ms),calc(var(--i,0) * 80ms),0s,0s,0s,0s} html.mo .cz-chip.rv{transition-delay:calc(var(--i,0) * 45ms),calc(var(--i,0) * 45ms),0s,0s,0s,0s} html.mo .card.rv.vu:hover,html.mo .tp.rv.vu:hover{transform:translate3d(0,-3px,0)} html.mo .cz-chip.rv.vu:hover{transform:translate3d(0,-2px,0)}