:root,
:root[data-theme="light"] {
  --color-bg: #f2f4f8;
  --color-surface: #ffffff;
  --color-bg-subtle: #f8f9fb;
  --color-border: #dde2ea;
  --color-text: #202531;
  --color-muted: #6b7280;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-danger: #dc2626;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Theme "Natura" : palette naturelle, sobre, inspiree japandi (tons chauds,
   beiges/sable, vert mousse), contrastee pour que les textes restent lisibles. */
:root[data-theme="natura"] {
  --color-bg: #eae3d3;
  --color-surface: #f8f4ea;
  --color-bg-subtle: #f1ebdd;
  --color-border: #d7cbae;
  --color-text: #2c2a1f;
  --color-muted: #6b6250;
  --color-primary: #4a6741;
  --color-primary-dark: #37502f;
  --color-danger: #a1452f;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(44, 42, 31, 0.1), 0 1px 2px rgba(44, 42, 31, 0.08);
}

/* Theme sombre */
:root[data-theme="dark"] {
  --color-bg: #12161d;
  --color-surface: #1b2029;
  --color-bg-subtle: #232a35;
  --color-border: #2c3441;
  --color-text: #e9ecf2;
  --color-muted: #9aa4b2;
  --color-primary: #5b8def;
  --color-primary-dark: #7ba3f2;
  --color-danger: #f0685f;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

.hidden { display: none !important; }

/* --- Topbar --- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-title { font-size: 1.2rem; font-weight: 600; flex-shrink: 0; }
.topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Favoris nouvellement ajoutes, pas encore places (voir renderFavorites) :
   une fois glisses vers la zone des raccourcis, ils la quittent. Vide, elle
   ne prend aucune place (:empty). */
.topbar-favorites-tray {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  overflow-x: auto;
}
.topbar-favorites-tray:empty { display: none; }
.tray-favorite-tile {
  flex-shrink: 0; display: flex; cursor: grab; text-decoration: none;
  touch-action: none; user-select: none;
}
.tray-favorite-tile .favorite-icon-frame { width: 34px; height: 34px; }
.tray-favorite-tile.dragging { cursor: grabbing; }
.tray-favorite-tile.pending { opacity: 0.6; }

/* Barre de recherche Google : flottante au-dessus du contenu, centree a
   l'horizontale, posee dans le tiers inferieur de l'ecran (pas rattachee a
   la topbar) - avec un fond bien blanc pour ressortir sur le fond du tableau
   de bord, quel que soit le theme choisi. */
.google-search-form {
  position: fixed; top: 70vh; left: 50%; transform: translate(-50%, -50%);
  width: min(90vw, 560px); z-index: 15;
  display: flex; gap: 8px;
}
.google-search-input {
  flex: 1; min-width: 0;
  padding: 12px 18px;
  font-size: 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: #202531;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18), inset 0 0 0 2px transparent;
  transition: box-shadow 0.15s, background-color 0.15s;
}
.google-search-input::placeholder { color: var(--color-muted); }
.google-search-input:focus {
  outline: none;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18), inset 0 0 0 2px var(--color-primary);
}
.google-search-btn {
  flex-shrink: 0;
  padding: 0 20px;
  font-size: 0.95rem; font-weight: 600;
  border: none; border-radius: 999px;
  background: var(--color-primary); color: white;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18);
  transition: filter 0.15s;
}
.google-search-btn:hover { filter: brightness(1.08); }

@media (max-width: 900px) {
  .google-search-form { display: none; }
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--color-muted);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.icon-btn:hover { background: var(--color-bg); color: var(--color-text); }

.admin-banner {
  background: #fef3c7;
  color: #92400e;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
}
.admin-banner a { color: #92400e; font-weight: 600; margin-left: 8px; }

/* --- Layout 3 zones --- */

.layout {
  display: grid;
  /* Colonnes de widgets remises a une largeur raisonnable (ratio 1:6:1) :
     un simple 1:2:1 les faisait grandir sans limite sur les grands ecrans
     (25% de largeur = tres large sur un moniteur large). A 12.5% chacune,
     elles restent proches de leur largeur fixe d'origine (~300px) meme sur
     un grand ecran, pendant que la zone centrale des favoris garde le
     grand espace demande. */
  grid-template-columns: minmax(260px, 1fr) minmax(0, 6fr) minmax(260px, 1fr);
  gap: 20px;
  padding: 20px;
  align-items: start;
}

.widget-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 80px;
}

.widget-column.drag-over { outline: 2px dashed var(--color-primary); border-radius: var(--radius); }

.favorites-zone {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* La colonne centrale (voir .layout) est deja large de 50% : elle doit en
     plus s'etirer sur toute la hauteur disponible pour offrir un vrai canevas
     libre, contrairement aux colonnes de widgets qui gardent leur hauteur
     naturelle (.layout a "align-items: start"). */
  align-self: stretch;
}

.favorites-grid-wrap { flex: 1; display: flex; }

/* Canevas de placement libre ("ecran d'accueil de smartphone") : les icones
   sont positionnees en absolu (left/top en %, voir applyTilePosition dans
   app.js) et deplacees a la souris/au doigt (wireFavoriteTileDrag), plus par
   glisser-deposer en grille. */
.favorites-grid {
  position: relative;
  flex: 1;
  min-height: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  overflow: hidden;
  transition: outline-color 0.15s, background-color 0.15s;
}
.favorites-grid.drag-over {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  background: var(--color-bg-subtle);
}

/* Style "smartphone" : plus de carre de fond individuel derriere chaque
   favori, l'icone (squircle) et son texte reposent directement sur le fond
   du panneau, comme des icones d'ecran d'accueil. Positionnement absolu
   (left/top = centre de l'icone, d'ou le translate(-50%,-50%)) pour un
   placement libre plutot qu'une grille. */
.favorite-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 10px;
  cursor: grab;
  text-decoration: none;
  color: var(--color-text);
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  transition: transform 0.12s ease, opacity 0.15s ease;
  touch-action: none;
  user-select: none;
  width: 80px;
}
.favorite-tile:hover { transform: translate(-50%, -50%) translateY(-2px); }
.favorite-tile.dragging { cursor: grabbing; z-index: 20; transition: none; }

/* Squircle (rayon ~20%) qui force l'icone a occuper tout l'espace, sans
   marge blanche interne : l'image est volontairement zoomee (scale) puis
   rognee par l'overflow:hidden du cadre, pour "manger" le fond blanc que
   contiennent la plupart des favicons (a la maniere des icones iOS/Android,
   contrairement aux vignettes Netflix/Disney+ qui gardent leurs marges). */
.favorite-icon-frame {
  width: 46px; height: 46px; border-radius: 20%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: box-shadow 0.12s ease;
}
.favorite-tile:hover .favorite-icon-frame { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.26); }
.favorite-icon-frame img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.35);
}

