/* ╔══════════════════════════════════════════════════════════════════╗
   ║  1. BANDEAU URGENCE — FIX DÉFINITIF                              ║
   ║     Simple spacer + display normal. Aucun sticky/fixed.          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Spacer qui pousse le contenu sous le nav fixe */
.nav-spacer {
  height: var(--nav-h, 80px);
  display: block;
}

/* L'urgence-band est dans le flux normal — pas de position spéciale */
.urgence-band {
  position: static;
  background: linear-gradient(135deg, #1A0F0A 0%, #1e1208 100%);
  border-bottom: 1px solid rgba(184,149,90,.2);
  border-top: none;
  padding: .7rem 0;
}

/* Hero : padding normal, le spacer s'est déjà occupé de l'offset nav */
.hero { margin-top: 0; }

@media (max-width: 960px) {
  .nav-spacer { height: var(--nav-h, 68px); }
  .urgence-txt { font-size: .58rem; letter-spacing: .13em; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  2. ICÔNES PERK — SVG premium (remplace les emojis)             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.perk {
  position: relative;
  padding: 2rem 1.5rem 1.8rem;
  border: 1px solid rgba(232,226,217,.07);
  background: var(--ch2, #171310);
  text-align: center;
  transition: border-color .35s, background .35s, transform .35s cubic-bezier(.19,1,.22,1);
  overflow: hidden;
}

.perk::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or, #B8955A), transparent);
  opacity: 0;
  transition: opacity .35s;
}

.perk:hover {
  border-color: rgba(184,149,90,.2);
  background: rgba(184,149,90,.04);
  transform: translateY(-4px);
}

.perk:hover::before {
  opacity: 1;
}

/* Conteneur icône — cercle or discret */
.perk-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(184,149,90,.2);
  background: rgba(184,149,90,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  transition: border-color .35s, background .35s;
  font-size: 0; /* masque l'emoji si toujours présent */
}
/* Masquer tout contenu texte (emoji) dans perk-ico */
.perk-ico::before { font-size: 0; }

.perk:hover .perk-ico {
  border-color: rgba(184,149,90,.45);
  background: rgba(184,149,90,.1);
}

.perk-ico svg {
  width: 22px;
  height: 22px;
  color: var(--or, #B8955A);
  stroke-width: 1.5;
  flex-shrink: 0;
}

.perk h4 {
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: .95rem;
  font-weight: 500;
  color: var(--stone2, #F4F0EB);
  margin-bottom: .5rem;
  letter-spacing: -.01em;
}

.perk p {
  font-size: .8rem;
  color: var(--muted, #8F8478);
  line-height: 1.65;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  3. LIGHTBOX GALERIE — overlay cinématique premium              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Overlay principal */
#lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5, 4, 3, .96);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.19,1,.22,1),
              visibility 0s linear .35s;
}

#lb-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s cubic-bezier(.19,1,.22,1),
              visibility 0s linear 0s;
}

/* Conteneur central image */
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100svh - 4rem);
}

/* Image */
.lb-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.lb-img-wrap img {
  max-width: 100%;
  max-height: calc(100svh - 8rem);
  object-fit: contain;
  display: block;
  transition: opacity .28s, transform .4s cubic-bezier(.19,1,.22,1);
}

.lb-img-wrap img.lb-transitioning {
  opacity: 0;
  transform: scale(.97);
}

/* Gradient bas pour la légende */
.lb-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(5,4,3,.7), transparent);
  pointer-events: none;
  border-radius: 0 0 2px 2px;
}

/* Légende */
.lb-caption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.5rem;
  right: 5rem;
  z-index: 1;
}

.lb-caption-title {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone2, #F4F0EB);
  display: block;
  margin-bottom: .2rem;
}

.lb-caption-sub {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or, #B8955A);
  opacity: .8;
}

/* Compteur */
.lb-counter {
  position: absolute;
  bottom: 1.4rem;
  right: 1.5rem;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--muted, #8F8478);
  z-index: 1;
}

/* Bouton fermer */
.lb-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9001;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(184,149,90,.35);
  background: rgba(20,17,14,.8);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--stone, #E8E2D9);
  transition: border-color .22s, background .22s, transform .22s;
}

.lb-close:hover {
  border-color: rgba(184,149,90,.7);
  background: rgba(184,149,90,.1);
  transform: rotate(90deg);
}

.lb-close svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

