/* ============================================================
   PROMPTWIS(C)E : cards.css
   Cartes (4 familles, faces + dos), tirage/flip,
   stepper de phases, chronos, bannières
   ============================================================ */

/* ---------- Carte : socle ---------------------------------- */
.pw-card {
  --cw: 320px;
  width: var(--cw);
  flex: none;
  /* Hauteur de confort au ratio carte (20/29) : le contenu peut
     toujours l'étirer, jamais se faire rogner. */
  min-height: calc(var(--cw, 320px) * 1.45);
  background: var(--paper-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(38, 34, 25, .09);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  color: var(--ink);
  transition: transform var(--t-med) var(--spring), box-shadow var(--t-med) var(--ease);
}
.pw-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-lift); }

/* ---------- Bandeau de famille ------------------------------ */
.pw-card__band {
  background: var(--fam-bold);
  color: #fff;
  padding: 12px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  background-image: repeating-linear-gradient(-55deg, rgba(255,255,255,.055) 0 5px, transparent 5px 11px);
}
.pw-card__coin {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--fam-bold);
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.pw-card__coin .ic { width: 17px; height: 17px; }
.pw-card__famname {
  font-weight: 700; font-size: 11px;
  letter-spacing: .17em; text-transform: uppercase;
  line-height: 1.25;
}
.pw-card__famname small {
  display: block;
  font-weight: 600; font-size: 9px;
  letter-spacing: .22em;
  opacity: .78;
}
.pw-card__num {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: .8;
  letter-spacing: .05em;
}
.pw-card__wave {
  height: 7px;
  background: var(--fam-bold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='7' viewBox='0 0 22 7'%3E%3Cpath d='M0 2.6 Q5.5 6.2 11 2.6 T22 2.6 L22 0 L0 0 Z'/%3E%3C/svg%3E") repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='7' viewBox='0 0 22 7'%3E%3Cpath d='M0 2.6 Q5.5 6.2 11 2.6 T22 2.6 L22 0 L0 0 Z'/%3E%3C/svg%3E") repeat-x;
  -webkit-mask-size: 22px 7px; mask-size: 22px 7px;
  margin-top: -1px;
}

/* ---------- Corps ------------------------------------------- */
/* Le ratio 20/29 est la taille de confort : si le texte demande plus,
   c'est la carte qui grandit, jamais le texte qui se fait rogner. */
.pw-card__body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
}
.pw-card__body > * { position: relative; z-index: 1; }
.pw-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.06;
  letter-spacing: -.015em;
}
.pw-card__title::after {
  content: '';
  display: block;
  width: 38px; height: 4px;
  border-radius: 4px;
  background: var(--fam-bold);
  margin-top: 7px;
}

.pw-zone { position: relative; }
.pw-zone__label {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--fam-deep);
  margin-bottom: 5px;
}
.pw-zone__label .ic { width: 13px; height: 13px; flex: none; }

.pw-zone--ask {
  background: var(--fam-tint);
  border-radius: var(--r-zone);
  padding: 11px 30px 12px 15px;
}
.pw-zone--ask .pw-zone__text {
  font-weight: 500; font-size: 14.5px; line-height: 1.42;
}
/* Guillemet décoratif : pure décoration CSS, hors du flux et hors mesure. */
.pw-zone--ask::after {
  content: '»';
  position: absolute;
  top: 2px; right: 10px;
  font-family: var(--font-display);
  font-weight: 800; font-size: 26px;
  line-height: 1;
  color: var(--fam-bold);
  opacity: .5;
  pointer-events: none;
}
.pw-zone--then .pw-zone__text,
.pw-zone--reflect .pw-zone__text {
  font-size: 13px; line-height: 1.42; color: var(--ink);
}
.pw-zone--then { padding: 0 2px; }
.pw-zone--reflect {
  padding: 9px 12px 10px;
  border: 1.5px dashed var(--fam-soft);
  border-radius: var(--r-zone);
}
.pw-zone--reflect .pw-zone__text { color: var(--ink-soft); }

/* variantes lens */
.pw-zone--question {
  background: var(--fam-tint);
  border-radius: var(--r-zone);
  padding: 10px 13px;
}
.pw-zone--question .pw-zone__text { font-weight: 600; font-size: 15.5px; line-height: 1.38; }
.pw-zone--reprompt {
  border: 1.5px solid var(--fam-soft);
  border-radius: var(--r-zone);
  padding: 9px 12px;
  background: var(--paper-2);
}
.pw-zone--reprompt .pw-zone__text { font-size: 13px; font-style: italic; }
.pw-zone--reprompt .pw-copy {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 11px;
  letter-spacing: .04em;
  color: var(--fam-deep);
  background: var(--fam-tint);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.pw-copy .ic { width: 13px; height: 13px; }

/* ---------- Pied ------------------------------------------- */
.pw-card__foot {
  margin-top: auto;
  padding: 10px 16px 12px;
  border-top: 2px dotted var(--line);
}
.pw-tip {
  display: flex; gap: 7px;
  font-size: 11.5px; line-height: 1.4;
  color: var(--ink-soft);
}
.pw-tip .ic { width: 14px; height: 14px; flex: none; color: var(--gold); margin-top: 1px; }
.pw-tip b { font-weight: 700; color: var(--ink); }
.pw-card__credits {
  display: flex; align-items: center;
  margin-top: 8px;
  font-size: 8.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pw-pips { margin-left: auto; display: flex; gap: 4px; }
.pw-pips i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line);
}
.pw-pips i.on { background: var(--fam-bold); }

