/* ════════════════════════════════════════════════════════════════
   bibo.moe — THÈME APP (plush pastel macaron)
   ────────────────────────────────────────────────────────────────
   Tout est préfixé par `html.app-mode` : ces styles ne s'appliquent
   QUE lorsque le site tourne comme app installée (standalone) ou en
   prévisualisation forcée (?app=1). Dans un navigateur normal, AUCUN
   de ces styles ne s'active → le site reste identique.
   ════════════════════════════════════════════════════════════════ */

html.app-mode {
  --cream:#FFF7EC; --ink:#5d5566; --soft:#a79db4;
  --peach:#FFB98A; --peach-bg:#FFE7D2;
  --mint:#7FD1A8;  --mint-bg:#DCF3E7;
  --lav:#B9A4E8;   --lav-bg:#ECE4FB;
  --pink:#F4A6C4;  --pink-bg:#FBDDEB;
  --sky:#8FC5F0;   --sky-bg:#DBEDFF;
  --butter:#EBB93B;--butter-bg:#FFF0C4;
  /* accent par défaut (violet) — écrasé par page via body.X-active */
  --accent:#B9A4E8; --accent-bg:#ECE4FB; --accent-ink:#6f5aa8; --accent-grad:linear-gradient(135deg,#B9A4E8,#F4A6C4);
  --card:#fff; --shadow:0 10px 26px rgba(150,130,170,.16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Police + fond global ── */
html.app-mode #app, html.app-mode #app *,
html.app-mode .app-drawer, html.app-mode .app-drawer *,
html.app-mode .app-bottombar, html.app-mode .app-bottombar *,
html.app-mode body, html.app-mode button, html.app-mode input {
  font-family:'Quicksand', system-ui, -apple-system, sans-serif !important;
}
/* Texte un peu plus gras + resserré (look maquette) */
html.app-mode .main-content,
html.app-mode .app-drawer,
html.app-mode .app-bottombar {
  font-weight:500;
  letter-spacing:-.1px;
}
html.app-mode {
  background:linear-gradient(170deg,#F5F1FC 0%,#E9F3FF 28%,#FFF6EC 72%) !important;
}
html.app-mode body {
  zoom:1 !important;                         /* annule le zoom:80% du site → vraie taille */
  display:block !important;                  /* plus de centrage flex → fini les grosses marges */
  align-items:initial !important; justify-content:initial !important;
  padding:0 !important; margin:0 !important;
  height:auto !important; min-height:100vh !important;
  overflow-x:hidden !important; overflow-y:auto !important;   /* scroll page naturel */
  background:linear-gradient(170deg,#F5F1FC 0%,#E9F3FF 28%,#FFF6EC 72%) !important;
  color:var(--ink);
}
html.app-mode #app {
  display:block !important; position:static !important;
  max-width:100% !important; width:100% !important; margin:0 !important;
  border:none !important; box-shadow:none !important; border-radius:0 !important;
  height:auto !important; min-height:100vh !important; overflow:visible !important;
  background:transparent !important;
}
html.app-mode .app-layout {
  display:block !important; position:static !important;
  height:auto !important; min-height:0 !important; align-items:initial !important;
}

/* ── On masque le chrome bureau (déplacé ou abandonné) ── */
html.app-mode .sidebar,
html.app-mode .aside-col,
html.app-mode #petals { display:none !important; }

/* Masque haut : au scroll, le contenu ne passe pas derrière l'heure/batterie (on voit le fond) */
html.app-mode body::before {
  content:''; position:fixed; top:0; left:0; right:0; z-index:8000;
  height:calc(var(--safe-top) + 2px); background:#F5F1FC; pointer-events:none;
}

/* ── Colonne centrale = pleine largeur, scroll unique ── */
html.app-mode .main-col {
  position:static !important; inset:auto !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  width:100% !important; max-width:560px !important; margin:0 auto !important;
  padding:0 !important; border:none !important; overflow:visible !important;
  display:block !important; background:transparent !important;
}
html.app-mode .main-content {
  padding:2px 21px calc(116px + var(--safe-bottom)) !important;
  overflow:visible !important; height:auto !important; min-height:0 !important;
  flex:none !important; background:transparent !important; font-size:16px !important;
}

/* La recherche d'origine (déplacée dans le tiroir) ne s'affiche pas en place */
html.app-mode .main-col > .search-wrap { display:none !important; }

/* ── En-tête : Bonjour + date + météo ── */
html.app-mode #main-header {
  padding:max(16px, calc(var(--safe-top) + 5px)) 4px 17px !important;
}
html.app-mode #main-header-row { align-items:center !important; gap:12px !important; }
html.app-mode .welcome-heading {
  font-size:27px !important; font-weight:700 !important; color:var(--ink) !important;
  letter-spacing:-.2px !important; text-transform:none !important;
  line-height:1.12 !important; margin:0 !important;
}
html.app-mode .welcome-heading .app-heart,
html.app-mode .app-heart {
  color:var(--pink) !important; -webkit-text-fill-color:var(--pink) !important;
}
html.app-mode #main-header .user-date {
  font-size:14.5px !important; color:var(--soft) !important; font-weight:600 !important;
  margin:3px 0 0 0 !important; letter-spacing:0 !important;
}
html.app-mode #main-header .mini-weather {
  flex:0 0 auto !important; background:#fff !important; border-radius:14px !important;
  padding:5px 10px !important; font-size:16px !important; font-weight:700 !important;
  color:var(--ink) !important; box-shadow:0 4px 12px rgba(150,130,170,.16) !important; white-space:nowrap !important;
  display:flex !important; align-items:center !important; gap:4px !important;
}
html.app-mode #main-header .mini-weather * { color:var(--ink) !important; font-weight:700 !important; }
html.app-mode .app-header-meta .user-date {
  font-size:14px; color:var(--soft); font-weight:600;
}
html.app-mode .app-header-meta .mini-weather {
  background:#fff; border-radius:16px; padding:6px 12px; font-weight:700;
  font-size:14px; box-shadow:var(--shadow); white-space:nowrap;
}

/* ════════════ CARTES (plush) ════════════ */
html.app-mode .currently-panel,
html.app-mode .aside-widget,
html.app-mode .habit-widget {
  background:var(--card) !important;
  border-radius:24px !important;
  padding:15px 16px !important;
  box-shadow:var(--shadow) !important;
  border:none !important;
  margin:0 0 14px 0 !important;
}
html.app-mode .currently-section {
  display:flex !important; flex-direction:column !important; gap:0 !important;
}

/* En-têtes de bloc : pastille icône + titre (config UNIFORME pour tous les blocs) */
html.app-mode .currently-panel-header,
html.app-mode .agenda-day-label,
html.app-mode .habit-widget-title {
  display:flex !important; align-items:center !important; gap:10px !important;
  margin-bottom:11px !important;
}
html.app-mode .currently-panel-icon-img,
html.app-mode .cgcal-banner-icon,
html.app-mode .app-block-ico {
  width:34px !important; height:34px !important; border-radius:11px !important;
  padding:5px !important; object-fit:contain !important; background:var(--lav-bg) !important;
  flex:0 0 auto !important; box-sizing:border-box !important;
}
html.app-mode .app-block-ico { display:inline-grid !important; place-items:center !important; }
html.app-mode .app-block-ico svg { width:22px !important; height:22px !important; }
/* Tous les titres de bloc : MÊME couleur (ink), épais, resserré, même taille */
html.app-mode .currently-panel-label,
html.app-mode .cgcal-banner-label,
html.app-mode .habit-widget-title,
html.app-mode .agenda-day-label {
  font-size:17px !important; font-weight:700 !important; color:var(--ink) !important;
  text-transform:none !important; letter-spacing:-.3px !important;
}

/* Accents macaron par section (posés par app-shell.js) */
html.app-mode .acc-sky    .currently-panel-icon-img,
html.app-mode .acc-sky    .app-block-ico { background:var(--sky-bg) !important; }
html.app-mode .acc-lav    .cgcal-banner-icon { background:var(--lav-bg) !important; }
html.app-mode .acc-mint   .currently-panel-icon-img { background:var(--mint-bg) !important; }
html.app-mode .acc-pink   .currently-panel-icon-img { background:var(--pink-bg) !important; }
html.app-mode .acc-butter .currently-panel-icon-img { background:var(--butter-bg) !important; }

/* ── Icônes plush des blocs Accueil (Aujourd'hui, Rappels, Calendrier Gaming, Jeux/Séries/
   Lecture en cours, Habit) : on RETIRE la pastille (fond pastel + padding + bordure) pour ne
   garder QUE l'image plush, dans le même cadre 34×34. Sélecteurs qualifiés par accent pour
   battre les règles de fond ci-dessus (même spécificité, posées plus loin). ── */
html.app-mode .app-block-ico.app-block-ico-img,
html.app-mode #todo-widget .app-block-ico.app-block-ico-img,
html.app-mode .acc-sky    .app-block-ico.app-block-ico-img,
html.app-mode .acc-peach  .app-block-ico.app-block-ico-img,
html.app-mode .acc-sky    .currently-panel-icon-img,
html.app-mode .acc-mint   .currently-panel-icon-img,
html.app-mode .acc-pink   .currently-panel-icon-img,
html.app-mode .acc-butter .currently-panel-icon-img,
html.app-mode .currently-panel-icon-img,
html.app-mode .acc-lav    .cgcal-banner-icon,
html.app-mode .cgcal-banner-icon {
  background:transparent !important; padding:0 !important; border:none !important;
  box-shadow:none !important; border-radius:0 !important; object-fit:contain !important;
}
/* le span pastille passe en display:block (l'inline-grid + place-items:center le faisait
   collapser à 0 quand l'image n'a pas de taille intrinsèque chargée) → l'image remplit le 34×34 */
html.app-mode .app-block-ico.app-block-ico-img { display:block !important; }
html.app-mode .app-block-img { width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; }
/* +15% : on agrandit l'image VISUELLEMENT (transform centré) sans toucher la boîte 34×34 →
   l'icône ne bouge pas (même emplacement), elle grossit juste depuis son centre. */
html.app-mode .app-block-img,
html.app-mode .currently-panel-icon-img,
html.app-mode .cgcal-banner-icon { transform:scale(1.15) !important; }
html.app-mode .acc-sky    { box-shadow:0 10px 26px rgba(143,197,240,.20) !important; }
html.app-mode .acc-mint   { box-shadow:0 10px 26px rgba(127,209,168,.20) !important; }
html.app-mode .acc-pink   { box-shadow:0 10px 26px rgba(244,166,196,.20) !important; }
html.app-mode .acc-butter { box-shadow:0 10px 26px rgba(235,185,59,.18) !important; }
html.app-mode .acc-peach  { box-shadow:0 10px 26px rgba(255,185,138,.22) !important; }

/* En-tête pleine largeur (déplacé en haut par app-shell) puis [en cours | prochain] à droite */
html.app-mode .currently-panel,
html.app-mode .panel-split-left { overflow:visible !important; min-height:0 !important; height:auto !important; }
html.app-mode .panel-split-right { align-self:flex-start !important; }
html.app-mode .currently-panel > .currently-panel-header { margin-bottom:11px !important; }
html.app-mode .panel-split { display:flex !important; flex-direction:row !important; gap:12px !important; align-items:flex-start !important; width:100% !important; }
html.app-mode .panel-split-left { flex:1 1 0 !important; min-width:0 !important; max-width:none !important; width:auto !important; }
html.app-mode .panel-split-right { flex:0 0 62px !important; min-width:0 !important; width:62px !important; max-width:62px !important; padding:0 !important; }
html.app-mode .panel-split-divider { display:none !important; }
/* "Prochain" : gris, même style que la maquette (pas de bleu majuscule) */
html.app-mode .panel-prochain-label {
  color:var(--soft) !important; text-transform:none !important; font-weight:600 !important;
  font-size:14px !important; letter-spacing:0 !important;
}
/* "Prochain" : n'afficher qu'un seul élément (le premier) */
html.app-mode .panel-prochain-list > *:nth-child(n+2) { display:none !important; }
/* Vignettes : pas de fond bleu, plus petites, hauteur ajustée */
html.app-mode .currently-scroll { display:flex !important; flex-direction:row !important; gap:8px !important; flex-wrap:wrap !important; align-content:flex-start !important; overflow:visible !important; padding:2px 2px 6px !important; width:100% !important; max-width:100% !important; min-width:0 !important; max-height:none !important; height:auto !important; min-height:0 !important; }
html.app-mode .media-item {
  background:transparent !important; box-shadow:none !important; padding:0 !important; border:none !important;
  width:62px !important; min-width:0 !important; max-width:62px !important; height:auto !important; flex:0 0 auto !important;
}
html.app-mode .media-item-cover,
html.app-mode .panel-prochain-card-cover {
  width:62px !important; height:86px !important; max-width:62px !important; object-fit:cover !important;
  border-radius:12px !important; background:transparent !important; box-shadow:0 4px 10px rgba(150,130,170,.20) !important;
}
html.app-mode .media-item-cover-placeholder,
html.app-mode .panel-prochain-card-ph { width:62px !important; height:86px !important; border-radius:12px !important; }
html.app-mode .currently-scroll > * { flex:0 0 auto !important; }
/* Vignette "Prochain" : même taille que "En cours", alignée en haut */
html.app-mode .panel-split-right { align-self:flex-start !important; }
/* "Prochain" sur la ligne du titre (à droite) */
html.app-mode .currently-panel-header .panel-prochain-header { margin-left:auto !important; margin-bottom:0 !important; }
html.app-mode .panel-prochain-header { margin-bottom:0 !important; }
html.app-mode .panel-prochain-card {
  width:62px !important; max-width:62px !important; background:transparent !important;
  box-shadow:none !important; padding:0 !important; border:none !important;
}
html.app-mode .currently-empty,
html.app-mode .panel-prochain-empty,
html.app-mode .agenda-empty { color:var(--soft) !important; }

/* Calendrier Gaming : carte BLANCHE comme les autres blocs (icône + titre + events) */
html.app-mode .cgcal-banner {
  background:#fff !important; border-radius:24px !important;
  box-shadow:0 10px 26px rgba(185,164,232,.20) !important; border:none !important;
  margin:0 0 14px 0 !important; padding:15px 16px !important;
}
html.app-mode .cgcal-banner-inner {
  background:transparent !important; padding:0 !important;
  display:flex !important; align-items:center !important; gap:10px !important;
}
html.app-mode .cgcal-banner::before, html.app-mode .cgcal-banner::after,
html.app-mode .cgcal-banner-inner::before, html.app-mode .cgcal-banner-inner::after {
  content:none !important; background:none !important; display:none !important;
}
html.app-mode .cgcal-banner, html.app-mode .cgcal-banner * { color:var(--ink) !important; }
html.app-mode .cgcal-banner-icon { background:var(--lav-bg) !important; object-fit:cover !important; }
html.app-mode .cgcal-banner-arrow { display:none !important; }
html.app-mode .cgcal-banner-inner { border:none !important; }
html.app-mode .cgcal-banner hr { display:none !important; }
html.app-mode .cgcal-banner-dossier { margin-top:11px !important; border:none !important; box-shadow:none !important; padding:0 !important; }

/* Agenda : MÊME config que les autres blocs (icône + titre ink), items harmonisés */
html.app-mode #agenda-panel,
html.app-mode #agenda-panel * { color:var(--ink) !important; text-decoration:none !important; }
html.app-mode #agenda-panel { font-size:14px !important; }
/* "Demain" = sous-titre discret, MÊME gris que "Prochain" (#agenda-panel pour battre la spécificité) */
html.app-mode #agenda-panel .agenda-day-label ~ .agenda-day-label {
  font-size:12px !important; font-weight:700 !important; color:var(--soft) !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
  margin-top:12px !important; gap:0 !important;
}
html.app-mode #agenda-panel > *:not(.agenda-day-label) { font-weight:700 !important; }
/* Events agenda : rangées UNIES (on retire les bandes colorées du site) */
html.app-mode .agenda-list { display:block !important; }
html.app-mode .agenda-item {
  background:rgba(244,166,196,0.08) !important; border:none !important; border-left:0 !important;
  border-radius:14px !important; padding:9px 12px !important; gap:9px !important;
  display:flex !important; align-items:center !important; margin-bottom:6px !important;
}
html.app-mode .agenda-item-title { font-weight:700 !important; color:var(--ink) !important; font-size:14px !important; }
html.app-mode .agenda-sep { display:none !important; }

