/* =====================================================================
   STYLE DU SITE D'INVITATION — Moussa & Fanta
   Thème terracotta · crème · ivoire · brun profond · or
   Polices incluses : Playfair Display (titres, prénoms) et
   Montserrat (textes). Vous n'avez normalement pas besoin de
   modifier ce fichier.
   ===================================================================== */

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

:root {
  --ivoire: #FBF7F0;
  --creme: #F5EDE0;
  --sable: #E9D9C4;
  --beige-chaud: #D8BE9C;
  --terracotta: #A9502F;
  --terracotta-clair: #BF6948;
  --terracotta-fonce: #8E4127;
  --velours: #7E3320;
  --brun: #3B2418;
  --encre: #3F271B;          /* texte courant */
  --encre-douce: #5A3B2C;    /* texte secondaire */
  --or-clair: #E6C893;
  --or: #C29A62;
  --or-fonce: #8F6A3A;
  --filet: rgba(59, 36, 24, 0.16);

  --police-titres: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-texte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --courbe-douce: cubic-bezier(0.65, 0, 0.35, 1);
  --duree: 1.1s;
  --marge: clamp(1.25rem, 5vw, 2.5rem);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; font-variant-numeric: lining-nums; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }

:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--brun); color: var(--creme);
  padding: .6rem 1rem; border-radius: 4px; text-decoration: none;
}
.lien-evitement:focus { top: 1rem; }
.sans-js { padding: 2rem var(--marge); text-align: center; font-style: italic; }

.a-renseigner {
  font-style: italic;
  text-decoration: underline dotted currentColor;
  text-underline-offset: .25em;
  opacity: .8;
}

/* ---------- Typographie ---------- */
.formule {
  font-family: var(--police-texte);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.formule--clair { color: var(--or-clair); margin-bottom: 1rem; }

.intertitre {
  font-family: var(--police-texte);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .8rem;
}
.intertitre--clair { color: var(--or-clair); }

.titre {
  font-family: var(--police-titres);
  font-weight: 500;
  font-size: clamp(2.05rem, 8.6vw, 3.3rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--brun);
}
.titre--clair { color: var(--ivoire); }
.titre--moyen { font-size: clamp(1.85rem, 7.6vw, 2.8rem); }

/* Ornement : deux filets qui s'étirent de part et d'autre d'un losange */
.ornement {
  display: block;
  width: 104px; height: 14px;
  margin: 1.3rem auto 1.7rem;
  position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .9L9.1 5 5 9.1.9 5z' fill='none' stroke='%23A9502F' stroke-width='.9'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.ornement::before, .ornement::after {
  content: ""; position: absolute; top: 50%;
  width: 40px; height: 1px; background: var(--terracotta);
  transition: transform 1.4s var(--courbe) .3s;
}
.ornement::before { left: 0; transform-origin: right; }
.ornement::after { right: 0; transform-origin: left; }
.ornement--clair {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .9L9.1 5 5 9.1.9 5z' fill='none' stroke='%23E6C893' stroke-width='.9'/%3E%3C/svg%3E");
}
.ornement--clair::before, .ornement--clair::after { background: var(--or-clair); }

/* ---------- Boutons ---------- */
.bouton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 54px;
  padding: .9rem 2rem;
  border-radius: 999px;
  font-family: var(--police-texte);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .5s var(--courbe), color .5s var(--courbe), border-color .5s var(--courbe), transform .35s var(--courbe), box-shadow .5s var(--courbe);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bouton::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 1s var(--courbe);
}
@media (hover: hover) {
  .bouton:hover::after { transform: translateX(120%); }
  .bouton--plein:hover { background: var(--terracotta-fonce); box-shadow: 0 10px 26px rgba(142, 65, 39, .28); }
  .bouton--clair:hover { background: var(--ivoire); color: var(--brun); }
  .bouton--contour:hover { background: var(--terracotta); color: var(--ivoire); border-color: var(--terracotta); }
}
.bouton:active { transform: scale(.97); }
.bouton--plein { background: var(--terracotta); color: var(--ivoire); box-shadow: 0 6px 18px rgba(142, 65, 39, .2); }
.bouton--clair { background: transparent; color: var(--ivoire); border-color: rgba(251, 247, 240, .65); }
.bouton--contour { background: transparent; color: var(--terracotta-fonce); border-color: var(--terracotta); min-width: 9.5rem; }
.bouton--contour svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; flex: none; }
.bouton--grand { min-height: 60px; padding: 1rem 2.6rem; font-size: .84rem; }
.bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.lien-fin {
  font-family: var(--police-texte);
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta-fonce);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .2rem;
  transition: color .4s var(--courbe), letter-spacing .6s var(--courbe);
}
@media (hover: hover) { .lien-fin:hover { color: var(--terracotta); letter-spacing: .18em; } }

/* =====================================================================
   L'ENVELOPPE FERMÉE (plein écran, dentelle)
   Les variables --pointe, --angle, --longueur, --galon, --sceau sont
   calculées par script.js selon la taille de l'écran.
   ===================================================================== */
.ouverture { display: none; }

.js .ouverture {
  display: block;
  position: fixed; inset: 0; z-index: 100;
  overflow: hidden;
  background: #5E2615;
  transition: opacity 1.1s var(--courbe-douce), visibility 0s linear 1.1s;
}
.js .ouverture.etape-3 { opacity: 0; visibility: hidden; }

.ouverture__tissu {
  position: absolute; inset: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, rgba(24, 6, 1, .62) 100%),
    linear-gradient(rgba(40, 10, 4, .16), rgba(40, 10, 4, .16)),
    url("decor/dentelle-terracotta.webp") 0 0 / 512px 512px repeat,
    #5E2615;
  transition: transform 1.3s var(--courbe-douce);
}
.ouverture.etape-3 .ouverture__tissu { transform: scale(1.1); }

.rabat {
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--pointe, 54vh);
  z-index: 2;
  transform-origin: 50% 0;
  transform: perspective(1400px) rotateX(0deg);
  filter: drop-shadow(0 10px 12px rgba(20, 4, 0, .62));
  transition: transform 1.3s cubic-bezier(.55, .05, .3, 1);
  will-change: transform;
}
.rabat__tissu {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    radial-gradient(ellipse 58% 42% at 50% 32%, rgba(44, 12, 4, .5), transparent 72%),
    linear-gradient(180deg, rgba(255, 212, 186, .10), rgba(60, 16, 6, .16)),
    url("decor/dentelle-terracotta.webp") 37% 12% / 512px 512px repeat,
    #6A2A18;
}
.rabat__galon {
  position: absolute; top: 0;
  height: var(--galon, 52px);
  width: var(--longueur, 70vh);
  background: url("decor/galon-terracotta.webp") 0 0 / auto 100% repeat-x;
}
.rabat__galon--g { left: 0; transform-origin: 0 0; transform: rotate(var(--angle, 55deg)) translateY(calc(var(--galon, 52px) * -0.56)); }
.rabat__galon--d { right: 0; transform-origin: 100% 0; transform: rotate(calc(var(--angle, 55deg) * -1)) translateY(calc(var(--galon, 52px) * -0.56)); }

.ouverture__textes {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 7vh);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  transition: opacity .7s var(--courbe), transform .9s var(--courbe);
}
.ouverture__formule {
  font-family: var(--police-texte);
  font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(251, 240, 226, .85);
  margin-bottom: 1.6vh;
  text-shadow: 0 1px 6px rgba(30, 8, 2, .6);
}
.ouverture__noms {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--police-titres);
  font-weight: 500;
  font-size: clamp(2.6rem, 12.5vw, 5.4rem);
  line-height: 1.02;
  color: #FBF1E4;
  text-shadow: 0 2px 16px rgba(36, 9, 2, .6), 0 1px 2px rgba(36, 9, 2, .45);
}
.ouverture__et {
  font-style: italic; font-weight: 400;
  font-size: .56em;
  color: var(--or-clair);
  margin: .04em 0 .02em;
}
@media (max-height: 520px) and (orientation: landscape) {
  .ouverture__noms { flex-direction: row; gap: .35em; font-size: clamp(2rem, 7vw, 3.2rem); }
  .ouverture__textes { top: 4vh; }
}

.sceau {
  position: absolute; left: 50%; top: var(--pointe, 54vh);
  width: var(--sceau, 30vw);
  aspect-ratio: 300 / 340;
  z-index: 4;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 9px rgba(24, 6, 0, .55));
  pointer-events: none;
}
.sceau__moitie {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 1s cubic-bezier(.3, .7, .2, 1), opacity .8s var(--courbe);
  animation: pulsation 3.2s var(--courbe-douce) infinite;
}
.sceau__moitie--g { clip-path: polygon(0 0, 53.4% 0, 48.4% 18%, 55.4% 36%, 47.4% 55%, 54.4% 73%, 49.4% 100%, 0 100%); }
.sceau__moitie--d { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 53% 73%, 46% 55%, 54% 36%, 47% 18%); }
@keyframes pulsation {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.ouverture__bouton {
  position: absolute; left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6vh);
  z-index: 5;
  transform: translateX(-50%);
  background: none; border: 0; cursor: pointer;
  padding: 1rem 1.6rem;
  color: #FBF1E4;
  font-family: var(--police-titres);
  font-size: 1rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(30, 8, 2, .7);
  animation: respirer 2.6s var(--courbe-douce) infinite;
  transition: opacity .5s var(--courbe);
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 360px) {
  .ouverture__bouton { font-size: .82rem; letter-spacing: .22em; padding: .9rem 1rem; }
}
.ouverture__bouton:focus-visible { outline: 1px solid rgba(251, 241, 228, .55); outline-offset: 2px; border-radius: 999px; }
.ouverture__souris { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ouverture__tactile { display: none; }
  .ouverture__souris { display: inline; }
}
@keyframes respirer {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* Étapes de l'ouverture (classes ajoutées par script.js) */
.ouverture.etape-1 .sceau__moitie { animation: none; }
.ouverture.etape-1 .sceau__moitie--g { transform: translate(-18%, 8%) rotate(-16deg); opacity: 0; }
.ouverture.etape-1 .sceau__moitie--d { transform: translate(18%, 8%) rotate(16deg); opacity: 0; }
.ouverture.etape-1 .ouverture__bouton { opacity: 0; animation: none; pointer-events: none; }
.ouverture.etape-1 .ouverture__textes { opacity: 0; transform: translateY(-14px); }
.ouverture.etape-2 .rabat { transform: perspective(1400px) rotateX(178deg); }

/* =====================================================================
   SITE
   ===================================================================== */
.site:focus { outline: none; }
body.verrouille { overflow: hidden; }
html:not(.js) body.verrouille { overflow: visible; }

.conteneur { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--marge); text-align: center; }
.conteneur--etroit { max-width: 680px; }

.section { padding: clamp(4.5rem, 14vw, 8rem) 0; position: relative; }
.section--creme { background: var(--creme); }
.section--ivoire { background: var(--ivoire); }
.section--sable { background: var(--sable); }
.section--brun { background: var(--brun); color: var(--ivoire); }
.section--terracotta { background: var(--grain), var(--terracotta); color: var(--ivoire); }

.section__intro { max-width: 34rem; margin: 0 auto 2.6rem; color: var(--encre-douce); font-size: 1.02rem; }
.section--brun .section__intro { color: var(--sable); }
.section--terracotta .section__intro { color: var(--ivoire); }

/* Transitions festonnées entre deux sections */
.feston {
  height: 16px;
  margin-top: -1px;
  position: relative; z-index: 1;
  background:
    radial-gradient(circle at 12px 0, var(--haut) 11px, transparent 11.6px) 0 0 / 24px 16px repeat-x,
    var(--bas);
}
.feston--creme-sur-ivoire { --haut: var(--creme); --bas: var(--ivoire); }
.feston--brun-sur-ivoire { --haut: var(--brun); --bas: var(--ivoire); }
.feston--creme-sur-brun { --haut: var(--creme); --bas: var(--brun); }
.feston--terracotta-sur-ivoire { --haut: var(--terracotta); --bas: var(--ivoire); }
.feston--ivoire-sur-brun { --haut: var(--ivoire); --bas: var(--brun); }

/* =====================================================================
   0. L'ENVELOPPE OUVERTE (première section, fond de dentelle ivoire)
   Tout est positionné en % pour garder les proportions sur tous les écrans.
   ===================================================================== */
.ouverte {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vh, 2rem);
  padding: max(3.5rem, 7vh) 0 max(2rem, 4vh);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(251, 247, 240, .55), transparent 70%),
    url("decor/dentelle-ivoire.webp") 0 0 / 480px 480px repeat,
    #E2D6C3;
}
.ouverte__scene { width: 100%; display: flex; justify-content: center; padding: 0 3vw; }
.ouverte__enveloppe {
  position: relative;
  width: min(94vw, 560px, 74vh);
  aspect-ratio: 100 / 118;
  container-type: inline-size;
}

