/* ============================================================
   VERDON FOLIES 2026 — Blind Test QS Play
   Feuille de style « rétro tropical 70s » (continuité affiche)
   Auteur : design Prestige Sound · accent #E26A2C
   ------------------------------------------------------------
   Intégration QS Play : charger CE fichier APRÈS le CDN Tailwind
   dans join.php / session.php / index.php. Toutes les classes sont
   préfixées .vf-* pour ne pas entrer en conflit avec Tailwind.
   Les polices sont chargées depuis jsDelivr (@fontsource) — aucune
   dépendance Google Fonts. Hébergez-les en local si besoin offline.
   ============================================================ */

/* ---------- Webfonts (jsDelivr @fontsource, libres) ---------- */
@font-face{
  font-family:'Bagel Fat One';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/bagel-fat-one@latest/latin-400-normal.woff2') format('woff2');
}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/nunito@latest/latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/nunito@latest/latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/nunito@latest/latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/nunito@latest/latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/nunito@latest/latin-900-normal.woff2') format('woff2');}

/* ---------- Tokens (palette affiche) ---------- */
:root{
  --cream:#F2E4C2;
  --cream-2:#EAD7AE;        /* crème un peu plus sombre, panneaux */
  --sun-yellow:#F4B73E;
  --burnt-orange:#E26A2C;   /* ACCENT PRINCIPAL */
  --burnt-orange-d:#C4561F; /* press / ombre bouton */
  --coral:#EE9C6B;
  --olive:#59602F;          /* cartouches, blocs texte fort */
  --olive-d:#454A22;
  --palm-green:#2F5D4A;
  --teal:#3E8E89;
  --teal-d:#2F6F6B;
  --bordeaux:#7E2D27;       /* contours typo, ombres */
  --bordeaux-d:#5E1F1B;
  --wood:#9C6B3A;

  --ink:#3A2A12;            /* texte foncé sur crème */
  --ink-soft:rgba(58,42,18,.66);

  --font-display:'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-card:22px;
  --r-pill:999px;
  --shadow-card:0 14px 34px rgba(58,30,12,.28), inset 0 2px 0 rgba(255,255,255,.18);
  --shadow-soft:0 8px 20px rgba(58,30,12,.20);
  --frame:rgba(126,45,39,.9); /* contour bordeaux des éléments */
}

/* ---------- Base ---------- */
.vf-root,.vf{
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Titre bubble (façon "Verdon Folies") ---------- */
.vf-bubble{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.92;
  color:var(--cream);
  letter-spacing:.005em;
  -webkit-text-stroke:.07em var(--bordeaux);
  paint-order:stroke fill;
  text-shadow:
    .035em .055em 0 var(--bordeaux),
    .035em .11em  0 rgba(94,31,27,.55);
}
.vf-bubble--olive{ color:var(--olive); -webkit-text-stroke-color:var(--cream);
  text-shadow:.03em .05em 0 rgba(0,0,0,.18); }
.vf-bubble--orange{ color:var(--sun-yellow); -webkit-text-stroke-color:var(--bordeaux);
  text-shadow:.035em .055em 0 var(--bordeaux), .035em .11em 0 rgba(94,31,27,.5); }

/* ---------- Eyebrow / label ---------- */
.vf-eyebrow{
  font-family:var(--font-body);font-weight:800;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:.82rem;color:var(--bordeaux);
}

/* ---------- Cartouche olive (façon bloc date affiche) ---------- */
.vf-panel{
  background:var(--olive);
  color:var(--cream);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  border:3px solid rgba(0,0,0,.10);
}
.vf-panel--glass{
  background:rgba(43,48,22,.82);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}

/* ---------- Boutons ---------- */
.vf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);font-weight:400;
  font-size:1.5rem;letter-spacing:.01em;
  color:var(--cream);
  background:var(--burnt-orange);
  border:none;border-radius:var(--r-pill);
  padding:.7em 1.4em;min-height:64px;
  box-shadow:0 7px 0 var(--burnt-orange-d), 0 14px 22px rgba(58,30,12,.30);
  cursor:pointer;
  -webkit-text-stroke:.05em var(--bordeaux);paint-order:stroke fill;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.vf-btn:hover{ background:#ef7d3f; }
.vf-btn:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--burnt-orange-d), 0 6px 12px rgba(58,30,12,.28); }
.vf-btn--block{ width:100%; }
.vf-btn--ghost{
  background:transparent;color:var(--olive);
  -webkit-text-stroke:0;
  border:3px solid var(--olive);
  box-shadow:none;font-family:var(--font-body);font-weight:800;font-size:1.05rem;
}

/* ---------- Champ de saisie (nom d'équipe) ---------- */
.vf-input{
  width:100%;box-sizing:border-box;
  font-family:var(--font-body);font-weight:800;font-size:1.4rem;
  text-align:center;color:var(--ink);
  background:var(--cream);
  border:3px solid var(--bordeaux);
  border-radius:18px;
  padding:.7em .8em;min-height:62px;
  box-shadow:inset 0 3px 0 rgba(126,45,39,.10);
  outline:none;
}
.vf-input::placeholder{ color:rgba(58,42,18,.42); font-weight:700; }
.vf-input:focus{ border-color:var(--burnt-orange); box-shadow:0 0 0 4px rgba(226,106,44,.22); }

/* ---------- Cartes de réponse (blind test) ---------- */
.vf-answers{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;
}
.vf-answer{
  position:relative;display:flex;align-items:center;gap:12px;
  text-align:left;cursor:pointer;
  border:none;border-radius:var(--r-card);
  padding:18px 18px;min-height:104px;
  color:#fff;font-family:var(--font-body);font-weight:800;
  font-size:1.18rem;line-height:1.12;
  box-shadow:var(--shadow-card);
  border:3px solid rgba(0,0,0,.12);
  transition:transform .12s ease, filter .12s ease;
}
.vf-answer:active{ transform:scale(.97); }
.vf-answer__glyph{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-size:1.3rem;font-weight:900;
  background:rgba(255,255,255,.22);
  border:2px solid rgba(255,255,255,.5);
}
.vf-answer--a{ background:var(--burnt-orange); }
.vf-answer--b{ background:var(--teal); }
.vf-answer--c{ background:var(--olive); }
.vf-answer--d{ background:var(--coral); color:var(--bordeaux); }
.vf-answer--d .vf-answer__glyph{ background:rgba(126,45,39,.16); border-color:rgba(126,45,39,.4); }
/* états révélation */
.vf-answer.is-correct{ outline:5px solid var(--sun-yellow); outline-offset:3px; filter:saturate(1.1); }
.vf-answer.is-wrong{ opacity:.42; filter:grayscale(.4); }
.vf-answer.is-picked::after{
  content:'';position:absolute;inset:-3px;border-radius:var(--r-card);
  border:4px solid #fff;box-shadow:0 0 0 4px var(--burnt-orange);
}

/* ---------- Timer ---------- */
.vf-timer{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);color:var(--cream);
  width:74px;height:74px;border-radius:50%;
  background:var(--bordeaux);font-size:2rem;
  border:4px solid var(--cream);
  box-shadow:var(--shadow-soft);
}
.vf-timerbar{ height:14px;border-radius:999px;background:rgba(126,45,39,.18);overflow:hidden; }
.vf-timerbar__fill{ height:100%;background:var(--burnt-orange);border-radius:999px; }

/* ---------- Pastilles / points ---------- */
.vf-chip{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-body);font-weight:800;font-size:.95rem;
  background:var(--cream);color:var(--bordeaux);
  border:2px solid var(--bordeaux);border-radius:999px;
  padding:.35em .9em;
}
.vf-chip--sun{ background:var(--sun-yellow);color:var(--bordeaux);border-color:var(--bordeaux); }

/* ---------- Leaderboard ---------- */
.vf-rank{
  display:flex;align-items:center;gap:14px;
  background:var(--cream);border-radius:16px;
  padding:12px 16px;border:2px solid rgba(126,45,39,.18);
  box-shadow:var(--shadow-soft);
}
.vf-rank__num{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.3rem;color:var(--cream);
  background:var(--olive);
}
.vf-rank__name{ flex:1;font-weight:800;font-size:1.1rem;color:var(--ink); }
.vf-rank__score{ font-family:var(--font-display);font-size:1.25rem;color:var(--burnt-orange);
  -webkit-text-stroke:.03em var(--bordeaux);paint-order:stroke fill; }
.vf-rank--1 .vf-rank__num{ background:var(--sun-yellow);color:var(--bordeaux); }
.vf-rank--2 .vf-rank__num{ background:var(--coral);color:var(--bordeaux); }
.vf-rank--3 .vf-rank__num{ background:var(--wood); }

/* ---------- Logo coin ---------- */
.vf-logo{ position:absolute;top:16px;right:16px;width:46px;height:auto;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }

/* ---------- Petites ondulations dorées (séparateur affiche) ---------- */
.vf-squiggle{ display:block;height:12px;color:var(--sun-yellow); }