@font-face{
  font-family:"Coucouaurelien";
  src:url("/assets/fonts/Coucouaurelien-V2-Regular.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:block;
}
:root{
  --bg:#050505;
  --text:#d8d1c8;
  --muted:#716960;
  --ink:#a88362;
  --gold:#b39261;
  --gold-hi:#c0a170;
  --line:#231f1b;
  --ratio:0.70955;
  --gallery-w:min(920px,100vw);
  --chooser-card-w:min(620px,72vw,calc((100svh - 155px) * var(--ratio)));
  --editor-card-w:min(430px,86vw);
  --carousel-gap:clamp(12px,1.8vw,20px);
}
*{box-sizing:border-box}
html,body{min-height:100%;background:var(--bg)}
html{overscroll-behavior-x:none}
body{margin:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
button,input,textarea{font:inherit}
button{color:inherit}
a{color:inherit}
.app{min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(14px,env(safe-area-inset-top)) 0 max(20px,env(safe-area-inset-bottom))}
.topbar{width:min(900px,90vw);margin:0 auto;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.eyebrow{font-family:Georgia,"Times New Roman",serif;font-size:13px;font-style:italic;letter-spacing:.035em;color:var(--muted);white-space:nowrap}
.text-button{border:0;background:none;color:#84796d;padding:6px 0;cursor:pointer;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-style:italic;white-space:nowrap}
.stage{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0 8px;overflow:hidden}

/* Choix des cartes */
.chooser-stage{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:4px 0 8px}
.chooser-copy{width:min(620px,86vw);margin:0 auto 14px;text-align:center;color:#9a8d80;font-family:Georgia,"Times New Roman",serif;font-size:clamp(13px,1.5vw,16px);font-style:italic;line-height:1.45;letter-spacing:.01em}
.carousel-shell{width:var(--gallery-w);max-width:100vw;min-width:0;overflow:hidden;margin-inline:auto}
.carousel{
  width:100%;display:flex;align-items:center;gap:var(--carousel-gap);overflow-x:auto;overflow-y:hidden;
  padding-block:8px 10px;padding-inline:calc((100% - var(--chooser-card-w))/2);
  scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--chooser-card-w))/2);
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  touch-action:pan-x;cursor:grab;
}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.card-thumb{
  flex:0 0 var(--chooser-card-w);width:var(--chooser-card-w);aspect-ratio:1241/1749;scroll-snap-align:center;scroll-snap-stop:always;
  border:0;padding:0;background:transparent;cursor:pointer;overflow:hidden;transform:scale(.945);opacity:.42;
  filter:saturate(.88) brightness(.84);transition:transform .42s cubic-bezier(.2,.72,.2,1),opacity .42s ease,filter .42s ease;
  box-shadow:0 18px 55px rgba(0,0,0,.58)
}
.card-thumb.active{transform:scale(1);opacity:1;filter:none}
.card-thumb img,.front img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hint{margin-top:28px;text-align:center;color:#6c6258;font-family:Georgia,"Times New Roman",serif;font-size:11.5px;font-style:italic;min-height:18px;letter-spacing:.01em}

/* Carte / écriture */
.flip-wrap{perspective:1800px;display:flex;justify-content:center;align-items:center;width:100%;min-height:0}
.flip-card{width:var(--editor-card-w);aspect-ratio:1241/1749;position:relative;transform-style:preserve-3d;transition:transform 1.12s cubic-bezier(.18,.7,.24,1);will-change:transform}
.flip-card.is-flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.62)}
.front{background:#000}.back{transform:rotateY(180deg);background:#000}
.message{position:absolute;left:10.5%;right:10.5%;top:34%;height:31%;resize:none;overflow:hidden;border:0;outline:0;background:transparent;color:var(--ink);text-align:center;font-family:"Coucouaurelien","Bradley Hand","Segoe Print","Marker Felt",cursive;font-size:clamp(19px,calc(var(--editor-card-w)*.072),34px);line-height:1.32;letter-spacing:-.025em;padding:.3em 0 .18em;box-sizing:border-box;caret-color:var(--ink)}
.message::placeholder,.signature::placeholder{color:#4f3d30;opacity:.54}
.signature{position:absolute;left:18%;right:18%;bottom:13.2%;border:0;outline:0;background:transparent;color:var(--ink);text-align:center;font-family:"Coucouaurelien","Bradley Hand","Segoe Print","Marker Felt",cursive;font-size:clamp(20px,calc(var(--editor-card-w)*.07),33px);line-height:1.22;padding:.16em 4px .1em;box-sizing:border-box;caret-color:var(--ink)}
.line-count{position:absolute;right:11px;bottom:9px;color:#46392e;font-size:10px;opacity:0;transition:opacity .2s ease}.line-count.visible{opacity:.72}
.footer{min-height:72px;display:flex;align-items:center;justify-content:center;gap:14px;width:min(680px,92vw);margin:0 auto;flex-wrap:wrap}
.gold-button{border:1px solid rgba(179,146,97,.58);border-radius:999px;background:rgba(179,146,97,.02);color:var(--gold);min-width:126px;padding:10px 18px 11px;font-family:Georgia,"Times New Roman",serif;font-size:13px;font-weight:400;font-style:italic;letter-spacing:.04em;cursor:pointer;transition:.28s ease}
.gold-button:hover{color:var(--gold-hi);border-color:rgba(192,161,112,.82);background:rgba(179,146,97,.045)}
.gold-button[disabled]{opacity:.4;cursor:default}

/* Écran de partage */
.result{width:min(520px,88vw);text-align:center;margin:auto}
.result h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,4vw,38px);font-weight:400;font-style:italic;color:#c4b6a6;margin:0 0 28px;line-height:1.18}
.result-actions{width:min(320px,100%);margin:0 auto;display:flex;flex-direction:column;gap:12px}
.result-button,.result-link-button{width:100%;min-height:47px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.physical-wrap{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.physical-sub{color:#796a5c;font-family:Georgia,"Times New Roman",serif;font-size:10.5px;line-height:1.35;letter-spacing:.01em;text-align:center;padding:0 10px}

/* Destinataire */
.recipient-stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;padding:0 0 max(22px,env(safe-area-inset-bottom))}
.recipient-card{cursor:pointer;width:100%}
.recipient-card .flip-card{width:min(720px,100vw);max-width:100vw}
.recipient-card .face{box-shadow:none}
.recipient-card .message{left:13.8%;right:13.8%;top:34%;max-width:none}
.recipient-card .signature{left:21%;right:21%}
.recipient-message{height:auto;overflow:visible;white-space:pre-wrap;pointer-events:none}
.recipient-signature{pointer-events:none}
.recipient-card{transition:opacity .52s ease,transform .52s cubic-bezier(.2,.72,.2,1),filter .52s ease}
.recipient-card.is-leaving{opacity:0;transform:scale(.965) translateY(-8px);filter:blur(1px);pointer-events:none}
.recipient-stage.is-final{justify-content:center!important;padding-top:0!important;padding-bottom:0!important}
.recipient-create{color:#b49a7b;text-decoration:none;font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,5vw,44px);font-style:italic;font-weight:400;line-height:1.15;text-align:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.72,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:-.015em}
.recipient-create.visible{opacity:1;pointer-events:auto;transform:none}
.recipient-create:focus-visible{outline:1px solid rgba(179,146,97,.48);outline-offset:12px;border-radius:4px}
.error{width:min(520px,88vw);margin:auto;text-align:center;color:#8a7e72;font-family:Georgia,"Times New Roman",serif;font-style:italic;line-height:1.6}
.toast{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translate(-50%,15px);background:#0d0c0b;border:1px solid #29231d;color:#bda98f;padding:10px 14px;border-radius:12px;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-style:italic;opacity:0;pointer-events:none;transition:.25s ease;z-index:20;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
  :root{--gallery-w:100vw;--chooser-card-w:min(92vw,520px,calc((100svh - 150px) * var(--ratio)));--editor-card-w:min(86vw,410px);--carousel-gap:12px}
  .topbar{width:88vw}.footer{min-height:64px}.hint{font-size:11px;margin-top:20px}
  .chooser-copy{margin-bottom:8px;padding:0 10px}
  .recipient-stage{justify-content:flex-start;padding-top:0}
  .recipient-card .flip-card{width:100vw}
  .recipient-card .message{left:14.5%;right:14.5%}
  .recipient-card .signature{left:22%;right:22%}
}
@media(max-width:420px){:root{--chooser-card-w:min(92vw,calc((100svh - 148px) * var(--ratio)));--editor-card-w:86vw)}}
@media(max-height:700px){
  :root{--chooser-card-w:min(68vw,500px,calc((100svh - 124px) * var(--ratio)));--editor-card-w:min(360px,78vw)}
  .app{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .topbar{min-height:27px}.footer{min-height:48px}.carousel{padding-block:6px 8px}.chooser-copy{margin-bottom:4px}
}
@media(max-height:700px) and (max-width:760px){:root{--chooser-card-w:min(82vw,calc((100svh - 118px) * var(--ratio)));--editor-card-w:min(82vw,360px)}}

/* L’éditeur conserve sa largeur lorsque le clavier mobile s’ouvre. */
.editor-stage{overflow-y:auto;overflow-x:hidden;align-items:center;justify-content:center}
.editor-stage .flip-wrap{flex:0 0 auto}
@media(max-width:760px){
  .editor-stage{justify-content:flex-start;padding-top:8px;padding-bottom:10px}
}

.carousel.demoing{scroll-snap-type:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* La carte reçue est plus grande que la carte d'édition : la typo suit sa vraie largeur. */
.recipient-card .message{font-size:clamp(22px,5.1vw,42px)}
.recipient-card .signature{font-size:clamp(23px,5vw,41px)}
@media(max-width:760px){
  .recipient-card .message{font-size:clamp(22px,7.1vw,34px)}
  .recipient-card .signature{font-size:clamp(23px,6.8vw,34px)}
}


/* Chargement billet */
.loading-stage{justify-content:center}
.loading-shell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:42svh}
.loading-mail-wrap{position:relative;width:118px;height:94px;display:flex;align-items:center;justify-content:center;animation:mailFloat 2.1s ease-in-out infinite}
.loading-mail{width:100px;height:auto;display:block;filter:drop-shadow(0 0 18px rgba(179,146,97,.08))}
.loading-shadow{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:58px;height:8px;border-radius:999px;background:rgba(179,146,97,.18);filter:blur(5px);animation:mailShadow 2.1s ease-in-out infinite}
.loading-copy{color:#8d8073;font-family:Georgia,"Times New Roman",serif;font-size:13px;font-style:italic;letter-spacing:.02em}
@keyframes mailFloat{0%{transform:translateX(0) translateY(0)}25%{transform:translateX(-7px) translateY(0)}50%{transform:translateX(-15px) translateY(-4px)}75%{transform:translateX(-8px) translateY(-1px)}100%{transform:translateX(0) translateY(0)}}
@keyframes mailShadow{0%{opacity:.35;transform:translateX(-50%) scaleX(1)}50%{opacity:.18;transform:translateX(-50%) scaleX(.84)}100%{opacity:.35;transform:translateX(-50%) scaleX(1)}}


/* Chargement abstrait billet v1.10 */
.loading-stage{justify-content:center}
.loading-shell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:48svh}
.loading-art{position:relative;width:min(76vw,292px);aspect-ratio:3/4;border-radius:26px;overflow:hidden;background:#090909;box-shadow:0 24px 80px rgba(0,0,0,.42);background-image:var(--loading-image);background-size:182%;background-position:56% 46%;background-repeat:no-repeat;animation:artSweep 3.8s cubic-bezier(.34,.08,.22,.99) infinite alternate}
.loading-art::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.16) 45%,rgba(0,0,0,.36));}
.loading-veil{position:absolute;inset:-8%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 36%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.02) 64%,rgba(255,255,255,0) 100%);mix-blend-mode:screen;animation:artShimmer 3.8s ease-in-out infinite;transform:translateX(-42%)}
.loading-copy{color:#8d8073;font-family:Georgia,"Times New Roman",serif;font-size:13px;font-style:italic;letter-spacing:.02em}
@keyframes artSweep{0%{background-position:60% 46%;transform:scale(1.02)}100%{background-position:42% 48%;transform:scale(1.06)}}
@keyframes artShimmer{0%{transform:translateX(-44%)}100%{transform:translateX(44%)}}


/* Chargement sobre v1.12 — aucun dessin, aucune animation */
.loading-stage{justify-content:center}
.loading-shell{min-height:38svh;display:flex;align-items:center;justify-content:center}
.loading-copy{color:#8d8073;font-family:Georgia,"Times New Roman",serif;font-size:13px;font-style:italic;letter-spacing:.02em}
.loading-art,.loading-mail-wrap,.loading-mail,.loading-shadow,.loading-veil{display:none!important;animation:none!important}


/* =========================================================
   V1.22 — Les billets Éphémères
   La réception devient l'expérience principale.
   ========================================================= */
:root{
  --serif:Garamond,"Apple Garamond","Iowan Old Style",Baskerville,"Times New Roman",serif;
  --ephemere-ink:#9a7759;
  --ephemere-muted:#7f644f;
}

/* Le titre reste présent sur tous les écrans. */
.brand-header{
  position:relative;
  width:100%;
  min-height:92px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:28px 18px 10px;
  z-index:5;
}
.brand-title{
  color:var(--ephemere-ink);
  font-family:var(--serif);
  font-size:clamp(25px,3.4vw,36px);
  line-height:1;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.015em;
  text-align:center;
}
.brand-action{
  position:absolute;
  left:max(18px,env(safe-area-inset-left));
  top:30px;
}
.brand-action .text-button{
  font-family:var(--serif);
  color:#76614e;
}
.screen-kicker{display:none}

/* La galerie devient volontairement discrète : le dessin fait l'essentiel. */
.chooser-stage{justify-content:center;padding-top:0}
.chooser-copy{display:none}
.hint{
  margin-top:32px;
  color:var(--ephemere-muted);
  font-family:var(--serif);
  font-size:clamp(20px,2.7vw,28px);
  font-style:normal;
  letter-spacing:-.01em;
  line-height:1.2;
}

/* Réception : 3 actes — dessin / mot / invitation. */
.recipient-experience{
  position:relative;
  width:100%;
  min-height:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  perspective:1800px;
}
.recipient-billet{
  position:relative;
  width:min(620px,92vw);
  height:min(760px,calc(100svh - 185px));
  min-height:460px;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  perspective:1800px;
  transition:opacity .62s ease,filter .62s ease,transform .62s cubic-bezier(.2,.72,.2,1);
}
.recipient-billet-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform 1.08s cubic-bezier(.18,.7,.24,1);
}
.recipient-billet-inner.is-flipped{transform:rotateY(180deg)}
.recipient-side{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.recipient-art-side{background:#000}
.recipient-art{
  width:min(720px,100vw);
  max-width:100vw;
  max-height:78svh;
  height:auto;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.recipient-word-side{
  transform:rotateY(180deg);
  background:#050505;
}
.recipient-word{
  width:min(520px,82vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--ink);
  transform:translateZ(1px);
  transition:opacity .72s ease,filter .72s ease,transform .72s cubic-bezier(.2,.72,.2,1),letter-spacing .72s ease;
}
.recipient-word .recipient-message{
  position:static;
  width:100%;
  margin:0;
  padding:0;
  color:var(--ink);
  font-family:"Coucouaurelien","Bradley Hand","Segoe Print","Marker Felt",cursive;
  font-size:clamp(29px,5.5vw,48px);
  line-height:1.12;
  letter-spacing:-.025em;
  white-space:pre-wrap;
}
.recipient-word .recipient-signature{
  position:static;
  width:100%;
  margin:clamp(74px,10vh,115px) 0 0;
  padding:0;
  color:var(--ink);
  font-family:"Coucouaurelien","Bradley Hand","Segoe Print","Marker Felt",cursive;
  font-size:clamp(27px,4.8vw,42px);
  line-height:1.1;
}
.recipient-word.is-dissolving{
  opacity:0;
  filter:blur(12px);
  transform:scale(1.035);
  letter-spacing:.055em;
  pointer-events:none;
}
.recipient-billet.is-gone{
  opacity:0;
  filter:blur(7px);
  transform:scale(.985);
  pointer-events:none;
}
.recipient-instruction{
  position:absolute;
  left:20px;
  right:20px;
  bottom:clamp(18px,4.5vh,52px);
  text-align:center;
  color:var(--ephemere-muted);
  font-family:var(--serif);
  font-size:clamp(22px,3vw,31px);
  font-weight:400;
  line-height:1.15;
  opacity:1;
  transform:none;
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.recipient-instruction.is-hidden{
  opacity:0;
  transform:translateY(5px);
}
.recipient-experience .recipient-create{
  position:absolute;
  left:50%;
  top:50%;
  width:min(560px,88vw);
  transform:translate(-50%,calc(-50% + 12px));
  color:var(--ephemere-ink);
  font-family:var(--serif);
  font-size:clamp(20px,2.7vw,28px);
  font-style:normal;
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.018em;
  opacity:0;
  pointer-events:none;
  text-align:center;
  text-decoration:none;
  transition:opacity .62s ease,transform .62s cubic-bezier(.2,.72,.2,1);
}
.recipient-experience .recipient-create.visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%);
}
.recipient-experience .recipient-create span{display:block}
.recipient-experience.is-final .recipient-instruction{display:none}

/* Les écrans fonctionnels conservent la même voix typographique. */
.text-button,.gold-button,.result h1,.physical-sub,.error,.loading-copy,.toast{
  font-family:var(--serif);
}
.result h1{font-style:normal}

@media(max-width:760px){
  .app{grid-template-rows:auto minmax(0,1fr) auto;padding-top:max(8px,env(safe-area-inset-top))}
  .brand-header{min-height:112px;padding-top:52px;padding-bottom:10px}
  .brand-title{font-size:clamp(25px,7vw,31px)}
  .brand-action{top:51px;left:14px}
  .brand-action .text-button{font-size:10px}
  .recipient-billet{width:100vw;height:calc(100svh - 172px);min-height:420px}
  .recipient-art{width:100vw;max-width:none;max-height:76svh}
  .recipient-word{width:min(80vw,470px)}
  .recipient-word .recipient-message{font-size:clamp(29px,8.5vw,40px)}
  .recipient-word .recipient-signature{font-size:clamp(27px,7.5vw,36px);margin-top:clamp(68px,10vh,100px)}
  .recipient-instruction{bottom:clamp(16px,3.6vh,38px);font-size:clamp(22px,6vw,29px)}
  .recipient-experience .recipient-create{font-size:clamp(21px,5.7vw,27px);width:88vw;color:#7f644f}
  .hint{font-size:clamp(21px,5.7vw,27px);margin-top:30px;color:#7f644f}
}

@media(max-height:700px){
  .brand-header{min-height:66px;padding-top:17px}
  .brand-title{font-size:24px}
  .recipient-billet{height:calc(100svh - 108px);min-height:390px}
  .recipient-art{max-height:72svh;width:100vw;max-width:none}
  .recipient-instruction{font-size:21px;bottom:12px}
  .recipient-word .recipient-signature{margin-top:54px}
}

/* V1.23 ajustements finaux */
.hint,.recipient-instruction,.recipient-experience .recipient-create{color:#7f644f}
.recipient-experience .recipient-create{font-size:clamp(20px,2.7vw,28px)}
@media(max-width:760px){.recipient-experience .recipient-create{font-size:clamp(21px,5.7vw,27px)}}