.ouverte__dos {
  position: absolute; left: 0; top: 40%; width: 100%; height: 60%;
  z-index: 1;
  border-radius: 2.2% / 3%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 190, 150, .14), transparent 70%),
    var(--grain),
    linear-gradient(180deg, #6A2A18, #5A2214);
  box-shadow: 0 30px 50px -18px rgba(50, 20, 8, .55);
}
.ouverte__rabat {
  position: absolute; left: 0; top: 7%; width: 100%; height: 33.4%;
  z-index: 0;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background:
    linear-gradient(180deg, rgba(255, 196, 160, .14), transparent 60%),
    var(--grain),
    linear-gradient(180deg, #8A3A22, #6E2B18);
}

.ouverte__bouquet { position: absolute; left: 10%; top: -7%; width: 80%; z-index: 4; }
.ouverte__bouquet img { width: 100%; filter: drop-shadow(0 8px 10px rgba(50, 20, 8, .25)); }

.polaroid {
  position: absolute; z-index: 3;
  margin: 0;
  width: 41%;
  padding: 4.2% 4.2% 15%;
  background: var(--grain), #FBF7EF;
  box-shadow: 0 10px 22px rgba(50, 20, 8, .28), 0 2px 4px rgba(50, 20, 8, .2);
  transform: rotate(var(--rot));
}
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.polaroid--g { left: 1%; top: 15%; --rot: -8deg; }
.polaroid--d { right: 1%; top: 17%; --rot: 7deg; }

.disque {
  position: absolute; z-index: 3;
  right: -3%; top: 9%;
  width: 52%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
  filter: drop-shadow(0 10px 14px rgba(30, 10, 4, .4));
  -webkit-tap-highlight-color: transparent;
}
.disque svg { display: block; width: 100%; height: auto; overflow: visible; }
.disque__tourne { transform-origin: 100px 100px; }
.disque.joue .disque__tourne { animation: tourner 4s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
.disque__texte { font-family: var(--police-texte); font-size: 9.5px; font-weight: 600; letter-spacing: 2.6px; fill: #F3E2CC; }
.disque__pause { display: none; }
.disque.joue .disque__pause { display: block; }
.disque.joue .disque__lecture { display: none; }

.carte {
  position: absolute; z-index: 5;
  left: 25%; top: 21%; width: 50%;
  aspect-ratio: 3 / 4;
  filter: drop-shadow(0 12px 16px rgba(50, 20, 8, .3));
}
.carte__papier { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte__contenu {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 19% 10% 0;
  text-align: center;
}
.carte__formule {
  font-family: var(--police-texte); font-weight: 600;
  font-size: 1.7vw; font-size: 1.75cqw;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.5;
}
.carte__noms {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 7%;
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: 8.4vw; font-size: 8.6cqw;
  line-height: 1.06;
  color: var(--terracotta-fonce);
}
.carte__et { font-size: .62em; color: var(--or); margin: .02em 0; }
.carte__orn { width: 62%; height: auto; margin: 9% 0 7%; }
.carte__date {
  font-family: var(--police-titres); font-weight: 500;
  font-size: 4vw; font-size: 4.1cqw;
  letter-spacing: .06em;
  color: var(--encre);
}

.ouverte__devant { position: absolute; inset: 0; z-index: 6; overflow: hidden; border-radius: 0 0 2.2% 2.2% / 0 0 3% 3%; pointer-events: none; }
.ouverte__poche {
  position: absolute; inset: 0;
  clip-path: polygon(0 40%, 50% 82%, 100% 40%, 100% 100%, 0 100%);
  border-radius: 0 0 2.2% 2.2% / 0 0 3% 3%;
  background:
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(255, 190, 150, .16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 60%, rgba(255, 190, 150, .12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 60%, rgba(255, 190, 150, .1), transparent 70%),
    var(--grain),
    linear-gradient(180deg, #9A4428, #7A311D);
}
.poche__plis { position: absolute; inset: 0; width: 100%; height: 100%; }

.poche__galon {
  position: absolute; top: 40%;
  width: 71.6%;
  height: 8.6vw; height: 9cqw;
  background: url("decor/galon-ivoire.webp") 0 0 / auto 100% repeat-x;
  filter: drop-shadow(0 2px 2px rgba(40, 12, 4, .35));
}
.poche__galon--g { left: 0; transform-origin: 0 0; transform: rotate(44.74deg) translateY(calc(9cqw * .56)) scaleY(-1); }
.poche__galon--d { right: 0; transform-origin: 100% 0; transform: rotate(-44.74deg) translateY(calc(9cqw * .56)) scaleY(-1); }

.ouverte__sceau {
  position: absolute; z-index: 8;
  left: 50%; top: 82%; width: 23%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 8px rgba(40, 12, 2, .45));
}

.ouverte__suite {
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: var(--police-texte); font-weight: 600;
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta-fonce);
  text-decoration: none;
  padding: .6rem 1rem;
}
.chevron {
  width: 12px; height: 12px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: descendre 2s var(--courbe-douce) infinite;
}
@keyframes descendre {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; }
  50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
}

/* Entrée animée du contenu de l'enveloppe ouverte */
.js .ouverte .ouverte__enveloppe { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .9s var(--courbe), transform 1.1s var(--courbe); }
.js .ouverte .carte { transform: translateY(32%); transition: transform 1.6s var(--courbe) .45s; }
.js .ouverte .polaroid--g { transform: translate(22%, 34%) rotate(0deg); transition: transform 1.5s var(--courbe) .8s; }
.js .ouverte .polaroid--d { transform: translate(-22%, 34%) rotate(0deg); transition: transform 1.5s var(--courbe) .9s; }
.js .ouverte .disque { transform: translate(-24%, 30%); transition: transform 1.5s var(--courbe) .9s; }
.js .ouverte .ouverte__bouquet { opacity: 0; transform: translateY(14%) scale(.9); transition: opacity 1.1s var(--courbe) 1.15s, transform 1.4s var(--courbe) 1.15s; }
.js .ouverte .ouverte__sceau { opacity: 0; transform: translate(-50%, -50%) scale(1.6); transition: opacity .35s var(--courbe) 2s, transform .6s cubic-bezier(.3, 1.6, .5, 1) 2s; }
.js .ouverte .ouverte__suite { opacity: 0; transition: opacity .9s var(--courbe) 2.5s; }

.js .ouverte.est-revelee .ouverte__enveloppe { opacity: 1; transform: none; }
.js .ouverte.est-revelee .carte { transform: none; }
.js .ouverte.est-revelee .polaroid { transform: rotate(var(--rot)); }
.js .ouverte.est-revelee .disque { transform: rotate(8deg); }
.js .ouverte.est-revelee .ouverte__bouquet { opacity: 1; transform: none; }
.js .ouverte.est-revelee .ouverte__sceau { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.js .ouverte.est-revelee .ouverte__suite { opacity: 1; }

/* ---------- 1. Accueil ---------- */
.accueil { position: relative; color: var(--ivoire); text-align: center; background: var(--brun); }
.accueil__ecran {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.accueil__photo { position: absolute; inset: -4% 0 0; will-change: transform; }
.accueil__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s var(--courbe);
}
.accueil.est-visible .accueil__photo img { transform: scale(1); }
.accueil__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(40,24,16,.38) 0%, rgba(40,24,16,0) 18%, rgba(40,24,16,0) 44%, rgba(40,24,16,.6) 64%, var(--brun) 100%);
}
.accueil__contenu { position: relative; width: 100%; max-width: 760px; padding: 7rem var(--marge) 4.6rem; }
.accueil__noms {
  font-family: var(--police-titres);
  font-weight: 500;
  font-size: clamp(3.2rem, 15vw, 6.4rem);
  line-height: 1.04;
  margin: .2rem 0 1rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.32);
  overflow-wrap: anywhere;
}
.accueil__noms > span { display: block; }
.accueil__noms .a-renseigner { font-size: .45em; }
.accueil__esperluette { font-style: italic; font-weight: 400; font-size: .5em; color: var(--or-clair); line-height: 1.1; }
.accueil__date {
  font-family: var(--police-texte); font-weight: 600;
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.accueil__suite { position: relative; background: var(--brun); padding: 1rem 0 clamp(3.5rem, 12vw, 5.5rem); }
.accueil__suite .ornement { margin-top: 0; }
.accueil__phrase {
  font-family: var(--police-titres);
  font-style: italic;
  font-size: clamp(1.1rem, 4.6vw, 1.32rem);
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto 2.4rem;
  color: var(--creme);
}
.compte__titre {
  font-family: var(--police-texte); font-weight: 600;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: .9rem;
}
.compte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; max-width: 25rem; margin: 0 auto; }
.compte__bloc {
  display: flex; flex-direction: column; align-items: center;
  padding: .9rem .2rem .75rem;
  border: 1px solid rgba(251, 247, 240, .35);
  border-radius: 50% 50% 6px 6px / 60px 60px 6px 6px;
  background: rgba(251, 247, 240, .04);
}
.compte__nombre {
  font-family: var(--police-titres); font-weight: 500;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  padding-top: .2rem;
}
.compte__unite {
  font-family: var(--police-texte); font-weight: 600;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  margin-top: .5rem;
  color: var(--sable);
}
.compte__message { font-family: var(--police-titres); font-style: italic; font-size: 1.25rem; margin-top: .5rem; }

/* Téléphone et tablette : seule la formule « Bismillah… » monte dans le ciel,
   le reste du texte garde sa place en bas de la photo */
@media (max-width: 899px) {
  .accueil__voile {
    background: linear-gradient(180deg, rgba(40,24,16,.55) 0%, rgba(40,24,16,0) 20%, rgba(40,24,16,0) 44%, rgba(40,24,16,.6) 64%, var(--brun) 100%);
  }
  .accueil .accueil__contenu { position: static; }
  .accueil__contenu > * { position: relative; z-index: 1; }
  .accueil__contenu > .formule--clair, .accueil__contenu > .intertitre {
    position: absolute; left: 0; right: 0;
    top: calc(env(safe-area-inset-top, 0px) + clamp(3.4rem, 9vh, 5.2rem));
    margin: 0; padding: 0 var(--marge);
  }
  .accueil__contenu > .intertitre { top: calc(env(safe-area-inset-top, 0px) + clamp(3.4rem, 9vh, 5.2rem) + 1.9rem); }
  /* texte foncé sur le ciel clair, avec un léger halo pour rester lisible */
  .accueil__contenu > .formule--clair, .accueil__contenu > .intertitre--clair {
    color: var(--brun);
    text-shadow: 0 0 10px rgba(251, 247, 240, .85), 0 0 2px rgba(251, 247, 240, .6);
  }
  .accueil__voile {
    background: linear-gradient(180deg, rgba(251,247,240,.28) 0%, rgba(251,247,240,0) 22%, rgba(40,24,16,0) 44%, rgba(40,24,16,.6) 64%, var(--brun) 100%);
  }
}

@media (min-width: 900px) {
  .accueil__ecran { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--brun); }
  .accueil__photo { position: relative; inset: auto; order: 2; height: 100vh; height: 100svh; }
  .accueil__photo img { height: 100%; }
  .accueil__voile { background: linear-gradient(90deg, var(--brun) 0%, rgba(59,36,24,0) 58%); left: 50%; width: 22%; }
  .accueil__contenu { order: 1; padding: 4rem 3rem; }
}

/* ---------- Citation ---------- */
.citation { padding: clamp(4rem, 13vw, 6.5rem) 0; text-align: center; }
.citation__guillemet { display: block; font-family: var(--police-titres); font-size: 5rem; line-height: .6; color: var(--terracotta); opacity: .5; }
.citation__texte p {
  font-family: var(--police-titres); font-style: italic;
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.45;
  color: var(--brun);
  max-width: 26rem; margin: .8rem auto 1.2rem;
}
.citation__source { font-family: var(--police-texte); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta); }

/* ---------- Présentation des mariés ---------- */
.couple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: .6rem;
  max-width: 560px;
  margin: 0 auto 2.6rem;
}
.portrait { text-align: center; }
.portrait--decale { margin-top: 2.6rem; }
.portrait__arche {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 50% 50% 6px 6px / 46% 46% 6px 6px;
  background: var(--sable);
  box-shadow: 0 0 0 1px rgba(169, 80, 47, .35), 0 0 0 6px var(--creme), 0 0 0 7px rgba(169, 80, 47, .25), 0 18px 34px rgba(59, 36, 24, .15);
}
.portrait__arche img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 1.6s var(--courbe); }
@media (hover: hover) { .portrait:hover .portrait__arche img { transform: scale(1.04); } }
.portrait figcaption { margin-top: 1.3rem; display: flex; flex-direction: column; gap: .2rem; }
.portrait__prenom { font-family: var(--police-titres); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 7.6vw, 2.4rem); line-height: 1.15; color: var(--terracotta-fonce); }
.portrait__nom { font-family: var(--police-texte); font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); line-height: 1.5; }
.couple__et { font-family: var(--police-titres); font-style: italic; font-size: 2.2rem; color: var(--or); align-self: center; margin-top: -2rem; }

