/* ---- 00-base.css ---- */ /* Crazy Motion : socle (tokens, typo, composants communs). Voir DESIGN.md. */ :root { --black: #000; --ink: #0a0a0a; --white: #fff; --paper: #edeaea; --surface: #f3f3f3; --line: #e8e8e8; --tint: #edeaea; --tint-2: #e4e0e0; --line-dark: rgba(10, 10, 10, .1); --muted: #8a8585; --muted-dark: #5f636b; --blue: #2f6bff; --blue-deep: #1d4f96; --blue-ink: #0b1b35; --glow: rgba(47, 107, 255, .38); --orange: #ff7a1a; --pink: #efc3cf; --navy: #1b2a4a; --clip-orange: #e0613a; --teal: #14474f; --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: "Instrument Serif", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace; --ease: cubic-bezier(.65, 0, .35, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --gutter: clamp(16px, 5vw, 96px); --maxw: 1440px; --radius: 4px; --header-h: 72px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--blue); color: #fff; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--blue); color: #fff; padding: 10px 14px; font-weight: 700; } .skip:focus { top: 12px; } /* Sections ------------------------------------------------------------------------ */ .cm-sec { position: relative; padding: clamp(88px, 12vw, 180px) var(--gutter); overflow-x: clip; } .cm-sec--light { background: var(--paper); color: var(--ink); } .cm-sec--tint, .cm-sec--dark { background: var(--tint); color: var(--ink); } /* thème clair : --dark est un alias historique du fond nacré */ .cm-wrap { max-width: var(--maxw); margin: 0 auto; } /* Typo ------------------------------------------------------------------------------ */ .cm-display, .cm-h2, .cm-h3 { font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; line-height: 1.02; margin: 0; } .cm-display { font-size: clamp(40px, 6.4vw, 104px); } .cm-h2 { font-size: clamp(32px, 4.6vw, 72px); } .cm-h3 { font-size: clamp(20px, 2vw, 28px); line-height: 1.1; } .cm-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; } .cm-bracket { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .cm-bracket::before { content: "["; font-weight: 400; opacity: .55; } .cm-bracket::after { content: "]"; font-weight: 400; opacity: .55; } .cm-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .cm-eyebrow::before { content: ""; width: 14px; height: 14px; flex: none; background: url("/assets/mark.svg") center / contain no-repeat; } .cm-on-media .cm-eyebrow::before { background-image: url("/assets/mark-white.svg"); } .cm-index { font-style: italic; font-weight: 300; color: var(--muted); font-size: 15px; letter-spacing: 0; } .cm-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; margin: 0; max-width: 46ch; } .cm-lead { color: var(--muted-dark); } .cm-on-media .cm-lead { color: rgba(255, 255, 255, .78); } .cm-muted { color: var(--muted); } .cm-blue { color: var(--blue); } /* Lignes masquées (entrées de titres) */ .cm-line { display: block; overflow: hidden; padding: .08em .1em .18em; margin: -.08em -.1em -.18em; } .cm-line > span { display: block; } /* Boutons ------------------------------------------------------------------------- */ .cm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: var(--radius); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; color: var(--ink); background: rgba(255, 255, 255, .78); border: 1px solid rgba(10, 10, 10, .14); box-shadow: 0 1px 2px rgba(10, 20, 40, .06), inset 0 1px 0 #fff; overflow: hidden; isolation: isolate; white-space: nowrap; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .cm-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 160% at 50% 125%, #2f6bff 0%, #4a80ff 48%, #6f9bff 75%, #8fb3ff 100%); opacity: 0; transform: translateY(35%); transition: opacity .35s var(--ease), transform .45s var(--ease); } .cm-btn:hover, .cm-btn:focus-visible { color: #fff; border-color: #2f6bff; box-shadow: 0 14px 30px -10px rgba(47, 107, 255, .55); } .cm-btn:hover::before, .cm-btn:focus-visible::before { opacity: 1; transform: none; } .cm-btn--primary { color: #fff; background: linear-gradient(180deg, #3d78ff, #2457e6); border-color: #2457e6; box-shadow: 0 12px 28px -12px rgba(47, 107, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25); } .cm-btn--primary::before { background: radial-gradient(120% 140% at 50% 120%, rgba(180, 205, 255, .55), transparent 65%); } .cm-btn--primary:hover { box-shadow: 0 18px 40px -10px rgba(47, 107, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .3); } .cm-btn--light { background: #fff; } .cm-btn--glass { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cm-btn--block { width: 100%; } /* Flèche ↗ qui sort et rentre */ .cm-arr { position: relative; width: 12px; height: 12px; overflow: hidden; flex: none; } .cm-arr svg { position: absolute; inset: 0; width: 12px; height: 12px; transition: transform .45s var(--ease); } .cm-arr svg + svg { transform: translate(-130%, 130%); } a:hover > .cm-arr svg:first-child, button:hover > .cm-arr svg:first-child, a:focus-visible > .cm-arr svg:first-child { transform: translate(130%, -130%); } a:hover > .cm-arr svg + svg, button:hover > .cm-arr svg + svg, a:focus-visible > .cm-arr svg + svg { transform: none; } /* Lien souligné */ .cm-link { position: relative; display: inline-block; } .cm-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .cm-link:hover::after, .cm-link:focus-visible::after { transform: scaleX(1); transform-origin: left; } .cm-link--on::after { transform: scaleX(1); } /* Médias -------------------------------------------------------------------------- */ .cm-media { position: relative; overflow: hidden; } .cm-media img, .cm-media video { width: 100%; height: 100%; object-fit: cover; } .cm-media { background: var(--surface); } /* Étiquette curseur ----------------------------------------------------------------- */ .cm-cursor { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; display: flex; align-items: center; gap: 6px; transform: translate3d(-100px, -100px, 0); } .cm-cursor__tri { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); opacity: 0; transition: opacity .2s; } .cm-cursor__txt { background: #000; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 7px 11px; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .cm-cursor.is-on .cm-cursor__txt { clip-path: inset(0 0 0 0); } .cm-cursor.is-on .cm-cursor__tri { opacity: 1; } @media (hover: none) { .cm-cursor { display: none; } } /* Lecteur vidéo plein écran ---------------------------------------------------------- */ .cm-modal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: clamp(16px, 4vw, 64px); background: rgba(243, 245, 249, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; } .cm-modal.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); } .cm-modal__box { position: relative; width: min(1200px, 100%); } .cm-modal video { width: 100%; max-height: 84vh; background: #000; border-radius: 8px; box-shadow: 0 40px 80px -30px rgba(10, 30, 70, .45); } .cm-modal__close { position: absolute; right: 0; top: -44px; display: inline-flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase; } /* Barre mobile de conversion --------------------------------------------------------- */ .cm-mbar { display: none; } @media (max-width: 760px) { .cm-mbar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 800; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line-dark); box-shadow: 0 10px 30px -12px rgba(10, 30, 70, .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateY(140%); transition: transform .5s var(--ease); } .cm-mbar.is-on { transform: none; } .cm-mbar .cm-btn { min-height: 44px; padding: 0 12px; font-size: 12px; } } /* Révélations génériques (avant JS : visibles) ------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(24px); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ===== V2 : verre, fonds variés, cartes (décision client 15/10) ============================ */ /* Fonds : --deep = sombre flouté (médias derrière, texte blanc) ; --blue = bleu de marque. */ .cm-sec--deep { background: #060b16; color: #fff; } .cm-sec--blue { background: radial-gradient(120% 90% at 20% 0%, #4a80ff 0%, #2f6bff 38%, #1f4fd8 72%, #1a3fb0 100%); color: #fff; } .cm-sec--deep .cm-lead, .cm-sec--blue .cm-lead { color: rgba(255, 255, 255, .78); } .cm-sec--deep .cm-eyebrow::before, .cm-sec--blue .cm-eyebrow::before { background-image: url("/assets/mark-white.svg"); } .cm-sec--deep .cm-index, .cm-sec--blue .cm-index { color: rgba(255, 255, 255, .55); } .cm-sec--deep .cm-btn:not(.cm-btn--primary), .cm-sec--blue .cm-btn:not(.cm-btn--primary) { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .cm-sec--blue .cm-btn--primary { color: var(--blue); background: #fff; border-color: #fff; box-shadow: 0 14px 30px -12px rgba(5, 20, 70, .45); } /* Verre : panneau (sur fond sombre ou média) et variante claire */ .cm-glass { position: relative; border-radius: 18px; color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 60%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 30px 60px -30px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } .cm-glass--light { color: var(--ink); background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(10, 30, 70, .06), inset 0 1px 0 #fff, 0 24px 50px -28px rgba(10, 30, 70, .3); } /* Pastille en verre avec léger reflet */ .cm-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); border: 1px solid rgba(255, 255, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px -12px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } @property --cm-a { syntax: ""; inherits: false; initial-value: 0deg; } .cm-pill { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 -1px 1px rgba(255, 255, 255, .06), 0 8px 24px -12px rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .16); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); } /* reflet qui fait le tour du contour */ .cm-pill::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--cm-a), transparent 0deg, transparent 230deg, rgba(255, 255, 255, .95) 285deg, rgba(160, 195, 255, .6) 310deg, transparent 345deg); -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 exclude, linear-gradient(#000 0 0); animation: cmPillSheen 4.5s linear infinite; } /* lueur interne douce, comme une goutte de verre */ .cm-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, .22), transparent 60%); } @keyframes cmPillSheen { to { --cm-a: 360deg; } } @media (prefers-reduced-motion: reduce) { .cm-pill::before { animation: none; } } .cm-pill--light { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .62)); border-color: rgba(10, 30, 70, .1); box-shadow: inset 0 1px 0 #fff, 0 8px 22px -14px rgba(10, 30, 70, .35); } .cm-pill--on { color: #fff; background: linear-gradient(180deg, #4a80ff, #2f6bff); border-color: #2f6bff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -10px rgba(47, 107, 255, .6); } .cm-pill .cm-dot { width: 7px; height: 7px; border-radius: 50%; background: #5cf08a; box-shadow: 0 0 10px #5cf08a; flex: none; } button.cm-pill { cursor: pointer; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } button.cm-pill:hover { transform: translateY(-1px); } /* Carte à bordure */ .cm-card { position: relative; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 18px 40px -30px rgba(10, 30, 70, .25); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } a.cm-card:hover, .cm-card--hover:hover { transform: translateY(-4px); border-color: #d5ddef; box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 30px 60px -32px rgba(47, 107, 255, .4); } .cm-sec--tint .cm-card { border-color: #e2e6ee; } /* ===== Particules 3D en parallax (.cm-fx) ===== */ .cm-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 900px; } .cm-fx--front { z-index: 4; } .cm-fx__p { position: absolute; left: 0; top: 0; will-change: transform; } .cm-fx__p img { display: block; width: 100%; height: auto; animation: cmFxWobble var(--spin, 9s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); filter: drop-shadow(0 18px 22px rgba(20, 50, 120, .22)); } .cm-fx__p.is-far img { filter: blur(3px) drop-shadow(0 10px 14px rgba(20, 50, 120, .14)); opacity: .8; } .cm-fx__p.is-near img { filter: blur(5px) drop-shadow(0 26px 30px rgba(20, 50, 120, .2)); } .cm-sec--deep .cm-fx__p img, .cm-sec--blue .cm-fx__p img { filter: drop-shadow(0 18px 26px rgba(0, 10, 40, .45)); } /* Oscillation 3D bornée : l'objet bouge en volume sans jamais se présenter de tranche (pas de tour complet) */ @keyframes cmFxWobble { 0% { transform: perspective(600px) rotateX(calc(var(--ax, .3) * 40deg)) rotateY(calc(var(--ay, 1) * -18deg)) rotateZ(calc(var(--az, .2) * -40deg)) translateY(0); } 100% { transform: perspective(600px) rotateX(calc(var(--ax, .3) * -40deg)) rotateY(calc(var(--ay, 1) * 18deg)) rotateZ(calc(var(--az, .2) * 40deg)) translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .cm-fx__p img { animation: none; } } /* ---------- DA V5 (inspiration Designjoy) : calme, précise, titres en casse normale avec un mot en italique ---------- */ body { background: var(--paper); } .cm-display, .cm-h2, .cm-h3 { text-transform: none; font-weight: 600; letter-spacing: -.045em; line-height: 1; } .cm-h2 { font-size: clamp(40px, 5.4vw, 84px); } .cm-h3 { letter-spacing: -.03em; } .cm-display em, .cm-h2 em, .cm-h3 em, .cm-it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; } .cm-eyebrow-mono { display: block; margin: 0 0 22px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .cm-sub { margin: 26px auto 0; max-width: 34em; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.38; letter-spacing: -.015em; color: var(--muted); } .cm-btn { text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 600; border-radius: 999px; padding: 0 24px; min-height: 50px; } /* Mots accentués des titres : trait de surligneur bleu qui se dessine de gauche à droite à l'arrivée à l'écran */ .cm-display em, .cm-h2 em, .cm-h3 em, .cm-it, .s-toss__title em, .s-state__box em { font-style: normal; font-family: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; padding: 0 .06em; margin: 0 -.02em; border-radius: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(180deg, rgba(160, 192, 255, .95), rgba(110, 156, 255, .85)); background-repeat: no-repeat; background-position: 0 86%; background-size: 0% 40%; transition: background-size 1.1s cubic-bezier(.65, 0, .35, 1) .15s; } .cm-display em.is-lit, .cm-h2 em.is-lit, .cm-h3 em.is-lit, .cm-it.is-lit, .s-toss__title em.is-lit, .s-state__box em.is-lit, .no-js .cm-h2 em { background-size: 100% 40%; } @media (prefers-reduced-motion: reduce) { .cm-h2 em, .cm-display em, .cm-it, .s-toss__title em, .s-state__box em { transition: none; background-size: 100% 40%; } } /* ---- 00-loader.css ---- */ /* Loader : anneau de mots + pile de cartes, puis ouverture plein écran */ .s-loader { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; pointer-events: none; } .js .s-loader { display: grid; } .no-loader .s-loader { display: none !important; } .s-loader__hole { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, #ffffff 0%, #f3f5f9 60%, #e4eaf4 100%); } .s-loader__rig { position: relative; width: min(600px, 92vw); aspect-ratio: 1; display: grid; place-items: center; } .s-loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: sLoaderSpin 16s linear infinite; } .s-loader__ring text { fill: #0a0a0a; font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } @keyframes sLoaderSpin { to { transform: rotate(360deg); } } .s-loader__dots { position: absolute; inset: 0; animation: sLoaderSpin 28s linear infinite reverse; } .s-loader__dots i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #0a0a0a; opacity: .7; } .s-loader__stack { position: relative; width: 132px; height: 176px; perspective: 900px; transform-style: preserve-3d; } .s-loader__card { position: absolute; inset: 0; overflow: hidden; background: #e9eef7; transform-origin: 0 50%; backface-visibility: hidden; border-radius: 6px; box-shadow: 0 24px 48px -16px rgba(10, 30, 70, .35); } .s-loader__card img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .s-loader__ring text { font-size: 19px; } .s-loader__stack { width: 104px; height: 138px; } } /* ---- 01-header.css ---- */ /* Header fixe + menu plein écran (voile bleu flou) */ .s-header { position: fixed; inset: 0 0 auto 0; z-index: 700; pointer-events: none; transition: transform .6s var(--ease); } .s-header.is-hidden { transform: translateY(-110%); } .s-header__bar { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; width: min(1180px, calc(100% - 2 * var(--gutter))); height: 60px; margin: 14px auto 0; padding: 0 10px 0 22px; border-radius: 999px; pointer-events: auto; color: var(--ink); isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .48)); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 1px rgba(255, 255, 255, .25), 0 12px 32px -14px rgba(20, 40, 90, .35); transition: color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } /* bord en verre liquide : reflet qui tourne lentement autour de la pilule */ .s-header__bar::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--cm-a, 0deg), rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 25%, rgba(143, 179, 255, .7) 50%, rgba(255, 255, 255, .25) 75%, rgba(255, 255, 255, .95)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sHeaderSheen 9s linear infinite; } @keyframes sHeaderSheen { to { --cm-a: 360deg; } } .s-header__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; } .s-header__logo b { font-weight: 800; color: var(--blue); } .s-header__nav { justify-self: center; } .s-header__nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; } .s-header__nav a { position: relative; display: block; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: inherit; opacity: .78; transition: opacity .25s, background .3s var(--ease), box-shadow .3s var(--ease); } .s-header__nav a:hover, .s-header__nav a:focus-visible { opacity: 1; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 4px 14px -8px rgba(20, 40, 90, .4); outline: none; } .s-header__right { display: flex; align-items: center; gap: 8px; justify-self: end; } .s-header__cta { min-height: 42px; padding: 0 18px; font-size: 12.5px; border-radius: 999px; } .s-header__menu { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff; } .s-header__burger { position: relative; width: 16px; height: 10px; } .s-header__burger i { position: absolute; left: 0; width: 16px; height: 1.6px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); } .s-header__burger i:first-child { top: 1px; } .s-header__burger i:last-child { top: 7px; } .s-header.is-open .s-header__burger i:first-child { top: 4px; transform: rotate(45deg); } .s-header.is-open .s-header__burger i:last-child { top: 4px; transform: rotate(-45deg); } /* Au-dessus d'une section sombre ou bleue : verre fumé, texte blanc */ .s-header.is-on-dark .s-header__bar { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 12px 32px -14px rgba(0, 0, 0, .45); } .s-header.is-on-dark .s-header__logo b { color: #bfe0ff; } .s-header.is-on-dark .s-header__mark rect { stroke: #fff; } .s-header.is-on-dark .s-header__nav a:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .s-header.is-on-dark .s-header__menu { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .s-header.is-on-dark .s-header__cta { color: var(--blue); background: #fff; border-color: #fff; } @media (max-width: 960px) { .s-header__nav, .s-header__cta { display: none; } .s-header__menu { display: inline-flex; } .s-header__bar { height: 56px; margin-top: 10px; padding: 0 6px 0 18px; } } /* Menu */ .s-menu { position: fixed; inset: 0; z-index: 650; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; padding: calc(var(--header-h) + 4vh) var(--gutter) 5vh; color: var(--ink); overflow: hidden; visibility: hidden; opacity: 0; } .s-menu__bg { position: absolute; inset: -10%; z-index: -1; background: linear-gradient(140deg, #f6f8fc 0%, #e4ecfb 40%, #d3e1fb 70%, #eef2fa 100%); } .s-menu__bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .85; will-change: transform; } .s-menu__bg i:nth-child(1) { width: 46vw; height: 46vw; left: 30%; top: 18%; background: radial-gradient(circle, rgba(111, 155, 255, .55), transparent 65%); animation: sMenuA 14s var(--ease) infinite alternate; } .s-menu__bg i:nth-child(2) { width: 38vw; height: 30vw; left: 2%; top: 40%; background: radial-gradient(circle, rgba(255, 255, 255, .95), transparent 70%); animation: sMenuB 17s var(--ease) infinite alternate; } .s-menu__bg i:nth-child(3) { width: 50vw; height: 40vw; right: -6%; bottom: -8%; background: radial-gradient(circle, rgba(47, 107, 255, .35), transparent 68%); animation: sMenuC 19s var(--ease) infinite alternate; } .s-menu__bg i:nth-child(4) { width: 30vw; height: 22vw; right: 18%; top: 4%; background: radial-gradient(circle, rgba(143, 179, 255, .7), transparent 70%); animation: sMenuA 12s var(--ease) infinite alternate-reverse; } @keyframes sMenuA { to { transform: translate(-12vw, 8vh) scale(1.15); } } @keyframes sMenuB { to { transform: translate(14vw, -10vh) scale(.9); } } @keyframes sMenuC { to { transform: translate(-10vw, -6vh) scale(1.2); } } .s-menu__nav { align-self: center; } .s-menu__links { list-style: none; margin: 0; padding: 0; text-align: center; } .s-menu__link { display: block; overflow: hidden; font-size: clamp(44px, 8.4vw, 128px); font-weight: 800; text-transform: uppercase; line-height: 1.02; letter-spacing: -.015em; padding: .02em 0; transition: filter .35s var(--ease), opacity .35s var(--ease); } .s-menu__link span { display: block; } .s-menu__links:hover .s-menu__link:not(:hover), .s-menu__links:focus-within .s-menu__link:not(:focus-visible):not(:hover) { filter: blur(7px); opacity: .55; } .s-menu__metiers, .s-menu__contact { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; } .s-menu__metiers { margin-bottom: 4vh; } .s-menu__metiers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; opacity: .85; } .s-menu__contact-row { display: flex; gap: 48px; } .s-menu .cm-bracket { opacity: .8; } @media (max-width: 760px) { :root { --header-h: 60px; } .s-header__cta { display: none; } .s-header__bar { grid-template-columns: auto 1fr; } .s-header__logo { justify-self: end; font-size: 17px; } .s-menu__contact-row { gap: 28px; } .s-menu__metiers ul { gap: 6px 16px; font-size: 12px; } } /* Logo : les deux rectangles tournent en sens opposés à l'arrivée sur le site, puis à chaque survol */ .s-header__mark { flex: none; overflow: visible; } .s-header__mark rect { transform-box: fill-box; transform-origin: center; } .s-header__r1 { animation: sHeaderR1In 1.4s cubic-bezier(.2, .8, .2, 1) .25s both; } .s-header__r2 { animation: sHeaderR2In 1.4s cubic-bezier(.2, .8, .2, 1) .25s both; } .s-header__logo:hover .s-header__r1, .s-header__logo:focus-visible .s-header__r1 { animation: sHeaderR1Spin .9s cubic-bezier(.6, 0, .2, 1) both; } .s-header__logo:hover .s-header__r2, .s-header__logo:focus-visible .s-header__r2 { animation: sHeaderR2Spin .9s cubic-bezier(.6, 0, .2, 1) both; } @keyframes sHeaderR1In { from { transform: rotate(-270deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sHeaderR2In { from { transform: rotate(270deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sHeaderR1Spin { from { transform: none; } 50% { transform: rotate(90deg) scale(.82); } to { transform: rotate(180deg); } } @keyframes sHeaderR2Spin { from { transform: none; } 50% { transform: rotate(-90deg) scale(.82); } to { transform: rotate(-180deg); } } @media (prefers-reduced-motion: reduce) { .s-header__mark rect { animation: none !important; } } /* ---- 02-hero.css ---- */ /* Hero accueil : une vitre se brise au moment où le titre arrive, puis quelques fragments discrets restent en suspension. */ /* Le fond d'écrans défile déjà derrière la vitre (avant l'entrée du titre) */ .js .s-n1--home.is-bg:not(.is-in) .s-n1__rows { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(1.12); } /* Vitre */ .s-hero__glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; perspective: 1200px; perspective-origin: 50% 46%; --glass: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .035) 26%, rgba(255, 255, 255, .16) 44%, rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .02) 72%, rgba(255, 255, 255, .1) 88%, rgba(255, 255, 255, .03) 100%), linear-gradient(180deg, rgba(190, 215, 255, .08), rgba(120, 160, 255, .03)); } .s-hero__pane { position: absolute; inset: 0; background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .s-hero__glass.is-broken .s-hero__pane { opacity: 0; } .s-hero__piece { position: absolute; transform-style: preserve-3d; will-change: transform, opacity; } .s-hero__piece i { position: absolute; inset: 0; background: var(--glass); background-size: var(--W) var(--H); background-repeat: no-repeat; } .s-hero__piece.is-rim { filter: drop-shadow(0 0 .7px rgba(235, 243, 255, .95)); } .s-hero__cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .s-hero__cracks path { fill: none; stroke: rgba(235, 243, 255, .75); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .s-hero__cracks path.is-ring { stroke: rgba(235, 243, 255, .5); } .s-hero__flash { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(200, 222, 255, .5) 12%, rgba(47, 107, 255, .18) 34%, transparent 66%); opacity: 0; mix-blend-mode: screen; } /* Fragments en suspension après l'éclatement : petits et discrets */ .s-hero__shatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1100px; } .s-hero__shards { position: absolute; inset: 0; } .s-hero__shard { position: absolute; left: 50%; top: 47%; will-change: transform; opacity: 0; } .s-hero__shard img { display: block; width: 100%; height: auto; animation: sHeroDrift var(--dur, 9s) ease-in-out infinite alternate; animation-delay: var(--del, 0s); filter: drop-shadow(0 14px 18px rgba(0, 8, 30, .5)); } .s-hero__shard.is-far img { filter: blur(2px) drop-shadow(0 10px 14px rgba(0, 8, 30, .4)); } @keyframes sHeroDrift { from { transform: perspective(500px) rotateX(calc(var(--ax) * 30deg)) rotateY(calc(var(--ay) * -16deg)) rotateZ(-6deg) translateY(0); } to { transform: perspective(500px) rotateX(calc(var(--ax) * -30deg)) rotateY(calc(var(--ay) * 16deg)) rotateZ(8deg) translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .s-hero__shard img { animation: none; } } /* Apparition liquid glass : flou -> net, légère dilatation */ .js .s-n1 .s-n1__title .cm-line > span { transition: transform 1.1s var(--ease-out) .15s, filter 1.1s var(--ease-out) .15s, opacity .9s var(--ease-out) .15s; } .js .s-n1:not(.is-in) .s-n1__title .cm-line > span { transform: translateY(38%) scale(1.04); filter: blur(16px); opacity: 0; } .js .s-n1 .s-n1__pill { transition: transform 1s cubic-bezier(.2, 1.4, .3, 1), filter .9s var(--ease-out), opacity .7s var(--ease-out); } .js .s-n1:not(.is-in) .s-n1__pill { transform: scale(.82); filter: blur(10px); opacity: 0; } /* ---- 02-toss.css ---- */ /* 02-toss : hero épinglé. La main et l'iPhone (vidéo détourée, image par image) restent à l'écran ; au scroll, le téléphone est lancé, tourne, et le fond passe du ciel au bleu de marque avant le rattrapage. */ .s-toss { position: relative; color: #0b1020; } .s-toss__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; } .s-toss__bg, .s-toss__blue, .s-toss__canvas { position: absolute; inset: 0; } .s-toss__bg { z-index: 0; background: #cfe0f6; } .s-toss__sky { width: 100%; height: 100%; object-fit: cover; } .s-toss__blue { background: radial-gradient(120% 90% at 20% 0%, #4a80ff 0%, #2f6bff 38%, #1f4fd8 72%, #1a3fb0 100%); clip-path: inset(100% 0 0 0); will-change: clip-path; } .s-toss__blue i { position: absolute; border-radius: 50%; filter: blur(10px); } .s-toss__blue i:nth-child(1) { width: 70vw; height: 60vh; left: -18vw; top: -20vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); } .s-toss__blue i:nth-child(2) { width: 60vw; height: 70vh; right: -20vw; bottom: -20vh; background: radial-gradient(closest-side, rgba(120, 200, 255, .35), transparent); } .s-toss__canvas { z-index: 3; width: 100%; height: 100%; pointer-events: none; } .s-toss__screen { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; } .s-toss__copy { position: absolute; z-index: 4; left: clamp(16px, 6vw, 110px); top: 50%; transform: translateY(-50%); width: min(620px, 46vw); } .s-toss__pill { margin: 0 0 22px; } .s-toss__title { margin: 0; font-size: clamp(44px, 5.2vw, 86px); line-height: 1; font-weight: 600; letter-spacing: -.05em; text-wrap: balance; } .s-toss__lead { margin: 22px 0 0; max-width: 36ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; color: #3d4659; } .s-toss__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; } .s-toss__link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #0b1020; } .s-toss__play { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px -6px rgba(11, 16, 32, .35); position: relative; flex: none; } .s-toss__play::after { content: ""; position: absolute; left: 12px; top: 10px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #2f6bff; } .s-toss__copy--scroll { color: #fff; } .s-toss__copy--scroll .s-toss__w { opacity: 0; } .s-toss__big { margin: 0; font-size: clamp(38px, 5vw, 84px); line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; } .s-toss__w--b { color: #bfe0ff; } .s-toss__w { display: inline-block; } /* Entrée */ .js .s-toss__copy--hero > * { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .js .s-toss:not(.is-in) .s-toss__copy--hero > * { opacity: 0; transform: translateY(18px); } .js .s-toss .s-toss__copy--hero > :nth-child(2) { transition-delay: .08s; } .js .s-toss .s-toss__copy--hero > :nth-child(3) { transition-delay: .18s; } .js .s-toss .s-toss__copy--hero > :nth-child(4) { transition-delay: .28s; } @media (max-width: 760px) { .s-toss__copy { top: calc(var(--header-h) + 18px); transform: none; width: auto; right: 16px; left: 16px; } .s-toss__title { font-size: clamp(32px, 9vw, 42px); } .s-toss__lead { font-size: 15.5px; margin-top: 14px; } .s-toss__ctas { margin-top: 20px; } .s-toss__ctas .s-toss__link { display: none; } .s-toss__pill { margin-bottom: 14px; font-size: 12px; } .s-toss__big { font-size: clamp(34px, 10vw, 44px); } } /* Bandeau des plateformes, en bas du hero, sur une bande de verre */ .s-toss__plat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 0 16px; color: #0b1020; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .28)); border-top: 1px solid rgba(255, 255, 255, .7); border-bottom: 0; -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); } .s-toss__plat .s-plat__title { margin-bottom: 10px; color: rgba(11, 16, 32, .55); font-size: 11px; } .s-toss__plat .s-plat__list li { font-size: clamp(15px, 1.2vw, 18px); opacity: .72; } .s-toss__plat .s-plat__list svg { width: clamp(18px, 1.5vw, 22px); } @media (max-width: 760px) { .s-toss__plat { display: none; } } /* Mobile léger : image figée + film masqué, section de hauteur écran, sans épinglage */ .s-toss.is-lite .s-toss__canvas, .s-toss.is-lite .s-toss__copy--scroll, .s-toss.is-lite .s-toss__screen, .s-toss.is-lite .s-toss__blue { display: none; } .s-toss__lite { position: absolute; z-index: 3; right: -4%; bottom: 0; height: 54%; max-width: 92%; pointer-events: none; } .s-toss__lite img, .s-toss__lite-scr { position: absolute; inset: 0; width: 100%; height: 100%; } .s-toss__lite-scr { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; overflow: hidden; } .s-toss__lite-scr video { position: absolute; object-fit: cover; } /* Phase bleue : trois temps de texte, puis la carte de prise de position monte du bas comme du contenu qui défile */ .s-toss__copy--scroll { color: #fff; } .s-toss__copy--scroll .s-toss__w { opacity: 0; display: inline-block; } .s-toss__big { margin: 0; font-size: clamp(44px, 5.4vw, 88px); font-weight: 600; text-transform: none; letter-spacing: -.05em; line-height: 1; } .s-toss__w--b { color: #bfe0ff; } .s-toss__card { position: absolute; z-index: 4; left: clamp(16px, 6vw, 110px); top: 0; width: min(560px, 44vw); padding: clamp(28px, 3vw, 44px); border-radius: 26px; border: 1.5px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .72); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; letter-spacing: -.015em; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 30px 60px -30px rgba(0, 20, 80, .6); transform: translateY(110vh); will-change: transform; } .s-toss__card p { margin: 0; } .s-toss__card em { font-style: normal; color: #fff; } .s-toss__card u { color: #fff; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .s-toss.is-lite .s-toss__card { display: none; } /* ---- 02b-plateformes.css ---- */ /* 02b : bandeau des plateformes de diffusion, logos blancs qui défilent (marques citées à titre informatif) */ .s-plat { overflow: hidden; } .s-plat__title { margin: 0 0 18px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .s-plat__band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .s-plat__track { display: flex; width: max-content; animation: sPlat 40s linear infinite; } .s-plat__band:hover .s-plat__track { animation-play-state: paused; } .s-plat__list { display: flex; margin: 0; padding: 0; list-style: none; } .s-plat__list li { display: inline-flex; align-items: center; gap: 12px; padding: 0 clamp(26px, 3vw, 48px); font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; opacity: .9; } .s-plat__list svg { width: clamp(24px, 2vw, 30px); height: auto; fill: currentColor; flex: none; } @keyframes sPlat { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .s-plat__track { animation: none; } } /* ---- 03-manifeste.css ---- */ /* 03-manifeste : bleu de marque, lueurs bleu clair et blanches en dérive lente, phrases révélées mot à mot au scroll (blanc translucide flou vers blanc net) */ .s-manifeste { --s-manifeste-size: clamp(28px, 4.2vw, 64px); padding: 0; overflow: clip; isolation: isolate; } /* Fond : lueurs radiales en dérive lente */ .s-manifeste__bg { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; } .s-manifeste__blob { position: absolute; display: block; border-radius: 50%; will-change: transform; animation: 22s cubic-bezier(.45, 0, .55, 1) infinite alternate both; } .s-manifeste.is-off .s-manifeste__blob { animation-play-state: paused; } .s-manifeste__blob--a { width: 120vw; height: 66vh; left: -16vw; top: -28vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .26), rgba(200, 222, 255, .1) 55%, transparent); animation-name: sManifesteDriftA; } .s-manifeste__blob--b { width: 82vw; height: 96vh; left: -36vw; top: 26vh; background: radial-gradient(closest-side, rgba(120, 190, 255, .5), rgba(110, 170, 255, .18) 55%, transparent); animation-name: sManifesteDriftB; animation-duration: 26s; } .s-manifeste__blob--c { width: 72vw; height: 76vh; right: -28vw; top: -12vh; background: radial-gradient(closest-side, rgba(150, 205, 255, .42), rgba(130, 190, 255, .12) 60%, transparent); animation-name: sManifesteDriftC; animation-duration: 30s; } .s-manifeste__blob--d { width: 100vw; height: 62vh; right: -24vw; bottom: -30vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 55%, transparent); animation-name: sManifesteDriftD; animation-duration: 24s; } .s-manifeste__vignette { /* centre légèrement plus profond pour la lecture du blanc */ position: absolute; inset: 0; background: radial-gradient(54% 44% at 50% 52%, rgba(22, 56, 170, .42), rgba(22, 56, 170, .14) 60%, transparent 100%); } .s-manifeste__vignette::after { /* grain très fin : évite les bandes dans les dégradés */ content: ""; position: absolute; inset: 0; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes sManifesteDriftA { from { transform: translate3d(-4vw, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.12); } } @keyframes sManifesteDriftB { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(10vw, -14vh, 0) scale(1.15); } } @keyframes sManifesteDriftC { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-12vw, 10vh, 0) scale(.9); } } @keyframes sManifesteDriftD { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14vw, -6vh, 0) scale(1.1); } } /* Scène : version empilée (mobile, mouvement réduit, sans JS) */ .s-manifeste__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: clamp(72px, 10vh, 120px) var(--gutter) clamp(96px, 14vh, 160px); text-align: center; } .s-manifeste__stack { display: grid; width: 100%; } .s-manifeste__item { display: flex; align-items: center; justify-content: center; min-height: 58vh; min-height: 58svh; } .s-manifeste__phrase { margin: 0 auto; max-width: 17em; font-size: var(--s-manifeste-size); font-weight: 800; line-height: 1.06; text-transform: uppercase; letter-spacing: -.012em; text-wrap: balance; color: #fff; text-shadow: 0 2px 30px rgba(10, 30, 110, .18); } .s-manifeste__phrase .s-manifeste__w { will-change: filter; } .s-manifeste__tag { margin: clamp(8px, 2vh, 24px) 0 0; } .s-manifeste__pill { min-height: 40px; padding: 0 18px; font-size: 14px; white-space: normal; text-align: center; line-height: 1.3; } .s-manifeste__foot { display: none; } /* Scène épinglée (desktop) */ .s-manifeste.is-pin { height: 100vh; } .s-manifeste.is-pin .s-manifeste__bg { position: absolute; inset: 0; height: auto; margin: 0; } .s-manifeste.is-pin .s-manifeste__stage { height: 100vh; justify-content: center; padding: var(--header-h) var(--gutter); } .s-manifeste.is-pin .s-manifeste__stack { align-items: center; } .s-manifeste.is-pin .s-manifeste__item { grid-area: 1 / 1; min-height: 0; will-change: transform, opacity; } .s-manifeste.is-pin .s-manifeste__tag { margin-top: clamp(28px, 5vh, 52px); } .s-manifeste.is-pin .s-manifeste__foot { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 4vh, 36px); display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, .78); } .s-manifeste__count { font-size: 14px; } .s-manifeste__cur { color: #fff; } @media (max-width: 760px) { .s-manifeste__stage { padding-top: 40px; padding-bottom: 96px; } .s-manifeste__item { min-height: 64svh; } .s-manifeste__phrase { max-width: 13em; } .s-manifeste__pill { font-size: 13px; padding: 8px 16px; } } /* Dernier palier (Action) : phrase + bouton */ .s-manifeste__item--action { flex-direction: column; gap: clamp(22px, 3.4vh, 34px); } .s-manifeste__micro { margin: -10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); } /* V4 : typographie cinétique au scroll */ .s-manifeste__row { position: absolute; left: 0; z-index: 0; margin: 0; white-space: nowrap; font-size: clamp(90px, 14vw, 240px); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); will-change: transform; pointer-events: none; } .s-manifeste__row--a { top: 8%; } .s-manifeste__row--b { bottom: 6%; } .s-manifeste.is-pin .s-manifeste__bg { overflow: hidden; } .s-manifeste__phrase .s-manifeste__w { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; } .s-manifeste__phrase .s-manifeste__w.is-key { color: #bfe0ff; } .s-manifeste.is-pin .s-manifeste__stage { perspective: 900px; } /* V5 : statique. Les phrases s'empilent normalement, la dernière porte le bouton. */ .s-manifeste__stage { padding: clamp(88px, 11vw, 150px) var(--gutter); gap: 0; } .s-manifeste__stack { gap: clamp(18px, 2.6vw, 34px); max-width: 1100px; margin: 0 auto; } .s-manifeste__item { min-height: 0; } .s-manifeste__phrase { font-size: clamp(28px, 3.6vw, 56px); max-width: 20em; } .s-manifeste__item:not(.s-manifeste__item--action) .s-manifeste__phrase { color: rgba(255, 255, 255, .62); } .s-manifeste__item--action { margin-top: clamp(14px, 2vw, 26px); } .s-manifeste__blob { animation: none !important; } /* ---- 03-promesse.css ---- */ /* 03-promesse : bleu de marque, titre en deux temps, trois cartes « aujourd'hui / avec votre film ». Chaque carte bascule : le problème se barre, la vidéo passe du gris flou à la couleur nette, le gain apparaît. */ .s-promesse { overflow: clip; isolation: isolate; } .s-promesse__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .s-promesse__bg i { position: absolute; display: block; border-radius: 50%; filter: blur(10px); animation: sPromesseDrift 24s cubic-bezier(.45, 0, .55, 1) infinite alternate both; } .s-promesse__bg i:nth-child(1) { width: 70vw; height: 60vh; left: -18vw; top: -20vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); } .s-promesse__bg i:nth-child(2) { width: 60vw; height: 70vh; right: -20vw; top: 20%; background: radial-gradient(closest-side, rgba(120, 200, 255, .38), transparent); animation-duration: 30s; animation-direction: alternate-reverse; } .s-promesse__bg i:nth-child(3) { width: 80vw; height: 50vh; left: 10vw; bottom: -26vh; background: radial-gradient(closest-side, rgba(14, 30, 110, .45), transparent); animation-duration: 34s; } @keyframes sPromesseDrift { to { transform: translate3d(6vw, 4vh, 0) scale(1.08); } } .s-promesse__wrap { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .s-promesse__title { display: flex; flex-direction: column; font-size: clamp(30px, 4vw, 62px); text-wrap: balance; } .s-promesse__title span + span { color: #bfe0ff; } .s-promesse__lead { margin: clamp(16px, 2.4vh, 24px) 0 0; max-width: 46ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .82); } .s-promesse__grid { list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); text-align: left; } .s-promesse__card { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 60px -30px rgba(6, 18, 70, .6); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .s-promesse__card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 40px 70px -30px rgba(6, 18, 70, .75); } .s-promesse__media { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #0d1f5c; } .s-promesse__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) blur(6px) brightness(.7); transform: scale(1.08); transition: filter 1.1s var(--ease-out), transform 1.4s var(--ease-out); } .s-promesse__tag { position: absolute; left: 12px; top: 12px; gap: 8px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(8, 22, 70, .62); border-color: rgba(255, 255, 255, .28); } .s-promesse__num { opacity: .6; font-variant-numeric: tabular-nums; } .s-promesse__body { display: grid; padding: 18px 12px 12px; } .s-promesse__before, .s-promesse__after { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; gap: 8px; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .s-promesse__lab { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .s-promesse__before s { position: relative; text-decoration: none; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.35; color: rgba(255, 255, 255, .78); align-self: flex-start; background: linear-gradient(currentColor, currentColor) 0 58% / 0% 1.5px no-repeat; transition: background-size .7s var(--ease-out); } .s-promesse__after { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.35; font-weight: 700; color: #fff; opacity: 0; transform: translateY(14px); } .s-promesse__after .s-promesse__lab { color: #bfe0ff; font-weight: 700; } /* Bascule */ .s-promesse__card.is-struck .s-promesse__before s { background-size: 100% 1.5px; } .s-promesse__card.is-after .s-promesse__before { opacity: 0; transform: translateY(-14px); } .s-promesse__card.is-after .s-promesse__after { opacity: 1; transform: none; } .s-promesse__card.is-after .s-promesse__media video { filter: none; transform: none; } .s-promesse__cta { margin-top: clamp(36px, 5vh, 56px); display: flex; flex-direction: column; align-items: center; gap: 14px; } .s-promesse__micro { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .7); } /* Entrée */ .js .s-promesse [data-s-promesse-in], .js .s-promesse [data-s-promesse-card] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .js .s-promesse:not(.is-in) [data-s-promesse-in] { opacity: 0; transform: translateY(24px); } .js .s-promesse:not(.is-in) [data-s-promesse-card] { opacity: 0; transform: translateY(48px); } .js .s-promesse.is-in [data-s-promesse-card]:nth-child(2) { transition-delay: .1s; } .js .s-promesse.is-in [data-s-promesse-card]:nth-child(3) { transition-delay: .2s; } @media (max-width: 960px) { .s-promesse__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .s-promesse__media { aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .s-promesse__bg i { animation: none; } } .s-promesse .s-promesse__cta .cm-btn { color: #1f4fd8; background: #fff; border-color: #fff; box-shadow: 0 18px 40px -16px rgba(6, 18, 70, .7); } .s-promesse .s-promesse__cta .cm-btn:hover { color: #fff; } /* Version pilotée par le scroll : GSAP gère l'entrée des cartes, sans transition CSS qui la ralentirait */ .s-promesse.is-scrub { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 20px) 40px; } .s-promesse.is-scrub .s-promesse__card { transition: none; } .js .s-promesse.is-scrub:not(.is-in) [data-s-promesse-card] { opacity: 1; transform: none; } /* ---- 03-statement.css ---- */ /* 03-statement : prise de position, encadré en verre au bord pointillé */ .s-state { padding-block: clamp(72px, 9vw, 130px) clamp(40px, 5vw, 70px); } .s-state__box { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(24px, 6vw, 96px); border: 1.5px dashed rgba(10, 10, 10, .18); border-radius: 28px; text-align: center; text-wrap: balance; font-size: clamp(20px, 2vw, 30px); line-height: 1.42; letter-spacing: -.02em; color: #8a8585; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .15)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8); } .s-state__box em { color: var(--ink); font-size: 1.08em; } .s-state__box u { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } /* ---- 04-pourquoi.css ---- */ /* 04-pourquoi (V3, page calme) : titre centré entouré de visuels studio inclinés en 3D (léger parallax, relief à la souris), puis 4 cartes chiffres en grille, puis le film 16:9 dans un cadre arrondi. */ .s-pourquoi { --s-pourquoi-shadow: 0 1px 2px rgba(10, 20, 40, .06), 0 22px 44px -22px rgba(10, 30, 70, .32); overflow: clip; padding-top: 0; } /* ---------- Titre entouré des visuels ---------- */ .s-pourquoi__hero { position: relative; isolation: isolate; margin: 0 calc(-1 * var(--gutter)); min-height: clamp(560px, 86vh, 860px); display: grid; place-items: center; padding: clamp(96px, 12vh, 140px) var(--gutter); } .s-pourquoi__title { position: relative; z-index: 5; /* au-dessus des particules avant : le titre reste lisible */ max-width: 12.5em; text-align: center; text-wrap: balance; font-size: clamp(32px, 4.6vw, 72px); } .s-pourquoi__hero > .cm-fx { z-index: 1; } .s-pourquoi__hero > .cm-fx--front { z-index: 4; } .s-pourquoi__cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1400px; } .s-pourquoi__card { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--surface); rotate: y var(--ry, 0deg); transform-style: preserve-3d; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(10, 30, 70, .06), 0 40px 70px -30px rgba(20, 50, 120, .45); will-change: transform; } .s-pourquoi__card::before { /* reflet de verre */ content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(130deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 42%); pointer-events: none; } .s-pourquoi__card--sq { aspect-ratio: 1; } .s-pourquoi__card--v { aspect-ratio: 3 / 4; } .s-pourquoi__card img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Cartes chiffres ---------- */ .s-pourquoi__body { position: relative; z-index: 2; } .s-pourquoi__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .s-pourquoi__item { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 2.2vw, 32px); border-radius: 18px; box-shadow: 0 0 0 1px rgba(10, 30, 70, .07), inset 0 1px 0 #fff, 0 36px 70px -40px rgba(10, 30, 70, .38); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } .s-pourquoi__item--blue { color: #fff; background: radial-gradient(120% 120% at 15% 0%, #4a80ff 0%, #2f6bff 45%, #1f4fd8 100%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 28px 56px -26px rgba(31, 79, 216, .6); } .s-pourquoi__num { font-size: 13px; } .s-pourquoi__item--blue .s-pourquoi__num { color: rgba(255, 255, 255, .72); } .s-pourquoi__kw { margin: clamp(18px, 2.4vw, 30px) 0 0; font-size: clamp(28px, 2.4vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; } .s-pourquoi__fact { margin: 12px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--muted-dark); text-wrap: pretty; } .s-pourquoi__fact strong { color: var(--ink); font-weight: 700; } .s-pourquoi__item--blue .s-pourquoi__fact { color: rgba(255, 255, 255, .86); } .s-pourquoi__item--blue .s-pourquoi__fact strong { color: #fff; } .s-pourquoi__src { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #5f636b; transition: color .3s var(--ease); } .s-pourquoi__src:hover, .s-pourquoi__src:focus-visible { color: var(--blue); } .s-pourquoi__src .cm-arr, .s-pourquoi__src .cm-arr svg { width: 10px; height: 10px; } .s-pourquoi__item--blue .s-pourquoi__src { color: rgba(255, 255, 255, .86); } .s-pourquoi__item--blue .s-pourquoi__src:hover, .s-pourquoi__item--blue .s-pourquoi__src:focus-visible { color: #fff; } /* ---------- Film ---------- */ .s-pourquoi__film { position: relative; margin-top: clamp(48px, 6vw, 88px); border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid rgba(10, 30, 70, .08); box-shadow: 0 1px 2px rgba(10, 30, 70, .05), 0 50px 90px -50px rgba(20, 50, 120, .55); } .s-pourquoi__media { position: relative; aspect-ratio: 16 / 9; } .s-pourquoi__video { width: 100%; height: 100%; object-fit: cover; } .s-pourquoi__over { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(20px, 3vw, 44px); background: linear-gradient(0deg, rgba(6, 12, 24, .34) 0%, rgba(6, 12, 24, 0) 45%); pointer-events: none; } .s-pourquoi__panel { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.8vw, 22px); padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px); pointer-events: auto; /* verre sombre : le film est clair, le texte blanc doit rester lisible */ background: linear-gradient(160deg, rgba(10, 20, 44, .62), rgba(10, 20, 44, .42)); border-color: rgba(255, 255, 255, .2); } .s-pourquoi__over-title { margin: 0; font-size: clamp(24px, 2.8vw, 44px); font-weight: 800; line-height: 1.02; text-transform: uppercase; letter-spacing: -.015em; } .s-pourquoi__snd { flex: none; } /* ---------- Tablette ---------- */ @media (max-width: 1100px) { .s-pourquoi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Mobile ---------- */ @media (max-width: 760px) { .s-pourquoi__hero { min-height: 540px; padding: 120px var(--gutter); } .s-pourquoi__title { font-size: clamp(30px, 8.6vw, 38px); } .s-pourquoi__card { display: none; border-radius: 10px; } .s-pourquoi__card--m { display: block; } .s-pourquoi__card--m1 { left: 3%; top: 3%; width: 38%; } .s-pourquoi__card--m2 { left: 64%; top: 7%; width: 32%; } .s-pourquoi__card--m3 { left: 6%; top: 72%; width: 24%; } .s-pourquoi__card--m4 { left: 70%; top: 70%; width: 24%; } .s-pourquoi__list { grid-template-columns: 1fr; gap: 12px; } .s-pourquoi__item { padding: 22px 22px 20px; } .s-pourquoi__kw { margin-top: 14px; font-size: 36px; } .s-pourquoi__src { padding-top: 14px; } /* le film vit dans une carte claire : vidéo puis titre et bouton */ .s-pourquoi__film { margin-top: 40px; padding: 8px; background: #fff; border-color: var(--line); box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 18px 40px -30px rgba(10, 30, 70, .25); border-radius: 18px; } .s-pourquoi__media { border-radius: 12px; overflow: hidden; background: var(--surface); } .s-pourquoi__over { position: relative; inset: auto; padding: 0; background: none; } .s-pourquoi__panel { width: 100%; padding: 18px 10px 10px; color: var(--ink); background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .s-pourquoi__over-title { font-size: 24px; } .s-pourquoi__play { width: 100%; } } /* ---- 04-trio.css ---- */ /* 04-trio : trois grandes cartes sur fonds en dégradés vifs (Briefez / On crée / Recevez). Calme : seule la carte du milieu bouge. */ .s-trio { padding-block: clamp(40px, 5vw, 70px) clamp(80px, 9vw, 130px); } .s-trio__title { max-width: 14em; margin: 0 auto clamp(48px, 6vw, 90px); text-align: center; text-wrap: balance; } .s-trio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 32px); max-width: 1280px; margin: 0 auto; } .s-trio__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: clamp(24px, 2.6vw, 40px); border-radius: 26px; color: #fff; } .s-trio__card::before { content: ""; position: absolute; inset: -10%; z-index: -2; filter: blur(28px) saturate(1.2); } .s-trio__card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .s-trio__card--a { color: #111; } .s-trio__card--a::before { background: radial-gradient(40% 35% at 20% 15%, #ff8a1f, transparent), radial-gradient(45% 40% at 85% 35%, #ffde3b, transparent), radial-gradient(50% 40% at 15% 70%, #ff5ba7, transparent), radial-gradient(60% 50% at 70% 95%, #ffe14d, transparent), #ffc22e; } .s-trio__card--b::before { background: radial-gradient(35% 30% at 25% 18%, #ffe36b, transparent), radial-gradient(35% 30% at 60% 12%, #2fe0a0, transparent), radial-gradient(40% 35% at 85% 30%, #ff6ad5, transparent), radial-gradient(45% 35% at 35% 40%, #00c2ff, transparent), radial-gradient(80% 60% at 50% 100%, #1d2bff, transparent), #2f3dff; } .s-trio__card--c::before { background: radial-gradient(45% 40% at 20% 25%, #ff2d8a, transparent), radial-gradient(40% 35% at 75% 20%, #7a3cff, transparent), radial-gradient(50% 45% at 80% 75%, #ffb21f, transparent), radial-gradient(60% 50% at 20% 95%, #ff6a00, transparent), #ff4e1f; } .s-trio__visual { position: absolute; inset: 0 0 34% 0; display: grid; place-items: center; } .s-trio__h { margin: 0; font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.035em; } .s-trio__p { margin: 10px 0 0; max-width: 22em; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.4; opacity: .85; } /* Carte A : fiche prix en verre fumé */ .s-trio__price { position: absolute; left: 16%; right: -6%; top: 9%; padding: 16px 20px 16px; border-radius: 18px; color: #fff; background: linear-gradient(180deg, rgba(10, 10, 12, .9), rgba(10, 10, 12, .78)); box-shadow: 0 30px 60px -20px rgba(80, 30, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); } .s-trio__price-h { margin: 0; font-size: 15px; font-weight: 600; } .s-trio__price-n { margin: 8px 0 10px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 700; letter-spacing: -.04em; } .s-trio__price-n small { font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .7; } .s-trio__price ul { margin: 0; padding: 12px 14px; list-style: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; display: grid; gap: 6px; font-size: 12px; opacity: .85; } .s-trio__price-btn { display: inline-flex; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(180deg, #4a80ff, #2457e6); font-size: 12.5px; font-weight: 600; } /* Carte B : pastilles en verre qui défilent, logo au centre */ .s-trio__visual--pills { display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; } .s-trio__row { display: flex; gap: 10px; width: max-content; animation: sTrioRow 26s linear infinite; } .s-trio__row--r { animation-direction: reverse; animation-duration: 30s; } .s-trio__row span { padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), 0 8px 20px -10px rgba(0, 0, 60, .5); } @keyframes sTrioRow { to { transform: translateX(-50%); } } .s-trio__mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(92px, 9vw, 128px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 26px; background: linear-gradient(160deg, #2a2a30, #0c0c10); box-shadow: 0 24px 50px -12px rgba(0, 0, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .14); } .s-trio__mark svg { width: 46%; } /* Carte C : éventail de vues de nos films */ .s-trio__visual--fan { perspective: 900px; } .s-trio__shot { position: absolute; border-radius: 14px; object-fit: cover; box-shadow: 0 24px 40px -14px rgba(60, 0, 20, .55); border: 4px solid rgba(255, 255, 255, .9); } .s-trio__shot--1 { width: 54%; aspect-ratio: 16 / 10; left: 8%; top: 22%; rotate: -12deg; } .s-trio__shot--2 { width: 56%; aspect-ratio: 16 / 10; right: 6%; top: 12%; rotate: 9deg; } .s-trio__shot--3 { width: 34%; aspect-ratio: 9 / 16; left: 36%; top: 20%; rotate: -2deg; } @media (max-width: 1000px) { .s-trio__grid { grid-template-columns: 1fr; max-width: 520px; } } @media (prefers-reduced-motion: reduce) { .s-trio__row { animation: none; } } @media (max-width: 760px) { .s-trio__row span { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .2); } .s-trio__price { -webkit-backdrop-filter: none; backdrop-filter: none; } .s-trio__card::before { filter: blur(18px); } } /* ---- 05-formats.css ---- */ /* 05 · Formats (V2) : un film, tous les formats. Section sombre « écran / verre », ~100vh, sans épinglage. Le périphérique change seul en boucle (2,6 s) et se pilote aux pastilles. Cadre en clip-path, reste en transform / opacity. */ .cm-sec.s-formats { --s-formats-dur: .8s; --s-formats-ease: var(--ease); --s-formats-hi: #7aa2ff; position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100svh; max-height: 1040px; padding: calc(var(--header-h) + clamp(28px, 4vh, 56px)) var(--gutter) clamp(40px, 6vh, 72px); display: flex; align-items: center; } /* Fond : rangées d'écrans flous ------------------------------------------------------ */ .s-formats__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .s-formats__row { position: absolute; left: 0; right: 0; height: 42%; } .s-formats__row--a { top: 5%; } .s-formats__row--b { top: 53%; } .s-formats__track { display: flex; height: 100%; width: max-content; will-change: transform; } .s-formats.is-live .s-formats__track { animation: sFormatsDrift 110s linear infinite; } .s-formats.is-live .s-formats__row--b .s-formats__track { animation-duration: 130s; animation-direction: reverse; } .s-formats.is-paused .s-formats__track { animation-play-state: paused; } @keyframes sFormatsDrift { to { transform: translate3d(-50%, 0, 0); } } .s-formats__tile { flex: none; height: 100%; margin-right: clamp(18px, 2vw, 32px); border-radius: 26px; overflow: hidden; background: #1a2233; opacity: .85; } .s-formats__track { align-items: center; } .s-formats__tile:nth-child(3n + 2) { height: 84%; } .s-formats__tile:nth-child(3n) { height: 92%; } .s-formats__row--b .s-formats__tile:nth-child(odd) { height: 86%; } .s-formats__tile > img, .s-formats__tile > video { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: blur(9px) saturate(1.3); transform: scale(1.12); } .s-formats__tile--v { aspect-ratio: 9 / 16; } .s-formats__tile--s { aspect-ratio: 1 / 1; } .s-formats__tile--h { aspect-ratio: 16 / 9; } .s-formats__veil { position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 52%, rgba(47, 107, 255, .2), rgba(47, 107, 255, 0) 70%), linear-gradient(90deg, rgba(6, 11, 22, .93) 0%, rgba(6, 11, 22, .82) 34%, rgba(6, 11, 22, .52) 62%, rgba(6, 11, 22, .62) 100%), linear-gradient(180deg, rgba(6, 11, 22, .55) 0%, rgba(6, 11, 22, 0) 22%, rgba(6, 11, 22, 0) 78%, rgba(6, 11, 22, .7) 100%); } /* Mise en page --------------------------------------------------------------------- */ .s-formats__grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; } .s-formats__title { font-size: clamp(34px, 4vw, 64px); color: #fff; } .s-formats__tl { display: block; width: max-content; transition: color .6s var(--ease); } .s-formats__tl.is-on { color: var(--s-formats-hi); } .s-formats__text { margin-top: 24px; font-size: clamp(16px, 1.25vw, 19px); max-width: 32ch; } .s-formats__calc { display: inline-block; margin-top: 32px; padding: 16px 22px 18px; border-radius: 16px; } .s-formats__calck { margin: 0 0 12px; color: rgba(255, 255, 255, .6); font-size: 11.5px; } .s-formats__eq { display: flex; align-items: flex-start; gap: 12px; margin: 0; } .s-formats__term { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .s-formats__term b { font-size: 30px; font-weight: 800; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .s-formats__term small { font-size: 11.5px; line-height: 1; color: rgba(255, 255, 255, .62); } .s-formats__term--total b { color: var(--s-formats-hi); min-width: 1.2em; } .s-formats__op { font-size: 20px; font-weight: 300; line-height: 27px; color: rgba(255, 255, 255, .45); } .s-formats__cta { display: flex; width: max-content; margin-top: 28px; } .s-formats__show { display: flex; flex-direction: column; align-items: center; min-width: 0; } .s-formats__controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; } .s-formats__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .s-formats__fmt { gap: 7px; } .s-formats__fmt b { font-weight: 800; font-variant-numeric: tabular-nums; } .s-formats__pl { opacity: .78; } .s-formats__fmt.cm-pill--on .s-formats__pl { opacity: 1; } .s-formats__pills--lang .cm-pill { min-height: 30px; min-width: 42px; justify-content: center; padding: 0 11px; font-size: 12px; font-weight: 700; } /* Périphérique ----------------------------------------------------------------------- */ .s-formats__stage { position: relative; width: 100%; height: clamp(400px, calc(100vh - 330px), 620px); } .s-formats__stage > * { position: absolute; left: 0; top: 0; } /* Calques du cadre : débordent de la scène pour que les grands formats puissent s'élargir */ .s-formats__stage > .s-formats__rim, .s-formats__stage > .s-formats__bezel, .s-formats__stage > .s-formats__paper, .s-formats__stage > .s-formats__screen { left: -20%; top: -10%; width: 140%; height: 120%; transition: clip-path var(--s-formats-dur) var(--s-formats-ease), opacity .5s var(--ease); } .s-formats__rim { background: linear-gradient(140deg, #fbfcfd 0%, #b9c0cb 24%, #eef1f5 48%, #9aa3b0 74%, #e6e9ee 100%); } .s-formats__bezel { background: #07080b; } .s-formats__paper { background: #fff; opacity: 0; } .s-formats__stage[data-kind="post"] .s-formats__paper, .s-formats__stage[data-kind="ad"] .s-formats__paper { opacity: 1; } .s-formats__stage[data-kind="post"] .s-formats__bezel, .s-formats__stage[data-kind="ad"] .s-formats__bezel { opacity: 0; } .s-formats__screen { background: #07080b; overflow: hidden; } .s-formats__video { position: absolute; left: 0; top: 0; object-fit: cover; transform-origin: 50% 50%; max-width: none; background: #07080b; } .s-formats__glow { width: 200px; height: 200px; border-radius: 50%; transform-origin: 0 0; background: radial-gradient(closest-side, rgba(70, 120, 255, .5), rgba(47, 107, 255, .16) 55%, rgba(47, 107, 255, 0)); } .s-formats__glow, .s-formats__video, .s-formats__subs, .s-formats__island, .s-formats__bar, .s-formats__base, .s-formats__stand, .s-formats__head, .s-formats__acts, .s-formats__ad { transition: transform var(--s-formats-dur) var(--s-formats-ease), opacity .45s var(--ease); } .s-formats__island, .s-formats__bar, .s-formats__base, .s-formats__stand, .s-formats__head, .s-formats__acts, .s-formats__ad { opacity: 0; } .s-formats__island { border-radius: 999px; background: #000; } .s-formats__stage[data-kind="phone"] .s-formats__island { opacity: 1; } .s-formats__bar { display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #eef0f3; border-bottom: 1px solid #dfe2e7; } .s-formats__bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9ced5; flex: none; } .s-formats__url { margin: 0 auto; padding: 3px 18px; border-radius: 5px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.2; box-shadow: 0 0 0 1px #e3e6eb; } .s-formats__stage[data-kind="laptop"] .s-formats__bar { opacity: 1; } .s-formats__base { transform-origin: 50% 0; border-radius: 2px 2px 14px 14px / 2px 2px 9px 9px; background: linear-gradient(180deg, #f6f7f9 0%, #d3d8df 30%, #aab1bc 78%, #868e9a 100%); box-shadow: 0 22px 40px -18px rgba(47, 107, 255, .55); } .s-formats__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #b3b9c2, #d2d6dc); } .s-formats__stage[data-kind="laptop"] .s-formats__base { opacity: 1; } .s-formats__stand { transform-origin: 50% 0; } .s-formats__stand i { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--s-formats-neck, 30px); transform: translateX(-50%); background: linear-gradient(90deg, #9aa2ad, #eef1f4 45%, #a3abb6); } .s-formats__stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-formats-foot, 8px); border-radius: 4px; background: linear-gradient(180deg, #eef1f4, #a9b0ba); box-shadow: 0 16px 30px -14px rgba(47, 107, 255, .55); } .s-formats__stage[data-kind="screen"] .s-formats__stand { opacity: 1; } .s-formats__head { display: flex; align-items: center; gap: 9px; color: var(--ink); white-space: nowrap; } .s-formats__avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background: url("/assets/mark-white.svg") center / 52% no-repeat, linear-gradient(135deg, #3d78ff, #18b4e6); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d9dee6; } .s-formats__who { display: flex; flex-direction: column; line-height: 1.15; } .s-formats__who b { font-size: 12.5px; font-weight: 700; } .s-formats__who small { font-size: 10.5px; color: var(--muted-dark); max-height: 0; opacity: 0; transition: opacity .4s var(--ease); } .s-formats__stage[data-kind="ad"] .s-formats__who small { max-height: none; opacity: 1; } .s-formats__acts { display: flex; align-items: center; gap: 14px; } .s-formats__acts svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; } .s-formats__stage[data-kind="post"] .s-formats__head, .s-formats__stage[data-kind="ad"] .s-formats__head, .s-formats__stage[data-kind="post"] .s-formats__acts, .s-formats__stage[data-kind="ad"] .s-formats__acts { opacity: 1; } .s-formats__ad { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #f1f3f6; border-bottom: 1px solid #e6e8ec; font-size: 12.5px; font-weight: 700; color: var(--ink); } .s-formats__ad svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .s-formats__stage[data-kind="ad"] .s-formats__ad { opacity: 1; } /* Sous-titres multilingues */ .s-formats__subs { display: grid; pointer-events: none; } .s-formats__subline { grid-area: 1 / 1; justify-self: center; align-self: end; margin: 0; max-width: 100%; padding: 6px 11px 7px; border-radius: 6px; background: rgba(8, 12, 22, .66); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .6s var(--ease-out); } .s-formats__subline.is-on { opacity: 1; transform: none; } .s-formats__subline.is-out { opacity: 0; transform: translateY(-10px); } .s-formats__subtag { display: inline-block; margin-right: 8px; padding: 2px 5px 1px; border-radius: 3px; vertical-align: 1px; background: var(--blue); font-size: 10px; letter-spacing: .04em; } .s-formats__stage.is-instant, .s-formats__stage.is-instant * { transition: none !important; } /* Écrans moyens ---------------------------------------------------------------------- */ @media (max-width: 1100px) and (min-width: 761px) { .s-formats__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; } .s-formats__pl { display: none; } } @media (max-height: 760px) and (min-width: 761px) { .s-formats__calc { margin-top: 22px; } .s-formats__cta { margin-top: 20px; } } /* Mobile : même principe, plus compact ------------------------------------------------- */ @media (max-width: 760px) { .cm-sec.s-formats { display: block; min-height: 0; max-height: none; padding: 80px var(--gutter) 72px; } .s-formats__row { height: 34%; } .s-formats__row--a { top: 4%; } .s-formats__row--b { top: 52%; } .s-formats__tile { border-radius: 18px; margin-right: 14px; } .s-formats__veil { background: radial-gradient(80% 40% at 50% 52%, rgba(47, 107, 255, .2), rgba(47, 107, 255, 0) 70%), linear-gradient(180deg, rgba(6, 11, 22, .9) 0%, rgba(6, 11, 22, .72) 30%, rgba(6, 11, 22, .62) 60%, rgba(6, 11, 22, .9) 100%); } .s-formats__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .s-formats__show { align-self: stretch; } .s-formats__intro { display: contents; } .s-formats__title { order: 1; font-size: clamp(30px, 9vw, 38px); } .s-formats__text { order: 2; margin-top: 16px; font-size: 16px; } .s-formats__show { order: 3; margin: 26px 0 0; } .s-formats__stage { height: min(112vw, 460px); } .s-formats__controls { gap: 10px; margin-top: 18px; } .s-formats__pills { gap: 6px; } .s-formats__fmt { min-height: 32px; padding: 0 11px; font-size: 12px; gap: 5px; } .s-formats__calc { order: 4; display: block; margin-top: 28px; padding: 14px 16px 16px; } .s-formats__eq { justify-content: space-between; gap: 6px; } .s-formats__term b { font-size: 26px; } .s-formats__cta { order: 5; width: 100%; margin-top: 16px; } } /* ---- 06-approche.css ---- */ /* 06 · Approche : data + design thinking. Anneau 3D de cartes en gravitation autour du titre. Positions calculées par carte en JS (transform + opacity uniquement). */ .cm-sec.s-approche { padding: 0 0 clamp(88px, 10vw, 160px); } .s-approche { --s-approche-card-w: 200px; --s-approche-card-h: 250px; } .s-approche__pin { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: radial-gradient(44% 38% at 50% 50%, rgba(47, 107, 255, .1), rgba(47, 107, 255, 0) 72%), #fff; } .s-approche__scene { position: absolute; inset: 0; perspective: 1700px; } .s-approche__world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; } .s-approche__card { position: absolute; left: 0; top: 0; margin: 0; width: var(--s-approche-card-w); height: var(--s-approche-card-h); margin-left: calc(var(--s-approche-card-w) / -2); margin-top: calc(var(--s-approche-card-h) / -2); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 50px -28px rgba(18, 44, 110, .5), 0 0 0 1px rgba(10, 30, 70, .06); will-change: transform, opacity; backface-visibility: visible; } .s-approche__card img { width: 100%; height: 100%; object-fit: cover; } .s-approche__head { position: absolute; left: 0; top: 0; width: max-content; max-width: var(--s-approche-head-w, 92vw); text-align: center; transform: translate(-50%, -50%); } .s-approche__title { font-size: clamp(30px, 3.5vw, 58px); color: var(--ink); } .s-approche__tl { display: block; text-wrap: balance; } /* Sous l'anneau : une phrase, trois cartes, un contraste ---------------------------- */ .s-approche__body { padding: clamp(40px, 5vw, 80px) var(--gutter) 0; box-sizing: content-box; } .s-approche__lead { margin: 0 auto; max-width: 52ch; text-align: center; font-size: clamp(17px, 1.4vw, 21px); } .s-approche__pillars { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); } .s-approche__pillar { padding: clamp(24px, 2.4vw, 36px); padding-right: clamp(110px, 9vw, 140px); min-width: 0; overflow: hidden; } .s-approche__pillar p { margin: 0; } .s-approche__icon { position: absolute; top: clamp(12px, 1.4vw, 20px); right: clamp(10px, 1.2vw, 18px); width: clamp(84px, 7.6vw, 116px); height: auto; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(47, 107, 255, .22)); } .s-approche__k { color: var(--blue); } .s-approche__pillar .s-approche__v { margin: clamp(36px, 4vw, 64px) 0 10px; font-size: clamp(40px, 4vw, 64px); font-weight: 800; line-height: .95; letter-spacing: -.03em; white-space: nowrap; color: var(--ink); } .s-approche__t { font-size: 15px; line-height: 1.5; color: var(--muted-dark); max-width: 30ch; } .s-approche__contrast { position: relative; overflow: hidden; margin: clamp(14px, 1.6vw, 24px) 0 0; padding: clamp(40px, 6vw, 96px) clamp(28px, 6vw, 96px); border-radius: 24px; color: #fff; background: radial-gradient(120% 140% at 15% 0%, #4a80ff 0%, #2f6bff 40%, #1f4fd8 75%, #1a3fb0 100%); box-shadow: 0 30px 60px -36px rgba(31, 79, 216, .7); } .s-approche__contrast::before { content: ""; position: absolute; right: clamp(24px, 7vw, 120px); top: 50%; width: clamp(120px, 20vw, 300px); aspect-ratio: 1; transform: translateY(-50%) rotate(-8deg); background: url("/assets/mark-white.svg") center / contain no-repeat; opacity: .16; pointer-events: none; } .s-approche__contrast::after { content: ""; position: absolute; right: -6%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; } .s-approche__contrast p { position: relative; margin: 0; max-width: 23ch; font-size: clamp(30px, 4vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; } .s-approche__contrast p span { display: block; color: rgba(255, 255, 255, .74); } @media (max-width: 1000px) and (min-width: 761px) { .s-approche__pillar { padding-right: 24px; padding-top: 96px; } .s-approche__pillar .s-approche__v { margin-top: 12px; font-size: clamp(32px, 4.2vw, 44px); } } /* Mobile : pas de pin, anneau compact qui se forme à l'entrée puis tourne ---------------- */ @media (max-width: 760px) { .cm-sec.s-approche { padding-bottom: 80px; } .s-approche__pin { height: auto; min-height: 0; padding: 0; } .s-approche__scene { position: relative; height: var(--s-approche-scene-h, 600px); inset: auto; } .s-approche__card { border-radius: 10px; box-shadow: 0 16px 28px -16px rgba(18, 44, 110, .5), 0 0 0 1px rgba(10, 30, 70, .06); } .s-approche__title { font-size: clamp(24px, 6.8vw, 30px); margin-top: 0; } .s-approche__body { padding: 28px var(--gutter) 0; } .s-approche__lead { font-size: 17px; } .s-approche__pillars { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; } .s-approche__pillar { padding: 22px 110px 24px 22px; } .s-approche__icon { width: 88px; top: 14px; right: 12px; } .s-approche__pillar .s-approche__v { font-size: 44px; margin: 22px 0 8px; } .s-approche__contrast { margin-top: 12px; padding: 36px 24px 40px; border-radius: 20px; } .s-approche__contrast p { font-size: 29px; } .s-approche__contrast::before { width: 120px; right: -18px; top: auto; bottom: -30px; transform: rotate(-8deg); } } /* ---- 07-projets.css ---- */ /* 07-projets : deux cartes. À gauche le film ; à droite les projets en anneau. Au clic, la carte s'ouvre en plein écran et l'anneau devient un tambour qu'on fait tourner (facultatif : rien n'oblige à scroller). */ .s-projets { padding-block: clamp(80px, 9vw, 140px); } .s-projets__head { text-align: center; margin-bottom: clamp(40px, 5vw, 70px); } .s-projets__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); max-width: 1280px; margin: 0 auto; } .s-projets__card { position: relative; overflow: hidden; height: clamp(420px, 40vw, 600px); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .42)); box-shadow: inset 0 1px 1px #fff, 0 24px 60px -32px rgba(20, 40, 90, .4); } /* Film */ .s-projets__filmbtn { position: absolute; inset: 12px 12px 92px; display: block; overflow: hidden; border-radius: 18px; cursor: pointer; background: #111; } .s-projets__filmbtn video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .s-projets__filmbtn:hover video { transform: scale(1.03); } .s-projets__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 12px 30px -10px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s var(--ease-out); } .s-projets__play::after { content: ""; position: absolute; left: 31px; top: 25px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 20px solid #fff; } .s-projets__filmbtn:hover .s-projets__play { transform: scale(1.08); } .s-projets__meta { position: absolute; left: 28px; right: 28px; bottom: 24px; } .s-projets__h { margin: 0; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.03em; } .s-projets__p { margin: 4px 0 0; font-size: 15px; color: var(--muted); } /* Roue */ .s-projets__works { cursor: default; user-select: none; -webkit-user-select: none; } .s-projets__stage { position: absolute; inset: 0; outline: none; } .s-projets__wheel { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; } .s-projets__item { position: absolute; display: block; padding: 0; border: 0; background: none; backface-visibility: hidden; cursor: pointer; } .s-projets__item span { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: #ddd; box-shadow: 0 18px 40px -18px rgba(10, 20, 50, .45); transform-origin: center; } .s-projets__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .s-projets__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; font-size: clamp(30px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.04em; } .s-projets__label small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); } .s-projets__open { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; z-index: 3; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #7aa6ff 0%, #3f78ff 40%, #1f55e8 78%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 24px -10px rgba(31, 85, 232, .7); transition: transform .3s var(--ease-out); } .s-projets__open:hover { transform: translateY(-2px); } .s-projets__ftitle { position: absolute; left: 6%; top: 50%; translate: 0 -50%; max-width: 22%; opacity: 0; pointer-events: none; font-size: clamp(24px, 2.6vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; } .s-projets__index { position: absolute; right: 2.5%; top: 12%; margin: 0; padding: 0; list-style: none; text-align: right; opacity: 0; pointer-events: none; font-size: 14px; line-height: 1.9; } .s-projets__index button { color: var(--muted); transition: color .3s; } .s-projets__index .is-on button { color: var(--ink); font-weight: 600; } .s-projets__close { position: absolute; right: 22px; top: 22px; z-index: 4; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; opacity: 0; pointer-events: none; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .7)); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(20, 30, 60, .45); } .s-projets__close svg { width: 20px; } .s-projets__hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; font-size: 13px; color: var(--muted); opacity: 0; pointer-events: none; white-space: nowrap; } /* Ouvert */ .s-projets__works.is-open { position: fixed; z-index: 800; margin: 0; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } .s-projets__works.is-open .s-projets__stage { cursor: grab; } .s-projets__works.is-open .s-projets__open { opacity: 0; pointer-events: none; } .s-projets__works.is-full .s-projets__index, .s-projets__works.is-full .s-projets__close, .s-projets__works.is-full .s-projets__hint { opacity: 1; pointer-events: auto; transition: opacity .5s var(--ease-out) .2s; } .s-projets__ph { visibility: hidden; } @media (max-width: 900px) { .s-projets__duo { grid-template-columns: 1fr; } .s-projets__ftitle { left: 16px; top: auto; bottom: 64px; translate: none; max-width: 70%; font-size: 22px; } .s-projets__index { display: none; } } .s-projets__works.is-open .s-projets__stage { touch-action: none; } /* Mobile ouvert : liste horizontale native, cartes larges, un toucher = la vidéo */ .s-projets__works.is-list { top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; } .s-projets__works.is-list .s-projets__stage { position: absolute; inset: 0; perspective: none !important; touch-action: auto; display: flex; align-items: center; } .s-projets__works.is-list .s-projets__wheel { position: static; display: flex; gap: 14px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 9vw; transform: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .s-projets__works.is-list .s-projets__wheel::-webkit-scrollbar { display: none; } .s-projets__works.is-list .s-projets__item { position: relative; flex: 0 0 82vw; height: auto !important; width: auto !important; margin: 0 !important; aspect-ratio: 16 / 10; scroll-snap-align: center; transform: none !important; opacity: 1 !important; } .s-projets__works.is-list .s-projets__item::after { content: attr(aria-label); position: absolute; left: 0; right: 0; top: calc(100% + 12px); font-size: 17px; font-weight: 600; letter-spacing: -.02em; text-align: left; color: var(--ink); } .s-projets__works.is-list .s-projets__label, .s-projets__works.is-list .s-projets__ftitle { display: none; } .s-projets__works.is-list .s-projets__hint::before { content: "Glissez pour voir les projets · touchez pour regarder"; } .s-projets__works.is-list .s-projets__hint { font-size: 0; } .s-projets__works.is-list .s-projets__hint::before { font-size: 13px; } /* Mobile : pas de flou en mouvement (coûteux sur les téléphones modestes) */ @media (max-width: 760px) { .s-projets__card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .7); height: 440px; } } .s-projets__cta { position: absolute; right: 90px; top: 22px; z-index: 4; opacity: 0; pointer-events: none; } .s-projets__works.is-full .s-projets__cta { opacity: 1; pointer-events: auto; transition: opacity .5s var(--ease-out) .2s; } .s-projets__works.is-list .s-projets__wheel { padding-bottom: 48px; align-items: flex-start; } @media (max-width: 760px) { .s-projets__cta { right: auto; left: 16px; top: 24px; min-height: 46px; } } /* ---- 08-services.css ---- */ /* 08 : services (fond nacré). Statique : titre, grille 4x2 (2 colonnes en mobile), bouton. Bureau : .is-stage (ajoutée par le JS) = scène épinglée plein écran, cartes pilotées par le scroll. */ .s-services { --s-services-card: clamp(120px, min(11.6vw, 18.5vh), 200px); --s-services-gx: clamp(36px, 3.8vw, 64px); --s-services-gy: clamp(28px, 4.4vh, 52px); text-align: center; overflow: hidden; } .s-services__stage { position: relative; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; } /* Titre : phrase puis mot */ .s-services__title { display: grid; justify-items: center; gap: 12px; margin: 30px 0 clamp(52px, 6vw, 84px); font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; line-height: 1.02; } .s-services__phrase { font-size: clamp(19px, 2.1vw, 32px); } .s-services__word { font-size: clamp(42px, 5.6vw, 92px); letter-spacing: -.02em; } .s-services__mask { display: block; overflow: hidden; padding: .04em .06em .1em; margin: -.04em -.06em -.1em; } .s-services__in { display: block; } .s-services__wd { display: inline-block; } /* Grille de cartes */ .s-services__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, var(--s-services-card)); justify-content: center; column-gap: var(--s-services-gx); row-gap: var(--s-services-gy); } .s-services__item { display: flex; flex-direction: column; align-items: center; min-width: 0; } .s-services__slot { position: relative; display: block; width: var(--s-services-card); aspect-ratio: 1 / 1; } .s-services__card, .s-services__ghost { display: block; overflow: hidden; border-radius: 12px; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(10, 30, 70, .07), 0 2px 4px rgba(10, 30, 70, .04), 0 26px 46px -26px rgba(10, 30, 70, .38); } .s-services__card { position: absolute; inset: 0; transform: rotate(var(--r, 0deg)); } .s-services__card img, .s-services__ghost img { width: 100%; height: 100%; object-fit: cover; } .s-services__item:nth-child(1) .s-services__card { --r: -6deg; } .s-services__item:nth-child(2) .s-services__card { --r: 4deg; } .s-services__item:nth-child(3) .s-services__card { --r: -3deg; } .s-services__item:nth-child(4) .s-services__card { --r: 7deg; } .s-services__item:nth-child(5) .s-services__card { --r: 5deg; } .s-services__item:nth-child(6) .s-services__card { --r: -7deg; } .s-services__item:nth-child(7) .s-services__card { --r: 3deg; } .s-services__item:nth-child(8) .s-services__card { --r: -4deg; } /* Libellés : pastilles en verre clair, texte tapé lettre à lettre (lettres découpées par le JS) */ .s-services__label { margin: 20px 0 0; width: max-content; max-width: calc(var(--s-services-card) + var(--s-services-gx) - 10px); min-height: 34px; padding: 7px 15px; border-radius: 18px; white-space: normal; justify-content: center; text-align: center; font-size: clamp(12px, .94vw, 13.5px); font-weight: 600; line-height: 1.25; letter-spacing: 0; text-wrap: balance; } @media (min-width: 1280px) { .s-services__label { max-width: calc(var(--s-services-card) + var(--s-services-gx) + 16px); } } .s-services__w { display: inline-block; white-space: nowrap; } .s-services__c { display: inline-block; white-space: pre; } .s-services__trail { display: none; } .s-services__cta { margin-top: clamp(52px, 6vw, 80px); } /* Scène épinglée (bureau, mouvement autorisé) ------------------------------------------- */ .s-services.is-stage { padding: 0; } .is-stage .s-services__stage { height: 100vh; max-width: none; justify-content: center; overflow: hidden; } .is-stage .s-services__eyebrow { position: absolute; z-index: 3; top: calc(var(--header-h) + 22px); left: 50%; transform: translateX(-50%); } .is-stage .s-services__title { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; } .is-stage .s-services__phrase, .is-stage .s-services__word { grid-area: 1 / 1; } .is-stage .s-services__word { will-change: opacity, transform; } .is-stage .s-services__grid { position: relative; z-index: 2; margin-top: 4vh; } .is-stage .s-services__card, .is-stage .s-services__ghost { will-change: transform, opacity; backface-visibility: hidden; } .is-stage .s-services__trail { display: block; position: absolute; z-index: 1; inset: 0; pointer-events: none; } .s-services__ghost { position: absolute; left: 50%; top: 50%; width: var(--s-services-card); aspect-ratio: 1 / 1; margin: calc(var(--s-services-card) / -2) 0 0 calc(var(--s-services-card) / -2); opacity: 0; } .is-stage .s-services__cta { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(28px, 6.5vh, 68px); margin: 0; display: flex; justify-content: center; } /* Mobile : pas d'épinglage, grille 2 colonnes ------------------------------------------------- */ @media (max-width: 760px) { .s-services__title { gap: 8px; margin: 22px 0 44px; } .s-services__phrase { font-size: 17px; } .s-services__word { font-size: clamp(38px, 11.4vw, 52px); } .s-services__grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 34px; } .s-services__slot { width: 100%; } .s-services__label { margin-top: 14px; max-width: 100%; padding: 7px 12px; font-size: 12.5px; } .s-services__cta { margin-top: 48px; } } /* ---- 09-methode.css ---- */ /* 09-methode (V2) : section sombre vivante, titre blanc + phrase en verre, puis timeline épinglée de cartes en verre qui embarquent chacune un petit écran clair animé. */ .s-methode { --s-methode-step: 120px; --s-methode-card: clamp(330px, 26vw, 392px); --s-methode-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); padding: 0; } /* Fond vivant : collant sur toute la hauteur de la section */ .s-methode__fx { position: sticky; top: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; background: #060b16; } .s-methode__glow { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; } .s-methode__glow--1 { width: 62vw; height: 62vw; left: -18vw; top: 8vh; background: radial-gradient(closest-side, rgba(47, 107, 255, .55), rgba(47, 107, 255, 0)); animation: sMethodeDriftA 24s var(--ease) infinite alternate; } .s-methode__glow--2 { width: 46vw; height: 46vw; right: -12vw; top: -14vh; background: radial-gradient(closest-side, rgba(24, 180, 230, .32), rgba(24, 180, 230, 0)); animation: sMethodeDriftB 30s var(--ease) infinite alternate; } .s-methode__glow--3 { width: 70vw; height: 50vw; left: 22vw; bottom: -30vh; background: radial-gradient(closest-side, rgba(29, 79, 150, .7), rgba(29, 79, 150, 0)); animation: sMethodeDriftC 27s var(--ease) infinite alternate; } .s-methode__glow--4 { width: 34vw; height: 34vw; left: 52vw; top: 30vh; background: radial-gradient(closest-side, rgba(126, 92, 255, .3), rgba(126, 92, 255, 0)); animation: sMethodeDriftD 21s var(--ease) infinite alternate; } @keyframes sMethodeDriftD { to { transform: translate3d(-26vw, 18vh, 0) scale(1.25); } } @keyframes sMethodeDriftA { to { transform: translate3d(22vw, 12vh, 0) scale(1.15); } } @keyframes sMethodeDriftB { to { transform: translate3d(-18vw, 22vh, 0) scale(.9); } } @keyframes sMethodeDriftC { to { transform: translate3d(-16vw, -14vh, 0) scale(1.1); } } .s-methode__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(6, 11, 22, 0) 35%, rgba(4, 8, 18, .78) 100%); } .s-methode__grain { position: absolute; inset: -60px; background-image: var(--s-methode-noise); opacity: .14; mix-blend-mode: overlay; animation: sMethodeGrain .9s steps(5) infinite; } @keyframes sMethodeGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 14px); } 50% { transform: translate(18px, -26px); } 75% { transform: translate(-10px, -12px); } 100% { transform: translate(24px, 20px); } } .s-methode__intro, .s-methode__pin { position: relative; z-index: 1; } /* (a) Titre + phrase en verre */ .s-methode__intro { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 32px) var(--gutter) 80px; } .s-methode__head { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 3vw, 40px); text-align: center; } .s-methode__title { color: #fff; font-size: clamp(36px, 5.6vw, 92px); text-shadow: 0 10px 50px rgba(5, 15, 40, .5); } .s-methode__glass { max-width: 520px; padding: 18px 26px; border-radius: 14px; } .s-methode__text { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, .86); } /* (b) Piste ------------------------------------------------------------------------- */ .s-methode__pin { padding: clamp(40px, 6vw, 96px) 0 clamp(72px, 9vw, 130px); } .s-methode__viewport { position: relative; } .s-methode__reel { padding: 0 var(--gutter); } .s-methode__ruler { position: relative; height: 46px; margin-bottom: 26px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .14); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px var(--s-methode-step)) left bottom / 100% 14px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px calc(var(--s-methode-step) / 5)) left bottom / 100% 7px no-repeat; } .s-methode__nums { position: absolute; inset: 0; } .s-methode__nums span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 13px; font-style: italic; font-weight: 300; color: rgba(255, 255, 255, .5); line-height: 1; } .s-methode__nums span:first-child { transform: none; } .s-methode__row { display: flex; flex-direction: column; gap: 20px; } .s-methode__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; } .s-methode__card { display: flex; flex-direction: column; gap: 20px; padding: 22px 20px 20px; transition: border-color .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease); } .s-methode__card::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; border-radius: 1px; background: linear-gradient(90deg, rgba(120, 165, 255, 0), #8fb3ff, rgba(120, 165, 255, 0)); opacity: 0; transition: opacity .5s var(--ease); } .s-methode__card.is-active { border-color: rgba(143, 179, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(47, 107, 255, .25), 0 40px 90px -40px rgba(47, 107, 255, .75); } .s-methode__card.is-active::after { opacity: 1; } .s-methode__step { margin: 0 0 10px; } .s-methode__card-title { margin: 0; color: #fff; } .s-methode__card-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); max-width: 34ch; } .s-methode__end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 220px; padding: 28px 24px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .02); } .s-methode__plus { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .s-methode__plus::before, .s-methode__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: #fff; } .s-methode__plus::after { transform: rotate(90deg); } .s-methode__playhead { display: none; } /* Desktop : piste épinglée, défilement horizontal (classe posée par le JS) */ .s-methode--scrub .s-methode__pin { height: 100vh; padding: var(--header-h) 0 12px; display: flex; flex-direction: column; justify-content: center; } .s-methode--scrub .s-methode__viewport { overflow: hidden; padding: 34px 0 60px; margin: -28px 0 -60px; } .s-methode--scrub .s-methode__reel { width: max-content; will-change: transform; } .s-methode--scrub .s-methode__row { flex-direction: row; align-items: stretch; gap: 24px; } .s-methode--scrub .s-methode__track { display: flex; gap: 24px; } .s-methode--scrub .s-methode__card { width: var(--s-methode-card); flex: none; } .s-methode--scrub .s-methode__end { width: clamp(260px, 20vw, 320px); flex: none; margin-left: 24px; } .s-methode--scrub .s-methode__playhead { display: block; position: absolute; top: 34px; left: 20%; width: 0; height: 74px; z-index: 3; pointer-events: none; } .s-methode__playhead::before { content: ""; position: absolute; left: -.5px; top: 12px; bottom: 0; width: 1px; background: linear-gradient(180deg, #6f9bff, rgba(47, 107, 255, 0)); box-shadow: 0 0 8px rgba(47, 107, 255, .8); } .s-methode__ph-head { position: absolute; left: -7px; top: 0; width: 14px; height: 16px; background: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); filter: drop-shadow(0 0 6px rgba(47, 107, 255, .9)); } .s-methode__tc { position: absolute; left: 0; top: -26px; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; color: #fff; background: var(--blue); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 18px -4px rgba(47, 107, 255, .9); font-variant-numeric: tabular-nums; } /* (c) Mini-interfaces ------------------------------------------------------------------ */ .s-methode__ui { position: relative; margin-top: auto; aspect-ratio: 5 / 3; border-radius: 10px; overflow: hidden; isolation: isolate; container-type: inline-size; background: radial-gradient(120% 100% at 50% 0%, #fbfcfe 0%, #f2f5fa 60%, #eaeff7 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 5px rgba(255, 255, 255, .05), inset 0 2px 4px rgba(10, 20, 40, .05), inset 0 -18px 30px -24px rgba(20, 40, 90, .25), 0 22px 40px -18px rgba(0, 4, 20, .8); } .s-methode__ui::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(10, 20, 40, .1) 1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(90% 90% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(90% 90% at 50% 45%, #000 20%, transparent 100%); } .s-methode__ui::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background-image: var(--s-methode-noise); opacity: .06; mix-blend-mode: multiply; } .s-methode__u { --u: calc(100cqi / 360); position: absolute; inset: 0; font-size: calc(var(--u) * 10.5); line-height: 1; color: #1a1d24; } .s-methode__u [data-u="layer"] { position: absolute; inset: 0; } .s-methode__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .s-methode__at { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); } .s-methode__ico { width: calc(var(--u) * 11); height: calc(var(--u) * 11); flex: none; } /* Puces en relief */ .s-methode__chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 7); font-weight: 700; letter-spacing: .005em; white-space: nowrap; color: #1a1d24; background: linear-gradient(180deg, #ffffff, #f3f5f9); border: 1px solid rgba(10, 20, 40, .1); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(10, 20, 40, .05), 0 1px 1px rgba(10, 20, 40, .06), 0 calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * -8) rgba(20, 40, 90, .35); } .s-methode__chip--tint { color: #1f4fd6; background: linear-gradient(180deg, #f3f6ff, #e3ebff); border-color: rgba(47, 107, 255, .35); } .s-methode__chip--stat .s-methode__ico { color: var(--blue); } .s-methode__chip--file { background: linear-gradient(180deg, #ffffff, #f7f9fc); border: 1px dashed rgba(10, 20, 40, .3); } .s-methode__chip--file .s-methode__ico { color: #5f636b; } .s-methode__chip--b { border-color: rgba(47, 107, 255, .6); color: #1f4fd6; } .s-methode__chip--b .s-methode__ico { color: var(--blue); } /* Curseur animé */ .s-methode__cl { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .s-methode__cursor { position: absolute; left: calc(var(--u) * -1.5); top: calc(var(--u) * -1.5); width: calc(var(--u) * 15); filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(10, 20, 40, .35)); transform-origin: 10% 10%; } .s-methode__cursor svg { width: 100%; height: auto; } .s-methode__cursor path { fill: #0a0a0a; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; } /* data */ .s-methode__axis i { position: absolute; white-space: nowrap; top: calc(var(--u) * 180); left: calc(var(--x) * var(--u)); transform: translateX(-50%); font-size: calc(var(--u) * 9.5); font-style: italic; font-weight: 300; color: #74787f; } .s-methode__axis i:first-child { transform: none; } .s-methode__axis i:last-child { transform: translateX(-100%); } .s-methode__tip { padding: calc(var(--u) * 5) calc(var(--u) * 8); border-radius: calc(var(--u) * 5); font-weight: 700; color: #fff; background: #0a0a0a; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -6) rgba(10, 20, 40, .45); white-space: nowrap; } /* script */ .s-methode__frame-sb { width: calc(var(--u) * 100); height: calc(var(--u) * 62); border-radius: calc(var(--u) * 6); background: linear-gradient(180deg, #ffffff, #f8f9fb); border: 1px solid rgba(10, 20, 40, .1); box-shadow: inset 0 1px 0 #fff, 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -8) rgba(20, 40, 90, .35); } .s-methode__frame-sb svg { position: absolute; inset: 0; width: 100%; height: 100%; } .s-methode__frame-sb path { stroke: #3a4150; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; } .s-methode__frame-sb em { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 5); font-size: calc(var(--u) * 8.5); font-weight: 300; color: #8a8e96; } .s-methode__bars { display: flex; flex-direction: column; gap: calc(var(--u) * 5); width: calc(var(--u) * 100); } .s-methode__bars i { display: block; height: calc(var(--u) * 3.5); border-radius: 2px; background: rgba(10, 20, 40, .14); } .s-methode__bars i + i { width: 62%; } .s-methode__bubble { display: flex; align-items: flex-end; gap: calc(var(--u) * 8); } .s-methode__avatar { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; flex: none; font-size: calc(var(--u) * 11); font-weight: 800; color: #fff; background: radial-gradient(circle at 30% 25%, #8fb0ff, #2f6bff 55%, #1d4f96); box-shadow: 0 0 0 calc(var(--u) * 2) #fff, 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(47, 107, 255, .45); } .s-methode__msg { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 8) calc(var(--u) * 30) calc(var(--u) * 9) calc(var(--u) * 11); border-radius: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 3); font-size: calc(var(--u) * 11.5); font-weight: 700; white-space: nowrap; background: linear-gradient(180deg, #ffffff, #f4f6fa); border: 1px solid rgba(10, 20, 40, .09); box-shadow: inset 0 1px 0 #fff, 0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -10) rgba(20, 40, 90, .4); } .s-methode__msg small { font-size: calc(var(--u) * 8.5); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a8e96; } .s-methode__okmini { position: absolute; right: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: calc(var(--u) * 15); height: calc(var(--u) * 15); } .s-methode__tag { position: absolute; left: calc(var(--u) * 12); top: calc(var(--u) * 16); padding: calc(var(--u) * 5) calc(var(--u) * 9); border-radius: calc(var(--u) * 5); font-weight: 700; color: #fff; white-space: nowrap; transform: rotate(-6deg); transform-origin: 0 0; background: linear-gradient(180deg, #4a82ff, #2457e6); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 calc(var(--u) * 8) calc(var(--u) * 20) calc(var(--u) * -4) rgba(47, 107, 255, .65); } /* timeline */ .s-methode__dots { display: flex; gap: calc(var(--u) * 4); } .s-methode__dots i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: rgba(10, 20, 40, .16); box-shadow: inset 0 1px 1px rgba(10, 20, 40, .15); } .s-methode__ttl { font-size: calc(var(--u) * 9); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #5f636b; } .s-methode__ttl--r { font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; color: #8a8e96; } .s-methode__mruler { width: calc(var(--u) * 274); height: calc(var(--u) * 6); background: repeating-linear-gradient(90deg, rgba(10, 20, 40, .28) 0 1px, transparent 1px calc(var(--u) * 13.7)); } .s-methode__trk { left: calc(var(--u) * 18); width: calc(var(--u) * 326); height: calc(var(--u) * 26); display: flex; align-items: center; } .s-methode__trk b { width: calc(var(--u) * 52); font-size: calc(var(--u) * 8.5); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #74787f; } .s-methode__trk::after { content: ""; position: absolute; left: calc(var(--u) * 52); right: 0; top: 0; bottom: 0; border-radius: calc(var(--u) * 5); background: rgba(10, 20, 40, .04); box-shadow: inset 0 1px 2px rgba(10, 20, 40, .06); z-index: -1; } .s-methode__clip { width: calc(var(--w) * var(--u)); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 4); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * -3) rgba(20, 40, 90, .45); } .s-methode__clip--v { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 calc(var(--u) * 15), rgba(255, 255, 255, .28) calc(var(--u) * 15) calc(var(--u) * 16)), linear-gradient(180deg, #6c97ff, #2f6bff); } .s-methode__clip--t { background: linear-gradient(180deg, #f6d6df, #efc3cf); } .s-methode__clip--t i { position: absolute; left: calc(var(--u) * 7); top: 50%; transform: translateY(-50%); font-size: calc(var(--u) * 10); font-style: normal; font-weight: 800; color: #7a3a4c; } .s-methode__clip--s { background: linear-gradient(180deg, #d4eef0, #b7e0e4); } .s-methode__clip--s svg { width: 100%; height: 100%; } .s-methode__clip--s path { stroke: #14474f; stroke-width: 1.6; stroke-linecap: round; opacity: .7; } .s-methode__ph { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .s-methode__ph i { position: absolute; left: calc(var(--u) * 70); top: calc(var(--u) * 40); width: 1.5px; height: calc(var(--u) * 116); background: var(--blue); box-shadow: 0 0 calc(var(--u) * 6) rgba(47, 107, 255, .6); } .s-methode__ph i::before { content: ""; position: absolute; left: 50%; top: 0; width: calc(var(--u) * 10); height: calc(var(--u) * 11); transform: translateX(-50%); background: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); } .s-methode__render { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); width: calc(var(--u) * 80); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 6); overflow: hidden; isolation: isolate; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: calc(var(--u) * 9.5); color: #1a1d24; background: linear-gradient(180deg, #ffffff, #eef1f6); border: 1px solid rgba(10, 20, 40, .14); box-shadow: inset 0 1px 0 #fff, 0 calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * -6) rgba(20, 40, 90, .45); } .s-methode__render-on { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #4a82ff, #2457e6); opacity: 0; } .s-methode__render-fill { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .15)); transform: scaleX(0); transform-origin: left; } .s-methode__render-ok { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin: calc(var(--u) * -7) 0 0 calc(var(--u) * -7); } .s-methode__tcode { font-size: calc(var(--u) * 10); font-weight: 700; letter-spacing: .04em; color: #1a1d24; font-variant-numeric: tabular-nums; } /* files */ .s-methode__ab { display: flex; align-items: center; gap: calc(var(--u) * 7); } .s-methode__ab small { font-size: calc(var(--u) * 9); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5f636b; } .s-methode__switch { position: relative; display: flex; width: calc(var(--u) * 52); height: calc(var(--u) * 24); padding: calc(var(--u) * 2); border-radius: 999px; background: linear-gradient(180deg, #e6eaf1, #f3f5f9); box-shadow: inset 0 1px 3px rgba(10, 20, 40, .18), 0 1px 0 #fff; } .s-methode__switch b { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; font-size: calc(var(--u) * 9.5); font-weight: 800; color: #8a8e96; } .s-methode__switch b:first-child { color: #fff; } .s-methode__switch i { position: absolute; z-index: 1; left: calc(var(--u) * 2); top: calc(var(--u) * 2); width: calc(var(--u) * 24); height: calc(var(--u) * 20); border-radius: 999px; background: linear-gradient(180deg, #4a82ff, #2457e6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(47, 107, 255, .55); } .s-methode__ratio { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); } .s-methode__ratio i { position: absolute; inset: 0; border-radius: calc(var(--u) * 3); border: 1.5px solid rgba(10, 20, 40, .22); background: rgba(255, 255, 255, .6); transition: none; } .s-methode__ratio i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #6c97ff, #2f6bff); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * -4) rgba(47, 107, 255, .6); opacity: var(--on, 0); } .s-methode__ratio em { position: absolute; left: 50%; top: calc(100% + var(--u) * 5); transform: translateX(-50%); font-size: calc(var(--u) * 8.5); font-style: italic; font-weight: 300; color: #74787f; white-space: nowrap; } /* publish */ .s-methode__status { white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 9.5); font-weight: 700; color: #5f636b; } .s-methode__status i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #c3c8d1; } .s-methode__status b { font-weight: 700; } .s-methode__status b + b { position: absolute; left: calc(var(--u) * 13); color: #1f4fd6; opacity: 0; } .s-methode__pub { width: calc(var(--u) * 152); height: calc(var(--u) * 54); transform: rotate(-7deg); } .s-methode__pub-glow { position: absolute; inset: 14% 6% -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 107, 255, .75), rgba(47, 107, 255, 0)); filter: blur(calc(var(--u) * 8)); opacity: 0; } .s-methode__pub-ring { position: absolute; inset: 0; border-radius: calc(var(--u) * 12); border: 2px solid rgba(47, 107, 255, .7); opacity: 0; } .s-methode__pub-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; border-radius: calc(var(--u) * 12); background: linear-gradient(180deg, #ffffff, #e9edf4); border: 1px solid rgba(10, 20, 40, .14); box-shadow: inset 0 1px 0 #fff, inset 0 calc(var(--u) * -3) 0 rgba(10, 20, 40, .08), 0 calc(var(--u) * 14) calc(var(--u) * 26) calc(var(--u) * -12) rgba(20, 40, 90, .55); } .s-methode__pub-on { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 50% 120%, #8fb3ff, transparent 60%), linear-gradient(180deg, #4a82ff, #2457e6); opacity: 0; } .s-methode__pub-txt { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 17); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: #0a0a0a; } .s-methode__pub-txt svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); } .s-methode__okb { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: linear-gradient(180deg, #4a82ff, #2457e6); box-shadow: 0 0 0 calc(var(--u) * 3) #fff, 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(47, 107, 255, .6); } .s-methode__okb svg { width: 56%; height: 56%; } /* Mobile ------------------------------------------------------------------------------ */ @media (max-width: 760px) { .s-methode__glow--1 { width: 120vw; height: 120vw; left: -50vw; } .s-methode__glow--2 { width: 90vw; height: 90vw; } .s-methode__glow--3 { width: 130vw; height: 100vw; left: -10vw; } .s-methode__intro { min-height: 86svh; padding: calc(var(--header-h) + 24px) 16px 48px; } .s-methode__glass { padding: 16px 18px; } .s-methode__text { font-size: 15px; } .s-methode__pin { padding: 8px 0 72px; } .s-methode__reel { padding: 0 16px; } .s-methode__ruler { margin-bottom: 22px; } .s-methode__track { grid-template-columns: 1fr; gap: 14px; } .s-methode__card { padding: 20px 16px 16px; gap: 18px; } .s-methode__end { min-height: 180px; margin-top: 6px; } } /* ---- 10-metiers.css ---- */ /* 10-metiers : un arc blanc monte sur la section nacrée précédente et révèle une grille bento de métiers. */ .s-metiers { z-index: 2; } /* Arc : version statique (mobile, mouvement réduit), un dôme posé sur la section précédente */ .s-metiers::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(36px, 7vw, 110px); background: var(--paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; transform: scaleY(var(--s-metiers-arc, 1)); transform-origin: 50% 100%; box-shadow: 0 -18px 30px -24px rgba(20, 50, 120, .28); } /* Arc piloté (desktop, après la méthode épinglée) : la section entière remonte d'un écran, découpée en ellipse */ .s-metiers--arc { margin-top: -100vh; } .s-metiers--arc::before { display: none; } .s-metiers__rim { display: none; } .s-metiers--arc .s-metiers__rim { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; pointer-events: none; z-index: 3; box-shadow: inset 0 30px 46px -34px rgba(20, 50, 120, .32), inset 0 1px 0 rgba(10, 30, 70, .08); } /* En-tête */ .s-metiers__head { display: grid; grid-template-columns: 1fr; align-items: end; gap: 28px 64px; margin-bottom: clamp(40px, 5vw, 72px); } .s-metiers__lead { justify-self: end; } /* Grille : cartes identiques et compactes, toutes visibles d'un coup sur desktop */ .s-metiers__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); } .s-metiers__item { display: flex; min-width: 0; } .s-metiers__card { display: flex; flex-direction: column; width: 100%; padding: 6px; color: var(--ink); border-radius: 16px; } .s-metiers__card:hover, .s-metiers__card:focus-visible { border-color: rgba(47, 107, 255, .35); } .s-metiers__media { position: relative; aspect-ratio: 16 / 9; border-radius: 11px; background: var(--tint); } .s-metiers__media img { position: absolute; inset: 0; transition: transform 1.1s var(--ease-out); } .s-metiers__card:hover .s-metiers__media img { transform: scale(1.06); } .s-metiers__fallback { position: absolute; inset: 0; background: radial-gradient(55% 70% at 78% 22%, rgba(47, 107, 255, .42), transparent 70%), radial-gradient(50% 60% at 12% 92%, rgba(160, 196, 255, .55), transparent 70%), linear-gradient(150deg, #f6f8fc, #e3eaf6); } .s-metiers__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 6px 8px; font-size: 14px; font-weight: 700; line-height: 1.25; } .s-metiers__go { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; color: var(--ink); border: 1px solid var(--line); background: #fff; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease); } .s-metiers__go svg { width: 10px; height: 10px; } .s-metiers__card:hover .s-metiers__go, .s-metiers__card:focus-visible .s-metiers__go { color: #fff; background: var(--blue); border-color: var(--blue); transform: rotate(45deg); } .s-metiers__other { margin: clamp(24px, 3vw, 40px) 0 0; text-align: center; font-size: 15px; color: var(--muted-dark); } .s-metiers__other a { margin-left: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; } @media (max-width: 760px) { .s-metiers__head { grid-template-columns: 1fr; } .s-metiers__lead { justify-self: start; } .s-metiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s-metiers__name { font-size: 13px; } } /* ---- 10b-benefits.css ---- */ /* 10b : avantages, carrousel de cartes à tuile colorée et icône 3D */ .s-ben { padding-block: clamp(80px, 9vw, 140px); overflow: hidden; } .s-ben__head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); } .s-ben__head .cm-h2 { max-width: 13em; margin: 0 auto; text-wrap: balance; } .s-ben__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 19vw, 300px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .s-ben__track::-webkit-scrollbar { display: none; } .s-ben__card { scroll-snap-align: start; } .s-ben__tile { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; isolation: isolate; } .s-ben__tile::before { content: ""; position: absolute; inset: -12%; z-index: -1; filter: blur(22px); } .s-ben__tile img { width: 46%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .25)); } .s-ben__tile--1::before { background: radial-gradient(50% 45% at 25% 20%, #ffd23b, transparent), radial-gradient(55% 50% at 80% 80%, #b154ff, transparent), #ff9a1f; } .s-ben__tile--2::before { background: radial-gradient(45% 40% at 30% 25%, #2fe0a0, transparent), radial-gradient(50% 45% at 80% 70%, #ff6ad5, transparent), #2f3dff; } .s-ben__tile--3::before { background: radial-gradient(50% 45% at 70% 25%, #7a3cff, transparent), radial-gradient(55% 50% at 20% 80%, #ffb21f, transparent), #ff5a1f; } .s-ben__tile--4::before { background: radial-gradient(50% 45% at 25% 25%, #ff2d8a, transparent), radial-gradient(55% 50% at 80% 75%, #00d26a, transparent), #ff4fb0; } .s-ben__tile--5::before { background: radial-gradient(50% 45% at 75% 20%, #ff3b3b, transparent), radial-gradient(55% 50% at 20% 85%, #2f6bff, transparent), #ff2a2a; } .s-ben__tile--6::before { background: radial-gradient(50% 45% at 25% 20%, #00c2ff, transparent), radial-gradient(55% 50% at 80% 80%, #ffe36b, transparent), #2f6bff; } .s-ben__card h3 { margin: 22px 0 8px; font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.03em; } .s-ben__card p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--muted); } .s-ben__nav { display: flex; gap: 14px; margin-top: 34px; } .s-ben__arrow { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .7)); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(20, 30, 60, .45); transition: transform .3s var(--ease-out); } .s-ben__arrow:hover { transform: translateY(-2px); } .s-ben__arrow svg { width: 22px; } /* ---- 11-offres.css ---- */ /* 11 : offres (fond nacré). Deux cartes blanches .cm-card et la carte couleur bleue au centre ; durée en pastilles de verre ; prix qui roulent dans un masque vertical. */ .s-offres { --s-offres-muted: var(--muted-dark); --s-offres-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3 3 6.6-7'/%3E%3C/svg%3E"); overflow: hidden; } /* En-tête ------------------------------------------------------------------------- */ .s-offres__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; margin-bottom: clamp(48px, 5.5vw, 88px); } .s-offres__title { white-space: nowrap; } .s-offres__promise { list-style: none; margin: clamp(20px, 2vw, 28px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); } .s-offres__promise li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .s-offres__promise li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); } /* Durée : pastilles de verre */ .s-offres__dur { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .s-offres__dur-l { padding: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--s-offres-muted); } .s-offres__seg { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(10, 30, 70, .08); box-shadow: inset 0 1px 0 #fff, 0 12px 30px -20px rgba(10, 30, 70, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .s-offres__opt { position: relative; cursor: pointer; } .s-offres__opt input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; } .s-offres__opt .cm-pill { min-height: 42px; padding: 0 20px; font-size: 14px; font-weight: 600; transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); } .s-offres__opt:hover .cm-pill:not(.cm-pill--on) { transform: translateY(-1px); border-color: rgba(10, 30, 70, .2); } .s-offres__opt input:focus-visible + .cm-pill { outline: 2px solid var(--blue); outline-offset: 3px; } /* Grille de cartes ---------------------------------------------------------------- */ .s-offres__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; align-items: stretch; } .s-offres__card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; display: flex; flex-direction: column; grid-row: span 5; padding: clamp(26px, 2.4vw, 36px); border-radius: 18px; color: var(--ink); } .s-offres__card.cm-card { border-color: #e2e6ee; } .s-offres__card.cm-card:hover { border-color: #d3dbea; box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 30px 60px -36px rgba(10, 30, 70, .35); } /* Carte couleur : bleu de marque, texte et coches blancs, bouton blanc */ .s-offres__card.is-featured { margin-top: -24px; color: #fff; background: radial-gradient(120% 90% at 20% 0%, #4a80ff 0%, #2f6bff 38%, #1f4fd8 72%, #1a3fb0 100%); border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 50px 90px -40px rgba(31, 79, 216, .75); } .s-offres__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 85% 0%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(80% 50% at 50% 115%, rgba(120, 170, 255, .45), transparent 70%); } .s-offres__glow::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); } .s-offres__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; align-self: end; } .s-offres__name { margin: 0; } .s-offres__tag { position: absolute; top: 18px; right: 22px; flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; margin-top: 1px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); background: #fff; box-shadow: 0 8px 22px -10px rgba(5, 20, 70, .55); } .s-offres__tagline { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--s-offres-muted); } .s-offres__card.is-featured .s-offres__tagline { color: rgba(255, 255, 255, .8); } /* Prix ---------------------------------------------------------------------------- */ .s-offres__price { display: flex; flex-direction: column; justify-content: flex-end; margin: clamp(26px, 2.6vw, 38px) 0 0; padding: 22px 0 0; border-top: 1px solid #e8ebf1; } .s-offres__card.is-featured .s-offres__price { border-color: rgba(255, 255, 255, .22); } .s-offres__fig { display: flex; align-items: flex-start; white-space: nowrap; font-size: clamp(60px, 5.4vw, 88px); font-weight: 800; line-height: .92; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .s-offres__amount { display: inline-flex; } .s-offres__c { display: inline-grid; overflow: hidden; vertical-align: top; } .s-offres__c > span { grid-area: 1 / 1; display: block; } .s-offres__cur { font-size: .4em; font-weight: 700; letter-spacing: 0; margin: .14em 0 0 .14em; } .s-offres__unit { display: block; margin-top: 14px; font-size: 13.5px; line-height: 1.4; color: var(--s-offres-muted); } .s-offres__unit b { color: var(--ink); font-weight: 700; } .s-offres__card.is-featured .s-offres__unit { color: rgba(255, 255, 255, .78); } .s-offres__card.is-featured .s-offres__unit b { color: #fff; } .s-offres__quote { display: block; font-size: clamp(38px, 3.3vw, 54px); font-weight: 800; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; } /* Liste à coches ------------------------------------------------------------------ */ .s-offres__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; align-content: start; } .s-offres__list li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: #2c3038; } .s-offres__list li::before, .s-offres__list li::after { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; } .s-offres__list li::before { border-radius: 50%; background: rgba(47, 107, 255, .1); } .s-offres__list li::after { background: var(--blue); -webkit-mask: var(--s-offres-check) center / 11px no-repeat; mask: var(--s-offres-check) center / 11px no-repeat; } .s-offres__card.is-featured .s-offres__list li { color: rgba(255, 255, 255, .92); } .s-offres__card.is-featured .s-offres__list li::before { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); } .s-offres__card.is-featured .s-offres__list li::after { background: #fff; } /* « Tout de la formule Vidéo, plus : » devient un intertitre */ .s-offres__card--pack .s-offres__list li:first-child { padding: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; } .s-offres__card--pack .s-offres__list li:first-child::before, .s-offres__card--pack .s-offres__list li:first-child::after { display: none; } .s-offres__cta { margin-top: 30px; align-self: end; } .s-offres__cta--white { color: var(--blue); background: #fff; border-color: #fff; box-shadow: 0 14px 30px -14px rgba(5, 20, 70, .6); } .s-offres__cta--white:hover, .s-offres__cta--white:focus-visible { border-color: #fff; } /* Avant JS : visibles ; le JS les fait entrer en cascade */ .js .s-offres [data-s-offres-fade] { opacity: 0; transform: translateY(24px); } .js .s-offres [data-s-offres-card] { opacity: 0; transform: translateY(48px); } @supports (grid-template-rows: subgrid) { .s-offres__card { display: grid; grid-template-rows: subgrid; row-gap: 0; } } /* Tablette ------------------------------------------------------------------------ */ @media (max-width: 1080px) { .s-offres__card.is-featured { padding-top: calc(clamp(26px, 2.4vw, 36px) + 28px); } .s-offres__head { grid-template-columns: 1fr; align-items: start; } .s-offres__dur { align-items: flex-start; } .s-offres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-offres__card { margin-bottom: 18px; } .s-offres__card.is-featured { margin-top: 0; } .s-offres__card--campagne { grid-column: 1 / -1; } } /* Mobile -------------------------------------------------------------------------- */ @media (max-width: 760px) { .s-offres__head { gap: 26px; margin-bottom: 32px; } .s-offres__promise { font-size: 11.5px; gap: 8px 18px; } .s-offres__dur { width: 100%; align-items: stretch; gap: 10px; } .s-offres__seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; } .s-offres__opt .cm-pill { width: 100%; justify-content: center; padding: 0 8px; min-height: 44px; } .s-offres__grid { grid-template-columns: 1fr; } .s-offres__card { padding: 24px 20px; margin-bottom: 14px; } .s-offres__card.is-featured { padding-top: 60px; } .s-offres__tag { top: 18px; right: 18px; } .s-offres__card--campagne { grid-column: auto; } .s-offres__fig { font-size: 64px; } } @media (prefers-reduced-motion: reduce) { .js .s-offres [data-s-offres-fade], .js .s-offres [data-s-offres-card] { opacity: 1; transform: none; } } /* ---- 12-faq.css ---- */ /* 12 : FAQ (fond blanc, accueil). Deux colonnes, accordéon à boutons réels. */ .s-faq { --s-faq-muted: var(--muted-dark); padding-top: clamp(72px, 9vw, 140px); } .s-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; } /* Colonne gauche ------------------------------------------------------------------ */ .s-faq__stick { position: sticky; top: calc(var(--header-h) + 40px); } .s-faq__title { overflow-wrap: normal; } .s-faq__note { text-wrap: pretty; margin: clamp(22px, 2.4vw, 32px) 0 0; max-width: 30ch; font-size: 17px; line-height: 1.55; color: var(--s-faq-muted); } .s-faq__wa { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); } .s-faq__wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .14); } .s-faq__wa:hover .cm-link::after, .s-faq__wa:focus-visible .cm-link::after { transform: scaleX(1); transform-origin: left; } /* Accordéon ----------------------------------------------------------------------- */ .s-faq__list { padding: 6px clamp(20px, 2.6vw, 40px); border-color: #e2e6ee; } .s-faq__item + .s-faq__item { border-top: 1px solid #eceff4; } .s-faq__q { margin: 0; font: inherit; } .s-faq__btn { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 38px; align-items: center; gap: 16px; padding: 26px 0; text-align: left; color: var(--ink); font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } .s-faq__btn:focus-visible { outline-offset: 6px; } .s-faq__num { font-size: 15px; } .s-faq__qt { transition: transform .45s var(--ease), color .35s var(--ease); } .s-faq__btn:hover .s-faq__qt { transform: translateX(6px); } .s-faq__ico { position: relative; justify-self: end; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #dcdcdc; background: #fff; transition: transform .5s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease); } .s-faq__ico::before, .s-faq__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); transition: background-color .35s var(--ease); } .s-faq__ico::after { transform: rotate(90deg); } .s-faq__btn:hover .s-faq__ico { border-color: var(--ink); } .s-faq__item.is-open .s-faq__ico { transform: rotate(135deg); background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 18px -8px var(--glow); } .s-faq__item.is-open .s-faq__ico::before, .s-faq__item.is-open .s-faq__ico::after { background: #fff; } .s-faq__panel { overflow: hidden; } .js .s-faq__item:not(.is-open) .s-faq__panel { height: 0; visibility: hidden; } .s-faq__a { padding: 0 54px 28px 60px; } .s-faq__a p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: #4f535a; } /* Avant JS : visibles ; le JS les fait entrer */ .js .s-faq [data-s-faq-fade] { opacity: 0; transform: translateY(20px); } .js .s-faq [data-s-faq-item] { opacity: 0; transform: translateY(28px); } @media (max-width: 960px) { .s-faq__grid { grid-template-columns: 1fr; gap: 40px; } .s-faq__stick { position: static; } .s-faq__title { max-width: none; } } @media (max-width: 760px) { .s-faq__list { padding: 2px 18px; } .s-faq__btn { grid-template-columns: minmax(0, 1fr) 34px; gap: 14px; padding: 20px 0; font-size: 16.5px; } .s-faq__num { display: none; } .s-faq__ico { width: 34px; height: 34px; } .s-faq__a { padding: 0 0 22px; } .s-faq__a p { font-size: 15.5px; } } @media (prefers-reduced-motion: reduce) { .js .s-faq [data-s-faq-fade], .js .s-faq [data-s-faq-item] { opacity: 1; transform: none; } } /* ---- 13-contact.css ---- */ /* 13 : contact (fond bleu de marque). Logo, titre blanc révélé mot à mot, brief express dans une grande carte blanche (champs soulignés, pastilles de verre, prix en direct), barre basse en blanc translucide. */ .s-contact { --s-contact-muted: var(--muted-dark); --s-contact-rule: #e3e7ee; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-bottom: clamp(28px, 3vw, 44px); overflow: hidden; isolation: isolate; } /* Halo doux derrière la carte */ .s-contact::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: min(1100px, 120vw); aspect-ratio: 1.4; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(140, 180, 255, .4), rgba(140, 180, 255, 0)); } .s-contact__wrap { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .s-contact__mark { width: 64px; height: 64px; margin-bottom: clamp(22px, 2.4vw, 32px); overflow: visible; } .s-contact__mark rect { transform-box: fill-box; transform-origin: center; } .s-contact__title { font-size: clamp(34px, 4.2vw, 64px); max-width: none; color: #fff; } @media (min-width: 761px) { .s-contact__title { white-space: nowrap; } .s-contact__lead { max-width: 62ch !important; } } .s-contact__title .s-contact__w { display: inline-block; will-change: opacity, filter; } .s-contact__lead { text-wrap: balance; margin: clamp(16px, 1.6vw, 22px) 0 0; max-width: 44ch; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); } /* Carte formulaire ------------------------------------------------------------------ */ .s-contact__form { width: 100%; max-width: 760px; margin-top: clamp(36px, 4vw, 56px); text-align: left; color: var(--ink); padding: clamp(24px, 3.2vw, 44px) clamp(22px, 3.6vw, 52px) clamp(24px, 3vw, 40px); isolation: isolate; border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(5, 20, 70, .08), 0 50px 100px -40px rgba(5, 20, 70, .65); } .s-contact__formhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 6px; color: var(--ink); } .s-contact__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .s-contact__lab { flex: none; min-width: 88px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); } .s-contact__lab em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--s-contact-muted); margin-left: 4px; } .s-contact__field { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 0 14px; border-bottom: 1px solid var(--s-contact-rule); } .s-contact__field label { cursor: text; } .s-contact__input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; font-size: 16px; line-height: 30px; color: var(--ink); -webkit-appearance: none; appearance: none; } .s-contact__input::placeholder { color: #a3a7ae; opacity: 1; } textarea.s-contact__input { height: auto; min-height: 30px; padding: 3px 0; line-height: 1.5; resize: none; overflow: hidden; } .s-contact__field--msg { align-items: flex-start; } .s-contact__field--msg .s-contact__lab, .s-contact__field--msg .s-contact__arr { margin-top: 8px; } .s-contact__arr { flex: none; width: 12px; height: 12px; color: var(--ink); transition: transform .45s var(--ease), color .35s var(--ease); } .s-contact__arr svg { width: 12px; height: 12px; } .s-contact__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease), background-color .3s; } .s-contact__field:focus-within .s-contact__line { transform: scaleX(1); } .s-contact__field:focus-within .s-contact__arr { color: var(--blue); transform: translate(2px, -2px); } .s-contact__field.is-invalid .s-contact__line { transform: scaleX(1); background: #c62828; } .s-contact__field.is-invalid .s-contact__lab { color: #c62828; } /* Pastilles de verre ---------------------------------------------------------------- */ .s-contact__group { display: flex; align-items: center; gap: 14px; margin: 0; min-width: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--s-contact-rule); } .s-contact__pills { display: flex; flex-wrap: wrap; gap: 8px; } .s-contact__pill { position: relative; cursor: pointer; } .s-contact__pill input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; } .s-contact__pill .cm-pill { min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .s-contact__pill:hover .cm-pill:not(.cm-pill--on) { transform: translateY(-1px); border-color: rgba(10, 30, 70, .22); } .s-contact__pill input:focus-visible + .cm-pill { outline: 2px solid var(--blue); outline-offset: 3px; } /* Durée repliable (masquée pour la campagne) */ .s-contact__collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease), opacity .35s var(--ease); } .s-contact__collapse-in { min-height: 0; overflow: hidden; } .s-contact__collapse.is-hidden { grid-template-rows: 0fr; opacity: 0; } /* Estimation ---------------------------------------------------------------------- */ .s-contact__sum { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 22px 0 18px; padding: 18px 20px; border-radius: 12px; background: var(--tint); border: 1px solid #e6eaf2; } .s-contact__sum::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; box-shadow: 0 0 0 3px rgba(47, 107, 255, .35), 0 12px 30px -10px rgba(47, 107, 255, .45); } .s-contact__sum.is-flash::before { z-index: 0; animation: sContactFlash 1.6s var(--ease) both; } @keyframes sContactFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } .s-contact__sum-l { display: flex; flex-direction: column; gap: 6px; } .s-contact__recap { font-size: 14.5px; color: var(--s-contact-muted); } .s-contact__price { display: flex; align-items: flex-start; white-space: nowrap; color: var(--ink); font-size: clamp(40px, 3.8vw, 56px); font-weight: 800; line-height: .92; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .s-contact__amount { display: inline-flex; } .s-contact__price.is-quote { text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(28px, 2.8vw, 40px); } .s-contact__cur { font-size: .42em; font-weight: 700; letter-spacing: 0; margin: .12em 0 0 .14em; } .s-contact__price.is-quote .s-contact__cur { display: none; } .s-contact__error { min-height: 0; margin: 0; font-size: 14px; color: #c62828; } .s-contact__error:not(:empty) { margin-bottom: 14px; } .s-contact__submit { min-height: 60px; font-size: 13.5px; } /* Dans la carte blanche, le bouton reste bleu (le fond bleu de section le passerait en blanc) */ .s-contact__form .s-contact__submit.cm-btn--primary { color: #fff; background: linear-gradient(180deg, #3d78ff, #2457e6); border-color: #2457e6; box-shadow: 0 14px 30px -12px rgba(47, 107, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .25); } .s-contact__form .s-contact__submit.cm-btn--primary:hover { box-shadow: 0 18px 40px -10px rgba(47, 107, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .3); } .s-contact__note { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--s-contact-muted); } .s-contact__note.is-done { color: var(--blue); font-weight: 600; } .s-contact__alt { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--s-contact-muted); } .s-contact__tel { color: var(--ink); font-weight: 700; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: color .3s; } .s-contact__tel:hover { color: var(--blue); } /* Barre basse (blanc translucide) ----------------------------------------------------- */ .s-contact__foot { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; margin-top: auto; padding-top: clamp(56px, 6vw, 96px); color: #fff; } .s-contact__foot-c { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .s-contact__foot-c--r { align-items: flex-end; } .s-contact__foot .cm-bracket { color: rgba(255, 255, 255, .66); } .s-contact__foot-a { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: #fff; white-space: nowrap; } .s-contact__top { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: rgba(255, 255, 255, .7); transition: color .3s var(--ease); } .s-contact__top span { display: inline-block; transition: transform .45s var(--ease); } .s-contact__top:hover { color: #fff; } .s-contact__top:hover span { transform: translateY(-4px); } /* Avant JS : visibles ; le JS les fait entrer */ .js .s-contact [data-s-contact-fade], .js .s-contact [data-s-contact-row], .js .s-contact [data-s-contact-foot], .js .s-contact [data-s-contact-form] { opacity: 0; transform: translateY(22px); } @media (max-width: 760px) { .s-contact { min-height: 0; padding-bottom: 28px; } .s-contact__title { font-size: clamp(32px, 9.4vw, 44px); } .s-contact__lead { font-size: 15.5px; } .s-contact__form { margin-top: 30px; padding: 22px 18px 22px; border-radius: 16px; } .s-contact__row--2 { grid-template-columns: 1fr; } .s-contact__lab { min-width: 74px; } .s-contact__group { flex-direction: column; align-items: flex-start; gap: 12px; } .s-contact__sum { padding: 16px; } .s-contact__foot { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-top: 48px; } .s-contact__top { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .s-contact__foot-a { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .js .s-contact [data-s-contact-fade], .js .s-contact [data-s-contact-row], .js .s-contact [data-s-contact-foot], .js .s-contact [data-s-contact-form] { opacity: 1; transform: none; } } /* Bandeau contact / remonter : doublon du footer, masqué */ .s-contact__foot { display: none; } /* ---- 14-canaux.css ---- */ /* 14 : canaux (fond sombre, vidéo floutée derrière). Deux liens géants ; au survol, un faisceau de verre (trapèze qui s'élargit vers le bas) s'ouvre et un panneau .cm-glass remplace le mot. Mobile : blocs empilés. */ .s-canaux { position: relative; isolation: isolate; overflow: hidden; padding: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } .s-canaux__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #060b16; } .s-canaux__media { position: absolute; inset: -4%; background: url("/assets/poster.jpg") center / cover no-repeat; filter: blur(16px) saturate(1.3); will-change: transform; } .s-canaux__video { width: 100%; height: 100%; object-fit: cover; } .s-canaux__veil { position: absolute; inset: 0; background: radial-gradient(40% 50% at 22% 55%, rgba(47, 107, 255, .32), rgba(47, 107, 255, 0) 70%), radial-gradient(40% 50% at 80% 50%, rgba(47, 107, 255, .22), rgba(47, 107, 255, 0) 70%), linear-gradient(180deg, rgba(6, 11, 22, .82) 0%, rgba(6, 11, 22, .3) 34%, rgba(6, 11, 22, .3) 66%, rgba(6, 11, 22, .88) 100%); } /* Teinte bleu nuit sur la vidéo : la matière reste visible, le fond reste profond */ .s-canaux__veil::before { content: ""; position: absolute; inset: 0; background: #142a5c; mix-blend-mode: multiply; } /* Colonnes et mots géants ------------------------------------------------------------ */ .s-canaux__cols { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: inherit; } .s-canaux__ch { position: relative; display: grid; place-items: center; min-width: 0; } .s-canaux__big { position: relative; z-index: 2; display: inline-block; padding: 14px 4px; color: #fff; font-size: clamp(48px, 6.4vw, 108px); font-weight: 800; line-height: 1; letter-spacing: -.025em; text-transform: uppercase; text-shadow: 0 10px 40px rgba(0, 0, 0, .35); transition: opacity .35s var(--ease), filter .35s var(--ease); } .s-canaux__word { position: relative; display: inline-block; } .s-canaux__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.07em; height: max(2px, .035em); background: currentColor; transform-origin: left; transition: transform .8s var(--ease); } .js .s-canaux__word::after { transform: scaleX(0); } .js .s-canaux.is-in .s-canaux__word::after { transform: scaleX(1); transition-delay: .35s; } /* Faisceau et panneau de verre ------------------------------------------------------- */ .s-canaux__panel { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: min(92%, 660px); transform: translateX(-50%); display: grid; place-items: center; visibility: hidden; pointer-events: none; transition: visibility 0s .5s; } .s-canaux__beam { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 60%, rgba(140, 180, 255, .14) 100%); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: clip-path .5s var(--ease); } .s-canaux__inner { position: relative; width: min(84%, 400px); padding: 34px 30px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .25s var(--ease), transform .5s var(--ease); } .s-canaux__pt { margin: 0; text-wrap: balance; font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; line-height: 1.02; letter-spacing: -.015em; text-transform: uppercase; color: #fff; } .s-canaux__pp { margin: 14px 0 0; max-width: 30ch; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); } .s-canaux__btn { margin-top: 26px; } .s-canaux .s-canaux__btn.cm-btn--primary { color: #fff; } /* Ouvert : survol (desktop) ou focus clavier */ .s-canaux__ch.is-open .s-canaux__panel, .s-canaux__ch:has(:focus-visible) .s-canaux__panel { visibility: visible; pointer-events: auto; transition: visibility 0s; } .s-canaux__ch.is-open .s-canaux__beam, .s-canaux__ch:has(:focus-visible) .s-canaux__beam { clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%); } .s-canaux__ch.is-open .s-canaux__inner, .s-canaux__ch:has(:focus-visible) .s-canaux__inner { opacity: 1; transform: none; transition-delay: .12s; transition-duration: .4s, .6s; } .s-canaux__ch.is-open .s-canaux__big, .s-canaux__ch:has(:focus-visible) .s-canaux__big { opacity: 0; filter: blur(6px); } .s-canaux__cols.has-open .s-canaux__ch:not(.is-open) .s-canaux__big { opacity: .3; filter: blur(3px); } /* Écrans tactiles larges : panneaux ouverts en permanence */ @media (hover: none) and (min-width: 761px) { .s-canaux__panel { visibility: visible; pointer-events: auto; } .s-canaux__beam { clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%); } .s-canaux__inner { opacity: 1; transform: none; } .s-canaux__big { opacity: 0; } } /* Mobile : deux blocs empilés, panneaux visibles, boutons pleine largeur ---------------- */ @media (max-width: 760px) { .s-canaux { min-height: 0; } .s-canaux__cols { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding: 88px 16px 104px; } .s-canaux__ch { display: block; } .s-canaux__big { display: block; width: max-content; margin: 0 auto; padding: 8px 2px; font-size: clamp(44px, 14vw, 64px); } .s-canaux__panel { position: relative; left: auto; top: auto; bottom: auto; width: 100%; transform: none; display: block; margin-top: 16px; visibility: visible; pointer-events: auto; } .s-canaux__beam { display: none; } .s-canaux__inner { width: 100%; opacity: 1; transform: none; padding: 26px 20px 22px; } .s-canaux__pt { font-size: 24px; } .s-canaux__pp { font-size: 15px; margin-top: 10px; } .s-canaux__btn { width: 100%; margin-top: 22px; } .s-canaux__ch.is-open .s-canaux__big, .s-canaux__ch:has(:focus-visible) .s-canaux__big { opacity: 1; filter: none; } .s-canaux__cols.has-open .s-canaux__ch:not(.is-open) .s-canaux__big { opacity: 1; filter: none; } } @media (prefers-reduced-motion: reduce) { .js .s-canaux__word::after { transform: scaleX(1); } } /* ---- 15-footer.css ---- */ /* 15-footer : fond blanc (comme le header en verre) traversé par un faisceau de lumière bleu pâle qui dérive et suit le pointeur ; colonnes en filets ; logotype géant rogné en bas, dont chaque lettre reçoit le même faisceau. */ .s-footer { --f-bg: #fff; --f-ink: #0a0a0a; --f-mut: #5b6478; --f-acc: 47, 107, 255; --f-ang: 118deg; --f-b: 58%; --f-px: 50%; --f-py: 50%; --f-g: 0; --f-top: 0px; --f-bot: 100%; position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; background: var(--f-bg); color: var(--f-ink); touch-action: pan-y; } .s-footer a { color: inherit; text-decoration: none; } .s-footer ul { list-style: none; margin: 0; padding: 0; } .s-footer p { margin: 0; } .s-footer__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, rgba(var(--f-acc), .15), rgba(var(--f-acc), .6) var(--f-b), rgba(var(--f-acc), .15)); } .s-footer__sky, .s-footer__sky i { position: absolute; inset: 0; pointer-events: none; } .s-footer__sky { z-index: 0; } .s-footer__wash { background: radial-gradient(120% 90% at 8% 0%, rgba(var(--f-acc), .08), transparent 55%), radial-gradient(90% 70% at 92% 8%, rgba(120, 190, 255, .12), transparent 60%), linear-gradient(180deg, #fff, var(--tint) 100%); } .s-footer__bands { background: repeating-linear-gradient(90deg, rgba(var(--f-acc), .035) 0 1.6cqw, transparent 1.6cqw 4.2cqw); -webkit-mask-image: linear-gradient(100deg, #000, transparent 55%); mask-image: linear-gradient(100deg, #000, transparent 55%); } .s-footer__beam { filter: blur(calc(1px + 1.6cqw)); background: linear-gradient(var(--f-ang), transparent calc(var(--f-b) - 11%), rgba(var(--f-acc), .06) calc(var(--f-b) - 5%), rgba(var(--f-acc), .16) var(--f-b), rgba(var(--f-acc), .04) calc(var(--f-b) + 4%), transparent calc(var(--f-b) + 9%)), linear-gradient(var(--f-ang), transparent calc(var(--f-b) - 34%), rgba(var(--f-acc), .05) calc(var(--f-b) - 27%), transparent calc(var(--f-b) - 20%)); } .s-footer__glow { opacity: var(--f-g); background: radial-gradient(circle 26cqw at var(--f-px) var(--f-py), rgba(var(--f-acc), .1), transparent 70%); } .s-footer__grain { opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } .s-footer__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8.5cqw, 112px) clamp(20px, 6cqw, 88px) 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .9fr); gap: 44px clamp(24px, 4cqw, 56px); } .s-footer__col { min-width: 0; } .s-footer__col:first-child { max-width: 420px; } .s-footer__label { position: relative; display: block; padding-bottom: 13px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--f-acc)); } .s-footer__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--f-acc), .6), rgba(var(--f-acc), .25)); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .7, .1, 1) var(--f-d, 0ms); } .s-footer[data-in="false"] .s-footer__label::after { transform: scaleX(0); } .s-footer__fade { transition: opacity .9s ease var(--f-d, 0ms), translate .9s cubic-bezier(.2, .7, .1, 1) var(--f-d, 0ms); } .s-footer[data-in="false"] .s-footer__fade { opacity: 0; translate: 0 14px; } .s-footer__socials { display: flex; gap: 14px; margin-top: 16px; } .s-footer__soc { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: rgba(10, 10, 10, .7); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .7)); box-shadow: inset 0 0 0 1px rgba(10, 20, 40, .1), inset 0 1px 0 #fff, 0 8px 18px -10px rgba(30, 60, 140, .35); transition: color .25s, box-shadow .35s, translate .35s cubic-bezier(.2, .8, .2, 1), background .35s; } .s-footer__soc svg { width: 19px; height: 19px; } .s-footer__soc:hover, .s-footer__soc:focus-visible { color: #fff; translate: 0 -2px; outline: none; background: linear-gradient(180deg, #4a80ff, #2457e6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px -8px rgba(var(--f-acc), .7); } .s-footer__tip { position: absolute; left: 50%; top: calc(100% + 9px); translate: -50% -4px; z-index: 5; white-space: nowrap; font-size: 11px; line-height: 1; padding: 6px 8px; border-radius: 5px; background: rgb(var(--f-acc)); color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s, translate .25s; } .s-footer__soc:hover .s-footer__tip, .s-footer__soc:focus-visible .s-footer__tip { opacity: 1; translate: -50% 0; } .s-footer__credits { margin-top: 24px; font-size: 14.5px; line-height: 1.6; color: var(--f-mut); } .s-footer__credits b { font-weight: 500; color: var(--f-ink); } .s-footer__credits a { color: var(--f-ink); background: linear-gradient(rgb(var(--f-acc)), rgb(var(--f-acc))) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.2, .8, .2, 1); } .s-footer__credits a:hover { background-size: 100% 1px; } .s-footer__links { margin-top: 12px; display: flex; flex-direction: column; } .s-footer__link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; line-height: 21px; color: rgba(10, 10, 10, .72); transition: color .25s; } .s-footer__link span { transition: translate .35s cubic-bezier(.2, .8, .2, 1); } .s-footer__link::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: rgb(var(--f-acc)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .s-footer__link svg { width: 12px; height: 12px; opacity: 0; translate: -6px 0; color: rgb(var(--f-acc)); transition: opacity .25s, translate .35s cubic-bezier(.2, .8, .2, 1); } .s-footer__link:hover, .s-footer__link:focus-visible { color: rgb(var(--f-acc)); outline: none; } .s-footer__link:hover::before, .s-footer__link:focus-visible::before { transform: scaleX(1); } .s-footer__link:hover span, .s-footer__link:focus-visible span { translate: 12px 0; } .s-footer__link:hover svg, .s-footer__link:focus-visible svg { opacity: 1; translate: 10px 0; } /* Logotype : chaque lettre peint le fond de la section décalé de sa propre position */ .s-footer__word { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(32px, 7cqw, 96px); height: 17cqw; } .s-footer__word-box { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 6cqw, 88px); box-sizing: border-box; } .s-footer__word-in { display: inline-flex; white-space: nowrap; font-weight: 800; line-height: 1; letter-spacing: -.05em; user-select: none; -webkit-user-select: none; } .s-footer__lw { display: inline-block; transition: translate 1.25s cubic-bezier(.16, .84, .2, 1) var(--f-d, 0ms); } .s-footer[data-in="false"] .s-footer__lw { translate: 0 85%; } .s-footer__l { display: inline-block; cursor: pointer; color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-size: var(--f-rw) var(--f-rh); background-position: calc(var(--f-x) * -1) calc(var(--f-y) * -1); background-image: radial-gradient(circle 22cqw at var(--f-px) var(--f-py), rgba(150, 215, 255, calc(var(--f-g) * .9)), transparent 70%), linear-gradient(var(--f-ang), transparent calc(var(--f-b) - 9%), rgba(150, 215, 255, .7) calc(var(--f-b) - 1.5%), rgba(200, 235, 255, .9) var(--f-b), rgba(150, 215, 255, .25) calc(var(--f-b) + 3.5%), transparent calc(var(--f-b) + 8%)), linear-gradient(180deg, #2f6bff var(--f-top), #9dbbff var(--f-bot)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2), filter .4s; transform-origin: 50% 100%; } .s-footer__l:hover { transform: translateY(-.045em); filter: brightness(1.35) saturate(1.1); } .s-footer__l.is-hop { animation: sFooterHop .75s cubic-bezier(.2, .8, .2, 1); } @keyframes sFooterHop { 0% { transform: none; } 18% { transform: translateY(.02em) scale(1.06, .9); } 45% { transform: translateY(-.14em) scale(.97, 1.05); } 70% { transform: translateY(.01em) scale(1.02, .97); } 100% { transform: translateY(-.045em); } } .s-footer__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(243, 245, 249, 0), rgba(243, 245, 249, .6) 60%, var(--tint)); } @container (max-width: 760px) { .s-footer__inner { grid-template-columns: 1fr 1fr; row-gap: 40px; } .s-footer__col:first-child { grid-column: 1 / -1; max-width: none; } } @media (max-width: 760px) { .s-footer { padding-bottom: 96px; } } @media (prefers-reduced-motion: reduce) { .s-footer .s-footer__lw, .s-footer .s-footer__fade, .s-footer .s-footer__label::after { transition: none; } .s-footer[data-in="false"] .s-footer__lw, .s-footer[data-in="false"] .s-footer__fade { translate: none; opacity: 1; } .s-footer[data-in="false"] .s-footer__label::after { transform: none; } } /* ---- n1-hero.css ---- */ /* Landing métier : hero plein écran sombre. Carrousel flouté d'écrans multi-formats (3 rangées), pastille de preuve, titre blanc centré, une phrase, un bouton ; bande défilante des plateformes en bas. */ .s-n1 { --s-n1-row: 30vh; --s-n1-gap: 16px; --s-n1-blur: 18px; --s-n1-band: 68px; position: relative; min-height: max(620px, 100svh); padding: calc(var(--header-h) + 24px) var(--gutter) calc(var(--s-n1-band) + 40px); display: grid; place-items: center; overflow: hidden; isolation: isolate; } /* Fond : rangées d'écrans floutées */ .s-n1__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #060b16; } .s-n1__rows { position: absolute; left: -12%; right: -12%; top: 50%; display: grid; gap: var(--s-n1-gap); transform: translateY(-50%) rotate(-4deg) scale(1.12); filter: blur(var(--s-n1-blur)) saturate(1.6) contrast(1.08) brightness(.92); transition: opacity 1.6s var(--ease-out), transform 2.2s var(--ease-out); } .s-n1__row { position: relative; display: flex; flex-wrap: nowrap; gap: var(--s-n1-gap); height: var(--s-n1-row); } .s-n1__cell { flex: none; height: 100%; border-radius: 14px; overflow: hidden; background: #142037; will-change: transform; } .s-n1__cell--h { aspect-ratio: 16 / 9; } .s-n1__cell--v { aspect-ratio: 9 / 16; } .s-n1__cell--c { aspect-ratio: 1 / 1; } .s-n1__cell img, .s-n1__cell video { width: 100%; height: 100%; object-fit: cover; } .s-n1__veil { position: absolute; inset: 0; background: radial-gradient(60% 50% at 18% 100%, rgba(47, 107, 255, .32), rgba(47, 107, 255, 0) 100%), radial-gradient(50% 45% at 88% 8%, rgba(24, 180, 230, .16), rgba(24, 180, 230, 0) 100%), radial-gradient(70% 55% at 50% 48%, rgba(6, 11, 22, .52), rgba(6, 11, 22, 0) 100%), linear-gradient(180deg, rgba(6, 11, 22, .72) 0%, rgba(6, 11, 22, .55) 38%, rgba(6, 11, 22, .6) 70%, rgba(6, 11, 22, .86) 100%); } /* Contenu centré */ .s-n1__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1240px; } .s-n1__pill { margin: 0 0 clamp(22px, 3.4vh, 34px); } .s-n1__title { color: #fff; font-size: clamp(38px, 5.2vw, 84px); line-height: 1; text-wrap: balance; text-shadow: 0 10px 40px rgba(0, 0, 0, .25); } .s-n1__lead { margin: clamp(18px, 2.8vh, 28px) auto 0; max-width: 54ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .8); } .s-n1__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: clamp(26px, 4vh, 40px); } .s-n1__link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: rgba(255, 255, 255, .86); transition: color .3s var(--ease); } .s-n1__link:hover, .s-n1__link:focus-visible { color: #fff; } .s-n1__link:hover .cm-link::after, .s-n1__link:focus-visible .cm-link::after { transform: scaleX(1); transform-origin: left; } /* Bande défilante des plateformes */ .s-n1__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--s-n1-band); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .s-n1__track { display: flex; width: max-content; height: 100%; animation: sN1Band 38s linear infinite; } .s-n1__list { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; } .s-n1__list li { display: inline-flex; align-items: center; gap: 12px; padding: 0 clamp(26px, 2.6vw, 44px); height: 100%; border-right: 1px solid rgba(255, 255, 255, .14); color: #fff; white-space: nowrap; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .s-n1__list svg { width: 20px; height: 20px; flex: none; fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .s-n1__list em { font-style: italic; font-weight: 300; font-size: 12px; letter-spacing: 0; color: rgba(255, 255, 255, .55); text-transform: none; } @keyframes sN1Band { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Entrée */ .js .s-n1 .s-n1__title .cm-line > span { transition: transform .9s var(--ease-out) .15s; } .js .s-n1 .s-n1__title .cm-line:nth-child(2) > span { transition-delay: .27s; } .js .s-n1:not(.is-in) .s-n1__title .cm-line > span { transform: translateY(105%); } .js .s-n1 [data-n1-in] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--s-n1-d, 0s); } .js .s-n1:not(.is-in) [data-n1-in] { opacity: 0; transform: translateY(14px); } .js .s-n1 .s-n1__pill { --s-n1-d: .05s; } .js .s-n1 .s-n1__lead { --s-n1-d: .45s; } .js .s-n1 .s-n1__ctas { --s-n1-d: .58s; } .js .s-n1 .s-n1__band { --s-n1-d: .8s; } .js .s-n1:not(.is-in) .s-n1__band { transform: translateY(100%); } .js .s-n1:not(.is-in) .s-n1__rows { opacity: 0; transform: translateY(-50%) rotate(-4deg) scale(1.22); } @media (max-height: 760px) and (min-width: 761px) { .s-n1 { --s-n1-band: 58px; } .s-n1__title { font-size: clamp(36px, 4.6vw, 70px); } } @media (max-width: 760px) { .s-n1 { --s-n1-row: 34svh; --s-n1-gap: 12px; --s-n1-blur: 11px; --s-n1-band: 56px; padding: calc(var(--header-h) + 12px) 16px calc(var(--s-n1-band) + 28px); } .s-n1__row--3 { display: none; } .s-n1__cell { border-radius: 12px; } .s-n1__title { font-size: clamp(32px, 9.8vw, 40px); } .s-n1__lead { font-size: 15.5px; } .s-n1__pill { font-size: 12px; } .s-n1__ctas { width: 100%; flex-direction: column; gap: 18px; } .s-n1__ctas .cm-btn { width: 100%; } .s-n1__list li { padding: 0 22px; font-size: 11.5px; gap: 10px; } } /* Accueil : lien showreel avec pictogramme lecture */ .s-n1__play { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); position: relative; } .s-n1__play::after { content: ""; position: absolute; left: 10px; top: 8px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; } /* Objets du secteur : derrière le texte, au-dessus du fond flouté */ .s-n1__fx { z-index: 1; } .s-n1__micro { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .62); letter-spacing: .01em; } /* Titre du bandeau des formats */ .s-n1__band-title { position: absolute; left: 0; right: 0; bottom: calc(var(--s-n1-band) + 14px); z-index: 2; margin: 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .s-n1__band-title::before, .s-n1__band-title::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35)); } .s-n1__band-title::after { transform: scaleX(-1); } /* ---- n2-enjeux.css ---- */ /* Landing métier : 3 enjeux du métier en cartes (pictogramme, index italique, titre, une phrase) */ .s-n2 { padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); } .s-n2__defs { position: absolute; width: 0; height: 0; overflow: hidden; } .s-n2__title { font-size: clamp(30px, 4vw, 60px); max-width: 22ch; text-wrap: balance; margin-bottom: clamp(36px, 4.5vw, 64px); } .s-n2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; } .s-n2__card { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.4vw, 34px); } .s-n2__card:hover { transform: translateY(-4px); border-color: #d5ddef; box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 30px 60px -32px rgba(47, 107, 255, .4); } .s-n2__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: clamp(14px, 2vw, 28px); } .s-n2__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(160deg, #eef3ff, #e1eaff); color: var(--blue); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgba(47, 107, 255, .5); } .s-n2__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .s-n2__num { font-size: clamp(30px, 2.6vw, 42px); line-height: 1; color: #c3c9d4; } .s-n2__t { margin: 0; font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; text-transform: uppercase; line-height: 1.1; letter-spacing: -.008em; } .s-n2__d { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted-dark); } @media (max-width: 960px) { .s-n2__grid { grid-template-columns: 1fr; } .s-n2__card { min-height: 0; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 6px; } .s-n2__top { grid-row: span 2; margin: 0; } .s-n2__num { display: none; } } @media (max-width: 760px) { .s-n2 { padding-top: 64px; padding-bottom: 64px; } .s-n2__title { font-size: clamp(26px, 7.4vw, 36px); margin-bottom: 28px; } .s-n2__card { padding: 20px 18px; } .s-n2__ico { width: 44px; height: 44px; border-radius: 12px; } .s-n2__ico svg { width: 22px; height: 22px; } .s-n2__t { font-size: 17px; } .s-n2__d { font-size: 15px; } } /* ---- n3-script.css ---- */ /* Landing métier : exemple de script 30 s. Fond sombre à médias floutés, timeline de montage en verre (règle, pistes image et voix, tête de lecture) qui joue en boucle, 5 cartes en verre cliquables. */ .s-n3 { --s-n3-c1: var(--clip-orange); --s-n3-c2: var(--pink); --s-n3-c3: var(--blue); --s-n3-c4: #1f8a8a; --s-n3-c5: #8fb3ff; --s-n3-name: 58px; position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); } .s-n3__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .s-n3__bg img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(60px) saturate(1.4); opacity: .1; } .s-n3__bg i { position: absolute; border-radius: 50%; filter: blur(90px); } .s-n3__bg i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 8%; background: rgba(47, 107, 255, .42); } .s-n3__bg i:nth-child(2) { width: 34vw; height: 34vw; right: -8vw; top: 30%; background: rgba(224, 97, 58, .26); } .s-n3__bg i:nth-child(3) { width: 40vw; height: 30vw; left: 30%; bottom: -14vw; background: rgba(31, 138, 138, .3); } .s-n3__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 24px clamp(28px, 5vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); } .s-n3__title { font-size: clamp(30px, 4vw, 62px); text-wrap: balance; } .s-n3__intro { margin: 0; max-width: 44ch; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.55; } /* Timeline en verre */ .s-n3__tl { position: relative; display: grid; grid-template-columns: var(--s-n3-name) minmax(0, 1fr); align-items: center; gap: 8px 0; padding: 16px 22px 20px; } .s-n3__play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: background .3s var(--ease); } .s-n3__play:hover { background: var(--blue); border-color: var(--blue); } .s-n3__play svg { width: 14px; height: 14px; fill: currentColor; } .s-n3__i-pause, .s-n3__play[aria-pressed="true"] .s-n3__i-play { display: none; } .s-n3__play[aria-pressed="true"] .s-n3__i-pause { display: block; } .s-n3__ruler { position: relative; height: 26px; } .s-n3__ruler i { position: absolute; bottom: 0; width: 1px; height: 5px; background: rgba(255, 255, 255, .28); } .s-n3__ruler i.is-major { height: 10px; background: rgba(255, 255, 255, .5); } .s-n3__ruler em { position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); font-size: 12px; font-weight: 300; font-style: italic; color: rgba(255, 255, 255, .6); line-height: 1; } .s-n3__ruler i:last-child em { transform: translateX(-100%); } .s-n3__lane-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .55); } .s-n3__track { grid-column: 2; display: flex; height: 42px; border-radius: 8px; background: rgba(255, 255, 255, .06); overflow: hidden; } .s-n3__track--v { height: 28px; background: transparent; } .s-n3__clip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0 12px; cursor: pointer; background: var(--s-n3-c); color: #fff; border-right: 2px solid rgba(6, 11, 22, .55); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; transition: opacity .4s var(--ease), filter .4s var(--ease); } .s-n3__clip:last-child { border-right: 0; } .s-n3__clip b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .s-n3__c01 { --s-n3-c: var(--s-n3-c1); --s-n3-on: #fff; } .s-n3__c02 { --s-n3-c: var(--s-n3-c2); --s-n3-on: var(--ink); } .s-n3__c03 { --s-n3-c: var(--s-n3-c3); --s-n3-on: #fff; } .s-n3__c04 { --s-n3-c: var(--s-n3-c4); --s-n3-on: #fff; } .s-n3__c05 { --s-n3-c: var(--s-n3-c5); --s-n3-on: var(--ink); } .s-n3__clip.s-n3__c02, .s-n3__clip.s-n3__c05 { color: var(--ink); } .s-n3__wave { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 2px; padding: 0 5px; height: 100%; } .s-n3__wave i { flex: 1 1 0; min-width: 1px; max-width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); transition: background .4s var(--ease); } .s-n3__head-wrap { position: absolute; top: 12px; bottom: 14px; left: calc(22px + var(--s-n3-name)); right: 22px; pointer-events: none; } .s-n3__playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(120, 160, 255, .9); } .s-n3__playhead em { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 5px; background: #fff; color: var(--ink); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; line-height: 1.2; } /* États (lecture) */ .s-n3.is-live .s-n3__clip { opacity: .4; } .s-n3.is-live .s-n3__clip.is-past, .s-n3.is-live .s-n3__clip.is-on { opacity: 1; } .s-n3.is-live .s-n3__wave.is-past i, .s-n3.is-live .s-n3__wave.is-on i { background: #9fbcff; } /* Cartes en verre */ .s-n3__beats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; } .s-n3__beat { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 22px; border-radius: 16px; overflow: hidden; transition: border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease); } .s-n3__beat.is-on { border-color: rgba(143, 179, 255, .7); background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07) 60%); transform: translateY(-4px); } .s-n3__when { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .s-n3__chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--s-n3-c); color: var(--s-n3-on); font-size: 12px; font-weight: 700; white-space: nowrap; transition: transform .3s var(--ease); } .s-n3__chip:hover { transform: translateY(-1px); } .s-n3__step { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .s-n3__voix, .s-n3__visual { position: relative; margin: 0; padding-left: 24px; } .s-n3__voix svg, .s-n3__visual svg { position: absolute; left: 0; top: .2em; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; } .s-n3__voix { font-size: 16px; line-height: 1.45; font-weight: 500; color: #fff; } .s-n3__visual { margin-top: auto; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .62); } .s-n3__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); } .s-n3__bar i { position: absolute; inset: 0; background: var(--s-n3-c); transform-origin: left; transform: scaleX(0); } .s-n3__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(28px, 3.4vw, 48px); } .s-n3__foot p { margin: 0; color: rgba(255, 255, 255, .72); } @media (max-width: 1180px) { .s-n3__beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 960px) { .s-n3__head { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 760px) { .s-n3 { --s-n3-name: 0px; padding-top: 64px; padding-bottom: 64px; } .s-n3__title { font-size: clamp(26px, 7.4vw, 36px); } .s-n3__tl { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 10px; padding: 12px 12px 14px; } .s-n3__play { width: 30px; height: 30px; } .s-n3__lane-name, .s-n3__lane-name--v, .s-n3__track--v { display: none; } .s-n3__track { height: 34px; } .s-n3__clip { padding: 0 6px; font-size: 9.5px; } .s-n3__ruler i:not(.is-major) { display: none; } .s-n3__head-wrap { left: 52px; right: 12px; top: 10px; bottom: 12px; } .s-n3__beats { grid-template-columns: 1fr; gap: 10px; } .s-n3__beat.is-on { transform: none; } .s-n3__foot .cm-btn { width: 100%; } } /* ---- n4-usages.css ---- */ /* Landing métier : 4 usages en cartes, chacune avec son écran au bon format ; encadré des règles du métier */ .s-n4 { padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); } .s-n4__title { font-size: clamp(30px, 4vw, 60px); max-width: 18ch; text-wrap: balance; margin-bottom: clamp(36px, 4.5vw, 64px); } .s-n4__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; } .s-n4__card { display: flex; flex-direction: column; padding: 10px; overflow: hidden; } .s-n4__card:hover { transform: translateY(-4px); border-color: #d5ddef; box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 30px 60px -32px rgba(47, 107, 255, .4); } .s-n4__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: radial-gradient(90% 80% at 50% 0%, #ffffff, #e9eef7 70%), #e9eef7; } .s-n4__frame { position: relative; height: 72%; border-radius: 10px; overflow: hidden; background: #dfe6f3; border: 4px solid #0a0a0a; box-shadow: 0 18px 30px -16px rgba(10, 30, 70, .45); transition: transform .6s var(--ease); } .s-n4__frame--h { aspect-ratio: 16 / 9; height: auto; width: 76%; border-width: 3px; } .s-n4__frame--v { aspect-ratio: 9 / 16; border-radius: 12px; } .s-n4__frame--c { aspect-ratio: 1 / 1; } .s-n4__card:hover .s-n4__frame { transform: scale(1.04); } .s-n4__frame img { width: 100%; height: 100%; object-fit: cover; } .s-n4__play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); } .s-n4__play::after { content: ""; position: absolute; left: 12px; top: 9px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--blue); } .s-n4__prog { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .55); overflow: hidden; } .s-n4__prog i { position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(.35); } .s-n4__card:hover .s-n4__prog i { animation: sN4Prog 2.4s linear infinite; } @keyframes sN4Prog { from { transform: scaleX(0); } to { transform: scaleX(1); } } .s-n4__fmt { position: absolute; left: 10px; top: 10px; min-height: 26px; padding: 0 10px; font-size: 11.5px; font-weight: 700; } .s-n4__body { display: grid; gap: 8px; padding: 18px 10px 12px; } .s-n4__t { margin: 0; font-size: clamp(16px, 1.25vw, 19px); font-weight: 800; text-transform: uppercase; line-height: 1.15; letter-spacing: -.005em; } .s-n4__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted-dark); } .s-n4__rules { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-top: clamp(16px, 2vw, 24px); padding: clamp(22px, 2.6vw, 34px); } .s-n4__rules-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(160deg, #eef3ff, #e1eaff); color: var(--blue); } .s-n4__rules-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .s-n4__rules-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .s-n4__rules-text { margin: 0; max-width: 92ch; font-size: 15.5px; line-height: 1.6; color: var(--muted-dark); } @media (max-width: 1080px) { .s-n4__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .s-n4 { padding-top: 64px; padding-bottom: 64px; } .s-n4__title { font-size: clamp(26px, 7.4vw, 36px); margin-bottom: 28px; } .s-n4__grid { gap: 10px; } .s-n4__card { padding: 6px; } .s-n4__stage { border-radius: 10px; } .s-n4__frame { border-width: 3px; border-radius: 8px; } .s-n4__frame--h { border-width: 2px; } .s-n4__play { width: 24px; height: 24px; margin: -12px 0 0 -12px; } .s-n4__play::after { left: 9px; top: 7px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 8px; } .s-n4__fmt { left: 6px; top: 6px; min-height: 22px; padding: 0 8px; font-size: 10.5px; } .s-n4__body { padding: 12px 6px 8px; gap: 6px; } .s-n4__t { font-size: 14px; } .s-n4__d { font-size: 13.5px; } .s-n4__rules { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; } } /* ---- n5-faq.css ---- */ /* Landing métier : FAQ en cartes accordéon (boutons réels, aria-expanded), carte de contact à côté */ .s-n5 { padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); } .s-n5__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 96px); align-items: start; } .s-n5__side { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 28px; } .s-n5__title { font-size: clamp(30px, 4vw, 60px); } .s-n5__ask { display: grid; gap: 16px; justify-items: start; padding: 24px; max-width: 360px; background: linear-gradient(160deg, #f6f8fd, #eef2fa); } .s-n5__ask p { margin: 0; color: var(--muted-dark); } .s-n5__list { display: grid; gap: 10px; } .s-n5__item { padding: 0 24px; } .s-n5__item:has([aria-expanded="true"]) { border-color: #cdd9f3; box-shadow: 0 1px 2px rgba(10, 30, 70, .04), 0 26px 50px -32px rgba(47, 107, 255, .35); } .s-n5__q { margin: 0; font: inherit; } .s-n5__btn { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 16px; width: 100%; padding: 22px 0; text-align: left; color: var(--ink); } .s-n5__qt { font-size: clamp(16px, 1.3vw, 19px); font-weight: 700; line-height: 1.3; transition: color .3s var(--ease); } .s-n5__btn:hover .s-n5__qt { color: var(--blue); } .s-n5__ico { position: relative; justify-self: end; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); transition: background .35s var(--ease), transform .45s var(--ease), color .35s var(--ease); } .s-n5__ico::before, .s-n5__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; background: currentColor; transition: transform .45s var(--ease); } .s-n5__ico::after { transform: rotate(90deg); } .s-n5__btn[aria-expanded="true"] .s-n5__ico { background: var(--blue); color: #fff; transform: rotate(180deg); } .s-n5__btn[aria-expanded="true"] .s-n5__ico::after { transform: rotate(0deg); } .s-n5__panel { display: grid; grid-template-rows: 1fr; } .s-n5__inner { overflow: hidden; min-height: 0; } .s-n5__inner p { margin: 0; padding: 0 46px 22px 0; font-size: 15.5px; line-height: 1.6; color: var(--muted-dark); } .js .s-n5__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .55s var(--ease), visibility 0s .55s; } .js .s-n5__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--ease); } @media (max-width: 960px) { .s-n5__grid { grid-template-columns: 1fr; } .s-n5__side { position: static; } } @media (max-width: 760px) { .s-n5 { padding-top: 64px; padding-bottom: 64px; } .s-n5__title { font-size: clamp(26px, 7.4vw, 36px); } .s-n5__ask { max-width: none; padding: 18px; } .s-n5__item { padding: 0 16px; border-radius: 14px; } .s-n5__btn { padding: 18px 0; gap: 12px; } .s-n5__qt { font-size: 16px; } .s-n5__inner p { padding: 0 0 18px; font-size: 15px; } }