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

/* ══════════════════════════════════════════════════════
   APPLE tvOS DESIGN SYSTEM
   Références : tvOS 17 — fond sombre saturé, icônes
   grandes et lumineuses, focus ring, top-shelf,
   menu bar minimaliste, mouvement parallaxe subtil.
══════════════════════════════════════════════════════ */
:root {
  --font: 'Figtree', -apple-system, 'SF Pro Display', sans-serif;

  /* tvOS palette */
  --tv-bg:          #0c0c10;
  --tv-glass:       rgba(255,255,255,0.08);
  --tv-glass-md:    rgba(255,255,255,0.13);
  --tv-glass-hv:    rgba(255,255,255,0.20);
  --tv-border:      rgba(255,255,255,0.16);
  --tv-border-hv:   rgba(255,255,255,0.36);
  --tv-shadow:      rgba(0,0,0,0.70);

  --text-1:  rgba(255,255,255,0.96);
  --text-2:  rgba(255,255,255,0.60);
  --text-3:  rgba(255,255,255,0.34);
  --text-4:  rgba(255,255,255,0.18);

  --accent:      #4ea9ff;
  --accent-glow: rgba(78,169,255,0.30);
  --focus-ring:  rgba(255,255,255,0.90);
  --divider:     rgba(255,255,255,0.09);

  /* Radii */
  --r-icon: 22%;   /* coin des icônes : arrondi iOS/tvOS */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-xl:  36px;
  --r-full:9999px;

  /* Transitions tvOS */
  --tr-fast:   0.12s cubic-bezier(.4,0,.2,1);
  --tr-smooth: 0.26s cubic-bezier(.4,0,.2,1);
  --tr-spring: 0.40s cubic-bezier(.34,1.5,.64,1);
  --tr-slow:   0.55s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════
   LIGHT MODE overrides (appliqués via [data-theme="light"])
══════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Palette Apple Notes — crème chaud, paper, brun doux */
  --tv-glass:    rgba(255,252,245,0.72);
  --tv-glass-md: rgba(255,252,245,0.88);
  --tv-glass-hv: rgba(255,255,255,0.96);
  --tv-border:   rgba(180,160,130,0.25);
  --tv-border-hv:rgba(180,160,130,0.45);
  --text-1:  rgba(60,45,30,0.92);
  --text-2:  rgba(80,60,40,0.60);
  --text-3:  rgba(80,60,40,0.38);
  --text-4:  rgba(80,60,40,0.20);
  --divider: rgba(150,120,90,0.12);
  --accent:  #c45a1a;          /* orange brun chaud */
  --focus-ring: rgba(60,45,30,0.60);
}

/* ══════════════════════════════════════════════════════
   RESET & BODY
══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: #080810;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  transition: background var(--tr-slow);
  overflow: hidden;
}

/* Fond de scène statique — pas d'animation */
.env-bg {
  position: fixed; inset: 0; z-index: 0;
  background:url(img/fond.jpg) no-repeat center/cover;
}
[data-theme="light"] body { background: #ede5d8; }
[data-theme="light"] .env-bg {
  background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(255,210,160,0.80) 0%, transparent 65%), radial-gradient(ellipse 70% 80% at 75% 70%, rgba(255,180,140,0.60) 0%, transparent 65%), linear-gradient(160deg, #f5ede0 0%, #efe4d4 40%, #e8d8c8 70%, #f0e8d8 100%);
  background-size: cover;
}

.env-stars { display: none; } /* Pas d'étoiles sur tvOS */

/* ══════════════════════════════════════════════════════
   TABLET — écran tvOS encadré
══════════════════════════════════════════════════════ */
.tablet {
  position: relative; z-index: 10;
  flex-shrink: 0;
  transition: width var(--tr-slow), height var(--tr-slow);
  /* Pas de border-radius ici — tablet-screen gère ses propres coins */
  /* Pas d'overflow:hidden — inutile et cause des bugs */
  /* Pas de filter — désactive le clipping */
}

.tablet-screen {
  width: 100%; height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;          /* clips correctement maintenant */
  display: flex;
  flex-direction: column;
  position: relative;
  background: #080810;
  /* Pas de border — on utilise outline qui ne prend pas de place */
  /* et box-shadow pour l'effet de bordure blanche */
  outline: none;
  box-shadow:
    0 0 0 10px rgba(255,255,255,0.18),   /* bordure blanche simulée */
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 10.5px rgba(0,0,0,0.5),        /* ombre fine autour */
    0 32px 80px rgba(0,0,0,0.75),
    0 8px 24px rgba(0,0,0,0.50);
}
/* Mode jour : style Apple Notes — fond crème, bordure chaude */
[data-theme="light"] .tablet-screen {
  background: #f0e8d8;
  box-shadow:
    0 0 0 10px rgba(255,252,248,0.95),   /* bordure blanche mode jour */
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 10.5px rgba(150,120,80,0.20),
    0 32px 80px rgba(80,50,20,0.25),
    0 8px 24px rgba(80,50,20,0.15);
}

/* ══════════════════════════════════════════════════════
   WALLPAPER — fond plein, PAS d'opacité partielle
══════════════════════════════════════════════════════ */
.wallpaper-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  /* CRUCIAL : opacity 1, aucun filtre parasite */
  opacity: 1;
  filter: none;
}