/* ---------- 2. Notre histoire : chapitres ---------- */
.recit { list-style: none; margin: 0 auto; padding: 0; max-width: 32rem; }
.chapitre { text-align: center; }
.chapitre__numero {
  display: inline-grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--ivoire);
  border: 1px solid rgba(169, 80, 47, .5);
  box-shadow: 0 0 0 5px var(--ivoire), 0 0 0 6px rgba(169, 80, 47, .2);
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: 1.35rem; color: var(--terracotta);
}
.chapitre__label {
  display: block;
  margin-top: 1rem;
  font-family: var(--police-texte); font-weight: 600;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or-fonce);
}
.chapitre__titre { font-family: var(--police-titres); font-style: italic; font-weight: 500; font-size: clamp(1.55rem, 6.4vw, 2rem); line-height: 1.25; margin: .35rem 0 .7rem; color: var(--brun); }
.chapitre__texte { color: var(--encre-douce); font-size: 1.02rem; max-width: 28rem; margin: 0 auto; }
.chapitre__date { margin-top: .4rem; font-size: .9rem; color: var(--terracotta-fonce); font-weight: 500; }
.chapitre__photo {
  position: relative;
  margin: 1.8rem auto 0;
  max-width: 19rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px;
  background: var(--sable);
  box-shadow: 0 0 0 1px rgba(169, 80, 47, .3), 0 0 0 6px var(--ivoire), 0 0 0 7px rgba(169, 80, 47, .2), 0 20px 36px rgba(59, 36, 24, .16);
}
.chapitre__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.chapitre__lien {
  display: block;
  width: 1px; height: 4.2rem;
  margin: 1.7rem auto;
  background: linear-gradient(var(--terracotta), var(--or));
  transform-origin: 50% 0;
}

/* ---------- 3. Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; }
.galerie__cadre { margin: 0; overflow: hidden; border-radius: 4px; background: var(--creme); aspect-ratio: 2 / 3; position: relative; }
.galerie__cadre:nth-child(4n+1) { border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }
.galerie__cadre:nth-child(even) { margin-top: 2.6rem; }
.galerie__cadre img {
  position: absolute; left: 0; top: -5%;
  width: 100%; height: 110%;
  object-fit: cover;
  transform: translate3d(0, var(--decalage, 0px), 0);
  will-change: transform;
}
@media (min-width: 760px) {
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .galerie__cadre:nth-child(even) { margin-top: 0; }
  .galerie__cadre:nth-child(3n+2) { margin-top: 3.5rem; }
}
.photo-manquante {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1rem; text-align: center;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-douce);
  background: var(--creme);
  border: 1px dashed rgba(169, 80, 47, .5);
}

/* ---------- 4. Programme ---------- */
.programme { list-style: none; margin: 0; padding: 0; text-align: left; position: relative; }
.programme::before { content: ""; position: absolute; left: 34px; top: 40px; bottom: 40px; border-left: 1px dashed rgba(169, 80, 47, .45); }
.evenement { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem 0; }
.evenement__icone {
  position: relative; z-index: 1;
  width: 68px; height: 76px;
  display: grid; place-items: center;
  color: var(--terracotta);
  background: var(--ivoire);
  border: 1px solid rgba(169, 80, 47, .5);
  border-radius: 50% 50% 8px 8px / 34px 34px 8px 8px;
  box-shadow: 0 0 0 4px var(--creme), 0 0 0 5px rgba(169, 80, 47, .18);
}
.evenement__icone svg { width: 36px; height: 36px; overflow: visible; }
.evenement__icone svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.js .evenement__icone svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--courbe) .35s; }
.js .evenement.est-visible .evenement__icone svg * { stroke-dashoffset: 0; }
.evenement__carte {
  background: var(--ivoire);
  border: 1px solid rgba(169, 80, 47, .16);
  border-radius: 8px;
  padding: 1.15rem 1.2rem 1.25rem;
  box-shadow: 0 10px 26px rgba(59, 36, 24, .06);
  transition: transform .6s var(--courbe), box-shadow .6s var(--courbe);
}
@media (hover: hover) { .evenement:hover .evenement__carte { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(59, 36, 24, .1); } }
.evenement__date {
  display: inline;
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--terracotta-fonce);
}
.evenement__heure { font-weight: 600; font-size: .86rem; letter-spacing: .06em; color: var(--encre-douce); margin: .6rem 0 .1rem; }
.evenement__titre { font-family: var(--police-texte); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--brun); }
.evenement__lieu { color: var(--encre); margin-top: .3rem; }
.evenement__detail { color: var(--encre-douce); font-size: .95rem; font-style: italic; margin-top: .2rem; }
.evenement__lien { display: inline-block; margin-top: .85rem; }
.evenement__note {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .8rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.evenement__note::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(59,36,24,.25), 0 0 0 3px rgba(251,247,240,.35); }
.evenement--principal .evenement__carte { background: linear-gradient(160deg, var(--terracotta-clair), var(--terracotta) 70%); color: var(--ivoire); border-color: transparent; box-shadow: 0 16px 34px rgba(142, 65, 39, .28); }
.evenement--principal .evenement__date { color: var(--ivoire); }
.evenement--principal .evenement__heure,
.evenement--principal .evenement__titre,
.evenement--principal .evenement__lieu,
.evenement--principal .evenement__detail { color: var(--ivoire); }
.evenement--principal .lien-fin { color: var(--ivoire); }
.evenement--principal .evenement__icone { background: var(--terracotta); color: var(--ivoire); border-color: var(--terracotta); }
.evenement__badge {
  display: inline-block; margin: .35rem 0 0; vertical-align: middle;
  font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .6rem;
  border: 1px solid rgba(251, 247, 240, .6);
  border-radius: 999px;
}
.programme__affiche { margin-top: 2.4rem; text-align: center; }
@media (min-width: 560px) {
  .evenement { grid-template-columns: 80px minmax(0, 1fr); gap: 1.5rem; }
  .programme::before { left: 40px; }
  .evenement__icone { width: 80px; height: 88px; }
  .evenement__icone svg { width: 40px; height: 40px; }
}

/* ---------- 5. Lieux ---------- */
.lieux { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.2rem; max-width: 30rem; }
.lieu-carte {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.8rem 1.1rem 1.6rem;
  border: 1px solid rgba(233, 217, 196, .28);
  border-radius: 50% 50% 8px 8px / 60px 60px 8px 8px;
  background: rgba(251, 247, 240, .04);
}
.lieu-carte__numero { font-family: var(--police-titres); font-style: italic; font-size: 1rem; color: var(--or-clair); margin-bottom: .4rem; }
.lieu-carte__nom { font-family: var(--police-titres); font-style: italic; font-size: clamp(1.55rem, 6.6vw, 2rem); line-height: 1.25; font-weight: 500; }
.lieu-carte__precision { font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sable); margin-top: .45rem; line-height: 1.6; }
.lieu-carte .carte-maps { width: 100%; margin: 1.4rem 0 0; }
.lieu-carte .bouton { margin-top: 1.4rem; }
.lieu-carte__attente { margin-top: 1rem; font-size: .92rem; color: var(--sable); font-style: italic; }
.lieu__pratique { margin: 1.6rem auto 0; color: var(--sable); font-size: .95rem; max-width: 30rem; }
.carte-maps { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: 1px solid rgba(251, 247, 240, .25); background: rgba(251, 247, 240, .06); }
.carte-maps iframe { width: 100%; height: 100%; border: 0; display: block; filter: sepia(.15) saturate(.92); }

/* ---------- 6. Tenue ---------- */
.pastilles { list-style: none; margin: 0 auto 1.6rem; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.4rem 1rem; }
.pastille { display: flex; flex-direction: column; align-items: center; width: 7rem; }
.pastille__rond {
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 1px solid rgba(59, 36, 24, .12);
  box-shadow: 0 0 0 7px rgba(251, 247, 240, .18), 0 0 0 8px rgba(251, 247, 240, .45), 0 14px 34px rgba(40, 20, 10, .3), inset 0 -6px 14px rgba(59, 36, 24, .08);
}
@keyframes lueur {
  0%, 100% { box-shadow: 0 0 0 7px rgba(251,247,240,.18), 0 0 0 8px rgba(251,247,240,.45), 0 14px 34px rgba(40,20,10,.3), inset 0 -6px 14px rgba(59,36,24,.08); }
  50% { box-shadow: 0 0 0 12px rgba(251,247,240,.12), 0 0 0 13px rgba(251,247,240,.3), 0 14px 34px rgba(40,20,10,.3), inset 0 -6px 14px rgba(59,36,24,.08); }
}
.pastille__nom { margin-top: 1.1rem; font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.tenue__style { font-family: var(--police-titres); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 7.2vw, 2.3rem); margin-bottom: 1rem; }

/* ---------- 7. Confirmation de présence ---------- */
.rsvp__monogramme { font-family: var(--police-titres); font-weight: 500; font-size: clamp(2.4rem, 11vw, 3.4rem); letter-spacing: .06em; color: var(--terracotta); line-height: 1; margin-bottom: .6rem; }
.rsvp__monogramme span { font-style: italic; font-size: 1.4em; color: var(--terracotta-fonce); margin-right: -.04em; }
#rsvp .rsvp__monogramme { margin-top: clamp(1.4rem, 7vw, 2.6rem); padding-top: .2em; margin-bottom: 1.1rem; }
.rsvp__limite { margin: -1.2rem 0 2.2rem; }
.rsvp__date {
  display: inline-block;
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 6vw, 1.95rem);
  color: var(--terracotta-fonce);
  padding: .25rem 1.2rem;
  border-top: 1px solid rgba(169, 80, 47, .35);
  border-bottom: 1px solid rgba(169, 80, 47, .35);
}
.rsvp__action { margin: 0 auto 3.2rem; }
.rsvp__note { margin-top: .9rem; font-size: .88rem; color: var(--encre-douce); }
.rsvp__note.a-renseigner, .rsvp__attente { margin-top: .9rem; font-size: .9rem; color: var(--terracotta-fonce); font-style: italic; }
.rsvp__ferme { font-style: italic; color: var(--encre-douce); }

