/* Corsala.com : couche de mouvement partagée par toutes les pages.
   Conception : docs/superpowers/specs/2026-10-04-corsala-motion-vitrine-design.md
   Chargée avant les styles en ligne de la page : les règles statiques sont préfixées par :root,
   tout ce qui bouge dépend de .mo (classe posée par motion.js quand le mouvement est permis).
   Rien ici ne change la taille d'un élément après le premier rendu. */

/* 1. Transitions entre les pages du site (Chrome 126+, Safari 18.2+, ailleurs sans effet) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  nav.top{ view-transition-name: mo-nav; }
  ::view-transition-old(root){ animation: mo-vt-out .28s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root){ animation: mo-vt-in .56s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes mo-vt-out{ to{ opacity: 0; transform: translateY(-10px); } }
@keyframes mo-vt-in{ from{ opacity: 0; transform: translateY(18px); } }

/* 2. Vitrine produit : place réservée (le canevas est dessiné par showcase.js, la hauteur ne bouge jamais) */
:root .cs-sec{ padding-top: clamp(24px, 4vw, 56px); }
:root .cs{ position: relative; width: 100%; max-width: 1180px; aspect-ratio: 1180 / 700; margin: clamp(32px, 4.4vw, 56px) auto 0; }
@media (max-width: 719px){ :root .cs{ aspect-ratio: 380 / 640; max-width: 460px; } :root .cs-wrap{ max-width: 460px; margin-inline: auto; } }
:root .cs-steps{ list-style: none; margin: clamp(22px, 3vw, 34px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; }
:root .cs-steps li{ display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; transition: color .4s var(--ease), border-color .4s var(--ease); }
:root .cs-steps li b{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--bg-2); color: var(--ink-2); transition: background-color .4s var(--ease), color .4s var(--ease); }
:root .cs-steps li.on{ color: var(--ink); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
:root .cs-steps li.on b{ background: var(--brand); color: var(--on-cta); }
@media (max-width: 719px){ :root .cs-steps{ gap: 6px; } :root .cs-steps li{ font-size: 12px; padding: 3px 10px 3px 3px; gap: 6px; } :root .cs-steps li b{ width: 20px; height: 20px; font-size: 10.5px; } }

/* 3. La table : un visage par corps de métier, le picto devient une pastille */
:root .stage .seat .av{ position: relative; width: clamp(50px, 6.2vw, 76px); height: clamp(50px, 6.2vw, 76px); background: var(--bg-2); }
:root .stage .seat .av > img{ position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
:root .stage .seat .av > svg{ position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--card); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgba(17,16,19,.25); }
@media (max-width: 640px){ :root .stage .seat .av > svg{ width: 20px; height: 20px; padding: 4px; right: -4px; bottom: -4px; } }
:root .stage .seat .av::after{ content: ""; position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px var(--card); opacity: 0; transform: scale(.3); pointer-events: none; }
.mo .stage .seat .av::after{ transition: opacity .3s var(--ease), transform .55s var(--ease); }
.mo .stage .seat.ack .av::after{ opacity: 1; transform: scale(1); }

/* Bulles d'activité de la table (créées par motion.js, décoratives) */
:root .mo-bub{ position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(17,16,19,.05), 0 16px 34px -18px rgba(17,16,19,.35); font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transform: scale(.82); transform-origin: var(--bo, 50% 50%); transition: opacity .35s var(--ease), transform .6s var(--ease); }
:root .mo-bub.show{ opacity: 1; transform: scale(1); }
:root .mo-bub .mo-art{ flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); overflow: hidden; }
:root .mo-bub .mo-art svg{ width: 18px; height: 18px; }
:root .mo-bub .mo-art.ph{ width: auto; height: auto; background: none; display: flex; gap: 3px; overflow: visible; }
:root .mo-bub .mo-art.ph i{ width: 22px; height: 30px; border-radius: 6px; background: var(--bg-2) center / cover no-repeat; box-shadow: 0 0 0 1px var(--line); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .4s var(--ease), transform .6s var(--ease); }
:root .mo-bub.said .mo-art.ph i{ opacity: 1; transform: none; }
:root .mo-bub.said .mo-art.ph i:nth-child(2){ transition-delay: .12s; }
:root .mo-bub.said .mo-art.ph i:nth-child(3){ transition-delay: .24s; }
:root .mo-bub .mo-txt small{ display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); }
:root .mo-bub .mo-typing{ display: inline-flex; gap: 4px; padding: 4px 6px; }
:root .mo-bub .mo-typing b{ width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: mo-type 1s var(--ease) infinite; }
:root .mo-bub .mo-typing b:nth-child(2){ animation-delay: .15s; }
:root .mo-bub .mo-typing b:nth-child(3){ animation-delay: .3s; }
:root .mo-bub.said .mo-typing{ display: none; }
:root .mo-bub:not(.said) .mo-txt, :root .mo-bub:not(.said) .mo-art{ display: none; }
:root .mo-bub .mo-sign path{ stroke-dasharray: 60; stroke-dashoffset: 60; }
:root .mo-bub.said .mo-sign path{ animation: mo-draw 1.1s var(--ease) .15s forwards; }
@keyframes mo-type{ 0%, 60%, 100%{ transform: translateY(0); opacity: .45; } 30%{ transform: translateY(-4px); opacity: 1; } }
@keyframes mo-draw{ to{ stroke-dashoffset: 0; } }
@media (max-width: 640px){
  :root .mo-bub{ font-size: 11px; padding: 5px 9px 5px 5px; gap: 6px; border-radius: 11px; }
  :root .mo-bub .mo-art{ width: 22px; height: 22px; border-radius: 7px; }
  :root .mo-bub .mo-art svg{ width: 14px; height: 14px; }
  :root .mo-bub .mo-art.ph i{ width: 15px; height: 21px; border-radius: 4px; }
  :root .mo-bub .mo-txt small{ display: none; }
}

