/* ====== Home v2 (scopé sous .home) ====== */ .home { --acc: #ff2b7a; --surface: rgba(255,255,255,.06); --border: rgba(255,255,255,.12); --card-bg: rgba(14, 16, 24, .60); --muted: rgba(255,255,255,.72); } /* Aurora background (très soft) */ .home-aurora::before { content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; filter: blur(40px) saturate(120%); opacity: .55; background: radial-gradient(40% 35% at 15% 10%, rgba(255, 43, 122, .25), transparent 60%), radial-gradient(35% 35% at 85% 20%, rgba(87, 214, 255, .18), transparent 60%), radial-gradient(45% 45% at 50% 85%, rgba(210, 122, 255, .18), transparent 60%); } html { scroll-behavior: smooth; } /* Cartes “glass” */ .home .card { background: var(--card-bg); border: 1px solid var(--border); backdrop-filter: blur(8px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; } .home .card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.25); border-color: rgba(255,255,255,.18); } /* En-têtes de section */ .home .section-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; } .home .section-header .icon { color: var(--acc); font-size: 1.1rem; } .home .section-caption { margin-top: -.15rem; color: var(--muted); font-size:.9rem; } /* Barre de recherche “pilule” */ .home .search-wrap .form-control { height: 46px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.05); } .home .search-wrap .btn { height: 46px; border-radius: 999px; padding: 0 1.25rem; } /* Feature chips (sécurité / fait main…) */ .home .feature { display:flex; gap:.6rem; align-items:center; padding:.75rem 1rem; border-radius:.5rem; border:1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03); } .home .feature i { color: var(--acc); } /* Cartes catégories */ .home .category-card .list-group-item { background: transparent; border: 1px dashed rgba(255,255,255,.15); display:flex; align-items:center; gap:.5rem; } .home .category-card .list-group-item:hover { background: rgba(255,255,255,.05); } /* Produits */ .home .product-card .card-img-top { aspect-ratio: var(--product-card-ratio, 1); object-fit: contain; object-position: center; background: var(--img-bg, rgba(255,255,255,.06)); } .home .product-card .price { font-weight: 600; color: #fff; } .home .product-card .btn { border-radius: .45rem; } /* Bouton “ghost” générique */ .btn-ghost { background: transparent; border:1px solid rgba(255,255,255,.18); } .btn-ghost:hover { background: rgba(255,255,255,.06); } /* Items catégories cliquables sur la home */ .cat-item { position: relative; } .cat-item:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); } .cat-item .stretched-link { position: absolute; inset: 0; border-radius: inherit; } /* Reveal on scroll */ /* Reveal : visible par défaut si JS ne tourne pas */ .reveal { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; } /* Quand JS est prêt (.js sur ), activer l'animation */ .js .reveal { opacity: 0; transform: translateY(18px); } .js .reveal.reveal-in { opacity: 1; transform: none; } /* [FIX] Cadrage vertical de l'image héros de la home */ :root { /* 0% = haut ; 50% = centré ; 100% = bas. Ajuste pour révéler le bas de l'image (le texte). */ --hero-vfocus: 68%; } .hero.card .hero-illustration { min-height: clamp(260px, 30vw, 380px); display: grid; place-items: center; } .hero.card .hero-illustration .hero-logo { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--hero-vfocus); border-radius: .75rem; } @media (max-width: 991.98px) { :root { --hero-vfocus: 62%; } } /* ===== Hero (image d'accueil) – Paramétrage compact ===== */ :root { /* Focalisation verticale de l'image (conservée) */ --hero-vfocus: 68%; /* 50% = centré ; augmente pour "remonter" l'image */ /* Hauteur du cadre (plus compact qu'avant) */ --hero-min: 220px; /* avant 260px */ --hero-vw: 24vw; /* avant 30vw */ --hero-max: 320px; /* avant 380px */ } .hero.card .hero-illustration { /* hauteur compactée et responsive */ min-height: clamp(var(--hero-min), var(--hero-vw), var(--hero-max)); display: grid; place-items: center; } .hero.card .hero-illustration .hero-logo { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--hero-vfocus); border-radius: .75rem; } /* Ajustements de bornes par taille d'écran */ @media (min-width: 1400px) { :root { --hero-max: 300px; } } @media (max-width: 991.98px) { :root { --hero-min: 200px; --hero-vw: 38vw; --hero-max: 280px; --hero-vfocus: 62%; } } @media (max-width: 575.98px) { :root { --hero-min: 180px; --hero-vw: 45vw; --hero-max: 240px; } } /* Carte Atelier (home) */ .home .atelier-card { display: flex; height: 100%; position: relative; overflow: hidden; margin-top: 1.75rem; border-color: var(--home-outline-strong); background: radial-gradient(70% 90% at 12% 18%, rgba(255, 79, 168, .22), transparent 55%), radial-gradient(40% 40% at 88% 10%, rgba(123, 213, 255, .16), transparent 55%), linear-gradient(160deg, rgba(16, 19, 32, .96), rgba(10, 12, 22, .9)); box-shadow: 0 14px 38px rgba(0, 0, 0, .35); } .home .atelier-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(65% 80% at 80% 85%, rgba(255, 255, 255, .05), transparent 70%); opacity: .7; pointer-events: none; } .home .atelier-card .card-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.85rem 1.2rem; width: 100%; min-height: 100%; } .home .atelier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .home .atelier-eyebrow { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--home-outline); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .home .atelier-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: .85rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--home-outline-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); color: #fff; font-weight: 600; letter-spacing: .04em; } .home .atelier-chip i { color: #ffd6f0; } .home .atelier-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 1rem; align-items: stretch; } .home .atelier-copy { display: flex; flex-direction: column; gap: .55rem; font-size: .95rem; } .home .atelier-lede, .home .atelier-note { margin: 0; line-height: 1.4; } .home .atelier-lede { color: #fff; font-weight: 700; letter-spacing: .005em; font-size: 1.02rem; } .home .atelier-note { color: var(--muted); font-size: .93rem; } .home .atelier-tags { display: flex; flex-wrap: wrap; gap: .5rem; } .home .atelier-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .7rem; border-radius: .85rem; border: 1px solid var(--home-outline); background: rgba(255, 255, 255, .05); color: #fff; font-weight: 600; letter-spacing: .01em; } .home .atelier-tag i { color: var(--acc); } .home .atelier-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--home-outline-strong); background: radial-gradient(120% 65% at 50% 120%, rgba(255, 255, 255, .04), transparent 60%); } .home .atelier-cta-row { display: flex; gap: .7rem; flex-wrap: wrap; } .home .atelier-cta-row .btn { flex: 1 1 0; justify-content: center; border-radius: 1rem; padding: .58rem 1.05rem; box-shadow: 0 10px 26px rgba(0, 0, 0, .24); } .home .atelier-cta-row .btn-primary { border: none; background: linear-gradient(135deg, #ff2b7a, #ff6fb9); color: #0b0d16; font-weight: 700; } .home .atelier-cta-row .btn-ghost { border-color: rgba(255, 255, 255, .22); color: #fff; } .home .atelier-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; } .home .atelier-meta-card { display: flex; gap: .65rem; align-items: flex-start; padding: 1rem 1.05rem; border-radius: 1rem; border: 1px solid var(--home-outline); background: linear-gradient(145deg, rgba(255, 255, 255, .04), transparent), rgba(11, 13, 22, .7); box-shadow: 0 14px 32px rgba(0, 0, 0, .32); font-size: .92rem; } .home .atelier-meta-icon { width: 2.55rem; height: 2.55rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 79, 168, .24), rgba(123, 213, 255, .22)); color: #fff; flex-shrink: 0; box-shadow: 0 8px 18px rgba(10, 12, 22, .4); } .home .atelier-meta-title { font-weight: 700; color: #fff; margin-bottom: .15rem; letter-spacing: .01em; } .home .atelier-meta-desc { color: var(--muted); font-size: .9rem; line-height: 1.35; } @media (max-width: 991.98px) { .home .atelier-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .home .atelier-head { flex-direction: column; align-items: flex-start; } .home .atelier-cta-row .btn { flex-basis: 100%; } } .weekly-spotlight-card { display: flex; flex-direction: column; width: 100%; background: radial-gradient(120% 120% at 10% 12%, rgba(255, 79, 168, 0.16), transparent 65%), radial-gradient(120% 140% at 90% 0%, rgba(123, 213, 255, 0.12), transparent 60%), var(--home-surface, rgba(18, 21, 34, 0.88)); border: 1px solid var(--home-outline-strong, rgba(255, 255, 255, 0.12)); box-shadow: 0 22px 60px rgba(4, 7, 18, 0.55); position: relative; overflow: hidden; } .weekly-spotlight-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)); pointer-events: none; } .weekly-spotlight-card .pill--mini { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--home-outline, rgba(255, 255, 255, 0.08)); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); } .weekly-spotlight-body { gap: 1rem; padding: 1.2rem 1.25rem 1.35rem; } .weekly-spotlight-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .weekly-spotlight-title h2 { margin: 0; line-height: 1.25; max-width: 16ch; word-break: break-word; } .weekly-spotlight-timer { min-width: 120px; text-align: right; line-height: 1.2; } .weekly-spotlight-card .weekly-thumb { margin: 0; border-radius: 1.1rem; overflow: hidden; background: rgba(255, 255, 255, 0.06); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32); aspect-ratio: 4 / 5; max-height: 360px; } .weekly-spotlight-card .weekly-thumb a, .weekly-spotlight-card .weekly-thumb picture { display: block; width: 100%; height: 100%; } .weekly-spotlight-card .weekly-thumb__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: rgba(12, 15, 24, 0.6); } .weekly-spotlight-card .countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: #ffd866; letter-spacing: 0.04em; } .weekly-spotlight-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; } .weekly-spotlight-meta .meta-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.7rem; border-radius: 0.9rem; border: 1px solid var(--home-outline, rgba(255, 255, 255, 0.12)); background: rgba(255, 255, 255, 0.08); font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); } .weekly-spotlight-meta .meta-chip i { color: #ffd866; } .weekly-spotlight-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; } .weekly-price { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1.05rem; border-radius: 1rem; background: radial-gradient(90% 120% at 12% 10%, rgba(255, 214, 102, 0.22), rgba(255, 79, 168, 0.08)), rgba(255, 255, 255, 0.1); border: 1px solid var(--home-outline, rgba(255, 255, 255, 0.16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); color: #fff; } .weekly-price__symbol { font-size: 1rem; opacity: 0.95; transform: translateY(1px); } .weekly-price__value { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.01em; } .btn-weekly { border: none; border-radius: 1rem; padding: 0.6rem 1.2rem; font-weight: 750; color: #0c0f18; background: linear-gradient(135deg, #ffd866, #ff4fa8); box-shadow: 0 14px 32px rgba(255, 79, 168, 0.35); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-weekly:hover, .btn-weekly:focus-visible { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(255, 79, 168, 0.45); color: #0c0f18; } .btn-weekly:focus-visible { outline: 2px solid rgba(255, 79, 168, 0.6); outline-offset: 2px; } @media (max-width: 767.98px) { .weekly-spotlight-card .weekly-thumb { max-height: 320px; } } @media (max-width: 768px) { .weekly-spotlight-top { flex-direction: column; align-items: flex-start; } .weekly-spotlight-timer { text-align: left; } }