.favorite-label {
  font-size: 0.72rem;
  text-align: center;
  max-width: 68px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favorite-tile.pending { opacity: 0.6; }

/* --- Bouton bascule "modifier les favoris" + mode suppression iOS --- */

.favorites-grid-wrap { position: relative; }
.favorites-edit-toggle {
  position: absolute; top: -10px; right: -10px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow); z-index: 3; padding: 0;
}
.favorites-edit-toggle .icon-done { display: none; }
.favorites-edit-toggle.active {
  background: var(--color-primary); color: white; border-color: var(--color-primary);
}
.favorites-edit-toggle.active .icon-edit { display: none; }
.favorites-edit-toggle.active .icon-done { display: block; }

/* Le translate(-50%,-50%) doit etre repete a chaque etape : une animation
   remplace entierement la propriete transform le temps qu'elle tourne,
   sinon l'icone (positionnee en absolu) sauterait au coin (0,0) du cadre. */
@keyframes favorite-jiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  50% { transform: translate(-50%, -50%) rotate(1.5deg); }
}
.favorites-grid.edit-mode .favorite-tile {
  animation: favorite-jiggle 0.22s ease-in-out infinite;
  cursor: default;
}
.favorites-grid.edit-mode .favorite-tile:nth-child(even) { animation-delay: 0.11s; }

/* Agitation de 2s (8 x 0.25s) pour attirer l'oeil sur un favori qui vient
   d'etre depose dans la zone des raccourcis, ou sur un favori qui vient
   d'apparaitre dans la tray de la topbar (nouvel ajout, ou ajout via
   bookmarklet decouvert a la visite suivante) - voir wiggleTile dans app.js. */
@keyframes favorite-wiggle-new {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.1); }
  50% { transform: translate(-50%, -50%) rotate(5deg) scale(1.1); }
}
.favorite-tile.favorite-wiggle-new { animation: favorite-wiggle-new 0.25s ease-in-out 8; z-index: 15; }

/* Meme agitation, sans le translate(-50%,-50%) : les tuiles de la tray sont
   en flux normal (flex), pas positionnees en absolu. Volontairement plus
   ample et plus rapide (1s au total, 5 x 0.2s) qu'ailleurs : c'est le seul
   signal qui invite l'utilisateur a remarquer et deplacer un favori tout
   juste ajoute, qui sinon se noie dans la tray. */
@keyframes tray-wiggle-new {
  0%, 100% { transform: rotate(-14deg) scale(1.3); }
  50% { transform: rotate(14deg) scale(1.3); }
}
.tray-favorite-tile.tray-wiggle-new { animation: tray-wiggle-new 0.2s ease-in-out 5; z-index: 5; }

.favorite-delete-badge {
  display: none;
  position: absolute; top: -6px; left: -6px; width: 22px; height: 22px;
  border-radius: 50%; background: #4b5563; color: white; border: 2px solid var(--color-surface);
  align-items: center; justify-content: center; font-size: 0.7rem; line-height: 1; cursor: pointer;
  z-index: 2; padding: 0;
}
.favorites-grid.edit-mode .favorite-delete-badge { display: flex; }
.favorites-grid.edit-mode .favorite-tile.favorite-add-tile { animation: none; display: none; }

/* Bouton "+" (ouvre la popup d'ajout) : ancre en fixe dans le coin haut-droit
   du canevas, gros et tres contraste (fond plein couleur primaire, ombre
   marquee) pour bien se faire remarquer - les favoris ajoutes n'atterrissent
   plus ici directement (voir la tray de la topbar), ce bouton reste donc le
   seul point d'entree evident pour ajouter un favori. */
.favorite-add-tile {
  position: absolute; right: 14px; top: 14px;
  width: 54px; height: 54px; border-radius: 20%;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.16);
  transition: box-shadow 0.12s ease, filter 0.12s ease;
}
.favorite-add-tile:hover {
  /* Volontairement pas de deplacement (transform) au survol : ce bouton est
     un point d'ancrage fixe, le faire bouger le rendrait plus difficile a
     cliquer avec precision. */
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.32), 0 3px 8px rgba(15, 23, 42, 0.18);
}
.favorite-add-icon { font-size: 1.9rem; line-height: 1; font-weight: 400; }

/* Bookmarklet (voir pages.favorites_quick_add) : lien a glisser vers la
   barre de favoris du navigateur, propose dans la popup d'ajout de favori. */
.bookmarklet-hint {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.bookmarklet-hint .field-hint { margin: 0; }
.bookmarklet-link { cursor: grab; }

/* --- Widgets --- */

.widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px 14px;
  cursor: grab;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  min-height: 18px;
}
.widget-title {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-muted); line-height: 1.4;
}
.widget-title-editable { outline: none; cursor: text; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; }
.widget-title-editable:hover, .widget-title-editable:focus { background: var(--color-bg-subtle); }
.widget-gear {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-muted);
  padding: 2px;
}
.widget-gear:hover { color: var(--color-text); }
.flashcard-inline-toggle-btn.active { color: var(--color-primary); }

.widget-logo { display: flex; align-items: center; justify-content: center; min-height: 60px; }
.widget-logo img { max-width: 100%; max-height: 60px; }
.widget-logo .logo-placeholder { color: var(--color-muted); font-size: 0.85rem; text-align: center; }
.widget-logo .logo-placeholder svg { color: var(--color-primary); }

/* Marque "SecureDesk" (topbar - voir templates/index.html et login.html) */
.logo-brand { display: flex; align-items: center; gap: 10px; }
.logo-brand-icon { color: var(--color-primary); flex-shrink: 0; }
.logo-brand-text { font-size: 1.3rem; font-weight: 500; color: var(--color-text); letter-spacing: -0.01em; }
.logo-brand-text b { color: var(--color-primary); font-weight: 700; }
.logo-brand-lg { justify-content: center; margin-bottom: 20px; }
.logo-brand-lg .logo-brand-text { font-size: 1.6rem; }

.widget-clock .clock-time { font-size: 2rem; font-weight: 700; }
.widget-clock .clock-date { font-size: 0.9rem; color: var(--color-muted); text-transform: capitalize; }

/* Meteo du jour et du lendemain, fusionnee dans le widget horloge (voir
   widgets.js renderClock - le widget "weather" autonome a ete supprime). */
.clock-weather { display: flex; gap: 16px; margin-top: 8px; }
.clock-weather-day { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-muted); }
.clock-weather-icon { font-size: 1.1rem; }
.clock-weather-temps { font-weight: 600; color: var(--color-text); }
.clock-weather-unavailable { margin-top: 8px; font-size: 0.8rem; }

.widget-calendar { position: relative; }
.calendar-bell-corner { position: absolute; top: 10px; right: 12px; }

