/* Invitation — mariage de Betty. Aucun texte ici : tout vient de contenu.js. */

:root {
  --encre: #6e5b44;
  --encre-douce: #8a7660;
  --or: #a8895a;
  --ivoire: #f6f1e8;
  --papier: #f3ede3;
  --fond: #efe8dc;

  /* Coffret : position (en % de l'image) de la boîte et de la carte vide.
     Mesurée sur coffret-ferme.jpg / coffret-ouvert.jpg (même cadrage). */
  --boite-g: 12.35%;
  --boite-d: 89%;
  --boite-h: 16.3%;
  --boite-hauteur: 67%;
  --joint: 50.4%;
  --carte-g: 29.9%;
  --carte-h: 31.1%;
  --carte-l: 41.4%;
  --carte-hauteur: 36.7%;
  --ratio-coffret: 893 / 1600;

  /* Mécanique de la référence : zoom dans la carte, flou, fondu croisé */
  --zoom: 2.05;
  --zoom-origine-x: 50.6%;   /* centre de la carte = carte-g + carte-l / 2 */
  --zoom-origine-y: 49.5%;   /* carte-h + carte-hauteur / 2 */
  --duree-zoom: 2s;
  --duree-flou: 1.4s;
  --duree-croise: .9s;
  --flou-scene: 18px;
  --flou-suite: 14px;

  --latin: "Cormorant Garamond", "Times New Roman", serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;
  --arabe: "Amiri", "Times New Roman", serif;
  --arabe-titre: "Aref Ruqaa", "Amiri", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--latin);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-family: var(--arabe); font-size: 17px; }

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ---------- Le plateau et le cadre fixe (430 px de large, mis à l'échelle) ---------- */
.plateau {
  position: fixed;
  inset: 0;
  background: var(--fond);
  overflow: clip;
}
.scene-fixe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 764px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: clip;
  container-type: size;
  background: url("images/fond-soie.jpg") center / cover no-repeat, var(--fond);
}

/* ---------- Pastilles flottantes ---------- */
.pastille {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  z-index: 20;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(168, 137, 90, .35);
  border-radius: 999px;
  background: rgba(246, 241, 232, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(80, 60, 30, .10);
  font-size: 16px;
}
.pastille[hidden] { display: none; }
.pastille-gauche { left: 14px; }
.pastille-droite { right: 14px; padding: 0; width: 44px; display: grid; place-items: center; }
.pastille svg { width: 20px; height: 20px; fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pastille svg .haut-parleur { fill: var(--encre); stroke: none; }
.pastille svg .barre { display: none; }
.pastille.muet svg .ondes { display: none; }
.pastille.muet svg .barre { display: inline; }
html[dir="rtl"] .pastille-gauche { left: auto; right: 14px; }
html[dir="rtl"] .pastille-droite { right: auto; left: 14px; }

/* ---------- 1. La scène du coffret ---------- */
.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  transition: filter var(--duree-flou) ease-in, opacity var(--duree-croise) ease-in-out;
}
body.ouvert .scene { display: none; }
body.croise .scene { filter: blur(var(--flou-scene)); opacity: 0; }

/* Le coffret couvre le cadre (cover), centré */
.scene-cadre {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: max(100cqw, calc(100cqh * 893 / 1600));
  aspect-ratio: var(--ratio-coffret);
  perspective: 1800px;
  container-type: inline-size;
  transform-origin: var(--zoom-origine-x) var(--zoom-origine-y);
  transition: transform var(--duree-zoom) cubic-bezier(.4, .05, .35, 1);
}
body.zoom .scene-cadre { transform: scale(var(--zoom)); }
.coffret-ouvert { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Les deux portes : découpées dans coffret-ferme.jpg, charnières aux bords de la boîte */
.porte {
  position: absolute;
  top: var(--boite-h);
  height: var(--boite-hauteur);
  overflow: hidden;
  background: url("images/coffret-ferme.jpg") no-repeat;
  transition: transform 1.9s cubic-bezier(.55, .05, .25, 1), opacity .5s ease 1.45s;
  will-change: transform;
}
.porte-gauche {
  left: var(--boite-g);
  width: calc(var(--joint) - var(--boite-g));
  background-size: calc(100% * 100 / (50.4 - 12.35)) calc(100% * 100 / 67);
  background-position: calc(12.35 / (100 - 50.4 + 12.35) * 100%) calc(16.3 / (100 - 67) * 100%);
  transform-origin: left center;
}
.porte-droite {
  left: var(--joint);
  width: calc(var(--boite-d) - var(--joint));
  background-size: calc(100% * 100 / (89 - 50.4)) calc(100% * 100 / 67);
  background-position: calc(50.4 / (100 - 89 + 50.4) * 100%) calc(16.3 / (100 - 67) * 100%);
  transform-origin: right center;
}
/* Voile de la scène fermée : la soie du coffret fermé, qui s'efface à l'ouverture */
.scene-cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("images/coffret-ferme.jpg") center / 100% 100% no-repeat;
  transition: opacity .7s ease;
  pointer-events: none;
}
.porte { z-index: 2; }
body.ouverture .scene-cadre::before { opacity: 0; }
body.ouverture .porte-gauche { transform: rotateY(-105deg); opacity: 0; }
body.ouverture .porte-droite { transform: rotateY(105deg); opacity: 0; }

/* Choix de la langue, posé sur le cachet */
.choix-langue {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(110, 91, 68, .92);
  box-shadow: 0 6px 24px rgba(60, 40, 20, .28);
  transition: opacity .45s ease, transform .45s ease;
}
.choix-langue button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  background: transparent;
  color: var(--ivoire);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
}
.choix-langue button[data-langue="ar"] { font-family: var(--arabe); font-size: 17px; }
.choix-langue button.actif { background: var(--ivoire); color: var(--encre); }
body.ouverture .choix-langue { opacity: 0; transform: translate(-50%, -50%) scale(.92); pointer-events: none; }

