/* ==========================================================================
   Déclaration d'amour — styles
   Les couleurs viennent du thème choisi dans config.js (variables --…).
   ========================================================================== */

/* ---------- Variables (thème « rose » par défaut, remplacées en JS) ------ */

:root {
  --principale: #ff4f8b;  --principale-rgb: 255, 79, 139;
  --claire: #ffb3c8;      --claire-rgb: 255, 179, 200;
  --profonde: #a3154f;    --profonde-rgb: 163, 21, 79;
  --eclat: #ffd9a8;       --eclat-rgb: 255, 217, 168;
  --texte: #fff3f7;       --texte-rgb: 255, 243, 247;
  --fond-1: #12030c;      --fond-1-rgb: 18, 3, 12;
  --fond-2: #3a0a29;      --fond-2-rgb: 58, 10, 41;
  --fond-3: #7b1748;      --fond-3-rgb: 123, 23, 72;

  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, 'Times New Roman', serif;
  --script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', 'Brush Script MT', cursive;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --doux: cubic-bezier(.22, .8, .25, 1);
  --ressort: cubic-bezier(.2, 1.45, .35, 1);
  --battement: 1.5s;
}

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

html, body { height: 100%; margin: 0; }

html {
  background-color: var(--fond-1);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: fixed;               /* pas de rebond ni de défilement parasite */
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  font-family: var(--serif);
  color: var(--texte);
  background-color: var(--fond-1);
  background-image: radial-gradient(130% 95% at 50% 36%, var(--fond-3) 0%, var(--fond-2) 42%, var(--fond-1) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.stop-claire { stop-color: var(--claire); }
.stop-principale { stop-color: var(--principale); }
.stop-profonde { stop-color: var(--profonde); }

/* ---------- Couches de fond ---------------------------------------------- */

.aurore {
  position: fixed;
  top: -25%; left: -25%;
  width: 150%; height: 150%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(38% 30% at 28% 30%, rgba(var(--principale-rgb), .26), rgba(var(--principale-rgb), 0) 70%),
    radial-gradient(42% 34% at 74% 70%, rgba(var(--claire-rgb), .15), rgba(var(--claire-rgb), 0) 70%),
    radial-gradient(30% 26% at 64% 22%, rgba(var(--eclat-rgb), .08), rgba(var(--eclat-rgb), 0) 70%);
  -webkit-animation: aurore 22s ease-in-out infinite alternate;
  animation: aurore 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurore {
  0% { transform: translate3d(-4%, -3%, 0) rotate(-4deg) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.1); }
}

.ciel, .magie {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ciel { z-index: 1; }

.voile {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .5) 100%);
}

/* grain de pellicule : évite les bandes dans les dégradés sombres */
.voile::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.scenes { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; outline: none; }
.lettre { z-index: 5; }
.magie { z-index: 6; }
.flash { z-index: 7; }
.bouton-son { z-index: 8; }
.visionneuse { z-index: 9; }
.alerte-config { z-index: 10; }

/* ---------- Scènes -------------------------------------------------------- */

.scene {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
  padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .9s ease, visibility 0s linear .9s;
}

.scene.est-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .9s ease, visibility 0s;
}

/* Lettres et mots animés */
.mot { display: inline-block; white-space: nowrap; }

.lettre-douce {
  display: inline-block;
  opacity: 0;
  animation: lettreDouce 1s var(--doux) both;
}

