/* ===== Les Gilmordues (histoire temporaire d'octobre 2026) : carte, écrans, cinématiques =====
   Fichier dédié, chargé après style.css. Préfixe gg-*. Petite ville d'automne : ciel orangé, kiosque blanc,
   feuilles qui tombent, café fumant. Décors 100 % CSS/emojis, aucun visuel officiel.
   Le style de base décrit l'état final ; les animations partent de l'état initial (fill-mode both). */

/* --- Carte du hub : ciel d'automne, kiosque, feuilles qui tombent, tasse fumante --- */
.saga-gilmore { background: linear-gradient(180deg, #f2a65a, #b5532a 55%, #3a1a10); color: var(--texte); }
.gg-carte, .gg-carte > span { position: absolute; display: block; }
.gg-carte { inset: 0; overflow: hidden; }
.gg-carte-ciel { inset: 0; background: radial-gradient(circle at 22% 22%, #ffe2a8 0 18px, #ffd08a55 19px 40px, transparent 41px); }
.gg-kiosque { left: 50%; top: 34px; width: 70px; height: 52px; margin-left: -35px; }
.gg-kiosque::before { content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 20px; background: #fff7ea; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gg-kiosque i { position: absolute; left: 4px; right: 4px; top: 20px; bottom: 6px; background: repeating-linear-gradient(90deg, #fff7ea 0 5px, transparent 5px 14px); }
.gg-kiosque::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 7px; border-radius: 2px; background: #fff7ea; }
.gg-carte .gg-feuilles { inset: 0; }
.gg-feuilles i { position: absolute; top: -12px; width: 10px; height: 10px; border-radius: 0 60% 0 60%; background: #e8742c; animation: gg-chute 5s linear infinite both; }
.gg-feuilles i:nth-child(odd) { background: #c9411f; }
.gg-feuilles i:nth-child(3n) { background: #f2b33d; }
.gg-carte .gg-feuilles i:nth-child(1) { left: 8%; animation-delay: 0s; } .gg-carte .gg-feuilles i:nth-child(2) { left: 22%; animation-delay: 1.8s; }
.gg-carte .gg-feuilles i:nth-child(3) { left: 36%; animation-delay: 3.2s; } .gg-carte .gg-feuilles i:nth-child(4) { left: 52%; animation-delay: 0.9s; }
.gg-carte .gg-feuilles i:nth-child(5) { left: 66%; animation-delay: 2.5s; } .gg-carte .gg-feuilles i:nth-child(6) { left: 78%; animation-delay: 4s; }
.gg-carte .gg-feuilles i:nth-child(7) { left: 90%; animation-delay: 1.3s; } .gg-carte .gg-feuilles i:nth-child(8) { left: 44%; animation-delay: 4.6s; }
@keyframes gg-chute { from { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(28px, 140px) rotate(320deg); opacity: 0; } }
.gg-tasse { right: 14px; top: 56px; font-size: 1.8rem; filter: drop-shadow(0 2px 6px #0008); animation: gg-tasse 3s ease-in-out infinite alternate; }
@keyframes gg-tasse { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-2px); } }

/* --- Écrans de départ et de jeu : automne chaleureux --- */
.hp-scene[data-theme="gilmore"], .hi-scene[data-theme="gilmore"] { border-color: #e8742c; background: radial-gradient(circle at 80% 10%, #ffcf8a33, transparent 40%), linear-gradient(180deg, #8a3a1c 0%, #4a2014 55%, #1e0f0a 100%); }
[data-theme="gilmore"] .hp-ciel { display: none; }
[data-theme="gilmore"] .hp-parchemin { background: linear-gradient(180deg, #fff6e6, #f1dfc0); border-top: 4px solid #e8742c; }
[data-theme="gilmore"] .hp-texte { font-family: Georgia, "Times New Roman", serif; }
[data-theme="gilmore"] .hp-barre > span { background: linear-gradient(90deg, #f2b33d, #e8742c); }
[data-theme="gilmore"] .rayon { display: none; }
[data-theme="gilmore"] .hi-chapitres li { background: #2a120ad9; }
[data-theme="gilmore"] .hi-niveau, [data-theme="gilmore"] .hi-sur-titre { color: #ffc58a; }
[data-theme="gilmore"] .hi-infos, [data-theme="gilmore"] .hi-retour, [data-theme="gilmore"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques --- */
.gg-ciel { inset: 0; }
.gg-ciel.automne { background: radial-gradient(circle at 78% 22%, #ffe6b0 0 4%, #ffd08a66 4.5% 9%, transparent 10%), linear-gradient(180deg, #f6b06a 0%, #e07a3c 50%, #7a3218 100%); }
.gg-ciel.nuit { background: radial-gradient(circle at 20% 15%, #ffffff22, transparent 30%), linear-gradient(180deg, #0d1733 0%, #1d2b52 70%, #2a3557 100%); }
.gg-ciel.jour { background: linear-gradient(180deg, #8fc6f2 0%, #f7d69a 75%, #e8a25e 100%); }
.gg-ciel.pluie { background: linear-gradient(180deg, #2a3140 0%, #3b4354 60%, #1c2029 100%); }
.gg-arbre { bottom: 18%; width: 16%; height: 46%; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 40% 35%, #f2a33d, #c9411f 60%, #8a2a14); box-shadow: 0 0 0 0 transparent; }
.gg-arbre::after { content: ""; position: absolute; left: 46%; bottom: -22%; width: 8%; height: 30%; background: #4a2a18; }
.gg-arbre.a1 { left: 2%; } .gg-arbre.a2 { left: 15%; bottom: 20%; height: 36%; } .gg-arbre.a3 { right: 3%; height: 52%; }
.gg-kiosque-scene { left: 38%; bottom: 18%; width: 24%; height: 42%; }
.gg-kiosque-scene .toit { position: absolute; left: -8%; right: -8%; top: 0; height: 32%; background: #fff7ea; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gg-kiosque-scene .piliers { position: absolute; left: 4%; right: 4%; top: 32%; bottom: 12%; display: flex; justify-content: space-between; }
.gg-kiosque-scene .piliers i { width: 7%; background: #fff7ea; }
.gg-kiosque-scene .socle { position: absolute; left: -4%; right: -4%; bottom: 0; height: 12%; border-radius: 3px; background: #fff7ea; }
.gg-kiosque-scene .guirlande { position: absolute; left: 0; right: 0; top: 34%; height: 6px; background: radial-gradient(circle, #ffd76a 2px, transparent 3px) 0 0 / 12px 6px repeat-x; opacity: 0; }
.gg-kiosque-scene.illumine .guirlande { opacity: 1; animation: gg-scintille 1.6s ease-in-out infinite alternate; }
.gg-kiosque-scene.illumine { filter: drop-shadow(0 0 18px #ffd76a55); }
@keyframes gg-scintille { from { filter: brightness(0.7); } to { filter: brightness(1.4); } }
.gg-panneau { left: 68%; bottom: 30%; padding: 6px 10px; border: 3px solid #5a3a22; border-radius: 6px; background: #fff3dd; color: #5a3a22; font-family: Georgia, serif; font-weight: 700; font-size: clamp(0.6rem, 1.8vw, 1rem); text-align: center; animation: gg-pose 1s ease-out 0.6s both; }
@keyframes gg-pose { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.gg-route { left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, #5a4030, #3a281e); }
.gg-voiture { bottom: 6%; left: 70%; font-size: clamp(1.6rem, 5vw, 3rem); animation: gg-voiture 4.5s ease-out both; }
@keyframes gg-voiture { from { transform: translateX(-110vw) scaleX(-1); } to { transform: scaleX(-1); } }
.cine-scene .gg-feuilles { inset: 0; }
.cine-scene .gg-feuilles i { left: calc(var(--i) * 7%); width: 14px; height: 14px; animation-duration: 6s; animation-delay: calc(var(--i) * -0.45s); }
.cine-scene .gg-feuilles i { animation-name: gg-chute-scene; }
@keyframes gg-chute-scene { from { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(60px, 52vh) rotate(400deg); opacity: 0; } }

/* Le diner : comptoir, tabourets, café versé sans fin */
.gg-diner-mur { inset: 0; background: linear-gradient(180deg, #6a4a32 0 62%, #3a2a20 62% 100%); }
.gg-diner-mur::after { content: ""; position: absolute; left: 6%; top: 10%; width: 30%; height: 34%; border: 6px solid #4a3020; background: linear-gradient(180deg, #f6c58a, #c97a3a); box-shadow: inset 0 0 0 3px #ffffff33; }
.gg-diner-enseigne { right: 8%; top: 9%; padding: 6px 16px; border-radius: 8px; background: #2a1a10; color: #ffcf6a; font-family: Georgia, serif; font-weight: 900; font-size: clamp(0.9rem, 2.6vw, 1.6rem); text-shadow: 0 0 12px #ffcf6a88; animation: gg-scintille 2s ease-in-out infinite alternate; }
.gg-diner-affiche { right: 10%; top: 30%; padding: 4px 8px; background: #fff; color: #2a1a10; font-weight: 800; font-size: clamp(0.55rem, 1.5vw, 0.85rem); transform: rotate(-3deg); }
.gg-comptoir { left: 0; right: 0; bottom: 18%; height: 16%; background: linear-gradient(180deg, #d9d2c6 0 18%, #8a5a3a 18% 100%); }
.gg-tabourets { left: 8%; right: 8%; bottom: 0; height: 18%; display: flex; justify-content: space-around; }
.gg-tabourets i { width: 9%; height: 100%; background: linear-gradient(180deg, #c9302c 0 30%, #9aa3ad 30% 100%); border-radius: 40% 40% 0 0 / 30% 30% 0 0; }
.gg-cafetiere { left: 46%; bottom: 52%; width: 7%; height: 15%; border-radius: 6px 6px 30% 30%; background: linear-gradient(90deg, #3a2a20 0 18%, transparent 18%), linear-gradient(180deg, #222 0 25%, #5a2a14 25%); transform-origin: 20% 90%; animation: gg-verse 2.4s ease-in-out infinite; }
@keyframes gg-verse { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-35deg); } }
.gg-versement { left: 47.5%; bottom: 36%; width: 1%; height: 15%; background: #5a2a14; transform-origin: top; animation: gg-filet 2.4s ease-in-out infinite; }
@keyframes gg-filet { 0%, 35%, 100% { transform: scaleY(0); } 45%, 70% { transform: scaleY(1); } }
.gg-mug { left: 44%; bottom: 33%; width: 8%; height: 9%; border-radius: 0 0 8px 8px; background: #fff; box-shadow: inset 0 6px 0 #5a2a14; }
.gg-mug::after { content: ""; position: absolute; right: -32%; top: 20%; width: 34%; height: 50%; border: 4px solid #fff; border-left: 0; border-radius: 0 8px 8px 0; }
.gg-mug .vapeur { position: absolute; left: 10%; right: 10%; bottom: 100%; height: 90%; }
.gg-mug .vapeur i { position: absolute; bottom: 0; width: 4px; height: 100%; border-radius: 4px; background: #ffffff88; filter: blur(2px); animation: gg-vapeur 2.2s ease-in-out infinite; }
.gg-mug .vapeur i:nth-child(1) { left: 15%; } .gg-mug .vapeur i:nth-child(2) { left: 45%; animation-delay: 0.6s; } .gg-mug .vapeur i:nth-child(3) { left: 75%; animation-delay: 1.2s; }
@keyframes gg-vapeur { from { transform: translateY(10px) scaleY(0.4); opacity: 0; } 50% { opacity: 1; } to { transform: translateY(-14px) scaleY(1); opacity: 0; } }
.gg-casquette { left: 60%; bottom: 52%; width: 9%; height: 6%; border-radius: 50% 50% 10% 10%; background: #2d4f8a; }
.gg-casquette::after { content: ""; position: absolute; left: -45%; bottom: 0; width: 55%; height: 30%; border-radius: 50%; background: #233f70; }

/* Dîner du vendredi : salle à manger, lustre, horloge */
.gg-salon { inset: 0; background: linear-gradient(180deg, #3a1e2a 0 70%, #24121a 70% 100%); }
.gg-salon::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, #ffffff08 60px 62px); }
.gg-lustre { left: 40%; top: 0; width: 20%; height: 30%; animation: gg-scintille 2.4s ease-in-out infinite alternate; }
.gg-lustre::before { content: ""; position: absolute; left: 49%; top: 0; width: 2%; height: 40%; background: #c9a55a; }
.gg-lustre i { position: absolute; top: 45%; width: 10px; height: 18px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 35%, #fffbe0, #ffd76a 60%, transparent 70%); box-shadow: 0 0 16px #ffd76a; }
.gg-lustre i:nth-child(1) { left: 6%; } .gg-lustre i:nth-child(2) { left: 26%; top: 55%; } .gg-lustre i:nth-child(3) { left: 46%; top: 60%; } .gg-lustre i:nth-child(4) { left: 66%; top: 55%; } .gg-lustre i:nth-child(5) { left: 86%; }
.gg-horloge { right: 10%; top: 14%; width: 9%; aspect-ratio: 1; border: 5px solid #c9a55a; border-radius: 50%; background: #fff8e6; }
.gg-horloge .aiguille { position: absolute; left: 50%; bottom: 50%; width: 4%; margin-left: -2%; background: #2a1a10; transform-origin: bottom; }
.gg-horloge .aiguille.h { height: 26%; transform: rotate(210deg); }
.gg-horloge .aiguille.m { height: 38%; animation: gg-minutes 6s linear infinite; }
@keyframes gg-minutes { to { transform: rotate(360deg); } }
.gg-table { left: 12%; right: 12%; bottom: 14%; height: 16%; border-radius: 6px; background: linear-gradient(180deg, #fffaf0 0 40%, #e8dcc6 40% 100%); box-shadow: 0 10px 24px #0008; }
.gg-bougies { left: 30%; right: 30%; bottom: 30%; height: 14%; display: flex; justify-content: space-between; }
.gg-bougies i { width: 3%; background: #fff6e0; position: relative; }
.gg-bougies i::before { content: ""; position: absolute; left: -60%; top: -30%; width: 220%; height: 30%; border-radius: 50%; background: radial-gradient(circle, #ffe08a, #ff9a3a 60%, transparent 70%); animation: gg-flamme 0.6s ease-in-out infinite alternate; }
@keyframes gg-flamme { from { transform: scaleY(0.85); } to { transform: scaleY(1.15) translateY(-1px); } }
.gg-assiettes { left: 16%; right: 16%; bottom: 22%; height: 6%; display: flex; justify-content: space-around; }
.gg-assiettes i { width: 9%; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #c9a55a; }

/* Première neige sur le kiosque illuminé */
.gg-sol-neige { left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(180deg, #eef3ff, #c9d4ee); }
.gg-deux-tasses { left: 66%; bottom: 22%; font-size: clamp(1.4rem, 4vw, 2.4rem); animation: gg-pose 1.2s ease-out 1s both; }
.gg-neige { inset: 0; }
.gg-neige i { position: absolute; top: -10px; left: calc(var(--i) * 4.2%); width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.9; animation: gg-flocon 7s linear infinite both; animation-delay: calc(var(--i) * -0.31s); }
.gg-neige i:nth-child(3n) { width: 4px; height: 4px; animation-duration: 9s; }
@keyframes gg-flocon { from { transform: translate(0, 0); } to { transform: translate(30px, 56vh); } }

/* Remise des diplômes : toques lancées vers le ciel */
.gg-estrade { left: 10%; right: 10%; bottom: 0; height: 22%; background: linear-gradient(180deg, #7a1f2a, #4a1218); }
.gg-banderole { left: 20%; right: 20%; top: 12%; padding: 8px; border-radius: 6px; background: #1f3a6b; color: #ffd76a; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: clamp(0.8rem, 2.4vw, 1.4rem); text-align: center; animation: gg-pose 1s ease-out both; }
.gg-toques { inset: 0; }
.gg-toques i { position: absolute; bottom: 18%; left: calc(8% + var(--i) * 10%); font-style: normal; font-size: clamp(1.2rem, 3.4vw, 2.2rem); animation: gg-toque 2.8s ease-out both; animation-delay: calc(var(--i) * 0.12s); }
@keyframes gg-toque { from { transform: translateY(0) rotate(0); } 60% { transform: translateY(-46vh) rotate(260deg); } to { transform: translateY(-38vh) rotate(380deg); } }
.gg-nom-diplome { left: 0; right: 0; bottom: 30%; width: fit-content; max-width: 90%; margin: 0 auto; padding: 8px 16px; border: 2px solid #ffd76a; border-radius: 999px; background: #1e0f0ae0; color: #ffd76a; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: clamp(0.8rem, 2.4vw, 1.3rem); text-align: center; animation: gg-pose 1s ease-out 2.4s both; }

/* Défaite : pluie, porte fermée, tasse renversée */
.gg-pluie { inset: 0; background: repeating-linear-gradient(105deg, transparent 0 12px, #ffffff22 12px 13px); animation: gg-pluie 0.5s linear infinite; }
@keyframes gg-pluie { from { background-position: 0 0; } to { background-position: -14px 60px; } }
.gg-porte { left: 36%; bottom: 0; width: 28%; height: 70%; border: 8px solid #3a281e; background: linear-gradient(180deg, #2a2f3a 0 55%, #4a3020 55%); }
.gg-porte .pancarte { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotate(-4deg); padding: 6px 14px; background: #fff; color: #b3261e; font-weight: 900; font-size: clamp(0.8rem, 2.4vw, 1.4rem); animation: gg-pancarte 2s ease-in-out infinite alternate; }
@keyframes gg-pancarte { from { transform: translateX(-50%) rotate(-6deg); } to { transform: translateX(-50%) rotate(3deg); } }
.gg-tasse-renversee { left: 70%; bottom: 8%; font-size: clamp(1.4rem, 4vw, 2.4rem); transform: rotate(100deg); }
.gg-flaque { left: 64%; bottom: 5%; width: 16%; height: 4%; border-radius: 50%; background: #5a2a14aa; animation: gg-flaque 3s ease-out both; }
@keyframes gg-flaque { from { transform: scale(0.1); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gg-carte *, .cine-scene [class^="gg-"], .cine-scene [class^="gg-"] * { animation: none !important; }
  .gg-feuilles i, .gg-neige i { display: none; }
}