:root{--blanc:#FFF;--noir:#1A1A1A;--gris:#8A8A8A;--fond:#F7F5F2;--ecru:#EFE6D2;--brun:#2A2119;--garance:#B33A2B;--safran:#D9A441;--indigo:#3A4A5A}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--blanc);color:var(--noir);font-family:'Archivo',sans-serif;font-size:15px;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:var(--noir);color:var(--blanc)}
a:focus-visible{outline:1.5px solid var(--noir);outline-offset:4px}
header.site{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:2.6rem;padding:1.15rem 2rem;transition:background .35s,border-color .35s;border-bottom:1px solid transparent;color:var(--blanc)}
header.site.plein,header.site.sombre{background:var(--blanc);border-color:#ECECEC;color:var(--noir)}
.logo{font-family:'Archivo Black',sans-serif;font-size:1.6rem;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
nav.principale{display:flex;gap:1.9rem;font-size:15px}
nav.principale a{position:relative;white-space:nowrap}
nav.principale a::after{content:'';position:absolute;left:0;bottom:-4px;height:1px;width:0;background:currentColor;transition:width .3s}
nav.principale a:hover::after,nav.principale a.actif::after{width:100%}
.actions{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.actions svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.actions .panier{display:flex;align-items:center;gap:.45rem;font-size:15px}
.actions .point{width:7px;height:7px;border-radius:50%;background:currentColor}
.hero{display:grid;grid-template-columns:1fr 1fr;height:100vh;min-height:600px}
.panneau{position:relative;overflow:hidden;display:block}
.panneau .media{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.panneau:hover .media{transform:scale(1.03)}
.panneau .media video{width:100%;height:100%;object-fit:cover;display:block}
.panneau .legende{position:absolute;left:1.6rem;bottom:1.6rem;z-index:3;color:var(--blanc);font-size:clamp(1.2rem,1.9vw,1.7rem);text-shadow:0 1px 16px rgba(0,0,0,.35)}
.panneau .legende small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:.4rem;opacity:.85}
.voile-sombre{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24) 88%)}
.hero-page{position:relative;height:64vh;min-height:420px;overflow:hidden}
.hero-page .media{position:absolute;inset:0}
.hero-page .legende{position:absolute;left:2rem;bottom:2rem;color:var(--blanc);z-index:2;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-page h1{font-family:'Archivo Black',sans-serif;font-size:clamp(2rem,5.5vw,4.2rem);text-transform:uppercase;line-height:1}
.hero-page p{margin-top:.6rem;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.intro{max-width:680px;margin:0 auto;padding:4.5rem 1.5rem 0;text-align:center}
.intro p{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.8}
section{padding-top:4.5rem}
.entete-section{display:flex;justify-content:space-between;align-items:baseline;padding:0 2rem 1.6rem}
.entete-section h2{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:500}
.entete-section a{font-size:13px;color:var(--gris);border-bottom:1px solid currentColor;padding-bottom:2px}
.grille-produits{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.produit{position:relative;background:var(--fond)}
.produit .cadre{aspect-ratio:3/4;overflow:hidden;position:relative}
.produit .cadre>*{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.produit:hover .cadre>*{transform:scale(1.045)}
.produit .etiquette{position:absolute;top:1.1rem;left:1.1rem;z-index:3;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--noir);background:rgba(255,255,255,.85);padding:.3rem .55rem}
.produit .infos{padding:.95rem 1.1rem 1.5rem;background:var(--blanc)}
.produit .nom{font-size:14px}
.produit .prix{font-size:13px;color:var(--gris);margin-top:.3rem}
.familles{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:4.5rem}
.famille{position:relative;overflow:hidden;aspect-ratio:16/10;display:block}
.famille .media{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.famille:hover .media{transform:scale(1.04)}
.famille .legende{position:absolute;left:1.6rem;bottom:1.4rem;color:var(--blanc);z-index:2;font-size:clamp(1.1rem,1.7vw,1.5rem);text-shadow:0 1px 16px rgba(0,0,0,.35)}
.famille .legende small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:.35rem;opacity:.85}
.campagne{position:relative;height:88vh;min-height:480px;overflow:hidden;margin-top:4.5rem}
.campagne .media{position:absolute;inset:0}
.campagne .contenu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--blanc);text-align:center;padding:0 1.5rem;z-index:2}
.campagne h3{font-family:'Archivo Black',sans-serif;font-size:clamp(1.8rem,4.5vw,3.6rem);text-transform:uppercase;letter-spacing:.02em}
.campagne p{margin-top:1.1rem;font-size:15px;max-width:460px;line-height:1.8}
.campagne .lien{margin-top:1.8rem;font-size:14px;border-bottom:1px solid var(--blanc);padding-bottom:3px}
.manifeste{max-width:820px;margin:0 auto;padding:7rem 1.5rem 2.5rem;text-align:center}
.manifeste p{font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.7}
.manifeste em{font-style:normal;color:var(--gris)}
.surmesure{background:var(--fond);text-align:center;padding:6rem 1.5rem;margin-top:4.5rem}
.surmesure h3{font-family:'Archivo Black',sans-serif;font-size:clamp(1.4rem,2.8vw,2.2rem);text-transform:uppercase;margin-bottom:1.2rem}
.surmesure p{font-size:15px;line-height:1.9;color:#555;max-width:540px;margin:0 auto 2.2rem}
.btn-noir{display:inline-block;background:var(--noir);color:var(--blanc);font-size:14px;padding:1rem 2.6rem;transition:opacity .3s}
.btn-noir:hover{opacity:.78}
footer{border-top:1px solid #ECECEC;padding:4rem 2rem 2.5rem}
.footer-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;margin-bottom:4rem}
footer h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:1.1rem}
footer ul{list-style:none}
footer li{margin-bottom:.7rem}
footer li a{font-size:14px}
footer li a:hover{text-decoration:underline}
.footer-marque{font-family:'Archivo Black',sans-serif;text-align:center;font-size:clamp(2.4rem,11vw,8rem);text-transform:uppercase;line-height:1;padding:1.5rem 0 1rem}
.footer-bas{text-align:center;font-size:12px;color:var(--gris)}
.motif{position:absolute;inset:0}
.motif::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.12),transparent 60%)}
.m-beni{background:repeating-linear-gradient(55deg,transparent 0 34px,var(--brun) 34px 37px,transparent 37px 74px),repeating-linear-gradient(-55deg,transparent 0 34px,var(--brun) 34px 37px,transparent 37px 74px),var(--ecru)}
.m-azilal{background:repeating-linear-gradient(50deg,transparent 0 26px,var(--garance) 26px 29px,transparent 29px 58px),repeating-linear-gradient(-50deg,transparent 0 26px,var(--safran) 26px 29px,transparent 29px 58px),#EDE2C8}
.m-azilal2{background:repeating-linear-gradient(50deg,transparent 0 30px,var(--indigo) 30px 34px,transparent 34px 64px),repeating-linear-gradient(-50deg,transparent 0 30px,var(--garance) 30px 33px,transparent 33px 64px),var(--ecru)}
.m-boujad{background:repeating-linear-gradient(90deg,#8C2F23 0 26px,var(--garance) 26px 54px,var(--safran) 54px 60px,#8C2F23 60px 86px)}
.m-boucherouite{background:repeating-linear-gradient(0deg,var(--indigo) 0 18px,var(--ecru) 18px 24px,var(--garance) 24px 42px,var(--safran) 42px 50px,#4A7A5A 50px 66px,var(--ecru) 66px 72px)}
.m-ancien{background:repeating-linear-gradient(55deg,transparent 0 44px,#6B4A32 44px 47px,transparent 47px 94px),repeating-linear-gradient(-55deg,transparent 0 44px,var(--garance) 44px 46px,transparent 46px 94px),#F0E8D6}
.m-epi{background:repeating-linear-gradient(0deg,var(--ecru) 0 40px,var(--safran) 40px 44px,var(--ecru) 44px 58px,#4A7A5A 58px 61px,var(--ecru) 61px 90px)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (max-width:1000px){.grille-produits{grid-template-columns:repeat(2,1fr)}nav.principale{display:none}}
@media (max-width:700px){.hero{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:auto;min-height:100vh}.familles{grid-template-columns:1fr}.grille-produits{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}