/* ==========================================================================
   Accueil — coquille : barres, pages (glissement horizontal), dock, responsive
   ========================================================================== */

.app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }

/* Barre supérieure (consultation) */
.topbar { flex: none; height: var(--bar-h); padding: 0 30px 0 34px; display: flex; align-items: center; gap: 10px; }
.topbar__clock { display: flex; align-items: center; gap: 9px; font: 400 11px/1 var(--mono); color: rgba(255, 255, 255, .44); letter-spacing: .09em; }
.topbar__clock::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .5); }
.topbar__spacer, .editbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 7px; }

/* Badge « modifications non exportées » sur le bouton Exporter */
.iconbtn { position: relative; }
.iconbtn__badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--warning); color: #2a1a00;
  font: 500 9px/15px var(--mono); text-align: center; }

/* Barre d'édition : REMPLACE la barre supérieure, même hauteur */
.editbar { flex: none; height: var(--bar-h); padding: 0 22px 0 34px; display: flex; align-items: center; gap: 14px;
  background: rgba(var(--accent-rgb), .13); border-bottom: 1px solid rgba(var(--accent-rgb), .24);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); }
.editbar__label { display: flex; align-items: center; gap: 8px; color: var(--accent-soft); font: 500 11.5px/1 var(--sans); }
.editbar__label .ico { font-size: 14px; stroke-width: 1.7; }

/* Boutons ronds flottants */
.iconbtn { width: 34px; height: 34px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 15px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .11); color: rgba(255, 255, 255, .62);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .14s ease-out, color .14s ease-out; }
.iconbtn:hover { background: var(--hover-btn); color: var(--text-strong); }
.iconbtn--sm { width: 26px; height: 26px; font-size: 13px; }
.iconbtn--on { background: rgba(var(--accent-rgb), .26); border-color: rgba(var(--accent-rgb), .5); color: var(--accent-soft); }

.btn { height: 32px; padding: 0 16px; border-radius: var(--r-pill); font: 500 11.5px var(--sans); }
.btn--solid { background: var(--accent); color: var(--accent-on); }
.btn--ghost { border: 1px dashed rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; font-weight: 400; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-soft); }

/* ---------- Pages : glissement horizontal, scroll vertical ------------ */

.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.track.is-dragging { transition: none; }

.page { flex: none; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px var(--gutter) 78px; display: grid;
  /* minmax(0, 1fr) et non 1fr : sans le minimum explicite, une piste est
     gonflee par le contenu mini de ses cartes et la grille deborde. */
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-flow: row dense; gap: var(--gap); align-content: start;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }

/* Zone sélectionnée en édition. `outline` et non `border` : une bordure
   occuperait de la place et décalerait tout le contenu à son apparition, ce
   qui est exactement ce qu'on ne veut pas d'un simple repère. L'offset négatif
   la ramène à l'intérieur, sinon elle sortirait de la scène. */
.is-editing .page.is-selected {
  outline: 1px solid rgba(var(--accent-rgb), .45);
  outline-offset: -10px;
  border-radius: var(--r-2xl);
}

.fade { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 13, .72)); }

.arrow { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; font-size: 18px; }
.arrow--prev { left: 18px; }
.arrow--next { right: 18px; }
.arrow .ico { stroke-width: 1.6; }
.arrow--prev .ico { transform: rotate(90deg); }
.arrow--next .ico { transform: rotate(-90deg); }

/* Dock de pages */
.dock { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px;
  padding: 7px; border-radius: var(--r-pill); background: var(--glass-dock); border: 1px solid var(--glass-float-border);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--sh-dock); }
.dock__tab { height: 36px; width: 36px; display: grid; place-items: center; border-radius: var(--r-pill); font-size: 16px;
  color: rgba(255, 255, 255, .48); border: 1px solid transparent; }
.dock__tab:hover { color: var(--text-strong); }
.dock__tab[aria-current="true"] { width: auto; gap: 9px; padding: 0 16px 0 13px; display: flex; align-items: center;
  background: rgba(var(--accent-rgb), .22); border-color: rgba(var(--accent-rgb), .45); color: var(--accent-soft); }
.dock__tab.is-drop-hover { border-color: rgba(var(--accent-rgb), .6); color: var(--accent-soft); }
.dock__tab span { display: none; font: 500 12.5px var(--sans); white-space: nowrap; }
.dock__tab[aria-current="true"] span { display: inline; }
.dock__add { width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px dashed rgba(255, 255, 255, .24);
  color: var(--text-3); display: grid; place-items: center; font-size: 14px; }
.dock__add:hover { color: var(--text-strong); border-color: var(--accent); }
.dock__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .14); margin: 0 3px; }

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 1279px) {
  :root { --cols: 3; --gap: 16px; --gutter: 58px; --bar-h: 50px; }
  .card { border-radius: 18px; padding: 15px 15px 13px; }
  .arrow { width: 32px; height: 32px; margin-top: -16px; font-size: 15px; }
  .dock { bottom: 16px; padding: 6px; }
  .dock__tab { width: 32px; height: 32px; }
  .fade { height: 74px; }
  .page { padding-bottom: 74px; }
  .secfull__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  :root { --cols: 1; --gap: 13px; --gutter: 16px; --bar-h: 44px; }
  .topbar, .editbar { padding: 0 16px; gap: 10px; }
  .editbar__label span { display: none; }
  .page { padding: 2px 16px 84px; display: flex; flex-direction: column; }
  .card { border-radius: 18px; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .13); }
  /* Cibles tactiles : jamais moins de 44px, sans casser l'echelle de tailles. */
  .tile-ico { width: max(44px, calc(var(--iconbox) * 1px)); height: max(44px, calc(var(--iconbox) * 1px)); }
  .links[data-mode="icons"] { grid-template-columns: repeat(auto-fill, minmax(min(max(56px, calc(var(--cell) * 1px)), 100%), 1fr)); }
  .links[data-mode="detailed"] .link,
  .links[data-mode="compact"] .link,
  .links[data-mode="table"] .link { padding-top: max(8px, calc(var(--pad) * 1px)); padding-bottom: max(8px, calc(var(--pad) * 1px)); }
  .arrow { display: none; } /* le glissement suffit */
  .dock { bottom: 18px; }
  .fade { height: 96px; }
  .secfull { width: calc(100vw - 24px); padding: 16px; }
  .secfull__grid { grid-template-columns: 1fr; gap: 16px; }
  .toasts { left: 12px; right: 12px; bottom: 96px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
}