/* Écrin · la lettre scellée.
   Racine .fp-ecrin ; toutes les classes en .fp-ecrin-* ; variables propres
   --fp-ecrin-* ; jetons du coloris : --fp-* (posés par le moteur).
   États du moteur : .fpe-reduit, .fpe-in, .fpe-passe, .fpe-jour.
   Seule ressource : assets/papier.webp (grain), teintée en JS par coloris. */

.fp-ecrin {
  --fp-ecrin-serif: "FP Cormorant", "Cormorant Garamond", Georgia, serif;
  --fp-ecrin-script: "FP Pinyon", "FP Cormorant", cursive;
  --fp-ecrin-or: var(--fp-accent);
  --fp-ui-font: var(--fp-ecrin-serif);
  font-family: var(--fp-ecrin-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fp-encre);
  background: var(--fp-papier);
  font-variant-numeric: lining-nums;
}
.fp-ecrin canvas, .fp-ecrin svg { max-width: none; }
.fp-ecrin .fpe-btn-passer { font-size: 17px; letter-spacing: .12em; font-variant-caps: all-small-caps; font-weight: 500; }

/* ═════════ 0 · Ouverture ═════════ */
.fp-ecrin .fpe-intro { background: var(--fp-enveloppe); }
.fp-ecrin-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.fp-ecrin-scene.fp-ecrin-prete { opacity: 1; }
.fp-ecrin-fond {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--fp-fond) 70%, var(--fp-enveloppe)) 0%, var(--fp-fond) 100%);
}
.fp-ecrin-calque, .fp-ecrin-rayons, .fp-ecrin-halo, .fp-ecrin-carte {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
}
.fp-ecrin-dos { z-index: 1; }
.fp-ecrin-rabat-wrap {
  position: absolute; inset: 0; z-index: 9;
  perspective: 1200px;
  perspective-origin: 50% 45%;
  pointer-events: none;
}
.fp-ecrin-rabat {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.fp-ecrin-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fp-ecrin-face--int { transform: rotateY(180deg); }
.fp-ecrin-face canvas { position: absolute; left: 0; top: 0; }
.fp-ecrin-face-voile { opacity: 0; }
.fp-ecrin-face--int .fp-ecrin-face-voile { opacity: .5; }
.fp-ecrin-face-lum { opacity: 0; mix-blend-mode: screen; }
.fp-ecrin-lum-arriere { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.fp-ecrin-carte { z-index: 4; }
.fp-ecrin-poche { z-index: 5; }
.fp-ecrin-or { z-index: 6; }
.fp-ecrin-ombre-rabat { z-index: 7; }
.fp-ecrin-bouche { z-index: 8; opacity: 0; mix-blend-mode: screen; }
.fp-ecrin-liseres { z-index: 8; opacity: 0; mix-blend-mode: screen; }
.fp-ecrin-lum-avant { position: absolute; inset: 0; z-index: 10; pointer-events: none; mix-blend-mode: screen; }
.fp-ecrin-poussiere-lum { z-index: 10; mix-blend-mode: screen; }
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-lum-arriere,
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-lum-avant { mix-blend-mode: normal; }
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-bouche,
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-liseres { mix-blend-mode: multiply; }

.fp-ecrin-halo {
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, #FFF3D6 0%, rgba(255, 217, 160, .82) 35%, rgba(255, 200, 140, .22) 56%, rgba(255, 190, 130, 0) 70%);
}
.fp-ecrin-halo--avant { background: radial-gradient(closest-side, rgba(255, 244, 222, .95) 0%, rgba(255, 224, 172, .62) 22%, rgba(255, 206, 150, .26) 46%, rgba(255, 196, 140, .08) 62%, rgba(255, 190, 130, 0) 72%); }
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-halo { background: radial-gradient(closest-side, rgba(255, 236, 196, .95) 0%, rgba(232, 182, 112, .55) 35%, rgba(214, 160, 90, .14) 56%, rgba(214, 160, 90, 0) 70%); }
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-halo--avant { background: radial-gradient(closest-side, rgba(255, 244, 222, .7) 0%, rgba(236, 196, 130, .3) 40%, rgba(236, 196, 130, 0) 70%); }
.fp-ecrin-rayons { opacity: 0; }
/* Couches de lumière hors du rendu tant qu'elles sont éteintes (la chorégraphie les allume). */
.fp-ecrin-halo, .fp-ecrin-rayons, .fp-ecrin-liseres, .fp-ecrin-poussiere-lum, .fp-ecrin-eclats, .fp-ecrin-face-lum, .fp-ecrin-bouche { visibility: hidden; }

/* La carte : même papier que la page (la bascule vers l'accueil est invisible). */
.fp-ecrin-carte {
  transform-origin: 0 0;
  background-color: var(--fp-papier);
  background-image: var(--fp-ecrin-tuile-a, none);
  background-size: 256px 256px;
  background-position: 0 0;
  box-shadow: 0 16px 40px rgba(20, 6, 6, calc(.42 * var(--fp-ecrin-ombre, 1))), 0 2px 6px rgba(20, 6, 6, calc(.22 * var(--fp-ecrin-ombre, 1)));
}
.fp-ecrin-carte-filet { position: absolute; border: 1px solid var(--fp-dorure); opacity: var(--fp-ecrin-filets, 1); }
.fp-ecrin-carte-filet--1 { inset: 12px; }
.fp-ecrin-carte-filet--2 { inset: 16px; border-width: .75px; }
.fp-ecrin-carte-mono {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--fp-ecrin-script);
  color: var(--fp-dorure);
  line-height: 1;
  white-space: nowrap;
}
.fp-ecrin-carte-mono em { font-style: normal; font-size: .62em; margin: 0 .16em; }
.fp-ecrin-carte-orn { display: block; width: 92px; height: 12px; margin-top: .22em; }
.fp-ecrin[data-coloris="bordeaux"] .fp-ecrin-carte-mono, .fp-ecrin[data-coloris="sapin"] .fp-ecrin-carte-mono { color: color-mix(in srgb, var(--fp-dorure) 80%, var(--fp-accent)); }
.fp-ecrin-carte-vignette { position: absolute; inset: 0; opacity: var(--fp-ecrin-vignette, 0); background: radial-gradient(130% 95% at 50% 42%, transparent 58%, rgba(70, 40, 25, .10) 100%); }

/* Cachet */
.fp-ecrin-sceau-zone { position: absolute; z-index: 11; pointer-events: none; }
.fp-ecrin-sceau {
  position: absolute; left: 50%; top: 50%;
  transform-origin: 50% 50%;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: manipulation;
}
.fp-ecrin-sceau:focus { outline: none; }
/* Anneau de focus dès que le clavier sert (le moteur place le focus sur le cachet au chargement). */
.fp-ecrin-clavier .fp-ecrin-sceau:focus-visible { outline: 2px solid var(--fp-dorure); outline-offset: 6px; }
.fp-ecrin-sceau-cv, .fp-ecrin-moitie { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.fp-ecrin-sceau-lueur { opacity: 0; }
.fp-ecrin-moitie { visibility: hidden; }
.fp-ecrin-eclats { position: absolute; left: 0; top: 0; pointer-events: none; }
.fp-ecrin-sceau-halo {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 222, 176, .55) 0%, rgba(255, 210, 160, .22) 45%, rgba(255, 200, 150, 0) 100%);
  opacity: .35;
  animation: fp-ecrin-respire 3.6s ease-in-out infinite;
}
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-sceau-halo { background: radial-gradient(closest-side, rgba(196, 140, 80, .32) 0%, rgba(196, 140, 80, .12) 45%, rgba(196, 140, 80, 0) 100%); }
@keyframes fp-ecrin-respire {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.05); }
}
.fp-ecrin-invite {
  position: absolute; left: 0; right: 0; z-index: 12;
  text-align: center;
  font-style: italic;
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--fp-texte-enveloppe);
  opacity: 0;
  pointer-events: none;
  animation: fp-ecrin-invite-entre .9s ease 1s forwards, fp-ecrin-pulse 2.4s ease-in-out 1.9s infinite;
}
.fp-ecrin-invite::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin: 10px auto 0;
  border-left: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
