/* ============================================================
   Page « Mariage » — tenue de soirée
   Le blanc de la robe, le noir du costume, l'or des alliances ;
   le rouge des roses seulement en touche (fleurs, pétales, cire).
   Même contenu que les autres prestations : seule la forme change.
   ============================================================ */
:root { --m-ivoire: #FBF8F3; --m-champagne: #F5EDE1; --m-rouge: #8E1B2C; --m-rouge-fonce: #6A1220;
  --m-noir: #231F1C; --m-noir-2: #3A332E; --m-or: #B08D57; --m-or-fonce: #86662F; --m-or-clair: #E2C48E; --m-cire: #8E1B2C; }

body.page-mariage {
  --brand: var(--m-or-fonce); --brand-dark: #6F5426; --brand-deep: #6F5426; --field-bg: #F2ECE2;
  --fond-teinte: #F8F2E9;
  --brand-tint: var(--m-champagne); --cream: var(--m-ivoire);
  --line: #EDE2D2; --line-strong: #E0CFB6;
  --shadow-img: 0 30px 70px -30px rgba(74,14,24,.35);
}
/* le noir reste au texte ; les boutons prennent l'or des alliances */
body.page-mariage .btn { --btn-bg: var(--m-or-fonce); --btn-bd: var(--m-or-fonce); }
body.page-mariage .btn:hover { --btn-bg: #6F5426; --btn-bd: #6F5426; }
body.page-mariage .btn-ghost { --btn-bg: transparent; border-color: var(--m-or); color: var(--ink); }
body.page-mariage .btn-ghost:hover { background: var(--m-or); border-color: var(--m-or); color: #fff; }
body.page-mariage .hero-wed .eyebrow { color: var(--m-or-clair); }
body.page-mariage .hero-wed .eyebrow::before { background: var(--m-or-clair); }
body.page-mariage .hero-wed p a { color: #fff; text-decoration-color: var(--m-or-clair); }
body.page-mariage .eyebrow { color: var(--m-or-fonce); }
body.page-mariage .eyebrow::before, body.page-mariage .eyebrow::after { background: var(--m-or); }
body.page-mariage .sec-title em { color: var(--m-or-fonce); }

/* ---------- Fonds : beaucoup de blanc, un peu de crème ---------- */
body.page-clair.page-mariage main > section.section { padding-top: var(--section-y) !important; }
/* le blanc et la crème alternent (règle commune, _build/rythme.py) */
body.page-mariage .trust-strip svg { color: var(--m-or); }

/* ---------- Alliances au-dessus des titres, colombe par endroits ---------- */
body.page-mariage .sec-head::before,
body.page-mariage .story-body::before { content: ""; display: block; width: 74px; height: 36px;
  margin: 0 auto var(--space-4); background: url("../img/mariage/alliances.webp") center / contain no-repeat; }
body.page-mariage #histoire .story-body::before,
body.page-mariage #faq .sec-head::before { width: 58px; height: 61px; background-image: url("../img/mariage/colombe-blanche.webp");
  filter: drop-shadow(0 6px 8px rgba(43,39,36,.14)); }
body.page-mariage .story-body::before { margin-left: 0; }
body.page-mariage .sec-head.galerie-suite::before { content: none; }

/* ---------- La formule, comme un carton d'invitation ---------- */
body.page-mariage .formule-body { position: relative; background: var(--carte, #fff); text-align: center;
  padding: clamp(2.6rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: 2px; box-shadow: 0 30px 60px -36px rgba(74,14,24,.4); }
body.page-mariage .formule-body::before { content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(176,141,87,.6); outline: 1px solid rgba(176,141,87,.25); outline-offset: 4px;
  pointer-events: none; }
body.page-mariage .formule-body::after { content: ""; position: absolute; top: -34px; left: -30px;
  width: clamp(150px, 22vw, 230px); aspect-ratio: 804 / 692; pointer-events: none;
  background: url("../img/mariage/roses-560.webp") left top / contain no-repeat; }
@media (max-width: 700px) { body.page-mariage .formule-body::after { background-image: url("../img/mariage/roses-280.webp"); width: 130px; top: -24px; left: -14px; } }
body.page-mariage .formule-body .m-colombe { display: block; width: 58px; height: 61px; margin: 0 auto .4rem;
  background: url("../img/mariage/colombe-blanche.webp") center / contain no-repeat; filter: drop-shadow(0 6px 8px rgba(43,39,36,.14)); }
body.page-mariage .formule-body .eyebrow { justify-content: center; }
body.page-mariage .formule-body .sec-title { font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
body.page-mariage .formule-body .big-price b { font-style: italic; color: var(--m-or-fonce); }
body.page-mariage .formule-body .pet-note { justify-content: center; text-align: left; background: var(--m-ivoire); }
.m-urgence { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: var(--m-or-fonce); }
/* ---------- Suppléments : de petits cartons, comme le faire-part ---------- */
body.page-mariage .supp-card { position: relative; background: var(--carte, #fff); border: 0; border-radius: 3px;
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 1px 2px rgba(35,31,28,.06), 0 26px 46px -32px rgba(35,31,28,.5); }
body.page-mariage .supp-card::before { content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(176,141,87,.38); border-radius: 2px; }
body.page-mariage .supp-card:hover { transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(35,31,28,.06), 0 34px 54px -32px rgba(35,31,28,.55); }
body.page-mariage .supp-card h3 { font-size: 1.55rem; }
body.page-mariage .supp-card .price { color: var(--m-or-fonce); font-style: italic; font-size: 1.9rem; }
body.page-mariage .supp-card p { padding-top: .8rem; margin-top: .7rem; border-top: 1px solid var(--line); }

/* ---------- FAQ : des cartons plutôt qu'une liste ---------- */
body.page-mariage #faq .faq-wrap { display: grid; gap: .85rem; }
body.page-mariage #faq .faq-item { background: var(--carte, #fff); border: 1px solid rgba(176,141,87,.35) !important;
  border-radius: 6px; padding: 0 1.3rem; box-shadow: 0 14px 30px -26px rgba(74,14,24,.45);
  transition: box-shadow var(--t-fast), border-color var(--t-fast); }
body.page-mariage #faq .faq-item.open { border-color: var(--m-or) !important;
  box-shadow: 0 22px 40px -28px rgba(74,14,24,.5); }
body.page-mariage #faq .faq-q { font-family: var(--font-display); font-size: 1.22rem; color: var(--ink); }
body.page-mariage #faq .faq-item.open .faq-q, body.page-mariage #faq .faq-q:hover { color: var(--m-or-fonce); }
body.page-mariage #faq .faq-q .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--m-champagne); }
body.page-mariage #faq .faq-q .ic::before { top: 14px; left: 8px; width: 14px; background: var(--m-noir); }
body.page-mariage #faq .faq-q .ic::after { left: 14px; top: 8px; height: 14px; background: var(--m-noir); }

/* ---------- Pétales rouges et blancs, en haut de page seulement ---------- */
.m-petales { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.m-petale { position: absolute; top: -8%; width: 14px; height: 17px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 24%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23C2364A%22/%3E%3Cstop offset=%221%22 stop-color=%22%237A1426%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M10 1C16 5 19 11 17 17c-2 5-12 7-14 1C1 12 4 5 10 1z%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E") center / contain no-repeat;
  animation: m-chute var(--d, 12s) linear var(--t, 0s) infinite; }
.m-petale.blanc { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 24%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23EADCCF%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M10 1C16 5 19 11 17 17c-2 5-12 7-14 1C1 12 4 5 10 1z%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"); }
.m-petales.en-pause .m-petale { animation-play-state: paused; }
@keyframes m-chute {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  50%  { transform: translate3d(var(--x, 40px), 55vh, 0) rotate(160deg); }
  92%  { opacity: .85; }
  100% { transform: translate3d(calc(var(--x, 40px) * -.4), 112vh, 0) rotate(320deg); opacity: 0; }
}

/* ---------- L'enveloppe : la galerie en jaillit ---------- */
.m-enveloppe { display: none; }
.js-enveloppe .m-enveloppe { display: block; position: relative; width: min(520px, 88vw);
  aspect-ratio: 1.55; margin: calc(min(520px, 88vw) * .42 + 1rem) auto 0; perspective: 1400px; z-index: 3; }
.js-enveloppe #galerie.fermee .gallery-grid,
.js-enveloppe #galerie.fermee .gal-plus { display: none; }
.js-enveloppe #galerie.fermee .galerie-suite { margin-top: 4rem !important; }
#galerie .container { position: relative; }
.m-env-dos, .m-env-poche, .m-env-rabat { position: absolute; inset: 0; border-radius: 4px;
  background-color: #FBF7F0;
  background-image: repeating-linear-gradient(45deg, rgba(176,141,87,.05) 0 2px, transparent 2px 6px); }
/* l'intérieur : une doublure rose poudré semée d'or, qu'on ne voit qu'une fois ouverte */
.m-env-dos { box-shadow: 0 34px 60px -30px rgba(74,14,24,.3);
  background: radial-gradient(circle at 1px 1px, rgba(176,141,87,.7) 1px, transparent 1.6px) 0 0 / 12px 12px,
              linear-gradient(180deg, #F2D6D3, #E9C3BF 60%); }
.m-env-poche { z-index: 2; background-color: #F7F0E5;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.m-env-poche::before { content: ""; position: absolute; right: -2px; bottom: -2px; width: 34%; aspect-ratio: 804 / 692;
  background: url("../img/mariage/roses-280.webp") left top / contain no-repeat; transform: rotate(180deg); }
.m-env-poche::before { pointer-events: none; }
.m-env-rabat { z-index: 3; background-color: #F3EBDD; transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 50% 60%); transition: transform .55s cubic-bezier(.45,0,.25,1); }
/* passé la verticale, on voit le revers du rabat : la doublure */
.m-env-rabat.revers { background: radial-gradient(circle at 1px 1px, rgba(176,141,87,.7) 1px, transparent 1.6px) 0 0 / 12px 12px,
  linear-gradient(0deg, #F2D6D3, #E9C3BF); }
.m-sceau { position: absolute; z-index: 4; left: 50%; top: 60%; width: 74px; height: 74px;
  transform: translate(-50%, -50%); border: 0; padding: 0; cursor: pointer; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 38% 34%, #C2364A 0 16%, var(--m-cire) 45%, #5A0F1B 100%);
  box-shadow: 0 6px 14px -4px rgba(60,10,18,.55), inset 0 0 0 5px rgba(255,255,255,.07), inset 0 0 0 7px rgba(60,10,18,.25);
  color: var(--m-or-clair); font-family: var(--font-display); font-style: italic; font-size: 2rem; line-height: 74px;
  transition: transform .4s var(--ease); animation: m-battement 2.4s ease-in-out infinite; }
.m-sceau:hover, .m-sceau:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.m-sceau:focus-visible { outline: 2px solid var(--m-or); outline-offset: 4px; }
@keyframes m-battement { 0%, 100% { box-shadow: 0 6px 14px -4px rgba(60,10,18,.55), 0 0 0 0 rgba(142,27,44,.35); }
  50% { box-shadow: 0 6px 14px -4px rgba(60,10,18,.55), 0 0 0 12px rgba(142,27,44,0); } }
/* les deux moitiés du cachet brisé */
.m-sceau-moitie { position: absolute; z-index: 6; pointer-events: none; animation: none; }
.m-env-aide { position: absolute; left: 0; right: 0; bottom: -2.6rem; text-align: center; margin: 0;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); transition: opacity .3s; }
.m-enveloppe.ouverte .m-sceau:not(.m-sceau-moitie) { visibility: hidden; animation: none; }
.m-enveloppe.ouverte .m-env-rabat { transform: rotateX(180deg); z-index: 0; }
.m-enveloppe.ouverte .m-env-aide { opacity: 0; }
/* pendant l'envol, l'enveloppe quitte le flux : les photos prennent sa place */
.m-enveloppe.envol { position: absolute; margin: 0; z-index: 1; }
body.page-mariage #galerie .g-cell { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .m-petales { display: none; }
  .m-sceau { animation: none; }
  .m-env-rabat { transition: none; }
}

/* ---------- Décors : bouquets de roses dans les coins, pétales posés ----------
   Un bouquet par section, jamais deux fois le même coin de suite. */
body.page-mariage main > section#galerie,
body.page-mariage main > section#avis,
body.page-mariage main > section.sec-creme,
body.page-mariage main > section.process,
body.page-mariage main > section#faq,
body.page-mariage main > section.contact { position: relative; overflow: hidden; }
body.page-mariage main > section#galerie > .container,
body.page-mariage main > section#avis > .container,
body.page-mariage main > section.sec-creme > .container,
body.page-mariage main > section.process > .container,
body.page-mariage main > section#faq > .container,
body.page-mariage main > section.contact > .container { position: relative; z-index: 1; }
body.page-mariage #galerie::after, body.page-mariage #avis::after, body.page-mariage .sec-creme::after,
body.page-mariage .process::after, body.page-mariage #faq::before, body.page-mariage .contact::after {
  content: ""; position: absolute; width: clamp(120px, 17vw, 240px); aspect-ratio: 804 / 692; pointer-events: none;
  background: url("../img/mariage/roses-280.webp") left top / contain no-repeat; }
body.page-mariage #galerie::after { top: -12px; right: -12px; transform: scaleX(-1); }
body.page-mariage #avis::after { bottom: -14px; left: -12px; transform: scaleY(-1); }
body.page-mariage .sec-creme::after { top: -12px; left: -12px; }
body.page-mariage .process::after { bottom: -14px; right: -12px; transform: scale(-1, -1); }
body.page-mariage #faq::before { bottom: -14px; left: -10px; transform: scaleY(-1); }
body.page-mariage .contact::after { top: -12px; right: -12px; transform: scaleX(-1); }
/* pétales rouges et blancs qui flottent autour des avis (posés par mariage.js) */
.m-flottants { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.m-petale.m-flottant { top: auto; opacity: .95; filter: drop-shadow(0 3px 4px rgba(43,39,36,.12));
  animation: m-flotte var(--d, 9s) ease-in-out var(--t, 0s) infinite alternate; }
.m-flottants.en-pause .m-flottant { animation-play-state: paused; }
@keyframes m-flotte {
  0%   { transform: translate(0, 0) rotate(var(--r0, 0deg)); }
  50%  { transform: translate(var(--dx, 14px), var(--dy, -18px)) rotate(var(--r1, 40deg)); }
  100% { transform: translate(calc(var(--dx, 14px) * -.6), calc(var(--dy, -18px) * .5)) rotate(var(--r0, 0deg)); }
}
@media (prefers-reduced-motion: reduce) { .m-petale.m-flottant { animation: none; } }
@media (max-width: 700px) {
  body.page-mariage #galerie::after, body.page-mariage #avis::after, body.page-mariage .sec-creme::after,
  body.page-mariage .process::after, body.page-mariage #faq::before, body.page-mariage .contact::after { width: 110px; }
}

/* ---------- Conseils « Avant le grand jour » : or et crème, pas de vert ---------- */
body.page-mariage .prep-card { border-radius: 3px; border: 1px solid rgba(176,141,87,.35); box-shadow: none; }
body.page-mariage .prep-card:hover { box-shadow: 0 22px 44px -32px rgba(111,84,38,.45); }
body.page-mariage .prep-ic { background: var(--m-champagne); color: var(--brand-dark); }
body.page-mariage .pc-mk.ok { color: var(--m-or-fonce); }
body.page-mariage .prep-note { border-top-color: rgba(176,141,87,.4); }