/* =============================================================================
   TellSet — Les pages du compte (/compte/…) et les pages d'essai (/essai/…)
   TSS-4, 30/10/2026.

   Vues par les CLIENTS, pas par Clément : elles ne chargent rien chez Google
   (pas de police distante — l'adresse de chaque visiteur partirait chez un
   tiers), seulement la police du système. Un seul thème, le clair, comme le CRM.

   Les couleurs, mesurées sur blanc (WCAG) : l'indigo TellSet #6C63FF ne fait
   que 4,3:1 — il porte le logo et les repères, jamais du texte. Les boutons et
   les liens prennent l'encre indigo #4F46E5 (6,3:1, texte blanc dessus 6,3:1).
   ============================================================================= */
:root{
  color-scheme: light;
  --indigo:      #6C63FF;
  --indigo-ink:  #4F46E5;   /* 6,3:1 sur blanc */
  --indigo-fort: #4338CA;   /* 7,9:1, survol */
  --indigo-pale: #F0EFFF;
  --encre:       #17162B;   /* 17,7:1 */
  --encre-2:     #575672;   /* 7,05:1 sur blanc, 6,4:1 sur le fond */
  --fond:        #F4F3FF;
  --carte:       #FFFFFF;
  --trait:       rgba(23,22,43,.12);
  --ok-ink:      #0A6E4C;  --ok-pale:      #E3F6EE;
  --danger-ink:  #B02A2A;  --danger-pale:  #FDE4E1;
  --alerte-ink:  #9A5B00;  --alerte-pale:  #FFF1D6;
  --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ font-family:var(--f); color:var(--encre); background:var(--fond); min-height:100vh;
  line-height:1.55; -webkit-font-smoothing:antialiased; padding:32px 16px 48px }

.page{ max-width:520px; margin:0 auto }
.page.large{ max-width:760px }
.marque{ display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--encre);
  font-weight:800; font-size:1.35rem; letter-spacing:-.01em; text-decoration:none }
.marque svg{ width:30px; height:30px; color:var(--indigo) }
.marque small{ font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--indigo-ink); background:var(--indigo-pale); padding:3px 8px; border-radius:999px }

.carte{ background:var(--carte); border-radius:18px; padding:26px 24px;
  box-shadow:0 1px 2px rgba(23,22,43,.05), 0 14px 34px -18px rgba(60,48,140,.28); margin-bottom:16px }
h1{ font-size:1.45rem; line-height:1.25; letter-spacing:-.01em; margin-bottom:8px }
h2{ font-size:1.08rem; margin-bottom:6px }
p{ margin-bottom:12px }
.sous{ color:var(--encre-2); font-size:.95rem }
.petit{ color:var(--encre-2); font-size:.85rem }

.etapes{ display:flex; gap:6px; list-style:none; margin:0 0 18px; flex-wrap:wrap }
.etapes li{ font-size:.8rem; font-weight:700; color:var(--encre-2); background:rgba(23,22,43,.06);
  padding:4px 10px; border-radius:999px }
.etapes li.en-cours{ color:#fff; background:var(--indigo-ink) }
.etapes li.faite{ color:var(--ok-ink); background:var(--ok-pale) }

form{ display:flex; flex-direction:column; gap:14px }
.champ{ display:flex; flex-direction:column; gap:6px }
.champ label{ font-size:.88rem; font-weight:700 }
.champ input, .champ select, .champ textarea{ font:inherit; font-size:1rem; color:var(--encre);
  background:#fff; border:1px solid var(--trait); border-radius:12px; padding:11px 13px; width:100% }
.champ input[readonly]{ background:var(--fond); color:var(--encre-2) }
.champ textarea{ font-family:var(--mono); font-size:.82rem; min-height:72px; resize:vertical }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible,
.btn:focus-visible{ outline:3px solid var(--indigo); outline-offset:2px }
.aide{ font-size:.82rem; color:var(--encre-2) }
.code-saisie{ font-family:var(--mono) !important; font-size:1.5rem !important; letter-spacing:.3em; text-align:center }

.btn{ font:inherit; font-weight:700; font-size:1rem; border:0; border-radius:12px; padding:12px 18px;
  background:var(--indigo-ink); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; text-align:center }
.btn:hover{ background:var(--indigo-fort) }
.btn:disabled{ opacity:.55; cursor:default }
.btn.leger{ background:#fff; color:var(--indigo-ink); border:1px solid var(--trait) }
.btn.leger:hover{ background:var(--indigo-pale) }
.btn.danger{ background:#fff; color:var(--danger-ink); border:1px solid rgba(176,42,42,.35) }
.rangee{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
a{ color:var(--indigo-ink) }

.message{ border-radius:12px; padding:12px 14px; font-size:.92rem; margin:0 0 14px }
.message.ok{ background:var(--ok-pale); color:var(--ok-ink) }
.message.erreur{ background:var(--danger-pale); color:var(--danger-ink) }
.message.alerte{ background:var(--alerte-pale); color:var(--alerte-ink) }
.message:empty{ display:none }

.qr{ display:flex; justify-content:center; margin:6px 0 14px }
.qr svg{ width:220px; height:220px; background:#fff; border:1px solid var(--trait); border-radius:12px; padding:6px }
.secret{ font-family:var(--mono); font-size:.95rem; letter-spacing:.06em; background:var(--fond);
  border-radius:10px; padding:10px 12px; word-break:break-all }
details{ margin:4px 0 12px } summary{ cursor:pointer; font-weight:700; font-size:.9rem; color:var(--indigo-ink) }
details > :not(summary){ margin-top:10px }
.code-court{ font-family:var(--mono); font-size:2rem; font-weight:700; letter-spacing:.14em; text-align:center;
  color:var(--encre); margin:4px 0 6px }
.compte-a-rebours{ text-align:center; font-weight:700; color:var(--encre-2) }

.infos{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.92rem; margin-bottom:14px }
.infos dt{ color:var(--encre-2) } .infos dd{ font-weight:600; word-break:break-word }

.bandeau-essai{ background:var(--alerte-pale); color:var(--alerte-ink); border-radius:12px;
  padding:10px 14px; font-size:.86rem; margin-bottom:16px }
.liens-essai{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) }
.liens-essai a{ display:block; background:#fff; border:1px solid var(--trait); border-radius:14px;
  padding:14px; text-decoration:none; color:var(--encre) }
.liens-essai a strong{ display:block; color:var(--indigo-ink) }
.liens-essai a span{ font-size:.85rem; color:var(--encre-2) }
[hidden]{ display:none !important }

/* TSS-9 : la page /telecharger/<jeton> — les trois gestes après le téléchargement. */
.gestes{ margin:0 0 14px 22px } .gestes li{ margin-bottom:6px }