@keyframes fp-ecrin-invite-entre { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fp-ecrin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.fp-ecrin-ouverte .fp-ecrin-invite, .fp-ecrin-ouverte .fp-ecrin-sceau-halo { animation: none; }
.fp-ecrin-ouverte .fp-ecrin-sceau-halo { background: radial-gradient(closest-side, rgba(255, 236, 200, .9) 0%, rgba(255, 210, 150, .45) 40%, rgba(255, 196, 140, 0) 100%); mix-blend-mode: screen; }
.fp-ecrin[data-coloris="ivoire"] .fp-ecrin-ouverte .fp-ecrin-sceau-halo { background: radial-gradient(closest-side, rgba(255, 214, 150, .85) 0%, rgba(230, 170, 100, .35) 40%, rgba(230, 170, 100, 0) 100%); mix-blend-mode: normal; }
.fp-ecrin-ouverte { cursor: default; }
.fp-ecrin.fpe-reduit .fp-ecrin-invite { animation: none; opacity: 1; }
.fp-ecrin.fpe-reduit .fp-ecrin-sceau-halo { animation: none; opacity: 0; }

/* ═════════ Page : structure commune ═════════ */
.fp-ecrin-decor { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fp-ecrin-decor-collant {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  background: radial-gradient(130% 95% at 50% 42%, transparent 58%, rgba(70, 40, 25, .10) 100%);
}
.fp-ecrin-s {
  position: relative;
  overflow-x: clip;
  padding: 120px 24px 112px;
  background-color: var(--fp-papier);
  background-image: var(--fp-ecrin-tuile-a, none);
  background-size: 256px 256px;
  background-position: 0 var(--fp-ecrin-ty, 0px);
}
.fp-ecrin-ton-b { background-color: var(--fp-papier-sombre); background-image: var(--fp-ecrin-tuile-b, none); }
.fp-ecrin-s.fp-ecrin-ton-bande { padding-top: 104px; padding-bottom: 96px; }
.fp-ecrin-ton-bande { background-color: var(--fp-bande); background-image: var(--fp-ecrin-tuile-bande, none); color: var(--fp-bande-encre); }
.fp-ecrin-col { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; text-align: center; min-width: 0; }

/* Bord de papier déchiré : la feuille du dessus recouvre le haut de la suivante. */
.fp-ecrin-dechire { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 1; pointer-events: none; }
.fp-ecrin-dechire > span {
  position: absolute; inset: 0;
  -webkit-mask-size: 1600px 48px; mask-size: 1600px 48px;
  -webkit-mask-position: center top; mask-position: center top;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.fp-ecrin-dechire-ombre { background-size: 1600px 48px; background-position: center top; background-repeat: repeat-x; }
.fp-ecrin-dechire-papier { background-size: 256px 256px; background-position: 0 var(--fp-ecrin-ty, 0px); }
.fp-ecrin-dechire--a .fp-ecrin-dechire-papier { background-color: var(--fp-papier); background-image: var(--fp-ecrin-tuile-a, none); }
.fp-ecrin-dechire--b .fp-ecrin-dechire-papier { background-color: var(--fp-papier-sombre); background-image: var(--fp-ecrin-tuile-b, none); }
.fp-ecrin-dechire--bande .fp-ecrin-dechire-papier { background-color: var(--fp-bande); background-image: var(--fp-ecrin-tuile-bande, none); }
.fp-ecrin-dechire-fibre { background: color-mix(in srgb, var(--fp-papier) 45%, #FFFFFF); }
.fp-ecrin-dechire--bande .fp-ecrin-dechire-fibre { background: color-mix(in srgb, var(--fp-bande) 72%, #FFFFFF); }

/* Titres de section : petit fleuron doré, titre en italique. */
.fp-ecrin-titre { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 48px; }
.fp-ecrin-titre-orn { position: relative; width: 88px; height: 9px; }
.fp-ecrin-titre-orn::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fp-ecrin-or) 30%, var(--fp-ecrin-or) 40%, transparent 41%, transparent 59%, var(--fp-ecrin-or) 60%, var(--fp-ecrin-or) 70%, transparent);
}
.fp-ecrin-titre-orn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--fp-ecrin-or); transform: rotate(45deg);
}
.fp-ecrin-titre-txt { font-style: italic; font-size: 36px; line-height: 1.15; font-weight: 400; letter-spacing: .005em; text-wrap: balance; }
.fp-ecrin-etiquette {
  font-size: 16px; font-weight: 500;
  letter-spacing: .24em;
  font-variant-caps: all-small-caps;
  color: var(--fp-encre-douce);
}

/* Ornements de coins : brins au trait doré, tracés à l'arrivée. */
.fp-ecrin-orn { position: absolute; z-index: 1; width: 64px; height: 64px; overflow: visible; pointer-events: none; }
.fp-ecrin-orn--hg { left: 14px; top: 52px; }
.fp-ecrin-orn--bd { right: 14px; bottom: 16px; transform: rotate(180deg); }
.fp-ecrin-orn path { fill: none; stroke: var(--fp-ecrin-or); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.fp-ecrin-orn .fp-ecrin-orn-f { fill: var(--fp-ecrin-or); fill-opacity: 0; }
.fp-ecrin-orn.fp-ecrin-trace path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) .1s, fill-opacity .5s ease 1.1s; }
.fp-ecrin-orn.fp-ecrin-trace .fp-ecrin-orn-f { fill-opacity: .1; }
.fp-ecrin-orn--discret { opacity: .75; }
.fp-ecrin-orn.fp-ecrin-instant path { transition: none; }

/* ═════════ 1 · Accueil ═════════ */
.fp-ecrin-s--accueil {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 84px);
  overflow: hidden;
}
.fp-ecrin-poussiere { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.fp-ecrin-arche-boite { position: relative; z-index: 1; }
.fp-ecrin-arche { position: absolute; left: 0; top: 0; overflow: visible; }
.fp-ecrin-arche-filets path { fill: none; stroke: var(--fp-ecrin-or); stroke-dasharray: 1; stroke-dashoffset: 1; }
.fp-ecrin-arche-filets .fp-ecrin-cle { fill: var(--fp-ecrin-or); fill-opacity: 0; transition: fill-opacity .6s ease 1.5s; }
.fp-ecrin-acc-anime .fp-ecrin-cle, .fp-ecrin-acc-fini .fp-ecrin-cle, .fp-ecrin.fpe-reduit .fp-ecrin-cle { fill-opacity: .35; }
.fp-ecrin-rameaux path { fill: none; stroke: var(--fp-ecrin-or); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fp-ecrin-rameaux .fp-ecrin-ram-f { fill: var(--fp-ecrin-or); fill-opacity: 0; }
.fp-ecrin-acc-texte {
  position: absolute; left: 9%; right: 9%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.fp-ecrin-kicker { font-size: 16px; font-weight: 500; letter-spacing: .3em; font-variant-caps: all-small-caps; color: var(--fp-encre-douce); margin-bottom: 18px; }
.fp-ecrin-prenoms { display: flex; flex-direction: column; align-items: center; width: 100%; font-weight: 400; margin: 0 0 22px; }
.fp-ecrin-acc-prenom { display: block; width: 100%; }
.fp-ecrin-prenom {
  display: block;
  font-family: var(--fp-ecrin-script);
  font-size: 72px;
  line-height: 1.18;
  white-space: nowrap;
  padding: 0 .12em;
  color: var(--fp-encre);
}
.fp-ecrin-prenom--coupe { white-space: normal; line-height: 1.08; }
.fp-ecrin-et { font-family: var(--fp-ecrin-script); font-size: calc(var(--fp-ecrin-prenom, 72px) * .8); line-height: .8; color: var(--fp-encre); margin: -.02em 0 .04em; }
.fp-ecrin-acc-date { font-size: 18px; font-weight: 500; letter-spacing: .2em; font-variant-caps: all-small-caps; margin-bottom: 6px; }
.fp-ecrin-acc-lieu { font-style: italic; font-size: 20px; color: var(--fp-encre-douce); }
.fp-ecrin-defiler {
  position: absolute; left: 0; right: 0; z-index: 1;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; letter-spacing: .26em; font-variant-caps: all-small-caps;
  color: var(--fp-encre-douce);
}
.fp-ecrin-chevron {
  width: 9px; height: 9px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.fp-ecrin-acc-fini .fp-ecrin-chevron, .fp-ecrin-acc-anime .fp-ecrin-chevron { animation: fp-ecrin-glisse 2.4s ease-in-out 2.4s infinite; }
@keyframes fp-ecrin-glisse { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(4px) rotate(45deg); } }

/* État initial (sous la carte) puis animation lancée à 2,7 s de l'ouverture. */
.fp-ecrin-acc-l { opacity: 0; transform: translate3d(0, 8px, 0); }
.fp-ecrin-acc-anime .fp-ecrin-acc-l {
  opacity: 1; transform: none;
  transition: opacity .6s ease var(--fp-ecrin-delai, 0s), transform .6s cubic-bezier(.22, 1, .36, 1) var(--fp-ecrin-delai, 0s);
}
.fp-ecrin-acc-anime .fp-ecrin-arche-filets path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1); }
.fp-ecrin-acc-anime .fp-ecrin-rameaux path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.45, 0, .3, 1) var(--fp-ecrin-d, .2s), fill-opacity .5s ease calc(var(--fp-ecrin-d, .2s) + .8s); }
.fp-ecrin-acc-anime .fp-ecrin-rameaux .fp-ecrin-ram-f, .fp-ecrin-acc-fini .fp-ecrin-rameaux .fp-ecrin-ram-f { fill-opacity: .1; }
.fp-ecrin-acc-fini .fp-ecrin-acc-l { opacity: 1; transform: none; transition: none; }
.fp-ecrin-acc-fini .fp-ecrin-arche-filets path, .fp-ecrin-acc-fini .fp-ecrin-rameaux path { stroke-dashoffset: 0; transition: none; }
.fp-ecrin-instant, .fp-ecrin-instant * { transition: none !important; }

