/* Clarté du parcours non technique : cadre (barre latérale, barre du bas, fenêtres de confirmation), Réglages, Historique, connexion. */

/* Barre latérale : rappel de la prochaine étape, sous le choix du site. Un lien discret, jamais un bouton noir. */
.side-next {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--accent-soft);
  color: var(--accent-ink); font-size: var(--fs-small); font-weight: 500; line-height: 1.35; text-decoration: none;
}
.side-next .label { color: var(--accent-ink); }
.side-next:hover { text-decoration: underline; }
@media (min-width: 1025px) { :root[data-sidebar='collapsed'] .side-next { display: none; } }
@media (max-width: 1024px) { .side-next { display: none; } }

/* « Plus » : seulement sur la barre du bas des téléphones et tablettes. */
.nav-more { display: none; }
@media (max-width: 1024px) {
  .nav-extra { display: none; }
  .nav-more { display: flex; position: relative; flex: 1; min-width: 0; max-width: 160px; }
  .nav-more > .nav-item { width: 100%; max-width: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 11.5px; }
  .nav-more > .nav-item.is-current { background: var(--active); color: var(--accent-ink); font-weight: 500; }
  .nav-more > .nav-item.is-current svg { color: var(--accent); }
  .nav-more-menu {
    position: absolute; z-index: 40; right: 0; bottom: calc(100% + 10px); min-width: 220px; padding: 6px; display: grid; gap: 2px;
    background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--float-shadow); animation: pop var(--medium) var(--ease-out); /* taste-skill-ignore : menu flottant */
  }
  .nav-more-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-control); color: var(--text); text-decoration: none; font-size: 15px; }
  .nav-more-item:hover, .nav-more-item.is-current { background: var(--raised); }
  .nav-more-item svg { color: var(--muted); flex: none; }
  .nav-more-item.is-current svg { color: var(--accent); }
  /* Une action en cours : le point animé suit l'Historique dans « Plus », sur le bouton et à côté de l'entrée. */
  .nav-more-item .nav-dot { position: static; margin-left: auto; flex: none; }
}
@media (max-width: 359px) { .nav-more { max-width: none; } }

/* Fenêtres de confirmation : sur téléphone, les boutons s'empilent en entier (le bouton à maintenir ne se coupe plus),
   et le geste est dit sous les boutons, selon l'appareil : la souris (clic) ou le doigt. En attendant la vraie phrase dans
   hold.js (demandée), ce texte visible double la phrase cachée lue par les lecteurs d'écran. */
.hold-btn { white-space: normal; text-align: center; }
.dialog:has(.hold-btn)::after {
  content: "Cliquez et gardez le clic jusqu'à ce que le bouton soit rempli."; display: block; margin-top: 12px;
  font-size: var(--fs-small); color: var(--muted); text-align: right;
}
@media (pointer: coarse) {
  .dialog:has(.hold-btn)::after { content: "Gardez le doigt appuyé jusqu'à ce que le bouton soit rempli."; }
}
@media (max-width: 640px) {
  .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
  .dialog-actions .btn { flex: none; width: 100%; }
  .dialog:has(.hold-btn)::after { text-align: left; }
}

/* Réglages */
.setting-title .pill { margin-left: 8px; vertical-align: 2px; }
.setting > div:last-child { display: grid; gap: 16px; align-content: start; }
.settings-auto-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--body); }
.sign-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.settings .form .xfold-body { padding-top: 4px; }
.settings .btn:disabled { cursor: default; }
.plan-line { font-size: var(--fs-small); color: var(--body); }
.plan-low { padding: 10px 12px; border-radius: var(--radius-control); background: var(--pill-warning-bg); color: var(--pill-warning-ink); font-size: var(--fs-small); font-weight: 500; }
.plan .plan-facts { padding: 0; border-top: 0; }

/* Historique */
.history .detail { display: grid; gap: 14px; align-content: start; }
.history li.has-detail { padding-bottom: 12px; }
.history li.has-detail > .detail { margin-top: 8px; box-shadow: none; border: 1px solid var(--border); }
.hist-fold > summary { list-style: none; cursor: pointer; }
.hist-fold > summary::-webkit-details-marker { display: none; }
.hist-group > .hist-fold > summary.row { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-control); border-top: 1px solid var(--rule); }
.rows > li.hist-group:first-child > .hist-fold > summary.row { border-top: 0; }
.hist-group > .hist-fold > summary.row:hover { background: var(--raised); }
.hist-group > .hist-fold > summary .row-title::after { content: ' ▾'; color: var(--muted); font-weight: 400; }
.hist-group > .hist-fold[open] > summary .row-title::after { content: ' ▴'; }
.hist-more { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0 6px; color: var(--accent-ink); font-size: var(--fs-small); font-weight: 500; }
.hist-more::after { content: '▾'; margin-left: 6px; font-size: 11px; }
.hist-fold[open] > .hist-more::after { content: '▴'; }
.hist-more:hover { text-decoration: underline; }
.hist-sub { margin: 0 0 6px 14px; padding-left: 12px; border-left: 2px solid var(--rule); }
.hist-sub a.row { min-height: 0; }
.hist-sub .row-title { font-size: var(--fs-small); }
.empty-action .btn { margin-top: 12px; }
.progress-fail .btn-primary { flex: none; }
/* Détail ouvert sous sa ligne : son titre est déjà celui de la ligne ; la barre du haut et celle du bas ne le cachent pas. */
.history .rows > li.has-detail, .history .hist-sub > li.has-detail { scroll-margin: 72px 0 96px; }
.history li.has-detail > .detail .progress-title { display: none; }