/* Calendrier Gaming : events du jour en rangées plush (dossier "secret" nettoyé) */
html.app-mode .cgcal-banner-dossier { margin-top:11px !important; padding:0 !important; }
html.app-mode .cgcal-dossier-header { display:none !important; }
html.app-mode .cgcal-dossier-item {
  display:flex !important; align-items:center !important; gap:8px !important;
  background:rgba(244,166,196,0.08) !important; border:none !important; border-radius:14px !important;
  padding:9px 12px !important; margin-bottom:6px !important; color:var(--ink) !important;
}
html.app-mode .cgcal-dossier-bullet { display:none !important; }
html.app-mode .cgcal-dossier-evname { color:var(--ink) !important; font-weight:700 !important; font-size:14px !important; }
html.app-mode .cgcal-dossier-type {
  color:var(--soft) !important; font-weight:500 !important; font-size:12px !important;
  margin-left:auto !important; text-transform:none !important;
}
html.app-mode .cgcal-dossier-empty {
  color:var(--soft) !important; font-weight:500 !important; padding:6px 4px !important;
  text-transform:none !important;
}
/* Bloc Habit : écart titre→contenu = 11px (comme les autres), titre non-majuscule */
html.app-mode .habit-widget-header { margin:0 !important; padding:0 !important; }
html.app-mode .habit-widget-title { margin-bottom:11px !important; text-transform:none !important; }
html.app-mode .habit-widget-days-header { margin-top:0 !important; }
/* La liste d'habitudes s'affiche en entier (pas de hauteur fixe ni scroll interne) */
html.app-mode .habit-widget { height:auto !important; max-height:none !important; }
html.app-mode .habit-widget-rows { max-height:none !important; height:auto !important; overflow:visible !important; }
/* Carrés du habit tracker (widget accueil) : DÉGRADÉ ORANGE PASTEL.
   Plein volontairement peu saturé (reste pastel) mais bien distinct du partiel. */
