/* ============================================================
   Design tokens — Faire-part électronique haut de gamme
   Palette : or antique / ivoire / charbon — inspirée du brief
   ============================================================ */
:root{
  --or: #C9A227;
  --or-clair: #E8D9A0;
  --or-fonce: #9C7C16;
  --ivoire: #FFF8EF;
  --ivoire-fonce: #F4E9DC;
  --blanc: #FFFFFF;
  --charbon: #2B2620;
  --charbon-doux: #55483A;
  --ombre-or: rgba(201,162,39,0.35);
  --font-display: 'Playfair Display', serif;
  --font-signature: 'Great Vibes', cursive;
  --font-corps: 'Poppins', sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family: var(--font-corps);
  color: var(--charbon);
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--ivoire-fonce) 0%, transparent 60%),
    radial-gradient(1200px 700px at 90% 10%, #fbf3e2 0%, transparent 55%),
    var(--ivoire);
  overflow-x:hidden;
  font-weight:300;
  letter-spacing:.015em;
  position:relative;
}

/* Motif discret en filigrane (répétition de petits losanges dorés) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background-image: radial-gradient(circle, rgba(201,162,39,0.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
}

/* ---------- Cadre ornemental "carte d'invitation" ---------- */
.cadre-ornemental{ position:fixed; inset:10px; z-index:1300; pointer-events:none; border:1px solid rgba(201,162,39,.35); border-radius:26px; }
.cadre-ornemental span{ position:absolute; width:34px; height:34px; border:2px solid var(--or); }
.cadre-ornemental span.coin-hg{ top:-1px; left:-1px; border-right:none; border-bottom:none; border-top-left-radius:18px; }
.cadre-ornemental span.coin-hd{ top:-1px; right:-1px; border-left:none; border-bottom:none; border-top-right-radius:18px; }
.cadre-ornemental span.coin-bg{ bottom:-1px; left:-1px; border-right:none; border-top:none; border-bottom-left-radius:18px; }
.cadre-ornemental span.coin-bd{ bottom:-1px; right:-1px; border-left:none; border-top:none; border-bottom-right-radius:18px; }
@media (max-width:768px){ .cadre-ornemental{ display:none; } }

h1,h2,h3,.font-display{ font-family: var(--font-display); }
.font-signature{ font-family: var(--font-signature); }

.text-or{ color: var(--or-fonce) !important; }
.bg-or{ background: linear-gradient(135deg, var(--or) 0%, var(--or-fonce) 100%) !important; }

.divider-or{
  width:70px;height:2px;margin:1.2rem auto;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  position:relative;
}
.divider-or::before{
  content:"❦"; position:absolute; top:50%; left:50%; transform:translate(-50%,-55%);
  color:var(--or-fonce); background:transparent; font-size:1.1rem;
}

/* ---------- Effet verre (glassmorphism) ---------- */
.glass{
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(201,162,39,0.25);
  box-shadow: 0 8px 32px rgba(43,38,32,0.08);
  border-radius: 22px;
}

/* ============================================================
   ÉCRAN D'OUVERTURE — Sceau doré qui se brise
   ============================================================ */
#ecran-ouverture{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: radial-gradient(circle at center, #fffdf7 0%, var(--ivoire-fonce) 100%);
  transition: opacity .9s ease, visibility .9s ease;
}
#ecran-ouverture.masque{ opacity:0; visibility:hidden; pointer-events:none; }

.sceau{
  width:150px;height:150px;border-radius:50%;
  background: linear-gradient(145deg, var(--or-clair), var(--or) 55%, var(--or-fonce));
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 10px 40px var(--ombre-or), inset 0 0 20px rgba(255,255,255,.4);
  cursor:pointer; transition: transform .35s ease;
  animation: respirer 3.2s ease-in-out infinite;
}
.sceau:hover{ transform: scale(1.06); }
.sceau span{
  font-family: var(--font-signature); font-size:2.6rem; color:#fffaf0; text-shadow:0 2px 6px rgba(0,0,0,.25);
}
@keyframes respirer{
  0%,100%{ box-shadow:0 10px 40px var(--ombre-or), inset 0 0 20px rgba(255,255,255,.4);}
  50%{ box-shadow:0 14px 55px var(--ombre-or), inset 0 0 26px rgba(255,255,255,.55);}
}
.sceau.brise{ animation: casser .5s ease forwards; }
@keyframes casser{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.2) rotate(4deg); opacity:1;}
  100%{ transform:scale(1.7) rotate(-3deg); opacity:0;}
}
#ecran-ouverture .invite-ouvrir{ letter-spacing:.2em; text-transform:uppercase; font-size:.75rem; color:var(--charbon-doux); margin-top:1.8rem;}

