/* ========================================================================== DAMA — Design tokens Palette d'inspiration marocaine : indigo de Fès, plâtre, laiton, henné. ========================================================================== */ :root{ --c-plaster: #FAF6EF; --c-plaster-dim: #F0E9DC; --c-ink: #221F1A; --c-indigo: #1B2A4A; --c-indigo-dim: #2C3E63; --c-brass: #C08A28; --c-brass-soft: #E4C170; --c-henna: #7A2E2E; --c-line: rgba(34,31,26,0.12); --f-display: "Fraunces", "Iowan Old Style", serif; --f-body: "General Sans", "Inter", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 2px; --gap: clamp(1rem, 2vw, 2rem); --container: 1240px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* ---------- Thème alternatif : Rose & Beige ---------- Activé en ajoutant la classe .theme-rose sur (piloté depuis l'admin > Paramètres). Comme tous les composants utilisent déjà les variables CSS ci-dessus, changer ces valeurs suffit à retheme tout le site sans toucher au reste du fichier. */ body.theme-rose{ --c-plaster: #FBF3EF; --c-plaster-dim: #F3E1DA; --c-ink: #3A2A2E; --c-indigo: #B85C7A; --c-indigo-dim: #9A4A65; --c-brass: #D9A46E; --c-brass-soft: #EAC79A; --c-henna: #A8677C; --c-line: rgba(184,92,122,0.16); } /* ---------- Bannière promo ---------- */ .promo-banner{ background:var(--c-indigo); color:#fff; text-align:center; font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.04em; padding:0.55rem 1rem; } body.theme-rose .promo-banner{ background:var(--c-henna); } /* Le thème Rose & Beige adoucit aussi les formes : coins arrondis sur les visuels produits, pensé pour une clientèle féminine. */ body.theme-rose .product-card .thumb, body.theme-rose .cat-card, body.theme-rose .hero-visual, body.theme-rose .viewer-wrap, body.theme-rose .pd-thumb, body.theme-rose .img-drop, body.theme-rose .btn, body.theme-rose .swatch, body.theme-rose .size-box{ border-radius:14px; } body.theme-rose .pd-thumb{ border-radius:10px; } body.theme-rose .btn{ border-radius:99px; } body{ margin:0; background:var(--c-plaster); color:var(--c-ink); font-family:var(--f-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } .container{ max-width:var(--container); margin:0 auto; padding:0 clamp(1rem,4vw,3rem); } /* ---------- Motif Zellige (élément signature) ---------- Un motif géométrique répété, utilisé comme diviseur / fond de socle 3D / état de chargement — jamais comme simple décoration. */ .zellige-divider{ height:14px; background-image: linear-gradient(45deg, var(--c-brass) 25%, transparent 25%), linear-gradient(-45deg, var(--c-brass) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--c-brass) 75%), linear-gradient(-45deg, transparent 75%, var(--c-brass) 75%); background-size:14px 14px; background-position:0 0, 0 7px, 7px -7px, -7px 0px; opacity:0.55; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:var(--c-plaster); border-bottom:1px solid var(--c-line); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; height:88px; } .logo{ font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:0.01em; color:var(--c-indigo); display:flex; align-items:center; gap:0.6rem; } .logo span{ color:var(--c-brass); } .logo-mark{ width:22px; height:22px; flex-shrink:0; color:var(--c-brass); display:block; } .logo-mark svg{ width:100%; height:100%; } .logo-mark img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center; display:block; } .nav-links{ display:flex; align-items:center; gap:2rem; font-size:0.92rem; letter-spacing:0.02em; } .nav-links a{ position:relative; padding:0.25rem 0; } /* Le span injecté par JS (data-nav-categories) ne doit pas créer sa propre boîte flex : avec display:contents, ses enfants deviennent des éléments directs de .nav-links et héritent du gap — sinon les liens de catégories se retrouvent collés les uns aux autres. */ .nav-links [data-nav-categories]{ display:contents; } .nav-links a:hover{ color:var(--c-brass); } .nav-links a.nav-promo{ color:var(--c-henna); font-weight:600; } .nav-links a.nav-promo:hover{ color:var(--c-brass); } .promo-hero{ padding:3rem 0 1rem; } .nav-actions{ display:flex; align-items:center; gap:1.25rem; } .icon-btn{ background:none; border:none; font-size:1.1rem; color:var(--c-indigo); } .cart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; background:var(--c-henna); color:#fff; border-radius:50%; font-family:var(--f-mono); font-size:0.65rem; margin-left:4px; } /* ---------- Hero plein cadre (image/vidéo de fond sur toute la largeur) ---------- */ .hero-full{ position:relative; overflow:hidden; min-height:min(88vh, 780px); display:flex; align-items:flex-end; color:#fff; background:var(--c-indigo); } .hero-full .hero-media{ position:absolute; inset:0; } .hero-full .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; } .hero-full .hero-slide.active{ opacity:1; } .hero-full video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-full .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0.15) 100%); } .hero-full:not(.has-media) .hero-media{ background-image: linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.06) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.06) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.06) 75%); background-size:64px 64px; } .hero-full-content{ position:relative; z-index:2; width:100%; padding:4rem clamp(1rem,4vw,3rem) 3.5rem; max-width:var(--container); margin:0 auto; } .hero-full .hero-eyebrow{ color:var(--c-brass-soft); } .hero-full h1{ font-family:var(--f-display); font-weight:600; color:#fff; font-size:clamp(2.4rem, 5.4vw, 4.2rem); line-height:1.03; margin:0.6rem 0 1.1rem; max-width:16ch; } .hero-full p{ max-width:44ch; color:rgba(255,255,255,0.86); font-size:1.05rem; margin:0 0 1.75rem; } /* ---------- Ancien hero (deux colonnes) — conservé pour compat CSS ---------- */ .hero{ padding:5rem 0 3rem; display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--gap); align-items:center; } .hero-eyebrow{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-henna); } .hero h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.02; margin:0.6rem 0 1.2rem; color:var(--c-indigo); } .hero p{ max-width:42ch; color:#4a463d; font-size:1.05rem; } .hero-visual{ aspect-ratio:4/5; background:var(--c-plaster-dim); border:1px solid var(--c-line); position:relative; overflow:hidden; } .hero-visual::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(45deg, var(--c-indigo) 25%, transparent 25%), linear-gradient(-45deg, var(--c-indigo) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--c-indigo) 75%), linear-gradient(-45deg, transparent 75%, var(--c-indigo) 75%); background-size:64px 64px; opacity:0.06; } .hero-visual.has-media::after{ display:none; } .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease; } .hero-slide.active{ opacity:1; } .hero-visual video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ---------- Boutons ---------- */ .btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.85rem 1.6rem; border:1px solid var(--c-indigo); background:var(--c-indigo); color:#fff; font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; border-radius:var(--radius); transition:transform 0.15s ease, background 0.15s ease; } .btn:hover{ background:var(--c-indigo-dim); } .btn:active{ transform:translateY(1px); } .btn-outline{ background:transparent; color:var(--c-indigo); } .btn-outline:hover{ background:var(--c-indigo); color:#fff; } .btn-brass{ background:var(--c-brass); border-color:var(--c-brass); color:#221F1A; } .btn-brass:hover{ background:var(--c-brass-soft); } .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--c-brass); outline-offset:2px; } /* ---------- Grille catégories ---------- */ .section-title{ font-family:var(--f-display); font-size:1.8rem; color:var(--c-indigo); margin:0 0 0.3rem; } .section-sub{ color:#6b6558; font-size:0.95rem; margin-bottom:2rem; } .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-line); border:1px solid var(--c-line); } .cat-card{ background:var(--c-plaster); padding:2.5rem 1.5rem; text-align:left; transition:background 0.2s ease; background-size:cover; background-position:center; } .cat-card:hover{ background-color:var(--c-plaster-dim); } .cat-card .num{ font-family:var(--f-mono); font-size:0.75rem; color:var(--c-brass); } .cat-card h3{ font-family:var(--f-display); font-size:1.3rem; margin:0.6rem 0 0.3rem; display:flex; align-items:center; gap:0.5rem; } .cat-card h3 i{ font-size:0.95rem; color:var(--c-brass); } .cat-card p{ font-size:0.85rem; color:#6b6558; margin:0; } /* ---------- Fil d'ariane ---------- */ .breadcrumb{ padding:1.5rem 0 0; font-size:0.8rem; color:#6b6558; } .breadcrumb a:hover{ color:var(--c-brass); } .breadcrumb span{ margin:0 0.35rem; } /* ---------- Grille produits ---------- */ .filters-bar{ display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--c-line); margin-bottom:2rem; } .filters-bar select, .filters-bar input{ padding:0.5rem 0.75rem; border:1px solid var(--c-line); background:#fff; font-family:var(--f-body); font-size:0.85rem; border-radius:var(--radius); } .product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap); } .product-card{ display:block; } .product-card .thumb{ aspect-ratio:3/4; background:var(--c-plaster-dim); border:1px solid var(--c-line); position:relative; overflow:hidden; margin-bottom:0.75rem; } .product-card .thumb img{ width:100%; height:100%; object-fit:cover; } .product-card .tag{ position:absolute; top:0.6rem; left:0.6rem; background:var(--c-henna); color:#fff; font-family:var(--f-mono); font-size:0.65rem; padding:0.2rem 0.5rem; text-transform:uppercase; } .product-card h4{ font-size:0.95rem; margin:0 0 0.2rem; font-weight:500; } .product-card .price{ font-family:var(--f-mono); color:var(--c-brass); font-size:0.9rem; } .price-old{ color:#a39a89; text-decoration:line-through; font-size:0.8rem; margin-left:0.3rem; } /* ---------- Fiche produit / visionneuse 3D ---------- */ .product-detail{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; padding:3rem 0; } .viewer-wrap{ background:var(--c-plaster-dim); border:1px solid var(--c-line); padding:2rem; position:relative; } .viewer-wrap .zellige-divider{ position:absolute; bottom:0; left:0; right:0; } model-viewer{ width:100%; height:460px; --poster-color:transparent; } .pd-badge{ position:absolute; top:1rem; left:1rem; z-index:2; background:var(--c-henna); color:#fff; font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; padding:0.3rem 0.7rem; border-radius:99px; } .pd-thumbs{ gap:0.6rem; margin-bottom:1rem; flex-wrap:wrap; } .pd-thumb{ width:64px; height:64px; padding:0; border:1px solid var(--c-line); background:var(--c-plaster-dim); overflow:hidden; cursor:pointer; } .pd-thumb img, .pd-thumb video{ width:100%; height:100%; object-fit:cover; } .pd-thumb.active{ border-color:var(--c-brass); border-width:2px; } .pd-thumb-video{ position:relative; } .pd-thumb-video::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%); border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6)); pointer-events:none; } .pd-info h1{ font-family:var(--f-display); font-size:2.1rem; margin:0 0 0.4rem; } .pd-price{ font-family:var(--f-mono); font-size:1.3rem; color:var(--c-brass); margin-bottom:1.5rem; display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap; } .pd-price-old{ font-size:0.95rem; color:#a39a89; text-decoration:line-through; } .pd-price-pct{ font-family:var(--f-body); font-size:0.7rem; text-transform:uppercase; background:var(--c-henna); color:#fff; padding:0.15rem 0.5rem; border-radius:99px; } .pd-details{ margin-top:2rem; border-top:1px solid var(--c-line); padding-top:1.5rem; } .pd-details h3{ font-family:var(--f-display); font-size:1.1rem; margin:0 0 0.8rem; color:var(--c-indigo); } .pd-details table{ width:100%; border-collapse:collapse; font-size:0.88rem; } .pd-details th, .pd-details td{ text-align:left; padding:0.55rem 0; border-bottom:1px solid var(--c-line); } .pd-details th{ width:38%; font-weight:500; color:#6b6558; } .opt-group{ margin-bottom:1.5rem; } .opt-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:#6b6558; margin-bottom:0.5rem; display:block; } .opt-swatches{ display:flex; gap:0.5rem; flex-wrap:wrap; } .swatch, .size-box{ border:1px solid var(--c-line); background:#fff; padding:0.5rem 0.9rem; font-size:0.85rem; border-radius:var(--radius); } .swatch.active, .size-box.active{ border-color:var(--c-indigo); background:var(--c-indigo); color:#fff; } .swatch.oos, .size-box.oos{ opacity:0.35; text-decoration:line-through; cursor:not-allowed; } .stock-note{ font-size:0.8rem; color:var(--c-henna); margin-top:0.5rem; } /* ---------- Panier / commande ---------- */ .cart-line{ display:grid; grid-template-columns:80px 1fr auto auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--c-line); } .cart-line img{ aspect-ratio:1; object-fit:cover; background:var(--c-plaster-dim); } .qty-input{ width:52px; text-align:center; border:1px solid var(--c-line); padding:0.3rem; } .cart-summary{ border:1px solid var(--c-line); padding:1.5rem; } .summary-row{ display:flex; justify-content:space-between; font-size:0.9rem; padding:0.4rem 0; } .summary-row.total{ font-family:var(--f-display); font-size:1.2rem; border-top:1px solid var(--c-line); margin-top:0.6rem; padding-top:0.8rem; } .checkout-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:3rem; padding:3rem 0; } .field{ margin-bottom:1rem; } .field label{ display:block; font-size:0.8rem; margin-bottom:0.3rem; color:#6b6558; } .field input, .field select{ width:100%; padding:0.7rem; border:1px solid var(--c-line); border-radius:var(--radius); font-family:inherit; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } /* ---------- Admin ---------- */ .admin-shell{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; } .admin-side{ background:var(--c-indigo); color:#fff; padding:2rem 1.2rem; } .admin-side .logo{ color:#fff; } .admin-side nav{ margin-top:2rem; display:flex; flex-direction:column; gap:0.2rem; } .admin-side nav a{ padding:0.6rem 0.7rem; font-size:0.88rem; border-radius:var(--radius); } .admin-side nav a:hover, .admin-side nav a.active{ background:rgba(255,255,255,0.1); } .admin-main{ padding:2.5rem; } .stat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; } .stat-card{ border:1px solid var(--c-line); padding:1.2rem; background:#fff; } .stat-card .v{ font-family:var(--f-mono); font-size:1.6rem; color:var(--c-indigo); } .stat-card .l{ font-size:0.8rem; color:#6b6558; } .admin-table{ width:100%; border-collapse:collapse; background:#fff; } .admin-table th, .admin-table td{ text-align:left; padding:0.8rem; border-bottom:1px solid var(--c-line); font-size:0.88rem; } .admin-table th{ font-family:var(--f-mono); font-size:0.7rem; text-transform:uppercase; color:#6b6558; } .badge{ font-family:var(--f-mono); font-size:0.7rem; padding:0.15rem 0.5rem; border-radius:99px; } .badge.in{ background:#e6efe1; color:#2d5a27; } .badge.low{ background:#f7ecd6; color:#8a5a00; } .badge.out{ background:#f4e0e0; color:var(--c-henna); } /* ---------- Footer ---------- */ .site-footer{ border-top:1px solid var(--c-line); padding:3.5rem 0 2rem; margin-top:4rem; font-size:0.85rem; color:#6b6558; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.5rem; } .footer-grid h5{ font-family:var(--f-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--c-indigo); margin:0 0 0.9rem; } .footer-grid p, .footer-grid a{ display:block; margin:0 0 0.5rem; line-height:1.5; } .footer-grid a:hover{ color:var(--c-brass); } .footer-brand .logo{ margin-bottom:0.8rem; } .footer-brand p{ max-width:32ch; } .footer-social{ display:flex; gap:0.7rem; margin-top:0.8rem; } .footer-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; margin:0; } .footer-social a:hover{ background:var(--c-brass); border-color:var(--c-brass); color:#fff; } .footer-whatsapp-btn{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:0.4rem; padding:0.55rem 0.9rem; background:#25D366; color:#fff !important; border-radius:99px; font-size:0.8rem; font-weight:500; } .footer-whatsapp-btn:hover{ filter:brightness(1.06); } .footer-map{ margin-top:1rem; border:1px solid var(--c-line); overflow:hidden; aspect-ratio:4/3; background:var(--c-plaster-dim); border-radius:8px; box-shadow:0 8px 24px -12px rgba(0,0,0,0.15); } body.theme-rose .footer-map{ border-radius:14px; } .footer-map iframe{ width:100%; height:100%; border:0; display:block; } /* ---------- Section "Nous trouver" (accueil) ---------- */ .visit-section{ padding:3.5rem 0; } .visit-card{ display:grid; grid-template-columns:1fr 1.1fr; gap:0; border:1px solid var(--c-line); border-radius:10px; overflow:hidden; box-shadow:0 12px 32px -16px rgba(0,0,0,0.18); } body.theme-rose .visit-card{ border-radius:18px; } .visit-info{ padding:2.5rem; background:var(--c-plaster); } .visit-info h3{ font-family:var(--f-display); font-size:1.5rem; margin:0 0 1rem; color:var(--c-indigo); } .visit-info .row{ display:flex; gap:0.6rem; align-items:flex-start; margin-bottom:0.9rem; font-size:0.92rem; } .visit-info .row i{ color:var(--c-brass); width:18px; margin-top:0.2rem; } .visit-info .btn{ margin-top:0.5rem; } .visit-map{ min-height:320px; background:var(--c-plaster-dim); } .visit-map iframe{ width:100%; height:100%; border:0; display:block; min-height:320px; } @media (max-width: 900px){ .visit-card{ grid-template-columns:1fr; } .visit-map{ min-height:220px; } } .footer-bottom{ border-top:1px solid var(--c-line); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; font-size:0.78rem; } /* ---------- Bouton WhatsApp flottant ---------- */ .whatsapp-float{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:60; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow:0 6px 18px rgba(0,0,0,0.22); transition:transform 0.15s ease; } .whatsapp-float:hover{ transform:scale(1.07); } /* ---------- Responsive ---------- */ @media (max-width: 900px){ .hero, .product-detail, .checkout-grid{ grid-template-columns:1fr; } .cat-grid, .product-grid{ grid-template-columns:repeat(2,1fr); } .stat-cards{ grid-template-columns:repeat(2,1fr); } .nav-links{ display:none; } .footer-grid{ grid-template-columns:1fr 1fr; } .hero-full{ min-height:70vh; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }