/* ========================================================= MISTERAYZE — couche design + interactions Chargée sur la page Elementor en template Canvas. Tout est préfixé .mz- pour ne jamais entrer en conflit avec Elementor ou WordPress. ========================================================= */ :root{ --mz-ink: #ffffff; /* fond principal */ --mz-night: #f5f2ec; /* bandes secondaires */ --mz-night-2: #ffffff; /* panneaux */ --mz-blue: #2c4ff0; --mz-electric: #4a6bff; --mz-accent: #2c4ff0; /* le bleu du personnage : accent unique du site */ --mz-coral: #a5470f; /* assombri : contraste AA sur les bandes claires */ --mz-cyan: #0d7c8e; /* idem */ --mz-violet: #7b3ff2; --mz-cream: #f4efe6; /* conservé : texte posé sur un média sombre */ --mz-fg: #0f0d1a; /* texte principal */ --mz-glow-cyan:#7fe6f5; /* cyan clair, sur média uniquement */ --mz-muted: #6a647d; --mz-line: rgba(15,13,26,.13); --mz-pad: clamp(1.25rem, 5vw, 5rem); --mz-maxw: 1440px; --mz-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif; --mz-body: 'Space Grotesk', system-ui, -apple-system, sans-serif; --mz-ease: cubic-bezier(.22,.61,.36,1); } /* Elementor pose scroll-behavior:smooth sur . Notre défilement fluide appelle déjà window.scrollTo à chaque image : le natif tente d'animer, la boucle annule l'animation, et la page se fige sur place. Les deux ne peuvent pas coexister, on désactive le natif. */ html{ scroll-behavior:auto !important; } /* Canvas : on neutralise ce que WordPress laisse traîner */ html.mz-lock, body.mz-body{ margin:0; padding:0; background:#ffffff; } body.mz-body{ overflow-x:hidden; } body.mz-body #wpadminbar{ display:none; } .mz, .mz *, .mz *::before, .mz *::after{ box-sizing:border-box; } .mz{ background:var(--mz-ink); color:var(--mz-fg); font-family:var(--mz-body); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; } .mz img, .mz svg, .mz video{ display:block; max-width:100%; } .mz h1, .mz h2, .mz h3{ font-family:var(--mz-display); font-weight:400; line-height:.94; letter-spacing:-.025em; margin:0; } .mz p{ margin:0; } .mz a{ color:inherit; text-decoration:none; } .mz button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; } .mz ul{ margin:0; padding:0; list-style:none; } .mz ::selection{ background:var(--mz-accent); color:#fff; } .mz :focus-visible{ outline:2px solid var(--mz-cyan); outline-offset:3px; } .mz-wrap{ width:100%; max-width:var(--mz-maxw); margin-inline:auto; padding-inline:var(--mz-pad); } .mz-accent{ color:var(--mz-accent); } .mz-eyebrow{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mz-muted); margin-bottom:1.5rem; } /* ========================================================= 1. DÉFILEMENT FLUIDE Piloté en JS via le scroll natif de la fenêtre : aucune règle CSS nécessaire, et position:sticky / position:fixed continuent de fonctionner. 2. CURSEUR PERSONNALISÉ ========================================================= */ .mz-cursor, .mz-cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference; opacity:0; transition:opacity .3s; } .mz-cursor{ width:8px; height:8px; background:#fff; margin:-4px 0 0 -4px; } .mz-cursor-ring{ width:44px; height:44px; margin:-22px 0 0 -22px; border:1px solid rgba(255,255,255,.6); transition:opacity .3s, width .35s var(--mz-ease), height .35s var(--mz-ease), margin .35s var(--mz-ease), background .35s var(--mz-ease); } .mz-cursor.is-on, .mz-cursor-ring.is-on{ opacity:1; } /* Survol d'un élément interactif : l'anneau grossit */ .mz-cursor-ring.is-hover{ width:76px; height:76px; margin:-38px 0 0 -38px; background:rgba(255,255,255,.12); border-color:transparent; } /* Survol d'une œuvre : libellé dans l'anneau */ .mz-cursor-ring.is-view::after{ content:'VOIR'; position:absolute; inset:0; display:grid; place-items:center; font:500 .62rem/1 'Space Grotesk',sans-serif; letter-spacing:.18em; color:#fff; } @media (hover:none),(pointer:coarse){ .mz-cursor,.mz-cursor-ring{ display:none; } } /* ========================================================= 3. BARRE DE PROGRESSION ========================================================= */ .mz-progress{ position:fixed; inset:0 auto auto 0; z-index:70; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--mz-blue),var(--mz-violet),var(--mz-cyan)); } /* ========================================================= 4. APPARITIONS ========================================================= */ .mz-rev{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--mz-ease), transform .9s var(--mz-ease); } .mz-rev.is-in{ opacity:1; transform:none; } /* Titres révélés ligne par ligne derrière un masque */ .mz-mask{ display:block; overflow:hidden; } .mz-mask > span{ display:block; transform:translateY(105%); transition:transform 1.05s var(--mz-ease); } .mz-mask.is-in > span{ transform:none; } .mz-d1{ transition-delay:.08s } .mz-d2{ transition-delay:.16s } .mz-d3{ transition-delay:.24s } .mz-d4{ transition-delay:.32s } /* ========================================================= 5. NAVIGATION ========================================================= */ .mz-nav{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.15rem var(--mz-pad); border-bottom:1px solid transparent; transition:background .4s var(--mz-ease), backdrop-filter .4s, border-color .4s, transform .5s var(--mz-ease), padding .4s var(--mz-ease); } .mz-nav.is-stuck{ background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--mz-line); padding-block:.8rem; } /* Masquage au défilement vers le bas, réapparition vers le haut */ .mz-nav.is-hidden{ transform:translateY(-100%); } .mz-logo{ display:flex; align-items:center; gap:.65rem; font-family:var(--mz-display); font-size:1.05rem; } .mz-logo em{ font-style:normal; color:var(--mz-accent); } .mz-mark{ width:22px; height:22px; border-radius:50%; background:var(--mz-blue); position:relative; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.14); } .mz-mark::after{ content:''; position:absolute; inset:5px; background:#0f0d1a; border-radius:50%; } .mz-mark::before{ content:''; position:absolute; right:5px; top:5px; width:6px; height:6px; background:#fff; border-radius:50%; z-index:2; } .mz-links{ display:flex; gap:2rem; font-size:.9rem; } .mz-links a{ position:relative; padding-block:.25rem; color:#ded9ea; } .mz-links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--mz-accent); transition:width .35s var(--mz-ease); } .mz-links a:hover::after{ width:100%; } .mz-actions{ display:flex; align-items:center; gap:1rem; } .mz-cart-btn{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--mz-line); border-radius:999px; padding:.55rem 1rem; transition:border-color .3s, background .3s; } .mz-cart-btn:hover{ border-color:var(--mz-accent); background:rgba(44,79,240,.12); } .mz-count{ display:grid; place-items:center; min-width:20px; height:20px; padding-inline:5px; border-radius:999px; background:var(--mz-accent); color:#fff; font-size:.7rem; font-weight:700; } .mz-burger{ display:none; width:30px; height:22px; position:relative; } .mz-burger span{ position:absolute; left:0; height:2px; width:100%; background:var(--mz-cream); transition:transform .35s var(--mz-ease); } .mz-burger span:first-child{ top:5px } .mz-burger span:last-child{ bottom:5px } .mz-burger[aria-expanded="true"] span:first-child{ transform:translateY(5px) rotate(45deg) } .mz-burger[aria-expanded="true"] span:last-child{ transform:translateY(-6px) rotate(-45deg) } /* ========================================================= 6. HERO ========================================================= */ .mz-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:0 var(--mz-pad) clamp(4.5rem,13vh,9.5rem); overflow:hidden; background:radial-gradient(120% 90% at 60% 20%, #1a1740 0%, var(--mz-ink) 70%); } .mz-hero-media{ position:absolute; inset:-10% 0; z-index:0; will-change:transform; } /* --- Hero sur image fixe ------------------------------------------- L'illustration d'origine est bien plus définie que le rendu vidéo : on la garde nette et c'est le CSS qui apporte le mouvement. Aucun filtre de rattrapage ici, il n'y a rien à rattraper. */ .mz-hero-media picture{ display:block; width:100%; height:100%; } .mz-hero-media img{ width:100%; height:100%; object-fit:cover; /* Un très léger agrandissement de départ donne à la dérive de quoi bouger sans jamais découvrir un bord. */ transform:scale(1.06); } .mz-kenburns{ width:100%; height:100%; overflow:hidden; animation:mz-kb 34s ease-in-out infinite alternate; will-change:transform; } @keyframes mz-kb{ from{ transform:scale(1) translate3d(0,0,0); } to { transform:scale(1.07) translate3d(-1.6%,-1.1%,0); } } /* Souffle lumineux : une nappe qui traverse lentement le ciel. En soft-light elle ne délave pas les couleurs, elle les fait respirer. C'est ce qui empêche l'image de paraître figée. */ .mz-sweep{ position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:soft-light; opacity:.55; background:radial-gradient(closest-side, rgba(255,214,170,.85), rgba(79,217,238,.25) 55%, transparent 75%); animation:mz-sweep 26s ease-in-out infinite alternate; will-change:transform; } @keyframes mz-sweep{ from{ transform:translate3d(-18%,-6%,0) scale(1); } to { transform:translate3d(16%,8%,0) scale(1.25); } } /* Hero vidéo (état actif). La source ne fait que 768 x 512 : un flou infime casse les marches d'escalier du suréchantillonnage, le contraste et la saturation rendent le mordant que cet adoucissement retire. À l'œil, plus net qu'une mise à l'échelle brute. */ .mz-hero-media video{ width:100%; height:100%; object-fit:cover; filter:blur(.4px) contrast(1.09) saturate(1.07); transform:translateZ(0); } @media (prefers-reduced-motion: reduce){ .mz-kenburns, .mz-sweep{ animation:none; } } .mz-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,6,13,.72) 0%, rgba(6,6,13,.10) 32%, rgba(6,6,13,.55) 72%, var(--mz-ink) 100%), linear-gradient(90deg, rgba(6,6,13,.78) 0%, rgba(6,6,13,0) 62%); } /* Grain plus fin et un peu plus présent : à cette échelle d'agrandissement, il couvre les aplats de compression et la pixellisation se lit comme une texture voulue. */ .mz-grain{ position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay; pointer-events:none; background-size:180px 180px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Pas de largeur maximale ici : le titre display doit pouvoir se déployer, sinon le masque de révélation (overflow:hidden) rogne la dernière lettre. La mesure de lecture est portée par le sous-titre lui-même. */ .mz-hero-in{ position:relative; z-index:2; width:100%; } .mz-kicker{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mz-glow-cyan); margin-bottom:1.25rem; min-height:1em; } .mz-hero h1{ font-size:clamp(3.4rem,15vw,13rem); line-height:.82; letter-spacing:-.035em; margin-bottom:1.75rem; } .mz-hero h1 .mz-mask > span{ text-shadow:0 10px 60px rgba(6,6,13,.6); } .mz-outline{ color:transparent; -webkit-text-stroke:2px var(--mz-cream); } .mz-hero-sub{ font-size:clamp(1rem,1.6vw,1.3rem); color:#d6d1e4; max-width:46ch; margin-bottom:2.25rem; } .mz-cta{ display:flex; flex-wrap:wrap; gap:.85rem; } .mz-scrollcue{ position:absolute; right:var(--mz-pad); bottom:clamp(3rem,9vh,7rem); z-index:2; display:flex; align-items:center; gap:.75rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mz-muted); } .mz-scrollcue i{ display:block; width:52px; height:1px; background:linear-gradient(90deg,transparent,var(--mz-accent)); animation:mz-swipe 2.2s var(--mz-ease) infinite; } @keyframes mz-swipe{ 0%,100%{ transform:scaleX(.4); opacity:.4 } 50%{ transform:scaleX(1); opacity:1 } } /* ========================================================= 7. BOUTONS (avec effet magnétique piloté en JS) ========================================================= */ .mz-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.9rem; border-radius:999px; font-size:.82rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; transition:background .3s, color .3s, border-color .3s, box-shadow .3s; will-change:transform; } .mz-btn--solid{ background:var(--mz-accent); color:#fff; box-shadow:0 12px 40px -12px var(--mz-accent); } .mz-btn--solid:hover{ background:#fff; color:var(--mz-ink); } .mz-btn--ghost{ border:1px solid var(--mz-line); color:var(--mz-cream); } .mz-btn--ghost:hover{ border-color:var(--mz-cyan); color:var(--mz-cyan); } .mz-btn--full{ width:100%; } /* ========================================================= 8. RACCORD ENTRE LE HERO ET LA PAGE Le hero se dissout dans le blanc au fur et à mesure qu'il sort de l'écran. Le JS écrit --mz-exit (0 en haut de page, 1 quand le hero a disparu) et tout se calcule à partir de cette seule valeur. ========================================================= */ .mz-hero{ --mz-exit:0; } /* Voile blanc : il monte et s'opacifie. */ .mz-fade{ position:absolute; inset:auto 0 0 0; height:62vh; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 0%, var(--mz-ink) 82%); opacity:calc(.3 + var(--mz-exit) * .7); transform:translate3d(0, calc((1 - var(--mz-exit)) * 14%), 0); } /* Le contenu s'efface un peu plus vite que le fond : le titre part avant que l'image ait fini de blanchir. */ .mz-hero-in{ opacity:calc(1 - var(--mz-exit) * 1.45); transform:translate3d(0, calc(var(--mz-exit) * -56px), 0); } .mz-scrollcue{ opacity:calc(1 - var(--mz-exit) * 3); } .mz-hero-media{ opacity:calc(1 - var(--mz-exit) * .45); } @media (prefers-reduced-motion: reduce){ .mz-hero-in, .mz-scrollcue, .mz-hero-media{ opacity:1; transform:none; } .mz-fade{ opacity:1; transform:none; } } /* ========================================================= 9. MANIFESTE ========================================================= */ .mz-manifesto{ position:relative; padding-block:clamp(6rem,16vh,12rem); overflow:hidden; } .mz-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.2; pointer-events:none; will-change:transform; } .mz-blob--a{ width:44vw; height:44vw; background:var(--mz-blue); top:-8%; left:-10%; } .mz-blob--b{ width:34vw; height:34vw; background:var(--mz-accent); bottom:-14%; right:-8%; opacity:.16; } .mz-blob--c{ width:40vw; height:40vw; background:var(--mz-violet); top:10%; right:-14%; opacity:.16; } .mz-manifesto .mz-wrap{ position:relative; z-index:2; } .mz-manifesto h2{ font-size:clamp(2rem,6.2vw,5.4rem); line-height:1; margin-bottom:4rem; } /* Texte qui s'éclaire mot à mot au défilement */ .mz-word{ color:rgba(15,13,26,.14); transition:color .5s var(--mz-ease); } .mz-word.is-lit{ color:var(--mz-fg); } .mz-word.is-lit.mz-word--accent{ color:var(--mz-accent); } .mz-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2.5rem; max-width:900px; margin-left:auto; } .mz-cols p{ color:var(--mz-muted); font-size:1.02rem; } /* ========================================================= 10. EN-TÊTES DE SECTION ========================================================= */ .mz-sec-head{ margin-bottom:clamp(2.5rem,6vh,4.5rem); } .mz-sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:2rem; } .mz-sec-title{ font-size:clamp(2.2rem,5.5vw,4.5rem); } /* ========================================================= 11. COLLECTIONS ========================================================= */ .mz-collections{ padding-block:clamp(4rem,10vh,8rem); } /* Trois colonnes ou une seule, jamais deux : avec 3 cartes, un affichage sur 2 colonnes laisse une cellule vide de la hauteur d'une carte, soit un trou noir en plein milieu de la page. */ .mz-coll-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mz-line); border-block:1px solid var(--mz-line); } @media (max-width:1100px){ .mz-coll-grid{ grid-template-columns:1fr; } } .mz-coll{ background:var(--mz-ink); padding:2rem var(--mz-pad) 2.5rem; } .mz-frame{ aspect-ratio:3/4; overflow:hidden; border-radius:4px; margin-bottom:1.75rem; } /* Calque interne : la parallaxe se joue dans le cadre, jamais sur lui */ .mz-art{ height:114%; margin-top:-7%; will-change:transform; } .mz-art svg{ width:100%; height:100%; transition:transform .9s var(--mz-ease); } .mz-coll:hover .mz-art svg{ transform:scale(1.06); } .mz-coll h3{ font-size:1.6rem; margin-bottom:.6rem; } .mz-coll p{ color:var(--mz-muted); font-size:.95rem; margin-bottom:1.1rem; } .mz-link{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mz-cyan); transition:letter-spacing .35s var(--mz-ease); } .mz-coll:hover .mz-link{ letter-spacing:.26em; } /* ========================================================= 12. PIÈCE DU MOIS ========================================================= */ .mz-feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); max-width:var(--mz-maxw); margin-inline:auto; padding:clamp(4rem,12vh,9rem) var(--mz-pad); } .mz-sticky{ position:sticky; top:14vh; } .mz-feature-art{ aspect-ratio:3/4; overflow:hidden; border-radius:6px; box-shadow:0 40px 90px -40px rgba(44,79,240,.6); } .mz-feature-text{ padding-top:clamp(0rem,6vh,4rem); } .mz-feature-text h2{ font-size:clamp(2.4rem,6vw,5rem); margin-bottom:1.5rem; } .mz-feature-text > p{ color:var(--mz-muted); max-width:48ch; margin-bottom:2.5rem; } .mz-feature-text em{ color:var(--mz-coral); font-style:italic; } .mz-specs{ border-top:1px solid var(--mz-line); margin-bottom:2.5rem; } .mz-specs li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--mz-line); } .mz-specs span{ color:var(--mz-muted); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; } .mz-specs b{ font-family:var(--mz-display); font-size:1.05rem; font-weight:400; } /* ========================================================= 13. BOUTIQUE ========================================================= */ .mz-shop{ padding-block:clamp(4rem,10vh,8rem); background:var(--mz-night); } .mz-filters{ display:flex; flex-wrap:wrap; gap:.5rem; } .mz-chip{ padding:.55rem 1.1rem; border:1px solid var(--mz-line); border-radius:999px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mz-muted); transition:all .3s var(--mz-ease); } .mz-chip:hover{ color:var(--mz-fg); border-color:var(--mz-fg); } .mz-chip.is-on{ background:var(--mz-fg); color:#fff; border-color:var(--mz-fg); } .mz-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2.5rem 2rem; } /* Inclinaison 3D suivant la souris */ .mz-card{ position:relative; perspective:900px; } .mz-card.is-hidden{ display:none; } .mz-card-art{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:4px; margin-bottom:1.1rem; background:var(--mz-night-2); transform-style:preserve-3d; will-change:transform; transition:transform .5s var(--mz-ease), box-shadow .5s var(--mz-ease); } .mz-card:hover .mz-card-art{ box-shadow:0 30px 60px -30px rgba(0,0,0,.8); } .mz-card-art svg{ width:100%; height:100%; transition:transform .8s var(--mz-ease); } .mz-card:hover .mz-card-art svg{ transform:scale(1.07); } .mz-badge{ position:absolute; top:.8rem; left:.8rem; color:var(--mz-cream); background:rgba(6,6,13,.75); backdrop-filter:blur(6px); padding:.35rem .7rem; border-radius:999px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; } .mz-card-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; } .mz-card-row h3{ font-size:1.15rem; } .mz-card-row b{ font-family:var(--mz-display); font-weight:400; color:var(--mz-coral); } .mz-card > p{ color:var(--mz-muted); font-size:.85rem; margin-top:.35rem; } .mz-add{ position:absolute; left:.8rem; right:.8rem; bottom:5.6rem; padding:.8rem; border-radius:999px; background:var(--mz-fg); color:#fff; font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; opacity:0; transform:translateY(10px); transition:opacity .35s var(--mz-ease), transform .35s var(--mz-ease), background .25s; } .mz-card:hover .mz-add, .mz-add:focus-visible{ opacity:1; transform:none; } .mz-add:hover{ background:var(--mz-accent); color:#fff; } /* ========================================================= 14. ATELIER ========================================================= */ .mz-atelier{ position:relative; padding-block:clamp(6rem,14vh,10rem); overflow:hidden; } .mz-atelier .mz-wrap{ position:relative; z-index:2; } .mz-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; margin-top:4rem; border-top:1px solid var(--mz-line); padding-top:3rem; } .mz-stats b{ display:block; font-family:var(--mz-display); font-weight:400; font-size:clamp(2.6rem,6vw,4.5rem); line-height:1; color:var(--mz-cyan); } .mz-stats span{ color:var(--mz-muted); font-size:.88rem; } /* ========================================================= 15. NEWSLETTER ========================================================= */ .mz-news{ background:linear-gradient(120deg,var(--mz-blue),var(--mz-violet) 55%,var(--mz-cyan)); padding-block:clamp(4rem,11vh,8rem); text-align:center; } .mz-news h2{ font-size:clamp(2rem,5.5vw,4rem); margin-bottom:2.5rem; } .mz-news-form{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-width:560px; margin-inline:auto; } .mz-news-form input{ flex:1 1 260px; padding:.95rem 1.4rem; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(6,6,13,.28); color:#fff; font:inherit; } .mz-news-form input::placeholder{ color:rgba(255,255,255,.6); } .mz-news-form .mz-btn--solid{ background:var(--mz-fg); color:#fff; box-shadow:none; } .mz-news-form .mz-btn--solid:hover{ background:#fff; color:var(--mz-fg); } .mz-news-note{ margin-top:1.25rem; font-size:.85rem; color:rgba(255,255,255,.75); } /* ========================================================= 16. PIED DE PAGE ========================================================= */ .mz-foot{ padding-top:clamp(3rem,8vh,6rem); } .mz-foot-in{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--mz-line); } .mz-foot-brand{ display:flex; gap:.9rem; align-items:flex-start; } .mz-foot-brand p{ font-family:var(--mz-display); line-height:1.4; font-size:1rem; } .mz-foot-brand small{ font-family:var(--mz-body); font-weight:300; color:var(--mz-muted); font-size:.85rem; } .mz-foot-nav{ display:flex; flex-direction:column; gap:.7rem; font-size:.92rem; color:var(--mz-muted); } .mz-foot-nav a:hover{ color:var(--mz-fg); } .mz-legal{ padding:1.75rem var(--mz-pad); text-align:center; font-size:.78rem; color:#5d5876; letter-spacing:.08em; } /* ========================================================= 17. PANIER ========================================================= */ .mz-drawer{ position:fixed; inset:0; z-index:80; background:rgba(6,6,13,.6); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s var(--mz-ease); } .mz-drawer.is-open{ opacity:1; pointer-events:auto; } .mz-panel{ position:absolute; top:0; right:0; height:100%; width:min(420px,100%); background:var(--mz-night-2); border-left:1px solid var(--mz-line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .5s var(--mz-ease); } .mz-drawer.is-open .mz-panel{ transform:none; } .mz-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem; border-bottom:1px solid var(--mz-line); } .mz-panel-head h3{ font-size:1.1rem; } .mz-panel-head button{ font-size:1.1rem; color:var(--mz-muted); } .mz-panel-list{ flex:1; overflow-y:auto; padding:1rem 1.5rem; } .mz-panel-list li{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--mz-line); font-size:.92rem; } .mz-qty{ color:var(--mz-muted); font-size:.82rem; } .mz-rm{ color:var(--mz-muted); font-size:.8rem; } .mz-rm:hover{ color:var(--mz-accent); } .mz-empty{ color:var(--mz-muted); padding-block:2rem; text-align:center; } .mz-panel-foot{ padding:1.5rem; border-top:1px solid var(--mz-line); } .mz-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.1rem; font-family:var(--mz-display); } .mz-panel-foot small{ display:block; margin-top:.9rem; text-align:center; color:var(--mz-muted); font-size:.78rem; } .mz-toast{ position:fixed; left:50%; bottom:2rem; z-index:90; transform:translate(-50%,140%); background:var(--mz-fg); color:#fff; padding:.85rem 1.5rem; border-radius:999px; font-size:.85rem; font-weight:500; transition:transform .5s var(--mz-ease); } .mz-toast.is-on{ transform:translate(-50%,0); } /* ========================================================= 18. RESPONSIVE ========================================================= */ @media (max-width:960px){ .mz-feature{ grid-template-columns:1fr; } .mz-sticky{ position:static; } .mz-feature-art{ max-width:420px; } .mz-foot-in{ grid-template-columns:1fr 1fr; } .mz-foot-brand{ grid-column:1/-1; } } @media (max-width:760px){ .mz-burger{ display:block; } .mz-links{ position:fixed; inset:0 0 auto 0; flex-direction:column; gap:1.5rem; padding:6rem var(--mz-pad) 3rem; font-size:1.4rem; font-family:var(--mz-display); background:rgba(255,255,255,.97); backdrop-filter:blur(20px); transform:translateY(-100%); transition:transform .5s var(--mz-ease); } .mz-links.is-open{ transform:none; } .mz-cart-btn{ padding:.5rem .8rem; font-size:.72rem; } .mz-scrollcue{ display:none; } .mz-cols{ margin-left:0; } .mz-add{ opacity:1; transform:none; position:static; margin-top:1rem; } } /* ========================================================= 19. MOUVEMENT RÉDUIT Le défilement fluide, la parallaxe, le curseur et l'inclinaison sont désactivés côté JS ; ici on neutralise le reste. ========================================================= */ @media (prefers-reduced-motion: reduce){ .mz *, .mz *::before, .mz *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .mz-rev{ opacity:1; transform:none; } .mz-mask > span{ transform:none; } .mz-word{ color:var(--mz-fg); } .mz-cursor, .mz-cursor-ring{ display:none; } } /* ========================================================= 20. ÎLOTS SOMBRES DANS UN THÈME CLAIR Le hero reste posé sur la vidéo : son texte doit rester clair, alors que tout le reste du site est passé en sombre sur blanc. La navigation, elle, traverse les deux contextes : claire tant qu'elle survole le hero, sombre dès qu'elle se colle sur le fond blanc. ========================================================= */ /* --- Hero --- */ .mz-hero{ color:var(--mz-cream); } .mz-hero .mz-btn--ghost{ border-color:rgba(255,255,255,.45); color:var(--mz-cream); } .mz-hero .mz-btn--ghost:hover{ border-color:var(--mz-glow-cyan); color:var(--mz-glow-cyan); } .mz-scrollcue{ color:rgba(255,255,255,.7); } /* --- Navigation au-dessus du hero --- */ .mz-nav{ color:var(--mz-cream); } .mz-nav .mz-cart-btn{ border-color:rgba(255,255,255,.28); } .mz-nav .mz-cart-btn:hover{ border-color:var(--mz-accent); } /* --- Navigation collée en haut, sur blanc --- */ .mz-nav.is-stuck{ color:var(--mz-fg); } .mz-nav.is-stuck .mz-links a{ color:var(--mz-fg); } .mz-nav.is-stuck .mz-burger span{ background:var(--mz-fg); } .mz-nav.is-stuck .mz-cart-btn{ border-color:var(--mz-line); } .mz-nav.is-stuck .mz-cart-btn:hover{ border-color:var(--mz-accent); } /* --- Menu mobile déplié : panneau blanc, donc texte sombre, que la navigation soit collée ou non. --- */ .mz-nav .mz-links.is-open a{ color:var(--mz-fg); } /* ========================================================= 21. TÉLÉPHONE : LE HERO SE DÉPLIE En plein écran, un cadre de ratio 0,39 ne laissait voir que 26 % de la hauteur d'une vidéo en 3:2. On lui rend son format natif et le texte passe dessous, sur le fond de page. ========================================================= */ @media (max-width:760px){ .mz-hero{ display:block; min-height:0; padding:0 0 clamp(2.5rem,8vh,4rem); background:var(--mz-ink); color:var(--mz-fg); /* le texte n'est plus sur l'image */ } /* Ratio natif de la source : rien n'est rogné. */ .mz-hero-media{ position:relative; inset:auto; width:100%; aspect-ratio:3/2; margin-bottom:2rem; transform:none !important; /* la parallaxe est neutralisée ici */ } .mz-hero-media video{ /* Plus d'agrandissement : le micro-flou de rattrapage n'a plus lieu d'être, on garde seulement la densité. */ filter:contrast(1.06) saturate(1.05); } /* Voile et raccord n'ont plus d'objet : rien ne se superpose. */ .mz-scrim, .mz-fade{ display:none; } .mz-grain{ opacity:.12; } /* Le fondu de sortie piloté par --mz-exit est neutralisé : le texte ne doit pas s'effacer, il est hors de l'image. */ .mz-hero-in{ opacity:1; transform:none; padding-inline:var(--mz-pad); } .mz-hero-media{ opacity:1; } /* Couleurs reprises pour un fond clair. */ .mz-kicker{ color:var(--mz-cyan); } .mz-hero-sub{ color:var(--mz-muted); } .mz-outline{ -webkit-text-stroke-color:var(--mz-fg); } .mz-hero .mz-btn--ghost{ border-color:var(--mz-line); color:var(--mz-fg); } .mz-hero .mz-btn--ghost:hover{ border-color:var(--mz-cyan); color:var(--mz-cyan); } /* Les deux boutons côte à côte débordent sous 375 px. */ .mz-cta{ display:grid; gap:.7rem; } .mz-cta .mz-btn{ width:100%; } /* La navigation surplombe la vidéo, dont le haut est clair : du texte crème y devient illisible. Sur téléphone elle porte donc son fond dès le départ, et le hero démarre sous elle. */ .mz-nav{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--mz-line); color:var(--mz-fg); } .mz-nav .mz-links a{ color:var(--mz-fg); } .mz-nav .mz-burger span{ background:var(--mz-fg); } .mz-nav .mz-cart-btn{ border-color:var(--mz-line); } .mz-hero{ padding-top:58px; } /* La barre débordait de 3 px : espacements resserrés. */ .mz-nav{ gap:.75rem; } .mz-actions{ gap:.6rem; } /* Boutique sur deux colonnes, comme toute boutique mobile. En une seule colonne, six produits imposaient 4 130 px de défilement pour cette seule section. */ .mz-grid{ grid-template-columns:repeat(2,1fr); gap:1.75rem .75rem; } .mz-card-row{ display:block; } .mz-card-row h3{ font-size:.95rem; line-height:1.15; } .mz-card-row b{ display:block; margin-top:.2rem; font-size:.9rem; } .mz-card > p{ font-size:.72rem; margin-top:.25rem; } .mz-badge{ font-size:.58rem; padding:.25rem .5rem; top:.5rem; left:.5rem; } .mz-add{ font-size:.68rem; padding:.6rem; letter-spacing:.06em; margin-top:.75rem; } /* Visuels des collections moins hauts : en 3:4 chaque carte faisait 770 px et la section entière 2 310 px. */ .mz-frame{ aspect-ratio:4/3; margin-bottom:1.25rem; } .mz-coll{ padding-block:1.75rem; } .mz-coll h3{ font-size:1.35rem; } /* La fiche du mois : visuel plus compact. */ .mz-feature-art{ max-width:100%; aspect-ratio:4/3; } .mz-feature{ padding-block:clamp(2.5rem,8vh,4rem); gap:2rem; } } /* ========================================================= 22. CORRECTIF DE SPÉCIFICITÉ SUR LES BOUTONS Le reset « .mz button » vaut (0,1,1) et l'emportait sur les composants en simple classe, valant (0,1,0) : tout