/* ==========================================================================
   TubeNotes — feuille de style
   --------------------------------------------------------------------------
   Sommaire
   1. Variables (couleurs, rayons, ombres)  -> c'est ici qu'on change le look
   2. Base (body, titres)
   3. Barre du haut
   4. Boutons
   5. Bannière d'avertissement
   6. Recherche
   7. Filtres (puces, tri)
   8. Grille des cartes (responsive)
   9. Carte vidéo (miniature, titre, tags)
   10. Notes (style post-it)
   11. Gestion des catégories
   12. État vide
   13. Modales (fenêtre / panneau mobile)
   14. Formulaires
   15. Bouton flottant mobile
   16. Toast et pied de page
   17. Adaptations mobile
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* --------------------------------------------------------------------------
   1. Variables
   --paper      fond général (crème)
   --card       fond des cartes (blanc)
   --ink        texte principal
   --muted      texte secondaire
   --line       bordures
   --accent     couleur principale (rouge brique)
   --note-bg    fond des notes (jaune post-it)
   --note-edge  bord gauche des notes
   --ok / --warn / --info  couleurs des statuts Notée / À voir / Référence
   -------------------------------------------------------------------------- */
:root {
  --paper: oklch(0.972 0.012 85);
  --card: oklch(1 0 0);
  --ink: oklch(0.27 0.02 50);
  --muted: oklch(0.52 0.02 50);
  --line: oklch(0.89 0.015 80);
  --accent: oklch(0.54 0.17 28);
  --accent-hover: oklch(0.49 0.17 28);
  --accent-soft: oklch(0.54 0.17 28 / 0.1);
  --note-bg: oklch(0.965 0.045 95);
  --note-edge: oklch(0.83 0.11 95);
  --ok: oklch(0.55 0.12 150);
  --warn: oklch(0.66 0.13 70);
  --info: oklch(0.5 0.1 270);
  --radius: 12px;
  --shadow: 0 1px 2px oklch(0.3 0.02 50 / 0.06), 0 2px 8px oklch(0.3 0.02 50 / 0.07);
  --shadow-hover: 0 2px 4px oklch(0.3 0.02 50 / 0.08), 0 6px 18px oklch(0.3 0.02 50 / 0.1);
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; }

.app { min-height: 100vh; padding: 16px clamp(12px, 3vw, 40px) 90px; max-width: 1500px; margin: 0 auto; }
.loading { display: grid; place-items: center; min-height: 60vh; color: var(--muted); }

/* ---------- 3. Barre du haut ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 44px; height: 44px; flex-shrink: 0;
  object-fit: contain; display: block;
}
.brand h1 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -0.3px; }
.brand h1 em { font-style: normal; color: var(--accent); }
.topbar-actions { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }

/* ---------- 4. Boutons ---------- */
.btn {
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  border-radius: 10px; padding: 10px 16px; min-height: 44px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn.sm { padding: 7px 12px; min-height: 38px; font-size: 14px; }
.btn.wide { width: 100%; justify-content: center; }
.btn.danger:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 5. Bannière d'avertissement ---------- */
.banner {
  background: oklch(0.95 0.05 85); border: 1.5px solid oklch(0.8 0.1 85);
  color: var(--ink); border-radius: 10px; padding: 11px 14px;
  font-size: 14px; line-height: 1.55; margin-bottom: 12px;
}

.banner.offline { background: oklch(0.94 0.03 250); border-color: oklch(0.78 0.07 250); }

/* ---------- 6. Recherche ---------- */
.searchbar { position: sticky; top: 0; z-index: 20; background: var(--paper); padding: 8px 0 10px; margin: 0 0 6px; }
.searchbar .inner { position: relative; }
.search-input {
  width: 100%; padding: 14px 46px 14px 46px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 999px; outline: none;
  box-shadow: var(--shadow); transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--muted); }
.search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.clear-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--paper); color: var(--muted); cursor: pointer; font-size: 15px;
}
.clear-btn:hover { color: var(--ink); }
.clear-btn.static { position: static; transform: none; background: transparent; }