/* 3 fonds prédéfinis — style tvOS */
.wp-abstract {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(100,60,200,.85) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 80% 15%, rgba(50,120,220,.80) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 60% 85%, rgba(30,160,190,.70) 0%, transparent 65%),
    linear-gradient(145deg, #130830 0%, #080f20 45%, #060c1a 75%, #04060e 100%);
}
.wp-aurora {
  background:
    radial-gradient(ellipse 80% 40% at 50% 20%, rgba(0,180,110,.75) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 70%, rgba(60,180,240,.60) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 60%, rgba(110,60,240,.65) 0%, transparent 60%),
    linear-gradient(180deg, #010c07 0%, #04090f 50%, #060409 100%);
}
.wp-void {
  background:
    radial-gradient(ellipse 50% 40% at 60% 40%, rgba(35,35,75,.80) 0%, transparent 60%),
    linear-gradient(135deg, #030305 0%, #060609 50%, #040405 100%);
}

/* Shapes overlay */
.wallpaper-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.30; }

/* Frost effect — sur le fond seulement, pas d'overlay blanc */
/* ══════════════════════════════════════════════════
   EFFETS DE FOND — 3 effets tendance + Aucun
══════════════════════════════════════════════════ */

/* Aucun effet */
.wallpaper-bg.fx-none { filter: none; }

/* ── Duotone ──────────────────────────────────────
   Inspiré du design editorial Instagram/Spotify
   Aplati en tons chauds, contraste doux            */
.wallpaper-bg.fx-duotone {
  filter: blur(0px) brightness(0.75) saturate(0.3) sepia(0.5);
}
.frost-overlay.fx-duotone {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(80, 0, 120, 0.55) 0%,
    rgba(200, 60, 20, 0.40) 100%
  );
}

/* ── Neon ─────────────────────────────────────────
   Fond très sombre, couleurs qui éclatent
   Look cyberpunk / gaming                          */
.wallpaper-bg.fx-neon {
  filter: brightness(0.30) saturate(3.5) contrast(1.2);
}
.frost-overlay.fx-neon {
  opacity: 1;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(0, 255, 200, 0.10) 0%,
    transparent 60%
  ), radial-gradient(
    ellipse at 75% 40%,
    rgba(180, 0, 255, 0.12) 0%,
    transparent 60%
  );
}

/* ── Matte ────────────────────────────────────────
   Voile opaque doux, désaturation légère
   Look minimaliste Apple/Notion                    */
.wallpaper-bg.fx-matte {
  filter: blur(2px) saturate(0.75) brightness(0.70);
}
.frost-overlay.fx-matte {
  opacity: 1;
  background: rgba(10, 8, 18, 0.52);
}
/* ── Frosted ──────────────────────────────────────
   Verre dépoli — flou fort + voile sombre texturé
   Style iOS Control Center / visionOS             */
.wallpaper-bg.fx-frosted {
  filter: blur(20px) brightness(0.85) saturate(1.4);
}
.frost-overlay.fx-frosted {
  opacity: 1;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(18, 14, 28, 0.42);
  /* Texture givré via bruit CSS */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.06);
}

/* ── Clear ────────────────────────────────────────
   Fond parfaitement net, zéro filtre
   Juste un voile très léger style iOS             */
.wallpaper-bg.fx-clear {
  filter: none;
}
.frost-overlay.fx-clear {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

/* ── Blur ─────────────────────────────────────────
   Flou uniforme doux + voile chaud
   Style One UI Samsung / macOS                    */
.wallpaper-bg.fx-blur {
  filter: blur(28px) brightness(0.90) saturate(1.2);
}
.frost-overlay.fx-blur {
  opacity: 1;
  background: rgba(12,10,20,0.25);
}

[data-theme="light"] .frost-overlay.fx-frosted { background: rgba(235,230,220,0.45); }
[data-theme="light"] .frost-overlay.fx-clear   { background: rgba(255,255,255,0.10); }
[data-theme="light"] .frost-overlay.fx-blur    { background: rgba(240,235,225,0.30); }

/* Transition douce sur le fond */
.frost-overlay {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity 0.4s ease, background 0.4s ease;
}
.frost-overlay.fx-none { opacity: 0; }

/* ══════════════════════════════════════════════════════
   TOP BAR tvOS — statut heure + menu compact
══════════════════════════════════════════════════════ */
.status-bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px 0;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  color: var(--text-2); flex-shrink: 0;
  gap: 12px;
  height: 30px;
}
#clock {
  font-size: 14px; font-weight: normal; letter-spacing: -0.02em;
  color: var(--text-1);
  position: absolute; left: 50%; transform: translateX(-50%);
}
.status-right {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-2); margin-left: auto;
}

/* Ionicons dans les boutons toolbar */
.tv-icon-btn ion-icon,
.toolbar-btn ion-icon {
  font-size: 20px;
  pointer-events: none;
}
/* ctx-item ion-icon */
.ctx-item-icon {
  font-size: 17px; opacity: 0.75; flex-shrink: 0;
  width: 22px; text-align: center;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════
   TOOLBAR tvOS — icônes rondes + barre de recherche compacte
══════════════════════════════════════════════════════ */
.main-area { flex: 1; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; position: relative; z-index: 5; min-height: 0; }

.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 18px 4px;
  flex-shrink: 0;
  position: relative;
}

/* Barre de recherche centrée absolument dans la toolbar */
.toolbar-search-center {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 340px;
}

/* Bouton icône rond — tvOS style, Ionicons */
.tv-icon-btn {
  width: 40px; height: 40px;
  background: var(--tv-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--tv-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
  box-shadow: 0 2px 10px rgba(0,0,0,0.30), inset 0 0.5px 0 rgba(255,255,255,0.18);
  color: var(--text-2);
}
.tv-icon-btn:hover {
  background: var(--tv-glass-hv);
  border-color: var(--tv-border-hv);
  color: var(--text-1);
  transform: scale(1.08);
}
.tv-icon-btn:active { transform: scale(0.92); }
[data-theme="light"] .tv-icon-btn { background: rgba(255,252,245,0.80); border-color: rgba(180,155,120,0.30); color: rgba(60,45,30,0.65); box-shadow: 0 2px 8px rgba(80,50,20,0.10); }
[data-theme="light"] .tv-icon-btn:hover { background: rgba(255,252,245,0.95); color: rgba(60,45,30,0.90); }

/* ══════════════════════════════════════════════════════
   BARRE DE RECHERCHE — même design que tv-icon-btn
══════════════════════════════════════════════════════ */
.grid-search-wrap {
  padding: 2px 18px 4px;
  flex-shrink: 0; position: relative; z-index: 4;
}
.grid-search-inner {
  display: flex; align-items: center; gap: 8px;
  background: var(--tv-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--tv-border);
  border-radius: var(--r-full);       /* pill identique aux boutons ronds */
  padding: 0 14px;
  height: 40px;                        /* exactement la même hauteur que tv-icon-btn */
  box-shadow: 0 2px 10px rgba(0,0,0,0.30), inset 0 0.5px 0 rgba(255,255,255,0.18);
  transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
  /* Pas de max-width fixe ici — c'est le style="flex:1" inline qui contrôle la largeur */
}
.grid-search-inner:focus-within {
  background: var(--tv-glass-md);
  border-color: rgba(78,169,255,0.55);
  box-shadow: 0 0 0 2px rgba(78,169,255,0.18), 0 2px 10px rgba(0,0,0,0.30);
}
.grid-search-icon { font-size: 14px; color: var(--text-3); flex-shrink: 0; display: flex; }
.grid-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  color: var(--text-1); min-width: 0;
}
.grid-search-input::placeholder { color: var(--text-3); }
.grid-search-clear {
  background: rgba(255,255,255,0.18); border: none; color: var(--text-2);
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  font-size: 9px; display: none; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 700;
}
.grid-search-clear.visible { display: flex; }

/* ══════════════════════════════════════════════════════
   PLAY STORE RESULTS — fond glass
══════════════════════════════════════════════════════ */
.grid-search-results {
  padding: 0 18px 6px;
  overflow: hidden; flex-shrink: 0;
  max-height: 0; transition: max-height 0.32s cubic-bezier(.4,0,.2,1);
}
.grid-search-results.open {
  max-height: 220px; overflow-y: auto;
}
.grid-search-results::-webkit-scrollbar { width: 3px; }
.grid-search-results::-webkit-scrollbar-thumb { background: var(--tv-glass-md); border-radius: 2px; }

/* Container glass pour les résultats */
.gsr-container {
  background: rgba(10,8,22,0.72);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.10);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.10);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 6px 10px 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.38), inset 0 0.5px 0 rgba(255,255,255,0.12);
  overflow: hidden;
}
[data-theme="light"] .gsr-container {
  background: rgba(240,238,252,0.90);
  border-color: rgba(255,255,255,0.80);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), inset 0 0.5px 0 rgba(255,255,255,0.95);
}

.gsr-header { font-family: var(--font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 4px 0 6px; display: flex; align-items: center; gap: 6px; }
.gsr-header::after { content: ''; flex: 1; height: 0.5px; background: var(--divider); }
.gsr-section-label { font-family: var(--font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); padding: 3px 0 5px; display: flex; align-items: center; gap: 5px; }
.gsr-item { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: var(--r-sm); transition: background var(--tr-fast); cursor: pointer; }
.gsr-item:hover { background: var(--tv-glass); }
.gsr-icon { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.gsr-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsr-info { flex: 1; min-width: 0; }
.gsr-name { font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--text-1); }
.gsr-dev  { font-family: var(--font); font-size: 9.5px; color: var(--text-3); }
.gsr-score { font-family: var(--font); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
.gsr-btn { margin-left: 4px; border: 0.5px solid var(--tv-border); font-family: var(--font); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); cursor: pointer; flex-shrink: 0; transition: opacity var(--tr-fast); }
.gsr-btn.install { background: rgba(78,169,255,0.16); color: var(--accent); }
.gsr-btn.remove  { background: rgba(255,69,58,0.14); color: #ff6060; border-color: rgba(255,69,58,0.28); }
.gsr-btn:hover { opacity: 0.78; }
.gsr-loading { display: flex; align-items: center; gap: 8px; padding: 8px 6px; font-family: var(--font); font-size: 11px; color: var(--text-3); }
.gsr-spinner { width: 13px; height: 13px; border: 1.5px solid var(--divider); border-top-color: var(--text-2); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gsr-empty { font-family: var(--font); font-size: 11px; color: var(--text-3); padding: 8px 6px; }

/* ══════════════════════════════════════════════════════
   APP GRID — tvOS layout, N lignes fixes via CSS pur
   grid-template-rows fixe les rangées → pas de coupure possible
══════════════════════════════════════════════════════ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 8), 1fr);
  /* grid-template-rows défini inline par JS */
  padding: 6px 20px 8px;
  row-gap: 4px;
  column-gap: 0;
  align-content: start;
  /* overflow:auto → scroll si contenu > hauteur */
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.app-grid::-webkit-scrollbar { display: none; }

/* Drag & drop */
.app-item[draggable="true"] { cursor: grab; }
.app-item[draggable="true"]:active { cursor: grabbing; }
.dock.drag-over {
  outline: 2px dashed rgba(78,169,255,0.60);
  outline-offset: 5px;
  border-radius: 22px;
  background: rgba(78,169,255,0.08);
}

/* Hint de dépôt dock */
.dock-drop-hint {
  display: none;
  align-items: center; justify-content: center;
  padding: 4px 14px;
  font-family: var(--font); font-size: 10px; font-weight: 600;
  color: var(--accent); white-space: nowrap;
  border: 1.5px dashed rgba(78,169,255,0.50);
  border-radius: 12px;
  background: rgba(78,169,255,0.08);
  animation: hintPulse 1.2s ease-in-out infinite;
  margin: 0 4px;
}
@keyframes hintPulse { 0%,100%{opacity:0.55;} 50%{opacity:1;} }

/* ══════════════════════════════════════════════════════
   GRID SCROLL HORIZONTAL PAR PAGES
══════════════════════════════════════════════════════ */

/* Conteneur = tout l'espace restant, centre grille + dots ensemble */
.grid-area-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: -20px; /* décale la grille vers le haut de 20px */
}

.grid-scroll-wrap {
  /* Scroll snap horizontal — une page à la fois */
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* hauteur = contenu exact (calculé en JS via gridTemplateRows) */
  flex-shrink: 0;
  width: 100%;
}
.grid-scroll-wrap::-webkit-scrollbar { display: none; }

.grid-page {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* APP GRID — dans chaque page */
.app-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 6), 1fr);
  padding: 6px 20px 8px;
  row-gap: 4px;
  column-gap: 0;
  align-content: start;
  overflow: hidden;
  width: 100%;
}

