/* FlashVideo Événements — « nuit chaude et or »
   Contrastes vérifiés (WCAG AA) :
   crème #FBF6EE sur nuit #1E1B24 ........ 15,9:1
   or #C8A15A sur nuit .................... 7,1:1
   texte nuit sur bouton or ............... 7,1:1
   or foncé #7D5F28 sur crème ............. 5,5:1
   gris chaud #B9B0A3 sur nuit ............ 8,0:1
   brun #5A5249 sur crème ................. 7,1:1 */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --nuit: #1E1B24;
  --nuit-2: #29252F;
  --nuit-3: #36313D;
  --creme: #FBF6EE;
  --creme-2: #F3EADB;
  --or: #C8A15A;
  --or-clair: #DDBE84;
  --or-fonce: #7D5F28;
  --gris-nuit: #B9B0A3;
  --brun: #5A5249;
  --ligne-nuit: rgba(200, 161, 90, .28);
  --ligne-creme: #E4D7C3;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 14px;
  --max: 1160px;
  --barre: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--creme);
  background: var(--nuit);
  padding-bottom: var(--barre);
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img, video, svg { display: block; max-width: 100%; }
a { color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--or-clair); }
.creme a:not(.btn) { color: var(--or-fonce); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h1 em, h2 em { font-style: italic; color: var(--or); font-weight: 500; }
.creme h2 em, .creme h1 em { color: var(--or-fonce); }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--or); color: var(--nuit); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; color: var(--nuit); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }

.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-wa { fill: currentColor; stroke: none; }

/* TODO visibles pour Rudolph : à retirer avant mise en ligne */
.todo {
  display: inline-block;
  background: #FFE36E; color: #1E1B24;
  font: 600 .8rem/1.4 var(--sans);
  padding: 2px 8px; border-radius: 4px;
  border: 1px dashed #1E1B24;
  letter-spacing: 0;
}
.todo::before { content: "TODO · "; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(30, 27, 36, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne-nuit);
}
.entete .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.logo { display: flex; flex-direction: column; justify-content: center; min-height: 48px; text-decoration: none; color: var(--creme); line-height: 1; }
.logo b { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; }
.logo b span { color: var(--or); }
.logo small { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gris-nuit); margin-top: 4px; }
.logo:hover { color: var(--creme); }

.nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 10px;
  background: transparent; color: var(--creme); border: 1px solid var(--ligne-nuit); cursor: pointer;
}
.nav { display: none; }
.nav.ouvert {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--nuit); border-bottom: 1px solid var(--ligne-nuit);
  padding: 8px 16px 20px;
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; min-height: 48px; color: var(--creme); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--nuit-3); }
.nav a[aria-current="page"] { color: var(--or); }
.nav .btn { margin-top: 14px; width: 100%; border: 0; }
.nav .btn-or, .nav .btn-or:hover { color: var(--nuit); }

