/* ═══════════════════════════════════════════════════════════
   AVIDAN & MYRIAM — thème
   La mise en page commune est dans shared/css/cartes.css ;
   ici : couleurs (rose poudré dominant, bordeaux, jaune beurre), fontes,
   ouverture « porte du château », monogramme et illustrations.
   ═══════════════════════════════════════════════════════════ */
:root{
  --page:#F2D6D4; --card:#FFF9F3; --ink:#43171F; --mute:#8C636A;
  --accent:#7E1C30; --accent-2:#F3D98B; --on-accent:#FFF6E5;
  --rose:#E9B8BC; --beurre:#F6E3A6; --bordeaux-nuit:#2E0A12;
  --line:color-mix(in srgb, var(--accent) 32%, transparent);
  --f-script:'Pinyon Script',cursive; --f-titre:'Cormorant Garamond',serif; --f-texte:'Cormorant Garamond',serif;
  --f-mono:'Cormorant SC','Cormorant Garamond',serif;
  --radius:2px; --script-scale:.92; --titre-track:.24em;
  --intro-bg:#FBF4EE; --intro-ink:var(--accent);
}
body{
  background:
    radial-gradient(120% 45% at 50% 0%, #F9E6E3 0%, transparent 70%),
    radial-gradient(90% 40% at 50% 100%, #F6DFD3 0%, transparent 70%),
    var(--page);
  background-attachment:fixed;
}

/* ─── Le monogramme (vectorisé depuis le logo fourni) ─── */
.logo-am{ display:block; height:auto; overflow:visible; }
.logo-am--carte{ width:min(78%, 15rem); margin:0 auto .1rem; }
.anim .carte-in.reveal .logo-am--carte{ clip-path:inset(-10% 100% -10% -10%); }
.anim .carte-in.reveal.is-in .logo-am--carte{ clip-path:inset(-10% -10% -10% -10%); transition:clip-path 2.2s cubic-bezier(.65,.05,.35,1) .3s, opacity .6s .2s; }
.logo-am--dg{ width:16rem; margin:0 auto 1.4rem; }
.sep-orn{ font-size:.7rem; color:#C9A04E; }

/* ─── Cartes : papier crème, double filet bordeaux / or ─── */
.carte-in{ box-shadow:0 1px 2px rgba(74,15,26,.06), 0 22px 44px -28px rgba(126,28,48,.45); }
.carte-in::before, .carte-in::after{ content:''; position:absolute; pointer-events:none; z-index:0; }
.carte-in::before{ inset:10px; border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.carte-in::after{ inset:14px; border:1px solid color-mix(in srgb, #C9A04E 40%, transparent); }
.carte-titre{ font-weight:500; }
.noms{ color:var(--accent); }
.date .d-jour, .date .d-mois{ border-color:color-mix(in srgb, #C9A04E 55%, transparent); }
.filet-or{ display:flex; align-items:center; justify-content:center; gap:.8rem; width:min(13rem, 60%); margin:1.1rem auto .2rem; color:#C9A04E; }
.filet-or i{ flex:1; height:1px; background:linear-gradient(90deg, transparent, #C9A04E 50%, transparent); }
.filet-or span{ font-size:.6rem; }
.btn-send{ background:linear-gradient(135deg, #5A1220, var(--accent) 55%, #9B3045); }

/* Ce qui attend les vraies informations */
.a-confirmer{ font-style:italic; color:var(--mute) !important; }
.date--a-confirmer .d-num{ color:color-mix(in srgb, var(--accent) 45%, transparent); }
.date--a-confirmer .d-jour, .date--a-confirmer .d-mois{ color:var(--mute); }
.date--a-confirmer .d-an{ font-family:var(--f-texte); font-style:italic; text-transform:none; letter-spacing:.02em; color:var(--mute); }
.carte .heure, .carte .lieu, .carte .adresse{ color:var(--ink); }

/* ─── Illustrations : encre bordeaux et lavis rose / beurre ─── */
.carte-orn--illu{ width:calc(100% + 1rem); max-width:none; margin:-1.2rem -.5rem .6rem; }
.carte-orn--illu svg{ width:100%; height:auto; }
.illu-txt{ font-family:var(--f-titre); font-size:5.4px; letter-spacing:1.8px; fill:#7E1C30; }
.anim .anim-svg .illu-txt{ opacity:0; transition:opacity 1.2s ease 1.4s; }
.anim .anim-svg.joue .illu-txt{ opacity:1; }
/* le couple arrive après le décor, comme posé dessus */
.illu > use{ opacity:0; transform:translateY(4px); transition:opacity 1.2s var(--ease-out) 1.6s, transform 1.2s var(--ease-out) 1.6s; }
.anim-svg.joue > use, html:not(.anim) .illu > use{ opacity:1; transform:none; }
.illu > use{ transform-box:fill-box; }

/* ─── Pied ─── */
.pied-noms{ font-size:calc(2.6rem * var(--script-scale)); margin-bottom:.4rem; }
.pied .pied-msg{ font-size:1rem; }
/* signature, comme sur sarah-nicolas */
.pied .signature{ margin-top:2rem; font-style:normal; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); opacity:.75; }
.pied .signature span{ color:var(--accent); }
.pied .signature a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }

/* ─── Barre du haut ─── */
.topbar{ background:color-mix(in srgb, var(--page) 86%, transparent); }

/* prénoms sur une ligne, même sur petit écran */
.noms{ white-space:nowrap; font-size:calc(clamp(2.3rem, 11.5vw, 3rem) * var(--script-scale)); }

/* ═══════════ ANIMATIONS EN PLUS ═══════════ */
/* titres : les capitales se resserrent en arrivant */
.anim .carte-in.reveal .carte-titre{ letter-spacing:.5em; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), letter-spacing 1.6s var(--ease-out); transition-delay:calc(.2s + var(--i,0) * 90ms); }
.anim .carte-in.reveal.is-in .carte-titre{ letter-spacing:var(--titre-track); }

/* reflet doré qui passe sur les filets et les séparateurs */
.filet-or, .sep-orn{ position:relative; }
.filet-or span, .sep-orn{ animation:scintille 3.6s ease-in-out infinite; }
@keyframes scintille{ 0%,70%,100%{ opacity:.65; text-shadow:none; } 80%{ opacity:1; text-shadow:0 0 8px rgba(243,217,139,.9); } }
.filet-or i{ background-size:200% 100%; background-image:linear-gradient(90deg, transparent, #C9A04E 40%, #FFF1C2 50%, #C9A04E 60%, transparent); animation:filet 4.5s ease-in-out infinite; }
@keyframes filet{ 0%{ background-position:100% 0; } 60%,100%{ background-position:-100% 0; } }

/* illustrations vivantes */
.drapeau{ transform-box:view-box; transform-origin:150px 25px; animation:drapeau 2.4s ease-in-out infinite alternate; }
@keyframes drapeau{ from{ transform:skewY(-6deg) scaleX(.92); } to{ transform:skewY(5deg) scaleX(1.04); } }
.lanterne{ transform-box:view-box; animation:balance 3.6s ease-in-out infinite alternate; }
@keyframes balance{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }
.lanterne-lueur{ animation:lueurLanterne 2.2s ease-in-out infinite alternate; }
@keyframes lueurLanterne{ from{ opacity:.55; } to{ opacity:1; } }
.flamme{ transform-box:fill-box; transform-origin:50% 100%; animation:flamme .7s ease-in-out infinite alternate; }
@keyframes flamme{ from{ transform:scale(.85, .8) skewX(-6deg); } to{ transform:scale(1.05, 1.12) skewX(5deg); } }
.voile{ transform-box:view-box; animation:voile 5s ease-in-out infinite alternate; }
@keyframes voile{ from{ transform:rotate(-1.3deg); } to{ transform:rotate(1.3deg); } }

/* pétales qui tombent doucement sur la page (petales.js) */
.petales{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:80; opacity:0; transition:opacity 2s ease; }
body.intro-done .petales{ opacity:1; }

/* ─── Infos des cartes ─── */
.carte-sur-titre{ font-family:var(--f-titre); font-weight:500; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); margin:.2rem 0 -.2rem; }
.parents--gp{ font-size:.92rem; color:var(--mute); margin-bottom:-.3rem; }
.cd-titre{ font-style:italic; font-size:.98rem; color:var(--mute); margin-top:1.1rem; }
.countdown{ margin-top:.6rem; }


.date .d-num sup, .programme sup, .coche-txt sup{ font-size:.5em; vertical-align:super; line-height:0; }
.date .d-num{ font-variant-numeric:lining-nums; }   /* « 1er » lisible : le 1 ancien ressemble à un I */
#houppa .noms-he{ gap:0; margin-top:.1rem; } #houppa .noms-he span{ text-align:center !important; }   /* chaque prénom hébreu sous son prénom */

/* ═══════════ OUVERTURE : LA PORTE DU CHÂTEAU ═══════════
   Tout est posé dès l'arrivée. Au toucher : le texte s'efface (0,35 s),
   les battants s'ouvrent (0,1 → 1,3 s), la lumière passe, on avance dans
   la porte (0,6 → 1,7 s), puis le faire-part apparaît. */
.intro--porte{ padding:0; flex-direction:column; justify-content:center; gap:0;
  background:radial-gradient(120% 70% at 50% 40%, #FFFCF8 0%, #FBF4EE 55%, #F4E4DF 100%); }
.pt-scene{ position:relative; display:flex; flex-direction:column; align-items:center; margin-top:-3vh;
  transform-origin:50% 62%; transition:transform 1.2s cubic-bezier(.6,0,.3,1) .55s, opacity .6s ease 1.1s; }
.pt-porte{ position:relative; width:min(52vw, 12.5rem); aspect-ratio:200/300; perspective:900px; margin-top:10%; }
/* la lumière derrière la grille : elle déborde doucement autour, passe entre
   les barreaux, puis envahit tout à l'ouverture */
.pt-paradis{ position:absolute; left:-55%; right:-55%; top:-30%; bottom:-12%; pointer-events:none;
  background:radial-gradient(closest-side at 50% 52%, #FFFFFF 0%, #FFF9EA 28%, rgba(248,228,190,.75) 52%, rgba(246,214,207,.35) 74%, rgba(246,214,207,0) 100%);
  transition:transform 1.4s cubic-bezier(.5,0,.2,1) .25s, filter 1.2s ease .25s; }
.pt-rayons{ position:absolute; inset:-20%;
  background:repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.7) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask-image:radial-gradient(closest-side at 50% 52%, #000 10%, rgba(0,0,0,.35) 45%, transparent 75%);
          mask-image:radial-gradient(closest-side at 50% 52%, #000 10%, rgba(0,0,0,.35) 45%, transparent 75%);
  opacity:.45; mix-blend-mode:soft-light; animation:rayons 70s linear infinite; transition:opacity 1s ease .3s; }
body.intro-ouverture .pt-paradis{ transform:scale(1.6); filter:brightness(1.15); }
body.intro-ouverture .pt-rayons{ opacity:1; }
.pt-battant{ position:absolute; top:0; bottom:0; width:50%; transform-style:preserve-3d;
  transition:transform 1.2s cubic-bezier(.55,0,.2,1) .1s; }
.pt-battant svg{ position:absolute; left:0; top:-4%; width:100%; height:104%; display:block; overflow:visible; }
.pt-battant--g{ left:0; transform-origin:0 50%; }
.pt-battant--d{ right:0; transform-origin:100% 50%; }
.pt-cadre{ position:absolute; left:-30%; top:-13.33%; width:160%; max-width:none; height:126.67%; overflow:visible; pointer-events:none; }

.intro--porte .intro-inner{ align-self:center; padding:3.4rem var(--pad) 0; }
.intro--porte .intro-inner > *{ opacity:1; transform:none; transition:opacity .35s ease !important; transition-delay:0s !important; }
.anim .intro--porte .intro-names{ clip-path:none !important; }
.intro--porte .intro-kicker{ font-size:.6rem; color:var(--mute); margin-top:0; }
.intro--porte .intro-names{ color:var(--accent); font-size:calc(clamp(2.6rem, 12vw, 3.4rem) * var(--script-scale)); }
.pt-btn{ margin-top:1.5rem; padding:.9rem 1.7rem; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:999px;
  font-size:.64rem; color:var(--accent); background:transparent; transition:background .2s, transform .15s; }
.pt-btn:active{ transform:scale(.97); background:color-mix(in srgb, var(--accent) 6%, transparent); }

body.intro-ouverture .intro--porte .intro-inner > *{ opacity:0; }
body.intro-ouverture .pt-battant--g{ transform:rotateY(-108deg); }
body.intro-ouverture .pt-battant--d{ transform:rotateY(108deg); }
body.intro-ouverture .pt-scene{ transform:scale(2.6); opacity:0; }
.intro--porte.is-gone{ filter:none; transform:none; transition:opacity .7s ease, visibility .7s; }

/* la première carte attend la fin de l'ouverture pour se poser :
   l'invité la voit arriver, logo compris */
body:not(.intro-done) #faire-part .carte-in.reveal{ opacity:0; transform:perspective(1200px) rotateX(6deg) translateY(36px); }
body:not(.intro-done) #faire-part .carte-in.reveal > *:not(.bsd){ opacity:0; transform:translateY(10px); }
body:not(.intro-done) #faire-part .logo-am--carte{ clip-path:inset(-10% 100% -10% -10%) !important; }



/* ── Lecteur de musique (comme sarah-nicolas) : pastille en verre dépoli,
      égaliseur quand ça joue, triangle « lecture » en pause ── */
.music-btn{
  left:auto; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  width:48px; height:48px; padding:0; border-radius:50%; justify-content:center;
  background:rgb(255 255 255 / .72); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgb(126 28 48 / .16); box-shadow:0 10px 30px -12px rgb(74 15 26 / .35), 0 1px 0 rgb(255 255 255 / .6) inset;
  transform:translateY(12px); transition:opacity .6s, transform .6s var(--ease-out), box-shadow .3s;
  -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.music-btn.is-ready{ transform:none; }
.music-btn:active{ transform:scale(.96); }
.mb-rond{ position:relative; flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:0 2px 8px -2px rgb(126 28 48 / .55); }
.music-btn .eq{ display:flex; gap:2.5px; align-items:center; height:14px; transition:opacity .25s, transform .25s; }
.music-btn .eq i{ width:2.5px; height:100%; border-radius:2px; background:#fff; transform-origin:center; animation:mbEq 1.1s ease-in-out infinite; }
.music-btn .eq i:nth-child(2){ animation-delay:-.35s; } .music-btn .eq i:nth-child(3){ animation-delay:-.7s; } .music-btn .eq i:nth-child(4){ animation-delay:-.15s; }
@keyframes mbEq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.mb-play{ position:absolute; width:20px; height:20px; fill:#fff; opacity:0; transform:scale(.6); transition:opacity .25s, transform .25s var(--ease-out); }
.music-btn.is-paused .eq{ opacity:0; transform:scale(.6); }
.music-btn.is-paused .mb-play{ opacity:1; transform:none; }
.music-btn.is-paused .eq i{ animation-play-state:paused; }
.music-btn.is-waiting .mb-rond::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--accent); animation:mbHalo 1.8s ease-out infinite; }
@keyframes mbHalo{ from{ transform:scale(.85); opacity:.9; } to{ transform:scale(1.35); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .music-btn .eq i{ animation:none; transform:scaleY(.7); } }

/* barre du haut : rien à gauche, seulement le menu */
.topbar{ justify-content:flex-end; }

/* ═══════════ DEMANDE DE LA KALA : bordeaux, jaune beurre, rose poudré ;
   classe, princier et jardin — ajustements légers ═══════════ */
:root{ --card:#FFF8EA; --beurre-trait:#D4B25E; }
/* papier beurré, cadre intérieur jaune beurre */
.carte-in::after{ border-color:color-mix(in srgb, #D4B25E 70%, transparent); }
.date .d-jour, .date .d-mois{ border-color:color-mix(in srgb, #D4B25E 75%, transparent); }
.filet-or{ color:#D4B25E; }
.filet-or i{ background-image:linear-gradient(90deg, transparent, #D4B25E 40%, #F6E3A6 50%, #D4B25E 60%, transparent); }
/* princier : ornements fins aux quatre coins de chaque carte */
.carte-in{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%280%2015%2015%29%22%20fill%3D%22none%22%20stroke%3D%22%23D4B25E%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2027%20V12%20Q3%203%2012%203%20H27%22/%3E%3Cpath%20d%3D%22M8%2027%20V14%20Q8%208%2014%208%20H27%22%20stroke-opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M12%2012%20q4%20-1%205%203%20q-4%201%20-5%20-3%20Z%22%20fill%3D%22%23D4B25E%22%20fill-opacity%3D%22.5%22/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%2890%2015%2015%29%22%20fill%3D%22none%22%20stroke%3D%22%23D4B25E%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2027%20V12%20Q3%203%2012%203%20H27%22/%3E%3Cpath%20d%3D%22M8%2027%20V14%20Q8%208%2014%208%20H27%22%20stroke-opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M12%2012%20q4%20-1%205%203%20q-4%201%20-5%20-3%20Z%22%20fill%3D%22%23D4B25E%22%20fill-opacity%3D%22.5%22/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%28270%2015%2015%29%22%20fill%3D%22none%22%20stroke%3D%22%23D4B25E%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2027%20V12%20Q3%203%2012%203%20H27%22/%3E%3Cpath%20d%3D%22M8%2027%20V14%20Q8%208%2014%208%20H27%22%20stroke-opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M12%2012%20q4%20-1%205%203%20q-4%201%20-5%20-3%20Z%22%20fill%3D%22%23D4B25E%22%20fill-opacity%3D%22.5%22/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%28180%2015%2015%29%22%20fill%3D%22none%22%20stroke%3D%22%23D4B25E%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2027%20V12%20Q3%203%2012%203%20H27%22/%3E%3Cpath%20d%3D%22M8%2027%20V14%20Q8%208%2014%208%20H27%22%20stroke-opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M12%2012%20q4%20-1%205%203%20q-4%201%20-5%20-3%20Z%22%20fill%3D%22%23D4B25E%22%20fill-opacity%3D%22.5%22/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:30px 30px;
  background-position:top 18px left 18px, top 18px right 18px, bottom 18px left 18px, bottom 18px right 18px; }
.sep::before, .sep::after{ background:color-mix(in srgb, #D4B25E 70%, transparent); }
/* le בס״ד se niche dans l'ornement du coin, sans le toucher */
.carte-in > .bsd{ top:46px; right:48px; }
@keyframes rayons{ to{ rotate:360deg; } }