/* MindCraft — thèmes visuels.
   Créations originales : aucun logo, personnage ni visuel protégé.
   Chaque thème redéfinit les variables de style.css et ajoute quelques décors.
   Les classes s'appliquent au <body> (page entière) ou à un aperçu (.theme-preview). */

/* ============================================================
   BLOCS — monde en cubes et en pixels
   ============================================================ */
.theme-blocs {
  --bg: #9fd3f2;
  --surface: #f6f0e1;
  --surface-2: #e7dcc4;
  --text: #2a1f14;
  --muted: #5c4a36;
  --border: #4a3420;
  --primary: #3c8d2f;
  --primary-text: #ffffff;
  --danger: #b3261e;
  --late: #b3261e;
  --radius: 0px;
  --shadow: 4px 4px 0 rgba(42, 31, 20, .35);
  --heading-font: ui-monospace, "DejaVu Sans Mono", "Courier New", monospace;
  color-scheme: light;
  background-color: var(--bg);
  color: var(--text);
}
body.theme-blocs {
  /* Nuages carrés originaux sur un ciel bleu. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='.85'%3E%3Crect x='40' y='30' width='64' height='16'/%3E%3Crect x='24' y='46' width='112' height='16'/%3E%3Crect x='208' y='96' width='48' height='16'/%3E%3Crect x='192' y='112' width='96' height='16'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#8fcbf0, #c9e8f8 60%);
  background-attachment: fixed;
}
.theme-blocs .topbar {
  /* Bandeau herbe + terre en pixels. */
  background:
    linear-gradient(#5cae3c 0 14px, transparent 14px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23866043'/%3E%3Crect x='0' y='0' width='8' height='8' fill='%23966c4b'/%3E%3Crect x='16' y='8' width='8' height='8' fill='%23735037'/%3E%3Crect x='8' y='16' width='8' height='8' fill='%23966c4b'/%3E%3Crect x='24' y='24' width='8' height='8' fill='%23735037'/%3E%3Crect x='24' y='0' width='8' height='8' fill='%23735037'/%3E%3C/svg%3E");
  border-bottom: 4px solid #3b2a19;
  padding-top: 1.3rem;
}
.theme-blocs .topbar, .theme-blocs .topnav > a, .theme-blocs .topnav .nav-menu > summary, .theme-blocs .brand { color: #fff8e6; }
.theme-blocs .brand { font-family: var(--heading-font); letter-spacing: .04em; text-shadow: 3px 3px 0 #2a1f14; }
.theme-blocs .brand span { color: #9fe36b; }
.theme-blocs .topnav > a, .theme-blocs .topnav .nav-menu > summary { font-family: var(--heading-font); text-shadow: 2px 2px 0 #2a1f14; }
.theme-blocs h1, .theme-blocs h2, .theme-blocs .profile-name, .theme-blocs .hw-title {
  font-family: var(--heading-font); letter-spacing: .02em;
}
.theme-blocs h1 { text-transform: uppercase; text-shadow: 3px 3px 0 rgba(42, 31, 20, .2); }
.theme-blocs .card, .theme-blocs .hw-item, .theme-blocs .profile-card, .theme-blocs fieldset {
  border: 3px solid var(--border);
  background-image: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
}
.theme-blocs .btn {
  border: 3px solid var(--border);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.22), inset 4px 4px 0 rgba(255,255,255,.35);
  font-family: var(--heading-font);
}
.theme-blocs .btn:active { box-shadow: inset 4px 4px 0 rgba(0,0,0,.22); }
.theme-blocs .btn-primary { background: #4fa83a; }
.theme-blocs .avatar { border-radius: 0; box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), inset 4px 4px 0 rgba(255,255,255,.3); }
.theme-blocs .tag, .theme-blocs .pill, .theme-blocs .status, .theme-blocs input, .theme-blocs select,
.theme-blocs textarea, .theme-blocs .flash { border-radius: 0; }
.theme-blocs .flash { border: 3px solid var(--border); }
.theme-blocs .group-title { font-family: var(--heading-font); color: #2a1f14; background: #e7dcc4; display: inline-block; padding: .15rem .6rem; border: 3px solid var(--border); }
.theme-blocs .font-tools button { border-radius: 0; }

/* ============================================================
   NINJA — style manga japonais (motifs traditionnels)
   ============================================================ */
.theme-ninja {
  --bg: #fbf4e6;
  --surface: #fffbf3;
  --surface-2: #f3e7d1;
  --text: #1b1a2b;
  --muted: #5d5868;
  --border: #1b1a2b;
  --primary: #e2531a;
  --primary-text: #ffffff;
  --danger: #b4232c;
  --late: #b4232c;
  --info-bg: #e3e8f6;
  --info-text: #23305e;
  --radius: 6px;
  --shadow: 6px 6px 0 #23305e;
  --heading-font: "Noto Serif", "DejaVu Serif", Georgia, serif;
  color-scheme: light;
  background-color: var(--bg);
  color: var(--text);
}
body.theme-ninja {
  /* Vagues « seigaiha », motif japonais traditionnel. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cg fill='none' stroke='%2323305e' stroke-opacity='.07' stroke-width='2'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Ccircle cx='0' cy='15' r='28'/%3E%3Ccircle cx='60' cy='15' r='28'/%3E%3C/g%3E%3C/svg%3E");
}
.theme-ninja .topbar {
  background: #23305e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 30 Q15 10 30 30 T60 30 T90 30 T120 30' fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='3'/%3E%3C/svg%3E");
  border-bottom: 5px solid var(--primary);
}
.theme-ninja .brand, .theme-ninja .topnav > a, .theme-ninja .topnav .nav-menu > summary { color: #fffbf3; }
.theme-ninja .brand { font-family: var(--heading-font); font-weight: 900; letter-spacing: .04em; }
.theme-ninja .brand span { color: #ff8a3d; }
.theme-ninja h1, .theme-ninja h2, .theme-ninja .profile-name { font-family: var(--heading-font); font-weight: 900; }
.theme-ninja h1 {
  display: inline-block; padding-bottom: .25rem;
  /* Trait de pinceau orange sous les titres. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C40 2 90 11 140 5 S190 6 198 4' fill='none' stroke='%23e2531a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") bottom left / 100% 10px no-repeat;
}
.theme-ninja .card, .theme-ninja .hw-item, .theme-ninja .profile-card, .theme-ninja fieldset { border: 2px solid var(--border); }
.theme-ninja .profile-card { border-top-width: 6px; }
.theme-ninja .btn { border: 2px solid var(--border); box-shadow: 3px 3px 0 var(--border); font-weight: 800; }
.theme-ninja .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); }
.theme-ninja .btn-ghost { box-shadow: none; }
.theme-ninja .group-title { color: #23305e; font-family: var(--heading-font); letter-spacing: .12em; }
.theme-ninja .group-title::before { content: "◆ "; color: var(--primary); }
.theme-ninja .avatar { border: 3px solid var(--border); }

/* ============================================================
   ROLLER HOCKEY — patinoire, palet et crosse
   --team = couleur du profil (choisie dans l'espace Parent)
   ============================================================ */
.theme-roller {
  --team: #2e6fd8;
  --bg: #e9f0f6;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #121a26;
  --muted: #56637a;
  --border: #c9d4e2;
  --primary: color-mix(in srgb, var(--team) 82%, #000);
  --primary-text: #ffffff;
  --danger: #c62828;
  --late: #c62828;
  --radius: 22px;
  --shadow: 0 2px 0 #c9d4e2, 0 10px 24px rgba(18, 26, 38, .08);
  --heading-font: system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
  background-color: var(--bg);
  color: var(--text);
}
body.theme-roller {
  /* Lignes de la piste : ligne centrale et cercles d'engagement. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' stroke-opacity='.10' stroke-width='4'%3E%3Cline x1='200' y1='0' x2='200' y2='400' stroke='%23c62828'/%3E%3Ccircle cx='200' cy='200' r='70' stroke='%231d4ed8'/%3E%3Cline x1='0' y1='0' x2='0' y2='400' stroke='%231d4ed8'/%3E%3C/g%3E%3Ccircle cx='200' cy='200' r='6' fill='%23c62828' fill-opacity='.18'/%3E%3C/svg%3E");
}
.theme-roller .topbar {
  /* Tableau d'affichage. */
  background: #0e1624;
  border-bottom: 6px solid var(--team);
}
.theme-roller .brand, .theme-roller .topnav > a, .theme-roller .topnav .nav-menu > summary { color: #f2f6fb; }
.theme-roller .brand {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace; text-transform: uppercase; letter-spacing: .12em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--team) 70%, #fff);
}
.theme-roller .brand span { color: color-mix(in srgb, var(--team) 55%, #fff); }
.theme-roller h1, .theme-roller h2, .theme-roller .profile-name {
  font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
}
.theme-roller .card, .theme-roller .hw-item, .theme-roller .profile-card {
  border: 2px solid var(--border); border-bottom: 5px solid var(--team);
}
.theme-roller .btn { border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: .9rem; }
.theme-roller .group-title {
  display: inline-block; background: #0e1624; color: #f2f6fb; padding: .2rem .8rem; border-radius: 6px;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
}
.theme-roller .group-title.late { background: #c62828; color: #fff; }
.theme-roller .hw-title::before { content: "🏒 "; }

/* ============================================================
   Images personnalisées (bannière et mascotte générées par IA)
   ============================================================ */
.theme-banner {
  height: clamp(90px, 18vw, 180px);
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--border);
}
.mascot { width: 4.5rem; height: 4.5rem; object-fit: contain; flex: none; }

/* ============================================================
   Choix du thème (aperçus)
   ============================================================ */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.theme-option { position: relative; display: block; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; }
.theme-preview {
  border-radius: 14px; overflow: hidden; border: 3px solid transparent; height: 100%;
  background-color: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.theme-option input:checked + .theme-preview { border-color: #2e6fd8; outline: 3px solid rgba(46,111,216,.35); }
.theme-option input:focus-visible + .theme-preview { outline: 3px solid #2e6fd8; }
.theme-preview .topbar { padding: .5rem .8rem; }
.theme-preview .brand { font-size: 1rem; }
.theme-preview-body { padding: .9rem; display: flex; flex-direction: column; gap: .6rem; color: var(--text); }
.theme-preview-body .hw-item { padding: .6rem .7rem; }
.theme-preview-body .btn { min-height: 2rem; padding: .3rem .7rem; font-size: .85rem; }
.theme-preview h3 { margin: 0; font-family: var(--heading-font, inherit); }
.theme-preview p { margin: 0; font-size: .88rem; color: var(--muted); }
.theme-preview .theme-banner { height: 70px; }