/* Formulaire intégré : carte en arche, champs soulignés comme un faire-part */
.rsvp-form, .rsvp-merci {
  position: relative;
  max-width: 34rem;
  margin: 0 auto 3.2rem;
  padding: 3rem clamp(1.3rem, 5vw, 2.6rem) 2.6rem;
  background: var(--creme) var(--grain);
  border: 1px solid rgba(194, 154, 98, .55);
  border-radius: 50% 50% 14px 14px / 90px 90px 14px 14px;
  box-shadow: 0 18px 40px rgba(59, 36, 24, .07);
}
.rsvp-form::before, .rsvp-merci::before {          /* second filet doré, à l'intérieur */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(194, 154, 98, .3);
  border-radius: 50% 50% 9px 9px / 84px 84px 9px 9px;
}
.rsvp-form { display: grid; gap: 1.9rem; text-align: left; }
.rsvp-form__titre, .rsvp-merci__titre {
  margin: 0; text-align: center;
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 6.5vw, 2rem); color: var(--terracotta-fonce);
}
.rsvp-form__filet {                                 /* ── ◇ ── */
  display: block; width: 92px; height: 12px; margin: -.6rem auto -.2rem; position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .9L9.1 5 5 9.1.9 5z' fill='none' stroke='%23C29A62' stroke-width='.9'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
.rsvp-form__filet::before, .rsvp-form__filet::after { content: ""; position: absolute; top: 50%; width: 36px; height: 1px; background: var(--or); }
.rsvp-form__filet::before { left: 0; }
.rsvp-form__filet::after { right: 0; }
.rsvp-form__ligne, .rsvp-form__venue { display: grid; gap: 1.9rem; }
.rsvp-form__venue { animation: rsvp-apparait .6s var(--courbe); }
@keyframes rsvp-apparait { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 560px) { .rsvp-form__ligne { grid-template-columns: 1fr 1fr; } }

.champ { display: grid; gap: .7rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ__label {
  padding: 0;
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: 1.12rem; line-height: 1.3; color: var(--brun);
}
.champ__label em { font-family: var(--police-texte); font-style: normal; font-size: .78rem; letter-spacing: .02em; color: var(--encre-douce); }
.champ input {
  width: 100%;
  padding: .55rem .15rem;
  font: inherit; font-size: 1.02rem; color: var(--encre);
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(143, 106, 58, .55);
  border-radius: 0;
  transition: border-color .3s var(--courbe), box-shadow .3s var(--courbe);
}
.champ textarea {
  width: 100%; min-height: 7rem; resize: vertical;
  padding: .8rem .9rem;
  font: inherit; font-size: 1rem; color: var(--encre);
  background: rgba(251, 247, 240, .7);
  border: 1px solid rgba(143, 106, 58, .4); border-radius: 10px;
  transition: border-color .3s var(--courbe), box-shadow .3s var(--courbe);
}
.champ textarea::placeholder { color: rgba(90, 59, 44, .55); font-style: italic; }
.champ input:focus { outline: none; border-bottom-color: var(--terracotta); box-shadow: 0 1px 0 var(--terracotta); }
.champ textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(169, 80, 47, .12); }
.champ input[aria-invalid="true"] { border-bottom-color: var(--terracotta-fonce); box-shadow: 0 1px 0 var(--terracotta-fonce); }

.choix { display: grid; gap: .7rem; }
.choix__option { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.choix__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix__texte { display: flex; flex-direction: column; justify-content: center; transition: background-color .35s var(--courbe), color .35s var(--courbe), border-color .35s var(--courbe), box-shadow .35s var(--courbe); }
.choix__option input:focus-visible + .choix__texte { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.choix[aria-invalid="true"] .choix__texte { border-color: var(--terracotta-fonce); }

/* présence : deux cartes avec un rond à cocher */
@media (min-width: 560px) { .choix--deux { grid-template-columns: 1fr 1fr; } }
.choix--deux .choix__texte {
  position: relative; min-height: 58px; padding: .8rem 1rem .8rem 3rem;
  background: rgba(251, 247, 240, .7);
  border: 1px solid rgba(143, 106, 58, .4); border-radius: 999px;
  font-family: var(--police-titres); font-style: italic; font-size: 1.08rem; color: var(--brun);
}
.choix--deux strong { font-weight: 500; }
.choix--deux .choix__texte::before {
  content: ""; position: absolute; left: 1.15rem; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 1px solid var(--or-fonce); border-radius: 50%; background: var(--ivoire);
  transition: box-shadow .35s var(--courbe), background-color .35s var(--courbe), border-color .35s var(--courbe);
}
.choix--deux input:checked + .choix__texte { border-color: var(--terracotta); background: var(--ivoire); color: var(--terracotta-fonce); box-shadow: 0 6px 16px rgba(142, 65, 39, .1); }
.choix--deux input:checked + .choix__texte::before { border-color: var(--terracotta); background: var(--terracotta); box-shadow: inset 0 0 0 3px var(--ivoire); }

/* nombre de personnes : pastilles rondes */
.choix--nombres { grid-template-columns: repeat(5, minmax(0, 52px)); justify-content: start; gap: .65rem; }
.choix--nombres .choix__texte {
  aspect-ratio: 1; align-items: center;
  border: 1px solid rgba(143, 106, 58, .5); border-radius: 50%;
  background: rgba(251, 247, 240, .7);
  font-family: var(--police-titres); font-size: 1.2rem; color: var(--brun);
}
.choix--nombres strong { font-weight: 500; }
.choix--nombres input:checked + .choix__texte { background: var(--terracotta); border-color: var(--terracotta); color: var(--ivoire); box-shadow: 0 6px 14px rgba(142, 65, 39, .22); }

/* célébrations : liste fine avec coche dorée */
.choix--liste { gap: 0; border-top: 1px solid rgba(143, 106, 58, .3); }
.choix--liste .choix__texte {
  position: relative; gap: .1rem; padding: .95rem .4rem .95rem 2.6rem;
  border-bottom: 1px solid rgba(143, 106, 58, .3);
}
.choix--liste strong { font-family: var(--police-titres); font-weight: 500; font-size: 1.08rem; color: var(--brun); }
.choix--liste small { font-size: .8rem; letter-spacing: .03em; color: var(--encre-douce); }
.choix--liste .choix__texte::before {
  content: ""; position: absolute; left: .4rem; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border: 1px solid var(--or-fonce); border-radius: 5px; background: var(--ivoire);
  transition: background-color .3s var(--courbe), border-color .3s var(--courbe);
}
.choix--liste input:checked + .choix__texte::before { background: var(--terracotta); border-color: var(--terracotta); }
.choix--liste input:checked + .choix__texte::after {
  content: ""; position: absolute; left: calc(.4rem + 7px); top: 50%; width: 6px; height: 11px; margin-top: -8px;
  border: solid var(--ivoire); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.choix--liste input:checked + .choix__texte strong { color: var(--terracotta-fonce); }
.choix--liste[aria-invalid="true"] { border-top-color: var(--terracotta-fonce); }

@media (hover: hover) {
  .choix--deux .choix__option:hover .choix__texte, .choix--nombres .choix__option:hover .choix__texte { border-color: var(--terracotta-clair); }
  .choix--liste .choix__option:hover .choix__texte { background: rgba(251, 247, 240, .6); }
}

.rsvp-form__erreur { margin: 0; text-align: center; font-size: .92rem; font-style: italic; color: var(--terracotta-fonce); }
.rsvp-form__envoyer { justify-self: center; width: 100%; max-width: 20rem; }
.rsvp-form__envoyer:disabled { opacity: .7; cursor: wait; }

.rsvp-merci { text-align: center; }
.rsvp-merci:focus { outline: none; }
.rsvp-merci .rsvp-form__filet { margin: 0 auto 1.2rem; }
.rsvp-merci__titre { margin-bottom: .7rem; }
.rsvp-merci__texte { color: var(--encre-douce); margin-bottom: 1.8rem; }
.contact {
  max-width: 27rem;
  margin: 0 auto;
  padding: 2rem 1.4rem 2.2rem;
  background: var(--creme);
  border: 1px solid rgba(169, 80, 47, .18);
  border-radius: 50% 50% 10px 10px / 70px 70px 10px 10px;
}
.contact__titre { font-family: var(--police-titres); font-style: italic; font-weight: 500; font-size: 1.6rem; color: var(--terracotta-fonce); }
.contact__texte { margin: .5rem auto 0; color: var(--encre-douce); font-size: .95rem; max-width: 22rem; }
.contact__liste { margin-top: .9rem; }
.contact__personne + .contact__personne { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(169, 80, 47, .18); }
.contact__nom { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: .35rem; }
.contact__numero { font-family: var(--police-texte); font-weight: 600; font-size: 1.28rem; letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; color: var(--brun); margin: 0 0 1.2rem; }
.contact__wa { margin: -.95rem 0 1.2rem; font-size: .85rem; letter-spacing: .03em; color: var(--encre-douce); font-variant-numeric: tabular-nums lining-nums; }
.contact__boutons { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.contact__boutons .bouton { flex: 1 1 8.5rem; min-width: 0; max-width: 12rem; padding: .85rem 1rem; }

/* ---------- 8. Pied de page ---------- */
.pied { position: relative; background: var(--brun); color: var(--ivoire); text-align: center; padding: 0 var(--marge) calc(3.5rem + env(safe-area-inset-bottom)); }
.pied > .feston { margin: 0 calc(-1 * var(--marge)) clamp(3.5rem, 12vw, 6rem); }
.pied__merci { font-family: var(--police-titres); font-style: italic; font-weight: 500; font-size: clamp(1.55rem, 6.4vw, 2.1rem); line-height: 1.35; max-width: 24rem; margin: 0 auto 1rem; }
.pied__texte { color: var(--sable); max-width: 26rem; margin: 0 auto; }
.pied__monogramme {
  width: 104px; height: 120px;
  margin: 2.4rem auto 1.6rem;
  display: grid; place-items: center;
  border-radius: 50% 50% 8px 8px / 52px 52px 8px 8px;
  border: 1px solid rgba(226, 197, 149, .5);
  box-shadow: inset 0 0 0 5px var(--brun), inset 0 0 0 6px rgba(226, 197, 149, .25);
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: 1.8rem;
  color: var(--or-clair);
  line-height: 1;
}
.pied__monogramme.a-renseigner { font-size: .6rem; text-decoration: none; padding: .5rem; }
.pied__signature { font-family: var(--police-titres); font-style: italic; font-size: 1.3rem; color: var(--sable); line-height: 1.45; margin-bottom: 1rem; white-space: pre-line; }
.pied__hashtag { font-weight: 600; font-size: .82rem; letter-spacing: .12em; color: var(--or-clair); overflow-wrap: anywhere; }
.pied__credit { margin-top: 2.2rem; font-size: .76rem; color: rgba(233, 217, 196, .7); }

/* Signature de la créatrice : bande noire pleine largeur, filet doré au-dessus */
.pied { padding-bottom: 0; }
.createur {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 3rem calc(-1 * var(--marge)) 0;
  padding: .85rem calc(var(--marge) + 58px) calc(.85rem + env(safe-area-inset-bottom)) var(--marge);  /* à droite : place du bouton musique */
  background: #120C09;
  border-top: 1px solid var(--or);
  text-align: left;
}
.createur__nom {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .04em; color: rgba(233, 217, 196, .75);
}
.createur__nom strong { font-weight: 600; color: var(--sable); white-space: nowrap; }
.createur__coeur {
  flex: none; width: 12px; height: 11px;
  background: var(--or-clair);
  -webkit-mask: var(--forme-coeur) center / contain no-repeat;
          mask: var(--forme-coeur) center / contain no-repeat;
  animation: coeur-createur 2.8s var(--courbe-douce) infinite;
}
@keyframes coeur-createur { 0%, 70%, 100% { scale: 1; } 78% { scale: 1.25; } 86% { scale: .95; } }
.createur__liens { display: flex; gap: .4rem; flex: none; }
.createur__liens a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--or-clair);
  border: 1px solid rgba(230, 200, 147, .35);
  transition: background-color .4s var(--courbe), color .4s var(--courbe), scale .25s var(--courbe);
}
.createur__liens svg { width: 18px; height: 18px; }
.createur__liens .trait { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.createur__liens .plein { fill: currentColor; }
.createur__liens a:active { scale: .92; }
@media (hover: hover) { .createur__liens a:hover { background: var(--or-clair); color: #120C09; } }
@media (prefers-reduced-motion: reduce) { .createur__coeur { animation: none; } }

/* Monogramme M & F : sceau de cire doré, le même que celui de l'enveloppe.
   Les initiales restent dans le texte (lecteurs d'écran) mais c'est le
   cachet qui s'affiche. Dessous, son ombre ; autour, un halo doré qui
   respire (opacité seulement, fluide sur téléphone) ; dessus, un éclat. */
.pied__monogramme {
  position: relative;
  width: 132px; height: 150px;
  margin: 2.6rem auto 1.8rem;
  border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent) 50% 84% / 84% 30% no-repeat;
  color: transparent; font-size: 0; text-shadow: none;
}
.pied__monogramme::before {          /* halo doré */
  content: ""; position: absolute; inset: -34px;
  background: radial-gradient(closest-side, rgba(230, 200, 147, .6), rgba(230, 200, 147, .18) 55%, transparent);
  opacity: .4;
  animation: halo-or 4s var(--courbe-douce) infinite;
}
.pied__monogramme::after {           /* le cachet, et l'éclat de lumière qui le traverse */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 48%, #FFFAE6 50%, rgba(255, 255, 255, .8) 52%, transparent 62%) -150% 0 / 300% 100% no-repeat,
    url("decor/cachet.webp") center / contain no-repeat;
  background-blend-mode: soft-light, normal;
  -webkit-mask: url("decor/cachet.webp") center / contain no-repeat;
          mask: url("decor/cachet.webp") center / contain no-repeat;
  animation: eclat-or 4s var(--courbe-douce) infinite;
}
@keyframes eclat-or { 0%, 20% { background-position: -150% 0, center; } 65%, 100% { background-position: 250% 0, center; } }
@keyframes halo-or { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pied__monogramme::before, .pied__monogramme::after { animation: none; } }

/* ---------- Bouton musique ---------- */
.musique {
  position: fixed; z-index: 90;
  right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(169, 80, 47, .4);
  background: rgba(251, 247, 240, .92);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(59, 36, 24, .18);
}
.musique__barres { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.musique__barres i { display: block; width: 3px; height: 100%; background: var(--terracotta); border-radius: 2px; transform-origin: bottom; animation: barre 1.1s ease-in-out infinite; }
.musique__barres i:nth-child(2) { animation-delay: .2s; }
.musique__barres i:nth-child(3) { animation-delay: .4s; }
.musique[aria-pressed="false"] .musique__barres i { animation: none; transform: scaleY(.3); }
@keyframes barre { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- Bandeau d'aide (ordinateur uniquement) ---------- */
.aide-brouillon {
  position: fixed; z-index: 300;
  left: .75rem; right: .75rem; bottom: .75rem;
  max-width: 32rem; margin: 0 auto;
  padding: .8rem 1rem;
  font-size: .82rem; line-height: 1.5;
  background: var(--brun); color: var(--creme);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.aide-brouillon summary { cursor: pointer; font-weight: 600; }
.aide-brouillon ul { margin: .5rem 0 0; padding-left: 1.1rem; max-height: 40vh; overflow: auto; }
.aide-brouillon button { float: right; margin-left: .75rem; background: none; border: 1px solid rgba(245,237,224,.5); color: inherit; border-radius: 4px; padding: .1rem .5rem; cursor: pointer; font: inherit; }

/* =====================================================================
   ANIMATIONS AU DÉFILEMENT (actives seulement avec JavaScript)
   ===================================================================== */
.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.js .reveal.est-visible { opacity: 1; transform: none; }

.js .ornement.reveal::before, .js .ornement.reveal::after { transform: scaleX(0); }
.js .ornement.reveal.est-visible::before, .js .ornement.reveal.est-visible::after { transform: scaleX(1); }

/* Titres : chaque mot monte de derrière une ligne invisible (effet de masque) */
.mot { display: inline-block; }
.js .mot {
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  clip-path: inset(-.25em -.15em 105% -.15em);
  transition: opacity .8s var(--courbe), transform 1.1s var(--courbe), clip-path 1.1s var(--courbe);
  transition-delay: calc(var(--i, 0) * 90ms + 60ms);
}
.js .est-visible .mot { opacity: 1; transform: none; clip-path: inset(-.25em -.15em -.3em -.15em); }

.js .portrait.reveal .portrait__arche { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--courbe-douce) .2s; }
.js .portrait.reveal.est-visible .portrait__arche { clip-path: inset(0 0 0 0); }

/* Chapitres : le médaillon apparaît, puis le texte, puis le fil se trace jusqu'au suivant */
.js .chapitre .chapitre__numero { transform: scale(.4); opacity: 0; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1), opacity .6s var(--courbe); }
.js .chapitre .chapitre__corps { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1.1s var(--courbe) .25s, transform 1.1s var(--courbe) .25s; }
.js .chapitre .chapitre__lien { transform: scaleY(0); transition: transform 1.4s var(--courbe-douce) .6s; }
.js .chapitre.est-visible .chapitre__numero { transform: none; opacity: 1; }
.js .chapitre.est-visible .chapitre__corps { opacity: 1; transform: none; }
.js .chapitre.est-visible .chapitre__lien { transform: scaleY(1); }

/* =====================================================================
   COUCHE DE MOUVEMENT
   Uniquement des déplacements, fondus et respirations : ni la mise en
   page, ni les couleurs, ni les images ne changent. Les boucles utilisent
   les propriétés « translate », « rotate » et « scale » pour ne pas
   écraser les « transform » déjà posés par les animations d'entrée.
   ===================================================================== */

/* Apparitions : fondu et légère montée, sans flou (plus fluide sur téléphone) */
.js .reveal { transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); }

/* Galerie : trois révélations qui alternent (rideau qui monte, volet qui
   s'ouvre de côté, fondu qui se rapproche) ; la photo se pose en dézoomant.
   Le masque est posé sur la photo et non sur le cadre : un cadre entièrement
   masqué ne serait jamais vu par l'observateur de défilement. */
.js .galerie__cadre.reveal { background: transparent; transform: translate3d(0, 30px, 0); transition: opacity 1s var(--courbe), transform 1.3s var(--courbe), background-color .6s var(--courbe) 1.2s; }
.js .galerie__cadre.reveal:nth-child(3n+2) { transform: translate3d(-24px, 0, 0); }
.js .galerie__cadre.reveal:nth-child(3n) { transform: scale(.94); }
.js .galerie__cadre.reveal.est-visible { transform: none; background: var(--creme); }
.js .galerie__cadre.reveal img { scale: 1.16; clip-path: inset(100% 0 0 0); transition: scale 2.4s var(--courbe), clip-path 1.4s var(--courbe-douce); transition-delay: inherit; }
.js .galerie__cadre.reveal:nth-child(3n+2) img { clip-path: inset(0 100% 0 0); }
.js .galerie__cadre.reveal:nth-child(3n) img { clip-path: inset(0 0 0 0); }
.js .galerie__cadre.reveal.est-visible img { scale: 1; clip-path: inset(0 0 0 0); }

/* Programme : le fil pointillé se trace au rythme du défilement */
.programme::before { transform-origin: top; transform: scaleY(var(--progression, 1)); }
.js .evenement.reveal { transform: translate3d(-26px, 0, 0); }
.js .evenement.reveal.est-visible { transform: none; }
.js .evenement.reveal .evenement__icone { scale: .7; transition: scale 1s cubic-bezier(.34, 1.25, .64, 1) .15s; }
.js .evenement.reveal.est-visible .evenement__icone { scale: 1; }

/* Lieux : les cartes montent en cascade */
.js .lieu-carte.reveal { transform: translate3d(0, 36px, 0) scale(.97); }
.js .lieu-carte.reveal.est-visible { transform: none; }

/* Enveloppe ouverte : une fois tout posé, seul le bouquet ondule, très lentement */
@keyframes brise { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: -.8deg; translate: 0 -2px; } }
.ouverte.est-revelee .ouverte__bouquet { transform-origin: 50% 90%; animation: brise 11s var(--courbe-douce) 3.2s infinite; }

/* Compte à rebours : chaque chiffre qui change glisse en place */
@keyframes tic { from { opacity: 0; translate: 0 -.4em; } to { opacity: 1; translate: 0 0; } }
.compte__nombre.tic { animation: tic .55s var(--courbe); }
.js .compte.reveal .compte__bloc { opacity: 0; translate: 0 18px; transition: opacity .8s var(--courbe), translate .9s var(--courbe); }
.js .compte.reveal.est-visible .compte__bloc { opacity: 1; translate: 0 0; }
.js .compte.reveal .compte__bloc:nth-child(2) { transition-delay: .1s; }
.js .compte.reveal .compte__bloc:nth-child(3) { transition-delay: .2s; }
.js .compte.reveal .compte__bloc:nth-child(4) { transition-delay: .3s; }

/* Petites touches : le guillemet grandit en apparaissant */
.citation__guillemet.reveal { transform: translate3d(0, 28px, 0) scale(.6); }
.citation__guillemet.reveal.est-visible { transform: none; }

/* Ornements : le losange éclot au centre une fois le filet tracé */
.js .ornement.reveal { background-size: 0 0; }
.js .ornement.reveal.est-visible { animation: losange-fond 1s cubic-bezier(.34, 1.25, .64, 1) .9s both; }
@keyframes losange-fond { from { background-size: 0 0; } to { background-size: 11px 11px; } }

/* Bouton de réponse : un reflet de soie passe de temps en temps pour attirer l'œil, sans insister */
@keyframes reflet { 0%, 82% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.rsvp-form__envoyer::after, #lien-rsvp::after { animation: reflet 7s var(--courbe-douce) 2.5s infinite; }

/* Formulaire : les choix réagissent au toucher */
.choix__option:active .choix__texte { scale: .97; }
.choix__texte { transition: background-color .35s var(--courbe), color .35s var(--courbe), border-color .35s var(--courbe), box-shadow .35s var(--courbe), scale .25s var(--courbe); }
@keyframes coche { 0% { scale: .4; } 60% { scale: 1.15; } 100% { scale: 1; } }
.choix--nombres input:checked + .choix__texte, .choix--liste input:checked + .choix__texte::before, .choix--deux input:checked + .choix__texte::before { animation: coche .45s var(--courbe); }

/* Poussière d'or qui monte lentement (sections sombres et accueil) */
.paillettes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.paillettes i {
  position: absolute; bottom: -10px; left: var(--x);
  width: var(--t); height: var(--t); border-radius: 50%;
  background: var(--or-clair);
  box-shadow: 0 0 6px 1px rgba(230, 200, 147, .55);
  opacity: 0;
  animation: monter var(--d) linear var(--r) infinite;
}
@keyframes monter {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: var(--o); }
  50% { translate: var(--dx) -50vh; }
  85% { opacity: var(--o); }
  100% { opacity: 0; translate: 0 -100vh; }
}
.section--brun > .conteneur, .section--terracotta > .conteneur, .accueil__contenu { position: relative; z-index: 1; }

/* Fine barre dorée de progression de lecture */
.progression-lecture {
  position: fixed; left: 0; top: 0; z-index: 50;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--or), var(--or-clair));
  transform-origin: left; transform: scaleX(var(--lecture, 0));
  pointer-events: none;
}

/* =====================================================================
   AMBIANCE ET PROFONDEUR DES SECTIONS
   Un calque décoratif (créé par script.js) glisse derrière chaque
   section : halos de lumière qui dérivent, dentelle en filigrane,
   grande arche dorée qui se trace, pétales qui tombent. Chaque calque
   suit le défilement à sa propre vitesse (--p, de -1 à 1) pour donner
   de la profondeur. Uniquement les couleurs de la palette.
   ===================================================================== */
.section, .citation, .accueil__suite, .pied { position: relative; }
.section > .conteneur, .citation > .conteneur, .accueil__suite > .conteneur, .pied > :not(.ambiance):not(.paillettes) { position: relative; z-index: 1; }

.ambiance {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  --halo-a: rgba(191, 105, 72, .15);
  --halo-b: rgba(230, 200, 147, .38);
  --trait: rgba(194, 154, 98, .42);
  --lumiere: rgba(230, 200, 147, .22);
}
.ambiance--sombre { --halo-a: rgba(194, 154, 98, .17); --halo-b: rgba(191, 105, 72, .24); --trait: rgba(230, 200, 147, .2); --lumiere: rgba(230, 200, 147, .1); }
.section--terracotta > .ambiance { --halo-a: rgba(230, 200, 147, .2); --halo-b: rgba(126, 51, 32, .42); --trait: rgba(230, 200, 147, .26); }

/* Halos : deux grandes lueurs qui dérivent lentement, chacune à sa profondeur */
.ambiance__halo {
  position: absolute; border-radius: 50%;
  width: 95vmax; height: 95vmax;
  will-change: transform;
  opacity: 0; transition: opacity 2.2s var(--courbe);
}
.ambiance__halo--a { left: -55vmax; top: -35vmax; background: radial-gradient(closest-side, var(--halo-a), transparent); transform: translate3d(0, calc(var(--p, 0) * -110px), 0); animation: deriver-a 22s var(--courbe-douce) infinite; }
.ambiance__halo--b { right: -55vmax; bottom: -40vmax; background: radial-gradient(closest-side, var(--halo-b), transparent); transform: translate3d(0, calc(var(--p, 0) * 70px), 0); animation: deriver-b 27s var(--courbe-douce) infinite; }
@keyframes deriver-a { 0%, 100% { translate: 0 0; scale: 1; } 33% { translate: 14vw 8vh; scale: 1.12; } 66% { translate: 4vw 18vh; scale: .94; } }
@keyframes deriver-b { 0%, 100% { translate: 0 0; scale: 1; } 40% { translate: -16vw -10vh; scale: 1.1; } 75% { translate: -6vw -20vh; scale: .96; } }
.est-entree > .ambiance .ambiance__halo { opacity: 1; }

/* Dentelle en filigrane : visible sur les bords, effacée derrière le texte */
.ambiance__dentelle {
  position: absolute; inset: -12% 0;
  background: url("decor/dentelle-ivoire.webp") 0 0 / 420px 420px repeat;
  mix-blend-mode: multiply;
  opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #000 95%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #000 95%);
  transform: translate3d(0, calc(var(--p, 0) * 40px), 0);
}
.ambiance--sombre .ambiance__dentelle { background-image: url("decor/dentelle-terracotta.webp"); mix-blend-mode: screen; opacity: .1; }
.section--terracotta > .ambiance .ambiance__dentelle { mix-blend-mode: soft-light; opacity: .45; }

/* Grande arche dorée qui se trace derrière le titre */
.ambiance__arche {
  position: absolute; left: 50%; top: clamp(1.5rem, 5vw, 3.5rem);
  width: min(92vw, 640px); height: auto;
  overflow: visible;
  transform: translate3d(-50%, calc(var(--p, 0) * 90px), 0);
}
.ambiance__arche path { fill: none; stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s var(--courbe-douce) .3s; }
.ambiance__arche path + path { transition-delay: .7s; opacity: .6; }
.est-entree > .ambiance .ambiance__arche path { stroke-dashoffset: 0; }

/* Pétales qui tombent en se balançant */
.ambiance__petale {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--t); height: calc(var(--t) * 1.45);
  background: var(--c);
  -webkit-mask: var(--forme) center / contain no-repeat;
          mask: var(--forme) center / contain no-repeat;
  opacity: 0;
  animation: petale var(--d) linear var(--r) infinite;
}
@keyframes petale {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  15% { opacity: var(--o); }
  50% { translate: var(--dx) 24vh; rotate: calc(var(--rt) * .5); }
  85% { opacity: var(--o); }
  100% { opacity: 0; translate: calc(var(--dx) * -.4) 48vh; rotate: var(--rt); }
}
:root {
  --forme-petale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cpath d='M12 1C19 8 21 20 12 33 3 20 5 8 12 1z'/%3E%3C/svg%3E");
  --forme-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S3.6 15.8 1.6 10.6C0 6.4 2.6 1.5 7 1.5c2.3 0 3.8 1.3 5 3 1.2-1.7 2.7-3 5-3 4.4 0 7 4.9 5.4 9.1C20.4 15.8 12 21 12 21z'/%3E%3C/svg%3E");
}

/* Fond continu : un seul décor fixé à l'écran pour tout le site.
   Les sections claires deviennent transparentes et le contenu glisse
   par-dessus ; plus de coupure de décor d'une section à l'autre. */
.fond-continu {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background: var(--creme);
  --halo-a: rgba(191, 105, 72, .13);
  --halo-b: rgba(230, 200, 147, .4);
}
.fond-continu .ambiance__halo { opacity: 1; }
.fond-continu__dentelle {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 420px);
  background: url("decor/dentelle-ivoire.webp") 0 0 / 420px 420px repeat;
  mix-blend-mode: multiply;
  opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.28) 28%, rgba(0,0,0,.28) 72%, #000);
          mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.28) 28%, rgba(0,0,0,.28) 72%, #000);
  will-change: transform;
}
.section--creme, .section--ivoire, .section--sable { background: transparent; }
.feston--creme-sur-ivoire { display: none; }
.feston--brun-sur-ivoire, .feston--terracotta-sur-ivoire { --bas: transparent; }
/* Sections sombres : leurs halos s'estompent en haut et en bas au lieu d'être tranchés */
.ambiance--sombre {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/* Notre histoire : fil doré vertical qui se trace au défilement,
   chaque chapitre accroché par son médaillon */
.recit { position: relative; max-width: 30rem; text-align: left; }
.recit::before, .recit::after {
  content: ""; position: absolute; left: 1.75rem; top: 1.75rem; bottom: 1.75rem;
  width: 1px; margin-left: -.5px;
}
.recit::before { background: rgba(194, 154, 98, .28); }
.recit::after {
  width: 2px; margin-left: -1px;
  background: linear-gradient(var(--terracotta), var(--or) 60%, var(--or-clair));
  transform-origin: top; transform: scaleY(var(--fil, 1));
  box-shadow: 0 0 10px rgba(194, 154, 98, .45);
}
.chapitre {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem;
  align-items: start;
  text-align: left;
  padding-bottom: 1.6rem;
}
.chapitre:last-child { padding-bottom: 0; }
.chapitre__lien { display: none; }
.chapitre__numero { box-shadow: 0 0 0 5px var(--creme), 0 0 0 6px rgba(169, 80, 47, .22), 0 6px 14px rgba(59, 36, 24, .12); }
.chapitre__corps {
  position: relative;
  padding: 1.25rem 1.2rem 1.35rem;
  background: rgba(251, 247, 240, .9);
  border: 1px solid rgba(169, 80, 47, .16);
  border-radius: 6px 20px 20px 20px;
  box-shadow: 0 14px 30px rgba(59, 36, 24, .08);
}
.chapitre__corps::before {          /* petite attache vers le médaillon */
  content: ""; position: absolute; left: -1rem; top: 1.7rem;
  width: 1rem; height: 1px; background: var(--or);
}
.chapitre__label { margin-top: 0; }
.chapitre__titre { margin: .25rem 0 .5rem; }
.chapitre__texte { margin: 0; font-size: .98rem; }
.chapitre__photo { max-width: none; margin-top: 1.2rem; border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; }
.chapitre:last-child .chapitre__numero { background: var(--terracotta); color: var(--ivoire); border-color: var(--terracotta); }
.js .chapitre .chapitre__corps { transform: translate3d(28px, 0, 0); }
.js .chapitre.est-visible .chapitre__corps { transform: none; }
.js .chapitre .chapitre__numero { transition: transform 1s cubic-bezier(.34, 1.25, .64, 1), opacity .7s var(--courbe); }
.chapitre__numero { position: relative; }
.chapitre__numero::after {          /* une onde dorée part du médaillon quand il arrive */
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--or); opacity: 0; pointer-events: none;
}
.chapitre.est-visible .chapitre__numero::after { animation: onde-medaillon 1.8s var(--courbe) .6s 1 forwards; }
@keyframes onde-medaillon { from { opacity: .9; scale: .8; } to { opacity: 0; scale: 1.6; } }

