/* ===================================================================== Labe'l · Préloader + animations d'entrée de hero Chargé sur toutes les pages publiques. ===================================================================== */ /* ---------- FORCER LE MODE CLAIR ---------- */ /* Même si le téléphone est en dark mode, le site garde ses couleurs. */ :root{color-scheme:light} html,body{background-color:#fff;color:#111} /* Empêche les navigateurs d'auto-inverser les champs de formulaire en dark */ input,textarea,select,button{color-scheme:light} /* ---------- PRÉLOADER ---------- */ .lbl-preloader{ position:fixed;inset:0;z-index:2147483600; background:#FBF3E6; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:28px; transition:opacity .6s ease, visibility .6s ease; will-change:opacity; } .lbl-preloader.is-done{opacity:0;visibility:hidden;pointer-events:none} .lbl-preloader .lbl-logo{ width:min(180px, 42vw);height:auto; opacity:0;transform:translateY(8px) scale(.96); animation:lblLogoIn .7s cubic-bezier(.2,.7,.2,1) .05s forwards; filter:drop-shadow(0 8px 22px rgba(0,0,0,.08)); } .lbl-preloader .lbl-bar{ width:min(240px, 52vw);height:4px; background:rgba(217,68,102,.18);border-radius:999px;overflow:hidden; position:relative; } .lbl-preloader .lbl-bar::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,#D94466 0%, #E96588 55%, #D94466 100%); border-radius:inherit; transform-origin:left center; transform:scaleX(0); animation:lblBarFill 1.4s cubic-bezier(.4,.05,.2,1) .1s forwards; } .lbl-preloader .lbl-tagline{ font-family:system-ui,-apple-system,Inter,sans-serif; font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase; color:#B97238;opacity:0; animation:lblTagIn .6s ease .45s forwards; } @keyframes lblLogoIn{ to{opacity:1;transform:translateY(0) scale(1)} } @keyframes lblBarFill{ 0%{transform:scaleX(0)} 60%{transform:scaleX(.8)} 100%{transform:scaleX(1)} } @keyframes lblTagIn{to{opacity:1}} /* ---------- ANIMATIONS DU HERO À L'ARRIVÉE ---------- */ @keyframes lblHeroIn{ from{opacity:0;transform:translateY(22px)} to {opacity:1;transform:translateY(0)} } /* État initial : caché jusqu'à ce que le préloader libère la page (scopé sous html.lbl-js pour rester visible si le JS ne se charge pas) */ html.lbl-js .hero .pill, html.lbl-js .hero .hero-content h1, html.lbl-js .hero .hero-content p, html.lbl-js .hero .hero-content .hero-cta, html.lbl-js .hero-content h1, html.lbl-js .hero-content p, html.lbl-js .hero-content .hero-cta, html.lbl-js .qsm-hero h1, html.lbl-js .qsm-hero .hero-title, html.lbl-js .qsm-hero .hero-lede, html.lbl-js .qsm-hero .pill, html.lbl-js .qsm-hero .hero-cta, html.lbl-js .qsm-hero-grid > div:not(.portrait) > *, html.lbl-js .pricing .section-head > *, html.lbl-js .info h1, html.lbl-js .info .price-row, html.lbl-js .info .buy, html.lbl-js .crumb{ opacity:0; } /* Activées une fois que le préloader disparaît (classe posée sur ) */ body.lbl-ready .hero .pill, body.lbl-ready .qsm-hero .pill, body.lbl-ready .qsm-hero .eyebrow, body.lbl-ready .qsm-hero .crumb{ animation:lblHeroIn .7s cubic-bezier(.2,.7,.2,1) .05s both; } body.lbl-ready .qsm-hero .hero-actions{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .6s both; } body.lbl-ready .hero .hero-content h1, body.lbl-ready .hero-content h1, body.lbl-ready .qsm-hero h1, body.lbl-ready .qsm-hero .hero-title{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .2s both; } body.lbl-ready .hero .hero-content p, body.lbl-ready .hero-content p, body.lbl-ready .qsm-hero p, body.lbl-ready .qsm-hero .hero-lede{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .4s both; } body.lbl-ready .hero .hero-content .hero-cta, body.lbl-ready .hero-content .hero-cta, body.lbl-ready .qsm-hero .hero-cta{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .6s both; } /* Pages produits (pain / chocolat) */ body.lbl-ready .crumb{ animation:lblHeroIn .6s cubic-bezier(.2,.7,.2,1) .05s both; } body.lbl-ready .info h1{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .25s both; } body.lbl-ready .info .price-row{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .4s both; } body.lbl-ready .info .buy{ animation:lblHeroIn .9s cubic-bezier(.2,.7,.2,1) .55s both; } /* Page pro : section-head de la grille prix */ body.lbl-ready .pricing .section-head > *:nth-child(1){ animation:lblHeroIn .8s cubic-bezier(.2,.7,.2,1) .2s both; } body.lbl-ready .pricing .section-head > *:nth-child(2){ animation:lblHeroIn .8s cubic-bezier(.2,.7,.2,1) .35s both; } /* ===================================================================== SCROLL REVEAL · apparition progressive des éléments au scroll Géré par intro.js : ajoute .lbl-reveal aux éléments cibles et pose .is-in quand ils entrent dans le viewport. ===================================================================== */ html.lbl-js .lbl-reveal{ opacity:0; transform:translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; } html.lbl-js .lbl-reveal.is-in{ opacity:1; transform:translateY(0); } /* Léger zoom/fade pour les images qui apparaissent */ html.lbl-js .lbl-reveal-zoom{ opacity:0;transform:scale(.96); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } html.lbl-js .lbl-reveal-zoom.is-in{opacity:1;transform:scale(1)} /* ===================================================================== MICRO-INTERACTIONS · hover refinements ===================================================================== */ /* Cards produits : ombre rose subtile au survol, image plus vive */ .card{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .2s} .card:hover{box-shadow:0 18px 40px rgba(217,68,102,.12), 0 2px 6px rgba(0,0,0,.04)} .card-link{display:block;overflow:hidden} .card-link .card-img{transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease} .card-link:hover .card-img{transform:scale(1.06);filter:saturate(1.08)} /* Bouton panier des cartes : léger rebond */ .card .add-btn, .card .to-cart, .card-foot button{ transition:transform .15s ease, box-shadow .2s ease, background .15s; } .card .add-btn:hover, .card .to-cart:hover, .card-foot button:hover{ transform:translateY(-2px) scale(1.04); } .card .add-btn:active, .card .to-cart:active, .card-foot button:active{ transform:translateY(0) scale(.97); } /* Étapes "Comment ça marche" : pulse doux du numéro quand visible */ .step-num{transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease} .lbl-reveal.is-in .step-num{ animation:lblNumPop .7s cubic-bezier(.2,.7,.2,1) .15s both; } @keyframes lblNumPop{ 0% {transform:scale(.6);box-shadow:0 0 0 0 rgba(217,68,102,.5)} 55% {transform:scale(1.12);box-shadow:0 8px 18px rgba(217,68,102,.35)} 100%{transform:scale(1); box-shadow:0 6px 14px rgba(217,68,102,.22)} } /* Flèches entre les étapes : légère oscillation quand la section est visible */ .how .dash-arrow{transition:transform .3s ease;transform-origin:center} .how.is-in .dash-arrow{animation:lblArrowShift 2s ease-in-out infinite} @keyframes lblArrowShift{ 0%,100%{transform:translateX(0);opacity:.9} 50% {transform:translateX(6px);opacity:1} } /* Titres de section : léger soulignement qui se dessine */ .section-title{position:relative;display:inline-block} .section-title::after{ content:"";position:absolute;left:0;bottom:-6px; width:0;height:3px;border-radius:3px;background:#D94466; transition:width .9s cubic-bezier(.2,.7,.2,1) .2s; } .lbl-reveal.is-in .section-title::after, .section-head.lbl-reveal.is-in .section-title::after{ width:44px; } /* Respect utilisateur : réduit les animations */ @media (prefers-reduced-motion:reduce){ .lbl-preloader .lbl-logo, .lbl-preloader .lbl-bar::after, .lbl-preloader .lbl-tagline, body.lbl-ready .hero .pill, body.lbl-ready .hero .hero-content h1, body.lbl-ready .hero-content h1, body.lbl-ready .qsm-hero h1, body.lbl-ready .qsm-hero .hero-title, body.lbl-ready .hero .hero-content p, body.lbl-ready .hero-content p, body.lbl-ready .qsm-hero p, body.lbl-ready .qsm-hero .hero-lede, body.lbl-ready .hero .hero-content .hero-cta, body.lbl-ready .hero-content .hero-cta, body.lbl-ready .qsm-hero .hero-cta, body.lbl-ready .crumb, body.lbl-ready .info h1, body.lbl-ready .info .price-row, body.lbl-ready .info .buy, body.lbl-ready .pricing .section-head > *{ animation:none !important;opacity:1 !important;transform:none !important; } .lbl-preloader{transition:none} }