/* ============================================================ LUXURYSTUDIO — Feuille de style principale Univers : noir profond (#090909) + or lumineux (#FFD34D) Un seul fichier CSS pour tout le site : les variables ci-dessous contrôlent les couleurs — les changer met à jour toutes les pages. ============================================================ */ :root { /* --- Palette --- */ --night: #090909; /* noir profond — fond principal */ --coal: #0d0d0f; /* noir charbon — sections alternées */ --anthracite: #16161a; /* gris anthracite — surfaces */ --ivory: #f4f1e8; /* blanc cassé — texte principal */ --mist: #a39f95; /* gris chaud — texte secondaire */ --gold: #ffd34d; /* doré lumineux — accent unique */ --gold-soft: #e8bc4f; --gold-deep: #9a7b2d; /* --- Typographies --- */ --font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; /* --- Ombres premium --- */ --shadow-glow: 0 0 40px rgba(255, 211, 77, 0.14); --shadow-glow-lg: 0 0 90px rgba(255, 211, 77, 0.22); --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.55); /* --- Divers --- */ --radius: 16px; --ease: cubic-bezier(0.21, 0.65, 0.36, 1); } /* ============================================================ BASE — remise à zéro et réglages globaux ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: dark; } body { background: var(--night); color: var(--ivory); font-family: var(--font-body); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, canvas { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; } ::selection { background: rgba(255, 211, 77, 0.25); color: #fff; } /* Barre de défilement élégante */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--night); } ::-webkit-scrollbar-thumb { background: #26262b; border-radius: 8px; border: 2px solid var(--night); } ::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); } /* Contour doré visible à la navigation clavier (accessibilité) */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* Le curseur personnalisé remplace le curseur natif UNIQUEMENT quand script.js l'a créé (il ajoute la classe .custom-cursor sur ). Ainsi, sans JavaScript, le curseur normal reste visible. */ @media (pointer: fine) { body.custom-cursor, body.custom-cursor a, body.custom-cursor button, body.custom-cursor label, body.custom-cursor summary { cursor: none; } } /* Lien d'évitement (accessibilité clavier) */ .skip-link { position: fixed; left: 16px; top: 16px; z-index: 300; background: var(--gold); color: var(--night); padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; transform: translateY(-90px); transition: transform 0.3s; } .skip-link:focus { transform: translateY(0); } /* ============================================================ OUTILS DE MISE EN PAGE ============================================================ */ .container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .container--narrow { max-width: 780px; } .section { position: relative; padding: 96px 0; } .section--coal { background: var(--coal); } /* Filet lumineux doré (séparateur) */ .hairline { height: 1px; border: none; background: linear-gradient(90deg, transparent, rgba(255, 211, 77, 0.5), transparent); } .section--coal > .hairline:first-child { position: absolute; inset: 24px 0 auto 0; top: 0; width: 100%; } /* Grilles responsives */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ============================================================ EFFETS SIGNATURE ============================================================ */ /* Verre fumé premium (glassmorphism) */ .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 211, 77, 0.1); } /* Texte en dégradé doré */ .gold-text { background: linear-gradient(120deg, #f8e3a1 0%, #ffd34d 38%, #c89b3c 72%, #ffd34d 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; } .gold-text--shimmer { animation: shimmer 2.75s linear infinite; } /* Grain photographique (ambiance cinéma) — sur un parent position:relative */ .noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Grille technologique discrète */ .tech-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 211, 77, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 211, 77, 0.04) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%); } /* Orbes lumineux flottants */ .orb { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 211, 77, 0.07); filter: blur(110px); animation: float 12s ease-in-out infinite; } /* Particules dorées (canvas rempli par script.js) */ .particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.04); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes shimmer { from { background-position: 200% center; } to { background-position: -200% center; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fade-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } } @keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } } .anim-pulse { animation: pulse-glow 4.5s ease-in-out infinite; } /* Apparition au défilement : script.js ajoute .visible quand l'élément entre dans l'écran (IntersectionObserver). */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal--scale { transform: scale(0.92); } .reveal.visible { opacity: 1; transform: none; } /* Délais en cascade */ .d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; } .d4 { transition-delay: 0.4s; } /* ============================================================ BOUTONS ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 30px; border-radius: 999px; overflow: hidden; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.03em; background: linear-gradient(135deg, var(--gold), var(--gold-soft) 55%, var(--gold-deep)); color: var(--night); box-shadow: var(--shadow-glow); transition: transform 0.3s, box-shadow 0.3s; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-lg); } .btn:active { transform: translateY(0); } /* Reflet lumineux qui balaie le bouton au survol */ .btn::before { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transition: transform 0.7s ease-out; } .btn:hover::before { transform: translateX(110%); } .btn > * { position: relative; } .btn--lg { padding: 16px 38px; font-size: 16px; } .btn--outline { background: transparent; color: var(--ivory); border: 1px solid rgba(255, 211, 77, 0.35); box-shadow: none; } .btn--outline:hover { border-color: rgba(255, 211, 77, 0.7); background: rgba(255, 211, 77, 0.1); box-shadow: var(--shadow-glow); } .btn--ghost { background: none; box-shadow: none; padding: 6px 8px; color: var(--gold); } .btn--ghost::before { display: none; } .btn--ghost:hover { transform: none; gap: 12px; box-shadow: none; } .icon { width: 1.2em; height: 1.2em; flex: none; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 24px 0; transition: padding 0.4s, background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } .nav.scrolled { padding: 12px 0; background: rgba(9, 9, 9, 0.75); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: rgba(255, 211, 77, 0.1); } .nav__inner { display: flex; align-items: center; justify-content: space-between; } /* Logo : losange doré + nom */ .logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 19px; } .logo__mark { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 15px; } .logo__mark::before { content: ""; position: absolute; inset: 0; border-radius: 6px; border: 1px solid rgba(255, 211, 77, 0.6); background: linear-gradient(135deg, rgba(255, 211, 77, 0.25), transparent); transform: rotate(45deg); transition: transform 0.5s; } .logo:hover .logo__mark::before { transform: rotate(135deg); } .logo__mark span { position: relative; } .nav__links { display: flex; align-items: center; gap: 32px; } .nav__links a { position: relative; font-size: 14px; font-weight: 500; color: rgba(244, 241, 232, 0.8); transition: color 0.3s; } .nav__links a:hover { color: var(--gold); } .nav__links a.active { color: var(--gold); } .nav__links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .nav__discord { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gold); border: 1px solid rgba(255, 211, 77, 0.35); transition: background 0.3s, box-shadow 0.3s; } .nav__discord:hover { background: rgba(255, 211, 77, 0.1); box-shadow: var(--shadow-glow); } /* Bouton burger (mobile) */ .nav__burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 211, 77, 0.25); align-items: center; justify-content: center; } /* Menu mobile plein écran */ .mobile-menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; background: rgba(9, 9, 9, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s; } .mobile-menu.open { opacity: 1; visibility: visible; } .mobile-menu a { font-family: var(--font-display); font-size: 32px; font-weight: 700; padding: 8px 0; transition: color 0.3s; } .mobile-menu a:hover, .mobile-menu a.active { color: var(--gold); } @media (max-width: 992px) { .nav__links, .nav__discord { display: none; } .nav__burger { display: inline-flex; } } /* ============================================================ HERO (accueil) + EN-TÊTES DE PAGES INTERNES ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; } /* Soleil doré à l'horizon */ .hero__sun { position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%); width: 120vw; height: 70vh; border-radius: 100%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 211, 77, 0.22), rgba(255, 180, 60, 0.08) 40%, transparent 70%); } /* Calques d'architecture (parallax géré par script.js) */ .hero__skyline { position: absolute; inset: auto 0 0 0; pointer-events: none; } .hero__skyline--far { opacity: 0.8; filter: blur(2px); } .hero__skyline svg { width: 100%; height: 24vh; } .hero__skyline--far svg { height: 26vh; } /* Vignette cinéma + fondu bas */ .hero__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(9, 9, 9, 0.75) 100%); } .hero__fade { position: absolute; inset: auto 0 0 0; height: 130px; pointer-events: none; background: linear-gradient(to top, var(--night), transparent); } .hero__content { position: relative; z-index: 2; max-width: 880px; padding: 140px 24px 80px; } /* Logo losange animé à l'entrée */ .hero__mark { position: relative; width: 64px; height: 64px; margin: 0 auto 32px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 24px; animation: fade-up 0.9s var(--ease) both; } .hero__mark::before { content: ""; position: absolute; inset: 4px; border-radius: 10px; border: 1px solid rgba(255, 211, 77, 0.7); background: linear-gradient(135deg, rgba(255, 211, 77, 0.2), transparent); transform: rotate(45deg); box-shadow: var(--shadow-glow); } .hero__mark span { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); } .eyebrow::before, .eyebrow::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 211, 77, 0.5), transparent); } .eyebrow--left::after { display: none; } .hero .eyebrow { animation: fade-up 0.7s var(--ease) 0.25s both; } .hero__title { margin-top: 22px; font-size: clamp(3.4rem, 10vw, 7rem); letter-spacing: -0.02em; line-height: 1; animation: fade-up 1s var(--ease) 0.4s both; } .hero__subtitle { max-width: 640px; margin: 30px auto 0; color: var(--mist); font-size: clamp(1rem, 2vw, 1.25rem); animation: fade-up 0.8s var(--ease) 0.6s both; } .hero__subtitle strong { color: var(--ivory); font-weight: 500; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; animation: fade-up 0.7s var(--ease) 0.8s both; } /* Indicateur de défilement (souris) */ .hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; width: 24px; height: 40px; border: 1px solid rgba(255, 211, 77, 0.4); border-radius: 999px; display: flex; justify-content: center; padding-top: 6px; animation: fade-up 0.8s var(--ease) 1.1s both; } .hero__scroll span { width: 4px; height: 8px; border-radius: 999px; background: var(--gold); animation: scroll-dot 1.8s ease-in-out infinite; } /* En-tête des pages internes */ .page-header { position: relative; overflow: hidden; padding: 170px 0 70px; text-align: center; } .page-header h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-top: 20px; } .page-header p { max-width: 640px; margin: 24px auto 0; color: var(--mist); font-size: 17px; } .page-header .eyebrow { animation: fade-up 0.7s var(--ease) both; } .page-header h1 { animation: fade-up 0.9s var(--ease) 0.15s both; } .page-header p { animation: fade-up 0.8s var(--ease) 0.3s both; } .page-header__halo { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 90vw; height: 60vh; border-radius: 100%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 211, 77, 0.12), transparent 65%); } /* ============================================================ EN-TÊTES DE SECTION ============================================================ */ .section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; } .section-head--left { margin-inline: 0; text-align: left; } .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-top: 18px; } .section-head p { margin-top: 18px; color: var(--mist); font-size: 17px; } /* ============================================================ CARTES ============================================================ */ .card { position: relative; overflow: hidden; border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 211, 77, 0.1); box-shadow: var(--shadow-card); padding: 28px; transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s; } .card:hover { transform: translateY(-6px); border-color: rgba(255, 211, 77, 0.3); box-shadow: var(--shadow-glow); } .card--static:hover { transform: none; } .card--flush { padding: 0; } /* Halo doré qui suit la souris dans la carte (script.js règle --mx/--my) */ .card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 211, 77, 0.08), transparent 65%); } .card:hover::before { opacity: 1; } .card > * { position: relative; } /* Icône de carte dans un carré doré */ .card__icon { width: 52px; height: 52px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--gold); border: 1px solid rgba(255, 211, 77, 0.25); background: linear-gradient(135deg, rgba(255, 211, 77, 0.15), transparent); } .card__icon .icon { width: 26px; height: 26px; } .card h3 { font-size: 19px; } .card p { margin-top: 10px; color: var(--mist); font-size: 14.5px; } /* Bandeau visuel des cartes projet/produit (dégradé + icône) */ .card__visual { position: relative; height: 176px; margin: -28px -28px 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--anthracite), var(--coal) 55%, var(--night)); overflow: hidden; } .card--flush .card__visual { margin: 0; } .card__visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255, 211, 77, 0.16), transparent 55%); } .card__visual .icon { width: 56px; height: 56px; color: rgba(255, 211, 77, 0.7); transition: transform 0.7s var(--ease); } .card:hover .card__visual .icon { transform: scale(1.12); } /* Étiquettes */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--mist); } .badge--gold { border-color: rgba(255, 211, 77, 0.3); background: rgba(255, 211, 77, 0.1); color: var(--gold); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } /* Lien doré en bas de carte */ .card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--gold); font-weight: 600; font-size: 14px; } /* ============================================================ STATISTIQUES (compteurs animés) ============================================================ */ .stats-panel { position: relative; overflow: hidden; border-radius: 24px; padding: 48px 40px; } .stats-panel::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 66%; height: 160px; border-radius: 50%; background: rgba(255, 211, 77, 0.1); filter: blur(90px); pointer-events: none; } .stats-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; text-align: center; } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); } .stat__label { margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mist); } /* ============================================================ LISTE NUMÉROTÉE (pourquoi nous / méthode de travail) ============================================================ */ .reason { border-top: 1px solid rgba(255, 211, 77, 0.15); padding-top: 22px; transition: border-color 0.5s; } .reason:hover { border-color: rgba(255, 211, 77, 0.5); } .reason__num { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.2em; color: rgba(255, 211, 77, 0.6); } .reason h3 { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 18px; } .reason h3 .icon { color: var(--gold); margin-top: 4px; flex: none; } .reason p { margin-top: 10px; color: var(--mist); font-size: 14.5px; } /* ============================================================ AVIS CLIENTS (défilé continu) ============================================================ */ .marquee { position: relative; overflow: hidden; padding: 8px 0; } .marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .marquee::before { left: 0; background: linear-gradient(90deg, var(--night), transparent); } .marquee::after { right: 0; background: linear-gradient(-90deg, var(--night), transparent); } .marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .review { width: 360px; flex: none; margin: 0 12px; padding: 24px; border-radius: var(--radius); display: flex; flex-direction: column; } .review__head { display: flex; align-items: center; justify-content: space-between; } .review__stars { display: flex; gap: 3px; color: var(--gold); } .review__stars .icon { width: 15px; height: 15px; } .review blockquote { margin-top: 14px; font-size: 14.5px; color: rgba(244, 241, 232, 0.9); flex: 1; } .review footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .review footer strong { font-family: var(--font-display); font-size: 14px; } .review footer span { display: block; font-size: 12px; color: var(--mist); } /* ============================================================ ACCORDÉON (FAQ) ============================================================ */ .accordion { display: flex; flex-direction: column; gap: 16px; } .acc-item { border-radius: var(--radius); overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s; } .acc-item.open { border-color: rgba(255, 211, 77, 0.3); box-shadow: var(--shadow-glow); } .acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 16px; } .acc-btn__chevron { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 211, 77, 0.25); color: var(--gold); transition: transform 0.4s, background 0.4s; } .acc-item.open .acc-btn__chevron { transform: rotate(180deg); background: rgba(255, 211, 77, 0.1); } /* Le panneau se déplie en douceur (hauteur animée par script.js) */ .acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); } .acc-panel p { padding: 0 24px 22px; color: var(--mist); font-size: 15px; } /* ============================================================ PANNEAU D'APPEL À L'ACTION (CTA) ============================================================ */ .cta-panel { position: relative; overflow: hidden; text-align: center; border-radius: 32px; border: 1px solid rgba(255, 211, 77, 0.2); background: linear-gradient(to bottom, var(--anthracite), var(--coal)); box-shadow: var(--shadow-glow); padding: 72px 40px; } .cta-panel::before { content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 80%; height: 120%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 211, 77, 0.14), transparent 60%); } .cta-panel > * { position: relative; } .cta-panel h2 { max-width: 640px; margin: 20px auto 0; font-size: clamp(1.9rem, 4vw, 2.9rem); } .cta-panel p { max-width: 520px; margin: 18px auto 0; color: var(--mist); font-size: 17px; } .cta-panel .hero__actions { margin-top: 36px; animation: none; } /* ============================================================ FORMULAIRES (contact, recherche boutique) ============================================================ */ .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .field label { font-size: 14px; font-weight: 600; font-family: var(--font-display); } .input, .select, .textarea { width: 100%; padding: 13px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ivory); font: inherit; font-size: 15px; transition: border-color 0.3s, box-shadow 0.3s; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: rgba(255, 211, 77, 0.6); box-shadow: var(--shadow-glow); } .input::placeholder, .textarea::placeholder { color: rgba(163, 159, 149, 0.6); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffd34d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .select option { background: var(--anthracite); color: var(--ivory); } .textarea { min-height: 150px; resize: vertical; } /* Message de succès du formulaire */ .form-success { text-align: center; padding: 48px 24px; } .form-success .icon { width: 52px; height: 52px; color: var(--gold); margin: 0 auto 20px; } /* ============================================================ FILTRES / RECHERCHE (projets, boutique) ============================================================ */ .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .chip { padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--mist); transition: all 0.3s; } .chip:hover { border-color: rgba(255, 211, 77, 0.4); color: var(--ivory); } .chip.active { border-color: rgba(255, 211, 77, 0.6); background: rgba(255, 211, 77, 0.12); color: var(--gold); box-shadow: var(--shadow-glow); } .search-bar { position: relative; max-width: 440px; margin-inline: auto; } .search-bar .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gold); width: 18px; height: 18px; } .search-bar .input { padding-left: 46px; border-radius: 999px; } .results-count { text-align: center; margin-top: 18px; font-size: 14px; color: var(--mist); } .empty-state { text-align: center; padding: 60px 24px; color: var(--mist); } .empty-state .icon { width: 44px; height: 44px; margin: 0 auto 16px; color: rgba(255, 211, 77, 0.5); } /* Masquer un élément filtré */ .hidden { display: none !important; } /* Prix produit */ .price { font-family: var(--font-display); font-weight: 700; font-size: 22px; } .price--free { color: var(--gold); } /* Ruban « Populaire » */ .ribbon { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--night); box-shadow: var(--shadow-glow); } /* ============================================================ TIMELINE (page À propos) ============================================================ */ .timeline { position: relative; padding-left: 34px; } .timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255, 211, 77, 0.5), transparent); } .timeline__item { position: relative; padding-bottom: 40px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ""; position: absolute; left: -30px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(255, 211, 77, 0.8); } .timeline__date { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 14px; letter-spacing: 0.1em; } .timeline__item h3 { margin-top: 6px; font-size: 19px; } .timeline__item p { margin-top: 8px; color: var(--mist); font-size: 15px; } /* ============================================================ ÉQUIPE ============================================================ */ .avatar { position: relative; width: 72px; height: 72px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--gold); } .avatar::before { content: ""; position: absolute; inset: 4px; border-radius: 12px; border: 1px solid rgba(255, 211, 77, 0.6); background: linear-gradient(135deg, rgba(255, 211, 77, 0.2), transparent); transform: rotate(45deg); } .avatar span { position: relative; } .socials { display: flex; gap: 10px; margin-top: 18px; } .social-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--mist); transition: all 0.3s; } .social-btn:hover { border-color: rgba(255, 211, 77, 0.5); color: var(--gold); box-shadow: var(--shadow-glow); } .social-btn .icon { width: 16px; height: 16px; } /* Carte recrutement (bordure pointillée dorée) */ .card--recruit { border: 1px dashed rgba(255, 211, 77, 0.4); background: rgba(255, 211, 77, 0.03); } /* ============================================================ PIED DE PAGE ============================================================ */ .footer { position: relative; margin-top: 96px; background: var(--coal); } .footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; padding: 64px 0; } @media (max-width: 992px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } .footer h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .footer ul { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; } .footer ul a { color: var(--mist); transition: color 0.3s; } .footer ul a:hover { color: var(--gold); } .footer__brand p { margin-top: 16px; font-size: 14px; color: var(--mist); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 22px 0; } .footer__bottom .container { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(163, 159, 149, 0.6); } /* ============================================================ CURSEUR PERSONNALISÉ (éléments créés par script.js) ============================================================ */ .cursor-dot, .cursor-ring, .cursor-glow { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; z-index: 200; } .cursor-dot { width: 6px; height: 6px; background: var(--gold); box-shadow: var(--shadow-glow); } .cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(255, 211, 77, 0.5); opacity: 0.55; transition: width 0.25s, height 0.25s, opacity 0.25s; } .cursor-ring.hover { width: 58px; height: 58px; opacity: 0.9; } .cursor-glow { width: 560px; height: 560px; z-index: 90; background: radial-gradient(circle, rgba(255, 211, 77, 0.045), transparent 65%); } @media (pointer: coarse) { .cursor-dot, .cursor-ring, .cursor-glow { display: none; } } /* ============================================================ ACCESSIBILITÉ — réduire les animations si demandé ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .marquee__track { animation: none; flex-wrap: wrap; } .cursor-dot, .cursor-ring, .cursor-glow { display: none; } }