/* Le guichet web (GET /create/*), rendu par
   server/Sources/App/WebCreatePage.swift.

   MÊME SYSTÈME GRAPHIQUE QUE LA LANDING ET QUE LA PAGE D'ACHAT
   (landing/styles.css, Public/purchase/return.css) : Fredoka pour les titres,
   Nunito pour le texte, fond pastel violet/rose/bleu, encre #2c1a4a, accent
   #7c3aed, carte de verre blanche. Quelqu'un qui arrive ici vient de
   toplings.com et repartira vers Stripe : la troisième page ne doit pas
   ressembler à un autre produit.

   POURQUOI CE FICHIER EST UNE COPIE DE `purchase/return.css` ET NON UN LIEN
   VERS LUI. `/purchase/*` n'est PAS proxifié sur le domaine du site : seul
   `/create/*` l'est (deploy/Caddyfile). Une feuille appelée depuis
   `https://toplings.com/create/` vers `https://api.toplings.com/purchase/…`
   serait bloquée par `style-src 'self'` de la CSP du site — et sans un mot
   dans la console de qui n'ouvre pas les outils de développement.

   TOUT EST DANS CE FICHIER, et c'est une CONTRAINTE mesurée, pas un style : la
   page n'a droit à aucun `<style>` en ligne ni à aucun attribut `style=`. La
   CSP du site est déjà posée (`style-src 'self'; style-src-attr 'none'`) et
   elle s'applique à ces pages, qui sont servies sous son vhost.

   VERSIONNÉ PAR `?v=N` (WebCreatePage.assetVersion) : le matcher `@static` du
   Caddyfile donne un jour de cache à tout `*.css`, `*.js` et `*.png`. Sans le
   changement d'adresse, un correctif reste invisible 24 h. */

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #2c1a4a;
  background: #f4ecff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px 18px 26px;
}

/* Le dégradé sur un calque fixe plutôt que sur `body` : c'est ce que fait la
   landing, et cela garde le fond immobile quand la page dépasse l'écran — ce
   qui est ici la règle et non l'exception (le formulaire est long). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(165deg, #f4ecff 0%, #fbeef9 45%, #eaf2ff 100%);
}

a { color: #7c3aed; text-decoration: none; font-weight: 800 }
a:hover { color: #6d28d9 }
img { max-width: 100% }
[hidden] { display: none !important }

/* ---------------------------------------------------------------- bandeau */

.bar {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.brand img {
  width: 132px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(76, 29, 149, .18));
}

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #5b4a7d;
  min-width: 0;
}
.who .mail { overflow-wrap: anywhere; font-weight: 700 }

/* ------------------------------------------------------------------ carte */

.card {
  width: 100%;
  max-width: 640px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(124, 58, 237, .12);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(76, 29, 149, .14);
  backdrop-filter: blur(14px);
  padding: 26px clamp(18px, 5vw, 34px) 30px;
}

