:root{--noir:#0f0f0f;--noir2:#1a1a1a;--or:#8dc63f;--or-doux:#4f8a14;--creme:#f4f0e4;--gris:#9a9a92;--ligne:rgba(141,198,63,.22)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--noir);color:var(--creme);font:300 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400}
.kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--or)}
em{font-style:italic;color:var(--or)}

/* NAV */
nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px 48px;background:linear-gradient(180deg,rgba(15,15,15,.8),transparent);transition:background .4s,padding .4s}
nav.scrolled{background:rgba(15,15,15,.94);backdrop-filter:blur(8px);padding:14px 48px;border-bottom:1px solid var(--ligne)}
nav .logo img{height:30px;width:auto}
nav ul{display:flex;gap:36px;list-style:none}
nav ul a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.8;transition:opacity .3s,color .3s}
nav ul a:hover,nav ul a.actif{opacity:1;color:var(--or)}
.burger{display:none;background:none;border:0;color:var(--or);font-size:11px;letter-spacing:.24em}

/* FIL D'ARIANE */
.ariane{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.ariane a:hover{color:var(--or)}
.ariane span{margin:0 10px;color:var(--or)}

/* EN-TÊTE DE PAGE */
.tete{display:grid;grid-template-columns:1fr 1fr;min-height:86vh}
.tete-txt{display:flex;flex-direction:column;justify-content:flex-end;padding:150px 6vw 90px 8vw}
.tete h1{font-size:clamp(60px,8vw,128px);line-height:.92;margin:26px 0 30px}
.tete p{max-width:470px;color:#d6d6cf;font-size:17px}
.tete-img{position:relative;overflow:hidden}
.tete-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noir) 0,transparent 30%)}

.btn{display:inline-flex;align-items:center;gap:14px;margin-top:40px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--or);border-bottom:1px solid var(--or);padding-bottom:8px;align-self:flex-start;transition:gap .3s}
.btn:hover{gap:22px}

/* SECTION */
.sec{padding:120px 6vw}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}
.sec-head h2{font-size:clamp(46px,6vw,96px);line-height:.95}
.sec-head p{max-width:400px;color:#bdbdb5}

/* CARTES QUI SE RETOURNENT */
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tuile{perspective:1600px;height:min(66vh,560px);display:block}
.tuile .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tuile:hover .in,.tuile.flip .in,.tuile:focus-visible .in{transform:rotateY(180deg)}
.face,.dos{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 50%)}
.face .nm{position:absolute;z-index:2;left:26px;bottom:24px;right:26px}
.face b,.dos b{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--or);margin-bottom:6px}
.face strong{font-size:clamp(34px,2.8vw,48px);line-height:1}
.face .tourne{position:absolute;z-index:2;top:22px;right:22px;width:38px;height:38px;border-radius:50%;border:1px solid var(--ligne);background:rgba(15,15,15,.5);display:grid;place-items:center;color:var(--or);font-size:15px}
.dos{transform:rotateY(180deg);background:var(--noir2);border:1px solid var(--ligne);padding:34px 30px;display:flex;flex-direction:column}
.dos strong{font-size:clamp(32px,2.6vw,44px);line-height:1;margin-bottom:20px}
.dos p{color:#bdbdb5;font-size:15px;line-height:1.65}
.dos ul{list-style:none;margin-top:18px;display:grid;gap:8px}
.dos li{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);padding-left:18px;position:relative}
.dos li:before{content:"✦";position:absolute;left:0;color:var(--or);font-size:9px;top:1px}
.dos .btn{margin-top:auto}

/* SOUS-PAGE : BLOCS */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;padding:120px 6vw}
.duo.inv .duo-img{order:2}
.duo-img{height:min(78vh,720px);overflow:hidden}
.duo h2{font-size:clamp(40px,4.6vw,72px);line-height:1;margin:22px 0 26px}
.duo p{color:#bdbdb5;max-width:480px}
.galerie{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:min(42vh,380px);gap:16px}
.galerie div{overflow:hidden}
.galerie div:first-child{grid-row:span 2}
.galerie img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.galerie div:hover img{transform:scale(1.05)}
.points{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ligne)}
.points div{padding:42px 34px 10px 0}
.points .serif{font-size:34px;color:var(--or)}
.points h4{font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:10px 0 8px}
.points p{color:#bdbdb5;font-size:15px}

/* CATALOGUE / CTA */
.cta{background:var(--creme);color:var(--noir);padding:110px 8vw;display:flex;justify-content:space-between;align-items:center;gap:40px}
.cta h2{font-size:clamp(40px,5vw,80px);line-height:.98}
.cta h2 em{color:var(--or-doux)}
.cta .btn{color:var(--noir);border-color:var(--noir);margin-top:0}
.cta .actions{display:grid;gap:22px}

/* AUTRES UNIVERS */
.autres{display:flex;flex-wrap:wrap;gap:10px}
.autres a{border:1px solid var(--ligne);padding:12px 18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--creme);transition:.3s}
.autres a:hover{border-color:var(--or);color:var(--or)}

footer{border-top:1px solid var(--ligne);padding:28px 48px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}

