/* Rendu du carton d'invitation InviteTo (créateur en ligne + carton final).
   Les couleurs viennent du décor choisi (variables --carte, --encre, --accent),
   les polices de l'écriture choisie (--police-titre, --police-texte). */
@font-face{font-family:"Great Vibes";src:url("/fonts/GreatVibes-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Parisienne";src:url("/fonts/Parisienne-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Cormorant";src:url("/fonts/Cormorant-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/fonts/Cormorant-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/fonts/Cormorant-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/fonts/Playfair-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/fonts/Playfair-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/Outfit-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("/fonts/Outfit-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url("/fonts/PinyonScript-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Allura";src:url("/fonts/Allura-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alex Brush";src:url("/fonts/AlexBrush-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Italianno";src:url("/fonts/Italianno-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tangerine";src:url("/fonts/Tangerine-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Dancing Script";src:url("/fonts/DancingScript-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Petit Formal Script";src:url("/fonts/PetitFormalScript-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mrs Saint Delafield";src:url("/fonts/MrsSaintDelafield-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url("/fonts/Cinzel-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/fonts/BodoniModa-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/fonts/BodoniModa-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/EBGaramond-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/EBGaramond-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("/fonts/LibreBaskerville-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("/fonts/LibreBaskerville-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Marcellus";src:url("/fonts/Marcellus-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/Montserrat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/Montserrat-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url("/fonts/JosefinSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url("/fonts/JosefinSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.carton-rendu{
  --carte:#FFFDF8;--encre:#2B2433;--accent:#B08D57;
  --police-titre:"Great Vibes",cursive;--police-texte:"Cormorant",Georgia,serif;
  --taille-titre:58px;--titre-style:normal;--titre-casse:none;--titre-espace:0;
  position:relative;width:100%;max-width:440px;aspect-ratio:5/7;margin:0 auto;overflow:hidden;
  background:var(--carte);color:var(--encre);font-family:var(--police-texte);
  border-radius:4px;box-shadow:0 30px 60px -28px rgba(13,15,28,.55),0 2px 6px rgba(13,15,28,.08);
  container-type:inline-size;transition:background .5s ease,color .5s ease}
.cr-cadre{position:absolute;inset:4.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8% 7%;gap:0}
.cadre-double .cr-cadre{box-shadow:inset 0 0 0 1px var(--accent),inset 0 0 0 5px var(--carte-uni,#fff),inset 0 0 0 6px color-mix(in srgb,var(--accent) 60%,transparent)}
.cadre-simple .cr-cadre{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--encre) 70%,transparent)}
.cadre-deco .cr-cadre{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cadre-deco .cr-cadre::before,.cadre-deco .cr-cadre::after{content:"";position:absolute;width:16%;aspect-ratio:1;border:1.5px solid var(--accent)}
.cadre-deco .cr-cadre::before{top:2.5%;left:2.5%;border-right:0;border-bottom:0}
.cadre-deco .cr-cadre::after{bottom:2.5%;right:2.5%;border-left:0;border-top:0}
.cr-ornement{position:absolute;inset:0;pointer-events:none;color:var(--accent)}
.cr-ornement svg{position:absolute;width:100%;height:100%;left:0;top:0}
.cr-contenu{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.cr-logo{width:calc(42cqw * var(--e,1));height:calc(15cqw * var(--e,1));margin-bottom:calc(3.5cqw * var(--e,1));flex:none}
.cr-logo.logo-origine{object-fit:contain;max-width:none}
.logo-teinte{background:var(--accent);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.cr-photo{width:calc(34cqw * var(--e,1));height:calc(34cqw * var(--e,1));object-fit:cover;border-radius:50%;margin-bottom:calc(3.5cqw * var(--e,1));box-shadow:0 0 0 2px var(--carte),0 0 0 3px var(--accent)}
.cr-mono{width:calc(17cqw * var(--e,1));height:calc(17cqw * var(--e,1));color:var(--accent);margin-bottom:calc(3.5cqw * var(--e,1));flex:none}
.mono-svg{display:block;width:100%;height:100%;overflow:visible}
.mono-svg text{font-family:"Cormorant",Georgia,serif;font-weight:600;letter-spacing:.02em}
.mono-svg .mono-et{font-family:"Great Vibes",cursive;font-weight:400;font-size:.8em}
.cr-familles{font-size:calc(3.5cqw * var(--e,1));line-height:1.45;margin:0 0 calc(2.4cqw * var(--e,1));letter-spacing:.02em}
.cr-familles span{display:block}
.cr-surtitre{font-size:calc(3.4cqw * var(--e,1));font-style:italic;margin:0 0 calc(1.5cqw * var(--e,1));line-height:1.4}
.cr-titre{font-family:var(--police-titre);font-size:calc(min(calc(var(--taille-titre) * var(--e,1)),calc(13cqw * var(--e,1))) * var(--et,1));font-weight:var(--titre-poids,400);font-style:var(--titre-style);text-transform:var(--titre-casse);letter-spacing:var(--titre-espace);line-height:1.08;color:var(--accent);margin:0;overflow-wrap:normal;word-break:normal;max-width:100%}
.cr-secondaire{font-size:calc(5.4cqw * var(--e,1));color:var(--accent);margin:calc(1cqw * var(--e,1)) 0 0;line-height:1.2}
.cr-filet{display:block;width:calc(16cqw * var(--e,1));height:1px;background:var(--accent);margin:calc(3.6cqw * var(--e,1)) auto}
.cr-date{font-size:calc(3.5cqw * var(--e,1));font-weight:600;text-transform:uppercase;letter-spacing:.22em;margin:0;line-height:1.5}
.cr-lieu{font-size:calc(3.9cqw * var(--e,1));font-style:italic;margin:calc(1.2cqw * var(--e,1)) 0 0;line-height:1.35}
.cr-adresse{font-size:calc(3cqw * var(--e,1));opacity:.8;margin:.calc(6cqw * var(--e,1)) 0 0;line-height:1.35}
.cr-message{font-size:calc(3.5cqw * var(--e,1));line-height:1.5;margin:calc(3.4cqw * var(--e,1)) 0 0;max-width:92%}
.cr-citation{font-size:calc(3.2cqw * var(--e,1));font-style:italic;color:var(--accent);margin:calc(2.6cqw * var(--e,1)) 0 0;max-width:90%;line-height:1.45}
.cr-rsvp{font-size:calc(2.8cqw * var(--e,1));text-transform:uppercase;letter-spacing:.18em;margin:calc(3.4cqw * var(--e,1)) 0 0;opacity:.85}
.cr-vide{opacity:.35}

/* ===================== Ouvertures animées ===================== */
.ouverture{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;cursor:pointer;background:var(--papier);
  transition:opacity .8s ease,transform .8s ease;-webkit-tap-highlight-color:transparent;perspective:1200px;
  clip-path:inset(0)}   /* Safari ne coupe pas les pièces en 3D (rabat, portes) avec overflow:hidden seul */
.ouverture.disparait{opacity:0;transform:scale(1.04)}
.ouverture:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.ouverture>span,.ouverture>i{pointer-events:none}
.ouv-texte{position:absolute;left:0;right:0;bottom:7%;margin:0;text-align:center;font-family:"Great Vibes",cursive;font-size:30px;color:var(--accent);
  text-shadow:0 1px 8px rgba(0,0,0,.25);z-index:12;transition:opacity .4s}
.ouverture.ouvre .ouv-texte{opacity:0;animation:none}
@media (prefers-reduced-motion:no-preference){.ouv-texte{animation:respire-txt 2.6s ease-in-out infinite}}
@keyframes respire-txt{50%{opacity:.55}}

/* La carte, qui attend derrière le décor puis apparaît */
.ouv-carte{position:absolute;left:50%;top:50%;width:min(74%,330px);z-index:1;opacity:0;transform:translate(-50%,-50%) scale(.86);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s ease;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.ouv-carte .carton-rendu{width:100%}
.ouvre .ouv-carte{opacity:1;transform:translate(-50%,-50%) scale(.94);transition-delay:var(--apparition,.5s)}
.carte-visible .ouv-carte{opacity:1;z-index:9;transform:translate(-50%,-50%) scale(1)}

/* ===== Ouvertures réalistes (29/10) : vraies matières photographiées (site/ouverture/, Pixabay, docs/photos-licences.md)
   teintées aux couleurs du décor : papier, cire, velours et voile sont en niveaux de gris, colorés par « multiply » ou « overlay ». ===== */
.ouverture video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Cachet de cire véritable, teinté à la couleur du décor, initiales imprimées dans la cire */
.sceau-cire{position:absolute;z-index:6;display:block;width:var(--taille,96px);aspect-ratio:1;transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.4)) drop-shadow(0 1px 1px rgba(0,0,0,.3));transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .6s ease}
.cire{position:absolute;inset:0;display:grid;place-items:center;background:var(--cachet);isolation:isolate;
  -webkit-mask:url("/ouverture/cachet.png") center/contain no-repeat;mask:url("/ouverture/cachet.png") center/contain no-repeat;
  color:color-mix(in srgb,var(--cachet) 52%,#000)}
.cire::before{content:"";position:absolute;inset:0;background:url("/ouverture/cachet.png") center/contain no-repeat;mix-blend-mode:overlay;z-index:-1}
.cire .mono-svg{width:52%;height:52%;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--cachet) 55%,#fff)) drop-shadow(0 -1px 0 rgba(0,0,0,.35))}
.cire .sceau-logo{width:50%;height:50%}
.cire .logo-teinte{background:currentColor}
.ouvre .sceau-cire{transform:translate(-50%,-50%) scale(1.18) rotate(-6deg);opacity:0}

/* ---------- Enveloppe scellée (papier texturé, rabat qui s'ouvre, cachet de cire) ---------- */
.ouv-enveloppe{background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--papier) 45%,#fff),color-mix(in srgb,var(--papier) 70%,#000) 120%);--apparition:0s}
.env{position:absolute;left:8%;width:84%;aspect-ratio:1/1.45;top:50%;margin-top:-60.9%}
.env>span:not(.sceau-cire){position:absolute;inset:0;background:var(--papier) url("/ouverture/papier.jpg") center/cover;background-blend-mode:multiply}
.env-dos{z-index:1;filter:brightness(.78);border-radius:3px}
.env-poche{z-index:3;clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.08)}
.env-poche::before,.env-poche::after{content:"";position:absolute;inset:0}
.env-poche::before{background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,0) 30%);clip-path:polygon(0 0,50% 40%,100% 0,100% 6%,50% 46%,0 6%)}
.env-poche::after{background:linear-gradient(to top right,transparent 49.6%,rgba(0,0,0,.13) 50%,transparent 51.2%),linear-gradient(to top left,transparent 49.6%,rgba(0,0,0,.13) 50%,transparent 51.2%),
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.06))}
.env-rabat{z-index:5;height:62%;bottom:auto!important;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;
  box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.env-rabat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.12))}
.env .sceau-cire{left:50%;top:58%;--taille:26%}
.ouv-enveloppe .ouv-carte{width:76%;transition:none}
/* .env n'est jamais transformé lui-même : ainsi la carte peut passer entre le fond et la poche de l'enveloppe */
.ouv-enveloppe.ouvre .env-rabat{animation:o-rabat 1s cubic-bezier(.5,0,.3,1) .35s both,o-env-part 1s ease-in 2.3s forwards}
.ouv-enveloppe.ouvre .ouv-carte{animation:o-env-carte 2s cubic-bezier(.45,0,.2,1) 1.1s both}
.ouv-enveloppe.ouvre .env-dos,.ouv-enveloppe.ouvre .env-poche{animation:o-env-part 1s ease-in 2.3s forwards}
@keyframes o-rabat{0%{transform:rotateX(0);z-index:5}49%{filter:none;z-index:5}50%{filter:brightness(.72);z-index:1}100%{transform:rotateX(180deg);filter:brightness(.72);z-index:1}}
@keyframes o-env-carte{0%{opacity:1;z-index:2;transform:translate(-50%,-44%) scale(.94)}45%{opacity:1;z-index:2;transform:translate(-50%,-112%) scale(.94)}46%{z-index:9}
  100%{opacity:1;z-index:9;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes o-env-part{to{opacity:0;transform:translateY(30%)}}

/* ---------- Rideau de velours (vrai velours teinté, lambrequin à franges dorées) ---------- */
.ouv-rideau{background:#0B0708;--apparition:1s}
.rid-scene{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--accent) 40%,#fff) 0,color-mix(in srgb,var(--accent) 16%,#1a1012) 38%,#070405 78%)}
.rid-pan{position:absolute;top:0;bottom:0;width:53%;z-index:3;background:var(--velours,#7A1426) url("/ouverture/velours.jpg") center/auto 100% repeat-x;background-blend-mode:multiply;
  box-shadow:inset 0 -80px 90px -40px rgba(0,0,0,.65),inset 0 60px 60px -40px rgba(0,0,0,.5)}
.rid-g{left:0;transform-origin:0 0;background-position:20% 0}
.rid-d{right:0;transform-origin:100% 0;background-position:75% 0}
.rid-g::after,.rid-d::after{content:"";position:absolute;top:0;bottom:0;width:18%;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent)}
.rid-g::after{right:0;transform:scaleX(-1)}.rid-d::after{left:0}
.rid-haut{position:absolute;left:-2%;right:-2%;top:0;height:13%;z-index:5;background:var(--velours,#7A1426) url("/ouverture/velours.jpg") center/auto 300%;background-blend-mode:multiply;
  box-shadow:0 10px 18px rgba(0,0,0,.55)}
.rid-haut::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:12px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 80%,#fff) 0 2px,color-mix(in srgb,var(--accent) 70%,#000) 2px 4px);
  -webkit-mask:linear-gradient(#000,rgba(0,0,0,.6));mask:linear-gradient(#000,rgba(0,0,0,.6))}
.rid-mono{position:absolute;z-index:6;left:50%;top:6.5%;width:54px;height:54px;transform:translate(-50%,-50%);color:var(--accent);display:grid;place-items:center;transition:opacity .5s}
.rid-mono .mono-svg{width:100%;height:100%}
.ouvre .rid-mono{opacity:0}
@media (prefers-reduced-motion:no-preference){.ouv-rideau:not(.ouvre) .rid-pan{animation:o-respire 5s ease-in-out infinite}}
.ouv-rideau.ouvre .rid-g{animation:o-rid-g 2.2s cubic-bezier(.55,0,.25,1) .1s both}
.ouv-rideau.ouvre .rid-d{animation:o-rid-d 2.2s cubic-bezier(.55,0,.25,1) .1s both}
@keyframes o-respire{50%{filter:brightness(1.06)}}
@keyframes o-rid-g{0%{transform:none}35%{transform:skewY(1.5deg) scaleX(.9)}100%{transform:translateX(-6%) scaleX(.26) skewY(4deg)}}
@keyframes o-rid-d{0%{transform:none}35%{transform:skewY(-1.5deg) scaleX(.9)}100%{transform:translateX(6%) scaleX(.26) skewY(-4deg)}}

/* ---------- Champagne (vraie bouteille, bouchon qui saute, pluie de paillettes filmée) ---------- */
.ouv-champagne{background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--accent) 35%,#2a2118),#0c0907 75%);--apparition:1.9s}
.ch-video{z-index:7;opacity:0;mix-blend-mode:screen;transition:opacity .6s .7s}
.ouvre .ch-video{opacity:1}
.ch-bouteille{position:absolute;z-index:4;left:50%;top:52%;height:68%;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 22px rgba(0,0,0,.6))}
.ch-bouteille img{height:100%;width:auto;display:block}
.ch-bouchon{position:absolute;z-index:5;left:50%;top:19%;width:4.5%;aspect-ratio:1/1.3;transform:translate(-50%,-50%);border-radius:45% 45% 25% 25%;opacity:0;
  background:radial-gradient(circle at 35% 30%,#E9D3A6,#A5814D 70%)}
.ch-mono{position:absolute;z-index:6;left:50%;top:9%;width:60px;height:60px;transform:translateX(-50%);color:var(--accent);transition:opacity .5s}
.ch-mono .mono-svg{width:100%;height:100%}
.ouvre .ch-mono{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ouv-champagne:not(.ouvre) .ch-bouteille{animation:o-balance 3.4s ease-in-out infinite}
  .ouv-champagne.ouvre .ch-bouteille{animation:o-secoue .45s ease-in-out 2,o-descend 1s ease-in 1.1s forwards}
  .ouv-champagne.ouvre .ch-bouchon{animation:o-bouchon 1.1s cubic-bezier(.2,.7,.3,1) .85s both}
}
.ouv-champagne.ouvre .ch-bouteille{opacity:0;transition:opacity .5s 1.6s}
@keyframes o-balance{50%{transform:translate(-50%,-50%) rotate(2.5deg)}}
@keyframes o-secoue{25%{transform:translate(-50%,-50%) rotate(-6deg)}75%{transform:translate(-50%,-50%) rotate(6deg)}}
@keyframes o-descend{to{transform:translate(-50%,10%)}}
@keyframes o-bouchon{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-20%,-1100%) rotate(620deg)}}

/* ---------- Cœur : bouquet de ballons qui s'envole ---------- */
.ouv-coeur{background:linear-gradient(180deg,color-mix(in srgb,var(--papier) 35%,#fff),color-mix(in srgb,var(--papier) 80%,#fff));--apparition:1s}
.co-ballons{position:absolute;z-index:4;left:50%;top:48%;width:62%;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 18px rgba(0,0,0,.25))}
.co-ballons img{width:100%;height:auto;display:block}
.co-mono{position:absolute;z-index:5;left:50%;top:82%;width:70px;height:70px;transform:translate(-50%,-50%);color:var(--accent);transition:opacity .5s}
.co-mono .mono-svg{width:100%;height:100%}
.ouvre .co-mono{opacity:0}
@media (prefers-reduced-motion:no-preference){.ouv-coeur:not(.ouvre) .co-ballons{animation:o-ballons 3s ease-in-out infinite}}
.ouv-coeur.ouvre .co-ballons{transition:transform 2s cubic-bezier(.5,0,.6,1),opacity 1s 1s;transform:translate(-40%,-190%) rotate(-6deg);opacity:0}
@keyframes o-ballons{50%{transform:translate(-50%,-53%) rotate(1.5deg)}}

/* ---------- Grandes portes (vraie porte en bois sculpté, cachet de cire sur la jointure) ---------- */
.ouv-portes{background:#120c08;--apparition:.9s}
.portes-lumiere{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#fff8e6,color-mix(in srgb,var(--accent) 45%,#fff) 35%,#3a2a1a 80%)}
.porte{position:absolute;top:0;bottom:0;width:50%;z-index:3;background:url("/ouverture/porte.jpg") 0 50%/200% 100% no-repeat;transition:transform 1.8s cubic-bezier(.55,0,.25,1) .2s}
.porte-g{left:0;transform-origin:left center}
.porte-d{right:0;transform-origin:right center;background-position:100% 50%}
.porte::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.35));transition:background 1.8s .2s}
.ouvre .porte-g{transform:perspective(1100px) rotateY(-108deg)}
.ouvre .porte-d{transform:perspective(1100px) rotateY(108deg)}
.ouvre .porte::after{background:rgba(0,0,0,.6)}
.ouv-portes .sceau-cire{left:50%;top:44%;--taille:22%}

/* ---------- Voile (vrai voilage de soie, qui s'écarte en ondulant) ---------- */
.ouv-voile{background:radial-gradient(ellipse at 50% 45%,#fff,color-mix(in srgb,var(--papier) 70%,#fff));--apparition:.7s}
.voile{position:absolute;top:0;bottom:0;width:56%;z-index:3;opacity:.94;
  background:color-mix(in srgb,var(--papier) 35%,#fff) url("/ouverture/voile.jpg") center/cover;background-blend-mode:multiply;
  box-shadow:0 0 40px rgba(0,0,0,.12)}
.voile-g{left:0;transform-origin:0 0}
.voile-d{right:0;transform-origin:100% 0;transform:scaleX(-1);background-position:30% 50%}
.voile-haut{position:absolute;left:0;right:0;top:0;height:3%;z-index:4;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,#000),var(--accent))}
.ouv-voile .portes-mono{position:absolute;z-index:5;left:50%;top:45%;width:96px;height:96px;transform:translate(-50%,-50%);color:var(--accent);transition:opacity .5s}
.ouv-voile .portes-mono .mono-svg{width:100%;height:100%}
.ouvre .portes-mono{opacity:0}
.ouv-voile.ouvre .voile-g{animation:o-voile-g 2s cubic-bezier(.5,0,.3,1) both}
.ouv-voile.ouvre .voile-d{animation:o-voile-d 2s cubic-bezier(.5,0,.3,1) both}
@keyframes o-voile-g{40%{transform:skewX(-3deg) scaleX(.85)}100%{transform:translateX(-12%) scaleX(.22) skewX(-6deg);opacity:.85}}
@keyframes o-voile-d{40%{transform:scaleX(-.85) skewX(3deg)}100%{transform:translateX(12%) scaleX(-.22) skewX(6deg);opacity:.85}}

/* ---------- Coffret (vrai paquet cadeau photographié : on entre dans le cadeau) ---------- */
.ouv-coffret{background:#2b1d14;--apparition:1.2s}
.cf-photo{position:absolute;inset:0;z-index:3;background:url("/ouverture/coffret.jpg") 52% 50%/cover;transform-origin:52% 50%;
  transition:transform 1.8s cubic-bezier(.6,0,.3,1),filter 1.8s,opacity .8s 1.1s}
.cf-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 52% 50%,transparent 30%,rgba(0,0,0,.45))}
.ouv-coffret .sceau-cire{left:52%;top:62%;--taille:18%}
.ouvre .cf-photo{transform:scale(3.2);filter:blur(4px) brightness(1.4);opacity:0}

/* ---------- Pluie de pétales (vrais pétales filmés) ---------- */
.ouv-petales{background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--cachet) 45%,#2a1418),#0d0607 80%);--apparition:1.2s}
.pe-video{z-index:10;opacity:0;mix-blend-mode:screen;transition:opacity .5s}
.ouvre .pe-video{opacity:1}
.ouv-petales .sceau-cire{left:50%;top:44%;--taille:30%}

/* ---------- Feu d'artifice (vrai feu d'artifice filmé) ---------- */
.ouv-artifice{background:#05060E;--apparition:2.4s}
.ar-video{z-index:0;opacity:.35;transition:opacity .4s}
.ouvre .ar-video{opacity:1}
.ar-mono{position:absolute;z-index:4;left:50%;top:44%;width:120px;height:120px;transform:translate(-50%,-50%);color:var(--accent);display:grid;place-items:center;transition:opacity .6s}
.ar-mono .mono-svg{width:100%;height:100%}
.ouvre .ar-mono{opacity:0}

/* ---------- Médaillon (grand sceau de cire doré, paillettes filmées) ---------- */
.ouv-medaillon{background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--papier) 55%,#3a2c1a),#100c08 85%);--apparition:1s}
.ouv-medaillon .sceau-cire{left:50%;top:45%;--taille:46%;--cachet:#B8913E}
.ouv-medaillon.ouvre .sceau-cire{transform:translate(-50%,-50%) scale(2.6);opacity:0;transition:transform 1.2s cubic-bezier(.5,0,.3,1),opacity .9s .3s}
.med-video{z-index:7;opacity:0;mix-blend-mode:screen;transition:opacity .6s .2s}
.ouvre .med-video{opacity:1}

/* ===================== Page complète ===================== */
.page-invit{background:color-mix(in srgb,var(--papier) 35%,#FBF8F3);color:#2B2433;padding:18px 16px 28px;font-family:var(--police-texte,"Cormorant"),serif}
.pi-carton .carton-rendu{max-width:100%}
.pi-sep{display:flex;align-items:center;gap:12px;margin:22px 8px 16px;color:var(--accent)}
.pi-sep::before,.pi-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.pi-sep span{font-family:var(--police-titre,"Great Vibes"),cursive;font-size:22px;line-height:1}
.pi-compte{display:flex;justify-content:center;gap:10px;margin:4px 0 0}
.pi-case{display:flex;flex-direction:column;align-items:center;min-width:62px;padding:10px 6px 8px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:4px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pi-case b{font-family:"Cormorant",Georgia,serif;font-size:32px;font-weight:400;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.pi-case small{margin-top:5px;font:600 10px "Outfit",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B6670}
.pi-compte-legende{text-align:center;margin:10px 0 0;font-style:italic;color:#6B6670}
.pi-bloc{text-align:center;padding:0 6px}
.pi-titre{font-family:var(--police-titre,"Great Vibes"),cursive;font-weight:400;font-size:32px;color:var(--accent);margin:0 0 8px;line-height:1.1}
.pi-fort{font-weight:600;font-size:19px;margin:0}
.pi-doux{opacity:.75;margin:2px 0 0;font-size:15px}
.pi-texte{margin:0 auto;max-width:34ch;font-size:17px;line-height:1.5;white-space:pre-line}
.pi-programme{list-style:none;padding:0;margin:0 auto;max-width:300px;text-align:left}
.pi-programme li{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:16px}
.pi-programme b{color:var(--accent);font-weight:600}
.pi-bouton{display:inline-block;margin-top:12px;padding:10px 20px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-family:"Outfit",system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:2px}
.pi-bouton.plein{background:var(--accent);color:#fff}
.pi-choix{display:flex;flex-direction:column;gap:8px;align-items:center}
.pi-choix .pi-bouton{margin:0;width:100%;max-width:280px;text-align:center}
.pi-pied{text-align:center;font-family:"Outfit",system-ui,sans-serif;font-size:12px;opacity:.7;margin:26px 0 0;letter-spacing:.02em}
.pi-marque{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
/* Initiales / logo dans les sceaux et médaillons des ouvertures */
.sceau-logo{width:62%;height:62%}
/* Lignes courtes équilibrées : jamais un mot seul sur la dernière ligne */
.cr-rsvp,.cr-surtitre,.cr-date,.cr-lieu,.cr-adresse,.cr-citation,.pi-doux,.pi-texte{text-wrap:balance}
/* Décors à arche ou dais : pas de filet, le texte reste à l'intérieur du dessin */
/* Décors photo : vraie photo en haut de la carte, fondue dans le papier ; le texte est dessous, toujours lisible */
.carton-rendu.avec-photo{background:var(--panneau)}
.avec-photo .cr-ornement{inset:0 0 auto 0;height:47%;background:var(--photo) center 40%/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent)}
.carton-rendu.avec-photo .cr-cadre{inset:39% 5% 3.5%;padding:0 6% 4%;justify-content:center;box-shadow:none}
.avec-photo .cr-mono{background:var(--panneau);border-radius:50%;box-shadow:0 0 0 3px var(--panneau)}
.carton-rendu.avec-photo .cr-cadre::before,.carton-rendu.avec-photo .cr-cadre::after{display:none}
@container (max-width:280px){.avec-photo .cr-ornement{background-image:var(--photo-petite)}}
.pi-lieu-photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;margin:4px 0 14px;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}