/* ═══════════════════════════════════════════════════════════════════════════
   NOTRE REFUGE · V44
   Cohérence UX / UI commune
   Cette feuille ne redessine pas les sections : elle harmonise les interactions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Cibles tactiles / clavier ---------- */
:where(
  button,
  [role="button"],
  a.btn,
  .icon-btn,
  .avatar-btn,
  .menu-btn,
  .cal-step,
  .cal-today,
  .settings-back,
  .settings__links button,
  .settings-mobile-nav button
){
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

:where(
  button,
  [role="button"],
  a,
  input,
  select,
  textarea
):focus-visible{
  outline:3px solid color-mix(in srgb,var(--terra) 34%,transparent);
  outline-offset:3px;
}

/* ---------- Boutons : une même hiérarchie partout ---------- */
.btn{
  font-weight:700;
  min-width:0;
}
.btn--primary{
  box-shadow:0 10px 26px -18px color-mix(in srgb,var(--terra) 70%,transparent);
}
.btn--danger{
  box-shadow:none;
}
.btn > svg,
.btn > .icon{
  flex:0 0 auto;
}

:where(
  .dialog__actions,
  .row__actions,
  .backup-actions,
  .admin-actions,
  .sync-actions,
  .recent__actions,
  .invite__actions,
  .backup-simple-hero__actions,
  .device-cloud-card__revoked-actions
){
  align-items:center;
  gap:10px;
}

/* ---------- Menus « … » ---------- */
.menu-btn{
  display:grid;
  place-items:center;
  padding:0!important;
  line-height:1;
}
.menu{
  border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);
  box-shadow:0 18px 46px -24px rgba(31,24,20,.34);
}
.menu :where(button,a){
  min-height:42px;
}

/* ---------- États vides ---------- */
:where(.world-empty,.settings-empty,.recent__empty){
  border-color:color-mix(in srgb,var(--gold) 24%,var(--line));
  background:
    radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 32%),
    color-mix(in srgb,var(--paper) 94%,white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- Réglages : même logique visuelle ---------- */
.settings__card,
.settings-hub-card,
.device-cloud-card,
.media-card,
.sync-live-card{
  border-color:color-mix(in srgb,var(--ink) 10%,var(--line));
}
.settings-hub-card{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.settings-hub-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--terra) 30%,var(--line));
  box-shadow:0 14px 34px -26px rgba(31,24,20,.36);
}
.settings-back{
  min-height:40px;
  text-decoration:none;
  cursor:pointer;
}
.settings-back::before{
  content:"←";
  font-size:.95em;
}

/* ---------- Champs / formulaires ---------- */
.field input,
.field select,
.field textarea{
  min-width:0;
}
.field__hint,
.field__error{
  max-width:68ch;
}

/* ---------- Cartes : actions toujours prévisibles ---------- */
.card,
.memory-card,
.envie,
.horizon,
.capsule,
.echo-book,
.echo-text,
.echo-phrase{
  isolation:isolate;
}
.menu-btn{
  z-index:12;
}

/* ---------- Feedback boutons ---------- */
button:disabled,
.btn:disabled{
  pointer-events:none;
}
button[aria-busy="true"],
.btn[aria-busy="true"]{
  cursor:progress;
}

/* ---------- Mobile ---------- */
@media(max-width:820px){
  :where(
    .btn,
    .icon-btn,
    .avatar-btn,
    .menu-btn,
    .cal-step,
    .cal-today,
    .settings-back
  ){
    min-height:44px;
  }

  .menu-btn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    opacity:.92!important;
  }

  /* Les groupes d'actions suivent tous la même règle :
     1 bouton par ligne si la largeur devient insuffisante. */
  :where(
    .dialog__actions,
    .row__actions,
    .backup-actions,
    .admin-actions,
    .sync-actions,
    .recent__actions,
    .invite__actions,
    .backup-simple-hero__actions,
    .device-cloud-card__revoked-actions
  ){
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    width:100%;
  }

  :where(
    .dialog__actions,
    .row__actions,
    .backup-actions,
    .admin-actions,
    .sync-actions,
    .recent__actions,
    .invite__actions,
    .backup-simple-hero__actions,
    .device-cloud-card__revoked-actions
  ) > .btn{
    width:100%;
  }

  /* Les dialogues utilisent toujours la même zone d'actions confortable. */
  .dialog__actions{
    margin-inline:-4px;
    padding:14px 4px 2px;
  }

  /* Les cartes de Gérer ne font plus "petits liens" difficiles à toucher. */
  .settings-hub-card{
    min-height:84px;
  }

  .settings-back{
    width:max-content;
    max-width:100%;
    padding-inline:14px;
  }

  /* Lisibilité cohérente des métadonnées. */
  :where(
    .card__meta,
    .recent-card__meta,
    .media-card small,
    .device-cloud-card small,
    .settings__card small,
    .cal-agenda-event small
  ){
    font-size:max(.72rem,12px);
    line-height:1.4;
  }
}

@media(max-width:520px){
  :where(
    .dialog__actions,
    .row__actions,
    .backup-actions,
    .admin-actions,
    .sync-actions,
    .recent__actions,
    .invite__actions,
    .backup-simple-hero__actions,
    .device-cloud-card__revoked-actions
  ){
    grid-template-columns:1fr;
  }

  .btn{
    min-height:46px;
    padding-inline:16px;
  }

  .btn--compact{
    min-height:42px;
  }
}

/* ---------- Motion respectueuse ---------- */
@media(prefers-reduced-motion:reduce){
  .settings-hub-card,
  .btn,
  .menu-btn,
  .icon-btn{
    transition:none!important;
  }
}