/* === Page: homepage — extracted from inline <style> blocks === */

/* --- block 1 --- */
.how-v4 {
  padding: clamp(64px, 8vh, 104px) 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(9, 28, 59, 0.06);
  border-bottom: 1px solid rgba(9, 28, 59, 0.06);
}
.how-v4-head {
  text-align: center;
  margin-bottom: 48px;
}
.how-v4-eyebrow {
  display: block;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold, #C9A84C);
  margin-bottom: 14px;
}
.how-v4-title {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink-strong, #081B3A);
  margin: 0;
}
.how-v4-title em { font-style: italic; color: var(--ink-mute, #5a6378); font-family: inherit; }

.how-v4-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  counter-reset: step;
}
@media (min-width: 768px) {
  .how-v4-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.how-v4-step {
  position: relative;
  padding: 28px 24px;
  background: var(--bg-elev, #FFFDF4);
  border: 1px solid rgba(9, 28, 59, 0.08);
  border-radius: 20px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.how-v4-step:hover {
  border-color: rgba(201, 168, 76, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -24px rgba(9, 28, 59, 0.18);
}
.how-v4-step-num {
  position: absolute;
  top: 16px; right: 24px;
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-size: 68px; font-weight: 400;
  color: var(--ink-strong, #081B3A);
  opacity: 0.06;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
}
.how-v4-step-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold, #C9A84C);
  margin-bottom: 18px;
}
.how-v4-step-icon svg { width: 20px; height: 20px; }
.how-v4-step h3 {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink-strong, #081B3A);
  margin: 0 0 10px;
}
.how-v4-step p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-mute, #5a6378);
  margin: 0;
}
.how-v4-cta-wrap {
  text-align: center;
  margin-top: 40px;
}
.how-v4-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--gold, #C9A84C);
  color: var(--navy-deep, #081B3A);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border-radius: 999px; text-decoration: none;
  transition: background 0.25s, transform 0.25s;
}
.how-v4-cta:hover { background: #E3C26A; transform: translateY(-1px); }
.how-v4-cta svg { width: 14px; height: 14px; }

/* --- block 2 --- */
.salons-v4 {
  position: relative;
  padding: clamp(64px, 8vh, 104px) 0;
  background: linear-gradient(160deg, #101E30 0%, #091C3B 50%, #0D1628 100%);
  color: #FDFAF4;
  overflow: hidden;
}
.salons-v4-accent {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(201, 168, 76, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 5% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 55%);
}
.salons-v4 .container { position: relative; z-index: 1; }
.salons-v4-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.salons-v4-eyebrow {
  display: block;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #E3C26A; margin-bottom: 14px;
}
.salons-v4-title {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em; line-height: 1.08;
  color: #FDFAF4; margin: 0 0 12px;
  max-width: 620px;
}
.salons-v4-title em { font-style: italic; color: #CEC09D; font-family: inherit; }
.salons-v4-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: rgba(253, 250, 244, 0.72);
  max-width: 520px; margin: 0;
}
.salons-v4-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  background: #C9A84C; color: #081B3A;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border-radius: 999px; text-decoration: none;
  transition: background 0.25s, transform 0.25s;
  flex-shrink: 0;
}
.salons-v4-cta:hover { background: #E3C26A; transform: translateY(-1px); }
.salons-v4-cta svg { width: 14px; height: 14px; }

.salons-v4-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.salon-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 24px;
  padding: 28px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
  display: flex; flex-direction: column; gap: 16px;
}
.salon-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(201, 168, 76, 0.45);
  transform: translateY(-3px);
}
.salon-card.salon-card--next {
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.45);
}

.salon-next-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #E3C26A;
  width: fit-content;
}
.salon-next-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #E3C26A;
  animation: salonPulse 2s ease-in-out infinite;
}
@keyframes salonPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.salon-dates {
  display: flex; align-items: center; gap: 14px;
  color: #FDFAF4;
}
.salon-date {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
}
.salon-date-day {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -0.04em;
  color: #FDFAF4;
}
.salon-date-month {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(253, 250, 244, 0.6);
  margin-top: 4px;
}
.salon-dash {
  color: rgba(201, 168, 76, 0.6);
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-size: 24px;
  margin-top: 12px;
}

.salon-venue {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.015em; line-height: 1.2;
  color: #FDFAF4; margin: 0;
}
.salon-loc {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(253, 250, 244, 0.72);
}
.salon-loc svg { width: 12px; height: 12px; color: #E3C26A; flex-shrink: 0; }

.salon-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 4px 0;
}
.salon-tag {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(253, 250, 244, 0.82);
  border-radius: 999px;
}

.salon-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  background: #C9A84C; color: #081B3A;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border-radius: 999px; text-decoration: none;
  transition: background 0.25s, gap 0.25s;
  margin-top: auto;
}
.salon-cta:hover { background: #E3C26A; gap: 12px; }
.salon-cta svg { width: 14px; height: 14px; transition: transform 0.25s; }
.salon-cta:hover svg { transform: translateX(3px); }

.salon-cta-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 0;
  color: rgba(253, 250, 244, 0.6);
  text-decoration: none;
  transition: color 0.2s;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}
.salon-cta-ghost:hover { color: #E3C26A; }

@media (max-width: 640px) {
  .salon-card { padding: 22px; }
  .salon-dates { gap: 10px; }
  .salon-dash { font-size: 20px; margin-top: 8px; }
}

/* --- block 3 --- */
.faq-v4 {
  padding: clamp(64px, 8vh, 104px) 0;
  background: #F2ECDA;
  border-top: 1px solid rgba(9, 28, 59, 0.06);
  border-bottom: 1px solid rgba(9, 28, 59, 0.06);
}
.faq-v4-head {
  text-align: center;
  margin-bottom: 48px;
}
.faq-v4-eyebrow {
  display: block;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold, #C9A84C);
  margin-bottom: 14px;
}
.faq-v4-title {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink-strong, #081B3A);
  margin: 0;
}
.faq-v4-title em { font-style: italic; color: var(--ink-mute, #5a6378); font-family: inherit; }

/* Two independent flex columns: each column flows on its own,
   so an opened item never leaves a row-alignment gap in the other column. */
.faq-v4-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}
.faq-v4-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}
@media (min-width: 900px) {
  .faq-v4-list { flex-direction: row; gap: 24px; align-items: flex-start; }
}

.fq {
  background: rgba(255, 253, 244, 0.85);
  border: 1px solid rgba(9, 28, 59, 0.09);
  border-radius: 16px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.3s;
  overflow: hidden;
}
.fq:hover {
  border-color: rgba(201, 168, 76, 0.35);
  background: #FDFAF4;
}
.fq.open {
  background: #FDFAF4;
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 10px 30px -18px rgba(9, 28, 59, 0.18);
}
.fq-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink-strong, #081B3A);
  cursor: pointer;
  gap: 14px;
}
.fq-chevron {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--gold, #C9A84C);
  transition: transform 0.3s var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.fq.open .fq-chevron { transform: rotate(180deg); }
.fq-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute, #5a6378);
  transition: max-height 0.35s var(--ease-out, cubic-bezier(.2,.8,.2,1)), padding 0.3s;
}
.fq.open .fq-body {
  max-height: 600px;
  padding: 0 22px 20px;
}

/* --- block 4 --- */
/* Hero stat cards — align with title */
.hero-floating-stats { top: 35% !important; }

/* Logo nav géré par nav.css (taille uniforme sur toutes les pages) */

/* Transparent inputs */
.sg-transparent {
  background: transparent !important;
  border: 1px solid rgba(9,28,59,0.08) !important;
  border-radius: 12px;
  color: var(--ink-strong);
  transition: border-color 0.3s, background 0.3s;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
}
.sg-transparent:hover { border-color: var(--accent) !important; background: rgba(255,253,244,0.3) !important; }
.sg-transparent:focus { border-color: var(--accent) !important; outline: none; background: rgba(255,253,244,0.4) !important; }