.rv{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}

@media (max-width:1100px){.tuiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  nav,nav.scrolled{padding:16px}
  nav ul{display:none}.burger{display:block}
  .tete,.duo,.points{grid-template-columns:1fr}
  .tete-txt{padding:120px 16px 48px}.tete-img{height:55vh}
  .tete-img:after{background:linear-gradient(180deg,var(--noir) 0,transparent 30%)}
  .sec,.duo{padding:80px 16px}.sec-head{display:block}.sec-head p{margin-top:18px}
  .duo.inv .duo-img{order:0}.duo-img{height:60vh}
  .tuiles{grid-template-columns:1fr}.tuile{height:70vh}
  .galerie{grid-template-columns:1fr 1fr;grid-auto-rows:42vw}
  .galerie div:first-child{grid-column:span 2;grid-row:auto}
  .cta{flex-direction:column;align-items:flex-start;padding:80px 16px}
  footer{padding:24px 16px;flex-direction:column;gap:8px}
}

/* Galerie à 3 images */
.galerie.g3{grid-template-columns:2fr 1fr}
/* Grilles de cartes selon le nombre d'univers */
.tuiles.n4{grid-template-columns:repeat(4,1fr)}
.tuiles.n5{grid-template-columns:repeat(6,1fr)}
.tuiles.n5 .tuile{grid-column:span 2}
.tuiles.n5 .tuile:nth-child(4){grid-column:2 / span 2}
.tuiles.n6{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.tuiles.n4,.tuiles.n5,.tuiles.n6{grid-template-columns:repeat(2,1fr)}.tuiles.n5 .tuile,.tuiles.n5 .tuile:nth-child(4){grid-column:auto}}
@media (max-width:860px){.tuiles.n4,.tuiles.n5,.tuiles.n6{grid-template-columns:1fr}.galerie.g3{grid-template-columns:1fr 1fr}}

/* Menu téléphone */
@media (max-width:860px){
  nav .logo,nav .burger{position:relative;z-index:2}
  nav.open ul{display:flex;position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:34px;background:var(--noir)}
  nav.open ul a{font-size:15px;opacity:1}
  .dots i:not(.on):after{display:none}
}