.halo-ouverture{
  position:absolute; top:38%; left:50%; margin:-5px 0 0 -5px; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), var(--or-clair) 40%, transparent 70%);
  opacity:0; pointer-events:none; z-index:1;
}
.halo-ouverture.eclater{ animation: eclaterHalo 1s ease-out forwards; }
@keyframes eclaterHalo{
  0%{ opacity:0; transform:scale(0); }
  30%{ opacity:.9; }
  100%{ opacity:0; transform:scale(38); }
}
.coeur-envol{
  position:fixed; z-index:1600; color:var(--or); pointer-events:none;
  animation: envolerCoeur 1.6s ease-out forwards;
}
@keyframes envolerCoeur{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-160px) scale(1.1); }
}

/* ---------- Enveloppe animée ---------- */
.enveloppe{ position:relative; width:280px; max-width:82vw; height:190px; perspective:1200px; }
.enveloppe-corps{
  position:absolute; left:0; right:0; bottom:0; top:34px; z-index:1;
  background: linear-gradient(165deg, var(--ivoire-fonce), var(--or-clair) 130%);
  border:1px solid rgba(201,162,39,.5); border-radius:8px;
  box-shadow: 0 22px 46px rgba(43,38,32,.18);
}
.enveloppe-corps::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:70%;
  background: linear-gradient(200deg, transparent 45%, rgba(43,38,32,.06) 100%);
  border-radius:0 0 8px 8px;
}
.enveloppe-carte{
  position:absolute; left:50%; top:46px; transform:translate(-50%,0);
  width:220px; max-width:76vw; min-height:112px; z-index:2;
  background: var(--ivoire); border:1px solid var(--or-clair); border-radius:10px;
  box-shadow:0 12px 26px rgba(43,38,32,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.1rem .8rem;
  transition: transform .65s cubic-bezier(.22,.9,.32,1.15), box-shadow .65s ease;
}
.enveloppe-carte .carte-initiales{ font-size:2rem; color:var(--or-fonce); line-height:1; }
.enveloppe-carte .carte-souscription{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--charbon-doux); margin-top:.5rem;}
.enveloppe-carte.sortie{ transform:translate(-50%,-96px) scale(1.05); box-shadow:0 26px 50px rgba(43,38,32,.22); }

.enveloppe-rabat{
  position:absolute; top:0; left:0; width:100%; height:74px; z-index:3;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(200deg, var(--or-clair), var(--or) 60%, var(--or-fonce));
  transform-origin: top center; transform-style:preserve-3d;
  transition: transform .75s cubic-bezier(.5,0,.25,1);
  display:flex; align-items:flex-start; justify-content:center; padding-top:2px;
  box-shadow:0 8px 18px rgba(43,38,32,.16);
}
.enveloppe-rabat .sceau{ width:64px; height:64px; margin-top:2px; animation:none; box-shadow:0 4px 14px rgba(43,38,32,.25), inset 0 0 10px rgba(255,255,255,.4); }
.enveloppe-rabat .sceau span{ font-size:1.05rem; }
.enveloppe-rabat.ouverte{ transform: rotateX(-150deg); }

@media (max-width:380px){
  .enveloppe{ height:170px; }
  .enveloppe-carte{ top:40px; }
}

/* particules dorées / pétales flottants */
.petale{
  position:fixed; top:-5%; z-index:1500; pointer-events:none;
  font-size: 1.1rem; color: var(--or);
  animation: tomber linear infinite;
  opacity:.85;
}
@keyframes tomber{
  0%{ transform: translateY(0) rotate(0deg); }
  100%{ transform: translateY(110vh) rotate(360deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 4rem 1.2rem 3rem;
  background-size: cover; background-position:center;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,248,239,.5) 0%, rgba(255,248,239,.82) 75%, var(--ivoire) 100%);
  z-index:0;
}
@media (min-width:992px){ .hero{ background-attachment:fixed; } }

/* Petites étincelles dorées flottantes dans le hero */
.etincelle{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background: var(--or); box-shadow:0 0 8px 2px var(--ombre-or);
  z-index:1; animation: scintiller 3.4s ease-in-out infinite;
}
@keyframes scintiller{
  0%,100%{ opacity:0; transform:scale(.4) translateY(0); }
  50%{ opacity:1; transform:scale(1.15) translateY(-14px); }
}

.hero-contenu{
  position:relative; z-index:2; max-width:640px;
  background: rgba(255,255,255,0.42);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 28px;
  padding: 3rem 2.2rem;
  box-shadow: 0 20px 60px rgba(43,38,32,0.12);
}
@media (max-width:576px){ .hero-contenu{ padding:2.2rem 1.3rem; border-radius:20px; } }

/* Cascade d'entrée : chaque élément du hero apparaît l'un après l'autre */
.entree{
  opacity:0; transform:translateY(22px);
  animation: apparaitreEntree .8s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: var(--delai, 0s);
}
@keyframes apparaitreEntree{ to{ opacity:1; transform:translateY(0); } }

.ruban-date{
  display:inline-flex; align-items:center; padding:.35rem 1.1rem; border-radius:30px; margin-bottom:1rem;
  background: linear-gradient(135deg, var(--or-fonce), var(--or)); color:#fff; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; box-shadow:0 6px 16px var(--ombre-or);
}

/* ---------- Portrait du couple décoré (cadre + cœurs) ---------- */
.portrait-couple{
  position:relative; width:170px; height:170px; margin:0 auto 1.2rem; display:flex; align-items:center; justify-content:center;
}
.portrait-couple img{
  width:140px; height:140px; border-radius:50%; object-fit:cover; position:relative; z-index:2;
  border:4px solid #fff; box-shadow:0 10px 30px rgba(43,38,32,.25);
}
.portrait-anneau{
  position:absolute; inset:6px; border-radius:50%; z-index:1;
  border:2px dashed var(--or); animation: tournerAnneau 40s linear infinite;
}
@keyframes tournerAnneau{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.portrait-coeur{
  position:absolute; z-index:3; color:#d94a4a; font-size:1rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));
  animation: pulserCoeur 2.4s ease-in-out infinite;
}
.portrait-coeur.c1{ top:-6px; left:18px; font-size:1.3rem; animation-delay:.1s; }
.portrait-coeur.c2{ top:10px; right:-10px; font-size:.9rem; animation-delay:.6s; }
.portrait-coeur.c3{ bottom:0; left:-8px; font-size:1.1rem; animation-delay:1.1s; }
.portrait-coeur.c4{ bottom:-8px; right:16px; font-size:1.4rem; animation-delay:1.6s; }
.portrait-coeur.c5{ top:50%; left:-16px; font-size:.8rem; animation-delay:2s; }

/* ---------- Bloc des prénoms avec alliance dorée ---------- */
.noms-maries-bloc{ display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.noms-maries-bloc .nom-marie, .noms-maries-bloc .nom-mariee{
  font-family:var(--font-signature); font-size: clamp(2.4rem,6.5vw,4rem); color:var(--or-fonce); line-height:1;
  text-shadow: 0 2px 18px rgba(201,162,39,.25);
}
.alliance-icone{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background: linear-gradient(145deg, var(--or-clair), var(--or) 60%, var(--or-fonce));
  color:#fff; font-size:.95rem; box-shadow:0 6px 14px var(--ombre-or);
  animation: pulserAlliance 2.6s ease-in-out infinite;
}
@keyframes pulserAlliance{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.1);} }

