/* ═══════════════════════════════════════════════════
   Formulaire d'inscription client, charte du dashboard /app (16/09/2026)
   Inter, neutres du dashboard, traits fins (bordures claires, graisses légères).
   Design uniquement : ids et classes inchangés, signup.js intact.
   La couleur de marque du commerce (--brand-color) reste injectée par JS
   et habille le bouton et le monogramme : le client voit SON commerce.
   ═══════════════════════════════════════════════════ */

:root {
  --fid-ink:#1c1c1a; --fid-ink-2:#58584f; --fid-ink-3:#6e6e63;
  --fid-cream:#f6f6f4; --fid-white:#ffffff;
  --fid-border:#ececE8; --fid-border-soft:#f3f2ef;
  --fid-yellow:#ffc800; --fid-yellow-tint:#fff3cc;
  --fid-blue-ink:#4f7bab; --fid-blue-tint:#eaf2fb;
  --fid-red:#b42318; --fid-red-tint:#fff1f0;
  --radius-card:16px; --radius-ctl:10px; --radius-sm:8px;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* compatibilité avec signup.js (anciens noms) */
  --fw-sage:var(--fid-blue-ink); --fw-cream:var(--fid-cream); --fw-white:var(--fid-white);
  --fw-text:var(--fid-ink); --fw-muted:var(--fid-ink-3); --fw-border:var(--fid-border);
  --brand-color:var(--fid-ink);
}

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

body {
  background:var(--fid-cream);
  min-height:100vh;
  font-family:var(--font-sans);
  font-weight:300;
  color:var(--fid-ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  letter-spacing:-.006em;
}

/* ── Page ─────────────────────────────────────────── */
.card-page {
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:44px 16px 36px;
}
.card-loading { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--fid-ink-3); }
.card-wrapper { width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }

/* ── En-tête : le commerce, jamais FidWallet ──────── */
.signup-header {
  width:100%; padding:0 0 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.signup-monogram {
  width:64px; height:64px;
  background:var(--brand-color, var(--fid-ink));
  color:var(--brand-text-color, #ffffff);
  border-radius:var(--radius-card);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:500; line-height:1; letter-spacing:-.01em; text-transform:uppercase;
}
.signup-logos { display:flex; align-items:center; justify-content:center; gap:12px; }
.signup-logo-img {
  width:72px; height:72px; object-fit:contain;
  border-radius:var(--radius-card);
  border:1px solid var(--fid-border);
  padding:10px; background:var(--fid-white);
}
.signup-logo-text { font-size:24px; font-weight:500; color:var(--fid-ink); letter-spacing:-.02em; }
.signup-org-name { font-size:22px; font-weight:500; color:var(--fid-ink); line-height:1.15; letter-spacing:-.02em; margin-top:4px; }
.signup-subtitle {
  font-size:14px; font-weight:300; color:var(--fid-ink-3); text-align:center; margin:0;
  background:none; border-radius:0; padding:0; letter-spacing:0; text-transform:none; display:block;
}

/* ── Carte du formulaire ──────────────────────────── */
.card-container {
  width:100%;
  background:var(--fid-white);
  border:1px solid var(--fid-border);
  border-radius:var(--radius-card);
  padding:26px;
}

/* ── Champs ───────────────────────────────────────── */
.signup-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.signup-field { margin-bottom:16px; }
.signup-field label {
  display:block; font-size:13px; font-weight:450; color:var(--fid-ink-2);
  letter-spacing:.005em; text-transform:none; margin-bottom:7px; font-family:var(--font-sans);
}
.signup-field label .required { color:var(--fid-ink-3); font-weight:300; margin-left:2px; }
.signup-field label small { font-size:12px; font-weight:300; color:var(--fid-ink-3); text-transform:none; letter-spacing:0; }

.signup-field input,
.signup-field select,
.signup-field textarea {
  width:100%; padding:12px 14px;
  background:var(--fid-white);
  border:1px solid var(--fid-border);
  border-radius:var(--radius-ctl);
  font-size:15px; font-family:var(--font-sans); font-weight:400; color:var(--fid-ink);
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; outline:none;
}
.signup-field textarea { resize:vertical; min-height:76px; }
.signup-field select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
.signup-field input::placeholder,
.signup-field textarea::placeholder { color:#a3a39a; opacity:1; }
/* Focus, cases à cocher, liens : la couleur choisie par le commerce, jamais
   une couleur FidWallet (retour Mathéo, 16/09/2026). --brand-tint est posée
   par signup.js à partir de la couleur de marque. */
.signup-field input:focus,
.signup-field select:focus,
.signup-field textarea:focus {
  border-color:var(--brand-color, var(--fid-ink));
  box-shadow:0 0 0 3px var(--brand-tint, rgba(28,28,26,.08));
}
body { -webkit-tap-highlight-color:transparent; }

/* ── Cadeau d'inscription (acquis à l'inscription, jamais lié à la case) ── */
.signup-bonus {
  align-items:center; gap:10px;
  background:var(--fid-border-soft);
  background:color-mix(in srgb, var(--brand-color, var(--fid-ink)) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--brand-color, var(--fid-ink)) 10%, #fff);
  border-radius:var(--radius-ctl);
  padding:11px 13px; margin:6px 0 14px;
  font-size:13.5px; font-weight:400; color:var(--fid-ink); line-height:1.4;
}
.signup-bonus strong { font-weight:500; }
.signup-bonus-icon { flex-shrink:0; color:var(--brand-color, var(--fid-ink)); }

/* ── Notifications de service + consentement marketing ── */
.signup-service-note { font-size:12px; font-weight:300; color:var(--fid-ink-3); line-height:1.5; margin:4px 0 10px; }
.signup-consent {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:13px; font-weight:300; color:var(--fid-ink-2); line-height:1.45;
}
.signup-consent strong { font-weight:450; color:var(--fid-ink); }
.signup-consent input {
  -webkit-appearance:none; appearance:none; flex-shrink:0;
  width:16px; height:16px; margin-top:2px;
  /* v157 : contour noir fixe et fin, jamais dérivé de la couleur de marque —
     certains commerçants ont un blanc ou une teinte claire en couleur de
     marque, la case devenait invisible sur fond blanc. */
  border:1px solid rgba(0,0,0,.55); border-radius:5px; background:var(--fid-white);
  display:grid; place-content:center; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.signup-consent input::after {
  content:""; width:8px; height:4px; margin-top:-2px;
  border:1.5px solid var(--brand-text-color, #fff); border-top:0; border-right:0;
  transform:rotate(-45deg) scale(0); transition:transform .12s;
}
.signup-consent input:checked { background:var(--brand-color, var(--fid-ink)); border-color:var(--brand-color, var(--fid-ink)); }
.signup-consent input:checked::after { transform:rotate(-45deg) scale(1); }
.signup-consent input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-tint, rgba(28,28,26,.08)); }

/* ── Bouton principal : la couleur du commerce ────── */
.signup-submit-btn {
  width:100%; padding:14px;
  background:var(--brand-color, var(--fid-ink));
  color:var(--brand-text-color, #fff);
  /* v157 : contour noir fin toujours visible, même si la couleur de marque
     est blanche ou très claire (le bouton se fondait alors dans le fond). */
  border:1px solid rgba(0,0,0,.55);
  border-radius:var(--radius-ctl);
  font-size:15px; font-weight:450; font-family:var(--font-sans);
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .12s, opacity .15s;
  margin-top:14px; letter-spacing:0;
}
.signup-submit-btn:hover:not(:disabled) { transform:translateY(-1px); opacity:.92; }
.signup-submit-btn:active:not(:disabled) { transform:translateY(0); }
.signup-submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Mentions ─────────────────────────────────────── */
.signup-privacy { font-size:12px; font-weight:300; color:var(--fid-ink-3); text-align:center; margin-top:14px; line-height:1.6; }
.signup-form-error {
  background:var(--fid-red-tint); color:var(--fid-red);
  border:1px solid #f3c2bd; border-radius:var(--radius-sm);
  padding:10px 14px; font-size:13px; font-weight:400; margin:14px 0 0; line-height:1.45;
}
.signup-field.is-invalid label { color:var(--fid-red); }
.signup-form-error--field {
  background:none; border:none; padding:0; margin:7px 0 0;
  font-size:12.5px; color:var(--fid-red);
}
.signup-field.is-invalid input,
.signup-field.is-invalid select,
.signup-field.is-invalid textarea {
  border-color:var(--fid-red);
  box-shadow:0 0 0 3px rgba(180,35,24,.08);
}
.signup-divider { border:none; border-top:1px solid var(--fid-border); margin:6px 0 16px; }

/* ── Pied : Propulsé par FidWallet, discret ───────── */
.card-powered { margin-top:18px; text-align:center; }
.card-powered a, .card-powered-text {
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:12px; font-weight:400; color:var(--fid-ink-3); font-family:var(--font-sans);
  letter-spacing:.01em; padding:6px 12px; border-radius:999px; transition:color .15s;
}
.card-powered a:hover { color:var(--fid-ink); }
.card-powered-logo { height:22px; width:auto; display:block; border-radius:2px; }

/* ── Attente ──────────────────────────────────────── */
.spinner {
  width:32px; height:32px;
  border:1.5px solid var(--fid-border);
  border-top-color:var(--fid-ink);
  border-radius:50%; animation:spin .7s linear infinite;
}
.spinner-sm {
  width:17px !important; height:17px !important; border-width:2px !important;
  border-color:rgba(255,255,255,.3) !important; border-top-color:rgba(255,255,255,.9) !important;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ Écran de confirmation ═══════════════════════ */
.signup-success-section { padding:4px 0 0; text-align:center; }
.signup-success-icon { display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.signup-success-section h2 { font-size:24px; font-weight:500; color:var(--fid-ink); margin-bottom:8px; letter-spacing:-.02em; }
.signup-success-msg { font-size:14px; font-weight:300; color:var(--fid-ink-3); margin:0 auto 22px; max-width:300px; line-height:1.65; text-align:center; }

/* Aperçu de la carte (couleurs du commerce injectées par JS) */
.card-visual { border-radius:var(--radius-card); padding:20px; margin-bottom:20px; text-align:left; background:var(--fid-ink); }
.card-visual-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.card-visual-brand { font-size:15px; font-weight:500; color:#fff; letter-spacing:-.01em; }
.card-visual-type { font-size:11px; color:rgba(255,255,255,.62); font-weight:300; }
.card-visual-fields { display:flex; gap:24px; margin-top:4px; }
.card-visual-field-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-bottom:3px; font-weight:400; }
.card-visual-field-value { font-size:28px; font-weight:500; color:#fff; line-height:1; letter-spacing:-.02em; }
.card-visual-customer { font-size:13px; font-weight:300; color:rgba(255,255,255,.72); margin-top:16px; }

/* Wallet */
.card-actions { padding:18px 0 0; border-top:1px solid var(--fid-border); margin-top:4px; }
.card-actions-title { font-size:12px; font-weight:450; color:var(--fid-ink-3); text-align:center; margin-bottom:12px; }
.wallet-btn {
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  padding:14px 20px; border-radius:var(--radius-ctl);
  font-size:15px; font-weight:450; font-family:var(--font-sans);
  cursor:pointer; text-decoration:none; margin-bottom:10px; border:1px solid transparent;
  transition:transform .12s, opacity .12s; letter-spacing:-.01em;
}
.wallet-btn:hover { transform:translateY(-1px); }
.wallet-btn:active { transform:translateY(0); }
.wallet-btn-apple { background:var(--fid-ink); color:#fff; }
.wallet-btn:focus-visible, .signup-submit-btn:focus-visible {
  outline:none; box-shadow:0 0 0 3px var(--brand-tint, rgba(28,28,26,.18));
}
.wallet-btn-google { background:var(--fid-white); color:var(--fid-ink); border-color:var(--fid-border); }
.wallet-btn-icon { display:flex; align-items:center; flex-shrink:0; }

/* ═══ Écran d'erreur ══════════════════════════════ */
.card-error { text-align:center; padding:12px 0; }
.card-error-icon { color:var(--fid-red); margin-bottom:14px; }
.card-error h2 { font-size:20px; font-weight:500; color:var(--fid-ink); margin-bottom:8px; letter-spacing:-.02em; }
.card-error p { font-size:14px; font-weight:300; color:var(--fid-ink-3); line-height:1.65; }

/* ── Piège anti-robot (invisible) ─────────────────── */
.ohnohoney { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

/* ── Petits écrans ────────────────────────────────── */
@media (max-width:480px) {
  .card-page { padding:28px 12px 24px; }
  .signup-header { padding:0 0 18px; }
  .card-container { padding:20px 16px 18px; }
  .signup-field-row { grid-template-columns:1fr; gap:0; }
}
@media (max-width:390px) {
  .card-page { padding:18px 10px; }
  .card-container { padding:18px 14px 16px; }
  .signup-logo-img, .signup-monogram { width:56px; height:56px; font-size:24px; }
  .signup-org-name { font-size:20px; }
  .signup-field input { padding:12px 14px; font-size:14px; }
  .signup-submit-btn { padding:13px; font-size:14px; }
  .wallet-btn { padding:12px 14px; }
}

/* ═══ Écran de remerciement ═══════════════════════ */
.thanks-card { text-align:center; padding:34px 26px 30px; }
/* 22/10/2026 : le logo et le nom du commerce en tête, comme sur la page de la carte. */
.thanks-logo { margin:0 auto 14px; display:flex; justify-content:center; gap:12px; }
.thanks-logo:empty { display:none; }
.thanks-logo img { max-width:120px; max-height:72px; object-fit:contain; }
.thanks-logo .signup-monogram { margin:0; }
.thanks-org { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fid-ink-3); margin-bottom:18px; }
.thanks-org:empty { display:none; }
.thanks-card h2 { font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--fid-ink); margin-bottom:10px; }
.thanks-msg { font-size:16px; font-weight:400; color:var(--fid-ink-3); line-height:1.6; margin:0 auto 22px; max-width:30ch; }
.thanks-hint { font-size:14px; font-weight:400; color:var(--fid-ink-3); line-height:1.55; margin:0 auto; max-width:34ch; padding-top:18px; border-top:1px solid var(--fid-border); }
.thanks-hint:empty { display:none; }

/* ── Mode édition (éditeur « Mes pages » du tableau de bord, 20/10/2026) ──
   La page est ouverte dans une iframe par /app/mes-pages.html. Chaque texte du
   commerçant est cliquable : un trait fin au survol, un trait plein et un halo
   quand on écrit. Rien de tout cela n'existe pour le client (classe .ed-page). */
.ed-page .ed-texte { cursor:text; border-radius:6px; outline:1.5px dashed transparent; outline-offset:4px; transition:outline-color .15s ease, background .15s ease; }
.ed-page .ed-texte:hover { outline-color:rgba(28,28,26,.28); }
.ed-page .ed-texte:focus { outline:1.5px solid var(--fid-ink); background:rgba(255,200,0,.14); box-shadow:none; }
.ed-page .signup-submit-btn .ed-texte:hover { outline-color:rgba(255,255,255,.7); }
.ed-page .signup-submit-btn .ed-texte:focus { outline-color:#fff; background:rgba(255,255,255,.18); color:inherit; }
.ed-page .signup-submit-btn { cursor:text; }
.ed-page .signup-submit-btn:hover:not(:disabled) { transform:none; opacity:1; }
.ed-page .signup-consent input { pointer-events:none; }
.ed-page .signup-field input, .ed-page .signup-field select { pointer-events:none; opacity:.85; }
.ed-page .ed-texte:empty::before { content:attr(data-vide); color:var(--fid-ink-3); font-style:italic; }
.ed-page .card-powered { pointer-events:none; }

/* 31/10/2026 : écran de succès épuré (logo, félicitations, un bouton wallet). */
.success-actions { margin-top:26px; }
.success-wallet-btn { display:flex; align-items:center; justify-content:center; width:100%; padding:16px 20px; border:0; border-radius:14px; background:var(--fid-ink); color:#fff; font:inherit; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
.success-wallet-btn:active { opacity:.85; }
.success-wallet-alt { margin-top:14px; font-size:13px; color:var(--fid-ink-3); }
.success-wallet-link { background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--fid-ink-3); text-decoration:underline; cursor:pointer; }