h1 {
  font-family: 'Fredoka', ui-rounded, "SF Pro Rounded", sans-serif;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Le titre en dégradé de la landing. Le `color` reste posé dessous : un
   navigateur sans `background-clip: text` afficherait sinon un titre
   invisible. */
.grad {
  color: #7c3aed;
  background: linear-gradient(120deg, #7c3aed, #ec4899 55%, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-family: 'Fredoka', ui-rounded, "SF Pro Rounded", sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}

.lead { margin-top: 10px; font-size: 15px; text-align: center }
.hint { font-size: 13px; color: #5b4a7d; margin-top: 4px }
.terms { font-size: 13px; color: #8a7aa8; margin-top: 18px; text-align: center }
.status { margin-top: 14px; font-size: 17px; font-weight: 800; text-align: center }
.empty { margin-top: 18px; text-align: center; color: #5b4a7d }
.alt { margin-top: 16px; text-align: center; font-size: 14px }
.sent { margin-top: 12px; font-size: 14px; color: #5b4a7d; text-align: center }

/* La bannière du retour de Stripe : payé mais webhook pas encore arrivé, ou
   panier abandonné. Deux phrases, jamais une erreur. */
.banner {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(124, 58, 237, .10);
  border: 1px solid rgba(124, 58, 237, .18);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* L'erreur est la SEULE couleur chaude de la page : elle doit se distinguer
   d'un état d'attente au premier coup d'œil. */
.err {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .2);
  color: #9f1239;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* ----------------------------------------------------------------- champs */

.block { margin-top: 24px }
.field { margin-top: 14px }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #5b4a7d;
  margin-bottom: 5px;
}

input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;   /* 16 px : en dessous, iOS zoome sur le champ au focus. */
  color: inherit;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(124, 58, 237, .22);
  background: rgba(255, 255, 255, .85);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

/* Le sélecteur de fichiers natif est masqué et remplacé par le `<label>` qui
   le pointe : c'est le seul moyen d'un bouton aux couleurs de la page sans
   attribut `style=` ni gestionnaire en ligne. Il reste ATTEIGNABLE au clavier
   (`clip` et non `display:none`), sinon le formulaire deviendrait
   inutilisable sans souris. */
.filepick {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 14px;
  cursor: pointer;
}
.check input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px }

/* ------------------------------------------------------------------ guide */

/* CE QUI MARCHE LE MIEUX, ET CE QUE NOUS REFUSONS — toujours visible, jamais
   replié. La modération tombe APRÈS une minute d'attente et brûle un refus du
   quota journalier : dire les règles avant l'envoi coûte trois lignes, les
   taire coûte un aller-retour à chaque personne qui envoie une photo de
   Pikachu. Le `style=` est interdit par la CSP du site (`style-src-attr
   'none'`), d'où cette règle-ci plutôt qu'un attribut sur la section. */
.guide {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
}
.guide h3 { font-size: 13px; font-weight: 800; color: #5b4a7d }
.guide ul { margin: 8px 0 0; padding-inline-start: 18px }
.guide li { font-size: 13px; color: #5b4a7d; margin-top: 5px }

/* --------------------------------------------------------------- vignettes */

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* LES APERÇUS SONT DES `<canvas>`, JAMAIS DES `<img src="blob:">`. La CSP du
   site pose `img-src 'self'` : un `blob:` y serait refusé, et l'aperçu
   disparaîtrait sans message. Un canvas n'est régi par aucune directive. */
.thumbs canvas {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, .18);
  background: rgba(255, 255, 255, .7);
  object-fit: cover;
}

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
  padding: 13px 26px;
  border: 0;
  border-radius: 15px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 8px 22px rgba(124, 58, 237, .32);
  cursor: pointer;
  text-align: center;
}
.btn:hover { filter: brightness(1.06); color: #fff }
.btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed }

/* L'ATTENTE EST UN POINTILLÉ ANIMÉ, PAS UNE PHRASE, et c'est une décision, pas
   une facilité : la soumission modère les photos EN LIGNE et peut prendre
   soixante secondes, mais aucune clef des 35 catalogues ne dit « on vérifie tes
   photos, patiente ». Écrire la phrase en dur la laisserait en anglais pour
   trente-quatre langues ; trois points qui battent ne se traduisent pas. */
.btn.busy::after {
  content: "…";
  margin-inline-start: 6px;
  animation: pulse 1.1s ease-in-out infinite;
}
.link.busy { opacity: .5 }

@keyframes pulse {
  0%, 100% { opacity: .35 }
  50% { opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .btn.busy::after { animation: none }
}

.btn.ghost {
  color: #6d28d9;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(124, 58, 237, .25);
  box-shadow: none;
}
.btn.ghost:hover { color: #6d28d9; background: #fff }

.link {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #7c3aed;
  cursor: pointer;
}
.link:hover { color: #6d28d9 }

/* ------------------------------------------------------------ la liste */

.orders { list-style: none; margin-top: 18px }
.orders li + li { margin-top: 10px }

.row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(124, 58, 237, .12);
  color: inherit;
  font-weight: 400;
}
.row:hover { color: inherit; border-color: rgba(124, 58, 237, .3) }
.row-name {
  font-family: 'Fredoka', ui-rounded, "SF Pro Rounded", sans-serif;
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.row-state { font-size: 14px; font-weight: 700; color: #6d28d9 }
.row-date { font-size: 13px; color: #8a7aa8; margin-inline-start: auto }

/* L'emplacement de l'œuf d'attente (lot E) : vide aujourd'hui, et il ne
   réserve donc aucune hauteur — un cadre vide se lirait comme une image qui
   n'a pas chargé. */
#incubator:not(:empty) { margin-top: 18px; display: flex; justify-content: center }

#actions { display: flex; flex-direction: column; align-items: stretch }

.support {
  max-width: 640px;
  font-size: 13px;
  color: #8a7aa8;
  text-align: center;
}
.support a { font-weight: 800 }

@media (max-width: 460px) {
  .row-date { margin-inline-start: 0; width: 100% }
}

#owner-notes {display:block;width:100%;box-sizing:border-box;resize:vertical;font:inherit;color:inherit;padding:11px 13px;border-radius:13px;border:1px solid rgba(124,58,237,.22);background:rgba(255,255,255,.85)}

.creation-report-form {width:100%;display:grid;gap:12px}
.creation-report-form textarea {box-sizing:border-box;width:100%;min-height:120px;padding:14px 16px;font:inherit;color:inherit;border:1px solid rgba(124,58,237,.28);border-radius:14px;background:rgba(255,255,255,.8);resize:vertical}
.creation-report-form textarea:focus {outline:2px solid #a78bfa;outline-offset:2px}

/* Le laboratoire reprend les illustrations et la paillasse de ui/index.html.
   Tout reste sous /create/ pour la CSP de même origine. */
.laboratory .bar, .laboratory .card { max-width: 980px }
.laboratory h1 { text-align: start; font-size: clamp(28px, 4vw, 36px) }
.laboratory .hint, .laboratory .terms, .laboratory .guide, .laboratory .check { font-size: 14px }
.laboratory .terms { color: #5b4a7d; text-align: start }
.laboratory .field input, .laboratory .field textarea { font-size: 16px }
.laboratory .disclosure { margin-top: 12px }
.creation-credit-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; margin: 22px 0; border: 1px solid #cdb8e6; border-radius: 14px; background: #fff9; }
.creation-credit-bar > img { object-fit: contain; image-rendering: pixelated; flex: 0 0 44px }
.credit-balance { display: flex; align-items: center; gap: 14px; flex: 1; font-size: 14px; font-weight: 800 }
.credit-balance strong { display: grid; place-items: center; min-width: 40px; padding: 3px 9px; border-radius: 9px; background: #ede2fa; font-size: 22px; font-variant-numeric: tabular-nums }
.creation-credit-bar .btn { width: auto; margin: 0; font-size: 14px; gap: .3em }
.creation-credit-bar > p { flex-basis: 100%; margin: 0 }
.photo-laboratory-machine { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) 44px minmax(0,.75fr); gap: 16px; align-items: center; padding: 26px 26px 66px; min-height: 340px; border: 1px solid #a492c4; border-radius: 16px; overflow: hidden; background: linear-gradient(#201a3688,#20192bbb),url('art/BreedingLabBackground.png') center/cover }
.photo-laboratory-machine.drag-over { outline: 3px solid #cba5f1; outline-offset: 3px }
.photo-machine-label { color: #ead8b4; font-family: inherit; font-size: 14px; font-weight: 800; margin-bottom: 14px }
.photo-scanner { position: relative; min-width: 0; border: 2px solid #9882b3; border-bottom: 9px solid #665378; border-radius: 12px; padding: 16px; min-height: 215px; background: #241d38ed; box-shadow: 0 7px 0 #1e162c }
.photo-inputs { display: flex; gap: 9px }
.photo-input { position: relative; flex: 1; min-width: 0; border: 1px solid #a28abb7a; border-radius: 7px; overflow: hidden; background: #b195d014 }
.photo-input canvas { width: 100%; height: 118px; object-fit: cover; display: block }
.photo-add { display: flex; min-height: 90px; justify-content: center; align-items: center; flex-direction: column; gap: 6px; margin-top: 10px; padding: 12px; border: 1px dashed #b7a1ce; border-radius: 8px; color: #ede0ff; font-size: 14px; text-align: center; cursor: pointer }
.photo-add:hover { background: #c8a5ea28 }
.photo-add > span { font-size: 26px; line-height: 1 }
.photo-inputs:empty + .photo-add { min-height: 132px }
.photo-inputs:has(> :nth-child(3)) + .photo-add { display: none }
.photo-scanner:focus-within { outline: 2px solid #e1c0ff; outline-offset: 3px }
.photo-remove { position: absolute; top: 3px; inset-inline-end: 3px; width: 32px; height: 32px; background: #201a35ed; border: 1px solid #e1c9e8; border-radius: 50%; color: #fff; font-size: 22px; cursor: pointer }
.photo-transfer { display: flex; justify-content: center; gap: 6px }
.photo-transfer i { width: 7px; height: 7px; border: 1px solid #cfb8e3; background: #635275; transform: rotate(45deg) }
.photo-output { text-align: center; min-width: 0 }
.photo-pod { position: relative; height: 224px; display: flex; align-items: center; justify-content: center }
.photo-pod .incubator { position: absolute; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated }
.photo-pod-empty { position: relative; margin-top: 12%; color: #d9baea; font-size: 40px; text-shadow: 0 0 20px #e0a9f678 }
.photo-machine-status { position: absolute; bottom: 0; inset-inline: 0; min-height: 44px; padding: 12px; text-align: center; font-size: 14px; color: #eadced; background: #251c37ed; border-top: 1px solid #88739766 }
.photo-scan-line { display: none; pointer-events: none; position: absolute; z-index: 3; top: 25%; left: 14px; right: 14px; height: 2px; background: #d9b5ff; box-shadow: 0 0 16px 5px #cc99ff70 }
.preparing .photo-scan-line { display: block; animation: photo-scan 2.5s ease-in-out infinite alternate }
.preparing .photo-transfer i { animation: photo-signal 1.5s infinite }
.preparing .photo-transfer i:nth-child(2) { animation-delay: .3s }
.preparing .photo-transfer i:nth-child(3) { animation-delay: .6s }
@keyframes photo-scan { to { top: 86% } }
@keyframes photo-signal { 50% { background: #f4d49b; box-shadow: 0 0 12px #f4c69b } }
.portrait { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.portrait > h2 { grid-column: 1 / -1 }
.portrait .field { margin: 0; min-width: 0 }
#credit-confirm { margin: auto; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid #bca1d6; border-radius: 20px; padding: 26px; background: #f9f3ff; color: #2c1a4a; box-shadow: 0 24px 70px #20193266; font: inherit; text-align: center }
#credit-confirm::backdrop { background: #21162cb8 }
#credit-confirm > img { image-rendering: pixelated; margin-bottom: 14px }
#credit-confirm h2 { font-size: 24px; margin-bottom: 12px }
.confirm-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap }
.confirm-actions .btn { margin: 0; width: auto }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #9b63df; outline-offset: 3px }
@media (max-width: 650px) {
  .creation-credit-bar .btn { width: 100% }
  .photo-laboratory-machine { grid-template-columns: minmax(0,1fr); padding: 18px 16px 64px; gap: 16px }
  .photo-output { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center }
  .photo-output .photo-machine-label { margin: 0 }
  .photo-pod { height: 160px }
  .photo-transfer { display: none }
  .portrait { grid-template-columns: minmax(0,1fr) }
  .creation-credit-bar { gap: 10px; padding: 14px }
  .credit-balance { gap: 8px }
}
@media (prefers-reduced-motion: reduce) {
  .photo-laboratory-machine * { animation: none !important }
}

#gift-dialog {margin:auto;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #d8cce8;border-radius:20px;padding:28px;color:#2c1a4a;background:#fff}
#gift-dialog::backdrop {background:rgba(25,14,43,.65)}
#gift-dialog label {display:block;margin-block:16px 6px;font-weight:700}
#gift-dialog input,#gift-dialog select {width:100%;box-sizing:border-box;padding:12px;border:1px solid #d8cce8;border-radius:10px;background:#fff;color:#2c1a4a;font:inherit}
#gift-dialog h2 {margin:0 0 12px}