.widget-calendar table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.widget-calendar th, .widget-calendar td { text-align: center; padding: 4px 2px; position: relative; }
.widget-calendar th { color: var(--color-muted); font-weight: 500; }
.widget-calendar td.today { background: var(--color-primary); color: #fff; border-radius: 50%; font-weight: 700; }
.widget-calendar td.has-reminder { cursor: pointer; }
.widget-calendar td.has-reminder::after {
  content: ""; position: absolute; bottom: 2px; right: 6px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);
}
.widget-calendar td.today.has-reminder::after { background: #fff; }

/* Popup flottant au survol d'un jour marque (voir showCalendarDayHoverPopup
   dans widgets.js) : positionne en position:fixed pres de la cellule, jamais
   coupe par l'overflow du widget puisqu'attache au body. */
.calendar-day-hover-popup {
  position: fixed; z-index: 200; max-width: 240px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 0.78rem;
  pointer-events: none;
}
.calendar-day-hover-item + .calendar-day-hover-item { margin-top: 4px; }
.calendar-day-hover-item b { color: var(--color-primary); margin-right: 4px; }
.widget-calendar .calendar-today {
  text-align: center; font-weight: 600; margin-bottom: 10px; font-size: 0.95rem; padding-right: 26px;
}
.widget-calendar .calendar-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.widget-calendar .calendar-title { font-weight: 600; text-transform: capitalize; min-width: 110px; text-align: center; }
.widget-calendar .calendar-nav-btn {
  border: none; background: var(--color-bg); color: var(--color-text); width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer; font-size: 0.9rem; line-height: 1;
}
.widget-calendar .calendar-nav-btn:hover { background: var(--color-border); }

.reminders-upcoming { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.reminder-chip {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 10px;
  border-left: 3px solid var(--color-primary); background: var(--color-bg-subtle);
  border-radius: 0 8px 8px 0; font-size: 0.8rem;
}
.reminder-chip .reminder-when { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.reminder-chip .reminder-text {
  flex: 1; min-width: 0; color: var(--color-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.reminder-chip .reminder-text-inner { display: inline-block; }
.reminder-chip .reminder-text.marquee {
  text-overflow: clip;
}
.reminder-chip .reminder-text.marquee .reminder-text-inner {
  white-space: nowrap;
  padding-left: 100%;
  animation: reminder-marquee 9s linear infinite;
}
@keyframes reminder-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.reminder-chip.today { border-left-color: var(--color-danger); }
.reminder-chip.today .reminder-when { color: var(--color-danger); }

/* Prochain rappel : 10s apres l'affichage de la page, attire l'oeil pendant
   1s pile - bordure gauche qui clignote (lueur doree) + zoom rebond + flash
   de lumiere vive (halo autour de la puce + eclat radial en surimpression). */
@keyframes reminder-attention {
  0%   { transform: scale(0.94); box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0); filter: brightness(1); }
  8%   { box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0.95), 0 0 26px 8px rgba(255, 210, 60, 0.85); filter: brightness(1.45); }
  16%  { transform: scale(1.16); box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0); filter: brightness(1); }
  24%  { box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0.95), 0 0 26px 8px rgba(255, 210, 60, 0.85); filter: brightness(1.45); }
  32%  { transform: scale(0.95); box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0); filter: brightness(1); }
  40%  { box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0.95), 0 0 26px 8px rgba(255, 210, 60, 0.85); filter: brightness(1.45); }
  50%  { transform: scale(1.06); box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0); filter: brightness(1); }
  62%  { box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0.7), 0 0 18px 5px rgba(255, 210, 60, 0.55); filter: brightness(1.25); }
  75%  { transform: scale(0.99); box-shadow: -4px 0 0 0 rgba(245, 180, 0, 0); filter: brightness(1); }
  100% { transform: scale(1); box-shadow: none; filter: brightness(1); }
}
.reminder-chip.reminder-attention {
  position: relative;
  animation: reminder-attention 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reminder-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  20%  { opacity: 0.1; }
  24%  { opacity: 1; }
  36%  { opacity: 0.1; }
  40%  { opacity: 1; }
  55%  { opacity: 0.1; }
  62%  { opacity: 0.7; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}
.reminder-chip.reminder-attention::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 15% 50%, rgba(255, 255, 255, 0.95), rgba(255, 215, 90, 0.55) 45%, transparent 78%);
  opacity: 0;
  animation: reminder-flash 1s ease-out;
}

.reminder-alert-modal { max-width: 380px; text-align: center; }
.reminder-alert-icon { font-size: 2.5rem; margin-bottom: 4px; }

.confirm-modal { max-width: 360px; text-align: center; }
.confirm-modal-icon { font-size: 2.2rem; margin-bottom: 4px; }
.confirm-modal h2 { font-size: 1.1rem; }
.confirm-modal-actions { justify-content: center; }

/* La confirmation peut s'ouvrir par-dessus une autre modale deja affichee
   (ex: avertissement en quittant la modale flashcard) : elle doit toujours
   passer au-dessus, quel que soit l'ordre des elements dans le DOM. */
#confirm-modal { z-index: 200; }

.widget-notepad textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
  resize: vertical;
}
.widget-notepad textarea[disabled] { background: var(--color-bg-subtle); color: var(--color-muted); }
.notepad-lock-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: var(--color-muted); }

.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--color-border); border-radius: 20px; transition: 0.2s;
}
.switch-slider::before {
  content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: 0.2s;
}
.switch input:checked + .switch-slider { background: var(--color-primary); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }


/* Cadre photo : traite comme un vrai cadre (mat blanc fin), volontairement
   different des autres widgets et independant du theme choisi - un cadre
   blanc reste un cadre blanc, y compris en theme sombre. */
.widget-photoframe {
  background: #ffffff;
  border: 1px solid #ffffff;
  padding: 7px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.1);
}
.widget-photoframe .widget-header.hidden { display: none; }
.widget-photoframe .widget-title { color: #8a8f98; }

.widget-photoframe .photoframe-viewport {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #f3f4f6;
}
.widget-photoframe .photoframe-viewport img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
}
.widget-photoframe .photoframe-empty {
  display: flex; align-items: center; justify-content: center; height: 100%; color: #9199a6; font-size: 0.85rem;
  text-align: center; padding: 8px; cursor: pointer;
}
.widget-photoframe .photoframe-viewport.has-photo { cursor: default; }

/* Roue dentee des reglages : en surimpression sur la photo, coin haut-droit,
   invisible tant qu'on ne survole pas (ou ne la focus pas au clavier). */
.photoframe-gear {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45); color: #fff; backdrop-filter: blur(2px);
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.photoframe-viewport:hover .photoframe-gear,
.photoframe-gear:focus-visible {
  opacity: 1; transform: scale(1);
}
.photoframe-gear:hover { background: rgba(15, 23, 42, 0.65); }

/* Le widget lui-meme ne montre plus qu'un resume cliquable ; toute la
   revision (recto/indice/verso/notation) vit dans la grande fenetre
   .flashcard-review-overlay - voir plus bas. */
.flashcard-summary { cursor: pointer; text-align: center; padding: 10px 4px; font-size: 0.9rem; }
.flashcard-summary:hover { color: var(--color-primary); }