/* ═════════ 2 · Le mot ═════════ */
.fp-ecrin-annonce { display: flex; flex-direction: column; align-items: center; gap: 8px; text-wrap: balance; }
.fp-ecrin-l--prenoms { font-size: 26px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.fp-ecrin-l--formule { font-style: italic; font-size: 22px; line-height: 1.45; }
.fp-ecrin-l--parents { font-size: 21px; line-height: 1.4; }
.fp-ecrin-l--liaison { font-style: italic; font-size: 19px; color: var(--fp-encre-douce); }
.fp-ecrin-l--signature { font-family: var(--fp-ecrin-script); font-size: 44px; line-height: 1.3; margin-top: 14px; }
.fp-ecrin-l-morceau { display: inline-block; }
.fp-ecrin-s--mot .fp-ecrin-l--parents + .fp-ecrin-l--formule { margin-top: 10px; }
.fp-ecrin-s--mot .fp-ecrin-l--formule + .fp-ecrin-l--prenoms { margin-top: 14px; margin-bottom: 0; }
.fp-ecrin-separe { position: relative; width: 88px; height: 9px; margin: 40px auto 36px; }
.fp-ecrin-separe::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, transparent, var(--fp-ecrin-or) 35%, transparent 44%, transparent 56%, var(--fp-ecrin-or) 65%, transparent); }
.fp-ecrin-separe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--fp-ecrin-or); transform: rotate(45deg); }
.fp-ecrin-mot-libre { font-size: 20px; line-height: 1.6; text-wrap: balance; max-width: 30em; margin: 0 auto; }