/* ---------- Challenge : face manifeste ---------------------- */
.pw-card--challenge .pw-card__body { align-items: center; text-align: center; justify-content: center; gap: 14px; }
.pw-card--challenge .pw-card__title { font-size: 30px; }
.pw-card--challenge .pw-card__title::after { margin-inline: auto; }
.pw-card--challenge .pw-task {
  font-size: 16px; font-weight: 500; line-height: 1.45;
  max-width: 25ch;
}
.pw-card--challenge .pw-card__body::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 48px;
  background: repeating-linear-gradient(-45deg, var(--fam-tint) 0 10px, transparent 10px 20px);
  -webkit-mask: linear-gradient(to top, #000, transparent);
          mask: linear-gradient(to top, #000, transparent);
  pointer-events: none;
  opacity: .8;
  z-index: 0;
}
.pw-chrono {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--fam-tint);
  color: var(--fam-deep);
  border-radius: var(--r-pill);
  padding: 8px 18px;
}
.pw-chrono .ic { width: 17px; height: 17px; }
.pw-chrono b { font-family: var(--font-mono); font-weight: 700; font-size: 21px; letter-spacing: .02em; }
.pw-chrono span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Special : face persona --------------------------- */
.pw-card--special .pw-card__body { align-items: center; text-align: center; justify-content: center; gap: 12px; }
.pw-card--special .pw-card__body::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 10%, var(--fam-tint) 0 20px, transparent 21px),
    radial-gradient(circle at 9% 84%, var(--fam-tint) 0 15px, transparent 16px);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}
.pw-card--special .pw-emblem {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--fam-tint);
  color: var(--fam-bold);
  display: grid; place-items: center;
  position: relative;
}
.pw-card--special .pw-emblem .ic { width: 26px; height: 26px; }
.pw-card--special .pw-card__title { font-size: 27px; }
.pw-card--special .pw-card__title::after { margin-inline: auto; }
.pw-power { font-size: 14.5px; line-height: 1.5; max-width: 24ch; }
.pw-badges { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.pw-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fam-deep);
  background: var(--fam-tint);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* ---------- Dos de carte ------------------------------------ */
.pw-card--back {
  background: linear-gradient(165deg, var(--fam-bold) 0%, var(--fam-deep) 108%);
  color: #fff;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: none;
}
.pw-card--back::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.055) 0 1.5px, transparent 1.5px 13px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.055) 0 1.5px, transparent 1.5px 13px);
}
.pw-card--back::after {
  content: '';
  position: absolute; inset: 11px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 13px;
  pointer-events: none;
}
.pw-back__ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  display: grid; place-items: center;
  position: relative;
}
.pw-back__ring::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.35);
}
.pw-back__ring .ic { width: 42px; height: 42px; }
.pw-back__name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: .34em; text-transform: uppercase;
  text-indent: .34em;
}
.pw-back__mark { position: absolute; bottom: 22px; opacity: .6; }
.pw-back__mark .ic { width: 15px; height: 15px; }

/* ---------- Tirage : flip 3D --------------------------------- */
.pw-flip { perspective: 1400px; width: 320px; }
.pw-flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .85s var(--spring);
  min-height: calc(var(--cw, 320px) * 1.45);
}
/* La face donne sa hauteur au retournement ; le dos s'y étire. */
.pw-flip .pw-card { width: 100%; backface-visibility: hidden; box-shadow: var(--shadow-card); }
.pw-flip .pw-card--back,
.pw-flip .pw-card--back:hover { position: absolute; inset: 0; transform: rotateY(0deg); }
.pw-flip .pw-face,
.pw-flip .pw-face:hover { position: relative; transform: rotateY(180deg); }
.pw-flip.is-flipped .pw-flip__inner { transform: rotateY(180deg); }

/* ---------- Stepper de phases -------------------------------- */
.pw-phases {
  display: flex; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.pw-phase {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 14px 12px;
  border-radius: 16px;
  position: relative;
  min-width: 86px;
}
.pw-phase + .pw-phase::before {
  content: '';
  position: absolute;
  left: -14px; top: 26px;
  width: 28px;
  border-top: 2px dotted var(--line-strong);
}
.pw-phase__coin {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-3);
  color: var(--ink-faint);
  position: relative;
  z-index: 1;
  transition: all var(--t-med) var(--spring);
}
.pw-phase__coin .ic { width: 17px; height: 17px; }
.pw-phase__name { font-weight: 600; font-size: 12px; color: var(--ink-faint); }
.pw-phase__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--paper-3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.pw-phase--done .pw-phase__coin { background: var(--fam-tint); color: var(--fam-deep); }
.pw-phase--done .pw-phase__name { color: var(--ink-soft); }
.pw-phase--active {
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
}
.pw-phase--active .pw-phase__coin {
  background: var(--fam-bold);
  color: #fff;
  box-shadow: 0 0 0 5px var(--fam-tint);
}
.pw-phase--active .pw-phase__name { color: var(--ink); font-weight: 700; }
.pw-phase--active .pw-phase__time { background: var(--fam-tint); color: var(--fam-deep); font-weight: 700; }