/* ---------- Mini photo dans la carte de l'enveloppe ---------- */
.enveloppe-mini-photo{
  width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--or-clair);
  box-shadow:0 6px 14px rgba(43,38,32,.18);
}
.hero .eyebrow{
  letter-spacing:.35em; text-transform:uppercase; font-size:.72rem; color:var(--or-fonce); font-weight:500;
}
.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.2rem); margin:.4rem 0; color:var(--charbon);
}
.hero .noms-maries{
  font-family:var(--font-signature); font-size: clamp(2.8rem,7.5vw,5rem); color:var(--or-fonce); line-height:1;
  text-shadow: 0 2px 18px rgba(201,162,39,.25);
}
.fioriture{ width:160px; height:16px; margin:.9rem auto; display:block; overflow:visible; }
.fioriture path{
  fill:none; stroke:var(--or); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260; animation: dessinerTrait 1.4s ease forwards;
  animation-delay: inherit;
}
@keyframes dessinerTrait{ to{ stroke-dashoffset:0; } }
.hero .invite-personnalise{
  font-size:1.05rem; margin-top:1.4rem; color:var(--charbon-doux);
}
.badge-categorie{
  display:inline-block; padding:.3rem 1rem; border:1px solid var(--or); border-radius:30px;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--or-fonce); margin-bottom:1rem;
}
.scroll-indicateur{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--or-fonce); font-size:1.1rem; animation: apparaitreEntree .8s forwards, rebondir 2s ease-in-out 1.5s infinite;
}
@keyframes rebondir{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ---------- Boutons (effet de brillance au survol) ---------- */
.btn-or{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--or) 0%, var(--or-fonce) 100%);
  border:none; color:#fff; padding:.75rem 2.1rem; border-radius:40px;
  letter-spacing:.06em; font-weight:500; box-shadow:0 8px 24px var(--ombre-or);
  transition:.25s ease;
}
.btn-or::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
}
.btn-or:hover::after{ animation: passageBrillance 1s ease; }
@keyframes passageBrillance{ from{ left:-60%; } to{ left:130%; } }
.btn-or:hover{ transform:translateY(-2px); box-shadow:0 12px 30px var(--ombre-or); color:#fff; }
.btn-outline-or{
  border:1.5px solid var(--or); color:var(--or-fonce); background:transparent; border-radius:40px;
  padding:.7rem 2rem; font-weight:500; transition:.25s ease;
}
.btn-outline-or:hover{ background:var(--or); color:#fff; }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
section{ padding: 5rem 0; position:relative; }
.section-titre{ text-align:center; margin-bottom:2.2rem; }
.section-titre .eyebrow{ letter-spacing:.3em; text-transform:uppercase; font-size:.7rem; color:var(--or-fonce); }
.section-titre h2{ font-size:clamp(1.8rem,4vw,2.6rem); }

/* ---------- Séparateurs en vague entre sections ---------- */
.vague-separateur{ line-height:0; position:relative; z-index:1; margin-top:-2px; }
.vague-separateur svg{ width:100%; height:44px; display:block; }
.vague-separateur path{ fill:var(--ivoire); }
.vague-separateur.inverse path{ fill:rgba(255,255,255,.5); }

/* ---------- Barre de progression de lecture ---------- */
#barre-progression{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:2600;
  background:linear-gradient(90deg, var(--or-fonce), var(--or)); transition:width .1s linear;
}

/* ---------- Countdown ---------- */
.countdown{ display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap; }
.countdown .unite{
  width:108px; padding:1.3rem .5rem; text-align:center; position:relative; overflow:hidden;
  border:1px solid rgba(201,162,39,.3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.countdown .unite:hover{ transform: translateY(-4px); box-shadow:0 14px 28px var(--ombre-or); }
.countdown .unite::before{
  content:""; position:absolute; top:0; left:-70%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); animation: passageBrillanceLente 5s ease-in-out infinite;
}
@keyframes passageBrillanceLente{ 0%{ left:-70%; } 30%,100%{ left:130%; } }
.countdown .unite::after{
  content:""; position:absolute; inset:6px; border:1px solid rgba(201,162,39,.18); border-radius:16px; pointer-events:none;
}
.countdown .chiffre{ font-family:var(--font-display); font-size:2.6rem; color:var(--or-fonce); display:block; line-height:1; font-weight:600;}
.countdown .label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--charbon-doux); margin-top:.3rem; display:block;}

