/* ============================================================
   lecoinjeux.fr : feuille de style principale

   Deux règles de fond :
   1. tous les blocs d'une page partagent le conteneur .cj-wrap,
      donc le même bord gauche et le même bord droit. Aucune
      largeur maximale locale nulle part.
   2. l'habillage doit dire « jeu » au premier coup d'œil :
      couleurs franches, formes rondes, boutons épais qui
      s'enfoncent, cartes qui bougent au survol.
   ============================================================ */

:root {
  --wrap: 1140px;

  --fond: #fff8ee;
  --fond-2: #ffffff;
  --fond-3: #fdeedd;
  --trait: #f0d9be;
  --trait-fort: #e3c19a;
  --encre: #2b1c34;
  --encre-2: #6b5a72;
  --encre-3: #9b8ba1;

  --accent: #6c3ce9;
  --accent-fonce: #5527d4;
  --accent-clair: #f0e9ff;
  --accent-ombre: #4a1fc4;

  --corail: #ff5470;
  --ambre: #ffb020;
  --menthe: #14c8a0;
  --ciel: #2d9cf0;

  --vert: #0aa578;
  --rouge: #e63c5c;

  --pois: rgba(108, 60, 233, .07);

  --ombre: 0 2px 0 var(--trait), 0 10px 24px -14px rgba(43, 28, 52, .3);
  --ombre-forte: 0 3px 0 var(--trait-fort), 0 22px 40px -20px rgba(43, 28, 52, .42);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #171226;
    --fond-2: #201936;
    --fond-3: #2a2145;
    --trait: #392e5c;
    --trait-fort: #4b3d78;
    --encre: #f6f1ff;
    --encre-2: #c0b3dd;
    --encre-3: #8d80ad;

    --accent: #a98bff;
    --accent-fonce: #bda6ff;
    --accent-clair: #2e2450;
    --accent-ombre: #6d55c9;

    --corail: #ff7d92;
    --ambre: #ffc861;
    --menthe: #3ce0bb;
    --ciel: #6bb9ff;

    --vert: #35d6ac;
    --rouge: #ff6f8b;

    --pois: rgba(169, 139, 255, .09);

    --ombre: 0 2px 0 var(--trait), 0 10px 26px -14px rgba(0, 0, 0, .8);
    --ombre-forte: 0 3px 0 var(--trait-fort), 0 24px 44px -20px rgba(0, 0, 0, .95);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--encre);
  background-color: var(--fond);
  /* semis de pois très discret : de la texture, pas du bruit */
  background-image: radial-gradient(var(--pois) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  font: 400 17px/1.68 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.028em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); font-weight: 850; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); font-weight: 800; margin-top: 2em; }
h3 { font-size: 1.22rem; font-weight: 750; margin-top: 1.7em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin-bottom: .4em; }
li::marker { color: var(--accent); font-weight: 700; }
strong { font-weight: 750; }

.cj-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.cj-evite {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 0; z-index: 100;
}
.cj-evite:focus { left: 0; top: 0; }

/* ── En-tête ─────────────────────────────────────────────── */

.cj-entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 2px solid var(--trait);
}

.cj-bande {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.cj-logo {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--encre); text-decoration: none; font-size: 1.3rem; font-weight: 750;
  letter-spacing: -.03em; margin-right: auto;
}
.cj-logo-mark { color: var(--accent); display: flex; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.cj-logo:hover .cj-logo-mark { transform: rotate(-12deg) scale(1.08); }
.cj-logo-texte strong { color: var(--accent); font-weight: 850; }

.cj-nav { display: flex; gap: 4px; }
.cj-nav a {
  color: var(--encre-2); text-decoration: none; font-weight: 650; font-size: .98rem;
  padding: 9px 16px; border-radius: 999px; transition: background .14s ease, color .14s ease;
}
.cj-nav a:hover { background: var(--accent-clair); color: var(--accent); }

.cj-menu-etat, .cj-menu-bouton { display: none; }

@media (max-width: 760px) {
  .cj-menu-bouton {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 10px; cursor: pointer;
    border: 2px solid var(--trait); border-radius: 14px; background: var(--fond-2);
  }
  .cj-menu-bouton span { display: block; height: 3px; background: var(--accent); border-radius: 3px; }
  .cj-nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding-bottom: 6px; }
  .cj-menu-etat:checked ~ .cj-nav { display: flex; }
  .cj-nav a { padding: 12px 16px; border-radius: 14px; }
}

