/* Portfolio gastronomie : emplacements photo, visionneuse et sélecteur de variantes.
   Les couleurs viennent de chaque variante (variables --emp-*). */

.emp {
  position: relative; margin: 0; overflow: hidden; container-type: inline-size;
  background-color: var(--emp-fond, #e3e3e1);
  background-image: linear-gradient(150deg, var(--emp-lueur, rgba(255,255,255,.35)) 0%, transparent 55%);
  color: var(--emp-texte, #6b6b6b);
}
.r-32 { aspect-ratio: 3 / 2; }  .r-23 { aspect-ratio: 2 / 3; }
.r-45 { aspect-ratio: 4 / 5; }  .r-54 { aspect-ratio: 5 / 4; }
.r-43 { aspect-ratio: 4 / 3; }  .r-34 { aspect-ratio: 3 / 4; }
.r-11 { aspect-ratio: 1; }      .r-169 { aspect-ratio: 16 / 9; }
.r-219 { aspect-ratio: 21 / 9; }
.r-portrait { aspect-ratio: 753 / 1162; }

.emp__vide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 28px; text-align: center;
}
.emp__vide::before {
  content: ''; position: absolute; inset: clamp(8px, 1.2cqi, 16px);
  border: 1px solid var(--emp-trait, rgba(23,21,15,.12)); pointer-events: none;
  border-radius: var(--emp-rayon-int, 0);
}
.emp__n { font: var(--emp-n, italic 400 22px/1 serif); color: var(--emp-accent, currentColor); margin-bottom: 6px; }
.emp__t { font: var(--emp-t, 400 22px/1.15 serif); color: var(--emp-titre, #17150f); }
.emp__d { font-size: 13px; line-height: 1.4; }
.emp__f { margin-top: 12px; font: 400 10px/1.4 var(--emp-sans, sans-serif); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.emp__f i { font-style: normal; margin: 0 .6em; opacity: .6; }
@container (max-width: 240px) {
  .emp__d { display: none; }
  .emp__t { font-size: 16px; }
  .emp__f { letter-spacing: .08em; font-size: 9px; }
}
@container (max-width: 150px) { .emp__f { display: none; } }

/* photo ou vidéo arrivée : elle remplit le cadre */
.emp--photo { background: var(--emp-fond, #e3e3e1); }
.emp > img, .emp > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-zoom].emp--photo { cursor: zoom-in; }

/* emplacement en fond (accueil, contact) : une simple étiquette discrète */
.emp--fond .emp__vide { inset: auto 0 auto 0; top: var(--emp-etiquette-haut, 120px); padding: 0; flex-direction: row; gap: 0; }
.emp--fond .emp__vide::before, .emp--fond .emp__n, .emp--fond .emp__d { display: none; }
.emp--fond .emp__t, .emp--fond .emp__f {
  margin: 0; font: 400 10px/1 var(--emp-sans, sans-serif); letter-spacing: .22em; text-transform: uppercase;
  color: var(--emp-etiquette, rgba(235,231,227,.6)); padding: 10px 0;
}
.emp--fond .emp__t::after { content: '·'; margin: 0 .8em; opacity: .6; }
.emp--fond .emp__fmt { display: none; }
#heroPause[hidden] { display: none; }

/* apparition */
.revele.cache, [data-zoom].cache { opacity: 0; transform: translateY(34px); }
.revele, [data-zoom] { transition: opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1); }

/* visionneuse */
.lightbox { position: fixed; inset: 0; z-index: 100; background: var(--lb-fond, rgba(17,16,13,.97)); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lb-img { max-width: 88vw; max-height: 84vh; object-fit: contain; }
.lb-btn { position: absolute; background: none; border: 0; color: #f5f5f4; cursor: pointer; font: 300 30px/1 var(--emp-sans, sans-serif); padding: 16px; opacity: .75; transition: opacity .3s; }
.lb-btn:hover { opacity: 1; }
.lb-close { top: 18px; right: 22px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
.lb-compte { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font: 400 13px/1 var(--emp-sans, sans-serif); letter-spacing: .2em; color: rgba(245,245,244,.7); }

/* sélecteur de variantes (outil de comparaison, à retirer avant la mise en ligne) */
.selecteur {
  position: fixed; right: 12px; bottom: 28px; z-index: 70; display: flex; gap: 2px; padding: 4px;
  background: #1a1918; border-radius: 999px; box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
  font: 500 11px/1 system-ui, sans-serif;
}
.selecteur a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border-radius: 999px; color: #b9b5b1; text-decoration: none; transition: background .25s, color .25s; }
.selecteur a:hover { color: #f5f5f4; }
.selecteur a[aria-current="page"] { background: #f5f5f4; color: #1a1918; }
.selecteur b { font-weight: 700; letter-spacing: .04em; }
@media (max-width: 700px) { .selecteur span { display: none; } .selecteur a { padding: 0 12px; } }
body.menu-ouvert .selecteur { display: none; }

@media (prefers-reduced-motion: reduce) {
  .revele, [data-zoom] { transition: none; }
}