.widget-flashcards { position: relative; }

/* Mode "revision directe" (flashcards.inline_review_label) : mini version de
   .flashcard-review-* directement dans le widget, sans grande fenetre. */
.flashcard-inline .flashcard-review-flip-outer { perspective: 1000px; }
.flashcard-inline .flashcard-review-flip-inner { min-height: 190px; }
.flashcard-inline .flashcard-review-face { gap: 8px; }
.flashcard-inline .flashcard-review-text { font-size: 0.95rem; }
.flashcard-inline .flashcard-image { max-height: 90px; }
.flashcard-inline .flashcard-rating-btn { padding: 8px 4px; font-size: 0.72rem; }
.flashcard-inline-empty { text-align: center; padding: 10px 4px; font-size: 0.9rem; }

/* Carte due qui attend depuis plus d'1 min : on attire l'oeil (repete chaque
   minute supplementaire tant qu'elle n'a pas ete revisee). */
@keyframes flashcard-attention {
  0% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.08) rotate(-3deg); }
  20% { transform: scale(1.1) rotate(3deg); }
  30% { transform: scale(1.08) rotate(-3deg); }
  40% { transform: scale(1.1) rotate(3deg); }
  50% { transform: scale(1.08) rotate(-2deg); }
  60% { transform: scale(1.06) rotate(2deg); }
  70% { transform: scale(1.04) rotate(-1deg); }
  80% { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.widget-flashcards.flashcard-attention {
  animation: flashcard-attention 1s ease-in-out;
  box-shadow: 0 0 0 3px var(--color-primary), var(--shadow);
  z-index: 5;
}

/* Pic de dopamine a la validation ("Difficile"/"OK") : explosion de
   particules (canvas) + coche ou mot flottant (DOM, transform/opacity
   uniquement pour rester sur le compositeur et eviter tout reflow). */
.success-burst-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.success-burst-canvas { position: fixed; inset: 0; }

.success-burst-badge {
  position: fixed; top: 0; left: 0; transform: translate(-50%, -50%) scale(0); opacity: 0;
  font-size: 1.4rem; font-weight: 800; white-space: nowrap; letter-spacing: 0.02em;
  color: #f5b400; text-shadow: 0 0 14px rgba(245, 180, 0, 0.65), 0 2px 4px rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center; will-change: transform, opacity;
}
.success-burst-badge-check { color: #10b981; text-shadow: 0 0 16px rgba(16, 185, 129, 0.6); }
.success-burst-badge.play {
  animation: success-burst-pop 1000ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes success-burst-pop {
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  32%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  75%  { transform: translate(-50%, -120%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -170%) scale(0.85); opacity: 0; }
}

/* --- Widget Coffre-Fort (simple teaser : le contenu ne vit que dans la
   grande fenetre .vault-modal-overlay, jamais dans le widget) --- */

.vault-widget {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 0;
}
.vault-lock-icon { color: var(--color-muted); margin-top: 4px; }
.vault-intro-text { font-size: 0.85rem; margin: 0; }
.vault-open-btn { width: 100%; }

.vault-qr-container { display: flex; justify-content: center; margin: 12px 0; }
.vault-qr-container img { image-rendering: pixelated; border-radius: 8px; }
.vault-manual-secret-row { display: flex; flex-direction: column; gap: 4px; }
.vault-manual-secret {
  font-family: monospace; font-size: 0.95rem; letter-spacing: 1px; background: var(--color-bg-subtle);
  padding: 6px 8px; border-radius: 6px; word-break: break-all; user-select: all;
}

/* --- QR generique (synchronisation mobile de la liste, etc.) --- */
.qr-code-box { display: flex; justify-content: center; margin: 14px 0; }
.qr-code-box img { image-rendering: pixelated; border-radius: 8px; }

/* --- Grande fenetre Coffre-Fort : 80% de l'ecran, centree, fond floute --- */

.vault-modal-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 13, 20, 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}

.vault-modal {
  width: 80vw; height: 80vh; max-width: 1080px; max-height: 860px;
  background: var(--color-surface); color: var(--color-text);
  border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; overflow: hidden;
}

.vault-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.vault-modal-title {
  display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.2px;
}
.vault-modal-title-icon { display: flex; color: var(--color-primary); }
.vault-modal-close {
  width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent;
  color: var(--color-muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease;
}
.vault-modal-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }

.vault-modal-body {
  flex: 1; overflow-y: auto; padding: 36px 28px;
  display: flex; flex-direction: column; align-items: center;
}

.vault-screen { width: 100%; max-width: 440px; margin: 0 auto; }
.vault-screen-centered {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  margin-top: auto; margin-bottom: auto;
}
.vault-screen h2 { margin-top: 0; font-size: 1.3rem; }
.vault-premium-text { color: var(--color-muted); font-size: 0.95rem; line-height: 1.5; max-width: 360px; margin: 4px 0 8px; }

.vault-lock-icon-lg {
  width: 72px; height: 72px; border-radius: 50%; background: var(--color-bg-subtle);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.vault-lock-icon-lg svg { width: 32px; height: 32px; }

.vault-unlock-form { display: flex; justify-content: center; width: 100%; margin: 10px 0; }
.vault-code-input {
  flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); font-size: 1.1rem; letter-spacing: 3px;
  text-align: center; font-family: inherit;
}
.vault-pin-input {
  width: 160px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); color: var(--color-text); font-size: 1.6rem; letter-spacing: 10px;
  text-align: center; font-family: inherit; margin: 0 auto 12px;
}
#vault-screen-unlock .vault-pin-input { margin: 0; }

/* Focus thematise (au lieu du contour bleu par defaut du navigateur, qui
   jurait avec les themes non-bleus comme "natura") - couleur d'accent du
   theme actif, jamais une couleur fixe. */
.vault-pin-input:focus, .vault-code-input:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* Secousse + bordure rouge sur PIN invalide (voir shakeVaultPinInput). */
@keyframes vault-pin-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.vault-pin-input.vault-pin-shake { animation: vault-pin-shake 0.4s ease; border-color: var(--color-danger) !important; }

/* Pave numerique visuel (voir buildVaultPinKeypad) : saisir un code a 4
   chiffres au clavier physique est fastidieux sur mobile - une vraie grille
   0-9 rend l'ecran plus immediatement lisible comme "ecran de securite". */
.vault-pin-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 220px; margin: 4px auto 14px;
}
.vault-keypad-btn {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-bg-subtle); color: var(--color-text); font-size: 1.3rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.vault-keypad-btn:hover { background: var(--color-border); }
.vault-keypad-btn:active { transform: scale(0.92); }
.vault-keypad-spacer { visibility: hidden; cursor: default; }
.vault-keypad-backspace { font-size: 1.2rem; color: var(--color-muted); }

