/* ================================================================ cm-motion.css — Couche motion partagée Cre@teMe Commune à toutes les pages. Dépend des tokens de navbar.css (ou de leur copie inline dans index.html). ================================================================ */ /* ── Tokens de motion ──────────────────────────────────────────── */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --marquee-duration: 42s; } /* ── Lenis (smooth scroll) ───────────────────────────────────── Requis par la lib : sans ces règles la hauteur de page est recalculée en boucle et le scroll natif reprend la main. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ================================================================ 1. REVEALS AU SCROLL États initiaux posés en CSS, libérés par cm-motion.js. La classe .cm-motion-ready n'est ajoutée sur que si GSAP a bien chargé — sans elle, rien n'est masqué et le contenu reste visible même si le CDN tombe. ================================================================ */ html.cm-motion-ready .cm-reveal { opacity: 0; will-change: transform, opacity; } html.cm-motion-ready .cm-reveal-up { transform: translateY(32px); } html.cm-motion-ready .cm-reveal-left { transform: translateX(-32px); } html.cm-motion-ready .cm-reveal-right { transform: translateX(32px); } html.cm-motion-ready .cm-reveal-scale { transform: scale(0.94); } /* Nettoyage après animation — évite de garder des couches GPU inutiles */ .cm-reveal.is-revealed { will-change: auto; } /* ── Reveal automatique des pages internes ───────────────────── Les pages internes sont en Tailwind : annoter chaque bloc à la main serait ingérable. `
` fait entrer toutes ses sections directes dans le système. L'état initial est posé en CSS (et non par JS) pour qu'aucun flash ne soit visible. */ html.cm-motion-ready [data-cm-auto] > section, html.cm-motion-ready [data-cm-auto] > div { opacity: 0; transform: translateY(32px); will-change: transform, opacity; } /* ── Split de caractères (helper maison) ───────────────────────── */ /* position:relative est nécessaire : elle fait de l'élément de titre l'offsetParent de ses caractères, ce qui permet de replacer le dégradé à partir de positions de layout plutôt que de rectangles déformés par les transformations d'animation. */ .cm-split { display: inline-block; position: relative; } .cm-char { display: inline-block; white-space: pre; transform-origin: 50% 100%; } html.cm-motion-ready .cm-char { opacity: 0; will-change: transform, opacity; } /* Éléments du hero animés au chargement par la timeline GSAP */ html.cm-motion-ready [data-cm-hero-follow] { opacity: 0; } html.cm-motion-ready .code-particles-container { opacity: 0; } /* L'intro attend le chargement des polices : sans ce masquage, le titre s'afficherait en clair une fraction de seconde avant d'être découpé en caractères, puis disparaîtrait pour se réanimer. */ html.cm-motion-ready [data-cm-hero] [data-cm-split], html.cm-motion-ready [data-cm-intro-item] [data-cm-split] { visibility: hidden; } /* Les tracés SVG sont masqués jusqu'à ce que cm-motion.js les neutralise (dasharray), sinon ils apparaissent un instant entièrement dessinés avant de se redessiner. */ html.cm-motion-ready .cm-hero-flourish, html.cm-motion-ready .cm-work-frame, html.cm-motion-ready .cm-atelier-viz svg { visibility: hidden; } /* Le « @ » du logo, détaché pour son orbite perpétuelle */ .cm-orbit-glyph { display: inline-block; transform-origin: 50% 50%; will-change: transform; } /* ================================================================ 2. MARQUEE — boucle CSS pure, aucun JS au runtime ================================================================ */ .cm-marquee { position: relative; overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1.1rem 0; /* Fondu sur les bords pour éviter la coupe nette */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cm-marquee-track { display: flex; width: max-content; animation: cmMarquee var(--marquee-duration) linear infinite; } .cm-marquee:hover .cm-marquee-track, .cm-marquee:focus-within .cm-marquee-track { animation-play-state: paused; } .cm-marquee-group { display: flex; align-items: center; flex-shrink: 0; } .cm-marquee-item { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.2vw, 1.75rem); font-weight: 300; letter-spacing: 0.04em; color: var(--color-ivory); padding: 0 1.4rem; white-space: nowrap; opacity: 0.85; } .cm-marquee-sep { color: var(--color-gold); font-size: 0.6em; line-height: 1; opacity: 0.7; } @keyframes cmMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ================================================================ 3. L'ATELIER — narration au scroll des 4 métiers ================================================================ */ .cm-atelier { max-width: 1280px; margin: 0 auto; padding: 6rem 2rem 2rem; } .cm-atelier-head { text-align: center; } .cm-atelier-track { position: relative; margin-top: 3rem; } .cm-atelier-stage { position: relative; display: flex; flex-direction: column; justify-content: center; } .cm-atelier-inner { position: relative; width: 100%; } .cm-atelier-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } /* ── Illustration ─────────────────────────────────────────────── */ .cm-atelier-viz { position: relative; display: flex; justify-content: center; } .cm-atelier-viz svg { width: 100%; max-width: 380px; height: auto; overflow: visible; fill: none; stroke: var(--color-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* Halo discret — l'équivalent sobre du néon, dans la palette or */ filter: drop-shadow(0 0 10px rgba(201, 169, 110, 0.22)); } html[data-theme="light"] .cm-atelier-viz svg { filter: drop-shadow(0 0 8px rgba(154, 111, 46, 0.18)); } .cm-ink .cm-draw { opacity: 0.55; } .cm-ink .cm-draw-accent { opacity: 1; stroke-width: 2.6; stroke: var(--color-gold-light); } /* Confettis géométriques — remplis, sans contour */ .cm-spark > * { fill: var(--color-gold); stroke: none; opacity: 0.5; } /* ── Texte de l'étape ─────────────────────────────────────────── */ .cm-atelier-copy { max-width: 46ch; } .cm-atelier-num { display: block; font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 300; line-height: 1; margin-bottom: 0.75rem; background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cm-atelier-copy h3 { font-family: var(--font-serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 400; line-height: 1.15; color: var(--color-ivory); letter-spacing: 0.02em; margin-bottom: 1rem; } .cm-atelier-copy p { color: var(--color-muted); font-size: 1rem; line-height: 1.8; margin-bottom: 1.4rem; } .cm-atelier-link { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; color: var(--color-gold); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: border-color var(--transition), gap var(--transition); } .cm-atelier-link::after { content: '→'; } .cm-atelier-link:hover, .cm-atelier-link:focus-visible { border-bottom-color: var(--color-gold); gap: 0.9rem; } /* ── Étiquettes de compétences ────────────────────────────────── */ .cm-pillar-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; } .cm-pillar-tag { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 100px; padding: 0.25rem 0.75rem; } /* ── Repère de progression ────────────────────────────────────── */ .cm-atelier-progress { display: flex; justify-content: center; gap: 1.75rem; list-style: none; margin-top: 3rem; } /* Repères cliquables : la lecture est automatique, mais on doit pouvoir revenir sur une étape ou en sauter une. */ .cm-atelier-progress button { position: relative; display: block; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.2em; /* Pleine opacité : ce sont des contrôles cliquables, les atténuer les ferait tomber sous le seuil de contraste. La hiérarchie passe par la couleur et le trait, pas par la transparence. */ color: var(--color-muted); padding: 0 0 0.6rem; transition: color var(--transition); } .cm-atelier-progress button:hover { color: var(--color-gold-light); } .cm-atelier-progress button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-out-expo); } .cm-atelier-progress button.is-active { color: var(--color-gold); } .cm-atelier-progress button.is-active::after { transform: scaleX(1); } /* ── Mode épinglé (desktop + JS uniquement) ─────────────────────── Les étapes se superposent et se relaient au scroll. Hors de ce mode — mobile, JS absent, mouvement réduit — elles restent dans le flux normal et s'empilent, ce qui reste parfaitement lisible. */ @media (min-width: 901px) { /* La scène est épinglée le temps des 4 étapes : elle occupe donc l'écran, et la hauteur fixe de l'intérieur évite que la mise en page ne saute d'une étape à l'autre. */ html.cm-motion-ready .cm-atelier-stage { min-height: 100vh; } html.cm-motion-ready .cm-atelier-inner { min-height: 30rem; display: grid; } html.cm-motion-ready .cm-atelier-step { grid-area: 1 / 1; opacity: 0; } } /* Empilement : espace entre les étapes hors mode épinglé */ .cm-atelier-step + .cm-atelier-step { margin-top: 5rem; } @media (min-width: 901px) { html.cm-motion-ready .cm-atelier-step + .cm-atelier-step { margin-top: 0; } } /* ================================================================ 3 bis. NOS RÉALISATIONS — galerie horizontale ================================================================ */ .cm-works { padding: 5rem 0 2rem; } .cm-works-head { max-width: 1280px; margin: 0 auto 3.5rem; padding: 0 2rem; text-align: center; } .cm-works-viewport { position: relative; } .cm-works-track { display: flex; gap: 1.75rem; padding: 0 2rem; /* Repli par défaut — et comportement définitif sur mobile : défilement tactile natif avec accroche. Le mode épinglé n'est activé qu'au-dessus de 900 px, où le pin ne gêne personne. */ overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cm-works-track::-webkit-scrollbar { display: none; } .cm-work { position: relative; flex: 0 0 auto; width: clamp(240px, 68vw, 340px); scroll-snap-align: center; text-decoration: none; color: inherit; } .cm-work-media { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .cm-work-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.75) brightness(0.82); transform: scale(1.01); transition: filter 0.6s var(--ease-out-soft), transform 0.7s var(--ease-out-soft); } .cm-work:hover .cm-work-media img, .cm-work:focus-visible .cm-work-media img { filter: saturate(1) brightness(1); transform: scale(1.06); } /* Équerres tracées par-dessus le visuel */ .cm-work-frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-gold-light); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0.85; } .cm-work-cat { display: block; margin-top: 1.1rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); } .cm-work h3 { margin-top: 0.45rem; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; color: var(--color-ivory); letter-spacing: 0.02em; } /* Carte finale : l'appel vers la page projets */ .cm-work-more { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5rem; padding: 2.5rem 2rem; aspect-ratio: 4 / 5; border: 1px solid var(--color-border); border-radius: 8px; transition: border-color var(--transition), background-color var(--transition); } .cm-work-more:hover, .cm-work-more:focus-visible { border-color: rgba(201, 169, 110, 0.5); background: rgba(255, 255, 255, 0.03); } .cm-work-more-num { font-family: var(--font-serif); font-size: 3rem; line-height: 1; color: var(--color-gold); } .cm-work-more h3 { margin-top: 0; } /* ── Mode épinglé (desktop + JS) ─────────────────────────────── La piste est translatée par GSAP : le débordement natif doit alors être neutralisé, sinon les deux mécanismes se combattent. */ @media (min-width: 901px) { html.cm-motion-ready .cm-works-viewport { overflow: hidden; } html.cm-motion-ready .cm-works-track { overflow-x: visible; scroll-snap-type: none; padding-left: max(2rem, calc((100vw - 1280px) / 2)); will-change: transform; } } @media (max-width: 900px) { .cm-works-head { margin-bottom: 2.5rem; } } /* Cadre d'un projet pendant qu'il se remplit. Le fond reste visible ~0,8 s le temps que l'image se dévoile : il doit être dans la palette du site, pas dans un bleu ardoise. */ [data-cm-card-media] { background: var(--color-surface); } /* Annonce réservée aux lecteurs d'écran (résultat du filtrage) */ .cm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ================================================================ 4. COMPTEURS ================================================================ */ .cm-stats { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 4.5rem 2rem; } .cm-stats-grid { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; } .cm-stat-value { font-family: var(--font-serif); font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 300; line-height: 1; background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cm-stat-label { display: block; margin-top: 0.85rem; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); } /* ================================================================ 5. FAQ —
natifs, accessibles sans JS ================================================================ */ .cm-faq { max-width: 820px; margin: 0 auto; padding: 6rem 2rem; } .cm-faq-item { border-bottom: 1px solid var(--color-border); } .cm-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 400; color: var(--color-ivory); transition: color var(--transition); } .cm-faq-item summary::-webkit-details-marker { display: none; } .cm-faq-item summary:hover { color: var(--color-gold); } /* Chevron construit en CSS — pas d'icône à charger */ .cm-faq-item summary::after { content: ''; flex-shrink: 0; width: 9px; height: 9px; border-right: 1px solid var(--color-gold); border-bottom: 1px solid var(--color-gold); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.35s var(--ease-out-soft); } .cm-faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .cm-faq-answer { overflow: hidden; } .cm-faq-answer p { color: var(--color-muted); font-size: 0.95rem; line-height: 1.85; padding: 0 0 1.75rem; max-width: 68ch; } /* ================================================================ 6. BANDE CTA FINALE ================================================================ */ .cm-cta-band { position: relative; max-width: 1280px; margin: 0 auto 6rem; padding: 6rem 2rem; text-align: center; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; isolation: isolate; } /* Glow qui suit le curseur — position pilotée par cm-motion.js */ .cm-cta-band::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: radial-gradient( 420px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(201, 169, 110, 0.13), transparent 65% ); opacity: 0; transition: opacity 0.5s var(--ease-out-soft); pointer-events: none; } .cm-cta-band:hover::before { opacity: 1; } .cm-cta-band h2 { font-family: var(--font-serif); font-size: clamp(1.9rem, 4.5vw, 3.25rem); font-weight: 300; line-height: 1.15; color: var(--color-ivory); margin-bottom: 1.25rem; } .cm-cta-band p { color: var(--color-muted); max-width: 52ch; margin: 0 auto 2.5rem; font-size: 1rem; line-height: 1.8; } /* ================================================================ 7. RESPONSIVE ================================================================ */ @media (max-width: 900px) { .cm-pillars-grid { grid-template-columns: 1fr; } .cm-pillars { padding: 4rem 1.5rem; } .cm-faq { padding: 4rem 1.5rem; } .cm-cta-band { padding: 4rem 1.5rem; margin-bottom: 4rem; } } @media (max-width: 640px) { .cm-stats-grid { grid-template-columns: 1fr; gap: 2.75rem; } .cm-stats { padding: 3.5rem 1.5rem; } :root { --marquee-duration: 28s; } } /* ================================================================ 8. MOUVEMENT RÉDUIT Neutralise la totalité du motion, y compris les états initiaux : sans cette garde, un utilisateur en reduced-motion verrait du contenu masqué en permanence. ================================================================ */ @media (prefers-reduced-motion: reduce) { html.cm-motion-ready .cm-reveal, html.cm-motion-ready .cm-char { opacity: 1 !important; transform: none !important; will-change: auto !important; } .cm-marquee-track { animation: none !important; } .cm-pillar:hover, .cm-pillar:focus-visible { transform: none !important; } .cm-cta-band::before { display: none; } } /* ================================================================ 9. CONTRASTE ÉLEVÉ (Windows) ================================================================ */ @media (forced-colors: active) { .cm-stat-value { background: none; -webkit-text-fill-color: unset; color: CanvasText; } .cm-pillar { border: 1px solid ButtonText; } .cm-cta-band { border: 1px solid ButtonText; } .cm-cta-band::before { display: none; } }