/* Flèches nav */
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9001;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(184,149,90,.2);
  background: rgba(10,8,6,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stone, #E8E2D9);
  transition: border-color .22s, background .22s, transform .22s;
  backdrop-filter: blur(8px);
}

.lb-prev { left: -70px; }
.lb-next { right: -70px; }

.lb-prev:hover,
.lb-next:hover {
  border-color: rgba(184,149,90,.5);
  background: rgba(184,149,90,.12);
}

.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }

.lb-prev svg,
.lb-next svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* Barre thumbnails en bas */
.lb-thumbs {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9001;
  display: flex;
  gap: 6px;
  max-width: calc(100vw - 4rem);
  overflow-x: auto;
  padding: .4rem;
  scrollbar-width: none;
  background: rgba(10,8,6,.6);
  border: 1px solid rgba(232,226,217,.06);
  backdrop-filter: blur(12px);
}

.lb-thumbs::-webkit-scrollbar { display: none; }

.lb-thumb {
  width: 48px;
  height: 36px;
  flex-shrink: 0;
  border: 1.5px solid transparent;
  overflow: hidden;
  cursor: pointer;
  opacity: .45;
  transition: opacity .22s, border-color .22s;
}

.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-thumb.active,
.lb-thumb:hover {
  opacity: 1;
  border-color: var(--or, #B8955A);
}

/* Cursor zoom sur les éléments galerie */
.gallery-item,
.case-img-wrap {
  cursor: zoom-in;
}

/* Touch swipe hint mobile */
@media (max-width: 768px) {
  .lb-prev { left: .5rem; width: 42px; height: 42px; }
  .lb-next { right: .5rem; width: 42px; height: 42px; }
  .lb-thumbs { display: none; }
  .lb-caption { right: 1rem; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  4. AMÉLIORATIONS ULTRA-PREMIUM                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── 4a. SECTION LABELS numérotés premium ───────────────────────── */
.s-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.s-label-n {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--or, #B8955A);
  opacity: .6;
}

.s-label-rule {
  flex: 1;
  height: 1px;
  background: rgba(232,226,217,.08);
  max-width: 80px;
}

.s-label-txt {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted, #8F8478);
}


/* ── 4b. SCROLL TOP BUTTON — premium ──────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(184,149,90,.3);
  background: rgba(14,12,10,.9);
  color: var(--or, #B8955A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1),
              border-color .22s, background .22s;
  backdrop-filter: blur(8px);
}

#scroll-top.on {
  opacity: 1;
  transform: translateY(0);
}

#scroll-top:hover {
  background: rgba(184,149,90,.12);
  border-color: rgba(184,149,90,.6);
}

#scroll-top svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}


/* ── 4c. REVEAL ANIMATIONS — améliorées ──────────────────────── */
[data-reveal] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.19,1,.22,1),
              transform .7s cubic-bezier(.19,1,.22,1);
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].on      { opacity: 1; transform: none; }


/* ── 4d. FORM INPUTS — focus premium ─────────────────────────── */
.form-lux input:focus,
.form-lux textarea:focus,
.form-lux select:focus {
  border-color: rgba(184,149,90,.5);
  box-shadow: 0 0 0 3px rgba(184,149,90,.08);
  outline: none;
}


/* ── 4e. GALLERY CASE CARDS — hover premium ──────────────────── */
.case-card {
  transition: transform .45s cubic-bezier(.19,1,.22,1);
}
.case-card:hover {
  transform: translateY(-6px);
}


/* ── 4f. BOUTONS — micro-interactions premium ─────────────────── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.06);
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(.19,1,.22,1);
}
.btn:hover::after {
  transform: translateX(0);
}


/* ── 4g. LIGNE DÉCORATIVE NAV → SECTION ─────────────────────── */
.section-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--or, #B8955A), transparent);
  margin: 2rem 0 3rem;
}


/* ── 4h. FOOTER LINKS — hover ligne ──────────────────────────── */
.footer-links a {
  position: relative;
  display: inline-block;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--or, #B8955A);
  transition: width .28s cubic-bezier(.19,1,.22,1);
}
.footer-links a:hover::after {
  width: 100%;
}


/* ── 4i. TABLE PRIX dans localités — alternance propre ───────── */
.price-guide .price-row:nth-child(even) > div {
  background: rgba(232,226,217,.02);
}


/* ── 4j. SELECTION COULEUR OR ────────────────────────────────── */
::selection {
  background: rgba(184,149,90,.25);
  color: var(--stone2, #F4F0EB);
}