/* Les couleurs sont posées par jeu.js (--fond, --fond2, --encre, --or, --papier, --texte). */
.kj {
  --fond: #0f1b2d; --fond2: #1b2c46; --encre: #f3ead7; --or: #d4ae5f; --papier: #f7f0e1; --texte: #22262b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cw: 78px; --ch: calc(var(--cw) * 1.713);
}
.kj * { box-sizing: border-box; }
body.kj-page { margin: 0; background: #0e1a2b; }   /* page autonome (kit) ; sur le site, c'est le thème qui gère */
.kj {
  background: radial-gradient(120% 90% at 50% 0%, var(--fond2) 0%, var(--fond) 70%);
  background-attachment: fixed;
  color: var(--encre); font-family: var(--serif); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; text-align: left;
}
.kj [hidden], .kj[hidden] { display: none !important; }
/* Protection contre le thème du site (Astra sur eidalam.fr) : il impose sa couleur et sa police aux titres,
   un demi-gras à tout le texte et des majuscules espacées aux boutons. Double classe = priorité sur ses règles ;
   les règles propres au jeu, plus bas dans ce fichier, gardent la main à priorité égale. */
.kj.kj { font-weight: 400; letter-spacing: normal; text-transform: none; text-align: left; }
.kj.kj :where(h1, h2, h3, h4) { color: inherit; font-family: var(--serif); font-weight: 400; letter-spacing: normal; text-transform: none; }
.kj.kj :where(button) { font-family: inherit; font-weight: 400; line-height: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; text-shadow: none; min-height: 0; }
.kj button { font: inherit; color: inherit; cursor: pointer; }
.kj .ecran { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Boutons */
.kj .bouton { border: 1px solid var(--or); border-radius: 999px; padding: .8rem 1.8rem; letter-spacing: .04em; transition: transform .2s, background .25s, color .25s; }
.kj .bouton.or { background: var(--or); color: var(--fond); }
.kj .bouton.or:hover { background: transparent; color: var(--or); }
.kj .bouton.contour { background: transparent; color: var(--or); }
.kj .bouton.contour:hover { background: var(--or); color: var(--fond); }
.kj .bouton:active { transform: scale(.97); }
.kj .lien { background: none; border: 0; padding: .4rem .2rem; color: var(--encre); opacity: .8; border-bottom: 1px solid transparent; }
.kj .lien:hover { opacity: 1; border-bottom-color: var(--or); }
.kj :focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.kj .petit { font-size: .85rem; opacity: .75; }

/* Accueil */
.kj .accueil { align-items: center; justify-content: center; text-align: center; padding: 2rem 16px; }
.kj .accueil-inner { position: relative; max-width: 620px; }
.kj .halo { position: absolute; inset: -30% -10%; background: radial-gradient(circle, color-mix(in srgb, var(--or) 30%, transparent) 0%, transparent 60%); filter: blur(10px); animation: respire 10s ease-in-out infinite; z-index: -1; }
@keyframes respire { 0%,100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
.kj .surtitre { text-transform: uppercase; letter-spacing: .3em; font-size: .75rem; color: var(--or); margin: 0 0 1rem; }
.kj .accueil h1 { font-weight: 400; font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: 1.05; margin: 0 0 1.2rem; }
.kj .accueil h1 em { display: block; font-size: .45em; letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--or); margin: .3em 0; }
.kj .accroche { font-size: 1.1rem; opacity: .85; margin: 0 auto 2.2rem; max-width: 46ch; }
.kj .accueil .petit { margin-top: 1.6rem; }

/* Barre */
.kj .barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 16px; border-bottom: 1px solid color-mix(in srgb, var(--or) 25%, transparent); flex-wrap: wrap; }
.kj .marque { letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--or); }
.kj .barre-actions { display: flex; gap: 1rem; align-items: center; }
.kj .son { font-size: 1.1rem; width: 2rem; }
.kj .son[aria-pressed="false"] { opacity: .35; text-decoration: line-through; }

