/* === Police système moderne === */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

    :root {
      color-scheme: light dark;
    }

    body {
      margin: 0;
    }

    .wrap {
      padding: .75rem;
    }

    /* Conteneur des tuiles : gère le zoom via une variable CSS */
    .tiles {
      --scale: 1;
      font-size: calc(16px * var(--scale));
    }

    .tiles.list {
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }

    .tiles.grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: .75rem;
    }

    .tiles.compact {
      gap: .5rem;
    }

    .tiles.compact .tile {
      padding: .5rem .6rem;
      border-radius: .6rem;
    }

    .tiles.compact .tile .content {
      -webkit-line-clamp: 6;
    }

    .tile {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      padding: .75rem .9rem;
      border: 1px solid #8885;
      border-radius: .8rem;
      background: color-mix(in oklab, Canvas, CanvasText 3%);
      cursor: pointer;
      transition: transform .06s ease, box-shadow .06s ease, background .2s ease, outline-color .2s ease;
      text-align: left;
    }

    .tile:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px #0002;
    }

    .tile.active {
      outline: 2px solid color-mix(in oklab, #18a418 70%, Canvas 30%);
      box-shadow: 0 0 0 4px color-mix(in oklab, #18a418 20%, Canvas 80%);
    }

    /* Utiliser des tailles en em pour que le zoom (.tiles font-size) les agrandisse/reduise */
    .tile h3 {
      margin: 0;
      font-size: 1.125em;
      line-height: 1.2;
      opacity: .9;
    }

    .tile .content {
      white-space: pre-wrap;
      font-size: 1em;
      line-height: 1.45;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 10;
      /* limite visuelle sur petits écrans */
      -webkit-box-orient: vertical;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: .75rem;
      flex-wrap: wrap;
      padding: .6rem .75rem;
      margin-bottom: .5rem;
      background: color-mix(in oklab, Canvas, CanvasText 4%);
      border-bottom: 1px solid #8883;
    }

    .topbar .title {
      font-weight: 600;
      opacity: .9;
    }

    .spacer {
      flex: 1;
    }

    select,
    button,
    input[type="search"],
    input[type="range"],
    label {
      font-size: 14px;
    }

    input[type="search"] {
      padding: .35rem .6rem;
      min-width: 220px;
    }

    .range-wrap {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .toggle-btn {
      background: #eee;
      color: #222;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.15s;
    }

    .toggle-btn:hover {
      background: #ddd;
    }

    .toggle-btn.active {
      background: #007bff;
      color: #fff;
      border-color: #007bff;
    }

    .toggle-btn .icon {
      margin-right: .35rem;
      font-size: 1.05em;
      line-height: 1;
    }

    /* ===== Menu Réglages flottant ===== */
    .settings-btn {
      position: relative;
    }

    .settings-panel {
      position: fixed;
      z-index: 100;
      min-width: 230px;
      padding: .6rem .75rem;
      background: color-mix(in oklab, Canvas, CanvasText 5%);
      border: 1px solid #8884;
      border-radius: .6rem;
      box-shadow: 0 6px 20px #0003;
      display: flex;
      flex-direction: column;
      gap: .45rem;
    }

    .settings-panel[hidden] { display: none; }

    .settings-row {
      display: flex;
      align-items: center;
      gap: .75rem;
      flex-wrap: wrap;
    }

    .settings-row label {
      display: flex;
      align-items: center;
      gap: .35rem;
      cursor: pointer;
      white-space: nowrap;
    }