html.app-mode .hw-cell[data-state="0"] { background-color:#fdf6ee !important; }   /* non fait — crème pêche TRÈS pâle (presque blanc) */
html.app-mode .hw-cell[data-state="1"] { background-color:#f8d4a6 !important; }   /* partiel — abricot clair */
html.app-mode .hw-cell[data-state="2"] { background-color:#eea960 !important; }   /* fait — orange pastel (doux) */
/* Texte habit : couleur harmonieuse (brun doux) + un peu plus grand */
html.app-mode .hw-row-name   { color:#8a6f50 !important; font-size:.8rem !important; font-weight:600 !important; }
html.app-mode .hw-day-label  { color:#bcaa92 !important; font-size:.64rem !important; }
html.app-mode .hw-today-label{ color:#d9914e !important; }
html.app-mode .hw-row-icon   { background:#fbe7d4 !important; }

/* Bonjour Bibi : cliquable → ouvre le tiroir */
html.app-mode #welcome-heading, html.app-mode .app-clickable { cursor:pointer !important; }

/* YIP & modales du site : AU-DESSUS de la barre du bas + sous l'encoche (sinon impossible à fermer) */
html.app-mode .yip-overlay,
html.app-mode #habitModalOverlay {
  z-index:9600 !important;
  padding-top:calc(1rem + var(--safe-top)) !important;
  padding-bottom:calc(1rem + var(--safe-bottom)) !important;
}

/* Tiroir : zone scrollable (pages + raccourcis). Le stockage reste épinglé en bas. */
html.app-mode .app-drawer-scroll {
  flex:1 1 auto !important; min-height:0 !important;
  display:flex !important; flex-direction:column !important; gap:4px !important;
  overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain !important;   /* le scroll ne « déborde » pas sur la page derrière */
}
html.app-mode .app-drawer-scroll::-webkit-scrollbar { width:0; height:0; }
/* Tiroir ouvert : on FIGE le défilement de la page derrière (iOS scrollait parfois le fond
   au lieu du tiroir). :has() ≥ iOS 15.4. */
html.app-mode body:has(.app-drawer.open) { overflow:hidden !important; }
html.app-mode .app-drawer { overscroll-behavior:contain !important; }
/* Boutons raccourcis : même style que les pages, juste l'icône en image */
/* raccourcis : pas de transform HORS réorganisation (mais on autorise le tremblement pendant
   le drag — un transform:none inconditionnel bloquait l'animation app-wobble des raccourcis) */
html.app-mode .app-drawer .nav-menu:not(.reordering) .app-sc-item { transform:none !important; }
html.app-mode .app-drawer .nav-item .app-nav-img {
  width:38px !important; height:38px !important; flex:0 0 auto !important;
  border-radius:12px !important; object-fit:cover !important;
  box-shadow:0 1px 5px rgba(150,130,170,.20) !important;
}

/* ── Bloc LECTURE épuré : cover + titre + étiquette "page X/Y" cliquable ── */
html.app-mode .book-reading-layout {
  display:flex !important; flex-direction:row !important; align-items:flex-start !important; gap:12px !important;
  padding:2px 0 6px !important;
}
html.app-mode .book-reading-cover-col { flex:0 0 auto !important; }
html.app-mode .book-reading-chart-col {
  flex:1 1 auto !important; min-width:0 !important; height:auto !important; min-height:0 !important; max-height:none !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:flex-start !important; gap:2px !important;
}
html.app-mode .book-reading-title {
  font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.25 !important;
  display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important;
  flex:0 0 auto !important; width:100% !important; min-height:0 !important; max-height:2.6em !important;
  overflow:hidden !important; word-break:normal !important;
}
/* on enlève le « délire » : graphe semaine, nav semaine, date de début */
html.app-mode .reading-bar-chart,
html.app-mode .reading-chart-nav,
html.app-mode .book-reading-startdate { display:none !important; }
html.app-mode .book-reading-meta { display:none !important; }
/* l'anneau devient une petite étiquette "page X / Y" cliquable (ouvre le popup d'ajout) */
html.app-mode .book-reading-ring-col { flex:0 0 auto !important; align-self:flex-start !important; margin-top:6px !important; height:auto !important; min-height:0 !important; max-height:none !important; align-items:flex-start !important; justify-content:flex-start !important; }
html.app-mode .reading-ring-svg { display:none !important; }
html.app-mode .reading-ring-wrap {
  position:static !important; width:auto !important; height:auto !important;
  background:var(--peach-bg) !important; border-radius:11px !important; padding:5px 11px !important;
  cursor:pointer !important; display:inline-flex !important; align-items:baseline !important; gap:4px !important;
  flex:0 0 auto !important; white-space:nowrap !important;
}
html.app-mode .reading-ring-center {
  position:static !important; transform:none !important;
  display:inline-flex !important; flex-direction:row !important; align-items:baseline !important; gap:4px !important; white-space:nowrap !important;
}
html.app-mode .reading-ring-pct, html.app-mode .reading-ring-pages { display:inline !important; }
html.app-mode .reading-ring-pct { font-size:16px !important; font-weight:700 !important; color:var(--peach) !important; }
html.app-mode .reading-ring-pages { font-size:13px !important; font-weight:600 !important; color:var(--soft) !important; }

/* ════════════ BARRE DU BAS (glossy) ════════════ */
html.app-mode .app-bottombar {
  position:fixed; left:14px; right:14px; bottom:calc(7px + var(--safe-bottom));
  max-width:520px; margin:0 auto; height:74px; z-index:9000;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7); border-radius:26px;
  box-shadow:0 12px 30px rgba(120,100,150,.20);
  display:flex; align-items:center; justify-content:space-around; padding:0 8px;
}
html.app-mode .app-bb {
  background:none; border:none; cursor:pointer; flex:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--soft); font-weight:700; font-size:10.5px;
  font-family:'Quicksand',sans-serif;
}
html.app-mode .app-bb svg { width:21px; height:21px; }
html.app-mode .app-bb-emoji { font-size:22px; line-height:1; }
html.app-mode .app-bb-home .app-bb-emoji { font-size:22px; }
/* icônes plush de la barre du bas (remplacent les emojis) — encore +10% (Home reste plus grand) */
html.app-mode .app-bb-img { width:34px; height:34px; object-fit:contain; display:block; }
html.app-mode .app-bb-home .app-bb-img { width:43px; height:43px; }
html.app-mode .app-bb.is-active { color:var(--peach); }
html.app-mode .app-bb.app-bb-home { color:var(--peach); font-weight:700; }
/* Home : plus de cercle pêche autour — l'icône plush est posée à plat comme les autres */
html.app-mode .app-bb-home .app-bb-ico {
  width:auto; height:auto; border-radius:0; margin-top:0;
  background:none; box-shadow:none; display:flex; place-items:center;
}
html.app-mode .app-bb-home .app-bb-ico svg { stroke:#fff; }

/* ════════════ TIROIR (drawer) ════════════ */
html.app-mode .app-drawer-overlay {
  position:fixed; inset:0; z-index:9100; background:rgba(80,60,110,.32);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
html.app-mode .app-drawer-overlay.open { opacity:1; pointer-events:auto; }
html.app-mode .app-drawer {
  position:fixed; top:0; left:0; bottom:0; z-index:9200; width:352px; max-width:92vw;
  background:linear-gradient(180deg,#fff,#FFF7EF);
  border-radius:0 30px 30px 0; box-shadow:14px 0 40px rgba(120,100,150,.28);
  padding:calc(8px + var(--safe-top)) 16px calc(2px + var(--safe-bottom)) 19px;
  display:flex; flex-direction:column;
  transform:translateX(-104%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
html.app-mode .app-drawer.open { transform:translateX(0); }

/* Profil en haut du tiroir */
html.app-mode .app-drawer .user-card {
  background:transparent !important; box-shadow:none !important; border:none !important;
  padding:0 4px 18px !important; margin:0 !important; display:flex !important;
  align-items:center !important; gap:13px !important;
}
html.app-mode .app-drawer .user-avatar {
  width:59px !important; height:59px !important; border-radius:50% !important;
  border:4px solid #fff !important; box-shadow:0 4px 12px rgba(150,130,170,.24) !important;
}
html.app-mode .app-drawer .user-dot { display:none !important; }
html.app-mode .app-drawer .user-date { display:none !important; }
html.app-mode .app-drawer .user-name {
  font-size:20px !important; font-weight:800 !important; color:var(--ink) !important; line-height:1.15 !important;
}
html.app-mode .app-drawer .user-name::after {
  content:'\25CF\0000A0en ligne'; display:block; margin-top:2px;
  font-size:14px; font-weight:700; color:var(--mint); letter-spacing:.2px;
}

/* Recherche dans le tiroir : QUE la barre (pas de cadre gris ni bordure), couleur maquette */
html.app-mode .app-drawer .search-wrap {
  display:block !important; width:100% !important; margin:0 0 16px !important;
  background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
html.app-mode .app-drawer .search-box {
  background:#f3eef8 !important; border-radius:16px !important; border:none !important; border-bottom:none !important; outline:none !important;
  padding:11px 14px !important; box-shadow:none !important; width:100% !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; gap:8px !important;
}
html.app-mode .app-drawer #main-search {
  font-family:'Quicksand',sans-serif !important; background:transparent !important; border:none !important;
  width:100% !important; color:var(--ink) !important; font-weight:600 !important; font-size:15px !important;
}
html.app-mode .app-drawer #main-search::placeholder { color:var(--soft) !important; font-weight:600 !important; }
html.app-mode .app-drawer .search-kbd { display:none !important; }

/* Navigation : toutes les pages */
html.app-mode .app-drawer .nav-menu {
  flex:0 0 auto !important; display:flex !important; flex-direction:column !important; gap:4px !important;
  margin:0 !important; padding:0 !important; overflow:visible !important;
}
html.app-mode .app-drawer .nav-item {
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:8px 12px !important; border-radius:16px !important; width:100% !important; margin:0 !important;
  background:transparent !important; border:none !important; cursor:pointer; position:relative !important;
  color:var(--ink) !important; font-weight:700 !important; font-size:16px !important;
  justify-content:flex-start !important;
}
/* Bloque le scale/déplacement du site sur le bouton actif/hover (sauf pendant la réorganisation, où le tremblotement a besoin du transform) */
html.app-mode .app-drawer .nav-menu:not(.reordering) .nav-item { transform:none !important; }
html.app-mode .app-drawer .nav-menu:not(.reordering) .nav-item.active { transform:none !important; }
/* Surlignage actif : fond posé en ::before (inset 5% de chaque côté) → le texte/icône ne bougent pas */
html.app-mode .app-drawer .nav-item.active { background:transparent !important; }
html.app-mode .app-drawer .nav-item.active::before,
html.app-mode .app-drawer .nav-item:active::before {
  content:'' !important; position:absolute !important; top:0; bottom:0; left:0; right:0;
  background:var(--peach-bg) !important; border-radius:16px !important; z-index:-1;
}
/* Retour visuel INSTANTANÉ au tap (même pour les raccourcis / pages sans état actif) :
   le surlignement pêche apparaît dès qu'on presse → feedback cohérent partout. */
html.app-mode .app-drawer .nav-item:active { background:transparent !important; }
/* Barre du bas : petit retour au tap (les icônes s'enfoncent légèrement) */
html.app-mode .app-bb:active { transform:scale(.9); opacity:.7; }
html.app-mode .app-drawer .nav-item span { display:inline !important; opacity:1 !important; width:auto !important; }
html.app-mode .app-drawer .nav-item svg {
  width:24px !important; height:24px !important; padding:7px; box-sizing:content-box;
  border-radius:12px; background:var(--lav-bg); color:var(--ink);
}
html.app-mode .app-drawer .nav-item:nth-child(1) svg { background:var(--peach-bg); }
html.app-mode .app-drawer .nav-item:nth-child(2) svg { background:var(--lav-bg); }
html.app-mode .app-drawer .nav-item:nth-child(3) svg { background:var(--mint-bg); }
html.app-mode .app-drawer .nav-item:nth-child(4) svg { background:var(--pink-bg); }
html.app-mode .app-drawer .nav-item:nth-child(5) svg { background:var(--sky-bg); }
html.app-mode .app-drawer .nav-item:nth-child(6) svg { background:var(--butter-bg); }
html.app-mode .app-drawer .nav-item:nth-child(7) svg { background:var(--peach-bg); }

/* ── Icônes plush du TIROIR (app only) — remplacent les SVG des 5 entrées principales
   listées par Bibi : on cache les traits du SVG (color:transparent) et on affiche le plush
   en fond, sans pastille, même gabarit 38px. Ciblage par ID → marche sur l'Accueil ET les
   pages autonomes (mêmes ids dans #pa-drawer-src). ── */
html.app-mode .app-drawer #nav-home svg,
html.app-mode .app-drawer #nav-todo svg,
html.app-mode .app-drawer #nav-lore svg,
html.app-mode .app-drawer #nav-gaming svg,
html.app-mode .app-drawer #nav-bibliotheque svg,
html.app-mode .app-drawer #nav-watchlist svg,
html.app-mode .app-drawer #nav-wishlist svg,
html.app-mode .app-drawer #nav-diet-plan svg {
  width:38px !important; height:38px !important; padding:0 !important; box-sizing:border-box !important;
  border-radius:0 !important; background-color:transparent !important; color:transparent !important;
  /* stroke/fill transparent : sinon les traits du SVG d'origine réapparaissent sur l'item ACTIF
     (règle du site .nav-item.active svg{stroke:#1a7a9a}) → « icône bizarre » par-dessus le plush */
  stroke:transparent !important; fill:transparent !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important;
}
/* RADICAL : on masque carrément les formes dessinées du SVG (paths/rects/lines…) → impossible
   qu'elles réapparaissent au survol/actif quel que soit le stroke. Le <svg> reste comme boîte
   38px qui porte l'image plush en background. */
html.app-mode .app-drawer #nav-home svg *,
html.app-mode .app-drawer #nav-todo svg *,
html.app-mode .app-drawer #nav-lore svg *,
html.app-mode .app-drawer #nav-gaming svg *,
html.app-mode .app-drawer #nav-bibliotheque svg *,
html.app-mode .app-drawer #nav-watchlist svg *,
html.app-mode .app-drawer #nav-wishlist svg *,
html.app-mode .app-drawer #nav-diet-plan svg * { display:none !important; }
html.app-mode .app-drawer #nav-home svg         { background-image:url(/images/app-icons/icon-home2.png) !important; }
html.app-mode .app-drawer #nav-todo svg         { background-image:url(/images/app-icons/icon-todo.png) !important; }
html.app-mode .app-drawer #nav-lore svg         { background-image:url(/images/app-icons/icon-mesdossierslore.png) !important; }
html.app-mode .app-drawer #nav-gaming svg       { background-image:url(/images/app-icons/icon-jeuxencours.png) !important; }
html.app-mode .app-drawer #nav-bibliotheque svg { background-image:url(/images/app-icons/icon-app-lecture.png) !important; }
html.app-mode .app-drawer #nav-watchlist svg    { background-image:url(/images/app-icons/icon-serieencours.png) !important; }
html.app-mode .app-drawer #nav-wishlist svg     { background-image:url(/images/app-icons/icon-wishlist.png) !important; }
html.app-mode .app-drawer #nav-diet-plan svg    { background-image:url(/images/app-icons/icon-dietplan.png) !important; }

/* Raccourcis (Stellar Blade/NIKKE/WoW Chrono/Year in Pixel… via leur src changé en JS) :
   plush plein, sans cadre (cover→contain, pas d'arrondi ni d'ombre) */
html.app-mode .app-drawer .nav-item .app-nav-img {
  object-fit:contain !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
}
/* +20% sur toutes les icônes du tiroir (raccourcis = images, + entrées principales = svg-plush),
   en transform centré → ça grossit depuis le centre, la boîte 38px et le texte ne bougent pas. */
html.app-mode .app-drawer .nav-item .app-nav-img,
html.app-mode .app-drawer #nav-home svg,
html.app-mode .app-drawer #nav-todo svg,
html.app-mode .app-drawer #nav-lore svg,
html.app-mode .app-drawer #nav-gaming svg,
html.app-mode .app-drawer #nav-bibliotheque svg,
html.app-mode .app-drawer #nav-watchlist svg,
html.app-mode .app-drawer #nav-wishlist svg,
html.app-mode .app-drawer #nav-diet-plan svg { transform:scale(1.2) !important; }

/* Appui long pour réorganiser le tiroir : ne JAMAIS sélectionner le texte (iOS) */
html.app-mode .app-drawer .nav-menu,
html.app-mode .app-drawer .nav-item,
html.app-mode .app-drawer .nav-item * {
  -webkit-user-select:none !important; user-select:none !important; -webkit-touch-callout:none !important;
}

/* Stockage en bas du tiroir */
html.app-mode .app-drawer .storage-bar-wrap {
  flex:0 0 auto !important; margin-top:0 !important;
  padding:12px 0 0 !important; border-top:1px solid rgba(150,130,170,.12) !important;
}
html.app-mode .app-drawer .storage-bar-track { background:#ece6f2 !important; border-radius:5px !important; overflow:hidden !important; height:10px !important; }
html.app-mode .app-drawer .storage-bar-fill { background:linear-gradient(90deg,var(--mint),var(--sky)) !important; border-radius:5px !important; height:10px !important; }
html.app-mode .app-drawer .storage-bar-label,
html.app-mode .app-drawer .storage-bar-label span { color:var(--soft) !important; font-weight:600 !important; font-size:11px !important; }
html.app-mode .app-drawer .storage-bar-label { margin-top:6px !important; }

/* ════════════ RÉORGANISATION (appui long → tremblote → glisser) ════════════ */
@keyframes app-wobble {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
html.app-mode .currently-section.reordering > .app-rblock,
html.app-mode .nav-menu.reordering > .nav-item {
  animation: app-wobble .3s ease-in-out infinite;
}
html.app-mode .currently-section.reordering > .app-rblock:nth-child(odd),
html.app-mode .nav-menu.reordering > .nav-item:nth-child(even) { animation-delay: .12s; }
html.app-mode .app-rchosen { animation: none !important; box-shadow: 0 14px 32px rgba(120,100,150,.30) !important; }
html.app-mode .app-rghost { opacity: .35 !important; }
html.app-mode .app-reorder-done {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 9500;
  bottom: calc(96px + var(--safe-bottom));
  background: var(--peach); color: #fff; border: none; border-radius: 22px;
  padding: 11px 26px; font-weight: 700; font-size: 15px; font-family: 'Quicksand', sans-serif;
  box-shadow: 0 8px 22px rgba(255,150,90,.45); cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
   LOT 2 — PAGES INTERNES (Gaming · Bibliothèque · Watching · Wishlist)
   Style unifié, harmonisé avec l'accueil. Scopé par body.not-home.
   ════════════════════════════════════════════════════════════════ */
/* ── Couleur d'ACCENT par page (cascade depuis body) ── */
html.app-mode body.game-active,
html.app-mode body.suivi-gaming-active { --accent:#B9A4E8; --accent-bg:#ECE4FB; --accent-ink:#6f5aa8; --accent-grad:linear-gradient(135deg,#B9A4E8,#F4A6C4); }
html.app-mode body.bib-active     { --accent:#B0855E; --accent-bg:#EEE2D3; --accent-ink:#8a6244; --accent-grad:linear-gradient(135deg,#C49A6C,#A06B45); }
html.app-mode body.watch-active   { --accent:#6E6678; --accent-bg:#E4E1EA; --accent-ink:#544c60; --accent-grad:linear-gradient(135deg,#837A90,#565060); }
html.app-mode body.wishlist-active{ --accent:#D9A82E; --accent-bg:#FBF0C9; --accent-ink:#9a7410; --accent-grad:linear-gradient(135deg,#EFC24F,#D49A20); }

/* ── En-tête épuré : juste un grand titre (pas d'image / météo / date), pour TOUTES les pages internes ── */
html.app-mode body.not-home #page-title-icon,
html.app-mode body.not-home #mini-weather,
html.app-mode body.not-home #user-date { display:none !important; }
/* Neutralise les fonds de thème de section (lavande, beige, sombre…) → garde le dégradé app */
html.app-mode body.not-home .main-col,
html.app-mode body.not-home #main-header,
html.app-mode body.not-home .main-content,
html.app-mode body.not-home .search-wrap {
  background:transparent !important; border-color:transparent !important; box-shadow:none !important;
}
html.app-mode body.not-home #main-header { padding:max(16px, calc(var(--safe-top) + 5px)) 2px 12px !important; }
html.app-mode body.not-home #welcome-heading {
  font-family:'Quicksand', system-ui, sans-serif !important;
  font-size:30px !important; font-weight:800 !important; color:var(--ink) !important;
  letter-spacing:-.5px !important; line-height:1.1 !important;
}

/* ── Grilles : 3 par ligne (les 4 pages) ── */
html.app-mode .game-grid,
html.app-mode .bib-grid,
html.app-mode .watching-grid,
html.app-mode .wl-items-grid {
  grid-template-columns:repeat(3,1fr) !important; gap:12px !important;
  padding-bottom:calc(96px + var(--safe-bottom)) !important;   /* dégage la barre du bas */
}
html.app-mode .wl-items-grid { gap:14px 10px !important; }

/* ── Cartes Biblio + Watching (couverture + titre) : arrondi doux + titre Quicksand ── */
html.app-mode .bib-cover-wrap,
html.app-mode .watch-cover-wrap {
  border-radius:14px !important; box-shadow:0 6px 16px rgba(150,130,170,.22) !important; background:var(--accent-bg) !important;
}
html.app-mode .bib-book-title,
html.app-mode .watch-card-title {
  font-family:'Quicksand', sans-serif !important; font-size:12.5px !important; font-weight:700 !important;
  color:var(--ink) !important; margin-top:7px !important; line-height:1.25 !important;
}
/* badges statut Watching : pastille douce */
html.app-mode .watch-encours-badge,
html.app-mode .watch-prochain-badge {
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important; border-radius:0 0 12px 12px !important;
  font-size:10px !important; letter-spacing:.3px !important;
}

/* ── Cartes : plush arrondies, ombre douce, bordure de statut PASTEL ── */
html.app-mode .game-card {
  border-radius:16px !important; aspect-ratio:2/3 !important; background:#efeaf6 !important;
  border:3px solid transparent !important; box-shadow:0 6px 16px rgba(150,130,170,.20) !important;
}
html.app-mode .game-card[data-status=playing]  { border-color:#8FC5F0 !important; box-shadow:0 0 0 1px rgba(143,197,240,.45),0 6px 15px rgba(143,197,240,.35) !important; }
html.app-mode .game-card[data-status=done]     { border-color:#7FD1A8 !important; box-shadow:0 0 0 1px rgba(127,209,168,.45),0 6px 15px rgba(127,209,168,.35) !important; }
html.app-mode .game-card[data-status=pause]    { border-color:#F4A29A !important; box-shadow:0 0 0 1px rgba(244,162,154,.45),0 6px 15px rgba(244,162,154,.35) !important; }
html.app-mode .game-card[data-status=wishlist] { border-color:#E6C56A !important; box-shadow:0 0 0 1px rgba(230,197,106,.45),0 6px 15px rgba(230,197,106,.35) !important; }
html.app-mode .game-card[data-status=prochain] { border-color:#F4A6C4 !important; box-shadow:0 0 0 1px rgba(244,166,196,.45),0 6px 15px rgba(244,166,196,.35) !important; }
html.app-mode .game-card-img { border-radius:13px !important; }
html.app-mode .game-card-heart { font-size:1.05rem !important; top:.45rem !important; right:.45rem !important; }

/* ── Toolbar : pills pastel, couleur d'accent PAR PAGE (Gaming/Watching/Wishlist) ── */
html.app-mode .gaming-toolbar,
html.app-mode .watching-toolbar,
html.app-mode .wl-toolbar { margin-top:2px !important; margin-bottom:14px !important; gap:8px !important; align-items:center !important; flex-wrap:wrap !important; }
/* filtres (pastilles) */
html.app-mode .gaming-filter-btn,
html.app-mode .watching-filter-btn,
html.app-mode .wl-filter-btn,
html.app-mode .bib-filter-btn:not(.bib-add-btn) {
  background:#fff !important; border:1.5px solid transparent !important; color:var(--ink) !important;
  border-radius:18px !important; height:34px !important; padding:0 15px !important;
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important; font-size:13px !important;
  box-shadow:0 2px 8px rgba(150,130,170,.12) !important;
}
html.app-mode .gaming-filter-btn.active,
html.app-mode .watching-filter-btn.active,
html.app-mode .wl-filter-btn.active,
html.app-mode .bib-filter-btn:not(.bib-add-btn).active { background:var(--accent-bg) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; }
/* bouton "Suivi de …" → gros carré arrondi 42px (accent plein) */
html.app-mode .gaming-suivi-btn,
html.app-mode .watching-suivi-btn {
  background:var(--accent) !important; color:#fff !important; border:none !important;
  border-radius:13px !important; height:42px !important; padding:0 16px !important;
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important; font-size:14px !important;
  box-shadow:0 4px 12px rgba(150,130,170,.30) !important;
}
/* boutons tri + ajout → gros CARRÉS arrondis 42px (même gabarit que filtre/Archivé) */
html.app-mode .game-sort-btn, html.app-mode .watch-sort-btn, html.app-mode .wl-sort-circle-btn,
html.app-mode .gaming-add-btn, html.app-mode .watching-add-btn, html.app-mode .wl-add-item-btn {
  width:42px !important; height:42px !important; border-radius:13px !important; flex-shrink:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
html.app-mode .game-sort-btn:active, html.app-mode .watch-sort-btn:active, html.app-mode .wl-sort-circle-btn:active,
html.app-mode .gaming-add-btn:active, html.app-mode .watching-add-btn:active, html.app-mode .wl-add-item-btn:active { transform:scale(.96) !important; }
/* tri = fond pastel d'accent (comme « Archivé ») */
html.app-mode .game-sort-btn, html.app-mode .watch-sort-btn, html.app-mode .wl-sort-circle-btn {
  background:var(--accent-bg) !important; border:none !important; color:var(--accent-ink) !important; box-shadow:0 2px 8px rgba(150,130,170,.10) !important;
}
/* + = dégradé d'accent (comme « + » de Habit) */
html.app-mode .gaming-add-btn, html.app-mode .watching-add-btn, html.app-mode .wl-add-item-btn {
  background:var(--accent-grad) !important; color:#fff !important; border:none !important; box-shadow:0 4px 12px rgba(150,130,170,.28) !important; font-size:22px !important;
}
/* Biblio : toolbar (onglets compteurs + recherche + tri + ajout) */
html.app-mode .bib-toolbar { margin-top:2px !important; margin-bottom:14px !important; gap:8px !important; align-items:center !important; flex-wrap:wrap !important; overflow:visible !important; }
html.app-mode .bib-tabs { overflow:visible !important; flex:0 1 auto !important; }   /* sinon overflow-x:auto clippe le panneau du filtre */
html.app-mode .bib-actions { margin-left:auto !important; }   /* recherche + tri + ajout poussés À DROITE (comme les autres pages) */
html.app-mode .bib-search-input {
  background:#fff !important; border:1.5px solid var(--accent-bg) !important; border-radius:13px !important; height:42px !important;
  font-family:'Quicksand', sans-serif !important; font-size:13px !important; color:var(--ink) !important; box-shadow:0 2px 8px rgba(150,130,170,.10) !important;
}
html.app-mode #bibSortBtn { background:var(--accent-bg) !important; border:none !important; color:var(--accent-ink) !important; width:42px !important; height:42px !important; border-radius:13px !important; box-shadow:0 2px 8px rgba(150,130,170,.10) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html.app-mode #bibSortBtn:active, html.app-mode .bib-add-btn:not(.bib-filter-btn):active { transform:scale(.96) !important; }
html.app-mode .bib-add-btn:not(.bib-filter-btn) { background:var(--accent-grad) !important; color:#fff !important; border:none !important; width:42px !important; height:42px !important; border-radius:13px !important; box-shadow:0 4px 12px rgba(150,130,170,.28) !important; font-size:22px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html.app-mode .bib-tab, html.app-mode .bib-tabs > * {
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important;
}

/* ── Filtres en UN seul bouton + panneau (comme le tri) ── */
html.app-mode .app-filter-wrap { position:relative !important; flex:0 0 auto !important; }
/* Bouton-filtre = gros carré arrondi 42px, fond pastel d'accent (style « Archivé ») */
html.app-mode .app-filter-btn {
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  height:42px !important; padding:0 16px !important; border-radius:13px !important;
  background:var(--accent-bg) !important; border:none !important; color:var(--accent-ink) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  box-shadow:0 2px 8px rgba(150,130,170,.10) !important; cursor:pointer !important; white-space:nowrap !important;
}
html.app-mode .app-filter-btn:active { transform:scale(.96) !important; }
html.app-mode .app-filter-btn svg { width:16px !important; height:16px !important; }
html.app-mode .app-filter-panel {
  display:none; position:absolute !important; top:calc(100% + 6px) !important; left:0 !important; z-index:50 !important;
  background:#fff !important; border-radius:16px !important; padding:6px !important;
  box-shadow:0 12px 30px rgba(120,100,150,.22) !important; min-width:150px !important;
  flex-direction:column !important; gap:3px !important;
}
html.app-mode .app-filter-panel.open { display:flex !important; }
/* les boutons-filtres d'origine deviennent des lignes de menu dans le panneau */
html.app-mode .app-filter-panel .gaming-filter-btn,
html.app-mode .app-filter-panel .watching-filter-btn,
html.app-mode .app-filter-panel .wl-filter-btn,
html.app-mode .app-filter-panel .habit-range-btn,
html.app-mode .app-filter-panel .bib-tab-btn,
html.app-mode .app-filter-panel .bib-tab-dot {
  display:flex !important; width:100% !important; height:auto !important; min-width:0 !important; justify-content:flex-start !important;
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:11px !important; padding:9px 12px !important; color:var(--ink) !important; font-size:14px !important; font-family:'Quicksand', sans-serif !important;
}
html.app-mode .app-filter-panel .gaming-filter-btn.active,
html.app-mode .app-filter-panel .watching-filter-btn.active,
html.app-mode .app-filter-panel .wl-filter-btn.active,
html.app-mode .app-filter-panel .bib-tab-btn.active,
html.app-mode .app-filter-panel .bib-tab-dot.active { background:var(--accent-bg) !important; color:var(--accent-ink) !important; }
/* Menu déroulant du TRI : même style que le filtre */
html.app-mode .game-sort-panel,
html.app-mode .watch-sort-panel,
html.app-mode .bib-sort-panel,
html.app-mode .wl-sort-panel {
  background:#fff !important; border:none !important; border-radius:16px !important; padding:6px !important;
  box-shadow:0 12px 30px rgba(120,100,150,.22) !important; min-width:160px !important;
}
html.app-mode .game-sort-option,
html.app-mode .watch-sort-option,
html.app-mode .bib-sort-option,
html.app-mode .wl-sort-option {
  border-radius:11px !important; padding:9px 12px !important; color:var(--ink) !important;
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important; font-size:14px !important;
  text-transform:none !important; letter-spacing:0 !important;
}
html.app-mode .game-sort-option.active,
html.app-mode .watch-sort-option.active,
html.app-mode .bib-sort-option.active,
html.app-mode .wl-sort-option.active { background:var(--accent-bg) !important; color:var(--accent-ink) !important; }

/* ════════════════════════════════════════════════════════════════
   POPUPS — style UNIFIÉ pour toute l'app (Quicksand, crème, pastel)
   Démarré sur le popup Gaming (#game-modal) ; sera étendu aux autres.
   ════════════════════════════════════════════════════════════════ */
html.app-mode #game-modal-backdrop {
  z-index:9600 !important;
  background:rgba(93,85,102,.40) !important;
  -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
  padding:calc(1rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom)) !important;
}
html.app-mode .game-modal {
  background:#FFFDFB !important; border-radius:26px !important; max-width:440px !important;
  box-shadow:0 24px 64px rgba(120,100,150,.32) !important; color:var(--ink) !important;
}
html.app-mode .game-modal, html.app-mode .game-modal * { font-family:'Quicksand', system-ui, sans-serif !important; }
html.app-mode .game-modal-close { background:#f3eef8 !important; color:var(--soft) !important; width:34px !important; height:34px !important; }
html.app-mode .gm-header-thumb { border-radius:14px !important; border:3px solid #fff !important; box-shadow:0 6px 18px rgba(150,130,170,.28) !important; background:var(--accent-bg) !important; }
html.app-mode #gm-title-view, html.app-mode .game-modal-title, html.app-mode .game-modal-title-input {
  color:var(--ink) !important; font-weight:800 !important; font-size:1.05rem !important; text-align:center !important;
}
html.app-mode .gm-info-label, html.app-mode .gm-field label {
  color:var(--soft) !important; font-weight:700 !important; font-size:.68rem !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
}
html.app-mode .gm-info-val { color:var(--ink) !important; font-weight:600 !important; font-size:.92rem !important; }
html.app-mode .game-modal input,
html.app-mode .game-modal textarea,
html.app-mode .game-modal select {
  background:var(--accent-bg) !important; border:1.5px solid rgba(120,100,150,.16) !important; border-radius:12px !important;
  color:var(--ink) !important; font-weight:600 !important; font-size:16px !important; padding:.5rem .75rem !important;
  /* 16px = empêche le zoom auto d'iOS au focus */
}
/* Popup plus compact (vignette + espacements réduits) */
html.app-mode .game-modal-body { padding:1.15rem 1.15rem 1.2rem !important; }
html.app-mode .gm-header-thumb { width:74px !important; height:100px !important; }
html.app-mode .game-modal-header { margin-bottom:.9rem !important; gap:.45rem !important; }
/* Écarts de section UNIFORMES (.9rem) — header, champs, vue, actions identiques */
html.app-mode .game-modal-fields { gap:.9rem !important; }
html.app-mode .gm-info-grid { gap:.9rem !important; }
html.app-mode .game-modal-actions { margin-top:.9rem !important; flex-wrap:wrap !important; }
/* Hauteur UNIFORME pour tous les inputs + boutons (harmonie), sauf le commentaire (textarea) */
html.app-mode .game-modal input,
html.app-mode .game-modal select { height:42px !important; padding:0 .75rem !important; box-sizing:border-box !important; }
html.app-mode .gm-platform-btn,
html.app-mode .gm-status-btn {
  height:42px !important; box-sizing:border-box !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* .gm-btn : hauteur + centrage SANS forcer `display` (sinon les boutons masqués display:none réapparaissent → débordement) */
html.app-mode .gm-btn {
  height:42px !important; box-sizing:border-box !important;
  align-items:center !important; justify-content:center !important;
}
html.app-mode .gm-btn-icon { width:42px !important; padding:0 !important; flex:0 0 auto !important; }
html.app-mode .gm-btn-save { flex:1 1 auto !important; }
/* Champs date : largeur juste nécessaire (plus de blanc inutile) */
html.app-mode .game-modal input[type="date"] { width:auto !important; min-width:0 !important; max-width:150px !important; }
html.app-mode .game-modal input:focus,
html.app-mode .game-modal textarea:focus,
html.app-mode .game-modal select:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg) !important; outline:none !important; }
html.app-mode .gm-platform-btn {
  background:var(--accent-bg) !important; border:1.5px solid rgba(120,100,150,.16) !important; color:var(--ink) !important;
  border-radius:16px !important; font-weight:700 !important; font-size:.74rem !important;
}
html.app-mode .gm-platform-btn.selected, html.app-mode .gm-platform-btn.active { background:var(--accent-bg) !important; border-color:var(--accent) !important; color:var(--accent-ink) !important; }
html.app-mode .gm-status-btn { border-radius:16px !important; font-weight:700 !important; font-size:.72rem !important; }
html.app-mode .gm-btn { border-radius:14px !important; font-weight:700 !important; font-size:.82rem !important; }
html.app-mode .gm-btn-save { background:var(--accent-grad) !important; color:#fff !important; box-shadow:0 4px 12px rgba(150,130,170,.32) !important; }
html.app-mode .gm-btn-tracker, html.app-mode .gm-btn-lore { background:var(--accent-bg) !important; color:var(--accent-ink) !important; }
html.app-mode .gm-btn-edit { background:var(--mint-bg) !important; color:#3e9b73 !important; }
html.app-mode .gm-btn-danger { background:#fbe0e6 !important; color:#d6688a !important; }
html.app-mode .gm-cover-upload-area { background:var(--accent-bg) !important; border:1.5px dashed var(--accent) !important; border-radius:12px !important; color:var(--soft) !important; }
html.app-mode .gm-fav-toggle { color:var(--ink) !important; font-weight:700 !important; }

/* ════════════ AUCUNE SCROLLBAR VISIBLE (toute l'app) ════════════ */
html.app-mode, html.app-mode * { scrollbar-width:none !important; -ms-overflow-style:none !important; }
html.app-mode ::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }

/* ════════════ POPUPS : taille plafonnée + scroll INTERNE (jamais la page derrière) ════════════ */
/* Le fond (backdrop) ne défile pas la page ; le tap pour fermer marche toujours */
html.app-mode #game-modal-backdrop,
html.app-mode .yip-overlay,
html.app-mode #habitModalOverlay,
html.app-mode .habit-modal-overlay,
html.app-mode .wl-modal-overlay,
html.app-mode .bib-modal-overlay,
html.app-mode .bib-edit-overlay,
html.app-mode .watch-add-overlay,
html.app-mode #reading-popup-overlay,
html.app-mode .dp-xp-overlay { touch-action:none !important; }
/* Les modales : hauteur plafonnée, scroll à l'intérieur, sans entraîner la page */
html.app-mode .game-modal,
html.app-mode .yip-modal,
html.app-mode .habit-modal,
html.app-mode .wl-modal,
html.app-mode .bib-modal,
html.app-mode .bib-edit-modal,
html.app-mode .watch-add-modal,
html.app-mode .reading-popup {
  max-height:60vh !important; overflow-y:auto !important; overflow-x:hidden !important;
  overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;   /* autorise seulement le défilement vertical (pas d'axe X) */
}
/* Bouton fermer ✕ : reste visible même quand le contenu défile */
html.app-mode .game-modal-close {
  position:sticky !important; top:14px !important; float:right !important;
  margin:14px 14px -34px auto !important; z-index:20 !important;
}
/* Verrou : quand une modale est ouverte, la PAGE derrière ne défile plus du tout */
html.app-mode.app-modal-open body { overflow:hidden !important; }

/* ════════════ BIBLIO : marque-page recalé (ne flotte plus dans l'arrondi) ════════════ */
html.app-mode .bib-bookmark {
  top:7px !important; right:7px !important; width:9px !important; height:9px !important;
  border-radius:3px !important; clip-path:none !important; filter:none !important;
  box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
}

/* ════════════ WISHLIST : refonte simple & épurée (on retire le style « ticket ») ════════════ */
html.app-mode .wl-flip-card {
  perspective:none !important; height:auto !important; min-height:0 !important;
  background:#fff !important; border-radius:16px !important; overflow:hidden !important;
  box-shadow:0 6px 16px rgba(150,130,170,.18) !important; padding:0 0 8px !important;
  display:flex !important; flex-direction:column !important;   /* aligne tout : ACHETER en bas */
}
html.app-mode .wl-flip-inner {
  transform:none !important; transform-style:flat !important; position:static !important; height:auto !important;
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important; width:100% !important;
}
html.app-mode .wl-flip-front, html.app-mode .wl-flip-back {
  position:static !important; transform:none !important; backface-visibility:visible !important; -webkit-backface-visibility:visible !important;
  inset:auto !important; clip-path:none !important;   /* retire l'effet papier déchiré (zigzag) */
  width:100% !important; height:auto !important; background:transparent !important; box-shadow:none !important;
  font-family:'Quicksand', sans-serif !important;
}
html.app-mode .wl-flip-front { flex:0 0 auto !important; padding:0 !important; }
html.app-mode .wl-flip-back { flex:1 1 auto !important; display:flex !important; flex-direction:column !important; padding:8px 10px 0 !important; cursor:pointer !important; }
html.app-mode .wl-receipt-footer { border-top:none !important; margin-top:auto !important; padding:0 !important; }   /* ACHETER collé en bas → aligné entre cartes */
/* on masque les décos « ticket » + les lignes qui cassent l'alignement (priorité/note) */
html.app-mode .wl-card-stars, html.app-mode .wl-card-barcode, html.app-mode .wl-card-cut,
html.app-mode .wl-card-bottom, html.app-mode .wl-receipt-header, html.app-mode .wl-receipt-divider,
html.app-mode .wl-receipt-sep, html.app-mode .wl-receipt-label,
html.app-mode .wl-receipt-prio, html.app-mode .wl-receipt-note { display:none !important; }
/* image produit : format portrait, AFFICHÉE EN ENTIER (contain), plus de recadrage carré */
html.app-mode .wl-card-img {
  width:100% !important; aspect-ratio:4/5 !important; max-height:none !important; flex:0 0 auto !important;
  border:none !important; border-radius:13px !important; overflow:hidden !important;
  background:#faf7fc !important; display:flex !important; align-items:center !important; justify-content:center !important;
  margin:0 !important; padding:6px !important; position:relative !important; box-sizing:border-box !important;
}
html.app-mode .wl-prod-img { max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; }
html.app-mode .wl-card-img-placeholder { font-size:2rem !important; }
/* nom : 2 lignes max + hauteur fixe → statut/prix alignés entre cartes */
html.app-mode .wl-receipt-name {
  font-family:'Quicksand', sans-serif !important; font-weight:800 !important; color:var(--ink) !important;
  font-size:13px !important; text-align:center !important; line-height:1.25 !important; margin:0 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important; min-height:2.5em !important;
}
html.app-mode .wl-receipt-body, html.app-mode .wl-receipt-total { padding:0 !important; margin:6px 0 0 !important; background:transparent !important; }
html.app-mode .wl-receipt-row { display:flex !important; justify-content:center !important; align-items:center !important; gap:6px !important; }
html.app-mode .wl-receipt-status {
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important; border-radius:10px !important;
  padding:2px 9px !important; font-size:11px !important;
}
html.app-mode .wl-receipt-price-val { font-family:'Quicksand', sans-serif !important; font-weight:800 !important; color:var(--accent-ink) !important; font-size:14px !important; }
html.app-mode .wl-receipt-buy-btn {
  display:block !important; background:var(--accent-grad) !important; color:#fff !important;
  border-radius:12px !important; padding:7px 0 !important; text-align:center !important;
  font-family:'Quicksand', sans-serif !important; font-weight:700 !important; font-size:12px !important;
  text-decoration:none !important; margin-top:8px !important; border:none !important;
}
html.app-mode .wl-receipt-no-link { font-family:'Quicksand', sans-serif !important; color:var(--soft) !important; font-size:11px !important; display:block !important; text-align:center !important; margin-top:8px !important; }
html.app-mode .wl-card-heart { width:26px !important; height:26px !important; top:6px !important; right:6px !important; left:auto !important; }
/* Bouton + : plus de caddie, un vrai « + » rond. Tri + ajout poussés À DROITE (comme les autres pages) */
html.app-mode .wl-toolbar-left { flex:1 1 auto !important; }
html.app-mode .wl-toolbar-left .wl-sort-wrap { margin-left:auto !important; }
html.app-mode .wl-add-item-btn {
  width:34px !important; height:34px !important; border-radius:50% !important; flex-shrink:0 !important;
  background:var(--accent-grad) !important; box-shadow:0 3px 10px rgba(150,130,170,.3) !important; border:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; overflow:hidden !important;
}
html.app-mode .wl-add-item-btn img { display:none !important; }
html.app-mode .wl-add-item-btn::after { content:'+' !important; color:#fff !important; font-size:1.45rem !important; font-weight:400 !important; line-height:1 !important; }

/* ════════════════════════════════════════════════════════════════
   POPUPS UNIFIÉS — Biblio / Watching / Wishlist (MÊME style que Gaming)
   Crème + Quicksand + champs pastel + boutons violet/dégradé (1 seul style app).
   (bib + watch partagent .bib-field/.bib-btn-* ; wl a .wl-form-*/.wl-btn-*)
   ════════════════════════════════════════════════════════════════ */
/* Backdrops : flou doux (z-index + safe-area + lock déjà gérés ailleurs) */
html.app-mode .bib-modal-overlay,
html.app-mode .bib-edit-overlay,
html.app-mode .watch-add-overlay,
html.app-mode .wl-modal-overlay {
  background:rgba(93,85,102,.40) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
  padding:calc(1rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom)) !important;
}
/* Conteneurs : crème plush */
html.app-mode .bib-modal,
html.app-mode .bib-edit-modal,
html.app-mode .watch-add-modal,
html.app-mode .wl-modal {
  background:#FFFDFB !important; border-radius:26px !important; max-width:440px !important;
  box-shadow:0 24px 64px rgba(120,100,150,.32) !important; color:var(--ink) !important;
}
html.app-mode .bib-modal *, html.app-mode .bib-edit-modal *, html.app-mode .watch-add-modal *, html.app-mode .wl-modal * { font-family:'Quicksand', system-ui, sans-serif !important; }
/* Fermer ✕ */
html.app-mode .bib-modal-close, html.app-mode .bib-edit-close, html.app-mode .watch-add-close, html.app-mode .wl-modal-close {
  background:#f3eef8 !important; color:var(--soft) !important; width:34px !important; height:34px !important;
  border-radius:50% !important; border:none !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
/* Titres de popup */
html.app-mode .watch-add-title, html.app-mode .wl-modal-title, html.app-mode .bib-edit-title {
  color:var(--ink) !important; font-weight:800 !important; font-size:1.12rem !important; letter-spacing:0 !important; text-transform:none !important;
}
/* on retire les bandeaux de header colorés du site (ex : jaune wishlist) */
html.app-mode .wl-modal-header { background:transparent !important; padding:1.1rem 1.2rem .3rem !important; border:none !important; }
/* Vue Biblio : image en haut (centrée) mais infos À GAUCHE (plus de tout-centré) */
html.app-mode .bib-modal-hero { border-bottom:1px solid rgba(150,130,170,.12) !important; align-items:stretch !important; gap:.5rem !important; }
html.app-mode .bib-modal-cover { align-self:center !important; }
html.app-mode .bib-modal-meta { text-align:left !important; width:100% !important; }
html.app-mode .bib-modal-actions { justify-content:flex-start !important; }
/* Labels */
html.app-mode .bib-field label, html.app-mode .wl-form-label {
  color:var(--soft) !important; font-weight:700 !important; font-size:.68rem !important; text-transform:uppercase !important; letter-spacing:.04em !important;
}
/* Champs : input / select / textarea — 16px = empêche le zoom auto iOS. (.bib-field couvre bib + bib-edit + watch) */
html.app-mode .bib-field input, html.app-mode .bib-field select,
html.app-mode .wl-modal input, html.app-mode .wl-modal select {
  background:var(--accent-bg) !important; border:1.5px solid rgba(120,100,150,.16) !important; border-radius:12px !important;
  color:var(--ink) !important; font-weight:600 !important; font-size:16px !important; height:42px !important; padding:0 .75rem !important; box-sizing:border-box !important;
}
html.app-mode .bib-field textarea, html.app-mode .wl-modal textarea {
  background:var(--accent-bg) !important; border:1.5px solid rgba(120,100,150,.16) !important; border-radius:12px !important;
  color:var(--ink) !important; font-weight:600 !important; font-size:16px !important; padding:.5rem .75rem !important; box-sizing:border-box !important;
}
html.app-mode .bib-field input:focus, html.app-mode .bib-field select:focus, html.app-mode .bib-field textarea:focus,
html.app-mode .wl-modal input:focus, html.app-mode .wl-modal select:focus, html.app-mode .wl-modal textarea:focus {
  border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg) !important; outline:none !important;
}
/* Boutons : Enregistrer/Ajouter = dégradé violet ; Supprimer = rose ; Modifier/Lore = pastel */
html.app-mode .bib-btn-save, html.app-mode .wl-btn-save {
  background:var(--accent-grad) !important; color:#fff !important; border:none !important;
  border-radius:14px !important; font-weight:700 !important; font-size:.85rem !important; height:42px !important;
  box-shadow:0 4px 12px rgba(150,130,170,.32) !important;
}
html.app-mode .bib-btn-delete, html.app-mode .wl-btn-delete {
  background:#fbe0e6 !important; color:#d6688a !important; border:none !important; border-radius:14px !important; font-weight:700 !important; height:42px !important;
}
html.app-mode .bib-btn-edit { background:var(--mint-bg) !important; color:#3e9b73 !important; border:none !important; border-radius:14px !important; font-weight:700 !important; }
html.app-mode .bib-btn-lore { background:var(--accent-bg) !important; color:var(--accent-ink) !important; border:none !important; border-radius:14px !important; font-weight:700 !important; }
html.app-mode .wl-form-check { font-weight:700 !important; color:var(--ink) !important; }
/* Upload jaquette / affiche / image */
html.app-mode .bib-upload-label, html.app-mode .wl-img-upload-label {
  background:var(--accent-bg) !important; border:1.5px dashed var(--accent) !important; border-radius:12px !important; color:var(--soft) !important; font-weight:600 !important;
}
html.app-mode .bib-cover-preview, html.app-mode .wl-img-preview { border-radius:12px !important; }
/* Vue Biblio (détails livre) */
html.app-mode .bib-modal-title { color:var(--ink) !important; font-weight:800 !important; }
html.app-mode .bib-modal-author { color:var(--soft) !important; }
html.app-mode .bib-modal-cover { border-radius:12px !important; box-shadow:0 6px 18px rgba(150,130,170,.28) !important; }
html.app-mode .bib-modal-details { color:var(--ink) !important; }
html.app-mode .bib-arrow-btn { background:var(--accent-bg) !important; color:var(--accent) !important; border:none !important; border-radius:10px !important; }

/* ════════════════════════════════════════════════════════════════
   LOT 3 — « Mes dossiers Lore » : explorateur en LISTE + éditeur simple
   Remplace tout le bureau Windows XP par une liste app épurée.
   ════════════════════════════════════════════════════════════════ */

/* Accent dédié : menthe/teal pastel (clin d'œil à l'ancien bureau teal) */
html.app-mode body.lore-active{
  --accent:#5bb1ab !important;
  --accent-bg:#e6f5f3 !important;
  --accent-ink:#327f79 !important;
  --accent-grad:linear-gradient(135deg,#7fcac4 0%,#a6ddd8 100%) !important;
}

/* ── Le site transforme lore en BUREAU plein écran (header masqué, contenu
      centré, fond blanc, pas de scroll). On annule tout ça pour retrouver
      une page app NORMALE (titre visible + scroll de page + fond macaron). ── */
html.app-mode body.lore-active #main-header{ display:block !important; }
html.app-mode body.lore-active .main-col{ background:transparent !important; }
html.app-mode body.lore-active .search-wrap{ background:transparent !important; }
html.app-mode body.lore-active .main-content{
  background:transparent !important;
  padding:2px 21px 116px !important;     /* = autres pages (clearance barre du bas) */
  overflow:visible !important;
  display:block !important;
}
html.app-mode body.lore-active #section-lore.active{
  display:block !important;              /* annule flex + justify-content:center */
}
html.app-mode body.lore-active .welcome-heading{
  color:var(--ink) !important; text-shadow:none !important;
}

/* ── Masquer tout le décor Windows (bureau, Clippy, corbeille, taskbar) ── */
html.app-mode #section-lore .lore-desktop-icons,
html.app-mode #section-lore .lore-taskbar,
html.app-mode #section-lore .lore-clippy{ display:none !important; }

/* ── Cadre : flux normal, sans le fond teal ni le padding « écran » ── */
html.app-mode #section-lore .lore-spa-frame{
  display:block !important;
  flex:none !important;
  background:transparent !important;
  padding:0 !important;
  overflow:visible !important;
}

/* ── Fenêtre explorateur : on retire l'échelle (scale .52) + le chrome XP ── */
html.app-mode #section-lore .lore-explorer{
  transform:none !important;
  display:block !important;
  flex:none !important;
  min-height:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* ── Barre de titre XP (bleue) → masquée (le header de page affiche le titre) ── */
html.app-mode #section-lore .lore-explorer > .xp-titlebar{ display:none !important; }

/* ── Toolbar (Nouveau / Retour / recherche) → rangée de boutons app ── */
html.app-mode #section-lore .xp-toolbar{
  background:transparent !important;
  border:none !important;
  padding:2px 2px 12px !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  font-family:'Quicksand',sans-serif !important;
  font-size:14px !important;
}
html.app-mode #section-lore .xp-toolbar-btn{
  font-family:'Quicksand',sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  color:var(--accent-ink) !important;
  background:var(--accent-bg) !important;
  border:none !important; border-radius:13px !important;
  height:42px !important; padding:0 16px !important; gap:6px !important;
  align-items:center !important;
  box-shadow:0 2px 8px rgba(120,100,150,.10) !important;
}
/* ⚠️ PAS de display:inline-flex forcé : le site cache le bon bouton via
   style.display='none' (racine = pas de « Nouveau fichier » ; dossier = pas de
   « Nouveau dossier »). Un !important sur display écraserait ce masquage.
   On ne force inline-flex QUE sur les boutons visibles (pas masqués en inline). */
html.app-mode #section-lore .xp-toolbar-btn:not([style*="display: none"]):not([style*="display:none"]){
  display:inline-flex !important;
}
html.app-mode #section-lore .xp-toolbar-btn:active{ transform:scale(.96) !important; }
html.app-mode #section-lore .xp-toolbar-btn[disabled]{ opacity:.38 !important; }
/* « Retour » poussé tout à DROITE (comme +/tri des autres pages) */
html.app-mode #section-lore #lore-back-btn{ margin-left:auto !important; }
/* chemin (breadcrumb « Lore \ … ») masqué (Bibi : on l'enlève) */
html.app-mode #section-lore #lore-address{ display:none !important; }
/* recherche (si activée) */
html.app-mode #section-lore #lore-search-input{
  font-family:'Quicksand',sans-serif !important; font-size:16px !important;
  background:#fff !important; border:1.5px solid var(--accent-bg) !important;
  border-radius:12px !important; padding:8px 12px !important; color:#5a5168 !important;
}

/* ── Zone des fichiers : flux normal transparent (la PAGE scrolle) ── */
html.app-mode #section-lore .xp-icon-area{
  display:block !important;
  flex:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:none !important;
  padding:0 2px !important;
}

/* ── La grille d'icônes devient une LISTE verticale ── */
html.app-mode #section-lore .xp-icon-grid{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-content:stretch !important;
  gap:9px !important;
  padding:2px 2px 16px !important;
}

/* ── Chaque dossier / fichier = une ligne « carte » app ── */
html.app-mode #section-lore .xp-icon{
  flex-direction:row !important;
  align-items:center !important;
  width:auto !important;
  gap:14px !important;
  padding:12px 14px !important;
  background:#fff !important;
  border-radius:16px !important;
  box-shadow:0 2px 10px rgba(120,100,150,.07) !important;
  text-align:left !important;
}
html.app-mode #section-lore .xp-icon:active{
  transform:scale(.985) !important;
  background:var(--accent-bg) !important;
}

/* Icône PNG : taille fixe à gauche */
html.app-mode #section-lore .xp-icon .xp-icon-png{
  width:38px !important; height:38px !important;
  flex:0 0 38px !important; margin:0 !important;
}
/* Icônes dessinées (dossier/fichier) : réduites proportionnellement (zoom = scale + layout) */
html.app-mode #section-lore .xp-icon .xp-folder-img,
html.app-mode #section-lore .xp-icon .xp-file-img{
  zoom:.62 !important; margin:0 !important; flex:0 0 auto !important;
}

/* Libellé : nom du dossier/fichier, police app, aligné à gauche, occupe la largeur */
html.app-mode #section-lore .xp-icon .xp-icon-label{
  color:#4a4458 !important;
  font-family:'Quicksand',sans-serif !important;
  font-size:15.5px !important; font-weight:600 !important;
  text-align:left !important;
  flex:1 1 auto !important; min-width:0 !important;
  white-space:normal !important;
  max-width:none !important;
  background:transparent !important;
  padding:0 !important; margin:0 !important;
  text-shadow:none !important;
}
/* petit chevron « ouvrir » à droite */
html.app-mode #section-lore .xp-icon::after{
  content:'' !important;
  flex:0 0 auto !important;
  width:8px !important; height:8px !important;
  border-right:2px solid #cfc6de !important;
  border-bottom:2px solid #cfc6de !important;
  transform:rotate(-45deg) !important;
  margin-right:4px !important;
  align-self:center !important;
}

/* ── Barre de statut : petit texte discret ── */
html.app-mode #section-lore .xp-statusbar{
  background:transparent !important;
  border:none !important;
  font-family:'Quicksand',sans-serif !important;
  font-size:12px !important; color:#b3aac4 !important;
  padding:2px 6px 8px !important;
}

/* ════════════════════════════════════════════════════════════════
   ÉDITEUR DE TEXTE LORE — refonte « simple » en style app
   ════════════════════════════════════════════════════════════════ */

/* Accent menthe + PLEIN ÉCRAN immersif (au-dessus de la barre du bas z=9000) */
html.app-mode #lore-editor-overlay{
  --accent:#5bb1ab; --accent-bg:#e6f5f3; --accent-ink:#327f79;
  --accent-grad:linear-gradient(135deg,#7fcac4 0%,#a6ddd8 100%);
  z-index:9500 !important;
  background:#fffdfb !important;           /* page entière opaque (plus de fond sombre) */
  padding:0 !important;
  align-items:stretch !important; justify-content:flex-start !important;
}

/* Fenêtre : PLEIN ÉCRAN, fond crème, police app */
html.app-mode #lore-editor-overlay .lore-editor-win{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  background:#fffdfb !important;
  border:none !important; border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  font-family:'Quicksand',sans-serif !important;
}

/* On enlève TOUTE la barre d'outils (Bibi ne s'en sert pas) */
html.app-mode #lore-editor-overlay .lore-editor-toolbar{ display:none !important; }

/* Barre de titre → TITRE DE PAGE de l'app (gros, gras, ink) ; plus de 📄 ni ✕ */
html.app-mode #lore-editor-overlay .xp-titlebar{
  order:0 !important;
  background:transparent !important; border:none !important;
  padding:calc(var(--safe-top, 0px) + 16px) 20px 4px !important;
  min-height:0 !important; display:block !important;
}
html.app-mode #lore-editor-overlay .xp-titlebar-icon,
html.app-mode #lore-editor-overlay .xp-win-btns{ display:none !important; }
html.app-mode #lore-editor-overlay .xp-titlebar-title,
html.app-mode #lore-editor-overlay #lore-editor-title{
  font-family:'Quicksand',sans-serif !important;
  font-size:1.85rem !important; font-weight:800 !important;
  color:var(--ink) !important; letter-spacing:-0.01em !important;
  line-height:1.15 !important; text-shadow:none !important;
  display:block !important; white-space:normal !important;
}

/* Pied de page → RANGÉE sous le titre : « Dernière sauvegarde » à gauche, boutons menthe à droite */
html.app-mode #lore-editor-overlay .lore-editor-footer{
  order:1 !important;
  background:transparent !important; border:none !important;
  padding:6px 20px 12px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  font-family:'Quicksand',sans-serif !important;
}
/* « Dernière sauvegarde » à gauche, discret */
html.app-mode #lore-editor-overlay #lore-editor-savedinfo{
  font-family:'Quicksand',sans-serif !important; font-size:12px !important;
  color:#a99fc0 !important; font-weight:600 !important; flex:0 1 auto !important;
}
/* on MASQUE la partie « Lien » (1er div du footer) */
html.app-mode #lore-editor-overlay .lore-editor-footer > div:first-of-type{ display:none !important; }
/* groupe de boutons (dernier div) → tout à droite */
html.app-mode #lore-editor-overlay .lore-editor-footer > div:last-of-type{
  display:flex !important; gap:8px !important; margin-left:auto !important; flex:0 0 auto !important;
}
/* boutons Enregistrer / Retour → style app menthe */
html.app-mode #lore-editor-overlay .lore-ed-save{
  font-family:'Quicksand',sans-serif !important; font-size:14px !important; font-weight:700 !important;
  border:none !important; border-radius:12px !important; padding:10px 16px !important;
  white-space:nowrap !important;
}
html.app-mode #lore-editor-overlay .lore-ed-save[onclick*="loreSaveFile"]{   /* Enregistrer = primaire */
  background:var(--accent-grad) !important; color:#fff !important;
  box-shadow:0 4px 12px rgba(91,177,171,.30) !important;
}
html.app-mode #lore-editor-overlay .lore-ed-save[onclick*="loreCloseEditor"]{ /* Retour = secondaire */
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
}
html.app-mode #lore-editor-overlay .lore-ed-save:active{ transform:scale(.96) !important; }

