/* ═══════════════════════════════════════════════════════════════════════════ LANDING — refonte façon clickup.com/lp/projects (2026-09-17) Référence donnée par Jérôme : la page « Projects » de ClickUp. Ce qui en est repris, et qui gouverne TOUTE cette feuille : · fond BLANC, aucun panneau coloré sous le héros ; · titres en deux tons — la fin de phrase vire au gris ; · sections en GRILLE 2×2 séparée par des FILETS d'un pixel qui s'estompent aux extrémités (`.cu-grid`) ; · captures FONDUES sur leurs bords (`mask-image`), jamais encadrées, débordant de leur cellule ; · un HALO arc-en-ciel flou derrière le héros (`.cu-hero__visual::before`) ; · un BANDEAU noir → couleur pour introduire un module ; · une CARTE finale en dégradé arc-en-ciel avec la capture qui s'y fond. Cette feuille est AUTONOME : elle ne dépend d'aucune des feuilles de l'application ni de `landing-base.css` (thèmes Rexora/Glass/TermOS, fond coloré, Space Mono) — leurs règles contrediraient chacun des points ci-dessus. Seul `archiflow-marque.css` (le mot-symbole) est chargé à côté. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Satoshi'; src: url('/static/fonts/satoshi/Satoshi-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/static/fonts/satoshi/Satoshi-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/static/fonts/satoshi/Satoshi-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; } :root { --cu-ink: #1b1b2f; /* texte principal — ClickUp : #292d34 ; ici teinté vers le violet */ --cu-ink-2: #4b4d5c; --cu-dim: #8f93a3; /* la seconde couleur des titres */ --cu-line: #e6e7ee; --cu-soft: #f4f4f8; --cu-acc: #6d46ec; /* = --af-accent de l'application */ --cu-acc-2: #ff3d8a; --cu-acc-3: #ff8a3d; --cu-acc-4: #2f6bff; --cu-lime: #c6f04a; /* accent propre au module chantiers */ --cu-ok: #16a34a; --cu-err: #dc2626; --cu-r: 12px; --cu-r-lg: 24px; --cu-wrap: 1120px; --cu-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cu-ease: cubic-bezier(.16, 1, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: #fff; color: var(--cu-ink); font-family: var(--cu-font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4, p, ul { margin: 0; } ul { padding: 0; list-style: none; } .cu-wrap { width: min(var(--cu-wrap), calc(100% - 48px)); margin-inline: auto; } /* ── Deux tons ─────────────────────────────────────────────────────────── */ .cu-dim { color: var(--cu-dim); } .cu-h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; max-width: 14ch; } .cu-h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; text-align: center; max-width: 26ch; margin-inline: auto; } .cu-h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; } .cu-lead { font-size: 18px; line-height: 1.5; color: var(--cu-ink-2); max-width: 58ch; } .cu-p { font-size: 16px; line-height: 1.55; color: var(--cu-ink-2); max-width: 46ch; } /* ── Boutons — la paire ClickUp : noir plein + gris clair ──────────────── */ .cu-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: transform .18s var(--cu-ease), background .18s, box-shadow .18s; } .cu-btn svg { width: 16px; height: 16px; flex: none; } .cu-btn:active { transform: translateY(1px); } .cu-btn:focus-visible { outline: 2px solid var(--cu-acc); outline-offset: 2px; } .cu-btn--dark { background: var(--cu-ink); color: #fff; } .cu-btn--dark:hover { background: #000; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); } .cu-btn--light { background: var(--cu-soft); color: var(--cu-ink); } .cu-btn--light:hover { background: #eaeaf1; } .cu-btn--white { background: #fff; color: var(--cu-ink); } .cu-btn--white:hover { background: #f4f4f8; } .cu-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; } .cu-btn--lg { height: 52px; padding: 0 26px; font-size: 16px; border-radius: 12px; } .cu-btn[disabled] { opacity: .5; cursor: not-allowed; } .cu-btn__note { font-size: 12.5px; line-height: 1.3; color: var(--cu-dim); align-self: center; } /* ── En-tête ───────────────────────────────────────────────────────────── */ .cu-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; } .cu-header.is-scrolled { border-color: var(--cu-line); } .cu-nav { display: flex; align-items: center; gap: 28px; height: 68px; } .cu-nav__logo { font-size: 22px; } .cu-nav__logo .af-marque__2 { color: var(--cu-acc); } .cu-nav__links { display: flex; gap: 18px; margin-left: 4px; } .cu-nav__links a { white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--cu-ink-2); padding: 6px 2px; border-radius: 6px; } .cu-nav__links a:hover, .cu-nav__links a[aria-current="page"] { color: var(--cu-ink); } .cu-nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .cu-nav__right .cu-link { white-space: nowrap; font-size: 14px; color: var(--cu-ink-2); font-weight: 500; padding: 0 8px; } /* `.cu-nav__right` devant le bouton : `.cu-iconbtn` (plus bas) le remettrait en inline-flex */ .cu-nav__right .cu-nav__burger, .cu-nav__only-m { display: none; } /* ── Héros ─────────────────────────────────────────────────────────────── */ .cu-hero { padding: 64px 0 0; } .cu-hero__copy { display: grid; gap: 22px; } .cu-hero__ctas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cu-hero__proof { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--cu-ink-2); } .cu-hero__proof span { display: inline-flex; align-items: center; gap: 6px; } .cu-hero__proof svg { width: 14px; height: 14px; color: var(--cu-ok); } /* Le visuel du héros : la composition Pixa, fondue sur ses bords, avec le halo arc-en-ciel derrière son coin bas-gauche — exactement le dispositif de ClickUp. Le halo est un ::before flou, pas une image. */ .cu-hero__visual { position: relative; margin-top: 44px; isolation: isolate; } /* L'AURA (21/09) : depuis les visuels Pixa, la composition n'a plus de halo dedans (fond blanc rendu transparent). Le halo revient donc ici, en CSS : le dégradé de la carte finale (bleu → violet → rose → orange), posé DERRIÈRE l'image, un peu plus petit qu'elle, masqué en ellipse et flouté large — il s'éteint de partout, aucun contour ne peut rester (retour du 20/09 : « estompé sur les contours, pas coupé droit, plus diffus »). */ .cu-aura::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 8% 2% 6%; border-radius: 50%; opacity: .9; background: linear-gradient(120deg, #2f6bff 0%, #6d46ec 32%, #ff3d8a 64%, #ff8a3d 100%); -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0,0,0,.55) 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, rgba(0,0,0,.55) 60%, transparent 100%); filter: blur(56px); } .cu-hero__visual.cu-aura::before { inset: 4% -4% 2%; } .cu-hero__visual img { /* composition à fond transparent, déjà fondue sur ses bords et son halo dedans : on la laisse déborder franchement du conteneur (le corps est en overflow-x: clip, rien ne fait défiler) */ width: 118%; max-width: none; margin-left: -9%; } .cu-hero__visual { margin-top: 36px; } /* ── Bande « conçu pour » — l'équivalent de la rangée de logos ─────────── */ .cu-trusted { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 36px 0 72px; position: relative; } .cu-trusted__label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cu-dim); font-weight: 700; } .cu-trusted__list { display: flex; flex-wrap: wrap; gap: 8px 30px; } .cu-trusted__list span { font-size: 15.5px; font-weight: 700; color: var(--cu-ink-2); letter-spacing: -0.01em; } /* ── Sections ──────────────────────────────────────────────────────────── */ .cu-section { padding: 72px 0 40px; /* Cible d'un onglet du sommaire : l'en-tête (68) et le sommaire collant (54) recouvraient le titre de la section — vu sur iPad le 2026-09-20. */ scroll-margin-top: 122px; } .cu-section__head { margin-bottom: 40px; display: grid; gap: 14px; justify-items: center; text-align: center; } .cu-section__head .cu-lead { text-align: center; } /* La GRILLE 2×2 et ses filets — le dispositif exact de ClickUp : · un filet horizontal au-dessus de la première rangée, entre chaque rangée, et sous la dernière ; tous dépassent la grille de 48 px de chaque côté et s'estompent aux extrémités ; · un filet vertical au centre, qui dépasse aussi en haut et en bas ; · les visuels passent PAR-DESSUS les filets (z-index), ils ne sont jamais rognés par eux. Les filets sont sur le pseudo-élément du PREMIER élément de chaque rangée (`nth-child(odd)`), étiré sur les deux colonnes. */ .cu-grid { --cu-bleed: 48px; position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; } .cu-grid::before { content: ""; position: absolute; z-index: 0; top: calc(-1 * var(--cu-bleed)); bottom: calc(-1 * var(--cu-bleed)); left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, var(--cu-line) 10%, var(--cu-line) 90%, transparent); } .cu-cell { position: relative; min-height: 380px; z-index: 1; } .cu-cell:nth-child(odd)::before { content: ""; position: absolute; z-index: 0; top: 0; left: calc(-1 * var(--cu-bleed)); width: calc(200% + 2 * var(--cu-bleed)); height: 1px; background: linear-gradient(to right, transparent, var(--cu-line) 6%, var(--cu-line) 94%, transparent); } .cu-grid::after { content: ""; position: absolute; z-index: 0; left: calc(-1 * var(--cu-bleed)); right: calc(-1 * var(--cu-bleed)); bottom: 0; height: 1px; background: linear-gradient(to right, transparent, var(--cu-line) 6%, var(--cu-line) 94%, transparent); } .cu-cell--text { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 60px 56px 60px 44px; } .cu-cell:nth-child(even).cu-cell--text { padding: 60px 24px 60px 64px; } .cu-cell--text .cu-btn { align-self: flex-start; margin-top: 6px; } .cu-cell--visual { display: flex; align-items: center; justify-content: center; padding: 20px 0; z-index: 2; } .cu-cell--visual img { width: 100%; } /* Le fondu des captures brutes (celles qui ne passent pas par le compositeur) : un masque aux quatre bords. */ .cu-fade { --fx: 12%; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent), linear-gradient(to bottom, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent), linear-gradient(to bottom, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent); -webkit-mask-composite: source-in; mask-composite: intersect; } /* Une COMPOSITION (`scripts/landing_compose.py`) est un WebP à fond transparent : fenêtres, cartes, bulles et halo déjà posés, rien à masquer. Elle déborde de sa cellule vers l'extérieur de la grille — jamais vers le filet central, où elle rencontrerait le texte. */ .cu-cell--compo { padding: 0; overflow: visible; } .cu-cell--compo.cu-aura { position: relative; isolation: isolate; } /* le débord s'arrête AVANT le bord de la fenêtre : la composition finit en fondu sur le blanc, jamais tranchée par le viewport (1440 − 1120 = 320 px de marge, soit 160 par côté ; une cellule fait 560 → 22 % ≈ 123 px) */ .cu-cell--compo img { width: 122%; max-width: none; } .cu-cell--compo.cu-cell--bleed-r img { margin-right: -22%; margin-left: 0; } .cu-cell--compo.cu-cell--bleed-l img { margin-left: -22%; margin-right: 0; } /* une capture verticale (fiche, formulaire) : rognée en haut, fondue en bas */ .cu-cell--tall { align-items: flex-start; padding: 36px 40px 0; overflow: hidden; } .cu-cell--tall img { width: 100%; max-height: 420px; object-fit: cover; object-position: top; border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px -30px rgba(27,27,47,.35); } /* ── Bandeau noir → couleur (introduction d'un module) ─────────────────── */ .cu-band { position: relative; overflow: hidden; border-radius: var(--cu-r-lg); color: #fff; margin: 40px 0 0; background: linear-gradient(100deg, #0b0b14 0%, #0b0b14 42%, #3b2a8f 66%, #b83a92 84%, #ff8a3d 100%); display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); min-height: 420px; } .cu-band--lime { background: linear-gradient(100deg, #0b0b14 0%, #0b0b14 44%, #2f4d19 70%, #8fbf1f 88%, var(--cu-lime) 100%); } .cu-band__copy { padding: 52px 48px; display: grid; gap: 18px; align-content: center; } .cu-band__copy .cu-h3 { color: #fff; font-size: clamp(28px, 3vw, 38px); } .cu-band__copy p { color: rgba(255,255,255,.78); font-size: 16px; max-width: 42ch; } .cu-band__copy .af-marque { font-size: 24px; } .cu-band__copy .af-marque__2 { color: var(--cu-lime); } .cu-band__visual { position: relative; align-self: end; padding: 44px 0 0 24px; } .cu-band__visual img { width: 110%; max-width: none; border-radius: 14px 0 0 0; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); } /* ── Écussons de confiance (la rangée de ClickUp) ───────────────────────── Un SVG par écusson : contour extérieur plein, contour intérieur fin, bandeau plein en travers, pointe en bas. Le contenu HTML est posé dessus. */ .cu-badges { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 44px; } .cu-badge { --c: var(--cu-acc); position: relative; width: 172px; height: 208px; color: var(--cu-ink); } .cu-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .cu-badge .sh-out { fill: #fff; stroke: var(--c); stroke-width: 2.5; } .cu-badge .sh-in { fill: none; stroke: var(--c); stroke-width: 1; opacity: .45; } .cu-badge .sh-band { fill: var(--c); } .cu-badge__in { position: absolute; inset: 0; text-align: center; } .cu-badge__in > * { position: absolute; left: 14px; right: 14px; } .cu-badge__year { top: 24px; font-size: 10px; letter-spacing: .12em; font-weight: 700; color: var(--c); text-transform: uppercase; } .cu-badge__title { top: 46px; font-size: 16px; font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; } .cu-badge__band { top: 96px; left: 2px; right: 2px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 26px; height: 26px; } .cu-badge__sub { top: 132px; left: 18px; right: 18px; font-size: 11.5px; color: var(--cu-ink-2); line-height: 1.25; } .cu-badge--copie { display: none; } /* les doubles ne servent qu'à la bande (écran étroit) */ .cu-badge--v { --c: #6d46ec; } .cu-badge--b { --c: #2f6bff; } .cu-badge--o { --c: #ff8a3d; } .cu-badge--g { --c: #16a34a; } .cu-badge--p { --c: #ff3d8a; } /* ── App mobile ────────────────────────────────────────────────────────── */ .cu-mobile { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 40px 48px; border: 1px solid var(--cu-line); border-radius: var(--cu-r-lg); background: linear-gradient(180deg, #fff, #faf9ff); } .cu-chip { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--cu-acc) 10%, #fff); color: var(--cu-acc); } .cu-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .cu-form { display: grid; gap: 10px; } .cu-form label { font-size: 13.5px; font-weight: 700; } .cu-input, .cu-form input:not([type=checkbox]), .cu-form select, .cu-form textarea { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--cu-line); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--cu-ink); transition: border-color .15s, box-shadow .15s; } .cu-form textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 110px; } .cu-form input:focus, .cu-form select:focus, .cu-form textarea:focus { outline: none; border-color: var(--cu-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cu-acc) 18%, transparent); } .cu-form__row { display: flex; gap: 8px; } .cu-form__row input { flex: 1; } .cu-form__note { font-size: 12.5px; color: var(--cu-dim); } .cu-form__msg { font-size: 13.5px; font-weight: 500; min-height: 1.2em; } .cu-form__msg.ok { color: var(--cu-ok); } .cu-form__msg.err { color: var(--cu-err); } .cu-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cu-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cu-ink-2); cursor: pointer; } .cu-check input { width: 18px; height: 18px; accent-color: var(--cu-acc); } .cu-msg { display: none; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 12px; } .cu-msg.show { display: block; } .cu-msg--ok { background: #ecfdf3; color: #166534; } .cu-msg--err { background: #fef2f2; color: #991b1b; } /* ── Tarifs ────────────────────────────────────────────────────────────── */ .cu-billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--cu-soft); gap: 2px; } .cu-billing button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--cu-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .cu-billing button.active { background: #fff; color: var(--cu-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .cu-billing__save { font-size: 11.5px; font-weight: 700; color: var(--cu-ok); background: #ecfdf3; padding: 2px 8px; border-radius: 999px; } .cu-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; align-items: stretch; } .cu-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border: 1px solid var(--cu-line); border-radius: 18px; background: #fff; transition: transform .25s var(--cu-ease), box-shadow .25s; } .cu-plan:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(27,27,47,.35); } .cu-plan--pop { border-color: var(--cu-acc); box-shadow: 0 0 0 1px var(--cu-acc), 0 24px 50px -30px rgba(109,70,236,.45); } .cu-plan__badge { position: absolute; top: -12px; left: 22px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--cu-acc); color: #fff; letter-spacing: .02em; } .cu-plan__badge--vie { background: var(--cu-ink); } .cu-plan__name { font-size: 15px; font-weight: 700; color: var(--cu-ink-2); } .cu-plan__price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .cu-plan__price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--cu-dim); margin-left: 2px; } .cu-plan__price--txt { font-size: 26px; } .cu-plan__note { font-size: 13px; color: var(--cu-dim); margin-top: -8px; } .cu-plan__accroche { font-size: 14px; color: var(--cu-ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--cu-line); } .cu-plan__feats { display: grid; gap: 8px; align-content: start; font-size: 14px; color: var(--cu-ink-2); flex: 1; } .cu-plan__feats li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; } .cu-plan__feats svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--cu-ok); } .cu-plan__feats li.plus svg { color: var(--cu-acc); } .cu-plan__feats li.plus { color: var(--cu-ink); } /* La tuile de VERRE de chaque ligne (2026-09-25) : lavande, trait violet ; la ligne que le palier ajoute a sa tuile ALLUMÉE (aura). */ .cu-plan__feats li { align-items: center; gap: 10px; } .cu-feat-ico { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(145deg, #f3efff, #e6dfff); border: 1px solid rgba(109, 70, 236, .16); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 5px 12px -8px rgba(109, 70, 236, .6); transition: transform .35s var(--cu-ease); } .cu-plan__feats .cu-feat-ico svg { width: 15px; height: 15px; margin: 0; color: #5d3be0; } .cu-plan__feats li.plus .cu-feat-ico { background: linear-gradient(135deg, #6d46ec, #ff3d8a); border-color: transparent; box-shadow: 0 6px 14px -6px rgba(255, 61, 138, .55); } .cu-plan__feats li.plus .cu-feat-ico svg { color: #fff; } .cu-plan:hover .cu-feat-ico { transform: translateY(-1px); } .cu-plan .cu-btn { width: 100%; justify-content: center; } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .cu-faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--cu-line); } .cu-faq__item { border-bottom: 1px solid var(--cu-line); } .cu-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; background: none; border: 0; text-align: left; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; } .cu-faq__q svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--cu-ease); color: var(--cu-dim); } .cu-faq__item.open .cu-faq__q svg { transform: rotate(180deg); } .cu-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--cu-ease); } .cu-faq__a > div { padding: 0 4px 20px; font-size: 15.5px; color: var(--cu-ink-2); max-width: 66ch; } /* ── Carte finale arc-en-ciel ──────────────────────────────────────────── */ .cu-final { position: relative; overflow: hidden; border-radius: 28px; color: #fff; padding: 52px 56px 0; background: linear-gradient(120deg, #2f6bff 0%, #6d46ec 32%, #ff3d8a 64%, #ff8a3d 100%); display: grid; gap: 22px; margin-top: 24px; } .cu-final__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cu-final .cu-h3 { color: #fff; max-width: 20ch; } .cu-final__ctas { display: flex; align-items: center; gap: 12px; } .cu-final__ctas .cu-btn__note { color: rgba(255,255,255,.85); } .cu-final__tags { display: flex; gap: 8px 26px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); } .cu-final__visual { margin-top: 10px; } .cu-final__visual img { width: 100%; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.35); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); max-height: 380px; object-fit: cover; object-position: top; } /* ── Pied de page ──────────────────────────────────────────────────────── */ .cu-footer { border-top: 1px solid var(--cu-line); margin-top: 72px; padding: 40px 0 36px; } .cu-footer__cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 24px; } .cu-footer h5 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .cu-footer li { margin: 0 0 8px; font-size: 14px; } .cu-footer li a { color: var(--cu-ink-2); cursor: pointer; } .cu-footer li a:hover { color: var(--cu-ink); } .cu-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cu-line); font-size: 13px; color: var(--cu-dim); } .cu-footer .af-marque { font-size: 20px; } .cu-footer .af-marque__2 { color: var(--cu-acc); } /* ── Modales (connexion, inscription) ──────────────────────────────────── */ .cu-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(27,27,47,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .cu-modal.open { display: flex; } .cu-modal__panel { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.5); } .cu-modal__panel--wide { max-width: 520px; } .cu-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .cu-modal__head h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .cu-modal__head p { font-size: 14px; color: var(--cu-ink-2); margin-top: 2px; } .cu-iconbtn { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--cu-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .cu-iconbtn svg { width: 16px; height: 16px; } .cu-modal__alt { margin-top: 14px; font-size: 13.5px; color: var(--cu-ink-2); text-align: center; } .cu-modal__alt a, .cu-linkbtn { color: var(--cu-acc); font-weight: 700; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; } /* ── Le seul moment de mouvement : les cellules se posent en entrant ───── Rien n'est masqué sans script : `html.cu-js` seulement. ──────────────── */ html.cu-js .cu-reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--cu-ease), transform .9s var(--cu-ease); } html.cu-js .cu-reveal.in { opacity: 1; transform: none; } /* la seconde cellule d'une rangée suit la première d'un temps */ html.cu-js .cu-cell.cu-reveal:nth-child(even) { transition-delay: .12s; } html.cu-js .cu-cell.cu-reveal:nth-child(even) .cu-objet { transition-delay: var(--d, .3s); } /* le texte du héros arrive au chargement, avant le visuel */ html.cu-js .cu-reveal-load > * { opacity: 0; transform: translateY(12px); animation: cu-in-base .8s var(--cu-ease) forwards; } html.cu-js .cu-reveal-load > :nth-child(1) { animation-delay: .05s; } html.cu-js .cu-reveal-load > :nth-child(2) { animation-delay: .15s; } html.cu-js .cu-reveal-load > :nth-child(3) { animation-delay: .25s; } html.cu-js .cu-reveal-load > :nth-child(4) { animation-delay: .35s; } @media (prefers-reduced-motion: reduce) { html.cu-js .cu-reveal, html.cu-js .cu-reveal-load > * { opacity: 1; transform: none; transition: none; animation: none; } .cu-btn, .cu-plan, .cu-faq__a, .cu-faq__q svg { transition: none; } } /* ── Page Fonctionnalités ─────────────────────────────────────────────── */ .cu-sommaire { position: sticky; top: 68px; z-index: 40; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--cu-line); border-bottom: 1px solid var(--cu-line); margin-top: 24px; } .cu-sommaire__rail { display: flex; gap: 4px; height: 52px; align-items: center; overflow-x: auto; scrollbar-width: none; } .cu-sommaire__rail a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--cu-ink-2); white-space: nowrap; } .cu-sommaire__rail a span { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--cu-soft); color: var(--cu-dim); } .cu-sommaire__rail a:hover { color: var(--cu-ink); } .cu-sommaire__rail a[aria-current] { background: var(--cu-ink); color: #fff; } .cu-sommaire__rail a[aria-current] span { background: rgba(255,255,255,.18); color: #fff; } .cu-fx .cu-cell { min-height: 440px; } .cu-gains { display: grid; gap: 9px; margin-top: 4px; } .cu-gains li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--cu-ink); max-width: 46ch; } .cu-gains svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--cu-ok); } .cu-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cu-tags span { font-size: 12.5px; font-weight: 700; color: var(--cu-ink-2); background: var(--cu-soft); padding: 4px 10px; border-radius: 999px; } .cu-cell--compo video:not(.cu-compo__video) { width: 118%; max-width: none; border-radius: 14px; box-shadow: 0 30px 70px -24px rgba(27,27,47,.32); } /* ── Plateformes agréées (sous les écussons) ───────────────────────────── */ .cu-plateformes { margin-top: 36px; text-align: center; } .cu-plateformes__label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cu-dim); font-weight: 700; } .cu-plateformes ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .cu-plateformes li { display: grid; gap: 1px; padding: 10px 18px; border: 1px solid var(--cu-line); border-radius: 12px; min-width: 132px; text-align: center; background: #fff; } .cu-plateformes li b { font-size: 15px; letter-spacing: -0.01em; } .cu-plateformes li small { font-size: 11.5px; color: var(--cu-dim); } .cu-plateformes li.is-on { border-color: color-mix(in srgb, var(--cu-ok) 45%, #fff); background: color-mix(in srgb, var(--cu-ok) 5%, #fff); } .cu-plateformes li.is-on small { color: var(--cu-ok); font-weight: 700; } .cu-plateformes__note { margin-top: 14px; font-size: 13.5px; color: var(--cu-ink-2); } .cu-plateformes__note a { color: var(--cu-acc); font-weight: 700; } /* ── Compositions en calques : la FENÊTRE (base, avec les cartes qui la chevauchent) se pose, puis chaque OBJET (objet 3D, pilule, carte libre — découpé par scripts/landing_pixa.py, placé en % de la base) arrive à son tour avec un petit rebond, puis reste en place au-dessus de son ombre restée dans la base. Rien n'est masqué sans script. ────────────────────── */ .cu-compo { position: relative; display: block; width: 100%; } .cu-compo img { width: 100%; height: auto; display: block; } .cu-cell--compo .cu-compo, .cu-hero__visual .cu-compo { width: inherit; max-width: none; margin: inherit; } .cu-cell--compo .cu-compo img, .cu-hero__visual .cu-compo img { width: 100%; max-width: none; margin: 0; } .cu-objet { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; } .cu-objet img { width: 100%; height: auto; display: block; } /* Retour de Jérôme (21/09 soir) : « je ne veux pas que ça bouge sans arrêt, c'est juste au moment de l'apparition ». Donc : pas de flottement en boucle, pas de respiration de la fenêtre, pas de parallaxe — chaque objet fait son entrée (décalée, avec un petit rebond) puis reste en place. */ html.cu-js .cu-reveal .cu-compo__base { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .8s var(--cu-ease), transform .9s var(--cu-ease); } html.cu-js .cu-reveal .cu-objet { opacity: 0; transform: translateY(26px) scale(.9); transition: opacity .6s var(--cu-ease) var(--d, .3s), transform .8s cubic-bezier(.2, 1.4, .3, 1) var(--d, .3s); } html.cu-js .cu-reveal.in .cu-compo__base { opacity: 1; transform: none; } html.cu-js .cu-reveal.in .cu-objet { opacity: 1; transform: none; } /* la boucle vidéo de la scène (VP9 transparent) : posée sur le calque de base, invisible tant qu'elle ne joue pas ; dès qu'elle joue, les deux images s'effacent (la vidéo porte elle-même l'entrée, le flottement et la sortie). Sans script, sans VP9 alpha ou en mouvement réduit : jamais jouée. */ .cu-compo__video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; display: block; opacity: 0; pointer-events: none; background: transparent; border-radius: 0; box-shadow: none; } .cu-compo--video .cu-compo__video { opacity: 1; transition: opacity .35s var(--cu-ease); } .cu-compo--video .cu-compo__base, .cu-compo--video .cu-objet { opacity: 0 !important; animation: none !important; transition: opacity .35s var(--cu-ease) !important; } /* le héros n'attend pas le défilement : il s'anime au chargement */ html.cu-js .cu-hero__visual .cu-compo__base { opacity: 0; transform: translateY(18px) scale(.985); animation: cu-in-base .9s var(--cu-ease) .15s forwards; } html.cu-js .cu-hero__visual .cu-objet { opacity: 0; transform: translateY(26px) scale(.9); animation: cu-in-over .8s cubic-bezier(.2, 1.4, .3, 1) var(--dh, .55s) forwards; } @keyframes cu-in-base { to { opacity: 1; transform: none; } } @keyframes cu-in-over { to { opacity: 1; transform: none; } } /* le halo derrière un écusson, la carte finale, les pilules : un léger relèvement au survol, rien de plus */ .cu-badge, .cu-plateformes li { transition: transform .25s var(--cu-ease); } .cu-badge:hover, .cu-plateformes li:hover { transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { html.cu-js .cu-reveal .cu-compo__base, html.cu-js .cu-reveal .cu-objet, html.cu-js .cu-hero__visual .cu-compo__base, html.cu-js .cu-hero__visual .cu-objet { opacity: 1; transform: none; animation: none; transition: none; } } /* ── Bloc App iPhone (accueil) : texte, formulaire, et le téléphone de côté ── */ .cu-mobile { grid-template-columns: 1fr .9fr 380px; overflow: hidden; padding: 0 0 0 48px; gap: 40px; align-items: center; min-height: 380px; } .cu-mobile > div:first-child { padding: 40px 0; } .cu-mobile > form { padding: 40px 0; } /* la photo : le téléphone sur la table, fondue sur son bord gauche pour se poser dans la carte sans coupe */ .cu-mobile__phone { position: relative; align-self: stretch; margin: 0; } .cu-mobile__phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); } /* ═══════════════════════════════════════════════════════════════════════════ MOUVEMENT — d'après les deux landings de référence de Jérôme (2026-09-24) Resq (sombre, faisceaux, puce « AI », cartes de verre) et Applancer (texte qui s'allume au défilement, liste qui s'ouvre au survol, bouton à pastille ronde). On leur prend le MOUVEMENT et la finition, jamais la palette : le blanc, l'aura et les couleurs restent ceux de la landing façon ClickUp (cf. mémoire « style ClickUp toujours »). Trois familles de mouvement, et la règle de chacune : · À L'APPARITION (titres mot à mot, étiquettes qui se balancent, fils qui se dessinent, cartes qui glissent) : une fois, puis immobile — la demande du 21/09 (« juste au moment de l'apparition ») tient ; · LIÉ AU DÉFILEMENT (la scène du héros qui se redresse, le manifeste qui s'allume, le socle qui s'écarte, la capture finale qui monte) : ne bouge QUE si l'utilisateur fait défiler ; · EN CONTINU, deux seulement, lents et discrets : la bande « Conçu pour » et la lumière qui court sur les pistes du schéma — cette dernière arrêtée hors de l'écran. Le script est `static/js/landing-mouvement.js`. Sans script (pas de `html.cu-js`) ou en mouvement réduit, TOUT est à sa place et lisible : une donnée ne dépend jamais d'une animation pour être vue. ═══════════════════════════════════════════════════════════════════════════ */ /* ── L'en-tête se détache en pilule flottante dès qu'on descend ─────────── */ .cu-progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--lu, 0)); background: linear-gradient(90deg, #2f6bff, #6d46ec 40%, #ff3d8a 75%, #ff8a3d); } @media (min-width: 981px) { .cu-header .cu-nav { border: 1px solid transparent; border-radius: 18px; transition: height .45s var(--cu-ease), margin .45s var(--cu-ease), padding .45s var(--cu-ease), width .45s var(--cu-ease), background .35s, border-color .35s, box-shadow .45s; } .cu-header.is-scrolled { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .cu-header.is-scrolled .cu-nav { height: 56px; margin-top: 10px; margin-bottom: 2px; padding: 0 10px 0 22px; width: min(calc(var(--cu-wrap) + 44px), calc(100% - 32px)); background: rgba(255,255,255,.8); border-color: rgba(230,231,238,.95); -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px); box-shadow: 0 1px 2px rgba(27,27,47,.05), 0 14px 34px -18px rgba(27,27,47,.28); } .cu-header.is-scrolled .cu-progression { left: 50%; right: auto; width: min(calc(var(--cu-wrap) + 8px), calc(100% - 68px)); bottom: 1px; margin-left: calc(min(calc(var(--cu-wrap) + 8px), calc(100% - 68px)) / -2); border-radius: 2px; } } /* ── Sur-titre « — Suivi de projet — » : deux filets qui se dessinent ──── */ .cu-eyebrow { display: inline-flex; align-items: center; gap: 12px; justify-self: center; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cu-acc); } .cu-eyebrow::before, .cu-eyebrow::after { content: ""; width: 30px; height: 1px; transition: transform 1s var(--cu-ease) .15s; background: linear-gradient(90deg, transparent, currentColor); transform-origin: 100% 50%; } .cu-eyebrow::after { background: linear-gradient(90deg, currentColor, transparent); transform-origin: 0 50%; } .cu-eyebrow--gauche { justify-self: start; } .cu-eyebrow--gauche::before { display: none; } .cu-eyebrow--clair { color: var(--cu-lime); justify-self: start; } .cu-eyebrow--clair::before { display: none; } html.cu-js .cu-reveal:not(.in) .cu-eyebrow::before, html.cu-js .cu-reveal:not(.in) .cu-eyebrow::after, html.cu-js .cu-eyebrow.cu-reveal:not(.in)::before, html.cu-js .cu-eyebrow.cu-reveal:not(.in)::after { transform: scaleX(0); } /* ── Titres mot à mot : chaque mot MONTE hors d'une fente ───────────────── (les deux références). Le script enveloppe chaque mot dans `.cu-mot > span` et pose son délai ; la fente (overflow) garde de la marge au-dessus et au-dessous pour ne rogner ni les accents (É, À) ni les jambages (g, p, ç). */ .cu-mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .03em .12em; margin: -.14em -.03em -.12em; } .cu-mot > span { display: inline-block; } html.cu-js .cu-split:not(.in) .cu-mot > span { transform: translate3d(0, 115%, 0) rotate(6deg); } html.cu-js .cu-split .cu-mot > span { transform-origin: 0 100%; transition: transform 1.05s var(--cu-ease); } /* le titre du héros ne fait pas en plus le fondu de ses voisins */ html.cu-js .cu-reveal-load > .cu-split { opacity: 1; transform: none; animation: none; } html.cu-js .cu-reveal-load > :nth-child(5) { animation-delay: .45s; } /* ── Boutons ────────────────────────────────────────────────────────────── */ .cu-btn__fl { display: inline-flex; transition: transform .35s var(--cu-ease); } .cu-btn:hover .cu-btn__fl { transform: translateX(3px); } /* noir : une lumière traverse au survol, un liseré arc-en-ciel s'allume */ .cu-btn--dark { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #2b2b46, #1b1b2f 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(27,27,47,.35), 0 10px 24px -12px rgba(27,27,47,.7); } .cu-btn--dark:hover { background: linear-gradient(180deg, #34345a, #1b1b2f 65%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(27,27,47,.35), 0 16px 30px -12px rgba(109,70,236,.55); } .cu-btn--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--cu-ease); } .cu-btn--dark:hover::after { transform: translateX(130%); } .cu-btn--dark::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(120deg, #2f6bff, #6d46ec, #ff3d8a, #ff8a3d); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; } .cu-btn--dark:hover::before { opacity: .95; } /* la pastille ronde (le « Explore more » d'Applancer) : la flèche ↗ se couche en → au survol */ .cu-btn--orbe { background: #fff; color: var(--cu-ink); border: 1px solid var(--cu-line); border-radius: 999px; padding: 0 20px 0 5px; gap: 12px; box-shadow: 0 1px 2px rgba(27,27,47,.05); } .cu-btn--orbe.cu-btn--lg { padding: 0 24px 0 6px; border-radius: 999px; } .cu-btn--orbe:hover { border-color: #dcd6fb; background: #fbfaff; box-shadow: 0 10px 24px -14px rgba(109,70,236,.45); } .cu-btn__orbe { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(140deg, #5a67ff, #6d46ec 55%, #3b2fc9); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -6px rgba(109,70,236,.7); transition: transform .5s var(--cu-ease); } .cu-btn--lg .cu-btn__orbe { width: 40px; height: 40px; } .cu-btn__orbe svg { width: 15px; height: 15px; } .cu-btn--orbe:hover .cu-btn__orbe { transform: rotate(45deg); } /* l'aimant : les grands boutons se laissent attirer par le pointeur */ .cu-aimant { translate: var(--ax, 0) var(--ay, 0); transition: transform .18s var(--cu-ease), translate .4s var(--cu-ease), background .18s, box-shadow .25s; } /* le halo sous le bouton de la carte finale (le « Book a demo » de Resq) */ .cu-final__ctas { position: relative; z-index: 1; isolation: isolate; } .cu-btn--halo { position: relative; } .cu-btn--halo::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 55%; width: 180%; height: 220px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(50% 55% at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,.18) 45%, transparent 72%); filter: blur(8px); opacity: .55; transition: opacity .5s var(--cu-ease); } .cu-btn--halo:hover::after { opacity: 1; } /* ── L'annonce au-dessus du titre ──────────────────────────────────────── */ .cu-annonce { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--cu-line); font-size: 13.5px; font-weight: 500; color: var(--cu-ink-2); overflow: hidden; box-shadow: 0 1px 2px rgba(27,27,47,.05), 0 10px 26px -18px rgba(109,70,236,.5); transition: border-color .25s, box-shadow .3s; } .cu-annonce img { width: 26px; height: 26px; } .cu-annonce__tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--cu-acc); padding: 2px 8px; border-radius: 999px; } .cu-annonce__fl { display: inline-flex; color: var(--cu-acc); transition: transform .35s var(--cu-ease); } .cu-annonce__fl svg { width: 14px; height: 14px; } .cu-annonce:hover { border-color: #dcd6fb; } .cu-annonce:hover .cu-annonce__fl { transform: translateX(3px); } /* un reflet la traverse UNE fois, quand la page a fini d'arriver */ .cu-annonce::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(105deg, transparent 35%, rgba(109,70,236,.14) 50%, transparent 65%); } html.cu-js .cu-annonce::after { animation: cu-reflet 1.6s var(--cu-ease) 1.3s 1 forwards; } @keyframes cu-reflet { to { transform: translateX(120%); } } /* ── Le faisceau du héros ──────────────────────────────────────────────── */ .cu-hero { position: relative; isolation: isolate; } .cu-faisceau { position: absolute; z-index: -1; top: -68px; left: 0; right: 0; height: 980px; overflow: hidden; pointer-events: none; } .cu-faisceau i { position: absolute; top: -120px; left: 6%; width: 190px; height: 1250px; border-radius: 50%; transform: rotate(-36deg); transform-origin: 50% 0; background: linear-gradient(180deg, rgba(109,70,236,0) 0%, rgba(109,70,236,.2) 30%, rgba(47,107,255,.13) 58%, rgba(47,107,255,0) 88%); filter: blur(30px); } .cu-faisceau i + i { left: 13%; width: 54px; filter: blur(12px); background: linear-gradient(180deg, rgba(255,61,138,0), rgba(255,61,138,.16) 40%, rgba(255,138,61,.1) 62%, rgba(255,138,61,0) 85%); } html.cu-js .cu-faisceau i { opacity: 0; animation: cu-faisceau 2.2s var(--cu-ease) .15s forwards; } html.cu-js .cu-faisceau i + i { animation-delay: .45s; } @keyframes cu-faisceau { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* ── La scène du héros : inclinée, elle se redresse au défilement ──────── */ .cu-scene { perspective: 1600px; perspective-origin: 50% 0; } .cu-scene__plan { transform-origin: 50% 20%; will-change: transform; } html.cu-js .cu-scene__plan { transform: rotateX(16deg) scale(.94); } /* ── La bande « Conçu pour » ───────────────────────────────────────────── */ .cu-trusted { flex-wrap: nowrap; } .cu-defile { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .cu-defile__piste { display: flex; flex-wrap: wrap; gap: 8px 0; } .cu-defile__piste.is-double { flex-wrap: nowrap; width: max-content; animation: cu-defile 42s linear infinite; } .cu-defile:hover .cu-defile__piste { animation-play-state: paused; } .cu-defile__piste > span { display: inline-flex; align-items: center; gap: 10px; margin-right: 40px; font-size: 15.5px; font-weight: 700; color: var(--cu-ink-2); letter-spacing: -.01em; white-space: nowrap; } .cu-defile__piste svg { width: 12px; height: 12px; color: var(--cu-acc); opacity: .75; } @keyframes cu-defile { to { transform: translateX(-50%); } } /* ── Le quotidien : la carte sombre aux étiquettes suspendues ──────────── */ .cu-section--serre { padding-top: 8px; } .cu-urgences { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--cu-r-lg); color: #fff; display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 55%); min-height: 400px; background: radial-gradient(90% 110% at 88% 0%, rgba(109,70,236,.62), transparent 62%), radial-gradient(70% 90% at 100% 100%, rgba(47,107,255,.38), transparent 60%), linear-gradient(100deg, #0b0b14 0%, #11112a 45%, #20195a 100%); box-shadow: 0 30px 60px -40px rgba(27,27,47,.45); } /* un ciel d'étoiles fixes, très fines (le fond de Resq) */ .cu-urgences::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; background-image: radial-gradient(1.2px 1.2px at 58% 18%, #fff, transparent), radial-gradient(1px 1px at 71% 64%, #fff, transparent), radial-gradient(1px 1px at 84% 34%, #fff, transparent), radial-gradient(1.4px 1.4px at 93% 80%, #fff, transparent), radial-gradient(1px 1px at 64% 88%, #fff, transparent), radial-gradient(1px 1px at 12% 84%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 12%, #fff, transparent), radial-gradient(1px 1px at 47% 52%, #fff, transparent), radial-gradient(1px 1px at 97% 12%, #fff, transparent), radial-gradient(1px 1px at 76% 8%, #fff, transparent); } .cu-urgences__copy { padding: 52px 48px; display: grid; gap: 16px; align-content: center; } .cu-urgences__copy .cu-h3 { color: #fff; font-size: clamp(28px, 3vw, 38px); } .cu-urgences__copy p { color: rgba(255,255,255,.72); font-size: 16px; max-width: 40ch; } .cu-urgences__fils { position: relative; min-height: 400px; } .cu-fil { position: absolute; top: 0; left: var(--x); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; transform: translateX(-50%) rotate(var(--r)); } .cu-fil::before { content: ""; width: 1px; height: var(--l); transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(185,173,255,0), rgba(185,173,255,.65)); } .cu-fil b { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: -.005em; padding: 8px 13px; border-radius: 9px; /* PAS de backdrop-filter (retiré le 25/09) : Chrome avec carte graphique effaçait ces étiquettes floutées une seconde quand la carte finissait son apparition (changement d'opacité du parent) — vidéo de Jérôme ; les fils, eux, restaient. Fond un peu plus opaque à la place. */ background: rgba(24,22,56,.88); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px -14px rgba(0,0,0,.7); } /* la perle lumineuse au bout du fil */ .cu-fil b::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #cfc6ff; box-shadow: 0 0 0 3px rgba(185,173,255,.18), 0 0 14px 3px rgba(140,120,255,.85); } .cu-fil--acc b { background: linear-gradient(135deg, #5a67ff, #6d46ec); border-color: rgba(255,255,255,.3); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 32px -10px rgba(109,70,236,.9); } .cu-fil--ok b { background: var(--cu-lime); color: var(--cu-ink); border-color: transparent; font-weight: 700; } .cu-fil--ok b svg { width: 14px; height: 14px; } html.cu-js .cu-urgences.cu-reveal:not(.in) .cu-fil { opacity: 0; } html.cu-js .cu-urgences.cu-reveal:not(.in) .cu-fil::before { transform: scaleY(0); } html.cu-js .cu-urgences.cu-reveal .cu-fil::before { transition: transform .8s var(--cu-ease) var(--dl, .3s); } html.cu-js .cu-urgences.cu-reveal.in .cu-fil { animation: cu-balance 1.9s cubic-bezier(.3, .7, .3, 1) var(--dl, .3s) both; } @keyframes cu-balance { 0% { opacity: 0; transform: translateX(-50%) translateY(-24px) rotate(calc(var(--r) + 18deg)); } 18% { opacity: 1; } 38% { transform: translateX(-50%) rotate(calc(var(--r) - 9deg)); } 60% { transform: translateX(-50%) rotate(calc(var(--r) + 4deg)); } 80% { transform: translateX(-50%) rotate(calc(var(--r) - 1.5deg)); } 100% { opacity: 1; transform: translateX(-50%) rotate(var(--r)); } } /* ── Le manifeste : les mots s'allument au défilement ──────────────────── */ .cu-manifeste { padding: 104px 0 64px; } .cu-manifeste .cu-wrap { display: grid; justify-items: center; gap: 28px; text-align: center; } .cu-manifeste__txt { font-size: clamp(28px, 3.5vw, 46px); line-height: 1.2; font-weight: 700; letter-spacing: -.03em; max-width: 940px; text-wrap: balance; color: var(--cu-ink); } html.cu-js .cu-manifeste__txt.cu-allume .cu-am { color: #cfd1dc; transition: color .4s ease; } html.cu-js .cu-manifeste__txt.cu-allume .cu-am.on { color: var(--cu-ink); } /* le bouton arrive penché puis se redresse (le « Know more » d'Applancer) */ html.cu-js .cu-manifeste__cta.cu-reveal:not(.in) { transform: translateY(26px) rotate(-7deg); } html.cu-js .cu-manifeste__cta.cu-reveal { transition: opacity .8s var(--cu-ease), transform 1.1s cubic-bezier(.2, 1.3, .3, 1); } /* ── Une seule base : modules, pistes et puce centrale ─────────────────── */ .cu-hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); align-items: center; gap: 0 36px; margin-top: 16px; } .cu-hub__pistes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } .cu-hub__pistes .fond { fill: none; stroke: #e2def6; stroke-width: 1.5; } .cu-hub__pistes .trace { fill: none; stroke: #ebe8f8; stroke-width: 1.25; } .cu-hub__pistes .perle { fill: #fff; stroke: #cfc7f5; stroke-width: 1.25; } .cu-hub__pistes .lueur { fill: none; stroke: url(#cuHubLueur); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .16 1.2; stroke-dashoffset: .16; opacity: 0; } .cu-hub.is-live .cu-hub__pistes .lueur { opacity: 1; animation: cu-piste 3.2s cubic-bezier(.5, 0, .3, 1) infinite; } .cu-hub .cu-hub__pistes .lueur.chaude { stroke-width: 3; animation-duration: 1.5s; } @keyframes cu-piste { from { stroke-dashoffset: .16; } to { stroke-dashoffset: -1.04; } } html.cu-js .cu-hub.cu-reveal .cu-hub__pistes .fond { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--cu-ease) .35s; } html.cu-js .cu-hub.cu-reveal.in .cu-hub__pistes .fond { stroke-dashoffset: 0; } .cu-hub__col { position: relative; z-index: 1; display: grid; gap: 18px; } .cu-hub__mod { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 12px; background: #fff; border: 1px solid var(--cu-line); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(27,27,47,.04), 0 14px 32px -22px rgba(43,33,112,.35); transition: transform .4s var(--cu-ease), border-color .25s, box-shadow .4s, opacity .8s var(--cu-ease); } .cu-hub__col:last-child .cu-hub__mod { flex-direction: row-reverse; text-align: right; padding: 14px 12px 14px 20px; } .cu-hub__mod img { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 10px 14px rgba(79,70,236,.3)); transition: transform .5s var(--cu-ease); } .cu-hub__mod b { display: block; font-size: 16px; letter-spacing: -.015em; } .cu-hub__mod small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--cu-dim); } .cu-hub__mod:hover { transform: translateY(-2px); border-color: #d9d3fb; box-shadow: 0 22px 44px -24px rgba(109,70,236,.5); } .cu-hub__mod:hover img { transform: rotate(-6deg) scale(1.06); } html.cu-js .cu-hub.cu-reveal:not(.in) .cu-hub__col:nth-child(2) .cu-hub__mod { opacity: 0; transform: translateX(-28px); } html.cu-js .cu-hub.cu-reveal:not(.in) .cu-hub__col:last-child .cu-hub__mod { opacity: 0; transform: translateX(28px); } html.cu-js .cu-hub.cu-reveal .cu-hub__mod { transition-delay: var(--dl, 0s); } html.cu-js .cu-hub.cu-reveal.in .cu-hub__mod:hover { transition-delay: 0s; } .cu-hub__coeur { position: relative; z-index: 1; display: grid; place-items: center; height: 300px; isolation: isolate; } .cu-hub__coeur::before { content: ""; position: absolute; z-index: -2; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(109,70,236,.34), rgba(79,91,255,.14) 55%, transparent 78%); filter: blur(6px); } /* la puce : la même construction que les icônes (deux verres empilés) */ .cu-hub__puce { position: relative; width: 172px; height: 172px; border-radius: 42px; display: grid; place-items: center; background: linear-gradient(150deg, #5d5cff 0%, #4331d6 42%, #251a7a 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -14px 34px rgba(10,6,50,.5), 0 0 0 1px rgba(255,255,255,.06), 0 34px 70px -26px rgba(59,47,201,.8), 0 0 90px -16px rgba(109,70,236,.6); } .cu-hub__puce::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(150deg, rgba(200,190,255,.85), rgba(160,150,255,.45)); transform: translate(20px, -20px) rotate(7deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .cu-hub__puce::after { content: ""; position: absolute; inset: 1px; border-radius: 41px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%); } .cu-hub__puce .af-marque { font-size: 23px; color: #fff; --af-marque-2: #c9c1ff; text-shadow: 0 0 18px rgba(200,190,255,.6); } html.cu-js .cu-hub.cu-reveal:not(.in) .cu-hub__puce { transform: scale(.82); opacity: 0; } html.cu-js .cu-hub.cu-reveal .cu-hub__puce { transition: transform 1.1s cubic-bezier(.2, 1.35, .3, 1) .15s, opacity .6s var(--cu-ease) .15s; } /* ── Le socle : cinq cartes de verre ───────────────────────────────────── */ .cu-socle { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 36px auto 0; } .cu-carte3d { grid-column: span 2; position: relative; overflow: hidden; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 28px 22px 24px; border-radius: 24px; background: linear-gradient(180deg, #fff, #fbfaff); border: 1px solid var(--cu-line); box-shadow: 0 1px 2px rgba(27,27,47,.04), 0 28px 56px -34px rgba(43,33,112,.42); will-change: transform; } .cu-carte3d:nth-child(1) { grid-column: 2 / span 2; } .cu-carte3d:nth-child(2) { grid-column: 4 / span 2; } .cu-carte3d img { width: 76px; height: 76px; margin-bottom: 10px; filter: drop-shadow(0 14px 18px rgba(79,70,236,.32)); } .cu-carte3d__sur { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--cu-acc); } .cu-carte3d h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.15; } .cu-carte3d p { font-size: 13.5px; line-height: 1.42; color: var(--cu-ink-2); max-width: 30ch; } .cu-carte3d__puce { margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; background: #f1eeff; color: #4b33c9; } .cu-carte3d--vif { background: linear-gradient(160deg, #5a67ff 0%, #6d46ec 52%, #3b2fc9 100%); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 34px 64px -30px rgba(79,70,236,.85); } .cu-carte3d--vif .cu-carte3d__sur { color: #dcd6ff; } .cu-carte3d--vif p { color: rgba(255,255,255,.82); } .cu-carte3d--vif .cu-carte3d__puce { background: rgba(255,255,255,.18); color: #fff; } .cu-carte3d--vif img { filter: drop-shadow(0 14px 22px rgba(20,10,80,.45)); } /* la lumière qui suit le pointeur (cartes, modules, forfaits) */ .cu-carte3d::after, .cu-hub__mod::after, .cu-plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(109,70,236,.1), transparent 62%); } .cu-carte3d--vif::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.2), transparent 62%); } .cu-carte3d:hover::after, .cu-hub__mod:hover::after, .cu-plan:hover::after { opacity: 1; } /* ── La liste « Et aussi » ─────────────────────────────────────────────── */ .cu-liste__tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 30px; } .cu-liste__tete > div:first-child { display: grid; gap: 14px; } .cu-h2--gauche { text-align: left; margin-inline: 0; max-width: 17ch; } .cu-liste__intro { display: grid; gap: 16px; justify-items: start; padding-bottom: 6px; } .cu-liste { border-top: 1px solid var(--cu-line); } .cu-liste > li { border-bottom: 1px solid var(--cu-line); } .cu-liste__ligne { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 46px; align-items: center; gap: 24px; padding: 24px 16px 24px 10px; border-radius: 18px; transition: background .4s var(--cu-ease); } .cu-liste__num { font-size: 13px; font-weight: 700; color: var(--cu-dim); font-variant-numeric: tabular-nums; } .cu-liste__txt b { display: block; font-size: clamp(22px, 2.2vw, 29px); line-height: 1.15; letter-spacing: -.025em; color: #9fa2b4; transition: color .35s; } .cu-liste__txt > span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--cu-dim); max-width: 62ch; transition: color .35s; } .cu-liste__apercu { display: block; width: 0; height: 112px; overflow: hidden; border-radius: 14px; background: #f3f1fc; transition: width .6s var(--cu-ease); } .cu-liste__apercu img { width: 200px; height: 112px; max-width: none; object-fit: cover; object-position: 50% 45%; opacity: 0; transform: scale(1.12) translateX(24px); transition: transform .7s var(--cu-ease), opacity .45s; } .cu-liste__fl { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cu-line); color: var(--cu-ink-2); transform: rotate(90deg); transition: transform .5s var(--cu-ease), background .35s, color .35s, border-color .35s; } .cu-liste__fl svg { width: 16px; height: 16px; } .cu-liste__ligne:hover, .cu-liste__ligne:focus-visible { background: linear-gradient(90deg, #f8f6ff, rgba(248,246,255,0)); outline: none; } .cu-liste__ligne:hover .cu-liste__txt b, .cu-liste__ligne:focus-visible .cu-liste__txt b { color: var(--cu-ink); } .cu-liste__ligne:hover .cu-liste__txt > span, .cu-liste__ligne:focus-visible .cu-liste__txt > span { color: var(--cu-ink-2); } .cu-liste__ligne:hover .cu-liste__fl, .cu-liste__ligne:focus-visible .cu-liste__fl { transform: none; color: #fff; border-color: transparent; background: linear-gradient(140deg, #5a67ff, #6d46ec 55%, #3b2fc9); } @media (hover: hover) { .cu-liste__ligne:hover .cu-liste__apercu, .cu-liste__ligne:focus-visible .cu-liste__apercu { width: 200px; } .cu-liste__ligne:hover .cu-liste__apercu img, .cu-liste__ligne:focus-visible .cu-liste__apercu img { opacity: 1; transform: none; } } /* ── La carte finale : ondes, halo, capture qui monte ──────────────────── */ .cu-final > :not(.cu-final__ondes) { position: relative; z-index: 1; } .cu-final__ondes { position: absolute; inset: 0 0 auto; width: 100%; height: 420px; pointer-events: none; z-index: 0; } .cu-final__ondes path { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.2; } html.cu-js .cu-final.cu-reveal .cu-final__ondes path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--cu-ease); } html.cu-js .cu-final.cu-reveal .cu-final__ondes path:nth-child(2) { transition-delay: .15s; } html.cu-js .cu-final.cu-reveal .cu-final__ondes path:nth-child(3) { transition-delay: .3s; } html.cu-js .cu-final.cu-reveal .cu-final__ondes path:nth-child(4) { transition-delay: .45s; } html.cu-js .cu-final.cu-reveal .cu-final__ondes path:nth-child(5) { transition-delay: .6s; } html.cu-js .cu-final.cu-reveal.in .cu-final__ondes path { stroke-dashoffset: 0; } .cu-final__visual[data-monte] img { will-change: transform; } /* ── Grilles et tarifs : chacun arrive de son côté ───────────────────── Une capture qui déborde à droite glisse depuis la droite (et inversement) ; les forfaits se posent l'un après l'autre. */ html.cu-js .cu-cell--bleed-r.cu-reveal:not(.in) { transform: translate3d(48px, 10px, 0); } html.cu-js .cu-cell--bleed-l.cu-reveal:not(.in) { transform: translate3d(-48px, 10px, 0); } html.cu-js .cu-cell--compo.cu-reveal { transition: opacity 1s var(--cu-ease), transform 1.2s var(--cu-ease); } html.cu-js .cu-plan.cu-reveal:nth-child(2) { transition-delay: .08s; } html.cu-js .cu-plan.cu-reveal:nth-child(3) { transition-delay: .16s; } html.cu-js .cu-plan.cu-reveal:nth-child(4) { transition-delay: .24s; } html.cu-js .cu-plan.cu-reveal.in:hover { transition-delay: 0s; } /* ── Onglets liquides (bascule Mensuel / Annuel, sommaire Fonctionnalités) La pastille est UN élément posé sous les onglets et déplacé par le script (deux ressorts, cf. landing-mouvement.js § 10). Sans script, `.is-liquide` n'existe pas : l'onglet actif garde son propre fond. */ .cu-billing, .cu-sommaire__rail { position: relative; } .is-liquide { isolation: isolate; } .cu-liquide { position: absolute; left: 0; top: 0; z-index: -1; width: 0; pointer-events: none; border-radius: 999px; will-change: transform, width; } .cu-billing.is-liquide { touch-action: pan-y; -webkit-user-select: none; user-select: none; } .cu-billing.is-liquide button { position: relative; transition: color .3s var(--cu-ease); } .cu-billing.is-liquide button.active { background: transparent; box-shadow: none; } .cu-billing .cu-liquide { background: #fff; box-shadow: 0 1px 3px rgba(27,27,47,.1), 0 8px 18px -10px rgba(109,70,236,.45); } .cu-sommaire__rail.is-liquide a { transition: color .3s var(--cu-ease); } .cu-sommaire__rail.is-liquide a[aria-current] { background: transparent; touch-action: pan-y; } .cu-sommaire__rail.is-liquide a span { transition: background .3s, color .3s; } .cu-sommaire__rail .cu-liquide { background: linear-gradient(180deg, #2b2b46, var(--cu-ink)); box-shadow: 0 10px 22px -12px rgba(27,27,47,.7); } .is-glisse { cursor: grabbing; } /* le balancier : l'animation d'entrée cède la place au script, même pose */ html.cu-js .cu-urgences.cu-reveal.in .cu-fil.is-libre { animation: none; opacity: 1; } .cu-fil.is-libre b { cursor: grab; } /* ── Forfaits au téléphone : on les fait glisser au doigt ───────────────── */ .cu-points { display: none; } /* ── Mouvement réduit : tout à sa place, rien ne court ─────────────────── */ @media (prefers-reduced-motion: reduce) { html.cu-js .cu-split:not(.in) .cu-mot > span, html.cu-js .cu-split .cu-mot > span { transform: none; transition: none; } html.cu-js .cu-scene__plan { transform: none; } html.cu-js .cu-faisceau i, html.cu-js .cu-annonce::after { animation: none; opacity: 1; } html.cu-js .cu-annonce::after { opacity: 0; } .cu-defile__piste.is-double { animation: none; } html.cu-js .cu-urgences.cu-reveal .cu-fil, html.cu-js .cu-urgences.cu-reveal .cu-fil::before { animation: none; opacity: 1; transform: translateX(-50%) rotate(var(--r)); transition: none; } html.cu-js .cu-urgences.cu-reveal .cu-fil::before { transform: none; } html.cu-js .cu-manifeste__txt.cu-allume .cu-am { color: var(--cu-ink); } .cu-hub.is-live .cu-hub__pistes .lueur { animation: none; opacity: 0; } html.cu-js .cu-hub.cu-reveal .cu-hub__mod, html.cu-js .cu-hub.cu-reveal .cu-hub__puce, html.cu-js .cu-hub.cu-reveal .cu-hub__pistes .fond { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; } html.cu-js .cu-final.cu-reveal .cu-final__ondes path { stroke-dashoffset: 0; transition: none; } html.cu-js .cu-manifeste__cta.cu-reveal:not(.in) { transform: none; } .cu-aimant { translate: none; } html.cu-js .cu-cell--bleed-r.cu-reveal:not(.in), html.cu-js .cu-cell--bleed-l.cu-reveal:not(.in) { transform: none; } .cu-btn--dark::after, .cu-btn--orbe .cu-btn__orbe, .cu-liste__apercu, .cu-liste__apercu img, .cu-liste__fl { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ ÉCRANS ÉTROITS — la vraie mise en page mobile (2026-09-18) Jusque-là, la vitrine arrivait sur téléphone en largeur fixe 1280 réduite à l'écran (viewport `width=1280`). Jérôme a demandé une version mobile : `device-width`, et tout ce qui suit. Deux paliers : · ≤ 980 px (tablette, téléphone en paysage) : une seule colonne, menu replié derrière un bouton, filets et compositions gardés ; · ≤ 640 px (téléphone) : les plans, le pied de page et les formulaires passent aussi en une colonne, les boutons s'étirent, les titres se resserrent. Ce bloc est EN FIN DE FEUILLE exprès : à spécificité égale il doit passer après les règles de bureau (le bloc « App iPhone » redéfinit `.cu-mobile` plus haut, il gagnait sur l'ancienne requête média). ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 980px) { .cu-wrap { width: calc(100% - 40px); } /* ── En-tête : logo, deux boutons, et le menu replié ── */ .cu-nav { height: 60px; gap: 12px; } .cu-nav__logo { font-size: 20px; } .cu-nav__right { gap: 8px; } .cu-nav__right .cu-link { display: none; } .cu-nav__right .cu-nav__burger { display: inline-flex; } .cu-nav__only-m { display: block; } /* le