/* =====================================================================
   CIR Play — thèmes d'arrière-plan (créations originales du CIR)
   Appliqués sur l'écran projeté (body) et sur l'écran de jeu des élèves.
   Tout est dessiné en CSS / SVG : aucune image externe à charger.
   ===================================================================== */

/* ---------- CIR (par défaut, clair) ---------- */
.theme-cir {
  background-color: #f3f4f8;
  background-image: radial-gradient(circle at 1px 1px, rgba(30, 42, 114, .08) 1px, transparent 0);
  background-size: 28px 28px;
}

/* ---------- Plage ---------- */
.theme-plage {
  background-color: #53c3f2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q15 2 30 10 T60 10 T90 10 T120 10 V16 H0Z' fill='%23ffffff' opacity='.75'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 300 132'%3E%3Cpath d='M0 120 C30 80 60 52 105 56 C140 60 160 36 200 48 C240 60 270 92 300 120Z' fill='%232f9e6b'/%3E%3Cpath d='M40 120 C70 90 100 76 140 80 C180 84 200 70 240 90 C260 100 280 112 290 120Z' fill='%23247f55'/%3E%3Cpath d='M196 50 C193 36 200 22 198 10' stroke='%236b4a2b' stroke-width='4' fill='none'/%3E%3Cpath d='M198 10 c-14 -4 -24 4 -30 12 c10 -6 20 -6 30 -12z M198 10 c12 -6 24 -2 30 6 c-10 -4 -20 -2 -30 -6z M198 10 c-2 -10 4 -16 12 -18 c-6 6 -8 12 -12 18z M198 10 c-4 -8 -12 -12 -20 -10 c8 2 14 6 20 10z' fill='%23238a4f'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 9% 3% at 22% 14%, rgba(255, 255, 255, .95) 60%, transparent 62%),
    radial-gradient(ellipse 6% 2.4% at 27% 12%, rgba(255, 255, 255, .95) 60%, transparent 62%),
    radial-gradient(ellipse 8% 2.6% at 64% 22%, rgba(255, 255, 255, .85) 60%, transparent 62%),
    radial-gradient(circle at 84% 15%, #fff9d6 0 3.2%, #ffd45e 3.3% 5.6%, rgba(255, 212, 94, .3) 5.7% 9%, transparent 9.1%),
    linear-gradient(180deg, #53c3f2 0%, #b6ebff 46%, #25bfc9 46%, #0f9db0 63%, #f9e3ad 63%, #f1cc84 100%);
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 22px, 34% auto, auto, auto, auto, auto, auto;
  background-position: left bottom 36%, left 3% bottom 54%, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* ---------- Espace ---------- */
.theme-espace {
  background-color: #0a0f33;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cellipse cx='100' cy='64' rx='92' ry='18' fill='none' stroke='%23ffd166' stroke-width='6' opacity='.85'/%3E%3Ccircle cx='100' cy='60' r='44' fill='%23e05a2b'/%3E%3Cpath d='M64 48 q36 -12 74 0' stroke='%23f08a5d' stroke-width='7' fill='none' opacity='.7'/%3E%3Cpath d='M58 66 q42 10 84 0' stroke='%23b8431c' stroke-width='6' fill='none' opacity='.6'/%3E%3Cpath d='M8 64 a92 18 0 0 0 184 0' fill='none' stroke='%23ffd166' stroke-width='6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%2340c9e8'/%3E%3Cpath d='M22 40 q14 -8 28 2 q14 10 30 0' stroke='%232a97b8' stroke-width='8' fill='none'/%3E%3Cpath d='M18 62 q20 8 40 -2 q12 -6 26 2' stroke='%23ffffff' stroke-width='5' fill='none' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(circle at 20px 30px, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 70px 90px, rgba(255, 255, 255, .8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 130px 50px, #fff 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 160px 140px, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 30% 20%, #2a3a8f 0%, #141c50 45%, #070b26 100%);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-size: 22% auto, 7% auto, 180px 180px, 180px 180px, 180px 180px, 180px 180px, cover;
  background-position: right 4% bottom 6%, left 8% top 14%, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* ---------- Savane (coucher de soleil) ---------- */
.theme-savane {
  background-color: #ff8a50;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 V70 C60 56 120 62 180 58 C260 52 320 64 400 56 V110Z' fill='%232b1a2e'/%3E%3Cpath d='M86 62 v-34' stroke='%232b1a2e' stroke-width='4'/%3E%3Cpath d='M86 40 l-14 -10 M86 36 l12 -10' stroke='%232b1a2e' stroke-width='3'/%3E%3Cellipse cx='86' cy='24' rx='36' ry='8' fill='%232b1a2e'/%3E%3Cpath d='M310 60 v-26' stroke='%232b1a2e' stroke-width='3.5'/%3E%3Cellipse cx='310' cy='32' rx='26' ry='6' fill='%232b1a2e'/%3E%3Cpath d='M200 58 l6 -14 l4 6 l4 -10 l4 18z' fill='%232b1a2e'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 70%, #fff1b8 0 10%, #ffd36b 10.2% 12%, rgba(255, 211, 107, .25) 12.2% 20%, transparent 20.2%),
    linear-gradient(180deg, #ffb347 0%, #ff7e5f 45%, #c2547a 75%, #6b2f5e 100%);
  background-repeat: no-repeat;
  background-size: 100% 38%, auto, auto;
  background-position: left bottom, 0 0, 0 0;
}

/* ---------- Circuit électronique ---------- */
.theme-circuit {
  background-color: #0b3328;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231f7a5a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 30 H50 L70 50 H120'/%3E%3Cpath d='M30 160 V120 L50 100 V70'/%3E%3Cpath d='M160 90 H120 L100 110 V160'/%3E%3Cpath d='M90 0 V20 L110 40 H160'/%3E%3C/g%3E%3Cg fill='%232fb07f'%3E%3Ccircle cx='120' cy='50' r='5'/%3E%3Ccircle cx='50' cy='70' r='5'/%3E%3Ccircle cx='100' cy='110' r='5'/%3E%3Ccircle cx='90' cy='20' r='4'/%3E%3C/g%3E%3Crect x='60' y='120' width='26' height='18' rx='3' fill='%23113f32' stroke='%232fb07f' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, #15523f 0%, #0b3328 60%, #06221a 100%);
  background-size: 200px 200px, cover;
  background-repeat: repeat, no-repeat;
}

/* ---------- Néon ---------- */
.theme-neon {
  background-color: #12002e;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 46, 136, .55) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(0deg, rgba(0, 229, 255, .45) 0 2px, transparent 2px 46px),
    radial-gradient(circle at 50% 52%, #ffe14d 0 9%, #ff8a3d 12%, #ff2e88 15%, rgba(255, 46, 136, .35) 15.2% 22%, transparent 22.2%),
    linear-gradient(180deg, #12002e 0%, #3a0a5e 50%, #1a0638 50.2%, #12002e 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 48%, 100% 48%, auto, auto;
  background-position: bottom, bottom, 0 0, 0 0;
}

/* ---------- Forêt ---------- */
.theme-foret {
  background-color: #bfe8ff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 V70 C50 40 100 50 150 60 C210 72 250 30 310 40 C350 46 380 60 400 56 V120Z' fill='%237cc576'/%3E%3Cpath d='M0 120 V88 C60 70 120 80 180 86 C240 92 300 70 400 80 V120Z' fill='%233f9a5a'/%3E%3Cpath d='M0 120 V104 C80 96 160 100 240 106 C300 110 360 100 400 102 V120Z' fill='%231f6b3f'/%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 18%, #fffbe0 0 3%, #ffe27a 3.2% 5%, transparent 5.2%),
    linear-gradient(180deg, #9fdcff 0%, #e6f8ff 70%);
  background-repeat: no-repeat;
  background-size: 100% 46%, auto, auto;
  background-position: bottom, 0 0, 0 0;
}

/* ---------- Bonbons ---------- */
.theme-bonbons {
  background-color: #ffe4f1;
  background-image:
    radial-gradient(circle, #ff9ec7 0 7px, transparent 8px),
    radial-gradient(circle, #8fd8ff 0 6px, transparent 7px),
    radial-gradient(circle, #ffe38a 0 5px, transparent 6px),
    linear-gradient(135deg, #ffd6e8 0%, #e8dcff 50%, #d6f5ff 100%);
  background-size: 90px 90px, 90px 90px, 90px 90px, cover;
  background-position: 0 0, 45px 45px, 20px 65px, 0 0;
  background-repeat: repeat, repeat, repeat, no-repeat;
}

/* ---------- Plaques de lisibilité sur les thèmes illustrés ---------- */
.a-theme .titre-scene,
.a-theme .podium-info,
.a-theme .lobby-aide,
.a-theme .liste-vide,
.a-theme .marche-pseudo,
.a-theme .marche-score {
  background: rgba(255, 255, 255, .9);
  border-radius: 14px;
  padding: .12em .7em;
  box-shadow: 0 4px 16px rgba(10, 15, 51, .12);
}
.a-theme .titre-scene { display: table; margin-left: auto; margin-right: auto; }
.a-theme .marche-pseudo, .a-theme .marche-score { display: inline-block; margin-bottom: 4px; }
.a-theme .lobby-aide { display: inline-block; align-self: flex-start; }
.a-theme .barre-nb { padding: 0 .4em; background: rgba(255, 255, 255, .92); border-radius: 10px; margin-bottom: 4px; }
.a-theme .compteur-reponses { padding: 14px 18px; background: rgba(255, 255, 255, .92); border-radius: 18px; }
.a-theme .actions-bas .btn-barre-clair { background: rgba(255, 255, 255, .92); }