.vault-entries-toolbar { display: flex; gap: 10px; width: 100%; margin-bottom: 20px; }
.vault-entries-toolbar .btn { flex: 1; }

.vault-entries-list-lg {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
}
.vault-entry-item {
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--color-bg-subtle);
  border: 1px solid var(--color-border); cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease;
}
.vault-entry-item:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.vault-entry-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; margin-top: 1px;
  background: var(--color-surface); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.vault-entry-icon svg { width: 18px; height: 18px; }
.vault-entry-main { flex: 1; min-width: 0; }
.vault-entry-title { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-entry-preview {
  font-size: 0.85rem; color: var(--color-muted); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vault-entry-preview-secret { font-family: monospace; letter-spacing: 1px; }
.vault-entry-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-top: -4px; }
.vault-entry-actions .icon-btn { padding: 6px; }
.vault-entry-actions .icon-btn svg { width: 16px; height: 16px; }
.vault-entry-actions .icon-btn:hover.vault-entry-delete-btn { color: var(--color-danger); }
.vault-empty { padding: 24px 0; margin: 0; text-align: center; color: var(--color-muted); }

/* --- Formulaire d'ajout/edition d'une information : champs stylises (avant
   ces regles, les <input>/<textarea> du coffre-fort n'avaient AUCUN style
   dedie et s'affichaient en widgets de formulaire bruts du navigateur, sans
   rapport avec la largeur/le design des cartes de la liste). --- */
.vault-screen input[type="text"], .vault-screen input[type="password"],
.vault-screen textarea, .vault-screen select {
  width: 100%; padding: 10px; margin-bottom: 14px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 0.9rem;
  box-sizing: border-box;
}
.vault-screen input:focus, .vault-screen textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.vault-entry-type-selector { display: flex; gap: 8px; width: 100%; margin-bottom: 18px; }
.vault-entry-type-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 12px; border: 1px solid var(--color-border);
  background: var(--color-bg-subtle); color: var(--color-muted); cursor: pointer; font-size: 0.75rem;
  font-family: inherit; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.vault-entry-type-btn svg { width: 20px; height: 20px; }
.vault-entry-type-btn:hover { border-color: var(--color-primary); }
.vault-entry-type-btn.active {
  border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface);
  font-weight: 600;
}

.vault-entry-type-fields.hidden { display: none; }
.vault-password-field-row { display: flex; gap: 6px; align-items: flex-start; }
.vault-password-field-row input { flex: 1; min-width: 0; }
.vault-password-field-row .icon-btn { flex-shrink: 0; margin-top: 1px; }
.vault-password-field-row .icon-btn svg { width: 18px; height: 18px; }
.vault-entry-card-row2 { display: flex; gap: 10px; }
.vault-entry-card-row2 > div { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .vault-modal { width: 96vw; height: 92vh; border-radius: 16px; }
  .vault-modal-body { padding: 24px 18px; }
}

/* --- Grande fenetre de revision des flashcards : centree, arriere-plan
   assombri et floute pour focaliser l'attention sur la carte en cours --- */

.flashcard-review-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 13, 20, 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}

.flashcard-review-box {
  position: relative; width: 100%; max-width: 480px;
  background: var(--color-surface); border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 36px 28px 28px;
}
.flashcard-review-close {
  position: absolute; top: 14px; right: 14px; z-index: 10; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: transparent; color: var(--color-muted); font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.flashcard-review-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }

/* Carte qui se retourne a 180 degres (le contenant entier, pas seulement
   son contenu) pour reveler la reponse. */
.flashcard-review-flip-outer { perspective: 1400px; -webkit-perspective: 1400px; }
.flashcard-review-flip-inner {
  position: relative; min-height: 320px; will-change: transform;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.45, 0, 0.55, 1);
}
.flashcard-review-flip-inner.flipped { transform: rotateY(180deg); }
.flashcard-review-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* Fond opaque explicite : sans lui, le recto (ou le verso) transparent
     laisse deviner l'autre face en transparence sur certains moteurs de
     rendu au lieu d'etre entierement masque par backface-visibility. */
  background: var(--color-surface);
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; overflow-y: auto;
}
/* Verso : uniquement la reponse (centree au milieu de la carte) et les 4
   boutons de notation plaques en bas - jamais les deux melanges au milieu. */
.flashcard-review-face-back {
  transform: rotateY(180deg);
  justify-content: space-between;
  padding-top: 12px;
}
.flashcard-review-back-content {
  flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.flashcard-image { max-width: 100%; max-height: 180px; border-radius: 8px; object-fit: contain; }
.flashcard-review-text { font-size: 1.35rem; font-weight: 600; line-height: 1.4; }
.flashcard-review-face-back .flashcard-review-text { color: var(--color-primary); font-weight: 500; }
.flashcard-review-front-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }

.flashcard-review-rating-row { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.flashcard-rating-btn {
  flex: 1; border: none; border-radius: 10px; padding: 10px 6px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; color: white;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
/* Intervalle calcule en temps reel (voir loadFlashcardReviewIntervalPreview) :
   vide tant que la reponse au serveur n'est pas arrivee, jamais de "layout
   shift" visible puisque les boutons sont de toute facon encore invisibles
   a ce moment-la (voir armRatingButtonsReveal ci-dessous). */
.flashcard-rating-interval { font-size: 0.68rem; font-weight: 500; opacity: 0.85; min-height: 1em; }
.rating-again { background: var(--color-danger); }
.rating-hard { background: #ea8a1f; }
.rating-good { background: var(--color-primary); }

/* Les 3 boutons de notation restent invisibles (et non cliquables) les 2
   premieres secondes apres le retournement de la carte, le temps de laisser
   le verso seul a l'ecran - puis apparaissent l'un apres l'autre en fondu
   (voir armRatingButtonsReveal dans app.js/widgets.js). */
.flashcard-review-rating-row .flashcard-rating-btn {
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.flashcard-review-rating-row.ratings-visible .flashcard-rating-btn {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.flashcard-review-rating-row.ratings-visible .flashcard-rating-btn:nth-child(1) { transition-delay: 0s; }
.flashcard-review-rating-row.ratings-visible .flashcard-rating-btn:nth-child(2) { transition-delay: 0.15s; }
.flashcard-review-rating-row.ratings-visible .flashcard-rating-btn:nth-child(3) { transition-delay: 0.3s; }

/* Superposition "prochaine carte dans...", affichee entre la notation d'une
   carte et l'apparition de la suivante (voir rateFlashcardReviewCard /
   renderFlashcardsInline). */
.flashcard-next-countdown-overlay {
  position: absolute; inset: 0; border-radius: 22px; z-index: 5;
  background: rgba(10, 13, 20, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.flashcard-next-countdown-overlay.show { opacity: 1; pointer-events: auto; }
.flashcard-next-countdown-text { color: #fff; font-size: 1.3rem; font-weight: 600; text-align: center; padding: 0 24px; }
.flashcard-inline { position: relative; }
.flashcard-inline .flashcard-next-countdown-overlay { border-radius: 12px; }
.flashcard-inline .flashcard-next-countdown-text { font-size: 0.95rem; }

/* Indice : tout l'ecran s'assombrit par-dessus la carte, le texte apparait
   caractere par caractere et flotte comme suspendu, jusqu'a ce que la
   souris bouge - il s'evapore alors pour laisser reapparaitre le recto. */
.flashcard-hint-overlay {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(5, 6, 10, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.flashcard-hint-overlay.show { opacity: 1; }
@keyframes flashcard-hint-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.flashcard-hint-text {
  color: #fff; font-size: 48px; font-weight: 500; text-align: center; max-width: 720px; line-height: 1.3;
  text-shadow: 0 4px 24px rgba(255, 255, 255, 0.15);
  animation: flashcard-hint-float 3s ease-in-out infinite;
}

@media (max-width: 560px) {
  .flashcard-review-box { padding: 32px 18px 20px; }
  .flashcard-review-flip-inner { min-height: 380px; }
}

/* --- Gestion des cartes memoires : tableau (recto/verso/prochaine
   revision) + grande fenetre d'edition visuelle (creation/edition) --- */

.flashcard-manage-toolbar { margin-bottom: 4px; }
.flashcard-table-wrap { max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.flashcard-manage-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.flashcard-manage-table th, .flashcard-manage-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border);
}
.flashcard-manage-table th { color: var(--color-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; }
.flashcard-table-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flashcard-table-actions { display: flex; gap: 6px; white-space: nowrap; }
.flashcard-manage-table td:nth-child(3) { white-space: nowrap; color: var(--color-muted); }

.flashcard-editor-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 13, 20, 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.flashcard-editor-box {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: var(--color-surface); border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 36px 32px 28px;
}
.flashcard-editor-title { margin: 0 0 20px; text-align: center; }

.flashcard-editor-card-row { display: flex; align-items: center; gap: 14px; }
.flashcard-editor-flip-outer { flex: 1; min-width: 0; perspective: 1400px; -webkit-perspective: 1400px; }
.flashcard-editor-flip-inner {
  position: relative; min-height: 260px; will-change: transform;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.45, 0, 0.55, 1);
}
.flashcard-editor-flip-inner.flipped { transform: rotateY(180deg); }
.flashcard-editor-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; border: 2px dashed var(--color-border); border-radius: 16px;
  padding: 16px; background: var(--color-bg-subtle); transition: border-color 0.15s ease;
}
.flashcard-editor-face.drag-over { border-color: var(--color-primary); }
.flashcard-editor-face-back { transform: rotateY(180deg); }
.flashcard-editor-face .flashcard-image { display: block; margin: 0 auto 8px; max-height: 100px; flex-shrink: 0; }
.flashcard-editor-textarea {
  /* flex:none (plutot que flex:1, qui etirait la zone de texte jusqu'en bas
     et plaquait donc le texte en haut) : une hauteur bornee que le
     justify-content:center du parent peut vraiment centrer. Un <textarea>
     n'auto-centre pas son propre texte via align-items/justify-content,
     contrairement a un conteneur flex ordinaire - d'ou ce changement de
     strategie (centrer la boite plutot que son contenu interne). */
  flex: none; height: 90px; width: 100%; border: none; background: transparent; resize: none; outline: none;
  font-family: inherit; font-size: 1.1rem; color: var(--color-text); text-align: center;
}
.flashcard-editor-textarea::placeholder { color: var(--color-muted); }
.flashcard-editor-side-label {
  position: absolute; top: 10px; left: 14px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  color: var(--color-muted); letter-spacing: 0.03em; pointer-events: none;
}
.flashcard-editor-image-btn, .flashcard-editor-image-remove-btn {
  position: absolute; top: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55); color: #fff;
  opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease;
  /* Sans ceci, sur certains moteurs de rendu, ce bouton (position absolue
     + z-index, contexte d'empilement propre) reste peint meme quand sa face
     est retournee hors champ par backface-visibility:hidden sur le parent -
     d'ou les "deux icones appareil photo" superposees vues sur le verso. */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flashcard-editor-image-btn { right: 8px; }
.flashcard-editor-image-remove-btn { right: 42px; background: rgba(161, 42, 42, 0.75); }
.flashcard-editor-image-btn:hover { opacity: 1; background: rgba(15, 23, 42, 0.75); }
.flashcard-editor-image-remove-btn:hover { opacity: 1; background: rgba(161, 42, 42, 0.92); }

.flashcard-editor-flip-side-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-bg-subtle); color: var(--color-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease;
}
.flashcard-editor-flip-side-btn:hover { background: var(--color-border); transform: rotate(15deg); }

.flashcard-editor-reverse-row { margin: 18px 0 4px; }

@media (max-width: 480px) {
  .flashcard-editor-card-row { flex-direction: column; }
  .flashcard-editor-flip-side-btn { align-self: center; }
}

/* --- Menu contextuel (clic droit sur un favori) --- */

.context-menu {
  position: fixed; z-index: 250; min-width: 150px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.context-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: none; background: transparent; color: var(--color-text);
  border-radius: 6px; font-size: 0.88rem; font-family: inherit; cursor: pointer;
}
.context-menu-item:hover { background: var(--color-bg-subtle); }
.context-menu-item-danger { color: var(--color-danger); }

/* --- Modales --- */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}

/* Reglages du cadre photo : arriere-plan floute + ombre reprenant exactement
   celle du widget cadre photo lui-meme (coherence visuelle du "cadre"). */
#photoframe-settings-modal {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#photoframe-settings-modal .modal {
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.1);
}

.modal {
  background: var(--color-surface); border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
}
.modal-large { max-width: 720px; }
.modal h2 { margin-top: 0; }
.modal h3 { font-size: 0.95rem; margin: 18px 0 8px; }
.modal input[type="text"], .modal input[type="email"], .modal input[type="date"],
.modal input[type="time"], .modal select, .modal-textarea {
  width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 0.9rem;
}
.modal-textarea { resize: vertical; }
.field-label { display: block; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.inline-field-row { display: flex; gap: 8px; align-items: flex-start; }
.inline-field-row input { flex: 1; }
.inline-field-row .btn { flex-shrink: 0; }

.manage-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.manage-list-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--color-bg-subtle);
}
.manage-list-item-main { flex: 1; min-width: 0; cursor: pointer; }
.manage-list-item-title { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-list-item-meta { font-size: 0.75rem; color: var(--color-muted); }
.manage-list-item button {
  border: none; background: transparent; color: var(--color-muted); cursor: pointer; font-size: 0.8rem; flex-shrink: 0;
}
.manage-list-item button:hover { color: var(--color-danger); }
.manage-list-item-edit:hover { color: var(--color-primary) !important; }
.manage-list-empty { font-size: 0.82rem; color: var(--color-muted); text-align: center; padding: 10px 0; }

/* Liste compacte des rappels (#reminder-modal) : intitule a gauche, date +
   heure a droite, boutons edition/suppression - voir loadReminderManageList
   dans app.js. */
.reminder-list-item-title { flex: 1; min-width: 0; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-list-item-when { font-size: 0.75rem; color: var(--color-muted); flex-shrink: 0; white-space: nowrap; }

/* Bouton "Me prevenir" (#reminder-form-modal) + ses options (#reminder-notify-modal). */
.reminder-notify-btn { width: 100%; margin-top: 10px; }
.reminder-notify-options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.reminder-notify-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 0.92rem; cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.reminder-notify-option:last-child { border-bottom: none; }
.reminder-notify-option input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

.lang-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.lang-btn {
  flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-bg); cursor: pointer; color: var(--color-text);
}
.lang-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.theme-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.theme-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-bg);
  cursor: pointer; color: var(--color-text); font-size: 0.8rem;
}
.theme-btn.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary) inset; }
.theme-swatch { display: block; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); }
.theme-swatch-light { background: linear-gradient(135deg, #f2f4f8 50%, #2563eb 50%); }
.theme-swatch-natura { background: linear-gradient(135deg, #eae3d3 50%, #4a6741 50%); }
.theme-swatch-dark { background: linear-gradient(135deg, #12161d 50%, #5b8def 50%); }

.field-hint { font-size: 0.82rem; color: var(--color-muted); margin: 0 0 12px; }
.field-hint-warning { color: var(--color-danger); font-weight: 500; }

.reminder-recurring-row { margin-bottom: 16px; }

.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--color-primary); }
.slider-row .slider-value { font-size: 0.8rem; color: var(--color-muted); min-width: 38px; text-align: right; }

/* --- Widget Liste --- */

.list-sync-btn {
  border: none; background: transparent; cursor: pointer; color: var(--color-muted);
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 2px 0; white-space: nowrap;
}
.list-sync-btn:hover { color: var(--color-primary); }

.widget-list .list-add-row { display: flex; gap: 6px; margin-bottom: 8px; }
.widget-list .list-add-input {
  flex: 1; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px;
  font-size: 0.85rem; background: var(--color-surface); color: var(--color-text);
}
.widget-list .list-add-btn {
  border: none; background: var(--color-primary); color: white; border-radius: 6px;
  width: 30px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.widget-list .list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.widget-list .list-item { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border-radius: 6px; }
.widget-list .list-item:hover { background: var(--color-bg-subtle); }
.widget-list .list-item-handle {
  cursor: grab; color: var(--color-muted); font-size: 0.7rem; user-select: none; padding: 0 2px;
}
.widget-list .list-item input[type="checkbox"] { accent-color: var(--color-primary); flex-shrink: 0; }
.widget-list .list-item-text { flex: 1; font-size: 0.88rem; cursor: text; word-break: break-word; }
.widget-list .list-item.done .list-item-text { text-decoration: line-through; color: var(--color-muted); }
.widget-list .list-item-delete {
  border: none; background: transparent; color: var(--color-muted); cursor: pointer;
  font-size: 0.75rem; opacity: 0; transition: opacity 0.15s; flex-shrink: 0;
}
.widget-list .list-item:hover .list-item-delete { opacity: 1; }
.widget-list .list-item-edit-input {
  flex: 1; padding: 2px 4px; border: 1px solid var(--color-primary); border-radius: 4px;
  font-size: 0.88rem; background: var(--color-surface); color: var(--color-text);
}
.widget-list .list-empty { font-size: 0.82rem; text-align: center; padding: 10px 0; margin: 0; }
.widget-list .list-clear-btn {
  border: none; background: transparent; color: var(--color-muted); font-size: 0.75rem;
  cursor: pointer; margin-top: 6px; text-decoration: underline; padding: 0;
}

.icon-dropzone {
  display: flex; align-items: center; gap: 10px; border: 2px dashed var(--color-border);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer; margin-bottom: 16px; color: var(--color-muted);
  font-size: 0.82rem;
}
.icon-dropzone.drag-over { border-color: var(--color-primary); color: var(--color-primary); }
.icon-dropzone img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: #fff; }

.catalog-content { display: flex; flex-direction: column; gap: 18px; }
.catalog-category h3 { margin-bottom: 8px; }
.catalog-sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.catalog-site-card {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border);
  border-radius: 8px; padding: 8px;
}
.catalog-site-card img { width: 24px; height: 24px; border-radius: 4px; }
.catalog-site-card span { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-site-card button { border: none; background: var(--color-primary); color: white; border-radius: 6px; padding: 4px 8px; font-size: 0.75rem; cursor: pointer; }

/* Popup "Changer l'image" : vignettes candidates parmi lesquelles choisir. */
.icon-search-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px;
  margin: 14px 0; min-height: 90px;
}
.icon-search-option {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px; border-radius: 12px; border: 2px solid transparent;
  background: var(--color-bg-subtle); cursor: pointer; transition: border-color 0.12s ease;
}
.icon-search-option img { width: 56px; height: 56px; border-radius: 20%; object-fit: cover; background: #fff; }
.icon-search-option:hover { border-color: var(--color-border); }
.icon-search-option.selected { border-color: var(--color-primary); }
.icon-search-empty { grid-column: 1 / -1; text-align: center; color: var(--color-muted); font-size: 0.85rem; padding: 24px 0; }

/* Toute la zone (texte d'invite + vignettes deja presentes) est la cible du
   glisser-deposer : on peut lacher une photo n'importe ou ici, meme par-dessus
   des vignettes existantes, pas seulement sur une bande dediee. */
.photo-dropzone {
  border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 16px;
  text-align: center; color: var(--color-muted); cursor: pointer; margin-bottom: 16px;
  transition: border-color 0.15s, color 0.15s;
}
.photo-dropzone.drag-over { border-color: var(--color-primary); color: var(--color-primary); }
.photo-dropzone-hint { margin: 0 0 12px; font-size: 0.85rem; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; min-height: 10px; }
.photo-item { position: relative; cursor: grab; }
.photo-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; pointer-events: none; }
.photo-item button {
  position: absolute; top: 4px; right: 4px; border: none; background: rgba(220,38,38,0.9);
  color: white; border-radius: 6px; cursor: pointer; font-size: 0.7rem; padding: 2px 5px;
}
.photo-item.sortable-ghost { opacity: 0.4; }

/* --- Buttons --- */

.btn {
  border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 0.9rem;
  font-weight: 500;
}
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-danger { background: var(--color-danger); color: white; }
.btn-link { background: transparent; color: var(--color-primary); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 10px; font-size: 0.78rem; }

input[type="text"], input[type="email"], input[type="password"] {
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.9rem;
}

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: white; padding: 10px 18px; border-radius: 8px; font-size: 0.85rem; z-index: 200;
}

/* --- Login page --- */

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 32px; width: 100%; max-width: 360px; text-align: center;
}
.login-card input { width: 100%; margin-bottom: 12px; }
.login-message { min-height: 20px; font-size: 0.85rem; color: var(--color-danger); }
.lang-switch-login { margin-bottom: 20px; }
.admin-link { display: inline-block; margin-top: 16px; font-size: 0.8rem; color: var(--color-muted); }
.error-message { color: var(--color-danger); font-size: 0.85rem; }

/* --- Responsive --- */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .favorites-zone { order: 1; }
  #col-left { order: 2; }
  #col-right { order: 3; }
}

/* Sur mobile, role simplifie et volontairement restreint : uniquement la
   liste, le bloc-notes et l'agenda (calendrier + rappels a venir). On
   "aplatit" les deux colonnes (display: contents) pour que leurs widgets
   deviennent des enfants directs de .layout : ainsi l'ordre d'affichage
   (liste, notes, agenda) reste correct meme si l'utilisateur a deplace ces
   widgets entre les colonnes gauche/droite sur desktop. */
@media (max-width: 640px) {
  .layout { padding: 12px; gap: 12px; }

  .favorites-zone,
  .widget:not(.widget-list):not(.widget-notepad):not(.widget-calendar):not(.widget-vault) {
    display: none;
  }

  #col-left, #col-right { display: contents; }

  .widget-list { order: 1; }
  .widget-notepad { order: 2; }
  .widget-calendar { order: 3; }
  .widget-vault { order: 4; }

  .widget { cursor: default; }
  .widget-title { font-size: 0.8rem; }

  /* Liste : plus lisible et plus facile a manipuler au doigt (dont seniors) */
  .widget-list .list-add-row { gap: 10px; margin-bottom: 12px; }
  .widget-list .list-add-input { font-size: 1.15rem; padding: 14px; }
  .widget-list .list-add-btn { width: 48px; font-size: 1.6rem; border-radius: 10px; }

  .widget-list .list-items { gap: 4px; }
  .widget-list .list-item { padding: 10px 4px; gap: 10px; border-radius: 10px; }
  .widget-list .list-item-text { font-size: 1.25rem; line-height: 1.4; }

  .widget-list .list-item-handle {
    font-size: 1.5rem; padding: 8px 10px; line-height: 1; touch-action: none;
  }

  .widget-list .list-item input[type="checkbox"] {
    width: 28px; height: 28px; accent-color: var(--color-primary); flex-shrink: 0;
  }

  /* Pas de croix individuelle sur mobile : le survol (:hover) n'existe pas au
     doigt, et "Effacer les taches terminees" couvre deja le besoin de
     suppression sans multiplier les cibles tactiles a risque. */
  .widget-list .list-item-delete { display: none; }

  .widget-list .list-clear-btn {
    font-size: 1rem; font-weight: 500; text-decoration: none; margin-top: 12px;
    padding: 12px; width: 100%; border-radius: 10px; background: var(--color-bg-subtle);
    color: var(--color-danger);
  }

  /* Bloc-notes : texte et interrupteur agrandis */
  .widget-notepad textarea { font-size: 1.15rem; line-height: 1.5; min-height: 180px; padding: 14px; }
  .widget-notepad .notepad-lock-row { font-size: 1rem; gap: 12px; margin-top: 12px; }
  .widget-notepad .switch { width: 48px; height: 28px; }
  .widget-notepad .switch-slider::before { height: 22px; width: 22px; }
  .widget-notepad .switch input:checked + .switch-slider::before { transform: translateX(20px); }

  /* Coffre-fort : code d'acces (empreinte/PIN via authenticator en attendant
     un vrai deverrouillage biometrique) et liste d'informations agrandis */
  .vault-code-input, .vault-pin-input { font-size: 1.3rem; padding: 14px; letter-spacing: 4px; }
  .vault-unlock-form .btn, .vault-entries-toolbar .btn { font-size: 1.05rem; padding: 12px 16px; }
  .vault-entry-item { padding: 14px; }
  .vault-entry-title { font-size: 1.05rem; }

  /* Modales : boutons plus grands, plus faciles a viser au doigt */
  .modal { padding: 20px; }
  .modal-actions .btn { padding: 13px 18px; font-size: 1rem; }
}

/* --- Page mobile dediee "Ma liste de courses" (scannee via QR code) --- */

.mobile-list-body {
  background: var(--color-bg); color: var(--color-text); min-height: 100vh;
  max-width: 560px; margin: 0 auto; padding-bottom: 24px;
}
.mobile-list-header {
  padding: 20px 18px 8px;
}
.mobile-list-header h1 { font-size: 1.3rem; margin: 0; }

.mobile-list-main { padding: 0 18px; }

.mobile-list-add-row { display: flex; gap: 8px; margin: 12px 0 16px; }
.mobile-list-add-row input {
  flex: 1; min-width: 0; padding: 14px; font-size: 1.05rem; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-family: inherit;
}
.mobile-list-add-row .btn { width: 52px; font-size: 1.6rem; border-radius: 10px; padding: 0; }

/* Liste condensee pour en loger davantage a l'ecran : lignes fines, sans le
   cadre "carte" individuel (juste un separateur), reagencement uniquement
   par glisser-deposer (poignee dediee, comme le widget desktop). */
.mobile-list-items {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
}
.mobile-list-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.mobile-list-item:last-child { border-bottom: none; }
.mobile-list-item.sortable-ghost { opacity: 0.4; }
.mobile-list-item.sortable-drag { background: var(--color-bg-subtle); box-shadow: var(--shadow); }

.mobile-list-item-handle {
  cursor: grab; color: var(--color-muted); font-size: 1.2rem; line-height: 1; user-select: none;
  padding: 6px 4px; touch-action: none; flex-shrink: 0;
}
.mobile-list-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); flex-shrink: 0; }
.mobile-list-item-text { flex: 1; font-size: 0.95rem; word-break: break-word; }
.mobile-list-item.done .mobile-list-item-text { text-decoration: line-through; color: var(--color-muted); }

.mobile-list-empty { text-align: center; padding: 32px 0; color: var(--color-muted); }
.mobile-list-clear-btn { width: 100%; margin-top: 18px; padding: 13px; font-size: 1rem; }

/* --- Petite page popup "Ajouter aux favoris" ouverte par le bookmarklet --- */

.quick-add-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.quick-add-card {
  max-width: 320px; width: 100%; box-shadow: var(--shadow); text-align: center; padding: 28px 24px;
}
.quick-add-title { margin: 0 0 10px; font-size: 1.2rem; }
.quick-add-hint { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.4; }
#qa-label-input {
  width: 100%; padding: 12px 14px; margin-bottom: 6px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 1.05rem;
  text-align: center; font-weight: 600;
}
#qa-label-input:focus { outline: none; border-color: var(--color-primary); }
.quick-add-card .modal-actions { justify-content: center; margin-top: 16px; }
.quick-add-card .btn { flex: 1; }