/* ══ FONTS ══ */ /* Inter — hébergée EN LOCAL (RGPD). Avant : @import depuis Google Fonts, qui transmettait l'IP de chaque visiteur aux serveurs Google sans consentement. Désormais aucune requête externe. Fichier woff2 variable (poids 400→700). */ @font-face { font-family: 'Inter'; src: url("assets/fonts/inter/Inter-latin.woff2") format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'ArchivoBlack'; src: url("assets/fonts/archivo-black/ArchivoBlack-Regular.woff2") format('woff2'); font-weight: 900; } /* Polices thématiques par projet — hébergées EN LOCAL (RGPD). Avant : vers Google Fonts dans le de chaque page projet. Le fichier woff2 n'est téléchargé que par les pages qui utilisent réellement la famille. */ @font-face { font-family: 'Caveat'; src: url("assets/fonts/caveat/Caveat-latin.woff2") format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url("assets/fonts/cormorant-garamond/CormorantGaramond-latin.woff2") format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url("assets/fonts/cormorant-garamond/CormorantGaramond-italic-latin.woff2") format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Rye'; src: url("assets/fonts/rye/Rye-latin.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Special Elite'; src: url("assets/fonts/special-elite/SpecialElite-latin.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Note : les @font-face 'Benzin' et 'Schorel' ont été retirés — ils n'étaient utilisés nulle part dans le site et leur CDN (cdnfonts.com) renvoyait une 404. Pour les réintroduire : déposer les .woff2 dans assets/fonts/ et recréer un @font-face local (jamais de src distant — RGPD). */ @font-face { font-family: 'Poppins'; src: url("assets/fonts/poppins/Poppins-Regular.woff2") format('woff2'); font-weight: 400; } @font-face { font-family: 'Poppins'; src: url("assets/fonts/poppins/Poppins-Medium.woff2") format('woff2'); font-weight: 500; } @font-face { font-family: 'Poppins'; src: url("assets/fonts/poppins/Poppins-SemiBold.woff2") format('woff2'); font-weight: 600; } @font-face { font-family: 'Poppins'; src: url("assets/fonts/poppins/Poppins-Bold.woff2") format('woff2'); font-weight: 700; } @font-face { font-family: 'Poppins'; src: url("assets/fonts/poppins/Poppins-ExtraBold.woff2") format('woff2'); font-weight: 800; } @font-face { font-family: 'Poppins'; src: url("assets/fonts/poppins/Poppins-Black.woff2") format('woff2'); font-weight: 900; } @font-face { font-family: 'PoppinsEB'; src: url("assets/fonts/poppins/Poppins-ExtraBold.woff2") format('woff2'); font-weight: 800; font-style: normal; } /* ══ THEME VARIABLES ══ */ :root { --bg-primary: radial-gradient(125% 125% at 50% 100%, #000000 40%, #010133 100%); --bg-surface: rgba(20, 20, 20, 0.4); --bg-glass: rgba(20, 20, 20, 0.2); --border-color: rgba(255, 255, 255, 0.08); --text-primary: #F0EDE8; --text-muted: #ACABAA; --accent-color: #40E0D0; --logo-filter: none; --mono-logo-filter: brightness(0) invert(1); --glass-blur: blur(16px); } /* ══ RESET ══ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ══ BASE ══ */ html { scroll-behavior: smooth; transition: background-color 0.4s ease, color 0.4s ease; overflow-x: hidden; } body { background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(175, 109, 255, 0.34), transparent 60%), radial-gradient(ellipse 75% 60% at 75% 35%, rgba(255, 235, 170, 0.445), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 100, 180, 0.324), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(120, 190, 255, 0.364), transparent 62%), linear-gradient(180deg, #dfd0e6 0%, #e3ccd2 100%); background-attachment: fixed; color: var(--text-primary); font-family: 'Poppins', sans-serif; font-weight: 400; min-height: 100vh; width: 100%; max-width: 100vw; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.4s ease, color 0.4s ease; } main { width: 100%; max-width: 100vw; overflow-x: clip; } img, video, iframe, svg { display: block; max-width: 100%; } video, iframe { height: auto; } a { text-decoration: none; color: inherit; } /* ══ HEADER — V1 Glassmorphique (pages : index, mon-parcours, me-contacter) ══ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; background: none; pointer-events: none; padding: 20px 24px 0; transform: scale(0.82); /* -15% puis -10% : 1.07 * 0.85 * 0.9 = 0.82 */ transform-origin: top center; } .header-pill { /* --t : 0 en haut, 1 quand on a scrollé (set par header.js, uniquement sur les pages V1) */ --t: 0; pointer-events: all; display: flex; align-items: center; justify-content: space-between; gap: 32px; width: auto; max-width: 1100px; margin: 0 auto; padding: 10px 22px; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220, calc(0.22 - 0.10 * var(--t))) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255, calc(0.92 - 0.32 * var(--t))) 0%, rgba(245,240,255, calc(0.86 - 0.32 * var(--t))) 100%); backdrop-filter: blur(24px) saturate(1.05); -webkit-backdrop-filter: blur(24px) saturate(1.05); border: 1.5px solid rgba(160,130,230, calc(0.55 - 0.25 * var(--t))); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255, calc(0.92 - 0.35 * var(--t))), inset 0 -1px 0 rgba(60,40,120,0.10), 0 0 18px rgba(120,90,200,0.10), 0 6px 18px rgba(60,40,120,0.12), 0 2px 4px rgba(0,0,0,0.04); transition: background 0.15s ease; } /* ══ HEADER V2-DARK — pages projet à fond sombre ══ */ body.header-dark .header-pill { background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(245,240,255,0.12) 100%); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); border: 1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 6px 24px rgba(0,0,0,0.20); } body.header-dark .header-logo, body.header-dark .nav-link, body.header-dark .social-link { color: #fff; } body.header-dark .nav-link.is-active { background: rgba(160,130,230,0.45); color: #fff; border: 1px solid rgba(180,150,240,0.50); backdrop-filter: blur(8px); } body.header-dark .nav-link:not(.is-active):hover { background: rgba(255,255,255,0.12); color: #fff; } body.header-dark .social-link:hover { background: rgba(255,255,255,0.18); } /* ══ HEADER V2-LIGHT — pages projet à fond clair (Yop, Minions, Candyman) ══ */ body.header-light .header-pill { background: linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.18) 100%); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); border: 1px solid rgba(45,31,74,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.60), 0 6px 22px rgba(45,31,74,0.10); } body.header-light .header-logo, body.header-light .nav-link, body.header-light .social-link { color: #1a1230; } body.header-light .nav-link.is-active { background: rgba(140,110,220,0.32); color: #1a1230; border: 1px solid rgba(140,110,220,0.45); backdrop-filter: blur(8px); } body.header-light .nav-link:not(.is-active):hover { background: rgba(255,255,255,0.40); color: #1a1230; } body.header-light .social-link:hover { background: rgba(255,255,255,0.50); } .header-logo { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: #1a1230; flex-shrink: 0; display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .header-logo:hover { opacity: 0.7; } .header-nav { display: flex; align-items: center; gap: 4px; } .nav-link { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0.04em; color: #1a1230; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; display: inline-flex; align-items: center; white-space: nowrap; text-transform: none; transition: background 0.2s ease, color 0.2s ease; -webkit-text-stroke: 0; text-shadow: none; } .nav-link:hover { background: rgba(255,255,255,0.55); color: #1a1230; border-color: transparent; } .nav-link.is-active { background: rgba(60,40,120,0.85); color: #fff; } .header-socials { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .social-link { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #1a1230; border-radius: 50%; opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); transition: transform 0.2s ease, background 0.2s ease, filter 0.2s ease; font-family: 'Poppins', sans-serif; font-weight: 600; } .social-link:hover { transform: translateY(-1px); background: rgba(255,255,255,0.50); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.20)); } .social-link svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 0.6; paint-order: stroke fill; } /* ══ HEADER MOBILE BURGER + DRAWER ══ */ .header-burger { display: none; width: 40px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; pointer-events: all; flex-shrink: 0; transition: opacity 0.2s ease; } .header-burger__bar { display: block; width: 22px; height: 2px; background: #1a1230; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, background 0.2s ease; } body.header-dark .header-burger__bar { background: #fff; } body.header-light .header-burger__bar { background: #1a1230; } .header-burger.is-open .header-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header-burger.is-open .header-burger__bar:nth-child(2) { opacity: 0; } .header-burger.is-open .header-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .header-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 12, 40, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; z-index: 1099; transition: opacity 0.3s ease; } .header-drawer-backdrop.is-open { opacity: 1; pointer-events: all; } .header-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 78%; max-width: 320px; background: linear-gradient(180deg, #f3eaf7 0%, #ecd9e3 100%); z-index: 1100; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; padding: 64px 24px 28px; box-shadow: -10px 0 30px rgba(60, 40, 120, 0.25); pointer-events: all; visibility: hidden; } .header-drawer.is-open { transform: translateX(0); visibility: visible; } .header-drawer__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(60, 40, 120, 0.12); border-radius: 50%; color: #1a1230; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; padding: 0; } .header-drawer__close:hover { background: rgba(255, 255, 255, 0.85); } .header-drawer__close:active { transform: scale(0.95); } .header-drawer__nav { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .drawer-link { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; color: #1a1230; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(160, 130, 230, 0.20); transition: background 0.2s ease, transform 0.15s ease; display: block; text-align: left; } .drawer-link:active { background: rgba(255, 255, 255, 0.85); transform: scale(0.98); } .header-drawer__socials { display: flex; gap: 14px; margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(60, 40, 120, 0.10); justify-content: center; } .header-drawer__socials .social-link { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.6); } /* ══ HERO ══ */ .hero { min-height: 100vh; padding: calc(128px + 2vh) calc(40px - 4vw) 100px calc(80px + 4vw); display: flex; align-items: center; gap: 56px; position: relative; overflow: hidden; } .hero-content { flex: 1; max-width: 580px; } /* ══ HERO STATS ══ */ .stats-bloc { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: 100px; transform: translateX(55px); } /* ── VA2 — nouvelle version hero stats ── */ .va2-bloc { align-items: flex-start !important; margin-left: 0 !important; transform: none !important; position: relative; } /* ── Nuage de logos VA2 (3 profondeurs) ── */ .va2-stage .logo-cloud { position: absolute; top: 50%; left: 50%; width: min(900px, 76vw); height: 680px; transform: translate(calc(-50% + 6%), -50%) scale(0.789); pointer-events: none; z-index: 0; } .va2-stage .logo-particle { position: absolute; object-fit: contain; opacity: 0; animation: va2-cloud-in 0.9s cubic-bezier(0.18, 0.9, 0.25, 1) forwards, va2-cloud-float var(--float-period, 6s) ease-in-out var(--float-delay, 0s) infinite; } @keyframes va2-cloud-in { from { opacity: 0; transform: scale(0.6); } to { opacity: var(--end-opacity, 1); transform: scale(1); } } @keyframes va2-cloud-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--drift-x, 0px), var(--drift-y, -8px)); } } .va2-stage .layer-front .logo-particle { filter: drop-shadow(0 8px 22px rgba(0,0,0,0.18)); --end-opacity: 1; z-index: 4; } .va2-stage .layer-mid .logo-particle { filter: blur(1.5px) drop-shadow(0 4px 14px rgba(0,0,0,0.12)); --end-opacity: 0.72; z-index: 2; } .va2-stage .layer-back .logo-particle { filter: blur(5px); --end-opacity: 0.40; z-index: 1; } .va2-stage .va2-row, .va2-stage .va2-line, .va2-stage .va2-pill { position: relative; z-index: 3; transform: translateX(10.5%); } .va2-row { display: flex; flex-direction: row; align-items: center; gap: 18px; } .va2-number { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(92.3px, 10.93vw, 166.95px); line-height: 0.9; letter-spacing: -0.02em; background: url("data:image/svg+xml;utf8,"), radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.85) 0%, rgba(220,200,245,0.55) 35%, rgba(170,140,220,0.35) 70%, rgba(120,90,180,0.20) 100%); background-size: 240px 240px, 100% 100%; background-blend-mode: overlay, normal; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 3.5px #ffffff; filter: drop-shadow(0 0 48px rgba(80,50,160,0.42)) drop-shadow(0 0 18px rgba(60,40,130,0.32)) drop-shadow(0 12px 32px rgba(42,31,84,0.30)); flex-shrink: 0; } .va2-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 14px; border-left: 1.5px solid rgba(160,130,230,0.30); transform: scale(0.9025); transform-origin: left center; } .va2-note { position: relative; display: inline-block; padding: 5px 10px 6px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 11.62px; letter-spacing: 0.14em; text-transform: uppercase; color: #2a1f54; box-shadow: 0 6px 14px rgba(60,40,120,0.18), 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.45); } .va2-note::after { content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.10) 50%, rgba(60,40,120,0.18) 100%); border-bottom-left-radius: 2px; } .va2-note--ads { background: linear-gradient(135deg, #e8dcf7 0%, #d8c8ee 100%); } .va2-note--inf { background: linear-gradient(135deg, #c2a8e6 0%, #a884d6 100%); } .va2-note--org { background: linear-gradient(135deg, #7c5cb8 0%, #5d3f9b 100%); color: #ffffff; text-shadow: 0 1px 2px rgba(40,25,80,0.45); } .va2-line { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(29.98px, 3.45vw, 47.55px); line-height: 1.05; color: rgba(255,255,255,0.92); letter-spacing: -0.01em; text-shadow: 0 0 38px rgba(60,40,130,0.45), 0 0 14px rgba(42,31,84,0.32), 0 6px 22px rgba(42,31,84,0.28); margin-left: 15%; white-space: nowrap; } .va2-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 22px; margin-left: 15%; margin-top: 10px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(19.53px, 2.37vw, 29.98px); letter-spacing: 0.12em; text-transform: uppercase; color: #2a1f54; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; border: 1.5px solid rgba(160,130,230,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 6px 18px rgba(60,40,120,0.18), 0 2px 4px rgba(0,0,0,0.06); text-shadow: 0 1px 0 rgba(255,255,255,0.55); white-space: nowrap; } /* Toutes les rows */ .stats-row { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 14px; flex-wrap: nowrap; white-space: nowrap; } /* Sous-bloc rows 2 & 3 — même largeur imposée par la row 2 */ .stats-sub-bloc { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: var(--stats-sub-bloc-width, auto); } .stats-sub-bloc > .stats-row { width: 100%; } /* Row 3 */ .stats-row--logos { align-items: center; justify-content: space-between; gap: 14px; } /* +300 : contour seul, intérieur transparent */ .stat-number { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(62px, 7.4vw, 106px); color: transparent; -webkit-text-stroke: 3px var(--text-primary); line-height: 1; white-space: nowrap; text-shadow: none; background: none; padding: 0; border: none; } /* CONTENUS / PRODUITS SUR */ .stat-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(26px, 3.5vw, 48px); color: var(--text-primary); text-transform: uppercase; line-height: 1; white-space: nowrap; text-shadow: none; -webkit-text-stroke: 0; } /* +300 dans le hero : contour blanc */ .hero .stat-number { -webkit-text-stroke: 3px #ffffff; filter: drop-shadow(0 2px 8px rgba(255,255,255,0.18)); } /* Row 2 : badges */ .stats-row--badges { justify-content: flex-end; gap: 12px; flex-wrap: nowrap; } .stat-badge { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(14px, 1.45vw, 20px); color: #ffffff; text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 18px; border-radius: 10px; white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.35); } .stat-badge--ads { background: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%); border: 1.5px solid rgba(196, 181, 253, 0.55); } .stat-badge--influences { background: linear-gradient(180deg, #84A639 0%, #5C7C28 100%); border: 1.5px solid rgba(190, 222, 130, 0.55); } .stat-badge--organiques { background: linear-gradient(180deg, #E5091A 0%, #A8050F 100%); border: 1.5px solid rgba(255, 110, 120, 0.55); } /* Pill logos */ .stat-logos-pill { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 7px 8px; background: rgba(10, 8, 40, 0.72); border-radius: 14px; border: none; flex-shrink: 0; } .stat-logo-img { height: clamp(23px, 2.5vw, 32px); width: auto; object-fit: contain; filter: none; } /* Underline wavy — créativité */ .word-creativite { position: relative; display: inline-block; } .wave-underline { position: absolute; bottom: -6px; left: 0; width: 100%; height: 9px; overflow: visible; } .wave-path { animation: draw-wave 0.55s ease-out forwards; animation-delay: 0.45s; } /* Cercle partiel — performance */ .word-performance { position: relative; display: inline-block; padding: 8px 16px; margin: -8px -16px; } .perf-circle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; animation: appear-circle 0.4s ease-out forwards; animation-delay: 0.65s; } .hero-title__line { display: block; opacity: 0; animation: hero-fade-up 0.7s ease-out forwards; } .hero-title__line--2 { animation-delay: 0.1s; } .hero-title__line--3 { animation-delay: 0.2s; } /* Texte secondaire — moitié de la taille du +300 */ .hero-sub { font-size: 0.5em; vertical-align: middle; letter-spacing: 0.01em; } /* Ligne 3 : texte + logos inline */ .hero-sub--with-logos { display: flex; align-items: center; gap: 8px; } .hero-inline-logo { height: 1.2em; width: auto; flex-shrink: 0; object-fit: contain; } /* Chips */ .hero-chips { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; } .hero-chip { font-family: 'PoppinsEB', 'Poppins', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--text-primary); background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 20px; opacity: 0; animation: hero-fade-up 0.45s ease-out forwards; } .hero-chip--1 { animation-delay: 0.30s; } .hero-chip--2 { animation-delay: 0.35s; } .hero-chip--3 { animation-delay: 0.40s; } /* Ligne plateformes */ .hero-platforms { margin-top: 22px; display: flex; align-items: center; gap: 12px; opacity: 0; animation: hero-fade-up 0.45s ease-out forwards; animation-delay: 0.55s; } .hero-platforms__label { font-family: 'PoppinsEB', 'Poppins', sans-serif; font-weight: 500; font-size: 14px; color: var(--text-primary); } .hero-platforms__logo { height: 26px; width: auto; object-fit: contain; } /* ══ TICKER ══ */ .ticker-section { position: relative; background: transparent; box-shadow: none; border-top: none; border-bottom: none; padding: 38px 0 30px; } .ticker-section > * { position: relative; z-index: 1; } .ticker-sublabel { display: block; text-align: center; font-family: 'Poppins', sans-serif; font-size: clamp(11px, 1.15vw, 16px); font-weight: 700; letter-spacing: 0.08em; text-transform: none; color: #ffffff; margin: 0 auto 56px; line-height: 1.05; text-shadow: 0 1px 4px rgba(0,0,0,0.25); width: fit-content; padding: 7px 22px; border-radius: 12px; background: linear-gradient(135deg, #4a2d9e 0%, #2a1f54 100%); border: 1.5px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 14px rgba(42,31,84,0.35); white-space: nowrap; } .ticker-label { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6.6px 24.2px !important; font-family: 'Poppins', sans-serif !important; font-size: clamp(14.3px, 1.804vw, 23.1px) !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #2a1f54 !important; margin: 0 auto 14px !important; width: clamp(316.8px, 36.3vw, 475.2px) !important; text-align: center !important; line-height: 1.2 !important; box-sizing: border-box !important; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 13.2px !important; border: 1.5px solid rgba(160,130,230,0.40) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 6px 18px rgba(60,40,120,0.18), 0 2px 4px rgba(0,0,0,0.06) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important; white-space: nowrap !important; transform: none !important; } .ticker-section { text-align: center; } .ticker-band { width: 100%; max-width: 1100px; margin: 0 auto; background: linear-gradient(90deg, rgba(175,109,255,0.0) 0%, rgba(175,109,255,0.28) 22%, rgba(255,235,170,0.36) 50%, rgba(255,100,180,0.28) 78%, rgba(120,190,255,0.0) 100%); border: none; border-radius: 0; box-shadow: none; height: 8rem; overflow: hidden; display: flex; align-items: center; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%); } .ticker-track { display: flex; width: max-content; align-items: center; gap: 2.4rem; white-space: nowrap; animation: scroll-logos 39s linear infinite; padding: 0; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 1000px; -webkit-perspective: 1000px; } .ticker-band--reverse { opacity: 0.45; margin-top: 0.75rem; } .ticker-track--reverse { animation: ticker-scroll-reverse 55s linear infinite; } .ticker-capsule { display: flex; align-items: center; justify-content: center; width: 6rem; height: 5rem; background: transparent; border: none; border-radius: 0; flex-shrink: 0; padding: 0; box-sizing: border-box; } .ticker-capsule--narrow { width: 4rem; } .ticker-capsule--wide { width: 7rem; } .ticker-capsule--xwide { width: 8.5rem; } .ticker-logo { max-width: 100%; max-height: 2.4rem; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 2px 8px rgba(255,255,255,0.6)) drop-shadow(0 1px 2px rgba(60, 40, 120, 0.14)); } /* Modifiers — ajuster la présence visuelle perçue (pas la boîte théorique) */ .ticker-logo--sm { max-height: 1.65rem; max-width: 85%; } .ticker-logo--md { max-height: 1.95rem; max-width: 92%; } .ticker-logo--lg { max-height: 2.25rem; max-width: 100%; } .ticker-logo--xl { max-height: 2.55rem; max-width: 100%; } .ticker-logo--white, .ticker-logo--mono { filter: brightness(0) saturate(100%) invert(13%) sepia(63%) saturate(2400%) hue-rotate(248deg) brightness(95%) drop-shadow(0 2px 8px rgba(255,255,255,0.6)) drop-shadow(0 1px 2px rgba(60, 40, 120, 0.14)); } .ticker-logo.logo--armee-air { max-height: 3.3rem; max-width: 100%; } .ticker-logo.logo--disneyland { max-height: 3.6rem; max-width: 100%; } .ticker-logo.logo--yop { max-height: 3.3rem; max-width: 100%; } .ticker-logo.logo--loreal { max-width: 5.5rem; } .ticker-logo.logo--blablacar { max-width: 7rem; } /* ══ FILTRES ══ */ .filters-section { background: transparent; width: 90%; margin: 0 auto; padding: 90px 0 0; display: flex; flex-direction: column; align-items: center; gap: 22px; scroll-margin-top: 100px; } .filters-title { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 7px 15px !important; font-family: 'Poppins', sans-serif !important; font-size: clamp(13px, 1.64vw, 21px) !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #2a1f54 !important; margin: 0 auto !important; width: fit-content !important; text-align: center !important; line-height: 1.2 !important; box-sizing: border-box !important; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 12px !important; border: 1.5px solid rgba(160,130,230,0.40) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 6px 18px rgba(60,40,120,0.18), 0 2px 4px rgba(0,0,0,0.06) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important; white-space: nowrap !important; transform: none !important; } .filters-section > .filters-title:not(.parcours-heading) { padding: 7.7px 16.5px !important; font-size: clamp(14.3px, 1.804vw, 23.1px) !important; border-radius: 13.2px !important; } .filters-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; } /* ── Neon Glow — violet "+ 40 marques accompagnées" + halo coloré pulsant à l'actif ── */ .filter-btn { --c: 196, 175, 255; font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 800; letter-spacing: 0.085em; text-transform: uppercase; color: #ffffff; background: linear-gradient(135deg, #4a2d9e 0%, #2a1f54 100%); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 12px 24px; cursor: pointer; white-space: nowrap; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 14px rgba(42, 31, 84, 0.35); transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Couleurs néon par catégorie */ .filter-btn[data-filter="organique"] { --c: 255, 80, 90; } .filter-btn[data-filter="publicitaire"] { --c: 100, 200, 255; } .filter-btn[data-filter="influence"] { --c: 90, 255, 180; } .filter-btn[data-filter="marque-personnelle"] { --c: 255, 180, 90; } .filter-btn:hover, .filter-btn.is-active { color: rgb(var(--c)); } /* ══ GALERIE ══ */ .gallery-section { background: transparent; width: 90%; margin: 0 auto; padding: 16px 0 58px; } .parcours-block { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; width: 100%; gap: 32px; padding: 60px 0 140px; box-sizing: border-box; scroll-margin-top: 100px; } .parcours-block .parcours-heading { margin: 0 auto; } .parcours-block .parcours-capsule { margin: 0 auto; width: 100%; } .parcours-heading { margin-top: 50px; width: 90%; margin-left: auto; margin-right: auto; text-align: center; font-size: clamp(14.3px, 1.804vw, 23.1px) !important; padding: 7.7px 16.5px !important; border-radius: 13.2px !important; } .parcours-capsule { width: 90%; margin: 23px auto 0; background: none; border: none; padding: 0; box-sizing: border-box; } /* ══════════════════════════════════════════════════ XP CARD — twins_moreno (V3 final) ══════════════════════════════════════════════════ */ /* Stage : zoom global pour caler la taille de la section */ .xp-stage { position: relative; max-width: 1340px; margin: 0 auto 0 0; padding-top: 60px; zoom: 0.80325; } .parcours-capsule .xp-stage:first-of-type, .parcours-capsule .xp-stage:nth-of-type(2) { zoom: 0.648972; } .parcours-capsule .xp-stage:nth-of-type(2) { margin-top: 56px; } .parcours-capsule .xp-stage:first-of-type .xp-list, .parcours-capsule .xp-stage:nth-of-type(2) .xp-list { zoom: 1.07; } .parcours-capsule .xp-stage:first-of-type .xp-section + .xp-section, .parcours-capsule .xp-stage:nth-of-type(2) .xp-section + .xp-section { margin-top: 20px; } .parcours-capsule .xp-stage:first-of-type .xp-section, .parcours-capsule .xp-stage:nth-of-type(2) .xp-section { padding-top: 2px; padding-bottom: 2px; } .parcours-capsule .xp-stage:first-of-type .xp-clients-row, .parcours-capsule .xp-stage:nth-of-type(2) .xp-clients-row { margin-top: 8px; } .parcours-capsule .xp-stage:first-of-type .xp-section:last-of-type, .parcours-capsule .xp-stage:nth-of-type(2) .xp-section:last-of-type { margin-top: 4px; } /* Big rectangle */ .xp-card { position: relative; width: min(79.2%, 1080px); padding: 16px 46px 34px; border-radius: 20px; background: radial-gradient(ellipse at 18% -30%, rgba(140,110,220,0.14) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(245,240,255,0.40) 100%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1.5px solid rgba(160,130,230,0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 14px 38px rgba(60,40,120,0.14); } /* Floating title pill (straight, above the rectangle) */ .xp-floating-title { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); } .parcours-capsule .xp-stage:nth-of-type(2) .xp-floating-title { transform: translateX(-50%); } .xp-floating-title { padding: 10px 27px 12px; background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,240,255,0.85) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(160,130,230,0.45); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 8px 22px rgba(60,40,120,0.20), 0 3px 6px rgba(0,0,0,0.06); color: #2a1f54; font-family: 'Poppins', sans-serif; text-align: center; line-height: 1.15; white-space: nowrap; z-index: 10; } .xp-floating-title__main { display: block; font-weight: 900; font-size: 21.81px; letter-spacing: 0.10em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,0.55); } .xp-floating-title__sub { display: block; margin-top: 3px; font-weight: 500; font-style: italic; font-size: 21.06px; letter-spacing: 0.04em; color: #2a1f54; text-transform: none; } /* Quote */ .xp-quote { padding: 10px 39px; margin: 12px auto 10px; max-width: 100%; background: rgba(160,130,230,0.06); border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 19.40px; font-weight: 400; line-height: 1.55; color: rgba(42,31,84,0.85); text-align: center; } /* Sections */ .xp-section { display: flex; flex-direction: column; align-items: center; } .xp-section + .xp-section { margin-top: 10px; } /* Section pills (Missions / Clients / Mes résultats) */ .xp-label-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 19px; background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,240,255,0.85) 100%); border: 1.5px solid rgba(160,130,230,0.45); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 6px 16px rgba(60,40,120,0.16), 0 2px 4px rgba(0,0,0,0.04); color: #2a1f54; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15.39px; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,0.55); margin-bottom: 14px; } .xp-label-pill--missions, .xp-label-pill--clients, .xp-label-pill--results, .xp-label-pill--context { font-size: 20.34px; gap: 8px; padding: 7px 19px; } .xp-section--context { margin-top: 24px; } .xp-section--context + .xp-quote { margin-top: 2px; } .xp-label-pill--clients { margin-bottom: 10px; } .xp-label-pill--results { margin-bottom: 12px; } .xp-pill-emoji { display: inline-block; font-size: 22.75px; line-height: 1; filter: grayscale(0.15); transform: translateY(-0.5px); } /* Missions list — 3 cols + hairlines verticales */ .xp-list { list-style: none; margin: 0; padding: 8px 0 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; align-items: stretch; } .xp-list li { position: relative; padding: 6px 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 5px; border-right: 1.15px solid rgba(42,31,84,0.18); } .xp-list li:last-child { border-right: none; } .xp-list li::before { content: none; } .xp-mission__lead { margin: 0; font-family: 'Poppins', sans-serif; font-size: 18.06px; font-weight: 700; color: #2a1f54; line-height: 1.38; letter-spacing: -0.01em; white-space: normal; text-wrap: balance; } .xp-mission__body { margin: 2px 0 0; font-family: 'Poppins', sans-serif; font-size: 17.40px; font-weight: 400; color: rgba(42,31,84,0.85); line-height: 1.5; text-wrap: balance; } /* Clients — logos normalisés visuellement par marque */ .xp-clients-row { display: flex; align-items: center; justify-content: space-around; flex-wrap: nowrap; width: 100%; padding: 2px 14px 4px; gap: 46px; margin-top: 4px; min-height: 86px; } .xp-client-logo { flex: 0 0 auto; width: auto; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(60,40,120,0.22)) drop-shadow(0 2px 4px rgba(60,40,120,0.12)); transition: transform 0.25s ease, filter 0.25s ease; } .xp-client-logo--timberland { height: 103.27px; } .xp-client-logo--lacoste { height: 42.28px; } .xp-client-logo--lanieri { height: 42.28px; } .xp-client-logo--jules { height: 27.17px; } .xp-client-logo--netflix { height: 54.31px; } .xp-client-logo--universal { height: 61.01px; } .xp-client-logo--loreal { height: 28.47px; } .xp-client-logo--disneyland { height: 104.77px; } .parcours-capsule .xp-stage:nth-of-type(2) .xp-clients-row { justify-content: space-evenly; } .xp-pill-meta { font-size: 0.78em; font-weight: 600; opacity: 0.72; margin-left: 2px; letter-spacing: 0; text-transform: none; } .xp-client-logo:hover { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 10px 16px rgba(60,40,120,0.30)) drop-shadow(0 3px 5px rgba(60,40,120,0.14)); } /* Stats — 5 cols + dividers */ .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: center; padding: 2px 0 0; margin-top: 14px; width: 100%; } .stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 7px; border-right: 1.15px solid rgba(42,31,84,0.14); text-align: center; } .stat:last-child { border-right: none; } .stat__num { font-family: 'Poppins', sans-serif; font-size: clamp(24.88px, 2.073vw, 28.62px); font-weight: 700; color: #2a1f54; line-height: 1; letter-spacing: -0.02em; } .stat__unit { font-size: 0.83em; font-weight: 600; letter-spacing: -0.01em; margin-left: 0.1em; } .stat__label { font-family: 'Poppins', sans-serif; font-size: 13.91px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(42,31,84,0.65); } /* Phones — TikTok en haut-gauche, Instagram en bas-droit (diagonale) */ .phones-stack { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; } .phones-stack .phone-wrap:first-child { /* TikTok — bord haut aligné avec le bord haut du grand rectangle (xp-stage padding-top: 60px) */ position: absolute; top: 60px; left: calc(79.2% + 157px); transform: none; z-index: 3; } .phones-stack .phone-wrap:first-child .phone-card--top { transform: rotate(0deg); } .phones-stack .phone-wrap:nth-child(2) { /* Instagram — diagonale depuis le coin bas-droit de TikTok (largeur TikTok 284.12px / hauteur ≈505px) */ position: absolute; top: calc(60px + 505px - 80px - 180px); left: calc(79.2% + 157px + 284.12px - 20px + 50px + 40px); transform: none; z-index: 2; } .phones-stack .phone-wrap:nth-child(2) .phone-card--bot { transform: rotate(0deg); } .phone-card { position: relative; flex: 0 0 auto; width: 284.12px; aspect-ratio: 9/16; border-radius: 24px; overflow: hidden; border: 1.5px solid rgba(160,130,230,0.45); box-shadow: 0 30px 56px -14px rgba(60,40,120,0.45), 0 14px 26px rgba(60,40,120,0.20), inset 0 1px 0 rgba(255,255,255,0.6); background: #efeaf6; } .phone-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .phone-card--top { transform: rotate(0deg); z-index: 3; } .phone-card--bot { transform: rotate(5deg); z-index: 2; } .phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; } .phone-badge { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); z-index: 10; width: 62.5px; height: 62.5px; border-radius: 50%; background: #ffffff; border: 2.35px solid rgba(160,130,230,0.55); box-shadow: 0 30px 56px -14px rgba(60,40,120,0.45), 0 14px 26px rgba(60,40,120,0.25), inset 0 1px 0 rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; } .phone-badge img { width: 37.5px; height: 37.5px; object-fit: contain; filter: contrast(1.15) drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } .phones-stack .phone-wrap:first-child .phone-badge img { width: 63px; height: 63px; max-width: none; transform: scale(1); } .phones-stack .phone-wrap:first-child .phone-badge { left: calc(50% - 10.6px); } .phones-stack .phone-wrap:nth-child(2) .phone-badge { left: calc(50% + 10.6px); } /* ── Changer --gallery-cols pour passer à 2, 3, 4 colonnes ── */ /* ── Contrôle de densité ── */ .gallery-controls { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 14px; } .gallery-controls__btns { display: flex; align-items: center; gap: 2px; background: linear-gradient(135deg, #4a2d9e 0%, #2a1f54 100%); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 14px rgba(42, 31, 84, 0.35); } .gallery-view-btn { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.70); background: transparent; border: none; border-radius: 999px; padding: 7px 11px; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .gallery-view-btn svg rect { fill: rgba(255, 255, 255, 0.70); transition: fill 0.25s ease; } .gallery-view-btn:hover { color: #ffffff; } .gallery-view-btn:hover svg rect { fill: #ffffff; } .gallery-view-btn.is-active { color: #ffffff; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 1px 2px rgba(0, 0, 0, 0.18); } .gallery-view-btn.is-active svg rect { fill: #ffffff; } /* ── Grille ── */ .gallery-grid { display: grid; grid-template-columns: repeat(var(--gallery-cols, 3), 1fr); gap: 11px; } .gallery-grid.grid-view-2 { --gallery-cols: 2; } .gallery-grid.grid-view-3 { --gallery-cols: 3; } .gallery-grid.grid-view-4 { --gallery-cols: 4; } @media (max-width: 900px) { .gallery-grid, .gallery-grid.grid-view-3, .gallery-grid.grid-view-4 { --gallery-cols: 2; } } @media (max-width: 560px) { .gallery-grid, .gallery-grid.grid-view-2, .gallery-grid.grid-view-3, .gallery-grid.grid-view-4 { --gallery-cols: 1; } } .gallery-card { aspect-ratio: 16 / 8.5; border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-glass); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.25s ease, transform 0.25s ease; } .gallery-card:hover { border-color: var(--text-muted); transform: translateY(-4px); } .gallery-card.is-hidden { display: none; } .gallery-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .gallery-card__body { display: flex; flex-direction: column; align-items: center; gap: 14px; } .gallery-card__cross { position: relative; width: 24px; height: 24px; } .gallery-card__cross::before, .gallery-card__cross::after { content: ''; position: absolute; background: rgba(240, 237, 232, 0.18); border-radius: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gallery-card__cross::before { width: 1px; height: 24px; } .gallery-card__cross::after { width: 24px; height: 1px; } .gallery-card__hint { font-family: 'PoppinsEB', 'Poppins', sans-serif; font-size: 7px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(240, 237, 232, 0.22); } .gallery-card__num { position: absolute; bottom: 11px; right: 13px; font-family: 'PoppinsEB', 'Poppins', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; color: rgba(240, 237, 232, 0.15); } /* ══ OVERLAY V4 (voile dégradé diagonal) + T12 (quote style) ══ */ .gallery-card--preview { position: relative; cursor: pointer; --c: #E50914; --c2: #9c0710; } .gallery-card__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, transparent) 0%, color-mix(in srgb, var(--c2) 80%, transparent) 100%); backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 7%; opacity: 0; transition: opacity 0.45s ease; border-radius: inherit; } .gallery-card--preview:hover .gallery-card__overlay, .gallery-card--preview.is-tap-active .gallery-card__overlay { opacity: 1; } .ov-title { font-family: 'Poppins', sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1.18; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); position: relative; padding: 0 36px; margin: 0; transform: translateY(8px); transition: transform 0.45s ease; } /* Titre mannequinat : -5% du font-size sur toutes les vues. Desktop : 1.7rem → 1.615rem. Mobile (≤480px) : 14.4px → 13.68px (!important nécessaire pour battre l'inline style de index.html). */ .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 1.615rem; } @media (max-width: 480px) { .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 13.68px !important; } } /* Vues fractionnées 3 / 4 colonnes (MacBook Pro split) : -15% titre + date. Le sélecteur mannequinat ci-dessus (spécificité 0,3,0) l'emportait sur .grid-view-3/4 .ov-title (0,2,0), d'où un titre trop gros en 3 et 4 col. */ .grid-view-3 .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 1.373rem; /* 1.615rem × 0.85 */ } .grid-view-3 .gallery-card[data-href="projet-mannequinat.html"] .ov-year { font-size: 0.697rem; /* 0.82rem × 0.85 */ } .grid-view-4 .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 0.988rem; /* 1.098rem × 0.90 (titre Mannequinat 4-col −10%) */ } .grid-view-4 .gallery-card[data-href="projet-mannequinat.html"] .ov-year { font-size: 0.457rem !important; /* 0.381rem × 1.20 (date Mannequinat 4-col +20%) */ } .ov-title::before, .ov-title::after { content: ''; position: absolute; top: 50%; width: 22px; height: 2px; background: rgba(255, 255, 255, 0.85); } .ov-title::before { left: 0; } .ov-title::after { right: 0; } .ov-year { display: block; font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600; font-style: italic; letter-spacing: 0.18em; color: #fff; opacity: 0.92; margin-top: 14px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); transform: translateY(8px); transition: transform 0.45s ease; } .gallery-card--preview:hover .ov-title, .gallery-card--preview:hover .ov-year, .gallery-card--preview.is-tap-active .ov-title, .gallery-card--preview.is-tap-active .ov-year { transform: translateY(0); } /* ── Adaptation des tailles selon la densité de grille ── */ .grid-view-2 .ov-title { font-size: 1.7rem; padding: 0 36px; } .grid-view-2 .ov-title::before, .grid-view-2 .ov-title::after { width: 22px; height: 2px; } .grid-view-2 .ov-year { font-size: 0.95rem; margin-top: 14px; } /* En 2-colonnes, on neutralise le
du titre Netflix : sinon le texte se répartit sur 3 lignes (… NETFLIX / FRANCE / SUR TIKTOK). Sans ce
, le wrap naturel donne 2 lignes : … NETFLIX / FRANCE SUR TIKTOK. */ .grid-view-2 .ov-title .br-desktop-only { display: none; } .grid-view-3 .ov-title { font-size: 1.25rem; padding: 0 28px; } .grid-view-3 .ov-title::before, .grid-view-3 .ov-title::after { width: 16px; height: 2px; } .grid-view-3 .ov-year { font-size: 0.82rem; margin-top: 10px; letter-spacing: 0.16em; } .grid-view-4 .ov-title { font-size: 0.95rem; padding: 0 22px; line-height: 1.2; } .grid-view-4 .ov-title::before, .grid-view-4 .ov-title::after { width: 12px; height: 1.5px; } .grid-view-4 .ov-year { font-size: 0.7rem; margin-top: 8px; letter-spacing: 0.14em; } /* Tirets rapprochés du titre pour Lupin + Collaborations commerciales : le gap (padding - dash width) est ramené de 10-14px à ~6px en élargissant le dash sans modifier le padding (pour éviter de toucher au layout du texte). */ .gallery-card[data-href="projet-lupin.html"] .ov-title::before, .gallery-card[data-href="projet-lupin.html"] .ov-title::after, .gallery-card[data-href="projet-collaborations-commerciales.html"] .ov-title::before, .gallery-card[data-href="projet-collaborations-commerciales.html"] .ov-title::after { width: 30px; } .grid-view-3 .gallery-card[data-href="projet-lupin.html"] .ov-title::before, .grid-view-3 .gallery-card[data-href="projet-lupin.html"] .ov-title::after, .grid-view-3 .gallery-card[data-href="projet-collaborations-commerciales.html"] .ov-title::before, .grid-view-3 .gallery-card[data-href="projet-collaborations-commerciales.html"] .ov-title::after { width: 22px; } .grid-view-4 .gallery-card[data-href="projet-lupin.html"] .ov-title::before, .grid-view-4 .gallery-card[data-href="projet-lupin.html"] .ov-title::after, .grid-view-4 .gallery-card[data-href="projet-collaborations-commerciales.html"] .ov-title::before, .grid-view-4 .gallery-card[data-href="projet-collaborations-commerciales.html"] .ov-title::after { width: 16px; } /* Variante compacte : pour les titres plus longs qui doivent tenir sur 2 lignes */ .grid-view-2 .ov-title--compact { font-size: 1.35rem; padding: 0 28px; } .grid-view-2 .ov-title--compact::before, .grid-view-2 .ov-title--compact::after { width: 18px; } .grid-view-3 .ov-title--compact { font-size: 1rem; padding: 0 22px; } .grid-view-3 .ov-title--compact::before, .grid-view-3 .ov-title--compact::after { width: 14px; } .grid-view-4 .ov-title--compact { font-size: 0.78rem; padding: 0 18px; } .grid-view-4 .ov-title--compact::before, .grid-view-4 .ov-title--compact::after { width: 10px; } /* ══ EXPAND / COLLAPSE — limite à 8 projets + bouton ══ */ .gallery-wrap { position: relative; } .gallery-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; background: linear-gradient(180deg, rgba(246, 241, 255, 0) 0%, rgba(246, 241, 255, 0.55) 45%, rgba(246, 241, 255, 0.92) 100%); border-radius: 0 0 16px 16px; } .gallery-wrap.is-collapsed .gallery-fade { opacity: 1; } .gallery-card.is-collapsed-hidden { display: none; } .gallery-card.is-revealing { animation: galleryCardReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes galleryCardReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .gallery-expand-wrap { display: flex; justify-content: center; margin-top: 24px; } .gallery-expand-btn { display: inline-flex; align-items: center; gap: 8.51px; padding: 9.73px 23.12px; font-family: 'Poppins', sans-serif; font-size: clamp(13.65px, 1.1025vw, 15.75px); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: #2a1f54; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.20) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,240,255,0.82) 100%); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1.5px solid rgba(160,130,230,0.45); border-radius: 999px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(60,40,120,0.10), 0 8px 26px rgba(60,40,120,0.20), 0 2px 6px rgba(0,0,0,0.06); text-shadow: 0 1px 0 rgba(255,255,255,0.5); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .gallery-expand-btn:hover { transform: translateY(-2px); border-color: rgba(160,130,230,0.75); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(60,40,120,0.10), 0 14px 38px rgba(60,40,120,0.28), 0 3px 10px rgba(0,0,0,0.08); } .gallery-expand-btn:active { transform: translateY(0); } .gallery-expand-btn[hidden] { display: none; } /* Largeur calée sur une bannière en vues 3 et 4 colonnes (pas en 2 col) */ .gallery-section:has(.gallery-grid.grid-view-3) .gallery-expand-btn, .gallery-section:has(.gallery-grid.grid-view-4) .gallery-expand-btn { justify-content: center; white-space: nowrap; } .gallery-section:has(.gallery-grid.grid-view-3) .gallery-expand-btn { width: calc((100% - 22px) / 3); } .gallery-section:has(.gallery-grid.grid-view-4) .gallery-expand-btn { width: calc((100% - 33px) / 4); font-size: clamp(10.5px, 0.85vw, 12.5px); padding: 7.5px 14px; gap: 6px; letter-spacing: 0.08em; } .gallery-section:has(.gallery-grid.grid-view-4) .gallery-expand-btn__chevron { width: 7px; height: 7px; } @media (max-width: 900px) { .gallery-section:has(.gallery-grid.grid-view-3) .gallery-expand-btn, .gallery-section:has(.gallery-grid.grid-view-4) .gallery-expand-btn { width: auto; justify-content: flex-start; white-space: normal; font-size: clamp(13.65px, 1.1025vw, 15.75px); padding: 9.73px 23.12px; gap: 8.51px; letter-spacing: 0.10em; } .gallery-section:has(.gallery-grid.grid-view-4) .gallery-expand-btn__chevron { width: 8.51px; height: 8.51px; } } /* Variante C — chiffre souligné d'un trait dégradé lavande */ .gallery-expand-btn__num { position: relative; color: #2a1f54; font-weight: 900; letter-spacing: 0; margin: 0 3px; padding: 0 2px; } /* Portable : le chiffre du compteur ("6" dans "6 autres projets") agrandi de 15 % par rapport à la taille héritée du bouton (1.15em = +15 %). */ @media (max-width: 768px) { .gallery-expand-btn__num { font-size: 1.15em; } } .gallery-expand-btn__num::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(160,130,230,0) 0%, rgba(160,130,230,0.9) 50%, rgba(160,130,230,0) 100%); } .gallery-expand-btn__chevron { width: 8.51px; height: 8.51px; color: #2a1f54; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-expand-btn[data-expanded="true"] .gallery-expand-btn__chevron { transform: rotate(180deg); } /* ══ (ancienne quote — supprimée) ══ */ .quote-text { font-family: 'Poppins', sans-serif; font-weight: 500; font-style: italic; font-size: 26px; line-height: 1.7; color: #F0EDE8; text-align: center; } /* ══ ANIMATIONS ══ */ @keyframes hero-fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes float-generic { 0%, 100% { margin-top: 0px; } 50% { margin-top: -10px; } } /* kept for reference — no longer applied */ @keyframes float-universal { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes float-netflix { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes float-playstation { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes ticker-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes scroll-logos { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes ticker-scroll-reverse { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes draw-wave { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } } @keyframes appear-circle { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } /* ══════════════════════════════════════════════ RESPONSIVE — MacBook Pro & tous écrans ══════════════════════════════════════════════ */ /* ── ≤ 1680px : grand écran externe ── */ @media (max-width: 1680px) { .hero { padding: calc(120px + 2vh) calc(36px - 4vw) 90px calc(72px + 4vw); gap: 48px; } } /* ── ≤ 1440px : MacBook Pro — breakpoint critique ── */ @media (max-width: 1440px) { .hero { padding: calc(100px + 2vh) calc(24px - 4vw) 80px calc(48px + 4vw); gap: 36px; } .hero-content { max-width: 520px; } .gallery-section { padding: 24px 48px 80px; } .filters-section { padding: 48px 28px 0; } /* Pages projet : header -14% à la taille MacBook Pro */ body.header-dark .header, body.header-light .header { transform: scale(0.925); } /* 1.07 × 0.864 */ /* Homepage : header +10% à la taille MacBook Pro */ body:not(.header-dark):not(.header-light) .header { transform: scale(0.902); } /* 0.82 × 1.10 */ } /* ── ≤ 1280px : MacBook Air / écran réduit ── */ @media (max-width: 1280px) { .hero { padding: calc(96px + 2vh) calc(20px - 4vw) 72px calc(36px + 4vw); gap: 28px; } .hero-content { max-width: 460px; } .gallery-section { padding: 24px 40px 80px; } .filter-btn { font-size: 14px; padding: 14px 28px; } } /* ── ≤ 1100px : laptop compact ── */ @media (max-width: 1100px) { .hero { padding: calc(96px + 2vh) calc(20px - 4vw) 64px calc(36px + 4vw); gap: 24px; } .hero-content { max-width: 460px; } .gallery-section { padding: 24px 36px 72px; } .xp-card { width: 100%; } .phones-stack { position: static; transform: none; left: auto; right: auto; margin: 50px auto 0; gap: 18px; } .phone-card { width: 273px; } .xp-list { grid-template-columns: 1fr; gap: 0; } .xp-list li { border-right: none; border-bottom: 1px solid rgba(42,31,84,0.10); padding: 14px 12px; } .xp-list li:last-child { border-bottom: none; } .xp-mission__lead { white-space: normal; } } /* ── ≤ 900px : tablette — hero en colonne ── */ @media (max-width: 900px) { .hero { flex-direction: column; align-items: center; text-align: center; padding: 96px 28px 56px; gap: 40px; min-height: auto; } .hero-content { max-width: 100%; } .hero-chips { justify-content: center; } .hero-platforms { justify-content: center; } .stats-bloc { align-items: center; transform: none; } .gallery-section { padding: 20px 24px 60px; } .filters-section { padding: 40px 20px 0; } .ticker-band { height: 6rem; } .ticker-track { gap: 2rem; } .ticker-capsule { width: 5.1rem; height: 4rem; } .ticker-capsule--narrow { width: 3.4rem; } .ticker-capsule--wide { width: 5.95rem; } .ticker-capsule--xwide { width: 7.2rem; } .ticker-logo { max-height: 2rem; } .ticker-logo--sm { max-height: 1.4rem; } .ticker-logo--md { max-height: 1.65rem; } .ticker-logo--lg { max-height: 1.9rem; } .ticker-logo--xl { max-height: 2.15rem; } .ticker-logo.logo--armee-air { max-height: 2.8rem; } .ticker-logo.logo--disneyland { max-height: 3.05rem; } .ticker-logo.logo--yop { max-height: 2.8rem; } .ticker-logo.logo--loreal { max-width: 4.68rem; } .ticker-logo.logo--blablacar { max-width: 5.95rem; } } /* ── ≤ 768px : mobile large ── */ @media (max-width: 768px) { /* Header desktop → caché, on bascule sur le split GM + burger rond */ .header { display: none; } .header-mobile-split { display: flex; } /* Hero : podium 3D caché → carousel mobile à la place */ .podium-stage { display: none; } .hero-mobile-carousel { display: block; } .hero { padding: 70px 0 18px; gap: 8px; min-height: 100svh; /* svh = barre navigateur considérée comme toujours visible → pas de saut au scroll mobile */ justify-content: center; } .header-pill { padding: 10px 14px 10px 18px !important; gap: 12px; } .header-nav { display: none; } .header-pill > .header-socials { display: none; } .header-burger { display: inline-flex; } /* VA2 : recentrer + neutraliser les transforms desktop */ .va2-bloc { align-items: center !important; padding: 0 24px; box-sizing: border-box; width: 100%; max-width: 100%; gap: 4px; } .va2-stage .va2-row, .va2-stage .va2-line, .va2-stage .va2-pill, .va2-note { transform: none; } .va2-row { justify-content: center; gap: 14px; } .va2-number { font-size: clamp(58px, 17vw, 88px); -webkit-text-stroke-width: 2.5px; } .va2-tags { transform: scale(0.72); transform-origin: left center; gap: 6px; padding-left: 10px; } .va2-line { margin-left: 0; margin-top: -4px; font-size: clamp(17px, 5vw, 22px); text-align: center; white-space: normal; } .va2-pill { margin-left: 0; margin-top: 0; font-size: clamp(10.5px, 3vw, 14px); padding: 4px 14px; } /* Logo cloud : zone élargie + scale réduit pour rester en arrière-plan */ .va2-stage .logo-cloud { width: 130vw; height: 460px; transform: translate(-50%, -50%) scale(0.55); } .gallery-section { padding: 16px 16px 48px; } .filters-section { padding: 32px 12px 0; } .filter-btn { font-size: 13px; padding: 11px 18px; } .ticker-section { padding: 36px 0 32px; } .ticker-band { height: 5rem; } .ticker-track { gap: 1.65rem; } .ticker-capsule { width: 4.2rem; height: 3.4rem; } .ticker-capsule--narrow { width: 2.8rem; } .ticker-capsule--wide { width: 4.9rem; } .ticker-capsule--xwide { width: 5.95rem; } .ticker-logo { max-height: 1.5rem; } .ticker-logo--sm { max-height: 1.2rem; } .ticker-logo--md { max-height: 1.4rem; } .ticker-logo--lg { max-height: 1.65rem; } .ticker-logo--xl { max-height: 1.875rem; } .ticker-logo.logo--armee-air { max-height: 2.25rem; } .ticker-logo.logo--disneyland { max-height: 2.55rem; } .ticker-logo.logo--yop { max-height: 2.25rem; } .ticker-logo.logo--loreal { max-width: 3.85rem; } .ticker-logo.logo--blablacar { max-width: 4.9rem; } .xp-card { padding: 24px 20px; } .xp-clients-row { gap: 20px; flex-wrap: wrap; justify-content: center; } .xp-client-logo--timberland { height: 46px; } .xp-client-logo--lacoste { height: 30px; } .xp-client-logo--lanieri { height: 24px; } .xp-client-logo--jules { height: 20px; } .stats-grid { grid-template-columns: repeat(3, 1fr); } .stat:nth-child(3n) { border-right: none; } .parcours-heading { margin-top: 48px; } } /* ── ≤ 480px : mobile petit (iPhone SE) ── */ @media (max-width: 480px) { .hero { padding: 10px 0 16px; min-height: 100svh; } /* padding-top 36→10 : tout le contenu du hero remonte de 26px uniformément (distances internes inchangées) pour éloigner les barres de progress de la barre Chrome/Safari du bas */ .header-logo { font-size: 16px !important; } .va2-number { font-size: clamp(54px, 15.5vw, 76px); } .va2-line { font-size: clamp(16px, 4.6vw, 20px); } .va2-pill { font-size: clamp(10px, 2.8vw, 13px); padding: 3px 12px; } .hmc-video-wrap { width: min(146px, 42vw); } .va2-stage .logo-cloud { transform: translate(-50%, -50%) scale(0.5); } } /* ════════════════════════════════════════════════════════════════════ TIMELINE EXPERIENCE — section "Mon Parcours" Migration depuis preview-experience-v6-timeline.html. Capsules de dates colorées par section + trait SVG dynamique avec glow progressif au scroll. ════════════════════════════════════════════════════════════════════ */ /* ─── Stage timeline ─── */ .tl-stage { position: relative; max-width: 1476.2px; margin: 0 auto; zoom: 0.7865; isolation: isolate; } .tl-row { position: relative; display: block; margin-bottom: 140px; } .tl-row:last-child { margin-bottom: 0; } /* Capsule de date — flotte au-dessus du contour de la carte */ .tl-date { position: absolute; top: -70px; left: 50%; transform: translate(-50%, -50%); padding: 0.77em 1.4em; background: linear-gradient(135deg, #2a1f54 0%, #3a2c70 100%); border: 1px solid rgba(124,106,214,0.55); border-radius: 999px; color: #fff; font-weight: 700; font-size: clamp(16.83px, 1.5vw, 20.57px); letter-spacing: 0.04em; text-align: center; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 3px rgba(231,224,250,0.55), 0 8px 24px rgba(60,40,120,0.32); z-index: 5; } .tl-row:first-of-type .tl-date { top: 0; } .tl-dot { display: none; } /* Capsules par section — contour + halo coloré */ .tl-row--phones .tl-date { border-color: rgba(124, 106, 214, 0.60); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 3px rgba(231, 224, 250, 0.55), 0 0 14px rgba(124, 106, 214, 0.22), 0 8px 24px rgba(60, 40, 120, 0.32); } .tl-row--creative-strategist .tl-date { border-color: rgba(80, 200, 160, 0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 3px rgba(222, 246, 236, 0.55), 0 0 14px rgba(80, 200, 160, 0.22), 0 8px 24px rgba(40, 130, 95, 0.28); } .tl-row--au-pair .tl-date { border-color: rgba(80, 170, 220, 0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 3px rgba(220, 240, 252, 0.55), 0 0 14px rgba(80, 170, 220, 0.22), 0 8px 24px rgba(40, 110, 170, 0.28); } .tl-row--mannequin .tl-date { border-color: rgba(210, 180, 120, 0.62); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 3px rgba(252, 243, 225, 0.55), 0 0 14px rgba(210, 180, 120, 0.24), 0 8px 24px rgba(150, 110, 40, 0.30); } /* SVG du trait de timeline */ .tl-timeline-path { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; } .tl-timeline-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Trait de base (translucide, toujours visible) */ .tl-timeline-path path.tl-base { stroke-width: 4.25; } .tl-timeline-path path.tl-base[data-section="0"] { stroke: rgba(124,106,214,0.45); filter: drop-shadow(0 1px 2px rgba(60,40,120,0.12)); } .tl-timeline-path path.tl-base[data-section="1"] { stroke: rgba(80,200,160,0.45); filter: drop-shadow(0 1px 2px rgba(40,130,95,0.12)); } .tl-timeline-path path.tl-base[data-section="2"] { stroke: rgba(80,170,220,0.45); filter: drop-shadow(0 1px 2px rgba(40,110,170,0.12)); } .tl-timeline-path path.tl-base[data-section="3"] { stroke: rgba(210,180,120,0.55); filter: drop-shadow(0 1px 2px rgba(140,100,40,0.15)); } /* Couche glow (révèle progressive au scroll) */ .tl-timeline-path path.tl-glow { stroke-width: 5.1; } .tl-timeline-path path.tl-glow[data-section="0"] { stroke: rgba(160,130,230,0.95); filter: drop-shadow(0 0 10px rgba(160,130,230,0.55)) drop-shadow(0 0 20px rgba(160,130,230,0.28)); } .tl-timeline-path path.tl-glow[data-section="1"] { stroke: rgba(80,210,165,0.95); filter: drop-shadow(0 0 10px rgba(80,210,165,0.55)) drop-shadow(0 0 20px rgba(80,210,165,0.28)); } .tl-timeline-path path.tl-glow[data-section="2"] { stroke: rgba(95,180,228,0.95); filter: drop-shadow(0 0 10px rgba(95,180,228,0.55)) drop-shadow(0 0 20px rgba(95,180,228,0.28)); } .tl-timeline-path path.tl-glow[data-section="3"] { stroke: rgba(220,185,120,0.98); filter: drop-shadow(0 0 10px rgba(220,185,120,0.60)) drop-shadow(0 0 20px rgba(220,185,120,0.30)); } /* ─── Carte ─── */ .tl-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 46.86px; padding: 39.9px 50.49px; border-radius: 24.2px; background: radial-gradient(ellipse at 18% -30%, rgba(140,110,220,0.14) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.58) 0%, rgba(245,240,255,0.42) 100%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1.5px solid rgba(160,130,230,0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 14px 38px rgba(60,40,120,0.14); } .tl-card__body { min-width: 0; } /* Cartouche du titre */ .tl-card__title-row { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 0; padding: 11px 24.2px 13.4px; background: rgba(255,255,255,0.22); border: 1.5px solid rgba(42, 31, 84, 0.18); border-radius: 14.1px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 14px rgba(42, 31, 84, 0.10); margin-bottom: 22px; white-space: nowrap; transform: translateY(-5%); } .tl-card__icon { display: none; } .tl-card__title { font-size: clamp(22px, 1.96vw, 27px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: #2a1f54; white-space: nowrap; } .tl-card__title-main { text-transform: uppercase; } .tl-card__title-sep { color: rgba(42,31,84,0.55); font-weight: 600; padding: 0 7.5px; } .tl-card__title-role { font-weight: 500; color: rgba(42,31,84,0.78); text-transform: uppercase; } /* Labels */ .tl-label { display: inline-block; font-size: 18.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #2a1f54; margin-bottom: 12.2px; } .tl-text { font-size: 19.2px; font-weight: 400; line-height: 1.55; color: rgba(42,31,84,0.86); margin-bottom: 27.5px; } .tl-text .tl-line { display: block; } .tl-text .tl-line + .tl-line { margin-top: 11px; } .tl-text strong { font-weight: 500; color: rgba(42,31,84,0.95); } /* Tags résultats */ .tl-tags { display: flex; flex-wrap: nowrap; gap: 12.2px; justify-content: flex-start; align-items: stretch; } .tl-tag { padding: 10.8px 19.2px; background: rgba(42, 31, 84, 0.10); border: 1px solid rgba(190,178,236,0.20); border-radius: 19.2px; font-size: 16.8px; font-weight: 600; color: #2a1f54; text-align: center; display: flex; align-items: center; justify-content: center; min-width: min-content; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Colonne médias */ .tl-card__media { display: grid; grid-template-columns: 1fr 1fr; gap: 14.52px; align-self: start; } .tl-row--au-pair .tl-card__media, .tl-row--creative-strategist .tl-card__media, .tl-row--mannequin .tl-card__media { align-self: center; } .tl-media { position: relative; width: 100%; height: 280px; border-radius: 15.4px; overflow: hidden; border: 1.5px solid rgba(160,130,230,0.36); background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(232,222,250,0.30)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 24px rgba(60,40,120,0.18); } .tl-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Cellule "Créateur fashion" — portables */ .tl-card--phones { overflow: hidden; align-items: stretch; } .tl-card--phones .tl-card__body { align-self: start; } .tl-card__media--phones { position: relative; align-self: center; height: 280px; } .tl-card__media--phones::before, .tl-card__media--phones::after { content: ""; position: absolute; bottom: 12%; width: 42%; height: 90px; background: radial-gradient(ellipse at center, rgba(170,156,225,0.38) 0%, rgba(124,106,214,0.17) 35%, transparent 70%); filter: blur(12px); pointer-events: none; z-index: 0; } .tl-card__media--phones::before { left: 4%; } .tl-card__media--phones::after { right: 4%; } .tl-phone { position: absolute; top: 0; bottom: 0; width: calc(50% - 7px); padding: 0; border-radius: 30px; border: none; background: #2a1f54; box-shadow: 0 28px 50px rgba(60,40,120,0.32), 0 12px 24px rgba(60,40,120,0.16); z-index: 1; } .tl-card__media--phones .tl-phone:nth-of-type(1) { left: 0; } .tl-card__media--phones .tl-phone:nth-of-type(2) { right: 0; } .tl-phone__notch { display: none; } .tl-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; } .tl-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .tl-card__media--phones .tl-phone:nth-of-type(1) .tl-phone__screen img { object-position: center 10%; } /* Ambiances par section */ .tl-row--creative-strategist .tl-card { background: radial-gradient(ellipse at 82% 6%, rgba(80,220,170,0.13) 0%, transparent 55%), radial-gradient(ellipse at 18% -30%, rgba(140,110,220,0.10) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.58) 0%, rgba(244,250,247,0.42) 100%); border-color: rgba(120,200,170,0.34); } .tl-row--creative-strategist .tl-card__title-row { border-color: rgba(80,200,160,0.26); background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(230,250,242,0.22)); } .tl-row--creative-strategist .tl-card__title-role { color: rgba(40,130,95,0.85); } .tl-row--creative-strategist .tl-media { border-color: rgba(120,200,170,0.34); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(80,200,160,0.16), 0 10px 24px rgba(45,120,90,0.20); } .tl-row--creative-strategist .tl-tag { background: rgba(80,200,160,0.10); border-color: rgba(120,200,170,0.28); } .tl-row--creative-strategist .tl-media:nth-of-type(2) img { filter: brightness(0.93) saturate(0.95); } .tl-row--au-pair .tl-card { background: radial-gradient(ellipse at 82% 6%, rgba(100,185,235,0.13) 0%, transparent 55%), radial-gradient(ellipse at 18% -30%, rgba(140,110,220,0.10) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.58) 0%, rgba(243,250,254,0.42) 100%); border-color: rgba(110,180,220,0.34); } .tl-row--au-pair .tl-card__title-row { border-color: rgba(80,170,220,0.26); background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(228,243,253,0.22)); } .tl-row--au-pair .tl-card__title-role { color: rgba(40,110,170,0.85); } .tl-row--au-pair .tl-media { border-color: rgba(110,180,220,0.34); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(90,180,230,0.16), 0 10px 24px rgba(40,90,150,0.20); } .tl-row--au-pair .tl-tag { background: rgba(90,180,230,0.10); border-color: rgba(110,180,220,0.28); } .tl-row--mannequin .tl-card { background: radial-gradient(ellipse at 82% 6%, rgba(225,185,115,0.13) 0%, transparent 55%), radial-gradient(ellipse at 18% -30%, rgba(140,110,220,0.10) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.58) 0%, rgba(252,247,239,0.42) 100%); border-color: rgba(210,180,120,0.36); } .tl-row--mannequin .tl-card__title-row { border-color: rgba(200,170,110,0.30); background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(252,243,225,0.24)); } .tl-row--mannequin .tl-card__title-role { color: rgba(150,108,40,0.88); } .tl-row--mannequin .tl-media { border-color: rgba(210,180,120,0.36); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(220,180,110,0.20), 0 10px 24px rgba(140,100,40,0.22); } .tl-row--mannequin .tl-tag { background: rgba(220,180,110,0.10); border-color: rgba(210,180,120,0.32); filter: brightness(0.95); } /* Responsive */ @media (max-width: 1100px) { .tl-row { padding-top: 36px; } .tl-card { grid-template-columns: 1fr; gap: 20px; } .tl-timeline-path { display: none; } .tl-date { font-size: 14px; } /* ─── RAIL en arrière-plan : passe DERRIÈRE capsules et cartes ─── */ /* z-index:-1 dans le stacking context isolé de .tl-stage. Overshoot volontaire dans le bord noir de la capsule pour que le trait visuellement le rejoigne sans ambiguïté. */ .tl-row:first-of-type { padding-top: 56px; } /* Suppression du halo pastel des capsules en mobile pour que le trait touche directement le bord noir (sinon halo 55% blanc estompe le trait) */ .tl-row--phones .tl-date { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 14px rgba(124,106,214,0.22), 0 8px 24px rgba(60,40,120,0.32); } .tl-row--creative-strategist .tl-date { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 14px rgba(80,200,160,0.22), 0 8px 24px rgba(40,130,95,0.28); } .tl-row--au-pair .tl-date { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 14px rgba(80,170,220,0.22), 0 8px 24px rgba(40,110,170,0.28); } .tl-row--mannequin .tl-date { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 14px rgba(210,180,120,0.24), 0 8px 24px rgba(150,110,40,0.30); } .tl-row::before, .tl-row::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 3.75px; border-radius: 4px; pointer-events: none; z-index: -1; } /* ───── CONTOUR : wrap complet concentrique à la card (4 côtés) ───── - card border-radius 24.2 → contour radius 24.2 + 3.75 = 27.95 - inset 0 px : le bord intérieur du trait kiss-perfect le bord extérieur de la card - z-index −1 : passe DERRIÈRE la card (cache la partie interne, ne laisse visible que les 3.75 px qui débordent : effet "outline" qui épouse la card) */ .tl-contour { position: absolute; top: 32.25px; /* padding-top row (36) − 3.75 → bord top du trait kiss le card top */ left: -3.75px; right: -3.75px; bottom: -3.75px; border: 3.75px solid; border-radius: 27.95px; /* card radius 24.2 + thickness 3.75 → concentrique */ pointer-events: none; z-index: -1; } .tl-row:first-of-type .tl-contour { top: 52.25px; /* padding-top first row (56) − 3.75 */ } .tl-row--phones .tl-contour { border-color: #a082e6; } .tl-row--creative-strategist .tl-contour { border-color: #50d2a5; } .tl-row--au-pair .tl-contour { border-color: #5fb4e4; } .tl-row--mannequin .tl-contour { border-color: #dcb978; } /* ───── CONNECTEURS verticaux : capsule ↔ contour (centre row) ───── Passent derrière la capsule (z:-1) ; la capsule (z:5) les masque visuellement pour donner l'illusion d'une entrée/sortie nette de chaque côté de la capsule. ::after = capsule → top du contour (intra-row) ::before = bas du contour précédent → capsule courante (T junction sur bottom border) */ .tl-row::after { top: -55px; height: 90px; /* de mi-capsule (-55) jusqu'au top du contour (+32.25), overlap pour T junction */ } .tl-row:first-of-type::after { top: 15px; height: 40px; /* de mi-capsule (+15) jusqu'au top du contour (+52.25) */ } .tl-row:not(:first-of-type)::before { top: -140px; /* commence dans la bottom border du contour précédent (-140 à -136.25) */ height: 100px; /* descend en T junction puis traverse la capsule jusqu'à y=-40 */ } /* Couleurs (solide par section + gradient inter-sections sur le ::before) */ .tl-row--phones::after { background: #a082e6; } .tl-row--creative-strategist::before { background: linear-gradient(180deg, #a082e6 0%, #50d2a5 100%); } .tl-row--creative-strategist::after { background: #50d2a5; } .tl-row--au-pair::before { background: linear-gradient(180deg, #50d2a5 0%, #5fb4e4 100%); } .tl-row--au-pair::after { background: #5fb4e4; } .tl-row--mannequin::before { background: linear-gradient(180deg, #5fb4e4 0%, #dcb978 100%); } .tl-row--mannequin::after { background: #dcb978; } } @media (max-width: 640px) { .tl-card { padding: 22px; } .tl-card__media { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════════════════════════ ZOOM VIDÉO : bouton carré bas-droit + modale 9:16 Partagé par toutes les pages projet contenant .contenu-card__frame--player. La logique est dans lecteur-video.js (déplace la frame au niveau pour échapper au stacking context local de .contenu-card). ══════════════════════════════════════════════════════════════ */ .contenu-card__fullscreen { position: absolute; bottom: 5px; right: 5px; z-index: 5; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .contenu-card__fullscreen:hover { background: #e50914; box-shadow: 0 0 8px rgba(229, 9, 20, 0.6); transform: scale(1.08); } .contenu-card__fullscreen svg { width: 11px; height: 11px; display: block; } /* Cartes équipées du carré : barre raccourcie côté droit + remontée pour que son centre tombe sur celui du carré (button bottom 5 + 22/2 = 16, bar bottom = 16 - 1.5 = 14.5) */ .contenu-card__frame--player:has(.contenu-card__fullscreen) .contenu-card__progress { right: 34px; bottom: 14.5px; } /* Modale zoom */ body.has-video-zoom { overflow: hidden; } .contenu-card__frame.is-zoomed { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99999; /* Reprend le fond exact de la page projet (le body étant le parent après déplacement DOM par lecteur-video.js). Cohérent sur toutes les pages. */ background: inherit; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; border-radius: 0; aspect-ratio: unset; max-width: none; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: zoom-out; overflow: hidden; animation: zoomVideoFadeIn 0.22s ease-out; } .contenu-card__frame.is-zoomed:hover { transform: none; box-shadow: none; } .contenu-card__frame.is-zoomed::before, .contenu-card__frame.is-zoomed::after { display: none; content: none; } @keyframes zoomVideoFadeIn { from { opacity: 0; } to { opacity: 1; } } .contenu-card__frame.is-zoomed video { object-fit: contain; width: auto; height: 82vh; max-height: 82vh; max-width: calc(82vh * 9 / 16); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); cursor: default; } .contenu-card__frame.is-zoomed .contenu-card__play--toggle, .contenu-card__frame.is-zoomed .contenu-card__play { width: 64px; height: 64px; } /* Auto-hide du bouton play après 1.5 s de lecture en mode zoom. Double classe sur le bouton (spécificité 5) pour battre les règles :hover des pages projet. */ .contenu-card__frame.is-zoomed .contenu-card__play.contenu-card__play--toggle { transition: opacity 0.35s ease, transform 0.35s ease; } .contenu-card__frame.is-zoomed.zoom-controls-hidden .contenu-card__play.contenu-card__play--toggle { opacity: 0; pointer-events: none; } .contenu-card__frame.is-zoomed .contenu-card__sound { top: calc(9vh + 14px); right: calc(50vw - (82vh * 9 / 16) / 2 + 14px); } .contenu-card__frame.is-zoomed .contenu-card__fullscreen { width: 32px; height: 32px; border-radius: 8px; bottom: calc(9vh + 8px); right: calc(50vw - (82vh * 9 / 16) / 2 + 8px); } .contenu-card__frame.is-zoomed .contenu-card__fullscreen svg { width: 16px; height: 16px; } .contenu-card__frame.is-zoomed .contenu-card__progress { left: calc(50vw - (82vh * 9 / 16) / 2 + 8px); right: calc(50vw - (82vh * 9 / 16) / 2 + 50px); bottom: calc(9vh + 21px); } /* Override de la barre épaissie à 6px en mode zoomé — spécificité doublée pour battre la règle :hover sur .contenu-card__progress */ .contenu-card__frame.contenu-card__frame--player.is-zoomed .contenu-card__progress, .contenu-card__frame.contenu-card__frame--player.is-zoomed:hover .contenu-card__progress { height: 6px; } .contenu-card__frame.is-zoomed .contenu-card__blob { display: none; } /* ════════════════════════════════════════════════════════════════════ MOBILE — Header split (GM + burger rond) + Hero carousel (≤768px) Migré depuis preview/preview-hero-mobile.html (Scénario 3) ════════════════════════════════════════════════════════════════════ */ /* ══ Header mobile split — caché par défaut, activé en mobile ══ */ .header-mobile-split { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1001; padding: 14px 16px 0; pointer-events: none; justify-content: space-between; align-items: center; gap: 12px; } .header-mobile-split > * { pointer-events: all; } .hms-logo, .hms-burger { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%); backdrop-filter: blur(24px) saturate(1.05); -webkit-backdrop-filter: blur(24px) saturate(1.05); border: 1.5px solid rgba(160,130,230,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(60,40,120,0.10), 0 4px 14px rgba(60,40,120,0.15), 0 2px 4px rgba(0,0,0,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hms-logo { display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: #1a1230; text-decoration: none; line-height: 1; } .hms-logo:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(60,40,120,0.20); } .hms-burger { padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px; } .hms-burger:hover { transform: translateY(-1px); } .hms-burger:active { transform: scale(0.95); } .hms-burger__bar { display: block; width: 18px; height: 2px; background: #1a1230; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.2s ease; } .hms-burger.is-open .hms-burger__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hms-burger.is-open .hms-burger__bar:nth-child(2) { opacity: 0; } .hms-burger.is-open .hms-burger__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Backdrop + Drawer */ .hms-backdrop { position: fixed; inset: 0; background: rgba(20, 12, 40, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1099; } .hms-backdrop.is-open { opacity: 1; visibility: visible; } .hms-drawer { position: fixed; top: 0; right: 0; /* height = grand viewport (barre navigateur rétractée = viewport le plus haut). Avec l'ancien `bottom:0`, iOS calait le bas du drawer sur le petit viewport (barre Chrome visible) → quand la barre se rétracte, un trou apparaissait en bas, laissant voir la page derrière. 100lvh garantit que le drawer couvre TOUJOURS le viewport le plus grand, quel que soit l'état de la barre. Fallback 100vh pour les rares navigateurs sans unité lvh. */ height: 100vh; height: 100lvh; width: 100vw; background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(175, 109, 255, 0.34), transparent 60%), radial-gradient(ellipse 75% 60% at 75% 35%, rgba(255, 235, 170, 0.445), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 100, 180, 0.324), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(120, 190, 255, 0.364), transparent 62%), linear-gradient(180deg, #dfd0e6 0%, #e3ccd2 100%); box-shadow: -10px 0 40px rgba(60, 40, 120, 0.25); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); z-index: 1100; padding: 24px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .hms-drawer.is-open { transform: translateX(0); } .hms-drawer__link { display: flex; align-items: center; justify-content: center; padding: 13px 22px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: #2a1f54; text-decoration: none; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; border: 1.5px solid rgba(160,130,230,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 6px 18px rgba(60,40,120,0.18), 0 2px 4px rgba(0,0,0,0.06); text-shadow: 0 1px 0 rgba(255,255,255,0.55); white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hms-drawer__link:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 10px 24px rgba(60,40,120,0.24), 0 2px 4px rgba(0,0,0,0.06); } .hms-drawer__link:active { transform: translateY(0); } .hms-drawer__link.is-active { background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.32) 0%, transparent 60%), linear-gradient(135deg, rgba(220,200,245,0.92) 0%, rgba(200,175,235,0.85) 100%); border-color: rgba(140,110,220,0.55); } .hms-drawer__socials { margin-top: 18px; display: flex; justify-content: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(60,40,120,0.12); } .hms-drawer__socials a { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #2a1f54; text-decoration: none; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(160,130,230,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,40,120,0.10), 0 6px 18px rgba(60,40,120,0.18), 0 2px 4px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hms-drawer__socials a:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 22px rgba(60,40,120,0.24); } .hms-drawer__socials a:active { transform: translateY(0); } .hms-drawer__socials svg { width: 18px; height: 18px; } /* ══ Hero mobile carousel — caché par défaut, activé en mobile ══ */ .hero-mobile-carousel { display: none; width: 100%; max-width: 420px; margin: 4px auto 0; padding: 0 16px; box-sizing: border-box; } .hmc-stage { display: flex; flex-direction: column; align-items: center; gap: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .hmc-info { position: relative; width: 100%; min-height: 46px; display: flex; align-items: flex-start; justify-content: center; margin-bottom: 2px; } .hmc-info-slot { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: translate(calc(-50% + 18px), 0); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; } .hmc-info-slot.is-active { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .hmc-tag { display: inline-flex; align-items: center; justify-content: center; padding: 2.5px 8px; font-family: 'PoppinsEB', 'Poppins', sans-serif; font-weight: 900; font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; border-radius: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; } .hmc-tag--ps { border: 1px solid rgba(132,188,255,0.30); background: radial-gradient(ellipse at 30% -30%, rgba(61,208,255,0.30) 0%, transparent 70%), linear-gradient(120deg, #001E54 0%, #003791 60%, #0070D1 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,55,145,0.45), 0 1px 3px rgba(0,0,0,0.25); } .hmc-tag--netflix { border: 1px solid rgba(255,90,95,0.32); background: radial-gradient(ellipse at 30% -30%, rgba(255,100,100,0.32) 0%, transparent 70%), linear-gradient(120deg, #1a0000 0%, #5a0a0e 45%, #B81D24 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(229,9,20,0.45), 0 1px 3px rgba(0,0,0,0.32); text-shadow: 0 1px 2px rgba(80,0,0,0.7); } .hmc-tag--universal { border: 1px solid rgba(140,175,255,0.28); background: radial-gradient(ellipse at 30% -30%, rgba(120,165,255,0.32) 0%, transparent 70%), linear-gradient(120deg, #050B26 0%, #0E1A4A 45%, #1B2A6B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 12px rgba(14,26,74,0.55), 0 1px 3px rgba(0,0,0,0.32); } .hmc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 5px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 8px; letter-spacing: 0.02em; color: #fff; border-radius: 6px; text-shadow: 0 1px 2px rgba(0,8,31,0.55); white-space: nowrap; border: 1px solid rgba(132,188,255,0.22); background: radial-gradient(ellipse at 15% -20%, rgba(61,208,255,0.32) 0%, transparent 60%), radial-gradient(ellipse at 90% 120%, rgba(175,125,255,0.22) 0%, transparent 55%), linear-gradient(120deg, #001E54 0%, #003791 45%, #0070D1 75%, #003791 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,55,145,0.45), 0 2px 5px rgba(0,0,0,0.28); } .hmc-badge--netflix { border: 1px solid rgba(255,90,95,0.22); background: radial-gradient(ellipse at 15% -20%, rgba(255,100,100,0.32) 0%, transparent 60%), radial-gradient(ellipse at 90% 120%, rgba(180,30,40,0.28) 0%, transparent 55%), linear-gradient(120deg, #1a0000 0%, #5a0a0e 45%, #B81D24 75%, #5a0a0e 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(229,9,20,0.42), 0 2px 5px rgba(0,0,0,0.32); text-shadow: 0 1px 2px rgba(80,0,0,0.7); } .hmc-badge--universal { border: 1px solid rgba(140,175,255,0.22); background: radial-gradient(ellipse at 15% -20%, rgba(120,165,255,0.30) 0%, transparent 60%), radial-gradient(ellipse at 90% 120%, rgba(80,110,200,0.24) 0%, transparent 55%), linear-gradient(120deg, #050B26 0%, #0E1A4A 45%, #1B2A6B 75%, #0E1A4A 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(14,26,74,0.52), 0 2px 5px rgba(0,0,0,0.32); } .hmc-badge__icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; background: linear-gradient(180deg, #f5d76e 0%, #d4a017 100%); border-radius: 50%; font-size: 8px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 0 1.5px rgba(245,215,110,0.18); } .hmc-video-wrap { width: min(154px, 44vw); aspect-ratio: 9 / 19.5; border-radius: 28px; overflow: hidden; position: relative; background: #000; border: 4.5px solid #1a1230; box-shadow: 0 24px 44px rgba(60,40,130,0.40), 0 8px 16px rgba(42,31,84,0.25), inset 0 1px 0 rgba(255,255,255,0.08); } .hmc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .hmc-video.is-active { opacity: 1; } .hmc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; } .hmc-arrow { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: radial-gradient(ellipse at 20% -30%, rgba(140,110,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(160,130,230,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px rgba(60,40,120,0.18); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #2a1f54; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hmc-arrow:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(60,40,120,0.28); } .hmc-arrow:active { transform: scale(0.95); } .hmc-arrow svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .hmc-mute { position: absolute; bottom: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.30); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 4; padding: 0; transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .hmc-mute:hover { background: rgba(0,0,0,0.75); transform: scale(1.08); } .hmc-mute:active { transform: scale(0.94); } .hmc-mute svg { width: 13px; height: 13px; fill: currentColor; } .hmc-playpause { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.30); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .hmc-playpause.is-visible { opacity: 1; pointer-events: auto; } .hmc-playpause:hover { background: rgba(0,0,0,0.75); } .hmc-playpause svg { width: 20px; height: 20px; fill: currentColor; } .hmc-playpause .icon-play { display: none; } .hmc-playpause .icon-pause { display: block; } .hmc-playpause.is-paused .icon-pause { display: none; } .hmc-playpause.is-paused .icon-play { display: block; } .hmc-dots { display: flex; align-items: center; justify-content: center; gap: 8px; } .hmc-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(60,40,120,0.25); cursor: pointer; padding: 0; transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease; } .hmc-dot.is-active { background: #5d3f9b; width: 22px; border-radius: 4px; } /* Activation des composants mobile — placé après les défauts pour gagner la cascade */ @media (max-width: 768px) { .header-mobile-split { display: flex; } .hero-mobile-carousel { display: block; } } /* ════════════════════════════════════════════════════════════════════ Drawer mobile — Variant "Portfolio" (Proposition C v3) Utilisé uniquement sur index.html et projet-netflix.html. Surclasse le drawer standard quand .hms-drawer--portfolio est posé. ════════════════════════════════════════════════════════════════════ */ .hms-drawer.hms-drawer--portfolio { width: 100vw; padding: 0; display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .hms-drawer__topbar { position: sticky; top: 0; display: flex; justify-content: flex-end; align-items: center; padding: 14px 16px 0; z-index: 4; pointer-events: none; } .hms-drawer__topbar > * { pointer-events: auto; } .hms-drawer__logo, .hms-drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: #1a1230; text-decoration: none; background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.78) 100%); backdrop-filter: blur(24px) saturate(1.05); -webkit-backdrop-filter: blur(24px) saturate(1.05); border: 1.5px solid rgba(160,130,230,0.55); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(60,40,120,0.10), 0 4px 14px rgba(60,40,120,0.15), 0 2px 4px rgba(0,0,0,0.04); cursor: pointer; padding: 0; line-height: 1; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hms-drawer__logo:active, .hms-drawer__close:active { transform: scale(0.95); } .hms-drawer__close svg { width: 18px; height: 18px; } .hms-drawer__content { min-height: calc(100% - 58px); display: flex; flex-direction: column; justify-content: center; padding: 18px 22px 28px; box-sizing: border-box; } .hms-drawer__section-label { font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(42,31,84,0.65); margin: 0 4px 14px; } .hms-drawer__ticker { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hms-drawer__ticker::-webkit-scrollbar { display: none; } .hms-drawer__card { flex: 0 0 124px; height: 86px; border-radius: 12px; position: relative; overflow: hidden; text-decoration: none; display: block; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 4px 12px rgba(60,40,120,0.22); border: 1px solid rgba(255,255,255,0.30); transition: transform 0.2s ease, box-shadow 0.2s ease; background: #1a1230; } .hms-drawer__card:active { transform: scale(0.97); } .hms-drawer__card picture, .hms-drawer__card img { display: block; width: 100%; height: 100%; object-fit: cover; } .hms-drawer__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.55) 100%); pointer-events: none; } .hms-drawer__card-label { position: absolute; bottom: 7px; left: 9px; right: 9px; font-weight: 700; font-size: 10px; color: #fff; letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0,0,0,0.6); z-index: 1; } .hms-drawer__divider { height: 1px; background: rgba(60,40,120,0.18); margin: 18px 4px; } .hms-drawer__nav { display: flex; flex-direction: column; gap: 10px; } /* Cap-buttons plus hauts (52px) dans le variant portfolio, plus arrondis (radius 14), avec letter-spacing serré. */ .hms-drawer--portfolio .hms-drawer__link { padding: 0 24px; height: 52px; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; border-radius: 14px; white-space: nowrap; } .hms-drawer__link.hms-drawer__link--cta { background: linear-gradient(135deg, #6d4ab0 0%, #5d3f9b 100%); color: #fff; border-color: rgba(255,255,255,0.18); text-shadow: 0 1px 0 rgba(0,0,0,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.20), 0 8px 22px rgba(93,63,155,0.45), 0 2px 4px rgba(0,0,0,0.10); } .hms-drawer__link.hms-drawer__link--cta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.20), 0 12px 28px rgba(93,63,155,0.55), 0 2px 4px rgba(0,0,0,0.10); } .hms-drawer__socials-divider { width: 64px; height: 1px; background: rgba(60,40,120,0.22); margin: 24px auto 20px; } /* Dans le variant portfolio, le bloc socials existant a déjà son border-top — on l'efface pour ne pas doubler avec .hms-drawer__socials-divider. */ .hms-drawer--portfolio .hms-drawer__socials { margin-top: 0; padding-top: 0; border-top: none; } .hms-drawer__signature { margin: 18px 0 0; font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(42,31,84,0.55); text-align: center; } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — LUPIN (page rouge sombre Netflix) Transpose la palette de projet-lupin.html dans le drawer portfolio. Couleurs source : #1d0307, #380710, #4d0a16, #2c0509, #E50914, #8a0c1a. ════════════════════════════════════════════════════════════════════ */ body[data-page="lupin"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(229,9,20,0.28), transparent 60%), radial-gradient(ellipse 75% 60% at 75% 35%, rgba(170,0,15,0.30), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(74,10,18,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(229,9,20,0.22), transparent 62%), linear-gradient(180deg, #1d0307 0%, #2c0509 100%); box-shadow: -10px 0 40px rgba(229,9,20,0.18); } body[data-page="lupin"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="lupin"] .hms-drawer__logo, body[data-page="lupin"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.35); } body[data-page="lupin"] .hms-drawer__logo:hover, body[data-page="lupin"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="lupin"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,20,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.20); } body[data-page="lupin"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.20); } body[data-page="lupin"] .hms-drawer__divider, body[data-page="lupin"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="lupin"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,20,0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.30); } body[data-page="lupin"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,20,0.26) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="lupin"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — NETFLIX (page rouge profond / noir Netflix) Couleurs source dans projet-netflix.html : #5a0000, #880008, #a80515, #E50914 / #e5091a / #a8050f, #080808, #141414. ════════════════════════════════════════════════════════════════════ */ body[data-page="netflix"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(229,9,20,0.32), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(168,5,21,0.30), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(90,0,0,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(136,0,8,0.28), transparent 62%), linear-gradient(180deg, #080808 0%, #141414 100%); box-shadow: -10px 0 40px rgba(229,9,20,0.20); } body[data-page="netflix"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="netflix"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.40); } body[data-page="netflix"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="netflix"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,20,0.20) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="netflix"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="netflix"] .hms-drawer__divider, body[data-page="netflix"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="netflix"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,20,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.30); } body[data-page="netflix"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,20,0.28) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="netflix"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — PLAYSTATION (bleu cyan / navy profond) Couleurs source dans projet-playstation.html : --ps-navy #003791, --ps-blue #0070D1, --ps-cyan #3DD0FF, --ps-violet #AF7DFF, #001E54, #000d2a, #00081f. ════════════════════════════════════════════════════════════════════ */ body[data-page="playstation"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(61,208,255,0.22), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(0,112,209,0.32), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(0,55,145,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(175,125,255,0.20), transparent 62%), linear-gradient(180deg, #00081f 0%, #001E54 100%); box-shadow: -10px 0 40px rgba(61,208,255,0.16); } body[data-page="playstation"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="playstation"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(61,208,255,0.35); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,30,84,0.55); } body[data-page="playstation"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="playstation"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(61,208,255,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(61,208,255,0.22); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,30,84,0.45), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="playstation"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,30,84,0.60), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="playstation"] .hms-drawer__divider, body[data-page="playstation"] .hms-drawer__socials-divider { background: rgba(61,208,255,0.20); } body[data-page="playstation"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(61,208,255,0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(61,208,255,0.25); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,30,84,0.40); } body[data-page="playstation"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(61,208,255,0.26) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="playstation"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — YOP (page LIGHT pastel rose / pêche / crème) Couleurs source dans projet-yop.html : #f7d4e6, #f0c8df, #f5d4cf, #fbe5d3, #fff5e8, #fff3e0, #fdebd9, accent chocolat #6b3a1f / #4a2818. ════════════════════════════════════════════════════════════════════ */ body[data-page="yop"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(247,200,223,0.55), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(244,184,216,0.45), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(253,226,200,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(248,213,197,0.50), transparent 62%), linear-gradient(180deg, #fff5e8 0%, #fbe5d3 100%); box-shadow: -10px 0 40px rgba(107,58,31,0.12); } body[data-page="yop"] .hms-drawer__section-label { color: rgba(107,58,31,0.65); } body[data-page="yop"] .hms-drawer__close { background: rgba(255,255,255,0.75); border: 1.5px solid rgba(107,58,31,0.25); color: #6b3a1f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(107,58,31,0.18); } body[data-page="yop"] .hms-drawer__close:hover { background: rgba(255,255,255,0.92); } body[data-page="yop"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(247,200,223,0.45) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(253,235,217,0.82) 100%); border: 1.5px solid rgba(107,58,31,0.18); color: #6b3a1f; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(107,58,31,0.10), 0 6px 18px rgba(107,58,31,0.15), 0 2px 4px rgba(107,58,31,0.06); } body[data-page="yop"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(107,58,31,0.10), 0 10px 24px rgba(107,58,31,0.22), 0 2px 4px rgba(107,58,31,0.08); } body[data-page="yop"] .hms-drawer__divider, body[data-page="yop"] .hms-drawer__socials-divider { background: rgba(107,58,31,0.18); } body[data-page="yop"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(247,200,223,0.40) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(253,235,217,0.80) 100%); border: 1.5px solid rgba(107,58,31,0.22); color: #6b3a1f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 18px rgba(107,58,31,0.15); } body[data-page="yop"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(247,200,223,0.55) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(253,235,217,0.92) 100%); } body[data-page="yop"] .hms-drawer__signature { color: rgba(107,58,31,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — MANNEQUINAT (LIGHT — blush rose / or ocre) Couleurs source dans projet-mannequinat.html : #E5CED1, #E2DBD6, #EDDCDD, #FBF3EE, #B8959B, #C9A66B, #F3E1DD, #E5C896. ════════════════════════════════════════════════════════════════════ */ body[data-page="mannequinat"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(229,206,209,0.65), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(201,166,107,0.30), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(184,149,155,0.45), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(229,200,150,0.45), transparent 62%), linear-gradient(180deg, #FBF3EE 0%, #EDDCDD 100%); box-shadow: -10px 0 40px rgba(184,149,155,0.18); } body[data-page="mannequinat"] .hms-drawer__section-label { color: rgba(74,40,42,0.65); } body[data-page="mannequinat"] .hms-drawer__close { background: rgba(255,255,255,0.80); border: 1.5px solid rgba(201,166,107,0.45); color: #4a282a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(184,149,155,0.22); } body[data-page="mannequinat"] .hms-drawer__close:hover { background: rgba(255,255,255,0.95); } body[data-page="mannequinat"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(201,166,107,0.22) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(243,225,221,0.82) 100%); border: 1.5px solid rgba(201,166,107,0.35); color: #4a282a; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(184,149,155,0.12), 0 6px 18px rgba(184,149,155,0.18), 0 2px 4px rgba(184,149,155,0.08); } body[data-page="mannequinat"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(184,149,155,0.12), 0 10px 24px rgba(184,149,155,0.28), 0 2px 4px rgba(184,149,155,0.10); } body[data-page="mannequinat"] .hms-drawer__divider, body[data-page="mannequinat"] .hms-drawer__socials-divider { background: rgba(184,149,155,0.30); } body[data-page="mannequinat"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(201,166,107,0.22) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(243,225,221,0.80) 100%); border: 1.5px solid rgba(201,166,107,0.35); color: #4a282a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 18px rgba(184,149,155,0.18); } body[data-page="mannequinat"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(201,166,107,0.32) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(243,225,221,0.92) 100%); } body[data-page="mannequinat"] .hms-drawer__signature { color: rgba(74,40,42,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — ARMÉE DE L'AIR (navy militaire + accent rouge tricolore) ════════════════════════════════════════════════════════════════════ */ body[data-page="armee-de-lair"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(30,58,107,0.55), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(200,16,46,0.18), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(14,43,92,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(30,58,107,0.30), transparent 62%), linear-gradient(180deg, #0E2B5C 0%, #1E3A6B 100%); box-shadow: -10px 0 40px rgba(14,43,92,0.30); } body[data-page="armee-de-lair"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="armee-de-lair"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.35); } body[data-page="armee-de-lair"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="armee-de-lair"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(200,16,46,0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.20); } body[data-page="armee-de-lair"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.20); } body[data-page="armee-de-lair"] .hms-drawer__divider, body[data-page="armee-de-lair"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="armee-de-lair"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(200,16,46,0.14) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.30); } body[data-page="armee-de-lair"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(200,16,46,0.24) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="armee-de-lair"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — EMMAÜS (LIGHT — mint pastel / crème, accent teal) ════════════════════════════════════════════════════════════════════ */ body[data-page="emmaus"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 8% 8%, rgba(216,238,236,0.75), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(0,161,154,0.18), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(244,232,208,0.65), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(250,241,221,0.65), transparent 62%), linear-gradient(180deg, #FAF1DD 0%, #EAF5F4 100%); box-shadow: -10px 0 40px rgba(0,134,127,0.15); } body[data-page="emmaus"] .hms-drawer__section-label { color: rgba(0,76,72,0.65); } body[data-page="emmaus"] .hms-drawer__close { background: rgba(255,255,255,0.85); border: 1.5px solid rgba(0,134,127,0.35); color: #00554F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(0,134,127,0.18); } body[data-page="emmaus"] .hms-drawer__close:hover { background: rgba(255,255,255,0.95); } body[data-page="emmaus"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(0,161,154,0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(216,238,236,0.78) 100%); border: 1.5px solid rgba(0,134,127,0.22); color: #00554F; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,134,127,0.10), 0 6px 18px rgba(0,134,127,0.15), 0 2px 4px rgba(0,134,127,0.06); } body[data-page="emmaus"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,134,127,0.10), 0 10px 24px rgba(0,134,127,0.22), 0 2px 4px rgba(0,134,127,0.08); } body[data-page="emmaus"] .hms-drawer__divider, body[data-page="emmaus"] .hms-drawer__socials-divider { background: rgba(0,134,127,0.20); } body[data-page="emmaus"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(0,161,154,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(216,238,236,0.78) 100%); border: 1.5px solid rgba(0,134,127,0.30); color: #00554F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 18px rgba(0,134,127,0.15); } body[data-page="emmaus"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(0,161,154,0.28) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(216,238,236,0.92) 100%); } body[data-page="emmaus"] .hms-drawer__signature { color: rgba(0,76,72,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — BANLIEUSARDS (navy profond, sobre, urbain) ════════════════════════════════════════════════════════════════════ */ body[data-page="banlieusards"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(26,58,82,0.55), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(12,34,51,0.45), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(26,58,82,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(180,180,200,0.10), transparent 62%), linear-gradient(180deg, #0c2233 0%, #1A3A52 100%); box-shadow: -10px 0 40px rgba(12,34,51,0.30); } body[data-page="banlieusards"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="banlieusards"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.40); } body[data-page="banlieusards"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="banlieusards"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(180,200,220,0.10) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="banlieusards"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 10px 24px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="banlieusards"] .hms-drawer__divider, body[data-page="banlieusards"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="banlieusards"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(180,200,220,0.12) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.30); } body[data-page="banlieusards"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(180,200,220,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="banlieusards"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — MERCREDI (nuit violet/bleu Wednesday, accent violet vif) ════════════════════════════════════════════════════════════════════ */ body[data-page="mercredi"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(92,46,145,0.30), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(42,26,74,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(26,26,58,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(92,46,145,0.22), transparent 62%), linear-gradient(180deg, #0a0a1a 0%, #1a1a4a 100%); box-shadow: -10px 0 40px rgba(92,46,145,0.20); } body[data-page="mercredi"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="mercredi"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(180,150,230,0.35); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.50); } body[data-page="mercredi"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="mercredi"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(92,46,145,0.20) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(180,150,230,0.22); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="mercredi"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 10px 24px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="mercredi"] .hms-drawer__divider, body[data-page="mercredi"] .hms-drawer__socials-divider { background: rgba(180,150,230,0.18); } body[data-page="mercredi"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(92,46,145,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(180,150,230,0.25); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.35); } body[data-page="mercredi"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(92,46,145,0.28) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="mercredi"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — NETFLIX-2 (variante Netflix rouge sang) ════════════════════════════════════════════════════════════════════ */ body[data-page="netflix-2"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(229,9,26,0.30), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(168,5,21,0.32), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(90,0,0,0.60), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(136,0,8,0.30), transparent 62%), linear-gradient(180deg, #2a0000 0%, #5a0000 100%); box-shadow: -10px 0 40px rgba(229,9,26,0.22); } body[data-page="netflix-2"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="netflix-2"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.40); } body[data-page="netflix-2"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="netflix-2"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,26,0.22) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="netflix-2"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.22); } body[data-page="netflix-2"] .hms-drawer__divider, body[data-page="netflix-2"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="netflix-2"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,26,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.30); } body[data-page="netflix-2"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(229,9,26,0.28) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="netflix-2"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — NETFLIX EVENTS (rouge vin événementiel) ════════════════════════════════════════════════════════════════════ */ body[data-page="netflix-events"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(200,18,30,0.32), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(181,48,80,0.30), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(66,0,8,0.60), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(133,26,54,0.30), transparent 62%), linear-gradient(180deg, #100804 0%, #2a1408 100%); box-shadow: -10px 0 40px rgba(200,18,30,0.20); } body[data-page="netflix-events"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="netflix-events"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.45); } body[data-page="netflix-events"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="netflix-events"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(200,18,30,0.20) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25); } body[data-page="netflix-events"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 10px 24px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.25); } body[data-page="netflix-events"] .hms-drawer__divider, body[data-page="netflix-events"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="netflix-events"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(200,18,30,0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.35); } body[data-page="netflix-events"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(200,18,30,0.26) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="netflix-events"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — NETFLIX STRANGER THINGS (très sombre / red horror) ════════════════════════════════════════════════════════════════════ */ body[data-page="netflix-stranger"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(200,18,30,0.32), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(138,6,18,0.30), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(10,0,2,0.65), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(66,0,8,0.40), transparent 62%), linear-gradient(180deg, #0a0002 0%, #1a0306 100%); box-shadow: -10px 0 40px rgba(200,18,30,0.20); } body[data-page="netflix-stranger"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="netflix-stranger"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.55); } body[data-page="netflix-stranger"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="netflix-stranger"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(200,18,30,0.20) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.60); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.30); } body[data-page="netflix-stranger"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.70), 0 2px 4px rgba(0,0,0,0.30); } body[data-page="netflix-stranger"] .hms-drawer__divider, body[data-page="netflix-stranger"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="netflix-stranger"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(200,18,30,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.40); } body[data-page="netflix-stranger"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(200,18,30,0.28) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="netflix-stranger"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — CANDYMAN / MARRY ME (vin sombre + accent rose vif) ════════════════════════════════════════════════════════════════════ */ body[data-page="candyman-marryme"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(212,24,122,0.25), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(74,18,36,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(58,10,20,0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(156,13,85,0.22), transparent 62%), linear-gradient(180deg, #1a0608 0%, #2a0a14 100%); box-shadow: -10px 0 40px rgba(212,24,122,0.18); } body[data-page="candyman-marryme"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="candyman-marryme"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.45); } body[data-page="candyman-marryme"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="candyman-marryme"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(212,24,122,0.20) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25); } body[data-page="candyman-marryme"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 10px 24px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.25); } body[data-page="candyman-marryme"] .hms-drawer__divider, body[data-page="candyman-marryme"] .hms-drawer__socials-divider { background: rgba(255,255,255,0.14); } body[data-page="candyman-marryme"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(212,24,122,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.35); } body[data-page="candyman-marryme"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(212,24,122,0.28) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="candyman-marryme"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — COLLABORATIONS COMMERCIALES (navy charcoal + accent or) ════════════════════════════════════════════════════════════════════ */ body[data-page="collaborations-commerciales"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(201,169,110,0.18), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(30,58,107,0.45), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(14,24,48,0.65), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(201,169,110,0.14), transparent 62%), linear-gradient(180deg, #0E1830 0%, #1B2845 100%); box-shadow: -10px 0 40px rgba(14,24,48,0.40); } body[data-page="collaborations-commerciales"] .hms-drawer__section-label { color: rgba(255,255,255,0.72); } body[data-page="collaborations-commerciales"] .hms-drawer__close { background: rgba(255,255,255,0.10); border: 1px solid rgba(201,169,110,0.40); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.45); } body[data-page="collaborations-commerciales"] .hms-drawer__close:hover { background: rgba(255,255,255,0.16); } body[data-page="collaborations-commerciales"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(201,169,110,0.18) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(201,169,110,0.28); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.25); } body[data-page="collaborations-commerciales"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.30), 0 10px 24px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.25); } body[data-page="collaborations-commerciales"] .hms-drawer__divider, body[data-page="collaborations-commerciales"] .hms-drawer__socials-divider { background: rgba(201,169,110,0.22); } body[data-page="collaborations-commerciales"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(201,169,110,0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); border: 1.5px solid rgba(201,169,110,0.30); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.35); } body[data-page="collaborations-commerciales"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(201,169,110,0.26) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%); } body[data-page="collaborations-commerciales"] .hms-drawer__signature { color: rgba(255,255,255,0.55); } /* ════════════════════════════════════════════════════════════════════ THÈME DRAWER — MINIONS / TROLLS (LIGHT — jaune sunshine + accent pop pink) ════════════════════════════════════════════════════════════════════ */ body[data-page="minions-trolls"] .hms-drawer.hms-drawer--portfolio { background-image: radial-gradient(ellipse 85% 65% at 10% 5%, rgba(255,229,102,0.65), transparent 60%), radial-gradient(ellipse 75% 60% at 80% 30%, rgba(255,95,168,0.22), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(244,163,0,0.45), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(255,212,0,0.55), transparent 62%), linear-gradient(180deg, #ffd83a 0%, #f4a300 100%); box-shadow: -10px 0 40px rgba(244,163,0,0.30); } body[data-page="minions-trolls"] .hms-drawer__section-label { color: rgba(80,40,0,0.70); } body[data-page="minions-trolls"] .hms-drawer__close { background: rgba(255,255,255,0.85); border: 1.5px solid rgba(80,40,0,0.30); color: #4a2800; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(244,163,0,0.30); } body[data-page="minions-trolls"] .hms-drawer__close:hover { background: rgba(255,255,255,0.95); } body[data-page="minions-trolls"] .hms-drawer--portfolio .hms-drawer__link { background: radial-gradient(ellipse at 20% -30%, rgba(255,255,255,0.40) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,229,102,0.85) 100%); border: 1.5px solid rgba(80,40,0,0.20); color: #4a2800; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(80,40,0,0.10), 0 6px 18px rgba(244,163,0,0.25), 0 2px 4px rgba(80,40,0,0.08); } body[data-page="minions-trolls"] .hms-drawer--portfolio .hms-drawer__link:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(80,40,0,0.10), 0 10px 24px rgba(244,163,0,0.38), 0 2px 4px rgba(80,40,0,0.10); } body[data-page="minions-trolls"] .hms-drawer__divider, body[data-page="minions-trolls"] .hms-drawer__socials-divider { background: rgba(80,40,0,0.20); } body[data-page="minions-trolls"] .hms-drawer__socials a { background: radial-gradient(ellipse at 20% -30%, rgba(255,255,255,0.45) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(255,229,102,0.80) 100%); border: 1.5px solid rgba(80,40,0,0.25); color: #4a2800; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 18px rgba(244,163,0,0.25); } body[data-page="minions-trolls"] .hms-drawer__socials a:hover { background: radial-gradient(ellipse at 20% -30%, rgba(255,255,255,0.55) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,229,102,0.92) 100%); } body[data-page="minions-trolls"] .hms-drawer__signature { color: rgba(80,40,0,0.55); } /* ═══════════════════════════════════════════════════════════════════════ GRAND MONITEUR (≥1800px) — Hero +21.5% (était +35%, -10% appliqué) - Bloc "+300" (logos, capsules, "contenus imaginés", "POUR LES MARQUES") ancré à GAUCHE, scale 1.197 (= 1.33 × 0.9) - Podium phones (capsule active-label au-dessus + flèches podium-nav en dessous) ancré à DROITE, scale 1.251 (= 1.39 × 0.9) - Espace entre les deux groupes (padding/gap) réduit de 10% N'AFFECTE PAS les MacBook (max effectif 1728px sur MBP 16") ═══════════════════════════════════════════════════════════════════════ */ @media (min-width: 1800px) { .hero { justify-content: space-between; padding-left: clamp(72px, 5.4vw, 144px); padding-right: clamp(72px, 5.4vw, 144px); gap: clamp(72px, 5.4vw, 162px); } .hero .stats-bloc.va2-stage { transform: scale(1.197) !important; /* 1.33 × 0.9 */ transform-origin: left center; } .hero .podium-stage { transform: translate(90px, 5%) scale(1.251) translateX(var(--podium-tx, 0px)); /* 100px → 90px ; 1.39 × 0.9 */ transform-origin: right center; } /* Ticker logos : +30% taille + 20% plus large (fades latéraux conservés via mask-image qui scale avec l'élément) */ .ticker-band { max-width: 1320px; transform: scale(1.30); transform-origin: center center; } /* Capsule "Elles m'ont fait confiance" + "+ 40 marques accompagnées" */ .ticker-label { transform: scale(1.30) !important; transform-origin: center center !important; margin-bottom: 50px !important; } .ticker-sublabel { transform: scale(1.30); transform-origin: center center; } /* Capsules "Mes Projets" et "Mon Parcours" (même classe .filters-title) */ .filters-title { transform: scale(1.30) !important; transform-origin: center center !important; } /* Espace augmenté entre "Mes Projets" et la barre de filtres + décalage léger vers la gauche pour éviter que le switcher déborde + enfants alignés à DROITE pour que "Marque Personnelle" s'aligne verticalement avec le switcher */ .filters-section { gap: 50px; align-items: flex-end; transform: translateY(-25px); } /* "Mes Projets" : centré horizontalement (override de align-items:flex-end du parent) pour être aligné avec le centre des 2 bannières en dessous. Origin center pour que le scale 1.30 grandisse symétriquement. */ .filters-section .filters-title { align-self: center !important; transform-origin: center center !important; } /* Décalage du switcher de vue de la même valeur pour que tout l'ensemble (Mes Projets + filtres + switcher) reste aligné */ .gallery-controls { transform: translateY(-25px); } /* Barre de filtres (All / Contenus organiques / Publicitaires / etc.) : - largeur 77% (compensation scale 1.30 → visuel = 100% section = largeur galerie) - space-between pour répartir les pills sur toute la largeur des 2 bannières - ancrée à droite pour aligner "Marque Personnelle" avec le switcher */ .filters-bar { width: 70%; justify-content: space-between; transform: scale(1.30); transform-origin: right center; } /* Switcher de vue 2/3/4 colonnes — ancré en haut à droite : pas de débordement vers le haut + bord droit fixe pour s'aligner avec "Marque Personnelle" */ .gallery-controls__btns { transform: scale(1.30); transform-origin: top right; } /* Bouton "Voir mes N autres projets" */ .gallery-expand-btn { transform: scale(1.30); transform-origin: center center; } /* Timeline parcours : on scale TOUT le .tl-stage par 1.30 (cartes Créateur Fashion / Creative Strategist / Au Pair / Mannequin, capsules de dates, contenu interne, trait SVG inclus). Origin top center → le haut reste fixé, la section grandit vers le bas. */ .tl-stage { transform: scale(1.30); transform-origin: top center; } /* Plus d'espace autour de "Mon Parcours" : - padding-top 60 → 100px : air entre "Voir mes N autres projets" et "Mon Parcours" - gap 32 → 80px : air entre "Mon Parcours" et la 1ère carte (Créateur Fashion) */ .parcours-block { padding-top: 100px; gap: 80px; } /* Titres overlay des cartes galerie (visible au survol) : +15%. Scopé à la page principale uniquement (body sans data-page), pages projet à activer après validation visuelle. */ body:not([data-page]) .ov-title { font-size: 1.955rem; /* 1.7rem × 1.15 */ } body:not([data-page]) .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 1.857rem; /* 1.615rem × 1.15 */ } /* ── Vue 4 colonnes à ≥1800px : titre -20%, date +20% puis +15% ── Bannières plus petites en 4-col, le titre hérité du global override paraît disproportionné. Dates cumul +20% puis +15%. Spécificité boostée pour battre les overrides ci-dessus. */ body:not([data-page]) .grid-view-4 .ov-title { font-size: 1.564rem; /* 1.955rem × 0.8 */ } body:not([data-page]) .grid-view-4 .ov-year { font-size: 0.7728rem; /* 0.7rem × 0.8 × 1.2 × 1.15 */ } body:not([data-page]) .grid-view-4 .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 1.337rem; /* 1.857rem × 0.8 × 0.9 (titre Mannequinat 4-col −10%) */ } body:not([data-page]) .grid-view-4 .gallery-card[data-href="projet-mannequinat.html"] .ov-year { font-size: 0.788rem; /* 0.595rem × 0.8 × 1.2 × 1.15 × 1.2 (date Mannequinat ré-augmentée de 20%) */ } /* ── Vue 3 colonnes à ≥1800px : date +15% (titre inchangé) ── */ body:not([data-page]) .grid-view-3 .ov-year { font-size: 0.943rem; /* 0.82rem × 1.15 */ } body:not([data-page]) .grid-view-3 .gallery-card[data-href="projet-mannequinat.html"] .ov-year { font-size: 0.802rem; /* 0.697rem × 1.15 */ } /* ── Vue 2 colonnes à ≥1800px : titre +20%, date +20% puis +15% ── Bannières plus grandes en 2-col, le titre/date peut être plus prominent pour rester proportionné. */ body:not([data-page]) .grid-view-2 .ov-title { font-size: 2.346rem; /* 1.955rem × 1.2 */ } body:not([data-page]) .grid-view-2 .ov-year { font-size: 1.311rem; /* 0.95rem × 1.2 × 1.15 */ } body:not([data-page]) .grid-view-2 .gallery-card[data-href="projet-mannequinat.html"] .ov-title { font-size: 2.228rem; /* 1.857rem × 1.2 */ } } /* ════════════════════════════════════════════════════════════════════════════ ME CONTACTER — Section chat iMessage (Idée D) Intégrée depuis preview-me-contacter-A-ideas.html Composants : .vA3-wrap (rectangle glass) + name-plate + photo + pills (droite) .vIdD-* (chat header, bulles, barre de saisie) (gauche) ════════════════════════════════════════════════════════════════════════════ */ /* ─── CTA boutons (mail / LinkedIn) ─────────────────────────────────────── */ .contact-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 20px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, #5d3f9b 0%, #3a2470 100%); border: 1.5px solid rgba(255,255,255,0.18); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(60,40,120,0.32), 0 2px 6px rgba(0,0,0,0.08); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease; } .contact-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 30px rgba(60,40,120,0.40), 0 3px 8px rgba(0,0,0,0.10); } .contact-cta--ghost { color: #2a1f54; background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,240,255,0.80) 100%); border: 1.5px solid rgba(160,130,230,0.50); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 20px rgba(60,40,120,0.14), 0 2px 6px rgba(0,0,0,0.04); } .contact-cta--ghost:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 26px rgba(60,40,120,0.20), 0 3px 8px rgba(0,0,0,0.06); } .contact-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .contact-cta--ghost svg { stroke: #5d3f9b; } /* ─── Pills d'infos (Disponible / Paris) ────────────────────────────────── */ .v-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: #4a3878; background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(245,240,255,0.65) 100%); border: 1px solid rgba(160,130,230,0.40); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 10px rgba(60,40,120,0.10); } .v-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.18); } /* ─── Override .parcours-block défaut (min-height 100vh + justify-center) Sur #me-contacter le contenu est court → on remonte l'ensemble. ─── */ #me-contacter { min-height: auto; justify-content: flex-start; padding-top: 30px; margin-top: -51px; } /* ─── Wrap commun (glass rectangle) ─────────────────────────────────────── */ .vA3-wrap { width: min(70%, 1010px); margin: 0 auto; padding: 39px 43px 52px; background: radial-gradient(ellipse at 12% -20%, rgba(140,110,220,0.18) 0%, transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(245,240,255,0.46) 100%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1.5px solid rgba(160,130,230,0.40); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 13px 35px rgba(60,40,120,0.18); } /* ─── Colonne droite (name + photo + pills empilés) ─────────────────────── */ .vA3-name-plate { max-width: 209.13px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.65px; font-family: 'Poppins', sans-serif; text-transform: uppercase; line-height: 1.1; position: relative; top: -8px; } .vA3-name-plate__name { font-size: clamp(11.825px, 1.047vw, 15.462px); font-weight: 800; color: #1a1230; letter-spacing: 0.04em; white-space: nowrap; } .vA3-name-plate__sep { font-size: clamp(10.004px, 0.862vw, 12.732px); font-weight: 400; color: #b487f0; line-height: 1; } .vA3-name-plate__role { font-size: clamp(11.825px, 1.047vw, 15.462px); font-weight: 800; background: linear-gradient(120deg, #5d3f9b 0%, #b487f0 50%, #5d3f9b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.04em; white-space: nowrap; } .vA3-photo { width: 84.28%; margin-left: auto; margin-right: auto; aspect-ratio: 4 / 5; border-radius: 11.84px; overflow: hidden; border: 2.09px solid rgba(255,255,255,0.92); box-shadow: 0 9.02px 22.30px rgba(60,40,120,0.22), inset 0 1px 0 rgba(255,255,255,0.85); background: linear-gradient(135deg, #d8c9f0 0%, #f0e4ff 100%); } .vA3-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .vA3-pills { display: flex; flex-direction: column; gap: 5.79px; align-items: stretch; width: 84.28%; margin-left: auto; margin-right: auto; position: relative; top: 8px; } .vA3-pills .v-pill { justify-content: flex-start; } /* ─── Wrap variant flex (utilisé pour Idée D) ───────────────────────────── Carte coupée en 2 : container transparent, glass sur chaque colonne */ .vA3-wrap--flex { display: flex; align-items: stretch; width: 100%; max-width: 1509px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; box-shadow: none; gap: 30px; } .vA3-wrap--flex .vIdD-left, .vA3-wrap--flex .vA3-right { background: radial-gradient(ellipse at 12% -20%, rgba(140,110,220,0.18) 0%, transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(245,240,255,0.46) 100%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1.5px solid rgba(160,130,230,0.40); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 13px 35px rgba(60,40,120,0.18); } .vA3-wrap--flex .vIdD-left { flex: 1; min-width: 0; padding: 33.15px 36.55px 44.2px; } .vA3-wrap--flex .vA3-right { width: 347.16px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 6.93px; padding: 10.86px 33.34px 14.48px; } /* Pills (×1.05 supplémentaire — name plate + pills uniquement, photo inchangée) */ .vA3-wrap--flex .v-pill { padding: 5.79px 11.57px; font-size: 9.93px; gap: 5.79px; justify-content: center; } .vA3-wrap--flex .v-pill .dot { width: 5.79px; height: 5.79px; box-shadow: 0 0 0 1.65px rgba(34,197,94,0.20); } /* Zoom photo Idée D */ .vA3-wrap--flex .vA3-photo img { transform: scale(1.15); transform-origin: center 22%; } /* ─── Colonne gauche : conversation chat ────────────────────────────────── */ .vIdD-left { display: flex; flex-direction: column; gap: 23.8px; min-width: 0; } .vIdD-bubbles { display: flex; flex-direction: column; gap: 16.15px; } .vIdD-bubble { position: relative; max-width: 82%; padding: 10.2px 16.15px; font-family: 'Poppins', sans-serif; font-size: clamp(11.9px, 1.1475vw, 16.15px); font-weight: 600; line-height: 1.32; letter-spacing: -0.005em; border-radius: 17px; box-shadow: 0 5.1px 12.75px rgba(60,40,120,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } .vIdD-bubble--in { align-self: flex-start; background: linear-gradient(135deg, #ffffff 0%, #f5f0fb 100%); border: 1px solid rgba(160,130,230,0.30); border-bottom-left-radius: 5.1px; color: #2a1f54; } .vIdD-bubble--out { align-self: flex-end; background: linear-gradient(135deg, #5d3f9b 0%, #3a2470 100%); border: 1px solid rgba(255,255,255,0.18); border-bottom-right-radius: 5.1px; color: #ffffff; } .vIdD-bubble--in em { font-style: normal; font-weight: 800; background: linear-gradient(120deg, #5d3f9b, #b487f0); -webkit-background-clip: text; background-clip: text; color: transparent; } .vIdD-bubble--out em { font-style: normal; font-weight: 800; color: #ffffff; } /* ─── En-tête de conversation (back, avatar, nom, caméra/téléphone) ─────── */ .vIdD-chat-header { width: 100%; display: flex; align-items: center; gap: 10.2px; padding-bottom: 11.9px; border-bottom: 1px solid rgba(160,130,230,0.30); } .vIdD-back { display: inline-flex; align-items: center; justify-content: center; width: 18.7px; height: 18.7px; color: #5d3f9b; flex-shrink: 0; } .vIdD-back svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.125; stroke-linecap: round; stroke-linejoin: round; } .vIdD-avatar { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), transparent 55%), linear-gradient(135deg, #e3d4f5 0%, #f0e4ff 100%); border: 1.7px solid rgba(255,255,255,0.92); box-shadow: 0 1.7px 6.8px rgba(60,40,120,0.18), inset 0 1px 0 rgba(255,255,255,0.6); overflow: hidden; } .vIdD-q { position: absolute; font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1; user-select: none; } .vIdD-q--1 { top: 2.55px; left: 5.1px; font-size: 12.75px; color: #5d3f9b; transform: rotate(-8deg); } .vIdD-q--2 { top: 11.9px; right: 4.25px; font-size: 9.35px; color: #b487f0; transform: rotate(14deg); } .vIdD-q--3 { bottom: 1.7px; left: 11.05px; font-size: 11.05px; color: #6b4ca8; transform: rotate(-3deg); } .vIdD-q--4 { top: 5.95px; right: 11.9px; font-size: 6.8px; color: #8e6dd1; transform: rotate(22deg); } .vIdD-contact-name { flex: 1; min-width: 0; font-family: 'Poppins', sans-serif; font-size: 15.64px; font-weight: 800; color: #1a1230; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vIdD-actions { display: inline-flex; align-items: center; gap: 11.9px; flex-shrink: 0; } .vIdD-action { display: inline-flex; align-items: center; justify-content: center; color: #5d3f9b; } .vIdD-action svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ─── Barre de saisie iMessage (mail + LinkedIn pré-remplis) ────────────── */ .vIdD-input-bar { width: 100%; display: flex; align-items: center; gap: 8.5px; margin-top: 10.2px; } .vIdD-input-plus { flex-shrink: 0; width: 28.135px; height: 28.135px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 1.275px solid rgba(160,130,230,0.30); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1.7px 5.1px rgba(60,40,120,0.08); } .vIdD-input-plus svg { width: 14.07px; height: 14.07px; stroke: #4a3878; fill: none; stroke-width: 1.87; stroke-linecap: round; } .vIdD-input-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3.74px; padding: 9.35px 7.48px 9.35px 12.155px; background: #ffffff; border: 1.275px solid rgba(160,130,230,0.30); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1.7px 5.1px rgba(60,40,120,0.06); } .vIdD-input-text { flex: 1; min-width: 0; font-family: 'Poppins', sans-serif; font-size: 14.07px; font-weight: 500; line-height: 1.3; color: #2a1f54; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vIdD-input-label { font-weight: 800; color: #1a1230; margin-right: 1.7px; } .vIdD-input-link { color: #5d3f9b; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(93,63,155,0.28); transition: color 0.25s ease, border-color 0.25s ease; } .vIdD-input-link:hover { color: #b487f0; border-bottom-color: #b487f0; } .vIdD-input-link--li { border-bottom: none; } .vIdD-input-link--li:hover { border-bottom: none; } .vIdD-li-icon { width: 18.74px; height: 18.74px; fill: #5d3f9b; display: inline-block; vertical-align: -4.46px; margin-right: 1.7px; transition: fill 0.25s ease; } .vIdD-input-link--li:hover .vIdD-li-icon { fill: #b487f0; } .vIdD-input-plus-sep { margin: 0 3.4px; color: #b487f0; font-weight: 700; } .vIdD-input-mic { flex-shrink: 0; width: 21.42px; height: 21.42px; display: inline-flex; align-items: center; justify-content: center; } .vIdD-input-mic svg { width: 19.64px; height: 19.64px; stroke: #6b4ca8; fill: none; stroke-width: 1.53; stroke-linecap: round; stroke-linejoin: round; } /* ─── Responsive mobile + tablet ≤ 768px — section "Me contacter" ─── */ @media (max-width: 768px) { /* Wrap passe en colonne ; suit la largeur du parent #me-contacter (~292px sur iPhone SE) pour ne pas déborder à droite. Conversation rendue plus verticale par ce cadrage. */ #me-contacter .vA3-wrap--flex { flex-direction: column; width: 100%; max-width: none; margin: 0 auto; gap: 18px; } /* Les deux rectangles prennent toute la largeur du wrap, paddings serrés mobile */ #me-contacter .vA3-wrap--flex .vIdD-left, #me-contacter .vA3-wrap--flex .vA3-right { width: 100%; padding: 22px 16px 26px; border-radius: 18px; } /* Override le 347.16px desktop fixe + reset gap mobile */ #me-contacter .vA3-wrap--flex .vA3-right { width: 100%; gap: 14px; } /* === Chat (rectangle gauche) === */ #me-contacter .vIdD-left { gap: 18px; } #me-contacter .vIdD-chat-header { gap: 10px; padding-bottom: 12px; } #me-contacter .vIdD-back { width: 20px; height: 20px; } #me-contacter .vIdD-back svg { width: 18px; height: 18px; stroke-width: 2.5; } #me-contacter .vIdD-avatar { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,0.92); } #me-contacter .vIdD-q--1 { top: 3px; left: 5px; font-size: 13px; } #me-contacter .vIdD-q--2 { top: 12px; right: 4px; font-size: 10px; } #me-contacter .vIdD-q--3 { bottom: 2px; left: 11px; font-size: 11px; } #me-contacter .vIdD-q--4 { top: 6px; right: 12px; font-size: 7px; } #me-contacter .vIdD-contact-name { font-size: 14px; } #me-contacter .vIdD-actions { gap: 10px; } #me-contacter .vIdD-action svg { width: 18px; height: 18px; stroke-width: 2; } /* Bulles de conversation : lisibles, max-width plus large */ #me-contacter .vIdD-bubbles { gap: 12px; } #me-contacter .vIdD-bubble { font-size: 14px; padding: 10px 14px; border-radius: 16px; max-width: 86%; box-shadow: 0 5px 12px rgba(60,40,120,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } #me-contacter .vIdD-bubble--in { border-bottom-left-radius: 5px; } #me-contacter .vIdD-bubble--out { border-bottom-right-radius: 5px; } /* Capsule "Voici mes coordonnées" — single line adapté mobile, éléments serrés */ #me-contacter .vIdD-input-bar { width: 100%; gap: 5px; margin-top: 10px; } #me-contacter .vIdD-input-plus { width: 24px; height: 24px; border-width: 1.5px; } #me-contacter .vIdD-input-plus svg { width: 12px; height: 12px; stroke-width: 2.2; } #me-contacter .vIdD-input-field { padding: 6px 5px 6px 8px; gap: 2px; border-width: 1.5px; } /* UX trade-off : label caché sur mobile (largeur impossible avec tous les éléments en taille lisible). Le contexte visuel suffit. */ #me-contacter .vIdD-input-label { display: none; } #me-contacter .vIdD-input-text { font-size: 10px; font-weight: 600; text-align: left; } #me-contacter .vIdD-input-link { border-bottom-width: 1px; } #me-contacter .vIdD-li-icon { width: 13px; height: 13px; vertical-align: -3px; margin-right: 1px; } #me-contacter .vIdD-input-plus-sep { margin: 0 2px; } #me-contacter .vIdD-input-mic { width: 18px; height: 18px; } #me-contacter .vIdD-input-mic svg { width: 16px; height: 16px; stroke-width: 1.8; } /* === Photo + name plate + pills (rectangle droit) === */ /* Name plate : reset le décalage desktop -8px, reprend une taille mobile */ #me-contacter .vA3-name-plate { max-width: none; top: 0; gap: 2px; } #me-contacter .vA3-name-plate__name, #me-contacter .vA3-name-plate__role { font-size: 17px; } #me-contacter .vA3-name-plate__sep { font-size: 13px; } /* Photo : 78% du rectangle, aspect-ratio 4/5 conservé comme demandé */ #me-contacter .vA3-photo { width: 78%; border: 3px solid rgba(255,255,255,0.92); border-radius: 16px; box-shadow: 0 10px 24px rgba(60,40,120,0.22), inset 0 1px 0 rgba(255,255,255,0.85); } /* Pills : même largeur que la photo (78%), reset décalage desktop +8px */ #me-contacter .vA3-pills { width: 78%; gap: 8px; top: 0; } #me-contacter .vA3-wrap--flex .v-pill { padding: 7px 14px; font-size: 12px; gap: 7px; justify-content: center; } #me-contacter .vA3-wrap--flex .v-pill .dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(34,197,94,0.20); } } /* ════════════════════════════════════════════════════════════════════════ ME CONTACTER — Refonte V2 (formulaire + identité side-by-side) ════════════════════════════════════════════════════════════════════════ */ #me-contacter .mc-section { padding: clamp(0.3rem, 0.8vh, 0.6rem) 0; /* réduit pour rapprocher le hook de la pill "Me contacter" (sans overlap) */ max-width: 100%; margin: 0 auto; width: 100%; } #me-contacter .mc-hook { font-family: 'Poppins', sans-serif; font-weight: 600; /* -6% (700 → 600, seul poids inférieur dispo dans Poppins chargé) */ font-size: clamp(1.35rem, 2.12vw, 1.93rem); /* -7% */ line-height: 1.35; letter-spacing: -0.01em; color: #1a1230; margin: 0 0 clamp(1.02rem, 1.91vw, 1.47rem); /* -20% espace sous Discutons-en */ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; /* -20% : 0.5 → 0.4 */ } #me-contacter .mc-hook-line { display: block; } #me-contacter .mc-hook-accent { background: linear-gradient(135deg, #5d3f9b 0%, #2a1f54 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 960px) { #me-contacter .mc-hook-line { white-space: nowrap; } } /* Glass card */ #me-contacter .mc-card { position: relative; background: radial-gradient(ellipse at 25% -10%, rgba(255,255,255,0.85) 0%, transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.58) 0%, rgba(240,232,255,0.42) 100%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1.5px solid rgba(255,255,255,0.78); border-radius: 38px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 22px 50px rgba(40,25,80,0.10), 0 5px 14px rgba(0,0,0,0.04); width: 90%; /* strictement aligné à .parcours-capsule (90%) — bord à bord */ max-width: none; margin: 0 auto; padding: 1.4rem 1.92rem; /* -5% vertical (1.47 → 1.40) */ display: grid; grid-template-columns: 1fr; gap: 1.23rem; /* -5% : 1.29 → 1.23 */ box-sizing: border-box; } @media (min-width: 760px) { #me-contacter .mc-card { grid-template-columns: calc(var(--mc-w, 205px) + 1.68rem) 1fr; gap: 3.6rem; align-items: stretch; } } /* Colonne identité (gauche) — alignée top/bottom avec form */ #me-contacter .mc-identity { --mc-w: 205px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; /* photo↔top form, pills↔bottom submit */ text-align: center; padding: 0; /* aligné strictement aux bords haut/bas du card padding */ gap: 0.7rem; /* -5% : 0.74 → 0.70 */ } #me-contacter .mc-photo { width: var(--mc-w); aspect-ratio: 1; border-radius: 24px; /* -20% : 30 → 24 */ overflow: hidden; border: 1.5px solid rgba(255,255,255,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 9px 22px rgba(40,25,80,0.11), 0 2px 6px rgba(0,0,0,0.04); } #me-contacter .mc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } #me-contacter .mc-id { display: grid; gap: 0; width: var(--mc-w); justify-items: center; } #me-contacter .mc-name { font-family: 'Poppins', sans-serif; font-weight: 600; /* -4% (700 → 600, étape inférieure dispo dans Poppins chargé) */ font-size: 1.09rem; /* aligné sur .mc-role (chef de projet) */ color: #1a1230; letter-spacing: -0.01em; line-height: 1.15; } #me-contacter .mc-role { font-family: 'Poppins', sans-serif; font-weight: 700; /* -4% (800 → 700, étape inférieure dispo dans Poppins chargé) */ font-size: 1.02rem; /* -6% : 1.09 → 1.02 */ letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(135deg, #5d3f9b 0%, #2a1f54 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.15; } #me-contacter .mc-sep { color: rgba(26,18,48,0.4); font-size: 0.94rem; /* -20% : 1.18 → 0.94 */ line-height: 1; margin: 0.05rem 0; user-select: none; } #me-contacter .mc-pills { display: grid; gap: 0.38rem; /* -7% : 0.41 → 0.38 */ width: var(--mc-w); margin-top: 0; } #me-contacter .mc-pill { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.74rem; /* -7% : 0.8 → 0.74 */ color: #1a1230; background: rgba(255,255,255,0.72); border: 1.5px solid rgba(255,255,255,0.88); border-radius: 999px; padding: 0.49rem 0.72rem; /* -7% sur vertical ET horizontal */ display: flex; align-items: center; justify-content: center; gap: 0.4rem; /* -7% : 0.43 → 0.40 */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 5px 12px rgba(40,25,80,0.08); white-space: nowrap; line-height: 1.2; width: 100%; box-sizing: border-box; } #me-contacter .mc-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d058; box-shadow: 0 0 0 3px rgba(52,208,88,0.22), 0 0 14px rgba(52,208,88,0.45); animation: mc-dot-pulse 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes mc-dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(52,208,88,0.22), 0 0 12px rgba(52,208,88,0.45); } 50% { box-shadow: 0 0 0 6px rgba(52,208,88,0.10), 0 0 18px rgba(52,208,88,0.70); } } /* Colonne form (droite) — alignée top/bottom avec identity */ #me-contacter .mc-form { display: flex; flex-direction: column; justify-content: space-between; gap: 0.59rem; /* -5% : 0.62 → 0.59 */ } #me-contacter .mc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; /* -20% : 1 → 0.8 */ } @media (max-width: 540px) { #me-contacter .mc-row { grid-template-columns: 1fr; } } #me-contacter .mc-field { display: grid; gap: 0.24rem; /* -5% : 0.25 → 0.24 */ } #me-contacter .mc-field label { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.73rem; /* -20% : 0.91 → 0.73 */ color: #2a1f54; letter-spacing: 0.01em; } #me-contacter .mc-field input, #me-contacter .mc-field textarea { font-family: 'Poppins', sans-serif; font-size: 0.86rem; /* -20% : 1.07 → 0.86 */ color: #1a1230; background: rgba(255,255,255,0.72); border: 1.5px solid rgba(255,255,255,0.85); border-radius: 13px; padding: 0.48rem 0.88rem; /* -5% vertical : 0.5 → 0.48 */ transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; resize: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); width: 100%; box-sizing: border-box; } #me-contacter .mc-field input:focus, #me-contacter .mc-field textarea:focus { outline: none; border-color: rgba(93,63,155,0.55); background: rgba(255,255,255,0.96); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 4px rgba(93,63,155,0.14); } #me-contacter .mc-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.52rem; /* -20% : 0.65 → 0.52 */ font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.88rem; /* -20% : 1.1 → 0.88 */ color: #fff; background: linear-gradient(135deg, #5d3f9b 0%, #2a1f54 100%); border: 1.5px solid rgba(255,255,255,0.45); border-radius: 13px; padding: 0.59rem 1.41rem; /* -5% vertical : 0.62 → 0.59 */ cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 24px rgba(40,25,80,0.30), 0 2px 6px rgba(0,0,0,0.10); transition: transform 0.18s ease, box-shadow 0.18s ease; width: 100%; } #me-contacter .mc-submit:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 13px 30px rgba(40,25,80,0.40); } #me-contacter .mc-submit:active { transform: translateY(0); } #me-contacter .mc-submit svg { width: 18px; height: 18px; fill: #fff; } /* Case de consentement RGPD — sous le message, avant le bouton d'envoi */ #me-contacter .mc-consent { display: flex; align-items: flex-start; gap: 0.5rem; } #me-contacter .mc-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 0.1rem; accent-color: #5d3f9b; cursor: pointer; } #me-contacter .mc-consent label { font-family: 'Poppins', sans-serif; font-size: 0.68rem; line-height: 1.45; color: rgba(42,31,84,0.82); letter-spacing: 0.01em; cursor: pointer; } #me-contacter .mc-consent a { color: #5d3f9b; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } #me-contacter .mc-alt { margin: 0.19rem 0 0; font-size: 0.75rem; color: rgba(26,18,48,0.65); text-align: center; line-height: 1.5; } #me-contacter .mc-alt a { color: #5d3f9b; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(93,63,155,0.3); transition: border-color 0.2s, color 0.2s; } #me-contacter .mc-alt a:hover { color: #2a1f54; border-color: #2a1f54; } #me-contacter .mc-alt-sep { display: inline-block; margin: 0 0.45rem; color: rgba(26,18,48,0.3); } /* Animation feedback "✓ copié" après clic sur le lien mail */ #me-contacter .mc-mail-copied { color: #2a7d3a !important; border-bottom-color: transparent !important; font-weight: 700; transition: color 0.2s ease; } /* ─── Soumission : bouton désactivé + feedback succès/erreur ─────────── */ #me-contacter .mc-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } #me-contacter .mc-feedback { margin: 0.4rem 0 0; padding: 0.7rem 1rem; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 0.92rem; font-weight: 500; text-align: center; line-height: 1.4; } #me-contacter .mc-feedback[data-state="success"] { background: rgba(52,208,88,0.12); color: #2a7d3a; border: 1.5px solid rgba(52,208,88,0.35); } #me-contacter .mc-feedback[data-state="error"] { background: rgba(220,80,80,0.10); color: #a02d2d; border: 1.5px solid rgba(220,80,80,0.32); } /* ─── Desktop overrides (≥ 760px) ─────────────────────────────────────── */ @media (min-width: 760px) { /* Chef de projet : casse normale sur desktop (mobile reste en majuscules) */ #me-contacter .mc-role { text-transform: none; letter-spacing: 0; } /* Pills légèrement plus bas sous "Chef de projet" → avec justify-content: space-between, margin-top sur pills augmente le gap visible entre mc-id et pills. Hauteur du card peut croître légèrement. */ #me-contacter .mc-pills { margin-top: clamp(0.85rem, 1.8vw, 1.45rem); } /* Largeur mc-card = largeur visuelle du rectangle mannequin (.tl-card). Le .tl-stage a max-width:1476.2px + zoom:0.7865 → on applique la même formule sur .mc-card pour matcher pixel-perfect. Le zoom scale aussi proportionnellement tous les éléments internes (photo, textes, capsules, champs, bouton) sans avoir à les retoucher un par un. */ #me-contacter .mc-card { width: 90%; max-width: 1476.2px; zoom: 0.7865; } /* Hook remonté de 1rem sans bouger ni la pill "Me contacter" (au-dessus) ni la mc-card (en-dessous) : margin-top négatif compensé par margin-bottom augmenté de la même quantité → seul le hook se déplace */ #me-contacter .mc-hook { margin-top: -1rem; margin-bottom: clamp(2.02rem, 2.91vw, 2.47rem); /* original + 1rem */ } } /* ─── MacBook Pro (760px → 1440px) ───────────────────────────────────── Aligne la largeur visuelle de .mc-card sur .tl-card mannequin (1161px @ 1440) au lieu du 90% de parent qui donne 1068px. Bump du zoom de +8,73% pour scaler proportionnellement photo, textes, capsules, champs, bouton. +5% sur la hauteur visible via padding vertical. */ @media (min-width: 760px) and (max-width: 1440px) { #me-contacter .mc-card { width: 100%; max-width: 1357.6px; /* zoom × max-width = 1161 visual = tl-card mannequin */ zoom: 0.8551; /* 0.7865 × 1.0873 — internes scalés +8,73% */ padding: 2.01rem 1.92rem; /* +5% hauteur visible (+0.61rem vertical chaque côté) */ } /* Labels formulaire (Nom & prénom, Email, Sujet, Votre message) +16% */ #me-contacter .mc-field label { font-size: 0.8468rem; /* 0.73 × 1.16 */ } /* Rapproche la pill "Me contacter" du rectangle mannequin (gap 119 → 60px) en remontant tout le bloc #me-contacter de 59px → pill + hook + mc-card suivent uniformément (= ajustement proportionnel) */ #me-contacter { margin-top: -110px; } } /* ─── Très grand desktop (≥ 1800px) ───────────────────────────────────── */ @media (min-width: 1800px) { /* Header agrandi : 0.82 × 1.15 × 1.12 = 1.056 */ .header { transform: scale(1.056); } /* Cause racine du chevauchement : - `.tl-stage` a `transform: scale(1.30)` à ce breakpoint (cf. ligne 4685). Le transform agrandit visuellement la timeline mannequin SANS réserver d'espace dans le flux → ~30% de débordement visuel sous le bloc parcours. - `#parcours` a `min-height: 100vh` qui crée du vide. - `#me-contacter` a `margin-top: -51px` qui le remonte par-dessus ce vide. → la pill "ME CONTACTER" se retrouve visuellement sur la mannequin. */ /* 1. #parcours : retire min-height 100vh + réserve l'espace du scale 1.30 */ #parcours { min-height: auto; padding-bottom: 449px; /* +7% (420 → 449) : pill encore plus bas */ } /* 2. #me-contacter : aucun overlap négatif, ordre vertical strict section mannequin → espace (padding-bottom de #parcours) → padding-top de #me-contacter → pill → espace → mc-card */ #me-contacter { margin-top: 0; padding-top: 85px; /* +7% (79 → 85) */ } #me-contacter .parcours-heading { margin-top: 0; } /* Air net entre la pill et le mc-card (déjà géré par .parcours-block gap:80px à ≥1800px, mais on s'assure que .mc-section n'ajoute pas de marge en haut) */ #me-contacter .mc-section { padding-top: 0; } /* 3. mc-card : à ≥1800px, mannequin reçoit transform:scale(1.30) en plus du zoom. On applique le même scale sur .mc-card pour garder la correspondance visuelle (largeur ET éléments internes alignés). */ #me-contacter .mc-card { width: 90%; max-width: 1476.2px; transform: scale(1.30); transform-origin: top center; } /* Le transform ne réserve pas d'espace dans le flux → on compense pour éviter que le card "déborde" visuellement en bas du document */ #me-contacter { padding-bottom: 220px; } /* Labels formulaire (Nom & prénom, Email, Sujet, Votre message) +16% */ #me-contacter .mc-field label { font-size: 0.8468rem; /* 0.73 × 1.16 */ } } /* ─── Responsive portable (< 760px) ───────────────────────────────────── */ @media (max-width: 759.98px) { /* Rapprochement de la pill "Me contacter" du bas du rectangle mannequin */ #me-contacter { margin-top: -85px; /* légèrement redescendu (était -110px) → un peu plus de marge depuis mannequin */ padding-top: 0; gap: 20px; /* override .parcours-block gap:32px → rapproche le hook de la pill */ } #me-contacter .parcours-heading { margin-top: 0; } /* Card : padding horizontal uniforme et un peu plus serré pour mobile, box-sizing déjà border-box → marges intérieures G/D strictement égales */ #me-contacter .mc-card { padding: 1.4rem 1.2rem; /* horizontal symétrique (G = D), -38% horizontal vs desktop */ } /* Hook -15% sur mobile + écart avec le rectangle réduit proportionnellement (puisque le hook se rapproche de la pill, on rapproche aussi le rectangle du hook) */ #me-contacter .mc-hook { font-size: clamp(1.05rem, 4vw, 1.64rem); /* -15% du clamp de base */ margin-bottom: clamp(1.25rem, 4vw, 1.8rem); /* réduit proportionnellement */ } /* Colonne identité : full-width, alignée au centre */ #me-contacter .mc-identity { width: 100%; padding: 0; justify-content: flex-start; align-items: center; gap: 0.85rem; } /* Photo : ne dépasse jamais l'inner du card */ #me-contacter .mc-photo { width: min(var(--mc-w), 78%); max-width: 220px; } /* Pills : largeur strictement équivalente à .mc-photo (même formule) */ #me-contacter .mc-pills { width: min(var(--mc-w), 78%); max-width: 220px; margin: 0 auto; gap: 0.33rem; /* -12% : 0.38 → 0.33 */ } #me-contacter .mc-pill { font-size: 0.65rem; /* -12% : 0.74 → 0.65 */ padding: 0.43rem 0.63rem; /* -12% */ gap: 0.35rem; /* -12% : 0.4 → 0.35 */ } #me-contacter .mc-pill-dot { width: 7px; /* -12% : 8 → 7 */ height: 7px; } /* mc-id passe en ligne horizontale, et au-dessus de la photo (order:-1) */ #me-contacter .mc-id { order: -1; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 0.4rem; width: 100%; max-width: 100%; flex-wrap: nowrap; } #me-contacter .mc-name, #me-contacter .mc-sep, #me-contacter .mc-role { white-space: nowrap; font-size: clamp(0.68rem, 2.8vw, 0.92rem); /* réduit pour absorber l'uppercase sans déborder */ line-height: 1.15; } #me-contacter .mc-name { text-transform: uppercase; /* Geoffrey Moreno → GEOFFREY MORENO */ letter-spacing: 0.03em; } #me-contacter .mc-id { gap: 0.35rem; /* resserre légèrement pour garantir 1 ligne avec uppercase */ } #me-contacter .mc-sep { margin: 0; font-size: clamp(0.68rem, 2.8vw, 0.92rem); } /* Form : full-width, empilage 1 colonne sur TOUT le range mobile + -12% sur tous les éléments */ #me-contacter .mc-form { width: 100%; gap: 0.52rem; /* -12% : 0.59 → 0.52 */ } #me-contacter .mc-row { grid-template-columns: 1fr; } #me-contacter .mc-field { gap: 0.21rem; /* -12% : 0.24 → 0.21 */ } #me-contacter .mc-field label { font-size: 0.64rem; /* -12% : 0.73 → 0.64 */ text-align: center; /* labels centrés au-dessus des inputs (aligné aux capsules pills) */ } #me-contacter .mc-field input, #me-contacter .mc-field textarea { font-size: 0.76rem; /* -12% : 0.86 → 0.76 */ padding: 0.42rem 0.7rem; /* -12% (sur les valeurs mobile précédentes 0.48/0.8) */ border-radius: 11px; /* -12% : 13 → 11 */ } /* Sujet + Message : centrés horizontalement + -14% sur la taille du texte */ #me-contacter #mc-f-subject, #me-contacter #mc-f-message { text-align: center; font-size: 0.65rem; /* -14% : 0.76 → 0.65 */ } #me-contacter #mc-f-message::placeholder, #me-contacter #mc-f-subject::placeholder { text-align: center; } #me-contacter .mc-submit { font-size: 0.71rem; /* -8% : 0.77 → 0.71 */ padding: 0.52rem 0.88rem; gap: 0.46rem; border-radius: 11px; margin-top: clamp(0.55rem, 2vw, 1rem); } /* Hook : -6% sur le gras (700 → 600, seul poids inférieur dispo dans Poppins) */ #me-contacter .mc-hook { font-weight: 600; } #me-contacter .mc-hook-accent { font-weight: 600; } #me-contacter .mc-submit svg { width: 16px; /* -12% : 18 → 16 */ height: 16px; } #me-contacter .mc-alt { font-size: 0.66rem; /* -12% : 0.75 → 0.66 */ margin-top: 0.17rem; /* -12% : 0.19 → 0.17 */ } } /* ═══════════════════════════════════════════════════════════════════════ PERF FIX n°1 — content-visibility sur les grandes sections hors écran. Évite au navigateur de calculer le rendu des sections pas encore atteintes. La hauteur estimée (contain-intrinsic-size: auto Xpx) réserve l'espace pour que la barre de scroll reste précise et qu'aucun "saut" ne se produise. Le mot-clé `auto` permet au navigateur de mémoriser la vraie hauteur après le 1er rendu et de la réutiliser ensuite. NB : on n'applique PAS sur la hero section (.hero) car elle est visible dès l'arrivée → aucun gain à attendre. ═══════════════════════════════════════════════════════════════════════ */ /* PERF FIX n°1 rollback — content-visibility supprimé. Cause : ton design utilise massivement transform: scale sur les pills, les titres et les sections, ce qui crée des conflits de clipping (contain: paint). Seul le Fix n°3 (scroll throttle dans script.js) reste actif. */ /* ══ FOOTER — liens légaux (mentions légales / confidentialité) ══ */ .site-footer { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 2.4rem 1.2rem 2.8rem; font-family: 'Poppins', sans-serif; text-align: center; } .site-footer__copy { margin: 0; font-size: 0.78rem; color: rgba(42, 31, 84, 0.55); } .site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.55rem; } .site-footer__links a { font-size: 0.78rem; font-weight: 500; color: rgba(42, 31, 84, 0.7); text-decoration: none; transition: color 0.18s ease; } .site-footer__links a:hover { color: #5d3f9b; text-decoration: underline; } .site-footer__dot { color: rgba(42, 31, 84, 0.35); } /* ══ GRAND ÉCRAN — réduction proportionnelle −13 % au-delà de 1800px ══ Tout le contenu SOUS la hero (.bigscreen-wrap : ticker marques, Mes projets, galerie, parcours, contact, footer) est rendu à 87 % via un transform: scale unique → réduction strictement uniforme, zéro déformation des proportions internes. La hero n'est pas concernée. Le recentrage horizontal au pixel et le comblement du vide vertical laissé par le scale sont gérés par le script inline de index.html. La restauration de scroll (#card-, ancres) vise via getBoundingClientRect (fidèle au transform) — cf. script inline . Sous 1800px : aucune règle ne s'applique, rendu identique à avant. */ @media (min-width: 1800px) { .bigscreen-wrap { transform: scale(0.87); transform-origin: top center; } /* Empêche la marge négative compensatoire (script) de se "collapser" avec celle de

— sinon la hauteur de page ne se réduit pas. */ main { padding-bottom: 0.02px; } }