/* voir notes/refonte.notes.md §1 */ /* 2. Primitives de volume et de mouvement : voir notes/refonte.notes.md §2 */ :root { --e-pose: cubic-bezier(0.16, 1, 0.3, 1); /* arrivees : freine longtemps */ --e-doux: cubic-bezier(0.32, 0.72, 0, 1); /* deplacements */ --e-sec: cubic-bezier(0.4, 0, 0.2, 1); /* traces, remplissages */ } /* voir notes/refonte.notes.md §3 */ .v3d { perspective: 1400px; perspective-origin: 50% 18%; } .v3d-in { transform-style: preserve-3d; } @media (prefers-reduced-motion: reduce) { .v3d { perspective: none; } .v3d-in, .v3d-in * { transform: none !important; animation: none !important; } } /* 4. AVANT / APRES, le trait qui barrait jusqu'au bord de la carte : voir notes/refonte.notes.md §4 */ .vs-col.is-before li::after { display: none !important; } /* l'ancien trait */ .vs-col.is-before li .vs-t { text-decoration-line: line-through; text-decoration-thickness: 1.5px; text-decoration-color: transparent; transition: text-decoration-color .34s var(--e-sec); } .is-live .vs-col.is-before li .vs-t { text-decoration-color: color-mix(in srgb, #e05252 62%, transparent); } .is-live .vs-col.is-before li:nth-child(1) .vs-t { transition-delay: .10s; } .is-live .vs-col.is-before li:nth-child(2) .vs-t { transition-delay: .20s; } .is-live .vs-col.is-before li:nth-child(3) .vs-t { transition-delay: .30s; } .is-live .vs-col.is-before li:nth-child(4) .vs-t { transition-delay: .40s; } /* voir notes/refonte.notes.md §5 */ .vs { align-items: stretch; } .vs-col ul { gap: 14px; } .vs-col li { min-height: 44px; align-items: center; } /* 6. LE COMPARATIF, trop haut, et les signes flottaient : voir notes/refonte.notes.md §6 */ .compar { font-size: 14px; } .compar th, .compar td { padding: 11px 16px; vertical-align: middle; } .compar tbody th { width: 268px; line-height: 1.35; } .compar thead th { padding-block: 13px; } .compar tbody td[data-v]:not(.is-us)::before { width: 17px; height: 17px; margin-right: 8px; vertical-align: middle; position: relative; top: -1px; } /* voir notes/refonte.notes.md §7 */ .compar td.is-us { background: color-mix(in srgb, var(--accent) 7%, transparent); } .compar tbody tr:nth-child(odd) td:not(.is-us) { background: color-mix(in srgb, var(--brand-ink) 2.5%, transparent); } @media (prefers-color-scheme: dark) { .compar tbody tr:nth-child(odd) td:not(.is-us) { background: rgba(255, 255, 255, .022); } } /* 8. LA DEMO, la section de conversion : voir notes/refonte.notes.md §8 */ .final { border-top: 0 !important; text-align: left; perspective: 1500px; perspective-origin: 50% 0%; } .final h2 { max-width: 18ch; margin-inline: 0; } .final .lead { margin-inline: 0; margin-bottom: 34px; } .final-args { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; } .final-args li { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 15px; row-gap: 3px; align-items: start; } .final-args b { grid-column: 2; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; } .final-args > li > span:last-child { grid-column: 2; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .fa-ico { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); } .fa-ico svg { width: 19px; height: 19px; } /* voir notes/refonte.notes.md §9 */ .fa-ico svg path, .fa-ico svg circle { stroke-dasharray: 64; stroke-dashoffset: 64; } /* voir notes/refonte.notes.md §10 */ .is-live .fa-ico svg path, .is-live .fa-ico svg circle, .final.is-live .fa-ico svg path, .final.is-live .fa-ico svg circle { animation: rfTrace .7s var(--e-sec) forwards; } .is-live .final-args li:nth-child(2) .fa-ico svg *, .final.is-live .final-args li:nth-child(2) .fa-ico svg * { animation-delay: .12s; } .is-live .final-args li:nth-child(3) .fa-ico svg *, .final.is-live .final-args li:nth-child(3) .fa-ico svg * { animation-delay: .24s; } @keyframes rfTrace { to { stroke-dashoffset: 0; } } /* voir notes/refonte.notes.md §11 */ .final .form-card { transform: perspective(1500px) rotateX(7deg) translateY(26px) scale(.985); opacity: 0; transition: transform 1s var(--e-pose), opacity .7s var(--e-pose), box-shadow .5s var(--e-doux); } .is-live .final .form-card, .final.is-live .form-card { transform: none; opacity: 1; } /* voir notes/refonte.notes.md §12 */ .no-js .final .form-card { transform: none; opacity: 1; transition: none; } /* voir notes/refonte.notes.md §13 */ .form-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 20px 22px 6px; } .form-dot { position: relative; height: auto; background: none !important; border-radius: 0; display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 9px; } .form-dot::before { content: attr(data-n); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--brand-ink) 7%, transparent); color: var(--faint); font-family: var(--font-data); font-size: 12.5px; font-weight: 600; transition: background-color .45s var(--e-doux), color .45s var(--e-doux), box-shadow .45s var(--e-doux); } .form-dot i { font-style: normal; font-size: 12px; letter-spacing: .04em; color: var(--faint); transition: color .45s var(--e-doux); } .form-dot.is-on::before { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); } .form-dot.is-on i { color: var(--text); } /* Le trait de liaison se remplit derriere les pastilles deja franchies. */ .form-dot:not(:last-child)::after { content: ''; position: absolute; left: 26px; right: -9px; top: 13px; height: 2px; background: color-mix(in srgb, var(--brand-ink) 8%, transparent); z-index: -1; } @media (prefers-color-scheme: dark) { .form-dot::before { background: rgba(255, 255, 255, .07); } .form-dot:not(:last-child)::after { background: rgba(255, 255, 255, .08); } } /* voir notes/refonte.notes.md §14 */ .step.is-on { animation: rfEtape .5s var(--e-pose) both; } @keyframes rfEtape { from { opacity: 0; transform: translate3d(22px, 0, -30px); } } /* voir notes/refonte.notes.md §15 */ .opts { gap: 12px; } .opt { border: 0 !important; border-radius: 14px !important; padding: 15px 16px !important; background: color-mix(in srgb, var(--brand-ink) 3.5%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent); font-size: 15px; font-weight: 500; transition: transform .4s var(--e-doux), box-shadow .4s var(--e-doux), background-color .3s var(--e-doux); } .opt:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 26px -14px rgba(5, 30, 72, .3); } .opt.is-on { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; color: var(--accent-strong); box-shadow: 0 0 0 1.5px var(--accent), 0 12px 26px -14px color-mix(in srgb, var(--accent) 55%, transparent); } .step.is-on .opt { animation: rfOpt .45s var(--e-pose) both; } .step.is-on .opt:nth-child(2) { animation-delay: .05s; } .step.is-on .opt:nth-child(3) { animation-delay: .10s; } .step.is-on .opt:nth-child(4) { animation-delay: .15s; } .step.is-on .opt:nth-child(5) { animation-delay: .20s; } @keyframes rfOpt { from { opacity: 0; transform: translateY(10px); } } @media (prefers-color-scheme: dark) { .opt { background: rgba(255, 255, 255, .04) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } } .field input { border: 0 !important; border-radius: 12px !important; height: 48px; background: color-mix(in srgb, var(--brand-ink) 3.5%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent); transition: box-shadow .3s var(--e-doux); } .field input:focus { outline: 0 !important; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); } @media (prefers-color-scheme: dark) { .field input { background: rgba(255, 255, 255, .04) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); } } /* voir notes/refonte.notes.md §16 */ .done .tick { width: 62px; height: 62px; border-radius: 50%; position: relative; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-strong); } .done .tick::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); animation: rfOnde 1.6s var(--e-sec) .25s 2; } @keyframes rfOnde { to { box-shadow: 0 0 0 22px transparent; } } .done .tick svg { width: 28px; height: 28px; } .done .tick svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: rfTrace .55s var(--e-sec) .2s forwards; } .done h3 { font-size: 22px; } @media (max-width: 1000px) { .final h2, .final .lead { max-width: none; } } /* voir notes/refonte.notes.md §17 */ .btn[hidden] { display: none !important; } /* 18. LE PIED DE PAGE : voir notes/refonte.notes.md §18 */ .foot-brand { gap: 10px; } .foot-brand .brand-word { color: var(--text); font-size: 14px; } .foot-brand .brand-word b { color: var(--accent); } .foot-col h3 { font-family: var(--font-ui) !important; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); } footer { border-top: 0; box-shadow: 0 -1px 0 0 var(--line); } /* 19. LE TELEPHONE QUI SONNE (section « Le vrai problème ») : voir notes/refonte.notes.md §19 */ .split-tel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; } .beats { margin-top: 30px; } .beats li { padding: 14px 0 14px 30px; } .beats li::before { top: 22px; } .tel-scene { display: grid; justify-items: center; gap: 26px; } .tel-stage { position: relative; display: grid; place-items: center; padding: 26px 0; } /* voir notes/refonte.notes.md §20 */ .tel-scene .tel { position: relative; width: 232px; height: 452px; border-radius: 38px; padding: 11px; background: linear-gradient(148deg, #2b3446 0%, #131a26 42%, #0a0f18 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 1px rgba(255, 255, 255, .22), 28px 34px 70px -30px rgba(3, 8, 20, .85), 0 60px 90px -50px rgba(3, 8, 20, .9); transform: rotateY(-17deg) rotateX(7deg) rotateZ(-1.5deg); transform-style: preserve-3d; } /* La tranche : un plan decale en profondeur, donc une VRAIE face laterale. */ .tel-screen { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #16233d 0%, #070b12 60%, #05080e 100%); display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 20px 16px 22px; color: #fff; text-align: center; } .tel-heure { font-family: var(--font-data); font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .5); } .tel-av { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; margin-top: 34px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .tel-av svg { width: 34px; height: 34px; } .tel-qui { display: block; margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .tel-num { display: block; margin-top: 5px; font-family: var(--font-data); font-size: 12.5px; color: rgba(255, 255, 255, .55); } .tel-etat { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; background: rgba(30, 116, 254, .18); color: #7fabff; box-shadow: 0 0 0 1px rgba(30, 116, 254, .3); } .tel-etat.est-manque { background: rgba(224, 82, 82, .16); color: #ff9a9a; box-shadow: 0 0 0 1px rgba(224, 82, 82, .32); } /* voir notes/refonte.notes.md §21 */ .tel-btns { display: flex; gap: 44px; align-self: end; } .tel-btns i { display: block; width: 44px; height: 44px; border-radius: 50%; } .tel-no { background: #3a2226; box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .3); } .tel-yes { background: #123c22; box-shadow: inset 0 0 0 1px rgba(80, 220, 130, .35); } /* voir notes/refonte.notes.md §22 */ .tel-onde { position: absolute; width: 232px; height: 452px; border-radius: 38px; box-shadow: 0 0 0 1.5px rgba(30, 116, 254, .5); opacity: 0; transform: rotateY(-17deg) rotateX(7deg) scale(1); } /* voir notes/refonte.notes.md §23 */ [data-scene].is-live .tel-scene .tel { animation: telSonne 1.15s var(--e-sec) 2 both; } @keyframes telSonne { 0%, 100% { transform: rotateY(-17deg) rotateX(7deg) rotateZ(-1.5deg) translate3d(0, 0, 0); } 8% { transform: rotateY(-17deg) rotateX(7deg) rotateZ(-2.6deg) translate3d(-3px, 1px, 0); } 16% { transform: rotateY(-17deg) rotateX(7deg) rotateZ(-0.4deg) translate3d(3px, -1px, 0); } 24% { transform: rotateY(-17deg) rotateX(7deg) rotateZ(-2.6deg) translate3d(-2px, 1px, 0); } 32% { transform: rotateY(-17deg) rotateX(7deg) rotateZ(-1.5deg) translate3d(0, 0, 0); } } [data-scene].is-live .tel-onde { animation: telOnde 1.9s var(--e-sec) 2 both; } [data-scene].is-live .tel-onde-2 { animation-delay: .55s; } @keyframes telOnde { 0% { opacity: .55; transform: rotateY(-17deg) rotateX(7deg) scale(1); } 100% { opacity: 0; transform: rotateY(-17deg) rotateX(7deg) scale(1.28); } } /* voir notes/refonte.notes.md §24 */ [data-scene].is-live.tel-manque .tel-screen { filter: brightness(.62) saturate(.7); transition: filter .6s var(--e-doux); } [data-scene].is-live.tel-manque .tel-yes { background: #1a1f28; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .tel-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; max-width: 340px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .tel-note b { font-family: var(--font-data); font-size: 40px; font-weight: 650; line-height: 1; color: #e05252; font-variant-numeric: tabular-nums; transition: transform .45s var(--e-pose); } .tel-note b.est-ok { transform: scale(1.14); } @media (max-width: 1000px) { .split-tel { grid-template-columns: 1fr; gap: 44px; } .tel-scene .tel { transform: rotateY(-11deg) rotateX(5deg); } .tel-onde { transform: rotateY(-11deg) rotateX(5deg) scale(1); } } /* 25. LA MAQUETTE EN VOLUME (section « Comment ça marche ») : voir notes/refonte.notes.md §25 */ .iso { margin: 4px 0 46px; } .iso-in { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: center; min-height: 236px; padding: 14px 0; } .iso-plan { position: relative; padding: 13px 14px 15px; border-radius: 18px; background: var(--surface); box-shadow: var(--hair), 0 26px 50px -30px rgba(5, 30, 72, .5); opacity: 0; } /* voir notes/refonte.notes.md §26 */ .iso-1 { transform: rotateY(15deg) rotateX(8deg) translateZ(-34px); } .iso-2 { transform: rotateY(0deg) rotateX(8deg) translateZ(6px) translateY(-10px); } .iso-3 { transform: rotateY(-15deg) rotateX(8deg) translateZ(-34px); } .iso-plan.is-in { animation: isoPose .85s var(--e-pose) both; } @keyframes isoPose { from { opacity: 0; transform: rotateY(var(--ry, 0deg)) rotateX(20deg) translateZ(-120px) translateY(34px); } } .iso-1.is-in { --ry: 15deg; animation-name: isoPose1; } .iso-2.is-in { --ry: 0deg; animation-name: isoPose2; } .iso-3.is-in { --ry: -15deg; animation-name: isoPose3; } @keyframes isoPose1 { from { opacity: 0; transform: rotateY(15deg) rotateX(22deg) translateZ(-140px) translateY(40px); } to { opacity: 1; transform: rotateY(15deg) rotateX(8deg) translateZ(-34px); } } @keyframes isoPose2 { from { opacity: 0; transform: rotateY(0deg) rotateX(22deg) translateZ(-140px) translateY(40px); } to { opacity: 1; transform: rotateY(0deg) rotateX(8deg) translateZ(6px) translateY(-10px); } } @keyframes isoPose3 { from { opacity: 0; transform: rotateY(-15deg) rotateX(22deg) translateZ(-140px) translateY(40px); } to { opacity: 1; transform: rotateY(-15deg) rotateX(8deg) translateZ(-34px); } } /* Sans JavaScript les trois plans doivent etre en place, pas empiles au fond. */ .no-js .iso-plan { opacity: 1; } .iso-tag { display: block; font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; } /* Plan 1 : le site du client, avec le module colle dessus. */ .iso-site { display: grid; gap: 9px; } .iso-url { padding: 6px 10px; border-radius: 7px; font-family: var(--font-data); font-size: 10.5px; color: var(--muted); background: color-mix(in srgb, var(--brand-ink) 6%, transparent); } .iso-btn { display: grid; place-items: center; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; } .is-in .iso-btn { animation: isoPulse 2.6s var(--e-sec) .7s 2; } @keyframes isoPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 40% { box-shadow: 0 0 0 12px transparent; } } /* Plan 2 : le planning. Le creneau « neuf » est celui qui vient d'arriver. */ .iso-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .iso-grid i { position: relative; height: 30px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-ink) 6%, transparent); font-style: normal; } .iso-grid i em { font-family: var(--font-data); font-size: 9.5px; font-style: normal; color: var(--faint); } .iso-grid i.est-pris { background: color-mix(in srgb, var(--accent) 18%, transparent); } .iso-grid i.est-pris em { color: var(--accent-strong); } .iso-grid i.est-neuf { background: var(--accent); } .iso-grid i.est-neuf em { color: #fff; } .is-in .iso-grid i.est-neuf { animation: isoNeuf .6s var(--e-pose) .55s both; } @keyframes isoNeuf { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Plan 3 : l'agent a prepare, c'est vous qui publiez. */ .iso-post { display: grid; gap: 9px; } .iso-post-t { padding: 9px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.4; background: color-mix(in srgb, var(--brand-ink) 6%, transparent); color: var(--text); } .iso-post-b { display: grid; place-items: center; height: 32px; border-radius: 9px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong); } @media (prefers-color-scheme: dark) { .iso-url, .iso-grid i, .iso-post-t { background: rgba(255, 255, 255, .06); } } @media (max-width: 900px) { .iso-in { grid-template-columns: 1fr; gap: 16px; min-height: 0; } .iso-plan { transform: none !important; } } /* 27. LE PRIX, ancrer avant d'annoncer : voir notes/refonte.notes.md §27 */ .prix-bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 26px; margin: 0 0 18px; } .prix-bench > div { border: 0 !important; border-radius: var(--radius-lg); padding: 24px 22px; background: var(--surface); box-shadow: var(--hair), 0 0 0 6px rgba(5, 30, 72, .022), 0 0 0 7px rgba(5, 30, 72, .05), var(--sh-1); } @media (prefers-color-scheme: dark) { .prix-bench > div { box-shadow: var(--hair), 0 0 0 6px rgba(255, 255, 255, .018), 0 0 0 7px rgba(255, 255, 255, .05), var(--sh-1); } } .prix-bench b { display: block; font-family: var(--font-ui) !important; font-size: clamp(26px, 2.6vw, 34px); font-weight: 660; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--text); margin-bottom: 9px; } .prix-bench span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); } /* voir notes/refonte.notes.md §28 */ .prix-bench > div { opacity: 0; transform: translateY(16px); } [data-scene].is-live.prix-bench > div, .is-live .prix-bench > div { animation: rfMonte .7s var(--e-pose) both; } [data-scene].is-live.prix-bench > div:nth-child(2) { animation-delay: .12s; } [data-scene].is-live.prix-bench > div:nth-child(3) { animation-delay: .24s; } @keyframes rfMonte { to { opacity: 1; transform: none; } } .no-js .prix-bench > div { opacity: 1; transform: none; } /* voir notes/refonte.notes.md §29 */ .prix-card.is-main { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent), 0 30px 60px -34px color-mix(in srgb, var(--accent) 60%, transparent) !important; } .prix-tag { font-family: var(--font-ui) !important; font-size: 13px !important; font-weight: 600; letter-spacing: -.01em; padding: 5px 12px !important; } /* 30. LA MISE EN ROUTE, la frise passe a l'horizontale : voir notes/refonte.notes.md §30 */ @media (min-width: 900px) { .chrono { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-top: 38px; } /* La voie : un trait continu derriere les quatre pastilles, qui se remplit. */ .chrono::before { content: ''; position: absolute; left: 6%; right: 6%; top: 9px; height: 2px; background: color-mix(in srgb, var(--brand-ink) 9%, transparent); } /* La voie se remplit en scaleX et non en width : un degrade defini sur la boite se comprime avec elle, donc les deux rendus sont identiques, mais `width` redemandait une mise en page a chaque image. */ .chrono::after { content: ''; position: absolute; left: 6%; top: 9px; height: 2px; width: 88%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); } .chrono.is-live::after { animation: rfVoie 2.6s var(--e-sec) .2s forwards; } @keyframes rfVoie { to { transform: scaleX(1); } } .chrono-row { display: block !important; padding: 0 !important; border: 0 !important; } /* La pastille de l'etape, posee SUR la voie. */ .chrono-row::before { content: ''; position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--page); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-ink) 12%, transparent); transition: box-shadow .5s var(--e-doux), background-color .5s var(--e-doux); } .chrono-row.is-step::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent); } .chrono-row { position: relative; padding-top: 34px !important; } .chrono-when { margin-bottom: 8px; font-family: var(--font-data); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .chrono-row.is-step .chrono-when { color: var(--accent-strong); } .chrono-what h3 { font-size: 16.5px; margin-bottom: 7px; } .chrono-what p { font-size: 14px; line-height: 1.55; } /* voir notes/refonte.notes.md §31 */ .chrono-code { position: absolute; left: 0; right: 0; top: 100%; margin-top: 22px; white-space: nowrap; overflow-x: auto; } .chrono { margin-bottom: 92px; } /* Chaque colonne monte a son tour, dans le sens de lecture de la voie. */ .chrono-row { opacity: 0; transform: translateY(14px); } .chrono.is-live .chrono-row { animation: rfMonte .6s var(--e-pose) both; } .chrono.is-live .chrono-row:nth-child(2) { animation-delay: .14s; } .chrono.is-live .chrono-row:nth-child(3) { animation-delay: .28s; } .chrono.is-live .chrono-row:nth-child(4) { animation-delay: .42s; } .no-js .chrono-row { opacity: 1; transform: none; } } /* 32. POUR QUI, le commutateur de metier : voir notes/refonte.notes.md §32 */ .mtx { border: 0 !important; border-radius: var(--radius-xl) !important; box-shadow: var(--hair), 0 0 0 6px rgba(5, 30, 72, .022), 0 0 0 7px rgba(5, 30, 72, .05), var(--sh-2) !important; } @media (prefers-color-scheme: dark) { .mtx { box-shadow: var(--hair), 0 0 0 6px rgba(255, 255, 255, .018), 0 0 0 7px rgba(255, 255, 255, .05), var(--sh-2) !important; } } .mtx-tab { border: 0 !important; border-radius: 999px !important; padding: 9px 17px !important; font-size: 13.5px; font-weight: 550; color: var(--muted); background: transparent !important; transition: color .3s var(--e-doux), background-color .3s var(--e-doux), box-shadow .3s var(--e-doux); } .mtx-tab[aria-selected="true"] { color: #fff !important; background: var(--accent) !important; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent); } .mtx-quoi { font-size: 15px; color: var(--muted); } .mtx-quoi b { color: var(--text); font-weight: 600; } .mtx-res { border: 0 !important; border-radius: 12px !important; padding: 13px 12px !important; background: color-mix(in srgb, var(--brand-ink) 4%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 7%, transparent); animation: rfPoseRes .5s var(--e-pose) both; } .mtx-res.est-pris { background: color-mix(in srgb, var(--accent) 11%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); } .mtx-res b { font-size: 13.5px; font-weight: 600; } .mtx-res.est-pris b { color: var(--accent-strong); } .mtx-res span { font-family: var(--font-data); font-size: 11.5px; color: var(--faint); } @keyframes rfPoseRes { from { opacity: 0; transform: translateY(10px) scale(.97); } } @media (prefers-color-scheme: dark) { .mtx-res { background: rgba(255, 255, 255, .05) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } } /* voir notes/refonte.notes.md §33 */ @media (min-width: 900px) { .chrono { grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 28px; } .chrono-what h3 { font-size: 15.5px; } .chrono-what p { font-size: 13.5px; } .chrono.is-live .chrono-row:nth-child(5) { animation-delay: .56s; } } /* voir notes/refonte.notes.md §34 */ .chrono-embed { display: grid; gap: 10px; margin: 0 0 8px; } .chrono-embed > span { font-size: 13.5px; color: var(--muted); } .chrono-embed .chrono-code { position: static; display: block; overflow-x: auto; padding: 13px 15px; border-radius: 12px; font-size: 12.5px; white-space: nowrap; background: color-mix(in srgb, var(--brand-ink) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent); } @media (prefers-color-scheme: dark) { .chrono-embed .chrono-code { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } } /* 35. RYTHME, resserrer les intervalles : voir notes/refonte.notes.md §35 */ section { padding: 58px 0; } section:where(.noir, .final), .accuse { padding: 88px 0 !important; } .promesse { padding: 84px 0; } /* 36. LE SYSTEME SIGNATURE (passe « niveau reference », 2026-07-30) : voir notes/refonte.notes.md §36 */ :root { --pop: 0 4px 0 0 #d7e2f8; /* l'ombre signature : dure, zero flou */ --pop-h: 0 8px 0 0 #cddaf6; /* survol : l'objet se souleve */ --pop-s: 0 2px 0 0 #d7e2f8; /* enfonce */ } @media (prefers-color-scheme: dark) { :root { --pop: 0 4px 0 0 rgba(0, 0, 0, .58); --pop-h: 0 8px 0 0 rgba(0, 0, 0, .62); --pop-s: 0 2px 0 0 rgba(0, 0, 0, .58); } } /* voir notes/refonte.notes.md §37 */ .card, .step-card, .vs-col, .feat, .prix-bench > div, .qa, .compar-wrap { border: 0; border-radius: var(--radius-lg); box-shadow: var(--hair), var(--pop); transition: transform .45s var(--e-doux), box-shadow .45s var(--e-doux); } @media (hover: hover) { .card:hover, .step-card:hover, .vs-col:hover, .feat:hover, .prix-bench > div:hover { transform: translateY(-4px); box-shadow: var(--hair), var(--pop-h); border-color: transparent; } } /* La question ouverte se signale par son rail, pas par une couleur de fond. */ .qa { border-radius: var(--radius-md); } .qa[open] { box-shadow: inset 3px 0 0 0 var(--accent), var(--hair), var(--pop); } /* Les boutons secondaires deviennent physiques : poses, souleves, enfonces. */ .btn:not(.primary) { box-shadow: var(--hair), var(--pop); } .btn:not(.primary):hover { transform: translateY(-2px); box-shadow: var(--hair), var(--pop-h); } .btn:not(.primary):active { transform: translateY(1px); box-shadow: var(--hair), var(--pop-s); } /* voir notes/refonte.notes.md §38 */ h2 { background: linear-gradient(104deg, var(--text) 0%, var(--text) 55%, #55688a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .noir h2 { background: linear-gradient(104deg, #fff 0%, #fff 52%, #9b9b9b 100%); -webkit-background-clip: text; background-clip: text; } @media (prefers-color-scheme: dark) { h2 { background: linear-gradient(104deg, #eef2f8 0%, #eef2f8 52%, #8b9cba 100%); -webkit-background-clip: text; background-clip: text; } } /* voir notes/refonte.notes.md §39 */ @media (min-width: 900px) { section { padding: 88px 0; } section:where(.noir, .final), .accuse { padding: 108px 0 !important; } .promesse { padding: 122px 0; } } /* --- Micro-signatures descendues au niveau du navigateur ------------------ */ ::selection { background: var(--brand); color: #fff; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-ink) 26%, transparent); border-radius: 8px; border: 3px solid var(--page); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand-ink) 42%, transparent); } /* 40. LE FIL D'ACTIVITE (sous la demonstration du hero) : voir notes/refonte.notes.md §40 */ .ticker { position: relative; overflow: hidden; padding: 26px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); } /* voir notes/refonte.notes.md §41 */ .ticker-in { display: flex; gap: 12px; width: max-content; animation: tkDefile 38s linear infinite; } @keyframes tkDefile { to { transform: translateX(-50%); } } .tk { flex: none; display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 16px; border-radius: var(--radius-full); font-size: 13px; color: var(--muted); background: var(--surface); box-shadow: var(--hair), var(--pop-s); white-space: nowrap; } .tk b { font-family: var(--font-data); font-size: 11.5px; font-weight: 600; color: var(--accent-strong); } .tk.est-agent b { color: #b45309; } @media (prefers-reduced-motion: reduce) { .ticker-in { animation: none; } } /* 42. LE WORDMARK GEANT (au-dessus du pied de page) : voir notes/refonte.notes.md §42 */ .mega { overflow: hidden; padding: 46px 0 0; text-align: center; user-select: none; } .mega-in { display: inline-block; font-weight: 680; letter-spacing: .1em; font-size: clamp(74px, 15vw, 208px); line-height: .92; color: var(--brand-ink); -webkit-mask-image: linear-gradient(to bottom, #000 26%, transparent 90%); mask-image: linear-gradient(to bottom, #000 26%, transparent 90%); } .mega-in b { color: var(--brand); font-weight: 680; } @media (prefers-color-scheme: dark) { .mega-in { color: #dfe7f4; } } /* 43. LE NIVEAU DE CHOREGRAPHIE (reponse au « bricole a la va-vite... : voir notes/refonte.notes.md §43 */ /* voir notes/refonte.notes.md §44 */ /* voir notes/refonte.notes.md §45 */ .reveal { transform: translateY(26px); transition: opacity .85s var(--e-pose), transform .85s var(--e-pose); } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; } } /* voir notes/refonte.notes.md §46 */ body { counter-reset: chap; } .eyebrow { counter-increment: chap; } .eyebrow::before { content: counter(chap, decimal-leading-zero); margin-right: 9px; font-family: var(--font-data); font-weight: 600; font-size: 11px; letter-spacing: .05em; color: color-mix(in srgb, var(--accent-strong) 62%, transparent); } /* c. La barre sait ou on est : le lien de la section lue porte sa pilule. */ .nav-links a { padding: 7px 12px; border-radius: var(--radius-full); transition: color .3s var(--e-doux), background-color .3s var(--e-doux); } .nav-links a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, .12); } /* Le verdict de l'agent porte un curseur pendant sa frappe. */ .casc-verdict.is-in::after { content: '▍'; margin-left: 1px; color: var(--accent-strong); animation: cascCaret .9s steps(1) infinite; } @keyframes cascCaret { 50% { opacity: 0; } } /* Le caret disparait une fois le verdict rendu. */ .casc-verdict.est-fini::after { display: none; } /* 47. ART DIRECTION PAR SECTION (vague 4, 2026-07-30) : voir notes/refonte.notes.md §47 */ /* voir notes/refonte.notes.md §48 */ h2 { font-size: clamp(32px, 4.7vw, 56px); font-weight: 680; letter-spacing: -0.045em; line-height: 1.04; } .lead { font-size: 18px; } /* voir notes/refonte.notes.md §49 */ .souligne { position: relative; white-space: nowrap; } .souligne svg { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: .22em; overflow: visible; } .souligne path { fill: none; stroke: #1e74fe; stroke-width: 7; stroke-linecap: round; opacity: .92; stroke-dasharray: 132; stroke-dashoffset: 132; animation: rfSouligne .8s var(--e-sec) .42s forwards; } @keyframes rfSouligne { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .souligne path { stroke-dashoffset: 0; animation: none; } } /* voir notes/refonte.notes.md §50 */ #produit { position: relative; } .props { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: none; } @media (min-width: 1180px) { .props { display: block; } } .prop { position: absolute; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--hair), var(--pop); animation: propFlotte 7s ease-in-out infinite alternate; } .prop-tx { display: grid; line-height: 1.3; } .prop-tx b { font-size: 12px; font-weight: 650; letter-spacing: -.01em; } .prop-tx em { font-style: normal; font-size: 11px; color: var(--muted); } .prop-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); } .prop-1 { left: -34px; top: 24%; transform: rotate(-5deg); } .prop-2 { right: -30px; top: 12%; transform: rotate(3.5deg); animation-delay: 1.1s; } .prop-3 { right: -14px; bottom: -18px; transform: rotate(-2.5deg); animation-delay: 2.2s; display: grid; justify-items: start; gap: 1px; padding: 13px 17px; } .prop-big { font-family: var(--font-data); font-size: 25px; font-weight: 650; letter-spacing: -.03em; color: var(--accent-strong); line-height: 1; } .prop-3 em { font-style: normal; font-size: 11px; color: var(--muted); } @keyframes propFlotte { from { translate: 0 -7px; } to { translate: 0 7px; } } @media (prefers-reduced-motion: reduce) { .prop { animation: none; } } /* voir notes/refonte.notes.md §51 */ .tel-scene { position: relative; } .tel-scene::before { content: ''; position: absolute; inset: -8% -12%; z-index: -1; border-radius: 40px; background: radial-gradient(58% 52% at 50% 42%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 74%); } .iso { padding: 36px 28px 30px; border-radius: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--page)) 0%, var(--page) 88%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 6%, transparent); } @media (prefers-color-scheme: dark) { .iso { background: linear-gradient(180deg, rgba(77, 141, 255, .07) 0%, transparent 88%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } } /* voir notes/refonte.notes.md §52 */ @media (max-width: 900px) { .tel-scene::before { inset: -6% 0; } } /* 53. VAGUE 5, le champ signature en fond, et la passe masterclass : voir notes/refonte.notes.md §53 */ /* voir notes/refonte.notes.md §54 */ #fx-wrap { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 46%, transparent 30%, #000 82%); mask-image: radial-gradient(ellipse 74% 62% at 50% 46%, transparent 30%, #000 82%); } #fx-page { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brand); } @media (prefers-color-scheme: dark) { #fx-wrap { opacity: .34; } #fx-page { color: #4d8dff; } } /* Sur telephone : un canvas WebGL permanent pour une texture de marge ne vaut pas sa batterie. */ @media (max-width: 860px) { #fx-wrap { display: none; } } /* voir notes/refonte.notes.md §55 */ #produit .demo { animation: demoLand 1.15s var(--e-pose) .35s both; } @keyframes demoLand { from { opacity: 0; transform: perspective(1300px) rotateX(11deg) translateY(52px) scale(.975); } to { opacity: 1; transform: perspective(1300px) rotateX(0deg) translateY(0) scale(1); } } /* voir notes/refonte.notes.md §56 */ .prop { opacity: 0; } .prop-1 { animation: propIn .6s var(--e-pose) 1.25s both, propFlotte 7s ease-in-out 1.9s infinite alternate; } .prop-2 { animation: propIn .6s var(--e-pose) 1.45s both, propFlotte 7s ease-in-out 2.6s infinite alternate; } .prop-3 { animation: propIn .6s var(--e-pose) 1.65s both, propFlotte 7s ease-in-out 3.1s infinite alternate; } @keyframes propIn { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: reduce) { #produit .demo { animation: none; } .prop { opacity: 1; animation: none; } } /* voir notes/refonte.notes.md §57 */ .js .promesse .w { display: inline-block; transform: translateY(14px); filter: blur(5px); transition: color .7s var(--e-doux), transform .7s var(--e-pose), filter .7s var(--e-pose); } .js .promesse .w.is-on { transform: none; filter: blur(0); } @media (prefers-reduced-motion: reduce) { .js .promesse .w { transform: none; filter: none; } } /* voir notes/refonte.notes.md §58 */ html { interpolate-size: allow-keywords; } .qa::details-content { height: 0; overflow: clip; transition: height .45s var(--e-doux), content-visibility .45s allow-discrete; } .qa[open]::details-content { height: auto; } /* voir notes/refonte.notes.md §59 */ .btn.primary { overflow: hidden; } .btn.primary::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 42%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); pointer-events: none; } .btn.primary:hover::after { animation: rfSheen .8s var(--e-sec); } /* voir notes/refonte.notes.md §60 */ @keyframes rfSheen { to { transform: skewX(-18deg) translateX(488.10%); } } @media (prefers-reduced-motion: reduce) { .btn.primary:hover::after { animation: none; } } /* voir notes/refonte.notes.md §61 */ html { background: var(--page); } body { background: transparent; } /* voir notes/refonte.notes.md §62 */ #fx-wrap { opacity: .82; } @media (prefers-color-scheme: dark) { #fx-wrap { opacity: .5; } } /* 63. LA DEMO RESSEMBLE AU VRAI PRODUIT (vague 6, 2026-07-30) : voir notes/refonte.notes.md §63 */ .demo-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; } .demo-main { min-width: 0; display: flex; flex-direction: column; background: var(--surface); } /* --- La sidebar, recette exacte de la console ----------------------------- */ .sb { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; background: var(--surface); border-right: 1px solid var(--line); font-size: 13px; } .sb-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; } .sb-brand b { font-size: 13px; font-weight: 620; letter-spacing: -.01em; } .sb-item { position: relative; display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px; color: var(--muted); font-weight: 500; transition: background-color .25s var(--e-doux), color .25s var(--e-doux); } /* L'item actif : fond subtil + barre accent 2 px a gauche, comme .nav-item. */ [data-ecran="planning"] .sb-item[data-s="planning"], [data-ecran="reservations"] .sb-item[data-s="reservations"], [data-ecran="clients"] .sb-item[data-s="clients"], [data-ecran="emails"] .sb-item[data-s="emails"], [data-ecran="agent"] .sb-item[data-s="agent"], [data-ecran="chiffres"] .sb-item[data-s="chiffres"] { background: var(--subtle); color: var(--text); } .sb-item::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px; border-radius: 999px; background: transparent; transition: background-color .25s var(--e-doux); } [data-ecran="planning"] .sb-item[data-s="planning"]::before, [data-ecran="reservations"] .sb-item[data-s="reservations"]::before, [data-ecran="clients"] .sb-item[data-s="clients"]::before, [data-ecran="emails"] .sb-item[data-s="emails"]::before, [data-ecran="agent"] .sb-item[data-s="agent"]::before, [data-ecran="chiffres"] .sb-item[data-s="chiffres"]::before { background: var(--accent); } /* Les TITRES DE SECTION du menu reel (Journee / Clients & marketing / Administration). Valeurs relevees sur la console servie : 11 px, poids 500, pas de capitales forcees, retrait horizontal identique aux entrees pour que les textes s'alignent sur la meme verticale. Le premier ne prend pas de marge haute : la marque au-dessus porte deja son espace. */ .sb-sect { padding: 2px 10px 4px; margin-top: 9px; font-size: 11px; font-weight: 500; color: var(--faint); } .sb-brand + .sb-sect { margin-top: 0; } /* Les trois entrees qui se DEPLIENT dans la vraie console portent un chevron. Sans lui, la maquette laisse croire a onze pages a plat alors que trois en contiennent d'autres (Planning : Bowling, Laser Game, Toutes ; Terrain : Arrivees, En cours, Evenements ; Activites & tarifs : Tarifs & formules, Pistes bowling, Laser Game). Dessine en CSS, aucun SVG de plus a servir. */ .sb-depli { padding-right: 22px; } .sb-depli::after { content: ''; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .55; } .sb-libre { margin-top: auto; padding: 8px 10px 10px; font-family: var(--font-data); font-size: 10.5px; color: var(--faint); } .sb-foot { display: flex; align-items: center; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--line); } .sb-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--font-data); font-size: 9.5px; font-weight: 600; } .sb-qui { display: grid; line-height: 1.25; } .sb-qui b { font-size: 11.5px; font-weight: 600; } .sb-qui i { font-style: normal; font-size: 10.5px; color: var(--faint); } /* --- Le bandeau du haut : un vrai bandeau d'application ------------------- */ .demo .demo-chrome { border-radius: 0; padding: 11px 16px; background: var(--surface); } .demo > .demo-shell .demo-chrome { border-bottom: 1px solid var(--line); } /* --- Les KPI : la recette exacte (.kpi de pinlane-staff.css) -------------- */ .demo .kpi { border: 1px solid var(--line) !important; border-radius: 12px; padding: 13px 14px; background: var(--surface); box-shadow: none; } .demo .kpi span { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .demo .kpi b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .demo .kpi.is-accent b { color: var(--accent); } /* --- Les tableaux : 13 px, survol subtil, chiffres a droite en mono ------- */ .demo .cl-row, .demo .cl-head { font-size: 13px; } .demo .cl-row { transition: background-color .2s var(--e-doux); } .demo .cl-row:hover { background: var(--subtle); } .demo .cl-n, .demo .cl-e { font-family: var(--font-data); font-variant-numeric: tabular-nums; } /* --- Les badges : pill + point de 6 px en currentColor -------------------- */ .demo .cl-chip, .demo .cl-b { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; } .demo .cl-chip::before, .demo .cl-b::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; } /* voir notes/refonte.notes.md §64 */ @media (max-width: 760px) { .demo-shell { grid-template-columns: 1fr; } .sb { display: none; } } /* voir notes/refonte.notes.md §65 */ .prop-1 { left: -18px; top: auto; bottom: -26px; transform: rotate(-4deg); } .prop-2 { right: -30px; top: 9%; } /* 66. LE MODE SOMBRE AU NIVEAU (vague 7, 2026-07-30) : voir notes/refonte.notes.md §66 */ @keyframes rfPoseRes { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } /* La maquette isometrique respirait trop : bande vide au-dessus des plans. */ .iso { padding: 26px 24px 24px; } .iso-in { min-height: 0; } /* voir notes/refonte.notes.md §67 */ @media (prefers-color-scheme: dark) { /* voir notes/refonte.notes.md §68 */ .tel-scene .tel { box-shadow: 0 0 0 1px rgba(255, 255, 255, .17), inset 0 1px 1px rgba(255, 255, 255, .26), 28px 34px 70px -30px rgba(0, 0, 0, .9), 0 60px 90px -50px rgba(0, 0, 0, .95); } .tel-screen { background: radial-gradient(120% 80% at 50% 0%, #1c2f52 0%, #0a1120 58%, #070c15 100%); } .tel-scene::before { background: radial-gradient(58% 52% at 50% 42%, rgba(77, 141, 255, .20) 0%, transparent 74%); } /* La barre du creneau qui s'evapore : piste invisible sur noir. */ .sc-vide-piste { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .035); } /* La maquette isometrique : plans plus clairs que le fond, cellules lisibles. */ .iso { background: linear-gradient(180deg, rgba(77, 141, 255, .10) 0%, rgba(77, 141, 255, .02) 88%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); } .iso-plan { background: #131a26; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 26px 50px -30px rgba(0, 0, 0, .8); } .iso-url, .iso-post-t { background: rgba(255, 255, 255, .08); } .iso-grid i { background: rgba(255, 255, 255, .08); } .iso-grid i em { color: #b9c6dd; } .iso-grid i.est-pris { background: rgba(77, 141, 255, .26); } .iso-grid i.est-pris em { color: #cfe0ff; } .iso-post-b { background: rgba(77, 141, 255, .2); color: #9cc0ff; } /* Les six demonstrations : chaque interieur remonte d'un cran. */ .fd-c { background: rgba(255, 255, 255, .09); color: #93a0b8; } .fd-c.est-pris { background: rgba(77, 141, 255, .28); color: #a9c8ff; } .fd-bar { background: rgba(77, 141, 255, .30); } .fd-bar em { color: #cfe0ff; } .fd-trou { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .30); } .fd-q, .fd-sig i, .fd-piste, .fd-sites span { background: rgba(255, 255, 255, .09); } .fd-av { background: rgba(77, 141, 255, .28); color: #a9c8ff; } .fd-post { background: rgba(77, 141, 255, .18); } .fd-typ { color: #9cc0ff; } .fd-poignee { background: #dfe7f4; } .fd-rempli { background: #4d8dff; } /* Les etiquettes de carte redeviennent des pilules. */ .feat-chip { background: rgba(255, 255, 255, .07) !important; color: #b9c3d6; } .feat:hover .feat-chip { background: rgba(77, 141, 255, .18) !important; color: #a9c8ff; } /* Le commutateur de metier : cellules posees sur un voile, prises en bleu. */ .mtx-tabs { background: rgba(255, 255, 255, .03); } .mtx-res { background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); } .mtx-res.est-pris { background: rgba(77, 141, 255, .17) !important; box-shadow: inset 0 0 0 1px rgba(77, 141, 255, .38); } .mtx-res span { color: #93a0b8; } /* La frise de mise en route : voie et pastilles eclairees. */ .chrono::before { background: rgba(255, 255, 255, .11); } .chrono-row::before { background: var(--surface); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); } /* Le fil d'activite et les fragments : un lisere clair les detache du noir. */ .tk { background: #101622; box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), var(--pop-s); } .prop { box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), var(--pop); } /* Le formulaire : choix et champs sur voile plus franc. */ .opt { background: rgba(255, 255, 255, .06) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .10); } .field input { background: rgba(255, 255, 255, .06) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .11); } } /* 69. LE MECANISME (vague 8, 2026-07-30) : voir notes/refonte.notes.md §69 */ /* voir notes/refonte.notes.md §70 */ :root { --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 20.4%, 1.06 27.8%, 1.022 36.4%, 0.997 44.5%, 0.988 49.5%, 1.001 62.2%, 1); --spring-vif: linear(0, 0.013, 0.053 2.3%, 0.192 5%, 0.837 13.5%, 1.024 17.7%, 1.102 23.4%, 1.056 31.1%, 0.986 39.4%, 0.995 52.3%, 1.003 66.7%, 1); } @supports (animation-timing-function: linear(0, 1)) { .step.is-on { animation-timing-function: var(--spring); } .step.is-on .opt { animation-timing-function: var(--spring-vif); } .iso-plan.is-in { animation-timing-function: var(--spring); } .prop-1, .prop-2, .prop-3 { animation-timing-function: var(--spring), ease-in-out; } .is-live .feat .feat-chip { animation-timing-function: var(--spring-vif); } .mtx-res { animation-timing-function: var(--spring); } .reveal { transition-timing-function: var(--e-pose), var(--spring), var(--e-pose); } .done .tick svg path { animation-timing-function: var(--spring); } } /* voir notes/refonte.notes.md §71 */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; pointer-events: none; background: linear-gradient(90deg, var(--brand), #7fabff); transform-origin: 0 50%; transform: scaleX(0); } @supports (animation-timeline: scroll()) { body::before { animation: rfProgres linear both; animation-timeline: scroll(root); } } @keyframes rfProgres { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --- La couche de profondeur liee au defilement --------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* voir notes/refonte.notes.md §72 */ section h2 { animation: rfMonteDoc linear both; animation-timeline: view(); animation-range: entry 8% cover 32%; } /* voir notes/refonte.notes.md §73 */ .tel-scene { animation: rfPara linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .iso { animation: rfParaLeger linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .accuse .huge { animation: rfHugePara linear both; animation-timeline: view(); animation-range: cover 0% cover 90%; } .promesse p { animation: rfPara linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .props { animation: rfParaLeger linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .feat-demo { animation: rfParaMicro linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } /* Le wordmark geant se souleve du pied de page a l'approche. */ .mega-in { animation: rfMega linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; } } } @keyframes rfMonteDoc { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes rfPara { from { transform: translateY(34px); } to { transform: translateY(-34px); } } @keyframes rfParaLeger { from { transform: translateY(20px); } to { transform: translateY(-20px); } } @keyframes rfParaMicro { from { transform: translateY(7px); } to { transform: translateY(-7px); } } @keyframes rfHugePara { from { transform: translateY(26px) scale(.94); } to { transform: translateY(-14px) scale(1); } } @keyframes rfMega { from { transform: translateY(34%); opacity: .25; } to { transform: translateY(0); opacity: 1; } } /* voir notes/refonte.notes.md §74 */ .tel-stage { animation: telIdle 7s ease-in-out infinite alternate; } @keyframes telIdle { from { transform: translateY(4px) rotateY(-1.4deg); } to { transform: translateY(-7px) rotateY(1.8deg); } } @media (prefers-reduced-motion: reduce) { .tel-stage { animation: none; } } /* voir notes/refonte.notes.md §75 */ .iso-1.is-in { animation: isoPose1 .85s both, isoFlotte1 5.6s ease-in-out 1.2s infinite alternate; } .iso-2.is-in { animation: isoPose2 .85s both, isoFlotte2 6.4s ease-in-out 1.6s infinite alternate; } .iso-3.is-in { animation: isoPose3 .85s both, isoFlotte3 6s ease-in-out 2s infinite alternate; } @keyframes isoFlotte1 { from { opacity: 1; transform: rotateY(15deg) rotateX(8deg) translateZ(-34px) translateY(0); } to { opacity: 1; transform: rotateY(15deg) rotateX(8deg) translateZ(-34px) translateY(-8px); } } @keyframes isoFlotte2 { from { opacity: 1; transform: rotateY(0deg) rotateX(8deg) translateZ(6px) translateY(-10px); } to { opacity: 1; transform: rotateY(0deg) rotateX(8deg) translateZ(6px) translateY(-19px); } } @keyframes isoFlotte3 { from { opacity: 1; transform: rotateY(-15deg) rotateX(8deg) translateZ(-34px) translateY(0); } to { opacity: 1; transform: rotateY(-15deg) rotateX(8deg) translateZ(-34px) translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .iso-plan.is-in { animation: none; opacity: 1; } } /* --- Le total du calculateur se pose avec un ressort ---------------------- */ #calcTotal.est-pop { animation: calcPop .45s var(--spring-vif, cubic-bezier(.16, 1, .3, 1)); } @keyframes calcPop { 40% { transform: scale(1.045); } } /* 76. LA MASTERCLASS DES PIECES MONTEES (vague 9, 2026-07-30) : voir notes/refonte.notes.md §76 */ /* voir notes/refonte.notes.md §77 */ .tel-scene .tel { width: 240px; height: 478px; border-radius: 46px; padding: 10px; border: 1.5px solid transparent; background: linear-gradient(150deg, #232c3e 0%, #10161f 45%, #0a0f18 100%) padding-box, linear-gradient(150deg, #97a4bd 0%, #46536b 24%, #161d2c 52%, #2c3750 78%, #6a7893 100%) border-box; } /* --- L'ecran : un fond d'ecran OLED, un ilot, un reflet -------------------- */ .tel-screen { border-radius: 36px; background: radial-gradient(90% 50% at 18% 8%, rgba(30, 90, 210, .55) 0%, transparent 55%), radial-gradient(80% 60% at 88% 30%, rgba(80, 130, 255, .22) 0%, transparent 60%), radial-gradient(120% 90% at 50% 108%, rgba(10, 40, 110, .5) 0%, transparent 62%), linear-gradient(180deg, #0a1222 0%, #05080f 70%); } /* L'ilot de capteurs, au-dessus de l'horloge. */ .tel-screen::before { content: ''; position: absolute; top: 12px; left: 50%; width: 78px; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #01030a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); } .tel-heure { margin-top: 40px; } /* voir notes/refonte.notes.md §78 */ .tel-screen::after { content: ''; position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .085) 50%, transparent 58%); transform: translateX(-120%); } [data-scene].is-live .tel-screen::after { animation: telVerre 7s ease-in-out 1.2s infinite; } @keyframes telVerre { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } } /* --- L'appelant : un anneau de lumiere autour de l'avatar ------------------ */ .tel-av { width: 78px; height: 78px; margin-top: 30px; background: radial-gradient(circle at 32% 26%, #3f6fd8 0%, #182a55 62%, #101c3a 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 5px rgba(30, 116, 254, .12), 0 10px 30px -10px rgba(30, 116, 254, .5); } /* voir notes/refonte.notes.md §79 */ .tel-btns { gap: 52px; align-self: end; margin-bottom: 16px; } .tel-btns i { position: relative; width: 52px; height: 52px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 6px 16px -6px rgba(0, 0, 0, .6); } .tel-no { background: linear-gradient(160deg, #e0524f, #9c2b2b); } .tel-yes { background: linear-gradient(160deg, #3fcf6e, #17813c); } .tel-btns i::before { content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: #fff; -webkit-mask: var(--tel-glyphe) center / 22px no-repeat; mask: var(--tel-glyphe) center / 22px no-repeat; } :root { --tel-glyphe: url("data:image/svg+xml;utf8,"); } .tel-no::before { transform: rotate(135deg); } .tel-btns i::after { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .03em; color: rgba(255, 255, 255, .55); white-space: nowrap; } .tel-no::after { content: 'Refuser'; } .tel-yes::after { content: 'Accepter'; } /* Le vert appelle le geste tant que ca sonne. */ [data-scene].is-live .tel-yes { animation: telAppuie 1.6s ease-in-out infinite; } @keyframes telAppuie { 0%, 100% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 0 0 0 rgba(63, 207, 110, .45); } 50% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 0 0 12px rgba(63, 207, 110, 0); } } [data-scene].is-live.tel-manque .tel-yes { animation: none; } /* --- Le sol : l'appareil projette une ombre, donc il existe ---------------- */ .tel-stage::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -4px; height: 30px; background: radial-gradient(50% 100% at 50% 30%, rgba(4, 12, 30, .5) 0%, transparent 72%); filter: blur(7px); z-index: -1; } @media (prefers-color-scheme: dark) { .tel-stage::after { background: radial-gradient(50% 100% at 50% 30%, rgba(0, 0, 0, .85) 0%, transparent 72%); } } /* --- La notification : du verre systeme, une tuile d'app, un horodatage ---- */ /* --- La maquette : chaque plan projette son ombre, le flux TRANSPORTE ------ */ .iso-plan::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -18px; height: 18px; background: radial-gradient(50% 100% at 50% 0%, rgba(5, 20, 50, .30) 0%, transparent 70%); filter: blur(6px); z-index: -1; } @media (prefers-color-scheme: dark) { .iso-plan::after { background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, .7) 0%, transparent 70%); } } /* voir notes/refonte.notes.md §80 */ @media (prefers-reduced-motion: reduce) { .tel-screen::after, .tel-yes, .iso-pulse { animation: none !important; } } /* voir notes/refonte.notes.md §81 */ /* voir notes/refonte.notes.md §82 */ .tel-scene .tel { transform-style: flat; } /* 83. FINIR LES PIECES (vague 10, 2026-07-30) : voir notes/refonte.notes.md §83 */ /* voir notes/refonte.notes.md §84 */ .tel-etat.est-manque { background: transparent; box-shadow: none; padding: 5px 0; color: #ff8a84; font-size: 12.5px; letter-spacing: .02em; } .tel-etat { transition: background-color .4s var(--e-doux), box-shadow .4s var(--e-doux), color .4s var(--e-doux), padding .4s var(--e-doux); } .tel-btns { transition: opacity .5s var(--e-doux), transform .6s var(--e-pose); } [data-scene].is-live.tel-manque .tel-btns { opacity: 0; transform: translateY(18px); pointer-events: none; } [data-scene].is-live.tel-manque .tel-av { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } .tel-av { transition: box-shadow .5s var(--e-doux); } /* voir notes/refonte.notes.md §85 */ .sc-vide-piste { position: relative; } .sc-vide-piste::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--faint) 22%, transparent) 0 1.5px, transparent 1.5px 9px); } .sc-vide-plein { z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--accent-strong) 30%, transparent) calc(10% - 1px) 10%), linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); } .sc-vide-bord { z-index: 2; box-shadow: 0 0 14px 1px color-mix(in srgb, var(--accent) 55%, transparent); } @media (prefers-color-scheme: dark) { .sc-vide-piste::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 1.5px, transparent 1.5px 9px); } } /* voir notes/refonte.notes.md §86 */ .casc { position: relative; } /* Le fil descend en scaleY et non en height : le degrade suit la boite dans les deux cas, et la mise en page ne bouge plus. */ .casc-fil { position: absolute; left: calc(24px + 13px); top: 64px; width: 2px; height: calc(100% - 150px); transform: scaleY(0); transform-origin: center top; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)); } .is-live .casc-fil { animation: cascFil 2.4s cubic-bezier(.4, 0, .2, 1) .3s forwards; } @keyframes cascFil { to { transform: scaleY(1); } } .casc-ico { position: relative; z-index: 1; } .casc-etat:not(.is-ok):not(.is-warm) { position: relative; overflow: hidden; } .casc-etat:not(.is-ok):not(.is-warm)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-100%); } .is-live .casc-etat:not(.is-ok):not(.is-warm)::after { animation: cascAttend 1.1s linear infinite; } @keyframes cascAttend { to { transform: translateX(100%); } } @media (prefers-color-scheme: dark) { .casc-etat:not(.is-ok):not(.is-warm)::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .10) 50%, transparent 70%); } } /* La reponse arrive avec un ressort, pas un simple echange de texte. */ .casc-etat.is-ok, .casc-etat.is-warm { animation: cascPose .5s var(--spring-vif, cubic-bezier(.16, 1, .3, 1)); } @keyframes cascPose { 0% { transform: scale(.86); } 100% { transform: scale(1); } } /* --- Le calculateur : des curseurs qu'on a envie de saisir ----------------- */ .noir-cote input[type="range"]::-webkit-slider-thumb { transition: box-shadow .25s var(--e-doux), transform .25s var(--e-doux); } .noir-cote input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(77, 141, 255, .18); } .noir-cote input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(77, 141, 255, .26); } .noir-cote input[type="range"]:focus-visible { outline: 2px solid #4d8dff; outline-offset: 4px; border-radius: 4px; } /* voir notes/refonte.notes.md §87 */ .feat-demo { cursor: default; } .feat-demo:hover .fd, .feat-demo:hover .fd * { animation-play-state: paused !important; } /* 88. CALENDLY + LA CURE MOBILE (vague 11, 2026-07-30) : voir notes/refonte.notes.md §88 */ /* voir notes/refonte.notes.md §89 */ #calWrap { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 10%, transparent); } .calendly-inline-widget { width: 100%; height: 640px; } @media (prefers-color-scheme: dark) { #calWrap { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } } /* voir notes/refonte.notes.md §90 */ @media (max-width: 760px) { section { padding: 42px 0; } section:where(.noir, .final), .accuse { padding: 60px 0 !important; } .promesse { padding: 56px 0; } .promesse p { font-size: clamp(26px, 8vw, 34px); } h2 { font-size: clamp(27px, 8vw, 34px); } .lead { font-size: 15.5px; line-height: 1.55; margin-bottom: 26px; } .hero { padding: 104px 0 168px; } .hero .sub { font-size: 15.5px; } #produit { margin-top: -172px; } .eyebrow { margin-bottom: 14px; } .split, .split-tel, .final-in { gap: 30px; } .beats { margin-top: 18px; } .beats li { padding: 11px 0 11px 26px; } .tel-scene .tel { width: 210px; height: 420px; } .tel-stage { padding: 10px 0; } .iso { margin-bottom: 26px; } .iso-in { gap: 12px; } .iso-plan { padding: 11px 12px 13px; } .feats, .grid { gap: 16px; } .feat-demo { height: 118px; margin-bottom: 14px; } .chrono-row { padding: 12px 0 !important; } .chrono-embed .chrono-code { font-size: 11px; } .prix-bench { gap: 14px; margin-bottom: 12px; } .prix-bench > div { padding: 18px 18px; } .prix-bench b { font-size: 24px; margin-bottom: 6px; } .vs-col li { min-height: 0; } .vs-col ul { gap: 10px; } .qa summary { padding: 13px 15px; font-size: 14.5px; } .qa p { padding: 0 15px 14px; font-size: 14px; } .final-args { gap: 14px; } .final-args li { column-gap: 12px; } .form-body { padding: 18px; } .mega { padding-top: 24px; } .ticker { padding: 16px 0 0; } .tk { padding: 7px 13px; font-size: 12px; } .calendly-inline-widget { height: 580px; } } /* 91. LE QUESTIONNAIRE (vague 12, 2026-07-31) : voir notes/refonte.notes.md §91 */ /* --- Les options : icone + libelle + coche --------------------------------- */ .opt { display: grid !important; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 12px; text-align: left; min-height: 62px; } .opt-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); transition: background-color .35s var(--e-doux), color .35s var(--e-doux), transform .45s var(--spring-vif, var(--e-pose)); } .opt-ico svg { width: 22px; height: 22px; } /* Les traits se dessinent quand l'etape apparait, en cascade. */ .opt-ico svg :is(path, circle, rect, ellipse) { stroke-dasharray: 70; stroke-dashoffset: 70; } .step.is-on .opt-ico svg :is(path, circle, rect, ellipse) { animation: rfTrace .8s var(--e-sec) forwards; } .step.is-on .opt:nth-child(2) .opt-ico svg :is(path, circle, rect, ellipse) { animation-delay: .07s; } .step.is-on .opt:nth-child(3) .opt-ico svg :is(path, circle, rect, ellipse) { animation-delay: .14s; } .step.is-on .opt:nth-child(4) .opt-ico svg :is(path, circle, rect, ellipse) { animation-delay: .21s; } .step.is-on .opt:nth-child(5) .opt-ico svg :is(path, circle, rect, ellipse) { animation-delay: .28s; } /* La coche : invisible, puis elle CLAQUE au choix. */ .opt-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; opacity: 0; transform: scale(.3); } .opt-ok svg { width: 12px; height: 12px; } .opt.is-on .opt-ok { animation: optOk .5s var(--spring-vif, var(--e-pose)) forwards; } @keyframes optOk { to { opacity: 1; transform: scale(1); } } /* L'option choisie se souleve, son icone s'allume ; les autres s'inclinent. */ .opt.is-on { transform: translateY(-2px); } .opt.is-on .opt-ico { background: var(--accent); color: #fff; transform: scale(1.06); } .opts:has(.opt.is-on) .opt:not(.is-on) { opacity: .55; filter: saturate(.6); } .opt { transition: transform .45s var(--spring, var(--e-pose)), box-shadow .4s var(--e-doux), background-color .3s var(--e-doux), opacity .35s var(--e-doux), filter .35s var(--e-doux); } /* --- Les etapes glissent dans le SENS du geste ----------------------------- */ .form-card[data-dir="fwd"] .step.is-on { animation-name: rfEtape; } .form-card[data-dir="back"] .step.is-on { animation-name: rfEtapeBack; } @keyframes rfEtapeBack { from { opacity: 0; transform: translate3d(-22px, 0, -30px); } } /* --- La barre de progression se REMPLIT ------------------------------------ */ .form-dot:not(:last-child)::after { transition: background .5s var(--e-doux); } .form-card[data-etape="1"] .form-dot:nth-child(1)::after, .form-card[data-etape="2"] .form-dot:nth-child(1)::after, .form-card[data-etape="2"] .form-dot:nth-child(2)::after, .form-card[data-etape="3"] .form-dot:nth-child(1)::after, .form-card[data-etape="3"] .form-dot:nth-child(2)::after { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); } /* L'etape franchie garde sa pastille pleine, celle en cours pulse une fois. */ .form-dot.is-on:last-of-type::before { animation: none; } .form-card[data-etape] .form-dot.is-on::before { animation: dotPulse .6s var(--spring-vif, var(--e-pose)); } @keyframes dotPulse { 40% { transform: scale(1.18); } } /* La hauteur ne saute plus entre les etapes. */ .form-body { min-height: 322px; display: grid; } .step { grid-area: 1 / 1; } .step:not(.is-on) { pointer-events: none; } /* --- Le squelette du calendrier : ca scintille, jamais un trou ------------- */ #calWrap { position: relative; min-height: 300px; } #calWrap.is-chargement::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--brand-ink) 7%, transparent) 50%, transparent 62%), linear-gradient(var(--subtle), var(--subtle)); background-size: 220% 100%, 100% 100%; animation: calOnde 1.3s linear infinite; } #calWrap.is-chargement::after { content: 'Le calendrier arrive…'; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 13.5px; color: var(--muted); } @keyframes calOnde { to { background-position: -120% 0, 0 0; } } @media (prefers-color-scheme: dark) { #calWrap.is-chargement::before { background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%), linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); background-size: 220% 100%, 100% 100%; } } @media (max-width: 760px) { .opt { min-height: 56px; } .form-body { min-height: 0; } .calendly-inline-widget { height: 560px; } } @media (prefers-reduced-motion: reduce) { .opt, .opt-ico, .opt-ok { transition: none; animation: none !important; } .opt-ico svg :is(path, circle, rect, ellipse) { stroke-dashoffset: 0; animation: none !important; } .opt.is-on .opt-ok { opacity: 1; transform: scale(1); } #calWrap.is-chargement::before { animation: none; } } /* voir notes/refonte.notes.md §92 */ .final .form-card { width: 100%; max-width: none; margin: 0; } /* 93. LES CINQ CIBLES DE MOVSAR (vague 13, 2026-07-31) : voir notes/refonte.notes.md §93 */ /* --- 2. L'horloge du creneau, dans la legende ------------------------------ */ .sc-now { font-family: var(--font-data); font-weight: 600; color: var(--accent-strong); font-variant-numeric: tabular-nums; } /* voir notes/refonte.notes.md §94 */ .iso-chev { position: absolute; top: 50%; display: flex; gap: 5px; transform: translateY(-50%); z-index: 2; } .iso-chev-1 { left: calc(33.333% - 13px - 4px); } .iso-chev-2 { left: calc(66.666% - 13px + 4px); } .iso-chev s { width: 8px; height: 8px; border-top: 2.2px solid var(--accent); border-right: 2.2px solid var(--accent); transform: rotate(45deg); border-radius: 1px; opacity: .18; } [data-scene="iso"].is-live .iso-chev s { animation: isoChev 1.6s ease-in-out infinite; } [data-scene="iso"].is-live .iso-chev s:nth-child(2) { animation-delay: .18s; } [data-scene="iso"].is-live .iso-chev s:nth-child(3) { animation-delay: .36s; } [data-scene="iso"].is-live .iso-chev-2 s { animation-delay: .8s; } [data-scene="iso"].is-live .iso-chev-2 s:nth-child(2) { animation-delay: .98s; } [data-scene="iso"].is-live .iso-chev-2 s:nth-child(3) { animation-delay: 1.16s; } @keyframes isoChev { 0%, 100% { opacity: .18; transform: rotate(45deg) translate(0, 0); } 35% { opacity: 1; transform: rotate(45deg) translate(2px, -2px); } } @media (max-width: 900px) { .iso-chev { display: none; } } /* voir notes/refonte.notes.md §95 */ .prix-card.is-main { position: relative; overflow: hidden; } .prix-card.is-main::before { content: ''; position: absolute; inset: -60%; z-index: 0; background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, color-mix(in srgb, var(--accent) 55%, transparent) 340deg, transparent 360deg); animation: prixAnneau 7s linear infinite; pointer-events: none; } .prix-card.is-main > * { position: relative; z-index: 1; } @keyframes prixAnneau { to { transform: rotate(360deg); } } .prix-tag { background: var(--accent) !important; color: #fff !important; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent); } @media (prefers-reduced-motion: reduce) { .prix-card.is-main::before { animation: none; } } /* --- 5. LE QUESTIONNAIRE, piece maitresse ---------------------------------- */ .final-un { display: block; } .final-tete { max-width: 760px; margin: 0 auto 40px; text-align: center; } .final-tete h2, .final .final-tete h2 { margin-inline: auto; max-width: none; } .final-tete .lead { margin-inline: auto; } .final-args-row { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px !important; } .final-args-row li { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 9px; } .final-args-row .fa-ico { width: 30px; height: 30px; border-radius: 9px; grid-row: auto; } .final-args-row .fa-ico svg { width: 16px; height: 16px; } .final-args-row b { font-size: 13.5px; font-weight: 560; color: var(--muted); } /* La carte : LARGE, posee au centre, c'est l'objet principal du site. */ .final .form-card { width: min(880px, 100%); margin: 0 auto; } .form-body { min-height: 460px; padding: 30px 34px 26px; } .form-foot { padding: 0 34px 28px; } /* L'en-tete : etiquette, barre qui se remplit, compteur. */ .q-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 22px 34px 0; } .q-etiq { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--accent-strong); } .q-bar { height: 5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--brand-ink) 8%, transparent); } /* LA BARRE DE PROGRESSION : `width` -> `scaleX`, RAYON COMPENSE. Les deux conversions evidentes perdent quelque chose, et la planche de controle a 6x le montre (assets/2026-08-08-vitrine-qbar-zoom.png) : - `clip-path` garde le bout rond mais NON le degrade. Un degrade defini sur la boite se comprime avec elle sous `scaleX` ; une DECOUPE, elle, ne comprime rien, donc on ne verrait plus que le debut du degrade et la barre resterait bleu fonce jusqu'a la fin ; - `scaleX` garde le degrade mais aplatit le bout : le rayon horizontal est multiplie par l'echelle, 2,5 px deviennent 0,31 px a 12,5 %. D'ou le rayon en DEUX AXES, pose par le script a chaque etape : horizontal 2,5/p, vertical 2,5. Apres mise a l'echelle par p, le bout rendu vaut exactement 2,5 x 2,5 px, c'est-a-dire le demi-cercle d'aujourd'hui, a toutes les etapes. Un rayon est une propriete de PEINTURE : il ne redemande aucune mise en page. Valeur de depart : p = 1/8, donc 20 px. */ .q-bar i { display: block; height: 100%; width: 100%; border-radius: 20px / 2.5px; background: linear-gradient(90deg, var(--brand), #4d8dff); transform: scaleX(.125); transform-origin: 0 50%; transition: transform .7s var(--spring, var(--e-pose)), border-radius .7s var(--spring, var(--e-pose)); } .q-count { font-family: var(--font-data); font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; } .q-count b { color: var(--text); font-size: 15px; } .q-count em { font-style: normal; } @media (prefers-color-scheme: dark) { .q-bar { background: rgba(255, 255, 255, .09); } } /* Le numero fantome derriere chaque question : la profondeur editoriale. */ .step { position: relative; } .step::after { content: attr(data-n); position: absolute; top: -18px; right: -6px; z-index: 0; font-size: 118px; font-weight: 680; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brand-ink) 9%, transparent); pointer-events: none; } .step > * { position: relative; z-index: 1; } .step h3 { font-size: 22px; letter-spacing: -.02em; } .step > p { font-size: 15px; } @media (prefers-color-scheme: dark) { .step::after { -webkit-text-stroke-color: rgba(255, 255, 255, .08); } } /* Les grilles d'options : deux colonnes larges, trois pour les sites. */ .opts { grid-template-columns: repeat(2, 1fr) !important; gap: 13px; } .opts-3 { grid-template-columns: repeat(3, 1fr) !important; } .opt { min-height: 66px; font-size: 15.5px !important; } /* voir notes/refonte.notes.md §96 */ .opts-multi:has(.opt.is-on) .opt:not(.is-on) { opacity: 1; filter: none; } /* La zone libre et la grille contact. */ .q-texte { width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; resize: vertical; min-height: 120px; font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--text); background: color-mix(in srgb, var(--brand-ink) 3.5%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent); transition: box-shadow .3s var(--e-doux); } .q-texte:focus { outline: 0; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); } .q-texte::placeholder { color: var(--faint); } @media (prefers-color-scheme: dark) { .q-texte { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .11); color: #eef2f8; } } .q-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } .q-grille .q-large { grid-column: 1 / -1; } /* Le calendrier : grand, aux couleurs de la marque via les parametres d'URL. */ .calendly-inline-widget { height: 760px; } @media (max-width: 760px) { .form-body { min-height: 0; padding: 20px 18px 18px; } .form-foot { padding: 0 18px 20px; } .q-head { padding: 16px 18px 0; } .opts, .opts-3 { grid-template-columns: 1fr !important; } .opt { min-height: 56px; } .q-grille { grid-template-columns: 1fr; } .step::after { font-size: 84px; top: -12px; } .calendly-inline-widget { height: 600px; } .final-args-row { gap: 8px 14px; } } /* 97. FIN DU REGISTRE « BADGE IA » (vague 14, 2026-07-31) : voir notes/refonte.notes.md §97 */ .eyebrow { padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 560; color: var(--muted); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .eyebrow::before { font-size: 12.5px; letter-spacing: .02em; margin-right: 0; color: var(--accent-strong); } /* Le filet : court, entre le numero et le libelle. C'est lui qui structure, sans crier. */ .eyebrow::after { content: ''; order: -1; display: none; } .eyebrow i { display: none; } .noir .eyebrow { color: rgba(255, 255, 255, .66); } .noir .eyebrow::before { color: #7fabff; } /* Les etiquettes de la maquette : casse normale, plus de monospace crie. */ .iso-tag { font-family: var(--font-ui); font-size: 12px; font-weight: 560; letter-spacing: 0; text-transform: none; color: var(--faint); } /* La frise : « Jour 1 · matin » se lit comme du texte, pas comme un code. */ @media (min-width: 900px) { .chrono-when { font-family: var(--font-ui); font-size: 12.5px; font-weight: 560; letter-spacing: 0; text-transform: none; } } /* Le pied de page : des intitules de colonnes, pas des inscriptions gravees. */ .foot-col h3 { font-family: var(--font-ui) !important; font-size: 13.5px !important; font-weight: 620; letter-spacing: 0 !important; text-transform: none; color: var(--text); } /* Le calculateur : « Une semaine type » en langage humain. */ .noir-titre { font-family: var(--font-ui); font-size: 13px; font-weight: 560; letter-spacing: 0; text-transform: none; } /* 98. TROIS REGLAGES DE MOVSAR (vague 15, 2026-07-31) : voir notes/refonte.notes.md §98 */ /* La page respire trop sur les cotes : le conteneur passe a 1320 px. */ .wrap { width: min(1320px, calc(100% - 48px)); } /* voir notes/refonte.notes.md §99 */ #fx-wrap { opacity: .95; -webkit-mask-image: radial-gradient(ellipse 78% 64% at 50% 46%, transparent 20%, #000 64%); mask-image: radial-gradient(ellipse 78% 64% at 50% 46%, transparent 20%, #000 64%); } @media (prefers-color-scheme: dark) { #fx-wrap { opacity: .8; } } /* voir notes/refonte.notes.md §100 */ @media (prefers-color-scheme: dark) { #calWrap { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px -24px rgba(0, 0, 0, .8); } } /* voir notes/refonte.notes.md §101 */ .tel-scene::before { inset: -8% max(-46px, -8%); } /* 102. QUESTIONNAIRE V4 (vague 16, 2026-07-31) : voir notes/refonte.notes.md §102 */ /* Treize activites : grille trois colonnes, cartes plus compactes. */ .opts-g { grid-template-columns: repeat(3, 1fr) !important; gap: 11px; } .opts-g .opt { min-height: 58px; font-size: 14.5px !important; } .opts-g .opt-ico { width: 36px; height: 36px; border-radius: 10px; } .opts-g .opt-ico svg { width: 20px; height: 20px; } /* En multi, les non-choisis restent pleinement lisibles. */ .opts-g:has(.opt.is-on) .opt:not(.is-on) { opacity: 1; filter: none; } /* Le champ « Autre » se revele sous la grille quand la carte est cochee. */ .q-autre { width: 100%; margin-top: 12px; border: 0; border-radius: 12px; height: 46px; padding: 0 14px; font-family: var(--font-ui); font-size: 14.5px; color: var(--text); background: color-mix(in srgb, var(--brand-ink) 3.5%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent); transition: box-shadow .3s var(--e-doux); animation: rfMonte .45s var(--e-pose) both; } .q-autre:focus { outline: 0; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); } @media (prefers-color-scheme: dark) { .q-autre { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .11); color: #eef2f8; } } /* « Passer cette question » : une permission, pas un bouton de plus. */ .q-passer { border: 0; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 13.5px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; transition: color .25s var(--e-doux); } .q-passer:hover { color: var(--muted); } .q-passer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* La carte grandit avec ses treize activites. */ .form-body { min-height: 520px; } @media (max-width: 900px) { .opts-g { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 760px) { .opts-g { grid-template-columns: 1fr 1fr !important; gap: 8px; } .opts-g .opt { min-height: 50px; font-size: 13px !important; } .opts-g .opt-ico { width: 30px; height: 30px; } .form-body { min-height: 0; } } /* 103. LA PAGE NE POMPE PLUS (vague 17, 2026-07-31) : voir notes/refonte.notes.md §103 */ .demo .demo-body { height: 665px; min-height: 0; overflow: hidden; } @media (max-width: 760px) { .demo .demo-body { height: 900px; overflow-y: auto; overscroll-behavior: contain; } } /* Le fond signature, un cran plus discret : il habille, il ne parle plus. */ #fx-wrap { opacity: .8; } @media (prefers-color-scheme: dark) { #fx-wrap { opacity: .62; } } /* 104. LE MOMENT BENTO, V3 : LA LOGIQUE D'ABORD (2026-07-31) : voir notes/refonte.notes.md §104 */ .bento { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 64px; text-align: left; } .bt-panel { position: relative; overflow: hidden; border-radius: 26px; padding: 34px 34px 0; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 6%, transparent); } /* voir notes/refonte.notes.md §105 */ .bt-panel h2, .bt-panel h3 { margin: 0 0 10px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; /* voir notes/refonte.notes.md §106 */ background: none; color: var(--text); -webkit-text-fill-color: currentColor; animation: none; } .bt-panel p, .promesse .bt-panel p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--muted); max-width: 46ch; text-align: left; } .bt-c { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; justify-content: space-between; padding: 34px; } .bt-c p { margin-bottom: 0; } .bt-verite { position: relative; flex: 1 1 470px; max-width: 560px; height: 172px; } .bt-vcard { position: absolute; left: 0; display: grid; gap: 3px; width: 88%; padding: 10px 15px; border-radius: 14px; background: var(--surface); box-shadow: var(--hair), var(--pop-s); } .bt-vsite { top: 0; transform: rotate(-1.2deg); z-index: 1; } .bt-vcompt { top: 56px; left: 7%; transform: rotate(.7deg); z-index: 2; } .bt-vmark { top: 112px; left: 2.5%; transform: rotate(-.5deg); z-index: 3; } .bt-vtete { font-size: 10.5px; color: var(--faint); } .bt-vligne { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .bt-vligne b { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bt-vok { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #0f7b3d; } .bt-vpoint { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #0f7b3d; } [data-scene="bento"].is-live .bt-vcard { animation: rfMonte .55s var(--spring, var(--e-pose)) both; } [data-scene="bento"].is-live .bt-vcompt { animation-delay: .14s; } [data-scene="bento"].is-live .bt-vmark { animation-delay: .28s; } @media (prefers-color-scheme: dark) { .bt-panel { background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .07); } .bt-vcard { background: #131a26; } .bt-vok, .bt-vpoint { color: #3fb950; } .bt-vpoint { background: #3fb950; } } /* --- Panneau A : le planning est le protagoniste, la resa tombe dedans ---- */ .bt-scene { position: relative; height: 258px; margin: 20px -34px 0; } .bt-fond { position: absolute; inset: 10px 34px 22px; display: grid; gap: 9px; align-content: start; transform: rotate(-1.2deg); } .bt-fl { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; } .bt-fl > span:first-child { font-family: var(--font-data); font-size: 10.5px; color: var(--faint); } .bt-fx { position: relative; height: 26px; } .bt-fx i, .bt-fx b { position: absolute; left: 0; top: 0; display: flex; align-items: center; padding: 0 10px; height: 26px; border-radius: 8px; font-style: normal; font-size: 10.5px; font-weight: 550; white-space: nowrap; overflow: hidden; } .bt-fx i { width: var(--l, 60%); color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 16%, transparent); } .bt-fx .bt-fvide { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 35%, transparent); } /* La ligne qui se vend : la barre pleine, couleur de marque, qui POUSSE. */ .bt-frempli { width: 58%; color: #fff; font-weight: 600; background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, var(--brand, #0664fe)), var(--brand, #0664fe)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 6px 14px -6px rgba(6, 100, 254, .55); opacity: 0; } [data-scene="bento"].is-live .bt-fvide { animation: btVide .4s ease both; animation-delay: 1.02s; } [data-scene="bento"].is-live .bt-frempli { animation: btRemplit .65s var(--spring, var(--e-pose)) both; animation-delay: 1.02s; } @keyframes btVide { from { opacity: 1; } to { opacity: 0; } } /* CELLE-CI GARDE `width`, ET C'EST VOULU : la barre PORTE son libelle (« 14h, 15h, 45 € a encaisser »). Un `scaleX` etirerait le texte, une decoupe le masquerait ; ici la largeur EST la donnee, et elle pousse vraiment. Une transition de 0,65 s jouee une fois par scene : le cout est connu et assume. */ @keyframes btRemplit { from { opacity: 1; width: 7%; } to { opacity: 1; width: 58%; } } /* La carte de reservation qui tombe : le meme objet que dans la console. */ .bt-resa { position: absolute; right: 24px; top: 134px; z-index: 2; display: grid; gap: 7px; width: 232px; padding: 15px 17px 14px; border-radius: 16px; transform: rotate(-2deg); background: var(--surface); box-shadow: var(--hair), 0 10px 0 -5px #d7e2f8, 0 30px 60px -30px rgba(5, 30, 72, .45); opacity: 0; } .bt-rqui { font-size: 13.5px; } .bt-rqui b { font-weight: 650; } .bt-rou { font-family: var(--font-data); font-size: 11px; color: var(--muted); } .bt-etat { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 570; color: #0f7b3d; background: rgba(15, 123, 61, .1); } .bt-etat i { width: 6px; height: 6px; border-radius: 50%; background: #0f7b3d; } [data-scene="bento"].is-live .bt-resa { animation: btResa .8s var(--spring-vif, var(--e-pose)) both; animation-delay: .3s; } @keyframes btResa { from { opacity: 0; transform: rotate(4deg) translateY(-54px) scale(.9); } to { opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); } } /* Le reflet qui traverse la carte une fois posee, et son ombre de contact. */ .bt-resa::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); background-size: 240% 100%; background-position-x: 160%; pointer-events: none; } [data-scene="bento"].is-live .bt-resa::after { animation: btReflet 1.3s ease-in-out 1.5s forwards; } @keyframes btReflet { from { background-position-x: 160%; } to { background-position-x: -60%; } } .bt-scene::after { content: ''; position: absolute; right: 34px; top: 234px; width: 212px; height: 22px; border-radius: 50%; pointer-events: none; background: radial-gradient(50% 100% at 50% 50%, rgba(5, 20, 50, .28), transparent 70%); filter: blur(7px); } .bt-scene-b::after { display: none; } /* Le gain : la consequence chiffree, posee sur la ligne remplie. */ .bt-gain { position: absolute; right: 176px; top: 120px; z-index: 3; font-family: var(--font-data); font-size: 15px; font-weight: 680; color: #0f7b3d; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); opacity: 0; } [data-scene="bento"].is-live .bt-gain { animation: btGain .8s var(--spring-vif, var(--e-pose)) forwards; animation-delay: 1.35s; } @keyframes btGain { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: translateY(-14px) scale(1); } } @media (prefers-color-scheme: dark) { .bt-resa { background: #131a26; box-shadow: var(--hair), 0 10px 0 -5px rgba(0, 0, 0, .55), 0 30px 60px -30px rgba(0, 0, 0, .85); } .bt-etat { color: #3fb950; background: rgba(63, 185, 80, .14); } .bt-etat i { background: #3fb950; } .bt-gain { color: #3fb950; text-shadow: none; } .bt-scene::after { background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, .6), transparent 70%); } } /* --- Panneau B : la console ne bouge pas, les mots changent -------------- */ .bt-scene-b { height: 248px; } .bt-console { position: absolute; left: 30px; right: 30px; top: 12px; padding: 13px 16px 6px; border-radius: 18px; transform: rotate(-1.6deg); background: var(--surface); box-shadow: var(--hair), var(--pop); } .bt-chead { display: flex; align-items: center; gap: 11px; padding-bottom: 11px; border-bottom: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent); } .bt-cico { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, transparent); } .bt-cico svg { position: absolute; inset: 5px; width: 20px; height: 20px; opacity: 0; animation: btCycle 10.5s ease infinite both; } .bt-cico svg :is(path, circle, rect, ellipse) { stroke-dasharray: none; stroke-dashoffset: 0; } .bt-chead > em { margin-left: auto; font-style: normal; font-family: var(--font-data); font-size: 10.5px; color: var(--faint); } .bt-cyc { position: relative; display: inline-block; height: 1.35em; } .bt-cyc b { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: btCycle 10.5s ease infinite both; } .bt-cyc b:nth-child(2), .bt-cico svg:nth-child(2) { animation-delay: 3.5s; } .bt-cyc b:nth-child(3), .bt-cico svg:nth-child(3) { animation-delay: 7s; } @keyframes btCycle { 0% { opacity: 0; transform: translateY(8px); } 3.5%, 29.5% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-8px); } } .bt-act { width: 104px; font-size: 14.5px; } .bt-act b { font-weight: 650; letter-spacing: -.01em; } .bt-crow { display: grid; grid-template-columns: 60px 74px 1fr 10px; align-items: center; gap: 12px; padding: 10.5px 2px; font-size: 12px; border-bottom: 1px solid color-mix(in srgb, var(--brand-ink) 5%, transparent); } .bt-crow:last-child { border-bottom: 0; } .bt-unit { width: 58px; } .bt-unit b { font-weight: 620; } .bt-crow > em { font-style: normal; font-family: var(--font-data); font-size: 11px; color: var(--muted); } .bt-qui { width: 88px; color: var(--muted); } .bt-qui b { font-weight: 480; } .bt-ok { width: 7px; height: 7px; border-radius: 50%; background: #0f7b3d; justify-self: end; } /* « libre » parle le meme langage que le panneau A : des pointilles. */ .bt-libre { justify-self: start; padding: 2px 10px; border-radius: 7px; color: var(--faint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--faint) 35%, transparent); } [data-scene="bento"].is-live .bt-console { animation: rfMonte .6s var(--spring, var(--e-pose)) both; } @media (prefers-color-scheme: dark) { .bt-console { background: #131a26; } .bt-chead { border-bottom-color: rgba(255, 255, 255, .09); } .bt-crow { border-bottom-color: rgba(255, 255, 255, .06); } .bt-ok { background: #3fb950; } } /* --- La couche details qui reste site-wide (token de lumiere) ------------ */ :root { --hair: 0 0 0 1px rgba(5, 30, 72, .07), inset 0 1px 0 rgba(255, 255, 255, .7); } @media (prefers-color-scheme: dark) { :root { --hair: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .09); } } .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(6, 30, 90, .28), 0 14px 30px -14px rgba(6, 100, 254, .62); } .btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 2px rgba(6, 30, 90, .3), 0 22px 44px -18px rgba(6, 100, 254, .7); } /* --- Immobilite et mobile ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .bt-cyc b, .bt-cico svg { animation: none; } .bt-cyc b:first-child, .bt-cico svg:first-child { opacity: 1; } .bt-resa, .bt-gain { opacity: 1; } .bt-frempli { opacity: 1; } .bt-cible .bt-fvide { opacity: 0; } } @media (max-width: 900px) { .bento { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; } .bt-panel { padding: 24px 22px 0; } .bt-c { padding: 24px 22px; } .bt-scene { height: 244px; margin: 14px -22px 0; } .bt-fond { inset: 8px 22px 18px; } .bt-resa { right: 12px; top: 128px; width: 212px; } .bt-gain { right: 154px; } .bt-scene::after { right: 22px; } .bt-scene-b { height: 236px; } .bt-console { left: 18px; right: 18px; } .bt-qui { width: 80px; } .bt-verite { height: auto; display: grid; gap: 8px; max-width: none; } .bt-vcard { position: static; width: auto; transform: none; } } /* 107. LE TELEPHONE, GENERATION IPHONE (2026-07-31) : voir notes/refonte.notes.md §107 */ .tel-scene .tel { width: 238px; height: 500px; border-radius: 52px; padding: 9px; border: 2.5px solid transparent; transform-style: flat; background: linear-gradient(#04060b, #04060b) padding-box, conic-gradient(from 215deg at 50% 50%, #e3e8f0 0%, #98a2b3 10%, #38414f 26%, #6b7688 42%, #f2f5f9 55%, #aab3c2 68%, #3c4554 84%, #e3e8f0 100%) border-box; box-shadow: 0 1px 2px rgba(255, 255, 255, .25), 28px 34px 70px -30px rgba(3, 8, 20, .85), 0 60px 90px -50px rgba(3, 8, 20, .9); } .tel-b { position: absolute; width: 3.5px; border-radius: 2px; background: linear-gradient(90deg, #9aa5ba, #4a5468); } .tel-b-act { left: -5.5px; top: 112px; height: 20px; } .tel-b-v1 { left: -5.5px; top: 148px; height: 38px; } .tel-b-v2 { left: -5.5px; top: 192px; height: 38px; } .tel-b-pow { right: -5.5px; left: auto; top: 156px; height: 62px; background: linear-gradient(90deg, #4a5468, #9aa5ba); } /* L'ecran : bezel fin => rayon qui suit le corps, fond d'ecran profond, verre serti d'un filet clair. */ .tel-screen { display: flex; flex-direction: column; align-items: center; border-radius: 41px; padding: 56px 16px 24px; background: linear-gradient(168deg, rgba(255, 255, 255, .06) 0%, transparent 26%), radial-gradient(70% 45% at 22% 4%, rgba(52, 106, 236, .5) 0%, transparent 60%), radial-gradient(55% 40% at 84% 20%, rgba(110, 76, 245, .26) 0%, transparent 62%), radial-gradient(95% 60% at 50% 116%, rgba(8, 44, 124, .55) 0%, transparent 64%), linear-gradient(180deg, #0b1426 0%, #060a14 58%, #04060c 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } .tel-screen::before { top: 11px; width: 72px; height: 20px; border-radius: 11px; background: radial-gradient(circle 3px at 78% 50%, #232c3c 0%, #10151f 55%, #01030a 72%), #01030a; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .06); } .tel-heure { position: absolute; top: 15px; left: 25px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .95); } .tel-sb { position: absolute; top: 15px; right: 21px; width: 55px; height: 12px; } /* L'appel : nom grand, numero discret, etat en filet - la hierarchie iOS. */ .tel-av { width: 66px; height: 66px; margin-top: 22px; } .tel-av svg { width: 30px; height: 30px; } .tel-qui { margin-top: 18px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; } .tel-num { margin-top: 6px; font-size: 12px; } .tel-etat { margin-top: 14px; padding: 4px 12px; font-size: 11px; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); } .tel-btns { margin-top: auto; margin-bottom: 18px; gap: 62px; } .tel-btns i { width: 58px; height: 58px; } .tel-no { background: linear-gradient(180deg, #ff544a, #e93325); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(233, 51, 37, .7); } .tel-yes { background: linear-gradient(180deg, #3fd06e, #23a84c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 18px -8px rgba(35, 168, 76, .7); } .tel-btns i::before { width: 24px; height: 24px; } .tel-btns i::after { font-size: 10.5px; color: rgba(255, 255, 255, .78); } /* Les ondes et la notification suivent le nouveau gabarit. */ .tel-onde { width: 238px; height: 500px; border-radius: 52px; } /* 108. LE VAULT D'ARLAN, PORTE ICI (2026-08-02) : voir notes/refonte.notes.md §108 */ /* voir notes/refonte.notes.md §109 */ @supports (corner-shape: squircle) { /* voir notes/refonte.notes.md §110 */ .card, .demo, .demo-shell, .demo-body, .bt-panel, .bt-c, .bt-console, .bt-resa, .tel-scene .tel, .tel-screen, .form-card, .prop, .sb-brand, .sb-item, .dur-pill, .opt-ico, .activity-icon, .tabs-in, .tab, .calWrap, .fd-carte, .fd-c, .mtx, .mtx-res, .q-carte, .bt-carte, .bt-vcard, .qa, .opt, .feat, .feat-demo, .kpi, .trust, .step-card, .noir-barre, .field input, .field textarea { corner-shape: squircle; } } /* voir notes/refonte.notes.md §111 */ .btn.primary { position: relative; isolation: isolate; /* le libelle reste au-dessus des couches */ background: linear-gradient(180deg, #2b7cff 0%, var(--brand, #0664fe) 62%, #0553d6 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), /* le biseau eclaire */ inset 0 -1px 0 rgba(2, 20, 60, .45), /* le poids, en bas */ inset 0 0 0 1px rgba(255, 255, 255, .10), /* le lisere qui accroche */ inset 0 -14px 18px -14px rgba(2, 16, 52, .55), 0 1px 2px rgba(6, 30, 90, .3), 0 14px 30px -14px rgba(6, 100, 254, .62); text-shadow: 0 1px 1px rgba(2, 20, 60, .35); } /* La lumiere qui s'allume : une seconde version, plus claire, en fondu. */ .btn.primary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: linear-gradient(180deg, #4a91ff 0%, #1470ff 62%, #0664fe 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 14px rgba(120, 180, 255, .45); transition: opacity .2s var(--e-doux, ease); } .btn.primary:hover::before { opacity: 1; } /* voir notes/refonte.notes.md §112 */ .btn.primary::after { content: ''; position: absolute; left: 12px; right: 12px; top: -6px; height: 26px; z-index: -1; border-radius: 500px; background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff); filter: blur(1.5px); opacity: .30; transition: opacity .3s var(--e-doux, ease), top .3s var(--e-doux, ease); } .btn.primary:hover::after { opacity: .42; top: -4px; } /* voir notes/refonte.notes.md §113 */ .btn.primary:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(2, 16, 52, .5), inset 0 -1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08); transition-duration: .06s; } .btn.primary:active::after { opacity: .12; top: -2px; } /* voir notes/refonte.notes.md §114 */ @supports (mask-image: linear-gradient(#000, transparent)) { /* voir notes/refonte.notes.md §115 */ .bento { --fantome: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .06) 9%, rgba(0, 0, 0, .28) 17%, rgba(0, 0, 0, .68) 25%, rgba(0, 0, 0, .93) 32%, #000 40%, #000 100%); -webkit-mask-image: var(--fantome); mask-image: var(--fantome); -webkit-mask-size: 100% 320%; mask-size: 100% 320%; -webkit-mask-position: 0% 0%; mask-position: 0% 0%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: mask-position 1.15s var(--e-sortie, cubic-bezier(.16, 1, .3, 1)), -webkit-mask-position 1.15s var(--e-sortie, cubic-bezier(.16, 1, .3, 1)); } /* voir notes/refonte.notes.md §116 */ .bento.is-live { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; } } /* Un ecran qui ne joue pas les animations ne doit pas rester masque. */ @media (prefers-reduced-motion: reduce) { .bento { -webkit-mask-image: none !important; mask-image: none !important; } } /* voir notes/refonte.notes.md §117 */ .hero { position: relative; isolation: isolate; } .aurore { position: absolute; left: -6%; right: -6%; bottom: -2px; width: 112%; height: min(44%, 300px); z-index: 0; pointer-events: none; opacity: 0; transform: scaleY(.04); transform-origin: 50% 100%; mix-blend-mode: screen; /* sur le noir de marque : de la lumiere */ transition: transform 1.25s var(--e-sortie, cubic-bezier(.16, 1, .3, 1)), opacity .8s ease; } .aurore.est-levee { opacity: .42; transform: scaleY(1); } /* Le contenu du hero reste au-dessus du halo. */ .hero .wrap, .hero .hero-anim { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .aurore { transition: none; opacity: .38; transform: scaleY(1); } } @media (max-width: 720px) { .aurore { height: min(38%, 220px); } } /* voir notes/refonte.notes.md §118 */ .field input, .field textarea { box-shadow: inset 0 2px 3px color-mix(in srgb, var(--brand-ink) 11%, transparent), inset 0 -1px 0 rgba(255, 255, 255, .7), 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent) !important; } /* Au focus, l'anneau d'accent arrive SANS combler le creux : le champ reste enfonce, il s'allume. */ .field input:focus, .field textarea:focus { box-shadow: inset 0 2px 3px color-mix(in srgb, var(--brand-ink) 9%, transparent), 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent) !important; } @media (prefers-color-scheme: dark) { /* voir notes/refonte.notes.md §119 */ .field input, .field textarea { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 255, 255, .09) !important; } .field input:focus, .field textarea:focus { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 0 0 1.5px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent) !important; } } /* 120. CE QUI NE TOURNE QUE QUAND ON LE REGARDE (2026-08-04) : voir notes/refonte.notes.md §120 */ [data-hors-champ] *, [data-hors-champ]::before, [data-hors-champ]::after { animation-play-state: paused !important; } /* voir notes/refonte.notes.md §121 */ /* 122. LE TELEPHONE, REPRISE (2026-08-04) : voir notes/refonte.notes.md §122 */ /* L'ilot se resserre : c'est lui qui doit ceder la place, pas la barre. */ .tel-screen::before { width: 58px; height: 18px; top: 10px; border-radius: 10px; } /* La barre d'etat retrouve ses marges : collee aux bords, loin de l'ilot. */ .tel-heure { top: 12px; left: 18px; font-size: 12.5px; letter-spacing: -.01em; } .tel-sb { top: 13px; right: 16px; width: 50px; } /* voir notes/refonte.notes.md §123 */ .tel-screen::after { /* voir notes/refonte.notes.md §124 */ background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .085) 50%, transparent 58%); } .tel-accueil { position: absolute; left: 50%; bottom: 7px; width: 108px; height: 4.5px; border-radius: 999px; background: rgba(255, 255, 255, .55); transform: translateX(-50%); z-index: 5; pointer-events: none; } /* Les boutons d'appel remontent : sur un vrai appareil ils ne flottent pas a soixante pixels du bas. */ .tel-btns { margin-bottom: 34px; } /* Les libelles sous les boutons : droits et lisibles, pas en italique. */ .tel-btns i::after { font-style: normal; font-size: 11px; letter-spacing: -.01em; color: rgba(255, 255, 255, .72); } /* voir notes/refonte.notes.md §125 */ .tel-b { width: 3px; border-radius: 3px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); } .tel-b-act { left: -6px; } .tel-b-v1 { left: -6px; } .tel-b-v2 { left: -6px; } .tel-b-pow { right: -6px; } /* 126. LES BOUTONS CESSENT D'ETRE INTERCHANGEABLES (2026-08-04) : voir notes/refonte.notes.md §126 */ /* 127. a. LE BOUTON PRINCIPAL VIT SEUL, ET UNE SEULE FOIS. : voir notes/refonte.notes.md §127 */ .btn.primary { overflow: hidden; } .btn.primary .btn-lueur { position: absolute; top: 0; bottom: 0; width: 42%; left: -55%; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-14deg); } .btn.primary.est-vu .btn-lueur { animation: btnLueur 1.15s var(--e-doux, ease) .25s 1 both; } /* voir notes/refonte.notes.md §128 */ @keyframes btnLueur { to { transform: skewX(-14deg) translateX(404.76%); } } /* 129. b. LES SECONDAIRES NE COPIENT PLUS LE PRINCIPAL. : voir notes/refonte.notes.md §129 */ .btn:not(.primary) { background: color-mix(in srgb, var(--surface) 92%, var(--brand-ink)); } .btn:not(.primary):active { transform: translateY(1px) scale(.995); } /* 130. c. LE BOUTON D'APPEL ARRETE DE PULSER SANS FIN. : voir notes/refonte.notes.md §130 */ [data-scene].is-live .tel-yes { animation: telAppuie 1.6s ease-in-out 3 both !important; } @media (prefers-reduced-motion: reduce) { .btn.primary.est-vu .btn-lueur { animation: none; } } /* 131. LE CADRE : TITANE, PAS CHROME (2026-08-04) : voir notes/refonte.notes.md §131 */ .tel-scene .tel { border-width: 2px; background: linear-gradient(#04060b, #04060b) padding-box, conic-gradient(from 215deg at 50% 50%, #9aa3b2 0%, /* l'angle qui capte la lumiere */ #566070 8%, #2b323e 22%, /* la face longue, sombre */ #444c5b 38%, #a8b1c0 52%, /* l'angle oppose */ #59636f 66%, #262c37 82%, #9aa3b2 100%) border-box; box-shadow: /* voir notes/refonte.notes.md §132 */ inset 0 0 0 1px rgba(0, 0, 0, .85), 0 1px 1px rgba(255, 255, 255, .12), 28px 34px 70px -30px rgba(3, 8, 20, .85), 0 60px 90px -50px rgba(3, 8, 20, .9); } /* voir notes/refonte.notes.md §133 */ .tel-b { background: linear-gradient(90deg, #7d8695, #3c434f); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18); } .tel-b-pow { background: linear-gradient(90deg, #3c434f, #7d8695); } /* 134. LE TELEPHONE N'EST PAS UN ECRAN ETROIT (2026-08-04) : voir notes/refonte.notes.md §134 */ @media (max-width: 620px) { /* voir notes/refonte.notes.md §135 */ .hero h1 { font-size: clamp(28px, 8.4vw, 33px); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; } section.wrap h2, .wrap h2 { font-size: clamp(23px, 6.6vw, 26px); line-height: 1.18; letter-spacing: -.022em; text-wrap: balance; } /* voir notes/refonte.notes.md §136 */ .eyebrow { font-size: 11.5px; letter-spacing: .1em; } .sub, .lead { font-size: 15px; line-height: 1.62; } /* voir notes/refonte.notes.md §137 */ .hero .sub { max-width: 32ch !important; margin-inline: auto; } .lead { max-width: 38ch; } /* voir notes/refonte.notes.md §138 */ section[id], header[id], .wrap[id], [data-scene] { scroll-margin-top: 74px; } /* voir notes/refonte.notes.md §139 */ section.wrap, .wrap.promesse { padding-top: 40px; padding-bottom: 40px; } .bento { margin-top: 28px; gap: 12px; } .split, .split-tel { gap: 22px; } /* voir notes/refonte.notes.md §140 */ .tabs-in { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%); } .tabs-in::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; font-size: 13px; padding: 0 13px; scroll-snap-align: start; /* voir notes/refonte.notes.md §141 */ min-height: 44px; display: inline-flex; align-items: center; } /* voir notes/refonte.notes.md §142 */ .hero .btn.lg { width: auto; max-width: 320px; margin-inline: auto; } /* voir notes/refonte.notes.md §143 */ .reassure { gap: 7px; } .reassure .pill { font-size: 12.5px; padding: 7px 13px; } /* voir notes/refonte.notes.md §144 */ .compar-wrap, .mtx, .vs-grid { overflow-x: auto; scrollbar-width: none; } .compar-wrap::-webkit-scrollbar, .mtx::-webkit-scrollbar { display: none; } /* voir notes/refonte.notes.md §145 */ .tel-scene .tel { width: 208px; height: 437px; } .tel-onde { width: 208px; height: 437px; } .tel-stage { padding: 14px 0; } /* voir notes/refonte.notes.md §146 */ .mtx-tab, .brand, .foot-brand { min-height: 44px; display: inline-flex; align-items: center; } .field input, .field textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select { min-height: 46px; } /* voir notes/refonte.notes.md §147 */ input[type="range"] { min-height: 44px; } input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; } input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; } /* voir notes/refonte.notes.md §148 */ .opts-g { grid-template-columns: 1fr; gap: 8px; } .opt { min-height: 52px; } } /* 149. LE TELEPHONE, GEOMETRIE MESUREE (2026-08-07) : voir notes/refonte.notes.md §149 */ .tel-scene .tel { width: 242px; height: 506px; border-radius: 34px; padding: 6px; /* voir notes/refonte.notes.md §150 */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), 0 1px 1px rgba(255, 255, 255, .12), 0 2px 5px rgba(6, 12, 24, .18), 0 14px 30px -12px rgba(6, 12, 24, .32), 0 48px 90px -32px rgba(6, 12, 24, .5); } .tel-screen { border-radius: 26px; padding: 50px 16px 22px; } .tel-onde { width: 242px; height: 506px; border-radius: 34px; } /* voir notes/refonte.notes.md §151 */ .tel-screen::before { top: 6px; width: 72px; height: 21px; border-radius: 10.5px; background: radial-gradient(circle 3px at 76% 50%, #2c3a54 0%, #141c2b 52%, #01030a 74%), #01030a; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .06); } /* voir notes/refonte.notes.md §152 */ .tel-heure { top: 9px; left: 24px; } .tel-sb { top: 10px; right: 20px; width: 48px; } /* La barre d'accueil aux proportions systeme : 34 % de la dalle, 3,5 px. */ .tel-accueil { width: 78px; height: 3.5px; bottom: 6px; background: rgba(255, 255, 255, .5); } /* La notification se pose sous l'ilot, a la distance des bannieres systeme. */ /* voir notes/refonte.notes.md §153 */ @media (max-width: 620px) { .tel-scene .tel { width: 208px; height: 432px; border-radius: 29px; } .tel-onde { width: 208px; height: 432px; border-radius: 29px; } .tel-screen { border-radius: 21px; } } /* 154. TROIS SECTIONS CESSENT D'ETRE DES CARTES EN FONDU (2026-08-07) : voir notes/refonte.notes.md §154 */ /* --- a. L'agent : trois preuves dans trois cartes ------------------------- */ .ag .card { display: flex; flex-direction: column; } .ag .card h3 { margin-top: 0; } .ag-demo { margin-bottom: 18px; padding: 14px 14px 12px; border-radius: var(--radius-md); background: var(--subtle); box-shadow: var(--hair); min-height: 92px; display: grid; align-content: space-between; gap: 8px; } /* La frequentation : quatre jours, le lundi en retrait. Les barres POUSSENT du sol, jamais posees d'un bloc. */ .ag-bars { display: flex; align-items: flex-end; gap: 12px; height: 40px; padding: 0 4px; margin-bottom: 16px; } .ag-bars i { position: relative; flex: 1; height: calc(var(--h) * 34px); border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--accent) 70%, transparent); transform-origin: bottom; transform: scaleY(0); } .ag-bars i em { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9px; letter-spacing: .02em; font-family: var(--font-data); color: var(--faint); } .ag-bars i.est-creux { background: color-mix(in srgb, #d97706 52%, transparent); } [data-scene="agent3"].is-live .ag-bars i { animation: agBar .65s var(--ease) forwards; } [data-scene="agent3"].is-live .ag-bars i:nth-child(2) { animation-delay: .16s; } [data-scene="agent3"].is-live .ag-bars i:nth-child(3) { animation-delay: .32s; } [data-scene="agent3"].is-live .ag-bars i:nth-child(4) { animation-delay: .48s; } @keyframes agBar { to { transform: scaleY(1); } } .ag-flag { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 550; color: color-mix(in srgb, #b45309 88%, var(--text)); } .ag-flag b { font-size: 15px; font-weight: 650; } /* voir notes/refonte.notes.md §155 */ .ag-post { font-family: var(--font-data); font-size: 12px; line-height: 1.5; color: var(--text); min-height: 38px; } /* voir notes/refonte.notes.md §156 */ .ag-post.est-fini .m-caret { display: none; } .ag-post .m-caret, .fx-code .m-caret { margin-left: 2px; } .ag-choix { display: flex; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); } .ag-choix.is-in { opacity: 1; transform: none; } .ag-btn { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; background: var(--surface); color: var(--muted); box-shadow: var(--hair); } .ag-btn.est-un { background: var(--accent); color: #fff; box-shadow: none; } /* Le suivi : la jauge court avec le compteur, le bilan tombe en vert. */ .ag-suivi { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); } .ag-suivi-t { white-space: nowrap; } .ag-jauge { flex: 1; height: 5px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; } .ag-jauge i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); } [data-scene="agent3"].is-live .ag-jauge i { animation: agJauge 1.6s linear .7s forwards; } @keyframes agJauge { to { transform: scaleX(1); } } .ag-suivi b[data-ag-jour] { font-family: var(--font-data); font-size: 11.5px; font-weight: 650; color: var(--accent-strong); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; } .ag-bilan { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 550; color: var(--ok); opacity: 0; transform: translateY(5px); transition: opacity .4s var(--ease), transform .5s var(--ease); } .ag-bilan.is-in { opacity: 1; transform: none; } /* --- b. Le flux : chaque etape joue son verbe ----------------------------- */ .steps .step-card { display: flex; flex-direction: column; } .fx-demo { margin-top: auto; padding-top: 16px; } .fx-code { display: flex; align-items: center; font-family: var(--font-data); font-size: 11.5px; white-space: nowrap; overflow: hidden; color: var(--accent-strong); background: var(--subtle); box-shadow: var(--hair); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 35px; } .fx-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .fx-slots i { font-style: normal; font-family: var(--font-data); font-size: 10px; text-align: center; padding: 8px 0 7px; border-radius: 7px; box-shadow: var(--hair); color: var(--faint); background: var(--surface); transition: background .3s var(--ease), color .3s var(--ease); } .fx-slots i.est-ok { background: var(--accent); color: #fff; } [data-scene="flux"].is-live .fx-slots i.est-ok { animation: fxPose .4s var(--spring-vif, cubic-bezier(.16, 1, .3, 1)); } @keyframes fxPose { 45% { transform: scale(1.12); } } .fx-etat { min-height: 35px; align-items: center; font-size: 12px; color: var(--muted); } .fx-etat .m-check { display: none; } .fx-etat.est-ok { color: var(--ok); } .fx-etat.est-ok .m-spin { display: none; } .fx-etat.est-ok .m-check { display: inline-block; } /* --- c. Le prix : la jauge dit l'ecart, le compteur dit la fourchette ----- */ /* voir notes/refonte.notes.md §157 */ .prix-bench b span { display: inline; font: inherit; color: inherit; font-variant-numeric: tabular-nums; } .bench-jauge { display: block; margin-top: 14px; height: 5px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; } .bench-jauge b { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); } .bench-jauge.est-retour b { background: var(--ok); } .bench-jauge.est-retour { background: color-mix(in srgb, var(--ok) 12%, transparent); } [data-scene="bench"].is-live .bench-jauge b { animation: benchJauge 1.1s var(--ease) .45s forwards; } [data-scene="bench"].is-live > div:nth-child(2) .bench-jauge b { animation-delay: .61s; } [data-scene="bench"].is-live > div:nth-child(3) .bench-jauge b { animation-delay: .77s; } @keyframes benchJauge { to { transform: scaleX(1); } } /* --- d. Sans script et en mouvement reduit : l'etat final, immobile ------- */ .no-js .ag-bars i, .no-js .ag-jauge i, .no-js .bench-jauge b { transform: none; } .no-js .ag-choix, .no-js .ag-bilan { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ag-bars i, .ag-jauge i, .bench-jauge b { animation: none !important; transform: none; } .ag-choix, .ag-bilan { opacity: 1; transform: none; transition: none; } .fx-slots i.est-ok { animation: none !important; } } /* 158. L'IPHONE AU MIROIR DE LA PHOTO (2026-08-07) : voir notes/refonte.notes.md §158 */ /* --- e. La pose frontale -------------------------------------------------- */ .tel-scene .tel { transform: none; } .tel-onde { width: 242px; height: 498px; border-radius: 34px; transform: none; } @media (max-width: 1000px) { .tel-scene .tel { transform: none; } .tel-onde { transform: none; } } [data-scene].is-live .tel-scene .tel { animation: telSonne41 1.15s var(--e-sec) 2 both; } @keyframes telSonne41 { 0%, 100% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 8% { transform: rotateZ(-1.4deg) translate3d(-2px, 1px, 0); } 16% { transform: rotateZ(1.1deg) translate3d(2px, -1px, 0); } 24% { transform: rotateZ(-1.2deg) translate3d(-2px, 1px, 0); } 32% { transform: rotateZ(0deg) translate3d(0, 0, 0); } } [data-scene].is-live .tel-onde { animation: telOnde41 1.9s var(--e-sec) 2 both; } @keyframes telOnde41 { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.24); } } /* La respiration au repos perd sa rotation : un appareil de face respire de haut en bas, il ne pivote pas. */ .tel-stage { animation: telIdle41 7s ease-in-out infinite alternate; } @keyframes telIdle41 { from { transform: translateY(3px); } to { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .tel-stage { animation: none; } } /* --- a. Le corps : bezel epais uniforme, rayons concentriques ------------- */ .tel-scene .tel { width: 242px; height: 498px; border-radius: 34px; padding: 9px; border: 2.5px solid transparent; background: linear-gradient(#020409, #020409) padding-box, conic-gradient(from 0deg at 50% 50%, #eef2f8 0deg, #b7c0cd 52deg, #5d6674 108deg, #3a424e 180deg, #6a7382 244deg, #c9d1dc 300deg, #f5f8fc 334deg, #eef2f8 360deg) border-box; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), 0 1px 1px rgba(255, 255, 255, .14), 0 2px 5px rgba(6, 12, 24, .18), 0 14px 30px -12px rgba(6, 12, 24, .32), 0 48px 90px -32px rgba(6, 12, 24, .5); } .tel-screen { border-radius: 22.5px; padding: 46px 14px 20px; } /* --- b. L'ilot : une pilule large, avec une vraie camera ------------------ */ .tel-screen::before { top: 7px; width: 76px; height: 22px; border-radius: 11px; background: radial-gradient(circle 2px at 74% 50%, rgba(120, 150, 210, .55) 0%, transparent 100%), radial-gradient(circle 5px at 74% 50%, #3a4a66 0%, #1a2438 45%, #05080f 68%, #01030a 100%), #01030a; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .07); } /* La barre d'etat s'aligne sur le CENTRE de l'ilot (y = 18) et garde des marges laterales EGALES. */ .tel-heure { top: 11px; left: 26px; font-size: 13px; } .tel-sb { top: 12px; right: 26px; width: 46px; } .tel-accueil { width: 74px; height: 3.5px; bottom: 6px; } /* --- c. Les boutons DANS la tranche --------------------------------------- */ .tel-b { width: 4.5px; border-radius: 2.5px 0 0 2.5px; background: linear-gradient(180deg, #d6dde7 0%, #98a2b3 18%, #6b7688 55%, #99a3b4 86%, #cfd6e0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35), -1px 0 1px rgba(0, 0, 0, .25); } .tel-b-act { left: -2px; top: 104px; height: 18px; } .tel-b-v1 { left: -2px; top: 140px; height: 34px; } .tel-b-v2 { left: -2px; top: 182px; height: 34px; } .tel-b-pow { right: -2px; left: auto; top: 150px; height: 64px; border-radius: 0 2.5px 2.5px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35), 1px 0 1px rgba(0, 0, 0, .25); } /* --- d. Le mobile garde les memes proportions en 208 ---------------------- */ @media (max-width: 620px) { .tel-scene .tel { width: 208px; height: 428px; border-radius: 29px; padding: 8px; } .tel-onde { width: 208px; height: 428px; border-radius: 29px; } .tel-screen { border-radius: 18.5px; padding: 40px 12px 18px; } .tel-screen::before { width: 65px; height: 19px; border-radius: 9.5px; top: 6px; } .tel-heure { top: 9px; left: 22px; font-size: 12px; } .tel-sb { top: 10px; right: 22px; width: 42px; } .tel-accueil { width: 64px; } .tel-b-act { top: 90px; height: 16px; } .tel-b-v1 { top: 122px; height: 30px; } .tel-b-v2 { top: 158px; height: 30px; } .tel-b-pow { top: 130px; height: 56px; } } /* 159. LES BOUTONS, ETAT PAR ETAT (2026-08-07) : voir notes/refonte.notes.md §159 */ :root { --btn-ease: cubic-bezier(.4, 0, .2, 1); } /* La cadence, pour TOUTE la famille : reaction immediate, retour souple. */ .btn { transition: transform .16s var(--btn-ease), box-shadow .22s var(--btn-ease), background-color .18s var(--btn-ease); } .btn-ico { transition: transform .2s var(--btn-ease), background-color .18s var(--btn-ease); } /* voir notes/refonte.notes.md §160 */ .btn.primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 0 -1px 0 rgba(2, 20, 60, .42), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -14px 18px -14px rgba(2, 16, 52, .48), 0 3px 6px rgba(6, 30, 90, .26), 0 22px 42px -16px rgba(6, 100, 254, .74); } /* voir notes/refonte.notes.md §161 */ .btn.primary:hover .btn-lueur { animation: btnLueur .8s var(--btn-ease) both; } /* voir notes/refonte.notes.md §162 */ .btn.primary:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(2, 16, 52, .5), inset 0 -1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08); transition-duration: .06s; } /* voir notes/refonte.notes.md §163 */ @media (prefers-reduced-motion: reduce) { .btn.primary:hover .btn-lueur { animation: none; } .btn.primary:hover { transform: none; } } /* 164. LE JOURNAL D'ACTIVITE DU COMMUTATEUR (2026-08-07, backlog 8-9) : voir notes/refonte.notes.md §164 */ .demo-vie { margin-left: auto; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-data); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .demo-vie .m-caret { height: .9em; } .demo-vie + .demo-sub { margin-left: 14px; } @media (max-width: 900px) { .demo-vie { display: none; } } /* 165. LE TELEPHONE, GENERATION CONVERGENCE (2026-08-07, refonte... : voir notes/refonte.notes.md §165 */ .tel-scene .tel { width: 242px; height: 498px; border-radius: 35px; border: 3px solid transparent; padding: 7px; background: linear-gradient(#04050a, #04050a) padding-box, radial-gradient(58px 30px at 13% 1.2%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 62%) border-box, radial-gradient(44px 26px at 88% 1.4%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 60%) border-box, radial-gradient(40px 24px at 11% 98.8%, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%) border-box, linear-gradient(180deg, rgba(255, 255, 255, .38) 0px, rgba(255, 255, 255, .06) 8px, rgba(255, 255, 255, 0) 12px) border-box, linear-gradient(90deg, rgba(255, 255, 255, .22) 0px, rgba(255, 255, 255, 0) 9px) border-box, /* voir notes/refonte.notes.md §166 */ conic-gradient(from 0deg at 50% 50%, #565b64 0deg, #6e737c 42deg, #9aa0aa 78deg, #b4bac4 90deg, #858b95 104deg, #2e3238 148deg, #1a1d22 180deg, #2e3238 214deg, #aab0ba 258deg, #d2d7df 270deg, #a6acb6 284deg, #676c75 322deg, #565b64 360deg) border-box; /* voir notes/refonte.notes.md §167 */ box-shadow: 0 0 0 1px rgba(10, 12, 16, .5), inset 0 0 0 1px rgba(255, 255, 255, .09), 1px 2px 3px rgba(8, 12, 24, .22), 6px 20px 34px -16px rgba(8, 12, 24, .4), 14px 56px 90px -30px rgba(8, 12, 24, .5); } .tel-screen { border-radius: 25px; padding: 46px 14px 20px; } /* --- La pose : orientee, subtile - jamais droite, jamais la maquette ------ */ .tel-scene .tel { transform: rotateY(-7deg) rotateX(2.5deg) rotateZ(-.6deg); } .tel-onde { width: 242px; height: 498px; border-radius: 35px; transform: rotateY(-7deg) rotateX(2.5deg); } @media (max-width: 1000px) { .tel-scene .tel { transform: rotateY(-5deg) rotateX(2deg); } .tel-onde { transform: rotateY(-5deg) rotateX(2deg); } } /* La sonnerie garde la pose : la secousse vit en rotateZ et translation. */ [data-scene].is-live .tel-scene .tel { animation: telSonne44 1.15s var(--e-sec) 2 both; } @keyframes telSonne44 { 0%, 100% { transform: rotateY(-7deg) rotateX(2.5deg) rotateZ(-.6deg) translate3d(0, 0, 0); } 8% { transform: rotateY(-7deg) rotateX(2.5deg) rotateZ(-2deg) translate3d(-2px, 1px, 0); } 16% { transform: rotateY(-7deg) rotateX(2.5deg) rotateZ(.6deg) translate3d(2px, -1px, 0); } 24% { transform: rotateY(-7deg) rotateX(2.5deg) rotateZ(-1.8deg) translate3d(-2px, 1px, 0); } 32% { transform: rotateY(-7deg) rotateX(2.5deg) rotateZ(-.6deg) translate3d(0, 0, 0); } } [data-scene].is-live .tel-onde { animation: telOnde44 1.9s var(--e-sec) 2 both; } @keyframes telOnde44 { 0% { opacity: .5; transform: rotateY(-7deg) rotateX(2.5deg) scale(1); } 100% { opacity: 0; transform: rotateY(-7deg) rotateX(2.5deg) scale(1.24); } } /* --- La vie : entree jouee, flottement lent, reflet qui balaie ------------ */ .tel-stage { animation: none; } [data-scene].is-live .tel-stage { animation: telEntre .95s cubic-bezier(.16, 1, .3, 1) both, telFlotte 6.5s ease-in-out 1s infinite alternate; } @keyframes telEntre { from { opacity: 0; transform: translateY(30px) rotate(1.1deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } } @keyframes telFlotte { from { transform: translateY(0); } to { transform: translateY(-7px); } } /* voir notes/refonte.notes.md §168 */ [data-scene].is-live .tel::after { content: ''; position: absolute; inset: -3px; border-radius: 35px; padding: 3px; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .8) 50%, transparent 58%); background-size: 320% 320%; background-position: 140% 140%; -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; animation: telGlint 7s ease-in-out 1.6s infinite; } @keyframes telGlint { 0% { background-position: 140% 140%; } 20% { background-position: -40% -40%; } 100% { background-position: -40% -40%; } } /* --- La barre d'etat : plus petite, centree sur l'ilot, marges egales ----- */ .tel-heure { top: 12px; left: 22px; font-size: 11.5px; font-weight: 600; } .tel-sb { top: 13px; right: 18px; width: 40px; } /* --- L'ombre au sol suit l'orientation ------------------------------------ */ .tel-stage::after { left: 20%; right: 8%; } /* --- Mobile : memes couches, gabarit 208 ---------------------------------- */ @media (max-width: 620px) { .tel-scene .tel { width: 208px; height: 428px; border-radius: 30px; padding: 6px; } .tel-onde { width: 208px; height: 428px; border-radius: 30px; } .tel-screen { border-radius: 21px; padding: 40px 12px 18px; } } @media (prefers-reduced-motion: reduce) { [data-scene].is-live .tel-stage, [data-scene].is-live .tel::after { animation: none !important; } } /* voir notes/refonte.notes.md §169 */ .tel-screen::before { content: none; } .tel-ilot { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 22px; border-radius: 11px; background: #01030a; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 6px 14px -4px rgba(0, 0, 0, .65); overflow: hidden; z-index: 6; transition: width .42s cubic-bezier(.34, 1.3, .64, 1), height .42s cubic-bezier(.34, 1.3, .64, 1), border-radius .42s cubic-bezier(.34, 1.3, .64, 1); } /* La camera vit a droite DANS la pilule et ne bouge pas pendant le morph. */ .tel-ilot-cam { position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%); border-radius: 50%; /* La lentille au bleu profond du modele 3D (Camera_Pixel #2D2E8A). */ background: radial-gradient(circle at 38% 32%, #4a4dc0 0%, #2d2e8a 40%, #10123a 75%, #05060f 100%); box-shadow: inset 0 0 1px rgba(255, 255, 255, .3); } .tel-ilot-contenu { display: inline-flex; align-items: center; gap: 6px; padding-right: 12px; opacity: 0; transform: scale(.72); transition: opacity .22s ease, transform .3s cubic-bezier(.34, 1.3, .64, 1); white-space: nowrap; } .tel-ilot-contenu img { display: block; border-radius: 3.5px; } .tel-ilot-contenu b { font-size: 10.5px; font-weight: 600; color: #fff; } .tel-ilot.est-etendu { width: 152px; height: 30px; border-radius: 15px; } /* Le contenu n'apparait qu'une fois la pilule presque deployee. */ .tel-ilot.est-etendu .tel-ilot-contenu { opacity: 1; transform: scale(1); transition-delay: .15s, .15s; } /* voir notes/refonte.notes.md §170 */ .tel-heure, .tel-sb { transition: opacity .25s ease; } .tel-ilot.est-etendu ~ .tel-heure, .tel-ilot.est-etendu ~ .tel-sb { opacity: 0; } @media (max-width: 620px) { .tel-ilot { width: 65px; height: 19px; border-radius: 9.5px; top: 6px; } .tel-ilot.est-etendu { width: 146px; height: 27px; border-radius: 13.5px; } .tel-ilot-cam { width: 8px; height: 8px; } } @media (prefers-reduced-motion: reduce) { .tel-ilot, .tel-ilot-contenu { transition: none !important; } } /* 171. LE TELEPHONE, SOURCE DE VERITE : LE MODELE 3D (2026-08-07) : voir notes/refonte.notes.md §171 */ .tel-scene .tel { width: 242px; height: 506px; border-radius: 46px; border: 3px solid transparent; padding: 5.5px; background: linear-gradient(#050607, #050607) padding-box, /* glints de coins, doux */ radial-gradient(70px 40px at 14% 1%, rgba(255, 253, 248, .5) 0%, rgba(255, 253, 248, 0) 70%) border-box, radial-gradient(54px 32px at 87% 1.5%, rgba(255, 253, 248, .3) 0%, rgba(255, 253, 248, 0) 68%) border-box, /* respiration laterale douce */ linear-gradient(90deg, rgba(255, 250, 242, .16) 0%, rgba(255, 250, 242, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(255, 250, 242, .1) 100%) border-box, /* la base : titane CHAUD du modele, variations longues et calmes */ conic-gradient(from 0deg at 50% 50%, #7d786e 0deg, #6a655c 50deg, #8e897e 90deg, #5c584f 130deg, #3a3731 175deg, #33302b 185deg, #4a463f 225deg, #9b958a 270deg, #6e6960 315deg, #7d786e 360deg) border-box; box-shadow: 0 0 0 .5px rgba(40, 37, 32, .4), 0 0 2px rgba(25, 22, 18, .22), inset 0 0 0 1px rgba(255, 253, 248, .07), 1px 2px 3px rgba(18, 16, 13, .18), 6px 18px 30px -14px rgba(18, 16, 13, .3), 12px 48px 80px -28px rgba(18, 16, 13, .42); } .tel-screen { border-radius: 37px; padding: 44px 13px 18px; } .tel-onde { width: 242px; height: 506px; border-radius: 46px; } [data-scene].is-live .tel::after { border-radius: 46px; } /* La barre d'etat recule des coins tres arrondis. */ .tel-heure { left: 25px; } .tel-sb { right: 21px; } /* Les boutons de tranche suivent le nouveau gabarit (506 de haut). */ .tel-b-act { top: 106px; height: 18px; } .tel-b-v1 { top: 148px; height: 34px; } .tel-b-v2 { top: 190px; height: 34px; } .tel-b-pow { top: 154px; height: 64px; } @media (max-width: 620px) { .tel-scene .tel { width: 208px; height: 435px; border-radius: 40px; padding: 4.5px; } .tel-onde { width: 208px; height: 435px; border-radius: 40px; } [data-scene].is-live .tel::after { border-radius: 40px; } .tel-screen { border-radius: 32px; padding: 38px 11px 16px; } } /* 172. L'ILOT AU ZOOM : LENTILLE VRAIE, CAPSULE EXACTE, VITRE... : voir notes/refonte.notes.md §172 */ .tel-ilot { border-radius: 999px; background: #010104; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .065); transition: width .42s cubic-bezier(.34, 1.3, .64, 1), height .42s cubic-bezier(.34, 1.3, .64, 1); } .tel-ilot.est-etendu { border-radius: 999px; } .tel-ilot-cam { width: 12.5px; height: 12.5px; right: 4.75px; background: /* micro point speculaire : un POINT net, pas une nappe */ radial-gradient(circle at 32% 27%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .3) 6%, rgba(255, 255, 255, 0) 11%), /* voir notes/refonte.notes.md §173 */ radial-gradient(circle at 45% 42%, rgba(45, 46, 138, .75) 0%, rgba(40, 41, 122, .6) 18%, rgba(22, 23, 74, .3) 34%, rgba(0, 0, 0, 0) 48%), /* disque quasi noir, barillet peripherique a peine plus clair */ radial-gradient(circle at 50% 50%, #040406 0%, #050508 62%, #0a0a0f 84%, #191920 91%, #14141a 96%, #08080c 100%); box-shadow: none; } /* La dalle concentrique exacte. */ .tel-screen { border-radius: 37.5px; } @media (max-width: 620px) { .tel-ilot { border-radius: 999px; } .tel-ilot.est-etendu { border-radius: 999px; } .tel-ilot-cam { width: 11px; height: 11px; right: 4px; } .tel-screen { border-radius: 32.5px; } } /* 174. LES RESTES DU FORMULAIRE (2026-08-08) : voir notes/refonte.notes.md §174 */ /* 175. Le cadre de la video produit vivait ici. Video retiree le 2026-08-13 (voir index.html au-dessus de .feats et LOOP-QUALITE.md) : les six regles .prod-film / .film-cadre / .film-cap sont parties avec elle. */ /* voir notes/refonte.notes.md §176 */ .q-recap { margin: 0 0 14px; padding: 4px 16px; border-radius: var(--radius-md); background: var(--subtle); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 8%, transparent); } .q-recap-l { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; } .q-recap-l + .q-recap-l { box-shadow: 0 -1px 0 0 var(--line); } .q-recap-l b { flex: 0 0 92px; font-family: var(--font-data); font-weight: 600; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .q-recap-l span { font-size: 13.5px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; } @media (prefers-color-scheme: dark) { .q-recap { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .10); } } @media (max-width: 760px) { .q-recap-l { flex-direction: column; gap: 2px; padding: 8px 0; } .q-recap-l b { flex-basis: auto; } } /* voir notes/refonte.notes.md §177 */ .cal-panne { min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 24px; } .cal-panne b { font-size: 15.5px; color: var(--text); } .cal-panne > span { font-size: 13.5px; color: var(--muted); max-width: 380px; line-height: 1.5; } .cal-panne .cal-retry { margin-top: 12px; } .cal-mail { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; } .cal-mail:hover { color: var(--text); } /* 178. LE COIN CONTINU (SQUIRCLE) DU TELEPHONE (2026-08-08) : voir notes/refonte.notes.md §178 */ .tel-scene .tel { border: 0; padding: 0; background: none; box-shadow: none; filter: drop-shadow(0 0 .6px rgba(40, 37, 32, .5)) drop-shadow(0 0 2px rgba(25, 22, 18, .2)) drop-shadow(1px 2px 3px rgba(18, 16, 13, .18)) drop-shadow(5px 15px 13px rgba(18, 16, 13, .24)) drop-shadow(9px 34px 34px rgba(18, 16, 13, .3)); } /* voir notes/refonte.notes.md §179 */ .tel-scene .tel-corps { position: absolute; inset: 0; border: 3px solid transparent; padding: 5.5px; background: linear-gradient(#050607, #050607) padding-box, radial-gradient(70px 40px at 14% 1%, rgba(255, 253, 248, .5) 0%, rgba(255, 253, 248, 0) 70%) border-box, radial-gradient(54px 32px at 87% 1.5%, rgba(255, 253, 248, .3) 0%, rgba(255, 253, 248, 0) 68%) border-box, linear-gradient(90deg, rgba(255, 250, 242, .16) 0%, rgba(255, 250, 242, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(255, 250, 242, .1) 100%) border-box, conic-gradient(from 0deg at 50% 50%, #7d786e 0deg, #6a655c 50deg, #8e897e 90deg, #5c584f 130deg, #3a3731 175deg, #33302b 185deg, #4a463f 225deg, #9b958a 270deg, #6e6960 315deg, #7d786e 360deg) border-box; box-shadow: none; clip-path: path('M 87.12 0 L 154.88 0 C 162.96 0 178.106 -0.031 186.185 0.112 C 195.919 0.284 207.9 0.716 217.186 3.642 C 228.239 7.126 234.874 13.761 238.358 24.814 C 241.284 34.099 241.716 46.081 241.888 55.815 C 242.031 63.899 242 79.036 242 87.12 L 242 418.88 C 242 426.964 242.031 442.101 241.888 450.185 C 241.716 459.919 241.284 471.901 238.358 481.186 C 234.874 492.239 228.239 498.874 217.186 502.358 C 207.9 505.284 195.919 505.716 186.185 505.888 C 178.106 506.031 162.96 506 154.88 506 L 87.12 506 C 79.04 506 63.894 506.031 55.815 505.888 C 46.081 505.716 34.1 505.284 24.814 502.358 C 13.761 498.874 7.126 492.239 3.642 481.186 C 0.716 471.901 0.284 459.919 0.112 450.185 C -0.031 442.101 0 426.964 0 418.88 L 0 87.12 C 0 79.036 -0.031 63.899 0.112 55.815 C 0.284 46.081 0.716 34.099 3.642 24.814 C 7.126 13.761 13.761 7.126 24.814 3.642 C 34.1 0.716 46.081 0.284 55.815 0.112 C 63.894 -0.031 79.04 0 87.12 0 Z'); } .tel-scene .tel-screen { box-shadow: none; clip-path: path('M 78.62 0 L 146.38 0 C 153.076 0 168.354 -0.014 175.049 0.04 C 183.617 0.11 195.257 0.228 203.564 2.326 C 214.219 5.017 219.983 10.781 222.674 21.436 C 224.772 29.742 224.89 41.384 224.96 49.951 C 225.014 56.643 225 71.928 225 78.62 L 225 410.38 C 225 417.072 225.014 432.357 224.96 439.049 C 224.89 447.616 224.772 459.258 222.674 467.564 C 219.983 478.219 214.219 483.983 203.564 486.674 C 195.257 488.772 183.617 488.89 175.049 488.96 C 168.354 489.014 153.076 489 146.38 489 L 78.62 489 C 71.924 489 56.646 489.014 49.951 488.96 C 41.383 488.89 29.743 488.772 21.436 486.674 C 10.781 483.983 5.017 478.219 2.326 467.564 C 0.228 459.258 0.11 447.616 0.04 439.049 C -0.014 432.357 0 417.072 0 410.38 L 0 78.62 C 0 71.928 -0.014 56.643 0.04 49.951 C 0.11 41.384 0.228 29.742 2.326 21.436 C 5.017 10.781 10.781 5.017 21.436 2.326 C 29.743 0.228 41.383 0.11 49.951 0.04 C 56.646 -0.014 71.924 0 78.62 0 Z'); } /* voir notes/refonte.notes.md §180 */ .tel-scene .tel-corps::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 253, 248, .075); clip-path: path(evenodd, 'M 87.12 0 L 154.88 0 C 162.96 0 178.106 -0.031 186.185 0.112 C 195.919 0.284 207.9 0.716 217.186 3.642 C 228.239 7.126 234.874 13.761 238.358 24.814 C 241.284 34.099 241.716 46.081 241.888 55.815 C 242.031 63.899 242 79.036 242 87.12 L 242 418.88 C 242 426.964 242.031 442.101 241.888 450.185 C 241.716 459.919 241.284 471.901 238.358 481.186 C 234.874 492.239 228.239 498.874 217.186 502.358 C 207.9 505.284 195.919 505.716 186.185 505.888 C 178.106 506.031 162.96 506 154.88 506 L 87.12 506 C 79.04 506 63.894 506.031 55.815 505.888 C 46.081 505.716 34.1 505.284 24.814 502.358 C 13.761 498.874 7.126 492.239 3.642 481.186 C 0.716 471.901 0.284 459.919 0.112 450.185 C -0.031 442.101 0 426.964 0 418.88 L 0 87.12 C 0 79.036 -0.031 63.899 0.112 55.815 C 0.284 46.081 0.716 34.099 3.642 24.814 C 7.126 13.761 13.761 7.126 24.814 3.642 C 34.1 0.716 46.081 0.284 55.815 0.112 C 63.894 -0.031 79.04 0 87.12 0 Z M 87.12 1 L 154.88 1 C 162.795 1 177.965 0.971 185.879 1.1 C 195.481 1.257 207.42 1.644 216.597 4.47 C 227.604 7.859 234.141 14.396 237.53 25.403 C 240.356 34.58 240.743 46.52 240.9 56.121 C 241.029 64.039 241 79.2 241 87.12 L 241 418.88 C 241 426.8 241.029 441.961 240.9 449.879 C 240.743 459.48 240.356 471.42 237.53 480.597 C 234.141 491.604 227.604 498.141 216.597 501.53 C 207.42 504.356 195.481 504.743 185.879 504.9 C 177.965 505.029 162.795 505 154.88 505 L 87.12 505 C 79.205 505 64.035 505.029 56.121 504.9 C 46.519 504.743 34.58 504.356 25.403 501.53 C 14.396 498.141 7.859 491.604 4.47 480.597 C 1.644 471.42 1.257 459.48 1.1 449.879 C 0.971 441.961 1 426.8 1 418.88 L 1 87.12 C 1 79.2 0.971 64.039 1.1 56.121 C 1.257 46.52 1.644 34.58 4.47 25.403 C 7.859 14.396 14.396 7.859 25.403 4.47 C 34.58 1.644 46.519 1.257 56.121 1.1 C 64.035 0.971 79.205 1 87.12 1 Z M 87.12 8.5 L 154.88 8.5 C 161.576 8.5 176.854 8.486 183.549 8.54 C 192.117 8.61 203.757 8.728 212.064 10.826 C 222.719 13.517 228.483 19.281 231.174 29.936 C 233.272 38.242 233.39 49.884 233.46 58.451 C 233.514 65.143 233.5 80.428 233.5 87.12 L 233.5 418.88 C 233.5 425.572 233.514 440.857 233.46 447.549 C 233.39 456.116 233.272 467.758 231.174 476.064 C 228.483 486.719 222.719 492.483 212.064 495.174 C 203.757 497.272 192.117 497.39 183.549 497.46 C 176.854 497.514 161.576 497.5 154.88 497.5 L 87.12 497.5 C 80.424 497.5 65.146 497.514 58.451 497.46 C 49.883 497.39 38.243 497.272 29.936 495.174 C 19.281 492.483 13.517 486.719 10.826 476.064 C 8.728 467.758 8.61 456.116 8.54 447.549 C 8.486 440.857 8.5 425.572 8.5 418.88 L 8.5 87.12 C 8.5 80.428 8.486 65.143 8.54 58.451 C 8.61 49.884 8.728 38.242 10.826 29.936 C 13.517 19.281 19.281 13.517 29.936 10.826 C 38.243 8.728 49.883 8.61 58.451 8.54 C 65.146 8.486 80.424 8.5 87.12 8.5 Z M 87.12 9.5 L 154.88 9.5 C 161.398 9.5 176.726 9.488 183.244 9.534 C 191.661 9.594 203.289 9.68 211.468 11.672 C 222.092 14.259 227.741 19.908 230.328 30.532 C 232.32 38.711 232.406 50.339 232.466 58.757 C 232.512 65.271 232.5 80.605 232.5 87.12 L 232.5 418.88 C 232.5 425.395 232.512 440.729 232.466 447.243 C 232.406 455.661 232.32 467.289 230.328 475.468 C 227.741 486.092 222.092 491.741 211.468 494.328 C 203.289 496.32 191.661 496.406 183.244 496.466 C 176.726 496.512 161.398 496.5 154.88 496.5 L 87.12 496.5 C 80.602 496.5 65.274 496.512 58.756 496.466 C 50.339 496.406 38.711 496.32 30.532 494.328 C 19.908 491.741 14.259 486.092 11.672 475.468 C 9.68 467.289 9.594 455.661 9.534 447.243 C 9.488 440.729 9.5 425.395 9.5 418.88 L 9.5 87.12 C 9.5 80.605 9.488 65.271 9.534 58.757 C 9.594 50.339 9.68 38.711 11.672 30.532 C 14.259 19.908 19.908 14.259 30.532 11.672 C 38.711 9.68 50.339 9.594 58.756 9.534 C 65.274 9.488 80.602 9.5 87.12 9.5 Z'); } /* voir notes/refonte.notes.md §181 */ [data-scene].is-live .tel::after { content: none; } [data-scene].is-live .tel-corps::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .8) 50%, transparent 58%); background-size: 320% 320%; background-position: 140% 140%; clip-path: path(evenodd, 'M 87.12 0 L 154.88 0 C 162.96 0 178.106 -0.031 186.185 0.112 C 195.919 0.284 207.9 0.716 217.186 3.642 C 228.239 7.126 234.874 13.761 238.358 24.814 C 241.284 34.099 241.716 46.081 241.888 55.815 C 242.031 63.899 242 79.036 242 87.12 L 242 418.88 C 242 426.964 242.031 442.101 241.888 450.185 C 241.716 459.919 241.284 471.901 238.358 481.186 C 234.874 492.239 228.239 498.874 217.186 502.358 C 207.9 505.284 195.919 505.716 186.185 505.888 C 178.106 506.031 162.96 506 154.88 506 L 87.12 506 C 79.04 506 63.894 506.031 55.815 505.888 C 46.081 505.716 34.1 505.284 24.814 502.358 C 13.761 498.874 7.126 492.239 3.642 481.186 C 0.716 471.901 0.284 459.919 0.112 450.185 C -0.031 442.101 0 426.964 0 418.88 L 0 87.12 C 0 79.036 -0.031 63.899 0.112 55.815 C 0.284 46.081 0.716 34.099 3.642 24.814 C 7.126 13.761 13.761 7.126 24.814 3.642 C 34.1 0.716 46.081 0.284 55.815 0.112 C 63.894 -0.031 79.04 0 87.12 0 Z M 87.12 3 L 154.88 3 C 162.483 3 177.651 2.975 185.254 3.082 C 194.591 3.213 206.425 3.524 215.381 6.165 C 226.279 9.379 232.621 15.721 235.835 26.619 C 238.476 35.575 238.787 47.41 238.918 56.746 C 239.025 64.354 239 79.512 239 87.12 L 239 418.88 C 239 426.488 239.025 441.646 238.918 449.254 C 238.787 458.59 238.476 470.425 235.835 479.381 C 232.621 490.279 226.279 496.621 215.381 499.835 C 206.425 502.476 194.591 502.787 185.254 502.918 C 177.651 503.025 162.483 503 154.88 503 L 87.12 503 C 79.517 503 64.349 503.025 56.746 502.918 C 47.409 502.787 35.575 502.476 26.619 499.835 C 15.721 496.621 9.379 490.279 6.165 479.381 C 3.524 470.425 3.213 458.59 3.082 449.254 C 2.975 441.646 3 426.488 3 418.88 L 3 87.12 C 3 79.512 2.975 64.354 3.082 56.746 C 3.213 47.41 3.524 35.575 6.165 26.619 C 9.379 15.721 15.721 9.379 26.619 6.165 C 35.575 3.524 47.409 3.213 56.746 3.082 C 64.349 2.975 79.517 3 87.12 3 Z'); animation: telGlint 7s ease-in-out 1.6s infinite; } /* voir notes/refonte.notes.md §182 */ .tel-onde { box-shadow: none; border: 1.5px solid rgba(30, 116, 254, .5); clip-path: path('M 87.12 0 L 154.88 0 C 162.96 0 178.106 -0.031 186.185 0.112 C 195.919 0.284 207.9 0.716 217.186 3.642 C 228.239 7.126 234.874 13.761 238.358 24.814 C 241.284 34.099 241.716 46.081 241.888 55.815 C 242.031 63.899 242 79.036 242 87.12 L 242 418.88 C 242 426.964 242.031 442.101 241.888 450.185 C 241.716 459.919 241.284 471.901 238.358 481.186 C 234.874 492.239 228.239 498.874 217.186 502.358 C 207.9 505.284 195.919 505.716 186.185 505.888 C 178.106 506.031 162.96 506 154.88 506 L 87.12 506 C 79.04 506 63.894 506.031 55.815 505.888 C 46.081 505.716 34.1 505.284 24.814 502.358 C 13.761 498.874 7.126 492.239 3.642 481.186 C 0.716 471.901 0.284 459.919 0.112 450.185 C -0.031 442.101 0 426.964 0 418.88 L 0 87.12 C 0 79.036 -0.031 63.899 0.112 55.815 C 0.284 46.081 0.716 34.099 3.642 24.814 C 7.126 13.761 13.761 7.126 24.814 3.642 C 34.1 0.716 46.081 0.284 55.815 0.112 C 63.894 -0.031 79.04 0 87.12 0 Z'); } @media (max-width: 620px) { .tel-scene .tel-corps { padding: 4.5px; clip-path: path('M 74.88 0 L 133.12 0 C 140.065 0 153.083 -0.027 160.026 0.096 C 168.394 0.244 178.691 0.615 186.673 3.131 C 196.172 6.125 201.875 11.828 204.869 21.327 C 207.385 29.308 207.756 39.607 207.904 47.974 C 208.027 54.921 208 67.931 208 74.88 L 208 360.12 C 208 367.069 208.027 380.079 207.904 387.026 C 207.756 395.393 207.385 405.692 204.869 413.673 C 201.875 423.172 196.172 428.875 186.673 431.869 C 178.691 434.385 168.394 434.756 160.026 434.904 C 153.083 435.027 140.065 435 133.12 435 L 74.88 435 C 67.935 435 54.917 435.027 47.974 434.904 C 39.606 434.756 29.309 434.385 21.327 431.869 C 11.828 428.875 6.125 423.172 3.131 413.673 C 0.615 405.692 0.244 395.393 0.096 387.026 C -0.027 380.079 0 367.069 0 360.12 L 0 74.88 C 0 67.931 -0.027 54.921 0.096 47.974 C 0.244 39.607 0.615 29.308 3.131 21.327 C 6.125 11.828 11.828 6.125 21.327 3.131 C 29.309 0.615 39.606 0.244 47.974 0.096 C 54.917 -0.027 67.935 0 74.88 0 Z'); } .tel-scene .tel-screen { clip-path: path('M 67.38 0 L 125.62 0 C 131.347 0 144.472 -0.012 150.198 0.034 C 157.536 0.092 167.529 0.189 174.646 1.977 C 183.791 4.275 188.726 9.209 191.023 18.355 C 192.81 25.471 192.908 35.465 192.966 42.802 C 193.012 48.526 193 61.656 193 67.38 L 193 352.62 C 193 358.344 193.012 371.474 192.966 377.198 C 192.908 384.535 192.81 394.529 191.023 401.645 C 188.726 410.791 183.791 415.725 174.646 418.023 C 167.529 419.811 157.536 419.908 150.198 419.966 C 144.472 420.012 131.347 420 125.62 420 L 67.38 420 C 61.653 420 48.528 420.012 42.802 419.966 C 35.464 419.908 25.471 419.811 18.354 418.023 C 9.209 415.725 4.274 410.791 1.977 401.645 C 0.19 394.529 0.092 384.535 0.034 377.198 C -0.012 371.474 0 358.344 0 352.62 L 0 67.38 C 0 61.656 -0.012 48.526 0.034 42.802 C 0.092 35.465 0.19 25.471 1.977 18.355 C 4.274 9.209 9.209 4.275 18.354 1.977 C 25.471 0.189 35.464 0.092 42.802 0.034 C 48.528 -0.012 61.653 0 67.38 0 Z'); } .tel-scene .tel-corps::before { clip-path: path(evenodd, 'M 74.88 0 L 133.12 0 C 140.065 0 153.083 -0.027 160.026 0.096 C 168.394 0.244 178.691 0.615 186.673 3.131 C 196.172 6.125 201.875 11.828 204.869 21.327 C 207.385 29.308 207.756 39.607 207.904 47.974 C 208.027 54.921 208 67.931 208 74.88 L 208 360.12 C 208 367.069 208.027 380.079 207.904 387.026 C 207.756 395.393 207.385 405.692 204.869 413.673 C 201.875 423.172 196.172 428.875 186.673 431.869 C 178.691 434.385 168.394 434.756 160.026 434.904 C 153.083 435.027 140.065 435 133.12 435 L 74.88 435 C 67.935 435 54.917 435.027 47.974 434.904 C 39.606 434.756 29.309 434.385 21.327 431.869 C 11.828 428.875 6.125 423.172 3.131 413.673 C 0.615 405.692 0.244 395.393 0.096 387.026 C -0.027 380.079 0 367.069 0 360.12 L 0 74.88 C 0 67.931 -0.027 54.921 0.096 47.974 C 0.244 39.607 0.615 29.308 3.131 21.327 C 6.125 11.828 11.828 6.125 21.327 3.131 C 29.309 0.615 39.606 0.244 47.974 0.096 C 54.917 -0.027 67.935 0 74.88 0 Z M 74.88 1 L 133.12 1 C 139.903 1 152.936 0.975 159.719 1.085 C 167.953 1.218 178.205 1.546 186.078 3.964 C 195.529 6.866 201.134 12.471 204.036 21.922 C 206.454 29.795 206.782 40.047 206.915 48.281 C 207.025 55.067 207 68.093 207 74.88 L 207 360.12 C 207 366.907 207.025 379.933 206.915 386.719 C 206.782 394.953 206.454 405.205 204.036 413.078 C 201.134 422.529 195.529 428.134 186.078 431.036 C 178.205 433.454 167.953 433.782 159.719 433.915 C 152.936 434.025 139.903 434 133.12 434 L 74.88 434 C 68.097 434 55.064 434.025 48.281 433.915 C 40.047 433.782 29.795 433.454 21.922 431.036 C 12.471 428.134 6.866 422.529 3.964 413.078 C 1.546 405.205 1.218 394.953 1.085 386.719 C 0.975 379.933 1 366.907 1 360.12 L 1 74.88 C 1 68.093 0.975 55.067 1.085 48.281 C 1.218 40.047 1.546 29.795 3.964 21.922 C 6.866 12.471 12.471 6.866 21.922 3.964 C 29.795 1.546 40.047 1.218 48.281 1.085 C 55.064 0.975 68.097 1 74.88 1 Z M 74.88 7.5 L 133.12 7.5 C 138.847 7.5 151.972 7.488 157.698 7.534 C 165.036 7.592 175.029 7.689 182.146 9.477 C 191.291 11.775 196.226 16.709 198.523 25.855 C 200.31 32.971 200.408 42.965 200.466 50.302 C 200.512 56.026 200.5 69.156 200.5 74.88 L 200.5 360.12 C 200.5 365.844 200.512 378.974 200.466 384.698 C 200.408 392.035 200.31 402.029 198.523 409.145 C 196.226 418.291 191.291 423.225 182.146 425.523 C 175.029 427.311 165.036 427.408 157.698 427.466 C 151.972 427.512 138.847 427.5 133.12 427.5 L 74.88 427.5 C 69.153 427.5 56.028 427.512 50.302 427.466 C 42.964 427.408 32.971 427.311 25.854 425.523 C 16.709 423.225 11.774 418.291 9.477 409.145 C 7.69 402.029 7.592 392.035 7.534 384.698 C 7.488 378.974 7.5 365.844 7.5 360.12 L 7.5 74.88 C 7.5 69.156 7.488 56.026 7.534 50.302 C 7.592 42.965 7.69 32.971 9.477 25.855 C 11.774 16.709 16.709 11.775 25.854 9.477 C 32.971 7.689 42.964 7.592 50.302 7.534 C 56.028 7.488 69.153 7.5 74.88 7.5 Z M 74.88 8.5 L 133.12 8.5 C 138.675 8.5 151.833 8.49 157.388 8.528 C 164.578 8.578 174.551 8.645 181.54 10.332 C 190.648 12.53 195.47 17.352 197.668 26.46 C 199.355 33.449 199.422 43.422 199.472 50.612 C 199.51 56.164 199.5 69.328 199.5 74.88 L 199.5 360.12 C 199.5 365.672 199.51 378.836 199.472 384.388 C 199.422 391.578 199.355 401.551 197.668 408.54 C 195.47 417.648 190.648 422.47 181.54 424.668 C 174.551 426.355 164.578 426.422 157.388 426.472 C 151.833 426.51 138.675 426.5 133.12 426.5 L 74.88 426.5 C 69.325 426.5 56.167 426.51 50.612 426.472 C 43.422 426.422 33.449 426.355 26.46 424.668 C 17.352 422.47 12.53 417.648 10.332 408.54 C 8.645 401.551 8.578 391.578 8.528 384.388 C 8.49 378.836 8.5 365.672 8.5 360.12 L 8.5 74.88 C 8.5 69.328 8.49 56.164 8.528 50.612 C 8.578 43.422 8.645 33.449 10.332 26.46 C 12.53 17.352 17.352 12.53 26.46 10.332 C 33.449 8.645 43.422 8.578 50.612 8.528 C 56.167 8.49 69.325 8.5 74.88 8.5 Z'); } [data-scene].is-live .tel-corps::after { clip-path: path(evenodd, 'M 74.88 0 L 133.12 0 C 140.065 0 153.083 -0.027 160.026 0.096 C 168.394 0.244 178.691 0.615 186.673 3.131 C 196.172 6.125 201.875 11.828 204.869 21.327 C 207.385 29.308 207.756 39.607 207.904 47.974 C 208.027 54.921 208 67.931 208 74.88 L 208 360.12 C 208 367.069 208.027 380.079 207.904 387.026 C 207.756 395.393 207.385 405.692 204.869 413.673 C 201.875 423.172 196.172 428.875 186.673 431.869 C 178.691 434.385 168.394 434.756 160.026 434.904 C 153.083 435.027 140.065 435 133.12 435 L 74.88 435 C 67.935 435 54.917 435.027 47.974 434.904 C 39.606 434.756 29.309 434.385 21.327 431.869 C 11.828 428.875 6.125 423.172 3.131 413.673 C 0.615 405.692 0.244 395.393 0.096 387.026 C -0.027 380.079 0 367.069 0 360.12 L 0 74.88 C 0 67.931 -0.027 54.921 0.096 47.974 C 0.244 39.607 0.615 29.308 3.131 21.327 C 6.125 11.828 11.828 6.125 21.327 3.131 C 29.309 0.615 39.606 0.244 47.974 0.096 C 54.917 -0.027 67.935 0 74.88 0 Z M 74.88 3 L 133.12 3 C 139.59 3 152.624 2.98 159.093 3.067 C 167.063 3.174 177.211 3.427 184.862 5.659 C 194.205 8.385 199.615 13.795 202.341 23.138 C 204.573 30.788 204.826 40.938 204.933 48.907 C 205.021 55.38 205 68.406 205 74.88 L 205 360.12 C 205 366.594 205.021 379.62 204.933 386.093 C 204.826 394.062 204.573 404.212 202.341 411.862 C 199.615 421.205 194.205 426.615 184.862 429.341 C 177.211 431.573 167.063 431.826 159.093 431.933 C 152.624 432.02 139.59 432 133.12 432 L 74.88 432 C 68.41 432 55.376 432.02 48.907 431.933 C 40.937 431.826 30.789 431.573 23.138 429.341 C 13.795 426.615 8.385 421.205 5.659 411.862 C 3.427 404.212 3.174 394.062 3.067 386.093 C 2.979 379.62 3 366.594 3 360.12 L 3 74.88 C 3 68.406 2.979 55.38 3.067 48.907 C 3.174 40.938 3.427 30.788 5.659 23.138 C 8.385 13.795 13.795 8.385 23.138 5.659 C 30.789 3.427 40.937 3.174 48.907 3.067 C 55.376 2.98 68.41 3 74.88 3 Z'); } .tel-onde { clip-path: path('M 74.88 0 L 133.12 0 C 140.065 0 153.083 -0.027 160.026 0.096 C 168.394 0.244 178.691 0.615 186.673 3.131 C 196.172 6.125 201.875 11.828 204.869 21.327 C 207.385 29.308 207.756 39.607 207.904 47.974 C 208.027 54.921 208 67.931 208 74.88 L 208 360.12 C 208 367.069 208.027 380.079 207.904 387.026 C 207.756 395.393 207.385 405.692 204.869 413.673 C 201.875 423.172 196.172 428.875 186.673 431.869 C 178.691 434.385 168.394 434.756 160.026 434.904 C 153.083 435.027 140.065 435 133.12 435 L 74.88 435 C 67.935 435 54.917 435.027 47.974 434.904 C 39.606 434.756 29.309 434.385 21.327 431.869 C 11.828 428.875 6.125 423.172 3.131 413.673 C 0.615 405.692 0.244 395.393 0.096 387.026 C -0.027 380.079 0 367.069 0 360.12 L 0 74.88 C 0 67.931 -0.027 54.921 0.096 47.974 C 0.244 39.607 0.615 29.308 3.131 21.327 C 6.125 11.828 11.828 6.125 21.327 3.131 C 29.309 0.615 39.606 0.244 47.974 0.096 C 54.917 -0.027 67.935 0 74.88 0 Z'); } /* voir notes/refonte.notes.md §183 */ .tel-scene .tel { filter: drop-shadow(0 0 .6px rgba(40, 37, 32, .5)) drop-shadow(1px 2px 3px rgba(18, 16, 13, .18)) drop-shadow(6px 22px 24px rgba(18, 16, 13, .3)); } } @media (prefers-reduced-motion: reduce) { [data-scene].is-live .tel-corps::after { animation: none; } } /* 184. LA PASSE MOBILE (2026-08-08) : voir notes/refonte.notes.md §184 */ @media (max-width: 760px) { /* 1b. la nappe du telephone cesse de pousser la page */ .tel-scene::before { inset: -8% 0; } /* 2. les cibles tactiles */ .foot-col ul { gap: 0; } .foot-col a { display: inline-flex; align-items: center; min-height: 44px; } .accuse-note a { display: inline-flex; align-items: center; min-height: 44px; } .nav .btn, .btn.primary, .btn.lg { min-height: 44px; } /* voir notes/refonte.notes.md §185 */ .calc-field input[type="range"] { height: 44px; } /* 3. le texte de page a 12,5 px minimum */ .eyebrow, .fine, .prix-zero { font-size: 12.5px; } .chrono-embed .chrono-code, .chrono-code, .chrono-l b { font-size: 12px; } .live-txt { font-size: 12px; } .qa-num { font-size: 12px; } /* les maquettes : plancher a 10 px (elles etaient a 8,5 / 9 / 9,5) */ .fd-av { font-size: 10px; } .ag-bars i em { font-size: 10px; } .iso-grid i em { font-size: 10px; } /* 186. LA FAQ ETAIT EN DEUX COLONNES SUR TELEPHONE. `.faq { columns... : voir notes/refonte.notes.md §186 */ .faq { columns: 1; column-gap: 0; } /* 4 bis. et la question elle-meme se replie au lieu de deborder */ .qa summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } /* 187. le bord du tableau dit qu'il y a une suite. Technique sans... : voir notes/refonte.notes.md §187 */ .compar-wrap { background-image: linear-gradient(90deg, var(--card, #fff) 42%, rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(255, 255, 255, 0), var(--card, #fff) 58%), radial-gradient(farthest-side at 0 50%, rgba(12, 16, 28, .13), rgba(12, 16, 28, 0)), radial-gradient(farthest-side at 100% 50%, rgba(12, 16, 28, .13), rgba(12, 16, 28, 0)); background-position: 0 0, 100% 0, 0 0, 100% 0; background-size: 40px 100%, 40px 100%, 15px 100%, 15px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; } } /* 188. LES SCENES QUI CHANGENT DE HAUTEUR EN JOUANT. Mesure ... : voir notes/refonte.notes.md §188 */ .qa-num { min-height: 20px; display: inline-flex; align-items: center; } @media (max-width: 760px) { .compar tbody td, .compar tbody th { min-height: 0; } .compar tbody td[data-v] { min-width: 96px; } } /* 189. LA DISCIPLINE DU PETIT ECRAN (2026-08-08) : voir notes/refonte.notes.md §189 */ @media (max-width: 760px) { /* voir notes/refonte.notes.md §190 */ [data-scene].is-live .tel-corps::after, [data-scene].is-live .tel-screen::after, .prix-card.is-main::before { animation: none; } /* voir notes/refonte.notes.md §191 */ .iso-1.is-in { animation: isoPose1 .85s both; } .iso-2.is-in { animation: isoPose2 .85s both; } .iso-3.is-in { animation: isoPose3 .85s both; } } /* 192. ACCESSIBILITE, WCAG 2.2 niveau AA (2026-08-08) : voir notes/refonte.notes.md §192 */ /* voir notes/refonte.notes.md §193 */ .saut { position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-160%); display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--sh-2); transition: transform .18s cubic-bezier(.4, 0, .2, 1); } .saut:focus-visible { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .saut { transition: none; } } /* voir notes/refonte.notes.md §194 */ #contenu { scroll-margin-top: 88px; } /* voir notes/refonte.notes.md §195 */ .reveal:focus-within, .step:focus-within, .form-card:focus-within { opacity: 1 !important; transform: none !important; /* voir notes/refonte.notes.md §196 */ transition: none !important; } /* voir notes/refonte.notes.md §197 */ /* 198. SOUS 761 px, LA PASSE MOBILE A DEJA MIS CES LIENS A 44 px. La... : voir notes/refonte.notes.md §198 */ @media (min-width: 761px) { .foot-col ul a { display: inline-flex; align-items: center; min-height: 24px; } .accuse-note a { display: inline-flex; align-items: center; min-height: 24px; } } @media (max-width: 760px) { .accuse-note a, .demo-pause { min-height: 44px; } } /* voir notes/refonte.notes.md §199 */ @media (prefers-reduced-motion: reduce) { .is-live .fd-sig i::after { animation: none; opacity: 1; transform: none; } .is-live .casc-etat:not(.is-ok):not(.is-warm)::after { animation: none; } } /* voir notes/refonte.notes.md §200 */ #demo-host:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } /* voir notes/refonte.notes.md §201 */ .demo-ctrl { display: flex; justify-content: center; margin-top: 10px; } .demo-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; /* voir notes/refonte.notes.md §202 */ padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--text) 46%, transparent); background: transparent; color: var(--faint); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .18s cubic-bezier(.4, 0, .2, 1), border-color .18s cubic-bezier(.4, 0, .2, 1), background-color .18s cubic-bezier(.4, 0, .2, 1); } .demo-pause:hover { color: var(--text); border-color: var(--line-strong); background: var(--subtle); } .demo-pause:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } /* Deux barres = pause, un triangle = reprise. Dessine en CSS : pas un SVG de plus a marquer decoratif. */ .dp-ico { display: inline-block; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .demo-pause.est-arrete .dp-ico { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; } @media (prefers-reduced-motion: reduce) { .demo-pause { transition: none; } } /* voir notes/refonte.notes.md §203 */ .opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; } .step h3:focus { outline: none; } .step h3:focus-visible { outline: none; box-shadow: -14px 0 0 -10px var(--brand); } /* --- 49.8 Le repli sans JavaScript du questionnaire ----------------------- */ .q-nojs { max-width: 620px; margin: 0 auto 26px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-1); text-align: left; } .q-nojs p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--muted); } .q-nojs p:last-child { margin-bottom: 0; } .q-nojs strong { color: var(--text); } /* La carte du questionnaire n'a plus de raison d'occuper l'ecran quand elle ne peut pas fonctionner. */ .no-js .form-card { display: none; } /* 205. L ENTREE LIBRE DANS LE PRODUIT (2026-08-08) : voir notes/refonte.notes.md §205 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } /* LA BORDURE EST L'AFFORDANCE de ce bouton : son fond est presque transparent, donc c'est le filet qui dit « ceci est un controle ». Il tombe sous le seuil 3:1 des composants (WCAG 1.4.11) des qu'on le pose au meme niveau que les filets DECORATIFS voisins (`.pill`, `.tabs-in`, a .10-.16, mesures a 1,45:1). 36 % de blanc sur le noir de marque donne exactement 3:1 ; on prend 38 % pour la marge. Meme raisonnement qu'au §202 pour `.demo-pause`. */ .hero .btn.fantome { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .38); } .hero .btn.fantome:hover { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .52); } .hero .btn.fantome:focus-visible { outline: 2px solid #1e74fe; outline-offset: 3px; } .hero .btn.fantome .btn-ext { display: grid; place-items: center; width: 17px; height: 17px; margin-left: -2px; opacity: .62; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); } .hero .btn.fantome .btn-ext svg { width: 17px; height: 17px; } .hero .btn.fantome:hover .btn-ext { transform: translate(2px, -2px); opacity: 1; } .hero-cta-note { margin: 16px auto 0; max-width: 460px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .52); text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { .hero .btn.fantome .btn-ext { transition: none; } .hero .btn.fantome:hover .btn-ext { transform: none; } } /* Cette ligne vit sur le NOIR DE MARQUE, pas sur la page : le bloc produit remonte dans le hero. Les couleurs de theme y donnaient 4,14:1 pour le texte et 3,02:1 pour le lien, sous le seuil AA de 4,5 (WCAG 1.4.3) - mesure, pas impression. On reprend donc le vocabulaire des voisins immediats (`.tab`, `.pill`, `.hero-tag`) : blanc transparent pour le texte, le bleu clair du hero pour le lien. */ .entree-libre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .58); } .el-lien { display: inline-flex; align-items: center; gap: 5px; color: #1e74fe; font-weight: 560; text-decoration: none; box-shadow: inset 0 -1px 0 0 rgba(30, 116, 254, .45); transition: box-shadow .16s cubic-bezier(.4, 0, .2, 1), color .16s cubic-bezier(.4, 0, .2, 1); } .el-lien:hover { color: #58a0ff; box-shadow: inset 0 -1px 0 0 #58a0ff; } .el-lien:focus-visible { outline: 2px solid #1e74fe; outline-offset: 3px; box-shadow: none; } .el-ext { display: grid; place-items: center; width: 15px; height: 15px; } .el-ext svg { width: 15px; height: 15px; } .el-cond::before { content: '· '; } @media (max-width: 620px) { .entree-libre { font-size: 13px; } .el-cond { flex: 1 0 100%; text-align: center; } .el-cond::before { content: ''; } } /* 206. L'AVIS AVANT L'ENVOI (etape 9) : voir notes/refonte.notes.md §206 */ .q-avis { margin: 22px 0 0; padding: 16px 18px; border-radius: var(--radius-md); background: var(--subtle); box-shadow: inset 0 0 0 1px var(--line); } .q-avis > b { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .q-avis ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } .q-avis li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .q-avis li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); } .q-avis li span { font-weight: 600; color: var(--text); } .q-avis li span::after { content: ' : '; font-weight: 400; color: var(--muted); } .q-avis p { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--faint); } .q-avis a { color: var(--accent-strong); text-decoration: none; box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--accent-strong) 45%, transparent); transition: box-shadow .16s var(--e-sec); } .q-avis a:hover { box-shadow: inset 0 -1px 0 0 var(--accent-strong); } .q-avis a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; box-shadow: none; } @media (max-width: 620px) { .q-avis { padding: 14px 15px; } } /* 207. LA DEMO LIBRE, ETEINTE PAR UN SEUL COMMUTATEUR : voir notes/refonte.notes.md §207 */ html[data-demo-libre='off'] .demo-libre { display: none !important; } /* 208. RIEN DANS LE CORPS NE PEUT ELARGIR LA PAGE : voir notes/refonte.notes.md §208 */ main { overflow-x: clip; }