/* ═════════ 3 · Compte à rebours, sur bande ═════════ */
.fp-ecrin-cd-titre { font-size: 17px; font-weight: 500; letter-spacing: .3em; font-variant-caps: all-small-caps; color: var(--fp-bande-encre); margin-bottom: 26px; }
.fp-ecrin-cd-cadre { position: relative; padding: 30px 6px 26px; border: 1px solid color-mix(in srgb, var(--fp-bande-or) 75%, transparent); max-width: 460px; margin: 0 auto; }
.fp-ecrin-cd-cadre::before { content: ""; position: absolute; inset: 4px; border: .75px solid color-mix(in srgb, var(--fp-bande-or) 45%, transparent); pointer-events: none; }
.fp-ecrin-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-ecrin-cd-u { display: flex; flex-direction: column; align-items: center; padding: 0 2px; min-width: 0; }
.fp-ecrin-cd-u + .fp-ecrin-cd-u { border-left: 1px solid color-mix(in srgb, var(--fp-bande-or) 55%, transparent); }
.fp-ecrin-cd-n {
  font-weight: 400;
  font-size: clamp(42px, 13vw, 62px);
  line-height: 1.04;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fp-bande-or);
  background-image: linear-gradient(100deg, var(--fp-bande-or) 0 42%, #FFF4DC 50%, var(--fp-bande-or) 58% 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}
.fp-ecrin-allume .fp-ecrin-cd-n { opacity: 1; animation: fp-ecrin-dore 1.3s cubic-bezier(.3, .6, .3, 1) both; }
.fp-ecrin-allume .fp-ecrin-cd-u:nth-child(2) .fp-ecrin-cd-n { animation-delay: .12s; }
.fp-ecrin-allume .fp-ecrin-cd-u:nth-child(3) .fp-ecrin-cd-n { animation-delay: .24s; }
.fp-ecrin-allume .fp-ecrin-cd-u:nth-child(4) .fp-ecrin-cd-n { animation-delay: .36s; }
@keyframes fp-ecrin-dore {
  0% { opacity: 0; background-position: 100% 0; filter: drop-shadow(0 0 0 rgba(255, 220, 160, 0)); }
  30% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 220, 160, .55)); }
  100% { opacity: 1; background-position: 0 0; filter: drop-shadow(0 0 0 rgba(255, 220, 160, 0)); }
}
.fp-ecrin-allume.fp-ecrin-instant .fp-ecrin-cd-n, .fp-ecrin.fpe-reduit .fp-ecrin-cd-n { animation: none; opacity: 1; background-position: 0 0; }
.fp-ecrin-cd-l { font-size: 14px; font-weight: 500; letter-spacing: .1em; font-variant-caps: all-small-caps; margin-top: 8px; color: var(--fp-bande-encre); }
.fp-ecrin-cd-msg { grid-column: 1 / -1; font-style: italic; font-size: 22px; line-height: 1.4; padding: 0 12px; text-wrap: balance; }
.fp-ecrin-cd.fpe-passe .fp-ecrin-cd-u, .fp-ecrin-cd.fpe-jour .fp-ecrin-cd-u { display: none; }
.fp-ecrin-cd.fpe-passe .fp-ecrin-cd-msg, .fp-ecrin-cd.fpe-jour .fp-ecrin-cd-msg { padding: 8px 12px; }