/* Zone d'écriture : sous les boutons, plein espace, police app FORCÉE (Quicksand) */
html.app-mode #lore-editor-overlay .lore-editor-body{
  order:2 !important;
  flex:1 1 auto !important;
  background:#fff !important;
  border-top:1px solid rgba(120,100,150,.10) !important;
  font-family:'Quicksand',sans-serif !important;
  font-size:16px !important; line-height:1.7 !important;
  color:#4a4458 !important;
  padding:20px 20px calc(var(--safe-bottom, 0px) + 36px) !important;
  -webkit-overflow-scrolling:touch !important;
}
/* Tout le texte s'affiche en Quicksand DANS L'APP (le contenu enregistré n'est PAS
   modifié → le vrai site garde les vraies polices d'origine) */
html.app-mode #lore-editor-overlay .lore-editor-body *{
  font-family:'Quicksand',sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════
   PAGE HABIT TRACKER (section-habits) — le site la force en DARK MODE.
   En app : header + toolbar EXACTEMENT comme Gaming (filtre à gauche,
   + à droite, Archivé à sa gauche, pas de YIP). Accent VERT pastel.
   ════════════════════════════════════════════════════════════════ */
html.app-mode body.habit-active{
  --accent:#5cb87a !important;
  --accent-bg:#e7f5ea !important;
  --accent-ink:#3d8a57 !important;
  --accent-grad:linear-gradient(135deg,#7fd49a 0%,#aee6bf 100%) !important;
}
/* Annule le fond sombre que le site applique à la colonne droite (avatar, etc.) */
html.app-mode body.habit-active .aside-col,
html.app-mode body.habit-active .main-content::-webkit-scrollbar-thumb{ background:transparent !important; }
/* ⚠️ Le site met #main-header-row{min-height:80px} sur habit → le titre descend
   et n'est plus sur le même axe Y que Gaming. On annule pour aligner sur Gaming. */
html.app-mode body.habit-active #main-header-row{ min-height:0 !important; }

/* Barre d'outils = MÊME flex que Gaming/Watching/etc. */
html.app-mode #section-habits .habit-toolbar{
  display:flex !important; align-items:center !important; gap:9px !important;
  flex-wrap:wrap !important; margin:0 0 16px !important; padding:0 !important;
  background:transparent !important; border:none !important;
}
/* Le groupe de plages devient le bouton-filtre (à GAUCHE, comme Gaming) */
html.app-mode #section-habits .habit-range-btns{ order:1 !important; flex:0 0 auto !important; gap:0 !important; }
/* YIP supprimé de la page (Bibi : on l'enlève — il reste accessible ailleurs) */
html.app-mode #section-habits .habit-yip-btn{ display:none !important; }
/* « Archivé » → pilule, poussée à DROITE (juste à gauche du +) */
html.app-mode #section-habits #habitArchiveBtn{
  order:4 !important; flex:0 0 auto !important; margin-left:auto !important;
  background:var(--accent-bg) !important; border:none !important; color:var(--accent-ink) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:13.5px !important;
  border-radius:13px !important; padding:0 16px !important; height:42px !important;
}
html.app-mode #section-habits #habitArchiveBtn.active{ background:var(--accent) !important; color:#fff !important; }
html.app-mode #section-habits #habitArchiveBtn:active,
html.app-mode #section-habits .habit-add-btn:active{ transform:scale(.95) !important; }
/* Bouton « + » → à DROITE, identique à Gaming */
html.app-mode #section-habits .habit-add-btn{
  order:5 !important; flex:0 0 auto !important;
  width:42px !important; height:42px !important; border-radius:13px !important;
  background:var(--accent-grad) !important; color:#fff !important; border:none !important;
  font-size:22px !important; box-shadow:0 6px 16px rgba(92,184,122,.28) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}

