/* FLĖØ — feuille de style commune */

:root{
  --noir:#0A0A0A;
  --texte:#E8E8E8;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--noir)}
body{
  background:var(--noir); color:var(--texte);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:#E8E8E8; color:#0A0A0A}

/* ---------- enseigne ---------- */
#voile{
  position:fixed; top:0; left:0; right:0; height:130px; z-index:40;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
#enseigne{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:baseline; justify-content:space-between;
  padding:26px 30px; pointer-events:none;
}
#enseigne .marque{
  font-size:15px; letter-spacing:.62em; font-weight:400;
  text-transform:uppercase; color:#fff; text-decoration:none;
  pointer-events:auto;
}
#enseigne nav{display:flex; gap:26px; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end}
#enseigne nav a{
  color:#fff; text-decoration:none; font-size:10px;
  letter-spacing:.30em; text-transform:uppercase; opacity:.62;
  transition:opacity .35s var(--ease);
}
#enseigne nav a:hover,#enseigne nav a.on{opacity:1}

/* ---------- pied ---------- */
footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:64px 30px 52px; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:#fff;
}
footer .marque{letter-spacing:.62em; font-size:13px; opacity:.9}
footer .mentions{opacity:.34; text-align:right; line-height:2.2; font-size:9px}
footer a{color:inherit; text-decoration:none; opacity:.55}
footer a:hover{opacity:1}

/* ---------- le mur ---------- */
#mur{display:block; width:100%; font-size:0}
.rangee{display:flex; width:100%}
.case{
  position:relative; overflow:hidden; cursor:pointer;
  background-size:cover; background-position:center;
}
.case img{
  display:block; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.02);
  transition:opacity 1.05s var(--ease), transform 1.3s var(--ease), filter .55s var(--ease);
}
.case img.vu{opacity:1; transform:none}
#mur.actif .case img{filter:brightness(.42) saturate(.55)}
/* au clavier : la case visée s'éclaire comme au survol, et se signale */
.case:focus{outline:none}
.case:focus-visible{outline:2px solid #fff; outline-offset:-2px; z-index:2}
.case:focus-visible img{filter:none !important}
#mur.actif .case:hover img{filter:none; transform:scale(1.012)}

/* ---------- lightbox ---------- */
#vue{
  position:fixed; inset:0; z-index:100; background:rgba(6,6,6,.985);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
}
#vue.ouvert{opacity:1; visibility:visible}
#cadre{
  position:relative;
  max-width:calc(100vw - 130px); max-height:calc(100vh - 130px);
  transform:scale(.985); transition:transform .5s var(--ease);
}
#vue.ouvert #cadre{transform:none}
#grande{
  display:block; max-width:calc(100vw - 130px); max-height:calc(100vh - 130px);
  width:auto; height:auto;
}
.zone{position:absolute; top:0; bottom:0; width:34%; z-index:2; cursor:pointer}
.zone.g{left:0} .zone.d{right:0}
#fermer{position:absolute; top:0; left:34%; right:34%; height:100%; z-index:1; cursor:zoom-out}
#compteur{
  position:absolute; left:30px; bottom:24px; z-index:5;
  font-size:10px; letter-spacing:.28em; opacity:.62;
}
#croix{
  position:absolute; top:22px; right:28px; z-index:5;
  font-size:22px; line-height:1; opacity:.45; cursor:pointer;
  transition:opacity .3s; font-weight:300; background:none; border:0; color:inherit;
}
#croix:hover{opacity:1}
.fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  font-size:13px; opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.fleche.g{left:30px} .fleche.d{right:30px}
.zone.g:hover~.fleche.g,.zone.d:hover~.fleche.d{opacity:.7}