@keyframes lettreDouce {
  0% { opacity: 0; transform: translate3d(0, .45em, 0) rotate(5deg); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.coeur-inline {
  display: inline-block;
  width: .95em;
  height: .88em;
  margin: 0 .06em;
  vertical-align: -.12em;
}

.coeur-inline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: url(#degrade-coeur);
  transform-origin: 50% 55%;
  animation: battement var(--battement) ease-in-out infinite;
}

@keyframes battement {
  0% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(.98); }
  36% { transform: scale(1.07); }
  52%, 100% { transform: scale(1); }
}

@keyframes apparition {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes respiration {
  0%, 100% { opacity: 1; }
  50% { opacity: .42; }
}

/* ---------- 1. Accueil ---------------------------------------------------- */

.accueil-haut,
.accueil-bas {
  transition: opacity .7s ease, transform .9s var(--doux), filter .9s ease;
}

.eclate .accueil-haut { opacity: 0; transform: translate3d(0, -26px, 0); filter: blur(6px); }
.eclate .accueil-bas { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }

.accueil-titre {
  margin: 0 0 5vh;
  max-width: 15em;
  font-style: italic;
  font-weight: 500;
  font-size: 1.85rem;
  font-size: clamp(1.65rem, 6.6vw, 3.2rem);
  line-height: 1.22;
  text-shadow: 0 0 26px rgba(var(--principale-rgb), .55), 0 2px 12px rgba(0, 0, 0, .35);
}

.grand-coeur {
  position: relative;
  display: block;
  width: 52vmin;
  height: 47.8vmin;
  min-width: 150px;
  min-height: 138px;
  max-width: 270px;
  max-height: 248px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  opacity: 0;
}

.pret .grand-coeur { animation: coeurArrivee 1.4s var(--ressort) .75s both; }

@keyframes coeurArrivee {
  0% { opacity: 0; transform: scale(.2) rotate(-14deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.eclate .grand-coeur {
  animation: coeurEclate .62s cubic-bezier(.5, 0, .2, 1) forwards;
  pointer-events: none;
}

@keyframes coeurEclate {
  0% { opacity: 1; transform: scale(1); }
  32% { opacity: 1; transform: scale(.8); }
  100% { opacity: 0; transform: scale(2.3); }
}

.grand-coeur-halo {
  position: absolute;
  top: -34%; left: -34%; right: -34%; bottom: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--principale-rgb), .6), rgba(var(--principale-rgb), .18) 55%, rgba(var(--principale-rgb), 0) 100%);
  animation: halo var(--battement) ease-in-out infinite;
  pointer-events: none;
}

@keyframes halo {
  0%, 100% { transform: scale(.9); opacity: .7; }
  12% { transform: scale(1.08); opacity: 1; }
  36% { transform: scale(1.03); opacity: .95; }
}

.grand-coeur-onde {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(var(--claire-rgb), .75);
  stroke-width: 1.1;
  opacity: 0;
  animation: onde 3s ease-out infinite;
  pointer-events: none;
}
.grand-coeur-onde.deux { animation-delay: 1.5s; }

@keyframes onde {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8); }
}

.grand-coeur-battement {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform-origin: 50% 55%;
  animation: battement var(--battement) ease-in-out infinite;
}

.grand-coeur-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform .2s ease;
}
.gc-base { fill: url(#degrade-coeur); }
.gc-reflet { fill: url(#reflet-coeur); }
.gc-brillance { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 3.4; stroke-linecap: round; }

.grand-coeur:active .grand-coeur-svg { transform: scale(.93); }
.grand-coeur:focus-visible .grand-coeur-halo { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }

@media (hover: hover) {
  .grand-coeur:hover .grand-coeur-battement,
  .grand-coeur:hover .grand-coeur-halo { animation-duration: 1.05s; }
}

.accueil-invite {
  margin: 5vh 0 0;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(var(--texte-rgb), .9);
  opacity: 0;
}

.pret .accueil-invite { animation: apparition 1.2s ease 2s both, respiration 3s ease-in-out 3.2s infinite; }
.accueil-invite .coeur-inline { width: 1.15em; height: 1.06em; margin-left: .2em; vertical-align: -.24em; }

/* ---------- Flash de l'explosion ----------------------------------------- */

.flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .85), rgba(var(--claire-rgb), .35) 22%, rgba(var(--claire-rgb), 0) 62%);
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 255, 255, .85), rgba(var(--claire-rgb), .35) 22%, rgba(var(--claire-rgb), 0) 62%);
}
.flash.actif { animation: flash 1s ease-out; }

@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 2. « JE T'AIME » ---------------------------------------------- */

.jetaime {
  display: inline-block;
  margin: 0;
  font-weight: 600;
  font-size: 3.2rem;
  font-size: clamp(2.8rem, 13vw, 9rem);
  line-height: 1.1;
  letter-spacing: .07em;
  white-space: nowrap;
  color: var(--texte);
}

.lettre-grande {
  display: inline-block;
  opacity: 0;
  animation: lettreGrande 1.15s var(--doux) both;
}

.lettre-grande > .lueur {
  display: inline-block;
  text-shadow: 0 0 22px rgba(var(--principale-rgb), .9), 0 0 54px rgba(var(--principale-rgb), .5);
}

.jetaime.brille .lueur { animation: lueur 2.6s ease-in-out infinite; }

.jetaime .coeur-inline {
  width: .8em;
  height: .74em;
  margin-left: .12em;
  vertical-align: -.03em;
}

