/* ===== Encyclopedia : thèmes d'histoire (Histoire de France, Histoire du Québec) =====
   Fichier dédié, chargé après style.css. Préfixe hx-*. Réutilise .vignette, .question, .correction. */

/* Vignettes de l'Encyclopedia : drapeau qui ondule et dates qui défilent */
.vignette-histo-france .vignette-decor, .vignette-histo-quebec .vignette-decor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.hx-tricolore, .hx-fleurdelise { display: flex; width: 84px; height: 54px; border-radius: 4px; box-shadow: 0 4px 12px #0007; transform-origin: 0 50%; animation: hx-ondule 2.6s ease-in-out infinite alternate; }
.hx-tricolore i { flex: 1; }
.hx-tricolore i:nth-child(1) { background: #1f3f99; } .hx-tricolore i:nth-child(2) { background: #f4f4f4; } .hx-tricolore i:nth-child(3) { background: #d6233b; }
/* Fleurdelisé : croix blanche sur fond bleu, une fleur de lys dans chaque canton */
.hx-fleurdelise { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; background: #f4f4f4; overflow: hidden; }
.hx-fleurdelise i { display: grid; place-items: center; background: #0a4fb3; color: #f4f4f4; font-size: 1.15rem; font-style: normal; line-height: 1; }
@keyframes hx-ondule { from { transform: perspective(200px) rotateY(-8deg) skewY(-2deg); } to { transform: perspective(200px) rotateY(8deg) skewY(2deg); } }
.hx-frise-dates { display: flex; gap: 10px; color: var(--or); font-family: "Cinzel", Georgia, serif; font-size: 0.72rem; font-weight: 900; white-space: nowrap; }
.hx-frise-dates b { opacity: 0.35; animation: hx-date 4s ease-in-out infinite; }
.hx-frise-dates b:nth-child(2) { animation-delay: 1s; } .hx-frise-dates b:nth-child(3) { animation-delay: 2s; } .hx-frise-dates b:nth-child(4) { animation-delay: 3s; }
@keyframes hx-date { 0%, 40%, 100% { opacity: 0.35; } 15%, 25% { opacity: 1; text-shadow: 0 0 10px #f5c54288; } }

/* Choix du mode */
.vignette-decor.hx-decor-des { display: grid; place-items: center; font-size: 3rem; }
.hx-ligne-temps { position: absolute; left: 12%; right: 12%; top: 50%; height: 3px; background: linear-gradient(90deg, #f5c54255, var(--or), #f5c54255); }
.hx-ligne-temps i { position: absolute; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--fond); border: 3px solid var(--or); animation: hx-jalon 3s ease-in-out infinite; }
.hx-ligne-temps i:nth-child(1) { left: 0; } .hx-ligne-temps i:nth-child(2) { left: 24%; animation-delay: 0.4s; } .hx-ligne-temps i:nth-child(3) { left: 48%; animation-delay: 0.8s; }
.hx-ligne-temps i:nth-child(4) { left: 72%; animation-delay: 1.2s; } .hx-ligne-temps i:nth-child(5) { left: 96%; animation-delay: 1.6s; }
@keyframes hx-jalon { 0%, 60%, 100% { background: var(--fond); } 20% { background: var(--or); box-shadow: 0 0 12px var(--or); } }

/* Partie : question, correction et carte de leçon façon parchemin */
.hx-mode { margin: 0 0 6px; color: var(--texte-doux); font-weight: 700; }
.hx-carte { margin-top: 14px; }
.hx-carte .q-texte { margin-bottom: 14px; }
.hx-carte .correction:empty { display: none; }
.hx-lecon { margin: 12px 0 14px; padding: 14px 16px; border-left: 4px solid var(--or); border-radius: 10px; background: linear-gradient(135deg, #f8ecd0, #ead6a8); color: #3a2a12; box-shadow: 0 6px 18px #0005; animation: hx-lecon 0.5s ease-out; }
.hx-lecon strong { display: block; margin-bottom: 4px; color: #7a4b12; font-family: "Cinzel", Georgia, serif; font-size: 0.95rem; }
.hx-lecon p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.5; }
@keyframes hx-lecon { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bilan : questions à revoir, chacune avec sa leçon */
.hx-fin { text-align: center; }
.hx-revoir { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--bord); border-left: 4px solid var(--rouge); border-radius: 10px; background: var(--fond); text-align: left; }
.hx-revoir strong { display: block; }
.hx-revoir-reponse { display: block; margin: 4px 0; color: var(--vert); font-weight: 700; }
.hx-revoir p { margin: 4px 0 0; color: var(--texte-doux); font-size: 0.92rem; line-height: 1.45; }

/* Les lauréats d'or : ballon doré qui tourne et flotte au-dessus de son socle, reflet qui passe, éclats */
.vignette-ballon-or .vignette-decor { display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #3a2a08 0%, #140f05 70%); }
.vignette-ballon-or .vignette-decor > span { position: absolute; display: block; }
.bo-halo { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #f5c54266, transparent 65%); animation: bo-respire 3s ease-in-out infinite; }
.bo-socle { bottom: 14px; width: 74px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, #000a, transparent 70%); animation: bo-ombre 3s ease-in-out infinite; }
.bo-ballon { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 34% 30%, #fff6c8 0%, #ffd75a 22%, #e0a51c 55%, #8a5a06 100%); box-shadow: 0 0 22px #f5c54288, inset -6px -8px 14px #6a4204aa; animation: bo-flotte 3s ease-in-out infinite; }
/* Motif de ballon (pentagones et coutures) qui défile pour donner la rotation */
.bo-motif { position: absolute; inset: 0 -100% 0 0; background:
  radial-gradient(circle at 18% 50%, #7a5208 0 6px, #fff4c288 7px 8px, transparent 9px), radial-gradient(circle at 43% 20%, #7a5208 0 5px, #fff4c288 6px 7px, transparent 8px),
  radial-gradient(circle at 43% 80%, #7a5208 0 5px, #fff4c288 6px 7px, transparent 8px), radial-gradient(circle at 68% 50%, #7a5208 0 6px, #fff4c288 7px 8px, transparent 9px),
  radial-gradient(circle at 93% 20%, #7a5208 0 5px, #fff4c288 6px 7px, transparent 8px), radial-gradient(circle at 93% 80%, #7a5208 0 5px, #fff4c288 6px 7px, transparent 8px),
  repeating-linear-gradient(60deg, transparent 0 11px, #fff4c240 11px 12px), repeating-linear-gradient(-60deg, transparent 0 11px, #fff4c240 11px 12px);
  opacity: 0.85; animation: bo-tourne 4s linear infinite; }.bo-reflet { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, #fffbe6cc, transparent); transform: rotate(20deg); animation: bo-reflet 3.5s ease-in-out infinite; }
.bo-eclats { inset: 0; }
.bo-eclats i { position: absolute; width: 6px; height: 6px; background: #ffe9a0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: bo-eclat 2.6s ease-in-out infinite; }
.bo-eclats i:nth-child(1) { left: 30%; top: 22%; } .bo-eclats i:nth-child(2) { left: 66%; top: 18%; animation-delay: 0.5s; }
.bo-eclats i:nth-child(3) { left: 72%; top: 62%; animation-delay: 1s; } .bo-eclats i:nth-child(4) { left: 24%; top: 66%; animation-delay: 1.5s; }
.bo-eclats i:nth-child(5) { left: 50%; top: 10%; animation-delay: 2s; }
@keyframes bo-flotte { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }
@keyframes bo-ombre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.75); opacity: 0.6; } }
@keyframes bo-tourne { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bo-reflet { 0%, 40% { left: -60%; } 80%, 100% { left: 130%; } }
@keyframes bo-respire { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes bo-eclat { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(45deg); } }

/* Thème Football : ballon qui rebondit vers la cage, sur une pelouse rayée */
.vignette-football .vignette-decor { overflow: hidden; background: linear-gradient(180deg, #0f2a1a 0%, #133a22 55%, #1d5a32 100%); }
.vignette-football .vignette-decor > span { position: absolute; display: block; }
.fb-pelouse { left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, #2a8a4a 0 22px, #237a40 22px 44px); }
.fb-cage { right: 14%; bottom: 34%; width: 62px; height: 40px; border: 3px solid #f2f2f2; border-bottom: 0; background: repeating-linear-gradient(0deg, #ffffff33 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, #ffffff33 0 1px, transparent 1px 7px); }
.fb-ballon { left: 14%; bottom: 34%; font-size: 1.8rem; line-height: 1; animation: fb-tir 2.8s cubic-bezier(.3, .6, .5, 1) infinite; }
.fb-ombre { left: 15%; bottom: 31%; width: 26px; height: 6px; border-radius: 50%; background: #0006; animation: fb-ombre 2.8s cubic-bezier(.3, .6, .5, 1) infinite; }
@keyframes fb-tir { 0% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(60px, -40px) rotate(220deg); } 60% { transform: translate(120px, -12px) rotate(440deg); } 75%, 100% { transform: translate(150px, -14px) rotate(520deg); opacity: 1; } 99% { opacity: 0; } }
@keyframes fb-ombre { 0% { transform: translateX(0) scale(1); } 30% { transform: translateX(60px) scale(0.5); } 60%, 100% { transform: translateX(150px) scale(0.9); } }

/* Ligue des champions : coupe aux grandes anses, étoiles qui tournent, projecteurs */
.vignette-ligue .vignette-decor { overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #1b2f6b 0%, #0a1233 75%); }
.vignette-ligue .vignette-decor > span { position: absolute; display: block; }
.lc-projecteur { top: -10px; width: 60px; height: 140px; background: linear-gradient(180deg, #ffffff40, transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: lc-balaye 4s ease-in-out infinite alternate; }
.lc-projecteur.g { left: 10%; transform-origin: 50% 0; } .lc-projecteur.d { right: 10%; transform-origin: 50% 0; animation-direction: alternate-reverse; }
@keyframes lc-balaye { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.lc-etoiles { left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; animation: lc-tourne 12s linear infinite; }
.lc-etoiles i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; background: #f2f4ff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(calc(var(--i, 0) * 45deg)) translateY(-46px); }
.lc-etoiles i:nth-child(1) { --i: 0; } .lc-etoiles i:nth-child(2) { --i: 1; } .lc-etoiles i:nth-child(3) { --i: 2; } .lc-etoiles i:nth-child(4) { --i: 3; }
.lc-etoiles i:nth-child(5) { --i: 4; } .lc-etoiles i:nth-child(6) { --i: 5; } .lc-etoiles i:nth-child(7) { --i: 6; } .lc-etoiles i:nth-child(8) { --i: 7; }
@keyframes lc-tourne { to { transform: rotate(360deg); } }
.lc-coupe { left: 50%; top: 50%; width: 40px; height: 60px; margin: -32px 0 0 -20px; filter: drop-shadow(0 0 10px #c9d6ff88); animation: lc-brille 3s ease-in-out infinite alternate; }
.lc-coupe > span { position: absolute; display: block; }
.lc-coupe .vasque { left: 6px; right: 6px; top: 0; height: 34px; border-radius: 4px 4px 50% 50%; background: linear-gradient(90deg, #8f9bb8, #f4f7ff 45%, #a9b4cf); }
.lc-coupe .anse { top: 2px; width: 16px; height: 28px; border: 4px solid #d8def0; border-radius: 50%; }
.lc-coupe .anse.g { left: -8px; border-right-color: transparent; } .lc-coupe .anse.d { right: -8px; border-left-color: transparent; }
.lc-coupe .pied { left: 12px; right: 12px; bottom: 0; height: 26px; background: linear-gradient(90deg, #8f9bb8, #eef2ff 50%, #8f9bb8); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); }
@keyframes lc-brille { from { filter: drop-shadow(0 0 4px #c9d6ff55); } to { filter: drop-shadow(0 0 14px #ffffffaa); } }

/* Coupe du monde : globe qui tourne derrière un trophée doré, confettis */
.vignette-mondial .vignette-decor { overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #2a1d05 0%, #0d0a02 75%); }
.vignette-mondial .vignette-decor > span { position: absolute; display: block; }
.cm-globe { left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, #5fb0f2, #1f5aa8 60%, #0d2a5a); opacity: 0.55; }
.cm-globe .terres { position: absolute; inset: 0 -100% 0 0; background: radial-gradient(ellipse 14px 20px at 12% 40%, #3f9a4f 98%, transparent), radial-gradient(ellipse 10px 14px at 30% 65%, #3f9a4f 98%, transparent), radial-gradient(ellipse 18px 12px at 55% 35%, #3f9a4f 98%, transparent), radial-gradient(ellipse 12px 16px at 62% 70%, #3f9a4f 98%, transparent), radial-gradient(ellipse 14px 20px at 62% 40%, #3f9a4f 98%, transparent), radial-gradient(ellipse 10px 14px at 80% 65%, #3f9a4f 98%, transparent); animation: bo-tourne 9s linear infinite; }
.cm-trophee { left: 50%; top: 50%; width: 34px; height: 66px; margin: -36px 0 0 -17px; filter: drop-shadow(0 0 10px #f5c54299); animation: bo-flotte 3s ease-in-out infinite; }
.cm-trophee > span { position: absolute; display: block; }
.cm-trophee .sphere { left: 4px; right: 4px; top: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0a51c 60%, #8a5a06); }
.cm-trophee .spirale { left: 8px; right: 8px; top: 18px; height: 34px; background: linear-gradient(90deg, #8a5a06, #ffd75a 45%, #b07a10); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); }
.cm-trophee .socle { left: 4px; right: 4px; bottom: 0; height: 14px; border-radius: 3px; background: linear-gradient(180deg, #2f7a3a 0 30%, #e0a51c 30% 45%, #2f7a3a 45% 75%, #c9901a 75%); }
.cm-confettis { inset: 0; }
.cm-confettis i { position: absolute; top: -8px; width: 6px; height: 10px; background: #f5c542; animation: cm-chute 4s linear infinite both; }
@keyframes cm-chute { from { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(20px, 130px) rotate(300deg); opacity: 0; } }
.cm-confettis i:nth-child(2n) { background: #3fb0f2; } .cm-confettis i:nth-child(3n) { background: #f25f5c; }
.cm-confettis i:nth-child(1) { left: 12%; } .cm-confettis i:nth-child(2) { left: 28%; animation-delay: 1.2s; } .cm-confettis i:nth-child(3) { left: 44%; animation-delay: 2.4s; }
.cm-confettis i:nth-child(4) { left: 62%; animation-delay: 0.6s; } .cm-confettis i:nth-child(5) { left: 78%; animation-delay: 1.8s; } .cm-confettis i:nth-child(6) { left: 90%; animation-delay: 3s; }
@media (prefers-reduced-motion: reduce) {
  .vignette-football .vignette-decor *, .vignette-ligue .vignette-decor *, .vignette-mondial .vignette-decor * { animation: none !important; }
  .vignette-ballon-or .vignette-decor *, .vignette-ballon-or .vignette-decor *::before { animation: none !important; }
  .bo-eclats i { opacity: 0.8; }
  .hx-tricolore, .hx-fleurdelise, .hx-frise-dates b, .hx-ligne-temps i, .hx-lecon { animation: none !important; }
  .hx-frise-dates b { opacity: 1; }
}