/* CHARM · chocogrenouille du personnage, affichée d'un appui sur Échap. Le rendu reprend à
   l'identique la carte de Chocogrenouille du site (règles copiées de charm-site/public/css/finitions.css) ;
   la scène prend la couleur de la maison du personnage, et son portrait en buste (Portrait.capture du jeu,
   fond détouré) occupe la fenêtre. */
@font-face { font-family: CharmColumna; src: url('natif/Columna.ttf') format('truetype'); }
@font-face { font-family: CharmHybrid; src: url('natif/Hybrid.otf') format('opentype'); }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.ecran { position: fixed; inset: 0; display: grid; place-items: start start; pointer-events: none; }

/* ---- Carte de Chocogrenouille du site, à l'identique ---- */
.carte-chocogrenouille {
    --px: 0; --py: 0; --actif: 0;
    position: relative; z-index: 1; width: 320px; margin: 30px 0 0;
    transform: perspective(900px) rotateX(calc(var(--py) * -16deg)) rotateY(calc(var(--px) * 20deg)) scale(calc(1 + var(--actif) * .03));
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
    animation: carte-flotte 7s ease-in-out infinite alternate;
    will-change: transform;
}
.carte-chocogrenouille.survol { --actif: 1; }
.carte-chocogrenouille.suit { transition: transform .14s linear; animation-play-state: paused; }
@keyframes carte-flotte { from { translate: 0 0; } to { translate: 0 -8px; } }

