/* ============================================================
   Mots Croisés des Civilisations — Thème Islam
   Palette : vert émeraude profond, or, ivoire
   ============================================================ */

:root {
  --vert-fonce: #0b4235;
  --vert: #14654f;
  --vert-clair: #1d8a6c;
  --or: #c9a227;
  --or-clair: #e8c95c;
  --ivoire: #faf6ec;
  --creme: #f3ecd9;
  --encre: #22302b;
  --rouge: #c0392b;
  --ok: #2e9e6b;
  --ombre: 0 10px 30px rgba(11, 66, 53, .18);
  --rayon: 16px;
  --rayon-case: 6px;
  --symbole: "✦";
}

/* ===== Variantes de thème ===== */
/* Christianisme : bordeaux, or pâle, ivoire rosé — cases arrondies */
body[data-theme="christianisme"] {
  --vert-fonce: #46162b;
  --vert: #6e2340;
  --vert-clair: #94355a;
  --or: #b98b3f;
  --or-clair: #dcb56b;
  --ivoire: #fbf5ef;
  --creme: #f3e6da;
  --symbole: "✝";
  --rayon-case: 14px;
}
/* Judaïsme : bleu nuit, bleu ciel, blanc cassé — cases carrées */
body[data-theme="judaisme"] {
  --vert-fonce: #10264a;
  --vert: #1c3f79;
  --vert-clair: #2d5aa9;
  --or: #7fa8dd;
  --or-clair: #b3ccf0;
  --ivoire: #f6f9fd;
  --creme: #e6edf8;
  --symbole: "✡";
  --rayon-case: 2px;
}
/* Industrialisation : anthracite, cuivre, papier — cases nettes */
body[data-theme="industrialisation"] {
  --vert-fonce: #2b2725;
  --vert: #4a423c;
  --vert-clair: #6e6156;
  --or: #c96f2b;
  --or-clair: #e89a55;
  --ivoire: #f7f4f0;
  --creme: #ebe5dd;
  --symbole: "⚙";
  --rayon-case: 4px;
}
/* Capitales : bleu océan, orange soleil — esprit voyage */
body[data-theme="capitales"] {
  --vert-fonce: #0e3a5c;
  --vert: #155d8a;
  --vert-clair: #2a7fb5;
  --or: #e8a13c;
  --or-clair: #f4c26e;
  --ivoire: #f4f9fc;
  --creme: #e2edf6;
  --symbole: "✈";
  --rayon-case: 9px;
}
/* Civilisation romaine : pourpre impériale, or des lauriers, marbre */
body[data-theme="romaine"] {
  --vert-fonce: #4e1233;
  --vert: #772045;
  --vert-clair: #9b3a63;
  --or: #c19a3d;
  --or-clair: #e0c069;
  --ivoire: #faf7f0;
  --creme: #f0e9dc;
  --symbole: "🏛";
  --rayon-case: 5px;
}
body[data-theme="romaine"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M12 12h48v12H48V36h12v12H48v12h12M12 24h24v36H12V48h12V36H12z' fill='none' stroke='%234e1233' stroke-width='2'/%3E%3C/svg%3E");
}