/* Typewriter cursor */
.sg-typewriter { caret-color: var(--accent); }
.sg-typewriter::placeholder { color: var(--ink-mute); opacity: 1; transition: none; }

/* Ensure dropdowns are not clipped by any parent and stay on top */
.hero-cinema { overflow: visible !important; }
.search-glass { overflow: visible !important; position: relative; z-index: 200; }
.search-glass-grid { overflow: visible !important; }
.hero-chips-row { position: relative; z-index: 1; }
.hero-split { position: relative; z-index: 1; }
.hero-stats-bar { position: relative; z-index: 1; }

/* Custom dropdown button */
.sg-dropdown-wrap { position: relative; }
.sg-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.sg-dropdown-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-dropdown-btn[data-field] .sg-dropdown-val { color: var(--ink-mute); }
.sg-dropdown-btn.has-value .sg-dropdown-val { color: var(--ink-strong); }
.sg-chevron { flex-shrink: 0; transition: transform 0.3s var(--ease-out); color: var(--ink-mute); }
.sg-dropdown-btn.open .sg-chevron { transform: rotate(180deg); }

/* Dropdown list */
.sg-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 9999;
  list-style: none;
  margin: 0; padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 16px 48px -12px rgba(9,28,59,0.18);
  max-height: 260px;
  overflow-y: auto;
  /* Scrollbar fine V4 */
  scrollbar-width: thin;
  scrollbar-color: #C9A84C rgba(9, 28, 59, 0.06);
}
.sg-dropdown-list::-webkit-scrollbar { width: 6px; }
.sg-dropdown-list::-webkit-scrollbar-track { background: rgba(9, 28, 59, 0.06); border-radius: 8px; margin: 6px 0; }
.sg-dropdown-list::-webkit-scrollbar-thumb { background: #C9A84C; border-radius: 8px; }
.sg-dropdown-list::-webkit-scrollbar-thumb:hover { background: #B08C35; }
.sg-dropdown-list.open { display: block; }
.sg-dropdown-list li {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sg-dropdown-list li:hover { background: rgba(201,168,76,0.1); color: var(--accent-bright); }
.sg-dropdown-list li.selected { background: var(--accent); color: var(--navy-deep); font-weight: 600; }
.sg-dropdown-list li.hidden { display: none; }

/* Combo input (prestataire) */
.sg-combo-input { width: 100%; }
.sg-combo-list { min-width: 280px; }
.sg-combo-section {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 10px 14px 4px; pointer-events: none;
}

/* Compact search grid (no event field) */
.sg-grid-compact { grid-template-columns: 2fr 1fr 0.7fr auto !important; }
@media (max-width: 900px) { .sg-grid-compact { grid-template-columns: 1fr 1fr !important; } .sg-field-wide { grid-column: 1 / -1; } }
@media (max-width: 500px) { .sg-grid-compact { grid-template-columns: 1fr !important; } }

/* Trust pills */
.hero-trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.25);
  border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}

/* Event type pills row */
.hero-event-types .pill { padding: 8px 14px; font-size: 12px; }

/* Compact hero title (2 lines) */
.hero-title-compact {
  font-size: clamp(40px, 6vw, 96px) !important;
  margin-bottom: 20px !important;
}

/* Title cinema animation */
.hero-cinema-title .line span {
  display: inline-block;
  transform: translateY(0);
  transition: none;
}
.hero-cinema-title.exit .line span {
  animation: slideDown 0.4s var(--ease-in-out) forwards;
}
.hero-cinema-title.exit .line:nth-child(2) span { animation-delay: 0.05s; }
.hero-cinema-title.exit .line:nth-child(3) span { animation-delay: 0.1s; }
.hero-cinema-title.enter .line span {
  transform: translateY(100%);
  animation: slideUp 0.6s var(--ease-out) forwards;
}
.hero-cinema-title.enter .line:nth-child(2) span { animation-delay: 0.08s; }
.hero-cinema-title.enter .line:nth-child(3) span { animation-delay: 0.16s; }
@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

/* Hero Split Cards — glassmorphism blur */
.hero-split-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 20px; margin-bottom: 20px;
  position: relative; z-index: 1;
}
@media (max-width: 640px) { .hero-split-cards { grid-template-columns: 1fr; } }

.split-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 253, 244, 0.06);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(9, 28, 59, 0.08);
  border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: all 0.5s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.split-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.split-card:hover::before { opacity: 1; }
.split-card:hover {
  background: rgba(255, 253, 244, 0.12);
  border-color: rgba(201, 168, 76, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(9, 28, 59, 0.12);
}

.split-card-icon-wrap {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  border: 1px solid rgba(201,168,76,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright);
  transition: transform 0.4s var(--ease-out), background 0.4s;
}
.split-card:hover .split-card-icon-wrap {
  transform: scale(1.08);
  background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(201,168,76,0.1));
}
.split-card-icon-client { color: var(--royal-blue); background: linear-gradient(135deg, rgba(30,91,255,0.12), rgba(30,91,255,0.04)); border-color: rgba(30,91,255,0.18); }
.split-card:hover .split-card-icon-client { background: linear-gradient(135deg, rgba(30,91,255,0.2), rgba(30,91,255,0.08)); }

.split-card-text { flex: 1; min-width: 0; }
.split-card-label {
  display: block;
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright); margin-bottom: 6px;
}
.split-card h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 15px;
  letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 3px;
  color: var(--ink-strong);
}
.split-card p {
  font-size: 12px; color: var(--ink-mute); line-height: 1.4; margin: 0;
}

.split-card-arrow-wrap {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(9, 28, 59, 0.04);
  border: 1px solid rgba(9, 28, 59, 0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright); opacity: 0.5;
  transition: all 0.4s var(--ease-out);
}
.split-card:hover .split-card-arrow-wrap {
  opacity: 1;
  background: var(--accent);
  color: var(--navy-deep);
  border-color: var(--accent);
  transform: translateX(4px);
}

/* Trust row */
.hero-trust-row {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 32px; padding-bottom: 32px; position: relative; z-index: 1;
}
.hero-cinema { padding-bottom: 0 !important; min-height: 100vh !important; min-height: 100svh !important; overflow: visible !important; display: flex !important; align-items: center !important; position: relative; z-index: 2; }

/* Masonry inspiration layout */
.masonry { columns: 3; column-gap: 16px; }
@media (max-width: 1200px) { .masonry { columns: 3; } }
@media (max-width: 800px) { .masonry { columns: 2; } }
@media (max-width: 500px) { .masonry { columns: 1; } }
.masonry .presta-card {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 16px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.5s;
}
.masonry .presta-card.in-view { opacity: 1; transform: translateY(0); }
.masonry .presta-card:hover { box-shadow: 0 30px 60px -20px rgba(9,28,59,0.25); }
.masonry .presta-img { border-radius: 16px; }
.masonry .presta-img img { border-radius: 16px; }
.venue-section { margin-top: 0; }

/* Photo break dynamic — blur reveal + Ken Burns */
.photo-break-reveal { display: none; }
.photo-break-dynamic .photo-break-img img {
  filter: blur(20px) saturate(0.6);
  transform: scale(1.15);
  opacity: 0.4;
  transition: none;
}
.photo-break-dynamic.revealed .photo-break-img img {
  animation: blurReveal 1.8s var(--ease-out) forwards, kenBurns 20s ease-in-out 1.8s infinite alternate;
}
.photo-break-dynamic .photo-break-caption {
  opacity: 0; transform: translateY(12px);
}
.photo-break-dynamic.revealed .photo-break-caption {
  animation: fadeUp 0.6s var(--ease-out) 1.2s both;
}
@keyframes blurReveal {
  0% { filter: blur(20px) saturate(0.6); transform: scale(1.15); opacity: 0.4; }
  60% { filter: blur(3px) saturate(0.9); opacity: 0.9; }
  100% { filter: blur(0px) saturate(1); transform: scale(1.08); opacity: 1; }
}
@keyframes kenBurns {
  0% { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1%); }
}