/* ═════════ 4 · Programme ═════════ */
.fp-ecrin-frise {
  --fp-ecrin-axe: calc((100% - 32px) * .3 + 16px);
  position: relative;
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px;
  text-align: left;
}
.fp-ecrin-frise-ligne { position: absolute; left: var(--fp-ecrin-axe); width: 1px; margin-left: -.5px; background: var(--fp-ecrin-or); opacity: .8; }
.fp-ecrin-goutte { position: absolute; left: var(--fp-ecrin-axe); top: 0; width: 0; height: 0; z-index: 3; will-change: transform; }
.fp-ecrin-goutte-cv { position: absolute; }
.fp-ecrin-moment { position: relative; display: grid; grid-template-columns: minmax(0, .3fr) 32px minmax(0, .7fr); align-items: start; }
.fp-ecrin-m-gauche { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; padding-top: 1px; }
.fp-ecrin-m-picto { position: relative; width: 30px; height: 30px; color: var(--fp-ecrin-or); }
.fp-ecrin-m-picto svg { position: absolute; left: 0; top: 0; }
.fp-ecrin-pic-fond { opacity: .3; }
.fp-ecrin-pic-trace * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .3, 1); }
.fp-ecrin-atteint .fp-ecrin-pic-trace * { stroke-dashoffset: 0; }
.fp-ecrin-m-heure { font-size: 19px; font-weight: 500; letter-spacing: .04em; line-height: 1.2; color: var(--fp-encre-douce); transition: color .6s ease; white-space: nowrap; }
.fp-ecrin-m-point {
  position: relative; z-index: 1;
  justify-self: center;
  width: 11px; height: 11px; margin-top: 8px;
  border-radius: 50%;
  border: 1px solid var(--fp-ecrin-or);
  background: var(--fp-papier);
  transition: background-color .6s ease, box-shadow .6s ease;
}
.fp-ecrin-atteint .fp-ecrin-m-point { background: var(--fp-dorure); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-dorure) 25%, transparent); }
.fp-ecrin-m-droite { padding-top: 0; min-width: 0; }
.fp-ecrin-m-titre { font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--fp-encre-douce); transition: color .6s ease; text-wrap: balance; }
.fp-ecrin-atteint .fp-ecrin-m-heure, .fp-ecrin-atteint .fp-ecrin-m-titre { color: var(--fp-encre); }
.fp-ecrin-m-detail { font-style: italic; font-size: 18px; line-height: 1.4; margin-top: 4px; color: var(--fp-encre-douce); text-wrap: pretty; }
.fp-ecrin.fpe-reduit .fp-ecrin-pic-trace * { stroke-dashoffset: 0; transition: none; }