/* Révolution française : bleu roi, rouge tricolore, ivoire */
body[data-theme="revolution"] {
  --vert-fonce: #1c2f6b;
  --vert: #27408f;
  --vert-clair: #3a57b5;
  --or: #c8384a;
  --or-clair: #e56b7b;
  --ivoire: #f9f7f2;
  --creme: #efeadf;
  --symbole: "⚑";
  --rayon-case: 6px;
}
/* Fleuves d'Europe : bleu-vert d'eau, sable doré — cases très douces */
body[data-theme="fleuves"] {
  --vert-fonce: #0b3d4c;
  --vert: #12606f;
  --vert-clair: #1f8496;
  --or: #d9a441;
  --or-clair: #ecc478;
  --ivoire: #f2f9fa;
  --creme: #dfeef0;
  --symbole: "≈";
  --rayon-case: 12px;
}
body[data-theme="revolution"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='16' fill='none' stroke='%231c2f6b' stroke-width='2'/%3E%3Ccircle cx='35' cy='35' r='9' fill='none' stroke='%23c8384a' stroke-width='2'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%231c2f6b'/%3E%3C/svg%3E");
}
body[data-theme="fleuves"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 12q10 -8 20 0t20 0t20 0t20 0M0 28q10 -8 20 0t20 0t20 0t20 0' fill='none' stroke='%230b3d4c' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-theme="industrialisation"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Ccircle cx='34' cy='34' r='12' fill='none' stroke='%232b2725' stroke-width='2'/%3E%3Cpath d='M34 16v-6M34 58v-6M16 34h-6M58 34h-6M21 21l-4-4M51 51l-4-4M47 21l4-4M17 51l4-4' stroke='%232b2725' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-theme="capitales"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Ccircle cx='38' cy='38' r='20' fill='none' stroke='%230e3a5c' stroke-width='1.5'/%3E%3Cellipse cx='38' cy='38' rx='9' ry='20' fill='none' stroke='%230e3a5c' stroke-width='1.5'/%3E%3Cpath d='M18 38h40M21 28h34M21 48h34' stroke='%230e3a5c' stroke-width='1.5'/%3E%3C/svg%3E");
}
body[data-theme="christianisme"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 12v40M20 26h24' fill='none' stroke='%2346162b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body[data-theme="judaisme"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 10L56 44H16z' fill='none' stroke='%2310264a' stroke-width='1.5'/%3E%3Cpath d='M36 62L16 28h40z' fill='none' stroke='%2310264a' stroke-width='1.5'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Nunito', sans-serif;
  color: var(--encre);
  background:
    radial-gradient(circle at 15% 10%, rgba(201,162,39,.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(20,101,79,.10), transparent 45%),
    var(--ivoire);
  min-height: 100vh;
}

/* Motif géométrique discret */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .05; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 4l8 20 20 8-20 8-8 20-8-20-20-8 20-8z' fill='none' stroke='%230b4235' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ===== En-tête ===== */
.entete {
  position: relative; z-index: 1;
  text-align: center;
  padding: 26px 16px 14px;
  background: linear-gradient(135deg, var(--vert-fonce), var(--vert));
  color: var(--ivoire);
  border-bottom: 4px solid var(--or);
}
.entete-titre { display: flex; align-items: center; justify-content: center; gap: 14px; }
.entete h1 { font-family: 'Marcellus', serif; font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: .5px; }
.ornement { color: var(--or-clair); font-size: 1.2rem; animation: scintille 3s ease-in-out infinite; }
@keyframes scintille { 0%,100% { opacity:.5; transform:scale(1);} 50% { opacity:1; transform:scale(1.25);} }
.sous-titre { margin-top: 6px; opacity: .85; font-size: clamp(.8rem, 2.5vw, 1rem); }

/* ===== Barre de jeu ===== */
.barre-jeu {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 18px auto 0; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.score-bloc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score-label { font-weight: 700; color: var(--vert-fonce); }
.score-valeur { font-weight: 800; font-size: 1.15rem; color: var(--or); background: var(--vert-fonce); padding: 4px 14px; border-radius: 999px; }
.progression { width: 160px; height: 10px; background: var(--creme); border-radius: 999px; overflow: hidden; border: 1px solid rgba(11,66,53,.15); }
.progression-barre { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--vert-clair), var(--or)); transition: width .6s cubic-bezier(.22,1,.36,1); }

.boutons { display: flex; gap: 10px; align-items: center; }
.btn {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem;
  padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,66,53,.25); }
.btn:active { transform: translateY(0); }
.btn-or { background: linear-gradient(135deg, var(--or), var(--or-clair)); color: var(--vert-fonce); }
.btn-contour { background: transparent; color: var(--vert-fonce); border: 2px solid var(--vert); }
.btn-rond { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--creme); border: 1px solid rgba(11,66,53,.2); font-size: 1.1rem; }
.btn-large { font-size: 1.05rem; padding: 13px 30px; margin-top: 18px; }

/* ===== Plateau ===== */
.plateau {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 18px auto 30px; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr);
  gap: 24px; align-items: start;
}

.grille-conteneur {
  position: relative;
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: clamp(8px, 2vw, 18px); border: 1px solid rgba(201,162,39,.35);
}