@keyframes lettreGrande {
  0% { opacity: 0; transform: translate3d(0, .35em, 0) scale(1.8); filter: blur(18px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes lueur {
  0%, 100% {
    transform: none;
    text-shadow: 0 0 22px rgba(var(--principale-rgb), .9), 0 0 54px rgba(var(--principale-rgb), .5);
  }
  50% {
    transform: translate3d(0, -.04em, 0);
    text-shadow: 0 0 30px rgba(var(--claire-rgb), 1), 0 0 80px rgba(var(--principale-rgb), .85);
  }
}

.jetaime.sort { animation: grandeSortie .8s ease forwards; }

@keyframes grandeSortie {
  to { opacity: 0; transform: scale(1.1); filter: blur(10px); }
}

/* ---------- 3. Le prénom --------------------------------------------------- */

.avant-prenom {
  margin: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  font-size: clamp(1.8rem, 7vw, 3.4rem);
  text-shadow: 0 0 24px rgba(var(--principale-rgb), .6);
}

.mot-doux {
  display: inline-block;
  opacity: 0;
  animation: motEntree 1s var(--doux) both;
}

.ligne-prenom {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0;
  white-space: nowrap;
  font-family: var(--script);
  font-size: 4.4rem;
  font-size: clamp(3.8rem, 19vw, 10.5rem);
  line-height: 1.3;
}

.prenom {
  display: inline-block;
  padding: .1em .32em .24em;
  font-weight: 400;
  color: var(--texte);
  text-shadow: 0 0 24px rgba(var(--principale-rgb), .85), 0 0 60px rgba(var(--principale-rgb), .45);
  opacity: 0;
}

.prenom.en-ecriture {
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 46.3%, rgba(0, 0, 0, 0) 53.7%);
  mask-image: linear-gradient(90deg, #000 46.3%, rgba(0, 0, 0, 0) 53.7%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 81% 0;
  mask-position: 81% 0;
}

.prenom.simple {
  opacity: 1;
  animation: motEntree 1.4s ease both;
}

.prenom.ecrit {
  opacity: 1;
  text-shadow: none;
  background-image: linear-gradient(105deg, var(--texte) 0%, var(--texte) 38%, #fff 46%, var(--claire) 52%, var(--texte) 62%, var(--texte) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(0 0 16px rgba(var(--principale-rgb), .8));
  filter: drop-shadow(0 0 16px rgba(var(--principale-rgb), .8));
  animation: reflet 4s ease-in-out .4s infinite;
}

@keyframes reflet {
  0% { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}

.prenom-coeur {
  display: inline-block;
  width: .44em;
  height: .4em;
  margin-left: -.12em;
  opacity: 0;
  transform: scale(0);
}

.prenom-coeur svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: url(#degrade-coeur);
  transform-origin: 50% 55%;
}

.prenom-coeur.visible { animation: coeurPop .9s var(--ressort) both; }
.prenom-coeur.visible svg { animation: battement var(--battement) ease-in-out .9s infinite; }

@keyframes coeurPop {
  0% { opacity: 0; transform: scale(0) rotate(-25deg); }
  100% { opacity: 1; transform: none; }
}

.scene-prenom.sort .avant-prenom,
.scene-prenom.sort .ligne-prenom { animation: grandeSortie .75s ease forwards; }

/* ---------- 4. Les petits messages ---------------------------------------- */

.ornement {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 1vh;
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity 1.2s ease .2s, transform 1.4s var(--doux) .2s;
}

.scene-messages.est-active .ornement { opacity: .85; transform: none; }

.ornement span {
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--claire-rgb), 0), rgba(var(--claire-rgb), .9));
}
.ornement span:last-child { background: linear-gradient(90deg, rgba(var(--claire-rgb), .9), rgba(var(--claire-rgb), 0)); }

.ornement svg {
  width: 14px;
  height: 13px;
  margin: 0 12px;
  fill: var(--claire);
  animation: battement var(--battement) ease-in-out infinite;
}

.zone-messages {
  position: relative;
  width: 100%;
  max-width: 42rem;
  height: 36vh;
  min-height: 200px;
  max-height: 300px;
}

.message {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.message-texte {
  margin: 0;
  max-width: 19em;
  padding: 0 6px;
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  font-size: clamp(1.5rem, 6vw, 2.7rem);
  line-height: 1.38;
  text-shadow: 0 0 24px rgba(var(--principale-rgb), .55), 0 2px 10px rgba(0, 0, 0, .35);
}

.mot-anime {
  display: inline-block;
  opacity: 0;
  animation: motEntree 1s var(--doux) both;
}

@keyframes motEntree {
  0% { opacity: 0; transform: translate3d(0, .55em, 0); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.message.instantane .mot-anime {
  animation-duration: .3s;
  animation-delay: 0s !important;
}

.message.sort { animation: messageSortie .7s ease forwards; }

@keyframes messageSortie {
  to { opacity: 0; transform: translate3d(0, -14px, 0); filter: blur(6px); }
}

.message-final .message-texte {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 3.4rem;
  font-size: clamp(3.2rem, 15vw, 7rem);
  line-height: 1.2;
  text-shadow: 0 0 26px rgba(var(--principale-rgb), .9), 0 0 70px rgba(var(--principale-rgb), .5);
}

.message-final .coeur-inline {
  width: .55em;
  height: .5em;
  margin-left: .02em;
  vertical-align: -.02em;
}

.bouton-lettre {
  position: relative;
  overflow: hidden;
  margin-top: 3vh;
  padding: .95em 1.8em;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background-color: var(--principale);
  background-image: linear-gradient(135deg, var(--principale), var(--profonde));
  color: #fff;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(var(--principale-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .4);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 18px, 0) scale(.94);
  transition: opacity .9s ease, transform 1s var(--ressort), visibility 0s linear .9s;
}

.bouton-lettre.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .9s ease, transform 1s var(--ressort), visibility 0s;
  animation: lueurBouton 2.4s ease-in-out 1s infinite;
}

.bouton-lettre::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  transform: translate3d(-130%, 0, 0) skewX(-20deg);
  animation: balayage 3.4s ease-in-out 1.6s infinite;
}

.bouton-lettre:active { transform: scale(.96); }
.bouton-lettre:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 4px; }

@keyframes balayage {
  0% { transform: translate3d(-130%, 0, 0) skewX(-20deg); }
  45%, 100% { transform: translate3d(330%, 0, 0) skewX(-20deg); }
}

@keyframes lueurBouton {
  0%, 100% { box-shadow: 0 14px 40px rgba(var(--principale-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
  50% { box-shadow: 0 14px 64px rgba(var(--principale-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
}

.indice-suite {
  position: absolute;
  left: 0; right: 0;
  bottom: 26px;
  bottom: calc(26px + env(safe-area-inset-bottom));
  margin: 0;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(var(--texte-rgb), .72);
  opacity: 0;
  pointer-events: none;
}

.attend-toucher .indice-suite { animation: apparition 1s ease both, respiration 2.8s ease-in-out 1s infinite; }

/* ---------- 5. Le film des photos ----------------------------------------- */

.film-toile {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Assombrit le bas (légende lisible) et le haut (bouton son) de la photo. */
.film-ombre {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image:
    linear-gradient(0deg, rgba(var(--fond-1-rgb), .9) 0%, rgba(var(--fond-1-rgb), .55) 16%, rgba(var(--fond-1-rgb), 0) 38%),
    linear-gradient(180deg, rgba(var(--fond-1-rgb), .5) 0%, rgba(var(--fond-1-rgb), 0) 15%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .36) 100%);
  opacity: 0;
  transition: opacity .9s ease;
}

.scene-film.plein.photo-pleine .film-ombre { opacity: 1; }

.film-titre {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 26px;
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  font-size: clamp(1.85rem, 7.6vw, 3.4rem);
  line-height: 1.25;
  text-shadow: 0 0 26px rgba(var(--principale-rgb), .6), 0 2px 12px rgba(0, 0, 0, .4);
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
  transition: opacity .9s ease, filter .9s ease, transform 1s var(--doux);
}

.film-titre.sort { opacity: 0; filter: blur(8px); transform: translate3d(0, -50%, 0) scale(1.08); }

.film-legende {
  position: absolute;
  left: 0; right: 0;
  bottom: 58px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 22px;
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.35rem;
  font-size: clamp(2.15rem, 9.4vw, 3.6rem);
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 0 18px rgba(var(--principale-rgb), .95), 0 0 44px rgba(var(--principale-rgb), .55), 0 2px 8px rgba(0, 0, 0, .6);
  pointer-events: none;
  transition: opacity .6s ease, filter .6s ease;
}

.film-legende.sort { opacity: 0; filter: blur(6px); }
.film-legende .coeur-inline { width: .55em; height: .5em; margin-left: .04em; vertical-align: -.02em; }

/* Barres de progression, comme les statuts */
.film-barres {
  position: absolute;
  left: 0; right: 0;
  bottom: 30px;
  bottom: calc(30px + env(safe-area-inset-bottom));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.film-barres.visible { opacity: 1; }

.film-barre {
  position: relative;
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .28);
}

.film-barre i {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* La constellation : les photos en perles sur un cœur de lumière */
.film-fin {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.film-fin.visible { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; }

.constellation {
  position: relative;
  width: 86vw;
  max-width: 420px;
  margin-top: 4%;
}

@supports (width: min(1px, 2px)) {
  .constellation { width: min(86vw, 420px, 58vh); }
}

.cst-boite {
  position: relative;
  height: 0;
  padding-top: 92.857%;          /* proportions du cœur : 112 × 104 */
}

.complete .cst-boite { animation: battementDoux var(--battement) ease-in-out infinite; }

@keyframes battementDoux {
  0% { transform: scale(1); }
  12% { transform: scale(1.035); }
  24% { transform: scale(.995); }
  36% { transform: scale(1.02); }
  52%, 100% { transform: scale(1); }
}

.cst-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

.cst-fond { fill: url(#degrade-coeur); opacity: 0; transition: opacity 2.4s ease; }
.trace .cst-fond { opacity: .2; }

.cst-trace { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cst-lueur { stroke: rgba(var(--principale-rgb), .5); stroke-width: 4.5; }
.cst-trait { stroke: #fff6fa; stroke-width: 1.3; }

.cst-medaillons {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

.cst-medaillon {
  position: absolute;
  display: block;
  width: 25%;
  height: 0;
  padding-top: 25%;
  margin: -12.5% 0 0 -12.5%;
  opacity: 0;
  transform: scale(0);
}

.cst-medaillon.visible { opacity: 1; transform: none; animation: perle 1s var(--ressort) both; }

@keyframes perle {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.cst-photo {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 3px solid #fffaf3;
  border-radius: 50%;
  background-color: rgba(var(--claire-rgb), .35);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px rgba(var(--principale-rgb), .55), 0 0 24px rgba(var(--principale-rgb), .85), 0 10px 24px rgba(0, 0, 0, .45);
}

.trace .cst-photo { animation: flotte 4.2s ease-in-out infinite; }

@keyframes flotte {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

/* onde lumineuse quand la photo s'allume */
.cst-medaillon::after {
  content: '';
  position: absolute;
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  border: 2px solid rgba(var(--claire-rgb), .95);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.cst-medaillon.visible::after { animation: onde 1.2s ease-out .05s; }

.cst-nom-ligne {
  position: absolute;
  left: -10%; right: -10%;
  top: 39%;
  margin: 0;
  font-family: var(--script);
  font-size: 2.6rem;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transform: translate3d(0, -50%, 0);
}

.film-fin .bouton-lettre { margin-top: 6vh; }

/* ---------- 6. L'enveloppe ------------------------------------------------- */

.env-cadre { transition: opacity .7s ease, transform .9s var(--doux); }
.disparait .env-cadre { opacity: 0; transform: translate3d(0, 34px, 0) scale(.9); }

.enveloppe {
  position: relative;
  display: block;
  width: 78vw;
  height: 52vw;
  max-width: 340px;
  max-height: 227px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  opacity: 0;
}

.scene-enveloppe.est-active .enveloppe { animation: envArrivee 1.2s var(--ressort) .1s both; }

@keyframes envArrivee {
  0% { opacity: 0; transform: translate3d(0, 40vh, 0) rotate(-14deg) scale(.6); }
  100% { opacity: 1; transform: none; }
}

.enveloppe:focus-visible .env-dos { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 24px 60px rgba(0, 0, 0, .45); }

.env-corps {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  -webkit-perspective: 900px;
  perspective: 900px;
  animation: flotter 3.6s ease-in-out infinite;
}

@keyframes flotter {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1.5deg); }
}

.env-dos,
.env-devant,
.env-rabat,
.env-papier,
.env-texte,
.env-sceau { position: absolute; display: block; }

.env-dos {
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  border-radius: 6px;
  background-color: #f2dfdf;
  background-image: linear-gradient(170deg, rgba(var(--claire-rgb), .6), rgba(var(--profonde-rgb), .28));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.env-papier {
  left: 7%; right: 7%;
  top: 6%;
  height: 86%;
  z-index: 2;
  border-radius: 3px;
  background-color: #fffaf3;
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, rgba(var(--profonde-rgb), .14) 13px, rgba(var(--profonde-rgb), .14) 14px);
  background-size: 76% 60%;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  transition: transform 1s var(--doux) .85s;
}

.env-devant {
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 3;
  border-radius: 0 0 6px 6px;
  background-color: #f8eaea;
  background-image:
    linear-gradient(to bottom right, rgba(0, 0, 0, 0) 49.5%, rgba(var(--profonde-rgb), .16) 50%, rgba(0, 0, 0, 0) 50.6%),
    linear-gradient(to bottom left, rgba(0, 0, 0, 0) 49.5%, rgba(var(--profonde-rgb), .16) 50%, rgba(0, 0, 0, 0) 50.6%),
    linear-gradient(180deg, rgba(var(--claire-rgb), .3), rgba(var(--claire-rgb), .62));
  -webkit-clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}

.env-texte {
  left: 0; right: 0;
  bottom: 5%;
  z-index: 4;
  font-family: var(--script);
  font-size: 2rem;
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  line-height: 1.2;
  color: var(--profonde);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.env-texte .coeur-inline { width: .6em; height: .56em; vertical-align: -.05em; }

.env-rabat {
  top: 0; left: 0;
  width: 100%;
  height: 58%;
  z-index: 5;
  transform-origin: 50% 0;
  background-color: #f0d6d8;
  background-image: linear-gradient(180deg, rgba(var(--claire-rgb), .75), rgba(var(--profonde-rgb), .3));
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .75s cubic-bezier(.45, 0, .2, 1) .25s, z-index 0s linear .62s;
}

.env-sceau {
  top: 58%;
  left: 50%;
  width: 18%;
  height: 0;
  padding-top: 18%;
  margin: -9% 0 0 -9%;
  z-index: 6;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--principale), var(--profonde) 72%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 2px 3px rgba(255, 255, 255, .3);
  transition: transform .45s var(--doux), opacity .45s ease;
}

.env-sceau svg {
  position: absolute;
  top: 30%; left: 28%;
  width: 44%; height: 40%;
  fill: rgba(255, 255, 255, .88);
}

.ouverte .env-sceau { transform: scale(1.6); opacity: 0; }
.ouverte .env-rabat { transform: rotateX(180deg); z-index: 1; }
.ouverte .env-papier { transform: translate3d(0, -62%, 0); }
.ouverte .enveloppe { cursor: default; }

.env-indice {
  margin: 5vh 0 0;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(var(--texte-rgb), .85);
  opacity: 0;
  transition: visibility 0s .3s;
}

.scene-enveloppe.est-active .env-indice { animation: apparition 1s ease 1.2s both, respiration 2.8s ease-in-out 2.2s infinite; }
.ouverte .env-indice { visibility: hidden; }

/* ---------- 7. La lettre --------------------------------------------------- */

.lettre {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 44px 14px 56px;
  padding: calc(44px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  background: rgba(var(--fond-1-rgb), .45);
  opacity: 0;
  transition: opacity 1s ease;
  outline: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.lettre.ouverte { opacity: 1; }

.papier {
  position: relative;
  max-width: 35rem;
  margin: 10px auto 0;
  padding: 3.1rem 1.45rem 2.2rem;
  background-color: #fffaf3;
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(var(--claire-rgb), .07), rgba(var(--claire-rgb), .17));
  color: #43172c;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--profonde-rgb), .08), inset 0 0 70px rgba(var(--profonde-rgb), .07);
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(.95);
  transition: transform 1.2s var(--doux), opacity 1s ease;
}

.lettre.ouverte .papier { opacity: 1; transform: none; }

.papier-sceau {
  position: absolute;
  top: -27px;
  left: 50%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--principale), var(--profonde) 72%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 2px 3px rgba(255, 255, 255, .3);
}

.papier-sceau svg {
  position: absolute;
  top: 16px; left: 15px;
  width: 24px; height: 22px;
  fill: rgba(255, 255, 255, .9);
}

.papier-titre {
  margin: 0 0 .45em;
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.8rem;
  font-size: clamp(2.5rem, 11vw, 3.6rem);
  line-height: 1.15;
  color: var(--profonde);
}

.papier-corps p {
  margin: 0 0 1em;
  font-size: 1.22rem;
  font-size: clamp(1.13rem, 4.6vw, 1.34rem);
  font-weight: 500;
  line-height: 1.7;
  white-space: pre-line;
}

.papier-corps .coeur-inline,
.papier-formule .coeur-inline { width: .9em; height: .82em; vertical-align: -.1em; }

.papier-formule {
  margin: 1.8em 0 0;
  text-align: right;
  font-style: italic;
  font-weight: 500;
  font-size: 1.22rem;
  font-size: clamp(1.13rem, 4.6vw, 1.34rem);
}

.papier-signature {
  margin: .05em 0 0;
  text-align: right;
  font-family: var(--script);
  font-size: 2.7rem;
  font-size: clamp(2.4rem, 10vw, 3.3rem);
  line-height: 1.2;
  color: var(--profonde);
}

.signature-encre { display: inline-block; padding: 0 .15em 0 .3em; }

.papier-signature.visible .signature-encre {
  -webkit-mask-image: linear-gradient(90deg, #000 46.3%, rgba(0, 0, 0, 0) 53.7%);
  mask-image: linear-gradient(90deg, #000 46.3%, rgba(0, 0, 0, 0) 53.7%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: encre 1.8s ease-in-out .15s both;
}

@keyframes encre {
  0% { -webkit-mask-position: 81% 0; mask-position: 81% 0; }
  100% { -webkit-mask-position: 19% 0; mask-position: 19% 0; }
}

.papier-coeur {
  display: block;
  width: 62px;
  height: 52px;
  margin: .2rem 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: var(--principale);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.papier-coeur .trace { transition: stroke-dashoffset 1.8s ease-in-out; }

.revele {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(4px);
  transition: opacity 1.1s ease, transform 1.2s var(--doux), filter 1.1s ease;
}

.revele.visible { opacity: 1; transform: none; filter: blur(0); }

@media (min-width: 600px) {
  .lettre { padding-top: 64px; padding-top: calc(64px + env(safe-area-inset-top)); }
  .papier { padding: 3.6rem 3rem 2.8rem; }
}

/* Photos */
.souvenirs {
  max-width: 44rem;
  margin: 3.2rem auto 0;
  text-align: center;
}

.souvenirs-titre {
  margin: 0 0 1.2rem;
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.6rem;
  font-size: clamp(2.3rem, 9vw, 3.3rem);
  line-height: 1.2;
  color: var(--texte);
  text-shadow: 0 0 22px rgba(var(--principale-rgb), .8);
}

.polaroids {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  margin: -8px;
}

.polaroid {
  display: block;
  width: 44%;
  width: calc(50% - 16px);
  max-width: 240px;
  margin: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: center;
}

.polaroids.un-seul .polaroid { width: 78%; max-width: 330px; }

.polaroid-cadre {
  display: block;
  padding: 9px 9px 0;
  background: #fffdf9;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transition: box-shadow .3s ease;
}

.polaroid-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background: #f1e6e9;
}

.polaroid-photo img,
.polaroid-photo video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;      /* photos en hauteur : le visage reste dans le cadre */
}

/* Bouton « lecture » sur les vidéos */
.polaroid-lecture {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(var(--profonde-rgb), .55);
  box-shadow: 0 0 18px rgba(var(--principale-rgb), .8);
}

.polaroid-lecture svg {
  position: absolute;
  top: 11px; left: 13px;
  width: 22px; height: 22px;
  fill: #fff;
}

.polaroid-legende {
  display: block;
  min-height: 2.4em;
  padding: .25em .2em .45em;
  font-family: var(--script);
  font-size: 1.45rem;
  line-height: 1.1;
  color: #5a2340;
}

.polaroid-legende .coeur-inline,
.visionneuse-figure figcaption .coeur-inline { width: .62em; height: .57em; vertical-align: -.04em; }

@media (hover: hover) {
  .polaroid:hover .polaroid-cadre { box-shadow: 0 20px 44px rgba(0, 0, 0, .55); }
}

.lettre-fin {
  margin: 2.6rem auto 0;
  text-align: center;
}

.bouton-doux {
  display: inline-block;
  padding: .95em 1.6em;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--texte);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .3s ease;
}

.bouton-doux svg {
  width: 15px;
  height: 15px;
  margin-right: .5em;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .bouton-doux:hover { background-color: rgba(255, 255, 255, .18); }
}

/* ---------- Bouton musique ------------------------------------------------ */

.bouton-son {
  position: fixed;
  top: 14px;
  right: 14px;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--texte);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 1s ease, background-color .3s ease;
}

.pret .bouton-son, .lecture .bouton-son { opacity: .9; }
.lecture .bouton-son { background-color: rgba(var(--fond-1-rgb), .55); }
.bouton-son:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 3px; }

.barres {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  height: 16px;
}

.barres span {
  display: block;
  width: 3px;
  height: 16px;
  margin: 0 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 100%;
  transform: scaleY(.45);
}
.barres span:nth-child(2) { transform: scaleY(.85); }
.barres span:nth-child(3) { transform: scaleY(.6); }
.barres span:nth-child(4) { transform: scaleY(1); }

.joue .barres span { animation: egaliseur .9s ease-in-out infinite alternate; }
.joue .barres span:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.joue .barres span:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
.joue .barres span:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }

@keyframes egaliseur {
  from { transform: scaleY(.25); }
  to { transform: scaleY(1); }
}

.son-coupe {
  display: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coupe .barres { display: none; }
.coupe .son-coupe { display: block; }

/* ---------- Visionneuse --------------------------------------------------- */

.visionneuse {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 56px 12px;
  background: rgba(var(--fond-1-rgb), .92);
  opacity: 0;
  transition: opacity .35s ease;
}

.visionneuse.ouverte { opacity: 1; }

.visionneuse-figure {
  margin: 0;
  max-width: 100%;
  text-align: center;
  transform: scale(.94);
  transition: transform .4s var(--doux);
}

.visionneuse.ouverte .visionneuse-figure { transform: none; }

.visionneuse-figure img,
.visionneuse-figure video {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  border: 8px solid #fffdf9;
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.visionneuse-figure video { background: #000; }

.visionneuse-figure figcaption {
  margin-top: .5em;
  font-family: var(--script);
  font-size: 2rem;
  color: var(--texte);
  text-shadow: 0 0 18px rgba(var(--principale-rgb), .8);
}

.visionneuse-bouton {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}

.visionneuse-bouton svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visionneuse-fermer { top: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); }
.visionneuse-prec { left: 10px; top: 50%; margin-top: -23px; }
.visionneuse-suiv { right: 10px; top: 50%; margin-top: -23px; }
.une-seule .visionneuse-prec, .une-seule .visionneuse-suiv { display: none; }

/* ---------- Divers --------------------------------------------------------- */

.alerte-config {
  position: fixed;
  left: 10px; right: 10px;
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: .8em 1em;
  border-radius: 10px;
  background: #fff4d6;
  color: #5c3b00;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.sans-js {
  position: fixed;
  top: 50%; left: 0; right: 0;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: 1.6rem;
  font-style: italic;
  transform: translateY(-50%);
  z-index: 11;
}

/* Écrans bas (téléphone à l'horizontale) */
@media (max-height: 520px) {
  .accueil-titre { margin-bottom: 3vh; font-size: 1.5rem; }
  .accueil-invite { margin-top: 3vh; }
  .grand-coeur { width: 42vmin; height: 38.6vmin; min-width: 120px; min-height: 110px; }
  .zone-messages { height: 54vh; min-height: 150px; }
  .message-texte { font-size: 1.35rem; }
  .bouton-lettre { margin-top: 1vh; font-size: 1.05rem; }
  .ligne-prenom { font-size: 4.2rem; font-size: clamp(3rem, 24vh, 7rem); }
  .avant-prenom { font-size: 1.6rem; }
  .enveloppe { width: 48vh; height: 32vh; }
  .env-texte { font-size: 1.3rem; font-size: 5.4vh; }
  .env-indice { margin-top: 3vh; }
  .film-titre { font-size: 1.6rem; }
  .film-legende { bottom: 34px; font-size: 1.9rem; }
  .film-barres { bottom: 14px; }
  .constellation { width: 56vh; margin-top: 2%; }
  .film-fin .bouton-lettre { margin-top: 5vh; }
}

/* Très petits téléphones */
@media (max-width: 340px) {
  .accueil-invite,
  .indice-suite,
  .env-indice { letter-spacing: .16em; }
  .bouton-lettre { padding: .9em 1.3em; font-size: 1.08rem; }
}

/* ---------- Mode léger (téléphones modestes) ------------------------------ */

.leger .aurore { animation: none; }
.leger .voile::after { display: none; }
.leger .lettre-douce { animation-name: apparition; }
.leger .lettre-grande { animation-name: lettreGrandeLegere; }
.leger .mot-anime,
.leger .mot-doux { animation-name: apparition; }
.leger .revele { filter: none; }
.leger .film-titre.sort,
.leger .film-legende.sort { filter: none; }
.leger .cst-photo { box-shadow: 0 0 0 2px rgba(var(--principale-rgb), .55), 0 8px 18px rgba(0, 0, 0, .45); }
.leger .prenom.ecrit { -webkit-filter: none; filter: none; text-shadow: none; }
.leger .bouton-son,
.leger .bouton-doux { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(var(--fond-2-rgb), .7); }

@keyframes lettreGrandeLegere {
  0% { opacity: 0; transform: translate3d(0, .3em, 0) scale(1.5); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Animations réduites (réglage du téléphone) -------------------- */

@media (prefers-reduced-motion: reduce) {
  .aurore { animation: none; }
  .lettre-douce, .lettre-grande, .mot-anime, .mot-doux, .prenom.simple { animation-name: fondu !important; }
  .grand-coeur-onde { display: none; }
  .env-corps { animation: none; }
  .bouton-lettre::after { animation: none; }
  .revele { transform: none; filter: none; }
  .complete .cst-boite, .trace .cst-photo, .prenom.ecrit { animation: none; }
  .cst-medaillon.visible { animation-name: fondu; }
  .cst-medaillon.visible::after { animation: none; }
}

@keyframes fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}