/* ═════════ 5 · Lieux ═════════ */
.fp-ecrin-lieux { display: flex; flex-direction: column; gap: 32px; max-width: 480px; margin: 0 auto; }
.fp-ecrin-lieu {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 40px 24px 34px;
  background: color-mix(in srgb, var(--fp-papier) 55%, transparent);
}
.fp-ecrin-lieu-cadre { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.fp-ecrin-lieu-cadre path { fill: none; stroke: var(--fp-ecrin-or); stroke-linecap: round; }
.fp-ecrin-lieu-picto { color: var(--fp-ecrin-or); margin-bottom: 4px; }
.fp-ecrin-lieu-nom { font-size: 25px; font-weight: 500; line-height: 1.22; margin-top: 2px; text-wrap: balance; }
.fp-ecrin-lieu-adresse { font-size: 19px; color: var(--fp-encre-douce); text-wrap: balance; }
.fp-ecrin-lieu-heure { font-style: italic; font-size: 20px; text-wrap: balance; }
.fp-ecrin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.fp-ecrin-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--fp-ecrin-or);
  background: color-mix(in srgb, var(--fp-papier) 70%, transparent);
  color: var(--fp-encre);
  font-size: 17px; font-weight: 500; letter-spacing: .1em; font-variant-caps: all-small-caps;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .fp-ecrin-bouton:hover { background: color-mix(in srgb, var(--fp-dorure) 18%, var(--fp-papier)); box-shadow: inset 0 0 0 3px var(--fp-papier), inset 0 0 0 4px color-mix(in srgb, var(--fp-ecrin-or) 55%, transparent); }
}
.fp-ecrin-bouton:focus-visible, .fp-ecrin-pilule:focus-visible, .fp-ecrin-revoir:focus-visible, .fp-ecrin .fpe-mention:focus-visible { outline: 2px solid var(--fp-encre); outline-offset: 3px; }