/* Bouton flottant de choix de série (thème Capitales) */
.btn-series {
  display: none;
  position: absolute; top: -14px; right: -14px; z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid var(--or); background: var(--vert-fonce); color: #fff;
  font-size: 1.35rem; cursor: pointer; box-shadow: var(--ombre);
  align-items: center; justify-content: center;
  transition: transform .25s ease;
  animation: flotte 3s ease-in-out infinite;
}
@keyframes flotte { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }
.btn-series:hover { transform: rotate(18deg) scale(1.12); animation: none; }
.btn-series.visible { display: flex; }

/* Liste des séries de pays */
.liste-series {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  text-align: left; margin: 8px 0 4px;
  max-height: 52vh; overflow-y: auto; padding-right: 4px;
}
.serie-item {
  border: 2px solid rgba(0,0,0,.08); background: #fff; border-radius: 12px;
  padding: 10px 14px; cursor: pointer; font-family: 'Nunito', sans-serif;
  font-size: .92rem; text-align: left;
  transition: border-color .15s, transform .15s;
}
.serie-item:hover { border-color: var(--or); transform: translateX(4px); }
.serie-item.active { border-color: var(--or); background: var(--creme); }
.serie-item b { color: var(--vert-fonce); }
.serie-item small { color: #77837d; display: block; margin-top: 2px; line-height: 1.35; }
.grille {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  aspect-ratio: 1;
}
.case { position: relative; border-radius: var(--rayon-case); }
.case.noire {
  background:
    linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert) 100%);
  background-size: cover;
  opacity: .92;
}
.case.noire::after {
  content: var(--symbole); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(232,201,92,.28); font-size: clamp(8px, 1.6vw, 14px);
}
.case input {
  width: 100%; height: 100%;
  border: 2px solid #d8cfae; border-radius: var(--rayon-case);
  background: var(--creme);
  text-align: center; text-transform: uppercase;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: clamp(12px, 2.6vw, 22px);
  color: var(--encre); caret-color: var(--or);
  outline: none; transition: background .2s, border-color .2s, transform .15s;
}
.case input:focus { border-color: var(--or); background: #fff; box-shadow: 0 0 0 3px rgba(201,162,39,.25); }
.case input:hover:not(:disabled) { transform: scale(1.05); }

.numero {
  position: absolute; top: 2px; left: 4px; z-index: 2;
  font-size: clamp(7px, 1.3vw, 11px); font-weight: 800; color: var(--vert);
  pointer-events: none;
}

/* mot en surbrillance (indice cliqué) */
.case input.survol { background: #fdf3d0; border-color: var(--or-clair); }

/* mot trouvé */
.case input.trouve {
  background: linear-gradient(135deg, var(--ok), #48c088);
  border-color: var(--ok); color: #fff;
  animation: eclat .6s ease;
}
@keyframes eclat {
  0% { transform: scale(.6) rotate(-8deg); }
  60% { transform: scale(1.15) rotate(3deg); box-shadow: 0 0 18px rgba(201,162,39,.8); }
  100% { transform: scale(1); }
}

/* mot révélé via le bouton réponses */
.case input.revele { background: #efe6c8; border-color: var(--or); color: var(--vert-fonce); }

/* erreur */
.case input.erreur { background: #fbe3e0; border-color: var(--rouge); color: var(--rouge); animation: secousse .4s ease; }
@keyframes secousse {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); }
}

/* ===== Indices ===== */
.indices {
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 18px 20px; border: 1px solid rgba(201,162,39,.35);
  display: flex; flex-direction: column; gap: 14px;
  max-height: 640px; overflow-y: auto;
}
.indices h2 {
  font-family: 'Marcellus', serif; font-size: 1.05rem; color: var(--vert-fonce);
  border-bottom: 2px solid var(--or-clair); padding-bottom: 5px; margin-bottom: 8px;
}
.indices ul { list-style: none; }
.indices li {
  padding: 7px 10px; border-radius: 8px; font-size: .92rem; line-height: 1.35;
  cursor: pointer; transition: background .15s;
}
.indices li:hover { background: var(--creme); }
.indices li b { color: var(--vert); margin-right: 4px; }
.indices li.fait { color: #9aa39f; text-decoration: line-through; }
.indices li.fait::after { content: " ✔"; color: var(--ok); text-decoration: none; display: inline-block; }

/* ===== Pied ===== */
.pied { text-align: center; padding: 10px 16px 26px; color: #6b7a74; font-size: .85rem; position: relative; z-index: 1; }

/* ===== Modales ===== */
.modale-fond {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(11, 40, 33, .6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; opacity: 1; transition: opacity .3s;
}
.modale-fond.cachee { opacity: 0; pointer-events: none; }
.modale {
  position: relative;
  background: var(--ivoire); border-radius: 20px;
  border-top: 6px solid var(--or);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: 34px 30px 28px; max-width: 520px; width: 100%;
  text-align: center;
  animation: apparait .45s cubic-bezier(.22,1.4,.36,1);
  max-height: 88vh; overflow-y: auto;
}
@keyframes apparait { from { transform: translateY(30px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.modale h2 { font-family: 'Marcellus', serif; color: var(--vert-fonce); font-size: 1.6rem; margin-bottom: 12px; }
.modale-texte { line-height: 1.55; margin-bottom: 12px; color: #3d4d47; }
.modale-fermer {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #8a958f;
  transition: color .15s, transform .15s;
}
.modale-fermer:hover { color: var(--rouge); transform: rotate(90deg); }
.modale-motif { font-size: 1.4rem; color: var(--or); letter-spacing: 8px; margin-bottom: 4px; }
.modale-motif::before { content: var(--symbole) "  " var(--symbole) "  " var(--symbole); }

.medaille { font-size: 3rem; animation: rebond 1s ease infinite alternate; }
.medaille.grande { font-size: 4rem; }
@keyframes rebond { from { transform: translateY(0);} to { transform: translateY(-8px);} }
.mot-trouve {
  font-family: 'Marcellus', serif; font-size: 2rem; letter-spacing: 6px;
  color: var(--or); background: var(--vert-fonce);
  border-radius: 12px; padding: 10px 16px; margin: 10px 0 14px;
}

/* cartes de thème */
.themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 4px; }
.theme-carte {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border-radius: 14px; cursor: pointer;
  border: 2px solid rgba(11,66,53,.15); background: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem; color: var(--encre);
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.theme-carte .theme-icone { font-size: 1.6rem; }
.theme-carte.active { border-color: var(--or); box-shadow: 0 0 0 3px rgba(201,162,39,.3); background: linear-gradient(160deg, #fff, #fdf6de); }
.theme-carte:not(.verrou):hover { transform: translateY(-3px); }
.theme-carte.verrou { opacity: .5; cursor: not-allowed; }
.theme-carte small { color: #8a958f; font-weight: 600; }

/* Sous-choix de série (ex. : religions) dans la modale de bienvenue */
.sous-themes { margin: 10px 0 2px; animation: apparait .35s ease; }
.sous-themes.cachee { display: none; }
.sous-themes .petite { margin-bottom: 8px; font-size: .92rem; }
.sous-choix { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sous-choix button {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid rgba(0,0,0,.12); background: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .92rem; color: var(--encre);
  transition: transform .15s, border-color .2s, box-shadow .2s, background .2s;
}
.sous-choix button:hover { transform: translateY(-2px); border-color: var(--or); }
.sous-choix button.actif {
  border-color: var(--or); background: var(--creme);
  box-shadow: 0 0 0 3px rgba(201,162,39,.28);
}

/* liste des réponses */
.liste-reponses { text-align: left; display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.liste-reponses .rep {
  background: #fff; border: 1px solid rgba(201,162,39,.4); border-left: 5px solid var(--or);
  border-radius: 10px; padding: 9px 12px; font-size: .92rem; line-height: 1.4;
}
.liste-reponses .rep b { color: var(--vert-fonce); letter-spacing: 1px; }
.liste-reponses .rep span { color: #55655e; }
.modale-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ===== Confettis ===== */
#confettis { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px;
  animation: tombe linear forwards;
}
@keyframes tombe {
  to { transform: translateY(110vh) rotate(720deg); opacity: .2; }
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .plateau { grid-template-columns: 1fr; }
  .indices { max-height: none; }
  .barre-jeu { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .themes { grid-template-columns: 1fr 1fr; }
  .btn { font-size: .85rem; padding: 9px 14px; }
  .grille { gap: 2px; }
  .modale { padding: 26px 18px 22px; }
}