/* ---------- Programme (timeline) ---------- */
.timeline{ position:relative; max-width:650px; margin:0 auto; }
.timeline::before{
  content:""; position:absolute; left:29px; top:6px; bottom:6px; width:2px;
  background: linear-gradient(var(--or-clair), var(--or), var(--or-clair));
}
.timeline-item{ display:flex; gap:1.4rem; margin-bottom:2.1rem; position:relative; }
.timeline-icone{
  flex:0 0 60px;height:60px;border-radius:50%;
  background: var(--blanc); border:2px solid var(--or);
  display:flex;align-items:center;justify-content:center; color:var(--or-fonce); font-size:1.2rem; z-index:1;
  box-shadow:0 6px 16px rgba(201,162,39,.22);
}
.timeline-texte h5{ margin-bottom:.15rem; }
.timeline-heure{ font-size:.75rem; color:var(--or-fonce); letter-spacing:.1em; text-transform:uppercase; }

@media (min-width:992px){
  .timeline{ max-width:780px; }
  .timeline::before{ left:50%; margin-left:-1px; }
  .timeline-item{ width:50%; margin-bottom:2.6rem; }
  .timeline-item:nth-child(odd){ padding-right:2.6rem; text-align:right; flex-direction:row-reverse; }
  .timeline-item:nth-child(even){ margin-left:50%; padding-left:2.6rem; }
  .timeline-item:nth-child(odd) .timeline-icone{ order:2; }
}