/* Séparations entre sections : fin trait doré avec losange, qui se trace à l'arrivée */
#maries::before, #histoire::before, #galerie::before, #programme::before, #tenue::before {
  content: ""; position: absolute; left: 50%; top: 0; z-index: 2;
  width: min(78%, 440px); height: 14px; margin: -7px 0 0 calc(min(78%, 440px) / -2);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .9L9.1 5 5 9.1.9 5z' fill='%23FBF7F0' stroke='%23C29A62' stroke-width='.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, var(--or) 25%, var(--or) 46%, transparent 46%, transparent 54%, var(--or) 54%, var(--or) 75%, transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}
.js #maries::before, .js #histoire::before, .js #galerie::before, .js #programme::before, .js #tenue::before { transform: scaleX(0); transition: transform 1.8s var(--courbe-douce); }
.js .est-entree#maries::before, .js .est-entree#histoire::before, .js .est-entree#galerie::before, .js .est-entree#programme::before, .js .est-entree#tenue::before { transform: scaleX(1); }

/* Lieux → Tenue : la couleur passe du brun au terracotta en douceur, traversée par le trait doré */
.section--terracotta {
  background:
    linear-gradient(180deg, var(--brun) 0, rgba(59, 36, 24, .55) 70px, rgba(59, 36, 24, 0) 180px),
    var(--grain), var(--terracotta);
}
#tenue::before {
  top: 70px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .9L9.1 5 5 9.1.9 5z' fill='%237E3320' stroke='%23E6C893' stroke-width='.9'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, var(--or-clair) 25%, var(--or-clair) 46%, transparent 46%, transparent 54%, var(--or-clair) 54%, var(--or-clair) 75%, transparent) center / 100% 1px no-repeat;
}
#tenue { padding-top: clamp(7.5rem, 20vw, 10rem); }