/* Cartes d'habitude → BLANCHES arrondies (au lieu du #242428 sombre) */
html.app-mode #section-habits .habit-card{
  background:#fff !important; border:none !important;
  border-radius:16px !important; box-shadow:0 3px 12px rgba(120,140,120,.10) !important;
  padding:12px 14px !important;
}
html.app-mode #section-habits .habit-card-title{
  color:var(--ink) !important; font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
}
html.app-mode #section-habits .habit-card-desc{ color:var(--soft) !important; font-family:'Quicksand',sans-serif !important; }
html.app-mode #section-habits .habit-card-icon{ border-radius:11px !important; }
/* Poignée de réorg du site (6 points) MASQUÉE → on utilise l'appui-long comme le tiroir */
html.app-mode #section-habits .habit-drag-handle{ display:none !important; }
/* Bouton MODIFIER (carte) → pastille verte douce */
html.app-mode #section-habits .habit-edit-btn{
  background:var(--accent-bg) !important; color:var(--accent-ink) !important; border-radius:9px !important;
}
/* Carrés du heatmap : « 7 jours » (grands, 18px) = référence à 3px. Les petits carrés
   de 1 mois / 12 mois paraissaient TROP arrondis car 3px sur un petit carré = proportion
   élevée → on les rend plus NETS (moins de rayon) pour le même rendu que « 7 jours ». */
html.app-mode #section-habits .habit-grid[data-range="week"] .hday{ border-radius:3px !important; }
html.app-mode #section-habits .habit-grid[data-range="30days"] .hday{ border-radius:1.5px !important; }
html.app-mode #section-habits .habit-grid[data-range="12mo"] .hday{ border-radius:1px !important; }
/* Message vide lisible */
html.app-mode #section-habits .habit-empty{
  color:var(--soft) !important; font-family:'Quicksand',sans-serif !important;
  background:#fff !important; border-radius:14px !important; padding:22px 16px !important;
  box-shadow:0 3px 12px rgba(120,140,120,.09) !important;
}
/* Jiggle de réorg (appui long) sur les cartes — même rendu que le tiroir */
html.app-mode #section-habits.reordering .habit-card,
html.app-mode #section-habits .habit-list.reordering .habit-card{ animation:app-wobble .3s ease-in-out infinite !important; }
html.app-mode .habit-card.app-rchosen{ box-shadow:0 10px 26px rgba(92,184,122,.30) !important; opacity:.96 !important; }
html.app-mode .habit-card.app-rghost{ opacity:.4 !important; }

