/* ============================================================
   PROMPTWIS(C)E : Charte graphique « Atelier clair »
   tokens.css : couleurs, typo, formes, ombres, mouvement
   ============================================================ */

:root {
  /* ---- Papier & encre ---------------------------------- */
  --paper:       #F6F1E7;   /* fond de table, crème craie   */
  --paper-2:     #FDFBF5;   /* surface carte / panneau      */
  --paper-3:     #EFE8DA;   /* creux, zones neutres         */
  --ink:         #262219;   /* encre principale             */
  --ink-soft:    #6E6557;   /* encre secondaire             */
  --ink-faint:   #A2988A;   /* légendes, filigranes         */
  --line:        rgba(38, 34, 25, .13);
  --line-strong: rgba(38, 34, 25, .26);

  /* ---- Accents transverses ------------------------------ */
  --rose:      #E5327C;     /* TADAM : logo, moments forts  */
  --rose-tint: #FBE3EE;
  --gold:      #C08A22;     /* prix, podium                 */
  --gold-tint: #F7ECD2;

  /* ---- Familles de cartes -------------------------------
     bold  = couleur signature (bandeaux, dos)
     deep  = texte sur tint / fonds profonds
     tint  = fond pâle de zone
     soft  = bordures, motifs                                */
  --prompt-bold: #3D6FE0;  --prompt-deep: #1D3B7E;
  --prompt-tint: #E9EFFC;  --prompt-soft: #B7CBF3;

  --lens-bold:   #1FA057;  --lens-deep:   #0E5232;
  --lens-tint:   #E1F4E8;  --lens-soft:   #A9DFC0;

  --chall-bold:  #E4502E;  --chall-deep:  #8F290F;
  --chall-tint:  #FCE9E2;  --chall-soft:  #F4BEAB;

  --spec-bold:   #7A4FE0;  --spec-deep:   #3E2580;
  --spec-tint:   #EFE9FC;  --spec-soft:   #CCBBF3;

  /* ---- Typographie -------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-ui:      'Outfit', 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', 'Consolas', monospace;

  /* ---- Formes & profondeur ------------------------------ */
  --r-card: 20px;
  --r-zone: 14px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(38,34,25,.05), 0 10px 30px -12px rgba(38,34,25,.22);
  --shadow-lift: 0 2px 4px rgba(38,34,25,.06), 0 18px 44px -14px rgba(38,34,25,.3);
  --shadow-soft: 0 1px 2px rgba(38,34,25,.05), 0 4px 14px -6px rgba(38,34,25,.12);

  /* ---- Mouvement ----------------------------------------- */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --t-fast: 140ms;
  --t-med:  260ms;
  --t-slow: 480ms;
}

/* Variables de famille appliquées par modificateur */
.fam-prompt { --fam-bold: var(--prompt-bold); --fam-deep: var(--prompt-deep); --fam-tint: var(--prompt-tint); --fam-soft: var(--prompt-soft); }
.fam-lens   { --fam-bold: var(--lens-bold);   --fam-deep: var(--lens-deep);   --fam-tint: var(--lens-tint);   --fam-soft: var(--lens-soft); }
.fam-chall  { --fam-bold: var(--chall-bold);  --fam-deep: var(--chall-deep);  --fam-tint: var(--chall-tint);  --fam-soft: var(--chall-soft); }
.fam-spec   { --fam-bold: var(--spec-bold);   --fam-deep: var(--spec-deep);   --fam-tint: var(--spec-tint);   --fam-soft: var(--spec-soft); }

/* ---- Base ------------------------------------------------ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Grain papier très léger sur toute la table */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--rose-tint); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }

/* ---- Petits composants transverses ----------------------- */
.pw-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 12.5px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pw-chip .ic { width: 14px; height: 14px; }
.pw-chip--fam { background: var(--fam-tint); color: var(--fam-deep); }

.pw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14.5px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(38,34,25,.12);
  transition: transform var(--t-fast) var(--spring), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  user-select: none;
  touch-action: manipulation;
}
.pw-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(38,34,25,.14); }
.pw-btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 rgba(38,34,25,.1); }
.pw-btn .ic { width: 17px; height: 17px; }
.pw-btn--primary { background: var(--ink); color: var(--paper-2); border-color: var(--ink); box-shadow: 0 2px 0 rgba(38,34,25,.35); }
.pw-btn--fam { background: var(--fam-bold); color: #fff; border-color: var(--fam-bold); box-shadow: 0 2px 0 var(--fam-deep); }
.pw-btn--ghost { background: transparent; box-shadow: none; border-color: var(--line); }

.ic { display: inline-block; vertical-align: -2px; }

/* Wordmark promptwis(c)e */
.pw-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: baseline; }
.pw-wordmark .c {
  display: inline-flex; align-items: center; justify-content: center;
  width: .92em; height: .92em;
  border: .07em solid currentColor;
  border-radius: 50%;
  font-size: .62em; font-weight: 700;
  margin: 0 .06em;
  transform: translateY(-.04em);
}