/* 4. Liseré lumineux qui fait le tour des cartes clés */
@property --mo-a{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root .t-main{ position: relative; }
:root .mo-beam{ position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; background: conic-gradient(from var(--mo-a, 0deg), transparent 0deg 268deg, color-mix(in srgb, var(--brand) 70%, transparent) 318deg, #FFFFFF 342deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
:root .mo-beam.on{ animation: mo-beam 4s cubic-bezier(.45,.05,.3,1) 1 both; }
:root .scene-card > .mo-beam{ background: conic-gradient(from var(--mo-a, 0deg), transparent 0deg 280deg, color-mix(in srgb, var(--brand) 50%, transparent) 330deg, var(--brand) 348deg, transparent 360deg); }
@keyframes mo-beam{ 0%{ --mo-a: 0deg; opacity: 0; } 14%{ opacity: .95; } 80%{ opacity: .95; } 100%{ --mo-a: 360deg; opacity: 0; } }

/* 5. Chiffres en rouleaux : le vrai chiffre reste en place (transparent pendant le roulement) ;
   la colonne décorative mo-r porte les chiffres en contenu généré et disparaît à la fin.
   Hauteurs en em (--mo-lh) et largeur du vrai chiffre : la colonne suit la police si l'écran change. */
:root .mo-odo mo-d{ display: inline-block; position: relative; color: transparent; clip-path: inset(0); }
:root .mo-odo.mo-done mo-d{ color: inherit; clip-path: none; }
:root mo-r{ position: absolute; left: 0; right: 0; top: 0; color: var(--mo-c, currentColor); text-align: center; pointer-events: none; -webkit-user-select: none; user-select: none; transform: translateY(calc(var(--mo-lh, 1.2em) * var(--mo-k, 0) * -1)); transition: transform 1.3s cubic-bezier(.16,1,.3,1) var(--mo-dl, 0ms); }
:root mo-r::before{ content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; line-height: var(--mo-lh, 1.2em); }
@media print{ :root .mo-odo mo-d{ color: inherit; clip-path: none; } :root mo-r{ display: none; } }

/* 6. Titres : la ligne grise s'encre au fil du défilement (couleurs lues sur la page par motion.js) */
:root.mo .h-sec .gray.mo-ink .w{ color: color-mix(in srgb, var(--mo-ink) calc(clamp(0, var(--mo-p, 0) * var(--mo-n, 1) - var(--mo-i, 0), 1) * 100%), var(--mo-gray)); }

/* 7. Écrans produit : une vraie fenêtre d'application */
:root .feat .ui:not(.phone .ui), :root .vis .ui:not(.phone .ui){ position: relative; padding-top: 52px; }
:root .feat .ui:not(.phone .ui)::before, :root .vis .ui:not(.phone .ui)::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; background: radial-gradient(circle at 18px 17px, color-mix(in srgb, var(--ink) 20%, transparent) 0 4px, transparent 4.6px), radial-gradient(circle at 33px 17px, color-mix(in srgb, var(--ink) 14%, transparent) 0 4px, transparent 4.6px), radial-gradient(circle at 48px 17px, color-mix(in srgb, var(--ink) 9%, transparent) 0 4px, transparent 4.6px), color-mix(in srgb, var(--bg-2) 70%, var(--card)); }
:root .feat .ui:not(.phone .ui)::after, :root .vis .ui:not(.phone .ui)::after{ content: "app.corsala.com"; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); height: 17px; padding: 0 12px; border-radius: 6px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 10.5px; font-weight: 500; line-height: 17px; color: var(--ink-3); white-space: nowrap; }

/* 8. Téléphone : barre d'état */
:root .phone .screen::before{ content: "9:41"; position: absolute; top: 12px; left: 30px; z-index: 2; font-size: 12.5px; font-weight: 600; line-height: 26px; color: var(--ink); letter-spacing: -.01em; }
:root .phone .screen::after{ content: ""; position: absolute; top: 19px; right: 26px; z-index: 2; width: 52px; height: 12px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Crect x='0' y='7' width='3' height='5' rx='1'/%3E%3Crect x='4.5' y='5' width='3' height='7' rx='1'/%3E%3Crect x='9' y='3' width='3' height='9' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M27 3.2a8.4 8.4 0 0 1 6 2.4l-1.3 1.4a6.4 6.4 0 0 0-9.4 0L21 5.6a8.4 8.4 0 0 1 6-2.4zm0 3.6a4.6 4.6 0 0 1 3.3 1.3L27 11.6l-3.3-3.5A4.6 4.6 0 0 1 27 6.8z'/%3E%3Crect x='37' y='1.5' width='12' height='9' rx='2.5' fill='none' stroke='%23000' stroke-width='1.3' opacity='.55'/%3E%3Crect x='38.8' y='3.3' width='8.4' height='5.4' rx='1.3'/%3E%3Crect x='50' y='4.5' width='1.6' height='3' rx='.8' opacity='.55'/%3E%3C/svg%3E") no-repeat right center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Crect x='0' y='7' width='3' height='5' rx='1'/%3E%3Crect x='4.5' y='5' width='3' height='7' rx='1'/%3E%3Crect x='9' y='3' width='3' height='9' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M27 3.2a8.4 8.4 0 0 1 6 2.4l-1.3 1.4a6.4 6.4 0 0 0-9.4 0L21 5.6a8.4 8.4 0 0 1 6-2.4zm0 3.6a4.6 4.6 0 0 1 3.3 1.3L27 11.6l-3.3-3.5A4.6 4.6 0 0 1 27 6.8z'/%3E%3Crect x='37' y='1.5' width='12' height='9' rx='2.5' fill='none' stroke='%23000' stroke-width='1.3' opacity='.55'/%3E%3Crect x='38.8' y='3.3' width='8.4' height='5.4' rx='1.3'/%3E%3Crect x='50' y='4.5' width='1.6' height='3' rx='.8' opacity='.55'/%3E%3C/svg%3E") no-repeat right center / contain; }

/* 9. Cartes métiers : le visage du métier, le picto en pastille (aucune modification HTML) */
:root .roles-grid a.card[href="/architecte-interieur/"] .ic{ --mo-face: url("/corsala/assets/faces/architecte.webp"); }
:root .roles-grid a.card[href="/economiste/"] .ic{ --mo-face: url("/corsala/assets/faces/economiste.webp"); }
:root .roles-grid a.card[href="/entreprise-tce/"] .ic{ --mo-face: url("/corsala/assets/faces/conductrice.webp"); }
:root .roles-grid a.card[href="/artisan/"] .ic{ --mo-face: url("/corsala/assets/faces/artisan.webp"); }
:root .roles-grid a.card[href="/moa-deleguee/"] .ic{ --mo-face: url("/corsala/assets/faces/moa.webp"); }
:root .roles-grid a.card[href="/atelier-agencement/"] .ic{ --mo-face: url("/corsala/assets/faces/menuisier.webp"); }
:root .roles-grid a.card[href="/electricien/"] .ic{ --mo-face: url("/corsala/assets/faces/electricien.webp"); }
:root .roles-grid a.card[href="/climatisation/"] .ic{ --mo-face: url("/corsala/assets/faces/climaticien.webp"); }
:root .roles-grid a.card[href="/entreprise-nettoyage/"] .ic{ --mo-face: url("/corsala/assets/faces/nettoyage.webp"); }
:root .roles-grid a.card[href="/entreprise-renovation/"] .ic{ --mo-face: url("/corsala/assets/faces/renovation.webp"); }
:root .roles-grid a.card:is([href="/architecte-interieur/"], [href="/economiste/"], [href="/entreprise-tce/"], [href="/artisan/"], [href="/moa-deleguee/"], [href="/atelier-agencement/"], [href="/electricien/"], [href="/climatisation/"], [href="/entreprise-nettoyage/"], [href="/entreprise-renovation/"]) .ic{ position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-2) var(--mo-face) center / cover no-repeat; color: var(--brand-ink); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .45s var(--ease), transform .6s var(--ease); }
:root .roles-grid a.card:is([href="/architecte-interieur/"], [href="/economiste/"], [href="/entreprise-tce/"], [href="/artisan/"], [href="/moa-deleguee/"], [href="/atelier-agencement/"], [href="/electricien/"], [href="/climatisation/"], [href="/entreprise-nettoyage/"], [href="/entreprise-renovation/"]) .ic svg{ position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 2px var(--card); transition: background-color .45s var(--ease), color .45s var(--ease); }
:root .roles-grid a.card:is([href="/architecte-interieur/"], [href="/economiste/"], [href="/entreprise-tce/"], [href="/artisan/"], [href="/moa-deleguee/"], [href="/atelier-agencement/"], [href="/electricien/"], [href="/climatisation/"], [href="/entreprise-nettoyage/"], [href="/entreprise-renovation/"]):is(:hover, :focus-visible, .lit) .ic{ box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); transform: scale(1.04); }
:root .roles-grid a.card:is([href="/architecte-interieur/"], [href="/economiste/"], [href="/entreprise-tce/"], [href="/artisan/"], [href="/moa-deleguee/"], [href="/atelier-agencement/"], [href="/electricien/"], [href="/climatisation/"], [href="/entreprise-nettoyage/"], [href="/entreprise-renovation/"]):is(:hover, :focus-visible, .lit) .ic svg{ background: var(--brand); color: var(--on-cta); }