/* Programme plus gai : cartes posées de biais qui rebondissent, grand
   chiffre du jour en filigrane, compte des jours, horaires qui glissent
   en place et étincelles autour du grand jour */
.evenement__carte { background: linear-gradient(165deg, var(--ivoire), var(--creme)); }
.evenement__carte[data-jour]::after {
  content: attr(data-jour);
  position: absolute; right: .9rem; top: .1rem;
  font-family: var(--police-titres); font-style: italic; font-weight: 500;
  font-size: 4.4rem; line-height: 1;
  color: var(--terracotta); opacity: .1;
  pointer-events: none;
}
.evenement--principal .evenement__carte[data-jour]::after { color: var(--ivoire); opacity: .18; }
.evenement__dans {
  display: inline-block; margin: .7rem 0 -.2rem;
  padding: .22rem .7rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta-fonce);
  background: rgba(230, 200, 147, .45);
  border-radius: 999px;
}
.evenement--principal .evenement__dans { color: var(--terracotta-fonce); background: var(--or-clair); margin-left: .4rem; }
.evenement:nth-child(odd) .evenement__carte { rotate: -.9deg; }
.evenement:nth-child(even) .evenement__carte { rotate: .9deg; }
.evenement--principal .evenement__carte { rotate: 0deg; }
.js .evenement.reveal .evenement__carte { scale: .94; transition: transform .6s var(--courbe), box-shadow .6s var(--courbe), scale 1s cubic-bezier(.34, 1.2, .64, 1) .1s; }
.js .evenement.reveal.est-visible .evenement__carte { scale: 1; }
/* étincelles dorées autour de l'icône du grand jour */
.evenement--principal .evenement__icone::before, .evenement--principal .evenement__icone::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--or-clair);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}
.evenement--principal .evenement__icone::before { left: -8px; top: -6px; }
.evenement--principal .evenement__icone::after { right: -7px; top: 26%; width: 9px; height: 9px; }
.evenement--principal.est-visible .evenement__icone::before { animation: scintiller 2.4s var(--courbe-douce) 1.1s 3 both; }
.evenement--principal.est-visible .evenement__icone::after { animation: scintiller 2.4s var(--courbe-douce) 2.3s 3 both; }
@keyframes scintiller { 0%, 100% { scale: .3; opacity: 0; rotate: 0deg; } 50% { scale: 1; opacity: 1; rotate: 90deg; } }
.evenement--principal .evenement__carte { background-size: 200% 200%; background-image: linear-gradient(160deg, var(--terracotta-clair), var(--terracotta) 45%, var(--terracotta-clair) 70%, var(--terracotta)); }

/* Lieux compacts : médaillon-carte rond + nom + petit lien d'itinéraire */
.lieux { gap: .9rem; }
.lieu-carte {
  flex-direction: row; align-items: center; gap: 1.1rem;
  padding: 1rem 1.2rem 1rem 1rem;
  border-radius: 999px 22px 22px 999px;
  text-align: left;
}
.lieu-carte__texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lieu-carte__numero { margin-bottom: 0; font-size: .9rem; }
.lieu-carte__nom { font-size: clamp(1.3rem, 5.6vw, 1.6rem); line-height: 1.2; }
.lieu-carte__precision { margin-top: .25rem; font-size: .62rem; }
.lieu-carte__medaillon {
  position: relative; flex: none;
  width: 92px; height: 92px; border-radius: 50%;
  overflow: hidden; isolation: isolate;
  background: rgba(251, 247, 240, .1);
  box-shadow: 0 0 0 3px var(--brun), 0 0 0 4px rgba(230, 200, 147, .6), 0 10px 22px rgba(0, 0, 0, .3);
  transition: scale .5s var(--courbe);
}
.lieu-carte__medaillon iframe {
  position: absolute; left: 50%; top: 50%;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border: 0; pointer-events: none;
  filter: sepia(.35) saturate(.85);
  scale: .62;
}
.lieu-carte__epingle {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 14px; height: 14px; margin: -14px 0 0 -7px;
  background: var(--terracotta);
  border: 2px solid var(--ivoire);
  border-radius: 50% 50% 50% 0; rotate: -45deg;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}
.lieu-carte__epingle::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: rgba(169, 80, 47, .45);
  opacity: 0;
}
.lieu-carte.est-visible .lieu-carte__epingle { animation: epingle-pose .9s var(--courbe) .55s both; }
.lieu-carte.est-visible .lieu-carte__epingle::after { animation: onde 2.2s var(--courbe) 1.3s 3 both; }
@keyframes epingle-pose { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes onde { from { scale: .2; opacity: 1; } to { scale: 1.6; opacity: 0; } }
.lieu-carte__itineraire {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .65rem;
  padding: .5rem 1rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brun); text-decoration: none;
  background: var(--or-clair);
  border-radius: 999px;
  transition: background-color .4s var(--courbe), scale .25s var(--courbe);
}
.lieu-carte__itineraire i { width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; transition: translate .4s var(--courbe); }
.lieu-carte__itineraire:active { scale: .95; }
@media (hover: hover) {
  .lieu-carte__itineraire:hover { background: var(--ivoire); }
  .lieu-carte__itineraire:hover i { translate: 3px 0; }
  .lieu-carte:hover .lieu-carte__medaillon { scale: 1.06; }
}
.lieu-carte__attente { margin-top: .4rem; font-size: .85rem; }

/* =====================================================================
   FORMULAIRE REPENSÉ : carte claire, champs en cases arrondies,
   tuiles Oui / Non, célébrations en cartes à cocher
   ===================================================================== */
.rsvp-form, .rsvp-merci {
  max-width: 32rem;
  padding: 2.4rem clamp(1.1rem, 5vw, 2.2rem) 2rem;
  background: rgba(251, 247, 240, .94) var(--grain);
  border: 1px solid rgba(194, 154, 98, .5);
  border-radius: 28px;
  box-shadow: 0 24px 50px rgba(59, 36, 24, .1), 0 2px 6px rgba(59, 36, 24, .05);
}
.rsvp-form::before, .rsvp-merci::before { inset: 8px; border-radius: 21px; border-color: rgba(194, 154, 98, .28); }
.rsvp-form { gap: 1.6rem; }
.rsvp-form > .rsvp-form__filet:not(:nth-child(2)), .rsvp-form__venue > .rsvp-form__filet { display: none; }
.rsvp-form__venue { gap: 1.6rem; }

.rsvp-form .champ { gap: .55rem; }
.rsvp-form .champ__label {
  font-family: var(--police-texte); font-style: normal; font-weight: 600;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta-fonce);
}
.rsvp-form .champ__label em { font-size: .66rem; letter-spacing: .04em; text-transform: none; font-weight: 500; }
.rsvp-form__ligne { grid-template-columns: 1fr 1fr; gap: .8rem; }
.rsvp-form .champ input, .rsvp-form .champ textarea {
  padding: .85rem 1rem;
  font-size: 1rem;
  background: var(--ivoire);
  border: 1px solid rgba(143, 106, 58, .3);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(59, 36, 24, .05);
}
.rsvp-form .champ input:focus, .rsvp-form .champ textarea:focus { border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(169, 80, 47, .12); }
.rsvp-form .champ input[aria-invalid="true"] { border-color: var(--terracotta-fonce); box-shadow: 0 0 0 3px rgba(142, 65, 39, .14); }

