/* Cartes Postales — page « Envoyer une carte »
   Règles copiées de site/espace-ecriture.dc.html.
   Tout le reste de la page est en styles en ligne, aux valeurs exactes
   de la source. Ce fichier ne contient que ce qui ne peut pas être
   en ligne : keyframes, pseudo-éléments, états, media queries.
   Chargé APRÈS site.css. Ne remplace aucune règle existante. */

/* Placeholders — source : <style> de espace-ecriture.dc.html */
#pc-msg::placeholder,
#qr-recipient::placeholder,
#qr-recipient-name::placeholder,
#qr-name::placeholder,
#qr-sender-email::placeholder,
#qr-location::placeholder { color: rgba(13,13,13,.3); font-style: italic; }

#pc-msg, #qr-recipient, #qr-recipient-name, #qr-name, #qr-location, #qr-sender-email { caret-color: #B01618; }

/* Sélecteurs de destinataire — le bouton .prompt de site.css garde son
   comportement ; seules la bordure et l'assise changent ici pour coller
   à la source (liste continue, pas de cartes détachées). */
.prompt {
  all: unset; cursor: pointer; display: block;
  padding: 22px 0; border-bottom: 1px solid rgba(245,243,238,.12);
  transition: opacity .25s, padding-left .25s;
  opacity: .6;
}
.prompt:first-of-type { border-top: 1px solid rgba(245,243,238,.12); }
.prompt:hover { opacity: .85; padding-left: 8px; }
.prompt.is-active { opacity: 1; padding-left: 14px; border-left: 2px solid #B61B1F; }

/* Plume — position posée en JS sur .quill-wrap (left/top),
   animation et opacité ici. Source : quillStyle, ligne 280. */
.quill-wrap {
  position: absolute; z-index: 5; pointer-events: none;
  transform-origin: 1% 99%; will-change: left, top; opacity: 0;
  transition: opacity .45s ease,
              left .14s cubic-bezier(.25,.6,.35,1),
              top .18s cubic-bezier(.25,.6,.35,1);
}
.quill-wrap.has-written { opacity: .8; }
.quill-wrap.is-writing { opacity: .95; animation: quill-scratch .6s ease-in-out infinite; }

@keyframes quill-scratch {
  0%   { transform: rotate(0deg) translateY(0); }
  30%  { transform: rotate(1.6deg) translateY(-.6px); }
  55%  { transform: rotate(-1.2deg) translateY(.5px); }
  80%  { transform: rotate(.8deg) translateY(-.3px); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* Animations d'envoi — source : espace-ecriture.dc.html, lignes 24-31.
   Appliquées à #postcard-form (la coque de la carte). */
@keyframes stamp-press {
  0%   { transform: rotate(-.6deg) scale(1); }
  45%  { transform: rotate(-1deg) scale(.982) translateY(2px); }
  100% { transform: rotate(-.6deg) scale(1); }
}
@keyframes card-send {
  0%   { transform: rotate(-.6deg); }
  16%  { transform: translateY(-22px) rotate(1.8deg); }
  38%  { transform: translate(6vw,-34px) rotate(3deg); }
  100% { transform: translate(135vw,-110px) rotate(11deg) scale(.85); }
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(36px) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
#postcard-form.is-stamping { animation: stamp-press .45s ease-out; }
#postcard-form.is-flying   { animation: card-send 1.15s cubic-bezier(.55,.05,.68,.19) forwards; }

/* Confirmation d'envoi */
.form-msg.is-ok { color: #2f5233 !important; font-family: 'DM Serif Display', serif; font-style: italic; font-size: 17px; }

@media (max-width: 1024px) {
  #postcard-form { transform: none; }
  #postcard-form > div:nth-child(2) { grid-template-columns: 1fr; }
  #postcard-form > div:nth-child(2) > div:nth-child(2) { display: none; }
  #postcard-form > div:nth-child(2) > div:nth-child(3) { border-top: 1px solid rgba(63,52,40,.3); }
}

@media (max-width: 900px) {
  .send-layout { display: block !important; }
  .send-layout > * + * { margin-top: 34px; }
  .pc-grid { grid-template-columns: 1fr !important; }
  .pc-grid > div:nth-child(2) { display: none !important; }
  .pc-grid > div { padding: 16px 18px 20px !important; }
  #postcard-form { transform: none !important; }
  #postcard-form textarea { font-size: 18px !important; line-height: 1.7rem !important; min-height: 140px !important; background-size: 100% 1.7rem !important; }
  .pc-grid input { font-size: 17px !important; }
  .pc-grid h2, .postcard h2 { font-size: 24px !important; margin-bottom: 12px !important; }
  #postcard-form [style*="width:72px"][style*="height:88px"] { width: 56px !important; height: 68px !important; margin-bottom: 16px !important; }
  #postcard-form button[type=submit] { width: 100% !important; text-align: center !important; padding: 14px !important; }
}

/* ═══ Grand écran : la carte reprend une taille de carte ═══ */
@media (min-width: 901px) {
  .send-layout { max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important; }
  #postcard-form { max-width: 880px !important; }
  #postcard-form textarea { min-height: 180px !important; }
}

/* La plume n'a de sens qu'avec un curseur : masquée sur écrans tactiles uniquement */
@media (pointer: coarse) {
  .quill-wrap { display: none !important; }
}

/* ═══ Mobile : la carte reprend des proportions de carte ═══ */
@media (max-width: 900px) {
  #postcard-form [style*="width:72px"][style*="height:88px"],
  #postcard-form [style*="width:56px"] { display: none !important; }   /* timbre décoratif */
  #postcard-form [style*="letter-spacing:8px"] { font-size: 10px !important; margin-bottom: 10px !important; }
  #postcard-form h2, .postcard h2 { font-size: 21px !important; margin-bottom: 8px !important; }
  #postcard-form textarea { min-height: 108px !important; font-size: 17px !important;
    line-height: 1.6rem !important; background-size: 100% 1.6rem !important; }
  .pc-grid input { font-size: 16px !important; padding: 5px 0 3px !important; }
  .pc-grid > div { padding: 14px 16px 16px !important; }
  #postcard-form label[style*="margin:14px"] { margin: 8px 0 2px !important; }
  #postcard-form [data-after-send] { gap: 8px !important; margin-top: 10px !important; }
}