/* =========================================
   RIVA , Design System
   ========================================= */

:root {
  /* Palette beige pastel + azur Côte d'Azur */
  --bg: #F5EFE6;            /* beige pastel chaud Saint-Tropezé */
  --bg-cream: #EBE3D5;      /* beige medium pour cards */
  --bg-deep: #141414;       /* noir profond footer */
  --text: #1A1A1A;
  --text-muted: #5A5A5A;
  --text-soft: #8A8A8A;
  --line: rgba(26, 26, 26, 0.1);
  /* Bleu azur, signature Côte d'Azur */
  --azur: #2E5C8A;
  --azur-soft: #6B95B8;
  --azur-deep: #1E4063;
  --azur-pale: #DCE7F0;
  /* Or doux, micro-accent texture luxe */
  --gold: #C4A88C;
  --gold-soft: #E8D9C0;
  /* Typo + layout */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1400px;
  --pad: clamp(1.5rem, 4vw, 4rem);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* =========================================
   Typography
   ========================================= */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h4 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.italic { font-style: normal; }

p { font-size: 1rem; line-height: 1.7; color: var(--text-muted); }
.lede { font-size: 1.125rem; line-height: 1.7; color: var(--text); }

/* =========================================
   Layout
   ========================================= */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section { padding: clamp(4rem, 10vw, 8rem) 0; }

/* =========================================
   Navigation
   ========================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.25rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 247, 242, 0);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
  backdrop-filter: blur(0);
}

.nav.scrolled {
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(20px);
  padding: 0.75rem var(--pad);
  border-bottom: 1px solid var(--line);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.25em;
  font-weight: 400;
  color: var(--text);
}

.nav.transparent .nav-logo,
.nav.transparent .nav-link,
.nav.transparent .nav-cta {
  color: #fff;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav-link {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.3s var(--ease);
}

.nav-link:hover { color: var(--gold); }

.nav-link.has-dropdown::after {
  content: "›";
  margin-left: 0.4rem;
  display: inline-block;
  transform: rotate(90deg);
  font-size: 0.75rem;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1.5rem 2rem;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease);
  list-style: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
  padding: 0.5rem 0;
}

.dropdown-menu a {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.dropdown-menu a:hover { color: var(--gold); }

.nav-cta {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.nav-cta:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.nav.transparent .nav-cta:hover {
  background: #fff;
  color: var(--text);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text);
  margin: 6px 0;
  transition: all 0.3s var(--ease);
}

.nav.transparent .nav-toggle span { background: #fff; }

/* =========================================
   Hero
   ========================================= */

.hero {
  height: 100vh;
  min-height: 700px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
  animation: kenBurns 20s ease-in-out infinite;
}

.hero-slide.active { opacity: 1; }

@keyframes kenBurns {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.08) translate(-1%, -1%); }
}