/* Présence : deux tuiles côte à côte */
.rsvp-form .choix--deux { grid-template-columns: 1fr 1fr; gap: .8rem; }
.rsvp-form .choix--deux .choix__texte {
  min-height: 0; height: 100%;
  align-items: center; text-align: center; gap: .55rem;
  padding: 1.1rem .7rem 1rem;
  border-radius: 18px;
  background: var(--ivoire);
  font-size: 1.02rem; line-height: 1.25;
}
.rsvp-form .choix--deux .choix__texte::before {
  position: static; margin: 0; flex: none;
  width: 26px; height: 24px;
  border: 0; border-radius: 0;
  background: var(--or);
  -webkit-mask: var(--forme-coeur) center / contain no-repeat;
          mask: var(--forme-coeur) center / contain no-repeat;
  box-shadow: none;
}
.rsvp-form .choix--deux .choix__option:nth-child(2) .choix__texte::before {
  -webkit-mask-image: var(--forme-petale); mask-image: var(--forme-petale);
  width: 18px;
}
.rsvp-form .choix--deux input:checked + .choix__texte {
  background: linear-gradient(160deg, var(--terracotta-clair), var(--terracotta));
  border-color: var(--terracotta); color: var(--ivoire);
  box-shadow: 0 12px 24px rgba(142, 65, 39, .25);
}
.rsvp-form .choix--deux input:checked + .choix__texte::before { background: var(--or-clair); box-shadow: none; }

/* Nombre de personnes : pastilles centrées */
.rsvp-form .choix--nombres { grid-template-columns: repeat(5, minmax(0, 54px)); justify-content: space-between; gap: .4rem; }
.rsvp-form .choix--nombres .choix__texte { background: var(--ivoire); }

/* Célébrations : cartes à cocher */
.rsvp-form .choix--liste { gap: .6rem; border-top: 0; }
.rsvp-form .choix--liste .choix__texte {
  padding: .85rem 1rem .85rem 3rem;
  background: var(--ivoire);
  border: 1px solid rgba(143, 106, 58, .3);
  border-radius: 14px;
}
.rsvp-form .choix--liste .choix__texte::before { left: 1rem; border-radius: 50%; }
.rsvp-form .choix--liste input:checked + .choix__texte::after { left: calc(1rem + 7px); }
.rsvp-form .choix--liste input:checked + .choix__texte { border-color: var(--terracotta); box-shadow: 0 8px 18px rgba(142, 65, 39, .1); }
@media (hover: hover) { .rsvp-form .choix--liste .choix__option:hover .choix__texte { background: var(--ivoire); border-color: var(--terracotta-clair); } }

.rsvp-form .champ textarea { min-height: 6rem; }
.rsvp-form__envoyer { max-width: none; margin-top: .2rem; }
@media (max-width: 340px) { .rsvp-form__ligne, .rsvp-form .choix--deux { grid-template-columns: 1fr; } }

/* Enveloppe ouverte : vrai papier et ombre portée.
   Fibres du papier, lumière qui vient du haut à gauche, liseré clair sur
   les bords, ombre de contact au sol et ombre douce plus large. */
:root {
  --papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .82 0 0 0 .12 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --lumiere-papier: linear-gradient(128deg, rgba(255, 222, 200, .2) 0%, rgba(255, 222, 200, .05) 38%, rgba(30, 8, 2, 0) 55%, rgba(30, 8, 2, .24) 100%);
}
.ouverte__enveloppe { isolation: isolate; }
.ouverte__enveloppe::before {          /* ombre au sol, sous l'enveloppe */
  content: ""; position: absolute; z-index: 0;
  left: 4%; right: 4%; bottom: -6%; height: 12%;
  background: radial-gradient(closest-side, rgba(45, 16, 6, .55), rgba(45, 16, 6, .2) 55%, transparent);
  filter: blur(7px);
  pointer-events: none;
}
.ouverte__dos {
  background:
    var(--lumiere-papier),
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 190, 150, .14), transparent 70%),
    var(--papier),
    var(--grain),
    linear-gradient(180deg, #6A2A18, #5A2214);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 190, .28),
    inset 0 0 0 1px rgba(40, 10, 4, .3),
    0 2px 3px rgba(40, 12, 4, .3),
    0 16px 28px -8px rgba(50, 20, 8, .5),
    0 46px 70px -24px rgba(50, 20, 8, .55);
}
.ouverte__rabat {
  background:
    linear-gradient(180deg, rgba(255, 210, 180, .2), rgba(255, 210, 180, 0) 40%, rgba(30, 8, 2, 0) 70%, rgba(30, 8, 2, .3)),
    linear-gradient(90deg, rgba(30, 8, 2, .12), transparent 30%, transparent 70%, rgba(30, 8, 2, .16)),
    var(--papier),
    var(--grain),
    linear-gradient(180deg, #8A3A22, #6E2B18);
}
.ouverte__devant { filter: drop-shadow(0 -2px 4px rgba(35, 10, 3, .38)); }
.ouverte__poche {
  background:
    var(--lumiere-papier),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(255, 190, 150, .16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 60%, rgba(255, 190, 150, .12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 60%, rgba(255, 190, 150, .1), transparent 70%),
    var(--papier),
    var(--grain),
    linear-gradient(180deg, #9A4428, #7A311D);
}

/* Lumière qui suit la souris (ordinateur) */
@media (hover: hover) and (pointer: fine) {
  .ambiance::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -40%), var(--lumiere), transparent 65%);
    opacity: 0; transition: opacity .8s var(--courbe);
  }
  .sous-souris > .ambiance::after { opacity: 1; }
}

/* Économie d'énergie : tout s'arrête quand la section est hors de l'écran */
.en-veille > .ambiance *, .en-veille > .paillettes i { animation-play-state: paused !important; }

/* Photos : profondeur et respiration */
.portrait .portrait__arche { translate: 0 calc(var(--p, 0) * -16px); }
.portrait--decale .portrait__arche { translate: 0 calc(var(--p, 0) * 16px); }
@keyframes photo-respire { from { scale: 1; } to { scale: 1.07; } }
.accueil.est-visible .accueil__photo img { animation: photo-respire 16s var(--courbe-douce) 7s infinite alternate; }

/* Liseré de lumière : il fait une seule fois le tour de la carte quand elle arrive */
@property --tour { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.lieu-carte, .compte__bloc, .contact, .evenement__carte { position: relative; }
.lieu-carte::before, .compte__bloc::before, .contact::before, .evenement__carte::before {
  content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--tour), transparent 0 62%, var(--lisere, var(--or)) 80%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}
.lieu-carte::before, .compte__bloc::before, .evenement--principal .evenement__carte::before { --lisere: var(--or-clair); }
.lieu-carte.est-visible::before, .compte.est-visible .compte__bloc::before, .contact.est-visible::before, .evenement.est-visible .evenement__carte::before {
  animation: faire-le-tour 2.8s var(--courbe-douce) .7s 1 both;
}
.compte.est-visible .compte__bloc:nth-child(2)::before { animation-delay: .82s; }
.compte.est-visible .compte__bloc:nth-child(3)::before { animation-delay: .94s; }
.compte.est-visible .compte__bloc:nth-child(4)::before { animation-delay: 1.06s; }
@keyframes faire-le-tour { 0% { --tour: 0deg; opacity: 0; } 15%, 80% { opacity: .9; } 100% { --tour: 360deg; opacity: 0; } }


/* Programme : une perle de lumière descend le long du fil */
.programme::after {
  content: ""; position: absolute; z-index: 2;
  left: 34px; top: calc(40px + (100% - 80px) * var(--progression, 0));
  width: 9px; height: 9px; margin: -4.5px 0 0 -4px;
  border-radius: 50%;
  background: var(--or-clair);
  box-shadow: 0 0 0 3px rgba(230, 200, 147, .35), 0 0 16px 4px rgba(194, 154, 98, .55);
  opacity: var(--perle, 0);
  transition: opacity .6s var(--courbe);
}
@media (min-width: 560px) { .programme::after { left: 40px; } }

/* Pluie de pétales (ouverture de l'enveloppe, réponse envoyée) et éclats de cœurs */
.pluie { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.pluie i {
  position: absolute; left: var(--x); top: -8vh;
  width: var(--t); height: calc(var(--t) * 1.4);
  background: var(--c);
  -webkit-mask: var(--forme) center / contain no-repeat;
          mask: var(--forme) center / contain no-repeat;
  opacity: 0;
  animation: chute var(--d) cubic-bezier(.35, .1, .55, 1) var(--r) forwards;
}
@keyframes chute {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  8% { opacity: var(--o); }
  45% { translate: var(--dx) 50vh; }
  80% { opacity: var(--o); }
  100% { opacity: 0; translate: calc(var(--dx) * -.6) 116vh; rotate: var(--rt); }
}
.eclat { position: fixed; z-index: 96; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.eclat i {
  position: absolute; left: -7px; top: -6px;
  width: var(--t); height: calc(var(--t) * .92);
  background: var(--c);
  -webkit-mask: var(--forme-coeur) center / contain no-repeat;
          mask: var(--forme-coeur) center / contain no-repeat;
  animation: jaillir var(--d) cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes jaillir {
  0% { opacity: 0; translate: 0 0; scale: .2; }
  18% { opacity: 1; scale: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); scale: .7; rotate: var(--rt); }
}
.couple__et, .accueil__esperluette, .pied__monogramme { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* =====================================================================
   CHORÉGRAPHIE
   Ouverture de l'enveloppe, sortie de la carte, passage vers l'accueil,
   révélations au défilement et visionneuse de la galerie. Mouvements
   lents et coordonnés, en transform et opacity autant que possible ;
   chaque animation ne se joue qu'une fois, à l'arrivée de l'élément.
   ===================================================================== */

/* -- 1. Enveloppe fermée : elle s'installe, puis attend qu'on l'ouvre -- */
.js .ouverture__formule { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 1s var(--courbe) .25s, transform 1.2s var(--courbe) .25s; }
.js .ouverture__noms > * {
  transform: translate3d(0, 105%, 0);
  clip-path: inset(-.4em -.4em 105% -.4em);
  transition: transform 1.3s var(--courbe), clip-path 1.3s var(--courbe);
}
.js .ouverture__noms > :nth-child(1) { transition-delay: .45s; }
.js .ouverture__noms > :nth-child(2) { transition-delay: .62s; }
.js .ouverture__noms > :nth-child(3) { transition-delay: .79s; }
.js .sceau { opacity: 0; scale: 1.3; transition: opacity .8s var(--courbe) 1.15s, scale 1.1s var(--courbe) 1.15s; }
.ouverture.est-prete .ouverture__formule { opacity: 1; transform: none; }
.ouverture.est-prete .ouverture__noms > * { transform: none; clip-path: inset(-.4em -.4em -.4em -.4em); }
.ouverture.est-prete .sceau { opacity: 1; scale: 1; }
.js .ouverture__bouton { animation: apparaitre 1s var(--courbe) 1.9s both, respirer 2.6s var(--courbe-douce) 2.9s infinite; }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

/* le rabat se soulève à peine, comme une lettre qui attend */
@keyframes souffle { 0%, 100% { scale: 1 1; } 50% { scale: 1 1.025; } }
.rabat { transition: transform 1.3s cubic-bezier(.55, .05, .3, 1), scale .4s var(--courbe); }
.ouverture.est-prete:not(.etape-0) .rabat { animation: souffle 4.6s var(--courbe-douce) 2.2s infinite; }

/* au toucher : le sceau s'enfonce, se brise, le rabat se retourne
   (son revers passe dans l'ombre) et une lumière chaude s'échappe */
.ouverture.etape-0 .ouverture__textes { opacity: 0; transform: translateY(-14px); }
.ouverture.etape-0 .ouverture__bouton { opacity: 0; animation: none; pointer-events: none; }
.ouverture.etape-0:not(.etape-1) .sceau__moitie { animation: none; transform: scale(.92); transition: transform .2s var(--courbe); }
.ouverture__tissu::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 45% at 50% var(--pointe, 54vh), rgba(255, 224, 180, .55), rgba(255, 200, 150, .14) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 1.2s var(--courbe-douce);
}
.ouverture.etape-2 .ouverture__tissu::after { opacity: 1; }
.rabat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, rgba(30, 8, 2, .15), rgba(30, 8, 2, .55));
  opacity: 0;
  transition: opacity .9s var(--courbe-douce) .25s;
}
.ouverture.etape-2 .rabat::after { opacity: 1; }