/* ---------- films ---------- */
#films{padding-top:118px}
.film{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#141414; cursor:pointer; overflow:hidden;
}
.film + .film{margin-top:2px}
.film img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62); transition:filter .6s var(--ease), transform .9s var(--ease);
}
.film:hover img{filter:brightness(.88); transform:scale(1.014)}
.film .titre{
  position:absolute; left:0; right:0; bottom:0; padding:34px 34px 30px;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  pointer-events:none;
}
.film .titre h2{
  font-size:26px; font-weight:400; letter-spacing:.04em; margin-bottom:9px;
}
.film .titre .info{
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; opacity:.62;
}
.film .lire{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border:1px solid rgba(255,255,255,.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  pointer-events:none;
}
.film:hover .lire{background:rgba(255,255,255,.14); border-color:#fff}
.film .lire::after{
  content:''; width:0; height:0; margin-left:5px;
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.film iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- pages de texte ---------- */
.page{
  max-width:720px; margin:0 auto; padding:190px 30px 40px;
  font-size:15px; line-height:1.95; letter-spacing:.005em;
}
.page h1{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  font-weight:400; opacity:.45; margin-bottom:46px;
}
.page h2{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  font-weight:400; opacity:.45; margin:64px 0 22px;
}
.page p{margin-bottom:26px; color:#CFCFCF}
.page p.chapeau{font-size:19px; line-height:1.75; color:#E8E8E8; margin-bottom:36px}
.page a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.page a:hover{border-bottom-color:#fff}
.page .vide{opacity:.4; font-style:italic}

/* ---------- état vide ---------- */
.attente{
  display:flex; align-items:center; justify-content:center;
  min-height:64vh; font-size:11px; letter-spacing:.42em;
  text-transform:uppercase; opacity:.35;
}

@media (max-width:820px){
  #enseigne{padding:18px}
  #enseigne .marque{font-size:12px; letter-spacing:.48em}
  #enseigne nav{gap:14px}
  #enseigne nav a{font-size:9px; letter-spacing:.18em}
  #voile{height:112px}
  footer{flex-direction:column; align-items:flex-start; gap:22px; padding:44px 18px 38px}
  footer .mentions{text-align:left}
  #cadre,#grande{max-width:100vw; max-height:calc(100vh - 90px)}
  .zone{width:42%}
  #mur.actif .case img{filter:none}
  #films{padding-top:96px}
  .film .titre{padding:22px 18px 20px}
  .film .titre h2{font-size:19px}
  .film .lire{width:56px; height:56px}
  .page{padding:150px 18px 30px; font-size:14.5px}
  .page p.chapeau{font-size:17px}
}
@media (max-width:620px){
  #enseigne{flex-direction:column; align-items:flex-start; gap:11px; padding:16px 16px 14px}
  #enseigne nav{gap:14px 16px; justify-content:flex-start; width:100%; padding-right:4px}
  #enseigne nav a{font-size:8.5px; letter-spacing:.14em; opacity:.7}
  #voile{height:158px}
  #films{padding-top:138px}
  .page{padding:186px 18px 30px}
}
@media (prefers-reduced-motion:reduce){
  .case img{transition:opacity .3s}
  #mur.actif .case img,.film img{filter:none}
  .film:hover img{transform:none}
}

/* ---------- page Info : prestations ---------- */
.offres{margin-top:8px}
.offre{
  padding:26px 0; border-top:1px solid rgba(255,255,255,.09);
}
.offre:first-child{border-top:0; padding-top:6px}
.offre .tete{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-bottom:10px;
}
.offre h3{font-size:17px; font-weight:500; letter-spacing:-.005em; color:#fff}
.offre .prix{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#9A9A9A; white-space:nowrap; text-align:right;
}
.offre p{margin-bottom:0; font-size:14.5px; color:#B4B4B4; line-height:1.8}
.offre .compris{
  margin-top:11px; font-size:12.5px; color:#8C8C8C; line-height:1.85;
  padding-left:15px; border-left:1px solid rgba(255,255,255,.13);
}

.marches{list-style:none; counter-reset:m; margin:6px 0 0}
.marches li{
  counter-increment:m; position:relative; padding-left:42px;
  margin-bottom:22px; font-size:14.5px; color:#B4B4B4; line-height:1.8;
}
.marches li::before{
  content:counter(m,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-size:11px; letter-spacing:.2em; color:#6E6E6E;
}
.marches strong{color:#E8E8E8; font-weight:500}

.note{
  margin-top:16px; padding:15px 17px;
  background:rgba(255,255,255,.035); border-left:1px solid rgba(255,255,255,.22);
  font-size:13.5px; color:#A8A8A8; line-height:1.8;
}