:root{--noir:#0c0b09;--noir2:#15130f;--or:#c8a35a;--or-doux:#a88a52;--creme:#efe9dd;--gris:#8d877b;--ligne:rgba(200,163,90,.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(12,11,9,.8),transparent);transition:background .4s,padding .4s}
nav.scrolled{background:rgba(12,11,9,.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:#cfc8ba;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:#bdb6a8}

/* 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(12,11,9,.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:#bdb6a8;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:#bdb6a8;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:#bdb6a8;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}
}

/* v8 : galerie à 2 images */
.galerie.g2{grid-template-columns:1fr 1fr}
.galerie.g2 div:first-child{grid-row:auto;grid-column:auto}
.tete-txt>.kicker{display:block;margin:6px 0 -6px}

/* v8 : retournement fiable (Safari / iPhone laissaient voir la face à travers le dos).
   En plus de backface-visibility, on échange les faces à mi-rotation. */
.tuile .face,.tuile .dos{transition:opacity 0s linear .22s;transform-style:flat}
.tuile .face{transform:rotateY(0) translateZ(1px)}
.tuile .dos{opacity:0;transform:rotateY(180deg) translateZ(1px)}
.tuile:hover .face,.tuile.flip .face,.tuile:focus-visible .face{opacity:0}
.tuile:hover .dos,.tuile.flip .dos,.tuile:focus-visible .dos{opacity:1}
.tuile .face img{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* v9 : grandes galeries (rangement de Léo) en mosaïque */
.galerie.mur{display:block;columns:4 220px;column-gap:14px}
.galerie.mur>div{break-inside:avoid;margin-bottom:14px;height:auto;grid-row:auto!important;grid-column:auto!important;cursor:zoom-in}
.galerie.mur img{height:auto;width:100%;display:block}
@media (max-width:860px){.galerie.mur{columns:2 140px;column-gap:10px}.galerie.mur>div{margin-bottom:10px}}