/* -- 2. Enveloppe ouverte : la carte sort, son ombre grandit, puis son texte se révèle -- */
.js .ouverte .carte { filter: drop-shadow(0 4px 6px rgba(50, 20, 8, .16)); transition: transform 1.6s var(--courbe) .45s, filter 1.6s var(--courbe) .45s; }
.js .ouverte.est-revelee .carte { filter: drop-shadow(0 16px 22px rgba(50, 20, 8, .32)); }
.js .ouverte .carte__formule, .js .ouverte .carte__date { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 1s var(--courbe), transform 1.1s var(--courbe); }
.js .ouverte .carte__noms > * {
  transform: translate3d(0, 105%, 0);
  clip-path: inset(-.2em -.25em 105% -.25em);
  transition: transform 1.2s var(--courbe), clip-path 1.2s var(--courbe);
}
.js .ouverte .carte__orn { clip-path: inset(0 50% 0 50%); transition: clip-path 1.4s var(--courbe-douce); }
.js .ouverte.est-revelee .carte__formule { opacity: 1; transform: none; transition-delay: 1.35s; }
.js .ouverte.est-revelee .carte__noms > * { transform: none; clip-path: inset(-.2em -.25em -.35em -.25em); }
.js .ouverte.est-revelee .carte__noms > :nth-child(1) { transition-delay: 1.55s; }
.js .ouverte.est-revelee .carte__noms > :nth-child(2) { transition-delay: 1.72s; }
.js .ouverte.est-revelee .carte__noms > :nth-child(3) { transition-delay: 1.89s; }
.js .ouverte.est-revelee .carte__orn { clip-path: inset(0 0 0 0); transition-delay: 2.1s; }
.js .ouverte.est-revelee .carte__date { opacity: 1; transform: none; transition-delay: 2.3s; }
.js .ouverte .ouverte__sceau { transition: opacity .5s var(--courbe) 2.6s, transform .8s cubic-bezier(.34, 1.25, .64, 1) 2.6s; }
.js .ouverte .ouverte__suite { transition: opacity .9s var(--courbe) 3.1s; }

/* -- 3. « Découvrir l'invitation » : la scène avance vers l'invité,
        un voile brun passe avec le sceau, puis l'accueil apparaît -- */
.ouverte__scene { transition: transform 1s var(--courbe-douce), opacity .9s var(--courbe-douce); }
.ouverte.vers-accueil .ouverte__scene { transform: scale(1.12); opacity: .35; }
.rideau {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  background: radial-gradient(ellipse 120% 85% at 50% 45%, #4A2C1C 0%, var(--brun) 55%, #24150D 100%);
  opacity: 0;
  transition: opacity 1.1s var(--courbe-douce);
}
.rideau::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 84px; height: 95px; margin: -48px 0 0 -42px;
  background: url("decor/cachet.webp") center / contain no-repeat;
  opacity: 0; scale: .9;
  transition: opacity .5s var(--courbe) .15s, scale 1.2s var(--courbe);
}
.rideau.est-ferme { opacity: 1; pointer-events: auto; transition-duration: .8s; }
.rideau.est-ferme::after { opacity: .95; scale: 1; }
.accueil:focus { outline: none; }

/* -- 4. Accueil : la photo apparaît en fondu et se rapproche lentement,
        les prénoms montent de derrière un masque -- */
.js .accueil__photo img { opacity: 0; transform: scale(1.12); transition: transform 7s var(--courbe), opacity 1.8s var(--courbe); }
.accueil.est-visible .accueil__photo img { opacity: 1; }
.js .accueil__noms.reveal { opacity: 1; transform: none; }
.js .accueil__noms > span {
  transform: translate3d(0, 105%, 0);
  clip-path: inset(-.4em -.4em 105% -.4em);
  transition: transform 1.4s var(--courbe), clip-path 1.4s var(--courbe);
}
.js .accueil__noms.est-visible > span { transform: none; clip-path: inset(-.4em -.4em -.4em -.4em); }
.js .accueil__noms.est-visible > span:nth-child(1) { transition-delay: .7s; }
.js .accueil__noms.est-visible > span:nth-child(2) { transition-delay: .9s; }
.js .accueil__noms.est-visible > span:nth-child(3) { transition-delay: 1.1s; }

/* -- 5. Programme : les horaires glissent en place après la carte -- */
.js .evenement.reveal .evenement__heure, .js .evenement.reveal .evenement__dans {
  opacity: 0; transform: translate3d(-14px, 0, 0);
  transition: opacity .8s var(--courbe), transform .9s var(--courbe);
}
.js .evenement.reveal.est-visible .evenement__dans { opacity: 1; transform: none; transition-delay: .45s; }
.js .evenement.reveal.est-visible .evenement__heure { opacity: 1; transform: none; transition-delay: .6s; }

/* -- 6. Lieux : le bouton d'itinéraire reçoit un reflet, sa flèche invite à toucher -- */
.lieu-carte__itineraire { position: relative; overflow: hidden; isolation: isolate; }
.lieu-carte__itineraire::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-120%);
}
.lieu-carte.est-visible .lieu-carte__itineraire::after { animation: reflet-unique 1.3s var(--courbe-douce) 1.5s 1 both; }
.lieu-carte.est-visible .lieu-carte__itineraire i { animation: pousser 1s var(--courbe-douce) 2.1s 2; }
@keyframes reflet-unique { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes pousser { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* -- 7. Tenue : chaque couleur arrive à son tour, son anneau s'illumine une fois -- */
.js .pastilles.reveal { opacity: 1; transform: none; }
.js .pastilles.reveal .pastille {
  opacity: 0; transform: translate3d(0, 16px, 0) scale(.9);
  transition: opacity .9s var(--courbe), transform 1.1s var(--courbe);
  transition-delay: calc(var(--ordre, 0) * .18s + .15s);
}
.js .pastilles.reveal.est-visible .pastille { opacity: 1; transform: none; }
.pastilles.est-visible .pastille__rond { animation: lueur 2.6s var(--courbe-douce) calc(var(--ordre, 0) * .18s + .8s) 1; }

/* -- 8. Réponse envoyée : le message de remerciement apparaît en douceur -- */
.rsvp-merci:not([hidden]) { animation: rsvp-apparait .8s var(--courbe) both; }

/* -- 9. Galerie : on touche une photo pour l'agrandir -- */
.galerie__cadre { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.galerie__cadre:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }
.galerie__cadre::after {            /* petite loupe */
  content: ""; position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(251, 247, 240, .88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E4127' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  box-shadow: 0 4px 12px rgba(59, 36, 24, .18);
  opacity: 0; transform: scale(.8);
  transition: opacity .4s var(--courbe), transform .4s var(--courbe);
  pointer-events: none;
}
@media (hover: hover) {
  .galerie__cadre:hover::after, .galerie__cadre:focus-visible::after { opacity: 1; transform: none; }
  .galerie__cadre.est-visible:hover img { scale: 1.05; transition: scale .9s var(--courbe); }
}
@media (hover: none) { .galerie__cadre.est-visible::after { opacity: .92; transform: none; transition-delay: 1.4s; } }

/* Visionneuse : la photo s'agrandit depuis sa vignette, fond brun profond */
.visionneuse {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 4rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 5rem);
  touch-action: none; overscroll-behavior: contain;
}
.visionneuse__fond { position: absolute; inset: 0; background: rgba(24, 14, 9, .94); opacity: 0; transition: opacity .45s var(--courbe); }
.visionneuse.est-ouverte .visionneuse__fond { opacity: 1; }
.visionneuse__scene { position: relative; margin: 0; display: grid; place-items: center; min-width: 0; min-height: 0; }
.visionneuse__img {
  display: block; width: auto; height: auto;
  max-width: min(92vw, 1100px);
  max-height: calc(100vh - 10rem); max-height: calc(100svh - 10rem);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  will-change: transform;
}
.visionneuse__bouton {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(251, 247, 240, .35);
  background: rgba(251, 247, 240, .08);
  color: var(--ivoire);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s var(--courbe) .15s, background-color .3s var(--courbe), scale .2s var(--courbe);
  -webkit-tap-highlight-color: transparent;
}
.visionneuse.est-ouverte .visionneuse__bouton { opacity: 1; }
.visionneuse__bouton:active { scale: .92; }
.visionneuse__bouton:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
@media (hover: hover) { .visionneuse__bouton:hover { background: rgba(251, 247, 240, .2); } }
.visionneuse__bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.visionneuse__fermer { top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.visionneuse__prec, .visionneuse__suiv { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.visionneuse__prec { left: 1rem; }
.visionneuse__suiv { right: 1rem; }
@media (min-width: 760px) {
  .visionneuse__prec, .visionneuse__suiv { bottom: auto; top: 50%; margin-top: -24px; }
}
.visionneuse__compteur {
  position: absolute; z-index: 2; left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.9rem);
  translate: -50% 0;
  margin: 0;
  font-size: .7rem; font-weight: 600; letter-spacing: .22em;
  color: var(--sable);
  opacity: 0; transition: opacity .4s var(--courbe) .15s;
}
.visionneuse.est-ouverte .visionneuse__compteur { opacity: 1; }

/* =====================================================================
   MOUVEMENT RÉDUIT : tout s'affiche directement
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal, .mot, .js .chapitre .chapitre__numero, .js .chapitre .chapitre__corps, .js .chapitre .chapitre__lien {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .ornement::before, .js .ornement::after { transform: none !important; transition: none !important; }
  .js .portrait.reveal .portrait__arche { clip-path: none !important; transition: none !important; }
  .js .evenement__icone svg * { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .ouverte .ouverte__enveloppe, .js .ouverte .ouverte__bouquet, .js .ouverte .ouverte__suite, .js .ouverte .ouverte__sceau { opacity: 1 !important; transition: none !important; }
  .js .ouverte .carte, .js .ouverte .ouverte__bouquet, .js .ouverte .ouverte__enveloppe { transform: none !important; transition: none !important; }
  .js .ouverte .polaroid { transform: rotate(var(--rot)) !important; transition: none !important; }
  .js .ouverte .disque { transform: rotate(8deg) !important; transition: none !important; }
  .js .ouverte .ouverte__sceau { transform: translate(-50%, -50%) !important; }
  .accueil__photo, .accueil__photo img { transform: none !important; transition: none !important; }
  .galerie__cadre img { transform: none !important; }
  .js .ouverture { transition: opacity .3s linear, visibility 0s linear .3s; }
  .ouverture.etape-3 .ouverture__tissu { transform: none; }
  .js .reveal, .mot { filter: none !important; }
  .js .galerie__cadre.reveal { clip-path: none !important; }
  .js .galerie__cadre.reveal img, .js .evenement.reveal .evenement__icone { scale: 1 !important; transition: none !important; }
  .js .galerie__cadre.reveal img { clip-path: none !important; }
  .js .compte.reveal .compte__bloc { opacity: 1 !important; translate: none !important; }
  .programme::before { transform: none !important; }
  .ornement { background-size: 11px 11px !important; }
  .paillettes, .progression-lecture { display: none !important; }
  .ouverte .carte, .ouverte .polaroid, .ouverte__bouquet, .ouverte__sceau img, .accueil__esperluette, .couple__et,
  .citation__guillemet, .rsvp__monogramme span, .pastille, .feston, .bouton--plein::after, .compte__nombre { animation: none !important; }
  .ambiance, .fond-continu, .pluie, .eclat, .programme::after,
  .lieu-carte::before, .compte__bloc::before, .contact::before, .evenement__carte::before { display: none !important; }
  .portrait .portrait__arche { translate: none !important; }
  .js #maries::before, .js #histoire::before, .js #galerie::before, .js #programme::before, .js #tenue::before { transform: none !important; }
  .chapitre__numero { animation: none !important; }
  .accueil__photo img, .chapitre__photo img, .compte__bloc, .evenement__icone svg { animation: none !important; }
  .js .mot, .js .accueil__noms > span, .js .ouverture__noms > *, .js .ouverte .carte__noms > *, .js .ouverte .carte__orn,
  .js .ouverture__formule, .js .ouverte .carte__formule, .js .ouverte .carte__date,
  .js .pastilles.reveal .pastille, .js .evenement.reveal .evenement__heure, .js .evenement.reveal .evenement__dans {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .js .sceau { opacity: 1 !important; scale: 1 !important; transition: none !important; }
  .js .ouverture__bouton { animation: none !important; opacity: 1; }
  .js .accueil__photo img { opacity: 1 !important; }
  .js .ouverte .carte { filter: drop-shadow(0 12px 16px rgba(50, 20, 8, .3)) !important; }
  .rideau, .ouverture__tissu::after, .rabat::after, .chapitre__numero::after { display: none !important; }
  .rabat, .lieu-carte__epingle, .lieu-carte__epingle::after, .lieu-carte__itineraire::after, .lieu-carte__itineraire i { animation: none !important; }
  .galerie__cadre::after, .visionneuse__fond, .visionneuse__bouton, .visionneuse__compteur { transition: none !important; }
}