/* ---------- 7. Filtres ---------- */
.filters { margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.spacer { flex: 1; min-width: 8px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; min-height: 38px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  white-space: nowrap; transition: all 0.15s;
}
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.status { --chip-color: var(--muted); }
.chip.status.active { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }
.sort-select {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 12px; min-height: 38px; cursor: pointer; outline: none;
}

/* ---------- 8. Grille : 1 colonne mobile, 2 tablette, fluide desktop ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 641px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }

/* ---------- 9. Carte vidéo ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: box-shadow 0.15s;
}
.card:hover { box-shadow: var(--shadow-hover); }

.thumb {
  position: relative; display: block; aspect-ratio: 16/9; overflow: hidden;
  background: oklch(0.92 0.01 80);
  border: none; padding: 0; width: 100%; cursor: pointer; /* la miniature est un bouton : clic = lecture intégrée */
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 38px; color: #fff; background: oklch(0 0 0 / 0.22);
  opacity: 0; transition: opacity 0.15s;
}
.thumb:hover .play { opacity: 1; }
/* Lecteur YouTube intégré (remplace la miniature pendant la lecture) */
.player { position: relative; aspect-ratio: 16/9; background: #000; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-close {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  border: none; border-radius: 50%; cursor: pointer;
  background: oklch(0 0 0 / 0.65); color: #fff; font-size: 15px;
}
.player-close:hover { background: oklch(0 0 0 / 0.85); }

.thumb-cat {
  position: absolute; top: 10px; left: 10px; font-size: 12.5px; font-weight: 700;
  background: oklch(1 0 0 / 0.92); color: var(--ink);
  padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow);
}