/* Gamme produits (catalogue) */
.gamme{background:var(--creme);color:var(--noir)}
.gamme .sec-head h2 em{color:var(--or-doux)}
.gamme .sec-head p{color:#55554f}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.prod{background:#fff;border:1px solid rgba(15,15,15,.08);padding:22px 18px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s}
.prod:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(15,15,15,.14)}
.prod-img{height:190px;width:100%;display:grid;place-items:center;margin-bottom:14px}
.prod-img img{width:auto;height:auto;max-height:180px;max-width:100%;object-fit:contain;filter:none!important;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.prod:hover .prod-img img{transform:scale(1.08) rotate(-2deg)}
.prod strong{font-size:26px;line-height:1.1}
.prod span{margin-top:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#77776f}
.tuiles.n2{grid-template-columns:repeat(2,1fr)}.tuiles.n2 .tuile{height:min(72vh,620px)}
.tuiles.n3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.tuiles.n2,.tuiles.n3{grid-template-columns:1fr}.prods{grid-template-columns:repeat(2,1fr)}.prod-img{height:150px}.prod-img img{max-height:140px}}
/* Cartes produits sur fond noir (les découpes gobelets sont sur fond noir) */
.prod{background:#000;border-color:#000;color:var(--creme)}
.prod span{color:#9a9a92}
.prod:hover{box-shadow:0 24px 50px rgba(15,15,15,.35)}

/* Blocs vert Ecopafiesta */
.cta{background:var(--or)!important;color:#0f0f0f}
.cta h2 em{color:#0f0f0f!important;opacity:.75}
.cta .btn{color:#0f0f0f!important;border-color:#0f0f0f!important}
.dos{background:radial-gradient(120% 90% at 100% 0%,rgba(141,198,63,.18),transparent 55%),#1a1a1a!important}

/* v5 : collection en cartes qui se retournent (recto photo + réf, verso fiche technique) */
.pc-groupe+.pc-groupe{margin-top:72px}
.pc-tete{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid rgba(15,15,15,.12);padding-bottom:16px}
.pc-tete h3{font-size:clamp(30px,3vw,44px);line-height:1}
.pc-tete>span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#77776f}
.pc-tete .btn{margin:0 0 0 auto}
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pc{perspective:1400px;height:400px;outline:none}
.pc .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pc:hover .in,.pc:focus-visible .in,.pc.flip .in{transform:rotateY(180deg)}
.pc-face,.pc-dos{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transition:opacity 0s linear .2s}
.pc-face{background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:22px 18px;text-align:center;transform:rotateY(0) translateZ(1px)}
.pc-face img{position:absolute;inset:18px 18px 96px;width:calc(100% - 36px);height:calc(100% - 114px);object-fit:contain}
.pc.photo .pc-face img{inset:0;width:100%;height:100%;object-fit:cover}
.pc.photo .pc-face:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%)}
.pc-face>*:not(img){position:relative;z-index:2}
.pc-ref{font-size:12px;font-weight:500;letter-spacing:.24em;color:#a2c03f}
.pc-face strong{font-size:26px;line-height:1.1;margin-top:4px;color:#fff}
.pc-cap{margin-top:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#cfcfc8}
.pc-face i{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;color:#a2c03f;border:1px solid rgba(162,192,63,.4)}
.pc-dos{opacity:0;transform:rotateY(180deg) translateZ(1px);background:#f3f6ec;border:1px solid rgba(10,138,60,.25);padding:24px 22px;display:flex;flex-direction:column;color:#111}
.pc:hover .pc-face,.pc:focus-visible .pc-face,.pc.flip .pc-face{opacity:0}
.pc:hover .pc-dos,.pc:focus-visible .pc-dos,.pc.flip .pc-dos{opacity:1}
.pc-dos b{font-size:11px;font-weight:500;letter-spacing:.22em;color:#0a8a3c}
.pc-dos strong{font-size:26px;line-height:1.05;margin:4px 0 14px}
.pc-dos dl{display:grid;gap:9px;font-size:13px}
.pc-dos dl div{border-top:1px solid rgba(15,15,15,.1);padding-top:8px}
.pc-dos dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6b6e66}
.pc-dos dd{color:#111}
.pc-dos .btn{margin-top:auto;font-size:10px;color:#111;border-bottom:2px solid #e2b23a}
.lavage .qr{display:grid;gap:18px;margin-top:28px}
.lavage .qr div{display:grid;grid-template-columns:40px 1fr;column-gap:12px;border-top:1px solid rgba(15,15,15,.12);padding-top:14px}
.lavage .qr .serif{grid-row:span 2;font-size:30px;color:#0a8a3c;line-height:1}
.lavage .qr h4{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.lavage .qr p{font-size:15px}
@media (max-width:860px){.pcs{grid-template-columns:repeat(2,1fr);gap:10px}.pc{height:330px}.pc-face strong,.pc-dos strong{font-size:21px}.pc-dos{padding:16px 14px}.pc-dos dl{gap:6px;font-size:12px}.pc-tete .btn{margin:0}}
/* Seaux & vasques : 3 grandes cartes photo */
.pcs:has(.pc.photo){grid-template-columns:repeat(3,1fr);gap:20px}
.pc.photo{height:min(74vh,600px)}
.pc.photo .pc-face strong{font-size:34px}
@media (max-width:860px){.pcs:has(.pc.photo){grid-template-columns:1fr}.pc.photo{height:72vh}}

/* v6 (15/10) : réalisations en situation, Eco Mini, portfolio, actus */
.galerie.situ{grid-template-columns:2fr 1fr 1fr}
.ecomini .mini-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.ecomini .mini-pts div{border-top:1px solid rgba(15,15,15,.14);padding-top:12px}
.ecomini .mini-pts h4{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
.ecomini .mini-pts p{font-size:14px}
.ecomini .duo-img{height:auto}.ecomini .duo-img img{height:auto}
.tete.court{min-height:auto;grid-template-columns:1fr}
.tete.court .tete-txt{padding-bottom:30px}
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filtres button{font:500 11px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:12px 18px;border:1px solid rgba(15,15,15,.2);background:none;color:#111;cursor:pointer}
.filtres button.on{background:#0d2621;color:#fff;border-color:#0d2621}
.galerie.mur{display:block;columns:4 240px;column-gap:14px}
.galerie.mur>div{break-inside:avoid;margin-bottom:14px;height:auto;grid-row:auto!important;grid-column:auto!important;background:#000;cursor:zoom-in}
.galerie.mur>div[hidden]{display:none}
.galerie.mur img{height:auto;width:100%;display:block}
.actus{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.actu{display:flex;flex-direction:column;color:#111}
.actu-img{aspect-ratio:16/10;overflow:hidden;margin-bottom:16px}
.actu-img img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.actu:hover .actu-img img{transform:scale(1.05)}
.actu span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#0a8a3c}
.actu h3{font-size:28px;line-height:1.1;margin:8px 0 10px}
.actu p{font-size:15px;color:#3d3f3a}
.actu b{margin-top:14px;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;border-bottom:2px solid #e2b23a;align-self:flex-start;padding-bottom:6px}
.article{max-width:820px;margin:0 auto;padding:150px 24px 90px;color:#111}
.article h1{font-size:clamp(38px,5vw,64px);line-height:1.02;margin:14px 0 30px}
.art-img{margin-bottom:36px}.art-img img{height:auto}
.art-corps p{font-size:17px;line-height:1.75;margin:0 0 18px;color:#2c2e29}
.art-corps a{text-decoration:underline}
.art-corps img{height:auto;margin:10px 0 24px}
.art-corps h2,.art-corps h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:32px;margin:30px 0 12px}
.article .btn{margin-top:40px}
@media (max-width:860px){.actus{grid-template-columns:1fr}.ecomini .mini-pts{grid-template-columns:1fr}.galerie.situ{grid-template-columns:1fr 1fr}.article{padding-top:110px}}