/* Jeux de Carolina. Tout est préfixé .cj- ; les couleurs sont celles de la charte. */
.cj-galerie, .cj-jeu { --cj-bleu: #0B6ABA; --cj-profond: #0F3A71; --cj-brume: #F4F8FC; --cj-trait: #D5E2F0; --cj-ardoise: #3F4A5A; --cj-nuit: #0A1E38; --cj-ambre: #F0A94A; --cj-blanc: #FFFFFF; max-width: 960px; margin: 0 auto; }
.cj-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cj-carte { background: var(--cj-brume); border: 2px solid var(--cj-trait); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.cj-carte-vignette { display: block; width: 72px; height: 72px; margin: 0 0 12px; object-fit: contain; }
.cj-carte-titre { margin: 0 0 8px; font-size: 1.3em; }
.cj-carte p { margin: 0 0 12px; }
.cj-rythme { font-size: 0.9em; color: var(--cj-ardoise); }
.cj-carte .cj-bouton { margin-top: auto; align-self: flex-start; }

.cj-bouton { display: inline-block; min-height: 44px; padding: 10px 22px; border: 2px solid var(--cj-profond); border-radius: 8px; background: var(--cj-profond); color: var(--cj-blanc) !important; font: inherit; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.cj-bouton:hover, .cj-bouton:focus-visible { background: var(--cj-bleu); border-color: var(--cj-bleu); }
.cj-bouton-clair { background: var(--cj-blanc); color: var(--cj-profond) !important; }
.cj-bouton-clair:hover, .cj-bouton-clair:focus-visible { background: var(--cj-brume); color: var(--cj-profond) !important; }
.cj-galerie :focus-visible, .cj-jeu :focus-visible { outline: 3px solid var(--cj-ambre); outline-offset: 2px; }
.cj-bouton[disabled] { opacity: 0.5; cursor: default; }

.cj-titre { margin: 0 0 8px; }
.cj-accroche { margin: 0 0 20px; }
.cj-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cj-barre { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 12px; }
.cj-barre p { margin: 0; }
.cj-fin { background: var(--cj-brume); border: 2px solid var(--cj-trait); border-radius: 12px; padding: 20px; }
.cj-fin-titre { margin: 0 0 8px; }
.cj-fin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.cj-pied { margin: 20px 0 0; }

/* Le métro : une grille de boutons, 44 px au moins, un pictogramme par type de case.
   Le sol est carrelé, les murs sont en briques : c'est un couloir de métro, pas un damier. */
.cj-grille { position: relative; display: grid; grid-template-columns: repeat(var(--cj-cols), minmax(44px, 1fr)); gap: 4px; max-width: 560px; margin: 0 auto 16px; padding: 6px; background: var(--cj-trait); border-radius: 10px; touch-action: none; }
.cj-rangee { display: contents; }
.cj-case { position: relative; aspect-ratio: 1; min-width: 44px; padding: 0; border: 2px solid var(--cj-trait); border-radius: 6px; cursor: pointer; display: grid; place-items: center;
	background-color: var(--cj-blanc);
	background-image: linear-gradient(var(--cj-trait) 1px, transparent 1px), linear-gradient(90deg, var(--cj-trait) 1px, transparent 1px);
	background-size: 33.34% 33.34%; background-position: -1px -1px; }
.cj-case svg { width: 74%; height: 74%; display: block; position: relative; }
.cj-case img { width: 88%; height: 88%; object-fit: contain; display: block; position: relative; }
.cj-case-mur { cursor: default; border-color: var(--cj-ardoise);
	background-color: var(--cj-ardoise);
	background-image: linear-gradient(var(--cj-nuit) 2px, transparent 2px), linear-gradient(90deg, var(--cj-nuit) 2px, transparent 2px), linear-gradient(90deg, transparent 50%, var(--cj-nuit) 50%, var(--cj-nuit) calc(50% + 2px), transparent calc(50% + 2px));
	background-size: 100% 25%, 50% 50%, 100% 50%; background-position: 0 0, 0 0, 0 12.5%; }
.cj-case-escalier { background-color: var(--cj-brume); }
.cj-case-toboggan { background-color: #FBE7C6; background-image: none; }
.cj-case-panne { background-color: var(--cj-brume); }
.cj-case-quai { background-color: var(--cj-bleu); background-image: none; border-color: var(--cj-bleu); }
.cj-case-carolina { border-color: var(--cj-ambre); box-shadow: 0 0 0 2px var(--cj-ambre); }
/* Carolina glisse au-dessus de la grille ; secousse sur un coup refusé, fondu dans l'ascenseur. */
.cj-carolina { position: absolute; left: 0; top: 0; z-index: 2; padding: 3%; box-sizing: border-box; object-fit: contain; pointer-events: none; will-change: transform; }
.cj-carolina-fondu { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.cj-carolina { transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.13s; }
	.cj-carolina-saut { transition: opacity 0.13s; }
}
/* Les tuiles peintes, quand sprites.py les a produites : une classe par type sur la grille. */
.cj-tuile-sol .cj-case-sol, .cj-tuile-mur .cj-case-mur, .cj-tuile-escalier .cj-case-escalier, .cj-tuile-toboggan .cj-case-toboggan, .cj-tuile-panne .cj-case-panne, .cj-tuile-ascenseur .cj-case-ascenseur, .cj-tuile-quai .cj-case-quai { background-size: cover; background-position: center; border-color: transparent; }
.cj-tuile-sol .cj-case-sol { background-image: var(--cj-tuile-sol); }
.cj-tuile-mur .cj-case-mur { background-image: var(--cj-tuile-mur); }
.cj-tuile-escalier .cj-case-escalier { background-image: var(--cj-tuile-escalier); }
.cj-tuile-toboggan .cj-case-toboggan { background-image: var(--cj-tuile-toboggan); }
.cj-tuile-panne .cj-case-panne { background-image: var(--cj-tuile-panne); }
.cj-tuile-ascenseur .cj-case-ascenseur { background-image: var(--cj-tuile-ascenseur); }
.cj-tuile-quai .cj-case-quai { background-image: var(--cj-tuile-quai); }
.cj-grille .cj-case-carolina.cj-case-carolina { border-color: var(--cj-ambre); }
.cj-case-voisine { border-color: var(--cj-bleu); background-color: var(--cj-brume); }
.cj-grille[class*="cj-tuile-"] .cj-case-voisine { border-color: var(--cj-bleu); }
.cj-pastille { position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cj-bleu); box-shadow: 0 0 0 2px var(--cj-blanc); }
.cj-case-quai .cj-pastille { background: var(--cj-ambre); }
.cj-aide { font-size: 0.95em; color: var(--cj-ardoise); }
@keyframes cj-secousse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cj-secousse { animation: cj-secousse 0.15s ease-in-out 2; }

/* Le memory : des cartes carrées à deux faces, dos à motif de paillettes, qui se retournent vraiment. */
.cj-memory-bandeau { min-height: 1.6em; margin: 0 0 10px; padding: 6px 12px; border-radius: 8px; font-weight: 700; text-align: center; }
.cj-memory-bandeau:empty { padding: 0; }
.cj-memory-bandeau[data-etat="paire"] { background: #FBE7C6; color: var(--cj-nuit); }
.cj-memory-bandeau[data-etat="rate"] { background: var(--cj-brume); color: var(--cj-ardoise); }
.cj-memory-grille { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); max-width: 520px; margin: 0 auto 16px; list-style: none; padding: 0; }
.cj-memory-grille.cj-memory-6 { grid-template-columns: repeat(3, 1fr); max-width: 400px; }
@media (min-width: 600px) { .cj-memory-grille.cj-memory-12 { grid-template-columns: repeat(6, 1fr); max-width: 760px; } }
.cj-memory-carte { position: relative; aspect-ratio: 1; width: 100%; min-width: 44px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; perspective: 600px; }
.cj-memory-dos, .cj-memory-face { position: absolute; inset: 0; border: 2px solid var(--cj-trait); border-radius: 8px; overflow: hidden; backface-visibility: hidden; }
.cj-memory-dos { background: var(--cj-profond) var(--cj-dos, radial-gradient(circle, var(--cj-ambre) 1.5px, transparent 2px)) 0 0 / 14px 14px; }
.cj-memory-grille[style*="--cj-dos"] .cj-memory-dos { background-size: cover; background-position: center; }
@keyframes cj-pulse-or { 50% { box-shadow: 0 0 0 6px var(--cj-ambre); } }
@media (prefers-reduced-motion: no-preference) { .cj-memory-pulse .cj-memory-face { animation: cj-pulse-or 0.6s; } }
.cj-memory-face { transform: rotateY(180deg); background: var(--cj-blanc); }
.cj-memory-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cj-memory-carte[data-face="visible"] .cj-memory-dos, .cj-memory-carte[data-face="trouvee"] .cj-memory-dos { transform: rotateY(180deg); }
.cj-memory-carte[data-face="visible"] .cj-memory-face, .cj-memory-carte[data-face="trouvee"] .cj-memory-face { transform: rotateY(0); }
.cj-memory-carte[data-face="trouvee"] { cursor: default; }
.cj-memory-carte[data-face="trouvee"] .cj-memory-face { border-color: var(--cj-ambre); box-shadow: 0 0 0 2px var(--cj-ambre); }
.cj-memory-liste { margin: 8px 0 0; padding-left: 20px; }
@media (prefers-reduced-motion: no-preference) { .cj-memory-dos, .cj-memory-face { transition: transform 0.35s; } }

/* Le runner : le canvas prend la largeur, le décor reste net. */
.cj-runner-canvas { width: 100%; max-width: 960px; height: auto; display: block; border: 2px solid var(--cj-trait); border-radius: 8px; background: var(--cj-brume); touch-action: manipulation; }
.cj-runner-commandes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.cj-runner-sopla { font-size: 1.2em; min-width: 140px; }
@keyframes cj-pulse { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: no-preference) { .cj-pulse { animation: cj-pulse 0.3s; display: inline-block; } }
.cj-calque { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }