/* ==========================================================================
   interactions.css — commandes d'apparence (Thème/Ambiance) & Retour en haut.
   Variables sémantiques uniquement. Les commandes sont masquées sans JS
   (attribut hidden retiré par appearance.js).
   ========================================================================== */

/* --- Conteneur des commandes d'apparence --------------------------------- */
.appearance { position: relative; flex: 0 0 auto; }

/* Bouton disclosure « Apparence » (desktop) */
.appearance-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
}
.appearance-toggle:hover { background: var(--accent); }
.appearance-toggle__icon { font-size: 1em; line-height: 1; }

/* Panneau (popover desktop) */
.appearance-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 70;
  width: 16rem;
  max-width: calc(100vw - var(--gutter) - var(--gutter));
  padding: var(--space-4);
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.appearance-panel.is-open { display: flex; flex-direction: column; gap: var(--space-4); }

/* Groupes de réglages */
.appearance-group { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.appearance-group legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* Radios présentés en segments (contrôles natifs conservés), en grille compacte */
.segmented-radio { display: grid; gap: var(--space-2); }
.appearance-group[data-cols="2"] .segmented-radio { grid-template-columns: repeat(2, 1fr); }
.appearance-group[data-cols="3"] .segmented-radio { grid-template-columns: repeat(3, 1fr); }
.seg-option { position: relative; display: flex; }
.seg-option input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; inset: 0;
  cursor: pointer;
}
.seg-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  border: var(--bw) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.seg-option input:hover + span { background: var(--accent); }
/* État sélectionné : PAS uniquement la couleur → coche + gras + bordure + fond */
.seg-option input:checked + span {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.seg-option input:checked + span::before {
  content: "✓";
  font-weight: 700;
  font-size: 0.9em;
}
/* Focus clavier visible (2px) porté par l'étiquette */
.seg-option input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Tiroir mobile (< 900px) : groupes ouverts, séparés de la navigation -- */
@media (max-width: 899.98px) {
  .appearance {
    width: 100%;
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: var(--bw) solid var(--border);
  }
  .appearance-toggle { display: none; }
  .appearance-panel,
  .appearance-panel.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* --- Bouton « Retour en haut » ------------------------------------------- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: var(--bw) solid var(--primary);
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color var(--transition), border-color var(--transition);
}
.back-to-top:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.back-to-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.back-to-top.is-visible { opacity: 1; transform: none; }
.back-to-top:not(.is-visible) { pointer-events: none; }
.back-to-top__icon { width: 1.25rem; height: 1.25rem; display: block; }

/* Infobulle visible (survol + focus), en plus du nom accessible aria-label */
.back-to-top__tip {
  position: absolute;
  right: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--deep);
  color: var(--on-deep);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.back-to-top:hover .back-to-top__tip,
.back-to-top:focus-visible .back-to-top__tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: background-color var(--transition), border-color var(--transition); }
  .back-to-top__tip { transition: none; }
}