/* ── Venue Marquee ── */
.venue-section {
  padding: clamp(48px, 6vh, 72px) 0 clamp(40px, 5vh, 64px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
}
.venue-title {
  font-family: var(--f-display); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(28px, 3.5vw, 44px); margin: 0;
  color: var(--ink-strong);
}
.venue-title em { font-style: italic; color: var(--accent-bright); }
.venue-see-all {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-bright);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; transition: gap 0.3s; white-space: nowrap;
}
.venue-see-all:hover { gap: 10px; }
.venue-marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.venue-track {
  display: flex; gap: 16px;
  animation: marqueeH 40s linear infinite;
  flex-shrink: 0;
}
.venue-track:hover { animation-play-state: paused; }
/* =================== DISCOVER CARDS (match /prestataires #mainGrid) =================== */
#discover .presta-cat {
  background: var(--accent) !important;
  color: var(--navy-deep) !important;
  border-color: var(--accent) !important;
  font-weight: 600 !important;
}
#discover .presta-score { display: none !important; }
#discover .presta-tags { display: none !important; }
#discover .presta-rating {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 253, 244, 0.95);
  color: var(--navy-deep);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#discover .presta-rating .star {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}
#discover .presta-rating .count {
  opacity: 0.55;
  font-weight: 500;
  margin-left: 2px;
}
#discover .presta-card .presta-img::after {
  background: linear-gradient(180deg, transparent 20%, rgba(8, 27, 58, 0.35) 45%, rgba(8, 27, 58, 0.95) 100%) !important;
  opacity: 1 !important;
}
#discover .presta-info {
  padding: 18px 20px 20px !important;
  transform: none !important;
  bottom: 0 !important;
}
#discover .presta-name { color: #fff !important; }
#discover .presta-loc {
  display: inline-flex !important;
  align-items: center; gap: 5px;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  margin-bottom: 8px;
  opacity: 1 !important;
}
#discover .presta-loc svg { color: var(--accent-bright); flex-shrink: 0; }
#discover .presta-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* === Editorial vitrine card (fills masonry gaps, acts as CTA) === */
#discover .presta-vitrine { text-decoration: none; }
#discover .presta-vitrine .presta-img {
  background: linear-gradient(160deg, #081B3A 0%, #132847 45%, #5a4a1f 100%);
  overflow: hidden;
  position: relative;
}
#discover .presta-vitrine .presta-img::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 100%, rgba(201, 168, 76, 0.4) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(201, 168, 76, 0.16) 0%, transparent 60%);
  pointer-events: none;
}
#discover .presta-vitrine .presta-img::after { display: none !important; }
#discover .presta-vitrine .presta-vitrine-seal {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.6);
  background: rgba(8, 27, 58, 0.35);
  display: flex; align-items: center; justify-content: center;
  color: #E3C26A;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#discover .presta-vitrine .presta-vitrine-seal svg {
  width: 20px; height: 20px;
  animation: vitrineSparkle 3.5s ease-in-out infinite;
}
@keyframes vitrineSparkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50%      { transform: scale(1.12) rotate(4deg); opacity: 0.8; }
}
#discover .presta-vitrine .presta-vitrine-content {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 22px 22px;
  z-index: 2;
  color: #FDFAF4;
}
#discover .presta-vitrine-eyebrow {
  display: block;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E3C26A;
  margin-bottom: 10px;
}
#discover .presta-vitrine h3 {
  font-family: var(--f-display, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #FDFAF4;
}
#discover .presta-vitrine h3 em {
  font-style: italic;
  color: #CEC09D;
}
#discover .presta-vitrine p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(253, 250, 244, 0.78);
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
#discover .presta-vitrine-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E3C26A;
  transition: gap 0.25s var(--ease-out);
}
#discover .presta-vitrine:hover .presta-vitrine-cta { gap: 10px; }
#discover .presta-vitrine-cta svg { width: 14px; height: 14px; }

.venue-slide {
  flex: 0 0 320px; position: relative;
  border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/9;
  text-decoration: none;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.venue-slide::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(8, 27, 58, 0.45);
  z-index: 1;
  pointer-events: none;
  transition: background 0.4s var(--ease-out);
}
.venue-slide:hover::before { background: rgba(8, 27, 58, 0.3); }
.venue-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(8, 27, 58, 0.35);
}
.venue-slide-media {
  position: absolute; inset: 0;
  display: block;
  text-decoration: none;
}
.venue-slide-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.venue-slide:hover .venue-slide-media img { transform: scale(1.08); }
.venue-slide-info {
  position: absolute; bottom: 44px; left: 0; right: 0;
  z-index: 2;
  padding: 14px 16px 10px;
  background: transparent;
  color: #fff;
  pointer-events: none;
}
.venue-slide-info h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 18px;
  letter-spacing: -0.01em; margin: 0 0 4px;
  color: #fff;
}
.venue-slide-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.venue-slide-loc,
.venue-slide-rating {
  display: inline-flex; align-items: center; gap: 5px;
  color: rgba(255, 255, 255, 0.85);
}
.venue-slide-rating .star {
  color: #C9A84C;
  font-size: 11px;
}
.venue-slide-rating b {
  color: #fff; font-weight: 600;
  font-family: var(--f-mono); letter-spacing: 0.04em;
}
.venue-slide-rating .count {
  opacity: 0.65;
  text-transform: none;
}
/* CTA sits on top of the image (no background, no divider) so the
   info block + CTA read as one continuous section on the navy overlay. */