/* 10. Inclinaison des cartes au pointeur : le script pose le transform, ici la réactivité pendant le survol */
:root.mo .mo-tilting{ transition-duration: .16s; will-change: transform; }

/* 11. Barre d'action sur téléphone (posée par motion.js) : en bas de l'écran sous 720 px, le bouton de Lia monte au-dessus */
:root .mo-bar{ display: none; }
@media (max-width: 719px){
  :root .mo-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147481000; display: flex; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg, #FFFEFD) 86%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-top: 1px solid var(--line, #E6E4E3); box-shadow: 0 -12px 30px -22px rgba(17,16,19,.35); transform: translateY(calc(100% + 2px)); visibility: hidden; transition: transform .45s var(--ease, cubic-bezier(.16,1,.3,1)), visibility 0s linear .45s; }
  :root .mo-bar.on{ transform: none; visibility: visible; transition: transform .45s var(--ease, cubic-bezier(.16,1,.3,1)), visibility 0s; }
  :root .mo-bar a{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font: 600 15.5px/1.1 "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif; letter-spacing: -.01em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  :root .mo-bar .mo-bar-try{ flex: 1 1 auto; background: var(--cta, #2B3BFF); color: var(--on-cta, #FFFEFD); }
  :root .mo-bar .mo-bar-try small{ margin-top: 3px; font-size: 11.5px; font-weight: 500; opacity: .86; }
  :root .mo-bar .mo-bar-demo{ flex: none; padding: 0 22px; background: var(--card, #FFFEFD); color: var(--ink, #111013); border: 1px solid var(--line, #E6E4E3); }
  :root .mo-bar a:focus-visible{ outline: 2px solid var(--brand, #2B3BFF); outline-offset: 2px; }
  :root .lia-fab{ transition: transform .5s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .5s var(--ease, ease), background-color .3s, bottom .45s var(--ease, cubic-bezier(.16,1,.3,1)); }
  :root.mo-bar-on .lia-fab{ bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 74px); }
}
@media (prefers-reduced-motion: reduce){ :root .mo-bar, :root .mo-bar.on, :root .lia-fab{ transition: none; } }
@media print{ :root .mo-bar{ display: none !important; } }