@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-note{text-align:center;color:#6c6258;font-family:Georgia,"Times New Roman",serif;font-size:11.5px;font-style:italic;margin-top:14px;min-height:18px}
.recipient-create{margin-top:14px;color:#7e7165;text-decoration:none;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-style:italic;opacity:0;pointer-events:none;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease}
.recipient-create.visible{opacity:1;pointer-events:auto;transform:none}
.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-note{margin-top:11px}
  .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)}}