@media (min-width: 900px) {
  .nav-btn { display: none; }
  .nav, .nav.ouvert { display: block; position: static; padding: 0; border: 0; background: none; }
  .nav ul { display: flex; align-items: center; gap: 28px; }
  .nav a { border: 0; min-height: 44px; font-size: .97rem; }
  .nav a:hover { color: var(--or); }
  .nav .btn { margin: 0; width: auto; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-or { background: var(--or); color: var(--nuit); }
.btn-or:hover { background: var(--or-clair); color: var(--nuit); }
.btn-ligne { border-color: var(--or); color: var(--creme); background: transparent; }
.btn-ligne:hover { background: rgba(200,161,90,.12); color: var(--creme); }
.creme .btn-ligne { color: var(--nuit); border-color: var(--or-fonce); }
.creme .btn-ligne:hover { background: var(--creme-2); color: var(--nuit); }
.btn-large { width: 100%; }
@media (min-width: 600px) { .btn-large { width: auto; } }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btns .btn { flex: 1 1 220px; }
@media (min-width: 600px) { .btns .btn { flex: 0 0 auto; } }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.creme { background: var(--creme); color: var(--nuit); }
.creme-2 { background: var(--creme-2); color: var(--nuit); }
.nuit-2 { background: var(--nuit-2); }
.surtitre {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or); margin-bottom: 14px;
}
.creme .surtitre, .creme-2 .surtitre { color: var(--or-fonce); }
.intro { max-width: 680px; margin-bottom: 40px; }
.intro.centre { margin-left: auto; margin-right: auto; text-align: center; }
.intro p { color: var(--gris-nuit); font-size: 1.08rem; }
.creme .intro p, .creme-2 .intro p { color: var(--brun); }
.filet { width: 64px; height: 2px; background: var(--or); border: 0; margin: 0 0 20px; }
.centre .filet { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(30,27,36,.35) 0%, rgba(30,27,36,.55) 45%, rgba(30,27,36,.96) 100%);
}
.hero .wrap { padding-top: 96px; padding-bottom: 56px; }
.hero h1 { max-width: 15ch; }
.hero-txt { max-width: 560px; font-size: 1.15rem; color: #E9E1D4; margin-bottom: 28px; }
.hero-note { margin-top: 18px; font-size: .92rem; color: var(--gris-nuit); display: flex; align-items: center; gap: 8px; }
.hero-note .ico { width: 20px; height: 20px; color: var(--or); }
.hero-court { min-height: 0; }
.hero-court .wrap { padding-top: 72px; padding-bottom: 48px; }

/* ---------- Grilles et cartes ---------- */
.grille { display: grid; gap: 20px; }
@media (min-width: 700px) { .grille-2 { grid-template-columns: repeat(2, 1fr); } .grille-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 999px) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }

.carte {
  background: var(--nuit-2); border: 1px solid var(--ligne-nuit); border-radius: var(--r);
  padding: 28px 24px;
}
.creme .carte, .creme-2 .carte { background: #fff; border-color: var(--ligne-creme); }
.carte .ico { width: 36px; height: 36px; color: var(--or); margin-bottom: 16px; }
.creme .carte .ico, .creme-2 .carte .ico { color: var(--or-fonce); }
.carte p { color: var(--gris-nuit); margin: 0; }
.creme .carte p, .creme-2 .carte p { color: var(--brun); }
.carte-lien { display: block; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.carte-lien:hover { border-color: var(--or); transform: translateY(-2px); color: inherit; }
.carte-lien .suite { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; color: var(--or); }
.creme .carte-lien .suite { color: var(--or-fonce); }

/* Emplacements photo / vidéo tant que les vrais fichiers ne sont pas fournis */
.ph {
  position: relative; border-radius: var(--r); overflow: hidden;
  background:
    radial-gradient(circle at 25% 30%, rgba(221,190,132,.35) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 20%, rgba(221,190,132,.25) 0 10px, transparent 11px),
    radial-gradient(circle at 80% 70%, rgba(221,190,132,.2) 0 14px, transparent 15px),
    radial-gradient(circle at 35% 75%, rgba(221,190,132,.18) 0 8px, transparent 9px),
    linear-gradient(140deg, #3a3240, #241f2a 60%, #1E1B24);
  aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end; padding: 14px;
}
.ph-portrait { aspect-ratio: 3 / 4; }
.ph-large { aspect-ratio: 16 / 9; }
.ph .todo { font-size: .75rem; }

/* ---------- Galerie ---------- */
.galerie { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, 1fr); } .galerie .grand { grid-column: span 2; grid-row: span 2; } }
.galerie .ph { aspect-ratio: 1; }
.galerie .grand.ph { aspect-ratio: auto; }

/* ---------- Prix ---------- */
.prix-grille { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .prix-grille { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.prix {
  position: relative; display: flex; flex-direction: column;
  background: var(--nuit-2); border: 1px solid var(--ligne-nuit); border-radius: var(--r);
  padding: 32px 24px 28px;
}
.creme .prix, .creme-2 .prix { background: #fff; border-color: var(--ligne-creme); }
.prix.vedette { border: 2px solid var(--or); box-shadow: 0 18px 50px -20px rgba(200,161,90,.55); }
.creme .prix.vedette { border-color: var(--or-fonce); }
.badge {
  position: absolute; top: -14px; left: 24px;
  background: var(--or); color: var(--nuit);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.prix h3 { margin-bottom: 4px; }
.prix .accroche { color: var(--gris-nuit); font-size: .97rem; margin-bottom: 18px; }
.creme .prix .accroche { color: var(--brun); }
.montant { margin: 0; font-family: var(--serif); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--or); }
.creme .montant { color: var(--or-fonce); }
.montant small { font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--gris-nuit); }
.creme .montant small { color: var(--brun); }
.fois { margin: 8px 0 0; font-size: .97rem; color: var(--creme); }
.creme .fois { color: var(--nuit); }
.barre { margin: 6px 0 0; font-size: .9rem; color: var(--gris-nuit); }
.barre s { text-decoration-thickness: 1.5px; }
.creme .barre { color: var(--brun); }
.prix ul { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.prix li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--nuit-3); font-size: .98rem; }
.creme .prix li { border-color: var(--ligne-creme); }
.prix li .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--or); }
.creme .prix li .ico { color: var(--or-fonce); }
.prix .btn { width: 100%; }
.prix-note { margin-top: 24px; font-size: .92rem; color: var(--gris-nuit); }
.creme .prix-note { color: var(--brun); }