.venue-slide-cta {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px;
  background: transparent;
  color: #fff;
  font-family: var(--f-body, 'Inter', system-ui, sans-serif);
  font-weight: 600; font-size: 13px;
  text-decoration: none;
  border: 0;
  transition: color 0.25s, gap 0.25s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.venue-slide-cta:hover {
  color: #C9A84C;
  gap: 12px;
}
.venue-slide-cta svg {
  width: 14px; height: 14px;
  transition: transform 0.25s;
}
.venue-slide-cta:hover svg { transform: translateX(3px); }
@media (max-width: 640px) { .venue-slide { flex: 0 0 260px; } }

/* === Mobile/tablette (<900px) : limite la grille discover à 5 cartes max (4 prestataires + 1 carte Vitrine We Event en position 5) ===
   JS rend 14 prestataires + 1 vitrine = 15 cards. Sur mobile/tablette on cache
   les cards 6+ pour eviter une page trop longue. CSS-only -> s'adapte au resize sans re-render. */
@media (max-width: 900px) {
  .masonry > .presta-card:nth-child(n+6) {
    display: none !important;
  }
}

/* =====================================================================
   HERO v5 — PRIORITÉ CLIENT
   ---------------------------------------------------------------------
   Ce que le hero précédent ratait, mesuré au navigateur le 25/08/2026 :
     · 8 pastilles occupaient les 126 premiers pixels du mobile, AVANT le
       titre — la première chose vue était un filtre sans contexte ;
     · la barre de recherche démarrait à 546 px sur un écran de 844 et son
       bouton tombait sous la ligne de flottaison : le client ne voyait
       jamais l'action qu'on attend de lui ;
     · la porte prestataire était à 1154 px, c'est-à-dire invisible ;
     · trois cartes portaient une icône et aucun chiffre.

   La règle chromatique tient tout l'écran : l'or PLEIN n'existe que sur
   DEUX objets, tous deux clients — la ligne 2 du titre et le bouton de
   recherche. Les pastilles sont en contour, la porte prestataire est un
   bouton fantôme. L'œil n'a qu'un seul trajet possible.
   ===================================================================== */

/* Le hero n'a plus à remplir un écran : il doit en tenir un. */
.hero-v5 { padding-bottom: 0; }
.hero-v5 .hero-v5-grid {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(28px, 5vh, 56px) 0 clamp(24px, 4vh, 44px);
}
.hero-v5 .hero-v5-main { min-width: 0; }

.hero-v5 .hero-v5-eyebrow {
  margin: 0 0 12px;
  font-size: clamp(12.5px, 1.1vw, 14px);
  letter-spacing: .04em;
  color: rgba(255, 253, 244, .78);
}

/* Titre : la ligne 2 est le refrain doré, elle ne change jamais. */
.hero-v5 .hero-cinema-title { margin: 0 0 16px; }
.hero-v5 .hero-cinema-title .line span { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; }
.hero-v5 .hero-cinema-title em { font-style: italic; color: var(--accent-bright, #d8b45f); }

.hero-v5 .hero-v5-sub {
  margin: 0 0 22px;
  max-width: 56ch;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.5;
  color: rgba(255, 253, 244, .84);
}
.hero-v5 .hero-v5-sub strong { color: #fffdf4; font-weight: 600; }

/* ── La barre de recherche : le seul aplat doré de la zone client ── */
.hero-v5 .search-glass { margin: 0; }
.hero-v5 .search-glass-label {
  margin-bottom: 10px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 253, 244, .62);
}

/* ── Les pastilles : un affinage, pas une porte d'entrée ── */
.hero-v5 .hero-v5-organise { margin-top: 18px; }
.hero-v5 .hero-v5-organise-lbl {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(255, 253, 244, .6);
}
.hero-v5 .hero-event-types {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* le dégradé dit qu'il y en a d'autres à droite, sans ajouter de hauteur */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  padding-bottom: 2px;
}
.hero-v5 .hero-event-types::-webkit-scrollbar { display: none; }
.hero-v5 .hero-event-types .pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 9px 15px;
  font-size: 12.5px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 253, 244, .26);
  color: rgba(255, 253, 244, .82);
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.hero-v5 .hero-event-types .pill:hover { border-color: rgba(255, 253, 244, .55); color: #fffdf4; }
/* L'active se signale par un contour doré — jamais par un aplat : l'aplat
   doré est réservé au bouton de recherche. */
.hero-v5 .hero-event-types .pill.active {
  border-color: var(--accent, #c9a84c);
  color: var(--accent-bright, #d8b45f);
  background: rgba(201, 168, 76, .1);
}

/* ── La preuve : elle referme la boucle ouverte par le titre ── */
.hero-v5 .hero-v5-preuve {
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(8, 27, 58, .5);
  border: 1px solid rgba(255, 253, 244, .14);
  backdrop-filter: blur(6px);
}
.hero-v5 .hero-v5-preuve-lbl {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 253, 244, .66);
}
.hero-v5 .hero-v5-notes { list-style: none; margin: 0; padding: 0; }
.hero-v5 .hero-v5-notes li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 253, 244, .1);
}
.hero-v5 .hero-v5-notes li:last-child { border-bottom: 0; }
/* Or FIN, pas plein : ça doit se lire comme un reçu, pas comme un slogan. */
.hero-v5 .hero-v5-notes b {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-bright, #d8b45f);
  font-variant-numeric: tabular-nums;
}
.hero-v5 .hero-v5-notes span { font-size: 13.5px; color: rgba(255, 253, 244, .8); }
.hero-v5 .hero-v5-preuve-lien {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--accent-bright, #d8b45f);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-v5 .hero-v5-preuve-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 253, 244, .74);
}
.hero-v5 .hero-v5-presse {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 253, 244, .12);
  font-size: 12px;
  color: rgba(255, 253, 244, .66);
}
.hero-v5 .hero-v5-presse b { color: rgba(255, 253, 244, .88); font-weight: 600; }

/* ── La porte prestataire : franche, subordonnée, jamais concurrente ──
   Aplat bleu nuit opaque et non bande claire : sur un hero sombre, l'œil
   va à la luminosité avant la saturation — une bande claire volerait la
   barre de recherche. Le filet doré fait la frontière. */
.hero-v5 .hero-v5-pro {
  border-top: 1px solid rgba(201, 168, 76, .55);
  background: #071630;
}
.hero-v5 .hero-v5-pro-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding-top: 18px;
  padding-bottom: 18px;
}
.hero-v5 .hero-v5-pro-txt { min-width: 0; }
.hero-v5 .hero-v5-pro-txt h2 {
  margin: 0 0 4px;
  font-size: clamp(17px, 1.6vw, 21px);
  color: #fffdf4;
}
.hero-v5 .hero-v5-pro-txt p {
  margin: 0;
  max-width: 76ch;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 253, 244, .72);
}
.hero-v5 .hero-v5-pro-txt b { color: var(--accent-bright, #d8b45f); font-weight: 600; }
/* Bouton FANTÔME : trouvable en trois secondes, mais il ne reste qu'un
   seul bouton plein sur tout l'écran, et il est client. */
.hero-v5 .hero-v5-pro-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 253, 244, .5);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fffdf4;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.hero-v5 .hero-v5-pro-cta:hover { background: rgba(255, 253, 244, .1); border-color: #fffdf4; }

/* ── Recherches fréquentes : sorties du hero, maillage interne conservé ── */
.hero-v5-populaire { background: var(--cream, #fffdf4); border-bottom: 1px solid rgba(9, 28, 59, .08); }
.hero-v5-populaire .hero-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 14px;
  padding-bottom: 14px;
}
.hero-v5-populaire .hero-chips-row::-webkit-scrollbar { display: none; }
.hero-v5-populaire .hero-chip-label {
  flex: 0 0 auto;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(9, 28, 59, .55);
}
.hero-v5-populaire .hero-chip {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(9, 28, 59, .16);
  font-size: 13px;
  color: rgba(9, 28, 59, .82);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s ease, background .25s ease;
}
.hero-v5-populaire .hero-chip:hover { border-color: var(--accent, #c9a84c); background: rgba(201, 168, 76, .1); }

/* =====================================================================
   MOBILE — tout se joue ici : 390 x 844
   Objectif tenu : le BOUTON de recherche entier au-dessus de la ligne de
   flottaison, et le titre de la porte prestataire visible sans défiler.
   ===================================================================== */
@media (max-width: 980px) {
  .hero-v5 .hero-v5-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Le libellé de zone est redondant en mobile : les champs sont étiquetés. */
  .hero-v5 .search-glass-label { display: none; }

  /* Le geste le plus rentable du lot : le rayon et le bouton partagent une
     ligne au lieu d'en occuper deux. ~52 px gagnés au-dessus du bouton. */
  .hero-v5 .search-glass-grid.sg-grid-compact {
    grid-template-columns: 38fr 62fr !important;
    grid-template-areas:
      "quoi  quoi"
      "ou    ou"
      "rayon envoyer" !important;
    gap: 10px !important;
  }
  .hero-v5 .sg-field-wide { grid-column: auto !important; grid-area: quoi; }
  .hero-v5 .sg-field-where { grid-area: ou; }
  .hero-v5 .sg-field.sg-dropdown-wrap:not(.sg-field-wide) { grid-area: rayon; }
  .hero-v5 .sg-submit { grid-area: envoyer; min-height: 48px; }

  .hero-v5 .hero-v5-preuve { padding: 16px 18px; }
  .hero-v5 .hero-v5-notes { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .hero-v5 .hero-v5-notes::-webkit-scrollbar { display: none; }
  .hero-v5 .hero-v5-notes li {
    flex: 0 0 auto;
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .hero-v5 .hero-v5-notes b { display: block; min-width: 0; }
  .hero-v5 .hero-v5-notes span { display: block; font-size: 12px; white-space: nowrap; }
  /* La presse quitte le premier écran plutôt que de prétendre que tout rentre. */
  .hero-v5 .hero-v5-presse { display: none; }

  .hero-v5 .hero-v5-pro-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-v5 .hero-v5-pro-cta { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .hero-v5 .hero-v5-grid { padding-top: 20px; }
  .hero-v5 .hero-cinema-title .line span { font-size: 30px; }
  .hero-v5 .hero-v5-sub { font-size: 15px; margin-bottom: 18px; }
  /* Le placeholder long débordait sur 390 px. */
  .hero-v5 #sg-city::placeholder { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   .hero-cinema est declare « display:flex; flex-direction:row » plus haut
   dans styles.css : la bande prestataire, posee en frere du .container,
   devenait une COLONNE de 154 px et son .container interne debordait de
   230 px vers la droite. On repasse le hero en colonne — la centrage
   vertical d'origine est conserve par justify-content.
   --------------------------------------------------------------------- */
.hero-cinema.hero-v5 { flex-direction: column; justify-content: center; align-items: stretch; }
.hero-cinema.hero-v5 > .container { width: 100%; }
.hero-cinema.hero-v5 > .hero-v5-pro { width: 100%; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Le titre d'origine tenait sur deux lignes courtes ; la ligne 2 de la v5
   fait 48 caracteres. Le span interne est en inline-block (l'animation
   exit/enter transforme ce span) : sans max-width il refusait de se
   couper et imposait 497 px de large, ce qui poussait toute la page a
   620 px sur un ecran de 390.
   --------------------------------------------------------------------- */
.hero-v5 .hero-cinema-title .line { display: block; max-width: 100%; }
.hero-v5 .hero-cinema-title .line > span {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------
   `1fr` vaut `minmax(auto, 1fr)` : le minimum d'une piste de grille est le
   contenu MINIMAL de son element. Un <input> a `min-width: auto`, donc sa
   largeur intrinseque remontait toute la chaine et imposait 600 px de
   colonne sur un ecran de 390. `minmax(0, 1fr)` autorise la piste a
   descendre sous le contenu — c'est ce qui laisse les champs se
   redimensionner au lieu de pousser la page.
   --------------------------------------------------------------------- */
.hero-v5 .hero-v5-main,
.hero-v5 .hero-v5-organise,
.hero-v5 .search-glass,
.hero-v5 .search-glass-grid,
.hero-v5 .sg-field,
.hero-v5 .sg-field input,
.hero-v5 .sg-field .sg-dropdown-btn { min-width: 0; }

@media (max-width: 980px) {
  .hero-v5 .hero-v5-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   MOBILE — remonter la porte prestataire.
   Sur 390x844 la preuve occupait 218 px entre les pastilles et la bande
   prestataire. On la reduit a sa substance — le libelle, les quatre
   pourcentages, le lien — et on retire le paragraphe d'explication, qui
   est repris mot pour mot dans la section Meritocracy plus bas. On
   resserre aussi le rythme vertical.
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-v5 .hero-v5-grid { gap: 16px; padding-bottom: 16px; }
  .hero-v5 .hero-v5-sub { margin-bottom: 16px; }
  .hero-v5 .hero-v5-organise { margin-top: 14px; }

  .hero-v5 .hero-v5-preuve {
    padding: 12px 14px;
    background: rgba(8, 27, 58, .42);
  }
  .hero-v5 .hero-v5-preuve-lbl { margin-bottom: 10px; font-size: 11.5px; }
  .hero-v5 .hero-v5-notes b { font-size: 16px; }
  .hero-v5 .hero-v5-preuve-lien { margin-top: 10px; font-size: 12.5px; }
  /* Repris tel quel dans la section Meritocracy, 3 ecrans plus bas. */
  .hero-v5 .hero-v5-preuve-note { display: none; }

  .hero-v5 .hero-v5-pro-in { padding-top: 14px; padding-bottom: 14px; }
  .hero-v5 .hero-v5-pro-txt p { font-size: 12.5px; }
}

/* =====================================================================
   CORRECTION — le hero est sur fond CLAIR, pas sombre
   ---------------------------------------------------------------------
   Deux erreurs de ma part, mesurees au navigateur :
   1. J'ai ecrit tous les textes en creme rgba(255,253,244,…) en supposant
      un hero bleu nuit. Le hero est creme : la moitie du texte etait
      invisible. Les jetons reels de la page le disaient pourtant —
      --ink-strong: #081B3A, --accent-bright: #B8912F, un dore SOMBRE.
   2. `.hero-cinema-bg` est en `position:absolute; z-index:0`. Un element
      positionne se peint AU-DESSUS d'un bloc en flux normal a z-index
      egal : l'image de fond recouvrait la bande prestataire, qui etait
      pourtant bien en bleu nuit. Il lui manquait un contexte
      d'empilement.
   ===================================================================== */

/* 1. Sortir les deux blocs de couleur de sous l'image de fond. */
.hero-v5 .hero-v5-pro,
.hero-v5 .hero-v5-preuve { position: relative; z-index: 1; }

/* 2. Textes de la zone client : encre sombre sur creme. */
.hero-v5 .hero-v5-eyebrow { color: rgba(8, 27, 58, .72); }
.hero-v5 .hero-v5-sub { color: rgba(8, 27, 58, .8); }
.hero-v5 .hero-v5-sub strong { color: var(--ink-strong, #081b3a); }
.hero-v5 .search-glass-label { color: rgba(8, 27, 58, .6); }
.hero-v5 .hero-v5-organise-lbl { color: rgba(8, 27, 58, .62); }
.hero-v5 .hero-cinema-title em { color: var(--accent-bright, #b8912f); }

/* 3. Pastilles : contour sombre, actif dore sombre — toujours pas d'aplat. */
.hero-v5 .hero-event-types .pill {
  border-color: rgba(8, 27, 58, .2);
  color: rgba(8, 27, 58, .78);
}
.hero-v5 .hero-event-types .pill:hover { border-color: rgba(8, 27, 58, .45); color: var(--ink-strong, #081b3a); }
.hero-v5 .hero-event-types .pill.active {
  border-color: var(--accent, #c9a84c);
  color: #7a5f26;
  background: rgba(201, 168, 76, .14);
}

/* 4. La preuve devient un vrai bloc sombre : c'est le seul contraste
      inverse de l'ecran, et il porte le chiffre qui justifie le titre. */
.hero-v5 .hero-v5-preuve {
  background: #0b1f42;
  border-color: rgba(255, 253, 244, .12);
  box-shadow: 0 24px 60px rgba(8, 27, 58, .26);
}
.hero-v5 .hero-v5-notes b { color: #d8b45f; }

/* 5. La bande prestataire garde son aplat bleu nuit et son texte creme. */
.hero-v5 .hero-v5-pro-txt b { color: #d8b45f; }

/* Le libelle des recherches frequentes mesurait 3,86:1 sur creme. */
.hero-v5-populaire .hero-chip-label { color: rgba(9, 28, 59, .74); }

/* =====================================================================
   BANDE PRESTATAIRE — registre offensif
   ---------------------------------------------------------------------
   Elle listait des arguments ; elle porte maintenant une phrase qui pique.
   Le titre monte en taille pour exister face au H1 client sans le
   concurrencer : il reste dans un aplat sombre, en bas d'ecran, et son
   bouton reste un contour — le seul aplat dore de la page est celui de la
   recherche.
   ===================================================================== */
.hero-v5 .hero-v5-pro-in { align-items: center; }

.hero-v5 .hero-v5-pro-eyebrow {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(216, 180, 95, .9);
}
.hero-v5 .hero-v5-pro-txt h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #fffdf4;
}
.hero-v5 .hero-v5-pro-txt h2 em {
  font-style: italic;
  color: #d8b45f;
}
.hero-v5 .hero-v5-pro-txt p {
  max-width: 62ch;
  font-size: 13.5px;
  color: rgba(255, 253, 244, .78);
}
.hero-v5 .hero-v5-pro-txt b { color: #fffdf4; font-weight: 600; }

.hero-v5 .hero-v5-pro-act {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-v5 .hero-v5-pro-cta { padding: 13px 26px; font-size: 15px; }
.hero-v5 .hero-v5-pro-note {
  font-size: 11.5px;
  letter-spacing: .02em;
  color: rgba(255, 253, 244, .62);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .hero-v5 .hero-v5-pro-in { align-items: stretch; }
  .hero-v5 .hero-v5-pro-txt h2 { font-size: 21px; }
  .hero-v5 .hero-v5-pro-txt p { font-size: 12.5px; }
  .hero-v5 .hero-v5-pro-act { width: 100%; }
}

/* ---------------------------------------------------------------------
   La ligne doree du titre etait a 2,47:1 sur le creme — sous le seuil de
   3:1 qui s'applique au grand texte. Ma sonde de contraste ne requetait
   pas les <em> : elle rendait « 0 defaut » sur la ligne la plus visible
   de la page. Mesures sur creme #f3ead9 :
     --accent        #c9a84c  1,91:1
     --accent-bright #b8912f  2,47:1
     #a37f27                  3,13:1   trop juste
     #957324                  3,70:1   retenu
   --------------------------------------------------------------------- */
.hero-v5 .hero-cinema-title em { color: #957324; }

/* Le libelle de la zone de recherche mesurait 4,46:1 — le seuil est 4,5. */
.hero-v5 .search-glass-label { color: rgba(8, 27, 58, .68); }

/* =====================================================================
   HERO V5 — LA VITRINE TOURNANTE                          27/08/2026
   =====================================================================
   Remplace l'encart statique « Ce qui fait sa note ». Robin :
   « on ne sait pas à qui il s'adresse, ni de qui il parle ». La carte
   nomme désormais un prestataire réel, et les jauges disent ce qui
   compose SA note — la boucle ouverte par le titre se referme sur un
   cas concret plutôt que sur un barème abstrait.

   Elle réutilise la coque `.hero-v5-preuve` (aplat nuit translucide +
   flou) : sur un hero photographique, changer de coque ferait un second
   objet là où il n'y en a qu'un.
   ===================================================================== */

/* Un seul style d'étiquette pour tout le hero. C'est l'incohérence que
   Robin signalait sur « Prestataires de l'événementiel » : trois libellés
   de même fonction avaient trois graisses, trois interlettrages et deux
   familles. Ils partagent maintenant une seule règle. */
.hero-v5 .hero-v5-lbl,
.hero-v5 .hero-v5-preuve-lbl,
.hero-v5 .hero-v5-pro-eyebrow {
  font-family: var(--f-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-v5 .hero-v5-lbl,
.hero-v5 .hero-v5-preuve-lbl { margin: 0 0 14px; color: rgba(255, 253, 244, .5); }
.hero-v5 .hero-v5-pro-eyebrow { margin: 0 0 6px; color: rgba(216, 180, 95, .9); }

.hero-v5 .hv-vitrine-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hero-v5 .hv-vitrine-head .hero-v5-lbl { margin-bottom: 0; }

/* Les pastilles disent combien il y en a et où l'on en est. Purement
   informatives : la rotation n'est pas pilotable, donc pas de boutons. */
.hero-v5 .hv-points { display: flex; gap: 5px; flex: 0 0 auto; }
.hero-v5 .hv-points i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 253, 244, .22);
  transition: background 240ms ease;
}
.hero-v5 .hv-points i.on { background: var(--accent-bright, #d8b45f); }

.hero-v5 .hv-carte { margin: 18px 0 16px; }
.hero-v5 .hv-ident { display: flex; gap: 14px; align-items: center; }

.hero-v5 .hv-avatar {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display, Fraunces, Georgia, serif);
  font-size: 19px; color: #081b3a;
  background: linear-gradient(140deg, #c9a84c, #8a6f2e);
}
.hero-v5 .hv-qui { flex: 1 1 auto; min-width: 0; }
.hero-v5 .hv-nom {
  display: block;
  font-family: var(--f-display, Fraunces, Georgia, serif);
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.18;
  color: #fffdf4; text-decoration: none;
  /* Un nom long ne doit ni pousser la colonne ni recouvrir la note. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-v5 .hv-nom:hover, .hero-v5 .hv-nom:focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}
.hero-v5 .hv-meta {
  display: block; margin-top: 3px; font-size: 12.5px;
  color: rgba(255, 253, 244, .62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-v5 .hv-note { flex: 0 0 auto; text-align: right; }
.hero-v5 .hv-note b {
  display: block;
  font-family: var(--f-display, Fraunces, Georgia, serif);
  font-size: 30px; line-height: 1; font-weight: 400;
  color: var(--accent-bright, #d8b45f);
  font-variant-numeric: tabular-nums;
}
.hero-v5 .hv-note span {
  display: block; margin-top: 3px; font-size: 11px;
  color: rgba(255, 253, 244, .55);
}

.hero-v5 .hv-sep {
  padding-top: 15px;
  border-top: 1px solid rgba(255, 253, 244, .14);
}

/* Les jauges : la part de chaque critère, dessinée et non seulement écrite. */
.hero-v5 .hero-v5-notes li { position: relative; }
.hero-v5 .hv-jauge {
  flex: 1 1 auto; height: 5px; border-radius: 3px;
  background: rgba(255, 253, 244, .12); overflow: hidden;
}
.hero-v5 .hv-jauge i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--accent, #c9a84c);
  transform-origin: left;
}

/* Le changement de prestataire : une seule respiration, 420 ms.
   Deux noms d'animation alternés — réattribuer le même nom ne la
   redéclenche pas, alterner si. */
@keyframes hvEntreeA { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes hvEntreeB { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes hvJaugeA  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hvJaugeB  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-v5 .hv-carte[data-pas="a"] { animation: hvEntreeA 420ms ease-out both; }
.hero-v5 .hv-carte[data-pas="b"] { animation: hvEntreeB 420ms ease-out both; }
.hero-v5 .hv-jauge[data-pas="a"] i { animation: hvJaugeA 620ms cubic-bezier(.2, .7, .3, 1) both; }
.hero-v5 .hv-jauge[data-pas="b"] i { animation: hvJaugeB 620ms cubic-bezier(.2, .7, .3, 1) both; }

/* Mouvement réduit : le contenu change encore (le script coupe la
   rotation automatique), mais rien ne bouge à l'écran. */
@media (prefers-reduced-motion: reduce) {
  .hero-v5 .hv-carte, .hero-v5 .hv-jauge i { animation: none !important; }
  .hero-v5 .hv-points i { transition: none; }
}

@media (max-width: 900px) {
  .hero-v5 .hv-avatar { flex-basis: 46px; width: 46px; height: 46px; font-size: 16px; }
  .hero-v5 .hv-note b { font-size: 25px; }
  .hero-v5 .hv-carte { margin: 14px 0 12px; }
}

/* Sur mobile, `.hero-v5-notes` passe en rangée défilante : les jauges y
   seraient illisibles, on ne garde que la part et le libellé. */
@media (max-width: 640px) {
  .hero-v5 .hv-jauge { display: none; }
}

.hero-v5 .hero-v5-notes li { align-items: center; }

/* =====================================================================
   BANDE PRESTATAIRE — DIRECTION A « RESPIRÉE »            27/08/2026
   =====================================================================
   Robin : « ce bandeau est trop compact, le design ne me plaît pas ».
   Trois gestes, aucun contenu inventé :

   1. **18 px de padding vertical deviennent 52.** C'est la cause première
      du tassement : quatre éléments empilés dans la respiration d'une
      seule ligne.

   2. **Le titre passe en Fraunces.** Il était en Inter alors que le hero
      juste au-dessus est en Fraunces — deux typographies qui se disputent
      à 40 px d'écart. C'est ce qui produisait le « je n'aime pas » sans
      qu'on sache dire pourquoi.

   3. **Le paragraphe gris de trois lignes devient trois preuves** alignées
      sur toute la largeur, sous un filet. Même information, lue d'un
      balayage, et elle occupe enfin l'espace horizontal que la bande
      gaspillait en marge droite.

   Le bouton reste FANTÔME : il n'y a qu'un seul bouton plein sur l'écran
   et il est client. Il gagne seulement en taille et prend un liseré doré.
   ===================================================================== */

/* Le conteneur cesse d'être la rangée flex : il devient un bloc qui porte
   deux étages (la rangée titre + bouton, puis les preuves). */
.hero-v5 .hero-v5-pro-in {
  display: block;
  padding-top: 52px;
  padding-bottom: 46px;
}

.hero-v5 .hero-v5-pro-haut {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}

.hero-v5 .hero-v5-pro-eyebrow { margin: 0 0 16px; }

/* Fraunces 300, comme le hero. La graisse fine tient à cette taille et
   évite que la bande crie plus fort que le titre client. */
.hero-v5 .hero-v5-pro-txt h2 {
  margin: 0;
  font-family: var(--f-display, Fraunces, Georgia, serif);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fffdf4;
}
.hero-v5 .hero-v5-pro-txt h2 em { font-style: italic; color: #d8b45f; }

.hero-v5 .hero-v5-pro-act { gap: 10px; }
.hero-v5 .hero-v5-pro-cta {
  min-height: 52px;
  padding: 16px 32px;
  font-size: 16px;
  border-color: rgba(216, 180, 95, .75);
}
.hero-v5 .hero-v5-pro-cta:hover { border-color: #E3C26A; background: rgba(216, 180, 95, .12); }
.hero-v5 .hero-v5-pro-note { font-size: 12px; }

/* ── Les trois preuves ─────────────────────────────────────────────── */
.hero-v5 .hero-v5-pro-preuves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
  /* Un <ul> arrive avec 40px d'indentation et 1em de marge basse du
     navigateur : `list-style: none` n'en remet aucun a zero. Sans ces deux
     lignes les preuves demarrent a droite du titre et le bandeau traine
     17px de vide en bas. Mesure au navigateur, pas suppose. */
  margin: 30px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(255, 253, 244, .14);
  list-style: none;
}
.hero-v5 .hero-v5-pro-preuves li { min-width: 0; }
.hero-v5 .hero-v5-pro-preuves b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--f-display, Fraunces, Georgia, serif);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1;
  color: var(--gold-bright, #E3C26A);
}
.hero-v5 .hero-v5-pro-preuves span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 253, 244, .82);
}

/* ── Tablette ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-v5 .hero-v5-pro-in { padding-top: 40px; padding-bottom: 36px; }
  .hero-v5 .hero-v5-pro-haut { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero-v5 .hero-v5-pro-act { width: 100%; align-items: stretch; }
  .hero-v5 .hero-v5-pro-cta { width: 100%; justify-content: center; }
  .hero-v5 .hero-v5-pro-note { text-align: center; white-space: normal; }
}

/* ── Téléphone ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .hero-v5 .hero-v5-pro-in { padding-top: 32px; padding-bottom: 30px; }
  /* Une colonne : trois colonnes de 100 px rendraient les preuves illisibles.
     Elles gardent leur filet, mais entre elles plutôt qu'au-dessus du lot. */
  .hero-v5 .hero-v5-pro-preuves {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 24px 0 0;
    padding: 0;
    border-top: 0;
  }
  .hero-v5 .hero-v5-pro-preuves li {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 253, 244, .14);
  }
  .hero-v5 .hero-v5-pro-preuves b { margin-bottom: 4px; font-size: 20px; }
  .hero-v5 .hero-v5-pro-preuves span { font-size: 13.5px; }
}

/* =====================================================================
   OPTIMISATION GRAPHIQUE DE L'ACCUEIL — 28/08/2026
   =====================================================================
   Tout ce qui suit a été MESURÉ au navigateur sur v4, à 1440×900 et
   390×844, puis chaque règle a été localisée dans la cascade et vérifiée
   contre les redéfinitions concurrentes. Les chiffres cités sont relevés,
   pas estimés.

   ⚠️ Ce bloc est ajouté EN FIN de homepage.css, et non dans sections.css
   où vivent les règles d'origine. Raison : `.discover` est aussi portée
   par prestataires.html, qui charge styles.css mais PAS homepage.css.
   Corriger sections.css déplacerait la grille prestataires sans qu'on
   l'ait demandé. homepage.css est chargé après styles.css : à spécificité
   égale, il gagne — et il n'est chargé que par les 7 homepage.html.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   1. LE RYTHME VERTICAL — une échelle qu'on peut enfin lire
   ─────────────────────────────────────────────────────────────────────
   Constat mesuré : l'accueil sert SIX valeurs de padding vertical pour
   une seule fonction (72, 81, 90, 126, 144, 162 px à 1440) là où
   /devenir-prestataire n'en sert qu'UNE, écrite en clair.

   La cause n'est pas la négligence — c'est plus intéressant que ça.
   Les onze règles sont écrites en `clamp(min, Xvh, max)` : le rythme est
   CALCULÉ sur la hauteur de la fenêtre. Sur un écran de 1080 px de haut,
   les mêmes règles rendent 86/97/108/151/173/194. L'échelle n'existe en
   clair nulle part, donc personne ne pouvait la tenir — et deux visiteurs
   sur deux écrans différents voyaient deux mises en page différentes.

   On repasse en pixels fixes, base 32. Le 96 est repris tel quel de
   /devenir-prestataire, qui prouve depuis le 25/08 qu'une valeur unique
   tient sur ce site.

   ⚠️ À dire honnêtement : unifier le rythme ne RACCOURCIT pas la page.
   Les 2 685 px de padding ne pèsent que 15,9 % des 16 878 px ; le gain
   mesuré est de −110 px au desktop, soit 0,7 %. La longueur est dans le
   contenu (#discover fait 3 332 px à lui seul) et dans les trois
   photo-break (1 890 px). Le gain ici est de COHÉRENCE, pas de défilement.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* DENSE — une bande de transition : une seule ligne d'information,
     ni titre de section ni grille. */
  --sec-dense: 64px;
  /* NORMAL — le gabarit de neuf sections sur vingt : eyebrow mono, titre
     Fraunces, sous-titre Inter, une grille, un CTA. Même anatomie ⇒ même
     respiration. */
  --sec: 96px;
  /* AMPLE — les deux seules sections SANS grille, où le blanc est le
     dispositif de lecture et non un reste. */
  --sec-ample: 128px;
}

/* Téléphone. Le `vh` faisait ce travail tout seul ; en pixels fixes il
   faut le redescendre explicitement, sinon la page mobile s'allonge.
   UN seul palier : la page a déjà trop d'échelles, on n'en ajoute pas
   une intermédiaire. */
@media (max-width: 700px) {
  :root { --sec-dense: 48px; --sec: 72px; --sec-ample: 88px; }
}

/* DENSE — .press-band-v2 : une citation et un logo, 290 px de haut.
   C'est une bande, pas une section. */
.press-band-v2 { padding: var(--sec-dense, 64px) 0; }

/* DENSE — .venue-section était ASYMÉTRIQUE : 54 px en haut, 45 en bas
   (51/42 à 390). Deux clamps différents tapés là où une seule valeur
   était voulue. C'est un accident d'écriture, pas une intention. */
.venue-section { padding: var(--sec-dense, 64px) 0; }

/* NORMAL — ces neuf sections ont EXACTEMENT la même anatomie et servaient
   pourtant 72, 81, 90 et 126 px. Interchangeables en fonction, elles
   doivent l'être en rythme.
   · `section.we-formules` porte un `section` en plus (0-1-1) : son
     padding vit dans un <style id="we-formules-css"> INLINE placé après
     le <link> homepage.css dans les 7 HTML — 0-1-0 ne suffirait pas.
   · `.tools` était asymétrique 54/126, mais la cause est un attribut
     `style` EN LIGNE sur le <section> ; il est retiré des 7 HTML par le
     même lot. Ici on ne pose que la règle de fond. */
.how-v4,
.discover,
.meritocracy,
.tools,
.pro-pitch,
section.we-formules,
.testimonials,
.salons-v4,
.faq-v4 { padding: var(--sec, 96px) 0; }

/* AMPLE — .manifesto : un paragraphe dont les mots s'allument au scroll,
   il n'y a rien d'autre dans la section : le vide EST le contenu.
   .finale : eyebrow + titre + deux boutons, centré, sans grille.
   Elles descendent de 144 et 162 à 128, mais restent le niveau haut. */
.manifesto,
.finale { padding: var(--sec-ample, 128px) 0; }


/* ─────────────────────────────────────────────────────────────────────
   2. L'ÉTIQUETTE DU BANDEAU PRO REJOINT SA PROPRE RÈGLE
   ─────────────────────────────────────────────────────────────────────
   homepage.css:1479 pose « un seul style d'étiquette pour tout le hero »
   à 11 px / 500 / .18em. Elle n'a JAMAIS pris effet sur celle du bandeau
   pro : le `<p class="hero-v5-pro-eyebrow">` est aussi un `p` de
   `.hero-v5-pro-txt`, et `.hero-v5 .hero-v5-pro-txt p` (0-2-1) bat
   `.hero-v5 .hero-v5-pro-eyebrow` (0-2-0). Mesuré : 13,5 px au-dessus de
   980 px, 12,5 en dessous, au lieu des 11 demandés.

   C'est très exactement l'incohérence de typographie signalée sur
   « Prestataires de l'événementiel » le 27/08 — le correctif d'alors
   croyait l'avoir fermée. On ajoute la classe au sélecteur (0-3-1) ;
   pas de !important.
   ───────────────────────────────────────────────────────────────────── */
.hero-v5 .hero-v5-pro-txt p.hero-v5-pro-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
}
@media (max-width: 980px) {
  /* la variante mobile de `.hero-v5-pro-txt p` doit être battue elle
     aussi, sinon l'étiquette repasse à 12,5 px à 390 */
  .hero-v5 .hero-v5-pro-txt p.hero-v5-pro-eyebrow { font-size: 11px; }
}


/* ─────────────────────────────────────────────────────────────────────
   3. DEUX CIBLES TACTILES SOUS LE SEUIL, POUR ZÉRO PIXEL DE MISE EN PAGE
   ─────────────────────────────────────────────────────────────────────
   Seuils : Apple HIG 44×44, Material 48 dp.
   ───────────────────────────────────────────────────────────────────── */

/* « Voir tous les lieux » : 17,1 px de haut — la plus petite cible de la
   page, et c'est l'entrée du catalogue des lieux. L'étiquette est en
   JetBrains Mono 11 px capitales : c'est une étiquette, pas du corps de
   texte, on n'y touche pas. On ouvre la zone à 44 px et on ANNULE
   l'ouverture par des marges négatives — la boîte de mise en page reste
   à 18 px, donc l'alignement avec le titre ne bouge pas d'un pixel. */
.venue-see-all {
  min-height: 44px;
  padding-block: 13px;
  margin-block: -13px;
}

/* Les 6 « recherches fréquentes » du hero : 35,8 px. Ce sont de vrais
   liens d'entrée dans le catalogue. La rangée est déjà à défilement
   horizontal et mesure 63,8 px : les porter à 44 n'ajoute que 8,2 px à
   la page, UNE seule fois. Le texte reste à 13 px — c'est une puce. */
.hero-v5-populaire .hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────────
   4. 🚨 LA BARRE DE RECHERCHE CESSE DE DÉCLENCHER LE ZOOM iOS
   ─────────────────────────────────────────────────────────────────────
   Le défaut le plus grave du relevé, et le seul invisible sans un vrai
   iPhone : `#sg-presta` et `#sg-city` rendent à 14 px. Sous 16 px,
   Safari iOS zoome AUTOMATIQUEMENT à la mise au point — la page saute,
   le hero disparaît. Sur l'élément central de la page d'accueil.

   La règle gagnante est `.sg-field select, .sg-field input` (0-1-1) dans
   sections.css ; `.hero-v5 .sg-field input` (0-2-1) la bat sans
   !important. `.sg-transparent` ne gagne pas : ses !important ne portent
   que sur background et border.

   ⚠️ La règle sur `.sg-field-wide` est INDISPENSABLE, pas cosmétique.
   Le bloc mobile déclare `grid-template-areas: "quoi quoi" …`, mais
   homepage.css:1230 pose `grid-column: auto !important` sur
   `.sg-field-wide`, qui bat le longhand issu de `grid-area: quoi`.
   Mesuré : le champ « Ce que vous cherchez » ne fait que 106,6 px au
   lieu de 290,4 — neuf caractères utiles. Passer à 16 px SANS cette
   ligne le réduirait à huit : on dégraderait l'élément qu'on prétend
   réparer. Avec elle : vingt-sept caractères.

   Effet mesuré à 390 px : le bouton « Rechercher » REMONTE de 3,8 px
   (629,1 → 625,3 du haut du document), le libellé cessant de s'enrouler
   sur deux lignes. Aucun débordement horizontal. Le champ Rayon dispose
   de 57 px utiles pour 47,3 requis à 16 px : pas de troncature.
   Vérifié à 1440 : la règle n'a aucun effet.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-v5 .sg-field input,
  .hero-v5 .sg-field .sg-dropdown-btn {
    font-size: 16px;
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* rend effective la zone "quoi quoi" déjà déclarée plus haut */
  .hero-v5 .sg-field-wide { grid-column: 1 / -1 !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   5. LE CHAMP « RAYON » CESSE D'ÊTRE TRONQUÉ AU DESKTOP
   ─────────────────────────────────────────────────────────────────────
   Mesuré à 1440 px : la colonne Rayon fait 78 px. Moins 28 px de padding
   du bouton, 12 px de chevron et 8 px de gap, il reste **30 px de place
   pour un mot qui en demande 41** — le libellé s'affiche « R… » sur un
   écran de bureau, dans la barre de recherche.

   La cause est la piste `0.7fr` de `.sg-grid-compact` (homepage.css:503) :
   les quatre colonnes sont `2fr 1fr 0.7fr auto`, et le `auto` du bouton
   « Voir qui est bien noté » prend 218 px, ce qui étrangle la troisième.

   `minmax(96px, .7fr)` garde la proportion quand il y a la place et
   garantit un plancher quand il n'y en a pas : 96 − 28 − 12 − 8 = 56 px
   utiles pour 41 requis. Les trois autres pistes absorbent les 18 px,
   réparties par leurs propres `fr`.

   Portée : au-DESSUS de 980 px seulement. En dessous, c'est la règle de
   homepage.css:1222 (`38fr 62fr` + grid-template-areas) qui gagne, et
   elle place déjà le rayon sur sa propre ligne — le défaut n'y existe pas.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
  .hero-v5 .search-glass-grid.sg-grid-compact {
    grid-template-columns: 2fr 1fr minmax(96px, .7fr) auto !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   LES TROIS PHOTO-BREAK — de 70vh à 48vh
   ─────────────────────────────────────────────────────────────────────
   Mesuré à 1440×900 : trois respirations de 630 px, soit 1 890 px et
   11 % de la page. La première est prise entre la finale (128 px de
   padding) et le manifesto (128 px + texte éteint) ; la troisième sépare
   deux sections crème et son fondu ajoute ~110 px de crème de chaque
   côté : ~820 px sans une ligne entre la dernière carte outil et le
   titre suivant. À 432 px la photo reste pleine largeur et cinéma — le
   Ken Burns ne dépend pas de la hauteur. −594 px sur trois.
   sections.css reste intact : la surcharge vit ici, chargée après.
   ───────────────────────────────────────────────────────────────────── */
.photo-break { height: 48vh; max-height: 460px; min-height: 320px; }