.card-body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-head h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; }
.card-head a { color: var(--ink); text-decoration: none; }
.card-head a:hover { color: var(--accent); }
.status-pill {
  flex-shrink: 0; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 5px 12px; min-height: 30px; border-radius: 999px;
  border: none; background: var(--chip-color); color: #fff;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }

/* ---------- 10. Notes ---------- */
.notes { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-notes.muted { color: var(--muted); font-style: italic; margin: 0; font-size: 14.5px; }
.note {
  background: var(--note-bg); border-left: 4px solid var(--note-edge);
  border-radius: 6px; padding: 10px 12px 6px;
}
.note-text { margin: 0 0 4px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-tools { display: flex; justify-content: flex-end; gap: 2px; }
.note-tools button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 7px 9px; min-width: 36px; min-height: 34px; border-radius: 7px;
}
.note-tools button:hover:not(:disabled) { background: oklch(0.9 0.06 95); color: var(--ink); }
.note-tools button:disabled { opacity: 0.25; cursor: default; }
.note-tools button.danger:hover { color: var(--accent); }
.note-edit textarea, .note-add textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 9px;
  padding: 11px 13px; outline: none; resize: vertical; min-height: 72px;
}
.note-edit textarea:focus, .note-add textarea:focus { border-color: var(--accent); }
.note-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.note-add { display: flex; flex-direction: column; gap: 7px; }
.note-add-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.note-add-hint { font-size: 12.5px; color: var(--muted); }
.ts-link {
  color: var(--accent); text-decoration: none; font-weight: 700;
  background: oklch(1 0 0 / 0.65); padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}
.ts-link:hover { background: #fff; }

.card-actions { display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }

/* ---------- 10 bis. Vue compacte ---------- */
.grid.list { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; gap: 10px; }
.card-compact { padding: 10px 14px; gap: 8px; }
.compact-head { display: flex; align-items: center; gap: 11px; }
.compact-thumb { width: 76px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.compact-title { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.compact-title a { color: var(--ink); text-decoration: none; }
.compact-title a:hover { color: var(--accent); }
.compact-notes { display: flex; flex-direction: column; gap: 5px; margin: 8px 2px 2px; }
.note-text.compact {
  background: var(--note-bg); border-left: 4px solid var(--note-edge);
  border-radius: 6px; padding: 7px 10px; margin: 0; font-size: 14px;
}

/* Bouton réduire / déplier d'une carte */
.card-head-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.collapse-btn {
  width: 32px; height: 30px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--muted);
  font-size: 16px; font-weight: 700; line-height: 1;
}
.collapse-btn:hover { border-color: var(--muted); color: var(--ink); }

/* ---------- 10 ter. Résultats de recherche YouTube ---------- */
.yt-results { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.yt-result {
  display: flex; align-items: center; gap: 11px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.yt-thumb { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.yt-meta { flex: 1; min-width: 0; }
.yt-title {
  margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-channel { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.yt-known { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .yt-thumb { width: 78px; }
}

.cache-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Historique des recherches mémorisées */
.search-history { display: flex; flex-direction: column; gap: 6px; }
.history-title { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; }
.history-title .hint { font-weight: 400; color: var(--muted); }
.history-row { display: flex; align-items: stretch; gap: 6px; }
.history-open {
  flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
}
.history-open:hover { border-color: var(--accent); }
.history-query {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-meta { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.history-del {
  width: 38px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  background: var(--card); color: var(--muted); font-size: 13px;
}
.history-del:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 11. Gestion des catégories ---------- */
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
}
.cat-name { font-size: 15px; font-weight: 700; }
.cat-count { font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 1px 9px; border-radius: 999px; margin-left: 7px; }
.cat-rename { flex: 1; font: inherit; font-size: 15px; color: var(--ink); background: var(--card); border: 1.5px solid var(--accent); border-radius: 8px; padding: 8px 11px; outline: none; min-width: 0; }

/* ---------- 12. État vide ---------- */
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 56px 20px; }
.empty-icon { font-size: 44px; margin: 0 0 10px; }
.empty p { margin: 4px 0; }
.empty-hint { font-size: 14.5px; max-width: 460px; margin: 8px auto 0; }

/* ---------- 13. Modales : fenêtre sur desktop, panneau plein écran sur mobile ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: oklch(0.25 0.02 50 / 0.4);
  display: grid; place-items: center; padding: 16px; z-index: 50; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 580px; background: var(--card);
  border-radius: var(--radius); padding: 20px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-hover);
}
@media (max-width: 640px) {
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal {
    max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    animation: sheetUp 0.22s ease-out;
  }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 21px; font-weight: 700; }

/* ---------- 14. Formulaires ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.form .hint { font-weight: 400; color: var(--muted); }
.form input, .form textarea, .form select {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 9px;
  padding: 12px 13px; min-height: 46px; outline: none; resize: vertical; width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); background: var(--card); }
.form input:disabled { opacity: 0.55; }
.form-preview { width: 100%; max-width: 240px; border-radius: 9px; border: 1px solid var(--line); }
.form-err { color: var(--accent); font-size: 14px; font-weight: 700; margin: 0; line-height: 1.5; }
.hint-block { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.note-add-inline { display: flex; gap: 7px; }
.note-add-inline input { flex: 1; min-width: 0; }

/* ---------- 15. Bouton flottant mobile ---------- */
.fab {
  display: none; position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 30px; cursor: pointer;
  box-shadow: 0 4px 14px oklch(0.54 0.17 28 / 0.45); z-index: 40;
}
.fab:active { transform: scale(0.95); }

/* ---------- 16. Toast et pied de page ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); border-radius: 10px;
  padding: 11px 20px; font-size: 15px; font-weight: 700; z-index: 100;
  box-shadow: var(--shadow-hover); animation: toastIn 0.2s ease-out; max-width: 92vw;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.foot { margin-top: 40px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---------- 17. Adaptations mobile ---------- */
@media (max-width: 640px) {
  .app { padding-bottom: 110px; }
  .topbar-actions .btn { padding: 8px 12px; font-size: 14px; min-height: 40px; }
  .btn.add-desktop { display: none; }   /* remplacé par le bouton flottant */
  .fab { display: grid; place-items: center; }
  .brand h1 { font-size: 21px; }
  .card-head h3 { font-size: 17px; }
  .compact-thumb { width: 62px; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}