/* ── Fil d'Ariane ────────────────────────────────────────── */

.cj-fil { padding: 16px 0 0; font-size: .88rem; color: var(--encre-3); }
.cj-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cj-fil li { margin: 0; }
.cj-fil li + li::before { content: "›"; margin-right: 6px; color: var(--encre-3); }
.cj-fil a { color: var(--encre-3); text-decoration: none; }
.cj-fil a:hover { color: var(--accent); text-decoration: underline; }

/* ── Tête de page ────────────────────────────────────────── */

.cj-tete { padding: 30px 0 6px; }
.cj-tete .cj-chapo { font-size: 1.2rem; color: var(--encre-2); margin-bottom: 0; }

.cj-etiquette {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--teinte, var(--accent));
  padding: 7px 15px; border-radius: 999px; margin-bottom: 14px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--teinte, var(--accent)) 65%, #000);
}

/* ── Contenu rédigé ──────────────────────────────────────── */

.cj-section { padding: 10px 0 30px; }
.cj-texte h2:first-child { margin-top: .6em; }
.cj-texte p, .cj-texte li { line-height: 1.75; }

/* petit repère coloré devant les titres de section */
.cj-texte h2 {
  display: flex; align-items: baseline; gap: 12px;
}
.cj-texte h2::before {
  content: ""; flex: 0 0 12px; height: 12px; border-radius: 4px;
  background: var(--accent); transform: rotate(45deg) translateY(-2px);
}

.cj-encart {
  background: var(--fond-2); border: 2px solid var(--trait);
  border-left: 6px solid var(--ambre);
  border-radius: 8px 18px 18px 8px; padding: 18px 22px; margin: 0 0 1.4em;
}
.cj-encart p:last-child { margin-bottom: 0; }
.cj-encart-titre { display: block; font-weight: 800; margin-bottom: .3em; }

.cj-tableau {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 0 0 1.4em; font-size: .97rem;
  border: 2px solid var(--trait); border-radius: 16px; overflow: hidden;
}
.cj-tableau th, .cj-tableau td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--trait); }
.cj-tableau th { font-weight: 800; color: var(--encre); background: var(--fond-3); }
.cj-tableau tr:last-child td { border-bottom: 0; }
.cj-defile { overflow-x: auto; margin: 0 0 1.4em; }

details.cj-plie {
  border: 2px solid var(--trait); border-radius: 16px; background: var(--fond-2);
  padding: 0 20px; margin-bottom: 10px;
}
details.cj-plie > summary {
  cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.cj-plie > summary::-webkit-details-marker { display: none; }
details.cj-plie > summary::after {
  content: "+"; color: #fff; background: var(--accent);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 700; line-height: 1; flex: 0 0 24px;
}
details.cj-plie[open] > summary::after { content: "–"; }
details.cj-plie p:last-child { margin-bottom: 16px; }

/* ── Cartes de jeu ───────────────────────────────────────── */

.cj-grille {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  margin: 0 0 8px; padding: 0; list-style: none;
}

.cj-carte {
  display: flex; gap: 15px; align-items: center;
  background: var(--fond-2);
  border: 2px solid var(--trait);
  border-radius: 22px; padding: 18px;
  text-decoration: none; color: inherit;
  box-shadow: 0 3px 0 var(--trait);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease;
}
.cj-carte:hover {
  transform: translateY(-5px);
  border-color: var(--teinte, var(--accent));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--teinte, var(--accent)) 30%, var(--trait)),
              0 22px 34px -18px color-mix(in srgb, var(--teinte, var(--accent)) 60%, transparent);
}
.cj-carte:active { transform: translateY(-1px); }

