/* ===== IDTrax — Site vitrine ===== */ /* DA : CHANTIER — jaune/noir signalisation, engins animés, ambiance terrain */ :root { --yellow: #ffcc00; --yellow-d: #e6a700; --yellow-soft: #fff4cc; --orange: #ff6a00; --orange-d: #e85d00; --ink: #181513; /* noir chantier */ --bg: #faf6ec; /* béton clair */ --surface: #ffffff; --surface-2: #f3ecdd; --text: #1b1813; --muted: #6f675a; --border: #e7ddc9; --ok: #1f9d4d; --ko: #d83a2e; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(24, 21, 19, .06), 0 4px 14px rgba(24, 21, 19, .06); --shadow-md: 0 10px 30px rgba(24, 21, 19, .12); --shadow-lg: 0 24px 60px rgba(24, 21, 19, .18); --max: 1140px; --font-head: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sky-1: #cfeafe; --sky-2: #eaf6ff; --dirt: #c9b48f; } [data-theme="dark"] { --yellow-soft: #2c2510; --bg: #14110d; --surface: #1d1914; --surface-2: #25201a; --text: #f5efe3; --muted: #aaa090; --border: #312a21; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 10px 30px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6); --sky-1: #1b2533; --sky-2: #131b26; --dirt: #4a4030; } /* ===== Thème évènementiel : Coupe du Monde (pelouse & or) ===== Piloté depuis le panel admin (/api/theme) et appliqué via data-skin sur . N'écrase QUE des variables → le clair/sombre et toute la mise en page sont conservés. */ [data-skin="worldcup"] { --yellow: #ffd23f; --yellow-d: #d9a400; --yellow-soft: #fff5d1; --orange: #0b8a3d; /* l'accent orange devient vert pelouse */ --orange-d: #0a6e31; --bg: #f2f8f1; /* béton clair → vert très clair */ --surface-2: #e7f3e5; --border: #d8e7d3; --sky-1: #cfecd2; --sky-2: #eaf7ea; --dirt: #2f7d3f; /* le sol animé du hero devient une pelouse */ } [data-skin="worldcup"][data-theme="dark"] { --yellow-soft: #2a2710; --bg: #0c140e; --surface: #14201a; --surface-2: #1a2a20; --border: #26382b; --sky-1: #14241a; --sky-2: #0f1b13; --dirt: #1e3a26; } * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x: clip = stoppe tout scroll horizontal (engins animés, etc.) SANS casser le header sticky (contrairement à hidden). hidden = fallback vieux Safari. */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } h1, h2, h3, h4, .brand__name { font-family: var(--font-head); letter-spacing: -.02em; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } [id] { scroll-margin-top: 84px; } /* ===== Bandes de signalisation hachurées ===== */ .topstripe { height: 8px; background: repeating-linear-gradient(-45deg, var(--ink) 0 16px, var(--yellow) 16px 32px); animation: stripeTop 1.4s linear infinite; } .hazard { height: 16px; background: repeating-linear-gradient(-45deg, var(--ink) 0 18px, var(--yellow) 18px 36px); animation: stripeMove 1.8s linear infinite; } .hazard--thin { height: 8px; } /* décalage = 1 période exacte du motif (2·√2·largeur de bande) → boucle invisible */ @keyframes stripeTop { to { background-position: 45.255px 0; } } @keyframes stripeMove { to { background-position: 50.912px 0; } } /* ===== Boutons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 600; border: none; cursor: pointer; border-radius: 12px; padding: 13px 24px; font-size: 15px; line-height: 1; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:active { transform: scale(.97); } .btn .arrow { transition: transform .18s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn--primary { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 0 var(--yellow-d), 0 10px 22px rgba(255, 204, 0, .4); } .btn--primary:hover { background: #ffd633; } .btn--primary:active { transform: translateY(3px) scale(.99); box-shadow: 0 3px 0 var(--yellow-d), 0 6px 14px rgba(255, 204, 0, .4); } .btn--ghost { background: var(--surface); color: var(--text); border: 2px solid var(--ink); } .btn--ghost:hover { background: var(--surface-2); } .btn--lg { padding: 16px 30px; font-size: 16px; } .btn--sm { padding: 10px 18px; font-size: 14px; border-radius: 10px; } .btn--block { display: flex; width: 100%; } /* ===== En-tête ===== */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; } .brand__logo { width: 58px; height: 58px; object-fit: contain; animation: logoFloat 3.5s ease-in-out infinite; } @keyframes hatBob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2px); } } @keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .nav { display: flex; align-items: center; gap: 28px; } .nav a { color: var(--muted); font-weight: 500; font-size: 15px; } .nav a:hover { color: var(--text); } .header__actions { display: flex; align-items: center; gap: 8px; } .theme-toggle, .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .theme-toggle:hover, .nav__toggle:hover { background: var(--surface-2); } .nav__toggle { display: none; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } /* ===== Hero ===== */ .hero { position: relative; overflow: hidden; padding: 76px 0 0; background: linear-gradient(180deg, var(--sky-2) 0%, var(--bg) 70%); } .hero__inner { position: relative; z-index: 3; max-width: 720px; text-align: center; padding-bottom: 40px; } .badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); border: 1px solid var(--ink); color: var(--yellow); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px; margin-bottom: 24px; } .badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: blink 1.2s steps(1) infinite; } @keyframes blink { 50% { opacity: .25; } } .hero h1 { font-size: 56px; line-height: 1.04; font-weight: 700; margin: 0 auto; max-width: 14ch; } .hero .hl { color: var(--orange); position: relative; white-space: nowrap; } .hero .hl::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 12px; background: var(--yellow); opacity: .55; z-index: -1; border-radius: 4px; } .hero__sub { font-size: 19px; color: var(--muted); margin: 24px auto 32px; max-width: 560px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero__note { margin-top: 20px; font-size: 13.5px; color: var(--muted); } .hero__stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .hero__stats > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .hero__stats b { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--orange-d); line-height: 1; } .hero__stats span { font-size: 12.5px; color: var(--muted); } /* ===== Scène chantier ===== */ /* --horizon = hauteur de terre / niveau du sol ; tout s'aligne dessus */ /* clip horizontal de la scène : la pelleteuse/nuages qui roulent jusqu'à left:100% sont coupés aux bords de l'écran. overflow-y reste visible → la grue peut dépasser en haut. */ .scene { position: relative; --horizon: 170px; height: calc(var(--horizon) + 230px); margin-top: 8px; overflow-x: clip; } .ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--horizon); background: linear-gradient(180deg, var(--dirt) 0%, color-mix(in srgb, var(--dirt) 76%, #000) 100%); border-top: 3px solid var(--ink); } .ground::before { content: ''; position: absolute; inset: 0; opacity: .28; background: radial-gradient(circle at 18% 14%, #00000026 0 3px, transparent 4px) 0 0/44px 52px, radial-gradient(circle at 68% 32%, #0000001f 0 2px, transparent 3px) 0 0/58px 66px, radial-gradient(circle at 42% 58%, #0000001a 0 5px, transparent 6px) 0 0/110px 90px; } .scene .hazard { position: absolute; left: 0; right: 0; bottom: var(--horizon); } /* Nuages */ .cloud { position: absolute; top: 0; width: 90px; height: 28px; background: #fff; border-radius: 30px; opacity: .9; box-shadow: 26px 6px 0 -4px #fff, -24px 8px 0 -6px #fff; } [data-theme="dark"] .cloud { background: #2a3645; box-shadow: 26px 6px 0 -4px #2a3645, -24px 8px 0 -6px #2a3645; } .cloud--1 { top: 18px; animation: drift 26s linear infinite; } .cloud--2 { top: 60px; transform: scale(.7); opacity: .7; animation: drift 38s linear infinite; animation-delay: -10s; } .cloud--3 { top: 36px; transform: scale(1.2); opacity: .55; animation: drift 46s linear infinite; animation-delay: -24s; } @keyframes drift { from { left: -140px; } to { left: 100%; } } /* ===== Nuit : lune + lampadaires (mode sombre uniquement) ===== */ .moon, .lamp { display: none; } [data-theme="dark"] .moon { display: block; position: absolute; top: 22px; right: 16%; width: 58px; height: 58px; border-radius: 50%; z-index: 1; background: radial-gradient(circle at 62% 28%, rgba(0,0,0,.05) 0 5px, transparent 6px), radial-gradient(circle at 40% 62%, rgba(0,0,0,.045) 0 7px, transparent 8px), radial-gradient(circle at 38% 35%, #fdf6d8, #ddd8bb); box-shadow: 0 0 26px 8px rgba(253,246,216,.30), 0 0 70px 26px rgba(253,246,216,.10); animation: moonGlow 5s ease-in-out infinite; } @keyframes moonGlow { 0%, 100% { box-shadow: 0 0 26px 8px rgba(253,246,216,.28), 0 0 70px 26px rgba(253,246,216,.10); } 50% { box-shadow: 0 0 32px 11px rgba(253,246,216,.38), 0 0 90px 34px rgba(253,246,216,.14); } } /* clair de lune sur le terrain */ [data-theme="dark"] .ground::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 80% -25%, rgba(220,226,200,.13), transparent 60%); } [data-theme="dark"] .lamp { display: block; position: absolute; bottom: calc(var(--horizon) - 6px); width: 110px; height: 132px; z-index: 1; } .lamp--1 { left: 36%; } .lamp--2 { left: 62%; transform: scaleX(-1); } .lamp__pole { position: absolute; left: 12px; bottom: 0; width: 6px; height: 116px; border-radius: 3px; background: linear-gradient(90deg, #1a1a1a, #3c3c3c, #1a1a1a); } .lamp__arm { position: absolute; top: 4px; left: 14px; width: 52px; height: 20px; border: 4px solid #2e2e2e; border-left: none; border-bottom: none; border-radius: 0 18px 0 0; } .lamp__head { position: absolute; top: 20px; left: 56px; width: 22px; height: 10px; background: #2a2a2a; border-radius: 4px 4px 7px 7px; } .lamp__head::after { content: ''; position: absolute; left: 3px; bottom: -3px; width: 16px; height: 6px; border-radius: 50%; background: #fff3cf; box-shadow: 0 0 14px 5px rgba(255,214,130,.85), 0 0 34px 14px rgba(255,200,110,.35); animation: lampFlicker 4s ease-in-out infinite; } .lamp__beam { position: absolute; top: 28px; left: 36px; width: 64px; height: 104px; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,214,140,.22), rgba(255,214,140,.05) 70%, transparent); filter: blur(1px); } .lamp__pool { position: absolute; bottom: -3px; left: 30px; width: 70px; height: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,130,.45), rgba(255,210,130,.10) 60%, transparent 72%); filter: blur(2px); } @keyframes lampFlicker { 0%, 100%, 42%, 48% { opacity: 1; } 45% { opacity: .82; } 70% { opacity: .94; } } /* Grue à tour */ .crane { position: absolute; right: 2%; bottom: calc(var(--horizon) - 10px); width: 282px; height: auto; z-index: 2; filter: drop-shadow(0 6px 8px rgba(0,0,0,.14)); overflow: visible; } .crane-top { transform-box: view-box; transform-origin: 166px 70px; animation: slew 13s ease-in-out infinite; } @keyframes slew { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } } .crane .trolley { transform-box: view-box; transform-origin: center; animation: trolley 9s ease-in-out infinite; } @keyframes trolley { 0%, 100% { transform: translateX(8px); } 50% { transform: translateX(-104px); } } .crane .load { transform-box: view-box; transform-origin: 272px 68px; animation: sway 3.4s ease-in-out infinite; } @keyframes sway { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } } /* Ouvrier qui prend des notes */ .worker { position: absolute; left: 13%; bottom: calc(var(--horizon) - 12px); width: 88px; height: auto; z-index: 4; overflow: visible; filter: drop-shadow(0 5px 5px rgba(0,0,0,.16)); animation: idle 3.2s ease-in-out infinite; } @keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .worker .writing { transform-box: view-box; transform-origin: 80px 102px; animation: write .7s ease-in-out infinite; } @keyframes write { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(7deg); } } .worker { pointer-events: auto; } /* 👷 Bulle "pub" quand on clique sur l'ouvrier (tous les thèmes) */ .worker-bubble { position: fixed; transform: translateY(6px) scale(.92); transform-origin: var(--tail-x, 50%) bottom; max-width: min(220px, 86vw); text-align: center; background: #fff; color: #15120e; border: 2px solid #15120e; border-radius: 12px; padding: 8px 12px; font-family: var(--font-head); font-size: 13px; font-weight: 600; line-height: 1.25; z-index: 90; box-shadow: 0 6px 16px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .worker-bubble.show { opacity: 1; transform: translateY(0) scale(1); } .worker-bubble::after { content: ''; position: absolute; left: var(--tail-x, 50%); bottom: -9px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #15120e; border-bottom: 0; } .worker-bubble::before { content: ''; position: absolute; left: var(--tail-x, 50%); bottom: -6px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; z-index: 1; } /* Cônes */ .cone { position: absolute; bottom: calc(var(--horizon) - 10px); width: 48px; height: auto; z-index: 2; transform-origin: bottom center; overflow: visible; } .cone--a { left: 8%; animation: wobble 3.6s ease-in-out infinite; } .cone--b { left: 22%; width: 38px; animation: wobble 4.2s ease-in-out infinite; animation-delay: -1.2s; } @keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } /* Pelleteuse sur chenilles */ .digger { position: absolute; bottom: calc(var(--horizon) - 26px); left: -260px; z-index: 5; animation: roll 18s linear infinite; } .digger__svg { display: block; width: 250px; height: auto; filter: drop-shadow(0 7px 7px rgba(0,0,0,.2)); overflow: visible; } @keyframes roll { from { left: -260px; } to { left: 100%; } } .tread { animation: tread .55s linear infinite; } @keyframes tread { to { stroke-dashoffset: -16; } } .sprocket { transform-box: fill-box; transform-origin: center; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .arm { transform-box: view-box; transform-origin: 150px 96px; animation: dig 3s ease-in-out infinite; } @keyframes dig { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(11deg); } 65% { transform: rotate(-5deg); } } .bucket { transform-box: view-box; transform-origin: 208px 102px; animation: curl 3s ease-in-out infinite; } @keyframes curl { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-16deg); } 70% { transform: rotate(7deg); } } .beacon { animation: beacon 1s steps(1) infinite; } @keyframes beacon { 50% { opacity: .2; } } .dust { position: absolute; bottom: 6px; left: 24px; } .dust span { position: absolute; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #d8c7a4; opacity: 0; } .dust span:nth-child(1) { animation: puff 1.4s ease-out infinite; } .dust span:nth-child(2) { animation: puff 1.4s ease-out infinite .45s; } .dust span:nth-child(3) { animation: puff 1.4s ease-out infinite .9s; } @keyframes puff { 0% { opacity: .5; transform: translate(0,0) scale(.5); } 100% { opacity: 0; transform: translate(-26px,-14px) scale(1.6); } } @media (prefers-reduced-motion: reduce) { .topstripe, .hazard, .digger, .tread, .sprocket, .arm, .bucket, .crane-top, .crane .trolley, .crane .load, .worker, .worker .writing, .cloud, .beacon, .badge__dot, .brand__logo, .dust span, .moon, .lamp__head::after { animation: none !important; } .digger { left: 5%; } } /* ===== Bande problème / solution ===== */ .band { background: var(--surface); border-bottom: 1px solid var(--border); padding: 70px 0; } .band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .band__col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; border-left: 6px solid var(--border); } .band__col--ko { border-left-color: var(--ko); } .band__col--ok { border-left-color: var(--ok); } .band__title { font-size: 20px; margin-bottom: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .band__ic { width: 24px; height: 24px; flex-shrink: 0; } .band__title--ko { color: var(--ko); } .band__title--ok { color: var(--ok); } .list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .list li { padding-left: 32px; position: relative; color: var(--text); } .list--ko li::before, .list--ok li::before { position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; } .list--ko li::before { content: '✕'; background: color-mix(in srgb, var(--ko) 12%, transparent); color: var(--ko); } .list--ok li::before { content: '✓'; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } /* ===== Sections ===== */ .section { padding: 96px 0; } .section--alt { background: var(--surface); } .section__head { max-width: 680px; margin: 0 auto 54px; text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--yellow); padding: 6px 14px; border-radius: 8px; margin-bottom: 16px; } .section__title { font-size: 40px; font-weight: 700; line-height: 1.1; } .section__sub { color: var(--muted); font-size: 17px; margin-top: 14px; } /* Fonctionnalités */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .section--alt .feature { background: var(--bg); } .feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--yellow); } .feature__icon { width: 50px; height: 50px; border-radius: 13px; background: var(--yellow-soft); color: var(--orange-d); display: grid; place-items: center; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--yellow) 50%, transparent); } .feature__icon svg { width: 25px; height: 25px; } .feature h4 { font-size: 18.5px; margin-bottom: 8px; font-weight: 600; } .feature p { color: var(--muted); font-size: 15px; } /* Étapes */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; } .section--alt .step { background: var(--bg); } .step__num { width: 54px; height: 54px; border-radius: 14px; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-family: var(--font-head); font-size: 24px; font-weight: 700; margin-bottom: 20px; box-shadow: inset 0 0 0 3px var(--yellow); } .step h4 { font-size: 19px; margin-bottom: 8px; font-weight: 600; } .step p { color: var(--muted); font-size: 15px; } /* ===== Avis clients ===== */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .stars { color: var(--yellow-d); letter-spacing: 3px; font-size: 16px; } .tcard blockquote { font-size: 15.5px; line-height: 1.6; flex: 1; } .tcard figcaption { display: flex; align-items: center; gap: 12px; } .tavatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 18px; flex-shrink: 0; } .tcard figcaption strong { display: block; font-size: 15px; } .tcard figcaption span { font-size: 13px; color: var(--muted); } /* ===== Tarifs ===== */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1020px; margin: 0 auto; align-items: stretch; } .plan { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .plan--featured { border: 3px solid var(--yellow); box-shadow: var(--shadow-md); } .plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--yellow); font-family: var(--font-head); font-weight: 700; font-size: 12.5px; padding: 6px 15px; border-radius: 999px; white-space: nowrap; } .plan__head { text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 24px; } .plan__name { display: inline-block; font-family: var(--font-head); color: var(--muted); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; } .plan__price { margin-top: 14px; } .plan__old { display: block; font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ko); margin-bottom: 2px; } .plan__amount { font-family: var(--font-head); font-size: 54px; font-weight: 700; } .plan__period { color: var(--muted); font-size: 18px; } .plan__promo { display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #fff; background: var(--ko); padding: 3px 10px; border-radius: 999px; } /* ===== Bandeau promo + compte à rebours ===== */ .promo-banner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 14px 22px; margin-bottom: 28px; box-shadow: var(--shadow-sm); } .promo-banner__txt { font-family: var(--font-head); font-weight: 600; font-size: 15px; } .promo-cd { display: flex; gap: 8px; } .promo-cd__box { display: flex; flex-direction: column; align-items: center; background: var(--yellow); color: var(--ink); border-radius: 9px; padding: 5px 9px; min-width: 46px; } .promo-cd__box b { font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .promo-cd__box i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; margin-top: 2px; } .plan__cap { color: var(--muted); font-size: 14px; margin-top: 4px; } .plan__features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; flex: 1; } .plan__features li { padding-left: 30px; position: relative; font-size: 15px; } .plan__features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--orange-d); font-weight: 700; } .pricing__note { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 26px; } /* ===== FAQ ===== */ .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq__item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 22px; transition: border-color .15s ease; } .faq__item[open] { border-color: var(--yellow); } .faq__item summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--orange-d); transition: transform .2s ease; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { padding: 0 0 18px; color: var(--muted); font-size: 15px; } /* ===== CTA inscription ===== */ .cta { padding: 96px 0; } .cta__inner { position: relative; overflow: hidden; text-align: center; max-width: 920px; margin: 0 auto; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 60px 32px 64px; box-shadow: var(--shadow-lg); border: 4px solid var(--yellow); } .cta__inner::before, .cta__inner::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(-45deg, #000 0 18px, var(--yellow) 18px 36px); animation: stripeMove 1.6s linear infinite; opacity: .9; } .cta__inner::before { top: 0; } .cta__inner::after { bottom: 0; } .cta__hat { font-size: 44px; margin-bottom: 8px; animation: hatBob 2.6s ease-in-out infinite; } .cta h2 { font-size: 38px; font-weight: 700; } .cta p { font-size: 17px; color: #c9c1b2; margin-top: 14px; } .signup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px auto 0; max-width: 560px; } .signup input { width: 100%; padding: 15px 18px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 12px; font-size: 15px; font-family: inherit; background: rgba(255, 255, 255, .07); color: #fff; } .signup .btn { grid-column: 1 / -1; } @media (max-width: 480px) { .signup { grid-template-columns: 1fr; } } .signup input::placeholder { color: #9b9384; } .signup input:focus { outline: none; border-color: var(--yellow); background: rgba(255, 255, 255, .12); } .cta__note { margin-top: 20px; font-size: 14px; color: #9b9384; } /* ===== Pages légales ===== */ .legal { max-width: 820px; margin: 0 auto; padding: 60px 24px 90px; } .legal__back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 28px; } .legal__back:hover { color: var(--orange-d); } .legal h1 { font-size: 38px; margin-bottom: 8px; } .legal__updated { color: var(--muted); font-size: 14px; margin-bottom: 36px; } .legal h2 { font-size: 21px; margin: 34px 0 12px; } .legal p, .legal li { color: var(--text); font-size: 15.5px; line-height: 1.7; } .legal ul { padding-left: 22px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; } .legal .todo { background: var(--yellow-soft); border: 1px dashed var(--yellow-d); border-radius: 6px; padding: 1px 7px; font-weight: 600; color: var(--yellow-d); } .legal a { color: var(--orange-d); } /* ===== Pied de page ===== */ .footer { background: var(--bg); } .footer .hazard { animation-duration: 2.2s; } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 40px 0; } .footer__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 24px; } .footer__logo { width: 96px; height: 96px; object-fit: contain; } .footer__nav { display: flex; gap: 26px; } .footer__nav a { color: var(--muted); font-size: 15px; } .footer__nav a:hover { color: var(--orange-d); } .footer__copy { color: var(--muted); font-size: 13.5px; width: 100%; text-align: center; } /* ===== Compteurs (bande sombre) ===== */ .counters { background: var(--ink); padding: 44px 0; } .counters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .counter-item { display: flex; flex-direction: column; gap: 4px; } .counter { font-family: var(--font-head); font-size: 46px; font-weight: 700; color: var(--yellow); line-height: 1; } .counter-label { color: #c9c1b2; font-size: 14px; } /* ===== Aperçu app (cadres téléphone) ===== */ .phones { display: flex; gap: 28px; justify-content: center; align-items: flex-end; flex-wrap: wrap; } .phone-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; } .phone-fig--lift { transform: translateY(-18px); } .phone__label { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); background: var(--yellow); padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap; } .phone { position: relative; width: 230px; background: var(--ink); border-radius: 30px; padding: 12px; box-shadow: var(--shadow-lg); border: 1px solid #000; } .phone--lift { transform: translateY(-18px); } .phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 18px; background: var(--ink); border-radius: 0 0 12px 12px; z-index: 2; } .phone__screen { background: var(--bg); border-radius: 22px; overflow: hidden; line-height: 0; } .phone__shot { display: block; width: 100%; height: auto; } .pscreen__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .pscreen__title { font-family: var(--font-head); font-weight: 700; font-size: 16px; flex: 1; } .pscreen__back { color: var(--muted); font-size: 20px; } .pscreen__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 14px; } .pscreen__avatar--sm { width: 26px; height: 26px; font-size: 12px; } .pscreen__row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .pscreen__row > div { flex: 1; } .pscreen__row strong { display: block; font-size: 13.5px; } .pscreen__row span { font-size: 11.5px; color: var(--muted); } .pchip { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .pchip--ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .pchip--wait { background: var(--yellow-soft); color: var(--yellow-d); } .pchip--todo { background: var(--surface-2); color: var(--muted); } .pscreen__photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; height: 120px; } .pscreen__photos span { border-radius: 9px; background: linear-gradient(135deg, #cdd7ea, #b7c3dc); } .pscreen__photos span:first-child { grid-row: span 2; } [data-theme="dark"] .pscreen__photos span { background: linear-gradient(135deg, #243750, #1a283d); } .pscreen__meta { display: flex; align-items: center; gap: 8px; } .pscreen__meta strong { display: block; font-size: 12.5px; } .pscreen__meta span { font-size: 11px; color: var(--muted); } .pscreen__comment { font-size: 12px; background: var(--surface-2); padding: 8px 10px; border-radius: 10px; color: var(--text); } .pscreen__actions { display: flex; gap: 8px; margin-top: auto; } .pbtn { flex: 1; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; padding: 9px; border-radius: 10px; } .pbtn--ok { background: var(--yellow); color: var(--ink); } .pbtn--ko { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .pscreen__cta { margin-top: auto; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; background: var(--yellow); color: var(--ink); padding: 11px; border-radius: 12px; } .pstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; } .pstat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; } .pstat b { font-family: var(--font-head); font-size: 24px; display: block; } .pstat span { font-size: 11px; color: var(--muted); } .pstat--alert { background: var(--yellow-soft); border-color: var(--yellow); } .pstat--alert b { color: var(--yellow-d); } .phones__note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 28px; } /* ===== Comparatif ===== */ .compare { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .compare__head, .compare__row { display: grid; grid-template-columns: 1fr 110px 110px; align-items: center; } .compare__head { background: var(--surface-2); padding: 16px 22px; } .compare__col { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; } .compare__col--ko { color: var(--muted); } .compare__col--ok { color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .compare__col--ok img { width: 22px; height: 22px; object-fit: contain; } .compare__row { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 14.5px; } .compare__row .cx, .compare__row .cv { text-align: center; font-weight: 700; font-size: 17px; } .compare__row .cx { color: var(--ko); } .compare__row .cv { color: var(--ok); } .compare__row:nth-child(even) { background: color-mix(in srgb, var(--yellow) 5%, transparent); } /* ===== CTA collant (mobile) ===== */ .sticky-cta { display: none; } @media (max-width: 720px) { .sticky-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60; padding: 16px 22px; border-radius: 14px; font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1; background: var(--yellow); color: var(--ink); box-shadow: 0 8px 0 var(--yellow-d), 0 12px 28px rgba(0, 0, 0, .3); transform: translateY(160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .sticky-cta.show { transform: translateY(0); } .sticky-cta:active { transform: translateY(3px); box-shadow: 0 4px 0 var(--yellow-d), 0 8px 18px rgba(0, 0, 0, .3); } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } } /* ===== Apparition au scroll ===== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ===== Responsive ===== */ @media (max-width: 900px) { .hero { padding-top: 58px; } .hero h1 { font-size: 42px; } .scene { --horizon: 150px; } .crane { right: 4%; width: 240px; } .band__grid { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; } .testimonials { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .pricing { grid-template-columns: 1fr; max-width: 420px; } .counters__grid { grid-template-columns: 1fr 1fr; gap: 28px; } .phone--lift, .phone-fig--lift { transform: none; } .compare__head, .compare__row { grid-template-columns: 1fr 64px 64px; padding-left: 16px; padding-right: 16px; } .section { padding: 76px 0; } .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); } .nav.open { display: flex; } .nav a { padding: 14px 24px; } .nav .btn { margin: 8px 24px; } .nav__toggle { display: inline-flex; } } @media (max-width: 540px) { .features { grid-template-columns: 1fr; } .section__title { font-size: 30px; } .hero h1 { font-size: 34px; } .scene { --horizon: 120px; } .crane { display: none; } .worker { left: 6%; } .cta h2 { font-size: 28px; } .cta__inner { padding: 48px 20px 52px; } } /* =================================================================== THÈME ÉVÈNEMENTIEL — COUPE DU MONDE (activé via [data-skin="worldcup"]) Piloté depuis le panel admin (onglet Thème). Pelouse & or, ballon, confettis. =================================================================== */ [data-skin="worldcup"] { --wc-green: #149544; --wc-green-d: #0c6b2f; --wc-gold: #ffcf3f; --wc-gold-d: #c79400; } /* --- Bandeau évènement en haut de page --- */ .wc-banner { position: relative; z-index: 60; background: linear-gradient(90deg, var(--wc-green-d), var(--wc-green) 55%, var(--wc-green-d)); color: #fff; overflow: hidden; } .wc-banner__in { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; font-family: var(--font-head); font-size: 14px; font-weight: 600; text-align: center; } .wc-banner b { color: var(--wc-gold); } .wc-roll { display: inline-block; font-size: 18px; line-height: 1; animation: wcRoll 2.4s linear infinite; } @keyframes wcRoll { to { transform: rotate(360deg); } } .wc-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--wc-gold) 0 14px, transparent 14px 28px); animation: wcSlide 1.1s linear infinite; } @keyframes wcSlide { to { background-position: 28px 0; } } /* --- Accents pelouse & or --- */ [data-skin="worldcup"] .topstripe { background: repeating-linear-gradient(-45deg, var(--wc-green-d) 0 16px, var(--wc-gold) 16px 32px); } [data-skin="worldcup"] .eyebrow { background: var(--wc-green); color: #fff; } [data-skin="worldcup"] .badge { border-color: var(--wc-green); } [data-skin="worldcup"] .badge__dot { background: var(--wc-green); } [data-skin="worldcup"] .hero .hl { color: var(--wc-green-d); } [data-skin="worldcup"] .hero .hl::after { background: linear-gradient(90deg, var(--wc-green), var(--wc-gold)); opacity: .55; } [data-skin="worldcup"] .section__title .hl, [data-skin="worldcup"] .plan--featured { border-color: var(--wc-green); } /* Sol du hero en pelouse rayée de stade */ [data-skin="worldcup"] .ground { background: repeating-linear-gradient(90deg, #1aa64c 0 40px, #16903f 40px 80px); } [data-skin="worldcup"] .ground::before { opacity: .14; } [data-skin="worldcup"] .footer__copy::after { content: " · 🏆 Édition Coupe du Monde"; color: var(--wc-gold-d); font-weight: 600; } /* --- Ballon qui rebondit et traverse la scène du hero --- */ .wc-ball { position: absolute; bottom: var(--horizon); left: 8%; z-index: 4; font-size: 40px; line-height: 1; pointer-events: none; will-change: transform, left; animation: wcAcross 15s linear infinite; } .wc-ball span { display: inline-block; animation: wcBounce 2.4s cubic-bezier(.3,0,.4,1) infinite; } @keyframes wcBounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-130px) rotate(200deg); } } @keyframes wcAcross { 0% { left: 4%; } 100% { left: 90%; } } /* --- Confettis (pluie ponctuelle à l'arrivée) --- */ .wc-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; } .wc-confetti i { position: absolute; top: -18px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; will-change: transform; animation: wcFall linear forwards; } @keyframes wcFall { to { transform: translateY(108vh) rotate(720deg); } } @media (prefers-reduced-motion: reduce) { .wc-roll, .wc-banner::after, .wc-ball, .wc-ball span { animation: none !important; } .wc-confetti { display: none !important; } } /* ========================================================= COUPE DU MONDE — PACKS (terrain · stade · marque · interactions) ========================================================= */ /* ---------- 🥅 Terrain de foot (hero) ---------- */ .wc-pitch { position: absolute; left: 0; right: 0; bottom: 0; height: var(--horizon); width: 100%; z-index: 1; pointer-events: none; } .wc-pitch path, .wc-pitch line, .wc-pitch circle, .wc-pitch ellipse { stroke: rgba(255,255,255,.7); stroke-width: 2; fill: none; } /* Cage de but (SVG injecté) */ .wc-goal { position: absolute; bottom: calc(var(--horizon) - 4px); left: 3%; width: 112px; height: auto; z-index: 1; opacity: .9; pointer-events: none; } .wc-goal .post { stroke: #fff; stroke-width: 4; fill: none; } .wc-goal .net { stroke: rgba(255,255,255,.45); stroke-width: 1; } /* Drapeaux de corner */ .wc-corner { position: absolute; bottom: var(--horizon); width: 3px; height: 48px; background: #f2f2f2; z-index: 2; pointer-events: none; } .wc-corner--l { left: 2.5%; } .wc-corner--r { right: 2.5%; } .wc-corner i { position: absolute; top: 0; left: 3px; width: 24px; height: 15px; background: var(--wc-gold); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: left center; animation: wcWave 1.5s ease-in-out infinite; } @keyframes wcWave { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(.82) skewY(-7deg); } } /* ---------- 🏟️ Ambiance stade ---------- */ /* Banderole de fanions en haut du hero */ .wc-bunting { position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 3; display: flex; justify-content: space-between; pointer-events: none; overflow: hidden; border-top: 2px solid rgba(0,0,0,.1); } .wc-bunting i { width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 20px solid var(--wc-green); transform-origin: top center; animation: wcSway 2.4s ease-in-out infinite; } .wc-bunting i:nth-child(3n+1) { border-top-color: var(--wc-gold); animation-delay: -.4s; } .wc-bunting i:nth-child(3n+2) { border-top-color: #fff; animation-delay: -.8s; } .wc-bunting i:nth-child(3n) { border-top-color: var(--wc-green); animation-delay: -1.2s; } @keyframes wcSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } /* Projecteurs de stade (mode sombre uniquement, remplacent les lampadaires) */ [data-skin="worldcup"] .scene .lamp { display: none; } .wc-floodlight { display: none; position: absolute; bottom: var(--horizon); width: 58px; height: auto; z-index: 1; pointer-events: none; } .wc-floodlight--l { left: 7%; } .wc-floodlight--r { right: 7%; } [data-skin="worldcup"][data-theme="dark"] .wc-floodlight { display: block; } .wc-floodlight .mast { stroke: #2a2a2a; stroke-width: 4; } .wc-floodlight .bank { fill: #20262e; stroke: #11151a; stroke-width: 2; } .wc-floodlight .bulb { fill: #fff6cf; } .wc-floodlight .glow { fill: #fff3b0; opacity: .16; animation: wcFlicker 4s ease-in-out infinite; } @keyframes wcFlicker { 0%, 100% { opacity: .12; } 50% { opacity: .26; } } /* Stats du hero façon panneau d'affichage LED */ [data-skin="worldcup"] .hero__stats > div { background: #11150f; border-color: var(--wc-green); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.18); } [data-skin="worldcup"] .hero__stats b { color: var(--wc-gold); text-shadow: 0 0 8px rgba(255,207,63,.45); } [data-skin="worldcup"] .hero__stats span { color: #c8d6c4; } /* ---------- ✨ Détails de marque ---------- */ .wc-brand-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; background: var(--wc-green); font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.2); animation: wcRoll 5s linear infinite; } [data-skin="worldcup"] .cta__hat svg { display: none; } [data-skin="worldcup"] .cta__hat .wc-trophy { display: block; margin: 0 auto; width: auto; height: 78px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } .wc-stars { letter-spacing: 2px; font-size: 14px; } /* ---------- 🎉 Interactions ---------- */ .wc-kick { position: fixed; z-index: 120; font-size: 30px; line-height: 1; pointer-events: none; will-change: transform; } [data-skin="worldcup"] .btn--primary:hover { animation: wcKickBtn .45s ease; } @keyframes wcKickBtn { 0% { transform: translateY(0); } 30% { transform: translateY(-4px) rotate(-1.5deg); } 60% { transform: translateY(1px); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .wc-corner i, .wc-bunting i, .wc-floodlight .glow, .wc-brand-badge { animation: none !important; } .wc-kick { display: none !important; } [data-skin="worldcup"] .btn--primary:hover { animation: none !important; } } /* =================================================================== THÈME ÉVÈNEMENTIEL — HALLOWEEN (activé via [data-skin="halloween"]) Citrouilles, chauves-souris, toiles d'araignée, lune. Orange & violet. =================================================================== */ [data-skin="halloween"] { --hw-orange: #ff7a18; --hw-orange-d: #d65f00; --hw-purple: #8b3df0; --hw-purple-d: #5b21b6; /* Re-tinte via les variables existantes (clair/sombre conservés) */ --yellow: #ff7a18; --yellow-d: #d65f00; --yellow-soft: #ffe7d3; --orange: #8b3df0; --orange-d: #6d28d9; --bg: #f5f1f8; --surface-2: #efe8f4; --border: #e6dcef; --sky-1: #d9c9ef; --sky-2: #efe7f8; --dirt: #2f2418; } [data-skin="halloween"][data-theme="dark"] { --bg: #0f0a16; --surface: #171022; --surface-2: #1d1430; --border: #2a1f3d; --sky-1: #1a1228; --sky-2: #0f0a16; --dirt: #20180e; } /* --- Accents --- */ [data-skin="halloween"] .topstripe { background: repeating-linear-gradient(-45deg, #1a1a1a 0 16px, var(--hw-orange) 16px 32px); } [data-skin="halloween"] .eyebrow { background: var(--hw-purple); color: #fff; } [data-skin="halloween"] .badge { border-color: var(--hw-orange); } [data-skin="halloween"] .badge__dot { background: var(--hw-orange); } [data-skin="halloween"] .hero .hl { color: var(--hw-orange-d); } [data-skin="halloween"] .hero .hl::after { background: linear-gradient(90deg, var(--hw-orange), var(--hw-purple)); opacity: .5; } [data-skin="halloween"] .ground { background: linear-gradient(180deg, #3a2a18, #221610); } [data-skin="halloween"] .footer__copy::after { content: " · 🎃 Édition Halloween"; color: var(--hw-orange-d); font-weight: 600; } /* --- Bandeau évènement --- */ .hw-banner { position: relative; z-index: 60; background: linear-gradient(90deg, var(--hw-purple-d), var(--hw-orange-d) 55%, var(--hw-purple-d)); color: #fff; overflow: hidden; } .hw-banner__in { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; font-family: var(--font-head); font-size: 14px; font-weight: 600; text-align: center; } .hw-banner b { color: #ffd089; } .hw-bat-emoji { display: inline-block; font-size: 18px; line-height: 1; animation: hwFlap .4s ease-in-out infinite; } .hw-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--hw-orange) 0 14px, transparent 14px 28px); animation: wcSlide 1.1s linear infinite; } @keyframes hwFlap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } } /* --- Toiles d'araignée (coins du hero) --- */ .hw-web { position: absolute; top: 0; width: 130px; height: 130px; z-index: 1; opacity: .5; pointer-events: none; } .hw-web--l { left: 0; } .hw-web--r { right: 0; transform: scaleX(-1); } .hw-web path { fill: none; stroke: rgba(60,45,85,.5); stroke-width: 1; } [data-skin="halloween"][data-theme="dark"] .hw-web path { stroke: rgba(220,210,240,.4); } /* --- Lune (mode sombre) --- */ .hw-moon { display: none; position: absolute; top: 22px; right: 11%; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fff7e0, #f0d480 70%); box-shadow: 0 0 38px rgba(255,228,150,.5); z-index: 0; } [data-skin="halloween"][data-theme="dark"] .hw-moon { display: block; } /* --- Citrouilles au sol --- */ .hw-pumpkin { position: absolute; bottom: calc(var(--horizon) - 6px); z-index: 3; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.25)); animation: hwBob 3s ease-in-out infinite; } .hw-pumpkin--a { left: 11%; font-size: 40px; } .hw-pumpkin--b { right: 16%; font-size: 30px; animation-delay: -1.2s; } @keyframes hwBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } } /* --- Chauves-souris qui volent --- */ .hw-bat { position: absolute; top: 18px; z-index: 4; font-size: 28px; line-height: 1; pointer-events: none; will-change: transform; } .hw-bat span { display: inline-block; animation: hwFlap .35s ease-in-out infinite; } .hw-bat--a { animation: hwFlyA 13s linear infinite; } .hw-bat--b { animation: hwFlyB 17s linear infinite; animation-delay: -4s; font-size: 22px; } .hw-bat--c { animation: hwFlyA 21s linear infinite; animation-delay: -9s; font-size: 20px; top: 64px; } @keyframes hwFlyA { 0% { transform: translate(-12vw, 0); } 50% { transform: translate(50vw, -28px); } 100% { transform: translate(112vw, 0); } } @keyframes hwFlyB { 0% { transform: translate(112vw, 10px); } 50% { transform: translate(50vw, -34px); } 100% { transform: translate(-12vw, 10px); } } /* --- Badge citrouille près du logo --- */ .hw-brand-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; font-size: 18px; line-height: 1; animation: hwBob 3s ease-in-out infinite; } /* --- Casque → citrouille dans l'inscription --- */ [data-skin="halloween"] .cta__hat svg { display: none; } [data-skin="halloween"] .cta__hat::after { content: "🎃"; font-size: 50px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } @media (prefers-reduced-motion: reduce) { .hw-bat-emoji, .hw-bat, .hw-bat span, .hw-pumpkin, .hw-brand-badge, .hw-banner::after { animation: none !important; } } /* =================================================================== THÈME ÉVÈNEMENTIEL — NOËL (activé via [data-skin="noel"]) Neige, guirlande lumineuse, sapin, bonhomme de neige, traîneau. Rouge & vert. =================================================================== */ [data-skin="noel"] { --noel-red: #c4302b; --noel-red-d: #9b1c1c; --noel-green: #1f8a4c; --noel-green-d: #15633a; --noel-gold: #ffcf3f; /* Primaire = ROUGE, fond BLANC (le vert reste sur la déco : sapin, guirlande) */ --yellow: #c4302b; --yellow-d: #9b1c1c; --yellow-soft: #fdeaea; --orange: #9b1c1c; --orange-d: #7a1414; --bg: #fbf7f7; --surface-2: #f6ecec; --border: #ecdede; --sky-1: #e6eef5; --sky-2: #f7fafd; --dirt: #eef2f5; } [data-skin="noel"][data-theme="dark"] { --bg: #160d0d; --surface: #1f1414; --surface-2: #271919; --border: #3a2424; --sky-1: #241620; --sky-2: #160d0d; --dirt: #2a1c1c; } /* --- Accents --- */ [data-skin="noel"] .topstripe { background: repeating-linear-gradient(-45deg, var(--noel-red) 0 16px, #fff 16px 32px); } [data-skin="noel"] .eyebrow { background: var(--noel-red); color: #fff; } [data-skin="noel"] .badge { border-color: var(--noel-red); } [data-skin="noel"] .badge__dot { background: var(--noel-red); } [data-skin="noel"] .hero .hl { color: var(--noel-red-d); } [data-skin="noel"] .hero .hl::after { background: linear-gradient(90deg, var(--noel-red), var(--noel-gold)); opacity: .5; } [data-skin="noel"] .ground { background: linear-gradient(180deg, #ffffff, #e8eef3); border-top-color: #cdd6de; } [data-skin="noel"] .ground::before { opacity: .08; } /* Texture « lune » : petits ronds blanc/gris en relief (cratères) sur la neige */ .noel-ground-dot { position: absolute; border-radius: 50%; pointer-events: none; box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.85), inset -1.5px -1.5px 2px rgba(120,140,165,.5); } [data-skin="noel"][data-theme="dark"] .noel-ground-dot { mix-blend-mode: soft-light; } [data-skin="noel"] .footer__copy::after { content: " · 🎄 Édition Noël"; color: var(--noel-red-d); font-weight: 600; } /* --- Bandeau évènement (liseré sucre d'orge) --- */ .noel-banner { position: relative; z-index: 60; background: linear-gradient(90deg, var(--noel-red-d), var(--noel-red) 55%, var(--noel-red-d)); color: #fff; overflow: hidden; } .noel-banner__in { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; font-family: var(--font-head); font-size: 14px; font-weight: 600; text-align: center; } .noel-banner b { color: var(--noel-gold); } .noel-bell { display: inline-block; font-size: 18px; line-height: 1; transform-origin: top center; animation: noelRing 2s ease-in-out infinite; } .noel-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(45deg, #fff 0 10px, var(--noel-red) 10px 20px); animation: wcSlide 1.1s linear infinite; } @keyframes noelRing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } } /* --- Neige sur toute la page --- */ .noel-snow { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; } .noel-snow i { position: absolute; top: -6%; color: #fff; line-height: 1; text-shadow: 0 0 3px rgba(120,160,200,.5); animation-name: noelFall; animation-timing-function: linear; animation-iteration-count: infinite; } [data-skin="noel"]:not([data-theme="dark"]) .noel-snow i { color: #e8f1fb; text-shadow: 0 0 3px rgba(90,130,170,.55); } /* Petits cercles ronds = texture neigeuse (blanc / gris) */ .noel-snow i.dot { border-radius: 50%; text-shadow: none; box-shadow: 0 0 2px rgba(255,255,255,.45); } @keyframes noelFall { 0% { transform: translateY(-10vh) translateX(0) rotate(0); } 100% { transform: translateY(112vh) translateX(26px) rotate(360deg); } } /* --- Guirlande lumineuse en haut du hero --- */ .noel-lights { position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 3; display: flex; justify-content: space-between; padding: 0 4px; pointer-events: none; border-top: 2px solid rgba(0,0,0,.18); } .noel-lights i { width: 11px; height: 11px; margin-top: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: noelTwinkle 1.8s ease-in-out infinite; } .noel-lights i:nth-child(4n+1) { color: #ff4d4d; } .noel-lights i:nth-child(4n+2) { color: #4dd17a; } .noel-lights i:nth-child(4n+3) { color: var(--noel-gold); animation-delay: -.6s; } .noel-lights i:nth-child(4n) { color: #4da6ff; animation-delay: -1.1s; } @keyframes noelTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* --- Décor de scène : sapin, bonhomme, cadeau, traîneau --- */ .noel-tree, .noel-snowman, .noel-gift { position: absolute; bottom: calc(var(--horizon) - 6px); z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.2)); } .noel-tree { left: 9%; width: 128px; pointer-events: auto; cursor: pointer; transition: transform .15s ease; } .noel-tree:hover { transform: scale(1.06); } .noel-snowman { right: 15%; width: 48px; animation: hwBob 3.4s ease-in-out infinite; } .noel-gift { left: 18%; width: 32px; } /* Easter egg : modale mini-jeu (clic sur le sapin) */ .noel-game { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10,12,20,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .noel-game__card { position: relative; width: min(420px, 100%); text-align: center; padding: 18px 18px 20px; background: var(--surface, #fff); color: var(--text, #1a1a1a); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45); } .noel-game__close { position: absolute; top: 6px; right: 10px; border: 0; background: transparent; cursor: pointer; font-size: 26px; line-height: 1; color: var(--muted, #888); } .noel-game__title { font-family: var(--font-head); margin: 2px 0 10px; font-size: 20px; } .noel-game__hud { display: flex; justify-content: center; gap: 16px; font-size: 14px; margin-bottom: 10px; } .noel-game__canvas { display: block; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 36 / 46; border-radius: 12px; background: #0e1b33; touch-action: none; } .noel-game__hint { font-size: 12px; color: var(--muted, #888); margin: 10px 4px; } .noel-game__start { margin-top: 2px; } /* Pelleteuse remplacée par le traîneau en thème Noël */ [data-skin="noel"] .digger { display: none; } .noel-sleigh-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .noel-sleigh { position: absolute; top: 8%; left: 0; width: 300px; height: auto; z-index: 5; pointer-events: none; will-change: transform; filter: drop-shadow(0 8px 8px rgba(0,0,0,.18)); animation: noelSleighFly 16s linear infinite; } /* Vol dans le ciel : traverse en restant en haut, légère ondulation (jamais jusqu'à la neige) */ @keyframes noelSleighFly { 0% { transform: translate(-360px, 0); } 25% { transform: translate(25vw, -16px); } 50% { transform: translate(50vw, 10px); } 75% { transform: translate(75vw, -12px); } 100% { transform: translate(calc(100vw + 120px), 0); } } /* --- Badge sapin près du logo --- */ .noel-brand-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; line-height: 1; animation: hwBob 3s ease-in-out infinite; } .noel-brand-badge svg { width: 22px; height: auto; } /* --- Casque → Père Noël dans l'inscription --- */ [data-skin="noel"] .cta__hat svg { display: none; } [data-skin="noel"] .cta__hat::after { content: "🎅"; font-size: 50px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); } @media (prefers-reduced-motion: reduce) { .noel-snow { display: none !important; } .noel-bell, .noel-lights i, .noel-snowman, .noel-sleigh, .noel-brand-badge, .noel-banner::after { animation: none !important; } } /* =================================================================== THÈME ÉVÈNEMENTIEL — ÉTÉ (activé via [data-skin="summer"]) Soleil rayonnant, plage (sable), palmiers, parasol, ballon de plage, bulles. =================================================================== */ [data-skin="summer"] { --su-sky: #2bb3e0; --su-sky-d: #1488b5; --su-sun: #ffd23f; --su-coral: #ff6f61; --su-coral-d: #e8533f; --yellow: #ffc01e; --yellow-d: #e09e00; --yellow-soft: #fff3cf; --orange: #ff6f61; --orange-d: #e8533f; --bg: #f2fbff; --surface-2: #e6f5fb; --border: #d2ecf3; --sky-1: #bfe9fb; --sky-2: #eafaff; --dirt: #f3e0a8; } [data-skin="summer"][data-theme="dark"] { --bg: #0c1726; --surface: #10202f; --surface-2: #16293a; --border: #20384c; --sky-1: #13314a; --sky-2: #0c1726; --dirt: #3a2f18; } /* --- Accents soleil & mer --- */ [data-skin="summer"] .topstripe { background: repeating-linear-gradient(-45deg, var(--su-sky) 0 16px, var(--su-sun) 16px 32px); } [data-skin="summer"] .eyebrow { background: var(--su-coral); color: #fff; } [data-skin="summer"] .badge { border-color: var(--su-sky); } [data-skin="summer"] .badge__dot { background: var(--su-coral); } [data-skin="summer"] .hero .hl { color: var(--su-sky-d); } [data-skin="summer"] .hero .hl::after { background: linear-gradient(90deg, var(--su-sky), var(--su-sun)); opacity: .55; } [data-skin="summer"] .ground { background: linear-gradient(180deg, #f7e3b5, #e4c987); border-top-color: #cda95e; } [data-skin="summer"] .footer__copy::after { content: " · ☀️ Édition Été"; color: var(--su-sky-d); font-weight: 600; } /* --- Bandeau --- */ .summer-banner { position: relative; z-index: 60; background: linear-gradient(90deg, var(--su-sky-d), var(--su-sky) 55%, var(--su-sky-d)); color: #fff; overflow: hidden; } .summer-banner__in { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; font-family: var(--font-head); font-size: 14px; font-weight: 600; text-align: center; } .summer-banner b { color: #fff3c4; } .su-sun-emoji { display: inline-block; font-size: 18px; line-height: 1; animation: suSpin 12s linear infinite; } .summer-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--su-sun) 0 14px, transparent 14px 28px); animation: wcSlide 1.1s linear infinite; } @keyframes suSpin { to { transform: rotate(360deg); } } /* --- Soleil rayonnant dans le hero --- */ .summer-sun { position: absolute; top: 16px; right: 8%; width: 88px; height: 88px; z-index: 0; pointer-events: none; } .summer-sun::before { content: ""; position: absolute; inset: -24px; border-radius: 50%; background: repeating-conic-gradient(var(--su-sun) 0deg 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px); mask: radial-gradient(circle, transparent 42px, #000 43px); opacity: .7; animation: suSpin 24s linear infinite; } .summer-sun::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff3b0, var(--su-sun)); box-shadow: 0 0 28px rgba(255,200,60,.6); } /* Pelleteuse remplacée par l'ensemble plage en thème Été */ [data-skin="summer"] .digger { display: none; } /* --- Cocotiers (SVG dessiné) --- */ .summer-palm { position: absolute; bottom: calc(var(--horizon) - 8px); width: 116px; height: auto; z-index: 3; pointer-events: none; transform-origin: bottom center; filter: drop-shadow(0 5px 5px rgba(0,0,0,.18)); animation: suSway 4.2s ease-in-out infinite; } .summer-palm--a { left: 7%; } .summer-palm--b { right: 11%; width: 92px; animation-delay: -1.8s; } .summer-palm .su-trunk { fill: none; stroke: #9c6b3b; stroke-width: 10; stroke-linecap: round; } .summer-palm .su-ring { fill: none; stroke: #7a4f28; stroke-width: 2.4; } .summer-palm .su-coco circle { fill: #7a4f28; stroke: #15120e; stroke-width: 2; } .summer-palm .su-fronds { stroke: #15120e; stroke-width: 2; stroke-linejoin: round; } @keyframes suSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } /* --- Ensemble plage : transat + parasol (au sol) --- */ .summer-beachset { position: absolute; bottom: calc(var(--horizon) - 10px); left: 40%; width: 188px; height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 5px 6px rgba(0,0,0,.18)); } /* --- Mouettes qui planent --- */ .summer-gull { position: absolute; top: 42px; width: 32px; height: auto; z-index: 1; pointer-events: none; } .summer-gull path { fill: none; stroke: #5a6b7a; stroke-width: 2.6; stroke-linecap: round; } [data-skin="summer"][data-theme="dark"] .summer-gull path { stroke: #c3d2de; } .summer-gull .su-wing { transform-box: fill-box; transform-origin: center; animation: suFlap .5s ease-in-out infinite; } .summer-gull--a { animation: suGull 16s linear infinite; } .summer-gull--b { top: 78px; width: 24px; animation: suGull 22s linear infinite; animation-delay: -7s; } @keyframes suFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } } @keyframes suGull { 0% { transform: translate(-14vw, 0); } 50% { transform: translate(50vw, -16px); } 100% { transform: translate(114vw, 0); } } /* --- Vagues animées en bas de page --- */ .summer-waves { position: fixed; left: 0; right: 0; bottom: 0; height: 58px; z-index: 1; pointer-events: none; overflow: hidden; } .summer-waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; } .summer-waves .w1 { fill: rgba(43,179,224,.45); animation: suWave 9s linear infinite; } .summer-waves .w2 { fill: rgba(43,179,224,.28); animation: suWave 14s linear infinite reverse; } @keyframes suWave { to { transform: translateX(-50%); } } /* --- Crabe qui marche --- */ .summer-crab { position: absolute; bottom: calc(var(--horizon) - 14px); width: 52px; height: auto; z-index: 4; pointer-events: none; } .summer-crab--a { animation: suCrab 24s linear infinite; } .summer-crab .su-crab-in { transform-box: fill-box; transform-origin: center bottom; animation: suScuttle .3s ease-in-out infinite; } @keyframes suScuttle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes suCrab { 0% { transform: translateX(-8vw); } 100% { transform: translateX(106vw); } } /* --- Cerf-volant --- */ .summer-kite { position: absolute; top: 10px; left: 16%; width: 62px; height: auto; z-index: 1; pointer-events: none; transform-origin: bottom center; animation: suKite 6s ease-in-out infinite; } @keyframes suKite { 0% { transform: translate(0,0) rotate(-7deg); } 50% { transform: translate(14px,-12px) rotate(7deg); } 100% { transform: translate(0,0) rotate(-7deg); } } /* --- Avion + banderole IDTRAX --- */ .summer-plane { position: absolute; top: 6px; left: 0; width: 250px; height: auto; z-index: 2; pointer-events: none; animation: suPlane 19s linear infinite; } @keyframes suPlane { 0% { transform: translateX(-280px); } 100% { transform: translateX(calc(100vw + 40px)); } } /* --- Ballon de plage qui rebondit --- */ .summer-ball { position: absolute; bottom: var(--horizon); left: 8%; width: 42px; height: 42px; border-radius: 50%; z-index: 4; pointer-events: none; background: conic-gradient(#ff6f61 0 60deg, #fff 60deg 120deg, #2bb3e0 120deg 180deg, #fff 180deg 240deg, #ffd23f 240deg 300deg, #fff 300deg 360deg); box-shadow: inset -6px -6px 10px rgba(0,0,0,.15), 0 4px 6px rgba(0,0,0,.18); animation: wcAcross 15s linear infinite, wcBounce 2.4s cubic-bezier(.3,0,.4,1) infinite; } /* --- Bulles fraîcheur qui montent --- */ .summer-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .summer-bubbles i { position: absolute; bottom: -40px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(150,220,255,.18)); border: 1px solid rgba(255,255,255,.45); animation-name: suRise; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes suRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .7; } 90% { opacity: .5; } 100% { transform: translateY(-112vh) translateX(28px); opacity: 0; } } /* --- Badge soleil près du logo --- */ .summer-brand-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; font-size: 18px; line-height: 1; animation: suSpin 9s linear infinite; } /* --- Casque → lunettes de soleil dans l'inscription --- */ [data-skin="summer"] .cta__hat svg { display: none; } [data-skin="summer"] .cta__hat::after { content: "🕶️"; font-size: 48px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); } @media (prefers-reduced-motion: reduce) { .summer-bubbles { display: none !important; } .summer-crab, .summer-plane { display: none !important; } .su-sun-emoji, .summer-sun::before, .summer-palm, .summer-ball, .summer-brand-badge, .summer-banner::after, .summer-gull, .summer-gull .su-wing, .summer-waves .w1, .summer-waves .w2, .summer-kite { animation: none !important; } }