/* ===== Refonte « carte marine » =====
   Page claire. Le premier écran reprend le bloc de fin : une carte marine arrondie,
   posée sur le blanc, accents sable. Le marine reste rare, donc précieux. */
:root {
  --bg: #f9f9f7;
  --surface: #ffffff;
  --gold: #b89a74;
  --gold-ink: #7a6143;
  --gold-bright: #e5d5bf;
  --gold-line: rgba(184, 154, 116, 0.35);
  --loops-sable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23e5d5bf' stroke-width='1'%3E%3Crect x='40' y='40' width='520' height='520' rx='260'/%3E%3Crect x='70' y='70' width='460' height='460' rx='230'/%3E%3Crect x='100' y='100' width='400' height='400' rx='200'/%3E%3Crect x='130' y='10' width='340' height='580' rx='170'/%3E%3Crect x='160' y='40' width='280' height='520' rx='140'/%3E%3Crect x='10' y='160' width='580' height='280' rx='140'/%3E%3C/svg%3E");
  --loops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23b89a74' stroke-width='1'%3E%3Crect x='40' y='40' width='520' height='520' rx='260'/%3E%3Crect x='70' y='70' width='460' height='460' rx='230'/%3E%3Crect x='100' y='100' width='400' height='400' rx='200'/%3E%3Crect x='130' y='10' width='340' height='580' rx='170'/%3E%3Crect x='160' y='40' width='280' height='520' rx='140'/%3E%3Crect x='10' y='160' width='580' height='280' rx='140'/%3E%3C/svg%3E");
}
body { background: var(--bg); }
::selection { background: #e5d5bf; color: var(--navy); }

/* --- Premier écran : une carte marine posée sur la page --- */
.hero { padding: 14px 0 0; overflow: visible; }
.hero::before { display: none; }
.hero > .wrap {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  padding: 30px 20px 30px;
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 0%, #1d2d5a 0%, var(--navy) 60%);
  color: #fffefb;
}
.hero > .wrap::before {
  content: ""; position: absolute; z-index: -1; top: -200px; right: -200px;
  width: 520px; height: 520px;
  background: var(--loops-sable) center / contain no-repeat; opacity: 0.22;
}
@media (max-width: 859px) {
  .hero > .wrap { margin: 0 10px; width: auto; padding: 26px 18px 26px; }
}
@media (min-width: 860px) {
  .hero { padding-top: 28px; }
  .hero > .wrap { padding: 56px 56px; }
}
.hero h1 { color: #fffefb; }
.hero h1 em, .hero .proof { color: var(--gold-bright); }
.hero .audience, .hero .when { color: #fffefb; }
.hero .when .sep { color: var(--gold); }
.hero .upsell-note { color: rgba(255, 254, 251, 0.72); }
.hero .upsell-note a { color: #fffefb; }
.hero .seats-chip { background: transparent; color: #fffefb; box-shadow: inset 0 0 0 1px rgba(255, 254, 251, 0.3); }
.hero .seats-chip strong { color: #fffefb; }
.hero .seats-chip svg { color: var(--gold-bright); }
.hero .video { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(229, 213, 191, 0.18); }

/* --- Boutons : marine sur le clair, sable sur le marine --- */
.button--gold, .button--gold:hover { background: var(--navy); color: #fffefb; box-shadow: 0 14px 28px -16px rgba(14, 26, 56, 0.6); }
.button--gold:hover { background: #1a2a54; }
.hero .button--gold, .ticket--vip .button--gold, .closing .button--gold, .rsvp-bar .button--gold {
  background: var(--gold-bright); color: var(--navy); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
}
.hero .button--gold:hover, .ticket--vip .button--gold:hover, .closing .button--gold:hover, .rsvp-bar .button--gold:hover { background: #efe3d2; }

/* --- Bandeau de mots : léger, sur le clair --- */
.wordband { background: transparent; color: var(--navy); border-block: 1px solid rgba(14, 26, 56, 0.08); margin-top: 28px; }
.wordband-track span:nth-of-type(odd) { color: var(--gold-ink); }
.wordband-track i { color: var(--gold); }

/* --- Sections claires --- */
.section { border-top-color: rgba(14, 26, 56, 0.07); }
.programme-section::before { opacity: 0.25; }
.seats-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--gold-line); }

/* --- Billets --- */
.ticket { box-shadow: inset 0 0 0 1px rgba(14, 26, 56, 0.08), 0 30px 60px -36px rgba(14, 26, 56, 0.3); }
.ticket--vip { background: radial-gradient(120% 80% at 100% 0%, #1d2d5a 0%, var(--navy) 60%); box-shadow: 0 30px 60px -30px rgba(9, 18, 42, 0.6); }

/* --- Fin et bandeau fixe --- */
.closing::before { background-image: var(--loops-sable); }
.rsvp-bar { background: rgba(14, 26, 56, 0.96); }
@media (min-width: 860px) {
  .hero h1 { font-size: clamp(2.8rem, 4.2vw, 4rem); }
  .hero h1 span, .hero h1 em { display: inline; }
  .hero-grid { column-gap: 48px; }
}
@media (max-width: 859px) {
  .hero { padding-top: 10px; }
  .hero > .wrap { padding: 22px 16px 24px; }
  .hero-grid { gap: 16px; }
}

/* ===== Fusion : l'enjeu, l'intervenant, l'au-delà ===== */
.stakes-kicker { color: var(--gold-ink); margin: 0 0 12px; }
.stakes h2 { max-width: 20ch; }
.stakes-lede { max-width: 52ch; margin: 0 0 28px; }
.stakes-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .stakes-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .stakes-grid { grid-template-columns: repeat(4, 1fr); } }
.stakes-grid li { background: var(--surface); border-radius: var(--radius-sm); padding: 22px 22px 24px; box-shadow: inset 0 0 0 1px var(--gold-line); }
.stakes-grid h3 { font-size: 1.1rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.stakes-grid h3::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 14px; background: var(--gold); }
.stakes-grid p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.host-lede { margin: 0 0 18px; }

.tickets-note { max-width: 60ch; margin: 22px auto 0; text-align: center; font-size: 0.92rem; color: var(--ink-soft); }

.beyond-card { background: var(--navy); color: #fffefb; border-radius: var(--radius); padding: clamp(28px, 5vw, 52px); display: grid; gap: 28px; }
@media (min-width: 860px) { .beyond-card { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; } }
.beyond { border-top: 0; }
.beyond-card .stakes-kicker { color: var(--gold-bright); }
.beyond-card h2 { color: #fffefb; max-width: 18ch; }
.beyond-card h2 em { color: var(--gold-bright); }
.beyond-card .lede { color: var(--on-navy-soft); margin: 0 0 24px; }
.beyond-card .button { width: auto; background-color: #e5d5bf; color: var(--navy); }
.beyond-card .button:hover { background-color: #efe3d2; }
.beyond-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(229, 213, 191, 0.18); border-radius: var(--radius-sm); overflow: hidden; }
.beyond-list li { background: var(--navy); padding: 18px 4px 18px 0; }
.beyond-list li { padding-left: 0; }
.beyond-list h3 { color: #fffefb; font-size: 1.05rem; margin: 0 0 4px; }
.beyond-list p { margin: 0; color: var(--on-navy-soft); font-size: 0.95rem; }
#reponse .reply-intro h2 { max-width: 24ch; font-size: clamp(2rem, 4.4vw, 3.2rem); }

/* Mobile : page plus courte */
@media (max-width: 699px) {
  .stakes-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stakes-grid li { padding: 16px 14px 18px; }
  .stakes-grid h3 { font-size: 0.98rem; }
  .stakes-grid h3::before { margin-bottom: 10px; }
  .stakes-grid p { font-size: 0.88rem; line-height: 1.45; }
  .programme figure { display: none; }
  .programme li { padding: 22px 0; }
}

/* En-tête sobre : le nom seul, sans emblème */
.masthead .wordmark { font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }

/* Texte justifié sur la page de vente */
html[lang="fr"] main p, html[lang="fr"] main blockquote { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
main .proof, main .when, main .seats, main .price, main .price-note, main .ticket-foot, main .smallcaps, main .num, main .credit,
main .vip-line, main .logoband-label, main .quote--lead blockquote, main .stakes-grid p, main .includes span, main .hero p { text-align: left; }
main .reply-intro p, main .closing p, main .tickets-note, main .seats { text-align: center; }
html[lang="fr"] main .proof, html[lang="fr"] main .when, html[lang="fr"] main .smallcaps, html[lang="fr"] main .num, html[lang="fr"] main .credit,
html[lang="fr"] main .vip-line, html[lang="fr"] main .logoband-label, html[lang="fr"] main .quote--lead blockquote, html[lang="fr"] main .stakes-grid p,
html[lang="fr"] main .hero p, html[lang="fr"] main .price, html[lang="fr"] main .price-note, html[lang="fr"] main .ticket-foot,
html[lang="fr"] main .quotes blockquote, html[lang="fr"] main .flip-text, html[lang="fr"] main .change-list p, html[lang="fr"] main .media-item figcaption,
html[lang="fr"] main .press-meta, html[lang="fr"] main .cover-kicker, html[lang="fr"] main .photoband p, html[lang="fr"] main .stakes-kicker { text-align: left; }
html[lang="fr"] main .reply-intro p, html[lang="fr"] main .closing p, html[lang="fr"] main .tickets-note, html[lang="fr"] main .seats,
html[lang="fr"] main .refgrid p, html[lang="fr"] main .section-head.center p, html[lang="fr"] main .manifesto p { text-align: center; }

/* Date du héros : une seule ligne, entourée au feutre rouge */
.hero-meta .when {
  display: inline-flex; flex-wrap: nowrap; white-space: nowrap; position: relative; isolation: isolate;
  padding: 8px 16px; margin-bottom: 20px;
}
.hero-meta .when::after {
  content: ""; position: absolute; inset: -8px -12px -10px -10px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70' preserveAspectRatio='none' fill='none' stroke='%23e3262f' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M34 12 C110 2 236 4 282 18 C300 26 296 52 262 60 C190 70 70 68 22 54 C2 46 6 22 40 14 C80 6 150 4 196 8'/%3E%3Cpath d='M58 9 C120 5 200 6 240 11' stroke-width='2' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (max-width: 859px) {
  .hero-meta .when { font-size: clamp(1rem, 5vw, 1.3rem); gap: 0 0.4em; padding: 7px 12px; }
}

/* Formules plus compactes sur téléphone : le dîner VIP apparaît sous la session */
@media (max-width: 699px) {
  #reponse { scroll-margin-top: 8px; }
  .reply-intro { margin-bottom: 18px; }
  #reponse .reply-intro h2 { font-size: 1.7rem; }
  #reponse .reply-intro .lede { font-size: 0.95rem; }
  .tickets { gap: 12px; }
  .ticket { padding: 18px 18px 20px; border-radius: var(--radius-sm); }
  .ticket-head { padding-bottom: 8px; margin-bottom: 10px; }
  .ticket h3 { font-size: 1.35rem; margin: 0; }
  .price { margin: 6px 0 2px; }
  .price .amount { font-size: 2.6rem; }
  .price .currency { font-size: 1rem; }
  .price-note { margin-bottom: 8px; }
  .ticket p { font-size: 0.92rem; margin: 0 0 8px; }
  .ticket .vip-line { font-size: 1.05rem; margin: 2px 0 6px; }
  .includes { margin: 0 0 14px; }
  .includes li { padding: 3px 0; gap: 8px; font-size: 0.9rem; grid-template-columns: 16px 1fr; }
  .includes svg { width: 16px; height: 16px; }
  .ticket-foot { display: none; }
}
@media (max-width: 859px) { .hero-meta .when { font-size: clamp(0.95rem, 4.5vw, 1.25rem); padding: 7px 10px; } }
#billets { scroll-margin-top: 14px; }
@media (max-width: 699px) { .price-note { display: none; } }

/* Témoignages avec photo, et apparition discrète au défilement */
.quote figcaption.has-photo { display: flex; align-items: center; gap: 12px; }
.quote figcaption.has-photo strong { margin-bottom: 1px; }
.quote-photo { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold-line); }
.quotes--more { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--gold-line); }
.testimonials .quote.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 1s var(--ease-out); }
.testimonials .quote.reveal.is-shown { opacity: 1; transform: none; }

/* Témoignage discret au défilement */
.murmure {
  position: fixed; z-index: 9; left: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); width: min(330px, calc(100vw - 32px));
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255, 254, 251, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--gold-line), 0 18px 40px -24px rgba(14, 26, 56, 0.45);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out);
}
.murmure.is-visible { opacity: 1; transform: none; }
.murmure img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fffefb, 0 0 0 3px var(--gold); }
.murmure p { margin: 0; display: grid; gap: 4px; max-width: none; }
.murmure-texte { font-size: 0.86rem; line-height: 1.4; color: var(--navy); font-weight: 500; }
.murmure-nom { font-size: 0.74rem; color: var(--ink-soft); }
.murmure-nom strong { color: var(--navy); font-weight: 600; }
@media (min-width: 1180px) { .murmure { bottom: 24px; left: 24px; } }
@media (prefers-reduced-motion: reduce) { .murmure { transition: opacity 0.3s; transform: none; } }