/* 1.000.41 : Jeux (/services/jeux) et Solitaire (/services/jeux/solitaire) */
.jx-page p, .jx-texte, .jx-regles p, .jx-info { text-align: justify; }
.jx-info { background: var(--accent-pale, #FFF0EC); border-radius: var(--r-cadre, 8px); padding: 12px 16px; font-size: 14px; margin: 0 0 14px; }
.jx-info a, .jx-page .fb-bloc a { color: var(--accent-fonce, #D93A1D); font-weight: 700; text-decoration: none; }
.jx-texte { font-size: 14px; color: var(--gris); margin: 0 0 10px; }
.jx-vide { font-size: 14px; color: var(--gris); margin: 0; }
.jx-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.jx-deux .fb-bloc { margin-bottom: 0; }
.jx-classement { list-style: none; margin: 0; padding: 0; }
.jx-classement li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.jx-classement li:last-child { border-bottom: 0; }
.jx-classement small { color: var(--gris); font-weight: 700; white-space: nowrap; }
.jx-rang { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fond); font-weight: 800; font-size: 13px; }
.jx-classement li:nth-child(1) .jx-rang { background: #FFD43B; } .jx-classement li:nth-child(2) .jx-rang { background: #DEE2E6; } .jx-classement li:nth-child(3) .jx-rang { background: #F4C095; }
.jx-classement li.jx-moi { background: var(--accent-pale, #FFF0EC); border-radius: var(--r-petit, 4px); padding-left: 4px; padding-right: 4px; }
.jx-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.jx-stats div { background: var(--fond); border-radius: var(--r-carte, 6px); padding: 10px; text-align: center; }
.jx-stats small { display: block; font-size: 12px; color: var(--gris); font-weight: 700; }
.jx-stats b { font-size: 20px; }
.jx-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }
.jx-carte { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--trait); border-top: 4px solid var(--jc); border-radius: var(--r-cadre, 8px); padding: 16px; color: var(--encre); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.jx-carte:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.jx-carte strong { font-size: 18px; } .jx-carte span { font-size: 14px; color: var(--gris); } .jx-carte em { font-style: normal; font-weight: 800; color: var(--jc); margin-top: 6px; }
.jx-carte-dessin { display: flex; gap: 6px; margin-bottom: 6px; }
.jx-carte-dessin i { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 52px; border: 1px solid var(--trait); border-radius: 5px; background: #fff; font: 800 15px var(--corps); font-style: normal; color: var(--encre); box-shadow: 0 2px 6px rgba(14,17,22,.08); }
.jx-carte-dessin i.r { color: #C92A2A; transform: rotate(8deg); }
.jx-carte-dessin em { font-style: normal; font-size: 14px; color: inherit !important; margin: 0 !important; }

/* ---------- Le Solitaire ---------- */
.sol { position: relative; background: radial-gradient(ellipse at 50% 20%, #24935D 0%, #1A6E45 70%, #155C3A 100%); border-radius: var(--r-cadre, 8px); padding: 12px; margin: 0 0 16px; color: #fff; }
/* 1.000.44 : plus fort que « body.adm-libre * » (texte sélectionnable quand l'admin est connecté), qui faisait des sélections bleues en déplaçant les cartes */
html body .sol, html body .sol *, html body.adm-libre .sol, html body.adm-libre .sol *, html body.adm-page .sol, html body.adm-page .sol * { user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; -webkit-user-drag: none !important; }
.sol-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.sol-b { min-height: 40px; padding: 0 14px; font-size: 14px; }
.sol-b:disabled { opacity: .5; cursor: default; transform: none; }
.sol-tirage { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.sol-tirage select { min-height: 40px; border: 0; border-radius: var(--r-petit, 4px); padding: 0 8px; font: 600 14px var(--corps); color: var(--encre); background: #fff; }
.sol-compteurs { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 1.3; }
.sol-compteurs span:first-child { opacity: .8; font-weight: 700; }
.sol-compteurs b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sol-table { position: relative; width: 100%; max-width: 860px; margin: 0 auto; min-height: 300px; touch-action: manipulation; }
.sol-place, .sol-c { position: absolute; left: 0; top: 0; border-radius: 7%/5%; }
.sol-place { border: 2px dashed rgba(255,255,255,.32); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-weight: 800; }
.sol-pioche { cursor: pointer; border-style: solid; }
.sol-pioche.sol-vide span { opacity: .25; }
.sol-c { background: #fff; color: #0E1116; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.12); transition: transform .2s ease; cursor: pointer; touch-action: none; overflow: hidden; font-family: var(--corps); }
.sol-c.sol-rouge { color: #C92A2A; }
.sol-c.sol-glisse { transition: none; cursor: grabbing; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.sol-coin { position: absolute; top: 4%; left: 8%; display: flex; flex-direction: column; align-items: center; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.sol-coin i { font-style: normal; font-size: .9em; }
.sol-bas { top: auto; left: auto; bottom: 4%; right: 8%; transform: rotate(180deg); }
.sol-centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5em; font-weight: 800; padding-top: 6%; }
.sol-c.sol-dos { background: repeating-linear-gradient(45deg, #0E1116 0 6px, #1B2029 6px 12px); border: 3px solid #fff; cursor: default; touch-action: auto; }
.sol-c.sol-dos::after { content: 'V'; position: absolute; inset: 22%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FF4D2E; color: #fff; font: 800 1.6em var(--titre, sans-serif); }
.sol-c.sol-dos > span { visibility: hidden; }
.sol-c.sol-non { animation: sol-non .35s; }
@keyframes sol-non { 0%, 100% { margin-left: 0; } 25% { margin-left: -5px; } 75% { margin-left: 5px; } }
.sol-indice { box-shadow: 0 0 0 3px #FFD43B, 0 0 18px rgba(255,212,59,.8) !important; }
.sol-gagne .sol-c { animation: sol-saut .6s ease-in-out 2; }
@keyframes sol-saut { 50% { margin-top: -10px; } }
.sol-message { min-height: 1.4em; margin: 8px 0 0; text-align: center !important; font-weight: 700; font-size: 14px; }
.sol-fin:not([hidden]) { position: absolute; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(14,17,22,.45); border-radius: var(--r-cadre, 8px); padding: 16px; }
.sol-fin-boite { background: #fff; color: var(--encre); border-radius: var(--r-cadre, 8px); padding: 22px 24px; max-width: 420px; text-align: center; box-shadow: var(--ombre-forte); }
.sol-fin-boite strong { display: block; font: 800 24px var(--titre, sans-serif); margin-bottom: 8px; }
.sol-fin-boite p { text-align: center !important; font-size: 15px; margin: 0 0 14px; }
.sol-fin-boite a { color: var(--accent-fonce, #D93A1D); font-weight: 700; text-decoration: none; }

@media (max-width: 760px) {
  .jx-deux { grid-template-columns: 1fr; }
  .jx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sol { padding: 8px; margin-left: -8px; margin-right: -8px; }
  .sol-barre { gap: 6px; justify-content: center; }
  .sol-b { min-height: 36px; padding: 0 10px; font-size: 13px; }
  .sol-tirage select { min-height: 36px; font-size: 13px; }
  .sol-compteurs { margin-left: 0; width: 100%; flex-direction: row; justify-content: center; gap: 12px; align-items: baseline; }
  .sol-c.sol-dos { border-width: 2px; }
  .sol-centre { font-size: 1.7em; padding-top: 22%; }
  /* téléphone : valeur et couleur côte à côte en haut de la carte, lisibles même quand les cartes se chevauchent */
  .sol-coin { flex-direction: row; align-items: baseline; gap: 1px; top: 3%; left: 6%; }
  .sol-coin i { font-size: .85em; }
  .sol-bas { display: none; }
  .sol-c.sol-dos::after { inset: 18%; font-size: 1.1em; }
}

/* Partage et intégration dans un autre site */
.jx-partage { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 14px; }
.jx-page .fb-bloc .jx-partage { justify-content: flex-start; margin: 0; }
.jx-reseau { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--encre); color: #fff !important; font: 700 13px var(--corps); text-decoration: none; cursor: pointer; }
.jx-linkedin { background: #0A66C2; } .jx-facebook { background: #1877F2; } .jx-x { background: #0E1116; } .jx-whatsapp { background: #1FA855; } .jx-email { background: #6B7380; }
.jx-lien, .jx-code { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 10px; background: var(--fond); border-radius: var(--r-petit, 4px); font-size: 13px; text-align: left !important; }
.jx-lien span, .jx-code code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
.jx-copier { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--gris); cursor: pointer; }
.jx-copier:hover { color: var(--accent-fonce, #D93A1D); background: #fff; }
.jx-copier.jx-copie::after { content: 'Copié !'; position: absolute; bottom: 110%; right: 0; background: var(--encre); color: #fff; font: 700 12px var(--corps); padding: 4px 8px; border-radius: var(--r-petit, 4px); white-space: nowrap; }
body.jx-integre { background: transparent; margin: 0; padding: 0; }
body.jx-integre .sol { margin: 0; }
.jx-integre-pied { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--gris); }
.jx-integre-pied a { color: var(--accent-fonce, #D93A1D); text-decoration: none; }

/* 1.000.42 : plein écran (API du navigateur, ou classe sol-plein sur iPhone) */
.sol-plein-b svg { flex: none; }
.sol:fullscreen, .sol.sol-plein { width: 100%; height: 100%; margin: 0; border-radius: 0; overflow: auto; padding: 14px; }
.sol:-webkit-full-screen { width: 100%; height: 100%; margin: 0; border-radius: 0; overflow: auto; padding: 14px; }
.sol.sol-plein { position: fixed; inset: 0; z-index: 10000; }
html.sol-sans-defil, html.sol-sans-defil body { overflow: hidden; }
.sol:fullscreen .sol-table, .sol.sol-plein .sol-table { max-width: min(100%, calc((100vh - 120px) * 1.3)); }
.sol:fullscreen .sol-fin:not([hidden]), .sol.sol-plein .sol-fin:not([hidden]) { position: fixed; border-radius: 0; }
@media (max-width: 760px) { .sol-plein-b span { display: none; } .sol-plein-b { padding: 0 10px; } }

/* ---------- 1.000.45 : Sudoku ---------- */
.sdk { background: radial-gradient(ellipse at 50% 15%, #3D72C4 0%, #2A579F 65%, #224A8A 100%); }
.sdk-zone { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.sdk-grille { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: min(100%, 540px, calc(100vh - 230px)); min-width: 260px; aspect-ratio: 1; background: #fff; border: 3px solid #0E1116; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sol:fullscreen .sdk-grille, .sol.sol-plein .sdk-grille { width: min(100%, calc(100vh - 140px)); }
.sdk-c { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0; margin: 0; border: 0; border-right: 1px solid #CBD2DC; border-bottom: 1px solid #CBD2DC; border-radius: 0; background: #fff; color: #2F5DA8; font: 700 clamp(15px, 4.6vw, 30px)/1 var(--corps); cursor: pointer; transition: background .12s; }
.sdk-c:nth-child(9n) { border-right: 0; } .sdk-c:nth-child(n+73) { border-bottom: 0; }
.sdk-c.sdk-d { border-right: 2px solid #0E1116; } .sdk-c.sdk-b { border-bottom: 2px solid #0E1116; }
.sdk-c.sdk-donne { color: #0E1116; font-weight: 800; }
.sdk-c.sdk-voisin { background: #EEF3FB; }
.sdk-c.sdk-meme { background: #CFE0FA; }
.sdk-c.sdk-faux { color: #C92A2A; background: #FDE2E2; }
.sdk-c.sdk-sel { background: #FFE58F; }
.sdk-c:focus-visible { outline: 3px solid #FF4D2E; outline-offset: -3px; }
.sdk-notes { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; padding: 2px; }
.sdk-notes i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .38em; font-weight: 700; color: #6B7380; line-height: 1; }
.sdk-c.sdk-aide { animation: sdk-aide 1.2s ease-out; }
@keyframes sdk-aide { 0% { background: #B2F2BB; } 100% { background: #fff; } }
.sdk-gagne .sdk-c { animation: sdk-vague .8s ease-in-out; }
@keyframes sdk-vague { 50% { background: #B2F2BB; } }
.sdk-pave { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.sdk-chiffre { position: relative; height: 64px; border: 0; border-radius: 10px; background: #fff; color: #22488A; font: 800 26px var(--corps); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .1s; }
.sdk-chiffre:active { transform: scale(.95); }
.sdk-chiffre small { position: absolute; top: 4px; right: 7px; font-size: 11px; font-weight: 700; color: #8A93A0; }
.sdk-chiffre.sdk-fini { opacity: .35; }
.sdk-outil { grid-column: span 3; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 10px; background: rgba(255,255,255,.92); color: #22488A; font: 700 15px var(--corps); cursor: pointer; }
.sdk-outil.actif { background: #FFE58F; color: #0E1116; }
.jx-dessin-sdk { display: grid !important; grid-template-columns: repeat(3, 18px); grid-auto-rows: 18px; gap: 0; border: 2px solid #0E1116; width: max-content; border-radius: 4px; overflow: hidden; }
.jx-dessin-sdk b { display: flex; align-items: center; justify-content: center; font: 800 11px var(--corps); border: 1px solid #DEE2E6; background: #fff; color: #0E1116; }
@media (max-width: 760px) {
  .sdk-zone { flex-direction: column; align-items: center; gap: 10px; }
  .sdk-grille { width: min(100%, calc(100vh - 290px)); border-width: 2px; }
  .sdk-pave { width: min(100%, 540px); grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
  .sdk-chiffre { height: 48px; font-size: 22px; border-radius: 8px; }
  .sdk-chiffre small { top: 2px; right: 4px; font-size: 9px; }
  .sdk-outil { height: 40px; font-size: 14px; }
  .sdk-outil[data-sdk="notes"] { grid-column: 1 / 6; } .sdk-outil[data-sdk="effacer"] { grid-column: 6 / 10; }
}