/* Le coin des curieux : cartes « Vrai ou faux ? » */
.vf-stickers{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.vf-stickers .sticker{font-size:1.6rem;padding:6px 22px}
.vf-stickers .sticker + .sticker{transform:rotate(4deg);margin-left:34px}
.no-mb{margin-bottom:0}

.vf-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:26px 0 18px}
.vf-score{margin:0;font:500 1.1rem var(--font-titre);background:var(--blanc);border:3px solid var(--nuit);border-radius:999px;padding:8px 18px}
.vf-actions{display:flex;flex-wrap:wrap;gap:4px 18px}

.vf-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.vf-list > *{min-width:0}
@media (min-width:720px){.vf-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.vf-list{grid-template-columns:repeat(3,1fr)}}
.vf{display:flex}
.vf-inner{position:relative;flex:1;display:grid;perspective:1400px;min-width:0}
.vf-face{min-width:0;border:3px solid var(--nuit);border-radius:var(--radius);padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.vf-face p{margin:0}
.vf-front{background:var(--t);box-shadow:0 5px 0 var(--nuit)}
.vf-back{background:var(--blanc);font-size:1rem;line-height:1.6;box-shadow:0 5px 0 var(--nuit)}
.vf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vf-art{width:68px;height:68px;border-radius:50%;background:var(--blanc);border:3px solid var(--nuit);display:grid;place-items:center}
.vf-art svg{width:46px;height:46px}
.vf-no{font:600 .9rem var(--font-titre);background:var(--blanc);border:2px solid var(--nuit);border-radius:99px;padding:2px 10px}
.vf-kicker{font:600 1rem var(--font-titre);text-transform:uppercase;letter-spacing:.06em}
.vf-q{font-size:1.4rem;line-height:1.3;margin:0}
.vf-guess{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.vf-guess .btn{flex:1;min-width:0}
.vf-verdict{font:700 1.45rem/1.25 var(--font-titre);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.vf-verdict:focus{outline:none}
.vf-verdict:focus-visible{outline:3px solid var(--nuit);outline-offset:3px}
.vf-result:empty{display:none}
.vf-result{display:inline-block;font:600 1rem var(--font-titre);border:2px solid var(--nuit);border-radius:99px;padding:2px 12px;background:var(--feuille-50)}
.vf-result.is-wrong{background:var(--corail-50)}
.vf-recall{font-style:italic;color:var(--nuit-70)}
.vf-source{font-size:.95rem;color:var(--nuit-70);border-top:2px dashed rgba(31,42,68,.18);padding-top:10px}
.vf-source b{color:var(--nuit)}
.vf-back-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding-top:4px}

/* Sans JavaScript : questions et réponses s'affichent l'une sous l'autre. */
.vf-list:not(.is-ready) .vf-guess,.vf-list:not(.is-ready) [data-flip-back],.vf-list:not(.is-ready) .vf-recall{display:none}
.vf-list:not(.is-ready) .vf-inner{gap:10px}

/* Avec JavaScript : les deux faces se superposent dans la même case (la carte prend la hauteur de la plus grande). */
.vf-list.is-ready .vf-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vf-list.is-ready .vf-back{visibility:hidden}
.vf-list.is-ready .vf.is-flipped .vf-front{visibility:hidden}
.vf-list.is-ready .vf.is-flipped .vf-back{visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .vf-list.is-ready .vf-face{transition:transform .5s cubic-bezier(.3,.7,.3,1),visibility 0s linear .25s}
  .vf-list.is-ready .vf-back{transform:rotateY(180deg)}
  .vf-list.is-ready .vf.is-flipped .vf-front{transform:rotateY(-180deg)}
  .vf-list.is-ready .vf.is-flipped .vf-back{transform:rotateY(0)}
  /* La face qui apparaît devient visible tout de suite (elle reste cachée par backface-visibility jusqu'à mi-course). */
  .vf-list.is-ready .vf:not(.is-flipped) .vf-front,.vf-list.is-ready .vf.is-flipped .vf-back{transition:transform .5s cubic-bezier(.3,.7,.3,1),visibility 0s linear 0s}
}