/* ---------- Listes, étapes ---------- */
.liste-coche { list-style: none; padding: 0; margin: 0 0 1em; }
.liste-coche li { display: flex; gap: 12px; padding: 6px 0; }
.liste-coche .ico { width: 22px; height: 22px; color: var(--or); margin-top: 3px; }
.creme .liste-coche .ico, .creme-2 .liste-coche .ico { color: var(--or-fonce); }

.etapes { counter-reset: e; list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etapes li { counter-increment: e; position: relative; padding-top: 56px; }
.etapes li::before {
  content: counter(e); position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--or);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.2rem; color: var(--or);
}
.creme .etapes li::before { border-color: var(--or-fonce); color: var(--or-fonce); }
.etapes h3 { font-size: 1.15rem; margin-bottom: 6px; }
.etapes p { color: var(--gris-nuit); margin: 0; font-size: .98rem; }
.creme .etapes p { color: var(--brun); }

.duo { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 64px; } .duo.inverse > :first-child { order: 2; } }

.encadre {
  border-left: 3px solid var(--or); background: rgba(200,161,90,.08);
  padding: 18px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 24px 0;
}
.creme .encadre, .creme-2 .encadre { border-color: var(--or-fonce); background: var(--creme-2); }
.encadre p:last-child { margin: 0; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tableau th, .tableau td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--nuit-3); vertical-align: top; }
.creme .tableau th, .creme .tableau td { border-color: var(--ligne-creme); }
.tableau th { font-weight: 600; }
.tableau td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--ligne-nuit); }
.creme .faq details { border-color: var(--ligne-creme); }
.faq summary {
  cursor: pointer; list-style: none; min-height: 56px; padding: 16px 40px 16px 0; position: relative;
  font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 1.5rem; color: var(--or); font-weight: 400; }
.creme .faq summary::after { color: var(--or-fonce); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--gris-nuit); padding-bottom: 8px; }
.creme .faq details p { color: var(--brun); }

/* Avis */
.avis-vide { text-align: center; padding: 40px 24px; border: 1px dashed var(--ligne-nuit); border-radius: var(--r); }
.creme .avis-vide { border-color: var(--ligne-creme); }

/* Bandeau appel final */
.appel { text-align: center; }
.appel h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.appel p { color: var(--gris-nuit); max-width: 560px; margin: 0 auto 28px; }
.appel .btns { justify-content: center; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 18px; }
@media (min-width: 700px) { .form .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .legende { font-weight: 600; font-size: .95rem; }
.champ .aide { font-size: .85rem; color: var(--brun); }
input, select, textarea {
  font: inherit; color: var(--nuit); background: #fff;
  border: 1.5px solid #CBBBA2; border-radius: 10px;
  min-height: 50px; padding: 10px 14px; width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--or-fonce); outline: 3px solid rgba(200,161,90,.35); outline-offset: 0; }
