/* ========================================================================== Kabacom — Design System (adapté du template de référence design/php) Propriétés logiques (inset-inline-*, margin-inline-*) pour un support RTL/LTR automatique selon l'attribut dir="" posé sur . ========================================================================== */ :root { color-scheme: light; --background: oklch(0.98 0.001 0); --foreground: oklch(0.18 0.001 0); --card: oklch(1 0 0); /* Rose/magenta de la marque (logo) — reste constant en mode sombre : sa luminosité moyenne garde un bon contraste sur fond clair ET sombre. */ --primary: #e0117a; --primary-foreground: #ffffff; --secondary: oklch(0.94 0.02 45); --muted: oklch(0.935 0.001 0); --muted-foreground: oklch(0.5 0.001 0); --accent: #ff4fae; --accent-foreground: #ffffff; --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.91 0.002 0); --input: oklch(0.95 0.002 0); --primary-05: rgb(224 17 122 / 5%); --primary-10: rgb(224 17 122 / 10%); --primary-20: rgb(224 17 122 / 20%); --primary-30: rgb(224 17 122 / 30%); --primary-90: #b80e64; --accent-05: rgb(255 79 174 / 5%); --accent-10: rgb(255 79 174 / 12%); --accent-90: #e8399b; /* Dégradé de marque (logo, mise en avant décorative) */ --brand-gradient: linear-gradient(135deg, #ff7ec6 0%, #e0117a 100%); --brand-dark: #150f1c; /* Palette des catégories/badges (fixe, ne s'inverse pas en mode sombre) */ --blue: #2563eb; --purple: #9333ea; --rose: #e11d48; --orange: #ea580c; --yellow: #ca8a04; --green: #16a34a; --cyan: #0891b2; --indigo: #4f46e5; --pink: #db2777; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --container: 80rem; --header-surface: #fff; --footer-surface: var(--brand-dark); /* Alias conservé pour compatibilité : mêmes usages que --accent. */ --accent-vivid: var(--accent); } /* --------------------------------------------------------------- Dark mode Le noir/blanc s'inverse comme d'habitude ; le rose de marque reste fixe. */ .dark-mode { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --header-surface: oklch(0.19 0 0); --footer-surface: var(--brand-dark); } /* --------------------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; line-height: 1.5; transition: background-color .3s ease, color .3s ease; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul { list-style: none; } svg { flex-shrink: 0; } /* --------------------------------------------------------------- Layout */ .container { max-width: var(--container); margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .container { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .container { padding-inline: 2rem; } } .main { min-height: 100vh; background: var(--background); } .section-header { margin-bottom: 3rem; } .section-header h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; } @media (min-width: 768px) { .section-header h2 { font-size: 2.25rem; } } .section-header p { color: var(--muted-foreground); } .section-rule { width: 3rem; height: 4px; border-radius: 9999px; margin-top: 1rem; background: var(--accent-vivid); } .section-rule--primary { background: var(--primary); } /* --------------------------------------------------------------- Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn--primary { background: var(--primary); color: var(--primary-foreground); } .btn--primary:hover { background: var(--primary-90); } .btn--accent { background: var(--accent); color: var(--accent-foreground); } .btn--accent:hover { background: var(--accent-90); } .btn--outline { border: 1px solid var(--border); background: var(--card); color: var(--foreground); } .btn--outline:hover { background: var(--muted); } .btn--sm { height: 2rem; padding: 0 0.75rem; } .btn--lg { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; } .btn--block { width: 100%; } /* =========================================================== HEADER */ .header { position: sticky; top: 0; z-index: 50; background: var(--header-surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .header__topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; font-size: 0.75rem; color: var(--muted-foreground); border-bottom: 1px solid var(--border); } .header__topbar-left { display: flex; align-items: center; gap: 1rem; } .header__topbar-left a { display: inline-flex; align-items: center; gap: 0.35rem; } .header__topbar-right { display: flex; align-items: center; gap: 0.75rem; } .header__topbar a:hover, .header__lang:hover, .header__account:hover { color: var(--foreground); } .header__lang, .header__account { display: inline-flex; align-items: center; gap: 0.3rem; transition: color .2s; } .header__divider { width: 1px; height: 1rem; background: var(--border); } @media (max-width: 640px) { .header__topbar-left span:nth-child(2) { display: none; } } .header__main { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; } .logo { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; } .logo__badge { width: 2.25rem; height: 2.25rem; border-radius: 0.65rem; background: var(--brand-dark); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .logo__badge span { font-size: 1.2rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo__name { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .search { position: relative; flex: 1; margin-inline: 2rem; display: none; } @media (min-width: 768px) { .search { display: block; } } .search input { width: 100%; padding: 0.75rem 2.75rem 0.75rem 1rem; background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.875rem; } .search input:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-20); } .search__btn { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); transition: color .2s; } .search__btn:hover { color: var(--foreground); } .header__actions { display: flex; align-items: center; gap: 0.4rem; } @media (min-width: 768px) { .header__actions { gap: 0.6rem; } } .header__icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg); color: var(--muted-foreground); transition: background-color .2s, color .2s; } .header__icon-btn:hover { background: var(--muted); color: var(--foreground); } .header__badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--accent); color: #fff; border-radius: 9999px; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .header__burger { display: inline-flex; padding: 0.5rem; border-radius: var(--radius-lg); } .header__burger:hover { background: var(--muted); } @media (min-width: 768px) { .header__burger { display: none; } } .hide-mobile { display: none; } @media (min-width: 640px) { .hide-mobile { display: inline-flex; } } .header__nav { display: none; align-items: center; gap: 0.25rem; padding-bottom: 1rem; overflow-x: auto; } @media (min-width: 768px) { .header__nav { display: flex; } } .header__nav a { padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); border-radius: var(--radius-lg); white-space: nowrap; transition: color .2s, background-color .2s; } .header__nav a:hover, .header__nav a.is-active { color: var(--primary); background: var(--muted); } .header__search-mobile { padding-bottom: 1rem; position: relative; } @media (min-width: 768px) { .header__search-mobile { display: none; } } .header__search-mobile input { width: 100%; padding: 0.5rem 2.5rem 0.5rem 1rem; background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.875rem; } .header__search-mobile input:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-20); } .header__search-mobile button { position: absolute; inset-inline-end: 0.75rem; top: calc(50% - 0.5rem - 8px); color: var(--muted-foreground); } .header__mobile-menu { display: none; flex-direction: column; gap: 0.25rem; padding-bottom: 1rem; } .header__mobile-menu.is-open { display: flex; } @media (min-width: 768px) { .header__mobile-menu.is-open { display: none; } } .header__mobile-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); } .header__mobile-menu a:hover { color: var(--primary); background: var(--muted); } .header__mobile-divider { height: 1px; background: var(--border); margin: 0.5rem 0; } /* Dropdowns (langue / compte) */ .header__dropdown-wrap { position: relative; } .header__dropdown { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 190px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .2s ease; z-index: 20; overflow: hidden; } .header__dropdown-wrap:hover .header__dropdown, .header__dropdown-wrap:focus-within .header__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .header__dropdown a, .header__dropdown button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.65rem 1rem; font-size: 0.85rem; color: var(--foreground); text-align: start; } .header__dropdown a:hover, .header__dropdown button:hover { background: var(--muted); color: var(--primary); } .header__dropdown .is-active { color: var(--primary); font-weight: 600; } .header__dropdown-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--muted); font-size: 0.8rem; } .header__dropdown-header .name { font-weight: 700; } .header__dropdown-header .email { color: var(--muted-foreground); word-break: break-all; } .user-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); } /* =========================================================== HERO */ .hero { position: relative; overflow: hidden; padding: 3rem 0; background: linear-gradient(to bottom right, var(--primary-10), var(--background) 50%, var(--accent-05)); } @media (min-width: 768px) { .hero { padding: 5rem 0; } } .hero__grid { display: grid; gap: 2rem; align-items: center; } @media (min-width: 768px) { .hero__grid { grid-template-columns: 1fr 1fr; } } .hero__content > * + * { margin-top: 1.5rem; } .hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; background: var(--accent-10); color: var(--accent-vivid); border-radius: 9999px; font-size: 0.875rem; font-weight: 500; } .hero__badge span { width: 0.5rem; height: 0.5rem; background: var(--accent-vivid); border-radius: 9999px; } .hero__title { font-size: 2rem; font-weight: 700; line-height: 1.2; } @media (min-width: 768px) { .hero__title { font-size: 2.85rem; } } .hero__title em { font-style: normal; color: var(--primary); } .hero__lead { font-size: 1.05rem; color: var(--muted-foreground); line-height: 1.7; } .hero__cta { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.5rem; } @media (min-width: 640px) { .hero__cta { flex-direction: row; } } .hero__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .hero__badges strong { display: block; font-size: 1.4rem; color: var(--primary); } .hero__badges p { font-size: 0.75rem; color: var(--muted-foreground); } .hero__visual { position: relative; height: 22rem; } .hero__visual-bg { position: absolute; inset: 0; border-radius: var(--radius-2xl); background: linear-gradient(to top right, var(--primary-20), var(--accent-10)); } .hero__visual-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .hero__visual-inner svg { color: var(--primary-30); margin: 0 auto 1rem; } .hero__visual-inner p { color: var(--muted-foreground); } .hero__card { position: absolute; background: var(--card); padding: 1rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .hero__card--tr { top: 2rem; inset-inline-end: -1rem; } .hero__card--bl { bottom: -1rem; inset-inline-start: 1rem; } .hero__card strong { font-size: 1.4rem; color: var(--accent-vivid); } .hero__card p { font-size: 0.75rem; color: var(--muted-foreground); } .hero__card-dot { display: inline-block; width: 0.75rem; height: 0.75rem; background: var(--primary); border-radius: 9999px; margin-inline-end: 0.5rem; vertical-align: middle; } .hero__card-label { font-size: 0.875rem; font-weight: 500; } .hero__blob { position: absolute; width: 22rem; height: 22rem; border-radius: 9999px; filter: blur(64px); z-index: -1; } .hero__blob--1 { top: 0; inset-inline-end: 0; background: var(--primary-05); } .hero__blob--2 { bottom: -8rem; left: 50%; transform: translateX(-50%); background: var(--accent-05); } @media (max-width: 767px) { .hero__grid { text-align: center; } .hero__cta { align-items: stretch; } .hero__badges { max-width: 22rem; margin-inline: auto; } } /* =========================================================== STATS */ .stats { padding: 3rem 0; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } @media (min-width: 768px) { .stats { padding: 4rem 0; } } .stats__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem; border-radius: var(--radius-xl); transition: background-color .2s; } .stat:hover { background: var(--muted); } .stat__icon { width: 3rem; height: 3rem; border-radius: 9999px; background: var(--primary-10); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .stat__number { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; } .stat__label { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; } .stat__desc { font-size: 0.75rem; color: var(--muted-foreground); } /* =========================================================== ADS */ .ads { padding: 1.5rem 0; background: var(--background); } .ads__label { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: .85rem; } .ads__label span { width: 1.5rem; height: 2px; background: var(--accent-vivid); display: inline-block; } .ads__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; } .ads__track::-webkit-scrollbar { height: 6px; } .ads__track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .ads__item { position: relative; flex: 0 0 auto; width: 320px; max-width: 82vw; height: 140px; border-radius: var(--radius-xl); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--border); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease; } .ads__item.is-visible { opacity: 1; transform: translateY(0); } .ads__item:hover { box-shadow: var(--shadow-lg); } .ads__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .ads__item:hover img { transform: scale(1.06); } .ads__badge { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2; background: var(--brand-gradient); color: #fff; font-size: .68rem; font-weight: 700; padding: .2rem .65rem; border-radius: 9999px; } @media (prefers-reduced-motion: reduce) { .ads__item { opacity: 1; transform: none; transition: none; } } /* =========================================================== CATEGORIES */ .categories { padding: 3rem 0; background: var(--background); } @media (min-width: 768px) { .categories { padding: 5rem 0; } } .categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1rem; justify-items: center; } @media (min-width: 640px) { .categories__grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1024px) { .categories__grid { grid-template-columns: repeat(7, 1fr); } } .category { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; text-decoration: none; text-align: center; width: 100%; transition: transform .2s; } .category:hover { transform: translateY(-4px); } .category__icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--cat-color, var(--muted)); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: box-shadow .2s; } .category:hover .category__icon { box-shadow: var(--shadow-lg); } .category__icon svg { transition: transform .2s; } .category:hover .category__icon svg { transform: scale(1.1); } .category__icon img { width: 100%; height: 100%; object-fit: cover; } .category__label { font-size: 0.82rem; font-weight: 600; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .category:hover .category__label { color: var(--accent); } /* =========================================================== PRODUITS */ .deals { padding: 3rem 0; background: var(--card); } @media (min-width: 768px) { .deals { padding: 5rem 0; } } .deals__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; } .deals__head .btn { display: none; } @media (min-width: 768px) { .deals__head .btn { display: inline-flex; } } .deals__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .deals__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .deals__grid { grid-template-columns: repeat(4, 1fr); } } .product { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: box-shadow .3s; display: flex; flex-direction: column; text-decoration: none; color: var(--foreground); } .product:hover { box-shadow: var(--shadow-lg); } .product__media { position: relative; display: block; height: 12rem; background: var(--muted); overflow: hidden; } .product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .product:hover .product__media img { transform: scale(1.1); } .product__badge { position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; padding: 0.25rem 0.75rem; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; } .product__discount { position: absolute; top: 0.75rem; inset-inline-start: 0.75rem; padding: 0.25rem 0.5rem; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: var(--radius-lg); } .product__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; } .product__name { font-weight: 600; font-size: 1rem; color: inherit; text-decoration: none; transition: color .2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product__name:hover { color: var(--primary); } .product__meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--muted-foreground); } .product__meta svg { color: var(--accent-vivid); } .product__price { display: flex; align-items: baseline; gap: 0.5rem; } .product__price-now { font-size: 1.35rem; font-weight: 700; color: var(--accent-vivid); } .product__price-old { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: line-through; } .product__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; } .product__cta { width: 100%; } /* =========================================================== SLIDER PRODUITS (hero plein écran) */ .pslider { position: relative; width: 100%; height: 62vh; min-height: 380px; max-height: 580px; overflow: hidden; background: var(--muted); } .pslider__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; display: flex; align-items: flex-end; } .pslider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .pslider__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pslider__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1) 55%, rgba(0,0,0,.35)); } .pslider__slide-content { position: relative; z-index: 2; width: 100%; padding: 2rem 1.25rem 3rem; color: #fff; } @media (min-width: 768px) { .pslider__slide-content { padding: 3rem 3rem 4rem; } } .pslider__eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-vivid); margin-bottom: .5rem; } .pslider__title { font-size: 1.8rem; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,.45); max-width: 40rem; } @media (min-width: 768px) { .pslider__title { font-size: 3rem; } } .pslider__card { margin-top: 1.25rem; max-width: 26rem; background: var(--card); color: var(--foreground); border-radius: var(--radius-xl); padding: 1rem 1.25rem; box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pslider__card .pslider__price { font-size: 1.3rem; font-weight: 800; color: var(--accent-vivid); } .pslider__card .pslider__price small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted-foreground); } .pslider__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; transition: background-color .2s; } .pslider__arrow:hover { background: #fff; } .pslider__arrow--prev { inset-inline-start: 1rem; } .pslider__arrow--next { inset-inline-end: 1rem; } @media (max-width: 560px) { .pslider__arrow { display: none; } } .pslider__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; } .pslider__dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255,255,255,.5); cursor: pointer; transition: all .2s; border: none; padding: 0; } .pslider__dot.is-active { width: 1.5rem; background: #fff; } /* =========================================================== FOOTER */ .footer { background: var(--footer-surface); color: #fff; } .footer__newsletter { border-bottom: 1px solid rgb(255 255 255 / 0.1); padding: 3rem 0; } .footer__newsletter > div { max-width: 28rem; } .footer__newsletter h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .footer__newsletter p { color: rgb(255 255 255 / 0.8); font-size: 0.875rem; margin-bottom: 1rem; } .footer__form { display: flex; gap: 0.5rem; } .footer__form input { flex: 1; padding: 0.5rem 1rem; border-radius: var(--radius-lg); background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.2); color: #fff; font-size: 0.875rem; } .footer__form input::placeholder { color: rgb(255 255 255 / 0.5); } .footer__form input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-vivid); } .footer__form button { padding: 0.5rem 1rem; background: var(--accent-vivid); color: #fff; border-radius: var(--radius-lg); font-weight: 500; font-size: 0.875rem; transition: background-color .2s; } .footer__form button:hover { background: oklch(0.76 0.143 333); } .footer__grid { padding: 3rem 0; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } } .footer__col > * + * { margin-top: 1rem; } .footer__col h4 { font-weight: 600; margin-bottom: 0.75rem; } .footer__col ul { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.8); } .footer__col a:hover { color: #fff; } .footer__brand { font-size: 1.5rem; font-weight: 700; color: var(--accent-vivid); } .footer__about { color: rgb(255 255 255 / 0.8); font-size: 0.875rem; } .footer__social { display: flex; gap: 0.75rem; } .footer__social a { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.1); display: flex; align-items: center; justify-content: center; transition: background-color .2s; } .footer__social a:hover { background: var(--accent-vivid); } .footer__contact { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; } .footer__contact li { display: flex; align-items: flex-start; gap: 0.75rem; } .footer__contact svg { margin-top: 0.25rem; } .footer__contact span { color: rgb(255 255 255 / 0.8); display: block; } .footer__bottom { border-top: 1px solid rgb(255 255 255 / 0.1); padding: 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.7); } @media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; } } .footer__bottom nav { display: flex; gap: 1rem; } .footer__bottom a:hover { color: #fff; } .back-to-top { position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s ease; z-index: 40; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--accent-90); } body.is-locked { overflow: hidden; } /* =========================================================== INTRO (animation d'entrée) */ .site-intro { position: fixed; inset: 0; z-index: 9999; background: var(--brand-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s linear 0s; } .site-intro.is-hidden { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; pointer-events: none; } .site-intro__badge { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.7); animation: introPop .6s cubic-bezier(.34,1.56,.64,1) .1s forwards; } .site-intro__badge span { font-size: 2.1rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .site-intro__word { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translateY(8px); animation: introRise .5s ease .35s forwards; } @keyframes introPop { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } } @keyframes introRise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .site-intro__badge, .site-intro__word { animation: none; opacity: 1; transform: none; } }