:root{
    --bg: #12141c;
    --surface: #1a1e2b;
    --surface-2: #232838;
    --card: #f8f4ea;
    --card-line: #e4dcc8;
    --accent: #e2a640;
    --accent-dark: #b9822f;
    --velvet: #b5433c;
    --text-light: #f4f0e4;
    --text-dim: #a9a7ad;
    --text-dark: #24222a;
    --text-dark-soft: #57545f;
    --pegi3: #4c8c62;
    --pegi7: #3d8f9d;
    --pegi12: #d38a3d;
    --pegi16: #c25a3a;
    --pegi18: #8f2e2e;
    --age-ok: #4c8c62;
    --age-soon: #d38a3d;
    --age-limit: #c25a3a;
    --age-banned: #6a3486;
    --radius: 10px;
    --shadow: 0 8px 24px rgba(0,0,0,0.35);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: var(--text-light);
    min-height:100vh;
  }
  .brand-font{
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.03em;
  }

  /* ---------- Header ---------- */
  header{
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    padding: 14px 22px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    position: sticky;
    top:0;
    z-index: 50;
    flex-wrap: wrap;
    gap: 10px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
  }
  .logo svg{ flex-shrink:0; }
  .user-bar{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  select, .btn, input[type=text], input[type=number], textarea{
    font-family: inherit;
    font-size: 14px;
  }
  #profileSelect{
    background: var(--surface-2);
    color: var(--text-light);
    border: 1px solid #3a3f52;
    padding: 8px 14px;
    border-radius: 999px;
    cursor:pointer;
    font-weight:600;
  }
  .age-badge{
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent);
    color: #241a05;
    font-weight: 700;
  }
  .profile-icon{
    font-size: 20px;
    line-height: 1;
  }

  /* ---------- Styles visuels choisis librement par chaque profil ---------- */
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=MedievalSharp&family=Orbitron:wght@600;800&family=Rajdhani:wght@600;700&family=Quicksand:wght@500;700&display=swap');
  body{
    transition: background 0.4s ease, color 0.3s ease;
  }

  /* 🌌 Espace (thème par défaut) */
  body.visual-space{ /* garde les variables de :root telles quelles */ }

  /* 🧪 Labo : ambiance techno/labo, cyan sur fond très sombre */
  body.visual-tech{
    --accent: #26c6da;
    --accent-dark: #1a97a8;
    --bg: #0a1416;
    --surface: #0e1c1f;
    --surface-2: #123035;
    font-family: 'Orbitron', sans-serif;
    background-color: #0a1416;
    background-image:
      repeating-linear-gradient(0deg, rgba(38,198,218,0.06) 0px, rgba(38,198,218,0.06) 2px, transparent 2px, transparent 5px),
      radial-gradient(circle at 50% 0%, rgba(38,198,218,0.14), transparent 55%);
    background-attachment: fixed;
  }
  body.visual-tech .modal h2, body.visual-tech .logo{ font-family:'Orbitron', sans-serif; letter-spacing:0.04em; }

  /* 🏁 Vitesse : rouge/carbone, bandes diagonales */
  body.visual-racing{
    --accent: #e0533f;
    --accent-dark: #b8402f;
    --bg: #1a1210;
    --surface: #201613;
    --surface-2: #291c18;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    background-color: #1a1210;
    background-image:
      linear-gradient(180deg, rgba(26,18,16,0.2) 0%, rgba(26,18,16,0.8) 100%),
      repeating-linear-gradient(135deg, rgba(224,83,63,0.10) 0px, rgba(224,83,63,0.10) 14px, transparent 14px, transparent 64px);
    background-attachment: fixed;
  }
  body.visual-racing .tab-btn, body.visual-racing .btn{ text-transform: uppercase; letter-spacing: 0.04em; }

  /* 🌿 Nature : doux, vert, arrondi */
  body.visual-nature{
    --accent: #6cbf5a;
    --accent-dark: #4f9a40;
    --bg: #11190f;
    --surface: #162013;
    --surface-2: #1c2a18;
    font-family: 'Quicksand', sans-serif;
    background-color: #11190f;
    background-image:
      radial-gradient(circle at 10% 10%, rgba(108,191,90,0.14), transparent 40%),
      radial-gradient(circle at 90% 30%, rgba(108,191,90,0.10), transparent 45%),
      radial-gradient(circle at 30% 90%, rgba(108,191,90,0.12), transparent 40%);
    background-attachment: fixed;
  }

  /* ☀️ Clair : thème lumineux, minimal */
  body.visual-light{
    --bg: #eef1f5;
    --surface: #ffffff;
    --surface-2: #f2f4f8;
    --text-light: #20242c;
    --text-dim: #6b7280;
    --accent: #2f9e8f;
    --accent-dark: #22796d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
  }
  body.visual-light #profileSelect,
  body.visual-light .toolbar input[type=text],
  body.visual-light .toolbar select{ border-color:#d7dbe3; }
  body.visual-light .btn.ghost{ border-color:#d7dbe3; }

  /* 🧱 Blocs : ambiance pixel/blocs (façon jeu de construction) */
  body.visual-blocks{
    --accent: #6cbf5a;
    --accent-dark: #4f9a40;
    --bg: #10190f;
    --surface: #142016;
    --surface-2: #1a2a1c;
    font-family: 'Silkscreen', monospace;
    background-color: #10190f;
    background-image:
      linear-gradient(180deg, rgba(16,25,15,0.2) 0%, rgba(16,25,15,0.75) 100%),
      repeating-linear-gradient(90deg, rgba(108,191,90,0.08) 0px, rgba(108,191,90,0.08) 26px, transparent 26px, transparent 52px),
      repeating-linear-gradient(0deg, rgba(108,191,90,0.08) 0px, rgba(108,191,90,0.08) 26px, transparent 26px, transparent 52px);
    background-attachment: fixed;
  }
  body.visual-blocks .btn, body.visual-blocks .tab-btn, body.visual-blocks .tag-pill{ border-radius: 3px; }

  /* 🕹️ Rétro Arcade : synthwave néon */
  body.visual-retro{
    --accent: #ff2fd8;
    --accent-dark: #c91fab;
    --bg: #140a29;
    --surface: #1c1140;
    --surface-2: #26185a;
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    background-color: #140a29;
    background-image:
      linear-gradient(180deg, #1a0f3a 0%, #3a1550 60%, #140a29 100%),
      repeating-linear-gradient(90deg, rgba(255,47,216,0.06) 0px, rgba(255,47,216,0.06) 1px, transparent 1px, transparent 40px);
    background-attachment: fixed;
  }
  body.visual-retro .btn, body.visual-retro .tab-btn.active{ box-shadow: 0 0 12px rgba(255,47,216,0.6); }

  /* 🏰 Médiéval : parchemin, ornementé */
  body.visual-fantasy{
    --accent: #c9992f;
    --accent-dark: #a3791f;
    --bg: #1a140d;
    --surface: #22190f;
    --surface-2: #2c2113;
    font-family: 'MedievalSharp', cursive;
    background-color: #1a140d;
    background-image:
      radial-gradient(circle at 50% 0%, rgba(201,153,47,0.10), transparent 60%),
      linear-gradient(180deg, rgba(26,20,13,0.2) 0%, rgba(26,20,13,0.85) 100%);
    background-attachment: fixed;
  }
  body.visual-fantasy .modal h2, body.visual-fantasy .logo{ font-family:'MedievalSharp', cursive; }
  body.visual-fantasy .modal{ border: 2px solid var(--accent); }

  .btn{
    background: var(--accent);
    color: #241a05;
    border:none;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor:pointer;
    transition: transform 0.1s ease, background 0.15s ease;
  }
  .btn:hover{ background: var(--accent-dark); }
  .btn:active{ transform: scale(0.97); }
  .btn.ghost{
    background: transparent;
    border: 1px solid #4a4f62;
    color: var(--text-light);
  }
  .btn.ghost:hover{ background: var(--surface-2); }
  .btn.small{ padding: 6px 12px; font-size: 13px; }
  .btn.danger{ background: var(--velvet); color: #fff; }

  /* ---------- Tabs ---------- */
  .tab-bar{
    max-width: 1650px;
    margin: 20px auto 0;
    padding: 0 22px;
    display:flex;
    gap: 6px;
  }
  .tab-btn{
    background: var(--surface);
    color: var(--text-dim);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    display:flex;
    align-items:center;
    gap: 8px;
  }
  .tab-btn .count{
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 700;
  }
  .tab-btn.active{
    background: var(--surface);
    color: var(--accent);
    border-bottom: 3px solid var(--accent);
  }
  .tab-btn.active .count{ background: var(--accent); color:#241a05; }

  /* ---------- Layout ---------- */
  main{
    max-width: 1650px;
    margin: 0 auto;
    padding: 20px 22px 60px;
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
  }
  .toolbar{
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 16px;
    display:flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
  }
  .toolbar .field{
    display:flex;
    flex-direction: column;
    gap: 4px;
  }
  .toolbar label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
  }
  .toolbar input[type=text], .toolbar select{
    background: var(--surface);
    border: 1px solid #3a3f52;
    color: var(--text-light);
    padding: 8px 10px;
    border-radius: 6px;
    min-width: 150px;
  }
  .toolbar .checkline{
    display:flex;
    align-items:center;
    gap: 6px;
    margin-top: 18px;
    font-size: 14px;
    color: var(--text-dim);
  }
  .spacer{ flex:1; }

  .child-notice{
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 16px;
  }

  /* ---------- Tag bar (raccourcis au-dessus du tableau) ---------- */
  .tag-bar{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  .tag-pill{
    background: var(--surface-2);
    border: 1px solid #3a3f52;
    color: var(--text-light);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .tag-pill:hover{ border-color: var(--accent); color: var(--accent); }
  .tag-pill.active{ background: var(--accent); border-color: var(--accent); color:#241a05; font-weight:700; }

  /* ---------- Tags cliquables dans la colonne du tableau ---------- */
  .tag-chip{
    display:inline-block;
    line-height: 12px;
    font-size: 80%;
    padding: 2px 7px;
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--text-dark-soft);
    border-radius: 25px;
    margin: 2px 3px 2px 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .tag-chip:hover{
    background-color: var(--accent);
    color: #241a05;
    transform: scale(1.06);
  }
  .tags-cell{
    max-width: 220px;
    white-space: normal;
  }

  /* ---------- Table ---------- */
  .table-wrap{
    background: var(--card);
    border-radius: var(--radius);
    overflow: auto;
    box-shadow: var(--shadow);
  }
  table{
    border-collapse: collapse;
    width: 100%;
    min-width: 980px;
    color: var(--text-dark);
  }
  thead th{
    background: #efe8d6;
    text-align: left;
    padding: 12px 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dark-soft);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border-bottom: 2px solid var(--card-line);
    position: sticky;
    top: 0;
  }
  thead th:hover{ color: var(--accent-dark); }
  thead th .arrow{ font-size:10px; opacity:0.6; margin-left:4px; }
  tbody td{
    padding: 12px 14px;
    border-bottom: 1px solid var(--card-line);
    font-size: 14px;
    vertical-align: top;
  }
  tbody tr:hover{ background: #f1ecdd; }
  tbody tr.watched-row{ opacity: 0.55; }
  .summary-cell{
    max-width: 320px;
    color: var(--text-dark-soft);
    font-size: 13px;
  }
  .pegi-badge{
    display:inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
  }
  .status-select{
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--card-line);
    background: #fff;
    font-size: 13px;
    color: var(--text-dark);
  }
  .status-vu{ background:#e4efe6; }
  .status-a_voir{ background:#eaf1fb; }
  .status-en_cours{ background:#fdeed2; }
  .status-nul{ background:#fbe8e6; }
  .status-trop_tot{ background:#faf1de; }
  .star-rating{
    display:flex;
    gap: 2px;
    white-space: nowrap;
  }
  .star{
    cursor:pointer;
    font-size: 16px;
    line-height:1;
    color: var(--card-line);
    transition: color 0.15s ease, transform 0.1s ease;
  }
  .star.filled{ color: var(--accent); }
  .star:hover{ color: var(--accent); transform: scale(1.15); }
  .rating-disabled{
    color: var(--text-dim);
    font-size: 13px;
  }
  .empty-state{
    padding: 40px;
    text-align:center;
    color: var(--text-dark-soft);
  }

  /* ---------- Modal ---------- */
  .overlay{
    position: fixed;
    inset:0;
    background: rgba(10,10,14,0.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index: 100;
    padding: 20px;
  }
  .overlay.open{ display:flex; }
  .modal{
    background: var(--card);
    color: var(--text-dark);
    border-radius: var(--radius);
    padding: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 86vh;
    overflow:auto;
    box-shadow: var(--shadow);
  }
  .modal h2{
    margin-top:0;
    font-family: Georgia, serif;
  }
  .modal .form-row{
    margin-bottom: 14px;
    display:flex;
    flex-direction: column;
    gap: 5px;
  }
  .modal label{
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dark-soft);
  }
  .modal input, .modal select, .modal textarea{
    padding: 9px 10px;
    border: 1px solid var(--card-line);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--text-dark);
  }
  .modal textarea{ resize: vertical; min-height: 60px; }
  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    margin-top: 20px;
  }
  .profile-list{
    display:flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }
  .profile-row{
    display:flex;
    align-items:center;
    justify-content: space-between;
    background:#fff;
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: 8px 12px;
  }
  .profile-row .meta{ font-size: 12px; color: var(--text-dark-soft); }
  hr.sep{ border:none; border-top: 1px solid var(--card-line); margin: 18px 0; }

  .theme-picker{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .theme-swatch{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap: 4px;
    background:#fff;
    border: 2px solid var(--card-line);
    border-radius: 8px;
    padding: 10px 4px;
    cursor:pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
  }
  .theme-swatch:hover{ border-color: var(--accent); transform: scale(1.03); }
  .theme-swatch.active{ border-color: var(--accent); background: #fdf6e6; }
  .theme-swatch-icon{ font-size: 20px; }
  .theme-swatch-label{ font-size: 11px; color: var(--text-dark-soft); text-align:center; }

  @media (max-width: 640px){
    header{ padding: 12px 14px; }
    .tab-bar{ padding: 0 12px; }
    main{ padding: 16px 12px 50px; }
    .toolbar{ padding: 12px; }
  }