/* Placeholder gradients pour les slides du hero */
.hero-slide-1 { background: linear-gradient(135deg, #2a2a2a 0%, #4a3f33 50%, #6b5841 100%); }
.hero-slide-2 { background: linear-gradient(135deg, #1a2540 0%, #3d4f6b 50%, #6a7d99 100%); }
.hero-slide-3 { background: linear-gradient(135deg, #3a2820 0%, #5e3f2e 50%, #8a6b4f 100%); }
.hero-slide-4 { background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #6b7280 100%); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad) clamp(3rem, 8vw, 6rem);
}

.hero-content .eyebrow {
  color: var(--gold-soft);
}

.hero-title {
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

.hero-title em {
  font-style: normal;
  color: var(--gold-soft);
}

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 50ch;
  opacity: 0.92;
  margin-bottom: 2.5rem;
}

.hero-cta-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  writing-mode: vertical-rl;
}

/* =========================================
   Buttons
   ========================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: var(--sans);
  background: none;
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.btn-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.btn-light {
  background: #fff;
  color: var(--text);
  border-color: #fff;
}

.btn-light:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.btn-outline {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

.btn-outline:hover {
  background: currentColor;
  color: var(--bg);
}

.btn-text {
  border: none;
  padding: 0.5rem 0;
  letter-spacing: 0.1em;
  position: relative;
}

.btn-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.btn-text:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* =========================================
   Trust strip
   ========================================= */

.trust-strip {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-stars {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stars {
  color: var(--gold);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}

.trust-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.trust-count strong { color: var(--text); font-weight: 400; }

.featured-in {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.featured-in span:first-child {
  color: var(--text-muted);
  font-weight: 400;
}

/* =========================================
   Generic sections
   ========================================= */

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.section-header h2 { margin-bottom: 1.25rem; }

.section-header p { font-size: 1.0625rem; }

/* =========================================
   Occasions grid
   ========================================= */

.occasions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.occasion {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-deep);
}

.occasion-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease);
}

.occasion:hover .occasion-img { transform: scale(1.06); }

.occ-1 { background: linear-gradient(160deg, #2a2a2a 0%, #5e3f2e 100%); }
.occ-2 { background: linear-gradient(160deg, #1a2540 0%, #6a7d99 100%); }
.occ-3 { background: linear-gradient(160deg, #3a2820 0%, #8a6b4f 100%); }
.occ-4 { background: linear-gradient(160deg, #2f1f1a 0%, #7a5239 100%); }
.occ-5 { background: linear-gradient(160deg, #1f2937 0%, #6b7280 100%); }
.occ-6 { background: linear-gradient(160deg, #3a2820 0%, #b89870 100%); }

.occasion-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}

.occasion-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  color: #fff;
  z-index: 2;
}

.occasion-content h3 {
  font-size: 1.875rem;
  margin-bottom: 0.5rem;
}

.occasion-content p {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
}

/* =========================================
   Process / How it works
   ========================================= */

.process {
  background: var(--bg-deep);
  color: #fff;
}

.process .section-header h2 { color: #fff; }
.process .section-header p { color: rgba(255,255,255,0.75); }
.process .eyebrow { color: var(--gold); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}

.process-step {
  position: relative;
  padding-top: 2.5rem;
}

.process-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: var(--gold);
}

.step-num {
  font-family: var(--serif);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.process-step h3 {
  font-size: 1.625rem;
  color: #fff;
  margin-bottom: 1rem;
}

.process-step p {
  color: rgba(255,255,255,0.7);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* =========================================
   Reviews
   ========================================= */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.review {
  padding: 2.5rem;
  background: #fff;
  border: 1px solid var(--line);
}

.review-stars {
  color: var(--gold);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

.review-text {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1.5rem;
  font-style: normal;
}

.review-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.review-author {
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--text);
}

.review-loc {
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-top: 2px;
}

/* =========================================
   Destinations / Cities
   ========================================= */

.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.city-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  background: var(--bg-deep);
}

.city-img {
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--ease);
}

.city-card:hover .city-img { transform: scale(1.05); }

.city-1 { background: linear-gradient(160deg, #3a4a6b 0%, #8aa3c4 100%); }
.city-2 { background: linear-gradient(160deg, #5e4a3a 0%, #c4a888 100%); }
.city-3 { background: linear-gradient(160deg, #1f2940 0%, #5a6b8a 100%); }
.city-4 { background: linear-gradient(160deg, #6b4a3a 0%, #c49a72 100%); }
.city-5 { background: linear-gradient(160deg, #3a5a4f 0%, #8ab0a3 100%); }
.city-6 { background: linear-gradient(160deg, #4a3a2f 0%, #a88f72 100%); }

.city-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
}

.city-label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  color: #fff;
  z-index: 2;
  width: 100%;
}

.city-label h3 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.city-label small {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* =========================================
   Photographer profile section
   ========================================= */

.photographer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.photographer-img {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #2a2a2a 0%, #5a4a3a 100%);
}

.photographer-content h2 { margin-bottom: 1.5rem; }

.photographer-quote {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--text);
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
  margin: 2rem 0;
}

/* =========================================
   Portfolio grid
   ========================================= */

.portfolio-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1rem;
}

.portfolio-item {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
}

.portfolio-item:hover { opacity: 0.85; }

.portfolio-item.tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.portfolio-item.wide { grid-column: span 2; aspect-ratio: 2 / 1; }

.pf-1 { background: linear-gradient(135deg, #2a2a2a, #5a4a3a); }
.pf-2 { background: linear-gradient(135deg, #1a2540, #5a6a8a); }
.pf-3 { background: linear-gradient(135deg, #3a2820, #7a5239); }
.pf-4 { background: linear-gradient(135deg, #2f1f1a, #b89870); }
.pf-5 { background: linear-gradient(135deg, #1f2937, #6b7280); }
.pf-6 { background: linear-gradient(135deg, #4a3a2f, #c4a888); }
.pf-7 { background: linear-gradient(135deg, #2a3a4f, #6a8aa3); }
.pf-8 { background: linear-gradient(135deg, #3a5a4f, #8ab0a3); }

/* =========================================
   Pricing calculator
   ========================================= */

.calculator-section {
  background: var(--bg-deep);
  color: #fff;
}

.calculator-section .section-header h2 { color: #fff; }
.calculator-section .section-header p { color: rgba(255,255,255,0.7); }

.calculator {
  max-width: 920px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(2rem, 5vw, 4rem);
}

.calc-step {
  margin-bottom: 3rem;
}

.calc-step:last-of-type { margin-bottom: 0; }

.calc-label {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.calc-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.calc-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.calc-option {
  padding: 1.25rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s var(--ease);
  font-family: var(--sans);
  font-size: 0.875rem;
}

.calc-option-label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.calc-option-sub {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

.calc-option:hover {
  border-color: var(--gold-soft);
  background: rgba(255,255,255,0.04);
}

.calc-option.active {
  border-color: var(--gold);
  background: rgba(184, 152, 112, 0.1);
}

.calc-result {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.calc-result-label {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.calc-price {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: #fff;
}

.calc-price-sub {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.75rem;
  line-height: 1.6;
}

.calc-cta {
  white-space: nowrap;
}

/* Book Now CTA below price (mobile only) */
.calc-book-cta { display: none; }

@media (max-width: 768px) {
  .calc-book-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--azur);
    color: #fff;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.3s ease, transform 0.15s ease;
  }
  .calc-book-cta:hover { background: var(--azur-deep); }
  .calc-book-cta:active { transform: scale(0.98); }
  .calc-book-cta-arrow {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.3s ease;
  }
  .calc-book-cta:hover .calc-book-cta-arrow {
    transform: translate(2px, -2px);
  }
}

/* =========================================
   Timeline (process detailed)
   ========================================= */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3rem;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
}

.timeline-item {
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  background: var(--gold);
  border-radius: 50%;
  margin: 22px auto 2rem;
  position: relative;
  z-index: 1;
}

.timeline-item h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.timeline-item p {
  font-size: 0.9375rem;
  text-align: left;
}

.timeline-item ul {
  list-style: none;
  text-align: left;
  margin-top: 1rem;
}

.timeline-item li {
  font-size: 0.9375rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.timeline-item li::before {
  content: ",";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* =========================================
   FAQ
   ========================================= */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  width: 100%;
  padding: 2rem 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.faq-question:hover { color: var(--gold); }

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform 0.3s var(--ease);
}

.faq-icon::before { width: 16px; height: 1px; }
.faq-icon::after { width: 1px; height: 16px; }

.faq-item.open .faq-icon::after { transform: scaleY(0); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}

.faq-item.open .faq-answer {
  max-height: 500px;
}

.faq-answer-inner {
  padding: 0 0 2rem;
  max-width: 80%;
}

.faq-answer p {
  font-size: 1rem;
  line-height: 1.7;
}

/* =========================================
   CTA banner
   ========================================= */

.cta-banner {
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: var(--bg-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a2820 100%);
  opacity: 0.6;
}

.cta-banner-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.cta-banner h2 {
  color: #fff;
  margin-bottom: 1.5rem;
}

.cta-banner p {
  color: rgba(255,255,255,0.8);
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

/* =========================================
   Footer
   ========================================= */

.footer {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.7);
  padding: 5rem 0 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-brand .nav-logo {
  color: #fff;
  font-size: 1.75rem;
  display: block;
  margin-bottom: 1.5rem;
}

.footer-brand p {
  color: rgba(255,255,255,0.5);
  font-size: 0.9375rem;
  max-width: 28ch;
}

.footer-col h5 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  font-weight: 400;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  padding: 0.4rem 0;
}

.footer-col a {
  color: rgba(255,255,255,0.6);
  font-size: 0.9375rem;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}

/* =========================================
   Page hero (city pages)
   ========================================= */

.page-hero {
  height: 80vh;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: kenBurns 25s ease-in-out infinite;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad) 5rem;
}

.breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.5rem;
}

.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { margin: 0 0.75rem; color: rgba(255,255,255,0.4); }

.page-hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  margin-bottom: 1rem;
}

.page-hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  max-width: 50ch;
  opacity: 0.9;
}

/* =========================================
   Reveal animations
   ========================================= */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg);
    z-index: 99;
    padding: 6rem 2rem 2rem;
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
    overflow-y: auto;
  }

  .nav-mobile.open { transform: translateY(0); }

  .nav-mobile ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .nav-mobile a {
    font-family: var(--serif);
    font-size: 1.75rem;
    color: var(--text);
    padding: 0.75rem 0;
    display: block;
    border-bottom: 1px solid var(--line);
  }

  .nav-mobile .submenu {
    padding-left: 1rem;
    margin-bottom: 1rem;
  }

  .nav-mobile .submenu a {
    font-size: 1.25rem;
    border-bottom: none;
    padding: 0.4rem 0;
  }

  .photographer { grid-template-columns: 1fr; }
  .photographer-img { aspect-ratio: 3 / 4; max-height: 500px; }

  .portfolio { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item.wide { grid-column: span 2; }
  .portfolio-item.tall { grid-row: span 1; aspect-ratio: 1; }

  .timeline { grid-template-columns: 1fr; gap: 3rem; }
  .timeline::before { display: none; }

  .calc-result { grid-template-columns: 1fr; text-align: center; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .featured-in { font-size: 0.7rem; gap: 1rem; }

  .trust-row { flex-direction: column; gap: 1rem; }
}

@media (max-width: 480px) {
  .hero-cta-row .btn { padding: 0.875rem 1.5rem; font-size: 0.75rem; }
  .calc-options { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   MODERN LUXE OVERLAY (v2)
   Rounded corners systemic, FAQ numbered,
   Send Request form, Have a Question, Hero scroll.
   ========================================= */

/* Rounded corners on all photo placeholders & cards */
.occasion,
.city-card,
.portfolio-item,
.review,
.photographer-img {
  border-radius: var(--radius);
  overflow: hidden;
}

.calculator {
  border-radius: var(--radius-lg);
}

.calc-option {
  border-radius: var(--radius-pill);
}

.calc-option-label, .calc-option-sub {
  display: block;
}

.btn {
  border-radius: var(--radius-pill);
}

.review {
  padding: 2.5rem;
}

.nav-cta {
  border-radius: var(--radius-pill);
}

.dropdown-menu {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Hero scroll button (luxe pill style) */
.hero-scroll {
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: horizontal-tb;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 1;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.4s var(--ease);
}

.hero-scroll:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-50%) translateY(-4px);
}

.hero-scroll-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* FAQ , numbered editorial style (image 4 reference) */
.faq-numbered {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.faq-numbered-header h2 {
  margin-bottom: 1rem;
}

.faq-numbered-header p {
  font-size: 1rem;
  max-width: 30ch;
}

.faq-numbered-list .faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-numbered-list .faq-question {
  display: grid;
  grid-template-columns: 60px 1fr 48px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.75rem 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.faq-num {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--text-soft);
  letter-spacing: 0.05em;
}

.faq-q-text {
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.faq-circle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s var(--ease);
  background: transparent;
}

.faq-circle::before,
.faq-circle::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform 0.3s var(--ease);
}

.faq-circle::before { width: 14px; height: 1px; }
.faq-circle::after { width: 1px; height: 14px; }

.faq-item.open .faq-circle {
  background: var(--text);
  border-color: var(--text);
}

.faq-item.open .faq-circle::before,
.faq-item.open .faq-circle::after {
  background: #fff;
}

.faq-item.open .faq-circle::after {
  transform: scaleY(0);
}

.faq-numbered-list .faq-answer-inner {
  padding-left: calc(60px + 1.5rem);
  padding-right: 64px;
}

.faq-numbered-list .faq-question:hover .faq-q-text {
  color: var(--gold);
}

/* Have a Question section (image 7 reference) */
.have-question {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.have-question-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
}

.hq-visuals {
  position: relative;
  height: 480px;
}

.hq-photo {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.hq-photo-1 {
  top: 0;
  left: 8%;
  width: 60%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #1a2540 0%, #6a7d99 100%);
  transform: rotate(-3deg);
}

.hq-photo-2 {
  bottom: 0;
  left: 0;
  width: 55%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #2f1f1a 0%, #b89870 100%);
  transform: rotate(2deg);
}

.hq-trigger {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--text);
  font-style: normal;
  font-weight: 400;
  z-index: 2;
}

.hq-trigger-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.hq-trigger-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease);
}

.hq-trigger:hover .hq-trigger-arrow {
  transform: translate(2px, -2px);
}

.hq-card {
  background: #fff;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  text-align: center;
}

.hq-card h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}

.hq-card p {
  margin-bottom: 2rem;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

.hq-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--text);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.hq-cta:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.hq-cta-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Send Request form (replaces checkout) , image 5 inspiration */
.booking-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg);
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
}

.booking-form {
  background: #fff;
  padding: clamp(2rem, 3vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  position: sticky;
  top: 100px;
}

.booking-form h3 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.form-row {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s var(--ease);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--gold);
}

.form-summary {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}

.form-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  color: var(--text-muted);
}

.form-summary-row.total {
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
  padding-top: 0.875rem;
  font-weight: 400;
  color: var(--text);
  font-size: 1.0625rem;
}

.form-cta {
  width: 100%;
  background: var(--text);
  color: #fff;
  padding: 1.125rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: var(--sans);
  font-weight: 400;
}

.form-cta:hover {
  background: var(--gold);
}

.form-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
  width: 100%;
  padding: 1rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: var(--sans);
}

.form-whatsapp:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}

.form-promise {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

.form-promise strong {
  color: var(--text);
  font-weight: 400;
}

/* Booking right column , preview / details */
.booking-preview {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2a 0%, #5e3f2e 100%);
  aspect-ratio: 4 / 3;
  position: relative;
}

.booking-preview-pills {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.preview-pill {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-details {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.booking-details h4 {
  font-size: 1.375rem;
  margin-bottom: 1rem;
}

.booking-details p {
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.booking-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-top: 1rem;
}

.booking-feature {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.booking-feature::before {
  content: "✓";
  color: var(--gold);
  font-weight: 400;
}

/* Pills / tags */
.tag-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.125rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0.25rem 0.25rem 0;
}

/* Floating chatbot bubble */
.chatbot-launcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
  z-index: 50;
  transition: all 0.3s var(--ease);
}

.chatbot-launcher:hover {
  transform: scale(1.08);
  background: var(--gold);
}

.chatbot-launcher svg {
  width: 26px;
  height: 26px;
}

/* Responsive , new modules */
@media (max-width: 900px) {
  .faq-numbered { grid-template-columns: 1fr; gap: 2rem; }
  .have-question-grid { grid-template-columns: 1fr; }
  .hq-visuals { height: 320px; }
  .hq-trigger { position: relative; top: auto; right: auto; transform: none; justify-content: center; margin-top: 1rem; font-size: 1.5rem; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-form { position: static; }
}

@media (max-width: 768px) {
  .faq-numbered-list .faq-question {
    grid-template-columns: 40px 1fr 36px;
    gap: 1rem;
    font-size: 0.9375rem;
  }
  .faq-numbered-list .faq-answer-inner {
    padding-left: calc(40px + 1rem);
    padding-right: 0;
  }
  .booking-features { grid-template-columns: 1fr; }
  .chatbot-launcher { width: 52px; height: 52px; bottom: 1rem; right: 1rem; }
}

/* =========================================
   HERO EDITORIAL (v3, Photono inspired)
   3-column layout : categories | photo | bold title
   ========================================= */

.hero-editorial {
  min-height: 100vh;
  background: #B5B3AE;
  position: relative;
  padding: 6rem var(--pad) 3rem;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
  overflow: hidden;
}

/* Left , categories vertical list */
.hero-cats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 1rem;
}

.hero-cats-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero-cats-list li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.4s var(--ease);
  cursor: pointer;
  line-height: 1.15;
}

.hero-cats-list li:hover {
  color: rgba(255, 255, 255, 0.6);
}

.hero-cats-list li.active {
  color: #fff;
}

/* Artist mini card embedded in left column */
.hero-artist-card {
  margin: 1.5rem 0;
  width: 60%;
  max-width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, #4a3a2f 0%, #c4a888 100%);
  position: relative;
  cursor: pointer;
}

.hero-artist-card::after {
  content: "ARTIST";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
}

/* Pagination bottom-left */
.hero-pagination {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: auto;
}

.hero-bullets {
  display: flex;
  gap: 0.5rem;
}

.hero-bullet {
  width: 32px;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.hero-bullet.active {
  background: #fff;
}

.hero-arrows {
  display: flex;
  gap: 0.5rem;
}

.hero-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s var(--ease);
}

.hero-arrow:hover {
  background: #fff;
  color: var(--text);
}

/* Center , big photo */
.hero-photo {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  align-self: stretch;
}

.hero-photo-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.hero-photo-slide.active { opacity: 1; }

.hp-1 { background: linear-gradient(180deg, #4a4a4a 0%, #2f2f2f 100%); }
.hp-2 { background: linear-gradient(180deg, #5a4a3a 0%, #3a2820 100%); }
.hp-3 { background: linear-gradient(180deg, #3a4a6b 0%, #1a2540 100%); }
.hp-4 { background: linear-gradient(180deg, #6b5841 0%, #2a2a2a 100%); }
.hp-5 { background: linear-gradient(180deg, #4a3a2f 0%, #5e3f2e 100%); }

/* Right , bold title + subtext */
.hero-title-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 1rem;
}

.hero-big-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 6.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
}

.hero-big-title em {
  font-style: normal;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero-subtext {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  max-width: 36ch;
  margin-top: auto;
  text-align: right;
  margin-left: auto;
}

/* Editorial hero nav , override to match dark on light */
.hero-editorial + script + nav,
.nav-editorial {
  color: #fff;
}

/* Brand label top-left when hero-editorial active */
.hero-editorial-brand {
  position: absolute;
  top: 1.75rem;
  left: var(--pad);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  z-index: 5;
}

@media (max-width: 1024px) {
  .hero-editorial { grid-template-columns: 1fr 1.4fr; }
  .hero-title-col {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 2rem;
  }
  .hero-big-title { font-size: clamp(2.5rem, 7vw, 4.5rem); }
}

@media (max-width: 768px) {
  .hero-editorial {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 4rem;
  }
  .hero-cats { padding-top: 0; }
  .hero-cats-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
  .hero-cats-list li { font-size: 1rem; }
  .hero-artist-card { display: none; }
  .hero-photo { height: 60vh; min-height: 400px; order: -1; }
  .hero-title-col { padding-top: 1.5rem; }
  .hero-big-title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .hero-subtext { text-align: left; margin-left: 0; }
  .hero-pagination { margin-top: 1.5rem; }
}

/* =========================================
   AZUR PALETTE OVERRIDES (v4)
   Bleu azur prend la place du doré sur les accents primaires.
   Or reste sur les eyebrows et microtextures.
   ========================================= */

/* Buttons primary go azur */
.btn-primary {
  background: var(--azur);
  border-color: var(--azur);
  color: #fff;
}

.btn-primary:hover {
  background: var(--azur-deep);
  border-color: var(--azur-deep);
}

.btn-light:hover {
  background: var(--azur);
  border-color: var(--azur);
}

.form-cta { background: var(--azur); }
.form-cta:hover { background: var(--azur-deep); }

.hq-cta { background: var(--azur); }
.hq-cta:hover { background: var(--azur-deep); }

.nav-cta { border-color: var(--azur); color: var(--azur); }
.nav-cta:hover { background: var(--azur); color: #fff; border-color: var(--azur); }
.nav.transparent .nav-cta { color: #fff; border-color: rgba(255,255,255,0.6); }
.nav.transparent .nav-cta:hover { background: var(--azur); border-color: var(--azur); }

/* Hover navigation links to azur */
.nav-link:hover { color: var(--azur); }
.dropdown-menu a:hover { color: var(--azur); }
.footer-col a:hover { color: var(--azur); }

/* FAQ circle hover/open */
.faq-numbered-list .faq-question:hover .faq-q-text { color: var(--azur); }
.faq-item.open .faq-circle { background: var(--azur); border-color: var(--azur); }

/* Calc option active */
.calc-option.active {
  border-color: var(--azur);
  background: rgba(46, 92, 138, 0.12);
  color: #fff;
}

.calc-option:hover { border-color: var(--azur-soft); }

/* Process step accent */
.process-step::before { background: var(--azur); }
.step-num { color: var(--azur-soft); }
.process .eyebrow { color: var(--azur-soft); }

/* Timeline accents */
.timeline::before { background: var(--azur); opacity: 0.4; }
.timeline-dot { background: var(--azur); }
.timeline-item li::before { color: var(--azur); }

/* Photographer quote */
.photographer-quote { border-left-color: var(--azur); }

/* Review stars stay gold (luxe touch) */
.stars { color: var(--gold); }
.review-stars { color: var(--gold); }

/* Eyebrows : keep gold-ish but slightly more muted */
.eyebrow { color: var(--azur); }

/* Hero gradient slides , recalibrate to beige+azur tones */
.hero-slide-1 { background: linear-gradient(135deg, #2a3a55 0%, #4a6080 50%, #7a93b0 100%); }
.hero-slide-2 { background: linear-gradient(135deg, #1e4063 0%, #3a5a85 50%, #6b95b8 100%); }
.hero-slide-3 { background: linear-gradient(135deg, #c4a88c 0%, #e8d9c0 50%, #f5efe6 100%); }
.hero-slide-4 { background: linear-gradient(135deg, #2e5c8a 0%, #1e4063 100%); }

/* Hero editorial bg , beige medium */
.hero-editorial { background: #C4B5A0; }
.hero-cats-list li { color: rgba(20, 20, 20, 0.3); }
.hero-cats-list li:hover { color: rgba(20, 20, 20, 0.6); }
.hero-cats-list li.active { color: var(--text); }
.hero-big-title { color: var(--text); }
.hero-big-title em { color: var(--azur); }
.hero-subtext { color: rgba(20, 20, 20, 0.7); }
.hero-bullet { background: rgba(20,20,20,0.2); }
.hero-bullet.active { background: var(--text); }
.hero-arrow { border-color: rgba(20,20,20,0.3); color: var(--text); }
.hero-arrow:hover { background: var(--text); color: #fff; }
.hero-editorial-brand { color: var(--text); }
.hero-artist-card { background: linear-gradient(135deg, #2e5c8a 0%, #6b95b8 100%); }

/* Occasion placeholders to beige+azur tones */
.occ-1 { background: linear-gradient(160deg, #2e5c8a 0%, #6b95b8 100%); } /* yacht , blue */
.occ-2 { background: linear-gradient(160deg, #c4a88c 0%, #e8d9c0 100%); } /* villa , beige */
.occ-3 { background: linear-gradient(160deg, #1e4063 0%, #3a5a85 100%); } /* proposal , deep blue */
.occ-4 { background: linear-gradient(160deg, #d4bba0 0%, #f0e2c8 100%); } /* family , warm beige */
.occ-5 { background: linear-gradient(160deg, #2e5c8a 0%, #c4a88c 100%); } /* wedding , blue to beige */
.occ-6 { background: linear-gradient(160deg, #1a2540 0%, #2e5c8a 100%); } /* editorial , navy */

/* City cards , beige+azur tones */
.city-1 { background: linear-gradient(160deg, #2e5c8a 0%, #6b95b8 100%); }
.city-2 { background: linear-gradient(160deg, #c4a88c 0%, #e8d9c0 100%); }
.city-3 { background: linear-gradient(160deg, #1e4063 0%, #3a5a85 100%); }
.city-4 { background: linear-gradient(160deg, #d4bba0 0%, #b89878 100%); }
.city-5 { background: linear-gradient(160deg, #2e5c8a 0%, #c4a88c 100%); }
.city-6 { background: linear-gradient(160deg, #c4a88c 0%, #6b95b8 100%); }

/* Portfolio placeholders */
.pf-1 { background: linear-gradient(135deg, #2e5c8a, #6b95b8); }
.pf-2 { background: linear-gradient(135deg, #c4a88c, #e8d9c0); }
.pf-3 { background: linear-gradient(135deg, #1e4063, #3a5a85); }
.pf-4 { background: linear-gradient(135deg, #d4bba0, #b89878); }
.pf-5 { background: linear-gradient(135deg, #2e5c8a, #c4a88c); }
.pf-6 { background: linear-gradient(135deg, #1a2540, #2e5c8a); }
.pf-7 { background: linear-gradient(135deg, #6b95b8, #c4a88c); }
.pf-8 { background: linear-gradient(135deg, #2e5c8a, #1e4063); }

/* CTA banner */
.cta-banner-bg { background: linear-gradient(135deg, #1a1a1a 0%, #1e4063 100%); opacity: 0.85; }

/* Have a Question card */
.hq-photo-1 { background: linear-gradient(135deg, #2e5c8a 0%, #6b95b8 100%); }
.hq-photo-2 { background: linear-gradient(135deg, #c4a88c 0%, #e8d9c0 100%); }

/* =========================================
   FOOTER PHOTONO STYLE (v4)
   Big logo blocks, structured columns, dark bg
   ========================================= */

.footer-photono {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.7);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  position: relative;
}

.footer-photono-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 3rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: end;
}

.footer-logo-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-logo-block {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #fff;
}

.footer-logo-block:last-child {
  color: var(--azur-soft);
  font-style: normal;
  font-weight: 400;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -0.02em;
}

.footer-nav-top {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.footer-nav-top a {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  padding-bottom: 0.25rem;
  transition: color 0.2s var(--ease);
}

.footer-nav-top a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.footer-nav-top a:hover { color: var(--azur-soft); }

.footer-photono-mid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-block h5 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.footer-block p, .footer-block a {
  color: rgba(255,255,255,0.6);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.footer-block a:hover { color: var(--azur-soft); }

.footer-block ul {
  list-style: none;
}

.footer-block li {
  padding: 0.2rem 0;
}

.footer-socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}

.footer-social:hover {
  background: var(--azur);
  border-color: var(--azur);
  transform: translateY(-2px);
}

.footer-photono-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-languages {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footer-languages-label {
  color: rgba(255,255,255,0.5);
  font-size: 0.8125rem;
  margin-right: 0.5rem;
}

.footer-languages a {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  font-weight: 400;
  transition: color 0.2s var(--ease);
}

.footer-languages a.active,
.footer-languages a:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .footer-photono-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-nav-top { justify-content: flex-start; }
  .footer-photono-mid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
  .footer-photono-mid { grid-template-columns: 1fr; }
  .footer-photono-bottom { flex-direction: column; text-align: center; align-items: flex-start; }
}

/* =========================================
   FIXES v5 (Paul feedback)
   ========================================= */

/* CRITICAL : hide nav-mobile by default (was leaking in desktop) */
.nav-mobile {
  display: none;
}

@media (max-width: 768px) {
  .nav-mobile { display: block; }
}

/* Top bar : light frosted glass (subtle) */
.nav.transparent {
  background: rgba(20, 20, 20, 0.18);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.nav.scrolled {
  background: rgba(245, 239, 230, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

/* Artist name dynamic (replaces ARTIST static pill) */
.hero-artist-card {
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s var(--ease);
}

.hero-artist-card::after {
  content: attr(data-name);
  bottom: 12px;
  top: auto;
  left: 12px;
  right: 12px;
  transform: none;
  text-align: left;
  width: auto;
  background: rgba(20, 20, 20, 0.7);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
}

/* Photo category badge bottom-right (mobile-friendly visibility) */
.hero-photo {
  position: relative;
}

.hero-photo-tag {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-pill);
  z-index: 3;
}

/* Mobile categories carousel scroll under photo */
@media (max-width: 768px) {
  .hero-cats-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-cats-list::-webkit-scrollbar { display: none; }
  .hero-cats-list li {
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 1rem;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    flex-shrink: 0;
  }
  .hero-cats-list li.active {
    border-bottom-color: var(--azur);
  }
  .hero-photo {
    order: -2;
    height: 55vh;
    min-height: 360px;
  }
  .hero-cats {
    order: -1;
    padding-top: 0.5rem;
  }
}

/* How it Works : tight text, one-line where possible */
.process-step h3 {
  text-wrap: balance;
}

/* Reviews , horizontal scroll carousel */
.reviews-carousel-wrap {
  position: relative;
}

.reviews-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0 2rem;
  scrollbar-width: none;
}

.reviews-scroll::-webkit-scrollbar { display: none; }

.reviews-scroll .review {
  flex: 0 0 clamp(320px, 38vw, 460px);
  scroll-snap-align: start;
  padding: 2.5rem;
  border-radius: var(--radius);
}

.reviews-scroll .review-text {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

/* Carousel arrows (glassmorphism, both mobile and desktop) */
.carousel-arrows {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
}

.carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(20, 20, 20, 0.1);
  color: var(--text);
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
}

.carousel-arrow:hover {
  background: var(--azur);
  color: #fff;
  border-color: var(--azur);
  transform: scale(1.05);
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Section header alignment for carousel */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.section-header-row .section-header {
  text-align: left;
  margin: 0;
}

@media (max-width: 768px) {
  .section-header-row { flex-direction: column; align-items: flex-start; }
}

/* =========================================
   REAL PHOTOS (Unsplash, free-license)
   To replace with your own assets later.
   ========================================= */

.hero-photo-slide,
.occasion-img,
.city-img,
.portfolio-item,
.hq-photo,
.page-hero-bg,
.hero-artist-card {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero editorial , 5 photos sync with categories */
.hp-1 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1600&q=80&auto=format&fit=crop'); }    /* Yacht */
.hp-2 { background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1600&q=80&auto=format&fit=crop'); }    /* Villa pool */
.hp-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1600&q=80&auto=format&fit=crop'); }    /* Wedding couple */
.hp-4 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1600&q=80&auto=format&fit=crop'); }    /* Proposal ring */
.hp-5 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1600&q=80&auto=format&fit=crop'); }    /* Event champagne */

/* Artist photos (photographers behind the lens) */
.artist-1 { background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80&auto=format&fit=crop'); }
.artist-2 { background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80&auto=format&fit=crop'); }
.artist-3 { background-image: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600&q=80&auto=format&fit=crop'); }
.artist-4 { background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&q=80&auto=format&fit=crop'); }
.artist-5 { background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&q=80&auto=format&fit=crop'); }

/* Occasions grid */
.occ-1 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); } /* Yacht days */
.occ-2 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); } /* Villa events */
.occ-3 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80&auto=format&fit=crop'); } /* Proposals */
.occ-4 { background-image: url('https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1200&q=80&auto=format&fit=crop'); } /* Family */
.occ-5 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); } /* Weddings */
.occ-6 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); } /* Editorial */

/* Cities grid */
.city-1 { background-image: url('https://images.unsplash.com/photo-1551763041-c8123db20f43?w=1200&q=80&auto=format&fit=crop'); }  /* Saint-Tropez */
.city-2 { background-image: url('https://images.unsplash.com/photo-1564594985645-4427056e22e2?w=1200&q=80&auto=format&fit=crop'); }  /* Cannes */
.city-3 { background-image: url('https://images.unsplash.com/photo-1591291621214-d6e1f9ff0317?w=1200&q=80&auto=format&fit=crop'); }  /* Monaco */
.city-4 { background-image: url('https://images.unsplash.com/photo-1551431009-a802eeec77b1?w=1200&q=80&auto=format&fit=crop'); }  /* Nice */
.city-5 { background-image: url('https://images.unsplash.com/photo-1559070169-a3077159d559?w=1200&q=80&auto=format&fit=crop'); }  /* Antibes */
.city-6 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }  /* Cap-Ferrat */

/* Portfolio (city pages) */
.pf-1 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); }
.pf-2 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }
.pf-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); }
.pf-4 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1600&q=80&auto=format&fit=crop'); }
.pf-5 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); }
.pf-6 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80&auto=format&fit=crop'); }
.pf-7 { background-image: url('https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1200&q=80&auto=format&fit=crop'); }
.pf-8 { background-image: url('https://images.unsplash.com/photo-1551763041-c8123db20f43?w=1200&q=80&auto=format&fit=crop'); }

/* Have a Question floating photos */
.hq-photo-1 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop'); }
.hq-photo-2 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }

/* Page hero backgrounds (city pages, default to yacht shot, can vary per city) */
.page-hero-bg.hero-slide-1 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1920&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .page-hero-bg.hero-slide-1 { background-image: url('assets/photos/Saint-Tropez%20Photographer.jpg') !important; }

/* =========================================
   v6 : 8 hero slides + gender-aligned artists
   ========================================= */

/* Three new hero photos (Parties, Editorials, Portraits) */
.hp-6 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1600&q=80&auto=format&fit=crop'); } /* Parties (champagne) */
.hp-7 { background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?w=1600&q=80&auto=format&fit=crop'); } /* Editorials (fashion editorial) */
.hp-8 { background-image: url('https://images.unsplash.com/photo-1463453091185-61582044d556?w=1600&q=80&auto=format&fit=crop'); } /* Portraits (b&w portrait) */

/* Three new artist photos (gender-aligned to names) */
.artist-6 { background-image: url('https://images.unsplash.com/photo-1517841905240-472988babdf9?w=600&q=80&auto=format&fit=crop'); } /* Woman , ELENA */
.artist-7 { background-image: url('https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?w=600&q=80&auto=format&fit=crop'); } /* Man , LUCAS */
.artist-8 { background-image: url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=600&q=80&auto=format&fit=crop'); } /* Woman , CLARA */

/* =========================================
   v7 : Full-bleed carousels + Have a Question fix
   ========================================= */

/* Full-bleed wrapper : breaks out of the container to touch viewport edges */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Reviews carousel , full-bleed, edge-to-edge */
.reviews-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem var(--pad) 2.5rem;
  scrollbar-width: none;
}

.reviews-scroll::-webkit-scrollbar { display: none; }

/* Side carousel arrows (glassmorphism, vertically centered, attached to viewport edges) */
.carousel-side {
  position: relative;
}

.carousel-arrow-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(20, 20, 20, 0.08);
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: all 0.3s var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.carousel-arrow-side:hover {
  background: var(--azur);
  color: #fff;
  border-color: var(--azur);
}

.carousel-arrow-side.prev { left: 1rem; }
.carousel-arrow-side.next { right: 1rem; }

.carousel-arrow-side:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (min-width: 1024px) {
  .carousel-arrow-side.prev { left: 1.5rem; }
  .carousel-arrow-side.next { right: 1.5rem; }
}

/* Occasions , horizontal scroll carousel */
.occasions-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem var(--pad) 2.5rem;
  scrollbar-width: none;
}

.occasions-scroll::-webkit-scrollbar { display: none; }

.occasions-scroll .occasion {
  flex: 0 0 clamp(280px, 32vw, 400px);
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

/* Reset old grid pattern not needed anymore */
.occasions { gap: 1.5rem; }

/* HAVE A QUESTION , fix overlap (photos no longer cover trigger) */
.have-question-grid {
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hq-visuals {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hq-photos-stack {
  position: relative;
  width: 50%;
  height: 100%;
  flex-shrink: 0;
}

.hq-photo {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.hq-photo-1 {
  top: 0;
  left: 0;
  width: 92%;
  aspect-ratio: 5 / 4;
  transform: rotate(-3.5deg);
  z-index: 1;
}

.hq-photo-2 {
  bottom: 0;
  right: 0;
  width: 75%;
  aspect-ratio: 5 / 4;
  transform: rotate(2.5deg);
  z-index: 2;
}

.hq-trigger {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  transform: none;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--text);
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  flex-shrink: 0;
  padding: 1rem 1.25rem 1rem 0;
}

.hq-trigger span:first-child {
  white-space: normal;
}

.hq-trigger-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azur-soft), var(--azur));
  flex-shrink: 0;
}

.hq-trigger-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.hq-trigger:hover .hq-trigger-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 900px) {
  .hq-visuals { flex-direction: column; height: auto; gap: 1.5rem; }
  .hq-photos-stack { width: 100%; height: 260px; }
  .hq-photo-1 { width: 75%; }
  .hq-photo-2 { width: 60%; }
  .hq-trigger { justify-content: flex-start; padding: 0; }
}

/* =========================================
   v7 : Aerial drone photos for cities (Where we shoot)
   ========================================= */
.city-1 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1400&q=80&auto=format&fit=crop'); }  /* Saint-Tropez (med coast aerial) */
.city-2 { background-image: url('https://images.unsplash.com/photo-1614026480209-3d2d83663e5d?w=1400&q=80&auto=format&fit=crop'); }  /* Cannes (aerial coast) */
.city-3 { background-image: url('https://images.unsplash.com/photo-1591291621214-d6e1f9ff0317?w=1400&q=80&auto=format&fit=crop'); }  /* Monaco */
.city-4 { background-image: url('https://images.unsplash.com/photo-1571904086568-7a3a8c8ec1c8?w=1400&q=80&auto=format&fit=crop'); }  /* Nice (promenade aerial) */
.city-5 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1400&q=80&auto=format&fit=crop'); }  /* Antibes (yacht aerial) */
.city-6 { background-image: url('https://images.unsplash.com/photo-1572295907-8eaca08e7bf6?w=1400&q=80&auto=format&fit=crop'); }  /* Cap-Ferrat (peninsula aerial) */

/* =========================================
   v8 : Per-city portfolio photos (data-city on body)
   ========================================= */

/* Saint-Tropez , yachts, port, Pampelonne vibes */
body[data-city="saint-tropez"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1551763041-c8123db20f43?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="saint-tropez"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1551763041-c8123db20f43?w=1920&q=80&auto=format&fit=crop'); }

/* Cannes , Croisette, Festival, beach clubs */
body[data-city="cannes"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1564594985645-4427056e22e2?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1614026480209-3d2d83663e5d?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1564594985645-4427056e22e2?w=1920&q=80&auto=format&fit=crop'); }

/* Monaco , Casino, Port Hercule, F1 */
body[data-city="monaco"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1591291621214-d6e1f9ff0317?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1611956341017-83eb45b04293?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="monaco"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1591291621214-d6e1f9ff0317?w=1920&q=80&auto=format&fit=crop'); }

/* Nice , Promenade, Vieux Nice, Cap-de-Nice */
body[data-city="nice"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1551431009-a802eeec77b1?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1571904086568-7a3a8c8ec1c8?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="nice"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1551431009-a802eeec77b1?w=1920&q=80&auto=format&fit=crop'); }

/* Antibes , Port Vauban, Cap d'Antibes, superyachts */
body[data-city="antibes"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1611691543132-7e7d0e7c4c4b?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="antibes"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1920&q=80&auto=format&fit=crop'); }

/* Cap-Ferrat , peninsula, pine, hidden coves, villas */
body[data-city="cap-ferrat"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1572295907-8eaca08e7bf6?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1600&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1611956341017-83eb45b04293?w=1200&q=80&auto=format&fit=crop'); }
body[data-city="cap-ferrat"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1572295907-8eaca08e7bf6?w=1920&q=80&auto=format&fit=crop'); }

/* =========================================
   v9 : Hero fullscreen + people photos + monochrome + avatars
   ========================================= */

/* People-focused photos (yacht party, villa dinner, etc.) */
.hp-1 { background-image: url('https://images.unsplash.com/photo-1542319610-265bdf81c4d8?w=1600&q=80&auto=format&fit=crop'); }   /* Yacht party people */
.hp-2 { background-image: url('https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=1600&q=80&auto=format&fit=crop'); }   /* Villa pool people */
.hp-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1600&q=80&auto=format&fit=crop'); }   /* Wedding couple */
.hp-4 { background-image: url('https://images.unsplash.com/photo-1583744946564-b52ac1c389c8?w=1600&q=80&auto=format&fit=crop'); }   /* Proposal couple */
.hp-5 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1600&q=80&auto=format&fit=crop'); }   /* Event guests */
.hp-6 { background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1600&q=80&auto=format&fit=crop'); }   /* Party people */
.hp-7 { background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?w=1600&q=80&auto=format&fit=crop'); }   /* Editorial woman */
.hp-8 { background-image: url('https://images.unsplash.com/photo-1463453091185-61582044d556?w=1600&q=80&auto=format&fit=crop'); }   /* B&W portrait */

/* Subtle monochrome treatment on hero photos */
.hero-fullscreen .hero-photo-slide,
.hero-editorial .hero-photo-slide {
  filter: grayscale(0.55) contrast(1.05) brightness(0.92);
}

/* Hero FULLSCREEN (photo full-bleed, text overlay with glass) */
.hero-fullscreen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background: var(--bg-deep);
}

.hero-fullscreen > .hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
}

.hero-fullscreen .hero-photo-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  /* v53 : boost azur + contraste pour casser l'effet "sépia" perçu (photos golden hour très chaudes) */
  filter: saturate(1.15) contrast(1.05);
}

.hero-fullscreen .hero-photo-slide.active { opacity: 1; }

.hero-fullscreen-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* v52 : overlay allégé (ancien était double gradient très foncé qui donnait un effet couleur bizarre) */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.hero-fullscreen-grid {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 3rem;
  padding: 7rem var(--pad) 7rem;
  align-items: stretch;
}

.hero-fullscreen-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero-fullscreen .hero-cats-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.hero-fullscreen .hero-cats-list li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.4s var(--ease);
  cursor: pointer;
  line-height: 1.1;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  padding: 0.3rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  display: inline-block;
  white-space: nowrap;
}

.hero-fullscreen .hero-cats-list li:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
}

.hero-fullscreen .hero-cats-list li.active {
  color: #fff;
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.3);
}

.hero-fullscreen-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 2rem;
}

.hero-fullscreen .hero-big-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 6.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.45);
}

.hero-fullscreen .hero-big-title em {
  font-style: normal;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--azur-soft);
  letter-spacing: -0.01em;
}

.hero-fullscreen .hero-subtext {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  max-width: 38ch;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: right;
}

.hero-fullscreen .hero-photo-tag {
  position: absolute;
  bottom: 5.5rem;
  right: var(--pad);
  z-index: 3;
}

.hero-fullscreen .hero-artist-card {
  position: absolute;
  bottom: 5.5rem;
  left: var(--pad);
  width: 110px;
  z-index: 3;
}

.hero-fullscreen .hero-pagination {
  position: absolute;
  bottom: 2rem;
  left: var(--pad);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hero-fullscreen .hero-bullet { background: rgba(255,255,255,0.4); }
.hero-fullscreen .hero-bullet.active { background: #fff; }
.hero-fullscreen .hero-arrow {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}
.hero-fullscreen .hero-arrow:hover { background: #fff; color: var(--text); }

@media (max-width: 900px) {
  .hero-fullscreen-grid {
    grid-template-columns: 1fr;
    padding: 6rem var(--pad) 8rem;
    gap: 1.5rem;
  }
  .hero-fullscreen-left {
    align-items: stretch;
  }
  .hero-fullscreen .hero-cats-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .hero-fullscreen .hero-cats-list::-webkit-scrollbar { display: none; }
  .hero-fullscreen .hero-cats-list li {
    flex-shrink: 0;
    font-size: 0.95rem;
  }
  .hero-fullscreen-right {
    align-items: flex-start;
    text-align: left;
  }
  .hero-fullscreen .hero-subtext { text-align: left; max-width: 100%; }
  .hero-fullscreen .hero-artist-card { display: none; }
  .hero-fullscreen .hero-photo-tag { bottom: 1.25rem; right: 1.25rem; }
  .hero-fullscreen .hero-pagination { left: var(--pad); bottom: 1.25rem; }
}

/* Reviews avatars , real people photos */
.review-avatar {
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.review:nth-child(1) .review-avatar { background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80&auto=format&fit=crop'); }
.review:nth-child(2) .review-avatar { background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&q=80&auto=format&fit=crop'); }
.review:nth-child(3) .review-avatar { background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80&auto=format&fit=crop'); }
.review:nth-child(4) .review-avatar { background-image: url('https://images.unsplash.com/photo-1517841905240-472988babdf9?w=200&q=80&auto=format&fit=crop'); }
.review:nth-child(5) .review-avatar { background-image: url('https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?w=200&q=80&auto=format&fit=crop'); }
.review:nth-child(6) .review-avatar { background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80&auto=format&fit=crop'); }

/* Occasions , people-focused photos */
.occ-1 { background-image: url('https://images.unsplash.com/photo-1542319610-265bdf81c4d8?w=1200&q=80&auto=format&fit=crop'); } /* Yachts */
.occ-2 { background-image: url('https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=1200&q=80&auto=format&fit=crop'); } /* Villas */
.occ-3 { background-image: url('https://images.unsplash.com/photo-1583744946564-b52ac1c389c8?w=1200&q=80&auto=format&fit=crop'); } /* Proposals */
.occ-4 { background-image: url('https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1200&q=80&auto=format&fit=crop'); } /* Family */
.occ-5 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop'); } /* Wedding */
.occ-6 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); } /* Editorial */

/* =========================================
   v10 : Occasions bento layout + minimalist card
   v47 : Clean 3x3 grid, no overlaps, ~20% smaller, responsive
   ========================================= */

.occasions-bento {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  gap: 1.25rem;
  width: 100%;
  margin: 0 auto;
}

.occasions-bento .occasion {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  min-height: 220px;
  background: var(--bg-cream);
}

/* 5-card layout (kept for backward compat) : villa spans 2 rows */
.occasions-bento .occ-yacht    { grid-column: 1; grid-row: 1; }
.occasions-bento .occ-villa    { grid-column: 2; grid-row: 1 / 3; min-height: 460px; }
.occasions-bento .occ-wedding  { grid-column: 3; grid-row: 1; }
.occasions-bento .occ-proposal { grid-column: 3; grid-row: 2; }
.occasions-bento .occ-event    { grid-column: 1; grid-row: 2; }

/* 8-card layout (.eight) : 3 cols x 3 rows. Villa = only span. Pas de cellule vide. */
.occasions-bento.eight {
  grid-template-rows: repeat(3, minmax(220px, 1fr));
}
.occasions-bento.eight .occ-yacht     { grid-column: 1; grid-row: 1; }
.occasions-bento.eight .occ-villa     { grid-column: 2; grid-row: 1 / 3; min-height: 460px; }
.occasions-bento.eight .occ-wedding   { grid-column: 3; grid-row: 1; }
.occasions-bento.eight .occ-event     { grid-column: 1; grid-row: 2; }
.occasions-bento.eight .occ-proposal  { grid-column: 3; grid-row: 2; }
.occasions-bento.eight .occ-party     { grid-column: 1; grid-row: 3; }
.occasions-bento.eight .occ-editorial { grid-column: 2; grid-row: 3; min-height: 220px; }
.occasions-bento.eight .occ-portrait  { grid-column: 3; grid-row: 3; }

.occasions-bento .occasion-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s var(--ease);
}

.occasions-bento .occasion:hover .occasion-img { transform: scale(1.05); }

.occasions-bento .occasion-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.occasions-bento .occasion-content {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  color: #fff;
}

.occasions-bento .occasion-content h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  color: #fff;
  letter-spacing: -0.005em;
  margin: 0;
}

/* v52 : taille uniforme sur toutes les cartes du bento (auparavant villa + editorial avaient une grosse police, retiré) */

.occasions-bento .occasion-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}

.occasions-bento .occasion-cta:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.occasions-bento .occasion-cta-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

@media (max-width: 900px) {
  .occasions-bento,
  .occasions-bento.eight {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    max-width: 100%;
    gap: 1.5rem;
  }
  .occasions-bento .occasion,
  .occasions-bento.eight .occasion {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 240px !important;
  }
}

@media (max-width: 600px) {
  .occasions-bento,
  .occasions-bento.eight {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .occasions-bento .occasion,
  .occasions-bento.eight .occasion {
    min-height: 260px !important;
  }
}

/* Minimalist occasion photos (objects/places, not people) */
/* .occ-1 (Yacht) : photo Higgsfield (Nano Banana Pro, 4:5, 2K) — v47 */
/* Photos générées via Higgsfield (Nano Banana Pro, 4:5, 2K) — toutes Saint-Tropez / Riviera, people visible, editorial luxe */
.occ-1 { background-image: url('assets/photos/yacht-days.jpg'); }   /* Yacht Days     — couple sur superyacht 40m */
.occ-2 { background-image: url('assets/photos/villa.jpg'); }        /* Villa Events   — groupe de 6 sur terrasse villa */
.occ-3 { background-image: url('assets/photos/wedding.jpg'); }      /* Weddings       — mariés sunset */
.occ-4 { background-image: url('assets/photos/proposal.jpg'); }     /* Proposals      — demande genou en terre golden hour */
.occ-5 { background-image: url('assets/photos/event.jpg'); }        /* Private Events — dîner intimiste 8 personnes twilight */
.occ-6 { background-image: url('assets/photos/party.jpg'); }        /* Parties        — 5 amis sur yacht 30m sunset */
.occ-7 { background-image: url('assets/photos/editorial.jpg'); }    /* Editorial Sess — model solo sur falaises Cap-Ferrat */
.occ-8 { background-image: url('assets/photos/portrait.jpg'); }     /* Portraits      — femme assise terrasse villa morning */

/* =========================================
   v11 : Fix wrong Unsplash IDs (verified photos)
   ========================================= */

/* Verified working hero photos */
/* Hero slides : Higgsfield 16:9 desktop par défaut, 4:5 sur mobile via @media plus bas */
.hp-1 { background-image: url('assets/photos/yacht-16x9.jpg'); }     /* Yacht Days */
.hp-2 { background-image: url('assets/photos/villa-16x9.jpg'); }     /* Villa Events */
.hp-3 { background-image: url('assets/photos/wedding-16x9.jpg'); }   /* Weddings */
.hp-4 { background-image: url('assets/photos/proposal-16x9.jpg'); }  /* Proposals */
.hp-5 { background-image: url('assets/photos/event-16x9.jpg'); }     /* Private Events */
.hp-6 { background-image: url('assets/photos/party-16x9.jpg'); }     /* Parties */
.hp-7 { background-image: url('assets/photos/editorial-16x9.jpg'); } /* Editorial Sessions */
.hp-8 { background-image: url('assets/photos/portrait-16x9.jpg'); }  /* Portraits */

/* Hero mobile : utilise les 4:5 (mieux cadrés en portrait) */
@media (max-width: 900px) {
  .hp-1 { background-image: url('assets/photos/yacht-days.jpg') !important; }
  .hp-2 { background-image: url('assets/photos/villa.jpg') !important; }
  .hp-3 { background-image: url('assets/photos/wedding.jpg') !important; }
  .hp-4 { background-image: url('assets/photos/proposal.jpg') !important; }
  .hp-5 { background-image: url('assets/photos/event.jpg') !important; }
  .hp-6 { background-image: url('assets/photos/party.jpg') !important; }
  .hp-7 { background-image: url('assets/photos/editorial.jpg') !important; }
  .hp-8 { background-image: url('assets/photos/portrait.jpg') !important; }
}

/* =========================================
   v12 : Client avatars (distinct from artists)
   ========================================= */

/* Homepage reviews , 6 clients (W M W W M M based on names) */
.review:nth-child(1) .review-avatar { background-image: url('https://images.unsplash.com/photo-1554151228-14d9def656e4?w=200&q=80&auto=format&fit=crop'); }   /* Charlotte W. - woman */
.review:nth-child(2) .review-avatar { background-image: url('https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=200&q=80&auto=format&fit=crop'); }   /* Daniel R. - man */
.review:nth-child(3) .review-avatar { background-image: url('https://images.unsplash.com/photo-1521119989659-a83eee488004?w=200&q=80&auto=format&fit=crop'); }   /* Sophia A. - woman */
.review:nth-child(4) .review-avatar { background-image: url('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=200&q=80&auto=format&fit=crop'); }   /* Alessandra C. - woman */
.review:nth-child(5) .review-avatar { background-image: url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&q=80&auto=format&fit=crop'); }   /* Karim A. - man */
.review:nth-child(6) .review-avatar { background-image: url('https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=200&q=80&auto=format&fit=crop'); }   /* James M. - man */

/* Saint-Tropez reviews , 3 clients : James M (man), Alessandra C (woman), Andrew T (man) */
body[data-city="saint-tropez"] .review:nth-child(1) .review-avatar { background-image: url('https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=200&q=80&auto=format&fit=crop'); } /* James M - man */
body[data-city="saint-tropez"] .review:nth-child(2) .review-avatar { background-image: url('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=200&q=80&auto=format&fit=crop'); } /* Alessandra C - woman */
body[data-city="saint-tropez"] .review:nth-child(3) .review-avatar { background-image: url('https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?w=200&q=80&auto=format&fit=crop'); } /* Andrew T - man */

/* Defaults for other city pages : alternate M/W generic */
body[data-city="cannes"] .review:nth-child(1) .review-avatar,
body[data-city="monaco"] .review:nth-child(1) .review-avatar,
body[data-city="nice"] .review:nth-child(1) .review-avatar,
body[data-city="antibes"] .review:nth-child(1) .review-avatar,
body[data-city="cap-ferrat"] .review:nth-child(1) .review-avatar { background-image: url('https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .review:nth-child(2) .review-avatar,
body[data-city="monaco"] .review:nth-child(2) .review-avatar,
body[data-city="nice"] .review:nth-child(2) .review-avatar,
body[data-city="antibes"] .review:nth-child(2) .review-avatar,
body[data-city="cap-ferrat"] .review:nth-child(2) .review-avatar { background-image: url('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=200&q=80&auto=format&fit=crop'); }
body[data-city="cannes"] .review:nth-child(3) .review-avatar,
body[data-city="monaco"] .review:nth-child(3) .review-avatar,
body[data-city="nice"] .review:nth-child(3) .review-avatar,
body[data-city="antibes"] .review:nth-child(3) .review-avatar,
body[data-city="cap-ferrat"] .review:nth-child(3) .review-avatar { background-image: url('https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?w=200&q=80&auto=format&fit=crop'); }

/* =========================================
   v12 : Date picker (3rd calculator step)
   ========================================= */

.calc-calendar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem 1.5rem;
}

.calc-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--sans);
}

.calc-cal-nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.calc-cal-nav:hover { background: rgba(255, 255, 255, 0.14); }

.calc-cal-month {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
}

.calc-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}

.calc-cal-dow span {
  padding: 0.5rem 0;
}

.calc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.calc-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  background: transparent;
  border: none;
  font-family: var(--sans);
}

.calc-cal-day:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.calc-cal-day.disabled {
  opacity: 0.18;
  cursor: not-allowed;
}

.calc-cal-day.empty {
  visibility: hidden;
}

.calc-cal-day.active {
  background: var(--azur);
  color: #fff;
  font-weight: 400;
}

.calc-cal-day.today:not(.active) {
  border: 1px solid var(--azur-soft);
}

/* =========================================
   v13 : Hero stripped (no subtext, no artist card) + glass-text categories
   ========================================= */

/* Categories : remove pill glassmorphism, keep just translucent letters */
.hero-fullscreen .hero-cats-list.glass-text li {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0.15rem 0 !important;
  color: rgba(255, 255, 255, 0.32);
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero-fullscreen .hero-cats-list.glass-text li:hover {
  color: rgba(255, 255, 255, 0.65);
  background: transparent !important;
}

.hero-fullscreen .hero-cats-list.glass-text li.active {
  color: rgba(255, 255, 255, 0.96);
  background: transparent !important;
}

/* Hero title : Luxury Moments same typo as Private Photography (Inter 800 white) */
.hero-fullscreen .hero-big-title {
  font-weight: 400;
  color: #fff;
}

/* Hero right column : vertically centered (no subtext anymore) */
.hero-fullscreen-right {
  justify-content: center;
  gap: 0;
}

/* Mobile : categories still scrollable, but no pill */
@media (max-width: 900px) {
  .hero-fullscreen .hero-cats-list.glass-text li {
    padding: 0.4rem 0 !important;
  }
}

/* v14 (3x3 fallback layout) supprimé : remplacé par v44/v48 (5 cols × 2 rows) plus haut dans le fichier */

/* =========================================
   v15 : Mobile hero fix + cities carousel + lang switch
   ========================================= */

/* MOBILE : photo sous nav solide (v77) — offset bumpé à 88px pour matcher la hauteur réelle de la nav */
@media (max-width: 768px) {
  .hero-fullscreen .hero-photo {
    position: absolute !important;
    inset: auto !important;
    top: 88px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    order: 0 !important;
    z-index: 0;
  }
  .hero-fullscreen-grid {
    padding: 6rem 1.5rem 5rem !important;
    gap: 2rem !important;
  }
  .hero-fullscreen-left {
    align-items: stretch;
    width: 100%;
  }
  /* v54 : sur mobile, on stack les catégories verticalement (avant elles se chevauchaient en horizontal) */
  .hero-fullscreen .hero-cats-list {
    flex-direction: column !important;
    overflow: visible !important;
    gap: 0.4rem !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
  }
  .hero-fullscreen .hero-cats-list li {
    font-size: 0.95rem !important;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.25rem 0 !important;
  }
  .hero-fullscreen-right {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  .hero-fullscreen .hero-big-title {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
    text-align: left;
  }
  .hero-fullscreen .hero-pagination {
    left: 1.5rem;
    bottom: 1.5rem;
  }
}

/* Cities carousel scrollable */
.cities-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem var(--pad) 2.5rem;
  scrollbar-width: none;
}

.cities-scroll::-webkit-scrollbar { display: none; }

.cities-scroll .city-card {
  flex: 0 0 clamp(260px, 26vw, 340px);
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: block;
}

/* Cities photos , 2 verified-working photos per city */
.city-st-1 { background-image: url('assets/photos/Saint-Tropez%20Photographer.jpg'); background-position: center; }
.city-st-2 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1200&q=80&auto=format&fit=crop'); }
.city-cn-1 { background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1200&q=80&auto=format&fit=crop'); }
.city-cn-2 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop'); }
.city-mc-1 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); }
.city-mc-2 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80&auto=format&fit=crop'); }
.city-ni-1 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop'); }
.city-ni-2 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop'); }
.city-an-1 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop'); }
.city-an-2 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop'); }
.city-cf-1 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop'); }
.city-cf-2 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1200&q=80&auto=format&fit=crop'); }

.city-st-1, .city-st-2, .city-cn-1, .city-cn-2, .city-mc-1, .city-mc-2,
.city-ni-1, .city-ni-2, .city-an-1, .city-an-2, .city-cf-1, .city-cf-2 {
  background-size: cover;
  background-position: center;
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--ease);
}

.city-card:hover .city-img { transform: scale(1.05); }

/* Lang switch in nav , minimal flag selector */
.nav-cta-mini {
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem !important;
  font-size: 0.7rem !important;
}

.lang-switch {
  position: relative;
}

.lang-current {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

.lang-current img {
  display: inline-block;
  border-radius: 2px;
  vertical-align: middle;
}

.lang-current:hover {
  background: rgba(255,255,255,0.08);
}

.nav.scrolled .lang-current:hover {
  background: rgba(20,20,20,0.05);
}

.lang-options {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  list-style: none;
  padding: 0.5rem 0;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 50;
}

.lang-switch:hover .lang-options,
.lang-switch.open .lang-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-options li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text);
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.lang-options li a:hover {
  background: var(--bg-cream);
  color: var(--azur);
}

@media (max-width: 768px) {
  .lang-switch { display: none; }
  .nav-cta-mini { display: none; }
}

/* =========================================
   v16 : Mobile UX overhaul (Paul feedback)
   ========================================= */

/* HAVE A QUESTION fix mobile : clean stack centered */
@media (max-width: 900px) {
  .have-question { padding: 4rem 0; }
  .have-question-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    align-items: stretch;
  }
  .hq-visuals {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    gap: 1.5rem !important;
    width: 100%;
  }
  .hq-photos-stack {
    position: relative;
    width: 100% !important;
    max-width: 360px;
    height: 240px !important;
    margin: 0 auto;
  }
  .hq-photo-1 {
    top: 0; left: 0;
    width: 75% !important;
    aspect-ratio: 5 / 4;
    transform: rotate(-3deg);
  }
  .hq-photo-2 {
    bottom: 0; right: 0;
    width: 60% !important;
    aspect-ratio: 5 / 4;
    transform: rotate(2.5deg);
  }
  .hq-trigger {
    width: auto !important;
    justify-content: center !important;
    align-self: center;
    font-size: 1.5rem !important;
    padding: 0.5rem 0 !important;
    margin-top: 0 !important;
    text-align: center;
    gap: 0.875rem !important;
  }
  .hq-trigger span:first-child { text-align: center; }
  .hq-card {
    padding: 2rem 1.5rem !important;
    text-align: center;
  }
  .hq-card h3 { font-size: 1.5rem !important; }
  .hq-card p { font-size: 0.9375rem !important; }
  .hq-cta {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.75rem;
  }
}

/* v61 : OCCASIONS BENTO mobile = grid 2 cols × 4 rows (8 cartes en paires, stack vertical) */
@media (max-width: 768px) {
  .occasions-bento.eight {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(4, minmax(180px, auto)) !important;
    gap: 1rem !important;
    row-gap: 1rem !important;
    column-gap: 1rem !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100%;
  }
  .occasions-bento.eight .occasion {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 200px !important;
    aspect-ratio: 4 / 5;
    max-width: none !important;
    flex: none !important;
  }
  .occasions-bento.eight .occ-villa,
  .occasions-bento.eight .occ-editorial {
    min-height: 200px !important;
  }
}

/* FAQ , clean stack on mobile */
@media (max-width: 768px) {
  .faq-numbered { gap: 1.5rem !important; }
  .faq-numbered-header h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  .faq-numbered-header p { font-size: 0.9375rem; }
  .faq-numbered-list .faq-question {
    grid-template-columns: 32px 1fr 32px !important;
    gap: 0.75rem !important;
    font-size: 0.95rem !important;
    padding: 1.25rem 0 !important;
  }
  .faq-num { font-size: 0.75rem; }
  .faq-circle { width: 32px; height: 32px; }
  .faq-circle::before { width: 12px; }
  .faq-circle::after { height: 12px; }
  .faq-numbered-list .faq-answer-inner {
    padding-left: calc(32px + 0.75rem) !important;
    padding-right: 0 !important;
  }
  .faq-numbered-list .faq-answer-inner p { font-size: 0.9rem; }
}

/* CTA banner ("Begin Your Story") , readable mobile */
@media (max-width: 768px) {
  .cta-banner { padding: 4rem 1.5rem; }
  .cta-banner h2 { font-size: clamp(1.875rem, 7vw, 2.5rem); }
  .cta-banner p { font-size: 1rem; padding: 0 0.5rem; }
  .cta-banner .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.75rem;
  }
}

/* Footer Photono , clean stack mobile */
@media (max-width: 768px) {
  .footer-photono { padding: 3rem 0 1.5rem; }
  .footer-photono-top {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
  }
  .footer-logo-block {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }
  .footer-logo-block:last-child {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .footer-nav-top {
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    flex-wrap: wrap;
  }
  .footer-nav-top a { font-size: 0.875rem; }
  .footer-photono-mid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    margin-bottom: 2rem;
  }
  .footer-photono-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Cities cards mobile : already in carousel, slightly larger */
@media (max-width: 768px) {
  .cities-scroll {
    padding: 0.5rem 1.5rem 1.5rem;
  }
  .cities-scroll .city-card {
    flex: 0 0 78vw !important;
    max-width: 320px;
  }
}

/* Reviews scroll mobile padding */
@media (max-width: 768px) {
  .reviews-scroll {
    padding: 0.5rem 1.5rem 2rem;
  }
  .reviews-scroll .review {
    flex: 0 0 82vw !important;
    max-width: 360px;
    padding: 2rem !important;
  }
  .reviews-scroll .review-text {
    font-size: 1.125rem !important;
  }
}

/* Process steps mobile : collapsible accordion + tightened sizing */
.step-toggle { display: none; }

@media (max-width: 768px) {
  .process-steps { gap: 1.25rem; margin-top: 2rem; }
  .process-step { padding-top: 1.5rem; }
  .process-step h3 {
    font-family: var(--sans);
    font-size: 1.25rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    letter-spacing: 0;
  }
  .process-step .step-title { flex: 1; font-family: var(--sans); }
  /* v66 : harmonise step-prefix + step-when with title typo (mobile) */
  .process-step .step-prefix {
    font-family: var(--sans) !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    margin-right: 0.4rem !important;
    vertical-align: baseline !important;
    top: 0 !important;
  }
  .process-step .step-when {
    font-family: var(--sans) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .step-toggle {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s ease, background 0.3s ease;
  }
  .step-toggle::before,
  .step-toggle::after {
    content: "";
    position: absolute;
    background: #fff;
    transition: opacity 0.3s ease;
  }
  .step-toggle::before { width: 10px; height: 1.5px; }
  .step-toggle::after { width: 1.5px; height: 10px; }
  .process-step.open .step-toggle { transform: rotate(135deg); background: rgba(255,255,255,0.1); }
  .process-step p {
    font-size: 0.85rem;
    line-height: 1.55;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }
  .process-step.open p {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.85rem;
  }
}

/* Section general mobile padding tweak */
@media (max-width: 768px) {
  section { padding: 4rem 0; }
  .section-header { margin-bottom: 2.5rem; }
  .section-header h2 { font-size: clamp(1.875rem, 7vw, 2.75rem); }
  .section-header p { font-size: 0.95rem; }
}

/* Trust strip mobile */
@media (max-width: 768px) {
  .trust-strip { padding: 1.25rem 0; }
  .trust-row { gap: 1rem; }
  .featured-in { font-size: 0.7rem !important; gap: 0.75rem !important; }
}

/* Pricing calculator mobile */
@media (max-width: 768px) {
  .calculator-section { padding: 4rem 0; }
  .calculator {
    padding: 1.5rem !important;
    border-radius: var(--radius) !important;
  }
  .calc-options {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }
  .calc-option {
    padding: 0.875rem 0.5rem !important;
    border-radius: var(--radius-sm) !important;
  }
  .calc-option-label { font-size: 0.875rem !important; }
  .calc-option-sub { font-size: 0.7rem !important; }
  .calc-result {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 1.5rem !important;
    margin-top: 2.5rem !important;
    padding-top: 2rem !important;
  }
  .calc-price { font-size: 2.5rem !important; }
  .calc-price-sub { font-size: 0.8125rem !important; }
  .calc-cta { width: 100%; justify-content: center; }
}

/* Page hero (city pages) mobile */
@media (max-width: 768px) {
  .page-hero {
    height: 70vh;
    min-height: 480px;
  }
  .page-hero h1 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .page-hero-sub { font-size: 0.95rem; }
}

/* Portfolio grid mobile (city pages) */
@media (max-width: 768px) {
  .portfolio {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .portfolio-item.tall { grid-row: span 1; aspect-ratio: 1; }
  .portfolio-item.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* Timeline (process) mobile : single col */
@media (max-width: 768px) {
  .timeline {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .timeline::before { display: none; }
  .timeline-item { padding: 0; text-align: left; }
  .timeline-dot { margin: 0 0 1rem 0; }
  .timeline-item h4 { font-size: 1.375rem; }
}

/* Chatbot launcher mobile : smaller */
@media (max-width: 768px) {
  .chatbot-launcher {
    width: 48px !important;
    height: 48px !important;
    bottom: 1rem !important;
    right: 1rem !important;
  }
  .chatbot-launcher svg { width: 22px; height: 22px; }
}

/* =========================================
   v17 : Compact bento + 1-line titles + mobile padding
   ========================================= */

/* Bento : reduce row min-height so all 8 cards fit in viewport */
.occasions-bento.eight {
  grid-template-rows: repeat(3, minmax(190px, auto)) !important;
  gap: 0.875rem !important;
}

.occasions-bento.eight .occ-villa { min-height: 400px !important; }

.occasions-bento.eight .occasion { min-height: 190px !important; }

/* Compact cards content */
.occasions-bento .occasion-content {
  padding: 1.125rem !important;
}

.occasions-bento .occasion-content h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important;
}
/* v52 : villa + editorial avaient une taille spéciale (grand format), retirée pour uniformiser */

.occasions-bento .occasion-cta {
  padding: 0.625rem 1rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
}

.occasions-bento .occasion-cta-arrow {
  width: 20px !important;
  height: 20px !important;
  font-size: 0.75rem !important;
}

/* Section headers : prefer 1 line on desktop, balanced wrap */
.section-header h2 {
  text-wrap: balance;
}

.section-header {
  max-width: 920px !important;
}

@media (min-width: 1100px) {
  .section-header h2 {
    white-space: nowrap;
  }
  .section-header {
    max-width: none !important;
  }
}

/* Tighter section header margin */
.section-header {
  margin-bottom: 2.5rem !important;
}

/* Section vertical padding tightened on desktop too */
section {
  padding: clamp(3.5rem, 7vw, 6rem) 0 !important;
}

/* Mobile padding reduced */
@media (max-width: 768px) {
  section { padding: 3rem 0 !important; }
  .section-header { margin-bottom: 1.75rem !important; }
  .section-header h2 {
    font-size: clamp(1.625rem, 6vw, 2.25rem) !important;
    white-space: normal !important;
  }
  .have-question { padding: 3rem 0 !important; }
  .calculator-section { padding: 3rem 0 !important; }
  .footer-photono { padding: 2.5rem 0 1.5rem !important; }
}

/* =========================================
   v18 : Step prefix inline with title
   ========================================= */

.process-step .step-prefix {
  color: var(--azur-soft);
  font-family: var(--sans);
  font-size: 0.65em;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.15em;
}

/* Hide the old step-num if it still appears anywhere */
.process-step .step-num { display: none; }

/* =========================================
   v19 : Mobile hero remixed + bento force scroll + softer arrows
   ========================================= */

@media (max-width: 768px) {
  /* ===== HERO mobile : title top, photo middle (4/5), categories bottom ===== */
  .hero-fullscreen {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: var(--bg) !important;
  }
  .hero-fullscreen-overlay { display: none !important; }
  .hero-fullscreen .hero-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    order: 1;
  }
  .hero-fullscreen-grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 5.5rem 1.25rem 0.75rem !important;
    gap: 0.75rem !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
  }
  .hero-fullscreen-right {
    order: 0;
    width: 100%;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero-fullscreen .hero-big-title {
    font-size: clamp(1.5rem, 6.5vw, 2.25rem) !important;
    line-height: 1.05 !important;
    color: var(--text) !important;
    text-shadow: none !important;
  }
  .hero-fullscreen-left {
    order: 2;
    width: 100%;
    align-items: stretch !important;
    padding: 0 !important;
  }
  .hero-fullscreen .hero-cats-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    padding: 0.75rem 0 !important;
    scrollbar-width: none;
  }
  .hero-fullscreen .hero-cats-list::-webkit-scrollbar { display: none; }
  .hero-fullscreen .hero-cats-list.glass-text li {
    color: rgba(20, 20, 20, 0.4) !important;
    text-shadow: none !important;
    font-size: 0.9rem !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .hero-fullscreen .hero-cats-list.glass-text li:hover,
  .hero-fullscreen .hero-cats-list.glass-text li.active {
    color: var(--text) !important;
  }
  .hero-fullscreen .hero-pagination {
    position: static !important;
    order: 3;
    padding: 0 1.25rem 1rem !important;
    margin-top: 0 !important;
    width: 100%;
    justify-content: space-between;
  }
  .hero-fullscreen .hero-bullet { background: rgba(20,20,20,0.25); }
  .hero-fullscreen .hero-bullet.active { background: var(--text); }
  .hero-fullscreen .hero-arrow {
    border-color: rgba(20,20,20,0.25) !important;
    color: var(--text) !important;
    background: rgba(255,255,255,0.4) !important;
    backdrop-filter: blur(12px);
    width: 32px;
    height: 32px;
  }

  /* ===== BENTO mobile : full-bleed scroll (v71 : padding-left = var(--pad)) ===== */
  .occasions-bento,
  .occasions-bento.eight {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto !important;
    gap: 0.75rem !important;
    padding: 0.5rem 0 1.5rem var(--pad) !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .occasions-bento::-webkit-scrollbar,
  .occasions-bento.eight::-webkit-scrollbar { display: none; }
  .occasions-bento .occasion,
  .occasions-bento.eight .occasion {
    flex: 0 0 75vw !important;
    max-width: 300px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    height: 360px !important;
    aspect-ratio: auto !important;
    scroll-snap-align: start;
    border-radius: var(--radius) !important;
    overflow: hidden;
  }

  /* ===== Have a Question : add right padding (no edge sticking) ===== */
  .have-question .container { padding: 0 1.25rem !important; }
  .have-question-grid { gap: 1.5rem !important; }
  .hq-card { 
    padding: 1.75rem 1.25rem !important;
    margin: 0 !important;
  }
}

/* ===== Carousel arrows : softer glassmorphism (all viewports) ===== */
.carousel-arrow-side {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(20, 20, 20, 0.7) !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
}

.carousel-arrow-side:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* Allow disabled (start/end) arrows to be lighter but still clickable visually */
.carousel-arrow-side:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  .carousel-arrow-side {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.875rem !important;
  }
  .carousel-arrow-side.prev { left: 0.5rem !important; }
  .carousel-arrow-side.next { right: 0.5rem !important; }
}

/* =========================================
   v20 : Nav logo blocks + Footer WhatsApp + Footer top alignment
   ========================================= */

/* Nav logo : same blocks style as footer, but compact for topbar */
.nav-logo-blocks {
  display: flex;
  flex-direction: column;
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 0.15rem 0;
}

.nav-logo-blocks span:last-child {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 1rem;
  margin-top: 1px;
  color: var(--azur-soft);
}

.nav.transparent .nav-logo-blocks span:last-child { color: var(--azur-soft); }
.nav.scrolled .nav-logo-blocks span:last-child { color: var(--azur); }

@media (max-width: 768px) {
  .nav-logo-blocks { font-size: 0.875rem; }
  .nav-logo-blocks span:last-child { font-size: 0.875rem; }
}

/* Footer top : keep logo + nav on same line even on smaller screens (until really small) */
@media (max-width: 900px) and (min-width: 481px) {
  .footer-photono-top {
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
    gap: 1.5rem !important;
  }
  .footer-nav-top {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.75rem !important;
    text-align: right;
  }
  .footer-logo-block { font-size: clamp(2.5rem, 9vw, 4rem) !important; }
  .footer-logo-block:last-child { font-size: clamp(2rem, 7vw, 3.25rem) !important; }
}

/* Footer WhatsApp button */
.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366 !important;
  font-family: var(--sans);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}

.footer-whatsapp:hover {
  background: #25D366;
  color: #fff !important;
  border-color: #25D366;
  transform: translateY(-2px);
}

.footer-whatsapp svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* =========================================
   v21 : Pricing calculator , 2-col desktop layout (1 viewport)
   ========================================= */

@media (min-width: 900px) {
  .calculator {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
    padding: 2.25rem 2.5rem !important;
    align-items: start;
  }
  .calculator .calc-step:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0 !important;
  }
  .calculator .calc-step:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0 !important;
  }
  .calculator .calc-step:nth-of-type(3) {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-bottom: 0 !important;
  }
  .calculator .calc-result {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  /* Tighter inner spacing */
  .calc-label { margin-bottom: 0.875rem !important; }
  .calc-options { gap: 0.5rem !important; }
  .calc-option { padding: 0.75rem 0.5rem !important; }
  .calc-calendar { padding: 0.875rem 1rem 1rem !important; }
  .calc-cal-grid { gap: 0.1rem !important; }
  .calc-cal-day { font-size: 0.8125rem !important; }
  /* Section padding tightened so all fits in 1 viewport */
  .calculator-section { padding: clamp(2.5rem, 5vw, 4rem) 0 !important; }
  .calculator-section .section-header { margin-bottom: 1.5rem !important; }
  .calculator-section .section-header h2 { font-size: clamp(2rem, 3.5vw, 2.5rem) !important; }
  .calculator-section .section-header p { font-size: 0.9375rem !important; }
}

/* =========================================
   v22 : Tighter calculator , fit on 1 viewport
   ========================================= */

@media (min-width: 900px) {
  .calculator-section { padding: 2rem 0 3rem !important; }
  .calculator-section .section-header {
    margin-bottom: 1.25rem !important;
  }
  .calculator-section .section-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    margin-bottom: 0.5rem !important;
  }
  .calculator-section .section-header p {
    font-size: 0.875rem !important;
    margin: 0 auto;
  }
  .calculator-section .section-header .eyebrow {
    margin-bottom: 0.625rem !important;
  }
  .calculator {
    padding: 1.75rem 2rem !important;
    column-gap: 2rem !important;
    row-gap: 1.25rem !important;
  }
  .calc-step { margin-bottom: 0 !important; }
  .calc-label { margin-bottom: 0.75rem !important; font-size: 0.7rem !important; }
  .calc-options { gap: 0.4rem !important; }
  .calc-option { padding: 0.625rem 0.5rem !important; }
  .calc-option-label { font-size: 0.875rem !important; }
  .calc-option-sub { font-size: 0.65rem !important; }
  /* Calendar tighter */
  .calc-calendar { padding: 0.75rem 1rem 0.875rem !important; }
  .calc-cal-header { margin-bottom: 0.625rem !important; }
  .calc-cal-nav { width: 28px !important; height: 28px !important; font-size: 0.75rem !important; }
  .calc-cal-month { font-size: 0.85rem !important; }
  .calc-cal-dow { font-size: 0.65rem !important; margin-bottom: 0.25rem !important; }
  .calc-cal-dow span { padding: 0.3rem 0 !important; }
  .calc-cal-grid { gap: 0.1rem !important; }
  .calc-cal-day { font-size: 0.75rem !important; }
  /* Result tighter */
  .calc-result {
    margin-top: 0.5rem !important;
    padding-top: 1.25rem !important;
    gap: 1rem !important;
  }
  .calc-result-label { margin-bottom: 0.25rem !important; font-size: 0.65rem !important; }
  .calc-price { font-size: clamp(2rem, 3.5vw, 3rem) !important; }
  .calc-price-sub { font-size: 0.8125rem !important; margin-top: 0.5rem !important; }
}

/* =========================================
   v23 : Mobile hero , photo full background, text/cats/pagination IN GLASS overlay
   (Override v19 which had content below the photo)
   ========================================= */

@media (max-width: 768px) {
  .hero-fullscreen {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 760px !important;
    padding: 0 !important;
    background: var(--bg-deep) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-fullscreen-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none;
    /* v52 : overlay mobile allégé aussi */
    background:
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%) !important;
  }

  .hero-fullscreen .hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    z-index: 0 !important;
    margin: 0 !important;
  }

  .hero-fullscreen-grid {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 5rem 1.25rem 4.25rem !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    height: 100%;
  }

  .hero-fullscreen-right {
    order: 0 !important;
    width: 100%;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  .hero-fullscreen .hero-big-title {
    font-size: clamp(1.625rem, 7vw, 2.5rem) !important;
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4) !important;
    line-height: 1 !important;
    background: none !important;
    backdrop-filter: none !important;
  }

  .hero-fullscreen-left {
    order: 1 !important;
    width: 100%;
    align-items: stretch !important;
    margin-top: auto !important;
  }
  /* Categories : glassmorphism back , translucent letters on photo */
  .hero-fullscreen .hero-cats-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    padding: 0.5rem 0 !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .hero-fullscreen .hero-cats-list::-webkit-scrollbar { display: none; }
  .hero-fullscreen .hero-cats-list.glass-text li {
    color: rgba(255, 255, 255, 0.45) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.35) !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0.2rem 0 !important;
    flex-shrink: 0;
    white-space: nowrap;
    backdrop-filter: none !important;
  }
  .hero-fullscreen .hero-cats-list.glass-text li.active,
  .hero-fullscreen .hero-cats-list.glass-text li:hover {
    color: rgba(255,255,255,0.98) !important;
    background: transparent !important;
  }

  /* Pagination , glass on photo bottom */
  .hero-fullscreen .hero-pagination {
    position: absolute !important;
    bottom: 1rem !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
    z-index: 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .hero-fullscreen .hero-bullet { background: rgba(255,255,255,0.4) !important; }
  .hero-fullscreen .hero-bullet.active { background: #fff !important; }
  .hero-fullscreen .hero-arrow {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(16px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0.875rem !important;
  }
  .hero-fullscreen .hero-arrow:hover { background: rgba(255,255,255,0.3) !important; }
}

/* =========================================
   v24 : Original RIVA logo + "Photography" subtitle
   ========================================= */

.nav-logo {
  display: inline-flex !important;
  flex-direction: column;
  line-height: 1;
  padding: 0.1rem 0;
  text-decoration: none;
}

.nav-logo .logo-main {
  font-family: var(--serif) !important;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: inherit;
}

.nav-logo .logo-sub {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .nav-logo .logo-main { font-size: 1.85rem; letter-spacing: 0.22em; }
  .nav-logo .logo-sub { font-size: 0.7rem; letter-spacing: 0.3em; margin-top: 5px; opacity: 0.85; }
}

/* Footer logo : RIVA big serif + Photography subtitle (override blocks) */
.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.footer-logo-main {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: 0.12em;
  color: #fff;
  line-height: 0.9;
}

.footer-logo-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--azur-soft);
  margin-top: 0.875rem;
  padding-left: 0.2rem;
}

/* Hide old block styles if remaining */
.footer-logo-blocks { display: none !important; }
.footer-logo-block { display: none !important; }
.nav-logo-blocks span { display: none !important; }

/* =========================================
   v25 : Mobile hero , title at bottom + categories wrap 2 lines
   ========================================= */

@media (max-width: 768px) {
  .hero-fullscreen-grid {
    justify-content: flex-end !important;
    padding: 5rem 1.25rem 4.5rem !important;
  }

  /* Title goes just above the categories (both at bottom area) */
  .hero-fullscreen-right {
    order: 0 !important;
    margin: 0 0 1rem 0 !important;
    flex: 0 0 auto;
  }
  .hero-fullscreen-left {
    order: 1 !important;
    margin-top: 0 !important;
    flex: 0 0 auto;
  }

  /* Categories : wrap to 2 lines, no horizontal scroll */
  .hero-fullscreen .hero-cats-list {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    overflow: visible !important;
    gap: 0.4rem 1rem !important;
    padding: 0 !important;
    justify-content: flex-start;
  }
  .hero-fullscreen .hero-cats-list.glass-text li {
    font-size: 0.85rem !important;
    padding: 0.2rem 0 !important;
  }
}

/* =========================================
   v26 : Categories really wrap on mobile (no clip, smaller text)
   ========================================= */

@media (max-width: 768px) {
  .hero-fullscreen .hero-cats-list {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow: visible !important;
    overflow-y: visible !important;
    gap: 0.35rem 0.9rem !important;
    max-width: 100%;
    width: 100%;
  }
  .hero-fullscreen .hero-cats-list.glass-text li {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    padding: 0.15rem 0 !important;
    white-space: nowrap !important;
  }
}

/* =========================================
   v27 : Cats grid 4-col on mobile (clean wrap)
   ========================================= */

@media (max-width: 768px) {
  .hero-fullscreen .hero-cats-list {
    display: grid !important;
    grid-template-columns: repeat(4, max-content) !important;
    grid-auto-rows: auto !important;
    gap: 0.35rem 0.85rem !important;
    overflow: visible !important;
    width: auto !important;
    justify-content: flex-start;
  }
  .hero-fullscreen .hero-cats-list.glass-text li {
    font-size: 0.72rem !important;
    padding: 0.1rem 0 !important;
    text-align: left;
  }
}

/* =========================================
   v29 : Force-hide any lingering social bubbles (cache safety)
   ========================================= */
.footer-socials,
.footer-social { display: none !important; }

/* =========================================
   v30 : Hero cats mobile , stretch to edges
   ========================================= */

@media (max-width: 768px) {
  .hero-fullscreen .hero-cats-list {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    gap: 0.5rem 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .hero-fullscreen .hero-cats-list.glass-text li {
    font-size: 0.85rem !important;
    flex: 0 0 auto !important;
    padding: 0.15rem 0 !important;
    text-align: left;
    white-space: nowrap;
  }
  /* Force 4 items per line with even distribution */
  .hero-fullscreen .hero-cats-list.glass-text li:nth-child(1),
  .hero-fullscreen .hero-cats-list.glass-text li:nth-child(2),
  .hero-fullscreen .hero-cats-list.glass-text li:nth-child(3),
  .hero-fullscreen .hero-cats-list.glass-text li:nth-child(4) {
    margin-bottom: 0;
  }
}

/* =========================================
   v31 : Calculator desktop , wider + readable
   ========================================= */

@media (min-width: 900px) {
  .calculator {
    max-width: 1200px !important;
    padding: 2.5rem 3rem !important;
    column-gap: 3rem !important;
    row-gap: 1.5rem !important;
  }
  .calc-label {
    font-size: 0.8125rem !important;
    margin-bottom: 1.25rem !important;
  }
  .calc-options { gap: 0.625rem !important; }
  .calc-option {
    padding: 1rem 1rem !important;
    border-radius: var(--radius-pill) !important;
  }
  .calc-option-label { font-size: 1rem !important; }
  .calc-option-sub { font-size: 0.75rem !important; }
  .calc-calendar {
    padding: 1.25rem 1.5rem !important;
  }
  .calc-cal-header { margin-bottom: 1rem !important; }
  .calc-cal-nav { width: 34px !important; height: 34px !important; font-size: 0.875rem !important; }
  .calc-cal-month { font-size: 0.95rem !important; }
  .calc-cal-dow { font-size: 0.7rem !important; }
  .calc-cal-dow span { padding: 0.45rem 0 !important; }
  .calc-cal-grid { gap: 0.2rem !important; }
  .calc-cal-day { font-size: 0.875rem !important; }
  .calc-result {
    margin-top: 1rem !important;
    padding-top: 1.75rem !important;
    gap: 1.5rem !important;
  }
  .calc-result-label { font-size: 0.75rem !important; margin-bottom: 0.5rem !important; }
  .calc-price { font-size: clamp(2.5rem, 4vw, 3.5rem) !important; }
  .calc-price-sub { font-size: 0.875rem !important; }
}

/* =========================================
   v32 : Per-city hero + portfolio , VERIFIED Unsplash URLs only
   (override unverified IDs from v8/v15)
   ========================================= */

/* Page hero backgrounds , 1 distinct verified photo per city */
body[data-city="saint-tropez"] .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1920&q=85&auto=format&fit=crop') !important; }
body[data-city="cannes"]       .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1920&q=85&auto=format&fit=crop') !important; }
body[data-city="monaco"]       .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1920&q=85&auto=format&fit=crop') !important; }
body[data-city="nice"]         .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1920&q=85&auto=format&fit=crop') !important; }
body[data-city="antibes"]      .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1920&q=85&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"]   .page-hero-bg { background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1920&q=85&auto=format&fit=crop') !important; }

/* Portfolio per city , 8 distinct verified photos, different order per city */

/* Saint-Tropez : yacht-heavy */
body[data-city="saint-tropez"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="saint-tropez"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop') !important; }

/* Cannes : event/festival vibe */
body[data-city="cannes"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1463453091185-61582044d556?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cannes"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80&auto=format&fit=crop') !important; }

/* Monaco : casino + harbor glam */
body[data-city="monaco"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="monaco"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop') !important; }

/* Nice : coastal + portrait */
body[data-city="nice"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1463453091185-61582044d556?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="nice"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1496661415325-ef852f9e8e7c?w=1200&q=80&auto=format&fit=crop') !important; }

/* Antibes : superyachts heavy */
body[data-city="antibes"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="antibes"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop') !important; }

/* Cap-Ferrat : villa + hidden coves */
body[data-city="cap-ferrat"] .pf-1 { background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-2 { background-image: url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-3 { background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-4 { background-image: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1600&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-5 { background-image: url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-6 { background-image: url('https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-7 { background-image: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=1200&q=80&auto=format&fit=crop') !important; }
body[data-city="cap-ferrat"] .pf-8 { background-image: url('https://images.unsplash.com/photo-1605281317010-fe5ffe798166?w=1200&q=80&auto=format&fit=crop') !important; }

/* =========================================
   v33 : Mobile burger , Book a Session styled as button
   ========================================= */
.nav-mobile .nav-mobile-cta {
  margin-top: 1.5rem;
  border-bottom: none !important;
}

.nav-mobile .nav-mobile-cta a {
  background: var(--azur) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  border: none !important;
  padding: 1rem 1.5rem !important;
  text-align: center !important;
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background 0.3s var(--ease);
}

.nav-mobile .nav-mobile-cta a:hover {
  background: var(--azur-deep) !important;
}

/* =========================================
   v34 : Review text in sans-serif (more readable)
   ========================================= */
.review-text,
.reviews-scroll .review-text {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1rem, 1.15vw, 1.125rem) !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  letter-spacing: -0.005em;
}

@media (max-width: 768px) {
  .reviews-scroll .review-text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}


/* =========================================
   v36 : Page-hero title in sans-serif white, stronger overlay
   ========================================= */
.page-hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.7) 100%) !important;
}

.page-hero h1 {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #fff !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.45) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
}

.page-hero h1 em {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .page-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}

/* =========================================
   v38 : Bento compact , all 8 cards in 1 viewport
   ========================================= */

@media (min-width: 900px) {
  #occasions { padding: 2.5rem 0 3rem !important; }
  #occasions .section-header {
    margin-bottom: 1.5rem !important;
  }
  #occasions .section-header h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    margin-bottom: 0 !important;
  }
  #occasions .section-header .eyebrow {
    margin-bottom: 0.5rem !important;
  }

  .occasions-bento.eight {
    grid-template-rows: repeat(3, minmax(160px, auto)) !important;
    gap: 0.625rem !important;
  }
  .occasions-bento.eight .occ-villa { min-height: 330px !important; }
  .occasions-bento.eight .occasion { min-height: 160px !important; }

  .occasions-bento .occasion-content {
    padding: 0.875rem !important;
  }
  .occasions-bento .occasion-content h3 {
    font-size: clamp(0.9rem, 1.1vw, 1.0625rem) !important;
  }
  /* v59 : villa h3 spéciale retirée (taille uniforme sur toutes les cartes) */
  .occasions-bento .occasion-cta {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.625rem !important;
  }
  .occasions-bento .occasion-cta-arrow {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
  }
}

/* =========================================
   v41 : Bento , FORCE all 8 cards in single viewport
   ========================================= */

@media (min-width: 900px) {
  .occasions-bento.eight {
    grid-template-rows: 135px 135px 135px !important;
    gap: 0.5rem !important;
  }
  .occasions-bento.eight .occ-villa {
    min-height: 0 !important;
    height: 100% !important;
  }
  .occasions-bento.eight .occasion {
    min-height: 0 !important;
    height: 100% !important;
  }
  .occasions-bento .occasion-content {
    padding: 0.75rem 0.875rem !important;
  }
  .occasions-bento .occasion-content h3 {
    font-size: 0.875rem !important;
    margin: 0 !important;
  }
  /* v59 : villa h3 spéciale retirée */
  .occasions-bento .occasion-cta {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
  }
  .occasions-bento .occasion-cta-arrow {
    width: 16px !important;
    height: 16px !important;
    font-size: 0.65rem !important;
  }
  #occasions { padding: 1.25rem 0 2rem !important; }
  #occasions .section-header { margin-bottom: 0.875rem !important; }
  #occasions .section-header h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    line-height: 1.1 !important;
  }
  #occasions .section-header .eyebrow {
    margin-bottom: 0.5rem !important;
  }
}

/* =========================================
   v42 : Revert v41 harsh sizing , bento proper aspect ratios
   ========================================= */

@media (min-width: 900px) {
  .occasions-bento.eight {
    grid-template-rows: repeat(3, minmax(190px, 1fr)) !important;
    gap: 0.875rem !important;
  }
  .occasions-bento.eight .occ-villa {
    min-height: 0 !important;
    height: 100% !important;
  }
  .occasions-bento.eight .occasion {
    min-height: 190px !important;
    height: 100% !important;
  }
  .occasions-bento .occasion-content {
    padding: 1rem 1.125rem !important;
  }
  .occasions-bento .occasion-content h3 {
    font-size: 1rem !important;
  }
  /* v59 : villa h3 spéciale retirée */
  .occasions-bento .occasion-cta {
    padding: 0.5rem 1rem !important;
    font-size: 0.65rem !important;
  }
  .occasions-bento .occasion-cta-arrow {
    width: 20px !important;
    height: 20px !important;
  }
  #occasions { padding: 2rem 0 3rem !important; }
  #occasions .section-header { margin-bottom: 1.5rem !important; }
  #occasions .section-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  }
}

/* =========================================
   v44 : Have a Question , single clear pill trigger
   ========================================= */

.hq-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  padding: 0.875rem 1.5rem 0.875rem 1.75rem !important;
  background: var(--text) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--serif) !important;
  font-size: clamp(1.125rem, 1.75vw, 1.5rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.3s var(--ease);
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.hq-trigger:hover {
  background: var(--azur) !important;
  transform: translateY(-2px) !important;
}

.hq-trigger-avatar { display: none !important; }

.hq-trigger-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem !important;
  font-family: var(--sans);
  font-style: normal;
  margin-left: 0.25rem;
}

.hq-trigger:hover .hq-trigger-arrow {
  background: rgba(255,255,255,0.25) !important;
  transform: translate(3px, -3px) !important;
}

/* =========================================
   v52 : Retour au layout 2-1-2-1-2 (5 cols × 2 rows)
   2 cartes empilées | 1 grande verticale | 2 empilées | 1 grande verticale | 2 empilées
   Gap large + box-shadow + tailles uniformes = pas d'overlap perçu.
   ========================================= */

@media (min-width: 900px) {
  #occasions .container {
    max-width: 1700px;
  }
  .occasions-bento.eight {
    display: grid !important;
    grid-template-columns: 1fr 1.3fr 1fr 1.3fr 1fr !important;
    grid-template-rows: minmax(260px, 1fr) minmax(260px, 1fr) !important;
    gap: 3rem !important;             /* v55 : gap 3rem desktop, 4rem 15"+ (le halo de shadow et la proximité créaient l'effet "blend" entre cartes voisines) */
    row-gap: 3rem !important;
    column-gap: 3rem !important;
    max-width: none !important;
    width: 100%;
  }
  .occasions-bento.eight .occ-yacht    { grid-column: 1 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-party    { grid-column: 1 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occ-villa    { grid-column: 2 !important; grid-row: 1 / 3 !important; }
  .occasions-bento.eight .occ-wedding  { grid-column: 3 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-editorial{ grid-column: 3 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occ-proposal { grid-column: 4 !important; grid-row: 1 / 3 !important; }
  .occasions-bento.eight .occ-event    { grid-column: 5 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-portrait { grid-column: 5 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occasion {
    min-height: 0 !important;
    height: 100% !important;
    /* v55 : shadow tight (plus de halo qui bave sur les cartes voisines) + isolation pour cleanup */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
    isolation: isolate;
  }
}

/* 15"+ : encore plus d'air, et plus de hauteur */
@media (min-width: 1400px) {
  .occasions-bento.eight {
    gap: 4rem !important;
    row-gap: 4rem !important;
    column-gap: 4rem !important;
    grid-template-rows: minmax(320px, 1fr) minmax(320px, 1fr) !important;
  }
}

/* =========================================
   v46 : Contact form (Supabase-ready)
   ========================================= */

.contact-form-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg);
}

.contact-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.08);
}

.contact-form-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.contact-form-header .eyebrow {
  color: var(--azur);
  margin-bottom: 0.875rem;
}

.contact-form-header h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  margin-bottom: 0.875rem;
}

.contact-form-header p {
  font-size: 1rem;
  max-width: 460px;
  margin: 0 auto;
}

.contact-form {
  display: grid;
  gap: 1.25rem;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr; }
}

.contact-form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  transition: all 0.25s var(--ease);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--azur);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(46, 92, 138, 0.08);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--sans);
}

.contact-form-submit {
  width: 100%;
  background: var(--text);
  color: #fff;
  padding: 1.125rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-top: 0.5rem;
}

.contact-form-submit:hover {
  background: var(--azur);
}

.contact-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form-status {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 1rem;
  min-height: 1.25rem;
}

.contact-form-status.success {
  color: #16a34a;
}

.contact-form-status.error {
  color: #dc2626;
}

.contact-form-fineprint {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

.contact-form-fineprint strong {
  color: var(--text);
  font-weight: 400;
}

.contact-form-fineprint a {
  color: #25D366;
  text-decoration: none;
  font-weight: 400;
}

.contact-form-whatsapp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: #25D366;
  color: #fff;
  padding: 1.125rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  margin-top: 0.75rem;
  box-sizing: border-box;
}

.contact-form-whatsapp:hover {
  background: #1DA851;
  color: #fff;
}

.contact-form-whatsapp svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

/* =========================================
   v51 : Portfolios des pages city = photos Higgsfield (override final)
   ========================================= */
.pf-1, body[data-city] .pf-1 { background-image: url('assets/photos/yacht-days.jpg') !important; }
.pf-2, body[data-city] .pf-2 { background-image: url('assets/photos/villa.jpg') !important; }
.pf-3, body[data-city] .pf-3 { background-image: url('assets/photos/wedding.jpg') !important; }
.pf-4, body[data-city] .pf-4 { background-image: url('assets/photos/proposal.jpg') !important; }
.pf-5, body[data-city] .pf-5 { background-image: url('assets/photos/event.jpg') !important; }
.pf-6, body[data-city] .pf-6 { background-image: url('assets/photos/party.jpg') !important; }
.pf-7, body[data-city] .pf-7 { background-image: url('assets/photos/editorial.jpg') !important; }
.pf-8, body[data-city] .pf-8 { background-image: url('assets/photos/portrait.jpg') !important; }

/* v51 : Portfolio mobile carousel (cohérent avec le bento de la home) */
@media (max-width: 768px) {
  .portfolio {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: none !important;
    overflow-x: auto;
    gap: 1rem;
    padding: 0.5rem 1.5rem 1.5rem;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    padding-left: var(--pad);
    padding-right: var(--pad);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio::-webkit-scrollbar { display: none; }
  .portfolio-item {
    flex: 0 0 78vw !important;
    max-width: 320px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 5 !important;
    scroll-snap-align: start;
    min-height: 360px;
  }
  .portfolio-item.tall,
  .portfolio-item.wide {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
}

/* Honeypot anti-bot : invisible mais accessible (pas de display:none, sinon des bots le détectent) */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* v52 villa/editorial special size override removed (was making them bigger than the other cards) */

/* =========================================
   v52 : SEO intro section (réassurance mots-clés)
   ========================================= */
.seo-intro {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--bg);
}
.seo-intro-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.seo-intro-inner h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin: 0.5rem 0 1.5rem;
}
.seo-intro-inner .lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.75;
  color: var(--text);
}
.seo-intro-inner .lede strong {
  font-weight: 400;
  color: var(--text);
}

/* =========================================
   v54 : Step date pill (J-7 / Jour J / +48h) au-dessus de chaque étape
   ========================================= */
.process-step .step-when {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  border: 1px solid rgba(196, 168, 140, 0.4);
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

/* =========================================
   v54 : SEO band in hero (desktop only, bandeau bas hero)
   Sur mobile, on garde section.seo-intro classique en dessous
   ========================================= */
.hero-seo-band {
  display: none;
}

@media (min-width: 900px) {
  .hero-seo-band {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 1rem clamp(2rem, 4vw, 4rem);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
    color: #fff;
    pointer-events: none;
  }
  .hero-seo-band p {
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--sans);
    font-size: clamp(0.78rem, 0.85vw, 0.95rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
  }
  .hero-seo-band strong {
    font-weight: 400;
    color: #fff;
  }
  /* Hide the standalone seo-intro section on desktop (the text now lives in the hero) */
  .seo-intro { display: none !important; }
}

/* 15"+ : un poil plus de respiration */
@media (min-width: 1400px) {
  .hero-seo-band p {
    font-size: 0.95rem;
    max-width: 1300px;
  }
}

/* =========================================
   v56 : Photos city-specific pour les portfolios (override final)
   ========================================= */

/* saint-tropez */
body[data-city="saint-tropez"] .pf-1 { background-image: url('assets/photos/saint-tropez-yacht.jpg') !important; }
body[data-city="saint-tropez"] .pf-2 { background-image: url('assets/photos/saint-tropez-villa-event.jpg') !important; }
body[data-city="saint-tropez"] .pf-3 { background-image: url('assets/photos/saint-tropez-wedding.jpg') !important; }
body[data-city="saint-tropez"] .pf-4 { background-image: url('assets/photos/saint-tropez-proposal.jpg') !important; }
body[data-city="saint-tropez"] .pf-5 { background-image: url('assets/photos/saint-tropez-private-event.jpg') !important; }
body[data-city="saint-tropez"] .pf-7 { background-image: url('assets/photos/saint-tropez-editorial.jpg') !important; }

/* cannes */
body[data-city="cannes"] .pf-1 { background-image: url('assets/photos/cannes-yacht.jpg') !important; }
body[data-city="cannes"] .pf-2 { background-image: url('assets/photos/cannes-villa-event.jpg') !important; }
body[data-city="cannes"] .pf-3 { background-image: url('assets/photos/cannes-wedding.jpg') !important; }
body[data-city="cannes"] .pf-4 { background-image: url('assets/photos/cannes-proposal.jpg') !important; }
body[data-city="cannes"] .pf-5 { background-image: url('assets/photos/cannes-private-event.jpg') !important; }
body[data-city="cannes"] .pf-7 { background-image: url('assets/photos/cannes-editorial.jpg') !important; }

/* monaco */
body[data-city="monaco"] .pf-1 { background-image: url('assets/photos/monaco-yacht.jpg') !important; }
body[data-city="monaco"] .pf-2 { background-image: url('assets/photos/monaco-villa-event.jpg') !important; }
body[data-city="monaco"] .pf-3 { background-image: url('assets/photos/monaco-wedding.jpg') !important; }
body[data-city="monaco"] .pf-4 { background-image: url('assets/photos/monaco-proposal.jpg') !important; }
body[data-city="monaco"] .pf-5 { background-image: url('assets/photos/monaco-private-event.jpg') !important; }
body[data-city="monaco"] .pf-7 { background-image: url('assets/photos/monaco-editorial.jpg') !important; }

/* nice */
body[data-city="nice"] .pf-1 { background-image: url('assets/photos/nice-yacht.jpg') !important; }
body[data-city="nice"] .pf-2 { background-image: url('assets/photos/nice-villa-event.jpg') !important; }
body[data-city="nice"] .pf-3 { background-image: url('assets/photos/nice-wedding.jpg') !important; }
body[data-city="nice"] .pf-4 { background-image: url('assets/photos/nice-proposal.jpg') !important; }
body[data-city="nice"] .pf-5 { background-image: url('assets/photos/nice-private-event.jpg') !important; }
body[data-city="nice"] .pf-7 { background-image: url('assets/photos/nice-editorial.jpg') !important; }

/* antibes */
body[data-city="antibes"] .pf-1 { background-image: url('assets/photos/antibes-yacht.jpg') !important; }
body[data-city="antibes"] .pf-2 { background-image: url('assets/photos/antibes-villa-event.jpg') !important; }
body[data-city="antibes"] .pf-3 { background-image: url('assets/photos/antibes-wedding.jpg') !important; }
body[data-city="antibes"] .pf-4 { background-image: url('assets/photos/antibes-proposal.jpg') !important; }
body[data-city="antibes"] .pf-5 { background-image: url('assets/photos/antibes-private-event.jpg') !important; }
body[data-city="antibes"] .pf-7 { background-image: url('assets/photos/antibes-editorial.jpg') !important; }

/* cap-ferrat */
body[data-city="cap-ferrat"] .pf-1 { background-image: url('assets/photos/cap-ferrat-yacht.jpg') !important; }
body[data-city="cap-ferrat"] .pf-2 { background-image: url('assets/photos/cap-ferrat-villa-event.jpg') !important; }
body[data-city="cap-ferrat"] .pf-3 { background-image: url('assets/photos/cap-ferrat-wedding.jpg') !important; }
body[data-city="cap-ferrat"] .pf-4 { background-image: url('assets/photos/cap-ferrat-proposal.jpg') !important; }
body[data-city="cap-ferrat"] .pf-5 { background-image: url('assets/photos/cap-ferrat-private-event.jpg') !important; }
body[data-city="cap-ferrat"] .pf-7 { background-image: url('assets/photos/cap-ferrat-editorial.jpg') !important; }

/* =========================================
   v56 final patches
   ========================================= */

/* Hero H1 : "French Riviera" en blanc (v57), même typo serif (pas italic) */
.hero-big-title .hero-azur {
  color: #fff;
  font-style: normal;
}

/* v57 : Hero H1 -30% sur desktop (était trop massif, débordait) */
@media (min-width: 900px) {
  .hero-fullscreen .hero-big-title {
    font-size: clamp(2rem, 4.4vw, 3.85rem) !important;
    line-height: 1.05 !important;
  }
}

/* Re-show la section seo-intro sur desktop (on a retiré le hero-seo-band) */
@media (min-width: 900px) {
  .seo-intro { display: block !important; }
}

/* Hide hero-cats-list sur mobile/tablet portrait (≤900px) : les labels se chevauchaient */
@media (max-width: 900px) {
  .hero-fullscreen .hero-cats-list,
  .hero-fullscreen .hero-fullscreen-left {
    display: none !important;
  }
  /* La section bento en dessous garde les categories (yacht, villa, etc.) */
}

/* =========================================
   v57 : Bento décalé encore + cartes -30%
   - min-height des rows réduits de 30% (260→180 / 320→220)
   - gap encore plus large (4rem desktop, 5rem 15"+) pour offset
   ========================================= */

@media (min-width: 900px) {
  .occasions-bento.eight {
    grid-template-rows: minmax(180px, 1fr) minmax(180px, 1fr) !important;
    gap: 4rem !important;
    row-gap: 4rem !important;
    column-gap: 4rem !important;
  }
  .occasions-bento.eight .occasion { min-height: 0 !important; }
}

@media (min-width: 1400px) {
  .occasions-bento.eight {
    grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr) !important;
    gap: 5rem !important;
    row-gap: 5rem !important;
    column-gap: 5rem !important;
  }
}

/* =========================================
   v58 : Hero 16:9 city-specific + carousel "Where we shoot" (override final)
   ========================================= */

/* Hero des pages city (saint-tropez.html, monaco.html, etc.) */
body[data-city="saint-tropez"] .page-hero-bg { background-image: url('assets/photos/saint-tropez-hero-16x9.jpg') !important; }
body[data-city="cannes"]       .page-hero-bg { background-image: url('assets/photos/cannes-hero-16x9.jpg') !important; }
body[data-city="monaco"]       .page-hero-bg { background-image: url('assets/photos/monaco-hero-16x9.jpg') !important; }
body[data-city="nice"]         .page-hero-bg { background-image: url('assets/photos/nice-hero-16x9.jpg') !important; }
body[data-city="antibes"]      .page-hero-bg { background-image: url('assets/photos/antibes-hero-16x9.jpg') !important; }
body[data-city="cap-ferrat"]   .page-hero-bg { background-image: url('assets/photos/cap-ferrat-hero-16x9.jpg') !important; }

/* Carousel "Where we shoot" sur la home */
.city-st-1 { background-image: url('assets/photos/Saint-Tropez%20Photographer.jpg') !important; }
.city-cn-1 { background-image: url('assets/photos/cannes-hero-16x9.jpg')        !important; }
.city-mc-1 { background-image: url('assets/photos/monaco-hero-16x9.jpg')        !important; }
.city-ni-1 { background-image: url('assets/photos/nice-hero-16x9.jpg')          !important; }
.city-an-1 { background-image: url('assets/photos/antibes-hero-16x9.jpg')       !important; }
.city-cf-1 { background-image: url('assets/photos/cap-ferrat-hero-16x9.jpg')    !important; }

/* =========================================
   v58 : Trust strip bigger + marquee scroll + pricing
   ========================================= */

.trust-strip {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  background: var(--bg);
  overflow: hidden;
}

.trust-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.trust-stars { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.trust-stars .stars {
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
}
.trust-count {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  color: var(--text);
}
.trust-count strong { font-weight: 400; }

.trust-pricing { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.trust-from {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}
.trust-price {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 1.875rem);
  color: var(--azur);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.trust-detail {
  font-family: var(--sans);
  font-size: clamp(0.78rem, 0.85vw, 0.9rem);
  color: var(--text-muted);
}

/* Marquee défilant */
.trust-marquee {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trust-marquee-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  animation: marquee-scroll 60s linear infinite;
  width: max-content;
}
.trust-marquee-track:hover { animation-play-state: paused; }
.trust-marquee-track > span {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.2vw, 1.125rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.trust-marquee-track .marquee-label {
  color: var(--text);
  font-weight: 400;
  font-size: clamp(0.78rem, 0.9vw, 0.875rem);
  letter-spacing: 0.2em;
  padding-right: 0.5rem;
  border-right: 1px solid var(--line);
  margin-right: 1rem;
}
.trust-marquee-track .marquee-dot {
  color: var(--gold);
  font-weight: 400;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .trust-row { justify-content: center; text-align: center; }
  .trust-stars, .trust-pricing { justify-content: center; }
  .trust-marquee-track { animation-duration: 45s; }
  .trust-marquee-track > span { font-size: 0.875rem; }
}

/* =========================================
   v59 : Key benefits (USPs avec icônes au-dessus du trust strip)
   ========================================= */

.key-benefits {
  padding: clamp(2rem, 3.5vw, 3.25rem) 0 clamp(1rem, 2vw, 1.5rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.key-benefits-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.key-benefit {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.kb-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: var(--azur);
  stroke: var(--azur);
}

.key-benefit > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
}

.key-benefit strong {
  font-family: var(--sans);
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}

.key-benefit span {
  font-family: var(--sans);
  font-size: clamp(0.78rem, 0.85vw, 0.875rem);
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .key-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.5rem; }
}
@media (max-width: 560px) {
  .key-benefits-grid { grid-template-columns: 1fr; }
  .key-benefit { justify-content: flex-start; }
}

/* =========================================
   v59 : Bento 4 cols x 2 rows STRICT (abandon des spans, tout en grille égale)
   ========================================= */

@media (min-width: 900px) {
  .occasions-bento.eight {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: minmax(260px, 1fr) minmax(260px, 1fr) !important;
    gap: 2rem !important;
    row-gap: 2rem !important;
    column-gap: 2rem !important;
  }
  .occasions-bento.eight .occ-yacht    { grid-column: 1 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-villa    { grid-column: 2 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-wedding  { grid-column: 3 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-proposal { grid-column: 4 !important; grid-row: 1 !important; }
  .occasions-bento.eight .occ-party    { grid-column: 1 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occ-event    { grid-column: 2 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occ-editorial{ grid-column: 3 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occ-portrait { grid-column: 4 !important; grid-row: 2 !important; }
  .occasions-bento.eight .occasion {
    min-height: 0 !important;
    height: 100% !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
    isolation: isolate;
  }
}

@media (min-width: 1400px) {
  .occasions-bento.eight {
    grid-template-rows: minmax(300px, 1fr) minmax(300px, 1fr) !important;
    gap: 2.5rem !important;
    row-gap: 2.5rem !important;
    column-gap: 2.5rem !important;
  }
}

/* =========================================
   v60 : Key benefits + trust fusionnés, padding resserré
   ========================================= */
.key-benefits {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0 !important;
  border-bottom: none !important;
}
.key-benefits-divider {
  height: 1px;
  background: var(--line);
  margin: clamp(1rem, 2vw, 1.5rem) 0;
}
.trust-strip { display: none !important; }    /* Plus de section séparée, tout est dans key-benefits */

/* =========================================
   v60 : FAQ collapsed (6 visibles, 5 cachées révélées au clic)
   ========================================= */
.faq-numbered-list .faq-item:nth-child(n+7),
.faq-list .faq-item:nth-child(n+7) {
  display: none;
}
.faq-numbered-list.faq-expanded .faq-item,
.faq-list.faq-expanded .faq-item {
  display: block !important;
}

.faq-toggle {
  display: block;
  margin: 2.5rem auto 0;
  padding: 0.875rem 2rem;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.faq-toggle:hover {
  background: var(--text);
  color: #fff;
}
.faq-toggle .faq-toggle-arrow {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.95rem;
  vertical-align: middle;
}
.faq-toggle .faq-toggle-less { display: none; }
.faq-expanded + .faq-toggle .faq-toggle-more,
.faq-numbered-list.faq-expanded ~ .faq-toggle .faq-toggle-more { display: none; }
.faq-numbered-list.faq-expanded ~ .faq-toggle .faq-toggle-less,
.faq-expanded + .faq-toggle .faq-toggle-less { display: inline; }

/* =========================================
   v55 : Pricing calculator , 4 steps + mobile reorder
   ========================================= */

/* Numbering : different label number desktop vs mobile (because location hidden on mobile) */
.calc-num-mobile { display: none; }
.calc-num-desktop { display: inline; }

/* Mobile : reorder so price appears between duration and date */
@media (max-width: 899px) {
  .calculator {
    display: flex !important;
    flex-direction: column;
  }
  .calculator .calc-step:nth-of-type(1) { order: 1; }
  .calculator .calc-step:nth-of-type(2) { order: 2; }
  .calculator .calc-result { order: 3; }
  .calc-step-location { display: none !important; }
  .calc-step-date { order: 4; }
  .calculator .calc-result {
    margin-top: 1.75rem !important;
    padding-top: 1.5rem !important;
    margin-bottom: 1.75rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1.5rem !important;
  }
  .calc-num-desktop { display: none; }
  .calc-num-mobile { display: inline; }
}

/* Desktop : 4-step grid (Occasion/Duration in col1, Location/Date in col2, Result full width) */
@media (min-width: 900px) {
  .calculator .calc-step:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .calculator .calc-step:nth-of-type(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .calculator .calc-step-location {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }
  .calculator .calc-step-date {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-bottom: 0 !important;
  }
  .calculator .calc-result {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* "If you don't know the date yet" subtitle */
.calc-date-sub {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin-top: -0.75rem;
  margin-bottom: 1rem;
  font-style: normal;
}

/* Location step : compact buttons (single line of tiles) */
.calc-step-location .calc-options {
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)) !important;
  gap: 0.4rem !important;
}
.calc-step-location .calc-option {
  padding: 0.55rem 0.4rem !important;
}
.calc-step-location .calc-option-label {
  font-size: 0.8125rem !important;
}

/* =========================================
   v56 : Reviews , Google-style cards (initials + flag + verified)
   ========================================= */

/* Trust block above review cards */
.reviews-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 auto 2.5rem;
  max-width: 920px;
  padding: 1.25rem 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.reviews-trust-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.reviews-trust-score {
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--text);
}
.reviews-trust-info { line-height: 1.3; }
.reviews-trust-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
  font-weight: 400;
}
.reviews-trust-stars {
  color: #ffb800;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.reviews-trust-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.reviews-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: rgba(76, 175, 117, 0.12);
  border: 1px solid rgba(76, 175, 117, 0.4);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #2e7c4e;
  text-transform: uppercase;
  font-weight: 400;
}
.reviews-trust-badge-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4caf75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.reviews-trust-badge-dot::after {
  content: "✓";
  color: #fff;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 600px) {
  .reviews-trust { flex-direction: column; align-items: flex-start; padding: 1rem 1.25rem; }
  .reviews-trust-score { font-size: 1.85rem; }
}

/* Card header : initials + name/date + country flag */
.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.review-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.review-initials {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  line-height: 1;
}
.review-initials.bg-1 { background: linear-gradient(135deg, #b89870, #8d7250); }
.review-initials.bg-2 { background: linear-gradient(135deg, #5d8aa8, #436b87); }
.review-initials.bg-3 { background: linear-gradient(135deg, #8B6E5E, #6a5244); }
.review-initials.bg-4 { background: linear-gradient(135deg, #6F8E72, #4f6c54); }
.review-initials.bg-5 { background: linear-gradient(135deg, #A66B7C, #82515f); }
.review-initials.bg-6 { background: linear-gradient(135deg, #4F6A7A, #354b5a); }

.review-id-text { min-width: 0; }
.review.review-v2 .review-author {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.review-date {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}
.review-flag {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Stars row (gold) + verified checkmark badge */
.review-stars-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.875rem;
}
.review-stars-row .review-stars {
  color: #ffb800;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.review-half-star {
  background: linear-gradient(90deg, #ffb800 50%, rgba(0,0,0,0.12) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.review-verified-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4a90e2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.review-verified-check::after {
  content: "✓";
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1;
}

/* Hide old elements when new structure is used */
.review.review-v2 .review-avatar,
.review.review-v2 .review-loc,
.review.review-v2 .review-meta {
  display: none;
}

/* Light card style for review-v2 (Google-style on Riva light theme) */
.review.review-v2 {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.75rem;
  border-radius: var(--radius);
}
.review.review-v2 .review-text {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-style: normal;
  margin: 0;
}
.reviews-scroll .review.review-v2 .review-text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

/* Certified footer badge under the reviews grid */
.reviews-certified-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.reviews-certified {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: rgba(76, 175, 117, 0.1);
  border: 1px solid rgba(76, 175, 117, 0.3);
  border-radius: 6px;
  font-size: 0.7rem;
  color: #2e7c4e;
  letter-spacing: 0.05em;
  font-weight: 400;
}
.reviews-certified-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4caf75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reviews-certified-dot::after {
  content: "✓";
  color: #fff;
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 1;
}

/* =========================================
   v57 : Hero trust strip (small, white, below H1)
   ========================================= */

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.04em;
  font-family: var(--sans);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hero-trust-stars {
  color: #fff;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  line-height: 1;
}
.hero-trust-meta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}
@media (max-width: 768px) {
  .hero-trust {
    font-size: 0.9rem;
    margin-top: 0.75rem;
    gap: 0.4rem;
  }
  .hero-trust-stars { font-size: 1rem; }
  .hero-trust-meta { font-size: 0.9rem; }
}

/* =========================================
   v58 / v61 : Mobile key-benefits = left-aligned, descs masquées,
   trust-row + price masqués (stats déplacées dans les benefits)
   ========================================= */

/* Variantes mobile masquées par défaut */
.kb-title-mobile,
.kb-desc-mobile { display: none; }

@media (max-width: 768px) {
  /* Key benefits items align LEFT on mobile */
  .key-benefits-grid .key-benefit {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }
  .key-benefits-grid .key-benefit .kb-icon {
    margin-left: 0;
  }
  /* Swap title/desc variants on mobile */
  .key-benefit .kb-title-desktop,
  .key-benefit .kb-desc { display: none; }
  .key-benefit .kb-title-mobile,
  .key-benefit .kb-desc-mobile { display: block; }
  /* Hide divider + entire trust row (stars + price) on mobile */
  .key-benefits-divider,
  .key-benefits .trust-row { display: none !important; }
  /* Review cards : push header content to the right edge */
  .review.review-v2 {
    text-align: right;
  }
  .review.review-v2 .review-header {
    flex-direction: row-reverse;
  }
  .review.review-v2 .review-id {
    flex-direction: row-reverse;
  }
  .review.review-v2 .review-id-text {
    text-align: right;
  }
  .review.review-v2 .review-stars-row {
    justify-content: flex-end;
  }
}

/* =========================================
   v60 : Reviews trust line (simple underlined blue link)
   ========================================= */

.reviews-trust-line {
  text-align: center;
  margin: 0 auto 2rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.reviews-trust-link {
  color: var(--azur);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-family: var(--sans);
  font-weight: 400;
}
.reviews-trust-link:hover {
  color: var(--azur-deep);
}
@media (max-width: 768px) {
  .reviews-trust-line {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
   v61 : Combined contact form + pricing card (city pages)
   ========================================= */

.contact-pricing-grid {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
}
.contact-pricing-col-pricing {
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .contact-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  .contact-pricing-col-form { grid-column: 1; grid-row: 1; }
  .contact-pricing-col-pricing { grid-column: 2; grid-row: 1; margin-bottom: 0; }
}

/* Dark pricing card */
.contact-pricing-card {
  background: var(--bg-deep);
  color: #fff;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
}
.contact-pricing-card .eyebrow {
  color: var(--gold);
  margin-bottom: 0.875rem;
}
.contact-pricing-title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  color: #fff;
  font-weight: 400;
}
.contact-pricing-title em {
  color: var(--gold);
  font-style: normal;
}
.contact-pricing-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* Compact calculator (inside the dark pricing card) */
.calculator-compact {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  max-width: none !important;
  margin: 0 !important;
}
.calculator-compact .calc-step {
  margin-bottom: 1.5rem !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
.calculator-compact .calc-step:last-of-type { margin-bottom: 0 !important; }
.calculator-compact .calc-label {
  font-size: 0.68rem !important;
  margin-bottom: 0.75rem !important;
}
.calculator-compact .calc-options {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 0.4rem !important;
}
@media (max-width: 768px) {
  .calculator-compact .calc-options {
    grid-template-columns: 1fr 1fr !important;
  }
}
.calculator-compact .calc-option {
  padding: 0.55rem 0.4rem !important;
}
.calculator-compact .calc-option-label { font-size: 0.82rem !important; }
.calculator-compact .calc-option-sub { font-size: 0.62rem !important; }

.calculator-compact .calc-result {
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: block !important;
  text-align: center;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.calculator-compact .calc-price {
  font-size: clamp(2.25rem, 3.5vw, 3rem) !important;
  margin: 0.25rem 0 0.5rem;
}
.calculator-compact .calc-price-sub {
  font-size: 0.78rem !important;
  margin-top: 0.5rem !important;
}

/* Form column adjustments inside the grid */
.contact-pricing-col-form .contact-form-wrap {
  max-width: none;
  margin: 0;
}
@media (min-width: 900px) {
  .contact-pricing-col-form .contact-form-header {
    text-align: left;
    margin-bottom: 1.75rem;
  }
  .contact-pricing-col-form .contact-form-header p {
    margin: 0;
  }
  .contact-pricing-col-form .contact-form-header h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  }
}

/* =========================================
   v59 : Portfolio mobile , 2x2 e-commerce grid (no more carousel)
   ========================================= */

@media (max-width: 768px) {
  .portfolio {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 0.5rem !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scroll-snap-type: none !important;
  }
  .portfolio-item,
  .portfolio-item.tall,
  .portfolio-item.wide {
    flex: initial !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: none !important;
  }
}

/* =========================================
   v62 / v64 : Cleanup below contact form (DESKTOP + MOBILE)
   - Hide .have-question section entirely
   - Hide all footer-blocks except "Contact us" (first child)
   ========================================= */
.have-question { display: none !important; }
.footer-photono-mid .footer-block:not(:first-child) { display: none !important; }

/* =========================================
   v63 : Reset browser defaults (no italic, no bold)
   Only 2 fonts: --sans (Inter) + --serif (Cormorant). Weight 400 only.
   ========================================= */
em, i, cite, dfn, address, blockquote, q { font-style: normal !important; }
strong, b, h1, h2, h3, h4, h5, h6, th { font-weight: 400 !important; }

/* =========================================
   v65 : Restore bold typo on Hero only (Paul preference)
   - Big title (Private Photography on the French Riviera)
   - Categories list (Yacht / Villa / Wedding / etc.)
   No italic restored. Weight 800.
   ========================================= */
.hero-fullscreen .hero-big-title,
.hero-fullscreen .hero-big-title em,
.hero-fullscreen .hero-big-title span,
.hero-fullscreen .hero-cats-list li {
  font-weight: 800 !important;
}

/* =========================================
   v67 : Mobile lock horizontal scroll + arrow cleanup
   ========================================= */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  max-width: 100vw;
  overscroll-behavior-x: none;
}

@media (max-width: 768px) {
  /* Hide prev arrow on mobile, keep only next ( → ) */
  #heroPrev { display: none !important; }
  #reviewsPrev { display: none !important; }
}

/* =========================================
   v73 : OVERRIDE FINAL bento mobile + scroll-padding (snap-aware)
   Inset gauche = même valeur que le gap entre cartes (0.75rem)
   ========================================= */
@media (max-width: 768px) {
  #occasions .occasions-bento,
  #occasions .occasions-bento.eight {
    padding-top: 0.5rem !important;
    padding-right: 0 !important;
    padding-bottom: 1.5rem !important;
    padding-left: 0.75rem !important;
    scroll-padding-left: 0.75rem !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   v74 : scroll-padding-left sur tous les carrousels horizontaux mobile
   (fix scroll-snap qui ignorait visuellement le padding-left)
   ========================================= */
@media (max-width: 768px) {
  .cities-scroll {
    scroll-padding-left: var(--pad) !important;
  }
  .portfolio {
    scroll-padding-left: var(--pad) !important;
  }
}

/* =========================================
   v76 : Nav solide azur sur mobile (au-dessus de la photo, pas de glass effect)
   ========================================= */
@media (max-width: 768px) {
  .nav {
    background: var(--azur) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }
  .nav.scrolled {
    background: var(--azur) !important;
  }
  /* Texte/logo nav en blanc sur fond azur */
  .nav .logo-main,
  .nav .logo-sub,
  .nav .nav-link,
  .nav-cta,
  .nav .nav-burger span,
  .nav-mobile-toggle {
    color: #fff !important;
  }
  .nav .nav-burger span { background: #fff !important; }
}

/* =========================================
   v78 : Hero photo anchored to TOP on mobile
   (évite que les têtes/sujets en haut de cadre soient coupés)
   ========================================= */
@media (max-width: 768px) {
  .hero-fullscreen .hero-photo-slide {
    background-position: center top !important;
  }
}

/* =========================================
   v79 : WhatsApp button (desktop + mobile) + chatbot launcher hidden
   ========================================= */
.nav-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-whatsapp svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  display: block;
}
.nav-whatsapp:hover { transform: scale(1.05); }
.nav-whatsapp:active { transform: scale(0.92); }
.chatbot-launcher { display: none !important; }

/* Outside-of-ul WhatsApp: only on mobile (the inside-ul one is hidden with .nav-links on mobile) */
.nav-whatsapp-mobile-only { display: none !important; }
@media (max-width: 768px) {
  .nav-whatsapp-mobile-only {
    display: inline-flex !important;
    margin-left: auto;
    margin-right: 0.5rem;
  }
}


/* =========================================
   v80 : Meet the photographer section + scarcity
   ========================================= */
.meet-photographer {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.meet-grid {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.meet-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.meet-text h2 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em;
}
.meet-text h2 em {
  font-style: normal;
}
.meet-bio {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1rem;
}
.meet-scarcity {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  background: rgba(46, 92, 138, 0.06);
  border-left: 3px solid var(--azur);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
}
.meet-scarcity strong {
  color: var(--azur);
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}
.meet-signature {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .meet-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    text-align: left;
  }
  .meet-photo img {
    max-width: 80%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
  .meet-text h2 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}

/* =========================================
   v81 : WhatsApp button INVERTED (green bg, white logo)
         + Meet team (3 cards) + Pricing accordion
   ========================================= */

/* WhatsApp button : inversion couleurs */
@media (max-width: 768px) {
  .nav-whatsapp {
    background: #25D366 !important;
  }
  .nav-whatsapp svg {
    fill: #fff !important;
  }
}

/* Meet team : grille 3 cards */
.meet-team {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1100px;
  margin: 0 auto;
}
.team-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.team-photo {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--line);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.team-card:hover .team-photo img {
  transform: scale(1.04);
}
.team-info {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  flex: 1;
}
.team-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.team-bio {
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* Team intro paragraph */
.team-intro {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 1rem 0 0;
}

/* BTS horizontal scroll strip */
.team-bts {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
.team-bts-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem clamp(1rem, 4vw, 2rem) 0.75rem;
}
.team-bts-track::-webkit-scrollbar { display: none; }
.team-bts-card {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  scroll-snap-align: start;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.team-bts-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.team-bts-card:hover img {
  transform: scale(1.03);
}
@media (max-width: 768px) {
  .team-bts-card {
    width: 70vw;
    max-width: 280px;
  }
}

/* Team meta : first names + stats line below the BTS scroll */
.team-meta {
  text-align: center;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.team-names {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--text);
  letter-spacing: 0.03em;
  margin: 0;
}
.team-stats {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Logo "RIVA Premium Photography" forced black in all nav states + mobile */
.nav .nav-logo .logo-main,
.nav .nav-logo .logo-sub,
.nav.transparent .nav-logo .logo-main,
.nav.transparent .nav-logo .logo-sub,
.nav.scrolled .nav-logo .logo-main,
.nav.scrolled .nav-logo .logo-sub {
  color: #000 !important;
}
@media (max-width: 768px) {
  .nav .nav-logo .logo-main,
  .nav .nav-logo .logo-sub {
    color: #000 !important;
  }
}

/* Small "founded" note at the very bottom of the footer */
.footer-founded-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.75;
  text-align: center;
  margin: 2.5rem 0 1rem;
  letter-spacing: 0.02em;
}

/* MOBILE : carousel horizontal scrollable (même comportement que occasions-bento) */
@media (max-width: 768px) {
  #meet-team-section, /* placeholder */
  .meet-team .team-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 0.75rem !important;
    padding: 0.5rem 0 1rem 0.75rem !important;
    scroll-padding-left: 0.75rem !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }
  .meet-team .team-grid::-webkit-scrollbar { display: none; }
  .meet-team .team-card {
    flex: 0 0 75vw !important;
    max-width: 320px !important;
    scroll-snap-align: start;
  }
  .meet-team .team-photo {
    aspect-ratio: 4 / 5;
  }
}

/* Pricing accordion (home) */
.home-pricing {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  background: var(--bg);
}
.home-pricing-card {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.home-pricing-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  color: var(--text);
  transition: background 0.2s ease;
}
.home-pricing-toggle:hover { background: rgba(46, 92, 138, 0.04); }
.home-pricing-toggle-label { flex: 1; }
.home-pricing-toggle-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.home-pricing-toggle-icon::before,
.home-pricing-toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--azur);
  top: 50%;
  left: 50%;
  transition: transform 0.3s ease;
}
.home-pricing-toggle-icon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.home-pricing-toggle-icon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.home-pricing-card.open .home-pricing-toggle-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.home-pricing-content {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
}
.home-pricing-content[hidden] { display: none; }
.home-pricing-intro {
  font-family: var(--sans);
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 1.25rem 0 1.25rem;
}
.home-pricing-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.home-pricing-grid li {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.hp-duration { color: var(--text); }
.hp-photos { color: var(--text-muted); font-size: 0.85rem; }
.hp-price {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--azur);
  text-align: right;
  letter-spacing: 0.01em;
}
.home-pricing-note {
  font-family: var(--sans);
  font-size: 0.825rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 1.25rem;
  font-style: normal;
}

@media (max-width: 600px) {
  .home-pricing-grid li {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 0.25rem;
  }
  .hp-photos { grid-column: 1; }
  .hp-price { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* v84 : zoom x2 sur Camille (3e carte team) */
.meet-team .team-grid .team-card:nth-child(3) .team-photo img {
  transform: scale(2);
  transform-origin: center 25%;
}

/* =========================================
   v85 : home pricing accordion = wraps city-style dark calculator
   - Remove white bg from accordion wrapper (inner card is already dark)
   - Toggle button on transparent bg, clean borders
   - Book Now CTA visible on both desktop & mobile inside home pricing
   ========================================= */
.home-pricing-card {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.home-pricing-content {
  padding: 0 !important;
  border-top: 1px solid var(--line);
}
.home-pricing-content .contact-pricing-card {
  border-radius: 0;
  margin: 0;
}
.home-pricing .calc-book-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--azur);
  color: #fff;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.3s ease, transform 0.15s ease;
}
.home-pricing .calc-book-cta:hover { background: var(--azur-deep); }

/* =========================================
   Pricing accordion button (desktop + mobile) : blue bg, white bold text, black + icon
   (placed at file end to win source-order over earlier .home-pricing-card transparent !important)
   ========================================= */
.home-pricing-card {
  background: var(--azur) !important;
  border-color: var(--azur) !important;
}
.home-pricing-toggle {
  color: #fff !important;
  font-weight: 700 !important;
}
.home-pricing-toggle:hover { background: rgba(255,255,255,0.08) !important; }
.home-pricing-toggle-icon::before,
.home-pricing-toggle-icon::after {
  background: #000 !important;
}

/* FAQ "Show more" button : sit under the questions column on desktop (was auto-flowing to col 1 / under header) */
@media (min-width: 901px) {
  .faq-numbered > .faq-toggle { grid-column: 2; }
}

/* =========================================
   Language switcher : full text desktop / abbreviated mobile, no flags
   Now a direct child of .nav (visible on both desktop and mobile)
   ========================================= */
.lang-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.lang-current { gap: 0.3rem !important; }
.lang-current img,
.lang-options li a img { display: none !important; }
.lang-full { display: inline; }
.lang-short { display: none; }
.lang-caret {
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.7;
  margin-left: 0.15rem;
}
.lang-options li a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  color: var(--text);
  font-family: var(--sans);
}
.lang-options li a:hover {
  background: var(--bg-cream);
  color: var(--azur);
}

@media (max-width: 768px) {
  .lang-full { display: none; }
  .lang-short { display: inline; }
  .lang-current {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
  }
  .lang-switch { margin-left: auto; margin-right: 0.4rem; }
  .nav-whatsapp-mobile-only { margin-left: 0 !important; }
}

/* =========================================
   Mobile nav : glassmorphism (blur + transparency) at all states
   ========================================= */
@media (max-width: 768px) {
  .nav {
    background: rgba(250, 247, 242, 0.55) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .nav.scrolled {
    background: rgba(250, 247, 242, 0.72) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }
  .nav.transparent {
    background: rgba(20, 20, 20, 0.22) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: none;
  }
}