.cj-carte-icone {
  flex: 0 0 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; font-size: 1.5rem; font-weight: 850;
  background: color-mix(in srgb, var(--teinte, var(--accent)) 16%, transparent);
  color: var(--teinte, var(--accent));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--teinte, var(--accent)) 22%, transparent);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cj-carte:hover .cj-carte-icone { transform: rotate(-8deg) scale(1.06); }
.cj-carte-corps { display: block; min-width: 0; }
.cj-carte-titre { display: block; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: 3px; }
.cj-carte-texte { display: block; font-size: .93rem; color: var(--encre-2); line-height: 1.5; margin-top: 4px; }
.cj-carte-meta {
  display: inline-block; font-size: .78rem; font-weight: 650; color: var(--teinte, var(--accent));
  margin-top: 7px;
}

/* ── Zone de jeu ─────────────────────────────────────────── */

.cj-jeu {
  position: relative;
  background: var(--fond-2);
  border: 2px solid var(--trait);
  border-radius: 28px;
  box-shadow: var(--ombre);
  padding: 22px; margin: 0 0 28px;
  overflow: hidden;
}
/* liseré multicolore en haut du plateau */
.cj-jeu::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--ciel), var(--menthe), var(--ambre), var(--corail));
}

.cj-jeu-barre {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 6px 0 18px; padding-bottom: 18px; border-bottom: 2px dashed var(--trait);
}
.cj-jeu-barre .cj-pousse { margin-left: auto; }

.cj-stat {
  display: inline-flex; flex-direction: column; line-height: 1.15;
  background: var(--fond-3); border-radius: 14px; padding: 8px 15px; min-width: 78px;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--trait) 70%, transparent);
}
.cj-stat b { font-size: 1.22rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cj-stat span { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-3); font-weight: 700; }

/* Boutons épais, qui s'enfoncent quand on appuie */
.cj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .95rem; font-weight: 750;
  padding: 11px 20px; border-radius: 999px;
  border: 2px solid var(--trait); background: var(--fond-2); color: var(--encre);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 3px 0 var(--trait);
  transition: transform .1s ease, box-shadow .1s ease, background .14s ease, border-color .14s ease;
}
.cj-btn:hover { background: var(--fond-3); color: var(--encre); border-color: var(--trait-fort); box-shadow: 0 3px 0 var(--trait-fort); }
.cj-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--trait); }

.cj-btn-p {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 0 var(--accent-ombre);
}
.cj-btn-p:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; box-shadow: 0 4px 0 var(--accent-ombre); }
.cj-btn-p:active { transform: translateY(4px); box-shadow: 0 0 0 var(--accent-ombre); }

.cj-btn[aria-pressed="true"] {
  background: var(--accent-clair); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 3px 0 var(--accent);
}
.cj-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.cj-champ {
  font: inherit; font-weight: 600; padding: 11px 16px; border-radius: 14px;
  border: 2px solid var(--trait); background: var(--fond); color: var(--encre);
  box-shadow: 0 3px 0 var(--trait);
}
.cj-champ:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.cj-plateau { display: grid; place-items: center; padding: 8px 0 4px; }

.cj-message {
  text-align: center; font-weight: 700; padding: 13px; border-radius: 16px;
  background: var(--fond-3); margin-top: 16px; min-height: 24px;
}
.cj-message.gagne { background: color-mix(in srgb, var(--vert) 18%, transparent); color: var(--vert); }
.cj-message.perdu { background: color-mix(in srgb, var(--rouge) 15%, transparent); color: var(--rouge); }

:where(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}

/* ── Accueil ─────────────────────────────────────────────── */

.cj-heros { position: relative; padding: 52px 0 34px; overflow: hidden; }
.cj-heros::before,
.cj-heros::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1;
}
.cj-heros::before {
  width: 340px; height: 340px; top: -120px; right: -60px;
  background: color-mix(in srgb, var(--ambre) 42%, transparent);
}
.cj-heros::after {
  width: 300px; height: 300px; bottom: -140px; left: -80px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}
