:root { --ink:#151112; --ivory:#f4efe6; --mango:#f26a2e; --hibiscus:#8f1636; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { background:var(--ivory); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ivory); font-family:"Manrope",sans-serif; }
::selection { color:var(--ivory); background:var(--hibiscus); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--mango); outline-offset:6px; }
.skip-link { position:fixed; z-index:20; top:1rem; left:1rem; padding:.7rem 1rem; background:var(--ink); color:var(--ivory); transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.catalog-nav { position:sticky; z-index:10; top:0; height:70px; padding:0 3vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:var(--ivory); background:rgba(21,17,18,.96); backdrop-filter:blur(14px); }
.brand { font:400 1.25rem/1 "Archivo Black",sans-serif; letter-spacing:-.04em; text-transform:uppercase; }
.catalog-nav p,.back { font-size:.78rem; }
.back { justify-self:end; border-bottom:1px solid currentColor; padding-bottom:.3rem; }
.catalog-hero { position:relative; min-height:calc(100svh - 70px); padding:8vh 3vw 5vh; display:grid; grid-template-columns:minmax(0,.85fr) minmax(32rem,1.15fr); gap:2vw; background:var(--mango); overflow:hidden; }
.catalog-hero-copy { position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-start; }
.catalog-hero-copy > p { margin:0; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.catalog-hero h1 { max-width:8ch; margin:auto 0 5vh; font:400 clamp(4rem,8.4vw,8.2rem)/.84 "Archivo Black",sans-serif; letter-spacing:-.05em; }
.catalog-cta { width:min(100%,31rem); padding:1.15rem 0; display:grid; grid-template-columns:1fr auto; gap:.25rem 1rem; align-items:center; border-top:1px solid rgba(21,17,18,.4); border-bottom:1px solid rgba(21,17,18,.4); }
.catalog-cta span { font-weight:600; }
.catalog-cta strong { grid-column:1; font-size:.76rem; font-weight:400; opacity:.72; }
.catalog-cta b { grid-column:2; grid-row:1 / span 2; width:3.1rem; height:3.1rem; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:1.2rem; transition:transform .4s var(--ease),background .4s,color .4s; }
.catalog-cta:hover b { transform:translateY(5px); color:var(--mango); background:var(--ink); }
.catalog-hero-products { position:relative; min-height:74vh; }
.catalog-halo { position:absolute; width:38vw; max-width:36rem; aspect-ratio:1; left:50%; top:48%; border-radius:50%; background:var(--hibiscus); transform:translate(-50%,-50%); box-shadow:0 0 0 8vw rgba(244,239,230,.12); }
.catalog-group { position:absolute; z-index:2; width:108%; height:auto; object-fit:contain; filter:drop-shadow(0 30px 22px rgba(21,17,18,.34)); animation:catalog-float 6s var(--ease) infinite alternate; }
.cg-clean { left:-20%; top:0; transform:rotate(-4deg); }
.cg-table { left:17%; top:34%; width:98%; transform:rotate(5deg); animation-delay:-2s; }
.cg-care { left:-5%; top:57%; width:92%; transform:rotate(-5deg); animation-delay:-4s; }
.catalog-stamp { position:absolute; z-index:4; left:50%; top:49%; width:8rem; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:var(--ivory); background:var(--ink); text-align:center; font:400 .78rem/1.25 "Archivo Black",sans-serif; text-transform:uppercase; transform:translate(-50%,-50%) rotate(-8deg); }
@keyframes catalog-float { to { margin-top:-10px; } }
.catalog { padding:8vw 3vw 12vw; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--ink); }
.product-card { position:relative; min-width:0; min-height:34rem; padding:1.25rem; display:grid; grid-template-rows:1fr auto; gap:1.5rem; background:var(--ivory); overflow:hidden; cursor:zoom-in; }
.product-card.feature { grid-column:span 2; }
.product-card img { width:100%; height:27rem; object-fit:contain; object-position:center; filter:saturate(.9) contrast(1.03); transition:transform .6s var(--ease),filter .6s var(--ease); }
.product-card.feature img { height:34rem; }
.product-card.campaign-card { color:var(--ivory); background:var(--hibiscus); }
.product-card.campaign-card img { object-fit:contain; }
.product-card.campaign-card div { border-top-color:rgba(244,239,230,.3); }
.product-card.campaign-card span { color:var(--mango); }
.product-card:hover img { transform:scale(1.035); filter:saturate(1.06) contrast(1.05); }
.product-card:focus-visible { z-index:2; outline:4px solid var(--mango); outline-offset:-4px; }
.product-card::after { content:"Agrandir"; position:absolute; top:1rem; right:1rem; padding:.45rem .65rem; color:var(--ivory); background:var(--ink); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; opacity:0; transform:translateY(-5px); transition:opacity .25s var(--ease),transform .25s var(--ease); }
.product-card:hover::after,.product-card:focus-visible::after { opacity:1; transform:translateY(0); }
.product-card div { display:grid; gap:.45rem; border-top:1px solid rgba(21,17,18,.18); padding-top:1rem; }
.product-card span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hibiscus); }
.product-card h2 { margin:0; font:400 clamp(1.2rem,2vw,2rem)/1 "Archivo Black",sans-serif; letter-spacing:-.03em; }
.product-viewer { width:min(92vw,78rem); height:min(88svh,52rem); padding:0; border:0; color:var(--ivory); background:var(--ink); overflow:hidden; }
.product-viewer::backdrop { background:rgba(21,17,18,.82); backdrop-filter:blur(10px); }
.product-viewer[open] { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr); animation:viewer-in .42s var(--ease); }
.viewer-visual { min-width:0; display:grid; place-items:center; background:var(--ivory); overflow:hidden; }
.viewer-visual img { width:100%; height:100%; max-height:88svh; object-fit:contain; transform:scale(.96); animation:viewer-product .55s var(--ease) forwards; }
.viewer-copy { padding:4rem 3rem 3rem; display:flex; flex-direction:column; justify-content:flex-end; }
.viewer-copy span { margin-bottom:.75rem; color:var(--mango); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.viewer-copy h2 { margin:0; font:400 clamp(2.5rem,4.8vw,5.4rem)/.86 "Archivo Black",sans-serif; letter-spacing:-.04em; }
.viewer-copy p { margin:2rem 0 0; padding-top:1rem; border-top:1px solid rgba(244,239,230,.25); color:rgba(244,239,230,.7); font-size:.78rem; line-height:1.55; }
.viewer-actions { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.5rem; background:rgba(244,239,230,.25); }
.viewer-actions a { min-height:52px; display:flex; align-items:center; justify-content:center; padding:.9rem 1rem; font-size:.75rem; font-weight:600; text-align:center; transition:color .25s var(--ease),background .25s var(--ease); }
.viewer-buy { color:var(--ink); background:var(--mango); }
.viewer-price { color:var(--ivory); background:var(--ink); }
.viewer-actions a:hover,.viewer-actions a:focus-visible { color:var(--ink); background:var(--ivory); outline:none; }
.viewer-actions a:focus-visible { box-shadow:inset 0 0 0 3px var(--mango); }
.viewer-close { position:absolute; z-index:3; top:1.25rem; right:1.25rem; width:3.25rem; height:3.25rem; display:grid; place-items:center; border:1px solid rgba(244,239,230,.5); border-radius:50%; color:var(--ivory); background:var(--ink); cursor:pointer; }
.viewer-close:hover { color:var(--ink); background:var(--mango); }
.viewer-close:focus-visible { outline:3px solid var(--mango); outline-offset:4px; }
.viewer-close svg { width:1.35rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
@keyframes viewer-in { from { opacity:0; clip-path:inset(4% 4% 4% 4%); } to { opacity:1; clip-path:inset(0); } }
@keyframes viewer-product { to { transform:scale(1); } }
footer { min-height:28vh; padding:2.5rem 3vw 2rem; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:2.5rem 1rem; background:var(--ink); color:var(--ivory); font-size:.72rem; }
.footer-legal { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1.35fr 1.2fr 1.75fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(244,239,230,.2); color:rgba(244,239,230,.72); line-height:1.55; }
.footer-legal strong { color:var(--ivory); font:400 1rem/1.2 "Archivo Black",sans-serif; text-transform:uppercase; letter-spacing:-.02em; }
footer > span:nth-of-type(2) { text-align:center; } footer a { justify-self:end; border-bottom:1px solid currentColor; }
@media (max-width:900px) { .catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-card { min-height:29rem; } .product-card img,.product-card.feature img { height:23rem; } }
@media (max-width:900px) {
  .catalog-nav { height:68px; padding:0 5vw; grid-template-columns:1fr 1fr; }
  .catalog-nav > p { display:none; }
  .catalog-hero { min-height:calc(100svh - 68px); padding:5vh 5vw 4vh; display:block; }
  .catalog-hero-copy { height:100%; }
  .catalog-hero h1 { margin:3vh 0 2vh; font-size:13.5vw; }
  .catalog-cta { margin-top:auto; font-size:.85rem; background:rgba(242,106,46,.76); backdrop-filter:blur(6px); }
  .catalog-hero-products { position:absolute; z-index:1; left:42vw; right:-34vw; top:10%; bottom:34%; min-height:0; }
  .catalog-halo { width:70vw; }
  .catalog-group { width:155%; }
  .cg-clean { left:-45%; top:0; } .cg-table { left:-8%; top:70%; width:135%; } .cg-care { display:none; }
  .catalog-stamp { left:42%; top:84%; width:6.5rem; font-size:.66rem; }
  .catalog { padding:1px; grid-template-columns:1fr 1fr; }
  .product-card,.product-card.feature { grid-column:span 1; min-height:21rem; padding:.8rem; }
  .product-card img,.product-card.feature img { height:15rem; }
  .product-card h2 { font-size:1rem; }
  .product-card::after { display:none; }
  .product-viewer { width:94vw; height:86svh; }
  .product-viewer[open] { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .viewer-visual img { max-height:58svh; }
  .viewer-copy { padding:1.5rem; }
  .viewer-copy h2 { font-size:9vw; }
  .viewer-copy p { margin-top:1rem; }
  .viewer-actions { margin-top:1rem; }
  .viewer-actions a { min-height:48px; }
  footer { padding:2rem 5vw; grid-template-columns:1fr auto; }
  .footer-legal { grid-template-columns:1fr; gap:.65rem; padding-bottom:2rem; }
  footer > span:nth-of-type(2) { display:none; }
}
@media (max-width:520px) {
  .catalog-nav { padding-inline:5vw; }
  .catalog { grid-template-columns:1fr; gap:1px; }
  .product-card,.product-card.feature { min-height:29rem; padding:1rem; }
  .product-card img,.product-card.feature img { height:22rem; }
  .product-card h2 { font-size:1.35rem; }
  footer { padding-bottom:max(2rem,env(safe-area-inset-bottom)); }
}
@media (hover:none) and (pointer:coarse) {
  .back,.viewer-close { min-width:44px; min-height:44px; }
  .product-card:active img { transform:scale(1.025); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition-duration:.01ms !important; } .product-viewer[open],.viewer-visual img { animation:none !important; } }