/* ════════════════════════════════════════════════════════════════
   YEAR IN PIXELS — vraie PAGE (plus une popup). Header type Gaming,
   légende EN HAUT sur 2 lignes. On quitte via la barre du bas
   (YIP sous z=9000 + retiré du verrou de scroll dans app-shell).
   ════════════════════════════════════════════════════════════════ */
html.app-mode .yip-overlay{
  --accent:#7c4dd6; --accent-bg:#efe9fb; --accent-ink:#6f5aa8;
  --accent-grad:linear-gradient(135deg,#a78bfa 0%,#c4b5fd 100%);
}
html.app-mode .yip-overlay.open{
  display:block !important;
  position:fixed !important; inset:0 !important;
  z-index:8500 !important;                          /* SOUS la barre du bas (9000) */
  opacity:1 !important; pointer-events:auto !important;
  background:linear-gradient(170deg,#f3effb 0%,#fdf6f4 48%,#fef6ef 100%) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding:0 !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
}
/* La « modale » devient le conteneur de page (transparent, pleine largeur, pas d'anim) */
html.app-mode .yip-overlay .yip-modal{
  background:transparent !important; box-shadow:none !important;
  border-radius:0 !important; max-width:none !important; width:auto !important;
  max-height:none !important; overflow:visible !important; transform:none !important;
  padding:max(16px,calc(var(--safe-top,0px) + 8px)) 18px calc(116px + var(--safe-bottom,0px)) !important;
}
/* On quitte via la barre du bas (comme les autres pages) → pas de ✕ */
html.app-mode .yip-overlay .yip-close{ display:none !important; }

/* Header type Gaming : gros titre ink à gauche + nav année à droite */
html.app-mode .yip-overlay .yip-header{
  margin-bottom:14px !important; gap:12px !important; padding-right:0 !important;
  align-items:center !important; justify-content:space-between !important;
}
html.app-mode .yip-overlay .yip-title{
  font-family:'Quicksand',sans-serif !important;
  font-size:1.7rem !important; font-weight:800 !important; color:var(--ink) !important;
  letter-spacing:-0.01em !important; text-transform:none !important;
}
html.app-mode .yip-overlay .yip-year-nav{ gap:6px !important; }
html.app-mode .yip-overlay .yip-year-btn{
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
  border:none !important; border-radius:10px !important; width:34px !important; height:34px !important;
}
html.app-mode .yip-overlay .yip-year-label{
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; color:var(--ink) !important;
}

/* Titre cliquable (ouvre le tiroir, comme les autres pages) */
html.app-mode .yip-overlay .yip-title{ cursor:pointer !important; }

/* Corps : légende AU-DESSUS de la grille (order), tout CENTRÉ.
   ⚠️ gap:0 — le site met un row-gap de ~22px qui créait l'écart (ma marge ne suffisait pas). */
html.app-mode .yip-overlay .yip-body{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:0 !important; }
/* Légende EN HAUT — MÊME LARGEUR que la grille (width:100% max-width:480) + écart réduit de moitié (9px) */
html.app-mode .yip-overlay .yip-legend{
  order:-1 !important;
  display:grid !important;
  grid-template-columns:repeat(3,auto) !important;    /* colonnes au contenu → labels non tronqués */
  justify-content:space-between !important; align-items:center !important;
  gap:12px 14px !important; min-width:0 !important; padding:14px 18px !important;
  margin:4px auto 18px !important; width:100% !important; max-width:480px !important; box-sizing:border-box !important;   /* +14px header mb en haut = ~18px ; 18px en bas → légende CENTRÉE verticalement entre titre et grille */
  background:#fff !important; border-radius:16px !important;
  box-shadow:0 2px 10px rgba(120,100,150,.07) !important;
}
html.app-mode .yip-overlay .yip-legend-item{ gap:8px !important; min-width:0 !important; }
/* pastille « changer la couleur » (input color) masquée en app */
html.app-mode .yip-overlay .yip-color-input{ display:none !important; }
html.app-mode .yip-overlay .yip-legend-label{
  font-family:'Quicksand',sans-serif !important; font-size:13px !important;
  font-weight:600 !important; color:var(--ink) !important;
  white-space:nowrap !important; overflow:visible !important;   /* labels courts → pas de troncature */
}
html.app-mode .yip-overlay .yip-legend-swatch{ width:18px !important; height:18px !important; border-radius:6px !important; flex:0 0 auto !important; }

/* Grille : grande carte blanche PLEINE LARGEUR centrée. Carrés calibrés pour que
   les 12 mois tiennent SANS scroll horizontal (toute l'année visible). */
html.app-mode .yip-overlay .yip-grid-wrap{
  background:#fff !important; border-radius:18px !important;
  padding:16px 10px !important; box-shadow:0 3px 14px rgba(120,100,150,.07) !important;
  width:100% !important; max-width:480px !important; margin:0 auto !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
}
html.app-mode .yip-overlay .yip-table{ margin:0 auto !important; border-spacing:3px !important; }
html.app-mode .yip-overlay .yip-th-month,
html.app-mode .yip-overlay .yip-th-day{
  font-family:'Quicksand',sans-serif !important; color:var(--soft) !important; font-size:.68rem !important;
}
html.app-mode .yip-overlay .yip-th-day{ width:16px !important; }
/* carrés un peu plus grands MAIS calibrés (21px) → 12 mois dans l'écran */
html.app-mode .yip-overlay .yip-cell{ width:21px !important; height:21px !important; border-radius:5px !important; }

/* ════════════════════════════════════════════════════════════════
   BLOC LECTURE — pop-up pages : ligne DATE ajoutée (rattrapage d'un
   jour oublié). Injectée par app-shell.js, stylée comme le pop-up.
   ════════════════════════════════════════════════════════════════ */
html.app-mode .reading-popup-date-edit{
  display:flex !important; align-items:center !important; gap:10px !important; margin:0 0 10px !important;
}
html.app-mode .reading-popup-date-edit .reading-popup-date-label{
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  color:#9a8f7e !important; font-size:14px !important; flex:0 0 auto !important; margin:0 !important;
}
html.app-mode .reading-popup-date-input{
  flex:1 1 auto !important; min-width:0 !important;
  font-family:'Quicksand',sans-serif !important; font-size:16px !important;
  padding:10px 12px !important; border-radius:12px !important;
  border:1px solid rgba(120,100,150,.16) !important; background:#fff !important; color:#5d5566 !important;
}

/* ════════════════════════════════════════════════════════════════
   SUIVI DE JEUX / VISIONNAGE — header type Gaming + sélecteur d'année
   (style YIP) + bloc blanc. Suivi-jeux = violet (déjà mappé) mais le
   site le force en DARK MODE → on neutralise. Suivi-visionnage = gris
   (watch-active, pas de dark mode). Les 2 ont le MÊME style.
   ════════════════════════════════════════════════════════════════ */
/* Annule le bureau sombre que le site applique à Suivi de jeux */
html.app-mode body.suivi-gaming-active .main-col,
html.app-mode body.suivi-gaming-active .search-wrap,
html.app-mode body.suivi-gaming-active #main-header,
html.app-mode body.suivi-gaming-active .main-content{ background:transparent !important; }
html.app-mode body.suivi-gaming-active .welcome-heading{ color:var(--ink) !important; }
html.app-mode body.suivi-gaming-active #main-header-row{ min-height:0 !important; }

/* Toolbar = rangée app (comme Gaming) sur UNE SEULE LIGNE : Retour à gauche, ‹année›+✏+Année à droite */
html.app-mode .suivi-toolbar,
html.app-mode .suivi-gaming-toolbar{
  display:flex !important; align-items:center !important; gap:5px !important;
  flex-wrap:nowrap !important; margin:0 0 16px !important; padding:0 !important;
  background:transparent !important; border:none !important;
}
/* Le titre dans la toolbar fait doublon avec le grand titre de page → masqué */
html.app-mode .suivi-toolbar-title,
html.app-mode .suivi-gaming-toolbar-title{ display:none !important; }

/* Bouton « ← Retour » → carré arrondi, fond pastel d'accent. Compact pour tenir sur 1 ligne. */
html.app-mode .suivi-back-btn,
html.app-mode .suivi-gaming-back-btn{
  order:1 !important; flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; gap:4px !important;
  height:42px !important; padding:0 11px !important; border-radius:13px !important;
  background:var(--accent-bg) !important; border:none !important; color:var(--accent-ink) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:13px !important;
  box-shadow:0 2px 8px rgba(150,130,170,.10) !important; text-transform:none !important; letter-spacing:0 !important;
  white-space:nowrap !important;
}
/* Sélecteur d'année (style YIP) poussé à DROITE — boutons taille normale, mais le
   label « 2026 » respire (espace ENTRE les chevrons et l'année, pas de boutons + gros). */
html.app-mode .app-year-nav{
  order:2 !important; margin-left:auto !important; flex:0 0 auto !important;   /* 1er du groupe DROIT : pousse ‹année›+✏+Année ensemble à droite */
  display:inline-flex !important; align-items:center !important; gap:9px !important;   /* écart ‹ ↔ 2026 ↔ › augmenté (3→9) */
}
html.app-mode .app-year-btn{
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
  border:none !important; border-radius:12px !important; width:34px !important; height:42px !important;
  font-size:1rem !important; cursor:pointer !important; flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
html.app-mode .app-year-btn:active{ transform:scale(.94) !important; }
html.app-mode .app-year-label{
  font-family:'Quicksand',sans-serif !important; font-weight:800 !important; font-size:1.05rem !important;
  color:var(--ink) !important; min-width:auto !important; text-align:center !important;
}
/* Bouton « + Année » → carré arrondi dégradé d'accent. Compact. */
html.app-mode .suivi-add-year-btn,
html.app-mode .suivi-gaming-add-year-btn{
  order:4 !important; flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; gap:3px !important;
  height:42px !important; padding:0 11px !important; border-radius:13px !important;
  background:var(--accent-grad) !important; border:none !important; color:#fff !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:13px !important;
  box-shadow:0 4px 12px rgba(150,130,170,.28) !important; text-transform:none !important; letter-spacing:0 !important;
  white-space:nowrap !important;
}
html.app-mode .suivi-back-btn:active, html.app-mode .suivi-gaming-back-btn:active,
html.app-mode .suivi-add-year-btn:active, html.app-mode .suivi-gaming-add-year-btn:active{ transform:scale(.96) !important; }

/* Le tableau (1 seule année visible) → BLOC BLANC arrondi comme YIP */
html.app-mode .suivi-table-wrap,
html.app-mode .suivi-gaming-table-wrap{
  background:#fff !important; border-radius:18px !important;
  padding:8px 12px !important; box-shadow:0 3px 14px rgba(120,100,150,.07) !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
}
/* ⚠️ On masque TOUTE la ligne d'en-tête « MOIS / 2026 ✏ » + sa grosse bordure
   (l'année est déjà dans le header de page, le crayon est dans la toolbar) */
html.app-mode .suivi-table thead,
html.app-mode .suivi-gaming-table thead{ display:none !important; }

/* Colonne « Mois » plus étroite */
html.app-mode .suivi-table td:first-child,
html.app-mode .suivi-gaming-table td:first-child{ min-width:0 !important; width:96px !important; }
html.app-mode .suivi-table td,
html.app-mode .suivi-gaming-table td{ min-width:0 !important; }

/* Bordures entre les mois → violet pastel (tons Gaming) */
html.app-mode .suivi-table td,
html.app-mode .suivi-gaming-table td{ border-bottom:1px solid #ECE4FB !important; }
html.app-mode .suivi-table tr:last-child td,
html.app-mode .suivi-gaming-table tr:last-child td{ border-bottom:none !important; }

/* Surlignage de la cellule au clic/édition → violet pastel pâle */
html.app-mode .suivi-entry-cell:hover,
html.app-mode .suivi-gaming-entry-cell:hover{ background:#F5F0FC !important; }

/* Pastille du mois : garde ses couleurs vives mais coins app */
html.app-mode .suivi-month-cell{ border-radius:9px !important; font-family:'Quicksand',sans-serif !important; }
/* Cellules de saisie : lisibles sur fond blanc */
html.app-mode .suivi-entry-text{ font-family:'Quicksand',sans-serif !important; color:var(--ink) !important; }
html.app-mode .suivi-entry-text.empty{ color:var(--soft) !important; }
html.app-mode .suivi-entry-input{
  font-family:'Quicksand',sans-serif !important; font-size:16px !important;
  border:1px solid rgba(120,100,150,.16) !important; border-radius:10px !important;
}

/* Bouton CRAYON dans la toolbar (entre année et +Année) — carré arrondi compact */
html.app-mode .app-edit-btn{
  order:3 !important; flex:0 0 auto !important;
  width:42px !important; height:42px !important; border-radius:13px !important; padding:0 !important;
  background:var(--accent-bg) !important; border:none !important; color:var(--accent-ink) !important;
  font-size:1rem !important; cursor:pointer !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
html.app-mode .app-edit-btn:active{ transform:scale(.95) !important; }
html.app-mode .app-edit-btn.active{ background:var(--accent) !important; color:#fff !important; }
/* le sélecteur d'année garde order:3 mais le crayon doit venir APRÈS lui et AVANT +Année */
html.app-mode .app-year-nav{ order:2 !important; }
html.app-mode .suivi-add-year-btn,
html.app-mode .suivi-gaming-add-year-btn{ order:4 !important; }
/* VERROUILLÉ (crayon OFF) : curseur normal sur les cellules (pas « éditable »), pas de hover */
html.app-mode .suivi-table-wrap:not(.suivi-editing) .suivi-entry-cell,
html.app-mode .suivi-gaming-table-wrap:not(.suivi-editing) .suivi-gaming-entry-cell{ cursor:default !important; }
html.app-mode .suivi-table-wrap:not(.suivi-editing) .suivi-entry-cell:hover,
html.app-mode .suivi-gaming-table-wrap:not(.suivi-editing) .suivi-gaming-entry-cell:hover{ background:transparent !important; }
html.app-mode .suivi-table-wrap:not(.suivi-editing) .suivi-entry-edit{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   PICKER d'icône (Suivi de jeux) — restylé comme les popups de l'app
   (crème clair, accent violet de Gaming) au lieu du violet foncé.
   ════════════════════════════════════════════════════════════════ */
html.app-mode #sg-icon-picker-backdrop{
  --accent:#B9A4E8; --accent-bg:#ECE4FB; --accent-ink:#6f5aa8;
  --accent-grad:linear-gradient(135deg,#B9A4E8,#F4A6C4);
  background:rgba(60,52,78,.42) !important;
  -webkit-backdrop-filter:blur(3px) !important; backdrop-filter:blur(3px) !important;
  padding:0 26px !important;                  /* marge latérale → le modal ne touche plus les bords (plus étroit que l'écran) */
}
html.app-mode .sg-picker-modal{
  background:#fffdfb !important; border:none !important; border-radius:22px !important;
  box-shadow:0 24px 64px rgba(60,40,90,.30) !important;
  font-family:'Quicksand',sans-serif !important;
  width:100% !important; max-width:420px !important;   /* marge latérale du backdrop + max-width = popup étroit comme les autres */
}
html.app-mode .sg-picker-header{
  border-bottom:1px solid rgba(120,100,150,.10) !important; padding:14px 16px !important;
}
html.app-mode .sg-picker-title{
  font-family:'Quicksand',sans-serif !important; font-weight:800 !important;
  font-size:1.05rem !important; color:var(--ink) !important;
}
html.app-mode .sg-picker-close{
  background:#f3eef8 !important; color:#8b7fa6 !important;
  width:30px !important; height:30px !important;
}
html.app-mode .sg-picker-upload{ border-bottom:1px solid rgba(120,100,150,.10) !important; padding:12px 16px !important; }
html.app-mode .sg-picker-upload-btn{
  background:var(--accent-grad) !important; color:#fff !important; border:none !important;
  border-radius:12px !important; height:42px !important; padding:0 16px !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
}
html.app-mode .sg-picker-upload-btn:active{ transform:scale(.96) !important; }
html.app-mode .sg-picker-history-title{
  color:var(--soft) !important; font-family:'Quicksand',sans-serif !important;
  font-weight:800 !important; padding:12px 16px 6px !important;
}
html.app-mode .sg-picker-history{ padding:6px 16px 16px !important; gap:10px !important; }
html.app-mode .sg-hist-item{ border-radius:12px !important; border-color:transparent !important; box-shadow:0 2px 8px rgba(120,100,150,.12) !important; }
/* croix « retirer » de l'historique : toujours visible (pas de hover sur mobile) + pastille rose */
html.app-mode .sg-hist-del{
  display:flex !important; background:#fbe0e6 !important; color:#d6618a !important;
  width:20px !important; height:20px !important; font-size:.7rem !important; font-weight:700 !important;
  box-shadow:0 1px 4px rgba(0,0,0,.15) !important;
}
html.app-mode .sg-picker-empty{ color:var(--soft) !important; font-family:'Quicksand',sans-serif !important; }

/* ════════════════════════════════════════════════════════════════
   CALENDRIER GAMING — refonte app épurée (blanc/gris, events en couleur)
   Inspiré de la maquette : grille mois + points colorés + liste à venir.
   Accent = violet Gaming (hérité de body.cal-gaming-active si défini).
   ════════════════════════════════════════════════════════════════ */
/* accent dédié BLEU (Bibi : bleu au lieu de violet) */
html.app-mode body.cal-gaming-active{
  --accent:#4f90f7 !important; --accent-bg:#e4eefe !important; --accent-ink:#2f6fd0 !important;
  --accent-grad:linear-gradient(135deg,#5b9bf8 0%,#9cc4fb 100%) !important;
}
/* le site met le heading à "" → on force le titre via app-shell (textContent). Couleur normale. */
html.app-mode body.cal-gaming-active .welcome-heading{ color:var(--ink) !important; }
/* ⚠️ le site masque le header (display:none!important) + fond bleu-gris + padding réduit
   pour cal-gaming → on RÉTABLIT une page app normale (titre visible + fond macaron). */
html.app-mode body.cal-gaming-active #main-header{ display:block !important; }
html.app-mode body.cal-gaming-active .main-col,
html.app-mode body.cal-gaming-active .search-wrap,
html.app-mode body.cal-gaming-active .main-content{ background:transparent !important; }
html.app-mode body.cal-gaming-active .main-content{ padding:2px 21px calc(116px + var(--safe-bottom,0px)) !important; }

/* on MASQUE l'ancien calendrier + les 2 panneaux du bas en app */
html.app-mode #section-cal-gaming .cgcal-wrap,
html.app-mode #section-cal-gaming .cgcal-bottom{ display:none !important; }

/* ── Toolbar (Gérer les jeux + Événement) — style boutons app 42px ── */
html.app-mode #cgapp{ display:block !important; }
html.app-mode #cgapp .cgapp-toolbar{
  display:flex !important; align-items:center !important; gap:8px !important; margin:0 0 16px !important; flex-wrap:nowrap !important;
}
html.app-mode #cgapp .cgapp-games-btn{
  flex:1 1 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important;
  height:42px !important; border-radius:13px !important; border:none !important;
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  box-shadow:0 2px 8px rgba(120,100,150,.10) !important;
}
html.app-mode #cgapp .cgapp-add-btn{
  flex:0 0 auto !important; height:42px !important; padding:0 16px !important; border-radius:13px !important; border:none !important;
  background:var(--accent-grad) !important; color:#fff !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  box-shadow:0 4px 12px rgba(124,106,240,.28) !important; white-space:nowrap !important;
}
html.app-mode #cgapp .cgapp-games-btn:active, html.app-mode #cgapp .cgapp-add-btn:active{ transform:scale(.96) !important; }

/* ── Carte calendrier blanche ── */
html.app-mode #cgapp .cgapp-card{
  background:#fff !important; border-radius:20px !important; padding:16px 14px 18px !important;
  box-shadow:0 3px 16px rgba(120,100,150,.07) !important;
}
html.app-mode #cgapp .cgapp-monthnav{
  display:flex !important; align-items:center !important; justify-content:center !important; gap:18px !important; margin-bottom:14px !important;
}
html.app-mode #cgapp .cgapp-monthlbl{
  font-family:'Quicksand',sans-serif !important; font-weight:800 !important; font-size:1.15rem !important; color:var(--ink) !important;
  min-width:150px !important; text-align:center !important;
}
html.app-mode #cgapp .cgapp-navbtn{
  width:36px !important; height:36px !important; border-radius:11px !important; border:none !important;
  background:var(--accent-bg) !important; color:var(--accent-ink) !important; font-size:1.2rem !important; cursor:pointer !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
html.app-mode #cgapp .cgapp-navbtn:active{ transform:scale(.92) !important; }
/* en-têtes jours */
html.app-mode #cgapp .cgapp-weekdays{
  display:grid !important; grid-template-columns:repeat(7,1fr) !important; margin-bottom:6px !important;
}
html.app-mode #cgapp .cgapp-weekdays span{
  text-align:center !important; font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  font-size:.72rem !important; color:#b9b2c7 !important; letter-spacing:.02em !important;
}
/* grille des jours */
html.app-mode #cgapp .cgapp-grid{
  display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:2px 0 !important;
}
html.app-mode #cgapp .cgapp-cell{
  position:relative !important; background:transparent !important; border:none !important; cursor:pointer !important;
  aspect-ratio:1 !important; display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:3px !important; padding:0 !important;
  font-family:'Quicksand',sans-serif !important;
}
html.app-mode #cgapp .cgapp-cell.empty{ pointer-events:none !important; }
html.app-mode #cgapp .cgapp-daynum{
  font-size:.95rem !important; font-weight:600 !important; color:#5a5168 !important;
  width:30px !important; height:30px !important; line-height:30px !important; text-align:center !important; border-radius:50% !important;
}
/* aujourd'hui = cercle plein accent (comme la maquette) */
html.app-mode #cgapp .cgapp-cell.is-today .cgapp-daynum{
  background:var(--accent) !important; color:#fff !important; font-weight:800 !important;
}
/* jour SÉLECTIONNÉ = cercle accent clair (contour) ; si aussi today, le plein gagne */
html.app-mode #cgapp .cgapp-cell.is-selected .cgapp-daynum{
  background:var(--accent-bg) !important; color:var(--accent-ink) !important; font-weight:800 !important;
}
html.app-mode #cgapp .cgapp-cell.is-selected.is-today .cgapp-daynum{
  background:var(--accent) !important; color:#fff !important;
}
/* points colorés sous le jour */
html.app-mode #cgapp .cgapp-dots{
  display:flex !important; gap:3px !important; height:6px !important; align-items:center !important; justify-content:center !important;
}
html.app-mode #cgapp .cgapp-dot{
  width:6px !important; height:6px !important; border-radius:50% !important; flex:0 0 auto !important;
}

/* ── Liste « à venir ce mois » / jour sélectionné ── */
html.app-mode #cgapp .cgapp-list-title{
  display:flex !important; align-items:center !important; gap:8px !important;
  font-family:'Quicksand',sans-serif !important; font-weight:800 !important; font-size:.8rem !important;
  letter-spacing:.06em !important; text-transform:uppercase !important; color:#a99fc0 !important;
  margin:20px 4px 10px !important;
}
/* bouton « ✕ tout le mois » (visible quand un jour est sélectionné) */
html.app-mode #cgapp .cgapp-list-clear{
  margin-left:auto !important; border:none !important; cursor:pointer !important;
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:11px !important;
  text-transform:none !important; letter-spacing:0 !important; border-radius:9px !important; padding:5px 10px !important;
}
html.app-mode #cgapp .cgapp-list{ display:flex !important; flex-direction:column !important; gap:9px !important; }
html.app-mode #cgapp .cgapp-empty{
  font-family:'Quicksand',sans-serif !important; color:var(--soft) !important; font-size:14px !important;
  background:#fff !important; border-radius:14px !important; padding:20px 16px !important; text-align:center !important;
  box-shadow:0 2px 10px rgba(120,100,150,.06) !important;
}
/* carte event = pleine couleur (comme la maquette). Padding gauche réduit pour
   laisser l'icône s'agrandir sans grossir la carte. */
html.app-mode #cgapp .cgapp-li{
  display:flex !important; align-items:center !important; gap:11px !important; width:100% !important;
  border:none !important; cursor:pointer !important; text-align:left !important;
  border-radius:15px !important; padding:8px 14px 8px 8px !important; color:#fff !important;
  box-shadow:0 3px 10px rgba(120,100,150,.13) !important;
  font-family:'Quicksand',sans-serif !important;
}
html.app-mode #cgapp .cgapp-li:active{ transform:scale(.985) !important; }
/* carré à gauche AGRANDI : icône du jeu, ou carré couleur si pas d'icône */
html.app-mode #cgapp .cgapp-li-ico{
  width:52px !important; height:52px !important; border-radius:12px !important; object-fit:cover !important; flex:0 0 auto !important;
  background:rgba(255,255,255,.25) !important;
}
html.app-mode #cgapp .cgapp-li-ico-ph{ display:inline-block !important; }
html.app-mode #cgapp .cgapp-li-body{ flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
html.app-mode #cgapp .cgapp-li-name{
  font-weight:700 !important; font-size:15px !important; color:#fff !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
html.app-mode #cgapp .cgapp-li-sub{ font-size:12px !important; color:rgba(255,255,255,.82) !important; font-weight:600 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
html.app-mode #cgapp .cgapp-li-right{ flex:0 0 auto !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:2px !important; }
/* 1re ligne droite = jours restants (ex « 32 jours ») */
html.app-mode #cgapp .cgapp-li-date{ font-size:13px !important; font-weight:800 !important; color:#fff !important; white-space:nowrap !important; }
/* 2e ligne droite = dates (ex « 20/05 – 15/07 ») */
html.app-mode #cgapp .cgapp-li-dates{ font-size:11.5px !important; font-weight:600 !important; color:rgba(255,255,255,.82) !important; white-space:nowrap !important; }

/* ── Feuille « Gérer les jeux » (popup app) ── */
html.app-mode .cgapp-sheet-overlay{
  position:fixed !important; inset:0 !important; z-index:8600 !important;
  background:rgba(60,52,78,.42) !important; -webkit-backdrop-filter:blur(3px) !important; backdrop-filter:blur(3px) !important;
  display:none !important; align-items:flex-end !important; justify-content:center !important;
}
html.app-mode .cgapp-sheet-overlay.open{ display:flex !important; }
html.app-mode .cgapp-sheet{
  background:#fffdfb !important; width:100% !important; max-width:480px !important;
  border-radius:22px 22px 0 0 !important;
  max-height:80vh !important; max-height:80dvh !important;   /* dvh = hauteur viewport DYNAMIQUE (fiable iOS, sinon vh) */
  display:flex !important; flex-direction:column !important;
  padding:16px 16px calc(96px + var(--safe-bottom,0px)) !important;   /* padding-bas = hauteur barre du bas : le body scrollable s'arrête AU-DESSUS de la barre */
  box-shadow:0 -8px 40px rgba(60,40,90,.22) !important; font-family:'Quicksand',sans-serif !important;
  min-height:0 !important; overflow:hidden !important;   /* contient le scroll interne du body (iOS) */
}
html.app-mode .cgapp-sheet-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; margin-bottom:12px !important; }
html.app-mode .cgapp-sheet-title{ font-weight:800 !important; font-size:1.1rem !important; color:var(--ink) !important; }
html.app-mode .cgapp-sheet-close{
  width:30px !important; height:30px !important; border-radius:50% !important; border:none !important;
  background:#f3eef8 !important; color:#8b7fa6 !important; font-size:14px !important; cursor:pointer !important;
}
html.app-mode .cgapp-sheet-head{ flex:0 0 auto !important; }
/* rangée d'actions : « Jeux actifs » (gauche) + « + Ajouter un jeu » (moitié) */
html.app-mode .cgapp-sheet-actions{
  display:flex !important; gap:8px !important; margin-bottom:12px !important; flex:0 0 auto !important;
}
html.app-mode .cgapp-sheet-active{
  flex:1 1 50% !important; height:44px !important; border-radius:13px !important; border:none !important; cursor:pointer !important;
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
}
html.app-mode .cgapp-sheet-active.on{ background:var(--accent) !important; color:#fff !important; }
html.app-mode .cgapp-sheet-addgame{
  flex:1 1 50% !important; height:44px !important; border-radius:13px !important; border:none !important;
  background:var(--accent-grad) !important; color:#fff !important; font-family:'Quicksand',sans-serif !important;
  font-weight:700 !important; font-size:14px !important; cursor:pointer !important;
}
html.app-mode .cgapp-sheet-active:active, html.app-mode .cgapp-sheet-addgame:active{ transform:scale(.97) !important; }
html.app-mode .cgapp-sheet-body{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; display:flex !important; flex-direction:column !important; gap:7px !important; }
/* ligne de jeu : FOND = couleur pastel du jeu (via --gcol/pastel inline) */
html.app-mode .cgapp-game-row{
  display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; cursor:pointer !important;
  border:2px solid transparent !important; border-radius:13px !important; padding:10px 12px !important; text-align:left !important;
  font-family:'Quicksand',sans-serif !important;
}
html.app-mode .cgapp-game-row:active{ transform:scale(.985) !important; }
/* jeux NON actifs = GRISÉS en permanence (pas seulement en mode sélection) */
html.app-mode .cgapp-game-row{ opacity:1 !important; }
html.app-mode .cgapp-game-row:not(.active){ opacity:.45 !important; filter:grayscale(.4) !important; }
/* en MODE SÉLECTION : les jeux ACTIFS sont encadrés de leur couleur */
html.app-mode #cgapp-games-sheet.selecting .cgapp-game-row.active{ border-color:var(--gcol,var(--accent)) !important; }
html.app-mode .cgapp-game-ico{ width:38px !important; height:38px !important; border-radius:9px !important; object-fit:cover !important; flex:0 0 auto !important; }
html.app-mode .cgapp-game-ico-ph{ display:inline-block !important; background:var(--gcol,#a0a8b0) !important; }
html.app-mode .cgapp-game-name{ flex:1 1 auto !important; font-weight:700 !important; font-size:14.5px !important; color:var(--ink) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
html.app-mode .cgapp-game-edit{ flex:0 0 auto !important; font-size:1rem !important; }
/* en mode sélection on cache le crayon (on sélectionne, on n'édite pas) */
html.app-mode #cgapp-games-sheet.selecting .cgapp-game-edit{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   CAL-GAMING — modales Événement & Jeu : restylées comme les popups app
   (le site a un look « terminal gris/Courier » → on met crème/Quicksand/bleu)
   ════════════════════════════════════════════════════════════════ */
html.app-mode .cgcal-modal-overlay{
  --accent:#4f90f7; --accent-bg:#e4eefe; --accent-ink:#2f6fd0;
  --accent-grad:linear-gradient(135deg,#5b9bf8 0%,#9cc4fb 100%);
  background:rgba(60,52,78,.42) !important; -webkit-backdrop-filter:blur(3px) !important; backdrop-filter:blur(3px) !important;
  z-index:8700 !important; padding:0 22px !important;
}
html.app-mode .cgcal-modal{
  background:#fffdfb !important; border:none !important; border-radius:22px !important;
  width:100% !important; max-width:420px !important;
  max-height:85vh !important;
  height:auto !important;
  /* ⚠️ align-self:center empêche le STRETCH vertical imposé par l'overlay
     (align-items:center du site) → la modale fait la hauteur de SON contenu,
     plus jamais la hauteur max → plus de marge blanche en bas (bug iOS). */
  align-self:center !important;
  overflow:hidden !important;
  box-shadow:0 24px 64px rgba(60,40,90,.30) !important; font-family:'Quicksand',sans-serif !important;
  display:flex !important; flex-direction:column !important;
}
html.app-mode .cgcal-modal-topbar, html.app-mode .cgcal-modal-footer{ flex:0 0 auto !important; }
/* barre de titre : on enlève le look « fenêtre Mac » (points + fond gris) */
html.app-mode .cgcal-modal-topbar{
  background:transparent !important; border-bottom:1px solid rgba(120,100,150,.10) !important;
  padding:14px 16px !important;
}
html.app-mode .cgcal-mtb-dot{ display:none !important; }
html.app-mode .cgcal-mtb-title{
  font-family:'Quicksand',sans-serif !important; font-weight:800 !important; font-size:1.05rem !important;
  color:var(--ink) !important; letter-spacing:0 !important; text-transform:none !important; text-align:left !important;
}
html.app-mode .cgcal-mtb-close{
  background:#f3eef8 !important; color:#8b7fa6 !important; width:30px !important; height:30px !important;
  border-radius:50% !important; font-size:14px !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
/* body : flex:0 1 auto = NE grandit PAS (sinon il pousse la hauteur à 85vh sur iOS → marge blanche).
   Il rétrécit + scrolle SEULEMENT si le contenu dépasse la max-height de la modale. */
html.app-mode .cgcal-modal-body{ padding:16px !important; gap:14px !important; flex:0 1 auto !important; min-height:0 !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; }
html.app-mode .cgcal-field label{
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:12px !important;
  color:var(--soft) !important; letter-spacing:.02em !important; text-transform:none !important;
}
html.app-mode .cgcal-field input,
html.app-mode .cgcal-field select{
  font-family:'Quicksand',sans-serif !important; font-size:16px !important; color:var(--ink) !important;
  background:var(--accent-bg) !important; border:1px solid rgba(120,100,150,.16) !important;
  border-radius:12px !important; height:44px !important; padding:0 12px !important;
}
html.app-mode .cgcal-field input[type="date"]{ -webkit-appearance:none !important; }
html.app-mode .cgcal-field input:focus,
html.app-mode .cgcal-field select:focus{ outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg) !important; }
/* upload icône */
html.app-mode .cgcal-ev-icon-upload,
html.app-mode .cgcal-upload-zone{
  border:1.5px dashed var(--accent) !important; border-radius:12px !important;
  background:var(--accent-bg) !important; color:var(--accent-ink) !important;
}
html.app-mode .cgcal-color-input{
  height:44px !important; border-radius:12px !important; border:1px solid rgba(120,100,150,.16) !important; background:var(--accent-bg) !important;
}
/* ligne durée + répétition : tout sur une seule ligne, durée à gauche */
html.app-mode #cgev-durrecur-row{
  display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important;
  font-family:'Quicksand',sans-serif !important; color:var(--ink) !important; font-size:14px !important;
}
html.app-mode #cgev-duration-row{ color:var(--soft) !important; font-weight:600 !important; white-space:nowrap !important; font-size:14px !important; }
/* case Répétition : checkbox dimensionnée comme l'emoji ↔ + label même style que « X jours » */
html.app-mode .cgcal-recur-check{ display:inline-flex !important; align-items:center !important; gap:6px !important; }
html.app-mode #cgev-recur-active{
  width:18px !important; height:18px !important; flex:0 0 auto !important; margin:0 !important;
  accent-color:var(--accent) !important; cursor:pointer !important;
}
html.app-mode .cgcal-recur-check label{
  font-family:'Quicksand',sans-serif !important; font-size:14px !important; font-weight:600 !important;
  color:var(--soft) !important; cursor:pointer !important; margin:0 !important;
}
html.app-mode .cgcal-recur-row{ font-family:'Quicksand',sans-serif !important; color:var(--ink) !important; font-size:14px !important; }
/* textarea commentaire = même style que les inputs */
html.app-mode #cgev-comment{
  font-family:'Quicksand',sans-serif !important; font-size:16px !important; color:var(--ink) !important;
  background:var(--accent-bg) !important; border:1px solid rgba(120,100,150,.16) !important;
  border-radius:12px !important; padding:10px 12px !important; resize:none !important; width:100% !important; box-sizing:border-box !important;
}
html.app-mode #cgev-comment:focus{ outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-bg) !important; }
/* footer + boutons */
html.app-mode .cgcal-modal-footer{
  background:transparent !important; border-top:1px solid rgba(120,100,150,.10) !important;
  padding:12px 16px !important; gap:8px !important;   /* PAS de safe-bottom : la modale est CENTRÉE (pas collée au bas) → la safe-area créait le blanc */
}
html.app-mode .cgcal-btn-save{
  background:var(--accent-grad) !important; border:none !important; color:#fff !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  border-radius:12px !important; padding:0 18px !important; height:42px !important; text-transform:none !important; letter-spacing:0 !important;
  box-shadow:0 4px 12px rgba(79,144,247,.28) !important;
}
html.app-mode .cgcal-btn-cancel{
  background:#fff !important; border:none !important; color:var(--soft) !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  border-radius:12px !important; padding:0 16px !important; height:42px !important; text-transform:none !important; letter-spacing:0 !important;
  box-shadow:0 2px 8px rgba(120,100,150,.10) !important;
}
html.app-mode .cgcal-btn-del{
  background:#fbe0e6 !important; border:none !important; color:#d6618a !important;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important; font-size:14px !important;
  border-radius:12px !important; padding:0 16px !important; height:42px !important; text-transform:none !important; letter-spacing:0 !important;
}
html.app-mode .cgcal-btn-save:active, html.app-mode .cgcal-btn-cancel:active, html.app-mode .cgcal-btn-del:active{ transform:scale(.96) !important; }

/* les modales (event/game) doivent passer AU-DESSUS de la feuille « gérer les jeux »
   tout en la laissant VISIBLE derrière (Bibi : on voit toujours la liste) → z 8700 > sheet 8600,
   et le backdrop des modales est semi-transparent donc la liste reste visible. */

/* ════════════════ DIET PLAN — adaptation iPhone (app) — TOUTES les vues (zone partagée) ════════════════ */
/* Tout descendre sous l'encoche (safe-area) — le titre/arc ne sont plus coupés en haut */
/* Flux NATUREL : on enlève la coupure (height:100% + overflow:hidden) → le contenu peut descendre, le body scrolle */
html.app-mode #section-diet-plan.active{ padding-top: calc(var(--safe-top, 0px) + 0px) !important; height:auto !important; min-height:0 !important; overflow:visible !important; display:block !important; }
html.app-mode #section-diet-plan .dp-main-block{ flex:none !important; height:auto !important; min-height:0 !important; display:block !important; overflow:visible !important; }
html.app-mode #section-diet-plan .dp-shared-top{ flex:none !important; }
/* Mascotte + arc (mascotte 320 → 280 ; arc réduit -25% et descendu) */
/* Le chat est ancré en BAS du wrap (align-items:flex-end) → un margin-top ne le bouge
   pas. On le remonte via `top` (position:relative). L'arc (absolu, dans le même wrap)
   n'est PAS affecté → il reste fixe. top site = 10px ; -20px = chat remonté de 30px. */
html.app-mode #section-diet-plan .dp-mascot-img{ width:300px !important; height:300px !important; top:-20px !important; }
html.app-mode #section-diet-plan .dp-mascot-wrap{ width:330px !important; height:256px !important; }
html.app-mode #section-diet-plan .dp-mascot-section{ margin-top:2px !important; padding:0 !important; }
/* L'ombre (::after du wrap) est ancrée en bas (bottom:-4px) → quand le chat remonte
   de 30px, elle reste en bas près des boutons. On la remonte de 30px pour qu'elle
   reste sous les pattes du chat. */
html.app-mode #section-diet-plan .dp-mascot-wrap::after{ bottom:26px !important; }
html.app-mode #section-diet-plan .dp-arc-progress{ top:0px !important; transform:scale(1.06) !important; }
/* Arc épaissi de 20% en app (12 → 14.4) */
html.app-mode #section-diet-plan .dp-arc-bg,
html.app-mode #section-diet-plan .dp-arc-fill{ stroke-width:14.4 !important; }
/* 4 icônes : pastilles pastel (1 couleur par icône) — fini le gris ; descendues un peu */
/* Les boutons suivent le chat de la MÊME quantité (30px) → la marge chat↔boutons est
   conservée (plus de chevauchement avec l'ombre). */
html.app-mode #section-diet-plan .dp-quick-stats{ gap:16px !important; padding:22px 0 2px !important; margin-top:-30px !important; }
html.app-mode #section-diet-plan .dp-qstat{ gap:5px !important; }
html.app-mode #section-diet-plan .dp-qstat-ring{ width:62px !important; height:62px !important; border-color:transparent !important; }
html.app-mode #section-diet-plan .dp-qstat-circle{ width:54px !important; height:54px !important; box-shadow:0 3px 9px rgba(120,100,150,.14) !important; }
html.app-mode #section-diet-plan .dp-qstat-png{ width:24px !important; height:24px !important; }
html.app-mode #section-diet-plan .dp-qstat-poids .dp-qstat-circle{ background:#ffe1ec !important; }
html.app-mode #section-diet-plan .dp-qstat-repas .dp-qstat-circle{ background:#d9f2e3 !important; }
html.app-mode #section-diet-plan .dp-qstat-sport .dp-qstat-circle{ background:#dcecff !important; }
html.app-mode #section-diet-plan .dp-qstat-mensu .dp-qstat-circle{ background:#ece2ff !important; }
/* Header + zone partagée */
html.app-mode #section-diet-plan .dp-home-header{ margin-bottom:2px !important; }
/* Titre de vue (Accueil / Repas…) = MÊME rendu que les titres de page hors accueil
   (Gaming) : voir `body.not-home #welcome-heading` → Quicksand 30px / poids 800. */
html.app-mode #section-diet-plan .dp-home-title{
  font-family:'Quicksand', system-ui, sans-serif !important;
  font-size:30px !important; font-weight:800 !important; color:var(--ink) !important;
  letter-spacing:-.5px !important; line-height:1.1 !important;
}
html.app-mode #section-diet-plan .dp-shared-top{ gap:3px !important; padding:0 4px 0 !important; }
/* 1 bloc par ligne, pleine largeur (même largeur), empilés + scrollables — TOUTES les vues.
   padding gauche/droite à 0 → le contenu tombe pile sur les 21px du .main-content,
   soit les MÊMES marges que Gaming (qui n'ajoute aucun padding horizontal). */
html.app-mode #section-diet-plan #dp-view-home,
html.app-mode #section-diet-plan #dp-view-rapport,
html.app-mode #section-diet-plan #dp-view-exercices,
html.app-mode #section-diet-plan #dp-view-poids,
html.app-mode #section-diet-plan #dp-view-humeur,
html.app-mode #section-diet-plan #dp-view-mensurations{ flex:none !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding-left:0 !important; padding-right:0 !important; }
/* HOME — 3 lignes : Coach (100%) / Poids 70% + Humeur 30% / Repas 50% + Sport 50%.
   Ordre DOM des cartes = Coach, Poids, Repas, Sport, Humeur → on réordonne via `order`.
   `display:contents` sur les .dp-home-row fait que les 5 cartes deviennent des items
   flex DIRECTS de .dp-home-cards (en row-wrap) : `order` + largeurs s'appliquent dessus.
   gap:10px → sur une ligne à 2 cartes, chacune perd 5px (calc). */
html.app-mode #section-diet-plan .dp-home-cards{ display:flex !important; flex-flow:row wrap !important; align-items:stretch !important; gap:10px !important; height:auto !important; min-height:0 !important; overflow:visible !important; flex:none !important; padding:14px 0 16px !important; }
html.app-mode #section-diet-plan .dp-home-row{ display:contents !important; }
html.app-mode #section-diet-plan .dp-card{ flex:0 0 auto !important; width:100% !important; min-height:78px !important; }
html.app-mode #section-diet-plan .dp-card-coach{ order:0 !important; width:100% !important; }
html.app-mode #section-diet-plan .dp-card-poids-home{ order:1 !important; width:calc(70% - 5px) !important; }
html.app-mode #section-diet-plan .dp-card-humeur{ order:2 !important; width:calc(30% - 5px) !important; }
html.app-mode #section-diet-plan .dp-card-repas-home{ order:3 !important; width:calc(50% - 5px) !important; }
html.app-mode #section-diet-plan .dp-card-sport-home{ order:4 !important; width:calc(50% - 5px) !important; }
/* Vue Rapport : on NE touche PAS au display (piloté par le JS : none quand cachée,
   grid quand affichée) — sinon un `display:flex !important` la forçait visible dans
   TOUTES les vues. On force juste la grille 2 colonnes → 1 colonne empilée. */
html.app-mode #section-diet-plan #dp-view-rapport{ grid-template-columns:1fr !important; gap:10px !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding-left:4px !important; padding-right:4px !important; }
/* La grille (en hauteur fixe) superposait calendrier + bloc repas. Quand la vue Repas est
   AFFICHÉE (body.dp-curr-repas), on la passe en flex colonne → les 2 blocs s'empilent
   proprement (comme les autres vues). Scopé à dp-curr-repas : sur une autre vue, le JS
   la masque (display:none) → pas de retour du bug « calendrier repas partout ». */
html.app-mode body.dp-curr-repas #section-diet-plan #dp-view-rapport{ display:flex !important; flex-direction:column !important; }
/* Conteneurs 2-colonnes des vues → 1 colonne empilée */
html.app-mode #section-diet-plan .dp-sport-page,
html.app-mode #section-diet-plan .dp-poids-page,
html.app-mode #section-diet-plan .dp-poids-layout,
html.app-mode #section-diet-plan .dp-humeur-page,
html.app-mode #section-diet-plan .dp-rapp-left,
html.app-mode #section-diet-plan .dp-poids-right-col{ display:flex !important; flex-direction:column !important; gap:10px !important; width:100% !important; height:auto !important; }
html.app-mode #section-diet-plan .dp-rapp-left,
html.app-mode #section-diet-plan .dp-rapp-right,
html.app-mode #section-diet-plan .dp-rapp-block,
html.app-mode #section-diet-plan .dp-sport-cal,
html.app-mode #section-diet-plan .dp-sport-list,
html.app-mode #section-diet-plan .dp-humeur-cal,
html.app-mode #section-diet-plan .dp-humeur-list,
html.app-mode #section-diet-plan .dp-poids-cal-card,
html.app-mode #section-diet-plan .dp-poids-right-col,
html.app-mode #section-diet-plan .dp-poids-card{ width:100% !important; flex:none !important; }
/* Calendriers : pleine largeur, même gap partout. */
html.app-mode #section-diet-plan .dp-cal-grid,
html.app-mode #section-diet-plan .dp-poids-cal-grid,
html.app-mode #section-diet-plan .dp-sport-cal-grid,
html.app-mode #section-diet-plan .dp-humeur-cal-grid{ width:100% !important; gap:3px !important; }
/* Cases jour du calendrier REPAS : le sélecteur spécifique du site
   (#dp-view-rapport .dp-rapp-block:first-child .dp-cal-cell) force min-height:0 → cases
   plus PETITES. Or les cases Sport/Poids/Humeur ont min-height:32px. On remet donc
   min-height:32px (et aspect-ratio:auto) → EXACTEMENT la même hauteur que le calendrier
   bleu. .dp-cal-grid ne cible QUE le Repas (Poids utilise .dp-poids-cal-grid). */
html.app-mode #section-diet-plan .dp-cal-grid .dp-cal-cell{ min-height:32px !important; aspect-ratio:auto !important; }

/* Vue Poids : remonter le bloc Stats (Poids de départ / actuel / objectif) en 1ère ligne.
   `display:contents` sur right-col → ses enfants (stats + courbe) deviennent des items
   directs de dp-poids-layout ; `order:-1` place les stats AVANT le calendrier. */
html.app-mode #section-diet-plan .dp-poids-right-col{ display:contents !important; }
html.app-mode #section-diet-plan .dp-poids-stats-card{ order:-1 !important; }

/* ── Popups Diet Plan : empêcher le scroll de l'arrière-plan ── */
/* 1) La boîte scrollable du popup ne propage PAS son scroll à la page (scroll chaining). */
html.app-mode #section-diet-plan .dp-form-popup-box,
html.app-mode #section-diet-plan .dp-humeur-popup-box{ overscroll-behavior:contain !important; }
/* 2) Les overlays contiennent aussi le scroll. */
html.app-mode .dp-form-popup,
html.app-mode .dp-humeur-popup{ overscroll-behavior:contain !important; }
/* 3) Tant qu'un popup est ouvert, la page derrière est verrouillée (classe `dp-popup-open`
   posée sur <html> par app-shell.js dès qu'un popup reçoit la classe `open`). */
html.app-mode.dp-popup-open,
html.app-mode.dp-popup-open body{ overflow:hidden !important; }

/* ── Diet Plan : header VRAIMENT fixe + zone de blocs à scroll INTERNE ──
   On verrouille le scroll de la page (body.diet-active) et on transforme toute la chaîne
   de conteneurs en colonne flex à hauteur d'écran fixe (100dvh). Résultat : le header
   (.dp-shared-top) est flex:none → totalement immobile (aucun scroll ni rebond iOS) ;
   seule la vue active scrolle (overflow-y:auto), barre de scroll masquée.
   #main-header est déjà masqué sur diet (body.diet-active #main-header{display:none}). */
html.app-mode body.diet-active{ height:100dvh !important; min-height:0 !important; overflow:hidden !important; }
html.app-mode body.diet-active #app{ height:100dvh !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
html.app-mode body.diet-active .app-layout{ flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
html.app-mode body.diet-active .main-col{ flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; }
html.app-mode body.diet-active .main-content{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; padding-bottom:0 !important; }
html.app-mode body.diet-active #section-diet-plan.active{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
html.app-mode body.diet-active #section-diet-plan .dp-main-block{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
/* Header = totalement fixe */
html.app-mode body.diet-active #section-diet-plan .dp-shared-top{ flex:0 0 auto !important; }
/* Seule la vue active scrolle, sa barre de scroll est masquée */
html.app-mode body.diet-active #section-diet-plan #dp-view-home,
html.app-mode body.diet-active #section-diet-plan #dp-view-rapport,
html.app-mode body.diet-active #section-diet-plan #dp-view-exercices,
html.app-mode body.diet-active #section-diet-plan #dp-view-poids,
html.app-mode body.diet-active #section-diet-plan #dp-view-humeur,
html.app-mode body.diet-active #section-diet-plan #dp-view-mensurations{
  flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important;
  overscroll-behavior:contain !important; scrollbar-width:none !important;
  /* La zone scrollable descend jusqu'en bas (derrière la barre flottante). Marge basse =
     hauteur de la barre (74px) + son offset (~14px) → le dernier bloc reste lisible
     juste au-dessus de la barre. */
  padding-bottom:calc(88px + var(--safe-bottom)) !important;
  /* Fondu calé sur la barre : le contenu s'estompe en glissant DERRIÈRE elle (de ~88px
     du bas jusqu'au bas), au lieu d'être coupé net dans le trou beige au-dessus. */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 88px - var(--safe-bottom)), transparent calc(100% - 6px - var(--safe-bottom))) !important;
          mask-image:linear-gradient(to bottom, #000 calc(100% - 88px - var(--safe-bottom)), transparent calc(100% - 6px - var(--safe-bottom))) !important;
}
html.app-mode body.diet-active #section-diet-plan [id^="dp-view-"]::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }
/* Plus de barre de scroll visible non plus ailleurs en app */
html.app-mode body{ scrollbar-width:none !important; }
html.app-mode body::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }