/* ============================================================ motion-conviction.css · couche cinetique des pages de conviction desle.immo · 2026-07-26 · vanilla, zero dependance, zero requete Pages : /vendre/ /contact/ /acheter/ /rue/ /notaires/ /separation/ ------------------------------------------------------------ Deux familles de regles, volontairement separees : A. MOUVEMENT — toutes les regles portees par html.dl-c. La classe dl-c n'est posee que par la garde inline du , et seulement si le mouvement est autorise. Elle est retiree si assets/js/motion-conviction.js ne s'amorce pas (filet 2500 ms). Donc : pas de dl-c => aucun etat initial => page complete, immobile. B. ETAT DE FORMULAIRE — regles NON portees par dl-c (focus, coche de champ valide, bouton en cours d'envoi). Ce sont des informations, pas des animations : elles doivent rester visibles y compris en reduced-motion, ou seules leurs transitions sont coupees. Rien ici ne redefinit le chrome partage (site.css / site.js) ni les mecanismes existants : .reveal, .dl-line, [data-count], .dl-cta-fill restent la propriete de site.js. On les reutilise, on ne les double pas. Animations : transform + opacity uniquement. ============================================================ */ :root{ --mc-ease:cubic-bezier(.76,0,.24,1); /* easing maison, courses tracees */ --mc-ease-out:cubic-bezier(.16,1,.3,1); /* arrivees, deceleration longue */ } /* ============================================================ A. MOUVEMENT (html.dl-c uniquement) ============================================================ */ /* -- A1. entree en scene generique ------------------------------------ */ html.dl-c [data-mc-in]{ opacity:0; transform:translateY(16px); transition:opacity .72s var(--mc-ease-out), transform .72s var(--mc-ease-out); } html.dl-c [data-mc-in].is-in{ opacity:1; transform:none; } /* B2B (notaires, separation) : meme geste, course plus courte et plus lente. La sobriete se joue sur l'amplitude, pas sur un autre vocabulaire. */ html.dl-c [data-mc-sober] [data-mc-in]{ transform:translateY(10px); transition-duration:.86s; } /* -- A2. filet Lagon des sur-titres : se trace depuis la gauche -------- */ html.dl-c [data-mc-rule]{ transform:scaleX(0); transform-origin:left center; transition:transform .8s var(--mc-ease); } html.dl-c [data-mc-rule].is-in{ transform:none; } /* -- A3. /vendre/ : la reponse directe. Le trait Lagon de sa bordure gauche descend comme un trait de plume. La bordure reste en place (rendue transparente), donc aucune variation de gabarit. ------------- */ html.dl-c [data-mc-answer]{ position:relative; border-left-color:transparent; } html.dl-c [data-mc-answer]::before{ content:''; position:absolute; left:-2px; top:0; bottom:0; width:2px; background:var(--lagon); transform:scaleY(0); transform-origin:top center; transition:transform .95s var(--mc-ease) .08s; } html.dl-c [data-mc-answer].is-in::before{ transform:none; } /* -- A4. tableau des medianes : cascade ligne a ligne ------------------ */ html.dl-c [data-mc-cascade] tr{ opacity:0; transform:translateY(9px); transition:opacity .58s var(--mc-ease-out), transform .58s var(--mc-ease-out); } html.dl-c [data-mc-cascade].is-in tr{ opacity:1; transform:none; } html.dl-c [data-mc-cascade].is-in tr:nth-child(1){ transition-delay:0s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(2){ transition-delay:.055s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(3){ transition-delay:.11s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(4){ transition-delay:.165s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(5){ transition-delay:.22s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(6){ transition-delay:.275s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(7){ transition-delay:.33s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(8){ transition-delay:.385s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(9){ transition-delay:.44s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(10){ transition-delay:.495s; } html.dl-c [data-mc-cascade].is-in tr:nth-child(n+11){ transition-delay:.55s; } /* -- A5. /vendre/ : les cinq etapes se cochent au passage -------------- Un carre vide apparait avec le titre de section (etape en cours), puis se remplit d'une coche quand la section est passee. Purement decoratif : aucun texte genere, aucun element ajoute au HTML. ------------------- */ html.dl-c [data-mc-step] > h2{ position:relative; padding-top:30px; } html.dl-c [data-mc-step] > h2::before{ content:''; position:absolute; top:2px; left:0; width:11px; height:11px; border:1px solid var(--hair-strong); border-radius:2px; opacity:0; transform:scale(.5); transition:opacity .4s ease, transform .5s var(--mc-ease-out), border-color .4s ease; } html.dl-c [data-mc-step] > h2::after{ content:''; position:absolute; top:5px; left:2px; width:9px; height:5px; border-left:1.5px solid var(--lagon); border-bottom:1.5px solid var(--lagon); opacity:0; transform:rotate(-45deg) scale(.4); transform-origin:center; transition:opacity .3s ease, transform .5s var(--mc-ease-out); } html.dl-c [data-mc-step].is-active > h2::before{ opacity:1; transform:none; } html.dl-c [data-mc-step].is-done > h2::before{ border-color:var(--lagon); } html.dl-c [data-mc-step].is-done > h2::after{ opacity:1; transform:rotate(-45deg) scale(1); } /* -- A6. CTA vivant --------------------------------------------------- Signature d'entree : un seul passage d'encre Lagon dans le remplissage .dl-cta-fill deja present (jamais remplace ; la classe est retiree en fin de course et le survol reprend la main). */ @keyframes mc-sweep{ 0%{ transform:translateY(101%); } 46%{ transform:translateY(0); } 100%{ transform:translateY(-101%); } } html.dl-c .mc-sweep .dl-cta-fill{ animation:mc-sweep 1.05s var(--mc-ease) both; } /* la fleche avance au survol du bouton : le geste dit « ca part » */ html.dl-c [data-mc-arrow]{ display:inline-block; transition:transform .42s var(--mc-ease); } html.dl-c [data-mc-cta]:hover [data-mc-arrow], html.dl-c [data-mc-cta]:focus-visible [data-mc-arrow]{ transform:translateX(6px); } /* -- A7. arrivees de message : la confirmation a du poids ------------- */ @keyframes mc-arrive{ 0%{ opacity:0; transform:translateY(12px); } 100%{ opacity:1; transform:none; } } @keyframes mc-draw{ 0%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } } html.dl-c [data-mc-status].mc-arrive{ animation:mc-arrive .6s var(--mc-ease-out) both; } html.dl-c [data-mc-confirm]{ position:relative; } html.dl-c [data-mc-confirm].mc-arrive{ animation:mc-arrive .68s var(--mc-ease-out) both; } /* trait Lagon qui se tire sur le bord haut du bloc de confirmation */ html.dl-c [data-mc-confirm]::before{ content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:var(--lagon); transform:scaleX(0); transform-origin:left center; } html.dl-c [data-mc-confirm].mc-arrive::before{ animation:mc-draw .85s var(--mc-ease) .2s both; } /* ============================================================ B. ETAT DE FORMULAIRE (hors dl-c : c'est de l'information) ============================================================ */ /* -- B1. focus : le champ se detache, son libelle passe en encre ------- */ [data-mc-field]{ position:relative; } [data-mc-field] > label{ transition:color .25s ease; } [data-mc-field]:focus-within > label{ color:var(--ink); } [data-mc-field] input:focus, [data-mc-field] select:focus, [data-mc-field] textarea:focus{ border-color:var(--lagon); box-shadow:0 0 0 3px rgba(21,158,145,.12); } /* -- B2. champ complete : une coche Lagon se pose contre le libelle ---- Jamais de rouge ici. Le rouge reste la propriete des messages d'erreur deja en place, au moment de l'envoi. */ [data-mc-field] > label::after{ content:''; display:inline-block; vertical-align:middle; width:9px; height:5px; margin:-3px 0 0 8px; border-left:1.5px solid var(--lagon); border-bottom:1.5px solid var(--lagon); opacity:0; transform:rotate(-45deg) scale(.4); transition:opacity .28s ease, transform .45s var(--mc-ease-out); } [data-mc-field].is-ok > label::after{ opacity:1; transform:rotate(-45deg) scale(1); } /* -- B3. bouton d'envoi : etat « envoi » physique --------------------- L'encre monte et reste haute pendant l'attente, le libelle recule d'un cran, et un trait Lagon fait des allers-retours sous le bouton. Aucun texte n'est remplace : l'etat est entierement porte par la matiere. */ [data-mc-submit]{ position:relative; } [data-mc-submit].is-sending{ pointer-events:none; } [data-mc-submit].is-sending .dl-cta-fill{ transform:translateY(0); } [data-mc-submit].is-sending .dl-cta-label, [data-mc-submit].is-sending > span{ opacity:.5; transition:opacity .3s ease; } /* bouton lagon (B2B) : le remplissage devient papier, le libelle passe en encre */ .dl-cta-lagon.is-sending .dl-cta-label{ color:var(--ink) !important; } [data-mc-submit]::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--lagon); opacity:0; transform:scaleX(0); transform-origin:left center; } [data-mc-submit].is-sending::after{ opacity:1; animation:mc-run 1.15s var(--mc-ease) infinite; } @keyframes mc-run{ 0%{ transform:scaleX(0); transform-origin:left center; } 49.9%{ transform:scaleX(1); transform-origin:left center; } 50%{ transform:scaleX(1); transform-origin:right center; } 100%{ transform:scaleX(0); transform-origin:right center; } } /* ============================================================ COUPURE TOTALE reduced-motion : plus aucune course, et chaque etat final est lisible. (La garde du ne pose meme pas dl-c dans ce cas ; ces regles sont la ceinture de securite si dl-c arrivait d'un cache obsolete.) ============================================================ */ @media (prefers-reduced-motion: reduce){ html.dl-c [data-mc-in], html.dl-c [data-mc-rule], html.dl-c [data-mc-cascade] tr, html.dl-c [data-mc-status], html.dl-c [data-mc-confirm]{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; } html.dl-c [data-mc-answer]{ border-left-color:var(--lagon); } html.dl-c [data-mc-answer]::before, html.dl-c [data-mc-confirm]::before{ display:none !important; } html.dl-c [data-mc-step] > h2{ padding-top:0; } html.dl-c [data-mc-step] > h2::before, html.dl-c [data-mc-step] > h2::after{ display:none !important; } html.dl-c .mc-sweep .dl-cta-fill{ animation:none !important; } html.dl-c [data-mc-arrow]{ transition:none !important; transform:none !important; } /* etats de formulaire : conserves, mais instantanes */ [data-mc-field] > label, [data-mc-field] > label::after, [data-mc-submit] .dl-cta-label, [data-mc-submit] > span{ transition:none !important; } [data-mc-field].is-ok > label::after{ opacity:1; transform:rotate(-45deg) scale(1); } [data-mc-submit].is-sending::after{ animation:none !important; transform:scaleX(1); } }