/* Pentagone : la fenêtre épouse exactement le cadre natif, posé par-dessus. */
.cg-pentagone { position: relative; width: 320px; height: 320px; }
.cg-pentagone::after {
    content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: url('natif/UI_T_AppearanceBorder_Special.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 18px 22px #000b);
}
.cg-fenetre {
    position: absolute; inset: 0; overflow: hidden; isolation: isolate;
    background: radial-gradient(ellipse at 50% 42%, #2c6e52, #123a2e 55%, #0a221d);
    /* Forme exacte de l'intérieur du cadre natif (cg-forme.png, calculée depuis UI_T_AppearanceBorder_Special :
       contour extérieur rempli puis rétréci de 4 px) : aucun vide sous l'or, rien ne dépasse du cadre. */
    -webkit-mask: url('natif/cg-forme.png') center / 100% 100% no-repeat; mask: url('natif/cg-forme.png') center / 100% 100% no-repeat;
}
.cg-fenetre::after {   /* profondeur : bords à peine assombris, la scène paraît en retrait du cadre */
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: radial-gradient(ellipse 60% 58% at 50% 52%, transparent 62%, #0006 100%);
}
.cg-plan { position: absolute; inset: -14%; transform: translate3d(calc(var(--px) * var(--prof) * -1px), calc(var(--py) * var(--prof) * -1px), 0) scale(calc(1 + var(--actif) * var(--grandit, 0))); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.carte-chocogrenouille.suit .cg-plan, .maison-carte.suit .cg-plan { transition: transform .14s linear; }
/* ---- Scène en profondeur derrière la professeure, du plus lointain au plus proche. Chaque plan a sa profondeur
   (--prof) : plus il est loin, plus il se décale à l'opposé de la souris. Les anneaux et la grille sont dessinés
   en CSS (nets à toute taille). */
/* 1. Ciel : nuages natifs teintés vert Botanique, deux couches qui dérivent ; le haut s'assombrit. */
.cg-fond { --prof: 46; --grandit: .06; }
.cg-fond::before, .cg-fond::after {
    content: ""; position: absolute; inset: -20%;
    background: url('natif/UI_T_CloudDistortion.png') 0 0 / 260px 260px repeat;
    filter: grayscale(1) sepia(1) hue-rotate(78deg) saturate(2.2) brightness(.85) contrast(1.1);
    opacity: .7; animation: cg-derive 26s linear infinite;
}
.cg-fond::after { background-size: 380px 380px; opacity: .35; animation-duration: 41s; animation-direction: reverse; }
@keyframes cg-derive { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-260px, -130px, 0); } }
.cg-ciel { --prof: 44; background: radial-gradient(ellipse 70% 55% at 50% 58%, transparent 40%, #04120ecc 100%), linear-gradient(180deg, #03100ccc, transparent 45%); }

/* 2. Rayons de lumière tombant du haut, qui oscillent lentement. */
.cg-rayons { --prof: 36; }
.cg-rayons::before {
    content: ""; position: absolute; left: -40%; right: -40%; top: -30%; height: 130%; transform-origin: 50% 0;
    background: repeating-conic-gradient(from 160deg at 50% 0%, #e8f7c62e 0deg 2.5deg, transparent 2.5deg 9deg);
    -webkit-mask: radial-gradient(ellipse 45% 80% at 50% 0%, #000 20%, transparent 85%); mask: radial-gradient(ellipse 45% 80% at 50% 0%, #000 20%, transparent 85%);
    animation: cg-rayons 14s ease-in-out infinite alternate;
}
@keyframes cg-rayons { from { transform: rotate(-7deg); opacity: .65; } to { transform: rotate(7deg); opacity: 1; } }

/* 4. Anneaux couchés dans l'espace, qui tournent en sens contraires (orrery). */
.cg-anneaux { --prof: 18; display: grid; place-items: center; perspective: 420px; }
.cg-anneaux > i { position: absolute; top: 34%; border-radius: 50%; transform: rotateX(70deg); }
.cg-anneaux > i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: cg-orbite 30s linear infinite; }
.cg-anneaux > i:nth-child(1) { width: 62%; aspect-ratio: 1; }
.cg-anneaux > i:nth-child(1)::before { border: 1.5px solid #e9d08ecc; box-shadow: 0 0 10px #e9d08e66; border-top-color: transparent; }
.cg-anneaux > i:nth-child(2) { width: 82%; aspect-ratio: 1; }
.cg-anneaux > i:nth-child(2)::before { border: 1px dashed #bfe9c9aa; animation-duration: 46s; animation-direction: reverse; }
.cg-anneaux > i:nth-child(3) { width: 104%; aspect-ratio: 1; }
.cg-anneaux > i:nth-child(3)::before { border: 1px solid #e3c98355; border-left-color: transparent; border-right-color: transparent; animation-duration: 60s; }
@keyframes cg-orbite { to { transform: rotate(1turn); } }

/* 5. Halo net derrière la professeure : anneau doré lumineux et anneau pointillé qui tourne ; il grandit et
   s'illumine au survol. */
.cg-halo { --prof: 12; --grandit: .1; display: grid; place-items: center; }
.cg-halo::before, .cg-halo::after { content: ""; grid-area: 1 / 1; aspect-ratio: 1; border-radius: 50%; margin-top: -10%; }
.cg-halo::before {
    width: 58%; border: 1.5px solid #ecd492; box-shadow: 0 0 14px #ecd49277, inset 0 0 18px #ecd49233, 0 0 0 6px #ecd4920d;
    opacity: calc(.6 + var(--actif) * .4); animation: cg-pulse 6s ease-in-out infinite alternate; transition: opacity .6s ease;
}
.cg-halo::after { width: 66%; border: 1px dotted #f3e2b0bb; animation: cg-orbite 40s linear infinite reverse; }
@keyframes cg-pulse { from { transform: scale(.96); } to { transform: scale(1.04); } }

/* 6. Spores qui s'élèvent : lointaines (petites, floues), moyennes, proches (devant le décor). */
.cg-spores { pointer-events: none; }
.cg-spores::before {
    content: ""; position: absolute; inset: -60% 0 0;
    background-image: radial-gradient(circle, #f6e3a8 0 1.2px, transparent 2px), radial-gradient(circle, #c9f0d2 0 1px, transparent 1.8px), radial-gradient(circle, #f6e3a8 0 .8px, transparent 1.4px);
    background-size: 53px 61px, 71px 67px, 37px 43px; background-position: 0 0, 26px 33px, 14px 9px;
    animation: cg-monte var(--duree) linear infinite;
}
.cg-spores-loin { --prof: 40; --duree: 30s; opacity: .45; filter: blur(.6px); }
.cg-spores-loin::before { transform: scale(.7); }
.cg-spores-milieu { --prof: 20; --duree: 19s; opacity: .7; }
.cg-spores-pres { --prof: -10; --duree: 11s; opacity: .85; }
.cg-spores-pres::before { background-size: 97px 113px, 131px 109px, 79px 91px; filter: drop-shadow(0 0 3px #f6e3a8); }
@keyframes cg-monte { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -60%, 0); } }

/* La professeure : aucune découpe ; la tête, le chapeau et les bras sortent du cadre par-dessus l'or, et le bas
   s'arrête sur le bord naturel du détourage (mains, navets et manches s'éteignent dans l'ombre, sans trait droit).
   Elle avance vers la souris (profondeur négative) et grandit au survol. */
.cg-perso {
    --prof: -16; --grandit: .05;
    position: absolute; z-index: 7; inset: 0; pointer-events: none; transform-origin: 50% 90%;
    filter: drop-shadow(0 10px 14px #000a);
}
.cg-perso img {
    position: absolute; left: 50%; bottom: 4%; width: 262px; height: auto; max-width: none; margin-left: -131px;
    animation: cg-respire 8s ease-in-out infinite alternate;
}
@keyframes cg-respire { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -4px, 0) scale(1.02); } }

/* Reflet qui balaie le cadre doré au survol (découpé à la forme du cadre natif). */
.cg-reflet {
    position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none;
    -webkit-mask: url('natif/UI_T_AppearanceBorder_Special.png') center / 100% 100% no-repeat; mask: url('natif/UI_T_AppearanceBorder_Special.png') center / 100% 100% no-repeat;
}
.cg-reflet i {
    position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%;
    background: linear-gradient(100deg, transparent, #fff6d8 50%, transparent);
    transform: translate3d(-140%, 0, 0) skewX(-16deg); opacity: 0;
}
.carte-chocogrenouille.survol .cg-reflet i { animation: cg-reflet 1.4s cubic-bezier(.45, .05, .25, 1) .05s both; }
@keyframes cg-reflet { 0% { transform: translate3d(-140%, 0, 0) skewX(-16deg); opacity: 0; } 20%, 80% { opacity: .9; } 100% { transform: translate3d(320%, 0, 0) skewX(-16deg); opacity: 0; } }

/* Étincelles dorées qui s'élèvent autour de la carte au survol. */
.cg-etincelles { position: absolute; inset: -10% -14% 20%; z-index: 9; pointer-events: none; }
.cg-etincelles i {
    position: absolute; bottom: 0; color: #f1d996; font: 12px CharmColumna, serif; font-style: normal; text-shadow: 0 0 8px #f1d996cc;
    opacity: 0; transform: translate3d(0, 0, 0) scale(.6);
}
.cg-etincelles i:nth-child(1) { left: 6%; } .cg-etincelles i:nth-child(2) { left: 24%; font-size: 9px; } .cg-etincelles i:nth-child(3) { left: 46%; }
.cg-etincelles i:nth-child(4) { left: 68%; font-size: 10px; } .cg-etincelles i:nth-child(5) { left: 88%; } .cg-etincelles i:nth-child(6) { left: 36%; font-size: 8px; }
.carte-chocogrenouille.survol .cg-etincelles i { animation: cg-etincelle 2.6s ease-out infinite; }
.carte-chocogrenouille.survol .cg-etincelles i:nth-child(2) { animation-delay: .5s; } .carte-chocogrenouille.survol .cg-etincelles i:nth-child(3) { animation-delay: 1.1s; }
.carte-chocogrenouille.survol .cg-etincelles i:nth-child(4) { animation-delay: .25s; } .carte-chocogrenouille.survol .cg-etincelles i:nth-child(5) { animation-delay: 1.5s; } .carte-chocogrenouille.survol .cg-etincelles i:nth-child(6) { animation-delay: 1.9s; }
@keyframes cg-etincelle { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.5) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(8px, -170px, 0) scale(1.1) rotate(90deg); } }

/* Cartouche du nom : fond de légende, volutes et ornement natifs ; il se soulève au survol. */
.cg-nom {
    position: relative; z-index: 9; margin: -4px 8px 0; padding: 16px 40px 18px; text-align: center;
    background: url('natif/UI_T_LegendBack.png') center / 100% 100% no-repeat;
    color: #f0dca6; font: 15px CharmColumna, serif; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 0 #000;
    transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 4px - var(--actif) * 4px), 0); transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.carte-chocogrenouille.suit .cg-nom { transition: transform .14s linear; }
.cg-nom::before, .cg-nom::after {
    content: ""; position: absolute; top: 50%; width: 34px; height: 17px; margin-top: -12px;
    background: url('natif/UI_T_GoldLeaf_Flourish.png') center / contain no-repeat;
}
.cg-nom::before { left: 6px; transform: scaleX(-1); }
.cg-nom::after { right: 6px; }
.cg-nom small { display: block; margin-top: 7px; color: #c2ab79; font: 12px CharmHybrid, Georgia, serif; letter-spacing: .08em; text-transform: none; }
.cg-nom small::before { content: ""; display: block; width: 32px; height: 16px; margin: 0 auto 4px; background: url('natif/UI_T_MenuOrnament.png') center / contain no-repeat; opacity: .85; }
.cg-entete { display: block; margin: 0 0 34px; text-align: center; color: #cdb06d; font: 9px CharmColumna, serif; letter-spacing: .3em; text-transform: uppercase; }

/* ---- Adaptations au jeu ---- */
/* Taille : la carte du site (320 px) est agrandie selon la hauteur d'écran (--echelle, posée par carte.js). */
/* Ancré en haut de la vue (80 px pour la tête qui dépasse) : dérouler les caractéristiques ne déplace pas la carte. */
.ensemble { position: relative; width: 500px; display: grid; justify-items: center; gap: 22px; padding-top: 80px; zoom: var(--echelle, 1); }
.ecran .carte-chocogrenouille { margin: 0; opacity: 0; animation: none; }
/* Apparition : la carte surgit en pivotant et en grandissant, puis flotte. Seuls opacité et transformations sont
   animées (aucun flou ni filtre sur la carte entière) : tout reste sur le compositeur, sans à-coup. L'inclinaison
   suit --px/--py, posées à chaque image par carte.js (donc sans transition CSS). */
.ecran .carte-chocogrenouille, .ecran .cg-plan { transition: none; }
.ecran.visible .carte-chocogrenouille { animation: cg-arrive .8s cubic-bezier(.16, .8, .22, 1) both, carte-flotte 7s .8s ease-in-out infinite alternate; }
.ecran.sortie .carte-chocogrenouille { animation: cg-part .35s ease-in both; }
@keyframes cg-arrive { from { opacity: 0; scale: .6; rotate: y -70deg; } 55% { opacity: 1; } to { opacity: 1; scale: 1; rotate: y 0deg; } }
@keyframes cg-part { from { opacity: 1; scale: 1; } to { opacity: 0; scale: .88; } }

/* Profondeur de la scène : les plans sont plus grands que la fenêtre et glissent bien plus que sur le site
   (×1,8) ; le perso et les spores proches avancent vers la souris, le ciel recule. Les anneaux se couchent et
   pivotent avec la carte, un éclat de lumière suit l'inclinaison : la fenêtre se lit comme une vraie boîte. */
.ecran .cg-plan { inset: -26%; transform: translate3d(calc(var(--px) * var(--prof) * -1.8px), calc(var(--py) * var(--prof) * -1.8px), 0); }
.ecran .cg-perso { inset: 0; transform: translate3d(calc(var(--px) * var(--prof) * -1.8px), calc(var(--py) * var(--prof) * -1.3px), 0) scale(1.02); }
.ecran .cg-fond { --prof: 30; }
.ecran .cg-ciel { --prof: 28; }
.ecran .cg-anneaux > i { transform: rotateX(calc(70deg + var(--py) * 14deg)) rotateY(calc(var(--px) * -18deg)); }
.ecran .cg-fenetre::before {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: radial-gradient(circle at calc(50% - var(--px) * 40%) calc(40% - var(--py) * 35%), #fff3d02e, transparent 55%);
}
.ecran .cg-fenetre::after { background: radial-gradient(ellipse 60% 58% at calc(50% + var(--px) * 10%) calc(52% + var(--py) * 8%), transparent 55%, #000a 100%); }

/* Blason de la maison, posé dans le coin haut gauche, devant le cadre : il pivote plus fort que la carte et glisse
   vers la souris, comme s'il flottait au-dessus. */
.cg-blason {
    position: absolute; z-index: 12; left: -26px; top: -16px; width: 92px; height: auto; pointer-events: none;
    transform: perspective(500px) translate3d(calc(var(--px) * 9px), calc(var(--py) * 7px), 40px) rotateY(calc(var(--px) * 28deg)) rotateX(calc(var(--py) * -24deg)) rotate(-8deg);
    filter: drop-shadow(calc(var(--px) * -8px) calc(10px - var(--py) * 6px) 9px #000c);
}
.cg-blason[hidden] { display: none; }
.ecran.visible .cg-blason { animation: blason-pose .7s .45s cubic-bezier(.2, .9, .3, 1.3) both, blason-flotte 5s 1.15s ease-in-out infinite alternate; }
@keyframes blason-pose { from { opacity: 0; scale: 1.8; } to { opacity: 1; scale: 1; } }
@keyframes blason-flotte { from { translate: 0 0; } to { translate: 0 -5px; } }

/* Engrenage natif sur le bord droit de la carte, qui dépasse du cadre : accès aux paramètres. Il tourne lentement,
   flotte devant la carte comme le blason, et s'illumine au survol en s'immobilisant (survol et clic relayés par la vue
   capteur, d'où pointer-events: auto pour elementFromPoint). */
.cg-engrenage {
    position: absolute; z-index: 12; right: -22px; top: 236px; width: 58px; height: 58px; pointer-events: auto;
    transform: perspective(500px) translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 34px) rotateY(calc(var(--px) * 24deg)) rotateX(calc(var(--py) * -20deg));
    filter: drop-shadow(calc(var(--px) * -6px) calc(8px - var(--py) * 5px) 7px #000c);
    transition: filter .25s ease, width .45s cubic-bezier(.2, .9, .3, 1.3), height .45s cubic-bezier(.2, .9, .3, 1.3), top .45s cubic-bezier(.2, .9, .3, 1.3), right .45s cubic-bezier(.2, .9, .3, 1.3);
}
/* Menu ouvert : son icône grossit (et rétrécit à la fermeture). */
.reglages-ouverts .cg-engrenage { width: 76px; height: 76px; top: 227px; right: -31px; }

/* Miroir natif, plus petit, en bas à gauche de l'engrenage : changer de personnage ou quitter le jeu. */
.cg-miroir {
    position: absolute; z-index: 12; right: 26px; top: 280px; width: 26px; height: 42px; pointer-events: auto;
    transform: perspective(500px) translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px), 30px) rotateY(calc(var(--px) * 22deg)) rotateX(calc(var(--py) * -18deg)) rotate(8deg);
    filter: drop-shadow(calc(var(--px) * -5px) calc(7px - var(--py) * 4px) 6px #000c);
    transition: filter .25s ease, width .45s cubic-bezier(.2, .9, .3, 1.3), height .45s cubic-bezier(.2, .9, .3, 1.3), top .45s cubic-bezier(.2, .9, .3, 1.3), right .45s cubic-bezier(.2, .9, .3, 1.3);
}
.ecran.visible .cg-miroir { animation: blason-pose .7s .75s cubic-bezier(.2, .9, .3, 1.3) both; }
.sortie-ouverte .cg-miroir { width: 37px; height: 60px; top: 272px; right: 20px; }
.ecran.visible .cg-engrenage { animation: blason-pose .7s .6s cubic-bezier(.2, .9, .3, 1.3) both, engrenage-tourne 24s linear infinite; }
.cg-engrenage:hover, .cg-engrenage.survol, .cg-miroir:hover, .cg-miroir.survol, .cg-coffre:hover, .cg-coffre.survol, .boite-panel:hover, .boite-panel.survol { filter: drop-shadow(0 0 7px #f3d48ccc) brightness(1.25); }
.ecran.visible .cg-engrenage:hover, .ecran.visible .cg-engrenage.survol, .ecran.visible .reglages-ouverts .cg-engrenage { animation-play-state: running, paused; }   /* au survol : il s'immobilise, seule la surbrillance change */
@keyframes engrenage-tourne { to { rotate: 1turn; } }

/* Boîte sous le personnage (liée à la carte : elle suit la même inclinaison, --px/--py posées sur .ensemble) : même boîte de dialogue que la whitelist du site (panneau nuit, double liseré doré,
   étiquette au nom entre volutes natives), pointe vers la carte. */
.boite {
    position: relative; box-sizing: border-box; width: 340px; margin: 0; padding: 26px 26px 18px; border: 1px solid #b89a6380;
    background: linear-gradient(145deg, #13203a, #0a111e); box-shadow: 0 24px 70px #0007, inset 0 0 40px #b89a630d;
    opacity: 0; transform-origin: 50% -40px;
    transform: perspective(900px) translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px), 0) rotateX(calc(var(--py) * -14deg)) rotateY(calc(var(--px) * 18deg));
}
.boite::before { content: ""; position: absolute; inset: 6px; border: 1px solid #b89a631f; pointer-events: none; }
.boite::after {   /* pointe vers la carte */
    content: ""; position: absolute; left: 50%; top: -11px; width: 20px; height: 20px; margin-left: -10px; transform: rotate(45deg);
    background: #13203a; border-left: 1px solid #b89a6380; border-top: 1px solid #b89a6380;
}
.boite-etiquette {
    position: absolute; z-index: 1; left: 50%; top: -11px; translate: -50% 0; white-space: nowrap;
    padding: 2px 34px; color: #f0dca6; font: 11px CharmColumna, serif; letter-spacing: .16em; text-transform: uppercase;
    background: url('natif/UI_T_LegendBack.png') center / 100% 100% no-repeat;
}
.boite-etiquette::before, .boite-etiquette::after { content: ""; position: absolute; top: 50%; width: 22px; height: 11px; margin-top: -6px; background: url('natif/UI_T_GoldLeaf_Flourish.png') center / contain no-repeat; }
.boite-etiquette::before { left: 6px; transform: scaleX(-1); }
.boite-etiquette::after { right: 6px; }
/* Prénom et nom RP, puis le rôle. */
.boite-nom { position: relative; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: #f0dca6; font: 19px CharmColumna, serif; letter-spacing: .06em; }
.boite-texte { position: relative; margin: 6px 0 0; text-align: center; color: #ddd3bd; font: italic 15px/1.5 Georgia, serif; }
.ecran.visible .boite { animation: boite-sort .6s .3s cubic-bezier(.2, .9, .3, 1.25) both; }
.ecran.sortie .boite { animation: cg-part .3s ease-in both; }
@keyframes boite-sort { from { opacity: 0; scale: .7; translate: 0 -18px; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* Boutons du menu : même bouton doré que « Continuer » sur la whitelist du site. */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border: 0; cursor: pointer;
    background: linear-gradient(140deg, #d3bb84, #886d3c); color: #111723; box-shadow: 0 8px 32px #b89a6328;
    font: 14px CharmColumna, serif; letter-spacing: .1em; text-transform: uppercase; transition: filter .25s, transform .25s;
}
.bouton:hover { filter: brightness(1.12); transform: translateY(-2px); }
.ecran { perspective: 1200px; }
/* Portrait en buste, plus grand que la fenêtre : comme la professeure du site, la tête et le haut des épaules
   sortent du cadre par-dessus l'or ; les côtés s'effacent doucement et le bas s'éteint au-dessus du bord. */
.cg-perso img {
    width: 372px; margin-left: -186px; bottom: 3%;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 96%);
    -webkit-mask-composite: source-in;
}
.cg-perso img[hidden] { display: none; }
/* Maisons : teinte de la scène (mêmes réglages que les blasons du site). */
.maison-gryffondor .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #7a2a24, #3f1412 55%, #1e0908); }
.maison-gryffondor .cg-fond::before, .maison-gryffondor .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(-30deg) saturate(3.2) brightness(.62) contrast(1.1); }
.maison-serpentard .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #22603f, #10301f 55%, #08180f); }
.maison-serpentard .cg-fond::before, .maison-serpentard .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(2.4) brightness(.55) contrast(1.1); }
.maison-serdaigle .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #2b4a7a, #13233f 55%, #0a1426); }
.maison-serdaigle .cg-fond::before, .maison-serdaigle .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(2.6) brightness(.66) contrast(1.1); }
.maison-poufsouffle .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #806320, #45330e 55%, #221906); }
.maison-poufsouffle .cg-fond::before, .maison-poufsouffle .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(6deg) saturate(2.8) brightness(.7) contrast(1.1); }
.maison-aucune .cg-fenetre { background: radial-gradient(ellipse at 50% 42%, #3a3a55, #1a1a2c 55%, #0b0b16); }
.maison-aucune .cg-fond::before, .maison-aucune .cg-fond::after { filter: grayscale(1) sepia(1) hue-rotate(200deg) saturate(1.4) brightness(.6); }
/* Reflet doré et étincelles à chaque apparition (au site, ils jouent au survol). */
.ecran.visible .cg-reflet i { animation: cg-reflet 1.4s cubic-bezier(.45, .05, .25, 1) .5s both; }
.ecran.visible .cg-etincelles i { animation: cg-etincelle 2.6s ease-out infinite; }
.ecran.visible .cg-etincelles i:nth-child(2) { animation-delay: .5s; } .ecran.visible .cg-etincelles i:nth-child(3) { animation-delay: 1.1s; }
.ecran.visible .cg-etincelles i:nth-child(4) { animation-delay: .25s; } .ecran.visible .cg-etincelles i:nth-child(5) { animation-delay: 1.5s; } .ecran.visible .cg-etincelles i:nth-child(6) { animation-delay: 1.9s; }

/* ---- Paramètres : panneau flottant à droite de la carte ----
   Même boîte nuit au double liseré doré ; il pivote avec la carte (charnière côté carte) et se déploie depuis
   l'engrenage. La vue a alors le focus : contrôles natifs (sélecteurs, curseurs, saisie de touches). */
.reglages {
    position: absolute; left: 488px; top: 64px; width: 440px; box-sizing: border-box; padding: 30px 24px 16px;
    border: 1px solid #b89a6380; background: linear-gradient(145deg, #13203af2, #0a111ef7); box-shadow: 0 24px 70px #0008, inset 0 0 40px #b89a630d;
    pointer-events: none; opacity: 0; visibility: hidden; transform-origin: -60px 60%;
    /* Inclinaison plus légère que la carte : le panneau doit rester facile à viser. */
    transform: perspective(900px) translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0) rotateX(calc(var(--py) * -5deg)) rotateY(calc(var(--px) * 6deg));
    scale: .9; translate: -30px 0; clip-path: inset(0 100% 0 0);
    transition: opacity .35s ease, clip-path .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s;
}
.reglages::before { content: ""; position: absolute; inset: 6px; border: 1px solid #b89a631f; pointer-events: none; }
.reglages-ouverts .reglages {
    pointer-events: auto; opacity: 1; visibility: visible; scale: 1; translate: 0 0; clip-path: inset(-20px -20px -20px -20px);
    transition: opacity .35s ease, clip-path .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.reglages .boite-etiquette { z-index: 2; }
.reglages-onglets { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; padding-bottom: 14px; background: url('natif/UI_T_GoldLeaf_Flourish.png') bottom center / 30px 9px no-repeat; }
.reglages-onglets button {
    padding: 6px 14px; border: 1px solid transparent; background: none; cursor: pointer; color: #9d8c67;
    font: 11px CharmColumna, serif; letter-spacing: .16em; text-transform: uppercase; transition: color .2s, border-color .2s, background .2s;
}
.reglages-onglets button:hover { color: #f0dca6; }
.reglages-onglets button[aria-selected="true"] { color: #f3d48c; border-color: #b89a6366; background: #b89a6314; }
.reglages-page { max-height: 470px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #b89a6366 transparent; }
.reglages-page::-webkit-scrollbar { width: 4px; }
.reglages-page::-webkit-scrollbar-thumb { background: #b89a6366; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #b89a631c; }
.reglage-large { display: grid; justify-content: stretch; gap: 8px; }
.reglage-titre { display: grid; gap: 2px; color: #ddd3bd; font: 14px Georgia, serif; }
.reglage-titre span { display: flex; justify-content: space-between; gap: 10px; }
.reglage-titre small { color: #9d927c; font: italic 12px Georgia, serif; }
.reglage-valeur { color: #f0dca6; font: 12px CharmColumna, serif; letter-spacing: .06em; }
.reglages-intertitre { margin: 18px 0 4px; color: #f0dca6; font: 12px CharmColumna, serif; letter-spacing: .18em; text-transform: uppercase; font-weight: normal; }
.reglage-note { margin: 8px 0; color: #9d927c; font: italic 13px/1.5 Georgia, serif; }
.reglages-message { min-height: 18px; margin: 10px 0 0; text-align: center; color: #c9b88e; font: italic 13px Georgia, serif; }
.reglages-message.erreur { color: #f0b8b0; }
/* Interrupteur : bascule dorée. */
.interrupteur { position: relative; flex: none; width: 42px; height: 22px; border: 1px solid #b89a6380; border-radius: 11px; background: #070d16; cursor: pointer; transition: background .25s, border-color .25s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #8c7d60; transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .25s, box-shadow .25s; }
.interrupteur[aria-pressed="true"] { background: #b89a6333; border-color: #d3bb84; }
.interrupteur[aria-pressed="true"]::after { transform: translateX(20px); background: #f3d48c; box-shadow: 0 0 8px #f3d48c99; }
.interrupteur:disabled, .curseur:disabled, .selecteur:disabled { opacity: .4; cursor: default; }
/* Curseur : piste fine, partie remplie dorée, poignée en losange. */
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.curseur::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #d3bb84 var(--niveau, 0%), #ffffff1c 0); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; transform: rotate(45deg); border: 1px solid #f3d48c; background: #13203a; box-shadow: 0 0 8px #f3d48c88; }
/* Sélecteur. */
.selecteur { width: 100%; padding: 8px 10px; border: 1px solid #b89a6345; border-radius: 0; background: #070d16; color: #efe4c9; font: 14px Georgia, serif; color-scheme: dark; cursor: pointer; }
.selecteur:focus { outline: none; border-color: #d3bb84; }
.selecteur option { background: #0a111e; color: #efe4c9; }
/* Touche : vignette native du jeu dans un cadre discret. */
.touche { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 52px; min-height: 38px; padding: 2px 10px; border: 1px solid #b89a6345; background: #070d16; color: #efe4c9; font: 12px CharmColumna, serif; letter-spacing: .06em; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.touche-groupe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.touche-lateral { min-width: 0; font-size: 11px; opacity: .85; }
.touche:hover { border-color: #d3bb84; }
.touche.capture { border-color: #f3d48c; box-shadow: 0 0 12px #f3d48c55; color: #f3d48c; font: italic 12px Georgia, serif; letter-spacing: 0; }
.reglages-page .bouton { display: flex; width: 100%; margin: 12px 0 4px; }
/* Niveau du micro. */
.diagnostic { padding: 12px 0 4px; }
.diagnostic > .reglage-titre { display: block; }
.jauge { height: 4px; margin-top: 8px; background: #ffffff14; }
.jauge i { display: block; height: 100%; width: var(--niveau, 0%); background: linear-gradient(90deg, #8fb3d9, #f3d48c); transition: width .12s linear; }

/* ---- Fenêtre de sortie : même boîte flottante que les paramètres, à droite de la carte ---- */
.sortie {
    position: absolute; left: 488px; top: 150px; width: 400px; box-sizing: border-box; padding: 30px 26px 16px; text-align: center;
    border: 1px solid #b89a6380; background: linear-gradient(145deg, #13203af2, #0a111ef7); box-shadow: 0 24px 70px #0008, inset 0 0 40px #b89a630d;
    pointer-events: none; opacity: 0; visibility: hidden; transform-origin: -60px 50%;
    transform: perspective(900px) translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0) rotateX(calc(var(--py) * -5deg)) rotateY(calc(var(--px) * 6deg));
    scale: .9; translate: -30px 0; clip-path: inset(0 100% 0 0);
    transition: opacity .35s ease, clip-path .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s;
}
.sortie::before { content: ""; position: absolute; inset: 6px; border: 1px solid #b89a631f; pointer-events: none; }
.sortie-ouverte .sortie {
    pointer-events: auto; opacity: 1; visibility: visible; scale: 1; translate: 0 0; clip-path: inset(-20px -20px -20px -20px);
    transition: opacity .35s ease, clip-path .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1), translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.sortie .boite-etiquette { z-index: 2; }
.sortie-etape[hidden] { display: none; }
.sortie-texte { margin: 4px 0 6px; color: #efe4c9; font: italic 18px/1.5 Georgia, serif; }
.sortie-detail { margin: 0 0 6px; color: #9d927c; font: italic 14px/1.5 Georgia, serif; }
.sortie-boutons { display: grid; gap: 10px; margin: 16px 0 6px; }
.sortie-annuler { margin: 6px 0 0; padding: 6px 12px; border: 0; background: none; cursor: pointer; color: #b89a63; font: 10px CharmColumna, serif; letter-spacing: .18em; text-transform: uppercase; transition: color .2s; }
.sortie-annuler:hover { color: #f3d48c; }

/* ---- Inventaire ----
   Coffre natif au-dessus de l'engrenage : il grossit tant que l'inventaire (mode mini de hmp-inventaire) est ouvert. */
.cg-coffre {
    position: absolute; z-index: 12; right: -24px; top: 178px; width: 58px; height: 42px; pointer-events: auto;
    transform: perspective(500px) translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 34px) rotateY(calc(var(--px) * 24deg)) rotateX(calc(var(--py) * -20deg)) rotate(-6deg);
    filter: drop-shadow(calc(var(--px) * -6px) calc(8px - var(--py) * 5px) 7px #000c);
    transition: filter .25s ease, width .45s cubic-bezier(.2, .9, .3, 1.3), height .45s cubic-bezier(.2, .9, .3, 1.3), top .45s cubic-bezier(.2, .9, .3, 1.3), right .45s cubic-bezier(.2, .9, .3, 1.3);
}
.ecran.visible .cg-coffre { animation: blason-pose .7s .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.inventaire-ouvert .cg-coffre { width: 78px; height: 57px; top: 168px; right: -34px; }


/* Clé de bronze native, dans le coin haut droit de la boîte du nom : accès au panel staff (personnel seulement). */
.boite-panel { position: absolute; z-index: 3; right: 10px; top: 8px; width: 22px; height: 35px; pointer-events: auto; cursor: pointer; rotate: 28deg;
    filter: drop-shadow(0 3px 4px #000c); transition: filter .25s ease, scale .25s ease; }
.boite-panel[hidden] { display: none; }
.boite-panel:hover, .boite-panel.survol { scale: 1.12; }

/* Animations 3D désactivées (réglage du menu Échap) : les animations en boucle s'arrêtent (celles d'entrée finissent aussitôt, dans leur état final). */
.sans-3d *, .sans-3d *::before, .sans-3d *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }