/* =====================================================================
   Opera Populi : états de l'application (chargement, erreur), notifications,
   dialogue, sélecteur de thème, états occupés
   ===================================================================== */

/* ---------- Chargement initial et erreur de chargement ---------- */
.boot {
  display: grid; place-items: center; align-content: center; gap: var(--sp-4);
  min-height: 62vh; padding: var(--sp-7) var(--gutter); text-align: center; color: var(--text-muted);
}
.boot__tiles { display: grid; grid-template-columns: repeat(3, 1.1rem); gap: 5px; rotate: -6deg; }
.boot__tiles i { aspect-ratio: 1; border-radius: var(--r-xs); background: var(--socket); }
.boot__tiles i:nth-child(odd) { background: color-mix(in srgb, var(--accent) 55%, var(--socket)); }
@media (prefers-reduced-motion: no-preference) {
  .boot__tiles i { animation: boot-blink 1.4s var(--ease-out) infinite; }
  .boot__tiles i:nth-child(3n+2) { animation-delay: .15s; }
  .boot__tiles i:nth-child(3n) { animation-delay: .3s; }
}
@keyframes boot-blink { 50% { opacity: .35; scale: .8; } }
.boot__title { color: var(--text); font-size: var(--fs-xl); }
.boot p { max-width: 36ch; }

/* ---------- Notifications (région live) ---------- */
.toasts {
  position: fixed; z-index: var(--z-toast, 80);
  right: var(--gutter); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  display: grid; gap: .5rem; width: min(24rem, calc(100vw - 2 * var(--gutter)));
  pointer-events: none;
}
@media (max-width: 59.99rem) {
  body[data-view="member"] .toasts { bottom: calc(var(--nav-mobile-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
}
.toast { pointer-events: auto; box-shadow: var(--shadow-lg); animation: pop var(--dur) var(--ease-out); }
.toast p { flex: 1; }
.toast__action { flex: none; min-height: 2rem; }
.toast__close { position: relative; flex: none; display: grid; place-items: center; min-width: 1.75rem; min-height: 1.75rem; border-radius: var(--r-xs); font-weight: var(--fw-bold); line-height: 1; }
.toast__close::after { content: ""; position: absolute; inset: -.5rem; } /* cible tactile de 44 px, rendu inchangé */
/* Écran étroit : le bouton d'action ("Mettre à jour") passe sous le texte, aligné sur lui */
@media (max-width: 26rem) {
  .toast { flex-wrap: wrap; }
  .toast p { flex: 1 1 calc(100% - 5rem); }
  .toast__action { order: 1; margin-left: calc(1.25rem + .7rem); }
}
.toast__close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* ---------- Dialogue natif (modifier le pseudo) ---------- */
.dialog {
  width: min(26rem, calc(100vw - 2 * var(--gutter))); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgb(20 12 8 / .5); }
.dialog__form { padding: clamp(1.25rem, 4vw, 1.75rem); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.dialog__form > h2 { font-size: var(--fs-xl); }
/* Rappel du titre de l'idée à retirer */
.dialog__quote { padding: .6rem .85rem; border-left: 4px solid var(--st-rejected); border-radius: var(--r-xs); background: var(--surface-2); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
/* Étapes d'installation sur iPhone (modale #install-dialog) */
.install-steps { display: grid; gap: .6rem; counter-reset: none; }
.install-steps li { display: flex; align-items: center; gap: .75rem; }
.install-steps__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }
.install-steps__icon .icon { width: 1.35rem; height: 1.35rem; }
/* "Dernière étape : confirme ton adresse email" (modale #verify-dialog, ui/verify-banner.js) */
.dialog--wide { width: min(36rem, calc(100vw - 2 * var(--gutter))); }
.verify-dialog { --gap: var(--sp-4); }
.verify-dialog__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); rotate: -5deg; }
.verify-dialog__icon .icon { width: 1.6rem; height: 1.6rem; }
.verify-address { overflow-wrap: anywhere; }
.verify-steps { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: verify-step; }
.verify-steps li { display: flex; align-items: flex-start; gap: .7rem; counter-increment: verify-step; }
.verify-steps li::before {
  content: counter(verify-step); display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.verify-steps li > span { padding-top: .15rem; }
.verify-spam { border-width: 2px; font-size: var(--fs-md); }
#idea-verify-jump { display: inline-block; } /* "Voir comment confirmer mon email" : jamais coupé en deux lignes */
.verify-sender > span { white-space: nowrap; } /* coupé seulement après "@" et avant "." (<wbr>), jamais au tiret */
/* Actions toujours visibles quand la modale défile (petits écrans) : titre en haut, "J’ai compris" en bas */
.verify-dialog .dialog__actions { position: sticky; bottom: 0; z-index: 1; padding-top: var(--sp-3); background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
/* Petits écrans : modale plus compacte (tient mieux sur la hauteur), boutons pleine ligne */
@media (max-width: 30rem) {
  .verify-dialog { --gap: var(--sp-3); }
  .verify-dialog__icon { display: none; }
  .verify-spam { font-size: var(--fs-sm); }
  .verify-dialog .dialog__actions > * { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Sélecteur de thème (contrôle segmenté compact) ---------- */
.segmented--sm { gap: .35rem; }
.segmented--sm .label { font-size: var(--fs-xs); color: var(--text-muted); }
.segmented--sm .segmented__track { gap: 2px; padding: 3px; border-radius: var(--r-sm); }
.segmented--sm .segmented__opt span { min-height: 2rem; padding: .25rem .5rem; border-radius: var(--r-xs); font-size: var(--fs-xs); flex-direction: row; }
.user-menu__section { padding: .5rem .7rem .7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line); }
.site-footer .segmented--sm { min-width: 15rem; }

/* ---------- Bannière hors ligne, données du cache local ---------- */
.offline-banner { align-items: center; gap: .6rem; font-size: var(--fs-sm); }
.cache-note { display: flex; align-items: center; gap: .4rem; margin-bottom: var(--sp-2); color: var(--text-muted); font-size: var(--fs-xs); font-style: italic; }
/* Vote mis en file hors ligne : "En attente d'envoi" sur la carte du groupe (bordure pointillée) */
.sync-note { color: var(--st-selected-fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.group[data-sync="pending"] { border-style: dashed; border-color: var(--line-strong); }

/* ---------- Web app installée (mode standalone) : en-tête sous la barre d'état (iPhone : black-translucent) ---------- */
/* black-translucent affiche l'heure et la batterie en blanc : bande sombre sous la barre d'état, lisible en thème clair. */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-header::after { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: env(safe-area-inset-top); background: rgb(24 18 14 / .94); }
  html { scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--sp-5)); }
}

/* ---------- États occupés et divers ---------- */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .icon { animation: busy-spin 1s linear infinite; }
@keyframes busy-spin { to { rotate: 360deg; } }
.list-status { padding: var(--sp-5); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.form fieldset:disabled { opacity: .6; }
.stat__value:empty::before, .stat-strip__value:empty::before { content: "\2007"; }

/* ---------- Notifications quotidiennes (ui/push-view.js) : interrupteur du menu du compte, encart d'invitation ---------- */
.push-switch { display: grid; gap: .3rem; }
.push-switch__btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; text-align: left; font-weight: var(--fw-medium); }
.push-switch__label { flex: 1; }
.push-switch__track {
  position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface-2); transition: background-color var(--dur), border-color var(--dur);
}
.push-switch__track::after {
  content: ""; position: absolute; top: 50%; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--text-muted); box-shadow: var(--shadow-sm); translate: 0 -50%; transition: translate var(--dur) var(--ease-out), background-color var(--dur);
}
.push-switch__btn[aria-checked="true"] .push-switch__track { border-color: var(--accent); background: var(--accent); }
.push-switch__btn[aria-checked="true"] .push-switch__track::after { background: var(--accent-ink); translate: 1.05rem -50%; }
.push-switch__btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.push-switch[data-mode="blocked"] .push-switch__track, .push-switch[data-mode="install"] .push-switch__track { border-style: dashed; }
.push-switch__status { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.push-nudge { flex-wrap: wrap; align-items: center; }
.push-nudge p { flex: 1 1 12rem; }
.push-nudge__actions { display: flex; gap: .5rem; margin-left: auto; }

/* ---------- Suppression du compte (ui/account-delete-view.js) : élément du menu du compte, modale #delete-dialog ---------- */
.user-menu__danger { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.user-menu__item--danger { color: var(--st-rejected-fg); }
.user-menu__item--danger:hover { background: var(--st-rejected-bg); }
.delete-dialog { --gap: var(--sp-4); }
.delete-dialog__who { color: var(--text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.delete-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.delete-list li { display: flex; align-items: flex-start; gap: .6rem; }
.delete-list .icon { flex: none; margin-top: .15rem; color: var(--st-rejected-fg); }
.delete-list [data-tone="keep"] .icon { color: var(--st-implemented-fg); }
.delete-dialog__final { display: flex; align-items: center; gap: .5rem; color: var(--st-rejected-fg); }
.delete-progress { display: grid; gap: .45rem; }
.delete-progress__track { display: block; height: .45rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.delete-progress__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--st-rejected-fg); transition: width var(--dur) var(--ease-out); }
.delete-progress__step { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 30rem) {
  .delete-dialog .dialog__actions > * { flex: 1 1 auto; justify-content: center; }
}

/* Sections repliables (ui/collapse.js, 2026-09-27) : repliée, tout ce qui suit l'en-tête est masqué ; bouton Afficher /
   Masquer sous le titre (bouton principal, contrasté), chevron tourné quand la section est ouverte. */
[data-collapsible][data-collapsed] [data-collapse-head] ~ * { display: none !important; }
.collapse-toggle { justify-self: start; }
.collapse-toggle .icon { transition: transform var(--dur) var(--ease-out); }
.collapse-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }