/* ══════════════════════════════════════════════════════════════════════════════
   Inno Starter — styles PROPRES À L'OUTIL.
   Le chrome (header, boutons, footer, toast, tokens) vient de
   ../shared/innospira-ui.css, lié AVANT ce fichier. Tout est en tokens : les
   couleurs de dossier sont des teintes oklch posées par classe (.c-<clé>), avec
   leurs deux thèmes côte à côte dans light-dark().
   ══════════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══ Couleurs de dossier : une teinte (--h) et une intensité (--k) par clé ═════ */
.c-orange { --h: 69;  --k: 1; }
.c-rouge  { --h: 35;  --k: 1; }
.c-rose   { --h: 355; --k: .9; }
.c-violet { --h: 300; --k: .85; }
.c-bleu   { --h: 262; --k: .85; }
.c-cyan   { --h: 205; --k: .8; }
.c-vert   { --h: 150; --k: .8; }
.c-gris   { --h: 70;  --k: .12; }
.c-orange, .c-rouge, .c-rose, .c-violet, .c-bleu, .c-cyan, .c-vert, .c-gris {
  --fc-bg: light-dark(oklch(0.925 calc(.075 * var(--k)) var(--h)), oklch(0.335 calc(.075 * var(--k)) var(--h)));
  --fc-fg: light-dark(oklch(0.470 calc(.150 * var(--k)) var(--h)), oklch(0.860 calc(.110 * var(--k)) var(--h)));
  --fc-solid: oklch(0.700 calc(.150 * var(--k)) var(--h));
}

/* ═══ Mode épuré : juste la recherche et les favoris ═══════════════════════════ */
.is-minimal .site-header,
.is-minimal .tool-head,
.is-minimal .site-footer { display: none; }
.is-minimal .starter { padding-top: clamp(40px, 14vh, 140px); }
.bar__theme { display: none; }

/* Heure et date : mode épuré seulement, masquables (classe no-clock posée par le
   script inline du <head>, réglage « Heure et date »). */
.clock { display: none; margin: 0 0 26px; text-align: center; }
.is-minimal:not(.no-clock) .clock:not([hidden]) { display: block; }
.is-minimal:not(.no-clock) .starter { padding-top: clamp(28px, 9vh, 100px); }
.clock__time {
  display: block;
  font: 800 clamp(56px, 10vw, 96px)/1 var(--display); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.clock__date {
  display: block; margin-top: 10px;
  font-size: 16px; font-weight: 500; color: color-mix(in oklab, var(--text) 72%, transparent);
}
.clock__date::first-letter { text-transform: uppercase; }
@media (max-width: 520px) { .clock { margin-bottom: 20px; } .clock__date { font-size: 15px; } }
.is-minimal .bar__theme { display: inline-grid; }

/* ═══ Mise en page ═════════════════════════════════════════════════════════════ */
.starter {
  width: 100%; max-width: 860px; margin: 0 auto;
  padding: 26px 24px 48px;
}
@media (max-width: 720px) { .starter { padding: 18px 16px 36px; } }

/* ═══ Recherche ════════════════════════════════════════════════════════════════ */
.search { position: relative; max-width: 640px; margin: 0 auto; }
.search__ico {
  position: absolute; left: 18px; top: 50%; width: 20px; height: 20px;
  transform: translateY(-50%); color: var(--muted-2); pointer-events: none;
}
.search__input {
  width: 100%; box-sizing: border-box;
  font: 500 17px/1.3 var(--font); color: var(--text);
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 16px 52px 16px 50px;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.search__input::placeholder { color: var(--muted-2); }
.search__input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: var(--shadow), 0 0 0 4px var(--brand-wash);
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__kbd {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font: 700 12px/1 var(--mono); color: var(--muted);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px;
  padding: 4px 7px; background: var(--bg-2); pointer-events: none;
}
.search__input:focus ~ .search__kbd { opacity: 0; }
@media (hover: none) { .search__kbd { display: none; } }

.suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.suggest__row {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.suggest__row .tile__icon { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
.suggest__row .tile__fav { width: 20px; height: 20px; }
.suggest__row .tile__letter { font-size: 14px; }
.suggest__row.is-active { background: var(--brand-wash); }
.suggest__main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__sub { font: 400 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.suggest__glyph { background: var(--bg-2); color: var(--muted); }
.suggest__glyph svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .suggest__sub { display: none; } .suggest__row { grid-template-columns: 32px 1fr; } }

/* ═══ Barre d'actions ══════════════════════════════════════════════════════════ */
.bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin: 30px 0 10px; min-height: 36px;
}
.bar__hint { margin-right: auto; font-size: 13px; color: var(--muted); text-wrap: pretty; }
.bar__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px/1 var(--font); color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 8px 13px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.bar__btn svg { width: 17px; height: 17px; }
.bar__btn:hover { background: var(--panel-2); color: var(--text); }
.bar__btn[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.bar__btn:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
@media (max-width: 520px) { .bar__hint { font-size: 12px; } }

/* ═══ Grille de tuiles ═════════════════════════════════════════════════════════ */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
@media (max-width: 520px) { .grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; } }
.grid__empty {
  grid-column: 1 / -1; margin: 6px 0 4px; padding: 18px; text-align: center;
  color: var(--muted); font-size: 14px;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
}

.cell { position: relative; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 100%; padding: 12px 4px 10px; box-sizing: border-box;
  font: inherit; color: var(--text); text-decoration: none;
  background: transparent; border: 0; border-radius: 14px; cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tile:hover { background: var(--panel-2); }
.tile:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.tile:hover .tile__icon { transform: translateY(-2px); box-shadow: var(--shadow); }

.tile__icon {
  position: relative; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); box-sizing: border-box;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.tile__letter {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  font: 800 22px/1 var(--display); background: var(--fc-bg); color: var(--fc-fg);
}
.tile__fav { position: relative; width: 30px; height: 30px; object-fit: contain; opacity: 0; transition: opacity .2s; }
.tile__icon.has-fav .tile__fav { opacity: 1; }
.tile__icon.has-fav .tile__letter { opacity: 0; }

.tile__label {
  max-width: 100%; padding: 0 4px; box-sizing: border-box;
  font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dossier : pastille colorée + compteur */
.folder-badge { background: var(--fc-bg); color: var(--fc-fg); border-color: transparent; }
.folder-badge svg { width: 28px; height: 28px; }
.tile__count {
  position: absolute; right: -5px; bottom: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  box-sizing: border-box; display: grid; place-items: center;
  font: 700 11px/1 var(--mono); color: var(--fc-fg);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}

/* Tuiles « Ajouter » */
.tile--add { color: var(--muted); }
.tile--add .tile__icon { background: transparent; border: 1.5px dashed var(--line-2); box-shadow: none; }
.tile--add .tile__icon svg { width: 24px; height: 24px; }
.tile--add:hover { color: var(--text); }
.tile--add:hover .tile__icon { border-color: var(--brand); color: var(--brand-strong); box-shadow: none; }
.cell--add-folder { display: none; }
.is-editing .cell--add-folder { display: block; }

/* ═══ Mode organisation ════════════════════════════════════════════════════════ */
.cell__del {
  position: absolute; top: 4px; right: calc(50% - 38px); z-index: 2;
  width: 24px; height: 24px; display: none; place-items: center; padding: 0;
  font: 700 16px/1 var(--font); color: var(--danger);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 50%;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.cell__del:hover { background: var(--danger-wash); border-color: var(--danger); }
.is-editing .cell__del { display: grid; }
.is-editing .cell[data-id] { touch-action: none; cursor: grab; }
.is-editing .cell[data-id] .tile { cursor: grab; }
.is-editing .cell[data-id] .tile__icon { animation: wiggle .9s ease-in-out infinite; }
.is-editing .cell[data-id]:nth-child(2n) .tile__icon { animation-delay: -.45s; }
@keyframes wiggle { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
@media (prefers-reduced-motion: reduce) { .is-editing .cell[data-id] .tile__icon { animation: none; } }

.cell.is-dragging { opacity: .25; }
.cell.is-dragging .tile__icon { animation: none; }
.cell--ghost {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  transform-origin: 30% 30%;
}
.cell--ghost .cell__del { display: none; }
.cell--ghost .tile { background: var(--panel); box-shadow: var(--shadow-lg); }
.is-grabbing, .is-grabbing * { cursor: grabbing !important; }
.is-grabbing body { user-select: none; -webkit-user-select: none; }

.cell.is-drop-into .tile__icon,
.cell.is-drop-merge .tile__icon {
  animation: none; transform: scale(1.12);
  outline: 3px solid var(--brand); outline-offset: 3px;
}
.cell.is-drop-merge .tile { background: var(--brand-wash); }

/* ═══ Dialogues (<dialog> natif) ═══════════════════════════════════════════════ */
.dlg {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  box-sizing: border-box; padding: 22px 24px 24px;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg);
}
.dlg::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.dlg[open] { animation: dlg-in .22s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .dlg[open] { animation: none; } }
.dlg--folder { width: min(620px, calc(100vw - 32px)); }

.dlg__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dlg__head .folder-badge {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
}
.dlg__head .folder-badge svg { width: 22px; height: 22px; }
.dlg__title {
  flex: 1; min-width: 0; margin: 0;
  font: 800 1.3rem/1.15 var(--display); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dlg__close, .dlg__icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0;
  font: 400 26px/1 var(--font); color: var(--muted);
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.dlg__icon-btn svg { width: 18px; height: 18px; }
.dlg__close:hover, .dlg__icon-btn:hover { background: var(--panel-2); color: var(--text); }
.dlg__form { display: flex; flex-direction: column; gap: 16px; }
.dlg__actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dlg__actions .btn--primary { margin-left: auto; }
.dlg__move { display: inline-flex; gap: 2px; }
.dlg__move .btn { padding: 8px 12px; }
.dlg__danger { color: var(--danger); }
.dlg__danger:hover { background: var(--danger-wash); }
.dlg__sub { margin: 24px 0 6px; font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dlg__help { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dlg__help--small { font-size: 13px; margin-top: 10px; }
.dlg__row { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg__row .dlg__danger { margin-left: auto; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13px; font-weight: 600; }
.field__opt { font-weight: 400; color: var(--muted); }
.field__input {
  font: 500 15px/1.3 var(--font); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 13px; width: 100%; box-sizing: border-box;
}
.field__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

/* Grille de dossier ouvert */
.grid--folder { max-height: 60dvh; overflow: auto; margin: 0 -6px; padding: 4px 6px; }

/* Choix d'icône (8 × 5) et de couleur */
.icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.icons__opt {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  color: var(--muted); background: var(--bg-2); border: 1px solid transparent;
  border-radius: 10px; cursor: pointer; transition: background .12s, color .12s;
}
.icons__opt svg { width: 22px; height: 22px; }
.icons__opt:hover { color: var(--text); background: var(--panel-2); }
.icons__opt[aria-checked="true"] { background: var(--fc-bg); color: var(--fc-fg); border-color: var(--fc-fg); }
.icons__opt:focus-visible, .colors__opt:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
@media (max-width: 420px) { .icons { gap: 4px; } .icons__opt svg { width: 19px; height: 19px; } }

.colors { display: flex; flex-wrap: wrap; gap: 10px; }
.colors__opt {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--fc-solid); border: 3px solid var(--panel);
  box-shadow: 0 0 0 1px var(--line-2);
}
.colors__opt[aria-checked="true"] { box-shadow: 0 0 0 2px var(--text); }

/* Interrupteurs des réglages */
.switch { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui {
  position: relative; flex-shrink: 0; width: 40px; height: 24px; margin-top: 1px;
  background: var(--line-2); border-radius: 999px; transition: background .18s;
}
.switch__ui::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: var(--panel); border-radius: 50%; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease);
}
.switch input:checked + .switch__ui { background: var(--spark); }
.switch input:checked + .switch__ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.switch__text { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.switch__text small { font-size: 13px; color: var(--muted); line-height: 1.4; }

.howto { border-top: 1px solid var(--line); }
.howto:last-of-type { border-bottom: 1px solid var(--line); }
.howto summary { padding: 10px 2px; font-weight: 600; font-size: 14px; cursor: pointer; }
.howto p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ═══ Barre « Annuler » ════════════════════════════════════════════════════════ */
.undo {
  position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 10px 10px 18px; border-radius: 999px;
  background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-lg);
  font-size: 14px;
}
.undo[hidden] { display: none; }
.undo button {
  font: 700 14px/1 var(--font); color: var(--brand-ink); background: var(--brand);
  border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer;
}

.noscript { text-align: center; color: var(--muted); }

/* ═══ Fonds d'écran ════════════════════════════════════════════════════════════
   Choix rangé dans `ist-bg`, posé en `data-bg` sur <html> par le script inline du
   <head> (zéro flash), avec `data-sky` (moment de la journée) pour le fond « ciel ».
   Sans data-bg : fond uni de la charte. Les images de fond sont des propriétés
   personnalisées, partagées entre le vrai fond (.bgfx) et les vignettes (.bgsw) :
   un fond = une définition. Tout en light-dark(), donc les deux thèmes suivent. */
body {
  --bgi-aube: linear-gradient(165deg,
    light-dark(oklch(.975 .025 85), oklch(.235 .030 70)) 0%,
    light-dark(oklch(.940 .060 65), oklch(.215 .050 45)) 45%,
    light-dark(oklch(.900 .075 30), oklch(.190 .060 10)) 80%,
    light-dark(oklch(.875 .070 350), oklch(.170 .060 330)) 100%);
  --bgi-mesh:
    radial-gradient(60% 55% at 12% 18%, light-dark(oklch(.88 .11 72 / .9), oklch(.45 .12 60 / .7)), transparent 70%),
    radial-gradient(55% 60% at 88% 12%, light-dark(oklch(.84 .09 280 / .85), oklch(.38 .14 275 / .75)), transparent 70%),
    radial-gradient(60% 60% at 80% 95%, light-dark(oklch(.87 .09 355 / .85), oklch(.36 .12 350 / .7)), transparent 70%),
    radial-gradient(55% 55% at 8% 92%, light-dark(oklch(.90 .07 190 / .8), oklch(.34 .08 200 / .65)), transparent 70%),
    var(--bg);
  --bgi-aurore:
    radial-gradient(55% 60% at 15% 15%, light-dark(oklch(.85 .13 70), oklch(.55 .15 65)), transparent 75%),
    radial-gradient(55% 60% at 90% 30%, light-dark(oklch(.80 .12 290), oklch(.45 .18 285)), transparent 75%),
    radial-gradient(60% 55% at 45% 100%, light-dark(oklch(.86 .11 165), oklch(.45 .12 175)), transparent 75%),
    light-dark(oklch(.965 .015 80), oklch(.170 .020 280));
  --bgi-papier:
    radial-gradient(120% 95% at 50% 28%, transparent 52%, light-dark(oklch(.80 .05 60 / .5), oklch(.08 .01 60 / .65)) 100%),
    light-dark(oklch(.955 .020 82), oklch(.205 .014 65));
  --bgi-carnet-dots: light-dark(oklch(.6 .04 60 / .30), oklch(.85 .05 72 / .17));
  --bgi-carnet-halo: light-dark(oklch(.93 .07 75 / .95), oklch(.32 .07 65 / .65));
  --bgi-paysage-sky: linear-gradient(180deg,
    light-dark(oklch(.88 .05 255), oklch(.19 .05 275)) 0%,
    light-dark(oklch(.93 .06 65), oklch(.26 .06 300)) 55%,
    light-dark(oklch(.88 .10 45), oklch(.33 .07 340)) 100%);
  --bgi-ciel-matin: linear-gradient(180deg,
    light-dark(oklch(.88 .05 240), oklch(.25 .05 260)),
    light-dark(oklch(.95 .04 80), oklch(.30 .05 300)) 60%,
    light-dark(oklch(.92 .07 35), oklch(.36 .07 30)));
  --bgi-ciel-midi: linear-gradient(180deg,
    light-dark(oklch(.80 .09 235), oklch(.28 .07 245)),
    light-dark(oklch(.91 .045 220), oklch(.23 .045 240)) 60%,
    light-dark(oklch(.97 .015 90), oklch(.20 .03 230)));
  --bgi-ciel-soir: linear-gradient(180deg,
    light-dark(oklch(.80 .07 290), oklch(.22 .06 290)),
    light-dark(oklch(.86 .10 40), oklch(.30 .09 20)) 62%,
    light-dark(oklch(.86 .12 70), oklch(.40 .10 55)));
  --bgi-ciel-nuit: linear-gradient(180deg,
    light-dark(oklch(.72 .06 265), oklch(.14 .03 265)),
    light-dark(oklch(.84 .04 275), oklch(.20 .05 280)) 70%,
    light-dark(oklch(.90 .03 300), oklch(.24 .05 300)));
  /* Étoiles : invisibles en clair (transparent), sauf le ciel de nuit qui les force. */
  --bgi-stars:
    radial-gradient(1.2px 1.2px at 12% 14%, light-dark(transparent, oklch(.97 .01 80)), transparent),
    radial-gradient(1px 1px at 27% 31%, light-dark(transparent, oklch(.97 .01 80 / .8)), transparent),
    radial-gradient(1.4px 1.4px at 41% 9%, light-dark(transparent, oklch(.97 .01 80)), transparent),
    radial-gradient(1px 1px at 58% 22%, light-dark(transparent, oklch(.97 .01 80 / .7)), transparent),
    radial-gradient(1.2px 1.2px at 76% 12%, light-dark(transparent, oklch(.97 .01 80)), transparent),
    radial-gradient(1px 1px at 88% 34%, light-dark(transparent, oklch(.97 .01 80 / .8)), transparent),
    radial-gradient(1.3px 1.3px at 94% 6%, light-dark(transparent, oklch(.97 .01 80)), transparent);
  --bgi-noise: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bgi-ridge-far: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 400L0 210L120 150L240 190L380 90L520 170L640 120L780 200L900 110L1040 160L1180 70L1320 150L1440 120L1440 400Z'/></svg>");
  --bgi-ridge-mid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 400L0 240L160 170L300 250L460 160L600 230L760 140L920 240L1080 180L1240 250L1440 170L1440 400Z'/></svg>");
  --bgi-ridge-near: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 400L0 260Q240 140 480 240T960 220T1440 200L1440 400Z'/></svg>");
  --ridge-far:  light-dark(oklch(.78 .07 25), oklch(.30 .06 300));
  --ridge-mid:  light-dark(oklch(.66 .09 32), oklch(.24 .05 290));
  --ridge-near: light-dark(oklch(.50 .08 40), oklch(.17 .03 280));
  --grain: light-dark(oklch(.30 .03 55 / .13), oklch(.95 .01 76 / .09));
}

/* La couche de décor : fixe, derrière tout, inerte. */
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
[data-bg] .bgfx { display: block; }
.bgfx > i { position: absolute; display: none; }

[data-bg="aube"] .bgfx   { background: var(--bgi-aube); }
[data-bg="mesh"] .bgfx   { background: var(--bgi-mesh); }
[data-bg="papier"] .bgfx { background: var(--bgi-papier); }
[data-bg="carnet"] .bgfx {
  background:
    radial-gradient(46% 34% at 50% 24%, var(--bgi-carnet-halo), transparent 72%),
    radial-gradient(circle, var(--bgi-carnet-dots) 1.3px, transparent 1.7px) 0 0 / 22px 22px,
    var(--bg);
}
[data-bg="paysage"] .bgfx { background: var(--bgi-stars), var(--bgi-paysage-sky); }
[data-bg="ciel"][data-sky="matin"] .bgfx { background: var(--bgi-ciel-matin); }
[data-bg="ciel"][data-sky="midi"] .bgfx  { background: var(--bgi-ciel-midi); }
[data-bg="ciel"][data-sky="soir"] .bgfx  { background: var(--bgi-ciel-soir); }
[data-bg="ciel"][data-sky="nuit"] .bgfx  {
  background:
    radial-gradient(1.2px 1.2px at 14% 18%, oklch(.97 .01 80 / .8), transparent),
    radial-gradient(1px 1px at 33% 8%, oklch(.97 .01 80 / .7), transparent),
    radial-gradient(1.3px 1.3px at 62% 26%, oklch(.97 .01 80 / .8), transparent),
    radial-gradient(1px 1px at 81% 12%, oklch(.97 .01 80 / .7), transparent),
    radial-gradient(1.2px 1.2px at 92% 40%, oklch(.97 .01 80 / .6), transparent),
    var(--bgi-ciel-nuit);
}

/* Aurore : trois taches floues qui dérivent (figées si moins d'animations demandé). */
[data-bg="aurore"] .bgfx { background: light-dark(oklch(.965 .015 80), oklch(.170 .020 280)); }
[data-bg="aurore"] .bgfx > i {
  display: block; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); opacity: .78;
  animation: ist-drift 26s ease-in-out infinite alternate;
}
[data-bg="aurore"] .bgfx > .a { left: -12vmax; top: -18vmax; background: light-dark(oklch(.85 .13 70), oklch(.55 .15 65)); }
[data-bg="aurore"] .bgfx > .b { right: -18vmax; top: 4vmax; background: light-dark(oklch(.80 .12 290), oklch(.45 .18 285)); animation-duration: 33s; animation-direction: alternate-reverse; }
[data-bg="aurore"] .bgfx > .c { left: 18vmax; bottom: -30vmax; background: light-dark(oklch(.86 .11 165), oklch(.45 .12 175)); animation-duration: 41s; }
@keyframes ist-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(14vw, 9vh) scale(1.15); }
  100% { transform: translate(-8vw, 16vh) scale(.92); }
}
@media (prefers-reduced-motion: reduce) { [data-bg="aurore"] .bgfx > i { animation: none; } }

/* Papier : le grain est un masque de bruit rempli d'une couleur du thème. */
[data-bg="papier"] .bgfx > .a {
  display: block; inset: 0; background: var(--grain);
  -webkit-mask: var(--bgi-noise) 0 0 / 220px; mask: var(--bgi-noise) 0 0 / 220px;
}

/* Paysage : soleil (lune en sombre) + trois crêtes en masques. */
[data-bg="paysage"] .bgfx > .a {
  display: block; width: 17vmin; height: 17vmin; left: 85%; top: 45%; border-radius: 50%;
  background: light-dark(oklch(.92 .12 80), oklch(.93 .03 90));
  box-shadow: 0 0 80px 30px light-dark(oklch(.92 .12 80 / .55), oklch(.93 .03 90 / .18));
}
[data-bg="paysage"] .bgfx > .b,
[data-bg="paysage"] .bgfx > .c,
[data-bg="paysage"] .bgfx > .d { display: block; left: 0; right: 0; bottom: 0; -webkit-mask: no-repeat 0 0 / 100% 100%; mask: no-repeat 0 0 / 100% 100%; }
[data-bg="paysage"] .bgfx > .b { height: 50vh; background: var(--ridge-far);  -webkit-mask-image: var(--bgi-ridge-far);  mask-image: var(--bgi-ridge-far); }
[data-bg="paysage"] .bgfx > .c { height: 37vh; background: var(--ridge-mid);  -webkit-mask-image: var(--bgi-ridge-mid);  mask-image: var(--bgi-ridge-mid); }
[data-bg="paysage"] .bgfx > .d { height: 24vh; background: var(--ridge-near); -webkit-mask-image: var(--bgi-ridge-near); mask-image: var(--bgi-ridge-near); }

/* Fonds chargés : la grille principale (pas celle d'un dossier ouvert) passe sur
   une plaque dépolie, la recherche et les boutons se givrent. */
:is([data-bg="mesh"], [data-bg="aurore"], [data-bg="paysage"], [data-bg="ciel"]) .starter > .grid {
  padding: 14px; border-radius: 24px;
  background: color-mix(in oklab, var(--panel) 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in oklab, var(--panel) 70%, transparent);
  box-shadow: var(--shadow);
}
:is([data-bg="mesh"], [data-bg="aurore"], [data-bg="paysage"], [data-bg="ciel"]) .bar__btn {
  color: var(--text);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:is([data-bg="mesh"], [data-bg="aurore"], [data-bg="paysage"], [data-bg="ciel"]) .search__input {
  background: color-mix(in oklab, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ── Réglage rapide, en bas à droite (popover natif : ouverture, fermeture au
   clic dehors et Échap sans une ligne de JS) ── */
.bgbtn {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
  border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: color .15s, transform .2s var(--ease), box-shadow .15s;
}
.bgbtn[hidden] { display: none; }
.bgbtn svg { width: 20px; height: 20px; }
.bgbtn:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); }
.bgbtn:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
/* Hors mode épuré, le pied de page occupe le bas : on remonte au-dessus. */
:root:not(.is-minimal) .bgbtn { bottom: 92px; }
@media (max-width: 720px) { :root:not(.is-minimal) .bgbtn { bottom: 150px; } }

.bgpop {
  position: fixed; inset: auto 18px 70px auto; margin: 0;
  width: min(340px, calc(100vw - 36px)); box-sizing: border-box; padding: 14px;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
}
:root:not(.is-minimal) .bgpop { bottom: 144px; }
@media (max-width: 720px) { :root:not(.is-minimal) .bgpop { bottom: 202px; } }
.bgpop:popover-open { animation: dlg-in .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .bgpop:popover-open { animation: none; } }
.bgpop__title { margin: 0 0 10px 2px; font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bgpop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.bgopt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0;
  font: 500 12px/1.2 var(--font); color: var(--muted); text-align: center;
  background: none; border: 0; cursor: pointer;
}
.bgopt:hover, .bgopt[aria-checked="true"] { color: var(--text); }
.bgopt:focus-visible { outline: none; }
.bgopt:focus-visible .bgsw { outline: 2px solid var(--brand-strong); outline-offset: 2px; }

/* Vignettes : les mêmes images que les vrais fonds, en miniature. */
.bgsw {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg);
  box-sizing: border-box;
}
.bgopt[aria-checked="true"] .bgsw { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.bgsw--aube   { background: var(--bgi-aube); }
.bgsw--mesh   { background: var(--bgi-mesh); }
.bgsw--aurore { background: var(--bgi-aurore); }
.bgsw--papier { background: var(--bgi-papier); }
.bgsw--papier::after { content: ""; position: absolute; inset: 0; background: var(--grain); -webkit-mask: var(--bgi-noise) 0 0 / 110px; mask: var(--bgi-noise) 0 0 / 110px; }
.bgsw--carnet {
  background:
    radial-gradient(60% 45% at 50% 30%, var(--bgi-carnet-halo), transparent 75%),
    radial-gradient(circle, var(--bgi-carnet-dots) .9px, transparent 1.2px) 0 0 / 7px 7px,
    var(--bg);
}
.bgsw--paysage { background: var(--bgi-paysage-sky); }
.bgsw--paysage::before, .bgsw--paysage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  -webkit-mask: no-repeat 0 0 / 100% 100%; mask: no-repeat 0 0 / 100% 100%;
}
.bgsw--paysage::before { height: 55%; background: var(--ridge-far);  -webkit-mask-image: var(--bgi-ridge-far);  mask-image: var(--bgi-ridge-far); }
.bgsw--paysage::after  { height: 32%; background: var(--ridge-near); -webkit-mask-image: var(--bgi-ridge-near); mask-image: var(--bgi-ridge-near); }
[data-sky="matin"] .bgsw--ciel { background: var(--bgi-ciel-matin); }
[data-sky="midi"]  .bgsw--ciel { background: var(--bgi-ciel-midi); }
[data-sky="soir"]  .bgsw--ciel { background: var(--bgi-ciel-soir); }
[data-sky="nuit"]  .bgsw--ciel { background: var(--bgi-ciel-nuit); }