.cj-heros p { font-size: 1.25rem; color: var(--encre-2); }
.cj-heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cj-heros-actions .cj-btn { font-size: 1.02rem; padding: 14px 26px; }

.cj-chiffres { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.cj-chiffres div {
  background: var(--fond-2); border: 2px solid var(--trait); border-radius: 18px;
  padding: 14px 22px; box-shadow: 0 3px 0 var(--trait);
}
.cj-chiffres div b { display: block; font-size: 1.9rem; font-weight: 850; color: var(--accent); line-height: 1.1; }
.cj-chiffres div span { font-size: .9rem; color: var(--encre-2); font-weight: 600; }

.cj-titre-rang {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 2.2em 0 .6em;
}
.cj-titre-rang h2 { margin: 0; }
.cj-titre-rang a { font-size: .95rem; font-weight: 700; text-decoration: none; }
.cj-titre-rang a:hover { text-decoration: underline; }

.cj-intro { color: var(--encre-2); margin: 0 0 1.3em; }

/* adresse électronique reconstruite par le script */
.cj-mail a { font-weight: 750; }
.ct-adresse {
  display: inline-block; font-size: 1.25rem;
  background: var(--fond-2); border: 2px solid var(--trait); box-shadow: 0 3px 0 var(--trait);
  border-radius: 16px; padding: 14px 24px; margin-bottom: 1.4em;
}

/* ── Pied de page ────────────────────────────────────────── */

.cj-pied {
  margin-top: 56px; padding: 46px 0 26px;
  background: var(--fond-2); border-top: 3px solid var(--trait);
  font-size: .94rem;
}
.cj-pied-grille { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cj-pied-titre { display: block; font-weight: 800; margin-bottom: .7em; color: var(--encre); }
.cj-pied p { color: var(--encre-2); margin: 0; }
.cj-pied ul { list-style: none; padding: 0; margin: 0; }
.cj-pied li { margin-bottom: .45em; }
.cj-pied a { color: var(--encre-2); text-decoration: none; font-weight: 550; }
.cj-pied a:hover { color: var(--accent); text-decoration: underline; }
.cj-pied-bas {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  margin-top: 34px; padding-top: 18px; border-top: 2px dashed var(--trait);
  color: var(--encre-3); font-size: .87rem;
}

/* ── Cartes à jouer ──────────────────────────────────────────
   Partagées par le solitaire, FreeCell, Spider et la belote.
   Les cartes sont écrites dans le HTML par PHP : ce bloc ne fait
   que les habiller, il n'en crée aucune. */

/* Le tapis est aussi large que sa rangée la plus large, et pas plus :
   sinon les colonnes se tassent à gauche et le feutre s'étale à vide
   sur la droite. Les rangées, elles, occupent toute cette largeur, ce
   qui aligne les colonnes du jeu sous les fondations. */
.ca-tapis {
  background: linear-gradient(160deg, #0d7a52, #0a5f40);
  border-radius: 16px; padding: 14px; overflow-x: auto;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .3);
  width: max-content; max-width: 100%; margin: 0 auto;
}
.ca-rang { display: flex; gap: 10px; align-items: flex-start; min-width: max-content; }
.ca-rang + .ca-rang { margin-top: 18px; }

.ca-carte, .ca-case {
  width: 66px; height: 94px; border-radius: 8px; flex: 0 0 auto;
  position: relative; box-sizing: border-box;
}
.ca-carte {
  background: #fffdf8; border: 1px solid #d8cdb8; color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer;
  font: 800 .95rem/1 system-ui, sans-serif; user-select: none;
}
.ca-carte.ca-rouge { color: #cc1f3d; }
.ca-carte.ca-dos {
  background:
    repeating-linear-gradient(45deg, #3b2a86 0 6px, #4d3aa5 6px 12px);
  border-color: #241a55; cursor: default;
}
.ca-case {
  border: 2px dashed rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .12);
}
.ca-case[data-vide]::after {
  content: attr(data-vide); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .55); font-size: 1.5rem; font-weight: 800;
}
/* Le rang et la couleur côte à côte, et non l'un sous l'autre.
   Dans une colonne, les cartes se chevauchent et ne laissent voir
   qu'un bandeau d'une vingtaine de pixels : empilés, le rang était
   lisible et la couleur cachée, ce qui rendait la colonne inutile. */
.ca-coin { position: absolute; line-height: .95; white-space: nowrap; }
.ca-coin i { font-style: normal; font-size: .95em; margin-left: 1px; }
.ca-haut { top: 5px; left: 5px; }
.ca-bas  { bottom: 5px; right: 5px; transform: rotate(180deg); }
.ca-centre {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 2rem; opacity: .9;
}
.ca-carte.sel { outline: 3px solid var(--ambre); outline-offset: 1px; z-index: 5; }
.ca-carte.jouable { box-shadow: 0 0 0 2px var(--menthe), 0 1px 3px rgba(0, 0, 0, .35); }

/* Colonne de cartes qui se chevauchent */
.ca-colonne { position: relative; width: 66px; flex: 0 0 auto; }
.ca-colonne .ca-carte, .ca-colonne .ca-case { position: absolute; left: 0; }

@media (max-width: 620px) {
  .ca-carte, .ca-case, .ca-colonne { width: 48px; }
  .ca-carte, .ca-case { height: 68px; }
  .ca-centre { font-size: 1.4rem; }
  .ca-carte { font-size: .8rem; }
}

/* ── Grille carrée générique ─────────────────────────────────
   Mots croisés, mots fléchés, kakuro, futoshiki, hitori,
   shikaku : tous rendus par PHP, tous habillés ici. */

.gr-grille {
  display: grid; gap: 0; background: var(--encre);
  border: 3px solid var(--encre); border-radius: 6px;
  width: max-content; max-width: 100%; overflow: hidden;
}
.gr-case {
  background: var(--fond-2); border: 1px solid var(--trait-fort);
  width: 40px; height: 40px; position: relative; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  /* En propriétés séparées, et non en raccourci « font ». Le raccourci
     exige une famille de police, et « inherit » n'en est pas une : la
     déclaration entière était rejetée par le navigateur, et les cases
     s'affichaient à la taille du corps de page. */
  font-weight: 800; font-size: 1.1rem; line-height: 1;
  color: var(--encre); text-transform: uppercase;
}
.gr-case input {
  width: 100%; height: 100%; border: 0; background: transparent; text-align: center;
  font: inherit; color: var(--accent); text-transform: uppercase; padding: 0;
}
.gr-case input:focus { outline: 0; background: var(--accent-clair); }
.gr-case.gr-noire { background: var(--encre); border-color: var(--encre); }
.gr-case.gr-active { background: var(--accent-clair); }
.gr-case.gr-ligne { background: color-mix(in srgb, var(--accent) 8%, var(--fond-2)); }
.gr-case.gr-faux input { color: var(--rouge); }
.gr-num {
  position: absolute; top: 1px; left: 3px; font-size: .55rem;
  font-weight: 700; color: var(--encre-3);
}
.gr-def {
  background: var(--fond-3); text-transform: none;
  font-weight: 600; font-size: .5rem; line-height: 1.08;
  padding: 2px; text-align: center; color: var(--encre-2); overflow: hidden;
}
.gr-def span { display: block; }
.gr-fleche { position: absolute; color: var(--accent); font-size: .7rem; line-height: 1; }

@media (max-width: 620px) {
  .gr-case { width: 30px; height: 30px; font-size: .9rem; }
  .gr-def { font-size: .38rem; }
}

/* ── Dés ─────────────────────────────────────────────────── */

.de-de {
  width: 56px; height: 56px; border-radius: 12px; background: var(--fond-2);
  border: 2px solid var(--trait-fort); box-shadow: var(--ombre);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 7px; cursor: pointer; flex: 0 0 auto;
}
.de-de b { width: 10px; height: 10px; border-radius: 50%; background: var(--encre); align-self: center; justify-self: center; }
.de-de.garde { border-color: var(--accent); background: var(--accent-clair); }
.de-rang { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Patiences : ce que les cartes seules ne portent pas ──── */

.pa-haut { margin-bottom: 22px; align-items: center; }
.pa-ecart { flex: 1 0 18px; }
.pa-compte {
  color: rgba(255, 255, 255, .82); font-size: .74rem; font-weight: 700;
  align-self: center; white-space: nowrap; margin-right: 6px;
}
.pa-talon .ca-carte { cursor: pointer; }
.pa-dechet { min-width: 66px; }
.pa-suites { position: relative; height: 94px; flex: 1 1 auto; min-width: 66px; }
.pa-suites .ca-carte { position: absolute; top: 0; }
.ca-colonne .ca-case.ca-vide { top: 0; }

.pa-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Le résumé écrit de la donne. Il ne s'adresse pas qu'aux robots :
   c'est aussi ce que lit un lecteur d'écran, pour qui un tapis de
   cartes empilées n'est rien d'autre qu'une suite de boîtes. */
.pa-donne {
  margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--encre-3);
  border-left: 3px solid var(--trait-fort); padding-left: 12px;
}
.pa-muet { display: none; }

.pa-aller {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trait);
}
.pa-aller label {
  display: block; font-size: .78rem; font-weight: 700; color: var(--encre-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.pa-aller .cj-champ { width: 9em; }

/* ── Mahjong ─────────────────────────────────────────────── */

/* Le plateau a une taille fixe en pixels, parce que la tortue est
   une disposition et non une grille : les tuiles se chevauchent
   d'une demi-largeur. Il est donc mis à l'échelle en bloc plutôt
   que recomposé. */
/* Le tapis. Les tuiles sont crème : sans fond sombre derrière elles,
   l'empilement se lit mal et le plateau paraît posé sur rien. */
.mj-cadre {
  overflow-x: auto; padding: 20px 16px 24px;
  background: linear-gradient(158deg, #14653f, #0a4a2e);
  border-radius: 16px; box-shadow: inset 0 2px 16px rgba(0, 0, 0, .34);
}
.mj-plateau {
  position: relative; width: 720px; height: 496px; margin: 0 auto;
  transform-origin: top left;
}

/* Une tuile de mah-jong est un petit parallélépipède, pas une carte.
   La première ombre dessine son épaisseur en aplat, la seconde son
   arête, la troisième l'ombre portée sur ce qu'il y a dessous. */
.mj-tuile {
  position: absolute; width: 48px; height: 62px; padding: 0;
  border: 1px solid #c9b998; border-radius: 7px;
  background: linear-gradient(152deg, #fffefa 0%, #f7f0dd 52%, #ece0c3 100%);
  box-shadow:
    4px 5px 0 #d2c2a0,
    5px 6px 0 1px #a3906e,
    7px 10px 12px rgba(0, 0, 0, .32);
  display: flex; align-items: center; justify-content: center;
  cursor: default; color: #2a2118;
  font: 400 1.85rem/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", sans-serif;
}

/* Une tuile coincée est dans l'ombre des autres : un voile sombre dit
   cela bien mieux qu'une désaturation, qui donnait au plateau un air
   de damier gris et crème. */
.mj-tuile:not(.mj-libre)::before {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background: rgba(38, 28, 12, .17); pointer-events: none;
}
.mj-tuile.mj-libre { cursor: pointer; }
.mj-tuile.mj-libre:hover { background: linear-gradient(152deg, #fff, #fdf6e4 60%, #f4ead2); }

.mj-tuile.mj-choisie {
  outline: 3px solid var(--ambre); outline-offset: -1px;
  background: linear-gradient(152deg, #fff8de, #ffe6a8);
}
.mj-tuile.mj-indice { outline: 3px solid var(--menthe); outline-offset: -1px; }
.mj-tuile.mj-partie { display: none; }
.mj-signe { pointer-events: none; position: relative; }

/* Le plateau a une taille fixe en pixels : la tortue est une
   disposition, pas une grille, et les tuiles se chevauchent d'une
   demi-largeur. On la met à l'échelle en bloc plutôt que de la
   recomposer, et la hauteur réservée suit le facteur appliqué. */
@media (max-width: 820px) {
  .mj-cadre { padding: 14px 10px 18px; }
  .mj-plateau { transform: scale(.66); width: 720px; height: 328px; margin: 0; }
}
@media (max-width: 560px) {
  .mj-plateau { transform: scale(.46); width: 720px; height: 229px; }
}

/* ── Mots fléchés ────────────────────────────────────────── */

.fl-plateau { overflow-x: auto; padding-bottom: 8px; }
.fl-grille .gr-case { width: 66px; height: 66px; }
.fl-grille .gr-case input { font-size: 1.3rem; }

/* Une case porteuse loge une ou deux définitions. Deux, c'est une
   moitié de case chacune, séparées par un filet : sans lui, on ne
   sait plus où finit la première. */
/* Une grille, et non une boîte flexible en ligne : la définition est
   du texte courant, qui doit se répartir sur plusieurs lignes. Mise
   en flex, la flèche, le texte et le nombre de lettres devenaient
   trois colonnes côte à côte et le texte se retrouvait comprimé dans
   un tiers de case, donc coupé. */
.fl-def {
  display: grid; grid-auto-rows: 1fr;
  background: var(--fond-3); padding: 0;
}
.fl-cl {
  display: block; align-self: center; overflow: hidden;
  font-weight: 600; font-size: .62rem; line-height: 1.15; text-transform: none;
  color: var(--encre-2); text-align: left; padding: 2px 4px;
  /* Sans ces deux lignes, un mot plus large que la case déborde et se
     fait rogner au lieu de passer à la ligne. */
  overflow-wrap: anywhere; hyphens: auto;
}
.fl-cl + .fl-cl { border-top: 1px solid var(--trait-fort); }
.fl-def:has(.fl-cl + .fl-cl) .fl-cl { font-size: .53rem; line-height: 1.1; }
.fl-cl i { font-style: normal; color: var(--accent); font-weight: 800; margin-right: 2px; }
.fl-cl b { color: var(--encre-3); font-weight: 700; margin-left: 3px; }
.fl-boutons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 720px) {
  .fl-grille .gr-case { width: 48px; height: 48px; }
  .fl-grille .gr-case input { font-size: 1rem; }
  .fl-cl { font-size: .4rem; }
  .fl-def:has(.fl-cl + .fl-cl) .fl-cl { font-size: .34rem; }
}

/* Sélecteur de taille de grille, partagé avec les mots croisés. */
.mc-tailles { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--fond-3); }
.mc-taille {
  padding: 5px 13px; border-radius: 999px; text-decoration: none;
  font-size: .82rem; font-weight: 700; color: var(--encre-2);
}
.mc-taille:hover { background: var(--fond-2); }
.mc-taille.actif { background: var(--accent); color: #fff; }

/* Texte réservé aux lecteurs d'écran */
.cj-lu {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Impression ──────────────────────────────────────────── */

@media print {
  .cj-entete, .cj-fil, .cj-pied, .cj-jeu-barre, .cj-evite,
  .cj-suggestions, .cj-message, .no-print,
  .fl-boutons, .pa-aller, .pa-modes { display: none !important; }
  /* La grille fléchée part à l'imprimante en noir sur blanc, cases
     vides : c'est la façon dont ce jeu se pratique sur papier. */
  .fl-grille .gr-case { border-color: #000; }
  .fl-grille .gr-case input { color: #000; }
  .fl-def { background: #eee; }
  .fl-cl { color: #000; }
  .fl-cl i { color: #000; }
  body { background: #fff; color: #000; font-size: 12pt; background-image: none; }
  .cj-jeu { border: 0; box-shadow: none; padding: 0; }
  .cj-jeu::before { display: none; }
  .cj-texte h2::before { display: none; }
  a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}