/* Barre de compte (site) */
.kj .account-bar { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; justify-content: center; padding: .6rem 16px; font-size: .88rem; border-bottom: 1px solid color-mix(in srgb, var(--or) 18%, transparent); }
.kj .account-bar:empty { display: none; }
.kj .account-bar button { background: none; border: 0; padding: .2rem 0; color: var(--encre); opacity: .8; border-bottom: 1px solid transparent; }
.kj .account-bar button:hover { opacity: 1; border-bottom-color: var(--or); }
.kj .account-bar .primary-link { color: var(--or); opacity: 1; }
.kj .fenetre form { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.kj .fenetre input[type=email] { font: inherit; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--or); background: transparent; color: var(--encre); }
.kj .auth-status { min-height: 1.4em; font-size: .9rem; color: var(--or); }
.kj .fenetre.large { max-width: min(980px, calc(100vw - 32px)); }
.kj .grille-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.kj .grille-img button { padding: 0; border: 0; background: none; border-radius: 6px; overflow: hidden; }
.kj .grille-img img { width: 100%; aspect-ratio: 600 / 1028; object-fit: cover; display: block; transition: transform .2s; }
.kj .grille-img button:hover img { transform: scale(1.04); }
.kj .verrou { font-size: .8em; margin-left: .25em; }

/* Greffe « Pionnier » (hetadam-deux-offres) dans le panneau sombre : texte lisible */
.kj #lockedNotice .hetadam-surclasser .note { color: var(--encre); opacity: .75; }

/* Sur le site, dans une colonne de contenu (page Hetadam : .jpp-contenu, 980 px) : le jeu prend toute la largeur. */
.jpp-contenu > .kj, .entry-content > .kj { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* 100vw compte la barre de défilement : sans ceci, eidalam.fr (Astra) défilerait de quelques pixels à l'horizontale. */
body:has(.jpp-contenu > .kj, .entry-content > .kj) { overflow-x: clip; }

/* Démo */
.kj .bandeau-demo { margin: 0; padding: .5rem 16px; text-align: center; font-size: .82rem; background: color-mix(in srgb, var(--or) 16%, transparent); color: var(--encre); }
.kj .accueil-demo { display: inline-block; border-radius: 999px; padding: .35rem 1rem; margin: -1.2rem 0 2rem; }

/* Table */
.kj .consigne { text-align: center; padding: 1.2rem 16px 0; }
.kj .consigne p { margin: 0 auto; max-width: 52ch; font-style: italic; opacity: .9; min-height: 3em; transition: opacity .4s; }
.kj .filtres { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .8rem; }
.kj .filtres button { background: transparent; border: 1px solid color-mix(in srgb, var(--or) 45%, transparent); border-radius: 999px; padding: .3rem .9rem; font-size: .82rem; opacity: .8; }
.kj .filtres button[aria-pressed="true"] { background: var(--or); color: var(--fond); opacity: 1; }
.kj .filtres button:disabled { cursor: default; }
.kj .tapis { position: relative; flex: 1; min-height: 340px; margin: 1rem 16px; }
.kj .commandes { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0 16px 1.8rem; }

/* Dos de carte (dessiné en CSS) */
.kj .dos-motif {
  width: 100%; height: 100%; border-radius: 7%/4%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--or) 55%, transparent) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, transparent 0 19%, color-mix(in srgb, var(--or) 60%, transparent) 20% 21%, transparent 22%),
    repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--or) 18%, transparent) 0 6deg, transparent 6deg 15deg),
    linear-gradient(160deg, var(--fond2), var(--fond));
  border: 1px solid var(--or);
  box-shadow: inset 0 0 0 4px var(--fond), inset 0 0 0 5px color-mix(in srgb, var(--or) 70%, transparent);
}
.kj .carte {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  padding: 0; border: 0; background: none;
  transform-origin: 50% 50%; will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
  transition-property: transform, opacity, filter;
}
.kj .carte.choisissable:hover, .kj .carte.choisissable:focus-visible { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--or) 80%, transparent)); }
.kj .carte.eteinte { opacity: .12; pointer-events: none; }
.kj .carte:not(.choisissable) { cursor: default; }