/* Indicateurs de page — juste sous la grille */
.page-dots-wrap {
  display: flex; justify-content: center; align-items: center;
  padding: 8px 0 0;
  flex-shrink: 0;
}
.page-dots {
  display: flex; gap: 6px; align-items: center;
}
.page-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.34,1.4,.64,1);
}
.page-dot.active {
  width: 18px; border-radius: 3px;
  background: rgba(255,255,255,0.80);
}
[data-theme="light"] .page-dot        { background: rgba(80,50,20,0.22); }
[data-theme="light"] .page-dot.active { background: rgba(80,50,20,0.65); }
.app-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 2px;
  cursor: pointer; border-radius: var(--r-md);
  position: relative; user-select: none;
  will-change: transform;
  transition: transform var(--tr-fast);
  /* Pas de background au hover — uniquement l'icône réagit */
}

/* Hover : l'icône se soulève seulement, pas de rectangle */
.app-item:hover .app-icon-wrap,
.app-item:hover .default-icon,
.app-item:hover .custom-icon-wrap {
  transform: translateY(-5px) scale(1.08);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.55),
    0 0 24px rgba(78,169,255,0.15);
}

/* Entrance animation — fade uniquement, PAS de translateY qui couperait la grille */
@keyframes tvIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}
.app-item { animation: tvIn 0.30s cubic-bezier(.34,1.4,.64,1) both; }
.app-item:nth-child(1){animation-delay:.00s}.app-item:nth-child(2){animation-delay:.02s}.app-item:nth-child(3){animation-delay:.04s}.app-item:nth-child(4){animation-delay:.06s}.app-item:nth-child(5){animation-delay:.08s}.app-item:nth-child(6){animation-delay:.10s}.app-item:nth-child(7){animation-delay:.12s}.app-item:nth-child(8){animation-delay:.14s}.app-item:nth-child(9){animation-delay:.03s}.app-item:nth-child(10){animation-delay:.05s}.app-item:nth-child(11){animation-delay:.07s}.app-item:nth-child(12){animation-delay:.09s}.app-item:nth-child(13){animation-delay:.11s}.app-item:nth-child(14){animation-delay:.13s}.app-item:nth-child(15){animation-delay:.15s}.app-item:nth-child(16){animation-delay:.17s}.app-item:nth-child(n+17){animation-delay:.19s;}

/* Tap */
@keyframes tvTap {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.86); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.app-item.tapped { animation: tvTap 0.30s cubic-bezier(.34,1.5,.64,1) forwards; }

/* Icon wrappers */
.app-icon-wrap {
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
  transition: transform var(--tr-smooth), box-shadow var(--tr-smooth);
}
.app-icon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.custom-icon-wrap {
  overflow: hidden; flex-shrink: 0; box-shadow: none;
  transition: transform var(--tr-smooth);
}
.custom-icon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* default-icon : icône SVG par défaut — doit être VISIBLE */
.default-icon {
  display: flex; align-items: center; flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: transform var(--tr-smooth), box-shadow var(--tr-smooth);
}

/* Nom d'app tvOS — lisibilité maximale sur tout fond */
.app-name {
  font-family: var(--font);
  font-size: 12px; font-weight: normal;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #ffffff; max-width: 100%;
  transition: color var(--tr-fast);
  /* Double ombre pour lisibilité sur image claire ET sombre */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 1px 6px rgba(0,0,0,0.70),
    0 0 12px rgba(0,0,0,0.50);
}

.remove-btn {
  position: absolute; top: 4px; left: 5px;
  width: 16px; height: 16px; background: #ff453a; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 9px; color: white; cursor: pointer; z-index: 10; font-weight: 700;
  box-shadow: 0 2px 8px rgba(255,69,58,.5);
}
.edit-mode .app-item .remove-btn { display: flex; }

/* ══════════════════════════════════════════════════════
   MODALS — effet flip 3D à l'ouverture
══════════════════════════════════════════════════════ */
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: none; align-items: center; justify-content: center;
  z-index: 100; border-radius: var(--r-xl); padding: 16px;
  /* perspective pour le flip */
  perspective: 1200px;
}
.modal-backdrop.open { display: flex; }

.modal {
  background: rgba(22,18,42,0.92);
  backdrop-filter: blur(50px) saturate(200%) brightness(1.15);
  -webkit-backdrop-filter: blur(50px) saturate(200%) brightness(1.15);
  border-radius: var(--r-lg);
  border: 0.5px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 0.5px rgba(0,0,0,0.55),
    0 28px 70px rgba(0,0,0,0.62),
    0 8px 18px rgba(0,0,0,0.40);
  width: 100%; max-width: 344px; max-height: 90%;
  overflow: hidden; display: flex; flex-direction: column;
}
[data-theme="light"] .modal {
  background: rgba(238,236,252,0.94);
  border-color: rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 28px 70px rgba(0,0,0,0.18);
}

/* ── Animation standard (settings, icon modal…) : scale spring ── */
@keyframes modalScaleIn {
  0%   { opacity:0; transform: scale(0.88) translateY(8px); }
  60%  { opacity:1; transform: scale(1.02) translateY(-2px); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}
.modal-backdrop.open .modal {
  animation: modalScaleIn 0.28s cubic-bezier(.34,1.4,.64,1) both;
}

/* ── Pop-open depuis icône : zoom depuis le bas, style Apple iOS/iPadOS ── */
@keyframes appleIconPop {
  0%   { opacity:0; transform: scale(0.60) translateY(40px); filter: blur(4px); }
  40%  { opacity:1; filter: blur(0); }
  70%  { transform: scale(1.03) translateY(-4px); }
  85%  { transform: scale(0.99) translateY(1px); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}
.modal-backdrop.pop-open .modal {
  animation: appleIconPop 0.42s cubic-bezier(.34,1.36,.64,1) both;
}

/* ── Legend : slide-up depuis le bas, style Apple Control Center ── */
@keyframes appleSlideUp {
  0%   { opacity:0; transform: translateY(100%) scale(0.96); }
  50%  { opacity:1; }
  75%  { transform: translateY(-6px) scale(1.01); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
.modal-backdrop.legend-open .modal {
  animation: appleSlideUp 0.38s cubic-bezier(.32,1.25,.46,1) both;
  transform-origin: bottom center;
}

.modal::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  pointer-events: none;
}

.modal-header {
  padding: 16px 16px 11px;
  border-bottom: 0.5px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-title { font-family: var(--font); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); }
[data-theme="light"] .modal-title { color: rgba(0,0,0,0.88); }
.modal-close {
  background: var(--tv-glass); border: 0.5px solid var(--tv-border); color: var(--text-2);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 700;
  transition: background var(--tr-fast), color var(--tr-fast); flex-shrink: 0;
}
.modal-close:hover { background: var(--tv-glass-hv); color: var(--text-1); }
[data-theme="light"] .modal-close { color: rgba(0,0,0,0.55); }

.modal-body { padding: 13px 16px; overflow-y: auto; flex: 1; }
.modal-body::-webkit-scrollbar { width: 3px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--tv-glass-md); border-radius: 2px; }

/* ══════════════════════════════════════════════════════
   PRIVACY MODAL — Élargi + grande police + score animé
══════════════════════════════════════════════════════ */
#privacyModal .modal { max-width: 520px; }
#legendModal .modal  { max-width: 520px; }

/* Hero */
.priv-hero { display:flex; align-items:center; gap:18px; padding:4px 0 16px; border-bottom:0.5px solid var(--divider); margin-bottom:12px; }
.priv-icon { width:78px; height:78px; border-radius:20px; overflow:hidden; flex-shrink:0; box-shadow:0 6px 24px rgba(0,0,0,0.35); }
.priv-hero-info { flex:1; min-width:0; }
.priv-name { font-family:var(--font); font-size:24px; font-weight:800; color:var(--text-1); letter-spacing:-0.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.priv-dev  { font-family:var(--font); font-size:13px; color:var(--text-3); margin-top:3px; font-weight:500; }
[data-theme="light"] .priv-name { color:rgba(0,0,0,0.88); }
[data-theme="light"] .priv-dev  { color:rgba(0,0,0,0.45); }

/* Catégorie */
.priv-category { display:inline-flex; align-items:center; gap:6px; background:var(--tv-glass); border:0.5px solid var(--divider); border-radius:20px; padding:5px 13px; margin-bottom:12px; font-family:var(--font); font-size:12px; font-weight:600; color:var(--text-2); }
[data-theme="light"] .priv-category { color:rgba(0,0,0,0.55); }

/* Warning */
.priv-warn { display:flex; align-items:center; gap:8px; background:rgba(255,69,58,.10); border:0.5px solid rgba(255,69,58,.25); border-radius:12px; padding:10px 14px; margin-bottom:12px; font-family:var(--font); font-size:13px; color:#ff6a62; font-weight:500; }
.priv-warn ion-icon { font-size:18px; flex-shrink:0; }

/* Score card animé */
.priv-score-card { display:flex; align-items:center; gap:16px; background:var(--tv-glass); border:0.5px solid var(--divider); border-radius:16px; padding:14px 16px; margin-bottom:16px; }
[data-theme="light"] .priv-score-card { background:rgba(0,0,0,0.04); }
.priv-score-left { flex:1; }
.priv-score-label { font-family:var(--font); font-size:15px; font-weight:800; color:var(--text-1); letter-spacing:-0.02em; }
.priv-score-sub   { font-family:var(--font); font-size:11px; color:var(--text-3); margin-top:2px; margin-bottom:8px; }
[data-theme="light"] .priv-score-label { color:rgba(0,0,0,0.82); }
.priv-score-track { height:6px; background:var(--divider); border-radius:3px; overflow:hidden; }
.priv-score-fill  { height:100%; border-radius:3px; }
.priv-score-num   { font-family:var(--font); font-size:52px; font-weight:900; letter-spacing:-0.05em; line-height:1; flex-shrink:0; min-width:76px; text-align:center; }

/* Sections */
.priv-section { margin-bottom:14px; }
.priv-section-title { font-family:var(--font); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); margin-bottom:8px; }
[data-theme="light"] .priv-section-title { color:rgba(0,0,0,0.36); }
.priv-tags { display:flex; flex-wrap:wrap; gap:6px; }
.priv-tag { display:inline-flex; align-items:center; gap:5px; font-family:var(--font); font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; }
.priv-tag ion-icon { font-size:13px; flex-shrink:0; }
.priv-tag.danger { background:rgba(255,59,48,.14); color:#ff6a62; }
.priv-tag.warn   { background:rgba(255,149,0,.12);  color:#ffac40; }
.priv-tag.ok     { background:rgba(52,199,89,.12);  color:#5de087; }
[data-theme="light"] .priv-tag.danger { background:rgba(200,30,20,0.09); color:#cc2200; }
[data-theme="light"] .priv-tag.warn   { background:rgba(180,100,0,0.09); color:#a06000; }
[data-theme="light"] .priv-tag.ok     { background:rgba(20,140,60,0.09); color:#0a7830; }

/* Détails */
.priv-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:0.5px solid var(--divider); }
.priv-row:last-child { border-bottom:none; }
.priv-row-label { font-family:var(--font); font-size:13px; color:var(--text-2); }
.priv-row-val   { font-family:var(--font); font-size:13px; color:var(--text-1); font-weight:700; }
[data-theme="light"] .priv-row-label { color:rgba(0,0,0,0.50); }
[data-theme="light"] .priv-row-val   { color:rgba(0,0,0,0.82); }

/* Alternatives */
.privacy-alt-panel { background:var(--tv-glass); border:0.5px solid var(--divider); border-radius:14px; padding:12px 14px; margin-top:14px; }
[data-theme="light"] .privacy-alt-panel { background:rgba(0,0,0,0.04); }
.privacy-alt-title { font-family:var(--font); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); margin-bottom:10px; }
[data-theme="light"] .privacy-alt-title { color:rgba(0,0,0,0.36); }
.alt-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:0.5px solid var(--divider); cursor:pointer; transition:opacity var(--tr-fast); }
.alt-item:last-child { border-bottom:none; padding-bottom:0; }
.alt-item:hover { opacity:0.75; }
.alt-icon { width:34px; height:34px; border-radius:9px; overflow:hidden; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,0.28); }
.alt-icon img { width:100%; height:100%; object-fit:cover; }
.alt-info { flex:1; }
.alt-name { font-family:var(--font); font-size:13px; font-weight:700; color:var(--text-1); }
.alt-desc { font-family:var(--font); font-size:11px; color:var(--text-3); margin-top:1px; }
.alt-score { font-family:var(--font); font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:rgba(52,199,89,.14); color:#5de087; flex-shrink:0; }
[data-theme="light"] .alt-name  { color:rgba(0,0,0,0.82); }
[data-theme="light"] .alt-score { background:rgba(20,140,60,0.10); color:#0a7830; }
.priv-footer { font-family:var(--font); font-size:10px; color:var(--text-3); text-align:center; padding:10px 0 4px; }

/* Compat legacy */
.section-label { font-family:var(--font); font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin:11px 0 5px; font-weight:700; }
.perm-tag { display:inline-flex; font-family:var(--font); font-size:10px; font-weight:600; padding:3px 8px; border-radius:6px; margin:2px 3px 2px 0; }
.perm-danger { background:rgba(255,59,48,.14); color:#ff6a62; }
.perm-warn   { background:rgba(255,149,0,.12);  color:#ffac40; }
.perm-ok     { background:rgba(52,199,89,.12);  color:#5de087; }
.data-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:0.5px solid var(--divider); font-size:11.5px; }
.data-row:last-child { border-bottom:none; }
.data-row-label { font-family:var(--font); color:var(--text-2); }
.data-row-val   { font-family:var(--font); color:var(--text-1); font-weight:600; }
/* ══════════════════════════════════════════════════════
   CONTEXT MENU tvOS
══════════════════════════════════════════════════════ */
.ctx-menu {
  position: fixed;
  background: rgba(28,22,52,0.94);
  backdrop-filter: blur(44px) saturate(200%);
  -webkit-backdrop-filter: blur(44px) saturate(200%);
  border-radius: 17px; border: 0.5px solid rgba(255,255,255,0.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 22px 56px rgba(0,0,0,0.58), 0 5px 14px rgba(0,0,0,0.38);
  overflow: hidden; z-index: 9999; min-width: 205px;
  animation: tvCtxIn 0.18s cubic-bezier(.34,1.4,.64,1);
  transform-origin: top left;
}
[data-theme="light"] .ctx-menu { background: rgba(238,236,254,0.95); border-color: rgba(255,255,255,0.84); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 22px 56px rgba(0,0,0,0.16); }
@keyframes tvCtxIn { from { opacity:0; transform:scale(0.80); } to { opacity:1; transform:scale(1); } }
.ctx-section { padding: 4px 0; }
.ctx-section + .ctx-section { border-top: 0.5px solid var(--divider); }
[data-theme="light"] .ctx-section + .ctx-section { border-color: rgba(0,0,0,0.08); }
.ctx-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; font-family: var(--font); font-size: 14.5px; font-weight: 400; color: var(--text-1); cursor: pointer; transition: background var(--tr-fast); gap: 12px; }
[data-theme="light"] .ctx-item { color: rgba(0,0,0,0.82); }
.ctx-item:hover { background: var(--tv-glass); }
[data-theme="light"] .ctx-item:hover { background: rgba(0,0,0,0.05); }
.ctx-item.danger { color: #ff6a62; }
[data-theme="light"] .ctx-item.danger { color: #cc2200; }
.ctx-item-label { flex: 1; }
.ctx-item-icon  { font-size: 16px; opacity: 0.68; flex-shrink: 0; width: 22px; text-align: center; }

/* ══════════════════════════════════════════════════════
   SETTINGS tvOS
══════════════════════════════════════════════════════ */
.settings-section { margin-bottom: 20px; }
.settings-section-title { font-family: var(--font); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin-bottom: 9px; font-weight: 700; }
[data-theme="light"] .settings-section-title { color: rgba(0,0,0,0.36); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; background: var(--tv-glass); border: 0.5px solid var(--divider); border-radius: 12px; margin-bottom: 6px; }
[data-theme="light"] .toggle-row { background: rgba(255,255,255,0.58); border-color: rgba(0,0,0,0.08); }
.toggle-label { display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-1); }
[data-theme="light"] .toggle-label { color: rgba(0,0,0,0.80); }
.toggle-label-icon { font-size: 15px; }
.ios-toggle { position: relative; width: 44px; height: 27px; cursor: pointer; flex-shrink: 0; }
.ios-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-toggle-track { position: absolute; inset: 0; background: rgba(120,120,128,.30); border-radius: 14px; transition: background var(--tr-fast); }
.ios-toggle input:checked + .ios-toggle-track { background: #30d158; }
.ios-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform var(--tr-spring); pointer-events: none; }
.ios-toggle input:checked ~ .ios-toggle-thumb { transform: translateX(17px); }

.size-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.size-chip { padding: 5px 12px; border-radius: var(--r-full); font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; border: 0.5px solid var(--tv-border); color: var(--text-2); background: var(--tv-glass); transition: all var(--tr-fast); }
.size-chip:hover { border-color: var(--accent); color: var(--accent); }
.size-chip.active { background: rgba(78,169,255,0.22); color: var(--accent); border-color: rgba(78,169,255,0.45); }
[data-theme="light"] .size-chip { border-color: rgba(0,0,0,0.11); color: rgba(0,0,0,0.55); background: rgba(0,0,0,0.05); }
[data-theme="light"] .size-chip.active { background: rgba(0,94,203,0.12); color: #005ecb; border-color: rgba(0,94,203,0.32); }

.setting-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.setting-label { font-family: var(--font); font-size: 11.5px; color: var(--text-2); font-weight: 500; min-width: 54px; }
.setting-value { font-family: var(--font); font-size: 11px; color: var(--text-3); min-width: 40px; text-align: right; font-weight: 600; }
[data-theme="light"] .setting-label { color: rgba(0,0,0,0.52); }
[data-theme="light"] .setting-value { color: rgba(0,0,0,0.36); }
.setting-slider { flex: 1; -webkit-appearance: none; height: 3px; border-radius: 2px; background: var(--tv-glass-md); outline: none; cursor: pointer; }
.setting-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: white; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.30); transition: transform var(--tr-fast); }
.setting-slider::-webkit-slider-thumb:hover { transform: scale(1.14); }
[data-theme="light"] .setting-slider { background: rgba(0,0,0,0.12); }

.icon-preview-wrap { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.icon-preview-label { font-family: var(--font); font-size: 10px; color: var(--text-3); }
[data-theme="light"] .icon-preview-label { color: rgba(0,0,0,0.36); }

.wp-grid-sm { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.wp-thumb-sm { height: 58px; border-radius: 11px; cursor: pointer; border: 2px solid transparent; transition: border-color var(--tr-fast), transform var(--tr-fast); overflow: hidden; position: relative; box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.wp-thumb-sm:hover { transform: scale(1.05); }
.wp-thumb-sm.selected { border-color: white; box-shadow: 0 0 0 1px rgba(255,255,255,0.40), 0 3px 10px rgba(0,0,0,0.35); }
[data-theme="light"] .wp-thumb-sm.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,94,203,0.30); }
.wp-thumb-sm-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.42); color: rgba(255,255,255,0.88); font-family: var(--font); font-size: 8px; font-weight: 700; text-align: center; padding: 3px 0; text-transform: uppercase; letter-spacing: 0.04em; backdrop-filter: blur(4px); }

.import-zone { border: 1px dashed var(--tv-border); border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; transition: border-color var(--tr-fast), background var(--tr-fast); background: var(--tv-glass); margin-top: 8px; }
.import-zone:hover { border-color: var(--accent); background: rgba(78,169,255,0.10); }
[data-theme="light"] .import-zone { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
.import-zone-icon { font-size: 19px; margin-bottom: 4px; }
.import-zone-text { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-2); }
.import-zone-sub  { font-family: var(--font); font-size: 10px; color: var(--text-3); margin-top: 2px; }
[data-theme="light"] .import-zone-text { color: rgba(0,0,0,0.54); }
[data-theme="light"] .import-zone-sub  { color: rgba(0,0,0,0.34); }
#imgFileInput, #iconFileInput { display: none; }

.wp-custom-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--tv-glass); border: 0.5px solid var(--divider); border-radius: 11px; margin-top: 6px; font-family: var(--font); font-size: 11px; color: var(--text-2); }
[data-theme="light"] .wp-custom-pill { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.54); border-color: rgba(0,0,0,0.08); }
.wp-custom-pill-preview { width: 34px; height: 24px; border-radius: 6px; background-size: cover; background-position: center; flex-shrink: 0; border: 0.5px solid var(--tv-border); }
.wp-custom-remove { margin-left: auto; background: rgba(255,59,48,.12); color: #ff6a62; border: 0.5px solid rgba(255,59,48,.22); font-family: var(--font); font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; cursor: pointer; }
[data-theme="light"] .wp-custom-remove { background: rgba(200,30,20,0.08); color: #cc2200; border-color: rgba(200,30,20,0.18); }
.settings-divider { height: 0.5px; background: var(--divider); margin: 16px 0; }
[data-theme="light"] .settings-divider { background: rgba(0,0,0,0.08); }

.choose-item { display: flex; align-items: center; gap: 9px; padding: 7px 4px; cursor: pointer; border-radius: 9px; transition: background var(--tr-fast); }
.choose-item:hover { background: var(--tv-glass); }
[data-theme="light"] .choose-item:hover { background: rgba(0,0,0,0.04); }
.choose-check { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--tv-border); flex-shrink: 0; display: flex; align-items: center; font-size: 10px; color: transparent; transition: all var(--tr-fast); }
.choose-check.checked { background: var(--accent); border-color: var(--accent); color: white; }
[data-theme="light"] .choose-check { border-color: rgba(0,0,0,0.20); }
.choose-name { font-family: var(--font); font-size: 13px; color: var(--text-1); font-weight: 500; flex: 1; }
[data-theme="light"] .choose-name { color: rgba(0,0,0,0.80); }
.choose-icon { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.choose-icon img { width: 100%; height: 100%; object-fit: cover; }

.legend-intro { font-family: var(--font); font-size: 11px; color: var(--text-2); margin-bottom: 13px; line-height: 1.55; }
.legend-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 0.5px solid var(--divider); }
[data-theme="light"] .legend-row { border-color: rgba(0,0,0,0.07); }
.legend-badge { width: 33px; height: 33px; border-radius: 50%; display: flex; align-items: center; font-family: var(--font); font-size: 12px; font-weight: 800; flex-shrink: 0; }
.legend-title { font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--text-1); }
.legend-desc  { font-family: var(--font); font-size: 10px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
[data-theme="light"] .legend-title { color: rgba(0,0,0,0.80); }
[data-theme="light"] .legend-desc  { color: rgba(0,0,0,0.52); }

.modal-footer { padding: 9px 16px 14px; border-top: 0.5px solid var(--divider); flex-shrink: 0; }
[data-theme="light"] .modal-footer { border-color: rgba(0,0,0,0.08); }
.apply-btn { width: 100%; background: rgba(78,169,255,0.22); border: 0.5px solid rgba(78,169,255,0.40); color: var(--accent); font-family: var(--font); font-size: 13px; font-weight: 700; padding: 11px; border-radius: 13px; cursor: pointer; transition: opacity var(--tr-fast), transform var(--tr-fast); }
.apply-btn:hover { opacity: 0.84; }
.apply-btn:active { transform: scale(0.98); }
[data-theme="light"] .apply-btn { background: rgba(0,94,203,0.12); border-color: rgba(0,94,203,0.32); color: #005ecb; }

/* Icon import */
.icon-upload-preview { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 5px 0 9px; }
.icon-upload-preview .preview-wrap { width: 78px; height: 78px; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,0.42); display: flex; align-items: center; background: var(--tv-glass); }
.icon-upload-preview .preview-wrap img { width: 100%; height: 100%; object-fit: cover; }
.icon-upload-drop { border: 1px dashed var(--tv-border); border-radius: 13px; padding: 18px; text-align: center; cursor: pointer; transition: border-color var(--tr-fast), background var(--tr-fast); background: var(--tv-glass); width: 100%; }
.icon-upload-drop:hover { border-color: var(--accent); background: rgba(78,169,255,0.10); }
[data-theme="light"] .icon-upload-drop { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
.icon-upload-drop-icon { font-size: 22px; margin-bottom: 5px; }
.icon-upload-drop-text { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-2); }
.icon-upload-drop-sub  { font-family: var(--font); font-size: 10px; color: var(--text-3); margin-top: 2px; }
[data-theme="light"] .icon-upload-drop-text { color: rgba(0,0,0,0.54); }
[data-theme="light"] .icon-upload-drop-sub  { color: rgba(0,0,0,0.34); }
.reset-icon-btn { width: 100%; background: rgba(255,59,48,.10); border: 0.5px solid rgba(255,59,48,.22); color: #ff6a62; font-family: var(--font); font-size: 12px; font-weight: 600; padding: 9px; border-radius: 11px; cursor: pointer; margin-top: 8px; transition: background var(--tr-fast); }
.reset-icon-btn:hover { background: rgba(255,59,48,.17); }
[data-theme="light"] .reset-icon-btn { background: rgba(200,30,20,0.08); color: #cc2200; border-color: rgba(200,30,20,0.18); }

/* Refresh icônes */
.refresh-icons-btn { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--tv-glass); border: 0.5px solid var(--tv-border); color: var(--text-2); font-family: var(--font); font-size: 12px; font-weight: 600; padding: 9px 13px; border-radius: 12px; cursor: pointer; transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast); }
.refresh-icons-btn:hover { background: var(--tv-glass-hv); color: var(--text-1); }
.refresh-icons-btn:active { transform: scale(0.97); }
[data-theme="light"] .refresh-icons-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); color: rgba(0,0,0,0.58); }
[data-theme="light"] .refresh-icons-btn:hover { background: rgba(0,0,0,0.09); color: rgba(0,0,0,0.82); }
.refresh-icons-btn.spinning .refresh-icon { animation: spinOnce 0.7s cubic-bezier(.4,0,.2,1); }
@keyframes spinOnce { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.refresh-icon { display: inline-block; font-size: 14px; }
.refresh-status { font-family: var(--font); font-size: 10px; color: var(--text-3); text-align: center; margin-top: 5px; min-height: 14px; transition: color 0.3s; }
.refresh-status.success { color: #5de087; }
[data-theme="light"] .refresh-status.success { color: #0a7830; }

/* Frost chips */
.frost-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.frost-chip { padding: 5px 12px; border-radius: var(--r-full); font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; border: 0.5px solid var(--tv-border); color: var(--text-2); background: var(--tv-glass); transition: all var(--tr-fast); }
.frost-chip:hover { border-color: var(--accent); color: var(--accent); }
.frost-chip.active { background: rgba(78,169,255,0.20); color: var(--accent); border-color: rgba(78,169,255,0.42); }
[data-theme="light"] .frost-chip { border-color: rgba(0,0,0,0.11); color: rgba(0,0,0,0.54); background: rgba(0,0,0,0.04); }
[data-theme="light"] .frost-chip.active { background: rgba(0,94,203,0.12); color: #005ecb; border-color: rgba(0,94,203,0.32); }

/* Legend : pas de gros chiffre — seulement label + barre */
#legendModal .priv-score-num { display: none; }
#legendModal .priv-score-card { margin-bottom: 10px; }

/* Barre recherche mode jour */
[data-theme="light"] .grid-search-inner { background: rgba(255,252,245,0.80); border-color: rgba(180,155,120,0.30); box-shadow: 0 1px 6px rgba(80,50,20,0.08); }
[data-theme="light"] .grid-search-inner:focus-within { border-color: rgba(196,90,26,0.55); box-shadow: 0 0 0 2px rgba(196,90,26,0.15); }
[data-theme="light"] .grid-search-input { color: rgba(60,45,30,0.90); }
[data-theme="light"] .grid-search-input::placeholder { color: rgba(80,60,40,0.40); }

[data-theme="light"] .status-bar { color: rgba(60,45,30,0.60); }
[data-theme="light"] #clock { color: rgba(60,45,30,0.92); }
[data-theme="light"] .status-right { color: rgba(60,45,30,0.55); }

[data-theme="light"] .app-item:hover { background: transparent; }

/* ══════════════════════════════════════════════════════
   COLOR PICKERS — choix de couleur dans les réglages
══════════════════════════════════════════════════════ */
.color-pick-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; flex-shrink: 0;
}
.color-pick-label {
  font-family: var(--font); font-size: 10px; color: var(--text-3); font-weight: 500;
}
.color-input {
  width: 48px; height: 38px;
  border: 1.5px solid var(--tv-border);
  border-radius: 10px; cursor: pointer;
  background: none; padding: 2px;
  transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.color-input:hover  { border-color: var(--tv-border-hv); transform: scale(1.06); }
.color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 7px; overflow: hidden; }
.color-input::-webkit-color-swatch { border: none; border-radius: 7px; }
[data-theme="light"] .color-input { border-color: rgba(180,155,120,0.35); }