/* ═════════ 6 · Bon à savoir ═════════ */
.fp-ecrin-infos { display: flex; flex-direction: column; align-items: center; max-width: 30em; margin: 0 auto; }
.fp-ecrin-info { padding: 0; }
.fp-ecrin-info + .fp-ecrin-info { margin-top: 26px; padding-top: 26px; position: relative; }
.fp-ecrin-info + .fp-ecrin-info::before { content: ""; position: absolute; left: 50%; top: 0; width: 40px; margin-left: -20px; height: 1px; background: var(--fp-ecrin-or); }
.fp-ecrin-info dd { margin-top: 6px; font-size: 20px; line-height: 1.5; text-wrap: balance; }

/* ═════════ 7 · Réponse : pilule de cire ═════════ */
.fp-ecrin-rsvp { font-style: italic; font-size: 22px; line-height: 1.4; margin-bottom: 34px; text-wrap: balance; }
.fp-ecrin-pilule-boite { display: flex; justify-content: center; }
.fp-ecrin-pilule {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; min-width: 240px; max-width: 100%;
  padding: 0 32px;
  color: var(--fp-texte-cire);
  text-decoration: none;
  border-radius: 30px;
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.fp-ecrin-pilule-cv { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.fp-ecrin-pilule-txt { position: relative; font-size: 19px; font-weight: 600; letter-spacing: .12em; font-variant-caps: all-small-caps; white-space: nowrap; }
.fp-ecrin-pilule-reflet {
  position: absolute; inset: 6px 10px; border-radius: 30px; overflow: hidden; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 120% 0;
  transition: background-position .9s cubic-bezier(.3, .6, .3, 1);
}
@media (hover: hover) { .fp-ecrin-pilule:hover .fp-ecrin-pilule-reflet { background-position: -20% 0; } }
.fp-ecrin-pilule:focus-visible .fp-ecrin-pilule-reflet { background-position: -20% 0; }
.fp-ecrin-pilule:active { transform: translateY(1px); }

/* ═════════ 8 · Fin ═════════ */
.fp-ecrin-s--fin { padding-top: 112px; }
.fp-ecrin-fin-sceau { display: flex; justify-content: center; height: 112px; margin-bottom: 8px; }
.fp-ecrin-fin-prenoms { font-family: var(--fp-ecrin-script); font-size: 40px; line-height: 1.35; padding: 0 .1em; }
.fp-ecrin-fin-date { font-size: 16px; font-weight: 500; letter-spacing: .24em; color: var(--fp-encre-douce); margin-top: 6px; }
.fp-ecrin-mention { margin-top: 44px; font-size: 17px; color: var(--fp-encre-douce); }
.fp-ecrin-mention a { min-height: 44px; display: inline-flex; align-items: center; }
.fp-ecrin-revoir {
  min-height: 44px; padding: 0 12px; margin-top: 2px;
  font-size: 17px; font-style: italic; color: var(--fp-encre-douce);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}

/* ═════════ Mouvement réduit ═════════ */
.fp-ecrin.fpe-reduit .fp-ecrin-acc-l { opacity: 1; transform: none; transition: none; }
.fp-ecrin.fpe-reduit .fp-ecrin-arche-filets path,
.fp-ecrin.fpe-reduit .fp-ecrin-rameaux path,
.fp-ecrin.fpe-reduit .fp-ecrin-orn path { stroke-dashoffset: 0; transition: none; }
.fp-ecrin.fpe-reduit .fp-ecrin-rameaux .fp-ecrin-ram-f, .fp-ecrin.fpe-reduit .fp-ecrin-orn .fp-ecrin-orn-f { fill-opacity: .1; }
.fp-ecrin.fpe-reduit .fp-ecrin-chevron { animation: none; }
.fp-ecrin.fpe-reduit .fp-ecrin-poussiere { display: none; }
.fp-ecrin.fpe-reduit .fp-ecrin-scene { transition: none; }

/* ═════════ Petits écrans ═════════ */
@media (max-width: 380px) {
  .fp-ecrin-cd-l { font-size: 13px; letter-spacing: .06em; }
  .fp-ecrin-bouton { padding: 0 16px; letter-spacing: .07em; }
  .fp-ecrin-lieu { padding-left: 18px; padding-right: 18px; }
}

/* ═════════ Ordinateur : colonne centrée, décor plein écran ═════════ */
@media (min-width: 900px) {
  .fp-ecrin-s { padding-top: 144px; padding-bottom: 136px; }
  .fp-ecrin-orn { width: 84px; height: 84px; }
  .fp-ecrin-orn--hg { left: calc(50% - 360px); top: 64px; }
  .fp-ecrin-orn--bd { right: calc(50% - 360px); bottom: 24px; }
  .fp-ecrin-titre-txt { font-size: 40px; }
}

/* Accueil porté par la carte (copie de la section, réduite puis à l'échelle 1). */
.fp-ecrin-carte { overflow: hidden; }
.fp-ecrin-carte-contenu { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.fp-ecrin .fp-ecrin-carte-acc { background: none; min-height: 0; }
.fp-ecrin-carte-filet { z-index: 2; }
.fp-ecrin-carte-vignette { z-index: 1; }