fieldset { border: 1.5px solid var(--ligne-creme); border-radius: var(--r); padding: 16px; margin: 0; }
legend { padding: 0 6px; }
.coches { display: grid; gap: 4px; }
@media (min-width: 700px) { .coches { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.coche { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.coche input { width: 22px; height: 22px; min-height: 0; accent-color: var(--or-fonce); flex: none; }
.coche span { flex: 1; }
.coche b { white-space: nowrap; color: var(--or-fonce); font-weight: 600; }
.estimation {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: var(--nuit); color: var(--creme); border-radius: var(--r); padding: 18px 20px;
}
.estimation strong { font-family: var(--serif); font-size: 1.8rem; color: var(--or); }
.estimation small { flex-basis: 100%; color: var(--gris-nuit); font-size: .85rem; }
.form-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .form-actions { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.rgpd { font-size: .85rem; color: var(--brun); }

/* Disponibilité */
.dispo-res { margin-top: 12px; padding: 14px 16px; border-radius: 10px; font-weight: 500; display: none; }
.dispo-res.ok { display: block; background: #E7F1E4; color: #24451C; }
.dispo-res.ko { display: block; background: #F6E1DC; color: #6B1E12; }
.dispo-res.info { display: block; background: var(--creme-2); color: var(--nuit); }
.dates-completes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.dates-completes li { background: var(--nuit); color: var(--creme); font-size: .88rem; padding: 6px 12px; border-radius: 999px; }
.dates-completes li s { text-decoration-color: var(--or); }

/* Contacts directs */
.contacts { display: grid; gap: 12px; }
.contact-ligne {
  display: flex; align-items: center; gap: 14px; min-height: 64px;
  padding: 12px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne-creme);
  color: var(--nuit) !important; text-decoration: none;
}
.contact-ligne .ico { width: 28px; height: 28px; color: var(--or-fonce); }
.contact-ligne small { display: block; color: var(--brun); font-size: .85rem; }
.contact-ligne:hover { border-color: var(--or-fonce); }

/* ---------- Pied de page ---------- */
.pied { background: #16141B; border-top: 1px solid var(--ligne-nuit); padding: 56px 0 28px; font-size: .95rem; }
.pied-grille { display: grid; gap: 36px; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1.3fr 1fr 1.4fr; } }
.pied h2 { font-size: 1.15rem; margin-bottom: 14px; }
.pied p, .pied li { color: var(--gris-nuit); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme); text-decoration: none; }
.pied li a:hover { color: var(--or); }
.famille li { margin-bottom: 4px; }
.famille a { flex-direction: column; align-items: flex-start !important; justify-content: center; padding: 6px 0; }
.famille a span { color: var(--gris-nuit); font-size: .85rem; }
.pied-bas { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--nuit-3); display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--gris-nuit); font-size: .85rem; }
.pied-bas a { color: var(--gris-nuit); min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Barre WhatsApp mobile ---------- */
.barre-wa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(22, 20, 27, .97); border-top: 1px solid var(--ligne-nuit);
}
.barre-wa .btn { min-height: 52px; padding: 10px 14px; }
.barre-wa .btn-or { flex: 1; }
.barre-wa .btn-ligne { width: 56px; padding: 0; flex: none; }
@media (min-width: 900px) { .barre-wa { display: none; } }

/* ---------- Pages texte (mentions, CGV) ---------- */
.texte { max-width: 780px; }
.texte h2 { font-size: 1.5rem; margin-top: 2em; }
.texte h3 { font-size: 1.15rem; margin-top: 1.6em; }
.texte p, .texte li { color: var(--brun); }
.texte strong { color: var(--nuit); }
.texte blockquote { margin: 1em 0; padding: 14px 18px; background: var(--creme-2); border-left: 3px solid var(--or-fonce); color: var(--nuit); }