/* Révélation */
.kj .rev-grille { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1100px; width: 100%; margin: 0 auto; padding: 2rem 16px; }
.kj .scene { perspective: 1600px; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kj .carte3d { position: relative; width: min(340px, 72vw); aspect-ratio: 600 / 1028; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3,.7,.2,1); }
.kj .carte3d.retournee { transform: rotateY(180deg); }
.kj .carte3d.arrivee { animation: arrivee .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes arrivee { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.kj .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3.5%/2%; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.kj .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kj .face-b { transform: rotateY(180deg); }
.kj .carte3d.revelee .face-b { box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 60px color-mix(in srgb, var(--or) 45%, transparent); }
.kj .lecture { opacity: 0; transform: translateY(12px); transition: opacity .8s, transform .8s; }
.kj .lecture.visible { opacity: 1; transform: none; }
.kj .lecture .surtitre { margin-bottom: .4rem; }
.kj .lecture h2 { font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem; }
.kj .lecture .bloc { border-top: 1px solid color-mix(in srgb, var(--or) 35%, transparent); padding: 1rem 0 .4rem; opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s; }
.kj .lecture .bloc.visible { opacity: 1; transform: none; }
.kj .lecture h3 { font-weight: 400; color: var(--or); font-size: 1.15rem; margin: 0 0 .5rem; letter-spacing: .03em; }
.kj .lecture h3 small { display: block; color: var(--encre); opacity: .65; font-size: .8rem; letter-spacing: .05em; }
.kj .lecture dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
.kj .lecture dt { text-transform: uppercase; font-size: .72rem; letter-spacing: .18em; opacity: .6; padding-top: .3rem; }
.kj .lecture dd { margin: 0; }
.kj .lecture dd.question { font-style: italic; font-size: 1.08rem; color: var(--or); }
.kj .lecture .invite { font-style: italic; opacity: .85; }

/* Fenêtres */
.kj .fenetre { border: 1px solid var(--or); border-radius: 14px; background: var(--fond); color: var(--encre); max-width: min(640px, calc(100vw - 32px)); max-height: 85vh; padding: 2rem 1.6rem 1.6rem; overflow: auto; }
.kj .fenetre::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.kj .fenetre h2 { font-weight: 400; margin-top: 0; }
.kj .fenetre h3 { font-weight: 400; color: var(--or); margin: 1.4rem 0 .4rem; }
.kj .fermer { position: absolute; top: .6rem; right: .9rem; background: none; border: 0; font-size: 1.6rem; opacity: .7; }
.kj .grille-num { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; }
.kj .grille-num button { background: transparent; border: 1px solid color-mix(in srgb, var(--or) 40%, transparent); border-radius: 8px; padding: .5rem 0; }
.kj .grille-num button:hover { background: var(--or); color: var(--fond); }
.kj .journal { padding-left: 1.2rem; }
.kj .journal li { margin: .3rem 0; }
.kj .journal time { opacity: .6; font-size: .85rem; margin-left: .4rem; }
.kj .pause { text-align: center; }
.kj .souffle { width: 200px; height: 200px; margin: 1.5rem auto; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--or); background: radial-gradient(circle, color-mix(in srgb, var(--or) 35%, transparent), transparent 70%); transform: scale(.6); transition: transform 5s ease-in-out; }
.kj .souffle.grand { transform: scale(1); }
.kj .souffle span { font-size: 1.1rem; letter-spacing: .1em; }

@media (max-width: 760px) {
  .kj { --cw: 58px; }
  .kj { font-size: 16px; }
  .kj .rev-grille { grid-template-columns: 1fr; padding-top: 1.2rem; }
  .kj .carte3d { width: min(300px, 70vw); }
  .kj .lecture h2 { text-align: center; }
  .kj .lecture > .surtitre { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kj .halo { animation: none; }
  .kj .carte3d { transition-duration: .01s; }
}