/* ---------- Chrono de phase ---------------------------------- */
.pw-timer {
  display: inline-flex; align-items: center; gap: 12px;
}
.pw-timer__ring { width: 58px; height: 58px; transform: rotate(-90deg); }
.pw-timer__ring .track { fill: none; stroke: var(--line); stroke-width: 5; }
.pw-timer__ring .bar   { fill: none; stroke: var(--fam-bold); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke var(--t-med); }
.pw-timer__val {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 30px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.pw-timer__sub { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.pw-timer.is-warn .pw-timer__val { color: var(--chall-bold); }
.pw-timer.is-warn .bar { stroke: var(--chall-bold); }
.pw-timer.is-crit .pw-timer__val { color: #C4180C; animation: pw-beat 1s var(--ease) infinite; }
.pw-timer.is-crit .bar { stroke: #C4180C; }
@keyframes pw-beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.07); }
  24% { transform: scale(1); }
}

/* ---------- Bannières ----------------------------------------- */
.pw-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--fam-tint);
  color: var(--fam-deep);
  border: 1.5px solid var(--fam-soft);
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 500; font-size: 14px;
}
.pw-banner .ic { width: 18px; height: 18px; flex: none; }
.pw-banner b { font-weight: 700; }

/* ---------- Prix / awards -------------------------------------- */
.pw-award {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-tint);
  color: #7A5410;
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-weight: 700; font-size: 13px;
}
.pw-award .ic { width: 16px; height: 16px; color: var(--gold); }

/* ---------- Caractère : donne, inclinaison, arche ------------- */

/* Les cartes arrivent comme une donne, légèrement de travers */
@keyframes pw-deal {
  0%   { opacity: 0; transform: translateY(34px) rotate(var(--deal-r, -4deg)) scale(.95); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
.pw-deal { animation: pw-deal .75s var(--spring) both; animation-delay: calc(var(--i, 0) * 95ms); }
.pw-deal:nth-child(even) { --deal-r: 3.5deg; }

/* Inclinaison qui suit le pointeur (classe et variables posées par JS) */
.pw-card.is-tilting {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px);
  box-shadow: var(--shadow-lift);
  transition: box-shadow var(--t-med) var(--ease);
}

/* Le retournement décolle en petite arche */
@keyframes pw-arc {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-18px) scale(1.045); }
  100% { transform: translateY(0) scale(1); }
}
.pw-flip.is-arcing { animation: pw-arc .85s var(--spring); }

/* Confirmation joyeuse au clic sur « copier » */
@keyframes pw-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
.pw-copy { cursor: pointer; user-select: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--spring); }
.pw-copy:active { transform: scale(.93); }
.pw-copy.is-copied { background: var(--fam-bold); color: #fff; animation: pw-pop .45s var(--spring); }

/* Le jeton de la phase active surgit puis respire */
.pw-phase--active .pw-phase__coin { animation: pw-pop .5s var(--spring), pw-breathe 2.8s ease-in-out .6s infinite; }
@keyframes pw-breathe {
  0%, 100% { box-shadow: 0 0 0 5px var(--fam-tint); }
  50%      { box-shadow: 0 0 0 9px var(--fam-tint); }
}

@media (prefers-reduced-motion: reduce) {
  .pw-card, .pw-flip__inner, .pw-btn, .pw-deal, .pw-copy { transition: none !important; animation: none !important; }
  .pw-timer.is-crit .pw-timer__val, .pw-phase--active .pw-phase__coin, .pw-flip.is-arcing { animation: none !important; }
}

/* ================================================================
   V5 : sujet injecté marqué proprement + amorces hook (docs/V5.md)
   ================================================================ */

/* Le sujet de la manche injecté dans le texte de la carte : teinte de la
   famille, pas le surligneur jaune par défaut du navigateur. */
.pw-ph {
  background: var(--fam-tint, #FDF2D0);
  color: var(--fam-deep, inherit);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 700;
  font-style: normal;
}

/* Lens : l'amorce « Par où commencer » au-dessus de la question */
.pw-zone--hook {
  background: var(--fam-tint);
  border-radius: 10px;
  padding: 8px 10px 9px;
}
.pw-zone--hook .pw-zone__text { font-weight: 600; font-size: 13.5px; line-height: 1.4; color: var(--fam-deep); }

/* Challenge : le « comment s'y prendre » sous la consigne */
.pw-hook {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
  margin-top: 2px;
}
.pw-hook .ic { width: 14px; height: 14px; flex: none; color: var(--fam-bold); margin-top: 2px; }