/* La carte, révélée au centre du coffret ouvert */
.carte {
  position: absolute;          /* pas de z-index : sinon l'ornement ne se fond plus dans le papier */
  left: var(--carte-g);
  top: var(--carte-h);
  width: var(--carte-l);
  height: var(--carte-hauteur);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2cqw;
}
/* On anime chaque élément, pas la carte : sinon l'ornement ne se fond plus dans le papier.
   Cascade comme la référence : un élément après l'autre. */
.carte > * {
  opacity: 0;
  translate: 0 1.5cqw;
  transition: opacity 1s ease, translate 1s ease;
}
.carte > :nth-child(1) { transition-delay: 1.4s; }
.carte > :nth-child(2) { transition-delay: 1.7s; }
.carte > :nth-child(3) { transition-delay: 2s; }
.carte > :nth-child(4) { transition-delay: 2.2s; }
body.ouverture .carte > * { opacity: 1; translate: none; }
.carte .monogramme { font-size: 7cqw; margin-bottom: 1.5cqw; }
.carte .noms { font-size: 6cqw; line-height: 1.12; display: flex; flex-direction: column; }
.carte .noms .et { font-size: .8em; }
.carte .ornement { width: 70%; margin: 1.6cqw 0 1.2cqw; }
.date-couverture { margin: 0; font-size: 3.1cqw; letter-spacing: .28em; color: var(--encre); }
html[dir="rtl"] .carte .noms { font-family: var(--arabe-titre); font-size: 5.2cqw; line-height: 1.35; }
html[dir="rtl"] .date-couverture { letter-spacing: .12em; direction: ltr; }

/* ---------- Polices communes ---------- */
.monogramme { font-family: var(--script); color: var(--or); line-height: 1; display: flex; align-items: baseline; direction: ltr; }
.monogramme span + span { margin-inline-start: -.12em; transform: translateY(.18em); }
.monogramme[hidden] { display: none; }
.noms { font-family: var(--script); color: var(--encre); font-weight: 400; }
.et { color: var(--or); font-family: var(--latin); font-style: italic; font-weight: 400; }
html[dir="rtl"] .et { font-family: inherit; font-style: normal; }
.ornement {
  display: block;
  mix-blend-mode: multiply;
  filter: brightness(1.1) contrast(1.1);
  /* l'image est plus sombre sur ses bords : on les estompe */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 45%, transparent 98%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 45%, transparent 98%);
}

/* ---------- 2. Le faire-part : plein cadre, fixe, sans défilement ---------- */
.suite {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--flou-suite));
  transition: opacity var(--duree-croise) ease-in-out, filter 2.3s ease-out;
}
body.ferme:not(.croise) .suite { visibility: hidden; }
body.croise .suite, body.ouvert .suite { opacity: 1; filter: none; }

.volet {
  position: absolute;
  inset: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Cadre de perles autour du faire-part */
.bloc {
  padding: 26px 22px;
  border-style: solid;
  border-width: 72px 54px;
  border-image: url("images/cadre-perles.jpg") 210 175 fill / 72px 54px / 0 stretch;
  background-clip: padding-box;
}
/* On anime le contenu, pas le bloc : sinon les perles ne se fondent plus dans le papier */
.bloc > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 1s ease, translate 1s ease;
}
body.croise .bloc > *, .bloc.visible > * { opacity: 1; translate: none; }

#volet-faire-part { padding: 18px 16px; font-size: 16.5px; line-height: 1.5; }
html[dir="rtl"] #volet-faire-part { font-size: 17px; line-height: 1.55; }
.fp-titre { font-family: var(--script); font-weight: 400; font-size: 38px; color: var(--or); margin: 0 0 10px; }
html[dir="rtl"] .fp-titre { font-family: var(--arabe-titre); font-size: 36px; }
.lignes { margin: 0; }
.lignes p { margin: 0; }
.lignes[hidden] { display: none; }
#volet-faire-part .lignes + .lignes { margin-top: 10px; }
.familles { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0; width: 100%; }
.famille { display: flex; flex-direction: column; }
.famille-nom { font-weight: 600; }
.famille-epouse { font-size: .9em; color: var(--encre-douce); }
.familles-et { font-size: 1.1em; }
html[dir="rtl"] .famille-nom { font-weight: 700; }
#fp-invitation { margin: 8px 0 0; }
.noms-bloc { font-size: 38px; line-height: 1.15; margin: 6px 0 8px; }
html[dir="rtl"] .noms-bloc { font-family: var(--arabe-titre); font-size: 34px; }
#volet-faire-part .ornement.petit { width: 46%; max-width: 160px; margin: 12px 0; }
.conclusion { font-style: italic; color: var(--or); }
html[dir="rtl"] .conclusion { font-style: normal; }
.lien-lieu {
  color: var(--or);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(168, 137, 90, .55);
  text-underline-offset: 3px;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Mouvements réduits : pas de rotation ni de zoom, un simple fondu */
@media (prefers-reduced-motion: reduce) {
  .porte, .carte > *, .bloc > *, .scene, .scene-cadre, .suite, .scene-cadre::before { transition-duration: .01s !important; transition-delay: 0s !important; }
}