/* ---------- Carte "votre table" ---------- */
.carte-table{
  display:inline-flex; align-items:center; gap:1rem; padding:1.2rem 1.8rem; margin:0 auto;
  border:1.5px solid var(--or); border-radius:20px; background:rgba(255,255,255,.55);
  box-shadow:0 10px 26px var(--ombre-or);
}
.carte-table .numero{ font-family:var(--font-display); font-size:2.2rem; color:var(--or-fonce); line-height:1; }
.carte-table .texte{ text-align:left; font-size:.8rem; color:var(--charbon-doux); letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Galerie ---------- */
.galerie-item{ overflow:hidden; border-radius:18px; aspect-ratio:1/1; cursor:pointer; position:relative; }
.galerie-item img{ width:100%;height:100%;object-fit:cover; transition:transform .5s ease; }
.galerie-item:hover img{ transform:scale(1.08); }
.galerie-item::after{
  content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#fff; font-size:1.3rem;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(43,38,32,0); opacity:0; transition:.25s ease;
}
.galerie-item:hover::after{ background:rgba(43,38,32,.28); opacity:1; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2500; background:rgba(20,17,12,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.actif{ opacity:1; visibility:visible; }
.lightbox-contenu{ max-width:88vw; max-height:82vh; text-align:center; }
.lightbox-contenu img{
  max-width:88vw; max-height:74vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation: apparaitreImage .35s ease;
}
@keyframes apparaitreImage{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:scale(1);} }
.lightbox-legende{ color:var(--or-clair); margin-top:1rem; font-size:.9rem; letter-spacing:.03em; }
.lightbox-fermer{
  position:absolute; top:20px; right:24px; background:transparent; border:none; color:#fff; font-size:1.6rem; z-index:2;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  color:#fff; width:46px;height:46px;border-radius:50%; font-size:1.1rem;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.22); }
.lightbox-prec{ left:16px; } .lightbox-suiv{ right:16px; }
@media (max-width:576px){ .lightbox-nav{ width:38px;height:38px; } }

/* ---------- Mini plan de salle (vue invité) ---------- */
.plan-salle-invite{
  position:relative; width:100%; max-width:520px; aspect-ratio:16/10;
  background:
    repeating-linear-gradient(0deg, rgba(201,162,39,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(201,162,39,.05) 0 1px, transparent 1px 34px),
    rgba(255,255,255,.5);
  border:1.5px dashed var(--or-clair); border-radius:18px;
}
.table-mini{
  position:absolute; transform:translate(-50%,-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:600; border:1.5px solid var(--or-clair); background:#fff; color:#b7ab8f;
  opacity:.55;
}
.table-mini.ronde{ border-radius:50%; }
.table-mini.rectangulaire{ border-radius:6px; width:44px; height:28px; }
.table-mini.ma-table{
  opacity:1; width:46px; height:46px; background:var(--or); border-color:var(--or-fonce); color:#fff;
  box-shadow:0 0 0 6px var(--ombre-or); animation: pulserTable 1.8s ease-in-out infinite; z-index:2;
}
.table-mini.ma-table.rectangulaire{ width:58px; height:36px; }
@keyframes pulserTable{
  0%,100%{ box-shadow:0 0 0 6px var(--ombre-or); }
  50%{ box-shadow:0 0 0 12px transparent; }
}

/* ---------- Carte lieu / calendrier ---------- */
.info-carte{ padding:1.6rem; text-align:center; height:100%; }
.info-carte i{ font-size:1.6rem; color:var(--or-fonce); margin-bottom:.6rem; }

/* ---------- RSVP ---------- */
.choix-presence label{
  border:1.5px solid var(--or-clair); border-radius:16px; padding:1.1rem; text-align:center; cursor:pointer;
  width:100%; transition:.2s ease; display:block; font-weight:500;
}
.choix-presence input{ display:none; }
.choix-presence input:checked + label{
  background: var(--or); color:#fff; border-color:var(--or-fonce);
  box-shadow:0 8px 20px var(--ombre-or);
}
.boisson-chip{
  border:1px solid var(--or-clair); border-radius:30px; padding:.45rem 1.1rem; display:inline-block;
  cursor:pointer; font-size:.85rem; margin:.25rem; transition:.2s ease; user-select:none;
}
.boisson-chip input{ display:none; }
.boisson-chip.selectionne{ background:var(--or); border-color:var(--or-fonce); color:#fff; }

.form-control, .form-select{
  border:1px solid var(--or-clair); border-radius:12px; padding:.65rem 1rem; background:rgba(255,255,255,.7);
}
.form-control:focus, .form-select:focus{ border-color:var(--or); box-shadow:0 0 0 .2rem var(--ombre-or); }

/* ---------- QR / Bouton musique flottant ---------- */
.btn-musique{
  position:fixed; bottom:22px; right:22px; z-index:1200; width:54px;height:54px;border-radius:50%;
  background:var(--or); color:#fff; border:none; box-shadow:0 8px 22px var(--ombre-or);
}
.btn-musique.muet{ background:#fff; color:var(--or-fonce); border:1.5px solid var(--or); }

footer{ text-align:center; padding:2.4rem 1rem; color:var(--charbon-doux); font-size:.85rem; }
.footer-icone{ color:var(--or); font-size:1.3rem; animation: pulserCoeur 2.4s ease-in-out infinite; }
@keyframes pulserCoeur{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.18); opacity:1; } }

/* Focus visible clavier */
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--or-fonce); outline-offset:2px; }

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

@media (max-width: 576px){
  .countdown .unite{ width:76px; padding:.8rem .3rem; }
  .countdown .chiffre{ font-size:1.7rem; }
}

/* ============================================================
   VARIANTES DE THÈME — changent uniquement les tokens de couleur,
   tout le reste du design (glass, timeline, boutons...) suit automatiquement.
   ============================================================ */
body.theme-rose{
  --or:#C98A9C; --or-clair:#F0D3DA; --or-fonce:#A85F73;
  --ivoire:#FFF6F5; --ivoire-fonce:#FBE7E9;
  --charbon:#3A2A2E; --charbon-doux:#7A5B62;
  --ombre-or: rgba(201,138,156,0.35);
}
body.theme-emeraude{
  --or:#1F6F54; --or-clair:#BFE3D3; --or-fonce:#134A38;
  --ivoire:#F5FBF8; --ivoire-fonce:#E4F3EC;
  --charbon:#1D2E27; --charbon-doux:#4C6459;
  --ombre-or: rgba(31,111,84,0.28);
}
body.theme-bleu{
  --or:#2C4A85; --or-clair:#C7D3EA; --or-fonce:#152C57;
  --ivoire:#F5F8FF; --ivoire-fonce:#E6ECFA;
  --charbon:#1E2534; --charbon-doux:#4F5A70;
  --ombre-or: rgba(44,74,133,0.28);
}
body.theme-bourgogne{
  --or:#9A2B34; --or-clair:#E9C9A0; --or-fonce:#6E1B22;
  --ivoire:#FFF9F0; --ivoire-fonce:#F3E4CE;
  --charbon:#2E1A15; --charbon-doux:#6B4C42;
  --ombre-or: rgba(154,43,52,0.3);
}